/* ==========================================================================
   Musuhi ランディングページ
   カラーとタイポグラフィのトークンは :root にまとめる。
   命名は BEM（block__element--modifier）。
   ========================================================================== */

:root {
  /* 色 — アプリの水引ブランドに由来 */
  --ruri: #2A5CAA;        /* 瑠璃 — 水引の青。主役（Nativeアプリと統一したブランドカラー） */
  --ruri-deep: #20457F;   /* 紺瑠璃 — hover・強調（--ruriを暗くした色に追従） */
  --yoru: #0f1b45;        /* 夜 — ストーリーセクションの背景 */
  --ink: #1a2138;         /* 墨 — 本文 */
  --mist: #5d6785;        /* 霞 — 補足テキスト */
  --mist-deep: #48527a;   /* 霞よりわずかに濃い — Heroタグライン用 */
  --kasumi: #e2e7f5;      /* 薄霞 — 罫線・淡い面 */
  --hakuji: #f7f8fc;      /* 白磁 — ページ背景 */
  --shiro: #ffffff;
  --kin: #c4a45f;         /* 金 — 水引の金。ごく少量の差し色 */

  /* 書体 */
  --font-heading: "Zen Kaku Gothic New", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-gothic: "Zen Kaku Gothic New", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-latin: "Inter", sans-serif;
  --font-hero: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* Heroのみで使用 */

  --max-width: 1080px;

  /* Typography階層（PCを基準。各セクションはこの階層に沿ってサイズ・ウェイト・色を揃える） */
  --fs-hero: clamp(30px, 3.2vw, 42px);       /* Heroメインタイトル */
  --fs-title: clamp(28px, 2.5vw, 36px);      /* 通常セクションタイトル */
  --fs-subtitle: clamp(20px, 1.8vw, 24px);   /* 小見出し / セクション内タイトル */
  --fs-app-copy: 20px;                        /* アプリ画面上の2行コピー */
  --fs-body: 18px;                            /* 通常本文 */
  --fs-card-body: 17px;                       /* カード本文 */
  --fs-eyebrow: 15px;                         /* eyebrow */
  --fs-secondary: 15px;                       /* 補助文・タグライン・Footer secondary */

  --fw-heading: 700;
  --fw-body: 500;

  --lh-hero: 1.45;
  --lh-title: 1.5;
  --lh-card-title: 1.5;
  --lh-body: 1.85;
  --lh-secondary: 1.7;

  /* Hero専用Typography（ファーストビューのため通常セクションの本文階層とは別体系） */
  --fs-hero-lead: 22px;      /* Hero本文（PC） */
  --fs-hero-tagline: 19px;   /* Heroタグライン x2（PC・同一サイズ） */
  --lh-hero-lead: 1.8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { overflow-x: clip; }

body {
  font-family: var(--font-gothic);
  font-size: 16px;
  line-height: 2;
  color: var(--ink);
  background: var(--hakuji);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--ruri); }

:focus-visible {
  outline: 2px solid var(--ruri);
  outline-offset: 3px;
  border-radius: 2px;
}

