@charset "UTF-8";

/*-----------------------------------

	reset, common

-----------------------------------*/

#wrapper_li .pc_li { display: block; }
#wrapper_li .pc_il_li { display: inline-block; }
#wrapper_li .sp_li { display: none !important; }

#wrapper_li a:hover { text-decoration: none; }
#wrapper_li ul { padding: 0; margin: 0; }
#wrapper_li li { list-style: none; }
#wrapper_li i { font-style: normal; }
#wrapper_li .bold_li { font-family: "秀英丸ゴシック B", "Shuei MaruGo B"; font-weight: bold; }
#wrapper_li .deco_li { position: absolute; }
#wrapper_li a { display: block; text-decoration: none !important; }
#wrapper_li a,
#wrapper_li a img { transition: .3s; }
#wrapper_li a:hover img { opacity: .7; }
#wrapper_li img { width: 100%; height: auto; }
#wrapper_li .sp_li { display: none !important; }

#wrapper_li {
	overflow: hidden;
	position: relative;	
	-webkit-font-smoothing: antialiased;
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.15em;
}
#wrapper_li .wrapperInner_li { width: 1080px; margin: 0 auto; }

@media screen and (max-width: 1080px) {
	#wrapper_li .wrapperInner_li { width: 100%; }
}

/*------------------------------------

	title

------------------------------------*/

#wrapper_li #titlearea_li {
	height: 580px;
	position: relative;
	overflow: hidden;
	background: #1FB902;
}
#wrapper_li #titlearea_li .pc_li {
	width: 1920px;
	height: 580px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -960px;
	display: flex;
	justify-content: center;
}
#wrapper_li #titlearea_li .titlebg_li {
	width: 80%;
	display: flex;
	justify-content: space-between;
	height: 100%;
	position: relative;
}
#wrapper_li #titlearea_li .titlebg_li .main01_li,
#wrapper_li #titlearea_li .titlebg_li .main02_li { width: 36%; }
#wrapper_li #titlearea_li .titlebg_li .main02_li { display: flex; align-items: flex-end; }
#wrapper_li #titlearea_li .title_li {
	position: absolute;
	width: 1022px;
	bottom: 0;
	left: 50%;
	margin: 0 auto 0 -511px;
	display: flex;
	justify-content: space-between;
	z-index: 1;
}
#wrapper_li #titlearea_li .title_li .mainTtl_li { width: 42%; }
#wrapper_li #titlearea_li .title_li .main_li { width: 50%; }

@media (max-width: 1920px) {
	#wrapper_li #titlearea_li .pc_li { width: 100%; position: static; margin-left: 0; }
}
@media (max-width: 1030px) {
	#wrapper_li #titlearea_li,
	#wrapper_li #titlearea_li .pc_li { height: auto; }
	#wrapper_li #titlearea_li .title_li {
		width: 90%;
		left: 5%;
		margin: 0;
		position: static;
		padding-top: 10%;
	}
	#wrapper_li #titlearea_li .titlebg_li { position: absolute; width: 100%; left: 0; }
}
@media (max-width: 767px) {
	#wrapper_li #titlearea_li .pc_li { display: none; }
	#wrapper_li #titlearea_li .sp_li { display: block !important; margin-bottom: 0; }
	#wrapper_li .pc_li,
	#wrapper_li .pc_il_li { display: none !important; }
	#wrapper_li .sp_li { display: block !important; }
}

/*------------------------------------

	off

------------------------------------*/

#wrapper_li #off_li { padding: 80px 0 90px; }
#wrapper_li #off_li img { margin-left: -2vw; }
#wrapper_li #off_li .bnr_li img { margin-left: auto; }

@media screen and (max-width: 1080px) {
	#wrapper_li #off_li { padding: 5vw 0 9vw; }
	#wrapper_li #off_li img { width: 90%; margin: 0 auto 0 3%; }
	#wrapper_li #off_li .bnr_li img { width: 100%; margin: 0 auto; }
}
@media (max-width: 767px) {
	#wrapper_li #off_li { padding-top: 9vw; }
	#wrapper_li #off_li img { margin-left: auto; }
}

/*------------------------------------

	how

------------------------------------*/

#wrapper_li #how_li {
	padding: 100px 0;
	background: url(../images/how_bg.jpg) 0 0 / 80px auto repeat;
}
#wrapper_li #how_li .mainTtlArea_li { margin-bottom: 90px; }
#wrapper_li #how_li .mainTtl_li { width: 75%; margin: 0 auto; }
#wrapper_li #how_li .mainTtl_li span { width: 80%; margin: 0 auto 20px; display: block; }
#wrapper_li #how_li .howList_li li,
#wrapper_li #value_li .values_li { position: relative; z-index: 1; }
#wrapper_li #how_li .howList_li li:not(:last-child) { margin-bottom: 100px; }
#wrapper_li #how_li .howList_li li:after,
#wrapper_li #value_li .values_li:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	right: -10px;
	bottom: -10px;
	border-radius: 20px;
	background: #8BCEEB;
	z-index: -1;
}
#wrapper_li #value_li .values_li:after { background: #F5B6C6; }
#wrapper_li #how_li .howList_li .stepWrap_li,
#wrapper_li #value_li .values_li .valueInner_li {	
	background: #fff;
	border-radius: 20px;	
	padding: 7% 10%;
	text-align: center;
}
#wrapper_li #value_li .values_li .valueInner_li { padding: 0; }

