/* ==========================================================================
   components.css
   ボタン・表・図版・フォーム・カード。ページをまたいで使い回す部品。
   ========================================================================== */

/* ---------- ボタン（出典 preview/company.html） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);
  min-height:44px;padding:0 var(--space-md);font-family:var(--font-body);font-size:var(--text-sm);
  font-weight:700;line-height:1;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-sm);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.btn__arrow{width:16px;height:16px;flex:none}
.btn--primary{background:var(--c-brass);color:var(--c-accent-ink)}
.btn--primary:hover{background:#7a5f1a;color:var(--c-accent-ink)}
.btn--primary:active{background:#6b5316}
.btn--secondary{background:var(--c-navy);color:var(--c-accent-ink)}
.btn--secondary:hover{background:var(--c-navy-700);color:var(--c-accent-ink)}
.btn--secondary:active{background:var(--c-navy-900)}
.btn--tertiary{background:transparent;color:var(--c-navy);border-color:var(--c-navy)}
.btn--tertiary:hover{background:var(--c-navy-100);color:var(--c-navy-700)}
.btn--ondark{background:var(--c-brass-bright);color:var(--c-navy-900)}
.btn--ondark:hover{background:#d9bb75;color:var(--c-navy-900)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn--lg{min-height:52px;padding:0 var(--space-lg);font-size:var(--text-base)}
.tlink{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:700;
  color:var(--c-navy-700);text-decoration:none;line-height:1}
.tlink:hover{text-decoration:underline}
.tlink svg{width:14px;height:14px;flex:none}

/* ---------- ボタン（トップで足したぶん）（出典 preview/top.html） ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--space-2xs);
  min-height:44px; padding:0 var(--space-md);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:700;
  line-height:1; white-space:nowrap; /* 2行に折り返させない */
  border:1px solid transparent; border-radius:var(--radius-sm);
  text-decoration:none; cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.btn__arrow{width:16px;height:16px;flex:none}
