@charset "utf-8";
/* おくやみのあと — design system v2
   読み手：家族を亡くした直後の人。多くは50〜70代、スマホ、疲れている。
   方針：便箋と罫線。紙・墨・藍の三色、見出しは明朝、囲みより罫線、影より余白。
   配色は紙の一択。端末のダーク設定には追従しない（2026-09-20 決定）。
   暗色にすると「便箋」の比喩が成立せず、見え方が2通りに割れて確認の手間も倍になるため。
   グランドルール：docs/BUILD_CONTRACT.md §0-B（AIっぽさを出さない）。 */

:root{
  --paper:      #f7f4ee;   /* 地色。白ではなく生成り */
  --paper-2:    #fffdf9;   /* 紙面（表・囲み） */
  --paper-3:    #efeae1;   /* 一段沈んだ帯 */
  --ink:        #1f1d1a;
  --ink-2:      #4f4a43;
  --ink-3:      #68615a;   /* 小さい文字にも使うので生成り地で 5.5:1 を確保 */
  --rule:       #d9d1c4;
  --rule-2:     #b9ae9d;
  --rule-dark:  #1f1d1a;

  --ai:         #1f3f66;   /* 藍 */
  --ai-2:       #142c4a;
  --ai-soft:    #e8edf3;
  --ai-rule:    #a9b9cc;

  --warn:       #8b3a2f;   /* 朱。期限にだけ使う */
  --warn-soft:  #f6ebe6;
  --warn-rule:  #dcb8ad;

  --ok:         #2c5f43;
  --ok-soft:    #e9f1ec;
  --ng:         #8a3a3a;
  --ng-soft:    #f6ecec;

  --wrap:       min(100% - 2.4rem, 46rem);
  --wrap-wide:  min(100% - 2.4rem, 68rem);
  --radius:     3px;
  --shadow:     none;

  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
          "Yu Gothic", "YuGothic", "BIZ UDPGothic", Meiryo, system-ui, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho",
          "BIZ UDPMincho", "Noto Serif JP", "MS PMincho", serif;

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  text-underline-offset:.22em;
  word-break:normal;
  overflow-wrap:anywhere;
  line-break:strict;
  padding-bottom:5.6rem; /* 固定CTA の逃げ */
}
@media (min-width:56rem){
  body{ font-size:17.5px; padding-bottom:0 }
}

/* ---------- 基本要素 ---------- */

h1,h2,h3,h4{ margin:0; line-height:1.5; letter-spacing:.02em }
h1{
  font-family:var(--font-serif); font-weight:600;
  font-size:1.9rem; line-height:1.45; margin:0 0 .9rem;
}
h2{
  font-family:var(--font-serif); font-weight:600;
  font-size:1.42rem; margin:3rem 0 1rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--rule-dark);
}
h3{ font-size:1.08rem; font-weight:700; margin:2rem 0 .6rem }
h4{ font-size:1rem; font-weight:700; margin:1.5rem 0 .4rem; color:var(--ink-2) }

p{ margin:0 0 1.15em }
ul,ol{ margin:0 0 1.15em; padding-left:1.4em }
li{ margin:.35em 0 }
li>ul,li>ol{ margin-top:.35em; margin-bottom:.35em }
strong,b{ font-weight:700 }
small{ font-size:.86em }
dl{ margin:0 0 1.15em } dt{ font-weight:700 } dd{ margin:0 0 .6em }

a{ color:var(--ai); text-decoration-thickness:1px }
a:hover{ color:var(--ai-2) }
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
  outline:3px solid var(--ai); outline-offset:2px; border-radius:2px;
}

/* スクリプトで見出しにフォーカスを移すとき（診断の設問など）は枠を出さない。キーボード操作の focus-visible は上で残す */
[tabindex="-1"]:focus{ outline:none }

hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0 }
img{ max-width:100%; height:auto }

.eyebrow{
  display:block; font-size:.86rem; letter-spacing:.14em; color:var(--ai);
  font-weight:700; margin:0 0 .5rem;
}

/* ---------- レイアウト ---------- */

.wrap{ width:var(--wrap); margin-inline:auto }
.wrap--wide{ width:var(--wrap-wide); margin-inline:auto }
main.wrap{ padding:1.6rem 0 3.5rem }
main.wrap--wide{ padding:0 0 3.5rem }
/* トップだけ：帯（.band）を画面幅いっぱいに敷くので main 自身は幅を持たない */
main.main--bands{ width:auto; padding:0 0 3.5rem }

