/* ==========================================================
   IT業界案内図 — 共通スタイル
   コンセプト: 濃紺の夜空に金色の見出しが映えるヒーローと、
   生成り色の紙面に白いカードを並べた落ち着いた誌面で、
   IT業界を「図解でわかりやすく」案内する
   ========================================================== */

:root {
  /* 基本色 */
  --paper: #F5F4EE;        /* 生成り色の背景 */
  --card: #FFFFFF;
  --ink: #0C1626;          /* 濃紺: 文字・ヒーロー・フッター */
  --ink-2: #0A1120;
  --muted: #4A5568;
  --muted-2: #6B7280;
  --rule: #E7E4DA;
  --rule-strong: #CFCBBE;

  /* ブランド色 */
  --red: #E5484D;          /* 見出しの目印・ホバー */
  --gold: #FFC94D;         /* ヒーローの路線・強調 */

  /* 路線カラー（職種） */
  --line-design: #EC4899;  /* Webデザイナー */
  --line-front: #E5484D;   /* フロントエンド */
  --line-back: #3B82F6;    /* バックエンド */
  --line-infra: #14A085;   /* インフラ */
  --line-qa: #F59E0B;      /* QA */
  --line-data: #A855F7;    /* データアナリスト */
  --line-pm: #3D4657;      /* プロジェクトマネージャー */

  /* 本線（開発の流れ） */
  --line-main: #0C1626;

  /* トップの4つの入口 */
  --route-flow: #E5484D;
  --route-roles: #3B82F6;
  --route-words: #14A085;
  --route-learn: #F59E0B;

  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-num: "Inter", "Zen Kaku Gothic New", sans-serif;

  --maxw: 1200px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-hover: 0 20px 44px rgba(12, 22, 38, 0.13);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--line-back);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- ヘッダー（すりガラスの固定バー） ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 244, 238, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(12, 22, 38, 0.08);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 66px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.18rem;
  letter-spacing: 0.02em;
}

/* 路線マーク: 濃紺の角丸に金色の路線 */
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: none;
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M3 15 L9 15 Q11 15 11 13 L11 9 Q11 7 13 7 L19 7' stroke='%23FFC94D' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='3' cy='15' r='2.4' fill='%23FFC94D'/%3E%3Ccircle cx='19' cy='7' r='2.4' fill='%23E5484D'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.brand small { display: none; }

.global-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.global-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--line-pm);
  padding: 8px 12px;
  border-radius: 8px;
  line-height: 1.4;
  transition: color 0.2s ease, background 0.2s ease;
}

.global-nav a:hover { color: var(--red); }

.global-nav a[aria-current="page"] { color: var(--red); }

/* 「新着記事」だけは濃紺のピル型ボタン */
.global-nav a[data-line="read"] {
  margin-left: 10px;
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.84rem;
}

.global-nav a[data-line="read"]:hover,
.global-nav a[data-line="read"][aria-current="page"] {
  background: var(--red);
  color: #fff;
}

/* ---------- ページ共通の見出し帯 ---------- */

/* 上にはパンくずが入る前提の余白（広すぎると見出しが遠くなるため詰めている） */
.page-head {
  padding: 24px 0 32px;
  border-bottom: 1px solid var(--rule);
}

/* 記事のヒーロー: アイキャッチをタイトル背景に敷く（記事側で --hero-img に画像を指定。
   画面端までは広げず、コンテンツ幅の角丸ボックス＋暗いオーバーレイ＋白文字） */
.page-head.has-hero { padding: 28px 0 36px; }
.page-head.has-hero .wrap {
  width: min(var(--maxw), calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 48px 40px;
  border-radius: 18px;
  background:
    linear-gradient(rgba(10, 16, 32, 0.74), rgba(10, 16, 32, 0.86)),
    var(--hero-img, none) center 30% / cover no-repeat #0C1626;
  box-shadow: 0 10px 28px rgba(12, 22, 38, 0.18);
}
.page-head.has-hero h1 { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.page-head.has-hero .lead { color: rgba(255, 255, 255, 0.9); }
.page-head.has-hero .lead strong { color: #fff; }
.page-head.has-hero .lead .em { color: #8ECBFF; }
.page-head.has-hero .article-date { color: rgba(255, 255, 255, 0.65); }
@media (max-width: 640px) {
  .page-head.has-hero { padding: 16px 0 24px; }
  .page-head.has-hero .wrap { width: calc(100% - 24px); padding: 32px 22px 26px; border-radius: 14px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 10px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent, var(--red));
}

.page-head h1 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.page-head .lead {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 44em;
}

/* ---------- セクション ---------- */

section { padding: 48px 0; }

/* セクション見出し: 記事本文の h2 と同じ「アクセント色の帯」表現に揃える */
.section-title {
  font-size: clamp(1.35rem, 2.6vw, 1.6rem);
  font-weight: 900;
  line-height: 1.55;
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 10px solid var(--accent, var(--red));
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--accent, var(--red)) 9%, transparent);
  letter-spacing: 0.01em;
  text-wrap: balance;
  word-break: auto-phrase;
}

@media (max-width: 640px) {
  .section-title { font-size: 1.3rem; padding: 8px 12px; }
}

.section-note {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 32px;
}

/* 見出し + 右端リンク */
/* 見出しとリンクが横並びのとき、帯は見出しではなく行全体にかける（帯が途中で切れないように） */
.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 10px solid var(--accent, var(--red));
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--accent, var(--red)) 9%, transparent);
}

.section-head .section-title {
  margin: 0;
  padding: 0;
  border-left: 0;
  border-radius: 0;
  background: none;
}

@media (max-width: 640px) {
  .section-head { padding: 8px 12px; }
}

.section-head .section-link {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--red);
  text-decoration: none;
}

.section-head .section-link:hover { color: var(--ink); }

/* ---------- カード ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 26px;
}

/* ---------- たとえ話ボックス ---------- */
/* ページ色（--accent）で淡く塗り、ラベルをチップにして本文と区別する（点線の箱だと目立たなかった） */

.analogy {
  background: color-mix(in srgb, var(--accent, var(--red)) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 30%, var(--rule));
  border-left: 6px solid var(--accent, var(--red));
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.95rem;
  line-height: 1.85;
  margin: 16px 0 0;
}

.analogy strong {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--accent, var(--red));
  border-radius: 999px;
  padding: 1px 10px;
  margin-right: 10px;
  transform: translateY(-1px);
}

