/* ============================================================
   ONLYLIFE 就活ノート  /  assets/style.css
   ------------------------------------------------------------
   ※デザイントークンは shared/tokens.css に定義。
     このファイルでは再定義しません（各HTMLから2枚読み込む構成）。
   ------------------------------------------------------------
   目次
   00 reset / base
   01 layout（container / 2カラム）
   02 header / nav / drawer
   03 breadcrumb
   04 article header（タイトル・日付・著者）
   05 article body（p / h2帯 / h3 / a / img）
   06 custom blocks
      06-1 tip-box（キャラ吹き出し）
      06-2 info-box
      06-3 steps / step
      06-4 point-box
      06-5 cta-box
      06-6 link-card
      06-7 checklist
      06-8 compare（NG/OK）
      06-9 ng-box / ok-box（グレー／クリームの素のp）
      06-10 data-cite（出典表記）
      06-11 faq
   07 toc（目次）
   08 sidebar（sticky CTA / 著者カード / ランキング）
   09 author box / 監修者
   10 cards（記事一覧）
   11 top page hero
   12 footer
   13 tags / badges / pagination
   14 responsive（900 / 860 / 768 / 767）
   15 a11y（reduced-motion / focus）
   16 print
   ============================================================ */

/* ===== 00 reset / base ==================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.6;           /* 16px * 1.6 = 25.6px */
  color: var(--text-main);
  background: var(--bg-light);
  font-feature-settings: "palt" 1;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px;
  z-index: 200; padding: 10px 18px;
  background: var(--primary); color: var(--text-invert);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

/* ===== 01 layout ========================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.site-main { padding: 28px 0 64px; }

.layout {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-lg);
  max-width: var(--content-max);
  margin: 0 auto;
}
.layout__main {
  width: var(--article-width);
  max-width: var(--article-width);
  min-width: 0;
  flex: 0 1 var(--article-width);
}
.layout__aside {
  width: var(--aside-width);
  flex: 0 0 var(--aside-width);
}

.card-surface {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ===== 02 header / nav ==================================== */
.site-header {
  position: sticky; top: 0; z-index: 90;
  height: var(--header-height);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; gap: var(--gap-md);
  max-width: var(--container); margin: 0 auto; padding: 0 20px;
}

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--primary); color: var(--text-invert);
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.brand__name {
  display: flex; flex-direction: column; line-height: 1.25;
}
.brand__name b { font-size: 16px; color: var(--text-main); font-weight: 700; }
.brand__name span { font-size: 10px; color: var(--text-muted); letter-spacing: .08em; }

.gnav { margin-left: auto; }
.gnav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.gnav__list a {
  display: block; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; color: var(--text-main);
  white-space: nowrap;
}
.gnav__list a:hover { background: var(--bg-soft); text-decoration: none; }
.gnav__list a[aria-current="page"] { color: var(--primary); font-weight: 700; }
.gnav__list .is-soon a { color: var(--text-muted); }
.gnav__list .is-soon a::after {
  content: "準備中"; margin-left: 5px; font-size: 10px;
  padding: 1px 5px; border-radius: var(--radius-pill);
  background: var(--bg-soft); color: var(--text-muted);
}

.header-cta {
  flex: 0 0 auto; margin-left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-invert);
  font-size: 13px; font-weight: 700;
}
.header-cta:hover { background: var(--accent-dark); text-decoration: none; }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--text-main); transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 120;
  display: none;
  padding: 88px 24px 40px;
  background: rgba(15, 76, 129, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-y: auto;
}
.drawer.is-open { display: block; }
.drawer__list { list-style: none; margin: 0 auto; padding: 0; max-width: 420px; }
.drawer__list a {
  display: block; padding: 16px 4px; font-size: 18px; font-weight: 700;
  color: var(--text-invert); border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.drawer__cta {
  display: block; max-width: 420px; margin: 28px auto 0;
  padding: 16px; text-align: center; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-invert); font-weight: 700;
}
body.is-locked { overflow: hidden; }

/* ===== 03 breadcrumb ===================================== */
.breadcrumb { padding: 12px 0 0; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: 12px; color: var(--text-muted);
}
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--border-strong); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb [aria-current="page"] { color: var(--text-body); }

