/* =====================================================================
   PLAYROOM 下のページの共通の見た目「空と芝の外遊び」（2026-10）
   TOP（premium/_src/top.html）と同じ色・字・ヘッダー・足もとにそろえる。
   部品の一覧と組み立て方は playroom-top-redesign/v6-pages/SYSTEM.md。
   字は Google Fonts の Zen Maru Gothic（500/700/900）と Dela Gothic One を各ページの <head> で読む。
   ===================================================================== */

/* ---------- 色と字の変数（値は TOP の :root と同じ） ---------- */
:root{
  --ink:#1C2B4A;          /* 字のすべて、濃いボタン */
  --ink-2:#2C3B5A;        /* 説明文 */
  --mute:#5B6886;         /* 小さな注意書き、更新日 */
  --cream:#FFFCF4;        /* 紙。濃い地の上の字、カード */
  --paper:#FFF7E6;        /* 紙のしおりの地（TOP の始め方） */
  --white:#FFFFFF;
  --red:#C83A3A;          /* 押す所の一部だけ。1画面に1か所まで */
  --red-ink:#FFFFFF;
  --sky-1:#9DD2F1; --sky-2:#B6DEF5; --sky-3:#DAEFFA;
  --hero:#B4DDF4;         /* 送ったあとのヘッダーの地 */
  --mark:#FFD45C;         /* お日さま。蛍光ペンと点 */
  --gold:#FFC23D; --gold-d:#D99A1E; --join-shadow:#C98A14;
  --grass:#A6D783; --grass-d:#8FC66A; --grass-far:#C4E5A8;
  --road:#FFF9EA; --road-edge:#E8D6AA;
  --step-1:#FFE7A0; --step-2:#C4E3F6; --step-3:#D3EEC1;
  --member:#27406E; --member-d:#1A2D52; --dusk:#1F3157;
  --foot:#17243F; --foot-ink:#FFFCF4; --foot-mute:#C9D3E6; --foot-dim:#8E9BB8; --foot-en:#FFD45C;
  --pawn-1:#3F8FD6; --pawn-2:#4DB56F; --pawn-3:#FFC23D; --pawn-4:#A08FE6; --pawn-5:#FFFCF4;
  --logo-o1:#FFC23D; --logo-o2:#4DB56F;
  --sh-card:0 3px 0 rgba(28,43,74,.13),0 8px 18px rgba(28,43,74,.08);
  --sh-btn:0 2px 0 rgba(28,43,74,.18);
  --sh-pop:0 3px 0 rgba(28,43,74,.10),0 14px 30px rgba(28,43,74,.16);
  --sh-dusk:0 4px 0 rgba(8,16,34,.35);
  --stock:var(--gold);    /* 会員のページの古い style="background:var(--stock)" が金になるように */
  --display:"Dela Gothic One","Zen Maru Gothic",system-ui,sans-serif;
  --body:"Zen Maru Gothic",system-ui,-apple-system,"Hiragino Sans",sans-serif;
  --hdr:54px;
  --wrap:1080px;
}
@media (min-width:900px){:root{--hdr:66px}}
/* 言語版の字（2026-10-06）。<html lang> で切りかえる。日本語と英語は上の :root のまま。
   字の読み込みは各ページの <head>（scripts/i18n/sky-parts.mjs の fontsFor）。書体は仮で、言語版の TOP とそろえる */
:root:lang(zh-Hant){
  --body:"Chiron GoRound TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --display:"Dela Gothic One","Chiron GoRound TC",system-ui,sans-serif;
}
:root:lang(ko){
  /* 言語版の TOP（scripts/i18n/sky-hub.mjs の FONTS.ko）とそろえる。本文は Gowun Dodum、見出しと太い所は Jua。
     どちらも太さが1つしかないので、ブラウザが勝手に太らせないようにして、太い所（800/900 の所）は Jua にする */
  --body:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --display:"Dela Gothic One","Jua",system-ui,sans-serif;
  --ko-strong:"Jua","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
:root:lang(ko) body{font-synthesis:none}
/* 詳細度0にして、ゲームの名前など font-family を決めている所（var(--display)）には勝たない */
:where(:root:lang(ko)) :where(h1,h2,h3,h4,caption,th,summary,button,b,strong,.bar .back,.bar .bk,.bar-pill,.eyebrow,.r-hero h1,.subtitle,.lang-row,.sec-tag,.sec-head,.gcard .no,.gcard .genre,.play,.gcard .play,.guide,.gcard .guide,.chip,.spec-tbl caption,.spec-tbl th,.play-btn,.sub-link,.flow h3,.cards .card h3,.ranks .nm,.faq-item h3,.qa .q h3,.rel .rk,.rel b,.bignav a,.sky-foot .copy span:last-child,.prose h2,.pg h1,.gp h1,.pg h2,.gp h2,.pg .steps li,.terms dt,.terms .money,.pg .go,.go-btn,.textlink,.pushbtn,.gbtn,.fld-label,.ss-kind b,.ss-fare,.dater u,.ev-who,.gcard.tface .no,.gcard.tface .genre){font-family:var(--ko-strong)}
/* 韓国語は語の途中で折り返さない（長すぎる語だけは折る） */
:root:lang(ko) body,:root:lang(ko) .spec-tbl td{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- 土台 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--foot)}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-weight:700;font-size:15px;line-height:1.8;overflow-x:hidden;min-height:100vh}
body.sky{display:flex;flex-direction:column}
body.sky>*{flex:none}
body.sky>.sky-foot{margin-top:auto}
[id]{scroll-margin-top:calc(var(--hdr) + 14px)}
p,li,dd,h1,h2,h3,small,.d,.ds,.genre{word-break:auto-phrase;text-wrap:pretty}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:900}
.nw,.nowrap{white-space:nowrap}
/* Safari のときだけ site.js が言葉のまとまりを .wp で包む（Safari は auto-phrase が分からないため） */
html.wbr .wp{white-space:nowrap}
html.wbr .wp.wpx{white-space:normal}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto}

/* ---------- ヘッダー（TOP の .bar と同じ） ---------- */
.bar{position:sticky;top:0;z-index:50;height:var(--hdr);display:flex;align-items:center;gap:6px;padding:0 10px 0 14px;background:var(--sky-1);transition:background .25s,box-shadow .25s}
.bar.solid{background:var(--hero);box-shadow:0 1px 0 rgba(28,43,74,.08),0 6px 18px rgba(28,43,74,.07)}
.bar .inner{display:flex;align-items:center;gap:6px;width:100%}
.logo{display:inline-flex;align-items:center;text-decoration:none;font-family:var(--display);font-weight:400;font-size:24px;line-height:1;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.logo .o{display:inline-block;position:relative;width:.78em;height:.78em;margin:0 .02em;top:.02em}
.logo .o b{position:absolute;inset:0;opacity:0;font-weight:400}
.logo .o svg{width:100%;height:100%;overflow:visible}
.logo:hover .o{animation:roll .6s cubic-bezier(.3,1.6,.5,1)}
.logo:hover .o+.o{animation-delay:.08s}
@keyframes roll{0%{transform:none}40%{transform:translateY(-6px) rotate(-20deg)}100%{transform:none}}
.bar .back,.bar .bk,.bar-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;font-family:var(--body);font-weight:900;font-size:14px;line-height:1;text-decoration:none;white-space:nowrap;background:var(--ink);color:var(--cream);padding:0 15px 0 12px;border-radius:999px 999px 999px 4px;transition:transform .2s}
.bar .back:hover,.bar .bk:hover,.bar-pill:hover{transform:rotate(-3deg) scale(1.04)}
.bar .back svg{width:15px;height:15px;flex:none}
/* 押せる所を44px にする（見た目は変えず、押せる範囲だけ広げる。2026-10-06） */
.bar .back,.bar .bk,.bar-pill{position:relative}.bar .back::after,.bar .bk::after,.bar-pill::after{content:"";position:absolute;inset:-3px -2px}
.bar .bk span{border:0;padding:0}
.bar .bk::before{content:"";width:9px;height:9px;border-left:2.6px solid currentColor;border-bottom:2.6px solid currentColor;transform:rotate(45deg);margin:0 2px 0 3px}
@media (min-width:900px){
  .bar{padding:0 28px}
  .logo{font-size:30px}
  .bar .back,.bar .bk,.bar-pill{font-size:15px;min-height:42px;padding:0 18px 0 14px}
}
@media (max-width:389px){.bar{padding:0 8px 0 10px}.logo{font-size:21px}.bar .back,.bar .bk{font-size:13px;padding:0 11px 0 9px}}

