@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&display=swap');


/* モバイルサイズ以上（480～767px） */
@media screen and (min-width: 480px) {
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
}

:root {
	--container-width: 1200px;
	--border-color: #999999;
	--color-white: #ffffff;
	--color-black: #000000;
	--color-red: #c20037;
	--color-violet: #3a3682;
	--color-purple: #694ca0;
	--color-green: #70c5cb;
	--color-gray: #f8f8f8;
	--color-gold: #90834e;
	--color-cream: #fffced;
	--color-light-gray: #f6f5f7;
	--color-light-pink: #fcf7f7;
	--color-light-purple: #f9f8fc;
	--color-light-yellow: #fdfcf7;
	--color-deep-red: #9a272d;
}

/*=================================================== */
/* Common                                             */
/*=================================================== */
* {
	margin: 0;
	padding: 0;
}
html {
	overflow-y:scroll;
	height: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: "Zen Kaku Gothic New", Helvetica, Arial, "Hiragino Sans", YuGothic, "Yu Gothic medium", sans-serif;
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 100%;
	line-height: 1.6em;
	letter-spacing: 0.05em;
	color: #383838;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
	display: block;
}
section {
  overflow: hidden;
}


a {
	color: inherit;
	text-decoration: none;
	vertical-align: baseline;
}
a:hover {
	opacity: .7;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho", serif;
	font-weight:inherit;
	font-size:inherit;
	color: inherit;
}
h2 {
	font-size: 1.4em;
	font-weight: 500;
	line-height: 1.5em;
}
h3 {
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.5em;
}
h4 {
	font-size: 1.0em;
	font-weight: 500;
	line-height: 1.5em;
}


/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	body {
		font-size: 1.2em;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	body {

	}
}

table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
}
tr {
	display: table-row;
	vertical-align: inherit;
	border-color: inherit;
	line-height: 1.4em;
}
th, td {
	display: block;
	border: 1px solid var(--border-color);
	border-bottom: none;
}
tr:last-child {
	border-bottom: 1px solid var(--border-color);
}
th {
	background-color: var(--color-gray);
	font-weight: normal;
	text-align: center;
	padding: 4px;
}
td {
	padding: 8px;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	th, td {
		display: table-cell;
	}
	th {
		width: 20%;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
}

ul, ol, li {
}

ul, ol {
	list-style-position: inside;
	margin: 0;
}

/*=================================================== */
/* UL Asterisk                                        */
/*=================================================== */
ul.asterisk  {
	list-style-position: inside;
	margin: 0;
}
ul.asterisk li {
	padding-left: 1.3em;
	text-indent: -1.3em;
}
ul.asterisk {
	padding-top: 10px;
}
ul.asterisk li {
	list-style-type: none;
	text-indent: -1.3em;
}
ul.asterisk li:before {
	display: inline;
	content: "※ ";
}

/* -------------------------------------------------- */
/* None                                               */
/* -------------------------------------------------- */
.none {
	display:none;
}
.none-sp {display:inline-block !important;}
.none-pc {display:none !important;}
@media only screen and (max-width: 768px) {
	.none-sp {display:none !important;}
	.none-pc {display:inline-block !important;}
	br.none-pc {display:block !important;}
}

/* -------------------------------------------------- */
/* Page Top                                           */
/* -------------------------------------------------- */
#pagetop {
	position: fixed;
	margin-bottom: 0.8em;
	right: 1.2em;
	z-index:1002;
	opacity: .7;
}
#pagetop > a {
	display: inline-block;
}

/* -------------------------------------------------- */
/* Header                                             */
/* -------------------------------------------------- */
header .header_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white);
	border-bottom: solid 1px #ccc;
	height: 4em;
}
header img {
	width: 120px;
}


/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	header img {
		width: 160px;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	header img {
		width: 160px;
	}
}

/* -------------------------------------------------- */
/* Footer                                             */
/* -------------------------------------------------- */

footer {
	border-top: solid 1px #CCCCCC;
}
.footer-info {
	background-color: var(--color-gray);
}

.footer-container {
	max-width: var(--container-width);
	padding-block: 2.5em 1.5em;
}
.footer-content {
	display: block;
}
.footer-logo img {
	display: block;
	margin-inline: auto;
	width: 40.0vw;
}

.footer-pr {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 1.8em 0;
}

