/* ===================================================
   em+ Custom Theme - Main Stylesheet
   Design base: 1920px
=================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Zen+Old+Mincho:wght@400;500;600&display=swap');

/* --- Optima (Web Font) --- */
@font-face {
  font-family: 'Optima';
  src: url('../fonts/Optima.woff2') format('woff2'),
       url('../fonts/Optima.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Variables --- */
:root {
  --color-bg:             #eeece9;
  --color-bg-mv:          #f3f2f0;
  --color-dark:           #3c3232;
  --color-text:           #3c3232;
  --color-border-light:   #d9d9d9;
  --color-overlay-orange: rgba(243, 131, 46, 0.3);
  --color-white-30:       rgba(255, 255, 255, 0.3);

  --font-display:   'Optima', 'Poppins', sans-serif;
  --font-serif-jp:  'Zen Old Mincho', serif;
  --font-gothic-jp: 'Zen Old Mincho', serif;

  --header-h: 88px;
  --content-pad: clamp(24px, 2.8125vw, 54px); /* 54/1920 */
}

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 1.9;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block;object-fit: cover;object-position: center; }
a   { text-decoration: none; color: inherit; }
p   { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ===================================================
   Header  (Figma: 1920×88px)
   - nav left: 54px, gap: 48px, font: Optima 16px
   - logo: center (left:928px, 66×70)
   - CTA: right, each 280px, border-left #d9d9d9, font: 24px
=================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-h);
  background-color: var(--color-bg);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 100;
  transition: box-shadow 0.3s;
}

.site-header.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Nav — left column */
.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 48px);
  padding-left: clamp(20px, 2.8125vw, 54px);
}

.header-nav a {
  font-family: var(--font-display);
  font-size: 16px;
  color: #000;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.header-nav a:hover { opacity: 0.55; }

/* Logo — center column */
.header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-logo img {
  width: 66px;
  height: 70px;
  object-fit: contain;
}

/* CTA — right column */
.header-cta {
  display: flex;
  justify-content: flex-end;
  height: var(--header-h);
}

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(100px, 14.58vw, 280px);
  height: 100%;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.25vw, 24px);
  color: #000;
  border-left: 1px solid var(--color-border-light);
  transition: background-color 0.2s;
}
.header-btn:hover { background-color: rgba(60,50,50,0.05); }
.header-btn_soon{
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
._soon{
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
/* ===================================================
   MV Section  (Figma: 1916×824px、node: 96:198)
   - 左コンテンツ 747px / gap 189px / 右動画 538×824px
   - 背景: #f3f2f0、左開始: 187px
=================================================== */
.mv {
  padding-top: var(--header-h);
  background-color: var(--color-bg-mv);
}

/* ヘッダー下の背景エリア */
.mv-bg {
  width: 100%;
}

/* 2カラムレイアウト */
.mv-inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, 9.84vw, 189px);        /* 189/1920 */
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(24px, 9.74vw, 187px);  /* 187/1920 */
  min-height: 824px;
}

/* 左コンテンツ (747px) */
.mv-content {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.34vw, 45px);         /* 45/1920 */
  width: clamp(300px, 38.9vw, 747px);
  flex-shrink: 0;
}

/* ロゴ：513×235px クロップ */
.mv-logo-crop {
 max-width: 400px;
}

