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

@media (max-width:761px){
	
	.ttl{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		letter-spacing: 0.1rem;
		font-size: 2.6rem;
		text-align: left;
		line-height: 138%;
		background: #fff;
		-webkit-background-clip: text;
		color: transparent;
		filter: drop-shadow(20px 20px 10px #00000022);
		margin: 0 0 30px;
	}
	
	.ttl span{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		letter-spacing: 0;
		font-size: 1.8rem;
		display: block;
		color: #fff;
		margin: 0 0 0;
	}
	
	.ttl_center{
		text-align:center;	
	}	
	/* ============================================================
 	main vi 
	==============================================================*/
   
	#main_wrap{
		width: 100%;
		position: relative;
		overflow: hidden;
		background: linear-gradient( to right,  #00b38b 0%,  #119696 28%, #1b7b9c 71%, #245ba1 100%);
		background-size: auto 86%;
		height: 80vh;
		margin: 0 0 80px;
	}

	#main_copy_wrap{
		width: 85%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	
	#main_copy_wrap h1{
		font-family: 'Noto Sans JP', serif;
		font-weight: 700;
		font-size: 2.2rem;
		color: #fff;
		text-align: left;
		letter-spacing: 2px;
		margin: 0 0 28px;
		line-height: 141%;
	}
	#main_copy_wrap h1 span{
		font-size: 1.8rem;
		padding: 0px 22px 0px;
		color: #0f9995;
		background-color: #fff;
		display: table;
		margin: 0 0 15px;
		line-height: 188%;
		letter-spacing: 0;
	}

	#main_copy_wrap .img_box_01 img{
		border-radius: 20px;
		box-shadow: 25px 25px 20px 0 rgb(8 8 8 / 20%);
	}

	
		
	/* ============================================================
 	section 01
	==============================================================*/
	
	#sec01{
		width: 100%;
		padding: 0px 0 50px;
		position: relative;
		z-index: 1;
	}
	
	#sec01 .wrapper{
		padding: 0 3%;
	}

	.case02 #sec01 .img_box_02,	
	.case03 #sec01 .img_box_02{
		width: 90%;
		margin: 0 auto;
	}

	.case03 #sec01 .img_box_03{
		margin: 55px 0 58px;
	}


	#sec01 .txt{
		padding: 37px 6% 50px;
	}
	
	#sec01 .link_wrap{
		margin: 0px auto 0px;
		padding: 0px 6% 30px;
	}
	
	#sec01 .link_wrap a{
		display:block;
		color:#57369d;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.5rem;
		line-height: 160%;
		font-feature-settings: "palt";
		position: relative;
		margin: 0 0 43px 20px;
	}

	#sec01 .link_wrap a:before {
	    content: "";
	    display: block;
	    width: 8px;
	    height: 8px;
	    border-right: solid 2px #57369d;
	    border-bottom: solid 2px #57369d;
	    position: absolute;
	    top: 50%;
	    left: -15px;
	    transform: translate(-50%, -50%) rotate(-45deg);
	}

	#sec01 ul.btn_list{
		text-align: center;
		width: 60%;
		margin: 0 auto;
	}

	#sec01 ul.btn_list a{
		width:100%;
	}

	#sec01 .l_box{
		width: 70%;
		margin: 41px auto;
	}
	
	#sec01 .img_box_01{
		margin: 0 auto;
	}

	#sec01 .award_wrap{
		text-align: center;
		padding: 38px 6% 50px;
		border: 1px solid #a1a1a1;
		margin: 27px 0 0;
	}

	#sec01 .award_wrap .img_box_03{
		width: 80%;
		margin: 0 auto;
	}

	#sec01 .award_wrap ul{
		font-family: 'Noto Sans JP', sans-serif;
		font-size:1.5rem;
		text-indent:-1em;
		margin: 22px 0 0 0;
		text-align: left;
	}

	#sec01 .award_wrap ul li{
		margin:0 0 10px;
		color: #000;
	}

	#sec01 .award_wrap h2{
		font-family: 'Noto Sans JP', sans-serif;
		display: block;
		font-weight: 700;
		font-size: 1.8rem;
		color: #000;
	}

	#sec01 .content_h{
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.5rem;
		margin: 59px 0 0;
		text-align: left;
	}

	#sec01 .content_h .flex{
		justify-content:left;
		margin: 0 0 41px;
	}

	#sec01 .content_h .flex .midasi{
		text-align:center;
		/* width: 88px; */
		padding: 0 14px;
		/* height: 38px; */
		color: #fff;
		margin: 0 33px 0 0;
		background: #01b38b;
		display: inline-block;
		font-size: 1.6rem;
		margin: 0px 0 15px;
	}

	#sec01 .content_h .flex ul{
	}

	#sec01 .content_h .flex ul li{
		margin: 0 0 10px 1em;
		text-indent: -1em;
		color: #000;
		line-height: 1.6;
	}

	#sec01 .content_h .flex ul.number_ul{
		margin:10px 0 0;
	}

	#sec01 .content_h .flex ul.number_ul li{
		margin: 5px 0 10px 1em;
		text-indent: -1em;
		line-height: 1.6;
	}

	#sec01 .glay_box{
		background-color:#f2f1f5;
		border-radius:10px;
		margin: 60px 0 0;
		padding: 32px 7%;
	}

	#sec01 .glay_box h2{
		background:#000;
		display:block;
		text-align:center;
		color:#fff;
		border-radius:10px;
		font-size: 1.8rem;
	}

	#sec01 .glay_box .txt{
		margin: 4px 0 0;
		line-height: 1.6;
		padding: 15px 6% 0;
	}

	#sec01 .ex_box p{
		font-size:1.3rem;
		line-height:1.6em;
		margin: 0 0 0 50px;
		color:#757575;
		position: relative;
		padding: 0;
	}

	#sec01 .ex_box p:before{
		content: "";
		display: block;
		width: 38px;
		height: 38px;
		background-image: url("../img/icon_06.png");
		position: absolute;
		top: 0;
		left: -53px;
	}
	
	/* ============================================================
 	section 02
	==============================================================*/
	
	
	#sec02{
		width: 100%;
		padding: 54px 0 80px;
		position: relative;
		z-index: 1;
		background: linear-gradient( to right,  #00b38b 0%,  #119696 28%, #1b7b9c 71%, #245ba1 100%);
	}
	#sec02:before{
		content: "";
		position: absolute;
		top: -19px;
		background: linear-gradient( to right,  #00b38b 0%,  #119696 28%, #1b7b9c 71%, #245ba1 100%);
		background-size: contain;
		height: 100%;
		width: 100%;
	}
    #sec02 .swiper-container_product{
    	overflow-x: hidden;
    	margin: 16px auto 0;
    	width: 90%;
    }
    #sec02 .swiper-container_product a{
    	display:block;
    	transition: all 0.5s cubic-bezier(0, 0, 0.19, 1) 0s;
    }

	#sec02 .swiper-slide{
		margin:0 0 16px;
	}

	#sec02 h3{
		color:#fff;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.6rem;
		text-align:center;
		margin: 18px 0 0;
	}

	#sec02 .txt_box{
		border-bottom:1px solid #fff;
		padding:0 0 13px;
		position: relative;
	}

	#sec02 .txt_box:before{
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		border-right: solid 1px #fff;
		border-bottom: solid 1px #fff;
		position: absolute;
		top: 46%;
		right:26px;
		transform: translate(0, -50%) rotate(-45deg);
		transition: all 0.3s cubic-bezier(0.13, 0.36, 0.22, 0.96) 0s;
	}

    
	#sec02 .swiper-pagination_p{
		width:90%;
		margin: 0 auto;
	}

	/* Bullets */
	#sec02 .swiper-pagination-bullet {
	  width: 6px;
	  height: 6px;
	  display: inline-block;
	  border-radius: 100%;
	  background: #aab1b5;
	  margin: 0 8px !important;
	}
	
	#sec02 .swiper-pagination-bullet-active {
	  background: #ffffff;
	  opacity: 0.9;
	}
	
	
	
}



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

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

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

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