@charset "utf-8";
:root{
  --base-color:#0068B7;
  --red:#EA4D48;
  --white:#ffffff;
  --black:#000000;
  --dark:#1a1a2e;
  --gray:#c0c0c0;
  --gray-hover:#e8e8e8;
  --white-rgb:255,255,255;
  --black-rgb:0,0,0;
  --red-rgb:234,77,72;
  --content-bg:#f7fdef;
  --vh:1vh;--vw:1vw;
  --accent:#0068b7;
  --primary-color:#0068B7; /* サイト全体の主要カラー（カテゴリごとの--accent上書きの影響を受けない固定色） */
  --game-header-h:calc(var(--vh)*12);
  --footer-h:calc(var(--vh)*10);
  --shadow:0 2px 8px rgba(0,0,0,0.18);
  --fbar-bg-image:url('../../images/quiz/common/flower/fbar-bg.svg');
}
html,body{width:100%;height:calc(var(--vh)*100);overflow:hidden;
  overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  font-family:'M PLUS Rounded 1c',sans-serif;
  background:var(--base-color);color:var(--text-on-base);}

/* ── SCREENS ── */
.screen{position:fixed;top:0;left:0;width:calc(var(--vw)*100);height:calc(var(--vh)*100);
  display:none;flex-direction:column;}
.screen.active{display:flex;animation:scrnIn .4s ease both;}
@keyframes scrnIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── FLOWER BAR ── */
.fbar-clip{position:relative;width:calc(var(--vw)*100);height:calc(var(--vh)*20);pointer-events:none;}
.fbar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-end;
  padding:0;flex-shrink:0;height:calc(var(--vh)*10);
  width:100%;overflow:visible;
  background:var(--fbar-bg-image) 0 0/100% 100% no-repeat;padding-top:1rem;}
.fbar-row{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;width:100%;position:relative;z-index:1;margin-bottom:0.5rem;}
.fbar-row.fbar-row-2{position:absolute;left:0;right:0;bottom:35%;z-index:0;}
.fbar-row img{transition:opacity .3s ease;}
.fbar-row img{flex-shrink:0;min-width:0;display:block;}
/* キャラクターのループアニメーション（一定間隔で軽く跳ねる） */
@keyframes charaBob{
  0%,58%,100%{transform:translateY(0);}
  68%{transform:translateY(-6%);}
  78%{transform:translateY(0);}
  84%{transform:translateY(-2.5%);}
  90%{transform:translateY(0);}}
.chara-img img,.ans-chara img,img.qchara{
  animation:charaBob 2.8s ease-in-out infinite;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0.6em 1.55em 0.6em 1.8em;font-size:1.7rem;font-weight:700;font-family:inherit;
  border:none;border-radius:50px;cursor:pointer;letter-spacing:.08em;
  transition:all .12s ease;text-decoration:none;}
.btn-primary{background:var(--base-color);color:var(--text-on-base);border:2px solid var(--base-color);}
.btn-primary:hover{transform:translateY(-0.15em);}
.btn-secondary{background:var(--base-color);color:var(--text-on-base);border:2px solid var(--base-color);}
.btn-secondary:hover{transform:translateY(-0.15em);}
.btn-restart{background:var(--white);color:var(--text-on-white);border:2px solid var(--base-color);}
.btn-restart:hover{transform:translateY(-0.15em);}
.btn-gold{background:var(--base-color);color:var(--text-on-base);border:2px solid var(--base-color);}
.btn-gold:hover{transform:translateY(-0.15em);}
.btn-lg{}

/* ── GAME SCREENS ── */
.gscreen{background:transparent;padding:0 0 var(--footer-h);}
#bg-stack>.screen{position:relative;flex:1;min-height:0;width:100%;height:auto;}
.gheader{flex-shrink:0;padding:14px 24px 10px;border-bottom:1px solid rgba(var(--white-rgb),.08);}
.gmain{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 24px;}
.gfooter{flex-shrink:0;border-top:1px solid rgba(var(--white-rgb),.08);
  display:flex;justify-content:center;align-items:center;gap:12px;}
.tag{display:inline-block;padding:4px 14px;
  font-size:1.53rem;font-weight:700;letter-spacing:.12em;}
.tag-bg{background:var(--base-color);color:var(--text-on-base);}
.tag-q{background:var(--base-color);color:var(--text-on-base);}
.tag-ans{background:var(--red);color:var(--white);}
.smaintitle{font-size:2rem;font-weight:700;color:var(--text-on-pale);margin:0;line-height:1.4;text-align:center;}
.smaintitle:empty{display:none;}
.br-portrait{display:none;}
.stitle{font-size:1.8rem;font-weight:800;color:var(--text-on-pale);
  margin:0;line-height:1.4;text-align:center;display:flex;flex-direction:row;align-items:baseline;justify-content:center;}