.br-sp { display: none; }
.br-tab { display: none; } /* Hero本文専用: Tablet/Mobile幅（≤900px）でのみ有効化し、孤立行を防ぐ */

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 2px;
  padding: 16px 36px;
  border-radius: 999px;
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn__note {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.btn--primary {
  background: var(--ruri);
  color: var(--shiro);
  box-shadow: 0 8px 24px rgba(42, 92, 170, 0.28);
}

.btn--primary:hover {
  background: var(--ruri-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(42, 92, 170, 0.34);
}

.btn--outline {
  border: 2px solid var(--ruri);
  color: var(--ruri);
  background: var(--shiro);
  padding: 12px 28px;
}

.btn--outline:hover { background: var(--ruri); color: var(--shiro); }

.btn--small { padding: 10px 22px; font-size: 14px; box-shadow: none; }

.btn--large { padding: 20px 52px; font-size: 18px; }

/* Final CTA: 狭幅で右端が切れないよう左右paddingのみ縮小（font-sizeは不変）。ENは収まらない幅でのみ折り返す */
@media (max-width: 480px) {
  .btn--large { padding-left: 28px; padding-right: 28px; max-width: 100%; }
  html:lang(en) .btn--large { white-space: normal; text-wrap: balance; text-align: center; }
}
@media (max-width: 360px) {
  .btn--large { padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(247, 248, 252, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled { box-shadow: 0 1px 0 var(--kasumi), 0 6px 20px rgba(18, 42, 110, 0.06); }

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__icon {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}

.site-header__wordmark {
  display: block;
  height: 22px;
  width: auto;
}

.site-header__nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.site-header__nav a {
  font-family: var(--font-hero);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__nav a:hover { color: var(--ruri); }

.site-header .btn--small { font-size: 15px; }

/* 言語切替（JP｜EN）。ナビと同じ余白リズムに合わせつつ、CTAより一段控えめな重み */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Header nav（margin-left:auto）が無い画面（例: support.html）でも右寄せされるように */
.site-header__inner--right .lang-toggle { margin-left: auto; }

.lang-toggle__btn {
  background: none;
  border: none;
  padding: 4px 1px;
  font-family: var(--font-hero);
  font-size: 14px;
  font-weight: 500;
  color: var(--mist);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
}

.lang-toggle__btn:hover { color: var(--ink); }

.lang-toggle__btn[aria-current="true"] {
  color: var(--ruri);
  font-weight: 700;
}

.lang-toggle__btn[aria-current="true"]:hover { color: var(--ruri); }

.lang-toggle__sep {
  color: var(--kasumi);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   ヒーロー — 横書きのメインコピーと、波形が結びになるコード
   -------------------------------------------------------------------------- */
.hero {
  padding: 150px 24px 0;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(42, 92, 170, 0.07), transparent),
    var(--hakuji);
}

.hero__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.hero__title {
  font-family: var(--font-hero);
  font-weight: var(--fw-heading);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: 0.02em;
  color: var(--yoru);
  max-width: 820px;
  margin: 0 auto 32px;
}

.hero__title-accent { color: var(--ruri); white-space: nowrap; }

.hero__lead {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-hero-lead);
  line-height: var(--lh-hero-lead);
  color: var(--ink);
  max-width: 960px;
  margin: 0 auto 32px;
}

.hero__jingle {
  font-family: var(--font-hero);
  font-size: var(--fs-hero-tagline);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ruri);
  margin: 0 0 12px;
}

.hero__tagline {
  font-family: var(--font-hero);
  font-size: var(--fs-hero-tagline);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ruri);
  text-transform: uppercase;
}

.hero__cord { padding: 52px 0 24px; text-align: center; }

.hero__cord svg { display: block; width: 100%; height: auto; }

.cord__strand {
  stroke: var(--ruri);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.cord__strand--mid { stroke: var(--kin); }

/* --------------------------------------------------------------------------
   セクション共通
   -------------------------------------------------------------------------- */
.section { padding: 110px 24px; }

.section__inner { max-width: var(--max-width); margin: 0 auto; }

.section__eyebrow {
  font-family: var(--font-hero);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heading);
  letter-spacing: 0.22em;
  color: var(--ruri);
  margin-bottom: 18px;
}

.section__eyebrow::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 5px;
  margin-right: 14px;
  vertical-align: middle;
  background: repeating-linear-gradient(
    to bottom,
    currentColor 0, currentColor 1px,
    transparent 1px, transparent 2px
  ); /* 水引5本を思わせる細い横線 */
}

.section__title {
  font-family: var(--font-hero);
  font-weight: var(--fw-heading);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: 0.02em;
  color: var(--yoru);
  text-align: center;
  margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   Brand Story（Why Now / Philosophy / Voice Album / Weekly Reflection /
   Connection / Vision）— 「章」として読ませる共通構造
   既存のTypography・色トークンのみを使用し、新しい色・大量のpx値は追加しない。
   -------------------------------------------------------------------------- */
.ph { display: inline-block; } /* 日本語タイトルの句単位改行（句の途中で折り返さない） */

.ln { display: block; text-wrap: balance; } /* 原稿の1行=1ブロック。幅が足りなくても各行が均等に折り返され、孤立行を作らない */

.chapter__inner { text-align: center; }

/* 日本語を文節単位で折り返す（対応ブラウザのみ。非対応でも通常の折り返しにフォールバック）。
   狭い画面で「つなが/り」のような単語途中の改行を減らし、読みやすさを保つ */
.chapter { word-break: auto-phrase; }

.chapter--white { background: var(--shiro); }

.chapter__icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--ruri);
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
}

.chapter__icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--shiro);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chapter__icon--fill svg { stroke: none; width: 54px; height: 54px; } /* Nativeのfill系シンボル（photo / gift 等）を再現したSVG。線アイコン用の白stroke指定を打ち消す */

