/* 将来性ZEROクエスト2 */
.q2-page{padding-top:8px;padding-bottom:30px;}
.q2-h1{text-align:center;font-size:clamp(20px,5.4vw,30px);margin:6px 0 12px;letter-spacing:.04em;
  color:#2a1a10;text-shadow:2px 2px 0 #ffd24a;}
.q2-h1 .two{display:inline-block;margin-left:2px;color:#e8455e;text-shadow:2px 2px 0 #2a1a10;}
.q2-h1 small{display:block;font-size:13px;color:#6a5a4a;text-shadow:none;margin-top:4px;font-weight:normal;}

.q2-stage-wrap{max-width:960px;margin:0 auto;}
.q2-stage{position:relative;width:100%;aspect-ratio:16/9;border:4px solid #2a1a10;border-radius:12px;
  overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);background:#87ceeb;}
#q2Canvas{display:block;width:100%;height:100%;image-rendering:auto;outline:none;}
.q2-sound{position:absolute;left:8px;bottom:8px;width:34px;height:34px;border-radius:50%;
  border:2px solid #fff;background:rgba(0,0,0,.5);color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;}
.q2-sound:active{transform:translate(1px,1px);}

/* 操作ボタン */
.q2-pad{max-width:960px;margin:12px auto 0;display:flex;justify-content:space-between;gap:12px;
  user-select:none;-webkit-user-select:none;}
.q2-pad button{font-family:inherit;font-weight:900;border:3px solid #2a1a10;border-radius:12px;
  background:#ffe0a0;color:#2a1a10;box-shadow:0 4px 0 #2a1a10;cursor:pointer;touch-action:manipulation;}
.q2-pad button.on{transform:translateY(3px);box-shadow:0 1px 0 #2a1a10;background:#ffd24a;}
.q2-pad .dpad{display:flex;gap:8px;}
.q2-pad .dpad button{width:62px;height:62px;font-size:20px;}
.q2-pad .acts{display:flex;gap:8px;align-items:flex-end;}
.q2-pad .acts .dash{width:72px;height:52px;font-size:13px;background:#a8d8ff;}
.q2-pad .acts .jump{width:86px;height:62px;font-size:15px;line-height:1.1;background:#ffb0c0;}
.q2-pad .acts .jump span{font-size:11px;}

.q2-help{max-width:960px;margin:16px auto 0;background:#fffdf6;border:3px solid #2a1a10;border-radius:12px;
  padding:12px 16px;font-size:13px;line-height:1.8;}
.q2-help p{margin:0 0 6px;}
.q2-help ul{margin:8px 0 0;padding-left:20px;}
.q2-help li{margin:3px 0;}
.q2-back{max-width:960px;margin:14px auto 0;text-align:center;font-size:13px;}

@media (max-width:700px){
  .q2-pad .dpad button{width:54px;height:54px;}
  .q2-pad .acts .jump{width:74px;height:56px;}
  .q2-pad .acts .dash{width:62px;height:46px;}
  .q2-help{font-size:12px;}
}

/* 全画面 (アスオタウンと 同じ 流儀) */
.q2-full-btn{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;
  border:2px solid #fff;background:rgba(0,0,0,.5);color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;z-index:3;}
.q2-full-btn:active{transform:translate(1px,1px);}
body.q2-immersive{background:#0d0f14;overflow:hidden;}
body.q2-immersive header,
body.q2-immersive footer,
body.q2-immersive .asuka-breadcrumb,
body.q2-immersive .q2-h1,
body.q2-immersive .q2-help,
body.q2-immersive .q2-back{display:none !important;}
body.q2-immersive .asuka-page{padding:0 !important;margin:0 !important;max-width:none !important;}
body.q2-immersive .q2-stage-wrap{max-width:none;margin:0;}
body.q2-immersive .q2-stage{position:fixed;inset:0;width:100vw;height:100vh;border:0;border-radius:0;
  display:flex;align-items:center;justify-content:center;background:#0d0f14;z-index:100;}
body.q2-immersive #q2Canvas{width:min(100vw, calc(100vh * 16 / 9));height:min(100vh, calc(100vw * 9 / 16));}
body.q2-immersive .q2-sound{position:fixed;left:10px;bottom:10px;z-index:120;}
body.q2-immersive .q2-full-btn{position:fixed;right:10px;bottom:10px;z-index:120;}
body.q2-immersive .q2-pad{position:fixed;left:0;right:0;bottom:0;z-index:110;margin:0;padding:0 12px 12px;
  max-width:none;opacity:.92;}
@media (min-width:900px){ body.q2-immersive .q2-pad{display:none;} }