/* ============================================================================
   A-amuse 新デザイン（2026-09-12 新規）── 外注から上がってきた意匠に塗り替える

   正本 = A-amuse新デザイン/*.png（外注の納品・13枚）
          ⚠ 納品は**画像だけ**。ロゴ・背景・バナーの元データ（PSD/AI・書き出し）は無い。
            ⇒ ロゴと世界地図は**納品画像から切り出して**使っている（少し甘い）。
              元データが届いたら /img/v4/ の2枚を差し替えるだけでよい。

   ■ Satoru 指示（2026-09-12）
     「今のDMMのデザインを全て変更してください。切替デザインは必要なし。」
     「07_遊技画面_PC は作成しましたが、スマホは必要ないです（今のままで良い）。」

   ■ ★どう作ってあるか（この現場の作法に合わせた）
     1. **1枚足すだけ。既存のCSSは1行も書き換えていない。**
        ⇒ ⭕ **戻し方は1行**: inc_head_v2.html のこの link を消す。
     2. ★**すべてのセレクタを `html` から始める。**
        画面によっては後ろで自前CSSを読むため（aamuse_pc.css の注記と同じ理由）。
     3. 既存の画面は **CSS変数で塗られている**（--paper/--card/--ink/--gold…）。
        ⇒ 島図・台一覧・情報画面は**変数を差し替えるだけ**で新しい色になる。
        ⇒ 器（.dm-*）と認証画面（.v2-*）だけ、意匠を足して寄せる。
     4. ⛔ **切替は作らない**（Satoru 指示）。誰が見ても新しい意匠になる。

   ■ ⛔ ここで **やっていない** こと（正直に書いておく）
     ・遊技画面（07）… 台の中は機種側の持ち物。器の帯だけ色を合わせる。
     ・スマホの遊技画面 … Satoru 指示で**今のまま**。ここでは1pxも触らない。
     ・ホーム右の「お知らせ一覧」「バナー2枚」「ランキング上位3件」…
       **HTMLに枠が無い**ので色だけでは出せない。→ docs/DESIGN_V4_20260912.md §3
   ============================================================================ */

html:root{
  /* ── 新しい物差し（値は納品画像から拾った） ───────────────────── */
  --am-bg0:#120A08;          /* いちばん奥（黒に近い焦げ茶） */
  --am-bg1:#1C100C;          /* パネルの下地 */
  --am-ink:#F6E9D2;          /* 暗い面の上の文字（生成り） */
  --am-ink-dim:#C7B294;
  --am-paper:#F1E3C6;        /* 羊皮紙の札 */
  --am-paper2:#DECBA3;
  --am-paper-ink:#3B2413;    /* 羊皮紙の上の文字（焦げ茶） */
  --am-gold:#D9B063;
  --am-gold-hi:#F7E4B0;
  --am-gold-dk:#8A6A22;
  --am-red:#C0161C;
  --am-red-dk:#6E0A0E;
  --am-green:#35A55F;
  --am-r:12px;
  /* 金の二重枠（この意匠の要）。border と box-shadow で作る＝画像が要らない */
  --am-frame:0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,225,170,.35);
}

/* ⭐⭐⭐ いちばん効くのはここ ── **DMM の物差しそのものを塗り替える**。
   既存のCSSは全部この6〜10個の変数で描いてある（黄＝--dm-yellow、白いカード＝--dm-card…）。
   ⇒ **変数を差し替えるだけで、触っていない画面まで新しい意匠になる。**
   ⛔ `:root` に書いてあるので、勝つために `html:root` にしてある（同じ要素・1つ強い）。 */
html:root{
  --dm-yellow:#D9B063;        /* 黄 → 金 */
  --dm-black:#120A08;         /* 黒 → 黒に近い焦げ茶 */
  --dm-bg:#120A08;            /* 画面の下地（明るい灰 → 暗い） */
  --dm-card:#1B100D;          /* 白いカード → 暗い箱 */
  --dm-line:rgba(217,176,99,.28);
  --dm-ink:#F6E9D2;           /* 文字（黒 → 生成り） */
  --dm-muted:#C7B294;
  --dm-red:#C0161C;
  --dm-green:#35A55F;
  --dm-blue:#7FB3F0;
  --dm-shadow:0 4px 16px rgba(0,0,0,.5);
}

/* ══ 1. 器（.dm-* ＝ ホーム／ホール／島／台一覧／チャット）═══════════════ */

html body.dm-page{ background:var(--am-bg0); color:var(--am-ink); }
html:has(body.dm-page){ background:var(--am-bg0); }
/* ⛔ 島の中のページ（index2.php）だけ、古い紫デザイン（aamuse_v2_list.css の
     `body#index{background:#5E2CA6!important}`）が残り、iPhone のアプリで**下タブの下が紫**になっていた
     （2026-09-17 Satoru 報告）。上の1行は !important が無く負けるので、このページだけ強く上書きする。 */
html body#index.dm-page{ background:var(--am-bg0) !important; }

/* 下地。★写真ではなく光で作る＝どの画面幅でもぼやけない
   （外注の背景写真が届いたら、ここに1行足すだけで差し替えられる） */
html body.dm-page .dm{
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(196,60,30,.30) 0%, rgba(120,20,12,.10) 45%, rgba(0,0,0,0) 70%),
    radial-gradient(90% 50% at 50% 110%, rgba(150,40,20,.18) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#170C09 0%, var(--am-bg0) 45%, #0D0705 100%);
}
html body.dm-page .dm-body{ background:transparent; }

