/* TOP lp-pattern3 の配色・文字・CTAを継承するガイド共通装飾。各ページCSSの後に読む。 */
body:is(.guide-library, .guide-learning, .guide-quickstart, .guide-article) {
  --guide-navy: #071c36;
  --guide-gold: #d4b26c;
  --guide-gold-dark: #8c692f;
  --guide-cream: #f7f4ed;
  --guide-ink: #152d45;
  --guide-muted: #53667a;
  --guide-line: #dae1e8;
  --guide-radius: 8px;
  --guide-font: 'Zen Kaku Gothic New', 'Yu Gothic', Meiryo, sans-serif;
  --navy: var(--guide-navy);
  --gold: var(--guide-gold);
  --gold-dark: var(--guide-gold-dark);
  --cream: var(--guide-cream);
  --paper: var(--guide-cream);
  --ink: var(--guide-ink);
  --muted: var(--guide-muted);
  --line: var(--guide-line);
  --blue: #173754;
  margin: 0;
  color: var(--guide-ink);
  background: var(--guide-cream);
  font-family: var(--guide-font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
.guide-wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.guide-skip { position: absolute; top: -100px; left: 20px; z-index: 1000; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; background: #fff; color: #071c36; border-radius: 4px; font: 700 16px/1.6 var(--guide-font); }
.guide-skip:focus { top: 8px; outline: 3px solid #419ccf; outline-offset: 3px; }
.guide-header, .guide-footer, .guide-header *, .guide-footer * { box-sizing: border-box; }
.guide-header {
  position: relative;
  z-index: 50;
  margin: 0;
  padding: 0;
  background: var(--guide-navy);
  color: #fff;
  border: 0;
  border-bottom: 1px solid #ffffff20;
}
.guide-header-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.guide-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 11px;
  min-height: 44px;
  padding: 0;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0;
}
.guide-brand img { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 5px; }
.guide-brand > span { font-family: Georgia, 'Times New Roman', serif; font-size: 27px; font-weight: 400; line-height: 1.2; }
.guide-brand b { color: var(--guide-gold); font-weight: 400; }
.guide-nav { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; border: 0; font-size: 15px; line-height: 1.6; }
.guide-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.guide-nav a:hover { color: #f0d499; }
.guide-nav a:is([aria-current='page'], [aria-current='location']) { color: #f0d499; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.guide-nav .guide-nav-cta {
  justify-content: center;
  gap: 12px;
  padding: 9px 17px;
  color: #102941;
  background: linear-gradient(180deg, #fae9b8 0%, #e9c67e 49%, #d5ac58 50%, #e8c779 100%);
  border: 1px solid #e6c77f;
  border-bottom: 3px solid #987128;
  border-radius: var(--guide-radius);
  box-shadow: inset 0 1px 0 #fff9, 0 5px 0 #76581d30, 0 10px 22px #0003;
  font-weight: 700;
  text-shadow: 0 1px 0 #fff5;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.guide-nav-cta > span { display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; margin: 0; color: #f7d888; background: #0b2846; border-radius: 50%; font-size: 18px; font-weight: 400; line-height: 1; text-shadow: none; }
.guide-nav .guide-nav-cta:hover { color: #102941; filter: brightness(1.045); transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff9, 0 6px 0 #76581d30, 0 13px 25px #0003; }
.guide-nav .guide-nav-cta:active { transform: translateY(1px); }
.guide-menu { display: none; min-width: 76px; min-height: 44px; align-items: center; justify-content: center; gap: 10px; padding: 4px; background: transparent; color: #ddc085; border: 0; border-radius: 4px; font: 500 14px/1.4 var(--guide-font); cursor: pointer; touch-action: manipulation; }
.guide-menu > span { font-size: 28px; line-height: 1; }
.guide-nav[hidden] { display: none; }
.guide-header :is(a, button):focus-visible, .guide-footer a:focus-visible { outline: 3px solid #f0d499; outline-offset: 5px; }
.guide-footer { max-width: none; width: auto; margin: 0; padding: 35px 0 23px; background: #05162c; color: #abbdd1; border: 0; text-align: left; font-family: var(--guide-font); font-size: 14px; line-height: 1.9; }
.guide-footer > .guide-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 30px; }
.guide-footer-main { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.guide-footer .guide-brand > span { color: #ecf0f5; font-size: 24px; }
.guide-footer .guide-brand img { width: 38px; height: 38px; }
.guide-footer nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 22px; max-width: 690px; margin: 0; padding: 0; }
.guide-footer nav a { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 4px 0; color: #c7d2df; background: transparent; border: 0; border-radius: 0; font-size: 14px; text-decoration: none; }
.guide-footer a:hover { color: #f0d499; }
.guide-footer .guide-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.guide-footer p { flex-basis: 100%; margin: 0; padding-top: 20px; border-top: 1px solid #ffffff20; color: #abbdd1; font-size: 13px; }
.guide-footer .guide-copyright { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }

/* 教材本文の構造と動作を保持し、TOPと共通の色・余白・角丸へ揃える。 */
body:is(.guide-learning, .guide-quickstart, .guide-article) :is(button, input, textarea, select) { font-family: var(--guide-font); }
body:is(.guide-learning, .guide-quickstart, .guide-article) :is(h1, h2, h3) { color: var(--guide-navy); font-weight: 700; letter-spacing: -.025em; }
body:is(.guide-learning, .guide-quickstart, .guide-article) h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.55; margin: 16px 0 20px; }
body:is(.guide-learning, .guide-quickstart, .guide-article) h2 { font-size: clamp(25px, 3vw, 32px); line-height: 1.65; }
body:is(.guide-learning, .guide-quickstart, .guide-article) h3 { font-size: 20px; line-height: 1.7; }
body:is(.guide-learning, .guide-quickstart, .guide-article) main :is(a, button, input, textarea, summary):focus-visible { outline: 3px solid #419ccf; outline-offset: 4px; }
body:is(.guide-learning, .guide-quickstart, .guide-article) main a { text-underline-offset: 4px; }
body:is(.guide-learning, .guide-quickstart, .guide-article) main :is(button, summary) { min-height: 44px; }
body:is(.guide-learning, .guide-quickstart, .guide-article) main :is(section, article, [id]) { scroll-margin-top: 24px; }
body:is(.guide-learning, .guide-quickstart, .guide-article) .intro { color: var(--guide-muted); font-size: 18px; line-height: 1.95; }
body:is(.guide-learning, .guide-quickstart, .guide-article) :is(.label, .eyebrow) { color: var(--guide-gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .09em; }
body:is(.guide-learning, .guide-quickstart, .guide-article) .note { border-left: 3px solid var(--guide-gold); border-radius: 0 var(--guide-radius) var(--guide-radius) 0; background: #eee7d8; color: #35495d; padding: 18px 22px; font-size: 15px; line-height: 1.9; }
body:is(.guide-learning, .guide-quickstart, .guide-article) main :is(.card, .state-panel, .actor, .pdf-card, .video-card, .quiz, .term) { border-color: var(--guide-line); border-radius: var(--guide-radius); background: #fff; box-shadow: 0 7px 22px #1029410a; }
body:is(.guide-learning, .guide-quickstart) > main { width: min(1180px, calc(100% - 96px)); max-width: 1180px; margin: 0 auto; padding: 42px 0 64px; }
body.guide-learning > header:not(.guide-header), body.guide-learning .guide-page-hero { padding: 44px max(48px, calc((100% - 1180px) / 2)) 48px; background: var(--guide-navy); color: #fff; }
body.guide-learning > header:not(.guide-header) :is(h1, h2), body.guide-learning .guide-page-hero :is(h1, h2) { color: #fff; }
body.guide-learning > header:not(.guide-header) .brand, body.guide-learning .guide-page-hero .brand { color: #dec086; font: 700 13px/1.7 var(--guide-font); letter-spacing: .11em; }
body.guide-learning > header:not(.guide-header) p, body.guide-learning .guide-page-hero p { max-width: 800px; color: #bbcbdc; }
body.guide-learning > header:not(.guide-header) .promise, body.guide-learning .guide-page-hero .promise { color: #e5c887; }
body.guide-learning > header:not(.guide-header) nav, body.guide-learning .guide-page-hero nav { gap: 10px; }
body.guide-learning > header:not(.guide-header) nav a, body.guide-learning .guide-page-hero nav a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid #ffffff40; border-radius: var(--guide-radius); color: #e5ecf4; padding: 9px 15px; }
body.guide-learning > header:not(.guide-header) nav a:hover, body.guide-learning .guide-page-hero nav a:hover { border-color: var(--guide-gold); background: #ffffff0a; }
body.guide-learning main section { margin: 48px 0; }
body.guide-learning main section:first-of-type { margin-top: 36px; }
body.guide-learning .state-buttons button { border-radius: var(--guide-radius); padding: 18px 20px; }
body.guide-learning .state-buttons button[aria-pressed='true'] { background: var(--guide-navy); border-color: var(--guide-navy); box-shadow: inset 0 -3px var(--guide-gold); }
body.guide-learning .state-panel { padding: 28px; }
body.guide-learning .route li { border-radius: var(--guide-radius); }
body.guide-learning .route li::before { background: var(--guide-navy); color: #e5c887; }
body.guide-learning :is(.card, .actor, .video-card) { border-top: 3px solid #173754; }
body.guide-learning .pdf-card { border-top: 3px solid var(--guide-gold); }
body.guide-learning :is(.route a, .text-link, .links a, .pdf-primary, .pdf-alternates a) { display: inline-flex; align-items: center; min-height: 44px; }
body.guide-learning .links { gap: 4px 18px; }
body.guide-learning :is(.copy-button, .progress button) { min-height: 44px; border-radius: var(--guide-radius); }
body.guide-learning :is(.checklist label, .study-check, .quiz label, .pdf-options label) { min-height: 44px; padding-block: 8px; cursor: pointer; }
body.guide-learning :is(.template textarea, .quiz .answer, .mechanism span, video, .support) { border-radius: var(--guide-radius); }
body.guide-learning .support { background: var(--guide-navy); padding: 30px; }
body.guide-learning .support :is(h2, h3) { color: #fff; }
body.guide-learning .support a { color: #f1d29a; }
body.guide-learning .quiz button { border-radius: var(--guide-radius); padding: 10px 20px; font-size: 14px; }
body.guide-learning .pdf-picker { border: 1px solid var(--guide-line); border-radius: var(--guide-radius); background: #fff; padding: 16px 20px; }
body.guide-learning .pdf-picker legend { padding-inline: 6px; font-weight: 700; }
body.guide-learning .pdf-options { display: flex; flex-wrap: wrap; gap: 10px 24px; }
body.guide-learning .pdf-options label { display: inline-flex; align-items: center; gap: 10px; }
body.guide-learning .pdf-options input { width: 18px; height: 18px; accent-color: var(--guide-navy); }
body.guide-quickstart > main { max-width: 1080px; }
body.guide-quickstart main > .brand { color: var(--guide-gold-dark); font-size: 13px; letter-spacing: .1em; }
body.guide-quickstart .card { margin-bottom: 28px; }
body.guide-quickstart .bar { padding: 22px 28px; background: #fff; border-bottom: 1px solid var(--guide-line); }
body.guide-quickstart .bar h2 { font-size: 23px; }
body.guide-quickstart .inside { padding: 24px 28px; }
body.guide-quickstart .choice { min-height: 48px; border-radius: var(--guide-radius); padding: 10px 18px; }
body.guide-quickstart .choice:has(input:checked) { background: #fbf3dc; border-color: #b89247; }
body.guide-quickstart input[type='radio'] { accent-color: var(--guide-navy); }
body.guide-quickstart .small > a { display: inline-flex; align-items: center; min-height: 44px; }
body.guide-learning .button-link, body.guide-quickstart .button:not(.secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 20px;
  color: #102941;
  background: linear-gradient(180deg, #fae9b8 0%, #e9c67e 49%, #d5ac58 50%, #e8c779 100%);
  border: 1px solid #e6c77f;
  border-bottom: 3px solid #987128;
  border-radius: var(--guide-radius);
  box-shadow: inset 0 1px 0 #fff9, 0 4px 0 #76581d20, 0 7px 18px #10294112;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 0 #fff5;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
body.guide-learning .button-link:hover, body.guide-quickstart .button:not(.secondary):hover { filter: brightness(1.045); transform: translateY(-2px); }
body.guide-learning .button-link:active, body.guide-quickstart .button:not(.secondary):active { transform: translateY(1px); }
body.guide-quickstart .button.secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; color: var(--guide-navy); background: #fff; border: 1px solid #b3becb; border-radius: var(--guide-radius); padding: 11px 20px; font-size: 15px; }
body.guide-quickstart .button.secondary:hover { background: #eef3f9; }
body.guide-article > main { width: min(1000px, calc(100% - 96px)); margin: 48px auto 64px; padding: 40px 48px 44px; border: 1px solid var(--guide-line); border-top: 3px solid #173754; border-radius: var(--guide-radius); background: #fff; box-shadow: 0 9px 28px #1029410c; }
body.guide-article h2 { border-bottom: 2px solid #e8dfcb; padding-bottom: 14px; margin-top: 42px; font-size: 26px; }
body.guide-article :is(.related, aside) { padding: 18px 22px; background: #fbf7ee; border: 1px solid #e8dfcb; border-radius: var(--guide-radius); font-size: 15px; }
body.guide-article :is(.related, aside) a { display: inline-flex; align-items: center; min-height: 44px; }
body.guide-article details { border-color: var(--guide-line); }
body.guide-article summary { padding-block: 8px; font-weight: 700; }

@media (max-width: 1150px) {
  .guide-wrap, body:is(.guide-learning, .guide-quickstart) > main { width: calc(100% - 64px); }
  .guide-nav { gap: 18px; font-size: 14px; }
  .guide-brand > span { font-size: 25px; }
  .guide-nav .guide-nav-cta { padding: 9px 12px; gap: 8px; }
  .guide-footer nav { justify-content: flex-start; max-width: none; }
  .guide-footer-main { flex-direction: column; align-items: flex-start; gap: 20px; }
  body.guide-learning > header:not(.guide-header), body.guide-learning .guide-page-hero { padding-inline: 32px; }
}
@media (max-width: 1000px) {
  /* JS無効時はメニューを隠さず、2段目に全リンクを表示する。 */
  .guide-header-inner { flex-wrap: wrap; gap: 8px 20px; padding-block: 16px; }
  .guide-header .guide-nav { flex-basis: 100%; flex-wrap: wrap; gap: 6px 22px; padding-block: 4px; }
  .guide-header.guide-menu-ready .guide-header-inner { flex-wrap: nowrap; padding-block: 0; }
  .guide-header.guide-menu-ready .guide-menu { display: inline-flex; }
  .guide-header.guide-menu-ready .guide-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-height: calc(100dvh - 94px);
    overflow-y: auto;
    padding: 20px 32px 26px;
    border-top: 1px solid #ffffff25;
    background: #0a2543;
    box-shadow: 0 12px 24px #071c3626;
    font-size: 17px;
  }
  .guide-header.guide-menu-ready .guide-nav > a { justify-content: center; padding: 11px 16px; }
  .guide-header.guide-menu-ready .guide-nav .guide-nav-cta { align-self: center; margin-top: 6px; min-width: 220px; }
}
@media (max-width: 800px) {
  .guide-wrap, body:is(.guide-learning, .guide-quickstart) > main { width: calc(100% - 48px); }
  .guide-header-inner { min-height: 82px; }
  .guide-header.guide-menu-ready .guide-nav { max-height: calc(100dvh - 82px); }
  body.guide-learning > header:not(.guide-header), body.guide-learning .guide-page-hero { padding: 34px 24px 38px; }
  body.guide-article > main { width: calc(100% - 48px); padding: 32px; }
}
@media (max-width: 600px) {
  .guide-wrap, body:is(.guide-learning, .guide-quickstart) > main { width: calc(100% - 40px); }
  .guide-header-inner { min-height: 80px; gap: 10px 14px; }
  .guide-brand { gap: 9px; }
  .guide-brand > span { font-size: 23px; }
  .guide-brand img { width: 38px; height: 38px; }
  .guide-menu { min-width: 70px; font-size: 13px; gap: 8px; }
  .guide-header.guide-menu-ready .guide-nav { max-height: calc(100dvh - 80px); padding-inline: 20px; }
  .guide-footer { padding: 28px 0 22px; }
  .guide-footer > .guide-wrap { gap: 18px; }
  .guide-footer .guide-brand > span { font-size: 23px; }
  .guide-footer nav { gap: 4px 20px; }
  .guide-footer p { padding-top: 16px; }
  body:is(.guide-learning, .guide-quickstart, .guide-article) { font-size: 16px; }
  body:is(.guide-learning, .guide-quickstart, .guide-article) h1 { font-size: clamp(28px, 7.5vw, 36px); line-height: 1.6; }
  body:is(.guide-learning, .guide-quickstart, .guide-article) .intro { font-size: 16px; }
  body:is(.guide-learning, .guide-quickstart) > main { padding: 28px 0 44px; }
  body.guide-learning > header:not(.guide-header), body.guide-learning .guide-page-hero { padding: 28px 20px 34px; }
  body.guide-learning main section { margin: 36px 0; }
  body.guide-learning .state-buttons { gap: 8px; }
  body.guide-learning .state-buttons button { padding: 14px 9px; }
  body.guide-learning :is(.state-panel, .support) { padding: 22px 20px; }
  body:is(.guide-learning, .guide-quickstart, .guide-article) .note { padding: 16px 18px; font-size: 14px; }
  body.guide-quickstart :is(.bar, .inside) { padding: 19px 20px; }
  body.guide-quickstart .bar { flex-wrap: wrap; gap: 5px 14px; }
  body.guide-quickstart .bar h2 { font-size: 21px; }
  body.guide-quickstart .actions > .button { flex: 1 1 auto; }
  body.guide-article > main { width: calc(100% - 32px); margin: 28px auto 44px; padding: 26px 20px 30px; }
  body.guide-article h2 { font-size: 23px; margin-top: 34px; }
  body.guide-article :is(.related, aside) { padding: 16px; }
}
@media (max-width: 360px) {
  .guide-wrap, body:is(.guide-learning, .guide-quickstart) > main { width: calc(100% - 32px); }
  .guide-brand > span, .guide-footer .guide-brand > span { font-size: 21px; }
  .guide-brand img { width: 35px; height: 35px; }
  .guide-menu { min-width: 62px; font-size: 12px; gap: 5px; }
  .guide-header-inner { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body:is(.guide-library, .guide-learning, .guide-quickstart, .guide-article)) { scroll-behavior: auto; }
  body:is(.guide-library, .guide-learning, .guide-quickstart, .guide-article) *,
  body:is(.guide-library, .guide-learning, .guide-quickstart, .guide-article) *::before,
  body:is(.guide-library, .guide-learning, .guide-quickstart, .guide-article) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .guide-nav .guide-nav-cta:hover, body.guide-learning .button-link:hover, body.guide-quickstart .button:not(.secondary):hover { transform: none; }
}