/* メインコピー */
.mv-headline {
  font-family: var(--font-serif-jp);
  font-size: clamp(28px, 2.92vw, 56px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0;
  white-space: nowrap;
}

/* サブコピー */
.mv-subtext {
  font-family: var(--font-serif-jp);
  font-size: clamp(16px, 1.46vw, 28px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
  white-space: nowrap;
}

/* 右：動画ラッパー (538×824px) */
.mv-video-wrap {
  width: clamp(160px, 28.02vw, 538px);
  height: clamp(250px, 42.92vw, 824px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* 回転なし（新動画はすでに縦長） */
.mv-video-rotate {
  flex: none;
}

/* 動画フレーム本体 (538×824) */
.mv-video-frame {
  width: clamp(160px, 28.02vw, 538px);
  height: clamp(250px, 42.92vw, 824px);
  border: 1px solid var(--color-dark);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.mv-video-frame video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
}

/* 動画が未設定の場合のフォールバック画像 */
.mv-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================================================
   CTA Section  (Figma: 1920×194px、node: 122:66)
   - ボタン 517×160px / gap 11px / 左開始 432px
   - 仕切り線 118px / border #3c3232 / bg rgba(255,255,255,0.3)
=================================================== */
.section-cta {
  width: 100%;
  border-bottom: 1px solid var(--color-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  background-color: var(--color-bg);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px clamp(20px, 22.5vw, 432px);
  gap: clamp(6px, 0.573vw, 11px);
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.52vw, 10px);
  width: clamp(160px, 26.93vw, 517px);
  height: 80px;
  background-color: var(--color-white-30);
  background-image: linear-gradient(rgba(60, 50, 50, 0.1), rgba(60, 50, 50, 0.1));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  border-left: 1px solid var(--color-dark);
  border-right: 1px solid var(--color-dark);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.46vw, 28px);
  color: var(--color-dark);
  transition: background-size 0.3s ease-out;
  white-space: nowrap;
}
.cta-icon {
  width: clamp(18px, 1.35vw, 26px);
  height: clamp(18px, 1.35vw, 26px);
  flex-shrink: 0;
}
.cta-btn:hover { background-size: 100% 100%; }

.cta-btn_soon{
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
/* 中央の縦仕切り線 (118px) */
.cta-divider {
  width: 1px;
  height: clamp(60px, 6.15vw, 118px);
  background-color: #d9d9d9;
  flex-shrink: 0;
}

/* ===================================================
   Concept Section  (Figma node: 122:34)
   - 上余白 298px / 左画像 909×506px / gap 93px
   - 見出し: Optima 40px / 本文: 游明朝 16px line-height 1.9 w:729px
=================================================== */
.section-concept {
  background-color: var(--color-bg);
}

.concept-inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.84vw, 93px);
  padding-top: clamp(60px, 15.52vw, 298px);
  max-width: 1920px;
  margin: 0 auto;
}

/* 左：写真 */
.concept-image {
  width: clamp(200px, 47.34vw, 909px);
  height: clamp(180px, 26.35vw, 506px);
  flex-shrink: 0;
  overflow: hidden;
}
.concept-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* 右：テキストエリア */
.concept-text {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.08vw, 40px);
  flex: 1;
  padding-right: clamp(24px, 5vw, 96px);
}

/* パララクス対象コンテナ */
[data-parallax] {
  will-change: transform;
}

/* スクロール吸い込みフェードイン（パララクスなし画像） */
.scroll-fadein {
  opacity: 0;
  transform: scale(0.93);
  will-change: opacity, transform;
  transition: opacity 0.75s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scroll-fadein.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* 共通：セクション見出し */
.section-heading {
  display: flex;
  align-items: center;
  gap: 24px;
}
.section-heading span {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.08vw, 40px);
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}
.section-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 本文 */
.concept-body {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-dark);
  max-width: clamp(300px, 37.97vw, 729px);
}
.concept-body p { margin: 0; }
.concept-body p + p { margin-top: 0; }

/* ===================================================
   3つの笑顔 Section  (Figma node: 122:45)
   - 1920×823px / 背景画像 + rgba(53,53,53,0.4) overlay
   - 見出し: 游ゴシック 24px white / 中央揃え
   - 3カラム: 各301px / gap 88px / left:420px
=================================================== */
.section-features {
  position: relative;
  height: clamp(500px, 42.86vw, 823px);
  overflow: hidden;
}

/* 背景画像＋オーバーレイ */
.features-bg {
  position: absolute;
  inset: 0;
}
.features-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.features-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(53,53,53,0.4);
}

/* コンテンツ領域 */
.features-inner {
  position: relative;
  z-index: 1;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(48px, 6.25vw, 120px) 0;
}

/* 見出し: top:227px / 中央揃え */
.features-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: clamp(60px, 7.5vw, 144px); /* 371 - 227 = 144px */
}
.features-heading span {
  font-family: var(--font-gothic-jp);
  font-size: clamp(18px, 1.25vw, 24px);
  color: #fff;
  white-space: nowrap;
}

/* 3カラムグリッド */
.features-grid {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 4.58vw, 88px);
  padding: 0 clamp(24px, 21.875vw, 420px);
}

