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

/* wrpSpecialCts */
.wrpContents .wrpSpecialCts {
	color: #595858;
}

.wrpMainContents {
	width: 100%;
	padding-bottom: 60px;
	overflow: hidden;
}

/* .wrpMainContents > * {
	max-width: 1280px;
	margin: 0 auto;
} */

.wrpCts {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.6);
	z-index: 1;
}

h2 {
	color: #e2162e;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 36px;
	text-align: center;
	line-height: 1.38;
}

h3 {
	color: #721e05;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 34px;
	text-align: center;
	line-height: 1.8;
}


h2 sup {
	font-size: 16px;
}

.txtEx {
	font-size: 14px;
}

em {
	color: #e2162e;
	font-weight: normal;
}

section {
	position: relative;
}

.sectonMainVisual {
	background: #eeeff2;
}

.mainVisual {
	width: 100%;
	margin: 0 auto;
	aspect-ratio: 2544/1177;
	background: url(/hythiol/products/images/hc2/pic_mainimg.jpg) no-repeat 0 0;
	background-size: cover;
}

.mainVisual h1 {
	text-indent: -9999px;
	overflow: hidden;
}


/* sectionProduct */

.sectionProduct::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 381px;
	height: 530px;
	background: url(/hythiol/products/images/hc2/bg_flower_01.png) no-repeat 0 0;
	background-size: cover;
}

.sectionProduct::after {
	display: block;
	content: '';
	position: absolute;
	bottom: -82px;
	left: 0;
	width: 368px;
	height: 542px;
	background: url(/hythiol/products/images/hc2/bg_flower_02.png) no-repeat 0 0;
	background-size: cover;
}

.sectionProduct .ctsInner {
	padding: 42px 120px 0;
}

.product .ctsHeading {
	margin-bottom: 24px;
}

.product .detail {
	width: 354px;
	margin: 0 auto 43px;
}

.product .detail .image {
	width: 244px;
	margin: 0 auto 16px;
}

.product .detail .info > p {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
}

.product .detail .info .otc {
	border: 1px solid #787777;;
	color: #787777;
	padding: 4px 10px;
	box-sizing: border-box;
	font-size: 15px;
	margin-left: 1.07em !important;
}

