@charset "UTF-8";
/* ============================================================
   style.css — Suralito Pilates Studio
   構成: 1.トークン → 2.リセット/ベース → 3.レイアウト
        → 4.コンポーネント → 4.5.Suralito固有 → 5.モーション → 6.停止ポリシー
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  /* 色: E案「セージグリーン×モス」(00_ブランド/visual.md) */
  --color-bg: #fbfaf7;          /* クリーンなオフホワイト(2026-07-16修正) */
  --color-ivory: #f5f1e8;       /* Ivory(小面積のアクセント面のみ) */
  --color-surface: #ffffff;     /* 面(カード・フォーム) */
  --color-text: #312a26;        /* Dark Brown */
  --color-muted: #6e7466;       /* Moss(補助テキスト) */
  --color-accent: #3e5641;      /* Deep Forest(ナビCTA・リンク・小面積の強調。白文字AAA・8:1超) 2026-07-16確定 */
  --color-accent-ink: #ffffff;
  --color-sage: #8e9a87;        /* Sage(装飾・淡い強調) */
  --color-accent-deep: #2d3e2f; /* Deep Forestの深色(ナビhover) */
  --color-cta: #4e6a54;         /* 大面積CTA用(ヒーロー大ボタン・CTAバンド背景・固定CTA)。#3E5641より明るく重さを回避。白文字約6:1 2026-07-16確定 */
  --color-line: #cfc7ba;        /* Greige */

  /* タイポ */
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* 型: 8px系 */
  --space: 8px;
  --section-pad: clamp(64px, 12vw, 140px);
  --container: 1120px;
  --container-narrow: 760px;
  --radius: 4px;   /* ボタンもカードも共通の控えめな丸み(2026-07-17: pill廃止で統一) */

  /* 階層 */
  --z-header: 100;
  --z-nav: 200;
  --z-modal: 1000;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.8s;
}

/* ---------- 2. リセット/ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;
  font-size: 17px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  overflow-x: clip;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
a:hover { opacity: 0.7; transition: opacity 0.3s; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* ---------- 3. レイアウト ---------- */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.container--narrow { width: min(var(--container-narrow), 100% - 48px); margin-inline: auto; }

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }
/* セクションの末尾が写真のときは、下の余白を0.6倍に詰める（2026-09-04 紗弓さん決定）
   文字で終わるときと同じ140pxだと、写真の下だけ空きすぎて見える。
   採用（写真→募集要項）と体験（写真→よくあるご質問）の2か所に同じルールを当てる。
   ここだけの一点直しにしないのは、ページごとにリズムがずれるのを避けるため。 */
.section--photo-end { padding-bottom: calc(var(--section-pad) * 0.6); }

.section-head { margin-bottom: calc(var(--space) * 7); }
.section-head__en {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--space) * 2);
}
.section-head__title { font-size: clamp(28px, 4.5vw, 44px); }

/* ---------- 4. コンポーネント ---------- */

/* ヘッダー */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px clamp(20px, 4vw, 48px);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(0.8);
  backdrop-filter: blur(12px) saturate(0.8);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-line) 72%, transparent);
  transition: background 0.4s, box-shadow 0.4s;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  box-shadow: 0 1px 0 var(--color-line), 0 8px 24px rgba(49, 42, 38, 0.05);
}
/* ホームのヒーロー上: 文字影(白グロー)は禁止(design-log参照)。方式=ガラス風。
   白い帯に見せず、ごく淡いティント＋強めのbackdrop-blurで下地のざわつきをぼかして文字を浮かせる。
   下端はmaskでフェード。実測: ヒーロー上帯は平均176-196と明るいが右上に最小90の暗部あり→blurで平準化して可読性を担保 */
.p-home .site-header:not(.is-scrolled) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.p-home .site-header:not(.is-scrolled) > * { position: relative; z-index: 1; } /* ロゴ・ナビは常にガラスの前面 */
.p-home .site-header:not(.is-scrolled)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(251, 250, 247, 0.42) 0%,
    rgba(251, 250, 247, 0.34) 30%,
    rgba(251, 250, 247, 0.22) 55%,
    rgba(251, 250, 247, 0.10) 78%,
    rgba(251, 250, 247, 0) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(0.92);
  backdrop-filter: blur(10px) saturate(0.92);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.site-header__logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.site-header__logo img { height: 44px; width: auto; display: block; }

.global-nav ul { display: flex; gap: calc(var(--space) * 2); list-style: none; padding: 0; }
.global-nav a { text-decoration: none; font-size: 14px; letter-spacing: 0.08em; font-weight: 500; color: var(--color-text); }
.global-nav__logo, .global-nav__sns { display: none; } /* SPメニューでのみ表示。PCの横並びナビでは隠す */
.global-nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom: 0;   /* 2026-08-30: hover下線(::after bottom:-6px)と高さを揃えるため疑似要素方式に統一 */
}
.global-nav ul a[aria-current="page"]:not(.nav-cta):not(.global-nav__sns > a)::after { transform: scaleX(1); background: currentColor; }

/* ハンバーガー(SP) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  position: absolute; left: 10px; top: calc(50% - 0.5px);
  display: block; width: 24px; height: 1px; margin: 0;
  background: var(--color-text);
  transition: transform 0.3s var(--ease-out);
}
.nav-toggle span:nth-child(1) { transform: translateY(-4px); }
.nav-toggle span:nth-child(2) { transform: translateY(4px); }
.nav-toggle span:nth-child(3) { display: none; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

/* タブレット・中間サイズ(〜1199px)ではハンバーガーに切替。9項目の横並びナビは
   ロゴ＋余白込みで約1200px必要なため、それ未満は折り返して崩れる(2026-07-22修正) */
