/* =========================================================
LUCENT SKIN CLINIC
PREMIUM
========================================================= */


/* =========================================================
RESET
========================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  overflow-x: hidden;

  color: #292824;
  background: #f5f3ef;

  font-family:
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;

  -webkit-font-smoothing: antialiased;
}

body.menu-open,
body.modal-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

figure,
h1,
h2,
h3,
p,
dl,
dd {
  margin-top: 0;
}

address {
  font-style: normal;
}

p,
dd {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}


/* =========================================================
VARIABLES
========================================================= */

:root {
  --bg: #f5f3ef;
  --paper: #faf9f6;
  --soft: #ebe8e2;

  --dark: #292824;
  --dark2: #34322e;

  --gray: #6f6a62;
  --gray2: #9d978d;

  --line: rgba(41, 40, 36, 0.15);
  --line-light: rgba(255, 255, 255, 0.17);

  --serif:
    "Cormorant Garamond",
    serif;

  --jp-serif:
    "Noto Serif JP",
    serif;

  --max: 1340px;
}


/* =========================================================
COMMON
========================================================= */

.section-kicker {
  margin-bottom: 18px;

  color: #817b72;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.24em;
}

.section-kicker-light {
  color: rgba(255, 255, 255, 0.53);
}

.premium-section-index {
  margin-bottom: 16px;

  color: #aaa398;

  font-family: var(--serif);
  font-size: 16px;

  letter-spacing: 0.06em;
}

.editorial-link {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 44px;

  min-width: 170px;

  padding-bottom: 9px;

  border-bottom: 1px solid currentColor;

  font-size: 11px;
}

.editorial-link b {
  font-weight: 400;

  transition:
    transform 0.25s ease;
}

.editorial-link:hover b {
  transform: translate(4px, -4px);
}

.display-heading {
  margin-bottom: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(38px, 4.5vw, 64px);

  font-weight: 400;
  line-height: 1.45;
}

.heading-line {
  display: block;

  width: max-content;
  max-width: 100%;

  white-space: nowrap;
}

.body-copy {
  color: var(--gray);

  font-size: 13px;
  line-height: 2.1;
}

.section-top {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;
}

.text-link {
  display: inline-flex;

  align-items: center;

  gap: 30px;

  padding-bottom: 7px;

  border-bottom: 1px solid currentColor;

  font-size: 11px;
}

.button-dark {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  min-width: 175px;
  min-height: 55px;

  padding-inline: 20px;

  color: #fff;
  background: var(--dark);

  font-size: 10px;
}


/* =========================================================
REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.image-reveal {
  position: relative;

  overflow: hidden;
}

.image-reveal::after {
  position: absolute;
  z-index: 5;

  inset: 0;

  background: var(--bg);

  content: "";

  transform-origin: top;

  transition:
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-reveal.is-visible::after {
  transform: scaleY(0);
}

.image-reveal img {
  transform: scale(1.04);

  transition:
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-reveal.is-visible img {
  transform: scale(1);
}


/* =========================================================
HEADER
========================================================= */

.site-header {
  position: fixed;
  z-index: 1000;

  top: 0;
  right: 0;
  left: 0;

  display: grid;

  grid-template-columns:
    minmax(190px, 1fr)
    auto
    minmax(230px, 1fr);

  align-items: center;

  height: 84px;

  padding-inline:
    clamp(24px, 3.4vw, 58px);

  transition:
    color 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease;
}

.home .site-header:not(.is-scrolled) {
  color: #fff;
}

.site-header.is-scrolled,
.subpage .site-header {
  color: var(--dark);

  background:
    rgba(245, 243, 239, 0.93);

  border-bottom:
    1px solid rgba(41, 40, 36, 0.08);

  backdrop-filter: blur(18px);
}

.site-logo {
  display: inline-flex;

  justify-self: start;

  flex-direction: column;

  line-height: 1;
}

.logo-main {
  font-family: var(--serif);

  font-size: 27px;
  font-weight: 500;

  letter-spacing: 0.14em;
}

.logo-sub {
  margin-top: 5px;

  font-size: 6px;

  letter-spacing: 0.28em;
}

.desktop-nav {
  display: flex;

  align-items: center;

  gap:
    clamp(20px, 2.2vw, 37px);
}

.desktop-nav a {
  position: relative;

  font-size: 10px;

  white-space: nowrap;
}

.desktop-nav a::after {
  position: absolute;

  right: 0;
  bottom: -10px;
  left: 0;

  height: 1px;

  background: currentColor;

  content: "";

  transform: scaleX(0);

  transition:
    transform 0.25s ease;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;

  justify-self: end;

  align-items: center;

  gap: 20px;
}

.header-first {
  font-size: 9px;

  white-space: nowrap;
}

.header-reserve {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 40px;

  min-width: 150px;
  height: 46px;

  padding-inline: 18px;

  color: var(--dark);
  background: #fff;

  font-size: 9px;

  white-space: nowrap;
}

.site-header.is-scrolled .header-reserve,
.subpage .header-reserve {
  color: #fff;
  background: var(--dark);
}

.menu-button {
  display: none;

  position: relative;

  width: 42px;
  height: 42px;

  padding: 0;

  background: transparent;

  border: 0;

  cursor: pointer;
}

.menu-button span {
  position: absolute;

  left: 8px;

  width: 26px;
  height: 1px;

  background: currentColor;

  transition:
    transform 0.3s ease,
    top 0.3s ease;
}

.menu-button span:first-child {
  top: 17px;
}

.menu-button span:last-child {
  top: 24px;
}

.menu-button.is-active span:first-child {
  top: 21px;

  transform: rotate(45deg);
}

.menu-button.is-active span:last-child {
  top: 21px;

  transform: rotate(-45deg);
}


/* =========================================================
MOBILE MENU
========================================================= */

.mobile-menu {
  position: fixed;
  z-index: 950;

  inset: 0;

  display: grid;

  place-items: center;

  visibility: hidden;

  color: #fff;
  background: #272622;

  opacity: 0;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
}

.mobile-menu-inner {
  width:
    min(100% - 44px, 520px);
}

.mobile-menu-label {
  display: block;

  margin-bottom: 30px;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 8px;

  letter-spacing: 0.24em;
}

.mobile-menu nav {
  display: flex;

  flex-direction: column;
}

.mobile-menu nav a {
  padding: 13px 0;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.13);

  font-family: var(--jp-serif);

  font-size: 22px;
}

.mobile-reserve {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 58px;

  margin-top: 40px;

  padding-inline: 20px;

  color: var(--dark);
  background: #fff;

  font-size: 10px;
}


/* =========================================================
HERO
========================================================= */

.premium-hero {
  position: relative;

  min-height: 760px;
  height: 100svh;

  overflow: hidden;

  color: #fff;
  background: #292824;
}

.premium-hero-media {
  position: absolute;

  inset: 0;
}

.premium-hero-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.045);

  animation:
    heroImage 2.2s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

@keyframes heroImage {
  to {
    transform: scale(1);
  }
}

.premium-hero-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(24, 23, 21, 0.61) 0%,
      rgba(24, 23, 21, 0.27) 48%,
      rgba(24, 23, 21, 0.06) 100%
    );
}

.hero-brand-line {
  position: absolute;
  z-index: 3;

  top: 135px;
  right:
    clamp(30px, 4vw, 64px);

  display: flex;

  align-items: center;

  gap: 17px;

  font-size: 7px;

  letter-spacing: 0.23em;

  writing-mode: vertical-rl;
}

.hero-brand-line i {
  width: 1px;
  height: 66px;

  background:
    rgba(255, 255, 255, 0.38);
}

.premium-hero-copy {
  position: absolute;
  z-index: 3;

  top: 52%;
  left:
    clamp(28px, 7vw, 118px);

  width:
    min(770px, calc(100% - 60px));

  transform:
    translateY(-45%);
}

.hero-copy-index {
  margin-bottom: 18px;

  color:
    rgba(255, 255, 255, 0.55);

  font-family: var(--serif);

  font-size: 15px;
}

.hero-eyebrow {
  margin-bottom: 21px;

  font-size: 8px;

  letter-spacing: 0.24em;
}

.premium-hero h1 {
  margin-bottom: 32px;

  font-family: var(--jp-serif);

  font-size:
    clamp(42px, 4.8vw, 70px);

  font-weight: 400;

  line-height: 1.48;

  letter-spacing: -0.015em;
}

.premium-hero h1 span {
  display: block;

  width: max-content;
  max-width: 100%;

  white-space: nowrap;
}

.hero-description {
  max-width: 550px;

  margin-bottom: 34px;

  color:
    rgba(255, 255, 255, 0.8);

  font-size: 11.5px;

  line-height: 2;
}

.hero-actions {
  display: flex;

  align-items: center;

  gap: 12px;
}

.hero-primary {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 190px;
  height: 58px;

  padding-inline: 20px;

  color: var(--dark);
  background: #fff;

  font-size: 10px;
}

.hero-primary b {
  font-weight: 400;
}

.hero-secondary {
  display: flex;

  align-items: center;

  min-height: 58px;

  padding-inline: 20px;

  border:
    1px solid rgba(255, 255, 255, 0.42);

  font-size: 10px;
}