#wrapper_li #how_li .step_li { margin: 0 auto; width: 15%; }
#wrapper_li #how_li .step_li img { margin: -160px auto 0; }
#wrapper_li #how_li .howList_li .title_li {
	font-size: min(5vw,34px);
	font-weight: 600;
	text-align: center;
	margin: 2% auto 4%;
}
#wrapper_li #how_li .step1_li .deco_li { width: 13%; top: -30px; right: 2%; }
#wrapper_li #how_li .step2_li .deco_li { width: 13%; top: -10px; left: 4%; }
#wrapper_li #how_li .step2_li .link_li { width: 50%; margin: 0 auto 30px; }
#wrapper_li #how_li .howList_li .summary_li { text-align: center; font-size: min(3.5vw,23px); margin: 0; }
#wrapper_li #how_li .step3_li .img01_li { width: 80%; margin-bottom: 5%; }
#wrapper_li #how_li .step3_li .img02_li { width: 65%; }
#wrapper_li #how_li .step4_li .img01_li { width: 65%; }

#wrapper_li .bnr_li { width: 80%;  margin: 0 auto 40px; }
#wrapper_li .bnr_li .sale_bnr { margin-bottom: 0; }

@media screen and (max-width: 1080px) {
	#wrapper_li #how_li { padding: 8vw 0; }
	#wrapper_li .howList_li { width: 90%; margin: 0 auto; }
	#wrapper_li #how_li .howList_li .stepWrap_li { padding: 3vw 5% 5vw; }
	#wrapper_li #how_li .step_li img { margin-top: -8vw; }
	#wrapper_li #how_li .howList_li li:not(:last-child) { margin-bottom: 80px; }
}
@media (max-width: 767px) {
	#wrapper_li #how_li { padding: 10vw 0 12vw; }
	#wrapper_li #how_li .mainTtlArea_li { margin-bottom: 10vw; }
	#wrapper_li #how_li .mainTtl_li { width: 90%; }
	#wrapper_li #how_li .mainTtl_li span { width: 100%; }
	#wrapper_li #how_li .howList_li li:not(:last-child) { margin-bottom: 12vw; }
	#wrapper_li #how_li .howList_li .stepWrap_li { padding-bottom: 7vw; }
	#wrapper_li #how_li .howList_li .stepWrap_li,
	#wrapper_li #value_li .values_li .valueInner_li { border-radius: 15px; }
	#wrapper_li #how_li .howList_li li:after,
	#wrapper_li #value_li .values_li:after { right: -5px; bottom: -5px; border-radius: 15px; }
	#wrapper_li #how_li .step_li { width: 25%; }
	#wrapper_li #how_li .step2_li .link_li { width: 100%; margin-bottom: 5vw; }
	#wrapper_li #how_li .step2_li .deco_li { width: 20%; top: -5px; }
	#wrapper_li #how_li .howList_li .title_li { margin: 4vw auto 5vw; }
	#wrapper_li #how_li .step3_li .img01_li { width: 100%; margin-bottom: 5vw; }
	#wrapper_li #how_li .step3_li .img02_li { width: 100%; }
	#wrapper_li #how_li .step4_li .img01_li { width: 100%; }
	#wrapper_li .bnr_li { width: 90%;  margin-bottom: 7vw; }
	#wrapper_li .bnr_li .sale_bnr { width: 100%; margin: 0 auto; }
}

/*------------------------------------

	value

------------------------------------*/

#wrapper_li #value_li { background: #FDEDF1; padding: 100px 0; }
#wrapper_li #value_li .mainTtlArea_li { width: 60%; margin: 0 auto 40px; }
#wrapper_li #value_li .mainTtl_li { margin: 0; }
#wrapper_li #value_li .values_li { border-radius: 20px; }
#wrapper_li #value_li .values_li:first-child { margin-bottom: 80px; }
#wrapper_li #value_li .valueList_li .title_li { margin-bottom: 0; }
#wrapper_li #value_li .valueCont_li { padding: 7% 10%; }
#wrapper_li #value_li .benefits_li { width: 90%; margin: 0 auto; }
#wrapper_li #value_li .benefits_li ul {
	display: flex;
	justify-content: center;
	margin-right: -15px;
	margin-bottom: 4vw;
}
#wrapper_li #value_li .benefits_li li { margin-right: 15px; width: calc(100%/4 - 15px); }
#wrapper_li .valueInner_li { position: relative; }
#wrapper_li #friend_li .deco_li { width: 9%; top: 30px; left: 3%; }
#wrapper_li #id_li .deco_li { width: 12%; top: 30px; right: 2%; }
#wrapper_li #value_li .msg_li { width: 80%; margin: 100px auto 0; }

@media screen and (max-width: 1080px) {
	#wrapper_li #value_li { padding: 8vw 0; }
	#wrapper_li #value_li .valueList_li { width: 90%; margin: 0 auto; }
	#wrapper_li #value_li .values_li:first-child { margin-bottom: 7vw; }
	#wrapper_li #value_li .benefits_li ul { margin-bottom: 5vw; }
	#wrapper_li #value_li .valueCont_li { padding: 7% 5%; }
	#wrapper_li #value_li .msg_li { margin-top: 8vw; }
}
@media (max-width: 767px) {
	#wrapper_li #value_li { padding: 10vw 0; }
	#wrapper_li #value_li .mainTtlArea_li { width: 90%; margin-bottom: 5vw; }
	#wrapper_li #value_li .benefits_li { width: 100%; }
	#wrapper_li #value_li .benefits_li ul { margin-right: -5px; }
	#wrapper_li #value_li .benefits_li li { margin-right: 5px; width: calc(100%/4 - 5px); }
	#wrapper_li #friend_li .deco_li { width: 14%; top: -8px; left: 4%; }
	#wrapper_li #id_li .deco_li { width: 17%; top: -8px; right: 2%; }
}