.btn--primary{background:var(--c-brass);color:var(--c-accent-ink)}
.btn--primary:hover{background:#7a5f1a;color:var(--c-accent-ink)}
.btn--primary:active{background:#6b5316}
.btn--secondary{background:var(--c-navy);color:var(--c-accent-ink)}
.btn--secondary:hover{background:var(--c-navy-700);color:var(--c-accent-ink)}
.btn--secondary:active{background:var(--c-navy-900)}
.btn--tertiary{background:transparent;color:var(--c-navy);border-color:var(--c-navy)}
.btn--tertiary:hover{background:var(--c-navy-100);color:var(--c-navy-700)}
.btn--tertiary:active{background:var(--c-paper-3)}
.btn--ondark{background:var(--c-brass-bright);color:var(--c-navy-900)}
.btn--ondark:hover{background:#d9bb75;color:var(--c-navy-900)}
.btn--ondark:active{background:#bd9c52}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn--lg{min-height:52px;padding:0 var(--space-lg);font-size:var(--text-base)}

/* テキストリンク（矢印付き） */
.tlink{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-sm);font-weight:700;color:var(--c-navy-700);
  text-decoration:none;line-height:1;
}
.tlink:hover{text-decoration:underline;text-decoration-thickness:1px}
.tlink svg{width:14px;height:14px;flex:none}

/* ---------- ボタン（サービス個別で足したぶん）（出典 preview/service-consulting.html） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);
  min-height:44px;padding:0 var(--space-md);font-family:var(--font-body);font-size:var(--text-sm);
  font-weight:700;line-height:1;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-sm);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.btn__arrow{width:16px;height:16px;flex:none}
.btn--primary{background:var(--c-brass);color:var(--c-accent-ink)}
.btn--primary:hover{background:#7a5f1a;color:var(--c-accent-ink)}
.btn--primary:active{background:#6b5316}
.btn--secondary{background:var(--c-navy);color:var(--c-accent-ink)}
.btn--secondary:hover{background:var(--c-navy-700);color:var(--c-accent-ink)}
.btn--secondary:active{background:var(--c-navy-900)}
.btn--tertiary{background:transparent;color:var(--c-navy);border-color:var(--c-navy)}
.btn--tertiary:hover{background:var(--c-navy-100);color:var(--c-navy-700)}
.btn--ondark{background:var(--c-brass-bright);color:var(--c-navy-900)}
.btn--ondark:hover{background:#d9bb75;color:var(--c-navy-900)}
.btn--outline-dark{background:transparent;color:var(--c-paper);border-color:rgba(247,249,251,.45)}
.btn--outline-dark:hover{background:rgba(247,249,251,.08);color:var(--c-paper)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn--lg{min-height:52px;padding:0 var(--space-lg);font-size:var(--text-base)}
.btn--block{width:100%}
.tlink{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:700;
  color:var(--c-navy-700);text-decoration:none;line-height:1}
.tlink:hover{text-decoration:underline}
.tlink svg{width:14px;height:14px;flex:none}

/* ---------- 本文組版・図版・表・チェック囲み（出典 preview/column-single.html） ---------- */
.prose{max-width:var(--w-prose);font-size:1.0625rem}
.prose>*+*{margin-top:var(--space-md)}
.prose h2{font-size:var(--text-2xl);margin-top:var(--space-2xl);padding-bottom:var(--space-xs);
  border-bottom:2px solid var(--c-navy-100);scroll-margin-top:calc(var(--header-h) + 16px)}
.prose h2::before{content:"";display:inline-block;width:14px;height:2px;background:var(--c-brass);
  vertical-align:middle;margin-right:10px;margin-bottom:6px}
.prose h3{font-size:var(--text-xl);margin-top:var(--space-xl);color:var(--c-navy-900)}
.prose p{line-height:var(--lh-body)}
.prose strong{font-weight:700;background:linear-gradient(180deg,transparent 62%,rgba(201,169,97,.38) 62%,rgba(201,169,97,.38) 92%,transparent 92%)}
.prose a{font-weight:500}

/* 図版 */
.figure{margin-top:var(--space-lg);border:var(--rule);border-radius:var(--radius-lg);
  padding:var(--space-lg);background:#fdfefe}
.figure figcaption{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.7}


/* 図版：狭い画面では縮小しすぎて中の文字が読めなくなるため、図だけ横スクロールさせる
   （ページ全体は横スクロールさせない。比較表と同じ扱い） */
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;--minw:600px}
.figscroll svg{min-width:var(--minw)}
.fighint{display:none;margin-top:var(--space-2xs);font-size:var(--text-xs);color:var(--c-ink-3)}
@media (max-width:700px){.fighint{display:block}}
/* 比較表 */
.tablewrap{margin-top:var(--space-lg);overflow-x:auto;border:var(--rule);border-radius:var(--radius-md)}
.ctable{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--text-sm)}
.ctable th,.ctable td{padding:var(--space-sm);text-align:left;vertical-align:top;border-bottom:var(--rule);line-height:1.75}
.ctable thead th{background:var(--c-navy);color:var(--c-accent-ink);font-weight:700;border-bottom:0;white-space:nowrap}
.ctable thead th:first-child{background:var(--c-navy-900)}
.ctable tbody th{background:var(--c-paper-2);font-weight:700;color:var(--c-ink);white-space:nowrap;width:9em}
.ctable td+td{border-left:var(--rule)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable .num{font-variant-numeric:tabular-nums}

/* チェックリスト */
.checkbox{margin-top:var(--space-lg);border:var(--rule);border-left:2px solid var(--c-navy);
  border-radius:var(--radius-md);padding:var(--space-lg);background:#fdfefe}
.checkbox__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-sm)}
.checkbox li{display:flex;gap:var(--space-xs);line-height:var(--lh-tight);color:var(--c-ink-2)}
.checkbox li+li{margin-top:var(--space-xs)}
.checkbox svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--c-navy)}

/* ポイント囲み */
.point{margin-top:var(--space-lg);background:var(--c-navy-100);border-radius:var(--radius-md);padding:var(--space-lg)}
.point__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-navy-700);margin-bottom:var(--space-2xs)}
.point p{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.85;color:var(--c-navy-900)}