/* 全幅の帯。中に .wrap を置く */
.band{ padding:3rem 0 }
.band--paper3{ background:var(--paper-3) }
.band--white{ background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
@media (min-width:56rem){ .band{ padding:4rem 0 } }

.skip{
  position:absolute; left:-9999px;
  background:var(--ai); color:#fff; padding:.7rem 1rem;
}
.skip:focus{ left:0; top:0; z-index:100 }

/* ---------- ヘッダー ---------- */

.sitehead{ background:var(--paper); border-bottom:1px solid var(--rule-dark) }
.sitehead__in{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem 1.5rem; padding:1rem 0 }
.brand{ display:block; text-decoration:none; color:inherit }
.brand__name{ display:block; font-family:var(--font-serif); font-weight:600; font-size:1.5rem; letter-spacing:.12em; color:var(--ink); line-height:1.3 }
.brand__tag{ display:block; font-size:.72rem; line-height:1.7; color:var(--ink-2); letter-spacing:.02em; margin-top:.2rem }
.nav{ display:flex; flex-wrap:wrap; gap:.1rem .15rem; font-size:.82rem; margin:0; padding:0 }
.nav a{ display:block; padding:.65rem .45rem; text-decoration:none; color:var(--ink-2); border-bottom:2px solid transparent; line-height:1.7 }
.nav a:hover{ color:var(--ai); border-bottom-color:var(--ai-rule) }
.nav a[aria-current="page"]{ color:var(--ai); border-bottom-color:var(--ai); font-weight:700 }
.nav-toggle{ display:flex; align-items:center; gap:.7rem; min-height:2.75rem; padding:.5rem .1rem .5rem .6rem; border:0; background:transparent; color:var(--ai); font:inherit; font-size:.8rem; cursor:pointer }
.nav-toggle__label{ line-height:1.5 }
.nav-toggle__icon{ position:relative; width:.7rem; height:.7rem }
.nav-toggle__icon::before,.nav-toggle__icon::after{ content:""; position:absolute; width:.7rem; height:1px; top:50%; left:0; background:currentColor }
.nav-toggle__icon::after{ transform:rotate(90deg) }
.sitehead--menu-open .nav-toggle__icon::after{ transform:rotate(0) }
@media (min-width:64rem){
  .sitehead__in{ flex-wrap:nowrap; gap:1.2rem }
  .sitehead__in>.brand{ flex:none }
  .nav{ justify-content:flex-end }
  .nav a{ white-space:nowrap; font-size:.78rem; padding:.6rem .4rem }
}
@media (max-width:63.99rem){
  .sitehead__in>.brand{ flex:1; min-width:0 }
  .sitehead__in .brand__name{ font-size:1.3rem }
  .sitehead__in .brand__tag{ font-size:.64rem; max-width:22rem }
  .nav{ flex-basis:100%; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0 1.2rem; padding-top:.5rem }
  .nav a{ padding:.75rem 0; border-bottom:1px solid var(--rule); font-size:.85rem }
  .nav a[aria-current="page"]{ border-bottom-color:var(--ai) }
  .sitehead--menu-enhanced .sitehead__in{ gap:.6rem 1rem }
  .sitehead--menu-open .nav{ padding-bottom:.5rem }
}
@media (max-width:23rem){
  .sitehead__in .brand__name{ font-size:1.16rem; letter-spacing:.08em }
  .sitehead__in .brand__tag{ font-size:.6rem }
  .nav-toggle{ font-size:.72rem; gap:.4rem }
}

/* ---------- パンくず・ページ頭 ---------- */

.crumbs{
  font-size:.82rem; color:var(--ink-3); margin:1rem 0 0;
  padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.15rem .35rem;
}
.crumbs li{ margin:0 }
.crumbs li+li::before{ content:"›"; margin-right:.35rem; color:var(--ink-3) }
.crumbs a{ color:var(--ink-3) }
.crumbs a:hover{ color:var(--ink) }
.crumbs [aria-current]{ color:var(--ink-2) }

.page-head{
  padding:1.6rem 0 1.8rem; margin:0 0 1.6rem;
  border-bottom:1px solid var(--rule-dark);
}
/* ページ頭の直後に番号付き節が来るときは、罫線が2本並ばないよう節側の上罫と余白を落とす */
.page-head+.sec{ padding-top:.4rem }
.page-head+.sec>.sec__head{ border-top:0; padding-top:0 }
.page-head+.kv{ border-top:0; margin-top:-.4rem }
.page-head__eyebrow{
  display:block; font-size:.85rem; letter-spacing:.14em; color:var(--ai);
  font-weight:700; margin:0 0 .55rem;
}
.page-head__title{ margin:0 0 .8rem; font-size:2rem }
.page-head__title .u{ display:inline-block }
.page-head__lede{ font-size:1.05rem; line-height:1.95; color:var(--ink-2); margin:0; max-width:40rem }
@media (min-width:56rem){
  .page-head{ padding:2.4rem 0 2.2rem }
  .page-head__title{ font-size:2.3rem }
}

/* セクション見出し（番号つき） */
.sec{ padding:2.6rem 0 0 }
.sec__head{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem; align-items:baseline;
  border-top:1px solid var(--rule-dark); padding-top:1rem; margin:0 0 1.4rem;
}
/* 帯（.band）の中では帯自体が区切りになるので、見出し上の罫を消す */
.sec__head--open{ border-top:0; padding-top:0 }
.sec__num{
  font-family:var(--font-serif); font-size:.95rem; letter-spacing:.16em;
  color:var(--ai); font-feature-settings:"lnum" 1;
}
.sec__title{
  font-family:var(--font-serif); font-weight:600; font-size:1.5rem;
  margin:0; border:0; padding:0; line-height:1.4;
}
.sec__lede{ grid-column:2; color:var(--ink-2); margin:0; max-width:40rem }
@media (min-width:56rem){
  .sec{ padding:3.4rem 0 0 }
  .sec__head{ grid-template-columns:5rem 1fr; gap:.3rem 1.5rem; padding-top:1.3rem }
  .sec__title{ font-size:1.7rem }
}

/* ---------- ヒーロー（トップ専用） ---------- */

.hero{ padding:2.2rem 0 2.4rem; position:relative }
.hero__eyebrow{
  display:block; font-size:.85rem; letter-spacing:.14em; color:var(--ai);
  font-weight:700; margin:0 0 .8rem;
}
.hero__title{
  font-size:clamp(1.55rem,7.2vw,2.05rem); line-height:1.4; margin:0 0 1.1rem; letter-spacing:.03em;
}
.hero__title .nobr{ display:inline-block }
.hero__lede{ font-size:1.05rem; line-height:2; color:var(--ink-2); margin:0 0 1.5rem; max-width:34rem }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 .6rem }
.hero__note{ font-size:.86rem; color:var(--ink-3); margin:0 }

.hero__main{ min-width:0 }
.hero__aside{
  margin:2rem 0 0; padding:1.2rem 0 0; border-top:1px solid var(--rule-dark);
}
.hero__aside-title{
  font-family:var(--font-serif); font-size:1.02rem; font-weight:600;
  letter-spacing:.08em; margin:0 0 .6rem;
}

