@charset "UTF-8";

html,
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.junkoh_lp {
  --txt-strong: 25px;
  --color-gold: #b4884d;

  width: 100%;
  background-color: #f7f7f7;
  color: #1a1714;
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.contents {
  width: 100%;
  max-width: 880px;
  margin: auto;
  background-color: #f3f2f1;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

sup {
  font-size: 9px;
}

.fade-in {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    translate 0.8s ease;
}

.fade-in.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    transition: none;
  }

  .solution__divider::before {
    transition: none;
  }

  .ingredients__divider::before {
    transition: none;
  }

  .offer__today::after {
    transition: none;
    transform: scaleX(1);
  }

  .cta__campaign {
    animation: none;
  }
}

.kv,
.intro {
  margin: 0;
  background-color: #fff;
}

.kv picture {
  display: block;
}

.design-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
}

.intro__inner {
  --intro-logo-gap: 30px;
  --intro-logo-width: 83px;

  padding: 40px 0 52px;
  background-image: url("https://shop.kohgendo.com/Contents/ImagesPkg/page/uvcare_supplement/img/intro_bg.webp");
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.intro__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0 0 30px;
}

.intro__photo {
  display: block;
  height: clamp(103px, 26.4vw, 232px);
  overflow: hidden;
}

.intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro__photo:nth-child(2) img {
  object-position: 50% 46%;
}

.intro__logo {
  width: var(--intro-logo-width);
  margin: 0 auto var(--intro-logo-gap);
}

.intro__copy,
.intro__heading,
.intro__closing {
  margin: 0;
  text-align: center;
  letter-spacing: 0.055em;
  color: #1a1714;
}

.intro__copy {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
}

.intro__copy--top {
  margin-bottom: 24px;
}

.intro__heading {
  margin-bottom: 34px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
}

.intro__hand {
  width: 100%;
  height: clamp(177px, 45.4vw, 399px);
  margin-bottom: 34px;
  object-fit: cover;
  object-position: 50% 47%;
}

.intro__copy--middle {
  margin-bottom: 24px;
}

.intro__copy--middle strong {
  color: #c09153;
  font-size: 19px;
  font-weight: 700;
}

.intro__tablet {
  width: 83px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 0 6px #fff);
}

.intro__copy--red {
  margin-bottom: 8px;
}

.intro__copy--red span {
  color: #cd0413;
}

.intro__closing {
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  font-size: var(--txt-strong);
  font-weight: 500;
  line-height: 1.55;
}

