/* ═══ 字は自前で配る ═══════════════════════════════════════════
   ⚠️ **実測**: 記事ページの CLS が 0.147（スマホ・4G相当）。
      Google から Poppins が届くまで代替の字で描かれ、届いた瞬間に
      見出しが2行→3行になって、その下が丸ごと30px下がっていた。
      （ズレた要素: .article-subtitle / .article-meta / .article-body）

   ⚠️ size-adjust で代替の幅を合わせる手も試したが、`local()` で
      指す字が環境によって無く、**検証できない**ので採らなかった。
      自前で配って先に読ませれば、入れ替わり自体が起きない。

   ⚠️ 4つの太さは画面で実際に使っている。減らすと偽の太字が出る。
   ⚠️ 出どころとライセンスは fonts/SOURCE.md。
*/
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/poppins-700.woff2") format("woff2")}
/* ⚠️ 看板（.nav-logo）は 800 で描かれている。800 を配っていないと
      ブラウザが 700 から**偽の太字**を作り、本物が届いた瞬間に幅と高さが変わる。
      それが帯を膨らませ、下の全部を押し下げていた（/japan で実測 CLS 0.741）。 */
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;
  src:url("/fonts/poppins-800.woff2") format("woff2")}

/* ═══════════════════════════════════════════════════════════════
   STAYGO — Concierge OS と同じ見た目にする層（2026-09-09・Tomの指示）
   ═══════════════════════════════════════════════════════════════

   ■ これは何か
     LP（staygo.jp）を、すでに刷新した Concierge OS の作りへ寄せる。
     **LP 側で新しいデザインシステムを作らない。**値は OS の
     concierge-os/src/app/globals.css からそのまま写している。

   ■ なぜ1枚にまとめるか
     LP は 47 ページあり、**どのページも自前の <style> と :root を持っていた**。
     ページごとに直すと、直し漏れた1枚だけが黒×金のまま残る。
     残った1枚は、そこへ来た人にとっては「それが STAYGO」になる。

   ■ 読み込む位置
     ⚠️ 各ページの inline <style> の**あと**（</head> の直前）に置く。
        同じ強さの指定は後勝ちなので、前に置くと1行も効かない。

   ■ 色は3つだけ
     白 … 地
     黒 … 押すと事が起きる（主ボタン・下の面）
     青 … STAYGO であること＋小さな印（看板・リンク・目印）
     ⚠️ 金は使わない（指示で全廃）。状態の色（success/warning/danger）は役が違うので残す。
   ═══════════════════════════════════════════════════════════════ */

:root {
  /*
    ⚠️ **UI の印は、文字グリフでなく線で描く（2026-09-11・Tomの指示）。**

       `content:'✓'` や `content:'◆'` は書体に依存する。端末に無ければ
       別の字形に落ち、太さも位置も揃わない。読み上げが「チェックマーク」と
       読むこともある。ここに置いた形をマスクとして敷けば、
       色は currentColor / var(--…) から取れて、線の太さも揃う。

       使い方:
         content:''; width:15px; height:15px;
         background:currentColor;
         -webkit-mask:var(--ico-check) center/contain no-repeat;
                 mask:var(--ico-check) center/contain no-repeat;
  */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ico-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2 22 12 12 22 2 12z'/%3E%3C/svg%3E");
  --ico-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");

  /*
    STAYGO の印（OS の brandmark と同じベクター）。
    ⚠️ **写しを増やさない。** 看板・足元・相談の窓の3か所が同じ形を使う。
       貼り直すと、印を直した日に1か所だけ古い形が残る。
    ⚠️ 色は持たせない（mask ＋ currentColor / background-color）。
  */
  --sg-logo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201524%201458%22%3E%3Cg%20transform%3D%22translate%280.000000%2C1458.000000%29%20scale%280.100000%2C-0.100000%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4410%2014570%20c-30%20-5%20-199%20-13%20-375%20-19%20-336%20-11%20-554%20-29%20-745%20-61%20-63%20-11%20-155%20-24%20-205%20-29%20-114%20-13%20-312%20-55%20-435%20-91%20-52%20-16%20-117%20-35%20-145%20-43%20-855%20-254%20-1632%20-947%20-1920%20-1712%20-91%20-240%20-155%20-471%20-174%20-625%20-6%20-47%20-18%20-132%20-28%20-190%20-29%20-176%20-26%20-876%205%20-1025%2012%20-60%2026%20-150%2031%20-200%206%20-49%2019%20-118%2030%20-152%2011%20-35%2025%20-91%2031%20-125%206%20-35%2029%20-110%2052%20-168%2022%20-58%2053%20-138%2068%20-178%2016%20-40%2033%20-78%2038%20-85%205%20-7%2035%20-61%2066%20-122%20173%20-340%20648%20-827%201008%20-1034%20108%20-62%20493%20-251%20512%20-251%203%200%2029%20-11%2058%20-24%2054%20-24%2086%20-37%20258%20-99%20181%20-66%20446%20-146%20675%20-206%2066%20-18%20158%20-43%20205%20-56%2047%20-14%20108%20-29%20135%20-35%2028%20-6%2071%20-18%2097%20-26%2026%20-8%2086%20-23%20135%20-33%2048%20-10%20122%20-28%20163%20-39%2041%20-12%20138%20-35%20215%20-53%2077%20-17%20178%20-41%20225%20-54%2047%20-13%20124%20-30%20172%20-39%2047%20-9%20105%20-23%20127%20-31%2022%20-7%2075%20-19%20117%20-24%2042%20-6%20108%20-20%20147%20-31%2040%20-11%20133%20-33%20207%20-50%20267%20-61%20436%20-102%20510%20-125%2041%20-13%20102%20-29%20135%20-35%2068%20-13%20185%20-49%20297%20-91%2042%20-16%2082%20-29%2088%20-29%2010%200%20163%20-59%20310%20-120%20637%20-264%20909%20-679%20821%20-1251%20-70%20-449%20-607%20-844%20-1236%20-909%20-55%20-6%20-161%20-18%20-235%20-28%20-223%20-28%20-971%20-25%20-1097%206%20-55%2013%20-125%2022%20-171%2022%20-50%200%20-112%209%20-172%2024%20-52%2014%20-117%2027%20-145%2031%20-47%206%20-223%2049%20-325%2080%20-549%20163%20-1072%20699%20-1172%201200%20-34%20173%20-72%20296%20-97%20316%20-34%2027%20-2594%2032%20-2654%205%20-27%20-13%20-26%20-290%203%20-338%2010%20-18%2026%20-78%2035%20-133%20138%20-882%20626%20-1681%201370%20-2240%20194%20-146%20340%20-228%20635%20-355%2052%20-22%20113%20-49%20135%20-60%20170%20-82%20552%20-204%20800%20-257%2039%20-8%20115%20-25%20170%20-38%2055%20-14%20141%20-29%20190%20-35%2050%20-6%20125%20-20%20169%20-31%2043%20-11%20131%20-24%20195%20-30%2064%20-5%20177%20-18%20251%20-29%2074%20-10%20194%20-22%20265%20-25%2072%20-3%20207%20-13%20300%20-21%20327%20-28%20505%20-33%20780%20-24%20355%2012%20846%2045%201015%2070%2074%2011%20189%2024%20256%2029%2066%205%20157%2019%20201%2030%2045%2012%20116%2026%20160%2031%2043%206%20107%2019%20143%2030%2036%2010%2094%2024%20130%2030%2087%2015%20395%20104%20530%20154%2036%2013%20110%2041%20164%2061%20670%20246%201328%20811%201616%201385%20101%20202%20216%20508%20250%20670%20189%20881%20156%201484%20-119%202140%20-308%20734%20-769%201157%20-1721%201579%20-178%2078%20-564%20214%20-805%20282%20-60%2017%20-153%2044%20-205%2059%20-111%2033%20-259%2075%20-420%20120%20-63%2017%20-158%2044%20-210%2060%20-52%2015%20-124%2035%20-160%2044%20-124%2033%20-175%2046%20-235%2060%20-33%208%20-145%2037%20-250%2065%20-104%2028%20-250%2067%20-322%2086%20-73%2019%20-141%2039%20-152%2045%20-11%205%20-53%2017%20-93%2025%20-40%209%20-111%2026%20-158%2040%20-47%2013%20-148%2042%20-225%2064%20-1156%20327%20-1502%20531%20-1665%20981%20-148%20407%20163%20941%20595%201021%2030%205%2074%2018%2097%2029%2042%2018%20222%2048%20422%2070%2070%207%201610%2010%205140%2010%204920%20-1%205040%20-1%205065%2018%2018%2013%2047%2071%2096%20193%2040%2096%20107%20246%20149%20334%2043%2088%2088%20187%20101%20220%2013%2033%2038%2094%2055%20135%2060%20141%20152%20365%20175%20425%2013%2033%2038%2092%2055%20130%2018%2039%2049%20111%2070%20160%2096%20232%20134%20312%20156%20332%2022%2020%2024%2030%2024%20110%200%2088%200%2088%20-2637%2084%20-1451%20-3%20-2696%20-5%20-2768%20-5%20-71%200%20-598%204%20-1170%208%20-1336%2011%20-1830%209%20-2465%20-9%20-193%20-5%20-307%20-3%20-420%206%20-95%209%20-301%2014%20-535%2014%20-209%200%20-470%203%20-580%207%20-110%204%20-225%203%20-255%20-2z%20M9623%2011601%20c-93%20-9%20-107%20-27%20-113%20-144%20-10%20-191%205%20-2091%2018%20-2119%206%20-15%2078%20-94%20160%20-175%20407%20-404%20793%20-1128%20872%20-1638%206%20-38%2020%20-99%2030%20-133%2011%20-35%2027%20-139%2035%20-230%209%20-92%2022%20-219%2030%20-282%2035%20-288%2029%20-640%20-16%20-930%20-10%20-69%20-19%20-148%20-19%20-175%200%20-28%20-11%20-93%20-24%20-145%20-14%20-52%20-30%20-124%20-36%20-159%20-88%20-495%20-488%20-1254%20-865%20-1641%20-78%20-80%20-152%20-160%20-165%20-179%20-23%20-33%20-23%20-33%20-21%20-1314%203%20-1356%201%20-1307%2047%20-1349%2038%20-33%20675%20-348%20949%20-468%2072%20-32%20189%20-86%20260%20-120%2072%20-34%20195%20-94%20275%20-132%2080%20-39%20224%20-106%20320%20-149%2096%20-44%20181%20-89%20189%20-99%2011%20-17%2025%20-20%2096%20-20%20105%200%2096%20-604%2094%205982%20-1%205564%20-1%205564%20-39%205602%20-21%2021%20-1879%2036%20-2077%2017z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  /* ── OS から写した値。ここが唯一の出どころ ───────────────── */
  --os-bg: #ffffff;
  --os-bg-soft: #f6f6f8;
  --os-surface: #ffffff;
  --os-surface-2: #f3f3f6;
  --os-surface-ink: #141416;
  --os-ink: #111113;
  --os-ink-muted: #5a5a62;
  --os-ink-subtle: #6b6b73;
  --os-border: #e9e9ed;
  --os-border-strong: #8c8c95;
  --os-accent: #2563eb;
  --os-accent-soft: #eaf1fe;
  --os-accent-ink: #1d4ed8;
  --os-success: #166f46;
  --os-warning: #8a5800;
  --os-danger: #b3261e;

  --os-radius-card: 24px;
  --os-radius-media: 20px;
  --os-radius-control: 14px;
  --os-radius-pill: 999px;
  --os-page: 24px;
  --os-shadow-card: 0 1px 2px rgb(17 17 19 / 0.04), 0 8px 24px rgb(17 17 19 / 0.04);
  --os-ease: cubic-bezier(0.2, 0, 0, 1);
  --os-motion: 220ms;

  --os-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans",
             "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;

  /*
    ⚠️ 昔の名前も上書きする。**消すのではなく、意味を差し替える。**
       47ページのどこかに、まだこの名前を読む1行が残っている。
       消すと、その1行だけが「色の無い箇所」になって、白い字が白い地に出る。
       ここで新しい値に振り直せば、見落とした行も自動で新しい色になる。
    ⚠️ --black は「地」としても「金の上の字」としても使われていた。
       地が白になったので、字として読まれる側が壊れる。だから
       下のコンポーネント指定で、字の色は個別に決め直している。
  */
  --black: #ffffff;
  --dark: #f6f6f8;
  /* ⚠️ 昔の名前 --gold / --gold2 は 49 ページから消して --brand に改名した。
        ここに残すと、名前が生き続けて、また金を入れる足場になる。 */
  --brand: #2563eb;
  --brand-ink: #1d4ed8;
  --white: #111113;
  --grey: #5a5a62;
  --border: #e9e9ed;
}

/* ─── 地と字 ──────────────────────────────────────────────── */
html { color-scheme: light; background: var(--os-bg); }
body {
  background: var(--os-bg) !important;
  color: var(--os-ink) !important;
  font-family: var(--os-font) !important;
  -webkit-font-smoothing: antialiased;
}

/*
  見出し。
  ⚠️ **Bebas（超圧縮の大文字）に戻さない。** OS の見出しは本文と同じ家族で、
     太さと大きさで差を付けている。LP だけ別の家族にすると、
     ログインした瞬間に別の会社の画面になる。
  ⚠️ 大文字に変換しない。宿や店の固有名詞が入るため。
*/
h1, h2, h3, h4, h5,
.hero-title, .section-title, .about-title, .sns-title, .flat-fee-title,
.promise-title, .testimonial-title, .plan-name, .step-title {
  font-family: var(--os-font) !important;
  text-transform: none !important;
  letter-spacing: -0.022em !important;
  color: var(--os-ink) !important;
  text-wrap: balance;
}

/*
  覆いの見出しと、送信後の礼。

  ⚠️ ここだけ刷新前の Bebas Neue が残っていた。押したあとに書体が変わると、
     別の製品の画面に見える。
  ⚠️ **色は当てない。** 上の見出しの群に混ぜたら、覆いは暗い地なので
     `--os-ink`（#111113）が乗って 1.03:1 になり、字が消えた（実測）。
     暗い面の上に残った字色の話は、前にも一度踏んでいる。
*/
.modal-title, .form-success {
  font-family: var(--os-font) !important;
  letter-spacing: -0.022em !important;
  text-wrap: balance;
}