@media (max-width: 1199px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    /* すりガラス: 生成りベースを 72% の不透明度にして背後をほどよく透かしつつ、
       強めのブラーで文字の可読性を確保(2026-07-22: 透け感を活かす方向に調整) */
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(1.1);
    backdrop-filter: blur(28px) saturate(1.1);
    /* 項目が画面より多いときにメニュー内をスクロールできるように */
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; /* ロゴ(上)・項目(中)・SNS(下)を縦に配置 */
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
  }
  /* backdrop-filter非対応環境は完全不透明にフォールバック */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .global-nav { background: var(--color-bg); }
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  /* 【重要】ヘッダーの backdrop-filter は position:fixed の含有ブロックを作り、メニュー(fixed)を
     ヘッダー内に閉じ込めてしまう(＝上部に小さなスクロール枠が出る不具合)。メニューを開いている間だけ
     ヘッダーのぼかしを無効化し、メニューをビューポート基準の全画面オーバーレイに戻す(2026-07-22修正) */
  body.is-nav-open { overflow: hidden; }
  body.is-nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.is-nav-open .sp-fixed-cta { display: none; } /* メニュー中は下部固定CTAを隠す(かぶり防止)(2026-07-22) */
  /* SPメニュー: ロゴ(上)＋項目(中・詰めて区切り線)＋SNS(下)(2026-07-22) */
  .global-nav__logo { display: block; flex: none; margin: 32px auto 0; }
  .global-nav__logo img { height: 26px; width: auto; }
  .global-nav ul {
    flex: 1 0 auto; box-sizing: border-box;
    flex-direction: column; justify-content: center;
    text-align: center; gap: 0;
    padding: 6px 40px;
  }
  .global-nav li:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--color-sage) 34%, transparent); }
  .global-nav a { display: block; padding: calc(var(--space) * 0.875) 0; font-size: 18px; font-family: var(--font-display); letter-spacing: 0.08em; }
  .global-nav a[aria-current="page"] { border-bottom: 0; }
  .global-nav .nav-cta { display: inline-block; padding: 11px 30px; margin-top: calc(var(--space) * 2); font-family: var(--font-body); font-size: 15px; }
  .global-nav__sns { display: block; flex: none; margin: calc(var(--space) * 0.5) auto 16px; }
  .global-nav__sns a { display: inline-flex; padding: 8px; color: var(--color-accent); }
  .global-nav__sns a:hover { opacity: 0.65; }
  /* ホーム透過ヘッダーの z-index:1 上書きを打ち消し、SPメニューを全画面オーバーレイに固定(2026-07-22) */
  .p-home .site-header:not(.is-scrolled) .global-nav { position: fixed; z-index: var(--z-nav); }
  .p-home .site-header:not(.is-scrolled) .nav-toggle { z-index: calc(var(--z-nav) + 1); }
}

/* ヒーロー(即答型: 写真+左寄せコピー+CTA) */
.hero {
  position: relative;
  /* mainは全幅なので単純に幅100%でよい。旧実装の over-width(100vw+96)+translateX は、
     内側 .container の 100% が「はみ出したヒーロー」基準になり、SP/タブレットでヒーローが
     左にずれ画面外へはみ出す不具合の原因だったため廃止(2026-07-22修正) */
  width: 100%;
  max-width: none;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--section-pad) * 0.8) 0 calc(var(--space) * 10);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--color-bg);
}
.hero__media img {
  width: 100%; height: 100%;
  min-width: 100%; min-height: 100%; max-width: none;
  object-fit: cover;
  object-position: center center;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(251, 250, 247, 0.96) 0%,
    rgba(251, 250, 247, 0.88) 38%,
    rgba(251, 250, 247, 0.30) 72%,
    rgba(251, 250, 247, 0.05) 100%);
}
.hero__inner { width: min(var(--container), 100% - 48px); }
.hero__open {
  display: inline-block;
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--color-accent);
  border: 1px solid var(--color-sage);
  padding: 8px 20px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: calc(var(--space) * 4);
}
.hero__title {
  font-size: clamp(38px, 7vw, 84px);
  line-height: 1.3;
}
.hero__lead { margin-top: calc(var(--space) * 4); max-width: 32em; color: var(--color-text); }
.hero__cta { margin-top: calc(var(--space) * 6); }
.hero__cta-note { margin-top: calc(var(--space) * 2); font-size: 13px; color: var(--color-muted); }

/* 下層ページヘッダー */
.page-header { padding: calc(var(--section-pad) * 1.2) 0 calc(var(--section-pad) * 0.5); }
.page-header__en {
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-accent);
}
.page-header__title { font-size: clamp(32px, 5vw, 56px); margin-top: calc(var(--space) * 1); }

.breadcrumb { padding-block: calc(var(--space) * 2); font-size: 12px; color: var(--color-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.6em; }
.breadcrumb a { text-decoration: none; }

/* ボタン(主役CTA: 上品なピル型+浮遊感) */
.button {
  display: inline-block;
  padding: 19px 56px;
  background: var(--color-cta); color: var(--color-accent-ink);
  border: 1px solid var(--color-cta); border-radius: var(--radius);
  font-size: 16px; font-weight: 500; letter-spacing: 0.1em; text-decoration: none;
  box-shadow: 0 4px 14px rgba(49, 42, 38, 0.12);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.button::after { content: "→"; margin-left: 0.8em; font-weight: 400; display: inline-block; transition: transform 0.3s var(--ease-out); }
.button:hover {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-accent-ink); opacity: 1;
  box-shadow: 0 6px 18px rgba(49, 42, 38, 0.18);
}
.button:hover::after { transform: translateX(4px); }
.button:disabled { opacity: 0.5; cursor: wait; transform: none; }

/* フォーム */
.form { display: grid; gap: calc(var(--space) * 4); }
.form__field { display: grid; gap: calc(var(--space) * 1); }
.form__field label { font-size: 14px; font-weight: 600; }
.form__field .required { color: var(--color-accent); font-size: 12px; margin-left: 0.5em; }
.form input, .form textarea {
  font: inherit; padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
}
.form input:focus, .form textarea:focus { border-color: var(--color-accent); outline: none; }
.form [aria-invalid="true"] { border-color: #c0392b; }
.form__error { color: #c0392b; font-size: 13px; min-height: 1.2em; }
.form__hp { position: absolute; left: -9999px; }  /* ハニーポット: 削除禁止 */

/* フッター */
.site-footer {
  padding: calc(var(--space) * 8) 0 calc(var(--space) * 4);
  border-top: 1px solid var(--color-line);
  font-size: 13px; color: var(--color-muted);
}

/* ---------- 4.4 リッチ化第2弾(2026-08-30): モーション・タイポ・カード・フッター・下層ヘッダー ---------- */

/* ケンバーンズは2026-08-30試作→同日却下(紗弓さん)。復活させないこと */

/* 見出しの字間を実測ベンチマーク(上質ブランドは字間を開ける)に寄せる */
.section-head__title { letter-spacing: 0.06em; }
.page-header__title { letter-spacing: 0.08em; }

/* 料金カードの脱・均等テンプレ: 月4回(featured)を主役に */
.plans { grid-template-columns: 1fr 1.14fr 1fr; align-items: center; }
.plan--featured {
  background: var(--color-surface);
  border-color: var(--color-sage);
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(49, 42, 38, 0.10);
  padding-block: calc(var(--space) * 5);
}
.plan--featured .plan__price { font-size: 40px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } .plan--featured { transform: none; } }

/* フッターの格上げ: 余白で締める */
.site-footer { padding-top: calc(var(--space) * 12); }
.site-footer__grid { row-gap: calc(var(--space) * 6); }

/* 下層ページヘッダー: 大型英字ウォーターマーク(data-en属性から描画) */
.page-header { position: relative; overflow: visible; }
.page-header__en, .page-header__title { position: relative; z-index: 1; }
.page-header::before {
  content: attr(data-en);
  position: absolute; right: 0; top: 50%; transform: translateY(-46%);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(90px, 13vw, 170px); line-height: 1;
  letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-ivory) 72%, var(--color-sage) 28%);
  opacity: 0.34; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
}
@media (max-width: 720px) { .page-header::before { display: none; } }

/* ナビのhover下線(すっと引かれる) */
.global-nav ul a:not(.nav-cta):not(.global-nav__sns > a) { position: relative; }
.global-nav ul a:not(.nav-cta):not(.global-nav__sns > a)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.35s var(--ease-out);
}
.global-nav ul a:not(.nav-cta):hover { opacity: 1; }
.global-nav ul a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left center; }

