@charset "UTF-8";
/*
*******************************************************************************************************
# Hythiol -　診断コンテンツ
*******************************************************************************************************
*/

/* wrpSpecialCts */
.wrpContents .wrpSpecialCts {
	width: 100%;
	margin: 0 auto;
}

.mainVisual {
	position: relative;
	height: 479px;
}

.mainVisual::after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 479px;
	background: linear-gradient(to bottom, rgba(230,119,157,1) 0%,rgba(216,72,116,1) 100%);
}

.mainVisual::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 479px;
	background: linear-gradient(to bottom, rgba(235,201,215,1) 0%,rgba(233,180,196,1) 100%);
}

.mainVisual h1 {
	position: relative;
	width: 100%;
	max-width: 1280px;
	height: 479px;
	margin: 0 auto;
	background: url(/hythiol/beauty-or-wellness/images/pic_mainimg_pc.png) no-repeat 0 0;
	text-indent: -9999px;
	z-index: 1;
}

.wrpQuestion {
	background-color: #f7cfd8;
	background: linear-gradient(to right, rgba(247,207,216,1) 5%,rgba(249,229,232,1) 46%,rgba(249,229,232,1) 57%,rgba(247,207,216,1) 97%,rgba(247,207,216,1) 97%);
}

.sectionQuestion {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.questionHeading {
	padding: 78px 0 48px;
	box-sizing: border-box;
}

.questionHeading .txtLead {
	width: 576px;
	margin: 0 auto 49px;
}

.questionHeading .txtStart {
	width: 155px;
	margin: 0 auto;
}

.question {
	position: relative;
}

.question + .question {
	padding-top: 66px;
}

.question .questionInner {
	position: relative;
	width: 762px;
	height: 762px;
	margin: 0 auto;
	padding: 57px 0 0;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 14px;
	box-sizing: border-box;
	z-index: 3;
}

.question .ttl {
	width: 135px;
	margin: 0 auto 25px;
}

.question .qLead {
	margin: 0 auto 62px;
}

.question .abList {
	margin-bottom: 70px;
}

.question .abList li {
	display:-ms-flexbox;
	display: flex;
}

.question .abList li:not(:last-child) {
	margin-bottom: 42px;
}

.question .checkSelect {
	width: 383px;
	margin: 0 auto;
}

.question .checkSelect label {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.question .checkSelect label:not(:last-child) {
	margin-bottom: 20px;
}

.question .checkSelect input[type="radio"] {
	display: none;
}

.question .checkSelect label .labelInner {
	display:-ms-flexbox;
	display: flex;
	line-height: 1;
}

.question .checkSelect label .txt {
	position: relative;
	display: inline;
	padding-left: 63px;
}

.question .checkSelect label .txt img {
	pointer-events: none;
}

.question .checkSelect label .txt:before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 31px;
	height: 31px;
	border: 1px solid #000;
	box-sizing: border-box;
}

.question .checkSelect label .txt:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 3px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 25px;
	height: 25px;
}

.question .checkSelect input[type="radio"]:checked + .txt:after {
	background-color: #f39ca1;
}

.question::before,
.question::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
}

/* q1 */
.question.q01 .qLead {
	width: 528px;
}

.question.q01 .abList {
	padding-left: 199px;
}

.question.q01::before {
	top: 0;
	left: 106px;
	width: 246px;
	height: 274px;
	background: url(/hythiol/beauty-or-wellness/images/bg_q1_01.png) no-repeat 0 0;
	background-size: contain;
}

.question.q01::after {
	top: 406px;
	right: 117px;
	width: 200px;
	height: 556px;
	background: url(/hythiol/beauty-or-wellness/images/bg_q1_02.png) no-repeat 0 0;
	background-size: contain;
}

/* q2 */
.question.q02 .qLead {
	width: 360px;
}

.question.q02 .abList {
	padding-left: 194px;
}

.question.q02::before {
	top: 33px;
	left: 81px;
	width: 262px;
	height: 318px;
	background: url(/hythiol/beauty-or-wellness/images/bg_q2_01.png) no-repeat 0 0;
	background-size: contain;
}