/* たとえ話の枠に入れるリンクチップ（学び方ガイドの「合う教材」） */
.analogy a.chip {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 2px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 40%, var(--rule));
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.analogy a.chip:hover { border-color: var(--accent, var(--red)); color: var(--accent, var(--red)); }

/* 各項目の「ひとことで言うと」: 本文より一段大きく、ページ色の縦線で目立たせる */
.key-line {
  margin: 0 0 12px;
  padding: 2px 0 2px 14px;
  border-left: 6px solid var(--accent, var(--red));
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.6;
  text-wrap: pretty;
}

/* 開発の流れ: 路線色が濃紺なので、たとえ話の枠だけ金色にして温度を出す */
.analogy.is-gold {
  --accent: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, #fff);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--rule));
}
.analogy.is-gold strong { color: var(--ink); }

/* ---------- フッター（濃紺） ---------- */

.site-footer {
  margin-top: 88px;
  background: var(--ink);
  color: #fff;
  padding: 56px 0 40px;
  font-size: 0.85rem;
}

.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: start;
}

/* 旧デザインの路線カラー帯は使わない */
.site-footer .foot-lines { display: none; }

.site-footer nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 8px 26px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.86rem;
  font-weight: 700;
  padding-top: 8px;
}

.site-footer nav a { color: #C6CEDC; text-decoration: none; transition: color 0.2s ease; }
.site-footer nav a:hover { color: var(--gold); }

.site-footer p {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  max-width: 380px;
  color: #8A93A6;
  line-height: 1.9;
  font-size: 0.84rem;
}

/* サイト名をフッター説明文の上に置く */
.site-footer p::before {
  content: "IT業界案内図";
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

/* 一番下の区切り線とコピーライト */
.site-footer .wrap::after {
  content: "© 2026 IT業界案内図";
  grid-column: 1 / -1;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: right;
  font-size: 0.7rem;
  color: #6B7893;
}

/* ==========================================================
   トップページ
   ========================================================== */

/* ヒーロー: 濃紺の夜空 */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(59, 130, 246, 0.28), transparent 60%),
    radial-gradient(700px 420px at 5% 110%, rgba(229, 72, 77, 0.22), transparent 55%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}

/* うっすらした方眼 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 56px);
  pointer-events: none;
}

.hero .wrap { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 40px;
  align-items: center;
  padding: 44px 0 60px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 201, 77, 0.5);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 7px 16px;
  border-radius: 999px;
  margin: 0;
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* 見出しが語の途中で折り返されないよう、意味のまとまり単位で改行させる */
.hero h1 .no-break,
.hero h1 .accent-line { display: inline-block; }

/* 「路線図」は金色の文字で強調 */
.hero h1 .accent-line { color: var(--gold); }

.hero .lead {
  margin: 16px 0 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.9;
  color: #A8B3C7;
}

/* ヒーロー: こんな人のための案内図（悩みごとの行き先ボタン。旧「こんな人のための案内図です」セクションから移設）
   吹き出しと同じ白いボタンにして、濃紺の背景からはっきり浮かせる */

.hero-whom { margin: 26px 0 0; }

.hero-whom-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.hero-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 680px;
}

/* 文字数の差で高さがそろわないことがあるので、全行を同じ高さにし、リンクを li いっぱいに広げる */
.hero-chips { grid-auto-rows: 1fr; }
.hero-chips li { display: flex; }
.hero-chips a { width: 100%; }

.hero-chips a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 18px 12px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* 「自分のことだ」と感じてもらうチェック印（旧セクションの ✓ を引き継ぐ） */
.hero-chips a::before {
  content: "✓";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.hero-chips a::after {
  content: "→";
  margin-left: auto;
  padding-left: 8px;
  color: var(--red);
  font-weight: 900;
}

.hero-chips a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
  /* スマホは2列の小さなタイルにする（全幅のボタンが4段並ぶと大きく感じるため） */
  .hero-whom-title { font-size: 0.88rem; margin-bottom: 10px; }
  .hero-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero-chips a {
    min-height: 0;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  }
  .hero-chips a::before { width: 18px; height: 18px; font-size: 0.68rem; transform: translateY(1px); }
  .hero-chips a::after { display: none; }
}

/* ルートン */
.hero-mascot { justify-self: center; }

.hero-mascot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-bubble {
  position: relative;
  margin: 0;
  background: #fff;
  color: var(--ink);
  border-radius: 20px;
  padding: 18px 26px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  font-size: 0.95rem;
  line-height: 1.9;
  font-weight: 500;
}

.hero-bubble strong { font-weight: 900; }

/* ルートンに向かう矢印(しっぽ) */
.hero-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 3px;
  transform: translateX(-50%) rotate(45deg);
}

/* ルートン本体: 元のデザインと同じ大きさ */
.hero-mascot-inner .mascot-svg {
  width: min(230px, 62%);
  height: auto;
  /* 濃紺の背景に黒い輪郭が溶けないよう、白いふち取りを付ける */
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.9));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-tag { animation: fadeUp 0.7s ease both; }
  .hero h1 { animation: fadeUp 0.7s ease 0.1s both; }
  .hero .lead, .hero-whom { animation: fadeUp 0.7s ease 0.2s both; }
  .hero-mascot { animation: fadeUp 0.8s ease 0.35s both; }
  .hero-mascot-inner { animation: floatY 5s ease-in-out infinite; }
  .hero-tag::before { animation: blink 2s ease infinite; }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
}

/* トップのセクション間隔 */
.home-section { padding: 88px 0 0; }
.home-section.is-last { padding-bottom: 96px; }

/* 街の全体図ボード */
.board {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 18px 44px rgba(12, 22, 38, 0.10);
}

.hero-map {
  margin: 0; /* figure の既定マージンを打ち消す */
  overflow-x: auto;
}

.hero-map svg {
  display: block;
  min-width: 860px;
  margin: 0 auto;
  border-radius: 14px;
}

.hero-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.board-caption a { font-weight: 700; }

/* イラスト内の番号と職種の対応表（チップ） */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 6px 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.map-legend .legend-title {
  color: var(--muted-2);
  font-size: 0.76rem;
  margin-right: 6px;
}

.map-legend > span:not(.legend-title) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 6px 14px;
  border-radius: 999px;
}

.map-legend .num-badge { transform: none; width: 19px; height: 19px; font-size: 0.68rem; }

.board-caption {
  margin: 16px 4px 0;
  font-size: 0.82rem;
  color: var(--muted-2);
}

/* 4つの入口カード */