/* ---------- 引用・事例囲み・定義表（出典 preview/company.html） ---------- */
.creed__block+.creed__block{margin-top:var(--space-4xl);padding-top:var(--space-2xl);border-top:var(--rule-strong)}
.creed__no{display:block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.14em;color:var(--c-brass);margin-bottom:var(--space-sm)}
.creed__title{font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem);color:var(--c-navy-900);max-width:20ch}
.prose{max-width:var(--w-prose);font-size:1.0625rem;margin-top:var(--space-lg)}
.prose>*+*{margin-top:var(--space-lg)}
.prose p{line-height:var(--lh-body);color:var(--c-ink-2)}
.prose strong{font-weight:700;color:var(--c-ink);
  background:linear-gradient(180deg,transparent 62%,rgba(201,169,97,.38) 62%,rgba(201,169,97,.38) 92%,transparent 92%)}

/* 智慧の三つの定義 */
.defs{margin-top:var(--space-xl);max-width:var(--w-prose);display:grid;gap:var(--space-lg)}
.def{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-lg);align-items:start}
/* 漢数字（一二三）は薄い色だと横線に見えて数字として読めないため、アラビア数字を使う */
.def__no{font-family:var(--font-display);font-size:clamp(2.25rem,1.5rem + 2.6vw,3.25rem);font-weight:500;
  line-height:.9;color:var(--c-navy-100);font-variant-numeric:tabular-nums;min-width:1.2em;text-align:center}
.def__title{font-size:var(--text-lg);color:var(--c-navy-900)}
.def__desc{margin-top:var(--space-2xs);font-size:var(--text-base);color:var(--c-ink-2);line-height:var(--lh-body)}

/* 社名の由来
   ここだけ例外的に画像（思金神の図）を使う。原寸320×213pxのため、
   180px前後に抑えないと拡大でぼやける。装飾ではなく由来の説明として置く。 */
.origin{margin-top:var(--space-xl);max-width:var(--w-prose);
  border:var(--rule);border-radius:var(--radius-lg);background:#fdfefe;padding:var(--space-xl)}
@media (max-width:640px){.origin{padding:var(--space-lg)}}
/* 図は見出しと本文のあいだに置く。原寸320pxなので200px以下に抑える（拡大するとぼやける） */
.origin__figure{margin:var(--space-lg) auto 0;width:200px;max-width:100%}
.origin__figure img{width:100%;height:auto;border:1px solid var(--c-paper-3);border-radius:var(--radius-sm)}
.origin__credit{margin-top:var(--space-2xs);font-size:var(--text-xs);color:var(--c-ink-3);
  line-height:1.6;text-align:center}
.origin__kanji{font-family:var(--font-display);font-size:clamp(2.25rem,1.6rem + 2.4vw,3rem);font-weight:500;
  line-height:1.1;color:var(--c-navy);letter-spacing:.08em;margin-top:var(--space-2xs)}
.origin__reading{font-family:var(--font-body);font-size:var(--text-xs);
  letter-spacing:.1em;color:var(--c-ink-3);margin-left:var(--space-sm);vertical-align:.35em}
.origin__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass)}
.origin__body{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.95}

/* モデルケース */
.case{margin-top:var(--space-xl);max-width:var(--w-prose);border:var(--rule);
  border-left:2px solid var(--c-brass);border-radius:var(--radius-md);background:var(--c-paper-2);padding:var(--space-xl)}
.case__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass);margin-bottom:var(--space-2xs)}
.case__title{font-size:var(--text-lg);color:var(--c-navy-900);margin-bottom:var(--space-sm)}

/* 事例の見出しは長いので、狭い画面では必ず折り返す。
   auto-phrase を指定すると「大袈/裟に」のような語中での分断を避け、文節で折る。
   未対応のブラウザでは無視されるだけで、従来どおり折り返す。 */
.case__title,.card__title{ word-break:auto-phrase }
.case__body{font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.95}
.case__body+.case__body{margin-top:var(--space-sm)}
.case__note{margin-top:var(--space-md);padding-top:var(--space-md);border-top:var(--rule);
  font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.8}