/* ===== 04 article header ================================= */
.article {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.article__head { padding: 28px 32px 0; }

.article__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cat-badge {
  display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--text-invert);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.cat-badge--pr { background: var(--warn); }
.cat-badge--outline {
  background: var(--bg-soft); color: var(--primary);
  border: 1px solid var(--border-strong);
}

.article__title {
  font-size: 32px; font-weight: 700; line-height: 1.4;
  letter-spacing: -.01em; color: var(--text-main);
  margin-bottom: 14px;
}

.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border-color);
  font-size: 12.5px; color: var(--text-muted);
}
.article__meta .meta-item { display: inline-flex; align-items: center; gap: 5px; }
.article__meta .meta-item b { color: var(--text-body); font-weight: 500; }
.meta-author { display: inline-flex; align-items: center; gap: 7px; }
.meta-author img { width: 26px; height: 26px; border-radius: 50%; }
.meta-updated { color: var(--primary); font-weight: 700; }
.reading-time {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg-soft); color: var(--text-body);
}

.pr-notice {
  margin: 16px 0 0; padding: 12px 14px;
  background: var(--warn-bg); border: 1px solid #f0d9a8;
  border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.75; color: #7a5200;
}
.pr-notice b { color: #603f00; }

.article__eyecatch { margin: 22px 0 0; }
.article__eyecatch img { width: 100%; border-radius: var(--radius-sm); display: block; }

/* ===== 05 article body =================================== */
.article__body { padding: 8px 32px 36px; }

.article__body > p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 0 1.6em;
}
.article__body > p:last-child { margin-bottom: 0; }
.article__body strong { color: var(--text-main); font-weight: 700; }
.article__body em { font-style: normal; background: linear-gradient(transparent 62%, #ffe9a8 62%); }

/* --- H2：この記事デザインの主役。全幅の帯 --- */
.article__body h2 {
  font-size: 20px; font-weight: 700; line-height: 1.55;
  color: var(--text-main);
  background: var(--heading-bg);
  padding: 12px 16px;
  border-radius: 0;
  margin: 3em -32px 1.2em;
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.article__body > h2:first-child { margin-top: 1.2em; }

/* --- H3：左に太いボーダー --- */
.article__body h3 {
  font-size: 17.5px; font-weight: 700; line-height: 1.6;
  color: var(--text-main);
  padding: 2px 0 2px 14px;
  border-left: 5px solid var(--primary);
  margin: 2.4em 0 1em;
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.article__body h4 {
  font-size: 15.5px; font-weight: 700; color: var(--primary-dark);
  margin: 1.8em 0 .7em;
}

.article__body a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: var(--primary-dark); }

.article__body figure { margin: 2em 0; }
.article__body figure img { width: 100%; display: block; border-radius: var(--radius-sm); }
.article__body figcaption {
  margin-top: 8px; font-size: 12.5px; line-height: 1.7;
  color: var(--text-muted); text-align: center;
}

.article__body hr {
  border: 0; border-top: 1px dashed var(--border-strong); margin: 2.6em 0;
}

/* ===== 06 custom blocks ================================== */

/* --- 06-1 tip-box：キャラ吹き出し --- */
.tip-box {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 2em 0;
}
.tip-box__icon { flex: 0 0 72px; text-align: center; }
.tip-box__icon img {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid var(--border-color); background: var(--bg-soft);
  display: block;
}
.tip-box__icon span {
  display: block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .02em;
}
.tip-box__body {
  position: relative; flex: 1 1 auto; min-width: 0;
  padding: 16px 20px;
  background: var(--bg-white);
  border: 2px solid var(--primary);
  border-radius: 14px;
}
.tip-box__body::before,
.tip-box__body::after {
  content: ""; position: absolute; top: 24px;
  width: 0; height: 0; border-style: solid;
}
.tip-box__body::before {
  left: -12px;
  border-width: 7px 12px 7px 0;
  border-color: transparent var(--primary) transparent transparent;
}
.tip-box__body::after {
  left: -9px;
  border-width: 6px 10px 6px 0;
  border-color: transparent var(--bg-white) transparent transparent;
}
.tip-box__body p {
  font-size: 15px; line-height: 1.8; color: var(--text-body); margin: 0 0 .9em;
}
.tip-box__body p:last-child { margin-bottom: 0; }
/* 生徒キャラは色を変える */
.tip-box--student .tip-box__body { border-color: var(--accent); }
.tip-box--student .tip-box__body::before { border-right-color: var(--accent); }

/* --- 06-2 info-box --- */
.info-box {
  margin: 2em 0; padding: 18px 20px;
  background: var(--bg-light);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.info-box__title {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; color: var(--primary-dark);
  margin-bottom: 8px;
}
.info-box__title::before {
  content: "i"; flex: 0 0 20px; height: 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--primary); color: var(--text-invert);
  font-size: 12px; font-weight: 700; font-style: italic;
}
.info-box p { font-size: 14.5px; line-height: 1.8; color: var(--text-body); margin: 0 0 .8em; }
.info-box p:last-child { margin-bottom: 0; }

/* --- 06-3 steps / step --- */
.steps { margin: 2em 0; counter-reset: stepcount; }
.step {
  position: relative;
  padding: 0 0 22px 56px;
  counter-increment: stepcount;
}
.step::before {
  content: "STEP" counter(stepcount);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary); color: var(--text-invert);
  font-size: 9.5px; font-weight: 700; letter-spacing: .01em;
}
.step::after {
  content: ""; position: absolute; left: 20px; top: 46px; bottom: 0;
  border-left: 2px dashed var(--border-strong);
}
.step:last-child { padding-bottom: 0; }
.step:last-child::after { display: none; }
.step__title {
  font-size: 16px; font-weight: 700; color: var(--text-main);
  line-height: 1.5; margin: 8px 0 6px;
}
.step__due {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--warn-bg); color: #8a5a00;
  font-size: 11px; font-weight: 700; vertical-align: 2px;
  white-space: nowrap;
}
.step p { font-size: 15px; line-height: 1.8; color: var(--text-body); margin: 0 0 .8em; }
.step p:last-child { margin-bottom: 0; }

/* --- 06-4 point-box --- */
.point-box {
  margin: 2em 0; padding: 0;
  background: var(--bg-white);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  overflow: hidden;
}
.point-box__title {
  background: var(--primary); color: var(--text-invert);
  padding: 10px 18px; font-size: 14.5px; font-weight: 700;
  letter-spacing: .02em;
}
.point-box__inner { padding: 18px 20px; }
.point-box__inner p {
  position: relative; padding-left: 22px;
  font-size: 15px; line-height: 1.8; color: var(--text-body); margin: 0 0 .7em;
}
.point-box__inner p::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}
.point-box__inner p:last-child { margin-bottom: 0; }