.hero-reveal {
  opacity: 0;

  transform: translateY(20px);

  animation:
    heroReveal
    0.9s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.hero-copy-index {
  animation-delay: 0.35s;
}

.hero-eyebrow {
  animation-delay: 0.46s;
}

.premium-hero h1 {
  animation-delay: 0.57s;
}

.hero-description {
  animation-delay: 0.7s;
}

.hero-actions {
  animation-delay: 0.84s;
}

.hero-bottom {
  position: absolute;
  z-index: 3;

  right:
    clamp(28px, 4vw, 60px);

  bottom: 30px;

  display: flex;

  gap: 50px;

  animation-delay: 0.97s;
}

.hero-bottom div {
  display: flex;

  flex-direction: column;
}

.hero-bottom span {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 6px;

  letter-spacing: 0.22em;
}

.hero-bottom strong {
  margin-top: 3px;

  font-size: 9px;
  font-weight: 400;
}

.hero-scroll {
  position: absolute;
  z-index: 3;

  bottom: 30px;
  left:
    clamp(28px, 4vw, 60px);

  display: flex;

  align-items: center;

  gap: 13px;

  font-size: 6px;

  letter-spacing: 0.22em;
}

.hero-scroll i {
  position: relative;

  width: 70px;
  height: 1px;

  overflow: hidden;

  background:
    rgba(255, 255, 255, 0.28);
}

.hero-scroll i::after {
  position: absolute;

  inset: 0;

  background: #fff;

  content: "";

  animation:
    scrollLine 2s ease infinite;
}

@keyframes scrollLine {
  0% {
    transform: translateX(-100%);
  }

  55%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
APPROACH
========================================================= */

.premium-approach {
  position: relative;

  overflow: hidden;

  padding:
    160px
    max(
      44px,
      calc((100vw - var(--max)) / 2)
    );
}

.approach-watermark {
  position: absolute;

  top: 4px;
  left: 14%;

  color:
    rgba(41, 40, 36, 0.021);

  font-family: var(--serif);

  font-size:
    clamp(150px, 19vw, 310px);

  line-height: 1;

  letter-spacing: -0.04em;

  pointer-events: none;
}

.approach-layout {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 570px)
    minmax(0, 1fr)
    58px;

  gap:
    clamp(72px, 6.5vw, 105px);

  align-items: start;
}

.approach-copy {
  padding-top: 70px;
}

.approach-heading {
  margin-bottom: 42px;

  font-family: var(--jp-serif);

  font-size:
    clamp(40px, 3.25vw, 53px);

  font-weight: 400;

  line-height: 1.56;

  letter-spacing: -0.012em;
}

.approach-heading span {
  display: block;

  width: max-content;
  max-width: 100%;

  white-space: nowrap;
}

.approach-body {
  max-width: 550px;

  margin-bottom: 45px;
}

.approach-body p {
  margin-bottom: 17px;

  color: #666159;

  font-size: 13.5px;

  line-height: 2.12;
}

.approach-visual {
  height: 720px;

  margin: 0;
}

.approach-visual img {
  height: 100%;

  object-fit: cover;
}

.approach-visual figcaption {
  display: flex;

  justify-content: space-between;

  padding-top: 11px;

  color: #928c83;

  font-size: 7px;

  letter-spacing: 0.16em;
}

.approach-side-data {
  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 15px;

  padding-top: 74px;

  writing-mode: vertical-rl;
}

.approach-side-data span {
  color: #928c83;

  font-size: 7px;

  letter-spacing: 0.24em;
}

.approach-side-data strong {
  font-family: var(--serif);

  font-size: 25px;
  font-weight: 400;
}

.approach-side-data p {
  margin: 0;

  color: #aaa39a;

  font-size: 7px;
}


/* =========================================================
CONCERNS
========================================================= */

.skin-map-section {
  padding:
    145px
    max(
      44px,
      calc((100vw - var(--max)) / 2)
    );

  background: #ebe8e2;
}

.skin-map-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;

  margin-bottom: 90px;
}

.skin-map-head h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(42px, 4.3vw, 62px);

  font-weight: 400;
}

.skin-map-head > p {
  max-width: 330px;

  margin: 0;

  color: var(--gray);

  font-size: 11px;
}

.skin-map-layout {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.65fr)
    minmax(430px, 1.25fr)
    minmax(260px, 0.8fr);

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.skin-map-nav {
  padding:
    30px 30px 30px 0;

  border-right: 1px solid var(--line);
}

.skin-concern {
  display: grid;

  grid-template-columns:
    37px 1fr;

  width: 100%;

  padding: 19px 0;

  text-align: left;

  background: transparent;

  border: 0;
  border-bottom: 1px solid var(--line);

  cursor: pointer;
}

.skin-concern span {
  grid-row: 1 / 3;

  color: var(--gray2);

  font-family: var(--serif);

  font-size: 12px;
}

.skin-concern strong {
  font-family: var(--jp-serif);

  font-size: 18px;
  font-weight: 400;

  transition:
    transform 0.25s ease;
}

.skin-concern small {
  color: var(--gray2);

  font-size: 6px;

  letter-spacing: 0.18em;
}

.skin-concern:hover strong,
.skin-concern.is-active strong {
  transform: translateX(8px);
}

.skin-map-board {
  position: relative;

  min-height: 650px;

  overflow: hidden;

  border-right: 1px solid var(--line);
}

.skin-map-coordinate {
  position: absolute;
  z-index: 3;

  color: #8f887e;

  font-size: 6px;

  letter-spacing: 0.18em;
}

.coordinate-top {
  top: 18px;
  left: 18px;
}

.coordinate-bottom {
  right: 18px;
  bottom: 18px;
}

.skin-map-face {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 280px;
  height: 390px;

  transform:
    translate(-50%, -50%);
}

.face-outline {
  position: absolute;

  inset: 0;

  border:
    1px solid rgba(41, 40, 36, 0.28);

  border-radius:
    48% 48% 44% 44% /
    35% 35% 58% 58%;
}

.face-outline::before,
.face-outline::after {
  position: absolute;

  top: 43%;

  width: 52px;
  height: 1px;

  background:
    rgba(41, 40, 36, 0.2);

  content: "";
}

.face-outline::before {
  left: 51px;
}

.face-outline::after {
  right: 51px;
}

.face-line {
  position: absolute;

  left: 50%;

  border:
    1px solid rgba(41, 40, 36, 0.11);

  border-radius: 50%;

  transform:
    translateX(-50%);
}

.face-line-1 {
  top: 50px;

  width: 190px;
  height: 280px;
}

.face-line-2 {
  top: 92px;

  width: 140px;
  height: 195px;
}

.face-line-3 {
  top: 30%;

  width: 1px;
  height: 48%;

  border: 0;

  border-left:
    1px dashed rgba(41, 40, 36, 0.2);
}

.face-point {
  position: absolute;
  z-index: 5;

  width: 11px;
  height: 11px;

  border:
    1px solid var(--dark);

  border-radius: 50%;

  background: #ebe8e2;

  box-shadow:
    0 0 0 5px rgba(41, 40, 36, 0.05);

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.face-point.is-active {
  background: var(--dark);

  transform: scale(1.25);
}

.face-point-1 {
  top: 85px;
  left: 80px;
}

.face-point-2 {
  top: 155px;
  right: 75px;
}

.face-point-3 {
  bottom: 110px;
  left: 86px;
}

.face-point-4 {
  top: 150px;
  left: 58px;
}

.face-point-5 {
  right: 70px;
  bottom: 52px;
}

.skin-map-result {
  display: flex;

  justify-content: center;

  flex-direction: column;

  padding:
    55px 0 55px 45px;
}

.skin-result-number {
  margin-bottom: 50px;

  color: #aaa398;

  font-family: var(--serif);

  font-size: 22px;
}

.skin-result-en {
  margin-bottom: 6px;

  color: var(--gray);

  font-size: 7px;

  letter-spacing: 0.18em;
}

.skin-map-result h3 {
  margin-bottom: 22px;

  font-family: var(--jp-serif);

  font-size:
    clamp(28px, 2.5vw, 39px);

  font-weight: 400;
}

.skin-result-description {
  max-width: 300px;

  margin-bottom: 40px;

  color: var(--gray);

  font-size: 11px;

  line-height: 2;
}

.skin-result-treatments {
  margin-bottom: 45px;
}

.skin-result-treatments > span {
  display: block;

  margin-bottom: 7px;

  color: var(--gray2);

  font-size: 7px;

  letter-spacing: 0.17em;
}

.skin-result-treatments a {
  display: flex;

  justify-content: space-between;

  padding: 10px 0;

  border-bottom: 1px solid var(--line);

  font-family: var(--serif);

  font-size: 18px;
}

.skin-result-treatments b {
  font-size: 10px;
  font-weight: 400;
}


/* =========================================================
TOP TREATMENT
========================================================= */

.treatment-preview {
  padding:
    150px
    max(
      44px,
      calc((100vw - var(--max)) / 2)
    );
}

.treatment-preview-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 95px;
}

.treatment-preview-head h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(42px, 4.3vw, 62px);

  font-weight: 400;
}

.featured-treatments {
  display: grid;

  grid-template-columns:
    1.1fr 0.9fr;

  gap:
    clamp(35px, 5vw, 75px);

  align-items: start;
}

.featured-treatment {
  display: block;
}

.featured-treatment-image {
  position: relative;

  height: 670px;

  margin: 0;

  overflow: hidden;
}

.featured-treatment-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.8s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-treatment:hover
.featured-treatment-image img {
  transform: scale(1.025);
}

.featured-treatment-offset {
  margin-top: 130px;
}

.featured-treatment-offset
.featured-treatment-image {
  height: 550px;
}

