:root{
  --ink:#2A211C;
  --muted:#5F5548;
  --cream:#FBFAF3;
  --sage-soft:#EAE8D3;
  --sage:#DDDBBB;
  --clay:#7E4529;
  --clay-600:#8F4F31;
  --brown:#8B5036;
  --onbrown:#F0E7DE;
  --hair:#DCD5C2;
  --hair-soft:#E7E2D4;
  --serif:"Noto Serif JP",'Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:"Noto Sans JP",'Hiragino Sans','Yu Gothic',sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--clay);text-underline-offset:.25em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--clay-600);outline-offset:3px;border-radius:2px
}
[id]{scroll-margin-top:6.5rem}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.04em;line-height:1.55;margin:0;text-wrap:balance;word-break:auto-phrase}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

/* ---------- layout ---------- */
.wrap{width:min(1100px,100% - 3rem);margin-inline:auto}
.narrow{width:min(760px,100%)}
.sec{padding-block:clamp(3.5rem,7vw,6rem)}
.sec--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.stack{display:flex;flex-direction:column}
.gap-xs{gap:.5rem}.gap-s{gap:1rem}.gap-m{gap:1.75rem}.gap-l{gap:2.75rem}.gap-xl{gap:4rem}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--clay);
  display:flex;align-items:center;gap:.75rem;line-height:1
}
.eyebrow::after{content:"";flex:0 0 2.5rem;height:1px;background:var(--clay);opacity:.4}
.h1{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.5}
.h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.h3{font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.7}
.h4{font-size:1rem;font-family:var(--sans);font-weight:700;letter-spacing:.06em}
.lead{font-size:clamp(1rem,1.6vw,1.1rem);color:var(--muted);line-height:2.05;max-width:42em;word-break:auto-phrase}
.body{color:var(--muted);max-width:42em}
.small{font-size:.86rem;line-height:1.9;color:var(--muted);max-width:46em}
.xsmall{font-size:.78rem;line-height:1.85;color:var(--muted);max-width:44em}
.strong{color:var(--ink);font-weight:500}
.num{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.75rem;border-radius:999px;border:1px solid var(--clay-600);
  background:var(--clay-600);color:#fff;text-decoration:none;
  font-size:.94rem;font-weight:500;letter-spacing:.04em;line-height:1.4;
  transition:background .18s ease,border-color .18s ease
}
.btn:hover{background:#7A4127;border-color:#7A4127}
.btn--ghost{background:transparent;color:var(--clay);border-color:var(--hair)}
.btn--ghost:hover{background:var(--sage-soft);border-color:var(--clay-600)}
.btn--onbrown{background:var(--cream);color:var(--clay);border-color:var(--cream)}
.btn--onbrown:hover{background:#fff;border-color:#fff}
.btn--outline-onbrown{background:transparent;color:var(--onbrown);border-color:rgba(240,231,222,.5)}
.btn--outline-onbrown:hover{background:rgba(240,231,222,.12);border-color:var(--onbrown)}
.dark a.btn--onbrown{color:var(--clay)}
.dark a.btn--outline-onbrown{color:var(--onbrown)}

/* ---------- surfaces ---------- */
.panel{background:var(--sage-soft);border-radius:22px;padding:clamp(1.5rem,3vw,2.25rem)}
.panel--sage{background:var(--sage)}
.panel--outline{background:transparent;border:1px solid var(--hair)}
.band{background:var(--sage-soft)}
.band--sage{background:var(--sage)}
.dark{background:var(--brown);color:var(--onbrown)}
.dark .h1,.dark .h2,.dark .h3{color:#fff}
.dark .lead,.dark .body,.dark .small,.dark .xsmall{color:var(--onbrown)}
.dark .eyebrow{color:var(--onbrown)}
.dark .eyebrow::after{background:var(--onbrown)}
.dark a{color:#fff}
.hr{height:1px;background:var(--hair);border:0;margin:0}

/* ---------- grids ---------- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,10fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.split--lead{grid-template-columns:minmax(0,10fr) minmax(0,7fr)}

/* ----------列（記録・計画・報告・転記 等） ---------- */
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.cols>li{border-top:2px solid var(--ink);padding:1.1rem 1.25rem 1.5rem 0}
.cols>li+li{padding-left:1.25rem;border-left:1px solid var(--hair-soft)}
.cols .ttl{font-family:var(--serif);font-size:1.15rem;letter-spacing:.14em;margin-bottom:.4rem}

/* ---------- ステップ ---------- */
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:start}
.step__no{
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  color:#fff;background:var(--clay-600);border-radius:999px;padding:.35rem .8rem;
  white-space:nowrap;line-height:1.4
}
.step__no--quiet{background:transparent;color:var(--muted);border:1px solid var(--hair)}
.meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem;color:var(--muted);letter-spacing:.04em}
.meta span{display:inline-flex;align-items:center;gap:.35rem}
.meta span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--hair);margin-right:.5rem}