/* --- 06-5 cta-box --- */
.cta-box {
  margin: 2.4em 0; padding: 24px 26px;
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  color: var(--text-invert);
  text-align: center;
}
.cta-box__lead {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  opacity: .9; margin-bottom: 8px;
}
.cta-box__title {
  font-size: 19px; font-weight: 700; line-height: 1.55; margin-bottom: 10px;
}
.cta-box__text {
  font-size: 13.5px; line-height: 1.8; opacity: .92;
  margin: 0 auto 16px; max-width: 30em;
}
.cta-box__btn {
  display: inline-block; min-width: 260px;
  padding: 15px 28px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-invert);
  font-size: 16px; font-weight: 700;
  box-shadow: 0 6px 0 var(--accent-dark);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta-box__btn:hover {
  text-decoration: none; transform: translateY(2px);
  box-shadow: 0 4px 0 var(--accent-dark);
}
.cta-box__note {
  margin-top: 12px; font-size: 11px; line-height: 1.7; opacity: .78;
}

/* --- 06-6 link-card --- */
.link-card {
  display: flex; align-items: stretch; gap: 0;
  margin: 2em 0; overflow: hidden;
  background: var(--bg-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow .16s ease, transform .16s ease;
}
.link-card:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); text-decoration: none; }
.link-card__thumb { flex: 0 0 172px; background: var(--bg-soft); }
.link-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-card__body { flex: 1 1 auto; min-width: 0; padding: 14px 18px; }
.link-card__label {
  display: inline-block; margin-bottom: 6px; padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft); color: var(--primary);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.link-card__title {
  font-size: 15.5px; font-weight: 700; line-height: 1.6;
  color: var(--text-main); margin-bottom: 6px;
  text-decoration: none;
}
.link-card__desc {
  font-size: 12.5px; line-height: 1.75; color: var(--text-muted);
  margin-bottom: 8px;
}
.link-card__domain {
  font-size: 11.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
}
.link-card__domain::before {
  content: ""; width: 12px; height: 12px; border-radius: 3px;
  background: var(--primary); flex: 0 0 12px;
}
.link-card--line { border-color: #06c755; }
.link-card--line .link-card__domain::before { background: #06c755; }
.link-card--line .link-card__label { background: #e7f9ee; color: #04853a; }

/* --- 06-7 checklist --- */
.checklist {
  margin: 2em 0; padding: 0;
  background: var(--cream-bg);
  border: 2px solid var(--warn);
  border-radius: var(--radius);
  overflow: hidden;
}
.checklist__title {
  background: var(--warn); color: var(--text-invert);
  padding: 10px 18px; font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.checklist__count {
  font-size: 12px; font-weight: 700; padding: 2px 10px;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, .25);
  white-space: nowrap;
}
.checklist__inner { padding: 8px 18px 16px; }
.checklist__item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-bottom: 1px dashed var(--border-strong);
  cursor: pointer;
}
.checklist__item:last-of-type { border-bottom: 0; }
.checklist__item input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0;
  border: 2px solid var(--border-strong); border-radius: 4px;
  background: var(--bg-white); cursor: pointer; position: relative;
}
.checklist__item input:checked { background: var(--accent); border-color: var(--accent); }
.checklist__item input:checked::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.checklist__item span { font-size: 14.5px; line-height: 1.75; color: var(--text-body); }
.checklist__item input:checked + span { color: var(--text-muted); text-decoration: line-through; }
.checklist__reset {
  margin-top: 12px; padding: 6px 14px;
  background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 11.5px; color: var(--text-muted); cursor: pointer;
}
.checklist__reset:hover { background: var(--bg-soft); }

/* --- 06-8 compare（NG/OK 対比） --- */
.compare { margin: 2em 0; }
.compare__label {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 7px; padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
.compare__label--ng { background: var(--ng-bg); color: var(--ng-dark); }
.compare__label--ok { background: var(--ok-bg); color: var(--ok); }
.compare__verdict {
  margin: 10px 0 0; padding: 0 2px;
  font-size: 14.5px; line-height: 1.8; font-weight: 500;
  color: var(--primary-dark);
}
.compare > .p-ng { margin-bottom: 18px; }

/* --- 06-9 グレー背景の p（NG例・生データ）／クリーム背景の p（OK例・ティップス） --- */
.p-ng {
  margin: 1em 0; padding: 16px 18px;
  background: var(--code-bg);
  border-left: 4px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px; line-height: 1.85; color: var(--text-body);
}
.p-ok {
  margin: 1em 0; padding: 16px 18px;
  background: var(--cream-bg);
  border-left: 4px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px; line-height: 1.85; color: var(--text-body);
}
.p-ng b, .p-ok b { color: var(--text-main); }

/* --- 06-10 data-cite（出典表記） --- */
.data-cite {
  margin: 2em 0; padding: 16px 18px;
  background: var(--bg-white);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.data-cite p { font-size: 14.5px; line-height: 1.8; color: var(--text-body); margin: 0 0 .7em; }
.data-cite p:last-child { margin-bottom: 0; }
.data-cite__source {
  display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-muted);
}
.data-cite__num {
  font-family: var(--font-num); font-size: 26px; font-weight: 700;
  color: var(--primary); letter-spacing: -.01em; vertical-align: -2px;
}

/* --- 06-11 faq --- */
.faq { margin: 2em 0; }
.faq__item {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden;
}
.faq__q {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 18px; background: var(--bg-soft);
  font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.6;
}
.faq__q::before {
  content: "Q"; flex: 0 0 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--primary); color: var(--text-invert); font-size: 12px;
}
.faq__a { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; }
.faq__a::before {
  content: "A"; flex: 0 0 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--text-invert);
  font-size: 12px; font-weight: 700;
}
.faq__a p { font-size: 14.5px; line-height: 1.8; color: var(--text-body); margin: 0 0 .7em; }
.faq__a p:last-child { margin-bottom: 0; }

