/* ================================================================
   Aoki Beauty Clinic — Main Stylesheet
   黒×ゴールド / WP化前提 / 医療広告ガイドライン準拠
   ================================================================ */

/* ── 0. Reset ─────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
input, button, textarea, select {
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
ul, ol {
  list-style: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: 1.3;
}

/* ── 1. CSS Custom Properties ─────────────────── */
:root {
  /* Background */
  --color-noir: #0A0A0A;
  --color-noir-900: #0A0A0A;
  --color-noir-800: #111111;
  --color-noir-700: #1A1A1A;
  --color-noir-600: #252525;
  --color-noir-500: #333333;
  --color-noir-400: #444444;

  /* Gold */
  --color-gold: #C5A55A;
  --color-gold-500: #C5A55A;
  --color-gold-400: #D4B96E;
  --color-gold-300: #E8D5A3;
  --color-gold-200: #F5EDDA;
  --color-gold-muted: rgba(197, 165, 90, 0.3);
  --color-gold-gradient: linear-gradient(135deg, #C5A55A, #E8D5A3, #C5A55A);

  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B0B0B0;
  --color-text-body: #D4D4D4;
  --color-text-muted: #808080;
  --color-text-on-gold: #0A0A0A;

  /* LINE */
  --color-line: #06C755;

  /* SNS Brand Colors */
  --color-youtube: #FF0000;
  --color-x: #FFFFFF;
  --color-tiktok-teal: #25F4EE;
  --color-tiktok-pink: #FE2C55;
  --color-instagram: #E1306C;

  /* Font Family */
  --font-display: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --font-en-display: 'Cormorant Garamond', serif;
  --font-ja-heading: 'Noto Serif JP', serif;
  --font-ja-body: 'Noto Sans JP', sans-serif;
  --font-number: 'Cormorant Garamond', serif;

  /* Font Size — Fluid */
  --text-hero: clamp(2.8rem, 7vw, 5.5rem);
  --text-hero-sub: clamp(1rem, 2.5vw, 1.5rem);
  --text-section-title: clamp(1.8rem, 4vw, 3rem);
  --text-section-en: clamp(0.7rem, 1.2vw, 0.85rem);
  --text-subsection: clamp(1.5rem, 3vw, 2.5rem);
  --text-card-title: clamp(1.1rem, 2vw, 1.4rem);
  --text-body: clamp(0.875rem, 1.2vw, 1rem);
  --text-caption: clamp(0.75rem, 1vw, 0.875rem);
  --text-label: clamp(0.65rem, 0.85vw, 0.75rem);
  --text-price: clamp(1.5rem, 3vw, 2.5rem);
  --text-number: clamp(2.5rem, 5vw, 4rem);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;
  --space-section: clamp(5rem, 10vw, 9rem);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 20px 40px rgba(197, 165, 90, 0.15);
  --shadow-gold-hover: 0 8px 24px rgba(197, 165, 90, 0.3);

  /* Transition */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-slower: 1s ease;

  /* Z-Index Scale */
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-mobile-cta: 90;
  --z-overlay: 300;
}

/* ── 2. Global / Typography ───────────────────── */
body {
  font-family: var(--font-ja-body);
  font-size: var(--text-body);
  font-weight: 300;
  color: var(--color-text-body);
  background-color: var(--color-noir);
  position: relative;
}

::selection {
  background: var(--color-gold);
  color: var(--color-text-on-gold);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.section-header__label {
  font-family: var(--font-en-display);
  font-size: var(--text-section-en);
  font-weight: 300;
  color: var(--color-gold-300);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-md);
}
.section-header__title {
  font-family: var(--font-ja-heading);
  font-size: var(--text-section-title);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
}
.section-header__line {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--color-gold);
  margin: var(--space-lg) auto 0;
}
.section-header__sub {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-top: var(--space-md);
}

/* Gold accent number in text */
.highlight-number {
  font-family: var(--font-number);
  font-size: var(--text-subsection);
  color: var(--color-gold);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* Placeholder image gradient */
.placeholder-img {
  background: linear-gradient(135deg, var(--color-noir-700) 0%, var(--color-noir-600) 50%, var(--color-noir-700) 100%);
  position: relative;
}
.placeholder-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(197, 165, 90, 0.03) 50%,
    transparent 70%
  );
}

/* ── 3. Noise Texture Overlay ─────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── 4. Skip Link ─────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-md);
  z-index: 10000;
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  padding: var(--space-sm) var(--space-lg);
  font-weight: 500;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
}

/* ── 5. Header ────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  padding: var(--space-lg) 0;
  background-color: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(197, 165, 90, 0.15);
  transition: padding var(--transition-base);
}
.header.is-scrolled {
  padding: var(--space-sm) 0;
}
.header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}
.header__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  transition: opacity var(--transition-base);
}
.header__logo:hover {
  opacity: 0.8;
}
.header__logo-main {
  font-family: var(--font-en-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 300;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.header__logo-sub {
  font-family: var(--font-ja-body);
  font-size: 0.6rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  letter-spacing: 0.15em;
  margin-top: 2px;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.header__nav a {
  font-family: var(--font-ja-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}
.header__nav a:hover,
.header__nav a.is-active {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.header__lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-sm);
  border-left: 1px solid var(--color-noir-500);
  padding-left: var(--space-md);
}
.header__lang a {
  font-family: var(--font-en-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  padding: 4px 6px;
  transition: color var(--transition-base);
}
.header__lang a:hover,
.header__lang a.is-active {
  color: var(--color-gold);
}

/* Hamburger */
.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  z-index: calc(var(--z-drawer) + 1);
}
.header__burger span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-text-primary);
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}
.header__burger.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.header__burger.is-open span:nth-child(2) {
  opacity: 0;
}
.header__burger.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── 6. Mobile Drawer ─────────────────────────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  pointer-events: none;
  visibility: hidden;
}
.drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.drawer.is-open .drawer__overlay {
  opacity: 1;
}
.drawer__content {
  position: absolute;
  top: 0;
  right: 0;
  width: min(85vw, 400px);
  height: 100%;
  background: var(--color-noir-800);
  padding: 6rem var(--space-xl) var(--space-3xl);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  border-left: 1px solid rgba(197, 165, 90, 0.1);
}
.drawer.is-open .drawer__content {
  transform: translateX(0);
}
.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.drawer__nav a {
  font-family: var(--font-ja-heading);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--color-text-primary);
  letter-spacing: 0.08em;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-noir-600);
  transition: color var(--transition-base), padding-left var(--transition-base);
}
.drawer__nav a:hover {
  color: var(--color-gold);
  padding-left: var(--space-sm);
}
.drawer__lang {
  display: flex;
  gap: var(--space-md);
}
.drawer__lang a {
  font-family: var(--font-en-display);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-noir-600);
  transition: all var(--transition-base);
}
.drawer__lang a:hover,
.drawer__lang a.is-active {
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.drawer__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: auto;
}

/* ── 7. Buttons ───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-ja-body);
  font-weight: 400;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  transition: all var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
}
.btn--sm {
  font-size: 0.7rem;
  padding: 6px 16px;
}
.btn--md {
  font-size: var(--text-caption);
  padding: 10px 28px;
}
.btn--lg {
  font-size: var(--text-body);
  padding: 14px 36px;
}
.btn--gold {
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  font-weight: 500;
}
.btn--gold:hover {
  box-shadow: var(--shadow-gold-hover);
  transform: translateY(-2px);
  background: var(--color-gold-400);
}
.btn--outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}
.btn--outline:hover {
  background: var(--color-gold);
  color: var(--color-text-on-gold);
}
.btn--outline-white {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--line {
  background: var(--color-line);
  color: var(--color-text-primary);
  font-weight: 500;
  transition: all var(--transition-base);
}
.btn--line:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent;
  color: var(--color-gold);
  padding: 0;
  letter-spacing: 0.05em;
  transition: all var(--transition-base);
}
.btn--ghost::after {
  content: '→';
  transition: transform var(--transition-base);
}
.btn--ghost:hover {
  color: var(--color-gold-300);
}
.btn--ghost:hover::after {
  transform: translateX(4px);
}
.btn--block {
  width: 100%;
}
.btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* ── 8. Section Common ────────────────────────── */
.section {
  position: relative;
  overflow: hidden;
}
.section--noir-900 {
  background: var(--color-noir-900);
}
.section--noir-800 {
  background: var(--color-noir-800);
}
.section__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-section) var(--space-xl);
}

/* Gold divider line between sections */
.gold-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-gold-muted) 20%,
    var(--color-gold) 50%,
    var(--color-gold-muted) 80%,
    transparent 100%
  );
}

