@charset "UTF-8";
/* PC用設定 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
:root {
  --font-mincho: "Yu Mincho", "Hiragino Mincho ProN", "serif";
  --font-gothic: "hiragino-kaku-gothic-pron", sans-serif;
  --main-color: 0, 0, 0;
  --brand-color: 103, 63, 51;
}
.basic {
  --background-color: 174, 171, 160;
  --point-color: 128, 112, 101;
  --gradation-color: 223, 201, 136;
  --step-bg: 247, 245, 239;
}
.sensitive {
  --background-color: 192, 169, 169;
  --point-color: 191, 142, 164;
  --gradation-color: 205, 148, 187;
  --step-bg: 242, 238, 238;
}
.acnia {
  --background-color: 168, 183, 142;
  --point-color: 109, 140, 101;
  --gradation-color: 165, 202, 119;
  --step-bg: 243, 245, 231;
}
.bright {
  --background-color: 159, 177, 183;
  --point-color: 81, 138, 163;
  --gradation-color: 158, 209, 242;
  --step-bg: 236, 245, 243;
}
.base {
  --background-color: 198, 197, 189;
  --point-color: 128, 112, 101;
}
.trial {--background-color: 255, 255, 255;}


* {
  box-sizing: border-box;
  font-feature-settings: "palt";
  padding: 0;
}
html {font-size: min(1.5vw, 22px);}

body {background-color: white;}

main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  font-family: var(--font-gothic);
  color: rgba(var(--main-color), 1);
  text-align: center;
  padding-bottom: 10em;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  font-size: 0.7em;
}

.annotation {
  font-family: var(--font-gothic);
}
.pc_hidden {display: none;}

.annotation span:not(:last-of-type) {
  margin-right: 1em;
}


/* ↓ top ↓ ------------------------------------------------------------------ */
#top .content {
  position: relative;
}
#top .content .logo {
  position: absolute;
  width: 20%;
  top: 3em;
  left: 50%;
  transform: translateX(-50%);
}

/* ↓ movie ↓ ------------------------------------------------------------------ */
#movie {
  padding: 4.6em 0;
}
.movie-box {
  width: 57%;
  margin: 0 auto;
}
video {width: 100%;}

/* ↓ organic ↓ ------------------------------------------------------------------ */
#organic .content {
  display: grid;
  grid-template-columns: 43% 57%;
  grid-template-rows: 36% 64%;
  color: white;
  text-align: left;
}
#organic .content picture {
  grid-area: 1/1/3/3;
  z-index: -1;
}
#organic .content .st1 {
  grid-area: 1/1/2/2;
  z-index: 1;
  font-size: 1.8em;
  margin-top: 3em;
  margin-left: 16%;
}
#organic .content .st2 {
  grid-area: 2/1/3/2;
  font-size: 0.8em;
  line-height: 1.8em;
  letter-spacing: 0.1em;
  margin-left: 16%;
}
#organic .content .st2 p:not(:first-child) {
  margin-top: 1.5em;
}



/* ↓ feature ↓ ------------------------------------------------------------------ */
#feature {
  padding: 4em 0;
  --background-color: rgba(241, 236, 221, 0.5);
}
#feature h2 {
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 2em;
}

#feature1 {margin-top: 4em;}

#feature .title {
  background :rgba(236, 242, 240, 1);
  padding: 2.5em 8% 3.5em;
  display: grid;
  grid-template-columns: 50% 42.5%;
  justify-content: space-between;
  text-align: left;
}
#feature .title .left .st1 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 2.1em;
}
#feature .title .left .st1::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgba(var(--main-color), 1);
}
#feature .title .left .st2 {
  font-size: 1.4em;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-top: 0.5em;
}
#feature .title .left .st3 {
  font-size: 0.75em;
  margin-top: 2.2em;
  letter-spacing: 0.04em;
  line-height: 1.8em;
}
#feature .title .right .img-box {margin-top: 1em;}

