/* ==========================================================================
   elio ｜ 学校別・国語入試分析 コラム記事
   --------------------------------------------------------------------------
   elio.css（フォント + デザインシステム + LP共通コンポーネント）を
   読み込んだ上で、記事ページ固有のスタイルだけをここに持つ。

   記事を増やすときは articles/_template.html を複製して
   本文を差し替えるだけでよい。このファイルは触らない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 記事の器
   -------------------------------------------------------------------------- */
/* ヘッダーは sticky で場所を取るので、ここは通常のセクション余白でよい */
.article {
  padding-inline: var(--lp-gutter);
  padding-block: clamp(36px, 4.5vw, 60px) clamp(48px, 6vw, 72px);
}
/* 本文の可読幅。日本語で1行36〜40字に収まる値 */
.article__inner { max-width: 44rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   2. パンくず
   -------------------------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--space-6); }
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--lp-fs-label);
  letter-spacing: var(--ls-ui);
  color: var(--ink-400);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-3); }
.breadcrumb li + li::before { content: "／"; color: var(--ink-300); }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--red-700); }
.breadcrumb [aria-current] { color: var(--ink-700); }

/* --------------------------------------------------------------------------
   3. 記事ヘッダー
   -------------------------------------------------------------------------- */
.article-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.article-cat {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--lp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--olive-600);
  background: color-mix(in srgb, var(--gold-100) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-500) 40%, transparent);
  border-radius: var(--radius-xs);
  padding: 5px var(--space-4);
}
.article-title {
  margin: var(--space-5) 0 0;
  font-size: clamp(26px, 3.9vw, 41px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--ink-900);
  text-wrap: pretty;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-ui);
  font-size: var(--lp-fs-label);
  letter-spacing: var(--ls-ui);
  color: var(--ink-500);
}
.article-meta__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.article-meta__item svg { width: 15px; height: 15px; flex-shrink: 0; }
.article-lead {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  font-size: var(--lp-fs-lead);
  line-height: 1.95;
  color: var(--ink-700);
  border-left: 3px solid var(--gold-500);
  padding-left: clamp(18px, 2.4vw, 26px);
}
.article-lead p { margin: 0; }
.article-lead p + p { margin-top: 1.1em; }

/* --------------------------------------------------------------------------
   4. 目次
   -------------------------------------------------------------------------- */
.toc {
  margin: clamp(36px, 4.5vw, 52px) 0;
  background: var(--paper-100);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: clamp(22px, 3vw, 30px);
}
.toc__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--lp-fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
  margin-bottom: var(--space-4);
}
.toc__title::after { content: ""; flex: 1; height: 1px; background: var(--border-hairline); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li + li { margin-top: var(--space-3); }
.toc a {
  display: flex;
  gap: var(--space-3);
  font-size: var(--lp-fs-sm);
  line-height: 1.7;
  color: var(--ink-700);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-ui);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--lp-fs-label);
  font-weight: var(--fw-semibold);
  color: var(--gold-600);
  flex-shrink: 0;
  padding-top: 0.25em;
}
.toc a:hover { color: var(--red-700); }

/* --------------------------------------------------------------------------
   5. 本文
   microCMS から流し込んだ素の見出し・段落・リストが、
   そのままこの体裁になるよう要素セレクタで組んでいる。
   -------------------------------------------------------------------------- */
.article-body { font-size: var(--lp-fs-body); line-height: 2; color: var(--ink-600); }

.article-body > h2 {
  margin: clamp(48px, 6vw, 72px) 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
  position: relative;
}
.article-body > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 1px;
  background: var(--gold-500);
}
.article-body > h3 {
  margin: clamp(34px, 4vw, 48px) 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--gold-500);
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: var(--fw-bold);
  line-height: 1.65;
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}
.article-body p { margin: 0 0 1.6em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong, .article-body b {
  font-weight: var(--fw-bold);
  color: var(--ink-800);
}
/* 本文中の要点はマーカーで。使いすぎない */
.article-body .key {
  font-weight: var(--fw-bold);
  color: var(--ink-800);
  background: linear-gradient(transparent 66%, color-mix(in srgb, var(--gold-300) 50%, transparent) 66%);
  padding-inline: 2px;
}
.article-body a { text-decoration: underline; text-underline-offset: 3px; }

.article-body ul { list-style: none; margin: 0 0 1.6em; padding: 0; }
.article-body ul li { position: relative; padding-left: var(--space-5); margin-bottom: 0.7em; }
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 7px;
  height: 1px;
  background: var(--gold-600);
}
.article-body ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.article-body ol li { margin-bottom: 0.7em; }

.article-body figure { margin: clamp(28px, 3.5vw, 40px) 0; }
.article-body figure img { width: 100%; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); }
.article-body figcaption { margin-top: var(--space-3); font-size: var(--lp-fs-label); color: var(--ink-500); line-height: 1.8; }

/* --------------------------------------------------------------------------
   6. 囲み（核心・注意）
   絵文字ではなくアイコン＋ラベルで、記事をまたいで同じ意味を持たせる。
   -------------------------------------------------------------------------- */