.feature-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 2.92vw, 56px);
  width: clamp(200px, 15.68vw, 301px);

  /* フェードイン初期状態：非表示・ぼかし */
  opacity: 0;
  filter: blur(14px);
  transform: translateY(16px);
  transition:
    opacity   0.8s ease,
    filter    0.8s ease,
    transform 0.8s ease;
}

/* JS が付与するクラスで表示確定 */
.feature-col.is-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* 左から順番に遅延 */
.feature-col:nth-child(1) { transition-delay: 0s;    }
.feature-col:nth-child(2) { transition-delay: 0.25s; }
.feature-col:nth-child(3) { transition-delay: 0.5s;  }

/* ドット＋サブタイトルのグループ */
.feature-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.feature-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.feature-title {
  font-family: var(--font-gothic-jp);
  font-size: 16px;
  line-height: 1.9;
  color: #fff;
  text-align: center;
  margin: 0;
}

.feature-body {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 1.9;
  color: #fff;
  margin: 0;
  text-align: left;
}

/* ===================================================
   Details Section  (Figma node: 122:37)
   - 左: 366×297px 施術写真 (crop: h:218.99% top:-75.84%)
   - 中央: 見出し + 本文 595px, left:660px, gap:103px
   - 右: 420×778px 縦長写真、右端絶対配置 (shadow付き)
   - section padding-top: 197px / padding-bottom: 197px
=================================================== */
.section-details {
  position: relative;
  background-color: var(--color-bg);
  padding-top: clamp(48px, 10.26vw, 197px);
  padding-bottom: clamp(48px, 10.26vw, 197px);
  overflow: hidden;
}

.details-inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5.365vw, 103px);
  padding-left: clamp(24px, 9.948vw, 191px);
  padding-right: clamp(220px, 23vw, 460px);
  max-width: 1920px;
  margin: 0 auto;
}

/* 左：施術写真 366×297px（クロップ） */
.details-img-left {
  flex: 0 0 clamp(140px, 19.063vw, 366px);
  height: clamp(114px, 15.469vw, 297px);
  overflow: hidden;
  position: relative;
}
.details-img-left img {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: none;
  will-change: transform;
}

/* 中央：見出し＋本文 */
.details-text {
  flex: 0 0 clamp(200px, 30.99vw, 595px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.083vw, 40px);
}

.details-text .section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.details-text .section-heading span {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.083vw, 40px);
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: 0.05em;
}

.details-body {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 2;
  color: var(--color-dark);
  margin: 0;
}

/* 右：縦長写真 420×778px（右端・絶対配置・shadow） */
.details-img-right {
  position: absolute;
  right: 0;
  top: 0;
  width: clamp(160px, 21.875vw, 420px);
  height: 100%;
}
.details-img-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0px 4px 10px 0px rgba(60, 50, 50, 0.25);
  will-change: transform;
}

/* ===================================================
   Details Sub Section  (Figma node: 122:38)
   - left:0 (左端フラッシュ), top:13px offset
   - 左: 420×635px / 中央テキスト 595px / 右カード 366px
   - gap: 175px, shadow on card
=================================================== */
.section-details-sub {
  background-color: var(--color-bg);
  padding-top: clamp(4px, 0.677vw, 13px);
  padding-bottom: clamp(48px, 6.25vw, 120px);
}

.details-sub-inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 9.115vw, 175px);
}

/* 左：縦長写真 420×635px（左端フラッシュ） */
.details-sub-img-left {
  flex: 0 0 clamp(120px, 21.875vw, 420px);
  height: clamp(200px, 33.073vw, 635px);
  overflow: hidden;
}
.details-sub-img-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* 中央：本文テキスト */
.details-sub-body {
  flex: 0 0 clamp(200px, 30.99vw, 595px);
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 2;
  color: var(--color-dark);
  margin: 0;
}

/* 右：カード（空白＋施術写真）shadow付き */
.details-sub-card {
  flex: 0 0 clamp(120px, 19.063vw, 366px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.521vw, 10px);
}

.details-sub-card-space {
  height: clamp(80px, 13.646vw, 262px);
  width: clamp(40px, 6.406vw, 123px);
  flex-shrink: 0;
}

