/* ----------------------------------------------------------------------

    東京2020 馬術競技
	
---------------------------------------------------------------------- */


/* --------------------------------------------------
	本文
--------------------------------------------------*/
.main_visual{
    display: flex;
    
}
.main_visual > .img{
    width: 50%;
    flex-shrink: 0;
}
.main_visual > .img > img{
    vertical-align: top;
}
.main_visual > .txt{
    background: #040d3f;
    color: #fff;
    width: 50%;
    position: relative;
    
    display: block;
    
}
.main_visual > .txt > p{
    font-size: 1.5rem;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.07em;
    
}
.cm #movie{
    margin-top: 0;
}
.cm div.movie_block_unit {
    padding: 0;
}

.cm div.movie_list > ul > li div.mov_unit > h3{
    font-size: 1.4rem;
}
/*.cm div.movie_list > ul > li div.mov_unit > h3 small{
    font-size: 1.2rem;
}*/

.cm div.movie_list > ul.col1 > li:nth-child(even) {
    padding: 0;
}
.cm div.movie_list > ul.col1 > li:nth-child(odd){
    padding: 0;
}

.cm div.movie_block_unit {
    padding: 0;
}

.cm div.movie_list > ul > li:nth-child(even) {
    padding: 10px;
}
.cm div.movie_list > ul > li:nth-child(odd){
    padding: 10px;
}
/*.cm div.movie_list > ul > li{
    margin-top: 20px;
}*/
.cm div.movie_block_unit {
    padding: 0;
}

.cm div.movie_list > ul > li div.mov_unit > .content .img .mov_thumb img {
    max-width: 450px;
}
.cm ul.block_list.type1 .block_unit .content .inner .img{
 
    float: none;
    text-align: center;
}
.cm ul.block_list.type2 > li,.cm ul.block_list.type1 > li{
    padding: 10px;
    
}

#movie {
	max-width: 940px;
	margin: 0 auto;
	margin-top: 40px;
	box-sizing: border-box;
	
	width: 100%;
	width: auto;
}

#movie > h1 , #movie > h2 {
	margin: 0 10px;
	margin: 0;
}

#movie > h1 > img , #movie > h2 > img {
	max-width: 215px;
	height: auto;
}

#movie > h1.training > img , #movie > h2.training > img {
	max-width: 112px;
}



div.movie_block_unit {
    
}

div.movie_block_unit > .header {
    padding-bottom: 4px;
    border-bottom: 2px solid #e2e2e2;
    position: relative;
}

div.movie_block_unit > .header:after {
    position: absolute;
    left: 0;
    bottom: -2px;
    content: "";
    width: 120px;
    border-bottom: 2px solid #0cae2f;
}

div.movie_block_unit > .header > .content {
    
}

div.movie_block_unit > .header > .content > p {
    font-size: 1.6rem;
    font-size: 1.8rem;
    font-weight: bold;
    color: #444;
    line-height: 1.4;
    padding: 2px 0;
}


/*
div.movie_list > ul.block_list > li {
    margin-bottom: 30px;
}
*/


div.movie_list > ul {
    font-size:0;
}

div.movie_list > ul > li {
    
    font-size: 1.3rem;
    display: inline-block;
    
    padding: 15px;
    
    width: 50%;
    vertical-align: top;
}

div.movie_list > ul.col1 > li {
    padding:15px 0;
    width: 100%;
}

div.movie_list > ul.col1 > li div.mov_unit > h3 span{
    display: inline;
    font-size: 1.4rem;
}


div.movie_list > ul.no_photo > li { }

div.movie_list > ul > li:nth-child(odd) {
    padding-right: 15px;
    padding-left: 0;
}

div.movie_list > ul > li:nth-child(even) {
    padding-left: 15px;
    padding-right: 0;
}



div.movie_list > ul > li.wide{
    width: 100%;
    padding: 0;
}

div.movie_list > ul > li div.mov_unit {
    
}

div.movie_list > ul > li div.mov_unit > h3 {
    background-color: #1b521f;
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 8px 12px;
    
    
}

div.movie_list > ul > li div.mov_unit > h3 > span {
    display: block;
    font-size: 1.2rem;
}

div.movie_list > ul > li div.mov_unit > .content {
    border: 1px solid #e0e0e0;
    border-top: none;
    padding: 19px;
    
    text-align: center;
}


div.movie_list > ul > li div.mov_unit > .content .img img {
    max-width: 100%;
    vertical-align: top;
}


div.movie_list > ul > li div.mov_unit > .content .img > a {
    display: block;
    position: relative;
}

div.movie_list > ul > li div.mov_unit > .content .img > a div.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    
    transform: translate(-50%, -50%);
}

/*----- キャプション付き　追加 ------*/


div.movie_list > ul > li div.mov_unit.caption > .content {
	display:table;
	width:100%;
}

div.movie_list > ul > li div.mov_unit.caption > .content .img {
	display:table-cell;
	vertical-align:top;
	width:360px;
}

div.movie_list > ul > li div.mov_unit.caption > .content .img img {
	max-width:100%;
	width:100%;
	
}
div.movie_list > ul > li div.mov_unit > .content .img .mov_thumb img{
    
   
    max-width: 360px;
    
}


div.movie_list > ul > li div.mov_unit.caption > .content > .txt {
	display:table-cell;
	vertical-align:top;
	width:auto;
	text-align:left;
	padding-left:30px;
}




.contract > .container{
    display: flex;
}
.contract > .container > .img{
    width: 40%;
    flex-shrink: 0;
    
}
.contract > .container > .img > img{
    vertical-align: top;
}
.contract > .container >.txt{
    width: auto;

}
.link .wrap{
    display: flex;
    flex-wrap: wrap;
}