.gates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.gate {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 30px 32px 26px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(12, 22, 38, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* イラスト入りのカード: 左にイラスト・右にタイトルと補足 */
.gate:has(.gate-img) { flex-direction: row; align-items: center; gap: 22px; padding: 24px 28px; }
.gate .gate-img { flex: none; width: 116px; height: auto; }
.gate .gate-body { min-width: 0; }
/* 本文中に置かれた場合でも、記事用の h3 装飾（左バー）を持ち込まない */
.gate .gate-body h3 { margin: 0; padding-left: 0; border-left: 0; font-size: 1.15rem; }
.gate .gate-sub { margin: 6px 0 0; font-size: 0.92rem; color: var(--muted); text-wrap: pretty; word-break: normal; }   /* 文節改行は右に余白が出るのでやめる */

@media (max-width: 640px) {
  .gate:has(.gate-img) { gap: 16px; padding: 18px 20px; }
  .gate .gate-img { width: 88px; }
}

/* 上端の路線カラー帯 */
.gate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--gate-color, var(--ink));
}

/* ホバーは新着記事のカード(.post-item:hover)と同じ動き: 4px浮く・枠線が路線色になる・影が濃くなる */
.gate:hover {
  transform: translateY(-4px);
  border-color: var(--gate-color, var(--ink));
  box-shadow: 0 14px 30px rgba(12, 22, 38, 0.14);
}

.gate .gate-no {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--gate-color, var(--ink));
}

/* data-no があるカードは番号を丸で囲んで先頭に置く */
.gate .gate-no[data-no]::before {
  content: attr(data-no);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  letter-spacing: 0;
}

.gate h3 { margin: 0; font-size: 1.3rem; font-weight: 900; line-height: 1.45; }

.gate p { margin: 0; font-size: 0.9rem; line-height: 1.9; color: var(--muted); flex: 1; }

.gate .gate-go {
  display: block;
  text-align: right;
  font-weight: 900;
  font-size: 0.88rem;
  color: var(--gate-color, var(--ink));
}

/* トップ: はじめての人はこの3本から（旧「こんな人のための案内図です」の領域を記事の案内に転用）
   記事3本 + シリーズ枠の4列。.post-list の2列指定より後で効かせるためクラスを重ねて優先度を上げる */

.post-list.start-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* シリーズ枠（HTML入門 全10回）: 4枚目の縦カード */
.series-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  background: color-mix(in srgb, var(--route-learn) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--route-learn) 35%, var(--rule));
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.series-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(12, 22, 38, 0.14); }

.series-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--route-learn);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.series-badge strong { font-size: 0.95rem; }

.series-title {
  margin: 4px 0 0;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.4;
}

.series-desc {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}

.series-go {
  align-self: flex-end;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--route-learn);
  white-space: nowrap;
}

@media (max-width: 960px) {
  .post-list.start-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* スマホは縦に積むので、サムネを右に小さく置いた横長カードにして高さを抑える */
  .post-list.start-picks { grid-template-columns: 1fr; }
  .start-picks .post-item.has-thumb { flex-direction: row; align-items: center; }
  .start-picks .post-item.has-thumb .pi-body { padding: 14px 16px; }
  .start-picks .post-item .pi-thumb { width: 96px; height: 64px; aspect-ratio: auto; border-bottom: 0; border-radius: 8px; margin-right: 14px; }
  .start-picks .post-item h2 { font-size: 1rem; }
  .start-picks .post-item .pi-sub { display: none; }  /* スマホは題名だけにして1枚を低くする */
  .start-picks .post-item .pi-meta { margin-bottom: 6px; }
  .series-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 14px 16px; }  /* スマホは「バッジ＋題名」の行と、右寄せのリンクの2行にする */
  .series-title { margin: 0; font-size: 1.05rem; }
  .series-desc { display: none; }
  .series-badge { align-self: center; }
  .series-go { grid-column: 1 / -1; justify-self: end; margin-top: 0; }
}

/* 新着記事（トップ） */
.home-articles { margin-top: 32px; }

/* ---------- トップ: AIツールの使い方（紹介文＋最新記事1件を横並び） ---------- */
.ai-section .section-link { color: var(--accent, var(--ink)); }
.ai-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 36px;
  align-items: center;
}
.ai-feature .post-list { grid-template-columns: 1fr; }
.ai-feature > * { min-width: 0; }   /* スライダーの内容幅で列が広がらないようにする（スマホで横スクロールが出る） */
.ai-kicker {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--accent, var(--ink));
}
.ai-fields {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-fields li {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent, var(--ink)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, var(--ink)) 35%, transparent);
}
.ai-lead { margin: 0 0 20px; line-height: 1.95; }
.ai-cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--accent, var(--ink));
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent, var(--ink)) 35%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ai-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent, var(--ink)) 45%, transparent); }

/* AI記事カードのスライドショー（js/ai-slider.js）。カードの浮き上がりと影が切れないよう viewport に余白を持たせる */
.ai-slider { position: relative; }
.ai-slider-viewport { overflow: hidden; margin: -8px -8px -14px; padding: 8px 8px 14px; touch-action: pan-y; }
.ai-slider-track {
  display: flex;
  align-items: stretch;
  gap: 16px;   /* viewport の左右余白(8px)より広くして次のカードが見えないようにする */
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.ai-slide { flex: 0 0 100%; min-width: 0; display: flex; }
.ai-slide .post-item { width: 100%; }
.ai-slider-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.ai-slider-nav[hidden] { display: none; }
.ai-slider-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--ink)) 40%, transparent);
  background: #fff;
  color: var(--accent, var(--ink));
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.ai-slider-btn:hover { background: color-mix(in srgb, var(--accent, var(--ink)) 12%, #fff); transform: translateY(-1px); }
.ai-slider-dots { display: flex; gap: 8px; }
.ai-slider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, var(--ink)) 28%, #fff);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.ai-slider-dot[aria-selected="true"] { background: var(--accent, var(--ink)); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .ai-slider-track { transition: none; }
}
@media (max-width: 860px) {
  .ai-feature { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ==========================================================
   開発の流れページ（各駅停車）
   ========================================================== */

.flow-line {
  position: relative;
  margin-top: 8px;
}

/* 本線: 左側を貫く太い線 */
.flow-line::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 10px;
  border-radius: 5px;
  background: var(--line-main);
}

.station {
  position: relative;
  padding: 26px 0 26px 88px;
}

/* 駅マーク */
.station::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 6px solid var(--line-main);
}

.station-no {
  display: inline-block;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--line-main);
  border-radius: 6px;
  padding: 2px 10px;
  margin-bottom: 6px;
}