/* ===== 07 toc ============================================ */
.toc {
  background: var(--bg-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.toc__title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-color);
  font-size: 14.5px; font-weight: 700; color: var(--text-main);
}
.toc__toggle {
  padding: 4px 12px; background: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: 11.5px; color: var(--text-muted); cursor: pointer;
}
.toc__body { padding: 12px 16px; }
.toc[data-collapsed="true"] .toc__body { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc2; }
.toc li { margin: 0; }
.toc__l2 { counter-increment: toc2; }
.toc__l2 > a {
  display: block; padding: 7px 0 7px 30px; position: relative;
  font-size: 13.5px; line-height: 1.6; color: var(--text-body);
  text-decoration: none;
}
.toc__l2 > a::before {
  content: counter(toc2); position: absolute; left: 0; top: 7px;
  width: 21px; height: 21px; border-radius: 4px;
  display: grid; place-items: center;
  background: var(--heading-bg); color: var(--primary-dark);
  font-family: var(--font-num); font-size: 11.5px; font-weight: 700;
}
.toc__l3 > a {
  display: block; padding: 5px 0 5px 42px; position: relative;
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
  text-decoration: none;
}
.toc__l3 > a::before {
  content: ""; position: absolute; left: 32px; top: 13px;
  width: 6px; height: 1px; background: var(--border-strong);
}
.toc a:hover { color: var(--primary); text-decoration: underline; }
.toc a.is-active { color: var(--primary); font-weight: 700; }
.toc__l2 > a.is-active::before { background: var(--primary); color: #fff; }

.toc--inline { margin: 0 0 28px; display: none; }
.toc--aside { display: block; }

/* ===== 08 sidebar ======================================= */
.widget {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  margin-bottom: 24px;
  overflow: hidden;
}
.widget__title {
  padding: 11px 16px; border-bottom: 1px solid var(--border-color);
  font-size: 13.5px; font-weight: 700; color: var(--text-main);
  background: var(--bg-soft); letter-spacing: .02em;
}
.widget__inner { padding: 16px; }
.widget__inner p { font-size: 13px; line-height: 1.8; color: var(--text-body); margin: 0 0 .8em; }
.widget__inner p:last-child { margin-bottom: 0; }

.aside-sticky { position: sticky; top: calc(var(--header-height) + 20px); }

.side-cta {
  padding: 20px 18px; border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--text-invert); text-align: center;
  box-shadow: var(--shadow-card);
}
.side-cta__badge {
  display: inline-block; margin-bottom: 10px; padding: 3px 11px;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, .18);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}
