@charset "UTF-8";

/* ================================================================================
kv
================================================================================ */
@media print, screen
{

#kv{	padding: 0;	}
#kv > .inner
{
	max-width: calc(var(--pageW) + var(--pageP) * 2);
	padding: 0 0 calc(35 * var(--u));
}

#kv h1
{
	position: absolute;
	top: calc(130 * var(--u));

	width: 100%;

	font-size: var(--fzu64);
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
}
#kv h1 span
{
	color: var(--Corange1);
	font-size: var(--fzu92);
	font-weight: 700;
}
#kv .image1{	margin: 0 auto calc(25 * var(--v));	}
#kv .cashback
{
	width: calc(914 * var(--u));
	margin: 0 auto calc(25 * var(--v));
}

#kv .button
{
	width: calc(960 * var(--u));
	margin: 0 auto;
}
#kv .button a
{
	display: block;
	box-shadow: var(--shadow1);
	border-radius: calc(200 * var(--u));
}
#kv .button svg
{
	--color1: var(--Cgreen1);
	--color2: white;
	aspect-ratio: 980 / 100;
}


}
@media screen and (min-width: 768px)
{

#kv .button a svg{	transition: var(--T03);	}
#kv .button a:hover svg
{
	--color1: var(--Corange1);
	transform: translate(calc(8 * var(--v)), calc(8 * var(--v)));
}

}
@media screen and (max-width: 767px)
{

#kv{	padding: 0 var(--pageP);	}
#kv h1
{
	top: calc(75 * var(--u));
	font-size: var(--fzu31);
}
#kv h1 span{	font-size: var(--fzu43);	}
#kv .image1{	margin: 0 auto calc(10 * var(--v));	}
#kv .cashback
{
	width: 100%;
	margin: 0 auto calc(15 * var(--v));
}
#kv .button{	width: 100%;	}
#kv .button svg{	aspect-ratio: 335/80;	}

}

/* ================================================================================
lead
================================================================================ */
@media print, screen
{

/* #lead{	background: url("../image/lead_background.webp") no-repeat center/cover;	} */
#lead > .inner{	padding: calc(50 * var(--v)) 0 calc(160 * var(--v));	}
#lead h2
{
	position: relative;
	width: calc(424 * var(--v));
	margin: 0 auto calc(15 * var(--v));
}
#lead h2 span
{
	z-index: 1;
	position: absolute;
	display: block;
	width: 100%;
	padding: calc(15 * var(--v)) 0 0;

	color: white;
	font-size: var(--fzv44);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.2em;
}
#lead h2 svg{	width: 100%;	aspect-ratio: 424/116;	}

#lead .banner
{
	width: 100%;	aspect-ratio: 890/490;
	max-width: calc(890 * var(--v));
	margin: 0 auto;
}

}
@media screen and (max-width: 767px)
{

#lead > .inner{	padding: calc(10 * var(--v)) 0 calc(80 * var(--v));	}
#lead h2
{
	width: calc(186 * var(--v));
	margin: 0 auto calc(5 * var(--v));
}
#lead h2 span
{
	padding: calc(9 * var(--v)) 0 0;
	font-size: var(--fzv19);
}

}

/* ================================================================================
how
================================================================================ */
@media print, screen
{

#how{	background: var(--Cgray1);	}
#how > .inner{	padding: 0 0 calc(175 * var(--v));	}

#how .icon{	background: var(--Cgray1);	}

#how .boxes1
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(30 * var(--u));
	width: 100%;	max-width: calc(820 * var(--u));
	margin: 0 auto calc(60 * var(--v));
}
#how .boxes1 > .box:nth-child(1)
{
	flex-shrink: 0;
	display: flex;	justify-content: center;	align-items: center;
	width: calc(220 * var(--v));
}
#how .boxes1 > .box:nth-child(1) p
{
	width: 100%;
	padding: 0.7em;
	background: var(--Corange1);
	color: white;
	font-size: var(--fzv20);
	font-weight: 600;
	text-align: center;
}

#how .boxes2
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(30 * var(--u));
	margin: 0 auto calc(75 * var(--v));
}
#how .boxes2 > .box:nth-child(1)
{
	flex-shrink: 0;
	display: flex;	justify-content: center;	align-items: center;
	width: calc(475 * var(--u));
}
#how .boxes2 > .box:nth-child(2) p strong{	color: var(--Corange1);	}


