:root {
  color-scheme: light;
  --color-primary: #182C48;
  --color-primary-hover: #253f60;
  --color-background: #F5F7FA;
  --color-accent: #C7A45B;
  --color-surface: #ffffff;
  --color-text: #25364b;
  --color-muted: #637085;
  --color-border: #dfe4eb;
  --color-tint: #f7f8fb;
  --color-notice: #f8f5ed;
  --color-focus: #866524;
  --background-page: radial-gradient(ellipse at 85% 15%, #e9edf4 0, transparent 55%), linear-gradient(145deg, #fcfcfd, var(--color-background));
  --background-panel: linear-gradient(155deg, #213b5c, var(--color-primary) 65%);
  --radius-card: 20px;
  --radius-button: 10px;
  --radius-small: 8px;
  --shadow-card: 0 18px 60px #182c480c, 0 2px 8px #182c4805;
  --shadow-button: 0 4px 12px #182c4814;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-title: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --motion-duration: 220ms;
  --page-gutter: 28px;
  --card-padding-inline: 44px;
  --title-padding-inline: 48px;
  --section-gap: 28px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 280px; min-height: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--background-page); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.8; }
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
h1:focus, h2:focus { outline: none; }
.site-header { width: min(1120px, 100%); margin: 0 auto; padding: 30px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 30px; height: 36px; color: var(--color-accent); flex-shrink: 0; }
.brand-name { display: block; color: var(--color-primary); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.brand-caption { display: block; margin-top: 2px; font-size: 8px; letter-spacing: .18em; color: var(--color-muted); }
.header-label { color: var(--color-muted); font-size: 11px; letter-spacing: .08em; }
main { width: 100%; flex: 1; display: grid; align-items: center; padding: 34px var(--page-gutter) 50px; }
.screen { width: min(880px, 100%); margin: 0 auto; animation: screen-enter var(--motion-duration) ease-out both; }
.title-card { display: grid; grid-template-columns: 31% 1fr; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.edition-panel { background: var(--background-panel); color: var(--color-surface); padding: 38px 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; }
.edition-panel::before { content: ""; position: absolute; inset: 12px; border: 1px solid #c7a45b33; pointer-events: none; }
.panel-kicker { align-self: flex-start; color: #d1d9e4; font-size: 9px; line-height: 1.9; letter-spacing: .19em; }
.edition-seal { width: 174px; height: 174px; border: 1px solid #c7a45b80; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 5px; outline: 1px solid #c7a45b2e; outline-offset: 7px; margin: 50px 0; }
.seal-label { color: var(--color-accent); font-family: var(--font-title); font-size: 13px; }
.seal-number { font-family: Georgia, serif; font-size: 83px; font-weight: 400; line-height: 1; letter-spacing: -.06em; padding-right: 4px; }
.panel-foot { align-self: stretch; display: flex; align-items: center; gap: 15px; font-family: Georgia, serif; font-size: 14px; letter-spacing: .15em; color: var(--color-accent); }
.gold-line { height: 1px; background: #c7a45b66; flex: 1; }
.title-content { padding: 54px var(--title-padding-inline) 44px; }
.eyebrow { margin: 0 0 25px; display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: .09em; color: var(--color-muted); }
.gold-dot { width: 6px; height: 6px; background: var(--color-accent); display: inline-block; flex: 0 0 auto; }
h1 { margin: 0; color: var(--color-primary); font-family: var(--font-title); font-size: clamp(27px, 3.3vw, 35px); font-weight: 600; line-height: 1.7; letter-spacing: .025em; animation: title-enter 420ms ease-out both; overflow-wrap: anywhere; }
.title-edition { display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: .14em; }
.exam-date { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 25px; }
.date-label { color: var(--color-muted); border: 1px solid var(--color-border); padding: 2px 9px; border-radius: 4px; font-size: 10px; letter-spacing: .05em; }
.exam-date time { font-size: 16px; font-weight: 500; letter-spacing: .04em; }
.intro { color: var(--color-muted); margin: 28px 0; font-size: 13px; line-height: 1.9; }
.button { border: 1px solid transparent; border-radius: var(--radius-button); min-height: 54px; padding: 14px 22px; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; gap: 14px; text-align: center; font-size: 14px; font-weight: 600; transition: background-color var(--motion-duration), transform var(--motion-duration), box-shadow var(--motion-duration); }
.button-primary { width: 100%; background: var(--color-primary); color: var(--color-surface); box-shadow: var(--shadow-button); }
/* 左右を同じ幅に確保し、矢印の有無にかかわらず文字を中央に置く。 */
.button-label { min-width: 0; overflow-wrap: anywhere; }
.button:has(.button-arrow) { grid-template-columns: 20px minmax(0, 1fr) 20px; }
.button:has(.button-arrow) .button-label { grid-column: 2; grid-row: 1; }
.button-arrow { grid-column: 3; grid-row: 1; font-size: 20px; font-weight: 400; line-height: 1; transition: transform var(--motion-duration); }
.button:active { transform: translateY(1px); }
.title-note { text-align: center; color: var(--color-muted); font-size: 10px; margin: 14px 0 0; }
.screen-caption { margin: 27px 0 0; display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--color-muted); font-family: var(--font-title); font-size: 12px; letter-spacing: .12em; }
.screen-caption > span { height: 1px; width: 23px; background: var(--color-accent); }
.site-footer { display: flex; align-items: center; flex-direction: column; gap: 4px; color: var(--color-muted); padding: 20px 20px max(25px, env(safe-area-inset-bottom)); font-size: 10px; letter-spacing: .08em; text-align: center; }
.site-footer span[lang] { font-size: 8px; letter-spacing: .14em; }
.guide-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.guide-header { padding: 32px var(--card-padding-inline) 26px; border-bottom: 1px solid var(--color-border); }
.guide-header .eyebrow { margin-bottom: 12px; }
.guide-header h2 { margin: 0; color: var(--color-primary); font-family: var(--font-title); font-size: 29px; letter-spacing: .08em; font-weight: 600; }
.guide-header > p:last-child { color: var(--color-muted); font-size: 12px; margin: 9px 0 0; }
.guide-content { padding: var(--section-gap) var(--card-padding-inline) 32px; }
.section-heading { display: flex; gap: 12px; align-items: center; font-size: 14px; margin: 0 0 16px; color: var(--color-primary); }
.section-number { color: var(--color-focus); font-family: Georgia, serif; font-size: 12px; font-weight: 400; }
.exam-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: 21px 0; background: var(--color-tint); }
.exam-stats > div { text-align: center; padding: 0 10px; }
.exam-stats > div + div { border-left: 1px solid var(--color-border); }
.exam-stats dt { font-size: 11px; color: var(--color-muted); margin-bottom: 4px; }
.exam-stats dd { margin: 0; font-size: 12px; color: var(--color-primary); }
.exam-stats strong { font-family: Georgia, serif; font-size: 30px; margin: 0 3px; font-weight: 400; line-height: 1.3; }
.stat-detail { display: block; font-size: 10px; color: var(--color-muted); }
.exam-stats .stat-text { font-size: 20px; line-height: 1.95; }
.rules-section { margin-top: var(--section-gap); }
.rules-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.rules-list li { position: relative; padding-left: 18px; margin-top: 10px; }
.rules-list li::before { content: ""; position: absolute; left: 1px; top: .8em; width: 4px; height: 4px; background: var(--color-accent); border-radius: 50%; }
.rules-list strong { font-weight: 600; }
.rule-note { display: block; color: var(--color-muted); font-size: 12px; margin-top: 2px; }
.preparation-note { display: flex; align-items: flex-start; gap: 11px; background: var(--color-notice); border-radius: var(--radius-small); padding: 15px 18px; margin: 25px 0; }
.info-icon { flex-shrink: 0; width: 17px; height: 17px; line-height: 16px; margin-top: 3px; text-align: center; border: 1px solid var(--color-focus); color: var(--color-focus); border-radius: 50%; font-family: Georgia, serif; font-size: 11px; }
.preparation-note p { margin: 0; font-size: 11px; }
.preparation-note strong { display: block; font-size: 12px; font-weight: 600; }
.preparation-note p > span { display: block; margin-top: 4px; color: var(--color-muted); }
.guide-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 350px; margin: 0 auto; }
.button-secondary { color: var(--color-muted); background: transparent; min-height: 46px; font-size: 12px; font-weight: 400; }
.preparation-message { margin: 0; color: var(--color-primary); text-align: center; font-size: 13px; font-weight: 600; }
.preparation-message:not(:empty) { margin-top: 16px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-tint); }
.noscript-note { text-align: center; padding: 16px; }
@media (hover: hover) { .button-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); } .button-primary:hover .button-arrow { transform: translateX(3px); } .button-secondary:hover { background: var(--color-tint); color: var(--color-primary); } }
@keyframes screen-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes title-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 680px) {
  :root { --page-gutter: 20px; --card-padding-inline: 23px; --title-padding-inline: 26px; --section-gap: 24px; }
  .site-header { padding: max(21px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 21px max(22px, env(safe-area-inset-left)); }
  .brand-mark { width: 25px; height: 31px; }
  .brand { gap: 10px; }
  .brand-name { font-size: 12px; letter-spacing: .06em; }
  .brand-caption { font-size: 7px; letter-spacing: .1em; }
  .header-label { display: none; }
  main { padding: 17px max(var(--page-gutter), env(safe-area-inset-right)) 32px max(var(--page-gutter), env(safe-area-inset-left)); }
  .title-card { grid-template-columns: 1fr; }
  .edition-panel { min-height: 105px; padding: 25px 28px; flex-direction: row; gap: 14px; }
  .edition-panel::before { inset: 8px; }
  .panel-kicker { align-self: center; font-size: 8px; }
  .edition-seal { width: auto; height: auto; border: 0; outline: 0; margin: 0 2px 0 auto; gap: 7px; }
  .seal-number { font-size: 50px; }
  .seal-label { font-size: 10px; }
  .panel-foot { display: none; }
  .title-content { padding: 30px var(--title-padding-inline) 29px; }
  .eyebrow { margin-bottom: 19px; font-size: 10px; }
  h1 { font-size: clamp(25px, 7.1vw, 34px); line-height: 1.7; letter-spacing: .02em; }
  .title-edition { font-size: 13px; margin-bottom: 8px; }
  .exam-date { gap: 11px; margin-top: 21px; }
  .exam-date time { font-size: 15px; }
  .intro { font-size: 12px; margin: 23px 0; }
  .desktop-break { display: none; }
  .title-note { font-size: 10px; text-align: left; }
  .screen-caption { font-size: 11px; margin-top: 22px; }
  .guide-header { padding: 25px var(--card-padding-inline) 22px; }
  .guide-header h2 { font-size: 26px; }
  .guide-header > p:last-child { font-size: 11px; }
  .guide-content { padding: var(--section-gap) var(--card-padding-inline); }
  .exam-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .exam-stats > div { padding: 16px 8px; }
  .exam-stats > div:nth-child(3) { border-left: 0; }
  .exam-stats > div:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .section-heading { font-size: 13px; gap: 10px; }
  .rules-list { font-size: 12px; }
  .rule-note { font-size: 11px; }
  .preparation-note { padding: 14px 12px; }
  .preparation-note strong { font-size: 11px; }
  .guide-actions { max-width: none; }
  .site-footer { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 問題画面も既存カードと同じ配色・余白を使用する。 */
#resume-actions { display: grid; gap: 10px; }
#restart-button { width: 100%; border-color: var(--color-accent); background: var(--color-notice); color: var(--color-primary); font-size: 14px; font-weight: 600; }
#storage-notice { font-size: 12px; overflow-wrap: anywhere; }
#storage-notice:empty { display: none; }
#question-progress { display: block; width: 100%; height: 8px; margin: 22px 0 14px; border: 0; border-radius: 8px; overflow: hidden; background: var(--color-border); accent-color: var(--color-accent); }
#question-progress::-webkit-progress-bar { background: var(--color-border); }
#question-progress::-webkit-progress-value { background: var(--color-accent); }
#question-progress::-moz-progress-bar { background: var(--color-accent); }
.question-body { font-size: 16px; overflow-wrap: anywhere; }
.question-body p { margin: 0 0 24px; }
.question-body ul { padding-left: 1.5em; margin-bottom: 24px; }
.answer-field { border-top: 1px solid var(--color-border); padding-top: 24px; }
.answer-field label { display: block; font-weight: 600; margin-bottom: 10px; }
#numeric-answer { width: 100%; max-width: 320px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--color-muted); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-primary); font: inherit; font-size: 20px; }
#numeric-answer:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
#numeric-answer[aria-invalid="true"] { border-color: #a13232; }
#answer-help, #save-status { font-size: 12px; color: var(--color-muted); }
#save-status { min-height: 2em; }

#choice-field { min-width: 0; margin: 0; padding: 20px 0 0; border: 0; }
#choice-field legend { font-weight: 600; }
#choice-field label { display: flex; gap: 12px; align-items: center; min-height: 54px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-small); cursor: pointer; }
#choice-field label:has(input:checked) { border-color: var(--color-accent); background: var(--color-notice); }
#choice-field input { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--color-primary); }
#choice-field input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
#choice-field span { overflow-wrap: anywhere; min-width: 0; }
#audio-field { margin-bottom: 24px; }
.audio-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.audio-controls #audio-play-button { flex: 1 1 170px; }
.audio-controls #audio-stop-button { flex: 1 1 135px; border: 1px solid var(--color-accent); background: var(--color-notice); color: var(--color-primary); font-weight: 600; }
#audio-status { font-size: 13px; }
.question-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.question-navigation #next-question { width: auto; min-width: 180px; margin-left: auto; }
@media (max-width: 480px) { .question-navigation #next-question { width: 100%; } }