.chapter__icon img { display: block; width: 40px; height: auto; } /* Weekly Reflection: Native Garden brand asset（単色白シルエット） */

.chapter__eyebrow { text-align: center; margin-bottom: 14px; }

.chapter__title {
  max-width: 980px;
  margin: 0 auto 44px;
  text-wrap: balance;
}

.chapter__body { max-width: 780px; margin: 0 auto; }

.chapter__text {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}

.chapter__text--lead { margin-bottom: 8px; } /* 直後の強調文と一続きに読ませる */

.chapter__em {
  font-family: var(--font-hero);
  font-weight: var(--fw-heading);
  font-size: var(--fs-app-copy);
  line-height: 1.9;
  color: var(--yoru);
  margin: 0 0 28px;
  text-wrap: balance;
}

.chapter__em--lead { margin-bottom: 8px; }

.chapter__body > :last-child { margin-bottom: 0; }

/* 言語によって不要になる段落（JPとENで段落の切り方が異なる箇所）は非表示 */
.chapter__text:empty,
.chapter__em:empty { display: none; }

.chapter__closing {
  font-family: var(--font-hero);
  font-weight: var(--fw-heading);
  font-size: var(--fs-subtitle);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--yoru);
  max-width: 780px;
  margin: 56px auto 0;
  text-wrap: balance;
}

/* 水引5本を思わせる細い横線（eyebrowと同じモチーフ）で、締めのコピーを静かに区切る */
.chapter__closing::before,
.chapter__endings::before {
  content: "";
  display: block;
  width: 34px;
  height: 5px;
  margin: 0 auto 28px;
  background: repeating-linear-gradient(
    to bottom,
    var(--ruri) 0, var(--ruri) 1px,
    transparent 1px, transparent 2px
  );
}

/* 旧「Musuhiができること」Closingの表現を再利用（水引区切りなし・やや大きめ・Musuhiのみ瑠璃色） */
.chapter__closing--brand {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 2.2;
  letter-spacing: 0.04em;
  margin-top: 56px;
}

.chapter__closing--brand::before { display: none; }

.chapter__brand-accent { color: var(--ruri); }

.chapter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 44px;
  text-align: left;
}

.chapter__block {
  background: var(--shiro);
  border: 1px solid var(--kasumi);
  border-top: 3px solid var(--ruri);
  border-radius: 16px;
  padding: 36px;
}

.chapter--white .chapter__block { background: var(--hakuji); } /* 白背景のsection上では白磁のカード */

.chapter__block-title {
  font-family: var(--font-hero);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-heading);
  line-height: var(--lh-card-title);
  letter-spacing: 0.06em;
  color: var(--yoru);
  margin-bottom: 14px;
}

.chapter__block-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.chapter__block-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ruri);
  display: grid;
  place-items: center;
}

.chapter__block-icon svg { width: 30px; height: 30px; }

.chapter__block-label {
  font-family: var(--font-hero);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heading);
  letter-spacing: 0.14em;
  color: var(--ruri);
  margin-bottom: 14px;
}

.chapter__block-head .chapter__block-label { margin-bottom: 0; }

/* Voice Bookのユースケース（補助情報。小さなタグ） */
.chapter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-top: 20px;
}

.chapter__chip {
  font-family: var(--font-hero);
  font-size: var(--fs-secondary);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ruri);
  background: var(--shiro);
  border: 1px solid var(--kasumi);
  border-radius: 999px;
  padding: 4px 14px;
}

/* --------------------------------------------------------------------------
   Brand Story — 追加ビジュアル（Why Now / Voice Album / Weekly Reflection）
   本文の合間に「呼吸」をつくるための写真・コラージュ表現。
   App Experienceのアプリ画面とは役割を分け、ここでは世界観を伝える写真のみを使う。
   -------------------------------------------------------------------------- */

