/* ============================================================================ DMMぱちタウン風の共通部品（2026-08-19 新規）正本 = docs/design_ref/DMM_DESIGN_TOKENS.md（値はコンセプト画像 02〜04 から） docs/design_ref/dmm_concept/*.png（見た目の原本） ■ 何のためかお客の画面を「黒帯ロゴ／黄の見出し帯／白カード／黒の下タブ」の同じ物差しで塗る。 ★数字・データは全部 DB の本物。写真に数字を焼き込まない。 ■ 使い方の中に（★body には .dm を付けない＝器の .dm と混ざる。実際に踏んだ） .dm（縦の器） → .dm-top（黒帯） → .dm-bar（黄帯） → .dm-body（中身・ここだけ動く） → .dm-tabs（下タブ）部品: .dm-btn / .dm-btn--dark / .dm-card / .dm-pill / .dm-row ■ 古い画面には効かない（.dm の中だけ）。台一覧・島図は既存の変数を上書きして塗る（末尾）。 ============================================================================ */ :root{ --dm-black:#000000; --dm-yellow:#FCD000; --dm-bg:#F4F4F4; --dm-card:#FFFFFF; --dm-line:#E5E5E5; --dm-ink:#111111; --dm-muted:#666666; --dm-red:#E5322D; --dm-green:#1E8E4A; --dm-blue:#1E6FD9; --dm-font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,-apple-system,sans-serif; --dm-r:16px; --dm-shadow:0 2px 10px rgba(0,0,0,.06); } body.dm-page{margin:0;background:var(--dm-bg);color:var(--dm-ink);font-family:var(--dm-font); -webkit-text-size-adjust:100%} body.dm-page *{box-sizing:border-box} body.dm-page a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} html:has(body.dm-page){background:var(--dm-black);height:100%;overflow:hidden;overscroll-behavior:none} html:has(body.dm-page) body{height:100%;overflow:hidden;overscroll-behavior:none} /* ── 器 ───────────────────────────────────────────────────────── */ .dm{display:flex;flex-direction:column;height:100dvh;height:100svh;overflow:hidden;background:var(--dm-bg); max-width:640px;margin:0 auto} /* 黒帯（ロゴ） */ .dm-top{flex:none;height:56px;background:var(--dm-black);display:flex;align-items:center;justify-content:center; padding-top:env(safe-area-inset-top,0px)} .dm-top .dmm-logo{font-size:17px} .dmm-logo--inv b{color:#fff} .dmm-logo--inv i{color:#fff;-webkit-text-stroke:.12em #000;text-shadow:none} /* 黄帯（見出し） */ .dm-bar{flex:none;height:56px;background:var(--dm-yellow);display:flex;align-items:center;gap:8px;padding:0 10px} .dm-bar__back{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center; border-radius:12px;color:var(--dm-ink)} .dm-bar__back:active{background:rgba(0,0,0,.08)} .dm-bar__back svg{width:22px;height:22px} .dm-bar__sp{width:44px;flex:none} .dm-bar__ttl{flex:1;min-width:0;text-align:center;font-size:18px;font-weight:900;letter-spacing:.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dm-bar__r{flex:none;font-size:13px;font-weight:800;white-space:nowrap} .dm-bar__pill{border-radius:999px;padding:6px 12px;background:var(--dm-green);color:#fff;font-size:13px;font-weight:800} .dm-bar__box{border:2px solid var(--dm-ink);border-radius:8px;padding:4px 10px;font-size:13px;font-weight:800} /* 中身（ここだけ動く） */ .dm-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; padding:12px 12px 16px} .dm-body::-webkit-scrollbar{width:0} /* 下タブ（黒） */ .dm-tabs{flex:none;background:var(--dm-black);display:flex; padding-bottom:env(safe-area-inset-bottom,0px)} .dm-tabs .dm-tab{flex:1;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em} .dm-tab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dm-tabs .dm-tab.on{color:var(--dm-yellow)} .dm-tabs .dm-tab .dot{position:absolute;margin-left:22px;margin-top:-6px;min-width:16px;height:16px;border-radius:8px; background:var(--dm-red);color:#fff;font-size:10px;font-weight:900;line-height:16px;text-align:center;padding:0 4px} .dm-tab{position:relative} /* ── 部品 ─────────────────────────────────────────────────────── */ .dm-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:0 18px; border-radius:12px;border:0;background:var(--dm-yellow);color:var(--dm-ink);font-size:18px;font-weight:900; font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative} .dm-btn:active{filter:brightness(.95);transform:scale(.99)} .dm-btn .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px} .dm-btn--dark{background:var(--dm-black);color:#fff;font-size:15px;min-height:48px} .dm-btn--sm{min-height:44px;font-size:15px} .dm-card{background:var(--dm-card);border:1px solid var(--dm-line);border-radius:var(--dm-r);box-shadow:var(--dm-shadow); overflow:hidden} .dm-card + .dm-card{margin-top:12px} .dm-card__pad{padding:14px 16px} .dm-h1{margin:0 0 4px;font-size:22px;font-weight:900;letter-spacing:.01em} /* 店の名前の横に出す絵（2026-08-26）。/img/dmm/hall_logo_<ホール番号>.webp を置いた店にだけ出る。置いていない店ではごと出ないので、見た目は変わらない。 ★h1 を flex にしない——名前が長い店で折り返し方が変わるため、文字の流れに乗せる（inline-block）だけにしてある。 */ .dm-h1__logo{display:inline-block;vertical-align:middle;width:44px;height:44px; object-fit:contain;margin:-4px 8px 0 0;flex:none} .dm-row{display:flex;align-items:center;gap:12px;min-height:56px;border-top:1px solid var(--dm-line);font-size:16px;font-weight:700} .dm-row:first-child{border-top:0} .dm-row__ic{width:40px;height:40px;flex:none;border-radius:50%;background:var(--dm-black);color:#fff; display:flex;align-items:center;justify-content:center} .dm-row__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dm-row__k{flex:1;color:var(--dm-ink)} .dm-row__v{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums} .dm-row__v small{font-size:13px;font-weight:700;color:var(--dm-muted);margin-left:2px} .dm-row__v.red{color:var(--dm-red)} .dm-row__v.green{color:var(--dm-green)} .dm-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800} .dm-pill--open{background:var(--dm-red);color:#fff;font-size:14px;padding:6px 14px} .dm-pill--wait{background:#8A8A8A;color:#fff;font-size:14px;padding:6px 14px} /* デモ稼働中（2026-08-29・docs/HALL_SIM_DESIGN.md §12）。 ★OPEN と張り合わせない。「書いてある」ことが目的で、目立たせることが目的ではない。 */ .dm-pill--demo{background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:5px 10px} .dm-pill--ok{background:#E6F5EE;color:var(--dm-green)} .dm-pill--ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dm-green)} .dm-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;font-size:14px;line-height:1.6;color:var(--dm-ink)} .dm-note .dm-row__ic{width:36px;height:36px} /* 写真は背景の1枚目、無地のグラデは2枚目（写真が読めない間はグラデが見える）。 ★::before で下地を敷くと、負の z-index が要素自身の背景より**上**に描かれて写真が隠れる（実際に踏んだ） */ /* ★2026-08-19 ユーザー指示: ホームは**店の外観**（DMM の建物）。ホール一覧の写真は**契約ホールごとの写真**が入る場所なので、店ごとの写真（/img/dmm/hall_.webp）があればそれ、無ければ店内の通路（仮）。halls.php が --hall-img で渡す */ /* 2026-08-20: 写真を押せるようにしたので a でも同じ箱になるよう display を明示。 div のときは既定と同じなので、これまでの見え方は変わらない */ .dm-photo{display:block;position:relative;width:100%;aspect-ratio:3/2;overflow:hidden; background:var(--hall-img, url(/img/dmm/home_hero.webp?v=20260819a)) center/cover no-repeat, linear-gradient(160deg,#1a1a1a,#3a3a3a 55%,#7a6a2a)} .dm-photo--hero{aspect-ratio:3/2;border-radius:var(--dm-r); background:url(/img/dmm/hall_default.webp?v=20260819a) center/cover no-repeat, linear-gradient(160deg,#1a1a1a,#3a3a3a 55%,#7a6a2a)} .dm-photo .dm-pill{position:absolute;left:14px;top:14px} /* フッター（規約など） */ .dm-foot{margin:16px 0 0;padding:14px 8px 8px;border-top:1px solid var(--dm-line); display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;font-size:12px;color:var(--dm-muted)} .dm-foot a{font-weight:700} .dm-foot small{width:100%;text-align:center;font-size:11px;margin-top:6px} /* ── ホーム ─────────────────────────────────────────────────── */ .dm-home .dm-hero{margin-bottom:12px} .dm-home .dm-cta{margin:0 0 12px} .dm-home .dm-notice{display:flex;align-items:center;gap:12px;padding:12px 14px} .dm-home .dm-notice__t{flex:1;min-width:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dm-home .dm-notice__d{flex:none;font-size:11px;color:var(--dm-muted);font-weight:700} .dm-home .dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} .dm-home .dm-tile{display:flex;align-items:center;gap:12px;padding:14px;background:var(--dm-card); border:1px solid var(--dm-line);border-radius:var(--dm-r);box-shadow:var(--dm-shadow);font-size:15px;font-weight:800;position:relative} .dm-home .dm-tile .dm-row__ic{background:var(--dm-yellow);color:var(--dm-ink)} .dm-home .dm-tile .dot{position:absolute;right:10px;top:10px;min-width:18px;height:18px;border-radius:9px; background:var(--dm-red);color:#fff;font-size:11px;font-weight:900;line-height:18px;text-align:center;padding:0 5px} /* 自動精算のお知らせ（ホームだけ） */ .dm-autoset{position:relative;margin:0 0 12px;padding:12px 34px 12px 14px;border-radius:12px;background:#111;color:#F6ECD8; font-size:12px;line-height:1.5} .dm-autoset__t{display:block;font-size:13px;font-weight:900;color:var(--dm-yellow);margin-bottom:3px} .dm-autoset em{font-style:normal;font-weight:900;color:var(--dm-yellow);white-space:nowrap} .dm-autoset__x{position:absolute;right:4px;top:4px;width:28px;height:28px;border:0;background:none;color:#fff;font-size:18px;cursor:pointer} /* ── 島図（body#floor）を DMM の色に ───────────────────────────── isles.html は .fl の器を持つ。器の色と部品の色だけ差し替える（描き方は変えない）。 */ body#floor.dm-page{--paper:var(--dm-bg);--card:var(--dm-card);--sunken:#EFEFEF;--line:var(--dm-line); --ink:var(--dm-ink);--muted:var(--dm-muted);--gold:var(--dm-yellow);--gold-ink:var(--dm-ink); --green:var(--dm-green);--red:var(--dm-red);--isle:#E8E8E8;--isle-line:#9A9A9A;font-family:var(--dm-font)} body#floor.dm-page .fl{height:auto;flex:1;min-height:0} body#floor.dm-page .fl-top{display:none} /* 黄帯（.dm-bar）が見出しになる */ body#floor.dm-page .fl-find__b{background:var(--dm-black);border-radius:10px} body#floor.dm-page .fl-isle{border-radius:8px} body#floor.dm-page .fl-isle__no{background:#fff;border-bottom:1px solid #9A9A9A;width:100%;padding:3px 0;font-size:10px;color:var(--dm-ink)} body#floor.dm-page .fl-isle__nm{font-size:16px;font-weight:900} body#floor.dm-page .fl-isle__free{border-radius:6px;padding:4px 0;font-size:11px} body#floor.dm-page .fl-isle.fl-kind-s20{background:#E8E8E8;border-color:#9A9A9A} /* 20スロは灰（コンセプト03） */ body#floor.dm-page .fl-legend__i.fl-kind-s20{background:#E8E8E8;border-color:#9A9A9A} body#floor.dm-page .fl-legend__i{font-size:12px;padding:5px 12px} body#floor.dm-page .fl-note{border-top:0;font-size:12px} body#floor.dm-page .fl-map{border-radius:12px;border-width:1.5px} /* ── 台一覧（body#index）を DMM の色に ──────────────────────────── seats css は変数で塗ってあるので、変数だけ差し替える。カードの並びは 2列（スマホ）。 */ body#index.dm-page{--paper:var(--dm-bg);--card:var(--dm-card);--busy:#FFF3F3;--sunken:#EFEFEF;--line:var(--dm-line); --ink:var(--dm-ink);--muted:var(--dm-muted);--gold:var(--dm-yellow);--gold-ink:var(--dm-ink); --green:var(--dm-green);--red:var(--dm-red);--shadow:var(--dm-shadow);font-family:var(--dm-font)} html:has(body#index.dm-page){background:var(--dm-black)} body#index.dm-page .sg{height:auto;flex:1;min-height:0;background:var(--dm-bg)} body#index.dm-page .sg-top{display:none} body#index.dm-page .sg-body{padding:12px} body#index.dm-page .am-card__head h3{font-size:18px;font-weight:900} /* ★seats.css は !important で塗っているので、ここも同じ強さで上書きする */ body#index.dm-page .am-stat .k{font-size:12px !important;color:var(--dm-ink) !important} body#index.dm-page .am-stat .v{font-size:22px !important;font-weight:900 !important} body#index.dm-page .am-stat--two .v{font-size:20px !important} body#index.dm-page .am-stat--two .am-sub{font-size:12px;font-weight:800;color:var(--dm-red)} body#index.dm-page .am-stat--two .am-sub + .v{color:var(--dm-red) !important} body#index.dm-page .am-stat--two .am-sub--gap{color:var(--dm-blue)} body#index.dm-page .am-stat--two .am-sub--gap + .v{color:var(--dm-blue) !important} body#index.dm-page .card-footer .btn{background:var(--dm-yellow);color:var(--dm-ink);font-weight:900;border-radius:10px;height:40px} body#index.dm-page .am-toggle{border-radius:10px;min-height:40px;font-weight:800} body#index.dm-page .am-card.is-target{outline:3px solid var(--dm-yellow);box-shadow:0 0 0 6px rgba(252,208,0,.35)} /* 島図と台一覧は横幅を使う（PCで4列・島が多い階）。ホームとホールは 640px に収める */ body#floor.dm-page .dm,body#index.dm-page .dm{max-width:none} /* ══ ホーム画面に追加したアプリ（PWA）のときだけ、下タブを上げる（2026-08-19・ユーザー報告）══ ■ 何が起きたか: iPhone で PWA にすると、下タブが画面の最下端（ホームバーの真上）に来て押しにくい。 ■ ブラウザ表示は今のままにする（これ以上上げると逆に押しにくい＝ユーザー指示）。 ■ 判定: display-mode:standalone（PWA）。iOS 旧版のために JS が html.pwa も付ける（inc_dmm_tabs.html）。 viewport-fit=cover は付けていないので env(safe-area-inset-bottom) は 0 のことがある → 実寸で 22px 上げる。 */ @media (display-mode: standalone){ .dm-tabs{padding-bottom:max(env(safe-area-inset-bottom,0px),22px)} } html.pwa .dm-tabs{padding-bottom:max(env(safe-area-inset-bottom,0px),22px)} /* ══ 情報まわりの画面（お知らせ／マイページ／フレンド／設定など body.v3info）を DMM の色に ══ aamuse_v3_info.css は変数で塗ってあるので、変数だけ差し替える。上のバー（.v3-top）は黒帯＋黄帯（.dm-top / .dm-bar）に置き換えるので隠す。 */ body.v3info.dm-page{--paper:var(--dm-bg);--card:var(--dm-card);--sunken:#EFEFEF;--line:var(--dm-line); --ink:var(--dm-ink);--muted:var(--dm-muted);--gold:var(--dm-yellow);--gold-ink:var(--dm-ink);--gold-bg:#FFF6CC; --sky:#EEF3F8;--blue:var(--dm-blue);--green:var(--dm-green);--red:var(--dm-red);--shadow:var(--dm-shadow); font-family:var(--dm-font)} html:has(body.v3info.dm-page){background:var(--dm-black)} body.v3info.dm-page .v3{height:auto;flex:1;min-height:0} body.v3info.dm-page .v3-top{display:none} body.v3info.dm-page .v3-body{padding:12px} body.v3info.dm-page .dm{max-width:none} /* マイページの残高カードなど、金色の面は黄に */ body.v3info.dm-page .v3-bal--a{background:#FFF6CC} /* ══ チャット（body#chat）を DMM の色に ══════════════════════════════════ chat.html の