/* ---------- 代表挨拶ブロック（出典 preview/company.html） ---------- */
.greet{max-width:var(--w-prose)}
.greet__title{font-size:var(--text-2xl);color:var(--c-navy-900);margin-bottom:var(--space-lg)}
.greet p{color:var(--c-ink-2);line-height:var(--lh-body);font-size:1.0625rem}
.greet p+p{margin-top:var(--space-lg)}
.promise{margin-top:var(--space-xl);border:var(--rule);border-top:2px solid var(--c-navy);
  border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-lg)}
.promise__title{font-size:var(--text-lg);margin-bottom:var(--space-md)}
.promise li{display:flex;gap:var(--space-xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.85}
.promise li+li{margin-top:var(--space-sm)}
.promise svg{width:19px;height:19px;flex:none;margin-top:5px;color:var(--c-navy)}
.sign{margin-top:var(--space-xl);text-align:right;font-family:var(--font-display);
  font-size:var(--text-lg);color:var(--c-navy-900);line-height:1.6}
.sign span{display:block;font-family:var(--font-body);font-size:var(--text-xs);color:var(--c-ink-3);margin-bottom:var(--space-3xs)}

/* ---------- 会社概要表（出典 preview/company.html） ---------- */
.profile{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--space-2xl);align-items:start}
@media (max-width:900px){.profile{grid-template-columns:minmax(0,1fr)}}
.dl{width:100%;border-top:var(--rule-strong);border-collapse:collapse}
.dl th,.dl td{padding:var(--space-md) 0;font-size:var(--text-sm);text-align:left;vertical-align:top;
  border-bottom:var(--rule);line-height:1.85}
.dl th{width:9em;font-weight:700;color:var(--c-ink-3);white-space:nowrap}
.dl td{color:var(--c-ink-2)}
.record{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-lg)}
.record__title{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass);
  font-family:var(--font-body);padding-bottom:var(--space-2xs);border-bottom:var(--rule);margin-bottom:var(--space-md)}
.record__item+.record__item{margin-top:var(--space-md);padding-top:var(--space-md);border-top:var(--rule)}
.record__label{display:block;font-size:var(--text-xs);color:var(--c-ink-3);font-weight:700}
.record__value{margin-top:2px;font-family:var(--font-display);font-size:var(--text-lg);
  color:var(--c-navy-900);line-height:1.4;font-variant-numeric:tabular-nums}
.record__note{margin-top:var(--space-md);font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.8}

/* ---------- チェックリスト（出典 preview/service.html） ---------- */
.checks li{display:flex;gap:var(--space-xs);line-height:var(--lh-tight);color:var(--c-ink-2);font-size:var(--text-sm)}
.checks li+li{margin-top:var(--space-2xs)}
.checks svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--c-navy)}

/* ---------- FAQ（出典 preview/faq.html） ---------- */
.fgroup+.fgroup{margin-top:var(--space-3xl)}
.fgroup__title{font-size:var(--text-xl);color:var(--c-navy-900);padding-bottom:var(--space-xs);
  border-bottom:2px solid var(--c-navy-100);scroll-margin-top:calc(var(--header-h) + 16px)}
.qa{max-width:var(--w-prose)}
.qa__item{border-bottom:var(--rule);padding-block:var(--space-lg)}
.qa__q{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm);
  font-size:var(--text-lg);line-height:var(--lh-tight);align-items:start}
.qa__a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm);
  margin-top:var(--space-sm);color:var(--c-ink-2);font-size:var(--text-sm);line-height:1.95;align-items:start}
.qa__mark{font-family:var(--font-display);font-weight:700;line-height:1.5;min-width:1.1em}
.qa__q .qa__mark{color:var(--c-brass)}
.qa__a .qa__mark{color:var(--c-navy);font-size:var(--text-lg)}
.qa__a a{font-weight:500}
.still{margin-top:var(--space-3xl);max-width:var(--w-prose);border:var(--rule);
  border-top:2px solid var(--c-brass);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-xl)}
.still__title{font-size:var(--text-xl);margin-bottom:var(--space-sm)}
.still__body{font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.9}
.still__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}

/* ---------- フォーム（出典 preview/contact.html） ---------- */
.form{display:grid;gap:var(--space-lg);max-width:var(--w-prose)}
.field{display:grid;gap:var(--space-2xs)}
.field__label{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-sm);
  font-weight:700;color:var(--c-ink);line-height:1.5}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;line-height:1;
  padding:4px 6px;border-radius:var(--radius-sm);letter-spacing:.04em}
