/* ============================================================
   憂鬱な警備員の生活再建ノート ― デザインシステム
   ------------------------------------------------------------
   考え方:
   ・淡い青灰の地に「白い紙」を重ねる二層構造で作り込み感を出す
   ・色は装飾ではなく機能。4つのテーマに固有色を割り当て、
     いま自分がどの話を読んでいるか色で分かるようにする
   ・朱色(はんこ)は「一次情報で確認済」の意味だけに限定して使う
   ============================================================ */

:root {
  /* 地と紙 */
  --bg: #E4EAF0;
  --bg-deep: #D6DFE8;
  --surface: #FFFFFF;

  /* 文字 */
  --ink: #18202A;
  --ink-soft: #48545F;

  /* ブランド */
  --brand: #123A5C;
  --brand-deep: #0C283F;
  --brand-light: #E8F0F7;

  /* 確認印(意味を限定) */
  --hanko: #B23A2E;
  --hanko-light: #FBEDEB;

  /* 罫線 */
  --line: #D2DCE5;
  --line-soft: #E7EDF2;

  /* テーマ色(既定はブランド) */
  --accent: #123A5C;
  --accent-deep: #0C283F;
  --accent-light: #E8F0F7;

  --font-display: "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN",
                  "Yu Mincho", "YuMincho", "MS PMincho", serif;
  --font-body: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;

  --max-width: 820px;
  --shadow: 0 1px 2px rgba(18,58,92,.06), 0 8px 24px rgba(18,58,92,.07);
  --shadow-soft: 0 1px 3px rgba(18,58,92,.07);
}

/* ---- テーマ別アクセント色 ---- */
body.theme-jutaku { --accent: #1A6B58; --accent-deep: #0F4A3C; --accent-light: #E6F2EE; }
body.theme-hosho  { --accent: #1D5A8A; --accent-deep: #123E61; --accent-light: #E7F1F9; }
body.theme-shinyo { --accent: #8A5512; --accent-deep: #5F3A0B; --accent-light: #FBF1E2; }
body.theme-card   { --accent: #67367A; --accent-deep: #472352; --accent-light: #F4EBF7; }
body.theme-shigoto{ --accent: #0F5C63; --accent-deep: #093F44; --accent-light: #E4F1F2; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 112%; }
@media (min-width: 900px)  { html { font-size: 122%; } }
@media (min-width: 1300px) { html { font-size: 130%; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  font-weight: 500;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-deep); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--hanko);
  outline-offset: 3px;
}
img { max-width: 100%; }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 20px; }

/* ================= ヘッダー ================= */
.site-header {
  background: var(--brand);
  border-bottom: 5px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 2px 12px rgba(12,40,63,.18);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 14px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: .02em;
  line-height: 1.5;
}
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 400;
  color: #BFD4E4;
  letter-spacing: .02em;
}
.site-header .brand { flex: 0 1 auto; min-width: 0; }

/* ハンバーガーの開閉状態を持つチェックボックス本体は隠す */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* PC(701px以上): メニューは横並びで常時表示。ボタンは隠す */
.site-nav {
  display: flex;
  gap: 2px;
  font-size: .95rem;
  flex: none;
}
.site-nav a {
  color: #DCE8F1;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav-button, .nav-overlay { display: none; }

@media (min-width: 701px) and (max-width: 1000px) {
  .site-nav { font-size: .88rem; }
  .site-nav a { padding: 7px 7px; }
  .brand { font-size: 1rem; }
  .brand small { font-size: .72rem; }
}

/* スマホ(700px以下): ハンバーガーボタン+スライドメニュー */
@media (max-width: 700px) {
  /* 三本線ボタン */
  .nav-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
    flex: none;
    z-index: 50;
  }
  .nav-button span {
    display: block;
    height: 3px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  /* 開いているときは×印に変形 */
  .nav-toggle:checked ~ .nav-button span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-button span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-button span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* メニュー本体:右から滑り込む */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--brand-deep);
    flex-direction: column;
    gap: 0;
    padding: 78px 0 30px;
    transform: translateX(100%);
    transition: transform .28s ease;
    box-shadow: -8px 0 24px rgba(0,0,0,.3);
    z-index: 45;
    overflow-y: auto;
  }
  .nav-toggle:checked ~ .site-nav { transform: translateX(0); }
  .site-nav a {
    font-size: 1.1rem;
    padding: 16px 26px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .site-nav a:hover { background: rgba(255,255,255,.1); }

  /* 背景を暗くするオーバーレイ(タップで閉じる) */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background .28s ease;
    z-index: 40;
  }
  .nav-toggle:checked ~ .nav-overlay {
    background: rgba(0,0,0,.45);
    pointer-events: auto;
  }
}

/* ================= トップページ・ヒーロー ================= */
.notice { max-width: 940px; margin: 34px auto 0; padding: 0 20px; }
.notice-frame {
  position: relative;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #EAF2F8;
  padding: 40px 34px 36px;
  border-radius: 6px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.notice-frame::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7px;
  background: var(--hanko);
}
.notice-eyebrow {
  display: inline-block;
  font-size: .84rem;
  letter-spacing: .14em;
  color: var(--brand-deep);
  background: #F3D9A0;
  padding: 3px 12px;
  border-radius: 3px;
  font-weight: 700;
  margin: 0 0 18px;
}
.notice h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.05rem);
  line-height: 1.55;
  margin: 0 0 22px;
  color: #fff;
  font-weight: 700;
}
.notice p.lead { margin: 0 0 15px; font-size: 1.02rem; color: #D9E6F0; }
.notice p.lead strong { color: #FFE9A8; font-weight: 700; }

/* 確認印スタンプ */
.stamp {
  position: absolute;
  top: 26px; right: 26px;
  width: 92px; height: 92px;
  border: 3px solid #E8867A;
  border-radius: 50%;
  color: #F0A79C;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-9deg);
  font-family: var(--font-display);
  font-size: .78rem;
  line-height: 1.4;
  letter-spacing: .06em;
  font-weight: 600;
}
@media (max-width: 620px) {
  .stamp { width: 66px; height: 66px; font-size: .6rem; top: 16px; right: 14px; border-width: 2px; }
  .notice-frame { padding: 32px 22px 28px; }
}

/* インライン確認印バッジ */
.stamp-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--hanko-light);
  border: 1px solid var(--hanko);
  color: var(--hanko);
  border-radius: 999px;
  padding: 5px 15px 5px 9px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.stamp-inline::before {
  content: "印";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px;
  border: 1.5px solid var(--hanko);
  border-radius: 50%;
  font-size: .72rem;
  flex: none;
}

/* ================= 状況カード ================= */
.situations {
  max-width: 940px;
  margin: 26px auto 0;
  padding: 0 20px;
  display: grid;
  gap: 16px;
}
@media (min-width: 860px) {
  .situations { grid-template-columns: 1fr 1fr; }
  .situations > .situation-card.is-primary { grid-column: 1 / -1; }
}
.situation-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--card-accent, var(--brand));
  border-radius: 5px;
  padding: 24px 24px 20px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, box-shadow .12s ease;
}
.situation-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.situation-card.is-primary { border-top-width: 8px; }

