/* -------------------------------base(mobile)↓-------------------------------------- */
:root{
	--site-color-yellow-light:#F6F1EA;
	--site-color-chrome-yellow-dark:#FFE28F;
	--site-color-chrome-yellow-medium:#ffe28f;
	--site-color-orange-light:#FDB603;
	--site-color-bround-dark:#767171;
	--site-color-blue:#66D4FF;
}
/* buttons start */
.buttons>a{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}
.buttons>a>picture{
	width: calc(310 * var(--site-font-size-ratio));
}
.buttons>a>picture>*{
	width: 100%;
}
/* buttons end */

/* header start */
.header{
	width: calc(347 * var(--site-font-size-ratio));
	margin: calc(13 * var(--site-font-size-ratio)) auto 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header>a>img{
	width: calc(131 * var(--site-font-size-ratio));
}
/* header end */

/* top start */
.top,
.top>picture,
.top>picture>img{
	width: 100%;
}
.top{
	margin-top: calc(calc(60 - 35.21 - 13) * var(--site-font-size-ratio));
	display: block;
	position: relative;
}
.top>a{
	display: block;
	width: calc(210 * var(--site-font-size-ratio));
	position: absolute;
	top: calc(130 * var(--site-font-size-ratio));
	left: calc(12 * var(--site-font-size-ratio));
}
.top>a>picture>*{
	width: 100%;
}
/* top end */

/* logos start */
.logos{
	overflow: hidden;
	margin: calc(10 * var(--site-font-size-ratio)) auto;
}
.logos>p{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}
.logos>p>img{
	width: calc(100 * var(--site-font-size-ratio));
}
.logos>p>span{
	font-size: calc(14 * var(--site-font-size-ratio));
	font-weight: var(--site-font-weight-Bold);
}
.logos>.logos_swiper{
	margin-bottom: calc(15 * var(--site-font-size-ratio));
}
.logos>.logos_swiper>.swiper-wrapper{
	align-items: center;
}
.logos>.logos_swiper>.swiper-wrapper>.swiper-slide{
	display: flex;
    align-items: center;
    justify-content: center;
	width: fit-content !important;
}
.logos>.logos_swiper>.swiper-wrapper>.swiper-slide>img{
	height: 35px;
	max-width: 100%;
}
.logos>picture>*{
	width: 100%;
}
/* logos end */

/* merits start */
.merits-wrap{
	background-color: #F7F7F7;
}
.merits{
	/* background-color: var(--site-color-ivory); */
	padding: calc(25 * var(--site-font-size-ratio)) 0;
	margin-top: calc(5 * var(--site-font-size-ratio));
}
.merits>h2{
	text-align: center;
}
.merits>h2>img{
	width: 80%;
}
.merits>ul{
	width: calc(240 * var(--site-font-size-ratio));
	margin: calc(calc(799 - 765.01) * var(--site-font-size-ratio)) auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: calc(calc(1067 - 799 - 240) * var(--site-font-size-ratio));
}
.merits>ul>li{
	width: 100%;
	background-color: #ffffff;
	border-radius: 50%;
	height: calc(240 * var(--site-font-size-ratio));
	text-align: center;
	font-size: calc(16 * var(--site-font-size-ratio));
	font-weight: var(--site-font-weight-Bold);
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(calc(944 - 830.9 - 102.53) * var(--site-font-size-ratio));
	box-shadow: 0 calc(8 * var(--site-font-size-ratio)) 0 0 var(--site-color-chrome-yellow-light);
}
.merits>ul>li>img{
	max-width: calc(99.49 * var(--site-font-size-ratio));
}
.merits>section{
	width: calc(330 * var(--site-font-size-ratio));
	margin: calc(15 * var(--site-font-size-ratio)) auto;
	padding: calc(15 * var(--site-font-size-ratio));
	background-color: #ffffff;
	position: relative;
	box-shadow: calc(3 * var(--site-font-size-ratio)) calc(3 * var(--site-font-size-ratio)) calc(6 * var(--site-font-size-ratio)) calc(0 * var(--site-font-size-ratio)) var(--site-color-gray-medium);
	border-radius: calc(5 * var(--site-font-size-ratio));
	display: grid;
	grid-template:
		"merits-h3"
        "merits-p"
        "merits-img";
}
.merits>section>img{
	width: 45%;
	grid-area: merits-img;
	display: block;
    margin: auto;
}
.merits>section>h3{
	font-size: calc(18 * var(--site-font-size-ratio));
	font-weight: var(--site-font-weight-Bold);
	display: flex;
    align-items: center;
    justify-content: center;
	grid-area: merits-h3;
}
.merits>section>h3::before{
	content: "";
	width: calc(45 * var(--site-font-size-ratio));
	height: calc(38 * var(--site-font-size-ratio));
	background-image: url("../images/merits-mark.png");
	background-size: contain;
	background-repeat: no-repeat;
}
.merits>section>p{
	margin-top: calc(calc(1946 - 1852 - 82) * var(--site-font-size-ratio));
	font-size: calc(16 * var(--site-font-size-ratio));
	font-weight: var(--site-font-weight-Regular);
	font-family: var(--site-font-family-Noto-Sans-JP);
	grid-area: merits-p;
}
/* merits end */

/* cheap start */
.cheap{
	background-color: var(--site-color-yellow-light);
	font-family: var(--site-font-family-Noto-Sans-JP);
}
.cheap>h2{
	text-align: center;
	font-size: calc(26 * var(--site-font-size-ratio));
	font-weight: var(--site-font-weight-Bold);
	padding: calc(25 * var(--site-font-size-ratio)) calc(5 * var(--site-font-size-ratio)) calc(5 * var(--site-font-size-ratio));
}
.cheap>p{
	padding: calc(10 * var(--site-font-size-ratio));
	font-size: calc(16 * var(--site-font-size-ratio));
}
.cheap>p>span{
	color: var(--site-color-red);
}
.cheap>p>img{
	display: block;
	margin: calc(10 * var(--site-font-size-ratio)) auto calc(15 * var(--site-font-size-ratio));
	width: 80%;
}
.cheap>picture>*{
	width: 100%;
}
/* cheap end */

/* benefits start */
.benefits{
	padding: calc(25 * var(--site-font-size-ratio)) calc(15 * var(--site-font-size-ratio));
	background-color: var(--site-color-yellow-light);
}
.benefits>h2{
	font-weight: var(--site-font-weight-Bold);
	text-align: center;
	width: fit-content;
	margin: auto;
}
.benefits>h2>span{
	display: block;
}
.benefits>h2>span:nth-of-type(1){
	font-size: calc(18 * var(--site-font-size-ratio));
}
.benefits>h2>span:nth-of-type(2){
	font-size: calc(36 * var(--site-font-size-ratio));
	color: var(--site-color-orangered);
}
.benefits>img{
	width: 100%;
}
/* benefits end */
/* steps start */
.steps{
	margin: calc(30 * var(--site-font-size-ratio)) auto 0;
	width: calc(320 * var(--site-font-size-ratio));
}
.steps>h2{
	font-weight: var(--site-font-weight-Bold);
	font-size: calc(28 * var(--site-font-size-ratio));
	text-align: center;
}
.steps>div.steps-swiper_div{
}
.steps>div.steps-swiper_div>div.steps-swiper{
}
.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper{
	display: block;
	counter-reset:section-h3;
}
.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section{
	text-align: center;
	position: relative;
	margin: calc(50 * var(--site-font-size-ratio)) auto;
	border: calc(3 * var(--site-font-size-ratio)) dashed var(--site-color-orangered);
	border-radius: calc(20 * var(--site-font-size-ratio));
	padding: calc(15 * var(--site-font-size-ratio)) calc(15 * var(--site-font-size-ratio)) calc(5 * var(--site-font-size-ratio));
}
.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section:first-of-type{
	margin-top: calc(30 * var(--site-font-size-ratio));
}
.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section::before{
	counter-increment:section-h3;
    content:"Step." counter(section-h3);
	background-color: var(--site-color-orangered);
	display: block;
	margin: auto;
	width: calc(118 * var(--site-font-size-ratio));
	height: calc(33 * var(--site-font-size-ratio));
	text-align: center;
	color: #ffffff;
	font-size: calc(22 * var(--site-font-size-ratio));
	font-weight: var(--site-font-weight-Bold);
	border-radius: calc(8 * var(--site-font-size-ratio));
	position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section:first-of-type~section::after{
	content: "";
	display: block;
	border-top: calc(25 * var(--site-font-size-ratio)) solid var(--site-color-orangered);
	border-right: calc(35 * var(--site-font-size-ratio)) solid transparent;
	border-left: calc(35 * var(--site-font-size-ratio)) solid transparent;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%,-180%);
}
.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section>h3{
	color: var(--site-color-orangered);
	font-size: calc(18 * var(--site-font-size-ratio));
	font-weight: var(--site-font-weight-Bold);
}
.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section>p{
	font-size: calc(16 * var(--site-font-size-ratio));
	font-weight: var(--site-font-weight-Regular);
	line-height: calc(20 * var(--site-font-size-ratio));
	margin: calc(calc(5837 - 5761  - 65) * var(--site-font-size-ratio)) auto 0;
	font-family: var(--site-font-family-Noto-Sans-JP);
}
.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section>img{
	display: block;
	height: calc(100 * var(--site-font-size-ratio));
	margin: 0 auto;
}
/* steps end */

/* fqa start */
.fqa{
	background-color: var(--site-color-chrome-yellow-dark);
	padding: var(--site-padding);
	padding-bottom: calc(30 * var(--site-font-size-ratio));
}
.fqa>p{
	font-weight: var(--site-font-weight-Bold);
	font-size: calc(28 * var(--site-font-size-ratio));
	line-height: calc(40 * var(--site-font-size-ratio));
	text-align: center;
	margin-bottom: var(--site-padding);
}
.fqa>div{
}
.fqa>div>dl{
	background-color: #ffffff;
	border-radius: calc(20 * var(--site-font-size-ratio));
	box-shadow: calc(3 * var(--site-font-size-ratio)) calc(3 * var(--site-font-size-ratio)) calc(6 * var(--site-font-size-ratio)) calc(0 * var(--site-font-size-ratio)) var(--site-color-gray-medium);
	padding: calc(calc(60 - 36) / 2 * var(--site-font-size-ratio)) calc(calc(26 - 15) * var(--site-font-size-ratio));
}
.fqa>div>dl>dt,
.fqa>div>dl>dd{
	font-size: calc(16 * var(--site-font-size-ratio));
	gap: calc(10 * var(--site-font-size-ratio));
}
.fqa>div>dl>dt{
	font-weight: var(--site-font-weight-Bold);
	display: flex;
    align-items: center;
	border-radius: calc(6 * var(--site-font-size-ratio));
	margin-bottom: calc(15 * var(--site-font-size-ratio));
}
.fqa>div>dl>dt::before,
.fqa>div>dl>dd::before{
    font-size: calc(22 * var(--site-font-size-ratio));
	font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(35 * var(--site-font-size-ratio));
    height: calc(35 * var(--site-font-size-ratio));
    border-radius: 50%;
    color: var(--site-color-bround-dark);
    flex-shrink: 0;
	padding-bottom: calc(3 * var(--site-font-size-ratio));
}
.fqa>div>dl>dt::before{
	content: "Q";
	background-color: var(--site-color-blue);
}
.fqa>div>dl>dd::before{
	content: "A";
	background-color: var(--site-color-orange-light);
}
.fqa>div>dl>dd{
	display: flex;
    align-items: center;
	font-weight: var(--site-font-weight-Regular);
	line-height: calc(26 * var(--site-font-size-ratio));
	font-family: var(--site-font-family-Noto-Sans-JP);
}
.fqa>div>dl:nth-of-type(1)~dl{
	margin-top: calc(20 * var(--site-font-size-ratio));
}
/* fqa end */
/* bottom start */
.bottom,
.bottom *{
	width: 100%;
}
.bottom{
	position: relative;
}
.bottom>.buttons{
	margin: calc(25 * var(--site-font-size-ratio)) auto;
}
/* bottom end */
/* modal start */
#modal{
	background-color: #ffffff;
	border-radius: calc(10 * var(--site-font-size-ratio));
	margin: 0 calc(10 * var(--site-font-size-ratio));
	padding: calc(10 * var(--site-font-size-ratio));
}
.modal_close{
	position: absolute;
	top: calc(3 * var(--site-font-size-ratio));
	right: calc(3 * var(--site-font-size-ratio));
	width: calc(30 * var(--site-font-size-ratio));
	height: calc(30 * var(--site-font-size-ratio));
}
#modal>a{
	display: block;
	text-decoration: none;
	text-align: center;
	margin: calc(28 * var(--site-font-size-ratio)) auto 0;
	background-color: var(--site-color-gray);
	color: #ffffff;
	font-weight: var(--site-font-weight-Bold);
	font-size: calc(20 * var(--site-font-size-ratio));
	padding: calc(10 * var(--site-font-size-ratio));
	border-radius: calc(25 * var(--site-font-size-ratio));
	box-shadow: calc(3 * var(--site-font-size-ratio)) calc(3 * var(--site-font-size-ratio)) calc(8 * var(--site-font-size-ratio)) 0px var(--site-color-gray);
}
#modal>p{
	text-align: center;
	font-size: calc(11 * var(--site-font-size-ratio));
	margin-top: calc(10 * var(--site-font-size-ratio));
}
/* modal end */