.station h2 {
  margin: 0 0 4px;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 900;
}

.station .station-en {
  font-family: var(--font-num);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 14px;
}

.station .card p { margin: 0 0 12px; }
.station .card p:last-child { margin-bottom: 0; }

.station dl {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: start;
  font-size: 0.92rem;
}

/* 項目名はチップにして、本文と見分けがつくようにする */
.station dt {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--accent, var(--line-main));
  background: color-mix(in srgb, var(--accent, var(--line-main)) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, var(--line-main)) 35%, transparent);
  border-radius: 999px;
  padding: 1px 10px;
  white-space: nowrap;
  transform: translateY(3px);
}

.station dd { margin: 0; }

/* コラム（ウォーターフォール／アジャイル等） */

.column-box {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 8px solid var(--line-qa);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 8px 0;
}

.column-box h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 900; }
.column-box p { margin: 0 0 10px; font-size: 0.95rem; }
.column-box p:last-child { margin-bottom: 0; }

/* ==========================================================
   職種図鑑ページ（路線ガイド）
   ========================================================== */

/* 路線一覧（ページ内リンク） */
.line-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.line-index a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.line-index a:hover { border-color: var(--ink); }

.line-symbol {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid var(--line-color, var(--ink));
  background: #fff;
  color: var(--line-color, var(--ink));
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 職種セクション */

.role {
  border-top: 1px solid var(--rule);
  padding: 34px 0 40px;
  scroll-margin-top: 90px;
}

/* 見出し・サマリーとイラストを横並びにして、縦の間延びを防ぐ */
.role-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "sym name fig"
    "sum sum  fig";
  column-gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.role-head .line-symbol {
  grid-area: sym;
  align-self: end;
  width: 52px;
  height: 52px;
  border-width: 7px;
  font-size: 1.3rem;
}

.role-head h2 {
  grid-area: name;
  align-self: end;
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  font-weight: 900;
  line-height: 1.25;
  text-wrap: balance;
}

/* 職種名の下に路線色のバーを引いて、セクションの主役だと分かるようにする */
.role-head h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--line-color, var(--ink));
}

.role-summary {
  grid-area: sum;
  align-self: start;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.6;
  margin: 14px 0 0;
  padding-left: 16px;
  border-left: 6px solid var(--line-color, var(--ink));
}

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* カード内の見出し: 職種色の角丸マーカーつきで、本文より強く（灰色の小さなラベルだと本文に埋もれた） */
.role-grid .card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 900;
  color: var(--line-color, var(--ink));
}

.role-grid .card h3::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--line-color, var(--ink));
}

.role-grid .card p, .role-grid .card ul { margin: 0; font-size: 0.95rem; line-height: 1.85; }

/* たとえ話のカードは職種色で淡く塗って、他の3枚と区別する */
.role-grid .card.is-analogy {
  background: color-mix(in srgb, var(--line-color, var(--ink)) 7%, #fff);
  border-color: color-mix(in srgb, var(--line-color, var(--ink)) 30%, var(--rule));
}

.role-grid .card ul { padding-left: 1.3em; }
.role-grid .card li { margin-bottom: 4px; }

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tools li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 !important;
}

/* 工程×職種マトリクス */

.matrix-wrap { overflow-x: auto; }

.matrix {
  border-collapse: collapse;
  width: 100%;
  min-width: 680px;
  background: var(--card);
  font-size: 0.88rem;
}

.matrix caption {
  caption-side: bottom;
  text-align: left;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 10px 4px;
}

.matrix th, .matrix td {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  text-align: center;
}

.matrix thead th {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
}

.matrix tbody th {
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}

.matrix tbody th .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -1px;
}

.matrix td.on  { font-weight: 900; }
.matrix td.sub { color: var(--muted); }

/* ==========================================================
   用語集ページ（駅名標カード）
   ========================================================== */

/* 見出し帯: 説明文の右に図を並べて、右側の空白をなくす */
.glossary-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 32px;
  align-items: center;
}
.glossary-head .diagram { margin: 0; }
.glossary-head .diagram svg { width: 100%; height: auto; }
@media (max-width: 900px) {
  .glossary-head { grid-template-columns: 1fr; gap: 16px; }
}

.glossary-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 10px 20px;
  max-width: 520px;
}

.search-box input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-jp);
  font-size: 1rem;
  width: 100%;
  color: var(--ink);
}

.search-box svg { flex: none; }

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-chips button {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid var(--rule-strong);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}

.cat-chips button:hover { border-color: var(--ink); }

.cat-chips button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.glossary-count {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 16px;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* 駅名標風カード: 上下の帯＋中央に用語名 */
.term-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.term-card .term-band {
  height: 8px;
  background: var(--cat-color, var(--ink));
}

.term-card .term-body { padding: 16px 20px 18px; flex: 1; }

.term-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.4;
}

.term-card .term-read {
  font-family: var(--font-num);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 8px;
}

.term-card .term-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--cat-color, var(--ink));
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 10px;
  margin: 0 0 10px;
}

.term-card p { margin: 0; font-size: 0.9rem; }

.term-card .term-hint {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--paper);
  border-radius: 6px;
  padding: 8px 12px;
}

.glossary-empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
}

/* ==========================================================
   マスコット（ルートン）
   ========================================================== */

.mascot-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-bottom: 4px;
}

.mascot-box .mascot-svg {
  width: min(230px, 62%);
  height: auto;
}

.speech-bubble {
  position: relative;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.7;
  text-align: center;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: var(--card);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}

.mascot-name {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.mascot-name strong { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .mascot-svg .mascot-wing-flag {
    animation: flag-wave 2.6s ease-in-out infinite;
    transform-origin: 178px 120px;
  }
  @keyframes flag-wave {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-10deg); }
  }
}

/* ==========================================================
   イラスト・図解
   ========================================================== */

/* 工程アイコン（開発の流れ）: カード右上に回り込み配置 */
.station-icon {
  float: right;
  width: 58px;
  height: 58px;
  margin: 0 0 10px 14px;
}

/* 工程の人物イラスト（開発の流れ）: カード右上に回り込み配置 */
.station-figure {
  float: right;
  width: clamp(120px, 22vw, 168px);
  height: auto;
  margin: 0 0 12px 18px;
}

/* 職種アイコン */
.role-head .role-icon {
  margin-left: auto;
  width: 54px;
  height: 54px;
  flex: none;
}

/* 職種の人物イラスト（職種図鑑）: 見出し右に配置 */
.role-head .role-figure {
  grid-area: fig;
  align-self: center;
  justify-self: end;
  width: clamp(120px, 22vw, 168px);
  height: auto;
}

