@charset "utf-8";

.pc-only {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.det-kusuriya {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
  /* letter-spacing: 0.1em; */
}

.det-kusuriya-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: min(3vw, 30px);
}


/* =========================================== */
/*    hero (kv / lead)
/* =========================================== */

/* -- hero -- */
.det-kusuriya .hero {
  background: url(../img/no1_bg.webp) no-repeat center bottom;
  background-size: 100% auto;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .hero {
    background: url(../img/no1_bg_sp.webp) no-repeat center bottom;
    background-size: 100% auto;
  }
}

/* -- kv -- */
.det-kusuriya .kv {
  background: var(--_, linear-gradient(44deg, #F8C9D2 26.74%, #FCE5CC 45.32%, #FFF9C7 58.55%, #88D2D7 80.56%, #00A5EA 92.25%));
  clip-path: ellipse(80% 100% at 50% 0%);
}

@media screen and (max-width: 920px) {
  .det-kusuriya .kv {
    background: var(--_, linear-gradient(70deg, #F8C9D2 26.74%, #FCE5CC 45.32%, #FFF9C7 58.55%, #88D2D7 80.56%, #00A5EA 92.25%));
    clip-path: ellipse(100% 100% at 50% 0%);
  }
}

@media screen and (max-width: 767px) {
  .det-kusuriya .kv {
    clip-path: ellipse(160% 100% at 50% 0%);
  }
}

.det-kusuriya .kv-wrap {
  background: url(../img/kv_grass.webp) no-repeat center top;
  background-size: min(1790px, 130vw) auto;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .kv-wrap {
    background: url(../img/kv_grass_sp.webp) no-repeat center top;
    background-size: 100% auto;
  }
}

.det-kusuriya .kv-content {
  position: relative;
  max-width: 1400px;
  margin-inline: auto;
  padding-bottom: 90px;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .kv-content {
    padding-bottom: 15vw;
  }
}

.det-kusuriya .kv-content .kv__title {
  text-align: center;
  padding-top: min(150px, 10vw);
  padding-bottom: min(150px, 10vw);
  max-width: min(953px, 70vw);
  margin-inline: auto;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .kv-content .kv__title {
    max-width: initial;
    width: 100%;
    padding-top: 0;
    padding-bottom: 75vw;
  }
}

.det-kusuriya .kv-content--maomao {
  position: absolute;
  top: min(235px, 16vw);
  left: min(80px, 5vw);
  max-width: min(286px, 22vw);
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .kv-content--maomao {
    top: initial;
    bottom: 35vw;
    left: 3vw;
    max-width: 40vw;
  }
}

.det-kusuriya .kv-content--jinshi {
  position: absolute;
  top: min(105px, 7vw);
  right: min(35px, 1.5vw);
  max-width: min(380px, 28vw);
  opacity: 0;
}

@media screen and (max-width: 1400px) {
  .det-kusuriya .kv-content--jinshi {
    right: 0;
  }
}

@media screen and (max-width: 767px) {
  .det-kusuriya .kv-content--jinshi {
    top: initial;
    bottom: 35vw;
    max-width: 50vw;
  }
}

.det-kusuriya .kv-content--text {
  text-align: center;
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", HiraMinPro-W3, "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: min(24px, 2.6vw);
  font-weight: bold;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .kv-content--text {
    font-size: 4vw;
  }
}

/* -- no1 -- */
.det-kusuriya .no1 {
  padding-block: min(50px, 5vw);
}

.det-kusuriya .no1__inner {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
  padding-left: min(134px, 8vw);
}

@media screen and (max-width: 767px) {
  .det-kusuriya .no1__inner {
    padding-left: 0;
  }
}

.det-kusuriya .no1__title {
  width: min(920px, 70vw);
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .no1__title {
    width: 100%;
  }
  .det-kusuriya .no1__title img {
    width: 100%;
  }
}

.det-kusuriya .no1__text {
  width: min(920px, 70vw);
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .no1__text {
    display: none;
  }
}

.det-kusuriya .no1__design {
  position: absolute;
  top: min(120px, 7vw);
  right: 0;
  width: min(555px, 45vw);
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .no1__design {
    position: static;
    top: initial;
    right: initial;
    width: 100%;
  }

  .det-kusuriya .no1__design img {
    width: 100%;
  }
}


/* =========================================== */
/*    main-content
/* =========================================== */
.det-kusuriya .main-content {
  background: linear-gradient(70deg, #F8C9D2 40.44%, #FCE5CC 55.25%, #FFF9C7 65.8%, #88D2D7 83.35%, #00A5EA 92.66%);
  padding-inline: min(30px, 5vw);
}
@media screen and (max-width: 767px) {
  .det-kusuriya .main-content {
    background: linear-gradient(80deg, #F8C9D2 40.44%, #FCE5CC 55.25%, #FFF9C7 65.8%, #88D2D7 83.35%, #00A5EA 92.66%);
  }
}

.det-kusuriya .main-content .box-content {
  position: relative;
  border: 1px solid #AA7E3A;
  padding: min(7px, 1vw);
  max-width: 1160px;
  margin-inline: auto;
}

@media screen and (max-width: 1360px) {
  .det-kusuriya .main-content .box-content {
    margin-inline: min(50px, 4.5vw);
  }
}

@media screen and (max-width: 767px) {
  .det-kusuriya .main-content .box-content {
    margin-inline: auto;
  }
}

.det-kusuriya .main-content .box-content__inner {
  background: #fff;
  padding-inline: min(40px, 5vw);
  padding-bottom: min(50px, 5vw);
  padding-top: min(80px, 10vw);
}

.det-kusuriya .main-content .box-content__title {
  white-space: nowrap;
  color: #fff;
  font-size: min(32px, 6vw);
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", HiraMinPro-W3, "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, serif;
  padding: min(10px, 1.5vw) min(25px, 5vw);
  background: linear-gradient(180deg, #AA7C37 0%, #B29B79 100%);

  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.det-kusuriya .main-content .box-content__title .note {
  font-size: 50%;
  vertical-align: super;
}

.det-kusuriya .main-content .box-content__title small {
  font-size: 70%;
}

/* =========================================== */
/*    ingredient
/* =========================================== */
.det-kusuriya .ingredient {
  max-width: 1300px;
  margin-inline: auto;
  padding-top: min(80px, 10vw);
  margin-bottom: min(180px, 15vw);
}

.det-kusuriya .ingredient__title {
  text-align: center;
  margin-bottom: min(50px, 5vw);
}

.det-kusuriya .ingredient__catch {
  text-align: center;
  margin-bottom: min(80px, 10vw);
}

.det-kusuriya .ingredient__main {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: min(20px, 3vw);
  row-gap: 10vw;
  margin-bottom: min(80px, 10vw);
}

@media screen and (max-width: 920px) {
  .det-kusuriya .ingredient__main {
    grid-template-columns: 1fr;
  }
}

.det-kusuriya .ingredient__main--item {
  position: relative;
}

.det-kusuriya .ingredient__main--item .box-content__title {
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
}

.det-kusuriya .ingredient__main--item[data-col="left"] .box-content__title {
  left: 54%;
}

@media screen and (max-width: 920px) {
  .det-kusuriya .ingredient__main--item[data-col="left"] .box-content__title {
    left: 50%;
  }
}

.det-kusuriya .ingredient__main--item[data-col="right"] .box-content__title {
  left: 44%;
}

@media screen and (max-width: 920px) {
  .det-kusuriya .ingredient__main--item[data-col="right"] .box-content__title {
    left: 50%;
  }
}

.det-kusuriya .ingredient__other .box-content__title {
  font-size: min(32px, 5vw);
}

.det-kusuriya .ingredient__other ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: min(20px, 3vw);
}

@media screen and (max-width: 767px) {
  .det-kusuriya .ingredient__other ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.det-kusuriya .ingredient__other ul li {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .ingredient__other ul li {
    max-width: 30%;
  }
}

.det-kusuriya .ingredient__other ul li figcaption {
  font-size: min(18px, 4vw);
  line-height: 1.4;
  font-weight: 500;
  margin-top: min(15px, 3vw);
}


/* =========================================== */
/*    care
/* =========================================== */
.det-kusuriya .care {
  margin-bottom: min(180px, 25vw);
}

.det-kusuriya .care__title {
  text-align: center;
  margin-bottom: min(80px, 10vw);
}

/* -- お肌にやさしい角質ケア -- */
.det-kusuriya .care__ing {
  margin-bottom: min(80px, 10vw);
}

.det-kusuriya .care__ing--text {
  text-align: center;
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", HiraMinPro-W3, "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: min(32px, 3.8vw);
  font-weight: bold;
  margin-bottom: min(40px, 4vw);
}

.det-kusuriya .care__ing--text strong {
  font-weight: bold;
  color: #3D7EE2;
}

.det-kusuriya .care__ing--text small {
  font-size: 70%;
}

.det-kusuriya .care__ing--list {
  display: flex;
  justify-content: center;
  gap: min(40px, 4vw);
}

@media screen and (max-width: 767px) {
  .det-kusuriya .care__ing--list {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* -- 5つの無添加処方 -- */
.det-kusuriya .care__rp--list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: min(20px, 3vw);
}

@media screen and (max-width: 767px) {
  .det-kusuriya .care__rp--list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.det-kusuriya .care__rp--list li {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .det-kusuriya .care__rp--list li {
    max-width: 30%;
  }
}



/* =========================================== */
/*    howto
/* =========================================== */
.det-kusuriya .howto {
  margin-bottom: min(180px, 25vw);
}

.det-kusuriya .howto__title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
  .det-kusuriya .howto__title {
    width: 100%;
    max-width: 90%;
  }
}

.det-kusuriya .howto__content {
  display: flex;
  justify-content: center;
  column-gap: min(20px, 3vw);
  row-gap: 7vw;
  padding-top: min(40px, 7vw);
}

@media screen and (max-width: 980px) {
  .det-kusuriya .howto__content {
    flex-direction: column;
  }

  .det-kusuriya .howto__content p {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
  }
}


/* =========================================== */
/*    secret
/* =========================================== */
.det-kusuriya .secret__title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
  .det-kusuriya .secret__title {
    width: 100%;
    max-width: 90%;
  }
}

.det-kusuriya .secret__fig {
  text-align: center;
  display: flex;
  justify-content: center;
  column-gap: min(40px, 3vw);
  row-gap: min(10px, 3vw);
  padding-top: min(40px, 5vw);
}

@media screen and (max-width: 980px) {
  .det-kusuriya .secret__fig {
    flex-direction: column;
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .det-kusuriya .secret__fig {
    margin-bottom: min(20px, 5vw);
  }
}

.det-kusuriya .secret__poroporo {
  text-align: center;
  margin-bottom: min(30px, 10vw);
}



/* =========================================== */
/*    kusuriya-footer
/* =========================================== */
.det-kusuriya .kusuriya-footer {
  text-align: center;
  background: url(../img/footer_bg.webp) no-repeat center 400px;
  background-size: 1238px auto;
  padding-top: min(180px, 25vw);
  padding-bottom: min(100px, 15vw);
  padding-inline: min(30px, 5vw);
}

@media screen and (max-width: 767px) {
  .det-kusuriya .kusuriya-footer {
    background: url(../img/footer_bg_sp.webp) no-repeat center 36vw;
    background-size: 100% auto;
  }
}

.det-kusuriya .kusuriya-footer__sns {
  margin-bottom: min(50px, 5vw);
}

.det-kusuriya .kusuriya-footer__main {
  position: relative;
  text-align: center;
  max-width: 680px;
  padding-top: min(115px, 17vw);
  padding-bottom: min(80px, 10vw);
  margin-inline: auto;
  margin-bottom: min(50px, 5vw);
}
.det-kusuriya .kusuriya-footer__main a {
  transition: all 0.3s ease-out;
}
.det-kusuriya .kusuriya-footer__main a:hover {
  filter: brightness(120%);
}

.det-kusuriya .kusuriya-footer__main--insta {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: min(100px, 15vw);
}

.det-kusuriya .kusuriya-footer__main--x {
  position: absolute;
  top: 0;
  right: 0;
  max-width: min(100px, 15vw);
}

.det-kusuriya .kusuriya-footer__product {
  margin-bottom: min(50px, 5vw);
  max-width: 70%;
  margin-inline: auto;
}
.det-kusuriya .kusuriya-footer__product a {
  transition: all 0.3s ease-out;
}
.det-kusuriya .kusuriya-footer__product a:hover {
  filter: brightness(120%);
}

.det-kusuriya .kusuriya-footer__shop {
  max-width: 70%;
  margin-inline: auto;
}
.det-kusuriya .kusuriya-footer__shop a {
  transition: all 0.3s ease-out;
}
.det-kusuriya .kusuriya-footer__shop a:hover {
  filter: brightness(120%);
}


.det-kusuriya .kusuriya-footer__copyright {
  font-weight: bold;
  margin-top: min(100px, 15vw);
  font-size: min(16px, 3vw);
}