/* ── 9. Hero (SEC-01) ─────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurns 25s ease-in-out infinite alternate;
}
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__bg .placeholder-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #0d0d0d 0%,
    #1a1816 25%,
    #0d0d0d 50%,
    #1a1816 75%,
    #0d0d0d 100%
  );
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.3) 0%,
    rgba(10, 10, 10, 0.5) 50%,
    rgba(10, 10, 10, 0.88) 100%
  );
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 8vw;
  max-width: 1400px;
}
.hero__label {
  font-family: var(--font-en-display);
  font-size: var(--text-section-en);
  font-weight: 300;
  color: var(--color-gold-300);
  letter-spacing: 0.25em;
  margin-bottom: var(--space-lg);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.3s forwards;
}
.hero__title {
  font-family: var(--font-ja-heading);
  font-size: var(--text-hero);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.5s forwards;
}
.hero__title em {
  font-style: normal;
  color: var(--color-gold);
  font-size: 1.35em;
  display: inline;
}
.hero__lead {
  font-family: var(--font-ja-body);
  font-size: var(--text-hero-sub);
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2xl);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.7s forwards;
}
.hero__cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.9s forwards;
}
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.hero__scroll-label {
  font-family: var(--font-en-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--color-gold-300);
  text-transform: uppercase;
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: var(--color-gold);
  animation: scrollBounce 2s ease-in-out infinite;
  transform-origin: top;
}

/* ── 10. Marquee (SEC-02) ─────────────────────── */
.marquee {
  width: 100%;
  overflow: hidden;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
  background: var(--color-noir-800);
  position: relative;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__text {
  font-family: var(--font-en-display);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 300;
  color: var(--color-gold);
  white-space: nowrap;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0 var(--space-md);
}
.marquee__separator {
  color: var(--color-gold-300);
  padding: 0 var(--space-lg);
  font-size: 0.8em;
}

/* ── 11. About (SEC-03) ───────────────────────── */
.about {
  padding: var(--space-section) 0;
  background: var(--color-noir-900);
  position: relative;
}
/* Marble texture overlay */
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(197, 165, 90, 0.03) 0%,
    transparent 50%
  ),
  radial-gradient(
    ellipse at 70% 80%,
    rgba(197, 165, 90, 0.02) 0%,
    transparent 50%
  );
  pointer-events: none;
}
.about__grid {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: var(--space-3xl);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  align-items: center;
  position: relative;
}
.about__text {
  position: relative;
  z-index: 1;
}
.about__label {
  font-family: var(--font-en-display);
  font-size: var(--text-section-en);
  font-weight: 300;
  color: var(--color-gold-300);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}
.about__title {
  font-family: var(--font-ja-heading);
  font-size: var(--text-section-title);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-lg);
}
.about__line {
  width: 60px;
  height: 1px;
  background: var(--color-gold);
  margin-bottom: var(--space-2xl);
}
.about__body {
  color: var(--color-text-body);
  line-height: 2;
  letter-spacing: 0.04em;
}
.about__body p {
  margin-bottom: var(--space-lg);
}
.about__body p:last-child {
  margin-bottom: 0;
}
.about__image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2rem);
}
.about__image img,
.about__image .placeholder-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.about__image:hover img,
.about__image:hover .placeholder-img {
  transform: scale(1.03);
}
/* Decorative gold vignette */
.about__image::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(197,165,90,0.12), inset 0 0 80px rgba(10,10,10,0.5);
  z-index: 2;
  pointer-events: none;
}

/* ── 12. Treatments (SEC-04) ──────────────────── */
.treatments {
  padding: var(--space-section) 0;
  background: var(--color-noir-800);
}
.treatments__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.treatments__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
/* Center last row (3 items) */
.treatments__grid-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: calc(75% - var(--space-lg) / 4);
  margin: var(--space-lg) auto 0;
}
.treatment-card {
  background: var(--color-noir-700);
  border: 1px solid var(--color-noir-600);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
  position: relative;
  overflow: hidden;
}
.treatment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-gold-gradient);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}
.treatment-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
  border-color: var(--color-gold-muted);
}
.treatment-card:hover::before {
  transform: scaleX(1);
}
.treatment-card__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto var(--space-lg);
  overflow: hidden;
}
.treatment-card__icon picture {
  display: block;
  width: 100%;
  height: 100%;
}
.treatment-card__icon img,
.treatment-card__icon .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.treatment-card:hover .treatment-card__icon img,
.treatment-card:hover .treatment-card__icon .placeholder-img {
  transform: scale(1.1);
}
.treatment-card__name {
  font-family: var(--font-ja-heading);
  font-size: var(--text-card-title);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
.treatment-card__name-en {
  font-family: var(--font-en-display);
  font-size: var(--text-label);
  font-weight: 300;
  color: var(--color-gold-300);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.treatment-card__list {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}
.treatment-card__link {
  font-size: var(--text-caption);
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: gap var(--transition-base);
}
.treatment-card:hover .treatment-card__link {
  gap: var(--space-md);
}

/* ── 13. Cases Preview (SEC-05) ───────────────── */
.cases-preview {
  padding: var(--space-section) 0;
  background: var(--color-noir-900);
  border-top: 1px solid var(--color-gold-muted);
}
.cases-preview__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.cases-preview__stats {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.cases-preview__count {
  font-family: var(--font-number);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--color-gold);
  line-height: 1.2;
}
.cases-preview__count-label {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}
.cases-preview__note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}
/* Scroll wrapper with nav buttons */
.cases-preview__scroll-wrapper {
  position: relative;
}
.cases-preview__scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-lg) clamp(16px, 4vw, 60px) var(--space-xl);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.cases-preview__scroll:active {
  cursor: grabbing;
}
.cases-preview__scroll::-webkit-scrollbar {
  display: none;
}
/* Nav arrows */
.cases-preview__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-gold-muted);
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.cases-preview__nav:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: var(--color-gold);
}
.cases-preview__nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cases-preview__nav--prev {
  left: 8px;
}
.cases-preview__nav--next {
  right: 8px;
}
@media (max-width: 600px) {
  .cases-preview__nav {
    display: none;
  }
}
/* Card base */
.case-preview-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  width: min(420px, 38vw);
  scroll-snap-align: start;
  background: var(--color-noir-700);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-noir-600);
  transition: border-color var(--transition-base),
              transform var(--transition-base);
}
.case-preview-card:hover {
  border-color: var(--color-gold-muted);
  transform: translateY(-4px);
}
@media (max-width: 1024px) {
  .case-preview-card {
    width: min(360px, 60vw);
  }
}
@media (max-width: 600px) {
  .case-preview-card {
    width: min(320px, 85vw);
  }
}
/* Card images: Before/After toggle */
.case-preview-card__images {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
}
.case-preview-card__pic {
  display: block;
  width: 100%;
  height: 100%;
}
.case-preview-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-preview-card__pic--after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* PC: hover toggle */
@media (hover: hover) {
  .case-preview-card:hover .case-preview-card__pic--after {
    opacity: 1;
  }
}
/* Before/After label */
.case-preview-card__label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
}
/* Card info */
.case-preview-card__info {
  padding: 0 var(--space-md) var(--space-lg);
}
.case-preview-card__tags {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.case-preview-card__tag {
  font-size: var(--text-label);
  color: var(--color-gold);
  background: rgba(197, 165, 90, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}
.case-preview-card__title {
  font-family: var(--font-ja-heading);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
.case-preview-card__meta {
  font-size: var(--text-label);
  color: var(--color-text-muted);
}
.cases-preview__more {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* ── 14. Reasons / Why Choose Us (SEC-06) ─────── */
.reasons {
  padding: var(--space-section) 0;
  position: relative;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(197, 165, 90, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
    var(--color-noir-800);
  background-attachment: fixed, fixed, scroll;
  background-size: cover;
}
/* Dark marble texture */
.reasons::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(197, 165, 90, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 80%, rgba(197, 165, 90, 0.03) 0%, transparent 45%);
  pointer-events: none;
}
.reasons__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  position: relative;
}
.reasons__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  padding: var(--space-3xl) 0;
  position: relative;
}
.reasons__item + .reasons__item {
  border-top: 1px solid rgba(197, 165, 90, 0.15);
}
.reasons__item:nth-child(even) {
  direction: rtl;
}
.reasons__item:nth-child(even) > * {
  direction: ltr;
}
.reasons__text {
  position: relative;
}
.reasons__number {
  font-family: var(--font-en-display);
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 300;
  color: var(--color-gold);
  opacity: 0.12;
  position: absolute;
  top: -1.5rem;
  left: -0.5rem;
  line-height: 1;
  pointer-events: none;
}
.reasons__subtitle {
  font-family: var(--font-ja-heading);
  font-size: var(--text-card-title);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}
.reasons__desc {
  color: var(--color-text-body);
  line-height: 2;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
.reasons__image {
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.reasons__image img,
.reasons__image .placeholder-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.reasons__image:hover img,
.reasons__image:hover .placeholder-img {
  transform: scale(1.06);
}

/* ── 15. Doctors (SEC-07) ─────────────────────── */
.doctors {
  position: relative;
  padding: var(--space-section) 0;
  overflow: hidden;
}
.doctors__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.doctors__bg .placeholder-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #0e0e0e 0%, #151312 30%, #0e0e0e 60%, #151312 100%
  );
}
.doctors__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doctors__bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.8);
  z-index: 1;
}
.doctors__inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.doctors__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  margin-top: var(--space-3xl);
}
.doctor-card {
  text-align: center;
}
.doctor-card__image {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto var(--space-xl);
  overflow: hidden;
}
.doctor-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(197,165,90,0.12), inset 0 0 50px rgba(10,10,10,0.5);
  z-index: 2;
  pointer-events: none;
}
.doctor-card__image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.doctor-card__image img,
.doctor-card__image .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.doctor-card__role {
  font-size: var(--text-caption);
  color: var(--color-gold-300);
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}
.doctor-card__name {
  font-family: var(--font-ja-heading);
  font-size: var(--text-card-title);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
.doctor-card__name-en {
  font-family: var(--font-en-display);
  font-size: var(--text-caption);
  font-weight: 300;
  color: var(--color-gold-300);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}
.doctor-card__specialty {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}
.doctor-card__quote {
  font-family: var(--font-ja-heading);
  font-size: var(--text-body);
  font-style: normal;
  color: var(--color-text-body);
  line-height: 1.9;
  position: relative;
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--color-gold-muted);
}
.doctors__link {
  text-align: center;
  margin-top: var(--space-3xl);
}