/* 図解ボックス */
.diagram {
  margin: 20px 0 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 18px 10px;
  overflow-x: auto;
}

.diagram svg { display: block; margin: 0 auto; }
.diagram img { display: block; width: 100%; height: auto; border-radius: 8px; }

.diagram figcaption {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
  padding: 8px 0 6px;
}

/* 家の断面図の凡例 */
.diagram-legend {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
  font-size: 0.9rem;
}

.diagram-legend li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.num-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--badge-color, var(--ink));
  color: #fff;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 0.75rem;
  transform: translateY(3px);
}

/* 職種マップ（レストランの見取り図）: 凡例カードとハイライト連動 */
.role-map [data-role] { transition: opacity 0.25s ease; }
.role-map [data-role].dim { opacity: 0.15; }
.role-map svg { width: 100%; max-width: 960px; height: auto; }
@media (max-width: 640px) {
  /* 画面幅に縮めると部屋名が読めなくなるので、最低幅を確保して横にスクロールさせる */
  .role-map svg { min-width: 620px; }
}

.legend-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.legend-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-jp);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.25s ease;
}

.legend-card:hover { border-color: var(--ink); }
.legend-card.dim { opacity: 0.45; }
.legend-card .num-badge { transform: translateY(2px); }

.legend-card .lc-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
}

.legend-card .lc-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.7;
}

.legend-card .lc-desc b { color: var(--lc, var(--ink)); }

/* たとえ話カードの家アイコン */
.house-hint-icon {
  float: left;
  width: 68px;
  height: 68px;
  margin: 4px 18px 6px 0;
}

/* ==========================================================
   学び方ガイド（教材カタログ）
   ========================================================== */

.page-head-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.page-head-flex > div:first-child { flex: 1 1 480px; min-width: 0; }

.head-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: none;
}

.head-mascot .mascot-svg { width: 128px; height: auto; }

.head-mascot .speech-bubble { font-size: 0.82rem; padding: 8px 14px; }

.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.material-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--mat-color, var(--ink));
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mat-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mat-icon { width: 42px; height: 42px; flex: none; }

.mat-head h3 { margin: 0; font-size: 1.1rem; font-weight: 900; }

.mat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mat-tags span {
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 1px 10px;
  color: var(--muted);
  white-space: nowrap;
}

.material-card > p { margin: 0; font-size: 0.95rem; line-height: 1.8; flex: 1; }

/* 「始め方」は教材色で淡く塗り、ラベルをチップにする */
.material-card .term-hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--ink);
  background: color-mix(in srgb, var(--mat-color, var(--ink)) 8%, #fff);
  border-left: 4px solid var(--mat-color, var(--ink));
  border-radius: 6px;
  padding: 8px 12px;
}

.material-card .term-hint b {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--mat-color, var(--ink));
  border-radius: 999px;
  padding: 0 9px;
  margin-right: 8px;
}

/* どのステップ向けかのバッジ（学びの3ステップと同じ色で束ねる） */
.mat-tags .mat-step {
  color: #fff;
  background: var(--step-color, var(--line-qa));
  border-color: var(--step-color, var(--line-qa));
}

/* ==========================================================
   スクロール登場アニメーション
   ========================================================== */

/* JSが有効なとき（html.js）だけ隠す。JSなしでも内容は必ず読める */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================
   レスポンシブ
   ========================================================== */

@media (max-width: 860px) {
  .gates { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .mascot-box .mascot-svg { width: 160px; }
  .diagram-legend { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  /* 全体イラストは横スクロールさせず、画面幅に収めて全体を見せる */
  .hero-map { overflow-x: hidden; }
  .hero-map svg { min-width: 0; width: 100%; }
  .station { padding-left: 64px; }
  .flow-line::before { left: 19px; }
  .station::before { left: 8px; }
  /* モバイルでは回り込みをやめてカード上部の中央に置く（本文の折返しが窮屈になるため） */
  .station-figure { float: none; display: block; width: 132px; margin: 0 auto 14px; }
  /* スマホは横幅が足りないので、職種名を全幅に出してイラストはサマリーの横に置く */
  .role-head {
    grid-template-areas:
      "sym name name"
      "sum sum  fig";
    column-gap: 12px;
  }
  .role-head .line-symbol { align-self: center; width: 44px; height: 44px; border-width: 6px; font-size: 1.1rem; }
  .role-head h2 { align-self: center; font-size: 1.35rem; }
  .role-head h2::after { width: 44px; height: 4px; margin-top: 8px; }
  .role-head .role-summary { margin-top: 12px; }
  .role-head .role-figure { width: 132px; height: auto; }
  .page-head { padding-top: 40px; }
}

/* ==========================================================
   用語詳細ページ・記事ページ
   ========================================================== */

/* 用語カードをリンク化 */
a.term-card {
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.term-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(12, 22, 38, 0.1);
}

.term-card .term-more {
  margin: 12px 0 0 !important;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cat-color, var(--ink));
}

/* パンくずリスト */
/* パンくず: 装飾のないフラットなテキスト。現在地だけアクセント色の太字で示す */
.breadcrumb { font-size: 0.88rem; padding: 20px 0 0; letter-spacing: 0.04em; }

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.breadcrumb li { display: flex; align-items: center; }

/* 区切りのシェブロン（前の項目の後ろに置く） */
.breadcrumb li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 16px;
  border-top: 1.5px solid var(--muted-2);
  border-right: 1.5px solid var(--muted-2);
  transform: rotate(45deg);
}

.breadcrumb a {
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb a:hover { color: var(--accent, var(--ink)); text-decoration: underline; }

/* 現在地 */
.breadcrumb li[aria-current="page"] {
  font-weight: 900;
  color: var(--accent, var(--ink));
}

@media (max-width: 640px) {
  .breadcrumb { font-size: 0.8rem; }
  .breadcrumb li:not(:last-child)::after { margin: 0 10px; }
}

/* 用語ページの読み・英語表記 */
.term-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--muted);
}

.term-meta .term-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 10px;
}

/* 記事本文 */
/* 本文は .wrap の幅(--maxw)をそのまま使う(/flow と同じ横幅) */
.article-body { max-width: var(--maxw); font-size: 1.05rem; line-height: 2.05; }

/* ==========================================================
   記事の右サイドバー（Zenn風。js/article-side.js が生成）
   ========================================================== */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
  max-width: var(--maxw);
}
.article-layout .article-body { max-width: none; min-width: 0; }

