@charset "utf-8";

#bs1709 {
	max-width: 996px;
	margin: 0 auto;
	padding-bottom: 80px;
	font-feature-settings: "palt";
	letter-spacing: 0.4px;
}
#bs1709 h2 {
	margin-bottom: 32px;
	padding: 15px 0;
	letter-spacing: 2px;
}
#bs1709 h3 {
	font-size: 16px;
	line-height: 1.5;
}
#bs1709 p {
	font-size: 16px;
	line-height: 1.75;
}

/* ページ内ナビ */
#bs1709 ul.bs1709-nav {
	display: flex;
	justify-content: center;
}
#bs1709 ul.bs1709-nav li {
	width: 104px;
	margin: 0 9.5px;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
}
#bs1709 ul.bs1709-nav li a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 10px 0 20px;
	border: 1px solid #000;
	border-radius: 5px;
	background-color: #fffae7;
	white-space: nowrap;
	transition: opacity .2s ease;
}
#bs1709 ul.bs1709-nav li a:hover {
	opacity: 0.7;
}
#bs1709 ul.bs1709-nav li a::after {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3px;
	width: 13px;
	margin: 0 auto;
	color: #000;
	font-family: icomoon;
	font-size: 13px;
	line-height: 1;
	content: "\e904";
}
#bs1709 ul.bs1709-nav.nav-btm li a {
	padding: 22px 0 8px;
}
#bs1709 ul.bs1709-nav.nav-btm li a::after {
	top: 3px;
	bottom: auto;
	content: "\e905";
}

/* 商品説明（基本） */
#bs1709 .pro-desc-block {
	max-width: 900px;
	margin: 0 auto;
	padding-top: 24px;
	padding-left: 9px;
}
#bs1709 .pro-desc-block h2 {
	margin-bottom: 4px;
	padding: 0;
}
#bs1709 .pro-desc-block span.pro-label {
	padding: 3.5px 3px 0.5px 5px;
}
#bs1709 .pro-desc-block p {
	padding-left: 2px;
	padding-right: 10px;
	font-size: 13px;
	line-height: 1.55;
	text-align: justify;
	letter-spacing: 1.1px;
}
#bs1709 .pro-desc-block p.sup {
	margin: 23px 0 18px;
	font-size: 11px;
}
#bs1709 .pro-desc-block p.restriction-msg {
	margin-bottom: 5px;
}
#bs1709 .pro-desc-block ul.btn {
	padding-top: 7px;
}
#bs1709 .pro-desc-block ul.btn li {
	width: 200px;
}
#bs1709 .static-pdp-main ul.btn li a {
	display: block;
	margin: 0 auto;
	padding: 9px 0;
	border-radius: 5px;
	background-color: #ecebef;
	color: #595757;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	letter-spacing: 1px;
	transition: opacity .2s linear;
}
#bs1709 .static-pdp-main ul.btn button.static-add-to-cart {
	display: block;
	width: 100%;
	padding: 9px 0;
	border: none;
	background-color: #b4b4b5;
	color: #fff;
	font-size: 100%;
	line-height: inherit;
	letter-spacing: 1.5px;
	text-align: center;
}
#bs1709 .static-pdp-main ul.btn .msg-area:not(.hide) + button.static-add-to-cart {
	display: none;
}
#bs1709 .static-pdp-main ul.btn .msg-area,
#bs1709 .static-pdp-main ul.btn .out-of-stock {
	margin: 0 !important;
	padding: 8px 0 !important;
	border: 1px solid #b0b0b0;
	border-radius: 5px;
	background-color: #fff;
	color: #b0b0b0;
	font-size: 12px !important;
	line-height: 1.5;
	text-align: center;
}
#bs1709 .static-pdp-main ul.btn .msg-area {
	letter-spacing: 1px;
}
#bs1709 .static-pdp-main ul.btn .out-of-stock {
	letter-spacing: 1.5px;
}
#bs1709 .static-pdp-main ul.btn li.to-reserve a {
	background-color: #b4b4b5;
	color: #fff;
}