.details-sub-card-img {
  height: clamp(100px, 15.469vw, 297px);
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0px 2px 10px 0px rgba(60, 50, 50, 0.25);
}
.details-sub-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* ===================================================
   Trouble Section  (Figma node: 122:35)
   - 上余白 195px / 左開始 191px / gap 133px
   - 左テキスト 498px / 右画像 909×506px（クロップ）
=================================================== */
.section-trouble {
  background-color: var(--color-bg);
}

.trouble-inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6.93vw, 133px);
  padding: clamp(60px, 10.16vw, 195px) 0 clamp(60px, 10.16vw, 195px) clamp(24px, 9.95vw, 191px);
  max-width: 1920px;
  margin: 0 auto;
}

/* 左：テキスト (498px) */
.trouble-text {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.08vw, 40px);
  width: clamp(240px, 25.94vw, 498px);
  flex-shrink: 0;
}

.trouble-body {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-dark);
}
.trouble-body p { margin: 0; }

/* 「相談する」ボタン */
.trouble-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(200px, 16.67vw, 320px);
  height: clamp(48px, 3.33vw, 64px);
  background-color: var(--color-white-30);
  background-image: linear-gradient(rgba(60, 50, 50, 0.1), rgba(60, 50, 50, 0.1));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  border: 1px solid var(--color-dark);
  font-family: var(--font-gothic-jp);
  font-size: 18px;
  color: var(--color-dark);
  transition: background-size 0.3s ease-out;
}
.trouble-btn:hover { background-size: 100% 100%; }

/* 右：画像コンテナ 909×506px（クロップ） */
.trouble-image {
  width: clamp(200px, 47.34vw, 909px);
  height: clamp(180px, 26.35vw, 506px);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.trouble-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* ===================================================
   Flow Section  (Figma: 122:46)
   - heading left: 191px, line left: 420px top: 192px
   - 4-col grid: left:420px, top:313px, w:1077px, gap:40px
   - icon: 140×140px, card: glass, num badge: 32×32px
=================================================== */
.section-flow {
  padding: clamp(48px, 6.25vw, 120px) 0;
  background-color: var(--color-bg);
}

.flow-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: clamp(24px, 9.9479vw, 191px);
  padding-right: clamp(24px, 9.9479vw, 191px);
}

/* 見出し */
.flow-inner .section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(12px, 1.667vw, 32px);
}

.flow-inner .section-heading span {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.083vw, 40px);
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: 0.05em;
}

/* 横線 */
.flow-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-dark);
  margin-bottom: clamp(32px, 3.958vw, 76px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow-divider.is-visible {
  transform: scaleX(1);
}

/* 4カラムグリッド */
.flow-grid {
  display: flex;
  gap: clamp(16px, 2.083vw, 40px);
  align-items: flex-start;
  border-bottom: 1px solid var(--color-dark);
  padding-bottom: clamp(32px, 3.958vw, 76px);
}

.flow-col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.083vw, 40px);

  opacity: 0;
  filter: blur(14px);
  transform: translateY(16px);
  transition:
    opacity   0.8s ease,
    filter    0.8s ease,
    transform 0.8s ease;
}

.flow-col.is-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

.flow-col:nth-child(1) { transition-delay: 0s;    }
.flow-col:nth-child(2) { transition-delay: 0.25s; }
.flow-col:nth-child(3) { transition-delay: 0.5s;  }
.flow-col:nth-child(4) { transition-delay: 0.75s; }

/* アイコン */
.flow-icon-wrap {
  width: clamp(80px, 7.292vw, 140px);
  height: clamp(80px, 7.292vw, 140px);
  flex-shrink: 0;
}

.flow-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
}

/* カード */
.flow-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
  padding: 16px;
  background: var(--color-white-30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* 番号バッジ */
.flow-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-dark);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
}

/* ステップタイトル */
.flow-title {
  width: 100%;
  font-family: var(--font-gothic-jp);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark);
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

/* ステップ本文 */
.flow-body {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  color: var(--color-dark);
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

/* ===================================================
   Space Section  (Figma: 122:55)
   - left: 202px, two cols: text(587px) + image(756×506px), gap:182px
   - image: 323.92% height, top:-131.01% (crop)
=================================================== */
.section-space {
  padding: clamp(48px, 6.25vw, 120px) 0;
  background-color: var(--color-bg);
}

.space-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: clamp(24px, 10.52vw, 202px);
  padding-right: clamp(24px, 5.21vw, 100px);
  display: flex;
  align-items: center;
  gap: clamp(40px, 9.479vw, 182px);
}

