:root{

  --bg:#f2f7ff;

  --card:#ffffff;

  --text:#1f2937;

  --muted:#6b7280;

  --border:#d1d5db;

  --primary:#2563eb;

  --primary-soft:#dbeafe;

  --radius:16px;

  --shadow:0 8px 20px rgba(15,23,42,.08);

  --max:960px;

  --nav-height:86px;

}

/* Reset & Base */

*{

  box-sizing:border-box;

  -webkit-tap-highlight-color:transparent;

}

body.quiz-page{

  margin:0;

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;

  color:var(--text);

  line-height:1.7;

  background:linear-gradient(180deg, #e0f2fe 0%, #f2f7ff 100%);

  padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 16px);

}

/* Layout */

.container{

  max-width:var(--max);

  margin:0 auto;

  padding:0 16px 32px;

}

/* Header */

.site-header{

  padding:28px 0 12px;

  text-align:center;

}

.badge{

  display:inline-block;

  font-size:12px;

  font-weight:800;

  padding:6px 12px;

  border-radius:999px;

  background:rgba(37,99,235,.06);

  border:1px solid rgba(37,99,235,.30);

  color:#1d4ed8;

}

.site-header h1{

  margin:14px 0 10px;

  font-size:clamp(22px,4.2vw,30px);

  line-height:1.4;

}

.lead{

  margin:0;

  font-size:14px;

  color:var(--text);

}

.lead-small{

  margin:6px 0 0;

  font-size:12px;

  color:var(--muted);

}

/* Panels */

.panel{

  margin-top:20px;

  padding:18px 20px 22px;

  border-radius:var(--radius);

  background:rgba(255,255,255,.95);

  border:1px solid var(--border);

  box-shadow:var(--shadow);

}

.panel.quiz{

  padding-top:22px;

}

/* ステータス行 */

.status-row{

  display:flex;

  justify-content:space-between;

  font-size:14px;

  margin-bottom:10px;

  color:var(--text);

}

/* Progress bar */

.progress-wrap{

  height:10px;

  width:100%;

  border-radius:999px;

  background:#e5e7eb;

  overflow:hidden;

  margin-bottom:14px;

}

.progress-bar{

  height:100%;

  width:0%;

  background:var(--primary);

  transition:width .3s ease;

}

/* 問題文 */

.q-title{

  margin:0 0 8px;

  font-size:18px;

  font-weight:700;

}

.q-text{

  margin:0 0 12px;

  font-size:14px;

  color:var(--text);

}

/* スタート画面用 */

.start-points{

  margin:0 0 16px;

  padding-left:20px;

  font-size:14px;

  color:var(--text);

}

.start-points li{

  margin:4px 0;

}

/* ボタン共通 */

.btn-next{

  display:block;

  width:fit-content;

  margin:10px auto 0;

  padding:20px 30px;

  font-size:15px;

  font-weight:700;

  border-radius:999px;

  border:none;

  cursor:pointer;

  background:#2563eb;

  color:#ffffff;

  box-shadow:0 8px 20px rgba(37,99,235,.35);

  transition:.2s ease;

}

.btn-next.small{

  padding:10px 18px;

  font-size:14px;

  vertical-align:middle;

}

.btn-next:hover{

  background:#1d4ed8;

  transform:translateY(-2px);

  box-shadow:0 12px 26px rgba(37,99,235,.45);

}

.btn-next:active{

  transform:translateY(0);

  box-shadow:0 6px 16px rgba(37,99,235,.40);

}

/* 選択肢 */

.choices-area{

  display:flex;

  flex-direction:column;

  gap:8px;

  margin-top:4px;

}

.choice-btn{

  display:flex;

  align-items:flex-start;

  gap:8px;

  width:100%;

  border-radius:12px;

  border:1px solid var(--border);

  background:#ffffff;

  padding:10px 12px;

  text-align:left;

  font-size:14px;

  cursor:pointer;

  box-shadow:0 4px 10px rgba(15,23,42,.06);

  transition:.2s ease;

}