/* ---------- 到達点フロー ---------- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.flow>li{padding:1.5rem 1.25rem 0 0;position:relative}
.flow>li+li{padding-left:1.25rem}
.flow__bar{height:3px;background:var(--hair);margin-bottom:1rem}
.flow>li:last-child .flow__bar{background:var(--clay-600)}
.flow__when{font-size:.76rem;font-weight:700;letter-spacing:.14em;color:var(--clay);margin-bottom:.35rem}
.flow>li:not(:last-child) .flow__when{color:var(--muted)}

/* ---------- リスト ---------- */
.ticks>li,.crosses>li{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.6rem;align-items:start}
.ticks>li::before{content:"—";color:var(--clay);font-weight:700;line-height:1.95}
.crosses>li::before{content:"×";color:var(--clay);font-weight:700;line-height:1.95}
.dots>li{display:grid;grid-template-columns:.5rem minmax(0,1fr);gap:.85rem;align-items:start}
.dots>li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--clay);margin-top:.85rem}

/* ---------- テーブル ---------- */
.tblwrap{overflow-x:auto}
.tbl{min-width:520px;font-size:.94rem}
.tbl th,.tbl td{text-align:left;padding:.95rem 1rem;border-bottom:1px solid var(--hair-soft);vertical-align:top}
.tbl thead th{
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:.7rem
}
.tbl thead th:last-child{color:var(--clay)}
.tbl tbody th{width:1%;white-space:nowrap;padding-right:2rem;font-weight:500;font-family:var(--serif);letter-spacing:.1em;color:var(--ink)}
.tbl td:last-child{color:var(--ink)}
.tbl td:nth-child(2){color:var(--muted)}
.tbl--plain tbody th{width:1%;white-space:nowrap;font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.tbl--plain td{color:var(--ink)}
.tbl--plain td,.tbl--plain th{padding-left:0}

/* ---------- Before / After ---------- */
.ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--hair)}
.ba__ttl{grid-column:1/-1;font-family:var(--serif);font-size:1.06rem;letter-spacing:.06em;padding:1.2rem 0 .85rem}
.ba__before{padding:0 1.75rem 1.4rem 0}
.ba__after{padding:0 0 1.4rem 1.75rem;border-left:2px solid var(--clay-600)}
.ba__lbl{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--muted);display:block;margin-bottom:.4rem}
.ba__after .ba__lbl{color:var(--clay)}
.ba__after .small{color:var(--ink)}

/* ---------- ヘッダー / フッター ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,250,243,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair-soft)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;padding-block:.9rem;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1.2}
.brand__mark{font-family:var(--serif);font-size:1.18rem;letter-spacing:.34em}
.brand__sub{font-size:.66rem;letter-spacing:.16em;color:var(--muted);margin-top:.3rem}
.nav{display:flex;gap:1.4rem;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:.88rem;letter-spacing:.06em}
.nav a:hover{color:var(--clay)}
.nav a.btn{color:#fff;padding:.6rem 1.25rem;font-size:.85rem}
.nav a.btn:hover{color:#fff}

.ftr{background:var(--brown);color:var(--onbrown);padding-block:3.5rem 2rem}
.ftr a{color:var(--onbrown);text-decoration:none;font-size:.88rem}
.ftr .small,.ftr .xsmall{color:var(--onbrown)}
.ftr .brand__mark{color:#fff}
.ftr a:hover{text-decoration:underline}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
.ftr__h{font-size:.7rem;font-weight:700;letter-spacing:.18em;margin-bottom:.9rem;color:#fff}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(240,231,222,.25);font-size:.78rem}

/* ---------- パンくず ---------- */
.crumb{font-size:.78rem;color:var(--muted);letter-spacing:.06em;padding-top:1.5rem}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--clay)}

/* ---------- フォーム ---------- */
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.84rem;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:.5rem}
.req{font-size:.64rem;font-weight:700;letter-spacing:.1em;background:var(--clay-600);color:#fff;padding:.15rem .5rem;border-radius:3px}
.opt{font-size:.64rem;font-weight:700;letter-spacing:.1em;background:var(--sage);color:var(--muted);padding:.15rem .5rem;border-radius:3px}
.field input,.field select,.field textarea{
  font:inherit;font-size:.94rem;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:10px;padding:.75rem .9rem;width:100%
}
.field textarea{min-height:9rem;resize:vertical}
.checkline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;font-size:.9rem}
.checkline input{margin-top:.45rem}
.formnote{font-size:.84rem;color:var(--muted)}