#feature .content {padding: 3em 0;}
#feature h3 > .br:first-of-type {
  width: 15em;
  font-size: 1em;
  font-weight: 600;
  border-bottom: solid 1px rgba(var(--main-color), 1);
  margin: 0 auto;
  padding-bottom: 0.5em;
  letter-spacing: 0.1em;
}
#feature h3 .br:last-of-type {
  font-family: var(--font-mincho);
  font-size: 0.85em;
  margin-top: 0.7em;
}

#organic-component {padding: 3em 0;}
#organic-component .content {
  display: grid;
  justify-content: center;
  padding: 3em 15%;
  grid-template-columns: repeat(8, 1fr);
  gap: 3em 0em;
  margin: 0 auto;
}
#organic-component .box {
  grid-column: 2 span;
  font-size: 0.8em;
}
#organic-component .box5 {grid-column: 2/4;}
#organic-component .box .img-box {
  width: 60%;
  margin: 0 auto;
}
#organic-component .box .img-box img {border-radius: 50%;}
#organic-component .box p:first-of-type {margin-top: 1em;}


#next-gen-component .content {
  padding: 3em 15%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em 8em;
  font-size: 0.8em;
  letter-spacing: 0.04em;
}
#next-gen-component .content .box1,
#next-gen-component .content .box2 {
  background-color: var(--background-color);
  padding: 1.5em;
  position: relative;
}
#next-gen-component .content .box .img-box {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  width: calc(100% - 3em);
  margin: 1.5em auto 0;
}
#next-gen-component .content .box1 .img-box ,
#next-gen-component .content .box2 .img-box {
  width: 100%;
  margin-top: 0;
}
#next-gen-component .content .box2 .organic-icon {
  position: absolute;
  width: 4.5em;
  top: 0.5em;
  left: 0.5em;
}
#next-gen-component .box p:first-of-type {margin-top: 1em;}
.all-in {
  background-color: rgba(33, 78, 41, 1);
  color: white;
  line-height: 2.2em;
  margin-top: 0.7em;
}
#next-gen-component .annotation {
  text-align: right;
  margin: 2.5em 0;
  padding-right: 8%;
}

#feature .pick-up {
  background-color: var(--background-color);
  letter-spacing: 0.04em;
  padding: 1.5em 8%;
}
#feature #mastic_resin {
  padding-top: 3em;
}
.pick-up > p:first-of-type {
  border-bottom: solid 1px rgba(var(--main-color));
  width: fit-content;
  margin: 0 auto;
  padding-bottom: 0.4em;
}
.pick-up .img-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 3em;
  padding: 2em 0 0.5em;
}
.pick-up .all-in {
  padding: 0.5em 1.5em;
  font-size: 0.8em;
}
.pick-up .st1 {
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-left: 1em;
}
.pick-up .st2 {
  font-size: 0.8em;
  margin-top: 1.2em;
  line-height: 1.7em;
}
.pick-up .annotation {
  text-align: right;
  margin: 2.5em 0;
}


#lamella {
  padding: 3em 8% 0;
}
#lamella .img-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 3em;
}
#lamella .content .st1 {
  border: solid 1px rgba(var(--main-color), 1);
  width: fit-content;
  margin: 3em auto;
  padding: 0.5em 3em;
  letter-spacing: 0.05em;
  line-height: 1.7em;
}
#lamella .skin-type {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 1em;
}

#lamella .skin-type .box {
  background : linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0.1%,
    rgba(var(--gradation-color), 0.15) 99.85%
  );
  padding: 1.3em 8% 2.5em;
}
#lamella .skin-type .st2 {
  color: rgba(var(--point-color), 1);
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0.04em;
}
#lamella .skin-type .st3 {
  background-color: rgba(var(--point-color), 1);
  color: white;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  margin: 0.5em auto;
  line-height: 1.8em;
}
#lamella .skin-type .st4 {
  font-size: 0.8em;
  letter-spacing: 0.04em;
  line-height: 1.7em;
  margin-top: 1em;
}
#lamella .skin-type .lamella-img,
#lamella .skin-type .component-img {
  width: 85%;
  margin: 1em auto 0.8em;
}
#lamella .skin-type .lamella-img {
  mix-blend-mode: multiply;
  margin-bottom: 2.5em;
}
#lamella .skin-type .skin-img {
  margin: 0 auto;
  mix-blend-mode: multiply;
}
#lamella .skin-type .st5 {
  font-size: 0.7em;
  letter-spacing: 0.04em;
  line-height: 1.5em;
  height: 6em;
}
#lamella .annotation {text-align: right;}