.stitle:empty{display:none;}
.title-num{background:var(--base-color);color:var(--text-on-base);border-radius:50%;width:1.6em;height:1.6em;display:inline-flex;align-items:center;justify-content:center;font-size:0.85em;flex-shrink:0;margin-right:0.3em;vertical-align:middle;}
.ssubtitle{font-size:1.4rem;font-weight:700;color:var(--dark);margin:0;line-height:1.4;text-align:center;}
.ssubtitle:empty{display:none;}

/* ── RUBY / FURIGANA ──
   #bg-stack（ゲーム画面本体）にだけ適用する。無指定のruby/rtだと
   共通ヘッダーのドロワーメニュー（#nav-drawer、#bg-stackの外側）内の
   ルビにも効いてしまうため。 */
#bg-stack ruby{ruby-align:center;line-height:1.3;}
#bg-stack rt{font-size:.52em;line-height:1.2;color:inherit;letter-spacing:.02em;}

/* ── EXPLANATION SCREEN ── */
.screen-inner{position:absolute;top:0;left:0;right:0;bottom:var(--footer-h);display:flex;flex-direction:column;min-height:0;background:var(--base-color-pale);color:var(--text-on-pale);overflow:hidden;padding:1.5rem;}
.screen-inner .fbar-clip{position:fixed;bottom:var(--footer-h);left:50%;transform:translateX(-50%) translateY(1px);z-index:1;}
.exp-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:none;border-radius:0;
  -webkit-mask-image:linear-gradient(to bottom,black calc(100% - var(--footer-h) - 4rem),transparent calc(100% - 4rem));
  mask-image:linear-gradient(to bottom,black 85%,transparent 99%);}
.exp-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;gap:1.5rem;padding:0 0 10rem;}
.exp-header{display:flex;flex-direction:column;gap:1em;padding:1em 0 0 0;}
.exp-media-row{display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:1.5%;flex-shrink:0;height:45svh;}
.img-caption{font-size:1.0rem;text-align:center;padding:0.2em 0.5em 0;line-height:1.4;color:var(--text-on-pale);}
.exp-media-center{flex:none;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;}
.exp-row{flex:1;display:flex;gap:28px;overflow:hidden;min-height:0;}
#exp-tag{display:none;justify-content:center;flex-shrink:0;}
#exp-tag.show{display:flex;}
.exp-tag-pill{background:var(--white);color:var(--text-on-white);font-size:1.2rem;
  font-weight:800;padding:0.2em 0.9em 0;border-radius:2em;letter-spacing:.15em;}
.exp-left{flex:none;width:50%;overflow-y:auto;overflow-x:hidden;padding:18px 20px;}
.exp-left .stitle{margin-top:0;margin-bottom:12px;color:var(--text-on-pale);}
.exp-right{flex:1;display:flex;flex-direction:column;overflow:hidden;gap:0;}
.exp-right-top{flex:1;display:flex;flex-direction:row;overflow:hidden;gap:16px;min-height:0;}
.exp-media{flex:1;display:flex;justify-content:center;align-items:center;
  overflow:hidden;}
.media-ph{width:auto;height:100%;display:flex;justify-content:center;align-items:center;
  color:rgba(var(--black-rgb),.3);font-size:1.62rem;letter-spacing:.1em;border:1px solid var(--base-color);}
.media-ph img,.media-ph video{width:auto;height:100%;object-fit:contain;}
.exp-chara{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:12px;overflow:visible;}
.chara-img{flex-shrink:0;display:flex;justify-content:center;align-items:flex-end;overflow:visible;height:70%;}
.chara-img img{height:100%;width:auto;object-fit:contain;}
.exp-footer{flex-shrink:0;padding:0px 24px;display:flex;justify-content:center;margin:0;}
.bgtext{font-size:clamp(16px,1.5rem,1.5rem);line-height:1.7;color:var(--text-on-pale);}
.dlg-block{display:flex;flex-direction:column;gap:1.6rem;padding:3em 0;}
.dlg-row{display:flex;align-items:flex-start;gap:12px;}
.dlg-teacher{flex-direction:row;}
.dlg-student{flex-direction:row;}
.dlg-chara-wrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.dlg-chara-img{height:calc(var(--vh)*16);width:auto;}
.dlg-chara-label{font-size:1rem;font-weight:700;color:var(--dark);}
.dlg-text{position:relative;flex:1;font-size:clamp(16px,1.5rem,1.5rem);line-height:1.7;color:var(--text-on-white);background:var(--white);border-radius:0.8em;padding:1em;}
.dlg-teacher .dlg-text{margin-right:1em;}
.dlg-teacher .dlg-text::before{content:'';position:absolute;left:-8px;top:1em;width:0;height:0;border-style:solid;border-width:6px 8px 6px 0;border-color:transparent var(--white) transparent transparent;}
.dlg-student .dlg-text{margin-left:1em;}
.dlg-student .dlg-text::after{content:'';position:absolute;right:-8px;top:1em;width:0;height:0;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--white);}
.bgtext strong{color:var(--text-on-pale);}
.btn:disabled{opacity:.35;cursor:default;pointer-events:none;filter:none;}
#exp-read-done{margin-top:24px;display:flex;justify-content:center;align-items:center;padding:0.2em 0.6em 0.8em;}
#exp-read-done button,#ans-read-done-btn button{position:relative;overflow:visible;background:var(--white);color:var(--text-on-white);border:2px solid var(--base-color);}
.read-check{position:absolute;left:100%;top:50%;margin-top:-1.2rem;margin-left:0.5rem;
  width:2.4rem;height:2.4rem;display:inline-flex;pointer-events:none;
  animation:maruPop .35s ease-out both;}
