/* ===================================================================
   将棋ジム 体験コンテンツ共通CSS（2026-07-20新設）
   ミニ体験（5×5）・9×9の体験盤・5×6の成り盤・タップの手応えの共通スタイル。
   使い方: shogi-ui.css のあと、ページの <style> より前に読み込む。
   色は共通仕様の値（動ける=#fff3d1 16%／動けない=#1a2438 10%／移動先=#ffe08a／反則=#c0392b）
   =================================================================== */
/* ミニ体験（駒別章）。5×5の練習盤。回答・配置用のタップUI（指示書2026-07-20の例外規定）
   明暗・ハイライトの色は共通仕様の値（動ける=#fff3d1 16%／動けない=#1a2438 10%／選択=金色グロー）を使う */
.mini{margin:14px 0 6px}
.qhead{font-size:13.5px;color:#ffe08a;min-height:42px;display:flex;align-items:center;justify-content:center;
 text-align:center;line-height:1.5;margin-bottom:4px}  /* 高さ固定＝文が変わっても盤が上下に動かない */
.qstage{position:relative;width:calc((min(100vw,430px) - 22px)/9*5 + 6px);margin:0 auto}
.qb{--qc:calc((min(100vw,430px) - 22px)/9);  /* マス＝トップページの盤と同一 */
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));
 aspect-ratio:1/1;
 background:radial-gradient(circle at 30% 20%,#ffffff2e,#0000 60%),linear-gradient(135deg,var(--wood1),var(--wood2));
 border:3px solid var(--line);border-radius:4px;box-shadow:0 6px 22px #000a,inset 0 0 14px #a86a1e55}
/* 駒サイズは共通shogi-ui.cssの .pc（min(7.2vw,31px)×駒種別）をそのまま使う＝トップページと同一 */
.qb.qmove .cand::after{background:#ffe08a;opacity:1}
.qb .cell.hint{background:#ffe08a4d}  /* 2回間違えたときに正解マスを教える */  /* 「どこに動ける？」の正解マスは黄色ではっきり見せる（移動先＝黄色hlの共通言語） */
.qb .cell.ngx::before{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 font-size:calc(var(--qc)*0.9);font-weight:900;color:#c0392b;z-index:5;pointer-events:none;line-height:1}
.qb.done .cell{cursor:default}
.mini .pctl{max-width:calc((min(100vw,430px) - 22px)/9*5 + 6px);margin:8px auto 0}
.pshake{animation:pshake .45s}
@keyframes pshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* 並べ方体験・並べ方の問題・成り体験（作業4） */
.expbox{margin:12px 0 6px}
.exphead{font-size:13.5px;color:#ffe08a;min-height:44px;display:flex;align-items:center;justify-content:center;
 text-align:center;line-height:1.5;margin-bottom:4px}  /* 高さ固定＝盤が上下に動かない */
.exphead b{color:var(--gold)}
.expstage{position:relative;width:calc(min(100vw,430px) - 16px);margin:0 auto;user-select:none}
.expstage .gboard .cell.hint{background:#ffe08a66}
.expstage .gboard .cell.ngx::before{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 font-size:calc((min(100vw,430px) - 22px)/9 * 0.9);font-weight:900;color:#c0392b;z-index:5;pointer-events:none;line-height:1}
.expstage .gboard.done .cell{cursor:default}
.expbox .pctl{width:calc(min(100vw,430px) - 16px);max-width:100%;margin:8px auto 0}
.nb{--c:calc((min(100vw,430px) - 22px)/9)}  /* 成り体験盤のマスもトップページと同一（見本=shogi-rule.htmlの#nariBoard） */
.nboard{width:calc((min(100vw,430px) - 22px)/9*5 + 6px);margin:0 auto;
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));
 background:radial-gradient(circle at 30% 20%,#ffffff2e,#0000 60%),linear-gradient(135deg,var(--wood1),var(--wood2));
 border:3px solid var(--line);border-radius:4px;box-shadow:0 6px 22px #000a,inset 0 0 14px #a86a1e55}
.nboard .cell{aspect-ratio:1/1}
.nboard .cell.ez{background:#c8443a4d}

@media(max-width:479px){
 .expbox{margin-left:-16px;margin-right:-16px}
}