#feature3 .title .st3 p + p {margin-top: 2em;}
#free {padding: 3em 8%;}
#free .content {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 3em 2em;
}
#free .content .box {
  grid-column: 2 span;
  background-color: rgba(241, 236, 221, 0.5);
  border-radius: 50%;
  width: 7em;
  height: 7em;
  align-content: center;
  position: relative;
}
#free .content .box::after {
  content: "";
  position: absolute;
  width: 6em;
  height: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-color: white;
}
#free .content .box:nth-of-type(6) {grid-column: 2/4;}
#free .content .box p {
  font-size: 0.9em;
  letter-spacing: 0.04em;
  line-height: 1.6em;
  position: relative;
  z-index: 1;
}
#free .annotation {
  font-size: 0.6em;
  text-align: right;
  line-height: 1.7em;
}
#free .annotation span:nth-of-type(2) {
    margin-right: 0;
}

#feature4 .title .st3 p + p {margin-top: 2em;}
#aroma {padding: 3em 15% 0;}
#feature #aroma h3 span:last-of-type{
  font-family: var(--font-gothic);
  font-size: 1em;
  margin-top: 0;
  width: fit-content;
}
#aroma .content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5em 8em;
  font-size: 0.8em;
}
#aroma .annotation {text-align: right;}



/* ↓ lineup ↓ ------------------------------------------------------------------ */
#lineup {
  background-color: rgba(241, 236, 221, 1);
  padding: 3em 8%;
  display: block;
}
#lineup h1 {
  font-size: 1.5em;
  letter-spacing: 0.12em;
  line-height: 1.3em;
}
#lineup h1 .br:last-of-type {font-size: 0.56em;}

#lineup .jump_menu {
  position: relative;
  padding-top: 4em;
}
#lineup .jump_menu ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2em 2.5em;
}
#lineup .jump_menu li {
  color: white;
  background-color: rgba(var(--background-color), 1);
  font-size: 0.8em;
  letter-spacing: 0.04em;
}
#lineup .jump_menu li:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: rgba(99, 99, 99, 0.3) 0 5px 8px;
}
#lineup .jump_menu li:nth-of-type(5) {grid-area: 2 / 2 / 3 / 3;}
#lineup .jump_menu li:last-of-type {grid-area: 2 / 3 / 3 / 4;}
#lineup .jump_menu li:last-of-type {color: rgba(var(--main-color), 1);}
#lineup .jump_menu .annotation {
  position: absolute;
  font-size: 0.55em;
  right: 0;
  bottom: -2.5em;
}

#lineup .jump_menu li a {
  line-height: 4em;
  display: inline-block;
  width: 100%;
}


.jump_content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0 0.9em;
}
#lineup_basic {grid-column: span 4;}
#lineup_sensitive,
#lineup_acnia,
#lineup_bright {grid-column: span 2;}


.jump_content h2 {
  font-size: 1.1em;
  letter-spacing: 0.1em;
  margin: 4em auto 0;
  position: relative;
}
.jump_content h2 span:first-of-type {
  padding-bottom: 0.6em;
  border-bottom: solid 1px rgba(var(--main-color), 1);
}
.jump_content h2 .annotation {
  position: absolute;
  font-size: 0.5em;
  bottom: -3em;
  right: 0;
  width: 100%;
  text-align: right;
  letter-spacing: 0.05em;
}

.line_box {
  display: grid;
  grid-gap: 2em 0.9em;
  margin-top: 3em;
}
#basic_box {grid-template-columns: repeat(8, 1fr);}
#sensitive_box,
#acnia_box,
#bright_box {grid-template-columns: repeat(2, 1fr);}