.read-check svg{width:100%;height:100%;display:block;}
#ans-read-done{display:flex;justify-content:center;flex-shrink:0;padding:4px 0;}

/* Question screen */
.qwrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;gap:0;background:none;padding:0 0.5rem 4rem;border-radius:0;}

.qblock{flex-shrink:0;padding:0 0 1em 0;}
.qblock-inner{display:flex;align-items:center;gap:16px;}
.qblock-inner>div{flex:1;}
.qchara{flex-shrink:0;height:8.75rem;width:auto;}
.qnum{font-size:1.2rem;color:var(--text-on-pale);letter-spacing:.1em;display:inline-flex;align-items:flex-end;gap:0.3em;margin:0 0 0.5em;}
.qnum-current{background:var(--base-color);color:var(--text-on-base);border-radius:1000px;padding:0.2em 0.7em;font-weight:700;}
.qtext{font-size:1.6rem;font-weight:700;line-height:1.6;color:var(--dark);}
.cgrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(var(--vw)*7);min-height:0;align-items:stretch;align-content:center;}
.cbtn-v{width:100%;height:auto;min-height:0;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  background:var(--base-color);
  border:2px solid var(--base-color);cursor:pointer;font-family:inherit;color:var(--text-on-base);
  padding:0;gap:0;transition:all .12s ease;}
.cbtn-v:hover:not(:disabled){transform:translateY(-0.2em);box-shadow:none;}
.cbtn-v:disabled{cursor:default;}
.cbtn-v-info{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;padding:0.55em 0.5em 0.5em;width:100%;}
.cbtn-v-text{font-size:1.8rem;font-weight:700;line-height:1.5;color:var(--text-on-base);
  text-align:center;flex-shrink:0;overflow:hidden;}
.cbtn-v-img{width:100%;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:2.5rem;color:rgba(var(--black-rgb),.3);aspect-ratio:4/3;background:var(--base-color);}
.cbtn-v-img img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
.cbtn-v.is-correct{background:var(--base-color);}
.cbtn-v.no-img{background:transparent;aspect-ratio:1/1;}
.cbtn-v.no-img .cbtn-v-info{background:var(--base-color);width:100%;height:100%;flex:1;position:relative;}
.cbtn-v.no-img .cbtn-v-img{display:none;}

.cbtn-v.is-correct .cbtn-v-text{color:var(--text-on-base);}
.cbtn-v.is-wrong{background:rgba(var(--red-rgb),.3);}
.cbtn-v.is-dim .cbtn-v-img::after{content:'';position:absolute;inset:0;background:var(--base-color);opacity:0.5;pointer-events:none;z-index:1;}
.cbtn-v.no-img.is-dim .cbtn-v-info::after{content:'';position:absolute;inset:0;background:var(--base-color);opacity:0.5;pointer-events:none;z-index:1;}
.cbtn-v.reveal{background:var(--base-color);}

.cbtn-v.reveal .cbtn-v-text{color:var(--text-on-base);}
@keyframes cPop{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
/* 回答後のマーク（正解の○ / 選択した回答の押す手） */
.cbtn-v{position:relative;}
.cbtn-v-img{position:relative;}
.mark-maru,.mark-cross{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;animation:maruPop .4s ease-out both;}
.mark-maru img{max-width:50%;max-height:50%;width:auto;height:auto;}
.mark-cross img{max-width:65%;max-height:65%;width:auto;height:auto;}
@keyframes maruPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.mark-hand{position:absolute;right:5%;top:5%;width:28%;height:28%;max-width:5rem;max-height:5rem;
  pointer-events:none;z-index:3;}
.mark-hand img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(var(--black-rgb),.4));}

/* Answer screen */
.ans-content-wrap{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;background:none;border-radius:0;gap:0;padding:0.5rem 0 10rem;
  -webkit-mask-image:linear-gradient(to bottom,black calc(100% - var(--footer-h) - 4rem),transparent calc(100% - 4rem));
  mask-image:linear-gradient(to bottom,black 85%,transparent 99%);}
.ans-top-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem;flex-shrink:0;padding:2rem 0 3rem;margin:0 2rem;
  background-image:linear-gradient(to right,var(--base-color) 70%,transparent 30%);
  background-size:6px 2px;background-position:bottom;background-repeat:repeat-x;}