.side-cta__title { font-size: 17px; font-weight: 700; line-height: 1.55; margin-bottom: 8px; }
.side-cta__stat {
  margin: 12px 0; padding: 12px 10px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .12);
}
.side-cta__stat b {
  display: block; font-family: var(--font-num);
  font-size: 27px; font-weight: 700; line-height: 1.2;
}
.side-cta__stat span { display: block; font-size: 11px; line-height: 1.65; opacity: .88; margin-top: 4px; }
.side-cta__btn {
  display: block; padding: 14px 10px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-invert);
  font-size: 15px; font-weight: 700;
  box-shadow: 0 5px 0 var(--accent-dark);
}
.side-cta__btn:hover { text-decoration: none; background: var(--accent-dark); box-shadow: 0 3px 0 var(--accent-dark); }
.side-cta__note { margin-top: 10px; font-size: 10.5px; line-height: 1.65; opacity: .78; }

.side-author { text-align: center; }
.side-author img {
  width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid var(--border-color); margin-bottom: 10px;
}
.side-author__name { font-size: 15px; font-weight: 700; color: var(--text-main); }
.side-author__role { font-size: 11.5px; color: var(--text-muted); margin: 3px 0 10px; }
.side-author__text { font-size: 12.5px; line-height: 1.8; color: var(--text-body); text-align: left; }
.side-author__link {
  display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700;
}