.badge--req{background:var(--c-navy);color:var(--c-accent-ink)}
.badge--opt{background:transparent;color:var(--c-ink-3);border:1px solid var(--c-paper-3)}
/* 入力欄：状態が変わっても border-width は 1px のまま。動くのは色と outline だけ */
.input,.textarea,.select{
  width:100%;min-height:var(--field-h);padding:0 var(--space-sm);
  font-family:var(--font-body);font-size:var(--text-base);color:var(--c-ink);line-height:1.6;
  background:#fdfefe;border:1px solid var(--c-paper-3);border-radius:var(--radius-sm);
  outline:2px solid transparent;outline-offset:1px;
  transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.input::placeholder,.textarea::placeholder{color:#93a6b5}
.input:hover,.textarea:hover,.select:hover{border-color:var(--c-navy-600)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline-color:var(--c-focus);border-color:var(--c-navy)}
.input:disabled,.textarea:disabled,.select:disabled{opacity:.55;cursor:not-allowed;background:var(--c-paper-2)}
.textarea{min-height:170px;padding:var(--space-sm);line-height:1.85;resize:vertical}
.select{appearance:none;padding-right:var(--space-2xl);
  background-image:linear-gradient(45deg,transparent 50%,var(--c-ink-3) 50%),linear-gradient(135deg,var(--c-ink-3) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
/* 補足・エラーの領域を先に確保しておく（表示されてもレイアウトが動かない） */
.field__help{min-height:1lh;font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.7}
.field__error{display:none;align-items:flex-start;gap:6px;font-size:var(--text-xs);color:var(--c-error);line-height:1.7}
.field--error .field__error{display:flex}
.field--error .input,.field--error .textarea,.field--error .select{border-color:var(--c-error);background:var(--c-error-bg)}
.field__error svg{width:14px;height:14px;flex:none;margin-top:3px}

/* 選択肢 */
.choices{display:grid;gap:var(--space-2xs)}
.choice{display:flex;align-items:flex-start;gap:var(--space-xs);min-height:44px;padding:var(--space-xs) var(--space-sm);
  border:1px solid var(--c-paper-3);border-radius:var(--radius-sm);background:#fdfefe;cursor:pointer;
  font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.6;
  transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.choice:hover{border-color:var(--c-navy-600)}
.choice input{accent-color:var(--c-navy);width:18px;height:18px;flex:none;margin-top:3px}
.choice:has(input:checked){border-color:var(--c-navy);background:var(--c-navy-100)}
.choices--inline{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

/* 同意 */
.consent{display:flex;align-items:flex-start;gap:var(--space-xs);padding:var(--space-md);
  border:1px solid var(--c-paper-3);border-radius:var(--radius-sm);background:var(--c-paper-2);
  font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.75}
.consent input{accent-color:var(--c-navy);width:20px;height:20px;flex:none;margin-top:2px}

.submit{margin-top:var(--space-2xs)}
.submit__note{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.8}

/* ---------- サイドの安心材料（出典 preview/contact.html） ---------- */
/* 補助パネルの並び。
   もとは右側の細い列に縦積みするサイドバーだった（sticky）。
   1カラムに変えたので、フォームの前後に横並びで置く帯として使う。 */
.side--form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--space-md);align-items:start}
.panel{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-lg)}
.panel--dark{background:var(--c-navy-900);border-color:var(--c-navy-900);color:var(--c-paper)}
/* 中身を横に並べたいパネル（FLOW・お約束）。1行を占有する */
.panel--wide{grid-column:1/-1}
.panel__title{font-size:var(--text-sm);font-weight:700;letter-spacing:.1em;color:var(--c-brass);
  font-family:var(--font-body);padding-bottom:var(--space-2xs);border-bottom:var(--rule);margin-bottom:var(--space-md)}
.panel--dark .panel__title{color:var(--c-brass-bright);border-bottom-color:rgba(247,249,251,.2)}
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm);align-items:start}
.step+.step{margin-top:var(--space-md);padding-top:var(--space-md);border-top:var(--rule)}
.step__no{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--c-navy-100);color:var(--c-navy-900);
  font-size:var(--text-sm);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.step__title{font-size:var(--text-base);color:var(--c-ink)}
.step__desc{margin-top:4px;font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.85}
.assure li{display:flex;gap:var(--space-xs);font-size:var(--text-base);color:var(--c-ink-2);line-height:1.8}
.assure li+li{margin-top:var(--space-sm)}
.assure svg{width:18px;height:18px;flex:none;margin-top:5px;color:var(--c-navy)}
.panel--dark .assure li{color:#dbe7f1}
.panel--dark .assure svg{color:var(--c-brass-bright)}
.panel__body{font-size:var(--text-base);color:var(--c-ink-2);line-height:1.85}

/* 幅を取れるときは、FLOWの4ステップとお約束の3項目を横に並べる。
   縦積みのままだと、1カラムにした意味がない（横が空くだけ） */
@media (min-width:760px){
  .panel--wide .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .panel--wide .step{padding-inline:var(--space-lg)}
  .panel--wide .step:first-child{padding-left:0}
  .panel--wide .step:last-child{padding-right:0}
  .panel--wide .step+.step{margin-top:0;padding-top:0;border-top:none;border-left:var(--rule)}
  .panel--wide .assure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}
  .panel--wide .assure li+li{margin-top:0}
  .panel--dark.panel--wide .step+.step{border-left-color:rgba(247,249,251,.2)}
}
.panel--dark .panel__body{color:#c2d3e2}
.panel--dark .panel__lead{font-family:var(--font-display);font-size:var(--text-lg);color:var(--c-paper);line-height:1.5;margin-bottom:var(--space-sm)}

/* ---------- 監修ボックス（出典 preview/column-single.html） ---------- */
.sv{margin-top:var(--space-2xl);max-width:var(--w-prose);border:var(--rule);border-radius:var(--radius-md);
  background:var(--c-paper-2);padding:var(--space-lg)}
.sv__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass);margin-bottom:var(--space-2xs)}
.sv__name{font-family:var(--font-display);font-size:var(--text-lg);color:var(--c-navy-900);line-height:1.45}
.sv__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.85}