.question.q02::after {
	top: 571px;
	right: 40px;
	width: 358px;
	height: 456px;
	background: url(/hythiol/beauty-or-wellness/images/bg_q2_02.png) no-repeat 0 0;
	background-size: contain;
}

/* q3 */
.question.q03 .qLead {
	width: 394px;
}

.question.q03 .abList {
	padding-left: 235px;
}

.question.q02::before {
	top: -116px;
	left: 135px;
	width: 126px;
	height: 345px;
	background: url(/hythiol/beauty-or-wellness/images/bg_q3_01.png) no-repeat 0 0;
	background-size: contain;
}

.question.q02::after {
	top: 545px;
	right: 98px;
	width: 218px;
	height: 388px;
	background: url(/hythiol/beauty-or-wellness/images/bg_q3_02.png) no-repeat 0 0;
	background-size: contain;
}

/* q4 */
.question.q04 .qLead {
	width: 296px;
}

.question.q04 .abList {
	padding-left: 240px;
}

.question.q04::before {
	top: -169px;
	left: 37px;
	width: 328px;
	height: 420px;
	background: url(/hythiol/beauty-or-wellness/images/bg_q4_01.png) no-repeat 0 0;
	background-size: contain;
}

.questionBody .btn {
	padding: 82px 0 70px;
	text-align: center;
}

.questionBody .btn button {
	border: none;
	text-indent: -9999px;
	cursor: pointer;
}

.questionBody .btn button:hover {
	opacity: 0.7;
}

.questionBody .btn .submit {
	width: 403px;
	height: 107px;
	background: url(/hythiol/beauty-or-wellness/images/btn_submit.png) no-repeat 0 0;
}

.questionBody .btn .submit:disabled {
	width: 403px;
	height: 107px;
	background: url(/hythiol/beauty-or-wellness/images/btn_submit_disabled.png) no-repeat 0 0;
}

.questionBody .btn .reset {
	width: 403px;
	height: 107px;
	background: url(/hythiol/beauty-or-wellness/images/btn_reset.png) no-repeat 0 0;
}

.resultArea {
	display: none;
	position: relative;
	padding-top: 101px;
}

.resultArea::before {
	content: '';
	display: block;
	position: absolute;
	top: -34px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 25px;
	height: 102px;
	background: url(/hythiol/beauty-or-wellness/images/icn_down.png) no-repeat 0 0;
}

.resultMessage {
	position: relative;
	width: 688px;
	height: 703px;
	margin: 0 auto 107px;
}

.resultMessage.w-result01 {
	background: url(/hythiol/beauty-or-wellness/images/txt_result01_w.png) no-repeat 0 0;
}
.resultMessage.w-result02 {
	background: url(/hythiol/beauty-or-wellness/images/txt_result02_w.png) no-repeat 0 0;
}
.resultMessage.w-result03 {
	background: url(/hythiol/beauty-or-wellness/images/txt_result03_w.png) no-repeat 0 0;
	background-size: cover;
}
.resultMessage.p-result04 {
	background: url(/hythiol/beauty-or-wellness/images/txt_result04_p.png) no-repeat 0 0;
}
.resultMessage.p-result05 {
	background: url(/hythiol/beauty-or-wellness/images/txt_result05_p.png) no-repeat 0 0;
}
.resultMessage.p-result06 {
	background: url(/hythiol/beauty-or-wellness/images/txt_result06_p.png) no-repeat 0 0;
}

.resultMessage .resultTxt {
	text-indent: -9999px;
	overflow: hidden;
}

.resultProduct {
	background: #fff;
	padding-top: 71px;
}

.resultProduct .product a {
	display:-ms-flexbox;
	display: flex;
}

.resultProduct .product .more {
	width: 144px;
	padding: 100px 0 0 40px;
}

/* hwc */
.resultProduct.w .lead {
	width: 429px;
	margin: 0 auto 35px;
}