.footer-shop {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.8em;
	margin: 1.0em 1.5em;
	text-align: center;
	border: 1px solid var(--border-color);
	background-color: var(--color-white);
}
.footer-shop span {
	padding: 0 0.8em;
}
.footer-shop img {
	width: 6.0vw;
	height: auto;
}
.footer-sns {
	display: block;
	justify-content: flex-start;
	margin-inline: auto;
	padding-block: 0.5em;
}
.footer-sns li {
	padding-left: 0;
	text-indent: 0;
	list-style: none;
}
.footer-sns img {
	width: 5.0vw;
	height: auto;
}
.footer-sns-heading {
	margin-block: 0 0.4em;
	margin-inline: auto;
	font-size: 1.0rem;
}
.footer-sns-link {
	display: flex;
	align-items: center;
	column-gap: 0.5em;
	font-size: 1.4em;
}
.footer-menu {
	padding: 1.2em 0;
	background-color: var(--color-violet);
	color: #fff;
}
.footer-menu ul {
	text-align: center;
}
.footer-menu ul li {
	position: relative;
	display: inline-block;
	padding: 0 8.0px;
	border-right: 1px solid #fff;
	line-height: 1.1;
	text-indent: 0;
}
.footer-menu ul li:nth-child(3n) {
	border: 0;
}
.footer-menu ul li a {
	line-height: 1.1;
	text-decoration: none;
	font-size: 0.8rem;
	color: #fff;
}
.footer-menu .footer-copyright {
	display: block;
	font-size: 0.8rem;
	text-align: center;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.footer-container {
		margin-inline: 5.0em;
	}
	.footer-content {
		display: flex;
		align-items: flex-start;
		-moz-column-gap: 8.5em;
		column-gap: 8.5em;
	}
	.footer-logo img {
		width: 15.5vw;
	}
	.footer-pr {
		display: block;
		padding-block: 0;
	}
	.footer-shop {
		width: 100%;
		padding: 1.2em;
		margin: 0 0 1.0em;
		font-size: 1.4rem;
	}
	.footer-shop img {
		width: 3.0vw;
	}
	.footer-sns img {
		width: 2.5vw;
	}
	.footer-sns-heading {
		font-size: 1.2rem;
		margin-block: 0 0.4em;
	}
	.footer-menu ul li a {
		font-size: 1.0rem;
		column-gap: 0.5em;
	}
	.footer-menu .footer-copyright {
		font-size: 1.0rem;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.footer-container {
		padding-block: 3.0em;
		margin-inline: auto;
	}
	.footer-logo img {
		width: 12.5rem;
	}
	.footer-shop img {
		width: 1.5vw;
	}
	.footer-sns img {
		width: 1.2vw;
	}
	.footer-sns-heading {
		font-size: 1.2rem;
		margin-block: 0 0.2em;
	}
}

/*=================================================== */
/* Section                                            */
/*=================================================== */
.section-container {
	max-width: var(--container-width);
	padding-block: 1.6em;
	margin-inline: 1.0em;
}
.section-content {
}

.section-content figure img {
	width: 100%;
	height: auto;
}

/* モバイルサイズ以上（480～767px） */
@media screen and (min-width: 480px) {
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-container {
		margin-inline: 5.0em;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-container {
		padding-block: 3.0em;
		margin-inline: auto;
	}
}

/* --------------------------------------------- */
/* Section Heading                               */
/* --------------------------------------------- */
.section-heading {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho", serif;
	text-align: center;
	margin-block: 1.0em;
}
.section-heading h2 {
	font-weight: 700;
	font-size: 1.6em;
	letter-spacing: 0.15em;
	margin-bottom: 25px;
	line-height: 1.5em;
}
.section-heading-sub {
	letter-spacing: 0.15em;
	font-size: 1.2em;
}
.section-heading-sub-en {
	letter-spacing: 0.15em;
	font-size: 1.0em;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-heading h2 {

	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-heading h2 {
		font-size: 2.0em;
	}
	.section-heading-sub {
		font-size: 1.2em;
	}
	.section-heading-sub-en {
		font-size: 1.0em;
	}
}

/* -------------------------------------------------- */
/* Accordion                                          */
/* -------------------------------------------------- */
.accordions {
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	margin-block: 1.0em;
	width: 100%;
}
.accordion {
}
.accordion-heading {
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 2;
	background-color: var(--color-white);
	cursor: pointer;
}
.accordion-heading p {
	margin: auto;
}
.accordion-icon {
	position: relative;
	width: 1.0rem;
	height: 1.0rem;
}
.accordion-icon::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: var(--border-color);
	transition: .2s;
}
.accordion-icon.active::before {
	transform: translateX(-10px);
	opacity: 0;
}
.accordion-icon::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: var(--border-color);
	transform: rotate(90deg);
	transition: .2s;
}
.accordion-icon.active::after {
	transform: rotate(0deg);
}

.accordion-content {
	height: 0;
	overflow: hidden;
	transition: all 0.5s;
}
.accordion-content-inner {
	padding: 1.5em 0.8em;
}

/* モバイルサイズ以上（480～767px） */
@media screen and (min-width: 480px) {
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.accordion-heading {
		padding: 15px 25px;
	}
	.accordion-heading p {
		font-size: 1.4rem;
	}
}
/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.accordion-heading {
		padding: 20px 25px;
	}
	.accordion-heading p {

	}
}