/* モバイルの現在地表示は、項目の区切り線そのものを色付けする。 */
@media (max-width: 1199px) {
  .global-nav ul a:not(.nav-cta):not(.global-nav__sns > a)::after { display: none; }
  .global-nav li:has(> a[aria-current="page"]):not(:last-child) { border-bottom-color: var(--color-accent); }
}

/* 料金フリップカード(カタログsec-pricing-13移植・Suralito配色/2026-08-30) */
.plans13 { display: flex; gap: 28px; justify-content: center; align-items: stretch; }
.p13-card { flex: 1; max-width: 350px; height: 400px; position: relative; }
.p13-card.js-reveal { opacity: 1 !important; transform: none !important; } /* フリップで登場するためフェードは無効化 */
.p13-inner { position: absolute; inset: 0; }
/* 2026-08-30: 3Dフリップは「うざい」と却下。表面が静かに引いて価格面が浮かぶ方式へ */
.p13-front { opacity: 1; transition: opacity 0.9s var(--ease-out); }
.p13-back { opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.p13-card.is-inview .p13-front { opacity: 0; }
.p13-card.is-inview .p13-back { opacity: 1; transform: translateY(0); }
.p13-card:nth-child(2) .p13-front, .p13-card:nth-child(2) .p13-back { transition-delay: 0.14s; }
.p13-card:nth-child(3) .p13-front, .p13-card:nth-child(3) .p13-back { transition-delay: 0.28s; }
html.is-motion-off .p13-front { opacity: 0; }
html.is-motion-off .p13-back { opacity: 1; transform: none; }
.p13-face { position: absolute; inset: 0; border-radius: calc(var(--radius) * 2); padding: 32px 30px; display: flex; flex-direction: column; }
.p13-front { color: #fff; justify-content: space-between; box-shadow: 0 10px 24px -18px rgba(49, 42, 38, 0.25); }
.p13-c1 .p13-front { background: var(--color-sage); }
.p13-c2 .p13-front { background: var(--color-accent); }
.p13-c3 .p13-front { background: var(--color-muted); }
.p13-no { font-size: 12px; letter-spacing: 0.3em; opacity: 0.75; }
.p13-front b { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: 0.08em; display: block; }
.p13-tag { font-size: 15px; opacity: 0.9; margin-top: 10px; display: block; letter-spacing: 0.04em; }
.p13-turn { font-size: 12px; opacity: 0.75; letter-spacing: 0.24em; }   /* 2026-09-07: 11px/0.6は小さく薄すぎた。同カードの .p13-no と同じ 12px/0.75 に揃えた */
.p13-back { background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: 0 8px 20px -16px rgba(49, 42, 38, 0.14); }
.p13-c2 .p13-back { border-color: var(--color-sage); }
.p13-back .p13-no { color: var(--color-sage); }
.p13-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin-top: 8px; }
.p13-price { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.1; margin: 14px 0 4px; white-space: nowrap; }
.p13-price span { font-size: 14px; font-family: var(--font-body); font-weight: 400; color: var(--color-muted); margin-left: 4px; }
.p13-back ul { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--color-line); flex: 1; }
.p13-back li { font-size: 14px; padding: 6px 0 6px 20px; position: relative; }
.p13-back li::before { content: ""; position: absolute; left: 2px; top: 1em; width: 10px; height: 1.5px; background: var(--color-sage); }
.p13-note { font-size: 12.5px; color: var(--color-muted); margin: 0; letter-spacing: 0.04em; }
.p13-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: #fff; font-size: 12px; letter-spacing: 0.08em; padding: 5px 16px; border-radius: var(--radius); z-index: 2; white-space: nowrap; }
@media (max-width: 860px) {
  .plans13 { flex-direction: column; align-items: center; }
  .p13-card { width: min(400px, 100%); flex: none; height: 380px; }
}

.brand-name { font-weight: 500; color: var(--color-accent); }

/* テキスト装飾(2026-08-30): リード文と要所マーカー */
.lead { font-size: 18px; line-height: 2.1; letter-spacing: 0.03em; }
/* 2026-08-30: 太字+マーカーはWordPress臭いと却下 → 日本語組版の圏点(傍点)に */
main p.lead strong, .empathy strong {
  font-weight: inherit;
  -webkit-text-emphasis: dot var(--color-sage);
  text-emphasis: dot var(--color-sage);
  -webkit-text-emphasis-position: over;
  text-emphasis-position: over;
}

/* ブログカード写真のトーン統一(フィルム調に半歩) */
.posts img { filter: saturate(0.88) contrast(0.97); border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce) {
  .photo-band.is-inview img, .hero__media img { animation: none; }
}

/* ---------- 4.5 Suralito固有コンポーネント ---------- */

/* シグネチャー: すっと伸びる縦ライン(reveal時にscaleYで伸びる) */
.sutto-line {
  display: block; width: 1px; height: 56px;
  background: var(--color-sage);
  margin-bottom: calc(var(--space) * 3);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s var(--ease-out) 0.15s;
}
.js-reveal.is-inview .sutto-line, .is-inview .sutto-line { transform: scaleY(1); }
.section-head .sutto-line { margin-left: 2px; }

/* ヘッダー */
.nav-cta {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 9px 20px; border-radius: var(--radius);
  color: var(--color-accent-ink) !important;
  box-shadow: 0 4px 14px rgba(110, 116, 102, 0.28);
}
.nav-cta:hover { background: var(--color-accent-deep); opacity: 1; }
.global-nav a.nav-cta[aria-current="page"] { border-bottom: 1px solid var(--color-accent); }

/* 共感リスト */
.empathy { list-style: none; padding: 0; }
.empathy li { /* マーカー無し: 温かい文字色＋項目間の細い区切り線 */
  padding: calc(var(--space) * 2) 0;
  color: color-mix(in srgb, var(--color-text) 62%, var(--color-line));
  letter-spacing: 0.02em;
  border-bottom: 1px solid color-mix(in srgb, var(--color-line) 42%, var(--color-bg));
}
.empathy li:last-child { border-bottom: none; }
p + .empathy { margin-top: calc(var(--space) * 4); } /* 段落の直後にリストが続く場合は間隔を空ける(lessonページ等) */
.empathy__close { margin-top: calc(var(--space) * 5); color: var(--color-muted); }

/* 面の切替 */
.section--surface { background: var(--color-surface); }

