@charset "UTF-8";
/* CSS Document */
/*---------------------------
		COMMON
---------------------------*/
body {
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
	color: #3A2211;
	font-family: "Zen Maru Gothic", sans-serif;
	line-height: 1.5;
	animation: loading 3s;
}

@keyframes loading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

a {
	text-decoration: none;
	box-sizing: border-box;
}

.fadein {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.5s ease-in-out, transform 0.75s ease-in-out;
}
.fadein.js-scrollin {
	opacity: 1;
	transform: translateY(0);
}

.fs36 {
	

	font-size: clamp(1.875rem, -1.434rem + 11.76vw, 2.25rem);
}
.fs30 {
	font-size: clamp(1.625rem, -0.581rem + 7.84vw, 1.875rem);
}
.fs28 {
	font-size: clamp(1.5rem, -0.706rem + 7.84vw, 1.75rem);
}

.fs24 {
	font-size: clamp(1.25rem, -0.956rem + 7.84vw, 1.5rem);
}

.fs20 {
	font-size: clamp(1.125rem, 0.022rem + 3.92vw, 1.25rem);
}

.fs18 {
	font-size: clamp(1.063rem, 0.511rem + 1.96vw, 1.125rem);
}

.fs16 {
	font-size: clamp(0.938rem, 0.386rem + 1.96vw, 1rem);
}

.fs10 {
	font-size: 10px;
}

main {
	background-color: #FFF4EC;
	padding: 20px 0 40px;
}

section {
	max-width: 650px;
	width: 93%;
	margin: 0 auto 5%;
	padding: 40px 0;
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
}