@media (min-width:56rem){
  .hero{ padding:3.8rem 0 3.6rem }
  .hero__grid{
    display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
    gap:0 3rem; align-items:start;
  }
  .hero__title{ font-size:2.75rem; line-height:1.35 }
  .hero__aside{ margin:0; padding:.4rem 0 0 1.6rem; border-top:0; border-left:1px solid var(--rule-dark) }
}

/* ---------- 入口（3つ） ---------- */

.paths{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark) }
.path{ margin:0; padding:1.2rem 0; border-bottom:1px solid var(--rule) }
.path__label{ display:block; font-size:.82rem; letter-spacing:.1em; color:var(--ai); font-weight:700; margin:0 0 .25rem }
.path__title{
  font-family:var(--font-serif); font-size:1.25rem; font-weight:600;
  margin:0 0 .45rem; line-height:1.5;
}
.path__title a{ color:inherit; text-decoration:none }
.path__title a:hover{ color:var(--ai); text-decoration:underline }
.path__text{ margin:0 0 .5rem; color:var(--ink-2); font-size:.97rem }
.path__link{ font-size:.94rem; font-weight:700 }
@media (min-width:56rem){
  .paths{ display:grid; grid-template-columns:repeat(3,1fr); border-top:0 }
  .path{ padding:1.4rem 1.6rem 1.4rem 0; border-bottom:0; border-right:1px solid var(--rule) }
  .path+.path{ padding-left:1.6rem }
  .path:last-child{ border-right:0; padding-right:0 }
}

/* ---------- 事実の帯（数字は事実だけ） ---------- */

.facts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule-dark); border-left:1px solid var(--rule);
}
.fact{ margin:0; padding:1rem 1rem 1.1rem; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.fact__label{ display:block; font-size:.8rem; color:var(--ink-3); letter-spacing:.08em; margin:0 0 .15rem }
.fact__value{
  display:block; font-family:var(--font-serif); font-size:1.55rem; font-weight:600;
  line-height:1.3; letter-spacing:.04em;
}
.fact__value small{ font-size:.62em; font-weight:600; margin-left:.15em }
.fact__note{ display:block; font-size:.82rem; color:var(--ink-2); margin:.3rem 0 0; line-height:1.6 }
@media (min-width:40rem){ .facts{ grid-template-columns:repeat(4,1fr) } .fact{ padding:1.2rem 1.3rem 1.3rem } }

/* ---------- 罫線リスト ---------- */

.rule-list{ list-style:none; margin:0 0 1.4rem; padding:0; border-top:1px solid var(--rule-dark) }
.rule-list--flush{ margin:0 }
.rule-list__item{ margin:0; padding:1.1rem 0; border-bottom:1px solid var(--rule) }
.rule-list__title{ display:block; font-weight:700; font-size:1.02rem; margin:0 0 .3rem }
.rule-list__text{ margin:0; color:var(--ink-2); font-size:.97rem }
.rule-list__text+.rule-list__text{ margin-top:.4rem }
.rule-list--2col .rule-list__item{ display:grid; grid-template-columns:1fr; gap:.2rem 1.5rem }
@media (min-width:40rem){
  .rule-list--2col .rule-list__item{ grid-template-columns:minmax(10rem,14rem) 1fr }
  .rule-list--2col .rule-list__title{ margin:0 }
  .rule-list--grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; border-top:0 }
  .rule-list--grid .rule-list__item:nth-child(-n+2){ border-top:1px solid var(--rule-dark) }
}

/* 「」で始まる声のリスト */
.quote-list{ list-style:none; margin:0 0 1.4rem; padding:0 }
.quote-list li{
  margin:0; padding:.7rem 0 .7rem 1.1rem; border-left:2px solid var(--rule-2);
  font-family:var(--font-serif); font-size:1.05rem; line-height:1.8;
}
.quote-list li+li{ margin-top:.5rem }
@media (min-width:40rem){
  .quote-list--2col{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem 2.5rem }
  .quote-list--2col li+li{ margin-top:0 }
}

/* ---------- 流れ（番号つき） ---------- */

.flow{ list-style:none; margin:0 0 1.4rem; padding:0; counter-reset:flow }
.flow__item{
  counter-increment:flow; margin:0; position:relative;
  display:grid; grid-template-columns:3.2rem 1fr; gap:0 .6rem;
  padding:1.1rem 0; border-top:1px solid var(--rule);
}
.flow__item:first-child{ border-top:1px solid var(--rule-dark) }
.flow__item:last-child{ border-bottom:1px solid var(--rule) }
.flow__num{
  font-family:var(--font-serif); font-size:1.6rem; line-height:1.2; color:var(--ai);
  font-feature-settings:"lnum" 1; letter-spacing:.02em;
}
.flow__num::before{ content:counter(flow, decimal-leading-zero) }
.flow__body{ min-width:0; max-width:44rem }
.flow__title{ display:block; font-weight:700; font-size:1.05rem; margin:.15rem 0 .35rem }
.flow__text{ margin:0; color:var(--ink-2); font-size:.97rem }
.flow__text+.flow__text{ margin-top:.4rem }
.flow__when{ display:inline-block; font-size:.8rem; color:var(--ink-3); margin-left:.5rem; letter-spacing:.06em }

/* 手順（診断結果で使う。細い縦線＋番号） */
.steps{ list-style:none; padding:0; counter-reset:step; margin:0 0 1.4rem }
.steps > li{
  counter-increment:step; position:relative;
  padding:0 0 1.1rem 2.9rem; margin:0 0 0 1.05rem;
  border-left:1px solid var(--rule-2);
}
.steps > li:last-child{ border-left-color:transparent; padding-bottom:0 }
.steps > li::before{
  content:counter(step);
  position:absolute; left:-1.05rem; top:0;
  width:2.1rem; height:2.1rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ai); color:#fff;
  font-family:var(--font-serif); font-size:.95rem; line-height:1;
}
.steps__title{ font-weight:700; display:block; margin-bottom:.2rem }