/*
  記事の一覧の題と番号。

  ⚠️ ここも刷新前の Bebas Neue が残っていた。**`<div>` なので上の
     `h1〜h5` の群に入らず**、見落としていた（itineraries の同じ class は
     `<h2>` なので直っていた）。Bebas は 400 しか無く、届かない端末では
     素の sans に落ちるので、**他の見出しだけ太く、ここだけ細い**状態で
     並んでいた（Tom の画面）。
  ⚠️ **色は当てない。** 上の群と同じ `color: … !important` を付けると、
     カードに指を乗せたとき題が青くなるのを殺してしまう。
*/
.card-title, .card-num {
  font-family: var(--os-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  text-wrap: balance;
}
/* 番号は小さい札なので、字間だけ元の広さに戻す */
.card-num { letter-spacing: 0.2em !important; }

/*
  記事の中に残っていた刷新前の書体。

  ⚠️ **画面を測って見つけた。**「Bebas と書いてある行」を数えるだけでは
     足りない（上の h1〜h5 の群で既に潰れているものが混ざる）。
     54ページを描いて、**本当に Poppins で出ていない字**を数えた結果が
     この一覧（約180か所）。Bebas は 400 しか無く、届かない端末では
     素の sans に落ちるので、**その場所だけ細く・別の書体で**出ていた。

  題（太く、字間は詰める）
*/
.exp-title, .dest-name, .dest-title, .season-title, .timeline-title,
.tl-title, .transport-title, .distillery-name, .island-name,
.plan-title, .trip-title, .use-title, .cabin-title, .info-title,
.t-title, .modal-section-title {
  font-family: var(--os-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  text-wrap: balance;
}
/*
  番号と値（太く、⚠️ **字間は触らない**）。
  ここは小さい札や数字なので、詰めると読みにくくなる。
*/
.dest-num, .exp-num, .feat-num, .t-number, .value-num, .benefit-num,
.work-num, .stat-num, .stat-val, .stat-value, .tl-label, .error-code,
.timeline-month, .timeline-month span {
  font-family: var(--os-font) !important;
  font-weight: 700 !important;
}
/* 押しどころに残っていた Barlow / Arial。選択肢の一覧も同じ家族にする */
.lang-btn, .card-btn, .modal-cta-btn, .form-btn, .modal-close,
select, option {
  font-family: var(--os-font) !important;
}

/*
  ⚠️ **暗い地の時代の塗りが残っていた。** `.stat` の
     `rgba(0,0,0,0.3)` は、黒い面の上では「少し沈んだ箱」だったが、
     白い面では**灰色の塊**になって出ていた（記事6本で実測）。
     薄い面の色に置き換える。枠は元のまま。
*/
.stat { background: var(--os-surface-2) !important; }

/*
  金を当てていた字。
  ⚠️ **見出しを青で塗り分けない。** OS の青は「小さな印」（リンク・未読・目印）で、
     44px の青い塊はその役をひっくり返す。実際に一度そう出して、
     LP だけ別の配色に見えた。見出しは黒一色にして、青は下の小さいものへ回す。
*/
.gold, .hero-title .gold, .section-title .gold, .about-title .gold,
.sns-title .gold, .flat-fee-title .gold, .direct-pay-left h2 .gold,
.promise-title .gold, .testimonial-title .gold {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
/* 青を持たせるのは、小さいものだけ */
.section-tag, .hero-tag, .about-label, .testimonial-tag, .flat-fee-tag,
.plan-features li::before, .step-num, .testimonial-quote, .testimonial-stars,
.m-item::after, .nav-logo span,
/*
  ⚠️ **塗ってあるボタンの `<a>` を、ここで青くしない（2026-09-11）。**

     直す前は裸の `a` が入っていて、`!important` なので
     **塗りボタンの文字色まで青**になっていた。旅程ページのモーダルの
     「私の旅程を作る →」は、青いピルの上に同じ青の字で **1.00:1**。
     字はそこに在るのに、まったく見えない。

     押しどころとして塗られた `<a>` は除く。リンクの青は、
     文章の中の小さな印にだけ効かせる。
*/
a { color: var(--os-accent) !important; }

/*
  ⚠️ **塗ってあるボタンの `<a>` は、自分の色を使う。**

     上の `a { color: … !important }` は、**塗りボタンの文字色まで青**にする。
     旅程ページのモーダルの「私の旅程を作る →」は、青いピルの上に
     同じ青の字で **1.00:1**。字はそこに在るのに、まったく見えない。

  ⚠️ 最初は上のセレクタを `a:not([class*="btn"])…` に変えて逃がした。
     すると `:not()` のぶん詳細度が上がり、`.footer-links a:hover{color:#fff}`
     まで食って、フッターのホバーが青（3.56:1）になった。**直した先で壊れた。**
     だから元のセレクタは1文字も触らず、**後ろから名指しで上書きする**。
*/
.modal-cta-btn.btn-gold { color: var(--black) !important; }
.modal-cta-btn.btn-outline { color: var(--white) !important; }

p, li, td, dd { color: var(--os-ink-muted); }

a { color: var(--os-accent); }
a:hover { color: var(--os-accent-ink); }

/*
  ⚠️ キーボードで辿る人が、いまどこに居るかを知る唯一の手掛かり。

  ⚠️ **:where() で書かない。** :where() は強さ0なので、各ページの
     `outline:none` に必ず負ける。実際、iPhone で9個のリンクに輪が出ていなかった。
     見た目は何も変わらないので、キーボードで辿ってみるまで気づけない。
     強さを持たせ、outline を明示的に取り戻す。
*/
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.nav-links a:focus-visible, .footer-links a:focus-visible, .lang-option:focus-visible {
  outline: 2px solid var(--os-accent) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/*
  ⚠️ **指で押せる大きさにする（最低 44px）。**
     上の帯と footer のリンクは高さ 17〜32px しかなかった。
     字は読めるので画面写真では分からない。押し間違えた人だけが分かる。
  ⚠️ 横の並びは崩さない。高さだけを inline-flex で確保する。
*/
.nav-links a, .footer-links a, .lang-btn, .lang-option, .sns-link, .m-item,
.nav-client, .mobile-menu .nav-links a {
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.nav-links a, .footer-links a { padding-block: 4px; }
.hamburger { min-width: 44px; min-height: 44px; display: inline-flex;
             align-items: center; justify-content: center; }
/* ⚠️ 看板は押しどころでもある。小さくしない */
.nav-logo, .footer-logo { display: inline-flex; align-items: center; min-height: 44px; }

/* ─── 上の帯 ──────────────────────────────────────────────── */
nav {
  background: rgb(255 255 255 / 0.86) !important;
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--os-border) !important;
  box-shadow: none !important;
}
/*
  ⚠️ 看板は太く。Bebas Neue は 400 しか無く、届かない端末では素の sans に落ちて
     **細い字**になる（Tom の画面で細く出ていた）。OS と同じ字にして 800 を指定する。
*/
.nav-logo, .footer-logo {
  font-family: var(--os-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
.nav-logo { color: var(--os-ink) !important; }
/* 看板の GO は青。OS の上の帯と同じ扱い */
.nav-logo span { color: var(--os-accent) !important; }
.nav-links a, .lang-btn { color: var(--os-ink-muted) !important; }
.nav-links a:hover, .lang-btn:hover { color: var(--os-ink) !important; }

/*
  ご利用中のお客様の入口。

  ⚠️ **募集の導線ではない。** すでに契約した人が旅程を見に来るための扉なので、
     金や青のボタンにしない。上の帯のほかの字と同じ淡さに置く。
  ⚠️ 色は var(--grey) ではなく --os-ink-muted。刷新後の帯は白地なので、
     暗い地のための灰色を置くと読めなくなる。
*/
.nav-client {
  color: var(--os-ink-muted) !important;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.nav-client:hover { color: var(--os-ink) !important; }

/*
  ⚠️ **狭い画面では「← Blog に戻る」を畳む。**
     帯に「看板・言語・お客様ログイン・戻る・☰」を全部並べると、
     戻るの字が2〜3行に折り返して帯が 127px まで伸びる（実測 6ページ）。
     戻り道は ☰ の中に Home / Blog があるので、消えない。
  ⚠️ 消すのは帯の中だけ。下の面の同じ class には触らない。
*/
@media (max-width: 768px) {
  nav .nav-back { display: none !important; }
}

/*
  ⚠️ 電話の幅では、看板が場所を取りすぎて帯が2段に折れる
     （看板156px ＋ 右側216px > 390px。terms / tokushoho で実測）。
     看板を少し小さくして1段に収める。太さは保つ。
*/
/*
  開いた FAQ は地が青。**字は白**にする。
  ⚠️ 元は黒（#0d0d0d）と灰（--grey）のままで、青の上では 3.8:1 と 1.3:1。
     答えのほうがほとんど読めなかった。
  ⚠️ 閉じているあいだは高さ0なので、検査も画面写真も素通りする。
     開いて測るまで誰も気づかない（2026-09-11）。
*/
.faq-item.open .faq-q,
.faq-item.open .faq-q-text,
.faq-item.open .faq-q-num,
.faq-item.open .faq-a-inner,
.faq-item.open .faq-a-inner p,
.faq-item.open .faq-a-inner li { color: #ffffff !important; }
.faq-item.open .faq-toggle, .faq-item.open .faq-icon { color: #ffffff !important; }

/*
  ⚠️ **ハンバーガーが画面の外へ出ていた。**実測（390px の画面）:
       日本語 看板189 + 言語61 + お客様ログイン85 + ☰44 → ☰ の右端 **433px**
       西語   看板117 + 言語60 + お客様ログイン138 + ☰44 → ☰ の右端 **413px**
     横スクロールにはならないので**気づけない**。**メニューが開けないだけ**。
     看板の書体（日本語だけ Bebas に落ちて 1.6倍に太っていた）は直したが、
     西語は語が長く、**お客様ログインを出したまま☰が収まるのは 438px から**。
     いちばん近い切りのよい 480px を境にする（細かい数字を刻まない）。
  ⚠️ 入口は消えない。**引き出しの中に Client login が在る**（実測で確認）。
*/
@media (max-width: 479px) {
  nav .nav-client { display: none !important; }
}

@media (max-width: 430px) {
  .nav-logo { font-size: 21px !important; }

  /* ⚠️ 帯そのものにも隙間を。無いと看板と「お客様ログイン」がくっつく */
  nav { gap: 10px !important; }
  nav .nav-right { gap: 12px !important; flex-wrap: nowrap !important; }
  /*
    ⚠️ 390px では帯に4つ並べると入りきらない。
       実測: 看板117 + 言語77 + お客様ログイン89 + Enquire Now 96 = 右端 420px（画面は390px）。
       横スクロールにはならないので**気づけない**。切れた「Enquire Now」が画面外に出るだけ。
       落とすのはこの1つだけにする。言語とお客様ログインは残す指示があり、
       問い合わせへの道は引き出しの中の Contact と、各旅程の「Build My Version」に残る。
  */
  nav .nav-cta { display: none !important; }
}
.lang-btn { border-color: var(--os-border) !important; background: var(--os-surface) !important; }

/*
  言語の引き出し（2026-09-12・Tom の指示で全ページ同じ形に）

  ⚠️ **実装が2つある。** `.lang-dropdown`（44ページ）と `.lang-menu`（6ページ）。
     LP を白地へ塗り直したとき `.lang-dropdown` だけを名指しで白くしたので、
     `.lang-menu` の6ページだけ**暗いまま取り残されていた**。
     Tom が気に入ったのは、その取り残されたほう。ここで両方に同じ指定を当てる。
     ⚠️ 片方だけに書かないこと。また割れる。

  ⚠️ 地はページ全体では白のまま。**暗いのはこの小さな覆いだけ**で、
     「地は白」の原則を覆すものではない。ページの地を暗くしないこと。

  ⚠️ 暗い面に載るので、字の色は `--os-ink-muted`（#5A5A62）では読めない。
     測ったら 1.9:1 しかなかった。暗い面の上の字は、ここで持つ。
*/
.lang-dropdown, .lang-menu {
  background: rgba(13, 13, 13, .96) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 14px !important;
  /* ⚠️ 覆いに内側の余白が要る。無いと選択中の白い丸が縁に貼り付いて角が消える */
  padding: 6px !important;
  min-width: 168px;
  box-shadow: 0 12px 40px rgba(8, 9, 10, .34) !important;
  /* 角丸の項目を切り落とさない。余白があるので隠す必要がない */
  overflow: visible !important;
}
.lang-option {
  color: #b9b9c2 !important;          /* 暗い面で 8.3:1 */
  border-radius: 8px !important;
}
.lang-option:hover {
  background: rgba(255, 255, 255, .10) !important; color: #fff !important;
}
/* いま選んでいる言語は、白く塗った丸で示す。色だけに頼らない */
.lang-option.active {
  background: #f3f3f6 !important; color: #111113 !important; font-weight: 600;
}
.hamburger span { background: var(--os-ink) !important; }

/*
  ⚠️ **引き出しを開くと、閉じる口が消えていた**（2026-09-12・Tom の指摘）。

     引き出しは z-index 250 の全画面。帯（nav）は 200。☰ は 300 を
     持っているが**帯の子**なので、帯が作る重なりの文脈の中に閉じ込められ、
     **帯ごと引き出しの下に沈む**。画面には白い一覧だけが残り、
     出口はリンクを踏む（別ページへ行く）かブラウザの戻るしか無かった。
     ⚠️ 落ちないし、どこも壊れて見えない。スマホで開いた人にしか分からない。

     ☰ を ✕ に変える指定は元からあるので、**帯を引き出しより上に出す**
     だけで、押した場所にそのまま閉じる口が戻る。
*/
/*
  ⚠️ 引き出しの名前はページによって3つある（実測: blog-mobile-menu 38ページ /
     page-mobile-menu 8ページ / mobile-menu 1ページ）。**1つだけ直すと、
     残り46ページで同じことが起き続ける。**
*/
nav { z-index: 400 !important; }
.mobile-menu, .page-mobile-menu, .blog-mobile-menu { z-index: 240 !important; }
.mobile-menu {
  background: var(--os-surface) !important;
  border-bottom: 1px solid var(--os-border) !important;
}
.mobile-menu .nav-links a { color: var(--os-ink) !important; }

/*
  押しどころ。
  ⚠️ **黒**（OS の主ボタンと同じ）。青にすると、リンク（青）と
     押しどころ（青）が同じ色になり、「押すと事が起きる」を色で言えなくなる。
*/
/*
  ⚠️ `.cta-btn` `.home-btn` `.btn-pill` を足した（2026-09-11）。
     この3つは <a> なので、上の `a { color: var(--os-accent) !important }` に
     負けて**青い地に青い字**になっていた。押しどころが1つも読めない。
     46か所（ブログ記事のほぼ全部と 404・about）。
*/
.nav-cta, .btn-pill-gold, .plan-btn, .form-submit,
.cta-btn, .home-btn, .btn-pill,
.blog-teaser-btn, .modal-form button[type="submit"] {
  /*
    ⚠️ **flex にしたら、字の寄せも flex で言い直す。**

       ここで display を inline-flex に変えた時点で、各ページの
       `text-align:center` は**効かなくなる**（flex の中は justify-content で
       決まる）。実測で `.plan-btn` は幅304pxのピルのまま字だけ左に寄っていた。
       消えるのではなく寄るだけなので、画面写真を見ても違和感で済み、
       「ずれている」としか言えない形で残る。
  */
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: var(--os-surface-ink) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--os-surface-ink) !important;
  border-radius: var(--os-radius-pill) !important;
  font-family: var(--os-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: opacity var(--os-motion) var(--os-ease), transform var(--os-motion) var(--os-ease);
}
.nav-cta:hover, .btn-pill-gold:hover, .plan-btn:hover, .form-submit:hover,
.cta-btn:hover, .home-btn:hover, .btn-pill:hover,
.blog-teaser-btn:hover { opacity: 0.9; color: #fff !important; }

/*
  ⚠️ 文中のリンクを pill にしない。字より箱が小さくなって、**字が箱からはみ出す**
     （実際そうなった）。ここは OS のリンクと同じ、青い字＋下線。
*/
.about-story-btn {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  color: var(--os-accent) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 15px !important; font-weight: 600 !important;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgb(37 99 235 / 0.35);
  padding: 0 !important; min-height: 44px; align-items: center;
}
.about-story-btn:hover { color: var(--os-accent-ink) !important; text-decoration-color: currentColor; }
.btn-pill-gold, .form-submit, .plan-btn { min-height: 54px; }

/* 添えの押しどころ。輪郭だけ */
.btn-pill-outline {
  background: transparent !important;
  color: var(--os-ink) !important;
  border: 1px solid var(--os-border-strong) !important;
  border-radius: var(--os-radius-pill) !important;
  font-family: var(--os-font) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/*
  ⚠️ **輪郭だけのボタンは、指を乗せたら黒へ反転させる。**

     直す前は、上の `.btn-pill:hover { color:#fff }`（黒いボタン用）が
     ここにも当たっていて、**白い地に白い字**になり、
     カーソルを乗せた瞬間に「View Plans」が消えていた。
     色を戻すだけでは「乗せても何も起きない」ので、反転させる。
*/
.btn-pill-outline:hover, .btn-pill-outline:focus-visible {
  background: var(--os-surface-ink) !important;
  border-color: var(--os-surface-ink) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
.btn-pill-outline { padding: 15px 26px !important; }

/* ⚠️ 文中のリンクも pill にしない（字がはみ出す）。青い字＋下線 */
.craft-link, .blog-teaser-btn.is-link {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  color: var(--os-accent) !important; padding: 0 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 15px !important; font-weight: 600 !important;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgb(37 99 235 / 0.35);
  display: inline-flex; align-items: center; min-height: 44px;
}
.craft-link:hover { color: var(--os-accent-ink) !important; text-decoration-color: currentColor; }

/*
  ⚠️ 単独で置かれる押しどころ。`.craft-link`（文中のリンク）とは別物。
     上の `.craft-link` の !important に食われないよう、**両方の class を
     持たせたうえで**ここで名指しして戻す。
*/
.craft-cta {
  text-decoration: none !important; gap: 8px;
  padding: 15px 26px !important; min-height: 48px;
  transition: gap .25s ease, background .22s ease, border-color .22s ease;
}
.craft-cta span { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.craft-cta:hover span, .craft-cta:focus-visible span { transform: translateX(4px); }

/* ─── 面 ──────────────────────────────────────────────────── */
section, .about, .plans, .process, .testimonial, .sns, .direct-pay,
.blog-teaser, .cta, .promise, .flat-fee {
  background: var(--os-bg) !important;
}
/* 段は余白で出す。1つおきにごく薄い面を敷いて、単調にしない */
.plans, .testimonial, .flat-fee, .blog-teaser { background: var(--os-bg-soft) !important; }

.section-tag, .hero-tag, .about-label, .testimonial-tag, .flat-fee-tag {
  color: var(--os-accent) !important;
  background: var(--os-accent-soft) !important;
  border: 0 !important;
  border-radius: var(--os-radius-pill) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  display: inline-block;
}
/* ⚠️ ◆ のような飾りを足さない。参照UIに飾り記号は1つも無い */
.section-tag::before, .section-tag::after,
.flat-fee-tag::before, .flat-fee-tag::after { content: none !important; }

.plan-card, .testimonial-card, .about-img {
  background: var(--os-surface) !important;
  border: 1px solid var(--os-border) !important;
  border-radius: var(--os-radius-card) !important;
  box-shadow: none !important;
}

/* ───────────── 約束の面と、直接払いの3つ ─────────────

  ⚠️ どちらも**枠を外した**。

     直す前は、丸い枠の箱が縦に3つ並び、その下にもう1つ大きな箱、という形で、
     中身が違うのに見た目が全部同じだった。読み手には「同じ種類のもの」に見える。
     ここは ①守る約束（1つの言い切り）と ②その内訳（3つの事実）で、
     役割が違う。役割の違いを**形**で出す。

     ・約束 … 枠を外し、上に細い線を1本。言い切りだけが残る
     ・3つ … 枠を外し、項目ごとに上の線で区切る（帳面の形）。
              線が左から引かれる（工程のレール・数の帯と同じ語彙）
  ⚠️ **青い ✦ は残す（Tomの指示）。**
     CLAUDE.md の「飾り記号を足さない」に対する、ここだけの例外。
     元から動いていた印なので、消さない。読み上げには渡さない（aria-hidden）。
*/
.promise-inner {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative;
  padding-top: 40px !important;
}
.promise-inner::before {
  content: "";
  position: absolute; top: 0; left: 50%; width: 72px; height: 2px;
  margin-left: -36px;
  background: var(--os-surface-ink);
  transform: scaleX(1); transform-origin: center;
  transition: transform 640ms var(--os-ease);
}
.sg-motion .promise-inner:not(.visible)::before { transform: scaleX(0); }

.dp-item {
  position: relative;
  display: flex !important;
  align-items: flex-start;
  gap: 16px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 26px 0 28px !important;
}
.dp-item::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--os-border);
  transform: scaleX(1); transform-origin: left center;
  transition: transform 620ms var(--os-ease);
}
.sg-motion .dp-item:not(.visible)::before { transform: scaleX(0); }
.dp-item:nth-of-type(1)::before { transition-delay: 60ms; }
.dp-item:nth-of-type(2)::before { transition-delay: 220ms; }
.dp-item:nth-of-type(3)::before { transition-delay: 380ms; }
/* 最後の項目の下にも線を引いて、帳面として閉じる */
.dp-item:last-of-type { border-bottom: 1px solid var(--os-border) !important; }

.dp-item h4 {
  font-family: var(--os-font) !important;
  font-size: clamp(17px, 1.5vw, 20px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--os-ink) !important;
  margin: 0 0 8px !important;
  text-wrap: balance;
}
.dp-item p { margin: 0 !important; max-width: 62ch; }

/*
  ⚠️ ここで見出しと説明を左右に割らない。

     親（.dp-list）がすでに2段組みの**右側**なので、その中をさらに割ると
     見出しが「No markups / on accommodation」のように不自然に折れ、
     右に空きが残る（実際にそうなった）。段はこの列の中で、上下に作る。
*/
.dp-item p { color: var(--os-ink-muted) !important; }
.dp-text { min-width: 0; }

/*
  青い印。線が引かれるのに合わせて、回りながら出る。
  ⚠️ 既定は「出ている」。縮めるのは `.sg-motion` の中だけなので、
     JSが落ちた日も印は最初から見えている。
  ⚠️ 指を乗せたときの回転は元からの動き。残す。
*/
.dp-icon {
  flex: none;
  /* ⚠️ 18px だと、隣の 20px・太さ700 の見出しに負けて点にしか見えない
        （Tom の画面で小さかった）。印として読める大きさにする */
  margin-top: -1px;
  font-size: 28px;
  line-height: 1;
  color: var(--os-accent) !important;
  transform: rotate(0deg) scale(1);
  opacity: 1;
  transition: transform 620ms var(--os-ease), opacity 460ms var(--os-ease);
}
.sg-motion .dp-item:not(.visible) .dp-icon { transform: rotate(-140deg) scale(0.4); opacity: 0; }
.dp-item:nth-of-type(1) .dp-icon { transition-delay: 140ms; }
.dp-item:nth-of-type(2) .dp-icon { transition-delay: 300ms; }
.dp-item:nth-of-type(3) .dp-icon { transition-delay: 460ms; }
.dp-item:hover .dp-icon { transform: rotate(72deg) scale(1.18); }

@media (prefers-reduced-motion: reduce) {
  .promise-inner::before, .dp-item::before { transition: none !important; }
}

/*
  ⚠️ **「私たちが大切にすること」の枠は青で強調する（指示・2026-09-11）。**
     ここは STAYGO が何者かを言う場所なので、ほかの面と同じ灰色の線だと
     読み流される。青は「小さな印」の役なので、**枠だけ**青にして
     地と字はそのまま（青い面にすると押しどころに見える）。
*/
.value-card {
  border: 1.5px solid var(--os-accent) !important;
  border-radius: var(--os-radius-card) !important;
  background: var(--os-surface) !important;
  box-shadow: none !important;
}
.value-card:hover {
  border-color: var(--os-accent-ink) !important;
  background: var(--os-accent-soft) !important;
  box-shadow: none !important;
}
/* ⚠️ 番号は opacity:0.3 で薄い。枠を青にしたので、番号も同じ青で締める */
.value-card .value-num { color: var(--os-accent) !important; opacity: 0.55 !important; }
/*
  つくり手の面。⚠️ 枠を外す（約束の面と同じ扱い・Tomの指示）。

     ここは「誰が作っているか」を1人分だけ言う場所で、
     並んでいるカードの1枚ではない。枠があると、その上の
     「私たちが大切にすること」の3枚と同じ種類に見える。
     枠の代わりに、上に短い線を1本置いて章の変わり目にする。
     線は左右から中央へ引かれる（他の節と同じ語彙）。
  ⚠️ 既定は引かれ切った状態。縮めるのは `.sg-motion` の中だけ。
*/
.founder-inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 44px 0 0 !important;
  position: relative;
}
.founder-inner::before {
  content: "";
  position: absolute; top: 0; left: 50%; width: 72px; height: 2px;
  margin-left: -36px;
  background: var(--os-surface-ink);
  transform: scaleX(1); transform-origin: center;
  transition: transform 640ms var(--os-ease);
}
.sg-motion .founder-inner:not(.visible)::before { transform: scaleX(0); }
@media (max-width: 700px) {
  .founder-inner { padding: 36px 0 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .founder-inner::before { transition: none !important; } }
.plan-card::before, .plan-card::after, .cta::before { content: none !important; }
.plan-card:hover, .testimonial-card:hover {
  border-color: var(--os-border-strong) !important; transform: none !important;
}
.plan-card.featured {
  background: var(--os-surface-ink) !important;
  border-color: var(--os-surface-ink) !important;
}
.plan-card.featured, .plan-card.featured * { color: #fff !important; }
.plan-card.featured .plan-btn {
  background: #fff !important; color: var(--os-surface-ink) !important; border-color: #fff !important;
}
/*
  ⚠️ **丸い札を、カードの上端に貼り付けない。**
     元は `border-radius: 0 0 12px 12px` の「上から垂れる札」だったので
     `top:-1px` で正しかった。刷新で丸い錠剤（999px）にしたのに位置が
     そのままで、カードが `overflow:hidden` ＋ 角24px なので
     **札の上の丸みが角で切り落とされていた**（2026-09-12・Tom の指摘）。
     カードの中へ下ろして、切られない位置に置く。
  ⚠️ 下ろしたぶん、いちばん上の字と重ならないように札ぶんの余白を足す。
*/
.plan-badge {
  background: var(--os-accent) !important; color: #fff !important;
  border-radius: var(--os-radius-pill) !important; letter-spacing: 0 !important;
  top: 16px !important;
}
.plan-card.featured { padding-top: 64px !important; }
/*
  ⚠️ 数字も Poppins に揃える。

     ここだけ刷新前の Bebas Neue が残っていた（数の帯4つと料金3つ）。
     Bebas は詰まった大文字専用の書体なので、Poppins で組んだ見出しの隣に
     置くと**別の製品の部品**に見える。CLAUDE.md の「字の家族は Poppins。
     見出しも本文も同じ」に反していたのはこの7か所だけだった。
  ⚠️ 等幅の数字は残す。桁が変わったときに幅が揺れない。
*/
.plan-price, .stat-num {
  font-family: var(--os-font) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em !important;
}
.plan-features li::before { color: var(--os-accent) !important; }
.plan-hr { border-color: var(--os-border) !important; background: var(--os-border) !important; }

/* 写真。OS の詳細画面と同じ角丸 */
.about-img, .about-img img, .hero-bg {
  border-radius: var(--os-radius-media) !important;
}
.about-img-tag {
  background: rgb(20 20 22 / 0.86) !important; color: #fff !important;
  border-radius: var(--os-radius-pill) !important; border: 0 !important;
}

/* ───────────────────────── 数の帯 ─────────────────────────

  ⚠️ 直す前は札の高さが揃っていなかった（116px と 100px）。
     「MARKUPS OR COMMISSIONS」だけラベルが2行に折れるため。
     格子の線が十字に走るので、**表のように見えて**段差が目立っていた。

  直したこと:
    ・数字とラベルの行箱を決めて、4枚の高さを揃える
    ・狭い画面では縦の線を消して、余白で段を作る（十字をやめる）
    ・出るときに、札の下へ細い線が左から引かれる
      （工程のレールと同じ動きの語彙。別々の演出を増やさない）
  ⚠️ 数を数え上げるのは「100%」だけ。0 を数えると 0 のまま、
     「1:1」「TOKYO」は数ではない。**無い数字を動かさない。**
*/
.stats-bar, .stat-cell { background: var(--os-bg) !important; border-color: var(--os-border) !important; }
.stat-num { color: var(--os-ink) !important; }
.stat-lbl { color: var(--os-ink-subtle) !important; }

.stat-cell {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* 数字の行箱を決める。桁や字数が違っても、下のラベルの位置が動かない */
.stat-num { display: block; min-height: 1em; line-height: 1 !important; }
/* ラベルは2行ぶんの箱を持つ。1行のものも同じ高さになる */
.stat-lbl {
  margin-top: 0 !important;
  display: flex; align-items: flex-start; justify-content: center;
  min-height: 2.6em; line-height: 1.3 !important;
  max-width: 15ch; text-wrap: balance;
}

/* 出るときに引かれる細い線 */
.stat-cell::after {
  content: "";
  position: absolute; left: 22%; right: 22%; bottom: 14px;
  height: 1px; background: var(--os-surface-ink);
  transform: scaleX(1); transform-origin: left center;
  transition: transform 620ms var(--os-ease);
}
.sg-motion .stat-cell:not(.visible)::after { transform: scaleX(0); }
.stat-cell:nth-child(1)::after { transition-delay: 80ms; }
.stat-cell:nth-child(2)::after { transition-delay: 220ms; }
.stat-cell:nth-child(3)::after { transition-delay: 360ms; }
.stat-cell:nth-child(4)::after { transition-delay: 500ms; }

@media (max-width: 768px) {
  /* ⚠️ 十字の線をやめる。表に見えて、段差がそのぶん目立つ */
  .stat-cell { border: 0 !important; padding: 26px 14px 30px !important; }
  .stats-bar { row-gap: 2px; }
  .stat-lbl { font-size: 9.5px !important; letter-spacing: 0.16em !important; }
}

@media (prefers-reduced-motion: reduce) { .stat-cell::after { transition: none !important; } }

/*
  流れる帯。黒地に白ヌキ（2026-09-11・Tomの指示）。

  ⚠️ 白の上に薄いグレーの帯だと、ヒーローと数の帯のあいだで
     面が3枚とも近い明るさになり、切れ目が見えなくなっていた。
     ここだけ黒く落として、上下を分ける線の役をさせる。
  ⚠️ 黒い面に載せる青は #2563EB を使わない（3.56:1 で読めない）。
     区切りの◆は --os-accent-soft（#EAF1FE）。字ではなく飾りだが、
     見えない色を置くと「何か出ているのに読めない」状態になる。
  ⚠️ 動きは意味のあるものだけに残す（参照UIに動く飾りは無い）。
*/
.marquee-wrap { background: var(--os-surface-ink) !important; border-color: rgba(255,255,255,0.10) !important; }
.m-item { color: #ffffff !important; }
.m-item::after { color: var(--os-accent-soft) !important; }
/*
   ⚠️ **画面ごとに速さを変えない（2026-09-12）。**

      ここには「携帯では速くする（Tomの指示・14s）」があった。狭い画面だと
      止まって見える、というのが理由。**その理由は index.html 側のバグが
      作っていたもの**で、track が画面幅のままだったので、動く量が
      「画面の半分」しかなかった（スマホ 195px＝14px/秒）。

      track を内容ぶんの幅にした今、動く量は**どの画面でも 2299px で同じ**。
      同じ 14s を残すと 164px/秒 になり、PC（82px/秒）のちょうど2倍で流れる。
      速さは1つでよい。⚠️ ここに幅ごとの上書きを足す前に、
      index.html の `.marquee-track` が `width:max-content` を持っているか見ること。
*/
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none !important; } }

/* ───────────────────────── 手順 ─────────────────────────

  ⚠️ 「4枚のカードを等間隔に並べる」は、いちばんテンプレートに見える形。
     工程は**順番そのもの**なので、順番を形で示す。
     線を1本通し、その上に番号の印を置き、線が左から引かれていく。
     枠を外したぶん、間の余白と線が段を作る。

  ⚠️ **既定は「引かれ切った」状態。** 縮める・薄くする指定は
     `.sg-motion` の中にだけ書く。JS が落ちた日は、最初から
     線も印も出ている（js/staygo-os.js 冒頭の決めごとと同じ）。
*/
.step {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.process-grid { position: relative; }

/* 地の線と、引かれる線。印（56px）の中心を通す */
.process-grid::before,
.process-grid::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 28px;
  left: 12%;
  right: 12%;
  height: 1px;
  pointer-events: none;
}
.process-grid::before { background: var(--os-border); }
.process-grid::after {
  background: var(--os-surface-ink);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 1100ms var(--os-ease);
}
.sg-motion .process-grid:not([data-sg-rail-in])::after { transform: scaleX(0); }

/* 番号の印。既定は黒（＝線が届いたあとの姿） */
.step-num {
  width: 56px !important; height: 56px !important;
  margin: 0 auto 22px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: var(--os-surface-ink) !important;
  color: #ffffff !important;
  border: 1px solid var(--os-surface-ink) !important;
  border-radius: var(--os-radius-pill) !important;
  font-family: var(--os-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  position: relative; z-index: 1;
  transition: background 320ms var(--os-ease), color 320ms var(--os-ease),
              border-color 320ms var(--os-ease), box-shadow 220ms var(--os-ease),
              transform 220ms var(--os-ease);
}
/* 線が届く前。⚠️ ここだけ sg-motion の中 */
.sg-motion .process-grid:not([data-sg-rail-in]) .step-num {
  background: var(--os-surface) !important;
  color: var(--os-ink-subtle) !important;
  border-color: var(--os-border) !important;
}
/* 線の進みに合わせて、左から順に黒く落ちる */
.process-grid .step:nth-child(1) .step-num { transition-delay: 60ms; }
.process-grid .step:nth-child(2) .step-num { transition-delay: 300ms; }
.process-grid .step:nth-child(3) .step-num { transition-delay: 540ms; }
.process-grid .step:nth-child(4) .step-num { transition-delay: 780ms; }

/*
  指を乗せたとき。⚠️ **淡い輪だけでは見えない**（Tom の画面で、ほぼ
  何も起きていないように見えた）。印そのものを青に反転させ、輪も足す。
  ⚠️ 浮かせるのは 1.06 倍まで。ここは押せる場所ではないので、
     大きく動かすと「押せるのに反応しない」と読まれる。
*/
.step:hover .step-num,
.step:focus-within .step-num {
  background: var(--os-accent) !important;
  border-color: var(--os-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 7px var(--os-accent-soft) !important;
  transform: scale(1.06);
}
.step:hover .step-title { color: var(--os-accent) !important; }

.step-title { margin-bottom: 10px !important; }

/*
  狭い画面。⚠️ PC版の横並びを縮めない。線を縦に倒し、印を左端に置いて
  本文を右に流す。読む向き（上から下）と工程の向きが一致する。
*/
@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-left: 76px;
    margin-top: 44px !important;
  }
  /*
    ⚠️ 線は**段ごとに**引く。全体に1本通すと、最後の印より下へ
       はみ出す（最後の段の文の長さで下端が決まるため、CSS では止められない）。
       段が自分の下だけを引けば、最後の段は引かないだけで済む。
  */
  .process-grid::before, .process-grid::after { content: none !important; }
  /* ⚠️ `.process-grid` の中だけ。blog-restaurants も .step を使っていて、
        絞らないと関係ない一覧に線が生える */
  .process-grid .step:not(:last-child)::before,
  .process-grid .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -49px; top: 56px; bottom: -22px;
    width: 1px;
    pointer-events: none;
  }
  .process-grid .step:not(:last-child)::before { background: var(--os-border); }
  .process-grid .step:not(:last-child)::after {
    background: var(--os-surface-ink);
    transform-origin: center top;
    transform: scaleY(1);
    transition: transform 520ms var(--os-ease);
  }
  .sg-motion .process-grid:not([data-sg-rail-in]) .step::after { transform: scaleY(0); }
  .process-grid .step:nth-child(1)::after { transition-delay: 60ms; }
  .process-grid .step:nth-child(2)::after { transition-delay: 300ms; }
  .process-grid .step:nth-child(3)::after { transition-delay: 540ms; }
  .process-grid .step { text-align: left !important; padding-bottom: 34px !important; }
  .process-grid .step:last-child { padding-bottom: 0 !important; }
  .process-grid .step-num { position: absolute; left: -76px; top: 0; margin: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .process-grid::after, .step-num { transition: none !important; }
}

/* 声 */
.testimonial-quote, .testimonial-stars { color: var(--os-accent) !important; }
.testimonial-avatar { background: var(--os-surface-2) !important; color: var(--os-ink) !important; }
.testimonial-name { color: var(--os-ink) !important; }
.testimonial-role { color: var(--os-ink-subtle) !important; }

/* 書く欄 */
.form-field label { color: var(--os-ink-muted) !important; }
.form-field input, .form-field select, .form-field textarea {
  background: var(--os-bg-soft) !important;
  color: var(--os-ink) !important;
  border: 1px solid var(--os-border-strong) !important;
  border-radius: var(--os-radius-control) !important;
  font-family: var(--os-font) !important;
  min-height: 48px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--os-ink) !important;
  outline: 2px solid var(--os-accent); outline-offset: 1px;
}
.form-field select option { background: #fff; color: var(--os-ink); }
.form-success { color: var(--os-success) !important; }
.contact-form {
  background: var(--os-surface) !important;
  border: 1px solid var(--os-border) !important;
  border-radius: var(--os-radius-card) !important;
}

/* ─── 下の面 ──────────────────────────────────────────────── */
footer {
  background: var(--os-surface-ink) !important;
  border-top: 0 !important;
  color: rgb(255 255 255 / 0.72) !important;
}
footer a, .footer-links a { color: rgb(255 255 255 / 0.72) !important; }
footer a:hover, .footer-links a:hover { color: #fff !important; }
.footer-logo { color: #fff !important; letter-spacing: 0 !important; }
/* ⚠️ 黒い面の上の #2563eb は 3.56:1 で読めない。暗い面の青は薄い側を使う */
.footer-logo span { color: var(--os-accent-soft) !important; }
.footer-copy { color: rgb(255 255 255 / 0.55) !important; }

/*
  ══ 「Find us online.」は黒い面 ═══════════════════════════════════
  2026-09-12・Tom の指示。⚠️ **黒くしたら、中の字を1つ残らず塗り直す。**
  ⚠️ 見出しには `!important` が要る。この上の群が
     `h1〜h5, …, .sns-title { color: var(--os-ink) !important }` を当てていて、
     そのままだと**黒地に黒**で字が消える（覆いの見出しで一度踏んだ型）。
  ⚠️ 節の地も `section, …, .sns { background: var(--os-bg) !important }` が
     当たっているので、こちらも `!important` で上書きする。
  ⚠️ 足（footer）と同じ #141416。**黒を2種類作らない。**
  ⚠️ 青は薄い側（--os-accent-soft）。#2563eb は黒地で 3.65:1 しかない
     ── 足のロゴで決めたのと同じ扱い。
  実測（この地の上）: 白 18.4 / #eaf1fe 16.2 / #b9b9c2 9.5
*/
.sns { background: var(--os-surface-ink) !important; border-top: 1px solid rgb(255 255 255 / 0.10) !important; }
.sns .section-tag {
  background: rgb(255 255 255 / 0.08) !important;
  border-color: rgb(255 255 255 / 0.16) !important;
  color: #93b4f8 !important;
}
.sns .sns-title { color: #ffffff !important; }
/* ⚠️ `--os-accent-soft`(#eaf1fe) は黒地では**ほぼ白**で、青という差が消える。
      ここは差が意味なので、青と分かる明るさ（9.1:1）にする */
.sns .sns-title .gold { color: #93b4f8 !important; }
.sns .sns-sub { color: #b9b9c2 !important; }

.sns-link {
  border: 1px solid rgb(255 255 255 / 0.22) !important;
  border-radius: var(--os-radius-pill) !important;
  background: rgb(255 255 255 / 0.06) !important;
  color: #ffffff !important;
}
.sns-link:hover {
  border-color: var(--os-accent-soft) !important;
  background: rgb(255 255 255 / 0.12) !important;
  color: var(--os-accent-soft) !important;
}
.sns-link svg { fill: currentColor; }

/* ─── 横にはみ出させない ──────────────────────────────────── */
/* ⚠️ 2026-09-09 の実測: about で 469>390、itineraries で 395>390 出ていた */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, table, pre { max-width: 100%; }

/* ═══ Hero（2026-09-09・OS の作りへ寄せた） ═══════════════════
   ⚠️ 暗い写真の上に字を置かない。OS は白地に黒い字で、そこへログインする。
      左に言葉、右に写真。写真は OS の詳細画面と同じ角丸（20px）。
   ⚠️ 100vh にしない。**次に何があるか**が畳の下に隠れると、人は下へ行かない。
      参照UIも1画面を埋め尽くさない。 */
.hero {
  min-height: 0 !important;
  display: block !important;
  padding: 104px var(--os-page) 56px !important;
  background: var(--os-bg) !important;
  overflow: visible !important;
}
.hero::after, .hero-bg { display: none !important; content: none !important; }
.hero-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
.hero-copy > * { position: relative; z-index: 1; }
/*
  ⚠️ **見出しを青で塗り分けない。** OS では青は「小さな印」で、
     76px の青い塊は青の役をひっくり返す（実際に出して、そう見えた）。
     見出しは黒一色。青は目印・リンク・看板の GO に残す。
*/
.hero-title, .hero-title .gold {
  color: var(--os-ink) !important;
  -webkit-text-fill-color: var(--os-ink) !important;
}
.hero-title {
  font-size: clamp(38px, 7.2vw, 76px) !important;
  line-height: 1.04 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
  margin-bottom: 20px !important;
  animation: none !important; opacity: 1 !important;
}
.hero-tag, .hero-sub, .hero-btns { animation: none !important; opacity: 1 !important; }
.hero-tag { margin-bottom: 20px !important; }
.hero-sub {
  color: var(--os-ink-muted) !important;
  font-size: 16px !important; line-height: 1.65 !important;
  max-width: 46ch !important; margin-bottom: 28px !important;
}
.hero-btns { gap: 12px !important; }
.hero-media { position: relative; }
/* ⚠️ 写真と動画で見た目を変えない。片方だけに書くと、差し替えた日に形が変わる */
.hero-media img,
.hero-media video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--os-radius-media);
  /* ⚠️ 16:9 を縦長の枠に切ると、既定の中央では人が端に寄る。少し右へ */
  object-position: 55% center;
  background: #12100e; /* 読み込むまでの地。白いままだと一瞬光る */
}
/* ⚠️ 出発地の1行は、写真の中でなく写真の下に置く（写真に文字を焼かない） */
.hero-location {
  position: static !important; transform: none !important;
  margin: 16px auto 0 !important; justify-content: center;
  color: var(--os-ink-subtle) !important;
}
@media (min-width: 900px) {
  .hero { padding: 128px var(--os-page) 72px !important; }
  .hero-inner { grid-template-columns: 1.02fr 1fr; gap: 56px; }
  .hero-media img,
  .hero-media video { aspect-ratio: 5 / 6; }
}

/* ═══ 節の見出し。大きな見出し＋短い文＋強い絵1つ ═══════════ */
.section-title, .about-title, .sns-title, .flat-fee-title, .testimonial-title, .promise-title {
  font-size: clamp(28px, 4.2vw, 44px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}
.about-body p, .sns-sub, .cta-sub, .blog-teaser-sub, .promise-body p, .flat-fee-body p,
.direct-pay-left p, .step-body, .plan-note {
  color: var(--os-ink-muted) !important;
  font-size: 15px !important; line-height: 1.6 !important;
}

/* ═══ Concierge OS の実画面を見せる ═══════════════════════════
   ⚠️ 偽のダッシュボード画像を作らない（指示）。本物の画面を撮って置く。 */
.os-preview { background: var(--os-bg-soft) !important; padding: 80px var(--os-page) !important; }
/* ⚠️ 中の要素が親の中央寄せを継ぐと、題と文の左端がずれる。ここで左に揃える */
.os-preview-inner { max-width: 1200px; margin: 0 auto; text-align: left; }
.os-preview-inner .section-title { margin-top: 18px !important; }
.os-preview-inner .cta-sub { max-width: 58ch; margin: 0 !important; text-align: left !important; }
.os-shots {
  display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 40px;
  justify-items: center;
}
@media (min-width: 760px) { .os-shots { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
/*
  ⚠️ 端末の幅を抑える。抑えないと3台で画面の高さを超え、
     上の島も下の縁も一度に見えない（＝端末に見えない）。
*/
.os-shot { width: 100%; max-width: 286px; }
/*
  ⚠️ 面で囲まない。**端末の枠**に入れる。
     白い面に白い画面を載せると、画面がどこで終わるのか分からない。

  ■ 寸法は iPhone 17 の公表値から出す（sokuoyakata の端末枠と同じ値）

      本体   71.5 × 149.6 mm
      画面   6.3インチ 2622 × 1206 / 460ppi → 実寸 66.59 × 144.78 mm
      縁     左右 (71.5−66.59)/2 = 2.45mm = 本体幅の 3.43%
             上下 (149.6−144.78)/2 = 2.41mm = 本体幅の 3.37%

  ⚠️ **長さは全部 cqw（親の幅の1%）で書く。** % にすると角丸が縦横で
     別々に効いて**楕円**になる。縁の太さは物理的に一定なので、
     上下左右で同じ物差しでなければおかしい。

  ⚠️ 角丸と Dynamic Island の寸法だけは Apple が公表していない。
     15/16 世代で知られている比を踏襲した近似。
*/
.os-shot { background: none !important; border: 0 !important; padding: 0 !important; overflow: visible !important; }

.os-device { position: relative; container-type: inline-size; }

/* 側面のボタン。⚠️ 実機は本体から 1〜2px しか出ていない。狭い画面では出さない */
.os-btn { pointer-events: none; position: absolute; display: none; }
@media (min-width: 1024px) {
  .os-btn { display: block; }
  .os-btn-l { left: -2px; top: 14.5%; width: 2px; height: 20px; border-radius: 1.5px 0 0 1.5px;
    background: linear-gradient(90deg, #6a6259 0%, #2b2620 55%, #14110d 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.30), inset 0 -1px 0 rgb(0 0 0 / 0.65),
                0 56px 0 -0px transparent; }
  /* 音量の2本は、擬似要素で同じ材質のまま足す */
  .os-btn-l::before, .os-btn-l::after {
    content: ""; position: absolute; left: 0; width: 2px; height: 36px; border-radius: 1.5px 0 0 1.5px;
    background: inherit; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.30), inset 0 -1px 0 rgb(0 0 0 / 0.65); }
  .os-btn-l::before { top: 46px; }
  .os-btn-l::after  { top: 118px; }
  .os-btn-r { right: -2px; top: 24.5%; width: 2px; height: 52px; border-radius: 0 1.5px 1.5px 0;
    background: linear-gradient(270deg, #6a6259 0%, #2b2620 55%, #14110d 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.30), inset 0 -1px 0 rgb(0 0 0 / 0.65); }
}

/* 本体（金属） */
.os-body {
  position: relative;
  aspect-ratio: 71.5 / 149.6;
  border-radius: 16.47cqw;
  padding: 1.0cqw;
  background: linear-gradient(146deg, #7d766c 0%, #37322c 20%, #16130f 52%, #272119 78%, #5e574d 100%);
  /*
    ⚠️ 白い地の上では、遠くまで伸びる影を落とさない。
       薄い黒がそのまま灰色に見え、「浮いている」ではなく「汚れている」になる。
  */
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.22),
    inset 0 1px 0 0 rgb(255 255 255 / 0.30),
    0 2px 6px -2px rgb(0 0 0 / 0.28),
    0 12px 24px -12px rgb(0 0 0 / 0.30);
}

/* ベゼル（画面のまわりの黒） */
.os-bezel {
  position: relative; height: 100%; overflow: hidden; background: #000;
  border-radius: 15.47cqw; padding: 2.43cqw;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.9);
}

/* 画面 */
.os-screen {
  position: relative; display: flex; flex-direction: column; height: 100%;
  overflow: hidden; background: #fff; border-radius: 13.04cqw;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

/* 上の帯（時刻・電波）。⚠️ 端末の枠であって、アプリの中身ではない */
.os-status { position: relative; flex-shrink: 0; height: 12.5cqw; }
.os-status-row {
  position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: space-between; padding-inline: 8.5%;
}
.os-status-time { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em;
                  font-size: 3.9cqw; color: var(--os-ink); }
.os-status-icons { display: flex; align-items: center; gap: 1.5cqw; color: var(--os-ink); }
.os-ic-signal { width: 5.0cqw; height: 3.1cqw; }
.os-ic-wifi   { width: 4.4cqw; height: 3.1cqw; }
.os-ic-batt   { width: 7.5cqw; height: 3.4cqw; }

/* Dynamic Island。⚠️ 公表値が無いので近似（画面幅の 31.8% × 高さ 9.3%） */
.os-island {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 2.6cqw; width: 29.6cqw; height: 8.66cqw; border-radius: 999px; background: #000;
}

/*
  ⚠️ **画像は、枠の中で画面に使える比で撮っておく。**

     枠の中の高さは 上の帯(12.5cqw) と 下の棒(6.4cqw) を引いた残り。
       画面 93.14 × 202.37cqw → 中身 93.14 × 183.47cqw → 比 0.5077
     390px 幅なら **390 × 768** で撮る。

     前は 390×844（実機の viewport のまま）で撮っていたので縦に長く、
     `object-fit: cover` が下を切り、**アプリの下のバーがちょうど消えていた**。
     枠に入れると見切れる、という形は写真を見るまで分からない。
*/
.os-shot img {
  display: block; width: 100%; min-height: 0; flex: 1 1 auto;
  object-fit: cover; object-position: top;
  border-radius: 0 !important; background: var(--os-surface-2);
}

/* ホームインジケータ。⚠️ 無いと画面が下で唐突に切れる */
.os-home { flex-shrink: 0; height: 6.4cqw; display: flex; align-items: center; justify-content: center; }
.os-home span { display: block; width: 32.2cqw; height: 1.2cqw; border-radius: 999px;
                background: rgb(17 17 19 / 0.5); }

/* ガラスの映り込み。⚠️ 白い画面の上では見えないので、黒いベゼルの層に置く */
.os-glass {
  pointer-events: none; position: absolute; inset: 0; border-radius: 15.47cqw;
  background: linear-gradient(152deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.05) 15%, transparent 30%);
}
/* 角のハイライト。⚠️ 無いと角丸が「切り抜いた四角」に見えて厚みが出ない */
.os-corner {
  pointer-events: none; position: absolute; inset: 0; border-radius: 15.47cqw;
  background:
    radial-gradient(60% 34% at 8% 4%, rgb(255 255 255 / 0.20), transparent 70%),
    radial-gradient(52% 28% at 94% 97%, rgb(255 255 255 / 0.12), transparent 70%);
}
.os-shot figcaption {
  margin-top: 12px; color: var(--os-ink-subtle); font-size: 13px; text-align: center;
}

/*
  ⚠️ **面の中に欄を置くなら、面に余白が要る。** 無いと欄が縁に貼り付く。
     28px は狭かった（縁と字がくっついて見える）。面の角丸が 24px あるので、
     余白はそれ以上にする。
*/
.contact-form { padding: 40px !important; }
@media (max-width: 560px) { .contact-form { padding: 24px !important; } }

/*
  ⚠️ **grid の中の欄は縮まない。**
     grid の子は既定で min-width:auto。<input> は既定で20文字ぶんの幅を持つので、
     2列に並べた欄は、列が狭くなると**面の外へはみ出す**。
     画面の幅によって出たり出なかったりするので、1つの幅で見ても気づけない。
*/
.form-row { min-width: 0; }
.form-field { min-width: 0; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
/* 送る釦は面の幅いっぱい。OS の主ボタンと同じ */
.form-submit { width: 100%; }

/* ═══ 看板。OS と同じ ST の印 ═══════════════════════════════
   ⚠️ OS の上の帯・レールと**同じ形**（concierge-os/src/components/brandmark.tsx
      から写したベクター）。LP だけ別のロゴにすると、ログインした瞬間に
      「別のサービスへ来た」に見える。
   ⚠️ 色は持たせない（mask ＋ currentColor）。白地では黒、黒い footer では白。
   ⚠️ 47ページの nav の中身は触らない。::before で足すだけにする。 */
.nav-logo::before, .footer-logo::before {
  content: ""; display: inline-block; vertical-align: -0.16em;
  width: 1.04em; height: 1em; margin-right: 0.42em;
  background-color: currentColor;
  -webkit-mask: var(--sg-logo) center / contain no-repeat;
  mask: var(--sg-logo) center / contain no-repeat;
}
/* ⚠️ 黒い面の上の #2563eb は 3.56:1 で読めない。footer の印は白のまま */
.footer-logo::before { background-color: #ffffff; }

/* ⚠️ 黒いカード（おすすめのプラン）の中の青は 3.56:1 で読めない。薄い側にする */
.plan-card.featured .craft-link { color: var(--os-accent-soft) !important; }
.plan-card.featured .craft-link:hover { color: #fff !important; }

/* ═══ 指で押せる大きさ・第2弾（2026-09-09 の実測で出たもの） ══════
   ⚠️ 下の面のリンクは、ページによって .footer-links だったり、ただの
      <footer><p><a> だったりする。**class で当てると、当たらないページが残る。**
      実際 terms / privacy / tokushoho / partners / circle の5枚が残った。
   ⚠️ 本文の中のリンク（記事の途中の a）は太らせない。行の流れが崩れる。
      指の基準は「単独で置かれた押しどころ」に当てる。 */
footer a, .nav-back, .card-btn, .contact-box-email a, .page-mobile-menu a,
.plan-btn, .btn-pill {
  display: inline-flex; align-items: center; min-height: 44px;
}
/*
  ⚠️ `.lang-option` をここに混ぜてはいけない。`inline-flex` になると
     引き出しの中で**横に流れる**。実測で 日本語 と 中文 が同じ行に並び、
     選択中の白い丸も文字幅までしか伸びなくなっていた。
     押しどころの 44px は残したまま、行に戻す。
*/
.lang-option { display: flex; align-items: center; min-height: 44px; }
footer a { padding-block: 2px; }
.card-btn { justify-content: center; }

/* ═══ 幅の狭い画面の覆い ═══════════════════════════════════════
   ⚠️ 40ページ以上に、暗い地（rgba(13,13,13,.98)）＋白い大文字の
      全画面メニューが残っていた。開いた瞬間だけ黒×金の頃の顔に戻る。
      **開いてみるまで誰も見ない場所**なので、写真を見比べても分からない。 */
/*
  ⚠️ **引き出しは3つの名前で存在する**（実測: blog-mobile-menu 38ページ /
     page-mobile-menu 8ページ / mobile-menu 1ページ）。
     ここまで直していたのは page- と mobile- の2つだけで、
     **記事38ページの引き出しだけ黒×青のまま**だった（2026-09-14・Tom の指摘）。

     開いてみるまで誰も見ない場所なので、画面写真を見比べても分からない。
     3つとも**同じ1つの塊**で決める。名前を1つ足したら、ここに足す。

  ⚠️ 記事側は地が rgba(13,13,13,.98) で、下の本文が透けていた。
     さらに共有CSSの `a{color:accent !important}` が効いて、
     **黒い地に青い字**。押しどころが読めない。地は不透明の明るい面に返す。
*/
.mobile-menu, .page-mobile-menu, .blog-mobile-menu {
  background: var(--os-surface) !important;
  border-bottom: 1px solid var(--os-border) !important;
  /*
    ⚠️ **入り切らないときは、真ん中寄せが先頭を画面の外へ押し出す。**
       flex の center は溢れたぶんを上下へ等分に逃がすので、
       375x667 で `About` が帯の裏、`Client login` が画面の下に出た。
       `safe center` は溢れたときだけ先頭寄せに落ちる。これが正解。
       （古いブラウザは2行目を読み飛ばし、1行目の center が残る）
  */
  justify-content: center !important;
  justify-content: safe center !important;
  align-items: center !important;
  gap: 26px !important;
  /* 上の帯（ロゴと✕）のぶんを空ける。中身が帯の下に潜らないように */
  padding: 84px 24px 40px !important;
  /*
    ⚠️ **入り切らない画面がある。** 375x667（SE・mini）で実測したら、
       中身は 699px あり、`About` は帯の裏に隠れ、`Client login` は
       画面の下に出ていた。しかも `overflow: visible` なので**指で動かせない**。
       「scrollHeight > clientHeight だからスクロールできる」は嘘。
       overflow を auto にして初めて動く。
  */
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
/* 背の低い画面では、間と字を詰めて、そもそも入り切るようにする。
   （動かせるようにするのは受け皿であって、動かさずに読めるのが本筋） */
@media (max-height: 760px) {
  .mobile-menu, .page-mobile-menu, .blog-mobile-menu {
    gap: 14px !important;
    /* ⚠️ 上の余白は**帯の高さ（実測73px）より大きく**。詰めると先頭が帯の裏に潜る。
          背が低い画面で削ってよいのは、間と字と下の余白だけ。 */
    padding: 86px 20px 24px !important;
  }
  .mobile-menu .nav-links { gap: 14px !important; }
  .mobile-menu .nav-links a,
  .page-mobile-menu > a,
  .blog-mobile-menu > a { font-size: 16px !important; }
  .mobile-menu .nav-cta,
  .page-mobile-menu .nav-cta,
  .blog-mobile-menu .nav-cta { min-height: 46px !important; margin-top: 2px !important; }
}
/* さらに背が低い画面（320x568 など）。ここまで詰めれば HOME の9項目も入る */
@media (max-height: 640px) {
  .mobile-menu, .page-mobile-menu, .blog-mobile-menu {
    gap: 10px !important;
    padding: 86px 18px 18px !important;
  }
  .mobile-menu .nav-links { gap: 10px !important; }
  .mobile-menu .nav-links a,
  .page-mobile-menu > a,
  .blog-mobile-menu > a { font-size: 15px !important; letter-spacing: 0.08em !important; }
  .mobile-menu .nav-cta,
  .page-mobile-menu .nav-cta,
  .blog-mobile-menu .nav-cta { min-height: 44px !important; font-size: 14px !important; }
}
.mobile-menu .nav-links {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 26px !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.mobile-menu .nav-links a,
.page-mobile-menu > a,
.blog-mobile-menu > a {
  color: var(--os-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.mobile-menu .nav-links a:hover,
.page-mobile-menu > a:hover,
.blog-mobile-menu > a:hover { color: var(--os-accent) !important; }
/*
  ⚠️ **引き出しの「Book now」が出ていなかった**（2026-09-14・Tom の指摘）。

     index.html の素の指定が `.nav-cta{…display:none}` で、
     `display:inline-flex` に返すのは **@media(min-width:1440px) の中だけ**。
     つまり 1440px 未満＝スマホでは、帯の中も引き出しの中もまとめて消える。
     引き出し側は font-size と padding だけ足していて、display に触れていない。

     結果、**スマホで一番押してほしい予約ボタンが、メニューのどこにも無い**
     状態だった。開いてみるまで誰も気づけない。

  ⚠️ 幅ではなく「どこに置かれているか」で決める。帯の中は今までどおり隠し、
     引き出しの中だけ出す。
*/
.mobile-menu .nav-cta,
.page-mobile-menu .nav-cta,
.blog-mobile-menu .nav-cta {
  display: inline-flex !important;
  min-height: 52px !important;
  padding: 0 34px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
}

/* お客様ログインだけは、並びの中の「別の種類」。小さく・控えめに */
.mobile-menu .nav-client,
.page-mobile-menu > .nav-client,
.blog-mobile-menu > .nav-client {
  color: var(--os-ink-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}

/* ⚠️ 単独で置かれた連絡先は押しどころ。行の中の a と区別して太らせる */
.cta-email, a[href^="mailto:"]:not(p a):not(li a) {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ═══ 下の面。**どのページでも同じ形にする**（2026-09-09） ══════
   ⚠️ もともと3種類あった：正本（footer-logo あり）3枚／素の <footer><p> 6枚／
      **footer が無い 39枚**（記事と transport）。
      無い39枚は、記事を読み終えた人の行き先が「戻る」1本しか無かった。
   ⚠️ ページごとの inline CSS に頼らない。footer が無かったページには
      その CSS も無いので、ここで組み立てまで持つ。 */
footer {
  padding: 40px var(--os-page) 44px !important;
  border-top: 0 !important;
  display: flex !important; flex-direction: column;
  align-items: center; gap: 14px; text-align: center;
}
.footer-logo {
  font-family: var(--os-font) !important;
  font-size: 17px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
/* ⚠️ 黒い面の上の #2563eb は 3.56:1 で読めない。GO は薄い青 */
.footer-logo span { color: var(--os-accent-soft) !important; }
.footer-copy, footer p { font-size: 13px !important; }
.footer-links {
  display: flex !important; flex-wrap: wrap; justify-content: center;
  gap: 4px 20px !important; list-style: none; padding: 0 !important; margin: 0 !important;
  max-width: 900px;
}
.footer-links li { list-style: none; }
.footer-links a, footer p a {
  font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  text-decoration: none;
}

/* ⚠️ ページ側に残った footer の細かい指定（margin / letter-spacing / 横並び）を
      無効にする。残っていると、ページごとに同じ footer が違う間隔で出る。 */
footer a { margin: 0 !important; letter-spacing: 0 !important; }
footer p { letter-spacing: 0 !important; }
footer { flex-direction: column !important; text-align: center !important;
         justify-content: center !important; }

/* ═══════════════════════════════════════════════════════════════
   動き

   ⚠️ **隠す指定は `html.sg-motion` の中だけ。**
      札は js/staygo-os.js が立てる。JS が落ちれば札は付かず、
      すべて最初から見えている。CSS だけで隠すと、JS が動かなかった日に
      **本文が永久に消える**。読めない字を直した直後に、同じことを
      別の理由で起こさない。
   ⚠️ 動かすのは transform と opacity だけ。高さや位置を動かすと、
      読んでいる途中で行がずれる。
   ═══════════════════════════════════════════════════════════════ */

.sg-motion [data-sg-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  /* ⚠️ 遅らせすぎない。5段×70ms だと最後の1枚が1秒近く待たされ、
        「動き」ではなく「重い」と読まれる */
  transition:
    opacity 480ms var(--os-ease) calc(var(--sg-i, 0) * 45ms),
    transform 480ms var(--os-ease) calc(var(--sg-i, 0) * 45ms);
  will-change: opacity, transform;
}
.sg-motion [data-sg-reveal][data-sg-in] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ═══════════════════════════════════════════════════════════════
   記事の組み方（2026-09-12）

   ⚠️ **長い記事は、字が細いと読まれない。**実測で本文は 15px・
      色 #5a5a62（薄い灰）だった。3000語を読ませる面としては小さく、
      薄い。大きく・濃くし、**最初の一段だけ太く**して、読み始めを作る。
   ⚠️ 真っ黒にはしない。#111113 を本文全体に敷くと、見出しとの差が
      消えて「濃い壁」になる。
   ═══════════════════════════════════════════════════════════════ */

.article-body p {
  font-size: 16.5px !important;
  line-height: 1.85 !important;
  color: #3a3a42 !important;
}
/* ⚠️ 読み始めの一段。ここだけ大きく太く（新聞や雑誌のリード） */
.article-body > p:first-of-type {
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  color: var(--os-ink) !important;
}
.article-subtitle { font-weight: 400 !important; }
/* 本文の中で強めた語は、地の文よりはっきり濃く */
.article-body strong, .article-body b { color: var(--os-ink) !important; font-weight: 700 !important; }

/*
  節の番号。⚠️ **markup は触らない。**CSS の counter で出す。
  38本の記事の見出しに手で番号を打つと、書き換えた日にずれる。
  読んでいる人には「あと何節あるか」の手がかりになる。
*/
.article-body { counter-reset: sg-sec; }
.article-body h2::before {
  counter-increment: sg-sec;
  content: counter(sg-sec, decimal-leading-zero);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--os-accent);
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   記事の中の動き（2026-09-12）

   ⚠️ **本文の段落は動かさない。**読んでいる最中に一段ずつ出てくるのは
      演出ではなく邪魔になる。動かすのは、節の切れ目・囲み・箇条書き・
      読み進みの3つだけ。
   ⚠️ ここも `html.sg-motion` の中だけ。JS が落ちた日は全部出ている。
   ═══════════════════════════════════════════════════════════════ */

/*
  1. 節の切れ目。⚠️ 下から浮かせない（線が浮くと紙がめくれて見える）。
     左から引く。節が変わったことが、読む前に分かる。
*/
.sg-motion .article-body hr[data-sg-reveal] {
  /* ⚠️ 既定の「下から浮かせる」を打ち消す。線は最初から見えていて、
        横に伸びるだけ。opacity は動かさない（点滅して見える） */
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 640ms var(--os-ease);
}
.sg-motion .article-body hr[data-sg-reveal][data-sg-in] { transform: scaleX(1); }

/*
  2. 囲み。左の罫が伸びてから、中身が出る。
     ⚠️ 罫は 2px しかないので、伸ばすのは**縦**。横に伸ばすと消えて見える。
*/
.sg-motion .callout[data-sg-reveal] { position: relative; }
.sg-motion .callout[data-sg-reveal]::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--os-accent); transform-origin: top center;
  transition: transform 520ms var(--os-ease) 60ms;
}
.sg-motion .callout[data-sg-reveal]:not([data-sg-in])::before { transform: scaleY(0); }

/*
  3. 箇条書き。1行ずつ、ごく短い間で。
     ⚠️ **6行目からは待たせない。**長い一覧で1行ずつ待つのは、
        読みたい人にとってただの遅延になる。
*/
.sg-motion .article-body ul[data-sg-reveal] > li,
.sg-motion .article-body ol[data-sg-reveal] > li {
  opacity: 0; transform: translate3d(0, 6px, 0);
  transition: opacity 380ms var(--os-ease), transform 380ms var(--os-ease);
}
.sg-motion .article-body ul[data-sg-reveal][data-sg-in] > li,
.sg-motion .article-body ol[data-sg-reveal][data-sg-in] > li {
  opacity: 1; transform: none;
}
.sg-motion .article-body [data-sg-reveal][data-sg-in] > li:nth-child(2) { transition-delay: 55ms; }
.sg-motion .article-body [data-sg-reveal][data-sg-in] > li:nth-child(3) { transition-delay: 110ms; }
.sg-motion .article-body [data-sg-reveal][data-sg-in] > li:nth-child(4) { transition-delay: 165ms; }
.sg-motion .article-body [data-sg-reveal][data-sg-in] > li:nth-child(n+5) { transition-delay: 200ms; }

/*
  4. 見比べの表。⚠️ 1行ずつ、上から。**待たせない**ので間は 45ms、
     5行目からは同じ。表は「読むもの」であって見世物ではない。
*/
.sg-motion .compare-table[data-sg-reveal] > .compare-row {
  opacity: 0; transform: translate3d(0, 5px, 0);
  transition: opacity 340ms var(--os-ease), transform 340ms var(--os-ease);
}
.sg-motion .compare-table[data-sg-reveal][data-sg-in] > .compare-row { opacity: 1; transform: none; }
.sg-motion .compare-table[data-sg-in] > .compare-row:nth-child(2) { transition-delay: 45ms; }
.sg-motion .compare-table[data-sg-in] > .compare-row:nth-child(3) { transition-delay: 90ms; }
.sg-motion .compare-table[data-sg-in] > .compare-row:nth-child(4) { transition-delay: 135ms; }
.sg-motion .compare-table[data-sg-in] > .compare-row:nth-child(n+5) { transition-delay: 170ms; }

/*
  5. 本文の中のリンク。⚠️ 色だけで言わない（色覚に頼らせない）。
     罫を最初から引いておき、指を乗せたら左から引き直す。
*/
.article-body p a, .callout a {
  color: var(--os-accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 320ms var(--os-ease);
}
@media (hover: hover) {
  .article-body p a:hover, .callout a:hover { background-size: 100% 2px; }
}

/*
  6. 行き先の札。⚠️ 浮かせるのは 2px まで。大きく浮くと押せるものに見え、
     押しても何も起きない（ここはリンクではない）。
*/
.dest-card, .exp-card {
  transition: transform 420ms var(--os-ease), border-color 420ms var(--os-ease);
}
@media (hover: hover) {
  .dest-card:hover, .exp-card:hover {
    transform: translateY(-2px);
    border-color: var(--os-border-strong);
  }
}

/*
  7. 読み進み。⚠️ **帯の下、2px。**影も光も付けない。
     動きを減らす設定の人にも出す（これは演出ではなく現在地の表示で、
     動くのは幅だけ。ただし追従の transition は付けない）。
*/
.sg-read {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--os-accent); z-index: 120; pointer-events: none;
}

/* ── 指を乗せたとき ─────────────────────────────────────────── */

/*
  ⚠️ `hover: hover` で囲む。触る画面で hover を当てると、
     一度押したものが押したまま浮いて見える。
*/
@media (hover: hover) and (pointer: fine) {
  [class*="-card"], [class*="-box"], .faq-item, .standard-item, .tl-item {
    transition: transform 260ms var(--os-ease), box-shadow 260ms var(--os-ease);
  }
  [class*="-card"]:hover, [class*="-box"]:hover, .standard-item:hover, .tl-item:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 18px 40px -24px rgb(17 17 19 / 0.28);
  }
  /* ⚠️ 押しどころは浮かせない。押せることは色で言っている */
  .nav-cta:hover, .plan-btn:hover, .form-submit:hover,
  .cta-btn:hover, .home-btn:hover, .btn-pill:hover { transform: translate3d(0, -1px, 0); }

  /* 写真は枠の中だけで、ゆっくり寄る */
  [class*="-photo"], [class*="-media"], [class*="-img"], figure { overflow: hidden; }
  [class*="-photo"] img, [class*="-media"] img, [class*="-img"] img, figure img {
    transition: transform 700ms var(--os-ease);
  }
  [class*="-photo"]:hover img, [class*="-media"]:hover img,
  [class*="-img"]:hover img, figure:hover img { transform: scale(1.045); }
}

/* ── 上の帯 ─────────────────────────────────────────────────── */

nav { transition: box-shadow 240ms var(--os-ease), background-color 240ms var(--os-ease); }
nav[data-sg-stuck] {
  box-shadow: 0 1px 0 var(--os-border), 0 10px 30px -22px rgb(17 17 19 / 0.35) !important;
  background: rgb(255 255 255 / 0.94) !important;
}

/* ── 動きを減らしたい人には、何もしない ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-sg-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------
   1つだけ置かれた枠をやめる（2026-09-11）

   .promise-inner / .founder-inner と同じ扱い。

   **枠が悪いのではない。並んでいない枠が悪い。**
   カードが2枚以上あれば、枠は「ここからここまでが1件」という仕事をする。
   1つしかない面には区切る相手がいないので、枠は
   「これはカードの一種です」という嘘だけを残す。
   中身が言い切り1つなら、線1本のほうが役割の違いが形に出る。

   対象:
     .note      … itineraries の「これは見本であって商品ではありません」
     .note-box  … 特商法ページの問い合わせ先

   ⚠️ **開く合図がページによって違う。**
      itineraries は自前の観測係で `.visible` を付ける。
      特商法ページには観測係が無く、staygo-os.js の自動側が
      `data-sg-in` を付ける（`-box` が当たる）。**両方を見る。**
      片方だけ書くと、もう片方のページで**本文が永久に消える**。

   ⚠️ 既定は引かれ切った・見えている状態。縮めるのは `.sg-motion` の中だけ。
------------------------------------------------------------------ */
.note, .note-box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 44px 0 0 !important;
  position: relative;
}
.note::before, .note-box::before {
  content: "";
  position: absolute; top: 0; width: 72px; height: 2px;
  background: var(--os-surface-ink);
  transform: scaleX(1); transform-origin: left center;
  transition: transform 640ms var(--os-ease);
}
/* itineraries の注記は中央揃えなので、線も中央から */
.note::before { left: 50%; margin-left: -36px; transform-origin: center; }
/* 特商法の注記は表と同じ左揃え。線も左端から引く */
.note-box::before { left: 0; }

.sg-motion .note:not(.visible)::before,
.sg-motion .note-box:not(.visible):not([data-sg-in])::before { transform: scaleX(0); }

/* 特商法の本文は、線に少し遅れて上がってくる。
   itineraries 側は `.reveal` が塊ごと出すので、ここで重ねない */
.note-box p {
  transition: opacity 700ms var(--os-ease) 120ms, transform 700ms var(--os-ease) 120ms;
}
.sg-motion .note-box:not(.visible):not([data-sg-in]) p {
  opacity: 0; transform: translateY(10px);
}

@media (max-width: 700px) {
  .note, .note-box { padding: 36px 0 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .note::before, .note-box::before, .note-box p { transition: none !important; }
}

/* ------------------------------------------------------------------
   404 に動きを付ける（2026-09-11）

   このページだけ動きが1つも無かった。中身は画面に収まりきる1塊なので、
   転がして出すのではなく、**開いた瞬間に順に置かれる**形にする。

   ⚠️ 隠す指定は `.sg-motion` の中だけ。この札は JS が立てる。
      JS が動かなかった日は class が付かず、動きも隠れも起きない。
      「見つかりません」と伝えるページが、字を出せない事故を起こさない。
------------------------------------------------------------------ */
@keyframes sg-404-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sg-404-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sg-motion .error-code,
.sg-motion .error-title,
.sg-motion .error-desc,
.sg-motion .home-btn {
  animation: sg-404-in 760ms var(--os-ease) both;
}
.sg-motion .error-code  { animation-delay: 60ms; }
.sg-motion .error-title { animation-delay: 180ms; }
.sg-motion .error-desc  { animation-delay: 420ms; }
.sg-motion .home-btn    { animation-delay: 540ms; }

.sg-motion .error-divider {
  transform-origin: center;
  animation: sg-404-rule 640ms var(--os-ease) 300ms both;
}

@media (prefers-reduced-motion: reduce) {
  .sg-motion .error-code, .sg-motion .error-title, .sg-motion .error-desc,
  .sg-motion .home-btn, .sg-motion .error-divider { animation: none !important; }
}

/* ------------------------------------------------------------------
   記事タイトルが5〜6行になる（2026-09-11）

   ⚠️ **これまで見えていなかった。** headline-check に全ページを渡したつもりが、
      zsh は変数を単語分割しないので、49ページ分が1つの引数に潰れて
      **1ページしか検査していなかった**。渡し方を直した途端に16件出た。

   中身:
     長い記事タイトルが、iPhone で5〜6行、desktop でも5行になる。
     desktop では画面の35%をタイトルが占め、本文が最初の画面に1行も入らない。

   ⚠️ タイトルの語は変えない。検索での意味を持っているものを、
      行数の都合で削らない。直すのは**寸法**だけ。

   刷新で Bebas（超圧縮）から Poppins へ移ったぶん、同じ級数でも横に伸びる。
   そのぶんを級数で戻す。
------------------------------------------------------------------ */
.article-title {
  font-size: clamp(27px, 4.6vw, 46px) !important;
  line-height: 1.1 !important;
}

/* ------------------------------------------------------------------
   記事末の誘い見出しが、スマホで5行になる（2026-09-11）

   28px 固定・字間 0.05em の大文字が、390px の画面で5行になる。
   字間は Bebas（超圧縮）に合わせて足したもので、Poppins では
   ただ横に広げるだけになっている。級数と字間の両方を戻す。
------------------------------------------------------------------ */
.article-cta h3 {
  font-size: clamp(20px, 4.4vw, 26px) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.25 !important;
}

/* ------------------------------------------------------------------
   ブログ一覧のタグが、その札の色に対して読めない（2026-09-11）

   「PLANNING」「DINING」などの小さな札。
   字 #2563EB / 地 rgb(242,238,231) で **4.47:1**。要る 4.5:1 にわずかに届かない。

   ⚠️ **これまでの contrast-check は 0 件と言っていた。**
      あちらは字の要素の背景をさかのぼるとき `background-color` しか見ず、
      半透明の札（rgba(37, 99, 235,0.1)）を敷いた上でどう見えるかまでは
      追っていなかった。button-ink.mjs で別に測って出てきた。

   色だけ直しても読みやすくはならない。**9px の大文字に字間 0.2em** が
   同じくらい効いている。両方戻す。

   ⚠️ --brand そのものは触らない。全ページの青が動く。ここだけ。
------------------------------------------------------------------ */
.card-tag {
  color: #1D4ED8 !important;   /* 5.80:1 */
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}


/* ═══ ヒーローを面いっぱいの動画にする（index だけ）════════════════

   ⚠️ **`.hero` に直接書かない。** `.hero` は index / itineraries / circle /
      partners / blog-casestudies の5ページで共有している。
      全面動画にしたいのは index だけなので、`hero--video` の印の下にだけ置く。

   ⚠️ 上の `.hero{...!important}` を上書きするため、`.hero.hero--video` と
      2つ重ねている（同じ重さだと !important どうしで並び順の勝負になり、
      ファイルを分けた日に負ける）。
   ═══════════════════════════════════════════════════════════════ */
.hero.hero--video {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  /* 読み込むまでの地。白いままだと一瞬光る */
  background: #12100e !important;
  padding: 104px var(--os-page) 72px !important;
}

.hero--video .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* ⚠️ 16:9 を縦長の画面へ切ると、既定の中央では人が端へ逃げる。少し右へ */
  object-position: 55% center;
  z-index: 0;
  /* 枠の丸みは面いっぱいでは要らない（角が画面の端に触れる） */
  border-radius: 0;
  aspect-ratio: auto;
}

/*
  ⚠️ 膜（scrim）。**文のある左側だけ**を暗くする。
     全面を暗くすると動画が沈み、何も敷かないと字が読めない。
     濃さは実測で決める（css だけ見て決めない）。
*/
.hero--video .hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(10,10,10,0.88) 0%,
      rgba(10,10,10,0.78) 34%,
      rgba(10,10,10,0.42) 58%,
      rgba(10,10,10,0.18) 78%,
      rgba(10,10,10,0.10) 100%);
}
/* 上下にも少しだけ。ヘッダーの字と、下の帯との境で沈まないように */
.hero--video .hero-scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.45) 0%, transparent 26%, transparent 74%, rgba(10,10,10,0.40) 100%);
}

/*
  ⚠️ **狭い画面は掛け方そのものを変える（実測で分かった）。**

     広い画面の膜は「左から右へ」効かせている。文が左半分に収まるからで、
     これは 1440px / 1024px では足りていた（説明文 6.9:1 / 5.1:1）。

     ところが 390px では文が画面の幅いっぱいに広がるので、右側まで文が来る。
     そこは膜が薄く、**説明文が 3.41:1（要 4.5）で読めなかった**。
     横方向の濃さを上げると、広い画面で動画が沈む。

     狭い画面だけ、上から下へ落ちる濃い膜に差し替える。
     文は上寄りなので、上を濃く・下を薄くすれば動画は下半分で見える。
*/
/*
  ⚠️ 切り替えを 899px → 1099px へ上げた（2026-09-13）。

     見出しを 76px → 104px に大きくしたら、文が右へ伸びて
     **1024px で見出しが 2.74:1（要 3）まで落ちた**。
     横方向の膜は「文が左半分に収まる」前提なので、文が広がると効かなくなる。
     器（hero-copy）が 760px ある以上、1024px では画面の 74% を文が占める。
     そこは狭い画面と同じ扱いにする。
*/
@media (max-width: 1099px) {
  .hero--video .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(10,10,10,0.86) 0%,
      rgba(10,10,10,0.82) 46%,
      rgba(10,10,10,0.62) 68%,
      rgba(10,10,10,0.34) 100%);
  }
  .hero--video .hero-scrim::after { background: none; }
}

.hero--video .hero-inner {
  position: relative; z-index: 1;
  grid-template-columns: 1fr !important;
  width: 100%;
}
/*
  ⚠️ **面いっぱいになったぶん、文も大きくする（2026-09-13・Tomの指示）。**

     写真カードだった頃の寸法（見出し 76px / 説明 16px / 札 11px）は、
     左半分に収まる前提で決めてあった。いまは高さ 100svh の面の左に
     文だけが乗るので、同じ寸法だと**広い面に小さな文が置いてある**形に見える。

     上げる先は器から決める。1440px で器は 760px、-0.03em の字送りなので
     「Experience」（10文字）が1行に収まる上限はおよそ 104px（実測して確かめる）。

  ⚠️ 器も一緒に広げる。文だけ大きくすると折り返しが変わって
     「Experience」が2行に割れる。
*/
.hero--video .hero-copy { max-width: 760px; }

.hero--video .hero-title {
  font-size: clamp(46px, 8.4vw, 104px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 26px !important;
}
.hero--video .hero-sub {
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.6 !important;
  max-width: 40ch !important;
  margin-bottom: 34px !important;
}
.hero--video .hero-tag {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  padding: 9px 22px !important;
  margin-bottom: 26px !important;
}

/*
  ⚠️ **暗い地のヒーローは、動画だけではない**（2026-09-16）。
     この節は `.hero--video` しか見ていなかったので、写真の暗いヒーロー
     （/transport）が仲間に入れず、黒い字が暗い写真に乗って
     実測 1.00:1（＝字と地が同じ色）になっていた。
     地が暗いかどうかは、中身が動画か写真かとは関係がない。
     `.hero--dark` を同じ扱いにして、次に暗いヒーローを作る人が
     ここを探さずに済むようにする。
  ⚠️ 足したのは**選択子だけ**。この札を持たないページは1ピクセルも変わらない。


  ⚠️ 地が暗くなったので、**文字を全部見直す**。
     OS の指定は黒地を想定していない（--os-ink は黒）。
     ここで白へ置き直さないと、黒い字が暗い動画の上に乗って消える。
*/
.hero--video .hero-title,
.hero--dark .hero-title,
.hero--video .hero-title .gold,
.hero--dark .hero-title .gold {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.hero--video .hero-sub,
.hero--dark .hero-sub { color: rgba(255,255,255,0.88) !important; }
.hero--video .hero-tag,
.hero--dark .hero-tag {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}
.hero--video .hero-location,
.hero--dark .hero-location { color: rgba(255,255,255,0.72) !important; }

/* ⚠️ 白い枠のボタンは暗い地で 3:1 を割る。白く塗って字を黒にする */
.hero--video .btn-pill-outline {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--os-ink) !important;
}

/* ═══ 動画のヒーローの上では、帯を透明にする（index だけ）═══════

   ⚠️ **`nav` に直接書かない。** この帯は54ページ全部で同じものを使っている。
      透明でいられるのは、うしろが暗い動画のときだけ。
      `body:has(.hero--video)` で、そのページだけに限る。

   ⚠️ 透明にしたら、**中の字を全部見直す**。
      OS の指定は白い帯を前提にしていて（--os-ink は黒）、
      地だけ透明にすると黒い字が暗い動画の上に乗って消える。
      直す先は5つ: 看板・行き先・言語・Client login・Book now。

   ⚠️ `:not([data-sg-stuck])` を付ける。ヒーローを抜けたら白い帯へ戻り、
      そこからは元の黒い字に戻る（js/staygo-os.js が境目を決めている）。
   ═══════════════════════════════════════════════════════════ */
body:has(.hero--video) nav:not([data-sg-stuck]) {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
body:has(.hero--video) nav:not([data-sg-stuck]) .nav-logo,
body:has(.hero--video) nav:not([data-sg-stuck]) .nav-logo span,
body:has(.hero--video) nav:not([data-sg-stuck]) .nav-links a,
body:has(.hero--video) nav:not([data-sg-stuck]) .lang-btn,
body:has(.hero--video) nav:not([data-sg-stuck]) .nav-client {
  color: #fff !important;
}
/* ⚠️ 影を1枚敷く。動画の明るい所を横切っても字が消えないように */
body:has(.hero--video) nav:not([data-sg-stuck]) .nav-logo,
body:has(.hero--video) nav:not([data-sg-stuck]) .nav-links a,
body:has(.hero--video) nav:not([data-sg-stuck]) .lang-btn,
body:has(.hero--video) nav:not([data-sg-stuck]) .nav-client {
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.55);
}
/* 言語の枠も白側へ */
body:has(.hero--video) nav:not([data-sg-stuck]) .lang-btn {
  background: rgb(255 255 255 / 0.12) !important;
  border-color: rgb(255 255 255 / 0.38) !important;
}
/*
  ⚠️ Book now は黒の塗り。暗い動画の上では「押せるもの」の輪郭が消える。
     白く塗って字を黒にする（白と動画の境目のほうが確実に立つ）。
*/
body:has(.hero--video) nav:not([data-sg-stuck]) .nav-cta {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--os-ink) !important;
  text-shadow: none !important;
}

/*
  ⚠️ **三本線が見えなくなっていた**（2026-09-14・Tom の指摘・スマホ）。

     帯を透明にしたとき、中の字は白に返したが、`.hamburger span` を
     入れ忘れていた。線は `var(--os-ink)`（#111113）のまま、
     裏は動画（実測の平均 rgb(9,10,9)）。**濃さ比 1.05:1。**
     黒地に黒なので、画面写真を見ても「そこに何も無い」としか見えず、
     押しどころが1つも無いページに見える。

     字と違って線は色の指定が `background` なので、
     `color: #fff` を配っても当たらない。**別に書く。**

  ⚠️ 動画は明るいコマもある。影を1枚敷いて、白いコマでも線が残るようにする。
*/
body:has(.hero--video) nav:not([data-sg-stuck]) .hamburger span {
  background: #fff !important;
  box-shadow: 0 0 6px rgb(0 0 0 / 0.65);
}

/*
  ⚠️ **引き出しを開くと、上の帯だけ暗い面のままだった。**

     引き出しは白い面（--os-surface）なのに、帯は「動画の上」の見た目を
     続けていたので、ロゴも EN も白。**白い面に白。濃さ比 1:1。**
     開いている間だけは、動画は1ピクセルも見えていない。
     帯の中身を明るい面の色へ戻す。

  ⚠️ 帯は引き出しより上に描かれている（実測: 帯の位置で拾える要素は
     .nav-logo）。つまり隠れてくれないので、色は自分で直すしかない。
*/
body:has(.mobile-menu.open) nav .nav-logo,
body:has(.mobile-menu.open) nav .nav-logo span,
body:has(.mobile-menu.open) nav .nav-links a,
body:has(.mobile-menu.open) nav .lang-btn,
body:has(.mobile-menu.open) nav .nav-client,
body:has(.page-mobile-menu.open) nav .nav-logo,
body:has(.page-mobile-menu.open) nav .nav-logo span,
body:has(.page-mobile-menu.open) nav .lang-btn,
body:has(.blog-mobile-menu.open) nav .nav-logo,
body:has(.blog-mobile-menu.open) nav .nav-logo span,
body:has(.blog-mobile-menu.open) nav .lang-btn {
  color: var(--os-ink) !important;
  text-shadow: none !important;
}
body:has(.mobile-menu.open) nav .nav-logo span,
body:has(.page-mobile-menu.open) nav .nav-logo span,
body:has(.blog-mobile-menu.open) nav .nav-logo span { color: var(--os-accent) !important; }
body:has(.mobile-menu.open) nav .lang-btn,
body:has(.page-mobile-menu.open) nav .lang-btn,
body:has(.blog-mobile-menu.open) nav .lang-btn {
  background: rgb(17 17 19 / 0.05) !important;
  border-color: var(--os-border) !important;
}
body:has(.mobile-menu.open) nav .hamburger span,
body:has(.page-mobile-menu.open) nav .hamburger span,
body:has(.blog-mobile-menu.open) nav .hamburger span {
  background: var(--os-ink) !important;
  box-shadow: none !important;
}
/* 開いている間は、帯も引き出しと同じ明るい面に立たせる */
body:has(.mobile-menu.open) nav,
body:has(.page-mobile-menu.open) nav,
body:has(.blog-mobile-menu.open) nav {
  background: var(--os-surface) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/*
  申し込みの覆い（Begin planning）の角。2026-09-14・Tomの指示。
  ⚠️ **この5ページ（index / ja / zh / fr / es）は同じ覆いを各ページの
     インライン <style> に持っている。** そこを直すと5か所へ同じ手を入れる
     ことになり、次に build-langs.py で言語版を作り直した日にずれる。
     共有のこのファイルに1回だけ書く。
  ⚠️ インラインの `.modal-form input` は `border-radius:0` を持っている。
     こちらは後ろで読まれるので詰まりはしないが、他所の !important と
     並べて読めるようにこのファイルの書き方に合わせる。
  送信ボタンは上の `.modal-form button[type="submit"]` で既にピル。触らない。
*/
.modal-box {
  border-radius: var(--os-radius-card) !important;
}
.modal-form input, .modal-form select, .modal-form textarea {
  border-radius: var(--os-radius-control) !important;
}
/*
  題を太く。⚠️ 800 は積んでいない重さなので使わない
  （ブラウザが偽の太字を作ってにじむ）。self-host しているのは 400/500/600/700/800 のうち
  ここでは 700。fonts/SOURCE.md を見ること。
*/
.modal-title { font-weight: 700 !important; }

/* ═══════════════════════════════════════════════════════════════
   下に出るもの2つ（2026-09-14・Tomの指示）
     ① クッキーの同意
     ② 相談の窓（右下からポンと上がってくる）
   ═══════════════════════════════════════════════════════════════

   ■ どちらも JS が作る
     ⚠️ HTML に書かない。63ページに同じ markup を配ると、次に1枚だけ
        直し忘れた日に、そのページだけ古い文言と古い動きで残る。
        ここは形だけを持ち、中身と出し入れは js/staygo-os.js が持つ。

   ■ 隠すのは「JSが札を立てたときだけ」の原則の外に置く
     ⚠️ この2つは**JSが作った要素**なので、JS が動かなければ最初から
        存在しない。本文が消える事故（このファイルの冒頭の決めごと）は
        起きない。だから素の CSS で透明にしてよい。

   ■ 場所
     同意は左下、窓は右下。重ならない。
     狭い画面では同意が下いっぱいに出るので、そのぶん窓を持ち上げる
     （--sg-lift。JS が同意の高さを入れる）。
*/

:root { --sg-lift: 0px; }

/* ── 共通の面 ───────────────────────────────────────────────── */
.sg-sheet {
  background: var(--os-surface);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-card);
  box-shadow: var(--os-shadow-card), 0 18px 48px rgb(17 17 19 / 0.10);
  font-family: var(--os-font);
  color: var(--os-ink);
}

/* ── ① クッキーの同意 ───────────────────────────────────────── */
.sg-consent {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 240;              /* 帯(200)より上・引き出し(250)と覆い(1000)より下 */
  width: min(420px, calc(100vw - 48px));
  padding: 20px 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--os-motion) var(--os-ease),
              transform var(--os-motion) var(--os-ease);
}
.sg-consent.is-in { opacity: 1; transform: none; }
.sg-consent h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--os-ink);
}
.sg-consent p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--os-ink-muted);
}
.sg-consent p a { color: var(--os-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.sg-consent-row { display: flex; flex-wrap: wrap; gap: 8px; }
/*
  ⚠️ 「受け入れる」と「断る」を**同じ重さ**にする。
     断るほうを薄い字だけにすると、押せることが分かりにくい形になる。
     これは同意の取り方としてやってはいけない側。
*/
.sg-btn {
  appearance: none;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: var(--os-radius-pill);
  border: 1px solid var(--os-border-strong);
  background: var(--os-surface);
  color: var(--os-ink);
  font-family: var(--os-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--os-motion) var(--os-ease),
              border-color var(--os-motion) var(--os-ease);
}
.sg-btn:hover { background: var(--os-surface-2); }
.sg-btn-primary {
  background: var(--os-surface-ink);
  border-color: var(--os-surface-ink);
  color: #fff;
}
.sg-btn-primary:hover { background: #000; }
.sg-btn:focus-visible,
.sg-chat-launch:focus-visible,
.sg-chat-x:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 2px; }

/* 足元から開き直すための、小さな行き先 */
.sg-consent-reopen {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  /*
    ⚠️ 色を決め打ちしない。**この行き先は63ページの footer に入る。**
       足元の面は暗い（#141416）ページも明るいページもある。
       `--os-ink-subtle`（#6b6b73）を当てたら、暗い面で 3.54:1 しか無かった
       （2026-09-14 実測。基準は 4.5:1）。周りの字の色をそのまま継ぐ。
       その色は、その面で読めるようにページ側が既に決めているもの。
  */
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: var(--os-font);
}

/* ── ② 相談の窓 ─────────────────────────────────────────────── */
.sg-chat-launch {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--sg-lift));
  z-index: 240;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--os-surface-ink);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--os-shadow-card), 0 10px 28px rgb(17 17 19 / 0.18);
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity var(--os-motion) var(--os-ease),
              transform var(--os-motion) var(--os-ease),
              bottom var(--os-motion) var(--os-ease);
}
.sg-chat-launch.is-in { opacity: 1; transform: none; }
.sg-chat-launch svg { width: 24px; height: 24px; }

/* 先に一言だけ出す札。押すと窓が開く */
.sg-chat-peek {
  position: fixed;
  right: 24px;
  bottom: calc(96px + var(--sg-lift));
  z-index: 240;
  width: min(300px, calc(100vw - 48px));
  padding: 16px 40px 16px 18px;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--os-motion) var(--os-ease),
              transform var(--os-motion) var(--os-ease),
              bottom var(--os-motion) var(--os-ease);
}
.sg-chat-peek.is-in { opacity: 1; transform: none; }
.sg-chat-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--os-ink-subtle);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.sg-chat-x:hover { background: var(--os-surface-2); color: var(--os-ink); }
.sg-chat-x svg { width: 14px; height: 14px; }

.sg-chat {
  position: fixed;
  right: 24px;
  bottom: calc(96px + var(--sg-lift));
  z-index: 245;
  width: min(384px, calc(100vw - 32px));
  /* ⚠️ dvh で測る。スマホの住所欄が出入りすると vh はずれたままになる */
  height: min(560px, calc(100dvh - 140px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--os-motion) var(--os-ease),
              transform var(--os-motion) var(--os-ease);
}
.sg-chat.is-in { opacity: 1; transform: none; }

.sg-chat-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--os-border);
}
/*
  窓の頭の印。
  ⚠️ 「ST」という**字**を置かない（2026-09-14・Tomの指摘）。書体が違えば形も
     変わるし、そもそも看板と別物に見える。看板と同じベクターを敷く。
*/
.sg-chat-mark {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--os-surface-ink);
  display: grid; place-items: center;
}
.sg-chat-mark::before {
  content: ""; display: block;
  width: 18px; height: 17px;
  background-color: #fff;
  -webkit-mask: var(--sg-logo) center / contain no-repeat;
          mask: var(--sg-logo) center / contain no-repeat;
}
.sg-chat-who { min-width: 0; }
.sg-chat-who b { display: block; font-size: 14px; font-weight: 600; }
/* ⚠️ 「いつでも居ます」とは書かない。書ける場所ではないし、事実でもない */
.sg-chat-who span { display: block; font-size: 12px; color: var(--os-ink-subtle); }
.sg-chat-head .sg-chat-x { position: static; margin-left: auto; }

.sg-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sg-bub {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: var(--os-radius-control);
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.sg-bub-them { align-self: flex-start; background: var(--os-surface-2); color: var(--os-ink); border-bottom-left-radius: 6px; }
.sg-bub-me { align-self: flex-end; background: var(--os-surface-ink); color: #fff; border-bottom-right-radius: 6px; }
.sg-bub-note { align-self: stretch; max-width: none; background: none; padding: 2px 0; font-size: 12px; color: var(--os-ink-subtle); }
.sg-bub-note a { color: var(--os-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

.sg-chat-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--os-border);
  padding: 12px;
}
.sg-chat-ask { margin: 0 0 8px; font-size: 12px; color: var(--os-ink-subtle); }

/*
  押すだけで答えられる返し。
  ⚠️ **自由に書く欄より目立たせない。** 目立たせると、いちばん中身の濃い
     自由文が来なくなる。ここは「書くのが面倒な人の逃げ道」であって、
     こちらが選ばせたい選択肢ではない。
  ⚠️ 空のときは何も置かない（:empty で余白ごと消す）。
*/
.sg-chat-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sg-chat-quick:empty { display: none; }
.sg-chat-chip {
  /* ⚠️ 指で押せる高さを確保する（36px + 余白で 44px の当たりになる） */
  min-height: 36px;
  padding: 8px 14px;
  font: 400 13px/1.3 var(--os-font);
  color: var(--os-ink);
  background: var(--os-surface);
  border: 1px solid var(--os-border-strong);
  border-radius: 999px;
  cursor: pointer;
}
.sg-chat-chip:hover { background: var(--os-surface-2); }
.sg-chat-chip:focus-visible { outline: 2px solid var(--os-ink); outline-offset: 2px; }

.sg-chat-bar { display: flex; align-items: flex-end; gap: 8px; }
.sg-chat-bar textarea,
.sg-chat-bar input {
  flex: 1 1 auto;
  min-width: 0;
  /* ⚠️ 16px を下回らせない。iOS は小さい字の欄を押すと画面ごと拡大する */
  font: 400 16px/1.5 var(--os-font);
  color: var(--os-ink);
  background: var(--os-surface-2);
  border: 1px solid transparent;
  border-radius: var(--os-radius-control);
  padding: 11px 13px;
  resize: none;
  max-height: 132px;
  outline: none;
}
.sg-chat-bar textarea:focus, .sg-chat-bar input:focus { border-color: var(--os-border-strong); }
.sg-chat-send {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--os-surface-ink);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
}
.sg-chat-send[disabled] { background: var(--os-surface-2); color: var(--os-ink-subtle); cursor: not-allowed; }
.sg-chat-send svg { width: 18px; height: 18px; }

/* ── 狭い画面 ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .sg-consent { left: 16px; right: 16px; bottom: 16px; width: auto; }
  .sg-chat-launch { right: 16px; bottom: calc(16px + var(--sg-lift)); }
  .sg-chat-peek { right: 16px; bottom: calc(84px + var(--sg-lift)); }
  .sg-chat {
    right: 16px; left: 16px; width: auto;
    bottom: calc(16px + var(--sg-lift));
    height: min(560px, calc(100dvh - 120px));
  }
}

/* ⚠️ 動きを減らす設定の人には、位置だけ決めて動かさない（消さない） */
@media (prefers-reduced-motion: reduce) {
  .sg-consent, .sg-chat, .sg-chat-peek, .sg-chat-launch {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   和文・中文の見出しが、欧文より細く見える（2026-09-16・Tomの指摘）

   ■ 何が起きているか

     見出しの書体は Poppins（インラインCSSには Bebas Neue と書いてあるが、
     ここで上書きされているので効いていない）。どちらもラテン専用で、
     日本語・中国語の字を持たない。CJK は --os-font の後ろにある
     Hiragino Sans へ落ちる。**そこで太さも落ちる。**

     同じ font-weight:700 でも、Poppins の 700 は太く、
     Hiragino の 700 は W6（中太）で描かれる。
     つまり**同じ指定なのに、読む言語によって太さが変わる**。
     英語のページだけ見ていると、最後まで気づけない。

   ■ どこに当てるか（測ってから決めた）

     手元の10ページを描いて、CJKの字が weight>=600 で出ている箇所を数えた。
     24px 以上の大きい見出しは 14 種。すべて h1/h2/h3 か、下に並べた札。
     ⚠️ **小さいラベル（11〜16px）は対象にしない。** そちらを W8 にすると
        字が潰れて、かえって読みにくくなる。

     ⚠️ **CJKの h1/h2/h3 で weight<600 のものは 0 件**だったので、
        一律に上げても意図的に細い見出しを潰さない。
        今後わざと細いCJK見出しを足すなら、そこで個別に戻すこと。

   ■ 欧文は1ミリも触らない
     :lang() で CJK のときだけ当てる。
------------------------------------------------------------------ */
/*
  ⚠️ **!important が要る。** この共有CSSは .hero-title などへ
     font-weight:700 !important を当てている。付けないと当たらない
     （実際、最初に付けずに当てたら大見出しだけ 700 のまま残った）。
  ⚠️ h3 は**一律に上げない**。記事の中の h3 は 11〜13px の小さな見出しで、
     そこを W8 にすると字が潰れる。大きい h3 は下の札で名指しする。
*/
:lang(ja) :is(h1, h2, h3, .hero-title, .section-title, .about-title, .about-hero-title,
              .about-cta-title, .about-promise-quote, .sns-title, .flat-fee-title,
              .promise-title, .testimonial-title, .story-title, .blog-title,
              .card-title, .modal-title, .plan-price, .step-title, .value-title,
              .founder-name, .jp-h1, .jp-name, .article-title, .article-cta h3),
:lang(zh) :is(h1, h2, h3, .hero-title, .section-title, .about-title, .about-hero-title,
              .about-cta-title, .about-promise-quote, .sns-title, .flat-fee-title,
              .promise-title, .testimonial-title, .story-title, .blog-title,
              .card-title, .modal-title, .plan-price, .step-title, .value-title,
              .founder-name, .jp-h1, .jp-name, .article-title, .article-cta h3) {
  font-weight: 800 !important;
}

/* ------------------------------------------------------------------
   記事の題と節の見出しは、字間と行間も和文へ戻す

   ⚠️ 字間 0.02em / 0.05em は、欧文の詰まりを緩めるために足した値。
      もともと字間の広い和文に当てると、ただ間延びして見える。
   ⚠️ 行間に !important が要る。上の .article-title が
      line-height:1.1 !important を持っており、和文には詰まりすぎる。
------------------------------------------------------------------ */
:lang(ja) .article-title, :lang(zh) .article-title,
:lang(ja) .article-body h2, :lang(zh) .article-body h2,
:lang(ja) .article-cta h3, :lang(zh) .article-cta h3 {
  letter-spacing: 0;
}
:lang(ja) .article-title, :lang(zh) .article-title { line-height: 1.32 !important; }
:lang(ja) .article-body h2, :lang(zh) .article-body h2 { line-height: 1.5; }

/* ------------------------------------------------------------------
   小さい h3 は上げない（2026-09-16）

   ⚠️ 上の規則で h3 も 800 にした。クラスの無い 32px の見出し
      （「どう感じたいですか」など）が 700 のまま細く残っていたため。
   ⚠️ ただし記事本文の直下の h3 は 11px の小さな前置きで、
      そこを W8 にすると字が潰れる。**直下のものだけ**戻す。
      `.article-cta h3`（26px）は一段深いので、この規則には当たらない。
------------------------------------------------------------------ */
:lang(ja) .article-body > h3, :lang(zh) .article-body > h3 {
  font-weight: 700 !important;
}

/* ⚠️ 申し込みの覆いの中の小見出しも、和文だと細く見える */
:lang(ja) .modal-section-title, :lang(zh) .modal-section-title {
  font-weight: 800 !important;
}