#how [class^="pointArea"]
{
	position: relative;
	padding: calc(120 * var(--v)) var(--pageP) calc(65 * var(--v));
	background: white;
	border: 2px solid var(--Cblue1);
}
#how [class^="pointArea"] .header
{
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: calc(60 * var(--v));
	padding: calc(17 * var(--v)) 0 0;

	background: url("../image/how_pointHeader.webp") no-repeat top center/cover;

	color: white;
	font-size: var(--fzv25);
	font-weight: 500;
	text-align: center;
}

#how [class^="pointArea"] h3
{
	margin: 0 auto calc(40 * var(--v));

	color: var(--Corange1);
	font-size: var(--fzv35);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

#how [class^="pointArea"] .text1 strong{	color: var(--Corange1);	}

#how .pointArea1{	margin: 0 auto calc(75 * var(--v));	}
#how .pointArea1 picture, #how .pointArea1 .text2
{
	max-width: calc(600 * var(--v));
	margin: 0 auto;
}


#how .boxes3
{
	position: relative;
	width: calc(845 * var(--u));	aspect-ratio: 1690/708;
	margin: 0 auto calc(10 * var(--v));

	background: url("../image/how_image3.webp") no-repeat center/contain;
}
#how .boxes3 > .boxA
{
	position: absolute;
	top: calc(15 * var(--u));
	width: calc(240 * var(--u));	aspect-ratio: 240/340;
	padding: calc(25 * var(--u)) calc(30 * var(--u)) 0;
	/* background: rgb(0,0,0,0.2); */
}
#how .boxes3 > .boxA:nth-child(1){	left: calc(3 * var(--u));	}
#how .boxes3 > .boxA:nth-child(2){	left: calc(305 * var(--u));	}

#how .boxes3 > .boxA p:nth-child(1)
{
	padding: 0.4em 0;
	margin: 0 auto calc(25 * var(--u));

	background: var(--Cred1);
	color: white;
	font-size: var(--fzu26);
	font-weight: 500;
	text-align: center;
}
#how .boxes3 > .boxA:nth-child(1) p:nth-child(1){	background: var(--Cred1);	}
#how .boxes3 > .boxA:nth-child(2) p:nth-child(1){	background: var(--Cblue1);	}

#how .boxes3 > .boxA p:nth-child(2),
#how .boxes3 > .boxA p:nth-child(3)
{
	font-size: var(--fzu20);
	font-weight: 500;
	text-align: center;
}
#how .boxes3 > .boxA p:nth-child(2){	margin: 0 auto calc(120 * var(--u));	}
#how .boxes3 > .boxA p:nth-child(3){	margin: 0 auto calc(3 * var(--u));	}

#how .boxes3 > .boxA p:nth-child(4)
{
	font-size: var(--fzu50);
	font-weight: 500;
	text-align: center;
}
#how .boxes3 > .boxA p:nth-child(4) span{	font-size: var(--fzu36);	}

#how .boxes3 > .boxB
{
	position: absolute;
	top: calc(245 * var(--u));	right: 0;
	width: calc(220 * var(--u));
	/* background: rgb(0,0,0,0.2); */
}
#how .boxes3 > .boxB p:nth-child(1)
{
	color: var(--Corange1);
	font-size: var(--fzu20);
	font-weight: 500;
	text-align: center;
}
#how .boxes3 > .boxB p:nth-child(2)
{
	color: var(--Corange1);
	font-size: var(--fzu70);
	font-weight: 500;
	text-align: center;
}
#how .boxes3 > .boxB p:nth-child(2) span{	font-size: var(--fzu36);	}

#how .pointArea2 .boxes3 + .text2
{
	max-width: calc(845 * var(--v));
	margin: 0 auto;
}

}
@media screen and (max-width: 767px)
{

#how > .inner{	padding: 0 0 calc(80 * var(--v));	}
#how .boxes1
{
	flex-direction: column;
	gap: calc(15 * var(--u));
	margin: 0 auto calc(25 * var(--v));
}
#how .boxes1 > .box:nth-child(1) p{	font-size: var(--fzv16);	}

#how .boxes2
{
	flex-direction: column;
	gap: calc(15 * var(--u));
	margin: 0 auto calc(25 * var(--v));
}
#how .boxes2 > .box:nth-child(1){	width: 100%;	}


#how [class^="pointArea"]{	padding: calc(50 * var(--v)) var(--pageP) calc(35 * var(--v));	}
#how [class^="pointArea"] .header
{
	height: calc(28 * var(--v));
	padding: calc(7 * var(--v)) 0 0;
	font-size: var(--fzv14);
}
#how [class^="pointArea"] h3
{
	margin: 0 auto calc(20 * var(--v));
	font-size: var(--fzv23);
}

#how .pointArea1{	margin: 0 auto calc(25 * var(--v));	}



#how .boxes3
{
	width: 100%;
}
#how .boxes3 > .boxA
{
	top: calc(5 * var(--u));
	width: calc(83 * var(--u));
	padding: calc(10 * var(--u)) calc(10 * var(--u)) 0;
	/* background: rgb(0,0,0,0.2); */
}
#how .boxes3 > .boxA:nth-child(1){	left: calc(3 * var(--u));	}
#how .boxes3 > .boxA:nth-child(2){	left: calc(110 * var(--u));	}

#how .boxes3 > .boxA p:nth-child(1)
{
	padding: 0.4em 0;
	margin: 0 auto calc(5 * var(--u));
	font-size: var(--fzu10);
}

#how .boxes3 > .boxA p:nth-child(2),
#how .boxes3 > .boxA p:nth-child(3)
{	font-size: var(--fzu9);	}
#how .boxes3 > .boxA p:nth-child(2){	margin: 0 auto calc(40 * var(--u));	}
#how .boxes3 > .boxA p:nth-child(3){	margin: 0 auto calc(1 * var(--u));	}

#how .boxes3 > .boxA p:nth-child(4){	font-size: var(--fzu18);	}
#how .boxes3 > .boxA p:nth-child(4) span{	font-size: var(--fzu13);	}

#how .boxes3 > .boxB
{
	top: calc(82 * var(--u));
	width: calc(83 * var(--u));
}
#how .boxes3 > .boxB p:nth-child(1){	font-size: var(--fzu9);	}
#how .boxes3 > .boxB p:nth-child(2){	font-size: var(--fzu25);	}
#how .boxes3 > .boxB p:nth-child(2) span{	font-size: var(--fzu13);	}

#how .pointArea2 .boxes3 + .text2
{
	max-width: calc(845 * var(--v));
	margin: 0 auto;
}


}

