/* ご利用ガイド（views/pages/help.ejs と _help-*.ejs）。文書の組みは doc.css、ここはガイド固有の部分だけ */

/* マニュアルの一覧（カードにせず、区切り線で並べる） */
.hm { padding-bottom: clamp(36px, 3.6vw, 48px); }
.hm__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: var(--s-5); }
.hm__hd h2 { font-size: var(--fs-xl); letter-spacing: .1em; }
.hm__hd p { font-size: var(--fs-sm); color: var(--ink-2); letter-spacing: .06em; }
.hm__list { border-top: 1px solid var(--rule); }
.hm__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.hm__tx h3 { font-size: var(--fs-lg); letter-spacing: .08em; }
.hm__tx p { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.95; color: var(--ink-2); max-width: 44em; }
.hm__tag { display: inline-block; margin-bottom: 6px; font-size: var(--fs-xs); letter-spacing: .2em; color: var(--moss); }
.hm__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.hm__links .lnk { padding: 8px 0; }
@media (min-width: 900px) {
  .hm__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hm__links { justify-content: flex-end; }
}

/* 節の説明と知らせ */
.hp-sec .doc-h { font-size: var(--fs-2xl); letter-spacing: .12em; }
.hp-lead { font-size: var(--fs-md); line-height: 2; color: var(--ink-2); }
.hp-sec > .hp-lead + * { margin-top: var(--s-5); }
.hp-sec > .acc:first-of-type, .hp-sec > .hn + .acc { margin-top: var(--s-5); }
.hn { padding: 14px 18px; border-left: 2px solid var(--ink-3); background: var(--paper-2); font-size: var(--fs-sm); line-height: 1.95; color: var(--ink); }
.hn + .hn { margin-top: var(--s-3); }
.hn--warn { border-left-color: var(--warn); background: var(--warn-bg); }
.hn--info { border-left-color: var(--moss); background: var(--dew-2); }
.hn strong, .hc strong, .hs strong { font-weight: 500; color: var(--ink); }
.hn a, .hc a { text-decoration: underline; text-decoration-color: var(--rule-strong); }

/* 開け閉めの見出し（番号つき） */
.hq summary { padding: 14px 0; font-size: var(--fs-md); letter-spacing: .06em; gap: var(--s-4); }
.hq summary:hover .hq__t > span:last-child { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 6px; }
.hq__t { display: flex; align-items: baseline; gap: var(--s-4); min-width: 0; }
.hq__n { flex: none; width: 1.6em; font-family: var(--f-min); font-size: var(--fs-sm); color: var(--moss); }
.hq .acc__in { padding: 0 0 var(--s-5); color: var(--ink); font-size: 14.5px; }
@media (min-width: 700px) { .hq .acc__in { padding-left: calc(1.6em + var(--s-4)); } }

/* 中身 */
.hc > * + *, .hs__b > * + * { margin-top: var(--s-3); }
.hc h4, .hs__b h4 { font-family: var(--f-min); font-size: var(--fs-md); letter-spacing: .08em; color: var(--ink); }
.hc > h4:not(:first-child) { margin-top: var(--s-5); }
.hc p, .hs__b p { color: var(--ink-2); }
.hl > li { position: relative; padding-left: 1.3em; color: var(--ink-2); }
.hl > li + li { margin-top: 4px; }
.hl > li::before { content: ""; position: absolute; left: .15em; top: 1em; width: .45em; height: 1px; background: currentColor; }
.hl--ol { counter-reset: hl; }
.hl--ol > li { padding-left: 1.8em; counter-increment: hl; }
.hl--ol > li::before { content: counter(hl) "."; width: auto; height: auto; top: 0; background: none; font-family: var(--f-min); color: var(--moss); }

/* 手順（縦の線でつなぐ） */
.hs { position: relative; }
.hs__i { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-5); }
.hs__i:not(:last-child)::before { content: ""; position: absolute; left: 15.5px; top: 36px; bottom: 6px; width: 1px; background: var(--rule); }
.hs__n { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: 50%; font-family: var(--f-min); font-size: var(--fs-sm); line-height: 1; color: var(--ink); background: var(--paper); }
.hs__b { padding-top: 3px; min-width: 0; }

/* 二つから選ぶ説明・例・表 */
.hch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 var(--s-5); border-top: 1px solid var(--rule); }
.hch__i { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.hch__i p { margin-top: 2px; font-size: var(--fs-sm); }
.hx { padding: 10px 16px; border-left: 1px dashed var(--rule-strong); font-size: var(--fs-sm); color: var(--ink-2); }
.hx .hl { margin-top: 4px; }
.ht { width: 100%; margin-top: var(--s-2); font-size: var(--fs-sm); line-height: 1.8; border-top: 1px solid var(--rule); }
.ht th, .ht td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ht th { width: 34%; font-weight: 500; color: var(--ink); white-space: nowrap; }
.ht td { color: var(--ink-2); }
@media (max-width: 520px) { .ht th { white-space: normal; width: 38%; } }

/* 文の切れ目で折り返す（p 以外の箱も） */
.hn, .hx, .hch__i, .hl > li, .ht td, .hm__tx p { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }