/*
* 歴ぶら v2 デザインプロトタイプ準拠 CSS
* 出典: 歴ぶら_デザインプロトタイプ_v0.91.html (style ブロック2 を抽出)
* フォント: Zen Maru Gothic
* カラーパレット: 藍 (--indigo) + 金 (--gold) + 朱 (--crimson) + 草 (--sage)
*/
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
--vermilion:#cd4762;
--ink:#1a1208;
--indigo:#1d3c5c;
--indigo-light:#86a39f;
--indigo-dark:#afc28a;
--gold:#bc9b58;
--gold-light:#d4c070;
--gold-pale:#f7eecf;
--crimson:#9e2d40;
--sage:#4a6741;
--bg-shell:#f7eecf;
--bg-card:#fbf6e5;
--bg-input:#fdfcf7;
--border-warm:rgba(90,60,20,.18);
--border-light:rgba(90,60,20,.10);
--text-primary:#1a1208;
--text-sec:#3d2e1a;
--text-muted:#7a6850;
--text-faint:#b0997a;
--nh:136px;
--bh:72px;
--radius:16px;
--radius-sm:10px;
--shadow:0 2px 20px rgba(26,18,8,.10);
--shadow-lg:0 8px 48px rgba(26,18,8,.20);
--transition:.26s cubic-bezier(.4,0,.2,1);
}
/* 2026-05-28: document-scroll 化 (iOS Safari URL バー自動縮小のため)。
旧: #app を 100dvh に固定 + .tab-pane 内側スクロール → window scroll が起きず Safari ツールバー縮まない。
新: 文書全体が普通に伸びてスクロール、#bnav は position:fixed で常駐 (Cocoon 構造)。
めぐる(map) タブは内部固定が必要なので body[data-current-tab="meguru"] で旧構造に巻き戻す。 */
/* 2026-06-23 フォント改修: 本文は可読性の高い Noto Sans JP に。見出し/ボタン/数字/バッジ等は
個別に 'Zen Maru Gothic' を指定済みのため、body を変えるだけで本文だけ切り替わる。 */
html,body{height:auto;font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;font-size:16px;background:#1a0e08}
/* 🆕 2026-07-19 下端クリアランスは「max(30px, safe-area)」= 最低30px確保、ただしノッチ機の
safe-area(≈34px)には積み増さない(以前の safe+30=64px は上げ過ぎだった)。#bnav と同式。 */
body{display:flex;justify-content:center;align-items:flex-start;padding:0;padding-bottom:calc(var(--bh) + max(30px, env(safe-area-inset-bottom)));min-height:100vh;min-height:100dvh;background-image:url('../images/bg_illustration.jpg');background-size:cover;background-position:center top;background-attachment:fixed;background-repeat:no-repeat}
#app{width:100%;max-width:500px;min-height:100vh;min-height:100dvh;background:rgba(247,238,207,.70);display:flex;flex-direction:column;position:relative;box-shadow:0 0 80px rgba(0,0,0,.6)}
#hdr{height:var(--nh);background:var(--indigo-dark);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;z-index:20;position:sticky;top:0}
#hdr::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--gold) 35%,var(--gold-light) 50%,var(--gold) 65%,transparent 100%)}
#hdr-logo{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none}
#hdr-logo-mark{width:34px;height:34px;background:#1d3c5c;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 2px 8px rgba(29,60,92,.35)}
#auth-btn,.hdr-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:22px;background:rgba(29,60,92,.10);border:1px solid rgba(29,60,92,.25);color:#1d3c5c;cursor:pointer;font-size:13px;font-family:inherit;transition:var(--transition);font-weight:500;text-decoration:none}
#auth-btn:hover,.hdr-btn:hover{background:rgba(29,60,92,.20)}
#auth-dot{width:8px;height:8px;border-radius:50%;background:#888;transition:var(--transition)}
#auth-dot.member{background:#4cdf90}
/* ヘッダ右側 + 言語ドロップダウン (プロト v0_921 準拠 / 2026-05-13) */
#hdr-right{display:flex;align-items:center;gap:8px}
#lang-wrap{position:relative;display:flex;align-items:center}
#lang-btn{width:34px;height:34px;border-radius:50%;background:rgba(29,60,92,.10);border:1px solid rgba(29,60,92,.25);color:#1d3c5c;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;padding:0}
#lang-btn:hover{background:rgba(29,60,92,.20)}
#lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.22);overflow:hidden;z-index:300;display:none;min-width:120px;border:1px solid rgba(29,60,92,.12)}
#lang-menu.open{display:block}
#lang-menu button{display:block;width:100%;padding:12px 18px;background:none;border:none;font-size:14px;font-family:inherit;font-weight:600;color:var(--indigo);cursor:pointer;text-align:left;transition:background .15s}
#lang-menu button:hover{background:rgba(29,60,92,.07)}
#lang-menu button.active{color:var(--indigo);background:rgba(29,60,92,.06)}
#cnt{flex:1;position:relative;scroll-behavior:smooth}
.scr{display:none}.scr.on{display:block}
/* #bnav: viewport 下端に固定。#app と同じ 390px 幅で中央配置、safe-area 上に常駐。
2026-05-28 document-scroll 化に合わせて position:relative → position:fixed。 */
/* 🆕 2026-07-19 padding-bottom = max(30px, safe-area)。SE等(safe=0)は30px確保でブラウザ下部UIを回避、
ノッチ機(safe≈34px)は safe-area だけ(＝以前の safe+30=64px の上げ過ぎを是正)。バーは下端接地のまま .ni を逃がす。 */
#bnav{height:var(--bh);background:#1d3c5c;display:flex;position:fixed;bottom:0;left:max(0px,calc(50% - 250px));transform:none;width:min(500px,100vw);z-index:20;padding-bottom:max(30px, env(safe-area-inset-bottom));box-sizing:content-box}
#bnav::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-light) 50%,var(--gold) 70%,transparent)}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:none;background:none;font-family:inherit;padding:8px 4px;gap:3px;position:relative;color:rgba(255,255,255,.60);transition:var(--transition);text-decoration:none}
.ni.on,.ni:hover{color:#fff}
.ni.on::after{content:'';position:absolute;top:0;left:20%;right:20%;height:2.5px;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:0 0 3px 3px}
/* 🆕 2026-07-19 ボトムナビ感度改善: 下端クリアランス(max(30px,safe-area))は見た目は濃紺バーだが
タップ不可のデッドゾーンだった。各タブの当たり判定を下方向へ伸ばし、バー全体をタップ可能にする。
::after は有効タブの上部インジケータで使用中のため ::before を使う(装飾はせず透明のタップ拡張)。
下端クリアランスは #bnav の padding-box 内なので overflow:hidden でもクリップされない。 */
.ni::before{content:'';position:absolute;left:0;right:0;top:100%;height:max(30px, env(safe-area-inset-bottom))}
.ni-icon{font-size:23px;line-height:1;transition:transform .22s}
/* 2026-06-30: ナビアイコンをmaskで描画し、色を白→薄い抹茶色に。非選択タブは opacity で明度を落とす */
.ni-icon .ni-svg{
width:23px;height:23px;display:block;
background-color:var(--nav-icon-matcha,#c8d8a8);
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
transition:opacity .22s;
}
.ni:not(.on) .ni-svg{opacity:.5}
/* 2026-06-30: マウスオーバー時はテキスト(.ni:hover→#fff)と同期してアイコンも明るく */
.ni:hover .ni-svg{opacity:1}
.ni.on .ni-icon{transform:translateY(-2px) scale(1.08)}
.ni-lbl{font-size:13px;font-weight:700;letter-spacing:.04em} /* 2026-06-30: +2 (11→13) */
/* 2026-06-23 §5: ボトムナビ副ラベルは 390px で窮屈・情報価値低のため非表示 (主ラベルのみ) */
.ni-sub{display:none}
.card{background:var(--bg-card);border:1px solid var(--border-warm);border-radius:var(--radius);margin:14px 14px 0;overflow:hidden;box-shadow:0 2px 12px rgba(26,18,8,.06)}
#nodeDetailMeta{border:1px solid var(--border-warm);border-radius:var(--radius);padding:2px 14px;overflow:hidden;box-shadow:0 2px 12px rgba(26,18,8,.06)}
#nodeDetailMeta>div:last-child{border-bottom:none}
.card:last-of-type{margin-bottom:14px}
.card-hdr{padding:13px 18px;background:#86a39f;color:#fff;font-family:'Zen Maru Gothic',sans-serif;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);letter-spacing:.04em} /* 2026-06-30: font +1 (16→17) */
.card-hdr-icon{width:28px;height:28px;background:rgba(255,255,255,.12);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px}
/* 2026-05-13: プロト準拠の右肩 ID 記号 (LN_05 / ME_03 等) は本番では非表示。
ただし #stamps-count (スタンプ数表示) は同クラスを流用しているので除外 */
.card-hdr-icon:not(#stamps-count){display:none !important}
.card-body{padding:16px 18px}
.btn-row{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-light);cursor:pointer;background:rgba(205,71,98,.1);width:100%;text-align:left;font-family:inherit;font-size:15px;color:var(--text-primary);transition:background var(--transition);gap:12px;line-height:1.5;min-height:52px;text-decoration:none}
.btn-row:last-child{border-bottom:none}
.btn-row-group{display:flex;flex-direction:column;gap:8px;padding:10px 14px}
.btn-row-group .btn-row{border:1px solid var(--border-light);border-radius:var(--radius-sm)}
.btn-row-group .btn-row:last-child{border-bottom:1px solid var(--border-light)}
.btn-row:hover,.btn-row:active{background:rgba(205,71,98,.2);color:var(--text-primary)}
.btn-row-icon{font-size:21px;flex-shrink:0;width:26px;text-align:center}
/* FontAwesome 適用 (歴ぶら×FA): 焼込色 SVG を img で差し込む共通クラス */
.v-ic{display:inline-block;object-fit:contain;vertical-align:middle}
.btn-row-icon .v-ic{width:21px;height:21px}
.card-hdr .v-ic{width:22px;height:22px;vertical-align:-4px;margin-right:5px} /* 2026-06-30: +10% (20→22) */
/* 2026-06-30: 緑灰色(#86a39f)のセクションタイトル帯のアイコンは、同系色で目立たないため
非常に薄い桃色(#f6dbe3)に統一する。brightness(0)で一旦シルエット化→淡桃へ着色。
(ボタン/シートのv-icは対象外=ティールのまま) */
.card-hdr .v-ic{
/* 2026-07-02 緑灰見出しのアイコンを藍色へ (旧: 薄桃) */
filter: brightness(0) saturate(100%) invert(18%) sepia(34%) saturate(1200%) hue-rotate(179deg) brightness(92%) contrast(90%);
}
.rank-badge-icon .v-ic{width:26px;height:26px}
.g-btn-icon .v-ic{width:24px;height:24px}
.set-left-icon .v-ic{width:20px;height:20px}
.mfab .v-ic{width:24px;height:24px}
.mfab.on .v-ic{filter:brightness(0) invert(1)} /* 活性時(濃紺地)はアイコンを白く反転 */
.btn-row-content{flex:1}
.btn-row-title{font-size:15px;font-weight:600;color:var(--text-primary)}
.btn-row-sub{font-size:13px;color:var(--text-muted);margin-top:3px}
.btn-row-badge{font-size:11px;padding:3px 9px;background:var(--gold-pale);color:var(--gold);border:1px solid rgba(188,155,88,.3);border-radius:20px;flex-shrink:0;font-weight:700}
.btn-row-badge.member{background:#e8f5ee;color:#4caf82;border-color:rgba(76,175,130,.3)}
.btn-row-arrow{color:var(--text-faint);font-size:15px;flex-shrink:0}
.btn-primary{display:block;width:calc(100% - 28px);margin:10px 14px;padding:15px 18px;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-family:'Zen Maru Gothic',sans-serif;font-size:16px;font-weight:700;cursor:pointer;text-align:center;box-shadow:0 3px 14px rgba(188,155,88,.38);transition:var(--transition);letter-spacing:.04em;min-height:52px;text-decoration:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(188,155,88,.48);color:#fff}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
.btn-secondary{display:block;width:calc(100% - 28px);margin:10px 14px;padding:13px 18px;background:transparent;color:#cd4762;border:2px solid #cd4762;border-radius:var(--radius-sm);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:center;transition:var(--transition);min-height:50px;text-decoration:none}
.btn-secondary:hover{background:rgba(205,71,98,.3);color:#cd4762;border-color:#cd4762}
.inline-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
#map-search-filter-toggle.on{background:var(--crimson,#9e2d40) !important;color:#fff !important;border-color:var(--crimson,#9e2d40) !important;box-shadow:none !important}
/* 🆕 Bootstrap既定の :focus/:active 装飾 (濃い枠・白文字) が、タップ後にフォーカスが
残った時に漏れて見える不具合の対策。開閉どちらの状態でも明示的に上書きする */
#map-search-filter-toggle:focus,#map-search-filter-toggle:active{box-shadow:none !important;outline:none !important}
#map-search-filter-toggle:focus:not(.on),#map-search-filter-toggle:active:not(.on){background:transparent !important;color:#cd4762 !important;border-color:#cd4762 !important}
#map-search-filter-toggle.on:focus,#map-search-filter-toggle.on:active{background:var(--crimson,#9e2d40) !important;color:#fff !important;border-color:var(--crimson,#9e2d40) !important}
.btn-danger{color:var(--crimson);border-color:var(--crimson)}
.btn-danger:hover{background:rgba(139,32,32,.06)}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0}
.chip{padding:7px 14px;border-radius:22px;font-size:13px;border:1.5px solid var(--border-warm);background:var(--bg-card);color:var(--text-sec);cursor:pointer;transition:var(--transition);font-family:inherit;font-weight:500;min-height:36px;display:flex;align-items:center}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
/* 認証モーダル タブ (.auth-tabs/.auth-tab) — サインイン / サインアップ切替
セグメント式トグル: 1つの「枠(トラック)」で左右を連結し、選択中のみ塗り。
送信ボタン(.btn-primary=単独の塗り角丸)と明確に別物=「切替」に見せるのが狙い。 */
.auth-tabs{display:flex;gap:4px;margin-bottom:16px;padding:4px;border-radius:14px;background:rgba(205,71,98,.08);border:1px solid rgba(205,71,98,.20);box-shadow:inset 0 1px 2px rgba(27,58,92,.05)}
.auth-tab{flex:1;padding:9px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;min-height:56px;border:none;background:transparent;color:#cd4762;transition:var(--transition);text-align:center;line-height:1.3;display:flex;align-items:center;justify-content:center}
.auth-tab.on{background:var(--vermilion,#cd4762);color:#fff;box-shadow:0 1px 4px rgba(205,71,98,.30)}
.auth-tab:not(.on):hover{background:rgba(205,71,98,.12)}
.info-box{padding:12px 16px;background:rgba(188,155,88,.09);border-left:3px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:10px 0;font-size:15px;color:var(--text-sec);line-height:1.8}
.note-box{padding:12px 16px;background:rgba(134,163,159,.10);border-radius:var(--radius-sm);font-size:15px;color:var(--text-sec);line-height:1.8;margin:10px 0}
.connection-box{padding:12px 16px;background:linear-gradient(135deg,rgba(74,103,65,.08),rgba(76,175,130,.06));border:1px dashed rgba(74,103,65,.4);border-radius:var(--radius-sm);font-size:14px;color:var(--sage);font-weight:600;margin:10px 0}
.prog-wrap{margin:10px 0}
.prog-label{display:flex;justify-content:space-between;font-size:13px;color:var(--text-muted);margin-bottom:6px}
.prog-bar{height:7px;border-radius:4px;background:rgba(175,194,138,.15);overflow:hidden}
.prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--indigo),var(--gold));transition:width .8s}
.rank-card{background:linear-gradient(135deg,rgba(175,194,138,.08),rgba(247,238,207,.10));border:1px solid var(--border-warm);border-radius:var(--radius-sm);padding:14px 16px;margin:12px 0}
.rank-flow{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.rank-badge{display:flex;flex-direction:column;align-items:center;gap:4px}
.rank-badge-icon{font-size:25px}
.rank-badge-name{font-size:13px;font-weight:700;font-family:'Zen Maru Gothic',sans-serif}
.rank-badge.current .rank-badge-name{color:var(--indigo)}
.rank-badge.next .rank-badge-icon{opacity:.4}
.rank-badge.next .rank-badge-name{color:var(--text-muted)}
.rank-arrow{font-size:19px;color:var(--gold);font-weight:700;flex-shrink:0}
.rank-bar{height:9px;border-radius:5px;background:rgba(175,194,138,.15);overflow:hidden;margin-bottom:6px}
.rank-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--indigo),var(--gold));transition:width .8s}
.rank-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.rank-count{color:var(--text-muted)}
.rank-cheer{color:var(--indigo);font-weight:700}
.data-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border-light);font-size:15px}
.data-row:last-child{border-bottom:none}
.data-row-label{color:var(--text-muted);font-size:14px}
.data-row-value{color:var(--text-primary);font-weight:600}
.notif-row{display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:6px 18px;font-size:13px;color:var(--text-muted);background:rgba(134,163,159,.10);border-bottom:1px solid rgba(134,163,159,.20)}
.notif-lbl{cursor:pointer;user-select:none}
.notif-chk{width:16px;height:16px;accent-color:var(--indigo);cursor:pointer;flex-shrink:0}
.today-banner{margin:0 -18px;padding:18px;background:rgba(134,163,159,.13);border-bottom:1px solid rgba(134,163,159,.22)}
.today-date{font-size:15px;color:var(--text-muted);margin-bottom:7px}
.today-title{font-family:'Zen Maru Gothic',sans-serif;font-size:18px;font-weight:700;color:var(--text-primary);line-height:1.55;margin-bottom:7px}
.today-desc{font-size:16px;color:var(--text-sec);line-height:1.7}
/* ノード詳細の写真 (objects_files)。1枚=ヒーロー幅 / 複数=横スクロール */
.nd-photos{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.nd-photos::-webkit-scrollbar{display:none}
.nd-photo{flex:0 0 auto;scroll-snap-align:start;border-radius:var(--radius-sm,10px);overflow:hidden;background:var(--border-light,#e6ddd0)}
.nd-photo img{display:block;height:170px;width:auto;max-width:80vw;object-fit:cover}
.nd-photos.single{display:block}
.nd-photos.single .nd-photo{width:100%}
.nd-photos.single .nd-photo img{width:100%;height:auto;max-height:260px;object-fit:cover}
.bcarousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:4px 18px 9px;-webkit-overflow-scrolling:touch}
.bcarousel::-webkit-scrollbar{display:none}
.bslide{flex:0 0 85%;scroll-snap-align:start;min-height:88px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#1a2c4d,var(--gold));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:'Zen Maru Gothic',sans-serif;font-size:15px;font-weight:700;letter-spacing:.03em;padding:16px 20px;text-align:center;cursor:pointer;transition:var(--transition);box-shadow:0 3px 14px rgba(26,18,8,.13)}
.bslide:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,18,8,.18)}
.bslide small{display:block;font-size:13px;font-weight:500;opacity:.9;margin-top:5px;letter-spacing:normal}
.banner-dots{display:flex;justify-content:center;gap:6px;margin-top:9px}
.bdot{width:7px;height:7px;border-radius:50%;background:var(--border-warm);transition:var(--transition);cursor:pointer;border:none;padding:0}
.bdot.on{background:var(--gold);width:20px;border-radius:3px}
.screen-footer{text-align:center;padding:22px 18px;font-size:13px;color:var(--text-muted);border-top:1px solid var(--border-light);margin-top:18px;line-height:2}
.qs-card{border:1.5px solid var(--border-warm);border-radius:var(--radius-sm);margin:10px 14px;cursor:pointer;overflow:hidden;transition:var(--transition);background:var(--bg-card);text-decoration:none;display:block;color:inherit}
/* ===== クエストカード(花模様バナー版 / 2026-06-28) — v1しのぶ上半身＋価格ティア配色 ===== */
/* 価格ティア色 (v1パレット由来) */
.qcb{--qp330:#9BA66B;--qp440:#3B85AC;--qp550:#BC666A;--qpfree:#8E7CB3;padding:7px}
.qcb.qt330{--bnr:var(--qp330)} .qcb.qt440{--bnr:var(--qp440)} .qcb.qt550{--bnr:var(--qp550)} .qcb.qtfree{--bnr:var(--qpfree)}
.qbnr{position:relative;border-radius:9px;overflow:hidden;background:var(--bnr,#7a6850);min-height:84px;padding:11px 12px 11px 86px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
/* 花模様(白・淡く / v1左上モチーフ) */
.qbnr-flower{position:absolute;left:-10px;top:-12px;width:52px;height:52px;background:url(../images/quest_flower.png) center/contain no-repeat;opacity:.30;pointer-events:none;z-index:0}
/* しのぶ＝v1抽出画像に v1同一トランスフォーム(拡大139/位置-54,7/左80クリップ)＝上半身のみ */
.qbnr-ninja{position:absolute;left:0;top:0;bottom:0;width:80px;overflow:hidden;z-index:0;background:url(../images/quest_ninja.png) no-repeat;background-size:139px auto;background-position:-54px 7px}
.qbnr-body{position:relative;z-index:1}
.qbnr-q{margin:0 0 9px;font-weight:700;font-size:14px;line-height:1.42;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.qbnr-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.qbnr-bdg{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;line-height:1.4}
.ba-area{background:rgba(255,255,255,.93);color:var(--indigo)}
.ba-area .pin{color:#e0607f}
.ba-lvl{background:rgba(255,255,255,.93);color:#7a5b1e}
.ba-lvl .st{color:var(--gold)}
/* 価格バッジ: テーマ色で反転・白ボールド(バナーより一段濃く＋白縁で同系色上でも視認) */
.ba-price{background:color-mix(in srgb,var(--bnr),#000 16%);color:#fff;font-weight:800;border:1px solid rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.22)}
.ba-price .was{opacity:.7;text-decoration:line-through;font-weight:600;margin-right:5px;color:#fff}
.ba-prog{background:var(--indigo);color:#fff}
.ba-done{background:var(--gold);color:#fff}
/* 日付キャプション(バナー直下・薄く1行) */
.qbnr-date{font-size:12px;color:var(--text-muted);padding:7px 6px 1px;font-variant-numeric:tabular-nums}
.qbnr-date b{color:var(--text-sec);font-weight:700}
.qcb:hover .qbnr,.qcb:active .qbnr{filter:brightness(1.03)}
.qs-card:hover{box-shadow:0 6px 20px rgba(26,18,8,.13);transform:translateY(-2px);color:inherit}
.qs-card-head{padding:14px 16px;background:rgba(134,163,159,.13);border-bottom:1px solid rgba(134,163,159,.22)}
.qs-card-title{font-family:'Zen Maru Gothic',sans-serif;font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.55;margin-bottom:8px}
.qs-card-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--text-muted)}
.qs-badge{padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid;display:inline-block}
.qs-badge-area{color:var(--indigo);border-color:rgba(29,60,92,.3);background:rgba(29,60,92,.07)}
.qs-badge-level{color:var(--sage);border-color:rgba(74,103,65,.3);background:rgba(74,103,65,.07)}
.qs-badge-price{color:var(--gold);border-color:rgba(188,155,88,.3);background:var(--gold-pale)}
.qs-badge-free{color:var(--crimson);border-color:rgba(139,32,32,.3);background:rgba(139,32,32,.07)}
.qs-card-body{padding:12px 16px}
.profile-hdr{display:flex;align-items:center;gap:16px;padding:18px}
.avatar{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#1d3c5c,#86a39f);display:flex;align-items:center;justify-content:center;font-size:29px;flex-shrink:0;border:2.5px solid var(--gold);color:#fff}
.profile-name{font-family:'Zen Maru Gothic',sans-serif;font-size:20px;font-weight:700;color:var(--text-primary)}
.profile-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;background:rgba(188,155,88,.13);color:var(--gold);border:1px solid rgba(188,155,88,.3);font-size:13px;font-weight:700;margin-top:5px}
.point-display{text-align:center;padding:12px;background:linear-gradient(135deg,rgba(29,60,92,.07),rgba(188,155,88,.07));border-radius:var(--radius-sm);margin:6px 0}
.point-number{font-family:'Zen Maru Gothic',sans-serif;font-size:35px;font-weight:700;color:var(--indigo);letter-spacing:.02em}
.point-unit{font-size:16px;color:var(--gold);font-weight:700;margin-left:5px}
.point-label{font-size:13px;color:var(--text-muted);margin-top:5px}
.toggle-wrap{display:flex;align-items:center;justify-content:space-between}
.toggle{width:46px;height:26px;border-radius:13px;background:var(--border-warm);position:relative;cursor:pointer;transition:var(--transition);border:none;flex-shrink:0}
.toggle.on{background:var(--indigo)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .25s}
.toggle.on::after{transform:translateX(20px)}
.divider{height:1px;background:var(--border-light);margin:14px 0}
/* g2 グリッド (2x2 ボタン) */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.g-btn{padding:12px 8px;background:rgba(205,71,98,.1);border:1.5px solid var(--border-warm);border-radius:var(--radius-sm);cursor:pointer;text-align:center;font-family:inherit;font-size:15px;color:var(--text-primary);transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:4px;min-height:68px;text-decoration:none}
.g-btn:hover{border-color:var(--vermilion);background:rgba(205,71,98,.2);color:var(--text-primary)}
.g-btn-icon{font-size:25px}
/* マイページ軌跡セレクター */
.me-sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px;border-bottom:1px solid var(--border-light)}
/* 2026-06-23: 軌跡ボタンを ME_02 の .g-btn と同様の縦並び・グラデーション・大きめサイズに */
.me-sel-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 8px;border-radius:var(--radius-sm);border:1.5px solid var(--border-warm);
background:linear-gradient(180deg,rgba(255,255,255,.48) 0%,rgba(205,71,98,.10) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 4px rgba(26,18,8,.07);
font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:var(--transition);width:100%;text-align:center;min-height:88px;position:relative}
.me-sel-btn:hover{border-color:var(--vermilion);background:linear-gradient(180deg,rgba(255,255,255,.56) 0%,rgba(205,71,98,.22) 100%)}
/* 🆕 2026-07-19 購入クエストボタンの「進行中！」赤バッジ(進行中クエストがある時だけJSで表示)。
意匠・位置は「クーポン獲得！」(#coupon-new-badge)と統一: 単色crimson・9px・右上-7pxはみ出し・角丸9・小シャドウ。 */
.me-ip-badge{position:absolute;top:-7px;right:-7px;background:var(--crimson,#9e2d40);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:9px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.me-sel-lbl{font-weight:700;line-height:1.35;font-size:15px} /* 🆕 スタンプ帳等(.g-btn=15px)と字サイズを揃える */
.me-sel-btn.on{background:var(--vermilion);color:#fff;border-color:var(--vermilion);font-weight:700}
.me-sel-cnt{flex-shrink:0;min-width:24px;height:22px;padding:0 6px;border-radius:11px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;background:rgba(188,155,88,.2);color:var(--gold)}
.me-sel-btn.on .me-sel-cnt{background:rgba(255,255,255,.25);color:#fff}
.scnt{display:none}.scnt.on{display:block}
/* 履歴行 hist-row / qhist-card */
.hist-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:var(--transition);min-height:52px;text-decoration:none;color:inherit;text-align:left}
.hist-row:last-child{border-bottom:none}
.hist-row:hover{background:rgba(188,155,88,.05);color:inherit}
.hist-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex-shrink:0}
.hist-content{flex:1;min-width:0}
.hist-title{font-size:15px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-meta{font-size:13px;color:var(--text-muted);margin-top:3px}
.hist-pt{font-size:14px;font-weight:700;color:#4caf82}
.qhist-card{border-bottom:1px solid var(--border-light);cursor:pointer;transition:var(--transition);overflow:hidden;text-decoration:none;color:inherit;display:block}
.qhist-card:last-of-type{border-bottom:none}
.qhist-card:hover{background:rgba(188,155,88,.04);color:inherit}
.qhist-banner{height:64px;background:linear-gradient(135deg,#1d3c5c 0%,#86a39f 100%);display:flex;align-items:flex-end;padding:10px 12px;position:relative}
.qhist-btitle{font-family:'Zen Maru Gothic',sans-serif;font-size:13px;font-weight:700;color:#fff;line-height:1.4;flex:1;padding-right:36px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qhist-done{position:absolute;top:7px;right:9px;background:var(--gold);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:11px;letter-spacing:.03em}
.qhist-info{padding:8px 12px 12px}
.qhist-area{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.qhist-dates{display:flex;flex-wrap:wrap;gap:9px;font-size:12px;color:var(--text-muted)}
/* 各種ボタン inline-btn / set-row */
.inline-btn{padding:9px 16px;border-radius:var(--radius-sm);border:1.5px solid #cd4762;background:transparent;color:#cd4762;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);min-height:46px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.inline-btn:hover{background:#cd4762;color:#fff}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border-light);cursor:pointer;font-size:15px;background:rgba(205,71,98,.1);transition:var(--transition);min-height:56px;text-decoration:none;color:inherit}
.set-row:hover{background:rgba(205,71,98,.2);color:inherit}
.set-left{display:flex;align-items:center;gap:12px;color:var(--text-primary)}
.set-left-icon{width:36px;height:36px;border-radius:10px;background:rgba(175,194,138,.15);display:flex;align-items:center;justify-content:center;font-size:19px}
.set-arrow{color:var(--text-faint);font-size:15px}
/* スタンプ */
.stamp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.stamp-item{border:1.5px solid var(--border-warm);border-radius:var(--radius-sm);padding:14px;text-align:center;background:var(--bg-card)}
.stamp-item.got{border-color:var(--gold);background:var(--gold-pale)}
.stamp-icon{font-size:31px;margin-bottom:5px;opacity:.4}
.stamp-item.got .stamp-icon{opacity:1}
.stamp-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.stamp-date{font-size:12px;color:var(--text-muted);margin-top:3px}
/* 入力フィールド (プロトタイプ map-input / select-input) */
.map-input{width:100%;padding:11px 14px;border:1.5px solid var(--border-warm);border-radius:var(--radius-sm);font-family:inherit;font-size:16px;background:var(--bg-input);color:var(--text-primary);outline:none;transition:var(--transition);min-height:46px}
.map-input:focus{border-color:var(--gold)}
.select-input{width:100%;padding:11px 14px;border:1.5px solid var(--border-warm);border-radius:var(--radius-sm);font-family:inherit;font-size:15px;background:var(--bg-input);color:var(--text-primary);outline:none;cursor:pointer;min-height:46px}
.select-input:focus{border-color:var(--gold)}
.field-label{font-size:13px;font-weight:700;color:var(--text-muted);letter-spacing:.04em;margin-bottom:6px;display:block}
/* タグ選択 (興味タグ等) */
.tag-grid{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.tag-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border-warm);background:var(--bg-card);cursor:pointer;font-size:15px;color:var(--text-sec);transition:var(--transition);min-height:52px;user-select:none}
.tag-item:hover{border-color:var(--gold);background:var(--gold-pale)}
.tag-item.on{border-color:var(--indigo);background:rgba(29,60,92,.07);font-weight:600}
.tag-item.on::after{content:'✓';margin-left:auto;color:var(--indigo);font-weight:800}
.tag-emoji{font-size:21px;width:26px;text-align:center}
/* しのぶ FAB (M6 Phase 1) - プロトタイプ準拠 */
#sn-fab{position:fixed;top:calc(var(--nh) + 0.68 * (100dvh - var(--nh) - var(--bh) - 52px));right:16px;left:auto;transform:none;z-index:88;display:flex;flex-direction:column;align-items:center;cursor:pointer}
#sn-inner{display:flex;flex-direction:column;align-items:center}
#sn-bubble{margin-bottom:9px;white-space:nowrap;background:#4a2626;color:#fff;padding:8px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:600;box-shadow:0 2px 12px rgba(74,38,38,.4);opacity:0;transition:opacity .3s;position:relative}
#sn-bubble::before{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:rgba(255,255,255,.2)}
#sn-bubble::after{content:'';position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#4a2626}
#sn-fab.bobbing #sn-bubble{opacity:1}
#sn-btn-wrap{position:relative}
#sn-btn{width:80px;height:80px;border-radius:50%;background:#afc28a;border:none;color:#1d3c5c;cursor:pointer;font-size:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(29,60,92,.30);transition:var(--transition);pointer-events:none}
#sn-bdg{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;background:var(--crimson);border:2px solid var(--bg-card);font-size:11px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none}
@keyframes snBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#sn-fab.bobbing #sn-inner{animation:snBob 2.4s ease-in-out infinite}
/* しのぶ AI 回答待ち: タイピングインジケーター (3点バウンド) */
.sn-typing{display:inline-flex;align-items:center;gap:5px;line-height:1}
.sn-typing span{width:7px;height:7px;border-radius:50%;background:var(--sage,#86a39f);animation:snTyping 1.3s infinite ease-in-out both}
.sn-typing span:nth-child(2){animation-delay:.16s}
.sn-typing span:nth-child(3){animation-delay:.32s}
@keyframes snTyping{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-5px);opacity:1}}
@keyframes snTypingFade{0%,70%,100%{opacity:.4}35%{opacity:1}}
@media (prefers-reduced-motion: reduce){.sn-typing span{animation-name:snTypingFade}}
/* iframe モード: shell に埋め込まれたとき #app の chrome を消し、
shell 側の #hdr/#bnav に高さを譲る。本ページの #hdr/#bnav は
header.php/footer.php の早期 return で出力されない */
body.in-iframe{background:transparent !important; display:block !important; padding:0 !important; height:100%}
/* html 要素にも dark (#1a0e08) が残るとiframe viewport がダーク茶色になるため透明化 */
html:has(body.in-iframe){background:transparent !important}
/* iframe 内では 100dvh を使わず height:100% で親 iframe にぴったり合わせる。
iframe 内の dvh はブラウザによって外側 viewport を参照することがあり、
結果 #app が iframe より高/低くなって下にグレー bg-shell が見える不具合の対策 (2026-05-15) */
body.in-iframe #app{width:100% !important; box-shadow:none !important; background:transparent !important; height:100%; max-height:100%; min-height:0}
body.in-iframe #sn-fab{display:none !important}
body.in-iframe #shinobuModal,body.in-iframe #AuthModal{display:none !important}
/* 購入・決済ダイアログ (モバイル: 全画面 / PC: センタリング) */
#purchaseDialogModal .modal-dialog{width:100%;max-width:100%;height:100%;margin:0;align-items:flex-start}
#purchaseDialogModal .modal-content{border-radius:0;height:100dvh;max-height:100dvh;display:flex;flex-direction:column}
#purchaseDialogModal .modal-body{padding:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
#purchaseDialogModal #purchaseDialogFrame{flex:1;min-height:0}
@media(min-width:768px){
#purchaseDialogModal .modal-dialog{width:520px;max-width:90%;height:90vh;margin:5vh auto}
#purchaseDialogModal .modal-content{border-radius:12px;height:100%}
}
/* デスクトップではモバイル幅を 500px 維持、PC全画面では中央表示 */
@media(max-width:767px){
#app{box-shadow:none;max-height:none}
}
/* デスクトップ広い画面でも 390px のままだとコンテンツが見にくいことがあるが、
v2 はモバイル前提なのでこのまま。デスクトップは "アプリ枠" として表示 */
/* ========== v0.92 sh-qs-fn02 MYSTORY ヒーロー版（M8'） ========== */
.ms-hero{position:relative;background:linear-gradient(180deg,#0a1628 0%,#1a2c4d 55%,#2a3e5e 100%);padding:22px 20px 18px;overflow:hidden;text-align:center;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.ms-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(1px 1px at 18% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 63% 14%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 82% 34%,rgba(255,255,255,.7),transparent);opacity:.7}
.ms-hero-moon{position:absolute;top:14px;right:22px;width:30px;height:30px;background:radial-gradient(circle at 30% 30%,#fff8e0,#e8c88a);border-radius:50%;box-shadow:0 0 14px rgba(232,200,138,.5)}
.ms-hero-content{position:relative;z-index:2}
/* 2026-06-23 §5: 装飾英字ラタリング(情報価値低・極小)は非表示 */
.ms-brand-mark{display:none}
.ms-brand-jp{font-family:"Zen Maru Gothic",sans-serif;font-size:12px;letter-spacing:.5em;font-weight:500;color:#fff;margin-bottom:8px;padding-left:.5em}
.ms-brand-en{font-family:"Zen Maru Gothic",sans-serif;font-size:33px;letter-spacing:.15em;font-weight:700;color:#fff;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ms-intro{background:#f4efe4;padding:14px 20px;text-align:center;border-bottom:1px solid var(--border-light)}
.ms-intro-title{font-family:"Zen Maru Gothic",sans-serif;font-size:14px;font-weight:700;color:var(--indigo);margin-bottom:5px}
.ms-intro-title small{display:none}
.ms-intro-body{font-size:12.5px;color:#5a5a5a;line-height:1.8}
.ms-meta-list{background:linear-gradient(135deg,#f4efe4 0%,#eae2d4 100%);border-radius:var(--radius-sm);padding:12px 14px;margin:0 0 14px;border:1px solid var(--border-light);position:relative;overflow:hidden}
.ms-meta-row{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid rgba(26,18,8,.07)}
.ms-meta-row:last-child{border-bottom:none}
.ms-meta-label{font-size:12px;letter-spacing:.08em;color:#8a7f72;min-width:60px;font-weight:500;flex-shrink:0}
.ms-meta-value{font-size:14px;color:var(--text-primary);font-weight:600;flex:1;text-align:right}
.ms-price{color:var(--crimson);font-weight:700;font-size:1.1em}
.ms-badge{display:inline-block;padding:2px 9px;border-radius:10px;background:var(--gold-pale);color:var(--indigo);font-size:12px;font-weight:600;border:1px solid rgba(188,155,88,.3)}
.ms-spot-btn{width:100%;display:flex;align-items:center;gap:10px;padding:10px 13px;background:var(--bg-card);border:1.5px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;text-align:left;transition:var(--transition);margin-bottom:7px}
.ms-spot-btn:hover{border-color:var(--gold);background:var(--gold-pale)}
.ms-spot-num{width:22px;height:22px;border-radius:50%;background:#f4efe4;border:1px solid #e8c88a;color:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.ms-spot-name{flex:1;font-size:14px;font-weight:600;color:var(--text-primary)}
.ms-spot-arrow{color:var(--text-muted);font-size:17px;flex-shrink:0}
/* ストーリー欄 */
.ms-story{margin:0 0 14px}
.ms-story-body{font-size:14px;color:var(--text-sec);line-height:2.0}
/* ルビ(ふりがな) 共通 */
ruby{ruby-align:center}
ruby rt{font-size:.58em;color:var(--text-muted);font-weight:400;letter-spacing:.02em}
/* スポット名のルビは行高を詰めて 1 行に収める */
.ms-spot-name ruby rt{font-size:.55em;line-height:1}
.mystery-box{background:rgba(139,32,32,.05);border-left:3px solid var(--crimson);border-radius:var(--radius-sm);padding:12px 14px;margin:0 0 16px}
.mystery-text{font-size:14px;color:var(--text-sec);line-height:1.8;font-style:italic}
.ms-purchase-wrap{padding:20px 18px;background:var(--bg-card);border-top:2px solid var(--border-light)}
.ms-notice-box{background:#fff8ed;border:1px solid #e8c88a;border-left:4px solid var(--crimson);border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:14px;font-size:12.5px;line-height:1.7;color:#5a5a5a}
.ms-notice-box strong{display:block;color:var(--crimson);margin-bottom:3px;font-size:13px}
.ms-btn-purchase{width:100%;padding:15px 18px;background:linear-gradient(135deg,var(--crimson) 0%,#6b1818 100%);color:#fff;border:none;border-radius:28px;font-family:"Zen Maru Gothic",sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 18px rgba(139,32,32,.35);margin-bottom:14px;transition:var(--transition)}
.ms-btn-purchase:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(139,32,32,.45)}
.ms-price-tag{background:rgba(255,255,255,.18);padding:2px 9px;border-radius:10px;font-size:13px;font-weight:600}
.ms-auth-row{display:flex;gap:8px;align-items:center;background:var(--bg-shell);border:1px solid var(--border-light);border-radius:24px;padding:5px 5px 5px 14px}
.ms-auth-row label{font-size:12px;color:var(--text-muted);font-weight:500;white-space:nowrap}
.ms-auth-row input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary);font-family:inherit;padding:8px 0;min-width:0}
.ms-auth-btn{padding:8px 13px;background:var(--indigo);color:#fff;border:none;border-radius:18px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:var(--transition)}
.ms-auth-btn:disabled{background:var(--text-muted);cursor:not-allowed}
.ms-stamp-section{padding:22px 18px 6px}
.ms-sec-head{text-align:center;margin-bottom:16px}
.ms-sec-head-jp{font-family:"Zen Maru Gothic",sans-serif;font-size:19px;font-weight:700;letter-spacing:.2em;color:var(--indigo);padding-left:.2em}
.ms-sec-divider{display:flex;align-items:center;justify-content:center;gap:8px;margin:7px auto 0}
.ms-sec-line{width:30px;height:1px;background:var(--border-light);display:block}
.ms-sec-dot{width:5px;height:5px;border-radius:50%;background:var(--crimson);display:block}
.ms-stamp-card{background:linear-gradient(135deg,#1d3c5c 0%,#86a39f 100%);color:#fff;border-radius:var(--radius);padding:18px 16px;text-align:center;position:relative;overflow:hidden}
.ms-stamp-illust{width:72px;height:72px;margin:0 auto 10px;position:relative;z-index:2;background:rgba(255,255,255,.06);border:2px dashed rgba(232,200,138,.5);border-radius:11px;display:flex;align-items:center;justify-content:center;transform:rotate(-3deg)}
.ms-rk{font-family:"Zen Maru Gothic",sans-serif;font-size:23px;font-weight:700;color:#e8c88a}
.ms-rk small{display:none}
.ms-attention-section{padding:22px 18px 6px}
.ms-attention-intro{text-align:center;font-size:13px;color:var(--text-sec);line-height:1.8;margin-bottom:13px}
.ms-acc-list{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);overflow:hidden;box-shadow:0 2px 8px rgba(26,18,8,.06)}
.ms-acc-item{border-bottom:1px solid var(--border-light)}
.ms-acc-item:last-child{border-bottom:none}
.ms-acc-head{width:100%;padding:12px 14px;display:flex;align-items:center;gap:10px;background:var(--bg-card);border:none;text-align:left;cursor:pointer;font-family:inherit;transition:var(--transition)}
.ms-acc-head:hover{background:var(--bg-shell)}
.ms-check{width:18px;height:18px;flex-shrink:0;border-radius:4px;background:var(--gold-pale);border:1px solid rgba(188,155,88,.4);display:flex;align-items:center;justify-content:center;color:var(--indigo);font-size:11px;font-weight:700}
.ms-acc-title{flex:1;font-size:14px;font-weight:600;color:var(--text-primary)}
.ms-chev{color:var(--text-muted);font-size:11px;transition:.3s}
.ms-acc-item.ms-open .ms-chev{transform:rotate(180deg);color:var(--crimson)}
.ms-acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;background:linear-gradient(180deg,var(--bg-shell) 0%,var(--bg-card) 100%)}
.ms-acc-item.ms-open .ms-acc-body{max-height:300px}
.ms-acc-body-inner{padding:10px 14px 13px 42px;font-size:12.5px;line-height:1.85;color:var(--text-sec)}
.ms-contact{margin:18px 18px 28px;padding:16px;background:var(--indigo);border-radius:var(--radius);text-align:center}
.ms-contact-team{font-family:"Zen Maru Gothic",sans-serif;font-size:14px;font-weight:600;color:#fff;margin-bottom:6px}
.ms-contact-mail{font-size:14px;color:#e8c88a;text-decoration:none;letter-spacing:.03em}
.ms-contact-mail:hover{text-decoration:underline}
/* ========== v0.92 sh-me-fn12 / sh-me-fn13 修験道（M7 Phase 1 UI） ========== */
.shu-chips{display:flex;flex-wrap:wrap;gap:5px}
.shu-chip{padding:5px 11px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;font-size:13px;font-weight:600;color:var(--text-sec);cursor:pointer;transition:var(--transition);font-family:inherit}
.shu-chip:hover{border-color:var(--vermilion,#cd4762);color:var(--text-primary)}
.shu-chip.on{background:var(--vermilion,#cd4762);color:#fff;border-color:var(--vermilion,#cd4762)}
.shu-carousel-wrap{position:relative;margin:8px 0 4px}
/* 🆕 2026-06-30 概要カルーセル(全シート共通: ln/nd-summary/shu/cd/pd)を MYSTORY v2 スポット解説の
カード/カルーセル意匠・配色そのまま移植(mystory/v2 quest_v2.css .card 参照)。washi→淡水色グラデの
カード+金の角飾り、本文=濃藍#0F1F3D、ノード名=青#2F5DA8、強調=朱#C53D43、進行ドットは伸長ピル。
※スライドは全幅維持(_dynSplitByLines のテキスト分割と onscroll のドット同期が clientWidth 前提のため)。 */
/* 上部の数値ページ表示は廃止(各カード内の「其ノ一」表記に置換) */
.shu-page-ind{display:none}
/* 左右に余白(scroll-padding込み)を設け、カードの自然な影が四辺に見えるようにする(MYSTORY v2式)。 */
.shu-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;background:transparent;padding:8px 16px 14px;scroll-padding:0 16px;scrollbar-width:none}
.shu-carousel::-webkit-scrollbar{display:none}
.shu-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:180px;font-size:15.5px;line-height:1.7;color:#0F1F3D;padding:12px 16px 14px;border:none;border-radius:14px;background:linear-gradient(155deg,#FAF7F0 0%,#E8F3FB 100%);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 3px 8px -3px rgba(15,31,61,.14),0 11px 20px -8px rgba(15,31,61,.22)}
.shu-slide::before{content:'';position:absolute;top:9px;right:9px;width:16px;height:16px;border-top:1.5px solid #C8922A;border-right:1.5px solid #C8922A;opacity:.6;pointer-events:none}
.shu-slide-page{font-family:'Zen Maru Gothic',sans-serif;font-size:12px;font-weight:700;color:#C8922A;letter-spacing:.12em;margin-bottom:4px;text-align:center}
.shu-slide-body{flex:1}
.shu-slide .node{color:#2F5DA8;font-weight:700}
.shu-slide strong{color:#C53D43;font-weight:600}
/* 🆕 2026-07-02 概要/エピソードのルビ: 漢字（ひらがな）→ふりがな。小さめ・淡色。右詰め寄せ(対応ブラウザのみ)。
概要カルーセル(.shu-slide) と かんたん解説の(関係)エピソード・修験道エピソード(.hist-title) に共通適用。 */
.shu-slide ruby,.hist-title ruby{ruby-align:end}
.shu-slide rt,.hist-title rt{font-size:.5em;font-weight:400;color:#5a6b7a;letter-spacing:.02em}
.shu-nav{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.shu-prev-btn{padding:6px 12px;background:transparent;border:1px solid var(--border-light);border-radius:14px;color:var(--text-sec);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.shu-prev-btn:hover{border-color:var(--gold);color:var(--text-primary)}
.shu-next-btn{margin-left:auto;padding:6px 12px;background:var(--gold-pale);border:1px solid rgba(188,155,88,.35);border-radius:14px;color:var(--indigo);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.shu-next-btn:hover{background:var(--gold);color:#fff}
/* MYSTORY v2 式コントロール行: ‹ ［ドット］ › を1行に。ナビは横長ピル。 */
.shu-dots{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.shu-dot-row{display:flex;align-items:center;gap:7px}
.shu-nav-arrow{flex:0 0 auto;width:46px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:'Zen Maru Gothic',sans-serif;font-size:16px;font-weight:700;line-height:1;color:#34466C;border:1px solid rgba(15,31,61,.12);background:linear-gradient(180deg,#fff 0%,#FAF7F0 100%);box-shadow:0 1px 4px rgba(15,31,61,.15);cursor:pointer;user-select:none;transition:background .2s,opacity .2s}
.shu-nav-arrow:active{background:#E8E0CC}
.shu-nav-arrow.faded{opacity:.3;pointer-events:none}
.shu-dot{width:8px;height:8px;border-radius:50%;background:rgba(15,31,61,.22);cursor:pointer;transition:background .3s ease,width .3s ease}
.shu-dot.on{background:#1B365D;width:26px;border-radius:999px}
.shu-item-row{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:1px solid var(--border-light);border-radius:var(--radius-sm);margin-bottom:6px;cursor:pointer;text-align:left;font-family:inherit;transition:var(--transition)}
.shu-item-row:hover{border-color:var(--vermilion,#cd4762)}
.shu-item-title{flex:1;font-size:15px;font-weight:600;color:var(--text-primary)}
.shu-item-meta{font-size:12px;color:var(--text-muted)}
/* ========== v0.92 sh-me-fn13 / sh-ln-fn02 4タブ深掘り (.stabs) ========== */
.stabs{display:flex;border-bottom:2px solid var(--border-light);margin:0 -1px}
.stab{flex:1;padding:12px 4px;border:none;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;position:relative;transition:var(--transition);text-align:center;line-height:1.4;min-height:44px}
.stab.on{color:var(--indigo);font-weight:800}
.stab-cnt{font-size:11px;font-weight:400;opacity:.75;letter-spacing:.02em;display:block;margin-top:2px}
.stab.on::after{content:"";position:absolute;bottom:-2px;left:10%;right:10%;height:2.5px;background:linear-gradient(90deg,var(--gold),var(--gold,#e6b86a));border-radius:2px}
/* ========== v0.92 ボトムシート化 (.rekibura-sheet) ========== */
/* Bootstrap modal を下からスライドアップする bottom sheet 風に */
.modal.fade.rekibura-sheet .modal-dialog,
.modal.fade.rekibura-sheet .modal-dialog.modal-dialog-scrollable {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
margin: 0;
max-width: 100vw;
width: min(500px, 100vw);
height: auto; /* Bootstrap の calc(100% - 1rem) を上書き */
max-height: 85dvh; /* 最大スナップ(85%)に揃える。dvh=動的ビューポートでモバイルの上限超過を防ぐ */
pointer-events: none;
transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.modal.show.rekibura-sheet .modal-dialog,
.modal.show.rekibura-sheet .modal-dialog.modal-dialog-scrollable {
transform: translateX(-50%) translateY(0);
}
.rekibura-sheet .modal-dialog {
background: transparent !important;
border-radius: 0 !important;
}
.rekibura-sheet .modal-content {
border-top-left-radius: var(--radius) !important;
border-top-right-radius: var(--radius) !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
max-height: 85dvh; /* 最大スナップ(85%)に揃える。dvh=動的ビューポートでモバイルの上限超過を防ぐ */
border: none;
box-shadow: 0 -10px 48px rgba(26,18,8,.22);
pointer-events: auto;
overflow: hidden !important;
background-color: var(--bg-card) !important;
/* 20%/55%/85% の3段階スナップをアニメーションさせる (JS: attachHeaderDragResize) */
transition: height .25s ease, max-height .25s ease;
}
/* 🆕 ドラッグ中は指/マウスに遅延なく追従させるため transition を切る (リリース時のスナップのみ
アニメーションさせたい)。JS: attachHeaderDragResize が pointerdown/up で付け外しする */
.rekibura-sheet .modal-content.sheet-dragging {
transition: none !important;
}
/* ヘッダーのスタイル統一 (close-btn とタイトルの並び) — プロト準拠ティール背景 (inline style 上書き用 !important) */
/* modal-header 全体をドラッグ掴み部とし、上部に pill ハンドルを持つ (1.5倍高) */
.rekibura-sheet .modal-header {
border-bottom: 1px solid rgba(255,255,255,.12) !important;
padding: 30px 18px 12px !important;
background: #86a39f !important;
position: relative !important;
cursor: ns-resize !important;
/* 🆕 2026-07-13 Android(Pixel)対策: ドラッグハンドルに touch-action:none が無いと、
縦ドラッグをブラウザがスクロールと判定して pointercancel を発火し、ドラッグが途中で中断
→最寄りの55%へスナップし戻る(=85%まで引き上げられない)。ハンドルの既定タッチ挙動を無効化する。 */
touch-action: none !important;
}
/* ドラッグハンドル pill: modal-header 上端中央 */
.rekibura-sheet .modal-header::before {
content: '';
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,.35);
pointer-events: none;
}
.rekibura-sheet .modal-header .modal-title,
.rekibura-sheet .modal-header h5,
.rekibura-sheet .modal-header .stit { color: #fff !important; }
.rekibura-sheet .modal-header .btn-close { filter: invert(1) !important; opacity: .9 !important; background-color: transparent !important; cursor: pointer !important; }
/* 削除警告モーダルはクリムゾン背景を保持 (危険操作を視覚的に区別) */
#deleteWarningModal .modal-header { background: var(--crimson, #c53d43) !important; }
/* 🆕 2026-07-12 「しのぶに聞く」ヘッダ帯のみ、各タブFABの吹き出し色(#CD4762 = rgba(205,71,98))を
やや濃くした桃紅(ローズ)にする(他シートのセージ緑と区別・しのぶアイコンの桃色と調和)。
白字が読める濃さ(中間色 #b43f58 と白の対比 約5.5:1)。他シートと同じ3段グラデ構造で意匠は統一。
id セレクタなので .rekibura-sheet .modal-header のグラデ(!important)にも勝つ。白字/白×は共通ルール継承。 */
#shinobuModal .modal-header {
background: linear-gradient(180deg, #c74f69 0%, #b43f58 55%, #a0364c 100%) !important;
}
.rekibura-sheet .modal-body {
overflow-y: auto;
background: var(--bg-card) !important;
/* 2026-06-23 フォント方針: シート本文は Noto Sans JP (タイトル/見出し等は各要素で Zen Maru 指定) */
font-family: 'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
/* 2026-06-23 文字色ポリシー: シート本文の既定色は --text-primary に統一。
補助/キャプションは各要素で var(--text-sec)/var(--text-muted) を使う。 */
color: var(--text-primary);
}
.rekibura-sheet .modal-body::-webkit-scrollbar { width: 3px; }
.rekibura-sheet .modal-body::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
/* 🆕 2026-07-18 iPhone SE 等でブラウザ下部UI(ツールバー)とシート最下部ボタンが重なりタップ
不能になる問題対策。全ボトムシート本文の下端に約+30px(既定16px→46px)の余白を確保し、
最下部のボタンをブラウザUIより上へ逃がす。シートは bottom:0 = viewport 下端に接するため、
本文下端の余白がそのまま「ボタンと画面下端の間隔」になる。 */
.rekibura-sheet .modal-body { padding-bottom: 46px !important; }
/* modal-content 直下の sn-dlg はヘッダー直下の帯 (プロト準拠) */
.rekibura-sheet .modal-content > .sn-dlg {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 12px 18px 11px;
background: #fbf6e5;
border-bottom: 1px solid rgba(134,163,159,.20);
font-size: 14px;
color: #86a39f;
line-height: 1.65;
flex-shrink: 0;
margin: 0;
}
.rekibura-sheet .modal-content > .sn-dlg .sn-dlg-txt { flex: 1; font-weight: 600; }
/* modal-body 内の sn-dlg (legacy) は吹き出し枠で表示 */
.rekibura-sheet .modal-body .sn-dlg {
display: flex;
align-items: flex-start;
gap: 9px;
background: rgba(134,163,159,.10);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 14px;
color: #86a39f;
line-height: 1.65;
}
.rekibura-sheet .modal-body .sn-dlg .sn-dlg-txt { flex: 1; font-weight: 600; }
/* 2026-05-27 景山指示: しのぶ吹き出し帯 (.sn-dlg「🥷「…」」) を全シートで UI ごと非表示。
「↑しのぶに質問…」バー (.sheet-sn-hint) とチャット本体 (#shinobuGreeting / .sn-msg は
.sn-dlg ではない) には影響しない。要素は残すので questDetailGreeting 等への
JS textContent 設定も null 参照にならず無害。上の display:flex 群を上書き。 */
.sn-dlg { display: none !important; }
/* ========== sn-float: シートが開いているとき左端に浮くしのぶアイコン ========== */
/* タップでしのぶモーダルを開く。positionSnFloat() が top/left を動的に設定する */
#sn-float{position:fixed;z-index:2000;width:44px;height:44px;border-radius:50%;background:#afc28a;border:none;color:#1d3c5c;font-size:23px;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 14px rgba(29,60,92,.40);transition:transform .2s;pointer-events:auto}
#sn-float.on{display:flex;animation:snBob 2.4s ease-in-out infinite}
#sn-float:hover{transform:scale(1.08)}
/* ========== shinobuHeaderIcon: モーダルヘッダー左のしのぶアイコン (装飾のみ・常時無反応) ========== */
/* modal-content(overflow:hidden)の外側 (.modal-dialog の直下) に配置し、ヘッダーからはみ出しても欠けないようにする。
縦位置(top)はJSがヘッダー中央に追従して動的に設定するため、ここではフォールバック値のみ指定。
ヘッダー中央を基準に右10px・上10pxへオフセットしつつ上下にフローティング (位置オフセットは bob keyframe に内包) */
@keyframes shinobuHeaderIconBob {
0%, 100% { transform: translate(10px, -10px) translateY(0); }
50% { transform: translate(10px, -10px) translateY(-8px); }
}
#shinobuHeaderIcon{position:absolute;top:33px;left:8px;margin-top:-41px;width:81px;height:81px;border-radius:50%;background:#afc28a;border:none;color:#1d3c5c;font-size:30px;display:flex;align-items:center;justify-content:center;cursor:default;pointer-events:none;box-shadow:0 2px 8px rgba(29,60,92,.30);animation:shinobuHeaderIconBob 2.4s ease-in-out infinite;z-index:5}
/* アイコンがフレックスから外れた分、元のアイコン占有幅(46px)+指定の2文字分をタイトルの左インデントとして確保 */
#shinobuModalLabel{margin-left:calc(46px + 2em)}
/* 選択肢ボタンと下のせりふ(#shinobuOutro)の間隔を約10pxに揃える（最後のボタン自体の下マージンは打ち消す） */
#shinobuChoices .sn-choice-btn:last-child{margin-bottom:0 !important}
/* シートが開いている間、ボトム FAB は隠す（プロトの sn-fab.style.display='none' 相当） */
body.rekibura-sheet-open #sn-fab { display: none !important; }
/* 2026-06-03 プロフィール編集中も FAB を退避（出身地「市区町村」select の▼に被ってタップ不能になる対策） */
body.profile-edit-mode #sn-fab { display: none !important; }
/* ========== ボトムシート ドラッグハンドルバー (.sheet-pre-hdr) ========== */
/* JS injection により各 .rekibura-sheet .modal-content の先頭に挿入される */
/* バーは2役: ドラッグ部 (.sheet-drag-mark) でシート高さリサイズ / */
/* 「↑しのぶに質問…」(.sheet-sn-hint) タップでしのぶフリートークを開く */
.sheet-pre-hdr{display:flex;flex-direction:column;align-items:center;padding:10px 0 0;background:var(--bg-card);flex-shrink:0;user-select:none;cursor:ns-resize;touch-action:none}
.sheet-drag-mark{width:44px;height:4px;border-radius:2px;background:rgba(134,163,159,.30);margin-bottom:10px;flex-shrink:0}
.sheet-sn-hint{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#86a39f;letter-spacing:.05em;padding:8px 16px;width:100%;background:#fbf6e5;border-bottom:1px solid rgba(134,163,159,.20);cursor:pointer}
/* ========== v0.92 マップマーカー (プロト .mn-pin 準拠) ========== */
/* Leaflet の divIcon (className=mn ...) にこの CSS が当たって円形ピン化される */
.mn-pin {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
border: 2px solid #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
line-height: 1;
}
.mn.pref-n .mn-pin { background: #2e7d32; color: #fff; } /* 都道府県 緑 */
.mn.city-n .mn-pin { background: #e65100; color: #fff; } /* 市区町村 橙 */
.mn.main-n .mn-pin { background: #c62828; color: #fff; } /* 主ノード 赤 */
.mn.rel-n .mn-pin { background: #1565c0; color: #fff; } /* 関連ノード 青 */
.mn.area-n .mn-pin { background: #757575; color: #fff; } /* 周辺ノード 灰 */
.mn.qst-n .mn-pin { background: #FF99FF; color: #fff; } /* クエスト 桃 */
/* ========== 現在地マーカー (青ドット+脈動アニメーション) ========== */
.me-pin {
width: 18px; height: 18px; border-radius: 50%;
background: #3B82F6; border: 3px solid #fff;
box-shadow: 0 0 0 4px rgba(59,130,246,0.25), 0 0 0 14px rgba(59,130,246,0.08);
animation: rekiburaMePulse 2.4s ease-out infinite;
}
/* 🆕 2026-06-22 「バッジ」状態(追従していない時)は脈動アニメーションを止める */
.me-pin.no-pulse { animation: none; box-shadow: 0 0 0 4px rgba(59,130,246,0.25); }
@keyframes rekiburaMePulse {
0% { box-shadow: 0 0 0 4px rgba(59,130,246,0.30), 0 0 0 4px rgba(59,130,246,0.15); }
100% { box-shadow: 0 0 0 4px rgba(59,130,246,0.10), 0 0 0 28px rgba(59,130,246,0); }
}
/* ========== デバッグ用「zoom: xx」表示 (DEBUG_SHOW_MAP_ZOOM=true 時のみ描画される) ========== */
/* leaflet-control-attribution の font-size (10px) + 2px。位置は Leaflet の控えスタッキングに委ねる */
.rekibura-zoom-debug {
font-size: 12px;
color: #1565c0;
font-weight: 700;
background: rgba(255,255,255,.85);
padding: 1px 6px;
border-radius: 4px;
pointer-events: none;
}
/* ========== v0.92 マーカーラベル統一 (プロト .mn-label 準拠) ========== */
/* 既存 styles.css の .tooltip-normal を上書きして、小さなダークピル形ラベルに揃える */
.leaflet-tooltip.tooltip-normal,
.leaflet-tooltip.tooltip-target,
.leaflet-tooltip.tooltip-relation {
font-size: 11px !important;
font-weight: 700 !important;
background: rgba(20, 20, 20, .82) !important;
color: #fff !important;
padding: 2px 8px !important;
border: none !important;
border-radius: 10px !important;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important;
opacity: 1 !important;
}
/* 三角の矢印 (::before) も非表示にして純粋な pill にする */
.leaflet-tooltip.tooltip-pref::before,
.leaflet-tooltip.tooltip-city::before,
.leaflet-tooltip.tooltip-normal::before,
.leaflet-tooltip.tooltip-target::before,
.leaflet-tooltip.tooltip-relation::before {
display: none !important;
}
/* 🆕 都道府県/市区町村: 絵文字アイコンを廃止しラベルのみで表示する(マーカーは緯度経度上の
不可視アンカー)。direction:'center', offset:[0,0]で座標に直接重ねるためマージンは持たせない。
背景色は既存ブランドカラー(都道府県#2e7d32緑/市区町村#e65100橙)のalpha0.7、フォントは
tooltip-normal比+1px */
.leaflet-tooltip.tooltip-pref {
font-size: 13px !important;
font-weight: 700 !important;
background: rgba(46, 125, 50, .7) !important;
color: #fff !important;
padding: 2px 8px !important;
border: none !important;
border-radius: 10px !important;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important;
opacity: 1 !important;
margin: 0 !important;
}
.leaflet-tooltip.tooltip-city {
font-size: 13px !important;
font-weight: 700 !important;
background: rgba(230, 81, 0, .7) !important;
color: #fff !important;
padding: 2px 8px !important;
border: none !important;
border-radius: 10px !important;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important;
opacity: 1 !important;
margin: 0 !important;
}
/* 🆕 スポットpush-pin専用のチップ。背景色は分類(主/関連/周辺)ごとに、ピンの色の明度を
×0.7したものをalpha0.7で使う (文字色は白のまま)。フォントサイズは旧10px→11px(+1) */
.leaflet-tooltip.tooltip-spot-pin {
font-size: 11px !important;
font-weight: 700 !important;
color: #fff !important;
padding: 2px 8px !important;
border: none !important;
border-radius: 10px !important;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important;
opacity: 1 !important;
}
.leaflet-tooltip.tooltip-spot-pin::before {
display: none !important;
}
.leaflet-tooltip.tooltip-spot-pin-primary { background: rgba(198, 17, 17, .7) !important; }
.leaflet-tooltip.tooltip-spot-pin-related { background: rgba(9, 83, 204, .7) !important; }
.leaflet-tooltip.tooltip-spot-pin-nearby { background: rgba(90, 90, 90, .7) !important; }
.leaflet-tooltip.tooltip-spot-pin-selected { background: rgba(4, 127, 148, .7) !important; }
/* 🆕 クエストpush-pinのラベル(桃色ピル)。spot-pinと同型だが opacity は !important で固定せず、
bindTooltip の opacity オプション(dim時0.2)を効かせる(ピンと同じ減光に追従させるため)。 */
.leaflet-tooltip.tooltip-quest-pin {
font-size: 11px !important;
font-weight: 700 !important;
color: #fff !important;
padding: 2px 8px !important;
border: none !important;
border-radius: 10px !important;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important;
background: rgba(237, 114, 181, .8) !important; /* 桃色 #ed72b5 */
}
.leaflet-tooltip.tooltip-quest-pin::before { display: none !important; }
/* 🆕 PCでスポットpush-pinの選択領域上にマウスがある間、カーソルを pointer (指アイコン) にする */
.leaflet-container.rekibura-spot-hover {
cursor: pointer !important;
}
/* 🆕 都道府県シートの「市区町村」一覧: タグ風の小さな丸ボタン */
.cd-city-chip {
padding: 6px 13px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
font-family: 'Zen Maru Gothic', sans-serif;
border: 1.5px solid var(--border-light);
background: var(--bg-card);
color: var(--text-sec);
cursor: pointer;
}
.cd-city-chip:hover {
border-color: var(--gold);
color: var(--gold);
}
/* ========== スポット検索オートコンプリート ========== */
.mp-search-ac-wrap{position:relative;flex:1;min-width:0}
.mp-search-ac{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(26,18,8,.18);z-index:50;max-height:240px;overflow-y:auto}
.mp-search-ac-item{padding:9px 12px;font-size:14px;color:var(--text-primary);cursor:pointer;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:8px;line-height:1.4}
.mp-search-ac-item:last-child{border-bottom:none}
.mp-search-ac-item:hover,.mp-search-ac-item.on{background:var(--bg-shell)}
.mp-search-ac-item .ac-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-search-ac-item .ac-name strong{color:var(--gold);font-weight:700}
.mp-search-ac-item .ac-meta{font-size:11px;color:var(--text-muted);flex-shrink:0;white-space:nowrap}
/* ========== スポット検索シート (sh-mp-search プロト v0_921 準拠) ========== */
.map-input{width:100%;padding:11px 14px;border:1.5px solid var(--border-warm);border-radius:var(--radius-sm);font-family:inherit;font-size:16px;background:var(--bg-card);color:var(--text-primary);outline:none;transition:var(--transition);min-height:46px;box-sizing:border-box}
.map-input:focus{border-color:var(--gold)}
.map-select{width:100%;padding:9px 12px;border:1.5px solid var(--border-warm);border-radius:var(--radius-sm);font-family:inherit;font-size:14px;background:var(--bg-card);color:var(--text-primary);outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;box-sizing:border-box;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.map-select:disabled{opacity:.4;cursor:not-allowed}
.map-input:disabled,select.map-input:disabled{opacity:.4;cursor:not-allowed;background:rgba(0,0,0,.03)}
.inline-btn{padding:9px 16px;border-radius:var(--radius-sm);border:1.5px solid #cd4762;background:transparent;color:#cd4762;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);min-height:46px;white-space:nowrap}
.inline-btn:hover{background:#cd4762;color:#fff}
.srch-acc-wrap{border:1px solid var(--border-light);border-radius:var(--radius-sm);overflow:hidden;flex:1;min-width:0;background:var(--bg-card)}
.srch-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:none;border:none;font-size:14px;font-weight:700;color:var(--text-primary);cursor:pointer;font-family:inherit;min-height:46px}
.srch-acc-body{display:none;padding:0 12px 8px}
.srch-acc-body.on{display:block}
.srch-check-row{display:flex;align-items:center;gap:12px;padding:9px 4px;font-size:14px;color:var(--text-primary);border-bottom:1px solid var(--border-light);cursor:pointer;min-height:40px}
.srch-check-row:last-child{border-bottom:none}
.srch-check-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--indigo);cursor:pointer;flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0}
/* ========== ルート設定シート (sh-mp-route プロト v0_921 準拠) ========== */
/* 🆕 2026-06-22 行ごとのテーブル風デザインに再構成。番号バッジを役割色(出発地/経由地/
目的地)で塗り分け、全体的にフォントサイズを引き上げて視認性を上げた */
.rt-table{border:1px solid var(--border-warm);border-radius:var(--radius-sm);overflow:hidden;background:#fff;margin:6px 0}
.rt-row{display:flex;align-items:center;gap:12px;padding:14px 12px;border-bottom:1px solid var(--border-light);font-size:16px;background:#fff}
.rt-row:nth-child(even){background:rgba(134,163,159,.07)}
.rt-row:last-child{border-bottom:none}
.rt-row-fixed{background:rgba(188,155,88,.12)}
.rt-row-candidate{opacity:.6}
.rt-num-badge{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:15px;font-weight:800;flex-shrink:0;color:#fff;background:var(--text-muted)}
.rt-num-badge.role-origin{background:var(--indigo)}
.rt-num-badge.role-via{background:var(--gold)}
.rt-num-badge.role-destination{background:var(--vermilion)}
.rt-num-badge.is-candidate{background:transparent;border:2.5px solid var(--border-warm);color:var(--text-muted)}
.rt-icon{display:flex;align-items:center;justify-content:center;width:22px;flex-shrink:0;line-height:1}
.rt-swap{display:inline-block;color:var(--text-muted);cursor:grab;padding:4px 2px;font-size:19px;line-height:1;letter-spacing:-2px;user-select:none;touch-action:none}
.rt-swap:active{cursor:grabbing}
.rt-row-ghost{opacity:.35;background:var(--bg-shell)}
.rt-row-chosen{background:var(--bg-shell);box-shadow:0 2px 12px rgba(26,18,8,.12);border-radius:var(--radius-sm)}
.rt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rt-role{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--text-sec)}
.rt-role.role-origin{color:var(--indigo)}
.rt-role.role-via{color:#8a6a1f}
.rt-role.role-destination{color:var(--vermilion)}
.rt-name{color:var(--text-primary);font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-name-empty{color:var(--text-muted);font-style:italic;font-weight:400}
/* 🆕 2026-06-22 桁数で幅が変わらないよう min-width+中央寄せにし、「0 m」と「xxx m」の
位置(左端)を行間で揃える */
.rt-dist{color:var(--text-sec);font-size:13px;font-weight:700;flex-shrink:0;white-space:nowrap;background:rgba(134,163,159,.18);padding:4px 10px;border-radius:999px;min-width:52px;text-align:center;box-sizing:border-box}
.rt-radio:disabled{opacity:.35;cursor:not-allowed}
/* 🆕 2026-06-22 出発地候補の上に出す案内文(例: 現在地が5km超で使えない時「チェックして出発地に設定」) */
.rt-row-hint{font-size:13px;font-weight:700;color:var(--vermilion);padding:8px 12px 0;background:#fff}
/* 🆕 2026-06-22 ×は丸で囲む */
.rt-del{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(134,163,159,.18);border:none;color:var(--text-sec);cursor:pointer;padding:0;font-size:14px;font-weight:700;flex-shrink:0;line-height:1}
.rt-del:hover{background:rgba(205,71,98,.18);color:var(--crimson)}
.rt-radio{width:21px;height:21px;flex-shrink:0;accent-color:var(--indigo);cursor:pointer}
.mr-notice{padding:14px 16px;background:rgba(134,163,159,.12);border-radius:var(--radius-sm);margin:4px 0 12px;border:1px solid rgba(134,163,159,.25)}
.mr-notice-line{font-size:15px;color:var(--text-primary);line-height:1.8;font-weight:500}
.mr-notice-line + .mr-notice-line{margin-top:6px}
.mr-dest-method{margin:16px 0 6px;padding:14px 16px;background:rgba(188,155,88,.12);border-radius:var(--radius-sm);border:1px solid rgba(188,155,88,.28)}
.mr-dest-method .mr-notice-line:first-child{font-weight:800;color:var(--text-primary);font-size:15px}
.mr-map-toggle-row{display:flex;justify-content:flex-end;padding:6px 16px 0}
.mr-map-toggle-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border-light);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--text-sec);cursor:pointer;font-family:inherit}
.mr-map-toggle-btn:hover{background:var(--bg-shell)}
/* 🆕 2026-06-22 3状態: 設定なし(disabled)/設定あり非表示(通常)/地図上に表示中(is-on, 反転) */
.mr-map-toggle-btn:disabled{opacity:.4;cursor:not-allowed;background:transparent}
.mr-map-toggle-btn.is-on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.mr-map-toggle-btn.is-on:hover{background:var(--indigo)}
/* ========== 共通ダイアログ (ui-notify.js: notify()/confirmDialog()) ==========
2026-06-22: 素のBootstrapモーダル(角丸薄め/14pxフォント/既定ボタン色)が他UIと
テイストが揃っていなかったため、トーストと同系統の温かみのあるデザインに統一 */
.ui-notify-modal .modal-content{border-radius:18px;border:1px solid var(--border-warm);background:var(--bg-card);box-shadow:0 14px 44px rgba(26,18,8,.30);overflow:hidden}
.ui-notify-body{padding:28px 24px 8px;text-align:center}
.ui-notify-msg{font-family:'Zen Maru Gothic',sans-serif;font-size:15px;font-weight:600;line-height:1.8;color:var(--text-primary);white-space:pre-wrap}
/* 🆕 2026-07-18 確認/通知ダイアログは modal-dialog-centered(中央配置)のためボタンは常に画面中央付近で
下端UIとは重ならない。ホームインジケータ端末向けに safe-area 分だけ下端クリアランスを付与(SEは0=変化なし)。 */
.ui-notify-footer{padding:18px 22px calc(22px + env(safe-area-inset-bottom));border-top:none;display:flex;gap:10px;justify-content:center}
.ui-notify-btn{font-family:'Zen Maru Gothic',sans-serif;font-size:15px;font-weight:700;border-radius:999px;padding:12px 22px;cursor:pointer;transition:var(--transition);letter-spacing:.03em;min-height:46px;border:none;flex:1}
.ui-notify-btn-primary{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);color:#fff;box-shadow:0 3px 12px rgba(188,155,88,.40)}
.ui-notify-btn-primary:hover{filter:brightness(1.05)}
.ui-notify-btn-danger{background:linear-gradient(135deg,var(--crimson) 0%,var(--vermilion) 100%);color:#fff;box-shadow:0 3px 12px rgba(158,45,64,.40)}
.ui-notify-btn-danger:hover{filter:brightness(1.05)}
.ui-notify-btn-outline{background:transparent;color:var(--text-sec);border:2px solid var(--border-warm)}
.ui-notify-btn-outline:hover{background:rgba(134,163,159,.12)}
.mr-max-note{font-size:13px;font-weight:600;color:var(--text-muted);padding:8px 0 0;text-align:center}
.toggle-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.note-box{padding:10px 14px;background:rgba(134,163,159,.10);border-radius:var(--radius-sm);font-size:15px;color:var(--text-sec);line-height:1.8}
.divider{height:1px;background:var(--border-light);margin:14px 0}
.stit{font-family:'Zen Maru Gothic',sans-serif;font-size:16px;font-weight:700;color:var(--text-primary)}
/* ========== めぐる ノード詳細シート (sh-mp-fn02 準拠) ========== */
.cap-section{font-size:13px;font-weight:800;color:var(--text-sec);margin:14px 0 8px;letter-spacing:.06em}
.map-shdr{padding:11px 16px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-shrink:0;background:var(--bg-card);flex-wrap:wrap}
.map-action-btn{padding:7px 12px;border-radius:var(--radius-sm);background:rgba(205,71,98,.08);border:1px solid rgba(205,71,98,.50);color:#cd4762;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;white-space:nowrap;transition:var(--transition);min-height:36px}
.map-action-btn:hover{background:rgba(205,71,98,.30);color:#cd4762;border-color:#cd4762}
.map-action-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.map-action-btn.checked-in{background:#cd4762;border-color:#cd4762;color:#fff}
.map-action-btn.checked-in:hover{background:#b73954;border-color:#b73954;color:#fff}
/* 🆕 主ノードの「検索」= 現在の検索対象。薄い非活性ではなく反転(塗りつぶし)で示し、クリックは受け付けない。
:disabled の opacity:.35 を上書きするため :disabled 付きでも指定する(指定度を高くして確実に勝たせる)。 */
.map-action-btn.nd-search-current,
.map-action-btn.nd-search-current:disabled{background:#cd4762;border-color:#cd4762;color:#fff;opacity:1;cursor:default}
.checkin-done-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;background:rgba(255,255,255,.25);color:#fff;font-size:11px;font-weight:700;vertical-align:middle}
.fav-btn{width:34px;height:34px;border-radius:50%;background:rgba(205,71,98,.08);border:1.5px solid rgba(205,71,98,.50);color:#cd4762;cursor:pointer;font-size:19px;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;padding:0}
.fav-btn.fav-active{background:#fde8ec;border-color:#e53935;color:#e53935}
.close-btn{width:34px;height:34px;border-radius:50%;background:rgba(29,60,92,.1);color:var(--indigo);border:none;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;padding:0}
.close-btn:hover{background:rgba(29,60,92,.18)}
.hist-title{font-size:15px;font-weight:600;color:var(--text-primary);line-height:1.5}
.hist-meta{font-size:12px;color:var(--text-muted);margin-top:2px}
/* ========== めぐるタブ FABs (プロト v0_921 .mfabs / .mfab 準拠) ========== */
/* MapTiler SDK のデフォルト右上コントロール (zoom/compass/geolocate) はプロトには無く .mfabs と被るため非表示。zoom はピンチ/ダブルタップで代替、geolocate は #locateBtn で代替 */
.row-map .maplibregl-ctrl-top-right{display:none !important}
/* 🆕 2026-07-20 iPhone上部セーフエリア(ノッチ/ステータスバー)でFABが押せない対策: 上部固定FABを一律50px下げる */
.mfabs{position:absolute;right:12px;top:62px;display:flex;flex-direction:column;gap:8px;z-index:1000}
.mfab{width:46px;height:46px;border-radius:var(--radius-sm);background:rgba(250,247,240,.97);border:1px solid var(--border-warm);cursor:pointer;font-size:21px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(26,18,8,.20);transition:var(--transition);text-decoration:none;color:inherit;line-height:1;padding:0;font-family:inherit}
.mfab:hover{background:#fff;box-shadow:0 4px 16px rgba(26,18,8,.25)}
.mfab.on{background:var(--indigo);color:#fff}
/* 🆕 2026-06-22 mfab共通の「バッジ」状態(赤点)。ルート設定FAB/検索FAB/現在地FABで共用 */
.mfab.badge{position:relative}
.mfab.badge::after{content:'';position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--crimson,#c0392b);border:1.5px solid #fff}
.mfab #btn-current-location-svg-container{display:flex;align-items:center;justify-content:center;line-height:1}
.mfab #btn-current-location-svg-container svg{width:22px;height:22px}
/* ========== プロトタイプ v0_923 準拠 新規クラス ========== */
/* アコーディオン行ヘッダー (.acc-hdr) */
.acc-hdr{padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--text-sec);background:rgba(134,163,159,.10);border-radius:var(--radius-sm);margin:7px 0;min-height:48px}
.acc-hdr:hover{background:rgba(134,163,159,.18)}
/* アクションボタン (.act-btn / .act-fav) — 朱色アクセント */
.act-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-sm);border:1.5px solid rgba(205,71,98,.38);background:rgba(205,71,98,.10);color:#cd4762;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);min-height:40px;text-decoration:none}
.act-btn:hover{background:rgba(205,71,98,.20);color:#cd4762}
.act-fav{width:36px;height:36px;border-radius:50%;background:rgba(205,71,98,.10);border:1.5px solid rgba(205,71,98,.38);color:#cd4762;cursor:pointer;font-size:19px;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;padding:0}
.act-fav:hover,.act-fav.on,.act-fav.fav-active{background:rgba(205,71,98,.20);color:#cd4762}
/* アクションストリップ (.act-strip) — ヘッダー直下の朱色ボタン列 */
.act-strip{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border-light);flex-shrink:0;background:var(--bg-card);flex-wrap:wrap}
/* スポット名 / 読み (ノード詳細シート sh-mp-fn02) */
.spot-name{font-family:'Shippori Mincho B1','Zen Maru Gothic',serif;font-size:21px;font-weight:700;color:var(--text-primary);line-height:1.4;margin-bottom:4px}
.spot-yomi{font-size:13px;color:var(--gold);font-weight:600;margin-bottom:14px;letter-spacing:.03em}
/* つながるカードボタン (.ln-card-btn) */
.ln-card-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);border:1.5px solid rgba(158,45,64,.35);background:rgba(158,45,64,.07);color:var(--crimson);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);min-height:38px;text-decoration:none}
.ln-card-btn:hover{background:rgba(158,45,64,.14);color:var(--crimson)}
/* ================================================
v0.9231 patch start
適用日：2026-05-23
対象：全要素グラデーション化・ヘッダー/ボトムナビ風和テクスチャ・レベルカード黄金ゴージャス化・履歴行ボタン化
================================================ */
/* —— M01 ヘッダー —— */
#hdr {
background: linear-gradient(180deg,
#c8d8a8 0%,
#b8c898 35%,
#afc28a 65%,
#9eb278 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(0,0,0,.08),
0 2px 14px rgba(74,58,40,.12) !important;
position: relative;
flex-direction: column;
align-items: stretch;
justify-content: center;
padding: 6px 18px;
gap: 4px;
/* overflow: hidden は削除 — lang-menu ドロップダウンが #hdr に切り取られるため */
}
/* ボタン類: ヘッダー最下段・右寄せ (帯下端と十分な余白を作るため上へオフセット)。
2026-06-30: ユーザボタン/グローバルボタンを 5px 下げ (-17px→-12px) */
#hdr-right {
position: relative !important;
top: -12px;
align-self: flex-end;
}
/* たまむすびアイコン: ヘッダー左下に配置 (原寸48pxの約70% = 34px)。#hdr-right と高さを揃える */
/* 詳細度を #hdr #... にして #hdr > *{position:relative} に勝たせる (絶対配置を維持) */
#hdr #hdr-tamamusubi {
position: absolute;
left: 18px;
bottom: 9px; /* 2026-06-30: くるくるアイコンを 5px 下げ (14→9) */
width: 34px;
height: 34px;
z-index: 2;
cursor: pointer;
filter: drop-shadow(0 2px 4px rgba(29,60,92,.30));
}
/* くるっ: 初回ロード時・タップ時に1回転 (.spin の付与/再付与で発火) */
@keyframes tamamusubi-spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
#hdr-tamamusubi.spin {
animation: tamamusubi-spin .75s cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-reduced-motion: reduce) {
#hdr-tamamusubi.spin { animation: none; }
}
#hdr::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: .22;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 60px;
background-repeat: repeat-x;
background-position: center;
}
#hdr > * {
position: relative;
z-index: 1;
}
#auth-btn {
background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(29,60,92,.08) 100%) !important;
border: 1px solid rgba(29,60,92,.22) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
#auth-btn:hover {
background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(29,60,92,.16) 100%) !important;
}
#lang-btn {
background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(29,60,92,.08) 100%) !important;
border: 1px solid rgba(29,60,92,.22) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
#lang-btn:hover {
background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(29,60,92,.16) 100%) !important;
}
#hdr-logo-mark {
background: linear-gradient(135deg, #2a4d75 0%, #1d3c5c 100%) !important;
box-shadow: 0 2px 8px rgba(29,60,92,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
/* タグライン（最上段・中央揃え。5px下へオフセット。#hdr の高さには影響させないため position:relative） */
.hdr-tagline {
margin: 0;
text-align: center;
font-size: 13px;
font-weight: 700;
color: #1A2E40;
line-height: 1.3;
letter-spacing: 0.03em;
position: relative;
top: 10px; /* 2026-06-30: サブタイトルをさらに 5px 下げ (5→10) */
}
/* バナー（中段・中央揃え）。2026-06-30: バナーを 5px 下げ */
#hdr-logo {
align-self: center;
position: relative;
top: 5px;
}
#hdr-logo .hdr-banner {
height: 81.1px;
width: auto;
display: block;
}
/* —— M02 ボトムナビ ——
2026-05-28: 上の `#bnav{position:fixed;...}` を優先させるため position/overflow 上書き撤去。
背景・shadow だけここで !important で確定する。 */
#bnav {
background: linear-gradient(180deg,
#2a4d75 0%,
#1d3c5c 45%,
#142a44 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 -3px 16px rgba(0,0,0,.22) !important;
overflow: hidden;
}
#bnav::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: .18;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 72px;
background-repeat: repeat-x;
background-position: center;
}
#bnav .ni {
position: relative;
z-index: 2;
}
.ni.on {
background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, transparent 100%);
}
/* —— M03 カード・セクション基盤 —— */
.card {
/* 🆕 2026-06-28(再修正) カードのキャンバスは「不透明」に戻す(元のクリームグラデ)。
カード上のボタン/行/バナーは半透明グラデ設計=不透明カード前提なので、カードを不透明に
保てばそれらは一切いじらず・グラデもそのまま正常表示される(ユーザー提案どおり)。
透過(イラストが薄く透ける)は #app(.70)+.tab-pane透明 により「カード外の余白」だけで成立し、
余白が均一に透けることで「薄い帯が1本だけ目立つ」問題も解消する。 */
background: linear-gradient(180deg,
#fefcf0 0%,
#fbf6e5 50%,
#f7f0d8 100%
) !important;
box-shadow:
0 4px 18px rgba(26,18,8,.09),
inset 0 1px 0 rgba(255,255,255,.65),
inset 0 -1px 0 rgba(0,0,0,.03) !important;
position: relative;
}
.card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(200,147,61,.55) 25%,
rgba(212,192,112,.70) 50%,
rgba(200,147,61,.55) 75%,
transparent 100%
);
z-index: 2;
pointer-events: none;
}
.card-hdr {
background: linear-gradient(180deg,
#9bb8b4 0%,
#86a39f 50%,
#789590 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
inset 0 -1px 0 rgba(0,0,0,.12) !important;
position: relative;
}
/* 🆕 2026-06-28 v1 踏襲: セクションタイトル帯(.card-hdr)の右端に花柄3輪(金/白/赤)を
アクセントとして付す。v1 home_01.svg の重なり配置を密着 viewBox に合成した
hana_cluster.svg(aspect 71.38:36.04 ≒ 1.98:1)を、帯の高さに合わせて contain で右寄せ。
v2 帯は v1(40px)より広いため、帯高に追従させて見栄えを保つ。LN_xx アイコンは
非表示(.card-hdr-icon)なので右端は空いており、短いタイトルとは重ならない。 */
.card-hdr::after {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
right: 14px;
width: 80px;
background: url('../images/hana_cluster.svg') no-repeat right center;
background-size: contain;
opacity: .92;
pointer-events: none;
z-index: 1;
}
/* タイトルが長い場合に花柄へ食い込まないよう、テキスト側に右マージンを確保 */
.card-hdr > span:first-child { padding-right: 84px; }
.shdr {
background: linear-gradient(180deg,
#9bb8b4 0%,
#86a39f 50%,
#789590 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.10) !important;
}
.mhdr {
background: linear-gradient(180deg,
#9bb8b4 0%,
#86a39f 50%,
#789590 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.10) !important;
}
.map-shdr {
background: linear-gradient(180deg, #fefcf0 0%, #fbf6e5 100%) !important;
box-shadow: inset 0 -1px 0 rgba(90,60,20,.10) !important;
}
.today-banner {
background: linear-gradient(180deg,
rgba(134,163,159,.20) 0%,
rgba(134,163,159,.08) 100%
) !important;
border-bottom: 1px solid rgba(134,163,159,.25) !important;
}
.notif-row {
background: linear-gradient(180deg,
rgba(134,163,159,.18) 0%,
rgba(134,163,159,.08) 100%
) !important;
border-bottom-color: rgba(134,163,159,.24) !important;
}
/* —— M04 一般ボタン群 —— */
.btn-row {
background: linear-gradient(180deg,
rgba(255,255,255,.42) 0%,
rgba(205,71,98,.10) 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 1px 3px rgba(26,18,8,.05) !important;
}
.btn-row:hover,
.btn-row:active {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
rgba(205,71,98,.22) 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 3px 10px rgba(205,71,98,.16) !important;
}
.btn-primary {
background: linear-gradient(180deg,
#d4c070 0%,
#bc9b58 50%,
#a88840 100%
) !important;
box-shadow:
0 4px 18px rgba(200,147,61,.40),
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -2px 0 rgba(0,0,0,.12) !important;
}
.btn-primary:hover {
background: linear-gradient(180deg,
#deca7a 0%,
#c8a860 50%,
#b49248 100%
) !important;
box-shadow:
0 6px 22px rgba(200,147,61,.50),
inset 0 1px 0 rgba(255,255,255,.40),
inset 0 -2px 0 rgba(0,0,0,.14) !important;
}
.btn-secondary {
background: linear-gradient(180deg,
rgba(255,255,255,.08) 0%,
rgba(205,71,98,.04) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(205,71,98,.10) !important;
}
.btn-secondary:hover {
background: linear-gradient(180deg,
rgba(205,71,98,.28) 0%,
rgba(158,45,64,.38) 100%
) !important;
}
/* 🆕 Section header dividers: 全ボトムシート共通。セクション見出し(.cap-section)の上に
区切り罫線＋余白を入れ、どのシートも段落構造が一目で分かるようにする(読みやすさ統一)。 */
.rekibura-sheet .cap-section {
border-top: 1px solid var(--border-light);
padding-top: 12px;
margin-top: 16px;
}
/* 本文先頭(イントロ吹き出し直後/本文の最初)に来る見出しは区切り線を出さない(冒頭の余分な罫線を防ぐ) */
.rekibura-sheet .modal-body > .cap-section:first-child,
#nodeDetailBasicWrap .cap-section {
border-top: none;
padding-top: 0;
margin-top: 0;
}
/* 🆕 2026-06-28 しのぶ: greeting(挨拶吹き出し)直後の空キャプションに出る区切り罫線は不要
(挨拶と選択肢/チャットの間の線・余白を消す)。 */
#shinobuCaption {
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
.inline-btn {
background: linear-gradient(180deg,
rgba(255,255,255,.35) 0%,
rgba(205,71,98,.06) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.inline-btn:hover {
background: linear-gradient(180deg,
#e05570 0%,
#cd4762 100%
) !important;
}
.ob-btn-main {
background: linear-gradient(180deg,
#e05570 0%,
#cd4762 50%,
#b83a55 100%
) !important;
box-shadow:
0 4px 18px rgba(205,71,98,.35),
inset 0 1px 0 rgba(255,255,255,.25),
inset 0 -2px 0 rgba(0,0,0,.12) !important;
}
.ob-btn-main:hover {
background: linear-gradient(180deg,
#e86080 0%,
#d45070 50%,
#c04060 100%
) !important;
}
.ob-btn-main.gold {
background: linear-gradient(180deg,
#d4c070 0%,
#bc9b58 50%,
#a88840 100%
) !important;
}
.ob-btn-sub {
background: linear-gradient(180deg,
rgba(255,255,255,.38) 0%,
rgba(205,71,98,.05) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.ob-btn-sub:hover {
background: linear-gradient(180deg,
rgba(205,71,98,.12) 0%,
rgba(205,71,98,.22) 100%
) !important;
}
.set-row {
background: linear-gradient(180deg,
rgba(255,255,255,.40) 0%,
rgba(205,71,98,.10) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.set-row:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
rgba(205,71,98,.22) 100%
) !important;
}
.close-btn {
background: linear-gradient(180deg,
rgba(255,255,255,.22) 0%,
rgba(255,255,255,.10) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.close-btn:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.35) 0%,
rgba(255,255,255,.20) 100%
) !important;
}
/* クエストコース読み取り専用モード */
#mapRouteModal.route-readonly .mr-map-toggle-row { display: none !important; }
#mapRouteModal.route-readonly #map-route-btn-row { display: none !important; }
#mapRouteModal.route-readonly .mr-dest-method { display: none !important; }
#mapRouteModal.route-readonly #map-route-max-note { display: none !important; }
#mapRouteModal.route-readonly .rt-swap { display: none !important; }
#mapRouteModal.route-readonly .rt-del { display: none !important; }
#mapRouteModal.route-readonly input.rt-radio { display: none !important; }
#mapRouteModal.route-readonly .mr-notice { display: none !important; }
/* クエストコース: 番号バッジの色をマップ上の通過点マーカー(#C8933D)と統一する */
#mapRouteModal.route-readonly .rt-num-badge { background: #C8933D !important; }
/* 直線距離(前スポットからの)を右端に表示 */
#mapRouteModal.route-readonly .rt-dist { color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mfab {
background: linear-gradient(180deg,
rgba(255,255,255,.98) 0%,
#f4eedc 100%
) !important;
box-shadow:
0 2px 12px rgba(26,18,8,.22),
inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.mfab:hover {
background: linear-gradient(180deg,
#ffffff 0%,
#f9f5e8 100%
) !important;
box-shadow: 0 4px 18px rgba(26,18,8,.28), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.mfab.on {
background: linear-gradient(180deg,
#2a4d75 0%,
#1d3c5c 100%
) !important;
box-shadow: 0 2px 10px rgba(29,60,92,.45), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
#sn-btn {
background: radial-gradient(circle at 32% 28%,
#c8d8a8 0%,
#afc28a 55%,
#9ab278 100%
) !important;
box-shadow:
0 4px 20px rgba(29,60,92,.32),
inset 0 1px 0 rgba(255,255,255,.40) !important;
}
/* 🆕 2026-06-27 しのぶ画像アイコン (FAB=shinobu_happy / ヘッダ=shinobu_normal)。
font-size(絵文字)無効化。縁は変更前の忍者と同じく「緑(#afc28a)の円 + 紺枠」が見えるよう、
画像を枠いっぱいに敷かずインセットして緑の縁を残す(画像はflexで中央寄せ)。 */
#sn-btn, #shinobuHeaderIcon { padding: 0; }
.sn-shinobu-img { width: 91%; height: 91%; border-radius: 50%; object-fit: cover; display: block; }
#sn-float {
background: radial-gradient(circle at 32% 28%,
#c8d8a8 0%,
#afc28a 55%,
#9ab278 100%
) !important;
box-shadow: 0 2px 12px rgba(29,60,92,.32), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
/* —— M05 タブ・グリッド・選択系 —— */
.stab {
background: linear-gradient(180deg,
rgba(255,255,255,.40) 0%,
rgba(26,18,8,.04) 100%
) !important;
transition: var(--transition) !important;
}
.stab:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.55) 0%,
rgba(29,60,92,.06) 100%
) !important;
}
.stab.on {
background: linear-gradient(180deg,
#e05570 0%,
#cd4762 50%,
#b03a55 100%
) !important;
color: #fff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
0 3px 10px rgba(205,71,98,.28) !important;
border-radius: var(--radius-sm) !important;
}
.g-btn {
background: linear-gradient(180deg,
rgba(255,255,255,.48) 0%,
rgba(205,71,98,.10) 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 4px rgba(26,18,8,.07) !important;
}
.g-btn:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.56) 0%,
rgba(205,71,98,.22) 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.60),
0 3px 10px rgba(205,71,98,.16) !important;
}
.chip {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
#fbf6e5 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(26,18,8,.05) !important;
}
.chip:hover {
background: linear-gradient(180deg,
#fdf6e0 0%,
#f7eecf 100%
) !important;
}
.chip.on {
background: linear-gradient(180deg,
#2a4d75 0%,
#1d3c5c 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 2px 8px rgba(29,60,92,.25) !important;
}
.sstg {
background: linear-gradient(180deg,
rgba(255,255,255,.48) 0%,
#fbf6e5 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.sstg.on {
background: linear-gradient(180deg,
#2a4d75 0%,
#1d3c5c 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 2px 6px rgba(29,60,92,.22) !important;
}
.tag-item {
background: linear-gradient(180deg,
rgba(255,255,255,.55) 0%,
#fbf6e5 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(26,18,8,.05) !important;
}
.tag-item:hover {
background: linear-gradient(180deg,
#fdf6e0 0%,
#f7eecf 100%
) !important;
}
.tag-item.on {
background: linear-gradient(180deg,
rgba(29,60,92,.10) 0%,
rgba(29,60,92,.05) 100%
) !important;
}
/* ===== テーマ選択ボタン統一 (2026-07-12) =====
プロフィール興味タグ(.tag-item) と クエスト検索「絞り込む」のテーマ chip を同一装飾に揃える。
#qs-filter-themes 内の chip を縦並びカード(emoji + ラベル + 選択時✓)へ scoped に上書き。
※ .chip の gradient は !important 指定なので、こちらも ID 特異度 + !important で確実に勝たせる。 */
#qs-filter-themes.theme-chips {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 0;
}
#qs-filter-themes .theme-chip {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
justify-content: flex-start;
text-align: left;
padding: 13px 16px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--border-warm);
color: var(--text-sec);
font-size: 15px;
font-weight: 500;
min-height: 52px;
line-height: 1.35;
background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, #fbf6e5 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(26,18,8,.05) !important;
}
#qs-filter-themes .theme-chip:hover {
border-color: var(--gold);
color: var(--text-sec);
background: linear-gradient(180deg, #fdf6e0 0%, #f7eecf 100%) !important;
}
#qs-filter-themes .theme-chip.on {
border-color: var(--indigo);
color: var(--text-pri);
font-weight: 600;
background: linear-gradient(180deg, rgba(29,60,92,.10) 0%, rgba(29,60,92,.05) 100%) !important;
}
#qs-filter-themes .theme-chip.on::after {
content: '✓';
margin-left: auto;
color: var(--indigo);
font-weight: 800;
flex: 0 0 auto;
}
#qs-filter-themes .theme-chip .tag-emoji {
font-size: 21px;
width: 26px;
text-align: center;
flex: 0 0 auto;
}
.auth-option {
background: linear-gradient(180deg,
rgba(255,255,255,.55) 0%,
#fbf6e5 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 4px rgba(26,18,8,.06) !important;
}
.auth-option:hover {
background: linear-gradient(180deg,
#fdf6e0 0%,
#f7eecf 100%
) !important;
}
.auth-option-icon {
background: linear-gradient(135deg,
rgba(175,194,138,.30) 0%,
rgba(175,194,138,.12) 100%
) !important;
}
.qopt {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
#fbf6e5 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(26,18,8,.04) !important;
}
.qopt:hover:not(:disabled) {
background: linear-gradient(180deg,
rgba(29,60,92,.08) 0%,
rgba(29,60,92,.04) 100%
) !important;
}
.qopt.correct {
background: linear-gradient(180deg, #eef8f3 0%, #e8f5ee 100%) !important;
}
.qopt.wrong {
background: linear-gradient(180deg,
rgba(139,32,32,.10) 0%,
rgba(139,32,32,.07) 100%
) !important;
}
/* 2026-07-01 修験道おさらいクイズ: 解答の選択肢は青字にしない
(CMS由来の青太字ノード注釈の色を無効化・ルビ等の構造は維持) */
#shugenQuizChoices .qopt,
#shugenQuizChoices .qopt * {
color: var(--text-primary) !important;
}
.fav-btn {
background: linear-gradient(180deg,
rgba(255,255,255,.42) 0%,
rgba(205,71,98,.08) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.50) !important;
}
.fav-btn:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.55) 0%,
rgba(205,71,98,.18) 100%
) !important;
}
.fav-btn.fav-active {
background: linear-gradient(180deg,
#fef2f4 0%,
#fde8ec 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.60),
0 2px 6px rgba(229,57,53,.15) !important;
}
.map-action-btn {
background: linear-gradient(180deg,
rgba(255,255,255,.40) 0%,
rgba(205,71,98,.04) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(205,71,98,.10) !important;
}
.map-action-btn:hover,
.map-action-btn.on {
background: linear-gradient(180deg,
rgba(205,71,98,.28) 0%,
rgba(158,45,64,.38) 100%
) !important;
}
.map-action-btn.checked-in,
.map-action-btn.nd-search-current {
background: linear-gradient(180deg,
#d96a82 0%,
#cd4762 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.map-select {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
#fbf6e5 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(26,18,8,.05) !important;
}
/* —— M06 MYSTORY・記録系 —— */
.stamp-item {
background: linear-gradient(180deg,
rgba(255,255,255,.55) 0%,
#fbf6e5 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
0 1px 4px rgba(26,18,8,.06) !important;
}
.stamp-item.got {
background: linear-gradient(180deg,
#fdf6e0 0%,
#f7eecf 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
0 2px 8px rgba(200,147,61,.15) !important;
border-color: var(--gold) !important;
}
.ms-stamp-card {
/* 🆕 2026-06-28 スタンプ背景の藍色バナー枠は不要 → 背景/影/パディングを除去し、
スタンプ画像単体を見せる(セクションのクリーム背景の上に直接表示)。 */
background: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.ms-btn-purchase {
background: linear-gradient(180deg,
#e05570 0%,
#cd4762 45%,
#a83855 100%
) !important;
box-shadow:
0 6px 18px rgba(205,71,98,.40),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -2px 0 rgba(0,0,0,.15) !important;
}
.ms-btn-purchase:hover {
background: linear-gradient(180deg,
#e86080 0%,
#d45070 45%,
#b54060 100%
) !important;
box-shadow: 0 8px 24px rgba(205,71,98,.52) !important;
}
/* 🆕 2026-06-30 認証前「購入手続きへ」(#btn-buy)は藍色グラデ。認証後「いざ出陣!」(,id無し)は
crimson のまま維持。置換後のリンクは btn-buy id を持たないため #btn-buy で安全に分離できる。 */
#btn-buy.ms-btn-purchase {
background: linear-gradient(180deg,
#2e5a85 0%,
#1f4368 45%,
#163150 100%
) !important;
box-shadow: 0 6px 18px rgba(27,58,92,.4) !important;
}
#btn-buy.ms-btn-purchase:hover {
background: linear-gradient(180deg,
#356a9c 0%,
#265079 45%,
#1b3c5e 100%
) !important;
box-shadow: 0 8px 24px rgba(27,58,92,.5) !important;
}
.ms-spot-btn {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
#fbf6e5 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
0 1px 4px rgba(26,18,8,.06) !important;
}
.ms-spot-btn:hover {
background: linear-gradient(180deg,
#fdf6e0 0%,
#f7eecf 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
0 3px 10px rgba(200,147,61,.18) !important;
}
.ms-auth-btn {
background: linear-gradient(180deg,
#2a4d75 0%,
#1d3c5c 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 2px 6px rgba(29,60,92,.30) !important;
}
.ms-auth-btn:hover:not(:disabled) {
background: linear-gradient(180deg,
#336090 0%,
#2a4d75 100%
) !important;
}
.ms-auth-btn:disabled {
background: linear-gradient(180deg,
#c0b09a 0%,
#b0a090 100%
) !important;
}
.ms-purchase-wrap {
background: linear-gradient(180deg,
rgba(255,255,255,.45) 0%,
#fbf6e5 100%
) !important;
}
.ms-intro {
/* 2026-06-30 グラデ/しのぶは取りやめ、クリーム単色＋中央テキストに戻す */
background: #f4efe4 !important;
}
.ms-meta-list {
background: linear-gradient(180deg,
#f8f2e2 0%,
#f0e8d4 50%,
#e8dcca 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 2px 6px rgba(26,18,8,.06) !important;
}
.ms-acc-head {
background: linear-gradient(180deg,
rgba(255,255,255,.45) 0%,
#fbf6e5 100%
) !important;
}
.ms-acc-head:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.60) 0%,
#f7eecf 100%
) !important;
}
.ms-acc-body {
background: linear-gradient(180deg,
#f7eecf 0%,
#fbf6e5 100%
) !important;
}
.ms-check {
background: linear-gradient(135deg,
#fdf6e0 0%,
#f7eecf 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.ms-acc-list {
background: linear-gradient(180deg,
rgba(255,255,255,.45) 0%,
#fbf6e5 100%
) !important;
box-shadow:
0 2px 10px rgba(26,18,8,.08),
inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.ms-notice-box {
background: linear-gradient(180deg,
#fffbf0 0%,
#fff8ed 100%
) !important;
}
.ms-contact {
background: linear-gradient(180deg,
#2a4d75 0%,
#1d3c5c 55%,
#142a44 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 4px 16px rgba(29,60,92,.25) !important;
}
.ms-hero {
background: linear-gradient(180deg,
#060e1e 0%,
#0e1e38 35%,
#1a2c4d 65%,
#2a3e5e 100%
) !important;
box-shadow: inset 0 -4px 16px rgba(134,163,159,.08) !important;
}
/* 🆕 2026-06-28 クエスト詳細: hero を v1 バナー画像(たまむすびMYSTORY)に置換 */
.ms-hero-banner { padding: 0 !important; box-shadow: none !important; }
.ms-hero-banner::before { display: none !important; }
.ms-hero-img { display: block; width: 100%; height: auto; }
/* 修了スタンプを v1 グレースタンプ(未挑戦)＋「Try!」重畳に置換 */
.ms-stamp-illust-img {
width: 132px !important; height: 132px !important;
background: none !important; border: none !important;
border-radius: 0 !important; transform: none !important;
position: relative;
}
.ms-stamp-illust-img .ms-stamp-base,
.ms-stamp-illust-img .ms-stamp-try {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; display: block;
}
.ms-stamp-illust-img .ms-stamp-try { z-index: 2; }
/* サポートチーム帯の左端にくるくるアイコン(歴ぶらヘッダ34pxよりやや大きい44px) */
/* 🆕 2026-06-28(改) テキストは藍色枠内でセンタリング、アイコンは左端に絶対配置。
縦中央は margin-top(=-高さ/2) で取り、回転アニメ(transform:rotate)と干渉させない。 */
.ms-contact-withicon { position: relative; text-align: center; padding-left: 56px; padding-right: 56px; }
.ms-contact-withicon .ms-contact-text { text-align: center; }
.ms-contact-tama {
position: absolute; left: 16px; top: 50%; margin-top: -22px;
width: 44px; height: 44px; cursor: pointer;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.30));
}
.ms-contact-tama.spin { animation: tamamusubi-spin .75s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) { .ms-contact-tama.spin { animation: none; } }
.qhist-banner {
background: linear-gradient(135deg,
#1d3c5c 0%,
#2a5070 50%,
#86a39f 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}
/* 🆕 2026-06-28 カード背景を半透明(.70=#app)にしたことで、半透明設計だったカード「中身」
(行/ボタン/バナー)が背景イラストを素通ししていた。中身は不透明クリーム/淡サージに戻し、
フロストカード(半透明背景=ご要望どおり)の上でくっきり読めるようにする。
値は「元の薄tintを不透明カードに重ねた時の見え色」の近似(不透明)。 */
.qhist-card {
background: linear-gradient(180deg,
rgba(255,255,255,.45) 0%,
#fbf6e5 100%
) !important;
}
.qhist-card:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.55) 0%,
#f7f0d8 100%
) !important;
}
.avatar {
background: linear-gradient(135deg,
#1d3c5c 0%,
#466888 50%,
#86a39f 100%
) !important;
box-shadow: 0 2px 8px rgba(29,60,92,.35), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.qs-card {
background: linear-gradient(180deg,
rgba(255,255,255,.45) 0%,
#fbf6e5 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 4px rgba(26,18,8,.05) !important;
}
.qs-card:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.60) 0%,
#f7f0d8 100%
) !important;
box-shadow: 0 6px 20px rgba(26,18,8,.12), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.qs-card-head {
background: linear-gradient(180deg,
rgba(134,163,159,.20) 0%,
rgba(134,163,159,.10) 100%
) !important;
}
.news-card {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
#fbf6e5 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 4px rgba(26,18,8,.05) !important;
}
.news-card:hover {
background: linear-gradient(180deg,
rgba(255,255,255,.65) 0%,
#f7f0d8 100%
) !important;
box-shadow: 0 3px 12px rgba(200,147,61,.18), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.sheet {
background: linear-gradient(180deg,
#fefcf0 0%,
#fbf6e5 100%
) !important;
}
.act-strip {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
#fbf6e5 100%
) !important;
}
.data-table {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
#fbf6e5 100%
) !important;
}
.act-btn {
background: linear-gradient(180deg,
rgba(255,255,255,.42) 0%,
rgba(205,71,98,.10) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.act-btn:hover,
.act-btn:active {
background: linear-gradient(180deg,
#e05570 0%,
#cd4762 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 2px 8px rgba(205,71,98,.35) !important;
}
.act-btn.checked-in {
background: linear-gradient(180deg,
#5a7a52 0%,
#4a6741 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.act-fav {
background: linear-gradient(180deg,
rgba(255,255,255,.42) 0%,
rgba(205,71,98,.10) 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.act-fav:hover,
.act-fav:active {
background: linear-gradient(180deg,
#e05570 0%,
#cd4762 100%
) !important;
}
.act-fav.fav-active {
background: linear-gradient(180deg,
#fef0f3 0%,
#fde8ec 100%
) !important;
}
/* —— M07 修験道レベルカード —— */
.rank-card {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,228,148,.45) 0%, transparent 70%),
linear-gradient(135deg,
#fef3c8 0%,
#f6dc92 25%,
#e8c870 50%,
#f6dc92 75%,
#fef3c8 100%
) !important;
box-shadow:
0 4px 16px rgba(200,147,61,.30),
0 0 0 1px rgba(200,147,61,.45),
inset 0 1px 0 rgba(255,255,255,.70),
inset 0 -2px 0 rgba(180,130,40,.18) !important;
border: 1.5px solid var(--gold) !important;
border-radius: 12px !important;
padding: 16px 16px 14px !important;
position: relative !important;
overflow: hidden !important;
}
.rank-card::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: .55;
background-image:
radial-gradient(circle at 12% 18%, rgba(255,215,100,.40) 0%, transparent 4px),
radial-gradient(circle at 78% 12%, rgba(255,215,100,.30) 0%, transparent 5px),
radial-gradient(circle at 28% 72%, rgba(255,215,100,.35) 0%, transparent 4.5px),
radial-gradient(circle at 88% 78%, rgba(255,215,100,.38) 0%, transparent 5px),
radial-gradient(circle at 50% 45%, rgba(255,215,100,.25) 0%, transparent 3.5px),
radial-gradient(circle at 62% 88%, rgba(255,215,100,.32) 0%, transparent 4px);
}
.rank-card::after {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(180,130,40,.40);
border-radius: 9px;
pointer-events: none;
z-index: 1;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.rank-card > * {
position: relative;
z-index: 2;
}
.rank-badge-icon {
font-size: 29px !important;
filter: drop-shadow(0 2px 4px rgba(180,130,40,.35));
}
.rank-badge.current .rank-badge-icon {
filter:
drop-shadow(0 0 6px rgba(255,215,100,.65))
drop-shadow(0 2px 4px rgba(180,130,40,.40));
}
.rank-badge-name {
font-weight: 800 !important;
font-size: 13.5px !important;
letter-spacing: .04em !important;
text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.rank-badge.current .rank-badge-name {
color: #6a4818 !important;
}
.rank-badge.next .rank-badge-name {
color: rgba(106,72,24,.55) !important;
}
.rank-bar {
height: 12px !important;
border-radius: 6px !important;
background:
linear-gradient(180deg,
rgba(120,80,20,.20) 0%,
rgba(180,130,40,.10) 100%
) !important;
box-shadow:
inset 0 2px 4px rgba(120,80,20,.25),
inset 0 -1px 0 rgba(255,255,255,.40),
0 1px 0 rgba(255,255,255,.50) !important;
margin-bottom: 8px !important;
position: relative;
overflow: hidden;
}
.rank-fill {
background:
linear-gradient(180deg,
#ffe48a 0%,
#f0c248 35%,
#d4a020 70%,
#b88018 100%
) !important;
box-shadow:
0 0 8px rgba(255,200,80,.65),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(120,80,20,.25) !important;
position: relative;
}
.rank-fill::after {
content: '';
position: absolute;
top: 1px;
right: 2px;
bottom: 1px;
width: 4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,220,.85), rgba(255,200,80,.30) 60%, transparent 100%);
filter: blur(0.5px);
}
.rank-count {
color: #6a4818 !important;
font-weight: 600 !important;
font-size: 13px !important;
}
.rank-cheer {
color: #a8730c !important;
font-weight: 800 !important;
font-size: 13.5px !important;
text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.rank-level-link {
color: #8a5810 !important;
font-weight: 700 !important;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
/* —— M08 履歴行（hist-row）のボタン化 —— */
.hist-row {
background: linear-gradient(180deg,
rgba(255,255,255,.50) 0%,
rgba(205,71,98,.10) 100%
) !important;
border: 1px solid rgba(90,60,20,.12) !important;
border-radius: var(--radius-sm, 10px) !important;
padding: 12px 14px !important;
margin-bottom: 8px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 4px rgba(26,18,8,.07) !important;
transition: var(--transition, .26s cubic-bezier(.4,0,.2,1)) !important;
}
.hist-row:hover,
.hist-row:active {
background: linear-gradient(180deg,
rgba(255,255,255,.60) 0%,
rgba(205,71,98,.22) 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.60),
0 3px 10px rgba(205,71,98,.16) !important;
transform: translateX(2px);
border-color: rgba(205,71,98,.30) !important;
}
.hist-row:last-child {
margin-bottom: 0 !important;
}
/* —— M09 しのぶ・チャット・修験道ナビ —— */
.chat-bubble-user {
background: linear-gradient(135deg,
#2a4d75 0%,
#1d3c5c 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 2px 6px rgba(29,60,92,.25) !important;
}
.chat-bubble-sn,
.chat-bubble-sn-first {
background: linear-gradient(135deg,
rgba(134,163,159,.25) 0%,
rgba(134,163,159,.12) 100%
) !important;
}
#sh-chat-inputbar {
background: linear-gradient(180deg,
rgba(255,255,255,.55) 0%,
#fbf6e5 100%
) !important;
}
.shu-prev-btn,
.shu-next-btn {
background: linear-gradient(180deg,
rgba(255,255,255,.42) 0%,
rgba(29,60,92,.08) 100%
) !important;
border: 1px solid rgba(29,60,92,.18) !important;
border-radius: var(--radius-sm) !important;
padding: 6px 14px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
transition: var(--transition) !important;
}
.shu-prev-btn:hover,
.shu-next-btn:hover {
background: linear-gradient(180deg,
rgba(29,60,92,.10) 0%,
rgba(29,60,92,.18) 100%
) !important;
}
/* —— M10 言語メニュー —— */
#lang-menu {
background: linear-gradient(180deg,
#fefcf0 0%,
#fbf6e5 100%
) !important;
}
#lang-menu button {
background: transparent !important;
transition: var(--transition) !important;
}
#lang-menu button:hover {
background: linear-gradient(180deg,
rgba(29,60,92,.08) 0%,
rgba(29,60,92,.04) 100%
) !important;
}
#lang-menu button.active {
background: linear-gradient(180deg,
rgba(29,60,92,.10) 0%,
rgba(29,60,92,.06) 100%
) !important;
}
/* ================================================
v0.9231 patch end
================================================ */
/* v0.925 patch start */
#hdr-bg{display:none}
/* v0.925 patch end */
/* ── v0.926 fix: 全ボトムシート ヘッダーカラー統一 ──
.card-hdr / .shdr / .mhdr と同じ緑灰グラデを modal-header にも適用
（各シートの inline style="background:var(--bg-card)" を !important で上書き） */
.rekibura-sheet .modal-header {
background: linear-gradient(180deg,
#9bb8b4 0%,
#86a39f 50%,
#789590 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.25),
inset 0 -1px 0 rgba(0,0,0,.10) !important;
border-bottom: 1px solid rgba(255,255,255,.12) !important;
position: relative !important;
cursor: ns-resize !important;
}
.rekibura-sheet .modal-title {
font-family: 'Zen Maru Gothic', sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
color: #fff !important;
}
.rekibura-sheet .modal-header .btn-close {
filter: brightness(0) invert(1) !important;
opacity: .85 !important;
}
/* 🆕 2026-06-30 ボトムシート可読性: タイトルアイコンをセクション見出しと同じ薄桃色(#f6dbe3)+22px、
本文を 13px→15px に拡大、小見出し(.cap-section)を拡大、強調()は太字一辺倒をやめ
藍色+金色下線で見やすく。インラインstyleには!important無しのため stylesheet側!importance で勝つ。 */
.rekibura-sheet .modal-title .v-ic {
width: 22px !important;
height: 22px !important;
filter: brightness(0) saturate(100%) invert(18%) sepia(34%) saturate(1200%) hue-rotate(179deg) brightness(92%) contrast(90%) !important;
}
/* 🆕 2026-06-30 クエスト詳細のタイトルアイコン(shinobu pin)はピンク化せずオリジナル原色、かつ1.5倍(22→33px) */
/* クエスト詳細タイトル: shinobu pin を大きく(48px)し、flexでタイトル文字を右・縦中央に */
#questDetailModalLabel { display:flex !important; align-items:center !important; gap:8px !important; }
#questDetailModalLabel .v-ic { filter: none !important; width: 48px !important; height: 48px !important; margin-right:0 !important; vertical-align:middle !important; }
.rekibura-sheet .modal-body div[style*="line-height:1.8"] { font-size: 15px !important; }
.rekibura-sheet .modal-body .cap-section { font-size: 14px !important; }
.rekibura-sheet .modal-body strong {
font-weight: 700;
color: var(--indigo);
text-decoration: underline;
text-decoration-color: var(--gold);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* ── v0.926 fix: もっと深掘り タブ 件数バッジ 白継承 ──
v0.9231 パッチで .stab.on が赤グラデ+color:#fff になったが
.stab-count スパンのインライン style="color:var(--text-muted)" が継承を阻止するため
!important で上書きして白を適用する */
#lnDeeperModal .stab.on .stab-count {
color: #fff !important;
opacity: .85 !important;
}
/* ── v0.927: めぐるタブ中のボトムシート ─ バックドロップ非表示・地図操作透過 ──
Bootstrap の .modal-backdrop を非表示にし、.modal ラッパーを pointer-events:none に
することで、シート表示中も地図がスクロール・ズーム操作できるようにする。
.modal-dialog (シート本体) は pointer-events:auto を維持して操作可能に保つ。 */
body[data-current-tab="meguru"] .modal-backdrop {
display: none !important;
}
body[data-current-tab="meguru"] .modal.rekibura-sheet {
pointer-events: none;
}
body[data-current-tab="meguru"] .modal.rekibura-sheet .modal-dialog {
pointer-events: auto;
}
/* Bootstrap が .modal-open 付与時に追加する padding-right によるレイアウトシフトを防ぐ */
body[data-current-tab="meguru"].modal-open {
padding-right: 0 !important;
}
/* 🆕 2026-07-10 ボトムシート表示時の app 領域の暗転を控えめに (Bootstrap 5.0.2 既定 opacity:.5 → .2)。
色は既定の黒(#000)のまま。めぐるタブは上の display:none ルールで非表示のまま(不透明度は無関係)。 */
.modal-backdrop.show {
opacity: .2 !important;
}
/* ════════════════════════════════════════════════════
v0.9251 patch start
════════════════════════════════════════════════════ */
/* ── v0.9251: #nodeDetailSnDlg フローティングバブル ── */
#nodeDetailSnDlg {
position: absolute !important;
top: -28px !important;
left: 16px !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 4px 12px 4px 4px !important;
background: var(--bg-card, #fbf6e5) !important;
border: 1px solid rgba(134,163,159,.30) !important;
border-radius: 22px !important;
box-shadow: 0 2px 8px rgba(26,18,8,.10) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--text-muted, #6a5840) !important;
/* strip スタイルの上書き */
border-bottom: none !important;
margin: 0 !important;
flex-shrink: unset !important;
line-height: normal !important;
}
#nodeDetailSnDlg::before {
content: '🥷';
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #c8d8a8 0%, #afc28a 55%, #9ab278 100%);
border: 1.5px solid #1d3c5c;
font-size: 17px;
box-shadow: 0 2px 6px rgba(29,60,92,.25);
flex-shrink: 0;
}
#nodeDetailSnDlg .sn-dlg-txt {
white-space: nowrap;
}
/* ── v0.9251 エピソード年表スタイル (ep-tl) ── */
#nodeDetailEpisodesWrap,
#nodeDetailRelationWrap {
padding: 0 2px;
}
.ep-tl.hist-row,
.ep-tl.hist-row:hover,
.ep-tl.hist-row:active {
background: none !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
transform: none !important;
cursor: default !important;
pointer-events: none;
display: flex !important;
align-items: flex-start !important;
gap: 0 !important;
padding: 0 0 0 30px !important;
min-height: 0 !important;
position: relative !important;
transition: none !important;
}
.ep-tl::before {
content: '' !important;
position: absolute !important;
left: 9px !important;
top: 0 !important;
bottom: 0 !important;
width: 1.5px !important;
background: linear-gradient(180deg,
rgba(188,155,88,.70) 0%,
rgba(188,155,88,.20) 100%) !important;
z-index: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.ep-tl:last-of-type::before {
height: 16px !important;
bottom: auto !important;
}
.ep-tl .hist-dot {
position: absolute !important;
left: 5px !important;
top: 14px !important;
width: 9px !important;
height: 9px !important;
border-radius: 50% !important;
background: var(--gold, #bc9b58) !important;
box-shadow: 0 0 0 2px var(--bg-card, #fbf6e5),
0 0 0 3px var(--gold, #bc9b58) !important;
flex-shrink: 0 !important;
z-index: 1 !important;
margin: 0 !important;
}
.ep-tl .hist-content {
flex: 1 !important;
padding: 8px 0 16px 2px !important;
border-bottom: 1px solid rgba(90,60,20,.10) !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.ep-tl:last-of-type .hist-content {
border-bottom: none !important;
padding-bottom: 6px !important;
}
.ep-tl .hist-meta {
order: -1 !important;
font-size: 12px !important;
font-weight: 700 !important;
color: var(--gold, #bc9b58) !important;
letter-spacing: .04em !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.ep-tl .hist-title {
font-size: 14.5px !important;
font-weight: 600 !important;
color: var(--text-primary, #2a1f15) !important;
line-height: 1.55 !important;
margin: 0 !important;
padding: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
}
/* 関係エピソード: 6件目以降は「すべて見る」クリックまで非表示 */
#nodeDetailRelationEpisodes .nd-rel-extra {
display: none !important;
}
#nodeDetailRelationEpisodes.expanded .nd-rel-extra {
display: flex !important;
}
/* いざ修行！テーマの関係エピソード: 6件目以降は「すべて見る」まで非表示。
行に inline display:none を付けても .ep-tl.hist-row{display:flex !important} に負けるため
ここで !important + コンテナ .expanded で制御する (上の nd-rel-extra と同方式)。 */
#shugenEpisodes .shu-ep-extra {
display: none !important;
}
#shugenEpisodes.expanded .shu-ep-extra {
display: flex !important;
}
/* ── Phase 3: 画像カルーセル (ノード詳細シート) ── */
.obj-img-area {
margin: 14px 0;
}
.img-carousel-wrap {
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
border-radius: var(--radius-sm, 10px);
}
.img-carousel::-webkit-scrollbar {
display: none;
}
.img-slide {
flex: 0 0 100%;
scroll-snap-align: start;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #f0e8d0 0%, #d8c8a8 100%);
display: flex;
align-items: center;
justify-content: center;
}
.img-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-sm, 10px);
}
.img-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.85);
border: 1px solid rgba(0,0,0,.12);
box-shadow: 0 2px 6px rgba(0,0,0,.18);
color: var(--indigo, #1d3c5c);
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .2s;
}
.img-nav-prev { left: 8px; }
.img-nav-next { right: 8px; }
.img-nav-btn.hidden { opacity: 0; pointer-events: none; }
.img-page-ind {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
text-align: right;
margin-top: 5px;
}
.img-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 2px;
}
.img-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--border-light);
cursor: pointer;
transition: background .2s;
}
.img-dot.on { background: var(--indigo, #1d3c5c); }
/* ════════════════════════════════════════════════════
v0.9251 patch end
════════════════════════════════════════════════════ */
/* めぐるタブ表示時はタイトルヘッダーを非表示 */
body[data-current-tab="meguru"] #hdr { display: none !important; }
/* めぐるタブ全画面表示
#app を 100vw に拡張することで tab-pane(position:absolute;inset:0) が自然に全画面になる。
position:fixed は stacking context を生成して Bootstrap modal の z-index に干渉するため不使用。 */
body.meguru-pc #app {
width: 100vw !important;
max-width: 100vw !important;
background: var(--bg-shell, #f7eecf) !important;
box-shadow: none !important;
}
body.meguru-pc #cnt { background: var(--bg-shell, #f7eecf) !important; }
body.meguru-pc #bnav {
background: rgba(29, 60, 92, .92) !important;
backdrop-filter: blur(6px);
z-index: 10;
}
/* めぐるタブ時は body の bottom padding を除去し、背景も cream で確実に塗りつぶす */
/* html canvas (#1a0e08 dark) が transparent #app / #cnt 越しに透けないよう全レイヤで上書き */
html:has(body.meguru-pc) { background-color: var(--bg-shell, #f7eecf) !important; }
body[data-current-tab="meguru"] { padding-bottom: 0; background-image: none; background-color: var(--bg-shell, #f7eecf); }
/* タイル未読込み中も暗色が露出しないよう row-map にフォールバック背景を設定 */
body[data-current-tab="meguru"] .row-map { background: var(--bg-shell, #f7eecf); }
/* Leaflet コンテナの既定背景 #ddd が上端タイルなし帯として透けるのを防ぐ */
body[data-current-tab="meguru"] .leaflet-container { background: var(--bg-shell, #f7eecf) !important; }
/* ===== sheet-side レイアウト =====
ボトムシート出現時: シートは左端固定、app/bnav は右シフト（規則２・３）。
めぐるタブは app(=地図) が全画面のため app はシフトしない。bnav のみシフト。 */
/* 501px以上: appエリア基準でFABを右端16px固定に補正 */
@media(min-width:501px){
#sn-fab { right: calc(50% - 234px); }
}
/* 全幅共通: sheet-side 時は body を左揃えにし、シートを左端に固定する
Bootstrap デフォルトの left:50%+translateX(-50%) を上書きして
positionSnFloat() が常に rect.left=0 を読めるようにする（501px未満でもズレない） */
body.sheet-side { justify-content: flex-start; }
body.sheet-side .modal.fade.rekibura-sheet .modal-dialog,
body.sheet-side .modal.fade.rekibura-sheet .modal-dialog.modal-dialog-scrollable {
left: 0;
transform: translateY(100%);
}
body.sheet-side .modal.show.rekibura-sheet .modal-dialog,
body.sheet-side .modal.show.rekibura-sheet .modal-dialog.modal-dialog-scrollable {
transform: translateY(0);
}
/* 規則２: 501px〜1000px */
@media(min-width:501px) and (max-width:1000px){
body.sheet-side:not([data-current-tab="meguru"]) #app {
margin-left: auto;
margin-right: 0;
}
body.sheet-side #bnav {
left: calc(100% - 500px); /* JS syncBnav がスクロールバー補正込みで上書きする */
}
body.sheet-side #sn-fab { right: 16px; }
}
/* 規則３: 1001px以上 */
@media(min-width:1001px){
body.sheet-side:not([data-current-tab="meguru"]) #app {
margin-left: calc(50% + 1px);
margin-right: 0;
}
body.sheet-side #bnav {
left: calc(50% + 1px); /* JS syncBnav がスクロールバー補正込みで上書きする */
}
body.sheet-side #sn-fab { right: max(16px, calc(50% - 485px)); }
}
/* sheet-side 時の scroll-hidden は X 軸なしで Y のみ */
body.sheet-side #bnav.scroll-hidden { transform: translateY(100%) !important; }
/* sheet-side 切替時 #bnav の left は即時移動（#app と同期）。transform のみ transition 維持 */
body.sheet-side #bnav { transition: transform .3s ease !important; }
/* ========== スタンプ帳 (2026-06-28 v2) — 画像は /me/stamps の image(S3)。横スライドのカード ========== */
/* 取得数の帯: カラフル(金グラデ枠)・大きめ。数値は朱色。 */
.stampbook-summary{background:linear-gradient(135deg,var(--gold-pale) 0%,#fff7e0 100%);border:1.5px solid var(--gold);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:16px;font-weight:700;color:var(--indigo);text-align:center;font-family:'Zen Maru Gothic',sans-serif;box-shadow:0 2px 10px rgba(188,155,88,.18)}
.stampbook-summary strong{color:var(--crimson);font-size:21px;font-family:'Zen Maru Gothic',sans-serif;margin-left:6px}
.stampbook-cats{display:flex;flex-direction:column;gap:16px}
.stampbook-empty{text-align:center;color:var(--text-muted);padding:30px 0;font-size:13px}
.stampbook-cat{border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--bg-shell);padding:12px}
.stampbook-cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.stampbook-cat-title{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:14px;color:var(--indigo)}
.stampbook-cat-meta{white-space:nowrap;display:flex;align-items:baseline;gap:2px}
.stampbook-cat-count{color:var(--crimson);font-weight:700;font-size:19px;font-family:'Zen Maru Gothic',sans-serif}
.stampbook-cat-of{color:var(--text-muted);font-size:13px}
/* 横スライド(左右)のカード列 + カルーセル矢印 */
.stampbook-sliderwrap{position:relative}
.stampbook-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--gold);background:rgba(251,246,229,.94);color:var(--indigo);font-size:20px;font-weight:700;line-height:1;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(26,18,8,.22);padding:0}
.stampbook-arrow.prev{left:-2px}
.stampbook-arrow.next{right:-2px}
.stampbook-arrow:disabled{opacity:.3;cursor:not-allowed}
.stampbook-arrow:hover:not(:disabled){background:var(--gold);color:#fff}
.stampbook-slider{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:4px}
.stampbook-slider::-webkit-scrollbar{height:5px}
.stampbook-slider::-webkit-scrollbar-thumb{background:var(--border-warm);border-radius:3px}
.stampbook-card{flex:0 0 60%;max-width:60%;scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center}
.stampbook-card-date{font-size:12px;color:var(--gold);font-weight:700;margin-bottom:6px}
.stampbook-card-imgwrap{width:100%;max-width:150px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stampbook-card-img{width:100%;height:100%;object-fit:contain}
.stampbook-card-name{font-size:12px;color:var(--text-primary);margin-top:8px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ══════════════════════════════════════════════════════
v0.93 patch start — カード背景透過(ベージュ札)/ヘッダ帯廃止/金アクセント強化
(2026-07-01 Claude.ai プロトタイプ検討より)
※ タブは iframe 撤廃済み(単一文書)。背景イラストは body 既存(fixed/cover)。
#app の幕を透過にするだけでカード間からイラストが覗く。
══════════════════════════════════════════════════════ */
/* §1 #app 完全透過 + 外周シャドウ除去 (背景イラストを列全体に透けさせる) */
#app{ background:transparent !important; box-shadow:none !important; }
#cnt{ background:transparent !important; }
/* 🆕 2026-07-04 非めぐるタブの app領域(歴ぶらバナー領域=#hdr も含む)に薄い青灰ヴェール
(#f3f7f9 @ 50%)。#hdr/#cnt は透過なので #app に敷けば両方に効く。影処理は不要。
めぐるは除外(地図が全面を覆うため透過のまま)。 */
body:not([data-current-tab="meguru"]) #app{
background:rgba(243,247,249,.5) !important;
box-shadow:none !important;
}
/* 🆕 2026-07-04 めぐるFAB: 検索(#fab-s)を基準に、ルート設定(#fab-r)を15px・現在地(#locateBtn)を30px
それぞれ下げる。flex 兄弟に影響しないよう position:relative + top で各自を視覚的にずらす。 */
#fab-r{ position:relative; top:15px; }
#locateBtn{ position:relative; top:30px; }
/* §2/§7 カード: ベージュグラデ地 + 金の細枠 */
.card{
background:linear-gradient(180deg,#f8f0e0 0%,#f3e9da 100%) !important;
border:1px solid rgba(188,155,88,.32) !important;
}
/* §6 カード見出し下端に金2pxライン (見出しの地色は変更しない) */
.card-hdr{ border-bottom:2px solid var(--gold) !important; }
/* §3 ボトムシートのベース地をベージュへ (緑灰ヘッダは維持)。実セレクタ = .rekibura-sheet .modal-body */
.rekibura-sheet .modal-body{ background:linear-gradient(180deg,#f8f0e0 0%,#f3e9da 100%) !important; }
/* §6 シート見出し下端にも金2pxライン */
.rekibura-sheet .modal-header{ border-bottom:2px solid var(--gold) !important; }
/* §8 フッタ(プライバシー等)は不透明のまま、地をベージュ・上端に金の細線 */
.screen-footer{
background:linear-gradient(180deg,#f8f0e0 0%,#f3e9da 100%) !important;
border-top:1px solid rgba(188,155,88,.4) !important;
}
/* §4 + ヘッダ改修: 透過ヘッダ / 上段=ロゴバナー全幅 / 下段=auth・言語(右寄せ) */
#hdr{
background:transparent !important; background-image:none !important;
box-shadow:none !important; border-bottom:none !important;
position:relative !important; /* sticky解除: 透過ヘッダが本文に被って透ける問題を回避(スクロールで流す) */
flex-direction:column !important; align-items:stretch !important;
height:auto !important; padding:5px 0 4px !important; gap:0 !important;
}
#hdr::before,#hdr::after{ display:none !important; }
#hdr-bg{ background:transparent !important; background-image:none !important; }
#hdr-bg::before{ display:none !important; }
/* ロゴバナー = app 幅いっぱい (上段) */
#hdr-logo{ display:block !important; width:100% !important; margin:0 !important; line-height:0; }
#hdr-logo .hdr-banner{ width:100% !important; height:auto !important; max-width:100% !important; display:block !important; }
/* auth / 言語ボタン = 下段・右寄せ */
#hdr-right{
position:relative !important; top:auto !important;
align-self:flex-end !important;
display:flex !important; align-items:center !important; gap:8px !important;
margin:5px 14px 0 !important;
}
/* めぐるタブはヘッダ(ロゴバナー含む)全体を非表示 */
body[data-current-tab="meguru"] #hdr{ display:none !important; }
/* 🆕 v0.931 (2026-07-02) ヘッダ〜先頭カードの間隔を約40%圧縮 (先頭カードの上マージン 14→9) */
.tab-pane.on > .scr > .card:first-of-type,
.tab-pane.on > main > .card:first-of-type,
#screen-know > .card:first-of-type{ margin-top:9px !important; }
/* 🆕 言語ボタン: global.svg を藍色でボタンにフィット (絵文字🌐置換) */
#lang-glb{
display:inline-block; width:22px; height:22px;
-webkit-mask:url(../icons/global.svg) center/contain no-repeat;
mask:url(../icons/global.svg) center/contain no-repeat;
background-color:var(--indigo);
}
/* 🆕 しのぶFAB吹出し: 茶(#4a2626)→ #cd4762 80% / 枠線・吹出し口の白線を排除 */
#sn-bubble{
background:rgba(205,71,98,.80) !important;
border:none !important;
box-shadow:0 2px 12px rgba(205,71,98,.34) !important;
}
#sn-bubble::before{ display:none !important; }
#sn-bubble::after{ top:100% !important; border-top-color:rgba(205,71,98,.80) !important; }
/* 🆕 v0.932 (2026-07-02) アイコン藍色化 (A案):
見出し(.card-hdr / .modal-title)・カード上/シート上のボタンアイコン・言語アイコンを藍に。
例外: ボトムナビ(=.ni-svg マスク・別管理/濃紺地), クエスト詳細シート(body.in-iframe),
濃紺地の白マーカーやグレー化(inline filter が優先), mfab活性(白, .mfab.on) は据え置き。 */
.v-ic{ filter: brightness(0) saturate(100%) invert(18%) sepia(34%) saturate(1200%) hue-rotate(179deg) brightness(92%) contrast(90%); }
/* クエスト詳細(iframe)内のアイコンは対象外＝原色のまま */
body.in-iframe .v-ic{ filter: none !important; }
/* 🆕 FABしのぶ(および浮遊/モーダルヘッダのしのぶ円)の黄緑(#afc28a)の枠を白に */
#sn-btn, #sn-float, #shinobuHeaderIcon{ background:#fff !important; }
/* 🆕 v0.933 (2026-07-02) セージグラデーション: .today-banner と同じ緑灰(#86a39f)グラデ帯。
汎用クラス化して他の説明テキストにも適用可能に。 */
.sage-grad{
background:linear-gradient(180deg, rgba(134,163,159,.20) 0%, rgba(134,163,159,.08) 100%) !important;
border-bottom:1px solid rgba(134,163,159,.25) !important;
}
/* v0.93 patch end */
/* ══════════════════════════════════════════════════════
🆕 2026-07-07 和紙テクスチャ適用（試用・戻す可能性あり）
このブロックを丸ごと削除すれば原状復帰。画像404時も現行色にフォールバック。
② 水色バックグラウンド(#app) = 雲形の水色和紙 bg-mizu.png を不透明度0.5で重ね(地図は透ける)
④ 各セクションの背景(.card) = 生成りの和紙 bg-beige.png(不透明・カード地。見出し/金線/枠は現状のまま)
══════════════════════════════════════════════════════ */
/* ② #app: 雲和紙(色合わせ済みの画像)を重ねる(下の地図が透ける)。
※以前あった空色ヴェール(#DBE2F4)は、ユーザーが画像側で色を合わせて作り直したため撤去。画像だけを重ねる。
★ isolation:isolate 必須 — これが無いと ::before(z-index:-1) が body(地図)の裏に回り、
和紙が全く見えず地図の空だけが見える(=画像を差し替えても②が変わらないバグの原因)。 */
body:not([data-current-tab="meguru"]) #app{ background:transparent !important; isolation:isolate; }
body:not([data-current-tab="meguru"]) #app::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:url("../images/bg-kumo.png?v=r1") repeat, rgba(200,214,238,1); /* 空・雲背景=bg-kumo(採用)。画像差替時は ?v= を更新。404/透過部フォールバックは画像の水色に寄せた */
background-size:100% auto, auto; /* 横は app幅にフィット(=横切れ無し)・縦は等比のまま(歪ませない)。画像 bg-kumo=500x377(透過タイル) */
opacity:.5; /* 濃さ。1に近いほど地図の透けが減る */
}
/* ④ 生成りの和紙(カード+ボトムシート+フッター)。素の washi を現行ベージュ地に(濃くしない)。タイルは少し大きめ(700px)。 */
.card,
.rekibura-sheet .modal-body,
.screen-footer{
background:url("../images/bg-beige.png?v=r7") repeat, linear-gradient(180deg,#f8f0e0 0%,#f3e9da 100%) !important;
background-size:700px auto, cover !important; /* 繊維の粗さ。数値↑で目立つ */
}
/* ══════════════════════════════════════════════════════
🆕 2026-07-08 iOS Safari 入力欄オートズーム防止（全テキスト入力）
iOS は input/textarea の font-size が16px未満だと、フォーカス時にページを自動拡大する。
これで入力欄が拡大→レイアウト崩れ→送信/検索ボタンが押せない等が起きる（しのぶ入力・ログイン・購入メール等）。
text系の入力を一律16px以上に固定。既存の小さめ指定やインライン(style="font-size:..")も上書きするため !important。