:root { /* 基本8トークン */ --navy: #1a2b4c; --deep: #0c1626; --gold: #c5a059; --gold-deep: #a9853f; --gold-soft: #e3cf9a; --cream: #fcf8f2; --mist: #f7f9fb; --ink: #3c4250; --muted: #6c7480; /* 状態色（公式拡張パレット） */ --gray: #8a94a3; --green: #5b8a72; --warn-bg: #f7f0e2; --warn-text: #a9853f; --error: #c0392b; --error-light: #f0a9a0; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --nav-height: 62px; --side-nav-width: 84px; --panel-width: 400px; --card-radius: 12px; --card-shadow: 0 1px 3px rgba(0, 0, 0, .06); --card-border: 1px solid #ece6d8; --font-ui: 'Noto Sans JP', sans-serif; --font-brand: 'Noto Serif JP', serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; height: 100%; /* #app-rootの計算がズレて下（や上）に隙間ができた場合でも、常時表示のボトムナビ・ ヘッダーと同じ白にしておけば目立たない（クリーム色だと隙間がはっきり見えてしまうため）。 */ background: #fff; color: var(--ink); font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1.6; overscroll-behavior-y: none; } h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 700; color: var(--deep); margin: 0 0 .5em; line-height: 1.25; } button { font-family: inherit; } a { color: var(--gold-deep); } input, select, textarea { font-family: inherit; } img { max-width: 100%; } .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* ブランドを感じさせる箇所限定の明朝体 */ .font-brand { font-family: var(--font-brand); } button { transition: transform .1s ease; } button:active { transform: scale(.97); } /* * 高さはCSSの可変単位（100vh/100dvh等）に頼らず、JSでwindow.innerHeightを直接測って * 反映した --app-height を使う（index.htmlの内スクリプト）。100dvhでも * position:fixed+inset:0任せでも、iOSのホーム画面追加時（スタンドアロン起動）に * 実際の表示領域とズレて下に余白ができる場合があったため、CSS単位を経由しない * 確実な方法に変更した。 */ #app-root { position: fixed; top: 0; left: 0; right: 0; height: var(--app-height, 100vh); overflow: hidden; } .view-wrap { position: absolute; inset: 0; } /* ==== 画面切り替え（フェード＋わずかなスライド） ==== */ .view { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; } .view.active { opacity: 1; pointer-events: auto; transform: translateY(0); } .view-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(64px + var(--safe-top)) 16px calc(var(--nav-height) + 28px + var(--safe-bottom)); } .page-title { font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 4px; } .page-subtitle { font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 20px; } .section-title { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 22px 0 12px; letter-spacing: -0.01em; } /* ==== フローティングブランド（左上ロゴ／右上アカウント） ==== #app-rootの子要素なので position: absolute にしておく（fixedだと1200px以上での #app-root中央寄せに追従できず、画面の真の端に張り付いてズレてしまうため）。 */ .floating-brand, .floating-account { position: absolute; top: calc(12px + var(--safe-top)); z-index: 600; display: flex; align-items: center; gap: 6px; /* 地図を動かすたびに背後をぼかし直すbackdrop-filterは低性能端末（特にAndroid）で 体感的な重さにつながるため使わず、不透明度を上げた単色背景で代替する。 */ background: rgba(12, 22, 38, 0.9); border-radius: 999px; } .floating-brand { left: 12px; padding: 5px 12px 5px 5px; } .floating-brand img { width: 26px; height: 26px; border-radius: 50%; display: block; } .floating-brand span { color: var(--gold-soft); font-size: 11px; font-weight: 700; white-space: nowrap; } .floating-account { right: 12px; padding: 5px; cursor: pointer; border: none; } .floating-account .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } /* ==== アカウントメニュー（簡易ポップオーバー） ==== */ .account-menu-backdrop { position: absolute; inset: 0; z-index: 950; background: transparent; display: none; } .account-menu-backdrop.open { display: block; } .account-menu { position: absolute; top: calc(56px + var(--safe-top)); right: 12px; z-index: 951; background: #fff; border-radius: var(--card-radius); border: var(--card-border); box-shadow: 0 4px 16px rgba(12, 22, 38, .12); padding: 14px; min-width: 200px; } .account-menu .name { font-weight: 700; margin-bottom: 10px; word-break: break-all; } /* ==== 地図画面（フルスクリーン） ==== */ #view-map, #map { position: absolute; inset: 0; } #view-map .view-scroll { display: none; } /* 地図はスクロールコンテナ不要 */ /* Leafletの標準ズームボタンが左上のロゴ（.floating-brand）と重なるため下にずらす。 safe-top（iOSのホーム画面追加時のステータスバー分）を足さないと、ロゴ側だけ ステータスバー分下がって、ズームボタンとロゴが重なってしまう。 */ .leaflet-top.leaflet-left { top: calc(64px + var(--safe-top)) !important; } .map-toggle { position: absolute; top: calc(58px + var(--safe-top)); left: 50%; transform: translateX(-50%); z-index: 500; display: flex; background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(12,22,38,.15); overflow: hidden; } .map-toggle button { border: none; background: transparent; min-height: 40px; /* 指で押しやすい高さを確保 */ padding: 9px 18px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; } .map-toggle button.active { background: var(--navy); color: #fff; } /* ==== 地図: 検索バー・フィルタ ==== */ /* Leafletのズームボタン（.leaflet-top.leaflet-left、高さ約73px・top:64px始まり）の 下端（約137px）より下に来るよう150pxに設定（以前は104pxで、－ボタンと重なっていた）。 */ .map-search-row { position: absolute; top: calc(150px + var(--safe-top)); left: 12px; right: 12px; z-index: 500; display: flex; gap: 8px; } .map-search-box { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: var(--card-radius); box-shadow: 0 2px 8px rgba(12,22,38,.15); padding: 0 12px; height: 44px; } .map-search-box .icon { color: var(--muted); } .map-search-icon-btn { flex: 0 0 auto; border: none; background: none; /* アイコンは18pxだが、指で押す領域は40px確保する（見た目は変えない） */ padding: 0; width: 40px; height: 40px; margin: -11px -8px -11px -10px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; } .map-search-icon-btn:hover, .map-search-icon-btn:active { color: var(--navy); } .map-search-box input { border: none; outline: none; flex: 1; font-size: 14px; height: 100%; background: transparent; } .map-filter-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--card-radius); background: #fff; border: none; box-shadow: 0 2px 8px rgba(12,22,38,.15); display: flex; align-items: center; justify-content: center; color: var(--navy); cursor: pointer; position: relative; } .map-filter-btn.active { background: var(--gold); color: var(--deep); } .map-filter-btn .filter-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); display: none; } .map-filter-btn.active .filter-dot { display: none; } .map-result-count { position: absolute; top: calc(202px + var(--safe-top)); left: 12px; z-index: 500; background: rgba(12,22,38,.82); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; } /* ==== 地図: 検索バーの下に重ねる案内（絞り込みの理由・近くで飲めるお店） ==== 件数のピル（.map-result-count、top:202px・高さ約26px）の下から始める。 中身が空のときは高さを持たないので、地図の見え方は変わらない。 */ .map-overlay-stack { position: absolute; top: calc(236px + var(--safe-top)); left: 12px; right: 12px; z-index: 500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; /* 空白部分では地図をそのまま操作できるようにする */ } .map-overlay-stack > * { pointer-events: auto; } .map-filter-reason { display: none; } .map-filter-reason.show { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--warn-bg); border: 1px solid var(--warn-text); color: var(--warn-text); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 7px 8px 7px 14px; } .map-filter-reason button { border: none; background: var(--warn-text); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 5px 12px; cursor: pointer; } .nearby-strip { display: none; } .nearby-strip.show { display: block; background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(26,43,76,.08); padding: 10px 12px 12px; } .nearby-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .nearby-head button { border: none; background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 4px; cursor: pointer; } .nearby-items { display: flex; flex-direction: column; gap: 2px; } .nearby-item { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; text-align: left; padding: 7px 2px; cursor: pointer; } .nearby-item + .nearby-item { border-top: 1px solid rgba(26,43,76,.08); } .nearby-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nearby-dist { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* ==== 地図: 凡例（実際のピンと同じ見た目のプレビューを使う。どこで使っても崩れないよう .map-legend や .view-map-panel にスコープさせず、汎用クラスとして定義する） ==== */ .map-legend { position: absolute; left: 12px; bottom: calc(var(--nav-height) + 16px + var(--safe-bottom) + 40px); z-index: 500; background: rgba(255,255,255,.95); border-radius: var(--card-radius); box-shadow: 0 2px 8px rgba(12,22,38,.15); padding: 10px 14px; font-size: 11px; } .legend-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; white-space: nowrap; } /* 実際の地図ピン（.leaflet-div-icon.pin-*）と完全に同じ見た目にするためのプレビュー用バッジ */ .legend-pin { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .legend-pin.gray { background: var(--gray); } .legend-pin.navy { background: var(--navy); } .legend-pin.gold { background: var(--gold); } .legend-pin.green { background: var(--green); } .legend-pin.pending { opacity: .45; border-style: dashed; } .legend-pin.shop { background: #fff; display: flex; align-items: center; justify-content: center; color: var(--gold-deep); border-color: #e5e0d3; } .legend-pin.shop.gray { color: var(--gray); } .legend-pin.gift { background: #fff; display: flex; align-items: center; justify-content: center; color: var(--green); border-color: #e5e0d3; } .legend-label { font-size: 13px; color: var(--ink); } /* 施設詳細シート：飲食店の認定ランクバッジ */ .tier-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 6px; } .tier-badge svg { width: 13px; height: 13px; } .tier-badge.tier-gray { background: var(--mist); color: var(--ink); border: 1px solid #e5e0d3; } .tier-badge.tier-navy { background: var(--navy); color: #fff; } .tier-badge.tier-gold { background: var(--gold); color: var(--deep); } .map-panel-card-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; text-transform: none; } .map-panel-howto { list-style: none; margin: 0; padding: 0; } .map-panel-howto li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink); line-height: 1.6; padding: 8px 0; } .map-panel-howto li + li { border-top: 1px solid #f0ece0; } .map-panel-howto .icon { color: var(--navy); flex-shrink: 0; margin-top: 1px; } .map-first-hint { position: absolute; bottom: calc(var(--nav-height) + 76px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); z-index: 500; background: rgba(12,22,38,0.88); color: var(--cream); font-size: 12px; font-weight: 600; padding: 10px 16px; border-radius: 14px; max-width: 84vw; text-align: center; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .map-first-hint.show { opacity: 1; } /* ==== フィルタパネル ==== */ .filter-panel-backdrop { position: fixed; inset: 0; z-index: 940; background: rgba(12,22,38,.35); display: none; } .filter-panel-backdrop.open { display: block; } .filter-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 941; background: #fff; border-radius: 20px 20px 0 0; /* iOSのホーム画面追加時、vhが実際の表示領域と一致しないことがあるため、 #app-rootと同じJS実測値（--app-height）を基準にそろえる */ max-height: calc(var(--app-height, 100vh) * 0.78); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .25s ease; } .filter-panel.open { transform: translateY(0); } .filter-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; } .filter-panel-body { overflow-y: auto; padding: 0 18px 12px; } .filter-panel-footer { display: flex; gap: 10px; padding: 12px 18px calc(16px + var(--safe-bottom)); border-top: 1px solid #eee; } .filter-panel-footer .btn { flex: 1; } .filter-group { margin-bottom: 18px; } .filter-group-label { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .filter-group-note { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 6px; } /* ==== ピン（区分ベース色分け） ==== */ .leaflet-div-icon.pin-gray { background: var(--gray); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.4); } .leaflet-div-icon.pin-navy { background: var(--navy); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.4); } .leaflet-div-icon.pin-gold { background: var(--gold); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.4); } .leaflet-div-icon.pin-green { background: var(--green); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.4); } .leaflet-div-icon.pin-gray.pin-pending { background: var(--gray); opacity: .45; border: 3px dashed #fff; } .leaflet-div-icon.pin-navy.pin-pending { background: var(--navy); opacity: .45; border: 3px dashed #fff; } .leaflet-div-icon.pin-gold.pin-pending { background: var(--gold); opacity: .45; border: 3px dashed #fff; } .leaflet-div-icon.pin-green.pin-pending { background: var(--green); opacity: .45; border: 3px dashed #fff; } /* ピンの右上に付ける小さな目印。いまは「会員特典あり」だけに使う （パートナーであることは利用者の判断材料にならないため出さない）。 */ /* 会員特典の目印。白地に緑のアイコンにしてある。 ・凡例（.legend-pin.gift）と同じ見た目にそろえるため ・緑のピン（そなえる・湯上がり）に付いても同化しないため（以前は緑地だった） */ .pin-gift-badge { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--green); display: flex; align-items: center; justify-content: center; color: var(--green); } .pin-gift-badge svg { width: 10px; height: 10px; } /* ==== 「自分の陣地」ハイライト（ボタンでON/OFF、デフォルトOFF） ==== bodyにクラスを付けるだけで、地図のピンと一覧行の両方に同時に適用されるようにしている。 */ body.highlight-mine-on .leaflet-div-icon:not(.pin-contributor) { opacity: .3; } body.highlight-mine-on .leaflet-div-icon.pin-contributor { transform: scale(1.3); box-shadow: 0 0 0 4px var(--gold), 0 2px 12px rgba(197,160,89,.65); z-index: 650; transition: transform .2s, box-shadow .2s; } body.highlight-mine-on .list-row:not(.contributor) { opacity: .45; } body.highlight-mine-on .list-row.contributor .legend-pin { box-shadow: 0 0 0 3px var(--gold); } body.highlight-mine-on .list-row.contributor .name { color: var(--gold-deep); } /* ==== FAB ==== */ .fab-post { position: absolute; right: 18px; bottom: calc(var(--nav-height) + 20px + var(--safe-bottom) + 40px); z-index: 550; width: 58px; height: 58px; border-radius: 50%; background: var(--navy); color: #fff; border: none; box-shadow: 0 4px 14px rgba(26,43,76,.4); display: flex; align-items: center; justify-content: center; cursor: pointer; } .fab-post .fab-label { display: none; } /* 地図タブ以外では隠す（main.js の switchView が付け外しする）。 PC幅の指定より詳細度を高くして、どちらの幅でも確実に効くようにする。 */ .fab-post.hidden { display: none !important; } /* ==== 現在地ボタン ==== */ .map-locate-btn { position: absolute; right: 18px; bottom: calc(var(--nav-height) + 20px + var(--safe-bottom) + 40px + 58px + 12px); z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); border: none; box-shadow: 0 2px 8px rgba(12,22,38,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; } .map-locate-btn.locating { color: var(--gold-deep); } /* ==== 「自分の陣地」ハイライト切替ボタン（デフォルトOFF） ==== */ .map-highlight-btn { position: absolute; right: 18px; bottom: calc(var(--nav-height) + 20px + var(--safe-bottom) + 40px + 58px + 12px + 44px + 12px); z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); border: none; box-shadow: 0 2px 8px rgba(12,22,38,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; } .map-highlight-btn.active { background: var(--gold); color: var(--deep); } /* ==== 最新の情報に更新するボタン ==== 施設の情報は毎分変わるものではないので、ふだんは端末に取ってあるものを見せ、 最新にしたいときだけここを押していただく作りにしている。 */ .map-refresh-btn { position: absolute; right: 18px; bottom: calc(var(--nav-height) + 20px + var(--safe-bottom) + 40px + 58px + 12px + 44px + 12px + 44px + 12px); z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); border: none; box-shadow: 0 2px 8px rgba(12,22,38,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; } .map-refresh-btn.busy { color: var(--gold-deep); } .map-refresh-btn.busy .icon { animation: zk-spin 1s linear infinite; } @keyframes zk-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .map-refresh-btn.busy .icon { animation: none; } } /* ==== 読み込みの状況を伝える帯 ==== 初回はサーバーが目を覚ますところから始まるので数秒かかることがある。 黙って待たせると「壊れている」と思われるため、いま何をしているかを出す。 */ .map-loading { background: rgba(26,43,76,.92); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 12.5px; line-height: 1.6; box-shadow: 0 4px 20px rgba(26,43,76,.28); display: flex; align-items: center; gap: 9px; pointer-events: auto; } .map-loading .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-soft); flex: 0 0 auto; animation: zk-pulse 1.1s ease-in-out infinite; } @keyframes zk-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .map-loading .dot { animation: none; opacity: .8; } } .map-loading.warn { background: var(--warn-bg); color: var(--warn-text); } .map-loading.warn .dot { background: var(--warn-text); animation: none; } .map-loading .retry { margin-left: auto; background: rgba(255,255,255,.16); color: inherit; border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; } /* ==== ボトムナビ（モバイル） ==== */ .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 560; height: calc(var(--nav-height) + var(--safe-bottom)); display: flex; background: #fff; border-top: 1px solid #eee; padding-bottom: var(--safe-bottom); } .bottom-nav button { flex: 1; background: none; border: none; padding: 9px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--muted); cursor: pointer; } .bottom-nav button.active { color: var(--navy); } .bottom-nav button.active .icon { color: var(--navy); } /* ==== ボトムシート（施設詳細・3段階ドラッグ） ==== */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(12,22,38,0.45); z-index: 900; opacity: 0; pointer-events: none; transition: opacity .2s; } .sheet-backdrop.open { opacity: 1; pointer-events: auto; } .bottom-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 901; background: var(--mist); border-radius: 20px 20px 0 0; /* vhではなく#app-rootと同じJS実測値を基準にする（iOSでの高さズレ・下部余白対策） */ height: calc(var(--app-height, 100vh) * 0.92); transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -4px 16px rgba(12,22,38,0.12); display: flex; flex-direction: column; /* ★シート全体で指の操作を止めない。 ここに touch-action: none を置いていたため、**中身を指でスクロールできなかった**。 マウスのホイールでは動くので、パソコンでの確認では気づけない （実機で「下が見られない」と分かった）。 ドラッグで高さを変えるのは掴む部分（.sheet-grabber-area）だけなので、 指の操作を止めるのもそこだけでよい。 */ touch-action: auto; } /* 掴んで高さを変える部分。ここだけは指の操作をブラウザに渡さない */ .sheet-grabber-area { touch-action: none; } /* 中身は縦にスクロールできる */ .sheet-content { touch-action: pan-y; } .bottom-sheet.dragging { transition: none; } .sheet-grabber-area { flex: 0 0 auto; padding: 10px 0 6px; display: flex; justify-content: center; cursor: grab; } .sheet-handle { width: 42px; height: 4px; background: #d8dbe0; border-radius: 2px; } .sheet-content { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 18px calc(20px + var(--safe-bottom)); } .sheet-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--muted); cursor: pointer; z-index: 2; /* アイコンは20pxだが、指で押す領域は40px確保する */ padding: 6px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } /* ==== 地図: 施設一覧（下からスワイプで表示するボトムシート＋常時表示の折りたたみバー） ==== */ .list-peek-bar { position: absolute; left: 0; right: 0; bottom: calc(var(--nav-height) + var(--safe-bottom)); z-index: 540; height: 40px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #fff; border: none; border-top: 1px solid #eee; cursor: pointer; } .list-peek-bar.show { display: flex; } .list-peek-handle { width: 36px; height: 4px; background: #d8dbe0; border-radius: 2px; } .list-peek-row { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); } .list-peek-row .icon { color: var(--muted); } .list-sheet-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 10px; border-bottom: 1px solid #eee; } .list-sheet-count { font-size: 13px; font-weight: 700; color: var(--navy); } .list-sort-select { font-size: 12px; font-weight: 600; color: var(--ink); background: var(--mist); border: 1px solid #e5e0d3; border-radius: 999px; padding: 6px 10px; } .map-panel-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .list-row { cursor: pointer; } .list-row .legend-pin { flex-shrink: 0; } .list-row-body { flex: 1; min-width: 0; margin-left: 10px; } .list-row-body .name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-row-star { color: var(--gold-deep); vertical-align: -1px; margin-left: 2px; } .list-row-star.gray { color: var(--gray); } /* 会員特典がある施設の目印（詳細を開く前に一覧で分かるように） */ .list-row-gift { color: var(--green); vertical-align: -1px; margin-left: 4px; } /* 掲載内容の訂正をその場で知らせてもらうための一行（銘柄は報告の足し合わせで自動では消えないため） */ .correct-note { font-size: 11px; color: var(--muted); line-height: 1.75; margin: 2px 0 10px; } .correct-note a { color: var(--gold-deep); font-weight: 700; } .list-empty { font-size: 13px; color: var(--muted); padding: 16px 0; text-align: center; } /* ==== 一覧の「注目の施設」枠（協会と契約するサウナパートナー・上位認定の飲食店からランダムに1件） ==== */ .featured-slot { background: var(--warn-bg); border: 1px solid var(--gold); border-radius: var(--card-radius); padding: 2px 12px 4px; margin-bottom: 10px; } .featured-slot-label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--gold-deep); padding-top: 8px; } .featured-slot-label .icon { color: var(--gold-deep); } .featured-slot .facility-list-item { border-bottom: none; } /* ==== 称号・ピルなどの装飾 ==== */ .pill { display: inline-flex; align-items: center; gap: 4px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .pill.outline { background: transparent; color: var(--navy); border: 1px solid var(--navy); } .pill.pending { background: var(--gray); color: #fff; } .pill.gold { background: var(--gold); color: var(--deep); } .shop-pr-box { border: 1px solid var(--gold); background: var(--cream); border-radius: var(--card-radius); padding: 14px; margin-bottom: 14px; } .shop-pr-box .shop-pr-label { font-size: 11px; font-weight: 700; color: var(--gold-deep); letter-spacing: .05em; } .shop-pr-box img { width: 100%; border-radius: 10px; margin-top: 8px; display: block; } /* サウナパートナー（有料）は、無料の店舗申告よりお知らせ枠を目立たせる（縁取りを太く・影を追加） */ .shop-pr-box.partner { border-width: 2px; box-shadow: 0 4px 16px rgba(197,160,89,.25); } .info-row { display: flex; gap: 8px; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 14px; } .info-row .label { flex: 0 0 92px; color: var(--muted); } .info-row .value { flex: 1; font-weight: 600; } .majority-note { font-size: 12px; color: var(--ink); background: var(--mist); border-radius: 10px; padding: 9px 12px; margin: 8px 0; } .majority-note.split { color: var(--warn-text); background: var(--warn-bg); } .benefit-box { font-size: 13px; color: var(--ink); background: var(--cream); border: 1px solid var(--gold); border-radius: 10px; padding: 10px 12px; margin: 8px 0; } .benefit-label { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--gold-deep); letter-spacing: .05em; margin-bottom: 4px; } .benefit-label svg { width: 13px; height: 13px; } .benefit-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(197, 160, 89, .45); font-size: 11px; line-height: 1.7; color: var(--muted); } .benefit-note a { color: var(--gold-deep); } .site-link { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-deep); font-weight: 600; } .site-link svg { width: 12px; height: 12px; } /* ==== ボタン ==== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--card-radius); padding: 14px 20px; min-height: 52px; font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; } .btn-primary { background: var(--navy); color: #fff; } .btn-primary:active { background: var(--deep); } .btn-outline { background: #fff; color: var(--navy); border: 1px solid #d7d2c4; } .btn-ghost { background: transparent; color: var(--muted); text-decoration: underline; width: auto; padding: 6px; min-height: 0; font-weight: 600; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-sm { padding: 9px 14px; font-size: 13px; min-height: 40px; border-radius: 10px; } .btn-gold { background: var(--gold); color: var(--deep); } /* ==== カード ==== */ .card { background: #fff; border-radius: var(--card-radius); border: var(--card-border); padding: 16px; margin-bottom: 12px; } /* ==== フォーム部品 ==== */ .field { margin-bottom: 18px; } .field > label.field-label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .field-note { font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 6px; line-height: 1.5; } .choice-group { display: flex; flex-wrap: wrap; gap: 8px; } .choice-chip { border: 1px solid #d7d2c4; background: #fff; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 400; cursor: pointer; user-select: none; } .choice-chip.selected { background: var(--gold); border-color: var(--gold); color: var(--deep); font-weight: 700; } /* textarea.text-input を必ず含めること。 以前は input だけを指していたため、図鑑のメモ欄（textarea）に幅も余白も枠も 当たらず、ブラウザ既定の細い入力欄が左に寄って表示されていた（2026-08-02修正）。 */ select.select-input, input.text-input, textarea.text-input, input.date-input, input.email-input { width: 100%; padding: 13px 14px; border: 1px solid #d7d2c4; border-radius: var(--card-radius); background: #fff; font-size: 16px; font-family: inherit; box-sizing: border-box; /* padding込みで100%に収める（枠からはみ出させない） */ } select.select-input:focus, input.text-input:focus, textarea.text-input:focus, input.date-input:focus, input.email-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,160,89,.25); } .brand-select-box { max-height: 260px; overflow-y: auto; border: 1px solid #e2ddd0; border-radius: var(--card-radius); padding: 10px; background: #fff; } .brand-select-box .choice-chip { margin: 3px; } .photo-drop { border: 1px dashed #cfc7b3; border-radius: var(--card-radius); padding: 22px 16px; text-align: center; color: var(--muted); font-size: 14px; cursor: pointer; background: #fff; } .photo-drop .icon { margin-bottom: 6px; color: var(--muted); } .photo-drop img { max-width: 100%; max-height: 220px; border-radius: 10px; margin-top: 10px; } /* ==== 投稿ウィザード: 場所選択の地図に重ねる現在地ボタン ==== */ .loc-locate-btn { position: absolute; right: 10px; bottom: 10px; z-index: 500; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--navy); border: none; box-shadow: 0 2px 8px rgba(12,22,38,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; } .loc-locate-btn.locating { color: var(--gold-deep); } /* ==== アイコンカード（区分・種別選択など） ==== */ .icon-card-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; } .icon-card { background: #fff; border: 1px solid #e5e0d3; border-radius: var(--card-radius); padding: 20px 10px; text-align: center; cursor: pointer; } .icon-card .icon { color: var(--navy); margin-bottom: 8px; } .icon-card .icon-card-label { font-weight: 700; font-size: 14px; color: var(--ink); } .icon-card .icon-card-desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; } .icon-card.selected { border-color: var(--gold); border-width: 2px; background: var(--warn-bg); } .icon-card.selected .icon { color: var(--gold-deep); } .icon-card.selected .icon-card-label { color: var(--gold-deep); } /* ==== 投稿ウィザード ==== */ .post-wizard { position: fixed; inset: 0; z-index: 1000; background: var(--cream); display: none; flex-direction: column; } .post-wizard.open { display: flex; } .wizard-topbar { flex: 0 0 auto; padding: calc(12px + var(--safe-top)) 16px 10px; display: flex; align-items: center; gap: 10px; background: #fff; border-bottom: 1px solid #eee; } .wizard-topbar button { background: none; border: none; color: var(--navy); cursor: pointer; padding: 4px; display: flex; align-items: center; } .wizard-progress-track { flex: 1; height: 4px; background: #eee; border-radius: 999px; overflow: hidden; } .wizard-progress-fill { height: 100%; background: var(--gold); transition: width .25s ease; } .wizard-step-label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; } .wizard-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 18px calc(20px + var(--safe-bottom)); } .wizard-actions { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 18px calc(14px + var(--safe-bottom)); background: #fff; border-top: 1px solid #eee; } .wizard-actions .btn { flex: 1; } .wizard-question { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 8px; } .wizard-hint { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.6; margin-bottom: 22px; } .confirm-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eee; font-size: 14px; } .confirm-row .k { color: var(--muted); flex: 0 0 92px; } .confirm-row .v { flex: 1; text-align: right; font-weight: 700; } /* ==== スケルトンローダー ==== */ .skeleton { position: relative; overflow: hidden; background: #eee7d8; border-radius: 8px; } .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: skeleton-shimmer 1.3s infinite; } @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } } .skeleton-line { height: 14px; margin-bottom: 8px; } .skeleton-line.w60 { width: 60%; } .skeleton-line.w40 { width: 40%; } .skeleton-card { height: 72px; border-radius: var(--card-radius); margin-bottom: 12px; } .skeleton-circle { width: 48px; height: 48px; border-radius: 50%; } /* ==== ログイン画面 ==== */ #screen-login { /* Leafletの標準コントロール（ズームボタン等）はz-index:1000で描画されるため、 ゲスト閲覧モードで地図を先に初期化するようになった今、それより確実に上に来る値にしておく。 */ position: fixed; inset: 0; z-index: 1300; /* 既定は非表示。表示はJS（showLoginScreen）がstyle.displayをflexに切り替えたときだけ。 以前はここがdisplay:flex（既定で表示）になっていたため、ゲストとして地図から始めたい ケースでも初回は必ずログイン画面が一瞬でも表示される作りになっていた。 */ display: none; flex-direction: column; background: #fff; /* 中身が画面より高いときにスクロールできるようにする。 これが無いと、親（#app-root）が overflow:hidden のため画面からはみ出した分に 指が届かなくなる。入会フォームを開くと1300px近くになり、 メールアドレス欄と送信ボタンがスマホで押せなかった。 */ overflow-y: auto; -webkit-overflow-scrolling: touch; } .login-hero { flex: 0 0 auto; min-height: calc(var(--app-height, 100vh) * 0.34); background: radial-gradient(circle at 50% 20%, var(--navy), var(--deep)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(24px + var(--safe-top)) 24px 28px; } .login-hero .login-logo { width: 84px; height: 84px; margin-bottom: 14px; } .login-hero .logo-tagline { font-family: var(--font-brand); font-size: 13px; font-weight: 600; color: var(--gold-soft); opacity: .9; text-align: center; } .login-form-area { /* 縮まないようにする（flex:1 だけだと、中身が高いときに枠が中身より小さくなり、 上下にはみ出して上端まで削られてしまう）。余白があるときだけ中央に寄る。 */ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 32px 24px calc(32px + var(--safe-bottom)); max-width: 400px; width: 100%; margin: 0 auto; } .login-error { color: var(--error); font-size: 13px; font-weight: 600; margin-bottom: 14px; min-height: 16px; } .login-form-area .field-label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .login-form-area input { width: 100%; font-size: 16px; height: 56px; padding: 0 16px; border-radius: var(--card-radius); border: 1px solid #d7d2c4; margin-bottom: 20px; background: #fff; } .login-form-area input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,160,89,.25); } .login-form-area input#login-member-input { letter-spacing: .3em; font-size: 20px; font-weight: 700; } .login-close { position: absolute; top: calc(12px + var(--safe-top)); right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .login-guest-link { margin-top: 14px; background: none; border: none; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; text-align: center; width: 100%; } .login-divider { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; color: var(--muted); font-size: 12px; font-weight: 600; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: #e5e0d3; } .login-signup-box { text-align: center; } .login-signup-box .field-note { margin-bottom: 12px; } .login-signup-box .btn { text-decoration: none; } /* ==== 祝福演出（ガチャ・獲得ポイント・称号昇格） ==== */ #gacha-overlay { position: fixed; inset: 0; z-index: 1100; background: radial-gradient(circle at 50% 42%, var(--navy) 0%, var(--deep) 70%, #0a121e 100%); display: none; align-items: center; justify-content: center; flex-direction: column; color: var(--cream); text-align: center; padding: 24px; overflow: hidden; } #gacha-overlay.open { display: flex; } /* 粒子・光条を描くキャンバス。演出中だけ動かし、終わったら止める */ #gacha-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .gacha-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .celebrate-points { font-family: var(--font-brand); font-weight: 700; font-size: 44px; color: var(--gold-soft); opacity: 0; transform: scale(.6); margin-bottom: 6px; } .celebrate-points.show { animation: celebrate-pop .5s cubic-bezier(.2,.9,.3,1.4) forwards; } @keyframes celebrate-pop { to { opacity: 1; transform: scale(1); } } .celebrate-sub { font-size: 13px; font-weight: 400; opacity: .8; margin-bottom: 22px; } /* ==== ガチャ：ためる → 開ける ==== */ .gacha-orb { position: relative; width: 132px; height: 132px; margin-bottom: 18px; display: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .gacha-orb.show { display: block; animation: gacha-drop .5s cubic-bezier(.2,.9,.3,1.3) both; } @keyframes gacha-drop { 0% { transform: translateY(-28px) scale(.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .gacha-core { position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--gold-soft) 30%, var(--gold) 62%, var(--gold-deep) 100%); box-shadow: 0 0 30px rgba(197,160,89,.55), inset 0 -8px 18px rgba(0,0,0,.22); } .gacha-shine { position: absolute; left: 34px; top: 30px; width: 26px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.85); filter: blur(2px); } /* 二重の金の輪＝協会の意匠。ためている間だけ広がり続ける */ .gacha-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; } .gacha-orb.charging .gacha-core { animation: gacha-charge 1.05s ease-in-out infinite; } .gacha-orb.charging .gacha-ring.r1 { animation: gacha-ring 1.5s ease-out infinite; } .gacha-orb.charging .gacha-ring.r2 { animation: gacha-ring 1.5s ease-out .75s infinite; } @keyframes gacha-charge { 0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 30px rgba(197,160,89,.5), inset 0 -8px 18px rgba(0,0,0,.22); } 50% { transform: scale(1.07) rotate(3deg); box-shadow: 0 0 58px rgba(197,160,89,.85), inset 0 -8px 18px rgba(0,0,0,.22); } } @keyframes gacha-ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } } /* レア（レアバッジ）のときだけ、ためる段階から輪が増えて速くなる＝当たりの予感 */ #gacha-overlay.rarity-rare .gacha-orb.charging .gacha-ring.r1, #gacha-overlay.rarity-rare .gacha-orb.charging .gacha-ring.r2 { animation-duration: .8s; border-width: 2px; border-color: #fff; } #gacha-overlay.rarity-rare .gacha-orb.charging .gacha-core { animation-duration: .55s; } /* 開ける瞬間：はじけて消える */ .gacha-orb.burst { animation: gacha-burst .42s cubic-bezier(.3,.8,.4,1) forwards; } @keyframes gacha-burst { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(.82); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } } .gacha-hint { font-size: 12px; letter-spacing: .12em; color: var(--gold-soft); opacity: 0; margin-bottom: 18px; min-height: 17px; } .gacha-hint.show { animation: gacha-hint-blink 1.5s ease-in-out infinite; } @keyframes gacha-hint-blink { 0%,100% { opacity: .35; } 50% { opacity: .95; } } /* 結果カード：紺地に金の細い枠（協会の意匠） */ .gacha-card { position: relative; overflow: hidden; min-width: 250px; max-width: 320px; padding: 22px 24px; border: 1px solid var(--gold); border-radius: var(--card-radius); background: linear-gradient(160deg, rgba(197,160,89,.16), rgba(12,22,38,.55)); opacity: 0; transform: scale(.82) translateY(10px); display: none; margin-bottom: 8px; } .gacha-card.show { display: block; animation: gacha-card-in .45s cubic-bezier(.2,.9,.3,1.35) forwards; } @keyframes gacha-card-in { to { opacity: 1; transform: scale(1) translateY(0); } } /* カードの上を光が一度だけ流れる */ .gacha-card.show::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); animation: gacha-sweep .9s ease-out .35s 1; } @keyframes gacha-sweep { to { left: 115%; } } /* レアはさらに二重枠にして格を上げる */ #gacha-overlay.rarity-rare .gacha-card { box-shadow: 0 0 0 4px rgba(12,22,38,.9), 0 0 0 5px var(--gold-deep), 0 0 48px rgba(197,160,89,.4); } .gacha-card-label { font-size: 11px; letter-spacing: .2em; font-weight: 700; color: var(--gold-soft); margin-bottom: 8px; } #gacha-overlay .gacha-result { font-family: var(--font-brand); font-weight: 700; font-size: 24px; color: #fff; margin-bottom: 6px; line-height: 1.5; } #gacha-overlay .gacha-sub { font-size: 13px; font-weight: 400; opacity: .88; line-height: 1.8; white-space: pre-line; } .promotion-banner { margin-top: 12px; border: 1px solid var(--gold); border-radius: var(--card-radius); padding: 16px; background: rgba(197,160,89,0.12); animation: gacha-card-in .45s cubic-bezier(.2,.9,.3,1.35) both; } .promotion-banner .promo-title { font-size: 12px; font-weight: 600; color: var(--gold-soft); } .promotion-banner .promo-name { font-family: var(--font-brand); font-weight: 700; font-size: 20px; color: #fff; margin-top: 4px; } #gacha-close-btn { margin-top: 18px; } /* 動きを減らす設定の端末では、演出を止めて結果だけ見せる */ @media (prefers-reduced-motion: reduce) { .gacha-orb.show, .gacha-orb.burst, .gacha-orb.charging .gacha-core, .gacha-orb.charging .gacha-ring.r1, .gacha-orb.charging .gacha-ring.r2, .gacha-card.show, .gacha-card.show::after, .gacha-hint.show, .celebrate-points.show, .promotion-banner { animation: none !important; } .gacha-card.show { opacity: 1; transform: none; } .celebrate-points.show { opacity: 1; transform: none; } } /* ==== トースト ==== */ #toast { position: fixed; left: 50%; bottom: calc(var(--nav-height) + 24px + var(--safe-bottom)); transform: translateX(-50%) translateY(20px); /* ★いちばん上に出す。 以前は1200で、ログイン画面(1300)・店舗の申込(2000)・会員証(3000)などの 裏に隠れていた。**エラーを出したつもりで、利用者には何も見えていなかった** （暗証番号を間違えても何も出ない、という形で表れた）。 指の操作は通す指定（pointer-events:none）なので、上に置いても邪魔にならない。 */ z-index: 9000; background: var(--deep); color: var(--cream); font-size: 13px; font-weight: 600; padding: 11px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: all .25s; max-width: 86vw; text-align: center; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ==== 汎用: 統計・称号・一覧 ==== */ .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .stat-tile { background: #fff; border-radius: var(--card-radius); border: var(--card-border); padding: 14px 8px; text-align: center; } .stat-tile .num { font-size: 24px; font-weight: 700; color: var(--navy); } .stat-tile .label { font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 2px; } .title-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .title-row { background: #fff; border-radius: var(--card-radius); border: var(--card-border); padding: 12px 16px; } .title-row-top { display: flex; justify-content: space-between; align-items: center; } .title-row .cat { font-size: 11px; font-weight: 600; color: var(--muted); } .title-row .name { font-weight: 700; color: var(--navy); } .title-progress-track { height: 6px; border-radius: 999px; background: var(--mist); margin-top: 8px; overflow: hidden; } .title-progress-fill { height: 100%; background: var(--gold); border-radius: 999px; } .title-progress-caption { font-size: 11px; color: var(--muted); margin-top: 6px; } .title-progress-caption.max { color: var(--gold-deep); font-weight: 600; } .facility-list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; } .facility-list-item .name { font-weight: 700; } .facility-list-item .meta { font-size: 11px; font-weight: 600; color: var(--muted); } .badge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .badge-tile { background: #fff; border-radius: var(--card-radius); border: var(--card-border); padding: 14px 6px; text-align: center; font-size: 11px; font-weight: 600; } .badge-tile .badge-emoji { font-size: 26px; display: block; margin-bottom: 4px; } .ticket-banner { background: var(--gold-soft); color: var(--deep); border-radius: var(--card-radius); padding: 12px 16px; font-size: 13px; font-weight: 700; margin-bottom: 16px; } /* ==== ランキングタブ ==== */ .ranking-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; } .ranking-tabs button { flex: 0 0 auto; border: 1px solid #d7d2c4; background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; } .ranking-tabs button.active { background: var(--navy); color: #fff; border-color: var(--navy); } .rank-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--card-radius); border: var(--card-border); padding: 12px 14px; margin-bottom: 8px; } .rank-row .rank-no { width: 26px; text-align: center; font-weight: 700; color: var(--gold-deep); } .rank-row .rank-name { flex: 1; font-weight: 700; } .rank-row .rank-value { font-size: 13px; color: var(--navy); font-weight: 700; } .pref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pref-card { background: #fff; border-radius: var(--card-radius); border: var(--card-border); padding: 12px; } .pref-card .pref-name { font-size: 11px; font-weight: 600; color: var(--muted); } .pref-card .pref-leader { font-weight: 700; font-size: 13px; margin-top: 2px; } .pref-card.vacant .pref-leader { color: var(--muted); font-weight: 400; } /* ==== ヘルプ画面 ==== */ .help-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 13px; } .help-table th, .help-table td { text-align: left; padding: 9px 6px; border-bottom: 1px solid #eee; } .help-table th { color: var(--muted); font-weight: 700; font-size: 11px; } .help-plain-list { list-style: none; margin: 0; padding: 0; } .help-plain-list li { font-size: 13px; color: var(--ink); line-height: 1.7; padding: 4px 0; } .help-plain-list strong { color: var(--navy); } .help-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; } .help-steps li { counter-increment: step; position: relative; padding: 6px 0 6px 32px; font-size: 14px; } .help-steps li::before { content: counter(step); position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--deep); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* 順番のない説明。番号を振ると「手順」に読めてしまうので、点で並べる */ .help-list { list-style: none; margin: 0; padding: 0; } .help-list li { position: relative; padding: 6px 0 6px 18px; font-size: 14px; color: var(--ink); } .help-list li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .faq details { background: #fff; border-radius: var(--card-radius); border: var(--card-border); padding: 12px 14px; margin-bottom: 8px; } .faq summary { font-weight: 700; cursor: pointer; font-size: 14px; } .faq p { margin: 10px 0 0; font-size: 13px; font-weight: 400; color: var(--ink); } /* ==== 地図タブ用の右パネル（PC専用。基本は非表示。768px〜のルールで表示制御） ==== */ .view-map-panel { display: none; } /* ==== オフライン ==== */ #offline-screen { position: fixed; inset: 0; z-index: 2000; background: var(--cream); display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 24px; } #offline-screen.show { display: flex; } /* ============================================================ レスポンシブ（768px〜：地図＋右パネル、サイドバーナビ） ============================================================ */ @media (min-width: 768px) { .bottom-nav { left: 0; right: auto; bottom: 0; top: 0; width: var(--side-nav-width); height: auto; flex-direction: column; justify-content: flex-start; /* 上部にロゴを丸く配置する分だけ空ける */ padding: calc(70px + var(--safe-top)) 0 12px; border-top: none; border-right: 1px solid #eee; } .bottom-nav button { flex: 0 0 auto; padding: 14px 4px; } /* ロゴはサイドバー上部に丸く収める（地図画面のトグル/検索と重ならないよう、 テキストは非表示にしてロゴマークのみにする） */ .floating-brand { top: calc(16px + var(--safe-top)); left: calc((var(--side-nav-width) - 40px) / 2); width: 40px; height: 40px; padding: 0; justify-content: center; } .floating-brand span { display: none; } .floating-brand img { width: 24px; height: 24px; } .view-wrap { left: var(--side-nav-width); } #view-map { right: var(--panel-width); /* PCでは地図を常時表示する（タブ切替の対象は右パネルのみ）。 switchView()自体はモバイルと同じ「1画面だけactive」の仕組みのままなので、 他のタブを選んでも地図が消えないようここで強制的に可視化する。 */ opacity: 1 !important; pointer-events: auto !important; transform: none !important; } #view-catalog, #view-ranking, #view-mypage, #view-help { left: auto; right: 0; width: var(--panel-width); border-left: 1px solid #eee; background: var(--cream); z-index: 200; } #view-catalog .view-scroll, #view-ranking .view-scroll, #view-mypage .view-scroll, #view-help .view-scroll { padding-top: 28px; } /* 地図タブ選択時のみ表示する右パネル（凡例・使い方・新規登録ボタン） */ .view-map-panel { display: none; position: absolute; left: auto; right: 0; top: 0; bottom: 0; width: var(--panel-width); border-left: 1px solid #eee; background: var(--cream); padding: 28px 20px; overflow-y: auto; z-index: 150; } .view-map-panel.active { display: block; } /* PCでも地図の上に新規登録の＋ボタンを出す。 以前は右パネルのボタンだけに寄せていたが、施設詳細を開いたり他のタブに移ると その右パネルごと消えてしまい、ボタンに辿り着けなくなっていた。 ボトムナビが無い分、位置はスマホより下げてよい。 */ .fab-post { display: flex; bottom: 20px; right: calc(var(--panel-width) + 20px); } /* 現在地・ハイライト切替は＋ボタンの上に積む。 この2つは #view-map の子で、#view-map 自体が既にパネル幅を除いた領域に縮んでいるため、 パネル幅を二重に引かない（.fab-post は #app-root の直下なので引く必要がある）。 */ .map-locate-btn { bottom: 90px; right: 20px; } .map-highlight-btn { bottom: 146px; right: 20px; } .map-refresh-btn { bottom: 202px; right: 20px; } /* .map-toggle / .map-search-row は #view-map の子要素で、#view-map自体が 既にパネル幅を除いた領域に縮小されているため、パネル幅を二重に引く必要はない。 左上に整列させ、地図の上に散らばって見えないようにする。 左端はLeafletの標準ズームボタン（+/−、左上に約40px幅で表示される）と 重ならないよう60pxのオフセットを取る。 */ .map-toggle { top: 20px; left: 60px; transform: none; } .map-search-row { top: 74px; left: 60px; right: 20px; } /* 横に並ぶ選択肢（図鑑の絞り込み・ランキングのタブ）は、スマホでは横スワイプで 送れるが、PCでは送る手段が見えず、右端の項目が隠れたままになる。 PCでは折り返して全部見せる。 */ .catalog-filters, .ranking-tabs { flex-wrap: wrap; overflow-x: visible; } .map-result-count, .map-legend { display: none; } /* 右パネル（view-map-panel）に集約 */ /* 件数のピルを出さないぶん、検索バーのすぐ下から始める。 右パネル（幅は下の .view-map-panel と合わせる）に重ならないよう右端を空ける。 */ .map-overlay-stack { top: 126px; left: 60px; right: calc(var(--panel-width) + 32px); /* 幅いっぱいに伸ばすと、3行の帯には広すぎて間が抜けて見える */ max-width: 420px; } /* 施設一覧はPCでは右パネル（.view-map-panel内の常時表示リスト）に集約するため、 スマホ専用のスワイプ式ボトムシート・折りたたみバーはここでは使わない。 */ .list-peek-bar { display: none !important; } #list-sheet-backdrop, .list-sheet { display: none !important; } .sheet-backdrop { display: none !important; } .bottom-sheet { position: fixed !important; left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--panel-width) !important; height: 100% !important; max-width: none !important; margin-left: 0 !important; transform: none !important; border-radius: 0 !important; border-left: 1px solid #eee; box-shadow: none; visibility: hidden; z-index: 300; } .bottom-sheet.open { visibility: visible; z-index: 400; } .sheet-grabber-area { display: none; } .post-wizard { left: var(--side-nav-width); } } @media (min-width: 1200px) { #app-root { left: 50%; right: auto; width: 1400px; margin-left: -700px; box-shadow: 0 0 40px rgba(12,22,38,.08); } /* #app-rootは中央寄せ幅に収まるが、position:fixedの独立したオーバーレイ群 （ボトムシート／投稿ウィザード）は素のままだと画面端に張り付くため、 同じ中央寄せの箱に揃える。 */ .bottom-sheet { left: calc(50% + 700px - var(--panel-width)) !important; right: auto !important; } .post-wizard { left: 50%; margin-left: -700px; width: 1400px; } } /* ==== デモ専用: デバイスプレビュー切替（本番では出現しない） ==== 右上のアカウントボタン（.floating-account、40px円・right:12px）と重ならないよう、 その左側に十分な間隔を取って配置する。 */ .device-toggle { position: fixed; top: calc(12px + var(--safe-top)); right: 64px; z-index: 3000; display: flex; gap: 4px; background: rgba(12,22,38,.85); border-radius: 999px; padding: 4px; } @media (min-width: 1200px) { /* #app-rootの1200px+中央寄せに合わせる（.device-toggleはposition:fixedでapp-root外のため） */ .device-toggle { right: calc(50vw - 700px + 64px) !important; } } .device-toggle button { border: none; background: transparent; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 4px; } .device-toggle button.active { background: var(--gold); color: var(--deep); } .device-frame-overlay { position: fixed; inset: 0; z-index: 2900; background: #2a2f3a; display: none; align-items: center; justify-content: center; } .device-frame-overlay.open { display: flex; } .device-frame-overlay iframe { width: 375px; height: 812px; border: 10px solid #111; border-radius: 40px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; } /* ==== 店舗の方向けの画面（申込・ログイン・掲載内容の更新） ==== 会員向けの投稿ウィザードとは別物。ログインしていなくても開けるため、 アプリ本体の上に全画面でかぶせる独立したパネルにしている。 */ .shop-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(12, 22, 38, .45); display: none; } .shop-overlay.open { display: block; } .shop-panel { position: absolute; inset: 0; background: var(--cream); display: flex; flex-direction: column; } .shop-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-top)) 12px 10px; background: #fff; border-bottom: 1px solid #eee; } .shop-topbar button { border: none; background: none; padding: 6px; cursor: pointer; color: var(--ink); display: flex; align-items: center; } .shop-title { flex: 1; font-weight: 700; font-size: 15px; color: var(--navy); } .shop-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 16px calc(28px + var(--safe-bottom)); } .shop-body .btn { width: 100%; } .shop-divider { height: 1px; background: #ece6d8; margin: 22px 0 18px; } /* マイページの「表示名」と「メールアドレス」の区切り */ .mypage-divider { height: 1px; background: #ece6d8; margin: 16px 0 14px; } /* ==== マイページ：次にできること ==== */ .next-step { background: #fff; border: 1px solid #ece6d8; border-left: 3px solid var(--gold); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; } .next-step-blank { border-left-color: var(--green); } .next-step-mypref { border-left-color: var(--navy); } .next-step-text { font-size: 13px; color: var(--ink); line-height: 1.7; } .next-step-prefs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .next-step-pref { font-size: 11px; color: var(--gold-deep); background: var(--warn-bg); border-radius: 999px; padding: 3px 10px; } .next-step-pref.more { background: none; color: var(--muted); } /* ==== マイページ：実績バッジ ==== */ .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; } .ach-item { background: var(--mist); border: 1px solid #ece6d8; border-radius: 12px; padding: 10px 12px; opacity: .5; } /* 取得済みだけを紺＋金の枠で立たせる。未取得は「目標」として薄く並べる */ .ach-item.owned { opacity: 1; background: #fff; border-color: var(--gold); box-shadow: 0 4px 20px rgba(26,43,76,.08); } .ach-name { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 2px; } .ach-desc { font-size: 11px; color: var(--muted); line-height: 1.6; } .shop-body textarea.text-input { resize: vertical; min-height: 96px; font-family: inherit; } @media (min-width: 768px) { .shop-panel { inset: 0 0 0 auto; width: 480px; box-shadow: -8px 0 32px rgba(12,22,38,.18); } } /* ==== 図鑑 ==== */ .catalog-progress { text-align: center; } .catalog-progress-num { font-family: var(--font-brand); font-weight: 700; font-size: 34px; color: var(--navy); line-height: 1.2; } .catalog-progress-num span { font-size: 18px; color: var(--muted); font-weight: 400; } .catalog-progress-label { font-size: 12px; color: var(--muted); margin-bottom: 12px; } .catalog-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; } .catalog-filter { flex: 0 0 auto; background: #fff; border: 1px solid #ece6d8; border-radius: 999px; padding: 8px 14px; min-height: 40px; font-size: 13px; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 6px; } .catalog-filter span { font-size: 11px; color: var(--muted); } .catalog-filter.active { background: var(--navy); border-color: var(--navy); color: #fff; } .catalog-filter.active span { color: var(--gold-soft); } .catalog-maker { display: flex; align-items: baseline; justify-content: space-between; } .catalog-maker-count { font-size: 12px; font-weight: 400; color: var(--muted); } .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 6px; } /* まだ飲んでいないものは薄く。飲んだものだけを金の枠で立たせる（実績バッジと同じ考え方） */ .catalog-item { position: relative; text-align: left; background: var(--mist); border: 1px solid #ece6d8; border-radius: 14px; padding: 12px 12px 10px; cursor: pointer; opacity: .62; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-height: 84px; } .catalog-item.done { opacity: 1; background: #fff; border-color: var(--gold); box-shadow: 0 4px 20px rgba(26,43,76,.08); } .catalog-name { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.5; } .catalog-check { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; } /* お店で見つけた（自分が地図に投稿したお店に置いてあった）。 まだ飲んだ記録は付いていないので、「飲んだ」とは見た目を分ける。 ★お店で見つけた ≠ 自分が飲んだ。種類数にも称号にも数えない。 */ .catalog-item.found { opacity: .85; background: #fff; border-color: var(--gray); } .catalog-found { position: absolute; top: -8px; left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); background: var(--mist); border: 1px solid var(--gray); border-radius: 999px; padding: 2px 7px; white-space: nowrap; } .catalog-pending { font-size: 10px; color: var(--gold-deep); background: var(--warn-bg); border-radius: 999px; padding: 2px 8px; } .catalog-stars { font-size: 12px; color: var(--gold); letter-spacing: 1px; } /* アルコール分の表示。0.00%は紺、微アルコールは注意喚起の色（運転される方に効く） */ .alc-chip { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; display: inline-block; } .alc-chip.zero { background: var(--navy); color: #fff; } .alc-chip.low { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-text); } .alc-chip.unknown { background: #f0f0f0; color: var(--muted); } .catalog-detail-head { margin-bottom: 14px; } .catalog-detail-maker { font-size: 13px; color: var(--muted); margin-bottom: 8px; } .catalog-record { background: var(--mist); border: 1px solid #ece6d8; border-radius: 14px; padding: 14px; margin-top: 8px; } .star-picker { display: flex; align-items: center; gap: 2px; } .star-btn { background: none; border: none; cursor: pointer; color: #d7d2c4; padding: 6px 2px; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; } .star-btn.on { color: var(--gold); } .star-btn.on svg { fill: var(--gold); } .star-clear { margin-left: 8px; background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; min-height: 40px; padding: 0 8px; } .share-preview { background: var(--mist); border: 1px solid #ece6d8; border-radius: 12px; padding: 12px; font-size: 12px; line-height: 1.8; color: var(--ink); white-space: pre-line; } /* ボトムナビが5つになったので、文字を少し詰める */ .bottom-nav button { font-size: 10px; } @media (max-width: 340px) { .bottom-nav button { font-size: 9px; padding-left: 0; padding-right: 0; } } /* ==== わたしのランキング ==== */ .rank-row { display: flex; align-items: center; gap: 10px; background: var(--mist); border: 1px solid #ece6d8; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } /* 画像に載る上位5件だけを立たせる（どこまでが対象か一目で分かるように） */ .rank-row.in { background: #fff; border-color: var(--gold); } .rank-no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(197,160,89,.18); color: var(--gold-deep); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .rank-row.in .rank-no { background: var(--gold); color: #fff; } .rank-body { flex: 1; min-width: 0; } .rank-name { font-size: 13px; font-weight: 700; color: var(--navy); } .rank-meta { font-size: 11px; color: var(--muted); } .rank-star { color: var(--gold); letter-spacing: 1px; } .rank-moves { display: flex; flex-direction: column; gap: 2px; } .rank-move { width: 40px; height: 26px; background: #fff; border: 1px solid #ece6d8; border-radius: 8px; color: var(--navy); cursor: pointer; font-size: 13px; line-height: 1; } .rank-move:disabled { opacity: .3; cursor: default; } .rank-image-wrap { margin-top: 14px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(26,43,76,.08); } .rank-image-wrap img { display: block; width: 100%; height: auto; } /* 場所選択：Googleマップのリンクから取り込む欄 */ .loc-gmap { background: var(--mist); border: 1px solid #ece6d8; border-radius: 12px; padding: 12px; margin-bottom: 12px; } .loc-gmap .field-label { margin-top: 0; } /* 図鑑：積み上げ式の進み具合 */ .catalog-next { font-size: 13px; color: var(--ink); text-align: center; margin-top: 10px; } .catalog-next b { color: var(--gold-deep); } .catalog-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; } .catalog-step { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--mist); border: 1px solid #ece6d8; border-radius: 999px; padding: 3px 10px; } .catalog-step.reached { color: #fff; background: var(--gold); border-color: var(--gold); } .catalog-total { margin: 14px 0 0; text-align: center; } /* 選択肢が多いとき（銘柄など）の絞り込み欄 */ .chip-search { margin-bottom: 10px; } .chip-search-input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #ece6d8; border-radius: 999px; background: #fff; font-size: 14px; color: var(--ink); font-family: inherit; -webkit-appearance: none; } .chip-search-input::placeholder { color: var(--muted); } .chip-search-input:focus { outline: none; border-color: var(--gold); } .chip-search-none { display: none; font-size: 13px; color: var(--muted); padding: 10px 4px 0; } .catalog-search { margin: 0 0 14px; } /* マイページ：協会で確認中の投稿 */ .pending-card { border: 1px solid var(--warn-text); } .pending-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; } .pending-row + .pending-row { border-top: 1px solid rgba(26,43,76,.08); } .pending-row .name { font-size: 13px; font-weight: 700; color: var(--navy); } .pending-row .meta { font-size: 11px; font-weight: 600; color: var(--muted); } /* 図鑑：販売状況の表示 */ .catalog-ended { font-size: 10px; color: var(--muted); background: #f0f0f0; border-radius: 999px; padding: 2px 8px; } .catalog-limited { font-size: 10px; color: var(--gold-deep); background: var(--warn-bg); border-radius: 999px; padding: 2px 8px; } /* 図鑑：協会が把握しきれていないことを、そのまま伝える欄（brandsシートの「備考」） */ .catalog-note { margin-top: 10px; padding: 10px 12px; background: var(--warn-bg); border: 1px solid var(--warn-text); border-radius: 12px; font-size: 12px; line-height: 1.8; color: var(--warn-text); } .catalog-alc-caution { margin: 10px 0 0; } /* 店舗向け：アプリで見られた回数（掲載の価値をお店に伝えるための欄） */ .shop-views-row { display: flex; gap: 10px; margin-top: 10px; } .shop-views-cell { flex: 1; text-align: center; background: var(--mist); border: 1px solid #ece6d8; border-radius: 12px; padding: 12px 6px; } .shop-views-cell .num { font-family: var(--font-brand); font-weight: 700; font-size: 24px; color: var(--navy); line-height: 1.2; font-variant-numeric: tabular-nums; } .shop-views-cell .label { font-size: 11px; color: var(--muted); margin-top: 2px; } /* 図鑑：いまの称号 */ .catalog-title-now { font-family: var(--font-brand); font-size: 13px; font-weight: 700; color: var(--gold-deep); letter-spacing: .04em; margin-bottom: 4px; } /* ============================================================ デジタル会員証・認定証 位置はテンプレート画像の実測値。画像を差し替えたら測り直すこと。 会員証 membercard-bg.jpg 1600x967 氏名/NAME ラベル 左43.5% 上50.3〜51.9% 会員番号/No. ラベル 左43.4% 上68.5〜70.3% 入会日/SINCE ラベル 左61.7% 上68.5〜70.3% 認定証 certificate-bg.jpg 1200x1697 「認定証」 上31.3〜40.4% 空白（氏名） 上40.4〜61.8% 本文 上61.8〜74.5% 署名 上80.8%〜 ============================================================ */ .membercard-overlay { position: fixed; inset: 0; z-index: 3000; /* 会員証はお店で見せるもの。背後の画面が透けていると読みにくく、 提示物としても落ち着かないので、ほぼ不透明にする */ background: var(--deep); display: none; overflow-y: auto; /* ★上の余白に --safe-top を足す。 iPhoneでは画面上端に時刻・電波・バッテリーが重なっており、 20pxだけだと「閉じる」がその下に潜って押せなくなる（実機で押せなかった）。 */ padding: calc(20px + var(--safe-top)) 16px calc(28px + var(--safe-bottom)); -webkit-overflow-scrolling: touch; } .membercard-overlay.open { display: block; } body.membercard-open { overflow: hidden; } .membercard-sheet { max-width: 560px; margin: 0 auto; } .membercard-close { display: block; margin: 0 0 14px auto; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 11px 20px; font-size: 13px; font-weight: 700; cursor: pointer; /* 指で押すものは44px以上。8pxの余白だと33pxしかなく、押しにくかった */ min-height: 44px; } /* ---- 会員証 ---- */ .membercard { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.45); } .membercard-bg { display: block; width: 100%; height: auto; } /* ==== 2枚目の会員証（免許証の形をした、協会からの遊び心のある1枚） ==== 位置はテンプレート画像（1600x967）の罫線を実測したもの。 氏名の欄 罫線の内側 上7.03% 高さ8.58%（中央11.32%）／左15.75%〜67.25% 発行の欄 同じ行の右側。「発行」の文字が73.75%まで。その右が空欄 番号の欄 罫線の内側 上79.42% 高さ6.31%（中央82.57%）／「第」の右から ★上下は「枠を与えて中央に寄せる」方式にしている。 文字の大きさは画面幅で変わるので、上端を%で決め打ちすると 大きさによってずれる（実際にずれた）。枠に対して中央なら常に合う。 ★中央の値は「罫線の枠」ではなく**隣の印字の中央**に合わせている。 枠の中央に置くと、隣の「第」より少し下に見えた（実際に指摘された）。 読む人は枠ではなく隣の文字と見比べるので、そちらに揃えるのが正しい。 氏名ラベルの中央 11.38% ／ 発行ラベル 11.12% ／ 「第」 82.01% ★テンプレートを差し替えるときは測り直すこと（cardimage.js も同じ値）。 */ .membercard.back .mc2-name, .membercard.back .mc2-issued, .membercard.back .mc2-no { display: flex; align-items: center; color: var(--ink); font-family: var(--font-brand); white-space: nowrap; } .membercard.back .mc2-name { /* 罫線（15.75%）から1文字ぶん空ける。詰めて置くと窮屈に見える */ left: 19.6%; right: 33.5%; top: 6.93%; height: 8.58%; /* 字面の中央が 11.38%＝「氏名」の印字と揃うよう実測で補正 */ font-size: clamp(12px, 3.5vw, 23px); font-weight: 700; /* ★カード自身の文字は字間が広い（実測 0.42〜0.54em）。 詰まった字で入れると、そこだけ後から書き足したように浮く。 */ letter-spacing: .3em; overflow: hidden; } .membercard.back .mc2-issued { /* 「発行」の文字が73.75%まで、枠は96.25%まで。その真ん中に置く （右端に寄せると縁に張り付いて見えた） */ left: 73.75%; right: 3.75%; top: 6.83%; height: 8.58%; /* 中央 11.12%＝「発行」の印字に合わせる */ justify-content: center; font-size: clamp(8px, 2.2vw, 15px); letter-spacing: .08em; } .membercard.back .mc2-no { /* 「第」の右から。「号」は画像に無いので文字側で付ける */ left: 19.5%; right: 45%; top: 78.86%; height: 6.31%; /* 中央 82.01%＝「第」の印字に合わせる */ font-size: clamp(10px, 2.7vw, 18px); font-weight: 700; letter-spacing: .2em; } /* めくれることが分かるように、押せる見た目にしておく */ .membercard { cursor: pointer; } .membercard-flip-hint { margin-top: 10px; text-align: center; font-size: 12px; color: rgba(255,255,255,.62); } .membercard > div { position: absolute; color: #fff; font-family: var(--font-brand); line-height: 1.2; white-space: nowrap; } /* 氏名はラベルのすぐ下。長い名前でもはみ出さないよう幅を決めて縮める */ .mc-name { left: 43.4%; top: 53.5%; right: 6%; font-size: clamp(15px, 4.6vw, 30px); font-weight: 700; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; } .mc-name.mc-unset { color: var(--gold-soft); font-size: clamp(11px, 3vw, 18px); font-weight: 400; } .mc-no { left: 43.4%; top: 72.5%; font-size: clamp(13px, 3.6vw, 24px); font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; } .mc-since { left: 61.7%; top: 72.5%; font-size: clamp(11px, 2.9vw, 19px); color: var(--gold-soft); letter-spacing: .04em; } .membercard-clock { margin-top: 12px; text-align: center; color: var(--gold-soft); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .membercard-note { color: rgba(255,255,255,.72); margin: 12px 0 0; text-align: center; } .membercard-note b { color: #fff; } .membercard-certlist { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } .membercard-certbtn, .membercard-back { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.45); } .membercard-back { margin-top: 18px; width: 100%; } /* 画像として保存・共有するボタン。紺の背景に置くので枠線は明るく */ .membercard-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } .membercard-save { width: 100%; margin-top: 18px; } .membercard-actions .btn-outline, .membercard-save { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; } /* ---- 認定証（賞状） ---- */ .certificate { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.45); background: #fff; } .certificate-bg { display: block; width: 100%; height: auto; } .certificate > div { position: absolute; left: 12%; right: 12%; text-align: center; font-family: var(--font-brand); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 本文の行間（1.9）を継ぐと箱が縦に膨らみ、指定した位置より下に見える。 賞状は1行ずつ置いているので、行の高さは詰めておく。 */ line-height: 1.1; } /* 「認定証」と本文のあいだの空白に氏名を置く。 位置はautocratで出している実物に合わせている（金の罫線のすぐ上）。 */ .ct-name { top: 50%; font-size: clamp(20px, 6.4vw, 42px); font-weight: 700; letter-spacing: .12em; } /* 認定番号の枠は元のテンプレートに無いため、「認定証」の直下に小さく添える。 ★セレクタは .certificate > を付けること。付けないと上の 「.certificate > div { text-align: center }」に負けて指定が効かない。 */ .certificate > .ct-no { top: 42%; font-size: clamp(9px, 2.2vw, 14px); color: var(--gold-deep); letter-spacing: .1em; } /* 本文と署名のあいだ。賞状は日付を左に寄せるのが通例 */ /* 日付は本文の左端にそろえる（実物に合わせている） */ .certificate > .ct-date { top: 78.3%; text-align: left; left: 6%; font-size: clamp(10px, 2.6vw, 17px); letter-spacing: .04em; } /* 「殿」は氏名と同じ大きさ（実物に合わせる）。間だけ少し空ける */ .ct-name .ct-dono { margin-left: .25em; } @media (min-width: 768px) { .membercard-sheet { max-width: 620px; } } .benefit-card-btn { margin: 10px 0 4px; } /* 認定証の受け取り（暗証番号） */ .membercard-claim { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); } .membercard-claim .chip-search-input, .membercard-claim .text-input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; } .membercard-claim .text-input::placeholder { color: rgba(255,255,255,.45); } /* 暗証番号の結果。通知は消えてしまうので、ここには残しておく */ .cert-claim-msg { font-size: 13px; line-height: 1.7; margin-top: 10px; } .cert-claim-msg:empty { display: none; } .cert-claim-msg.ng { color: var(--error-light); font-weight: 600; } .cert-claim-msg.ok { color: var(--gold-soft); font-weight: 600; } /* まだ受けていない方への案内。紺の背景なので金で示す */ .membercard-examlink { display: inline-block; margin-top: 6px; color: var(--gold-soft); font-weight: 700; border-bottom: 1px solid var(--gold-deep); text-decoration: none; } /* 入会登録（ログイン画面内） */ .login-signup-form { margin-top: 8px; } .login-signup-form .field-label { margin-top: 14px; } .login-signup-form .field-note { margin: 4px 0 0; } .login-signup-form .btn { margin-top: 16px; } /* 支払いへ進む前の年齢確認。押せない状態が見た目でも分かるようにする */ .agegate { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 13px; line-height: 1.8; color: var(--ink); cursor: pointer; } .agegate input { margin-top: 5px; flex: 0 0 auto; width: 18px; height: 18px; } .agegate a { color: var(--gold-deep); } .agegate-btn[aria-disabled="true"] { opacity: .45; }