/* ═══════════════════════════════════════════════════════════════
   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");

  /* ── 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;
}

/*
  金を当てていた字。
  ⚠️ **見出しを青で塗り分けない。** 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; }

@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; }
.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;
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.4;
  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;
}
.plan-badge {
  background: var(--os-accent) !important; color: #fff !important;
  border-radius: var(--os-radius-pill) !important; letter-spacing: 0 !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; }
/* ⚠️ 携帯では速くする（Tomの指示）。画面が狭いぶん、同じ 28s だと
      1周が長く、止まって見える。幅に対する速さを揃える */
@media (max-width: 768px) { .marquee-track { animation-duration: 14s !important; } }
@media (min-width: 769px) and (max-width: 1100px) { .marquee-track { animation-duration: 20s !important; } }
@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);
}
/* 線が届く前。⚠️ ここだけ 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; }

/* 押せないものを浮かせない。指を乗せたときは、印のまわりに淡い輪を置くだけ */
.step:hover .step-num { box-shadow: 0 0 0 5px var(--os-accent-soft) !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; }

.sns-link {
  border: 1px solid rgb(255 255 255 / 0.22) !important;
  border-radius: var(--os-radius-pill) !important;
  color: var(--os-ink) !important;
}
.sns { background: var(--os-bg-soft) !important; }
.sns-link { border-color: var(--os-border) !important; background: var(--os-surface) !important; }
.sns-link:hover { border-color: var(--os-ink) !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 {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--os-radius-media);
}
/* ⚠️ 出発地の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 { 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: 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") center / contain no-repeat;
  mask: 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") 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)）＋白い大文字の
      全画面メニューが残っていた。開いた瞬間だけ黒×金の頃の顔に戻る。
      **開いてみるまで誰も見ない場所**なので、写真を見比べても分からない。 */
.page-mobile-menu {
  background: var(--os-bg) !important;
  gap: 8px !important;
}
.page-mobile-menu a {
  color: var(--os-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  padding: 0 20px;
}
.page-mobile-menu a:hover { color: var(--os-accent) !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;
}

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

/*
  ⚠️ `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;
}