/* 記事のページ（articles/render.py が描き出す 8本）だけに効かせる追加。style.css の後に読む。
   型は A「写真誌」：白地・大きな文字・余白・線で区切る（影・角丸・色の箱は使わない）。記事には写真を置かない（全写真が3ページの上限）。
   読む幅＝日本語で1行およそ37字（本文 18px × 38em）。
   最後の「.next-read--white」だけは記事以外（採用の職種ページの「この仕事の記事」の枠）にも効く。 */

/* ---------- 最初の画面（題・名札・答えの文・目次） ---------- */
.pg-article .art-hero .kicker { align-items: flex-start; word-break: auto-phrase; }
.pg-article .art-hero .kicker::before { margin-top: .7em; }
.pg-article .art-title { max-width: 22em; word-break: auto-phrase; }
/* 題・副題・見出しは行の長さをそろえる（「…8つの／こと」のような短い行を残さない） */
.pg-article :is(.art-title, .art-sub, .art-h2, .art-h3) { text-wrap: balance; }
.pg-article .art-sub {
  display: block; margin-top: 14px;
  font-family: var(--f-head); font-weight: 700; font-size: clamp(17px, 4.6vw, 22px); line-height: 1.6; letter-spacing: 0; color: var(--sub);
}
.pg-article .art-meta { margin: 0 0 20px; }
.pg-article .art-lead { max-width: 38em; }
/* 目次：見出しが問いの文で長いので、スマホは1列・PC は2列 */
.pg-article .art-toc ol { grid-template-columns: minmax(0, 1fr); }
.pg-article .art-toc li { word-break: auto-phrase; }
@media (min-width: 960px) {
  .pg-article .art-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 本文 ---------- */
.pg-article .art-section { padding-top: 56px; }
@media (min-width: 960px) { .pg-article .art-section { padding-top: 96px; } }
.pg-article .art-body { max-width: 38em; counter-reset: arth2; }
@media (min-width: 960px) {
  /* 目次の左の欄（11em＋40px）にそろえて、本文を一段右から始める */
  .pg-article .art-body { margin-left: calc(11em + 40px); }
}
.pg-article .art-body p:not(.note) { max-width: none; margin: 0 0 1.5em; word-break: auto-phrase; }
.pg-article .art-body strong { font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.pg-article .art-body a:not(.btn):not(.text-link) { color: var(--ink); text-underline-offset: 5px; text-decoration-color: var(--ink); }
.pg-article .art-body a:not(.btn):not(.text-link):hover { text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
/* 文の中のリンク・表の中のリンク：押せる高さを44px以上に（上下の余白は行の並びを動かさない＝inline の padding） */
.pg-article .art-body :is(p, td, th, li) > a:not(.btn):not(.text-link) { padding: 14px 0; }

/* 見出し：太い線で区切り、番号（目次と同じ 01・02…）を上に */
.pg-article .art-h2 {
  margin: 72px 0 28px; padding-top: 20px; border-top: 1px solid var(--ink);
  font-size: clamp(22px, 6vw, 30px); line-height: 1.5; letter-spacing: -.02em; word-break: auto-phrase;
}
.pg-article .art-body > .art-h2:first-child { margin-top: 0; }
.pg-article .art-h2::before {
  counter-increment: arth2; content: counter(arth2, decimal-leading-zero);
  display: block; margin-bottom: 10px; font-family: var(--f-head); font-weight: 900; font-size: 16px; letter-spacing: .02em; color: var(--sub);
}
.pg-article .art-h3 {
  display: flex; align-items: flex-start; gap: 12px; margin: 44px 0 16px;
  font-size: clamp(19px, 5vw, 22px); line-height: 1.55; letter-spacing: -.01em; word-break: auto-phrase;
}
.pg-article .art-h3::before { content: ""; width: 20px; height: 3px; margin-top: .75em; background: var(--accent); flex: none; }
@media (min-width: 960px) {
  .pg-article .art-h2 { margin-top: 104px; font-size: 30px; }
}

/* 表：線だけ。はみ出す時は表だけ横に動く（.table-scroll） */
.pg-article .art-body .table-scroll { margin: 8px 0 36px; }
.pg-article .art-body .data-table { font-size: 16px; }
/* 見出しのマスの幅 38% は2列の表だけ（3列以上の表で1列目が場所を取り、ほかの列がはみ出すのを防ぐ） */
.pg-article .art-body .data-table tbody th:first-child:nth-last-child(2) { width: 38%; }
/* 3列の表で1列目が1字幅に縮んで縦書きのようになる（keep-all＋anywhere の最小幅）＝1列目に最低の幅を持たせる */
.pg-article .art-body .data-table tr > th:first-child { min-width: 8em; }
/* 列の見出し（「決める人」など）が1字だけ次の行へ落ちないよう、最低の幅を持たせる */
.pg-article .art-body .data-table thead th { min-width: 5em; }
.pg-article .art-body .data-table :is(td, th) { word-break: auto-phrase; text-wrap: pretty; }
/* 見出しのマスは短いので、行の長さをそろえる（「材料をそろえる／人」の1字だけの行を出さない） */
.pg-article .art-body .data-table th { text-wrap: balance; }

/* 箇条書き・番号つきの手順 */
.pg-article .art-body .points { margin: 4px 0 36px; max-width: none; }
.pg-article .art-ol { list-style: none; counter-reset: artol; margin: 4px 0 36px; border-top: 1px solid var(--line); }
.pg-article .art-ol li {
  counter-increment: artol; position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--line);
  font-size: 17px; line-height: 1.7; word-break: auto-phrase;
}
.pg-article .art-ol li::before {
  content: counter(artol); position: absolute; left: 0; top: 14px; width: 28px;
  font-family: var(--f-head); font-weight: 900; font-size: 18px; line-height: 1.6;
}

/* 職員の声（ほかのページの .voice と同じ枠） */
.pg-article .art-body .voice { margin: 8px 0 40px; max-width: none; }

/* 本文の途中のリンク・ボタン */
.pg-article .art-link { margin: 8px 0 32px !important; }
.pg-article .art-body .btn-row { margin: 8px 0 24px; max-width: 420px; }
.pg-article .art-small { font-size: 16px; color: var(--sub); }

/* ---------- 締め（申し込み） ---------- */
.pg-article .art-close .btn-row + .btn-row { margin-top: 0; }
.pg-article .art-close .art-btn-note { margin-top: -8px; }
.pg-article .art-close .link-list { margin-top: 20px; display: grid; gap: 0; }
.pg-article .art-close .link-list li { border-bottom: 1px solid var(--line); word-break: auto-phrase; }
.pg-article .art-close .link-list a { min-height: 52px; padding: 8px 0; }
/* 一言のすぐ後に小さい字が続く時（ボタンより先に説明が来る記事）は、間をあける */
.pg-article .art-close .cta-lead + .cta-sub { margin-top: 20px; }
/* パンくずの最後（記事の題）と締めの小さい字も、句の途中で折らない */
.pg-article .crumbs li, .pg-article .art-close .cta-sub, .pg-article .art-small { word-break: auto-phrase; }

/* ---------- 記事以外にも効く：採用の職種ページの「この仕事の記事」の枠（前の段が灰の時は白に） ---------- */
.next-read--white { background: var(--white); }
.next-read--white ul { border-top-color: var(--ink); }