.side-list { list-style: none; margin: 0; padding: 0; counter-reset: sl; }
.side-list li { counter-increment: sl; border-bottom: 1px solid var(--border-color); }
.side-list li:last-child { border-bottom: 0; }
.side-list a {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px;
  font-size: 13px; line-height: 1.65; color: var(--text-main);
}
.side-list a:hover { background: var(--bg-light); text-decoration: none; }
.side-list a::before {
  content: counter(sl); flex: 0 0 20px; height: 20px;
  display: grid; place-items: center; border-radius: 4px;
  background: var(--heading-bg); color: var(--primary-dark);
  font-family: var(--font-num); font-size: 11.5px; font-weight: 700;
}
.side-list li:nth-child(1) a::before { background: var(--primary); color: #fff; }

/* ===== 09 author box / 監修者 ============================ */
.author-box {
  margin: 2.6em 0 0; padding: 22px;
  background: var(--bg-light);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.author-box__head { display: flex; gap: 16px; align-items: flex-start; }
.author-box__head img {
  width: 78px; height: 78px; border-radius: 50%; flex: 0 0 78px;
  border: 2px solid var(--bg-white); box-shadow: var(--shadow-card);
}
.author-box__label {
  display: inline-block; margin-bottom: 5px; padding: 2px 9px;
  border-radius: var(--radius-pill); background: var(--primary);
  color: var(--text-invert); font-size: 10.5px; font-weight: 700;
}
.author-box__name { font-size: 17px; font-weight: 700; color: var(--text-main); }
.author-box__role { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.author-box__bio { font-size: 14px; line-height: 1.85; color: var(--text-body); margin-top: 14px; }
.author-box__meta {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  font-size: 12.5px; line-height: 1.85; color: var(--text-muted);
}
.author-box__meta b { color: var(--text-body); }
.author-box--reviewer { background: var(--bg-white); }
.author-box--reviewer .author-box__label { background: var(--accent); }

/* ===== 10 cards（記事一覧） ============================= */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.section-head h2 {
  font-size: 22px; font-weight: 700; color: var(--text-main); line-height: 1.5;
}
.section-head p { font-size: 13px; color: var(--text-muted); margin-top: 5px; line-height: 1.7; }
.section-head a { font-size: 13px; font-weight: 700; white-space: nowrap; }

.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-bottom: 44px;
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.post-card {
  display: flex; flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease;
}
.post-card:hover { box-shadow: var(--shadow-float); transform: translateY(-3px); }
.post-card__thumb { display: block; background: var(--bg-soft); }
.post-card__thumb img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card__cat {
  display: inline-block; align-self: flex-start; margin-bottom: 8px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--heading-bg); color: var(--primary-dark);
  font-size: 10.5px; font-weight: 700;
}
.post-card__title { font-size: 15.5px; font-weight: 700; line-height: 1.6; margin-bottom: 8px; }
.post-card__title a { color: var(--text-main); text-decoration: none; }
.post-card__title a:hover { color: var(--primary); }
.post-card__excerpt {
  font-size: 12.5px; line-height: 1.8; color: var(--text-body);
  margin-bottom: 12px; flex: 1 1 auto;
}
.post-card__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-muted);
  padding-top: 10px; border-top: 1px solid var(--border-color);
}
.post-card__meta img { width: 20px; height: 20px; border-radius: 50%; }