/* 選ぶ理由 */
.reasons { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.reasons__media { position: relative; }
.reasons__media img { border-radius: var(--radius); }
.float-card {
  position: absolute; right: -16px; bottom: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(49, 42, 38, 0.10);
  padding: 18px 22px; max-width: 220px;
}
.float-card__num { font-family: var(--font-display); font-size: 36px; line-height: 1; display: block; color: var(--color-accent); }
.float-card__num small { font-size: 15px; margin-left: 2px; }
.float-card__label { font-size: 12px; color: var(--color-muted); display: block; margin-top: 6px; line-height: 1.6; }
.reason { margin-top: calc(var(--space) * 4); }
.reason + .reason { /* マーカー無し: 項目間の細い区切り線 */
  border-top: 1px solid color-mix(in srgb, var(--color-line) 42%, var(--color-bg));
  padding-top: calc(var(--space) * 4);
}
.reason dt {
  font-family: var(--font-display); font-size: 20px;
}
.reason dd { margin: calc(var(--space) * 1) 0 0; color: var(--color-muted); }

/* コンセプト「Suralitoという名前」の4項目(2026-07-22: 「—」区切りのリストを2×2の項目デザインに) */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 6) calc(var(--space) * 7); margin-top: calc(var(--space) * 7); }
/* 2026-08-30: ちびSマークの区切りは「微妙」→ 日本語の右に英字を添え、下に細線(案J)へ変更 */
.pillar__term {
  font-family: var(--font-display); font-size: 25px;
  padding-bottom: calc(var(--space) * 2);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--color-line);
}
.pillar__en {
  font-family: var(--font-body); font-size: 12px;   /* 2026-09-07: 11px→12px */
  letter-spacing: 0.24em; color: var(--color-sage);
}
.pillar__desc { margin-top: calc(var(--space) * 2); font-size: 14px; color: var(--color-muted); line-height: 1.9; }

/* アクセスの地図(2026-07-22) */
.map { margin-top: calc(var(--space) * 4); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.map iframe { display: block; width: 100%; height: 380px; border: 0; }
.map-note { margin-top: calc(var(--space) * 2); font-size: 13px; }

/* FAQ: Q&A装飾（p-faqページのみ。他ページの.reasonには影響させない） */
.p-faq .reason {
  background: color-mix(in srgb, var(--color-ivory) 45%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-line) 50%, var(--color-bg));
  border-radius: var(--radius);
  padding: calc(var(--space) * 3) calc(var(--space) * 4);
  margin-top: calc(var(--space) * 2.5);
  box-shadow: 0 4px 16px rgba(49, 42, 38, 0.03);
}
.p-faq .reason + .reason { border-top: 1px solid color-mix(in srgb, var(--color-line) 50%, var(--color-bg)); padding-top: calc(var(--space) * 3); }
.p-faq .reason dt,
.p-faq .reason dd { display: flex; align-items: flex-start; gap: calc(var(--space) * 2); }
/* dd は flex コンテナなので、中に <a> を置くと行から切り離されて縦積みになる。
   本文を1つのブロックに閉じ込めて、テキストの流れを保つ（2026-09-01 修正） */
.p-faq .reason dd { margin-top: calc(var(--space) * 2); }
.p-faq .reason dd > .reason__body { flex: 1 1 auto; min-width: 0; }
.p-faq .reason dt::before,
.p-faq .reason dd::before {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display); font-size: 16px; line-height: 1;
  margin-top: 3px;
}
.p-faq .reason dt::before { content: "Q"; background: var(--color-accent); color: var(--color-accent-ink); }
.p-faq .reason dd::before { content: "A"; background: color-mix(in srgb, var(--color-sage) 24%, #fff); color: var(--color-accent); }

/* CTAバンド */
.cta-band {
  background: var(--color-cta); color: var(--color-accent-ink);
  padding-block: calc(var(--section-pad) * 0.55);
  text-align: center;
}
.cta-band__copy { font-family: var(--font-display); font-size: clamp(22px, 3.2vw, 32px); margin-bottom: calc(var(--space) * 4); }
.cta-band .button { background: var(--color-surface); color: var(--color-text); border-color: var(--color-surface); box-shadow: 0 6px 18px rgba(35, 30, 26, 0.20); }
.cta-band .button:hover { background: var(--color-ivory); color: var(--color-text); border-color: var(--color-ivory); }
.cta-band__note { margin-top: calc(var(--space) * 2); font-size: 13px; opacity: 0.85; }
.cta-band .text-link { color: inherit; text-decoration: underline; }
.cta-band--last { background: var(--color-text); }
.cta-band__open { font-size: 13px; letter-spacing: 0.22em; margin-bottom: calc(var(--space) * 3); opacity: 0.8; }

/* 料金プラン */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * 3); align-items: stretch; }
.plan {
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: calc(var(--space) * 5) calc(var(--space) * 4);
  text-align: center; position: relative;
}
.plan--featured { border: 1px solid var(--color-accent); }
.plan__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: 12px; letter-spacing: 0.08em;
  padding: 4px 16px; border-radius: var(--radius); white-space: nowrap;
}
.plan__name { font-size: 18px; }
.plan__price { font-family: var(--font-display); font-size: 34px; margin-top: calc(var(--space) * 2); }
.plan__price span { font-size: 13px; font-family: var(--font-body); color: var(--color-muted); margin-left: 4px; }
.plan__note { font-size: 13px; color: var(--color-muted); margin-top: calc(var(--space) * 2); }
.plans__more { margin-top: calc(var(--space) * 5); text-align: center; }
.plans__more a, .text-link { color: var(--color-accent); text-underline-offset: 4px; }

/* 回数券ハイライト(2026-07-22: 初回体験と揃えてカード化。narrow幅・中央寄せのアイボリーカード) */
.ticket {
  max-width: var(--container-narrow);
  margin: calc(var(--space) * 5) auto 0;
  background: var(--color-ivory);
  border: 1px solid var(--color-sage);
  border-radius: var(--radius);
  padding: calc(var(--space) * 4) calc(var(--space) * 5);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: calc(var(--space) * 1) calc(var(--space) * 3);
}
.ticket__tag {
  display: inline-block; font-size: 12px; letter-spacing: 0.08em;
  color: var(--color-accent-ink); background: var(--color-accent);
  padding: 4px 14px; border-radius: var(--radius);
}
.ticket__name { font-size: 20px; }
.ticket__price { font-family: var(--font-display); font-size: 32px; color: var(--color-accent); margin-left: auto; }
.ticket__price span { font-size: 13px; font-family: var(--font-body); color: var(--color-muted); margin-left: 4px; }
.ticket__note { flex-basis: 100%; font-size: 13px; color: var(--color-muted); line-height: 1.8; margin-top: calc(var(--space) * 0.5); }
/* 写真帯・ページ内写真(2026-08-27 写真密度アップ / 2026-08-30 全幅ぶった切り→コンテナ幅+角丸に統一) */
.photo-band { overflow: hidden; }   /* 2026-08-30: 角丸コンテナ幅を試作→「帯の意味がない」で全幅に戻した */
.photo-band img { width: 100%; height: clamp(240px, 34vw, 440px); object-fit: cover; display: block; }
/* 2026-08-31: 帯は超横長のため人物の全身は入らない。被写体に応じて表示位置を個別指定する */
.photo-band img.pos-top { object-position: center top; }
.empathy-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: calc(var(--space) * 8); align-items: center; }
.empathy-grid__media img, .media-split__media img, .page-photo img { border-radius: var(--radius); }
.media-split { display: grid; grid-template-columns: 1fr 0.8fr; gap: calc(var(--space) * 8); align-items: center; }
.page-photo { margin-top: calc(var(--space) * 6); }
/* 当日の流れ: 右列に写真を縦2枚（2026-09-04 紗弓さん指示）。
   4ステップにして本文が伸びた分、写真1枚では右列が寂しかった。
   写真は元の比率のまま並べる（--stretch の失敗を繰り返さない）。 */