/* メインビジュアル */
#bs1709 #kv {
	overflow: hidden;
	width: 760px;
	height: 410px;
	margin: 33px auto 43px;
}
#bs1709 #kv .slick-list,
#bs1709 #kv .slick-track {
	height: 100%;
}

/* リード */
#bs1709 #desc-block {
	margin: 0 0 63px;
	text-align: center;
}
#bs1709 #desc-block h1 {
	margin-bottom: 40px;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 1.6px;
}
#bs1709 #desc-block h1 span {
	display: inline-block;
	padding: 0 2px 1px;
	border-bottom: 1px solid #323232;
}
#bs1709 #desc-block p {
	margin-bottom: 28px;
	padding-left: 10px;
	font-size: 16px;
	letter-spacing: 1.6px;
}
#bs1709 #desc-block h1 + p {
	font-size: 20px;
	line-height: 1.7;
	letter-spacing: 2px;
}

#bs1709 section {
	margin-top: 25px;
	padding-top: 113px;
	text-align: center;
}
#bs1709 section p {
	letter-spacing: 1.6px;
}

/* 肌の表面、角層の重要性 */
#bs1709 #a-importance {
	margin-top: -43px;
}
#bs1709 #a-importance picture {
	display: block;
	margin: 33px 0 32px;
}

/* 高密着バリアとは */
#bs1709 #a-barrier picture {
	display: block;
	padding: 6px 0 32px;
}

/* 高密着バリアの3つの働き */
#bs1709 #a-feature h3 {
	margin: 0 0 34px;
	letter-spacing: 1.8px;
}
#bs1709 #a-feature h3 > span {
	display: inline-block;
	padding: 2px 2px 8px;
	border-bottom: 1px solid #323232;
}
/* 3つの働き */
#bs1709 #work {
	overflow: hidden;
	display: flex;
	justify-content: center;
	position: relative;
	width: 462px;
	height: 206px;
	margin: 31px auto 41px;
	background: url(../img/work.png) no-repeat 0 0;
	opacity: 0;
	transition: opacity .5s linear;
}
#bs1709 #work::before,
#bs1709 #work::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/work.png) no-repeat 0 0;
	opacity: 0;
	content: "";
}
#bs1709 #work::before {
	background-position: 0 -250px;
	transition: opacity .5s linear .75s;
}
#bs1709 #work::after {
	background-position: 0 -500px;
	transition: opacity .5s linear 1.5s;
}
#bs1709 #work li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	position: relative;
	z-index: 3;
	width: 167px;
	height: 100%;
	margin: 0 -10px;
	padding: 20px 0 38px;
	font-size: 11px;
	line-height: 1.6;
	opacity: 0;
}
#bs1709 #work li:nth-child(1) {
	opacity: 1;
}
#bs1709 #work li:nth-child(2) {
	transition: opacity .5s linear .75s;
}
#bs1709 #work li:nth-child(3) {
	transition: opacity .5s linear 1.5s;
}
#bs1709 #work li strong {
	display: block;
	padding-bottom: 7px;
	font-size: 15px;
	font-weight: normal;
}
#bs1709 #work.show-work,
#bs1709 #work.show-work::before,
#bs1709 #work.show-work::after,
#bs1709 #work.show-work li {
	opacity: 1;
}
/* 肌断面 */
#bs1709 #work-skin {
	position: relative;
	width: 401px;
	margin: 19px auto 30px;
	background: url(../img/skin.png) no-repeat 50% 50%;
	opacity: 0;
	transition: opacity 1s linear;
}
#bs1709 #work-skin::before,
#bs1709 #work-skin::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: no-repeat 50% 50%;
	opacity: 0;
	content: "";
}
#bs1709 #work-skin::before {
	background-image: url(../img/skin_arrow1.png);
	transition: opacity 1s linear 1.25s;
}
#bs1709 #work-skin::after {
	background-image: url(../img/skin_arrow2.png);
	transition: opacity 1s linear 2.5s;
}
#bs1709 #work-skin img {
	position: relative;
	z-index: 2;
	opacity: 0;
	transition: opacity 1s linear 4s;
}
#bs1709 #work-skin.show-work,
#bs1709 #work-skin.show-work::before,
#bs1709 #work-skin.show-work::after,
#bs1709 #work-skin.show-work img {
	opacity: 1;
}

