/*
  移動のページ（/transport）だけが読む1枚。2026-10-13（Tom: B「旅の場面」＋下に C「比べる表」を小さく）。
  案は prototype/transport/b.html と c.html。

  ⚠️ transport.html 以外から読まない。css/staygo-os.css には書き足さない（49ページすべてに効く）。
  ⚠️ 色・角丸・字は staygo-os.css の変数（--os-*）だけを使う。ここで :root を書かない。
  ⚠️ 左の色帯（border-left）の注意箱を戻さない（2026-10-13 に2種類なくした）。金も使わない。
  ⚠️ staygo-os.css は section の地と h1〜h5 の色を !important で白地・黒字に固定している。
     暗い写真の上の見出しだけ、下で強い指定で白に戻している。薄い面の帯は div で敷く。
  ⚠️ 押せるものは 44px 以上。小さな札（.tp-tag）は押せないので対象外。
*/

.tp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .tp-wrap { padding: 0 40px; } }
/* ⚠️ body に .tp（旅程の頁の型）が付いていて、staygo-os.css の .tp の上の余白（92/76px）が body にも乗る。
   ここで body の分を消し、上の帯（固定・PC 85px／スマホ 73px）の真下から写真を始める（2026-10-14） */
body.tp { padding-top: 0; }
.tp-main { padding-top: 73px; }
@media (min-width: 901px) { .tp-main { padding-top: 85px; } }
.tp-main img { display: block; max-width: 100%; }

.tp-h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.22; font-weight: 700; margin: 0; }
.tp-h3 { font-size: 21px; line-height: 1.3; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
.tp-h3 svg { width: 22px; height: 22px; color: var(--os-accent); flex: none; }
.tp-p { color: var(--os-ink-muted); margin: 0; font-size: 16px; line-height: 1.7; }
.tp-p strong { color: var(--os-ink); font-weight: 600; }
.tp-models { font-size: 14px; color: var(--os-ink-subtle); margin: 0; }
.tp-label { font-size: 14px; font-weight: 600; color: var(--os-ink); margin: 0 0 2px; }

/* 押しどころ: 黒いピル（青いボタンは作らない） */
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: var(--os-radius-pill);
  background: var(--os-surface-ink); color: #fff !important; text-decoration: none;
  font-weight: 600; font-size: 15px; transition: background var(--os-motion) var(--os-ease);
}
.tp-btn:hover { background: #000; }
.tp-btn svg { width: 18px; height: 18px; flex: none; }
.tp-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--os-accent-ink); font-weight: 500; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; text-align: center;
}

/* プランの札（押せない）。Signature は青の薄い面、相談は灰の面 */
.tp-tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px;
  border-radius: var(--os-radius-pill); font-size: 13px; font-weight: 600; line-height: 1.35;
  background: var(--os-accent-soft); color: var(--os-accent-ink);
}
.tp-tag--soft { background: var(--os-bg-soft); color: var(--os-ink-muted); }

.tp-photo { overflow: hidden; background: var(--os-bg-soft); }
.tp-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 車の写真は暗い。車の顔が枠の真ん中に来るように寄せる */
.tp-photo img[src*="hire-car"] { object-position: 68% 62%; }

.tp-band { background: var(--os-bg-soft); }