.ans-top-wrap{display:flex;flex-direction:column;align-items:center;gap:0.5em;flex-shrink:0;width:fit-content;min-width:0;}
.ans-tag-row{display:flex;justify-content:center;}
.ans-answer-tag{flex-shrink:0;background:var(--base-color);color:var(--text-on-base);font-size:1.5rem;font-weight:700;padding:0 1em;border-radius:2em;letter-spacing:.1em;}
.ans-correct-text{flex-shrink:0;font-size:1.8rem;font-weight:700;color:var(--text-on-pale);line-height:1.4;text-align:center;}
.ans-img-chara-row{flex-shrink:0;width:fit-content;display:flex;align-items:end;justify-content:center;gap:0;height:20svh;}
.ans-chara{flex-shrink:0;height:70%;width:auto;display:flex;align-items:center;}
.ans-chara img{height:100%;width:auto;}
.ans-correct-img{height:100%;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2rem;}
.ans-correct-img img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid var(--base-color);}
.ans-exp{flex-shrink:0;padding:0.8rem 1rem;}
.ans-exp strong{color:var(--text-on-pale);}
.ans-exp-img{flex-shrink:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:rgba(var(--black-rgb),.3);height:45svh;margin:0;}
#ans-exp-img-caption{margin:0 0 4rem;}
.ans-content-wrap .gfooter.no-caption-gap{margin-top:4rem;}
.ans-exp-img img{width:auto;height:100%;object-fit:contain;border:1px solid var(--base-color);display:block;}


.sitem{display:flex;align-items:center;gap:11px;padding:12px 16px;
  background:var(--white);border-radius:1em;
  flex-shrink:0;}
.sicon{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:5em;aspect-ratio:4/3;}
.sicon img{height:100%;width:auto;display:block;}
.sicon svg{width:2.375rem;height:3rem;}
.sqbody{flex:1;display:flex;flex-direction:row;align-items:center;gap:1em;min-width:0;}
.sqnum{flex-shrink:0;display:inline-block;background:var(--base-color);color:var(--text-on-base);font-size:1.3rem;font-weight:700;padding:0.1em 0.7em;border-radius:2em;letter-spacing:.05em;white-space:nowrap;}
.sqtxt{font-size:1.4rem;color:var(--dark);line-height:1.6;}

/* Result screen */
.rscreen{background:transparent;padding:0 calc(var(--vw)*3) var(--footer-h);}
.rinner{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;overflow-x:hidden;background:none;border-radius:0;padding:calc(var(--vh)*2) calc(var(--vw)*3) 10rem;
  -webkit-mask-image:linear-gradient(to bottom,black calc(100% - var(--footer-h) - 4rem),transparent calc(100% - 4rem));
  mask-image:linear-gradient(to bottom,black 85%,transparent 99%);}
.r-top{display:flex;flex-direction:row;align-items:flex-end;gap:1rem;flex-shrink:0;padding:2rem 0 3rem;margin:0 0 2rem;
  background-image:linear-gradient(to right,var(--base-color) 70%,transparent 30%);
  background-size:6px 2px;background-position:bottom;background-repeat:repeat-x;justify-content:center;}
.r-content{display:flex;flex-direction:column;gap:0.5rem;}
.r-charas{display:flex;flex-direction:row;align-items:flex-end;gap:0.5rem;flex-shrink:0;}
.r-charas img{height:20svh;width:auto;}
.r-list{flex-shrink:0;display:flex;flex-direction:column;gap:8px;}
.remoji{font-size:5rem;margin-bottom:0.25rem;}
.rscore-row{display:flex;flex-direction:row;align-items:baseline;gap:1rem;flex-wrap:wrap;}
.rscore{display:flex;align-items:baseline;gap:0.375rem;color:var(--text-on-pale);flex-shrink:0;}
.rnum{font-size:6rem;font-weight:900;line-height:1;color:var(--text-on-pale);}
.rtotal{font-size:2.2rem;color:var(--dark);white-space:nowrap;}
.rmsg{font-size:2.7rem;font-weight:900;margin:0.375rem 0 0.125rem;color:var(--text-on-pale);opacity:0;transition:opacity .5s ease;}
.rmsg.show{opacity:1;}
.rsub{font-size:1.8rem;color:var(--dark);line-height:1.8;}
.rbtns{display:flex;flex-direction:column;gap:1rem;flex-shrink:0;align-items:center;margin:2rem 0 0 0;}
.rbtns-row{display:flex;flex-direction:row;gap:1rem;}