/* サイドバー全体はあふれさせない。画面が低いときは目次だけを縮めて内部スクロールにし、
   下の「おすすめ記事」が切れて見えなくなるのを防ぐ */
.article-side {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 106px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.article-side .side-toc {
  min-height: 0;
  overflow-y: auto;
  /* スクロールバーは見せない（あふれた場合もバー非表示のままスクロールは可能） */
  scrollbar-width: none;
}
.article-side .side-toc::-webkit-scrollbar { display: none; }

/* おすすめ記事は縮めずに必ず表示する */
.article-side .side-reco { flex: none; }

.side-box {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 16px;
}

.side-title {
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.side-toc ol { margin: 0; padding: 0; list-style: none; }
.side-toc li { margin: 0; border-left: 3px solid var(--rule); }
.side-toc a {
  display: block;
  padding: 5px 0 5px 12px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  text-decoration: none;
}
.side-toc a:hover { color: var(--ink); }
.side-toc li.is-active { border-left-color: var(--accent, var(--ink)); }
.side-toc li.is-active > a { color: var(--ink); font-weight: 900; }
/* h3（小見出し）は段下げして小さく */
.side-toc li.sub a { padding-left: 26px; font-size: 0.8rem; padding-top: 4px; padding-bottom: 4px; }

.side-reco ul { margin: 0; padding: 0; list-style: none; }
.side-reco li + li { border-top: 1px dashed var(--rule); }
.side-reco a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--ink);
  text-decoration: none;
}
.side-reco .reco-thumb {
  flex: none;
  width: 76px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: #fff;
}
.side-reco a span { min-width: 0; }
.side-reco a:hover { color: var(--accent, var(--ink)); text-decoration: underline; }
.side-more { margin: 6px 0 0; text-align: right; font-size: 0.8rem; }

/* サイドバーがあるときは本文冒頭の目次を隠す（重複するため） */
@media (min-width: 1021px) {
  .article-layout .article-body > .toc { display: none; }
  /* 隠した目次の次に来る見出しは h2:first-child 扱いにならないので、上マージンを消して
     サイドバーの目次と本文の開始位置を揃える */
  .article-layout .article-body > .toc + h2 { margin-top: 0; }
}
/* 狭い画面ではサイドバーを出さず、従来の1カラムに戻す */
@media (max-width: 1020px) {
  .article-layout { display: block; }
  .article-side { display: none; }
}

/* 日本語の読みやすい改行: 段落は孤立行を避け、見出し・キャプションは文節で折り返す（対応ブラウザのみ・段階的強化。
   吹き出し等の狭い箱に auto-phrase を使うと行がガタつくので見出し系に限定する） */
.article-body p, .article-body li { text-wrap: pretty; }
.article-body h2, .article-body h3, .diagram figcaption { word-break: auto-phrase; }


/* 図解は横に伸ばしすぎず、中央に置く */
.article-body .diagram svg { max-width: 760px; }

/* 見出しはアクセント色の帯で強調（帯色はページごとの --accent の薄いトーン） */
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.55;
  margin: 52px 0 18px;
  padding: 10px 16px;
  border-left: 10px solid var(--accent, var(--ink));
  border-radius: 0 10px 10px 0;
  background: #EFEBE0;
  background: color-mix(in srgb, var(--accent, var(--ink)) 9%, transparent);
  text-wrap: balance;
  scroll-margin-top: 90px;
}

.article-body h2:first-child { margin-top: 0; }

.article-body h3 {
  font-size: 1.18rem;
  font-weight: 900;
  margin: 32px 0 12px;
  padding-left: 10px;
  border-left: 5px solid var(--accent, var(--ink));
  scroll-margin-top: 90px;
}

@media (max-width: 640px) {
  .article-body h2 { font-size: 1.3rem; margin: 40px 0 14px; padding: 8px 12px; }
  .article-body h3 { font-size: 1.1rem; }
}

.article-body p { margin: 0 0 16px; }

.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 1.5em; }
.article-body li { margin-bottom: 6px; }

/* たとえ話（大） */
.analogy-lg {
  background: var(--card);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 0 16px;
}

/* 現場での使われ方 */
.usage-item {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--accent, var(--ink));
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 12px;
}

.usage-item .usage-line { margin: 0 0 6px; font-weight: 700; }
.usage-item .usage-note { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* よくある質問 */
.faq-list { margin: 0 0 16px; }

.faq-list .faq-item {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
}

/* dt/dd も block + ぶら下げインデント（flex だと文中の strong/code が分断されるため） */
.faq-list dt {
  display: block;
  position: relative;
  padding-left: 1.9em;
  font-weight: 900;
  margin-bottom: 8px;
}

.faq-list dt::before {
  content: "Q.";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--accent, var(--ink));
}

.faq-list dd { display: block; position: relative; padding-left: 1.9em; margin: 0; font-size: 1rem; }

.faq-list dd::before {
  content: "A.";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--muted);
}

/* 関連用語チップ */
.related-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.related-terms a {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.related-terms a:hover { border-color: var(--ink); }

/* 前後の用語ナビ */
.term-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 36px 0 0;
  flex-wrap: wrap;
}

.term-nav a {
  flex: 1 1 200px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.term-nav a:hover { border-color: var(--ink); }

.term-nav .tn-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 2px;
}

.term-nav .tn-next { text-align: right; }

.article-cta { margin-top: 44px; }

/* 用語さくいん（glossary.html の静的リンク一覧） */
.words-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.words-index-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 900;
  margin: 0 0 10px;
}

.words-index-group h3 .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.words-index-group ul { list-style: none; margin: 0; padding: 0; }
.words-index-group li { margin: 0 0 6px; }

.words-index-group a { font-size: 0.9rem; text-decoration: none; }
.words-index-group a:hover { text-decoration: underline; }

/* 記事一覧カード（トップ・職種図鑑からの導線） */
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.article-list .gate p { font-size: 0.9rem; }

/* ルートンがたとえ話をしゃべる吹き出しレイアウト */
.analogy-routon {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 16px;
}

.analogy-routon .mascot-svg {
  width: 92px;
  flex: none;
  margin-top: 8px;
}

/* 画像版のルートン（記事で使用）。SVG版と同じ扱いにする */
.analogy-routon .rooton-img {
  width: 100px;
  height: auto;
  flex: none;
  align-self: flex-end;
}

.article-body .analogy-routon { margin: 18px 0 24px; }