/* ─── 一面目 ─────────────────────────────────────────── */
/* ⚠️ 2026-10-14 Tom「画面いっぱいに」: 角丸のカードから全幅へ。.tp-wrap の外に置き、字だけ本文の左端に揃える */
.tp-hero { position: relative; overflow: hidden; margin: 0; min-height: 480px; display: flex; align-items: flex-end; background: #111113; }
.tp-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ 字の後ろを写真まかせにしない（2026-09-16 に 1.00:1 まで落ちた件）。下ほど確実に暗く */
.tp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 10 12 / 0.9) 0%, rgb(10 10 12 / 0.62) 45%, rgb(10 10 12 / 0.18) 100%); }
.tp-hero-in { position: relative; z-index: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 32px 16px; }
.tp-hero-in > * { max-width: 680px; }
@media (min-width: 900px) { .tp-hero { min-height: clamp(560px, 70vh, 720px); } .tp-hero-in { padding: 56px 40px; } }
.tp-hero-tag { color: #eaf1fe; font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.tp .tp-hero h1.tp-hero-title { color: #fff !important; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.14; font-weight: 700; margin: 0 0 14px; }
.tp-hero-sub { color: rgb(255 255 255 / 0.88); font-size: 17px; line-height: 1.65; margin: 0; }

/* 場面への入口（4つ） */
.tp-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 900px) { .tp-steps { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.tp-steps a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; height: 100%; padding: 10px 16px;
  border: 1px solid var(--os-border); border-radius: 18px; text-decoration: none; color: var(--os-ink); background: var(--os-surface);
  transition: border-color var(--os-motion) var(--os-ease);
}
.tp-steps a:hover { border-color: var(--os-border-strong); }
.tp-steps small { font-size: 13px; color: var(--os-ink-subtle); font-weight: 600; }
.tp-steps span { font-size: 15px; font-weight: 600; line-height: 1.3; }

/* ─── 場面 ───────────────────────────────────────────── */
.tp-scene { padding: 56px 0; border-top: 1px solid var(--os-border); scroll-margin-top: 88px; }
.tp-scene--first { border-top: 0; }
@media (min-width: 900px) { .tp-scene { padding: 80px 0; } }
.tp-scene-head { display: grid; gap: 8px; margin-bottom: 24px; }
@media (min-width: 900px) { .tp-scene-head { grid-template-columns: 220px 1fr; gap: 40px; align-items: baseline; } }
.tp-scene-num { font-size: 14px; font-weight: 600; color: var(--os-accent-ink); margin: 0; }
.tp-cards { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .tp-cards { grid-template-columns: 1.45fr 1fr; gap: 20px; } .tp-cards--one { grid-template-columns: 1fr; } }

.tp-card { background: var(--os-surface); border: 1px solid var(--os-border); border-radius: var(--os-radius-card); overflow: hidden; display: flex; flex-direction: column; }
.tp-card .tp-photo { aspect-ratio: 16 / 9; }
.tp-card-in { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.tp-cards--one .tp-card { display: grid; }
@media (min-width: 900px) {
  .tp-cards--one .tp-card { grid-template-columns: 1.15fr 1fr; }
  .tp-cards--one .tp-card .tp-photo { aspect-ratio: auto; min-height: 380px; height: 100%; }
  .tp-card-in { padding: 26px 28px 28px; }
}
/* 知っておくこと（前は左帯の箱。いまは見出し付きの段落） */
.tp-note { padding-top: 12px; border-top: 1px solid var(--os-border); }
.tp-note .tp-p { font-size: 15px; }

/* 標準で入るもの（場面の横に置く） */
.tp-side { background: var(--os-bg-soft); border-radius: var(--os-radius-card); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.tp-side-t { font-size: 14px; font-weight: 600; color: var(--os-ink-subtle); margin: 0; }
.tp-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tp-mini li { display: flex; gap: 12px; align-items: flex-start; }
.tp-mini svg { width: 22px; height: 22px; color: var(--os-accent); flex: none; margin-top: 2px; }
.tp-mini b { display: block; font-size: 15px; color: var(--os-ink); margin-bottom: 2px; }
.tp-mini span { font-size: 14px; line-height: 1.6; color: var(--os-ink-muted); }

/* 途中の押しどころ */
.tp-mid { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 24px; border-radius: var(--os-radius-card); background: var(--os-bg-soft); margin: 0 0 8px; }
.tp-mid .tp-p { color: var(--os-ink); font-size: 17px; font-weight: 500; }
@media (min-width: 900px) { .tp-mid { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 32px; } }

/* ─── 比べる表（小さく） ─────────────────────────────── */
.tp-cmp { padding: 56px 0 8px; scroll-margin-top: 88px; }
@media (min-width: 900px) { .tp-cmp { padding: 72px 0 8px; } }
.tp-cmp .tp-h2 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 16px; }
.tp-cmp-grid { display: grid; grid-template-columns: 130px repeat(4, 1fr); border: 1px solid var(--os-border); border-radius: 20px; overflow: hidden; background: var(--os-surface); }
.tp-cmp-grid > div { padding: 14px 16px; border-bottom: 1px solid var(--os-border); font-size: 14px; line-height: 1.55; color: var(--os-ink); }
.tp-cmp-grid > .tp-cmp-last { border-bottom: 0; }
.tp-cmp-grid .rh { font-size: 13px; font-weight: 600; color: var(--os-ink-subtle); background: var(--os-bg-soft); }
.tp-cmp-grid .col { border-left: 1px solid var(--os-border); }
.tp-cmp-grid .ch { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.tp-cmp-grid .ch svg { width: 20px; height: 20px; color: var(--os-accent); flex: none; }
.tp-cmp-cards, .tp-cmp-hint { display: none; }

/* スマホ: 表をやめて1枚ずつ横に送る */
@media (max-width: 899px) {
  .tp-cmp-grid { display: none; }
  .tp-cmp-hint { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 8px; font-size: 14px; color: var(--os-ink-subtle); }
  .tp-cmp-dots { display: flex; }
  .tp-cmp-dots button { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
  .tp-cmp-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--os-border-strong); opacity: .45; }
  .tp-cmp-dots button[aria-current="true"]::before { background: var(--os-ink); opacity: 1; }
  .tp-cmp-cards {
    display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 8px; margin: 0 -16px;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .tp-cmp-cards::-webkit-scrollbar { display: none; }
  .tp-cmp-card { scroll-snap-align: center; border: 1px solid var(--os-border); border-radius: 20px; background: var(--os-surface); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
  .tp-cmp-card .ch { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--os-ink); }
  .tp-cmp-card .ch svg { width: 20px; height: 20px; color: var(--os-accent); flex: none; }
  .tp-cmp-card dl { margin: 0; display: grid; gap: 10px; }
  .tp-cmp-card dt { font-size: 13px; font-weight: 600; color: var(--os-ink-subtle); }
  .tp-cmp-card dd { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--os-ink); }
}

/* ─── お支払い ───────────────────────────────────────── */
.tp-pay { display: grid; gap: 20px; padding: 56px 0; }
@media (min-width: 900px) { .tp-pay { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding: 72px 0 88px; } }
.tp-kicker { font-size: 14px; font-weight: 600; color: var(--os-accent-ink); margin: 0 0 8px; }
.tp-pay .tp-h2 { margin-bottom: 12px; }
/* 前は左帯の箱。いまは薄い面の札 */
.tp-pay-tiers { background: var(--os-bg-soft); border-radius: var(--os-radius-card); padding: 22px 24px; display: flex; gap: 12px; align-items: flex-start; }
.tp-pay-tiers svg { width: 22px; height: 22px; color: var(--os-accent); flex: none; margin-top: 3px; }
.tp-pay-tiers p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--os-ink); }

/* ─── 最後の押しどころ ───────────────────────────────── */
.tp-cta { text-align: center; padding: 64px 0 72px; }
@media (min-width: 900px) { .tp-cta { padding: 96px 0; } }
.tp-cta .tp-h2 { margin-bottom: 12px; }
.tp-cta .tp-p { max-width: 52ch; margin: 0 auto 28px; }
.tp-cta-links { display: flex; flex-direction: column; align-items: center; gap: 8px; }