/* ── 16. Price Digest (SEC-08) ────────────────── */
.price-digest {
  padding: var(--space-section) 0;
  background: var(--color-noir-800);
}
.price-digest__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.price-digest__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.price-card {
  background: var(--color-noir-700);
  border: 1px solid var(--color-noir-600);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  transition: border-color var(--transition-base),
              transform var(--transition-base);
  position: relative;
}
.price-card:hover {
  border-color: var(--color-gold-muted);
  transform: translateY(-4px);
}
.price-card__badge {
  position: absolute;
  top: 0;
  right: var(--space-md);
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  font-size: var(--text-label);
  font-weight: 500;
  padding: 4px 12px;
  letter-spacing: 0.08em;
}
.price-card__name {
  font-family: var(--font-ja-heading);
  font-size: var(--text-card-title);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}
.price-card__amount {
  font-family: var(--font-number);
  font-size: var(--text-price);
  font-weight: 300;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
}
.price-card__amount .yen {
  font-size: 0.6em;
  vertical-align: baseline;
}
.price-card__amount .tax {
  font-family: var(--font-ja-body);
  font-size: var(--text-label);
  color: var(--color-text-muted);
  margin-left: var(--space-xs);
}
.price-card__amount--subtle {
  font-family: var(--font-ja-body);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}
.price-card__info {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}
.price-card__info span {
  display: block;
}
.price-card__link {
  font-size: var(--text-caption);
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: gap var(--transition-base);
}
.price-card:hover .price-card__link {
  gap: var(--space-md);
}
.price-digest__more {
  text-align: center;
  margin-top: var(--space-2xl);
}
.price-digest__note {
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
}

/* ── 17. Reviews (SEC-09) ─────────────────────── */
.reviews {
  padding: var(--space-section) 0;
  background: var(--color-noir-900);
  position: relative;
}
.reviews::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(197, 165, 90, 0.03) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.reviews__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  position: relative;
}
.reviews__stats {
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.reviews__rating {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-sm);
}
.reviews__stars {
  color: var(--color-gold);
  font-size: 1.4rem;
  letter-spacing: 2px;
}
.reviews__score {
  font-family: var(--font-number);
  font-size: var(--text-subsection);
  font-weight: 300;
  color: var(--color-gold);
}
.reviews__score-total {
  font-family: var(--font-number);
  font-size: var(--text-body);
  color: var(--color-text-muted);
}
.reviews__count {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.review-card {
  background: var(--color-noir-700);
  padding: var(--space-xl);
  border-left: 3px solid var(--color-gold);
  position: relative;
  transition: transform var(--transition-base);
}
.review-card:hover {
  transform: translateY(-4px);
}
.review-card__stars {
  color: var(--color-gold);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: var(--space-md);
}
.review-card__text {
  font-size: var(--text-body);
  color: var(--color-text-body);
  line-height: 1.9;
  margin-bottom: var(--space-lg);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__meta {
  font-size: var(--text-label);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.review-card__meta-tag {
  background: rgba(197, 165, 90, 0.1);
  color: var(--color-gold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
}
.reviews__disclaimer {
  text-align: center;
  margin-top: var(--space-2xl);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  line-height: 2;
}

/* ── 18. Instagram (SEC-10) ───────────────────── */
.instagram {
  padding: var(--space-2xl) 0;
  background: var(--color-noir-800);
}
.instagram__label {
  text-align: center;
  font-family: var(--font-en-display);
  font-size: var(--text-section-en);
  font-weight: 300;
  color: var(--color-gold-300);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}
.instagram__feed {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  scrollbar-width: none;
  cursor: grab;
}
.instagram__feed:active {
  cursor: grabbing;
}
.instagram__feed::-webkit-scrollbar {
  display: none;
}
.instagram__item {
  flex: 0 0 250px;
  height: 250px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.instagram__item picture {
  display: block;
  width: 100%;
  height: 100%;
}
.instagram__item img,
.instagram__item .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.instagram__item:hover img,
.instagram__item:hover .placeholder-img {
  transform: scale(1.05);
}
.instagram__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(197, 165, 90, 0.3);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.instagram__item:hover::after {
  opacity: 1;
}
.instagram__item-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.instagram__item:hover .instagram__item-icon {
  opacity: 1;
}
.instagram__link {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ── 19. YouTube (SEC-11) ─────────────────────── */
.youtube {
  padding: var(--space-section) 0;
  background: var(--color-noir-800);
}
.youtube__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.youtube__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.youtube__card {
  transition: transform var(--transition-base);
}
.youtube__card:hover {
  transform: translateY(-4px);
}
.youtube__placeholder {
  aspect-ratio: 16 / 9;
  background: var(--color-noir-700);
  border: 1px solid var(--color-noir-600);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.youtube__card:hover .youtube__placeholder {
  border-color: var(--color-gold-muted);
}
.youtube__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(197, 165, 90, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  transition: background var(--transition-base), transform var(--transition-base);
}
.youtube__card:hover .youtube__play {
  background: rgba(197, 165, 90, 0.35);
  transform: scale(1.1);
}
.youtube__play svg {
  width: 24px;
  height: 24px;
  fill: var(--color-gold);
  margin-left: 3px;
}
.youtube__play-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}
.youtube__title {
  font-family: var(--font-ja-heading);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-top: var(--space-md);
  text-align: center;
}

/* ── 20. SNS Links (SEC-12) ───────────────────── */
.sns-links {
  padding: var(--space-3xl) 0;
  background: var(--color-noir-900);
}
.sns-links__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.sns-links__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.sns-card {
  background: var(--color-noir-700);
  padding: var(--space-xl);
  text-align: center;
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}
.sns-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
/* Brand color top border */
.sns-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.sns-card--instagram::before {
  background: linear-gradient(90deg, #833AB4, #FD1D1D, #F77737);
}
.sns-card--youtube::before {
  background: var(--color-youtube);
}
.sns-card--x::before {
  background: var(--color-x);
}
.sns-card--tiktok::before {
  background: linear-gradient(90deg, var(--color-tiktok-teal), var(--color-tiktok-pink));
}
.sns-card__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-md);
}
.sns-card__icon svg {
  width: 100%;
  height: 100%;
}
.sns-card--instagram .sns-card__icon svg {
  fill: var(--color-instagram);
}
.sns-card--youtube .sns-card__icon svg {
  fill: var(--color-youtube);
}
.sns-card--x .sns-card__icon svg {
  fill: var(--color-text-primary);
}
.sns-card--tiktok .sns-card__icon svg {
  fill: var(--color-text-primary);
}
.sns-card__name {
  font-family: var(--font-en-display);
  font-size: var(--text-card-title);
  font-weight: 300;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
.sns-card__handle {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ── 20.5 Parallax Utility ────────────────────── */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  /* iOS Safari does not support background-attachment: fixed */
  .parallax-bg {
    background-attachment: scroll;
  }
}

/* ── 21. CTA Section (SEC-13) ─────────────────── */
.cta-section {
  position: relative;
  padding: clamp(6rem, 12vw, 12rem) 0;
  overflow: hidden;
  /* Parallax background */
  background: linear-gradient(135deg, #0d0d0d, #1a1816 30%, #0d0d0d 60%, #1a1816);
  background-attachment: fixed;
  background-size: cover;
}
.cta-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-section__bg img,
.cta-section__bg .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-section__bg .placeholder-img {
  background: linear-gradient(
    135deg,
    #0d0d0d, #1a1816 30%, #0d0d0d 60%, #1a1816
  );
}
.cta-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.85),
    rgba(10, 10, 10, 0.75)
  );
}
.cta-section__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.cta-section__label {
  font-family: var(--font-en-display);
  font-size: var(--text-section-en);
  font-weight: 300;
  color: var(--color-gold-300);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.cta-section__title {
  font-family: var(--font-ja-heading);
  font-size: var(--text-section-title);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-lg);
}
.cta-section__sub {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2xl);
  line-height: 2;
}
.cta-section__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.cta-section__hours {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-xl);
}

/* ── 22. Footer ───────────────────────────────── */
.footer {
  background: var(--color-noir-900);
  border-top: 1px solid rgba(197, 165, 90, 0.15);
  padding: var(--space-3xl) 0 0;
}
.footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--color-noir-600);
}
.footer__brand {
  font-family: var(--font-en-display);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}