/* ================================================================================
case
================================================================================ */
@media print, screen
{

#case{	background: url("../image/case_background.webp") no-repeat top center/cover;	}
#case > .inner{	padding: 0 0 calc(175 * var(--v));	}

#case .icon{	background: var(--Corange2);	}

#case .area1
{
	margin: 0 auto calc(60 * var(--v));
	border: 2px solid var(--Cblue1);
}
#case .area1 h3
{
	padding: 0.8em;
	background: var(--Cblue1);
	color: white;
	font-size: var(--fzv26);
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.1em;
}
#case .boxes1
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(30 * var(--u));
	padding: calc(30 * var(--v)) var(--pageP);
	background: white;
}
#case .boxes1 > .box:nth-child(1)
{
	flex-shrink: 0;
	width: calc(135 * var(--v));
}
#case .boxes1 hr{	background: var(--Cgray2);	}
#case .boxes1 .text1 a{	color: var(--Cblue1);	}


#case .area2
{
	padding: calc(60 * var(--v)) var(--pageP) calc(45 * var(--v));
	margin: 0 auto calc(40 * var(--v));
	background: white;
}
#case .area2 h3
{
	margin: 0 0 calc(50 * var(--v));
	color: var(--Corange1);
	font-size: var(--fzv28);
	font-weight: 600;
	text-align: center;
	line-height: 1.5;
}
#case .area2 h3 span{	font-size: var(--fzv24);	}
#case .area2 picture
{
	max-width: calc(640 * var(--v));
	margin: 0 auto;
}


#case .area3
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(30 * var(--u));
	padding: calc(15 * var(--v))	var(--pageP);
	margin: 0 auto calc(20 * var(--v));

	border: 2px solid var(--Cred2);
	background: white;
}
#case .area3 .box:nth-child(1)
{
	flex-shrink: 0;
	width: calc(75 * var(--v));
}
#case .area3 .box:nth-child(1) svg{	width: 100%;	aspect-ratio: 1;	}