/* 見出しをグリッドの外に出し、写真は「ステップ一覧」に対して上下中央に置く（2026-09-04）。
   見出しごと中央そろえにすると、見出しの高さ分だけ写真が上に寄って下だけ余白が残った。 */
.media-split--photostack { margin-top: calc(var(--space) * 7); }
.media-split__media--stack { display: grid; align-content: center; gap: calc(var(--space) * 4.5); }
.media-split__media--stack img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) {
  .empathy-grid, .media-split { grid-template-columns: 1fr; }
}

/* 入会金: 月謝カードの下にテキストで記載(2026-07-22) */
.plans-note { margin-top: calc(var(--space) * 5); text-align: center; font-size: 15px; color: var(--color-muted); }
.plans-note strong { color: var(--color-accent); font-weight: 500; }
.plans-note__was { text-decoration: line-through; }

/* 回数券＋都度を1枚のアイボリーカードにまとめる(2026-07-22) */
.options {
  max-width: var(--container-narrow);
  margin: calc(var(--space) * 5) auto 0;
  background: var(--color-ivory);
  border: 1px solid var(--color-sage);
  border-radius: var(--radius);
  padding: 0 calc(var(--space) * 5);
}
.option {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: calc(var(--space) * 1) calc(var(--space) * 3);
  padding: calc(var(--space) * 4) 0;
}
.option + .option { border-top: 1px solid color-mix(in srgb, var(--color-sage) 45%, transparent); }
.option__name { font-size: 20px; }
.option__price { font-family: var(--font-display); font-size: 28px; color: var(--color-accent); margin-left: auto; }
.option__price span { font-size: 13px; font-family: var(--font-body); color: var(--color-muted); margin-left: 4px; }
.option__note { flex-basis: 100%; font-size: 13px; color: var(--color-muted); line-height: 1.8; margin-top: calc(var(--space) * 0.5); }
.option--sub .option__name { color: var(--color-muted); }
.option--sub .option__price { font-size: 22px; color: var(--color-text); }

/* 初回体験 オープン記念オファー(2026-07-22: 料金の最上部で初回体験を最も目立たせる導線) */
.offer {
  max-width: var(--container-narrow);
  margin: 0 auto calc(var(--space) * 6);
  background: color-mix(in srgb, var(--color-cta) 8%, var(--color-surface));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: calc(var(--space) * 4) calc(var(--space) * 6);
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: calc(var(--space) * 4);
  box-shadow: 0 8px 22px rgba(62, 86, 65, 0.10);
}
.offer__tag {
  display: inline-block; font-size: 12px; letter-spacing: 0.12em;
  color: var(--color-accent-ink); background: var(--color-accent);
  padding: 5px 16px; border-radius: var(--radius);
  margin-bottom: calc(var(--space) * 2);
}
.offer__name { font-size: 20px; }
.offer__price { font-family: var(--font-display); font-size: 40px; color: var(--color-accent); line-height: 1.2; margin-top: calc(var(--space) * 1); }
.offer__was { font-family: var(--font-body); font-size: 15px; color: var(--color-muted); text-decoration: line-through; margin-right: 10px; vertical-align: middle; }
.offer__unit { font-family: var(--font-body); font-size: 14px; color: var(--color-muted); margin-left: 4px; }
.offer__cta { white-space: nowrap; }

/* 淡サージュ面(offer/ticket)上の補助テキストはコントラストAA(4.5)確保のため一段濃く。白背景の他の補助テキストは既定(--color-muted)のまま */
.offer__was, .offer__unit,
.ticket__note, .ticket__price span { color: color-mix(in srgb, var(--color-muted) 80%, var(--color-text)); }

/* スタジオ紹介 */
.studio-intro { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.studio-intro__media img { border-radius: var(--radius); }
.studio-intro__links { margin-top: calc(var(--space) * 4); display: grid; gap: calc(var(--space) * 2); }

/* ===== あしらい(2026-07-17): Quiet Lift のS字 ===== */
/* 見出し前の直線(.sutto-line)は非表示。S字マークも不採用=見出しは装飾なしに(2026-07-17) */
.section-head .sutto-line { display: none; }
/* セクション透かしS字: 2026-08-30 幕2(共感)は左端で千切れて微妙→コンセプト「Suralitoという名前」へ移設。
   名前の由来を語る節=S字が意味を持つ場所。右側の余白に全身を収める(千切れ防止のため右端から離す) */
.p-ash-watermark { position: relative; overflow: hidden; }
.p-ash-watermark > * { position: relative; z-index: 1; }
.p-ash-watermark::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: clamp(24px, 9vw, 190px); transform: translateY(-50%);
  height: clamp(280px, 33vw, 420px); aspect-ratio: 302 / 916;
  background: url("../img/ornament/heading-mark.png") center / contain no-repeat;
  opacity: 0.13;
}
@media (max-width: 900px) { .p-ash-watermark::before { display: none; } }

/* ブログカード */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * 4); }
.post { text-decoration: none; display: block; }
.post img { border-radius: var(--radius); aspect-ratio: 8 / 5; object-fit: cover; }
.post__date { font-size: 12px; letter-spacing: 0.12em; color: var(--color-muted); margin-top: calc(var(--space) * 2); }
.post__title { font-size: 16px; line-height: 1.7; margin-top: calc(var(--space) * 1); }
.post:hover img { opacity: 0.85; transition: opacity 0.3s; }

/* フッター */
.site-footer__grid {
  display: grid; grid-template-columns: 1fr auto; gap: calc(var(--space) * 6);
  padding-bottom: calc(var(--space) * 5);
}
.site-footer__logo { line-height: 0; margin-bottom: calc(var(--space) * 3); }
.site-footer__logo img { height: 46px; width: auto; display: block; }
.site-footer__nav { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: calc(var(--space) * 1.5) calc(var(--space) * 5); }
.site-footer__nav a { text-decoration: none; }

/* SP固定CTA */
.sp-fixed-cta {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--z-header);
  background: var(--color-cta); color: var(--color-accent-ink);
  text-align: center; text-decoration: none;
  padding: 15px 16px; border-radius: var(--radius);
  font-size: 15px; letter-spacing: 0.06em;
  box-shadow: 0 8px 24px rgba(49, 42, 38, 0.24);
}
.sp-only { display: none; }

