/* Shared visual system for the child-facing Ninja Training series. */
body.ninja-kids {
--nk-accent:#b44a35;
--nk-accent-dark:#7e2d21;
--nk-hero-a:#f7e8c9;
--nk-hero-b:#e9c997;
--nk-ink:#30281f;
background-color:#18293c;
background-image:linear-gradient(rgba(18,35,52,.82),rgba(18,35,52,.82)),url('/assets/images/bg-mosaic.png');
background-size:auto,160px 160px;
}
body.ninja-tokei {
--nk-accent:#d47b1f; --nk-accent-dark:#8f4c0c; --nk-hero-a:#fff0ca; --nk-hero-b:#e8bc76;
--nk-bg-img:url('/assets/images/ninja/backgrounds/tokei-bg-v1.webp');
--nk-mascot:url('/assets/images/ninja/tokei-clockwork.webp');
background-color:#071427;
background-image:linear-gradient(rgba(4,12,24,.16),rgba(4,12,24,.16)),var(--nk-bg-img);
}
body.ninja-kanji {
--nk-accent:#b64632; --nk-accent-dark:#75281e; --nk-hero-a:#f8e3ca; --nk-hero-b:#dfb087;
--nk-bg-img:url('/assets/images/ninja/backgrounds/kanji-bg-v1.webp');
--nk-mascot:url('/assets/images/ninja/kanji-scroll.webp');
background-color:#170e12;
background-image:linear-gradient(rgba(18,8,10,.14),rgba(18,8,10,.14)),var(--nk-bg-img);
}
body.ninja-katakana {
--nk-accent:#168c8b; --nk-accent-dark:#0c5e64; --nk-hero-a:#dcf1e9; --nk-hero-b:#9fd3c5;
--nk-bg-img:url('/assets/images/ninja/backgrounds/katakana-bg-v1.webp');
--nk-mascot:url('/assets/images/ninja/katakana-infiltration.webp');
background-color:#06242c;
background-image:linear-gradient(rgba(2,20,26,.12),rgba(2,20,26,.12)),var(--nk-bg-img);
}
body.ninja-romaji {
--nk-accent:#7652b8; --nk-accent-dark:#4c3180; --nk-hero-a:#ece4fa; --nk-hero-b:#c5afe7;
--nk-bg-img:url('/assets/images/ninja/backgrounds/romaji-bg-v1.webp');
--nk-mascot:url('/assets/images/ninja/romaji-cipher.webp');
background-color:#100923;
background-image:linear-gradient(rgba(10,4,24,.12),rgba(10,4,24,.12)),var(--nk-bg-img);
}
body.ninja-phonics {
--nk-accent:#4b8e42; --nk-accent-dark:#2d6329; --nk-hero-a:#e7f2d3; --nk-hero-b:#b7d08e;
--nk-bg-img:url('/assets/images/ninja/backgrounds/phonics-bg-v1.webp');
--nk-mascot:url('/assets/images/ninja/phonics-listen.webp');
background-color:#042126;
background-image:linear-gradient(rgba(2,20,22,.14),rgba(2,20,22,.14)),var(--nk-bg-img);
}
/* かけざん修行。色は6アプリと重ならない青（既存は橙33°・赤12°・青緑179°・紫264°・緑113°）。
背景の1枚絵（kuku-bg-v1.webp）はまだ無いので、下の cover 指定の仲間には入れない。
絵ができたら --nk-bg-img を足して、そのリストにも .ninja-kuku を加える。 */
body.ninja-kuku {
--nk-accent:#2f6ea8; --nk-accent-dark:#1b4670; --nk-hero-a:#e2edf8; --nk-hero-b:#a9c7e4;
--nk-mascot:url('/assets/images/ninja/kuku-groups.webp');
}
body:is(.ninja-tokei,.ninja-kanji,.ninja-katakana,.ninja-romaji,.ninja-phonics) {
background-position:center top;
background-size:cover;
background-attachment:fixed;
background-repeat:no-repeat;
}
body.ninja-space {
--nk-accent:#8b5cf6;
background:#071329 url('/assets/images/ninja/space-village-bg.webp') center top / cover fixed no-repeat;
}
@media (max-width:767px) {
body:is(.ninja-tokei,.ninja-kanji,.ninja-katakana,.ninja-romaji,.ninja-phonics) { background-attachment:scroll; }
}
.ninja-kids:not(.ninja-space) .app-paper {
position:relative;
overflow:hidden;
background:#fbf6ea;
border-inline:1px solid rgba(102,70,38,.24);
box-shadow:0 0 38px rgba(0,0,0,.34);
}
.ninja-kids:not(.ninja-space) .app-paper::before {
content:'';
position:absolute;
inset:0;
pointer-events:none;
opacity:.22;
background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(106,74,40,.07) 28px);
}
.ninja-kids .tk-hero,.ninja-kids .kj-hero,.ninja-kids .kt-hero,.ninja-kids .rj-hero,.ninja-kids .pn-hero ,.ninja-kids .kk-hero{
position:relative;
isolation:isolate;
min-height:126px;
padding:18px 40px 16px;
overflow:hidden;
border-bottom:4px solid var(--nk-accent);
background:linear-gradient(135deg,var(--nk-hero-a),var(--nk-hero-b));
}
.ninja-kids .tk-hero::after,.ninja-kids .kj-hero::after,.ninja-kids .kt-hero::after,.ninja-kids .rj-hero::after,.ninja-kids .pn-hero::after ,.ninja-kids .kk-hero::after{
content:'';
position:absolute;
inset:0;
z-index:-1;
opacity:.16;
background:repeating-linear-gradient(135deg,transparent 0 23px,var(--nk-accent) 24px 25px,transparent 26px 48px);
}
.ninja-mascot {
position:absolute;
left:max(22px,calc(50% - 355px));
bottom:-18px;
width:150px;
height:150px;
object-fit:contain;
filter:drop-shadow(0 8px 9px rgba(47,31,17,.24));
pointer-events:none;
}
.ninja-kids .tk-eyebrow,.ninja-kids .kj-eyebrow,.ninja-kids .kt-eyebrow,.ninja-kids .rj-eyebrow,.ninja-kids .pn-eyebrow ,.ninja-kids .kk-eyebrow{ color:var(--nk-accent-dark); }
.ninja-kids .tk-hero h1,.ninja-kids .kj-hero h1,.ninja-kids .kt-hero h1,.ninja-kids .rj-hero h1,.ninja-kids .pn-hero h1 ,.ninja-kids .kk-hero h1{ color:var(--nk-ink); text-shadow:0 1px #fff8; }
.ninja-kids .tk-scope,.ninja-kids .kj-scope,.ninja-kids .kt-scope,.ninja-kids .rj-scope,.ninja-kids .pn-scope ,.ninja-kids .kk-scope{ border-color:color-mix(in srgb,var(--nk-accent) 38%,#fff); color:var(--nk-accent-dark); }
/* スマホはタップした所に :hover が残り、次の画面の同じ位置のボタンが選ばれて見える。マウスのときだけ効かせる（2026-09-27） */
@media (hover:hover) { .ninja-kids .tk-mode:hover,.ninja-kids .kj-mode:hover,.ninja-kids .kt-mode:hover,.ninja-kids .rj-mode:hover,.ninja-kids .pn-mode:hover ,.ninja-kids .kk-mode:hover{ border-color:var(--nk-accent); } }
.ninja-kids .tk-next,.ninja-kids .kj-next,.ninja-kids .kt-next,.ninja-kids .rj-next,.ninja-kids .pn-next ,.ninja-kids .kk-next{ background:var(--nk-accent); box-shadow:0 3px 0 var(--nk-accent-dark); }
.ninja-kids .tk-next:hover,.ninja-kids .kj-next:hover,.ninja-kids .kt-next:hover,.ninja-kids .rj-next:hover,.ninja-kids .pn-next:hover ,.ninja-kids .kk-next:hover{ background:var(--nk-accent-dark); }
.ninja-space .app-paper { border-color:#6846b7; background:linear-gradient(rgba(8,20,48,.9),rgba(11,21,51,.94)); }
.ninja-space .app-paper::before { opacity:.22; }
.ninja-space .sa-head-badge { width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
/* Fit the interactive area inside a 720-768px-tall notebook or landscape tablet viewport. */
@media (min-width:768px) and (max-height:820px) {
.ninja-kids .tk-hero,.ninja-kids .kj-hero,.ninja-kids .kt-hero,.ninja-kids .rj-hero,.ninja-kids .pn-hero ,.ninja-kids .kk-hero{ min-height:82px; padding:8px 32px 7px; }
.ninja-mascot { left:max(16px,calc(50% - 320px)); bottom:-13px; width:100px; height:100px; }
.ninja-kids .tk-eyebrow,.ninja-kids .kj-eyebrow,.ninja-kids .kt-eyebrow,.ninja-kids .rj-eyebrow,.ninja-kids .pn-eyebrow ,.ninja-kids .kk-eyebrow{ margin-bottom:2px; font-size:10px; }
.ninja-kids .tk-hero h1,.ninja-kids .kj-hero h1,.ninja-kids .kt-hero h1,.ninja-kids .rj-hero h1,.ninja-kids .pn-hero h1 ,.ninja-kids .kk-hero h1{ margin-bottom:3px; font-size:24px; }
.ninja-kids .tk-lead,.ninja-kids .kj-lead,.ninja-kids .kt-lead,.ninja-kids .rj-lead,.ninja-kids .pn-lead ,.ninja-kids .kk-lead{ margin-bottom:3px; font-size:11.5px; line-height:1.45; }
.ninja-kids .tk-scope,.ninja-kids .kj-scope,.ninja-kids .kt-scope,.ninja-kids .rj-scope,.ninja-kids .pn-scope ,.ninja-kids .kk-scope{ padding:2px 11px; font-size:10.5px; }
.ninja-kids #tk-app,.ninja-kids #kj-app,.ninja-kids #kt-app,.ninja-kids #rj-app,.ninja-kids #pn-app ,.ninja-kids #kk-app{ padding-top:12px; }
.ninja-kids .tk-menu-lead,.ninja-kids .kj-menu-lead,.ninja-kids .kt-menu-lead,.ninja-kids .rj-menu-lead,.ninja-kids .pn-menu-lead ,.ninja-kids .kk-menu-lead{ margin-bottom:8px; }
.ninja-kids .tk-mode,.ninja-kids .kj-mode,.ninja-kids .kt-mode,.ninja-kids .rj-mode,.ninja-kids .pn-mode ,.ninja-kids .kk-mode{ padding:10px 12px; }
.ninja-kids .tk-rules,.ninja-kids .kt-rules,.ninja-kids .rj-rules,.ninja-kids .pn-rules { margin-top:12px; padding:10px 16px; }
.ninja-space .app-paper { min-height:0; margin:8px auto; padding-bottom:6px; }
.ninja-space .sa-app { padding:9px 18px 4px; }
.ninja-space .sa-head { margin-bottom:5px; gap:8px; }
.ninja-space .sa-head-badge { width:64px; height:64px; }
.ninja-space .sa-title { font-size:24px; }
.ninja-space .sa-lead { font-size:11px; }
.ninja-space .sa-total { margin-bottom:8px; }
.ninja-space .sa-group { margin-bottom:7px; }
.ninja-space .sa-group-title { margin-bottom:4px; }
.ninja-space .sa-choices { gap:6px 10px; }
.ninja-space .sa-choice,.ninja-space .sa-ref { min-height:50px; padding-top:5px; padding-bottom:6px; }
.ninja-space .sa-choice-icon { height:32px; }
.ninja-space .sa-choice-label { font-size:15px; }
.ninja-space .sa-choice-note { font-size:10.5px; }
.ninja-space .sa-start { margin-top:7px; padding:10px 62px 13px; font-size:22px; }
.ninja-space .sa-reset { margin-top:7px; }
.ninja-space .paper-about,.ninja-space .paper-release { display:none; }
}
@media (max-width:767px) {
.ninja-mascot { position:relative; left:auto; bottom:auto; width:82px; height:82px; margin:-7px auto -12px; }
.ninja-kids .tk-hero,.ninja-kids .kj-hero,.ninja-kids .kt-hero,.ninja-kids .rj-hero,.ninja-kids .pn-hero ,.ninja-kids .kk-hero{ padding-inline:16px; }
}
/* Ninja Village UI v2: landscape-first training board. */
.ninja-kids {
--nk-paper:#fffaf0;
--nk-paper-deep:#f2e2bf;
--nk-wood:#5c3522;
--nk-night:#142536;
--nk-line:color-mix(in srgb,var(--nk-accent) 38%,#5b3d27);
}
.ninja-kids .app-paper {
width:min(1180px,100%);
margin-inline:auto;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero){
display:grid!important;
grid-template-columns:minmax(0,1fr) 290px!important;
grid-auto-flow:row;
align-items:center!important;
min-height:188px!important;
padding:18px 34px 18px 44px!important;
text-align:left!important;
border-bottom:6px solid var(--nk-accent);
background:
linear-gradient(90deg,rgba(255,250,235,.98) 0 58%,rgba(255,250,235,.2) 74%),
repeating-linear-gradient(135deg,var(--nk-hero-a) 0 28px,var(--nk-hero-b) 29px 30px,var(--nk-hero-a) 31px 58px);
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero)::before ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero)::before{
content:'忍';
position:absolute;
right:316px;
top:50%;
translate:0 -50%;
color:color-mix(in srgb,var(--nk-accent) 13%,transparent);
font:900 126px/1 serif;
pointer-events:none;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>:not(.ninja-mascot) ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>:not(.ninja-mascot){
grid-column:1;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot{
position:static;
grid-column:2;
grid-row:1 / 9;
justify-self:center;
width:238px;
height:178px;
margin:0;
object-fit:contain;
}
.ninja-kids .app-ref-hero {
grid-template-columns:minmax(0,1fr) 290px!important;
}
.ninja-kids .app-ref-copy {
padding:0!important;
align-self:center;
}
/* マスコットの後ろは丸いぼかしだけにする。斜めの linear-gradient を重ねると
箱の四辺で色が切れて「うっすら四角い枠」に見える（2026-09-03修正）。 */
.ninja-kids .app-ref-visual.is-ninja {
display:grid;
place-items:center;
min-height:178px;
background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.58),transparent 52%);
}
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot {
position:static;
width:250px;
height:178px;
margin:0;
object-fit:contain;
filter:drop-shadow(0 10px 10px rgba(40,24,14,.25));
}
.ninja-kids .app-ref-button {
border:1px solid var(--nk-accent);
border-radius:4px;
background:var(--nk-accent);
color:#fff;
box-shadow:0 4px 0 var(--nk-accent-dark);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.ninja-kids .app-ref-button:hover { background:var(--nk-accent-dark); }
/* 「アプリ一覧」は控えめな抜き文字。色は修行カラーに合わせる。 */
.ninja-kids .app-ref-button.is-sub {
background:transparent;
color:var(--nk-hero-a);
border-color:var(--nk-hero-a);
box-shadow:0 4px 0 color-mix(in srgb,var(--nk-accent-dark) 70%,transparent);
}
.ninja-kids .app-ref-button.is-sub:hover { background:var(--nk-accent); color:#fff; border-color:var(--nk-accent); }
.ninja-kids :is(#tk-app,#kj-app,#kt-app,#rj-app,#pn-app) ,.ninja-kids :is(#tk-app,#kk-app,#kt-app,#rj-app,#pn-app){
position:relative;
max-width:1020px;
min-height:330px;
margin-inline:auto;
padding:18px 30px 22px;
}
/* 盤面の大きさは変数3本で決める（2026-08-28 標準化・チケット#1）。
基準は「とけい修行」の実測値で、ほかの修行アプリをこれに合わせる。
--nk-qh … 問題エリア（左カラム）の高さ。回答エリアもこの高さに揃える
--nk-board-h … 盤面としゅぎょう選択画面の最小高さ。画面が切り替わっても箱が動かないようにする
--nk-ask-h … とけいだけ「といのバー＋時計ステージ」の合成なので、その差分（バー＋行間）
ここが基本値＝PC（1180px以上）。段ごとの上書きは、この下のレスポンシブ節で
この変数だけを差し替える（各アプリのCSSに数値を直書きしない）。 */
.ninja-kids { --nk-qh:312px; --nk-board-h:446px; --nk-ask-h:54px; --nk-seam:8px; }
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu) ,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu){
position:relative;
min-height:var(--nk-board-h);
padding:16px 20px;
border:1px solid #d4bb8c;
border-radius:8px;
background:linear-gradient(105deg,rgba(255,255,255,.96),rgba(255,249,232,.96));
box-shadow:0 10px 24px rgba(72,45,22,.09);
}
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice) ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice){
border:2px solid #d8c49d;
border-radius:6px;
background:linear-gradient(#fffefa,#f7ebd2);
box-shadow:0 3px 0 #c8ad7b;
clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
@media (hover:hover) {
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice):hover ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice):hover{
translate:0 -2px;
border-color:var(--nk-accent);
}
}
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz) ,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz){
display:grid;
grid-template-columns:minmax(260px,.92fr) minmax(340px,1.08fr);
grid-template-rows:auto var(--nk-qh) auto;
gap:12px 24px;
align-items:center;
align-content:start;
min-height:var(--nk-board-h);
padding:16px 20px 18px;
border:2px solid #cfb27d;
border-radius:10px;
background:
linear-gradient(90deg,rgba(255,252,242,.98),rgba(255,248,225,.96)),
repeating-linear-gradient(0deg,transparent 0 31px,rgba(100,70,38,.08) 32px);
box-shadow:0 12px 24px rgba(62,39,20,.12);
}
.ninja-kids :is(.tk-play-head,.kj-play-head,.kt-bar,.rj-bar,.pn-bar) ,.ninja-kids :is(.tk-play-head,.kk-play-head,.kt-bar,.rj-bar,.pn-bar){
grid-column:1 / -1;
grid-row:1;
margin:0;
}
.ninja-kids :is(.kt-q,.rj-q,.pn-q) {
grid-column:1;
grid-row:2;
align-self:stretch;
display:grid;
place-content:center;
min-height:var(--nk-qh);
margin:0;
border:2px solid var(--nk-line);
border-radius:8px;
background:linear-gradient(145deg,#fff,#f8ebcd);
}
.ninja-kids :is(.tk-ask,.kj-ask) ,.ninja-kids :is(.tk-ask,.kk-ask){
grid-column:1;
grid-row:2;
display:grid;
place-items:center;
min-height:var(--nk-qh);
margin:0;
border:2px solid var(--nk-line);
border-radius:8px;
background:linear-gradient(145deg,#fff,#f8ebcd);
}
/* 回答エリアは問題エリアと対（つい）の箱にする。天地を揃えて同じ高さまで伸ばし、
中身だけを縦中央に置く（2026-08-28）。以前は align-self:center で高さが中身なりだったため、
アプリごとに右カラムの始まる位置がバラバラだった。 */
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.rj-type,.pn-choices) ,.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.rj-type,.pn-choices){
grid-column:2;
grid-row:2;
align-self:stretch;
align-content:stretch;
min-height:var(--nk-qh);
margin:0;
}
/* 1行しかない並び（2択・時計の絵・入力欄）は伸ばすと1個が巨大になるので中央寄せのまま。 */
.ninja-kids :is(.kt-choices,.rj-choices,.pn-choices).is-two,
.ninja-kids .tk-options.is-clock,
.ninja-kids .rj-type { align-content:center; }
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt){
min-height:58px;
border:2px solid #d4bd92;
border-radius:7px;
background:#fff;
box-shadow:0 3px 0 #c5a876;
}
/* スマホはタップした所に :hover が残り、次の画面の同じ位置のボタンが選ばれて見える。マウスのときだけ効かせる（2026-09-27） */
@media (hover:hover) {
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt):hover ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt):hover{
translate:0 -2px;
border-color:var(--nk-accent);
}
}
.ninja-kids :is(.tk-feedback,.kj-feedback) ,.ninja-kids :is(.tk-feedback,.kk-feedback){
grid-column:1;
grid-row:3;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer) {
grid-column:2;
grid-row:3;
margin:0;
}
/* 「もどる」は盤面の一番下・中央揃え（2026-08-28）。左下だと見つけにくかった。 */
.ninja-kids :is(.tk-back,.kj-back,.kt-back,.rj-back,.pn-back) ,.ninja-kids :is(.tk-back,.kk-back,.kt-back,.rj-back,.pn-back){
grid-column:1 / -1;
grid-row:4;
justify-self:center;
align-self:start;
margin:0;
}
.ninja-kids :is(.kt-back,.rj-back,.pn-back) { grid-row:4; }
/* 各アプリのCSSの margin:16px auto 0 が auto マージンで justify-self に勝ち、
盤面の中で中途半端に中央寄せになっていた（2026-08-26修正）。 */
.ninja-kids :is(.tk-play,.kj-play)>:is(.tk-back,.kj-back) ,.ninja-kids :is(.tk-play,.kk-play)>:is(.tk-back,.kk-back){ margin:0; }
.ninja-space .sa-head {
min-height:118px;
padding:14px 22px;
border:1px solid #7459c8;
border-radius:12px;
background:linear-gradient(100deg,rgba(17,34,78,.92),rgba(64,37,112,.74));
box-shadow:inset 0 0 30px rgba(112,85,255,.16),0 12px 26px rgba(0,0,0,.22);
}
.ninja-space .sa-head-badge {
width:112px;
height:112px;
order:2;
}
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card) {
display:grid;
grid-template-columns:minmax(250px,.9fr) minmax(340px,1.1fr);
grid-template-rows:auto 1fr auto;
gap:10px 24px;
align-items:center;
}
.ninja-space .sa-card>.sa-question-text { grid-column:1; grid-row:1; }
.ninja-space .sa-card>.sa-problem { grid-column:1; grid-row:2; }
.ninja-space .sa-card>.sa-options { grid-column:2; grid-row:1 / 3; margin:0; }
.ninja-space .sa-card>.sa-feedback { grid-column:1 / -1; grid-row:3; }
.ninja-kids :is(.tk-doc,.kj-doc,.kt-doc,.rj-doc,.pn-doc) ,.ninja-kids :is(.tk-doc,.kk-doc,.kt-doc,.rj-doc,.pn-doc){
position:relative;
margin-top:0;
padding:34px clamp(24px,5vw,70px) 54px;
border-top:12px solid var(--nk-wood);
background:
linear-gradient(rgba(255,250,237,.96),rgba(248,237,211,.96)),
repeating-linear-gradient(90deg,transparent 0 38px,rgba(92,53,34,.08) 39px);
}
.ninja-kids :is(.tk-doc,.kj-doc,.kt-doc,.rj-doc,.pn-doc) h2 ,.ninja-kids :is(.tk-doc,.kk-doc,.kt-doc,.rj-doc,.pn-doc) h2{
padding:8px 16px;
border-left:7px solid var(--nk-accent);
background:linear-gradient(90deg,color-mix(in srgb,var(--nk-accent) 13%,#fff),transparent);
}
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step) ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step){
border:1px solid #d7c39d;
border-radius:4px;
background:#fffcf4;
box-shadow:0 4px 0 #cfb78b;
}
.ninja-kids :is(.tk-faq,.kj-faq,.kt-faq,.rj-faq,.pn-faq) ,.ninja-kids :is(.tk-faq,.kk-faq,.kt-faq,.rj-faq,.pn-faq){
border-color:#d0b98d;
background:#fffdf7;
}
/* Clock training has an extra clock stage; keep it inside the left question panel. */
.ninja-kids .tk-play {
grid-template-columns:minmax(300px,.92fr) minmax(390px,1.08fr);
grid-template-rows:auto 8px auto calc(var(--nk-qh) - var(--nk-ask-h)) auto auto auto auto;
min-height:var(--nk-board-h);
align-content:start;
gap:8px 24px;
}
.ninja-kids .tk-play>.tk-play-head {
grid-column:1 / -1;
grid-row:1;
}
.ninja-kids .tk-play>.tk-bar {
grid-column:1 / -1;
grid-row:2;
width:100%;
height:8px;
margin:0 0 4px;
}
.ninja-kids .tk-play>.tk-ask {
grid-column:1;
grid-row:3;
display:block;
min-height:0;
margin:0;
padding:12px 16px 6px;
border:2px solid var(--nk-line);
border-bottom:0;
border-radius:9px 9px 0 0;
background:linear-gradient(145deg,#fff,#f8ebcd);
font-size:18px;
}
.ninja-kids .tk-play>.tk-stage {
grid-column:1;
grid-row:4;
align-self:stretch;
display:flex;
align-items:center;
justify-content:center;
min-height:calc(var(--nk-qh) - var(--nk-ask-h));
/* といのバーと1枚の札に見せるため、行間ぶんだけ引き上げて合わせ目の地色を消す */
margin:calc(-1 * var(--nk-seam)) 0 0;
padding:4px 12px 12px;
border:2px solid var(--nk-line);
border-top:0;
border-radius:0 0 9px 9px;
background:linear-gradient(145deg,#fff,#f8ebcd);
}
.ninja-kids .tk-play>.tk-stage .tk-clock {
width:min(240px,100%);
height:auto;
}
.ninja-kids .tk-play:not(:has(.tk-stage))>.tk-ask {
grid-row:3 / 5;
align-self:stretch;
display:grid;
place-items:center;
min-height:var(--nk-qh);
padding:24px;
border-bottom:2px solid var(--nk-line);
border-radius:9px;
font-size:30px;
}
.ninja-kids .tk-play>.tk-options {
grid-column:2;
grid-row:3 / 5;
align-self:stretch;
align-content:stretch;
margin:0;
}
.ninja-kids .tk-play>.tk-options.is-clock {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ninja-kids .tk-play>.tk-options.is-clock .tk-clock {
width:min(118px,100%);
height:auto;
}
/* ヒントは「といのとけい」と「こたえ」の両方に効く話なので、
右の列にぶら下げず、盤面の下に全幅で出す（ボタンも中央。2026-09-09） */
.ninja-kids .tk-play>.tk-hint-btn {
grid-column:1 / -1;
grid-row:5;
justify-self:center;
margin:6px 0 0;
}
.ninja-kids .tk-play>.tk-hint {
grid-column:1 / -1;
grid-row:6;
margin:0;
}
.ninja-kids .tk-play>.tk-feedback {
grid-column:1 / -1;
grid-row:7;
min-height:24px;
margin:0;
}
.ninja-kids .tk-play>.tk-back {
grid-column:1 / -1;
grid-row:8;
justify-self:center;
margin:0;
}
@media (min-width:768px) and (max-height:820px) {
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero){
min-height:154px!important;
grid-template-columns:minmax(0,1fr) 230px!important;
padding:10px 28px 10px 34px!important;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot {
width:205px;
height:146px;
}
.ninja-kids .app-ref-hero { grid-template-columns:minmax(0,1fr) 230px!important; }
.ninja-kids .app-ref-visual.is-ninja { min-height:146px; }
.ninja-kids :is(#tk-app,#kj-app,#kt-app,#rj-app,#pn-app) ,.ninja-kids :is(#tk-app,#kk-app,#kt-app,#rj-app,#pn-app){
min-height:300px;
padding:12px 26px 15px;
}
.ninja-kids { --nk-qh:270px; --nk-board-h:392px; }
.ninja-kids :is(.kj-play,.kt-quiz,.rj-quiz,.pn-quiz) ,.ninja-kids :is(.kk-play,.kt-quiz,.rj-quiz,.pn-quiz){
padding:11px 16px;
}
.ninja-kids .tk-play { padding:11px 16px; }
.ninja-kids .tk-play>.tk-stage .tk-clock { width:198px; }
.ninja-space .sa-head { min-height:86px; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card) { padding-block:12px; }
}
@media (max-width:767px) {
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero),.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero),
.ninja-kids .app-ref-hero {
grid-template-columns:1fr!important;
padding:18px!important;
text-align:center!important;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot {
width:130px;
height:100px;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot{
grid-column:1;
grid-row:auto;
}
.ninja-kids .app-ref-copy { text-align:center; }
.ninja-kids .app-ref-visual.is-ninja { min-height:104px; }
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz),.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz),
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card) {
grid-template-columns:1fr;
}
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.rj-type,.pn-choices,.kt-answer,.rj-answer,.pn-answer),.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.rj-type,.pn-choices,.kt-answer,.rj-answer,.pn-answer),
.ninja-space .sa-card>.sa-options {
grid-column:1;
grid-row:auto;
}
.ninja-kids :is(.tk-ask,.kj-ask,.kt-q,.rj-q,.pn-q) ,.ninja-kids :is(.tk-ask,.kk-ask,.kt-q,.rj-q,.pn-q){
grid-column:1;
grid-row:auto;
min-height:130px;
}
.ninja-space .sa-card>.sa-question-text,
.ninja-space .sa-card>.sa-problem,
.ninja-space .sa-card>.sa-feedback {
grid-column:1;
grid-row:auto;
}
.ninja-kids .tk-play {
grid-template-columns:1fr;
grid-template-rows:auto;
min-height:0;
}
.ninja-kids .tk-play>:is(.tk-play-head,.tk-bar,.tk-ask,.tk-stage,.tk-options,.tk-hint-btn,.tk-hint,.tk-feedback,.tk-back) {
grid-column:1;
grid-row:auto;
}
.ninja-kids .tk-play>.tk-stage { min-height:210px; }
.ninja-kids .tk-play:not(:has(.tk-stage))>.tk-ask {
grid-row:auto;
min-height:150px;
font-size:24px;
}
}
/* Ninja Village UI v3 — modern game board, fewer decorative boxes. */
.ninja-kids {
--nk-deep:#0c202a;
--nk-deeper:#08161e;
--nk-board:#f5f1e8;
--nk-card:#fffdf8;
background:#0a1720 url('/assets/images/bg-mosaic.png') 0 0/160px;
}
.ninja-kids:not(.ninja-space) .app-paper {
border:0;
background:#f4f0e7;
box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.ninja-kids:not(.ninja-space) .app-paper::before { display:none; }
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero){
min-height:196px!important;
border-bottom:0;
background:
linear-gradient(102deg,var(--nk-deep) 0 60%,transparent 60.3%),
linear-gradient(135deg,var(--nk-hero-a),var(--nk-hero-b))!important;
box-shadow:inset 0 -5px 0 var(--nk-accent);
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero)::after ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero)::after{
opacity:.2;
background:
radial-gradient(circle at 8% 18%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 25% 72%,#fff 0 1px,transparent 2px);
background-size:80px 80px,120px 120px;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero)::before ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero)::before{
right:290px;
color:rgba(255,255,255,.1);
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) h1 ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero) h1{
color:#fff!important;
text-shadow:none;
letter-spacing:.04em;
}
.ninja-kids :is(.tk-eyebrow,.kj-eyebrow,.kt-eyebrow,.rj-eyebrow,.pn-eyebrow) ,.ninja-kids :is(.tk-eyebrow,.kk-eyebrow,.kt-eyebrow,.rj-eyebrow,.pn-eyebrow){
color:color-mix(in srgb,var(--nk-accent) 52%,#fff)!important;
letter-spacing:.14em;
}
.ninja-kids :is(.tk-lead,.kj-lead,.kt-lead,.rj-lead,.pn-lead) ,.ninja-kids :is(.tk-lead,.kk-lead,.kt-lead,.rj-lead,.pn-lead){
color:#d7e2e4!important;
}
.ninja-kids :is(.tk-scope,.kj-scope,.kt-scope,.rj-scope,.pn-scope) ,.ninja-kids :is(.tk-scope,.kk-scope,.kt-scope,.rj-scope,.pn-scope){
justify-self:start;
width:auto;
max-width:100%;
color:#eff8f8!important;
border:1px solid rgba(255,255,255,.24)!important;
background:rgba(255,255,255,.09)!important;
backdrop-filter:blur(4px);
}
/* 紹介ページへの導線は、注釈と同じ行に流さず1行使う。
色は本体の入口ボタンと同じオレンジ（2026-08-26）。 */
.ninja-kids .app-ref-button {
display:block;
width:fit-content;
margin:12px 0 0;
padding:8px 20px;
color:#fff;
border:0;
border-radius:2px;
background:#ef8a3c;
box-shadow:none;
clip-path:none;
}
.ninja-kids .app-ref-button:hover { background:#d87529; }
/* 「アプリ一覧」は2番手のボタン。抜き文字にしていたが、ヒーローの地色が
濃紺→淡い修行カラーへグラデするため、明るい側で文字が消えていた
（スマホで実際に読めなくなっていた。2026-09-03修正）。
白の下地＋濃い文字にして、どちらの地色の上でも読めるようにする。 */
.ninja-kids .app-ref-button.is-sub {
border:0;
background:rgba(255,255,255,.92);
color:var(--nk-accent-dark);
box-shadow:none;
}
.ninja-kids .app-ref-button.is-sub:hover { background:#fff; color:var(--nk-accent-dark); }
.ninja-kids .app-ref-visual.is-ninja {
min-height:188px;
background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.65),transparent 56%);
}
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot,
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot{
width:260px;
height:188px;
filter:drop-shadow(0 16px 14px rgba(0,0,0,.28));
}
.ninja-kids :is(#tk-app,#kj-app,#kt-app,#rj-app,#pn-app) ,.ninja-kids :is(#tk-app,#kk-app,#kt-app,#rj-app,#pn-app){
max-width:none;
padding:24px clamp(28px,5vw,72px) 28px;
background:
radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--nk-accent) 18%,transparent),transparent 34%),
linear-gradient(135deg,var(--nk-deeper),var(--nk-deep));
}
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz,.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu,.tk-result,.kj-result,.kt-result,.rj-result,.pn-result) ,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz,.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu,.tk-result,.kk-result,.kt-result,.rj-result,.pn-result){
width:min(100%,1000px);
margin-inline:auto;
}
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz) ,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz){
overflow:hidden;
border:0;
border-radius:18px;
background:var(--nk-board);
box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.ninja-kids :is(.tk-play-head,.kj-play-head,.kt-bar,.rj-bar,.pn-bar) ,.ninja-kids :is(.tk-play-head,.kk-play-head,.kt-bar,.rj-bar,.pn-bar){
color:#59666a;
}
.ninja-kids :is(.tk-play>.tk-bar,.kj-play>.kj-bar) ,.ninja-kids :is(.tk-play>.tk-bar,.kk-play>.kk-bar){ display:none; }
.ninja-kids :is(.tk-bar,.kj-bar) ,.ninja-kids :is(.tk-bar,.kk-bar){
background:#ddd7cb;
}
.ninja-kids :is(.tk-bar-fill,.kj-bar-fill) ,.ninja-kids :is(.tk-bar-fill,.kk-bar-fill){
background:var(--nk-accent);
}
/* 問題エリアの枠は忍者札に見立てる（2026-08-28）。
左上と右下を斜めに落とし（既存のボタンと同じ角落としの作法）、
内側にアクセントの罫＋白の細い罫を重ねて掛け軸の表装のように見せる。
::before は地紋、::after はアイテム絵で埋まっているので、
枠は clip-path と inset の box-shadow だけで作ること。 */
.ninja-kids {
--nk-q-notch:18px;
--nk-q-frame:
inset 0 0 0 2px color-mix(in srgb,var(--nk-accent) 58%,transparent),
inset 0 0 0 8px rgba(255,255,255,.045),
inset 0 0 0 9px rgba(255,255,255,.14),
inset 0 22px 44px rgba(0,0,0,.30);
}
.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kj-ask,.tk-play>.tk-ask,.tk-play>.tk-stage) ,.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kk-ask,.tk-play>.tk-ask,.tk-play>.tk-stage){
filter:
drop-shadow(0 10px 22px rgba(0,0,0,.34))
drop-shadow(0 0 14px color-mix(in srgb,var(--nk-accent) 42%,transparent));
}
.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kj-ask) ,.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kk-ask){
color:#fff;
border:0;
border-radius:0;
clip-path:polygon(
var(--nk-q-notch) 0, 100% 0,
100% calc(100% - var(--nk-q-notch)), calc(100% - var(--nk-q-notch)) 100%,
0 100%, 0 var(--nk-q-notch));
background:
radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--nk-accent) 24%,transparent),transparent 38%),
linear-gradient(145deg,#173842,#0c252e);
box-shadow:var(--nk-q-frame);
}
/* とけいは「といのバー＋時計ステージ」で1枚の札になる。
角落としは外側の角だけ（上は左上、下は右下）にして、合わせ目は切らない。 */
.ninja-kids .tk-play>.tk-ask {
border-radius:0;
clip-path:polygon(var(--nk-q-notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nk-q-notch));
box-shadow:
inset 2px 0 0 color-mix(in srgb,var(--nk-accent) 58%,transparent),
inset -2px 0 0 color-mix(in srgb,var(--nk-accent) 58%,transparent),
inset 0 2px 0 color-mix(in srgb,var(--nk-accent) 58%,transparent),
inset 0 22px 44px rgba(0,0,0,.30);
}
.ninja-kids .tk-play>.tk-stage {
border-radius:0;
clip-path:polygon(
0 0, 100% 0,
100% calc(100% - var(--nk-q-notch)), calc(100% - var(--nk-q-notch)) 100%,
0 100%);
box-shadow:
inset 2px 0 0 color-mix(in srgb,var(--nk-accent) 58%,transparent),
inset -2px 0 0 color-mix(in srgb,var(--nk-accent) 58%,transparent),
inset 0 -2px 0 color-mix(in srgb,var(--nk-accent) 58%,transparent);
}
.ninja-kids :is(.kt-q-lead,.rj-q-lead,.pn-q-lead) {
color:#b9cacc;
}
.ninja-kids :is(.kt-q-word,.rj-q-word,.pn-q-word) {
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.22);
}
.ninja-kids .kj-ask-label ,.ninja-kids .kk-ask-label{
grid-column:1;
grid-row:2;
z-index:2;
align-self:start;
justify-self:center;
margin:18px 0 0;
color:#b9cacc;
}
.ninja-kids .kj-ask ,.ninja-kids .kk-ask{ padding-top:0; }
/* 問題エリアが312pxになったぶん、といと問題の文字を大きくする（2026-08-28）。
スマホ・タブレット縦は1画面に収める都合があるので、2カラムの段だけ効かせる。 */
/* 文字の大きさは問題エリアの高さ --nk-qh から比率で決める（2026-08-28）。
段ごとに px を並べるとバランスが崩れるので、比率はここ1か所だけに持たせる。
かんじは1〜3文字、カタカナ・ローマ字・フォニックスは3〜6文字なので係数を分ける
（同じ係数にすると、長いことばが枠からはみ出す）。 */
.ninja-kids {
--nk-fs-label: clamp(13px, calc(var(--nk-qh) * .070), 24px);
/* かんじは最長5文字（組み立てる）。2行に折り返しても「なんと よむ?」に
かからない大きさが .24。よみは最長7文字（しょうがっこう）で1行に収まるのが .17。 */
--nk-fs-word: clamp(28px, calc(var(--nk-qh) * .240), 84px);
--nk-fs-yomi: clamp(22px, calc(var(--nk-qh) * .170), 60px);
--nk-fs-kana: clamp(22px, calc(var(--nk-qh) * .170), 58px);
--nk-fs-big: clamp(44px, calc(var(--nk-qh) * .380), 120px);
--nk-fs-sentence: clamp(18px, calc(var(--nk-qh) * .105), 34px);
--nk-fs-opt: clamp(16px, calc(var(--nk-qh) * .075), 26px);
--nk-fs-head: clamp(12px, calc(var(--nk-qh) * .050), 17px);
}
.ninja-kids :is(.kj-ask-label,.kt-q-lead,.rj-q-lead,.pn-q-lead) ,.ninja-kids :is(.kk-ask-label,.kt-q-lead,.rj-q-lead,.pn-q-lead){
font-size:var(--nk-fs-label);
justify-self:center;
width:fit-content;
padding:.28em 1.1em;
color:#fff!important;
font-weight:800;
letter-spacing:.08em;
background:linear-gradient(var(--nk-accent),color-mix(in srgb,var(--nk-accent) 72%,#000));
box-shadow:0 2px 0 color-mix(in srgb,var(--nk-accent-dark) 80%,#000);
clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.ninja-kids .kj-ask-word ,.ninja-kids .kk-ask-word{ font-size:var(--nk-fs-word); }
.ninja-kids .kj-ask-yomi ,.ninja-kids .kk-ask-yomi{ font-size:var(--nk-fs-yomi); }
.ninja-kids :is(.kt-q-word,.rj-q-word,.pn-q-word) { font-size:var(--nk-fs-kana); }
.ninja-kids :is(.kt-q-word,.rj-q-word,.pn-q-word).is-sentence { font-size:var(--nk-fs-sentence); }
.ninja-kids :is(.kt-q-word,.rj-q-word,.pn-q-word).is-big { font-size:var(--nk-fs-big); }
.ninja-kids .tk-play>.tk-ask { font-size:var(--nk-fs-label); }
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice){ font-size:var(--nk-fs-opt); }
.ninja-kids :is(.tk-play-head,.kj-play-head,.kt-bar,.rj-bar,.pn-bar) ,.ninja-kids :is(.tk-play-head,.kk-play-head,.kt-bar,.rj-bar,.pn-bar){ font-size:var(--nk-fs-head); }
.ninja-kids :is(.tk-back,.kj-back,.kt-back,.rj-back,.pn-back) ,.ninja-kids :is(.tk-back,.kk-back,.kt-back,.rj-back,.pn-back){ font-size:var(--nk-fs-head); }
/* 選択肢は修行ごとのアクセント色で塗り分ける（2026-08-28）。
文字は濃い墨のままにして、色は下地・枠・影で出す（子どもが読めることを優先）。 */
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt){
min-height:62px;
color:#17272e;
border:2px solid color-mix(in srgb,var(--nk-accent) 45%,#fff);
border-left:6px solid var(--nk-accent);
border-radius:10px;
background:color-mix(in srgb,var(--nk-accent) 9%,#fff);
box-shadow:0 5px 0 color-mix(in srgb,var(--nk-accent) 32%,#cfc6b4);
transition:translate .15s,box-shadow .15s,background .15s;
}
/* スマホはタップした所に :hover が残り、次の画面の同じ位置のボタンが選ばれて見える。マウスのときだけ効かせる（2026-09-27） */
@media (hover:hover) {
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt):hover:not(:disabled) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt):hover:not(:disabled){
translate:0 -3px;
border-color:var(--nk-accent);
background:color-mix(in srgb,var(--nk-accent) 16%,#fff);
box-shadow:0 8px 0 color-mix(in srgb,var(--nk-accent) 45%,#c7bca9);
}
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):focus-visible ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):focus-visible{
outline:3px solid color-mix(in srgb,var(--nk-accent) 55%,#fff);
outline-offset:3px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on {
z-index:4;
grid-column:2;
grid-row:2;
align-self:stretch;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:100%;
margin:0;
padding:22px 28px;
color:#fff;
border:0;
border-radius:13px;
box-shadow:0 12px 28px rgba(0,0,0,.18);
animation:ninjaAnswerIn .24s ease-out both;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-ok {
background:linear-gradient(145deg,#12634f,#0b493d);
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-ng {
background:linear-gradient(145deg,#a14b2d,#71301f);
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-head,.rj-a-head,.pn-a-head,.kt-a-why,.rj-a-why,.pn-a-why) {
color:#fff;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-cat,.rj-a-cat,.pn-a-cat) {
color:#18323a;
border:0;
background:#fff;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-next,.rj-next,.pn-next,.pn-sub) {
color:#18323a!important;
background:#fff!important;
box-shadow:0 4px 0 rgba(0,0,0,.24);
}
@keyframes ninjaAnswerIn {
from { opacity:0;translate:16px 0; }
to { opacity:1;translate:0 0; }
}
.ninja-kids .tk-play>.tk-ask,
.ninja-kids .tk-play>.tk-stage {
color:#fff;
border-color:transparent;
background:
radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--nk-accent) 24%,transparent),transparent 38%),
linear-gradient(145deg,#173842,#0c252e);
}
.ninja-kids .tk-play>.tk-ask { border-bottom:0; }
.ninja-kids .tk-play>.tk-stage { border-top:0; }
.ninja-kids .tk-play>.tk-stage .tk-clock {
filter:drop-shadow(0 10px 12px rgba(0,0,0,.28));
}
.ninja-kids :is(.tk-feedback,.kj-feedback) ,.ninja-kids :is(.tk-feedback,.kk-feedback){
min-height:0;
padding-inline:8px;
border-radius:99px;
}
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu) ,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu){
border:0;
border-radius:18px;
background:var(--nk-board);
box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice) ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice){
border:0;
border-left:5px solid color-mix(in srgb,var(--nk-accent) 72%,#fff);
border-radius:10px;
background:#fff;
box-shadow:0 5px 0 #d2c9b8;
clip-path:none;
}
.ninja-kids :is(.tk-doc,.kj-doc,.kt-doc,.rj-doc,.pn-doc) ,.ninja-kids :is(.tk-doc,.kk-doc,.kt-doc,.rj-doc,.pn-doc){
position:relative;
max-width:960px;
margin:0 auto;
padding:48px 28px 64px;
border-top:0;
background:#f4f0e7;
}
.ninja-kids :is(.tk-doc,.kj-doc,.kt-doc,.rj-doc,.pn-doc)::before ,.ninja-kids :is(.tk-doc,.kk-doc,.kt-doc,.rj-doc,.pn-doc)::before{
content:'';
position:absolute;
inset:0;
z-index:0;
background:var(--nk-q-pattern) center/150px 150px repeat;
filter:invert(1);
opacity:.05;
pointer-events:none;
}
.ninja-kids :is(.tk-doc,.kj-doc,.kt-doc,.rj-doc,.pn-doc)>* ,.ninja-kids :is(.tk-doc,.kk-doc,.kt-doc,.rj-doc,.pn-doc)>*{ position:relative; z-index:1; }
.ninja-kids :is(.tk-doc,.kj-doc,.kt-doc,.rj-doc,.pn-doc) h2 ,.ninja-kids :is(.tk-doc,.kk-doc,.kt-doc,.rj-doc,.pn-doc) h2{
padding:0 0 10px;
border:0;
border-bottom:3px solid var(--nk-accent);
background:none;
}
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step) ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step){
border:0;
border-radius:12px;
background:#fff;
box-shadow:0 8px 22px rgba(50,39,27,.08);
}
.ninja-kids :is(.tk-faq,.kj-faq,.kt-faq,.rj-faq,.pn-faq) ,.ninja-kids :is(.tk-faq,.kk-faq,.kt-faq,.rj-faq,.pn-faq){
overflow:hidden;
border:0;
border-radius:10px;
background:#fff;
box-shadow:0 4px 14px rgba(50,39,27,.06);
}
@media (min-width:768px) and (max-height:820px) {
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero){
min-height:150px!important;
}
.ninja-kids :is(#tk-app,#kj-app,#kt-app,#rj-app,#pn-app) ,.ninja-kids :is(#tk-app,#kk-app,#kt-app,#rj-app,#pn-app){
padding-top:14px;
padding-bottom:16px;
}
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot,
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot{
width:210px;
height:145px;
}
}
@media (max-width:767px) {
/* 濃紺と修行カラーの境目は、PCと同じく斜めに切る（2026-09-03）。
角度なしの linear-gradient は真横の帯になり、ただの2色の帯に見えていた。
横長・低いヒーローなので、PCの102degではなく170deg（水平から10度）で傾ける。 */
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero){
background:
linear-gradient(170deg,var(--nk-deep) 0 62%,transparent 62.3%),
linear-gradient(135deg,var(--nk-hero-a),var(--nk-hero-b))!important;
}
.ninja-kids :is(.tk-scope,.kj-scope,.kt-scope,.rj-scope,.pn-scope) ,.ninja-kids :is(.tk-scope,.kk-scope,.kt-scope,.rj-scope,.pn-scope){
justify-self:center;
}
.ninja-kids :is(#tk-app,#kj-app,#kt-app,#rj-app,#pn-app) ,.ninja-kids :is(#tk-app,#kk-app,#kt-app,#rj-app,#pn-app){
padding:16px 12px 20px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on {
grid-column:1;
grid-row:auto;
min-height:180px;
}
}
/* Theme collectibles and choice icons. */
body.ninja-tokei { --nk-items:url('/assets/images/ninja/items/tokei-items.webp'); }
body.ninja-kanji { --nk-items:url('/assets/images/ninja/items/kanji-items.webp?v=20260924'); }
body.ninja-katakana { --nk-items:url('/assets/images/ninja/items/katakana-items.webp'); }
body.ninja-romaji { --nk-items:url('/assets/images/ninja/items/romaji-items.webp'); }
body.ninja-phonics { --nk-items:url('/assets/images/ninja/items/phonics-items.webp'); }
body.ninja-kuku { --nk-items:url('/assets/images/ninja/items/kuku-items.webp'); }
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu) ,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu){
position:relative;
padding-top:78px;
}
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu)::before ,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu)::before{
content:'';
position:absolute;
top:12px;
left:50%;
width:240px;
height:62px;
translate:-50% 0;
background:var(--nk-items) center/contain no-repeat;
filter:drop-shadow(0 6px 7px rgba(31,27,20,.16));
animation:ninjaItemsFloat 3.2s ease-in-out infinite;
}
.ninja-kids :is(.tk-play-head,.kj-play-head,.kt-bar,.rj-bar,.pn-bar) ,.ninja-kids :is(.tk-play-head,.kk-play-head,.kt-bar,.rj-bar,.pn-bar){
position:relative;
}
.ninja-kids :is(.tk-play-head,.kj-play-head,.kt-bar,.rj-bar,.pn-bar)::after ,.ninja-kids :is(.tk-play-head,.kk-play-head,.kt-bar,.rj-bar,.pn-bar)::after{
content:'';
position:absolute;
left:50%;
top:50%;
width:126px;
height:38px;
translate:-50% -50%;
background:var(--nk-items) center/contain no-repeat;
filter:drop-shadow(0 4px 5px rgba(31,27,20,.13));
pointer-events:none;
}
.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kj-ask) ,.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kk-ask){
position:relative;
overflow:hidden;
}
/* 問題エリアの地紋（七宝つなぎ）。白い線のPNGを薄く重ねるので、
修行ごとのアクセント色は下地のグラデーションがそのまま出る。1枚で5アプリ共用。 */
.ninja-kids { --nk-q-pattern:url('/assets/images/ninja/backgrounds/q-shippou.png'); }
.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kj-ask,.tk-play>.tk-stage,.tk-play>.tk-ask)::before ,.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kk-ask,.tk-play>.tk-stage,.tk-play>.tk-ask)::before{
content:'';
position:absolute;
inset:0;
z-index:0;
background:var(--nk-q-pattern) center/104px 104px repeat;
opacity:.09;
pointer-events:none;
}
.ninja-kids :is(.tk-play>.tk-stage,.tk-play>.tk-ask) { position:relative; overflow:hidden; }
.ninja-kids :is(.kt-q-lead,.rj-q-lead,.pn-q-lead,.kt-q-word,.rj-q-word,.pn-q-word),
.ninja-kids .tk-play>.tk-stage .tk-clock { position:relative; z-index:1; }
.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kj-ask)::after ,.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kk-ask)::after{
content:'';
position:absolute;
right:-16px;
bottom:-16px;
width:112px;
height:112px;
opacity:.2;
background-image:var(--nk-items);
background-repeat:no-repeat;
background-size:400% 100%;
background-position:0 50%;
rotate:-8deg;
pointer-events:none;
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock){
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock)::before ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock)::before{
content:'';
flex:0 0 38px;
width:38px;
height:38px;
background-image:var(--nk-items);
background-repeat:no-repeat;
background-size:400% 100%;
background-position:0 50%;
filter:drop-shadow(0 3px 3px rgba(30,25,20,.12));
}
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.pn-choices)>:nth-child(2)::before ,.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:nth-child(2)::before{ background-position:33.333% 50%!important; }
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.pn-choices)>:nth-child(3)::before ,.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:nth-child(3)::before{ background-position:66.666% 50%!important; }
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.pn-choices)>:nth-child(4)::before ,.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:nth-child(4)::before{ background-position:100% 50%!important; }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before {
content:'';
display:block;
width:190px;
height:54px;
margin:0 auto 8px;
background:var(--nk-items) center/contain no-repeat;
filter:drop-shadow(0 7px 8px rgba(0,0,0,.2));
}
.ninja-kids :is(.tk-result,.kj-result,.kt-result,.rj-result,.pn-result)::before ,.ninja-kids :is(.tk-result,.kk-result,.kt-result,.rj-result,.pn-result)::before{
content:'';
display:block;
width:240px;
height:68px;
margin:0 auto 12px;
background:var(--nk-items) center/contain no-repeat;
filter:drop-shadow(0 7px 8px rgba(30,25,20,.14));
}
/* 全問正解のごほうび（2026-09-03）。10問ぜんぶ当たったときだけ、
忍具の並びを6人そろい踏みの「ぜんもんせいかい！」に差し替える。
絵に文字が入っているので、10/10 以外では絶対に出さないこと。 */
.ninja-kids :is(.tk-result,.kj-result,.kt-result,.rj-result,.pn-result).is-perfect::before ,.ninja-kids :is(.tk-result,.kk-result,.kt-result,.rj-result,.pn-result).is-perfect::before{
width:min(100%,320px);
height:auto;
aspect-ratio:560 / 539;
margin-bottom:4px;
background-image:url('/assets/images/ninja/zenmon-seikai.webp');
filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
/* 絵が「ぜんもんせいかい！」と言っているので、★は出さない（重複するため） */
.ninja-kids :is(.tk-result,.kj-result).is-perfect :is(.tk-result-stars,.kj-result-stars) ,.ninja-kids :is(.tk-result,.kk-result).is-perfect :is(.tk-result-stars,.kk-result-stars){ display:none; }
@media (max-width:767px) {
.ninja-kids :is(.tk-result,.kj-result,.kt-result,.rj-result,.pn-result).is-perfect::before ,.ninja-kids :is(.tk-result,.kk-result,.kt-result,.rj-result,.pn-result).is-perfect::before{
width:min(100%,240px);
}
}
/* 「キーボードで うつ」だけは盤面を縦に積む（2026-09-03）。
ほかのしゅぎょうは「問題（左）＋選ぶ（右）」の2カラムだが、うつ しゅぎょうは
入力欄が1本あるだけなので、右カラムに置くと欄が細く、打った文字が見えにくい。
入力欄のある盤面（:has(.rj-type)）だけ1カラムにして、問題の下に入力欄を置く。 */
.ninja-kids .rj-quiz:has(.rj-type) {
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto;
}
.ninja-kids .rj-quiz:has(.rj-type)>* {
grid-column:1;
grid-row:auto;
}
.ninja-kids .rj-quiz:has(.rj-type)>.rj-q {
min-height:0;
padding-block:22px;
}
.ninja-kids .rj-quiz:has(.rj-type)>.rj-type {
align-self:auto;
min-height:0;
}
/* こたえあわせパネルは盤面に重ねず、入力欄の下に出す。
入力欄は visibility:hidden のままだと場所だけ残って空きができるので、畳む。 */
.ninja-kids .rj-quiz:has(.rj-type)>.rj-answer.is-on {
grid-column:1;
grid-row:auto;
min-height:0;
}
.ninja-kids .rj-quiz:has(.rj-answer.is-on)>.rj-type { display:none; }
.ninja-kids .rj-type {
display:flex;
gap:12px;
}
.ninja-kids .rj-type .rj-input { flex:1; min-width:0; }
/* スマホは横に並べると入力欄が細いので縦に積む */
@media (max-width:767px) {
.ninja-kids .rj-type { flex-direction:column; }
.ninja-kids .rj-type .rj-input { flex:none; width:100%; }
.ninja-kids .rj-type .rj-next { width:100%; }
}
.ninja-space .sa-play-head {
position:relative;
padding-right:70px;
}
.ninja-space .sa-play-head::after {
content:'';
position:absolute;
right:8px;
top:50%;
width:58px;
height:58px;
translate:0 -50%;
background:url('/assets/images/sansu/icons/rocket-simple.png') center/contain no-repeat;
animation:ninjaRocketFloat 2.8s ease-in-out infinite;
}
@keyframes ninjaRocketFloat {
0%,100% { translate:0 -50%; }
50% { translate:0 calc(-50% - 4px); }
}
.ninja-space .sa-options .sa-opt {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.ninja-space .sa-options .sa-opt::before {
content:'';
width:34px;
height:34px;
background:center/contain no-repeat;
}
.ninja-space .sa-options .sa-opt:nth-child(1)::before { background-image:url('/assets/images/sansu/icons/moon.png'); }
.ninja-space .sa-options .sa-opt:nth-child(2)::before { background-image:url('/assets/images/sansu/icons/ringed-planet.png'); }
.ninja-space .sa-options .sa-opt:nth-child(3)::before { background-image:url('/assets/images/sansu/icons/meteor.png'); }
.ninja-space .sa-options .sa-opt:nth-child(4)::before { background-image:url('/assets/images/sansu/icons/rocket-simple.png'); }
@keyframes ninjaItemsFloat {
0%,100% { translate:-50% 0; }
50% { translate:-50% -4px; }
}
@media (prefers-reduced-motion:reduce) {
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu)::before,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu)::before,
.ninja-space .sa-play-head::after { animation:none; }
}
@media (max-width:767px) {
.ninja-kids :is(.tk-play-head,.kj-play-head,.kt-bar,.rj-bar,.pn-bar)::after ,.ninja-kids :is(.tk-play-head,.kk-play-head,.kt-bar,.rj-bar,.pn-bar)::after{
width:94px;
height:30px;
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock)::before ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock)::before{
flex-basis:30px;
width:30px;
height:30px;
}
}
/* Feedback polish: decorative items stay in menus and rewards; answers stay neutral. */
.ninja-kids {
--nk-feedback-ok:url('/assets/images/ninja/feedback/ninja-maru.webp');
--nk-feedback-ng:url('/assets/images/ninja/feedback/ninja-batsu.webp');
}
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz) ,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz){ position:relative; }
.ninja-kids :is(.tk-play-head,.kj-play-head,.kt-bar,.rj-bar,.pn-bar)::after ,.ninja-kids :is(.tk-play-head,.kk-play-head,.kt-bar,.rj-bar,.pn-bar)::after{ content:none; }
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock){
gap:0;
min-height:var(--nk-tap);
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock)::before ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock)::before{
content:none;
display:none;
}
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng) ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng){
position:absolute;
grid-column:1 / -1;
grid-row:1 / -1;
inset:0;
z-index:20;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:clamp(10px,2.4vw,30px);
min-height:0;
margin:0;
padding:18px;
color:#fff;
border-radius:18px;
background:rgba(5,19,27,.82);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
backdrop-filter:blur(3px);
font-size:clamp(22px,3.4vw,40px);
font-weight:900;
line-height:1.3;
text-align:left;
pointer-events:none;
animation:ninjaFeedbackVeil .22s ease-out both;
}
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng)::before ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng)::before{
content:'';
display:block;
flex:none;
width:clamp(150px,19vw,205px);
aspect-ratio:1;
margin-bottom:0;
background:center/contain no-repeat;
filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));
animation:ninjaFeedbackPop .38s cubic-bezier(.2,1.28,.42,1) both;
}
.ninja-kids :is(.tk-feedback,.kj-feedback).is-ok::before ,.ninja-kids :is(.tk-feedback,.kk-feedback).is-ok::before{ background-image:var(--nk-feedback-ok); }
.ninja-kids :is(.tk-feedback,.kj-feedback).is-ng::before ,.ninja-kids :is(.tk-feedback,.kk-feedback).is-ng::before{ background-image:var(--nk-feedback-ng); }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before {
width:clamp(88px,10vw,116px);
height:auto;
aspect-ratio:1;
margin:0 auto -4px;
background:center/contain no-repeat;
animation:ninjaFeedbackPop .38s cubic-bezier(.2,1.28,.42,1) both;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-ok::before { background-image:var(--nk-feedback-ok); }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-ng::before { background-image:var(--nk-feedback-ng); }
/* パネルが盤面を覆うので、はみ出した選択肢のふちが下から覗かないように隠す */
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-answer,.rj-answer,.pn-answer).is-on)
:is(.kt-choices,.rj-choices,.rj-type,.rj-write,.kt-write,.kt-write-tools,.pn-choices) { visibility:hidden; }
/* こたえあわせパネル: 盤面いっぱいの横長で、イラスト左・説明右・ボタン下（2026-09-02）。
文字は説明のエリアの中央にそろえる（2026-09-09）。左詰めだと行の長さがばらつき、
パネルの中央に置いた「つぎのもんだい」とも軸がずれて落ち着かなかった。 */
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on {
grid-column:1 / -1;
grid-row:2;
display:grid;
grid-template-columns:auto minmax(0,auto);
grid-template-rows:1fr auto;
align-items:center;
justify-items:center;
justify-content:center;
align-content:center;
column-gap:clamp(14px,2.4vw,30px);
row-gap:clamp(8px,1.4vw,16px);
padding:clamp(16px,2.2vw,26px) clamp(18px,3vw,34px);
text-align:center;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before {
grid-column:1;
grid-row:1;
align-self:center;
margin:0;
filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 10px 14px rgba(0,0,0,.32));
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on>.nk-a-body {
grid-column:2;
grid-row:1;
min-width:0;
max-width:min(620px,100%);
align-self:center;
}
.ninja-kids .nk-a-body>*:last-child { margin-bottom:0; }
/* ボタンは説明の列の下に置く。パネル全体の中央に置くと、絵のぶん左にずれた
文字の軸と合わず、ちぐはぐに見えた（2026-09-09）。 */
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on>:is(.kt-next,.rj-next,.pn-a-btns) {
grid-column:2;
grid-row:2;
justify-self:center;
margin:0;
}
@media (max-width:767px) {
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on {
grid-column:1;
grid-row:auto;
column-gap:12px;
}
}
@keyframes ninjaFeedbackVeil {
from { opacity:0; }
to { opacity:1; }
}
@keyframes ninjaFeedbackPop {
from { opacity:0;transform:translateY(10px) scale(.72) rotate(-4deg); }
to { opacity:1;transform:translateY(0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion:reduce) {
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng),.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng),
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng)::before,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng)::before,
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before { animation:none; }
}
/* Space arithmetic: frame the problem and vertically center the answer grid. */
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem {
min-height:168px;
margin:0;
padding:20px;
border:2px solid #d4c6ff;
border-radius:18px;
background:linear-gradient(145deg,#fff,#f4f0ff);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 8px 20px rgba(64,42,125,.1);
}
@media (min-width:768px) {
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card) {
grid-template-rows:auto minmax(168px,1fr) auto;
align-items:stretch;
}
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-question-text {
align-self:end;
margin:0;
}
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-options {
grid-row:1 / 4;
align-self:center;
}
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-feedback {
grid-column:1;
grid-row:3;
margin:0;
}
}
@media (max-width:767px) {
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem {
min-height:138px;
padding:16px 10px;
}
}
/* Keep arithmetic expressions on one line by giving the space board more room. */
@media (min-width:768px) {
.ninja-space .app-paper {
width:min(900px,100%);
max-width:900px;
min-height:0;
padding-bottom:6px;
}
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem {
flex-wrap:nowrap;
white-space:nowrap;
}
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem>* {
flex:0 0 auto;
}
/* さくらんぼ算は「a ＋ さくらんぼ ＝ ?」で式が長い。既定の .9fr では
問題パネルに入りきらず「8 ＋」が枠の外へこぼれていた（2026-09-09 実測）。
この型のときだけ問題側の列を広げる。 */
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card):has(.sa-problem-cherry) {
grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
}
}
/* Kanji board: fixed play frame. */
@media (min-width:768px) {
.ninja-kids.ninja-kanji .kj-play ,.ninja-kids.ninja-kanji .kk-play{
height:var(--nk-board-h);
min-height:var(--nk-board-h);
box-sizing:border-box;
}
}
/* ============================================================
3段レスポンシブ（PC／タブレット／スマホ）2026-08-25
スマホ : ~767px → 1カラム
タブレット縦 : 768~1179px portrait → 1カラム（大きめ）
タブレット横 : 768~1179px landscape → 2カラム（大きめ）
PC : 1180px~ → 2カラム（既定）
タップ領域は --nk-tap で段ごとに一括指定する。
============================================================ */
.ninja-kids { --nk-tap:68px; }
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt){ min-height:var(--nk-tap); }
/* ---------- スマホ（~767px） ---------- */
@media (max-width:767px) {
/* 1カラムに積む段は盤面・回答エリアの固定高さを外す（1画面に収めるルールが優先） */
.ninja-kids { --nk-tap:60px; --nk-board-h:0px; --nk-q-notch:12px; --nk-seam:10px; }
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.rj-type,.pn-choices),.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.rj-type,.pn-choices),
.ninja-kids .tk-play>.tk-options { align-self:auto; min-height:0; }
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice) ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice){ min-height:56px; }
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero){
min-height:0!important;
padding:16px 16px 18px!important;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero)::before ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero)::before{ content:none; }
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz) ,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz){
grid-template-rows:auto;
gap:10px;
min-height:0;
padding:14px 12px 16px;
border-radius:14px;
}
/* 盤面の子要素は行の明示指定をやめ、上から順に積む */
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz)>*,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz)>*,
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>* {
grid-column:1;
grid-row:auto;
}
/* ○×の全面フィードバックは盤面全体に重ねたまま保つ */
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng) ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng){
grid-column:1 / -1;
grid-row:1 / -1;
}
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.pn-choices) ,.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.pn-choices){ gap:8px; }
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu) ,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu){
padding:14px;
padding-top:66px;
border-radius:14px;
}
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu)::before ,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu)::before{ width:180px; height:48px; }
.ninja-kids :is(.tk-doc,.kj-doc,.kt-doc,.rj-doc,.pn-doc) ,.ninja-kids :is(.tk-doc,.kk-doc,.kt-doc,.rj-doc,.pn-doc){ padding:32px 16px 44px; }
}
/* ---------- タブレット共通（768~1179px） ---------- */
@media (min-width:768px) and (max-width:1179px) {
.ninja-kids { --nk-tap:76px; }
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice) ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice){ min-height:72px; }
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero),.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero),
.ninja-kids .app-ref-hero {
grid-template-columns:minmax(0,1fr) 210px!important;
padding:16px 22px 16px 26px!important;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero)::before ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero)::before{
right:224px;
font-size:98px;
}
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot,
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot{
width:196px;
height:148px;
}
.ninja-kids .app-ref-visual.is-ninja { min-height:148px; }
.ninja-kids :is(#tk-app,#kj-app,#kt-app,#rj-app,#pn-app) ,.ninja-kids :is(#tk-app,#kk-app,#kt-app,#rj-app,#pn-app){
padding:20px clamp(16px,3vw,34px) 24px;
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt){ font-size:20px; }
.ninja-kids :is(.tk-doc,.kj-doc,.kt-doc,.rj-doc,.pn-doc) ,.ninja-kids :is(.tk-doc,.kk-doc,.kt-doc,.rj-doc,.pn-doc){ padding:40px 28px 52px; }
}
/* ---------- タブレット縦（768~1179px・縦持ち） ---------- */
@media (min-width:768px) and (max-width:1179px) and (orientation:portrait) {
/* 1カラムに積む段は盤面・回答エリアの固定高さを外す（1画面に収めるルールが優先） */
.ninja-kids { --nk-board-h:0px; --nk-seam:14px; }
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.rj-type,.pn-choices),.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.rj-type,.pn-choices),
.ninja-kids .tk-play>.tk-options { align-self:auto; min-height:0; }
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero){ min-height:170px!important; }
/* 盤面を1カラムに積む：もんだい → こたえ */
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz),.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz),
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card) {
grid-template-columns:1fr;
grid-template-rows:auto;
gap:14px;
min-height:0;
padding:18px 18px 20px;
}
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz)>*,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz)>*,
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>* {
grid-column:1;
grid-row:auto;
}
/* ○×の全面フィードバックは盤面全体に重ねたまま保つ */
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng) ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng){
grid-column:1 / -1;
grid-row:1 / -1;
}
.ninja-kids { --nk-qh:220px; }
.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kj-ask,.tk-ask) ,.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kk-ask,.tk-ask){ min-height:var(--nk-qh); }
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.rj-type,.pn-choices) ,.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.rj-type,.pn-choices){ gap:12px; }
/* こたえあわせパネルは選択肢の位置に重ねず、下に出す */
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on {
grid-column:1;
grid-row:auto;
min-height:0;
padding:20px 24px;
}
/* とけい修行・さんすう：より詳細度の高い列指定を上書きして積む */
.ninja-kids .tk-play>:is(.tk-play-head,.tk-bar,.tk-ask,.tk-stage,.tk-options,.tk-hint-btn,.tk-hint,.tk-feedback,.tk-back) {
grid-column:1;
grid-row:auto;
}
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>:is(.sa-question-text,.sa-problem,.sa-options,.sa-feedback) {
grid-column:1;
grid-row:auto;
}
/* とけい修行：時計のステージを大きく取る */
.ninja-kids .tk-play>.tk-stage { min-height:clamp(180px,24svh,280px); }
.ninja-kids .tk-play>.tk-stage .tk-clock { width:auto; height:clamp(150px,21svh,240px); }
.ninja-kids .tk-play:not(:has(.tk-stage))>.tk-ask { font-size:34px; }
.ninja-kids .tk-play>.tk-options.is-clock .tk-clock { width:min(150px,100%); }
/* かんじ修行：横持ち用の固定高さを解除 */
.ninja-kids.ninja-kanji .kj-play ,.ninja-kids.ninja-kanji .kk-play{ height:auto; min-height:0; }
/* さんすう：式は折り返してよい（1行固定は横持ちだけ） */
.ninja-space .app-paper { width:min(760px,100%); max-width:760px; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem {
flex-wrap:wrap;
white-space:normal;
min-height:200px;
}
.ninja-space .sa-options { gap:16px; }
.ninja-space .sa-opt { font-size:32px; }
}
/* ---------- タブレット横（768~1179px・横持ち） ---------- */
@media (min-width:768px) and (max-width:1179px) and (orientation:landscape) {
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz) ,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz){
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:12px 18px;
padding:14px 16px 16px;
}
.ninja-kids .tk-play {
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
}
.ninja-kids { --nk-qh:252px; --nk-board-h:402px; --nk-seam:12px; }
.ninja-kids .tk-play>.tk-stage .tk-clock { width:min(180px,100%); }
.ninja-kids .tk-play>.tk-options.is-clock .tk-clock { width:min(104px,100%); }
.ninja-space .app-paper { width:min(100%,1000px); max-width:1000px; }
.ninja-space .sa-opt { font-size:28px; }
}
/* 1カラムに積むとき（スマホ・タブレット縦）は、といのラベルを重ねず上に置く */
@media (max-width:767px), (min-width:768px) and (max-width:1179px) and (orientation:portrait) {
.ninja-kids .kj-ask-label ,.ninja-kids .kk-ask-label{ justify-self:stretch; margin:0 0 6px; }
.ninja-kids .kj-ask ,.ninja-kids .kk-ask{ padding-top:0; }
}
/* ============================================================
モバイルは1画面に収める（2026-08-25）
縦・横どちらに回しても「ナビ＋ヒーロー＋盤面」がビューポートに収まるようにする。
高さは svh 基準の clamp で決める（2026-09-24に dvh から変更。dvh だとスクロールでアドレスバーが隠れるたびに絵や時計が拡大されて気持ち悪かった）。
・スマホ縦（~767px portrait） … 1カラムのまま、ヒーローを1行に畳む
・寝かせた画面（高さ ~500px） … 左右2カラムに戻して縦を詰める
============================================================ */
/* ---------- スマホ縦：ヒーローを1行に畳んで盤面に高さを渡す ---------- */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero),.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero),
.ninja-kids .app-ref-hero {
grid-template-columns:minmax(0,1fr) clamp(104px,32vw,148px)!important;
align-items:center!important;
gap:0 10px;
min-height:0!important;
padding:8px 14px!important;
text-align:left!important;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot{
grid-column:2;
grid-row:1 / 9;
justify-self:center;
}
/* 注釈バッジを消したぶん、忍者を大きく見せる（2026-09-03）。
枠は正方形にして、絵が枠の幅そのままの大きさで出るようにする
（object-fit:contain なので、横長の枠だと高さぶんまでしか大きくならない）。 */
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot {
width:100%;
height:auto;
aspect-ratio:1;
}
.ninja-kids .app-ref-visual.is-ninja { min-height:0; }
.ninja-kids .app-ref-copy { text-align:left; }
.ninja-kids :is(.tk-eyebrow,.kj-eyebrow,.kt-eyebrow,.rj-eyebrow,.pn-eyebrow) ,.ninja-kids :is(.tk-eyebrow,.kk-eyebrow,.kt-eyebrow,.rj-eyebrow,.pn-eyebrow){ margin-bottom:1px; font-size:9.5px; }
/* いちばん長い「フォニックスしゅぎょう」対策（2026-09-03）。
幅に合わせて縮めたうえで、折り返すときは word-break:auto-phrase で
文節の切れ目（フォニックス／しゅぎょう）に寄せる。 */
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) h1 ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero) h1{
margin-bottom:2px;
font-size:clamp(16px,5vw,22px);
word-break:auto-phrase;
}
.ninja-kids :is(.tk-lead,.kj-lead,.kt-lead,.rj-lead,.pn-lead) ,.ninja-kids :is(.tk-lead,.kk-lead,.kt-lead,.rj-lead,.pn-lead){ display:none; }
/* 注釈バッジはスマホでは出さない（2026-09-03）。2行に折り返って
ヒーローでいちばん大きい塊になり、アプリ名とボタンの邪魔をしていた。
同じ内容はランディングの「おうちのかたへ」に書いてある。 */
.ninja-kids :is(.tk-scope,.kj-scope,.kt-scope,.rj-scope,.pn-scope) ,.ninja-kids :is(.tk-scope,.kk-scope,.kt-scope,.rj-scope,.pn-scope){ display:none; }
.ninja-kids .app-ref-button { margin-top:5px; padding:4px 10px; font-size:11px; }
/* 盤面：問題パネルの高さを画面の高さから決める */
.ninja-kids :is(#tk-app,#kj-app,#kt-app,#rj-app,#pn-app) ,.ninja-kids :is(#tk-app,#kk-app,#kt-app,#rj-app,#pn-app){ padding:10px 10px 14px; }
.ninja-kids { --nk-seam:8px; }
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz) ,.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz){ gap:8px; padding:10px 10px 12px; }
.ninja-kids :is(.kt-q-word,.rj-q-word,.pn-q-word).is-big { font-size:clamp(34px,9svh,64px); }
.ninja-kids .tk-play>.tk-stage { min-height:clamp(120px,24svh,230px); }
.ninja-kids .tk-play>.tk-stage .tk-clock { width:auto; height:clamp(104px,21svh,200px); }
.ninja-kids .tk-play>.tk-options.is-clock .tk-clock { width:auto; height:clamp(52px,9svh,88px); }
.ninja-space .sa-app { padding:10px 10px 6px; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem { min-height:clamp(96px,20svh,180px); }
}
/* ---------- 寝かせた画面：左右2カラムに戻して縦を詰める ---------- */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids { --nk-tap:46px; --nk-seam:6px; }
/* ヒーローは見出しだけ残して1行に */
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero),.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero),
.ninja-kids .app-ref-hero {
grid-template-columns:minmax(0,1fr) 86px!important;
align-items:center!important;
gap:0 10px;
min-height:0!important;
padding:5px 14px!important;
text-align:left!important;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero)::before ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero)::before{ content:none; }
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot{
grid-column:2;
grid-row:1 / 9;
justify-self:center;
}
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot { width:86px; height:46px; }
.ninja-kids .app-ref-visual.is-ninja { min-height:46px; }
.ninja-kids .app-ref-copy { text-align:left; }
.ninja-kids :is(.tk-eyebrow,.kj-eyebrow,.kt-eyebrow,.rj-eyebrow,.pn-eyebrow),.ninja-kids :is(.tk-eyebrow,.kk-eyebrow,.kt-eyebrow,.rj-eyebrow,.pn-eyebrow),
.ninja-kids :is(.tk-lead,.kj-lead,.kt-lead,.rj-lead,.pn-lead),.ninja-kids :is(.tk-lead,.kk-lead,.kt-lead,.rj-lead,.pn-lead),
.ninja-kids :is(.tk-scope,.kj-scope,.kt-scope,.rj-scope,.pn-scope) ,.ninja-kids :is(.tk-scope,.kk-scope,.kt-scope,.rj-scope,.pn-scope){ display:none; }
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero) h1 ,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero) h1{ margin:0 0 2px; font-size:18px; }
.ninja-kids .app-ref-button { margin-top:5px; padding:4px 10px; font-size:11px; }
/* 盤面は左右2カラム（縦積みだと1画面に入らないため） */
.ninja-kids :is(#tk-app,#kj-app,#kt-app,#rj-app,#pn-app) ,.ninja-kids :is(#tk-app,#kk-app,#kt-app,#rj-app,#pn-app){ padding:8px 10px 12px; }
.ninja-kids :is(.tk-play,.kj-play,.kt-quiz,.rj-quiz,.pn-quiz),.ninja-kids :is(.tk-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz),
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card) {
grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
grid-template-rows:auto auto auto auto;
gap:6px 12px;
min-height:0;
padding:8px 10px 10px;
}
.ninja-kids :is(.tk-play-head,.kj-play-head,.kt-bar,.rj-bar,.pn-bar) ,.ninja-kids :is(.tk-play-head,.kk-play-head,.kt-bar,.rj-bar,.pn-bar){ grid-column:1 / -1; grid-row:1; }
.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kj-ask) ,.ninja-kids :is(.kt-q,.rj-q,.pn-q,.kk-ask){
grid-column:1;
grid-row:2;
min-height:clamp(84px,30svh,170px);
}
.ninja-kids .kj-ask ,.ninja-kids .kk-ask{ padding-top:8px; }
.ninja-kids .kj-ask-label ,.ninja-kids .kk-ask-label{ grid-column:1; grid-row:2; justify-self:center; margin:6px 10px; }
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.rj-type,.pn-choices),.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.rj-type,.pn-choices),
.ninja-kids .tk-play>.tk-options {
grid-column:2;
grid-row:2;
gap:6px;
margin:0;
min-height:0;
align-self:center;
align-content:center;
}
.ninja-kids .tk-play>.tk-options { grid-row:3 / 5; }
.ninja-kids :is(.tk-feedback,.kj-feedback) ,.ninja-kids :is(.tk-feedback,.kk-feedback){ grid-column:1; grid-row:3; }
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng) ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng){ grid-column:1 / -1; grid-row:1 / -1; }
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng)::before ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng)::before{ width:clamp(84px,26svh,130px); }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer) { grid-column:2; grid-row:3; }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on {
grid-column:2;
grid-row:2;
min-height:100%;
padding:10px 14px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before { width:clamp(46px,12svh,80px); }
.ninja-kids :is(.tk-back,.kj-back,.kt-back,.rj-back,.pn-back) ,.ninja-kids :is(.tk-back,.kk-back,.kt-back,.rj-back,.pn-back){ grid-column:1 / -1; grid-row:4; justify-self:center; }
/* とけい修行：時計を1画面ぶんの高さに合わせる */
.ninja-kids .tk-play { grid-template-rows:auto 6px auto 1fr auto auto auto; }
.ninja-kids .tk-play>.tk-play-head { grid-column:1 / -1; grid-row:1; }
.ninja-kids .tk-play>.tk-bar { grid-column:1 / -1; grid-row:2; }
.ninja-kids .tk-play>.tk-ask { grid-column:1; grid-row:3; font-size:14px; }
.ninja-kids .tk-play>.tk-stage {
grid-column:1;
grid-row:4 / 6;
min-height:clamp(96px,30svh,180px);
padding:2px 8px 8px;
}
.ninja-kids .tk-play>.tk-stage .tk-clock { width:auto; height:clamp(88px,28svh,170px); }
.ninja-kids .tk-play>.tk-options { grid-column:2; grid-row:3 / 5; }
.ninja-kids .tk-play>.tk-options.is-clock .tk-clock { width:auto; height:clamp(40px,11svh,72px); }
.ninja-kids { --nk-qh:clamp(84px,30svh,170px); --nk-board-h:0px; }
.ninja-kids .tk-play:not(:has(.tk-stage))>.tk-ask { grid-row:3 / 6; font-size:22px; }
.ninja-kids .tk-play>.tk-hint-btn { grid-column:2; grid-row:5; margin:0; }
.ninja-kids .tk-play>.tk-hint { grid-column:2; grid-row:6; }
.ninja-kids .tk-play>.tk-feedback { grid-column:1; grid-row:6; }
.ninja-kids .tk-play>.tk-back { grid-column:1 / -1; grid-row:7; justify-self:center; }
/* さんすう うちゅうたんけん */
.ninja-space .app-paper { width:min(100%,900px); max-width:900px; margin:6px auto; }
.ninja-space .sa-app { padding:8px 10px 4px; }
.ninja-space .sa-head { min-height:0; margin-bottom:6px; padding:6px 12px; }
.ninja-space .sa-head-badge { width:44px; height:44px; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-question-text { grid-column:1; grid-row:1; margin:0; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem {
grid-column:1;
grid-row:2;
flex-wrap:nowrap;
white-space:nowrap;
min-height:clamp(80px,28svh,150px);
padding:10px;
}
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-options { grid-column:2; grid-row:1 / 3; align-self:center; margin:0; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-feedback { grid-column:1 / -1; grid-row:3; margin:4px 0 0; }
.ninja-space .sa-opt { padding:8px 0; font-size:22px; }
}
/* 寝かせた画面の詰め：行割りの取りこぼしと、選択肢の高さを整理する */
@media (orientation:landscape) and (max-height:500px) {
/* 選択肢は指で押せる下限（46px）まで詰める */
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt):not(.tk-opt-clock) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt):not(.tk-opt-clock){
padding-block:5px;
font-size:15px;
line-height:1.25;
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt){ min-height:var(--nk-tap); }
/* かんじ修行：しんちょくバーが余った行に落ちるので行を明示する */
.ninja-kids.ninja-kanji .kj-play ,.ninja-kids.ninja-kanji .kk-play{ height:auto; min-height:0; grid-template-rows:auto 6px 1fr auto; }
.ninja-kids .kj-play>.kj-play-head ,.ninja-kids .kk-play>.kk-play-head{ grid-column:1 / -1; grid-row:1; }
.ninja-kids .kj-play>.kj-bar ,.ninja-kids .kk-play>.kk-bar{ grid-column:1 / -1; grid-row:2; }
.ninja-kids .kj-play>:is(.kj-ask,.kj-ask-label) ,.ninja-kids .kk-play>:is(.kk-ask,.kk-ask-label){ grid-column:1; grid-row:3; }
.ninja-kids .kj-play>.kj-options ,.ninja-kids .kk-play>.kk-options{ grid-column:2; grid-row:3; align-self:center; }
.ninja-kids .kj-play>.kj-feedback ,.ninja-kids .kk-play>.kk-feedback{ grid-column:1; grid-row:4; }
.ninja-kids .kj-play>.kj-back ,.ninja-kids .kk-play>.kk-back{ grid-column:1 / -1; grid-row:4; justify-self:center; margin:0; }
/* こたえ／もどるは1行にまとめて縦を稼ぐ */
.ninja-kids :is(.tk-back,.kj-back,.kt-back,.rj-back,.pn-back) ,.ninja-kids :is(.tk-back,.kk-back,.kt-back,.rj-back,.pn-back){ grid-row:4; justify-self:center; }
/* 共通ヘッダーも寝かせたときだけ薄くする */
/* （ナビの詰めは後段の .nav-inner で行う） */
}
/* ○×のアクション画像は「盤面の高さ」に合わせる。
px固定だと、盤面が低いスマホ（とくに横持ち）で上下が見切れる。 */
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng)::before ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng)::before{
width:auto;
height:min(52%,190px);
aspect-ratio:1;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before {
width:auto;
height:min(34%,110px);
aspect-ratio:1;
}
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng) ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng){ font-size:clamp(19px,5.2vw,28px); padding:12px; }
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng)::before ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng)::before{ height:min(48%,150px); }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before { height:min(30%,84px); }
}
@media (orientation:landscape) and (max-height:500px) {
/* 共通ヘッダーは寝かせたときだけ薄くする（クラスは .nav / .nav-inner） */
.ninja-kids .nav-inner { padding:6px 14px; }
.ninja-kids .nav-logo { font-size:1rem; }
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng) ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng){ font-size:clamp(18px,4vw,26px); padding:8px; }
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng)::before ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng)::before{ height:min(46%,120px); }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before { height:min(28%,64px); }
/* とけい修行：とい・ヒントボタン・時計を1画面ぶんまで詰める */
.ninja-kids .tk-play>.tk-ask { padding:4px 10px 2px; font-size:13px; }
.ninja-kids .tk-play>.tk-hint-btn { padding:4px 10px; font-size:12px; }
.ninja-kids .tk-play>.tk-stage { min-height:clamp(88px,26svh,180px); }
.ninja-kids .tk-play>.tk-stage .tk-clock { height:clamp(80px,24svh,170px); }
}
/* 小さめのスマホ縦（360x640 など）でも1画面に入るよう、
ヒーローと選択肢の高さをもう一段詰める。 */
@media (max-width:767px) and (orientation:portrait) {
/* h1 の固定19pxは廃止（2026-09-03）。上のブロックの clamp(16px,5vw,22px) で
画面幅に合わせて縮むようにしたので、ここで固定すると狭い画面で折り返す。 */
.ninja-kids .app-ref-copy { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.ninja-kids .app-ref-button { margin:0; }
.ninja-kids { --nk-qh:clamp(84px,19svh,190px); }
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt):not(.tk-opt-clock) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt):not(.tk-opt-clock){
padding-block:8px;
font-size:16px;
line-height:1.3;
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,.sa-opt){ min-height:var(--nk-tap); }
/* とけい修行：時計まわりを画面の高さに追従させる */
.ninja-kids .tk-play>.tk-ask { padding:6px 12px 2px; font-size:14px; }
.ninja-kids .tk-play>.tk-hint-btn { padding:5px 12px; font-size:12px; }
.ninja-kids .tk-play>.tk-stage { min-height:clamp(104px,21svh,230px); }
.ninja-kids .tk-play>.tk-stage .tk-clock { height:clamp(92px,19svh,200px); }
.ninja-kids .tk-play>.tk-options.is-clock .tk-clock { height:clamp(44px,8svh,88px); }
.ninja-kids .tk-play>.tk-options.is-clock .tk-opt-clock { padding:4px; }
}
/* さんすう うちゅうたんけん：ヘッダー・ロケット進捗も含めて1画面に収める */
@media (max-width:767px) and (orientation:portrait) {
.ninja-space .sa-head { min-height:0; margin-bottom:8px; padding:8px 12px; }
.ninja-space .sa-head-badge { width:48px; height:48px; }
.ninja-space .sa-title { font-size:18px; }
.ninja-space .sa-lead { display:none; }
.ninja-space .sa-play-head { margin-bottom:8px; }
.ninja-space .sa-track-card { margin-bottom:8px; padding:8px 12px 10px; border-radius:14px; }
.ninja-space .sa-track-label { margin-bottom:5px; font-size:11px; }
.ninja-space .sa-track { height:20px; }
.ninja-space .sa-play-foot { margin-top:8px; }
.ninja-space .sa-card { padding:12px 10px; border-radius:18px; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem {
min-height:clamp(84px,17svh,180px);
padding:12px;
}
.ninja-space .sa-question-text { margin-bottom:8px; font-size:13px; }
.ninja-space .sa-opt { padding:10px 0; font-size:24px; }
.ninja-space .sa-options { gap:10px; }
}
@media (orientation:landscape) and (max-height:500px) {
.ninja-space .sa-title { font-size:16px; }
.ninja-space .sa-lead { display:none; }
.ninja-space .sa-play-head { margin-bottom:6px; }
.ninja-space .sa-track-card { margin-bottom:6px; padding:5px 12px 6px; border-radius:12px; }
.ninja-space .sa-track-label { margin-bottom:3px; font-size:10px; }
.ninja-space .sa-track { height:14px; }
.ninja-space .sa-play-foot { margin-top:6px; }
.ninja-space .sa-card { padding:8px 10px; border-radius:14px; }
.ninja-space .sa-question-text { margin-bottom:4px; font-size:12px; }
.ninja-space .sa-options { gap:8px; }
}
/* さんすう：もう一段詰めて、小さい端末・寝かせた画面でも1画面に収める */
@media (max-width:767px) and (orientation:portrait) {
.ninja-space .sa-head { margin-bottom:6px; padding:6px 10px; }
.ninja-space .sa-head-badge { width:42px; height:42px; }
.ninja-space .sa-title { font-size:16px; }
.ninja-space .sa-track-card { margin-bottom:6px; padding:6px 10px 8px; }
.ninja-space .sa-track-label { margin-bottom:4px; font-size:10px; }
.ninja-space .sa-track { height:16px; }
.ninja-space .sa-play-foot { margin-top:6px; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem { min-height:clamp(76px,14svh,180px); }
}
@media (orientation:landscape) and (max-height:500px) {
.ninja-space .sa-head { margin-bottom:4px; padding:4px 10px; }
.ninja-space .sa-head-badge { width:34px; height:34px; }
.ninja-space .sa-title { font-size:14px; }
.ninja-space .sa-play-head { margin-bottom:4px; }
.ninja-space .sa-track-card { margin-bottom:4px; padding:4px 10px 5px; }
.ninja-space .sa-track-label { display:none; }
.ninja-space .sa-track { height:10px; }
.ninja-space .sa-play-foot { margin-top:4px; }
.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem {
min-height:clamp(70px,22svh,150px);
padding:8px;
}
}
/* ○×の全面フィードバックの土台。
絶対配置のグリッド項目は「行・列を明示すると、その grid area が包含ブロック」になる。
1カラムに積む段では明示行が1本しかなく、1 / -1 だと帯が1行ぶん（約24px）に潰れて
アクション画像が見切れていた。行・列を auto にして、包含ブロックを
盤面のパディングボックスに固定する（段によらず盤面いっぱいに重なる）。 */
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng) ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng){
grid-column:auto;
grid-row:auto;
}
/* こたえあわせパネルの○×は、パネル高さが min-height 基準で不定になるため
% ではなく svh で決める。 */
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before {
width:clamp(84px,20svh,190px);
height:auto;
aspect-ratio:1;
}
/* 幅のある画面では、絵を2行ぶん（説明＋ボタン）にまたがらせて大きくする。
1行目だけに置くとボタンの左が空いて、パネルの左下だけがぽっかり空いていた（2026-09-09）。
寝かせた画面は高さが足りないので対象外。 */
@media (min-width:768px) and (min-height:501px) {
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before {
grid-row:1 / -1;
width:clamp(150px,26svh,250px);
}
}
/* ヒーローが薄い側にかかっても読めるよう、以前はモバイルだけ暗い下地を敷いていた。
ボタン自体をオレンジの塗りにした（2026-08-26）ので下地は不要。 */
/* とけいのメニューは選択肢が短い。紙面いっぱいに広げると文字が箱の中で浮くので、
メニューの中身だけ幅を絞る（なんいどを縦1列にしたぶん、間延びも防ぐ）。 */
@media (min-width:768px) {
.ninja-kids.ninja-tokei .tk-menu { padding-inline:max(20px,calc((100% - 640px) / 2)); }
}
/* とけいのメニューも1画面に収める。
なんいどを縦4段にしたぶん縦に伸びるので、幅のある画面では
「といかた＋設定＋見本の時計」と「なんいど」を左右に分ける。 */
@media (min-width:768px) {
.ninja-kids.ninja-tokei .tk-menu {
width:min(100%,1000px);
padding-inline:max(20px,calc((100% - 860px) / 2));
display:grid;
grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
grid-template-rows:auto auto auto auto;
column-gap:24px;
align-items:start;
padding-top:60px;
}
.ninja-kids.ninja-tokei .tk-menu>.tk-group:nth-of-type(1) { grid-column:1; grid-row:1; }
.ninja-kids.ninja-tokei .tk-menu>.tk-group:nth-of-type(2) { grid-column:2; grid-row:1 / 4; margin-bottom:0; }
.ninja-kids.ninja-tokei .tk-menu>.tk-toggle { grid-column:1; grid-row:2; }
.ninja-kids.ninja-tokei .tk-menu>.tk-preview { grid-column:1; grid-row:3; }
.ninja-kids.ninja-tokei .tk-menu>.tk-start {
grid-column:1 / -1; grid-row:4;
width:min(100%,320px); margin:22px auto 0; justify-self:center;
padding-block:18px;
}
.ninja-kids.ninja-tokei .tk-menu::before { width:180px; height:46px; top:9px; }
}
/* ノートPC・iPad横は高さが足りない。スタートの余白と高さだけ元に戻して
「スタートまで1画面」を守る（1024x768 で1px溢れていた。実測。2026-09-09） */
@media (min-width:768px) and (max-height:820px) {
.ninja-kids.ninja-tokei .tk-menu>.tk-start { margin-top:14px; padding-block:16px; }
}
/* 見本の時計・アイテム絵・行の高さを画面の高さから決める（px固定をやめる） */
.ninja-kids.ninja-tokei .tk-preview svg {
width:auto;
height:clamp(88px,15svh,150px);
}
.ninja-kids.ninja-tokei .tk-group { margin-bottom:14px; }
@media (max-width:767px) {
.ninja-kids.ninja-tokei .tk-menu { padding-top:48px; }
.ninja-kids.ninja-tokei .tk-menu::before { width:150px; height:38px; top:8px; }
.ninja-kids.ninja-tokei .tk-group { margin-bottom:10px; }
.ninja-kids.ninja-tokei .tk-group-title { margin-bottom:6px; }
.ninja-kids.ninja-tokei .tk-start { padding-block:12px; }
}
/* 寝かせた画面：見本の時計とアイテム絵は畳んで、選ぶところだけ残す */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-tokei .tk-menu { padding-top:12px; }
.ninja-kids.ninja-tokei .tk-menu::before { content:none; }
.ninja-kids.ninja-tokei .tk-preview { display:none; }
.ninja-kids.ninja-tokei .tk-menu>.tk-start { grid-row:3; }
.ninja-kids.ninja-tokei .tk-menu>.tk-group:nth-of-type(2) { grid-row:1 / 3; }
.ninja-kids.ninja-tokei .tk-group { margin-bottom:8px; }
}
/* メニューで「いま選んでいるもの」をはっきり出す。
v3のスキンが border を0（左の5pxだけ）にしたため、各アプリのCSSが持つ
.is-on（枠の色替え）が効かず、初期選択がどれか分からなくなっていた。 */
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice) ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice){
position:relative;
}
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice).is-on ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice).is-on{
border-left-color:var(--nk-accent);
background:color-mix(in srgb,var(--nk-accent) 11%,#fff);
box-shadow:
inset 0 0 0 2px var(--nk-accent),
0 5px 0 color-mix(in srgb,var(--nk-accent) 42%,#d2c9b8);
}
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice).is-on::after ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice).is-on::after{
content:'✓';
position:absolute;
top:5px;
right:9px;
color:var(--nk-accent);
font-size:13px;
font-weight:900;
line-height:1;
pointer-events:none;
}
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice).is-on :is(.tk-choice-label,.kj-choice-label,.kt-choice-label) ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice).is-on :is(.tk-choice-label,.kk-choice-label,.kt-choice-label){
color:var(--nk-accent-dark);
}
/* 寝かせた画面は幅が768pxに満たない端末（iPhone SE 横=667px など）もあるので、
2カラムのメニューは「幅」ではなく「寝かせているか」で出す。 */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-tokei .tk-menu {
width:min(100%,780px);
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
grid-template-rows:auto auto auto;
column-gap:16px;
align-items:start;
}
.ninja-kids.ninja-tokei .tk-menu>.tk-group:nth-of-type(1) { grid-column:1; grid-row:1; }
.ninja-kids.ninja-tokei .tk-menu>.tk-group:nth-of-type(2) { grid-column:2; grid-row:1 / 4; margin-bottom:0; }
.ninja-kids.ninja-tokei .tk-menu>.tk-toggle { grid-column:1; grid-row:2; }
/* スタートは左の列に置く。全幅にすると なんいど の下に1行増えて入らない */
.ninja-kids.ninja-tokei .tk-menu>.tk-start { grid-column:1; grid-row:3; padding-block:9px; font-size:17px; }
.ninja-kids.ninja-tokei .tk-group-title { margin-bottom:4px; font-size:11px; }
.ninja-kids.ninja-tokei .tk-choices { gap:6px; }
.ninja-kids.ninja-tokei .tk-choices-level .tk-choice { padding:5px 10px; }
.ninja-kids.ninja-tokei .tk-choice-label { font-size:14px; }
.ninja-kids.ninja-tokei .tk-choice-note { font-size:10px; }
.ninja-kids.ninja-tokei .tk-shuriken { width:13px; height:13px; }
}
/* スマホ縦：メニューも1画面に収める */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids.ninja-tokei .tk-menu { padding-top:34px; padding-bottom:12px; }
.ninja-kids.ninja-tokei .tk-menu::before { width:120px; height:30px; top:6px; }
.ninja-kids.ninja-tokei .tk-group { margin-bottom:8px; }
.ninja-kids.ninja-tokei .tk-group-title { margin-bottom:5px; font-size:11.5px; }
.ninja-kids.ninja-tokei .tk-choices { gap:7px; }
/* なんいどを2列に折り返した段。「ちょうどの じかん」が1行に収まる余白と字の大きさにする
（360px幅で折り返して行の高さがそろわなかった。2026-09-08 実測） */
.ninja-kids.ninja-tokei .tk-choices-level .tk-choice { padding:6px 8px; }
.ninja-kids.ninja-tokei .tk-choices-level .tk-choice-label { font-size:14px; }
.ninja-kids.ninja-tokei .tk-choice-note { font-size:10.5px; }
.ninja-kids.ninja-tokei .tk-start { padding-block:11px; font-size:19px; }
/* 忍者を大きくしたぶん、見本の時計まわりを詰める。
ここを詰めないと 390x740 でスタートが画面の外に出る（実測。2026-09-03）。 */
.ninja-kids.ninja-tokei .tk-preview { margin-bottom:8px; }
.ninja-kids.ninja-tokei .tk-preview svg { height:clamp(64px,9svh,120px); }
.ninja-kids.ninja-tokei .tk-toggle { margin-block:2px; }
}
/* 背の低いスマホ（640px級）は見本の時計まで置くと入らない。
「ぷんの すう字を 出す」はラベルで意味が通るので、そこだけ畳む。 */
@media (max-width:767px) and (orientation:portrait) and (max-height:699px) {
.ninja-kids.ninja-tokei .tk-preview { display:none; }
}
/* 最後の数pxを詰める（実測で 360x640 と 852x393 がわずかに溢れていた） */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids.ninja-tokei .tk-menu { padding-top:30px; padding-bottom:10px; }
}
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-tokei .tk-menu { padding-bottom:8px; }
.ninja-kids.ninja-tokei .tk-choices { gap:5px; }
.ninja-kids.ninja-tokei .tk-menu>.tk-start { padding-block:7px; }
}
/* 寝かせた画面ではタブレット段のタップ領域(72px)が効いてメニューが伸びる。
横持ちは高さが足りないので、メニューの選択肢だけ下限を下げる。 */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice) ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode,.tk-choice){ min-height:44px; }
}
/* 寝かせた画面ではメニューも詰める（とけい以外の修行アプリにも同じ扱いを広げる）。
アイテム絵の余白・行の内側余白・スタートの高さが積み上がって1画面を超えていた。 */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu) ,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu){ padding-top:12px; }
.ninja-kids :is(.tk-menu,.kj-menu,.kt-menu,.rj-menu,.pn-menu)::before ,.ninja-kids :is(.tk-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu)::before{ content:none; }
.ninja-kids :is(.tk-group,.kj-group) ,.ninja-kids :is(.tk-group,.kk-group){ margin-bottom:8px; }
.ninja-kids :is(.tk-group-title,.kj-group-title) ,.ninja-kids :is(.tk-group-title,.kk-group-title){ margin-bottom:4px; }
.ninja-kids :is(.tk-mode,.kj-choice,.kt-mode,.rj-mode,.pn-mode) ,.ninja-kids :is(.tk-mode,.kk-choice,.kt-mode,.rj-mode,.pn-mode){ padding-block:6px; }
.ninja-kids :is(.tk-start,.kj-start) ,.ninja-kids :is(.tk-start,.kk-start){ padding-block:8px; font-size:18px; }
}
@media (max-width:767px) and (orientation:portrait) and (max-height:699px) {
.ninja-kids.ninja-tokei .tk-menu { padding-bottom:4px; }
/* 縦が短い端末（360x640 など）は忍者を一段小さくしてヒーローを詰める。
ここを詰めないと、とけいのスタートが画面の外に出る（実測）。 */
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero),.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero),
.ninja-kids .app-ref-hero {
grid-template-columns:minmax(0,1fr) clamp(72px,22vw,92px)!important;
padding-block:6px!important;
}
}
/* アプリ内「おうちのかたへ」3ステップの番号も、ランディングと同じ忍者道具アイコンにする。
数字テキストは読み上げのために残し、font-size:0 で見た目だけ消す。 */
.ninja-kids :is(.tk-step-n,.kj-step-n,.kt-step-n,.rj-step-n,.pn-step-n) ,.ninja-kids :is(.tk-step-n,.kk-step-n,.kt-step-n,.rj-step-n,.pn-step-n){
width:46px;
height:46px;
margin-bottom:8px;
border-radius:0;
background:center/contain no-repeat;
box-shadow:none;
font-size:0;
filter:drop-shadow(0 3px 4px rgba(40,28,16,.18));
}
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step):nth-child(1) :is(.tk-step-n,.kj-step-n,.kt-step-n,.rj-step-n,.pn-step-n) ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step):nth-child(1) :is(.tk-step-n,.kk-step-n,.kt-step-n,.rj-step-n,.pn-step-n){ background-image:url('/assets/images/ninja/steps/step-1.png'); }
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step):nth-child(2) :is(.tk-step-n,.kj-step-n,.kt-step-n,.rj-step-n,.pn-step-n) ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step):nth-child(2) :is(.tk-step-n,.kk-step-n,.kt-step-n,.rj-step-n,.pn-step-n){ background-image:url('/assets/images/ninja/steps/step-2.png'); }
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step):nth-child(3) :is(.tk-step-n,.kj-step-n,.kt-step-n,.rj-step-n,.pn-step-n) ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step):nth-child(3) :is(.tk-step-n,.kk-step-n,.kt-step-n,.rj-step-n,.pn-step-n){ background-image:url('/assets/images/ninja/steps/step-3.png'); }
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step):nth-child(4) :is(.tk-step-n,.kj-step-n,.kt-step-n,.rj-step-n,.pn-step-n) ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step):nth-child(4) :is(.tk-step-n,.kk-step-n,.kt-step-n,.rj-step-n,.pn-step-n){ background-image:url('/assets/images/ninja/steps/step-4.png'); }
/* かんじも とけい と同じ2カラムメニューにする。
といかた（左）・がくねん（右）を1段目に並べ、スタートは両方の下＝2段目に中央で置く。
DOM順は がくねん→といかた なので nth-of-type(1) が がくねん。 */
@media (min-width:768px), (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-kanji .kj-menu ,.ninja-kids.ninja-kanji .kk-menu{
width:min(100%,1000px);
/* がくねん（右）は といかた（左）の1.2倍の幅（2026-09-21）。
といかたの列幅は変えずに、がくねんのぶんだけ中身を広げる：309 + 22 + 309×1.2 ≒ 702px */
padding-inline:max(20px,calc((100% - 702px) / 2));
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
grid-template-rows:auto auto;
column-gap:22px;
align-items:start;
}
.ninja-kids.ninja-kanji .kj-menu>.kj-group:nth-of-type(1) ,.ninja-kids.ninja-kanji .kk-menu>.kk-group:nth-of-type(1){ grid-column:2; grid-row:1; margin-bottom:0; }
.ninja-kids.ninja-kanji .kj-menu>.kj-group:nth-of-type(2) ,.ninja-kids.ninja-kanji .kk-menu>.kk-group:nth-of-type(2){ grid-column:1; grid-row:1; margin-bottom:0; }
.ninja-kids.ninja-kanji .kj-menu>.kj-start ,.ninja-kids.ninja-kanji .kk-menu>.kk-start{
grid-column:1 / -1; grid-row:2;
width:min(100%,320px); margin:18px auto 0; justify-self:center;
}
}
/* 2段階メニュー（2026-09-22）。1枚に1グループしか出さないので2カラムをやめて1列に積む。
上の2カラム指定（0,3,0）に勝つよう .is-step を足して詳細度を上げる */
@media (min-width:768px), (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-kanji .kj-menu.is-step{
display:block;
padding-inline:max(20px,calc((100% - 560px) / 2));
}
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-group{ margin-bottom:0; }
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-start{ width:min(100%,320px); margin:18px auto 0; }
/* コースと がっきは横に広げる（ならびは kanji.css の3段） */
.ninja-kids.ninja-kanji .kj-menu.is-step:has(.kj-choices-grade, .kj-choices-term, .kj-choices-mode){ padding-inline:max(20px,calc((100% - 760px) / 2)); }
/* がっきも横に並べる（縦に3つ積むと 1024x768 で1画面をこえる） */
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-term{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-start{ margin-top:8px; }
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-back{ margin-top:4px; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-column{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.ninja-kids.ninja-kanji .kj-menu-picked{
margin:0 0 12px; padding:6px 12px; border-radius:8px; text-align:center;
font-size:13px; font-weight:800; color:var(--nk-accent,#c96a1e); background:rgba(255,255,255,.75);
}
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-back{ margin:12px auto 0; }
/* じゅけんとっくんだけ色を変える（小学校のコースとは別物だと一目でわかるように。2026-09-22）。
紺地に金。選んだときの枠と✓も金にして、暗い地でも見えるようにする */
.ninja-kids.ninja-kanji .kj-choice.is-jukken{ background:#2d3350; border-left-color:#e0b64a; box-shadow:0 5px 0 #171a2b; }
.ninja-kids.ninja-kanji .kj-choice.is-jukken .kj-choice-label{ color:#ffd878; }
.ninja-kids.ninja-kanji .kj-choice.is-jukken .kj-choice-note{ color:rgba(255,255,255,.72); }
@media (hover:hover) { .ninja-kids.ninja-kanji .kj-choice.is-jukken:hover{ background:#373e61; } }
.ninja-kids.ninja-kanji .kj-choice.is-jukken.is-on{ background:#3b4266; border-left-color:#ffd878; box-shadow:inset 0 0 0 2px #ffd878, 0 5px 0 #171a2b; }
.ninja-kids.ninja-kanji .kj-choice.is-jukken.is-on::after{ color:#ffd878; }
.ninja-kids.ninja-kanji .kj-choice.is-jukken.is-on .kj-choice-label{ color:#ffd878; }
.ninja-kids.ninja-kanji .kj-menu-note{ margin:8px 0 0; font-size:11px; color:rgba(40,30,20,.6); text-align:center; }
/* 寝かせた画面は高さが足りないので、スタートまわりの余白を詰める。
スタートを最下段に移した分（1行増）を、ここで吸収する。 */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-kanji .kj-menu ,.ninja-kids.ninja-kanji .kk-menu{ padding-bottom:6px; }
/* 幅の狭い寝かせたスマホ（667px級）は、がくねんを1.2倍にすると といかた が折り返して
1画面からはみ出す。ここだけ半々に戻す */
@media (max-width:760px){
.ninja-kids.ninja-kanji .kj-menu{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
.ninja-kids.ninja-kanji .kj-menu>.kj-start ,.ninja-kids.ninja-kanji .kk-menu>.kk-start{ margin-top:6px; padding-block:6px; font-size:17px; }
}
/* かんじのスマホ縦：がくねんを縦1列にしたぶんを詰めて1画面に収める */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids.ninja-kanji .kj-menu ,.ninja-kids.ninja-kanji .kk-menu{ padding-top:34px; padding-bottom:8px; }
.ninja-kids.ninja-kanji .kj-menu::before ,.ninja-kids.ninja-kanji .kk-menu::before{ width:120px; height:30px; top:6px; }
.ninja-kids.ninja-kanji .kj-group ,.ninja-kids.ninja-kanji .kk-group{ margin-bottom:8px; }
.ninja-kids.ninja-kanji .kj-group-title ,.ninja-kids.ninja-kanji .kk-group-title{ margin-bottom:5px; font-size:11.5px; }
.ninja-kids.ninja-kanji .kj-choices ,.ninja-kids.ninja-kanji .kk-choices{ gap:7px; }
.ninja-kids.ninja-kanji .kj-choices-column .kj-choice ,.ninja-kids.ninja-kanji .kk-choices-column .kk-choice{ padding:6px 12px; }
.ninja-kids.ninja-kanji .kj-start ,.ninja-kids.ninja-kanji .kk-start{ padding-block:11px; font-size:19px; }
}
/* 番号アイコンと見出しは同じ行に置く（アイコンだけで1行使わない）。
本文はその下に、カードの左端から始める。 */
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step) ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step){
display:grid;
grid-template-columns:auto 1fr;
grid-template-rows:auto auto;
/* カードは3枚とも同じ高さに伸びる。align-content が既定の stretch だと
余った高さが行に配られ、文の少ないカードだけ見出しと本文が下がって
3枚がガタガタに見える（実測）。行は中身なりに固定して上から積む。 */
align-content:start;
align-items:center;
column-gap:12px;
}
.ninja-kids :is(.tk-step-n,.kj-step-n,.kt-step-n,.rj-step-n,.pn-step-n) ,.ninja-kids :is(.tk-step-n,.kk-step-n,.kt-step-n,.rj-step-n,.pn-step-n){
grid-column:1;
grid-row:1;
margin-bottom:0;
}
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step)>h3 ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step)>h3{
grid-column:2;
grid-row:1;
margin:0;
}
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step)>p ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step)>p{
grid-column:1 / -1;
grid-row:2;
margin-top:10px;
}
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step)>h3 ,.ninja-kids :is(.tk-step,.kk-step,.kt-step,.rj-step,.pn-step)>h3{ font-size:15.5px; line-height:1.5; }
/* アプリ画面から「おうちのかたへ・よくある しつもん」への導線（2026-08-26）。
読み物はランディング側に集約し、アプリ画面には あそびかた だけを残す。 */
.ninja-kids .nk-doc-ref {
margin:20px 0 0;
font-size:13px;
line-height:1.9;
color:#5a5348;
text-align:center;
}
.ninja-kids .nk-doc-ref a {
color:var(--nk-accent);
font-weight:800;
text-decoration:underline;
text-underline-offset:4px;
}
/* 紙面のいちばん下から、教育支援ページの「お子さんがつかうツール」へ戻る */
.ninja-kids .nk-back-tools {
margin:0;
padding:26px 20px 4px;
text-align:center;
}
.ninja-kids .nk-back-tools a {
display:inline-block;
padding:11px 22px;
border:2px solid var(--nk-accent);
border-radius:2px;
background:none;
color:var(--nk-accent);
font-size:14px;
font-weight:800;
text-decoration:none;
}
.ninja-kids .nk-back-tools a:hover {
background:var(--nk-accent);
color:#fff;
}
/* かんじ修行だけ紙面下部が暗いので、文字色を反転させる */
.ninja-kids.ninja-kanji .nk-doc-ref { color:#c7d5d8; }
.ninja-kids.ninja-kanji .nk-doc-ref a { color:#ffad92; }
/* とけい修行の忍具と進行表示（2026-09-09） */
.ninja-kids.ninja-tokei .tk-tool-icon { width:28px; height:28px; object-fit:contain; flex:none; }
.ninja-kids.ninja-tokei .tk-shuriken .tk-tool-icon { width:100%; height:100%; filter:grayscale(1); opacity:.23; }
.ninja-kids.ninja-tokei .tk-shuriken.is-on .tk-tool-icon { filter:none; opacity:1; }
.ninja-kids.ninja-tokei .tk-shuriken,
.ninja-kids.ninja-tokei .tk-play-score .tk-tool-icon { rotate:45deg; }
.ninja-kids.ninja-tokei .tk-play>.tk-play-head {
display:flex; flex-wrap:wrap; gap:5px 12px; align-items:center;
padding:5px 12px; border-inline:4px solid #bda278; border-radius:8px;
background:#eee3ce; color:#173f5f;
}
.ninja-kids.ninja-tokei :is(.tk-play-count,.tk-play-score) { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.ninja-kids.ninja-tokei .tk-play-score { margin-left:auto; }
.ninja-kids.ninja-tokei .tk-progress-marks { display:flex; justify-content:center; flex-basis:100%; gap:6px; }
.ninja-kids.ninja-tokei .tk-progress-marks i { width:8px; height:5px; border-radius:3px; background:#cbbfa9; }
.ninja-kids.ninja-tokei .tk-progress-marks .is-done { background:#173f5f; }
.ninja-kids.ninja-tokei .tk-progress-marks .is-current { background:var(--nk-accent); }
.ninja-kids.ninja-tokei .tk-play-score.is-celebrating img { animation:tk-earned .45s ease-out; }
@keyframes tk-earned { 50% { transform:translateY(-5px) rotate(30deg) scale(1.15); } }
@media (prefers-reduced-motion:reduce) { .ninja-kids.ninja-tokei .tk-play-score.is-celebrating img { animation:none; } }
.ninja-kids.ninja-tokei .tk-result { color:#fff4dd; }
.ninja-kids.ninja-tokei .tk-result .tk-result-msg { color:#e6d7bd; }
.ninja-kids.ninja-tokei .tk-result>.tk-start { width:min(100%,320px); margin:20px auto 0; }
.ninja-kids.ninja-tokei .tk-result>.tk-back { margin:24px auto 0; padding:8px 12px; color:#e6d7bd; }
.ninja-kids.ninja-tokei .tk-options>.tk-opt::before {
content:''; width:28px; height:28px; border-radius:0; box-shadow:none;
background:transparent var(--tk-option-icon) center/contain no-repeat;
}
.ninja-kids.ninja-tokei .tk-opt:nth-child(1) { --tk-option-icon:url('/assets/images/ninja/tokei-ui/kunai.webp'); }
.ninja-kids.ninja-tokei .tk-opt:nth-child(2) { --tk-option-icon:url('/assets/images/ninja/tokei-ui/shuriken.webp'); }
.ninja-kids.ninja-tokei .tk-opt:nth-child(3) { --tk-option-icon:url('/assets/images/ninja/tokei-ui/scroll.webp'); }
.ninja-kids.ninja-tokei .tk-opt:nth-child(4) { --tk-option-icon:url('/assets/images/ninja/tokei-ui/smoke.webp'); }
.ninja-kids.ninja-tokei .tk-opt:nth-child(2)::before { rotate:45deg; }
/* 回答の読み始めを揃え、忍具を文字の左に大きく置く。 */
.ninja-kids.ninja-tokei .tk-options.is-text>.tk-opt {
display:flex; justify-content:flex-start; align-items:center;
text-align:left; padding:12px 20px; gap:12px;
}
/* 選択肢の ::before は上の古いルール（display:none）が消しているので、display を明示して戻す。
ほかの修行は「全修行アプリの文字回答」で戻しているが、とけいだけ抜けていた（2026-09-16）。 */
.ninja-kids.ninja-tokei .tk-options.is-text>.tk-opt::before {
display:block; position:static; width:48px; height:48px; flex:0 0 48px;
}
.ninja-kids.ninja-tokei .tk-answer-label { min-width:0; overflow-wrap:anywhere; }
@media (max-width:767px), (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-tokei .tk-options.is-text>.tk-opt { padding:8px 12px; gap:8px; }
.ninja-kids.ninja-tokei .tk-options.is-text>.tk-opt::before { width:36px; height:36px; flex-basis:36px; }
.ninja-kids.ninja-tokei .tk-answer-label { font-size:clamp(16px,2.2vw,20px); }
}
/* 全修行アプリの文字回答：忍具＋左揃え（2026-09-09）。 */
.ninja-kids :is(.kj-options,.kt-choices,.rj-choices,.pn-choices)>:is(.kj-opt,.kt-choice,.rj-choice,.pn-choice) ,.ninja-kids :is(.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.kk-opt,.kt-choice,.rj-choice,.pn-choice){
display:flex; align-items:center; justify-content:flex-start;
padding:12px 20px; gap:12px; text-align:left;
}
.ninja-kids :is(.kj-options,.kt-choices,.rj-choices,.pn-choices)>:is(.kj-opt,.kt-choice,.rj-choice,.pn-choice)::before ,.ninja-kids :is(.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.kk-opt,.kt-choice,.rj-choice,.pn-choice)::before{
content:''; display:block; position:static; width:48px; height:48px; flex:0 0 48px;
border-radius:0; box-shadow:none;
background:transparent var(--nk-answer-icon) center/contain no-repeat;
}
.ninja-kids :is(.kj-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(1) ,.ninja-kids :is(.kk-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(1){ --nk-answer-icon:url('/assets/images/ninja/tokei-ui/kunai.webp'); }
.ninja-kids :is(.kj-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(2) ,.ninja-kids :is(.kk-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(2){ --nk-answer-icon:url('/assets/images/ninja/tokei-ui/shuriken.webp'); }
.ninja-kids :is(.kj-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(2)::before ,.ninja-kids :is(.kk-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(2)::before{ rotate:45deg; }
.ninja-kids :is(.kj-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(3) ,.ninja-kids :is(.kk-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(3){ --nk-answer-icon:url('/assets/images/ninja/tokei-ui/scroll.webp'); }
.ninja-kids :is(.kj-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(4) ,.ninja-kids :is(.kk-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(4){ --nk-answer-icon:url('/assets/images/ninja/tokei-ui/smoke.webp'); }
.ninja-kids .nk-answer-label { min-width:0; overflow-wrap:anywhere; }
@media (max-width:767px), (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.kj-options,.kt-choices,.rj-choices,.pn-choices)>:is(.kj-opt,.kt-choice,.rj-choice,.pn-choice) ,.ninja-kids :is(.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.kk-opt,.kt-choice,.rj-choice,.pn-choice){ padding:8px 12px; gap:8px; }
.ninja-kids :is(.kj-options,.kt-choices,.rj-choices,.pn-choices)>:is(.kj-opt,.kt-choice,.rj-choice,.pn-choice)::before ,.ninja-kids :is(.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.kk-opt,.kt-choice,.rj-choice,.pn-choice)::before{ width:36px; height:36px; flex-basis:36px; }
}
/* 選択肢の通し番号（2026-08-26）。
「2ばんめの やつ」と口で言えるように、1問ごとに 1 から振り直して左上に出す。
文字は中央ぞろえのままにしたいので、番号は絶対配置にしてレイアウトに影響させない。 */
.ninja-kids :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.pn-choices) ,.ninja-kids :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.pn-choices){
counter-reset:nk-opt;
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice){
position:relative;
}
:where(.ninja-kids) :is(.tk-options,.kj-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice)::before ,:where(.ninja-kids) :is(.tk-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice)::before{
counter-increment:nk-opt;
content:counter(nk-opt);
display:grid;
place-items:center;
position:absolute;
top:5px;
left:7px;
width:20px;
height:20px;
border-radius:50%;
background:color-mix(in srgb,var(--nk-accent) 15%,#fff);
color:var(--nk-accent-dark);
font-size:11px;
font-weight:900;
line-height:1;
pointer-events:none;
}
/* ============================================================
メニュー下の「読み物」ブロック（対応表・ルール解説）
2026-08-27：盤面の中から下の解説エリアへ移した。カタカナ・ローマ字・
フォニックスで共通なのでここに一元化する。枠はアプリごとの背景画像
（--nk-bg-img）をベールごしに敷いて装飾。表や箇条書きの地は白のまま
なので、背景を入れても読みやすさは落ちない。
============================================================ */
.ninja-kids :is(.kt-doc,.rj-doc,.pn-doc) :is(.kt-rules,.rj-rules,.pn-rules) {
position:relative;
margin:0 0 8px;
padding:20px 22px 18px;
border:2px solid var(--nk-accent-dark);
border-radius:16px;
background-color:#fdf8ef;
background-image:linear-gradient(rgba(252,249,243,.78),rgba(253,248,239,.93)),var(--nk-bg-img);
background-size:auto,cover;
background-position:center,center top;
box-shadow:0 2px 10px rgba(30,20,10,.12);
}
/* 見出しの前に そのアプリの忍者。飾りなので読み上げには入れない */
.ninja-kids :is(.kt-doc,.rj-doc,.pn-doc) :is(.kt-rules,.rj-rules,.pn-rules) > h2 {
display:flex;align-items:center;gap:8px;
font-size:15px;margin:0 0 14px;color:var(--nk-accent-dark);
}
.ninja-kids :is(.kt-doc,.rj-doc,.pn-doc) :is(.kt-rules,.rj-rules,.pn-rules) > h2::before {
content:'';flex:none;width:22px;height:22px;
background:var(--nk-mascot) center/contain no-repeat;
}
/* 箇条書き型（カタカナ・フォニックス）も表型（ローマ字）と同じ地にする */
.ninja-kids :is(.kt-doc,.rj-doc,.pn-doc) :is(.kt-rules,.rj-rules,.pn-rules) > ol {
background:#fff;border-radius:10px;
margin:0;padding:14px 16px 14px 2.2em;
border:1px solid rgba(60,45,25,.14);
box-shadow:0 1px 4px rgba(30,20,10,.08);
}
.ninja-kids :is(.kt-doc,.rj-doc,.pn-doc) .rj-table { box-shadow:0 1px 4px rgba(30,20,10,.08); }
.ninja-kids :is(.kt-doc,.rj-doc,.pn-doc) :is(.kt-rules-note,.rj-rules-note,.pn-rules-note) {
margin-bottom:0;
}
@media (max-width:767px) {
.ninja-kids :is(.kt-doc,.rj-doc,.pn-doc) :is(.kt-rules,.rj-rules,.pn-rules) {
padding:16px 14px 14px;border-radius:14px;
}
}
/* しゅぎょうが3つだけのアプリ（カタカナ・ローマ字・フォニックス）は、
縦に3段積むと そのぶん盤面が下へ押される。768px以上では横3分割にして
メニューを1段に収める（スマホは3段ルールどおり1カラムのまま）。 */
@media (min-width:768px) {
/* しゅぎょうの札は、選ぶ枠いっぱいまで広げる（2026-08-28）。
メニューを縦のフレックスにして、札の行に余った高さを全部わたす。 */
.ninja-kids :is(.kt-menu,.rj-menu,.pn-menu) {
display:flex;
flex-direction:column;
}
/* 寸法は枚数から決める。1段に並べきることを優先し、枚数が増えたら
絵と文字を1段小さくする（2段に折ると札の高さが半分になり、絵が文字を覆う）。 */
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes) {
--nk-mode-n:3;
--nk-mode-img-h:154px;
--nk-mode-img-top:16px;
--nk-mode-t:26px;
--nk-mode-s:15px;
--nk-mode-pad:24px;
flex:1;
grid-template-columns:repeat(var(--nk-mode-n),1fr);
align-items:stretch;
gap:16px;
}
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes):has(>:nth-child(4)) {
--nk-mode-n:2;
--nk-mode-img-h:104px;
--nk-mode-t:23px;
--nk-mode-s:14px;
--nk-mode-pad:18px;
gap:14px;
}
/* 絵は左、文字は右。札が横長になるので中身も横並びにする */
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes):has(>:nth-child(4))>:is(.kt-mode,.rj-mode,.pn-mode) {
justify-content:center;
align-items:flex-start;
gap:4px;
text-align:left;
padding-left:calc(var(--nk-mode-pad) + var(--nk-mode-img-h) + 14px);
}
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes):has(>:nth-child(4))>:is(.kt-mode,.rj-mode,.pn-mode)::before {
left:var(--nk-mode-pad);
top:50%;
translate:0 -50%;
}
.ninja-kids :is(.kt-mode,.rj-mode,.pn-mode) {
height:100%;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
gap:10px;
padding:var(--nk-mode-pad) var(--nk-mode-pad) calc(var(--nk-mode-pad) + 2px);
/* 絵が札の真ん中にあるので、見出しとひとことも中央にそろえる（2026-09-03）。
設定の選択肢は左詰めが基本だが、この札だけは絵が主役なので例外にする。 */
text-align:center;
}
/* 広がったぶん、なんのしゅぎょうかが読んで分かるように大きくする */
.ninja-kids :is(.kt-mode-t,.rj-mode-t,.pn-mode-t) { font-size:var(--nk-mode-t); line-height:1.35; }
.ninja-kids :is(.kt-mode-s,.rj-mode-s,.pn-mode-s) { font-size:var(--nk-mode-s); line-height:1.95; }
/* 札ごとにモード専用の絵を1つずつ入れる（2026-09-03・チケット#20）。
以前は items スプライト（忍具4つ並び）の1〜3コマ目を流用していたが、
モードの中身と対応していなかったので、カタカナ・ローマ字・フォニックスの
3アプリぶん9枚を描き起こして差し替えた。絵は下の --nk-mode-img で指定する。
::after は選択中の✓で使っているので、絵は ::before に置くこと。 */
.ninja-kids :is(.kt-mode,.rj-mode,.pn-mode)::before {
content:'';
position:absolute;
left:50%;
top:var(--nk-mode-img-top);
width:var(--nk-mode-img-h);
height:var(--nk-mode-img-h);
translate:-50% 0;
background:var(--nk-mode-img) center/contain no-repeat;
pointer-events:none;
}
}
/* 札の絵の割り当て。スマホでも使うので media の外に置く（2026-09-24） */
.ninja-kids.ninja-katakana .kt-mode[data-mode="dotchi"] { --nk-mode-img:url('/assets/images/ninja/modes/katakana-dotchi.png'); }
.ninja-kids.ninja-katakana .kt-mode[data-mode="naosu"] { --nk-mode-img:url('/assets/images/ninja/modes/katakana-naosu.png'); }
.ninja-kids.ninja-katakana .kt-mode[data-mode="nigata"] { --nk-mode-img:url('/assets/images/ninja/modes/katakana-nigata.png'); }
.ninja-kids.ninja-katakana .kt-mode[data-mode="kaku"] { --nk-mode-img:url('/assets/images/ninja/modes/katakana-kaku.webp'); }
.ninja-kids.ninja-romaji .rj-mode[data-mode="yomu"] { --nk-mode-img:url('/assets/images/ninja/modes/romaji-yomu.png'); }
.ninja-kids.ninja-romaji .rj-mode[data-mode="utsu"] { --nk-mode-img:url('/assets/images/ninja/modes/romaji-utsu.png'); }
.ninja-kids.ninja-romaji .rj-mode[data-mode="kaku"] { --nk-mode-img:url('/assets/images/ninja/modes/romaji-kaku.png'); }
.ninja-kids.ninja-romaji .rj-mode[data-mode="futatsu"] { --nk-mode-img:url('/assets/images/ninja/modes/romaji-futatsu.png'); }
.ninja-kids.ninja-phonics .pn-mode[data-mode="oto"] { --nk-mode-img:url('/assets/images/ninja/modes/phonics-oto.png'); }
.ninja-kids.ninja-phonics .pn-mode[data-mode="tsunage"] { --nk-mode-img:url('/assets/images/ninja/modes/phonics-tsunage.png'); }
.ninja-kids.ninja-phonics .pn-mode[data-mode="mahou"] { --nk-mode-img:url('/assets/images/ninja/modes/phonics-mahou.png'); }
/* こたえあわせパネルの○×：1カラムの段は幅が狭いので、絵が紙面を食わないよう小さめに。
（幅の % は auto 列だと循環参照になり 0 になるので vw で決める） */
@media (max-width:767px) {
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before {
width:clamp(62px,20vw,104px);
}
}
/* こたえあわせパネル: 明るい地色・大きい文字・目立つボタン（2026-09-02） */
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on { background-blend-mode:normal; }
/* こたえあわせの地。彩度を上げて濁りを抜き、七宝の地紋を薄く重ねる（2026-09-09）。
「おしい」は茶がかったオレンジだと濁って見えたので珊瑚（コーラル）に振る。 */
.ninja-kids { --nk-answer-pattern:url('/assets/images/ninja/patterns/answer-shippou.png'); }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-ok {
background:var(--nk-answer-pattern) center/104px 104px repeat,
linear-gradient(150deg,#15a077,#0b7a5c);
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-ng {
background:var(--nk-answer-pattern) center/104px 104px repeat,
linear-gradient(150deg,#e9664f,#c9402c);
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-head,.rj-a-head,.pn-a-head) {
font-size:clamp(18px,2.1vw,24px);
line-height:1.5;
margin:0 0 10px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-head,.rj-a-head,.pn-a-head) b {
font-size:clamp(26px,3.2vw,36px);
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-cat,.rj-a-cat,.pn-a-cat) {
font-size:clamp(13px,1.5vw,17px);
padding:5px 14px;
margin:0 0 10px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-why,.rj-a-why,.pn-a-why) {
font-size:clamp(16px,1.9vw,21px);
line-height:1.8;
}
/* 「つぎの もんだい」は次の行動なので、白ボタンではなくオレンジの塗りにする */
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-next,.rj-next,.pn-next) {
color:#3d2208!important;
background:linear-gradient(180deg,#ffc464,#f59a2e)!important;
font-size:clamp(17px,2vw,22px);
font-weight:900;
padding:14px 32px;
border-radius:12px;
box-shadow:0 5px 0 #bd6c17,0 10px 18px rgba(0,0,0,.28);
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-next,.rj-next,.pn-next):hover {
background:linear-gradient(180deg,#ffd083,#ffa945)!important;
}
/* 音を きく は補助なので白のまま、少しだけ大きく */
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on .pn-sub {
font-size:clamp(15px,1.7vw,19px);
padding:12px 22px;
}
/* ヒーローの忍者は 320x320 の正方形。箱が 238x178 だと横60pxが余り、実寸178pxまでしか出ていなかった。
箱を正方形にして大きくするが、縦に余裕のある画面だけ（1画面に収めるルールを優先） */
@media (min-width:1000px) and (min-height:821px) {
.ninja-kids :is(.tk-hero,.kj-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,.ninja-kids :is(.tk-hero,.kk-hero,.kt-hero,.rj-hero,.pn-hero):not(.app-ref-hero)>.ninja-mascot,
.ninja-kids .app-ref-visual.is-ninja .ninja-mascot {
width:230px;
height:230px;
}
}
/* 1カラムの段はパネルが下に積まれるので、選択肢は隠すのではなく畳んで場所を空ける
（隠すだけだと空白の穴が残り、1画面に収まらなくなる） */
@media (max-width:767px) {
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-answer,.rj-answer,.pn-answer).is-on)
:is(.kt-choices,.rj-choices,.rj-type,.pn-choices) { display:none; }
}
/* こたえあわせパネル: 縦の余裕がない段は文字と余白を詰める（1画面に収める） */
@media (max-width:900px),(max-height:820px) {
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on {
padding:10px 12px;
row-gap:4px;
column-gap:12px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-head,.rj-a-head,.pn-a-head) {
font-size:clamp(15px,1.8vw,19px);
margin:0 0 6px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-head,.rj-a-head,.pn-a-head) b { font-size:clamp(20px,2.6vw,27px); }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-cat,.rj-a-cat,.pn-a-cat) {
font-size:clamp(11px,1.3vw,14px);
padding:3px 10px;
margin:0 0 6px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-why,.rj-a-why,.pn-a-why) {
font-size:clamp(13px,1.6vw,17px);
line-height:1.55;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-next,.rj-next,.pn-next) {
font-size:clamp(14px,1.7vw,18px);
padding:10px 22px;
box-shadow:0 4px 0 #bd6c17,0 6px 12px rgba(0,0,0,.24);
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on .pn-sub { font-size:clamp(12px,1.5vw,16px); padding:9px 16px; }
}
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on { padding:6px 10px; row-gap:3px; }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-head,.rj-a-head,.pn-a-head) { font-size:14px; margin:0 0 4px; }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-head,.rj-a-head,.pn-a-head) b { font-size:19px; }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-cat,.rj-a-cat,.pn-a-cat) { font-size:11px; margin:0 0 4px; }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-a-why,.rj-a-why,.pn-a-why) { font-size:13px; line-height:1.5; }
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on :is(.kt-next,.rj-next,.pn-next) { font-size:14px; padding:8px 18px; }
}
/* ============================================================
修行アプリ間の相互リンク（設定画面のみ。2026-09-03・チケット#16）
ボタンは1枚絵（/assets/images/ninja/nk-link-*.webp・960x380）。
アプリ名と説明は絵に入っているので、読み上げは ![]()
の alt が担当する。
6アプリ共通なのでスタイルはここ1箇所だけに書く（アプリ個別CSSに複製しない）。
============================================================ */
/* 設定（といかた・なんいど・スタート）のカードとは別の区画にする。
カードの中に入れると「これも設定の一部」に見えるため、カードの外＝紙面の上に置く。
区切りは両側に罫を引いた見出しだけで、この区画に下地は敷かない。 */
.nk-links {
margin:24px auto 0;
width:min(100%,900px);
padding:0 18px;
}
.nk-links-title {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin:0 0 12px;
font-size:14px;
font-weight:800;
color:#c7d5d8;
text-align:center;
letter-spacing:.04em;
}
.nk-links-title::before,
.nk-links-title::after {
content:"";
flex:1;
max-width:90px;
height:1px;
background:currentColor;
opacity:.4;
}
/* さんすうは紙面が濃紺。見出しだけ紙面に合う明るさに振る */
.ninja-space .nk-links-title { color:#9fb3d9; }
/* 幅のある画面は3列。全部並べても絵の比率のまま250px前後に収まる。
スマホは3列にすると絵の中の文字が読めなくなるので1列のまま（そのぶん縦に伸びる）。 */
.nk-links-list {
display:grid;
grid-template-columns:1fr;
gap:12px;
width:min(100%,420px);
margin-inline:auto;
}
@media (min-width:768px) {
.nk-links-list {
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px 14px;
width:100%;
}
/* 3列で割り切れず1枚だけ余ったら、左端ではなく真ん中の列に置く（7本になった 2026-09-16） */
.nk-link:last-child:nth-child(3n+1) { grid-column:2; }
}
.nk-link {
display:block;
border-radius:14px;
line-height:0;
text-decoration:none;
transition:translate .12s ease, filter .12s ease;
}
.nk-link:hover { translate:0 -2px; filter:brightness(1.05); }
/* いま開いている修行。押せるままにしておくが、「ここにいる」と分かるよう落とす */
.nk-link[aria-current] { opacity:.5; }
.nk-link[aria-current]:hover { translate:0 0; filter:none; }
.nk-link:active { translate:0 1px; filter:brightness(.97); }
.nk-link:focus-visible { outline:3px solid var(--nk-accent,#c0634c); outline-offset:3px; }
.nk-link-img { display:block; width:100%; height:auto; }
@media (prefers-reduced-motion:reduce) {
.nk-link { transition:none; }
.nk-link:hover, .nk-link:active { translate:0 0; }
}
@media (max-width:767px) {
.nk-links { margin-top:20px; }
.nk-links-list { gap:10px; }
}
/* ============================================================
2択の盤面は「問題を上・こたえを下」に積む（2026-09-09決定）
------------------------------------------------------------
左右2カラムだと、右半分に短いボタンが2つ浮いて余白ばかりが目立ち、
「文を読む → えらぶ」の流れも左右に折れる。2択のときだけ縦に積む。
対象：カタカナ修行「どっちで かく？」「にた字 みつけ」、
ローマ字修行「ふたつの 書きかた」（3択・4択は2カラムのまま）。
寝かせた画面（max-height:500px）は高さが足りないので対象外＝2カラムのまま。
============================================================ */
@media (min-width:768px) and (min-height:501px) {
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-choices,.rj-choices,.pn-choices).is-two) {
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto auto auto auto;
/* 縦に積むぶん問題の箱は低くする。字の大きさもここから決める（px直書きしない） */
--nk-qh-stack:clamp(150px,24svh,240px);
}
/* 子要素は明示指定を持っているので、1カラム側でも1つずつ置きなおす */
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-choices,.rj-choices,.pn-choices).is-two)
>:is(.kt-bar,.rj-bar,.pn-bar) { grid-column:1; grid-row:1; }
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-choices,.rj-choices,.pn-choices).is-two)
>:is(.kt-q,.rj-q,.pn-q) {
grid-column:1;
grid-row:2;
min-height:var(--nk-qh-stack);
}
/* 1字だけの問題（にた字 みつけ・ふたつの かきかた）は --nk-qh（312px）から
字の大きさを取ると 118px になり、全幅の箱では大きすぎる。低くした箱に合わせる。 */
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-choices,.rj-choices,.pn-choices).is-two)
:is(.kt-q-word,.rj-q-word,.pn-q-word).is-big {
font-size:calc(var(--nk-qh-stack) * .30);
}
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz)
>:is(.kt-choices,.rj-choices,.pn-choices).is-two {
grid-column:1;
grid-row:3;
min-height:0;
align-content:start;
}
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-choices,.rj-choices,.pn-choices).is-two)
>:is(.kt-answer,.rj-answer,.pn-answer) { grid-column:1; grid-row:3; }
/* こたえあわせは、問題と選択肢の2行ぶんに重ねる（選択肢は visibility:hidden で場所だけ残る） */
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-choices,.rj-choices,.pn-choices).is-two)
>:is(.kt-answer,.rj-answer,.pn-answer).is-on { grid-column:1; grid-row:2 / 4; }
.ninja-kids :is(.kt-quiz,.rj-quiz,.pn-quiz):has(:is(.kt-choices,.rj-choices,.pn-choices).is-two)
>:is(.kt-back,.rj-back,.pn-back) { grid-column:1; grid-row:4; }
}
/* ============================================================
選択肢の地紋（2026-09-09）
------------------------------------------------------------
白いだけの札はそっけないので、和柄をごく薄く敷く。
**1〜4で柄を変える**ので「上から2つめの青海波」のように口でも指せる。
濃さはPNGに焼き込んである（線 #281c10・アルファ40/255）ので、
CSSは重ねるだけ。色を変えたいときはタイルを作り直す
（生成スクリプトは Pillow・4倍で描いて縮小・タイルの外側まで描いて継ぎ目を消す）。
::before は忍具のアイコン、::after は選択中の印で埋まっているので、
擬似要素ではなく背景のレイヤーとして敷く（中身より下に来るのもこちらが確実）。
============================================================ */
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice){
--nk-opt-pattern:url('/assets/images/ninja/patterns/opt-shippou.png');
background:var(--nk-opt-pattern) center/56px 56px repeat, #fff;
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(2) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(2){
--nk-opt-pattern:url('/assets/images/ninja/patterns/opt-seigaiha.png');
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(3) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(3){
--nk-opt-pattern:url('/assets/images/ninja/patterns/opt-asanoha.png');
}
.ninja-kids :is(.tk-opt,.kj-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(4) ,.ninja-kids :is(.tk-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):nth-child(4){
--nk-opt-pattern:url('/assets/images/ninja/patterns/opt-uroko.png');
}
/* スマホ縦の正誤表示は、忍者を上・答えを下にして読みやすくする。 */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng) ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng){
flex-direction:column; flex-wrap:nowrap; gap:14px; text-align:center;
overflow-wrap:anywhere;
}
.ninja-kids :is(.tk-feedback,.kj-feedback):is(.is-ok,.is-ng)::before ,.ninja-kids :is(.tk-feedback,.kk-feedback):is(.is-ok,.is-ng)::before{
width:min(58vw,210px); height:auto; max-height:55%; aspect-ratio:1;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on {
grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto;
justify-items:center; text-align:center; row-gap:10px;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on::before {
grid-column:1; grid-row:1; width:clamp(110px,20svh,160px); height:auto;
margin:0; justify-self:center;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on>.nk-a-body {
grid-column:1; grid-row:2; width:100%;
}
.ninja-kids :is(.kt-answer,.rj-answer,.pn-answer).is-on>:is(.kt-next,.rj-next,.pn-a-btns) {
grid-column:1; grid-row:3;
}
}
/* ============================================================
かく しゅぎょう（かんじ修行・2026-09-12）
盤面は忍者スキンの上に載るので、問題エリアの文字は白系にそろえる。
大きさは他の修行と同じく --nk-fs-* から取り、px を直書きしない。
============================================================ */
.ninja-kids .kj-ask-kaki ,.ninja-kids .kk-ask-kaki{ padding:10px 14px; }
/* かくモードの問題エリアは「よみ＋伏せ字」の2行しかなく、下が大きく空いていた。
ほかのモードより大きい係数を当てて、問題エリアいっぱいに使う（2026-09-12）。 */
/* 字の大きさは「問題エリアの幅 ÷ 字数」で決める（2026-09-12）。
よみは1〜7文字とばらつくので、px を決め打ちにすると長いよみが2行に折れ、
最後の1文字だけ次の行に残る。字数は js が --kj-n で渡す。
1行目は cqw に対応していないブラウザ用の控え。 */
.ninja-kids .kj-ask-kaki ,.ninja-kids .kk-ask-kaki{ container-type:inline-size; padding-inline:clamp(14px,3.5%,28px); }
.ninja-kids .kj-kaki-yomi ,.ninja-kids .kk-kaki-yomi{ font-size:clamp(22px,calc(var(--nk-qh) * .160),56px); color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.22); }
.ninja-kids .kj-kaki-yomi ,.ninja-kids .kk-kaki-yomi{ font-size:min(calc(var(--nk-qh) * .235), calc(92cqw / var(--kj-n,4))); }
.ninja-kids .kj-kaki-blank ,.ninja-kids .kk-kaki-blank{ font-size:clamp(18px,calc(var(--nk-qh) * .120),42px); color:#cddadc; }
.ninja-kids .kj-kaki-blank ,.ninja-kids .kk-kaki-blank{ font-size:min(calc(var(--nk-qh) * .135), calc(58cqw / var(--kj-n,4))); }
/* ○＝これから書く字。暗い問題パネルの上なので、赤より明るいオレンジのほうが読める（2026-09-12） */
.ninja-kids .kj-kaki-target ,.ninja-kids .kk-kaki-target{
color:#ffb15c;
border-bottom:.1em solid currentColor;
padding-bottom:.06em;
}
/* 正解の字は 教科書体風（Klee One）にする（2026-09-12）。
丸ゴシックだと とめ・はね・はらい が分からず、見くらべる意味が薄い。
明朝は「ウロコ」が印刷用の飾りで手書きには無いので、教科書体を先に置き、
無い環境では OS の明朝に落とす。 */
.ninja-kids .kj-kaki-answer ,.ninja-kids .kk-kaki-answer{
font-size:var(--nk-fs-word);
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.22);
font-family:'Klee One','Yu Mincho','YuMincho','Hiragino Mincho ProN','Noto Serif JP',serif;
font-weight:600;
}
.ninja-kids .kj-kaki-note ,.ninja-kids .kk-kaki-note{ font-size:var(--nk-fs-opt); color:#cddadc; }
.ninja-kids .kj-kaki-check ,.ninja-kids .kk-kaki-check{ font-size:var(--nk-fs-label); color:#ffd9a0; }
/* 手書きパッドは巻物の紙に見立てる（選択肢と同じ枠の作法） */
.ninja-kids .kj-pad ,.ninja-kids .kk-pad{
border:2px solid #d4bd92;
border-radius:7px;
background-color:#fffdf6;
box-shadow:0 3px 0 #c5a876,0 10px 22px rgba(62,39,20,.14);
}
.ninja-kids :is(.kj-tool,.kj-mark) ,.ninja-kids :is(.kk-tool,.kk-mark){
min-height:var(--nk-tap);
color:#17272e;
border:2px solid color-mix(in srgb,var(--nk-accent) 45%,#fff);
border-radius:7px;
background:#fff;
box-shadow:0 3px 0 #c5a876;
}
.ninja-kids :is(.kj-tool,.kj-mark):hover:not(:disabled) ,.ninja-kids :is(.kk-tool,.kk-mark):hover:not(:disabled){
translate:0 -2px;
border-color:var(--nk-accent);
}
.ninja-kids .kj-judge-btn ,.ninja-kids .kk-judge-btn{
border-left:6px solid var(--nk-accent);
background:linear-gradient(#fff,color-mix(in srgb,var(--nk-accent) 14%,#fff));
}
.ninja-kids .kj-tool ,.ninja-kids .kk-tool{ flex:1; }
.ninja-kids .kj-mark-ok ,.ninja-kids .kk-mark-ok{ border-color:#2f7d55; }
.ninja-kids .kj-mark-ng ,.ninja-kids .kk-mark-ng{ border-color:#c0503b; }
/* 寝かせた画面はタップ領域の下限（--nk-tap 46px）より詰める。
パッドを残すことを優先し、ボタンは中身なりの高さにする。 */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.kj-tool,.kj-mark) ,.ninja-kids :is(.kk-tool,.kk-mark){ min-height:0; }
}
/* 1カラムの段は問題エリアを詰めるぶん、--nk-fs-word では正解の字が小さくなりすぎる。
見くらべるのが目的なので、かくモードの正解だけ画面の高さから決める（2026-09-12）。 */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids .kj-kaki-answer ,.ninja-kids .kk-kaki-answer{ font-size:clamp(40px,10svh,76px); }
}
@media (min-width:768px) and (max-width:1179px) and (orientation:portrait) {
.ninja-kids .kj-kaki-answer ,.ninja-kids .kk-kaki-answer{ font-size:clamp(56px,9svh,110px); }
}
/* ============================================================
かく しゅぎょう（ローマ字修行・2026-09-12）
手書きの紙は巻物に見立て、ボタンは選択肢と同じ作法にそろえる。
============================================================ */
.ninja-kids .rj-strip {
border:2px solid #d4bd92;
border-radius:7px;
background-color:#fffdf6;
box-shadow:0 3px 0 #c5a876,0 10px 22px rgba(62,39,20,.14);
}
.ninja-kids .rj-model { color:#0f5f4a; font-size:var(--nk-fs-opt); }
.ninja-kids :is(.rj-tool,.rj-mark) {
min-height:var(--nk-tap);
color:#17272e;
border:2px solid color-mix(in srgb,var(--nk-accent) 45%,#fff);
border-radius:7px;
background:#fff;
box-shadow:0 3px 0 #c5a876;
}
.ninja-kids :is(.rj-tool,.rj-mark):hover:not(:disabled) {
translate:0 -2px;
border-color:var(--nk-accent);
}
.ninja-kids .rj-judge {
border-left:6px solid var(--nk-accent);
background:linear-gradient(#fff,color-mix(in srgb,var(--nk-accent) 14%,#fff));
}
.ninja-kids .rj-mark-ok { border-color:#2f7d55; }
.ninja-kids .rj-mark-ng { border-color:#c0503b; }
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.rj-tool,.rj-mark) { min-height:0; }
}
/* しゅぎょうが4つのアプリ（ローマ字）のメニューを1画面に収める（2026-09-12 実測）。
3つ前提の余白のままだと、スマホ縦で 648px・寝かせた画面で 458px になり はみ出していた。 */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes):has(>:nth-child(4)) { gap:7px; }
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes):has(>:nth-child(4))>:is(.kt-mode,.rj-mode,.pn-mode) {
min-height:0;
padding:9px 14px;
}
}
/* 寝かせた画面は縦に積みきれないので2列にする。
札が低くなるので、絵も札に収まる大きさまで落とす（padding-left は絵の大きさから決まる）。 */
@media (orientation:landscape) and (max-height:500px) {
/* 札が3つのアプリ（カタカナ・フォニックス）も、この段では札が124pxしかないのに
絵が154pxあり はみ出していた（2026-09-12 実測。以前からの不具合）。 */
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes) {
--nk-mode-img-h:74px;
--nk-mode-img-top:8px;
--nk-mode-t:17px;
--nk-mode-s:11.5px;
--nk-mode-pad:12px;
}
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes):has(>:nth-child(4)) {
--nk-mode-img-h:38px;
--nk-mode-pad:10px;
--nk-mode-t:15px;
--nk-mode-s:11px;
grid-template-columns:1fr 1fr;
gap:8px;
}
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes):has(>:nth-child(4))>:is(.kt-mode,.rj-mode,.pn-mode) {
min-height:0;
padding-block:7px;
padding-right:12px;
}
}
/* スマホを寝かせた画面（幅767px以下・高さ500px以下）は、札を縦に積むと
3つでも386pxになり1画面を割る（2026-09-12 実測。以前からの不具合）。
幅が768px以上なら横一列のレイアウトが効くので、ここは狭い画面だけに当てる。 */
@media (orientation:landscape) and (max-height:500px) and (max-width:767px) {
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes) {
grid-template-columns:1fr 1fr;
gap:8px;
}
.ninja-kids :is(.kt-modes,.rj-modes,.pn-modes)>:is(.kt-mode,.rj-mode,.pn-mode) {
min-height:0;
padding:8px 12px;
}
}
/* けしゴムのアイコン（かんじ・ローマ字の かくしゅぎょう。2026-09-12）。
巻物の紙に重ねるので、選択肢と同じ枠の作法にそろえる。
--nk-tap の下限は当てない（40px角のアイコンとして置くため）。 */
.ninja-kids :is(.kj-eraser,.rj-eraser,.kt-eraser) {
min-height:0;
color:#5b6b70;
border:2px solid color-mix(in srgb,var(--nk-accent) 45%,#fff);
border-radius:8px;
background:#fff;
box-shadow:0 2px 0 #c5a876;
}
.ninja-kids :is(.kj-eraser,.rj-eraser,.kt-eraser):hover {
translate:0 -1px;
border-color:var(--nk-accent);
color:var(--nk-accent-dark,#17272e);
}
/* 寝かせた画面は紙そのものが小さいので、けしゴムも小さくする */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.kj-eraser,.rj-eraser,.kt-eraser) { width:30px; height:30px; top:4px; right:4px; }
.ninja-kids :is(.kj-eraser,.rj-eraser,.kt-eraser) svg { width:17px; height:17px; }
}
/* ============================================================
かく しゅぎょう（カタカナ修行・2026-09-14）
手書きの紙は巻物に見立て、ボタンは選択肢と同じ作法にそろえる。
ローマ字修行の かくしゅぎょうと同じ。
============================================================ */
.ninja-kids .kt-pad {
border:2px solid #d4bd92;
border-radius:7px;
background-color:#fffdf6;
box-shadow:0 3px 0 #c5a876,0 10px 22px rgba(62,39,20,.14);
}
.ninja-kids .kt-model { color:#0f5f4a; }
.ninja-kids :is(.kt-tool,.kt-mark) {
min-height:var(--nk-tap);
color:#17272e;
border:2px solid color-mix(in srgb,var(--nk-accent) 45%,#fff);
border-radius:7px;
background:#fff;
box-shadow:0 3px 0 #c5a876;
}
.ninja-kids :is(.kt-tool,.kt-mark):hover:not(:disabled) {
translate:0 -2px;
border-color:var(--nk-accent);
}
.ninja-kids .kt-judge {
border-left:6px solid var(--nk-accent);
background:linear-gradient(#fff,color-mix(in srgb,var(--nk-accent) 14%,#fff));
}
.ninja-kids .kt-mark-ok { border-color:#2f7d55; }
.ninja-kids .kt-mark-ng { border-color:#c0503b; }
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.kt-tool,.kt-mark) { min-height:0; }
}
/* かんじの3枚メニュー：スタートの位置を固定し、選択肢のボタンを縦にのばす（2026-09-22）。
箱の高さを3枚とも同じにして、スタートと もどるを下に置き、残りを選択肢で埋める。
高さは「画面の高さ − 箱より上の高さ」で決め、1画面に収まるようにする */
.ninja-kids.ninja-kanji .kj-menu.is-step{
display:flex; flex-direction:column;
height:clamp(360px, calc(100svh - 270px), 520px);
}
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-group{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; margin-bottom:0; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices{ flex:1 1 0; min-height:0; grid-auto-rows:1fr; align-content:stretch; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choice{ min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-start{ flex:none; }
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-back{ flex:none; }
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-back.is-placeholder{ visibility:hidden; }
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-kanji .kj-menu.is-step{ height:max(236px, calc(100svh - 124px)); }
/* 寝かせた画面は がっきの注記を出すと入らないので隠す */
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-menu-note{ display:none; }
}
/* といかたの3つは どの画面でも横に並べる（2026-09-22）。せまい画面では文字を折り返す */
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice{ padding-inline:8px; text-align:center; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice-label,
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice-note{ white-space:normal; text-align:center; word-break:keep-all; overflow-wrap:anywhere; }
/* のばしすぎると中身がスカスカになるので、選択肢の高さに上限をつけ、
あまった分は見出しごと上下に振り分けて真ん中に置く（2026-09-22）。スタートの位置は変わらない */
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-group{ justify-content:center; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices{ flex:0 1 auto; height:100%; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode{ max-height:190px; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-grade{ max-height:260px; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-term{ max-height:200px; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice-label{ font-size:clamp(15px,2.2vw,19px); line-height:1.4; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice-note{ font-size:12px; line-height:1.5; }
.ninja-kids.ninja-kanji .kj-menu.is-step,
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-group{ align-items:stretch; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices{ width:100%; }
.ninja-kids.ninja-kanji .kj-menu.is-step>.kj-start{ align-self:center; }
/* ============================================================
とけい・かけざんの2枚メニュー（2026-09-22。かんじの3枚メニューと同じ型）
箱の高さを そろえ、スタートと もどるを下に置き、選択肢で残りを埋める（上限つき）
============================================================ */
.ninja-kids.ninja-tokei .tk-menu.is-step,
.ninja-kids.ninja-kuku .kk-menu.is-step{
display:flex; flex-direction:column; align-items:stretch;
width:min(100%,1000px);
height:clamp(360px, calc(100svh - 270px), 520px);
}
@media (min-width:768px), (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-tokei .tk-menu.is-step,
.ninja-kids.ninja-kuku .kk-menu.is-step{ padding-inline:max(20px,calc((100% - 760px) / 2)); }
}
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-tokei .tk-menu.is-step,
.ninja-kids.ninja-kuku .kk-menu.is-step{ height:max(236px, calc(100svh - 124px)); }
}
.ninja-kids :is(.tk-menu-picked,.kk-menu-picked){
margin:0 0 12px; padding:6px 12px; border-radius:8px; text-align:center;
font-size:13px; font-weight:800; color:var(--nk-accent-dark,#8a4a12); background:rgba(255,255,255,.75);
}
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-group,
.ninja-kids.ninja-kuku .kk-menu.is-step>.kk-group{
flex:1 1 0; min-height:0; margin:0;
display:flex; flex-direction:column; justify-content:center; align-items:stretch;
}
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices,
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices{
flex:0 1 auto; height:100%; min-height:0; width:100%;
grid-auto-rows:1fr; align-content:stretch;
}
.ninja-kids.ninja-tokei .tk-menu.is-step>.tk-start,
.ninja-kids.ninja-kuku .kk-menu.is-step>.kk-start{
flex:none; align-self:center; width:min(100%,320px); margin:14px auto 0;
}
.ninja-kids.ninja-tokei .tk-menu.is-step>.tk-back,
.ninja-kids.ninja-kuku .kk-menu.is-step>.kk-back{ flex:none; margin:10px auto 0; }
.ninja-kids :is(.tk-back,.kk-back).is-placeholder{ visibility:hidden; }
/* 1枚目：といかた・もんだい は横に並べ、ボタンの中身は まん中に */
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode{ grid-template-columns:repeat(2,minmax(0,1fr)); max-height:190px; }
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode{ grid-template-columns:repeat(3,minmax(0,1fr)); max-height:190px; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode .tk-choice,
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode .kk-choice{
min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; padding-inline:8px; text-align:center;
}
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode :is(.tk-choice-label,.tk-choice-note),
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode :is(.kk-choice-label,.kk-choice-note){
white-space:normal; text-align:center; word-break:keep-all; overflow-wrap:anywhere;
}
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode .tk-choice-label,
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode .kk-choice-label{ font-size:clamp(15px,2.2vw,19px); line-height:1.4; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode .tk-choice-note,
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode .kk-choice-note{ font-size:12px; line-height:1.5; }
/* 2枚目（かけざん）：だん は 3×3 */
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-dan{ grid-template-columns:repeat(3,minmax(0,1fr)); max-height:280px; }
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-dan .kk-choice{ min-height:0; justify-content:center; }
/* 2枚目（とけい）：なんいど（左）と ふんの表示・見本の時計（右） */
.ninja-kids.ninja-tokei .tk-step-body{ flex:1 1 0; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; }
.ninja-kids.ninja-tokei .tk-step-body>.tk-group{ height:100%; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level{ max-height:330px; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level .tk-choice{ min-height:0; align-content:center; }
.ninja-kids.ninja-tokei .tk-step-side{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.ninja-kids.ninja-tokei .tk-step-side .tk-toggle,
.ninja-kids.ninja-tokei .tk-step-side .tk-preview{ margin:0; }
/* せまい画面・寝かせた画面は、見本の時計を隠して ふんの表示だけ下に置く */
@media (max-width:767px), (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-tokei .tk-step-body{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:8px; }
.ninja-kids.ninja-tokei .tk-step-side .tk-preview{ display:none; }
}
/* なんいど は どの画面でも 2列3段（ペアの行だけ高くなって ほかの段が つぶれるため）。
手裏剣はラベルの上。やさしい→むずかしい は 左→右・上→下 で読める */
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-pair{ display:contents; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level .tk-choice{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:2px; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level .tk-level{ grid-column:1; grid-row:1; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level .tk-choice-label{ grid-column:1; grid-row:2; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level .tk-choice-note{ grid-column:1; grid-row:3; }
/* 寝かせた画面の なんいど は3列2段（2列3段だと箱に入らない。実測） */
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level .tk-choice-note{ display:none; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-level .tk-choice{ padding-block:4px; }
}
/* かけざんは ヒーローが かんじ・とけい より高いので、幅のある画面では そのぶん箱を低くする */
@media (min-width:768px) and (min-height:501px) {
.ninja-kids.ninja-kuku .kk-menu.is-step{ height:clamp(360px, calc(100svh - 300px), 520px); }
}
/* かんじの といかたカードの絵。絵のあるカードは そのぶん高さの上限を上げる */
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode:has(.kj-choice-img){ max-height:300px; }
.ninja-kids.ninja-kanji .kj-choice-img{
display:block; flex:1 1 0; min-height:0; width:100%; max-height:150px;
object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));
}
/* 寝かせたスマホは高さが足りず絵が30pxほどに潰れるので出さない */
@media (orientation:landscape) and (max-height:380px) {
.ninja-kids.ninja-kanji .kj-choice-img{ display:none; }
}
/* 絵の大きさは3枚でそろえる（説明文の行数で絵が縮まないよう、カードの高さに対する割合で決める） */
.ninja-kids.ninja-kanji .kj-choice-img{ flex:none; height:clamp(40px,46%,150px); max-height:none; }
/* せまいスマホは文字が何行にも折り返すので、絵の割合を下げる */
@media (max-width:400px) {
.ninja-kids.ninja-kanji .kj-choice-img{ height:clamp(40px,30%,150px); }
}
/* 押したら次へ進む画面では、スタートは場所だけ取って見せない（2026-09-22） */
.ninja-kids :is(.kj-start,.tk-start,.kk-start).is-placeholder{ visibility:hidden; }
/* 360px級のスマホは といかたカードが縦に長い文字で埋まるので、絵をさらに小さく */
@media (max-width:380px) {
.ninja-kids.ninja-kanji .kj-choice-img{ height:clamp(36px,22%,150px); }
}
/* スタートの無い画面は場所も取らない。箱の高さは同じなので、カードが箱の真ん中に来る */
.ninja-kids :is(.kj-start,.tk-start,.kk-start,.kj-back,.tk-back,.kk-back).is-placeholder{ display:none; }
/* ============================================================
修行アプリの「選ぶカード」に地紋と色をしく（2026-09-22）
対象：かんじ・とけい・かけざんのメニューのカード全部、カタカナ・ローマ字・フォニックスのモード札。
地紋は こたえの選択肢と同じタイル（opt-*.png）を2枚重ねて濃くし、七宝→青海波→麻の葉 を1枚ずつくり返す。
地は修行の色でうっすら塗り、下へ濃く。選んだカードはもう一段濃く。
じゅけんとっくん（紺地に金）と さんすう（宇宙の板の画像）は対象外
============================================================ */
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode){
--nk-card-pattern:url('/assets/images/ninja/patterns/opt-shippou.png');
background:
linear-gradient(180deg,color-mix(in srgb,var(--nk-accent) 7%,transparent) 0%,color-mix(in srgb,var(--nk-accent) 26%,transparent) 100%),
var(--nk-card-pattern) center/64px 64px repeat,
var(--nk-card-pattern) center/64px 64px repeat,
#fffdf8;
}
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode):nth-child(3n+2){
--nk-card-pattern:url('/assets/images/ninja/patterns/opt-seigaiha.png');
}
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode):nth-child(3n){
--nk-card-pattern:url('/assets/images/ninja/patterns/opt-asanoha.png');
}
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice).is-on{
background:
linear-gradient(180deg,color-mix(in srgb,var(--nk-accent) 16%,transparent) 0%,color-mix(in srgb,var(--nk-accent) 40%,transparent) 100%),
var(--nk-card-pattern) center/64px 64px repeat,
var(--nk-card-pattern) center/64px 64px repeat,
#fff;
}
/* 地紋の上でも読めるよう、カードの文字に白いふちをつける */
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode) :is(.kj-choice-label,.kj-choice-note,.tk-choice-label,.tk-choice-note,.kk-choice-label,.kk-choice-note,.kt-mode-t,.kt-mode-s,.rj-mode-t,.rj-mode-s,.pn-mode-t,.pn-mode-s){
text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff;
}
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode) :is(.kj-choice-note,.tk-choice-note,.kk-choice-note,.kt-mode-s,.rj-mode-s,.pn-mode-s){ color:#5f5044; }
/* ============================================================
選ぶカードの柄と枠を控えめにする（2026-09-23）
柄が強すぎると言われたので、ふだんは「薄い地紋＋赤茶の細線と淡い金線の二重枠」だけにし、
ホバーで金線を少し濃く、選んだときは枠全体を修行の色にする（2026-09-23 左端だけの太線から変更）。
地紋は1枚にし、上に地の色を重ねて薄める。じゅけんとっくんは対象外のまま
============================================================ */
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode){
--nk-card-line:color-mix(in srgb,#8b4a36 45%,#fff);
--nk-card-gold:rgba(208,170,92,.45);
border:1px solid var(--nk-card-line);
background:
linear-gradient(180deg,color-mix(in srgb,var(--nk-accent) 10%,transparent) 0%,color-mix(in srgb,var(--nk-accent) 22%,transparent) 100%),
linear-gradient(rgba(255,253,248,.62),rgba(255,253,248,.62)),
var(--nk-card-pattern) center/64px 64px repeat,
#fffdf8;
box-shadow:
inset 0 0 0 3px #fffdf8,
inset 0 0 0 4px var(--nk-card-gold),
0 3px 0 #ddd2bf;
transition:box-shadow .15s, translate .15s;
}
/* マウスをのせたときも、選んだときと同じ見た目にする（2026-09-23）。✓は選んだときだけ。
:hover はマウスのある端末だけ（2026-09-24）。スマホはタップ後も :hover が残るため、
押していないカードが選ばれて見え、スタートが押せない理由が分からなくなっていた */
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode).is-on{
--nk-card-gold:rgba(200,156,64,.85);
border-color:var(--nk-accent);
background:
linear-gradient(180deg,color-mix(in srgb,var(--nk-accent) 18%,transparent) 0%,color-mix(in srgb,var(--nk-accent) 34%,transparent) 100%),
linear-gradient(rgba(255,253,248,.55),rgba(255,253,248,.55)),
var(--nk-card-pattern) center/64px 64px repeat,
#fffdf8;
box-shadow:
inset 0 0 0 2px var(--nk-accent),
inset 0 0 0 4px #fffdf8,
inset 0 0 0 5px var(--nk-card-gold),
0 3px 0 color-mix(in srgb,var(--nk-accent) 30%,#ddd2bf);
}
@media (hover:hover) {
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode):hover{
--nk-card-gold:rgba(200,156,64,.85);
border-color:var(--nk-accent);
background:
linear-gradient(180deg,color-mix(in srgb,var(--nk-accent) 18%,transparent) 0%,color-mix(in srgb,var(--nk-accent) 34%,transparent) 100%),
linear-gradient(rgba(255,253,248,.55),rgba(255,253,248,.55)),
var(--nk-card-pattern) center/64px 64px repeat,
#fffdf8;
box-shadow:
inset 0 0 0 2px var(--nk-accent),
inset 0 0 0 4px #fffdf8,
inset 0 0 0 5px var(--nk-card-gold),
0 3px 0 color-mix(in srgb,var(--nk-accent) 30%,#ddd2bf);
}
}
@media (prefers-reduced-motion:reduce) {
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode):hover{ translate:none; }
}
/* スマホ（縦）は といかたカードを横に3枚ならべず、1枚1行で縦に積む（2026-09-23）。
せまい幅に3枚だと文字が1〜2字ずつ折り返して読みにくいため。
カードの中は「絵を左・文字を右」の横並びにし、文字は左寄せ */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids:is(.ninja-kanji,.ninja-tokei,.ninja-kuku) :is(.kj-menu.is-step .kj-choices-mode,.tk-menu.is-step .tk-choices-mode,.kk-menu.is-step .kk-choices-mode){
grid-template-columns:1fr; grid-auto-rows:auto; align-content:center; height:auto; max-height:none;
}
.ninja-kids:is(.ninja-kanji,.ninja-tokei,.ninja-kuku) :is(.kj-menu.is-step .kj-choices-mode .kj-choice,.tk-menu.is-step .tk-choices-mode .tk-choice,.kk-menu.is-step .kk-choices-mode .kk-choice){
flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
padding:8px 30px 8px 16px; text-align:left;
}
.ninja-kids:is(.ninja-kanji,.ninja-tokei,.ninja-kuku) :is(.kj-menu.is-step .kj-choices-mode,.tk-menu.is-step .tk-choices-mode,.kk-menu.is-step .kk-choices-mode) :is(.kj-choice-label,.kj-choice-note,.tk-choice-label,.tk-choice-note,.kk-choice-label,.kk-choice-note){
text-align:left;
}
/* 絵と文字を横に並べるため、文字は右側で縦に積む */
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice:has(.kj-choice-img){
display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
align-content:center; column-gap:12px; row-gap:2px;
}
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice-img{
grid-row:1 / 3; width:auto; height:clamp(52px,11svh,84px); aspect-ratio:1; align-self:center;
}
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice-label{ align-self:end; }
.ninja-kids.ninja-kanji .kj-menu.is-step .kj-choices-mode .kj-choice-note{ align-self:start; }
}
/* こたえの選択肢の前の忍具アイコンは全部けし、文字は中央にそろえる（2026-09-23）。
古いルールがあちこちで ::before を戻しているので、ここは !important で止める */
.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice)::before{
content:none!important; display:none!important;
}
.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice){
justify-content:center!important; text-align:center!important;
}
/* かけざんの もんだいカードにも絵を入れる（2026-09-23。かんじの といかたカードと同じ型） */
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode:has(.kk-choice-img){ max-height:300px; }
.ninja-kids.ninja-kuku .kk-choice-img{
display:block; flex:none; min-height:0; width:100%; height:clamp(40px,46%,150px);
object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));
}
@media (max-width:400px) {
.ninja-kids.ninja-kuku .kk-choice-img{ height:clamp(40px,30%,150px); }
}
@media (orientation:landscape) and (max-height:380px) {
.ninja-kids.ninja-kuku .kk-choice-img{ display:none; }
}
/* スマホ縦は1枚1行。絵を左・文字を右に置く */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode .kk-choice:has(.kk-choice-img){
display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
align-content:center; column-gap:12px; row-gap:2px;
}
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode .kk-choice-img{
grid-row:1 / 3; width:auto; height:clamp(52px,11svh,84px); aspect-ratio:1; align-self:center;
}
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode .kk-choice-label{ align-self:end; }
.ninja-kids.ninja-kuku .kk-menu.is-step .kk-choices-mode .kk-choice-note{ align-self:start; }
}
/* スタートのある画面は、カードを押すまでスタートを押せない（2026-09-23） */
.ninja-kids :is(.kj-start,.tk-start,.kk-start):disabled{
opacity:.45; filter:grayscale(.5); cursor:not-allowed; translate:none; box-shadow:none;
}
/* マウスをのせたときの文字色も、選んだときと同じにする（2026-09-23） */
@media (hover:hover) {
.ninja-kids :is(.kj-menu .kj-choice:not(.is-jukken),.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode):hover :is(.kj-choice-label,.tk-choice-label,.kk-choice-label,.kt-choice-label){
color:var(--nk-accent-dark);
}
}
/* こたえの選択肢も、マウスをのせたら枠全体を修行の色にする（2026-09-23） */
@media (hover:hover) {
.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):hover:not(:disabled){
border-color:var(--nk-accent);
box-shadow:inset 0 0 0 3px var(--nk-accent), 0 6px 0 color-mix(in srgb,var(--nk-accent) 45%,#c7bca9);
}
}
/* ============================================================
さんすう うちゅうたんけん：もんだい盤（2026-09-23）
・選択肢の前の天体アイコンはけす
・選択肢は左だけ太い線をやめ、細線＋内側の淡い線の二重枠にする
・もんだいの枠は太めの二重枠＋うすい光で目立たせる
・2カラムの段では、もんだいの枠と こたえの枠の高さをそろえる
============================================================ */
body.ninja-space .sa-options .sa-opt::before{ content:none; display:none; }
body.ninja-space .sa-options .sa-opt:not(.is-correct):not(.is-wrong){
border:2px solid #b7a3f2;
border-image:none;
border-radius:12px;
background:linear-gradient(180deg,#fbfaff,#f1edff);
box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px #dcd2ff, 0 3px 0 #c4b3f3;
}
@media (hover:hover) {
body.ninja-space .sa-options .sa-opt:not(:disabled):hover{
translate:0 -2px;
border-color:var(--sa-purple,#7b5cf0);
background:linear-gradient(180deg,#f6f2ff,#e6ddff);
box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 5px #b9a4ff, 0 5px 0 #a992f0;
}
}
body.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem{
border:3px solid #8a6cf0;
border-radius:18px;
background:linear-gradient(145deg,#fff,#f1ecff);
box-shadow:
inset 0 0 0 4px #fff,
inset 0 0 0 6px #cbbcff,
0 0 0 4px rgba(138,108,240,.18),
0 10px 24px rgba(64,42,125,.18);
}
/* 2カラムの段（PC・タブレット横・寝かせたスマホ）：もんだいの枠と こたえの枠を同じ行に置いて高さをそろえる */
@media (min-width:1180px), (min-width:768px) and (orientation:landscape), (orientation:landscape) and (max-height:500px) {
body.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-question-text{ grid-column:1; grid-row:1; align-self:end; }
body.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem{ grid-column:1; grid-row:2; align-self:stretch; margin:0; }
body.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-options{
grid-column:2; grid-row:2; align-self:stretch; margin:0;
grid-auto-rows:1fr; align-content:stretch;
}
body.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-options .sa-opt{ min-height:0; padding-block:8px; }
}
/* 問いかけ（こたえは どれ? など）は もんだいの枠の中の上に置く（2026-09-23）。
枠の中は式の並び（flex）なので、じゃましないよう絶対配置にし、そのぶん上をあける */
body.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem.has-prompt{
position:relative;
padding-top:40px;
}
body.ninja-space .sa-problem-prompt{
position:absolute;
top:12px; left:0; right:0;
text-align:center;
font-size:15px;
font-weight:800;
line-height:1.4;
color:#6f58c9;
white-space:normal;
pointer-events:none;
}
body.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-question-text{
color:#4c3d8f;
font-size:16px;
}
@media (orientation:landscape) and (max-height:500px) {
body.ninja-space .sa-card:not(.sa-result):not(.sa-ref-card)>.sa-problem.has-prompt{ padding-top:30px; }
body.ninja-space .sa-problem-prompt{ top:6px; font-size:12px; }
}
/* とけいの しゅぎょうカードにも絵を入れる（2026-09-23。かんじ・かけざんと同じ型） */
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode:has(.tk-choice-img){ max-height:300px; }
.ninja-kids.ninja-tokei .tk-choice-img{
display:block; flex:none; min-height:0; width:100%; height:clamp(40px,46%,150px);
object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));
}
@media (max-width:400px) {
.ninja-kids.ninja-tokei .tk-choice-img{ height:clamp(40px,30%,150px); }
}
@media (orientation:landscape) and (max-height:380px) {
.ninja-kids.ninja-tokei .tk-choice-img{ display:none; }
}
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode .tk-choice:has(.tk-choice-img){
display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
align-content:center; column-gap:12px; row-gap:2px;
}
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode .tk-choice-img{
grid-row:1 / 3; width:auto; height:clamp(52px,11svh,84px); aspect-ratio:1; align-self:center;
}
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode .tk-choice-label{ align-self:end; }
.ninja-kids.ninja-tokei .tk-menu.is-step .tk-choices-mode .tk-choice-note{ align-self:start; }
}
/* 盤面（メニュー・プレイの ベージュの箱）にも二重の枠をつける（2026-09-23）。
外は修行の色を焦げ茶に寄せた太めの線、内側に淡い金線。カードの二重枠と同じ考え方で一段太く */
.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu,.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz){
border:3px solid color-mix(in srgb,var(--nk-accent) 45%,#5a3222);
box-shadow:
inset 0 0 0 4px var(--nk-board,#f4efe6),
inset 0 0 0 6px rgba(208,170,92,.75),
0 18px 44px rgba(0,0,0,.28);
}
/* とけいの絵は時計ごと描いてあって人物が小さく見えるので、かんじ・かけざんより一回り大きく出す（2026-09-23） */
.ninja-kids.ninja-tokei .tk-choice-img{ height:clamp(40px,54%,170px); }
@media (max-width:400px) {
.ninja-kids.ninja-tokei .tk-choice-img{ height:clamp(40px,34%,170px); }
}
/* ============================================================
盤面の忍具の絵（items スプライト）の大きさを全アプリでそろえる（2026-09-23）。
とけい・かんじだけ小さかった。絵は盤面の一番上、その下に えらんだ しゅぎょう を出す
（一度 下に移したが、上に戻した）
============================================================ */
@media (min-width:768px) and (min-height:501px) {
.ninja-kids.ninja-tokei .tk-menu{ padding-top:78px; }
.ninja-kids.ninja-tokei .tk-menu::before{ width:240px !important; height:62px !important; top:12px; }
}
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids:is(.ninja-tokei,.ninja-kanji) :is(.tk-menu,.kj-menu){ padding-top:62px !important; }
.ninja-kids:is(.ninja-tokei,.ninja-kanji) :is(.tk-menu,.kj-menu)::before{ width:180px !important; height:48px !important; top:8px !important; }
}
/* ============================================================
プレイ中の見出し（NinjaHead）：とけい修行の形を全修行アプリにそろえる（2026-09-23）
「第○問 / 全○問」「できた！ ○問」と、10こ の進みぐあいの目盛り
============================================================ */
.ninja-kids .nk-head{
display:flex; flex-wrap:wrap; gap:5px 12px; align-items:center; justify-content:flex-start;
padding:5px 12px; border-inline:4px solid #bda278; border-radius:8px;
background:#eee3ce; color:#173f5f; font-weight:800;
}
.ninja-kids .nk-head::after{ content:none; }
.ninja-kids .nk-head :is(.nk-head-count,.nk-head-score){ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.ninja-kids .nk-head .nk-head-score{ margin-left:auto; }
.ninja-kids .nk-head-icon{ width:28px; height:28px; object-fit:contain; flex:none; }
.ninja-kids .nk-head-icon.is-shuriken{ rotate:45deg; }
.ninja-kids .nk-progress-marks{ display:flex; justify-content:center; flex-basis:100%; gap:6px; }
.ninja-kids .nk-progress-marks i{ width:8px; height:5px; border-radius:3px; background:#cbbfa9; }
.ninja-kids .nk-progress-marks .is-done{ background:#173f5f; }
.ninja-kids .nk-progress-marks .is-current{ background:var(--nk-accent); }
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids .nk-head{ padding:3px 10px; gap:2px 10px; }
.ninja-kids .nk-head-icon{ width:20px; height:20px; }
}
/* ============================================================
修行アプリの ボタン・選択肢は「左だけ太い線」をやめ、ぐるりと同じ太さの二重枠にする（2026-09-23）。
外は今の枠色（せいかい・まちがい の色替えもそのまま効く）、内側に白と淡い線を重ねる
============================================================ */
.ninja-kids :is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice,
.kj-judge-btn,.kk-judge-btn,.kt-judge,.rj-judge,.pn-judge,
.kj-tool,.kk-tool,.kt-tool,.rj-tool,.pn-tool,.kj-mark,.kk-mark,.kt-mark,.rj-mark,.pn-mark){
border-left-width:2px !important;
border-left-style:solid;
box-shadow:
inset 0 0 0 3px rgba(255,255,255,.85),
inset 0 0 0 4px color-mix(in srgb,var(--nk-accent) 28%,#fff),
0 4px 0 color-mix(in srgb,var(--nk-accent) 32%,#cfc6b4);
}
/* 左だけ修行の色だった線を、ほかの3辺と同じ色にそろえる（せいかい・まちがい の色替えは そのまま） */
.ninja-kids :is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.is-correct):not(.is-wrong):not(:hover){
border-left-color:color-mix(in srgb,var(--nk-accent) 45%,#fff);
}
.ninja-kids :is(.kj-judge-btn,.kk-judge-btn,.kt-judge,.rj-judge,.pn-judge){
border-color:color-mix(in srgb,var(--nk-accent) 55%,#fff);
}
/* プレイ中も、見出しの一番上に えらんだ しゅぎょう を出す（メニューの表示と同じ見た目。2026-09-23） */
.ninja-kids :is(.nk-head,.tk-play-head) .nk-head-picked{
flex-basis:100%; order:-1;
margin:2px 0 2px; padding:5px 12px; border-radius:8px; text-align:center;
font-size:13px; font-weight:800; line-height:1.4;
color:var(--nk-accent-dark,#8a4a12); background:rgba(255,255,255,.8);
white-space:normal;
}
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids :is(.nk-head,.tk-play-head) .nk-head-picked{ padding:2px 10px; font-size:11px; }
}
/* かんじは盤面の高さを固定しているので、見出しに えらんだ しゅぎょう を足したぶん（約58px）高くする。
足さないと「← もんだいせんたくに もどる」が盤面の外に押し出されて見えなくなる。
1カラムに積む段（タブレット縦・寝かせたスマホ）は --nk-board-h が 0 なので当てない。
当てると盤面が 58px に つぶれ、問題も選択肢も見えなくなっていた（2026-09-27 修正） */
@media (min-width:1180px), (min-width:768px) and (max-width:1179px) and (orientation:landscape) and (min-height:501px) {
.ninja-kids.ninja-kanji .kj-play{
height:calc(var(--nk-board-h) + 58px);
min-height:calc(var(--nk-board-h) + 58px);
}
}
/* ============================================================
けっか画面も盤面（ベージュの箱＋二重枠）に入れる（2026-09-23）。
暗い地にそのまま文字とボタンが載っていて、文字が読みにくく ボタンが全幅に伸びていた
============================================================ */
.ninja-kids :is(.tk-result,.kj-result,.kk-result,.kt-result,.rj-result,.pn-result){
box-sizing:border-box;
padding:28px clamp(16px,4vw,40px) 24px;
border:3px solid color-mix(in srgb,var(--nk-accent) 45%,#5a3222);
border-radius:18px;
background:var(--nk-board,#f5f1e8);
box-shadow:
inset 0 0 0 4px var(--nk-board,#f5f1e8),
inset 0 0 0 6px rgba(208,170,92,.75),
0 18px 44px rgba(0,0,0,.28);
color:#2b2620;
text-align:center;
}
.ninja-kids :is(.tk-result,.kj-result,.kk-result) :is(.tk-result-score,.kj-result-score,.kk-result-score){ color:#2b2620; }
.ninja-kids :is(.tk-result,.kj-result,.kk-result) :is(.tk-result-msg,.kj-result-msg,.kk-result-msg){ color:#6b5e4f; }
.ninja-kids :is(.tk-result,.kj-result,.kk-result)>:is(.tk-start,.kj-start,.kk-start){
width:min(100%,320px); margin:18px auto 0; display:block;
}
.ninja-kids :is(.tk-result,.kj-result,.kk-result)>:is(.tk-back,.kj-back,.kk-back){
display:block; margin:14px auto 0; padding:8px 12px; color:#8a7d6c;
}
/* 見出し（第○問・できた！）の箱は 修行ごとの色にあわせる（2026-09-23。とけいの茶色に固定していた） */
.ninja-kids :is(.nk-head,.tk-play>.tk-play-head){
border-inline-color:color-mix(in srgb,var(--nk-accent) 70%,#fff);
background:color-mix(in srgb,var(--nk-accent) 14%,#fff);
color:var(--nk-accent-dark,#173f5f);
}
.ninja-kids :is(.nk-progress-marks,.tk-progress-marks) i{ background:color-mix(in srgb,var(--nk-accent) 22%,#ddd); }
.ninja-kids :is(.nk-progress-marks,.tk-progress-marks) .is-done{ background:var(--nk-accent-dark,#173f5f); }
.ninja-kids :is(.nk-progress-marks,.tk-progress-marks) .is-current{ background:var(--nk-accent); }
/* とけいは専用の指定（.ninja-tokei つき）が強いので、同じ強さで上書きする */
.ninja-kids.ninja-tokei .tk-play>.tk-play-head{
border-inline-color:color-mix(in srgb,var(--nk-accent) 70%,#fff);
background:color-mix(in srgb,var(--nk-accent) 14%,#fff);
color:var(--nk-accent-dark);
}
.ninja-kids.ninja-tokei .tk-progress-marks i{ background:color-mix(in srgb,var(--nk-accent) 22%,#ddd); }
.ninja-kids.ninja-tokei .tk-progress-marks .is-done{ background:var(--nk-accent-dark); }
.ninja-kids.ninja-tokei .tk-progress-marks .is-current{ background:var(--nk-accent); }
/* ============================================================
見出しを2段に分ける（2026-09-23）：
上＝えらんだ しゅぎょう の帯（修行の色で塗る）、下＝第○問・できた！・目盛り の箱
============================================================ */
.ninja-kids .nk-head,
.ninja-kids.ninja-tokei .tk-play>.tk-play-head.nk-head{
display:flex; flex-direction:column; align-items:stretch; gap:8px;
padding:0; border:0; border-radius:0; background:none;
}
.ninja-kids .nk-head .nk-head-bar{
display:flex; flex-wrap:wrap; gap:5px 12px; align-items:center;
padding:5px 12px; border-inline:4px solid color-mix(in srgb,var(--nk-accent) 70%,#fff); border-radius:8px;
background:color-mix(in srgb,var(--nk-accent) 14%,#fff); color:var(--nk-accent-dark);
font-weight:800;
}
.ninja-kids .nk-head .nk-head-bar :is(.nk-head-score,.tk-play-score){ margin-left:auto; }
.ninja-kids .nk-head .nk-head-bar :is(.tk-play-count,.tk-play-score){ display:flex; align-items:center; gap:6px; white-space:nowrap; }
/* えらんだ しゅぎょう の帯：修行の色で塗り、白い字（メニューの表示も同じにする） */
.ninja-kids :is(.nk-head,.tk-play-head) .nk-head-picked,
.ninja-kids :is(.kj-menu-picked,.tk-menu-picked,.kk-menu-picked){
flex-basis:auto; order:0;
margin:0; padding:6px 12px; border-radius:8px; text-align:center;
font-size:13px; font-weight:800; line-height:1.4;
color:#fff; background:var(--nk-accent);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.ninja-kids :is(.kj-menu-picked,.tk-menu-picked,.kk-menu-picked){ margin-bottom:12px; }
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids .nk-head{ gap:4px; }
.ninja-kids .nk-head .nk-head-bar{ padding:3px 10px; gap:2px 10px; }
}
.ninja-kids.ninja-kanji .kj-menu-picked{ color:#fff; background:var(--nk-accent); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
/* ○×の全面フィードバック：（）の説明は次の行に出す（JS側で \n を入れている。2026-09-23） */
.ninja-kids :is(.tk-feedback,.kj-feedback,.kk-feedback){ white-space:pre-line; }
/* スマホでも しゅぎょうの札に絵を出す（2026-09-24。カタカナ・ローマ字・フォニックス）。
かんじ・とけい・かけざんのスマホ表示と同じく「絵を左・文字を右」。
絵の大きさは画面の高さに合わせ、1画面に収まるよう svh で決める。
4枚のときの :has() 付きの指定（詳細度 0,4,0）に負けないよう、同じ詳細度で末尾に置く */
@media (max-width:767px) {
.ninja-kids:is(.ninja-katakana,.ninja-romaji,.ninja-phonics) :is(.kt-modes,.rj-modes,.pn-modes)>:is(.kt-mode,.rj-mode,.pn-mode) {
--nk-mode-img-h:clamp(48px,9svh,72px);
position:relative;
min-height:calc(var(--nk-mode-img-h) + 12px);
padding-left:calc(14px + var(--nk-mode-img-h) + 12px);
text-align:left;
}
.ninja-kids:is(.ninja-katakana,.ninja-romaji,.ninja-phonics) :is(.kt-modes,.rj-modes,.pn-modes)>:is(.kt-mode,.rj-mode,.pn-mode)::before {
content:'';
position:absolute;
left:12px;
top:50%;
width:var(--nk-mode-img-h);
height:var(--nk-mode-img-h);
translate:0 -50%;
background:var(--nk-mode-img) center/contain no-repeat;
pointer-events:none;
}
}
/* スマホ縦の しゅぎょう選択の盤面は、390x740 の見え方を基準にする（2026-09-24）。
盤面の下に「しゅぎょう いちらん」の見出しだけが見えていればよく、その下のカードは画面外でよい。
低いスマホでは盤面が縮められて中身がぎゅうぎゅうだったので、画面の高さから逆算して広げる。
上限 470px（基準の盤面の高さ）で止め、大きい端末では枠だけが間延びしないようにする */
@media (max-width:767px) and (orientation:portrait) {
.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu,.kt-menu,.rj-menu,.pn-menu) {
min-height:min(470px,calc(100svh - 224px));
}
}
/* 札が4枚あるカタカナ・ローマ字は、低いスマホ（高さ660px以下）だけ札の絵を小さくして見出しまで収める */
@media (max-width:767px) and (orientation:portrait) and (max-height:660px) {
.ninja-kids:is(.ninja-katakana,.ninja-romaji,.ninja-phonics) :is(.kt-modes,.rj-modes,.pn-modes)>:is(.kt-mode,.rj-mode,.pn-mode) {
--nk-mode-img-h:44px;
}
}
/* スマホ縦の しゅぎょう選択は、見出しとカードを上詰めにする（2026-09-24。フォニックスと同じ形）。
盤面を画面の高さに合わせて広げたぶん、上下中央に浮いてアイコンとの間に余白が目立っていた。
余った高さは盤面の下に回す。中央寄せの指定（:has 付き・詳細度 0,6,0 あり）に勝つよう body から書く */
@media (max-width:767px) and (orientation:portrait) {
body.ninja-kids:is(.ninja-tokei,.ninja-kanji,.ninja-kuku) :is(.tk-menu,.kj-menu,.kk-menu).is-step {
justify-content:flex-start;
}
body.ninja-kids:is(.ninja-tokei,.ninja-kanji,.ninja-kuku) :is(.tk-menu,.kj-menu,.kk-menu).is-step>:is(.tk-group,.kj-group,.kk-group):has(>:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode)) {
flex:0 0 auto; height:auto; display:block;
}
body.ninja-kids:is(.ninja-tokei,.ninja-kanji,.ninja-kuku) :is(.tk-menu,.kj-menu,.kk-menu).is-step :is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode):is(div,section) {
align-content:start; height:auto; max-height:none;
}
/* スタートのある画面は、スタートと もどる を盤面の下にそろえる（カードは上詰めのまま） */
body.ninja-kids:is(.ninja-tokei,.ninja-kanji,.ninja-kuku) :is(.tk-menu,.kj-menu,.kk-menu).is-step>:is(.tk-start,.kj-start,.kk-start):not(.is-placeholder) {
margin-top:auto;
}
}
/* 1枚目の画面の いちばん下に「← アプリいちらんに もどる」（2026-09-24。ヒーローの「アプリ一覧」ボタンから移した）。
盤面の最後に置いて、そこで しまった感じにする。PC は盤面の下端に寄せる */
.ninja-kids .nk-applist{
display:block; width:max-content; max-width:100%;
margin:auto auto 0; padding:14px 8px 0;
font-size:14px; font-weight:700; color:#7a6a58; text-decoration:none;
grid-column:1 / -1;
}
.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step>.nk-applist{ margin:auto auto 0; }
@media (hover:hover) {
.ninja-kids .nk-applist:hover{ color:var(--nk-accent-dark); text-decoration:underline; text-underline-offset:4px; }
}
/* スマホ縦の1枚目は、盤面の高さを中身に合わせる（とけいは縮み、フォニックスなどは リンクのぶん少し伸びる） */
@media (max-width:767px) and (orientation:portrait) {
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode)),
body.ninja-kids :is(.kt-menu,.rj-menu,.pn-menu) {
height:auto; min-height:0;
}
.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step>.nk-applist{ margin:4px auto 0; }
.ninja-kids .nk-applist{ margin-top:4px; }
}
/* スマホ縦の2枚目以降（とけいの なんいど・かんじの コース／がっき・かけざんの だん）に余白をとる（2026-09-24）。
盤面の高さが固定で、カードが詰め込まれて ぎゅうぎゅうだった。
高さは中身に合わせ、カードの間隔と高さを広げる。kanji.css の詰める指定（詳細度 0,4,1）に勝つよう body から書く */
@media (max-width:767px) and (orientation:portrait) {
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode))) {
height:auto; min-height:0;
}
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode)))>:is(.tk-group,.kj-group,.kk-group) {
flex:none; margin-bottom:0;
}
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode))) :is(.tk-choices,.kj-choices,.kk-choices) {
height:auto; max-height:none; flex:none; grid-auto-rows:auto; align-content:start; gap:10px;
}
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode))) :is(.tk-choice,.kj-choice,.kk-choice) {
min-height:64px; padding-block:10px;
}
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode)))>:is(.kj-menu-picked,.tk-menu-picked,.kk-menu-picked) {
margin-bottom:14px;
}
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode)))>:is(.tk-start,.kj-start,.kk-start) {
margin-top:18px;
}
}
@media (max-width:767px) and (orientation:portrait) {
/* とけいは なんいどを .tk-step-body で包んでいる。flex:1 1 0 のままだと高さ0に潰れる */
body.ninja-kids .tk-menu.is-step:not(:has(.tk-choices-mode))>.tk-step-body,
body.ninja-kids .tk-menu.is-step:not(:has(.tk-choices-mode))>.tk-step-body>.tk-group {
flex:none; height:auto; min-height:0;
}
/* 行の高さを決め打ちしている並び（かけざんの だん など）も中身の高さにする */
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode))) :is(.tk-choices,.kj-choices,.kk-choices) {
grid-template-rows:none;
}
}
@media (max-width:767px) and (orientation:portrait) {
/* スタートの margin-top は各アプリの指定に負けるので、カードの塊の下に内側の余白をとる */
body.ninja-kids :is(.kj-menu,.kk-menu).is-step:not(:has(:is(.kj-choices-mode,.kk-choices-mode)))>:is(.kj-group,.kk-group):last-of-type {
padding-bottom:16px;
}
}
@media (max-width:767px) and (orientation:portrait) {
/* とけいの「とけいに ふんを ひょうじする」の上下に余白をとる（2026-09-24） */
body.ninja-kids.ninja-tokei .tk-menu.is-step>.tk-step-body>.tk-step-side { padding-block:16px; }
}
/* ヘッダーが ☰ の1段になって縦が約22px空いたので、スマホ縦の選択画面をゆったりさせる（2026-09-24） */
@media (max-width:767px) and (orientation:portrait) {
/* 1枚目：札の間隔と高さ */
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step :is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode):is(div,section) { gap:12px; }
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step :is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode) :is(.tk-choice,.kj-choice,.kk-choice) { min-height:104px; }
body.ninja-kids:is(.ninja-katakana,.ninja-romaji,.ninja-phonics) :is(.kt-modes,.rj-modes,.pn-modes) { gap:12px; }
body.ninja-kids:is(.ninja-katakana,.ninja-romaji,.ninja-phonics) :is(.kt-modes,.rj-modes,.pn-modes)>:is(.kt-mode,.rj-mode,.pn-mode) { min-height:84px; }
body.ninja-kids.ninja-phonics .pn-modes>.pn-mode { min-height:92px; }
/* 見出しと札のあいだ */
body.ninja-kids :is(.tk-group-title,.kj-group-title,.kk-group-title,.kt-menu-lead,.rj-menu-lead,.pn-menu-lead) { margin-bottom:10px; }
/* 2枚目以降：カードの間隔と高さ */
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode))) :is(.tk-choices,.kj-choices,.kk-choices) { gap:12px; }
body.ninja-kids :is(.tk-menu,.kj-menu,.kk-menu).is-step:not(:has(:is(.tk-choices-mode,.kj-choices-mode,.kk-choices-mode))) :is(.tk-choice,.kj-choice,.kk-choice) { min-height:72px; }
}
@media (max-width:767px) and (orientation:portrait) {
/* かんじ・かけざんの1枚目は札を もう一段 高くする（2026-09-24）。
札の並びの max-height:300px（:has 付き・詳細度 0,6,0）が残っていると3枚目が はみ出すので !important で外す */
body.ninja-kids:is(.ninja-kanji,.ninja-kuku) :is(.kj-menu,.kk-menu).is-step :is(.kj-choices-mode,.kk-choices-mode) {
max-height:none !important; height:auto !important; grid-template-rows:none; grid-auto-rows:auto;
}
body.ninja-kids:is(.ninja-kanji,.ninja-kuku) :is(.kj-menu,.kk-menu).is-step :is(.kj-choices-mode,.kk-choices-mode) :is(.kj-choice,.kk-choice) {
min-height:116px;
}
}
/* スマホ縦の問題画面をゆったりさせる（2026-09-24）。行の間隔8px・問題130px・選択肢60pxで ぎゅうぎゅうだった。
ヘッダーが ☰ の1段になって縦に余裕ができたので、行の間隔・問題エリア・選択肢を一段ずつ広げる */
@media (max-width:767px) and (orientation:portrait) {
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz) { row-gap:14px; --nk-qh:150px; }
body.ninja-kids :is(.kj-ask,.kk-ask,.kt-q,.rj-q,.pn-q) { min-height:150px; }
body.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices) { gap:12px; }
body.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock) { min-height:68px; }
}
@media (max-width:767px) and (orientation:portrait) {
/* とけいの「なんじ なんぷん?」の帯と時計は一続きの見た目なので、行の間隔を打ち消してくっつける */
/* （2026-09-24 後半に札の形へ変えたので不要。下の「問いの札」を参照） */
}
/* スマホの問題画面ではヒーロー（アプリ名とキャラの帯）を出さない（2026-09-24）。
盤面の見出しに えらんだ しゅぎょう が出ているので、問題に集中できるよう盤面を上に寄せる。
選択画面と けっか画面では出す（アプリ名と「紹介ページ」への入口は そこに残る） */
@media (max-width:767px) {
body.ninja-kids:has(:is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz)):not(:has(:is(.tk-result,.kj-result,.kk-result,.kt-result,.rj-result,.pn-result))) .app-ref-hero {
display:none !important;
}
}
/* 盤面の下の読み物のアコーディオン（2026-09-24。js/ninja-links.js が #howto を に包む） */
.ninja-kids .nk-acc>.nk-acc-sum{
display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
-webkit-tap-highlight-color:transparent;
}
.ninja-kids .nk-acc>.nk-acc-sum::-webkit-details-marker{ display:none; }
.ninja-kids .nk-acc>.nk-acc-sum>:is(h2,h3){ flex:1; margin-block:0; }
.ninja-kids .nk-acc>.nk-acc-sum::after{
content:'＋'; flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
font-size:16px; font-weight:700; color:#fff; background:var(--nk-accent,#c0634c);
}
.ninja-kids .nk-acc[open]>.nk-acc-sum::after{ content:'－'; }
.ninja-kids .nk-acc.is-howto{ margin-top:14px; }
.ninja-kids .nk-acc.is-howto[open]>.nk-acc-sum{ margin-bottom:14px; }
.ninja-kids .nk-acc.is-box[open]>.nk-acc-sum{ margin-bottom:10px; }
@media (hover:hover){
.ninja-kids .nk-acc>.nk-acc-sum:hover::after{ filter:brightness(1.08); }
}
/* スマホの問題画面は、ヒーローを外したぶん盤面がヘッダーに くっつくので上に余白をとる（2026-09-24） */
@media (max-width:767px) {
body.ninja-kids:has(:is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz)):not(:has(:is(.tk-result,.kj-result,.kk-result,.kt-result,.rj-result,.pn-result))) :is(#tk-app,#kj-app,#kk-app,#kt-app,#rj-app,#pn-app) {
padding-top:14px;
}
}
/* スマホの問題画面：盤面の上部（えらんだ しゅぎょう の帯・第○問／できた！の段）に余白をとる（2026-09-24）。
盤面の上の内側10px・帯30px・帯と段の間8px・段の上下5px で ぎゅうぎゅうだった */
@media (max-width:767px) {
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz) { padding-top:18px; }
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz) .nk-head { gap:12px; }
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz) .nk-head-picked { padding:9px 14px; }
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz) .nk-head-bar { padding:10px 14px 12px; row-gap:8px; }
}
/* 解説の箱は「ポイント」のアコーディオンに入れたので、箱の枠・背景は消す（2026-09-24） */
body.ninja-kids .nk-acc.is-box>[class$="-rules"]{
border:0; background:none; box-shadow:none; padding:0; margin:0 0 6px; border-radius:0;
}
body.ninja-kids .nk-acc.is-box>[class$="-rules"]::before,
body.ninja-kids .nk-acc.is-box>[class$="-rules"]::after{ content:none; }
body.ninja-kids .nk-acc.is-box[open]>.nk-acc-sum{ margin-bottom:14px; }
/* 「ポイント」の中の見出し（カタカナで かく ことば は…など）には下線を引かない。下線は「ポイント」だけ */
body.ninja-kids .nk-acc.is-box>[class$="-rules"]>:is(h2,h3){ border-bottom:0; box-shadow:none; background-image:none; text-decoration:none; }
body.ninja-kids .nk-acc.is-box>[class$="-rules"]>:is(h2,h3)::after{ content:none; }
/* 問いの札（なんと よむ?・こたえは?・なんじ なんぷん?）を、カタカナ・ローマ字と同じく
問題の枠の中の上に置く（2026-09-24。スマホ縦の1列の段）。
札と枠を同じ行に重ね、枠の上の内側を札のぶん あける */
@media (max-width:767px) and (orientation:portrait) {
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-play-head,.kk-play-head) { grid-row:1; }
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-ask-label,.kk-ask-label,.kj-ask,.kk-ask) { grid-row:2; }
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-options,.kk-options) { grid-row:3; }
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-feedback,.kk-feedback):not(.is-ok):not(.is-ng) { grid-row:4; }
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-back,.kk-back) { grid-row:5; }
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-ask-label,.kk-ask-label) {
align-self:start; justify-self:center; margin:22px 0 0; z-index:2;
}
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-ask,.kk-ask) { padding-top:46px; }
body.ninja-kids .tk-play>.tk-play-head { grid-row:1; }
body.ninja-kids .tk-play>:is(.tk-ask,.tk-stage) { grid-row:2; }
body.ninja-kids .tk-play>.tk-hint-btn { grid-row:3; }
body.ninja-kids .tk-play>.tk-hint { grid-row:4; }
body.ninja-kids .tk-play>.tk-options { grid-row:5; }
body.ninja-kids .tk-play>.tk-feedback:not(.is-ok):not(.is-ng) { grid-row:6; }
body.ninja-kids .tk-play>.tk-back { grid-row:7; }
body.ninja-kids .tk-play>.tk-ask {
align-self:start; justify-self:center; width:fit-content; margin:14px 0 0; z-index:2;
padding:.28em 1.1em; color:#fff; font-weight:800; letter-spacing:.08em;
background:linear-gradient(var(--nk-accent),color-mix(in srgb,var(--nk-accent) 72%,#000));
box-shadow:0 2px 0 color-mix(in srgb,var(--nk-accent-dark) 80%,#000);
clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
border:0; border-radius:0;
}
body.ninja-kids .tk-play>.tk-stage { padding-top:48px; }
}
/* 問題画面の見出し：「第○問／できた！」の段を えらんだ しゅぎょう の帯の上に出し、段の枠と進み具合の点はやめる（2026-09-24） */
body.ninja-kids .nk-head>.nk-head-bar{
order:-1; background:none; border:0; box-shadow:none; padding:0 4px; min-height:0;
}
body.ninja-kids .nk-head>.nk-head-bar::before,
body.ninja-kids .nk-head>.nk-head-bar::after{ content:none; }
body.ninja-kids .nk-head .nk-progress-marks{ display:none; }
@media (max-width:767px) {
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz) .nk-head-bar { padding:0 4px; }
}
/* 段と帯をまとめている外側の箱（.nk-head）の地と枠も消す。とけいの点は別クラス */
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz)>.nk-head{
background:none; border:0; box-shadow:none; padding:0;
}
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz)>.nk-head::before,
body.ninja-kids :is(.tk-play,.kj-play,.kk-play,.kt-quiz,.rj-quiz,.pn-quiz)>.nk-head::after{ content:none; }
body.ninja-kids .tk-progress-marks{ display:none !important; }
@media (max-width:767px) and (orientation:portrait) {
/* かんじ・かけざんは札のぶん枠を高くして、札と問題の文字が くっつかないようにする */
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-ask,.kk-ask) { min-height:176px; padding-top:52px; }
}
/* かけざんの「ヒントを 見る」（2026-09-24。とけい修行と同じ白い丸ボタン。問題の枠の外＝盤面の行に置く） */
.ninja-kids .kk-play>.kk-hint-btn{
grid-column:1; grid-row:2; align-self:end; justify-self:center; z-index:2; margin:0 0 14px;
display:inline-flex; align-items:center; gap:6px;
background:#fff; border:2px solid var(--nk-accent); border-radius:99px;
padding:8px 18px; font-size:14px; font-weight:800; font-family:inherit;
color:var(--nk-accent-dark); cursor:pointer;
}
.ninja-kids .kk-play>.kk-hint-btn::before{ content:"💡"; font-size:15px; }
@media (hover:hover){ .ninja-kids .kk-play>.kk-hint-btn:hover{ background:color-mix(in srgb,var(--nk-accent) 10%,#fff); } }
@media (orientation:landscape) and (max-height:500px) {
.ninja-kids .kk-play>.kk-hint-btn{ grid-row:3; padding:4px 12px; font-size:12px; margin-bottom:8px; }
}
/* スマホ縦：枠の下の行に置く（とけいと同じ並び） */
@media (max-width:767px) and (orientation:portrait) {
body.ninja-kids .kk-play:not(.is-kaki)>.kk-hint-btn { grid-column:1; grid-row:3; align-self:center; margin:0; }
body.ninja-kids .kk-play:not(.is-kaki)>.kk-options { grid-row:4; }
body.ninja-kids .kk-play:not(.is-kaki)>.kk-feedback:not(.is-ok):not(.is-ng) { grid-row:5; }
body.ninja-kids .kk-play:not(.is-kaki)>.kk-back { grid-row:6; }
body.ninja-kids .kk-play:not(.is-kaki)>.kk-ask { min-height:150px; }
}
/* カタカナ「どっちで かく？」：あてはめる ことばは下線ではなくオレンジの字にする（2026-09-24） */
body.ninja-kids :is(.kt-target,.kt-a-target){
text-decoration:none; color:#ffb347; font-weight:900;
}
/* こたえあわせの欄は赤・緑の地なので、色の字だと沈む。白い札に載せて濃い字にする */
body.ninja-kids .kt-answer .kt-a-target{ color:#b8431f; background:#fff; padding:0 .35em; border-radius:6px; box-shadow:0 2px 0 rgba(0,0,0,.18); }
body.ninja-kids .kt-answer.is-ok .kt-a-target{ color:#23714a; }
/* かんじを よむ：ことばの中の いま練習している漢字をオレンジにする（2026-09-24。カタカナ修行の .kt-target と同じ色） */
body.ninja-kids .kj-ask-word .kj-target{ color:#ffb347; }
/* スマホ縦の問題の枠を6アプリでそろえる（2026-09-24）。
枠 150〜203px・札 13〜14px・札と問題の間 -2〜29px・問題の字 18〜34px と ばらばらだった */
@media (max-width:767px) and (orientation:portrait) {
body.ninja-kids :is(.kj-ask,.kk-ask,.kt-q,.rj-q,.pn-q) { min-height:176px; }
body.ninja-kids :is(.tk-play>.tk-ask,.kj-ask-label,.kk-ask-label,.kt-q-lead,.rj-q-lead,.pn-q-lead) { font-size:14px; }
/* 札を枠の中に持つアプリ（カタカナ・ローマ字・フォニックス）は 札と問題の間を 18px */
body.ninja-kids :is(.kt-q-lead,.rj-q-lead,.pn-q-lead) { margin-bottom:18px; }
/* 札を枠に重ねているアプリ（かんじ・かけざん）は 枠の上の内側で間をとる */
body.ninja-kids :is(.kj-play,.kk-play):not(.is-kaki)>:is(.kj-ask,.kk-ask) { min-height:176px; padding-top:58px; }
/* 問題の字 */
body.ninja-kids :is(.kj-ask-word,.kk-ask-main) { font-size:34px; }
body.ninja-kids .kj-ask-yomi { font-size:30px; }
body.ninja-kids :is(.kt-q-word,.rj-q-word,.pn-q-word):not(.is-sentence):not(.is-big) { font-size:34px; }
body.ninja-kids :is(.kt-q-word,.rj-q-word,.pn-q-word).is-sentence { font-size:26px; line-height:1.5; }
/* とけい：札の下から時計を始める */
body.ninja-kids .tk-play>.tk-stage { padding-top:62px; }
}
@media (max-width:767px) and (orientation:portrait) {
/* 札の位置を6アプリで そろえる：枠の上から22px に固定し、問題の字は のこりの高さの まん中 */
body.ninja-kids :is(.kt-q,.rj-q,.pn-q) { padding-top:58px; align-content:center; }
body.ninja-kids :is(.kt-q,.rj-q,.pn-q)>:is(.kt-q-lead,.rj-q-lead,.pn-q-lead) {
position:absolute; top:22px; left:50%; translate:-50% 0; margin:0; white-space:nowrap;
}
}
/* 解答欄の字と「ヒントを 見る」を6アプリでそろえる（2026-09-24）。
選択肢は 16px（かけざんだけ24px）、ヒントは とけい12px・かけざん14px と ばらばらだった */
@media (max-width:767px) {
body.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock),
body.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):not(.tk-opt-clock) :is(span,b) {
font-size:20px;
}
}
/* 「ヒントを 見る」は とけい・かけざん共通の見た目 */
body.ninja-kids :is(.tk-play>.tk-hint-btn,.kk-play>.kk-hint-btn){
display:inline-flex; align-items:center; justify-content:center; gap:6px;
background:#fff; border:2px solid var(--nk-accent); border-radius:99px;
padding:8px 18px; font-size:14px; line-height:1.4; font-weight:800; font-family:inherit;
color:var(--nk-accent-dark); cursor:pointer;
}
body.ninja-kids :is(.tk-play>.tk-hint-btn,.kk-play>.kk-hint-btn)::before{ content:"💡"; font-size:15px; }
/* 選択肢と しゅぎょう選択のカードは、影と二重枠をやめ、修行の色の太い枠で囲む（2026-09-24） */
body.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice),
body.ninja-kids :is(.kj-menu .kj-choice,.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode){
box-shadow:none;
border:3px solid color-mix(in srgb,var(--nk-accent) 55%,#fff);
translate:none;
}
body.ninja-kids :is(.kj-menu .kj-choice,.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode).is-on{
border-color:var(--nk-accent-dark,var(--nk-accent));
}
@media (hover:hover){
body.ninja-kids :is(.tk-options,.kj-options,.kk-options,.kt-choices,.rj-choices,.pn-choices)>:is(.tk-opt,.kj-opt,.kk-opt,.kt-choice,.rj-choice,.pn-choice):hover:not(:disabled),
body.ninja-kids :is(.kj-menu .kj-choice,.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode):hover{
box-shadow:none; border-color:var(--nk-accent); translate:none;
}
}
/* しゅぎょう選択のカードは既存の指定（詳細度 0,4,0・:not(.is-jukken) 付き）に負けるので、クラスを重ねて勝たせる */
body.ninja-kids.ninja-kids :is(.kj-menu .kj-choice,.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode){
box-shadow:none; border:3px solid color-mix(in srgb,var(--nk-accent) 55%,#fff); translate:none;
}
body.ninja-kids.ninja-kids :is(.kj-menu .kj-choice,.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode).is-on{
border-color:var(--nk-accent-dark,var(--nk-accent));
}
@media (hover:hover){
body.ninja-kids.ninja-kids :is(.kj-menu .kj-choice,.tk-menu .tk-choice,.kk-menu .kk-choice,.kt-mode,.rj-mode,.pn-mode):hover{
box-shadow:none; border-color:var(--nk-accent);
}
}
/* ===== 問題画面の窓（ポップアップ）（2026-09-27）=====
問題と けっか は js/nk-modal.js が