.treatment-photo-index {
  position: absolute;

  right: 14px;
  bottom: 14px;

  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  color: #fff;

  border:
    1px solid rgba(255, 255, 255, 0.42);

  border-radius: 50%;

  background:
    rgba(32, 31, 29, 0.16);

  font-family: var(--serif);

  font-size: 10px;

  backdrop-filter: blur(8px);
}

.featured-treatment-meta {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding-top: 22px;
}

.featured-treatment-meta > div > span {
  display: block;

  margin-bottom: 6px;

  color: var(--gray2);

  font-size: 7px;

  letter-spacing: 0.18em;
}

.featured-treatment-meta h3 {
  margin-bottom: 4px;

  font-family: var(--serif);

  font-size:
    clamp(40px, 4.6vw, 66px);

  font-weight: 400;

  line-height: 0.95;
}

.featured-treatment-meta p {
  margin: 0;

  color: var(--gray);

  font-size: 10px;
}

.featured-treatment-meta > b {
  padding-bottom: 8px;

  font-size: 15px;
  font-weight: 400;

  transition:
    transform 0.25s ease;
}

.featured-treatment:hover
.featured-treatment-meta > b {
  transform:
    translate(4px, -4px);
}

.treatment-simple-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top: 110px;

  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.simple-treatment {
  display: grid;

  grid-template-columns:
    1fr auto;

  min-height: 225px;

  padding: 25px;

  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  transition:
    background 0.3s ease;
}

.simple-treatment:hover {
  background:
    rgba(41, 40, 36, 0.035);
}

.simple-treatment > span {
  color: var(--gray2);

  font-family: var(--serif);

  font-size: 13px;
}

.simple-treatment > b {
  justify-self: end;

  font-size: 11px;
  font-weight: 400;

  transition:
    transform 0.25s ease;
}

.simple-treatment:hover > b {
  transform:
    translate(4px, -4px);
}

.simple-treatment > div {
  grid-column: 1 / 3;

  align-self: end;
}

.simple-treatment small {
  display: block;

  margin-bottom: 4px;

  color: var(--gray2);

  font-size: 6px;

  letter-spacing: 0.17em;
}

.simple-treatment strong {
  display: block;

  font-family: var(--serif);

  font-size: 27px;
  font-weight: 400;
}

.simple-treatment p {
  margin: 3px 0 0;

  color: var(--gray);

  font-size: 9px;
}


/* =========================================================
ANALYSIS
========================================================= */

.analysis-premium {
  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(470px, 0.88fr);

  min-height: 850px;

  color: #fff;
  background: #292824;
}

.analysis-photo {
  position: relative;

  min-height: 850px;

  margin: 0;

  overflow: hidden;
}

.analysis-photo::after {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(24, 23, 21, 0.08),
      rgba(24, 23, 21, 0.25)
    );

  content: "";
}

.analysis-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.analysis-photo figcaption {
  position: absolute;
  z-index: 2;

  right: 18px;
  bottom: 16px;
  left: 18px;

  display: flex;

  justify-content: space-between;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 6px;

  letter-spacing: 0.18em;
}

.analysis-content {
  display: flex;

  justify-content: center;

  flex-direction: column;

  min-width: 0;

  padding:
    clamp(55px, 5.5vw, 92px);
}

.analysis-content h2 {
  margin-bottom: 30px;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.2vw, 49px);

  font-weight: 400;

  line-height: 1.58;

  letter-spacing: -0.01em;
}

.analysis-content h2 span {
  display: block;

  width: max-content;
  max-width: 100%;

  white-space: nowrap;
}

.analysis-lead {
  max-width: 440px;

  margin-bottom: 55px;

  color:
    rgba(255, 255, 255, 0.67);

  font-size: 11.5px;

  line-height: 2;
}

.analysis-check-list {
  border-top:
    1px solid rgba(255, 255, 255, 0.18);
}

.analysis-check {
  display: grid;

  grid-template-columns:
    45px 1fr;

  gap: 20px;

  padding: 19px 0;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.13);
}

.analysis-check > span {
  color:
    rgba(255, 255, 255, 0.34);

  font-family: var(--serif);

  font-size: 12px;
}

.analysis-check strong {
  display: block;

  margin-bottom: 4px;

  font-family: var(--jp-serif);

  font-size: 17px;
  font-weight: 400;
}

.analysis-check p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.52);

  font-size: 9px;

  line-height: 1.8;
}

.analysis-note {
  max-width: 450px;

  margin:
    27px 0 0;

  color:
    rgba(255, 255, 255, 0.38);

  font-size: 8px;

  line-height: 1.9;
}


/* =========================================================
CONSULTATION
========================================================= */

.consultation-editorial {
  position: relative;

  min-height: 900px;

  overflow: hidden;
}

.consultation-image {
  position: absolute;

  inset: -8% 0;
}

.consultation-image img {
  width: 100%;
  height: 116%;

  object-fit: cover;
}

.consultation-editorial::after {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(24, 23, 21, 0.1),
      rgba(24, 23, 21, 0.02)
    );

  content: "";
}

.consultation-panel {
  position: relative;
  z-index: 3;

  top: 150px;

  width:
    min(590px, calc(100% - 40px));

  margin-left:
    max(
      40px,
      calc((100vw - var(--max)) / 2)
    );

  padding:
    85px 70px;

  color: var(--dark);

  background:
    rgba(247, 245, 241, 0.94);
}

.consultation-panel h2 {
  margin-bottom: 35px;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.3vw, 48px);

  font-weight: 400;

  line-height: 1.55;
}

.consultation-panel > p {
  color: var(--gray);

  font-size: 11px;

  line-height: 2;
}

.consultation-points {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 38px;
}

.consultation-points span {
  padding:
    8px 11px;

  border: 1px solid var(--line);

  font-size: 6px;

  letter-spacing: 0.15em;
}


/* =========================================================
TOP CASES
========================================================= */

.case-premium {
  padding:
    150px
    max(
      44px,
      calc((100vw - var(--max)) / 2)
    );

  background: var(--paper);
}

.case-premium-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 70px;

  margin-bottom: 80px;
}

.case-premium-head h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(42px, 4.3vw, 62px);

  font-weight: 400;
}

.case-head-side {
  max-width: 340px;
}

.case-head-side > p {
  margin-bottom: 25px;

  color: var(--gray);

  font-size: 10px;
}

.case-slider-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 34px;
}

.before-after {
  position: relative;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: #d8d3ca;

  cursor: ew-resize;

  user-select: none;
  touch-action: none;
}

.before-image,
.after-layer img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.before-image {
  position: absolute;

  inset: 0;
}

.after-layer {
  position: absolute;

  top: 0;
  left: 0;

  width: 50%;
  height: 100%;

  overflow: hidden;
}

.after-layer img {
  position: absolute;

  top: 0;
  left: 0;

  max-width: none;
}

.ba-label {
  position: absolute;
  z-index: 5;

  top: 14px;

  padding:
    7px 10px;

  color: #fff;

  background:
    rgba(38, 37, 34, 0.5);

  font-size: 6px;

  letter-spacing: 0.16em;
}

.ba-before {
  right: 14px;
}

.ba-after {
  left: 14px;
}

.ba-handle {
  position: absolute;
  z-index: 6;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 1px;

  background:
    rgba(255, 255, 255, 0.96);

  transform:
    translateX(-50%);
}

.ba-handle button {
  position: absolute;

  top: 50%;
  left: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  color: var(--dark);

  background:
    rgba(255, 255, 255, 0.95);

  cursor: ew-resize;

  transform:
    translate(-50%, -50%);
}

.premium-case-meta {
  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap: 35px;

  padding-top: 24px;
}

.premium-case-meta > div > span {
  display: block;

  margin-bottom: 8px;

  color: var(--gray2);

  font-size: 7px;

  letter-spacing: 0.18em;
}

.premium-case-meta h3 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size: 24px;
  font-weight: 400;
}

.premium-case-meta dl {
  margin: 0;

  border-top: 1px solid var(--line);
}

.premium-case-meta dl > div {
  display: grid;

  grid-template-columns:
    95px 1fr;

  padding: 8px 0;

  border-bottom: 1px solid var(--line);
}

.premium-case-meta dt {
  color: var(--gray2);

  font-size: 6px;
}

.premium-case-meta dd {
  margin: 0;

  font-size: 9px;
}

.case-disclaimer {
  margin:
    30px 0 0;

  color: var(--gray2);

  font-size: 7px;
}


/* =========================================================
DOCTOR
========================================================= */

.doctor-editorial {
  padding:
    160px
    max(
      44px,
      calc((100vw - var(--max)) / 2)
    );
}

.doctor-editorial-grid {
  display: grid;

  grid-template-columns:
    105px
    minmax(390px, 0.82fr)
    minmax(420px, 1.18fr);

  gap:
    clamp(50px, 5vw, 90px);

  align-items: center;
}

.doctor-title-column {
  align-self: stretch;

  padding-top: 8px;

  border-right: 1px solid var(--line);
}

.doctor-vertical {
  margin:
    70px 0 0;

  color:
    rgba(41, 40, 36, 0.14);

  font-family: var(--serif);

  font-size: 47px;

  line-height: 0.9;

  writing-mode: vertical-rl;
}

.doctor-editorial-portrait {
  height: 740px;

  margin: 0;
}

.doctor-editorial-portrait img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.doctor-editorial-copy {
  min-width: 0;
  max-width: 610px;
}

