/*===============================================
　SP iPhone6以上（画面の横幅が761pxまで）
===============================================*/

@media (max-width:761px){
	
	#sec01 + #main_ttl_wrap {
		height: 240px;
	}
	.pd0{
		padding: 0!important;
	}
    .yt_box{
		width: 100%;
		padding: 0;
		box-sizing: border-box;
		margin: 15px 0 0 0;
		clear: both;
	}
	
	.yt_box .inner {
		padding-top: 56.25%;
		position: relative;
		height: 0;
		overflow: hidden;
	}
	
	.yt_box .inner iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.movie_list li{
		margin: 0 0 150px;
	}

	#sec_movie{
		position: relative;
	}
	#sec_movie li a:hover .h3_box{
		background-color:#000;
	}
	#sec_movie li .h3_box em{
		position: absolute;
		font-size: 7.4rem;
		display: block;
		margin: 28px 0 0 -6px;
		letter-spacing: -0.5rem;
		font-family: 'Alata', sans-serif;
    	font-weight: 500;
		font-style: normal;
		right: 15px;
		top: -110px;
	}
	#sec_movie li .h3_box{
         background-color: rgba(0,190,255,0.8);
         height:114px;
		 margin: 35px 0 0;
         width:290px;
         position:relative;
         bottom:0;
         z-index:2;
         transition: all 0.5s ease 0s;
 }

	#sec_movie li .h3_box_g{
         background-color: rgba(0,195,140,0.75);
 }

	#sec_movie li .h3_box_p{
         background-color: rgba(120,150,240,0.85);
		 float: right;
		 margin: 0 0 20px;
 }

	#sec_movie li .h3_box:after{
		content:"";
		background-color:#000;
		width:10px;
		height:114px;
		position:absolute;
		bottom:0;
		left:0;
		z-index:3;
		
	}
	#sec_movie li  h3 {
		font-weight: 400;
		font-family: 'Noto Serif JP', sans-serif;
		font-size: 2.4rem;
		letter-spacing: 0.2rem;
		color: #fff;
		position: absolute;
		top: 19%;
		left: 31px;
		transition: all 0.5s ease 0s;
	}
	#sec_movie li  h3 span {
		display: block;
		font-size: 1.4rem;
		font-family: 'Noto Sans JP', sans-serif;
	}
	#sec_movie .background-blue {
		position: absolute;
		top: -25px;
		height: 419px;
		width: 82%;
		background: #d5f2f7;
		right: 0;
	}
	#sec_movie .background-gblue {
		position: absolute;
		top: 450px;
		height: 829px;
		width: 82%;
		background: #D5DFF9;
	}
	.movie_list li:nth-child(2) {
		margin: 0 0 100px;
	}


    
	/* ============================================================
 	main vi 
	==============================================================*/
    
    
    #main_ttl_wrap{
		width: 100%;
		height: 60vh;
		position: relative;
		overflow: hidden;
		background: url("../img/mv_bg_sp.jpg") no-repeat center;
		background-size: cover;
	}

	

	#main_ttl_wrap .txt_wrap{
		position: absolute;
		top: 48%;
		width: 100%;
	}
	
	#main_ttl_wrap .txt_wrap h1:after{
		content:"";
		display:block;
		position:absolute;
		bottom: -33px;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color:#fc8418;
		width: 92px;
		height: 7px;
	}
	
	#main_ttl_wrap .txt_wrap h1{
		font-family: 'Noto Serif JP', sans-serif;
		font-weight: 600;
		font-size: 3.4rem;
		color: #000;
		text-align: center;
		letter-spacing: 0.4rem;
		line-height: 120%;
	}

	#main_ttl_wrap span{
		display: block;
		font-family: 'Alata', sans-serif;
		font-weight:200;
		font-size: 2.4rem;
		color: #fff;
		text-align: center;
	}
	
	#main_ttl_wrap .txt_wrap span{
		display:block;
		font-weight: 500;
		font-size: 2.0rem;
		font-family: 'Noto Serif JP', sans-serif;
		color: #000;
		background:none;
		text-align: center;
		letter-spacing: 0.2rem;
		padding:0;
		margin: 18px 0 -12px;
	}
	#main_wrap .txt_wrap p{
		font-family: 'Noto Serif JP', serif;
		font-weight: 400;
		font-size: 1.3rem;
		color: #fff;
		letter-spacing: 0.1rem;
		/* white-space: nowrap; */
		line-height: 160%;
	}

	
    
    
    /* ============================================================
 	common
	==============================================================*/
    
    h2.ttl{
		font-family: 'Noto Serif JP', serif;
		font-weight: 200;
		line-height: 140%;
		font-size: 2.2rem;
		letter-spacing: 0.1rem;
		padding: 5px 0 10px;
	}
	span.eng_txt{
		display:block;
		font-family: 'EB Garamond', serif;
		font-weight: 140;
		font-size: 1.3rem;
		letter-spacing: 0.4rem;
		opacity:0.5;
		text-indent: 3px;
	}
	
	p.body_txt{
		font-family: 'Noto Serif JP', serif;
		font-weight:200;
		font-size: 1.3rem;
		letter-spacing: 0.1rem;
		line-height: 200%;
		padding: 0 0 40px;
	}
    
    
	
	
	/* ============================================================
 	section 01
	==============================================================*/

	#sec01{
		width: 100%;
		position:relative;
	}

	#sec01 .background-blue {
		position: absolute;
		top: 100px;
		height: 100%;
		width: 80%;
		background: #d5f2f7;
	}

	#sec01 h2{
		font-family: 'Alata', sans-serif;
		font-weight: 500;
		font-size: 2.2rem;
		color: #000;
		line-height: 155%;
		position: absolute;
		top: -78px;
		left: 12%;
		z-index: 2;
	}

	#sec01 h2 span{
		font-size: 8.4rem;
		display:block;
		margin: 28px 0 0 -6px;
		letter-spacing: -0.5rem;
	}

	#sec01 ul.flex{
	}

	#sec01 ul.flex li{
		width: 100%;
		position: relative;
		margin: 0 0 136px;
	}


    /* ========　btn_list ==========*/
		
	#sec01 ul.btn_list {
    margin: 0 auto;
    }
    
     #sec01 ul.btn_list li{
         margin: 0 0 48px;
     }
     
     #sec01 ul.btn_list a{
         display: block;
         position: relative;
         transition: all 0.5s ease 0s;
     }
     
     #sec01 ul.btn_list a p{
         transition: all 0.5s ease 0s;     	
     }
     
     #sec01 ul.btn_list a .img_box{
         width: 100%;
         line-height: 0;
     }     
     
     #sec01 ul.btn_list a .img_box img{
         width: 100%;
         line-height: 0;
         transition: all 0.5s ease 0s;
     }

	#sec01 .btn_list li a:hover .img_box img{
		opacity:0.5;
	}

	#sec01 .btn_list li a:hover p{
        right: -15px;
	}

	#sec01 .btn_list li .h3_box{
         background-color: rgba(0,190,255,0.8);

         height:114px;
         width:100%;
         position:absolute;
         bottom:0;
         z-index:2;
 }

	#sec01 .btn_list li .h3_box_g{
         background-color: rgba(0,195,140,0.75);
 }

	#sec01 .btn_list li .h3_box_p{
         background-color: rgba(120,150,240,0.85);
 }

	#sec01 .btn_list li .h3_box:after{
		content:"";
		background-color:#000;
		width:10px;
		height:114px;
		position:absolute;
		bottom:0;
		left:0
		z-index:3;
	}

    #sec01 ul.btn_list a h3{
         font-weight: 400;
         font-family: 'Noto Serif JP', sans-serif;
         font-size: 2.4rem;
         letter-spacing: 0.2rem;
         color: #fff;
         position: absolute;
         top: 19%;
         left: 11%;
         transition: all 0.5s ease 0s;
    }

    #sec01 ul.btn_list a h3 span{
        display:block;
        font-size: 1.4rem;
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    #sec01 ul.btn_list a p{
         font-family: 'Noto Sans JP', sans-serif;
         font-weight: 400;
         font-size: 1.8rem;
         line-height: 140%;
         position: absolute;
         bottom: 14px;
         right: 0;
         transform:translate(0, -50%);
         background: rgba(255,120,0,0.9);
         color: #fff;
         padding: 14px 97px;
     }   


    /* ========　e_btn_list ==========*/
		
	ul.e_btn_list {
		width: 100%;
		margin: 0px auto 60px;
    }
     
    ul.e_btn_list a{
         display: block;
         position: relative;
         transition: all 0.5s ease 0s;
     }
     
    ul.e_btn_list a p{
    	transition: all 0.5s ease 0s;
    }
     
    ul.e_btn_list a .img_box{
         width: 100%;
         line-height: 0;
     }     
     
     ul.e_btn_list a .img_box img{
         width: 100%;
         line-height: 0;
         transition: all 0.5s ease 0s;
     }
     
     ul.e_btn_list a .icon_box{
     	position: absolute;
     	bottom: 20%;
     	right: 10%;
     }
     
     ul.e_btn_list a .icon_box img{
     	width: 30px;
     }

    ul.e_btn_list a h3{
         font-family: 'Noto Serif JP', sans-serif;
         font-weight: 400;
         font-size: 2.8rem;
         line-height: 130%;
         color: #ffffff;
         position: absolute;
         top: 28%;
         left: 10%;
         width: 80%;
         /* transform: translate(-50%, 0); */
         transition: all 0.5s ease 0s;
    }
    
    ul.e_btn_list a p{
         font-family: 'Noto Sans JP', sans-serif;
         font-weight: 400;
         font-size: 1.6rem;
         line-height: 140%;
         position: absolute;
         bottom: 19%;
         left: 10%;
         color: #fff;
     }    	
    
	
	
	
}



/*===============================================
　SP iPhone5サイズ対応　画面の横幅が350pxまで▼▼▼▼▼
===============================================*/

@media (max-width:349px) {
	
}

/*===============================================
　SP iPhone Plus サイズ対応　画面の横幅が415pxまで▼▼▼▼▼
===============================================*/

@media (min-width: 413px) and (max-width: 761px) {
	
}