@charset "utf-8";
/* ------------------------------------------------------------ common */

body{ min-width: 1400px; color: #313131; }
a{ display: block; }
.SP{ display: none; }

.inner{ width: 1100px;  padding: 0 50px; box-sizing: content-box; }


/* ------------------------------------------------------------ fv */
#fv{ height: 900px; position: relative; background: url(../images/bg_fv01.jpg) center/cover no-repeat; }
#fv .fv_inner{ height: 1000px; padding: 110px 0 0; box-sizing: border-box; }

#fv .logo{ width: 368px; position: absolute; top: 50px; left: 30px; }
#fv .logo img{ width: 100%; height: auto; }

#fv .item{ display: block; margin: 0 auto; box-sizing: content-box; padding-left: 35px;}
#fv .item.SP{ display: none; }
#fv p:last-of-type{ position: relative; top: -135px; }

.btn{ position: relative; width: 520px; padding: 28px 10px 28px 50px; box-sizing: border-box; background: #fff462 url(../images/icn_01.svg) calc(50% - 180px) center/25px no-repeat; font-size: 20px; text-align: center; font-weight: 700; margin: 0 auto; color: #313131!important; border: 4px solid #4b4948; border-radius: 20px; box-shadow: 9.642px 11.491px 0px 0px rgba(0, 0, 0, 0.4); }
.btn:after{ position: absolute; top: 32px; right: 25px; content: ""; width: 11px; height: 11px; transform: rotate(45deg); border-top: 2px solid #313131; border-right: 2px solid #313131; }



/* ------------------------------------------------------------ navigation */
#navigation{ padding: 70px 0; }
#navigation nav{ width: 900px; margin: 0 auto; }

#navigation li{ float: left; width: 225px; text-align: center; border-right: 1px solid #c9c9c9; }
#navigation li:first-of-type{ border-left: 1px solid #c9c9c9; }

#navigation li a{ height: 150px; padding: 10px; color: #313131!important; font-size: 18px; line-height: 130%; background: url(../images/icn_arrow.png) center bottom/20px no-repeat; }

#navigation li img{ width: auto; height: 69px; display: block; margin: 0 auto; padding: 0 0 10px; box-sizing: content-box; }
#navigation li:nth-of-type(1) img,
#navigation li:nth-of-type(2) img{ padding: 0 0 20px; }



/* ------------------------------------------------------------ content */
#content{ padding: 100px 0; background: #b1ddde; }
#content .box { display: flex; justify-content: center; align-items: center; padding: 49px 50px 41px; margin: 0 0 50px; background-color: #fff; border-radius: 20px;}
#content .box div { margin-left: 50px; color: #313131;}
#content .box div img { margin-bottom: 0px;}
#content .box div h3 { font-size: 32px; line-height: 1.625; margin-bottom: 7px; font-feature-settings: "palt";}
#content .box div h3 span { display: inline-block; font-weight: 700; line-height: 1.625; background: linear-gradient(transparent 75% , #f7c2c7 75%);}
#content .box div p { font-size: 16px; line-height: 2;}

#content .other { padding: 24px 0; font-size: 32px; color: #00908e; text-align: center; border-radius: 50px; background: url(../images/deco_l.png) calc(50% - 340px) center/30px no-repeat, #fff url(../images/deco_r.png) calc(50% + 340px) center/30px no-repeat; font-weight: 700; letter-spacing: 0.1em; }



/* ------------------------------------------------------------ limited */
#limited{ padding: 100px 0; }



/* ------------------------------------------------------------ cta */
.cta img{ width: 100%; height: auto; margin: 0 auto; }





/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {

/* ------------------------------------------------------------ common */
	body{ width: 100%; min-width: 100%; }
	
	.SP{ display: block; }
	.PC{ display: none; }
	
	.inner{ width: 90%; padding: 0; }



/* ------------------------------------------------------------ fv */
	#fv{ height: 160vw; background: url(../images/bg_fv01-sp.jpg) center/cover no-repeat; }
	#fv .fv_inner{ height: 100%; padding: 5% 0; }
	
	#fv .logo{ width: 55%; top: 15px; left: 15px; }
	
	#fv .item{ padding: 50px 0 40px; width: 100%; height: auto; padding-left: 0;}
	#fv .item.SP{ display: block; }
	#fv .item.PC{ display: none; }
	
	#fv p:last-of-type{ top: -90px; }

	.btn{ width: 90%; padding: 16px 10px 18px 25px; font-size: 12px; border: 2px solid #4b4948; border-radius: 10px; box-shadow: 4px 6px 0px 0px rgba(0, 0, 0, 0.4); background: #fff462 url(../images/icn_01.svg) calc(50% - 110px) center/14px no-repeat;
font-size: 12px; }
	.btn:after{ top: 17px; width: 9px; height: 9px; right: 33px; border-width: 1px; }
	

/* ------------------------------------------------------------ navigation */
	#navigation{ padding: 50px 0; }
	#navigation nav{ width: 100%; }
	
	#navigation li{ width: calc(100% /4); font-feature-settings: "palt"; }
	#navigation li:first-of-type{ border-left: none; }
	#navigation li:last-of-type{ border-right: none; }
	
	#navigation li a{ height: 100px; padding: 5px; font-size: 11px; background: url(../images/icn_arrow.png) center bottom/15px no-repeat; line-height: 150%; }
	#navigation li img{ width: 55%; height: auto; margin: 0 auto; padding: 0 0 5px; }
	#navigation li:nth-of-type(1) img,
	#navigation li:nth-of-type(2) img{ padding: 0 0 10px; }
	
	

/* ------------------------------------------------------------ content */
	#content{ padding: 50px 0; }
	
	#content .box { position: relative; display: block; padding: 38px 25px 20px; margin: 0 0 66px; border-radius: 20px;}
	#content .box img { width: 100%; height: auto;}
	#content .box .flag { width: 55px; height: auto; position: absolute; top: -31px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
	#content .box div { margin: 18px 0 0;}
	#content .box div img { margin-bottom: 0px;}
	#content .box div h3 { font-size: 19px; line-height: 1.526; margin-bottom: 12px;}
	#content .box div h3 span { line-height: 1.526; background: linear-gradient(transparent 75% , #f7c2c7 75%);}
	#content .box div p { font-size: 12px;}
	
	#content .other { line-height: 130%; font-size: 20px; background: url(../images/deco_l.png) calc(50% - 140px) 40px/25px no-repeat, #fff url(../images/deco_r.png) calc(50% + 140px) 40px/25px no-repeat; }



/* ------------------------------------------------------------ limited */
	#limited{ padding: 50px 0; }
	
	#limited img{ width: 100%; height: auto; }



/* ------------------------------------------------------------ cta */




}