.line_box .box {
  background-color: white;
  padding: 1.5em;
  position: relative;
}
#basic_box .box {grid-column: 2 span;}
#basic_box .box:nth-of-type(5) {
  grid-column: 2/4;
}
.line_box .box::before,
.line_box .box::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.line_box .box::before {
  background-color: rgba(var(--main-color), 0.6);
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
}
.line_box .box::after {
  content: "";
}
.line_box .box:hover::before,
.line_box .box:hover::after {
  opacity: 1;
}
.line_box .box:hover::after {
  content: "Read More";
  color: white;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  bottom: 0;
  right: 0;
  font-size: 1.5em;
  letter-spacing: 0.06em;
}


.line_box .img-box {
  height: 17em;
  padding: 0.7em;
  align-content: center;
}
.line_box .img-box img {
  width: auto;
  height: 85%;
}
#trial_box .img-box img {height: 75%;}

.line_box p {
  font-size: 1.2em;
  text-align: left;
}

.line_box .category {
  width: fit-content;
  border: solid 1px rgba(var(--main-color), 1);
  margin-top: 1em;
  padding: 0.2em 0.5em;
}
.line_box .name {
  margin-top: 0.7em;
  line-height: 1.6em;
  letter-spacing: 0.04em;
}


/* ↓ item ↓ ------------------------------------------------------------------ */
#item {
  margin-top: 5em;
  padding-top: 80px;
}

#item > .box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#item > .box > .img-box {
  height: 20em;
}

#item > .box .img-box img {
  width: auto;
  height: 100%;
}

#item .right-box {
  width: 70%;
  font-size: 0.7em;
  line-height: 1.8em;
  letter-spacing: 0.04em;
  text-align: left;
}
#item .right-box > p {
  margin-top: 0.3em;
}

#item .right-box .category {
  border: solid 1px rgba(var(--main-color), 1);
  padding: 0.4em 0.7em;
}

#item .right-box .stinging {
  background-color: rgba(233, 221, 227, 1);
  color: rgba(151, 91, 120, 1);
  padding: 0.5em 1em;
}

#item .right-box .name {
  font-size: 1.375em;
  line-height: 1.7em;
}

#item .right-box .organic_index {
  background-color: rgba(220, 225, 186, 0.7);
  width: fit-content;
  padding: 0 0.8em;
}

#item .right-box .type {
  background-color: rgba(134, 134, 135, 1);
  color: white;
  padding: 0.5em 1em;
}

#item .right-box .description {
  line-height: 0em;
  margin-top: 1em;
  margin-left: 1.4em;
  text-indent: -1.4em;
}

#item .right-box .description > li {
  line-height: 1.7em;
}

#item .right-box .st1 {
  border: solid 1px rgba(var(--main-color), 1);
  border-radius: 1em;
  width: fit-content;
  padding: 0 1.2em;
  margin-top: 2em;
}

#item .right-box .howto {
  margin-top: 0.7em;
}

#item .right-box .howto + p {
  margin-top: 2em;
}

#item .right-box .howto + p + div {
  margin-top: 0.5em;
}

#item .related h2 {
  margin: 2em auto 0em;
  border-bottom: solid 1px rgba(var(--main-color), 1);
  width: fit-content;
  padding: 0.5em 1.5em;
  letter-spacing: 0.1em;
}

#item .related {
  grid-column: 2 span;
}

.related .line_box .box {
  grid-column: 1 span;
}

#related-box {
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 0.9em;
  padding: 3em 8%;
}


/* ↓ step ↓ ------------------------------------------------------------------ */
#step {padding: 5em 0;}

#step h2 .st1 {
  font-size: 1.3em;
  letter-spacing: 0.12em;
  line-height: 1.3em;
}

#step h2 .st2 {
  font-size: 0.65em;
  letter-spacing: 0.12em;
  line-height: 1.7em;
  margin-top: 0.5em;
}