/* -------------------------------------------------- */
/* Background Color                                   */
/* https://www.htmlcsscolor.com/                      */
/* -------------------------------------------------- */

/* White */
.bgcolor-white {
	background-color: #FFFFFF !important;
}

/* Red */
.bgcolor-kinaka {
	background-color: #E8380D !important;
}
.bgcolor-fuchsia_pink {
	background-color: #E95B6B !important;
}
.bgcolor-physostegia {
	background-color: #FFEFFE !important;
}

.bgcolor-beige {
	background-color: #F9EFDC !important;
}

.bgcolor-light-beige {
	background-color: #fcf3d2 !important;
}

/* Blue */
.bgcolor-light_blue {
	background-color: #EEF3FA !important;
}
.bgcolor-aqua_blue {
	background-color: #ebfeff !important;
}


/* Yellow */
.bgcolor-lemon_yellow {
	background-color: #FFF450 !important;
}
.bgcolor-witch_haze {
	background-color: #FFF673 !important;
}
.bgcolor-cumulus {
	background-color: #FFFAB7 !important;
}

/* Green */
.bgcolor-light_sea_green {
	background-color: #20B2AA !important;
}
.bgcolor-pelorous {
	background-color: #189FA7 !important;
}
.bgcolor-peacock_green {
	background-color: #00A496 !important;
}


/* -------------------------------------------------- */
/* Font                                               */
/* -------------------------------------------------- */
.important {
	color: #ff0000;
}

.underline {
	display: inline;
	text-decoration: none;
	border-bottom: 1px solid #000;
	padding-bottom: 1.4px;
}

/* -------------------------------------------------- */
/* 購入ボタン                                         */
/* -------------------------------------------------- */
.btn-buy {
	margin-block: 1.5em 0;
}
.btn-buy a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	box-sizing: border-box;
	background-color: var(--color-deep-red);
	line-height: 1;
	letter-spacing: .2em;
	text-align: center;
	font-size: 125%;
	font-weight: 700;
	color: var(--color-white);
}
.btn-buy img {
	width: 1.2em;
	margin-right: 0.8em;
}