.product .ctsBody .text {
	font-size: 26px;
	text-align: center;
	line-height: 1.73;
	padding-bottom: 88px;
	background-image: url(/hythiol/products/images/hc2/bg_txt.png);
	background-size: 76% auto;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.product .ctsBody .txtEx {
	margin-top: 30px;
	text-align: center;
}

.product .ctsBody .txtEx span {
	display: inline-block;
	text-align: left;
}


/* sectionEffect */
.sectionEffect{
	margin-top: 0 !important;
}

.sectionEffect .ctsInner {
	padding: 0 88px 66px;
}

.effect{
	margin-bottom: 56px;
}

.effect h2 {
	line-height: 1.5;
}

.effect .ctsHeading {
	margin-bottom: 50px;
}

.effect .ctsBody .image {
	width: 456px;
	margin: 0 auto;
}

.effect .ctsBody .txtEx {
	margin-top: 56px;
	margin-bottom: 24px;
	font-size: 15px;
	text-align: center;
	max-width: 455px;
	margin-left: auto;
	margin-right: auto;
}


.mechanism .mechanism02 .image {
	width: 460px;
	margin: 0 auto;
}

.mechanism .mechanism02 .txtEx {
	margin: 40px -20px 0;
	color: #251e1c;
	font-size: 18px;
	text-align: center;
}

.mechanism .mechanism02 .image .txtEx {
	margin: 8px 0 0 0;
	font-size: 16px;
	text-align: right;
}


.mechanism .mechanism03 .image {
	width: 560px;
	margin: 0 auto;
}

.mechanism .mechanism03 .image .ttl {
	margin-bottom: 36px;
	font-size: 25px;
	text-align: center;
	line-height: 1;
}

.mechanism .mechanism03 .image .txtEx {
	margin: 8px 0 0 0;
	font-size: 16px;
	text-align: right;
}



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

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

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

	.wrpMainContents {
		width: 100%;
		padding: 0 0 26px;
	}

	.wrpMainContents section {
		padding: 0 calc(25/375*100vw);
		box-sizing: border-box;
	}

	.wrpCts {
		width: 100%;
	}

	h2 {
		font-size: 19px;
		text-align: center;
		line-height: 1.55;
	}

	h3 {
		font-size: 17px;
		line-height: 1.8;
	}

	h2 sup {
		font-size: 12px;
	}

	.txtEx {
		font-size: 9px !important;
	}

	/* mainVisual */
	.mainVisual {
		position: relative;
		width: 100%;
		aspect-ratio: 1500/1826;
		background: none;
	}

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

	.sectonMainVisual .lNav {
		display: block;
		position: static;
		transform: none;
		width: 100%;
		margin: 0;
		margin-top: -17%;
		padding: 0 34px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.sectonMainVisual .lNav > li,
	.sectonMainVisual .lNav > li.navMechanism {
		width: 100%;
		height: auto;
	}

	.sectonMainVisual .lNav > li.navProduct,
	.sectonMainVisual .lNav > li.navMechanism,
	.sectonMainVisual .lNav > li.navQa,
	.sectonMainVisual .lNav > li.navEC {
		width: 100%;
		height: auto;
	}

	.sectonMainVisual .lNav > li a {
		height: auto;
	}

	.sectonMainVisual .lNav > li:not(:last-child) {
		margin-bottom: 15px;
	}

	/* sectionProduct */
	.sectionProduct::before {
		top: 10%;
		width: 190px;
		height: 265px;
	}

	.sectionProduct::after {
		position: absolute;
		bottom: 90px;
		width: 184px;
		height: 271px;
	}

	.sectionProduct .ctsInner {
		padding: 24px calc(15/375*100vw) 0;
	}

	.product .ctsHeading {
		margin-bottom: 12px;
	}

	.product .detail {
		width: 100%;
		margin: 0 auto 20px;
	}

	.product .detail .image {
		width: 36%;
		margin: 0 auto 12px;
	}

	.product .detail .info .effect{
		margin-bottom: 0;
	}

	.product .detail .info {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.product .detail .info > p {
		font-size: 12px;
	}

	.product .detail .info .otc {
		margin-left: 6px;
		padding: 2px 6px;
		font-size: 12px;
	}

	.product .ctsBody .text {
		font-size: 15px;
		line-height: 1.8;
		padding-bottom: 44px;
		background-position: center bottom 10%;
	}

	.product .ctsBody .txtEx {
		width: 235px;
		margin: 15px auto 0;
	}


	/* sectionEffect */
	.sectionEffect {
		margin-bottom: 50px;
	}

	.sectionEffect .ctsInner {
		padding: 0 20px 53px;
	}

	.effect h2 {
		line-height: 1.6;
	}

	.effect .ctsHeading {
		margin-bottom: 25px;
	}

	.effect .ctsBody .image {
		width: 100%;
	}

	.effect .ctsBody .txtEx {
		margin-top: 33px;
	}


	.mechanism .mechanism02 .image {
		width: 100%;
	}

	.mechanism .mechanism02 .txtEx {
		margin: 10px 0 0;
		text-align: left;
	}

	.mechanism .mechanism02 .image .txtEx {
		margin: 1px 0 0 0;
	}

	.mechanism .mechanism03 .image {
		width: 100%;
	}

	.mechanism .mechanism03 .image .ttl {
		margin-bottom: 15px;
		font-size: 15px;
	}

	.mechanism .mechanism03 .image .txtEx {
		margin: 8px 0 0 0;
	}

}

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

	h2 {
		font-size: 18px;
	}

	h3 {
		font-size: 15px;
	}

	.wrpMainContents section {
		padding: 0 15px;
	}

	.sectionProduct .ctsInner {
		padding-right: 10px;
		padding-left: 10px;
	}

	.new h2 {
		font-size: 17px;
	}


}

@media only screen and (max-width: 767px) {
	.anchor-fix {
		padding-top: 38px;
		margin-top: -56px;
	}
}