#bg-stack{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;z-index:9999;pointer-events:none;padding:0 1rem;}
#bg-stack>#game-header,#bg-stack>.screen{pointer-events:auto;}
#game-header{position:relative;flex-shrink:0;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.2em;background:var(--base-color);padding:0.5em 0;}
.game-header-row{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;}
#game-title{flex:1;text-align:center;}
#game-tag{position:absolute;right:0;}
#game-header[data-screen="background"][data-step="0"] .game-header-row:last-child{display:none;}
#game-title{font-size:clamp(12px,2.5svh,2.5svh);font-weight:800;color:var(--text-on-base);letter-spacing:.06em;}
#game-tag,#game-cat-tag{font-size:clamp(12px,2svh,2svh);font-weight:700;color:var(--text-on-white);background:var(--white);border-radius:2em;letter-spacing:.1em;white-space:nowrap;}
#game-tag{color:var(--text-on-base);background:var(--base-color);padding:0.1em 0.6em;border:1px solid var(--white);}
#game-cat-tag{padding:0.1em 0.5em;}
#game-material-title{font-size:clamp(12px,2.2svh,2.2svh);color:var(--text-on-base);letter-spacing:.04em;}
#quiz-footer{position:fixed;bottom:0;left:0;right:0;height:var(--footer-h);z-index:10001;display:flex;align-items:center;justify-content:space-between;background:var(--primary-color);padding:0 calc(var(--vh)*1.5);pointer-events:none;min-width:0;}
#quiz-footer>*{pointer-events:auto;}
#quiz-footer #site-logo{display:flex;align-items:center;gap:calc(var(--vh)*0.8);text-decoration:none;color:#fff;min-width:0;flex-shrink:1;}
#quiz-footer #site-logo img{max-height:calc(var(--vh)*7);max-width:100%;width:auto;height:auto;}
#quiz-footer #quiz-logo-header .yokohama-logo{max-height:calc(var(--vh)*4.5);max-width:100%;width:auto;height:auto;margin-left:calc(var(--vh)*1.5);flex-shrink:1;min-width:0;}
#quiz-footer #quiz-logo-header{display:flex;align-items:center;background:#fff;border-radius:calc(var(--vh)*0.8);padding:calc(var(--vh)*0.6) calc(var(--vh)*1.2);flex-shrink:1;min-width:0;overflow:hidden;}
#quiz-footer .logo-text{margin:0;min-width:0;}
#quiz-footer #copyright{font-size:calc(var(--vh)*1.4);color:rgba(255,255,255,.8);user-select:none;pointer-events:none;}
#quiz-footer #quiz-hamburger{height:calc(var(--vh)*8);padding:0 calc(var(--vh)*1.8);border:none;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:calc(var(--vh)*0.8);border-radius:calc(var(--vh)*1);font-weight:700;font-family:inherit;font-size:calc(var(--vh)*2);transition:background 0.2s;flex-shrink:0;}
#quiz-footer #quiz-hamburger:hover{background:rgba(255,255,255,.25);}
#quiz-footer #quiz-hamburger .bar_btn{width:calc(var(--vh)*4);height:calc(var(--vh)*4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--vh)*0.8);}
#quiz-footer #quiz-hamburger .bar{width:calc(var(--vh)*2.5);height:calc(var(--vh)*0.3);background:#fff;border-radius:calc(var(--vh)*0.3);transition:transform 0.3s,opacity 0.3s;transform-origin:center;}


::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:rgba(var(--black-rgb),.25);}
::-webkit-scrollbar-thumb{background:var(--base-color);opacity:.6;}

/* backdrop-filter 未対応環境のフォールバック（対応環境は影響なし） */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .exp-left,.qblock,.ans-correct-inner,.ans-exp,#op-title{background:rgba(var(--white-rgb),.78);}
}