#step .content ul {
  display: flex;
  justify-content: space-evenly;
  font-size: 0.9em;
  border-bottom: solid 1.5px rgba(220, 219, 218, 1);
  margin: 5em 15% 1em;
  position: relative;
}
#step .content ul::after {
  content: "＊1 水分と脂分のバランスを整えるお手入れ　＊2 お肌にツヤを与えるお手入れ";
  font-size: 0.6em;
  display: block;
  color: rgba(var(--main-color), 0.7);
  position: absolute;
  right: 0;
  bottom: -2em;
}

#step label {
  padding: 1em 0 0.6em;
  opacity: 0.5;
  width: 11em;
  display: block;
  letter-spacing: 0.1em;
  margin-bottom: -0.15em;
  cursor: grab;
}
#step input[type="radio"]:checked + label {
  border-bottom: solid 2px rgba(var(--point-color), 1);
  opacity: 1;
}

.select-step .box {
  display: grid;
  grid-template-columns: 45% 50%;
  background-color: white;
  padding: 1em;
}
.select-step .box .left img{
  width: auto;
  height: 7em;
}
.select-step .box .right {
  display: grid;
  grid-template-rows: 1.3em auto auto;
}
.select-step .box .right .category {
  background-color: rgba(var(--point-color), 1);
  color: white;
  font-size: 0.7em;
  letter-spacing: 0.1em;
  padding: 0.2em 0;
}
.select-step .box .right .name {
  font-size: 0.7em;
  letter-spacing: 0.05em;
  text-align: left;
  margin-top: 0.5em;
  height: 3em;
}
.select-step .box .right .name > span {
  display: inline-block;
}
.select-step .box .right .timing {
  display: grid;
  grid-template-columns: repeat(2, 2em);
  grid-column-gap: 0.7em;
  align-self: middle;
}
.select-step .box .right .timing .icon img {
  width: auto;
  height: 2em;
}
.select-step .box .right .timing .night img {height: 1.8em;}

/* ↓ swiper ↓ --------------------------------------------------- */
.product-slider {
  padding: 2em 2.5em;
  background-color: rgba(var(--step-bg), 1);
  display: none;
  margin: 2em 15%;
  position: relative;
}
.select-basic {display: block;}

.product-slider__swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.product-slider .swiper-slide {
  position: relative;
  width: 15em;
  height: auto;
}
/* 最後以外適用 */
.product-slider .swiper-slide:not(:last-child){
  margin-right: 2.5em;
}

/* 1〜7番目の後ろに矢印 */
.product-slider .swiper-slide:not(:last-child)::after {
  content: url("../images/step/arrow.svg");
  position: absolute;
  top: 50%;
  right: -1.8em;
  width: 1em;
  height: 2.1em;
  transform: translateY(-50%);
}
/* 2番めだけ適用 */
.product-slider .swiper-slide:nth-child(2) {
  margin-right: 1em;
}

/* 2番目と3番目の間だけ「or」 */
.product-slider .swiper-slide:nth-child(2)::after {
  content: url("../images/step/or.svg");
  left: 100%;
  width: 2.5em;
  height: 100%;
  color: #999;
  font-size: 1em;
  line-height: 10em;
  text-align: center;
  background-color: white;
  margin-left: -1em;
  z-index: 1;
}

.swiper-button-prev,
.swiper-button-next {
  background-color: rgba(var(--main-color), 0.3);
  color: white;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

.swiper-button-prev {left: -4.5em;}
.swiper-button-next {right: -4.5em;}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 1em;
  transform: scale(0.8, 2.5);
  letter-spacing: -0.4em;
  margin-top: 0.2em;
}
.swiper-button-prev:after {
  content: '＜＜';
  margin-left: -0.5em;
}
.swiper-button-next:after {
  content: '＞＞';
  margin-left: 0;
}

/* ↓ return ↓ --------------------------------------------------- */
#return {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: grid;
  z-index: 100;
}
#return div {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(var(--brand-color), 1);
  display: grid;
  align-items: center;
}
#return p {
  text-align: center;
  color: white;
  font-size: 15px;
  line-height: 1.3em;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
#return p span {display: block;}


@media screen and (min-width: 1401px) {
  font-size: 1em;
}