.link .container{
/*    width: 50%;*/
    display: flex;
    
}
.link .wrap > a{
    display: inline-block;
    width: 50%;
    text-decoration: none;
    margin-top:15px;
    padding: 5px;
}

.link .wrap > a:hover h4,.link .wrap > a:focus h4{
    color: #333;
    transition: 0.3s;
    
}

.link .wrap > a .txt p{
    color: #333;
}

/*.link .wrap > a>.container{
    width: 100%;
}*/
.link .container:nth-child(odd){
    padding-right: 5px;
}
.link .container:nth-child(even){
    padding-left: 5px;
}

.link .container > .img{
    flex-shrink: 0;
    
}
.link .container > .img img{
    vertical-align: top;
}
.link .container > .img a:hover{
    opacity: 0.8;
    transition: 0.3s;
}
.link .container > .img a:hover + .link .container >.txt h4{
    
color: #333;
}

.link .container >.txt{
    margin-left: 25px;
    
}
.link .container >.txt span.opt{
    display: block;
}
.link .container >.txt h4 { 
    line-height: 1.4; 
    }
.link .container >.txt h4 a{
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.4em;
    color: #388e3c;
    color: #028708;
    background: none;
    padding: 0;
    transition: 0.2s;
   
}
.link .container >.txt a:hover{
    color: #333;
}

.result{
    display: flex;
    
}
.result > div:first-child{
    /* width: 32.5%; */
        width: 33.333%;
    flex-shrink: 0; 
    max-width: calc((100% - 40px) / 3);
}
.result > div > img{
    vertical-align: top;
}
.result > div:last-child{
    
    width: auto;
    margin-left: 20px;

}

@media screen and ( max-width : 840px ){
    .link .container >.txt h4.lv5 a{
    font-size: 1.4rem;
}
}



/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {

    .main_visual{
    flex-direction: column;
    
}
.main_visual > .img{
    width:100%;
}
.main_visual > .img > img{
    width: 747px;
}
.main_visual > .txt{
    height: 200px;
    width: 100%;
    font-size: 1.6rem;
}
.main_visual > .txt > p{
    left: 8%;
    transform: translate(0,-50%);

}
.cm div.movie_list > ul > li div.mov_unit > h3 br{
    display: none;
}
.cm .unit a .mov_cap{
        padding: 10px;
    }
    div.movie_list > ul { display: block; }
	div.movie_list > ul > li {
        display: block;
        width: 100%;
    }
	
div.movie_list > ul.col3 > li {
    width: 100%;
}
div.movie_list > ul.col1 > li div.mov_unit > h3 span{
    display: block;
    font-size: 1.2rem;
}

div.movie_list > ul.col3 > li:nth-child(odd) , div.movie_list > ul.col3 > li:nth-child(even) {
	padding:10px 0;
}
    
    div.movie_list > ul > li:nth-child(odd) {
        padding-right: 0;
        padding-left: 0;
    }
    
    div.movie_list > ul > li:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
    }
	
	/*----- キャプション付き　追加 ------*/
   
	div.movie_list > ul > li div.mov_unit.caption > .content {
	display:block;
	width:100%;
	}

	div.movie_list > ul > li div.mov_unit.caption > .content .img {
	display:block;
	width:100%;
	}

	div.movie_list > ul > li div.mov_unit.caption > .content .img img {
	width:100%;
	
	}

	div.movie_list > ul > li div.mov_unit.caption > .content .txt {
	display:block;
	width:100%;
	padding-left:0;
	margin-top:20px;
	}
    
.contract > .container{
    flex-direction: column;
}

.contract > .container >.img{
    margin: 0 auto;
    width: 70%;
}

.contract > .container >.txt{
    width: auto;
    
}
.link .wrap{
    flex: none;
}
.link .wrap >a{
    width:100%;
}

.link .container:nth-child(odd){
    padding-right: 0;
}
.link .container:nth-child(even){
    padding-left: 0;
}

.link .container > .img{
    width: 30%;
}
.link .container >.txt{
    width: auto;
    margin-left: 10px;
}
.link .container >.txt h4.lv5 a{
    font-size: 1.6rem;
}
.link .container >.txt br{
    display: none;
}
    
.link .container >.txt span.opt{
    display: inline;
}
}



/* ------------------------------------------------------------

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
    .result{
    display: block
    
}
.result > div:first-child{
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.result > div > img{
    width: 100%;
    margin: 0 auto;

}
.result > div:last-child{

    width:  100%;
    margin: 20px 0 0;

}

}

/* ------------------------------------------------------------

	526px以下

------------------------------------------------------------ */

@media screen and ( max-width : 526px ) {
.link .container >.txt span.opt{
    display: block;
}
}
/* ------------------------------------------------------------

	479px以下

------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
    .main_visual > .txt{
    height: 160px;
    width: 100%;
    font-size: 1.6rem;
    }
    
    .main_visual > .txt > p{
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 1.4;
    font-size: 1.5rem;

    }
    .cm div.movie_list > ul > li div.mov_unit > h3 br{
    display: block;
    }

    .contract > .container >.img{
    width: 100%;
    
    }
    .link .container{
    display: block;
    }

    .link .container > .img {
    text-align: center;
    width: 100%;
    }
    .link .container >.txt {
    width: auto;
    max-width: 280px;
    margin: 10px auto 0 auto;
    }
    .link .container >.txt h4.lv5 a{
    font-size: 1.6rem;
    
    }
}



@media screen and ( max-width : 385px ) {
    .main_visual > .txt > p{
        /*white-space: normal;*/
        display: inline;
        width: auto;
        padding: 10px;
        font-size: 1.4rem;
        letter-spacing: 0.03em;
    }
   
    
    
}

@media screen and ( max-width : 355px ) {
    .main_visual > .txt > p{
     
        font-size: 1.25rem;

    }