/* footer start */
footer{
	padding: calc(15* var(--site-font-size-ratio)) calc(15* var(--site-font-size-ratio));
}
/* footer end */
/* -------------------------------base(mobile)↑-------------------------------------- */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
	:root{
        --site-division: 1440;
        --site-padding: calc(80 * var(--site-font-size-ratio));
    }
	.br-mobile{
		display: none;
	}
	/* buttons start */
	.buttons{
		display: flex;
		justify-content: center;
		gap: calc(50 * var(--site-font-size-ratio));
		margin: calc(30 * var(--site-font-size-ratio)) auto;
	}
	.buttons>a>picture{
		width: calc(700 * var(--site-font-size-ratio));
	}
	/* buttons end */
	/* header start */
	.header{
        width: calc(1200 * var(--site-font-size-ratio));
    }
	.header>a>img{
		width: calc(250 * var(--site-font-size-ratio));
	}
	/* header end */
	/* top start */
	.top{
		margin-top: calc(calc(68 - 41 - 14) * var(--site-font-size-ratio));
		height: auto;
	}
	.top>a{
		width: calc(550 * var(--site-font-size-ratio));
		top: calc(265 * var(--site-font-size-ratio));
		left: calc(225 * var(--site-font-size-ratio));
	}
	/* top end */
	/* logos start */
	.logos{
		display: flex;
        flex-wrap: wrap;
	}
	.logos>p{
		width: 30%;
	}
	.logos>p>span{
		font-size: calc(16 * var(--site-font-size-ratio));
	}
	.logos>p>img{
		width: calc(150 * var(--site-font-size-ratio));
	}
	.logos>.logos_swiper{
		width: 70%;
    	overflow: hidden;
	}
	.logos>picture{
		width: 100%;
	}
	/* logos end */
	/* merits start */
	.merits{
		width: calc(1200 * var(--site-font-size-ratio));
		margin: auto;
		padding: calc(30 * var(--site-font-size-ratio)) 0;
	}
	.merits>ul{
		flex-wrap: nowrap;
		width:auto;
		justify-content: center;
		gap: calc(calc(540 - 199 - 316) * var(--site-font-size-ratio));
		margin-top: calc(calc(923 - 858 - 5) * var(--site-font-size-ratio));
	}
	.merits>ul>li{
		width: calc(316 * var(--site-font-size-ratio));
		height: calc(316 * var(--site-font-size-ratio));
		font-size: calc(18 * var(--site-font-size-ratio));
	}
	.merits>section{
		display: grid;
		width: 85%;
		padding: calc(20 * var(--site-font-size-ratio));
		box-shadow: calc(3 * var(--site-font-size-ratio)) calc(3 * var(--site-font-size-ratio)) calc(10 * var(--site-font-size-ratio)) calc(0 * var(--site-font-size-ratio)) var(--site-color-gray-medium);
	}
	.merits>section:nth-of-type(odd) {
		margin-left: 0;
		grid-template:
		"merits-h3 merits-img"
		"merits-p merits-img";
	}
	.merits>section:nth-of-type(even) {
		margin-right: 0;
		grid-template:
		"merits-img merits-h3"
		"merits-img merits-p";
	}
	.merits>section>h3{
		font-size: calc(34 * var(--site-font-size-ratio));
		justify-content: flex-start;
		grid-area: merits-h3;
	}
	.merits>section>img{
		position: initial;
		opacity: 1;
		width: auto;
		height: calc(200 * var(--site-font-size-ratio));
		transform: initial;
		grid-area: merits-img;
	}
	.merits>section>p{
		max-width: initial;
		grid-area: merits-p;
	}
	/* merits end */
	/* cheap start */
	.cheap{
		text-align: center;
		background-color: var(--site-color-chrome-yellow-medium);
	}
	.cheap>h2,
	.cheap>p{
		padding: calc(15 * var(--site-font-size-ratio)) calc(calc(100% - calc(1200 * var(--site-font-size-ratio))) / 2);
		background-color: var(--site-color-yellow-light);
	}
	.cheap>p>img{
		width: 60%;
	}
	.cheap>h2{
		font-size: calc(48 * var(--site-font-size-ratio));
		/* color: var(--site-color-bround-dark); */
	}
	.cheap>p{
		text-align: left;
	}
	.cheap>picture>*{
		width: calc(1200 * var(--site-font-size-ratio));
	}
	/* cheap end */

	/* benefits start */
	.benefits{
		padding: calc(calc(3003 - 757 - 2146) * var(--site-font-size-ratio)) 0 0;
		text-align: center;
	}
	.benefits>*{
		width: calc(1200 * var(--site-font-size-ratio));
		margin: auto;
	}
	.benefits>h2>span:nth-of-type(1){
		font-size: calc(46 * var(--site-font-size-ratio));
	}
	.benefits>h2>span:nth-of-type(2){
		font-size: calc(72 * var(--site-font-size-ratio));
	}
	.benefits>img{
		width: calc(1200 * var(--site-font-size-ratio));
	}
	/* benefits end */
	/* steps start */
	.steps{
		margin: auto;
		padding: calc(calc(4767 - 4516 - 151) * var(--site-font-size-ratio)) 0;
		width: calc(1200 * var(--site-font-size-ratio));
	}
	.steps>*{
		/* width: calc(1000 * var(--site-font-size-ratio)); */
	}
	.steps>h2{
		font-size: calc(40 * var(--site-font-size-ratio));
	}
	.steps>h2>span{
		font-size: calc(46 * var(--site-font-size-ratio));
	}
	.steps>div.steps-swiper_div{
		margin: auto;
	}
	.steps>div.steps-swiper_div>div.steps-swiper{
		margin-top: calc(calc(4902 - 4837 - 5) * var(--site-font-size-ratio));
	}
	.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper{
		display: flex;
		justify-content: space-between;
	}
	.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section{
		width: calc(250 * var(--site-font-size-ratio));
		height: auto;
		padding: calc(35 * var(--site-font-size-ratio)) calc(10 * var(--site-font-size-ratio)) calc(5 * var(--site-font-size-ratio));
		margin: 0;
		display: flex;
        flex-direction: column;
	}
	.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section>img{
		height: calc(150 * var(--site-font-size-ratio));
		max-width: 100%;
	}
	.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section:first-of-type~section::after{
		border-top: calc(25* var(--site-font-size-ratio)) solid transparent;
		border-bottom: calc(25* var(--site-font-size-ratio)) solid transparent;
		border-left: calc(25* var(--site-font-size-ratio)) solid var(--site-color-orangered);
		border-right: none;
		top: 50%;
		left: 0%;
		transform: translate(-200%, -50%);
	}
	.steps>div.steps-swiper_div>div.steps-swiper>div.swiper-wrapper>section>p{
		flex-grow: 1;
	}
	/* steps end */
	/* fqa start */
	.fqa{
		padding: 0;
		padding: calc(50 * var(--site-font-size-ratio)) 0;
	}
	.fqa>*{
		width: calc(1000 * var(--site-font-size-ratio));
		margin: auto;
	}
	.fqa>p{
		width: fit-content;
		margin: auto;
		margin-bottom: calc(calc(5590 - 5545 - 5) * var(--site-font-size-ratio));
		font-size: calc(46 * var(--site-font-size-ratio));
		line-height: calc(60 * var(--site-font-size-ratio));
		border-bottom: none;
	}
	.fqa>div{
		padding: calc(25 * var(--site-font-size-ratio)) calc(calc(350 - 200) * var(--site-font-size-ratio));
	}
	.fqa>div>*:first-child>span:nth-of-type(1){
		font-size: calc(24 * var(--site-font-size-ratio));
	}
	.fqa>div>*:first-child>span:nth-of-type(3){
		border-bottom: calc(3 * var(--site-font-size-ratio)) solid var(--site-color-chrome-yellow);
		width: fit-content;
		margin: auto;
	}
	.fqa>div>dl>dt{
		font-size: calc(20 * var(--site-font-size-ratio));
		border-radius: 100px;
	}
	.fqa>div>dl>dt::before{
		font-size: calc(22 * var(--site-font-size-ratio));
	}
	.fqa>div>dl:nth-of-type(1)~dl{
		margin-top: calc(calc(2722 - 2663 - 16) * var(--site-font-size-ratio));
	}
	.fqa>div>dl>dd{
		margin-top: calc(calc(2663 - 2587 - 60) * var(--site-font-size-ratio));
	}
	/* fqa end */
	/* bottom start */
	.bottom>.buttons{
		margin: calc(25 * var(--site-font-size-ratio)) auto;
	}
	/* bottom end */

	footer{
		padding: calc(calc(6633 - 6572)* var(--site-font-size-ratio)) 0;
	}
}

@media screen and (min-width: 1440px){
	/* top start */
	.top>a{
		--site-font-size-ratio:calc(100vw / var(--site-division));
	}
	/* top end */
	/* header start */
	.header{
		--site-font-size-ratio:calc(100vw / var(--site-division));
	}
	/* header end */
}
/* -----------------desktop(include ipad)↑-------------------- */