.problem {
  position: relative;
  margin: 0;
  padding: 50px 20px 55px;
  background:
    linear-gradient(rgba(12, 12, 12, 0.28), rgba(12, 12, 12, 0.42)),
    url("https://shop.kohgendo.com/Contents/ImagesPkg/page/uvcare_supplement/img/problem_bg.webp") center / cover;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.problem__lead,
.problem__label,
.problem__message,
.problem__copy,
.problem__closing {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.problem__lead {
  font-size: 18px;
  line-height: 1.9;
}

.problem__graph {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  margin: 14px auto 24px;
  background-color: #fff;
  color: #1f1b18;
}

.problem__highlight {
  color: var(--color-gold);
}

.problem__chart {
  display: block;
  width: 100%;
  height: auto;
}

.problem__label {
  font-size: 18px;
  line-height: 1.9;
}

.problem__tags {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 72px);
  justify-content: center;
  gap: 8px;
  margin: 8px 0 22px;
  padding: 0;
  list-style: none;
}

.problem__tags li {
  display: grid;
  place-items: center;
  min-height: 36px;
  border-radius: 7px;
  background-color: #c09153;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}

.problem__message {
  font-size: 19px;
  line-height: 1.9;
}

.problem__amulet {
  position: relative;
  z-index: 1;
  width: 64px;
  margin: 20px auto 58px;
}

.problem__copy {
  font-size: 17px;
  line-height: 2;
}

.problem__woman {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  aspect-ratio: 912 / 579;
  height: auto;
  margin: 16px auto 18px;
}

.problem__closing {
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.03em;
}

.problem__closing--large {
  margin-top: 17px;
  font-size: var(--txt-strong);
  line-height: 1.7;
  letter-spacing: 0.08em;
}

.solution {
  margin: 0;
  padding: 62px 20px 50px;
  background: linear-gradient(90deg, #d90517 0%, #bf030f 100%);
  color: #fff;
  text-align: center;
}

.solution__lead,
.solution__intro,
.solution__section-title,
.solution__dose h3,
.solution__foods p {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.solution__lead {
  font-size: 14px;
  line-height: 1.8;
}

.solution__tablet {
  width: 72px;
  margin: 14px auto 10px;
}

.solution__brand {
  margin: 0 0 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
}

.solution__brand-logo {
  width: 140px;
  margin: 0 auto;
}

.solution__brand small {
  display: block;
  margin-top: 9px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.48em;
  text-indent: 0.48em;
}

.solution__brand em {
  display: block;
  margin-top: 19px;
  font-size: 24px;
  font-style: normal;
}

.solution__intro {
  font-size: 16px;
  line-height: 1.9;
}

.solution__intro--food {
  margin-top: 28px;
}

.solution__intro-note {
  display: block;
  margin-top: 6px;
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.16em;
}

.solution__intro--astaxanthin {
  margin-top: 0;
  margin-bottom: 24px;
}

.solution__intro strong {
  display: inline-block;
  margin-top: 2px;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: var(--txt-strong);
  font-weight: 500;
  line-height: 1.35;
}

.solution__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  width: min(100%, 500px);
  margin: 0 auto 38px;
}

.solution__photos img {
  height: 126px;
  object-fit: cover;
}

.solution__box {
  width: min(100%, 500px);
  margin: 0 auto 20px;
  padding: 28px 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  text-align: left;
}

.solution__box h3,
.solution__card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  letter-spacing: 0.08em;
}

.solution__box h3 {
  display: table;
  margin: -44px auto 14px;
  padding: 0 18px;
  background: #cf0312;
  color: #fff;
}

.solution__box p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.solution__box--functional {
  margin-top: 30px;
  margin-bottom: 46px;
}

.solution__divider {
  position: relative;
  width: 1px;
  height: 78px;
  margin: 0 auto 42px;
  overflow: hidden;
}

.solution__divider::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s ease-out;
}

.solution__divider.is-visible::before {
  transform: scaleY(1);
}

.solution__box .solution__note {
  margin-top: 4px;
  font-size: 12px;
}

.solution__card {
  width: min(100%, 500px);
  background-color: #fff;
  color: #111;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15);
  margin: auto;
}

.solution__card h3 {
  padding: 8px 6px;
  background: linear-gradient(90deg, #e1d499 0%, #fff5cb 40%, #dfd08d 100%);
  color: #111;
  font-size: 19px;
  font-weight: 700;
}

.solution__card--antioxidant h3,
.solution__card--uv h3,
.solution__card--moisture h3 {
  padding: 13px 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.solution__card--inner {
  padding: 0 6% 5%;
}

.solution__bars {
  width: 100%;
  margin: 0 auto 24px;
}

.solution__bars img {
  width: 100%;
}

.solution__card p {
  margin: 1em 0;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.solution__card--antioxidant p {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.solution__card b {
  display: block;
  margin-top: 4px;
  color: #cf0a19;
  font-size: 26px;
  line-height: 1.5;
}

.solution__card--antioxidant b {
  margin-top: 10px;
  font-size: var(--txt-strong);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.solution__card--antioxidant b sup {
  vertical-align: super;
}

.solution__card small {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.5;
}

.solution__card--antioxidant small {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
}

.solution__section-title {
  margin: 30px 0 22px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.75);
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: var(--txt-strong);
  line-height: 1.5;
}

.solution__section-title--uv {
  position: relative;
  margin: 50px auto 32px;
  padding: 0 0 10px;
  border-top: 0;
  font-size: var(--txt-strong);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.12em;
}

.solution__section-title--uv::before,
.solution__section-title--uv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.solution__section-title--uv::before {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
}

.solution__section-title--uv::after {
  width: 29px;
  height: 29px;
  bottom: -14px;
  border-right: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  background: #cf0312;
  transform: rotate(45deg);
}

.solution__card--uv {
  margin: 0 auto 52px;
  text-align: left;
}

.solution__caption {
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 10px;
  font-weight: lighter;
}

.solution__med-visual img {
  width: 100%;
}

.solution__compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 12px 0;
}

.solution__compare span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.solution__compare div:nth-child(2) span {
  color: #c23b45;
}

.solution__compare img {
  aspect-ratio: 1 / 1.18;
  object-fit: cover;
}

.solution__result {
  margin: 14px -17px 14px;
  padding: 13px 14px;
  background-color: #cd0413;
  color: #fff;
  font-weight: 700;
}

.solution__card--uv .solution__result {
  position: relative;
  margin: 5px 0 0;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
  letter-spacing: 0.08em;
}

.solution__card--uv .solution__result::before {
  content: "";
  position: absolute;
  top: -17px;
  right: 10%;
  width: 0;
  height: 0;
  border-right: 22px solid transparent;
  border-bottom: 17px solid #cd0413;
  border-left: 22px solid transparent;
  transform: translateX(-50%);
}

.solution__uv-text,
.solution__moisture-lead {
  color: #111;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
}

.solution__uv-graph img {
  width: 100%;
}

.solution__card--uv .solution__uv-note,
.solution__card--moisture .solution__uv-note {
  color: #111;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.solution__card--moisture {
  margin: 0 auto 52px;
  text-align: left;
}

.solution__moisture-graph img {
  width: 100%;
}

.solution__mini-chart {
  display: grid;
  grid-template-columns: repeat(2, 80px);
  justify-content: center;
  align-items: end;
  gap: 28px;
  min-height: 150px;
  margin: 12px 0;
  padding: 12px 0 0;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.solution__mini-chart div {
  display: grid;
  grid-template-rows: 110px auto;
  align-items: end;
}

.solution__mini-chart span {
  display: grid;
  place-items: start center;
  min-height: 32px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.solution__mini-chart div:first-child span {
  background-color: #5b96a2;
}

.solution__mini-chart div:last-child span {
  background-color: #cd0413;
}

.solution__mini-chart small {
  margin-top: 8px;
  font-size: 11px;
}

.solution__result--gold {
  display: inline-block;
  margin: 6px auto 0;
  padding: 6px 18px;
  background-color: #fff0a8;
  color: #cd0413;
}

.solution__dose h3 {
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 12px;
  font-size: var(--txt-strong);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.08em;
}

.solution__dose h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 210px;
  height: 2px;
  background: #e8d887;
  transform: translateX(-50%);
}

.solution__dose-box {
  width: min(100%, 500px);
  margin: 0 auto 40px;
}

.solution__dose-box img {
  width: 100%;
}

.solution__foods {
  margin-top: 0;
}

.solution__foods p {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.08em;
}

.solution__foods .solution__foods-note {
  font-size: var(--txt-strong);
}

.solution__salmon-row,
.solution__ikura-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 30px auto;
}

.solution__salmon-row img {
  width: min(100%, 500px);
}

.solution__ikura-row img {
  width: min(31%, 145px);
}

.solution__package {
  width: 255px;
  margin: 32px auto 0;
}

.ingredients {
  margin: 0;
  padding: 60px 0px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 250, 235, 0.54)),
    url("https://shop.kohgendo.com/Contents/ImagesPkg/page/uvcare_supplement/img/intro_bg.webp") center top / cover;
  background-attachment: fixed, fixed;
  color: #1a1714;
  text-align: center;
}

.ingredients__heading {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  line-height: 1.95;
}

.ingredients__heading strong {
  color: var(--color-gold);
  font-size: 43px;
  font-weight: 500;
  line-height: 1.15;
}

.ingredients__network {
  width: min(95%, 520px);
  margin: 15px auto 20px;
}

.ingredients__doctor {
  margin: 0 5%;
  padding: 30px 5% 5px;
  border: 1px solid #c09153;
  text-align: left;
}

.ingredients__doctor-lead {
  margin: 0 0 1em;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 16.5px;
  line-height: 1.75;
  text-align: center;
  letter-spacing: 0.12em;
}

.ingredients__doctor-lead span {
  display: block;
  font-size: 15px;
}

.ingredients__doctor-ribbon {
  width: calc(100% + 12%);
  max-width: none;
  margin: 0 -6% 20px;
}

.ingredients__doctor-profile {
  display: grid;
  grid-template-columns: 31% 1fr;
  gap: 24px;
  align-items: center;
  margin: 0 0 22px 5%;
  padding: 27px 0 0 0;
  border-top: 1px solid #c09153;
  border-right: 1px solid #c09153;
}

.ingredients__doctor-profile img {
  border-radius: 50%;
  margin-top: 0;
}

.ingredients__doctor-profile p {
  margin: 0;
  padding: 0 18px 0 0;
  color: #c09153;
}

.ingredients__doctor-profile span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.ingredients__doctor-profile strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.ingredients__doctor-profile small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.06em;
}

.ingredients__doctor-text {
  padding: 0 12px 12px;
  border-left: 1px solid #c09153;
  border-bottom: 1px solid #c09153;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #826034;
}

.ingredients__amulet-section {
  margin: 0 -20px;
  padding: 34px 0 0;
}

.ingredients__divider {
  position: relative;
  width: 1px;
  height: 103px;
  margin: 0 auto 42px;
  overflow: hidden;
}

.ingredients__divider::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #c09153;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s ease-out;
}