/* Why Now: 本文幅（780px）より少し広いが、ページ横幅いっぱいには見えないサイズ感。
   ポラロイド1枚1枚をじっくり眺められるよう、左右に十分な余白を残す。
   crop禁止のため width:100%/height:auto で全体を必ず表示する */
.chapter__visual {
  max-width: 960px;
  margin: 48px auto;
}

.chapter__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(15, 27, 69, 0.08);
}

/* Weekly Reflection: 本文幅の少し外まで広げつつ、Why Nowより一回り小さく中央に大きく見せる
   （説明文 → Visual → AI思想、という一本の流れの中の視覚的ブレイク） */
.chapter__visual--weekly-reflection { max-width: 820px; }

/* Voice Album: Text + Visual の2カラム。
   intro（導入）→ visual → rest（残り本文）というDOM順のまま、
   PCではgridで「文章は1カラムに縦積み、Visualはその隣に通しで配置」する。
   Mobileはgridを解除し、DOM順（intro→visual→rest）のまま自然に積む。 */
.chapter__split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  column-gap: 48px;
  align-items: center;
  text-align: left;
  margin-top: 44px;
}

/* .chapter__bodyの margin:0 auto / max-width:780px はセンター1カラム用の指定のため、
   grid内では解除する（auto marginが残るとgridアイテムが縮小して中央寄せされ、
   短い段落だけが左右にずれて見えてしまう） */
.chapter__split > .chapter__body { margin: 0; max-width: none; }

.chapter__split > .chapter__body--intro { grid-column: 1; grid-row: 1; }
.chapter__split > .chapter__visual--split { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.chapter__split > .chapter__body--rest { grid-column: 1; grid-row: 2; }

.chapter__visual--split img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(15, 27, 69, 0.08);
}

.chapter__block-text {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-card-body);
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 16px;
  text-wrap: balance;
}

.chapter__block-text:last-child { margin-bottom: 0; }

.chapter__block-text--em {
  font-weight: var(--fw-heading);
  color: var(--yoru);
}

.chapter__block-text--lead { margin-bottom: 4px; } /* 直後の強調文へ一続きの文として読ませる */

/* Vision — 通常sectionより少し静かで余韻のある見せ方（既存ruriの淡いtintのみ） */
.vision { background: rgba(42, 92, 170, 0.05); }

.chapter__endings { max-width: 780px; margin: 64px auto 0; }

.chapter__ending {
  font-family: var(--font-hero);
  font-weight: var(--fw-heading);
  font-size: var(--fs-subtitle);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--ruri);
  margin: 0 0 28px;
  text-wrap: balance;
}

.chapter__ending:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Why Now — ヒーロー直下。水引との間隔を詰め、次のPhilosophyと地続きで読ませる
   -------------------------------------------------------------------------- */
.why-now { padding-top: 40px; padding-bottom: 70px; }

.philosophy { padding-top: 70px; } /* Why Nowと同じ背景色のため、余白を二重にしない */

/* --------------------------------------------------------------------------
   Why Musuhi
   Hero でFIXしたフォント方針（Zen Maru Gothic・#2A5CAA）に合わせる。
   他セクションが使う .section__title 等の共有クラスは上書きせず、
   .why 配下にのみスコープして影響範囲を限定する。
   -------------------------------------------------------------------------- */
.why { padding-bottom: 70px; } /* 直後のアプリ体験と同じ背景色のため、余白を二重にしない */

.why .section__title { margin-bottom: 20px; }

.why__statement {
  font-family: var(--font-hero);
  font-weight: var(--fw-heading);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-title);
  color: var(--yoru);
  text-align: center;
  margin: 0 auto 48px;
}

.problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 48px;
}

.problem__col {
  background: var(--shiro);
  border: 1px solid var(--kasumi);
  border-top: 3px solid var(--ruri);
  border-radius: 16px;
  padding: 36px;
}

.problem__col--missing {
  background: rgba(42, 92, 170, 0.03);
  border: 1px dashed rgba(42, 92, 170, 0.4);
}

.problem__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-hero);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mist-deep);
  margin-bottom: 14px;
}

.problem__label::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ruri); /* 残るもの: 塗りつぶしの点＝確かにある */
}