/* 左：テキストブロック */
.space-text {
  flex: 0 0 clamp(240px, 30.573vw, 587px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.448vw, 47px);
}

.space-text .section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.space-text .section-heading span {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.083vw, 40px);
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: 0.05em;
}

.space-body {
  font-family: var(--font-serif-jp);
  font-size: clamp(13px, 0.833vw, 16px);
  color: var(--color-dark);
  line-height: 1.9;
  margin: 0;
}

/* 右：画像 756×506px（クロップ） */
.space-image {
  flex: 0 0 clamp(280px, 39.375vw, 756px);
  height: clamp(188px, 26.354vw, 506px);
  overflow: hidden;
  position: relative;
}

.space-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center;
}

/* ===================================================
   Menu Section  (Figma: 122:56)
   - heading row: icon + "Menu" + horizontal line
   - 6 rows: left text(587px) + right image(662×140px), gap:274px
   - orange overlay rgba(243,131,46,0.3) on selected rows
=================================================== */
.section-menu {
  padding: clamp(48px, 6.25vw, 120px) 0;
  background-color: var(--color-bg);
}

.menu-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: clamp(24px, 9.948vw, 191px);
  padding-right: clamp(24px, 9.844vw, 189px);
}

/* 見出し＋横線 */
.menu-heading-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.083vw, 40px);
  margin-bottom: clamp(32px, 4.167vw, 80px);
}

.menu-heading-row .section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.menu-heading-row .section-heading span {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.083vw, 40px);
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.menu-divider {
  flex: 1;
  height: 1px;
  background-color: var(--color-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-divider.is-visible {
  transform: scaleX(1);
}

/* メニューリスト */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.5vw, 48px);
}

/* 各メニュー行 */
.menu-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 14.271vw, 274px);
  justify-content: flex-end;
}

/* 左：テキスト */
.menu-text {
  flex: 0 0 clamp(200px, 30.573vw, 587px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.833vw, 16px);
}

.menu-title {
  font-family: var(--font-gothic-jp);
  font-size: clamp(14px, 1.25vw, 24px);
  color: var(--color-dark);
  line-height: 1.9;
  margin: 0;
}

.menu-more {
  font-family: var(--font-gothic-jp);
  font-size: clamp(13px, 0.938vw, 18px);
  color: var(--color-dark);
  line-height: 1.9;
  transition: opacity 0.3s;
  flex-shrink: 0;
}

/* ホバー展開エリア（価格＋説明文） */
.menu-expand {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.8s ease, opacity 0.35s ease;
}

.menu-price {
  font-family: var(--font-gothic-jp);
  font-size: 16px;
  color: var(--color-dark);
  margin: 0;
}

/* 複数時間プランの価格リスト */
.menu-price-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-gothic-jp);
  font-size: 16px;
  color: var(--color-dark);
}

.menu-duration {
  min-width: 3.5em;
  flex-shrink: 0;
}

.menu-desc {
  font-family: var(--font-serif-jp);
  font-size: 16px;
  color: var(--color-dark);
  line-height: 1.9;
  margin: 0;
}

/* ホバー時：行全体に適用 */
.menu-row {
  transition: gap 0.4s ease;
}

.menu-row:hover .menu-expand {
  max-height: 300px;
  opacity: 1;
}

.menu-row:hover .menu-more {
  opacity: 0;
  pointer-events: none;
}

/* 右：メニュー画像 */
.menu-img-wrap {
  flex: 0 0 clamp(200px, 34.479vw, 662px);
  height: clamp(56px, 7.292vw, 140px);
  overflow: hidden;
  position: relative;
  transition: height 0.8s ease;
}

/* ホバー時：画像を 140px → 233px に拡大 */
.menu-row:hover .menu-img-wrap {
  height: clamp(93px, 12.135vw, 233px);
}

.menu-img-wrap img {
  position: absolute;
  width: 100%;
  height: clamp(93px, 12.135vw, 233px);
  left: 0;
  top: 0;
  max-width: none;
  object-fit: cover;
}

