/* ============================================================
PC
==============================================================*/

@media (min-width: 762px) {
	#sec01 + #main_ttl_wrap {
		height: 240px;
	}
	.pd0{
		padding: 0!important;
	}
    .yt_box{
		width: 640px;
		padding: 0;
		box-sizing: border-box;
		margin: 0 30px 0 0;
	}
	
	.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{
		display: flex;
		justify-content: space-between;
		margin: 0 0 150px;
	}
	.movie_list li:nth-child(odd){
		flex-direction: row-reverse;
	}
	.movie_list li:nth-child(odd) .yt_box{
		margin: 0 0 0 30px;
	}
	#sec_movie{
		position: relative;
	}
	#sec_movie li a:hover .h3_box{
		background-color:#000;
	}
	#sec_movie li .h3_box em{
		position: absolute;
		font-size: 8.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);
 }

	#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: -47px;
		height: 349px;
		width: calc(50% + 300px);
		background: #d5f2f7;
		right: 0;
	}
	#sec_movie .background-gblue {
		position: absolute;
		top: 610px;
		height: 819px;
		width: calc(50% + 300px);
		background: #D5DFF9;
	}
	/* ============================================================
 	main vi 
	==============================================================*/
    
    
    
	#main_ttl_wrap{
		width: 100%;
		height: 490px;
		position: relative;
		overflow: hidden;
		background: url("../img/mv_bg.jpg") no-repeat center -50px;
		background-size: cover;
	}
	
	#main_ttl_wrap .txt_wrap h1{
		font-family: 'Noto Serif JP', sans-serif;
		font-weight: 500;
		font-size: 4.6rem;
		color: #000;
		text-align: center;
		letter-spacing: 0.4rem;
		padding: 160px 0 0;
	}
	
	#main_ttl_wrap .txt_wrap h1:after{
		content:"";
		display:block;
		position:absolute;
		bottom: -32px;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color:#fc8418;
		width: 92px;
		height: 7px;
	}

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

	
    
    
    /* ============================================================
 	common
	==============================================================*/
    
    h2.ttl{
		font-family: 'Noto Serif JP', serif;
		font-weight:200;
		font-size: 3.8rem;
		letter-spacing:0.5rem;
		white-space: nowrap;
		padding: 10px 0 10px;
	}
	span.eng_txt{
		display:block;
		font-family: 'EB Garamond', serif;
		font-weight:200;
		font-size: 2.7rem;
		color: #000;
		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.6rem;
		letter-spacing: 0.1rem;
		line-height: 200%;
		width:620px;
		padding: 0 0 40px;
	}
    	
	
	/* ============================================================
 	section 01
	==============================================================*/

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

	#sec01 .background-blue {
		position: absolute;
		top: 103px;
		height: 719px;
		width: 92%;
		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: 38px;
		z-index: 2;
	}

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

	#sec01 ul.flex{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	#sec01 ul.flex li{
		width:300px;
		position: relative;
		margin: 0 0 92px;
	}


    /* ========　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 .h3_box{
		background-color:#000;
	}

	#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;
         transition: all 0.5s ease 0s;
 }

	#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: 31px;
         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: 750px;
		margin: 0 auto 80px;
		}
    
     ul.e_btn_list li{
     }
     
     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;
     	top: 40px;
     	right: 35px;
     }
     
     ul.e_btn_list a .icon_box img{
     	width: 30px;
     }

	.e_btn_list li a:hover .img_box img{
		opacity:0.5;
	}

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

    ul.e_btn_list a h3{
         font-family: 'Noto Serif JP', sans-serif;
         font-weight: 400;
         font-size: 2.8rem;
         color: #ffffff;
         position: absolute;
         top: 20px;
         left: 50%;
         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: 11px;
         left: 50%;
         transform: translate(-50%, 0);
         color: #fff;
         padding: 14px 97px;
     }    	
	
    #sec_more_info .f_btn_list li {
        width: 22%;
    }

}