.problem__col--missing .problem__label { color: var(--ruri); }

.problem__col--missing .problem__label::before {
  background: transparent;
  border: 1.5px solid var(--ruri); /* 残りにくいもの: 輪郭だけの点＝儚さ */
}

.problem__text {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-card-body);
  line-height: 1.8;
  color: var(--ink);
  text-wrap: pretty; /* 最終行に1語だけ残る折り返し（例: 「lose.」）を避ける。文言・サイズは不変 */
}

.problem__text strong { color: var(--ruri); font-weight: 700; }

.why__voice {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  text-align: center;
  max-width: 800px;
  margin: 56px auto 40px;
}

.problem__closing {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--yoru);
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.why__accent { color: var(--ruri); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Musuhiの原点 — 白磁の余白の中で、静かにカセットを聞き返す時間
   -------------------------------------------------------------------------- */
.story {
  background: var(--hakuji);
  color: var(--ink);
  padding: 130px 24px;
}

.story__title { margin-bottom: 56px; }

.story__body {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}

.story__cassette-frame { position: relative; }

.story__cassette-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.story__cassette-label {
  position: absolute;
  left: 13%;
  right: 14%;
  top: 17.5%;
  text-align: center;
  font-family: var(--font-hero);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #3a2f22; /* ラベルに書かれたインクを思わせる暖色の濃色 */
  font-size: 16px;
}

.story__text {
  font-family: var(--font-hero);
}

.story__text p {
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-bottom: 24px;
}

.story__quote {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--yoru);
  border-left: 3px solid var(--kin);
  padding: 8px 0 8px 28px;
  margin: 36px 0;
}

.story__quote p { margin-bottom: 12px; }
.story__quote p:last-child { margin-bottom: 0; }

.story__origin {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--ruri);
}

.story__signature {
  text-align: right;
  font-family: var(--font-hero);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--mist-deep);
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Musuhiのアプリ体験 — 端末フレーム付きで実際の画面を見せる
   -------------------------------------------------------------------------- */
.app-experience { background: var(--hakuji); }

.app-experience__eyebrow {
  font-family: var(--font-hero);
  font-size: var(--fs-title);
  font-weight: var(--fw-heading);
  letter-spacing: 0.04em;
  color: var(--yoru);
  text-align: center;
  margin-bottom: 56px;
}

.app-experience__eyebrow::before { vertical-align: middle; }

.app-experience__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px 28px;
}

.app-experience__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 300px; /* メイン・補足とも同じ幅で統一し、サイズ感を揃える */
  max-width: 300px;
}

.app-experience__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ruri);
  margin-bottom: 16px;
}

.app-experience__icon svg {
  width: 26px;
  height: 26px;
}

.app-experience__icon--mark {
  background: none;
  width: 56px;
  height: auto;
}

.app-experience__icon--leaf { padding: 13px; box-sizing: border-box; }

.app-experience__copy {
  font-family: var(--font-hero);
  font-weight: var(--fw-heading);
  font-size: var(--fs-app-copy);
  line-height: 1.5;
  color: var(--yoru);
  text-align: center;
  margin-bottom: 20px;
}

.app-experience__phone {
  width: 100%;
  background: var(--yoru);
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(15, 27, 69, 0.12);
}

.app-experience__screen {
  aspect-ratio: 17 / 30; /* 7枚共通の外枠比率。中身はcontainで収め、無理なcropを避ける */
  border-radius: 18px;
  overflow: hidden;
  background: var(--shiro);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-experience__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-experience__more {
  max-width: 640px;
  margin: 96px auto 48px;
  text-align: center;
}

.app-experience__more-eyebrow {
  font-family: var(--font-hero);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-heading);
  letter-spacing: 0.04em;
  color: var(--ruri);
  margin-bottom: 14px;
}