.footer__info {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: 2;
}
.footer__info p {
  margin-bottom: var(--space-sm);
}
.footer__heading {
  font-family: var(--font-en-display);
  font-size: var(--text-caption);
  font-weight: 300;
  color: var(--color-gold-300);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer__nav a {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  transition: color var(--transition-base), padding-left var(--transition-base);
}
.footer__nav a:hover {
  color: var(--color-gold);
  padding-left: var(--space-sm);
}
.footer__hours-table {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: 2;
}
.footer__hours-table .closed {
  color: var(--color-text-muted);
}
.footer__sns {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.footer__sns a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-noir-500);
  border-radius: 50%;
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
}
.footer__sns a:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.footer__sns svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.footer__compliance {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-noir-600);
}
.footer__compliance p {
  font-size: var(--text-label);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 2;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0;
}
.footer__copy {
  font-size: var(--text-label);
  color: var(--color-text-muted);
  font-family: var(--font-en-display);
  letter-spacing: 0.08em;
}
.footer__links {
  display: flex;
  gap: var(--space-lg);
}
.footer__links a {
  font-size: var(--text-label);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}
.footer__links a:hover {
  color: var(--color-gold);
}

/* ── 23. Mobile Fixed CTA ─────────────────────── */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-mobile-cta);
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid rgba(197, 165, 90, 0.2);
  transform: translateY(100%);
  transition: transform var(--transition-base);
}
.mobile-cta.is-visible {
  transform: translateY(0);
}
.mobile-cta__inner {
  display: flex;
  gap: var(--space-sm);
}
.mobile-cta .btn {
  flex: 1;
  font-size: 0.7rem;
  padding: 10px 0;
  border-radius: var(--radius-md);
}
.mobile-cta .btn svg {
  width: 14px;
  height: 14px;
}

/* ── 24. Scroll Reveal Animations ─────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-left] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
[data-reveal-left].is-visible {
  opacity: 1;
  transform: translateX(0);
}
[data-reveal-right] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
[data-reveal-right].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }
[data-reveal-delay="6"] { transition-delay: 0.6s; }

/* ── 25. Keyframes ────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

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

@keyframes scrollBounce {
  0%, 100% {
    transform: scaleY(0.4);
    opacity: 0.3;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ── 26. Responsive: Tablet Landscape (≤1280px) ─ */
@media (max-width: 1280px) {
  .treatments__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .treatments__grid-bottom {
    grid-template-columns: repeat(2, 1fr);
    max-width: 66%;
  }
}

/* ── 27. Responsive: Tablet (≤1024px) ─────────── */
@media (max-width: 1024px) {
  .header__nav {
    display: none;
  }
  .header__actions {
    display: none;
  }
  .header__burger {
    display: flex;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .about__image {
    transform: none;
    order: -1;
  }

  .treatments__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .treatments__grid-bottom {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .reasons__item {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .reasons__item:nth-child(even) {
    direction: ltr;
  }

  .doctors__grid {
    gap: var(--space-2xl);
  }

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

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

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

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ── 28. Responsive: SP (≤768px) ──────────────── */
@media (max-width: 768px) {
  :root {
    --space-section: clamp(3.5rem, 8vw, 5rem);
  }

  .hero__content {
    padding: 0 var(--space-xl);
  }
  .hero__title em {
    font-size: 1.2em;
  }
  .hero__cta {
    flex-direction: column;
  }
  .hero__cta .btn {
    width: 100%;
  }

  .treatments__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .treatments__grid-bottom {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    max-width: 100%;
  }
  .treatment-card {
    padding: var(--space-lg) var(--space-md);
  }
  .treatment-card__icon {
    width: 60px;
    height: 60px;
  }

  .doctors__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
  .doctor-card__image {
    width: 150px;
    height: 150px;
  }

  .reviews__grid {
    grid-template-columns: 1fr;
  }

  .instagram__item {
    flex: 0 0 200px;
    height: 200px;
  }

  .youtube__grid {
    grid-template-columns: 1fr;
  }

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

  .cta-section__buttons {
    flex-direction: column;
    align-items: center;
  }
  .cta-section__buttons .btn {
    width: 100%;
    max-width: 320px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  /* Show mobile CTA */
  .mobile-cta {
    display: block;
  }
  /* Add bottom padding for mobile CTA */
  .footer {
    padding-bottom: 4rem;
  }
}

/* ── 29. Responsive: SP Small (≤480px) ────────── */
@media (max-width: 480px) {
  .treatments__grid {
    grid-template-columns: 1fr;
  }
  .treatments__grid-bottom {
    grid-template-columns: 1fr;
  }

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

  .sns-links__grid {
    grid-template-columns: 1fr;
  }
}

/* ── 30. Accessibility ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__bg img {
    animation: none;
  }
  .marquee__track {
    animation: none;
  }
  [data-reveal],
  [data-reveal-left],
  [data-reveal-right] {
    opacity: 1;
    transform: none;
  }
  .hero__label,
  .hero__title,
  .hero__lead,
  .hero__cta {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ════════════════════════════════════════════════
   PHASE 2: Cases Page + Menu Page
   ════════════════════════════════════════════════ */

/* ── P2-01. Page Hero (shared) ───────────────── */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 80px;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg img,
.page-hero__bg .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__bg .placeholder-img {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1816 25%, #0d0d0d 50%, #1a1816 75%, #0d0d0d 100%);
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.4) 100%);
}
.page-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.page-hero__en {
  font-family: var(--font-en-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.3s forwards;
}
.page-hero__ja {
  font-family: var(--font-ja-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-top: 12px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.5s forwards;
}
.page-hero__sub {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  max-width: 640px;
  margin: 20px auto 0;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.7s forwards;
}

/* Breadcrumb */
.breadcrumb {
  position: relative;
  z-index: 2;
  padding: var(--space-lg) var(--space-xl);
  max-width: 1400px;
  margin: 0 auto;
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}
.breadcrumb__list a {
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}
.breadcrumb__list a:hover {
  color: var(--color-gold);
}
.breadcrumb__sep {
  color: var(--color-text-muted);
  font-size: 0.6em;
}

/* ── P2-02. Cases Filter ─────────────────────── */
.cases-filter {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-noir);
  padding: var(--space-lg) 0 20px;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.cases-filter.is-sticky {
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-gold-muted);
}
.cases-filter__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.cases-filter__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.cases-filter__tabs::-webkit-scrollbar {
  display: none;
}
.cases-filter__tab {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--color-text-secondary);
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ja-body);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.cases-filter__tab:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.cases-filter__tab.is-active {
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  border-color: var(--color-gold);
  font-weight: 500;
}
.cases-filter__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-md);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  max-height: 0;
  overflow: hidden;
}
.cases-filter__sub.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px;
}
.cases-filter__sub-btn {
  font-size: 12px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.cases-filter__sub-btn:hover {
  border-color: var(--color-gold-muted);
  color: var(--color-gold);
}
.cases-filter__sub-btn.is-active {
  background: rgba(197,165,90,0.15);
  border-color: var(--color-gold-muted);
  color: var(--color-gold);
}
.cases-filter__count {
  text-align: center;
  margin-top: var(--space-md);
  font-size: 13px;
  color: var(--color-text-muted);
}
.cases-filter__count-num {
  font-family: var(--font-number);
  color: var(--color-gold);
  font-size: 18px;
}

/* ── P2-03. Cases Grid ───────────────────────── */
.cases-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-3xl);
}
.cases-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ── P2-04. Case Card ────────────────────────── */
.case-card {
  background: var(--color-noir-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  cursor: pointer;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gold-muted);
}
.case-card[data-hidden="true"] {
  display: none;
}
/* Before/After image area */
.case-card__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
.case-card__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}
.case-card__img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.case-card__img img,
.case-card__img .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.case-card:hover .case-card__img img,
.case-card:hover .case-card__img .placeholder-img {
  transform: scale(1.03);
}
.case-card__img-label {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-en-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  z-index: 2;
}
.case-card__divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--color-gold);
  z-index: 3;
}
/* Privacy placeholder (no image) */
.case-card__privacy {
  aspect-ratio: 3/4;
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #1a1a1a, #111);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  gap: 16px;
}
.case-card__privacy-icon {
  width: 48px;
  height: 48px;
  color: var(--color-gold);
}
.case-card__privacy-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.case-card__privacy-text {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
/* Card info area */
.case-card__info {
  padding: var(--space-lg);
}
.case-card__cat-label {
  font-family: var(--font-en-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.case-card__title {
  font-family: var(--font-ja-heading);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: 6px;
}
.case-card__patient {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}
.case-card__sep {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px;
}
.case-card__summary {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Medical compliance info */
.case-card__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  margin-bottom: var(--space-md);
}
.case-card__details dt {
  font-weight: 500;
  color: var(--color-text-secondary);
}
.case-card__details dd {
  color: var(--color-text-muted);
}
.case-card__details .case-card__price {
  color: var(--color-gold);
  font-family: var(--font-number);
  font-size: 14px;
}
.case-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  transition: gap var(--transition-base);
}
.case-card:hover .case-card__link {
  gap: 12px;
}
.case-card__link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ── P2-05. Cases Modal ──────────────────────── */
.cases-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.cases-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.cases-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cases-modal__body {
  position: relative;
  z-index: 1;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-noir-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  transform: scale(0.95);
  transition: transform var(--transition-base);
}
.cases-modal.is-open .cases-modal__body {
  transform: scale(1);
}
.cases-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 24px;
  z-index: 10;
  border-radius: 50%;
  background: rgba(10,10,10,0.5);
  transition: transform var(--transition-base);
}
.cases-modal__close:hover {
  transform: rotate(90deg);
}
/* B/A Slider */
.cases-modal__slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.cases-modal__slider-before,
.cases-modal__slider-after {
  position: absolute;
  inset: 0;
}
.cases-modal__slider-before picture,
.cases-modal__slider-after picture {
  display: block;
  width: 100%;
  height: 100%;
}
.cases-modal__slider-before img,
.cases-modal__slider-before .placeholder-img,
.cases-modal__slider-after img,
.cases-modal__slider-after .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cases-modal__slider-before {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
}
.cases-modal__slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--color-gold);
  z-index: 3;
  transform: translateX(-50%);
}
.cases-modal__slider-handle::after {
  content: '◀▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  background: var(--color-noir);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  letter-spacing: 2px;
}
.cases-modal__slider-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  cursor: ew-resize;
  width: 100%;
  height: 100%;
  margin: 0;
}
.cases-modal__slider-labels {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}
.cases-modal__slider-label {
  font-family: var(--font-en-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
/* Modal info */
.cases-modal__info {
  padding: 40px;
}
.cases-modal__title {
  font-family: var(--font-ja-heading);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}
.cases-modal__meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}
.cases-modal__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Detail table */
.cases-modal__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}
.cases-modal__table th {
  width: 140px;
  color: var(--color-gold);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}