.ingredients__divider.is-visible::before {
  transform: scaleY(1);
}

.ingredients__amulet-copy {
  margin: 0 0 33px;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.12em;
}

.ingredients__amulet-copy strong {
  font-size: var(--txt-strong);
  font-weight: 500;
}

.ingredients__amulet-copy span {
  color: #c09153;
}

.ingredients__shield {
  width: 100%;
  margin: 0 auto 34px;
}

.ingredients__daily {
  margin: 0 0 24px;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.ingredients__amulet {
  width: 64px;
  margin: 0 auto 28px;
}

.ingredients__support {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.ingredients__support-lead {
  display: block;
  margin-bottom: 0.5em;
}

.ingredients__support span:not(.ingredients__support-lead) {
  color: #c09153;
  font-size: 23px;
}

.ingredients__support strong {
  color: #cd0413;
  font-size: var(--txt-strong);
  font-weight: 500;
}

.ingredients__efficacy {
  width: min(100% - 40px, 520px);
  margin: 0 auto;
}

.ingredients__note {
  width: min(100% - 70px, 480px);
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}

.offer {
  margin: 0;
  background-color: #fff;
  color: #1a1714;
  text-align: center;
}

.offer__regret {
  padding: 50px 0 5px;
  background: linear-gradient(#fff 0%, #fff 76%, rgba(255, 255, 255, 0) 100%);
}

.offer__woman {
  width: min(100%, 500px);
  aspect-ratio: 1402 / 1122;
  height: auto;
  margin: 0 auto;
  opacity: 0.72;
}

.offer__smoke {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1402 / 1122;
  margin: -58px auto 0;
  color: #fff;
}

.offer__smoke img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.78;
}

.offer__smoke p {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  padding-top: 1.7em;
}

.offer__regret-copy,
.offer__continue,
.offer__confidence,
.offer__today,
.offer__philosophy,
.offer__uva-strong {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.offer__regret-copy {
  font-size: 18px;
  line-height: 1.9;
}

.offer__future {
  position: relative;
  padding: 80px 20px 50px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 248, 223, 0.2)),
    url("https://shop.kohgendo.com/Contents/ImagesPkg/page/uvcare_supplement/img/intro_bg.webp") center top / cover;
  background-attachment: scroll, fixed;
}

.offer__future::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.offer__future > * {
  position: relative;
  z-index: 1;
}

.offer__continue {
  font-size: 18px;
  line-height: 1.6;
}

.offer__tablet {
  width: 67px;
  margin: 18px auto 20px;
  filter: drop-shadow(0 0 6px #fff);
}

.offer__confidence {
  font-size: var(--txt-strong);
  line-height: 1.45;
}

.offer__package {
  width: 95px;
  margin: 26px auto 28px;
  filter: drop-shadow(4px 4px 13px rgba(0, 0, 0, 0.23));
}

.offer__today {
  position: relative;
  width: min(100%, 500px);
  margin: 0 auto 24px;
  padding-bottom: 9px;
  font-size: 5vw;
  line-height: 1.6;
}

.offer__today::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #c09153;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.8s ease;
}

.offer__today.is-visible::after {
  transform: scaleX(1);
}

.offer__philosophy {
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.9;
}

.offer__uva {
  width: min(100%, 500px);
  margin: 0 auto;
  border: 1px solid #c09153;
  text-align: left;
}

.offer__uva h2 {
  margin: 0;
  padding: 12px 0 10px;
  background-color: #000;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.08em;
}

.offer__uva h2 span {
  display: block;
  font-size: 16px;
}

.offer__uva > p {
  margin: 0;
  padding: 16px 18px 0;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.offer__skin {
  width: min(90%, 500px);
  margin: 24px auto 0;
}

.offer__uv {
  position: absolute;
  top: 0;
  width: 132px;
  text-align: center;
}

.offer__uv strong {
  display: inline-block;
  min-width: 44px;
  margin-bottom: 5px;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.offer__uv span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.offer__uv--uva {
  left: 0;
  color: #d44;
}

.offer__uv--uva strong {
  background-color: #d44;
}

.offer__uv--uvb {
  right: 0;
  color: #5084b4;
}

.offer__uv--uvb strong {
  background-color: #5b9ad4;
}

.offer__cause {
  position: absolute;
  bottom: -8px;
  display: grid;
  place-items: center;
  height: 31px;
  background-color: #000;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.offer__cause--left {
  left: 0;
  width: 143px;
}

.offer__cause--right {
  right: 0;
  width: 133px;
}

.offer__uva .offer__uva-lead {
  padding-top: 48px;
  font-size: 18px;
  line-height: 1.9;
  text-align: center;
}

.offer__uva .offer__uva-strong {
  padding: 0 12px 24px;
  font-size: 1.3rem;
  line-height: 1.6;
  text-align: center;
}

.faq {
  padding: 60px 24px;
  background-color: #fff;
}

.faq__heading {
  margin: 0 0 20px;
  color: #000;
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.05em;
}

.faq__list {
  width: min(100%, 500px);
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid rgba(184, 151, 58, 0.3);
}

.faq__button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__mark {
  width: 28px;
  color: #b8973a;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 20px;
  font-style: italic;
  line-height: 1;
}

.faq__question {
  padding-right: 12px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.faq__icon {
  position: relative;
  width: 20px;
  height: 20px;
  color: #b8973a;
  flex: 0 0 auto;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background-color: currentColor;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.faq__icon::before {
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item.is-open .faq__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.36s ease,
    opacity 0.24s ease;
}

.faq__item.is-open .faq__panel {
  opacity: 1;
}

.faq__answer {
  margin: 0;
  padding: 0 28px 18px;
  color: #3b352f;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.voice {
  --voice-side: clamp(22px, 7.2vw, 68px);
  --voice-photo-size: clamp(92px, 23.8vw, 172px);
  --voice-gap: clamp(14px, 4vw, 32px);
  --voice-list-width: min(100%, 760px);
  --voice-bg: #f2e7d6;
  --voice-text: #202020;
  --voice-gold: #c9964f;
  --voice-shadow: rgba(90, 0, 0, 0.26);

  position: relative;
  overflow: hidden;
  padding: clamp(34px, 8.4vw, 72px) var(--voice-side) clamp(48px, 11vw, 98px);
  background: var(--voice-bg) url("https://shop.kohgendo.com/Contents/ImagesPkg/page/uvcare_supplement/img/voice_back.webp") center top / 100%
    auto no-repeat;
  color: #fff;
}

.voice__header,
.voice__list,
.voice__notes {
  position: relative;
  z-index: 2;
}

.voice__header {
  min-height: auto;
  margin-bottom: clamp(28px, 5.8vw, 52px);
  padding-top: clamp(122px, 20vw, 172px);
}

.voice__heading {
  margin: 0 auto clamp(10px, 2vw, 48px);
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  font-size: clamp(30px, 5.4vw, 48px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
  color: #d90413;
}

.voice__script {
  position: absolute;
  top: clamp(-18px, -1.4vw, 0px);
  left: calc(var(--voice-side) * -0.9);
  width: clamp(260px, 52vw, 480px);
  height: auto;
}

.voice__bow {
  display: none;
}

.voice__satisfaction {
  position: relative;
  z-index: 3;
  width: min(100%, clamp(328px, 91vw, 820px));
  max-width: none;
  height: auto;
  margin: 0 auto;
}

.voice__list {
  display: grid;
  gap: clamp(15px, 1vw, 66px);
  width: var(--voice-list-width);
  margin: 0 auto;
}

.voice__item {
  display: grid;
  grid-template-columns: var(--voice-photo-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--voice-gap);
}

.voice__item--photo-right {
  grid-template-columns: minmax(0, 1fr) var(--voice-photo-size);
}

.voice__photo {
  width: var(--voice-photo-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  object-fit: cover;
  object-position: center top;
}

.voice__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(128px, 28vw, 198px);
  padding: clamp(18px, 4.2vw, 32px) clamp(18px, 4.5vw, 34px);
  border-radius: clamp(14px, 3vw, 22px);
  background-color: #fff;
  /*box-shadow: 0 10px 16px var(--voice-shadow);*/
  color: var(--voice-text);
}

.voice__item--photo-right .voice__bubble {
  min-height: clamp(136px, 31vw, 198px);
}

.voice__bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(18px, 4vw, 32px);
  height: clamp(18px, 4vw, 32px);
  background-color: #fff;
  transform: translateY(-50%) rotate(45deg);
}

.voice__item--photo-left .voice__bubble::before {
  left: clamp(-15px, -2vw, -9px);
}

.voice__item--photo-right .voice__bubble::before {
  right: clamp(-15px, -2vw, -9px);
}

.voice__bubble p {
  margin: 0 0 clamp(8px, 1.7vw, 16px);
  font-size: clamp(14px, 3.35vw, 20px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.voice__bubble span {
  align-self: flex-start;
  min-width: clamp(128px, 28vw, 194px);
  padding: 0 clamp(12px, 2.4vw, 20px);
  border-radius: 999px;
  background-color: var(--voice-gold);
  color: #fff;
  font-size: clamp(15px, 3.15vw, 20px);
  line-height: 1.8;
  letter-spacing: 0.071em;
  text-align: center;
  white-space: nowrap;
}

.voice__notes {
  width: min(100%, 820px);
  margin: clamp(10px, 2.2vw, 8px) auto 0;
  font-size: clamp(11px, 1vw, 16px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  color: #1a1714;
  text-align: center;
}

.voice__notes--bottom {
  width: var(--voice-list-width);
  margin-top: clamp(28px, 5.5vw, 48px);
  font-size: clamp(13px, 1vw, 15px);
}

.voice__notes p {
  margin: 0;
  overflow-wrap: anywhere;
}

.cta {
  --cta-card-width: min(100%, clamp(320px, 87.18vw, 421px));
  --cta-card-pad: clamp(16px, 4.87vw, 24px);

  position: relative;
  overflow: hidden;
  padding: 20px clamp(18px, 6.4vw, 38px) clamp(43px, 12.82vw, 62px);
  background: url("https://shop.kohgendo.com/Contents/ImagesPkg/page/uvcare_supplement/img/cta_bg.webp") center top / 100% 100% no-repeat;
  color: #1a1714;
}

.cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(249px, 90.36vw, 360px);
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  pointer-events: none;
}

.cta__lead {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 484px;
  margin: 0 0 clamp(27px, 20vw, 80px);
  padding-top: 1px;
  text-align: center;
}
/*
.cta__lead::before,
.cta__lead::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: clamp(44px, 13.08vw, 63px);
  background-color: #cdbd76;
  transform-origin: center top;
}

.cta__lead::before {
  bottom: clamp(53px, 15.9vw, 77px);
  transform: translateX(calc(-50% - clamp(52px, 15.64vw, 76px))) rotate(90deg);
}

.cta__lead::after {
  bottom: clamp(24px, 7.18vw, 35px);
  transform: translateX(-50%) rotate(90deg);
}
*/
.cta__achievements {
  width: 100%;
  max-width: none;
  margin: 0 auto clamp(14px, 4.1vw, 20px);
}

.cta__intro {
  position: relative;
  margin: 0;
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

.cta__intro span,
.cta__intro strong {
  display: block;
}

.cta__intro strong {
  width: fit-content;
  margin: 0 auto;
  border-bottom: 1px solid #c09153;
  color: #cd0413;
  font-size: clamp(16px, 4.87vw, 24px);
  font-weight: 700;
}

.cta__header {
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(22px, 6.41vw, 31px);
  color: #f2ede4;
  text-align: center;
}

.cta__brand {
  width: clamp(106px, 31.54vw, 153px);
  max-width: 42%;
  margin: 0 auto clamp(5px, 1.54vw, 7px);
  filter: brightness(0) invert(1);
}

.cta__heading {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  font-size: clamp(19px, 5.64vw, 27px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1px;
}

.cta__card {
  position: relative;
  z-index: 1;
  width: var(--cta-card-width);
  margin: 0 auto;
  padding: clamp(62px, 17.95vw, 86px) var(--cta-card-pad) 0;
  background-color: #fff;
}

.cta__campaign {
  position: absolute;
  top: clamp(-22px, -5.13vw, -17px);
  left: 50%;
  width: calc(100% + clamp(16px, 4.1vw, 20px));
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  transform-origin: center center;
  animation: cta-campaign-pulse 3.2s ease-in-out infinite;
}

.cta__offer {
  margin-bottom: clamp(8px, 2.56vw, 12px);
}

.cta__name {
  margin: 0 0 clamp(14px, 4.1vw, 20px);
  font-size: clamp(13px, 3.85vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}

.cta__offer-price {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.cta__button {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: min(100%, clamp(280px, 83.59vw, 404px));
  max-width: 100%;
  aspect-ratio: 978 / 294;
  margin: 0 auto clamp(17px, 5.13vw, 25px);
  background: url("https://shop.kohgendo.com/Contents/ImagesPkg/page/uvcare_supplement/img/cta_button.webp") center / 100% 100% no-repeat;
  color: #fff;
  font-size: clamp(21px, 6.15vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  letter-spacing: 1px;
  animation: cta-float 3.8s ease-in-out infinite;
}

.cta__campaign-note,
.cta__second-note,
.cta__terms {
  font-size: clamp(10px, 2.82vw, 13px);
  line-height: 1.6;
  letter-spacing: 0;
}

.cta__campaign-note {
  margin: 0 0 clamp(16px, 4.62vw, 22px);
}

.cta__second-price {
  margin: 0 calc(var(--cta-card-pad) * -1);
  padding: clamp(14px, 4.1vw, 20px) var(--cta-card-pad)
    clamp(15px, 4.36vw, 21px);
  background-color: rgba(192, 145, 83, 0.21);
}

.cta__second-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.54vw, 8px);
  margin: 0 0 clamp(7px, 2.05vw, 10px);
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  font-size: clamp(13px, 3.59vw, 20px);
  line-height: 1.4;
  letter-spacing: 1px;
  white-space: nowrap;
}

.cta__second-heading::before,
.cta__second-heading::after {
  content: "";
  width: clamp(22px, 6.15vw, 46px);
  height: 1px;
  background-color: #1a1714;
}

.cta__second-price img {
  width: 100%;
  margin: 0 auto clamp(7px, 2.05vw, 10px);
  border: 1px solid #c09153;
}

.cta__second-note {
  margin: 0;
}

.cta__terms {
  margin: 0 calc(var(--cta-card-pad) * -1);
  padding: clamp(25px, 7.44vw, 36px) var(--cta-card-pad)
    clamp(17px, 5.13vw, 25px);
  background-color: #fff;
}

.cta__terms p {
  margin: 0;
}

.cta__button::before {
  content: "";
  position: absolute;
  top: -35%;
  left: -60%;
  width: 42%;
  height: 170%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.16) 35%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(255, 255, 255, 0.16) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
  animation: cta-shine 5.6s ease-in-out infinite;
}

.cta__details {
  margin: 0 calc(var(--cta-card-pad) * -1);
  padding: clamp(18px, 5.38vw, 26px) var(--cta-card-pad)
    clamp(23px, 6.92vw, 34px);
  background-color: #f3f2f1;
  font-size: 10px;
  line-height: 1.49;
}

.cta__details p {
  margin: 0;
}

@keyframes cta-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes cta-campaign-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.045);
  }
}

@keyframes cta-shine {
  0%,
  54% {
    left: -60%;
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  78% {
    left: 125%;
    opacity: 0;
  }

  100% {
    left: 125%;
    opacity: 0;
  }
}

.intro__copy,
.intro__heading,
.intro__closing,
.problem__lead,
.problem__label,
.problem__message,
.problem__copy,
.problem__closing,
.problem__tags li,
.solution__lead,
.solution__intro,
.solution__dose h3,
.solution__foods p,
.solution__brand,
.solution__box h3,
.solution__card h3,
.solution__card--antioxidant h3,
.solution__card--antioxidant p,
.solution__card b,
.solution__result,
.ingredients__heading,
.ingredients__doctor-profile strong,
.offer__regret-copy,
.offer__philosophy,
.offer__uva h2,
.offer__uva .offer__uva-lead,
.cta__name,
.cta__second-heading {
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, serif;
}

@media screen and (min-width: 881px) {
  .junkoh_lp {
    --txt-strong: 30px;

    background: #7d0a0a url("https://shop.kohgendo.com/Contents/ImagesPkg/page/uvcare_supplement/img/back_red.webp") center top / cover fixed
      no-repeat;
  }

  .kv {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .contents {
    overflow-x: visible;
    box-shadow: 0 0 30px rgba(84, 84, 84, 0.13);
  }

  .cta__lead {
    left: 50%;
    width: 880px;
    max-width: none;
    transform: translateX(-50%);
  }

  .cta__achievements {
    width: 880px;
  }

  .intro__inner {
    padding-top: 70px;
  }

  .intro__photos {
    width: min(100% - 112px, 500px);
    margin: 0;
    /*margin: 0 auto 67px;*/
    gap: 20px;
  }

  .intro__photo {
    height: 100px;
    display: none;
  }

  .problem__lead,
  .problem__label,
  .problem__message {
    font-size: 22px;
  }

  .solution__section-title--uv::before {
    width: 50%;
  }

  .solution__card--antioxidant h3,
  .solution__card--uv h3,
  .solution__card--moisture h3 {
    font-size: 21px;
  }

  .ingredients__doctor {
    margin: 0 20% 40px;
  }

  .ingredients__doctor-ribbon {
    width: calc(100% + 20%);
    margin: 0 -10% 20px;
  }

  .ingredients__shield {
    width: 50%;
  }

  .offer__today {
    font-size: 33px;
  }

  .offer__smoke p {
    padding-top: 2.5em;
  }

  .offer__future {
    padding: 100px 20px 50px;
  }

  .offer__skin {
    width: min(70%, 400px);
  }

  .offer__uva .offer__uva-strong {
    padding: 0 12px 37px;
  }

  .voice__item--photo-left {
    transform: scale(0.8);
    transform-origin: left center;
  }

  .voice__item--photo-left .voice__bubble {
    width: 140%;
  }

  .voice__item--photo-right {
    transform: scale(0.8);
    transform-origin: right center;
  }

  .voice__item--photo-right .voice__bubble {
    width: 140%;
    justify-self: end;
  }
}

@media screen and (max-width: 880px) {
  .junkoh_lp {
    background-color: #fff;
    overflow-x: hidden;
  }

  .contents {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .kv {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .design-frame {
    width: 100%;
    /* max-width: 390px; */
  }

  .intro__inner {
    background-attachment: scroll;
  }

  .cta__lead {
    max-width: none;
  }

  .cta__achievements {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}