/* ============================================================
   Variables
============================================================ */
:root {
  --c-bg:       #FAF8F4;
  --c-ivory:    #F4EEE6;
  --c-panel:    #EEE5DC;
  --c-pink-lt:  #F0E4DF;
  --c-blush:    #FBF0F1;
  --c-rose-lt:  #F2D8DA;
  --c-text:     #524646;
  --c-mid:      #6E6060;
  --c-sub:      #9E9090;
  --c-gold:     #B8955A;
  --c-rose:     #C8808A;
  --c-border:   #DDD4CB;

  --f-serif:  'Shippori Mincho', serif;
  --f-sans:   'Noto Sans JP', sans-serif;
  --f-en:     'Cormorant Garamond', serif;
  --f-script: 'Dancing Script', cursive;

  --w: 900px;
  --pad: 112px;
}

/* ============================================================
   Preloader
============================================================ */
/* ── Typography preloader ── */
.text-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}

.text-preloader.is-done {
  pointer-events: none;
}

/* カーテンパネル */
.text-preloader__curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  will-change: transform;
  z-index: 1;
}

.text-preloader__curtain--left {
  left: 0;
  background: #F9F7F4;
  transition: transform 1.5s cubic-bezier(0.85, 0, 0.15, 1) 0.20s;
}

.text-preloader__curtain--right {
  right: 0;
  background: #F9F7F4;
  transition: transform 1.5s cubic-bezier(0.85, 0, 0.15, 1) 0.30s;
}

.text-preloader.is-done .text-preloader__curtain--left  { transform: translateX(-100%); }
.text-preloader.is-done .text-preloader__curtain--right { transform: translateX(100%); }

.text-preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: opacity 0.5s ease;
}

.text-preloader.is-done .text-preloader__inner {
  opacity: 0;
}

.text-preloader__logo {
  width: 180px;
  height: auto;
  opacity: 0;
  animation: plSoftFade 1.4s ease 0.3s both;
}

.text-preloader__name {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 400;
  color: #C9A87A;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0;
  animation: plSoftFade 0.9s ease 2.4s both;
}

.text-preloader__tagline {
  font-family: var(--f-serif);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: #A89098;
  opacity: 0;
  animation: plSoftFade 0.9s ease 1.6s both;
}

@keyframes plSoftFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.sp-br { display: none; }

@media (prefers-reduced-motion: reduce) {
  .text-preloader__logo,
  .text-preloader__etymology,
  .text-preloader__tagline { animation-duration: 0.1s; }
}

/* ============================================================
   Keyframes
============================================================ */
@keyframes rotateOrn {
  from { transform: rotate(45deg); }
  to   { transform: rotate(405deg); }
}

@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 160%; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroLabel {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sparkle {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.25); }
}

/* ============================================================
   Custom Cursor
============================================================ */
@media (pointer: fine) {
  * { cursor: none !important; }
}

#cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  background: transparent;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-100px, -100px);
  will-change: transform;
}

#cursor::after {
  content: '♥';
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 18px;
  line-height: 1;
  color: rgba(200, 128, 138, 0.85);
  transition: font-size 0.22s ease, color 0.22s ease;
  user-select: none;
}

#cursor.is-hover::after {
  font-size: 28px;
  color: rgba(200, 128, 138, 0.45);
}

.cursor-spark {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  font-size: 11px;
  color: rgba(200, 140, 155, 0.75);
  transform: translate(-50%, -50%);
  animation: sparkFly 0.90s ease-out both;
  user-select: none;
  line-height: 1;
}

@keyframes sparkFly {
  0%   { opacity: 1;   transform: translate(-50%, -50%)  scale(1.1) rotate(-10deg); }
  50%  { opacity: 0.8; transform: translate(-50%, -120%) scale(1.0) rotate(5deg); }
  100% { opacity: 0;   transform: translate(-50%, -200%) scale(0.3) rotate(20deg); }
}

/* ============================================================
   Scroll Reveal
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.88s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.88s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.30s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ============================================================
   Global Header
============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 22px 60px;
  background: linear-gradient(120deg,
    rgba(252, 244, 236, 0.55),
    rgba(248, 228, 236, 0.55),
    rgba(236, 232, 250, 0.55),
    rgba(248, 228, 236, 0.55),
    rgba(252, 244, 236, 0.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-size: 300% 300%;
  animation: headerGradient 8s ease infinite;
  transition: padding 0.4s ease, box-shadow 0.4s ease;
}

@keyframes headerGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.site-header.is-scrolled {
  padding: 14px 60px;
  box-shadow: 0 1px 0 rgba(184, 149, 90, 0.18);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.site-header__logo img {
  width: 140px;
  height: auto;
  display: block;
}

.site-nav__list {
  display: flex;
  gap: 44px;
  list-style: none;
}

.site-nav__link {
  font-family: var(--f-en);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--c-text);
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2px;
}
.site-nav__en {
  display: block;
}
.site-nav__ja {
  display: block;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--c-gold);
  font-weight: 400;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  translate: -50% 4px;
  white-space: nowrap;
  pointer-events: none;
}
.site-nav__link:hover .site-nav__ja {
  opacity: 1;
  transform: translateY(0);
  translate: -50% 0;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: width 0.35s ease;
}

.site-nav__link:hover { color: var(--c-gold); }
.site-nav__link:hover::after { width: 100%; }
.site-nav__link--active { color: var(--c-rose); }
.site-nav__link--active::after { width: 100%; background: var(--c-rose); }

/* ── Dropdown ── */
.site-nav__item--dropdown { position: relative; }

/* ホバーブリッジ: ドロップダウンとの18px隙間をカバーして誤閉じを防ぐ */
@media (min-width: 769px) {
  .site-nav__item--dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 22px;
    display: block;
  }
}

.site-nav__link--has-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.site-nav__link--has-sub::after { display: none; }

/* ── Premium nav item (Produce) ── */
.site-nav__link--premium {
  background: var(--c-gold);
  color: #fff !important;
  border: none;
  padding: 6px 16px 6px 12px;
  border-radius: 100px;
  letter-spacing: 0.14em;
  font-style: italic;
  font-size: 10px;
  white-space: nowrap;
  transition: opacity 0.22s;
}
.site-nav__link--premium::before {
  content: '♡';
  font-style: normal;
  margin-right: 5px;
  font-size: 8px;
  opacity: 0.85;
  display: inline;
}
.site-nav__link--premium::after { display: none; }
.site-nav__link--premium:hover { opacity: 0.78; color: #fff; }

.site-nav__chevron {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s;
  opacity: 0.55;
  flex-shrink: 0;
}
.site-nav__item--dropdown:hover .site-nav__chevron,
.site-nav__item--dropdown.is-open .site-nav__chevron {
  transform: rotate(225deg) translateY(2px);
}

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 230px;
  list-style: none;
  background: rgba(252,248,244,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(200,128,138,0.13);
  border-radius: 10px;
  padding: 10px 0;
  box-shadow: 0 8px 32px rgba(160,110,110,0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 300;
}

@media (min-width: 769px) {
  .site-nav__item--dropdown:hover .site-nav__dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

.site-nav__dropdown-link {
  display: block;
  padding: 10px 22px 10px 32px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-mid);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s, background 0.2s;
}
.site-nav__dropdown-link::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-rose);
  opacity: 0;
  transition: opacity 0.2s;
}
.site-nav__dropdown-link:hover { color: var(--c-text); background: rgba(200,128,138,0.05); }
.site-nav__dropdown-link:hover::before { opacity: 0.45; }
.site-nav__dropdown-link--active { color: var(--c-rose); }
.site-nav__dropdown-link--active::before { opacity: 0.6; }

.site-nav__dropdown-en {
  display: block;
  font-family: 'Josefin Sans', var(--f-en);
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.7;
  margin-top: 2px;
}

.site-nav__dropdown-divider {
  height: 1px;
  background: rgba(200,128,138,0.1);
  margin: 8px 14px;
}

/* ── Hamburger toggle（デスクトップでは非表示） ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 201;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--c-text);
  transition: transform 0.35s ease, opacity 0.25s ease;
  transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Reset & Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--c-rose), var(--c-gold));
  border-radius: 10px;
}
* { scrollbar-width: thin; scrollbar-color: var(--c-rose) transparent; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
p   { font-weight: 300; line-height: 1.9; }
p + p { margin-top: 1.2em; }
strong { font-weight: 500; }

/* ============================================================
   Layout
============================================================ */
.container {
  width: 100%;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================================
   Shared Parts
============================================================ */

/* Eyebrow */
.eyebrow {
  font-family: var(--f-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.eyebrow--c { text-align: center; }

.eyebrow--c::before,
.eyebrow--c::after {
  content: '♡';
  display: inline-block;
  margin: 0 10px;
  font-size: 9px;
  vertical-align: middle;
  color: var(--c-rose);
  opacity: 0.70;
  animation: heartPulse 2.8s ease-in-out infinite;
}
.eyebrow--c::after { animation-delay: 1.4s; }

@keyframes heartPulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%       { transform: scale(1.35); opacity: 1; }
}

/* Section heading */
.sec-title {
  font-family: var(--f-serif);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: var(--c-text);
  text-align: center;
}

/* Section header block */
.sec-head { margin-bottom: 72px; }

.sec-lead {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 2.0;
  color: var(--c-mid);
  text-align: center;
  margin-top: 24px;
}

/* Gold bar */
.gold-bar {
  width: 36px;
  height: 1px;
  background: var(--c-gold);
  margin-top: 20px;
}
.gold-bar--c {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Buttons
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  padding: 14px 40px;
  border-radius: 40px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease,
              transform 0.25s ease, box-shadow 0.35s ease;
}

.btn::after {
  content: '→';
  font-size: 11px;
  transition: transform 0.22s ease;
}
.btn:hover::after { transform: translateX(4px); }
.btn:hover { transform: translateY(-2px); }

/* Primary: rose gradient */
.btn--rose {
  background: linear-gradient(135deg, #E8B4C2 0%, #D4929E 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(212,146,158,0.28);
}
.btn--rose:hover {
  background: linear-gradient(135deg, #F0C4D0 0%, #DFA4B0 100%);
  box-shadow: 0 8px 28px rgba(212,146,158,0.40);
}

/* Premium: gold solid */
.btn--gold {
  background: linear-gradient(
    105deg,
    #B8955A 0%,
    #D4B87A 35%,
    #EDD9A3 50%,
    #D4B87A 65%,
    #B8955A 100%
  );
  background-size: 300% 100%;
  background-position: 0% center;
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(184,149,90,0.30);
  animation: btnSheen 6s ease-in-out infinite;
}
@keyframes btnSheen {
  0%   { background-position: 0% center; }
  45%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}
.btn--gold:hover {
  animation: none;
  background-position: 50% center;
  box-shadow: 0 6px 24px rgba(184,149,90,0.45);
}

/* Sub: gold outline pill */
.btn--outline-gold {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-gold);
}
.btn--outline-gold::after { color: var(--c-gold); }
.btn--outline-gold:hover {
  background: var(--c-gold);
  color: #fff;
  border-color: var(--c-gold);
  box-shadow: 0 6px 20px rgba(184,149,90,0.28);
}
.btn--outline-gold:hover::after { color: #fff; }

/* Dark outline pill (contact section) */
.btn--outline-dark {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.40);
  letter-spacing: 0.14em;
}
.btn--outline-dark::after { color: rgba(255,255,255,0.55); }
.btn--outline-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.80);
}

/* ============================================================
   01. Hero
============================================================ */
.hero {
  position: relative;
  min-height: 76vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* テキスト可読性グラデーション */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(255,250,248,0.20) 0%, transparent 35%),
    linear-gradient(
      to right,
      rgba(249, 247, 244, 0.94) 0%,
      rgba(249, 247, 244, 0.88) 22%,
      rgba(249, 247, 244, 0.45) 48%,
      rgba(249, 247, 244, 0.00) 68%
    );
  pointer-events: none;
}