.analogy-routon .speech-bubble {
  margin: 0;
  text-align: left;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.95;
  padding: 14px 20px;
  /* pretty は最終行を整えるために手前の行を詰めるので、狭い吹き出しでは右が余る。
     行を目一杯まで使う既定の折り返しに戻す */
  text-wrap: auto;
}

/* 吹き出しのしっぽを左向き（ルートン側）にする */
.analogy-routon .speech-bubble::after {
  left: -8px;
  top: 34px;
  bottom: auto;
  transform: rotate(135deg);
}

@media (max-width: 640px) {
  .analogy-routon { gap: 10px; }
  .analogy-routon .mascot-svg { width: 68px; }
  .analogy-routon .rooton-img { width: 70px; }
}

/* スマホでは横に並べると吹き出しが狭くなり1行10文字ほどで折り返してしまうため、
   ルートンを上に置いて吹き出しを画面幅いっぱいに使う（しっぽも上向きにする） */
@media (max-width: 560px) {
  .analogy-routon { flex-direction: column; align-items: stretch; gap: 0; }
  /* 用語ページは .mascot-svg、記事は .rooton-img（画像版）なので両方に効かせる */
  .analogy-routon .mascot-svg,
  .analogy-routon .rooton-img {
    width: 60px;
    margin: 0 0 -4px 10px;
    align-self: flex-start;
  }
  .analogy-routon .speech-bubble { width: 100%; }
  .analogy-routon .speech-bubble::after {
    left: 28px;
    top: -9px;
    bottom: auto;
    transform: rotate(-135deg);
  }
}

/* FAQを開閉式にする（details/summary） */
details.faq-item summary {
  display: flex;
  gap: 10px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

details.faq-item summary::-webkit-details-marker { display: none; }

details.faq-item summary::before {
  content: "Q.";
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--accent, var(--ink));
  flex: none;
}

details.faq-item summary::after {
  content: "＋";
  margin-left: auto;
  flex: none;
  color: var(--muted);
  font-weight: 500;
}

details.faq-item[open] summary::after { content: "－"; }

/* 回答は block + ぶら下げインデント（flex だと文中の strong/code が別項目になり
   縦書き状に潰れるため。point-box と同じ不具合の対策） */
details.faq-item > p {
  display: block;
  position: relative;
  padding-left: 1.9em;
  margin: 10px 0 0;
  font-size: 1rem;
}

details.faq-item > p::before {
  content: "A.";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--muted);
}

/* 記事の目次 */
.toc {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin: 0 0 32px;
  font-size: 0.92rem;
}

.toc .toc-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.toc ol {
  margin: 0;
  padding-left: 1.4em;
}

.toc li { margin-bottom: 4px; }

.toc a { text-decoration: none; font-weight: 700; }
.toc a:hover { text-decoration: underline; }


/* ==========================================================
   読みもの(記事一覧)
   ========================================================== */

.article-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 8px solid var(--card-color, var(--ink));
  border-radius: var(--radius);
  padding: 22px 26px 20px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(12, 22, 38, 0.1);
}

.article-card .ac-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--muted);
}

.article-card .ac-cat {
  font-weight: 700;
  color: var(--card-color, var(--ink));
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 12px;
}

.article-card h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.45;
}

.article-card .ac-sub {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
}

.article-card .ac-desc {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  flex: 1;
}

.article-card .ac-go {
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--card-color, var(--ink));
}

.list-note {
  margin: 24px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* 記事ページ内の日付表示 */
.article-date {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 14px;
}
/* ==========================================================
   新着記事(記事一覧・ブログ風の縦一列)
   他ページのカード(.gate / .card)と同じ白背景・枠線で統一する
   ========================================================== */

/* 記事一覧: 2列グリッド（狭い画面は1列） */
.post-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 760px) {
  .post-list { grid-template-columns: 1fr; gap: 16px; }
}

/* カテゴリフィルター */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}
.cat-filter .chip {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 7px 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cat-filter .chip:hover { border-color: var(--ink); color: var(--ink); }
.cat-filter .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-filter .chip .chip-n { font-family: var(--font-num); font-size: 0.8em; opacity: 0.75; margin-left: 4px; }

/* カード全体がリンク（モダンなカード型: サムネ全面＋角丸＋浮き上がるホバー） */
.post-item {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  padding: 18px 22px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(12, 22, 38, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* アイキャッチつきカード: サムネはカードの縁いっぱい・本文はその下 */
.post-item.has-thumb {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.post-item .pi-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post-item.has-thumb .pi-body { padding: 16px 20px 20px; }
.post-item .pi-thumb {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--rule);
  background: #fff;
}

.post-item:hover {
  transform: translateY(-4px);
  border-color: var(--card-color, var(--ink));
  box-shadow: 0 14px 30px rgba(12, 22, 38, 0.14);
}

.post-item .pi-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.post-item .pi-cat {
  font-weight: 700;
  color: var(--card-color, var(--ink));
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 12px;
}

.post-item h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.6;
  /* balance＋文節改行だと右に余白があるのに折り返す（Seedance の記事カードで指摘）→ 行を目一杯使う既定の折り返し */
  text-wrap: wrap;
  word-break: normal;
}

.post-item .pi-sub {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}

.post-item .pi-desc {
  margin: 10px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 46em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 「続きを読む」はカード右下に寄せる */
.post-item .pi-go {
  display: block;
  margin-top: 12px;
  text-align: right;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--card-color, var(--ink));
}

/* ページ送り */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.pager a,
.pager .pg-num {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.pager a:hover { border-color: var(--ink); }

.pager .pg-num.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.pager .pg-prev,
.pager .pg-next { font-family: var(--font-jp); }

.list-note {
  margin: 24px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* 記事ページ内の日付表示 */
.article-date {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 14px;
}


/* ==========================================================
   記事の強調表現(article-body内)
   ========================================================== */

/* 太字にはページのアクセント色でマーカーを引く(蛍光ペン風) */
.article-body p strong,
.article-body li strong {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent, var(--ink)) 28%, transparent) 62%);
  padding: 0 1px;
}

/* 要点ボックス: 章のいちばん大事な一文を大きく囲む */
/* display:block にしている理由: flex だと本文中の strong / code が独立したフレックス項目になり、
   前後の地の文と分断されて不自然な改行と gap の隙間ができるため（ラベルは inline-block で先頭に置く） */
.point-box {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 8px solid var(--accent, var(--ink));
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 18px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.9;
}

.point-box .point-label {
  display: inline-block;
  margin-right: 10px;
  vertical-align: 2px;
  font-family: var(--font-num);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--accent, var(--ink));
  border-radius: 999px;
  padding: 3px 12px;
  transform: translateY(-2px);
}