.step {
	max-width: 420px;
	width: 80%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.step-item-circle {
	width: 18.5px;
	height: 18.5px;
	background-color: #E2E2E2;
	border-radius: 10px;
	position: relative;
}

.step-item-line {
	width: calc((100% - (18.5px * 4)) / 3);
	height: 1px;
	background-color: #E2E2E2;
}

.q-item {
	width: 93%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: 50px auto 40px;
	text-align: center;
}
.q-item .fs24 {
	line-height: 1.2;
}

.q-item .fs20 {
	padding-left: 10px;
}

.answer {
	display: flex;
	flex-direction: column;
	grid-row-gap: 20px;
	max-width: 300px;
	width: 93%;
	margin: 0 auto;
}

.answer-item {
	border: 1px solid #EEB5B4;
	border-radius: 5px;
	padding: 5px 0;
	text-align: center;
	font-weight: 500;
	transition: all 0.5s;
}

.answer-item.js-choose {
	background-color: #EEB5B4;
}

.btn {
	display: block;
	max-width: 380px;
	width: 93%;
	margin: 40px auto 0;
	padding: 10px 0;
	background-color: #E66E6D;
	border-radius: 50px;
	color: #fff;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	border: none;
	position: relative;
}

.btn::after {
	content: "";
	background-image: url("../img/btn_arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 27px;
	height: 27px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5%;
}




/*---------------------------
		TOP
---------------------------*/
.Top {
	max-width: 715px;
	background-color: rgba(255, 255, 252, 0.7);
	border: 1px solid #eeb5b4;
	padding: 55px 0 50px;
	text-align: center;
	position: relative;
}

.top-p {
	display: inline-block;
	background: linear-gradient(transparent 70%, #FFD9D8 70%);
	font-weight: 600;
}

.top-h1 {
	max-width: 540px;
	width: 93%;
	border-top: 2px solid #3A2211;
	border-bottom: 2px solid #3A2211;
	margin: 15px auto 25px;
	padding: 7px 0;
	line-height: 1.4;
}

.top-img {
	display: block;
	max-width: 498px;
	width: 75%;
	margin:  0 auto;
}

.top-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	max-width: 405px;
	margin: 25px auto 0;
	padding: 5px 0;
}

.top-btn::after {
	right: 10%;
}

.max630 {
	display: none;
}

.max419 {
	display: none;
}

@media screen and (max-width: 630px) {
	.min630 {
		display: none;
	}
	
	.max630 {
		display: block;
	}
}
@media screen and (max-width: 419px) {
	.min630 {
		display: none;
	}
	
	.max630 {
		display: none;
	}
	
	.max419 {
		display: block;
	}
}
/*---------------------------
		q1
---------------------------*/
.q1 .step-item1 {
	background-color: #E9B398;
}

/*---------------------------
		q2
---------------------------*/
.q2 .step-item1,
.q2 .step-item2,
.q2 .step-item3 {
	background-color: #E9B398;
}

/*---------------------------
		q3
---------------------------*/
.q3 .step-item1,
.q3 .step-item2,
.q3 .step-item3,
.q3 .step-item4,
.q3 .step-item5 {
	background-color: #E9B398;
}

.bmi-wrap {
	max-width: 550px;
	width: 93%;
	margin: 50px auto 0;
	padding: 0;
	border: 1px solid #E66E6D;
	border-radius: 10px;
	display: none;
	grid-template-columns: 9% 66% 22% 3%;
	grid-template-rows: repeat(5, auto);
	grid-template-areas: 
		"bmi-title bmi-title bmi-title bmi-title"
		"... bmi-p1 bmi-img ..."
		"... bmi-h4 bmi-img ..."
		"... bmi-p2 bmi-img ..."
		"... bmi-p3 bmi-img ...";
}
.bmi-title {
	grid-area: bmi-title;
	width: 100%;
	background-color: #E66E6D;
	padding: 10px 0; 
	color: #fff;
	text-align: center;
	font-weight: 500;
}
.bmi-p1 {
	grid-area: bmi-p1;
	margin-top: 20px;
	font-weight: 500;
}
.bmi-h4 {
	grid-area: bmi-h4;
	margin-top: 20px;
	font-weight: 500;
}
.bmi-p2 {
	grid-area: bmi-p2;
	font-weight: 500;
}

.bmi-p3 {
	grid-area: bmi-p3;
	margin-top: 20px;
	padding-bottom: 20px;
	font-weight: 500;
}
.bmi-img {
	grid-area: bmi-img;
	max-width: 69px;
	margin: 20px 0 20px 20px;
	align-self: center;
}


@media screen and (max-width: 430px) {
	.bmi-wrap {
	grid-template-columns: 10px auto 10px;
		grid-template-areas: 
		"bmi-title bmi-title bmi-title"
		"... bmi-p1 ..."
		"... bmi-h4 ..."
		"... bmi-p2 ..."
		"... bmi-p3 ...";
		position: relative;
		z-index: 1;
}
	.bmi-img {
		position: absolute;
		top: 20%;
		left: 70%;
		margin: 0;
		opacity: .4;
		z-index: -1;
	}
}

/*---------------------------
		q4
---------------------------*/
.q4 {
	margin-bottom: 0;
}

.q4 .step-item-circle,
.q4 .step-item-line{
	background-color: #E9B398;
}


.glp1 {
	display: none;
	max-width: 550px;
	width: 93%;
	margin: 50px auto 0;
	border: 2px solid #E66E6D;
	border-radius: 10px;
	padding: 20px 0;
	position: relative;
}

.glp1::after {
	content: "";
	background-image: url("../img/illust_q4_2.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 55px;
	height: 113px;
	position: absolute;
	bottom: 20px;
	right: 7%;
}

.glp1-1st-wrap {
	max-width: 443px;
	width: 93%;
	margin: 0 auto 20px;
	display: grid;
	grid-template-columns: 30% 70%;
	grid-template-rows: repeat(2, auto);
	grid-row-gap: 10px;
}

.glp1-1st-h3 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

.glp1-1st-h3 span {
	display: block;
	width: fit-content;
	background: linear-gradient(transparent 70%, #FFCE78 70%);
	line-height: 1.2;
}

.glp1-1st-p {
	grid-column:  2 / 3;
	grid-row: 2 / 3;
	font-weight: 500;
}

.glp1-1st-img {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	max-width: 120px;
	align-self: center;
}

.glp1-h3 {
	display: flex;
	justify-content: center;
	align-items: baseline;
	background-color: #E66E6D;
	padding-right: 7%;
	color: #fff;
	text-align: center;
	font-weight: 500;
}

.glp1-h3::before {
	content: "";
	background-image: url("../img/icon_light.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 27px;
	height: 33px;
	align-self: center;
}

.glp1-p {
	max-width: 415px;
	width: 80%;
	margin: 15px auto 0;
	padding-right: 3%;
	font-weight: 500;
}

@media screen and (max-width: 600px) {
	.glp1::after {
	right: 3%;
}
}

@media screen and (max-width: 490px) {
	.glp1 {
	width: 90%;
}
	.glp1-1st-wrap {
	grid-template-columns: 100%;
		position: relative;
		z-index: 1;
}
	.glp1-1st-h3 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.glp1-1st-p {
	grid-column:  1 / 2;
	grid-row: 2 / 3;
}

.glp1-1st-img {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	opacity: .5;
	z-index: -1;
}
	
	.glp1-h3 {
	flex-direction: column;
	padding-right: 0;
		align-items: center;
		line-height: 1.2;
		padding: 7px 0;
		position: relative;
}
	.glp1-h3::before {
	position: absolute;
		left: 3%;
		top: 50%;
		transform: translateY(-50%);
}
	.glp1-p {
	width: 90%;
		padding-right: 35px;
}
	.glp1::after {
	bottom: 12%;
}
}

/*-----------------------------
Footer
------------------------------*/
footer {
	background-color: #FFDEBD;
	padding: 5px;
	text-align: center;
}
footer a {
	text-decoration: none;
	color: #122037;
}