/* Bottom fade into next section */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--c-bg) 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* ── Spotlight overlay ── */
.hero__spotlight {
  display: none;
}


/* ── Floating hearts ── */
.hero__hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.hero__heart {
  position: absolute;
  bottom: -20px;
  color: rgba(200, 140, 155, 0.22);
  animation: floatHeartSway ease-in-out infinite;
  user-select: none;
  line-height: 1;
}

@keyframes floatHeartSway {
  0%   { transform: translateY(0) translateX(0)    rotate(-8deg) scale(0.9); opacity: 0; }
  12%  { opacity: 1; }
  40%  { transform: translateY(-35vh) translateX(12px)  rotate(6deg)  scale(1.05); }
  70%  { transform: translateY(-65vh) translateX(-9px)  rotate(-4deg) scale(0.95); opacity: 0.55; }
  100% { transform: translateY(-95vh) translateX(6px)   rotate(10deg) scale(0.7); opacity: 0; }
}

@keyframes profileHeartFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(6deg); }
  66%       { transform: translateY(-5px) rotate(-4deg); }
}

.hero__heart--1 { left: 12%; font-size: 14px; animation-duration:  9s; animation-delay:  0.0s; }
.hero__heart--2 { left: 28%; font-size: 10px; animation-duration: 12s; animation-delay:  3.0s; }
.hero__heart--3 { left: 42%; font-size: 16px; animation-duration: 10s; animation-delay:  6.5s; }
.hero__heart--4 { left:  6%; font-size: 11px; animation-duration: 13s; animation-delay:  1.8s; }
.hero__heart--5 { left: 58%; font-size:  9px; animation-duration: 11s; animation-delay:  4.5s; }
.hero__heart--6 { left: 22%; font-size: 18px; animation-duration: 15s; animation-delay:  8.0s; }
.hero__heart--7 { left: 72%; font-size: 11px; animation-duration: 10s; animation-delay:  2.2s; }
.hero__heart--8 { left: 85%; font-size:  8px; animation-duration: 14s; animation-delay:  5.5s; }


/* ── Left: テキスト ── */
.hero__left {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 680px;
  padding: 160px 0 120px 72px;
  opacity: 0;
  transform: translateX(-3%);
}

.hero-loaded .hero__left {
  animation: panelEnter 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes panelEnter {
  from { opacity: 0; transform: translateX(-3%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Content */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Label */
.hero__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  opacity: 0;
}
body.hero-loaded .hero__label {
  animation: heroLabel 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s both;
}
.hero__label-line {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--c-gold);
  flex-shrink: 0;
}
.hero__label-text {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--c-gold);
}

/* Heading */
.hero__heading {
  font-family: var(--f-serif);
  font-size: clamp(22px, 3.0vw, 40px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.07em;
  color: rgba(58, 48, 48, 0.78);
  margin-bottom: 52px;
}

/* 幕が開くように下から登場 */
.hero__heading-line {
  display: block;
  overflow: hidden;
  line-height: 1.75;
}

.hero__heading-inner {
  display: block;
  white-space: nowrap;
  transform: translateY(108%);
  opacity: 0;
}
body.hero-loaded .hero__heading-inner {
  animation: lineReveal 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.hero-loaded .hero__heading-line:nth-child(1) .hero__heading-inner { animation-delay: 0.3s; }
body.hero-loaded .hero__heading-line:nth-child(2) .hero__heading-inner { animation-delay: 0.9s; }
body.hero-loaded .hero__heading-line:nth-child(3) .hero__heading-inner { animation-delay: 1.5s; }

@keyframes lineReveal {
  to { transform: translateY(0); opacity: 1; }
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  opacity: 0;
}
body.hero-loaded .hero__scroll {
  animation: fadeInUp 1.2s ease 3.0s both;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, var(--c-gold) 0%, transparent 100%);
  transform-origin: top;
  animation: scrollPulse 2.2s ease-in-out 1.8s infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); opacity: 0; transform-origin: top; }
  40%  { transform: scaleY(1); opacity: 1; transform-origin: top; }
  60%  { transform: scaleY(1); opacity: 1; transform-origin: bottom; }
  100% { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
}

.hero__scroll-text {
  font-family: var(--f-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.36em;
  color: var(--c-gold);
  text-transform: uppercase;
}

.hero__web-accent { color: var(--c-rose); }

/* CTA row */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  opacity: 0;
}
body.hero-loaded .hero__cta {
  animation: fadeInUp 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.4s both;
}

/* ── Right: 背景動画 ── */
.hero__right {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
}

.hero-loaded .hero__right {
  animation: videoEnter 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both;
}

@keyframes videoEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 12%;
  display: block;
  transform: scale(1) translateY(0px);
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
  filter: brightness(1.05) saturate(1.05);
}

/* ============================================================
   01.5. Philosophy
============================================================ */
.philosophy {
  background: var(--c-bg);
  padding: 120px 40px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.philosophy::before {
  content: 'Times have changed.';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-en);
  font-size: clamp(52px, 11vw, 140px);
  font-weight: 300;
  font-style: italic;
  color: rgba(0, 0, 0, 0.028);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.04em;
  z-index: 0;
  margin-top: -40px;
}

.philosophy__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
}

.philosophy__rule {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(200,140,155,0.5), transparent);
  margin-bottom: 52px;
}

.philosophy__heading {
  font-family: var(--f-serif);
  font-size: clamp(14px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--c-text);
  margin-bottom: 44px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.philosophy__heading.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.philosophy__key {
  color: var(--c-gold);
  font-size: 1.12em;
  letter-spacing: 0.1em;
}
.philosophy__heading.is-typing::after {
  content: '|';
  color: var(--c-gold);
  font-family: var(--f-sans);
  font-size: 0.6em;
  font-weight: 300;
  vertical-align: middle;
  animation: cursorBlink 0.65s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.philosophy__body {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 2.2;
  letter-spacing: 0.12em;
  color: var(--c-mid);
  margin-bottom: 52px;
}

.philosophy__heart {
  display: block;
  font-size: 22px;
  color: var(--c-rose);
  opacity: 0.55;
  animation: heartPulse 3.2s ease-in-out infinite;
}

/* ============================================================
   02. Profile / Welcome
============================================================ */
.profile {
  background: linear-gradient(150deg, #FBF0F1 0%, #FAF8F4 55%, #F4EEE6 100%);
  position: relative;
  overflow: hidden;
}

.profile__hearts {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 1;
}
.profile__heart {
  position: absolute; color: var(--c-rose);
  user-select: none; line-height: 1;
  animation: profileHeartFloat ease-in-out infinite;
}
.profile__heart:nth-child(1) { font-size: 13px; top: 20%; right: 5%;  opacity: 0.25; animation-duration: 6.0s; animation-delay: 0.0s; }
.profile__heart:nth-child(2) { font-size:  9px; top: 60%; right: 7%;  opacity: 0.18; animation-duration: 7.5s; animation-delay: 2.0s; }
.profile__heart:nth-child(3) { font-size: 16px; bottom: 28%; right: 3%; opacity: 0.20; animation-duration: 5.5s; animation-delay: 1.0s; }

.profile__inner {
  position: relative; z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: stretch;
  min-height: 700px;
}

/* ── Left: tall editorial photo ── */
.profile__visual {
  position: relative;
  overflow: hidden;
}

/* Soft right-edge fade blending into background */
.profile__visual::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 38%;
  background: linear-gradient(to right, transparent, #FAF8F4 90%);
  z-index: 2;
  pointer-events: none;
}

.profile__photo-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  will-change: clip-path;
}

.profile.is-visible .profile__photo-wrap {
  clip-path: inset(0% 0 0 0);
}

.profile__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ── Right: text — editorial message style ── */
.concept__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 80px 80px 56px;
}

/* Large script — writes itself left→right (signature animation) */
.profile__sig-deco {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(58px, 6.5vw, 92px);
  font-weight: 400;
  color: var(--c-rose);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
              opacity 0.2s ease 0.3s;
  will-change: clip-path, opacity;
}
.profile.is-visible .profile__sig-deco {
  opacity: 0.28;
  clip-path: inset(0 0% 0 0);
}

/* Animated rule — draws left to right after signature */
.profile__rule {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, var(--c-rose) 40%, transparent);
  margin-bottom: 22px;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.65s;
}
.profile.is-visible .profile__rule { width: 80px; }

.profile__label {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--c-rose);
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity 0.6s ease 1.75s;
}
.profile.is-visible .profile__label { opacity: 1; }

.profile__title {
  font-family: var(--f-serif);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--c-text);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease 1.85s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.85s;
}
.profile.is-visible .profile__title { opacity: 1; transform: translateY(0); }

.profile__name-em { font-style: normal; color: var(--c-rose); }

.profile__body {
  font-size: 14.5px; color: var(--c-mid);
  line-height: 2.2; margin-bottom: 32px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s ease 2.05s, transform 0.8s ease 2.05s;
}
.profile.is-visible .profile__body { opacity: 1; transform: translateY(0); }