.cases-modal__table td {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Doctor comment */
.cases-modal__comment {
  background: var(--color-noir-700);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-gold);
  margin-bottom: 32px;
}
.cases-modal__comment-doctor {
  font-size: 13px;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.cases-modal__comment-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-secondary);
}
.cases-modal__cta {
  width: 100%;
}

/* ── P2-06. Cases CTA ────────────────────────── */
.cases-cta {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-400));
  padding: 60px 40px;
  text-align: center;
}
.cases-cta__title {
  font-family: var(--font-ja-heading);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 500;
  color: var(--color-text-on-gold);
  margin-bottom: var(--space-md);
}
.cases-cta__sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(10,10,10,0.7);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cases-cta .btn--dark {
  background: var(--color-noir);
  color: var(--color-text-primary);
  padding: 14px 40px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: all var(--transition-base);
}
.cases-cta .btn--dark:hover {
  background: var(--color-noir-700);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.cases-cta__contact {
  margin-top: var(--space-lg);
  font-size: 14px;
  color: rgba(10,10,10,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cases-cta__contact a {
  color: var(--color-text-on-gold);
  font-weight: 500;
  transition: opacity var(--transition-base);
}
.cases-cta__contact a:hover {
  opacity: 0.7;
}

/* ── P2-07. Menu Nav (Category Tabs) ─────────── */
.menu-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-noir);
  padding: 0;
  transition: background var(--transition-base);
}
.menu-nav.is-sticky {
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-gold-muted);
}
.menu-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.menu-nav__inner::-webkit-scrollbar {
  display: none;
}
.menu-nav__tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  min-width: max-content;
}
.menu-nav__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-ja-body);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.menu-nav__tab:hover,
.menu-nav__tab.is-active {
  border-bottom-color: var(--color-gold);
  color: var(--color-gold);
}
.menu-nav__tab-icon {
  width: 24px;
  height: 24px;
}
.menu-nav__tab-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* ── P2-08. Menu Category Header ─────────────── */
.menu-category {
  position: relative;
}
.menu-category__header {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 80px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.menu-category__header--alt {
  background: var(--color-noir-700);
}
.menu-category__header-inner {
  max-width: 700px;
  padding: 0 60px;
}
.menu-category__header-inner {
  margin-left: auto;
}
.menu-category--reverse .menu-category__header-inner {
  margin-right: auto;
  margin-left: 0;
}
.menu-category__en {
  font-family: var(--font-en-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}
.menu-category__ja {
  font-family: var(--font-ja-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-top: var(--space-sm);
}
.menu-category__desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-top: var(--space-lg);
  max-width: 480px;
}
.menu-category__count {
  font-size: 13px;
  color: var(--color-gold);
  margin-top: var(--space-md);
}
.menu-category__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.menu-category__image img,
.menu-category__image .placeholder-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.menu-category__image:hover img,
.menu-category__image:hover .placeholder-img {
  transform: scale(1.03);
}
/* Decorative gold vignette */
.menu-category__image::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(197,165,90,0.12), inset 0 0 80px rgba(10,10,10,0.5);
  z-index: 2;
  pointer-events: none;
}

/* ── P2-09. Menu Cards ───────────────────────── */
.menu-category__cards {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3xl) 40px;
}

/* Light treatment card (price impact) */
.menu-card--light {
  background: var(--color-noir-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 40px;
  margin-bottom: var(--space-lg);
  transition: border-color var(--transition-base);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}
.menu-card--light:hover {
  border-color: var(--color-gold-muted);
}
.menu-card__name {
  font-family: var(--font-ja-heading);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.menu-card__name-en {
  font-family: var(--font-en-display);
  font-size: 13px;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.menu-card__desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-top: var(--space-md);
}
.menu-card__recommend {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-card__recommend-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.menu-card__recommend-item::before {
  content: '✓';
  color: var(--color-gold);
  font-weight: 500;
  flex-shrink: 0;
}
.menu-card__price-area {
  text-align: center;
}
.menu-card__price {
  font-family: var(--font-number);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--color-gold);
  line-height: 1.2;
}
.menu-card__price .yen {
  font-size: 0.5em;
}
.menu-card__price-from {
  font-size: 20px;
}
.menu-card__price-tax {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.menu-card__price-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Surgical card (trust-focused) */
.menu-card--surgical {
  background: var(--color-noir-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 0;
  margin-bottom: 32px;
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.menu-card--surgical:hover {
  border-color: var(--color-gold-muted);
}
.menu-card__banner {
  height: 200px;
  overflow: hidden;
  position: relative;
}
.menu-card__banner img,
.menu-card__banner .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-card__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, var(--color-noir-800) 100%);
}
.menu-card__body {
  padding: 40px;
}
.menu-card__body .menu-card__name {
  font-size: 24px;
}
/* Steps */
.menu-card__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.menu-card__step {
  text-align: center;
  position: relative;
}
.menu-card__step:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 18px;
  right: -16px;
  color: var(--color-gold-muted);
  font-size: 18px;
}
.menu-card__step-num {
  font-family: var(--font-number);
  font-size: 36px;
  font-weight: 300;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.menu-card__step-text {
  font-size: 13px;
  color: var(--color-text-secondary);
}
/* Price table (surgical) */
.menu-card__price-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
}
.menu-card__price-table th {
  background: var(--color-noir-700);
  padding: 12px 20px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: left;
  font-weight: 400;
}
.menu-card__price-table td {
  padding: 12px 20px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--color-text-secondary);
}
.menu-card__price-table .price-cell {
  text-align: right;
  font-family: var(--font-number);
  font-size: 16px;
  color: var(--color-gold);
}
/* Safety points */
.menu-card__safety {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: var(--space-lg) 0;
}
.menu-card__safety-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.menu-card__safety-icon {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
  flex-shrink: 0;
}
.menu-card__safety-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.menu-card__risk {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: var(--space-md);
}

/* Category recommend */
.menu-category__recommend {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-xl);
}
.menu-category__recommend-label {
  font-family: var(--font-ja-heading);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-gold);
  margin-bottom: 12px;
}
.menu-category__recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.menu-category__recommend-list li {
  font-size: 13px;
  color: var(--color-text-secondary);
  background: rgba(197,165,90,0.08);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(197,165,90,0.15);
}

