:root{
    --bg:#121722; --bg2:#1B2231; --card:#252E42; --ink:#F2F5FA; --sub:#93A2BC; --line:#2E3850;
    --edge:#44536F; --gold:#F5C542; --onGold:#2A1D00; --o:#4AA3F0; --x:#E8544B;
    --side:#0E131C; --sideActive:#1B2231; --shadow:0 14px 40px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:"DotGothic16",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    line-height:1.9;-webkit-font-smoothing:antialiased;position:relative}
  /* アプリと同じ黒地に金の絵。上から下地の色を薄くかけて字を読みやすくする */
  body::before{content:"";position:fixed;inset:0;z-index:-2;
    background:url("bg.jpg") center/cover no-repeat}
  body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg);opacity:.72}
  a{color:inherit;text-decoration:none}
  .app{display:flex;min-height:100vh}
  aside{width:260px;flex:0 0 260px;background:rgba(14,19,28,.92);border-right:1px solid var(--line);
    position:sticky;top:0;height:100vh;overflow-y:auto;padding:26px 16px}
  .brand{font-weight:400;font-size:22px;letter-spacing:.02em;padding:0 10px;margin-bottom:2px}
  .brand .m{color:var(--gold)}
  .brandsub{color:var(--sub);font-size:11.5px;letter-spacing:.2em;padding:0 10px;margin-bottom:18px}
  .topbar{display:block}
  .snav{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
  .snav a{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:2px;
    color:var(--sub);font-size:14px;border:1px solid transparent;line-height:1.5}
  .snav a .no{font-variant-numeric:tabular-nums;font-size:12px;opacity:.6;padding-top:2px;min-width:19px}
  .snav a:hover{color:var(--ink);background:var(--sideActive)}
  .snav a.on{color:var(--ink);background:var(--sideActive);border-color:var(--gold)}
  .snav a.on .no{color:var(--gold);opacity:1}
  main{flex:1;min-width:0}
  .wrap{max-width:1080px;margin:0 auto;padding:0 34px}
  section{padding:60px 0;border-bottom:1px solid var(--line);scroll-margin-top:10px}
  .legal p{background:rgba(27,34,49,.72);border-left:3px solid var(--line);padding:10px 14px;border-radius:2px}
  .eyebrow{color:var(--gold);font-weight:400;font-size:12.5px;letter-spacing:.1em;margin:0 0 10px}
  h1{font-size:min(44px,calc(5.1vw - 18px));line-height:1.25;margin:0 0 16px;white-space:nowrap}
  h1 .g{background:linear-gradient(120deg,var(--gold),var(--o));-webkit-background-clip:text;
    background-clip:text;color:transparent}
  h2{font-size:min(28px,calc(5.6vw - 20px));margin:0 0 12px;white-space:nowrap}
  h3{font-size:15.5px;margin:20px 0 5px}
  .lead{color:var(--sub);font-size:16px;max-width:none;margin:0 0 22px;word-break:auto-phrase}
  .hero{background:radial-gradient(900px 420px at 20% -10%,rgba(245,197,66,.13),transparent 70%);padding-top:62px}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-top:18px}
  @media(max-width:560px){.grid{grid-template-columns:1fr}}
  .card{background:var(--bg2);border:3px solid var(--edge);border-radius:4px;padding:18px}
  .card h4{font-size:15.5px;margin:0 0 6px;color:var(--gold)}
  .card p{font-size:13.5px;color:var(--sub);margin:0;word-break:auto-phrase}
  .legal{font-size:14px;color:var(--sub);word-break:auto-phrase}
  .legal h3{color:var(--ink)}
  .btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--onGold);
    font-weight:400;padding:14px 24px;border-radius:4px;font-size:15px;border:3px solid var(--gold);cursor:pointer}
  .board{display:grid;grid-template-columns:repeat(3,64px);gap:7px;margin:14px auto 0;justify-content:center}
  .board div{width:64px;height:64px;border:3px solid var(--edge);border-radius:2px;background:var(--bg2);
    display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:400;color:var(--sub)}
  .board div.o{border-color:var(--o);color:var(--o);background:#12304F}
  .board div.x{border-color:var(--x);color:var(--x);background:#43201D}
  .board div.t{border-color:var(--gold);color:var(--gold)}
  .board img{width:42px;height:42px;image-rendering:pixelated}
  /* ── ルールの横めくり。アプリの「あそびかた」と同じ作り ── */
  .pager{display:flex;align-items:center;gap:10px;margin-top:20px}
  .track{flex:1;min-width:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;border:3px solid var(--edge);
    border-radius:4px;background:rgba(27,34,49,.82)}
  .track::-webkit-scrollbar{display:none}
  .page{flex:0 0 100%;scroll-snap-align:center;padding:26px 22px 24px;
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
  .pgart{min-height:196px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
  .pgt{color:var(--gold);font-size:17px;margin:0}
  .pgb{color:var(--sub);font-size:14px;margin:0;max-width:46ch;word-break:auto-phrase}
  .arrow{flex:0 0 auto;width:38px;height:38px;border-radius:4px;background:var(--card);
    border:3px solid var(--edge);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
    font-family:inherit;display:flex;align-items:center;justify-content:center}
  .arrow:disabled{opacity:.3;cursor:default}
  .dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
  .dots i{width:7px;height:7px;border-radius:4px;background:var(--line);display:block;
    cursor:pointer;transition:background .2s}
  .dots i.on{background:var(--gold)}
  .board.mini{grid-template-columns:repeat(3,52px);gap:6px;margin:0}
  .board.mini div{width:52px;height:52px;font-size:19px}
  .board.mini img{width:34px;height:34px}
  .board div.win{border-color:var(--gold)}
  .bidbox{width:230px;display:flex;flex-direction:column;gap:12px}
  .bidrow{display:flex;align-items:center;justify-content:space-between}
  .bidpm{width:42px;height:38px;border:3px solid var(--edge);border-radius:4px;
    background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--sub)}
  .bidnum{color:var(--o);font-size:34px}
  .bidbar{height:26px;border:3px solid var(--edge);border-radius:4px;background:var(--bg)}
  .bidbar i{display:block;height:100%;background:#2E5C86}
  .reveal{display:flex;align-items:center;gap:14px;font-size:40px}
  .reveal .ro{color:var(--o)} .reveal .rx{color:var(--x)} .reveal .rc{color:var(--sub);font-size:26px}
  .timer{width:230px;display:flex;flex-direction:column;align-items:center;gap:12px}
  .ttrack{width:100%;height:12px;border-radius:4px;background:var(--bg);overflow:hidden}
  .ttrack i{display:block;width:48%;height:100%;background:var(--gold)}
  .tnum{color:var(--gold);font-size:30px}
  @media(max-width:560px){
    .page{padding:20px 14px 18px}
    .pgart{min-height:168px}
    .board.mini{grid-template-columns:repeat(3,46px);gap:5px}
    .board.mini div{width:46px;height:46px;font-size:17px}
    .board.mini img{width:30px;height:30px}
    .arrow{width:32px;height:32px;font-size:18px}
  }
  footer{padding:26px 0 60px;color:var(--sub);font-size:12.5px}
  @media(max-width:760px){
    .app{flex-direction:column}
    aside{width:auto;flex:none;height:auto;position:sticky;top:0;z-index:40;
      padding:10px 14px 8px;display:block;border-right:0;border-bottom:1px solid var(--line);
      overflow:visible}
    .brandsub{display:none}
    .brand{margin:0 0 8px;padding:0;font-size:18px;white-space:nowrap}
    .topbar{display:flex;align-items:center;gap:10px}
        .snav{flex-direction:row;gap:5px;flex:1 1 auto;overflow-x:auto;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
    .snav::-webkit-scrollbar{display:none}
    .snav a{padding:6px 11px;white-space:nowrap;font-size:13px;flex:0 0 auto}
    .snav a .no{display:none}
    .wrap{padding:0 18px}
    section{padding:40px 0}
    h1{line-height:1.3;font-size:min(40px,calc(4.9vw - 2px))}
    h2{font-size:min(26px,calc(5.4vw - 2px))}
    .lead{font-size:14.5px}
    .board{grid-template-columns:repeat(3,58px);gap:6px;margin:12px auto 0}
    .board div{width:58px;height:58px;font-size:23px}
    .board img{width:38px;height:38px}
    .card{padding:15px}
    footer{padding:22px 0 44px}
  }

  /* ── アレンジのホーム。ゲームを絵で選ぶ ── */
  .backhome{display:inline-block;color:var(--sub);font-size:12px;padding:0 10px 8px}
  .backhome:hover{color:var(--gold)}
  .home{max-width:900px;margin:0 auto;padding:64px 24px 40px;text-align:center}
  .home .brandbig{font-size:min(52px,11vw);margin:0 0 6px;letter-spacing:.04em}
  .home .brandbig .m{color:var(--gold)}
  .home .brandsub2{color:var(--sub);font-size:12px;letter-spacing:.24em;margin:0 0 40px}
  .games{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;
    max-width:620px;margin:0 auto}
  .game{display:block;background:var(--bg2);border:3px solid var(--edge);border-radius:6px;
    padding:20px 16px 18px;transition:border-color .15s,transform .15s}
  .game:hover{border-color:var(--gold);transform:translateY(-3px)}
  .game img{width:118px;height:118px;display:block;margin:0 auto 14px;
    filter:drop-shadow(0 12px 22px rgba(0,0,0,.55))}
  .game .gname{font-size:17px;margin:0 0 4px}
  .game .gsub{color:var(--sub);font-size:12.5px;margin:0;line-height:1.7}
  @media(max-width:560px){
    .home{padding:44px 18px 30px}
    .games{grid-template-columns:1fr;gap:16px;max-width:320px}
    .game img{width:96px;height:96px}
  }
  /* ── どのページの下にも置く同じ足もと ── */
  .foot{border-top:1px solid var(--line);padding:24px 0 54px;color:var(--sub);font-size:12.5px;
    text-align:center}
  .foot a{color:var(--sub);margin:0 10px;white-space:nowrap;line-height:2.4}
  .foot a:hover{color:var(--gold)}
  .foot .copy{margin:10px 0 0;opacity:.7;font-size:11.5px}

  /* ── まるばつ9の見本の盤。9つの小盤を3×3に並べる ── */
  .bb{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:206px;margin:0 auto}
  .sb{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;
    border:2px solid var(--edge);border-radius:2px;background:rgba(27,34,49,.72)}
  .sb i{aspect-ratio:1;border-radius:1px;background:rgba(255,255,255,.055);
    display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;line-height:1}
  .sb.on{border-color:var(--gold);background:rgba(245,197,66,.10)}
  .sb.off{opacity:.42}
  .sb i.o{color:var(--o)} .sb i.x{color:var(--x)}
  .sb i.win{background:rgba(245,197,66,.30);box-shadow:inset 0 0 0 1px var(--gold)}
  @media(max-width:560px){ .bb{width:184px} .sb i{font-size:11px} }

  /* ── お問い合わせとプライバシーの、単独のページ ── */
  .doc{max-width:760px;margin:0 auto;padding:22px 24px 10px}
  .doc .back{display:inline-block;color:var(--sub);font-size:12.5px;margin-bottom:26px}
  .doc .back:hover{color:var(--gold)}
  .doc h1{font-size:min(30px,7vw);white-space:normal;margin:0 0 6px}
  .doc .apps{color:var(--sub);font-size:12.5px;margin:0 0 26px}
  .doc h2{font-size:min(19px,5.2vw);white-space:normal;margin:34px 0 8px;color:var(--gold)}
  .doc h3{font-size:15px;margin:22px 0 5px}
  .doc p{font-size:14px;color:var(--sub);word-break:auto-phrase;
    background:rgba(27,34,49,.72);border-left:3px solid var(--line);padding:10px 14px;border-radius:2px}
  .doc .plain{background:none;border:0;padding:0}
  .doc .only{color:var(--gold);font-size:12px;margin:18px 0 -2px;padding:0;background:none;border:0}
  @media(max-width:560px){ .doc{padding:18px 16px 6px} }