
/*===============================================
　SP iPhone6以上（画面の横幅が761pxまで）
===============================================*/

@media (max-width:761px){
	#movie{
		margin: -60px auto 0;
		width: 90%;
		padding: 60px 0 0;
	}
	.yt_box{
		margin: 30px 0 0 0;
	}
	.yt_box{
		width: 100%;
		padding: 0;
		box-sizing: border-box;
	}
	
	.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%;
	}



    
	/* ============================================================
 	main vi 
	==============================================================*/
    .sp_only{
		display: inline;
	}
	.mv{
		width: 125%;
		padding: 50px 0 0 0;
	}
	.mv img{
		margin: 0 0 0 -10%;
	}
	#main_ttl_wrap .txt_wrap{
		position: absolute;
		top: 17%;
		width: 100%;
	}
	
	#main_ttl_wrap .txt_wrap span:after{
		content:"";
		display:block;
		position:absolute;
		bottom: -14px;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color:#fff;
		width: 92px;
		height: 7px;
	}
	
	#main_ttl_wrap .txt_wrap span{
		font-family: 'Alata', sans-serif;
		font-weight: 600;
		font-size: 5rem;
		color: #fff;
		text-align: center;
		letter-spacing: 0.4rem;
		font-style: oblique;
		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 h1{
		display:block;
		font-weight: 500;
		font-size: 5vw;
		font-family: 'Noto Serif JP', sans-serif;
		color: #fff;
		background:none;
		text-align: center;
		letter-spacing: 0.2rem;
		padding:0;
		margin: 13px 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%;
	}

	figure{
		padding: 0;
		margin: 0;
	}
	#main_ttl_wrap .txt_wrap {
		position: absolute;
		top: 60px;
		left: 0;
	}
	#main_ttl_wrap .txt_wrap span{
		font-family: 'Alata', sans-serif;
		font-weight: 500;
		font-size: 6vw;
		color: #fff;
		text-align: center;
		letter-spacing: 0.4rem;
		font-style: oblique;
		padding: 15px 0 0;
	}
	
	#main_ttl_wrap .txt_wrap span:after{
		content:"";
		display:block;
		position:absolute;
		bottom: -14px;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color:#fff;
		width: 92px;
		height: 4px;
	}

	#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;
	}
	#sec_lede{
		position: relative;
		padding: 0 0 10px;
	}
	#sec_lede h2{
		display:block;
		font-weight: 500;
		font-size: 5.5vw;
		color: #000;
		background:none;
		letter-spacing: 0.2rem;
		padding:0;
		margin: 40px 0 20px;
		text-align: center;
		font-weight: bold;
	}
	
	#sec_lede p{
		font-weight: 500;
		font-size: 1.4rem;
		text-align: left;
		color: #000;
		letter-spacing: 0.1rem;
		line-height: 180%;
	}
	#sec_lede figure{
		position: absolute;
    width: 689px;
    bottom: -60px;
    left: calc(50% - 1040px);
    z-index: 0;
	}

	.cmn{
		position: relative;
		padding: 0 0 30px;
	}
    .cmn .box{
		width: 100%;
	}
	.cmn .box h2{
		display:block;
		font-weight: 600;
		font-size: 5.5vw;
		color: #000;
		background:none;
		letter-spacing: 0.1rem;
		padding:0;
		margin: 40px 0 20px;
		font-weight: bold;
		line-height: 140%;
		position: relative;
		padding: 0 0 0 90px;
	}
	.cmn .box h2 span{
		display: inline-block;
		background: linear-gradient(180deg, #6DD3B6 0%, #1CBFFC 100%);
		background: -webkit-linear-gradient(-90deg, #6DD3B6 0%, #1CBFFC 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	  }
	.cmn .box p{
		font-weight: 500;
		font-size: 1.4rem;
		color: #000;
		letter-spacing: 0.1rem;
		line-height: 180%;
	}
	.cmn .box .btn{
		display: inline-block;
		font-size: 1.6rem;
		font-weight: bold;
		color: #FC8418;
		border: 2px solid #FC8418;
		padding: 12px 55px;
		margin: 20px 0 0;
		position: relative;
		transition: all 0.3s;
	}
	.cmn .box .btn:after{
		content:"";
		display: block;
		width: 8px;
		height: 8px;
		border-top:2px solid #FC8418;
		border-right:2px solid #FC8418;
		transform: rotate(45deg);
		position: absolute;
		right: 20px;
		top:calc(50% - 5px);
		transition: all 0.3s;
	}
	.cmn .box .btn:hover{
		background: #FC8418;
		color: #fff;
	}
	.cmn .box .btn:hover:after{
		border-top:2px solid #fff;
		border-right:2px solid #fff;
		right: 15px;
	}
	.cmn figure {
		width: 100%;
		position: static;
	}
	#sec_01 h2:before{
		content:"";
		display: block;
		width: 62px;
		height: 57px;
		background: url(../img/num_01.png) no-repeat 0 0 / 100%;
		position: absolute;
		left:0;
		bottom:0;
	}

	#sec_02 h2:before{
		content:"";
		display: block;
		width: 84px;
		height: 57px;
		background: url(../img/num_02.png) no-repeat 0 0 / 100%;
		position: absolute;
		left:0;
		top:10px;
	}


	#sec_03 h2:before{
		content:"";
		display: block;
		width: 83px;
		height: 57px;
		background: url(../img/num_03.png) no-repeat 0 0 / 100%;
		position: absolute;
		left:0;
		top:10px;
	}
	
	#sec_04.cmn .box h2{
		display:block;
		font-weight: 600;
		font-size: 5.5vw;
		color: #000;
		background:none;
		letter-spacing: 0.1rem;
		padding:0;
		margin: 40px 0 20px;
		font-weight: bold;
		line-height: 140%;
		position: relative;
	}
    
    #sec_04{
		padding: 0 0 100px;
	}
	#sec_02 .box h2,
	#sec_03 .box h2 {
		padding: 0 0 0 110px;
	}
    #sec_04 figure{
		position: absolute;
		left:50%;
		top:-70px;
	}
    /* ============================================================
 	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;
	}
    
    
	
	
	/* ============================================================
 	top
	==============================================================*/
	#main_ttl_wrap .orange_wrap{
		position: absolute;
		z-index: 2;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0%);
		background: rgba(255,120,0,0.9);
		padding: 20px 7% 22px;
		width: 75%;
	}

	#main_ttl_wrap .orange_wrap h2{
		font-size: 2.4rem;
		letter-spacing: 0.4rem;
		white-space: nowrap;
		margin: 0 0 10px;
		text-align:center;
		color: #fff;
		font-family: 'Noto Serif JP', sans-serif;
	}

	#main_ttl_wrap .orange_wrap p{
		    font-size: 1.4rem;
		    color: #fff;
		    font-family: 'Noto Sans JP', sans-serif;
		    text-align: justify;
	}
	
	
	/* ============================================================
 	section 01
	==============================================================*/

	#sec01{
		width: 100%;
		padding: 80px 0 0;
	}

	#sec01 p.body_txt{
		padding: 0 0 30px;
	}

	#sec01 h2{
		font-family: 'Alata', sans-serif;
		font-weight: 500;
		font-size: 5.2rem;
		color: #000;
		letter-spacing: 0.1rem;
		text-align: center;
		line-height: 155%;
		margin: 0 0 20px;
	}

	#sec01 .info_wrap{
		background-color:#f3f3f5;
		padding: 27px 36px;
		box-sizing:border-box;
	}

	#sec01 .info_wrap th{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.4rem;
		width: 89px;
		text-align: left;
	}

	#sec01 .info_wrap td{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 300;
		font-size: 1.4rem;
		text-align: left;
	}
    
    #sec01 .txt_wrap{

		position: absolute;
		top: 7%;

		left:calc(50% - 200px);
		transform:translate(-50%, 0);
	}



    /* ========　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 ul.btn_list a h3{
         font-family: 'Noto Serif JP', sans-serif;
         font-weight: 400;
         font-size: 2.4rem;
         color: #fff;
         position: absolute;
         top: 37%;
         left: 14%;
         transition: all 0.5s ease 0s;
         text-shadow: 1px 0 17px #383c4a;
    }
    
    #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: -5%;
         right: 0;
         background: rgba(255,120,0,0.9);
         color: #fff;
         padding: 14px 97px;
     }

    /* ========　y_btn_list ==========*/

	#sec01 ul.y_btn_list {
		margin: 64px 0 0;
		}
    
     #sec01 ul.y_btn_list li{
         width: 100%;
         height: 90px;
         border: 1px solid #e2e2e2;
         position:relative;
         transition: all 0.5s ease 0s;
         margin: 0 0 15px;
     }

     #sec01 ul.y_btn_list li:before{
		content: "";
		display: block;
		width: 10px;
		height:10px;
		border-right: solid 1px #383838;
		border-bottom: solid 1px #383838;
		position: absolute;
		top: 50%;
		right: 7%;
		z-index: 2;
		transform:translate(-50%, -50%) rotate(-45deg);
	}
    
     #sec01 ul.y_btn_list li h3{
     	position: absolute;
     	top: 24%;
     	left: 12%;
     	/* transform: translate(-50%, 0%); */
     	font-family: 'Noto Sans JP', sans-serif;
     	font-weight: 400;
     	font-size: 2.0rem;
     	letter-spacing: 0.2rem;
     }
     
     #sec01 ul.y_btn_list a{
         display: block;
         position: absolute;
         top: 50%;
         left: 50%;
         transform:translate(-50%, -50%);
         width: 95%;
         height: 76px;
         background-color: #c8e6eb;
         transition: all 0.5s ease 0s;
     }
     
     #sec01 ul.y_btn_list a p{
         transition: all 0.5s ease 0s;     	
     }
 
    /* ========　e_btn_list ==========*/
	#sec_05 ul.a_btn_list {
		width: 100%;
		margin: 50px auto 0;
	}
	#sec_05 ul.a_btn_list a{
		font-family: 'Noto Serif JP', sans-serif;
         font-weight: 400;
         font-size: 2.8rem;
         color: #ffffff;
		 background: linear-gradient(90deg, #6DD3B6 0%, #17BEFF 50%, #BACAF7 100%);
		background: -webkit-linear-gradient(-0deg, #6DD3B6 0%, #17BEFF 50%, #BACAF7 100%);
		 display: block;
		 padding: 20px 0;
		 text-align: center;
		 transition: all 0.3s;
	}
	#sec_05 ul.a_btn_list a:after{
		content:"";
		display: block;
		width: 12px;
		height: 12px;
		border-top:2px solid #fff;
		border-right:2px solid #fff;
		transform: rotate(45deg);
		position: absolute;
		right: 20px;
		top:calc(50% - 5px);
		transition: all 0.3s;
	}
	#sec_05 ul.a_btn_list a:hover{
		opacity: 0.5;
	}
	#sec_05 ul.a_btn_list a:hover:after{
		right: 15px;
	}
		
	#sec_05 ul.e_btn_list {
    width: 100%;
    margin: 32px auto 80px;
    }
    
    #sec_05 ul.e_btn_list li{
     }
     
     #sec_05 ul.e_btn_list a{
         display: block;
         position: relative;
         transition: all 0.5s ease 0s;
     }
     
     #sec_05 ul.e_btn_list a p{
         transition: all 0.5s ease 0s;     	
     }
     
	 #sec_05 ul.e_btn_list a .img_box{
         width: 100%;
         line-height: 0;
     }     
     
     #sec_05 ul.e_btn_list a .img_box img{
         width: 100%;
         line-height: 0;
         transition: all 0.5s ease 0s;
     }
     
	 #sec_05 ul.e_btn_list a .icon_box{
     	position: absolute;
     	bottom: 20%;
     	right: 10%;
     }
     
	 #sec_05 ul.e_btn_list a .icon_box img{
     	width: 30px;
     }

	#sec_05 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;
    }
    
    #sec_05 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;
     }    	
    
    /* ============================================================
 	section 02
	==============================================================*/
	
	#sec02{
		margin: 0 0 150px;
	}

	#sec02 h2{
		font-family: 'Noto Serif JP', serif;
		font-weight: 500;
		font-size: 2.4rem;
		color: #000;
		letter-spacing: 0.2rem;
		line-height: 155%;
		white-space: nowrap;
		margin: 70px 0 20px 507px;
	}
    
    #sec02 .txt_wrap{
		margin: 0 0 94px;
	}
    
    #sec02 .txt_wrap p{
    	width: 492px;
    	display: inline-block;
    	font-family: 'Noto Sans JP', sans-serif;
    	font-weight: 300;
    	font-size: 1.4rem;
    	text-align: left;
    }
	#sec02 .img_box_l{
		float:left;
		width: 450px;
		margin: -124px 57px 0 0;
	}
	#sec02 .img_box_r{
		float:right;
		width: 371px;
		margin: 13px 38px 0 0;
	}
    
    
	
	/* ============================================================
 	sec_pafmac 
	==============================================================*/

    #sec_pafmac{
    	position:relative;
    	margin: 0 0 42px;
    }

	#sec_pafmac h2{
		font-family: 'Noto Serif JP', serif;
		font-weight: 500;
		font-size: 3.4rem;
		color: #000;
		letter-spacing: 0.5rem;
		line-height: 155%;
		white-space: nowrap;
	}
	#sec_pafmac h2 span{
		display:block;
		font-size:1.6rem;
		margin:0 0 -20px;
		letter-spacing: 0.3rem;
		font-family: 'Noto Sans JP', sans-serif;
	}
	#sec_pafmac p{
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.4rem;
		line-height: 150%;
	}
	#sec_pafmac .img_box_l{
		width: 100%;
	}

	#sec_pafmac .right_box{
		background-color:#eff0f2;
		box-sizing: border-box;
		padding: 15px 10% 20px;
		margin: -3px 0 0;
	}

	#sec_pafmac .btn_wrap{
	margin: 21px 0 0;
	}


	ul.btn_more{
		width: 100%;
		margin: 0 auto 9px;
		position: relative;
	}

	ul.btn_more a{
		display:block;
		box-sizing:border-box;
		background: #4679c2;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.4rem;
		line-height: 100%;
		letter-spacing: 0.3rem;
		color: #fff;
		text-align:center;
		text-indent: -7px;
		padding: 16px 0;
		position:relative;
		transition: all 0.5s ease 0s;
	}

	ul.btn_more a:before{
		content: "";
		display: block;
		width: 10px;
		height:10px;
		border-right: solid 2px #fff;
		border-bottom: solid 2px #fff;
		position: absolute;
		top: 50%;
		right: 7%;
		transform:translate(-50%, -50%) rotate(-45deg);
	}

	
}



/*===============================================
　SP iPhone5サイズ対応　画面の横幅が350pxまで▼▼▼▼▼
===============================================*/

@media (max-width:349px) {
	
}

/*===============================================
　SP iPhone Plus サイズ対応　画面の横幅が415pxまで▼▼▼▼▼
===============================================*/

@media (min-width: 413px) and (max-width: 761px) {
	
}

