:root{
  --ai:#1f3150; --hai:#5a6b80; --shu:#b5402a; --sumi:#1c1e22; --kinari:#f5f1e8; --line:#cfc8ba; --paper:#fbf9f4;
  --serif:"Noto Serif JP",serif; --sans:"Noto Sans JP",sans-serif;
  --main:720px; --aside:280px; --gap:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:56px}
body{margin:0;background:var(--kinari);color:var(--sumi);font-family:var(--sans);font-size:17px;line-height:1.9;-webkit-text-size-adjust:100%}
a{color:var(--ai)}
:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
.wrap{max-width:calc(var(--main) + var(--gap) + var(--aside) + 64px);margin:0 auto;padding:0 32px}

/* header */
.hd{position:sticky;top:0;z-index:20;background:rgba(245,241,232,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(4px)}
.hd .wrap{display:flex;align-items:center;gap:32px;height:72px}
.hd .logo{display:block;padding:8px 0}
.hd .logo img{height:28px;width:auto;display:block}
.hd nav{display:flex;gap:24px;font-size:14px;margin-left:auto}
.hd nav a{color:var(--hai);text-decoration:none}
.hd nav a:hover{color:var(--ai);text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid var(--ai);color:var(--ai);background:transparent;transition:background .15s,color .15s}
.btn:hover{background:var(--ai);color:#fff}
.btn-shu{background:var(--shu);border-color:var(--shu);color:#fff}
.btn-shu:hover{background:#9a3522;border-color:#9a3522}
.hd .btn{min-height:40px;padding:0 18px;font-size:14px}

/* section frame: main + aside (根拠の欄) */
section{padding:56px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.no{font-size:14px;color:var(--hai);letter-spacing:.08em}
h1,h2,h3{font-family:var(--serif);color:var(--ai);font-weight:700;margin:0}
h2{font-size:clamp(26px,2.5vw,34px);line-height:1.45;margin:4px 0 20px;word-break:auto-phrase}
.row{position:relative}
.main{width:var(--main);max-width:100%}
.row + .row{margin-top:24px}
.main p{margin:0 0 1em}
.note{float:right;clear:right;width:var(--aside);margin-right:calc(-1 * (var(--aside) + var(--gap)));margin-top:4px;font-size:13.5px;line-height:1.8;color:var(--hai);border-left:3px solid var(--hai);padding:2px 0 2px 16px;transition:color .2s,border-color .2s}
.note + .note{margin-top:14px}
.main::after{content:"";display:block;clear:both}
.note b{color:var(--ai);font-weight:700}
.note.on{color:var(--sumi);border-left-color:var(--sumi)}
sup.fn{font-size:12px;line-height:0;vertical-align:super;margin-left:2px}
sup.fn button{all:unset;cursor:pointer;color:var(--hai);padding:2px 3px;border-radius:2px;font-family:var(--sans)}
sup.fn button:hover,sup.fn button:focus-visible,sup.fn button[aria-expanded="true"]{color:var(--sumi);background:rgba(90,107,128,.12)}
.link-line{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2}
.seal{width:44px;height:44px;display:inline-block;vertical-align:middle;margin-left:14px}
.js .seal.wait{opacity:0;transform:scale(1.35)}
.seal.stamp{animation:stamp .22s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes stamp{0%{opacity:0;transform:scale(1.35)}70%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}

/* 1 first view */
.fv{padding:80px 0 88px}
.eyebrow{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ai);letter-spacing:.04em;line-height:1.6;margin:0 0 24px;padding-left:14px;border-left:4px solid var(--ai)}
.fv h1{font-size:clamp(30px,3.2vw,46px);line-height:1.5;letter-spacing:.01em;width:calc(var(--main) + var(--gap) + var(--aside));max-width:calc(100vw - 64px)}
.fv h1 .l{display:block}
.fv h1 .w{display:inline-block}
.fv .rule{height:2px;background:var(--hai);margin:32px 0 24px;max-width:var(--main)}
.fv .lead{font-size:17px;line-height:1.95;max-width:32em;margin:0 0 .6em}
.fv .lead .g{display:inline-block}
.bk .s{display:block}
.bk .w,.bkw .w{display:inline-block}
.fv .lead .w{display:inline-block}
.eyebrow .w{display:inline-block}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}

/* line blocks */
.blk{display:block}
.blk .w,h2 .w,.ledger .w,.steps .w,.diag .w,.proof .w{display:inline-block}

/* 2 issues */
.cards{word-break:auto-phrase;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--paper);border:1px solid var(--line);padding:22px 22px 18px;min-height:0;display:flex;flex-direction:column}
.card .k{font-size:16px;font-weight:700;color:var(--ai);letter-spacing:.04em;padding-bottom:10px;border-bottom:2px solid var(--ai);display:block}
.card h3{font-family:var(--sans);font-size:16px;font-weight:400;color:var(--sumi);line-height:1.8;margin:14px 0 auto}
.card .to{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px;font-weight:700;color:var(--ai)}

/* 3 flag */
.flag{display:grid;grid-template-columns:1fr 56px 1fr;align-items:stretch}
.flag .from,.flag .to{padding:28px}
.flag .from{background:var(--paper);border:1px solid var(--line);color:var(--hai)}
.flag .to{background:var(--ai);color:#fff}
.flag .cap{font-size:17px;font-weight:700;letter-spacing:.04em;display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid currentColor}
.flag .from .cap{color:var(--ai)}
.flag .to .cap{color:#fff}
.flag p{margin:0;font-size:15px;line-height:1.85}
.flag .to p{font-weight:400;color:#eef1f5}
.flag .arrow{display:flex;align-items:center;justify-content:center;color:var(--hai)}
.flag .arrow svg{width:28px;height:28px}

/* 4 not-do ledger */
.ledger,.steps,.diag,.proof{word-break:auto-phrase}
.ledger{border-top:2px solid var(--ai);line-height:1.6}
.ledger .hdr,.ledger .ln{display:grid;grid-template-columns:1fr 40px 1fr;align-items:start}
.ledger .hdr{font-size:16px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--ai);padding:9px 16px}
.ledger .ln{padding:8px 16px;border-bottom:1px solid var(--line);font-size:15px}
.ledger .x{color:var(--hai)}
.ledger .o{color:var(--sumi)}
.ledger .ar{color:var(--hai);text-align:center;font-size:15px;padding-top:1px}

.ledger .tag{float:left;margin:2px 8px 0 0;font-size:12px;color:var(--hai);border:1px solid var(--line);padding:0 6px;margin-right:6px;font-weight:400;vertical-align:1px}

/* 5 path */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ai);counter-reset:st}
.step{padding:20px 24px 0 0;position:relative}
.step + .step{padding-left:24px;border-left:1px solid var(--line)}
.step .n{font-family:var(--serif);font-size:15px;color:var(--hai);margin-right:10px}
.step h3{font-size:22px;line-height:1.4;margin:0 0 10px;display:inline}
.step .by{font-size:16px;line-height:1.6;color:var(--ai);font-weight:700;margin:10px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--ai)}
.step .ba{font-size:14px;line-height:1.65;margin:0}
.step .ba dt{font-size:15px;font-weight:700;color:var(--ai);margin-bottom:2px}
.step .ba dd{margin:0 0 8px}
.step .ba dd.af{color:var(--sumi)}
.step a.more{display:inline-block;font-size:14px;margin-top:6px}

/* 6 diagnosis */
.diag{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.diag .box{padding:20px 24px;border:1px solid var(--line);background:var(--paper)}
.diag .box.paid{border:1.5px solid var(--ai);background:#fff}
.diag .cap{font-size:15px;font-weight:700;color:#fff;background:var(--hai);display:inline-block;padding:2px 12px;margin-bottom:12px;letter-spacing:.06em}
.diag .paid .cap{background:var(--ai)}
.diag h3{font-size:20px;line-height:1.5;margin:0 0 10px}
.diag ul{margin:0;padding:0;list-style:none}
.diag li{padding:5px 0 5px 18px;line-height:1.7;border-top:1px solid var(--line);position:relative;font-size:15px}
.diag li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;background:var(--hai)}
.diag .paid li::before{background:var(--ai)}

/* 7 maker */
.proof{border-top:2px solid var(--ai);margin:0}
.proof .pr{display:grid;grid-template-columns:120px 1fr 56px;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);align-items:start}
.proof dt{font-size:17px;font-weight:700;color:var(--ai);padding-top:0}
.proof dd{margin:0;line-height:1.7;font-size:15px}
.proof .books{margin:0;padding:0;list-style:none}
.proof .books li{margin:0 0 6px}
.proof .books a{font-weight:700}
.proof .sl{padding-top:0}
.proof .sl .seal{margin:0;width:36px;height:36px}
.proof .src{display:block;font-size:13px;color:var(--hai)}

/* 4-7: 表は本文と根拠の欄を合わせた幅で使う（PC・タブレット） */
@media (min-width:901px){
  .ledger,.steps,.diag,.proof{width:calc(var(--main) + var(--gap) + var(--aside))}
  /* 表の下の一文と根拠の欄: 表と同じ幅で左右に並べ、根拠の欄を広くして行数を減らす */
  /* 1280×631 の画面（実測）でも各章が1画面に収まるよう、章の上下の余白を詰める */
  section{padding:36px 0}
  section[id]{scroll-margin-top:76px}
  h2{margin-bottom:14px}
  .para.foot{margin-top:14px!important}
  .para.foot{width:calc(var(--main) + var(--gap) + var(--aside));display:flex;gap:32px;align-items:flex-start}
  .para.foot p{flex:1;margin:0}
  .para.foot .note{float:none;order:2;flex:none;width:420px;margin:4px 0 0;word-break:auto-phrase}
  .ledger .ln{padding:5px 16px}
  .ledger .ln.pr{line-height:1.5}
  .step{padding:16px 16px 0 0}
  .step + .step{padding-left:20px}
  .step .by{margin:8px 0 10px}
  .step .ba dd{margin-bottom:6px}
  .ledger .hdr{padding:7px 16px}
  .diag .paid{display:flex;flex-direction:column}
  .diag .paid .cta{margin-top:auto;padding-top:16px}
  .diag .box{padding:18px 24px}
  .diag .hd2{display:flex;align-items:center;gap:14px;margin-bottom:10px}
  .diag .hd2 .cap{margin:0}
  .diag .hd2 h3{margin:0}
  .proof .books{display:flex;flex-wrap:wrap;gap:4px 28px;margin:2px 0 4px}
  .proof .books li{margin:0}
}

/* 8 close */
.close{background:var(--ai);color:#fff;border-top:0}
.close .no{color:#c9d2de}
.close h2{color:#fff;font-size:clamp(26px,3vw,40px);line-height:1.6;margin-bottom:24px}
.close h2 .w{display:inline-block}
.close h2 .l{display:block}
.close p{color:#dfe5ec;max-width:36em}
.close .btn{border-color:#fff;color:#fff}
.close .btn:hover{background:#fff;color:var(--ai)}
.close .btn-shu{border-color:var(--shu)}
.close .btn-shu:hover{background:#9a3522;border-color:#9a3522;color:#fff}

/* stub */
.stub h2{color:var(--hai)}
.stub p{color:var(--hai);font-size:15px}
footer{border-top:1px solid var(--line);padding:40px 0 56px;font-size:13px;color:var(--hai)}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer img{height:22px}

/* tablet / phone */
@media (max-width:1180px){
  :root{--aside:220px; --gap:40px; --main:calc(100vw - 64px - 220px - 40px)}
}
@media (max-width:900px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hd nav{display:none}
  .hd .btn{margin-left:auto}
  .hd .btn .pc{display:none}
  sup.fn button{display:inline-block;padding:0 8px;min-width:44px;min-height:44px;line-height:44px;margin:-20px -6px;text-align:center}
  .row{display:block}
  .main{width:auto}
  .para{display:flex;flex-direction:column}
  .para .note{order:2}
  .fv h1{width:auto}
  .eyebrow{font-size:17px}
  .fv .lead .g{display:inline}
  .note{float:none;width:auto;margin:8px 0 18px;display:none;background:var(--paper)}
  .note.open{display:block;color:var(--sumi);border-left-color:var(--sumi);padding:10px 14px}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .flag{grid-template-columns:1fr}
  .flag .arrow{height:48px;transform:rotate(90deg)}
  section{padding:64px 0}
  section[id]{scroll-margin-top:16px}
  .fv{padding:56px 0 72px}
  .cta .btn{width:100%}
  .ledger .hdr{display:none}
  .ledger .ln{grid-template-columns:1fr;gap:10px;padding:16px 4px}
  .ledger .ar{display:none}
  .ledger .x::before,.ledger .o::before{display:block;font-size:14px;font-weight:700;color:var(--ai);margin-bottom:2px}
  .ledger .x::before{content:"やらないこと"}
  .ledger .o::before{content:"代わりにやること"}
  .ledger .tag{display:none}
  .ledger .ln.pr .x::before{content:"やらないこと（原則）"}
  .steps{grid-template-columns:1fr}
  .step{padding:24px 0 16px}
  .step + .step{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .diag{grid-template-columns:1fr}
  .proof .pr{grid-template-columns:1fr 44px;gap:4px 12px}
  .proof dt{grid-column:1 / -1}
  /* 携帯: 文字のリンクも指で押せる高さ（44px）にする */
  .step a.more,.proof .books a,.proof .src a,footer a{display:inline-flex;align-items:center;min-height:44px}
  .proof .books li{margin:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .seal.wait{opacity:1;transform:none}
  .seal.stamp{animation:none}
  .note,.btn{transition:none}
}