#case .area3 .text1, #case .text2C
{	color: var(--Cred2);	}

}
@media screen and (max-width: 767px)
{

#case > .inner{	padding: 0 0 calc(80 * var(--v));	}

#case h2 + .text1C{	text-align: left;	}


#case .area1{	margin: 0 auto calc(40 * var(--v));	}

#case .area1 h3{	font-size: var(--fzv20);	}
#case .boxes1
{
	flex-direction: column;
	gap: calc(20 * var(--u));
	padding: calc(30 * var(--v)) var(--pageP);
}
#case .boxes1 > .box:nth-child(1){	width: calc(80 * var(--v));	}


#case .area2
{
	padding: calc(30 * var(--v)) var(--pageP);
	margin: 0 auto calc(30 * var(--v));
}
#case .area2 h3
{
	margin: 0 0 calc(20 * var(--v));
	font-size: var(--fzv16);
}
#case .area2 h3 span{	font-size: var(--fzv14);	}


#case .area3
{
	flex-direction: column;
	gap: calc(10 * var(--u));
}
#case .area3 .box:nth-child(1){	width: calc(48 * var(--v));	}
#case .area3 + .text2C{	text-align: left;	}

}

/* ================================================================================
service
================================================================================ */
@media print, screen
{

#service{	background: var(--Cgray1);	}
#service > .inner{	padding: 0 0 calc(175 * var(--v));	}

#service .icon{	background: var(--Cgray1);	}

#service .text1C a{	color: var(--Cblue1);	}

#service .boxes1
{
	position: relative;
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(30 * var(--u));
	padding: calc(15 * var(--v)) var(--pageP);
	margin: 0 auto calc(40 * var(--v));
	background: white;
}
#service .boxes1::before, #service .boxes1::after
{
	position: absolute;

	content: "";
	display: block;
	width: calc(25 * var(--v));	aspect-ratio: 1;
	background: var(--Cblue1);
	clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
}
#service .boxes1::before{	top: 0;	left: 0;	}
#service .boxes1::after{	bottom: 0;	right: 0;	transform: rotate(180deg);	}


#service .boxes1 > .box:nth-child(1)
{
	flex-shrink: 0;
	width: calc(62 * var(--v));
}
#service .boxes1 a
{
	color: var(--Cblue1);
  line-height: 1.75;
}

}
@media screen and (max-width: 767px)
{

#service > .inner{	padding: 0 0 calc(120 * var(--v));	}
#service .text1C{	text-align: left;	}
#service .text1C a.sm{	font-size: var(--fzv12);	}

}

/* ================================================================================
reason
================================================================================ */
@media print, screen
{

//#reason{	background: url("../image/case_background.webp") no-repeat top center/cover;	}
#reason{	background: var(--Cgray1);	}

#reason > .inner{	padding: 0 0 calc(175 * var(--v));	}

//#reason .icon{	background: var(--Corange2);	}
#reason .icon{	background: var(--Cgray1);	}
#reason .text2 a{	color: var(--Cblue1);	}

#reason .text3
{
	font-size: var(--fzv22);
	font-weight: 500;
	line-height: 1.75;
	text-align: center;
}
#reason .text3 strong{	color: var(--Corange1);	}


#reason [class^="area"]
{
	position: relative;
	padding: calc(75 * var(--v)) var(--pageP) calc(65 * var(--v));

	background: white;
	overflow: hidden;
}
#reason [class^="area"]:not(:last-child){	margin: 0 auto calc(70 * var(--v));	}

#reason [class^="area"] .num
{
	position: absolute;
	top: calc(-35 * var(--v));	left: calc(-35 * var(--v));
	width: calc(160 * var(--v));	aspect-ratio: 1;

	padding: 0.6em 0 0 0.8em;

	border-radius: 50%;
	background: var(--Cblue1);

	color: white;
	font-size: var(--fzv80);
	font-weight: 500;
}
#reason [class^="area"] h3
{
	margin: 0 0 calc(30 * var(--v));
	font-size: var(--fzv40);
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.1em;
}
#reason [class^="area"] h3 + hr
{
	width: calc(55 * var(--v));	height: 2px;
	margin: 0 auto calc(50 * var(--v));
	background: var(--Cblue1);
}

/* ===== #reason .area1 ===== */
#reason .area1 ul
{
	display: flex;	flex-wrap: wrap;	justify-content: center;	align-items: stretch;
	gap: 0 var(--pageP);
}
#reason .area1 li{	padding: 0 0 calc(60 * var(--v));	}
#reason .area1 .title
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(10 * var(--u));
	width: calc(270 * var(--u));

	padding: calc(10 * var(--v));
	margin: 0 auto;

	background: var(--Corange1);
	border-radius: 4px;
}
#reason .area1 .title picture{	width: calc(90 * var(--u));	}
#reason .area1 .title h4
{
	color: white;
	font-size: var(--fzu18);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}