/* ── PORTRAIT ── */
@media (orientation: portrait) {
  :root{--footer-h:calc(var(--vh)*13);}
  .br-portrait{display:inline;}
  #quiz-footer{display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo ham" "copy copy";row-gap:calc(var(--vh)*0.5);column-gap:calc(var(--vh)*0.8);padding:calc(var(--vh)*0.8) calc(var(--vh)*1.5);align-items:center;}
  #quiz-footer #quiz-logo-header{grid-area:logo;min-width:0;width:fit-content;}
  #quiz-footer #quiz-hamburger{grid-area:ham;justify-self:end;}
  #quiz-footer #copyright{grid-area:copy;justify-self:center;width:auto;text-align:center;}
  /* ヘッダー：高さ基準(svh)だと縦長で幅に対し大きすぎるため、幅基準に切替＋折返し許可 */
  .game-header-row{flex-wrap:wrap;gap:0.3em 0.6em;padding:0 0.5em;}
  #game-title{font-size:clamp(12px,2.1svh,2.1svh);}
  #game-tag{font-size:clamp(12px,1.6svh,1.6svh);}
  #game-material-title{flex-basis:100%;white-space:normal;text-align:center;line-height:1.35;font-size:clamp(12px,1.8svh,1.8svh);}
  .gscreen{padding:0 0 var(--footer-h);}
  #op-title{flex-direction:column;}
  #op-title-text{font-size:3rem;}
  .exp-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
  /* キャラ＋吹き出し：上にキャラ、下にテキスト。先生＝左寄せ、生徒＝右寄せ */
  .dlg-teacher{flex-direction:column;align-items:flex-start;}
  .dlg-student{flex-direction:column-reverse;align-items:flex-end;}
  .dlg-teacher .dlg-text,.dlg-student .dlg-text{width:100%;margin:0;}
  /* 吹き出しの三角は上のキャラ画像を指すよう上向きに。先生＝左寄せ、生徒＝右寄せ */
  .dlg-teacher .dlg-text::before{content:'';position:absolute;top:-8px;left:2.5em;right:auto;width:0;height:0;border-style:solid;border-width:0 8px 8px 8px;border-color:transparent transparent var(--white) transparent;}
  .dlg-student .dlg-text::after{content:'';position:absolute;top:-8px;bottom:auto;right:3.4em;left:auto;width:0;height:0;border-style:solid;border-width:0 8px 8px 8px;border-color:transparent transparent var(--white) transparent;}
  .exp-body{gap:12px;overflow-y:auto;padding:0 1rem 10rem 0;}
  .exp-row{flex-direction:column;flex:1;height:auto;overflow:hidden;}
  .exp-left{width:100%;flex:1;height:auto;overflow-y:auto;}
  .exp-right{flex:none;width:100%;flex-direction:column;overflow:hidden;gap:0;}
  .exp-right-top{width:100%;height:calc(var(--vh)*22);flex-direction:row;overflow:hidden;gap:8px;}
  .exp-chara{flex:0 0 auto;height:100%;overflow:hidden;justify-content:center;padding:0 0.4em 0.7em 0;}
  .chara-img img{height:calc(var(--vh)*12);width:auto;}
  .chara-bubble{font-size:1.5rem;}
  .exp-media{flex:1;min-width:0;height:100%;background:transparent;border-radius:0;padding:0;}
  .exp-media .media-ph{width:100%;height:100%;}
  .media-ph{width:100%;height:100%;display:flex;justify-content:center;align-items:center;color:rgba(var(--black-rgb),.3);font-size:1.62rem;letter-spacing:.1em;border:1px solid var(--base-color);}
  .media-ph img,.media-ph video{width:100%;height:100%;object-fit:contain;}
  .exp-footer{flex-shrink:0;padding:12px 16px 20px;background:none;border-top:none;}
  /* 説明画像：縦長では複数画像を縦積みにする。個々の枠サイズは横画面と共通の基本ルールに任せる */
  .exp-media-row{height:auto;flex-direction:column;align-items:center;}
  .img-caption{font-size:1.5rem;text-align:center;padding:0.2em 0.5em 0;line-height:1.4;color:var(--text-on-pale);}
  .gfooter{flex-shrink:0;}
  .qwrap{overflow:hidden;}
  .cgrid{grid-template-columns:1fr;gap:calc(var(--vw)*2.8);grid-auto-rows:1fr;flex:1;}
  .cbtn-v{flex-direction:row;height:100%;padding:0;gap:0;align-items:center;}
  .cbtn-v.no-img{aspect-ratio:auto;}
  .cbtn-v.no-img .cbtn-v-info{height:100%;padding:0 1em;}
  .cbtn-v-text{text-align:left;}
  .cbtn-v-info{flex-direction:column;align-items:flex-start;}
  .qchara{height:calc(var(--vw)*16);max-height:8.75rem;}
  .qtext{font-size:1.35rem;}
  .fbar{height:calc(var(--vh)*7);}
  .cbtn-v-img{width:calc(var(--vw)*25);height:100%;flex-shrink:0;border-radius:0;align-self:stretch;aspect-ratio:auto;}
  /* 回答：上部を縦積みにして答えテキストとキャラの重なりを解消 */
  .ans-top-row{flex-direction:column;align-items:center;gap:0.6rem;margin:0 1rem;}
  .ans-top-wrap{flex:none;align-items:center;}
  .ans-correct-text{text-align:center;}
  .ans-exp-img{flex-shrink:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:rgba(var(--black-rgb),.3);height:auto;margin:0;}
  .ans-exp-img img{width:100%;height:auto;}
  .ans-content-wrap{padding:0.5rem 1rem 10rem 0;}
  .rinner{padding:calc(var(--vh)*3) calc(var(--vw)*3) calc(var(--vh)*15) calc(var(--vw)*1);}
  /* 結果：横並びだとキャラに幅を奪われスコアが潰れるため縦積みに */
  .r-top{flex-direction:column;align-items:center;gap:0.5rem;padding:1.5rem 0 2rem;}
  .r-content{align-items:center;text-align:center;}
  .rscore-row{justify-content:center;}
  .r-charas{align-self:center;}
  .r-charas img{height:16svh;}
  #ans-read-done{position:sticky;bottom:0;}
  .btn,.cbtn-v{-webkit-tap-highlight-color:transparent;font-size:1.5rem;}
}

/* ══════════════ 共通ヘッダー（get_header()）のクイズページ用上書き ══════════════
   header.php/footer.phpは変更せず、共通ヘッダー(#site-header)自体を
   このページだけ下部（フッターの位置）に表示するようCSSで調整する
   （challenge.cssのbody.is-challenge-pageと同じ考え方）。
   クイズ画面はさらに#bg-stack（z-index:9999）が画面全体を覆うため、
   #site-header・#nav-drawerのz-indexもそれより上に引き上げる必要がある。
   common.cssの元の関係（#site-header:2000 > #nav-drawer:1999）と同じく、
   #site-headerを#nav-drawerより上にしておくことで、メニューを開いた
   状態でもロゴ・とじるボタン（#site-header側）が隠れずに残るようにする。 */