/* ---------- 二分割（こちらから／ご本人） ---------- */

.split{ display:grid; gap:1.6rem; margin:0 0 1.4rem }
.split__col{ border-top:2px solid var(--rule-dark); padding-top:1rem }
.split__col--ai{ border-top-color:var(--ai) }
.split__col--warn{ border-top-color:var(--rule-dark) }
.split__title{
  font-family:var(--font-serif); font-size:1.2rem; font-weight:600; margin:0 0 .3rem;
}
.split__sub{ font-size:.86rem; color:var(--ink-3); margin:0 0 .8rem; letter-spacing:.04em }
.split ul{ padding-left:1.2em }
.split--wide{ gap:2.5rem }
@media (min-width:40rem){ .split{ grid-template-columns:1fr 1fr; gap:2.5rem } }

/* ---------- 実物の再現：案件表・連絡文 ---------- */

.sheet{ overflow-x:auto;
  background:var(--paper-2); border:1px solid var(--rule-2);
  padding:1.1rem 1.2rem 1rem; margin:0 0 1.4rem;
  font-size:.9rem; line-height:1.7;
}
.sheet__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  border-bottom:1px solid var(--rule-dark); padding-bottom:.5rem; margin-bottom:.7rem;
}
.sheet__title{ font-family:var(--font-serif); font-size:1.05rem; font-weight:600; margin:0 }
.sheet__meta{ font-size:.78rem; color:var(--ink-3); margin:0; letter-spacing:.04em }
.sheet table{ width:100%; border-collapse:collapse; font-size:.86rem; line-height:1.6 }
.sheet th,.sheet td{ text-align:left; vertical-align:top; padding:.45rem .5rem .45rem 0; border-bottom:1px solid var(--rule) }
.sheet thead th{ font-weight:700; color:var(--ink-2); font-size:.78rem; letter-spacing:.06em; border-bottom:1px solid var(--rule-2) }
.sheet tbody tr:last-child td,.sheet tbody tr:last-child th{ border-bottom:0 }
.sheet__foot{ font-size:.78rem; color:var(--ink-3); margin:.7rem 0 0 }
.sheet--letter{ font-family:var(--font); white-space:normal; font-size:.92rem; max-width:40rem }
.sheet--letter p{ margin:0 0 .9em }
.sheet--letter p:last-child{ margin-bottom:0 }
.sheet--letter .sheet__from{ color:var(--ink-3); font-size:.8rem; border-bottom:1px solid var(--rule); padding-bottom:.5rem; margin-bottom:.8rem; white-space:normal }

.line-gift{
  display:grid; gap:1.4rem; align-items:start;
}
.line-gift__image{
  display:block; width:min(100%, 23rem); margin:0 auto;
  max-height:32rem; object-fit:cover; object-position:top;
  border:1px solid var(--rule-2); background:var(--paper-2);
}
.result-sample{
  border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule);
  padding:.85rem 0; margin:0 0 1.1rem;
  display:flex; flex-wrap:wrap; gap:.35rem 1rem; align-items:baseline;
}
.result-sample__name{ font-weight:700 }
.result-sample__owner{ color:var(--ink-2); font-size:.92rem }
@media (min-width:40rem){
  .line-gift{ grid-template-columns:minmax(13rem, 23rem) 1fr; gap:2rem }
  .line-gift__image{ margin:0 }
}

/* ---------- 区分の一覧（会社別・ガイド） ---------- */

.cat-list{ list-style:none; margin:0 0 1.4rem; padding:0; border-top:1px solid var(--rule-dark) }
.cat{ margin:0; border-bottom:1px solid var(--rule) }
.cat a{
  display:grid; grid-template-columns:1fr auto; gap:.1rem .8rem; align-items:baseline;
  padding:.85rem 0; text-decoration:none; color:inherit;
}
.cat a:hover .cat__name{ color:var(--ai); text-decoration:underline }
.cat__name{ font-weight:700; font-size:1.02rem }
.cat__count{ font-family:var(--font-serif); font-size:.9rem; color:var(--ink-3); letter-spacing:.06em; white-space:nowrap }
.cat__eg{ grid-column:1 / -1; font-size:.86rem; color:var(--ink-2); line-height:1.6 }
@media (min-width:40rem){
  .cat-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; border-top:0 }
  .cat:nth-child(-n+2){ border-top:1px solid var(--rule-dark) }
}
@media (min-width:56rem){
  .cat-list--3{ grid-template-columns:1fr 1fr 1fr }
  .cat-list--3 .cat:nth-child(3){ border-top:1px solid var(--rule-dark) }
}

/* ---------- 定義リスト（会社別ページの要約） ---------- */

/* 公式のご案内からの引用。左の細い罫で本文と区別し、出典は必ず下に付く */
.quote-block{ margin:1.2rem 0 1.6rem; padding:0 }
.quote-block__body{ margin:0; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid var(--rule-dark); color:var(--ink-2) }
.quote-block__body p{ margin:0; font-size:.98rem; line-height:1.85 }
.quote-block__cite{ margin:.5rem 0 0 1.35rem; font-size:.86rem; color:var(--ink-3) }
.quote-block__cite a{ color:var(--ai) }

.kv{ margin:0 0 1.4rem; border-top:1px solid var(--rule-dark) }
.kv > div{ display:grid; grid-template-columns:1fr; gap:.1rem .8rem; padding:.7rem 0; border-bottom:1px solid var(--rule) }
.kv dt{ font-size:.86rem; color:var(--ink-3); letter-spacing:.06em; font-weight:700 }
.kv dd{ margin:0 }
@media (min-width:40rem){ .kv > div{ grid-template-columns:11rem 1fr; padding:.8rem 0 } }
.kv--measured > div{ padding:.55rem 0 }
@media (min-width:40rem){ .kv--measured > div{ grid-template-columns:15rem 1fr; padding:.6rem 0 } }