.doctor-position {
  margin-bottom: 17px;

  color: var(--gray2);

  font-size: 7px;

  letter-spacing: 0.2em;
}

.doctor-editorial-copy h2 {
  margin-bottom: 45px;

  font-family: var(--jp-serif);

  font-size:
    clamp(32px, 3.1vw, 46px);

  font-weight: 400;

  line-height: 1.58;
}

.doctor-editorial-copy h2 span {
  display: block;

  width: max-content;
  max-width: 100%;

  white-space: nowrap;
}

.doctor-name-large {
  display: flex;

  align-items: baseline;

  gap: 14px;

  margin-bottom: 35px;
}

.doctor-name-large span {
  font-size: 9px;
}

.doctor-name-large strong {
  font-family: var(--jp-serif);

  font-size: 27px;
  font-weight: 400;
}

.doctor-name-large small {
  color: var(--gray2);

  font-size: 7px;

  letter-spacing: 0.18em;
}

.doctor-editorial-copy
> p:not(.doctor-position) {
  max-width: 490px;

  margin-bottom: 30px;

  color: var(--gray);

  font-size: 11.5px;

  line-height: 2.05;
}

.doctor-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 38px;
}

.doctor-tags span {
  padding:
    7px 10px;

  border: 1px solid var(--line);

  color: var(--gray);

  font-size: 6px;

  letter-spacing: 0.16em;
}

.doctor-consultation-wide {
  position: relative;

  width: 72%;
  height: 520px;

  margin:
    130px 0 0 auto;
}

.doctor-consultation-wide img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.doctor-consultation-wide figcaption {
  position: absolute;

  right: 15px;
  bottom: 13px;
  left: 15px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 6px;

  letter-spacing: 0.18em;
}


/* =========================================================
FIRST VISIT TOP
========================================================= */

.premium-flow {
  padding:
    150px
    max(
      44px,
      calc((100vw - var(--max)) / 2)
    );

  background: #ebe8e2;
}

.premium-flow-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 115px;
}

.premium-flow-head h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(42px, 4.3vw, 62px);

  font-weight: 400;
}

.flow-track {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 30px;

  padding-top: 60px;
}

.flow-line {
  position: absolute;

  top: 19px;
  right: 0;
  left: 0;

  height: 1px;

  overflow: hidden;

  background:
    rgba(41, 40, 36, 0.16);
}

.flow-line-progress {
  display: block;

  width: 0;
  height: 100%;

  background: var(--dark);
}

.flow-step {
  position: relative;

  min-height: 250px;
}

.flow-dot {
  position: absolute;

  top: -50px;
  left: 0;

  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  border:
    1px solid rgba(41, 40, 36, 0.26);

  border-radius: 50%;

  background: #ebe8e2;
}

.flow-dot span {
  font-family: var(--serif);

  font-size: 11px;
}

.flow-step-body {
  padding-top: 15px;
}

.flow-step small {
  display: block;

  margin-bottom: 17px;

  color: #837c72;

  font-family: var(--serif);

  font-size: 13px;

  letter-spacing: 0.08em;
}

.flow-step h3 {
  margin-bottom: 16px;

  font-family: var(--jp-serif);

  font-size:
    clamp(19px, 1.65vw, 24px);

  font-weight: 400;

  line-height: 1.55;
}

.flow-step p {
  max-width: 195px;

  margin: 0;

  color: var(--gray);

  font-size: 11.5px;

  line-height: 1.9;
}


/* =========================================================
CLINIC TOP
========================================================= */

.clinic-editorial {
  padding:
    150px
    max(
      44px,
      calc((100vw - var(--max)) / 2)
    );
}

.clinic-editorial-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 80px;
}

.clinic-editorial-head h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(42px, 4.3vw, 62px);

  font-weight: 400;
}

.clinic-gallery-premium {
  display: grid;

  grid-template-columns:
    1.25fr 0.75fr;

  grid-template-rows:
    410px 330px;

  gap: 18px;
}

.clinic-gallery-premium figure {
  position: relative;

  margin: 0;

  overflow: hidden;
}

.clinic-gallery-premium img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.clinic-gallery-main {
  grid-row:
    1 / 3;
}

.clinic-gallery-detail {
  grid-column: 2;
  grid-row: 1;
}

.clinic-gallery-room {
  grid-column: 2;
  grid-row: 2;
}

.clinic-gallery-premium figcaption {
  position: absolute;

  right: 14px;
  bottom: 12px;
  left: 14px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 6px;

  letter-spacing: 0.17em;
}

.clinic-gallery-premium
figcaption strong {
  font-weight: 400;
}


/* =========================================================
ACCESS TOP
========================================================= */

.premium-access {
  display: grid;

  grid-template-columns:
    minmax(520px, 0.9fr)
    minmax(0, 1.1fr);

  background: var(--paper);
}

.premium-access-main {
  display: flex;

  justify-content: center;

  flex-direction: column;

  min-width: 0;

  padding:
    clamp(55px, 5.5vw, 90px);
}

.premium-access-main h2 {
  margin-bottom: 52px;

  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3vw, 46px);

  font-weight: 400;

  line-height: 1.45;

  white-space: nowrap;
}

.access-clinic-name {
  margin-bottom: 16px;

  font-family: var(--serif);

  font-size: 21px;

  letter-spacing: 0.08em;
}

.premium-access-main address {
  margin-bottom: 40px;

  color: var(--gray);

  font-size: 11px;

  line-height: 2;
}

.premium-access-main dl {
  margin:
    0 0 40px;

  border-top: 1px solid var(--line);
}

.premium-access-main dl > div {
  display: grid;

  grid-template-columns:
    100px 1fr;

  padding: 10px 0;

  border-bottom: 1px solid var(--line);
}

.premium-access-main dt {
  color: var(--gray2);

  font-size: 7px;

  letter-spacing: 0.15em;
}

.premium-access-main dd {
  margin: 0;

  font-size: 10px;
}

.premium-access-map {
  min-height: 720px;
}

.premium-access-map iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  filter:
    grayscale(0.28)
    saturate(0.62);
}


/* =========================================================
TOP RESERVATION
========================================================= */

.premium-reservation {
  position: relative;

  min-height: 650px;

  overflow: hidden;

  color: #fff;
  background: #292824;
}

.reservation-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    80px
    1fr
    330px;

  align-items: center;

  gap: 60px;

  width:
    min(calc(100% - 88px), var(--max));

  min-height: 650px;

  margin-inline: auto;
}

.reservation-number {
  align-self: start;

  padding-top: 110px;

  color:
    rgba(255, 255, 255, 0.35);

  font-family: var(--serif);

  font-size: 16px;
}

.reservation-copy
> p:first-child {
  margin-bottom: 20px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 7px;

  letter-spacing: 0.23em;
}

.reservation-copy h2 {
  margin-bottom: 28px;

  font-family: var(--jp-serif);

  font-size:
    clamp(44px, 5vw, 70px);

  font-weight: 400;

  line-height: 1.48;
}

.reservation-copy h2 span {
  display: block;

  width: max-content;

  white-space: nowrap;
}

.reservation-description {
  color:
    rgba(255, 255, 255, 0.59);

  font-size: 10px;
}

.reservation-circle {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 270px;
  height: 270px;

  padding:
    0 47px;

  border:
    1px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  transition:
    color 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease;
}

.reservation-circle:hover {
  color: var(--dark);
  background: #fff;

  transform: scale(0.97);
}

.reservation-circle span {
  font-size: 11px;
}

.reservation-circle b {
  font-size: 14px;
  font-weight: 400;
}

.reservation-word {
  position: absolute;

  right: -20px;
  bottom: -75px;

  color:
    rgba(255, 255, 255, 0.027);

  font-family: var(--serif);

  font-size:
    clamp(160px, 25vw, 380px);

  line-height: 1;
}


/* =========================================================
FOOTER
========================================================= */

.site-footer {
  padding:
    75px
    max(
      30px,
      calc((100vw - var(--max)) / 2)
    )
    27px;

  background: #ebe8e2;
}

.footer-top {
  display: flex;

  justify-content: space-between;

  gap: 50px;

  padding-bottom: 65px;
}

.footer-logo {
  display: flex;

  flex-direction: column;
}

.footer-logo strong {
  font-family: var(--serif);

  font-size: 36px;
  font-weight: 500;

  letter-spacing: 0.13em;
}

.footer-logo span {
  margin-top: 5px;

  font-size: 6px;

  letter-spacing: 0.28em;
}

.footer-nav {
  display: grid;

  grid-template-columns:
    repeat(2, auto);

  gap:
    10px 45px;
}

.footer-nav a {
  color: var(--gray);

  font-size: 9px;
}

.footer-bottom {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-top: 20px;

  border-top: 1px solid var(--line);
}

.footer-bottom p {
  margin: 0;

  color: var(--gray2);

  font-size: 7px;
}


/* =========================================================
MODAL
========================================================= */

.demo-modal {
  position: fixed;
  z-index: 3000;

  inset: 0;

  display: grid;

  place-items: center;

  visibility: hidden;

  padding: 20px;

  opacity: 0;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.demo-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.demo-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(25, 24, 22, 0.72);

  backdrop-filter: blur(8px);
}

.demo-modal-panel {
  position: relative;
  z-index: 2;

  width:
    min(100%, 480px);

  padding: 50px;

  background: var(--paper);
}

.demo-modal-panel > span {
  display: block;

  margin-bottom: 13px;

  color: var(--gray2);

  font-size: 7px;

  letter-spacing: 0.2em;
}