/* 横並びリスト型カード（カテゴリ／タグ一覧用） */
.post-row {
  display: flex; gap: 18px; padding: 18px 0;
  border-bottom: 1px solid var(--border-color);
}
.post-row:first-of-type { padding-top: 0; }
.post-row__thumb { flex: 0 0 216px; }
.post-row__thumb img { width: 100%; border-radius: var(--radius-sm); aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.post-row__body { flex: 1 1 auto; min-width: 0; }
.post-row__title { font-size: 17px; font-weight: 700; line-height: 1.55; margin: 8px 0; }
.post-row__title a { color: var(--text-main); }
.post-row__title a:hover { color: var(--primary); }
.post-row__excerpt { font-size: 13.5px; line-height: 1.8; color: var(--text-body); margin-bottom: 10px; }
.post-row__meta { font-size: 11.5px; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }

.page-head { margin-bottom: 26px; }
.page-head__label {
  display: inline-block; margin-bottom: 10px; padding: 3px 12px;
  border-radius: var(--radius-pill); background: var(--primary);
  color: var(--text-invert); font-size: 11px; font-weight: 700;
}
.page-head h1 { font-size: 28px; font-weight: 700; line-height: 1.45; color: var(--text-main); }
.page-head__desc {
  font-size: 14.5px; line-height: 1.85; color: var(--text-body);
  margin-top: 12px; max-width: 46em;
}
.page-head__count { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }

/* ===== 11 top page hero ================================= */
.hero {
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 62%, #08294a 100%);
  color: var(--text-invert);
  padding: 52px 0 56px;
}
.hero__inner {
  display: flex; align-items: center; gap: var(--gap-lg);
  max-width: var(--content-max); margin: 0 auto; padding: 0 20px;
}
.hero__text { flex: 1 1 auto; min-width: 0; }
.hero__badge {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, .16);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.hero h1 { font-size: 32px; font-weight: 700; line-height: 1.5; margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: #7ee8c6; }
.hero__lead { font-size: 15px; line-height: 1.9; opacity: .92; margin-bottom: 22px; max-width: 34em; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__btn {
  display: inline-block; padding: 14px 26px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700;
}
.hero__btn--primary { background: var(--accent); color: var(--text-invert); box-shadow: 0 5px 0 var(--accent-dark); }
.hero__btn--primary:hover { text-decoration: none; transform: translateY(2px); box-shadow: 0 3px 0 var(--accent-dark); }
.hero__btn--ghost { background: rgba(255, 255, 255, .1); color: var(--text-invert); border: 1px solid rgba(255, 255, 255, .45); }
.hero__btn--ghost:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }
.hero__note { margin-top: 14px; font-size: 11.5px; opacity: .72; line-height: 1.7; }
.hero__art { flex: 0 0 380px; }
.hero__art img { width: 100%; display: block; }

.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 44px; }
.pillar {
  display: block; padding: 20px 20px 22px;
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  transition: box-shadow .16s ease, transform .16s ease;
}
.pillar:hover { text-decoration: none; box-shadow: var(--shadow-float); transform: translateY(-3px); }
.pillar__icon {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 12px;
  display: grid; place-items: center;
  background: var(--heading-bg); color: var(--primary-dark);
  font-size: 19px; font-weight: 700;
}
.pillar__title { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 7px; }
.pillar__text { font-size: 13px; line-height: 1.8; color: var(--text-body); }
.pillar__more { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.pillar--soon { opacity: .72; }
.pillar--soon .pillar__more { color: var(--text-muted); }

/* ===== 12 footer ======================================== */
.site-footer {
  background: var(--primary-dark); color: rgba(255, 255, 255, .82);
  padding: 44px 0 24px; font-size: 13px; line-height: 1.85;
}
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.site-footer h2 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer__about p { font-size: 12.5px; line-height: 1.9; opacity: .85; }
.site-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.site-footer__brand .brand__name b { color: #fff; }
.site-footer__brand .brand__name span { color: rgba(255, 255, 255, .6); }
.site-footer__bottom {
  padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between; font-size: 11.5px; opacity: .7;
}

/* ===== 13 tags / badges ================================= */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 2em 0 0; }
.tag-list a {
  display: inline-block; padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft); border: 1px solid var(--border-color);
  font-size: 12.5px; color: var(--text-body);
}
.tag-list a:hover { background: var(--heading-bg); color: var(--primary-dark); text-decoration: none; }
.tag-list a::before { content: "#"; margin-right: 3px; color: var(--text-muted); }

.share-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 2em 0 0; align-items: center; }
.share-row span { font-size: 12.5px; color: var(--text-muted); font-weight: 700; }
.share-row a {
  padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); font-size: 12.5px; color: var(--text-body);
}
.share-row a:hover { background: var(--bg-soft); text-decoration: none; }

