@charset 'utf-8';

#footer{ display: none; }
/* SEARCH
------------------------------------------------ */
	#search{ position: relative; overflow: hidden; }
	.search{ position: relative; min-height: calc( 100vh - 80px ); width: 100%; padding: 25px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; -webkit-overflow-scrolling: touch; overflow: auto; }
	.search:before,.search:after{ position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; }
	.search:before{ background: url(../../img/search/banner.jpg)no-repeat center center; background-size: cover; z-index: -3; }
	.search:after{ background: #FFF; opacity: 0.7; z-index: -2; }

/* SEARCH BLOCK
------------------------------------------------ */
	.search__block{ position: relative; width: 100%; max-width: 990px; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.search__block__wrap{ padding: 35px; background: #fff; border-radius: 30px; box-shadow: 0px 0px 20px -6px rgb(0 0 0 / 16%); }
	.search__block .tri--line{ height: 2px; }
	.search__block .tri--line:after,.search__block .tri--line:before{ width: 2px; height: 38px; bottom: -28.5px; }
	.search__block .tri--line span{ height: 4px; bottom: -1px; }
	/* TOP BLOCK */
		.search__block--top{ display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 15px; }
		.search__title,.search__progress{ display: inline-flex; flex-wrap: wrap; }
		.search__title{ width: calc(100% - 225px); }
		.search__title .question{ width: 32px; height: 32px; display: inline-flex; justify-content: center; align-items: center; margin-right: 12px; padding-bottom: 2px; background: #EF9E4E; border-radius: 16px; color: #FFF; font-size: 1.6rem; font-weight: bold; }
		.search__title--t{ margin-right: 5%; font-size: 2.6rem; font-weight: 500; }
		.search__title--p{ display: flex; align-items: center; font-size: 1.8rem; }

/* SEARCH BODY
------------------------------------------------ */
	.search__block--bot{ display: flex; flex-wrap: wrap; margin-top: 80px; }
	.search__body{ position: relative; width: 192px; height: 100%; display: inline-flex; justify-content: center; left: 50%; transform: translateX(-50%); margin-top: 30px; }

/* SEARCH BODY */
	.steptwo{ display: none; }
	.steptwo .progress__bar--current{ width: 70%; }
	.search__link{ display: none; flex-direction: column; margin: 40px 0 0; max-height: -webkit-calc(100vh - 400px); max-height: calc(100vh - 400px); -webkit-overflow-scrolling: touch; overflow: auto; }
	
	.search__link a{ width: fit-content; font-size: 1.8rem; }
	.search__link a:not(:last-child) { margin-bottom: 14px; }
	.search__link a span{ display: block; padding-left: 26px; position: relative; text-decoration: underline; }
	.search__link a span:before{ content:''; position: absolute; left: 10px; top: 8px; width: 8px; height: 8px; border-radius: 50%; }
	
	.search__link.head a span:before{ background-color: #8F37F5; }
	.search__link.body a span:before{ background-color: #F28449; }
	.search__link.hand a span:before{ background-color: #4DB041; }
	.search__link.heart a span:before{ background-color: #E33671; }
	.search__link.liver a span:before{ background-color: #C33E3F; }
	.search__link a:hover span{ color: #EF804E; text-decoration-color: #EF804E; }
	.big-head{ display: table; margin-bottom: 16px; padding: 0 17px; color:#FFFFFF; font-size: 1.6rem; font-weight:bold; background:#9037F5; border-radius: 13px; }
	.search__link.body .big-head{ background-color: #F28449; }
	.search__link.hand .big-head{ background-color: #4DB041; }
	.search__link.heart .big-head{ background-color: #E33671; }
	.search__link.liver .big-head{ background-color: #C33E3F; }
	.mt-30{ margin-top: 10px; }

/* RETURN RESULT */
.return--result{ width: 100%; max-width: 455px; height: 64px; margin: 20px auto 0; border-radius: 32px; box-shadow: 0px 0px 20px -6px rgb(0 0 0 / 16%); }
.return--result a{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.return--result a img{ height: 17px; margin: 5px 18px 0 0; object-fit: contain; }



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

/* SEARCH BODY
------------------------------------------------ */
		.search__body img{ height: 339px; object-fit: contain; vertical-align: middle; }
		.search__body span{ position: absolute; }
		/* HEAD */
			.search__body--head{ top: 22px; left: -23%; }
			.search__body--head > img{ width: 100%; height: 45px; }
		/* hand */
			.search__body--hand{ top: 19vh; left: -9%; }
			.search__body--hand > img{ height: 23px; }
		/* HEAD */
			.search__body--heart{ top: 13vh; right: 0%; }
			.search__body--heart > img{ width: 37px; height: 1px; object-fit: none; }
		/* HEAD */
			.search__body--liver{ bottom: 60px; right: -60%; }
			.search__body--liver > img{ width: 136px; height: 23px; object-fit: none; }
		/* PROGRESS BAR */
			.search__progress{ width: 225px; align-items: center; justify-content: flex-end; }
			.progress__num{ margin-right: 17px; font-size: 1.4rem; font-weight: 500; }
			.progress__num--current{ color: #EF9E4E; font-size: 3rem; font-weight: bold; }
			.progress__bar{ width: 150px; height: 10px; background: rgba(183, 183, 183, 0.6); border-radius: 5px; }
			.progress__bar--current{ width: 30%; height: 100%; display: block; background: #EF9E4E; border-radius: 5px; }
			.step2 .search__progress .progress__bar--current{ width: 70%; }

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

/* BODYPART
------------------------------------------------ */
	.search__bodypart{ position: absolute; width: 100%; height: 100%; display: flex; flex-wrap: wrap; top: 0; left: 0; }
	.search__bodypart ul{ position: relative; width: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
	.search__bodypart ul li{ position: absolute; width: fit-content; height: fit-content; text-align: center; cursor: pointer; }

	.bodypart{ position: relative; width: 120px; height: 120px; display: inline-flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, #fff 0%, #F6F6F6 100%); border: 1px solid #000; border-radius: 60px; box-shadow: 0px 0px 20px -6px rgb(0 0 0 / 16%); font-size: 1.6rem; transition: 0.4s ease-in-out; }
	.bodypart .bigtext { position: relative; width: 100%; }
	.bodypart .bigtextW { position: absolute; top: 0; left: 0; width: 100%; color: #ffffff; opacity: 0; }
	.bodypart:hover{ position: relative; transform: scale(1.5833); color: #fff; border: transparent; font-size: 1.26rem; line-height: 1.2; letter-spacing: 0; }
	.bodypart:hover span{ margin-top: 30px; letter-spacing: inherit; }
	.bodypart:hover .whenhover{ display: none; }
	.bodypart:hover .hovertxt{ display: initial; margin: 0; }
		.hovertxt{ display: none; }
	.bodypart:hover::before{ position: absolute; content: ''; top: 20px; z-index: 1; }
	.bodypart:hover::after{ position: absolute; top: 85px; color: #fff; font-size: 0.7rem; line-height: 1.2; }
	.bodypart:hover .bigtextB { opacity: 0; }
	.bodypart:hover .bigtextW { opacity: 1; }

	/* HEAD */
		.bodypart__head{ top: 45%; left: 35%; }
		.bodypart__head .bodypart:hover{ background: linear-gradient(to bottom, #9238F8 0%, #450083 100%); }
		.bodypart__head .bodypart:hover::before{ width: 49.8px; height: 43.42px; background: url(../../img/search/head2.png) no-repeat center center; background-size: contain; }
		.bodypart__head .bodypart:hover::after{  content:'目・鼻・口'; }
	/* BODY */
		.bodypart__body{ bottom: 40px; left: calc(30% - 80px); }
		.bodypart__body .bodypart:hover{ background: linear-gradient(to bottom, rgba(255, 179, 0, 0.78) 0%, #EF734E 100%); }
		.bodypart__body .bodypart:hover::before{ width: 49.8px; height: 43.42px;  background: url(../../img/search/body2.png) no-repeat center center; background-size: contain; }
		.bodypart__body .bodypart:hover::after{ content:'免疫・血管・疲労'; }
	/* HAND */
		.bodypart__hand{ bottom: 40px; left: 55%; }
		.bodypart__hand .bodypart:hover{ background: linear-gradient(to bottom, #B0D857 0%, #0C9731 100%); }
		/* .bodypart__hand .bodypart:hover::before{ width: 49.8px; height: 43.42px; background: url(../../img/search/hand2.png) no-repeat center center; background-size: contain; } */
		.bodypart__hand .bodypart:hover::before{ width: 49.8px; height: 43.42px; background: url(../../img/search/foot.png) no-repeat center center; background-size: contain; }
		.bodypart__hand .bodypart:hover::after{ content:'骨・筋肉・膝'; }
	/* HEART */
		.bodypart__heart{ top: 45%; left: 30%; }
		.bodypart__heart .bodypart:hover{ background: linear-gradient(to bottom, #FCA8C5 0%, #D8004B 100%); }
		.bodypart__heart .bodypart:hover::before{ width: 49.8px; height: 43.42px; background: url(../../img/search/heart2.png) no-repeat center center; background-size: contain; }
		.bodypart__heart .bodypart:hover::after{ content:'睡眠'; }
	/* LIVER */
		.bodypart__liver{ bottom: 40px; right: 16%; }
		.bodypart__liver .bodypart:hover{ background: linear-gradient(to bottom, #F48080 0%, #960303 100%); }
		.bodypart__liver .bodypart:hover::before{ width: 49.8px; height: 43.42px; background: url(../../img/search/liver2.png) no-repeat center center; background-size: contain; }
		.bodypart__liver .bodypart:hover::after{ content:'むくみ'; }

}


@media screen and (max-width: 768px){
/* SEARCH
------------------------------------------------ */
	.search__block--bot { margin-top: 20px; }

	#search{  }
	.search{ min-height: calc( 100vh - 60px ); }
	.search:before{ background: url(../../img/search/banner.jpg)no-repeat center center; background-size: inherit; }
	.search__body,.search__progress{ display: none; }

	/* TOP BLOCK */
		.search__block--top{ margin: 0; padding: 25px 0 22px; }
		.search__block__wrap{ padding: 0; border-radius: 10px; }
		.search__title{ position: relative; width: 100%; flex-direction: column; margin-left: 90px; }
		.search__title:before{ position: absolute; content: ''; width: 15px; height: 63px; background: url(../../img/search/manequin.png)no-repeat center center; background-size: contain; left: -50px; top: -5px; }
		.search__title .question{ width: 18px; height: 18px; margin-right: 8px; border-radius: 9px;font-size: 0.8rem; }
		.search__title--t{ margin-right: 0; font-size: 1.7rem; }
		.search__title--p{ font-size: 1.1rem; }

		.steptwo.search__block__wrap { padding-bottom: 30px; }

	.search__bodypart{ width: 100%; margin: 25px 0; }
	.search__bodypart ul{  }
	.search__bodypart ul li{ position: relative; width: 100%; height: 66px; display: inline-flex; align-items: center; padding-left: 90px; cursor: pointer; }
	.search__bodypart ul li:before{ position: absolute; content: ''; width: 50px; height: 50px; border-radius: 25px; left: 20px; }
	.search__bodypart ul li:after{ position: absolute; content: ''; }
	.search__bodypart ul li:hover{ background: #E2E2E2; }
	.bodypart{ position: relative; width: 100%; }
	.bodypart:after{ position: absolute; content: ''; width: 10px; height: 17px; background: url(../../img/share/arrow4.png)no-repeat center center; background-size: 100%; top: calc(50% - 8.5px); left: calc(100% - 25px); }
	.bodypart span{ font-size: 1.6rem; margin-bottom: 4px; }
	.bodypart .smalltext{ font-size: 1.1rem; }
	.bodypart__head:before{ background: linear-gradient(to bottom, #9238F8 0%, #450083 100%); }
	.bodypart__head:after{ width: 40px; height: 29px; background: url(../../img/search/head2.png) no-repeat center center; background-size: contain; left: 25px;  }
	.bodypart__heart:before{ background: linear-gradient(to bottom, #FCA8C5 0%, #D8004B 100%); }
	.bodypart__heart:after{ width: 40px; height: 29px; background: url(../../img/search/heart2.png) no-repeat center center; background-size: contain; left: 25px;  }
	.bodypart__hand:before{ background: linear-gradient(to bottom, #B0D857 0%, #0C9731 100%); }
	.bodypart__hand:after{ width: 40px; height: 29px; background: url(../../img/search/foot.png) no-repeat center center; background-size: contain; left: 25px; }
	/* .bodypart__hand:after{ width: 40px; height: 29px; background: url(../../img/search/hand2.png) no-repeat center center; background-size: contain; left: 25px; } */
	.bodypart__body:before{ background: linear-gradient(to bottom, rgba(255, 179, 0, 0.78) 0%, #EF734E 100%); }
	.bodypart__body:after{ width: 40px; height: 29px; background: url(../../img/search/body2.png) no-repeat center center; background-size: contain; left: 25px; }
	.bodypart__liver:before{ background: linear-gradient(to bottom, #F48080 0%, #960303 100%); }
	.bodypart__liver:after{ width: 40px; height: 29px; background: url(../../img/search/liver2.png) no-repeat center center; background-size: contain; left: 25px; }

/* SEARCH LINK */
	.search__link{ margin: 40px 0 0; padding: 0 25px 10px; max-height: calc(100vh - 375px); }
	.search__link a{ width: fit-content; font-size: 1.5rem; }
	/* .search__link a:not(:last-child) { margin-bottom: 32px; } */
	.search__link a:hover{ color: #EF804E; text-decoration-color: #EF804E; }
	.big-head{ font-size: 1.3rem; padding: 2px 12px; }

	/* RETURN RESULT */
	.return--result{ width: 90%; max-width: 455px; height: 64px; margin: 25px auto 0; border-radius: 32px; box-shadow: 0px 0px 20px -6px rgb(0 0 0 / 16%); }
	.return--result a{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
	.return--result a img{ height: 17px; margin: 5px 18px 0 0; object-fit: contain; }

}