/* Category CTA strip */
.menu-category__cta {
  text-align: center;
  padding: 32px 40px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── P2-09b. Menu Hub Category Blocks ────────── */
.menu-hub__category {
  padding: var(--space-section) 0;
  border-bottom: 1px solid rgba(197, 165, 90, 0.15);
}
.menu-hub__category:last-of-type {
  border-bottom: none;
}
.menu-hub__category-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.menu-hub__category:nth-child(even) .menu-hub__category-inner {
  direction: rtl;
}
.menu-hub__category:nth-child(even) .menu-hub__category-inner > * {
  direction: ltr;
}
.menu-hub__category-image {
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
}
.menu-hub__category-image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.menu-hub__category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.menu-hub__category:hover .menu-hub__category-image img {
  transform: scale(1.05);
}
.menu-hub__category-text {
  display: flex;
  flex-direction: column;
}
.menu-hub__category-en {
  font-family: var(--font-en-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  margin-bottom: 4px;
}
.menu-hub__category-ja {
  font-family: var(--font-ja-heading);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}
.menu-hub__category-desc {
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-text-body);
  margin-bottom: var(--space-xl);
}
.menu-hub__category-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--space-lg);
}
.menu-hub__category-list li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--text-body);
  color: var(--color-text-body);
}
.menu-hub__category-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: 500;
}
@media (max-width: 767px) {
  .menu-hub__category-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: 0 20px;
  }
  .menu-hub__category:nth-child(even) .menu-hub__category-inner {
    direction: ltr;
  }
  .menu-hub__category {
    padding: var(--space-3xl) 0;
  }
}

/* ── P2-09c. Category Detail Page — Related Cases ── */
.related-cases {
  text-align: center;
  padding: var(--space-3xl) 40px;
}
.related-cases__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ja-heading);
  font-size: var(--text-body);
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  transition: all var(--transition-base);
}
.related-cases__link:hover {
  background: var(--color-gold);
  color: var(--color-text-on-gold);
}
.related-cases__link svg {
  transition: transform var(--transition-base);
}
.related-cases__link:hover svg {
  transform: translateX(4px);
}

/* ── P2-10. Price List Table ─────────────────── */
.price-list {
  padding: 80px 0;
  background: var(--color-noir-700);
}
.price-list__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.price-list__title-en {
  font-family: var(--font-en-display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 300;
  color: var(--color-gold);
  text-align: center;
  letter-spacing: 0.1em;
}
.price-list__title-ja {
  font-family: var(--font-ja-heading);
  font-size: 16px;
  color: var(--color-text-primary);
  text-align: center;
  margin-top: var(--space-sm);
  margin-bottom: 48px;
}
.price-list__table {
  width: 100%;
  border-collapse: collapse;
}
.price-list__table .cat-header td {
  background: var(--color-noir);
  padding: 16px 24px;
  font-family: var(--font-en-display);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  text-transform: uppercase;
}
.price-list__table .item-row td {
  padding: 14px 24px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.price-list__table .item-row:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}
.price-list__table .item-name {
  color: var(--color-text-primary);
}
.price-list__table .item-price {
  text-align: right;
  font-family: var(--font-number);
  font-size: 15px;
  color: var(--color-gold);
  white-space: nowrap;
}
.price-list__notes {
  margin-top: 32px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.price-list__notes p {
  margin-bottom: 4px;
}

/* ── P2-11. Menu CTA ─────────────────────────── */
.menu-cta {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-400));
  padding: 60px 40px;
  text-align: center;
}
.menu-cta__title {
  font-family: var(--font-ja-heading);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 500;
  color: var(--color-text-on-gold);
  margin-bottom: var(--space-md);
}
.menu-cta__sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(10,10,10,0.7);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.menu-cta .btn--dark {
  background: var(--color-noir);
  color: var(--color-text-primary);
  padding: 14px 40px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: all var(--transition-base);
}
.menu-cta .btn--dark:hover {
  background: var(--color-noir-700);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.menu-cta__contact {
  margin-top: var(--space-lg);
  font-size: 14px;
  color: rgba(10,10,10,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.menu-cta__contact a {
  color: var(--color-text-on-gold);
  font-weight: 500;
}

/* ── P2 Responsive ───────────────────────────── */
@media (max-width: 1024px) {
  .menu-category__header {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    padding: 60px 40px;
    width: auto;
    margin-left: 0;
  }
  .menu-category:nth-child(even) .menu-category__header {
    direction: ltr;
  }
  .menu-category__header-inner {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .menu-category__image {
    order: -1;
  }
  .menu-card--light {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .menu-card__price-area {
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  .menu-card__steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .cases-modal__slider {
    height: 300px;
  }
  .cases-modal__info {
    padding: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .cases-grid__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .cases-filter__inner {
    padding: 0 20px;
  }
  .cases-grid {
    padding: 0 20px 60px;
  }
  .page-hero {
    min-height: 40vh;
    padding-bottom: 48px;
  }
  .menu-nav__tabs {
    justify-content: flex-start;
  }
  .menu-category__header {
    padding: 40px 20px;
  }
  .menu-category__cards {
    padding: var(--space-2xl) 20px;
  }
  .menu-card--light {
    padding: var(--space-lg);
  }
  .menu-card__body {
    padding: var(--space-lg);
  }
  .menu-card__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .menu-card__step:not(:last-child)::after {
    display: none;
  }
  .cases-modal__slider {
    height: 250px;
  }
  .cases-modal__table th,
  .cases-modal__table td {
    display: block;
    width: 100%;
    padding: 8px 16px;
  }
  .cases-modal__table th {
    border-bottom: none;
    padding-bottom: 0;
  }
  .price-list__inner {
    padding: 0 20px;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .cases-grid__items {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cases-filter__tabs {
    justify-content: flex-start;
  }
  .menu-card__steps {
    grid-template-columns: 1fr 1fr;
  }
}

/* ════════════════════════════════════════════════
   PHASE 3: Doctors Page + Clinic Page
   ════════════════════════════════════════════════ */

/* ── P3-01. Doctors Hero ─────────────────────── */
.doctors-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 80px;
  overflow: hidden;
}
.doctors-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.doctors-hero__bg img,
.doctors-hero__bg .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.doctors-hero__bg .placeholder-img {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1816 25%, #0d0d0d 50%, #1a1816 75%, #0d0d0d 100%);
}
.doctors-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.8) 100%);
}
.doctors-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.doctors-hero__en {
  font-family: var(--font-en-display);
  font-size: clamp(3rem, 6vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.3s forwards;
}
.doctors-hero__ja {
  font-family: var(--font-ja-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-top: 12px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.5s forwards;
}
.doctors-hero__sub {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  max-width: 580px;
  margin: 20px auto 0;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.7s forwards;
}

/* ── P3-02. Philosophy Band ──────────────────── */
.doctors-philosophy {
  padding: 80px 40px;
  text-align: center;
  background: var(--color-noir-800);
}
.doctors-philosophy__line-top,
.doctors-philosophy__line-bottom {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--color-gold);
  margin: 0 auto;
}
.doctors-philosophy__line-top {
  margin-bottom: 32px;
}
.doctors-philosophy__line-bottom {
  margin-top: 32px;
}
.doctors-philosophy__quote {
  margin: 0;
}
.doctors-philosophy__en {
  font-family: var(--font-en-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.doctors-philosophy__ja {
  font-family: var(--font-ja-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: var(--space-md);
}
.doctors-philosophy__desc {
  font-family: var(--font-ja-body);
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-secondary);
  max-width: 720px;
  margin: var(--space-lg) auto 0;
}

/* ── P3-03. Doctor Profile (2-column) ────────── */
.doctor-profile {
  background: var(--color-noir);
}
.doctor-profile--reverse {
  background: var(--color-noir-800);
}
.doctor-profile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.doctor-profile__grid--reverse {
  grid-template-columns: 1fr 1fr;
}

/* Photo column */
.doctor-profile__photo {
  position: relative;
  overflow: hidden;
}
.doctor-profile__photo img,
.doctor-profile__photo .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doctor-profile__photo .placeholder-img {
  background: linear-gradient(135deg, #151312 0%, #1a1816 50%, #151312 100%);
  min-height: 70vh;
}
.doctor-profile__photo-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.6) 100%);
  pointer-events: none;
}
.doctor-profile__photo-name-mobile {
  display: none;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  color: var(--color-text-primary);
}
.doctor-profile__photo-name-mobile span:first-child {
  display: block;
  font-size: 12px;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.doctor-profile__photo-name-mobile span:last-child {
  font-family: var(--font-ja-heading);
  font-size: 20px;
  font-weight: 500;
}

/* Text column */
.doctor-profile__text {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.doctor-profile__role {
  font-family: var(--font-en-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
}
.doctor-profile__name {
  font-family: var(--font-ja-heading);
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-top: var(--space-sm);
}
.doctor-profile__furigana {
  font-family: var(--font-ja-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.doctor-profile__name-en {
  font-family: var(--font-en-display);
  font-size: 16px;
  color: var(--color-gold);
  margin-top: var(--space-sm);
  letter-spacing: 0.05em;
}
.doctor-profile__divider {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  margin: 32px 0;
}

/* Bio text */
.doctor-profile__bio {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-secondary);
}
.doctor-profile__bio p {
  margin-bottom: 20px;
}
.doctor-profile__bio p:last-child {
  margin-bottom: 0;
}
.doctor-profile__num {
  font-family: var(--font-number);
  font-size: 120%;
  color: var(--color-gold);
  font-weight: 400;
}

/* Section labels (CAREER, QUALIFICATION) */
.doctor-profile__section-label {
  font-family: var(--font-en-display);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  margin-top: 40px;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
}

/* Career Timeline */
.career-timeline {
  position: relative;
  padding-left: 24px;
  border-left: 1px solid var(--color-gold-muted);
}
.career-timeline__item {
  position: relative;
  padding: 0 0 24px 0;
}
.career-timeline__item:last-child {
  padding-bottom: 0;
}
.career-timeline__item::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}
.career-timeline__year {
  font-family: var(--font-number);
  font-size: 14px;
  color: var(--color-gold);
  letter-spacing: 0.05em;
}
.career-timeline__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.6;
}

/* Qualifications list */
.doctor-profile__qualifications {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 2;
}
.doctor-profile__qualifications li {
  padding-left: 20px;
  position: relative;
}
.doctor-profile__qualifications li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: 500;
}

/* Specialty Tags */
.doctor-profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-lg);
}
.doctor-tag {
  font-size: 12px;
  padding: 6px 14px;
  border: 1px solid var(--color-gold-muted);
  border-radius: 100px;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  transition: all var(--transition-base);
}
.doctor-tag:hover {
  background: rgba(197,165,90,0.1);
  border-color: var(--color-gold);
}

/* ── P3-04. Parallax Band ────────────────────── */
.doctors-parallax {
  position: relative;
  width: 100%;
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e0e0e 0%, #151312 30%, #0e0e0e 60%, #151312 100%);
}
.doctors-parallax__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.5);
}
.doctors-parallax__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--space-xl);
}
.doctors-parallax__en {
  font-family: var(--font-en-display);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 400;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.doctors-parallax__en em {
  font-style: italic;
}
.doctors-parallax__ja {
  font-family: var(--font-ja-heading);
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin-top: 12px;
}

/* ── P3-05. Doctors Stats ────────────────────── */
.doctors-stats-section {
  padding: 80px 40px;
  background: var(--color-noir);
}
.doctors-stats-section__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.doctors-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.doctors-stats__item {
  text-align: center;
  padding: 40px 24px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base);
}
.doctors-stats__item:hover {
  border-color: var(--color-gold-muted);
}
.doctors-stats__label {
  font-family: var(--font-en-display);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.doctors-stats__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-secondary);
}
.doctors-stats__number {
  font-family: var(--font-number);
  font-size: 200%;
  color: var(--color-gold);
  font-weight: 400;
}