/* ---------- 記事末尾CTA（出典 preview/column-single.html） ---------- */
.entrycta{margin-top:var(--space-2xl);max-width:var(--w-prose);background:var(--c-navy-900);
  border-radius:var(--radius-lg);padding:var(--space-xl);color:var(--c-paper)}
.entrycta__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass-bright)}
.entrycta__title{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.45;color:var(--c-paper)}
.entrycta__desc{margin-top:var(--space-sm);font-size:var(--text-sm);color:#c2d3e2;max-width:46ch}
.entrycta__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.entrycta__note{margin-top:var(--space-sm);font-size:var(--text-xs);color:#9fb8cd}

/* ---------- 関連記事カード（出典 preview/column-single.html） ---------- */
.related{margin-top:var(--space-2xl);max-width:var(--w-prose)}
.related__title{font-family:var(--font-display);font-size:var(--text-xl);padding-bottom:var(--space-xs);border-bottom:2px solid var(--c-navy-100)}
.related__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-md);margin-top:var(--space-md)}
.rcard{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-md);
  transition:border-color var(--dur-base) var(--ease-out)}
.rcard:hover{border-color:var(--c-navy-600)}
.rcard__cat{display:block;font-size:var(--text-xs);font-weight:700;color:var(--c-brass);margin-bottom:var(--space-3xs)}
.rcard__title{font-size:var(--text-sm);font-family:var(--font-display);font-weight:700;line-height:1.55}
.rcard__title a{color:var(--c-ink);text-decoration:none}
.rcard:hover .rcard__title a{color:var(--c-navy)}

/* ---------- 記事が無いとき・404 ---------- */
.empty{
  max-width:var(--w-prose);
  margin-block:var(--space-xl);
  padding:var(--space-xl);
  border:var(--rule);
  border-top:var(--rule-accent);
  border-radius:var(--radius-md);
  background:var(--c-surface);
}
.empty__title{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; color:var(--c-navy-900) }
.empty__lead{ margin-top:var(--space-sm); color:var(--c-ink-2) }
.empty p + p{ margin-top:var(--space-md) }
.empty__links{ display:grid; gap:var(--space-sm) }
.empty__search{ margin-top:var(--space-xl); padding-top:var(--space-lg); border-top:var(--rule) }

