:root {
      --black:  #000;
      --white:  #fff;
      --yellow: #FFE500;
      --yellow-lt: #FFF9B0;
      --gray:   #f0f0f0;
      --gray-2: #e0e0e0;
      --text:   #000;
      --muted:  #555;
      /* legacy aliases used in existing markup */
      --gold: #FFE500;
      --orange: #FFE500;
      --navy: #000;
      --blue: #000;
      --panel: #fff;
      --panel2: #f5f5f5;
      --red: #000;
      --green: #000;
      --sky: #fff;
      --purple: #000;
      --white: #fff;
      --shadow: 4px 4px 0 #000;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      /* 漫画本を置いた机の色 */
      background: #f0ede8;
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, sans-serif;
    }

    a {
      color: inherit;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }

    button {
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }

    .qm {
      max-width: 480px;
      min-height: 100vh;
      margin: 0 auto;
      overflow: hidden;
      /* ガター＝黒にしてコマのフレームボーダーと溶け込ませる */
      background: #000;
      /* ページ端のドロップシャドウ */
      box-shadow: 6px 0 20px rgba(0,0,0,.28), -6px 0 20px rgba(0,0,0,.20);
    }

    /* ── BUTTONS ── */
    .qm-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 56px;
      padding: 0 20px;
      border-radius: 0;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      border: 2.5px solid #000;
      box-shadow: 4px 4px 0 #000;
      transition: transform .1s, box-shadow .1s;
    }

    .qm-btn:active {
      transform: translate(4px, 4px);
      box-shadow: 0 0 0 #000;
    }

    .qm-btn-main {
      background: var(--yellow);
      color: #000;
    }

    /* ══════════════════════════════════════
       COMIC BRUTAL BUTTON（漫画風ボタン・モバイル最適化）
    ══════════════════════════════════════ */

    /* ── 外枠：常時アテンションアニメ ── */
    @keyframes qmComicAttract {
      0%, 50%, 100% { transform: rotate(-1.5deg) scale(1)    translateY(0); }
      55%           { transform: rotate(-.5deg)  scale(1.06) translateY(-6px); }
      60%           { transform: rotate(-2.5deg) scale(1.03) translateY(-2px); }
      65%           { transform: rotate(-.8deg)  scale(1.07) translateY(-5px); }
      72%           { transform: rotate(-1.5deg) scale(1.01) translateY(-1px); }
      78%           { transform: rotate(-1.5deg) scale(1)    translateY(0); }
    }
    /* シャドウ連動 */
    @keyframes qmComicShadowPulse {
      0%, 50%, 100% { transform: translate(.45em, .45em); }
      55%, 65%      { transform: translate(.6em,  .65em); }
    }
    /* パーティクル（跳ね上がり時に飛び出す） */
    @keyframes qmParticlePop {
      0%, 52%, 100% { opacity: 0; transform: scale(0) translate(0, 0); }
      55%           { opacity: 1; transform: scale(1.3) translate(var(--px), var(--py)); }
      63%           { opacity: .8; transform: scale(.9) translate(calc(var(--px) * 1.6), calc(var(--py) * 1.8)); }
      72%           { opacity: 0; transform: scale(0)  translate(calc(var(--px) * 2.2), calc(var(--py) * 2.4)); }
    }

    .qm-comic-btn {
      position: relative;
      display: block;          /* フルwidth */
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      text-decoration: none;
      font-size: 19px;         /* ベースサイズ大きめ */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      animation: qmComicAttract 4s ease-in-out infinite;
    }

    .qm-comic-btn__inner {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--yellow);
      color: #000;
      padding: 1em 1.8em;
      z-index: 3;
      overflow: hidden;
      transform: skew(-3deg, 1deg);
      clip-path: polygon(
        0% 12%, 2% 0%, 98% 0%, 100% 12%,
        100% 88%, 98% 100%, 2% 100%, 0% 88%
      );
    }
    /* パーティクルコンテナ */
    .qm-comic-btn__particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10;
      overflow: visible;
    }
    .qm-comic-btn__particles span {
      position: absolute;
      width: .55em;
      height: .55em;
      font-size: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      opacity: 0;
      animation: qmParticlePop 4s ease-in-out infinite;
    }
    /* 各パーティクルの位置・色・タイミング */
    .qm-comic-btn__particles span:nth-child(1) {
      top: 10%; left: 8%;
      --px: -14px; --py: -20px;
      color: var(--yellow); font-size: 1.2em;
      animation-delay: 0s;
    }
    .qm-comic-btn__particles span:nth-child(2) {
      top: 5%; left: 38%;
      --px: 4px; --py: -22px;
      color: #fff; font-size: .9em;
      animation-delay: .18s;
    }
    .qm-comic-btn__particles span:nth-child(3) {
      top: 15%; right: 10%;
      --px: 16px; --py: -18px;
      color: var(--yellow); font-size: 1.1em;
      animation-delay: .08s;
    }
    .qm-comic-btn__particles span:nth-child(4) {
      bottom: 10%; left: 20%;
      --px: -12px; --py: 18px;
      color: #fff; font-size: .85em;
      animation-delay: .24s;
    }
    .qm-comic-btn__particles span:nth-child(5) {
      bottom: 8%; right: 22%;
      --px: 14px; --py: 20px;
      color: var(--yellow); font-size: 1em;
      animation-delay: .12s;
    }
    .qm-comic-btn__particles span:nth-child(6) {
      top: 50%; left: 2%;
      --px: -18px; --py: -8px;
      color: #fff; font-size: .75em;
      animation-delay: .3s;
    }
    .qm-comic-btn__particles span:nth-child(7) {
      top: 50%; right: 2%;
      --px: 18px; --py: -6px;
      color: var(--yellow); font-size: .8em;
      animation-delay: .05s;
    }

    .qm-comic-btn__text {
      position: relative;
      font-weight: 900;
      font-size: 1.3em;
      letter-spacing: .06em;
      z-index: 5;
      color: #000;
      text-align: center;
      line-height: 1.4;
      text-shadow:
        .04em  .04em 0 rgba(255,255,255,.5),
        -.04em -.04em 0 rgba(255,255,255,.5),
        .04em -.04em 0 rgba(255,255,255,.5),
        -.04em .04em 0 rgba(255,255,255,.5);
      transform: rotate(1.5deg);
    }

    /* テキスト内 3段構成 */
    .qm-comic-btn__campaign {
      display: block;
      font-size: .65em;
      font-weight: 700;
      letter-spacing: .04em;
      opacity: .85;
      margin-bottom: .15em;
    }
    .qm-comic-btn__main {
      display: block;
    }
    .qm-comic-btn__price {
      display: block;
      font-size: .55em;
      font-weight: 700;
      letter-spacing: .02em;
      opacity: .72;
      margin-top: .25em;
    }

    /* ハーフトーン */
    .qm-comic-btn__halftone {
      position: absolute; inset: 0;
      background-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,.18) .1em, transparent .1em);
      background-size: .5em .5em;
      opacity: .28;
      z-index: 2;
      mix-blend-mode: multiply;
      pointer-events: none;
    }
    /* インクスプラッター（常時うっすら） */
    .qm-comic-btn__splatter {
      position: absolute; inset: 0;
      z-index: 1;
      background:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,.1) 0%, transparent 45%),
        radial-gradient(circle at 75% 65%, rgba(0,0,0,.1) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(0,0,0,.1) 0%, transparent 35%);
      pointer-events: none;
    }

    /* フレーム */
    .qm-comic-btn__frame {
      position: absolute;
      top: -.35em; left: -.35em; right: -.35em; bottom: -.35em;
      background: #fff;
      border: .18em solid #000;
      z-index: 1;
    }
    /* シャドウ */
    .qm-comic-btn__shadow {
      position: absolute;
      top: .45em; left: .45em; right: -.45em; bottom: -.45em;
      background: rgba(0,0,0,.9);
      z-index: 0;
      animation: qmComicShadowPulse 4s ease-in-out infinite;
    }

    /* ── タップ（active） ── */
    .qm-comic-btn:active {
      animation: none;
      transform: rotate(0deg) scale(.93);
      transition: transform .06s;
    }
    .qm-comic-btn:active .qm-comic-btn__inner {
      transform: skew(0, 0) scaleY(.95);
      background: #e6cb00;
    }
    .qm-comic-btn:active .qm-comic-btn__shadow {
      transform: translate(.12em, .12em);
      animation: none;
    }
    .qm-comic-btn:active .qm-comic-btn__frame {
      transform: translate(.05em, .05em);
    }
    @keyframes qmComicBurst {
      0%   { transform: scale(.92) rotate(1.5deg); }
      55%  { transform: scale(1.12) rotate(1.5deg); }
      100% { transform: scale(1)    rotate(1.5deg); }
    }
    .qm-comic-btn:active .qm-comic-btn__text {
      animation: qmComicBurst .3s cubic-bezier(.175,.885,.32,1.275);
    }

    /* ── FINAL CTA バリアント ── */
    .qm-comic-btn--final {
      font-size: 21px;
      margin-top: 28px;
      animation: qmComicAttract 4s ease-in-out infinite, qmComicBtnGlow 2.8s ease-in-out infinite;
    }
    @keyframes qmComicBtnGlow {
      0%, 100% { filter: drop-shadow(0 0 2px rgba(255,229,0,0)); }
      50%       { filter: drop-shadow(0 0 16px rgba(255,229,0,.85)); }
    }
    .qm-comic-btn--final .qm-comic-btn__frame {
      background: rgba(255,229,0,.25);
    }
    .qm-comic-btn--final:active {
      animation: none;
      filter: none;
    }

    .qm-btn-dark {
      background: #000;
      color: #fff;
    }

    .qm-btn-white {
      background: #fff;
      color: #000;
    }

    /* ── KICKER ── */
    .qm-kicker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 0;
      background: var(--yellow);
      color: #000;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      border: 2px solid #000;
    }

    .qm-kicker-dark {
      background: #000;
      color: var(--yellow);
    }

    /* ══════════════════════════════════
       漫画コマ割りの核心：
       各セクション＝独立したコマ
       全周4px黒ボーダー＋コマ間の間白（ガター）
    ══════════════════════════════════ */
    .qm-section,
    .qm-rank-road,
    .qm-final {
      border: 4px solid #000;
      margin: 0 6px 0 6px;
    }

    /* ヒーローもコマとして揃える */
    .qm-hero {
      margin: 0 6px 0 6px;
    }

    /* ヘッダーは全幅コマとして独立 */
    .qm-header {
      margin-bottom: 0;
    }

    /* ═══════════════════════════════════════════════════
       漫画コマ割り 斜めフレーム（ラッパー方式）
       仕組み：
         ① .qm-frame が黒背景 + clip-path でコマ形状を定義
         ② 内側 section が margin: 4px で「ボーダー幅」を作る
         ③ 内側 section にも同じ clip-path → 斜め部分も4px均等
       ╲（右落ち --slash-a）╱（左落ち --slash-b）
    ═══════════════════════════════════════════════════ */

    /* ① フレームラッパー */
    .qm-frame {
      margin: 0 6px 0 6px;
      background: var(--black);
      overflow: hidden;
    }

    /* 黒コマのみ：白ボーダーにする */
    .qm-frame--dark {
      background: var(--white);
    }

    /* 右落ち（╲）: 左が高く右が低い */
    .qm-frame--slash-a {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%);
    }

    /* 左落ち（╱）: 右が高く左が低い */
    .qm-frame--slash-b {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 42px));
    }

    /* ② 内側 section：margin: 4px でラッパーの黒をボーダーとして見せる */
    .qm-frame > section {
      margin: 4px;
      border: none;
      padding-bottom: 62px;
    }

    /* ③ 内側にも同じ clip-path で斜め部分のボーダー幅も均一に */
    /* ─ 最初のコマ（RANK ROAD）：上端はまっすぐ ─ */
    .qm-frame--slash-a > section {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%);
    }
    .qm-frame--slash-b > section {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 42px));
    }

    /* ═══════════════════════════════════════════════════
       コマの上端も斜め（噛み合わせ）
       .qm-frame の直後に来るフレームは上端も斜めにする。
       最初の RANK ROAD は対象外（前に .qm-frame がない）。
    ═══════════════════════════════════════════════════ */

    /* ─ ラッパーの上端を斜めに ─ */
    .qm-frame + .qm-frame--slash-a {
      clip-path: polygon(0 0, 100% 42px, 100% calc(100% - 42px), 0 100%);
    }
    .qm-frame + .qm-frame--slash-b {
      clip-path: polygon(0 42px, 100% 0, 100% 100%, 0 calc(100% - 42px));
    }

    /* ─ 内側 section の上端も斜め：padding-top でコンテンツ切れを防ぐ ─ */
    .qm-frame + .qm-frame--slash-a > section {
      clip-path: polygon(0 0, 100% 42px, 100% calc(100% - 42px), 0 100%);
      padding-top: 54px;
    }
    .qm-frame + .qm-frame--slash-b > section {
      clip-path: polygon(0 42px, 100% 0, 100% 100%, 0 calc(100% - 42px));
      padding-top: 54px;
    }

    /* ボトムセパレーターなし */
    .qm-frame--flat-bottom {
      clip-path: polygon(0 42px, 100% 0, 100% 100%, 0 100%) !important;
    }
    .qm-frame--flat-bottom > section {
      clip-path: polygon(0 42px, 100% 0, 100% 100%, 0 100%) !important;
    }

    /* スクリーントーン（網点）コマ */
    .qm-section--tone {
      background-color: #f5f3ef;
      background-image: radial-gradient(#bbb 1px, transparent 1px);
      background-size: 8px 8px;
    }

    /* スクリーントーン上のカード要素は白背景に */
    .qm-section--tone .qm-explain-card,
    .qm-section--tone .qm-path-item {
      background: #faf8f4;
    }

    /* 黒コマ（逆転コマ） */
    .qm-section--dark {
      background: #111;
      color: #fff;
    }

    .qm-section--dark .qm-section-head h2 { color: #fff; }
    .qm-section--dark .qm-section-head p  { color: #888; }
    .qm-section--dark .qm-kicker-dark {
      background: var(--yellow);
      color: #000;
    }

    /* ── SECTION ── */
    .qm-section {
      padding: 40px 20px;
      background: #faf8f4;
    }

    .qm-section-head {
      text-align: center;
      margin-bottom: 28px;
    }

    .qm-section-head h2 {
      margin: 10px 0 0;
      color: #000;
      font-size: 30px;
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: -.04em;
      text-align: center;
    }

    .qm-section-head p {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.75;
    }

    /* ── HEADER ── */
    .qm-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: #000;
      padding: 0 16px;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 3px solid #000;
    }

    .qm-header-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      line-height: 0;
      height: 100%;
    }

    .qm-header-logo-img {
      height: 22px;
      width: auto;
      display: block;
    }

    .qm-header-logo-mark {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 4px;
      background: var(--yellow);
      color: #000;
      font-size: 17px;
      font-weight: 900;
      border: 2px solid #fff;
      flex-shrink: 0;
    }

    .qm-header-link {
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
      color: #000;
      border: 2px solid #000;
      padding: 6px 14px;
      border-radius: 0;
      background: var(--yellow);
      box-shadow: 2px 2px 0 #555;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      transition: transform .1s, box-shadow .1s;
    }

    .qm-header-link:active {
      transform: translate(2px, 2px);
      box-shadow: 0 0 0 #555;
    }

    /* ── HERO ── */
    .qm-hero {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #000;
      color: #fff;
    }

    .qm-hero--loggedin {
      aspect-ratio: unset;
      height: auto;
    }

    .qm-hero--loggedin .qm-hero-bg {
      position: static;
      width: 100%;
      height: auto;
      object-fit: unset;
    }


    .qm-hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      z-index: 0;
      display: block;
    }

    .qm-hero-vignette { display: none; }

    .qm-hero-overlay {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px 20px 36px;
    }

    .qm-hero-copy { width: 100%; }

    .qm-hero-actions {
      width: 100%;
      text-align: center;
    }

    .qm-hero-actions .qm-btn {
      width: 100%;
      font-size: 17px;
      background: var(--yellow);
      color: #000;
      box-shadow: none;
    }

    .qm-hero-actions-note {
      margin: 10px 0 0;
      font-size: 12px;
      color: rgba(255,255,255,.7);
      font-weight: 700;
      letter-spacing: .04em;
    }

    /* unused hero elements kept for safety */
    .qm-logo { display: none; }
    .qm-logo-mark { display: none; }
    .qm-hero-main { display: none; }
    .qm-hero-badge { display: none; }
    .qm-hero-title { display: none; }
    .qm-hero-lead { display: none; }
    .qm-hero-cta { display: none; }
    .qm-hero-mini { display: none; }
    .qm-chip { display: none; }

    /* ── RANK DEVICE (unused but safe) ── */
    .qm-rank-device { display: none; }
    .qm-rank-screen { display: none; }
    .qm-rank-top { display: none; }
    .qm-rank-meter { display: none; }
    .qm-meter-bar { display: none; }
    .qm-rank-question { display: none; }
    .qm-answer-row { display: none; }

    /* ── RANK ROAD ── */
    .qm-rank-road {
      padding: 0;
      background: #faf8f4;
    }

    /* 挿絵ブロック：フルブリード */
    .qm-rank-illust {
      line-height: 0;
      border-bottom: 3px solid #000;
    }

    .qm-rank-illust img {
      width: 100%;
      display: block;
      object-fit: cover;
      aspect-ratio: 16 / 9;
    }

    /* 挿絵以下のコンテンツ */
    .qm-rank-content {
      padding: 22px 20px 0;
    }

    .qm-rank-road h2 {
      margin: 0;
      color: #000;
      font-size: 28px;
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: -.04em;
      text-align: center;
    }

    .qm-rank-road h2 span {
      background: var(--yellow);
      padding: 0 4px;
    }

    .qm-rank-road p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.75;
      text-align: left;
    }

    .qm-rank-steps {
      display: grid;
      gap: 0;
      margin-top: 18px;
    }

    .qm-rank-step {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      background: #faf8f4;
      border: 2px solid #000;
      margin-top: -2px;
    }

    .qm-rank-step-mark {
      flex: 0 0 44px;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      background: #000;
      color: var(--yellow);
      font-size: 17px;
      font-weight: 900;
      flex-shrink: 0;
    }

    .qm-rank-step-body {
      text-align: left;
    }

    .qm-rank-step-body strong {
      display: block;
      color: #000;
      font-size: 14px;
      font-weight: 900;
    }

    .qm-rank-step-body span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.5;
      text-align: left;
    }

    .qm-rank-road .qm-btn {
      margin-top: 20px;
    }

    /* ── TRIAL QUIZ ── */
    .qm-trial {
      padding: 0;
      background: transparent;
    }

    /* 挿絵：セクション幅いっぱいに引き出す */
    .qm-trial-illust {
      margin: -54px -20px 22px -20px;
      line-height: 0;
      border-bottom: 3px solid #000;
    }

    .qm-trial-illust img {
      width: 100%;
      display: block;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .qm-trial-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .qm-trial-badge {
      padding: 5px 10px;
      background: #000;
      color: var(--yellow);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
    }

    .qm-trial h2 {
      margin: 14px 0 0;
      color: #000;
      font-size: 28px;
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: -.04em;
      text-align: center;
    }

    .qm-trial-q {
      margin-top: 16px;
      padding: 18px;
      background: #000;
      color: #fff;
      border: 2.5px solid #000;
    }

    .qm-trial-q small {
      display: block;
      color: var(--yellow);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .1em;
    }

    .qm-trial-q strong {
      display: block;
      margin-top: 8px;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.55;
    }

    .qm-trial-choices {
      display: grid;
      gap: 9px;
      margin-top: 12px;
    }

    .qm-trial-choices a,
    .qm-trial-choices div {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 14px;
      background: #faf8f4;
      color: #000;
      font-size: 14px;
      font-weight: 900;
      border: 2px solid #000;
      margin-top: -2px;
    }

    .qm-trial-choices div::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      background: var(--yellow);
      border: 2px solid #000;
      flex-shrink: 0;
    }

    .qm-trial-locked {
      margin-top: 14px;
      padding: 14px;
      background: var(--yellow-lt);
      color: #000;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.65;
      border-top: 2px solid #000;
    }

    .qm-trial-locked span {
      color: #000;
      font-weight: 900;
    }

    .qm-trial .qm-btn {
      margin-top: 14px;
    }

    /* ══════════════════════════════════════
       SPECIAL GAME — ギラギラ版
    ══════════════════════════════════════ */

    /* 上下はフレームの斜め分を維持、横のみ0にしてパネルを最大化 */
    #special-game {
      padding: 54px 0 62px;
    }

    .qm-game {
      padding: 0 14px 16px;
      background: #080808;
      color: #fff;
      position: relative;
      overflow: hidden;
      /* アーケード筐体風コーナーアクセント */
      box-shadow:
        inset  12px  12px 0 -10px #ffe500,
        inset -12px  12px 0 -10px #ffe500,
        inset  12px -12px 0 -10px #ffe500,
        inset -12px -12px 0 -10px #ffe500;
    }
    /* 背景ハーフトーンドット */
    .qm-game::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255,229,0,.06) 1px, transparent 1px);
      background-size: 20px 20px;
      animation: qmDotPulse 3s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes qmDotPulse {
      from { opacity: .4; }
      to   { opacity: 1; }
    }

    /* フェイス切り替え */
    .qm-game-face {
      position: relative;
      z-index: 1;
      animation: qmFaceIn .28s cubic-bezier(.2,.8,.3,1) both;
    }
    .qm-game-face--hidden { display: none; }
    @keyframes qmFaceIn {
      from { opacity: 0; transform: translateY(12px) scale(.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ─── Face 1: スタート ─── */

    /* 挿絵：フルブリード */
    .qm-game-illust {
      margin: 0 -14px 0 -14px;
      border-bottom: 2px solid #1a1a1a;
      overflow: hidden;
      position: relative;
    }
    .qm-game-illust img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: center top;
    }
    /* 挿絵下部フェード */
    .qm-game-illust::after {
      content: "";
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(to bottom, transparent, rgba(8,8,8,.7));
      pointer-events: none;
    }

    .qm-game-title {
      text-align: center;
      padding: 14px 0 16px;
      border-bottom: 2px solid #1a1a1a;
      margin-bottom: 14px;
      position: relative;
    }
    /* タイトル背景スポットライト */
    .qm-game-title::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(255,229,0,.09) 0%, transparent 70%);
      pointer-events: none;
    }
    .qm-game-title .qm-kicker {
      display: inline-block;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .16em;
      padding: 4px 10px;
      background: var(--yellow);
      color: #000;
      border: 1.5px solid #000;
      box-shadow: 2px 2px 0 #000;
      margin-bottom: 10px;
    }
    .qm-game-title h2 {
      margin: 0 0 6px;
      font-size: 36px;
      font-weight: 900;
      text-align: center;
      line-height: 1.05;
      letter-spacing: -.05em;
      color: #fff;
      text-shadow: 4px 4px 0 #000;
      animation: qmTitleGlow 2.5s ease-in-out infinite alternate;
    }
    @keyframes qmTitleGlow {
      from { text-shadow: 4px 4px 0 #000, 0 0 8px rgba(255,229,0,.15); }
      to   { text-shadow: 4px 4px 0 #000, 0 0 28px rgba(255,229,0,.55); }
    }
    .qm-game-title p {
      margin: 0;
      color: #555;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.6;
    }
    /* 難易度カード */
    .qm-difficulty {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
      margin-bottom: 12px;
    }
    .qm-diff-btn {
      border: 2px solid #3a3a3a;
      min-height: 78px;
      padding: 10px 4px;
      background: #141414;
      color: #aaa;
      cursor: pointer;
      text-align: center;
      border-radius: 0;
      transition: transform .08s, box-shadow .08s, background .12s;
      position: relative;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
    }
    .qm-diff-btn:active { transform: translate(2px,2px) !important; box-shadow: none !important; }
    .qm-diff-btn.is-active {
      background: var(--yellow);
      color: #000;
      border-color: #000;
      box-shadow: 3px 3px 0 #fff;
    }
    .qm-diff-btn strong {
      display: block;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      pointer-events: none;
    }
    .qm-diff-btn span {
      display: block;
      margin-top: 4px;
      font-size: 10px;
      font-weight: 800;
      opacity: .65;
      line-height: 1.3;
      pointer-events: none;
    }
    .qm-diff-btn.is-active span { opacity: .8; }
    /* NORMALボタン: 青テーマ */
    .qm-diff-btn[data-difficulty="normal"] {
      border-color: #004a7a;
      background: #001428;
      color: #88ccff;
    }
    .qm-diff-btn[data-difficulty="normal"] strong { color: #55aaff; }
    .qm-diff-btn[data-difficulty="normal"].is-active {
      background: #0066cc;
      color: #fff;
      border-color: #000;
      box-shadow: 3px 3px 0 #fff;
    }
    .qm-diff-btn[data-difficulty="normal"].is-active strong { color: #fff; }
    .qm-diff-btn[data-difficulty="normal"].is-active span { color: #cce8ff; opacity: 1; }
    /* HARDボタン: 赤テーマ（視認性向上） */
    .qm-diff-btn[data-difficulty="hard"] {
      border-color: #7a0000;
      background: #200000;
      color: #ff8888;
    }
    .qm-diff-btn[data-difficulty="hard"] strong { color: #ff5555; }
    .qm-diff-btn[data-difficulty="hard"].is-active {
      background: #cc0000;
      color: #fff;
      border-color: #000;
      box-shadow: 3px 3px 0 #fff;
    }
    .qm-diff-btn[data-difficulty="hard"].is-active strong { color: #fff; }
    .qm-diff-btn[data-difficulty="hard"].is-active span { color: #ffbbbb; opacity: 1; }
    /* STARTボタン */
    .qm-game-start {
      display: block;
      width: 100%;
      border: 3px solid #000;
      min-height: 60px;
      border-radius: 0;
      background: #cc0000;
      color: #fff;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: .22em;
      cursor: pointer;
      box-shadow: 5px 5px 0 #fff;
      transition: transform .08s, box-shadow .08s;
      position: relative;
      overflow: hidden;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      text-shadow: 2px 2px 0 rgba(0,0,0,.5);
    }
    .qm-game-start::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%);
      transform: translateX(-130%);
      transition: transform .5s ease;
    }
    .qm-game-start:hover::after { transform: translateX(130%); }
    .qm-game-start:active {
      transform: translate(5px,5px);
      box-shadow: 0 0 0 #fff;
      animation: none;
    }
    /* STARTボタン常時グロー（赤） */
    @keyframes qmStartPulse {
      0%, 100% { box-shadow: 5px 5px 0 #fff; }
      50%       { box-shadow: 5px 5px 0 #fff, 0 0 24px rgba(220,0,0,.85), 0 0 52px rgba(220,0,0,.4); }
    }
    .qm-game-start { animation: qmStartPulse 2s ease-in-out infinite; }

    /* ─── Face 2: ゲームエリア ─── */
    /* 上部ステータスバー（1行コンパクト） */
    .qm-game-status {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 6px;
      border: 2px solid #1e1e1e;
    }
    .qm-game-status-card {
      flex: 1;
      padding: 7px 8px;
      background: #0a0a0a;
      text-align: center;
      border-right: 2px solid #1e1e1e;
    }
    .qm-game-status-card:last-child { border-right: none; }
    .qm-game-status-card small {
      display: block;
      color: #444;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .qm-game-status-card strong {
      display: block;
      margin-top: 1px;
      color: var(--yellow);
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.02em;
      text-shadow: 0 0 10px rgba(255,229,0,.7);
    }
    /* ライフ表示 */
    .qm-game-lives {
      display: flex;
      gap: 6px;
      justify-content: center;
      align-items: center;
      min-height: 26px;
      margin-bottom: 4px;
    }
    .qm-life {
      font-size: 20px;
      transition: transform .15s, opacity .15s;
      filter: drop-shadow(0 0 5px rgba(255,30,30,.9));
    }
    .qm-life.is-lost {
      opacity: .15;
      transform: scale(.65);
      filter: none;
    }
    /* メッセージライン */
    .qm-game-message {
      text-align: center;
      color: #aaa;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: .05em;
      margin-bottom: 6px;
      min-height: 22px;
      line-height: 1.3;
    }
    .qm-game-message.is-success {
      color: var(--yellow);
      text-shadow: 0 0 12px rgba(255,229,0,.9);
    }
    .qm-game-message.is-miss {
      color: #ff3333;
      text-shadow: 0 0 12px rgba(255,50,50,.9);
    }
    /* パネルグリッド — フルブリード */
    .qm-panel-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
      margin: 0 -14px 8px;   /* 親のpaddingを打ち消してフルブリード */
      padding: 5px 14px;
      background: #000;
      border-top: 2px solid #1a1a1a;
      border-bottom: 2px solid #1a1a1a;
      position: relative;
    }
    /* スキャンライン */
    .qm-panel-grid::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,.012) 3px,
        rgba(255,255,255,.012) 4px
      );
      pointer-events: none;
      z-index: 0;
    }
    .qm-panel {
      position: relative;
      aspect-ratio: 1 / 1;
      border: 2px solid #222;
      border-radius: 0;
      background: #0c0c0c;
      cursor: pointer;
      transition: transform .08s;
      overflow: hidden;
      z-index: 1;
    }
    /* 内側の凹みライン */
    .qm-panel::before {
      content: "";
      position: absolute;
      inset: 6px;
      background: #151515;
      border: 1px solid #222;
    }
    /* 右上コーナーの三角マーク */
    .qm-panel::after {
      content: "";
      position: absolute;
      top: 0; right: 0;
      width: 0; height: 0;
      border-style: solid;
      border-width: 0 14px 14px 0;
      border-color: transparent #2a2a2a transparent transparent;
    }

    /* 点灯 ★ */
    .qm-panel.is-lit {
      background: var(--yellow);
      border-color: #000;
      box-shadow:
        0 0 0 2px #000,
        0 0 16px rgba(255,229,0,1),
        0 0 36px rgba(255,229,0,.5);
      transform: scale(1.08);
      z-index: 3;
    }
    .qm-panel.is-lit::before {
      content: "\2605";
      inset: 0;
      display: grid;
      place-items: center;
      color: #000;
      font-size: 28px;
      font-weight: 900;
      background: transparent;
      border: none;
      animation: qmStarPop .35s ease infinite alternate;
    }
    .qm-panel.is-lit::after { display: none; }
    @keyframes qmStarPop {
      from { transform: scale(.8) rotate(-10deg); opacity: .8; }
      to   { transform: scale(1.15) rotate(10deg); opacity: 1; }
    }

    /* ヒット ✓ */
    @keyframes qmHitFlash {
      0%   { background: #fff; border-color: #fff; }
      30%  { background: var(--yellow); border-color: var(--yellow); }
      100% { background: #101010; border-color: var(--yellow); }
    }
    .qm-panel.is-hit {
      background: #101010;
      border-color: var(--yellow);
      box-shadow: 0 0 12px rgba(255,229,0,.5);
      animation: qmHitFlash .28s ease;
    }
    .qm-panel.is-hit::before {
      content: "✓";
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--yellow);
      font-size: 26px;
      font-weight: 900;
      background: transparent;
      border: none;
    }
    .qm-panel.is-hit::after { display: none; }

    /* ミス ✕ */
    @keyframes qmMissShake {
      0%   { transform: translateX(-5px) scale(1.02); }
      25%  { transform: translateX(5px) scale(1.02); }
      50%  { transform: translateX(-3px); }
      75%  { transform: translateX(3px); }
      100% { transform: translateX(0); }
    }
    .qm-panel.is-miss {
      background: #200000;
      border-color: #ff2222;
      box-shadow:
        0 0 12px rgba(255,0,0,.7),
        inset 0 0 10px rgba(255,0,0,.25);
      animation: qmMissShake .2s ease;
    }
    .qm-panel.is-miss::before {
      content: "✕";
      inset: 0;
      display: grid;
      place-items: center;
      color: #ff3333;
      font-size: 26px;
      font-weight: 900;
      background: transparent;
      border: none;
    }
    .qm-panel.is-miss::after { display: none; }

    /* リセットボタン */
    .qm-game-reset {
      display: block;
      width: 100%;
      border: 1.5px solid #222;
      min-height: 36px;
      border-radius: 0;
      background: transparent;
      color: #3a3a3a;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      cursor: pointer;
      margin-top: 8px;
      transition: color .15s, border-color .15s;
    }
    .qm-game-reset:active { color: #666; border-color: #444; }

    /* ─── Face 3: CLEAR ─── */

    /* ヘッダー */
    .qm-result-header {
      text-align: center;
      padding: 16px 0 14px;
      border-bottom: 2px solid #1a1a1a;
      margin-bottom: 10px;
      position: relative;
    }
    .qm-result-header::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(255,229,0,.1) 0%, transparent 70%);
      pointer-events: none;
    }
    .qm-result-stars-deco {
      font-size: 18px;
      color: var(--yellow);
      letter-spacing: .35em;
      text-shadow: 0 0 10px rgba(255,229,0,.9);
      margin-bottom: 6px;
      animation: qmStarsDeco 1.5s ease-in-out infinite alternate;
    }
    @keyframes qmStarsDeco {
      from { opacity: .7; transform: scale(.95); }
      to   { opacity: 1;  transform: scale(1.05); text-shadow: 0 0 22px rgba(255,229,0,1); }
    }
    .qm-result-title {
      font-size: 42px;
      font-weight: 900;
      color: var(--yellow);
      letter-spacing: -.02em;
      line-height: 1;
      text-shadow: 4px 4px 0 #000, 0 0 32px rgba(255,229,0,.9);
      animation: qmFanfare .65s ease infinite alternate;
    }
    @keyframes qmFanfare {
      from { transform: scale(.94); text-shadow: 4px 4px 0 #000, 0 0 10px rgba(255,229,0,.4); }
      to   { transform: scale(1.06); text-shadow: 4px 4px 0 #000, 0 0 52px rgba(255,229,0,1), 0 0 90px rgba(255,229,0,.4); }
    }
    .qm-result-mode-label {
      margin-top: 6px;
      font-size: 10px;
      font-weight: 900;
      color: #444;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    /* スコア統計行 */
    .qm-result-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      border: 2px solid #1a1a1a;
      margin-bottom: 12px;
    }
    .qm-result-stat {
      padding: 10px 6px;
      text-align: center;
      border-right: 2px solid #1a1a1a;
      background: #080808;
    }
    .qm-result-stat:last-child { border-right: none; }
    .qm-result-stat-label {
      display: block;
      font-size: 8px;
      font-weight: 900;
      color: #444;
      letter-spacing: .1em;
      margin-bottom: 4px;
    }
    .qm-result-stat-value {
      display: block;
      font-size: 20px;
      font-weight: 900;
      color: var(--yellow);
      letter-spacing: -.02em;
      text-shadow: 0 0 8px rgba(255,229,0,.5);
    }
    .qm-result-stat-value--stars {
      font-size: 15px;
      letter-spacing: .05em;
    }

    /* クイズアンロックラベル */
    .qm-quiz-unlock-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: var(--yellow);
      color: #000;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      padding: 8px 14px;
      border: 2px solid #000;
      box-shadow: 3px 3px 0 rgba(255,255,255,.3);
      margin-bottom: 0;
    }
    /* おすすめジャンルカード */
    .qm-quiz-unlock-card {
      background: #fff;
      color: #000;
      border: 3px solid #000;
      box-shadow: 5px 5px 0 rgba(255,229,0,.6);
      margin-bottom: 12px;
      overflow: hidden;
    }
    .qm-quiz-unlock-genre-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 22px 14px 18px;
      background: #000;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    /* 背景スポットライト */
    .qm-quiz-unlock-genre-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 60%, rgba(255,229,0,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .qm-quiz-unlock-sub {
      position: relative;
      font-size: 9px;
      font-weight: 900;
      color: #555;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .qm-quiz-genre-tag {
      position: relative;
      display: inline-block;
      background: var(--yellow);
      color: #000;
      font-size: 26px;
      font-weight: 900;
      padding: 10px 24px;
      border: 3px solid #fff;
      box-shadow: 0 0 20px rgba(255,229,0,.6), 4px 4px 0 rgba(255,255,255,.2);
      letter-spacing: .04em;
      animation: qmGenreReveal .4s cubic-bezier(.175,.885,.32,1.275) both;
    }
    @keyframes qmGenreReveal {
      from { transform: scale(.7); opacity: 0; }
      to   { transform: scale(1);  opacity: 1; }
    }
    /* CTAボタン */
    .qm-quiz-cta {
      display: block;
      margin: 14px;
      padding: 16px 14px;
      background: var(--yellow);
      color: #000;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: .1em;
      text-decoration: none;
      text-align: center;
      border: 2.5px solid #000;
      box-shadow: 4px 4px 0 #000;
      transition: transform .08s, box-shadow .08s;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }
   
    .qm-quiz-cta:active {
      transform: translate(4px, 4px);
      box-shadow: none;
    }

    /* リプレイボタン */
    .qm-game-replay {
      display: block;
      width: 100%;
      padding: 14px;
      background: transparent;
      border: 2px solid #2a2a2a;
      border-radius: 0;
      color: #555;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .1em;
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .qm-game-replay:active { color: #888; border-color: #444; background: #111; }

    /* ─── Face 4: GAME OVER ─── */
    .qm-gameover-header {
      text-align: center;
      padding: 14px 0 8px;
      position: relative;
    }
    /* 背景赤スポットライト */
    .qm-gameover-header::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 40%, rgba(200,0,0,.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .qm-gameover-title {
      position: relative;
      font-size: 62px;
      font-weight: 900;
      color: #ff2222;
      letter-spacing: -.04em;
      line-height: .9;
      text-shadow: 5px 5px 0 #000, 0 0 28px rgba(255,0,0,.9);
      animation: qmGameOverPulse .5s ease infinite alternate;
    }
    @keyframes qmGameOverPulse {
      from { text-shadow: 5px 5px 0 #000, 0 0 12px rgba(255,0,0,.6); transform: scale(.97); }
      to   { text-shadow: 5px 5px 0 #000, 0 0 56px rgba(255,0,0,1), 0 0 90px rgba(255,0,0,.4); transform: scale(1.03); }
    }
    /* CRTフリッカー */
    @keyframes qmCrtFlicker {
      0%, 95%, 100% { opacity: 1; }
      96%            { opacity: .7; }
      97%            { opacity: 1; }
      98%            { opacity: .5; }
    }
    #gameFaceOver { animation: qmFaceIn .28s cubic-bezier(.2,.8,.3,1) both, qmCrtFlicker 4s step-end infinite; }
    .qm-gameover-sub {
      position: relative;
      margin: 10px 0 0;
      color: #555;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .qm-gameover-box {
      margin: 14px 0;
      padding: 14px;
      background: #0d0000;
      border: 2px solid #550000;
      text-align: center;
      box-shadow: inset 0 0 14px rgba(255,0,0,.12);
    }
    .qm-gameover-box p {
      color: #ff6666;
      font-size: 14px;
      font-weight: 900;
      margin: 0;
      text-shadow: 0 0 10px rgba(255,0,0,.7);
    }
    .qm-game-retry {
      display: block;
      width: 100%;
      border: 3px solid #000;
      min-height: 52px;
      border-radius: 0;
      background: #dd0000;
      color: #fff;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: .12em;
      cursor: pointer;
      box-shadow: 5px 5px 0 #fff;
      transition: transform .08s, box-shadow .08s;
    }
    .qm-game-retry:active {
      transform: translate(5px,5px);
      box-shadow: 0 0 0 #fff;
    }
    .qm-game-retry-sub {
      display: block;
      width: 100%;
      margin-top: 8px;
      padding: 11px;
      background: transparent;
      border: 1.5px solid #3a0000;
      border-radius: 0;
      color: #660000;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      cursor: pointer;
      transition: color .15s, border-color .15s;
    }
    .qm-game-retry-sub:active { color: #993333; border-color: #660000; }

    /* ── EXPLAIN VALUE ── */
    .qm-explain-illust {
      margin: -54px -20px 24px -20px;
      border-bottom: 3px solid #000;
      overflow: hidden;
    }
    .qm-explain-illust img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .qm-explain {
      display: grid;
      gap: 0;
    }

    .qm-explain-card {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 16px 0;
      background: transparent;
      border-top: 2px solid #000;
    }
    .qm-explain-card:last-child {
      border-bottom: 2px solid #000;
    }

    .qm-explain-icon {
      flex: 0 0 52px;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      background: var(--yellow);
      font-size: 24px;
      font-weight: 900;
      border: 2.5px solid #000;
      box-shadow: 3px 3px 0 #000;
      flex-shrink: 0;
    }

    .qm-explain-card h3 {
      margin: 0;
      color: #000;
      font-size: 17px;
      font-weight: 900;
      line-height: 1.25;
      letter-spacing: -.02em;
    }

    .qm-explain-card p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.6;
    }

    /* ── ARENA ── */
    .qm-arena-list {
      display: grid;
      gap: 12px;
    }

    .qm-arena {
      position: relative;
      overflow: hidden;
      display: block;
      min-height: 120px;
      padding: 18px 18px 18px 24px;
      background: #000;
      color: #fff;
      border-top: 3px solid #000;
    }

    .qm-arena::after { display: none; }

    /* yellow left accent stripe */
    .qm-arena::before {
      content: '';
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 6px;
      background: var(--yellow);
    }

    .qm-arena-history,
    .qm-arena-it,
    .qm-arena-culture,
    .qm-arena-life { background: #000; }

    .qm-arena small {
      position: relative;
      display: inline-flex;
      padding: 4px 8px;
      background: var(--yellow);
      color: #000;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .06em;
      border: 1.5px solid #000;
    }

    .qm-arena h3 {
      position: relative;
      margin: 10px 0 0;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: -.03em;
    }

    .qm-arena p {
      position: relative;
      margin: 6px 0 0;
      max-width: 260px;
      color: #aaa;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
    }

    .qm-arena-go {
      position: relative;
      display: inline-flex;
      margin-top: 10px;
      font-size: 13px;
      font-weight: 900;
      color: var(--yellow);
    }

    /* ── MASTER PATH ── */
    .qm-path-illust {
      margin: -54px -20px 24px -20px;
      border-bottom: 3px solid #000;
      overflow: hidden;
    }
    .qm-path-illust img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .qm-path {
      padding: 0;
      background: transparent;
    }

    .qm-path-row {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 24px;
    }

    /* ステップ間の連結線 */
    .qm-path-connector {
      display: flex;
      justify-content: flex-start;
      padding-left: 25px; /* バッジ中心に合わせる */
      height: 20px;
    }
    .qm-path-connector::before {
      content: "";
      display: block;
      width: 2px;
      height: 100%;
      background: #000;
    }

    .qm-path-item {
      display: flex;
      align-items: stretch;
      padding: 0;
      background: transparent;
      border: none;
      box-shadow: none;
      position: static;
    }

    .qm-path-num {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      background: var(--yellow);
      color: #000;
      font-weight: 900;
      font-size: 22px;
      border: 2.5px solid #000;
      border-right: none;
      line-height: 1;
      position: static;
      transform: none;
      top: auto; left: auto;
    }

    .qm-path-item-body {
      flex: 1;
      padding: 16px 14px;
      background: #fff;
      border: 2.5px solid #000;
      box-shadow: 3px 3px 0 #000;
    }

    .qm-path-item h3 {
      margin: 0;
      color: #000;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: -.02em;
    }

    .qm-path-item p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.6;
    }


    /* ── ALL GENRES 難易度別リスト ── */
    .qm-genre-rows {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* カテゴリ見出し */
    .qm-genre-cat-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: -8px;
    }
    .qm-genre-cat-head h3 {
      margin: 0;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .2em;
      color: #000;
      background: var(--yellow);
      padding: 4px 12px;
      border: 2px solid #000;
      box-shadow: 2px 2px 0 #000;
      text-transform: uppercase;
    }
    .qm-genre-cat-head::after {
      content: '';
      flex: 1;
      height: 2px;
      background: #000;
    }

    /* カード グリッド */
    .qm-genre-card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* 各ジャンルカード */
    .qm-genre-card {
      background: #fff;
      border: 2.5px solid #000;
      box-shadow: 3px 3px 0 #000;
      padding: 10px 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .qm-genre-card-name {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 900;
      color: #000;
      letter-spacing: -.01em;
      line-height: 1;
    }

    .qm-genre-card-levels {
      display: flex;
      gap: 4px;
    }
    .qm-genre-card-levels a {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px 0;
      font-size: 10px;
      font-weight: 900;
      text-decoration: none;
      letter-spacing: .04em;
      border: 1.5px solid #000;
      box-shadow: 2px 2px 0 #000;
      transition: transform .08s, box-shadow .08s;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .qm-genre-card-levels a:first-child  { background: var(--yellow); color: #000; }
    .qm-genre-card-levels a:nth-child(2) { background: #fff;          color: #000; }
    .qm-genre-card-levels a:nth-child(3) { background: #000;          color: #fff; }
    .qm-genre-card-levels a:active {
      transform: translate(2px,2px);
      box-shadow: none;
    }

    .qm-genre-num {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 17px;
      height: 17px;
      background: var(--yellow);
      color: #000;
      font-size: 8px;
      font-weight: 900;
      border: 1.5px solid #000;
    }

    /* ── ALL GENRES ── */
    .qm-genre-illust {
      margin: -54px -20px 20px -20px;
      border-bottom: 3px solid #000;
      overflow: hidden;
    }
    .qm-genre-illust img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .qm-genre-list {
      display: grid;
      gap: 10px;
    }

    .qm-genre {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 0;
      background: transparent;
      border-top: 2px solid #000;
    }

    .qm-genre-mark {
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      background: #000;
      color: var(--yellow);
      font-weight: 900;
      font-size: 16px;
      border: 2px solid #000;
    }

    .qm-genre-body { flex: 1; }

    .qm-genre h3 {
      margin: 0;
      color: #000;
      font-size: 16px;
      font-weight: 900;
    }

    .qm-genre p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .qm-genre-arrow {
      color: #000;
      font-size: 22px;
      font-weight: 900;
    }

    /* ── FINAL CTA（フル背景・豪華演出） ── */
    .qm-final {
      position: relative;
      padding: 0;
      overflow: hidden;
      text-align: center;
      background: #000;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* 背景画像 */
    .qm-final-img {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      flex-shrink: 0;
    }
    .qm-final-img img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }
    /* 下部フェードオーバーレイ */
    .qm-final-img::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.9) 78%,
        #000 100%
      );
    }

    /* 集中線（ゴールド） */
    .qm-final::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: repeating-conic-gradient(
        from 0deg at 50% 45%,
        rgba(255,229,0,.045) 0deg 1deg,
        transparent 1deg 7deg
      );
      pointer-events: none;
    }

    /* コンテンツ本体 */
    .qm-final-body {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 0 22px 44px;
      margin-top: -100px;
    }

    /* 上部ラベル */
    .qm-final-label {
      display: inline-block;
      background: var(--yellow);
      color: #000;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .18em;
      padding: 4px 14px;
      border: 2px solid #000;
      box-shadow: 2px 2px 0 #000;
      margin-bottom: 18px;
    }

    .qm-final h2 {
      position: relative;
      margin: 0;
      font-size: 36px;
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: -.04em;
      text-shadow: 3px 3px 0 #000, -1px -1px 0 rgba(0,0,0,.5);
      text-align: center;
    }
    .qm-final h2 span {
      color: var(--yellow);
      font-size: 42px;
    }

    .qm-final p {
      position: relative;
      margin: 16px auto 24px;
      max-width: 300px;
      color: #ccc;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.85;
      text-shadow: 1px 1px 0 #000;
    }

    /* （qm-final-ctaは qm-comic-btn に置き換え済み） */

    /* ── キラキラ星パーティクル ── */
    .qm-final-sparks {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      overflow: hidden;
    }
    .qm-final-sparks span {
      position: absolute;
      display: block;
      color: var(--yellow);
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
      opacity: 0;
      animation: qmSparkFloat linear infinite;
      text-shadow: 0 0 6px rgba(255,229,0,.9), 0 0 14px rgba(255,229,0,.5);
    }
    .qm-final-sparks span:nth-child(1)  { left:  8%; animation-duration: 4.2s; animation-delay: 0s;    font-size: 14px; }
    .qm-final-sparks span:nth-child(2)  { left: 20%; animation-duration: 5.1s; animation-delay: 0.7s;  font-size: 20px; }
    .qm-final-sparks span:nth-child(3)  { left: 35%; animation-duration: 3.8s; animation-delay: 1.4s;  font-size: 12px; }
    .qm-final-sparks span:nth-child(4)  { left: 52%; animation-duration: 4.7s; animation-delay: 0.3s;  font-size: 22px; }
    .qm-final-sparks span:nth-child(5)  { left: 65%; animation-duration: 5.5s; animation-delay: 1.1s;  font-size: 16px; }
    .qm-final-sparks span:nth-child(6)  { left: 78%; animation-duration: 4.0s; animation-delay: 2.0s;  font-size: 10px; }
    .qm-final-sparks span:nth-child(7)  { left: 88%; animation-duration: 3.5s; animation-delay: 0.5s;  font-size: 18px; }
    .qm-final-sparks span:nth-child(8)  { left: 44%; animation-duration: 6.0s; animation-delay: 1.8s;  font-size: 13px; }
    .qm-final-sparks span:nth-child(9)  { left: 15%; animation-duration: 4.5s; animation-delay: 2.5s;  font-size: 24px; color: #fff; }
    .qm-final-sparks span:nth-child(10) { left: 72%; animation-duration: 3.9s; animation-delay: 0.9s;  font-size: 11px; color: #fff; }
    @keyframes qmSparkFloat {
      0%   { bottom: -10%; opacity: 0;   transform: rotate(0deg)   scale(.6); }
      15%  {               opacity: 1; }
      80%  {               opacity: .8; }
      100% { bottom: 105%; opacity: 0;   transform: rotate(360deg) scale(1.2); }
    }


    /* 見出しのゴールドグロー */
    .qm-final h2 span {
      text-shadow: 0 0 12px rgba(255,229,0,.8), 0 0 28px rgba(255,229,0,.4);
      animation: qmTitleGlow 3s ease-in-out infinite alternate;
    }
    @keyframes qmTitleGlow {
      from { text-shadow: 0 0 10px rgba(255,229,0,.6), 0 0 24px rgba(255,229,0,.3); }
      to   { text-shadow: 0 0 20px rgba(255,229,0,1),  0 0 48px rgba(255,229,0,.6); }
    }

    /* ── STICKY CTA ── */
    .qm-sticky {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: #fff;
      border-top: 3px solid #000;
      transform: translateY(110%);
      transition: transform .32s cubic-bezier(.22,.61,.36,1);
      box-shadow: 0 -4px 16px rgba(0,0,0,.18);
    }
    .qm-sticky.is-visible {
      transform: translateY(0);
    }
    .qm-sticky .qm-btn {
      min-height: 54px;
      font-size: 15px;
      background: #cc0000;
      color: #fff;
      border-color: #000;
      box-shadow: 4px 4px 0 #000;
      letter-spacing: .08em;
      position: relative;
      overflow: hidden;
      animation: qmStickyPulse 2.4s ease-in-out infinite;
    }
    @keyframes qmStickyPulse {
      0%, 100% { box-shadow: 4px 4px 0 #000; transform: scale(1); }
      50%       { box-shadow: 4px 4px 0 #000, 0 0 18px rgba(204,0,0,.7), 0 0 40px rgba(204,0,0,.35); transform: scale(1.018); }
    }
    /* シマー */
    .qm-sticky .qm-btn::after {
      content: "";
      position: absolute;
      top: 0; left: -130%;
      width: 55%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
      animation: qmStickyShimmer 3s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes qmStickyShimmer {
      0%, 55% { left: -130%; }
      100%    { left: 160%; }
    }
    .qm-sticky .qm-btn:active {
      box-shadow: none;
      animation: none;
    }

    /* ══════════════════════════════════════
       SITE FOOTER
    ══════════════════════════════════════ */
    .qmf-footer {
      background: #111;
      color: #ccc;
      border-top: 3px solid #000;
      padding: 32px 20px 24px;
    }

    .qmf-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
    }
    .qmf-logo img {
      height: 18px;
    }

    .qmf-section-label {
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .2em;
      color: var(--yellow);
      text-transform: uppercase;
      margin: 0 0 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .qmf-section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #333;
    }

    .qmf-nav-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      margin-bottom: 20px;
    }
    .qmf-nav-grid a {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 9px 10px;
      font-size: 12px;
      font-weight: 700;
      color: #ccc;
      text-decoration: none;
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      transition: background .1s, color .1s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .qmf-nav-grid a::before {
      content: '›';
      color: var(--yellow);
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
    }
    .qmf-nav-grid a:active {
      background: #222;
      color: var(--yellow);
    }
    .qmf-nav-grid a.qmf-nav-highlight {
      background: #1e1a00;
      color: var(--yellow);
      border-color: #3a3200;
    }

    .qmf-divider {
      height: 1px;
      background: #2a2a2a;
      margin: 20px 0;
    }

    .qmf-copyright {
      font-size: 10px;
      color: #555;
      text-align: center;
      letter-spacing: .04em;
      line-height: 1.8;
    }