
/* ============================================================
PC
==============================================================*/

@media (min-width: 762px) {

	
	.ttl{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		letter-spacing: 0.1em;
		font-size: 3.6rem;
		text-align: left;
		background: linear-gradient( to right,  #0d096c 25%, #66339f 75% );
		-webkit-background-clip: text;
		color: transparent;
		filter: drop-shadow(20px 20px 10px #00000022);
	}
	
	.ttl span{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		letter-spacing: 0;
		font-size: 2.2rem;
		display:
		block;
		color:#9b9b9b;
		margin: 0 0 0;
	}
	
	.ttl_center{
		text-align:center;	
	}
	
	/* ============================================================
 	main vi 
	==============================================================*/
       
	#main_wrap{
		width: 100%;
		height: 400px;
		position: relative;
		/* overflow: hidden; */
		background: linear-gradient( to right,  #00b38b 0%,  #119696 28%, #1b7b9c 71%, #245ba1 100%);
		margin: 0 0 260px;
		padding: 164px 0;
	}

	#main_copy_wrap{
		position: relative;
		width: 80%;
		max-width: 1200px;
		min-width: 1050px;
		margin: 0 auto;
	}
	
	#main_copy_wrap h1{
		font-family: 'Noto Sans JP', serif;
		font-weight: 700;
		font-size: 3.0rem;
		color: #fff;
		text-align: left;
		letter-spacing: 2px;
		margin: 0 6% 0;
		line-height: 141%;
		width: 48%;
	}
	#main_copy_wrap h1 span{
		font-size: 1.8rem;
		padding: 0px 22px 0px;
		color: #0c9e93;
		background-color: #fff;
		display: table;
		margin: 0 0 15px;
		line-height: 188%;
		letter-spacing: 0;
	}

	#main_copy_wrap .img_box_01{
		position: absolute;
		right: 0;
		top: 1%;
		max-width: 500px;
		width: 40%;
		min-width: 360px;
	}

	#main_copy_wrap .img_box_01 img{
		
		border-radius:10px;
		box-shadow: 25px 25px 20px 0 rgb(8 8 8 / 20%);
	}
	
	#main_copy_wrap p{
		font-size: 2.2rem;
		line-height: 179%;
		letter-spacing: 0.31em;
		margin: 34px 0 0;
		text-align: center;
		color: #fff;
		position: relative;
		font-family: 'Noto Sans JP', sans-serif;
	}

	#main_copy_wrap p span{
		letter-spacing:-4px;
	}
	
	#main_copy_wrap .copy_body{
		position: relative;
	}
	
	#main_copy_wrap .copy_body:before{
		left: 50%;
	}
	#main_copy_wrap .copy_body:after{
		right: 50%;
	}
	
	#main_copy_wrap .copy_body_act:before{
		width: 20px;
		left: 7%;
		opacity:1;
	}
	#main_copy_wrap .copy_body_act:after{
		width: 20px;
		right:9%;
		opacity:1;
	}

	
	/* ============================================================
 	section 01
	==============================================================*/
	
	#sec01{
		width: 100%;
		padding: 0px 0 150px;
		margin: -155px 0 0;
		position: relative;
		z-index: 1;
	}
	
	#sec01 .wrapper{
		width: 80%;
		max-width: 1120px;
		min-width: 800px;
	}
	
	#sec01 .txt{
		margin: 60px auto 60px;
		width: 80%;
		min-width: 500px;
		max-width: 900px;
	}
	
	#sec01 .link_wrap{
		margin: -20px auto 60px;
		width: 80%;
		min-width: 500px;
		max-width: 900px;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.5rem;
		line-height: 245%;
		font-feature-settings: "palt";
	}
	
	#sec01 .link_wrap a{
		display:block;
		color:#57369d;
		position: relative;
		margin: 0 0 14px 21px;
	}

	#sec01 .link_wrap a:before {
	    content: "";
	    display: block;
	    width: 6px;
	    height: 6px;
	    border-right: solid 2px #57369d;
	    border-bottom: solid 2px #57369d;
	    position: absolute;
	    top: 50%;
	    left: -13px;
	    transform: translate(-50%, -50%) rotate(-45deg);
	}

	#sec01 .link_wrap a:hover{
		color:#a758ff;
		transition: all 0.4s cubic-bezier(0.24, 0.91, 0.54, 1.24) 0s;
	}
	
	#sec01 .img_box_02{
		max-width: 812px;
		margin: 0 auto;
	}

	.case02 #sec01 .img_box_02{
		width: 830px;
	}

	.case03 #sec01 .img_box_02{
		width: 722px;
		margin: 0;
	}

	.case03 #sec01 .img_box_03{
		width: 826px;
		margin: 86px 0 59px;
	}

	.case04 #sec01 .img_box_02{
		max-width: 998px;
	}

	.case06 #sec01 .img_box_02{
		margin: 0 0 41px;
		width:852px;
	}
	
	

	#sec01 ul.btn_list{
		text-align:center;
	}

	#sec01 ul.btn_list a{
		width:30%;
	}

	#sec01 .al_box{
		width:100%;
	}

	#sec01 .award_wrap{
		padding: 30px 40px 15px;
		border: 1px solid #a1a1a1;
		display: flex;
		justify-content: space-around;
		flex-direction: row-reverse;
	}

	#sec01 .award_wrap .img_box_02{
		width: 474px;
	}

	#sec01 .award_wrap ul{
		font-family: 'Noto Sans JP', sans-serif;
		font-size:1.5rem;
		text-indent:-1em;
		margin: 0px 38px 0 0;
	}

	#sec01 .award_wrap ul li{
		margin:0 0 10px;
		color: #000;
	}
	
	#sec01 .award_wrap ul li.ue_li {
        margin: 20px 0 0;
    }

	#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{
		display:flex;
		justify-content:left;
		margin: 0 0 41px;
	}

	#sec01 .content_h .flex .midasi{
		text-align:center;
		width: 244px;
		height: 33px;
		color: #fff;
		margin: 0 33px 0 0;
		background: #01b38b;
		display: inline-block;
		font-size: 1.6rem;
		border-radius: 4px;
	}

	#sec01 .content_h .flex ul{
		width: 800px;
	}

	#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;
		display:flex;
		margin: 60px 0 0;
		padding: 0 5% 0 4%;
	}

	#sec01 .glay_box h2{
		background:#000;
		display:block;
		margin:30px;
		width:180px;
		text-align:center;
		height: 33px;
		color:#fff;
		border-radius:10px;
		font-size: 1.6rem;
	}

	#sec01 .glay_box .txt{
		margin: 25px 0 22px;
		line-height: 1.4;
	}

	#sec01 .ex_box p{
		font-size: 1.2rem;
		margin: 0 0 0 44px;
		color:#757575;
		position: relative;
	}

		#sec01 .ex_box p:before{
		content: "";
		display: block;
		width: 38px;
		height: 38px;
		background-image: url("../img/icon_06.png");
		position: absolute;
		top: 0;
		left: -48px;
	}


	
		
	/* ============================================================
 	section 02
	==============================================================*/
	
	#sec02{
		width: 100%;
		position: relative;
		padding: 53px 0 70px;
		z-index: 1;
		background: linear-gradient( to right,  #00b38b 0%,  #119696 28%, #1b7b9c 71%, #245ba1 100%);
	}
	
	#sec02 .wrapper{
		width: 1000px;
		text-align: center;
	}

	#sec02 .ttl{
		color:#fff;
	}

	#sec02 .ttl span{
		color:#fff;		
	}

	#sec02 h3{
		color:#fff;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.6rem;
		text-align:center;
		margin: 18px 0 0;
	}


    #sec02 .swiper-container_product{
    	margin: 26px 0 0;
    	overflow: hidden;
    	position: relative;
    }

	#sec02 .swiper-wrapper{
		justify-content: space-between;
		display: flex;
	}

	/*#sec02 .swiper-wrapper:after{
		content:"";
		display: block;
		width:30%;		
	}*/

    #sec02 .swiper-container_product .swiper-slide{
		width: 310px;
	}

    #sec02 .swiper-container_product a{
    	display: block;
    	transition: all 0.5s cubic-bezier(0, 0, 0.19, 1) 0s;
    }

	
	#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-slide{
		transition: all 0.3s cubic-bezier(0.13, 0.36, 0.22, 0.96) 0s;
	}

	#sec02 .swiper-slide:hover{
		box-shadow: 25px 25px 20px 0 rgb(40,38,44,0.2);
    	transform: translate(-5px,-5px);		
	}

	#sec02 .swiper-slide:hover .txt_box:before{
		right:18px;
	}
	

}