#reason .area1 li p
{
	font-size: var(--fzu45);
	font-weight: 500;
	text-align: center;
	letter-spacing: -0.06em;
}
#reason .area1 li p span
{
	font-size: var(--fzu120);
	letter-spacing: -0.06em;
}
#reason .area1 li p sup
{
	top: -1em;
	font-size: 0.45em;
}

#reason .area1 li:first-child{	width: 100%;	}
#reason .area1 li:first-child .title{	width: calc(480 * var(--u));	}
#reason .area1 li:first-child .title picture{	width: calc(170 * var(--u));	}
#reason .area1 li:first-child .title h4{	font-size: var(--fzu40);	}
#reason .area1 li:first-child p{	font-size: var(--fzu80);	}
#reason .area1 li:first-child p span{	font-size: var(--fzu250);	}
#reason .area1 li:first-child p sup{	font-size: var(--fzu40);	}

#reason .area1 .text2{	padding: 0 var(--pageP);	}

/* ===== #reason .area2 ===== */
#reason .area2 .text3{	margin: 0 auto calc(50 * var(--v));	}

#reason .area2 .slideArea{	position: relative;	}
#reason .area2 .slideArea .swiper
{
	width: calc(780 * var(--u));	aspect-ratio: 780/600;
	margin: 0 auto;

	background: url("../image/reason_slideBackground.webp") no-repeat top center/cover;
}
#reason .area2 .slideArea .swiper-slide
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(40 * var(--u));
}
#reason .area2 .slideArea .swiper-slide picture{	width: calc(280 * var(--u));	}
#reason .area2 .slideArea .swiper-slide p
{
	font-size: var(--fzu45);
	font-weight: 700;
	line-height: 1.3;
}


#reason .area2 .slideArea .prev,
#reason .area2 .slideArea .next
{
	position: absolute;
	top: calc(50% - 20 * var(--u));
	width: calc(40 * var(--v));
	cursor: pointer;
}
#reason .area2 .slideArea .prev{	left: 0;	}
#reason .area2 .slideArea .next{	right: 0;	}
#reason .area2 .slideArea .prev svg,
#reason .area2 .slideArea .next svg
{
	--color1: var(--Corange1);
	aspect-ratio: 1;
}


#reason .area2 .slideArea .pagination
{
	display: flex;	justify-content: center;	align-items: center;
	gap: 4px;
	padding: calc(20 * var(--u)) 0 0;
}
#reason .area2 .slideArea .pagination span
{
	display: block;
	width: calc(18 * var(--v));	aspect-ratio: 18/6;
	margin: 0;
	background: #808080;
	border-radius: 0;
	transition: var(--T03);
}
#reason .area2 .slideArea .pagination span[class*="active"]{	background: var(--Corange1);	}


/* ===== #reason .area3 ===== */
#reason .area3 .text3{	margin: 0 auto calc(40 * var(--v));	}
#reason .area3 picture{	max-width: calc(780 * var(--v));	margin: 0 auto;	}

/* ===== #reason .area4 ===== */
#reason .area4 .text3{	margin: 0 auto calc(40 * var(--v));	}
#reason .area4 .banner{	max-width: calc(780 * var(--v));	margin: 0 auto;	}