/* レスポンシブ */
@media (max-width: 1023px) {
  .reasons, .studio-intro { grid-template-columns: 1fr; }
  .float-card { right: 12px; bottom: -20px; }
  .studio-intro__media { order: -1; }
}
@media (max-width: 767px) {
  /* スマホ本文の字間・行間を調整。見出しや専用スタイルは維持。 */
  :where(main p, main li, main dd, main td) { letter-spacing: 0; line-height: 1.8; }
  .plans { grid-template-columns: 1fr; gap: calc(var(--space) * 4); }
  .pillars { grid-template-columns: 1fr; gap: calc(var(--space) * 5); }
  .map iframe { height: 300px; }
  .ticket__price, .option__price { margin-left: 0; flex-basis: 100%; }
  .offer { grid-template-columns: 1fr; text-align: center; gap: calc(var(--space) * 3); padding: calc(var(--space) * 5); }
  .offer__was { display: block; margin: 0 0 calc(var(--space) * 0.5); }
  .offer__cta { width: 100%; padding-inline: calc(var(--space) * 2); white-space: normal; }
  .posts { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  /* 下部固定CTA: 最初は隠し、少しスクロールしてから表示(ヒーローのボタンとの二重を回避)(2026-07-22) */
  .sp-fixed-cta { display: block; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s; }
  .sp-fixed-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
  .sp-only { display: inline; }
  .site-footer { padding-bottom: calc(var(--space) * 12); } /* 固定CTAと重なり防止 */
  .site-header__logo img { height: 30px; } /* SPはハンバーガーと並ぶため控えめに(横長ロゴ) */
  .site-footer__logo img { height: 30px; }
  /* SPヒーロー: ヘッダー＋透過ヘッダーのガラス(上部)に隠れて「グランドオープン」バナーが
     掻き消えないよう、ガラスを低くし上余白を確保。画像は veil を強め＆均一にして中途半端さを軽減(2026-07-22) */
  .hero { align-items: flex-start; padding-top: 104px; }
  .p-home .site-header:not(.is-scrolled)::before { height: 78px; }
  .hero__open { background: rgba(255, 255, 255, 0.85); }
  .hero__media img { object-position: 60% 35%; }
  .hero__media::after {
    background: linear-gradient(180deg,
      rgba(251, 250, 247, 0.90) 0%,
      rgba(251, 250, 247, 0.80) 50%,
      rgba(251, 250, 247, 0.72) 100%);
  }
}

/* ---------- 5. モーション基盤 ---------- */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.js-reveal.is-inview { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }

/* ---------- 6. モーション停止(削除禁止) ---------- */
.motion-stop {
  display: none;
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-modal);
  padding: 10px 16px; font-size: 12px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius); cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .motion-stop { display: block; }
}
html.is-motion-off .js-reveal,
html.is-motion-off *[class] {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal { opacity: 1; transform: none; }



/* ---------- 7. ブログ記事本文の組み(2026-09-01) ----------
   紗弓さん選定: 見出し=装飾なし(A案) / 強調=中太+グレージュのマーカー(D-4案)
   / 引用=淡いアイボリー面(引-1案)。比較ページは 10_HP/_公開しない/_deco.html に退避（2026-09-07。site/ に置くと公開されるため）。
   外すときはこのブロックごと削除できる。 */
.p-blog article h2 {
  font-size: clamp(19px, 2.4vw, 23px);
  margin-top: calc(var(--space) * 7);
  margin-bottom: calc(var(--space) * 3);
}
.p-blog article h2:first-child { margin-top: calc(var(--space) * 3); }

.p-blog article strong {
  font-weight: 500;
  background: linear-gradient(transparent 72%, rgba(206, 199, 186, 0.75) 72%);
}

.p-blog article blockquote {
  margin: calc(var(--space) * 4) 0;
  padding: calc(var(--space) * 3) calc(var(--space) * 4);
  background: #F5F1E8;
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 2;
}
.p-blog article blockquote p { margin: 0; }
.p-blog article blockquote p + p { margin-top: calc(var(--space) * 2); }

.p-blog article figure { margin: calc(var(--space) * 5) 0; }
.p-blog article figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.p-blog article figcaption {
  margin-top: 10px; font-size: 0.82rem; color: var(--color-muted); line-height: 1.7;
}

/* ---------- 8. 記事下の関連記事(2026-09-02 紗弓さん選定・B案) ----------
   「あわせて読みたい」で3枚を横並び。一覧ページと同じ組み方。
   前後記事(A案)は不採用: 4本に読む順番がなく、日付順だと無関係な記事が「次」に出るため。 */
.related { border-top: 1px solid var(--color-line); margin-top: calc(var(--space) * 8); padding-top: calc(var(--space) * 5); }
.related__head { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.06em; margin-bottom: calc(var(--space) * 3); }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related__grid a { display: block; text-decoration: none; color: inherit; }
.related__grid img { width: 100%; aspect-ratio: 8/5; object-fit: cover; border-radius: var(--radius); filter: saturate(0.88) contrast(0.97); display: block; }
.related__grid h3 { font-family: var(--font-body); font-weight: 500; font-size: 13.5px; line-height: 1.7; margin-top: 10px; }
.related__grid .date { font-size: 12px; letter-spacing: 0.1em; color: var(--color-muted); margin-top: 6px; }   /* 2026-09-07: 11px→12px */
.related__grid a:hover h3 { color: var(--color-accent); }
@media (max-width: 640px) { .related__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- 9. ブログ題字の折り返しと入れ物(2026-09-02) ----------
   問題: 手動の<br>が画面幅と無関係に効き、スマホで語の途中で折れる・画面外に飛び出す。
   さらに下層ページ用の題字設定(56px・字間0.08em)がブログにも効いて窮屈だった。
   対策: <br>を全廃し、CSSで文節ごとに折り返す。ブログの題字だけ幅を広げ字間を詰める。
   ・word-break:auto-phrase = 文節の切れ目で改行(Chrome 119+)
   ・overflow-wrap:anywhere = 長い英字列も枠内で折る
   本文のcontainer--narrow(760px)は変えない(読み幅は据え置き)。 */
/* 幅は本文(container--narrow 760px)と揃える。広げると題字の左端が本文より外に出て不揃いに見えた */
body.p-blog .page-header .page-header__title {
  font-size: clamp(20px, 3.0vw, 34px);
  letter-spacing: 0.02em;
  line-height: 1.55;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
@media (max-width: 640px) {
  body.p-blog .page-header .page-header__title { font-size: 19px; line-height: 1.6; }
}
.posts .post__title,
.related__grid h3 {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
/* 題字内で分断させたくないかたまり（店名）。
   幅の実測: SP390pxで利用可能339pxに対し店名190px＝余裕149pxなので安全。 */
.nobr { white-space: nowrap; }

/* 題字の改行を、区切りのいい位置で固定する(2026-09-02 紗弓さん決定)
   ダッシュ(—)は使わない方針(言い換え対応表#7)。主題と副題は改行で分ける。
   .t-line を block にして、指定した位置で必ず改行する。
   スマホで1行に収まらない場合は、その行の中だけ自動で折り返す(はみ出しは起きない)。 */
body.p-blog .page-header .page-header__title .t-line { display: block; }

/* ============================================================
   4.6 当日の流れ（STEPラベル型）と Instagram導線
   2026-09-01 追加。外すときはこのブロックごと削除できる。
   ============================================================ */

/* 当日の流れ: STEP 01 の小ラベル型（案3・紗弓さん選定） */
.steps-label { list-style: none; padding: 0; margin: 0; }
.steps-label > li { padding: calc(var(--space) * 3) 0; border-bottom: 1px solid var(--color-line); }
.steps-label > li:last-child { border-bottom: none; }
.steps-label__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.3em;   /* 2026-09-07: 11px→12px */
  color: var(--color-accent);
  border: 1px solid var(--color-sage);
  padding: 4px 12px 4px 14px;      /* letter-spacing の分だけ左右を非対称に */
  margin-bottom: calc(var(--space) * 1.5);
}
.steps-label__title { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin: 0 0 6px; }
.steps-label__body { margin: 0; color: var(--color-muted); }

/* Instagram: アイコン＋アカウント名（フッター等、幅に余裕がある場所） */
.ig-inline { display: inline-flex; align-items: center; gap: 8px; }
.ig-inline svg { flex: none; }

/* Instagram: 導線の帯 */
.ig-band {
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-surface);
  padding: calc(var(--space) * 3.5) calc(var(--space) * 4);
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--space) * 3); flex-wrap: wrap;
}
.ig-band__l { display: flex; align-items: center; gap: calc(var(--space) * 2); }
.ig-band__icon { color: var(--color-accent); flex: none; }
.ig-band__t { font-family: var(--font-display); font-size: 19px; margin: 0; }
.ig-band__s { font-size: 13px; color: var(--color-muted); margin: 2px 0 0; }
.ig-band__b {
  background: var(--color-cta); color: var(--color-accent-ink);
  text-decoration: none; padding: 12px 24px; border-radius: var(--radius);
  font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.ig-band__b:hover { background: var(--color-accent-deep); }
@media (max-width: 640px) {
  .ig-band { flex-direction: column; align-items: flex-start; }
  .ig-band__b { width: 100%; justify-content: center; }
}

/* --- 4.6 の追補（2026-09-01 紗弓さん指摘の反映） --- */
/* フッター: 住所の直下にくっついていたので間隔を足す */
.site-footer .ig-inline { margin-top: calc(var(--space) * 1.5); }
/* 帯のボタン: 矢印を .button と同じ ::after 方式に統一（ホバーで右へ4px動く） */
.ig-band__b::after {
  content: "→"; margin-left: 0.8em; font-weight: 400;
  display: inline-block; transition: transform 0.3s var(--ease-out);
}
.ig-band__b:hover::after { transform: translateX(4px); }
/* .media-split--stretch は撤去（2026-09-01）。
   本文の高さに写真を合わせる方式は、4ステップにして本文が896pxまで伸びた結果、
   横長の写真が縦長の枠に押し込まれ、左右の2/3以上が切り落とされた。
   写真は元の比率のまま出す。高さの差は余白として受け入れる。 */

/* ヘッダーのInstagram（2026-09-01 紗弓さん指示）
   .global-nav__sns を ul の中の li に移した。
   PC = ナビ項目と「初回体験のご案内」の間にアイコンだけ（一番右は不可との指示）
   SP = ドロワーの最下段に アイコン＋@suralito_pilates（E案） */
@media (min-width: 1200px) {
  /* 他のナビ項目は文字。アイコンはベースラインに乗って上に浮くので、li ごと縦中央に揃える */
  .global-nav__sns { display: flex; align-items: center; }
  /* 案F: Ivoryの丸地にアクセント色のアイコン。CTAと同色の塊にせず、主従を保ったまま気づかせる */
  .global-nav__sns a {
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
    width: 35px; height: 35px; border-radius: 50%;
    background: var(--color-ivory); color: var(--color-accent);
    transition: background 0.3s, color 0.3s;
  }
  .global-nav__sns a:hover { background: var(--color-accent); color: var(--color-accent-ink); }
  .global-nav__sns svg { width: 19px; height: 19px; }
  .global-nav__sns-label { display: none; }   /* PCでは名前を出さない（ナビが窮屈になるため） */
}
@media (max-width: 1199px) {
  .global-nav__sns { display: block; order: 99; border-bottom: 0 !important; margin-top: calc(var(--space) * 2); }
  .global-nav__sns a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-accent); font-family: var(--font-body); font-size: 15px;
    letter-spacing: 0.06em; padding: calc(var(--space) * 1.25) 0;
  }
  .global-nav__sns-label { display: inline; }
}