/* コマンドなどの短いコード表記 */
.article-body code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* 色つきキーワード: アクセント色+太字で目を引かせる */
.article-body .em {
  color: var(--accent, var(--ink));
  font-weight: 900;
}

/* 注意書き: 赤系で軽く警告 */
.article-body .caution {
  background: rgba(229, 72, 77, 0.07);
  border: 1px dashed rgba(229, 72, 77, 0.5);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 0.98rem;
  margin: 0 0 16px;
}

.article-body .caution::before {
  content: '注意';
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--line-front);
  border-radius: 999px;
  padding: 1px 10px;
  margin-right: 10px;
  transform: translateY(-1px);
}


/* ==========================================================
   レスポンシブ(刷新デザイン分)
   ========================================================== */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }   /* 上のボタン列とルートンの行のあいだを空ける */
  /* 1列になるとルートンが縦に積まれて高さを食う（約340px）ので、吹き出しと小さなルートンを横並びの1行にまとめる */
  .hero-mascot { justify-self: stretch; }
  .hero-mascot-inner { flex-direction: row-reverse; align-items: center; gap: 14px; }   /* 左にルートン、右に吹き出し */
  .hero-bubble {
    flex: 1;
    max-width: none;
    text-align: left;
    padding: 12px 16px;
    font-size: 0.88rem;
    line-height: 1.7;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  }
  .hero-bubble br { display: none; }   /* 横長の吹き出しでは改行を消して自然に折り返す */
  .hero-bubble::after { left: -7px; right: auto; bottom: auto; top: 50%; width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg); }   /* しっぽは左のルートンへ向ける */
  .hero-mascot-inner .mascot-svg { width: 92px; flex: none; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .site-header .wrap { gap: 10px; min-height: 60px; }
  .brand { font-size: 1.05rem; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; background-size: 19px 19px; }
  .global-nav { margin-left: 0; width: 100%; gap: 2px; }
  .global-nav a { padding: 6px 8px; font-size: 0.84rem; }
  .global-nav a[data-line="read"] { margin-left: auto; padding: 8px 14px; }
  .hero-grid { padding-top: 32px; padding-bottom: 40px; }
  .hero-bubble { max-width: none; }
  .home-section { padding-top: 56px; }
  .home-section.is-last { padding-bottom: 64px; }
  .board { padding: 10px; border-radius: 18px; }
  .gate { padding: 24px 22px 20px; }
  .site-footer { margin-top: 56px; padding: 40px 0 28px; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .site-footer nav { grid-column: 1; grid-row: 2; justify-content: flex-start; padding-top: 0; }
}

/* ==========================================================
   コードブロック(記事内のコピー用コード) 2026-08-29
   ========================================================== */

.article-body .code-block {
  margin: 0 0 22px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: #0C1626;
  box-shadow: 0 6px 18px rgba(12, 22, 38, 0.18);
}

.article-body .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: #16223A;
  color: #E7E4DA;
  font-family: var(--font-num);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.article-body .code-head .file-name::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #E8574B);
  margin-right: 8px;
  vertical-align: 1px;
}

/* 目立たせるコピーボタン: アクセント色の丸ボタン+白フチ+影 */
.article-body .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent, #E8574B);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s, background 0.2s;
}

.article-body .copy-btn svg { width: 18px; height: 18px; flex: none; }

.article-body .copy-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 10px 20px rgba(0, 0, 0, 0.4);
}

.article-body .copy-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.article-body .copy-btn.is-done { background: #1FA36B; }

.article-body .code-block pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #E7E4DA;
}

.article-body .code-block pre code {
  display: block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
  color: inherit;
}

@media (max-width: 600px) {
  .article-body .copy-btn { padding: 8px 14px; font-size: 0.86rem; }
}

/* ==========================================================
   狭い画面の折り返し（★このファイルの最後に置くこと）
   balance（各行を同じ長さに揃える）と文節改行は広い画面では見栄えが良いが、
   スマホでは行末に余白を生んでしまうため、1行を目一杯使う既定の折り返しに戻す。
   上で個別に balance を指定している箇所を打ち消すので、必ず末尾に置く。
   ========================================================== */
@media (max-width: 640px) {
  .section-title,
  .page-head h1,
  .page-head .lead,
  .article-body h2,
  .article-body h3,
  .article-body p,
  .article-body li,
  .diagram figcaption,
  .post-item h2,
  .post-item .pi-sub,
  .gate .gate-sub,
  .speech-bubble {
    text-wrap: wrap;
    word-break: normal;
  }
}

/* ── 画像・図解のライトボックス（js/lightbox.js） ── */
.lb-zoomable { cursor: zoom-in; }
.lb-zoomable:focus-visible { outline: 3px solid var(--accent, var(--ink)); outline-offset: 3px; }
html.lb-open, html.lb-open body { overflow: hidden; }
.lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 14, 22, 0.93);
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}
.lb[hidden] { display: none; }
.lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lb-item {
  line-height: 0;
  transform-origin: center center;
  will-change: transform;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.lb-item.is-zoomed { cursor: grab; }
.lb-item img {
  display: block;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  border-radius: 8px;
  -webkit-user-drag: none;
}
.lb-item.is-svg { padding: 12px; background: var(--paper, #f7f8f6); }
.lb-item.is-svg svg { display: block; }
.lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lb-close:hover, .lb-close:focus-visible { background: rgba(255, 255, 255, 0.3); outline: 2px solid #fff; outline-offset: 2px; }
.lb-cap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.lb-cap[hidden] { display: none; }
.lb-hint {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.82rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.lb-hint.is-hidden { opacity: 0; }
@media (max-width: 640px) {
  .lb-hint { top: 72px; font-size: 0.78rem; }
  .lb-cap { font-size: 0.82rem; }
}

/* 用語ページ「関連する記事」: 用語集から記事への導線 */
.related-articles {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.related-articles li { border-bottom: 1px solid var(--rule); }

.related-articles a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 13px 6px;
  color: inherit;
  text-decoration: none;
}

.related-articles a:hover { background: var(--card); }
.related-articles a:hover .ra-title { color: var(--red); }

.related-articles .ra-cat {
  flex: none;
  font-size: 12px;
  color: var(--muted-2);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.related-articles .ra-title { font-weight: 700; line-height: 1.5; }

@media (max-width: 600px) {
  .related-articles a { flex-direction: column; gap: 6px; }
  .related-articles .ra-cat { align-self: flex-start; }
}