.situation-card.c-jutaku { --card-accent: #1A6B58; }
.situation-card.c-hosho  { --card-accent: #1D5A8A; }
.situation-card.c-shinyo { --card-accent: #8A5512; }
.situation-card.c-card   { --card-accent: #67367A; }
.situation-card.c-shigoto{ --card-accent: #0F5C63; }

.situation-tag {
  display: inline-block;
  font-size: .84rem;
  letter-spacing: .04em;
  color: #fff;
  background: var(--card-accent, var(--brand));
  padding: 3px 12px;
  border-radius: 3px;
  font-weight: 700;
  margin-bottom: 13px;
}
.situation-card h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: var(--card-accent, var(--brand-deep));
  font-weight: 700;
  line-height: 1.5;
}
.situation-card p { margin: 0 0 14px; font-size: 1rem; color: var(--ink-soft); }
.situation-more {
  font-size: 1rem;
  color: var(--card-accent, var(--brand));
  font-weight: 700;
  display: inline-block;
}
/* 「→」だけが次の行に落ちないよう、直前の語とつなげる */
.situation-more { white-space: normal; }
.situation-more .arrow { white-space: nowrap; }

/* ================= 記事ヘッダー ================= */
.article-header {
  max-width: var(--max-width);
  margin: 30px auto 0;
  padding: 32px 30px 28px;
  background: var(--accent-light);
  border-left: 7px solid var(--accent);
  border-radius: 5px;
  box-shadow: var(--shadow-soft);
}
.article-header .stamp-inline { margin-bottom: 18px; }
.article-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.38rem, 4.4vw, 1.78rem);
  line-height: 1.55;
  color: var(--accent-deep);
  margin: 0 0 14px;
  font-weight: 700;
}
.article-header .dek { font-size: 1.05rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 640px) {
  .article-header { padding: 24px 20px; margin-left: 12px; margin-right: 12px; }
}

/* ================= 記事本文 ================= */
article.body {
  max-width: var(--max-width);
  margin: 18px auto 0;
  padding: 34px 34px 50px;
  background: var(--surface);
  border-radius: 5px;
  box-shadow: var(--shadow);
}
@media (max-width: 640px) {
  article.body { padding: 24px 20px 40px; margin-left: 12px; margin-right: 12px; }
}

article.body h2 {
  font-family: var(--font-display);
  font-size: 1.34rem;
  color: var(--accent-deep);
  margin: 48px 0 18px;
  padding: 0 0 12px 16px;
  border-left: 6px solid var(--accent);
  border-bottom: 2px solid var(--line-soft);
  font-weight: 700;
  line-height: 1.5;
}
article.body h2:first-child { margin-top: 0; }
article.body h3 {
  font-size: 1.1rem;
  color: var(--accent);
  margin: 34px 0 12px;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--line);
}
article.body h4 { font-size: 1.04rem; color: var(--accent); margin: 24px 0 10px; }
article.body p { margin: 0 0 17px; }
article.body ul, article.body ol { margin: 0 0 20px; padding-left: 1.4em; }
article.body li { margin-bottom: 8px; }
article.body li::marker { color: var(--accent); }
article.body strong { color: var(--accent-deep); font-weight: 700; }

/* 出典ブロック */
blockquote.cite {
  margin: 22px 0;
  padding: 15px 20px;
  background: var(--bg);
  border-left: 5px solid var(--brand);
  border-radius: 0 4px 4px 0;
  font-size: .98rem;
  color: var(--ink-soft);
}
blockquote.cite a { word-break: break-all; color: var(--brand); }

/* 断定しない・注意の枠 */
.fact-note {
  margin: 26px 0;
  padding: 20px 22px;
  background: var(--hanko-light);
  border: 1.5px solid #E5B4AD;
  border-left: 6px solid var(--hanko);
  border-radius: 4px;
  font-size: 1.02rem;
}
.fact-note .stamp-inline { margin-bottom: 10px; background: #fff; }
.fact-note strong { color: #8E2B21; }

/* 表 */
table.data {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: .98rem;
  background: #fff;
}
table.data caption {
  text-align: left;
  font-size: .92rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 500;
}
table.data th, table.data td {
  border: 1px solid var(--line);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
}
table.data thead th {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  border-color: var(--accent-deep);
}
table.data tbody th { background: var(--accent-light); color: var(--accent-deep); }
table.data tbody tr:nth-child(even) td { background: #F7F9FB; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 手順リスト */
.step-list { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: step; }
.step-list li {
  counter-increment: step;
  position: relative;
  padding: 2px 0 20px 46px;
  border-left: 2px solid var(--accent-light);
  margin-left: 14px;
}
.step-list li::before {
  content: counter(step);
  position: absolute;
  left: -15px; top: 0;
  width: 29px; height: 29px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  box-shadow: 0 0 0 4px var(--surface);
}
.step-list li:last-child { border-left-color: transparent; padding-bottom: 0; }

/* 広告枠 */
.ad-slot {
  margin: 30px 0;
  padding: 18px 20px;
  border: 1px dashed #B9A26A;
  background: #FBF7EC;
  border-radius: 4px;
  font-size: .92rem;
  color: #6B5A32;
}
.ad-slot::before {
  content: "PR設置枠";
  display: inline-block;
  background: #B9A26A;
  color: #fff;
  font-weight: 700;
  padding: 1px 9px;
  border-radius: 3px;
  margin-right: 9px;
  font-size: .82rem;
}

.ad-box {
  margin: 30px 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  text-align: center;
}
.ad-box .ad-label {
  display: block;
  text-align: left;
  font-size: .78rem;
  color: var(--ink-soft);
  letter-spacing: .06em;
  margin-bottom: 10px;
  font-weight: 700;
}
.ad-box img { max-width: 100%; height: auto; }

/* 出典一覧 */
.source-list {
  margin: 34px 0 0;
  padding: 22px 24px;
  background: var(--bg);
  border-radius: 5px;
  border-top: 4px solid var(--brand);
  font-size: .95rem;
}
.source-list h2 {
  border: none;
  margin: 0 0 12px;
  font-size: 1.1rem;
  padding: 0;
  color: var(--brand-deep);
}
.source-list ul { padding-left: 1.2em; margin: 0; }
.source-list li { margin-bottom: 8px; word-break: break-all; }

.confirmed-date {
  margin-top: 30px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 4px;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* 次に読む */
.next-links { margin: 44px 0 0; padding-top: 28px; border-top: 3px solid var(--line-soft); }
.next-links h2 {
  border: none; padding: 0; margin: 0 0 18px;
  font-size: 1.15rem; color: var(--brand-deep);
  font-family: var(--font-display);
}
.next-links .situations { max-width: none; margin: 0; padding: 0; }
@media (min-width: 860px) { .next-links .situations { grid-template-columns: 1fr 1fr; } }

/* ================= フッター ================= */
.site-footer {
  background: var(--brand-deep);
  color: #B9CBDA;
  margin-top: 60px;
  padding: 34px 0 44px;
  font-size: .92rem;
  border-top: 5px solid var(--accent);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: center;
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: #E2EDF5; font-weight: 500; }
.footer-links a:hover { color: #fff; }

/* ================= 汎用ページ ================= */
.page-body {
  max-width: var(--max-width);
  margin: 30px auto 0;
  padding: 36px 34px 50px;
  background: var(--surface);
  border-radius: 5px;
  box-shadow: var(--shadow);
}
@media (max-width: 640px) {
  .page-body { padding: 26px 20px 40px; margin-left: 12px; margin-right: 12px; }
}
.page-body h1 {
  font-family: var(--font-display);
  font-size: 1.72rem;
  color: var(--brand-deep);
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 4px solid var(--brand);
  font-weight: 700;
}
.page-body h2 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--brand-deep);
  margin: 36px 0 14px;
  padding: 0 0 10px 14px;
  border-left: 5px solid var(--brand);
  border-bottom: 2px solid var(--line-soft);
  font-weight: 700;
}
.page-body h3 { font-size: 1.06rem; color: var(--brand); margin: 24px 0 10px; }
.page-body p { margin: 0 0 15px; }
.page-body ul { padding-left: 1.3em; }
.page-body li { margin-bottom: 7px; }
.page-body li::marker { color: var(--brand); }
.page-body strong { color: var(--brand-deep); }

/* フォーム */
form.contact-form { display: grid; gap: 18px; margin-top: 22px; }
form.contact-form label {
  font-size: 1rem;
  color: var(--brand-deep);
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}
form.contact-form input,
form.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
}
form.contact-form input:focus,
form.contact-form textarea:focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand-light);
}
form.contact-form textarea { min-height: 160px; resize: vertical; }
form.contact-form button {
  justify-self: start;
  padding: 15px 40px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .06em;
  box-shadow: var(--shadow-soft);
}
form.contact-form button:hover { background: var(--brand-deep); }

/* ================= アイコン ================= */
.card-icon, .header-icon {
  display: block;
  margin-bottom: 12px;
}
.situation-card .card-icon { color: var(--card-accent, var(--brand)); }
.article-header .header-icon { color: var(--accent); }
.card-icon svg, .header-icon svg { display: block; }

/* ================= 写真 ================= */
/* トップページのヒーロー画像 */
.hero-photo {
  max-width: 940px;
  margin: 34px auto 0;
  padding: 0 20px;
}
.hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px 6px 0 0;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* ヒーロー画像の直下に通知パネルを密着させる */
.hero-photo + .notice { margin-top: 0; }
.hero-photo + .notice .notice-frame { border-radius: 0 0 6px 6px; }

/* 記事ヘッダーの写真 */
.article-header {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 780px) {
  .article-header { grid-template-columns: 1fr 240px; }
  .article-header .header-photo { order: 2; }
  .article-header .header-text { order: 1; }
}
.header-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 779px) {
  .header-photo { max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .situation-card { transition: none; }
}

/* 補足の小さめ注記(それでも読める大きさを保つ) */
.small-note {
  font-size: .95rem;
  color: var(--ink-soft);
  background: var(--bg);
  padding: 12px 16px;
  border-radius: 4px;
  margin: 16px 0;
}

/* 補足情報の枠(朱色ではなくブランド色を使う版) */
.fact-note.note-info {
  background: var(--brand-light);
  border-color: #A9C6DC;
  border-left-color: var(--brand);
}
.fact-note.note-info strong { color: var(--brand-deep); }


/* ============================================================
   日本語の改行・行送りの調整
   見出しは語の途中で折り返さず、行の長さを揃える。
   URLだけは例外的にどこでも折り返してよい。
   ============================================================ */
body { word-break: normal; overflow-wrap: break-word; line-break: strict; }

h1, h2, h3, h4,
.brand, .situation-card h2, .notice h1, .article-header h1, .page-body h1, .page-body h2 {
  text-wrap: balance;      /* 行の長さを揃えて、1行だけ極端に短くなるのを防ぐ */
  word-break: auto-phrase; /* 文節を意識して折り返す(対応ブラウザのみ) */
}

/* 本文・箇条書き・カードの説明文まで、文節を意識した折り返しにする。
   日本語で行末に1文字だけ残る「泣き別れ」を減らすための指定。 */
article.body p, article.body li, article.body dd,
.page-body p, .page-body li,
.situation-card p, .situation-card .situation-more,
.notice p.lead, .article-header .dek,
.inline-guide p, .fact-note p, .toc a, .breadcrumb span {
  text-wrap: pretty;
  word-break: auto-phrase;
}
/* URLや英数字の長い文字列だけは、どこでも折り返してよい */
.source-list li, blockquote.cite, .source-list a, blockquote.cite a {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* URLなど長い英数字だけ、どこでも折り返す */
blockquote.cite a, .source-list a, .source-list li { overflow-wrap: anywhere; }

/* 行頭に句読点や閉じ括弧が来ないようにする */
p, li, td, th, dd { hanging-punctuation: allow-end; }


/* ================= パンくずリスト ================= */
.breadcrumb {
  max-width: var(--max-width);
  margin: 22px auto 0;
  padding: 0 20px;
  font-size: .92rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb a { color: var(--brand); }
.breadcrumb span[aria-hidden] { opacity: .5; }
@media (max-width: 640px) { .breadcrumb { padding: 0 32px; } }

/* ================= 目次 ================= */
.toc {
  background: var(--accent-light);
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 5px;
  padding: 22px 26px 20px;
  margin: 0 0 36px;
}
.toc .toc-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--accent-deep);
  margin: 0 0 12px;
  padding: 0;
  border: none;
  font-weight: 700;
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;      /* 見出し文に番号が入っているため、二重の番号を出さない */
  font-size: .96rem;
  line-height: 1.5;
}
.toc li {
  margin-bottom: 1px;
  /* 1文字だけ次の行に残る「泣き別れ」を防ぐ */
  text-wrap: pretty;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.toc a {
  color: var(--ink);
  text-decoration: none;
  display: block;
  padding: 5px 10px 5px 28px;
  border-radius: 4px;
  position: relative;
}
/* 行頭に控えめな印を置いて、項目の始まりを分かりやすくする */
.toc a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: .95em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}
.toc a:hover {
  color: var(--accent-deep);
  background: rgba(255,255,255,.6);
}
.toc a:hover::before { opacity: 1; }

/* 目次から飛んだとき、見出しがヘッダーに隠れないようにする */
article.body h2[id] { scroll-margin-top: 90px; }

@media (max-width: 640px) {
  .toc { padding: 18px 18px 16px; }
}

/* ================= 記事中の誘導リンク ================= */
.inline-guide {
  margin: 26px 0;
  padding: 16px 20px;
  background: var(--bg);
  border-left: 5px solid var(--brand);
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
}
.inline-guide strong { color: var(--brand-deep); }

/* 目次:開閉式 */
.toc > .toc-title {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toc > .toc-title::-webkit-details-marker { display: none; }
.toc > .toc-title::before {
  content: "";
  width: 0; height: 0;
  border-left: 8px solid var(--accent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transition: transform .15s ease;
  flex: none;
}
.toc[open] > .toc-title::before { transform: rotate(90deg); }
.toc[open] > .toc-title { margin-bottom: 14px; }
.toc:not([open]) > .toc-title { margin-bottom: 0; }

/* 目次が押せることを明示するヒント表示 */
.toc > .toc-title::after {
  margin-left: auto;
  font-size: .82rem;
  font-weight: 500;
  color: var(--accent);
  opacity: .85;
  font-family: var(--font-body);
}
.toc:not([open]) > .toc-title::after { content: "タップして開く"; }
.toc[open] > .toc-title::after { content: "タップして閉じる"; }

/* 会社名など、短い項目を並べる箇条書きは2〜3列にして縦長を防ぐ */
article.body ul.cols {
  columns: 1;
  column-gap: 30px;
}
@media (min-width: 480px) { article.body ul.cols { columns: 2; } }
article.body ul.cols li {
  break-inside: avoid;
  white-space: nowrap;   /* 会社名は固有名詞なので途中で折らない */
}
@media (min-width: 900px) { article.body ul.cols { columns: 3; } }

/* ================= 極端に狭い画面(360px前後のAndroid)への対応 ================= */
@media (max-width: 400px) {
  article.body h2 { font-size: 1.18rem; padding-left: 12px; }
  article.body h3 { font-size: 1rem; }
  .page-body h1 { font-size: 1.45rem; }
  .article-header h1 { font-size: 1.28rem; }
  article.body { padding-left: 16px; padding-right: 16px; }
  .page-body { padding-left: 16px; padding-right: 16px; }
  .step-list li { padding-left: 38px; }
  .toc a { padding-left: 26px; font-size: .93rem; }
}