/* ── P3-06. Doctors Message ──────────────────── */
.doctors-message {
  padding: 80px 40px;
  background: var(--color-noir-800);
}
.doctors-message__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.doctors-message__label {
  font-family: var(--font-en-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
}
.doctors-message__line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  margin: 20px auto;
}
.doctors-message__body {
  font-family: var(--font-ja-heading);
  font-size: 16px;
  line-height: 2.0;
  color: var(--color-text-primary);
  text-align: left;
}
.doctors-message__body p {
  margin-bottom: var(--space-lg);
}
.doctors-message__body p:last-child {
  margin-bottom: 0;
}
.doctors-message__signature {
  font-family: var(--font-ja-heading);
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 32px;
  text-align: right;
}

/* ── P3-07. Clinic Gallery ───────────────────── */
.clinic-gallery-section {
  padding: 80px 0;
  background: var(--color-noir);
}
.clinic-gallery-section__header {
  text-align: center;
  padding: 0 var(--space-xl) var(--space-xl);
}
.clinic-gallery-section__en {
  font-family: var(--font-en-display);
  font-size: clamp(1.8rem, 3.5vw, 2.25rem);
  font-weight: 300;
  color: var(--color-gold);
  letter-spacing: 0.1em;
}
.clinic-gallery-section__ja {
  font-family: var(--font-ja-heading);
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
}

.clinic-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto;
  gap: 4px;
}
.clinic-gallery__item:nth-child(1) { grid-column: 1 / 4; }
.clinic-gallery__item:nth-child(2) { grid-column: 4 / 5; }
.clinic-gallery__item:nth-child(3) { grid-column: 5 / 7; }
.clinic-gallery__item:nth-child(4) { grid-column: 1 / 2; }
.clinic-gallery__item:nth-child(5) { grid-column: 2 / 5; }
.clinic-gallery__item:nth-child(6) { grid-column: 5 / 7; }
.clinic-gallery__item:nth-child(7) { grid-column: 1 / 4; }
.clinic-gallery__item:nth-child(8) { grid-column: 4 / 7; }
.clinic-gallery__item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.clinic-gallery__item img,
.clinic-gallery__item .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  aspect-ratio: auto;
  min-height: 180px;
}
.clinic-gallery__item:hover img,
.clinic-gallery__item:hover .placeholder-img {
  transform: scale(1.03);
}
.clinic-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.clinic-gallery__item:hover .clinic-gallery__caption {
  opacity: 1;
}