body.is-quiz-page #site-header {
  top: auto;
  bottom: 0;
  z-index: 10001; /* #nav-drawerより上（メニューを開いてもヘッダーが隠れないように） */
  background: #0068b7;
  height: auto;
  padding: clamp(4px, .9vw, 7px) 14px;
}
body.is-quiz-page #ruby-toggle {
  display: none;
}
body.is-quiz-page #hamburger {
  border: 2px solid #fff;
}
body.is-quiz-page #nav-drawer {
  z-index: 10000; /* #bg-stack(9999)より上・#site-headerより下 */
  padding: 40px 40px 120px;
}
/* クイズ画面は#bg-stackが全画面固定表示のため、#site-footer（コピーライト）は
   通常の流し込み配置だと表示されない。#site-headerと同じ下部バーの中央に
   重ねて表示する（ロゴ・メニューと同じエリアに常に見える状態にする）。 */
body.is-quiz-page #site-footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 10001; /* #site-headerと同じ階層 */
  background: transparent;
  padding: clamp(4px, .9vw, 7px) 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  pointer-events: none;
}
/* 画面が狭いとロゴ・メニューだけでバーの横幅を使い切ってしまい重なるため、
   #site-headerを画面端から少し持ち上げ、その下（画面の一番端）に
   もう1段の帯を設けてそこに小さく表示する。 */
@media (max-width: 780px) {
  body.is-quiz-page #site-header {
    bottom: 18px;
  }
  body.is-quiz-page #site-footer {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    background: var(--primary-color, #0068b7);
    text-align: center;
    padding: 2px 10px;
    font-size: 10px;
  }
}
body.is-quiz-page.menu-open {
  padding-right: var(--ms-scrollbar-w, 0px);
}
@media (max-width: 600px) {
  body.is-quiz-page #site-header {
    padding: clamp(6px, 2.5vw, 10px) 10px;
  }
}

/* #site-headerの実際の高さ（common.cssの--header-h:78px固定＋上下padding）は、
   旧#quiz-footerのようにvh基準では伸縮しない。ゲーム画面側の下部余白（--footer-h）
   は、その実際の高さと"ぴったり"一致させる（大まかな固定値だと、実際の高さとの
   差がそのまま隙間として見えてしまうため、#site-header側のpadding指定と
   同じ計算式をここでも使う）。vh基準の値も残しておき、大きい画面ではそちらが
   優先されるようにする（今までどおり比例して余白を取る）。 */
body.is-quiz-page {
  --footer-h: max(calc(var(--vh) * 10), calc(var(--header-h) + 2 * clamp(4px, .9vw, 7px)));
}
@media (orientation: portrait) {
  body.is-quiz-page {
    --footer-h: max(calc(var(--vh) * 13), calc(var(--header-h) + 2 * clamp(4px, .9vw, 7px)));
  }
}
/* 幅の狭い画面では#site-headerの下にコピーライト用の帯（18px）が
   追加で乗る分、その分だけ余分に余白を確保する。 */
@media (max-width: 780px) {
  body.is-quiz-page {
    --footer-h: max(calc(var(--vh) * 10), calc(18px + var(--header-h) + 2 * clamp(4px, .9vw, 7px)));
  }
}
@media (max-width: 780px) and (orientation: portrait) {
  body.is-quiz-page {
    --footer-h: max(calc(var(--vh) * 13), calc(18px + var(--header-h) + 2 * clamp(4px, .9vw, 7px)));
  }
}
/* 600px以下は#site-header側のpaddingもmax-width:600pxの上書きに切り替わるため、
   その計算式（clamp(6px, 2.5vw, 10px)）に合わせる。 */