/* ===== #reason .area5 ===== */
#reason .area5 .text3{	margin: 0 auto calc(60 * var(--v));	}
#reason .area5 .box
{
	max-width: calc(780 * var(--v));
	padding: calc(50 * var(--v)) var(--pageP);
	margin: 0 auto;	
	background: var(--Cgray1);
}
#reason .area5 h4
{
	margin: 0 auto calc(20 * var(--v));
	color: var(--Corange1);
	font-size: var(--fzv34);
	font-weight: 500;
	text-align: center;
}
#reason .area5 .text4
{
	margin: 0 auto calc(30 * var(--v));
	font-size: var(--fzv24);
	font-weight: 500;
	text-align: center;
}

}
@media screen and (min-width: 768px)
{

#reason .area2 .slideArea .prev svg,
#reason .area2 .slideArea .next svg
{	transition: var(--T03);	}

#reason .area2 .slideArea .prev:hover svg,
#reason .area2 .slideArea .next:hover svg
{	--color1: var(--Cgreen1);	}

}
@media screen and (max-width: 767px)
{

#reason > .inner{	padding: 0 0 calc(120 * var(--v));	}
#reason h2 span:nth-child(1){	font-size: var(--fzv20);	}
#reason .text3{	font-size: var(--fzv14);	}

#reason [class^="area"]{	padding: calc(30 * var(--v)) var(--pageP);	}
#reason [class^="area"]:not(:last-child){	margin: 0 auto calc(30 * var(--v));	}

#reason [class^="area"] .num
{
	top: calc(-12 * var(--v));	left: calc(-12 * var(--v));
	width: calc(64 * var(--v));
	padding: 0.6em 0 0 0.8em;
	font-size: var(--fzv33);
}
#reason [class^="area"] h3
{
	margin: 0 0 calc(20 * var(--v));
	font-size: var(--fzv20);
}
#reason [class^="area"] h3 + hr
{
	width: calc(25 * var(--v));
	margin: 0 auto calc(30 * var(--v));
}


/* ===== #reason .area1 ===== */
#reason .area1 ul{	gap: 0 calc(10 * var(--u));	}
#reason .area1 li{	padding: 0 0 calc(30 * var(--v));	}
#reason .area1 li:nth-child(n+2) .title
{
	position: relative;
	width: calc(90 * var(--u));	height: calc(40 * var(--u));
}
#reason .area1 li:nth-child(n+2) .title picture
{
	position: absolute;
	top: calc(-12 * var(--u));
	width: calc(40 * var(--u));	
}
#reason .area1 .title h4{	font-size: var(--fzu11);	}
#reason .area1 li p{	font-size: var(--fzu16);	}
#reason .area1 li p span{	font-size: var(--fzu43);	}

#reason .area1 li:first-child .title{	width: 100%;	}
#reason .area1 li:first-child .title picture{	width: calc(105 * var(--u));	}
#reason .area1 li:first-child .title h4{	font-size: var(--fzu20);	}
#reason .area1 li:first-child p{	font-size: var(--fzu50);	}
#reason .area1 li:first-child p span{	font-size: var(--fzu136);	}
#reason .area1 li:first-child p sup{	font-size: var(--fzu20);	}
#reason .area1 .text2{	padding: 0;	}


/* ===== #reason .area2 ===== */
#reason .area2 .text3
{
	margin: 0 auto calc(20 * var(--v));
	text-align: left;
}

#reason .area2 .slideArea .swiper{	width: calc(250 * var(--u));	}
#reason .area2 .slideArea .swiper-slide{	gap: calc(10 * var(--u));	}
#reason .area2 .slideArea .swiper-slide picture{	width: calc(90 * var(--u));	}
#reason .area2 .slideArea .swiper-slide p{	font-size: var(--fzu15);	}

#reason .area2 .slideArea .prev,
#reason .area2 .slideArea .next
{
	top: calc(50% - 12 * var(--u));
	width: calc(24 * var(--v));
}
#reason .area2 .slideArea .prev{	left: calc(-6 * var(--u));	}
#reason .area2 .slideArea .next{	right: calc(-6 * var(--u));	}

/* ===== #reason .area3 ===== */
#reason .area3 .text3
{
	margin: 0 auto calc(20 * var(--v));
	text-align: left;
}

/* ===== #reason .area4 ===== */
#reason .area4 .text3
{
	margin: 0 auto calc(20 * var(--v));
	text-align: left;
}

/* ===== #reason .area5 ===== */
#reason .area5 .text3
{
	margin: 0 auto calc(20 * var(--v));
	text-align: left;
}
#reason .area5 .box{	padding: calc(20 * var(--v)) var(--pageP);	}
#reason .area5 h4
{
	margin: 0 auto calc(10 * var(--v));
	font-size: var(--fzv18);
}
#reason .area5 .text4
{
	margin: 0 auto calc(15 * var(--v));
	font-size: var(--fzv14);
}

}

