/* 遊べる層（診断・サンプル絞り込み）の盤面。ma.cpaai.jp（ikura.html／_shared.css）の設計をそのまま写す。
   2026-09-14 施主指示「MAサイトと同じ見た目に」。誠実層（site.css）とは別系統。 */
.play{
  --ink:#eef1f4;--ink-soft:#a7b0ba;--ink-faint:#6b7681;
  --board:#0f1318;--panel:#161c23;--panel-2:#1c242d;
  --amber:#ffb020;--amber-deep:#d98f0a;--cyan:#4fd1ff;--green:#3dd68c;--red:#ff5d5d;
  --line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.18);
  --paper:#f6f2e8;--paper-ink:#171a1e;--paper-soft:#5e5a52;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --num:"Chakra Petch","DM Mono",ui-monospace,monospace;
  --r:4px;
  font-family:var(--sans);color:var(--ink);background:var(--board);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:32px 32px;line-height:1.75;font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.play{margin:0}
.play:not(body) .wrap{max-width:760px;margin:0 auto;padding:0 20px}
.play:not(body) .wrap--wide{max-width:1040px}
.play:not(body) a{color:var(--cyan)}
/* 進み具合（升） */
.play:not(body) .board{position:sticky;top:0;z-index:20;background:rgba(15,19,24,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.play:not(body) .board .wrap{display:flex;align-items:stretch;gap:6px;padding:10px 20px}
.play:not(body) .masu{flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);font-size:12px;color:var(--ink-soft);min-width:0;text-decoration:none}
.play:not(body) .masu b{font-size:11px;color:var(--ink-faint);font-weight:600;font-family:var(--num)}
.play:not(body) .masu b::before{content:"STAGE ";font-size:9px;letter-spacing:.15em}
.play:not(body) .masu.goal b::before{content:""}
.play:not(body) .masu span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--sans);font-weight:700}
.play:not(body) .masu.goal{border-style:dashed}
.play:not(body) .masu.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset,0 0 18px rgba(255,176,32,.25);color:var(--ink)}
.play:not(body) .masu.active b{color:var(--amber)}
.play:not(body) .masu.done b{color:var(--amber)}
@media (max-width:600px){.play:not(body) .masu{padding:8px 8px;gap:6px}.play:not(body) .masu b::before{content:""}.play:not(body) .masu span{display:none}.play:not(body) .masu.active span{display:inline}}
/* 見出し・眉 */
.play:not(body) .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);font-family:var(--num);font-weight:600}
.play:not(body) .hero{padding:44px 0 26px}
.play:not(body) .hero h1{font-family:var(--sans);font-size:clamp(30px,5.2vw,46px);font-weight:900;line-height:1.3;letter-spacing:.02em;margin:10px 0 0}
.play:not(body) .hero h1 em{font-style:normal;color:var(--amber)}
.play:not(body) .hero .lead{margin:16px 0 0;color:var(--ink-soft);max-width:36em}
.play:not(body) .promise{display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-soft)}
.play:not(body) .promise li{border:1px solid var(--line-strong);border-radius:999px;padding:4px 12px;background:var(--panel)}
.play:not(body) .promise li::before{content:"■ ";color:var(--green);font-size:9px;vertical-align:2px}
/* 部屋 */
.play:not(body) .room{padding:34px 0 10px}
.play:not(body) .room-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.play:not(body) .room-head .num{font-family:var(--num);font-size:13px;font-weight:700;color:var(--board);background:var(--amber);padding:6px 10px;border-radius:var(--r);letter-spacing:.12em;line-height:1;white-space:nowrap}
.play:not(body) .room-head .num::before{content:"STAGE "}
.play:not(body) .room-head h2{font-size:clamp(22px,4.6vw,30px);font-weight:900;font-family:var(--sans);line-height:1.35}
.play:not(body) .room-lead{margin:6px 0 22px;color:var(--ink-soft);max-width:36em}
.play:not(body) .note{font-size:13px;color:var(--ink-soft);line-height:1.75}
/* 問い（値づけの field と同じ型） */
.play:not(body) .q{padding:18px 18px 16px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r)}
.play:not(body) .q-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--num);font-size:12px;letter-spacing:.12em;color:var(--ink-soft)}
.play:not(body) .q-top b{color:var(--amber);font-weight:700}
.play:not(body) .bar{height:10px;background:var(--board);border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;margin:12px 0 18px;padding:2px}
.play:not(body) .bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 10px,transparent 10px 13px);width:0;transition:width .4s}
.play:not(body) .q-k{font-size:12px;color:var(--ink-faint);letter-spacing:.1em;margin-bottom:8px}
.play:not(body) .q-t{font-family:var(--mincho);font-size:clamp(20px,3.4vw,26px);line-height:1.6;font-weight:500;min-height:3.2em}
.play:not(body) .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.play:not(body) .chip{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel-2);cursor:pointer;user-select:none;text-align:left;font:inherit;font-size:14px;font-weight:700;color:var(--ink)}
.play:not(body) .chip:hover{border-color:var(--amber)}
.play:not(body) .chip[aria-pressed="true"]{border-color:var(--amber);background:var(--panel-2);box-shadow:0 0 0 1px var(--amber) inset}
.play:not(body) .hanko{flex:none;width:36px;height:36px;border:1px solid var(--line-strong);border-radius:3px;font-family:var(--num);font-weight:700;font-size:12px;line-height:34px;text-align:center;color:var(--ink-faint);letter-spacing:.08em;background:var(--board)}
.play:not(body) .chip[aria-pressed="true"] .hanko{background:var(--amber);color:var(--board);border-color:var(--amber)}
.play:not(body) .q-note{margin-top:12px;font-size:13px;color:var(--ink-soft);min-height:1.75em}
.play:not(body) .q-nav{display:flex;justify-content:space-between;margin-top:8px}
.play:not(body) .q-nav button{font:inherit;font-size:12.5px;background:none;border:0;color:var(--cyan);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.play:not(body) .q-nav button:disabled{color:var(--ink-faint);text-decoration:none;cursor:default}
/* 小盤面（数字が動く） */
.play:not(body) .counter{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.play:not(body) .counter .c{padding:12px 14px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r)}
.play:not(body) .counter .c.hu{border-color:rgba(255,176,32,.5)}
.play:not(body) .counter .lb{font-size:11.5px;color:var(--ink-soft)}
.play:not(body) .counter .v{font-family:var(--num);font-size:34px;font-weight:700;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.play:not(body) .counter .c.hu .v{color:var(--amber)}
.play:not(body) .counter .v small{font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin-left:4px}
.play:not(body) .mini{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;font-size:11.5px}
.play:not(body) .mini span{border:1px solid var(--line-strong);border-radius:999px;padding:1px 9px;color:var(--ink-soft)}
.play:not(body) .unk{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.play:not(body) .unk span{display:inline-block;border:1px dashed var(--line-strong);border-radius:999px;padding:1px 9px;margin:4px 6px 0 0}
/* 値札（紙） */
.play:not(body) .tag{margin:6px 0 0;padding:24px 24px 20px;background:var(--paper);color:var(--paper-ink);border-radius:var(--r);position:relative;box-shadow:6px 6px 0 var(--amber)}
.play:not(body) .tag .eyebrow{margin-bottom:8px;color:var(--paper-soft)}
.play:not(body) .price{font-family:var(--num);font-size:clamp(30px,7vw,48px);font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--paper-ink);font-variant-numeric:tabular-nums}
.play:not(body) .price small{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0;margin:0 14px 0 4px}
.play:not(body) .methods{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:16px 0 0;padding:14px 0 0;border-top:1px dashed rgba(23,26,30,.3)}
.play:not(body) .method h4{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--paper-ink);letter-spacing:.06em}
.play:not(body) .method ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.play:not(body) .method li{border:1px solid rgba(23,26,30,.3);border-radius:999px;padding:3px 11px;font-size:13px}
.play:not(body) .method.hu li{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}
.play:not(body) .tag .note{color:var(--paper-soft)}
.play:not(body) .tag .note a{color:var(--paper-ink)}
/* ボタン */
.play:not(body) .btn{display:inline-block;padding:14px 22px;border-radius:var(--r);font:700 15px var(--sans);cursor:pointer;border:1px solid transparent;text-decoration:none;letter-spacing:.02em;transition:transform .08s;color:var(--ink)}
.play:not(body) .btn.primary{background:var(--amber);color:var(--board);box-shadow:0 4px 0 var(--amber-deep)}
.play:not(body) .btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--amber-deep)}
.play:not(body) .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.play:not(body) .btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.play:not(body) .btn.ink{background:var(--ink);color:var(--board);box-shadow:0 4px 0 #8a939c}
.play:not(body) .btn.ink:active{transform:translateY(3px);box-shadow:0 1px 0 #8a939c}
.play:not(body) .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.play:not(body) .actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;align-items:center}
.play:not(body) .next{margin:22px 0 0}
.play:not(body) .copied{font-size:12.5px;color:var(--green)}
/* GOAL */
.play:not(body) .goal{padding:26px 0 70px}
.play:not(body) .card{padding:24px;background:var(--panel-2);color:var(--ink);border:1px solid var(--amber);border-radius:var(--r);box-shadow:0 0 0 1px var(--amber) inset,0 0 40px rgba(255,176,32,.12)}
.play:not(body) .card h2{font-size:24px;color:var(--ink);font-weight:900;margin:8px 0 10px}
.play:not(body) .card p{color:var(--ink-soft)}
.play:not(body) .card .small{font-size:12.5px}
.play:not(body) .hidden{display:none!important}
@media (max-width:600px){.play:not(body) .chips{grid-template-columns:1fr}.play:not(body) .counter{grid-template-columns:1fr 1fr}.play:not(body) .methods{grid-template-columns:1fr}}
@media print{.play{background:#fff;color:#000}.play:not(body) .board,.play:not(body) .hero,.play:not(body) .room--q,.play:not(body) .goal,.site-hd,.m-nav,.dock,footer{display:none!important}.play:not(body) .tag{box-shadow:none;border:1px solid #000}}
/* 共通chrome（ヘッダー・常設3ボタン）を盤面に合わせて暗くする（遊べる層のページだけ） */
html:has(body.play){overflow-x:hidden}
body.play .site-hd--solid{background:rgba(15,19,24,.92)!important;color:#eef1f4;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
body.play .site-hd--solid .hd-nav a,body.play .site-hd--solid .entry{color:#a7b0ba}
body.play .site-hd--solid .hd-nav a:hover,body.play .site-hd--solid .entry:hover{color:#eef1f4}
body.play .site-hd--solid .logo{color:#eef1f4}
body.play .site-hd--solid .menu-btn{color:#eef1f4}
body.play .site-hd--solid .pill{background:var(--amber);color:var(--board);border-radius:var(--r);box-shadow:0 3px 0 var(--amber-deep)}
body.play .site-hd--solid .pill:hover{background:#ffc040;color:var(--board)}
body.play .board{top:var(--hd-h,64px)}
body.play .dock{background:rgba(15,19,24,.94);border-top:1px solid var(--line)}
body.play .dock__btn{background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r);font-weight:700}
body.play .dock__btn.is-on{border-color:var(--amber);color:var(--amber)}
body.play .dock__btn--main{background:var(--amber);color:var(--board);border-color:var(--amber);box-shadow:0 3px 0 var(--amber-deep)}
body.play .dock__btn--main:hover{background:#ffc040;color:var(--board)}
body.play .m-nav{background:var(--board);color:var(--ink)}
body.play .m-nav a{color:var(--ink)}
/* ── 道具・サンプルのページ全体を盤面にする汎用スキン（from-samples／product／pricing／small）──
   site.css の色トークンを ma の盤面に付け替え、白背景の部品だけ個別に暗くする。 */
body.play{--cream:#0f1318;--cream2:#161c23;--gray:rgba(255,255,255,.18);--hair:rgba(255,255,255,.09);--sub:#a7b0ba;--note:#6b7681;--brand:#ffb020;--brand-d:#d98f0a;--ink:#eef1f4;--bg:#0f1318;background:#0f1318;color:#eef1f4}
body.play h1,body.play h2,body.play h3,body.play h4{color:#eef1f4}
body.play .mincho,body.play h1,body.play .hub-h2,body.play .hub-hero h1,body.play .phero h1{font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif}
body.play .hub-hero,body.play .phero,body.play .hub-sec,body.play .hub-sec.alt,body.play section{background:transparent}
body.play .hub-scard,body.play .hub-card,body.play .mod,body.play .suite,body.play .tier,body.play .bcol,body.play .hub-ctacard,body.play .ctacard,body.play .step,body.play .hub-ba .pane,body.play .hub-calc,body.play .hub-accordion details,body.play .opt,body.play .free,body.play .combine,body.play .dloc-list li,body.play details{background:#161c23!important;color:#eef1f4;border-color:rgba(255,255,255,.18)}
body.play .hub-scard .thumb{background:#1c242d;border-color:rgba(255,255,255,.18)}
body.play .hub-scard .ttl,body.play .mod h3,body.play .suite .main,body.play .tier .tn,body.play .bcol .bsub{color:#eef1f4}
body.play .hub-scard .meta,body.play .hub-scard .meta b,body.play .mod p,body.play .step p,body.play .hub-lede,body.play .phero .lede,body.play .hub-note,body.play .note2,body.play .src-note,body.play .hub-card p,body.play .hub-card li{color:#a7b0ba}
body.play .hub-scard .open,body.play .hub-tlink,body.play .qlink,body.play .rlink,body.play a:not(.pill):not(.btn):not(.dock__btn):not(.chip):not(.masu){color:#4fd1ff}
body.play .hub-catchip{background:#161c23;border-color:rgba(255,255,255,.18);color:#eef1f4}
body.play .hub-catchip b,body.play .hub-knum,body.play .knum,body.play .eyebrow,body.play .hub-scard .meta b{color:#ffb020}
body.play .hub-badge{background:#1c242d;color:#eef1f4;border-color:rgba(255,255,255,.18)}
body.play .pill,body.play .btn-primary{background:#ffb020;color:#0f1318;border-radius:4px;box-shadow:0 4px 0 #d98f0a;border-color:#ffb020}
body.play .pill:hover{background:#ffc040;color:#0f1318}
body.play .pill .arr{background:rgba(15,19,24,.15);color:#0f1318}
body.play .hub-ctacard,body.play .ctacard{border:1px solid #ffb020;box-shadow:0 0 0 1px #ffb020 inset,0 0 40px rgba(255,176,32,.12)}
body.play .hub-ctacard p,body.play .ctacard p,body.play .hub-ctacard [data-role="disclaimer"],body.play .ctacard [data-role="disclaimer"]{color:#a7b0ba}
body.play .steps4-fig,body.play .steps4 li,body.play .hub-fig,body.play .figd-fig{background:#161c23;border-color:rgba(255,255,255,.18);color:#eef1f4}
body.play .steps4 .sm,body.play figcaption{color:#a7b0ba}
body.play .steps4-not{background:#1c242d;color:#eef1f4}
body.play .tiermap-table,body.play .tiermap-row{border-color:rgba(255,255,255,.18)}
body.play .tiermap-row .stage,body.play .stairs__arrow{color:#ffb020}
body.play .stairs .s1{background:#ffb020;color:#0f1318}body.play .stairs .s2{background:#d98f0a;color:#0f1318}body.play .stairs .s3{background:#1c242d;color:#eef1f4;border:1px solid rgba(255,255,255,.18)}
body.play .stairs__s span{opacity:.9}
body.play .status-tag,body.play .tagnote,body.play .todo{background:#1c242d;color:#ffb020;border:1px solid rgba(255,176,32,.5)}
body.play input,body.play select,body.play textarea{background:#161c23;color:#eef1f4;border:1px solid rgba(255,255,255,.18)}
body.play hr{border-color:rgba(255,255,255,.09)}
body.play .hub-hero{border-bottom:1px solid rgba(255,255,255,.09)}
body.play .site-ft,body.play footer{background:#0f1318;color:#a7b0ba;border-top:1px solid rgba(255,255,255,.09)}
body.play .site-ft a,body.play footer a{color:#a7b0ba}
body.play .site-ft b{color:#eef1f4}
body.play [style*="background:#fff"],body.play [style*="background: #fff"],body.play [style*="background:#FAFAF8"],body.play [style*="background:var(--cream)"]{background:#161c23!important}
/* --- play skin: ページ内<style>で白を指定している部品の上書き（2026-09-15 再点検） --- */
body.play .suite .main,body.play .figd-col,body.play .implementation-step,body.play .hub-lanes .lane,body.play .hub-legend{background:#161c23!important;color:#eef1f4;border-color:rgba(255,255,255,.18)!important}
body.play .suite .main{border-right-color:rgba(255,255,255,.18)!important;border-bottom-color:rgba(255,255,255,.18)!important}
body.play .figd-col b,body.play .figd-col .amt,body.play .figd-h,body.play .implementation-step h4{color:#eef1f4}
body.play .figd-col small,body.play .suite .main .ds,body.play .implementation-step p{color:#a7b0ba}
body.play .implementation-step__n{color:#ffb020;font-family:"Chakra Petch","Zen Kaku Gothic New",sans-serif}
body.play .hub-scard .thumb .kind{background:#0f1318!important;color:#eef1f4!important;border:1px solid rgba(255,255,255,.18)}
body.play .hub-lanes .lane span.diff,body.play .hub-legend i.diff{background:#1c242d!important;border-color:#ffb020!important;color:#eef1f4}
body.play .tag .eyebrow,body.play .tag .note{color:#4a4235}
body.play .tlink{color:#4fd1ff}
/* 2026-09-15: .play の部品規則は「盤面の中」だけに効かせる（body.play で全ページのヘッダー・一覧まで幅760pxに潰れた事故の再発防止）。
   全幅で並べたい節（サンプル一覧の絞り込み）は .wrap--full で site.css の器幅に戻す。 */
.play:not(body) .wrap--full{max-width:1480px;padding:0 28px}
/* 全幅の絞り込み（サンプル一覧）では札を4列・最大幅で並べ、1つだけ次の行に落ちるのを防ぐ */
.play:not(body) .wrap--full .chips{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}
@media(max-width:900px){.play:not(body) .wrap--full .chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2026-09-15 施主指摘「書体が混ざっている」。遊べる層は ma.cpaai.jp と同じ2系統に固定する：
   本文・見出し＝Zen Kaku Gothic New（見出しは900）／数字・STAGE・判子＝Chakra Petch。
   ページ内の古い個別スタイル（Shippori Mincho・Inter・Noto Sans JP）を全面的に上書きするため !important。ロゴだけ Instrument Serif を残す。 */
body.play,body.play *{font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif!important}
body.play h1,body.play h2,body.play h3,body.play h4,body.play .hub-h2,body.play .pick__h,body.play .phero h1,body.play .hub-hero h1{font-weight:900;letter-spacing:-.01em}
body.play .hub-hero h1,body.play .phero h1{line-height:1.3}
body.play .num,body.play .hanko,body.play .eyebrow,body.play .knum,body.play .hub-knum,body.play .lv,body.play .hub-card .n,body.play .hub-fig .ft,body.play .amt,body.play .stairs__s b,body.play .hub-measure dd b,body.play .figd-col b,body.play .counter .v,body.play .q-top b,body.play .masu b,body.play .implementation-step__n,body.play .bcol .bt,body.play .rate-head,body.play .tag .eyebrow{font-family:"Chakra Petch","DM Mono",ui-monospace,monospace!important}
body.play .site-hd .logo{font-family:"Instrument Serif",serif!important}