/* 画像に個別クロップ値がインラインで指定された場合 */
.menu-img-wrap img[style] {
  width: 100%;
}

/* オレンジオーバーレイ */
/* .menu-img-wrap.has-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-orange);
  pointer-events: none;
} */

/* ===================================================
   Store Section  (Figma: 122:57)
   - left: image 764×506px, right: text 587px, gap:182px
   - image crop: h:130.62% w:129.72% top:-4.38% left:-0.01%
   - button: 320×64px, glass style, "商品を見る"
=================================================== */
.section-store {
  padding: clamp(48px, 6.25vw, 120px) 0;
  background-color: var(--color-bg);
}

.store-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: clamp(24px, 9.948vw, 191px);
  padding-right: clamp(24px, 9.948vw, 191px);
  display: flex;
  align-items: center;
  gap: clamp(40px, 9.479vw, 182px);
}

/* 左：画像 764×506px（クロップ） */
.store-image {
  flex: 0 0 clamp(280px, 39.792vw, 764px);
  height: clamp(188px, 26.354vw, 506px);
  overflow: hidden;
  position: relative;
}

.store-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 右：テキストブロック */
.store-text {
  flex: 0 0 clamp(240px, 30.573vw, 587px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.448vw, 47px);
}

.store-text .section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.store-text .section-heading span {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.083vw, 40px);
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: 0.05em;
}

.store-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.store-body p {
  font-family: var(--font-serif-jp);
  font-size: clamp(13px, 0.833vw, 16px);
  color: var(--color-dark);
  line-height: 1.9;
  margin: 0;
}

/* ボタン */
.store-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(180px, 16.667vw, 320px);
  height: clamp(48px, 3.333vw, 64px);
  background-color: var(--color-white-30);
  background-image: linear-gradient(rgba(60, 50, 50, 0.1), rgba(60, 50, 50, 0.1));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  border: 1px solid var(--color-dark);
  font-family: var(--font-gothic-jp);
  font-size: clamp(14px, 0.938vw, 18px);
  color: var(--color-dark);
  transition: background-size 0.4s ease-out;
}
.store-btn:hover { background-size: 100% 100%; }

.store-btn_soon{
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.store-btn_soon:hover { background-size: 0% 0%; }

/* ===================================================
   Instagram Section  (Figma: 122:58)
   - heading centered, left:854px (≈44.5% of 1920)
   - 3 square images 325×325px, gap:53px, centered
   - image 1: h:133.44% top:-12.17% (crop)
=================================================== */
.section-instagram {
  padding: clamp(48px, 6.25vw, 120px) 0 200px;
  background-color: var(--color-bg);
}

.instagram-inner {
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5.833vw, 112px);
  padding-left: clamp(24px, 9.948vw, 191px);
  padding-right: clamp(24px, 9.948vw, 191px);
}

/* 見出し */
.instagram-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.instagram-heading span {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.083vw, 40px);
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: 0.05em;
}

/* 3枚グリッド */
.instagram-grid {
  display: flex;
  gap: clamp(16px, 2.760vw, 53px);
  align-items: center;
  justify-content: center;
}

.instagram-item {
  flex: 0 0 clamp(100px, 16.927vw, 325px);
  height: clamp(100px, 16.927vw, 325px);
  overflow: hidden;
  position: relative;
}

.instagram-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  max-width: none;
  object-fit: cover;
}

/* クロップ値がインラインで指定された場合 */
.instagram-item img[style] {
  width: 100%;
}