/* ================================================================================
start
================================================================================ */
@media print, screen
{

//#start{	background: var(--Cgray1);	}
#start{	background: url("../image/case_background.webp") no-repeat top center/cover;	}
#start > .inner{	padding: 0 0 calc(90 * var(--v));	}

//#start .icon{	background: var(--Cgray1);	}
#start .icon{	background: var(--Corange2);	}

#start .boxes
{
	position: relative;
	width: 100%;	aspect-ratio: 1962/1040;
	margin: 0 auto;

	background: url("../image/start_image1.webp") no-repeat center/contain;
}
#start .boxes > .boxA
{
	position: absolute;
	top: calc(0 * var(--u));
	width: calc(250 * var(--u));	aspect-ratio: 250/520;
	padding: calc(15 * var(--u)) calc(10 * var(--u)) 0;
	/* background: rgb(0,0,0,0.2); */
}
#start .boxes > .boxA:nth-child(1){	left: calc(0 * var(--u));	}
#start .boxes > .boxA:nth-child(2){	left: calc(310 * var(--u));	}
#start .boxes > .boxA:nth-child(4){	left: calc(730 * var(--u));	}

#start .boxes > .boxA p:nth-child(1)
{
	color: white;
	font-size: var(--fzu21);
	font-weight: 500;
	text-align: center;
}
#start .boxes > .boxA p:nth-child(2)
{
	margin: 0 0 calc(182 * var(--u));
	color: white;
	font-size: var(--fzu45);
	font-weight: 500;
	text-align: center;
}
#start .boxes > .boxA p:nth-child(3)
{
	margin: 0 0 calc(10 * var(--u));
	font-size: var(--fzu24);
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
}
#start .boxes > .boxA p:nth-child(3) strong{	color: var(--Corange1);	}
#start .boxes > .boxA p:nth-child(4)
{
	margin: 0 0 calc(10 * var(--u));
	font-size: var(--fzu18);
	font-weight: 500;
	text-align: center;
	line-height: 1.5;
}
#start .boxes > .boxA p:nth-child(5)
{
	color: var(--Corange1);
	font-size: var(--fzu15);
	font-weight: 500;
	line-height: 1.75;
}

#start .boxes > .boxB
{
	position: absolute;
	top: 0;	left: calc(620 * var(--u));

	display: flex;	justify-content: center;	align-items: center;
	width: calc(52 * var(--u));	height: calc(520 * var(--u));
	/* background: rgb(0,0,0,0.2); */
}
#start .boxes > .boxB p
{
	color: white;
	writing-mode: vertical-rl;
	font-size: var(--fzu24);
	font-weight: 500;
	text-align: center;
}

}
@media screen and (max-width: 767px)
{

#start > .inner{	padding: 0 0 calc(40 * var(--v));	}
#start .boxes
{
	aspect-ratio: 670/1290;
	margin: 0 auto;
	background: url("../image/start_image1_sp.webp") no-repeat center/contain;
}

#start .boxes > .boxA
{
	width: 100%;
	padding: calc(20 * var(--u)) calc(20 * var(--u)) 0;
	/* background: rgb(0,0,0,0.2); */
}
#start .boxes > .boxA:nth-child(1){	top: calc(0 * var(--u));	left: 0;	aspect-ratio: 335/150;	}
#start .boxes > .boxA:nth-child(2){	top: calc(184 * var(--u));	left: 0;	aspect-ratio: 335/220;	}
#start .boxes > .boxA:nth-child(4){	top: calc(510 * var(--u));	left: 0;	aspect-ratio: 335/140;	}

#start .boxes > .boxA p:nth-child(1)
{
	width: calc(58 * var(--u));
	font-size: var(--fzu12);
}
#start .boxes > .boxA p:nth-child(2)
{
	width: calc(58 * var(--u));
	margin: 0 0 calc(30 * var(--u));
	font-size: var(--fzu20);
}
#start .boxes > .boxA p:nth-child(3)
{
	margin: 0 0 calc(10 * var(--u));
	font-size: var(--fzu16);
}
#start .boxes > .boxA p:nth-child(4)
{
	margin: 0 0 calc(5 * var(--u));
	font-size: var(--fzu14);
}
#start .boxes > .boxA p:nth-child(5)
{
	padding: 0 calc(30 * var(--u));
	font-size: var(--fzu14);
}

#start .boxes > .boxB
{
	top: calc(438 * var(--u));	left: 0;
	width: 100%;	height: auto;	aspect-ratio: 335/40;
	/* background: rgb(0,0,0,0.2); */
}
#start .boxes > .boxB p
{
	writing-mode: horizontal-tb;
	font-size: var(--fzu18);
}




















}

/* ================================================================================
post
================================================================================ */
@media print, screen
{

#post > .inner{	padding: calc(65 * var(--v)) 0;	}
#post .cashback
{
	width: calc(914 * var(--u));
	margin: 0 auto calc(25 * var(--v));
}
#post .button
{
	width: calc(960 * var(--u));
	margin: 0 auto;
}
#post .button a
{
	display: block;
	box-shadow: var(--shadow1);
	border-radius: calc(200 * var(--u));
}
#post .button svg
{
	--color1: var(--Cgreen1);
	--color2: white;
	aspect-ratio: 980 / 100;
}


}
@media screen and (min-width: 768px)
{

#post .button a svg{	transition: var(--T03);	}
#post .button a:hover svg
{
	--color1: var(--Corange1);
	transform: translate(calc(8 * var(--v)), calc(8 * var(--v)));
}

}
@media screen and (max-width: 767px)
{

#post > .inner{	padding: calc(30 * var(--v)) 0 calc(50 * var(--v));	}
#post .cashback
{
	width: 100%;
	margin: 0 auto calc(15 * var(--v));
}
#post .button{	width: 100%;	}
#post .button svg{	aspect-ratio: 335/80;	}

}

/* ================================================================================
pageTop
================================================================================ */
@media print, screen
{

#pageTop
{
	z-index: var(--priorityHeader);
	position: fixed;
	bottom: calc(130 * var(--v));	right: calc(40 * var(--v));
	width: calc(60 * var(--v));
	margin: 0 auto;

	transition: var(--T03);
	pointer-events: none;
	opacity: 0;
	transform: translateY(calc(10 * var(--v)));
}
#pageTop.on
{
	pointer-events: all;
	opacity: 1;
	transform: translateY(0);
}

#pageTop a
{
	display: block;
	/* box-shadow: var(--shadow2); */
	border-radius: 50%;
}
#pageTop a svg
{
	--color1: var(--Corange1);
	aspect-ratio: 1;
}


}
@media screen and (min-width: 768px)
{

#pageTop a svg{	transition: var(--T03);	}
#pageTop a:hover svg
{
	--color1: var(--Cgreen1);
	/* transform: translate(calc(3 * var(--v)), calc(3 * var(--v))); */
}

}
@media screen and (max-width: 767px)
{

#pageTop
{
	bottom: calc(80 * var(--v));	right: var(--pageP);
	width: calc(40 * var(--v));
}

}

/* ================================================================================
bottomCTA
================================================================================ */
@media print, screen
{

#bottomCTA
{
	z-index: var(--priorityHeader);
	position: fixed;	bottom: 0;	left: 0;
	width: 100%;

	background: white;
	/* background-color: var(--Cwhite0); */
	/* backdrop-filter:var(--backdrop0); */
	/* -webkit-backdrop-filter: var(--backdrop0); */
	/* box-shadow: var(--shadow0); */

	transition: var(--T03);
	pointer-events: none;
	opacity: 0;
	/* transform: translateY(100%); */
	transform: translateY(calc(10 * var(--v)));
}
#bottomCTA.on
{
	pointer-events: all;
	opacity: 1;
	transform: translateY(0);
}

#bottomCTA > .inner{	padding: calc(10 * var(--v)) 0 calc(18 * var(--v));	}

#bottomCTA .button
{
	width: calc(960 * var(--u));
	margin: 0 auto;
}
#bottomCTA .button a
{
	display: block;
	box-shadow: var(--shadow1);
	border-radius: calc(200 * var(--u));
}
#bottomCTA .button svg
{
	--color1: var(--Cgreen1);
	--color2: white;
	aspect-ratio: 980 / 100;
}


}
@media screen and (min-width: 768px)
{

#bottomCTA .button a svg{	transition: var(--T03);	}
#bottomCTA .button a:hover svg
{
	--color1: var(--Corange1);
	transform: translate(calc(8 * var(--v)), calc(8 * var(--v)));
}

}
@media screen and (max-width: 767px)
{

#bottomCTA{	padding: 0 var(--pageP);	}
#bottomCTA > .inner{	padding: calc(10 * var(--v)) 0 calc(13 * var(--v));	}
#bottomCTA .button{	width: 100%;	}
#bottomCTA .button a{	box-shadow: var(--shadow2);	}
#bottomCTA .button svg{	aspect-ratio: 335/52;	}


}


/* ======================================== end ======================================== */