/* ---------- 検索フォーム ---------- */
.searchform__label{
  display:block; font-size:var(--text-sm); font-weight:700; color:var(--c-ink-2);
  margin-bottom:var(--space-2xs);
}
.searchform__row{ display:flex; gap:var(--space-2xs) }
.searchform__input{
  flex:1 1 auto; min-width:0; height:var(--field-h);
  padding:0 var(--space-sm);
  font-family:var(--font-body); font-size:var(--text-base);
  color:var(--c-ink); background:var(--c-surface);
  border:1px solid var(--c-paper-3); border-radius:var(--radius-sm);
}
.searchform__input:focus{ border-color:var(--c-navy) }

/* ---------- フォームIDが未設定のときの注記 ----------
   何も出ないと「壊れている」ように見えるので、
   そこに何が入るのかが分かるようにしておく。 */
.formnote{
  border:1px dashed var(--c-ink-3); border-radius:var(--radius-md);
  padding:var(--space-lg); color:var(--c-ink-3); background:var(--c-paper-2);
}
.formnote__title{ font-family:var(--font-display); font-weight:700; color:var(--c-ink-2) }
.formnote__body{ margin-top:var(--space-2xs); font-size:var(--text-sm); line-height:1.8 }

/* ---------- 本文を複数ページに分けたときのリンク ---------- */
.pagelinks{
  display:flex; flex-wrap:wrap; gap:var(--space-2xs);
  margin-top:var(--space-xl); padding-top:var(--space-md); border-top:var(--rule);
  font-size:var(--text-sm);
}
.pagelinks a,.pagelinks > span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding-inline:var(--space-2xs);
  border:1px solid var(--c-paper-3); border-radius:var(--radius-sm);
  text-decoration:none;
}

/* ---------- チェックリストのアイコン ----------
   もとは <li> の中に <svg> を直接置いていたが、それだとリスト項目が
   ブロックとして編集できなくなる（エディタがSVGを落としてしまう）。
   アイコンをCSS側に移し、<li> は素のテキストだけにしてある。

   flex ではなく位置指定にしているのは、flex にすると
   <strong>太字</strong>。続きの文 のような項目で、太字と続きの文が
   別々のフレックス項目になり、gap のぶんだけ隙間が空いてしまうため。 */
.checks li,
.checkbox li,
.assure li,
.fit__col ul li,
.decline ul li,
.promise ul li{
  display:block;
  position:relative;
  padding-left:calc(18px + var(--space-xs));
  line-height:var(--lh-tight);
  color:var(--c-ink-2);
}
.checks li::before,
.checkbox li::before,
.assure li::before,
.fit__col ul li::before,
.decline ul li::before,
.promise ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  width:18px; height:18px;
  background:var(--c-navy);
  -webkit-mask:var(--icon-check) no-repeat center/contain;
          mask:var(--icon-check) no-repeat center/contain;
}
.checkbox li{ padding-left:calc(19px + var(--space-xs)) }
.checkbox li::before{ width:19px; height:19px }
/* 課題チェックリストは読ませる箇所なので、本文と同じ大きさにする。
   小さくすると、スマートフォンで読み飛ばされる。 */
.checks li{ font-size:var(--text-base); line-height:1.8 }

/* お引き受けできないケースは、チェックではなく除外の印にする */
.decline ul li::before{
  background:var(--c-ink-3);
  -webkit-mask:var(--icon-cross) no-repeat center/contain;
          mask:var(--icon-cross) no-repeat center/contain;
}

.fit__col ul,
.decline ul,
.promise ul,
.assure{ display:grid; gap:var(--space-xs) }

/* ---------- お引き受けできないケース ----------
   もとは「<strong>ラベル</strong>。本文」と、句点で区切っていた。
   句点を外したので、代わりにラベルを1行目として独立させる。
   そうしないと「商材薬機法」のように語が地続きになって読めない。 */
.decline ul li strong{
  display:block;
  color:var(--c-navy-900);
  margin-bottom:2px;
}