/* ===================================================
   Footer  (Figma: 122:144)
   - bg: #3c3232, white text
   - access: map(675×382px) + info(292px), gap:94px, left:191px
   - logo: center, 66×70px, white bg
   - nav: centered, Yu Gothic 16px, gap:16px
   - copyright: centered, Yu Gothic 16px
=================================================== */
.site-footer {
  background-color: var(--color-dark);
  color: #ffffff;
  padding-top: clamp(40px, 5.677vw, 109px);
  padding-bottom: clamp(32px, 2.5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* アクセスエリア */
.footer-access {
  width: 100%;
  max-width: 1920px;
  padding-left: clamp(24px, 9.948vw, 191px);
  padding-right: clamp(24px, 9.948vw, 191px);
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.896vw, 94px);
  margin-bottom: clamp(40px, 7.552vw, 145px);
}

/* 地図 675×382px */
.footer-access-map {
  flex: 0 0 clamp(200px, 35.156vw, 675px);
  height: clamp(120px, 19.896vw, 382px);
  overflow: hidden;
  position: relative;
}

.footer-access-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 店舗情報 292px */
.footer-access-info {
  flex: 0 0 clamp(160px, 15.208vw, 292px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.833vw, 16px);
  font-family: var(--font-gothic-jp);
  color: #ffffff;
}

.footer-store-name {
  font-family: "Optima";
  font-size: clamp(18px, 1.667vw, 32px);
  line-height: 1.2;
  margin: 0;
}

.footer-address p,
.footer-tel,
.footer-payment,
.footer-parking {
  font-size: clamp(12px, 0.938vw, 18px);
  line-height: 1.6;
  margin: 0;
}

.footer-address {
  display: flex;
  flex-direction: column;
}

/* ロゴ */
.footer-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(24px, 3.333vw, 64px);
}

.footer-logo {
  width: 120px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.footer-logo img {
  width: 120px;
  height: 126px;
  object-fit: contain;
}

/* フッターナビ */
.footer-nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.833vw, 16px);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: clamp(16px, 2.5vw, 48px);
}

.footer-nav a {
  font-family: "Optima";
  font-size: clamp(11px, 0.833vw, 16px);
  color: #ffffff;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.footer-nav a:hover { opacity: 0.7; }

/* コピーライト */
.footer-copy {
  font-family: var(--font-gothic-jp);
  font-size: clamp(11px, 0.833vw, 16px);
  color: #ffffff;
  text-align: center;
  margin: 0;
}

/* ===================================================
   ハンバーガーボタン & モバイルナビ（共通）
=================================================== */
.header-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  flex-shrink: 0;
  z-index: 200;
}
.header-menu-btn span {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--color-dark);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.header-menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.header-menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-h));
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  z-index: 150;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-dark);
  letter-spacing: 0.15em;
  text-transform: capitalize;
  transition: opacity 0.2s;
}
.mobile-nav a:hover { opacity: 0.6; }
.mobile-nav-cta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-light);
  width: 240px;
  justify-content: center;
}
.mobile-nav-cta a {
  font-size: 14px !important;
  padding: 10px 28px;
  border: 1px solid var(--color-dark);
  letter-spacing: 0.05em;
}

/* ===================================================
   Tablet  768px – 1023px
=================================================== */
@media (max-width: 1023px) {
  .header-nav      { display: none; }
  .header-cta      { display: none; }
  .header-menu-btn { display: flex; grid-column: 3; grid-row: 1; }
  .header-logo     { grid-column: 2; }
  .site-header     { grid-template-columns: 44px 1fr 44px; padding: 0 20px; }

  /* MV: テキスト折り返し許可 */
  .mv-headline { white-space: normal; }
  .mv-subtext  { white-space: normal; font-size: 15px; }

  /* Flow: 2×2 */
  .flow-grid { flex-wrap: wrap; }
  .flow-col  { flex: 1 1 calc(50% - 20px); }

  /* Details sub: カード非表示 */
  .details-sub-card { display: none; }
  .details-sub-body { flex: 1; }

  /* Menu: 画像幅を少し詰める */
  .menu-img-wrap { flex: 0 0 clamp(160px, 22vw, 380px); }
}