.profile__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin-bottom: 36px;
}
.profile__tags li {
  font-family: var(--f-sans); font-size: 11px; font-weight: 300;
  letter-spacing: 0.10em; color: var(--c-rose);
  background: rgba(200,128,138,0.08);
  border: 1px solid rgba(200,128,138,0.22);
  border-radius: 100px; padding: 5px 16px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.profile.is-visible .profile__tags li:nth-child(1) { opacity:1; transform:translateX(0); transition-delay: 2.2s; }
.profile.is-visible .profile__tags li:nth-child(2) { opacity:1; transform:translateX(0); transition-delay: 2.35s; }
.profile.is-visible .profile__tags li:nth-child(3) { opacity:1; transform:translateX(0); transition-delay: 2.5s; }

.profile__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-sans); font-size: 11px; letter-spacing: 0.12em;
  color: var(--c-mid);
  border-bottom: 1px solid var(--c-border); padding-bottom: 3px;
  align-self: flex-start;
  opacity: 0;
  transition: opacity 0.6s ease 2.6s, color 0.2s, border-color 0.2s;
}
.profile.is-visible .profile__link { opacity: 1; }
.profile__link::after { content: '→'; font-size: 11px; transition: transform 0.2s; }
.profile__link:hover  { color: var(--c-rose); border-color: var(--c-rose); }
.profile__link:hover::after { transform: translateX(3px); }

/* ============================================================
   Marquee
============================================================ */
.marquee {
  overflow: hidden;
  padding: 16px 0;
  background: var(--c-bg);
  border-top: 1px solid rgba(184, 149, 90, 0.18);
  border-bottom: 1px solid rgba(184, 149, 90, 0.18);
}

.marquee__track {
  display: flex;
  white-space: nowrap;
  animation: marqueeScroll 32s linear infinite;
  will-change: transform;
}

.marquee__text {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--c-gold);
  flex-shrink: 0;
  padding-right: 0;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   02.5. Concept Strip
============================================================ */
.strip {
  position: relative;
  overflow: hidden;
}

.strip__img-wrap {
  position: relative;
  height: clamp(280px, 48vw, 540px);
}

.strip__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.strip__overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 36, 36, 0.40);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.strip__eyebrow {
  font-family: var(--f-en);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.36em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.strip__phrase {
  font-family: var(--f-serif);
  font-size: clamp(22px, 3.8vw, 44px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: #fff;
}

/* ============================================================
   03. Problems
============================================================ */
/* ============================================================
   03. For You
============================================================ */
.forwho {
  background-color: #f5ede8;
  background-image: url('images/marble-bg.png');
  background-size: cover;
  background-position: center;
  padding: var(--pad) 0;
  position: relative;
  overflow: hidden;
}
.forwho::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 243, 239, 0.86);
  z-index: 0;
}

/* Large background watermark */
.forwho__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-en);
  font-size: clamp(100px, 18vw, 220px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: rgba(200, 128, 138, 0.08);
  white-space: nowrap;
  pointer-events: none; user-select: none;
  z-index: 0; line-height: 1;
}

.forwho .container { position: relative; z-index: 1; }

.forwho__head {
  text-align: center;
  margin-bottom: 64px;
}

.forwho__title {
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--c-text);
  margin-bottom: 20px;
}