.demo-modal-panel h2 {
  margin-bottom: 17px;

  font-family: var(--serif);

  font-size: 45px;
  font-weight: 400;
}

.demo-modal-panel p {
  color: var(--gray);

  font-size: 11px;
}

.demo-modal-close {
  position: absolute;

  top: 13px;
  right: 13px;

  width: 36px;
  height: 36px;

  background: transparent;

  border: 1px solid var(--line);

  cursor: pointer;
}

.demo-modal-button {
  width: 100%;

  min-height: 51px;

  margin-top: 16px;

  color: #fff;
  background: var(--dark);

  border: 0;

  cursor: pointer;
}


/* =========================================================
SUBPAGE HERO
========================================================= */

.subpage {
  padding-top: 84px;
}

.sub-hero {
  position: relative;

  display: flex;

  min-height: 500px;

  align-items: flex-end;

  padding:
    80px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    )
    75px;

  overflow: hidden;

  border-bottom: 1px solid var(--line);
}

.sub-hero-index {
  position: absolute;

  right:
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );

  bottom: -34px;

  color:
    rgba(38, 37, 34, 0.04);

  font-family: var(--serif);

  font-size:
    clamp(180px, 25vw, 380px);

  line-height: 1;
}

.sub-hero-copy {
  position: relative;
  z-index: 2;
}

.sub-hero h1 {
  margin-bottom: 22px;

  font-family: var(--jp-serif);

  font-size:
    clamp(48px, 6vw, 82px);

  font-weight: 400;

  line-height: 1.18;

  white-space: nowrap;
}

.sub-hero-copy > p:last-child {
  max-width: 620px;

  margin: 0;

  color: var(--gray);

  font-size: 12px;

  line-height: 2;
}


/* =========================================================
SUBPAGE COMMON RESERVATION CTA
復旧 + PREMIUM化
========================================================= */

.reservation-section {
  position: relative;

  overflow: hidden;

  padding: 0;

  color: #fff;

  background: var(--dark);
}

.reservation-section::after {
  position: absolute;

  right: -35px;
  bottom: -70px;

  color:
    rgba(255, 255, 255, 0.025);

  font-family: var(--serif);

  font-size:
    clamp(130px, 20vw, 300px);

  line-height: 1;

  content: "LUCENT";

  pointer-events: none;
}

.reservation-inner {
  position: relative;
  z-index: 2;

  width:
    min(calc(100% - 88px), 1280px);

  min-height: 520px;

  margin-inline: auto;

  padding:
    105px 0 95px;

  text-align: left;
}

.reservation-inner .section-label,
.reservation-inner .section-kicker,
.reservation-inner > span:first-child {
  display: block;

  margin-bottom: 24px;

  color:
    rgba(255, 255, 255, 0.46);

  font-size: 9px;

  letter-spacing: 0.24em;
}

.reservation-inner h2 {
  max-width: 780px;

  margin-bottom: 28px;

  color: #fff;

  font-family: var(--jp-serif);

  font-size:
    clamp(38px, 4.4vw, 62px);

  font-weight: 400;

  line-height: 1.55;

  letter-spacing: -0.015em;
}

.reservation-inner h2 .heading-line {
  width: max-content;
  max-width: 100%;

  color: inherit;

  font-size: inherit;

  letter-spacing: inherit;

  white-space: nowrap;
}

.reservation-inner > p,
.reservation-inner .body-copy {
  max-width: 580px;

  margin-bottom: 36px;

  color:
    rgba(255, 255, 255, 0.61);

  font-size: 12px;

  line-height: 2;
}

.reservation-button {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 70px;

  min-width: 220px;
  min-height: 60px;

  padding:
    0 22px;

  color: var(--dark);

  background: #fff;

  border: 1px solid #fff;

  font-size: 11px;

  transition:
    color 0.3s ease,
    background 0.3s ease;
}

.reservation-button:hover {
  color: #fff;

  background: transparent;
}


/* =========================================================
LOWER TREATMENT INTRO
========================================================= */

.treatment-intro {
  display: grid;

  grid-template-columns:
    1fr 0.8fr;

  gap: 100px;

  padding:
    120px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );
}

.treatment-detail {
  display: grid;

  grid-template-columns:
    1.12fr 0.88fr;

  min-height: 740px;

  background: var(--paper);
}

.treatment-detail-reverse {
  grid-template-columns:
    0.88fr 1.12fr;

  background: var(--soft);
}

.treatment-detail-reverse
.treatment-detail-media {
  grid-column: 2;
}

.treatment-detail-reverse
.treatment-detail-copy {
  grid-column: 1;
  grid-row: 1;
}

.treatment-detail-media {
  height: 740px;
}

.treatment-detail-media img {
  height: 100%;

  object-fit: cover;
}

.treatment-detail-copy {
  display: flex;

  justify-content: center;

  flex-direction: column;

  padding:
    clamp(45px, 7vw, 110px);
}

.treatment-index {
  margin-bottom: 28px;

  color: var(--gray);

  font-size: 9px;

  letter-spacing: 0.18em;
}

.treatment-detail-copy h2 {
  margin-bottom: 6px;

  font-family: var(--serif);

  font-size:
    clamp(52px, 6vw, 84px);

  font-weight: 400;

  line-height: 1;
}

.treatment-ja {
  margin-bottom: 30px;

  color: var(--gray);

  font-size: 11px;
}

.treatment-detail-copy
> p:not(.treatment-ja) {
  color: var(--gray);

  font-size: 12px;

  line-height: 2;
}

.treatment-spec {
  margin-top: 35px;

  border-top: 1px solid var(--line);
}

.treatment-spec > div {
  display: grid;

  grid-template-columns:
    110px 1fr;

  padding: 12px 0;

  border-bottom: 1px solid var(--line);
}

.treatment-spec dt {
  color: var(--gray2);

  font-size: 9px;
}

.treatment-spec dd {
  margin: 0;

  font-size: 11px;
}


/* =========================================================
LOWER TREATMENT LIST
PREMIUM REBUILD
========================================================= */

.treatment-list-section {
  padding:
    115px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );
}

.treatment-list-section .section-top {
  margin-bottom: 55px;
}

.treatment-list-item {
  position: relative;

  display: grid;

  grid-template-columns:
    64px
    minmax(220px, 0.85fr)
    minmax(300px, 1.25fr)
    minmax(280px, 0.9fr);

  align-items: center;

  gap: 30px;

  min-height: 138px;

  padding:
    25px 22px;

  margin-inline: -22px;

  border-top: 1px solid var(--line);

  transition:
    background 0.3s ease;
}

.treatment-list-item:last-child {
  border-bottom: 1px solid var(--line);
}

.treatment-list-item:hover {
  background:
    rgba(41, 40, 36, 0.035);
}

.treatment-list-item
> span:first-child {
  align-self: start;

  padding-top: 4px;

  color: #8f887e;

  font-family: var(--serif);

  font-size: 16px;
}

.treatment-list-item h2 {
  margin-bottom: 5px;

  font-family: var(--serif);

  font-size:
    clamp(28px, 2.4vw, 39px);

  font-weight: 400;

  line-height: 1.05;

  transition:
    transform 0.3s ease;
}

.treatment-list-item:hover h2 {
  transform:
    translateX(5px);
}

.treatment-list-item
h2 + p {
  margin: 0;

  color: #4f4b45;

  font-size: 12px;
}

.treatment-list-description {
  max-width: 450px;

  margin: 0;

  color: var(--gray);

  font-size: 11.5px;

  line-height: 1.95;
}

.treatment-list-item dl,
.treatment-list-meta,
.treatment-item-meta {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(100px, 1fr));

  gap: 26px;

  margin: 0;
}

.treatment-list-item dl > div,
.treatment-list-meta > div,
.treatment-item-meta > div {
  min-width: 0;
}

.treatment-list-item dt,
.treatment-list-meta dt,
.treatment-item-meta dt {
  margin-bottom: 5px;

  color: var(--gray2);

  font-size: 8px;

  letter-spacing: 0.08em;
}

.treatment-list-item dd,
.treatment-list-meta dd,
.treatment-item-meta dd {
  margin: 0;

  color: var(--dark);

  font-size: 13px;

  line-height: 1.6;

  white-space: nowrap;
}


/* =========================================================
TREATMENT COMPARE
PREMIUM REBUILD
========================================================= */

.compare-section {
  padding:
    105px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    )
    85px;

  background: #f0ede7;
}

.compare-section .section-kicker {
  margin-bottom: 24px;
}

.compare-section .display-heading,
.compare-section h2 {
  margin-bottom: 52px;
}

.compare-table-wrap {
  overflow-x: auto;

  border-top:
    1px solid rgba(41, 40, 36, 0.26);
}

.compare-table {
  width: 100%;

  min-width: 860px;

  border-collapse: collapse;
}

.compare-table thead th {
  padding:
    18px 16px;

  color: #706a61;

  border-bottom:
    1px solid rgba(41, 40, 36, 0.19);

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.05em;

  text-align: left;

  white-space: nowrap;
}

.compare-table tbody tr {
  transition:
    background 0.25s ease;
}

.compare-table tbody tr:hover {
  background:
    rgba(255, 255, 255, 0.46);
}

.compare-table td {
  min-height: 70px;

  padding:
    23px 16px;

  color: #48443e;

  border-bottom:
    1px solid rgba(41, 40, 36, 0.13);

  font-size: 11.5px;

  vertical-align: middle;
}