/* ---------- 絞り込み（会社別一覧） ---------- */

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.4rem; padding:0; list-style:none }
.chips li{ margin:0 }
.chip{
  display:inline-block; padding:.5rem .9rem; border:1px solid var(--rule-2);
  background:var(--paper-2); color:var(--ink-2); font:inherit; font-size:.88rem;
  cursor:pointer; line-height:1.6; border-radius:var(--radius);
}
.chip:hover{ border-color:var(--ink-2); color:var(--ink) }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.filter-note{ font-size:.86rem; color:var(--ink-3); margin:-.8rem 0 1.2rem }

/* ---------- 本文パーツ ---------- */

.card{
  background:var(--paper-2); border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:1.2rem 1.35rem; margin:0 0 1.3rem;
}
.card > :last-child{ margin-bottom:0 }
.card__title{
  font-size:1.02rem; font-weight:700; margin:0 0 .6rem;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}

.callout{
  border-left:3px solid var(--ai); background:var(--ai-soft);
  padding:1rem 1.2rem; margin:0 0 1.3rem;
}
.callout > :last-child{ margin-bottom:0 }
.callout--warn{ border-left-color:var(--warn); background:var(--warn-soft) }
.callout--info{ border-left-color:var(--rule-2); background:var(--paper-3) }
.callout__title{ font-weight:700; margin:0 0 .4rem; font-size:.98rem }
.callout--warn .callout__title{ color:var(--warn) }

/* 囲まない注記（罫線だけ） */
.note{ border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule); padding:.9rem 0; margin:0 0 1.4rem }
.note > :last-child{ margin-bottom:0 }
.note__title{ font-family:var(--font-serif); font-weight:600; margin:0 0 .3rem; font-size:1.02rem }

/* チェックリスト */
.checklist{ list-style:none; padding:0; margin:0 0 1.3rem; border-top:1px solid var(--rule-dark) }
.checklist > li{ position:relative; padding:.6rem 0 .6rem 2.1rem; border-bottom:1px solid var(--rule); margin:0 }
.checklist > li::before{
  content:""; position:absolute; left:.15rem; top:1rem;
  width:1.1rem; height:1.1rem; border:1px solid var(--ink-2); background:var(--paper-2);
}