/* ===================================================
   Mobile  ≤ 767px
=================================================== */
@media (max-width: 767px) {
  :root { --header-h: 60px; }

  /* ---- Header ---- */
  .site-header { grid-template-columns: 44px 1fr 44px; padding: 0 12px; }

  /* ---- MV ---- */
  .mv-inner {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: 0 24px 24px;
    gap: 28px;
  }
  .mv-content      { width: 100%; }
  .mv-logo-crop    { max-width: 200px; }
  .mv-headline     { font-size: 24px; white-space: normal; }
  .mv-subtext      { font-size: 13px; white-space: normal; line-height: 1.7; }

  /* 動画: 縦長表示（回転なし） */
  .mv-video-wrap {
    width: 60vw;
    height: 92vw;
    flex-shrink: 0;
    align-self: center;
    overflow: hidden;
  }
  .mv-video-rotate { /* 回転なし */ }
  .mv-video-frame  {
    width: 60vw;
    height: 92vw;
    border-radius: 20px;
    border: 1px solid var(--color-dark);
  }
  .mv-video-frame video {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
  }

  /* ---- CTA ---- */
  .cta-inner { padding: 0; }
  .cta-btn   { flex: 1; width: auto; height: 54px; font-size: 15px; }

  /* ---- Concept ---- */
  .concept-inner {
    flex-direction: column;
    padding-top: 52px;
  }
  .concept-image { width: 100%; height: 56vw; }
  .concept-text  { padding: 28px 24px; }

  /* ---- Trouble ---- */
  .trouble-inner {
    flex-direction: column;
    padding: 52px 24px;
    gap: 28px;
  }
  .trouble-text  { width: 100%; }
  .trouble-image {
    width: calc(100% + 48px);
    margin-left: -24px;
    height: 56vw;
  }

  /* ---- Details ---- */
  .section-details { padding-top: 48px; padding-bottom: 48px; }
  .details-inner {
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
    gap: 28px;
  }
  .details-img-left {
    flex: none;
    width: 100%;
    height: 56vw;
  }
  .details-img-left img { height: 100%; top: 0; }
  .details-text    { flex: none; }
  .details-img-right { display: none; }

  /* ---- Details Sub ---- */
  .section-details-sub { padding-bottom: 48px; }
  .details-sub-inner {
    flex-direction: column;
    gap: 28px;
    padding: 0 24px;
  }
  .details-sub-img-left {
    flex: none;
    width: calc(100% + 48px);
    margin-left: -24px;
    height: 64vw;
  }
  .details-sub-body { flex: none; }
  .details-sub-card { display: none; }

  /* ---- Features ---- */
  .section-features { height: auto; }
  .features-inner   { padding: 52px 0; }
  .features-grid    { flex-direction: column; padding: 0 24px; gap: 36px; }
  .feature-col      { width: 100%; }

  /* ---- Flow ---- */
  .flow-inner { padding-left: 16px; padding-right: 16px; }
  .flow-grid  { flex-wrap: wrap; gap: 12px; }
  .flow-col   { flex: 1 1 100%; min-width: 0; }

  /* ---- Space ---- */
  .space-inner {
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
    gap: 28px;
  }
  .space-text  { flex: none; width: 100%; }
  .space-image {
    flex: none;
    width: calc(100% + 48px);
    margin-left: -24px;
    height: 56vw;
  }
  .space-image img {
    position: static;
    width: 100%;
    height: 100%;
    top: auto;
    object-fit: cover;
  }

  /* ---- Menu ---- */
  .menu-inner { padding-left: 24px; padding-right: 24px; }
  .menu-row {
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 24px;
    justify-content: flex-start;
  }
  .menu-list { gap: 24px; }
  .menu-text   { flex: none; width: 100%; }
  .menu-img-wrap {
    flex: none;
    width: calc(100% + 48px);
    margin-left: -24px;
    height: 44vw;
    order: -1;
    margin-bottom: 16px;
  }
  /* SP は常に説明を展開 */
  .menu-expand { max-height: none; opacity: 1; overflow: visible; }
  .menu-more   { display: none; }
  /* 画像のインラインクロップ値を上書き */
  .menu-img-wrap img,
  .menu-img-wrap img[style] {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    object-fit: cover;
  }

  /* ---- Store ---- */
  .store-inner {
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
    gap: 28px;
  }
  .store-image {
    flex: none;
    width: calc(100% + 48px);
    margin-left: -24px;
    height: 56vw;
  }
  .store-image img {
    position: static;
    width: 100%;
    height: 100%;
    top: auto;
    object-fit: cover;
  }
  .store-text { flex: none; width: 100%; }

  /* ---- Instagram ---- */
  .instagram-grid { gap: 12px; flex-direction: column; align-items: center; }
  .instagram-item {
    flex: none;
    width: calc(100vw - 48px);
    height: calc(100vw - 48px);
  }

  /* ---- Footer ---- */
  .footer-access {
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
    gap: 24px;
  }
  .footer-access-map {
    flex: none;
    width: 100%;
    height: 56vw;
  }
  .footer-access-info { flex: none; width: 100%; }
}