/* ========================================================================== 南島原市 政策ダッシュボード（KIOSK） 追加オーバーレイスタイル ベースのSPG3D(css/style.css)は動的にへ追記されるため、 衝突しうるルールには !important を付けて確実に上書きする。 ========================================================================== */ :root { --kiosk-blue: #2a7fd8; --kiosk-blue-dark: #14213d; --kiosk-amber: #d9922e; --kiosk-emerald: #23a878; --kiosk-pink: #d9558f; --kiosk-glass-bg: linear-gradient(160deg, rgba(255,255,255,0.62) 0%, rgba(224,240,255,0.42) 55%, rgba(200,225,245,0.38) 100%); --kiosk-glass-border: rgba(255,255,255,0.55); } /* SPG3D本体の開発者向けUI(水面レベル等)・にゃーマスコットは 一般来訪者向けKIOSKでは非表示にし、データ出典のみ隅に残す */ #ui, #mascot { display: none !important; } /* 町名クリック時の詳細吹き出し(#pin-detail)が下部ピルボタン (.pill-row、bottom:42px)と同じ高さで重なるため、KIOSKでは ピルボタンの少し上に来るよう底からの距離を広げる */ #pin-detail { bottom: 165px !important; right: 16px !important; /* ピル/ジェムボタン(z-index:30)より上のレイヤーにして、 万一位置が近づいてもボタンに隠れないようにする */ z-index: 35 !important; } #credit { left: auto !important; right: 12px !important; bottom: 4px !important; max-width: none !important; white-space: nowrap !important; text-align: right !important; font-size: 9px !important; opacity: 0.6; z-index: 6 !important; } /* -------------------------------------------------------------------- */ /* タイトルバー */ /* -------------------------------------------------------------------- */ #kiosk-titlebar { position: fixed; top: 0; left: 0; z-index: 30; padding: 14px 22px; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.35); } #kiosk-titlebar .kiosk-eyebrow { color: #7fb0d8; font-size: 12px; letter-spacing: 2px; margin: 0 0 2px; } #kiosk-titlebar .kiosk-title { color: #ffffff; font-size: 26px; font-weight: 800; letter-spacing: 1px; margin: 0; } /* -------------------------------------------------------------------- */ /* 理念ジェムボタン（上部中央3個） */ /* -------------------------------------------------------------------- */ .gem-row { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; gap: 10px; } .gem { width: 150px; height: 150px; border: none; cursor: default; /* buttonのUAデフォルト背景色を明示的に消す(そのままだと画像の 透過部分にボタンの既定背景が乗って、透けて見えなくなる) */ background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform 0.12s ease, filter 0.12s ease; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); } .gem--kasegu { background-image: url("../img/gold.png"); } .gem--anshin { background-image: url("../img/safety.png"); } .gem--wakuwaku { background-image: url("../img/wakuwaku.png"); } /* 対応する重点政策ピルにマウスが乗っている間、装飾として光らせる */ .gem.glow { filter: drop-shadow(0 0 14px rgba(255,255,255,0.95)) brightness(1.25); transform: scale(1.05); } /* -------------------------------------------------------------------- */ /* データパネル（画面上半分を占める大型ポップアップ） */ /* -------------------------------------------------------------------- */ .panel { position: fixed; top: 50%; left: 50%; width: 90vw; /* html/bodyはoverflow:hiddenでページ自体はスクロールしない設計なので、 パネルが画面より縦に長くなる場合(特にスマホの縦画面)に備え、パネル 自身の高さを画面内に収める。実際のスクロールは.panel-body側で行い、 ヘッダー(閉じるボタン)は常に見える位置に固定する。 通常のデスクトップ幅では中身が収まりきるため、この上限は働かない。 */ max-height: calc(100vh - 24px); z-index: 50; padding: 28px 48px; border-radius: 14px; background-image: var(--kiosk-glass-bg); border: 1px solid var(--kiosk-glass-border); box-shadow: 0 16px 40px rgba(10,30,60,0.4), inset 0 1px 0 rgba(255,255,255,0.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transform: translate(-50%, -50%) scale(0.92); pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; display: flex; flex-direction: column; } .panel.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } .panel-header { flex: none; display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 16px; } .panel h2 { margin: 0; font-size: 44px; color: var(--kiosk-blue-dark); text-shadow: 0 1px 2px rgba(255,255,255,0.6); } .panel-close { position: absolute; top: 16px; right: 16px; border: none; background: rgba(255,255,255,0.5); color: #375270; width: 36px; height: 36px; min-width: 44px; min-height: 44px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; } .panel-close:hover { background: rgba(255,255,255,0.75); } .panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .panel .policy-items { display: flex; flex-direction: column; gap: 12px; } .panel .policy-item { background: rgba(255,255,255,0.4); border-radius: 12px; padding: 12px 14px; } .panel .policy-item-h { margin: 0 0 6px; font-size: 28px; font-weight: 700; color: var(--kiosk-blue-dark); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(28,90,168,0.35); text-underline-offset: 4px; } .panel .policy-item-h:hover { color: var(--kiosk-blue); } /* 中見出しクリックで開く詳細説明パネル。政策パネルよりさらに上に表示する */ .detail-panel { z-index: 60; width: 70vw; } .detail-panel .detail-text { margin: 0; font-size: 24px; line-height: 1.8; color: #375270; } .panel .policy-item ul { margin: 0; padding-left: 18px; } .panel .policy-item li { font-size: 24px; line-height: 1.6; color: #375270; } /* -------------------------------------------------------------------- */ /* 重点政策ピルボタン（下部中央6個） */ /* -------------------------------------------------------------------- */ .pill-row { position: fixed; bottom: 42px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; gap: 10px; flex-wrap: nowrap; } .pill { border: none; cursor: pointer; border-radius: 999px; padding: 12px 20px; min-height: 44px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; background-image: linear-gradient(180deg, #6fb3f2 0%, var(--kiosk-blue) 55%, #1c5aa8 100%); box-shadow: 0 4px 10px rgba(10,30,60,0.4), inset 0 1px 0 rgba(255,255,255,0.55); transition: transform 0.1s ease, filter 0.1s ease; } .pill:hover { filter: brightness(1.08); } .pill:active { transform: translateY(2px); } .pill.active { background-image: linear-gradient(180deg, #ffd873 0%, #e8a33d 55%, #a86a15 100%); box-shadow: 0 2px 6px rgba(10,30,60,0.4) inset, 0 4px 10px rgba(10,30,60,0.4); } /* -------------------------------------------------------------------- */ /* 年度スライダー（左下）※ユーザー要望により非表示 */ /* -------------------------------------------------------------------- */ .year-bar { display: none !important; position: fixed; bottom: 22px; left: 22px; z-index: 30; width: 300px; padding: 14px 18px 16px; border-radius: 16px; background-image: var(--kiosk-glass-bg); border: 1px solid var(--kiosk-glass-border); box-shadow: 0 8px 28px rgba(10,30,60,0.35), inset 0 1px 0 rgba(255,255,255,0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .year-bar .year-bar-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--kiosk-blue-dark); margin: 0 0 8px; } .year-bar .year-bar-current { float: right; font-weight: 800; color: var(--kiosk-blue); } .year-bar input[type="range"] { width: 100%; accent-color: var(--kiosk-blue); height: 44px; } .year-bar .year-bar-ticks { display: flex; justify-content: space-between; font-size: 10px; color: #375270; margin-top: -8px; } /* -------------------------------------------------------------------- */ /* KIOSK重点ピン（原城跡・口之津港・世界遺産センター・市役所） */ /* main.jsが生成する.spg3d-pin-labelに.kiosk-pinを追加付与している */ /* -------------------------------------------------------------------- */ .spg3d-pin-label.kiosk-pin { /* 町名・名所旧跡ラベルの「下端が尖った旗形」クリップパスを解除し、 横長の角丸バナー形状にする(ユーザー要望：町名表示と区別するため) */ clip-path: none !important; padding: 9px 18px !important; font-size: 13px !important; font-weight: 800 !important; border-radius: 999px !important; background-image: none !important; box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,255,255,0.6) inset !important; animation: kiosk-pin-pulse 2.2s ease-in-out infinite; /* 他のKIOSKピンと画面上で重なった場合、js/kiosk.js側が--kyに縦オフセットを 設定して縦に並べ直す(初期値0なので通常は影響なし) */ --ky: 0px; transform: translate(-50%, calc(-100% + var(--ky))) !important; transition: transform 0.12s ease-out; } /* 町名ラベルは名所旧跡看板(KIOSK重点ピンを含む)より下のレイヤーに固定する */ .spg3d-pin-label--town { z-index: 1 !important; } .spg3d-pin-label:not(.spg3d-pin-label--town) { z-index: 2 !important; } .spg3d-pin-label.kiosk-pin--pin1 { background: var(--kiosk-amber) !important; } .spg3d-pin-label.kiosk-pin--pin2 { background: #2596d1 !important; } .spg3d-pin-label.kiosk-pin--pin3 { background: #8a5fd1 !important; } .spg3d-pin-label.kiosk-pin--pin4 { background: #d9558f !important; } @keyframes kiosk-pin-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } } /* -------------------------------------------------------------------- */ /* ピンツールチップ（タップしたKIOSKピンの指標を表示） */ /* -------------------------------------------------------------------- */ .kiosk-pin-tooltip { position: fixed; z-index: 40; min-width: 200px; padding: 12px 14px; border-radius: 12px; background-image: var(--kiosk-glass-bg); border: 1px solid var(--kiosk-glass-border); box-shadow: 0 8px 24px rgba(10,30,60,0.4), inset 0 1px 0 rgba(255,255,255,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translate(-50%, calc(-100% - 16px)); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .kiosk-pin-tooltip.show { opacity: 1; pointer-events: auto; } .kiosk-pin-tooltip h3 { margin: 0 0 8px; font-size: 13px; color: var(--kiosk-blue-dark); } .kiosk-pin-tooltip .stat-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: #375270; padding: 3px 0; border-top: 1px solid rgba(55,82,112,0.12); } .kiosk-pin-tooltip .stat-row:first-of-type { border-top: none; } .kiosk-pin-tooltip .stat-row .stat-value { font-size: 14px; font-weight: 800; color: var(--kiosk-blue-dark); } @media (max-width: 900px) { .pill-row { flex-wrap: wrap; justify-content: center; width: 90vw; } .gem { width: 110px; height: 110px; } /* デスクトップ(大型KIOSK画面)向けに大きくしていた文字サイズは、 スマホ幅ではそのままだと画面に収まらないため縮小する */ .panel { padding: 16px 20px; } .panel h2 { font-size: 22px; } .detail-panel { width: 90vw; } .panel .policy-item-h { font-size: 16px; } .panel .policy-item li { font-size: 14px; } .detail-panel .detail-text { font-size: 15px; } }