.choice-btn:hover{

  background:#eff6ff;

  border-color:var(--primary);

}

.choice-label{

  display:inline-block;

  min-width:1.8em;

  font-weight:700;

  color:#4f46e5;

}

.choice-text{

  flex:1;

  white-space:normal;

  word-break:break-word;

}

.choice-btn.correct{

  border-color:#16a34a;

  background:#dcfce7;

}

.choice-btn.wrong{

  border-color:#b91c1c;

  background:#fee2e2;

}

.choice-btn.disabled{

  opacity:.8;

  cursor:default;

  pointer-events:none;

}

/* 解説 */

.result-box{

  margin-top:14px;

  padding:10px 12px;

  border-radius:12px;

  font-size:13px;

  line-height:1.6;

  border:1px solid #e5e7eb;

  background:#f9fafb;

}

.result-box .title{

  font-weight:700;

  margin-bottom:4px;

}

.result-ok{

  border-color:#bbf7d0;

  background:#f0fdf4;

}

.result-ng{

  border-color:#fecaca;

  background:#fef2f2;

}

/* スタンプ */

.stamp-area{

  min-height:34px;

  margin-top:10px;

  font-size:24px;

  font-weight:700;

  text-align:center;

}

.stamp{

  display:inline-block;

  transform:scale(0.2);

  animation:stamp-pop .35s ease-out forwards;

}

@keyframes stamp-pop{

  0%{ transform:scale(0.2) rotate(-10deg); opacity:0; }

  70%{ transform:scale(1.1) rotate(3deg); opacity:1; }

  100%{ transform:scale(1) rotate(0); opacity:1; }

}

/* Footer */

.footer{

  margin-top:32px;

  text-align:center;

  font-size:12px;

  color:var(--muted);

}

.footer-note{

  margin-top:4px;

  font-size:11px;

  color:var(--muted);

}

/* ===== 下部ナビ ===== */

.bottom-nav{

  position:fixed;

  left:0;

  right:0;

  bottom:0;

  z-index:50;

  width:100%;

  max-width:520px;

  margin:0 auto;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:8px;

  padding:10px 12px calc(10px + env(safe-area-inset-bottom));

  background:rgba(255,255,255,0.9);

  backdrop-filter:blur(16px);

  border-top:1px solid rgba(50,60,90,0.08);

  box-shadow:0 -8px 30px rgba(43,53,88,0.06);

}

.nav-item{

  min-height:58px;

  border-radius:18px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  color:#5f6475;

  transition:background .18s ease, color .18s ease, transform .18s ease;

}

.nav-item.active{

  background:var(--primary-soft);

  color:var(--primary);

  font-weight:800;

}

.nav-item:active{

  transform:scale(0.97);

}

.nav-icon{

  font-size:20px;

  line-height:1;

}

.nav-text{

  font-size:12px;

  line-height:1;

  letter-spacing:0.01em;

}

/* Accessibility */

.btn-next:focus-visible,

.choice-btn:focus-visible,

.nav-item:focus-visible{

  outline:3px solid rgba(37,99,235,.45);

  outline-offset:3px;

}

/* Responsive */

@media(max-width:600px){

  .panel{

    padding:16px 14px 18px;

  }

  .choice-btn{

    font-size:13px;

  }

  .site-header h1{

    font-size:22px;

  }

  .lead{

    font-size:13px;

  }

}

@media (hover:none){

  .btn-next:hover,

  .choice-btn:hover{

    transform:none;

    box-shadow:inherit;

  }

}

@media (prefers-reduced-motion: reduce){

  .progress-bar,

  .btn-next,

  .choice-btn,

  .stamp,

  .nav-item{

    transition:none !important;

    animation:none !important;

  }

}
.btn-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
a,
a:visited,
a:hover,
a:active{
  text-decoration: none;
  color: inherit;
}