.forwho__title-pre {
  font-size: clamp(40px, 5.5vw, 72px);
  display: inline-block;
  vertical-align: baseline;
  margin-right: 0.28em;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s ease 0.1s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.forwho__title-em {
  font-style: italic;
  font-size: clamp(40px, 5.5vw, 72px);
  color: var(--c-rose);
  display: inline-block;
  vertical-align: baseline;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.7s ease 0.35s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.forwho.is-visible .forwho__title-pre {
  opacity: 1; transform: translateX(0);
}
.forwho.is-visible .forwho__title-em {
  opacity: 1; transform: translateX(0);
}

.forwho__sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.1em;
  color: var(--c-mid);
}

/* ── List layout ── */
.forwho__list {
  list-style: none;
  padding: 0;
  margin: 0 auto 72px;
  max-width: 760px;
}

.forwho__item {
  display: block;
  padding: 52px 0;
  border-top: 1px solid rgba(215, 139, 154, 0.2);
  position: relative;
}

.forwho__item::after {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  height: 1px; width: 0;
  background: linear-gradient(to right, var(--c-rose), transparent);
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
.forwho__item.is-visible::after { width: 100%; }

.forwho__item-num {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  padding-top: 8px;
  opacity: 0;
  transition: opacity 0.6s ease 0.4s;
}
.forwho__item.is-visible .forwho__item-num { opacity: 1; }

.forwho__item-voice {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: 20px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.forwho__item.is-visible .forwho__item-voice { clip-path: inset(0 0 0% 0); }

.forwho__item-note {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--c-mid);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
}
.forwho__item.is-visible .forwho__item-note { opacity: 1; transform: translateY(0); }

/* ── Closing line ── */
.forwho__closing {
  text-align: center;
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 2;
  color: var(--c-rose);
  padding-top: 56px;
  border-top: 1px solid rgba(215, 139, 154, 0.2);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================
   04. Services
============================================================ */
.services {
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 56px 0;
}

/* ── 扉（clip-pathで開閉） ── */
.services__door {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #ede4dd;
  min-height: 520px;
  transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: clip-path;
}

/* 初期状態：左扉は左半分・右扉は右半分 */
.services__door--left  { clip-path: inset(0 50% 0 0); }
.services__door--right { clip-path: inset(0 0 0 50%); }

/* 開いた状態：完全に消える */
.services.doors-open .services__door--left  { clip-path: inset(0 100% 0 0); }
.services.doors-open .services__door--right { clip-path: inset(0 0 0 100%); }

/* ── アーチ装飾（内側＝中央側に配置） ── */
.services__arch {
  position: absolute;
  top: 0;
  right: 0;        /* 左ドアの内側（右端） */
  left: auto;
  width: clamp(120px, 14vw, 200px);
  height: 82%;
  background: rgba(215, 139, 154, 0.10);
  border-radius: 999px 999px 0 0;  /* 上が丸いアーチ形 */
}
.services__arch--right {
  left: 0;         /* 右ドアの内側（左端） */
  right: auto;
}

/* ── Service 番号オーバーレイ（扉が開く前） ── */
.services__step-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  z-index: 20;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 1;
  transition: opacity 0.5s ease 0.1s;
}
.services.doors-open .services__step-label {
  opacity: 0;
}
.services__step-num {
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: 0.02em;
}
.services__step-1 {
  font-size: clamp(88px, 11vw, 140px);
}
.services__step-st {
  font-size: clamp(32px, 3.8vw, 52px);
  vertical-align: 0.12em;
}
.services__step-service {
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: 0.08em;
  color: var(--c-gold);
  line-height: 1;
}
.services__step-msg {
  font-family: var(--f-serif);
  font-size: clamp(13px, 1.4vw, 18px);
  color: var(--c-gold);
  letter-spacing: 0.18em;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 2.4s, transform 0.8s ease 2.4s;
}
.services.step-typed .services__step-msg {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   05-alt. Services Two (Service 02 — 扉アニメーション)
============================================================ */
.services-two {
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.services-two__door {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(135deg, #fdf8f5 0%, #f5ede8 100%);
  transition: clip-path 1.5s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: clip-path;
}
.services-two__door--left  { clip-path: inset(0 50% 0 0); }
.services-two__door--right { clip-path: inset(0 0 0 50%); }
.services-two.doors-open .services-two__door--left  { clip-path: inset(0 77% 0 0); }
.services-two.doors-open .services-two__door--right { clip-path: inset(0 0 0 77%); }
.services-two__arch {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(120px, 14vw, 200px);
  height: 82%;
  background: rgba(215, 139, 154, 0.10);
  border-radius: 999px 999px 0 0;
}
.services-two__arch--right { left: 0; right: auto; }
.services-two__step-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 1;
  transition: opacity 0.5s ease 0.1s;
}
.services-two.doors-open .services-two__step-label { opacity: 0; }
.services-two__step-service {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: -6px;
}
.services-two__step-num {
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(88px, 11vw, 140px);
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: 0.02em;
}
.services-two__step-msg {
  font-family: var(--f-serif);
  font-size: clamp(11px, 1.1vw, 15px);
  color: var(--c-gold);
  letter-spacing: 0.22em;
  margin-top: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.services-two.step-typed .services-two__step-msg {
  opacity: 0.85;
  transform: translateY(0);
}
.services-two__cards {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 26%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease 1.0s;
}
.services-two.doors-open .services-two__cards { opacity: 1; }

/* ── Lesson Card コンテンツ ── */
.lesson-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.lesson-card > * {
  opacity: 0;
  transform: translateY(14px);
}
.services.doors-open .lesson-card__badge   { opacity:1; transform:translateY(0); transition: opacity .6s ease 0.7s, transform .6s ease 0.7s; }
.services.doors-open .lesson-card__eyebrow { opacity:1; transform:translateY(0); transition: opacity .6s ease 0.9s, transform .6s ease 0.9s; }
.services.doors-open .lesson-card__title   { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.1s, transform .6s ease 1.1s; }
.services.doors-open .lesson-card__ja      { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.3s, transform .6s ease 1.3s; }
.services.doors-open .lesson-card__desc    { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.4s, transform .6s ease 1.4s; }
.services.doors-open .lesson-card__cta     { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.6s, transform .6s ease 1.6s; }
.lesson-card__badge {
  display: inline-block;
  font-family: var(--f-serif);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--c-rose);
  padding: 3px 14px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.lesson-card__eyebrow {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.lesson-card__title {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(24px, 3.0vw, 40px);
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #a8904d 0%, #cab17e 30%, #f0d99a 50%, #cab17e 70%, #a8904d 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s linear infinite;
  animation-play-state: paused;
}
.services-two.doors-open .lesson-card__title { animation-play-state: running; }
.lesson-card__ja {
  font-family: var(--f-serif);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-mid);
  margin-bottom: 20px;
}
.lesson-card__desc {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-mid);
  margin-bottom: 28px;
}
.lesson-card__cta { margin-top: 4px; }
.salon-feature__cta,
.lesson-card__cta { width: fit-content; align-self: center; padding-left: 28px; padding-right: 28px; }

/* ── 扉フェーズ：家アイコンアニメーション ── */
.services__door-illust {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.services__door-icon-wrap {
  position: relative;
  width: clamp(100px, 11vw, 150px);
  aspect-ratio: 1614 / 1690;
}
.services__door-icon-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.services__door-house {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
.services.step-typed .services__door-house {
  clip-path: inset(0 0 0% 0);
}
.services__door-heart {
  opacity: 0;
  transform-origin: 29% 48%;
  transform: scale(0.25);
  transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s,
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s;
}
.services.step-typed .services__door-heart { opacity: 1; transform: scale(1.08); }
.services__door-float-hearts {
  position: absolute;
  bottom: 50%;
  left: 26%;
  pointer-events: none;
}
.services__door-float-hearts span {
  position: absolute;
  color: var(--c-rose);
  opacity: 0;
}
.services.step-typed .services__door-float-hearts span { animation: salonHeartRise ease-out infinite; }
.services__door-float-hearts span:nth-child(1) { font-size: 10px; left: -18px; animation-delay: 2.4s; animation-duration: 3.0s; }
.services__door-float-hearts span:nth-child(2) { font-size:  8px; left:   4px; animation-delay: 3.2s; animation-duration: 3.4s; }
.services__door-float-hearts span:nth-child(3) { font-size: 11px; left: -28px; animation-delay: 4.0s; animation-duration: 2.8s; }
.services__door-float-hearts span:nth-child(4) { font-size:  7px; left:  14px; animation-delay: 4.8s; animation-duration: 3.2s; }
.services__door-float-hearts span:nth-child(5) { font-size:  9px; left:  -8px; animation-delay: 5.5s; animation-duration: 3.0s; }

/* ── 左扉テキストなし ── */

/* ── サービスカード（2枚並び） ── */
.services__cards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1px;
  padding: 0 8%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease 0.4s;
}
.services.doors-open .services__cards { opacity: 1; }

/* ── 共通カードベース ── */
.svc-card {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: 40px;
  background: var(--c-bg);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.svc-card:first-child { border-right: none; }

@media (max-width: 768px) {
  .svc-card { border: 1px solid var(--c-border); }
  .svc-card:first-child { border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
}

/* ── ウォーターマーク番号 ── */
.svc-watermark {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(110px, 16vw, 200px);
  color: var(--c-rose);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}

.salon-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  width: 100%;
}

/* ── SVGイラスト ── */
.salon-feature__illust {
  position: relative;
  display: flex;
  justify-content: center;
}

/* ── ロゴから切り取ったアイコン画像 ── */
.salon-icon-wrap {
  position: relative;
  width: clamp(180px, 24vw, 280px);
  aspect-ratio: 1614 / 1690;
}
.salon-icon-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 家アウトライン：上から下にワイプ表示 */
.salon-icon-house {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}
.services.doors-open .salon-icon-house {
  clip-path: inset(0 0 0% 0);
}

/* ハートはスプリングで弾む（画像内での中心位置: ~29% 48%） */
.salon-icon-heart {
  opacity: 0;
  transform-origin: 29% 48%;
  transform: scale(0.25);
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s,
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s;
}
.services.doors-open .salon-icon-heart { opacity: 1; transform: scale(1); }

/* 浮かぶハート（ジェムハートの位置に合わせる） */
.salon-float-hearts {
  position: absolute;
  bottom: 50%;
  left: 26%;
  pointer-events: none;
}
.salon-float-hearts span {
  position: absolute;
  color: var(--c-rose);
  opacity: 0;
}
.services.doors-open .salon-float-hearts span { animation: salonHeartRise ease-out infinite; }
.salon-float-hearts span:nth-child(1) { font-size: 10px; left: -18px; animation-delay: 3.2s; animation-duration: 3.0s; }
.salon-float-hearts span:nth-child(2) { font-size: 8px;  left:   4px; animation-delay: 4.1s; animation-duration: 3.4s; }
.salon-float-hearts span:nth-child(3) { font-size: 11px; left: -28px; animation-delay: 5.0s; animation-duration: 2.8s; }
.salon-float-hearts span:nth-child(4) { font-size: 7px;  left:  14px; animation-delay: 5.8s; animation-duration: 3.2s; }
.salon-float-hearts span:nth-child(5) { font-size: 9px;  left:  -8px; animation-delay: 6.6s; animation-duration: 3.0s; }

@keyframes salonHeartRise {
  0%   { opacity: 0;   transform: translateY(0)    scale(1); }
  15%  { opacity: 0.8; }
  100% { opacity: 0;   transform: translateY(-72px) scale(0.3); }
}

/* ── テキスト（ staggered reveal） ── */
.salon-feature__body { display: flex; flex-direction: column; align-items: center; }
.salon-feature__body > * {
  opacity: 0;
  transform: translateY(14px);
}
.services.doors-open .salon-feature__eyebrow { opacity:1; transform:translateY(0); transition: opacity .6s ease 0.6s, transform .6s ease 0.6s; }
.services.doors-open .salon-feature__title   { opacity:1; transform:translateY(0); transition: opacity .6s ease 0.8s, transform .6s ease 0.8s; }
.services.doors-open .salon-feature__ja      { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.0s, transform .6s ease 1.0s; }
.services.doors-open .salon-feature__desc    { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.2s, transform .6s ease 1.2s; }
.services.doors-open .salon-feature__price   { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.4s, transform .6s ease 1.4s; }
.services.doors-open .salon-feature__cta     { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.6s, transform .6s ease 1.6s; }

.salon-feature__eyebrow {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ゴールドシマーテキスト */
@keyframes goldShimmer {
  0%   { background-position:  200% center; }
  100% { background-position: -200% center; }
}
.salon-feature__title {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 42px);
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #a8904d 0%, #cab17e 30%, #f0d99a 50%, #cab17e 70%, #a8904d 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s linear infinite;
  animation-play-state: paused;
}
.services.doors-open .salon-feature__title { animation-play-state: running; }

.salon-feature__ja {
  font-family: var(--f-serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--c-mid);
  margin-bottom: 28px;
}

.salon-feature__desc {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--c-mid);
  margin-bottom: 16px;
}

.salon-feature__price {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-sub);
  margin-bottom: 28px;
}
.salon-feature__price strong {
  font-size: 18px;
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: 0.04em;
}


/* 旧カードスタイル（残存参照用） */
.svc-card {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}
.svc-card__img {
  width: 100%; height: 100%;
}
.svc-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.svc-card:hover .svc-card__img img { transform: scale(1.05); }

.svc-card__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 48px 20px 24px;
  background: linear-gradient(to top, rgba(35, 18, 18, 0.80) 0%, rgba(35,18,18,0.35) 65%, transparent 100%);
  transition: padding 0.4s ease;
}
.svc-card:hover .svc-card__overlay {
  padding-bottom: 30px;
}
.svc-card__logo {
  width: 120px;
  height: auto;
  display: block;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.svc-card__label {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.svc-card__name {
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1.55;
  margin-bottom: 6px;
}
.svc-card__desc {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 250, 248, 0.68);
  line-height: 1.6;
  margin-bottom: 14px;
}
.svc-card__link {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.svc-card:hover .svc-card__link {
  color: var(--c-gold);
  border-color: var(--c-gold);
}

/* ============================================================
   05. Voice
============================================================ */

/* ============================================================
   05b. 2nd Step
============================================================ */
.step2 {
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
  min-height: 780px;
  display: flex;
  align-items: center;
  padding: 80px 0;
}

/* ── 扉 ── */
.step2__door {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(135deg, #ede5d4 0%, #e2d5bc 100%);
  transition: clip-path 1.5s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: clip-path;
}
.step2__door--left  { clip-path: inset(0 50% 0 0); }
.step2__door--right { clip-path: inset(0 0 0 50%); }
.step2.doors-open .step2__door--left  { clip-path: inset(0 77% 0 0); }
.step2.doors-open .step2__door--right { clip-path: inset(0 0 0 77%); }

/* ── アーチ ── */
.step2__arch {
  position: absolute;
  top: 0; right: 0;
  width: clamp(120px, 14vw, 200px);
  height: 82%;
  background: rgba(202, 177, 126, 0.18);
  border-radius: 999px 999px 0 0;
}
.step2__arch--right { left: 0; right: auto; }

/* ── 2nd Step ラベル ── */
.step2__label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 1;
  transition: opacity 0.5s ease 0.1s;
}
.step2.doors-open .step2__label { opacity: 0; }

.step2__num {
  font-family: var(--f-en);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: 0.02em;
}
.step2__2  { font-size: clamp(88px, 11vw, 140px); }
.step2__nd { font-size: clamp(32px, 3.8vw, 52px); vertical-align: 0.12em; }
.step2__word {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(16px, 1.8vw, 24px);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* ── コンテンツ ── */
.step2__cards {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 26%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease 1.0s;
}
.step2.doors-open .step2__cards { opacity: 1; }

.step2__inner {
  width: 100%;
  text-align: center;
}
.step2__inner > * {
  opacity: 0;
  transform: translateY(12px);
}
.step2.doors-open .step2__eyebrow { opacity:1; transform:translateY(0); transition: opacity .6s ease 1.8s, transform .6s ease 1.8s; }
.step2.doors-open .step2__title   { opacity:1; transform:translateY(0); transition: opacity .6s ease 2.0s, transform .6s ease 2.0s; }
.step2.doors-open .step2__list    { opacity:1; transform:translateY(0); transition: opacity .6s ease 2.3s, transform .6s ease 2.3s; }
.step2.doors-open .step2__note    { opacity:1; transform:translateY(0); transition: opacity .6s ease 2.6s, transform .6s ease 2.6s; }
.step2.doors-open .step2__cta     { opacity:1; transform:translateY(0); transition: opacity .6s ease 2.8s, transform .6s ease 2.8s; }

.step2__eyebrow {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 16px;
}
.step2__title {
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--c-text);
  margin-bottom: 40px;
}

/* ── サービスリスト ── */
.step2__list {
  list-style: none;
  width: 100%;
  border-top: 1px solid var(--c-border);
  margin-bottom: 36px;
}
.step2__item {
  display: grid;
  grid-template-columns: 2.5em 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}
.step2__item-num {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-gold);
  font-weight: 300;
}
.step2__item-name {
  font-family: var(--f-serif);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-text);
  margin-bottom: 4px;
}
.step2__item-desc {
  font-size: 11px;
  font-weight: 300;
  color: var(--c-sub);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.step2__item-badge {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-rose);
  white-space: nowrap;
}
.step2__item-btn {
  padding: 9px 22px;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.step2__note {
  font-family: var(--f-serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--c-sub);
  margin-bottom: 28px;
}
.step2__cta { min-width: 220px; }

/* ============================================================
   05.5 SESSION TEASER (index-salon)
============================================================ */
.session-teaser {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  min-height: 520px;
}
.session-teaser__body {
  position: relative;
  background: #fffaf8;
  padding: 80px 56px 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.session-teaser__photo {
  position: relative;
  overflow: hidden;
}
.session-teaser__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.session-teaser__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fffaf8 0%, transparent 18%);
}
.session-teaser__watermark {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-en);
  font-style: italic;
  font-size: clamp(44px, 6.5vw, 88px);
  font-weight: 300;
  color: #fff;
  opacity: 0.3;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.08em;
  line-height: 1;
  user-select: none;
  z-index: 3;
}
.session-teaser__title {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.65;
  letter-spacing: 0.06em;
  margin: 14px 0 0;
}
.session-teaser__rule {
  width: 36px;
  height: 1px;
  background: var(--c-gold);
  margin: 22px 0;
}
.session-teaser__desc {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  color: var(--c-text);
  line-height: 2;
  opacity: 0.82;
  margin-bottom: 32px;
}
.session-teaser .btn {
  padding-left: 20px;
  padding-right: 20px;
  align-self: flex-start;
}
@media (max-width: 768px) {
  .sp-br { display: inline; }

  .session-teaser { grid-template-columns: 1fr; }
  .session-teaser__body { padding: 56px 28px 48px; order: 2; }
  .session-teaser__photo { height: 340px; order: 1; }
  .session-teaser__photo::after {
    background: linear-gradient(to bottom, transparent 60%, #fffaf8 100%);
  }
  .session-teaser__watermark { font-size: 32px; }
}

/* ============================================================
   SESSION PAGE (session.html)
============================================================ */

/* — Hero (fullscreen bg) — */
.session-hero {
  position: relative;
  min-height: 88vh;
  background: url('images/session-bg.jpg') center top / cover no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.session-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,250,248,0.95) 0%,
    rgba(255,250,248,0.82) 38%,
    rgba(255,250,248,0.35) 62%,
    transparent 100%
  );
  z-index: 1;
}
.session-hero__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 120px 0 80px 72px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s ease 0.25s, transform 0.85s cubic-bezier(0.22,1,0.36,1) 0.25s;
}
body.hero-loaded .session-hero__content {
  opacity: 1;
  transform: none;
}
.session-hero__title {
  font-family: var(--f-serif);
  font-size: clamp(1.7rem, 3.6vw, 3.2rem);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin: 0;
}
.session-hero__subtitle {
  display: block;
  font-family: var(--f-serif);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  color: var(--c-gold);
  letter-spacing: 0.18em;
  margin-top: 16px;
}
.session-hero__rule {
  width: 40px;
  height: 1px;
  background: var(--c-gold);
  margin: 28px 0;
}
.session-hero__desc {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--c-text);
  line-height: 2.2;
  opacity: 0.82;
  margin-bottom: 16px;
}
.session-hero__price {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-gold);
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}
.session-hero__price-note {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  color: var(--c-text);
  opacity: 0.55;
  line-height: 1.7;
  margin-bottom: 36px;
}
.session-hero__scroll {
  position: absolute;
  bottom: 44px;
  left: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.8s ease 1.4s;
}
body.hero-loaded .session-hero__scroll { opacity: 0.55; }
.session-hero__scroll-text {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--c-text);
}
.session-hero__scroll-line {
  width: 1px;
  height: 44px;
  background: var(--c-gold);
  transform-origin: top;
  animation: sessionScrollLine 1.8s cubic-bezier(0.22,1,0.36,1) 1.6s both;
}
@keyframes sessionScrollLine {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.session-hero__watermark {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 2;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-en);
  font-style: italic;
  font-size: clamp(40px, 5.5vw, 78px);
  font-weight: 300;
  color: #fff;
  opacity: 0;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 1s ease 0.9s;
}
body.hero-loaded .session-hero__watermark { opacity: 0.28; }