/* 体験ページの追従CTA（2026-09-01 紗弓さん指示）
   SPは既存の .sp-fixed-cta（画面下の帯）をそのまま使う。
   PCでは幅いっぱいの帯だと重いので、右下に浮くボタンにする。
   表示の出し入れは main.js の既存処理（is-visible）に乗る。 */
@media (min-width: 768px) {
  .sp-fixed-cta--float {
    display: inline-flex; align-items: center; justify-content: center;
    left: auto; right: 24px; bottom: 24px; width: auto;
    padding: 16px 28px; font-size: 15px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
  }
  .sp-fixed-cta--float.is-visible { opacity: 1; visibility: visible; transform: none; }
  .sp-fixed-cta--float:hover { background: var(--color-accent); }
}

/* ヘッダーのナビを「英字＋日本語」の2段に（2026-09-01 紗弓さん決定・noapilates.jp を参考）
   英字は下層ページの題字ウォーターマーク（data-en=LESSON 等）と揃える。
   SPドロワーでは2段にせず日本語だけを出す（縦並びで英字が邪魔になるため）。 */
@media (min-width: 1200px) {
  .global-nav ul a:not(.nav-cta) { display: flex; flex-direction: column; align-items: center; gap: 6px; }   /* 2026-09-07: 英字を12pxにしたら日本語とくっついて息苦しくなったので 2→6px（紗弓さん選定・案C）*/
  .global-nav__en {
    font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em;   /* 2026-09-07: 10px→12px。字間は元の0.18emのまま（一度0.14emに詰めたが、実測でヘッダーに余裕があり詰める必要がなかった。紗弓さん選定・案D）*/
    text-indent: 0.18em;                 /* 字間の分だけ右にずれるのを戻す */
    color: var(--color-muted); line-height: 1;
  }
  .global-nav__ja { font-size: 14px; line-height: 1.2; }
  .global-nav ul a:hover .global-nav__en,
  .global-nav ul a[aria-current="page"] .global-nav__en { color: var(--color-accent); }
}
@media (max-width: 1199px) {
  .global-nav__en { display: none; }     /* ドロワーは日本語だけ */
}

/* ============================================================
   ヘッダーの整理と、右端の縦レール（2026-09-01 紗弓さん決定）
   主導線＝ヘッダー（6項目＋LOGIN＋体験ボタン）
   副導線＝右端の縦レール（LINE → Instagram → 採用）
   トップ・採用・Instagram は SPドロワーには残し、PCヘッダーでだけ隠す。
   ============================================================ */
@media (min-width: 1200px) {
  /* PCヘッダーから外す（DOMには残すのでSPドロワーでは出る） */
  .global-nav__home, .global-nav__recruit, .global-nav__sns { display: none; }
}
/* 会員ログイン枠: gymsのURLが決まったら href を入れて、この1行を消す（PC・SPとも出る） */
.global-nav__login { display: none; }