/* ---------- プラン ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:1rem;align-items:start}
.plan{
  position:relative;display:flex;flex-direction:column;gap:1rem;
  border:1px solid var(--hair);border-radius:22px;
  padding:clamp(1.5rem,3vw,2.25rem);background:transparent
}
.plan--rec{
  background:var(--sage-soft);border:2px solid var(--clay-600);
  box-shadow:0 16px 38px rgba(42,33,28,.13);
  padding-top:calc(clamp(1.5rem,3vw,2.25rem) + .35rem)
}
.plan__badge{
  position:absolute;top:-.8rem;left:clamp(1.5rem,3vw,2.25rem);
  background:var(--clay-600);color:#fff;border-radius:999px;
  padding:.32rem 1rem;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;line-height:1.4;white-space:nowrap
}
.plan--rec .h3{font-size:clamp(1.2rem,2.2vw,1.45rem)}
.plan--rec .ticks>li{color:var(--ink)}

/* ---------- ページ内目次 ---------- */
.toc{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  padding-top:1.4rem;border-top:1px solid var(--hair)}
.toc__lbl{font-size:.68rem;font-weight:700;letter-spacing:.2em;color:var(--muted);margin-right:.5rem}
.toc a{display:inline-block;font-size:.85rem;text-decoration:none;color:var(--ink);
  border:1px solid var(--hair);border-radius:999px;padding:.45rem 1.05rem;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.toc a:hover{background:var(--sage-soft);border-color:var(--clay-600);color:var(--clay)}

/* ---------- 途中のご案内 ---------- */
.cta-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 2rem;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding-block:1.6rem}
.cta-inline p{font-size:.95rem;color:var(--ink);max-width:36em}

/* ---------- 次に読むページ ---------- */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem}
.next a{display:block;text-decoration:none;color:var(--ink);
  border-top:2px solid var(--ink);padding-top:1rem;transition:border-color .18s ease}
.next a:hover{border-top-color:var(--clay-600)}
.next a:hover .next__ttl{color:var(--clay)}
.next__ttl{font-family:var(--serif);font-size:1.06rem;letter-spacing:.06em;
  display:block;margin-bottom:.35rem;transition:color .18s ease}
.next__d{font-size:.8rem;line-height:1.8;color:var(--muted);display:block}

/* ---------- 補足ボックス ---------- */
.note{border-left:2px solid var(--clay);padding-left:1.1rem;font-size:.86rem;color:var(--muted);line-height:1.95;max-width:48em}

/* ---------- FAQ ---------- */
.qa{border-top:1px solid var(--hair-soft);padding:1.4rem 0}
.qa__q{position:relative;display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.75rem;
  padding-right:2.25rem;font-family:var(--serif);font-size:1.04rem;letter-spacing:.04em;cursor:pointer;list-style:none}
.qa__q::after{
  content:"";position:absolute;right:.4rem;top:.55em;width:.62rem;height:.62rem;
  border-right:1.6px solid var(--clay);border-bottom:1.6px solid var(--clay);
  transform:rotate(45deg);transition:transform .18s ease
}
details[open]>.qa__q::after{transform:rotate(-135deg)}
.qa__q:hover{color:var(--clay)}
.qa__q::-webkit-details-marker{display:none}
.qa__q::before{content:"Q";color:var(--clay);font-weight:600}
.qa__a{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.75rem;margin-top:.85rem;color:var(--muted);font-size:.94rem}
.qa__a::before{content:"A";color:var(--muted);font-weight:700;font-family:var(--serif)}
details[open] .qa__q{color:var(--clay)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:999;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:6px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .split,.split--lead{grid-template-columns:minmax(0,1fr)}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:minmax(0,1fr);gap:2rem}
  .next{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .cols,.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols>li,.flow>li{padding-right:1rem}
  .cols>li:nth-child(odd),.flow>li:nth-child(odd){padding-left:0;border-left:0}
  .cols>li:nth-child(even){padding-left:1.25rem}
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  body{font-size:15px}
  .wrap{width:min(1100px,100% - 2.25rem)}
  .g2,.g3,.g4,.cols,.flow{grid-template-columns:minmax(0,1fr)}
  .cols>li,.flow>li{padding-left:0!important;border-left:0}
  .ba{grid-template-columns:minmax(0,1fr)}
  .ba__before{padding:0 0 1rem}
  .ba__after{padding:0 0 1.2rem 1.1rem}
  .next{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .cta-inline{align-items:flex-start}
  .ftr__grid{grid-template-columns:minmax(0,1fr)}
  .nav{gap:1rem;font-size:.85rem}
  .hdr__in{gap:.9rem}
}

/* ---------- 印刷 ---------- */
@media print{
  .hdr,.ftr,.btns,.skip{display:none}
  body{background:#fff;font-size:11pt}
  .sec,.sec--tight{padding-block:1rem}
  .dark{background:#fff;color:var(--ink)}
  .dark .h1,.dark .h2,.dark .h3{color:var(--ink)}
  .dark .lead,.dark .body,.dark .small,.dark .xsmall{color:var(--muted)}
}