/* ============================================================
My Trip Dashboard v5 — style.css
パターンC: レトロトラベルポスター調（ボールドポップ）
1950-70年代 国立公園ポスター × トラベルステッカー
クリーム地 × 濃紺 × トマト赤 × マスタード黄 × フォレスト緑
CSS変数・8pxグリッド（4px刻み）・グラデ禁止（単色ベタ）
============================================================ */
/* ===== CSS変数 ===== */
:root {
/* レトロパレット（彩度高め・トーン統一） */
--cream: #f6ead2;
--cream-deep: #ecdcb9;
--paper: #fcf4e1;
--ink: #1e3a5f; /* 濃紺（単色。グラデにしない） */
--ink-deep: #14293f;
--tomato: #d94f30;
--tomato-deep: #b23e24;
--mustard: #e8a33d;
--mustard-deep: #c07f1d;
--mustard-soft: #f7e3bd;
/* ベース（旧変数名を維持しつつレトロ値に差し替え） */
--bg: var(--cream);
--card: var(--paper);
--border: #e0d0ac; /* 細罫線（区切り用の淡いタン） */
--text: #26364a;
--text-sub: #51565e;
--text-muted: #7c7666;
--text-muted-strong: #6b6556; /* cream/paper地でも4.5:1を満たす控えめグレー */
--white: #fffaf0; /* 温かみのある白（ベタ塗り上の文字用） */
/* ブランド（フォレスト緑基調は維持） */
--accent: #2d6a4f;
--accent-light: #dcead2;
--accent-mid: #40916c;
--accent-dark: #1b3a2d;
--green-light: var(--accent-light);
--green: var(--accent);
/* アラート・状態色（緊急系の赤は視認性最優先で維持） */
--alert-lv0-bg: var(--paper);
--alert-lv1-bg: #faeac2;
--alert-lv1-border: var(--mustard-deep);
--alert-lv2-bg: #fbe4dc;
--alert-lv2-border: #d43d2a;
--warn-text: #7c5200;
--danger: #c62828;
--danger-deep: #8e1c1c; /* 緊急ボタンの縁・影（装飾のトマト赤と混同させない） */
--danger-bg: #fdeae6;
--danger-text: #7a2020;
--danger-calm: #b1544e; /* もしもの時カードの縁・ヘッダー・見出し用の落ち着いた赤（彩度控えめ） */
--winter-bg: #ddedf6;
--winter-border: #29618f;
--winter-text: #14405e;
--temp-day: #c0392b;
/* 外部ブランド色（彩度を15〜20%落とした落ち着いたトーン。レトロ地に馴染ませる） */
--line: #06C755;
--line-soft: #297d4d; /* LINE緑を鈍らせた版（白文字で4.5:1確保／ボタン地） */
--instagram: #E1306C;
--ig-soft: #b8476b; /* IGマゼンタを鈍らせた版（白文字で4.5:1確保／単色・グラデにしない） */
/* 装飾ワンポイント */
--star: #c07f1d;
--star-gold: #f2c14e;
--tag-orange-bg: #f9e0c8;
--tag-orange-text: #a34a08;
--tag-gray-bg: #eae2cf;
--bath-bg: #e2ede6;
--bath-text: #1a4a3a;
/* マップ凡例（Googleマイマップのピン色に対応） */
--map-camp: var(--accent);
--map-onsen: var(--alert-lv2-border);
--map-food: #43a047;
--map-super: #fb8c00;
--map-gas: #8e24aa;
--map-spot: #00897b;
/* 形状・寸法 */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-full: 100px;
--shadow: 3px 3px 0 var(--ink); /* ベタ塗りオフセットシャドウ（1段のみ） */
--shadow-sm: 2px 2px 0 var(--ink);
--header-h: 56px;
--tap-min: 44px;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
/* 「数字を主役にする箇所」専用フォント（カウントダウン・気温・順番の番号・券面の英数字など）。
ラテン数字は OS標準SF/Segoe で描き、英語のかっこいい数字書体に全言語で統一する。
日/英は既定システム体でそのまま英数字がSFになる。繁體字のみ下でCJKフォールバック(Noto)を足す
（＝数字はSF・漢字はNotoの混在描画にする）。本文中の数字は各言語の本文フォント(--font)のまま。 */
--font-num: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* 日本語UI（テスト環境のみ）は、繁体字フォント(JhengHei / Noto Sans TC)を外し
OS標準の日本語フォントに委ねる。これが以前 surge に上げていた版と同一スタックで、
句読点(、。)の字形・位置も当時の見た目に一致する。
※既定スタックに繁体字フォントを含めた結果、lang="ja"でもそれらが日本語グリフを
先取りして中国語字形に化けていた。ここで明示的に外して元に戻す。 */
html[lang="ja"] {
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* 繁體字UI: 自前配信の Noto Sans TC（可変フォント・使用字だけにサブセット済み341KB）を最優先に。
端末標準の繁體字フォント（PingFang TC=最大600 / 微軟正黑=700止まり）は極太フェイスを持たず、
見出しの font-weight:800/900 が本文400に対して太くならず階層が弱かった。可変フォントなら
本文400も見出し800/900も“本物の太さ”で描け、全端末で同一の見た目になる（OFL・自己ホスト）。 */
@font-face {
font-family: 'NotoSansTCSub';
src: url('../assets/font/notosanstc-sub.woff2') format('woff2');
font-weight: 100 900; /* 可変軸 wght を丸ごと保持 */
font-style: normal;
font-display: swap;
}
html[lang="zh-Hant"],
body [lang="zh-Hant"] {
--font: 'NotoSansTCSub', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
/* 見出し・大きな数字はラテン(SF)を先頭に、CJKは Noto にフォールバック。
→ 数字だけ英語と同じSF書体になり、同じ要素内の漢字は Noto のまま＝混在しても破綻しない。 */
--font-num: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'NotoSansTCSub', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
}
/* i18n適用前の終端画面（renderAccessError）やguides読込失敗カードは のまま
EN+繁中を併記するため、繁中要素側に lang="zh-Hant" を付けて同じフォント規則を効かせる。
CSS変数は継承値の再評価を起こさないので、font-family を要素自身で明示的に引き直す必要がある */
body [lang="zh-Hant"] { font-family: var(--font); }
/* 繁體字のみ: 折り返しを句読点（，。！？——等）の直後だけに制限し「意味のまとまり」で折る。
幅いっぱいの機械折りだと文の途中でブツ切れて読みにくい、というテツさん指摘（2026-07-19）への対応。
- word-break: keep-all … 漢字の連なりを1語扱いにして途中で折らない（＝折れ目は句読点の直後だけになる）
- line-break: strict … 行頭の句読点・閉じカッコ等の禁則を厳格化
- overflow-wrap: anywhere … 句読点まで届かない長い節だけ緊急折りして溢れを防ぐセーフティ
英語（スペース折りで元々問題なし）・日本語（句読点間隔が長く不向き）には適用しない。 */
html[lang="zh-Hant"] body,
body [lang="zh-Hant"] {
word-break: keep-all;
line-break: strict;
overflow-wrap: anywhere;
}
/* ===== リセット・ベース ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
max-width: 480px;
margin: 0 auto;
min-height: 100vh;
}
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
.nb { white-space: nowrap; } /* 単語の途中で折り返させない（見出しの1文字孤立防止） */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
/* バナーCTA等のアンカー移動先が sticky ヘッダー＋タブに隠れないようにする */
.emergency-card, .drive-card, .info-card, .manners-card, .camp-pdf, .luggage-card {
scroll-margin-top: calc(var(--header-h) + 64px);
}
/* ===== マイクロインタラクション ===== */
/* タブ切替: 素早いスライド */
@keyframes tab-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
/* カード出現: scale(0.97)→1 のポップイン */
@keyframes pop-in {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
/* サンバーストの脈打ち（回転はさせない・控えめに） */
@keyframes sun-pulse {
0%, 100% { opacity: 0.40; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.02); }
}
/* ===== デモ／APIモードバナー ===== */
.mode-banner {
display: none;
padding: 8px 16px;
font-size: 12px;
text-align: center;
letter-spacing: 0.03em;
line-height: 1.4;
}
.mode-banner--demo {
display: block;
background: var(--ink-deep);
color: rgba(255,250,240,0.85);
}
/* ===== 公開デモ（/demo）: 告知＋予約CTA（SAMPLE消印の絵葉書カード） =====
搭乗券・クーポンと同じ「紙地＋濃紺2px枠＋1段オフセット影」の意匠で統一。
濃紺帯だと下のヒーローに溶け緑CTAも影も沈むため、明るい紙地カードにして立たせる。 */
/* hidden属性を確実に優先（display:flex が [hidden] を打ち消して /test/・本番に漏れる不具合対策）。 */
.demo-cta[hidden] { display: none !important; }
.demo-cta {
/* 他カード(混雑カード等)と同じ左右16pxマージン＋控えめ余白で、幅・大きさを揃える
（以前は全幅＋広い余白で1枚だけ大きく見えていた）。 */
margin: 12px 16px;
padding: 14px 16px 16px;
background: var(--paper);
color: var(--text);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
/* SAMPLE 消印スタンプ（ベタ枠のみ・画像なし・左上に斜め配置） */
.demo-cta__stamp {
align-self: flex-start;
padding: 4px 14px;
border: 2.5px solid var(--tomato-deep);
border-radius: var(--radius-sm);
color: var(--tomato-deep);
font-size: 15px;
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
transform: rotate(-3deg);
opacity: 0.92;
/* かすれ: SVGフラクタルノイズをアルファマスクにして押印のインク欠けを再現（外部素材ゼロ・CSP適合） */
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-mode: alpha; mask-mode: alpha;
}
/* 見出し（1行目を大きく＝"サンプル"だと最初に伝える） */
.demo-cta__title {
font-size: 15px;
font-weight: 800;
line-height: 1.45;
color: var(--ink);
}
/* 補足文（自然な折り返し。孤立語だけ text-wrap:pretty で整える・強制改行はしない） */
.demo-cta__text {
font-size: 12.5px;
line-height: 1.7;
color: var(--text-sub);
text-wrap: pretty;
}
/* CTA（他CTAと同一言語: 緑塗り＋濃紺枠＋1段影＋押下で沈む） */
.demo-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--tap-min);
margin-top: 2px;
padding: 11px 26px;
background: var(--accent);
color: var(--white);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.02em;
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
transition: transform 0.1s, box-shadow 0.1s;
}
.demo-cta__btn:active { transform: translate(2px, 2px); box-shadow: none; }
/* ===== 公開デモ: 差別化資産ボタンのロック（ぼかし＋鍵バッジ） =====
実URLは付与せず、ボタンの見た目だけをぼかして「予約後に解放」と伝える。
画像リンク(.demo-nolink)はぼかさず、クリックのみ無効化する。 */
.demo-locked {
position: relative;
cursor: not-allowed;
pointer-events: none;
overflow: hidden;
}
.demo-locked > :not(.demo-lock-badge) {
filter: blur(3.5px);
opacity: 0.5;
}
.demo-lock-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--ink);
background: rgba(250,247,238,0.62);
border-radius: inherit;
}
.demo-lock-badge::before {
content: "🔒";
font-size: 13px;
}
.demo-nolink { cursor: default; }
.mode-banner--api {
display: block;
background: var(--alert-lv1-bg);
color: var(--warn-text);
border-bottom: 1px solid var(--alert-lv1-border);
}
/* ===== ヘッダー ===== */
.header {
background: var(--paper);
border-bottom: 2px solid var(--ink);
padding: 8px 16px;
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.header__brand {
/* ブランド名は全言語で常にラテン("MY TRIP DASHBOARD")。zh-Hant で --font（Noto先頭）に
載せるとラテン字形が細く描かれ ja/en と太さが揃わないため、SF先頭の --font-num を使い
どの言語でも同じ太い書体で組む（--font-num は ja/en では従来どおりSFなので影響なし） */
font-family: var(--font-num);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase; /* レタリングはスプラッシュと同系。色は常時表示の額縁として紺（赤はアクセント専用） */
color: var(--ink);
line-height: 1.2;
white-space: nowrap; /* 2行折り返しを防ぐ */
}
/* 最小幅の端末（320px級）では言語切替と重ならないよう少しだけ縮める */
@media (max-width: 359px) {
.header__brand { font-size: 12.5px; letter-spacing: 0.04em; }
}
.lang-switch {
display: flex;
gap: 3px;
background: var(--cream);
border: 2px solid var(--ink);
border-radius: var(--radius-full);
padding: 3px;
}
.lang-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
min-width: 42px;
min-height: 34px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
color: var(--text-sub);
transition: background 0.15s, color 0.15s;
}
.lang-btn--active {
background: var(--ink);
color: var(--white);
}
/* ===== Hero: レトロトラベルポスター ===== */
/* ===== ファーストビュー: ポスター画像＋動的テキストのオーバーレイ ===== */
/* 画像に YOUR ADVENTURE AWAITS / サンバースト / DAYS・HOURS・MIN の箱まで焼き込み済み。
JSで載せるのは 名前 / カウントダウンのラベル / 数字 の3種だけ。座標は画像に対する%で指定。
container-type により、子要素の cqw = このヒーロー幅の1%（画面幅に比例して拡縮）。 */
.hero-poster {
position: relative;
container-type: inline-size;
line-height: 0;
background: var(--ink);
overflow: hidden; /* 登場アニメで車が右端の外から入ってくる分をクリップ */
}
.hero-poster__bg { display: block; width: 100%; height: auto; }
/* 初回オープン時だけの演出（1回きり） ------------------------------- */
/* 車が右の道から走り込んでくる（車体は左向きなので右→中央が自然） */
@keyframes veh-slide-in-right {
0% { transform: translateX(240%) rotate(2deg); opacity: 0; }
55% { opacity: 1; }
80% { transform: translateX(-6%) rotate(-1.5deg); } /* 中央を少し行き過ぎ */
92% { transform: translateX(2%) rotate(0.5deg); }
100% { transform: translateX(0) rotate(0); opacity: 1; }
}
.hp-vehicle--intro .poster__art-img {
animation: veh-slide-in-right 1s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
/* 数字がパラパラ確定した瞬間の軽いポップ */
@keyframes hp-num-pop {
0% { transform: translate(-50%, -50%) scale(1.45); }
100% { transform: translate(-50%, -50%) scale(1); }
}
.hp-num--lock { animation: hp-num-pop 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
/* 開演前の待機状態: 幕（スプラッシュ）の裏で車が“完成形の位置”で一瞬見えてしまうのを防ぐ。
走り込み演出を確実に再生する条件のときだけ JS が付与し、演出開始と同時に外す */
.hp-vehicle--wait .poster__art-img { opacity: 0; }
/* モーション控えめ設定では演出を無効化（JS側でも発火を抑止） */
@media (prefers-reduced-motion: reduce) {
.hp-vehicle--intro .poster__art-img { animation: none; }
.hp-num--lock { animation: none; }
}
/* アーチ直下: ようこそ、〇〇さん（小さめ） */
.hp-greet {
position: absolute;
top: 28%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
line-height: 1.1;
}
.hp-greet__welcome {
font-size: 3.2cqw;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--tomato-deep);
margin: 0 0 1cqw;
}
.hp-greet__name {
font-size: 6.2cqw;
font-weight: 800;
letter-spacing: 0.01em;
color: var(--ink);
margin: 0;
overflow-wrap: anywhere;
}
/* 繁體字UI: 名前は99%英字入力の想定なので、英語UIと同じラテン優先スタックで太さ・字形を揃える。
稀に繁体字名が入力されても、ラテンフォントに無い漢字はフォールバックでNoto(可変800)が
1文字単位で受けるため豆腐にならない（--font-num の既存パターンと同じ考え方） */
html[lang="zh-Hant"] .hp-greet__name { font-family: var(--font-num); }
/* 英語だけ: あいさつ文が長くアーチに迫って詰まって見えるため、少し小さく＋全体を気持ち下げて余白を作る
（日本語/繁体字は短く現状で綺麗なので触らない）。 */
html[lang="en"] .hp-greet { top: 29.5%; }
html[lang="en"] .hp-greet__welcome { font-size: 2.9cqw; letter-spacing: 0.1em; }
/* ど真ん中: 予約した車種・カラーの車イラスト（主役） */
.hp-vehicle {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 62%;
text-align: center;
line-height: 0;
}
/* デリカは車体が縦に大きい（高さ63% vs ジムニー58%）ので少しだけ小さく出して見た目を揃える */
.hp-vehicle--delica { width: 58%; }
.hp-vehicle .poster__art-img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(2px 3px 0 rgba(30, 58, 95, 0.22));
}
/* 車イラスト未登録のときのフォールバック（シルエット＋準備中バッジ） */
.hp-vehicle .poster__art-silhouette { width: 46%; height: auto; color: var(--ink); opacity: 0.5; }
.hp-vehicle .poster__art-pending {
display: inline-block;
margin-top: 1.5cqw;
font-size: 2.6cqw;
font-weight: 700;
color: var(--text-muted);
background: var(--paper);
border: 1px dashed var(--ink);
border-radius: var(--radius-full);
padding: 0.6cqw 3cqw;
line-height: 1.3;
}
/* 下部ネイビー帯・左の空きエリア: 出発まであと（数字と同じ高さ y=87.8%） */
.hp-cdlabel {
position: absolute;
top: 87.8%;
left: 27%;
transform: translate(-50%, -50%);
width: 42%;
text-align: center;
font-size: 4cqw;
font-weight: 800;
letter-spacing: 0.04em;
line-height: 1.25;
color: var(--cream);
}
/* 下部ネイビー帯の3ボックスに入る数字（中はクリーム地なので紺文字）。ボックス中心に配置 */
.hp-num {
position: absolute;
top: 87.8%;
transform: translate(-50%, -50%);
font-size: 4.6cqw;
font-weight: 800;
line-height: 1;
color: var(--ink);
text-align: center;
font-variant-numeric: tabular-nums;
}
.hp-num--days { left: 54.86%; }
.hp-num--hours { left: 69.82%; }
.hp-num--mins { left: 85.05%; }
/* 日数が3桁（100以上）のときだけ縮小して箱内に収める */
.hp-num--3d { font-size: 3.4cqw; letter-spacing: -0.02em; }
/* ===== 緊急連絡先（常時固定） ===== */
.contact-bar {
background: var(--paper);
border-bottom: 2px solid var(--ink);
padding: 12px 16px;
}
/* 各コンテンツ末尾に置く版（"最後の手段"導線）。上に区切り線＋余白を取って締めくくる */
.contact-bar--footer {
border-bottom: none;
border-top: 2px solid var(--ink);
margin-top: 20px;
padding: 16px;
}
.contact-bar__label {
font-size: 12px;
font-weight: 600;
color: var(--text-sub);
margin-bottom: 8px;
text-align: center;
letter-spacing: 0.02em;
}
.contact-bar__buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.contact-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 12px;
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-size: 14px;
font-weight: 700;
transition: transform 0.1s, box-shadow 0.1s;
}
.contact-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.contact-btn--line { background: var(--line-soft); color: #fff; }
.contact-btn--ig { background: var(--ig-soft); color: #fff; }
.contact-btn__icon { display: flex; align-items: center; }
/* 緊急時のみ電話、の注記（控えめトーン。電話を"緊急専用"に格上げする役割） */
.contact-bar__emergency {
margin-top: 10px;
font-size: 9.5px;
font-weight: 500;
color: var(--text-muted);
line-height: 1.5;
text-align: center;
letter-spacing: 0;
/* nowrap にすると長い英語文が枠をはみ出し、ページ全体が横に広がって
モバイルがズームアウト（画面が小さく見える）ため、自然折り返しにする */
}
/* ===== オフライン表示バッジ（圏外時のみ・中立トーン。緊急赤と混同しない） ===== */
.offline-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
background: var(--ink);
color: var(--cream);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
text-align: center;
}
.offline-badge[hidden] { display: none; }
.offline-badge svg { flex-shrink: 0; }
/* ===== 予約情報: 搭乗券チケット ===== */
.trip-meta {
background: var(--paper);
padding: 16px;
border-bottom: 2px solid var(--ink);
}
/* チケット本体: 券面内側は温かみのある白（紙質感）。太アウトライン＋オフセット影で他カードと地続き */
.ticket {
position: relative;
background: var(--white);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
}
/* 見出し: 濃紺ベタ帯＋クリーム文字（券面本体は紙地のまま） */
.ticket__head {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
background: var(--ink);
color: var(--cream);
border-bottom: 2px solid var(--mustard);
}
.ticket__head-logo { display: flex; flex-shrink: 0; color: var(--mustard); }
.ticket__head-type {
font-size: 13px;
font-weight: 900;
letter-spacing: 0.16em;
color: var(--cream);
text-transform: uppercase;
}
.ticket__head-star {
margin-left: auto;
font-size: 9px;
letter-spacing: 0.14em;
color: var(--mustard);
}
/* 券面本体（縦詰め・横長寄り） */
.ticket__body { padding: 10px 16px 10px; }
/* 予約番号: 大きめの等幅風で航空券のPNRらしく */
.ticket__booking {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.ticket__booking-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ticket__booking-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--tomato-deep);
text-transform: uppercase;
}
.ticket__booking-no {
font-size: 22px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.1em;
color: var(--ink);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
/* 予約番号の右に添える吹き出し（左向きの尾でBooking Numberを指す） */
.ticket__booking-note {
position: relative;
flex-shrink: 0;
align-self: center;
/* 英語は辞書の \n で2行構成。スマホ幅では上限50%だと1行目が入りきらず3行に泣き別れするため
60%まで許容して「必ず2行」に収める（ja/zhは短く1行のまま影響なし） */
max-width: 60%;
background: var(--mustard-soft);
color: var(--ink);
border: 1.5px solid var(--mustard-deep);
border-radius: var(--radius-md);
padding: 6px 10px;
font-size: 11px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.01em;
white-space: pre-line; /* 辞書値の \n を意図した改行位置として尊重（en の「番号／連絡文」の泣き別れ対策） */
}
.ticket__booking-note::before,
.ticket__booking-note::after {
content: "";
position: absolute;
top: 50%;
width: 0;
height: 0;
border-style: solid;
transform: translateY(-50%);
}
.ticket__booking-note::before { /* 尾の縁 */
left: -8px;
border-width: 6px 8px 6px 0;
border-color: transparent var(--mustard-deep) transparent transparent;
}
.ticket__booking-note::after { /* 尾の内側（塗り） */
left: -6px;
border-width: 5px 7px 5px 0;
border-color: transparent var(--mustard-soft) transparent transparent;
}
/* 2カラムグリッド（Check-in/Check-out・Vehicle/Guests 共通） */
.ticket__grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px dashed var(--ink);
padding-top: 4px;
}
.ticket__cell {
padding: 6px 0 4px;
min-width: 0;
}
/* 搭乗券らしい縦ミシン線（Vehicle/Guestsの間だけ） */
.ticket__grid .ticket__cell:nth-child(odd) {
border-right: 1px dashed var(--ink);
padding-right: 12px;
}
.ticket__grid .ticket__cell:nth-child(even) { padding-left: 16px; }
.ticket__label {
font-size: 9px;
color: var(--accent);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 800;
}
.ticket__value {
font-size: 17px;
font-weight: 800;
line-height: 1.3;
color: var(--ink);
letter-spacing: 0.03em;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.ticket__value small {
font-size: 12px;
font-weight: 700;
color: var(--text-sub);
}
/* ===== 数字を主役にする表示のフォント統一（--font-num・全体で1箇所に集約）=====
繁體字(zh-Hant)は本文フォントが NotoSansTC のため、数字までその字形になり英語(システムSF)の
数字と不揃い＆野暮ったく見える。そこで「大きく見せる数字・順番の番号・券面の英数字」だけを
--font-num（ラテン=SF優先／CJKは Noto にフォールバック）にして、英語と同じ数字書体へ全言語で統一する。
本文中の数字は各言語の本文フォント(--font)のまま＝触らない。
※ここに全対象を集約し、要素ごとに散らさない（＝パッチワーク防止）。新しく大きな数字表示を足したら
必ずこのリストに追加すること。吹き出し(.ticket__booking-note)や注記(.ticket__notes)は中国語本文なので対象外。 */
.hp-num, /* 出発カウントダウンの数字（165 / 16 / 47） */
.jstep__num, /* 旅の進捗ステップ番号 */
.temp-japan__cell-val, /* 気温の大きな数値（to/℃も子として継承） */
.temp-japan__date .temp-num, /* 気温バッジの月数字 */
.manners-card__num, /* マナーカードの大番号 */
.step-list__num, /* 手順リストの番号 */
.lug-cap .lug-em, /* 荷物容量の強調番号（1個 / 2個） */
.esit-step__badge, /* もしもの時ステップのSTEPバッジ */
.esit-call__num, /* 緊急連絡の電話番号 */
.ticket__head-type, /* 以下、券面の英数字（番号・日付・時刻・単位・見出し） */
.ticket__booking-label,
.ticket__booking-no,
.ticket__label,
.ticket__value {
font-family: var(--font-num);
}
/* ゲスト数の単位「名／位／guests」は数字より少し小さく（読みやすさ重視） */
.ticket__value .ticket__unit {
font-size: 0.72em;
font-weight: 700;
margin-left: 1px;
}
/* 車種の補足「4WD / AT」は車名の右に置き、単位の途中では折り返さない */
#meta-vehicle-sub { white-space: nowrap; margin-left: 2px; }
/* 券面下部にまとめた注意書き（各行頭に赤※・同一フォント・控えめ枠） */
.ticket__notes {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--ink);
display: flex;
flex-direction: column;
gap: 4px;
}
.ticket__notes-item {
display: flex;
gap: 6px;
font-size: 11px;
line-height: 1.5;
color: var(--text-sub);
}
.ticket__notes-mark {
flex-shrink: 0;
color: var(--tomato-deep);
font-weight: 800;
}
/* ミシン目（両端の切れ込みノッチ＋破線）で半券を分ける */
.ticket__perf {
position: relative;
height: 0;
border-top: 2px dashed var(--ink);
margin: 0 12px;
}
.ticket__perf::before,
.ticket__perf::after {
content: "";
position: absolute;
top: -10px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ink); /* 濃紺で塗りつぶし＝紙を切り込んだノッチ表現（外枠線は無し） */
border: none;
}
.ticket__perf::before { left: -22px; }
.ticket__perf::after { right: -22px; }
/* 半券（スタブ）: バーコード＋ブランド線（QR風装飾は削除） */
.ticket__stub {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 16px 12px;
}
.ticket__barcode {
flex: 1;
height: 28px;
min-width: 0;
background: repeating-linear-gradient(
90deg,
var(--ink) 0 2px, transparent 2px 4px,
var(--ink) 4px 5px, transparent 5px 9px,
var(--ink) 9px 12px, transparent 12px 14px
);
}
.ticket__brandline {
flex-shrink: 0;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--tomato-deep);
text-transform: uppercase;
}
/* ===== フェーズ表示: ステッカーコレクション ===== */
/* ===== あなたの旅: 3ステップ進捗トラック＋現在フェーズ案内を1枚に統合 ===== */
.journey {
margin: 16px;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
}
.journey__title {
font-size: 13px;
font-weight: 800;
color: var(--tomato-deep);
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
padding: 12px 16px 2px;
}
/* 3ステップの横トラック（ドット間を線でつなぐ） */
.journey__track {
display: flex;
padding: 10px 16px 16px;
}
.jstep {
flex: 1;
min-width: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
/* 前のドットとの間をつなぐ線（各ステップの左半分） */
.jstep:not(:first-child)::before {
content: "";
position: absolute;
top: 19px; /* 40pxドットの中心付近 */
right: 50%;
left: -50%;
height: 3px;
background: var(--border);
z-index: 0;
}
.jstep__dot {
position: relative;
z-index: 1;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--ink);
background: var(--cream);
color: var(--ink);
}
.jstep__num { font-size: 16px; font-weight: 800; line-height: 1; }
.jstep__label {
font-size: 12px;
font-weight: 700;
color: var(--text-sub);
letter-spacing: 0.02em;
white-space: nowrap;
}
/* 済み: 塗り（線も到達済み色） */
.jstep--done .jstep__dot { background: var(--accent); color: var(--white); }
.jstep--done::before,
.jstep--now::before { background: var(--accent); }
/* 現在: 白フチ強調（色はフェーズ別に .journey--* で上書き） */
.jstep--now .jstep__dot {
background: var(--tomato-deep);
color: var(--white);
border: 3px solid var(--white);
box-shadow: 0 0 0 2px var(--ink);
}
.jstep--now .jstep__label { color: var(--tomato-deep); font-weight: 800; }
/* 未来: グレー */
.jstep--todo .jstep__dot { background: #e7e0d0; border-color: #a59d89; color: #8a8271; }
.jstep--todo .jstep__label { color: var(--text-muted-strong); }
/* 現在フェーズの案内パネル（同カード内・上部の尾で現在ドットとつなぐ） */
.journey__panel {
position: relative;
padding: 14px 16px;
border-top: 2px solid var(--ink);
background: var(--accent-light);
display: flex;
gap: 12px;
align-items: flex-start;
}
/* 現在ドット直下を指す尾（--arrow-left は JS が現在ステップ中心に設定） */
.journey__panel::before,
.journey__panel::after {
content: "";
position: absolute;
left: var(--arrow-left, 50%);
width: 0;
height: 0;
border-style: solid;
pointer-events: none;
}
.journey__panel::before { /* 尾の縁（濃紺） */
top: 0;
transform: translate(-50%, -100%);
border-width: 0 8px 8px 8px;
border-color: transparent transparent var(--ink) transparent;
}
.journey__panel::after { /* 尾の内側（パネル色。フェーズ別に上書き） */
top: 3px;
transform: translate(-50%, -100%);
border-width: 0 6px 6px 6px;
border-color: transparent transparent var(--accent-light) transparent;
}
/* --- フェーズ別カラー（現在ドット・尾・パネルを揃えて一体に見せる） --- */
/* before（通常）: アクセント緑 */
.journey--before .jstep--now .jstep__dot { background: var(--accent); }
.journey--before .jstep--now .jstep__label { color: var(--accent-dark); }
.journey--before .phase-banner__icon { color: var(--accent); }
/* trip（旅行中）: 濃紺ベタ＋動画CTA */
.journey--trip .jstep--now .jstep__dot { background: var(--ink); }
.journey--trip .jstep--now .jstep__label { color: var(--ink); }
.journey--trip .journey__panel { background: var(--ink); color: var(--white); }
.journey--trip .journey__panel::after { border-bottom-color: var(--ink); }
.journey--trip .phase-banner__icon { color: var(--mustard); }
.journey--trip .phase-banner__body { color: rgba(255, 250, 240, 0.88); }
.journey--trip .phase-banner__cta {
background: var(--mustard);
color: var(--ink);
border-color: var(--ink);
box-shadow: 2px 2px 0 var(--ink-deep);
width: 100%;
}
/* after（返却後）: 祝いの黄地＋3ボタン */
.journey--after .jstep--now .jstep__dot { background: var(--mustard); color: var(--ink); }
.journey--after .jstep--now .jstep__label { color: var(--mustard-deep); }
.journey--after .journey__panel { background: var(--mustard-soft); }
.journey--after .journey__panel::after { border-bottom-color: var(--mustard-soft); }
.journey--after .phase-banner__icon { color: var(--mustard-deep); }
/* ===== フェーズバナー（冬季の雪道バナー＝季節連動の全幅バンド／内側は旅パネルと共通） ===== */
.phase-banner {
padding: 12px 16px;
border-left: 6px solid var(--winter-border);
border-bottom: 1px solid var(--border);
background: var(--winter-bg);
display: flex;
gap: 12px;
align-items: flex-start;
}
.phase-banner__icon { flex-shrink: 0; margin-top: 2px; display: flex; color: var(--winter-border); }
.phase-banner__content { flex: 1; }
.phase-banner__title {
font-size: 14px;
font-weight: 800;
margin-bottom: 2px;
}
.phase-banner__body {
font-size: 13px;
color: var(--text-sub);
line-height: 1.5;
}
.phase-banner__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap-min);
margin-top: 8px;
padding: 8px 16px;
background: var(--accent);
color: var(--white);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-size: 13px;
font-weight: 800;
transition: transform 0.1s, box-shadow 0.1s;
}
.phase-banner__cta:active { transform: translate(2px, 2px); box-shadow: none; }
.phase-banner__buttons {
display: grid;
/* 左（レビュー）は短く・右（クーポン）は長い。等幅だと繁体字「領取下次可用的優惠券」が
1文字あふれて2行になるため、左を少し狭め・右を少し広めに割り当てて1行に収める。 */
grid-template-columns: 0.85fr 1.15fr;
gap: 8px;
margin-top: 8px;
}
.phase-banner__buttons .phase-banner__cta { margin-top: 0; text-align: center; padding: 8px 8px; font-size: 13px; }
/* ===== タブナビ（sticky・5本） ===== */
.tab-nav {
position: sticky;
top: var(--header-h);
z-index: 90;
background: var(--paper);
border-bottom: 2px solid var(--ink);
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.tab-nav__item {
min-height: 52px;
padding: 8px 2px;
text-align: center;
font-size: 11px;
color: var(--text-muted-strong);
border-bottom: 3px solid transparent;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
white-space: nowrap;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.tab-nav__item:active { background: var(--cream-deep); }
.tab-nav__icon { display: flex; align-items: center; justify-content: center; }
.tab-nav__item--active {
color: var(--ink);
border-bottom-color: var(--tomato);
font-weight: 800;
background: var(--mustard-soft);
}
/* ===== タブコンテンツ ===== */
/* min-height: 短いタブ（FAQ等）でも、タブ先頭を sticky タブバー直下まで
スクロールし切れるよう、画面の高さ分を最低確保する（header56+タブバー54≒112px を差し引く）。
これがないと、コンテンツ量が足りず「タブの途中から表示される」違和感が出る。 */
.tab-content {
display: none;
/* 各タブ末尾は連絡ブロックが締める（paper地→フッターへ密着）。
下余白を入れると連絡ブロックとフッターの間に隙間ができるため 0 */
padding-bottom: 0;
min-height: calc(100vh - 108px);
min-height: calc(100dvh - 108px);
}
/* display: flow-root で先頭カードの margin-top をパネルの内側に閉じ込める（マージン相殺対策）。
これがないと「旅の準備・マップ・道具」だけタブ切替直後に先頭カードがタブバーに密着する
（運転・FAQ は padding 方式なので元から問題なし）。block は古いブラウザ用フォールバック */
.tab-content--active { display: block; display: flow-root; animation: tab-in 0.22s ease-out; }
/* カード出現は motion.js のスクロール出現システム（.anim-item / .anim-in）に統一。
旧pop-in一括発火は廃止（画面に入った瞬間に1枚ずつ順番にポンッと出る方式へ） */
/* 見出しの三角ペナント旗飾りは全廃（▶が「押せるボタン」に見える誤解を防ぐ・見出しデザイン統一） */
/* ===== タブ1: キャンプ場 ===== */
/* 気温アコーディオン */
.temp-section {
margin: 0 16px 16px;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow); /* 他カード（camp-pdf/luggage/map-place等）と枠の見え方を統一（オフセット影） */
overflow: hidden;
}
/* ===== 共通の紺見出し帯（旅の準備タブの各セクション見出し） ===== */
.section-head {
padding: 12px 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--cream);
background: var(--ink);
border-bottom: 3px double var(--mustard);
}
.section-head__icon { display: flex; flex-shrink: 0; color: var(--mustard); }
/* どんな服装で行けばいい？：画像＋日本の気温常時表示＋エリア別アコーディオン */
.temp-hero { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--ink); }
.temp-note {
padding: 12px 16px;
font-size: 12px;
color: var(--text-sub);
line-height: 1.55;
}
.temp-japan {
margin: 0 16px 14px;
padding: 14px 16px;
background: var(--cream);
border-radius: var(--radius-md);
/* 枠(2px border)は廃止。外カード枠の中で"塗り"だけで囲う＝枠のネストを解消 */
}
/* 見出し行（施設名＋あなたの旬）。旬だけ赤で強調＝"あなた向けに出してる"合図 */
.temp-japan__eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; font-weight: 800; color: var(--text-sub); letter-spacing: 0.03em; }
.temp-japan__eyebrow > svg { width: 14px; height: 14px; color: var(--tomato-deep); flex-shrink: 0; }
/* 予約日程に連動する旬ラベル。免許ガイドの国名（.lic-name）と同じ緑の白抜き四角で
「ここはあなた専用」をそろえて示す */
.temp-japan__date {
display: inline-block; background: var(--accent); color: var(--white);
padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 800; letter-spacing: 0.02em;
font-size: 12px;
}
/* ja/zh のバッジ内で「月」の数字だけ少し大きく（字面のバランス調整。英語は数字がないので影響なし） */
.temp-japan__date .temp-num { font-size: 15px; line-height: 1; }
/* 日中／夜間の2列。セルの枠・塗りは持たせず、間の細いヘアライン1本だけで仕切る */
.temp-japan__values { display: grid; grid-template-columns: 1fr 1fr; }
.temp-japan__cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 8px; }
.temp-japan__cell + .temp-japan__cell { border-left: 1px solid var(--border); }
.temp-japan__cell-icon { display: flex; }
.temp-japan__cell--day .temp-japan__cell-icon { color: var(--mustard); }
.temp-japan__cell--night .temp-japan__cell-icon { color: var(--ink); }
.temp-japan__cell-label { font-size: 11px; font-weight: 700; color: var(--text-sub); letter-spacing: 0.05em; }
/* 数字が主役。範囲表示でも1行に収める */
.temp-japan__cell-val { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: 0.01em; line-height: 1.15; white-space: nowrap; }
/* 区切り「to」と単位「℃」は、数字を主役にするため細字＆小さめの対で揃える（太字だと数字と同格で浮く）。
"to" は英語レンジのみ出現。℃は全言語共通。色は数字と同系(--ink)のまま太さ・大きさだけ落とす。 */
.temp-japan__cell-val .temp-sep,
.temp-japan__cell-val .temp-unit { font-size: 0.58em; font-weight: 500; }
.temp-japan__cell-val .temp-sep { margin: 0 3px; }
.temp-japan__cell-val .temp-unit { margin-left: 2px; }
.temp-area-acc { border-top: 1px dashed var(--ink); }
.temp-area-toggle {
width: 100%;
min-height: var(--tap-min);
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 13px;
font-weight: 800;
color: var(--ink);
background: none;
cursor: pointer;
}
.temp-area-toggle__arrow { font-size: 11px; color: var(--text-muted); transition: transform 0.2s; }
.temp-area-acc--open .temp-area-toggle__arrow { transform: rotate(180deg); }
.temp-area-detail { display: none; border-top: 1px solid var(--border); }
.temp-area-acc--open .temp-area-detail { display: block; }
.temp-area-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.temp-area {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.temp-area:nth-child(2n) { border-right: none; }
.temp-area:nth-last-child(-n+2) { border-bottom: none; }
.temp-area__name { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.temp-area__night { font-size: 13px; color: var(--accent); margin-bottom: 2px; }
.temp-area__day { font-size: 13px; color: var(--temp-day); }
/* ===== 混雑アラートカード（旅の準備タブ最上部・出発前フェーズのみ） =====
Lv2=連休重複（赤・強め）／Lv1=期間内に土曜（黄・控えめ）。気配りトーン。 */
.congestion-card {
/* 先頭カードなので上16px（他タブと統一・sticky タブナビとの窮屈さ解消） */
margin: 16px 16px 12px;
border: 2px solid var(--ink);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow);
background: var(--paper);
}
.congestion-card__head {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
font-size: 14px;
font-weight: 800;
line-height: 1.35;
color: var(--white);
}
.congestion-card__icon { flex-shrink: 0; display: flex; }
.congestion-card__body {
padding: 12px 14px 14px;
font-size: 13px;
line-height: 1.65;
color: var(--text-sub);
}
/* Lv2の赤は「もしもの時」カードと同じ落ち着いた赤(--danger-calm)に統一。
従来の#d43d2a（--alert-lv2-border）は彩度が高く1枚だけ浮いて見えたため。 */
.congestion-card--lv2 { border-color: var(--danger-calm); background: var(--alert-lv2-bg); }
.congestion-card--lv2 .congestion-card__head { background: var(--danger-calm); }
.congestion-card--lv1 { border-color: var(--alert-lv1-border); background: var(--alert-lv1-bg); }
.congestion-card--lv1 .congestion-card__head { background: var(--alert-lv1-border); }
/* マナー5つの約束: 「キャンプ場の掟」ポスター風 */
.manners-card {
/* 上16px: タブナビ（sticky）との間に他タブと同じ余白を空けて窮屈さを解消 */
margin: 16px 16px 16px;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow);
}
.manners-card__header {
padding: 12px 16px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--cream);
background: var(--ink);
display: flex;
align-items: center;
gap: 8px;
border-bottom: 3px double var(--mustard);
}
/* 見出し下の横長バナー（富士山＋準備アイテムのイラスト） */
.manners-card__hero { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--ink); }
/* バナー下のリード文（「まずはこの5つ」の数字フックをここで活かす） */
.manners-card__lead { padding: 12px 16px 0; font-size: 13px; font-weight: 700; color: var(--text-sub); line-height: 1.6; }
.manners-card__list {
list-style: none;
}
.manners-card__item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px dashed var(--ink);
}
.manners-card__item:last-child { border-bottom: none; }
/* 掟ポスター風: 番号を大きく */
.manners-card__num {
flex-shrink: 0;
width: 32px;
font-size: 28px;
font-weight: 800;
font-style: italic;
line-height: 1;
color: var(--tomato);
text-align: center;
display: flex;
justify-content: center;
}
.manners-card__text { min-width: 0; }
.manners-card__item-title {
font-size: 13px;
font-weight: 800;
color: var(--ink);
line-height: 1.35;
margin-bottom: 3px;
/* スマホ幅で最終行に単語1個だけ孤立する泣き別れ（en）や、句読点・カッコが行頭/行末で
割れる不自然な折り返し（zh/ja）を抑える。手動改行は入れず折り返しエンジンで整える */
text-wrap: pretty;
line-break: strict;
}
.manners-card__item-body {
font-size: 12px;
color: var(--text-sub);
line-height: 1.55;
text-wrap: pretty;
line-break: strict;
}
/* おすすめキャンプ場リスト: PDF配布導線（引き写真＋ダウンロードボタン） */
.camp-pdf {
margin: 16px 16px 16px;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
}
.camp-pdf__head { padding: 16px 16px 12px; }
.camp-pdf__title {
font-size: 17px;
font-weight: 800;
color: var(--ink);
display: flex;
align-items: center;
margin-bottom: 6px;
}
.camp-pdf__lead {
padding: 12px 16px;
font-size: 13px;
color: var(--text-sub);
line-height: 1.6;
}
.camp-pdf__visual {
display: block;
position: relative;
border-top: 2px dashed var(--ink);
border-bottom: 2px dashed var(--ink);
background: var(--cream);
}
.camp-pdf__img {
display: block;
width: 100%;
height: auto;
}
.camp-pdf__img + .camp-pdf__img { border-top: 1px solid var(--border); }
.camp-pdf__badge {
position: absolute;
top: 8px;
right: 8px;
background: var(--ink);
color: var(--cream);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: var(--radius-full);
border: 2px solid var(--cream);
}
/* タップ可能と分かるヒントチップ（左下・拡大アイコン＋文言） */
.camp-pdf__hint {
position: absolute;
bottom: 8px;
left: 8px;
display: flex;
align-items: center;
gap: 4px;
background: var(--tomato-deep);
color: var(--white);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: var(--radius-full);
border: 2px solid var(--cream);
}
.camp-pdf__hint svg { flex-shrink: 0; }
.camp-pdf__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
margin: 12px;
background: var(--tomato-deep);
color: var(--white);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-size: 15px;
font-weight: 800;
transition: transform 0.1s, box-shadow 0.1s;
}
.camp-pdf__btn:active { transform: translate(2px, 2px); box-shadow: none; }
/* ===== お荷物はどのくらい積めますか？（車種で出し分け・JSが描画） =====
camp-pdf と同じカード作法。見出しは既存 .section-head を流用（紺バー＋マスタード二重罫）。 */
.luggage-card {
margin: 16px 16px 16px;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
}
.luggage-card .section-head__icon svg { width: 18px; height: 18px; }
/* タイトル右の車種タグ（マスタードのステッカー調・全言語で英語表記固定） */
.lug-tag {
margin-left: auto; flex-shrink: 0;
font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
color: var(--ink-deep); background: var(--mustard);
border-radius: var(--radius-full); padding: 3px 11px;
}
/* タイトルが長い言語(EN)でも折返せるように。タグを右端へ押し出し過ぎない保険 */
.lug-title { min-width: 0; }
.lug-head { padding: 14px 16px 4px; }
.lug-intro { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; }
/* 強調 *〜* → em。既定はink太字、文脈（数字/預かり）で化ける（下で上書き） */
.lug-em { font-style: normal; font-weight: 800; color: var(--ink); }
/* 方法1/方法2の見出し（バッジ＋アイコン＋タイトル＋濃紺の下罫） */
.lug-sec {
display: flex; align-items: center; gap: 9px;
margin: 16px 16px 0; padding-bottom: 8px;
border-bottom: 2px solid var(--ink);
}
.lug-way {
flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
color: var(--cream); background: var(--ink);
border-radius: var(--radius-sm); padding: 3px 8px;
}
.lug-ico { flex-shrink: 0; display: inline-flex; color: var(--ink); }
.lug-ico svg { width: 22px; height: 22px; }
.lug-sec__title { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: 0.02em; }
/* イラスト（点線枠は「または」の区切りと紛らわしいので付けない） */
.lug-figure { margin: 12px 16px 0; background: var(--cream); border-radius: var(--radius-sm); overflow: hidden; }
.lug-figure img { display: block; width: 100%; height: auto; }
/* 積める量（大きなトマトのイタリック数字） */
.lug-cap { text-align: center; padding: 12px 16px 0; }
.lug-cap__main { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.lug-cap .lug-em { font-style: italic; font-size: 26px; color: var(--tomato); margin: 0 3px; }
.lug-cap__sub { font-size: 13px; font-weight: 700; color: var(--text-sub); margin-top: 2px; }
/* 数量の単位「個」は数字より少し小さく（日本語/繁體字。色・字体は親のlug-emを継承） */
.lug-unit { font-size: 0.7em; margin-left: 1px; }
/* 「または」= 方法1と方法2を分ける分岐点。上下とも24pxの対称（隣接要素の余白に依存させない） */
.lug-or { display: flex; align-items: center; gap: 12px; margin: 24px 16px; }
.lug-or::before, .lug-or::after { content: ""; flex: 1; border-top: 2px dashed var(--ink); }
.lug-or + .lug-sec { margin-top: 0; }
.lug-or__t {
font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--ink);
background: var(--mustard-soft); border: 2px solid var(--ink);
border-radius: var(--radius-full); padding: 2px 14px;
}
.lug-lead { margin: 12px 16px 0; font-size: 13px; color: var(--text-sub); line-height: 1.6; }
/* 共通:無料預かり（免許ノート .license-note と同じ「帯」作法。地色マスタードで視認性確保） */
.lug-keep {
margin-top: 14px; padding: 13px 16px;
background: var(--mustard-soft); border-top: 2px solid var(--ink);
font-size: 13px; color: var(--ink); line-height: 1.6; font-weight: 700;
}
.lug-keep .lug-em { color: var(--tomato-deep); }
/* ===== タブ2: マップ ===== */
.map-section { padding: 16px; }
.map-section__title {
font-size: 14px;
font-weight: 800;
margin-bottom: 12px;
color: var(--ink);
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 4px;
}
.map-section__lead {
font-size: 13px;
color: var(--text-sub);
line-height: 1.6;
margin-bottom: 12px;
}
/* CSS描画の地図パネル（外部画像なし・タップでGoogleマイマップを開く） */
.map-cta {
display: block;
position: relative;
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
background: var(--cream);
}
.map-cta__img {
display: block;
width: 100%;
height: auto;
}
/* タップ可能ヒントチップ（camp-pdf__hint と同意匠） */
.map-cta__hint {
position: absolute;
bottom: 8px;
left: 8px;
display: flex;
align-items: center;
gap: 4px;
background: var(--tomato-deep);
color: var(--white);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: var(--radius-full);
border: 2px solid var(--cream);
}
.map-cta__hint svg { flex-shrink: 0; }
.map-cta__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
margin: 12px 0 16px;
background: var(--tomato-deep);
color: var(--white);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-size: 15px;
font-weight: 800;
transition: transform 0.1s, box-shadow 0.1s;
}
.map-cta__btn:active { transform: translate(2px, 2px); box-shadow: none; }
.map-cta:active { transform: translate(2px, 2px); box-shadow: var(--shadow-sm); }
.map-legend {
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
padding: 12px 16px;
}
.map-legend__title {
font-size: 11px;
font-weight: 800;
color: var(--tomato-deep);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
/* このマップでわかること（凡例を「内容一覧」に置き換え） */
.map-legend__lead { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin-bottom: 10px; }
.map-legend__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.map-legend__list li {
font-size: 12.5px;
color: var(--text-sub);
line-height: 1.4;
padding-left: 18px;
position: relative;
}
.map-legend__list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--accent);
font-weight: 800;
}
/* 貸出場所・オリジナルマップ・ガソリンスタンドを同じ紺ヘッダーカードで統一 */
.map-place {
margin: 0 16px 16px;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
}
/* カード内に入れ子にした「わかること」は二重枠にしない（枠・地色を消してフラットに） */
.map-place .map-legend { border: none; background: transparent; border-radius: 0; padding: 12px 0 0; }
/* 先頭カードとスティッキーのタブナビの間に、他タブと同じ16pxの余白を空ける */
#tab-map > .map-place:first-child { margin-top: 16px; }
.map-place__head {
padding: 12px 16px;
background: var(--ink);
color: var(--cream);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.08em;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 3px double var(--mustard);
}
.map-place__head svg { flex-shrink: 0; }
/* 店舗などの実写真バナー（ヘッダー直下・全幅） */
.map-place__figure { position: relative; line-height: 0; }
/* 写真の左上に貼る「おすすめ」ステッカー（運転タブのおすすめスタンドと同意匠） */
.map-place__badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--tomato);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
line-height: 1.4;
padding: 3px 10px;
border-radius: var(--radius-full);
border: 1.5px solid #fff;
box-shadow: var(--shadow-sm);
}
.map-place__photo { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--ink); }
.map-place__body { padding: 12px 16px; }
.map-place__desc { font-size: 13px; color: var(--text-sub); line-height: 1.7; margin-bottom: 10px; }
.map-place__addr { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.5; margin-bottom: 10px; }
.map-place__memo {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
padding: 9px 12px;
background: var(--cream);
border: 1px dashed var(--mustard-deep);
border-radius: var(--radius-sm);
font-size: 12.5px;
color: var(--text-muted-strong);
line-height: 1.6;
}
.map-place__memo-icon { flex-shrink: 0; display: flex; margin-top: 2px; color: var(--mustard-deep); }
/* 店舗入口の写真プレースホルダ（後日実写に差し替え）。実写と同じ枠・16:9で置く */
.map-place__photo-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
aspect-ratio: 16 / 9;
border-bottom: 2px solid var(--ink);
background: var(--cream);
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
.map-place__photo-placeholder svg { color: var(--mustard-deep); }
/* アクセス情報（最寄り駅・空港）。1行1手段でざっと読める */
.map-place__access {
list-style: none;
margin: 12px 0 0;
padding: 10px 12px;
background: var(--cream);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: 7px;
}
.map-place__access-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12.5px;
color: var(--text-sub);
line-height: 1.55;
}
.map-place__access-item strong { color: var(--ink); font-weight: 800; }
.map-place__access-icon { flex-shrink: 0; display: flex; margin-top: 1px; color: var(--ink); }
/* ===== タブ3: 運転・安全 ===== */
.driving-section {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* もしもの時カード（最上部固定・赤系。視認性は絶対に落とさない） */
.emergency-card {
background: var(--paper);
border: 2px solid var(--danger-calm);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 3px 3px 0 var(--danger-calm);
}
.emergency-card__header {
background: var(--danger-calm);
color: #fff;
padding: 12px 16px;
}
.emergency-card__title {
font-size: 16px;
font-weight: 800;
display: flex;
align-items: center;
gap: 8px;
}
.emergency-card__subtitle {
font-size: 12.5px;
margin-top: 2px;
}
/* LINE / Instagram DM を2カラム（上部の連絡バーと同じデザイン・トーン） */
.estep__contacts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
/* STEP内（例：事故STEP3）の連絡ボタンは、STEPバッジ幅ぶんの左インデントを
打ち消してカード全幅で表示する（badge min-width 54 + flex gap 10 = 64px）。 */
.esit-step .estep__contacts { margin-left: -64px; }
/* 事故イラスト：もしもの時カードの直下（ヘッダー直後）に全幅で */
.emergency-card__hero {
display: block;
width: 100%;
height: auto;
border-bottom: 1px solid var(--border);
}
/* ===== 状況（シチュエーション）ごとのブロック：赤系＝緊急 ===== */
.esit {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.esit:last-of-type { border-bottom: none; }
.esit__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.esit__title { font-size: 15px; font-weight: 800; color: var(--danger-calm); line-height: 1.3; }
/* 交通事故だけ：本物のステップ（STEP 1〜4） */
.esit-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.esit-step { display: flex; gap: 10px; align-items: flex-start; }
/* STEPバッジ：順番が分かればよいので赤で目立たせず、控えめなグレーに */
.esit-step__badge {
flex-shrink: 0;
min-width: 54px;
margin-top: 1px;
padding: 3px 6px;
background: var(--cream-deep);
color: var(--text-muted-strong);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.03em;
text-align: center;
}
.esit-step__main { flex: 1; min-width: 0; }
.esit-step__body { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.5; }
.esit-step__desc { font-size: 12.5px; color: var(--text-sub); line-height: 1.55; margin-top: 3px; }
.esit-step__sub {
margin-top: 6px;
padding: 6px 10px;
background: var(--danger-bg);
border-radius: var(--radius-sm);
font-size: 12px;
color: var(--danger-text);
line-height: 1.5;
}
/* STEP内の控えめな補足（例：119・110の英中対応）。赤箱にはせずグレーの一行で */
.esit-step__note { margin-top: 6px; font-size: 12px; color: var(--text-muted-strong); line-height: 1.55; }
/* 体調不良・故障の箇条書き */
.esit-bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.esit-bullets li {
font-size: 13.5px;
color: var(--text);
line-height: 1.55;
padding-left: 16px;
position: relative;
}
.esit-bullets li::before {
content: "";
position: absolute;
left: 2px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--danger-calm);
}
/* 相手がいる事故のときだけの「聞くこと3点」：最重要ではないので、グレーの点線＋グレー地の控えめな箱に */
.esit-ask {
margin-top: 12px;
padding: 10px 12px;
background: var(--cream-deep);
border: 1.5px dashed var(--border);
border-radius: var(--radius-sm);
}
.esit-ask__title { font-size: 12.5px; font-weight: 800; color: var(--text-muted-strong); margin-bottom: 6px; line-height: 1.4; }
.esit-ask__list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.esit-ask__list li {
font-size: 12.5px;
color: var(--text-sub);
line-height: 1.5;
padding-left: 18px;
position: relative;
}
.esit-ask__list li::before { content: "✓"; position: absolute; left: 0; color: var(--text-muted-strong); font-weight: 800; }
/* JNTO 観光ホットライン：他の状況と同格の見出し項目（ピンク見出し）＋タップ発信ボタン */
.esit-hotline__lead { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.45; }
.esit-hotline__body { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin-top: 4px; }
.esit-call {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
margin: 10px 0 8px;
padding: 12px 16px;
background: var(--danger-calm);
color: #fff;
border: 2px solid var(--danger-deep);
border-radius: var(--radius-md);
box-shadow: 2px 2px 0 var(--danger-deep);
transition: transform 0.1s, box-shadow 0.1s;
}
.esit-call:active { transform: translate(2px, 2px); box-shadow: none; }
.esit-call__icon { display: flex; flex-shrink: 0; }
.esit-call__num {
font-size: 21px;
font-weight: 800;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.esit-hotline__foot { font-size: 12px; color: var(--text-muted-strong); line-height: 1.55; }
/* 運転・安全ガイドカード */
.drive-card {
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow);
}
.drive-card--winter { border-color: var(--winter-border); box-shadow: 3px 3px 0 var(--winter-border); }
/* 「旅の準備」タブのマナーカードと同じ色合いに統一（紺地ベタ＋クリーム文字＋マスタード二重罫） */
.drive-card__header {
padding: 12px 16px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.08em;
border-bottom: 3px double var(--mustard);
display: flex;
align-items: center;
gap: 8px;
background: var(--ink);
color: var(--cream);
}
.drive-card--winter .drive-card__header {
background: var(--winter-bg);
color: var(--winter-text);
border-bottom-color: var(--winter-border);
}
.drive-card__header-icon { display: flex; color: var(--cream); }
.drive-card--winter .drive-card__header-icon { color: var(--winter-border); }
.drive-card__hero { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--ink); }
/* 雪カードは枠・ヘッダー下線が青系なので、ヒーロー画像の下線も揃える */
.drive-card--winter .drive-card__hero { border-bottom-color: var(--winter-border); }
.drive-card__body {
padding: 4px 16px 12px;
}
.drive-block { margin-top: 12px; }
/* セクション区切りの点線。ステップ内の区切り線（.step-list__item）を廃止したので、
カード内に残る点線はこれ「だけ」＝セクションの合図として自動的に格上げされる。
上マージンを広めに取り「大きい区切り＝広い間（ま）」で階層を余白でも示す */
.drive-divider { margin: 22px 0 8px; border-top: 1px dashed var(--border); }
.drive-block__heading {
font-size: 13px;
font-weight: 800;
color: var(--ink);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
/* セクション見出しの頭にトマトの小バー。線に頼らず「ここから新セクション」を示し、
ステップ内の区切り（番号で表現）との階層差を色アクセントでも付ける */
.drive-block__heading::before {
content: "";
flex-shrink: 0;
width: 3px;
height: 1em;
background: var(--tomato);
border-radius: 2px;
}
.drive-block__body {
font-size: 13px;
color: var(--text-sub);
line-height: 1.7;
}
/* 雑誌風ナンバリング（マナーカードと同じ形。大きい番号＋太字見出し＋説明・点線区切り）。
旧「クリーム箱＋左だけ太線」の箇条書きは廃止し、これに統一 */
.step-list { list-style: none; margin-top: 4px; }
/* ステップ間の点線は廃止。連番（大きいトマトの斜体番号）がグルーピングを担うので線は不要。
線を消すことで「セクション区切りの点線」と同化して階層が潰れる問題を解消し、
余白を詰めて「ステップ同士は近い＝1グループ」という近接の合図を強める */
.step-list__item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
}
.step-list__item:first-child { padding-top: 2px; }
.step-list__item:last-child { padding-bottom: 0; }
.step-list__num {
flex-shrink: 0;
width: 26px;
font-size: 22px;
font-weight: 800;
font-style: italic;
line-height: 1.1;
color: var(--tomato);
text-align: center;
}
.step-list__text { min-width: 0; flex: 1; }
.step-list__title {
font-size: 13px;
font-weight: 800;
color: var(--ink);
line-height: 1.4;
margin-bottom: 2px;
}
.step-list__body {
font-size: 12.5px;
color: var(--text-sub);
line-height: 1.6;
}
/* 説明文のない単発ステップ（例：ETCの通り方）は本文を主役に少し強めに */
.step-list__body--solo { color: var(--text); font-weight: 600; padding-top: 2px; }
/* 💡ヒント: 左太線ボックスではなく、全面のやわらかい地色ブロック */
.drive-tip {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
padding: 10px 12px;
background: var(--alert-lv1-bg);
border-radius: var(--radius-sm);
font-size: 12.5px;
color: var(--warn-text);
line-height: 1.6;
}
.drive-tip__icon { flex-shrink: 0; display: flex; margin-top: 2px; }
/* レーン見分け画像（無いときはプレースホルダー枠） */
.drive-figure { margin-top: 4px; }
.drive-figure img { width: 100%; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.drive-figure__ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 116px;
padding: 16px;
background: var(--cream-deep);
border: 2px dashed var(--mustard-deep);
border-radius: var(--radius-sm);
color: var(--text-muted-strong);
font-size: 12px;
text-align: center;
line-height: 1.5;
}
.drive-figure__ph-icon { display: flex; }
.drive-figure__cap { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: center; }
/* マップ/コピーボタン（おすすめスタンドで使用） */
.drive-actions { display: flex; gap: 8px; margin-top: 10px; }
.drive-action {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: var(--tap-min);
padding: 8px 10px;
border: 2px solid var(--ink);
border-radius: var(--radius-md);
font-size: 12.5px;
font-weight: 800;
box-shadow: var(--shadow-sm);
transition: transform 0.1s, box-shadow 0.1s;
}
.drive-action:active { transform: translate(2px, 2px); box-shadow: none; }
.drive-action svg { flex-shrink: 0; }
.drive-action--map { background: var(--ink); color: var(--cream); }
.drive-action--copy { background: var(--paper); color: var(--ink); }
/* カード1: ハンドルの位置は？（国籍で出し分け） */
.handle-headline { font-size: 15px; font-weight: 800; line-height: 1.4; margin-top: 4px; color: var(--ink); }
.handle-headline--same,
.handle-headline--opposite,
.handle-headline--unknown { color: var(--ink); }
/* 見出し内の国名を赤で強調 */
/* 見出しの国名を緑の白抜き四角で強調（免許ガイドの .lic-name・気温の旬ラベルと統一したパーソナライズ表現） */
.handle-name {
display: inline-block; background: var(--accent); color: var(--white);
padding: 1px 8px; margin: 0 3px; border-radius: var(--radius-sm); font-weight: 800;
letter-spacing: 0.02em;
}
.handle-body { font-size: 13px; color: var(--text-sub); line-height: 1.7; margin-top: 6px; }
.drive-block--warn {
background: var(--danger-bg);
border-left: 4px solid var(--danger);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 8px 12px;
font-size: 13px;
color: var(--danger-text);
line-height: 1.6;
display: flex;
gap: 8px;
align-items: flex-start;
}
/* 満タンブロックの締めの✓リマインド（レシート提示など・見出しにはしない格下げ表示） */
.drive-check {
display: flex;
gap: 6px;
margin-top: 8px;
font-size: 12.5px;
color: var(--text-sub);
line-height: 1.55;
}
.drive-check__mark { flex-shrink: 0; font-weight: 800; color: var(--ink); }
/* おすすめスタンド：②のメモ風の箱。「おすすめ」はステッカー式・写真は大きめ全幅ですっきり */
.drive-stand {
margin-top: 10px;
padding: 10px 12px;
background: var(--cream);
border: 1px dashed var(--mustard-deep);
border-radius: var(--radius-sm);
}
.drive-stand__figure { position: relative; }
.drive-stand__photo {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.drive-stand__photo--ph {
display: flex;
align-items: center;
justify-content: center;
background: var(--cream-deep);
font-size: 26px;
}
/* 「おすすめ」ステッカー（写真の左上に貼る缶バッジ風） */
.drive-stand__badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--tomato);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 3px 10px;
border-radius: var(--radius-full);
border: 1.5px solid #fff;
box-shadow: var(--shadow-sm);
}
.drive-stand__name { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.4; margin-top: 8px; }
.drive-stand__sub { font-size: 12px; color: var(--text-muted-strong); margin-top: 1px; line-height: 1.4; }
.drive-stand__addr { font-size: 12.5px; color: var(--text-sub); margin-top: 6px; line-height: 1.4; }
.drive-stand .drive-actions { margin-top: 10px; }
.drive-stand__memo {
display: flex;
gap: 6px;
margin-top: 8px;
font-size: 12px;
color: var(--text-muted-strong);
line-height: 1.55;
}
.drive-stand__memo > span:first-child { flex-shrink: 0; display: flex; margin-top: 2px; color: var(--mustard-deep); }
/* ===== タブ4: 道具 ===== */
.gear-section { padding: 16px; }
/* 見出しは他タブの紺見出し帯と同格に（「全部積んである」がこのタブの主役情報） */
.gear-section__title {
font-size: 15px;
font-weight: 800;
letter-spacing: 0.06em;
margin-bottom: 16px; /* 紺帯の見出しから本文へ、しっかり間を取る（10→16） */
padding: 12px 16px;
color: var(--cream);
background: var(--ink);
border-radius: var(--radius-md);
border-bottom: 3px double var(--mustard);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
}
.gear-section__lead {
font-size: 14px;
font-weight: 700;
color: var(--text);
line-height: 1.7; /* 行間に余裕（1.6→1.7） */
margin-bottom: 8px; /* 本文と注記がくっつき過ぎないように（4→8） */
}
.gear-section__note {
font-size: 11.5px;
color: var(--text-muted-strong);
line-height: 1.65; /* 行間に余裕（1.55→1.65） */
margin-bottom: 16px; /* 注記からカテゴリチップへ、間を取る（12→16） */
}
/* Video Tutorials カード: DRIVE-IN THEATER 風の看板 */
.video-tutorials {
position: relative;
margin: 16px 16px 0;
background: var(--ink);
color: var(--white);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: 3px 3px 0 var(--tomato);
padding: 12px 16px 16px;
overflow: hidden;
}
/* 看板上部の電球列 */
.video-tutorials__bulbs {
height: 12px;
margin: 0 -16px 8px;
background-image: radial-gradient(circle at 8px 6px, var(--mustard) 3px, transparent 3.5px);
background-size: 20px 12px;
background-repeat: repeat-x;
border-bottom: 1px solid var(--mustard);
}
.video-tutorials__title {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 2px dashed rgba(255,250,240,0.35);
}
/* ドライブインシアターの「スクリーン」に見立てたチュートリアル画像 */
.video-tutorials__screen {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border: 2px solid var(--cream);
border-radius: var(--radius-sm);
margin-bottom: 10px;
}
.video-tutorials__desc {
font-size: 13px;
opacity: 0.9;
line-height: 1.6;
margin-bottom: 12px;
}
.video-tutorials__must {
display: inline-block;
font-size: 10px;
font-weight: 800;
background: var(--danger);
color: #fff;
border-radius: 3px;
padding: 1px 5px;
margin-right: 4px;
vertical-align: middle;
}
.video-tutorials__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
background: var(--mustard);
color: var(--ink);
border: 2px solid var(--cream);
padding: 12px;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 800;
transition: transform 0.1s;
}
.video-tutorials__btn:active { transform: scale(0.97); }
.category-filter {
display: flex;
gap: 10px 8px; /* row-gap10 / column-gap8：折り返し2段時の縦の詰まりを緩和 */
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* iOSの慣性スクロール */
padding-bottom: 4px;
margin-bottom: 12px;
scrollbar-width: none;
}
.category-filter::-webkit-scrollbar { display: none; }
.filter-btn {
flex-shrink: 0; /* 縮まず、横スワイプ用のスクロールを確実に発生させる（見切れても切り替え可能に） */
min-height: var(--tap-min);
padding: 8px 20px; /* 横20px：radius-fullのカーブ(半径22px)に文字が食われないよう、余白をカーブとほぼ拮抗させる */
border-radius: var(--radius-full);
font-size: 14px; /* 日本語2〜4文字を1段見やすく（13→14） */
font-weight: 600;
letter-spacing: 0.02em; /* 字間に呼吸を持たせて塊感を解消 */
white-space: nowrap;
border: 2px solid var(--ink);
color: var(--ink);
background: var(--paper);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* PC（ホバー可・マウス）は横スクロールが分かりづらいので折り返して全カテゴリを常時表示 */
@media (hover: hover) and (pointer: fine) {
.category-filter { flex-wrap: wrap; overflow-x: visible; }
}
.filter-btn--active {
background: var(--ink);
color: var(--white);
border-color: var(--ink);
font-weight: 800;
}
/* 道具グリッド: 実写真サムネの2カラム */
.gear-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.gear-card {
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.gear-card--hidden { display: none; }
/* 商品写真（背景透過webp）。カードを詰めるため縦を4:3に抑える */
.gear-card__photo {
position: relative;
aspect-ratio: 4 / 3;
background: var(--paper);
border-bottom: 1px dashed var(--border);
padding: 5px;
}
.gear-card__photo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.gear-card__body {
padding: 6px 9px 8px;
flex: 1;
}
.gear-card__brand {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--tomato-deep);
text-transform: uppercase;
margin-bottom: 2px;
}
.gear-card__name {
font-size: 13px;
font-weight: 800;
line-height: 1.25;
color: var(--ink);
margin-bottom: 2px;
}
.gear-card__desc {
font-size: 11px;
color: var(--text-sub);
line-height: 1.45;
}
.gear-card__tag {
position: absolute;
top: 6px;
right: 6px;
font-size: 10px;
background: var(--winter-bg);
color: var(--winter-text);
border: 1px solid var(--winter-border);
border-radius: 3px;
padding: 1px 5px;
font-weight: 800;
z-index: 1;
}
/* ===== タブ5: 情報・FAQ ===== */
.info-section {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.info-card {
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow);
}
.info-card__header {
padding: 12px 16px;
font-size: 14px;
font-weight: 800;
border-bottom: 2px solid var(--ink);
display: flex;
align-items: center;
gap: 8px;
background: var(--mustard-soft);
color: var(--ink);
}
.info-card__body {
padding: 12px 16px;
font-size: 13px;
line-height: 1.7;
color: var(--text-sub);
}
.info-card__body p + p { margin-top: 8px; }
.info-card__body strong { color: var(--text); }
/* 免許カードは「旅の準備」タブで単体配置されるため、マナー・服装カードと横幅／リズムを揃える。
FAQタブの .info-card は .info-section の padding で内側に入るので、そちらは触らずここだけ効かせる。 */
#license-card { margin: 0 16px 16px; }
/* ===== 運転免許ガイド（国別パーソナライズ表示） =====
予約の免許発行国でカード1枚を出し分ける。バッジ語彙は
「原本のみ(赤) / アプリでOK(緑) / 確認用(グレー)」の3語のみ */
.lic-hero { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--ink); }
/* ヒーローイラストに「国を変更」を重ねるための基準枠 */
.lic-hero-wrap { position: relative; }
.lic-persona { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 4px; }
.lic-persona__text { flex: 1; min-width: 0; }
/* eyebrow は「あなた専用」の合図。赤は大見出しの国名に一本化するためミュート */
.lic-persona__label { font-size: 11.5px; font-weight: 800; color: var(--text-muted-strong); letter-spacing: 0.04em; }
.lic-persona__headline { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.5; }
/* 大見出し内の国名を紺の塗り四角＋白抜き文字で強調。国バッジを廃し「ここが“あなたの国”」を
見出しの中で直接示すことでパーソナライズ感を高める（handle-name・temp-japan__date と同じ緑白抜き表現） */
.lic-name {
display: inline-block; background: var(--accent); color: var(--white);
padding: 1px 8px; margin: 0 3px; border-radius: var(--radius-sm); font-weight: 800;
letter-spacing: 0.02em;
}
.lic-change {
flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-muted-strong);
min-height: var(--tap-min); display: flex; align-items: center;
padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-full);
background: var(--paper);
}
/* 「国を変更」はヒーローイラスト右下にオーバーレイ配置（テツさん決定・2026-07-20）。
イラストは装飾のみ＝遊休スペースの再利用で、見出し行からボタンを完全に外す。
滅多に使わない機能なので、控えめな半透明の極小ピル（探す人だけ見つかればよい）。
★ベース .lic-change の display:flex と min-height:44px を打ち消すこと。
打ち消さないと縦に間延びし、text-align:center も効かず文字が左に寄る */
.lic-change--hero {
position: absolute; bottom: 7px; right: 7px;
display: block; min-height: 0;
/* 幅は内容なり: zh「變更國家」/ja「国を変更」は1行の極小ピル、
長い英語「Change country」だけ max-width で2行に折る */
width: auto; max-width: 74px; text-align: center; white-space: normal;
font-size: 11px; font-weight: 700; line-height: 1.3; /* 9px→11px：スマホ実機で小さすぎたため一回り拡大（2026-07-20） */
/* A案（テツさん決定・2026-07-20）: 控えめグレー文字＋うっすら紺の枠＋紙色85%。
3案比較（グレー薄め/グレー×不透過）の結果、読める控えめさのバランスでこれに確定 */
color: var(--text-muted-strong);
padding: 5px 9px; border: 1px solid rgba(30, 58, 95, 0.3); border-radius: 9px; /* タップ域も一回り拡大 */
background: rgba(252, 244, 225, 0.85); /* --paper の半透明。絵がうっすら透ける */
}
.lic-change--hero:active { transform: translate(1px, 1px); }
/* IDP国だけ最上部に出す赤警告（左太線でなく全面のやわらかい地色ブロック） */
.lic-warn {
margin: 12px 16px 0; padding: 10px 12px;
background: var(--danger-bg); border-radius: var(--radius-sm);
font-size: 12px; color: var(--danger-text); line-height: 1.6;
display: flex; gap: 8px; align-items: flex-start;
}
.lic-warn svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
/* 持ち物タグ */
.lic-tags { display: flex; flex-direction: column; gap: 8px; margin: 12px 16px 0; }
.lic-tag {
display: flex; align-items: center; gap: 10px; padding: 12px 14px;
border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--paper);
box-shadow: var(--shadow-sm);
}
.lic-tag--soft { border-style: dashed; box-shadow: none; }
.lic-tag__icon { flex-shrink: 0; display: flex; color: var(--ink); }
.lic-tag__text { flex: 1; min-width: 0; }
.lic-tag__name { display: block; font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.lic-tag__sub { display: block; font-size: 11px; color: var(--text-sub); line-height: 1.5; }
.lic-tag__meta {
flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
padding: 4px 7px; border-radius: 3px;
/* ハンコ幅を内容ぴったりに縮める。英語は辞書の \n で2行スタンプにして横幅を圧縮し、
左の項目名（IDP・パスポート等の長い英語）のスペースを空ける。ja/zhは短く1行のまま */
white-space: pre-line; text-align: center; line-height: 1.2;
}
.lic-tag__meta--original { background: var(--tomato-deep); color: var(--white); }
.lic-tag__meta--digital { background: var(--accent); color: var(--white); }
.lic-tag__meta--check { background: var(--cream-deep); color: var(--text-muted-strong); }
/* 国別の黄色注意（drive-tip を単体カード内で使うための余白調整） */
.lic-tip { margin: 12px 16px 0; }
/* 取り方・注意事項（アコーディオンにせず常時表示） */
.lic-detail { margin: 12px 16px; padding-top: 10px; border-top: 1px dashed var(--border); }
.lic-detail--flat { border-top: none; padding-top: 2px; }
.lic-detail__title { font-size: 11px; font-weight: 800; color: var(--tomato-deep); letter-spacing: 0.08em; margin-bottom: 4px; }
.lic-detail__body { font-size: 12.5px; color: var(--text-sub); line-height: 1.7; }
.lic-detail__body p + p { margin-top: 6px; }
.lic-detail__link { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: underline; }
.license-btn--detail { margin: 10px 0 0; }
/* 国選択（country 不明時／「変更」タップ時） */
.lic-select-lead { padding: 16px 16px 4px; }
.lic-select-lead__headline { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.lic-select-lead__sub { font-size: 12.5px; color: var(--text-sub); margin-top: 4px; }
.lic-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 16px; }
.lic-chip {
display: flex; align-items: center; gap: 6px; min-height: 40px;
padding: 6px 12px 6px 6px; border: 2px solid var(--ink); border-radius: var(--radius-full);
background: var(--paper); box-shadow: var(--shadow-sm);
font-size: 12px; font-weight: 800; color: var(--ink);
}
.lic-chip:active { transform: translate(2px, 2px); box-shadow: none; }
.lic-chip__code {
flex-shrink: 0; min-width: 24px; height: 24px; padding: 0 3px; border-radius: var(--radius-full);
background: var(--ink); color: var(--cream); display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
}
.lic-chip--other { border-style: dashed; box-shadow: none; }
.lic-chip--other .lic-chip__code { background: var(--text-muted); }
.lic-backrow { padding: 0 16px 14px; display: flex; }
.license-note {
padding: 12px 16px;
background: var(--alert-lv1-bg);
border-top: 1px solid var(--alert-lv1-border);
font-size: 13px;
color: var(--warn-text);
line-height: 1.5;
font-weight: 600;
}
/* 免許の詳細リンクボタン（外部の公式案内へ） */
.license-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--tap-min);
margin: 12px 16px;
padding: 10px 16px;
background: var(--ink);
color: var(--cream);
border: 2px solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-size: 14px;
font-weight: 800;
transition: transform 0.1s, box-shadow 0.1s;
}
.license-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.license-btn svg { flex-shrink: 0; }
/* FAQ */
.faq-category { margin-bottom: 4px; }
.faq-category__title {
padding: 12px 16px;
font-size: 11px;
font-weight: 800;
color: var(--tomato-deep);
text-transform: uppercase;
letter-spacing: 0.1em;
background: var(--cream);
border-bottom: 1px solid var(--border);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
min-height: var(--tap-min);
padding: 12px 16px;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
cursor: pointer;
background: var(--paper);
line-height: 1.4;
}
.faq-question__arrow {
font-size: 11px;
color: var(--text-muted);
flex-shrink: 0;
transition: transform 0.2s;
}
.faq-item--open .faq-question__arrow { transform: rotate(180deg); }
.faq-answer {
display: none;
padding: 12px 16px 16px;
font-size: 13px;
line-height: 1.7;
color: var(--text-sub);
background: var(--cream);
}
.faq-item--open .faq-answer { display: block; }
.faq-answer a { color: var(--accent); text-decoration: underline; }
/* FAQ 検索ボックス＋カテゴリチップ（チップ本体は道具タブの .filter-btn を共用） */
.faq-tools {
padding: 12px 16px 8px;
border-bottom: 1px solid var(--border);
background: var(--paper);
}
.faq-search {
width: 100%;
min-height: var(--tap-min);
padding: 10px 14px;
margin-bottom: 10px;
border: 2px solid var(--ink);
border-radius: var(--radius-md);
background: var(--cream);
font-size: 16px;
color: var(--text);
}
.faq-search::placeholder { color: var(--text-muted); }
/* FAQのチップはスマホでも横スクロールにせず、最初から全カテゴリを折り返して見せる
（何個あるか分からない問題を防ぐ。.category-filter の横スワイプ挙動を上書き） */
.faq-chips {
flex-wrap: wrap;
overflow-x: visible;
margin-bottom: 4px;
}
/* ピン留め「よく見られる質問」: 見出しをカードヘッダーと同じマスタードで格上げ */
/* よく見られる質問＝「近道リスト」。下の一覧と別物に見えるよう濃紺で囲ったボックス＋番号バッジ */
.faq-category--top {
margin: 0 12px 16px;
border: 2px solid var(--ink);
border-radius: var(--radius-md);
background: var(--mustard-soft);
overflow: hidden;
counter-reset: shortcut;
}
.faq-category--top .faq-category__title {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--ink);
font-size: 13px;
text-transform: none;
letter-spacing: 0;
border-bottom: 1px solid var(--mustard-deep);
}
.faq-category--top .faq-category__title svg { flex-shrink: 0; }
.faq-shortcut__sub {
margin-left: auto;
font-size: 10px;
font-weight: 700;
color: var(--mustard-deep);
letter-spacing: 0;
}
.faq-category--top .faq-item { border-bottom-color: var(--mustard-deep); }
.faq-category--top .faq-question {
counter-increment: shortcut;
justify-content: flex-start;
background: var(--paper);
font-size: 13px;
}
.faq-category--top .faq-question .faq-question__arrow { margin-left: auto; }
.faq-category--top .faq-question::before {
content: counter(shortcut);
flex-shrink: 0;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: var(--ink);
color: var(--cream);
font-size: 11px;
font-weight: 800;
}
/* 回答内の外部リンク（保険ページ・Googleマップ等） */
.faq-answer__links {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-answer__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
}
.faq-answer__link svg { flex-shrink: 0; }
/* 回答内の強調（*語*＝赤字 / **語**＝赤字＋太字）。最重要の一言を目立たせる用 */
.faq-em { color: var(--danger); }
.faq-em--strong { color: var(--danger); font-weight: 800; }
/* 回答内のページ内ジャンプボタン（該当タブ・カードへ移動）。外部リンクと見分くよう緑の縁取り */
.faq-answer__jumps {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-answer__jump {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
min-height: var(--tap-min);
padding: 10px 14px;
border: none;
border-radius: var(--radius-md);
background: var(--ink);
color: var(--cream);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
text-align: left;
cursor: pointer;
}
.faq-answer__jump svg { flex-shrink: 0; }
.faq-answer__jump:active { opacity: 0.85; }
/* 回答内の補足画像・動画（調味料セット／入口ポールの固定方法など） */
.faq-answer__img,
.faq-answer__video {
display: block;
width: 100%;
max-width: 360px;
margin: 12px 0 4px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
/* 検索0件（連絡ボタンは .estep__contacts / .contact-btn を流用） */
.faq-empty {
padding: 20px 16px 0;
font-size: 13px;
color: var(--text-sub);
line-height: 1.7;
}
.faq-empty__cta { padding: 0 16px 16px; }
/* レビュー導線 */
.review-cta {
background: var(--tomato-deep);
color: var(--white);
border: 2px solid var(--ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 24px 16px;
text-align: center;
}
.review-cta__title {
font-size: 16px;
font-weight: 800;
margin-bottom: 8px;
}
.review-cta__text {
font-size: 13px;
opacity: 0.92;
line-height: 1.6;
margin-bottom: 16px;
}
.review-cta__stars {
display: flex;
justify-content: center;
gap: 4px;
margin-bottom: 12px;
color: var(--star-gold);
}
.review-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
background: var(--cream);
color: var(--tomato-deep);
border: 2px solid var(--ink);
box-shadow: var(--shadow-sm);
padding: 12px 28px;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 800;
transition: transform 0.1s, box-shadow 0.1s;
}
.review-cta__btn:active { transform: translate(2px, 2px); box-shadow: none; }
/* ===== ローディング ===== */
.loading-placeholder {
padding: 40px 16px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.loading-spinner {
width: 28px;
height: 28px;
border: 3px solid var(--cream-deep);
border-top-color: var(--tomato);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== トースト ===== */
.toast {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: var(--ink);
color: var(--white);
border: 2px solid var(--cream);
font-size: 13px;
font-weight: 700;
padding: 12px 20px;
border-radius: var(--radius-full);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s, transform 0.25s;
z-index: 300;
white-space: nowrap;
}
.toast--show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ===== フッター ===== */
.footer {
background: var(--ink);
border-top: 2px solid var(--ink);
color: rgba(255,250,240,0.75);
padding: 16px;
text-align: center;
font-size: 11px;
letter-spacing: 0.02em;
}
.footer a { color: var(--mustard); }
/* ============================================================
モーション演出（v5c-motion で検証済みの採用分のみ移植）
デザイン・配色・レイアウトは既存のまま。動きだけを足す。
ルール: transform / opacity 中心・レトロポスターの世界観を壊さない・
prefers-reduced-motion では全て無効（末尾の全停止ブロック＋JS側ガード）
============================================================ */
/* ----- 1. スクロール出現（JSが .anim-item を付与。JS無効時は素の表示のまま）
スマホでも伝わるよう強め: 28px下から・跳ね返り（オーバーシュート）付き・時間差90ms ----- */
@media (prefers-reduced-motion: no-preference) {
.anim-item { opacity: 0; transform: translateY(28px) scale(0.96); }
.anim-item.anim-in {
opacity: 1;
transform: none;
transition: opacity 0.55s ease-out, transform 0.65s cubic-bezier(0.22, 1.28, 0.36, 1);
transition-delay: var(--anim-delay, 0ms);
}
/* 出現完了後は transition を外す（:activeの押下反応などを既存どおり機敏に保つ。motion.jsが付与） */
.anim-item.anim-done { transition: none; }
}
/* 印刷時は出現前のカードも必ず表示する（チケット印刷対策） */
@media print {
.anim-item { opacity: 1 !important; transform: none !important; }
}
/* ----- 2. ファーストビュー ----- */
/* ようこそ＋名前: ふわっとフェードイン（transformは位置決めに使用中のためopacityのみ） */
.hp-greet { animation: greet-in 0.7s ease-out 0.15s backwards; }
@keyframes greet-in { from { opacity: 0; } }
/* 車イラスト: 走り込み演出のあと、ずっと軽く揺れて「旅に出たくなる」アイドリング */
.hp-vehicle:not(.hp-vehicle--intro) .poster__art-img {
animation: veh-idle 4.2s ease-in-out 0.6s infinite;
}
@keyframes veh-idle {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-1.4%) rotate(-0.35deg); }
}
/* ----- 3. チケット: ヘッダーの ★ ★ ★ がゆっくりまたたく ----- */
.ticket__head-star { animation: star-blink 2.8s ease-in-out infinite; }
@keyframes star-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* ----- 4. あなたの旅（進捗トラック）: 線が伸びてドットが順番にポン ----- */
.journey.anim-in .jstep__dot { animation: jdot-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
.journey.anim-in .jstep:nth-child(2) .jstep__dot { animation-delay: 0.22s; }
.journey.anim-in .jstep:nth-child(3) .jstep__dot { animation-delay: 0.44s; }
.journey.anim-in .jstep:not(:first-child)::before {
transform-origin: left;
animation: jline-draw 0.4s ease-out backwards;
}
.journey.anim-in .jstep:nth-child(2)::before { animation-delay: 0.28s; }
.journey.anim-in .jstep:nth-child(3)::before { animation-delay: 0.5s; }
@keyframes jdot-pop { from { transform: scale(0.3); opacity: 0; } }
@keyframes jline-draw { from { transform: scaleX(0); } }
/* 現在地ドットから波紋がふわっと広がる（いまここ！が一目で分かる） */
.jstep--now .jstep__dot::after {
content: "";
position: absolute;
inset: -7px;
border: 2px solid var(--ink);
border-radius: 50%;
opacity: 0;
animation: jnow-ring 2.4s ease-out 0.9s infinite;
pointer-events: none;
}
@keyframes jnow-ring {
0% { transform: scale(0.72); opacity: 0.5; }
65% { transform: scale(1.12); opacity: 0; }
100% { transform: scale(1.12); opacity: 0; }
}
/* ----- 5. タブナビ: 選んだタブのアイコンがぴょこんと跳ねる ----- */
.tab-nav__item--active .tab-nav__icon {
animation: tabicon-pop 0.4s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes tabicon-pop {
0% { transform: translateY(0) scale(1); }
40% { transform: translateY(-3px) scale(1.18); }
100% { transform: translateY(0) scale(1); }
}
/* ----- 6. レビューの星: 順番にきらきら ----- */
.review-cta__stars svg { animation: star-tw 2.4s ease-in-out infinite; }
.review-cta__stars svg:nth-child(2) { animation-delay: 0.2s; }
.review-cta__stars svg:nth-child(3) { animation-delay: 0.4s; }
.review-cta__stars svg:nth-child(4) { animation-delay: 0.6s; }
.review-cta__stars svg:nth-child(5) { animation-delay: 0.8s; }
@keyframes star-tw {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.82); opacity: 0.55; }
}
/* ----- 7. さりげない誘い ----- */
/* 「タップで開く」チップがそっと脈打つ（押せることが伝わる） */
.camp-pdf__hint, .map-cta__hint { animation: hint-pop 2.4s ease-in-out infinite; }
@keyframes hint-pop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* LINE / Instagram アイコンが時々ぷるっと揺れる（連絡しやすさの気配） */
.contact-btn__icon svg { animation: icon-wiggle 7s ease-in-out infinite; }
.contact-btn--ig .contact-btn__icon svg { animation-delay: 3.5s; }
@keyframes icon-wiggle {
0%, 86%, 100% { transform: rotate(0); }
89% { transform: rotate(-10deg); }
92% { transform: rotate(9deg); }
95% { transform: rotate(-5deg); }
}
/* ===== 返却後: カウントダウン空箱の上に重ねるクーポンボタン ===== */
/* 焼き込み済みの空クリーム箱（DAYS/HOURS/MIN）をまるごと覆い隠すサイズで、
紺帯の右半分にマスタードのボタンを重ねる。座標は数字ボックスと同じ y=87.8%。 */
/* 既定は非表示。返却後フェーズだけ JS が hidden を外して表示する。
（.hp-coupon-btn に display:flex を持たせると hidden 属性を打ち消すので、
この [hidden] ルールを必ず併記して"隠す"を最優先させる） */
.hp-coupon-btn[hidden] { display: none; }
.hp-coupon-btn {
/* 返却後ポスター（紺帯なし）の下部の空きスペースに、クーポン誘導を大きくドーンと配置。
画像の下側イラスト帯を避けつつ、横幅たっぷりで主役級の存在感にする。 */
position: absolute;
top: 88%;
left: 50%;
transform: translate(-50%, -50%);
width: 74%;
height: 13%;
/* 文字は縦2行・完全中央（アイコン等でズレないよう純粋に中央寄せ） */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.1cqw;
/* 右端の保存バッジ分だけ右パディングを厚めに取り、文字が被らないようにする */
padding: 0 9cqw 0 3cqw;
color: var(--ink);
border: 0.5cqw solid var(--ink);
border-radius: 1.8cqw;
/* 立体的な"押せるボタン"あしらい: 上明るく下濃いグラデ＋内側の上ハイライト＋やわらか影 */
background: linear-gradient(180deg, #f2b659 0%, var(--mustard) 52%, #d9922f 100%);
box-shadow:
inset 0 0.55cqw 0 rgba(255, 250, 240, 0.45),
inset 0 -0.55cqw 0 rgba(20, 41, 63, 0.14),
0 0.5cqw 0.9cqw rgba(20, 41, 63, 0.3);
text-align: center;
line-height: 1.18;
cursor: pointer;
transition: transform 0.08s, box-shadow 0.08s, filter 0.08s;
}
.hp-coupon-btn__l1 { font-size: 2.9cqw; font-weight: 700; }
.hp-coupon-btn__l2 { font-size: 3.9cqw; font-weight: 800; letter-spacing: 0.01em; }
/* 右端: タップできることを示す「開く（›）」の円形ピクトグラム（クリーム地の丸バッジ） */
.hp-coupon-btn__go {
position: absolute;
right: 2.4cqw;
top: 50%;
transform: translateY(-50%);
width: 7cqw;
height: 7cqw;
display: flex;
align-items: center;
justify-content: center;
background: var(--cream);
border: 0.4cqw solid var(--ink);
border-radius: 50%;
box-shadow: 0 0.25cqw 0 rgba(20, 41, 63, 0.22);
color: var(--ink);
}
.hp-coupon-btn__go svg { width: 58%; height: 58%; display: block; }
/* 押した瞬間: 少し沈んでハイライトが消え、へこむ */
.hp-coupon-btn:active {
transform: translate(-50%, -50%) translateY(0.6cqw);
box-shadow:
inset 0 0.5cqw 0.7cqw rgba(20, 41, 63, 0.28),
0 0.15cqw 0.4cqw rgba(20, 41, 63, 0.25);
filter: brightness(0.98);
}
/* 返却後は、カウントダウンのラベル「また次の旅で！」をボタンと同じ高さ(中心)に合わせて
左半分（ボタンの左側の空き）の中央にきっちり寄せる */
.hp-cdlabel--after { top: 89.2%; }
/* ===== 次回クーポン モーダル ===== */
.coupon-modal[hidden] { display: none; }
.coupon-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.coupon-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 41, 63, 0.62);
backdrop-filter: blur(2px);
}
.coupon-modal__panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden; /* 本文(__body)だけスクロール。枠と見出しは固定 */
background: var(--paper);
border: 2px solid var(--ink);
border-radius: var(--radius-lg, 16px);
box-shadow: 0 12px 40px rgba(20, 41, 63, 0.35);
animation: coupon-pop 0.32s cubic-bezier(0.2, 1.1, 0.35, 1) both;
}
@keyframes coupon-pop {
0% { transform: translateY(14px) scale(0.96); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* 見出しバー: タイトルを中央、×を右に固定。細いヘアラインで本文と区切る */
.coupon-modal__header {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 48px;
border-bottom: 1px solid rgba(20, 41, 63, 0.12);
}
.coupon-modal__title {
font-size: 15px;
font-weight: 800;
color: var(--ink);
letter-spacing: 0.02em;
line-height: 1.4;
margin: 0;
}
.coupon-modal__close {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--ink);
background: var(--cream, #f6ead2);
border: 1px solid rgba(20, 41, 63, 0.15);
cursor: pointer;
transition: background 0.1s, transform 0.08s;
}
.coupon-modal__close:active { background: var(--cream-deep); transform: translateY(-50%) scale(0.92); }
/* スクロールする本文 */
.coupon-modal__body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 18px 18px 22px;
text-align: center;
}
.coupon-modal__imgwrap { line-height: 0; }
.coupon-modal__img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(20, 41, 63, 0.18);
}
/* 保存導線＝長押し一択（iPhone/Android共通）。唯一の保存方法なので目立たせる */
.coupon-modal__hint {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 14px 0 0;
padding: 12px 14px;
background: var(--cream, #f6ead2);
border: 1px dashed rgba(20, 41, 63, 0.28);
border-radius: var(--radius-md, 12px);
font-size: 13.5px;
font-weight: 700;
line-height: 1.45;
color: var(--ink);
}
.coupon-modal__hint-ico { flex: 0 0 auto; }
.coupon-modal__note {
font-size: 12.5px;
line-height: 1.6;
color: var(--text-sub);
margin: 12px 4px 0;
text-align: left;
}
/* コード救済：画像を保存できなくてもコードだけはコピーで残せる */
.coupon-modal__code {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 8px;
margin: 12px 4px 0;
font-size: 12.5px;
color: var(--text-sub);
}
.coupon-modal__code-value {
font-weight: 800;
letter-spacing: 0.04em;
color: var(--ink);
background: var(--cream, #f6ead2);
padding: 3px 8px;
border-radius: var(--radius-sm, 8px);
}
.coupon-modal__code-copy {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
min-height: 32px;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
transition: background 0.1s;
}
.coupon-modal__code-copy:active { background: var(--cream-deep); }
/* タップ領域の確保: 見た目（ボタンの形）は変えず、不可視の当たり判定だけ 44px に広げる。
言語ボタンはテツさん指定でデザインそのまま＝擬似要素方式でヒット領域のみ拡張。 */
.lang-btn, .coupon-modal__code-copy { position: relative; }
.lang-btn::after,
.coupon-modal__close::after,
.coupon-modal__code-copy::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: var(--tap-min);
min-height: var(--tap-min);
transform: translate(-50%, -50%);
}
/* 友達も自分も使える＋SNSシェアの誘い（欄外メッセージ） */
.coupon-modal__share {
font-size: 13px;
line-height: 1.65;
color: var(--ink);
font-weight: 600;
margin: 12px 4px 0;
text-align: left;
}
.coupon-modal__share:empty { display: none; }
/* クーポン画像を生成している間のプレースホルダ（絵葉書比率 2:3） */
.coupon-modal__imgwrap {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.coupon-modal.is-loading .coupon-modal__imgwrap {
aspect-ratio: 2 / 3;
background: var(--cream, #f6ead2);
}
.coupon-modal.is-loading .coupon-modal__imgwrap::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 34px; height: 34px;
margin: -17px 0 0 -17px;
border: 3px solid rgba(20, 41, 63, 0.2);
border-top-color: var(--ink, #1e3a5f);
border-radius: 50%;
animation: coupon-spin 0.8s linear infinite;
}
@keyframes coupon-spin { to { transform: rotate(360deg); } }
/* 画像生成に失敗/タイムアウトした時のフォールバック表示:
画像枠と長押し保存ヒントだけ隠し、タイトル・シェア文・クーポンコード＋コピーは残す
（クーポンとして最低限成立させる。文言・翻訳の追加なしで済む構成） */
.coupon-modal--noimg .coupon-modal__imgwrap,
.coupon-modal--noimg .coupon-modal__hint {
display: none;
}
/* クーポン専用フォント（使う文字だけサブセット化した軽量woff2） */
@font-face {
font-family: 'coupon-huninn';
src: url('../assets/coupon/huninn-coupon.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'coupon-caveat';
src: url('../assets/coupon/caveat-coupon.woff2') format('woff2');
font-weight: 600;
font-display: swap;
}
/* ===== アクセシビリティ: 動きを減らす設定では全アニメ・遷移を停止 ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
/* ===== 改行位置の制御用: フローテキストの本文コンテナは辞書/コンテンツ側の \n を
意図した改行として尊重する（white-space:pre-line ≒ 通常＋\n改行のみ。\n が無ければ
従来どおり自動折り返しなので、\n を入れるまで見た目は変わらない＝安全）。
iPhone基準で「泣き別れ・1文字孤立・句読点前の中途半端な折り返し」を辞書側の \n で直すため。 */
/* カードのルートに付けて、内部の本文テキスト（tip/caption/warn/hotline/step/免許本文など）へ
white-space:pre-line を継承させる。nowrap 指定の子（バッジ等）は個別指定で上書きされるため影響なし。 */
.drive-card, .emergency-card, .manners-card, #license-card,
.phase-banner__body, .congestion-card__body,
.faq-question, .faq-answer__text,
.coupon-modal__share, .coupon-modal__note, .coupon-modal__hint span {
white-space: pre-line; /* 文言側の \n を意図した改行として反映 */
text-wrap: pretty; /* さらに折り返す行は孤立語（1語だけ次行）を避けて整える */
}