/* ── P3-08. Clinic Info Table ────────────────── */
.clinic-info {
  padding: 80px 40px;
  background: var(--color-noir-800);
}
.clinic-info__inner {
  max-width: 900px;
  margin: 0 auto;
}
.clinic-info__header {
  text-align: center;
  margin-bottom: 40px;
}
.clinic-info__en {
  font-family: var(--font-en-display);
  font-size: clamp(1.8rem, 3.5vw, 2.25rem);
  font-weight: 300;
  color: var(--color-gold);
  letter-spacing: 0.1em;
}
.clinic-info__ja {
  font-family: var(--font-ja-heading);
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
}
.clinic-info-table {
  width: 100%;
  border-collapse: collapse;
}
.clinic-info-table th {
  width: 160px;
  padding: 20px 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gold);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-ja-body);
}
.clinic-info-table td {
  padding: 20px 24px;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.clinic-info-table a {
  color: var(--color-gold);
  transition: opacity var(--transition-base);
}
.clinic-info-table a:hover {
  opacity: 0.7;
}

/* ── P3-09. Hours Table ──────────────────────── */
.clinic-hours {
  margin-top: 48px;
}
.clinic-hours__en {
  font-family: var(--font-en-display);
  font-size: 20px;
  color: var(--color-gold);
  letter-spacing: 0.1em;
}
.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-lg);
  text-align: center;
}
.hours-table th {
  padding: 14px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-gold);
}
.hours-table td {
  padding: 14px 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hours-open {
  color: var(--color-gold);
}
.hours-closed {
  color: var(--color-text-muted);
}
.clinic-hours__notes {
  margin-top: var(--space-md);
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.clinic-hours__notes p {
  margin-bottom: 4px;
}

/* ── P3-10. Access Map ───────────────────────── */
.clinic-access {
  padding: 80px 40px;
  background: var(--color-noir);
}
.clinic-access__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.clinic-map {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.clinic-map iframe {
  display: block;
  width: 100%;
  height: 450px;
}
.clinic-access__title {
  font-family: var(--font-en-display);
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 300;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}
.clinic-access__address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-bottom: 32px;
}
.clinic-access__sub-label {
  font-family: var(--font-en-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-top: 32px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.clinic-access__station {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}
.clinic-access__station strong {
  color: var(--color-text-primary);
  font-weight: 500;
}
.clinic-access__line-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--space-md);
}
.access-line {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.access-line::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.access-line--ginza::before {
  background: #FF9500;
}
.access-line--hanzomon::before {
  background: #8B76D0;
}
.access-line--chiyoda::before {
  background: #00BB85;
}
.clinic-access__car {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.clinic-access__steps {
  counter-reset: none;
}
.clinic-access__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}
.clinic-access__steps li:last-child {
  margin-bottom: 0;
}
.clinic-access__step-num {
  font-family: var(--font-number);
  font-size: 24px;
  font-weight: 300;
  color: var(--color-gold);
  line-height: 1;
  flex-shrink: 0;
  min-width: 24px;
}

/* ── P3-11. Commitment Cards ─────────────────── */
.clinic-commitment {
  padding: 80px 40px;
  background: var(--color-noir-800);
}
.clinic-commitment__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.clinic-commitment__header {
  text-align: center;
  margin-bottom: 48px;
}
.clinic-commitment__en {
  font-family: var(--font-en-display);
  font-size: clamp(1.8rem, 3.5vw, 2.25rem);
  font-weight: 300;
  color: var(--color-gold);
  letter-spacing: 0.1em;
}
.clinic-commitment__ja {
  font-family: var(--font-ja-heading);
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
}
.commitment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.commitment-card {
  text-align: center;
  padding: 48px 32px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.commitment-card:hover {
  border-color: var(--color-gold-muted);
  transform: translateY(-4px);
}
.commitment-card__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-lg);
}
.commitment-card__icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
}
.commitment-card__title {
  font-family: var(--font-ja-heading);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}
.commitment-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* CTA address (clinic page extension) */
.cta-section__address {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* ── P3 Responsive: Tablet (≤1024px) ─────────── */
@media (max-width: 1024px) {
  .doctor-profile__grid,
  .doctor-profile__grid--reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .doctor-profile__photo {
    order: -1;
  }
  .doctor-profile__photo .placeholder-img {
    min-height: 50vh;
    aspect-ratio: 3/4;
    max-height: 70vh;
  }
  .doctor-profile__photo-name-mobile {
    display: block;
  }
  .doctor-profile__text {
    padding: 48px 40px;
  }
  .doctors-stats {
    gap: 24px;
  }
  .clinic-access__grid {
    grid-template-columns: 1fr;
  }
  .clinic-map iframe {
    height: 350px;
  }
  .commitment-grid {
    gap: 24px;
  }
}

/* ── P3 Responsive: SP (≤768px) ──────────────── */
@media (max-width: 768px) {
  .doctors-hero {
    min-height: 50vh;
    padding-bottom: 48px;
  }
  .doctors-philosophy {
    padding: 48px 24px;
  }
  .doctor-profile__text {
    padding: 32px 24px;
  }
  .doctors-parallax {
    height: 30vh;
  }
  .doctors-stats {
    grid-template-columns: 1fr;
  }
  .doctors-message {
    padding: 48px 24px;
  }
  .doctors-message__body {
    font-size: 15px;
  }
  .clinic-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .clinic-gallery__item:nth-child(1),
  .clinic-gallery__item:nth-child(2),
  .clinic-gallery__item:nth-child(3),
  .clinic-gallery__item:nth-child(4),
  .clinic-gallery__item:nth-child(5),
  .clinic-gallery__item:nth-child(6),
  .clinic-gallery__item:nth-child(7),
  .clinic-gallery__item:nth-child(8) {
    grid-column: auto;
  }
  .clinic-gallery__item img,
  .clinic-gallery__item .placeholder-img {
    min-height: 150px;
  }
  .clinic-gallery__caption {
    opacity: 1;
    font-size: 11px;
    padding: 8px 12px;
  }
  .clinic-info {
    padding: 48px 20px;
  }
  .clinic-info-table th {
    display: block;
    width: 100%;
    padding: 12px 0 0;
    border-bottom: none;
  }
  .clinic-info-table td {
    display: block;
    width: 100%;
    padding: 4px 0 12px;
  }
  .hours-table {
    font-size: 12px;
  }
  .hours-table th,
  .hours-table td {
    padding: 10px 4px;
  }
  .clinic-access {
    padding: 48px 20px;
  }
  .clinic-map iframe {
    height: 280px;
  }
  .commitment-grid {
    grid-template-columns: 1fr;
  }
  .commitment-card {
    padding: 32px 24px;
  }
}

/* ── International Patients (EN/ZH only) ──── */
.international-patients {
  padding: var(--space-4xl) 0;
  background: var(--color-noir-800);
  border-top: 1px solid rgba(197, 165, 90, 0.15);
  border-bottom: 1px solid rgba(197, 165, 90, 0.15);
}
.international-patients__content {
  max-width: 1100px;
  margin: 0 auto;
}
.international-patients__intro {
  font-family: var(--font-ja-body);
  font-size: var(--text-body);
  color: var(--color-text-body);
  line-height: 1.9;
  text-align: center;
  margin-bottom: var(--space-3xl);
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
.international-patients__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.international-patients__card {
  background: var(--color-noir-700);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: all var(--transition-base);
}
.international-patients__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: var(--color-gold-muted);
}
.international-patients__card h3 {
  font-family: var(--font-en-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--color-gold);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.04em;
}
.international-patients__card ul,
.international-patients__card ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.international-patients__card li {
  font-family: var(--font-ja-body);
  font-size: var(--text-caption);
  color: var(--color-text-body);
  line-height: 1.7;
  padding-left: 1.2em;
  position: relative;
}
.international-patients__card ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-gold);
}
.international-patients__card ol {
  counter-reset: step;
}
.international-patients__card ol li {
  counter-increment: step;
}
.international-patients__card ol li::before {
  content: counter(step) '.';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-family: var(--font-number);
  font-weight: 400;
}
@media (max-width: 768px) {
  .international-patients__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .international-patients__card {
    padding: 28px 24px;
  }
}

/* ── Chinese (Simplified) Font Override ─────── */
[lang="zh-Hans"] body {
  font-family: 'Noto Sans SC', 'Noto Sans JP', sans-serif;
  letter-spacing: 0.02em;
}
[lang="zh-Hans"] .serif,
[lang="zh-Hans"] .section-title__ja,
[lang="zh-Hans"] .hero__title,
[lang="zh-Hans"] .philosophy__title,
[lang="zh-Hans"] .doctor-card__name,
[lang="zh-Hans"] .footer__logo-text {
  font-family: 'Noto Serif SC', 'Noto Serif JP', serif;
}
[lang="zh-Hans"] .font-ja-heading,
[lang="zh-Hans"] h1:not([class*="en"]),
[lang="zh-Hans"] h2:not([class*="en"]),
[lang="zh-Hans"] h3:not([class*="en"]) {
  font-family: 'Noto Serif SC', 'Noto Serif JP', serif;
}
[lang="zh-Hans"] .font-ja-body,
[lang="zh-Hans"] p,
[lang="zh-Hans"] li,
[lang="zh-Hans"] td,
[lang="zh-Hans"] th,
[lang="zh-Hans"] label,
[lang="zh-Hans"] input,
[lang="zh-Hans"] textarea,
[lang="zh-Hans"] select {
  font-family: 'Noto Sans SC', 'Noto Sans JP', sans-serif;
}

/* ── Image Decoration: Vignette + Gold Corner Frames ── */

/* A. Vignette — soft 4-edge fade (applied to img to preserve pseudo-element corners) */
.about__image img,
.about__image .placeholder-img,
.reasons__image img,
.reasons__image .placeholder-img,
.menu-hub__category-image img,
.menu-category__image img,
.menu-category__image .placeholder-img,
.menu-card__banner img,
.menu-card__banner .placeholder-img,
.doctor-profile__photo img,
.doctor-profile__photo .placeholder-img,
.clinic-gallery__item img,
.clinic-gallery__item .placeholder-img,
.case-preview-card__pic img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 4%, black 96%, transparent),
                      linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, black 4%, black 96%, transparent),
              linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  mask-composite: intersect;
}

/* B. Inset picture frame — position context */
.menu-hub__category-image {
  position: relative;
}

/* Frame: gold vignette */
.reasons__image::after,
.menu-hub__category-image::after,
.doctor-profile__photo::after,
.clinic-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(197,165,90,0.12), inset 0 0 80px rgba(10,10,10,0.5);
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
}

/* Utility — Responsive visibility */
@media (max-width: 768px) {
  .u-pc-only { display: none !important; }
}
@media (min-width: 769px) {
  .u-sp-only { display: none !important; }
}

/* Print */
@media print {
  body::before,
  .header,
  .mobile-cta,
  .drawer {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}