.next-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 2.4em 0 0; }
.next-nav a {
  padding: 14px 16px; background: var(--bg-white);
  border: 1px solid var(--border-color); border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.65; color: var(--text-main);
}
.next-nav a:hover { border-color: var(--primary); text-decoration: none; }
.next-nav small { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }

/* ===== 14 responsive ==================================== */
@media (max-width: 1024px) {
  .layout { gap: var(--gap-md); }
  .hero__art { flex: 0 0 300px; }
}

/* --- 900px：サイドバー解体・目次を本文上へ・CTA全幅 --- */
@media (max-width: 900px) {
  .layout { display: block; }
  .layout__main { width: 100%; max-width: 100%; }
  .layout__aside { width: 100%; margin-top: 40px; }
  .aside-sticky { position: static; }
  .toc--aside { display: none; }
  .toc--inline { display: block; }
  .cta-box { border-radius: var(--radius); margin-left: -16px; margin-right: -16px; }
  .cta-box__btn { display: block; width: 100%; min-width: 0; }
  .card-grid, .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__art { flex: 0 0 auto; width: 100%; max-width: 420px; }
}

/* --- 860px：ハンバーガー→全画面オーバーレイ＋背景ぼかし --- */
@media (max-width: 860px) {
  .gnav, .header-cta { display: none; }
  .burger { display: block; }
}

/* --- 768px：h1を1.6remへ --- */
@media (max-width: 768px) {
  .article__head { padding: 20px 18px 0; }
  .article__body { padding: 8px 18px 28px; }
  .article__body h2 { margin-left: -18px; margin-right: -18px; font-size: 18.5px; }
  .article__title { font-size: 1.6rem; }
  .hero h1 { font-size: 1.6rem; }
  .page-head h1 { font-size: 1.6rem; }
  .hero { padding: 36px 0 40px; }
  .site-main { padding: 20px 0 48px; }
  .card-grid, .card-grid--2, .pillar-grid { grid-template-columns: 1fr; }
  .post-row { flex-direction: column; gap: 12px; }
  .post-row__thumb { flex: 0 0 auto; }
  .link-card { flex-direction: column; }
  .link-card__thumb { flex: 0 0 auto; }
  .link-card__thumb img { aspect-ratio: 16 / 9; }
  .next-nav { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --- 767px：キャラアイコン 72px→56px --- */
@media (max-width: 767px) {
  .tip-box { gap: 10px; }
  .tip-box__icon { flex: 0 0 56px; }
  .tip-box__icon img { width: 56px; height: 56px; }
  .tip-box__body { padding: 14px 16px; }
  .tip-box__body p { font-size: 14.5px; }
  .step { padding-left: 46px; }
  .step::before { width: 36px; height: 36px; font-size: 8.5px; }
  .step::after { left: 17px; top: 40px; }
  .article__body > p { font-size: 15.5px; }
  .site-footer__cols { grid-template-columns: 1fr; }
}

/* ===== 15 a11y ========================================== */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .post-card:hover, .link-card:hover, .pillar:hover,
  .cta-box__btn:hover, .hero__btn--primary:hover { transform: none; }
}

/* ===== 16 print ========================================= */
@media print {
  .site-header, .site-footer, .drawer, .burger,
  .side-cta, .cta-box, .share-row, .next-nav,
  .toc__toggle, .checklist__reset, .breadcrumb { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .layout { display: block; }
  .layout__main, .layout__aside { width: 100%; max-width: 100%; }
  .layout__aside { display: none; }
  .article { border: 0; box-shadow: none; }
  .article__body h2 {
    background: none !important;
    border-bottom: 2pt solid #000; border-top: 0;
    margin-left: 0; margin-right: 0; padding: 4pt 0;
    page-break-after: avoid;
  }
  .article__body h3 { page-break-after: avoid; }
  .article__body > p { color: #000; }
  .p-ng, .p-ok, .info-box, .point-box, .checklist, .tip-box__body, .data-cite {
    border: 1pt solid #999 !important; background: none !important;
    page-break-inside: avoid;
  }
  .article__body a { color: #000; text-decoration: underline; }
  .article__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .toc { page-break-inside: avoid; }
}