.resultProduct.w .product {
	position: relative;
	width: 504px;
	margin: 0 auto;
}

.resultProduct.w .product .img {
	width: 316px;
}

/* hc2 */
.resultProduct.p .lead {
	width: 368px;
	margin: 0 auto 35px;
}

.resultProduct.p .product {
	position: relative;
	width: 494px;
	margin: 0 auto;
}

.resultProduct.p .product .img {
	width: 310px;
}

/* brandStory */
.brandStory {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	background: url(/hythiol/beauty-or-wellness/images/bg_story.png) no-repeat 0 0;
}

.brandStory .brandStoryHeading {
	height: 400px;
	padding: 131px 0 0 350px;
	box-sizing: border-box;
}

.brandStory .brandStoryHeading .ttl {
	width: 248px;
	margin-bottom: 32px;
}

.brandStory .brandStoryHeading .copy {
	width: 540px;
}

.brandStory .story {
	padding: 96px 0 0;
	text-align: center;
}

.brandStory .story > p {
	width: 664px;
	margin: 0 auto;
}

.brandStory .story > p:not(:last-child) {
	margin-bottom: 74px;
}

.brandStory .hythiol {
	width: 782px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.brandStory .hythiol .hythiol-hcw ,
.brandStory .hythiol .hythiol-hc2 {
	width: 50%;
}
.brandStory .hythiol .hythiol-hcw .hythiol-hcw-img,
.brandStory .hythiol .hythiol-hc2 .hythiol-hc2-img{
	width: 294px;
	margin: 0 auto;
}

.brandStory .hythiol .hythiol-hcw .bnrsInner ,
.brandStory .hythiol .hythiol-hc2 .bnrsInner {
	width: 290px;
}

.brandStory .hythiol .hythiol-hcw .bnrsInner {
	margin: 0 20px 0 auto;
}

.brandStory .hythiol .hythiol-hc2 .bnrsInner {
	margin: 0 auto 0 20px;
}

.brandStory .hythiol .bnrs{
	width: 100%;
	margin: 20px auto 0;
}

.brandStory .hythiol .bnrs .bnrsInner{
	width: 290px;
	margin: 0 auto;
}

.brandStory .hythiol .modBtnLink {
	margin-bottom: 0;
}


/* bnrArea */
.bnrArea {
	width: 978px;
	margin: 100px auto 0;
}

.bnrProduct li:not(:last-child) {
	margin-bottom: 20px;
}

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

	/* override */
	.wrpContents .wrpSpecialCts .frontInner {
		padding: 0;
	}

	/* wrpSpecialCts */
	.wrpContents .wrpSpecialCts {
		width: 100%;
		padding-top: 56px;
	}

	.mainVisual {
		width: 100%;
		height: auto;
	}

	.mainVisual::before,
	.mainVisual::after {
		display: none;
	}

	.mainVisual h1 {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 78.4%;
		background: none;
	}

	.mainVisual h1::before {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(/hythiol/beauty-or-wellness/images/sp/pic_mainimg.jpg) no-repeat 0 0;
		background-size: contain;
	}

	.questionHeading {
		padding: 20px 0 23px;
	}

	.questionHeading .txtLead {
		width: 75.47%;
		margin: 0 auto 20px;
	}

	.questionHeading .txtStart {
		width: 24.53%;
	}

	.question {
		position: relative;
		padding: 0 7.47%;
	}

	.question + .question {
		padding-top: 27px;
	}

	.question .questionInner {
		width: 100%;
		height: auto;
		padding: 17px 25px 30px;
		border-radius: 9px;
		box-sizing: border-box;
	}

	.question .ttl {
		width: 26.77%;
		margin: 0 auto 15px;
	}

	.question .qLead {
		width: 100%;
		margin-bottom: 30px;
	}

	.question .abList {
		margin-bottom: 34px;
	}

	.question .abList li {
		display: block;

	}

	.question .abList li:not(:last-child) {
		margin-bottom: 19px;
	}

	.question .checkSelect {
		width: 76.58%;
		margin: 0 0 0 40px;
	}

	.question .checkSelect label:not(:last-child) {
		margin-bottom: 20px;
	}

	.question .checkSelect label .txt {
		position: relative;
		padding-left: 30px;
	}

	.question .checkSelect label .txt:before {
		width: 15px;
		height: 15px;
	}

	.question .checkSelect label .txt:after {
		left: 2px;
		width: 11px;
		height: 10px;
	}

	/* q1 */
	.question.q01 .abList {
		padding-left: 0;
	}

	.question.q01::before {
		top: -80px;
		left: 0;
		width: 136px;
		height: 150px;
		background: url(/hythiol/beauty-or-wellness/images/sp/bg_q1_01.png) no-repeat 0 0;
		background-size: contain;
	}

	.question.q01::after {
		top: 82.64%;
		bottom: auto;
		right: 0;
		width: 88px;
		height: 157px;
		background: url(/hythiol/beauty-or-wellness/images/sp/bg_q1_02.png) no-repeat 0 0;
		background-size: contain;
	}

	.question.q01 .txt,
	.question.q01 .qLead {
		width: 100%;
	}

	/* q2 */
	.question.q02 .abList {
		padding-left: 0;
	}

	.question.q02::before {
		top: -45px;
		left: 0;
		width: 108px;
		height: 307px;
		background: url(/hythiol/beauty-or-wellness/images/sp/bg_q2_01.png) no-repeat 0 0;
		background-size: contain;
	}

	.question.q02::after {
		top: 85.75%;
		right: 0;
		width: 93px;
		height: 186px;
		background: url(/hythiol/beauty-or-wellness/images/sp/bg_q2_02.png) no-repeat 0 0;
		background-size: contain;
	}

	.question.q02 .txt,
	.question.q02 .qLead {
		width: 100%;
	}

	/* q3 */
	.question.q03 .abList {
		padding-left: 0;
	}

	.question.q03::before {
		top: -19.82%;
		left: 0;
		width: 76px;
		height: 165px;
		background: url(/hythiol/beauty-or-wellness/images/sp/bg_q3_01.png) no-repeat 0 0;
		background-size: contain;
	}

	.question.q03::after {
		top: 83.42%;
		right: 0;
		width: 100px;
		height: 162px;
		background: url(/hythiol/beauty-or-wellness/images/sp/bg_q3_02.png) no-repeat 0 0;
		background-size: contain;
	}

	.question.q03 .txt,
	.question.q03 .qLead {
		width: 100%;
	}

	/* q4 */
	.question.q04 .abList {
		padding-left: 0;
	}

	.question.q04::before {
		top: -25.91%;
		left: 0;
		width: 106px;
		height: 205px;
		background: url(/hythiol/beauty-or-wellness/images/sp/bg_q4_01.png) no-repeat 0 0;
		background-size: contain;
	}

	.question.q04 .txt,
	.question.q04 .qLead {
		width: 100%;
	}

	.questionBody .btn {
		padding: 47px 0 40px;
	}

	.questionBody .btn button:hover {
		opacity: 1;
	}

	.questionBody .btn .submit {
		width: 242.5px;
		height: 56.5px;
		background: url(/hythiol/beauty-or-wellness/images/sp/btn_submit.png) no-repeat 0 0;
		background-size: contain;
	}

	.questionBody .btn .submit:disabled {
		width: 242.5px;
		height: 56.5px;
		background: url(/hythiol/beauty-or-wellness/images/sp/btn_submit_disabled.png) no-repeat 0 0;
		background-size: contain;
	}

	.questionBody .btn .reset {
		width: 242.5px;
		height: 56.5px;
		background: url(/hythiol/beauty-or-wellness/images/sp/btn_reset.png) no-repeat 0 0;
		background-size: contain;
	}

	.resultArea {
		position: relative;
		padding-top: 28px;
	}

	.resultArea::before {
		content: '';
		display: block;
		position: absolute;
		top: -28px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 15px;
		height: 64px;
		background: url(/hythiol/beauty-or-wellness/images/sp/icn_down.png) no-repeat 0 0;
		background-size: contain;
	}

	.resultMessage {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 92.2666%;
		margin-bottom: 36px;
		background: none !important;
	}

	.resultMessage::before {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.resultMessage.w-result01::before {
		background: url(/hythiol/beauty-or-wellness/images/sp/txt_result01_w.png) no-repeat 0 0;
		background-size: cover;
	}
	.resultMessage.w-result02::before {
		background: url(/hythiol/beauty-or-wellness/images/sp/txt_result02_w.png) no-repeat 0 0;
		background-size: cover;
	}
	.resultMessage.w-result03::before {
		background: url(/hythiol/beauty-or-wellness/images/sp/txt_result03_w.png) no-repeat 0 0;
		background-size: cover;
	}
	.resultMessage.p-result04::before {
		background: url(/hythiol/beauty-or-wellness/images/sp/txt_result04_p.png) no-repeat 0 0;
		background-size: cover;
	}
	.resultMessage.p-result05::before {
		background: url(/hythiol/beauty-or-wellness/images/sp/txt_result05_p.png) no-repeat 0 0;
		background-size: cover;
	}
	.resultMessage.p-result06::before {
		background: url(/hythiol/beauty-or-wellness/images/sp/txt_result06_p.png) no-repeat 0 0;
		background-size: cover;
	}
	.resultMessage .resultTxt {
		text-indent: -9999px;
		overflow: hidden;
	}

	.resultProduct {
		padding-top: 55px;
	}

	.resultProduct .product .more {
		width: 87px;
		padding: 53px 0 0 13px;
	}

	/* hwc */
	.resultProduct.w .lead {
		width: 65.6%;
		margin: 0 auto 25px;
	}

	.resultProduct.w .product {
		width: 71.6%;
	}

	.resultProduct.w .product .img {
		width: 62.94%;
	}

	/* hc2 */
	.resultProduct.p .lead {
		width: 57.87%;
		margin: 0 auto 12px;
	}

	.resultProduct.p .product {
		width: 71.6%;
	}

	.resultProduct.p .product .img {
		width: 62.94%;
	}

	/* brandStory */
	.brandStory {
		padding-top: 41.6%;
		background: url(/hythiol/beauty-or-wellness/images/sp/bg_story.png) no-repeat 0 0;
		background-size: contain;
	}

	.brandStory .brandStoryHeading {
		height: auto;
		padding: 35px 0 0 0;
		box-sizing: border-box;
	}

	.brandStory .brandStoryHeading .ttl {
		width: 35.47%;
		margin: 0 auto 23px;
	}

	.brandStory .brandStoryHeading .copy {
		width: 80%;
		margin: 0 auto;
	}

	.brandStory .story {
		padding: 33px 0 0;
	}

	.brandStory .story > p {
		width: 85.33%;
	}

	.brandStory .story > p:not(:last-child) {
		margin-bottom: 40px;
	}


	.brandStory .hythiol {
		width: 100%;
		margin: 0 auto;
		display: block;
		padding: 0;
	}

	.brandStory .hythiol .hythiol-hcw ,
	.brandStory .hythiol .hythiol-hc2 {
		width: 100%;
	}

	.brandStory .hythiol .hythiol-hcw .hythiol-hcw-img{
		width: 64%;
	}

	.brandStory .hythiol .hythiol-hc2 .hythiol-hc2-img{
		width: 53.33%;
	}

	.brandStory .hythiol .hythiol-hcw .bnrs{
		margin-bottom: 50px;
	}

	.brandStory .hythiol .hythiol-hcw .bnrsInner ,
	.brandStory .hythiol .hythiol-hc2 .bnrsInner {
		width: 100%;
		padding: 0 20px;
		margin: 0 auto;
		box-sizing: border-box;
	}


	.brandStory .hythiol .bnrs{
		margin: 0 0 40px;
	}


	/* bnrArea */
	.bnrArea {
		width: 100%;
		margin: 23px auto 0;
		padding: 0 20px;
		box-sizing: border-box;
	}

}