.app-experience__more-lead {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   最終CTA — 結びが完成する場所
   -------------------------------------------------------------------------- */
.cta-final {
  padding: 100px 24px 120px; /* 直前のVision（淡い背景）からの自然な接続のため上余白のみ調整 */
  text-align: center;
  background:
    radial-gradient(ellipse 800px 400px at 50% 120%, rgba(42, 92, 170, 0.08), transparent),
    var(--hakuji);
}

.cta-final__bow { margin-bottom: 32px; }

.cta-final__bow svg { width: 220px; height: auto; }

.bow__strand {
  stroke: var(--ruri);
  stroke-width: 3;
  stroke-linecap: round;
}

.bow__knot { fill: var(--kin); }

.cta-final__title {
  font-family: var(--font-hero);
  font-weight: var(--fw-heading);
  color: var(--yoru);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}

.cta-final__list {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-secondary);
  letter-spacing: 0.1em;
  color: var(--mist-deep);
  margin-bottom: 28px;
}

.cta-final__lead {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: 620px;
  margin: 0 auto 44px;
}

.cta-final__action { margin-bottom: 56px; }

.cta-final__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid var(--kasumi);
}

.cta-final__tagline {
  font-family: var(--font-hero);
  font-size: var(--fs-secondary);
  font-weight: var(--fw-body);
  letter-spacing: 0.16em;
  color: var(--mist-deep);
  text-transform: uppercase;
}

.cta-final__brandmark {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cta-final__brandmark-icon {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.cta-final__brandmark-word {
  display: block;
  height: 26px;
  width: auto;
}

.cta-final__brand-line {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-secondary);
  color: var(--mist-deep);
  text-align: center;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ruri);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-hero);
  padding: 56px 24px;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 24px;
}

.site-footer__logo {
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: 20px;
  color: var(--shiro);
}

.site-footer__nav,
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-footer__nav { margin-left: auto; }

.site-footer__nav a,
.site-footer__social a {
  color: var(--shiro);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__social a:hover { color: var(--kin); }

.site-footer__copy {
  width: 100%;
  font-size: var(--fs-secondary);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}

.site-footer__org {
  width: 100%;
  font-size: var(--fs-secondary);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: -12px;
}

/* --------------------------------------------------------------------------
   サポートページ（support.html）— FAQ・フォームなしのミニマム構成
   -------------------------------------------------------------------------- */
.support-page__inner {
  max-width: 640px;
  text-align: center;
}

.support-page__lead {
  font-family: var(--font-hero);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-bottom: 48px;
}

.support-page__contact {
  background: var(--hakuji);
  border: 1px solid var(--kasumi);
  border-radius: 20px;
  padding: 40px 32px;
  margin-bottom: 40px;
}

.support-page__contact-label {
  font-family: var(--font-hero);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heading);
  color: var(--ruri);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.support-page__contact-email {
  font-family: var(--font-hero);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-heading);
  color: var(--yoru);
  word-break: break-all;
}