@media (max-width: 600px) {
  body.is-quiz-page {
    --footer-h: max(calc(var(--vh) * 10), calc(18px + var(--header-h) + 2 * clamp(6px, 2.5vw, 10px)));
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  body.is-quiz-page {
    --footer-h: max(calc(var(--vh) * 13), calc(18px + var(--header-h) + 2 * clamp(6px, 2.5vw, 10px)));
  }
}


/* ══════════════ ドロワーメニュー（クイズページ用の上書き・旧#quiz-footer構成向け） ══════════════
   ベースのスタイルはテーマ共通の assets/css/common.css（wp_head()で読込済み）。
   ここではクイズ画面の事情に合わせた差分だけを指定する。
   ・クイズは上部にサイトヘッダーが無く、下部に #quiz-footer（z-index:10001）がある
   ・フッターを覆わないことで「とじる」ボタンを常に押せる状態に保つ
   ※ get_header()/get_footer()化が済んだページ（body.is-quiz-page）では
     上のブロックが優先されるため、このブロックは未移行ページ専用。          */
#nav-drawer{
  z-index:10000;                                  /* #bg-stack(9999) より上・#quiz-footer(10001) より下 */
  height:calc(var(--vh)*100);
  padding:calc(var(--vh)*6) calc(var(--vw)*6) calc(var(--footer-h) + var(--vh)*6);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
#nav-backdrop{display:none;}
/* ハンバーガー：開いている間はフッター上で×印に */
#quiz-footer #quiz-hamburger[aria-expanded="true"]{background:#fff;color:var(--primary-color);}
#quiz-footer #quiz-hamburger[aria-expanded="true"] .bar{background:var(--primary-color);}
#quiz-footer #quiz-hamburger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(calc(var(--vh)*1.1)) rotate(45deg);}
#quiz-footer #quiz-hamburger[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
#quiz-footer #quiz-hamburger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(calc(var(--vh)*-1.1)) rotate(-45deg);}

@media (orientation:portrait){
  #nav-drawer{padding:calc(var(--vh)*4) calc(var(--vw)*7) calc(var(--footer-h) + var(--vh)*6);}
}

/* ドロワーのスクロールバー（つまみをサイト主要カラーに）
   背景が同系色のため、トラックを白系にしてつまみを見えるようにしている */
#nav-drawer{scrollbar-width:thin;scrollbar-color:var(--primary-color) rgba(255,255,255,.35);}
#nav-drawer::-webkit-scrollbar{width:calc(var(--vh)*1.2);}
#nav-drawer::-webkit-scrollbar-track{background:rgba(255,255,255,.35);border-radius:calc(var(--vh)*1);}
#nav-drawer::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:calc(var(--vh)*1);border:1px solid rgba(255,255,255,.6);}
#nav-drawer::-webkit-scrollbar-thumb:hover{background:var(--primary-color);opacity:.85;}

/* ══════════════ フリガナ（小学生向け・常時表示） ══════════════
   台本の「漢字（かな）」を quiz-*-elementary.js が <ruby> に変換して出力する。
   ふりがなオン／オフ機能とは独立しており、常に表示される。
   #bg-stackにスコープし、共通ヘッダーのドロワーメニュー（#nav-drawer）内の
   ルビ表示に影響しないようにしている。                                */
#bg-stack ruby{ruby-align:center;line-height:normal;}
#bg-stack ruby rt{font-size:.5em;font-weight:inherit;color:inherit;line-height:normal;letter-spacing:0;text-align:center;}
/* ルビの分だけ行間に余裕を持たせる（前の行と重ならないように） */
.dlg-text,.bgtext{line-height:2.05;}
#qtext,.cbtn-v-text,#ans-correct-text,.sqtxt,#rmsg,#rsub{line-height:1.9;}
#bg-maintitle,#bg-title,#bg-subtitle{line-height:1.65;}
#game-material-title{line-height:1.9;}
/* 選択肢・見出しなど背景が濃い場所ではルビを少し明るく */
.cbtn-v-text ruby rt{opacity:.85;}


/* ══════════════ 問題画面のオーバーフロー時フォールバック ══════════════
   選択肢の文字が収まらない、または画像枠が横4：縦3を保てない場合だけ
   quiz-menu.js が .quiz-question-scroll を付ける。                       */
#screen-question .qwrap.quiz-question-scroll{
  display:block;
  flex:1;
  width:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0 1.2rem 4rem 0.5rem;
}
#screen-question .qwrap.quiz-question-scroll .cgrid{
  display:grid;
  flex:none;
  height:auto;
  min-height:0;
  align-content:start;
  align-items:start;
}
#screen-question .qwrap.quiz-question-scroll .cbtn-v{
  height:auto;
  min-height:0;
  align-self:start;
}
#screen-question .qwrap.quiz-question-scroll .cbtn-v-info{
  flex:none;
  height:auto;
}
#screen-question .qwrap.quiz-question-scroll .cbtn-v-text{
  overflow:visible;
}
#screen-question .qwrap.quiz-question-scroll .cbtn-v-img{
  flex:none;
  height:auto;
  aspect-ratio:4/3;
}
#screen-question .qwrap.quiz-question-scroll .cbtn-v.no-img{
  aspect-ratio:auto;
  min-height:8rem;
}
#screen-question .qwrap.quiz-question-scroll .cbtn-v.no-img .cbtn-v-info{
  height:auto;
  min-height:8rem;
}

@media (orientation:portrait){
  #screen-question .qwrap.quiz-question-scroll .cgrid{
    grid-auto-rows:auto;
  }
  #screen-question .qwrap.quiz-question-scroll .cbtn-v{
    height:auto;
    min-height:0;
  }
  #screen-question .qwrap.quiz-question-scroll .cbtn-v-info{
    flex:1 1 auto;
    width:auto;
    min-width:0;
  }
  #screen-question .qwrap.quiz-question-scroll .cbtn-v-img{
    width:calc(var(--vw)*25);
    height:auto;
    align-self:center;
    aspect-ratio:4/3;
  }
  #screen-question .qwrap.quiz-question-scroll .cbtn-v.no-img .cbtn-v-info{
    width:100%;
  }
}