/* ---------- 空の最初の区画 ---------- */
.r-hero,.sky-strip{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 52%,var(--sky-3) 100%);padding:18px 16px 0}
.r-hero>.wrap{position:relative;z-index:2}
.clouds{position:absolute;inset:0;z-index:0;pointer-events:none}
@media (min-width:900px){.clouds::before{content:"";position:absolute;right:9%;top:46px;width:120px;height:120px;border-radius:50%;background:var(--mark);opacity:.9}}
.cl{position:absolute;width:var(--w);height:calc(var(--w)*.26);border-radius:999px;background:#fff;opacity:.92;animation:cloud 28s ease-in-out infinite alternate}
.cl::before,.cl::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cl::before{left:16%;bottom:35%;width:36%;aspect-ratio:1}
.cl::after{left:44%;bottom:22%;width:30%;aspect-ratio:1}
.cl.c1{--w:112px;top:14px;right:-30px}
.cl.c2{--w:84px;top:52%;left:-34px;animation-delay:-9s;opacity:.75}
.cl.c3{--w:70px;top:30%;right:22%;animation-delay:-17s;opacity:.7;display:none}
@keyframes cloud{to{transform:translateX(-18px)}}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:900;letter-spacing:.03em;line-height:1.3;background:var(--ink);color:var(--cream);padding:4px 12px 4px 9px;border-radius:999px}
.eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--mark);flex:none}
.r-hero h1{font-family:var(--body);font-weight:900;font-size:clamp(32px,8.6vw,60px);line-height:1.18;letter-spacing:.01em;margin-top:12px;color:var(--ink)}
.subtitle{display:inline;font-size:16px;font-weight:900;line-height:1.7;color:var(--ink);background:linear-gradient(transparent 60%,var(--mark) 60% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}
.r-hero .subtitle{display:inline-block;margin-top:10px}
.lede-blk,.r-lede{font-size:15px;font-weight:700;line-height:1.85;color:var(--ink-2);margin-top:14px;max-width:42em}
.lede-blk b,.r-lede b{color:var(--ink)}
.updated{font-size:12px;font-weight:700;color:var(--mute);margin-top:10px}
.lang-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;margin-bottom:12px;font-size:12px;font-weight:900}
.lang-row span{color:var(--mute);margin-right:2px}
.lang-row a{text-decoration:none;background:rgba(255,255,255,.7);padding:3px 11px;border-radius:999px}
.lang-row a:hover{background:#fff}
@media (min-width:900px){
  .r-hero,.sky-strip{padding:44px 40px 0}
  .r-hero h1{font-size:clamp(44px,4.8vw,68px)}
  .subtitle{font-size:18px}
  .lede-blk,.r-lede{font-size:16px}
  .cl.c1{--w:190px;top:26px;right:-40px}.cl.c2{display:none}.cl.c3{display:block;--w:110px;top:40%;right:14%}
}

/* 足もとの丘と、そこに立つ駒（飾り） */
.ground{position:relative;height:74px;margin:22px -16px 0;pointer-events:none}
.ground .hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:46px}
.ground .far{fill:var(--grass-far)}.ground .near{fill:var(--grass)}
.ground.dusk .far{fill:#3A5486}.ground.dusk .near{fill:var(--member)}
.koma-row{position:absolute;right:18px;bottom:16px;display:flex;align-items:flex-end;gap:8px;pointer-events:auto}
.koma-row.l{right:auto;left:18px}
@media (min-width:900px){
  .ground{height:110px;margin:30px -40px 0}
  .ground .hills{height:64px}
  .koma-row{right:7%;bottom:24px;gap:14px;--ks:64px}
  .koma-row.l{left:7%}
}

/* ---------- 駒のステッカー（中の絵は site.js が data-koma から描く） ---------- */
.koma{display:inline-block;width:var(--ks,46px);aspect-ratio:88/104;flex:none;line-height:0}
.koma svg{display:block;width:100%;height:100%;overflow:visible}
.koma.bob{animation:bob 1.6s ease-in-out infinite;animation-delay:calc(var(--k,0) * -.27s)}
.koma.hop{animation:hp .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes hp{40%{transform:translateY(-16px) rotate(-8deg)}}
.koma.sm{--ks:30px}.koma.lg{--ks:72px}

/* ---------- 区画の地 ---------- */
section{padding:44px 16px 52px;position:relative}
.band-grass{background:var(--grass)}
.band-paper{background:var(--paper)}
.band-cream{background:var(--cream)}
.band-dusk{background:var(--member);color:var(--cream)}
.rule-line{display:none}
@media (min-width:900px){section{padding:72px 40px 84px}}
/* 区画のつなぎめ（前の区画と地の色が変わるところに、丘のふちを付ける） */
.band-grass+.band-paper::before,.band-paper+.band-grass::before,.band-paper+.sky-end::before,.band-cream+.sky-end::before,.band-grass+.band-cream::before{content:"";position:absolute;left:0;right:0;top:-25px;height:26px;background:var(--wave) bottom/100% 100% no-repeat;pointer-events:none}
.band-paper{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 26' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C50 2 100 20 160 12 S270 0 320 10 370 18 390 12 V26 H0Z' fill='%23FFF7E6'/%3E%3C/svg%3E")}
.band-cream{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 26' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C50 2 100 20 160 12 S270 0 320 10 370 18 390 12 V26 H0Z' fill='%23FFFCF4'/%3E%3C/svg%3E")}
.band-grass,.sky-end{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 26' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C40 22 90 4 150 12 S250 24 300 12 360 2 390 9 V26 H0Z' fill='%23A6D783'/%3E%3C/svg%3E")}


/* 区画の見出し（TOP の .kicker と見出し） */
.sec-tag{display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.04em;line-height:1.5;background:var(--ink);color:var(--cream);padding:2px 11px;border-radius:999px;margin-bottom:8px}
.band-grass .sec-tag{color:var(--grass)}
.band-paper .sec-tag{background:var(--mark);color:var(--ink)}
.band-dusk .sec-tag{background:var(--gold);color:var(--ink)}
.sec-head{font-family:var(--body);font-weight:900;font-size:clamp(26px,7.4vw,46px);line-height:1.2;letter-spacing:.01em;margin-bottom:20px}
@media (min-width:900px){.sec-head{margin-bottom:30px}}

/* ---------- すごろくの道（飾り） ---------- */
.michi{position:relative;height:84px;margin:0 -16px;overflow:hidden;overflow:clip;overflow-y:visible;pointer-events:none}
.michi svg.road{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.michi .road path{fill:none}
.michi .r-edge{stroke:var(--road-edge);stroke-width:36}
.michi .r-fill{stroke:var(--road);stroke-width:29}
.michi .r-tick{stroke:var(--road-edge);stroke-width:29;stroke-dasharray:3 45}
.michi .koma{position:absolute;left:50%;top:0;transform:translate(-50%,-100%);pointer-events:auto}
@media (min-width:900px){.michi .koma{--ks:60px}}
.michi .koma.bob{animation:none}
.michi .koma .in{display:block;width:100%;height:100%;animation:bob 1.6s ease-in-out infinite;animation-delay:calc(var(--k,0) * -.27s)}
.michi .koma .in.hop{animation:hp .5s cubic-bezier(.3,1.6,.5,1)}
.michi .goal{position:absolute;width:34px;height:52px;transform:translate(-4px,-100%)}
.michi .goal svg{width:100%;height:100%}
@media (min-width:900px){.michi{margin:0 -40px;height:96px}}

/* 道の上の卓の一覧（スマホは道に沿って縦に並ぶ） */
.glist{display:grid;grid-template-columns:1fr;gap:34px;position:relative}
.glist::before{content:"";position:absolute;left:50%;top:80px;bottom:80px;width:34px;margin-left:-17px;z-index:0;
  background:repeating-linear-gradient(180deg,transparent 0 44px,var(--road-edge) 44px 47px),linear-gradient(90deg,var(--road-edge) 0 4px,var(--road) 4px calc(100% - 4px),var(--road-edge) calc(100% - 4px))}
@media (min-width:700px){.glist{grid-template-columns:repeat(2,1fr);gap:24px}.glist::before{display:none}}
@media (min-width:1100px){.glist{grid-template-columns:repeat(3,1fr);gap:26px}}

/* ---------- 卓のカード ---------- */
.gcard{position:relative;z-index:1;display:flex;flex-direction:column;background:var(--white);border-radius:24px;padding:10px 10px 16px;box-shadow:var(--sh-card);transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.gcard:hover{transform:translateY(-3px)}
.gcard .thumb{border-radius:16px;overflow:hidden;aspect-ratio:1200/630;background:var(--sky-3)}
.gcard .thumb img{width:100%;height:100%;object-fit:cover}
.gcard .body{display:flex;flex-direction:column;flex:1;padding:12px 8px 0}
.gcard .no{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:900;line-height:1.4;color:var(--ink);background:var(--paper);padding:3px 11px 3px 8px;border-radius:999px}
.gcard .no::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent,var(--mark));flex:none}
.gcard h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;letter-spacing:.01em;margin-top:9px}
.gcard .genre{font-size:14px;font-weight:900;line-height:1.5;margin-top:4px}
.gcard p{font-size:14.5px;font-weight:700;line-height:1.8;color:var(--ink-2);margin-top:8px}
.gcard .fit{font-size:13px;color:var(--ink);background:var(--road);border-radius:12px;padding:8px 12px;margin-top:10px}
.gcard .act{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:14px}
.gcard .koma{position:absolute;right:8px;top:-20px;--ks:52px;z-index:2}
.play,.gcard .play{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-family:var(--body);font-weight:900;font-size:15px;line-height:1;text-decoration:none;background:var(--ink);color:var(--cream);padding:0 20px 0 22px;border-radius:999px;box-shadow:var(--sh-btn);transition:transform .2s,background .2s}
.play:hover{background:var(--red);color:var(--red-ink);transform:rotate(-3deg) scale(1.04)}
.play svg{width:14px;height:14px;flex:none}
.guide,.gcard .guide{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:900;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.guide span{border:0}

/* ---------- 遊び方のページの最初の区画 ---------- */
.sky-howto .r-hero>.wrap{display:grid;gap:26px}
.sky-howto .r-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,10.2vw,84px);line-height:1.05;letter-spacing:.01em;margin-top:14px}
.meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:900;line-height:1.3;background:var(--white);padding:6px 13px 6px 10px;border-radius:999px;box-shadow:0 2px 0 rgba(28,43,74,.08)}
.chip .c-dot{width:9px;height:9px;border-radius:50%;background:var(--grass-d);flex:none}
.chip:nth-child(3n+2) .c-dot{background:var(--pawn-1)}.chip:nth-child(3n) .c-dot{background:var(--gold)}
.spec-tbl{width:100%;max-width:560px;margin-top:16px;border-collapse:separate;border-spacing:0;background:var(--white);border-radius:20px;overflow:hidden;box-shadow:var(--sh-card);font-size:14px;line-height:1.6}
.spec-tbl caption{caption-side:top;text-align:left;font-size:12px;font-weight:900;color:var(--mute);padding:0 4px 6px}
.spec-tbl th,.spec-tbl td{padding:10px 14px;text-align:left;vertical-align:top;border-top:2px dashed var(--road-edge)}
.spec-tbl tr:first-child th,.spec-tbl tr:first-child td{border-top:0}
.spec-tbl th{width:6.4em;font-weight:900;background:var(--road);white-space:nowrap}
.spec-tbl td{font-weight:700;color:var(--ink-2);word-break:auto-phrase;text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:20px}
.play-btn{display:inline-flex;align-items:center;gap:9px;min-height:54px;font-family:var(--body);font-weight:900;font-size:17px;line-height:1.2;text-decoration:none;background:var(--red);color:var(--red-ink);padding:0 26px 0 28px;border-radius:999px;box-shadow:0 3px 0 rgba(120,24,24,.28);transition:transform .2s}
.play-btn:hover{transform:rotate(-3deg) scale(1.04)}
.play-btn svg{width:17px;height:17px;flex:none}
.sub-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14.5px;font-weight:900;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.sub-link svg{width:15px;height:15px}
.shot{position:relative;width:236px;max-width:64vw;margin:6px auto 0;padding:9px;border-radius:30px;background:var(--white);box-shadow:var(--sh-pop)}
.shot .top{height:14px;display:flex;align-items:center;justify-content:center}
.shot .top span{width:44px;height:5px;border-radius:3px;background:var(--sky-3)}
.shot .screen{border-radius:22px;overflow:hidden;aspect-ratio:390/844;background:var(--ink)}
.shot .screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot .cap{font-size:11px;font-weight:700;color:var(--mute);text-align:center;margin-top:10px;line-height:1.5}
.shot .cap b{color:var(--ink)}
.shot>.koma{position:absolute;left:-30px;bottom:44px;--ks:58px}
@media (min-width:900px){
  .sky-howto .r-hero>.wrap{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
  .shot{width:280px;max-width:none;margin:8px 0 0}
  .shot>.koma{left:-40px;--ks:70px}
}

/* ---------- 遊び方の流れ（すごろくのマス） ---------- */
.flow{position:relative;display:grid;gap:14px;max-width:820px}
.flow::before{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:30px;
  background:repeating-linear-gradient(180deg,transparent 0 40px,var(--road-edge) 40px 43px),linear-gradient(90deg,var(--road-edge) 0 3px,var(--road) 3px calc(100% - 3px),var(--road-edge) calc(100% - 3px))}
.flow .row{position:relative;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start}
.flow .n{position:relative;z-index:1;width:72px;height:60px;display:grid;place-items:center;font-family:var(--display);font-weight:400;font-size:22px;color:var(--ink);background:var(--road);border:4px solid var(--road-edge);border-radius:16px}
.flow .row:first-child .n{background:var(--mark);border-color:var(--gold)}
.flow .row>div:last-child{background:var(--white);border-radius:20px;padding:14px 16px 15px;box-shadow:var(--sh-card)}
.flow h3{font-size:17px;font-weight:900;line-height:1.5}
.flow p{font-size:14.5px;font-weight:700;line-height:1.8;color:var(--ink-2);margin-top:4px}
@media (min-width:900px){.flow{gap:18px}.flow .row{grid-template-columns:84px 1fr;gap:18px}.flow .n{width:84px;height:68px;font-size:26px}.flow::before{left:27px}.flow h3{font-size:19px}.flow p{font-size:15.5px}}

/* きまりのカード（TOP の始め方の3枚と同じ淡い色） */
.cards{display:grid;gap:16px}
.cards .card{background:var(--cc,var(--step-1));border-radius:24px;padding:18px 18px 20px;box-shadow:inset 0 0 0 1.5px rgba(28,43,74,.06)}
.cards .card:nth-child(3n+2){--cc:var(--step-2)}.cards .card:nth-child(3n){--cc:var(--step-3)}
.cards .card h3{font-size:19px;font-weight:900;line-height:1.4;margin-bottom:8px}
.cards .card ul{list-style:none;display:grid;gap:6px}
.cards .card li{position:relative;padding-left:20px;font-size:14.5px;font-weight:700;line-height:1.75;color:var(--ink-2)}
.cards .card li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.cards .card .ic{display:none}
@media (min-width:900px){.cards{grid-template-columns:repeat(2,1fr);gap:22px}.cards .card{padding:24px 26px}}

/* 勝つコツ（番号つきの札） */
.ranks{display:grid;gap:12px}
.ranks .r{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:start;background:var(--white);border-radius:20px;padding:14px 16px;box-shadow:var(--sh-card)}
.ranks .k{grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:var(--display);font-size:16px;display:grid;place-items:center}
.ranks .nm{font-size:16px;font-weight:900;line-height:1.5}
.ranks .ds{font-size:14px;font-weight:700;line-height:1.75;color:var(--ink-2);margin-top:2px}
@media (min-width:900px){.ranks{grid-template-columns:repeat(2,1fr);gap:16px}}

/* ---------- よくある質問 ---------- */
/* 開閉する形（TOP と同じ）。<details class="faq-item"><summary><h3><span class="qm">Q</span>…</h3></summary><p>…</p></details> */
.faq-list,.qa{display:grid;gap:10px;max-width:880px}
.faq-item{background:var(--white);border-radius:18px;box-shadow:var(--sh-card)}
.faq-item summary{list-style:none;cursor:pointer;position:relative;padding:14px 54px 14px 14px;-webkit-tap-highlight-color:transparent}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:13px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--mark);color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item h3,.qa .q h3{font-size:15.5px;font-weight:900;line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.qm{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:var(--display);font-weight:400;font-size:14px;display:grid;place-items:center;line-height:1;margin-top:-1px}
.faq-item p{padding:0 18px 16px 52px;font-size:14.5px;font-weight:700;line-height:1.85;color:var(--ink-2)}
.faq-item p a,.qa .q p a{color:var(--ink);text-underline-offset:3px}
/* 開いたままの形（古い .qa .q をそのまま使うとき） */
.qa .q{background:var(--white);border-radius:18px;padding:15px 16px 16px;box-shadow:var(--sh-card)}
.qa .q p{font-size:14.5px;font-weight:700;line-height:1.85;color:var(--ink-2);margin-top:6px}

/* ---------- ほかのページへ（TOP の「目的で探す」と同じ札） ---------- */
.related{display:grid;gap:12px}
.rel{display:block;position:relative;text-decoration:none;background:var(--fc,var(--step-1));color:var(--ink);border-radius:22px;padding:14px 48px 15px 18px;box-shadow:inset 0 0 0 1.5px rgba(28,43,74,.06);transition:transform .2s}
.rel:nth-child(3n+2){--fc:var(--step-2)}.rel:nth-child(3n){--fc:var(--step-3)}
.rel:hover{transform:translateY(-2px)}
.rel .rk{display:inline-block;font-size:11.5px;font-weight:900;line-height:1.5;background:var(--ink);color:var(--cream);padding:1px 10px;border-radius:999px}
.rel b{display:block;font-size:17px;font-weight:900;line-height:1.45;margin-top:5px}
.sky-howto .rel b{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.01em}
.rel .d{display:block;font-size:13.5px;font-weight:700;line-height:1.7;color:var(--ink-2);margin-top:3px}
.rel::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-5px;border-top:3px solid var(--ink);border-right:3px solid var(--ink);transform:rotate(45deg)}
@media (min-width:900px){.related{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}}

/* ---------- ページの終わり（道の終点と、前後のページへ） ---------- */
.sky-end{background:var(--grass);padding:0 16px 64px;position:relative}
.sky-end .michi{margin-bottom:6px}
.bignav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;max-width:var(--wrap);margin:0 auto}
.bignav a{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-size:15px;font-weight:900;line-height:1.3;text-decoration:none;background:var(--white);color:var(--ink);padding:0 20px;border-radius:999px;box-shadow:var(--sh-card);transition:transform .2s}
.bignav a:hover{transform:translateY(-2px)}
.bignav a svg{width:17px;height:17px;flex:none}
.bignav>span:empty{display:none}
@media (min-width:900px){.sky-end{padding:0 40px 90px}.bignav a{font-size:16px;min-height:52px;padding:0 24px}}

/* ---------- 足もと（TOP の footer と同じ地・駒の行進・ロゴ） ---------- */
.sky-foot{position:relative;background:var(--foot);color:var(--foot-ink);padding:0 16px 40px}
.sky-foot .wv{position:absolute;left:0;right:0;top:-27px;width:100%;height:28px;fill:var(--foot)}
.fparade{height:96px;display:flex;justify-content:center;align-items:flex-end;gap:14px;padding-top:14px;overflow:hidden}
.fparade .koma{--ks:48px}
.sky-foot .f-in{max-width:var(--wrap);margin:0 auto}
.sky-foot .logo{color:var(--foot-ink);font-size:44px;margin-top:18px}
.sky-foot .copy{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.sky-foot .copy span{font-size:11.5px;font-weight:700;color:var(--foot-dim)}
.sky-foot .copy span:last-child{order:-1;font-size:15px;font-weight:900;color:var(--foot-ink);line-height:1.5}
.sky-foot .copy span:only-child{order:0;font-size:11.5px;font-weight:700;color:var(--foot-dim)}
@media (min-width:900px){.sky-foot{padding:0 40px 50px}.fparade{height:120px;gap:26px}.fparade .koma{--ks:66px}.sky-foot .logo{font-size:72px}.sky-foot .copy span:last-child{font-size:17px}}

/* ---------- 読みもの（運営者情報、プライバシー） ---------- */
.prose{max-width:760px;margin:0 auto;background:var(--white);border-radius:26px;padding:22px 18px 26px;box-shadow:var(--sh-card)}
.prose>*+*{margin-top:12px}
.prose h2{font-size:20px;font-weight:900;line-height:1.45;margin-top:28px;padding-left:14px;position:relative}
.prose h2::before{content:"";position:absolute;left:0;top:.28em;width:6px;height:1.1em;border-radius:3px;background:var(--mark)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:15px;font-weight:700;line-height:1.9;color:var(--ink-2)}
.prose b{color:var(--ink)}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:6px}
.prose li{position:relative;padding-left:20px}
.prose li::before{content:"";position:absolute;left:3px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--grass-d)}
.prose a,.inl{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.updlog li{font-size:14px}
@media (min-width:900px){.prose{padding:36px 44px 40px}.prose p,.prose li{font-size:16px}}

/* ---------- 出てくる動き ---------- */
.sky-js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .6s cubic-bezier(.2,.8,.3,1)}
.sky-js .reveal.in{opacity:1;transform:none}