/* -------------------------------------------------- */
/* 共通                                               */
/* -------------------------------------------------- */
.section-content-text {
	padding: 1.0em 1.5em 0;
}
.section-content-text span {
	font-weight: 500;
	background: linear-gradient(transparent 45%,#fff2bd 45%);
}
.section-content-text h3 {
	font-size: 1.2em;
	font-weight: 600;
	padding-block: 1.0em;
}
.section-caution {
	border: 1px solid var(--border-color);
	padding: 15px;
	margin: 1.5em 1.5em 0;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-content-text {
		padding: 2.0em 1.0em 0;
		width: 80%;
		margin: 0 auto;
	}
	.section-caution {
		margin-block: 3.0em 0;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-content-text {
		padding: 3.0em 1.0em 0;
	}
}

/* --------------------------------------------- */
/* kv                                            */
/* --------------------------------------------- */

.top .kv {
	width: 100%;
	background-image: url(../../images/kv/kv-top-sp.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.silkrio6g .kv {
	width: 100%;
	background-image: url(../../images/kv/kv-6g-sp.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.silkrio35g .kv {
	width: 100%;
	background-image: url(../../images/kv/kv-35g-sp.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.section-kv {
	display: flex;
	width: 100%;
	height: 560px;
	margin: 0 auto;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.top .kv {
		background-image: url(../../images/kv/kv-top-pc.jpg);
	}
	.silkrio6g .kv {
		background-image: url(../../images/kv/kv-6g-pc.jpg);
	}
	.silkrio35g .kv {
		background-image: url(../../images/kv/kv-35g-pc.jpg);
	}
	.section-kv {
		height: 380px;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.kv {
	}
	.section-kv {
		height: 620px;
	}
}

/* --------------------------------------------- */
/* introduction                                  */
/* --------------------------------------------- */
.introduction {
	padding-block: 2.0em;
}
.section-introduction {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}

.section-introduction-text {
/*	background-color: var(--color-light-purple);*/
	background-color: rgba(249, 248, 252, 0.45	);
	border: solid 1.2px var(--color-purple);
	text-align: center;
	padding: 1.2em;
}

.section-introduction p {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho", serif;
	font-size: 1.1em;
	line-height: 1.6em;
	padding-block: 0.5em;
}
.section-introduction p span {
	font-weight: 500;
	color: var(--color-deep-red);
	border-bottom: 1px solid var(--color-deep-red);
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-introduction-text {
		width: 60%;
	}
	.section-introduction p {
		font-size: 1.2em;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	
}


/* --------------------------------------------- */
/* 肌トラブルの悩み                              */
/* --------------------------------------------- */
.problems {
	padding-block: 1.0em 0;
	border-top: 2px solid #ede9e6;
}
.problems .section-heading {
	padding-block: 2.0em 1.0em;
}
.section-problems {
	background-color: #f9f3f3 !important;
}
.section-problems::after {
	display: block;
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	height: 2.5em;
	clip-path: polygon(0 0,50% 100%, 100% 0);
	background-color: #f9f3f3;
}
.section-problem {
	text-align: center;
}
.section-problem-title {
	display: inline-block;
	font-size: 1.3em;
	font-weight: 500;
	padding-block: 0 0.5em;
	margin-block: 1.0em;
	border-bottom: solid 1px #000;
}
.section-problem ul li {
	list-style: none;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {

	.problems .section-heading {
		padding-block: 3.0em 2.5em;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	
}

.section-skintypes {
	padding-block: 1.0em 0;
}
.section-skintype {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 10px;
}
.section-skintype p {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	background-color: var(--color-white);
	border: 1.2px solid var(--color-deep-red);
	border-radius: 5px;
    
	padding: 5px;
	width: 5.8em;
	height: 3.0em;
	text-align: center;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--color-deep-red);
	letter-spacing: 2.0px;
	line-height: 1.2em;
}

.section-solutions {
	background-image: url(../../common/images/bg_silk.jpg);
	background-position: right;
	background-size: cover;
	background-repeat: no-repeat;
}
.section-solutions .section-heading {
	padding-block: 0em;
	margin-block: 2.5em 0;
}
.section-solutions .section-heading h2 {
	padding-block: 1.0em;
	margin: 0;
}
.section-solutions .section-heading h2 span {
	color: var(--color-deep-red);
}
.section-solution {
	margin-block: 0 2.5em;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-skintype {
		gap: 15px;
		margin-bottom: 15px;
	}
	.section-skintype p {
		font-size: 0.85em;
		letter-spacing: 1.2px;
		width: 120px;
		height: 60px;
	}
	.section-solutions .section-heading {
		margin-block: 3.5em 0;
	}
	.section-solution {
		padding-block: 0 3.5em;
		margin: 0 auto;
		width: 80%;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-skintype p {
		width: 150px;
		height: 60px;
	}
	.section-solution {
		width: 70%;
	}
}

/* --------------------------------------------- */
/* 特徴                                          */
/* --------------------------------------------- */
.features {
	padding-block: 4.0em 3.0em;
	border-top: 2px solid #ede9e6;
}
.section-features {
	display: grid;
	column-gap: 0;
	grid-template-columns: 42% auto 42%;
	position: relative;
	padding-block: 0 1.0em;
	margin: auto;
}
.section-feature {
	background-color: var(--color-light-yellow);
	border: 1.5px solid var(--color-gold);
	border-radius: 10rem;
	position: relative;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	
	width: 9.0rem;
	height: 9.0rem;
	margin: auto;
	text-align: center;
}
.section-feature-plus {
	position: relative;
	margin: auto;
}
.section-feature-plus::before {
	width: 0.3rem;
	height: 2.0rem;
	transform: translate(50%, -50%);
}
.section-feature-plus::after {
	width: 2.0rem;
	height: 0.3rem;
	transform: translate(50%, -50%);
}
.section-feature-plus::before,
.section-feature-plus::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	background-color: var(--color-gold);
}
.section-features-heading {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho", serif;
	font-size: 1.2em;
	text-align: center;
	line-height: 1.8em;
	padding-block: 0 1.6em;
}
.section-features-heading span {
	font-weight: 700;
	font-size: 1.2em;
	letter-spacing: 1.4px;
	color: var(--color-deep-red);
	border-bottom: solid 1.5px var(--color-deep-red);
}
.section-feature-h1 {
	font-weight: 500;
	font-size: 1.1em;
	color: var(--color-gold);
}
.section-feature-h2 {
	display: inline-block;
	font-weight: 700;
	font-size: 1.2em;
	color: var(--color-gold);
	border-bottom: solid 1.5px var(--color-gold);
}


.section-age {
	padding-block: 0 1.5em;
}
/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {

	.section-features {
		-webkit-column-gap: 0;
		-moz-column-gap: 0;
		column-gap: 0;
		padding-block: 1.5em;
	    width: 80%;
	}
	.section-feature {
		width: 12.5rem;
		height: 12.5rem;
	}
	.section-feature:not(:last-child)::before {
		width: 0.4rem;
		height: 3.5rem;
		transform: translate(50%, -50%);
	}
	.section-feature:not(:last-child)::after {
		width: 3.5rem;
		height: 0.4rem;
		transform: translate(50%, -50%);
	}
	.section-feature:not(:last-child)::before,
	.section-feature:not(:last-child)::after {
		right: -2.8rem;
	}
	.section-age {
		padding-block: 0 2.0em;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-features {
		padding-block: 1.5em;
	    width: 50%;
	}
	.section-feature {
		width: 13.5rem;
		height: 13.5rem;
	}
	.features .section-content-text {
		padding: 1.5em 1.0em;
	}
	.section-feature:not(:last-child)::before,
	.section-feature:not(:last-child)::after {
		right: -2.7rem;
	}
	.section-features-heading {
		font-size: 1.4em;
	}
	.section-features-heading span {
		font-size: 1.4em;
	}
}

/* --------------------------------------------- */
/* ２つの天然由来成分                            */
/* --------------------------------------------- */
.section-specials {
	padding-block: 2.0em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}
.section-special {
	width: 100%;
	position: relative;
	margin: 50px 0 0;
	background: var(--color-light-yellow);
	border: 1.2px solid var(--color-gold);
}
.section-special-image figure {
	position: relative;
	top: 0;
	left: 0;
	width: 80%;
	margin: -40px auto 0;
}
.section-special-text h2 {
	padding: 0 0 15px;
}
.section-special-text {
	position: relative;
	padding: 20px 25px 30px;
}
.section-special h2 span {
	font-weight: 700;
	font-size: 1.2em;
	color: var(--color-deep-red);
}

.section-specials .accordion-heading {
	background-color: var(--color-white);
	border: solid 1px var(--border-color);
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {

	.section-special {
		width: 44%;
	}
	.section-special-image figure {
		position: relative;
		top: 0;
		left: 0;
		width: 80%;
		margin: -40px auto 0;
	}
	.section-special-text {
		position: relative;
		padding: 20px 25px 30px;
	}
	.section-special-text h2 {
		font-size: 1.0em;
	}
	.section-special-text .accordion-heading {
		padding: 15px 10px 15px 15px;
	}
	.section-special-text .accordion-heading p {
		font-size: 0.9em;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-specials {
		gap: 60px;
	}
	
	.section-special {

	}
	..section-special-text h2 {
		font-size: 1.2em;
	}
	.section-special-text .accordion-heading {
		padding: 15px 25px;
	}
	.section-special-text .accordion-heading p {
		font-size: 1.2em;
	}
}

/* --------------------------------------------- */
/* 全成分                                        */
/* --------------------------------------------- */
.ingredients {
	padding-block: 3.0em;
	border-top: 2px solid #ede9e6;

/*	background-attachment: fixed;*/
	background-image: url(../../common/images/bg_ingredients_sp.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/*
.ingredients::before {
	content: "";
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background-image: url(../../common/images/bg_ingredients.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
*/

.section-ingredients {
	background-color: rgba(255, 255, 255, 0.65);
	text-align: center;
	padding: 1.2em 1.2em 2.2em;
}
.section-ingredients .section-heading-sub span {
	font-weight: 500;
    background: linear-gradient(transparent 45%,#fff2bd 45%);
}
.ingredients ul li {
	font-size: 0.9em;
	text-align: left;
}
.ingredients .accordion-heading {
	background-color: rgba(255, 255, 255, 0.65);
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-ingredients {
		padding: 2.0em 2.0em 3.4em;
	}
	.ingredients {
		background-image: url(../../common/images/bg_ingredients.jpg);
		background-size: cover;
	}
}


/* --------------------------------------------- */
/* 安全性                                        */
/* --------------------------------------------- */
.safety {
	padding-block: 3.0em;
	border-top: 2px solid #ede9e6;
}
.safety .section-heading h2 {
	color: var(--color-deep-red);
}
.section-safety {
	padding-block: 0 1.4em;
}
.section-safety ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	height: auto;
	padding-block: 2.0em;
}	
.section-safety ul li {
	background: url(../../common/images/icon-free.png) top left no-repeat;
	background-size: contain;
	font-weight: 500;
	text-align: center;
	list-style: none;
}
.section-safety ul li p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	line-height: 1.2em;
	
	text-weight: 600;
	text-shadow:
	3px 3px 2px #fff,
	-3px 3px 2px #fff,
	-3px -3px 0 #fff,
	3px -3px 0 #fff;
}
.section-safety-caution {
	border: 1px solid var(--color-deep-red);
	padding: 5px 15px 25px;
}
.section-safety-caution h3 {
	text-align: center;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-safety {
		padding-block: 0 2.0em;
	}
	.section-safety ul {
		gap: 1.0em;
	}
	.section-safety ul li p {
		font-size: 0.85em;
		letter-spacing: 1.2px;
		width: 125px;
		height: 125px;
	}
	.section-safety-caution {
		padding: 1.0em 2.0em 2.0em;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {

	.section-safety ul li p {
		font-size: 1.0em;
		width: 140px;
		height: 140px;
	}
}

/* --------------------------------------------- */
/* 効果                                          */
/* --------------------------------------------- */
.effects {
	padding-block: 4.0em 2.0em;
	border-top: 2px solid #ede9e6;
	background-color: var(--color-light-purple);
}
.section-effects {
	background: #fff;
	box-shadow: rgba(105, 76, 160, 0.25) 0px 0px 16px;
	border-radius: 10px;
	padding: 25px;
	margin-block: 1.2em;
}
.section-effects-hedding {
	margin-top: 1.2em;
}

.section-effect {
	display: block;
	padding-block: 1.2em;
}

.section-effects-text h3 {
	font-size: 1.2em;
	font-weight: 600;
	text-align: center;
	padding-block: 1.0em;
	margin-block: 0.5em;
}
.section-effects-text h4 {
	font-size: 1.1em;
	font-weight: 600;
	padding-block: 0 0.4em;
}
.section-effects-text {
	margin-bottom: 1.2em;

}
.section-effects-image {
}
.section-effect-arrow {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #cccccc transparent transparent transparent;
	border-width: 25px 35px 0 35px;
	margin: 25px auto 15px;
}
.section-effects-skinflora {
	padding: 0 1.2em 1.2em;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {

	.section-effects {
		padding: 3.0em;
	}
	.section-effect {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.section-effects-text {
		width: 60%;
	}
	.section-effects-image {
		width: 36%;
	}
	.section-effect-arrow {
		border-width: 30px 40px 0 40px;
		margin: 25px auto 15px;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-effects {
		padding: 3.5em;
	}
	.section-effect-arrow {
		border-width: 40px 50px 0 50px;
		margin: 25px auto 15px;
	}
}

/* --------------------------------------------- */
/* 使用量                                        */
/* --------------------------------------------- */
.guide {
	padding-block: 4.0em 2.0em;
	border-top: 2px solid #ede9e6;
}
.section-heading {

}
.guide .section-heading-sub {
	padding-inline: 10px;
}
.section-guide {
/*	background-color: var(--color-light-gray);*/
	padding: 25px 0;
/*	margin-block: 0 1.5em;*/
}
.section-guide th, .section-guide td {
	display: table-cell;
}

.section-guide-detail {
	display: flex;
	align-items: center;
	justify-content: center;
}
.section-guide-detail h2 {
	padding-block: 0 20px;
}
.section-guide-detail h5 {
	font-size: 1.1em;
	padding-block: 10px;
}

.section-guide-use {
/*	background-color: var(--color-light-gray);*/
	padding: 25px 0;
/*	margin-block: 0 1.5em;*/
}

.section-guide-use-image {
	
}
.section-guide-use-detail {
	display: flex;
	align-items: center;
	justify-content: center;
}
.section-guide-use-detail h2 {
	padding-block: 20px 10px;
}

.section-guide-use-text {
	padding-block: 0.5em 0;
	padding-inline: 5px;
}

.section-guide-amount .accordion-heading {
	background-color: var(--color-light-yellow);
	border: solid 1px var(--border-color);
}
.section-guide-amount th, .section-guide-amount td {
	display: table-cell;
}
.section-guide-amount th {
	background-color: var(--color-light-yellow);
	text-align: center;
}
.section-guide-amount-header th {
	background-color: var(--color-green);
	color: var(--color-white);
	font-weight: 700;
}
.section-guide-amount ul {
	padding: 5px;
	margin-block: 1.0em;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {

	.section-guide {
		display: flex;
		flex-wrap: wrap;
/*		justify-content: center;*/
		gap: 1.2em;
	}
	.section-guide-image {
		width: 42%;
	}
	.section-guide-detail {
		position: relative;
		margin-top: 0;
		width: 52%;
	}
	.section-guide-detail table th {
		width: 35% !important;
	}
	
	.section-guide-use {
		display: flex;
		flex-wrap: wrap;
/*		justify-content: center;*/
		gap: 2.0em;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	
	.section-guide {
		gap: 2.0em;
	}
	.section-guide-image {
		width: 45%;
	}
	.section-guide-detail {
		width: 50%;
	}
	.section-guide-use-image {
		width: 45%;
	}
	.section-guide-use-detail {
/*		align-items: center;*/
		position: relative;
		margin-top: 0;
		width: 50%;
	}
}


/* --------------------------------------------- */
/* 使い方                                        */
/* --------------------------------------------- */
.howto {
	padding-block: 4.0em 2.0em;
}
.section-howto {
	padding-block: 0.5em 1.5em;
}

.section-howto-steps {
	display: block;
	width: 100%;
	padding-block: 1.0em;
}

.section-howto-step {
	position: relative;
	background-color: var(--color-white);
	display: flex;
	justify-content: space-around;
	gap: 1.0em;
	padding: 15px;
	margin-block: 10px 20px;
}
.section-howto-step-icon {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho", serif;
	position: absolute;
	background-color: var(--color-green);
	color: #fff;
	border-radius: 100px 100px 100px 100px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.8em;
	line-height: 16px;
	top: -10px;
	left: -5px;
	width: 60px;
	height: 60px;
}
.section-howto-step-icon span {
	font-size: 1.6em;
}
.section-howto-step figure {
	width: 48.0%;
	height: auto;
}
.section-howto-step img {
	border-radius: 1.6rem 0 1.6rem 0;
	overflow: hidden;
}
.section-howto-step-detail {
	width: 48.0%;
}
.section-howto-step-heading {
	padding-block: 10px 0;
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
}
.section-howto-step-text {
	font-size: 0.92em;
	padding: 10px 0;
}
.section-howto-point {
	position: relative;
	background-color: var(--color-white);
	padding: 25px 15px;
	margin-block: 1.5em 0;
}
.section-howto-point-icon {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho", serif;
	position: absolute;
	background-color: var(--color-green);
	color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.0em;
	top: -24px;
	left: -5px;
	width: 120px;
	height: 32px;
}


/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {

	.section-howto-steps {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap: 2.5em;
		padding-block: 2.5em;
	}
	.section-howto-step {
		display: block;
		margin: 0;
		width: 42.5%;
		word-wrap: break-word;
	}
	.section-howto-step-icon {
		font-size: 0.8em;
		line-height: 22px;
		width: 80px;
		height: 80px;
	}
	.section-howto-step-icon span {
		font-size: 1.4em;
	}
	.section-howto-step-icon p {
		font-size: 1.2em;
	}
	.section-howto-step figure {
		width: 100%;
	}
	.section-howto-step img {
		border-radius: 2.5rem 0 2.5rem 0;
	}
	.section-howto-step-detail {
		display:block;
		width: 100%;
		line-height: 1.4em;
	}
	.section-howto-step-heading {
		padding-block: 10px 0;
		font-size: 1.2em;
	}
	.section-howto-step-text {
		padding: 10px 0;
		font-size: 0.9em;
	}

}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-howto-steps {
		gap: 1.0em;
	}
	.section-howto-step {
		width: 20%;
	}
	.section-howto-step-icon {
		font-size: 0.7em;
		width: 80px;
		height: 80px;
	}
	.section-howto-step-icon span {
		font-size: 1.4em;
	}
	.section-howto-step-detail {

	}
	.section-howto-step-heading {
		padding-block: 10px 5px;
		font-size: 0.9em;
	}
	.section-howto-step-text {
		padding-block: 5px 0;
		font-size: 0.9em;
	}
}


/* --------------------------------------------- */
/* 商品について                                  */
/* --------------------------------------------- */
.products {
	padding-block: 4.0em 0;
}
.section-product {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: var(--color-light-gray);
	padding: 25px 15px;
	margin-block: 0 1.5em;
}
.section-product-heading {
	margin-bottom: 1.4em;
	border-bottom: 1px solid var(--border-color);
}
.section-product h2 {
	color: var(--color-black);
	text-align: center;
	padding-block: 30px 10px;
	font-size: 1.6em;
	line-height: 1.0;
	letter-spacing: 0.2em;
}
.section-product h3 {
	text-align: center;
	padding-block: 30px 0;
}
.section-product-heading-sub {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	margin-block: 0.4em 1.0em;
	text-align: center;
}
.section-product-image {

}

.products .accordion-heading,
.lineup .accordion-heading {
	border: solid 1px var(--border-color);
}

.section-product-detail {
	display: flex;
	align-items: center;
	justify-content: center;
}
.section-product-price {
	font-size: 1.3em;
	padding-block: 8px;
}
.section-product-price span {
	font-size: 0.7em;
}

.lineup {
	padding-block: 0 4.0em;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {

	.section-product {
		padding: 25px;
		justify-content: space-between;
	}
	.section-product h2 {
		padding-block: 15px;
		font-size: 1.6em;
	}
	.section-product h3 {
		padding-block: 10px;
	}
	.section-product-heading-sub {
		font-size: 0.7em;
	}
	.section-product-image {
		width: 40%;
	}
	.section-product-detail {
		width: 55%;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-product {
		padding: 50px;
	}
	.section-product h2 {
		padding-block: 30px;
		font-size: 2.0em;
	}
	.section-product-heading-sub {
		font-size: 0.9em;
	}
}

/* --------------------------------------------- */
/* 製品仕様                                      */
/* --------------------------------------------- */
.section-spec {
	display: block;
	padding-block: 1.0em;
}
.section-spec-image {
	width: 100%;
	padding-block: 0.3em 0.7em;
}

.section-spec-image img {
	border-radius: 1.5rem 0 1.5rem 0;
}
.section-spec-detail {
	width: 100%;
	line-height: 1.4em;
}
.section-spec-detail h3 {
	padding-block: 1.5em 1.0em;
}

.section-spec-detail p {
	padding-block: 0.3em 0.7em;
}
.section-spec table {
	font-size: 92%;
}

/* --------------------------------------------- */
/* 使用上の注意                                  */
/* --------------------------------------------- */
.list-caution {
	padding: 5px 0;
	line-height: 1.4em;
	font-size: 0.92em;
}
.list-caution li {
	padding-block: 0.3em;
	padding-left: 1.3em;
	text-indent: -1.3em;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-spec {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.section-spec-detail h3 {
		padding-block: 0.3em 0.7em;
	}
	.section-spec-image {
		width: 37%;
	}
	.section-spec-detail {
		width: 55%;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
}


/* --------------------------------------------- */
/* お客様の声                                    */
/* --------------------------------------------- */
.voices {
	background-color: var(--color-light-pink);
	padding-block: 4.0em;
}
.section-voices {
	display: block;
}
.section-voice {
	background-color: var(--color-white);
	box-shadow: 2px 2px 15px #e6dddd;
	gap: 10px;
	padding: 20px;
	margin-block: 0 25px;
}
.section-voice-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-block: 0 10px;
}
.section-voice-image {
	width: 40%;
}
.section-voice-heading {
	width: 55%;
}
.section-voice-heading h3 {
	padding: 0;
	margin-block: 10px 25px;
}
.section-voice-detail {
	font-size: 0.9em;
}
.section-voice-tag {
	background-color: var(--color-red);
	color: var(--color-white);
	font-weight: 700;
	text-align: center;
	padding-block: 6px;
	margin-block: 0 10px;
}

/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-voices {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 35px;
	}
	.section-voice {
		padding: 20px;
		line-height: 150%;
		position: relative;
		margin-block: 0;
	}
	.section-voice-header {
		gap: 14px;
	}
	.section-voice-tag {
		padding-block: 10px;
		margin-block: 0 10px;
	}
}

/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.section-voices {
		gap: 50px;
	}
	.section-voice-header {
		gap: 20px;
	}
	.section-voice-tag {
		margin-block: 0 20px;
	}
}

/* --------------------------------------------- */
/* よくある質問                                  */
/* --------------------------------------------- */
.faq {
	padding-block: 4.0em;
}
.section-faq .accordion-heading {
	background-color: var(--color-light-yellow);
	border: solid 1px var(--border-color);
}
.section-faq .accordion-heading p {
	text-align: left;
}
.section-faq-q {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: center;
}
.section-faq-q-icon {
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho", serif;
	color: #D38989;
	font-weight: 700;
	font-size: 1.2em !important;
}
/* タブレットサイズ以上（768～1279px） */
@media screen and (min-width: 768px) {
	.section-faq-q-icon {
		font-size: 2.5em;
	}
	.section-faq .accordion-heading p {
		margin-left: 10px;
	}
	.section-faq-q-icon {
		font-size: 1.4em !important;
	}
}
/* PCサイズ以上（1280以上） */
@media screen and (min-width: 1280px) {
	.faq {
		padding-block: 6.5em 5.0em;
	}
}