.compare-table td:first-child {
  position: relative;

  color: var(--dark);

  font-family: var(--serif);

  font-size: 17px;
  font-weight: 500;

  letter-spacing: 0.03em;

  white-space: nowrap;
}

.compare-table td:first-child::after {
  display: inline-block;

  margin-left: 12px;

  color: #8d877e;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 9px;

  content: "↗";

  transition:
    transform 0.25s ease;
}

.compare-table
tbody tr:hover
td:first-child::after {
  transform:
    translate(3px, -3px);
}


/* =========================================================
CONCERNS LOWER
========================================================= */

.concern-intro,
.doctor-philosophy,
.doctor-profile,
.visit-notes {
  padding:
    110px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );
}

.concern-intro-grid {
  display: grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap: 100px;

  align-items: center;
}

.concern-intro figure {
  height: 650px;

  margin: 0;
}

.concern-intro figure img {
  height: 100%;

  object-fit: cover;
}

.concern-detail {
  padding:
    80px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );

  border-top: 1px solid var(--line);
}

.concern-detail-head {
  display: grid;

  grid-template-columns:
    80px 1fr;

  align-items: end;

  margin-bottom: 45px;
}

.concern-detail-head h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size:
    clamp(36px, 4vw, 52px);

  font-weight: 400;
}

.concern-detail-grid {
  display: grid;

  grid-template-columns:
    1fr 0.85fr;

  gap: 100px;

  padding-left: 80px;
}

.concern-cause p {
  margin: 0;

  padding: 11px 0;

  border-bottom: 1px solid var(--line);

  color: var(--gray);

  font-size: 11px;
}

.concern-recommend a {
  display: flex;

  justify-content: space-between;

  padding:
    18px 0;

  border-top: 1px solid var(--line);

  font-family: var(--serif);

  font-size: 23px;
}

.analysis-mini {
  display: grid;

  grid-template-columns:
    1.15fr 0.85fr;

  align-items: center;

  color: #fff;
  background: var(--dark);
}

.analysis-mini-media {
  height: 650px;
}

.analysis-mini-media img {
  height: 100%;

  object-fit: cover;
}

.analysis-mini-copy {
  padding: 70px;
}


/* =========================================================
DOCTOR LOWER
========================================================= */

.doctor-page-main {
  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap: 110px;

  align-items: center;

  padding:
    130px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );
}

.doctor-page-portrait {
  height: 820px;
}

.doctor-page-portrait img {
  height: 100%;

  object-fit: cover;
}

.doctor-page-copy h2 {
  font-family: var(--jp-serif);

  font-size:
    clamp(34px, 3.6vw, 52px);

  font-weight: 400;

  line-height: 1.5;
}

.doctor-page-copy > p {
  color: var(--gray);

  font-size: 12px;

  line-height: 2.1;
}

.doctor-philosophy {
  background: var(--paper);
}

.doctor-philosophy figure {
  height: 700px;
}

.doctor-philosophy figure img {
  height: 100%;

  object-fit: cover;
}

.doctor-profile {
  display: grid;

  grid-template-columns:
    0.7fr 1.3fr;

  gap: 100px;
}

.doctor-profile-content {
  display: grid;

  grid-template-columns:
    1fr 0.9fr;

  gap: 65px;
}

.doctor-policy-box {
  padding: 35px;

  background: var(--paper);

  border: 1px solid var(--line);
}

.doctor-analysis {
  display: grid;

  grid-template-columns:
    1.15fr 0.85fr;

  align-items: center;

  background: var(--soft);
}

.doctor-analysis figure {
  height: 680px;

  margin: 0;
}

.doctor-analysis figure img {
  height: 100%;

  object-fit: cover;
}

.doctor-analysis-copy {
  padding: 70px;
}


/* =========================================================
CASES LOWER
========================================================= */

.case-page-intro {
  padding:
    90px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    )
    70px;
}

.case-detail {
  padding:
    75px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    )
    70px;

  border-bottom:
    1px solid var(--line);
}

.case-detail-images {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 16px;
}

.case-detail-images figure {
  position: relative;

  margin: 0;
}

.case-detail-images img {
  aspect-ratio: 4 / 5;

  object-fit: cover;
}

.case-detail-images figcaption {
  padding-top: 10px;

  color: #4e4a44;

  font-family: var(--serif);

  font-size: 16px;

  letter-spacing: 0.04em;
}

.case-detail-data {
  display: grid;

  grid-template-columns:
    0.9fr
    0.7fr
    0.9fr
    1.7fr;

  margin-top: 32px;

  border-top:
    1px solid rgba(41, 40, 36, 0.22);

  border-left:
    1px solid var(--line);
}

.case-detail-data > div {
  min-width: 0;

  padding:
    27px 30px;

  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  transition:
    background 0.25s ease;
}

.case-detail-data > div:hover {
  background:
    rgba(41, 40, 36, 0.025);
}

.case-detail-data
> div
> :first-child {
  display: block;

  margin-bottom: 12px;

  color: #777168;

  font-size: 10px;
  font-weight: 500;
}

.case-detail-data
> div
> :last-child {
  margin-bottom: 0;

  color: var(--dark);

  font-size: 14px;

  line-height: 1.9;
}

.case-detail-data dt {
  margin-bottom: 10px;

  color: #777168;

  font-size: 10px;

  letter-spacing: 0.04em;
}

.case-detail-data dd {
  margin: 0;

  color: var(--dark);

  font-size: 14px;

  line-height: 1.9;
}

.case-detail-data
> div:last-child
dd,
.case-detail-data
> div:last-child
p {
  max-width: 480px;

  font-size: 12.5px;

  line-height: 2;
}


/* =========================================================
PRICE LOWER
========================================================= */

.price-intro,
.price-section {
  padding:
    90px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );
}

.price-category {
  display: grid;

  grid-template-columns:
    80px 1fr;

  margin-bottom: 35px;
}

.price-category h2 {
  margin: 0;

  font-family: var(--jp-serif);

  font-size: 35px;

  font-weight: 400;
}

.price-table {
  margin-left: 80px;
}

.price-row {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding:
    20px 0;

  border-top:
    1px solid var(--line);
}

.price-row:last-child {
  border-bottom:
    1px solid var(--line);
}

.price-row span,
.price-row p {
  font-size: 12px;
}

.price-note {
  display: grid;

  grid-template-columns:
    0.7fr 1.3fr;

  gap: 80px;

  padding:
    90px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );

  background: var(--paper);
}


/* =========================================================
FIRST VISIT LOWER
========================================================= */

.first-page-flow {
  padding:
    90px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );
}

.first-page-visual {
  padding:
    0
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );
}

.first-page-visual figure {
  height: 720px;

  margin: 0;
}

.first-page-visual img {
  height: 100%;

  object-fit: cover;
}

.first-page-step {
  display: grid;

  grid-template-columns:
    80px
    minmax(260px, 0.75fr)
    1fr;

  gap: 30px;

  padding:
    36px 0;

  border-top:
    1px solid var(--line);
}

.first-page-step:last-child {
  border-bottom:
    1px solid var(--line);
}

.first-page-step > span:first-child {
  font-family: var(--serif);

  font-size: 16px;

  color: var(--gray2);
}

.first-page-step h2,
.first-page-step h3 {
  font-size: 20px;
}

.first-page-step p {
  color: var(--gray);

  font-size: 12px;

  line-height: 2;
}

.first-analysis {
  display: grid;

  grid-template-columns:
    1.1fr 0.9fr;

  align-items: center;

  color: #fff;

  background: var(--dark);
}

.first-analysis figure {
  height: 700px;

  margin: 0;
}

.first-analysis figure img {
  height: 100%;

  object-fit: cover;
}

.first-analysis > div {
  padding: 70px;
}

.visit-note-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.visit-note-grid article {
  min-height: 220px;

  padding: 28px;

  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}


/* =========================================================
ACCESS LOWER
========================================================= */

.access-map-section {
  padding:
    85px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );
}

.access-gallery {
  display: grid;

  grid-template-columns:
    1.3fr 0.7fr;

  gap: 16px;

  padding:
    0
    max(
      40px,
      calc((100vw - 1280px) / 2)
    )
    110px;
}

.access-gallery-main {
  height: 720px;
}

.access-gallery-sub {
  height: 540px;

  align-self: end;
}

.access-gallery img {
  height: 100%;

  object-fit: cover;
}

.clinic-information {
  display: grid;

  grid-template-columns:
    0.75fr 1.25fr;

  gap: 100px;

  padding:
    110px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    );

  background: var(--paper);
}

.access-map-large {
  height: 650px;
}

.access-map-large iframe {
  width: 100%;
  height: 100%;

  border: 0;
}


/* =========================================================
ROUTE
横につながるアクセス案内
========================================================= */

.route-section {
  padding:
    105px
    max(
      40px,
      calc((100vw - 1280px) / 2)
    )
    115px;

  overflow: hidden;
}

.route-section .section-kicker {
  margin-bottom: 25px;
}

.route-section .display-heading,
.route-section > h2 {
  margin-bottom: 80px;

  font-size:
    clamp(44px, 5vw, 70px);
}

.route-steps {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 0;

  padding-top: 45px;

  border: 0;
}

.route-steps::before {
  position: absolute;

  top: 5px;
  right: 0;
  left: 0;

  height: 1px;

  background:
    rgba(41, 40, 36, 0.22);

  content: "";
}