/* 上の黒帯 → 金の線のついた看板 */
html body.dm-page .dm-top{
  background:linear-gradient(180deg,#20120E,#120A08);
  border-bottom:1px solid var(--am-gold-dk);
  box-shadow:0 2px 12px rgba(0,0,0,.6);
}
/* 見出し帯（黄）→ 金枠の暗い札 */
html body.dm-page .dm-bar{
  background:linear-gradient(180deg,#2A1610,#180D0A);
  border-bottom:1px solid var(--am-gold-dk);
  box-shadow:inset 0 -1px 0 rgba(255,225,170,.18);
}
html body.dm-page .dm-bar__ttl{
  color:var(--am-gold-hi);
  text-shadow:0 1px 0 #000, 0 0 12px rgba(217,176,99,.35);
  letter-spacing:.08em;
}
html body.dm-page .dm-bar__back{ color:var(--am-gold-hi); }
html body.dm-page .dm-bar__back:active{ background:rgba(255,225,170,.14); }
html body.dm-page .dm-bar__box{ border-color:var(--am-gold); color:var(--am-gold-hi); }

/* 下タブ → 金の線・点灯は金 */
html body.dm-page .dm-tabs{
  background:linear-gradient(180deg,#1A0E0B,#0C0605);
  border-top:1px solid var(--am-gold-dk);
  box-shadow:0 -2px 14px rgba(0,0,0,.6);
}
html body.dm-page .dm-tabs .dm-tab{ color:var(--am-ink-dim); }
html body.dm-page .dm-tabs .dm-tab.on{
  color:var(--am-gold-hi);
  text-shadow:0 0 10px rgba(217,176,99,.5);
}

/* ── 押すもの ────────────────────────────────────────────── */
/* 主役のボタン（ホールをえらぶ・遊技する…）＝ 赤い札＋金の枠 */
html body.dm-page .dm-btn{
  background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 45%, var(--am-red-dk) 100%);
  color:#FFF3DA;
  border:2px solid var(--am-gold);
  border-radius:10px;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  box-shadow:var(--am-frame), 0 3px 0 rgba(0,0,0,.45), 0 6px 18px rgba(180,40,20,.25);
}
html body.dm-page .dm-btn:active{ filter:brightness(.94); transform:translateY(1px); }
html body.dm-page .dm-btn .chev{ color:#FFE6B5; }
/* 副のボタン（黒）＝ 暗い札＋金の細枠 */
html body.dm-page .dm-btn--dark{
  background:linear-gradient(180deg,#241512,#150C0A);
  color:var(--am-gold-hi);
  border:1px solid var(--am-gold-dk);
  box-shadow:var(--am-frame);
}

/* ── 面（カード・タイル）────────────────────────────────────
   ★外注の意匠は2種類しか使っていない: 「羊皮紙の札」と「暗い金枠の箱」。
     ⇒ タイルは羊皮紙、一覧・データは暗い箱、に振り分ける。 */
html body.dm-page .dm-card{
  background:linear-gradient(180deg,#1E1210,#150C0A);
  border:1px solid var(--am-gold-dk);
  border-radius:var(--am-r);
  box-shadow:var(--am-frame), 0 4px 16px rgba(0,0,0,.45);
  color:var(--am-ink);
}
html body.dm-page .dm-card__pad{ color:var(--am-ink); }
html body.dm-page .dm-h1{ color:var(--am-gold-hi); text-shadow:0 1px 0 #000; }
html body.dm-page .dm-h2{ color:var(--am-gold-hi); }
html body.dm-page .dm-row{ border-top-color:rgba(217,176,99,.22); }
html body.dm-page .dm-row__k{ color:var(--am-ink); }
html body.dm-page .dm-row__v{ color:var(--am-gold-hi); }
html body.dm-page .dm-row__v small{ color:var(--am-ink-dim); }
html body.dm-page .dm-row__v.red{ color:#FF6B63; }
html body.dm-page .dm-row__v.green{ color:#57D98A; }
html body.dm-page .dm-row__ic{
  background:radial-gradient(circle at 50% 35%, #D4262B, var(--am-red-dk));
  color:#FFE9C4;
  border:2px solid var(--am-gold);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
html body.dm-page .dm-lead,
html body.dm-page .dm-mini,
html body.dm-page .dm-note{ color:var(--am-ink); }
html body.dm-page .dm-foot{
  border-top:1px solid rgba(217,176,99,.3);
  color:var(--am-ink-dim);
}
html body.dm-page .dm-foot a{ color:var(--am-ink); }

/* タイル（マイホール／イベント情報／…）＝ 羊皮紙 */
html body.dm-page .dm-tile,
html body.dm-home .dm-tile{
  background:linear-gradient(180deg,var(--am-paper) 0%, var(--am-paper2) 100%);
  color:var(--am-paper-ink);
  border:2px solid var(--am-gold);
  border-radius:10px;
  box-shadow:var(--am-frame), 0 3px 12px rgba(0,0,0,.45);
}
html body.dm-home .dm-tile .dm-row__ic{
  background:radial-gradient(circle at 50% 35%, #C4262B, #6E0A0E);
  color:#FFE9C4; border:2px solid var(--am-gold-dk);
}
html body.dm-page .dm-tile .dot{ border:1px solid rgba(0,0,0,.4); }

/* お知らせの1行（ホーム） */
html body.dm-home .dm-notice__t{ color:var(--am-ink); }
html body.dm-home .dm-notice__d{ color:var(--am-gold); }

/* 写真の枠。★写真そのものは触らない（店ごとの写真が入る場所） */
html body.dm-page .dm-photo,
html body.dm-page .dm-photo--hero{
  border:2px solid var(--am-gold);
  border-radius:10px;
  box-shadow:var(--am-frame), 0 6px 20px rgba(0,0,0,.5);
}

/* 印（OPEN / 空き / デモ） */
html body.dm-page .dm-pill--open{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  border:1px solid var(--am-gold); color:#FFF0D6;
}
html body.dm-page .dm-pill--ok{ background:rgba(53,165,95,.18); color:#6FE49B; }
html body.dm-page .dm-pill--ok::before{ background:#6FE49B; }
html body.dm-page .dm-pill--wait{ background:#3A2A26; color:var(--am-ink-dim); }
html body.dm-page .dm-pill--demo{ background:rgba(0,0,0,.6); color:#E9D6AE; border:1px solid rgba(217,176,99,.5); }
/* ⛔ 一覧（halls.php）の写真では「OPEN／営業時間外」と「デモ稼働中」が**同じ left/top**（dmm_ui.css）で
     重なり、字が潰れていた（2026-09-13 Satoru の画面で発見）。⇒ デモは**1段下**に置く。
     ★横に並べない——札の幅が言語で変わるので、横ずらしは言語によって重なる。 */
html body.dm-page .dm-photo .dm-pill--demo{ top:54px; }

/* 検索・絞り込み・区分けボタン */
html body.dm-page .dm-search__i,
html body.dm-page .dm-search__sel,
html body.dm-page .dm-find__q{
  background:#120A08; color:var(--am-ink);
  border:1px solid var(--am-gold-dk); border-radius:8px;
}
/* ⛔ `.dm-find__pref` は検索欄ではなく**一覧の店名の下の都道府県の文字**（halls.html）。
     上の入力欄の見た目に混ざっていて、横長の枠に入って入力欄のように見えていた
     （2026-09-13 Satoru 指摘）。⇒ 画面④の都道府県（.v4-hh__pref）と同じ文字の見た目にした。 */
html body.dm-page .dm-find__pref{ margin:-2px 0 8px; font-size:12.5px; font-weight:800; color:var(--am-gold-hi); }
html body.dm-page .dm-search__b,
html body.dm-page .dm-find__b{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  color:#FFF0D6; border:1px solid var(--am-gold);
}
html body.dm-page .dm-seg{ background:#150C0A; border:1px solid var(--am-gold-dk); border-radius:10px; }
html body.dm-page .dm-seg__b{ color:var(--am-ink-dim); }
html body.dm-page .dm-seg__b.on{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  color:#FFF0D6; border-radius:8px;
}

/* 店からの一言・イベント */
html body.dm-page .dm-hint,
html body.dm-page .dm-ev{ color:var(--am-ink); }
html body.dm-page .dm-hint__h,
html body.dm-page .dm-ev__hd{ color:var(--am-gold-hi); }
html body.dm-page .dm-autoset{ background:#1A0F0C; border:1px solid var(--am-gold-dk); }
html body.dm-page .dm-autoset__t,
html body.dm-page .dm-autoset em{ color:var(--am-gold-hi); }

/* ══ 2. 変数で塗られている画面（島図・台一覧・情報）═══════════════════
   ⭐ ここが効率のいちばん良いところ。**色の名前を差し替えるだけ**で
     台カード・島図・マイページが新しい意匠になる（描き方は1行も変えない）。 */
html body#floor.dm-page,
html body#index.dm-page,
html body.v3info.dm-page{
  --paper:var(--am-bg0);
  --card:#1B100D;
  --sunken:#150C0A;
  --busy:#2A1210;
  --line:rgba(217,176,99,.28);
  --ink:var(--am-ink);
  --muted:var(--am-ink-dim);
  --gold:var(--am-gold);
  --gold-ink:#2A1608;
  --gold-bg:rgba(217,176,99,.14);
  --sky:#171014;
  --blue:#7FB3F0;
  --green:#57D98A;
  --red:#FF6B63;
  --isle:#241410;
  --isle-line:var(--am-gold-dk);
  --shadow:0 4px 16px rgba(0,0,0,.5);
}
html:has(body#index.dm-page),
html:has(body#floor.dm-page),
html:has(body.v3info.dm-page){ background:var(--am-bg0); }
html body#index.dm-page .sg,
html body#floor.dm-page .fl{ background:transparent; }

/* 台カードの数字（seats.css は !important なので同じ強さで） */
html body#index.dm-page .am-stat .k{ color:var(--am-ink-dim) !important; }
html body#index.dm-page .am-stat .v{ color:var(--am-gold-hi) !important; }
html body#index.dm-page .card-footer .btn{
  background:linear-gradient(180deg,#F0CF6A 0%, #D9A93A 100%);
  color:#2A1608;
  border:1px solid var(--am-gold-dk);
}
html body#index.dm-page .am-card.is-target{
  outline:3px solid var(--am-gold);
  box-shadow:0 0 0 6px rgba(217,176,99,.28);
}
html body#floor.dm-page .fl-isle.fl-kind-s20,
html body#floor.dm-page .fl-legend__i.fl-kind-s20{ background:#241410; border-color:var(--am-gold-dk); }

/* ══ 3. 認証まわりの画面（.v2-auth ＝ ログイン・登録・再設定ほか9枚）═══════
   ⭐⭐ ここは**元が黒と金**で、DMM 化のときに「白い幕」をかけて明るくしてあった
     （dmm_ui.css の `.v2-auth::before`）。⇒ **幕を暗く戻すだけ**で意匠の土台が戻る。
     ★背景の店内写真（/img/dmm/login_bg.webp）はそのまま使える。外注の意匠と同じ絵柄。 */
html .v2-auth::before{
  background:linear-gradient(180deg, rgba(12,6,4,.86), rgba(20,9,6,.62) 40%, rgba(8,4,3,.90));
}
html .v2-stage{ background:var(--am-bg0); }

/* 看板（ロゴ）。
   ⛔ 元の v2 は「文字を画面外へ押し出して絵に差し替える」形だったが、
      DMM 化のときに**文字ロゴへ戻されていた**（白い角丸の箱）。
      ⇒ 絵に戻すには、隠す指定も一緒に書き直す必要がある（実物で気づいた）。
   ★文字は消さずに隠す（読み上げと検索には「DMMぱちタウン」が残る）。 */
html .v2-auth__brand b{
  width:300px; height:92px; margin:0 auto;
  background:url(/img/v4/logo_amuse.webp?v=20260912a) no-repeat center/contain;
  border:0; border-radius:0; box-shadow:none; padding:0;
  color:transparent; text-indent:-999em; overflow:hidden; white-space:nowrap;
  text-shadow:none; -webkit-text-stroke:0;
}
/* ⛔⛔ DMM の文字ロゴは **::before と ::after で描いてある**（aamuse_v3_shell.css）。
     ⇒ 箱を消しただけでは文字が残る。**中身の2つも消す**（実物で1回外した）。 */
html .v2-auth__brand b::before,
html .v2-auth__brand b::after{ content:none; display:none; }
html .v2-auth__brand span{ color:#E2CDA4; }

/* 見出しの帯は出さない（外注の意匠では、見出しは札の中にある） */
html .v2-auth .v2-title{ background:transparent; }

/* 下に並ぶ入口の中の字も、札の色に合わせる（子に色が付いていることがある） */
html .v2-auth .v2-menu a,
html .v2-auth .v2-menu a *{ color:var(--am-ink); }

/* 言語タブ（画面のいちばん上）。★色はここで作らず、金の物差しを使う */
html .v2-langtop .v2-lang a{
  background:rgba(18,10,8,.72);
  border:1px solid var(--am-gold-dk);
  color:#E2CDA4; border-radius:6px; padding:6px 12px; font-size:12px;
}
html .v2-langtop .v2-lang[data-lang=ja] a[data-l=ja],
html .v2-langtop .v2-lang[data-lang=en] a[data-l=en],
html .v2-langtop .v2-lang[data-lang=ko] a[data-l=ko],
html .v2-langtop .v2-lang[data-lang=tw] a[data-l=tw],
html .v2-langtop .v2-lang[data-lang=cn] a[data-l=cn]{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  border-color:var(--am-gold); color:#FFF0D6;
}

/* 見出し（ログイン／新規会員登録…） */
html .v2-auth .v2-title h1{
  color:var(--am-gold-hi);
  text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 22px rgba(255,180,60,.30);
}

/* 入力の札＝羊皮紙。⛔ .v2-auth（外側）ではなく **.v2-form だけ**に掛ける
   （外側に掛けると、看板と言語タブまで札の中に入ってしまう。実物で確かめた） */
html .v2-auth .v2-form{
  background:linear-gradient(180deg,var(--am-paper) 0%, var(--am-paper2) 100%);
  color:var(--am-paper-ink);
  border:2px solid var(--am-gold);
  border-radius:14px;
  padding:16px 16px 18px;
  box-shadow:var(--am-frame), 0 10px 30px rgba(0,0,0,.6);
}
/* 札の中の字は焦げ茶に戻す（dmm_ui は白い幕の上の色にしてある） */
html .v2-auth .v2-form .v2-label,
html .v2-auth .v2-form .v2-check,
html .v2-auth .v2-form .v2-check span{ color:var(--am-paper-ink); }
html .v2-auth .v2-form .v2-hint{ color:#6B4A2A; }
html .v2-auth .v2-form .v2-input,
html .v2-auth .v2-form .v2-select,
html .v2-auth .v2-form .v2-textarea{
  background:#FCF6E8;
  border:1px solid #B99B63;
  border-radius:8px;
  color:#241407;
  box-shadow:0 0 0 1000px #FCF6E8 inset;
  -webkit-text-fill-color:#241407;
}

/* 主役のボタン＝赤い札＋金の枠。★dmm_ui が .v2-btn:not(.v2-btn--sub) で塗っているので、
   こちらも同じ形で指す（同じ強さ＋html で勝つ） */
html .v2-btn:not(.v2-btn--sub){
  background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 45%, var(--am-red-dk) 100%);
  color:#FFF3DA;
  border:2px solid var(--am-gold);
  border-radius:10px;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  box-shadow:var(--am-frame), 0 3px 0 rgba(0,0,0,.4);
}
html .v2-btn--sub{
  background:linear-gradient(180deg,#241512,#150C0A);
  color:var(--am-gold-hi);
  border:1px solid var(--am-gold-dk);
  border-radius:10px;
}
html .v2-google{ background:#fff; color:#1F1F1F; border:1px solid #B99B63; border-radius:10px; }
html .v2-or{ color:#E2CDA4; }

/* 下に並ぶ入口（パスワードをお忘れの方／新規会員登録）＝暗い札 */
html .v2-auth .v2-menu a{
  background:linear-gradient(180deg,#1E1210,#140C09);
  color:var(--am-ink);
  border:1px solid var(--am-gold-dk);
  border-radius:10px;
  box-shadow:none;
}
html .v2-auth .v2-lead,
html .v2-auth .v2-foot a,
html .v2-auth .v2-foot small{ color:#CDB894; }
html .v2-alert{
  background:rgba(192,22,28,.18);
  border:1px solid var(--am-red);
  color:#FFD9CE;
  border-radius:10px;
}
/* 横の広告枠（PCだけ出る） */
html .v2-side .v2-bnr{
  background:linear-gradient(180deg,#1B100D,#120A08);
  border:1px solid var(--am-gold-dk); color:var(--am-ink-dim);
}

/* ══ 5. ロゴと主役の絵 ══════════════════════════════════════════════
   ⚠ 画像は本番の /img/v4/ に置く。⛔ 無ければ**枠だけ**になるので、
     CSS を配る前に画像を置くこと（順番を逆にすると数分だけロゴが消える）。 */

/* 上の帯のロゴ。★HTMLは触らず、文字ロゴの下に看板の絵を足す */
html body.dm-page .dm-top .dmm-logo{
  flex-direction:row; align-items:center; gap:0;
  color:var(--am-ink);
}
/* ⛔ 文字のロゴ（DMM／ぱちタウン）は**消さずに隠す**。
     消すと、絵が読めない端末で名前が1つも出なくなる。
     ⇒ 画面には出さず、読み上げと検索には残す書き方にしてある。 */
html body.dm-page .dm-top .dmm-logo b,
html body.dm-page .dm-top .dmm-logo i{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
html body.dm-page .dm-top .dmm-logo::after{
  content:""; display:block; width:168px; height:44px;
  background:url(/img/v4/logo_amuse.webp?v=20260912a) left center/contain no-repeat;
}

/* ホームの主役の絵 → 世界地図（外注の意匠）。
   ⚠ ここだけは **ホームの hero** に限る。ホール一覧の写真は店ごとの写真なので触らない。 */
html body.dm-home .dm-hero{
  background:url(/img/v4/hero_world.webp?v=20260913c) center/cover no-repeat, #140A08;
  aspect-ratio:2078/757;   /* ★2026-09-13: Satoru から届いた新しいトップ画（2078×757）の比。
                              ⛔ ここが絵と食い違うと、上に重ねた札の位置が全部ずれる（実際にずれた） */
}

/* ══ 6. PC（1024px〜）の左ナビと上の帯 ════════════════════════════════
   ★aamuse_pc.css が下タブを左の縦ナビに移している。その見た目だけ合わせる。 */
@media (min-width:1024px){
  html body.dm-page .dm-tabs{
    background:linear-gradient(180deg,#1A0E0B 0%, #100907 100%);
    border-right:1px solid var(--am-gold-dk);
    border-top:0;
  }
  html body.dm-page .dm-tabs .dm-tab.on{
    background:linear-gradient(90deg, rgba(192,22,28,.35), rgba(192,22,28,.06));
    box-shadow:inset 3px 0 0 var(--am-gold);
  }
  html body.dm-page .dm-top .dmm-logo::after{ width:200px; height:52px; }
}

/* ⛔ 羊皮紙の札の**中の字**は、暗い面むけの色のままだった（本番の実物で気づいた）。
     ⇒ 札の中だけ、焦げ茶に戻す。★字を1つずつ指すのではなく「札の中の子」でまとめて指す。 */
html body.dm-page .dm-tile .dm-wide__t,
html body.dm-page .dm-tile .dm-wide__s,
html body.dm-page .dm-tile .dm-wide__v,
html body.dm-page .dm-tile .dm-wide__b,
html body.dm-page .dm-tile .dm-row__k,
html body.dm-page .dm-tile .dm-row__v{ color:var(--am-paper-ink); }
html body.dm-page .dm-tile .dm-wide__v{
  background:linear-gradient(180deg,#F0CF6A,#D9A93A);
  color:#2A1608; border-radius:999px;
}

/* PC では、店内の写真を画面いっぱいに敷く（外注の意匠は全面）。
   ⛔ 写真そのもの（.v2-bg__img）は柱の中にあるので動かさない——
     動かすと、この写真を使っている他の画面まで変わる。ここでは**下地に同じ絵を敷く**。 */
@media (min-width:1024px){
  html .v2-stage:has(.v2-auth){
    background:url(/img/dmm/login_bg.webp) center/cover no-repeat, var(--am-bg0);
  }
}

/* ══ 7. 白のまま残っていた部品（実物を撮って見つけた）════════════════════
   ⛔ dmm_ui.css には **色を変数にせず #fff / #E5E5E5 と直に書いた部品**がいくつかある。
      変数を塗り替えただけでは、そこだけ白いまま残り、**生成りの字が白地に乗って読めなくなる**。
   ★見つけ方: 本番の実物を撮って、目で見た。⭐ 変数の一覧を眺めても出てこない。 */
html body.dm-page .dm-tog{
  background:linear-gradient(180deg,#241512,#150C0A);
  color:var(--am-ink);
  border:1.5px solid var(--am-gold-dk);
}
html body.dm-page .dm-tog.is-on{
  background:linear-gradient(180deg,#F0CF6A,#D9A93A);
  color:#2A1608; border-color:var(--am-gold);
}
html body.dm-page .dm-seg{ background:#150C0A; border:1px solid var(--am-gold-dk); }
html body.dm-page .dm-seg__b{ color:var(--am-ink-dim); }
html body.dm-page .dm-seg__b.is-on{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  color:#FFF0D6; box-shadow:none;
}
html body.dm-page .dm-ev__st{ background:#241410; color:var(--am-ink-dim); }
html body.dm-page .dm-ev__st.is-live{ background:rgba(53,165,95,.18); color:#6FE49B; }
html body.dm-page .dm-pill{ background:rgba(217,176,99,.16); color:var(--am-ink); }
html body.dm-page .dm-home .dm-tile--wide .chev{ color:var(--am-paper-ink); }
/* 店の都道府県など、薄い枠の1行 */
html body.dm-page .dm-card .dm-row--pad{ color:var(--am-ink); }

/* ══ 8. 島図（body#floor）── **パステルの札の上の字**════════════════════
   ⛔ 島の色（4パチ＝桃／1パチ＝黄／20スロ＝紫／5スロ＝緑）は**意味のある色**なので変えない。
      ⇒ 変えるのは**その上の字**。変数 --ink を生成りにしたので、
        パステルの上で白っぽくなり**読めなくなっていた**（実物を撮って見つけた）。
   ⭐ 「色を1つ変えると、離れたところの字が読めなくなる」——器の作り替えでいちばん多い事故。 */
html body#floor.dm-page .fl-isle,
html body#floor.dm-page .fl-isle *,
html body#floor.dm-page .fl-legend__i{ color:#2A1608; }
html body#floor.dm-page .fl-isle__no{
  background:rgba(255,255,255,.78); color:#2A1608; border-bottom-color:#9A8253;
}
html body#floor.dm-page .fl-isle__free{ color:#14331F; }
html body#floor.dm-page .fl-isle--full .fl-isle__free{ background:#E0564F; color:#2A0A08; }
html body#floor.dm-page .fl-isle--soon .fl-isle__free{ background:#BFB2A0; color:#2A1608; }
/* 階のボタン（1F・2F…） */
html body#floor.dm-page .fl-floor{
  background:linear-gradient(180deg,#241512,#150C0A);
  color:var(--am-ink); border-color:var(--am-gold-dk);
}
html body#floor.dm-page .fl-floor.is-on{
  background:linear-gradient(180deg,#F0CF6A,#D9A93A);
  color:#2A1608; border-color:var(--am-gold);
}

/* ══ 9. 台カードの出玉グラフ・ボタン（body#index）════════════════════════
   ⛔ グラフの下地は `#FAFAFA` と直に書いてある（変数ではない）⇒ 暗い画面に白い箱が残る。
   ★線の色（緑＝プラス／赤＝マイナス）は**意味のある色**なので変えない。下地だけ暗くする。 */
html body#index.dm-page .am-slump{
  background:#150C0A; border:1px solid var(--am-gold-dk);
}
html body#index.dm-page .mg-zero{ stroke:rgba(217,176,99,.45); }
html body#index.dm-page .mg-none{ fill:var(--am-ink-dim); }
html .mg-modal__box{ background:#1B100D; color:var(--am-ink); }
html .mg-body .mg-svg{ background:#150C0A; border-color:var(--am-gold-dk); }
html .mg-tab.is-on{ background:linear-gradient(180deg,#F0CF6A,#D9A93A); color:#2A1608; }
/* 「プレイする」＝ 金の札に焦げ茶の字。★seats.css が !important なので同じ強さで */
html body#index.dm-page .card-footer .btn{
  background:linear-gradient(180deg,#F0CF6A,#D9A93A) !important;
  color:#2A1608 !important;
  border:1px solid var(--am-gold-dk);
}
html body#index.dm-page .card-footer .btn[disabled],
html body#index.dm-page .card-footer .btn.is-busy{
  background:linear-gradient(180deg,#2A1A16,#1A100D) !important;
  color:var(--am-ink-dim) !important;
}

/* ══ 10. ⭐⭐⭐ 背景を、外注の意匠の写真そのものにする（2026-09-12 15:4x）═══════
   ⛔ **Satoru 指摘「背景のデザインが外注先と全然違います」。**
      はじめは「光（グラデーション）で作る」ことにしていた——どの画面幅でもぼやけないから。
      ⇒ ⛔ **それは技術の都合で、意匠ではない。**外注の絵は「暖色の店内」そのものが主役。
   ⭕ 納品画像（01_ログイン_PC.png）から**店内だけ**を取り出して敷く
     （中央の入力札・上の看板・下の帯を外し、左右をつないである）。
   ⚠ 元データ（背景写真そのもの）が外注から届いたら、この1枚を差し替えるだけでよい。 */
html body.dm-page .dm{
  background:
    linear-gradient(180deg, rgba(10,5,4,.86) 0%, rgba(14,7,5,.72) 35%, rgba(8,4,3,.92) 100%),
    url(/img/v4/bg_hall.webp?v=20260912a) center top/cover no-repeat fixed,
    var(--am-bg0);
}
/* 認証まわり（ログイン・登録…）も同じ店内に。
   ⛔ 既存の写真（/img/dmm/login_bg.webp）は**暗くて現代的な店内**で、外注の絵と別物だった。 */
html .v2-app.is-home .v2-bg__img{
  background-image:url(/img/v4/bg_hall.webp?v=20260912a);
  background-position:center top;
  background-size:cover;
  animation:none; transform:none;
}
@media (min-width:1024px){
  html .v2-stage:has(.v2-auth){
    background:url(/img/v4/bg_hall.webp?v=20260912a) center top/cover no-repeat, var(--am-bg0);
  }
}

/* ⛔ 真ん中の柱だけが暗く見えた（実物で気づいた）。
     `.v2-app` にも幕を掛けていたので、**幕が2枚重なっていた**。
   ⇒ 認証画面では柱の幕をやめ、全面の幕（.v2-auth::before）1枚にそろえる。 */
html .v2-app:has(.v2-auth){ background:transparent; }
html .v2-auth::before{
  background:linear-gradient(180deg, rgba(12,6,4,.72), rgba(20,9,6,.52) 40%, rgba(8,4,3,.82));
}

/* ══════════════════════════════════════════════════════════════════════
   画面① ログイン（2026-09-12・外注の意匠どおりに作り直し）
   正本 = A-amuse新デザイン/01_ログイン_PC.png ・ 01_ログイン_SP.png
   ⛔ ここから下は「寄せる」ではなく「意匠のとおり」。
      迷ったら Satoru に聞く（2026-09-12 指示）。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 上の黒帯（DMMぱちタウン）は出さない ────────────────────────────
   ★Satoru 判断（2026-09-12）: 意匠どおり **A-amuse 一本**。
     ⛔ 戻すときはこの1ブロックを消す。 */
html .v2-stage:has(.v2-auth) .v2-app::before{ display:none; content:none; }

/* ── 言語タブ（画面のいちばん上・全幅） ───────────────────────────── */
html .v2-auth--langtop .v2-langtop{ padding:10px 12px 0; }
html .v2-auth--langtop .v2-langtop .v2-lang{
  gap:0; background:linear-gradient(180deg,#1E1210,#120A08);
  border:2px solid var(--am-gold); border-radius:8px; padding:3px;
  box-shadow:var(--am-frame), 0 4px 14px rgba(0,0,0,.5);
}
html .v2-auth--langtop .v2-langtop .v2-lang a{
  flex:1 1 0; text-align:center; border:0; border-radius:5px;
  padding:8px 2px; font-size:12px; font-weight:800; color:#E6D2AE; background:transparent;
  border-right:1px solid rgba(217,176,99,.28);
}
html .v2-auth--langtop .v2-langtop .v2-lang a:last-child{ border-right:0; }
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=ja] a[data-l=ja],
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=en] a[data-l=en],
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=ko] a[data-l=ko],
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=tw] a[data-l=tw],
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=cn] a[data-l=cn]{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  border:1px solid var(--am-gold); color:#FFF0D6;
}

/* ── 看板（マーキー） ───────────────────────────────────────────── */
html .v2-auth__brand{ padding:14px 12px 14px; }
html .v2-auth__brand b{ width:min(92%, 560px); height:auto; aspect-ratio:1368/420; }

/* ── 入力の札（羊皮紙） ─────────────────────────────────────────── */
html .v2-auth .v2-form.v4-auth{ padding:18px 18px 20px; }
html .v4-auth__ttl{
  text-align:center; font-size:26px; font-weight:900; letter-spacing:.04em;
  color:var(--am-red); text-shadow:0 1px 0 rgba(255,255,255,.55);
}
html .v4-auth__lead{
  margin:6px 0 16px; text-align:center; font-size:13px; font-weight:700;
  color:#5A3A1E; line-height:1.6;
}

/* 入力欄（左に濃いアイコン箱・パスワードは右に目） */
html .v4-fld{ position:relative; margin-bottom:6px; }
html .v4-fld .v2-input{
  padding-left:52px; padding-right:14px; min-height:52px;
  background:#FCF8EC; border:1px solid #B99B63; border-radius:8px;
  font-size:15px; color:#241407;
}
html .v4-fld:has(.v4-fld__eye) .v2-input{ padding-right:48px; }
html .v4-fld__ic{
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:7px;
  background:linear-gradient(180deg,#3A2415,#20120A);
  display:flex; align-items:center; justify-content:center;
}
html .v4-fld__ic svg{ width:20px; height:20px; fill:none; stroke:#F2E3C2; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
html .v4-fld__eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; background:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
html .v4-fld__eye svg{ width:22px; height:22px; fill:none; stroke:#6B4A2A; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
html .v4-fld__eye.is-on svg{ stroke:var(--am-red); }

/* 「保存する」チェック */
html .v2-auth .v2-form .v2-check{ margin:10px 0 14px; font-size:14px; font-weight:700; }

/* 主役のボタン（右に丸い矢印） */
html .v2-btn.v4-cta{
  position:relative; min-height:56px; font-size:19px; letter-spacing:.06em;
}
html .v4-cta__ar{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,225,170,.55);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; line-height:1; padding-bottom:2px;
}
/* 「パスワードをお忘れの方」 */
html .v4-forgot{
  display:block; margin:12px 0 4px; text-align:center;
  font-size:13px; font-weight:700; color:#5A3A1E; text-decoration:underline;
}
/* 区切り「または」 */
html .v2-auth .v2-form .v2-or{ margin:12px 0; color:#6B4A2A; }
html .v2-auth .v2-form .v2-google{ margin:0 0 10px; min-height:52px; font-weight:800; }
/* 「新規会員登録」＝ 黒い札 */
html .v4-sub{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:52px; border-radius:8px;
  background:linear-gradient(180deg,#2A1A12,#120A07);
  color:#F3E3C6; font-size:16px; font-weight:900; letter-spacing:.04em;
  border:1px solid #6B4A22;
}
html .v4-sub .v4-cta__ar{ background:rgba(255,255,255,.10); border-color:rgba(255,225,170,.35); }

/* ── フッター（7つのアイコン＋Copyright） ───────────────────────── */
html .v2-foot{
  margin-top:18px; padding:0; display:block;
  background:linear-gradient(180deg,#1A0F0B,#0C0605);
  border:1px solid var(--am-gold-dk); border-radius:10px;
  box-shadow:var(--am-frame);
}
html .v2-foot > a{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:calc(100% / 7); min-width:92px; padding:12px 4px;
  font-size:11px; font-weight:700; color:#E2CDA4; text-align:center; line-height:1.35;
  border-right:1px solid rgba(217,176,99,.22); vertical-align:top;
}
html .v2-foot > a:last-of-type{ border-right:0; }
html .v4-foot__i{ display:block; }
html .v4-foot__i svg{ width:24px; height:24px; fill:none; stroke:#E7D3A6; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
html .v2-foot small{
  display:block; width:100%; text-align:center; padding:10px 8px;
  border-top:1px solid rgba(217,176,99,.22); font-size:11px; color:#C2AC85;
}

/* ── PC では札を中央に、看板を大きく ──────────────────────────── */
@media (min-width:1024px){
  html .v2-stage:has(.v2-auth) .v2-app{ width:min(calc(100vw - 80px), 560px); }
  html .v2-auth__brand b{ width:520px; }
}
/* ── スマホ ───────────────────────────────────────────────── */
@media (max-width:1023px){
  html .v2-foot > a{ width:calc(100% / 4); min-width:0; font-size:10px; }
  html .v2-auth__brand b{ width:94%; }
}

/* ⛔ 実物を撮って直した3点（画面①） */
html .v4-sub{ text-decoration:none; }
html .v4-sub b{ text-decoration:none; }
/* PC ではフッターを**画面の幅いっぱい**に（意匠どおり）。
   ⛔ 柱（560px）の中に入れると、7つが入りきらず文字が重なる。 */
@media (min-width:1024px){
  html .v2-stage:has(.v2-auth) .v2-foot{
    position:fixed; left:0; right:0; bottom:0; margin:0; z-index:20;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
  }
  html .v2-stage:has(.v2-auth) .v2-foot > a{ min-width:0; }
  html .v2-stage:has(.v2-auth) .v2-auth{ padding-bottom:132px; }
}

/* ⛔ 7つ目（設定）が2行目に落ちていた（実物で気づいた）。
     inline-block の並びは隙間が入るので、横に7つ入らない。⇒ flex で等分する。 */
html .v2-foot{ display:flex; flex-wrap:wrap; align-items:stretch; }
html .v2-foot > a{ flex:1 1 0; width:auto; }
html .v2-foot small{ flex:1 0 100%; }

/* ══════════════════════════════════════════════════════════════════════
   画面① ログイン ── Satoru 指示で作り直し（2026-09-12 16:2x）
   > スクロールバーはいらない／五言語の表示は以前の大きさに戻す／
   > A-amuseの四角い看板は取る／「ホールの台を、スマホで打つ」も取る／
   > A-amuseのテキストロゴが見えにくいので作り直す
   ⇒ **看板の絵をやめ、読める文字のロゴにする。**上に詰めて1画面に収める。
   ══════════════════════════════════════════════════════════════════════ */

/* ① 言語タブ ── 以前の小さい形に戻す（全幅の帯をやめる） */
html .v2-auth--langtop .v2-langtop{ padding:8px 12px 0; }
html .v2-auth--langtop .v2-langtop .v2-lang{
  gap:6px; background:none; border:0; border-radius:0; padding:0; box-shadow:none;
  justify-content:center;
}
html .v2-auth--langtop .v2-langtop .v2-lang a{
  flex:0 0 auto; border:1px solid var(--am-gold-dk); border-right:1px solid var(--am-gold-dk);
  border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700;
  background:rgba(18,10,8,.6); color:#E2CDA4;
}
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=ja] a[data-l=ja],
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=en] a[data-l=en],
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=ko] a[data-l=ko],
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=tw] a[data-l=tw],
html .v2-auth--langtop .v2-langtop .v2-lang[data-lang=cn] a[data-l=cn]{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  border-color:var(--am-gold); color:#FFF0D6;
}

/* ② 看板（四角い絵）をやめ、**読める文字のロゴ**にする
   ⛔ 絵をやめた理由: 小さくすると電球の粒で文字が潰れて読めない（Satoru 指摘）。
   ★金のグラデを文字そのものに乗せ、濃い縁と淡い光で背景から浮かせる。 */
html .v2-auth__brand{ padding:10px 12px 8px; }
html .v2-auth__brand b{
  display:inline-block; width:auto; height:auto; margin:0; padding:0;
  background:linear-gradient(180deg,#FFF6D8 0%, #F3D27A 42%, #D79C2E 72%, #F6E4AE 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-indent:0; overflow:visible; white-space:nowrap;
  font:900 clamp(38px, 9.5vw, 56px)/1.05 "Hiragino Kaku Gothic StdN","Hiragino Sans",
       "Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  letter-spacing:.01em;
  filter:drop-shadow(0 2px 0 rgba(90,16,8,.95)) drop-shadow(0 0 16px rgba(255,170,60,.45));
}
/* ③ 「ホールの台を、スマホで打つ」は出さない（Satoru 指示）
   ★HTML からは消していない画面もあるので、CSS でも止めておく */
html .v2-auth__brand span{ display:none; }

/* ④ 上に詰める（1画面に収める） */
html .v2-auth .v2-form.v4-auth{ padding:14px 16px 16px; }
html .v4-auth__ttl{ font-size:23px; }
html .v4-auth__lead{ margin:4px 0 12px; font-size:12.5px; }
html .v4-fld{ margin-bottom:8px; }
html .v4-fld .v2-input{ min-height:48px; }
html .v4-fld__ic{ width:34px; height:34px; left:7px; }
html .v2-auth .v2-form .v2-check{ margin:8px 0 12px; }
html .v2-btn.v4-cta{ min-height:52px; font-size:18px; }
html .v4-forgot{ margin:10px 0 2px; }
html .v2-auth .v2-form .v2-or{ margin:10px 0; }
html .v2-auth .v2-form .v2-google{ min-height:48px; margin-bottom:8px; }
html .v4-sub{ min-height:48px; }

/* ⛔ スマホでフッターの7つが1行に押し込まれ、文字が重なっていた（実物で気づいた）。
     ⇒ スマホは4つ×2段に折り返す。★flex:1 1 0 のままだと折り返さない。 */
@media (max-width:1023px){
  html .v2-foot > a{ flex:0 0 25%; width:25%; font-size:10px; padding:10px 2px; }
  html .v4-foot__i svg{ width:21px; height:21px; }
}

/* ⇒ 4つ×2段だと、こんどは**画面に収まらなかった**（実測 909/844）。
     ★納品の意匠も**7つを1行**なので、そちらに合わせる。文字は2行に折り返す。 */
@media (max-width:1023px){
  html .v2-foot > a{
    flex:1 1 0; width:auto; min-width:0;
    font-size:9px; line-height:1.25; letter-spacing:-.02em; padding:8px 1px; gap:4px;
    white-space:normal; word-break:break-word;
  }
  html .v4-foot__i svg{ width:19px; height:19px; }
  html .v2-foot small{ padding:7px 6px; font-size:10px; }
}

/* ══ 画面① ログイン ── **スクロールバーを出さない**（2026-09-12 16:3x・Satoru 指摘）══
   ⛔ こちらの試験（高さ780）では出なかったが、**ブックマークバーのある実物の窓では出た**。
      ⇒ ①**バーそのものを消す** ②**もう一段詰める**、の両方をやる。
   ⭐ 「こちらの画面では出なかった」は、出ないことの証拠にならない。 */
html .v2-body{ scrollbar-width:none; -ms-overflow-style:none; }
html .v2-body::-webkit-scrollbar{ width:0; height:0; }

/* もう一段詰める（短い窓でも入るように） */
html .v2-auth--langtop .v2-langtop{ padding:6px 12px 0; }
html .v2-auth--langtop .v2-langtop .v2-lang a{ padding:3px 9px; font-size:10.5px; }
html .v2-auth__brand{ padding:6px 12px 4px; }
html .v2-auth__brand b{ font:900 clamp(30px, 7.2vw, 44px)/1.05 "Hiragino Kaku Gothic StdN","Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif; }
html .v2-auth .v2-form.v4-auth{ padding:12px 14px 14px; }
html .v4-auth__ttl{ font-size:21px; }
html .v4-auth__lead{ margin:3px 0 10px; font-size:12px; }
html .v4-fld{ margin-bottom:7px; }
html .v4-fld .v2-input{ min-height:44px; }
html .v4-fld__ic{ width:32px; height:32px; }
html .v2-auth .v2-form .v2-check{ margin:7px 0 10px; min-height:44px; }
html .v2-btn.v4-cta{ min-height:48px; font-size:17px; }
html .v4-forgot{ margin:8px 0 2px; font-size:12.5px; }
html .v2-auth .v2-form .v2-or{ margin:8px 0; }
html .v2-auth .v2-form .v2-google{ min-height:44px; margin-bottom:7px; }
html .v4-sub{ min-height:44px; font-size:15px; }
@media (min-width:1024px){
  html .v2-stage:has(.v2-auth) .v2-foot > a{ padding:8px 4px; font-size:10.5px; }
  html .v2-stage:has(.v2-auth) .v4-foot__i svg{ width:21px; height:21px; }
  html .v2-stage:has(.v2-auth) .v2-foot small{ padding:7px 8px; }
  html .v2-stage:has(.v2-auth) .v2-auth{ padding-bottom:112px; }
}

/* ⭐ 画面の高さが足りないときだけ、さらに詰める（背の高い窓の見た目は変えない）。
   ★「全部を小さくする」のではなく、**足りないときだけ**にしてある。 */
@media (max-height:760px){
  html .v2-auth--langtop .v2-langtop{ padding:4px 12px 0; }
  html .v2-auth__brand{ padding:4px 12px 2px; }
  html .v2-auth__brand b{ font-size:clamp(26px, 6vw, 36px); }
  html .v2-auth .v2-form.v4-auth{ padding:10px 12px 12px; }
  html .v4-auth__ttl{ font-size:19px; }
  html .v4-auth__lead{ margin:2px 0 8px; font-size:11.5px; }
  html .v4-fld{ margin-bottom:6px; }
  html .v4-fld .v2-input{ min-height:42px; }
  html .v4-fld__ic{ width:30px; height:30px; }
  html .v2-auth .v2-form .v2-check{ margin:6px 0 8px; min-height:40px; }
  html .v2-btn.v4-cta{ min-height:44px; font-size:16px; }
  html .v4-forgot{ margin:6px 0 0; font-size:12px; }
  html .v2-auth .v2-form .v2-or{ margin:6px 0; }
  html .v2-auth .v2-form .v2-google{ min-height:42px; margin-bottom:6px; }
  html .v4-sub{ min-height:42px; }
  html .v2-foot > a{ padding:6px 2px; }
  html .v4-foot__i svg{ width:18px; height:18px; }
  html .v2-foot small{ padding:6px 6px; font-size:10px; }
}
/* ⛔ 上の padding-bottom を高さ条件だけに入れたら、**スマホにも 98px が付いて**
     かえって 99px はみ出した（実測）。フッターを固定しているのは PC だけなので、
     ⇒ 幅の条件と一緒に書く。★「詰めたつもりが増えていた」。 */
@media (min-width:1024px) and (max-height:760px){
  html .v2-stage:has(.v2-auth) .v2-auth{ padding-bottom:98px; }
}

/* ══ A-amuse の文字ロゴ ── **1つ前の形に戻す**（2026-09-12 18:0x・Satoru 指示）══
   > A-amuseの文字は一つ前のものに戻してください
   ⇒ 豆電球入り（赤地に粒）はやめ、**金のグラデの文字**に戻した。
   ⛔ 消さずに戻した理由の控え: 豆電球版は
      `background-image` に粒と赤地を敷き、`filter: drop-shadow()` で金の縁を付けていた。
      （重ね方で2回失敗した経緯は 2026-09-12 のコミット 25daeac に残してある）

   ★読みやすさの作り: 金のグラデを文字に乗せ、濃い影で背景から離し、温かい光を回す。 */
html .v2-auth__brand b{
  display:inline-block;
  background-image:linear-gradient(180deg,#FFF6D8 0%, #F3D27A 42%, #D79C2E 72%, #F6E4AE 100%);
  background-size:100% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:0;
  filter:
    drop-shadow(0 2px 0 rgba(90,16,8,.95))
    drop-shadow(0 0 16px rgba(255,170,60,.45));
}
html .v2-auth__brand b::before,
html .v2-auth__brand b::after{ content:none; display:none; }

/* ⭐ 言語タブが画面の外に出ないように、もう少しだけ詰める（Satoru 指摘）。
   ⛔ スクロールそのものは止めていない（バーの見た目を消しているだけ）。
     マウスのホイールでも指でも、今までどおり動く。 */
html .v2-auth__brand{ padding:4px 12px 2px; }
html .v2-auth__brand b{ font-size:clamp(28px, 6.4vw, 40px); }
html .v2-auth .v2-form.v4-auth{ padding:11px 14px 12px; }
html .v4-auth__ttl{ font-size:20px; }
html .v4-auth__lead{ margin:2px 0 9px; }
html .v2-auth .v2-form .v2-check{ margin:6px 0 9px; }
html .v4-forgot{ margin:7px 0 0; }
html .v2-auth .v2-form .v2-or{ margin:7px 0; }

/* ══ 画面② 新規登録（2026-09-12・外注デザイン②）════════════════════════
   正本 = A-amuse新デザイン/02_新規登録_PC.png ・ 02_新規登録_SP.png
   ★ログインと同じ部品を使う。ここで足すのは「赤い見出し帯」と「注記」だけ。 */
html .v4-auth__ttl--banner{
  margin:-11px -14px 10px; padding:9px 12px;
  background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 45%, var(--am-red-dk) 100%);
  border-bottom:2px solid var(--am-gold);
  border-radius:12px 12px 0 0;
  color:#FFF3DA; text-shadow:0 1px 0 rgba(0,0,0,.55);
  font-size:20px; letter-spacing:.06em;
}
/* 入力欄の下の小さい注記（※半角英数字で〜） */
html .v4-note{
  margin:2px 2px 8px; font-size:11px; line-height:1.5; color:#6B4A2A; font-weight:700;
}
/* 「← ログイン画面に戻る」の矢印は左 */
html .v4-cta__ar--l{ right:auto; left:12px; }
html .v4-sub .v4-cta__ar--l{ background:rgba(255,255,255,.10); }

/* ══ 画面③ ホーム（2026-09-12・外注デザイン③）════════════════════════
   正本 = A-amuse新デザイン/03_ホーム_PC.png ・ 03_ホーム_SP.png
   足したのは「昨日のランキング上位3」「お知らせ5件」「バナー2枚」の3つ。 */

/* ── ランキング（昨日の上位3件） ─────────────────────────────── */
html body.dm-page .v4-rank{ display:block; margin-top:12px; padding:12px 12px 6px; }
html body.dm-page .v4-rank__hd{
  display:flex; align-items:center; gap:8px; padding-bottom:8px;
  border-bottom:1px solid rgba(217,176,99,.28);
}
html body.dm-page .v4-rank__ttl{ font-size:16px; font-weight:900; color:var(--am-gold-hi); }
html body.dm-page .v4-rank__s{ flex:1; min-width:0; font-size:11.5px; color:var(--am-ink-dim); font-weight:700; }
html body.dm-page .v4-rank__hd .chev{ width:18px; height:18px; flex:none; color:var(--am-gold); }
html body.dm-page .v4-rank__row{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-top:1px solid rgba(217,176,99,.16);
}
html body.dm-page .v4-rank__row:first-of-type{ border-top:0; }
/* 順位の丸（1位＝金・2位＝銀・3位＝銅） */
html body.dm-page .v4-rank__no{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; color:#2A1608;
  background:linear-gradient(180deg,#F3D98A,#C9A23A); border:1px solid #8A6A22;
}
html body.dm-page .v4-rank__row:nth-of-type(3) .v4-rank__no{
  background:linear-gradient(180deg,#EDEDED,#B9B9B9); border-color:#8C8C8C;
}
html body.dm-page .v4-rank__row:nth-of-type(4) .v4-rank__no{
  background:linear-gradient(180deg,#E7B489,#B2713C); border-color:#7A4A22;
}
/* 機種の絵（無いときは枠だけ） */
html body.dm-page .v4-rank__img{
  flex:none; width:54px; height:40px; border-radius:6px;
  background-color:#120A08; background-size:cover; background-position:center 30%;
  border:1px solid var(--am-gold-dk);
}
html body.dm-page .v4-rank__b{ flex:1; min-width:0; }
html body.dm-page .v4-rank__m{
  display:block; font-size:13.5px; font-weight:800; color:var(--am-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html body.dm-page .v4-rank__w{
  display:block; font-size:11px; color:var(--am-ink-dim); font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html body.dm-page .v4-rank__v{
  flex:none; font-size:15px; font-weight:900; color:#FFD98A;
  font-variant-numeric:tabular-nums;
}

/* ── お知らせ（最新5件） ────────────────────────────────────── */
html body.dm-page .v4-news{ margin-top:12px; padding:12px 12px 4px; }
html body.dm-page .v4-news__hd{
  display:flex; align-items:center; gap:8px; padding-bottom:8px;
  border-bottom:1px solid rgba(217,176,99,.28);
}
html body.dm-page .v4-news__all{
  margin-left:auto; display:inline-flex; align-items:center; gap:2px;
  font-size:11.5px; font-weight:800; color:var(--am-gold);
}
html body.dm-page .v4-news__all .chev{ width:14px; height:14px; }
html body.dm-page .v4-news__row{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-top:1px solid rgba(217,176,99,.16); font-size:13px;
}
html body.dm-page .v4-news__row:first-of-type{ border-top:0; }
html body.dm-page .v4-news__dt{
  flex:none; font-size:11px; font-weight:800; color:var(--am-gold);
  font-variant-numeric:tabular-nums;
}
html body.dm-page .v4-news__t{
  flex:1; min-width:0; color:var(--am-ink); font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html body.dm-page .v4-news__row .chev{ width:16px; height:16px; flex:none; color:var(--am-ink-dim); }

/* ── バナー2枚 ─────────────────────────────────────────────── */
html body.dm-page .v4-bans{ display:grid; gap:10px; margin-top:12px; }
html body.dm-page .v4-ban{ display:block; }
html body.dm-page .v4-ban img{
  display:block; width:100%; height:auto; border-radius:10px;
  border:2px solid var(--am-gold); box-shadow:var(--am-frame), 0 4px 14px rgba(0,0,0,.45);
}
@media (min-width:1024px){
  html body.dm-page .v4-bans{ grid-template-columns:1fr 1fr; }
}
/* ホームの下のフッター（意匠どおり・下タブの上に置く） */
html body.dm-page .dm-body .v2-foot{ margin-top:14px; }

/* ⛔ ホームのフッターに出る言語の丸ピンが、暗い地に暗い字で読めなかった（実物で気づいた）。
     ★いま見ている言語は `--v2-ink`（暗い色）で塗られる作りなので、ここで上書きする。 */
html body.dm-page .v2-foot .v2-lang{ justify-content:center; margin-top:8px; }
html body.dm-page .v2-foot .v2-lang a{
  background:rgba(18,10,8,.6); border:1px solid var(--am-gold-dk); color:#E2CDA4;
}
html body.dm-page .v2-foot .v2-lang[data-lang=ja] a[data-l=ja],
html body.dm-page .v2-foot .v2-lang[data-lang=en] a[data-l=en],
html body.dm-page .v2-foot .v2-lang[data-lang=ko] a[data-l=ko],
html body.dm-page .v2-foot .v2-lang[data-lang=tw] a[data-l=tw],
html body.dm-page .v2-foot .v2-lang[data-lang=cn] a[data-l=cn]{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  border-color:var(--am-gold); color:#FFF0D6;
}

/* ══ 上の看板のロゴも「作った文字ロゴ」にする（2026-09-12・Satoru 指示）══════
   > スクショの青丸のところを全てあなたが作成したA-amuseの文字に変更してください
   ⇒ `/img/v4/logo_amuse.webp`（切り出した絵）をやめ、**ログイン画面と同じ文字ロゴ**にする。
   ★絵を持たないので、どの大きさでも潰れない。**ロゴの見た目が画面で1つに揃う。** */
html body.dm-page .dm-top .dmm-logo::after{
  content:"A-amuse";
  width:auto; height:auto; background:none;
  font:900 30px/1 "Hiragino Kaku Gothic StdN","Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  letter-spacing:.01em;
  background-image:linear-gradient(180deg,#FFF6D8 0%, #F3D27A 42%, #D79C2E 72%, #F6E4AE 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(90,16,8,.95)) drop-shadow(0 0 12px rgba(255,170,60,.4));
}
@media (min-width:1024px){
  html body.dm-page .dm-top .dmm-logo::after{ font-size:34px; }
}

/* ── バナー2枚（文字は HTML・絵だけ背景）2026-09-12 作り替え ──────────────
   ⛔ 前は文字ごと焼き込んだ画像だった ⇒ **他の言語でも日本語のまま**出ていた。
     ★Satoru 指示で、絵と文字を分けた。⇒ 5言語で差し替わる。 */
html body.dm-page .v4-ban{
  position:relative; display:flex; align-items:center; min-height:112px;
  padding:14px 58px 14px 16px; border-radius:10px; overflow:hidden;
  border:2px solid var(--am-gold); box-shadow:var(--am-frame), 0 4px 14px rgba(0,0,0,.45);
}
html body.dm-page .v4-ban__b{ display:block; min-width:0; }
html body.dm-page .v4-ban__t{
  display:block; font-size:22px; font-weight:900; letter-spacing:.02em; line-height:1.15;
  color:#FFF3DA; text-shadow:0 2px 0 rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.6);
}
html body.dm-page .v4-ban__t--en{ font-size:19px; letter-spacing:.06em; }
html body.dm-page .v4-ban__s{
  display:block; margin-top:4px; font-size:12.5px; font-weight:800;
  color:#F6E4BC; text-shadow:0 1px 0 rgba(0,0,0,.8);
}
html body.dm-page .v4-ban__go{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  border:2px solid var(--am-gold);
  display:flex; align-items:center; justify-content:center;
  color:#FFF0D6; font-size:20px; font-weight:900; line-height:1; padding-bottom:3px;
}
/* ①新台＝アビスセイレーンの筐体アート（絵は左、文字は右） */
html body.dm-page .v4-ban--abyss{
  justify-content:flex-end; text-align:right;
  background:
    linear-gradient(90deg, rgba(4,8,24,0) 0%, rgba(4,8,24,.55) 34%, rgba(4,8,24,.88) 62%, rgba(4,8,24,.94) 100%),
    url(/img/v4/ban_abyss.webp?v=20260912a) left center/cover no-repeat, #05081A;
}
/* ②イベント（絵は右、文字は左） */
html body.dm-page .v4-ban--event{
  justify-content:flex-start; text-align:left;
  background:
    linear-gradient(90deg, rgba(38,6,58,.94) 0%, rgba(38,6,58,.86) 42%, rgba(38,6,58,.25) 78%, rgba(38,6,58,0) 100%),
    url(/img/v4/ban_event.webp?v=20260912a) right center/cover no-repeat, #26063A;
}
html body.dm-page .v4-ban--event .v4-ban__go{ right:auto; left:auto; right:12px; }

/* ⛔ イベントの絵が寄りすぎて「目だけ」になっていた（実物で気づいた）。
     ★横長の枠に cover を掛けると、縦長の絵は**大きく拡大される**。
     ⇒ 高さに合わせる（auto 112%）＋ 右寄せにして、顔が入るようにする。 */
html body.dm-page .v4-ban--event{
  background:
    linear-gradient(90deg, rgba(38,6,58,.94) 0%, rgba(38,6,58,.86) 42%, rgba(38,6,58,.25) 78%, rgba(38,6,58,0) 100%),
    url(/img/v4/ban_event.webp?v=20260912a) right center/auto 112% no-repeat,
    linear-gradient(90deg,#2A0740,#4A1060);
}

/* ── 新台バナー: 「新台登場！」は小さい札、その下に**機種の正式名称**（2026-09-12 Satoru 指示） */
html body.dm-page .v4-ban__k{
  display:inline-block; margin-bottom:6px; padding:3px 10px; border-radius:999px;
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  border:1px solid var(--am-gold); color:#FFF0D6;
  font-size:12px; font-weight:900; letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
html body.dm-page .v4-ban--abyss .v4-ban__t{
  font-size:17px; line-height:1.3; letter-spacing:0;
  text-shadow:0 2px 0 rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.7);
}
@media (min-width:1024px){
  html body.dm-page .v4-ban--abyss .v4-ban__t{ font-size:18px; }
}

/* ⛔ トップの絵の中の文字を HTML にする作りは **やめた**（2026-09-13・Satoru 指示
     「世界中にパチンコ文化を…を元の画像に戻してください」）。
   ⇒ 重ねる札も、言語ごとの文字寄せも全部外した。**絵のままが正**。
   ★経緯はコミット 4e5bf2d に残してある（またやるときはそこから）。 */


/* ══════════════════════════════════════════════════════════════════════
   画面④ ホール（1店）の画面（2026-09-13・外注デザイン④）
   正本 = A-amuse新デザイン/04_ホールをえらぶ_PC.png ・ 04_ホールをえらぶ_SP.png
   ★部品はホームと同じもの（dm-tile / dm-card / v4-rank__ttl / v4-news__* / v4-ban）を使う。
     ここで足すのは「店の顔」「成績4つ」「遊技履歴の行」「月のバナー」だけ。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 店の顔（写真の上に名前・住所） ──────────────────────────── */
html body.dm-page .v4-hh{
  position:relative; min-height:230px; border-radius:10px; overflow:hidden;
  border:2px solid var(--am-gold); box-shadow:var(--am-frame), 0 6px 20px rgba(0,0,0,.5);
  background-size:cover; background-position:center; background-color:#140A08;
  display:flex; align-items:flex-end;
}
html body.dm-page .v4-hh::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,5,4,0) 30%, rgba(10,5,4,.55) 60%, rgba(10,5,4,.92) 100%);
}
html body.dm-page .v4-hh__demo{
  position:absolute; left:12px; top:12px; z-index:1;
  padding:5px 12px; border-radius:999px; font-size:12px; font-weight:900;
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk));
  border:1px solid var(--am-gold); color:#FFF0D6;
}
html body.dm-page .v4-hh__b{ position:relative; z-index:1; width:100%; padding:14px 14px 12px; }
html body.dm-page .v4-hh__name{
  display:flex; align-items:center; gap:10px;
  font-size:26px; font-weight:900; line-height:1.15; color:#FFF6E2;
  text-shadow:0 2px 0 rgba(0,0,0,.8), 0 0 16px rgba(0,0,0,.6);
}
html body.dm-page .v4-hh__logo{ width:48px; height:48px; object-fit:contain; flex:none; }
html body.dm-page .v4-hh__pref{ margin-top:4px; font-size:12.5px; font-weight:800; color:var(--am-gold-hi); }
html body.dm-page .v4-hh__addr{
  display:flex; align-items:center; gap:5px; margin-top:4px;
  font-size:12.5px; font-weight:700; color:#EDE0C6;
}
html body.dm-page .v4-hh__addr svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; }
html body.dm-page .v4-hh__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:10px;
}
html body.dm-page .v4-hh__cnt{ font-size:12.5px; font-weight:800; color:#EDE0C6; }
html body.dm-page .v4-hh__cnt b{ font-size:15px; color:#FFF6E2; }
html body.dm-page .v4-hh__cnt b.green{ color:#6FE49B; }
html body.dm-page .v4-hh__my{ min-height:38px; }

/* ── 入口3つ（右に矢印） ────────────────────────────────── */
html body.dm-page .v4-hh__tiles{ margin-top:12px; }
html body.dm-page .v4-hh__tiles .dm-tile{ position:relative; }
html body.dm-page .v4-hh__tiles .dm-tile .chev{
  position:absolute; right:10px; bottom:12px; width:16px; height:16px; color:var(--am-paper-ink);
}
@media (min-width:1024px){
  html body.dm-page .v4-hh__tiles.dm-grid--3{ grid-template-columns:repeat(3,1fr); }
}

/* ── 店全体の成績（4つ） ──────────────────────────────────── */
html body.dm-page .v4-st{ margin-top:12px; padding:12px; }
html body.dm-page .v4-st__hd{
  display:flex; align-items:center; gap:8px; padding-bottom:10px;
  border-bottom:1px solid rgba(217,176,99,.28);
}
html body.dm-page .v4-st__crown svg{ width:22px; height:22px; fill:var(--am-gold); }
html body.dm-page .v4-st__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
@media (min-width:1024px){
  html body.dm-page .v4-st__grid{ grid-template-columns:repeat(4,1fr); }
}
html body.dm-page .v4-st__box{
  padding:10px 10px 12px; border-radius:8px; text-align:center;
  background:linear-gradient(180deg,#1E1210,#140C09);
  border:1px solid var(--am-gold-dk);
}
html body.dm-page .v4-st__k{ display:block; font-size:11.5px; font-weight:800; color:var(--am-ink-dim); }
html body.dm-page .v4-st__v{
  display:block; margin-top:4px; font-size:20px; font-weight:900; color:#FFD98A;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
html body.dm-page .v4-st__v small{ margin-left:2px; font-size:11px; color:var(--am-ink-dim); font-weight:800; }
html body.dm-page .v4-st__v.is-minus{ color:#FF7A70; }

/* ── 昨日のベスト3台（意匠では「最近の遊技履歴」の枠。行の形はそのまま使う） ── */
html body.dm-page .v4-pl{ margin-top:12px; padding:12px 12px 4px; }
html body.dm-page .v4-pl__row{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-top:1px solid rgba(217,176,99,.16); font-size:13px;
}
html body.dm-page .v4-pl__row:first-of-type{ border-top:0; }
html body.dm-page .v4-pl__tm{ flex:none; font-size:11px; font-weight:800; color:var(--am-ink-dim); font-variant-numeric:tabular-nums; }
html body.dm-page .v4-pl__v{ flex:none; font-weight:900; color:#6FE49B; font-variant-numeric:tabular-nums; }
html body.dm-page .v4-pl__v.is-minus{ color:#FF7A70; }
/* 順位の丸（ホームのランキングと同じ金・銀・銅）。★色は順位の class で分ける（行の並びに頼らない） */
html body.dm-page .v4-pl__no{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:#2A1608;
  background:linear-gradient(180deg,#F3D98A,#C9A23A); border:1px solid #8A6A22;
}
html body.dm-page .v4-pl__no.is-2{ background:linear-gradient(180deg,#EDEDED,#B9B9B9); border-color:#8C8C8C; }
html body.dm-page .v4-pl__no.is-3{ background:linear-gradient(180deg,#E7B489,#B2713C); border-color:#7A4A22; }
html body.dm-page .v4-pl__cd{ flex:none; font-size:12px; font-weight:800; color:var(--am-gold); font-variant-numeric:tabular-nums; }

/* ── 今月の注目イベント（1枚だけ・横いっぱい） ──────────────────── */
html body.dm-page .v4-bans--one{ grid-template-columns:1fr !important; }
html body.dm-page .v4-ban--month{
  justify-content:flex-end; text-align:right; min-height:120px;
  background:
    linear-gradient(90deg, rgba(20,8,48,0) 0%, rgba(20,8,48,.55) 38%, rgba(20,8,48,.92) 62%, rgba(20,8,48,.96) 100%),
    url(/img/v4/ban_month.webp?v=20260913a) left center/auto 118% no-repeat,
    linear-gradient(90deg,#1A0A40,#2A0F58);
}

/* ⛔ 入口3つが**縦に潰れて**出ていた（本番の実物で気づいた）。
     ★タイルを格子に並べる指定は dmm_ui.css で `.dm-home .dm-grid…` と**ホーム専用**に書いてある。
       ⇒ この画面（body.dm-hallpage）には1つも当たっていなかった。
     ⇒ 同じ並べ方をこの画面にも書く（ホームの値をそのまま写した）。 */
html body.dm-hallpage .dm-grid{ display:grid; gap:10px; }
html body.dm-hallpage .dm-grid--3{ grid-template-columns:repeat(3,1fr); }
html body.dm-hallpage .dm-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:96px; padding:14px 6px 16px; text-align:center;
  font-size:14px; font-weight:900; color:var(--am-paper-ink);
}
html body.dm-hallpage .dm-tile .dm-row__ic{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #C4262B, #6E0A0E);
  color:#FFE9C4; border:2px solid var(--am-gold-dk);
}
html body.dm-hallpage .dm-tile .dm-row__ic svg{
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (min-width:1024px){
  html body.dm-hallpage .dm-tile{ min-height:118px; font-size:16px; }
  html body.dm-hallpage .dm-tile .dm-row__ic{ width:54px; height:54px; }
  html body.dm-hallpage .dm-tile .dm-row__ic svg{ width:26px; height:26px; }
}


/* ══════════════════════════════════════════════════════════════════════
   画面⑤ 島をえらぶ（2026-09-13・外注デザイン⑤）
   正本 = A-amuse新デザイン/05_島を選ぶ_PC.png ・ 05_島をえらぶ_SP.png
   ★Satoru 判断: 意匠の「機種カード」を**島ごとに1枚**で使う（data/isles.php の冒頭）。
   ★見出しの字は v4-rank__ttl（ホーム・④と同じ）。ここで足すのはカード・階・台番号の欄・地図だけ。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 階（2階以上ある店だけ） ── */
html body.dm-islespage .v4-isf{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; }
html body.dm-islespage .v4-isf__b{
  flex:none; min-width:64px; padding:8px 16px; border-radius:8px; text-align:center;
  font-size:14px; font-weight:900; color:var(--am-ink-dim);
  background:#150C0A; border:1px solid var(--am-gold-dk);
}
html body.dm-islespage .v4-isf__b.is-on{
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk)); color:#FFF0D6; border-color:var(--am-gold);
}

/* ── 設置機種一覧の枠 ── */
html body.dm-islespage .v4-is{ display:block; padding:12px; }
html body.dm-islespage .v4-is__hd{
  display:flex; align-items:center; gap:8px; padding-bottom:10px;
  border-bottom:1px solid rgba(217,176,99,.28);
}
html body.dm-islespage .v4-is__ic svg{
  display:block; width:22px; height:22px; fill:none; stroke:var(--am-gold); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
html body.dm-islespage .v4-is__map{
  margin-left:auto; height:32px; padding:0 12px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:800; color:var(--am-gold);
  background:transparent; border:1px solid var(--am-gold-dk);
}
html body.dm-islespage .v4-is__empty{ padding:24px 8px; text-align:center; font-size:13px; color:var(--am-ink-dim); }
html body.dm-islespage .v4-is__grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px;
}
@media (min-width:700px){
  html body.dm-islespage .v4-is__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width:1200px){
  html body.dm-islespage .v4-is__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
html body.dm-islespage .v4-is__note{ margin:12px 2px 0; font-size:11.5px; line-height:1.7; color:var(--am-ink-dim); }
html body.dm-islespage .v4-is__note b{ color:var(--am-ink); }

/* ── 島のカード（意匠の機種カード） ── */
html body.dm-islespage .v4-isc{
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  border-radius:8px; border:2px solid var(--am-gold-dk);
  background:linear-gradient(180deg,#1E1210,#140C09);
  box-shadow:var(--am-frame), 0 4px 12px rgba(0,0,0,.45);
  color:var(--am-ink); text-decoration:none;
}
html body.dm-islespage a.v4-isc[href]:hover{ border-color:var(--am-gold); }
html body.dm-islespage a.v4-isc[href]:active{ transform:scale(.985); }
html body.dm-islespage .v4-isc.is-soon{ opacity:.55; }
html body.dm-islespage .v4-isc.is-target,
html body.dm-islespage .v4-isc.is-me{ border-color:#FCD000; box-shadow:0 0 0 3px rgba(252,208,0,.45); }
/* ★枠の比率は機種の絵（/img/dmm/model_*.webp＝760×292〜313）に合わせる。
     16:9 にしたら左右が切れてロゴの字が欠けた（2026-09-13 本番の実物で気づいた） */
html body.dm-islespage .v4-isc__img{
  position:relative; display:block; aspect-ratio:760/313;
  background-size:cover; background-position:center; background-color:#241410;
}
/* 機種の絵が無い島は、無地のグラデ（⛔ 別の機種の絵を代わりに出さない） */
html body.dm-islespage .v4-isc__img.is-noimg{
  background-image:linear-gradient(135deg,#3A1A12,#1A0D0A 60%,#4A3312) !important;
}
html body.dm-islespage .v4-isc__badge{
  position:absolute; left:6px; top:6px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:900; line-height:1.3;
  background:rgba(20,51,31,.9); color:#9BF0BC; border:1px solid #3FA56A;
}
html body.dm-islespage .is-full .v4-isc__badge{ background:rgba(90,14,14,.92); color:#FFD2CC; border-color:#E0564F; }
html body.dm-islespage .is-soon .v4-isc__badge{ background:rgba(40,30,26,.92); color:#D8CBB6; border-color:#7A6A5A; }
html body.dm-islespage .v4-isc__b{ display:flex; flex-direction:column; gap:5px; padding:8px 9px 9px; min-width:0; }
html body.dm-islespage .v4-isc__nm{ display:flex; align-items:flex-start; gap:4px; font-size:13.5px; font-weight:900; line-height:1.3; }
html body.dm-islespage .v4-isc__nm > span{
  flex:1; min-width:0; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
html body.dm-islespage .v4-isc__nm .chev{ flex:none; width:16px; height:16px; margin-top:1px; color:var(--am-gold); }
html body.dm-islespage .is-soon .v4-isc__nm .chev{ display:none; }
html body.dm-islespage .v4-isc__meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
html body.dm-islespage .v4-isc__kind{
  padding:1px 7px; border-radius:4px; font-size:11px; font-weight:800;
  color:var(--am-gold-hi); border:1px solid var(--am-gold-dk);
}
html body.dm-islespage .v4-isc__kind:empty{ display:none; }
html body.dm-islespage .v4-isc__range{ font-size:12px; font-weight:800; color:var(--am-gold); font-variant-numeric:tabular-nums; }
html body.dm-islespage .v4-isc__cnt{
  display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap;
  font-size:11.5px; font-weight:800; color:var(--am-ink-dim);
}
html body.dm-islespage .v4-isc__cnt b{ font-size:15px; color:#FFF6E2; font-variant-numeric:tabular-nums; }
html body.dm-islespage .v4-isc__busy{ display:inline-flex; align-items:center; gap:3px; }
html body.dm-islespage .v4-isc__busy svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }
html body.dm-islespage .v4-isc__free b{ color:#6FE49B; }
html body.dm-islespage .v4-isc__free small{ margin-left:1px; font-size:11px; }
@media (min-width:1024px){
  html body.dm-islespage .v4-isc__nm{ font-size:14.5px; }
  html body.dm-islespage .v4-isc__cnt{ font-size:12px; }
}

/* ── 台番号で開く ── */
html body.dm-islespage .v4-cd{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:10px 12px; }
html body.dm-islespage .v4-cd__l{ flex:none; font-size:12.5px; font-weight:800; color:var(--am-gold-hi); white-space:nowrap; }
html body.dm-islespage .v4-cd__i{
  flex:1; min-width:0; height:42px; padding:0 10px; box-sizing:border-box;
  font:inherit; font-size:16px; font-weight:800; color:var(--am-ink);
  background:#120A08; border:1px solid var(--am-gold-dk); border-radius:8px;
}
html body.dm-islespage .v4-cd__b{
  flex:none; height:42px; padding:0 14px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:900; color:#FFF0D6; white-space:nowrap;
  background:linear-gradient(180deg,#D4262B,var(--am-red-dk)); border:1px solid var(--am-gold);
}
html body.dm-islespage .v4-cd__miss{
  margin-top:8px; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:700;
  color:#FFD2CC; background:rgba(90,14,14,.6); border:1px solid #E0564F;
}

/* ── ホールマップ（画像があるときだけ） ── */
html body.dm-islespage .v4-map{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; background:var(--am-bg0); }
html body.dm-islespage .v4-map[hidden]{ display:none; }
html body.dm-islespage .v4-map__bar{
  flex:none; display:flex; align-items:center; gap:10px; height:56px; padding:0 12px;
  border-bottom:1px solid var(--am-gold-dk); color:var(--am-gold-hi); font-size:16px;
}
html body.dm-islespage .v4-map__bar b{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
html body.dm-islespage .v4-map__z,
html body.dm-islespage .v4-map__x{
  height:38px; min-width:38px; padding:0 12px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:800; color:var(--am-ink);
  background:#150C0A; border:1px solid var(--am-gold-dk);
}
html body.dm-islespage .v4-map__body{ flex:1; min-height:0; overflow:auto; padding:8px; }
html body.dm-islespage .v4-map__body img{ display:block; max-width:100%; height:auto; margin:0 auto; }
html body.dm-islespage .v4-map.is-zoom .v4-map__body img{ max-width:none; width:200%; }


/* ══════════════════════════════════════════════════════════════════════
   フッター ── **すっきりした文字だけの形**に統一（2026-09-13・Satoru 指示）
   > ご利用ガイド、よくある質問を含めた6項目は全てのページをこのすっきりしたスタイルに
   ⇒ 見本は一覧（halls.php）の文字だけのフッター。アイコン・札・「設定」を外した
     （設定はマイページから入れる）。言語の切り替えは **Satoru 判断で小さく残す**
     （ログイン後の画面ではここが唯一の切り替え口のため）。
   ⛔ 上の「7つのアイコン」の指定（§フッター・スマホ・高さ）は**消さずに上書き**している。
     ★ログイン画面など `.v2-stage:has(.v2-auth)` の指定は詳細度が高いので、同じ形の選択子も並べた。
   ══════════════════════════════════════════════════════════════════════ */
html .v2-foot,
html body.dm-page .dm-body .v2-foot,
html .v2-stage:has(.v2-auth) .v2-foot{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:4px 22px; margin-top:18px; padding:14px 8px 10px;
  background:none; border:0; border-top:1px solid rgba(217,176,99,.3);
  border-radius:0; box-shadow:none;
}
html .v2-foot > a,
html .v2-stage:has(.v2-auth) .v2-foot > a{
  display:inline-block; flex:0 0 auto; width:auto; min-width:0;
  padding:2px 0; border:0; gap:0;
  font-size:13.5px; font-weight:800; line-height:1.7; letter-spacing:0;
  color:var(--am-ink); text-align:center; white-space:nowrap; text-decoration:none;
}
html .v2-foot > a:hover{ color:var(--am-gold-hi); }
html .v4-foot__i{ display:none; }
html .v2-foot small,
html .v2-stage:has(.v2-auth) .v2-foot small{
  flex:0 0 100%; display:block; width:100%; margin-top:6px; padding:0; border:0;
  text-align:center; font-size:12px; font-weight:500; color:#C2AC85;
}
/* 言語の切り替え ── 文字だけ・区切り線・いまの言語は金の太字 */
html .v2-foot .v2-lang,
html body.dm-page .v2-foot .v2-lang{
  flex:0 0 100%; display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  margin-top:8px; padding:0; background:none; border:0; box-shadow:none;
}
html .v2-foot .v2-lang a,
html body.dm-page .v2-foot .v2-lang a{
  padding:0 10px; border:0; border-left:1px solid rgba(217,176,99,.35); border-radius:0;
  background:none; font-size:12px; font-weight:700; line-height:1.3; color:var(--am-ink-dim);
}
html .v2-foot .v2-lang a:first-child,
html body.dm-page .v2-foot .v2-lang a:first-child{ border-left:0; }
html .v2-foot .v2-lang[data-lang=ja] a[data-l=ja],
html .v2-foot .v2-lang[data-lang=en] a[data-l=en],
html .v2-foot .v2-lang[data-lang=ko] a[data-l=ko],
html .v2-foot .v2-lang[data-lang=tw] a[data-l=tw],
html .v2-foot .v2-lang[data-lang=cn] a[data-l=cn],
html body.dm-page .v2-foot .v2-lang[data-lang=ja] a[data-l=ja],
html body.dm-page .v2-foot .v2-lang[data-lang=en] a[data-l=en],
html body.dm-page .v2-foot .v2-lang[data-lang=ko] a[data-l=ko],
html body.dm-page .v2-foot .v2-lang[data-lang=tw] a[data-l=tw],
html body.dm-page .v2-foot .v2-lang[data-lang=cn] a[data-l=cn]{
  background:none; border-color:rgba(217,176,99,.35); color:var(--am-gold-hi); font-weight:900;
}
@media (max-width:600px){
  html .v2-foot,
  html body.dm-page .dm-body .v2-foot,
  html .v2-stage:has(.v2-auth) .v2-foot{ gap:2px 16px; }
  html .v2-foot > a,
  html .v2-stage:has(.v2-auth) .v2-foot > a{ font-size:12.5px; }
}
/* PC のログイン画面ではフッターを画面の下に固定している（上の指定）。
   ★文字だけにすると背景の絵に字が重なるので、固定のときだけ暗い地を敷く。 */
@media (min-width:1024px){
  html .v2-stage:has(.v2-auth) .v2-foot{
    background:rgba(12,6,5,.92); border-top:1px solid var(--am-gold-dk); padding:10px 8px 8px;
  }
}

/* ⛔ v2 の画面（利用規約・よくある質問・プロフィール・メール変更 など）は、
     フッターの後ろが**明るい灰色（.v2-pad = #F4F4F4）**だった。暗い箱をやめて文字だけにしたら、
     生成りの字が**ほとんど読めなくなった**（2026-09-13 本番のスマホ幅で撮って気づいた・15画面ほど）。
   ⇒ 明るい地の画面だけ、字を濃い色にする。★ログイン・登録（.v2-auth）は暗い地なのでそのまま。 */
html .v2-pad .v2-foot{ border-top-color:rgba(59,36,19,.18); }
html .v2-pad .v2-foot > a{ color:#3B2413; }
html .v2-pad .v2-foot > a:hover{ color:#8A1A12; }
html .v2-pad .v2-foot small{ color:#7A6A5A; }
html .v2-pad .v2-foot .v2-lang a{ color:#6B5A4A; border-left-color:rgba(59,36,19,.22); }
html .v2-pad .v2-foot .v2-lang[data-lang=ja] a[data-l=ja],
html .v2-pad .v2-foot .v2-lang[data-lang=en] a[data-l=en],
html .v2-pad .v2-foot .v2-lang[data-lang=ko] a[data-l=ko],
html .v2-pad .v2-foot .v2-lang[data-lang=tw] a[data-l=tw],
html .v2-pad .v2-foot .v2-lang[data-lang=cn] a[data-l=cn]{ color:#8A1A12; border-left-color:rgba(59,36,19,.22); }
html .v2-pad .v2-foot .v2-lang a:first-child{ border-left:0; }


/* ══════════════════════════════════════════════════════════════════════
   画面⑥ 台を選ぶ（index2.php・2026-09-13・外注デザイン⑥）
   正本 = A-amuse新デザイン/06_台を選ぶ_PC.png ・ 06_台を選ぶ_SP.png
   ★Satoru 判断: 上は島名の帯だけ／台番号は PC もスマホも**U字のまま**（実物の向かい合わせを残す）／
     スマホの縦看板は出さない（素材が無い）。
   ★足したのは「台カードの機種の絵と名前」「台番号の札の状態の文字」の2つだけ。
   ⛔ 台カードの .am-card__head / .am-stats / .card-footer は5秒ごとに差し替わる。ここでは触らない。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 台カードの機種の絵と名前（見出しと数字の間） ── */
html body#index.dm-page .am-model{ display:flex; flex-direction:column; gap:5px; margin:0 12px 6px; min-width:0; }
html body#index.dm-page .am-model__img{
  display:block; width:100%; aspect-ratio:760/313; border-radius:6px;
  background-size:cover; background-position:center; background-color:#241410;
  border:1px solid var(--am-gold-dk);
}
html body#index.dm-page .am-model__nm{
  font-size:12.5px; font-weight:800; line-height:1.3; color:var(--am-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── 台番号の札に状態の文字（⛔ 色だけで分けない） ── */
html body#index.dm-page .iv__s{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  line-height:1.1; padding:0;
}
html body#index.dm-page .iv__s b{ font-size:15px; font-weight:900; }
html body#index.dm-page .iv__s small{ font-size:10px; font-weight:800; white-space:nowrap; }
html body#index.dm-page .iv--v .iv__s{ width:80px; height:46px; }
html body#index.dm-page .iv--h .iv__s{ width:64px; height:46px; }

/* ── 台カードの数字とスランプグラフは**白地**（2026-09-13・Satoru 指示）──
   > 各データーとスランプグラフの背景色はDMMの時みたいに白にしてください。その方が見えやすいです。
   ⇒ 暗い地に金の数字（§2・§9 の指定）をやめ、**数字の箱とグラフだけ白地に濃い字**へ戻す。
     カードの枠・見出し・機種の絵・ボタンは暗いまま。
   ★BB（赤）・RB（青）・使用中の台の「現在のゲーム数」（赤）・線の緑/赤は**意味のある色**なので残す。
     ⛔ 数字の色の指定は、赤・青の指定（dmm_ui.css）より**詳細度を上げない**形で書く（上げると赤青が消える）。
   ⛔ .am-stats は5秒ごとに中身が差し替わるが、箱そのもの（class）は残るので、ここは効き続ける。 */
html body#index.dm-page .am-stats{
  background:#FFFFFF !important; border:1px solid var(--am-gold-dk) !important;
  border-radius:8px !important; padding:2px 10px !important;
}
/* ⛔ RB の青は暗い地向けの水色（--blue #7FB3F0）が効いていて、白地では薄すぎた（実測）。
     ⇒ 数字の箱の中だけ、青と赤を白地で読める濃さに戻す（変数の上書き＝赤青の指定の強さは変えない） */
html body#index.dm-page .am-stats{ --blue:#1E6FD9; --dm-blue:#1E6FD9; --red:#D62828; --dm-red:#D62828; }
html body#index.dm-page .am-stat{ border-bottom-color:#E4E4E4 !important; }
html body#index.dm-page .am-stat .k{ color:#333333 !important; }
html body#index.dm-page .am-stat .v{ color:#1A1A1A !important; }
html body#index.dm-page .am-stat .u{ color:#666666; }
html body#index.dm-page .am-card[data-assign="1"] .am-now .v{ color:#E5322D !important; }
html body#index.dm-page .am-slump{ background:#FFFFFF; border:1px solid var(--am-gold-dk); }
html body#index.dm-page .mg-zero{ stroke:#BDBDBD; }
html body#index.dm-page .mg-none{ fill:#999999; }
/* ⛔ 白い箱に余白を足したら、**カードが狭い幅**で見出しが「総ゲー…」「大当…」と切れた（実測）。
     画面幅では決まらない（390px は2列で狭い／768px・1024px は3〜4列で狭い／1440px は広い）。
   ⇒ **カード自体の幅**（.am-body を container に）で詰め方を切り替える。
     ★320〜1440px の7幅で「見出しが切れた数」を測って 0 を確かめた。 */
html body#index.dm-page .am-body{ container-type:inline-size; }
@container (max-width:260px){
  html body#index.dm-page .am-stats{ padding:2px 6px !important; }
  html body#index.dm-page .am-stat{ gap:4px !important; }
  html body#index.dm-page .am-stat .k{ font-size:10px !important; letter-spacing:-.02em !important; }
  html body#index.dm-page .am-stat .v{ font-size:15px !important; }
  html body#index.dm-page .am-stat--two .v{ font-size:14px !important; }
  html body#index.dm-page .am-stat--two .am-sub{ font-size:9.5px; }
  html body#index.dm-page .am-stat--two .am-sub--gap{ margin-left:3px; }
}
@container (max-width:150px){
  html body#index.dm-page .am-stats{ padding:1px 4px !important; }
  html body#index.dm-page .am-stat .k{ font-size:9px !important; letter-spacing:-.04em !important; }
  html body#index.dm-page .am-stat .v{ font-size:13px !important; }
  html body#index.dm-page .am-stat--two .v{ font-size:12px !important; }
  html body#index.dm-page .am-stat--two .am-sub{ font-size:8.5px; }
  html body#index.dm-page .am-stat .u{ font-size:8px; }
}
/* 「グラフ」で開く大きなグラフも同じく白地（枠の中の図だけ） */
html .mg-body .mg-svg{ background:#FFFFFF; border-color:#DDDDDD; }

/* ── 台カード下の「使用中」を赤に（2026-09-15・Satoru 指示「現在は青です。赤に変更」）──
   ★2026-09-13 に青にしていた（「使用中のボタンは青色に」）。色はサイトの赤いボタン（.dm-btn）と同じ赤。
   ★対象は p.notavailable だけ。準備中・メンテ・営業時間外（p.maintenance / p.closed）は灰色のまま。
   ★5秒ごとに .card-footer の中身が差し替わっても、class 名で当てているので効き続ける。
   ⛔ 押せるボタンではない（札）。見た目だけ変える。 */
html body#index.dm-page .am-card .card-footer p.notavailable{
  background:linear-gradient(180deg,#D4262B 0%,#C0161C 45%,#6E0A0E 100%) !important;
  color:#FFF3DA !important; border:1px solid #6E0A0E !important;
}
/* ── 台カード下の「グラフ」ボタンを緑に（2026-09-15・Satoru 指示「グラフボタンの背景は緑に」）──
   ★サイトの緑（--am-green）を、使用中の赤と同じ立体感のグラデーションで。押すと「データ」に変わる同じボタン。 */
html body#index.dm-page .am-card .am-toggle{
  background:linear-gradient(180deg,#46BE72 0%,var(--am-green) 45%,#1E6B3B 100%) !important;
  color:#FFFFFF !important; border:1px solid #1E6B3B !important;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* ══════════════════════════════════════════════════════════════════════
   外注第2弾① ランキング（ranking.php・2026-09-14）
   正本 = 外注デザイン第二段/01_ランキング PC版.png ・ スマホ版.png
   ★PC: 左に「範囲＋部門＋注記」、右に順位。スマホ: 上から 部門 → 注記 → 順位（意匠の並び）
   ★1〜3位のメダルは素材待ち（2026-09-14 昼以降に納品）。いまは CSS で金・銀・銅の丸を描いている
     ⇒ 素材が届いたら .v4-rk__row.top1〜3 .v4-rk__no の background を絵に差し替えるだけ
   ══════════════════════════════════════════════════════════════════════ */
html body.dm-rankpage .v4-rk{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:1024px){
  html body.dm-rankpage .v4-rk{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:14px; align-items:start; }
}
html body.dm-rankpage .v4-rk__side{ display:flex; flex-direction:column; gap:12px; min-width:0; }

/* ── 部門 ── */
html body.dm-rankpage .v4-rk__nav{ display:block; padding:12px; }
html body.dm-rankpage .v4-rk__scope{
  padding:2px 4px 10px; font-size:19px; font-weight:900; letter-spacing:.04em; color:var(--am-gold-hi);
}
@media (min-width:1024px){
  /* PC の意匠は「赤い札」 */
  html body.dm-rankpage .v4-rk__scope{
    margin-bottom:8px; padding:12px 8px; border-radius:8px; text-align:center; font-size:17px;
    background:linear-gradient(180deg,#8E1A16,#4E0C0A); border:1px solid var(--am-gold-dk);
    box-shadow:var(--am-frame);
  }
}
html body.dm-rankpage .v4-rk__k{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px;
  color:var(--am-ink); text-decoration:none; border-top:1px solid rgba(217,176,99,.22);
}
html body.dm-rankpage .v4-rk__k:first-of-type{ border-top:0; }
html body.dm-rankpage .v4-rk__kt{ flex:1; min-width:0; }
html body.dm-rankpage .v4-rk__kt b{ display:block; font-size:16px; font-weight:900; line-height:1.35; color:var(--am-ink); }
html body.dm-rankpage .v4-rk__kt small{ display:block; margin-top:2px; font-size:12.5px; font-weight:700; color:var(--am-ink-dim); }
html body.dm-rankpage .v4-rk__k .chev{ flex:none; width:18px; height:18px; color:var(--am-gold); }
html body.dm-rankpage .v4-rk__k.on{
  background:linear-gradient(180deg,#A3171B,#5E0B0E); border:1px solid var(--am-gold); border-top-color:var(--am-gold);
  box-shadow:var(--am-frame);
}
html body.dm-rankpage .v4-rk__k.on + .v4-rk__k{ border-top-color:transparent; }
html body.dm-rankpage .v4-rk__k.on .v4-rk__kt small{ color:#F3D9B0; }
html body.dm-rankpage .v4-rk__k.on .chev{ color:#FFE6B5; }
html body.dm-rankpage .v4-rk__k:active{ filter:brightness(.94); }

/* ── 注記・全体へ戻る ── */
html body.dm-rankpage .v4-rk__note{ display:block; padding:12px 14px; font-size:13.5px; line-height:1.7; color:var(--am-ink); }
html body.dm-rankpage .v4-rk__all{ display:block; padding:12px 14px; font-size:14px; font-weight:800; color:var(--am-gold-hi); text-decoration:none; }

/* ── 順位 ── */
html body.dm-rankpage .v4-rk__main{ display:block; padding:14px 12px 12px; min-width:0; }
html body.dm-rankpage .v4-rk__ttl{ margin:0 4px; font-size:20px; font-weight:900; color:var(--am-gold-hi); }
html body.dm-rankpage .v4-rk__lead{ margin:4px 4px 10px; font-size:13px; font-weight:700; color:var(--am-ink-dim); }
html body.dm-rankpage .v4-rk__list{ border-top:1px solid rgba(217,176,99,.45); }
html body.dm-rankpage .v4-rk__row{
  display:flex; align-items:center; gap:12px; padding:10px 8px;
  border-bottom:1px solid rgba(217,176,99,.28); color:var(--am-ink); text-decoration:none;
}
html body.dm-rankpage .v4-rk__row:hover{ background:rgba(255,225,170,.05); }
html body.dm-rankpage .v4-rk__row:active{ background:rgba(255,225,170,.10); }
html body.dm-rankpage .v4-rk__no{
  flex:none; width:36px; height:36px; border-radius:50%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:var(--am-gold-hi); font-variant-numeric:tabular-nums;
  border:2px solid var(--am-gold); background:transparent;
}
/* 1〜3位（素材が届くまでの仮の丸） */
html body.dm-rankpage .v4-rk__row.top1 .v4-rk__no,
html body.dm-rankpage .v4-rk__row.top2 .v4-rk__no,
html body.dm-rankpage .v4-rk__row.top3 .v4-rk__no{
  width:40px; height:40px; font-size:18px; color:#2A1608; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 4px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.5);
}
html body.dm-rankpage .v4-rk__row.top1 .v4-rk__no{ background:radial-gradient(circle at 40% 30%,#FFF1B0,#E8B830 55%,#9A6A10); border-color:#FFE08A; }
html body.dm-rankpage .v4-rk__row.top2 .v4-rk__no{ background:radial-gradient(circle at 40% 30%,#FFFFFF,#C8CCD2 55%,#7C8088); border-color:#EEF0F2; }
html body.dm-rankpage .v4-rk__row.top3 .v4-rk__no{ background:radial-gradient(circle at 40% 30%,#FFD2A8,#C9803F 55%,#7A4414); border-color:#F0B27A; }
html body.dm-rankpage .v4-rk__tx{ flex:1; min-width:0; }
html body.dm-rankpage .v4-rk__tx b{
  display:block; font-size:16px; font-weight:800; color:#FFF3DC;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html body.dm-rankpage .v4-rk__tx i{
  display:block; margin-top:2px; font-style:normal; font-size:12.5px; font-weight:700; color:var(--am-ink-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html body.dm-rankpage .v4-rk__v{
  flex:none; font-size:22px; font-weight:900; color:#FFD98A; font-variant-numeric:tabular-nums; white-space:nowrap;
}
html body.dm-rankpage .v4-rk__v small{ margin-left:5px; font-size:14px; font-weight:800; color:#F2C66A; }
html body.dm-rankpage .v4-rk__v small:empty{ display:none; }
html body.dm-rankpage .v4-rk__empty{ padding:24px 8px; text-align:center; font-size:13.5px; color:var(--am-ink-dim); }
@media (max-width:420px){
  html body.dm-rankpage .v4-rk__row{ gap:9px; padding:9px 4px; }
  html body.dm-rankpage .v4-rk__tx b{ font-size:14.5px; }
  html body.dm-rankpage .v4-rk__tx i{ font-size:11.5px; }
  html body.dm-rankpage .v4-rk__v{ font-size:18px; }
  html body.dm-rankpage .v4-rk__v small{ font-size:12px; margin-left:3px; }
}

/* ══════════════════════════════════════════════════════════════════════
   外注第2弾 ②〜⑦（2026-09-14）＋ 全画面の共通部品
   正本 = 外注デザイン第二段/02_イベント情報〜07_サポート（PC・スマホ・小窓・帯）
   ★Satoru 決定（09-14「全部、間違いを正して実装」＝提案どおり）:
     ① フッターはスマホにも出す（全画面の決定どおり）
     ② 意匠に描かれていない状態（イベントのカード・0件／マイホール登録済み／サポートの吹き出し／音楽の交換・再生）は
        意匠の部品と色でこちらが組む
     ③ お知らせは全件押せる・本文は小窓 ④ 小窓のボタンは「閉じる」1つ＋×
     ⑤ 音楽の再生中の帯に位置バーと時間を残す ⑥ 歌い手は残す ⑦ 音楽は器に入れて言語切替だけ外す
     ⑧ 音楽は「ホーム」を光らせる ⑨ 戻るボタンは**全画面**赤丸＋題名は左寄せ
   ══════════════════════════════════════════════════════════════════════ */

/* ── ⑨ 戻るボタン＝赤丸＋金の縁、題名は左寄せ（全画面・スマホも） ── */
html body.dm-page .dm-bar{ gap:12px; }
html body.dm-page .dm-bar__back{
  width:40px; height:40px; border-radius:50%; box-sizing:border-box;
  background:radial-gradient(circle at 50% 35%, #C8232A, var(--am-red-dk));
  border:2px solid var(--am-gold); color:#FFEFD0;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,170,.35);
}
html body.dm-page .dm-bar__back svg{ width:20px; height:20px; }
html body.dm-page .dm-bar__back:active{ background:radial-gradient(circle at 50% 35%, #A81B21, #4E080B); }
html body.dm-page .dm-bar__ttl{ text-align:left; }
html body.dm-page .dm-bar__sp{ display:none; }

/* ── 切り替え（イベントの「マイホール／すべてのホール」） ── */
html body.dm-page .dm-seg{ padding:5px; gap:6px; border-radius:12px; border-color:var(--am-gold); box-shadow:var(--am-frame); margin-bottom:14px; }
html body.dm-page .dm-seg__b{ padding:13px 0; font-size:16px; font-weight:900; border-radius:9px; }
html body.dm-page .dm-seg__b.is-on{
  background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 50%, var(--am-red-dk) 100%);
  color:#FFF3DA; box-shadow:0 2px 6px rgba(0,0,0,.45);
}

/* ── 案内の枠（i の赤丸） ── */
html body.dm-page .dm-note{ align-items:center; gap:16px; padding:18px 20px; font-size:15px; line-height:1.75; border-color:var(--am-gold); }
html body.dm-page .dm-note .dm-row__ic{
  flex:none; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #D42A2F, var(--am-red-dk)); border:2px solid var(--am-gold);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
html body.dm-page .dm-note .dm-row__ic svg{ width:30px; height:30px; stroke:#FFF3DA; stroke-width:2.2; }
html body.dm-page .dm-note a{ color:#FFE6B5; }
html body.dm-page .dm-lead{ font-size:14px; line-height:1.75; color:var(--am-ink); margin-left:2px; margin-right:2px; }
@media (max-width:600px){
  html body.dm-page .dm-note{ align-items:flex-start; padding:16px; font-size:15px; }
  html body.dm-page .dm-note .dm-row__ic{ width:48px; height:48px; }
}

/* ── ② イベント（カードは意匠の枠と色で組む） ── */
html body.dm-events .dm-ev{ padding:16px 18px; margin-bottom:12px; border-color:var(--am-gold); }
html body.dm-events .dm-ev__hd{ gap:10px; margin-bottom:8px; }
html body.dm-events .dm-ev__kd{ font-size:12px; font-weight:900; padding:3px 10px; background:linear-gradient(180deg,#A3171B,#5E0B0E); color:#FFF0D6; border:1px solid var(--am-gold-dk); }
html body.dm-events .dm-ev__kd.is-hint{ background:linear-gradient(180deg,#D9B063,#8A6A22); color:#2A1608; }
html body.dm-events .dm-ev__hall{ font-size:14px; color:var(--am-gold-hi); }
html body.dm-events .dm-ev__st{ font-size:12px; padding:3px 10px; }
html body.dm-events .dm-ev__t{ font-size:19px; color:#FFF3DC; margin-bottom:4px; }
html body.dm-events .dm-ev__p{ font-size:13px; color:var(--am-ink-dim); margin-bottom:8px; }
html body.dm-events .dm-ev__po img{ border-color:var(--am-gold-dk); }
html body.dm-events .dm-ev__b{ font-size:14.5px; color:var(--am-ink); }

/* ── ③ お知らせ ── */
html body.dm-infopage .v4-nt{ display:block; padding:0 0 6px; border-color:var(--am-gold); overflow:hidden; }
html body.dm-infopage .v4-nt__hd{ margin:0; padding:18px 22px 14px; font-size:21px; font-weight:900; color:var(--am-gold-hi); border-bottom:1px solid rgba(217,176,99,.45); }
html body.dm-infopage .v4-nt__list{ padding:0 18px; }
html body.dm-infopage .v4-nt__row{
  display:flex; align-items:center; gap:16px; width:100%; padding:15px 6px; box-sizing:border-box;
  background:none; border:0; border-bottom:1px solid rgba(217,176,99,.28); color:var(--am-ink);
  font:inherit; text-align:left; cursor:pointer;
}
html body.dm-infopage .v4-nt__row:last-child{ border-bottom:0; }
html body.dm-infopage .v4-nt__row:hover{ background:rgba(255,225,170,.05); }
html body.dm-infopage .v4-nt__row .chev{ flex:none; width:20px; height:20px; margin-left:auto; color:var(--am-gold); }
html body.dm-infopage .v4-nt__dt{ flex:none; font-size:15px; font-weight:700; color:var(--am-ink-dim); font-variant-numeric:tabular-nums; }
html body.dm-infopage .v4-nt__bd{
  flex:none; padding:4px 14px; border-radius:6px; font-size:13px; font-weight:900; color:#FFE6B5;
  background:linear-gradient(180deg,#A3171B,#5E0B0E); box-shadow:inset 0 1px 0 rgba(255,220,170,.25);
}
html body.dm-infopage .v4-nt__bd:empty{ display:none; }
html body.dm-infopage .v4-nt__t{ flex:1; min-width:0; font-size:16.5px; font-weight:700; color:#FFF3DC; }
html body.dm-infopage .v4-nt__go{ display:block; font-size:12px; color:var(--am-gold); font-weight:800; }
html body.dm-infopage .v4-nt__go:empty{ display:none; }
html body.dm-infopage .v4-nt__empty{ display:flex; flex-direction:column; gap:6px; padding:36px 16px; text-align:center; color:var(--am-ink-dim); }
html body.dm-infopage .v4-nt__empty b{ font-size:16px; color:var(--am-ink); }
@media (max-width:700px){
  html body.dm-infopage .v4-nt__list{ padding:0 12px; }
  html body.dm-infopage .v4-nt__row{ display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"dt bd ch" "t t ch"; gap:8px 12px; padding:15px 4px; }
  html body.dm-infopage .v4-nt__row .v4-nt__dt{ grid-area:dt; font-size:14px; }
  html body.dm-infopage .v4-nt__row .v4-nt__bd{ grid-area:bd; justify-self:start; font-size:12px; }
  html body.dm-infopage .v4-nt__row .v4-nt__t{ grid-area:t; font-size:16px; }
  html body.dm-infopage .v4-nt__row .chev{ grid-area:ch; }
}

/* ── 小窓（お知らせ本文・音楽の交換で共通） ── */
html .v4-dlg{
  width:min(560px, calc(100% - 32px)); box-sizing:border-box; padding:26px 28px 24px; position:relative;
  color:var(--am-ink); background:linear-gradient(180deg,#221410,#130B09);
  border:2px solid var(--am-gold); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.7), var(--am-frame);
}
html .v4-dlg::backdrop{ background:rgba(0,0,0,.72); }
html .v4-dlg__x{ position:absolute; right:12px; top:12px; width:40px; height:40px; border:0; background:none; color:#FFF3DA; cursor:pointer; }
html .v4-dlg__x svg{ width:26px; height:26px; }
html .v4-dlg__btns{ display:flex; justify-content:center; gap:16px; margin:22px 0 0; }
html .v4-dlg__b{
  flex:1; max-width:240px; min-height:50px; border-radius:10px; font:inherit; font-size:17px; font-weight:900; cursor:pointer;
  color:#FFF3DA; background:linear-gradient(180deg,#2A1A14,#150C0A); border:2px solid var(--am-gold);
}
html .v4-dlg__b--main{ background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 50%, var(--am-red-dk) 100%); }
html .v4-dlg__b:active{ filter:brightness(.92); }
html .v4-nt__dlg .v4-nt__dh{ display:flex; align-items:center; gap:14px; padding:0 44px 14px 0; border-bottom:1px solid rgba(217,176,99,.55); }
html .v4-nt__dlg .v4-nt__dt{ font-size:17px; color:#FFF3DC; font-variant-numeric:tabular-nums; }
html .v4-nt__dlg .v4-nt__bd{ padding:4px 14px; border-radius:6px; font-size:13px; font-weight:900; color:#FFE6B5; background:linear-gradient(180deg,#A3171B,#5E0B0E); }
html .v4-nt__dlg .v4-nt__bd:empty{ display:none; }
html .v4-nt__dtl{ margin:0; padding:16px 0; font-size:22px; font-weight:900; color:#FFF3DC; border-bottom:1px solid rgba(217,176,99,.55); }
html .v4-nt__body{ padding:18px 2px 20px; font-size:16px; line-height:1.9; white-space:pre-wrap; word-break:break-word; border-bottom:1px solid rgba(217,176,99,.35); }

/* ── ④ マイページ ── */
html body.dm-mypage .v4-my{ display:flex; flex-direction:column; gap:14px; }
@media (min-width:1024px){
  html body.dm-mypage .v4-my{ flex-direction:row; align-items:flex-start; justify-content:center; gap:36px; padding-top:72px; }
  html body.dm-mypage .v4-my__me{ width:420px; }
  html body.dm-mypage .v4-my__acts{ flex:1; max-width:620px; margin-top:40px; }
}
html body.dm-mypage .v4-my__me{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 26px 26px; border-color:var(--am-gold); box-sizing:border-box; }
html body.dm-mypage .v4-my__av{
  width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:56px; font-weight:900; color:#2A1608; background:radial-gradient(circle at 45% 35%, #F7D98A, #D4A248 70%, #B8862E);
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.4);
}
html body.dm-mypage .v4-my__nm{ font-size:26px; font-weight:900; color:#FFF3DC; }
html body.dm-mypage .v4-my__hr{ align-self:stretch; height:1px; background:rgba(217,176,99,.55); margin:2px 0 4px; }
html body.dm-mypage .v4-my__bal{ align-self:stretch; display:flex; align-items:center; justify-content:space-between; padding:0 18px; height:54px; border-radius:10px; box-sizing:border-box; }
html body.dm-mypage .v4-my__bal .k{ font-size:20px; font-weight:900; }
html body.dm-mypage .v4-my__bal .v{ font-size:28px; font-weight:900; font-variant-numeric:tabular-nums; }
html body.dm-mypage .v4-my__bal--a{ background:linear-gradient(90deg,#FFF1C4,#E9C06A); color:#2A1608; }
html body.dm-mypage .v4-my__bal--c{ background:linear-gradient(90deg,#12131E,#0B0C14); border:1px solid rgba(217,176,99,.45); color:#6EB6FF; }
html body.dm-mypage .v4-my__need{ margin:0; font-size:14px; line-height:1.8; text-align:center; }
html body.dm-mypage .v4-my__acts{ display:flex; flex-direction:column; gap:14px; }
html body.dm-mypage .v4-my__row{ display:flex; align-items:center; gap:18px; padding:30px 26px; border-color:var(--am-gold); color:var(--am-ink); text-decoration:none; }
html body.dm-mypage .v4-my__row:active{ filter:brightness(.94); }
html body.dm-mypage .v4-my__ic{
  flex:none; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #7A1418, #3A0608); border:3px solid var(--am-gold);
}
html body.dm-mypage .v4-my__ic svg{ width:34px; height:34px; fill:none; stroke:#FFF3DA; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html body.dm-mypage .v4-my__tx{ flex:1; min-width:0; }
html body.dm-mypage .v4-my__tx b{ display:block; font-size:22px; font-weight:900; color:#FFF3DC; }
html body.dm-mypage .v4-my__tx i{ display:block; margin-top:4px; font-style:normal; font-size:14px; color:var(--am-ink); }
html body.dm-mypage .v4-my__row .chev{ flex:none; width:28px; height:28px; color:var(--am-gold); }
@media (max-width:600px){
  html body.dm-mypage .v4-my__av{ width:100px; height:100px; font-size:50px; }
  html body.dm-mypage .v4-my__row{ padding:20px 16px; gap:14px; }
  html body.dm-mypage .v4-my__ic{ width:54px; height:54px; }
  html body.dm-mypage .v4-my__tx b{ font-size:19px; }
  html body.dm-mypage .v4-my__tx i{ font-size:12.5px; }
}

/* ── ⑤ マイホール ── */
html body.dm-halls .dm-note > span:last-child::first-line{ font-weight:900; }
html body.dm-halls .dm-h2{
  margin:24px 2px 10px; padding-bottom:10px; font-size:24px;
  background:linear-gradient(90deg, var(--am-gold) 0%, rgba(217,176,99,.6) 60%, rgba(217,176,99,0) 100%) left bottom/100% 2px no-repeat;
}
html body.dm-halls .dm-search{ gap:10px; margin:14px 0 14px; }
html body.dm-halls .dm-search__sel,
html body.dm-halls .dm-search__i,
html body.dm-halls .dm-search__b{ height:54px; font-size:17px; border-radius:10px; }
html body.dm-halls .dm-search__sel{ width:170px; padding:0 14px; border:2px solid var(--am-gold-dk); }
html body.dm-halls .dm-search__i{ border:2px solid var(--am-gold-dk); }
html body.dm-halls .dm-search__b{ padding:0 26px; font-weight:900; background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 50%, var(--am-red-dk) 100%); color:#FFF3DA; border:2px solid var(--am-gold); }
html body.dm-halls .dm-body > .dm-card:not(.dm-note):not(.dm-myhall){ border-color:var(--am-gold); }
html body.dm-halls .dm-row--pad{ padding:12px 18px; }
html body.dm-halls .dm-row__k{ font-size:18px; font-weight:900; }
html body.dm-halls .dm-row__sub{ display:block; margin-top:2px; font-size:13px; font-weight:700; color:var(--am-ink-dim); }
html body.dm-halls .dm-tog{ min-height:48px; padding:0 22px; font-size:16px; font-weight:900; border:2px solid var(--am-gold); }
html body.dm-halls .dm-myhall{ border-color:var(--am-gold); margin-bottom:12px; }
@media (max-width:600px){
  html body.dm-halls .dm-search{ flex-direction:column; }
  html body.dm-halls .dm-search__sel{ width:100%; }
  html body.dm-halls .dm-search__i{ flex:none; width:100%; box-sizing:border-box; }
  html body.dm-halls .dm-search__b{ width:100%; }
  html body.dm-halls .dm-row__k{ font-size:16.5px; }
  html body.dm-halls .dm-tog{ min-height:44px; padding:0 14px; font-size:14.5px; }
  html body.dm-halls .dm-h2{ font-size:21px; }
}

/* ── ⑦ サポート（1枚の金枠・枠は画面の高さいっぱい・その下にフッター） ── */
html body.dm-suppage .sp-body{ display:block; padding:16px; }
html body.dm-suppage .sp-wrap{
  display:flex; flex-direction:column; height:calc(100% - 2px); min-height:460px; box-sizing:border-box;
  padding:0; overflow:hidden; background:linear-gradient(180deg,#1E1210,#150C0A); border:2px solid var(--am-gold);
}
html body.dm-suppage .sp-note{
  display:flex; align-items:center; gap:16px; margin:0; padding:18px 22px; border:0; border-radius:0;
  background:transparent; color:var(--am-ink); font-size:15px; line-height:1.7;
  border-bottom:2px solid var(--am-gold); box-shadow:0 1px 0 rgba(0,0,0,.4);
}
html body.dm-suppage .sp-note b{ color:#FFF3DC; font-size:16px; }
html body.dm-suppage .sp-note__ic{
  flex:none; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #D42A2F, var(--am-red-dk)); border:2px solid var(--am-gold);
}
html body.dm-suppage .sp-note__ic svg{ width:30px; height:30px; fill:none; stroke:#FFF3DA; stroke-width:2.2; stroke-linecap:round; }
html body.dm-suppage .sp-log{ padding:16px 18px 6px; }
html body.dm-suppage .sp-sys{ margin:auto 0; align-self:center; font-size:16px; color:var(--am-ink); }
html body.dm-suppage .sp-av{ background:radial-gradient(circle at 50% 35%, #7A1418, #3A0608); color:#FFE6B5; border:1.5px solid var(--am-gold-dk); width:34px; height:34px; }
html body.dm-suppage .sp-b{ background:#241612; border:1px solid var(--am-gold-dk); color:var(--am-ink); font-size:15px; }
html body.dm-suppage .sp-row--me .sp-b{ background:linear-gradient(180deg,#F3D98A,#D9B063); border-color:#D9B063; color:#2A1608; }
html body.dm-suppage .sp-t{ color:var(--am-ink-dim); font-size:11px; }
html body.dm-suppage .sp-dot{ background:var(--am-gold); }
html body.dm-suppage .sp-err{ color:#FF7A70; font-size:13px; margin:0 18px 8px; }
html body.dm-suppage .sp-foot{
  gap:12px; padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px)); align-items:stretch;
  background:transparent; border-top:2px solid var(--am-gold);
}
html body.dm-suppage .sp-in{
  min-height:52px; padding:13px 18px; border-radius:12px; font-size:16px;
  background:#120A08; color:var(--am-ink); border:2px solid var(--am-gold-dk);
}
html body.dm-suppage .sp-in::placeholder{ color:#8A7A66; }
html body.dm-suppage .sp-in:focus{ border-color:var(--am-gold); }
html body.dm-suppage .sp-send{
  height:auto; min-height:52px; padding:0 40px; border-radius:12px; font-size:17px; font-weight:900; color:#FFF3DA;
  background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 50%, var(--am-red-dk) 100%); border:2px solid var(--am-gold);
}
@media (max-width:600px){
  html body.dm-suppage .sp-body{ padding:12px; }
  html body.dm-suppage .sp-note{ align-items:flex-start; padding:16px; font-size:14.5px; }
  html body.dm-suppage .sp-note__ic{ width:48px; height:48px; }
  html body.dm-suppage .sp-foot{ flex-direction:column; }
  html body.dm-suppage .sp-send{ width:100%; }
}

/* ── ⑥ 音楽 ── */
html body.dm-musicpage .v2-foot .v2-lang{ display:none !important; }   /* ⑦ 言語の切り替えは出さない（2026-09-10 の指示） */
html body.dm-musicpage .mu-credit{ margin:6px 0 18px; text-align:center; font-size:13px; color:#8A7A66; }
html body.dm-musicpage .mu-wallet{ display:flex; align-items:center; justify-content:space-between; padding:22px 34px; border-color:var(--am-gold); }
html body.dm-musicpage .mu-wallet__k{ display:block; font-size:15px; font-weight:700; color:var(--am-ink); }
html body.dm-musicpage .mu-wallet__v{ display:block; font-size:64px; line-height:1.05; font-weight:900; color:#FFF6E2; font-variant-numeric:tabular-nums; }
html body.dm-musicpage .mu-wallet__v small{ margin-left:10px; font-size:36px; color:#F2C66A; }
html body.dm-musicpage .mu-wallet__r{ padding-left:44px; border-left:1px solid rgba(217,176,99,.45); text-align:center; }
html body.dm-musicpage .mu-wallet__r b{ display:block; margin-top:6px; font-size:24px; font-weight:900; color:#FFF6E2; }
html body.dm-musicpage .mu-wallet__r b small{ margin-left:4px; font-size:20px; color:#F2C66A; }
html body.dm-musicpage .mu-tabs{ display:flex; gap:6px; margin:22px 0 18px; border-bottom:3px solid var(--am-gold); overflow-x:auto; scrollbar-width:none; }
html body.dm-musicpage .mu-tabs::-webkit-scrollbar{ display:none; }
html body.dm-musicpage .mu-tab{
  flex:none; padding:12px 38px; border-radius:8px 8px 0 0; font:inherit; font-size:17px; font-weight:800; cursor:pointer;
  color:#FFE6B5; background:linear-gradient(180deg,#2A1A14,#150C0A); border:1px solid var(--am-gold-dk); border-bottom:0;
}
html body.dm-musicpage .mu-tab[aria-selected="true"]{ color:#FFF3DA; background:linear-gradient(180deg,#B01E23,#5E0B0E); border-color:var(--am-gold); }
html body.dm-musicpage .mu-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:1024px){ html body.dm-musicpage .mu-grid{ grid-template-columns:1fr 1fr; } }
html body.dm-musicpage .mu-card{ display:grid; grid-template-columns:160px minmax(0,1fr); gap:20px; padding:14px; border-color:var(--am-gold); }
html body.dm-musicpage .mu-card[hidden]{ display:none; }
html body.dm-musicpage .mu-cover{
  aspect-ratio:1; border-radius:6px; overflow:hidden; display:flex; align-items:flex-end; padding:8px; box-sizing:border-box;
  background:linear-gradient(145deg,#6E0A0E,#1A0806); color:#FFF3DA; font-size:12px; font-weight:900;
}
html body.dm-musicpage .mu-cover.has-jk{ background-size:cover; background-position:center; }
html body.dm-musicpage .mu-cover.has-jk span{ display:none; }
html body.dm-musicpage .mu-det{ min-width:0; display:flex; flex-direction:column; }
html body.dm-musicpage .mu-ttl{ margin:2px 0 10px; font-size:18px; font-weight:800; color:#FFF3DC; line-height:1.4; overflow-wrap:anywhere; }
html body.dm-musicpage .mu-scene-k{ font-size:12px; color:var(--am-ink-dim); font-weight:700; }
html body.dm-musicpage .mu-scene{ margin:2px 0 6px; font-size:17px; font-weight:900; color:#FFF3DC; }
html body.dm-musicpage .mu-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-bottom:12px; font-size:15px; color:var(--am-ink); }
html body.dm-musicpage .mu-meta > span{ padding:0 12px; border-left:1px solid rgba(217,176,99,.55); line-height:1.2; }
html body.dm-musicpage .mu-meta > span:first-child{ padding-left:0; border-left:0; }
html body.dm-musicpage .mu-meta > span:empty{ display:none; }
html body.dm-musicpage .mu-meta b{ font-weight:700; }
html body.dm-musicpage .mu-acts{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; margin-top:auto; }
html body.dm-musicpage .mu-pv,
html body.dm-musicpage .mu-buy{
  min-height:44px; padding:0 26px; border-radius:999px; font:inherit; font-size:16px; font-weight:900; cursor:pointer;
}
html body.dm-musicpage .mu-pv{ color:#FFF3DA; background:linear-gradient(180deg,#2A1A14,#150C0A); border:2px solid var(--am-gold); }
html body.dm-musicpage .mu-buy{ color:#FFF3DA; background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 50%, var(--am-red-dk) 100%); border:2px solid var(--am-gold); }
html body.dm-musicpage .mu-short{ font-size:16px; font-weight:900; color:#FFD24A; }
html body.dm-musicpage .st-can .mu-short,
html body.dm-musicpage .st-short .mu-buy,
html body.dm-musicpage .st-own .mu-buy,
html body.dm-musicpage .st-own .mu-short,
html body.dm-musicpage .st-own .mu-cost{ display:none; }
html body.dm-musicpage .st-own .mu-pv{ border-color:#56B77B; color:#9BF0BC; }   /* 交換済み＝いつでも全編 */
html body.dm-musicpage .mu-empty{ padding:40px 20px; text-align:center; color:var(--am-ink-dim); }
@media (max-width:700px){
  html body.dm-musicpage .mu-wallet{ padding:18px 22px; }
  html body.dm-musicpage .mu-wallet__v{ font-size:52px; }
  html body.dm-musicpage .mu-wallet__v small{ font-size:28px; }
  html body.dm-musicpage .mu-wallet__r{ padding-left:22px; }
  html body.dm-musicpage .mu-wallet__r b{ font-size:20px; }
  html body.dm-musicpage .mu-tabs{ gap:4px; margin:16px -4px 14px; overflow:visible; }
  html body.dm-musicpage .mu-tab{ flex:1 1 0; min-width:0; padding:10px 4px; font-size:13px; line-height:1.3; white-space:normal; }
  html body.dm-musicpage .mu-card{ grid-template-columns:118px minmax(0,1fr); gap:14px; padding:12px; }
  html body.dm-musicpage .mu-ttl{ font-size:16px; margin-bottom:6px; }
  html body.dm-musicpage .mu-scene{ font-size:15.5px; }
  html body.dm-musicpage .mu-meta{ font-size:13.5px; margin-bottom:8px; }
  html body.dm-musicpage .mu-pv, html body.dm-musicpage .mu-buy{ min-height:40px; padding:0 18px; font-size:14.5px; }
  html body.dm-musicpage .mu-short{ font-size:14.5px; }
}
/* 再生中の帯（.dm の直下＝内容の下端・スマホは下タブの上） */
html body.dm-musicpage .mu-player{
  flex:none; display:flex; align-items:center; gap:18px; padding:10px 24px;
  background:linear-gradient(180deg,#2A1610,#140A08); border-top:2px solid var(--am-gold); box-shadow:0 -4px 16px rgba(0,0,0,.5);
}
html body.dm-musicpage .mu-player[hidden]{ display:none; }
html body.dm-musicpage .mu-player__cover{ flex:none; width:56px; height:56px; border-radius:4px; background:#241410 center/cover no-repeat; border:1px solid var(--am-gold-dk); }
html body.dm-musicpage .mu-player__info{ flex:1; min-width:0; display:flex; align-items:center; gap:18px; }
html body.dm-musicpage .mu-player__t{ flex:none; max-width:40%; font-size:18px; font-weight:800; color:#FFF3DC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html body.dm-musicpage .mu-player audio{ flex:1; min-width:0; height:40px; }
html body.dm-musicpage .mu-eq{ flex:none; display:flex; align-items:flex-end; gap:3px; height:28px; }
html body.dm-musicpage .mu-eq i{ width:4px; height:30%; background:linear-gradient(0deg,#E0453A,#F2C66A); border-radius:1px; }
html body.dm-musicpage .mu-player.is-on .mu-eq i{ animation:muEq 1s ease-in-out infinite; }
html body.dm-musicpage .mu-eq i:nth-child(2){ animation-delay:.15s !important; } html body.dm-musicpage .mu-eq i:nth-child(3){ animation-delay:.3s !important; }
html body.dm-musicpage .mu-eq i:nth-child(4){ animation-delay:.45s !important; } html body.dm-musicpage .mu-eq i:nth-child(5){ animation-delay:.6s !important; }
@keyframes muEq{ 0%,100%{ height:25%; } 50%{ height:100%; } }
@media (prefers-reduced-motion:reduce){ html body.dm-musicpage .mu-player.is-on .mu-eq i{ animation:none; height:70%; } }
html body.dm-musicpage .mu-stop{
  flex:none; min-height:44px; padding:0 30px; border-radius:8px; font:inherit; font-size:17px; font-weight:900; cursor:pointer;
  color:#FFF3DA; background:linear-gradient(180deg,#B01E23,#5E0B0E); border:2px solid var(--am-gold);
}
@media (max-width:700px){
  html body.dm-musicpage .mu-player{ gap:10px; padding:8px 10px; flex-wrap:wrap; }
  html body.dm-musicpage .mu-player__cover{ width:44px; height:44px; }
  html body.dm-musicpage .mu-player__info{ flex-direction:column; align-items:stretch; gap:4px; }
  html body.dm-musicpage .mu-player__t{ max-width:none; font-size:15px; }
  html body.dm-musicpage .mu-player audio{ flex:none; width:100%; height:34px; }
  html body.dm-musicpage .mu-eq{ display:none; }
  html body.dm-musicpage .mu-stop{ min-height:40px; padding:0 14px; font-size:15px; }
}
/* 交換の小窓 */
html .mu-dlg{ text-align:center; }
html .mu-dlg__q{ margin:12px 30px 20px; font-size:24px; font-weight:900; color:#FFF3DC; }
html .mu-dlg__q em{ font-style:normal; color:#FFD24A; font-size:1.15em; }
html .mu-dlg__song{ display:flex; align-items:center; justify-content:center; gap:22px; }
html .mu-dlg__cover{ width:128px; height:128px; aspect-ratio:1; border-radius:4px; background-size:cover; background-position:center; }
html .mu-dlg__t{ font-size:22px; font-weight:800; color:#FFF3DC; text-align:left; }
html .mu-dlg .v4-dlg__btns{ margin-top:26px; }
@media (max-width:600px){
  html .mu-dlg__q{ font-size:19px; margin:16px 20px 16px; }
  html .mu-dlg__cover{ width:96px; height:96px; }
  html .mu-dlg__t{ font-size:17px; }
}
html .mu-toast{
  position:fixed; z-index:60; top:20px; left:50%; transform:translate(-50%,-20px); opacity:0; pointer-events:none;
  padding:12px 20px; border-radius:10px; font-weight:800; color:#FFF3DA;
  background:linear-gradient(180deg,#2A1610,#140A08); border:2px solid var(--am-gold); transition:.25s;
}
html .mu-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ── 2026-09-14 実物で気づいた直し ──
   ⛔ 題名の光（text-shadow）が overflow:hidden で四角く切り取られ、スマホで題名の後ろに暗い四角が出ていた
      ⇒ 光のぶんの内側余白を取り、同じだけ外へずらす（見た目の位置は変えない） */
html body.dm-page .dm-bar__ttl{ padding:12px 12px 12px 12px; margin:-12px 0 -12px -12px; }
/* ⛔ 曲カードが「.dm-card + .dm-card{margin-top:12px}」を受けて、2列目が1段下にずれていた */
html body.dm-musicpage .mu-grid > .mu-card{ margin:0; }
@media (max-width:700px){
  /* スマホ: 「試聴」と「あと○枚」を1行に（意匠） */
  html body.dm-musicpage .mu-acts{ flex-wrap:nowrap; gap:10px; }
  html body.dm-musicpage .mu-pv, html body.dm-musicpage .mu-buy{ flex:none; padding:0 14px; font-size:14px; }
  html body.dm-musicpage .mu-short{ font-size:13.5px; white-space:nowrap; }
  html body.dm-halls .dm-tog{ padding:0 12px; font-size:13.5px; white-space:nowrap; }
  html body.dm-halls .dm-row__k{ font-size:16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   外注第2弾 ⑧〜㉒ 設定まわり・読み物（2026-09-14 夕）
   正本 = 外注デザイン第二段/08_設定〜22_パスワード再設定
   ★v2 の器（中央の細い柱）の18画面を dm-page の器に入れ替えた（body.dm-v2page）。
     中身の部品（.v2-form / .v2-alert / .v2-btn / .v2-menu / .v2-doc …）はそのまま使い、
     色の変数を暗い金に差し替えて、大きさ・枠だけ意匠に合わせる。
   ══════════════════════════════════════════════════════════════════════ */
html body.dm-v2page{
  --v2-ink:#F6E9D2; --v2-muted:#C7B294; --v2-paper:#120A08; --v2-face:#1E1210; --v2-hair:#5A4318; --v2-gold:#F7E4B0;
}
html body.dm-v2page .v4-v2{
  display:block; box-sizing:border-box; width:100%; max-width:1100px; margin:6px auto 0; padding:26px 30px 28px;
  border:2px solid var(--am-gold); color:var(--am-ink); font-size:15px;
}
@media (max-width:700px){ html body.dm-v2page .v4-v2{ padding:18px 14px 20px; } }
/* v2 の部品が持っていた左右の余白（13px）は、カードの中では要らない */
html body.dm-v2page .v4-v2 .v2-form,
html body.dm-v2page .v4-v2 .v2-alert,
html body.dm-v2page .v4-v2 .v2-btns,
html body.dm-v2page .v4-v2 .v2-menu,
html body.dm-v2page .v4-v2 .v2-doc{ margin-left:0; margin-right:0; }
html body.dm-v2page .v4-v2 .v2-doc{ padding-left:0; padding-right:0; }

/* ── 入力 ── */
html body.dm-v2page .v2-field{ margin-bottom:18px; }
html body.dm-v2page .v2-label{ font-size:16.5px; font-weight:900; color:#FFF3DC; margin-bottom:8px; }
html body.dm-v2page .v2-req,
html body.dm-v2page .v2-label .req{
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:900; color:#FFF3DA;
  background:linear-gradient(180deg,#D4262B,#8E1216); border:0;
}
html body.dm-v2page .v2-input,
html body.dm-v2page .v2-select,
html body.dm-v2page .v2-textarea{
  min-height:52px; padding:12px 16px; border-radius:10px; font-size:16px;
  background:#120A08; color:var(--am-ink); border:2px solid var(--am-gold-dk);
}
html body.dm-v2page .v2-input:focus,
html body.dm-v2page .v2-select:focus,
html body.dm-v2page .v2-textarea:focus{ border-color:var(--am-gold); outline:none; box-shadow:0 0 0 3px rgba(217,176,99,.25); }
html body.dm-v2page .v2-input::placeholder,
html body.dm-v2page .v2-textarea::placeholder{ color:#8A7A66; }
html body.dm-v2page .v2-select option{ background:#1E1210; color:var(--am-ink); }
html body.dm-v2page .v2-value{
  min-height:48px; padding:12px 16px; border-radius:10px; box-sizing:border-box; font-size:16px;
  background:#120A08; color:var(--am-ink); border:2px solid var(--am-gold-dk);
}
html body.dm-v2page .v2-value--code{ text-align:center; font-size:22px; letter-spacing:.22em; color:#FFF3DC; }

/* ── 注意書き ── */
html body.dm-v2page .v2-alert{
  padding:14px 18px; border-radius:10px; font-size:15px; line-height:1.75; text-align:left;
  background:linear-gradient(180deg,rgba(120,18,22,.55),rgba(70,8,12,.55)); border:1px solid #C9434A; color:#FFE3DA;
}
html body.dm-v2page .v2-alert b{ color:#FFB4A8; }
html body.dm-v2page .v2-alert a{ color:#FFE6B5; }
html body.dm-v2page .v2-alert--info{
  text-align:left; background:linear-gradient(180deg,rgba(110,16,20,.45),rgba(50,8,10,.45));
  border:1px solid #C9434A; border-left:5px solid #E0453A; color:var(--am-ink);
}
html body.dm-v2page .v2-alert--info b{ color:#FF8A7E; font-size:16px; }
html body.dm-v2page .v2-alert--warn{ background:rgba(90,66,16,.45); border-color:var(--am-gold-dk); color:#F3E3C2; }

/* ── ボタン ── */
html body.dm-v2page .v2-btns{ gap:12px; margin-top:6px; }
html body.dm-v2page .v2-btn,
html body.dm-v2page .v2-btn:not(.v2-btn--sub){
  min-height:56px; padding:14px; border-radius:10px; font-size:18px; font-weight:900; letter-spacing:.04em;
  color:#FFF3DA; background:linear-gradient(180deg,#D4262B 0%, var(--am-red) 50%, var(--am-red-dk) 100%);
  border:2px solid var(--am-gold); box-shadow:0 3px 0 rgba(0,0,0,.45), 0 6px 18px rgba(180,40,20,.2); text-shadow:0 1px 0 rgba(0,0,0,.5);
}
html body.dm-v2page .v2-btn--sub{
  min-height:56px; border-radius:10px; font-size:18px; font-weight:900;
  color:#FFE6B5; background:linear-gradient(180deg,#241512,#150C0A); border:2px solid var(--am-gold); box-shadow:none;
}

/* ── 項目の並び（プロフィールの「メールアドレス変更」など） ── */
html body.dm-v2page .v2-menu{ background:none; border:0; box-shadow:none; display:flex; flex-direction:column; gap:10px; }
html body.dm-v2page .v2-menu a{
  min-height:52px; padding:12px 22px; border-radius:10px; font-size:17px; font-weight:800; color:#FFF3DC;
  background:linear-gradient(180deg,#1E1210,#150C0A); border:2px solid var(--am-gold-dk); border-bottom:2px solid var(--am-gold-dk);
}
html body.dm-v2page .v2-menu a:last-child{ border-bottom:2px solid var(--am-gold-dk); }
html body.dm-v2page .v2-menu .ar{ font-size:22px; color:var(--am-gold); }

/* ── 読み物（ご利用ガイド・よくある質問・特商法・利用規約・プライバシーポリシー） ── */
html body.dm-v2page .v2-doc{ color:var(--am-ink); font-size:15.5px; line-height:1.95; }
html body.dm-v2page .v2-doc h2,
html body.dm-v2page .v2-doc h3,
html body.dm-v2page .v2-doc h4{
  margin:26px 0 10px; padding-top:18px; font-size:20px; font-weight:900; color:#F7D98A; border-top:1px solid rgba(217,176,99,.55);
}
html body.dm-v2page .v2-doc > :first-child,
html body.dm-v2page .v2-doc .container > :first-child{ margin-top:0; padding-top:0; border-top:0; }
html body.dm-v2page .v2-doc strong,
html body.dm-v2page .v2-doc b{ color:#FFF3DC; }
html body.dm-v2page .v2-doc a{ color:#F7D98A; }
html body.dm-v2page .v2-doc hr{ border-top-color:rgba(217,176,99,.55); }
html body.dm-v2page .v2-doc table{ width:100%; border-collapse:collapse; }
html body.dm-v2page .v2-doc th,
html body.dm-v2page .v2-doc td{ padding:12px 14px; border:1px solid rgba(217,176,99,.4); vertical-align:top; text-align:left; }
html body.dm-v2page .v2-doc th{ width:28%; color:#F7D98A; background:rgba(0,0,0,.25); font-weight:900; }
@media (max-width:700px){
  html body.dm-v2page .v2-doc{ font-size:14.5px; }
  html body.dm-v2page .v2-doc h2, html body.dm-v2page .v2-doc h3, html body.dm-v2page .v2-doc h4{ font-size:17.5px; }
  html body.dm-v2page .v2-doc th, html body.dm-v2page .v2-doc td{ display:block; width:auto; border-top:0; }
  html body.dm-v2page .v2-doc tr:first-child th{ border-top:1px solid rgba(217,176,99,.4); }
}

/* ── 保存データ（行・小ボタン） ── */
html body.dm-v2-storage .st-sec{ margin:20px 0 10px; font-size:16px; color:#F7D98A; }
html body.dm-v2-storage .st-sec .r{ font-size:13px; }
html body.dm-v2-storage .st-card{ margin:0; background:#150C0A; border:2px solid var(--am-gold-dk); border-radius:10px; }
html body.dm-v2-storage .st-use__n{ font-size:32px; color:#FFF3DC; }
html body.dm-v2-storage .st-use__bar{ height:12px; background:#0C0605; border-color:var(--am-gold-dk); }
html body.dm-v2-storage .st-use__bar i{ background:linear-gradient(90deg,#E0453A,#F2C66A); }
html body.dm-v2-storage .st-use__t,
html body.dm-v2-storage .st-note,
html body.dm-v2-storage .st-empty{ font-size:14px; color:var(--am-ink-dim); }
html body.dm-v2-storage .st-note{ margin:10px 2px 0; }
html body.dm-v2page .v2-frow{ padding:14px 16px; border-bottom:1px solid rgba(217,176,99,.25); }
html body.dm-v2page .v2-frow__n b{ font-size:16px; color:#FFF3DC; }
html body.dm-v2page .v2-mini{
  min-height:40px; padding:0 18px; border-radius:8px; font-size:14px; font-weight:900; color:#FFE6B5;
  background:linear-gradient(180deg,#241512,#150C0A); border:2px solid var(--am-gold);
}
html body.dm-v2page .v2-mini--ng{ color:#FFF3DA; background:linear-gradient(180deg,#B01E23,#5E0B0E); }

/* ── ⑧ 設定（v3 の目次＋項目を dm-body の器に入れた・2026-09-14） ── */
html body.dm-setpage .v4-set{
  height:auto; min-height:0; overflow:visible; background:transparent; padding:0;
  display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width:1024px){ html body.dm-setpage .v4-set{ grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; } }
html body.dm-setpage .v4-set .v3-side,
html body.dm-setpage .v4-set .v3-main{ height:auto; overflow:visible; padding:0; background:transparent; }
html body.dm-setpage .v4-set .v3-main{ display:flex; flex-direction:column; gap:12px; }
html body.dm-setpage .v4-set .v3-card{
  background:linear-gradient(180deg,#1E1210,#150C0A); border:2px solid var(--am-gold); border-radius:12px;
  box-shadow:var(--am-frame), 0 4px 16px rgba(0,0,0,.45); overflow:hidden; margin:0;
}
html body.dm-setpage .v3-nav{ padding:10px; }
html body.dm-setpage .v3-nav__t{ padding:6px 10px 8px; font-size:14px; font-weight:800; color:var(--am-ink); }
html body.dm-setpage .v3-nav a{ display:block; padding:12px 18px; border-radius:8px; font-size:18px; font-weight:900; color:#FFF3DC; text-decoration:none; }
html body.dm-setpage .v3-nav a small{ display:block; margin-top:2px; font-size:13px; font-weight:700; color:var(--am-ink-dim); }
html body.dm-setpage .v3-nav a.on{ background:linear-gradient(90deg,#8E1A16,#4E0C0A); box-shadow:inset 4px 0 0 var(--am-gold); color:#FFF3DC; }
html body.dm-setpage .v3-grp{ padding:12px 22px 10px; font-size:14px; font-weight:800; color:var(--am-ink); border-bottom:1px solid rgba(217,176,99,.45); background:transparent; }
html body.dm-setpage .v3-row{
  display:flex; align-items:center; gap:16px; min-height:54px; padding:10px 22px; box-sizing:border-box;
  color:#FFF3DC; text-decoration:none; border-bottom:1px solid rgba(217,176,99,.25); background:transparent;
}
html body.dm-setpage .v3-card .v3-row:last-child{ border-bottom:0; }
html body.dm-setpage .v3-row:hover{ background:rgba(255,225,170,.05); }
html body.dm-setpage .v3-row__ic{ flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:20px; background:none; border:0; box-shadow:none; }
html body.dm-setpage .v3-row__tx{ flex:1; min-width:0; }
html body.dm-setpage .v3-row__tx b{ display:block; font-size:17px; font-weight:900; color:#FFF3DC; }
html body.dm-setpage .v3-row__tx i{ display:block; font-style:normal; font-size:13px; color:var(--am-ink-dim); }
html body.dm-setpage .v3-row__ar{ flex:none; font-size:24px; color:var(--am-gold); }
html body.dm-setpage .v3-row--danger{ background:linear-gradient(90deg,rgba(120,16,20,.45),rgba(60,8,10,.2)); }
html body.dm-setpage .v3-row--danger .v3-row__tx b{ color:#FF6B63; }
html body.dm-setpage .v3-row--danger .v3-row__tx i{ color:#E6A69C; }
html body.dm-setpage .v3-note{ margin-top:12px; padding:14px 16px; border-radius:12px; border:2px solid var(--am-gold-dk); background:#150C0A; color:var(--am-ink); }
@media (max-width:1023px){
  /* スマホ・タブレットは目次を横に並べる（目次が縦に長いと項目が下に押し出される） */
  html body.dm-setpage .v3-nav{ display:flex; flex-wrap:wrap; gap:6px; }
  html body.dm-setpage .v3-nav__t{ width:100%; }
  html body.dm-setpage .v3-nav a{ flex:1 1 40%; padding:10px 12px; font-size:15px; }
  html body.dm-setpage .v3-row__tx b{ font-size:16px; }
}
/* ── 実物で気づいた直し（2026-09-14 夕） ──
   ⛔ 入力欄が白かった: dmm_ui.css が「内側を白で塗る影（box-shadow:0 0 0 1000px #fff inset）」を掛けていた */
html body.dm-v2page .v2-input,
html body.dm-v2page .v2-select,
html body.dm-v2page .v2-textarea,
html body.dm-v2page .v2-input:-webkit-autofill,
html body.dm-v2page .v2-textarea:-webkit-autofill{
  box-shadow:0 0 0 1000px #120A08 inset; -webkit-text-fill-color:var(--am-ink); caret-color:var(--am-ink);
}
html body.dm-v2page .v2-input:focus,
html body.dm-v2page .v2-textarea:focus{ box-shadow:0 0 0 1000px #120A08 inset, 0 0 0 3px rgba(217,176,99,.25); }

/* ── ⑱ よくある質問（Bootstrap の開閉の部品を意匠の形に） ── */
html body.dm-v2-info-faq .v2-doc hr{ display:none; }
html body.dm-v2-info-faq .faq-list .row{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 22px; padding-bottom:22px; border-bottom:1px solid rgba(217,176,99,.55); }
html body.dm-v2-info-faq .faq-list .row > div{ width:auto; max-width:none; flex:none; padding:0; }
html body.dm-v2-info-faq .btn-faq{
  min-width:230px; padding:8px 18px; border-radius:6px; font-size:15px; font-weight:800; cursor:pointer;
  color:#FFF3DC; background:linear-gradient(180deg,#241512,#150C0A); border:2px solid var(--am-gold-dk);
}
html body.dm-v2-info-faq .btn-faq:hover{ border-color:var(--am-gold); }
html body.dm-v2-info-faq .v2-doc h4.multi{ margin:26px 0 14px; padding-top:22px; font-size:22px; color:#F7D98A; border-top:1px solid rgba(217,176,99,.55); }
html body.dm-v2-info-faq .v2-doc h4.multi:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
html body.dm-v2-info-faq .accordion .card{
  margin:0 0 12px; background:linear-gradient(180deg,#1E1210,#150C0A); border:2px solid var(--am-gold-dk); border-radius:10px; overflow:hidden;
}
html body.dm-v2-info-faq .accordion .card-header{ padding:0; background:none; border:0; }
html body.dm-v2-info-faq .accordion .card-header h6{ margin:0; }
html body.dm-v2-info-faq .accordion .card-header a{
  position:relative; display:block; padding:18px 56px 18px 22px; font-size:17px; font-weight:900; color:#FFF3DC !important; text-decoration:none;
}
html body.dm-v2-info-faq .accordion .card-header a::after{
  content:""; position:absolute; right:24px; top:50%; width:10px; height:10px; margin-top:-8px;
  border-right:3px solid var(--am-gold); border-bottom:3px solid var(--am-gold); transform:rotate(45deg); transition:transform .2s;
}
html body.dm-v2-info-faq .accordion .card-header a[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:-3px; }
html body.dm-v2-info-faq .accordion .card-body{ padding:0 22px 18px; font-size:15.5px; line-height:1.9; color:var(--am-ink); border-top:1px solid rgba(217,176,99,.3); padding-top:14px; }
@media (max-width:700px){
  html body.dm-v2-info-faq .accordion .card-header a{ padding:15px 46px 15px 16px; font-size:15.5px; }
  html body.dm-v2-info-faq .btn-faq{ min-width:0; width:100%; }
  html body.dm-v2-info-faq .faq-list .row > div{ width:100%; }
}
/* 規約・プライバシーの各条の見出しは h6（中に strong）。h2〜h4 と同じ見た目に。題名の二重表示の直後の線も消す */
html body.dm-v2page .v2-doc h6{
  margin:26px 0 10px; padding-top:18px; font-size:20px; font-weight:900; color:#F7D98A; border-top:1px solid rgba(217,176,99,.55);
}
html body.dm-v2page .v2-doc h6 strong{ color:#F7D98A; }
html body.dm-v2page .v2-doc h1 + hr,
html body.dm-v2page .v2-doc h1 ~ hr:first-of-type{ display:none; }
html body.dm-v2page .v2-doc h1 + hr + h6,
html body.dm-v2page .v2-doc h1 + h6{ margin-top:0; padding-top:0; border-top:0; }
@media (max-width:700px){ html body.dm-v2page .v2-doc h6{ font-size:17.5px; } }
/* 特商法の表を横いっぱいに */
html body.dm-v2page .v2-doc .table,
html body.dm-v2page .v2-doc .table-act{ width:100% !important; max-width:none !important; margin-bottom:0; color:var(--am-ink); background:transparent; }
/* 設定（スマホ）: 目次の元の CSS が縦並びの flex で、横並びの指定と食い違って縦に伸びていた */
@media (max-width:1023px){
  html body.dm-setpage .v3-nav{ flex-direction:row; align-items:stretch; }
  html body.dm-setpage .v3-nav a{ flex:1 1 40%; height:auto; min-height:0; }
}/* FAQ の質問（h6）に条の見出しの線が入り込んでいた／規約・特商法の先頭の線 */
html body.dm-v2-info-faq .accordion .card-header h6{ margin:0; padding:0; border:0; font-size:inherit; }
html body.dm-v2-info-faq .accordion .card-header a,
html body.dm-v2-info-faq .accordion .card-header h6 a{ border:0 !important; border-radius:0; background:none; box-shadow:none; }
html body.dm-v2page .v2-doc hr:first-of-type{ display:none; }

/* ══ コンセプト（concept.php・2026-09-14 新規）══════════════════════════
   ホームのタイル「コンセプト」の行き先。絵はホームと同じ世界地図。
   ★戻し = この節を消す（他の画面は body.dm-concept を持たないので影響しない） */
html body.dm-concept .v4-cc__hero{
  aspect-ratio:2078/757; max-width:100%; border-radius:var(--am-r);
  background:url(/img/v4/hero_world.webp?v=20260913c) center/cover no-repeat, #140A08;
  box-shadow:var(--am-frame); margin-bottom:16px;
}
html body.dm-concept .v4-cc{ padding:28px 32px; margin-bottom:16px; color:var(--am-ink); }
html body.dm-concept .v4-cc__catch{ margin:0; text-align:center; }
html body.dm-concept .v4-cc__catch span{
  display:block; font-size:28px; font-weight:900; line-height:1.6; letter-spacing:.06em; color:var(--am-gold-hi);
  text-shadow:0 0 18px rgba(217,176,99,.35);
}
html body.dm-concept .v4-cc__sec{ margin-top:28px; padding-top:24px; border-top:1px solid rgba(217,176,99,.35); }
html body.dm-concept .v4-cc__h{ margin:0 0 12px; font-size:20px; font-weight:900; color:#F7D98A; }
html body.dm-concept .v4-cc__sec p{ margin:0 0 12px; font-size:16px; line-height:1.95; color:var(--am-ink); }
html body.dm-concept .v4-cc__sec p:last-child{ margin-bottom:0; }
@media (max-width:700px){
  html body.dm-concept .v4-cc{ padding:22px 18px; }
  html body.dm-concept .v4-cc__catch span{ font-size:21px; }
  html body.dm-concept .v4-cc__h{ font-size:18px; }
  html body.dm-concept .v4-cc__sec p{ font-size:15.5px; }
}
html body.dm-concept .v4-cc__sec b{ color:var(--am-gold-hi); }
html body.dm-concept .v4-cc__list{ margin:0; padding:0; list-style:none; }
html body.dm-concept .v4-cc__list li{
  position:relative; margin:0 0 14px; padding:14px 16px 14px 34px; font-size:15.5px; line-height:1.85;
  border:1px solid rgba(217,176,99,.35); border-radius:10px; background:rgba(0,0,0,.18);
}
html body.dm-concept .v4-cc__list li:last-child{ margin-bottom:0; }
html body.dm-concept .v4-cc__list li::before{
  content:""; position:absolute; left:15px; top:24px; width:8px; height:8px; border-radius:50%; background:var(--am-gold);
}
html body.dm-concept .v4-cc__sign{ margin-top:20px !important; text-align:right; color:var(--am-ink-dim) !important; }
html body.dm-concept .v4-cc__sign b{ font-size:17px; }
html body.dm-concept .v4-cc__idea{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px;
  margin:12px 0 16px; padding:16px 20px; text-decoration:none; color:var(--am-ink);
}
html body.dm-concept .v4-cc__idea-t{ grid-column:1; font-size:17px; font-weight:900; color:var(--am-gold-hi); }
html body.dm-concept .v4-cc__idea-s{ grid-column:1; font-size:13.5px; color:var(--am-ink-dim); }
html body.dm-concept .v4-cc__idea .chev{ grid-column:2; grid-row:1 / span 2; width:20px; height:20px; color:var(--am-gold); }

/* ══ アプリ（ホーム画面に追加）で画面いっぱいに描くときの保険（2026-09-16）═══════════════
   ★2026-09-16 に head へ `viewport-fit=cover` を付けた（下タブがホームバーの上に浮いて見えたため）。
     付けると**ウェブが時計やホームバーの下まで描かれる**ので、器を持っている画面（.dm-page）は
     .dm-top / .dm-tabs が自分で避ける（dmm_ui.css）。
   ⇒ ここは**器を使っていない画面**（ログイン・新規登録など）の保険。上下に安全領域ぶんの余白を置く。
   ⛔ ブラウザで見ているときは env() が 0 なので、今までと1ピクセルも変わらない。 */
@media (display-mode: standalone){
  html body:not(.dm-page){
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
}
html.pwa body:not(.dm-page){
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}