.callout {
  margin: clamp(30px, 3.6vw, 44px) 0;
  border-radius: var(--radius-sm);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
}
.callout__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--lp-fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: var(--space-4);
}
.callout__label .icon-badge { --badge-size: 34px; padding: 7px; }
.callout p { margin: 0; font-size: var(--lp-fs-sm); line-height: 1.95; }
.callout p + p { margin-top: 1em; }

.callout--key {
  border-color: color-mix(in srgb, var(--gold-500) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold-100) 45%, var(--paper-0)) 0%, var(--paper-0) 100%);
}
.callout--key .callout__label { color: var(--gold-700); }

.callout--warn {
  border-color: color-mix(in srgb, var(--red-600) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--red-500) 5%, var(--paper-0)) 0%, var(--paper-0) 100%);
}
.callout--warn .callout__label { color: var(--red-700); }
.callout--warn .icon-badge {
  border-color: color-mix(in srgb, var(--red-600) 45%, transparent);
  background: color-mix(in srgb, var(--red-500) 7%, var(--paper-0));
  color: var(--red-700);
}

/* --------------------------------------------------------------------------
   7. 比較表
   3列を縦積みにすると比較にならないので、狭い画面では横スクロールさせる。
   -------------------------------------------------------------------------- */
.compare { margin: clamp(30px, 3.6vw, 44px) 0; }
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--surface-card);
  font-size: var(--lp-fs-sm);
}
.compare th, .compare td {
  border: 1px solid var(--border-hairline);
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.compare thead th {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
  background: var(--paper-100);
  white-space: nowrap;
}
.compare tbody th {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--ink-700);
  background: var(--paper-50);
  width: 26%;
}
/* エリオ列を主役として立てる */
.compare .is-elio { background: color-mix(in srgb, var(--gold-100) 32%, var(--paper-0)); color: var(--ink-800); }
.compare thead .is-elio { background: color-mix(in srgb, var(--gold-300) 42%, var(--paper-0)); color: var(--ink-900); }
.compare__hint {
  margin: var(--space-3) 0 0;
  font-family: var(--font-ui);
  font-size: var(--lp-fs-label);
  color: var(--ink-400);
}
@media (min-width: 781px) { .compare__hint { display: none; } }

/* --------------------------------------------------------------------------
   8. 記事末尾のCTA
   -------------------------------------------------------------------------- */
.article-cta {
  margin: clamp(48px, 6vw, 72px) 0 0;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-sm);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.article-cta__label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--lp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold-300);
  margin-bottom: var(--space-4);
}
.article-cta h2 {
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: var(--fw-bold);
  line-height: 1.7;
  letter-spacing: var(--ls-heading);
  color: var(--paper-0);
  text-wrap: balance;
}
.article-cta p {
  margin: var(--space-4) auto 0;
  max-width: 34em;
  font-size: var(--lp-fs-sm);
  line-height: 1.95;
  color: var(--text-on-dark-muted);
}
.article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.article-cta .tel-link { color: var(--paper-0); }
.article-cta .tel-link:hover { color: var(--gold-300); }

/* --------------------------------------------------------------------------
   9. 他の記事へ
   -------------------------------------------------------------------------- */
.related { margin-top: clamp(48px, 6vw, 72px); }
.related__title {
  font-size: var(--lp-fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gold-500);
  margin-bottom: var(--space-5);
}
.related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 0 var(--space-6);
}
.related__list li { border-bottom: 1px solid var(--border-hairline); }
.related__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-size: var(--lp-fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-700);
}
.related__list a::after { content: "→"; color: var(--gold-600); flex-shrink: 0; }
.related__list a:hover { color: var(--red-700); }
.related__list li[data-soon] { color: var(--ink-400); }
.related__list li[data-soon] span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-size: var(--lp-fs-sm);
  font-weight: var(--fw-semibold);
}
.related__list li[data-soon] span::after {
  content: "準備中";
  font-family: var(--font-ui);
  font-size: var(--lp-fs-label);
  font-weight: var(--fw-regular);
  color: var(--ink-300);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   10. 記事一覧ページ
   -------------------------------------------------------------------------- */
.index-head { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); }
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--space-5);
}
.card-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius-sm);
  padding: clamp(20px, 2.6vw, 26px);
  box-shadow: var(--shadow-card);
}
.card-item--soon { border-top-color: var(--border-strong); opacity: 0.72; }
.card-item__school {
  font-family: var(--font-heading);
  font-size: var(--lp-fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}
.card-item__title { margin: 0; font-size: var(--lp-fs-sm); line-height: 1.85; color: var(--ink-600); }
.card-item__foot { margin-top: auto; padding-top: var(--space-4); }

/* --------------------------------------------------------------------------
   コントラスト調整
   金・オリーブ・淡いグレーの小さな文字が WCAG AA (4.5:1) に届いていなかった。
   --gold-text は LP 側で定義した「文字に使える濃さの金」。
   -------------------------------------------------------------------------- */
.callout--key .callout__label { color: var(--gold-text, #7F6110); }
.article-cat { color: #5C5220; }
.related__list li[data-soon] { color: var(--ink-500); }
.related__list a::after { color: var(--gold-text, #7F6110); }