.route-steps article {
  position: relative;

  min-height: 0;

  padding:
    24px 55px 0 0;

  border: 0;

  background: transparent;
}

.route-steps article + article {
  padding-left: 35px;
}

.route-steps article::before {
  position: absolute;

  top: -45px;
  left: 0;

  width: 11px;
  height: 11px;

  border:
    1px solid var(--dark);

  border-radius: 50%;

  background: var(--bg);

  content: "";

  z-index: 2;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.route-steps article:last-child::before {
  background: var(--dark);
}

.route-steps article:hover::before {
  background: var(--dark);

  transform: scale(1.18);
}

.route-steps article:not(:last-child)::after {
  position: absolute;

  top: -57px;
  right: 18px;

  color: #948e85;

  font-family: var(--serif);

  font-size: 19px;

  content: "→";
}

.route-steps article
> span:first-child {
  display: block;

  margin-bottom: 14px;

  color: #908a81;

  font-family: var(--serif);

  font-size: 15px;
}

.route-steps article h2,
.route-steps article h3,
.route-steps article strong {
  display: block;

  margin-bottom: 10px;

  font-family: var(--jp-serif);

  font-size:
    clamp(18px, 1.5vw, 23px);

  font-weight: 400;

  line-height: 1.6;
}

.route-steps article p {
  max-width: 330px;

  margin: 0;

  color: var(--gray);

  font-size: 12px;

  line-height: 1.9;
}

.route-steps article:last-child h2,
.route-steps article:last-child h3,
.route-steps article:last-child strong {
  font-weight: 500;
}

.access-room {
  display: grid;

  grid-template-columns:
    1.15fr 0.85fr;

  align-items: center;
}

.access-room figure {
  height: 670px;

  margin: 0;
}

.access-room img {
  height: 100%;

  object-fit: cover;
}

.access-room > div {
  padding: 70px;
}


/* =========================================================
RESPONSIVE 1180
========================================================= */

@media (max-width: 1180px) {

  .desktop-nav {
    gap: 18px;
  }

  .approach-layout {
    grid-template-columns:
      minmax(0, 520px)
      minmax(0, 1fr);

    gap: 65px;
  }

  .approach-side-data {
    display: none;
  }

  .approach-heading {
    font-size: 45px;
  }

  .skin-map-layout {
    grid-template-columns:
      210px
      minmax(370px, 1fr)
      270px;
  }

  .doctor-editorial-grid {
    grid-template-columns:
      80px
      minmax(360px, 0.85fr)
      minmax(380px, 1.15fr);

    gap: 45px;
  }

  .premium-access {
    grid-template-columns:
      minmax(470px, 0.9fr)
      minmax(0, 1.1fr);
  }

  .premium-access-main {
    padding:
      70px 55px;
  }

  .premium-access-main h2 {
    font-size: 39px;
  }

  .treatment-list-item {
    grid-template-columns:
      55px
      minmax(190px, 0.8fr)
      minmax(230px, 1fr)
      minmax(230px, 0.9fr);

    gap: 22px;
  }

}


/* =========================================================
RESPONSIVE 1050
========================================================= */

@media (max-width: 1050px) {

  .desktop-nav,
  .header-first,
  .header-reserve {
    display: none;
  }

  .site-header {
    grid-template-columns:
      1fr auto;
  }

  .menu-button {
    display: block;
  }

  .skin-map-layout {
    grid-template-columns:
      200px 1fr;
  }

  .skin-map-result {
    grid-column:
      1 / 3;

    padding:
      50px 0;
  }

  .doctor-editorial-grid {
    grid-template-columns:
      minmax(340px, 0.85fr)
      minmax(380px, 1.15fr);
  }

  .doctor-title-column {
    display: none;
  }

  .analysis-premium {
    grid-template-columns:
      1fr 0.9fr;
  }

  .treatment-list-item {
    grid-template-columns:
      50px
      minmax(190px, 0.8fr)
      1fr;

    gap: 22px;
  }

  .treatment-list-item dl,
  .treatment-list-meta,
  .treatment-item-meta {
    grid-column:
      2 / 4;

    margin-top: 4px;
  }

  .case-detail-data {
    grid-template-columns:
      1fr 1fr;
  }

  .case-detail-data
  > div:nth-child(3),
  .case-detail-data
  > div:nth-child(4) {
    border-top: 0;
  }

}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 820px) {

  .premium-hero h1 {
    font-size: 46px;
  }

  .premium-hero h1 span,
  .approach-heading span,
  .analysis-content h2 span,
  .doctor-editorial-copy h2 span,
  .reservation-copy h2 span {
    width: auto;

    white-space: normal;
  }

  .hero-brand-line {
    display: none;
  }

  .approach-layout {
    grid-template-columns: 1fr;
  }

  .approach-copy {
    max-width: 650px;

    padding-top: 0;
  }

  .approach-visual {
    height: 650px;
  }

  .skin-map-head,
  .treatment-preview-head,
  .case-premium-head,
  .premium-flow-head,
  .clinic-editorial-head {
    align-items: flex-start;

    flex-direction: column;
  }

  .skin-map-layout {
    grid-template-columns: 1fr;
  }

  .skin-map-nav {
    display: grid;

    grid-template-columns:
      repeat(5, 1fr);

    padding:
      0 0 20px;

    border-right: 0;
  }

  .skin-map-board {
    border-right: 0;

    border-top: 1px solid var(--line);
  }

  .skin-map-result {
    grid-column: auto;
  }

  .featured-treatments {
    grid-template-columns: 1fr;
  }

  .featured-treatment-offset {
    margin-top: 0;
  }

  .featured-treatment-image,
  .featured-treatment-offset
  .featured-treatment-image {
    height: 600px;
  }

  .treatment-simple-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .analysis-premium {
    grid-template-columns: 1fr;
  }

  .analysis-photo {
    min-height: 640px;
  }

  .analysis-content {
    padding:
      80px 40px;
  }

  .consultation-editorial {
    min-height: 820px;
  }

  .case-slider-grid {
    grid-template-columns: 1fr;

    gap: 80px;
  }

  .premium-case {
    max-width: 620px;
  }

  .doctor-editorial-grid {
    grid-template-columns: 1fr;
  }

  .doctor-editorial-portrait {
    max-width: 600px;
  }

  .doctor-consultation-wide {
    width: 100%;
  }

  .flow-track {
    grid-template-columns:
      repeat(3, 1fr);

    gap:
      60px 30px;
  }

  .flow-line {
    display: none;
  }

  .flow-dot {
    position: static;

    margin-bottom: 25px;
  }

  .flow-step {
    min-height: 230px;
  }

  .clinic-gallery-premium {
    grid-template-columns: 1fr;

    grid-template-rows: auto;
  }

  .clinic-gallery-main,
  .clinic-gallery-detail,
  .clinic-gallery-room {
    grid-column: auto;
    grid-row: auto;

    height: 520px;
  }

  .premium-access {
    grid-template-columns: 1fr;
  }

  .premium-access-main {
    padding:
      80px 40px;
  }

  .premium-access-main h2 {
    white-space: normal;
  }

  .premium-access-map {
    min-height: 560px;
  }

  .reservation-grid {
    grid-template-columns:
      60px 1fr 220px;

    gap: 30px;
  }

  .reservation-circle {
    width: 210px;
    height: 210px;

    padding-inline: 32px;
  }

  .treatment-intro,
  .concern-intro-grid,
  .doctor-page-main,
  .doctor-profile,
  .doctor-analysis,
  .first-analysis,
  .clinic-information,
  .access-room {
    grid-template-columns: 1fr;
  }

  .treatment-detail,
  .treatment-detail-reverse {
    grid-template-columns: 1fr;
  }

  .treatment-list-item {
    grid-template-columns:
      45px 1fr;

    margin-inline: 0;

    padding:
      28px 0;
  }

  .treatment-list-description {
    grid-column: 2;

    max-width: 600px;
  }

  .treatment-list-item dl,
  .treatment-list-meta,
  .treatment-item-meta {
    grid-column: 2;

    width: 100%;
    max-width: 450px;
  }

  .route-section .display-heading,
  .route-section > h2 {
    margin-bottom: 65px;
  }

  .route-steps {
    grid-template-columns: 1fr;

    gap: 0;

    padding-top: 0;
  }

  .route-steps::before {
    top: 0;
    bottom: 0;
    left: 17px;

    width: 1px;
    height: auto;
  }

  .route-steps article,
  .route-steps article + article {
    padding:
      0 0 55px 65px;
  }

  .route-steps article::before {
    top: 5px;
    left: 12px;
  }

  .route-steps article:not(:last-child)::after {
    display: none;
  }

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

  html {
    scroll-padding-top: 72px;
  }

  body {
    font-size: 14px;
  }

  .site-header {
    height: 72px;

    padding-inline: 18px;
  }

  .subpage {
    padding-top: 72px;
  }

  .logo-main {
    font-size: 22px;
  }

  .premium-hero {
    min-height: 720px;
  }

  .premium-hero-media img {
    object-position:
      62% center;
  }

  .premium-hero-shade {
    background:
      linear-gradient(
        180deg,
        rgba(25, 24, 22, 0.13),
        rgba(25, 24, 22, 0.66)
      );
  }

  .premium-hero-copy {
    top: auto;
    right: 20px;
    bottom: 88px;
    left: 20px;

    width: auto;

    transform: none;
  }

  .premium-hero h1 {
    font-size:
      clamp(27px, 8vw, 34px);

    line-height: 1.55;
  }

  .premium-hero h1 span {
    width: max-content;
    max-width: 100%;

    white-space: nowrap;
  }

  .hero-description {
    max-width: 340px;

    font-size: 10px;
  }

  .hero-actions {
    align-items: stretch;

    width: 210px;

    flex-direction: column;
  }

  .hero-primary,
  .hero-secondary {
    width: 100%;

    min-height: 52px;
    height: auto;
  }

  .hero-bottom,
  .hero-scroll {
    display: none;
  }

  .premium-approach,
  .skin-map-section,
  .treatment-preview,
  .case-premium,
  .doctor-editorial,
  .premium-flow,
  .clinic-editorial {
    padding:
      90px 20px;
  }

  .approach-watermark {
    top: 10px;
    left: -5px;

    font-size: 105px;
  }

  .approach-heading {
    margin-bottom: 30px;

    font-size: 29px;
  }

  .approach-heading span {
    width: max-content;
    max-width: 100%;

    white-space: nowrap;
  }

  .approach-body p {
    font-size: 12px;
  }

  .approach-visual {
    height: 520px;
  }

  .skin-map-head {
    margin-bottom: 55px;
  }

  .skin-map-head h2,
  .treatment-preview-head h2,
  .case-premium-head h2,
  .premium-flow-head h2,
  .clinic-editorial-head h2 {
    font-size: 34px;
  }

  .skin-map-nav {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .skin-concern:last-child {
    grid-column:
      1 / 3;
  }

  .skin-map-board {
    min-height: 510px;
  }

  .skin-map-face {
    width: 220px;
    height: 320px;
  }

  .featured-treatment-image,
  .featured-treatment-offset
  .featured-treatment-image {
    height: 470px;
  }

  .featured-treatment-meta h3 {
    font-size: 42px;
  }

  .treatment-simple-grid {
    grid-template-columns:
      1fr 1fr;

    margin-top: 70px;
  }

  .simple-treatment {
    min-height: 180px;

    padding: 18px;
  }

  .simple-treatment strong {
    font-size: 22px;
  }

  .analysis-photo {
    min-height: 510px;
  }

  .analysis-content {
    padding:
      70px 20px;
  }

  .analysis-content h2 {
    font-size: 30px;
  }

  .analysis-content h2 span {
    width: max-content;
    max-width: 100%;

    white-space: nowrap;
  }

  .analysis-check {
    grid-template-columns:
      38px 1fr;
  }

  .consultation-editorial {
    min-height: 730px;
  }

  .consultation-image {
    inset: 0;
  }

  .consultation-image img {
    height: 100%;
  }

  .consultation-panel {
    top: 80px;

    width:
      calc(100% - 40px);

    margin-inline: 20px;

    padding:
      45px 28px;
  }

  .consultation-panel h2 {
    font-size: 29px;
  }

  .premium-case-meta {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .doctor-editorial-portrait {
    height: 580px;
  }

  .doctor-editorial-copy h2 {
    font-size: 29px;
  }

  .doctor-editorial-copy h2 span {
    width: auto;

    white-space: normal;
  }

  .doctor-name-large {
    display: grid;

    grid-template-columns:
      auto 1fr;
  }

  .doctor-name-large small {
    grid-column: 2;
  }

  .doctor-consultation-wide {
    height: 330px;

    margin-top: 70px;
  }

  .premium-flow-head {
    margin-bottom: 70px;
  }

  .flow-track {
    grid-template-columns: 1fr;

    gap: 0;

    padding-top: 0;
  }

  .flow-step {
    display: grid;

    grid-template-columns:
      48px 1fr;

    gap: 20px;

    min-height: 0;

    padding:
      25px 0;

    border-top: 1px solid var(--line);
  }

  .flow-step:last-child {
    border-bottom: 1px solid var(--line);
  }

  .flow-dot {
    width: 38px;
    height: 38px;

    margin: 0;
  }

  .flow-step-body {
    padding: 0;
  }

  .flow-step small {
    margin-bottom: 6px;

    font-size: 12px;
  }

  .flow-step h3 {
    margin-bottom: 8px;

    font-size: 19px;
  }

  .flow-step p {
    max-width: 100%;

    font-size: 10.5px;
  }

  .clinic-gallery-main,
  .clinic-gallery-detail,
  .clinic-gallery-room {
    height: 380px;
  }

  .premium-access-main {
    padding:
      80px 20px;
  }

  .premium-access-main h2 {
    font-size: 31px;

    white-space: nowrap;
  }

  .premium-access-map {
    min-height: 450px;
  }

  .premium-reservation {
    min-height: 650px;
  }

  .reservation-grid {
    display: flex;

    justify-content: center;

    flex-direction: column;

    align-items: flex-start;

    gap: 35px;

    width:
      calc(100% - 40px);

    min-height: 650px;
  }

  .reservation-number {
    padding: 0;
  }

  .reservation-copy h2 {
    font-size: 34px;
  }

  .reservation-circle {
    width: 170px;
    height: 170px;

    padding-inline: 28px;
  }

  .reservation-word {
    bottom: -25px;

    font-size: 130px;
  }

  .footer-top {
    flex-direction: column;
  }

  .footer-bottom {
    align-items: flex-start;

    flex-direction: column;

    gap: 7px;
  }

  .sub-hero {
    min-height: 390px;

    padding:
      70px 20px 50px;
  }

  .sub-hero h1 {
    font-size: 42px;

    white-space: normal;
  }

  .sub-hero-copy > p:last-child {
    font-size: 11px;
  }

  .treatment-intro,
  .treatment-list-section,
  .compare-section,
  .concern-intro,
  .concern-detail,
  .doctor-page-main,
  .doctor-philosophy,
  .doctor-profile,
  .case-page-intro,
  .case-detail,
  .price-intro,
  .price-section,
  .price-note,
  .first-page-flow,
  .visit-notes,
  .access-map-section,
  .route-section,
  .clinic-information {
    padding:
      75px 20px;
  }

  .treatment-list-item {
    grid-template-columns:
      38px 1fr;

    gap:
      15px 14px;

    min-height: 0;

    padding:
      25px 0;
  }

  .treatment-list-item h2 {
    font-size: 27px;
  }

  .treatment-list-description {
    grid-column: 2;

    font-size: 11px;
  }

  .treatment-list-item dl,
  .treatment-list-meta,
  .treatment-item-meta {
    grid-column: 2;

    grid-template-columns:
      1fr 1fr;

    gap: 15px;
  }

  .treatment-list-item dd,
  .treatment-list-meta dd,
  .treatment-item-meta dd {
    font-size: 11.5px;
  }

  .compare-section {
    padding-bottom: 65px;
  }

  .compare-section
  .display-heading,
  .compare-section h2 {
    margin-bottom: 38px;

    font-size: 38px;
  }

  .compare-table th {
    font-size: 9px;
  }

  .compare-table td {
    padding:
      20px 14px;

    font-size: 11px;
  }

  .case-detail-images {
    grid-template-columns: 1fr;
  }

  .case-detail-data {
    grid-template-columns: 1fr;

    margin-top: 22px;
  }

  .case-detail-data > div {
    padding:
      22px 20px;
  }

  .case-detail-data
  > div
  > :last-child,
  .case-detail-data dd {
    font-size: 12px;
  }

  .price-table {
    margin-left: 0;
  }

  .price-note {
    grid-template-columns: 1fr;
  }

  .first-page-visual {
    padding: 0;
  }

  .first-page-step {
    grid-template-columns:
      45px 1fr;
  }

  .first-page-step > p {
    grid-column: 2;
  }

  .visit-note-grid {
    grid-template-columns: 1fr;
  }

  .access-gallery {
    grid-template-columns: 1fr;

    padding:
      0 20px 80px;
  }

  .route-section
  .display-heading,
  .route-section > h2 {
    margin-bottom: 55px;

    font-size:
      clamp(34px, 10vw, 43px);

    line-height: 1.45;
  }

  .route-steps article,
  .route-steps article + article {
    padding:
      0 0 45px 58px;
  }

  .route-steps article h2,
  .route-steps article h3,
  .route-steps article strong {
    font-size: 19px;
  }

  .route-steps article p {
    font-size: 11px;
  }

  .reservation-inner {
    width:
      calc(100% - 40px);

    min-height: 470px;

    padding:
      80px 0 70px;
  }

  .reservation-inner h2 {
    font-size:
      clamp(29px, 8.5vw, 36px);

    line-height: 1.58;
  }

  .reservation-inner
  h2
  .heading-line {
    width: auto;

    white-space: normal;
  }

  .reservation-inner > p,
  .reservation-inner .body-copy {
    font-size: 11px;
  }

  .reservation-button {
    min-width: 200px;
    min-height: 56px;
  }

  .route-steps {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .premium-hero h1 {
    font-size: 26px;
  }

  .approach-heading,
  .analysis-content h2,
  .doctor-editorial-copy h2 {
    font-size: 27px;
  }

  .skin-map-head h2,
  .treatment-preview-head h2,
  .case-premium-head h2,
  .premium-flow-head h2,
  .clinic-editorial-head h2 {
    font-size: 31px;
  }

  .premium-access-main h2 {
    font-size: 28px;
  }

  .route-section
  .display-heading,
  .route-section > h2 {
    font-size: 32px;
  }

}


/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

  .reveal,
  .hero-reveal {
    opacity: 1;

    transform: none;
  }

  .image-reveal::after {
    display: none;
  }

}