/* kids-quiz.css — 赤ちゃん・幼児クイズの共通の出題画面(assets/js/kids-quiz.js と組) */
:root{
  --kq-bg:#f3f7fb; --kq-card:#fff; --kq-line:#d9e0ea; --kq-ink:#222; --kq-sub:#6b7280;
  --kq-accent:#e8590c; --kq-ok:#1f9d55; --kq-okbg:#eafaf1; --kq-ng:#e03131; --kq-ngbg:#fff0f0;
}
body.kq{background:var(--kq-bg);color:var(--kq-ink);margin:0}
/* 文字の種類と角の形は、サイト共通の page.css(body.mqp)に合わせる */
.kq-wrap{max-width:480px;margin:0 auto;padding:6px 12px 24px}
.kq-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 0 6px}
.kq-head h1{margin:0;font-size:clamp(18px,3dvh,24px);font-weight:900;color:var(--kq-accent)}
.kq-head p{margin:0;font-size:12px;color:var(--kq-sub);font-weight:700}
.kq-sets{display:flex;gap:6px;overflow-x:auto;margin:0 0 6px;padding-bottom:2px}
.kq-set{flex:0 0 auto;border:1.5px solid var(--kq-line);background:#fff;color:#444;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.kq-set.is-on{border-color:var(--kq-accent);background:var(--kq-accent);color:#fff}
.kq-bar{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--kq-line);border-radius:12px;padding:5px 12px;margin-bottom:6px;font-size:13px;font-weight:800}
.kq-bar__num{color:var(--kq-sub)}
.kq-bar__score{color:var(--kq-ok)}
.kq-sound{background:none;border:0;font:inherit;font-size:12px;font-weight:800;color:var(--kq-sub);cursor:pointer;padding:4px 0}
.kq-ask{background:var(--kq-card);border:1px solid var(--kq-line);border-radius:16px;padding:8px 10px 6px;margin-bottom:8px;text-align:center}
.kq-ask__text{font-size:clamp(15px,2.4dvh,19px);font-weight:900;margin-top:2px}
/* 問題の文は、ことばの途中で折り返さない(わかち書きの空白で折り返す) */
.kq-ask__name,.kq-ask__text{word-break:keep-all;overflow-wrap:anywhere}
.kq-ask__name{font-size:clamp(20px,4.2dvh,30px);font-weight:900;padding:6px 0}
.kq-ask__name.is-long{font-size:clamp(17px,3.2dvh,23px);line-height:1.45}
.kq-shadow{position:relative;width:clamp(110px,22dvh,220px);aspect-ratio:1;margin:0 auto}
.kq-shadow img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease}
.kq-shadow__col{opacity:0}
.kq-shadow.is-open .kq-shadow__col{opacity:1}
.kq-shadow.is-open .kq-shadow__sil{opacity:0}
.kq-choices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4dvh,12px);width:min(100%,max(210px,calc(100dvh - 470px)));margin:0 auto}
.kq-choice{aspect-ratio:1;background:#fff;border:3px solid #e6e9ee;border-radius:16px;padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .12s,border-color .12s}
.kq-choice img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.kq-choice:not(:disabled):active{transform:scale(.97)}
.kq-choice:disabled{cursor:default}
.kq-choice.is-correct{border-color:var(--kq-ok);background:var(--kq-okbg);animation:kqPop .3s ease-out}
.kq-choice.is-wrong{border-color:var(--kq-ng);background:var(--kq-ngbg);animation:kqShake .3s}
@keyframes kqPop{0%{transform:scale(1)}50%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes kqShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.kq-feedback{min-height:30px;margin-top:8px;text-align:center;font-size:clamp(17px,2.8dvh,22px);font-weight:900}
.kq-feedback.is-ok{color:var(--kq-ok)}
.kq-feedback.is-ng{color:var(--kq-ng)}
.kq-result{background:#fff;border:1px solid var(--kq-line);border-radius:18px;padding:clamp(16px,3dvh,28px) 18px;text-align:center}
.kq-result[hidden],.kq-play[hidden],.kq-gacha[hidden],.kq-sets[hidden]{display:none}
.kq-chara{display:block;height:clamp(64px,12dvh,110px);width:auto;margin:0 auto 6px}
.kq-result__title{font-size:clamp(18px,3.2dvh,24px);font-weight:900;color:var(--kq-accent);margin-bottom:4px}
.kq-result__score{font-size:clamp(32px,6dvh,48px);font-weight:900;margin-bottom:clamp(10px,2dvh,18px)}
.kq-result__score span:last-child{font-size:18px;color:var(--kq-sub)}
.kq-btn{display:block;width:100%;padding:clamp(12px,2dvh,16px);border:0;border-radius:14px;background:var(--kq-accent);color:#fff;font:inherit;font-size:18px;font-weight:900;cursor:pointer;margin-bottom:8px}
.kq-gacha{display:block;width:100%;margin-bottom:8px;padding:clamp(11px,1.9dvh,14px);background:#fff;border:1.5px solid #8a6d1d;color:#6b5314;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.kq-home{display:block;color:var(--kq-sub);font-size:14px;font-weight:700;text-decoration:none;margin-top:4px}
.kq-more{margin-top:14px;padding-top:12px;border-top:1px solid var(--kq-line);text-align:left}
.kq-more__h{font-size:13px;font-weight:800;color:var(--kq-sub);margin-bottom:6px}
.kq-more__list{display:flex;flex-wrap:wrap;gap:6px}
.kq-more__list a{font-size:13px;font-weight:800;color:#1f56c6;background:#eef3fb;border-radius:999px;padding:5px 12px;text-decoration:none}
.kq-info{background:#f4f7fb;border-top:1px solid #dde4f0;padding:24px 20px 32px;margin-top:28px}
.kq-info__in{max-width:560px;margin:0 auto}
.kq-info h2{font-size:15px;font-weight:800;color:#1a2a4a;margin:0 0 8px}
.kq-info p{font-size:13px;line-height:1.85;color:#4a5568;margin:0 0 12px}
.kq-info a{color:#1f56c6}
/* 絵を見て、なまえ(文字)を選ぶ */
.kq-pic{width:clamp(140px,30dvh,260px);aspect-ratio:1;margin:0 auto;display:flex;align-items:center;justify-content:center}
.kq-pic img{max-width:100%;max-height:100%;object-fit:contain}
.kq-mode-pic .kq-choices{width:100%}
.kq-choice.is-text{aspect-ratio:auto;min-height:clamp(52px,8dvh,72px);font:inherit;font-size:clamp(16px,2.6dvh,20px);font-weight:900;color:var(--kq-ink);line-height:1.3}
.kq-img-flag{box-shadow:0 0 0 1px #c9ced6}
.kq-modes{display:flex;gap:6px;margin:0 0 6px}
.kq-modes[hidden]{display:none}
/* 文字で出す問題(なまえ・鳴き声)は問いの場所が小さいので、4択を大きくする */
.kq-mode-name .kq-choices{width:min(100%,max(240px,calc(100dvh - 360px)))}
@media (max-width:420px){.kq-head p{display:none}}
@media (min-width:768px){.kq-wrap{padding-top:14px}}