/* — About — */
.session-about {
  padding: 108px 24px;
  background: #fff;
}
.session-about__inner {
  max-width: 960px;
  margin: 0 auto;
}
.session-about__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.session-about__photo-wrap {
  position: sticky;
  top: 100px;
}
.session-about__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
  display: block;
}
.session-about__content {
  padding-top: 8px;
}
@media (max-width: 768px) {
  .session-about__split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .session-about__photo-wrap { position: static; }
  .session-about__photo { aspect-ratio: 3 / 2; object-position: center 20%; }
}
.session-about__title {
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin: 16px 0 32px;
}
.session-about__body {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--c-text);
  line-height: 2.25;
  opacity: 0.85;
}
.session-about__body p + p { margin-top: 20px; }
.session-about__list {
  list-style: none;
  margin: 52px 0 0;
}
.session-about__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 28px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid rgba(202,177,126,0.22);
}
.session-about__item:last-child {
  border-bottom: 1px solid rgba(202,177,126,0.22);
}
.session-about__num {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--c-rose);
  opacity: 0.28;
  line-height: 1;
  padding-top: 2px;
}
.session-about__item-body { padding-top: 4px; }
.session-about__item-title {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  color: var(--c-text);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.session-about__item-text {
  font-family: var(--f-sans);
  font-size: 0.86rem;
  color: var(--c-text);
  opacity: 0.72;
  line-height: 2;
}

/* — AI section — */
.session-ai {
  padding: 108px 24px;
  background: #f7eee9;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.session-ai__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
}
.session-ai__orb--a {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(215,139,154,0.32) 0%, transparent 70%);
  top: -120px;
  right: 8%;
  animation: sessionOrbA 9s ease-in-out infinite alternate;
}
.session-ai__orb--b {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(202,177,126,0.22) 0%, transparent 70%);
  bottom: -80px;
  left: 12%;
  animation: sessionOrbB 12s ease-in-out infinite alternate;
}
@keyframes sessionOrbA {
  from { transform: translate(0, 0); }
  to   { transform: translate(-40px, 28px); }
}
@keyframes sessionOrbB {
  from { transform: translate(0, 0); }
  to   { transform: translate(28px, -18px); }
}
.session-ai__inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.session-ai__inner--split {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: center;
}
.session-ai__text {
  text-align: left;
}
.session-ai__title {
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin: 16px 0 20px;
}
.session-ai__rule {
  width: 40px;
  height: 1px;
  background: var(--c-gold);
  margin: 0 0 24px;
}
.session-ai__desc {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  color: var(--c-text);
  line-height: 2.15;
  opacity: 0.8;
  margin-bottom: 36px;
}
.session-ai__phone {
  display: flex;
  justify-content: center;
}
.session-ai__phone-frame {
  width: 260px;
}
.session-ai__phone-screen {
  width: 100%;
  border-radius: 20px;
  display: block;
  box-shadow: 0 20px 56px rgba(80,40,40,0.16), 0 4px 16px rgba(80,40,40,0.08);
}
@media (max-width: 768px) {
  .session-ai__inner--split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .session-ai__rule { margin: 0 auto 24px; }
  .session-ai__text { text-align: center; }
  .session-ai__phone-frame { width: 220px; }
}

/* — For You — */
.session-foryou {
  padding: 108px 24px;
  background: #f7eee9;
}
.session-foryou__inner {
  max-width: 880px;
  margin: 0 auto;
}
.session-foryou__lead {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--c-text);
  line-height: 2.2;
  opacity: 0.82;
  margin: 0 0 48px;
}
.session-foryou__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 52px;
}
.session-foryou__card {
  background: #fffaf8;
  border: 1px solid rgba(215,139,154,0.15);
  border-radius: 3px;
  padding: 26px 26px 26px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: box-shadow 0.28s, transform 0.28s;
}
.session-foryou__card:hover {
  box-shadow: 0 8px 28px rgba(215,139,154,0.10);
  transform: translateY(-2px);
}
.session-foryou__mark {
  color: var(--c-gold);
  font-size: 0.85rem;
  line-height: 1.9;
  flex-shrink: 0;
}
.session-foryou__text {
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--c-text);
  line-height: 1.9;
}
.session-foryou__closing {
  font-family: var(--f-serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--c-text);
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 40px 0 0;
}

/* — Flow — */
.session-flow {
  padding: 108px 24px;
  background: #fff;
}
.session-flow__inner {
  max-width: 920px;
  margin: 0 auto;
}
.session-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
  margin-top: 52px;
}
.session-flow__steps::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(202,177,126,0.4) 10%,
    rgba(202,177,126,0.4) 90%,
    transparent 100%);
}
.session-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}
.session-flow__num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(202,177,126,0.6);
  background: #fffaf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-en);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--c-gold);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.session-flow__step-title {
  font-family: var(--f-serif);
  font-size: 0.95rem;
  color: var(--c-text);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  line-height: 1.5;
}
.session-flow__step-text {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  color: var(--c-text);
  opacity: 0.68;
  line-height: 1.9;
}
.session-flow__note {
  font-family: var(--f-sans);
  font-size: 0.82rem;
  color: var(--c-text);
  opacity: 0.6;
  line-height: 1.9;
  text-align: center;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(202,177,126,0.18);
}

/* — FAQ — */
.session-faq {
  padding: 108px 24px;
  background: #faf8f4;
}
.session-faq__inner {
  max-width: 760px;
  margin: 0 auto;
}
.session-faq__lead {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  color: var(--c-text);
  line-height: 2.1;
  opacity: 0.78;
  margin: 0 0 48px;
}
.session-faq__item {
  border-top: 1px solid rgba(202,177,126,0.2);
}
.session-faq__item:last-child {
  border-bottom: 1px solid rgba(202,177,126,0.2);
}
.session-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.session-faq__q-text {
  font-family: var(--f-serif);
  font-size: 0.96rem;
  color: var(--c-text);
  letter-spacing: 0.04em;
  line-height: 1.65;
}
.session-faq__q-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(202,177,126,0.5);
  position: relative;
  transition: transform 0.3s ease;
}
.session-faq__q-icon::before,
.session-faq__q-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--c-gold);
  border-radius: 1px;
}
.session-faq__q-icon::before {
  width: 8px; height: 1px;
  transform: translate(-50%, -50%);
}
.session-faq__q-icon::after {
  width: 1px; height: 8px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s;
}
.session-faq__item.is-open .session-faq__q-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.session-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1);
}
.session-faq__item.is-open .session-faq__a {
  max-height: 400px;
}
.session-faq__a-inner {
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--c-text);
  line-height: 2.1;
  opacity: 0.8;
  padding: 0 40px 28px 0;
}

/* — Responsive — */
@media (max-width: 768px) {
  .session-hero { min-height: 92vh; background-position: 65% top; }
  .session-hero::before {
    background: linear-gradient(
      to bottom,
      rgba(255,250,248,0.92) 0%,
      rgba(255,250,248,0.88) 55%,
      rgba(255,250,248,0.6) 100%
    );
  }
  .session-hero__content { padding: 120px 28px 80px; max-width: 100%; }
  .session-hero__scroll { left: 28px; }
  .session-foryou__grid { grid-template-columns: 1fr; }
  .session-flow__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .session-flow__steps::before { display: none; }
  .session-flow__step {
    flex-direction: row;
    text-align: left;
    gap: 22px;
    padding: 28px 0;
    border-top: 1px solid rgba(202,177,126,0.18);
    align-items: flex-start;
  }
  .session-flow__step:last-child {
    border-bottom: 1px solid rgba(202,177,126,0.18);
  }
  .session-flow__num { margin-bottom: 0; }
  .session-flow__step-body { flex: 1; }
}
@media (max-width: 600px) {
  .session-foryou { padding: 72px 24px; }
  .session-about  { padding: 72px 24px; }
  .session-flow   { padding: 72px 24px; }
  .session-ai     { padding: 72px 24px; }
  .session-faq    { padding: 72px 24px; }
  .session-price  { padding: 72px 24px; }
}

