:root {
  color-scheme: light;
  --blue: #005bac;
  --blue-deep: #0f4c81;
  --blue-darker: #063a6d;
  --blue-soft: #e8f2fa;
  --blue-pale: #f3f7fa;
  --ink: #1e1e1e;
  --muted: #58636e;
  --line: #d3dde4;
  --line-strong: #aebdca;
  --success: #0d6446;
  --error: #a5261c;
  --error-soft: #fdf0ef;
  --focus: #103d63;
  --focus-light: #ffd24d;
  --content: 980px;
  --header: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--blue-pale);
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
html[data-booting] .access-gate,
html[data-booting] .course-app { display: none !important; }
h1, h2, h3 { text-wrap: balance; }

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  color: #fff;
  background: var(--blue);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.course-hero :focus-visible,
.gate-brand :focus-visible,
.completion-card :focus-visible,
.site-footer :focus-visible { outline-color: var(--focus-light); }

.eyebrow {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Access */
.access-gate {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 44%) minmax(420px, 56%);
  background: #fff;
}
.gate-brand {
  display: flex;
  min-height: 100vh;
  padding: 56px 7vw;
  flex-direction: column;
  justify-content: space-between;
  background-color: #003670;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20720%201000%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22fold-crop%22%3E%3Crect%20x%3D%220%22%20y%3D%2237%22%20width%3D%2280%22%20height%3D%2240%22%2F%3E%3C%2FclipPath%3E%3ClinearGradient%20id%3D%22_%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3_9%22%20data-name%3D%22%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%209%22%20x1%3D%2217.04%22%20y1%3D%2240.29%22%20x2%3D%2269.77%22%20y2%3D%2240.29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23003670%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23005bac%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%3Cpath%20id%3D%22logo-curve%22%20fill%3D%22%23005bac%22%20d%3D%22m57.23%2C5.37c-3.43-2.42-7.44-4.14-11.85-4.91-7.74-1.37-15.31.42-21.39%2C4.44.09.14.17.28.25.42.83%2C1.49%2C1.31%2C3.2%2C1.31%2C5.03%2C0%2C5.71-4.64%2C10.35-10.35%2C10.35-1.03%2C0-2.03-.15-2.97-.43-.44%2C1.33-.79%2C2.72-1.04%2C4.14-.42%2C2.39-.54%2C4.77-.39%2C7.09C2.7%2C35.96-2.25%2C45.79%2C1.02%2C55.22c.8%2C2.22%2C2.05%2C4.28%2C3.74%2C5.94%2C3.24%2C3.18%2C7.9%2C4.72%2C12.38%2C3.17l.47-.16c.29-.1.42-.43.28-.7-2.52-5.09-2.67-10.77-.83-15.74.02-.06.05-.12.07-.18.03-.08.06-.16.09-.24.02-.06.05-.12.08-.19.03-.08.06-.16.1-.24.03-.06.05-.12.08-.19.03-.08.07-.16.1-.23.03-.06.06-.12.08-.18.04-.08.07-.15.11-.23.03-.06.06-.12.09-.18.04-.08.08-.16.12-.23.03-.06.06-.12.09-.18.04-.08.08-.16.12-.24.03-.06.06-.11.09-.17.04-.08.09-.16.13-.24.03-.05.06-.11.09-.16.05-.08.1-.16.15-.25.03-.05.06-.1.09-.15.05-.09.11-.17.16-.26.03-.04.05-.09.08-.13.06-.09.12-.18.18-.28.02-.04.05-.07.07-.11.07-.1.14-.21.21-.31.02-.02.03-.04.05-.07.45-.64.95-1.25%2C1.48-1.84%2C0%2C0%2C.02-.02.03-.03.1-.11.19-.21.29-.32.01-.02.03-.03.04-.05.09-.1.19-.2.29-.29.02-.02.04-.04.06-.05.09-.09.19-.19.28-.28.02-.02.04-.04.06-.06.09-.09.19-.18.29-.27.02-.02.04-.04.07-.06.1-.09.19-.17.29-.26.02-.02.04-.04.07-.06.1-.09.2-.17.3-.25.02-.02.04-.04.07-.05.1-.08.21-.17.31-.25.02-.02.04-.03.06-.05.11-.08.22-.17.33-.25.02-.01.04-.03.05-.04.12-.09.23-.17.35-.25.01%2C0%2C.03-.02.04-.03.12-.09.25-.17.38-.26%2C0%2C0%2C.01%2C0%2C.02-.01.55-.37%2C1.12-.71%2C1.71-1.02l6.72-2.16s.05%2C0%2C.07-.01h0c-2.03-2.81-3.32-6.18-3.58-9.84-.12-1.57-.05-3.18.24-4.79%2C1.7-9.65%2C10.34-16.33%2C19.88-15.83%2C2.5.12%2C4.88.72%2C7.04%2C1.7.18.08.4.05.53-.09.01-.01.03-.03.04-.05.14-.2.1-.48-.08-.63Z%22%2F%3E%3Cpath%20id%3D%22logo-fold%22%20fill%3D%22url(%23_%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3_9)%22%20d%3D%22m69.32%2C34.65c.78-4.41.53-8.76-.56-12.82-.06-.15-.19-.26-.35-.3-.07-.01-.15-.01-.22%2C0h0c-.17.05-.28.21-.26.38.05.57.08%2C1.14.08%2C1.72%2C0%2C10.62-8.61%2C19.24-19.24%2C19.24-.02%2C0-.05%2C0-.07%2C0-.11%2C0-.22%2C0-.33%2C0-.05%2C0-.09%2C0-.14%2C0-.13%2C0-.25%2C0-.38-.01-.04%2C0-.08%2C0-.11%2C0-.1%2C0-.2-.01-.31-.02-.04%2C0-.08%2C0-.12%2C0-.13%2C0-.25-.02-.37-.03-.04%2C0-.08%2C0-.12-.01-.11-.01-.21-.02-.32-.03-.03%2C0-.06%2C0-.09-.01-.13-.02-.25-.03-.38-.05-.04%2C0-.08-.01-.12-.02-.13-.02-.25-.04-.38-.06-.02%2C0-.05%2C0-.07-.01-.11-.02-.22-.04-.33-.06-.04%2C0-.08-.01-.12-.02-.12-.02-.25-.05-.37-.08-.03%2C0-.07-.02-.1-.02-.1-.02-.2-.05-.31-.07-.03%2C0-.07-.02-.1-.02-.12-.03-.24-.06-.36-.09-.04-.01-.08-.02-.11-.03-.11-.03-.21-.06-.32-.09-.02%2C0-.05-.01-.07-.02-.12-.03-.23-.07-.35-.11-.04-.01-.08-.02-.12-.04-.12-.04-.23-.08-.35-.12-.03-.01-.06-.02-.09-.03-.1-.03-.19-.07-.29-.1-.04-.01-.07-.03-.11-.04-.11-.04-.22-.09-.34-.13-.04-.01-.07-.03-.11-.05-.09-.04-.18-.07-.27-.11-.03-.01-.07-.03-.1-.04-.11-.05-.22-.1-.33-.14-.04-.02-.08-.04-.12-.06-.1-.04-.19-.09-.29-.14-.04-.02-.08-.04-.11-.06-.09-.04-.18-.09-.27-.13-.04-.02-.08-.04-.12-.06-.1-.05-.2-.11-.31-.16-.04-.02-.08-.04-.11-.06-.08-.04-.15-.08-.23-.13-.04-.02-.08-.05-.12-.07-.1-.06-.19-.11-.29-.17-.04-.03-.09-.05-.13-.08-.07-.04-.14-.09-.22-.13-.05-.03-.09-.06-.14-.09-.08-.05-.16-.11-.25-.16-.04-.03-.09-.06-.13-.09-.08-.05-.16-.11-.23-.16-.05-.04-.1-.07-.15-.11-.06-.05-.13-.09-.19-.14-.04-.03-.09-.06-.13-.1-.09-.06-.17-.13-.26-.19-.04-.03-.09-.07-.13-.1-.06-.04-.11-.09-.17-.14-.04-.03-.08-.07-.13-.1-.08-.07-.16-.13-.24-.2-.04-.04-.09-.08-.13-.11-.06-.05-.11-.1-.17-.14-.06-.05-.12-.11-.18-.16-.05-.05-.11-.1-.16-.15-.04-.04-.09-.08-.13-.12-.06-.06-.13-.12-.19-.18-.05-.05-.11-.1-.16-.15-.05-.05-.09-.09-.14-.14-.04-.04-.08-.09-.13-.13-.07-.07-.14-.15-.21-.22-.04-.04-.08-.09-.12-.13-.04-.05-.09-.1-.13-.15-.05-.06-.11-.12-.16-.18-.05-.06-.1-.12-.16-.18-.04-.05-.08-.09-.12-.14-.05-.06-.1-.11-.14-.17-.05-.06-.11-.13-.16-.19-.04-.05-.09-.11-.13-.16-.04-.05-.07-.09-.11-.14-.06-.08-.13-.17-.19-.25-.03-.05-.07-.09-.1-.14-.02-.03-.04-.06-.06-.09-2.31.3-4.61%2C1.01-6.79%2C2.17-4.5%2C2.39-7.7%2C6.26-9.32%2C10.7%2C0%2C0%2C0%2C0%2C0%2C.01.01.01.02.03.04.04.03.04.07.08.1.12%2C0%2C0%2C.01.02.02.03.27.34.57.69.9%2C1.07%2C1.72%2C1.95%2C4.53%2C4.62%2C8.61%2C6.72%2C0%2C0%2C3.01%2C1.53%2C6.61%2C2.44.59.15%2C1.19.28%2C1.8.39%2C16.05%2C2.83%2C31.36-7.89%2C34.2-23.94Z%22%2F%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23003670%22%20d%3D%22M0%200h720v1000H0z%22%2F%3E%3Cg%20transform%3D%22translate(-140%20-80)%20rotate(-20)%20scale(10)%20translate(-35%20-32)%22%3E%3Cuse%20href%3D%22%23logo-curve%22%2F%3E%3Cuse%20href%3D%22%23logo-fold%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(440%20-20)%20rotate(20)%20scale(12)%20translate(-44%20-40)%22%3E%3Cuse%20href%3D%22%23logo-fold%22%20clip-path%3D%22url(%23fold-crop)%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(40%20230)%20rotate(-25)%20scale(12)%20translate(-44%20-40)%22%3E%3Cuse%20href%3D%22%23logo-fold%22%20clip-path%3D%22url(%23fold-crop)%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(630%20340)%20rotate(150)%20scale(12)%20translate(-44%20-40)%22%3E%3Cuse%20href%3D%22%23logo-fold%22%20clip-path%3D%22url(%23fold-crop)%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(-110%20620)%20rotate(30)%20scale(12)%20translate(-44%20-40)%22%3E%3Cuse%20href%3D%22%23logo-fold%22%20clip-path%3D%22url(%23fold-crop)%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(650%20740)%20rotate(-35)%20scale(12)%20translate(-44%20-40)%22%3E%3Cuse%20href%3D%22%23logo-fold%22%20clip-path%3D%22url(%23fold-crop)%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(820%20970)%20rotate(130)%20scale(10)%20translate(-35%20-32)%22%3E%3Cuse%20href%3D%22%23logo-curve%22%2F%3E%3Cuse%20href%3D%22%23logo-fold%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(100%201030)%20rotate(175)%20scale(10)%20translate(-44%20-40)%22%3E%3Cuse%20href%3D%22%23logo-fold%22%20clip-path%3D%22url(%23fold-crop)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.gate-brand img {
  width: min(300px, 82%);
  height: auto;
  filter: brightness(0) invert(1);
}
.gate-brand p {
  margin: 0;
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .28em;
}
.gate-card {
  width: min(570px, calc(100% - 64px));
  margin: auto;
  padding: 34px 52px;
  background: #fff;
}
.gate-card h1 {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 3.4vw, 2.55rem);
  line-height: 1.25;
  letter-spacing: -.025em;
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.gate-copy { margin: 0 0 26px; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 8px; font-size: .88rem; font-weight: 700; }
.field input {
  width: 100%;
  min-height: 50px;
  padding: 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  background: #fff;
}
.field input:focus { border-color: var(--blue); }
.field input[aria-invalid="true"] { border-color: var(--error); background: var(--error-soft); }
.gate-demo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--ink);
  font-size: .875rem;
}
.gate-demo-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.chip {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--ink);
  background: #eef1f4;
  font-size: 14px;
  font-weight: 700;
}
.form-status {
  margin: 12px 0 0;
  min-height: 1.55em;
  color: var(--error);
  font-size: .875rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.gate-footer { position: fixed; right: 30px; bottom: 20px; margin: 0; color: var(--ink); font-size: .875rem; letter-spacing: .1em; }

/* Buttons */
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.button-primary { color: #fff; background: var(--blue); }
.button-primary:hover { background: var(--blue-deep); }
.button-wide { width: 100%; }
.text-button {
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  color: var(--blue-darker);
  background: transparent;
  font-weight: 800;
  font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* Header */
.site-header {
  position: relative;
  z-index: 20;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px max(24px, calc((100% - var(--content)) / 2));
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.brand-link { display: inline-flex; }
.brand-link img { width: 250px; height: auto; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.user-menu-wrap { position: relative; }
.user-menu {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.user-menu:hover { border-color: var(--line); background: var(--blue-pale); }
.user-menu-text { line-height: 1.3; font-size: .88rem; }
.user-menu small { display: block; color: var(--ink); font-size: .875rem; }
.user-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 800; }
.user-menu-caret { width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.user-menu[aria-expanded="true"] .user-menu-caret { transform: translateY(1px) rotate(-135deg); }
.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  min-width: 250px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.user-menu-mail { margin: 0; font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
.user-menu-course-date { margin: 2px 0 12px; color: var(--ink); font-size: .875rem; font-weight: 500; }
.user-menu-item {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink);
  background: #fff;
  font-size: .875rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.user-menu-item:hover { border-color: var(--blue); background: var(--blue-pale); }

/* Course */
.course-hero { color: #fff; background: var(--blue); }
.hero-inner { width: min(var(--content), calc(100% - 48px)); margin: auto; padding: 34px 0 38px; }
.course-hero h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.3;
  letter-spacing: -.025em;
  font-feature-settings: "palt" 1;
  font-kerning: normal;
}
.course-hero h1 span { font-size: .72em; font-weight: 600; letter-spacing: -.015em; }
.course-content {
  width: min(var(--content), calc(100% - 48px));
  margin: 42px auto 80px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  background: #fff;
}
.lesson-card { padding: 44px 48px; background: #fff; }
.lesson-card + .lesson-card { border-top: 1px solid var(--line); }
#video-section, #pdf-section, #quiz-section, #quiz-heading { scroll-margin-top: 24px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-heading h2,
.resource-card h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -.025em;
  font-feature-settings: "palt" 1;
  font-kerning: normal;
}
.duration, .quiz-count { flex: 0 0 auto; margin: 0; color: var(--ink); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quiz-count { font-size: .9rem; }

/* Video */
.video-shell {
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid #c7d3dc;
  border-radius: 4px;
  background: #071359;
  aspect-ratio: 16/9;
}
.video-shell video { width: 100%; height: 100%; display: block; object-fit: contain; }
.video-error { display: flex; gap: 12px; margin: 0; padding: 14px 16px; color: #7d1d15; background: var(--error-soft); border: 1px solid var(--error); font-size: .875rem; line-height: 1.6; }
.video-error-text { word-break: keep-all; overflow-wrap: anywhere; }
.video-error-mark { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; border-radius: 50%; color: #fff; background: var(--error); font-size: .875rem; font-weight: 900; }

/* PDF */
.resource-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 34px; }
.resource-note { margin: 8px 0 0; color: var(--ink); font-size: .875rem; word-break: keep-all; overflow-wrap: anywhere; }
.resource-card .button { flex: 0 0 auto; }

/* Quiz */
.quiz-body { margin-top: 28px; }
.quiz-question {
  max-width: 40em;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.quiz-question:focus-visible { outline-offset: 6px; }
.punct-half { font-feature-settings: "halt" 1; }
.ox-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 400px;
  margin-top: 28px;
}
.ox-button {
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--blue);
  border-radius: 3px;
  color: var(--blue-darker);
  background: #fff;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ox-button:hover { background: var(--blue-soft); }
.ox-icon { width: 34px; height: 34px; display: block; }
.ox-button[aria-disabled="true"] { cursor: default; }
.ox-button[aria-disabled="true"]:hover { background: #fff; }
.ox-button.is-correct,
.ox-button.is-correct:hover { color: #fff; border-color: var(--success); background: var(--success); }
.ox-button.is-wrong,
.ox-button.is-wrong:hover { color: #fff; border-color: var(--error); background: var(--error); }
.quiz-result {
  margin: 18px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 未回答のあいだは高さを持たせない（読み上げ用に要素は残す） */
.quiz-result:empty { margin-top: 0; }
.quiz-result.is-correct { color: var(--success); }
.quiz-result.is-wrong { color: var(--error); }
.quiz-actions { display: flex; gap: 12px; max-width: 400px; margin-top: 20px; }
.quiz-actions .button { width: 100%; }
.completion-card { margin-top: 30px; padding: 44px; color: #fff; background: var(--blue); text-align: center; }
.completion-card h3 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.completion-mark { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 20px; color: var(--blue); background: #fff; border-radius: 50%; }
.completion-mark svg { width: 40px; height: 40px; display: block; }
.completion-card dl { display: flex; justify-content: center; margin: 20px 0 16px; }
.completion-card dt { color: #fff; font-size: .875rem; font-weight: 500; letter-spacing: .04em; }
.completion-card dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; }
.completion-card .text-button { color: #fff; font-size: .95rem; }

.site-footer { padding: 40px 24px; color: #fff; background: #2b2b2b; text-align: center; }
.site-footer img { width: 230px; height: auto; filter: brightness(0) invert(1); }
.site-footer p { margin: 16px 0 20px; color: #fff; word-break: keep-all; overflow-wrap: anywhere; }
.site-footer small { color: #fff; font-size: .875rem; letter-spacing: .1em; }

@media (max-width: 900px) {
  .access-gate { display: block; background: var(--blue-pale); }
  .gate-brand { min-height: auto; padding: 24px; background: #fff; }
  .gate-brand img { width: 230px; filter: none; }
  .gate-brand p { display: none; }
  .gate-card { width: min(560px, calc(100% - 32px)); margin: 26px auto; padding: 40px 30px; border: 1px solid var(--line); }
  .gate-footer { position: static; padding: 0 0 20px; text-align: center; }
}

@media (max-width: 640px) {
  .site-header { min-height: 66px; padding-inline: 16px; }
  .brand-link img { width: 180px; }
  .user-menu-text { display: none; }
  .header-actions { gap: 8px; }
  .hero-inner, .course-content { width: min(100% - 28px, var(--content)); }
  .hero-inner { padding: 26px 0 30px; }
  .course-hero h1 { font-size: 1.58rem; }
  .course-hero h1 span { font-size: .78em; }
  .course-content { margin-block: 28px 56px; }
  .lesson-card { padding: 28px 18px; }
  .section-heading { align-items: baseline; }
  .resource-card { align-items: stretch; flex-direction: column; gap: 18px; }
  .resource-card .button { width: 100%; }
  .quiz-question { font-size: 1.15rem; }
  .ox-buttons { max-width: none; gap: 12px; }
  .quiz-actions { max-width: none; flex-direction: column; }
  .completion-card { padding: 32px 18px; }
  .completion-card h3 { font-size: 1.45rem; }
}

/* 幅320px前後の端末でも「スタティックストレッチングは」を1行に収める */
@media (max-width: 340px) {
  .quiz-question { font-size: 1.125rem; letter-spacing: 0; }
}

/* 320px幅ではロゴ・DEMOチップ・ユーザーメニューが収まりきらないため、チップは残したままロゴをさらに縮め、
   装飾のみのキャレットを外して幅を確保する（受講者ラベルは640px以下で既に非表示のため対象外） */
@media (max-width: 360px) {
  .site-header { gap: 12px; }
  .brand-link img { width: 128px; }
  .user-menu-caret { display: none; }
}

@media (prefers-contrast: more) {
  :root { --muted: #3f4a55; --line: #9aa8b4; --line-strong: #6b7883; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}