/* エレメンツ情報*/
#bs1709 #a-product {
	margin-top: -3px;
	padding-top: 113px;
}
#bs1709 .pro-desc p {
	margin-bottom: 22px;
	font-size: 13px;
	line-height: 1.5;
}

/* その他の水分ケア */
#bs1709 #a-related {
	margin-top: 32px;
	padding-top: 113px;
}
#bs1709 #a-related h2 {
	margin: 0 0 39px;
	letter-spacing: 2.5px;
}
#bs1709 #a-related .pro-desc-block h3 {
	margin: 0 0 4px;
	padding: 0 0 2px 1px;
	border-bottom: 1px solid #323232;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: 1.8px;
}
#bs1709 #a-related li a {
	letter-spacing: 1.5px;
}

/* あなたの肌状態を知る */
#bs1709 #a-measure {
	margin-top: 32px;
	margin-bottom: 114px;
	padding-top: 113px;
}
#bs1709 #a-measure h2 {
	margin-bottom: 56px;
	letter-spacing: 1.5px;
}
#bs1709 #a-measure > div {
	min-height: 220px;
	padding-left: 472px;
	background: url(../img/measure.png) no-repeat 157px 4px;
}
#bs1709 #a-measure p {
	max-width: 438px;
	margin-bottom: 24px;
	padding-right: 30px;
	font-size: 14px;
	line-height: 1.6;
	text-align: justify;
	letter-spacing: 1px;
}
#bs1709 #a-measure p span.narrow {
	letter-spacing: 0;
}
#bs1709 #a-measure ul {
	display: flex;
	flex-wrap: wrap;
}
#bs1709 #a-measure li {
	margin: 0 10px 10px 0;
}
#bs1709 #a-measure li a {
	display: block;
	width: 200px;
	padding: 9px 0;
	border-radius: 5px;
	background-color: #ecebef;
	color: #595757;
	font-family: "Hiragino Kaku Gothic W6 JIS2004";
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	letter-spacing: 1px;
	opacity: 1;
	transition: opacity .2s linear;
}
#bs1709 #a-measure li a:hover {
	opacity: 0.5;
}