/* =====================================================================
   会員のページ（/premium/ の下）。地は夕暮れの紺、本文は紙の札
   ===================================================================== */
.sky-mem{background:var(--member)}
.sky-mem .sky-strip{height:96px;padding:0}
.sky-mem .sky-strip .ground{position:absolute;left:0;right:0;bottom:0;margin:0;height:96px}
.sky-mem .sky-strip .koma-row{bottom:14px}
.mem-band{background:var(--member);padding:10px 12px 64px;position:relative}
.mem-band .stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mem-band .stars i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.55}
.pg,.gp{position:relative;max-width:680px;margin:0 auto;background:var(--cream);color:var(--ink);border-radius:28px;padding:24px 18px 28px;box-shadow:var(--sh-dusk)}
.pg h1,.gp h1{font-family:var(--body);font-weight:900;font-size:25px;line-height:1.4;letter-spacing:.01em;margin-bottom:8px}
.pg h2,.gp h2{font-size:17px;font-weight:900;margin:24px 0 8px}
.pg .intro{font-size:15px;font-weight:700;line-height:1.8;color:var(--ink-2);margin-bottom:14px}
.cap{font-size:13px;font-weight:700;line-height:1.7;color:var(--mute);margin:8px 2px 0}
.pg .steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.pg .steps li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:900;line-height:1.3;background:var(--white);color:var(--mute);padding:5px 12px 5px 6px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(28,43,74,.08)}
.pg .steps li b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:400;font-size:12px;background:var(--paper);color:var(--ink)}
.pg .steps li small{font-size:11px;font-weight:700;margin-left:2px}
.pg .steps li.on{background:var(--ink);color:var(--cream);box-shadow:none}
.pg .steps li.on b{background:var(--gold);color:var(--ink)}
.dbl{border-top:2px dashed var(--road-edge);margin:18px -18px 0}
.terms{display:grid;grid-template-columns:6.8em 1fr;font-size:14.5px;line-height:1.75}
.terms dt,.terms dd{padding:12px 0;border-bottom:2px dashed var(--road-edge)}
.terms dt{font-weight:900;padding-right:10px}
.terms dd{font-weight:700;color:var(--ink-2)}
.terms dd b{color:var(--ink)}
.terms .money{display:inline;font-size:21px;font-weight:900;color:var(--ink);line-height:1.4;background:linear-gradient(transparent 58%,var(--mark) 58% 92%,transparent 92%)}
.terms .sub{display:block;font-size:12.5px;color:var(--mute)}
.pg .go,.go-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:58px;margin-top:22px;border-radius:999px;background:var(--gold);color:var(--ink);font-family:var(--body);font-weight:900;font-size:17px;line-height:1.3;text-decoration:none;text-align:center;padding:0 22px;box-shadow:0 3px 0 var(--join-shadow);transition:transform .2s}
.pg .go:hover{transform:scale(1.02)}
.pg .go svg{width:17px;height:17px;flex:none}
.pg .after{font-size:13.5px;font-weight:700;line-height:1.75;color:var(--mute);margin-top:12px}
.pg .back{display:flex;justify-content:center;margin-top:8px}
.pg .who{font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:14px}
.pg .renew{font-size:14px;font-weight:700;margin-top:14px;color:var(--ink-2)}
.cnl,.why,.msg{font-size:14px;font-weight:700;line-height:1.75;border-radius:16px;padding:11px 14px;margin:12px 0}
.cnl{background:var(--step-1)}
.why{background:var(--step-2)}
.msg{background:#FBE3E3;color:#7A1F1F}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:900;color:inherit;text-decoration:none}
.textlink span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.legal{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:20px;padding-top:6px;border-top:2px dashed var(--road-edge)}
.legal .textlink{font-size:12.5px;color:var(--mute);min-height:40px}
.pushbtn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;font-family:var(--body);font-weight:900;font-size:15.5px;line-height:1.3;text-decoration:none;background:var(--white);color:var(--ink);padding:0 20px;border-radius:999px;box-shadow:var(--sh-card);transition:transform .2s}
.pushbtn:hover{transform:translateY(-2px)}
.pushbtn svg{width:16px;height:16px;flex:none}
.pushbtn.wrap{white-space:normal;text-align:left;padding:10px 20px}
.pushbtn.tix{background:var(--gold);box-shadow:0 3px 0 var(--join-shadow)}
.pushbtn.tix i{display:none}
.row2{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.row2 .pushbtn{width:100%}
@media (min-width:600px){.row2{grid-template-columns:1fr 1fr}}
.acts{display:grid;gap:12px;margin-top:18px}
.acts .pushbtn{width:100%}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;background:var(--white);color:var(--ink);font-weight:900;font-size:16px;text-decoration:none;box-shadow:var(--sh-card),inset 0 0 0 1.5px rgba(28,43,74,.1)}
.gbtn svg{width:20px;height:20px}
.or{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mute);margin:16px 0}
.or::before,.or::after{content:"";flex:1;border-top:2px dashed var(--road-edge)}
.fld-label{display:block;font-size:14px;font-weight:900;margin-bottom:6px}
.fld{display:block;width:100%;min-height:52px;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:2px solid var(--road-edge);border-radius:16px;padding:0 16px}
.fld:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,194,61,.35)}
.draft-list{padding-left:1.4em;display:grid;gap:8px;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
@media (min-width:900px){.sky-mem .sky-strip,.sky-mem .sky-strip .ground{height:124px}.mem-band{padding:20px 40px 96px}.pg,.gp{padding:36px 40px 40px}.pg h1,.gp h1{font-size:30px}.dbl{margin:20px -40px 0}}

/* 会員の券（pass）。夕暮れの紺に金の半券 */
.ss{display:flex;margin-top:22px;border-radius:20px;overflow:hidden;background:var(--member);color:var(--cream);box-shadow:var(--sh-dusk)}
.ss-main{flex:1;min-width:0;padding:14px 14px 16px}
.ss-kind{display:flex;align-items:baseline;gap:8px}
.riso{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.02em;color:var(--gold)}
.ss-kind b{font-size:15px;font-weight:900}
.ss-games{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.ss-games div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ss-games img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:10px}
.ss .nm{font-family:var(--display);font-weight:400;font-size:15px;line-height:1.1}
.ss .nm.foil{color:var(--gold)}
.ss .nm.plain{color:var(--cream)}
.ss-stub{flex:none;width:86px;display:grid;place-items:center;background:var(--gold);color:var(--ink);border-left:3px dotted var(--member);padding:10px 6px}
.ss-fare{display:flex;flex-direction:column;align-items:center;font-size:12px;font-weight:900;line-height:1.25;text-align:center}
.ss-fare b{font-family:var(--display);font-weight:400;font-size:24px}
.dater{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;border:2.5px solid var(--ink);color:var(--ink);transform:rotate(-8deg)}
.dater b{font-family:var(--display);font-weight:400;font-size:14px;line-height:1.1}
.dater u{text-decoration:none;font-size:11px;font-weight:900}
.got{position:relative}
.got .env{display:flex;justify-content:space-between;align-items:center;margin-top:-6px;background:var(--paper);border-radius:0 0 18px 18px;padding:12px 14px 10px}
.got .env small{font-size:12px;font-weight:700;color:var(--mute)}
.done-h{font-size:26px}

/* 会員専用のゲームの紹介（/premium/banzuke/ など）。TOP の会員の札と同じ */
.ev{display:grid;gap:12px;background:var(--cream);color:var(--ink);border-radius:24px;padding:14px;text-decoration:none}
.gp .ev{padding:0;background:none}
.ev-pic img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:16px}
.ev-kind{display:none}
.ev h3{font-family:var(--display);font-weight:400;font-size:clamp(34px,10vw,52px);line-height:1.05;color:var(--ink)}
.ev h3.foil{color:var(--ink)}
.ev-who{display:inline-block;font-size:12.5px;font-weight:900;background:var(--paper);padding:2px 10px;border-radius:999px;margin-top:6px}
.ev-d{font-size:15px;font-weight:700;line-height:1.8;color:var(--ink-2);margin-top:8px}
.ev-stub{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--member);color:var(--cream);border-radius:16px;padding:10px 14px}
.ev-stub .vt{display:flex;align-items:baseline;gap:8px;font-size:13px}
.ev-stub .vt b{background:var(--gold);color:var(--ink);padding:1px 10px;border-radius:999px;font-size:12.5px}
.ev-stub .st-h{display:flex;align-items:center;gap:10px}
.ev-stub .seat{display:none}
.gp-fare,.gp-guest,.other{font-size:14.5px;font-weight:700;line-height:1.85;color:var(--ink-2);margin-top:14px}
.gp ol.how,.hw-card ol.how{list-style:none;display:grid;gap:14px;margin-top:8px}
.gp ol.how li,.hw-card ol.how li{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start;background:var(--white);border-radius:20px;padding:10px;box-shadow:var(--sh-card)}
.gp ol.how .ph img,.hw-card ol.how .ph img{width:100%;border-radius:12px}
.gp ol.how .n,.hw-card ol.how .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:var(--display);font-size:13px}
.gp ol.how p,.hw-card ol.how p{font-size:14.5px;font-weight:700;line-height:1.75;margin-top:4px}
.gp ol.how small,.hw-card ol.how small{font-size:12px;color:var(--mute)}
.gp .ln{display:none}
.join{margin-top:22px;border-radius:24px;overflow:hidden;background:var(--member);color:var(--cream)}
.join-band{padding:16px 18px 6px;font-size:16px;line-height:1.6}
.join-band .mk{display:none}
.join .in{padding:6px 18px 20px}
.join .in p{font-size:14px;font-weight:700;line-height:1.8;color:#D9E0EE;margin-top:6px}
.join .pushbtn{width:100%;margin-top:14px}
.join .backs{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:6px}
.join .cap{color:#C9D3E6}

/* ---------- 動きを減らす設定では、すべて止める ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sky-js .reveal{opacity:1;transform:none}
}

/* =====================================================================
   目的別のページの卓のカード「道の札の顔」（2026-10 追加。purpose-added.md）
   TOP の道の札と同じ顔：駒の立つ小さな舞台、ゲームの名前（Dela Gothic One）、
   紺の札（人数と種類）、ひとこと、「遊ぶ」と「遊び方」。
   <div class="gcard tface">
     <div class="hd"><div class="stage" aria-hidden="true"><i class="koma" data-koma="…"></i></div>
       <div class="nm"><h3>…</h3><div class="no">…</div><div class="genre">…</div></div></div>
     <div class="body"><p>…</p><p class="fit">…</p><div class="act">…</div></div>
   </div>
   会員専用の卓は .mem（舞台が夕暮れの紺、札と「遊ぶ」が金）。今ある .gcard の見た目は変えない。
   ===================================================================== */
.gcard.tface{padding:14px 14px 16px;border-radius:26px}
.tface .hd{display:flex;align-items:center;gap:14px}
.tface .stage{position:relative;flex:none;width:96px;height:96px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-3) 78%)}
.tface .stage::before{content:"";position:absolute;right:-10px;top:12px;width:44px;height:13px;border-radius:999px;background:#fff;opacity:.9;box-shadow:-16px 12px 0 -3px rgba(255,255,255,.75)}
.tface .stage::after{content:"";position:absolute;left:-18%;right:-18%;bottom:-30px;height:54px;border-radius:50%;background:var(--grass);box-shadow:0 -7px 0 var(--grass-far)}
.gcard.tface .stage .koma{position:absolute;left:50%;right:auto;top:auto;bottom:9px;z-index:1;--ks:56px;transform:translateX(-50%)}
.gcard.tface:hover .stage .koma svg{animation:hp .5s cubic-bezier(.3,1.6,.5,1)}
.tface .nm{min-width:0;flex:1;container-type:inline-size}
/* 名前はいちばん長い MARUTSUKE でも1行に入るよう、欄の幅に合わせて小さくする（8.8字分の幅） */
.gcard.tface h3{font-size:24px;font-size:clamp(17px,11.3cqi,26px);line-height:1.08;margin-top:0;overflow-wrap:anywhere}
.gcard.tface .no{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:900;line-height:1.5;color:var(--grass);background:var(--ink);padding:1px 10px;border-radius:999px}
.gcard.tface .no::before{display:none}
.gcard.tface .genre{font-size:14.5px;font-weight:900;line-height:1.5;margin-top:5px;color:var(--ink)}
.gcard.tface .body{padding:12px 4px 0}
.gcard.tface .body>p:first-child,.gcard.tface .body>.fit:first-child{margin-top:0}
.gcard.tface p{font-size:14.5px}
.gcard.tface .fit{font-size:13px;margin-top:10px}
.gcard.tface .fit a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.gcard.tface .act{padding-top:12px}
/* 会員専用の卓（TOP の会員の札と同じ金） */
.tface.mem .stage{background:linear-gradient(180deg,var(--dusk) 0%,var(--member) 80%)}
.tface.mem .stage::before{right:auto;left:14px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.8;box-shadow:58px 8px 0 0 var(--gold),30px -4px 0 -1px rgba(255,194,61,.6)}
.tface.mem .stage::after{background:#3A5486;box-shadow:0 -7px 0 #31497A}
.gcard.tface.mem .no{background:var(--gold);color:var(--ink)}
.gcard.tface.mem .play{background:var(--gold);color:var(--ink)}
.gcard.tface.mem .play:hover{background:var(--ink);color:var(--cream)}
@media (min-width:900px){
  .tface .stage{width:104px;height:104px}
  .gcard.tface .stage .koma{--ks:60px}
}

/* ---------- 遊び方のページの卓の色と駒（2026-10 遊び方の担当が足した。ほかの部品の見た目は変えない） ---------- */
/* 卓の色は TOP の道の駒と同じ色。<body class="sky sky-howto" data-game="tsunagi"> で決まる。差し色にだけ使い、字の色には使わない */
.sky-howto{--tc:var(--mark);--ink-soft:var(--mute)}
.sky-howto[data-game=soroe]{--tc:#3EE07A}.sky-howto[data-game=wall]{--tc:#35D7FF}.sky-howto[data-game=awase]{--tc:#FF9E7A}.sky-howto[data-game=kaburi]{--tc:#FFC233}
.sky-howto[data-game=sokkuri]{--tc:#8FD8FF}.sky-howto[data-game=palette]{--tc:#FF7A9A}.sky-howto[data-game=manin]{--tc:#B8C0D4}.sky-howto[data-game=mannaka]{--tc:#FFE36E}
.sky-howto[data-game=seiza]{--tc:#2B3A8C}.sky-howto[data-game=michiake]{--tc:#FF4A4A}.sky-howto[data-game=zurashi]{--tc:#D7FF3D}.sky-howto[data-game=kumu]{--tc:#E8473C}
.sky-howto[data-game=marutsuke]{--tc:#3C8C66}.sky-howto[data-game=tsunagi]{--tc:#A58CFF}.sky-howto[data-game=usotsuki]{--tc:#FFF07A}.sky-howto[data-game=banzuke]{--tc:#FFD23F}.sky-howto[data-game=marutsuke2]{--tc:#CFE6F3}.sky-howto[data-game=docchi]{--tc:#FF8A3D}
/* ヘッダー：読み上げの順は「戻る」→ロゴのまま、見た目はロゴを左に */
.sky-howto .bar .logo{order:-1}
/* 卓の札の点、ゲームの名前の下の線、区画の札の点 */
.sky-howto .eyebrow .dot{background:var(--tc);box-shadow:0 0 0 2px var(--cream)}
.sky-howto .r-hero h1::after{content:"";display:block;width:58px;height:8px;border-radius:4px;background:var(--tc);box-shadow:inset 0 0 0 1.5px rgba(28,43,74,.1);margin:8px 0 2px}
.sky-howto .sec-tag{display:inline-flex;align-items:center;gap:6px}
.sky-howto .sec-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 1.5px var(--cream);flex:none}
/* 画面写真の枠のまわりに卓の色の輪 */
.sky-howto .shot{box-shadow:var(--sh-pop),0 0 0 9px color-mix(in srgb,var(--tc) 55%,#fff)}
.sky-howto .shot .top span{background:var(--tc)}
/* 早見表の右上からのぞく卓の駒（スマホだけ。PC は画面写真のふちの駒が見える） */
.sky-howto .r-hero>.wrap>div:first-child{position:relative}
.koma.hk{position:absolute;right:6px;--ks:58px;margin-top:-16px;z-index:2}
@media (min-width:900px){.koma.hk{display:none}}
/* 次に遊ぶなら：札の右上に行き先の卓の駒 */
.sky-howto .related{gap:22px 16px}
.sky-howto .rel .koma{position:absolute;right:12px;top:-18px;--ks:40px}
/* 目的別のページと読みものの区画の見出しは、行の長さをそろえて折り返す（「寝る／前の10分に」のような切れ方を防ぐ） */
.sky-list .sec-head{text-wrap:balance}
.sky-list .r-hero .subtitle,.sky-list .flow h3{text-wrap:balance}

/* ---------- 会員のページで足したもの（2026-10 会員のページの担当が足した。premium-added.md。ほかの部品の見た目は変えない） ---------- */
/* hidden の付いたもの（premium.js が出し分ける「さっきの部屋にもどる」など）は、.pg .back{display:flex} などより先に隠す */
.sky-mem [hidden]{display:none!important}
/* 紹介のページの「会員になる」の紺の札は <section>。区画の上下の余白を付けない */
.sky-mem .join{padding:0}
/* マイページの「利用状況」の表の上の区切り（前の二重線を、砂色の点線に） */
.sky-mem .terms.top-dash{margin-top:16px;border-top:2px dashed var(--road-edge)}
/* 表のすぐ下の規約のリンクは、区切りの点線を重ねない */
.sky-mem .terms+.legal{border-top:0}
/* 紹介のページの大きな札：ゲームの名前の上の「PLAYROOM」を小さな札で出す。「会員専用」の紺の札は字の幅だけ */
.sky-mem .ev.big .ev-kind{display:block}
.sky-mem .ev.big .ev-kind .riso{font-size:12px;color:var(--mute)}
.sky-mem .ev.big .ev-stub{justify-self:start}
/* 紹介のページの遊び方：PC は3つを横に並べ、番号と文を上、画面写真を下に */
@media (min-width:900px){
  .sky-mem .gp ol.how,.hw-card ol.how{grid-template-columns:repeat(3,1fr)}
  .sky-mem .gp ol.how li,.hw-card ol.how li{grid-template-columns:1fr;align-content:start;padding:14px}
  .sky-mem .gp ol.how .ph,.hw-card ol.how .ph{order:2}
  .sky-mem .gp ol.how .ph img,.hw-card ol.how .ph img{display:block;max-width:180px;margin:4px auto 0}
}
.sky-howto .band-paper .sec-tag::before{box-shadow:0 0 0 1.5px var(--ink)}

/* 韓国語：上で font-family:var(--body) を決めている太い所も Jua にする（同じ詳細度で後ろに置く。.sky-howto .r-hero h1 などゲームの名前の字は変えない） */
:where(:root:lang(ko)) .bar .back,:where(:root:lang(ko)) .bar .bk,:where(:root:lang(ko)) .bar-pill,:where(:root:lang(ko)) .r-hero h1,:where(:root:lang(ko)) .sec-head,:where(:root:lang(ko)) .play,:where(:root:lang(ko)) .gcard .play,:where(:root:lang(ko)) .play-btn,:where(:root:lang(ko)) .pg h1,:where(:root:lang(ko)) .gp h1,:where(:root:lang(ko)) .pg .go,:where(:root:lang(ko)) .go-btn,:where(:root:lang(ko)) .pushbtn{font-family:var(--ko-strong)}

/* ---------- 2026-10-06 本番前の直し（v13-preflight/fix.md） ---------- */
/* 目的別のページ：ゲームの一覧の前は見出しと短い1〜2文だけ。長い説明は一覧のあとの「このページのゲームについて」へ移した */
.lede-short{font-size:16px;font-weight:700;line-height:1.7;color:var(--ink-2);margin-top:12px;max-width:34em}
@media (min-width:900px){.lede-short{font-size:17px}}
.about-list .lede-blk:first-of-type{margin-top:4px}
/* カードの左の四角は、実際のゲームの画面（/assets/shot/<id>.webp、240×320 を 96×128 で出す）。駒は右下に小さく残す飾り */
.tface .stage.shot{width:96px;height:128px;border-radius:16px;overflow:visible;background:var(--ink);box-shadow:0 0 0 2px var(--white),0 3px 10px rgba(28,43,74,.18)}
.tface .stage.shot::before,.tface .stage.shot::after{display:none}
.tface .stage.shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.gcard.tface .stage.shot .koma{left:auto;right:-12px;bottom:-10px;--ks:38px;transform:none}
.tface.mem .stage.shot{background:var(--dusk)}
@media (min-width:700px){.tface .stage.shot{width:108px;height:144px}}
/* 会員専用のゲームの前の小見出しと料金の1文（料金はここで1回だけ書く） */
.glist .mem-head{grid-column:1/-1;position:relative;z-index:1;background:var(--dusk);color:var(--cream);border-radius:22px;padding:14px 18px 15px;box-shadow:var(--sh-dusk)}
.glist .mem-head h3{font-size:17px;font-weight:900;line-height:1.4;color:var(--gold)}
.glist .mem-head p{font-size:14px;font-weight:700;line-height:1.75;margin-top:4px;color:#E4E9F3}
/* 幅320の端末で、上の帯と足もとのロゴが右にはみ出していた（7px） */
@media (max-width:359px){.bar{padding:0 6px 0 8px}.logo{font-size:18px}.bar .back,.bar .bk{font-size:12px;padding:0 9px 0 7px}}
.sky-foot .logo{font-size:min(44px,11.5vw)}
@media (min-width:900px){.sky-foot .logo{font-size:72px}}
/* 「遊ぶ」と「遊び方」は、ゲームの名前と画面の横に置く（説明文はその下） */
.tface .stage.shot+.nm{align-self:center}
.gcard.tface .nm .act{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:0;padding-top:8px}
.gcard.tface .nm .play{min-height:42px;font-size:15px;padding:0 16px 0 18px}
.gcard.tface .nm .guide{min-height:42px}
/* 遊び方の「次に遊ぶなら」：札の左に実際のゲームの画面（240×320 を 66×88 で出す）。並びは人気順（scripts/i18n/sky-howto.mjs の relSort） */
.rel.sh{padding-left:96px;min-height:116px}
.rel .rs{position:absolute;left:14px;top:14px;width:66px;height:88px;border-radius:10px;overflow:hidden;background:var(--ink);box-shadow:0 0 0 2px var(--white)}
.rel .rs img{display:block;width:100%;height:100%;object-fit:cover}
/* 会員の紹介のページの大きな札：「会員専用」は押せる箱に見えないよう、紺の箱を外して金の小札だけにする（2026-10-06 ux の指摘） */
.sky-mem .ev.big .ev-stub{background:none;padding:0;border-radius:0}
.sky-mem .ev.big .ev-stub .vt b{font-size:12px}
@media (max-width:359px){.rel.sh{padding-left:82px;padding-right:34px}.rel .rs{left:12px;width:58px;height:77px}.sky-howto .rel b{font-size:18px}.rel::after{right:14px}}
/* 流れの行：説明の列が中の字の幅で広がって、幅320の画面から右へはみ出していた（Safari の言葉のまとまりの包み .wp が最小の幅を決めていた） */
.flow .row{grid-template-columns:72px minmax(0,1fr)}
@media (min-width:900px){.flow .row{grid-template-columns:84px minmax(0,1fr)}}

/* =====================================================================
   遊び方のページの新しい形（2026-10-07 v15。<body class="sky sky-howto hw">。scripts/i18n/sky-howto.mjs の toStepsHowto）
   お手本は会員の紹介のページ（/premium/usotsuki/）。紙の札の中に、駒の絵・名前・人数と長さ・ひとこと・遊ぶボタン・3ステップ・早見表。
   3ステップの部品（ol.how）は会員の紹介のページと同じ。地は空（会員の紹介のページは夕暮れの紺）
   ===================================================================== */
.hw .hw-hero{padding-top:14px}
.hw .r-hero>.wrap{display:block}
.hw-card{position:relative;z-index:2;max-width:680px;margin:0 auto;background:var(--cream);color:var(--ink);border-radius:28px;padding:14px 16px 24px;box-shadow:var(--sh-pop)}
.hw-card .lang-row{margin:2px 0 10px}
/* 駒の絵：空と丘、卓の色のお日さま、まん中に卓の駒、右に人の駒 */
.hw-pic{position:relative;aspect-ratio:2/1;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 55%,var(--sky-3) 100%);margin-bottom:16px}
.hw-pic .sun{position:absolute;left:50%;top:44%;width:44%;aspect-ratio:1;border-radius:50%;background:var(--tc);transform:translate(-50%,-50%);box-shadow:0 0 0 12px color-mix(in srgb,var(--tc) 30%,transparent),inset 0 0 0 2px rgba(28,43,74,.06)}
.hw-pic .cl.c1{--w:84px;top:12%;right:-18px}.hw-pic .cl.c2{--w:64px;top:22%;left:-20px;display:block}
.hw-pic .hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:32%}
.hw-pic .far{fill:var(--grass-far)}.hw-pic .near{fill:var(--grass)}
.hw-pic .koma.main{position:absolute;left:50%;bottom:9%;--ks:clamp(92px,27vw,132px);margin-left:calc(var(--ks) / -2)}
.hw-pic .koma-row{position:absolute;right:5%;left:auto;bottom:7%;gap:4px;--ks:clamp(30px,9vw,46px)}
.hw-card .eyebrow{margin-top:2px}
.hw-card h1,.sky-howto .hw-card h1{font-size:clamp(34px,10vw,56px);margin-top:12px}
.hw-card .meta{margin-top:12px}
.hw-card .chip.hw-mem{background:var(--gold);padding-left:13px}
.hw-card .subtitle{margin-top:14px}
.hw-card .cta-row{margin-top:18px}
.hw-card .hw-h{font-size:17px;font-weight:900;line-height:1.5;margin:26px 0 8px}
.hw-card ol.how .ph img{height:auto}
.hw-spec{margin-top:24px}
.hw-card .spec-tbl{max-width:none;margin-top:0}
.hw-card .spec-tbl caption{font-size:17px;color:var(--ink);padding:0 0 8px}
.hw-hero .ground{margin-top:-6px}
/* くわしいルール（今の長い文。開け閉めする札） */
.hw .hw-more{padding-top:34px}
.hw .hw-more>.wrap,.hw .band-paper>.wrap{max-width:680px}
details.more{background:var(--cream);border-radius:22px;box-shadow:var(--sh-card)}
details.more+details.more{margin-top:10px}
details.more>summary{list-style:none;cursor:pointer;position:relative;padding:11px 58px 12px 16px;-webkit-tap-highlight-color:transparent}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";position:absolute;right:14px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--mark);color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:21px;line-height:1}
details.more[open]>summary::after{content:"−"}
details.more>summary .sec-tag{display:inline-flex;margin-bottom:2px;font-size:10.5px;padding:1px 9px;color:var(--grass)}
details.more>summary .sec-head{font-size:19px;line-height:1.4;margin:0}
.more-in{padding:2px 14px 20px;display:grid;gap:18px}
.more-in>*{min-width:0}
.hw-lede{display:grid;gap:22px}
.hw-lede .r-lede{margin-top:0}
.hw-lede .shot{margin:6px auto 0}
.more-in .lede-blk:first-child{margin-top:0}
@media (min-width:900px){
  .hw .hw-hero{padding-top:30px}
  .hw-card{padding:28px 36px 36px}
  .hw-pic{aspect-ratio:2.4/1}
  .hw-pic .koma.main{--ks:136px}
  .hw-pic .koma-row{--ks:52px;gap:8px}
  .hw-pic .cl.c1{--w:130px}
  details.more>summary{padding:18px 64px 18px 24px}
  details.more>summary .sec-head{font-size:24px}
  .more-in{padding:4px 24px 28px}
  .hw-lede{grid-template-columns:minmax(0,1fr) 250px;align-items:start}
  .hw-lede .shot{width:250px;margin:0}
}
/* くわしいルールの中の流れは、札の中で幅がせまいので、番号のマスを小さくする（スマホ） */
@media (max-width:899px){.more-in .flow .row{grid-template-columns:54px minmax(0,1fr);gap:10px}.more-in .flow .n{width:54px;height:48px;font-size:18px;border-width:3px}.more-in .flow::before{left:12px}}