/* ============================================================
   Session Price
============================================================ */
.session-price {
  padding: 112px 24px;
  background: var(--c-ivory);
}
.session-price__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.session-price__card {
  margin-top: 48px;
  padding: 52px 48px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 32px rgba(80,40,40,0.06);
}
.session-price__amount {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: 0.1em;
}
.session-price__currency {
  font-size: 0.75em;
  vertical-align: 0.05em;
  margin-right: 3px;
  color: var(--c-text);
}
.session-price__tax {
  font-family: var(--f-sans);
  font-size: 0.45em;
  vertical-align: 0.3em;
  margin-left: 8px;
  color: var(--c-sub);
  letter-spacing: 0.08em;
}
.session-price__duration {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  color: var(--c-sub);
  letter-spacing: 0.14em;
  margin-top: 10px;
}
.session-price__divider {
  width: 40px;
  height: 1px;
  background: var(--c-border);
  margin: 28px auto;
}
.session-price__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.session-price__list li {
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--c-text);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.session-price__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-rose);
  flex-shrink: 0;
}
.session-price__info {
  margin-top: 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.session-price__info li {
  font-family: var(--f-sans);
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--c-text);
  padding-left: 1.2em;
  position: relative;
}
.session-price__info li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--c-rose);
}
.session-price__note {
  margin-top: 24px;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--c-sub);
  line-height: 1.9;
}
.session-price__note a {
  color: var(--c-rose);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .session-price__card { padding: 36px 24px; }
}

/* ============================================================
   06. VOICE
============================================================ */
.voice {
  background: #fff;
  padding: 110px 80px;
}
.voice__inner {
  max-width: 1140px;
  margin: 0 auto;
}
.voice__eyebrow {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 16px;
  text-align: center;
}
.voice__lead {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-text);
  text-align: center;
  margin-bottom: 52px;
}
.voice__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 52px;
}
.voice__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.voice__card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.voice__card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.voice__card {
  background: #fff;
  border: 1px solid rgba(200,180,170,0.18);
  border-radius: 4px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.voice__card-quote {
  font-family: var(--f-serif);
  font-size: 13px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--c-text);
  flex: 1;
}
.voice__card-quote::before {
  content: '❝ ';
  color: var(--c-rose);
  opacity: 0.45;
  font-size: 14px;
}
.voice__hl {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(transparent 52%, rgba(200,128,138,0.12) 52%);
}
.voice__card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(200,180,170,0.2);
}
.voice__card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(200,140,155,0.2);
}
.voice__card-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-rose), var(--c-gold));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-serif);
  font-size: 13px;
  flex-shrink: 0;
  border: 1px solid rgba(200,140,155,0.2);
}
.voice__card-name {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-rose);
}
.voice__footer {
  text-align: center;
}
.voice__more {
  display: inline-block;
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-rose);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 140, 155, 0.45);
  padding-bottom: 2px;
  transition: opacity 0.3s ease;
}
.voice__more:hover { opacity: 0.6; }

/* ============================================================
   07. CTA / Mail Lesson
============================================================ */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 680px;
  padding: 80px 8vw;
  background-image: url('images/cta-bg.jpg');
  background-size: cover;
  background-position: right top;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,250,248,0.96) 0%, rgba(255,250,248,0.88) 40%, rgba(255,250,248,0.3) 65%, transparent 85%);
}

.cta__glass {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: left;
}

.cta__form-body {
  width: 100%;
}

.cta__form-body .eyebrow { margin-bottom: 18px; }

.cta__title {
  font-family: var(--f-serif);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: var(--c-text);
}

.cta__form-body .gold-bar { margin-top: 24px; margin-left: 0; margin-right: auto; }

.cta__lead {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: 0.06em;
  color: var(--c-mid);
  margin-top: 20px;
}

.cta__days {
  list-style: none;
  margin: 28px 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cta__days li {
  font-family: var(--f-sans);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--c-text);
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(202, 177, 126, 0.2);
  padding-bottom: 10px;
}
.cta__days li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.cta__day-num {
  font-family: var(--f-en);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.1em;
  color: var(--c-gold);
  white-space: nowrap;
  min-width: 44px;
}

.cta__desc {
  font-size: 13px;
  color: var(--c-mid);
  line-height: 2.0;
}

.cta__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  text-align: left;
}

.cta__name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cta__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta__field label {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--c-mid);
  text-transform: uppercase;
}

.cta__required {
  color: var(--c-rose);
  margin-left: 2px;
}

.cta__field input {
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--c-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(180, 150, 158, 0.4);
  padding: 10px 0;
  outline: none;
  transition: border-color 0.25s;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
}

.cta__field input:focus {
  border-bottom-color: var(--c-rose);
}

.cta__field input::placeholder {
  color: rgba(120, 100, 105, 0.3);
}

.cta__submit {
  margin-top: 8px;
}

.cta__submit .btn {
  width: 100%;
  justify-content: center;
}

/* ============================================================
   07. Contact
============================================================ */
/* cursor sparkle */
@keyframes sparkFly {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.15); }
}
.cursor-spark {
  position: fixed;
  pointer-events: none;
  z-index: 9990;
  font-size: 13px;
  color: var(--c-rose);
  animation: sparkFly 0.8s ease-out forwards;
  will-change: transform, opacity;
}


.contact-sec {
  position: relative;
  background: #f8f3eb;
  padding: 160px 40px;
  text-align: center;
  overflow: hidden;
}

.contact-sec__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.contact-sec__orb--a {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(202, 177, 126, 0.14) 0%, transparent 70%);
  top: -80px; left: -100px;
}
.contact-sec__orb--b {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(220, 205, 175, 0.12) 0%, transparent 70%);
  bottom: -60px; right: -80px;
}
.contact-sec__orb--c {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(215, 195, 155, 0.10) 0%, transparent 70%);
  top: 40%; left: 60%;
}

.contact-sec__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.contact-sec__en {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--c-rose);
  margin-bottom: 32px;
}

.contact-sec__title {
  font-family: var(--f-serif);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--c-text);
  word-break: keep-all;
  overflow-wrap: anywhere;
  margin-bottom: 48px;
  margin-top: 20px;
}

.contact-sec__desc {
  font-size: 14px;
  color: var(--c-mid);
  line-height: 2.2;
  letter-spacing: 0.06em;
  margin-bottom: 56px;
}

.contact-sec__btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-sec__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 40px;
  width: 100%;
}
.contact-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 48px;
  gap: 16px;
}
.contact-col:first-child {
  border-right: 1px solid rgba(202, 177, 126, 0.3);
}
.contact-col__label {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-gold);
}
.contact-col__title {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--c-text);
}
.contact-col__rule {
  width: 30px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.6;
}
.contact-col__desc {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--c-mid);
  flex: 1;
}
.contact-col .btn--rose {
  background: transparent;
  color: var(--c-rose);
  border: 1px solid var(--c-rose);
  box-shadow: none;
}
.contact-col .btn--rose:hover {
  background: var(--c-rose);
  color: #fff;
}

.btn--lg {
  padding: 20px 56px;
  font-size: 13px;
  letter-spacing: 0.18em;
}

.btn--outline-rose {
  border: 1px solid var(--c-rose);
  color: var(--c-rose);
  background: transparent;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 16px 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.25s, color 0.25s;
}
.btn--outline-rose:hover {
  background: var(--c-rose);
  color: #fff;
}

/* ============================================================
   08. Follow Me
============================================================ */
/* ── Book Section ────────────────────────────── */
.book-sec {
  background: #fdf6f4;
  padding: 100px 40px;
}

.book-sec__wrap {
  max-width: 1040px;
  margin: 0 auto;
}
.book-sec__eyebrow { margin-bottom: 20px; }
.book-sec__lower { margin-top: 32px; }

.book-sec__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: center;
}

.book-sec__img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.book-sec__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.book-sec__title {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--c-text);
  margin-top: 10px;
}

.book-sec__meta {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-gold);
  margin-top: -8px;
}

.book-sec__desc {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.95;
  color: var(--c-text);
  opacity: 0.8;
  margin: 0 0 20px;
}

.book-sec__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
}

.book-sec__reviews {
  display: flex;
  align-items: center;
  gap: 10px;
}

.book-sec__review-link {
  font-family: var(--f-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--c-mid);
  text-decoration: none;
  transition: color 0.2s;
}

.book-sec__review-link:hover { color: var(--c-rose); }

.book-sec__review-sep {
  font-size: 11px;
  color: var(--c-mid);
  opacity: 0.4;
}

.marker {
  background: linear-gradient(transparent 55%, rgba(215, 139, 154, 0.35) 55%);
  font-weight: 700;
}

.book-sec__rule {
  height: 1px;
  background: rgba(202, 177, 126, 0.35);
}

.book-sec__avail {
  font-family: var(--f-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--c-mid);
  opacity: 0.75;
  margin: -4px 0 0;
}

.book-sec__footer {
  max-width: 1040px;
  margin: 40px auto 0;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.book-sec__carousel {
  overflow: hidden;
  max-width: 1040px;
  margin: 48px auto 0;
  padding: 4px 0;
}

.book-sec__carousel:hover .book-sec__carousel-track {
  animation-play-state: paused;
}

.book-sec__carousel-track {
  display: flex;
  width: max-content;
  animation: book-carousel 36s linear infinite;
}

@keyframes book-carousel {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.book-sec__voice-card {
  width: 290px;
  flex-shrink: 0;
  margin-right: 18px;
  background: #fff;
  border: 1px solid rgba(202, 177, 126, 0.22);
  border-radius: 8px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.book-sec__voice-stars {
  font-size: 14px;
  color: var(--c-gold);
  letter-spacing: 3px;
}

.book-sec__voice-text {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-text);
  margin: 0;
}

.book-sec__voice-name {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-gold);
}

/* ── Nav social icons ────────────────────────── */
.site-nav__item--social {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 4px;
}

.site-nav__social-link {
  display: flex;
  align-items: center;
  color: var(--c-text);
  opacity: 0.55;
  transition: opacity 0.2s;
}

.site-nav__social-link:hover { opacity: 1; }

.site-nav__ws-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: #fff;
  background: var(--c-rose);
  border-radius: 20px;
  padding: 5px 12px;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.site-nav__ws-btn:hover {
  opacity: 1;
}

/* ── Footer social icons ─────────────────────── */
.footer__social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  color: var(--c-text);
  opacity: 0.45;
  transition: opacity 0.2s;
}

.footer__social-link:hover { opacity: 0.9; }