@media screen and (max-width: 768px) {
	#bs1709 {
		max-width: none;
		padding: 0 22px 40px;
	}
	#bs1709 picture {
		display: block;
	}
	#bs1709 picture img {
		width: 100%;
		height: auto;
	}
	#bs1709 h2 {
		margin-bottom: 25px;
		letter-spacing: 1px;
	}
	#bs1709 h3 {
		font-size: 18px;
		font-size: 4.8vw;
		line-height: 1.4;
	}
	#bs1709 p {
		font-size: 16px;
		font-size: 4.27vw;
		line-height: 1.5;
	}
	
	/* ページ内ナビ */
	#bs1709 ul.bs1709-nav {
		justify-content: flex-start;
		flex-wrap: wrap;
		width: auto;
		margin: 0 -5px;
	}
	#bs1709 ul.bs1709-nav li {
		width: 50%;
		height: 15.73vw;
		margin: 0 0 2.4vw;
		padding: 0 1.33vw;
		font-size: 15px;
		font-size: 4vw;
		line-height: 1.35;
		text-align: left;
	}
	#bs1709 ul.bs1709-nav li a {
		justify-content: flex-start;
		padding: 9px 0 8px 15px !important;
		border-radius: 8px;
		opacity: 1 !important;
		transition: none;
	}
	#bs1709 ul.bs1709-nav li a::after {
		top: 0 !important;
		left: auto;
		right: 9px;
		bottom: 0 !important;
		width: auto;
		height: 3.73vw;
		margin: auto 0;
		font-size: 3.73vw;
	}
	
	/* 商品説明（基本） */
	#bs1709 .pro-desc-block {
		max-width: none;
		margin: 0 0 58px;
		padding-left: 0;
	}
	#bs1709 .pro-desc-block:last-of-type {
		margin-bottom: 0;
	}
	#bs1709 .pro-desc-block h2 {
		margin: 0 0 7px;
	}
	#bs1709 .pro-desc-block span.pro-label {
		margin-bottom: 5px;
		padding: 2.5px 3px 2.5px 5.5px;
		text-indent: 0;
		letter-spacing: 1.6px;
	}
	#bs1709 .pro-desc-block p {
		margin-bottom: 20px;
		padding-left: 0;
		padding-right: 0;
		font-size: 12px;
		font-size: 3.75vw;
		text-align: justify;
		line-height: 1.45;
		letter-spacing: 1.2px;
	}
	#bs1709 .pro-desc-block p.sup {
		margin-top: 20px;
		margin-bottom: 10px;
		font-size: 10.5px;
		font-size: 2.8vw;
	}
	#bs1709 .pro-desc-block p.restriction-msg {
		margin-top: 20px;
		margin-bottom: 0;
	}
	#bs1709 .pro-desc-block .static-pdp-main ul.btn li {
		margin-left: 0;
	}
	#bs1709 .static-pdp-main ul.btn li {
		width: 100%;
		margin-top: 12px;
		font-size: 17px;
		font-size: 4.53vw;
		letter-spacing: 0.05em;
	}
	#bs1709 .static-pdp-main ul.btn li a {
		padding: 17px 0;
		font-size: inherit;
		opacity: 1 !important;
		transition: none;
	}
	#bs1709 .static-pdp-main ul.btn button.static-add-to-cart {
		padding: 17px 0;
	}
	#bs1709 .static-pdp-main ul.btn .msg-area,
	#bs1709 .static-pdp-main ul.btn .out-of-stock {
		padding: 17px 0 !important;
		font-size: inherit !important;
		line-height: 1.4;
	}
	
	/* メインビジュアル */
	#bs1709 #kv {
		width: auto;
		height: auto;
		margin: 0 -22px;
	}
	
	/* リード */
	#bs1709 #desc-block {
		margin: 51px -22px 51px;
	}
	#bs1709 #desc-block h1 {
		margin-bottom: 33px;
		padding-left: 2px;
		font-size: 17px;
		font-size: 4.53vw;
		letter-spacing: 1.6px;
	}
	#bs1709 #desc-block p {
		margin-bottom: 25px;
		padding-left: 4px;
		font-size: 14px;
		font-size: 3.73vw;
		line-height: 1.9;
		letter-spacing: 1.3px;
	}
	#bs1709 #desc-block h1 + p {
		margin-bottom: 26px;
		padding-left: 4px;
		font-size: 17px;
		font-size: 4.53vw;
		letter-spacing: 1.6px;
	}
	
	#bs1709 section {
		margin-top: 2.1739vw;
		padding-top: 19.3236vw;
	}
	#bs1709 section h2 {
		margin-left: -22px;
		margin-right: -22px;
	}
	#bs1709 section p {
		line-height: 1.6;
		font-size: 14px;
		font-size: 3.73vw;
	}
	
	/* 肌の表面、角層の重要性 */
	#bs1709 #a-importance {
		margin-top: 25px;
	}
	#bs1709 #a-importance h2 + p {
		font-size: 16px;
		font-size: 4.27vw;
		line-height: 1.5;
	}
	#bs1709 #a-importance picture {
		margin: 24px 0 26px;
	}
	
	/* 高密着バリアとは */
	#bs1709 #a-barrier picture {
		padding: 4px 0 26px;
	}
	
	/* 高密着バリアの3つの働き */
	#bs1709 #a-feature h3 {
		margin-bottom: 25px;
		font-size: 16px;
		font-size: 4.27vw;
		letter-spacing: 1px;
	}
	#bs1709 #a-feature h3 span {
		padding: 0;
		border-bottom: none;
	}
	#bs1709 #a-feature h3 > span > span {
		display: inline-block;
		padding: 0 4px 8px;
		border-bottom: 1px solid #323232;
	}
	/* 3つの働き */
	#bs1709 #work {
		display: block;
		width: auto;
		height: auto;
		margin: 25px -22px 40px;
		background-image: none;
	}
	#bs1709 #work::before,
	#bs1709 #work::after {
		content: none;
	}
	#bs1709 #work li {
		display: block;
		width: 202px;
		width: 53.87vw;
		height: 246px;
		height: 65.6vw;
		margin: 0 0 0 21px;
		margin: 0 0 0 5.6vw;
		padding: 16vw 0 0;
		background: url(../img/sp_work.png) no-repeat 50% 50% / contain;
		font-size: 14px;
		font-size: 3.73vw;
	}
	#bs1709 #work li:nth-child(2) {
		margin: -84px 0 0 152px;
		margin: -22.4vw 0 0 40.5vw;
	}
	#bs1709 #work li:nth-child(3) {
		margin-top: -84px;
		margin-top: -22.4vw;
	}
	#bs1709 #work li strong {
		padding-bottom: 6px;
		font-size: 129%;
	}
	/* 肌断面 */
	#bs1709 #work-skin {
		width: auto;
		margin: 22px -22px 0;
		background-image: url(../img/sp_skin.png);
		background-size: 100% auto;
	}
	#bs1709 #work-skin::before,
	#bs1709 #work-skin::after {
		background-size: 100% auto;
	}
	#bs1709 #work-skin::before {
		background-image: url(../img/sp_skin_arrow1.png);
	}
	#bs1709 #work-skin::after {
		background-image: url(../img/sp_skin_arrow2.png);
	}
	#bs1709 #work-skin img {
		width: 100%;
		height: auto;
	}
	
	/* エレメンツ情報*/
	#bs1709 #a-product {
		margin-top: -3.1400vw;
		padding-top: 19.3236vw;
	}	
	#bs1709 .pro-desc p {
		margin-bottom: 20px;
		font-size: 12px;
		font-size: 3.75vw;
		line-height: 1.4;
	}
	
	/* その他の水分ケア */
	#bs1709 #a-related {
		margin-top: 0.9661vw;
		padding-top: 19.3236vw;
	}
	#bs1709 #a-related h2 {
		margin: 0 -22px 34px;
		letter-spacing: 1px;
	}
	#bs1709 #a-related .pro-desc-block h3 {
		margin-bottom: 7px;
		padding: 0 0 1px;
		font-size: 17px;
		font-size: 4.53vw;
	}
	#bs1709 #a-related .pro-desc-block > div {
		margin-top: 26px;
	}
	#bs1709 #a-related .pro-desc-block p.sup {
		margin-top: -2px;
	}
	#bs1709 #a-related .pro-desc-block ul {
		padding-top: 19px;
	}
	#bs1709 #a-related li a {
		padding: 17px 0;
	}
	#bs1709 #a-related #pro-43250 p {
		letter-spacing: 1px;
	}
	
	/* あなたの肌状態を知る */
	#bs1709 #a-measure {
		margin-top: 0.9661vw;
		margin-bottom: 94px;
		padding-top: 19.3236vw;
	}
	#bs1709 #a-measure h2 {
		margin: 0 -22px 38px;
	}
	#bs1709 #a-measure > div {
		min-height: 0;
		padding: 0;
		background-image: none;
	}
	#bs1709 #a-measure p {
		max-width: none;
		margin-bottom: 23px;
		padding-right: 0;
		font-size: 14px;
		font-size: 3.73vw;
		line-height: 1.55;
		text-align: center;
		letter-spacing: 1.2px;
	}
	#bs1709 #a-measure p span.narrow {
		letter-spacing: inherit;
	}
	#bs1709 #a-measure div p:first-of-type:before {
		display: block;
		height: 43.2vw;
		margin: 0 auto 21px;
		background: url(../img/sp_measure.png) no-repeat 50% 0;
		background-size: auto 100%;
		content: "";
	}
	#bs1709 #a-measure ul {
		display: block;
		padding-top: 5px;
	}
	#bs1709 #a-measure li {
		margin: 0 0 13px;
	}
	#bs1709 #a-measure li a {
		width: 100%;
		padding: 17px 0;
		font-size: 17px;
		font-size: 4.53vw;
		opacity: 1 !important;
		transition: none;
	}
}