.support-page__legal {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.support-page__legal a {
  font-family: var(--font-hero);
  font-size: 16px;
  font-weight: 600;
  color: var(--ruri);
}

.support-page__back {
  font-family: var(--font-hero);
  font-size: var(--fs-secondary);
  font-weight: var(--fw-body);
  color: var(--mist-deep);
}

/* --------------------------------------------------------------------------
   モーション
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.draw-path.is-drawn { transition: stroke-dashoffset 2.6s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .site-header { transition: none; }
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
/* 英語表示のみ: Nav5項目（VISION追加後）が901〜1040pxでCTAを押し出さないよう、余白とNav文字を少し詰める */
@media (min-width: 901px) and (max-width: 1040px) {
  html[lang="en"] .site-header__inner { gap: 14px; }
  html[lang="en"] .site-header__nav { gap: 12px; }
  html[lang="en"] .site-header__nav a { font-size: 14px; }
}

@media (max-width: 900px) {
  .hero__title { font-size: clamp(24px, 3.6vw, 29px); max-width: 620px; }

  .hero__lead { font-size: 20px; max-width: 100%; }

  .br-tab { display: inline; }

  /* Nav文言＋言語切替＋CTAの合計幅がTablet幅を超えないよう調整 */
  .site-header__inner { gap: 10px; }

  .site-header__nav { gap: 10px; }

  .site-header__nav a { font-size: 13px; }

  .site-header .btn--small { font-size: 13px; padding: 10px 16px; }

  /* 言語切替トグル自体もTablet幅では少し詰める（JP/EN共通） */
  .lang-toggle { gap: 4px; }

  .lang-toggle__btn { font-size: 12px; }

  /* 英語表示時のみ: Nav文言が日本語より横幅を取るため、Tablet幅でHeaderが収まるよう追加で詰める */
  html[lang="en"] .site-header__inner { gap: 10px; }

  html[lang="en"] .site-header__nav { gap: 10px; }

  html[lang="en"] .site-header__nav a { font-size: 12px; }

  html[lang="en"] .site-header .btn--small { font-size: 12px; padding: 8px 12px; }

  .problem__grid,
  .chapter__grid { grid-template-columns: 1fr; }

  /* Voice Album / Weekly Reflection: gridを解除し、DOM順（intro→visual→rest）のまま
     Title/intro → Visual → 残り本文 の順で自然に積む */
  .chapter__split {
    display: block;
    text-align: center;
  }

  .chapter__visual--split { max-width: 460px; margin: 32px auto; }

  .story__body { grid-template-columns: 1fr; gap: 40px; }

  .story__cassette { max-width: 360px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .br-sp { display: inline; }

  .site-header__nav { display: none; }

  /* nav非表示時はlogoを左、言語切替+CTAをまとめて右に寄せる */
  .site-header__inner { justify-content: flex-start; }

  .lang-toggle { margin-left: auto; }

  .hero { padding-top: 110px; }

  /* Mobile Typography Polish: 文字が続く圧迫感を和らげるため、本文・強調文・カード文を
     可読性を保てる範囲で少しだけコンパクトにする（通常本文は16px未満にしない） */
  .hero__title { font-size: clamp(25px, 6.8vw, 29px); line-height: 1.48; max-width: 100%; }

  .hero__lead { font-size: 16px; line-height: 1.7; max-width: 100%; }

  .hero__jingle, .hero__tagline { font-size: 16px; }

  .section { padding: 72px 20px; }

  /* Mobile Typography 最終調整: Section Titleは24px未満にしないため、
     fluid clampではなく単一値に固定する（既存トークン構造を崩さない範囲での最小限の追加） */
  .section__title { font-size: 22px; }

  .section__eyebrow { font-size: 14px; }

  /* Brand Story: Mobileでは同じ背景色の隣接sectionの余白を詰め、ページが間延びしないようにする */
  .why-now { padding-bottom: 48px; }

  .philosophy { padding-top: 48px; }

  .why { padding-bottom: 48px; }

  .chapter__title { margin-bottom: 28px; }

  .chapter__text { font-size: 16px; line-height: 1.75; margin-bottom: 22px; }

  .chapter__em { font-size: 17px; margin-bottom: 22px; }

  .chapter__text--lead, .chapter__em--lead { margin-bottom: 8px; }

  .chapter__closing { font-size: 17px; margin-top: 40px; }

  .chapter__endings { margin-top: 40px; }

  .chapter__ending { font-size: 17px; }

  .chapter__grid { gap: 20px; margin-top: 36px; }

  .chapter__block { padding: 24px 20px; }

  .chapter__block-text { font-size: 16px; line-height: 1.75; }

  /* Why Now: ポラロイドコラージュ周辺の余白をMobile向けに詰める（左右はsection paddingの20pxを利用） */
  .chapter__visual { margin: 36px auto; }

  /* Voice Album: Visualは画面幅の約88〜92%、大きすぎない上限を設定 */
  .chapter__visual--split { width: 90vw; max-width: 460px; margin: 28px auto; }

  /* Weekly Reflection: Visualは画面幅の約88〜92%、中央配置 */
  .chapter__visual--weekly-reflection { width: 90vw; max-width: 460px; margin: 28px auto; }

  .story { padding: 90px 20px; }

  .problem__col { padding: 28px 24px; }

  .app-experience__item { flex-basis: 100%; max-width: 320px; } /* Mobile: メイン・補足とも1列。狭い画面でも横幅がはみ出ないよう上限を調整 */

  .app-experience__eyebrow { font-size: clamp(24px, 6.5vw, 28px); }

  .app-experience__copy { font-size: 18px; }

  .app-experience__more-eyebrow { font-size: clamp(20px, 5.5vw, 22px); }

  .app-experience__more { margin: 64px auto 32px; }

  .cta-final { padding: 80px 20px 90px; }

  .cta-final__list { line-height: 2.4; }
}