/* 表 */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.4rem;
  border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);
}
.table-wrap table{ border-collapse:collapse; width:100%; font-size:.94rem; line-height:1.75 }
.table-wrap th,.table-wrap td{
  padding:.7rem .8rem .7rem 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule);
}
.table-wrap th:last-child,.table-wrap td:last-child{ padding-right:0 }
.table-wrap thead th{
  font-weight:700; white-space:nowrap; font-size:.84rem; letter-spacing:.06em; color:var(--ink-2);
  border-bottom:1px solid var(--rule-2);
}
.table-wrap tbody th{ font-weight:700 }
.table-wrap tbody tr:last-child td,.table-wrap tbody tr:last-child th{ border-bottom:0 }
.table-wrap td[data-nowrap],.table-wrap th[data-nowrap]{ white-space:nowrap }
.table-wrap th[scope="row"]{ min-width:9.5em; word-break:keep-all; overflow-wrap:anywhere }
.table-wrap--tight table{ font-size:.9rem }
@media (min-width:40.01rem){
  .city-procedures td:nth-child(2){ white-space:nowrap }
}
/* 狭い画面では行を縦に積む（自治体一覧など、列が長文になる表） */
@media (max-width:40rem){
  .table-wrap--stack table,.table-wrap--stack tbody,.table-wrap--stack tr,.table-wrap--stack th,.table-wrap--stack td{ display:block }
  .table-wrap--stack thead{ display:none }
  .table-wrap--stack tbody tr{ padding:.85rem 0 .9rem; border-bottom:1px solid var(--rule) }
  .table-wrap--stack tbody tr:last-child{ border-bottom:0 }
  .table-wrap--stack th,.table-wrap--stack td{ padding:.1rem 0; border:0; white-space:normal }
  .table-wrap--stack tbody th{ font-size:1.02rem; padding-bottom:.3rem }
  .table-wrap--stack td[data-label]::before{
    content:attr(data-label); display:inline-block; min-width:4.5em; margin-right:.6em;
    font-size:.8rem; color:var(--ink-3); letter-spacing:.06em; font-weight:700;
  }
  .table-wrap--stack td:empty{ display:none }

  .sheet--stack table,.sheet--stack tbody,.sheet--stack tr,.sheet--stack th,.sheet--stack td{ display:block }
  .sheet--stack thead{ display:none }
  .sheet--stack tbody tr{ padding:.7rem 0; border-bottom:1px solid var(--rule) }
  .sheet--stack tbody tr:last-child{ border-bottom:0 }
  .sheet--stack th,.sheet--stack td{ padding:.1rem 0; border:0 }
  .sheet--stack td[data-label]::before{
    content:attr(data-label); display:inline-block; min-width:5em; margin-right:.6em;
    font-size:.78rem; color:var(--ink-3); letter-spacing:.06em; font-weight:700;
  }
}

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:3.1rem; padding:.7rem 1.6rem;
  border:1px solid var(--ai); border-radius:var(--radius);
  background:var(--ai); color:#fff;
  font-family:inherit; font-size:1rem; font-weight:700; line-height:1.5;
  text-decoration:none; cursor:pointer; text-align:center; letter-spacing:.04em;
}
.btn:hover{ background:var(--ai-2); border-color:var(--ai-2); color:#fff }
.btn--ghost{ background:transparent; color:var(--ai); border-color:var(--ai) }
.btn--ghost:hover{ background:var(--ai-soft); color:var(--ai-2); border-color:var(--ai-2) }
.btn--line{ background:var(--ai); border-color:var(--ai); color:#fff }
.btn--line:hover{ background:var(--ai-2); border-color:var(--ai-2); color:#fff }

/* バッジ */
.badge{
  display:inline-block; padding:.1em .55em; border-radius:2px;
  border:1px solid var(--rule-2); background:var(--paper-2); color:var(--ink-2);
  font-size:.79rem; font-weight:700; line-height:1.7; white-space:nowrap; letter-spacing:.03em;
}
.badge--ok{ background:var(--ok-soft); border-color:var(--ok); color:var(--ok) }
.badge--ng{ background:var(--ng-soft); border-color:var(--ng); color:var(--ng) }
.badge--unknown{ background:var(--paper-3); border-color:var(--ink-3); color:var(--ink-2) }
.badge--m{ background:var(--ai-soft); border-color:var(--ai); color:var(--ai) }
.badge--g{ background:var(--paper-3); border-color:var(--ink-3); color:var(--ink-2) }

/* 期限 */
.deadline{
  display:inline-block; font-family:var(--font-serif); font-size:.9rem; font-weight:600;
  color:var(--ink); border-bottom:1px solid var(--ink-2); padding:0 .1em; max-width:100%; white-space:normal;
  letter-spacing:.04em;
}
.deadline--urgent{ color:var(--warn); border-bottom-color:var(--warn) }

/* 期限の早見表（期限の列を朱で） */
.deadline-table td:first-child,.deadline-table th:first-child{ white-space:nowrap }
.deadline-table tbody td:first-child{
  font-family:var(--font-serif); font-size:1.05rem; font-weight:600; color:var(--warn); letter-spacing:.04em;
}
/* 狭い画面では5列を無理に詰めず、1行を1枚の札として縦に積む（列順：期限・手続き・窓口・過ぎたとき・こちらの関わり） */
@media (max-width:40rem){
  .deadline-table thead{ display:none }
  .deadline-table,.deadline-table tbody{ display:block }
  .deadline-table tr{ display:block; padding:.9rem 0; border-bottom:1px solid var(--rule) }
  .deadline-table tr:last-child{ border-bottom:0 }
  .deadline-table th,.deadline-table td{ display:block; padding:.1rem 0; border:0; white-space:normal }
  .deadline-table tbody td:first-child{ font-size:1rem; margin-bottom:.1rem }
  .deadline-table th[scope="row"]{ font-size:1.02rem; margin-bottom:.25rem }
  .deadline-table td:nth-child(3)::before{ content:"窓口："; color:var(--ink-3); font-size:.85rem }
  .deadline-table td:nth-child(4)::before{ content:"過ぎたとき："; color:var(--ink-3); font-size:.85rem }
  .deadline-table td:nth-child(5)::before{ content:"こちらの関わり："; color:var(--ink-3); font-size:.85rem; margin-right:.3rem }
}

/* FAQ */
.faq{ margin:0 0 1.4rem; border-top:1px solid var(--rule-dark) }
.faq details{ border-bottom:1px solid var(--rule) }
.faq summary{
  cursor:pointer; padding:1rem 2rem 1rem 1.6rem; position:relative;
  font-weight:700; list-style:none; line-height:1.7;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{
  content:"Q"; position:absolute; left:0; top:1.05rem;
  font-family:var(--font-serif); font-weight:600; color:var(--ai); font-size:.95rem;
}
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:1.35rem;
  width:.6rem; height:.6rem;
  border-right:1px solid var(--ink-2); border-bottom:1px solid var(--ink-2);
  transform:rotate(45deg); transition:transform .15s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.6rem }
.faq details > :not(summary){ margin-left:1.6rem; margin-bottom:1rem }
.faq details > :not(summary):first-of-type{ margin-top:0 }

/* 注記・出典 */
.meta{ font-size:.88rem; line-height:1.8; color:var(--ink-2); margin:0 0 1rem }
.meta a{ color:var(--ai) }
/* 例文の囲みの直下に置く注記。囲みとの間を詰める */
.meta--pull{ margin-top:-.6rem }

/* グリッド（診断結果で使う） */
.grid{ display:grid; gap:1rem; margin:0 0 1.4rem }
@media (min-width:40rem){
  .grid--2{ grid-template-columns:repeat(2,1fr) }
}
.grid .card{ margin:0 }

/* ページ内目次 */
.anchor-nav{ border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule); padding:.9rem 0; margin:0 0 2rem }
.page-head+.anchor-nav{ border-top:0; margin-top:-.6rem; padding-top:0 }
.anchor-nav__title{ font-size:.82rem; font-weight:700; color:var(--ink-3); margin:0 0 .3rem; letter-spacing:.08em }
.anchor-nav ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem .5rem }
.anchor-nav li{ margin:0 }
.anchor-nav a{
  display:inline-block; padding:.45rem .8rem; border:1px solid var(--rule-2);
  border-radius:var(--radius); background:var(--paper-2); text-decoration:none;
  line-height:1.6; font-size:.93rem;
}

/* ---------- 締めのCTA帯 ---------- */

.cta-band{ padding:2.8rem 0; background:var(--ai); color:#fff; margin-top:3rem }
.cta-band .wrap{ display:grid; gap:1.2rem }
.cta-band__title{ font-family:var(--font-serif); font-weight:600; font-size:1.6rem; margin:0; line-height:1.5; color:#fff }
.cta-band__text{ margin:0; color:rgba(255,255,255,.88); max-width:38rem }
.cta-band .btn{ background:#fff; color:var(--ai); border-color:#fff }
.cta-band .btn:hover{ background:var(--paper); color:var(--ai-2) }
.cta-band .btn--line{ background:#fff; border-color:#fff; color:var(--ai) }
.cta-band .btn--line:hover{ background:var(--paper); border-color:var(--paper); color:var(--ai-2) }
.cta-band .btn--ghost{ background:transparent; color:#fff; border-color:var(--ai-rule) }
.cta-band .btn--ghost:hover{ background:var(--ai-2); color:#fff; border-color:#fff }
.cta-band .btn-row{ margin:0 }
@media (min-width:56rem){
  .cta-band{ padding:3.6rem 0 }
  .cta-band .wrap{ grid-template-columns:1fr auto; align-items:center; gap:2rem }
}

/* ---------- フッター ---------- */

.sitefoot{
  border-top:1px solid var(--rule-dark);
  background:var(--paper);
  padding:2.4rem 0 2.2rem; margin-top:3rem;
}
.foot__grid{ display:grid; gap:1.6rem 2rem; grid-template-columns:1fr 1fr }
.foot__brand{ grid-column:1 / -1 }
.foot__brand .brand__name{ font-size:1.25rem }
.foot__note{ font-size:.86rem; line-height:1.85; color:var(--ink-2); margin:.6rem 0 0; max-width:34rem }
.foot__title{
  font-size:.8rem; letter-spacing:.12em; color:var(--ink-3); font-weight:700;
  margin:0 0 .5rem; padding-bottom:.35rem; border-bottom:1px solid var(--rule);
}
.foot__list{ list-style:none; margin:0; padding:0; font-size:.9rem }
.foot__list li{ margin:0 }
.foot__list a{ display:block; padding:.28rem 0; color:var(--ink-2); text-decoration:none }
.foot__list a:hover{ color:var(--ai); text-decoration:underline }
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem;
  margin:2rem 0 0; padding-top:1rem; border-top:1px solid var(--rule);
  font-size:.8rem; color:var(--ink-3);
}
.foot__bottom p{ margin:0 }
@media (min-width:56rem){
  .foot__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr 1fr }
  .foot__brand{ grid-column:auto }
}

/* ---------- 固定CTA ---------- */

.cta-fixed{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--paper);
  border-top:1px solid var(--rule-dark);
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  display:flex; gap:.6rem; justify-content:center;
}
.cta-fixed .btn{ flex:1 1 0; min-width:0; max-width:20rem; padding-inline:.8rem; font-size:.95rem }
/* リンク未設定のボタンを site.js が隠したあと、残った1本を幅いっぱいに */
.cta-fixed--single .btn{ max-width:none }

@media (min-width:56rem){
  .cta-fixed{ display:none }
}

/* 広い画面では固定ボタンを重ねない。各ページの本文の導線を使う。 */
.has-no-fixed-cta{ padding-bottom:0 }
.cta-band a:focus-visible{ outline-color:#fff }
.btn:disabled{ background:var(--paper-3); color:var(--ink-3); border-color:var(--rule); cursor:not-allowed }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto!important; transition:none!important; animation:none!important }
}

/* 名前を入力して、分類と組み合わせて会社を探す。JSなしでは全件を表示。 */
.company-search{ margin:1.5rem 0 1.3rem; padding:1.3rem 0 1.5rem; border-block:1px solid var(--rule-2) }
.page-head+.company-search{ border-top:0; margin-top:0; padding-top:0 }
.company-search__clear{ margin-left:auto }
.company-search__label{ display:block; color:var(--ai); font-size:.88rem; font-weight:700; margin-bottom:.65rem }
.company-search__controls{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1rem }
.company-search__input{ flex:1 1 18rem; min-width:0; width:100%; min-height:3.1rem; border:1px solid var(--rule-2); border-radius:2px; background:var(--paper-2); color:var(--ink); font:inherit; font-size:1rem; line-height:1.6; padding:.7rem 1rem }
.company-search__input::placeholder{ color:var(--ink-3); opacity:1 }
.company-search__clear{ min-height:2.75rem; border:0; background:none; color:var(--ai); font:inherit; font-size:.83rem; padding:.5rem .1rem; cursor:pointer; text-decoration:underline; text-underline-offset:.25em }

.company-filters{ margin:0 0 1.2rem; padding:0 0 1rem; border-bottom:1px solid var(--rule) }
.company-filters>summary{ cursor:pointer; color:var(--ai); font-size:.88rem; padding:.7rem 0; font-weight:700 }
.company-filters .chips{ margin:.7rem 0 .2rem }
.company-filters+.filter-note{ margin:0 0 1.2rem }

.company-results--searching .sec{ padding-top:1rem }
.company-results--searching .sec__lede,
.company-results--searching .sec__num,
.company-results--filtered .sec__num{ display:none }
.company-results--searching .sec__head,
.company-results--filtered .sec__head{ grid-template-columns:1fr }
.company-results--filtered .sec__lede{ grid-column:1 }
.company-results--searching .sec__head{ margin-bottom:.6rem }

@media print{
  .cta-fixed,.nav,.skip,.cta-band,.btn-row,.progress,.foot__grid,.crumbs{ display:none }
  body{ padding-bottom:0; background:#fff; color:#000 }
  .flow__num,.steps>li::before{ background:none; color:var(--ai); border:1px solid var(--ai) }
  a{ color:inherit; text-decoration:none }
  .sec,.note,.rule-list__item,.flow__item{ break-inside:avoid }
}

/* 診断結果：h2 の下罫と一覧の上罫が二重にならないように */
[data-shindan-root] h2+.flow .flow__item:first-child,
[data-shindan-root] h2+.rule-list,
[data-shindan-root] h2+.rule-list--grid .rule-list__item:nth-child(-n+2){ border-top:0 }

/* ---------- フォーム（診断で使う） ---------- */

.field{ margin:0 0 1.3rem }
.field__hint{ font-size:.86rem; color:var(--ink-3); margin:0 0 .6rem }

.choice{
  display:block; position:relative;
  border:1px solid var(--rule-2); border-radius:var(--radius);
  background:var(--paper-2);
  padding:.85rem 1rem .85rem 2.9rem;
  margin:0 0 .6rem; cursor:pointer; line-height:1.7;
}
.choice:hover{ border-color:var(--ai) }
.choice input{
  position:absolute; left:1rem; top:1.15rem;
  width:1.25rem; height:1.25rem; margin:0; accent-color:var(--ai);
}
.choice:has(input:checked){ border-color:var(--ai); background:var(--ai-soft); box-shadow:inset 0 0 0 1px var(--ai) }
.choice:has(input:focus-visible){ outline:3px solid var(--ai); outline-offset:2px }

.progress{ height:.3rem; background:var(--rule); overflow:hidden; margin:0 0 1.4rem }
.progress__bar{ height:100%; background:var(--ai); transition:width .2s ease }

.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.6rem 0 0 }

[hidden]{ display:none !important }

/* ---------- やることリスト（LINE登録特典） ---------- */

.yarukoto-actions{ margin:-.6rem 0 1.8rem }
.yarukoto-table{ table-layout:auto }
.yarukoto-done-col,.yarukoto-done{ width:3.2rem; text-align:center }
.yarukoto-check{
  display:inline-block; width:1.05rem; height:1.05rem;
  border:1px solid var(--ink-2); background:var(--paper-2); vertical-align:middle;
}
.yarukoto-name{ font-weight:700 }
.yarukoto-name sup{ font-size:.72em; margin-left:.2em; line-height:1 }
.yarukoto-name sup a{ text-decoration:none; color:var(--ai) }
.yarukoto-block-row th,.yarukoto-category-row th{
  font-family:var(--font-serif); font-weight:600; letter-spacing:.04em;
  padding-top:1rem; border-bottom:1px solid var(--rule-dark);
}
.yarukoto-block-row th{ color:var(--warn) }
.yarukoto-category-row th{ color:var(--ai) }
.yarukoto-source-list{ list-style:none; margin:0 0 1.4rem; padding:0; border-top:1px solid var(--rule-dark) }
.yarukoto-source-list li{
  display:grid; grid-template-columns:2.4em 1fr; gap:.45em;
  margin:0; padding:.55rem 0; border-bottom:1px solid var(--rule); font-size:.9rem; line-height:1.75;
}
.yarukoto-source-num{ font-variant-numeric:tabular-nums; white-space:nowrap }
.yarukoto-source-text{ min-width:0 }

@media print{
  @page{ size:A4 portrait; margin:12mm }
  html,body{ background:#fff !important; color:#000 !important }
  body{ font-size:10.2pt; line-height:1.55; padding:0 }
  .sitehead,.nav,.skip,.cta-fixed,.cta-band,.btn-row,.yarukoto-actions,.sitefoot .foot__grid{ display:none !important }
  main.wrap,main.wrap--wide{ width:auto; padding:0 }
  .page-head{ padding:0 0 5mm; margin:0 0 5mm; border-bottom:1px solid #000 }
  .page-head__eyebrow{ color:#000; font-size:8.5pt; margin-bottom:1mm }
  .page-head__title{ font-size:18pt; line-height:1.35; margin:0 0 2mm }
  .page-head__lede{ color:#000; font-size:10.5pt; line-height:1.7; max-width:none }
  .sec{ padding:5mm 0 0; break-inside:auto }
  .sec__head{ grid-template-columns:10mm 1fr; gap:0 4mm; padding-top:3mm; margin-bottom:3mm; border-top:1px solid #000 }
  .sec__num,.sec__lede{ color:#000 }
  .sec__title{ font-size:13pt }
  .table-wrap{ overflow:visible; border-color:#000; margin-bottom:5mm }
  .table-wrap table{ font-size:8.4pt; line-height:1.45 }
  .table-wrap th,.table-wrap td{ padding:2.1mm 2mm 2.1mm 0; border-bottom:1px solid #777 }
  .table-wrap thead th{ border-bottom:1px solid #000; color:#000 }
  .yarukoto-table tr{ break-inside:avoid; page-break-inside:avoid }
  .yarukoto-done-col,.yarukoto-done{ width:10mm; min-width:10mm; text-align:center }
  .yarukoto-check{ width:8mm; height:8mm; border:1px solid #000; background:#fff }
  .yarukoto-block-row th,.yarukoto-category-row th{ color:#000; border-bottom:1px solid #000; padding-top:2.5mm }
  .rule-list,.yarukoto-source-list{ border-top:1px solid #000 }
  .yarukoto-source-list{ columns:2; column-gap:6mm; font-size:7.5pt; line-height:1.35 }
  .yarukoto-source-list li{ grid-template-columns:4.5mm 1fr; gap:1.5mm; padding:1.1mm 0; font-size:inherit; line-height:inherit; border-bottom:1px solid #777 }
  .rule-list__item,.yarukoto-source-list li,tr{ break-inside:avoid; page-break-inside:avoid }
  a{ color:#000; text-decoration:none }
  /* 見出しだけがページ末に取り残されないように（2026-09-28） */
  .sec__head,.sec__title,h2,h3{ break-after:avoid; page-break-after:avoid }
  /* フッターだけで1ページ使わないように。免責の1行と著作権表示だけを小さく残す */
  .sitefoot{ background:none !important; padding:3mm 0 0 !important; margin:0 !important; break-before:avoid; page-break-before:avoid }
  .sitefoot .foot__grid,.sitefoot .foot__brand,.sitefoot .foot__list,.sitefoot .foot__title,.sitefoot .foot__note{ display:none !important }
  .sitefoot .foot__bottom{ font-size:7.5pt; border-top:1px solid #777; padding-top:2mm; margin:0 }
}