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

@media (max-width:761px){
	
	



    
	/* ============================================================
 	main vi 
	==============================================================*/
    
    
    #main_ttl_wrap{
		width: 100%;
		height: 46vh;
		position: relative;
		overflow: hidden;
		background-size: cover;
	}

	

	#main_ttl_wrap .txt_wrap{
		position: absolute;
		top: 45%;
		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.2rem;
		color: #000;
		text-align: center;
		letter-spacing: 0;
		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;
		padding: 0 0 40px;
	}

	#sec01 .background-blue {
		position: relative;
		top: -55px;
		height: 576px;
		width: 44%;
		z-index: 2;
		background: rgba(0,190,255,0.75);
	}

	#sec01 .l_box{
	}

	#sec01 .r_box{
		width: 90%;
		margin: 39px auto 0;
	}

	#sec01 h2{
		font-family: 'Noto Serif JP', sans-serif;
		font-weight: 500;
		font-size: 3.0rem;
		color: #000;
		line-height: 155%;
		z-index: 2;
		margin: 0 0 35px;
	}
	#sec01 p{
		font-size: 1.4rem;
		font-family: 'Noto Sans JP', sans-serif;
		line-height: 193%;
	}

	#sec01 .h3_box{
		position:absolute;
		color:#fff;
		z-index:50;
		top: 60%;
		left: 20%;
	}

	#sec01 .h3_box h3{
		font-family: 'Noto Serif JP', sans-serif;
		font-size: 2.6rem;
		letter-spacing: 0.3rem;
	}

	#sec01 .h3_box span{
		display:block;
		font-size: 1.4rem;
		font-family:'Noto Sans JP', sans-serif;
		margin: 0 0 9px;
		letter-spacing: 0.1rem;
	}

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

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

    	
	
	/* ============================================================
 	section 02
	==============================================================*/

	#sec02{
		padding: 160px 0 0;
	}

	#sec02 h2{
		font-size: 3.8rem;
		font-family:'Noto Serif JP', sans-serif;
		position:relative;
		margin: 0 0 56px 34px;
		line-height: 147%;
		letter-spacing: 0.4rem;
		font-weight: 600;
	}

	#sec02 h2:before{



		content:"";
		position:absolute;
		top: -44px;
		left: -30%;
		background: rgba(0,190,255,0.25);
		width: 100%;
		height: 381px;
		z-index: 0;
	}

	#sec02 h2:after{
		content:"";
		position:absolute;
		top: 25px;
		left: -77px;
		background: #00beff;
		width: 48px;
		height: 10px;
	}

    #sec02 .box_b{
    	position:relative;
    	margin: 0 0 134px;
    }

    #sec02 ul.btn_list{
    	width: 100%;
    }
    
    #sec02 ul.btn_list li{
    	position:relative;
    }

    #sec02 ul.btn_list a .img_box{
        width: 100%;
        line-height: 0;
     }     
     
    #sec02 ul.btn_list a .img_box img{
        width: 100%;
        line-height: 0;
        transition: all 0.5s ease 0s;
    }

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

    #sec02 .p_btn_box{
    	position:absolute;
    	top: 29px;
    	background: rgba(0,190,255,0.8);
    	padding: 28px 5%;
    	width: 62%;
    	box-sizing: border-box;
    }

    #sec02 .p_btn_box p{
    	color:#fff;
    	font-size: 1.6rem;
    	font-family: 'Noto Sans JP', sans-serif;
    	font-weight: 400;
    	line-height: 120%;
    }

    #sec02 .p_btn_box p span{
    	display:block;
    	font-size: 3.0rem;
    	font-family: 'Alata', sans-serif;
    	margin: 0 0 15px;
    }

    #sec02 ul.material{
    	background: rgba(0,190,255,0.1);
    	padding: 118px 5% 18px 5%;
    	width: 100%;
    	margin: -29px 0 0 -3%;
    }

    #sec02 ul.material li{
    	width: 80%;
    	background-color:#fff;
    	padding: 30px 10% 32px;
    	margin: 0 0 55px;
    	position: relative;
    	border-left:1px solid #00beff;
    }

	#sec02 ul.material li:before{
		content: "";
		display: block;
		width: 50px;
		height:50px;
		background: #ffffff;
		position: absolute;
		bottom: -4px;
		left: 50%;
		transform:translate(-50%, 0) rotate(-45deg);
	}



	#sec02 ul li .l_box{
	}

	#sec02 ul li .r_box{
		margin: 13px 0 0;
		position: relative;
		background: #e5f8ff;
	}

	#sec02 ul li .r_box .img_box{
		position:absolute;
		width: 60%;
		bottom: 0;
		right: -13%;
	}

	#sec02 ul li h3{
		line-height: 160%;
		font-size: 2.8rem;
		font-family:'Noto Serif JP', sans-serif;
		position:relative;
		margin: -50px 0 15px;
	}

	#sec02 ul li h3 span{
		display:block;
		font-family: 'Alata', sans-serif;
		color: #00beff;
		font-size: 5rem;
		margin: 0 0 12px;
	}

	#sec02 ul li h4{
		font-size: 1.4rem;
		font-family:'Noto Sans JP', sans-serif;
		line-height: 180%;
		
	}

	#sec02 ul li h4.ww{
		margin:0 -10px 0 0;
	}

	#sec02 ul li p{
		font-size: 1.4rem;
		font-family:'Noto Sans JP', sans-serif;
		line-height: 193%;
	}

	#sec02 ul li h5{
		font-size: 1.4rem;
		font-family:'Noto Sans JP', sans-serif;
		line-height: 193%;
		background-color:#00beff;
		box-sizing: border-box;
		padding: 0 15px;
		color: #fff;
	}

	#sec02 ul .r_box p{
		font-size: 1.2rem;
		font-family: 'Noto Sans JP', sans-serif;
		line-height: 180%;
		padding: 14px 15px;
		background: #e5f8ff;
		width: 47%;
	}


	/* ====purple=====*/

	#sec02 .box_b:nth-child(2) h2:before{
		background: rgba(120,150,240,0.2);
	}

	#sec02 .box_b:nth-child(2) h2:after{
		background: #7896f0;
	}
    #sec02 .box_b:nth-child(2) .p_btn_box{
    	background: rgba(120,150,240,0.8);
    }    

    #sec02 .box_b:nth-child(2) ul.material{
    	background: rgba(120,150,240,0.1);
    }

    #sec02 .box_b:nth-child(2) ul.material li{
    	border-left:1px solid #7896f0;
    }

    #sec02 .box_b:nth-child(2) ul li h3 span {
		color: #7896f0;
	}

	#sec02 .box_b:nth-child(2) ul li h5{
		background-color: #7896f0;
	}

	#sec02 .box_b:nth-child(2) ul .r_box p{
		background: #f1f4fd;
	}

	#sec02 .box_b:nth-child(2) ul li .r_box {
		background: #f1f4fd;
	}



	/* ====green=====*/

	#sec02 .box_b:nth-child(3) h2:before{
		background: rgba(0,210,150,0.2);
	}

	#sec02 .box_b:nth-child(3) h2:after{
		background: #00d296;
	}
    #sec02 .box_b:nth-child(3) .p_btn_box{
    	background: rgba(0,210,150,0.8);
    }    

    #sec02 .box_b:nth-child(3) ul.material{
    	background: rgba(0,210,150,0.1);
    }

    #sec02 .box_b:nth-child(3) ul.material li{
    	border-left:1px solid #00d296;
    }

    #sec02 .box_b:nth-child(3) ul li h3 span {
		color: #00d296;
	}

	#sec02 .box_b:nth-child(3) ul li h5{
		background-color:#00d296;
	}

	#sec02 .box_b:nth-child(3) ul .r_box p{
		background: #ebffef;
	}

	#sec02 .box_b:nth-child(3) ul li .r_box {
		background: #ebffef;
	}


    	
	
	/* ============================================================
 	section 03
	==============================================================*/

	#sec03{
	}


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

    #sec03 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;
    }
    
    #sec03 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) {
	
}