/* 右端の縦レール */
.side-rail {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: calc(var(--z-header) - 1);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--space) * 2);
}
.side-rail__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 72px; height: 72px; border-radius: 50%; text-decoration: none;   /* 2026-09-07: ラベルを9→12pxにしたら「Instagram」が円からはみ出した。円は下ほど幅が狭くなるため、文字の位置での実効幅は直径より小さい。62→72pxに広げた */
  background: var(--color-ivory); color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(49, 42, 38, 0.12);
  transition: background 0.3s, color 0.3s;
}
.side-rail__label { font-size: 12px; letter-spacing: 0; line-height: 1; }   /* 2026-09-07: 9px→12px。字間を0にして円内に収める */
.side-rail__item:hover { background: var(--color-accent); color: var(--color-accent-ink); }
/* 採用は客向けではないので、色を分けて少し離す */
.side-rail__item--job {
  margin-top: calc(var(--space) * 2.5);
  background: var(--color-surface); color: var(--color-muted);
  border: 1px solid var(--color-line);
}
.side-rail__item--job:hover { background: var(--color-muted); color: var(--color-accent-ink); border-color: var(--color-muted); }
@media (max-width: 767px) {
  .side-rail { display: none; }   /* SPは下部固定CTAとドロワーが担うので出さない */
}

/* --- 追従CTAを円形3行に（2026-09-01 紗弓さん選定・案Hベース）
       文字の大きさに差をつけてメリハリを出す。SPは従来どおり下部の帯（1行）。 --- */
.fab__en, .fab__ja, .fab__sub { display: none; }
.fab__sp { display: inline; }
@media (min-width: 768px) {
  .sp-fixed-cta--float {
    width: 150px; height: 150px; border-radius: 50%;
    flex-direction: column; gap: 0; padding: 0;
    background: var(--color-accent); color: var(--color-accent-ink);
    box-shadow: 0 12px 30px rgba(49, 42, 38, 0.20);
    text-align: center; line-height: 1.35;
  }
  .sp-fixed-cta--float::after { content: none; }   /* 矢印は円では邪魔なので出さない */
  /* 体験ページではこのボタンが主役なので、スクロール待ちにせず最初から出す
     （main.js の is-visible 判定に依存すると、条件が合わず出ないことがあった） */
  .sp-fixed-cta--float { opacity: 1; visibility: visible; transform: none; }
  /* 2026-09-07 紗弓さん指示で白のリングを撤去（「白が浮いて見える」）。
     入れた理由は「濃緑の円が背景に沈む」対策だったが、サイトは全ページ明るい配色なので
     リングなしでも沈まなかった。代わりに影をわずかに強めて（0.20→0.30）分離を保つ。
     採用ページの茶色い円にも同じく効く（同じ宣言を共有）。 */
  .sp-fixed-cta--float {
    box-shadow: 0 14px 34px rgba(49, 42, 38, 0.30);
  }
  .sp-fixed-cta--float:hover { background: var(--color-accent-deep); }
  .fab__sp { display: none; }
  .fab__en, .fab__ja, .fab__sub { display: block; }
  .fab__en  { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.10em; opacity: 0.82; }
  .fab__ja  { font-size: 21px; letter-spacing: 0.08em; margin-top: 3px; }
  .fab__sub { font-size: 13px; letter-spacing: 0.10em; opacity: 0.88; margin-top: 1px; }
}

/* 採用ページだけ、追従CTAを採用LINEに差し替える（2026-09-04 紗弓さん指示）
   濃緑・「体験予約」のままでは、CTAバンドのLINEボタンも含めて体験予約と見分けがつかない。
   縦レールの「採用」を客向けと色分けしたのと同じ考え方（.side-rail__item--job）で、
   ダークブラウン（--color-text）だと暗すぎたので、それを明るくした茶色に。
   Dark Brown #312a26 の明度を上げた同系色で、新しい色相は足していない。白文字で7.3:1。 */
.sp-fixed-cta--recruit { background: #645446; }
@media (min-width: 768px) {
  .sp-fixed-cta--recruit:hover { background: var(--color-text); }   /* 体験の円と同じく、hoverで濃くする */
  .sp-fixed-cta--recruit .fab__ja  { font-size: 19px; }   /* 「採用LINE」は4文字＋英字で幅が出るので少し詰める */
  .sp-fixed-cta--recruit .fab__sub { font-size: 12px; }
}

/* --- 縦レール: ヘッダー直下へ寄せ、色を薄めグリーン×2＋ベージュに（2026-09-01 紗弓さん指示） --- */
.side-rail { top: 104px; transform: none; }       /* ヘッダー76px＋28px */
.side-rail__item {
  background: color-mix(in srgb, var(--color-sage) 30%, #ffffff);
  color: var(--color-accent);
}
.side-rail__item:hover { background: var(--color-sage); color: var(--color-accent-ink); }
.side-rail__item--job {
  background: var(--color-ivory); color: var(--color-muted);
  border: 0;
}
.side-rail__item--job:hover { background: var(--color-line); color: var(--color-text); }

/* SPドロワーの最下段に LINE → Instagram を並べる（2026-09-01 紗弓さん決定）
   PCではレールが担うので出さない。 */
@media (min-width: 1200px) { .global-nav__line { display: none; } }
@media (max-width: 1199px) {
  .global-nav__line { display: block; order: 98; border-bottom: 0 !important; margin-top: calc(var(--space) * 2); }
  .global-nav__line a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-accent); font-family: var(--font-body); font-size: 15px;
    letter-spacing: 0.06em; padding: calc(var(--space) * 1.25) 0;
  }
  .global-nav__sns { margin-top: calc(var(--space) * 0.5); }
}

/* 採用ページのCTAバンド（2026-09-04 紗弓さん選定・案4）
   濃緑＋白ボタンのままだと、体験予約のCTAバンドと見分けがつかない。
   帯そのものを淡いアイボリー（既存トークン --color-ivory）に落とし、
   ボタンを追従CTAと同じ茶にして、客向けCTAと「明度」から分ける。
   新しい色は足していない（帯＝既存トークン、ボタン＝追従CTAと同じ #645446）。 */
.cta-band--recruit { background: var(--color-ivory); color: var(--color-text); }
.cta-band--recruit .button {
  background: #645446; color: #ffffff; border-color: #645446;
  box-shadow: 0 6px 18px rgba(49, 42, 38, 0.16);
}
.cta-band--recruit .button:hover { background: var(--color-text); color: #ffffff; border-color: var(--color-text); }
.cta-band--recruit .cta-band__note { opacity: 1; color: var(--color-muted); }

/* 採用ページはCTAバンドが淡いアイボリーなので、フッターの上罫（--color-line）が
   帯との境目に細い線として浮いて見える。このページだけ1本消す（2026-09-04 紗弓さん指摘）。
   濃色の帯が乗る他ページでは罫が境目として効いているので、全体からは外さない。 */
.site-footer--flush { border-top: 0; }