/* ── Produce Marquee ── */
.produce-marquee {
  background: #fff;
  padding: 72px 24px 56px;
  border-top: 1px solid rgba(184, 149, 90, 0.12);
  text-align: center;
}

.produce-marquee__text {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(40px, 6.5vw, 80px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-gold);
  line-height: 1.4;
  min-height: 1.4em;
}

.produce-marquee__line {
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, var(--c-gold), transparent);
  margin: 32px auto 0;
  transition: height 1.2s ease;
}
.produce-marquee__line.is-visible {
  height: 64px;
}

.produce-marquee__sub {
  font-family: var(--f-serif);
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--c-mid);
  text-align: center;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease, transform 1s ease;
}
.produce-marquee__sub.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.produce-premium.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Produce Premium Section ── */
.produce-premium {
  position: relative;
  padding: 140px 80px;
  text-align: center;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.4s ease, transform 1.4s ease;
  overflow: hidden;
  background: #1a1410;
}
.produce-premium__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.45;
}
.produce-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(30, 22, 20, 0.52);
  z-index: 1;
}
.produce-premium__inner {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin: 0 auto;
}
.produce-premium::after {
  content: 'Produce Plan';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(60px, 12vw, 160px);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.produce-premium__eyebrow {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: block;
  margin-bottom: 36px;
}
.produce-premium__title {
  font-family: var(--f-serif);
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 400;
  color: rgba(255,250,245,0.95);
  line-height: 2.0;
  letter-spacing: 0.06em;
  margin-bottom: 40px;
}
.produce-premium__title em {
  font-style: normal;
  color: var(--c-gold);
  font-family: var(--f-serif);
}
.produce-premium__desc {
  font-family: var(--f-serif);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 2.4;
  letter-spacing: 0.06em;
  color: rgba(255,250,245,0.82);
  margin-bottom: 64px;
}
.produce-premium .btn { margin-top: 8px; }
@media (max-width: 768px) {
  .produce-premium {
    padding: 100px 32px;
    background-attachment: scroll;
  }
}

/* ============================================================
   09. Footer
============================================================ */
/* ── Back to top ─────────────────────────────── */
.back-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 52px;
  height: 64px;
  border-radius: 40px;
  border: 1px solid rgba(200, 128, 138, 0.3);
  background: rgba(252, 248, 244, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(180, 120, 130, 0.14);
  color: var(--c-rose);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s, background 0.3s, color 0.3s;
  z-index: 400;
}
.back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-top:hover {
  background: var(--c-rose);
  color: #fff;
  box-shadow: 0 8px 28px rgba(200, 128, 138, 0.32);
  transform: translateY(-4px);
}
.back-top__arrow {
  display: block;
  width: 20px;
  height: 20px;
}
.back-top__label {
  font-family: var(--f-en);
  font-size: 9px;
  letter-spacing: 0.2em;
  line-height: 1;
}


.footer {
  position: relative;
  background-image: url('images/follow-bg.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 250, 248, 0.88);
}
.footer__bottom {
  position: relative;
  z-index: 1;
  padding: 48px 40px 40px;
}

.footer__logo {
  display: inline-block;
  margin-bottom: 24px;
}

.footer__logo-img {
  height: 38px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.25s;
}
.footer__logo:hover .footer__logo-img { opacity: 1; }

.footer__nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.footer__nav a {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(100, 65, 75, 0.7);
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--c-rose); }

.footer__nav--legal {
  margin-top: 12px;
  gap: 20px;
}

.footer__copy {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(100, 65, 75, 0.5);
}


/* ============================================================
   Responsive — 1024px (tablet landscape)
============================================================ */
@media (max-width: 1024px) {
  .site-header { padding: 20px 40px; }
  .site-header.is-scrolled { padding: 14px 40px; }
  .profile__inner { gap: 40px; }
  .services__cards { padding: 0 18%; }
  .step2__cards { padding: 0 18%; }
  .step2__inner { padding: 80px 48px; }

}

/* ============================================================
   Responsive — 768px (tablet / mobile)
============================================================ */
@media (max-width: 768px) {

  /* ─── Header ─── */
  .site-header { padding: 18px 24px; }
  .site-header.is-scrolled { padding: 14px 24px; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(252, 248, 246, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 90px 40px 56px;
    transform: translateY(-105%);
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 199;
    box-shadow: 0 8px 40px rgba(180, 130, 120, 0.12);
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav__list { flex-direction: column; align-items: center; gap: 36px; }
  .site-nav__link { font-size: 13px; letter-spacing: 0.32em; }
  .site-nav__item--premium {
    margin-top: 8px;
  }

  /* Mobile dropdown */
  .site-nav__item--dropdown .site-nav__dropdown {
    position: static;
    transform: none !important;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .site-nav__item--dropdown.is-open .site-nav__dropdown {
    max-height: 200px;
    padding: 4px 0 8px;
    pointer-events: auto;
  }
  .site-nav__dropdown-link {
    font-size: 11px;
    letter-spacing: 0.2em;
    padding: 8px 0;
    text-align: center;
    color: var(--c-sub);
    background: transparent;
  }
  .site-nav__dropdown-link::before { display: none; }
  .site-nav__dropdown-en { display: none; }
  .site-nav__chevron { display: none; }

  /* ─── Hero ─── */
  .hero { min-height: 88vh; align-items: center; }
  .hero::before {
    background: linear-gradient(
      to top,
      rgba(252, 242, 246, 0.92) 0%,
      rgba(252, 242, 246, 0.65) 40%,
      rgba(252, 242, 246, 0.10) 70%,
      rgba(252, 242, 246, 0.00) 100%
    );
  }
  .hero__right { left: 0; }
  .hero__right::before { display: none; }
  .hero__video { object-fit: cover; object-position: 62% 5%; opacity: 0.55; }
  .hero__left { max-width: 100%; padding: 100px 24px 60px; }
  .hero__ornament { display: none; }
  .hero__scroll { left: 0; right: 0; bottom: 24px; margin: 0 auto; transform: none; }
  body.hero-loaded .hero__scroll { animation: fadeInUp 1.2s ease 3.0s both; left: 0; right: 0; }
  .hero__heading { font-size: clamp(22px, 6.5vw, 30px); margin-bottom: 28px; }
  .hero__heading-line { white-space: normal; }
  .hero__cta { flex-direction: column; gap: 12px; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* ─── Philosophy ─── */
  .philosophy { padding: 72px 24px; }
  .philosophy__rule { display: none; }
  .philosophy__heading { font-size: clamp(17px, 5vw, 23px); line-height: 2.0; }
  .philosophy::before { content: 'Times have\A changed.'; white-space: pre; text-align: center; width: 100%; font-size: clamp(40px, 12vw, 80px); }

  /* ─── Profile ─── */
  .profile__inner { grid-template-columns: 1fr; min-height: unset; }
  .profile__visual { height: 70vw; max-height: 400px; min-height: 260px; order: 1; }
  .profile__visual::after { display: none; }
  .concept__text { order: 2; padding: 48px 24px 56px; }
  .profile__sig-deco { font-size: clamp(46px, 12vw, 68px); }

  /* ─── Strip ─── */
  .strip__img-wrap { height: 60vw; min-height: 220px; }
  .strip__phrase { letter-spacing: 0.06em; }

  /* ─── For You ─── */
  .forwho { padding: 80px 0 88px; }
  .forwho__item { padding: 32px 0; }
  .forwho__sub { font-size: 13px; }
  .forwho__item-voice { font-size: 18px; }

  /* ─── Marquee ─── */
  .marquee { display: none; }

  /* ─── Services ─── */
  .services { min-height: 0; height: auto; overflow: visible; padding: 0 0 56px; flex-direction: column; align-items: stretch; }
  .services.doors-open { min-height: 0; height: auto; }
  .services__door { display: none; }
  .services__step-label {
    position: static;
    transform: none;
    padding: 64px 24px 40px;
    opacity: 1;
  }
  .services.doors-open .services__step-label { opacity: 1; }
  .services__cards { opacity: 0; transition: opacity 0.9s ease 3.4s; }
  .services.step-typed .services__cards { opacity: 1; }
  .services__step-msg { font-size: 15px; }
  .services__door-icon-wrap { width: 90px; }
  .services__cards { flex-direction: column; align-items: stretch; padding: 0 20px; gap: 20px; }
  .svc-card {
    padding: 76px 28px 56px;
    border: 1px solid rgba(202, 177, 126, 0.3);
    border-radius: 8px;
    background: #fffaf8;
    box-shadow: 0 2px 20px rgba(61, 51, 48, 0.06);
    aspect-ratio: unset;
    justify-content: center;
  }
  .svc-card:first-child { border-right: 1px solid rgba(202, 177, 126, 0.3); border-bottom: 1px solid rgba(202, 177, 126, 0.3); }
  .salon-feature__cta, .lesson-card__cta { margin-top: 20px; }
  .svc-watermark { font-size: 56px; top: 14px; }
  .step2__cards { padding: 0 2%; }
  .salon-feature { gap: 20px; }
  .salon-feature__title { font-size: 32px; }
  .lesson-card__title { font-size: 32px; }
  .salon-feature__desc { font-size: 13px; }

  /* ─── Step 2 ─── */
  .step2 { min-height: 520px; }
  .step2.doors-open .step2__door--left  { clip-path: inset(0 95% 0 0); }
  .step2.doors-open .step2__door--right { clip-path: inset(0 0 0 95%); }
  .step2__inner { padding: 72px 24px; }
  .step2__title { font-size: clamp(20px, 5.5vw, 28px); }
  .step2__item { padding: 18px 0; gap: 12px; grid-template-columns: 2em 1fr auto; }
  .step2__item-name { font-size: 14px; }
  .step2__item-btn { padding: 8px 16px; font-size: 10px; }

  /* ─── Voice ─── */
  .voice { padding: 80px 32px; }
  .voice__grid { grid-template-columns: 1fr; }

  /* ─── CTA ─── */
  .cta { min-height: unset; padding: 60px 24px; background-position: 130% top; }
  .cta::before { background: rgba(255,250,248,0.93); }
  .cta__glass { max-width: 100%; text-align: left; }
  .cta__name-row { grid-template-columns: 1fr; }

  /* ─── Contact ─── */
  .contact-sec { padding: 96px 0; }
  .contact-sec__inner { padding: 0 24px; }
  .contact-sec__inner .eyebrow { font-size: 14px; }
  .contact-sec__title { font-size: clamp(20px, 5.5vw, 32px); }
  .contact-sec__cols { grid-template-columns: 1fr; }
  .contact-col:first-child { border-right: none; border-bottom: 1px solid rgba(202,177,126,0.3); }
  .contact-col { padding: 36px 24px; }
  .contact-sec__btns { flex-direction: column; align-items: center; gap: 14px; }
  .contact-sec__btns .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* ─── Book ─── */
  .book-sec { padding: 72px 20px; }
  .book-sec__eyebrow { margin-bottom: 16px; }
  .book-sec__inner { grid-template-columns: 90px 1fr; gap: 16px; align-items: center; }
  .book-sec__img { max-width: 90px; border-radius: 0; }
  .book-sec__body { text-align: left; gap: 8px; }
  .book-sec__lower { margin-top: 20px; text-align: left; }
  .book-sec__voice-card { width: 240px; }
  .book-sec__title { font-size: 17px; line-height: 1.5; }

  /* ─── Footer ─── */
  .footer__bottom { padding: 36px 24px 28px; }
  .footer__logo-img { height: 30px; }
  .footer__nav { gap: 16px; }
  .footer__nav--legal { gap: 14px; margin-top: 8px; }

  /* ─── Back to top ─── */
  .back-top { bottom: 20px; right: 20px; width: 44px; height: 56px; }
}

/* ============================================================
   Responsive — 480px (small mobile)
============================================================ */
@media (max-width: 480px) {
  .hero__heading { font-size: 20px; }
  .philosophy__heading { font-size: 16px; }
  .forwho__item-voice { font-size: 16px; }
  .services { min-height: 0; }
  .step2 { min-height: 460px; }
  .voice { padding: 64px 20px; }
  .cta__name-row { grid-template-columns: 1fr; }
  .book-sec__img { max-width: 110px; border-radius: 0; }
  .contact-sec__btns .btn { font-size: 12px; }
  .footer__nav { gap: 12px; }
}

/* ============================================================
   Sub-page: Page Hero
============================================================ */
.page-hero {
  padding: 160px var(--pad) 96px;
  background: var(--c-bg);
}

.page-hero__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-sub);
  margin-bottom: 28px;
}

.page-hero__label .hero__label-line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--c-rose);
  flex-shrink: 0;
}

.page-hero__heading {
  font-family: var(--f-serif);
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--c-text);
}

@media (max-width: 768px) {
  .page-hero {
    padding: 120px 28px 72px;
  }
  .page-hero__heading {
    font-size: 30px;
  }
}

/* ============================================================
   Door Loader (sub-pages)
============================================================ */
.door-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
}

.door-loader__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--c-bg);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.door-loader__panel--left {
  left: 0;
  transform: translateX(0);
  border-right: 1px solid var(--c-border);
}

.door-loader__panel--right {
  right: 0;
  transform: translateX(0);
  border-left: 1px solid var(--c-border);
}

/* arch decoration inside each panel */
.door-loader__panel--left::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 200px;
  background: var(--c-pink-lt);
  border-radius: 80px 80px 0 0;
  opacity: 0.55;
}

.door-loader__panel--right::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 200px;
  background: var(--c-pink-lt);
  border-radius: 80px 80px 0 0;
  opacity: 0.55;
}

/* logo centered over the split */
.door-loader__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 120px;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* open state */
.door-loader.is-open .door-loader__panel--left {
  transform: translateX(-100%);
}

.door-loader.is-open .door-loader__panel--right {
  transform: translateX(100%);
}

.door-loader.is-open .door-loader__logo {
  opacity: 0;
}

.door-loader.is-done {
  pointer-events: none;
}


/* ========================================
   LESSON FEATURE (index-salon)
======================================== */
.lesson-feature {
  padding: 100px 40px;
  background: #faf8f4;
}
.lesson-feature__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.lesson-feature__visual {
  overflow: hidden;
  border-radius: 4px;
}
.lesson-feature__img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.lesson-feature__visual:hover .lesson-feature__img {
  transform: scale(1.03);
}
.lesson-feature__badge {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .12em;
  color: #fff;
  background: var(--c-rose);
  padding: 4px 14px;
  border-radius: 2px;
  margin-bottom: 20px;
}
.lesson-feature__title {
  font-family: var(--f-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: .05em;
  line-height: 1.4;
  margin: 12px 0 24px;
}
.lesson-feature__desc {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 2;
  color: var(--c-text);
  opacity: .8;
  margin-bottom: 36px;
}
@media (max-width: 768px) {
  .lesson-feature {
    padding: 72px 24px;
  }
  .lesson-feature__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .lesson-feature__img {
    height: 260px;
  }
}

/* ── Nav LINE CTA button ───────────────────────────── */
@keyframes line-btn-shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(260%) skewX(-15deg); }
}

.site-nav__item--line {
  margin-left: 12px;
}
.site-nav__line-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-sans);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: #fff !important;
  background: linear-gradient(135deg, #d4adb3 0%, #c79fa6 100%);
  padding: 8px 22px 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(196,157,163,.3);
  transition: transform .3s ease, box-shadow .3s ease;
}
.site-nav__line-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%) skewX(-15deg);
}
.site-nav__line-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(215,139,154,.45);
}
.site-nav__line-btn:hover::after {
  animation: line-btn-shimmer .55s ease forwards;
}
.site-nav__line-heart {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  animation: heartbeat 2.8s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25%       { transform: scale(1.3); }
  40%       { transform: scale(1); }
  55%       { transform: scale(1.15); }
  70%       { transform: scale(1); }
}
.site-nav__line-text {
  font-size: 11.5px;
  letter-spacing: .12em;
}

/* ── Hero LINE heart ───────────────────────────────── */
.hero-line-heart {
  display: inline-block;
  animation: heartbeat 2.8s ease-in-out infinite;
  margin-right: 2px;
}
@media (max-width: 768px) {
  .site-nav__item--line {
    margin-left: 0;
    margin-top: 8px;
  }
  .site-nav__line-btn {
    margin: 4px 0;
  }
}

/* ── Text marker highlight ─────────────────────────── */
.text-marker {
  background: linear-gradient(transparent 55%, rgba(215,139,154,.18) 55%);
  padding-bottom: 2px;
  font-weight: 500;
}

/* ========================================
   CONCEPT MODAL
======================================== */
.concept-more-btn {
  background: none;
  border: 1px solid var(--c-rose);
  border-radius: 999px;
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--c-rose);
  padding: 9px 20px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
  margin-top: 16px;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
}
.concept-more-btn::after {
  content: '→';
  font-size: 13px;
  transition: transform .25s ease;
}
.concept-more-btn:hover {
  background: var(--c-rose);
  color: #fff;
}
.concept-more-btn:hover::after {
  transform: translateX(4px);
}

/* ── Days Modal ────────────────────────────────── */
.cta__days-btn {
  display: inline-block;
  margin: 20px 0 32px;
  background: none;
  border: none;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--c-gold);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.2s;
}
.cta__days-btn:hover { opacity: 0.7; }

.days-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.days-modal.is-open { opacity: 1; pointer-events: auto; }
.days-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(61, 51, 48, 0.45);
  backdrop-filter: blur(4px);
}
.days-modal__panel {
  position: relative;
  z-index: 1;
  background: #fffaf8;
  border-radius: 12px;
  padding: 52px 48px;
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.days-modal.is-open .days-modal__panel { transform: translateY(0); }
.days-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--c-mid);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.days-modal__eyebrow {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-gold);
  margin-bottom: 10px;
}
.days-modal__title {
  font-family: var(--f-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-text);
  margin-bottom: 16px;
}
.days-modal__rule {
  width: 40px;
  height: 1px;
  background: var(--c-gold);
  margin-bottom: 28px;
}
.days-modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.days-modal__list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--c-text);
  padding: 13px 0;
  border-bottom: 1px solid rgba(202,177,126,0.2);
}
.days-modal__list li:last-child { border-bottom: none; }
.days-modal__num {
  font-family: var(--f-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-gold);
  white-space: nowrap;
  min-width: 40px;
}

.concept-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.concept-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}
.concept-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(61,51,48,.45);
  backdrop-filter: blur(4px);
}
.concept-modal__panel {
  position: relative;
  background: #fffaf8;
  border-radius: 4px;
  padding: 56px 56px 52px;
  max-width: 600px;
  width: calc(100% - 48px);
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(24px);
  transition: transform .4s cubic-bezier(.22,.68,0,1.2);
  box-shadow: 0 20px 60px rgba(61,51,48,.15);
}
.concept-modal.is-open .concept-modal__panel {
  transform: translateY(0);
}
.concept-modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--c-text);
  cursor: pointer;
  opacity: .4;
  transition: opacity .2s ease;
  line-height: 1;
}
.concept-modal__close:hover { opacity: .8; }

.concept-modal__eyebrow {
  font-family: var(--f-serif);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--c-rose);
  margin-bottom: 12px;
}
.concept-modal__rule {
  width: 40px;
  height: 1px;
  background: var(--c-gold);
  margin-bottom: 36px;
}
.concept-modal__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.concept-modal__item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.concept-modal__num {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--c-gold);
  flex-shrink: 0;
  padding-top: 4px;
}
.concept-modal__title {
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.concept-modal__text {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
  opacity: .8;
}
@media (max-width: 768px) {
  .concept-modal__panel {
    padding: 48px 28px 40px;
  }
}

/* ── Concept modal watermark ───────────────────────── */
.concept-modal__watermark {
  position: absolute;
  top: 24px;
  right: -8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 64px;
  font-weight: 300;
  color: var(--c-rose);
  opacity: .07;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* ========================================
   AI STORY SECTION
======================================== */
.ai-story {
  padding: 120px 40px;
  background: #fff;
  text-align: center;
}
.ai-story__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ai-story__title {
  font-family: var(--f-serif);
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 500;
  color: var(--c-text);
  opacity: .85;
  letter-spacing: .06em;
  line-height: 1.6;
  margin-top: 16px;
}
.ai-story__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-story__text {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 2;
  color: var(--c-text);
  opacity: .8;
}
.ai-story__quote {
  position: relative;
  padding: 36px 0;
  background: transparent;
  border-radius: 0;
  text-align: center;
  border-top: 1px solid rgba(202, 177, 126, 0.5);
  border-bottom: 1px solid rgba(202, 177, 126, 0.5);
}
.ai-story__quote-mark {
  display: none;
}
.ai-story__quote-text {
  font-family: var(--f-serif);
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: .08em;
  line-height: 1.6;
  text-align: center;
}
.ai-story__closing {
  font-family: var(--f-serif);
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.8;
  color: var(--c-text);
  letter-spacing: .06em;
}
.ai-story__closing em {
  color: var(--c-rose);
  font-style: normal;
}
@media (max-width: 768px) {
  .ai-story {
    padding: 80px 24px;
  }
  .ai-story__inner {
    gap: 36px;
  }
  .ai-story__quote {
    padding: 32px 0;
  }
}