*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#f4f1ea;color:#222;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;font-size:18px;line-height:1.85}
a{color:#1a5fb4}
strong{font-weight:700}
.pr-bar{background:#4a4a4a;color:#fff;font-size:14px;line-height:1.6;padding:8px 14px}
.wrap{max-width:680px;margin:0 auto;background:#fff;padding:0 18px 40px}
section{padding:8px 0 22px}
h1{font-size:28px;line-height:1.45;margin:6px 0 12px;letter-spacing:.01em}
h2{font-size:23px;line-height:1.5;margin:30px 0 14px;padding:0 0 8px;border-bottom:3px solid #2d6a4f}
h3{font-size:20px;line-height:1.5;margin:24px 0 10px}
p{margin:0 0 16px}
ul,ol{padding-left:1.4em;margin:0 0 16px}
li{margin:0 0 8px}
sup{font-size:13px}
sup a{text-decoration:none}

/* FV */
.hero{padding:24px 0 8px}
.kicker{display:inline-block;font-size:15px;color:#2d6a4f;font-weight:700;margin:0 0 6px;border:1px solid #2d6a4f;border-radius:4px;padding:1px 10px}
.lead{font-size:18px;color:#333;margin:0 0 12px}
.byline{font-size:15px;color:#666;margin:0}

/* 先に結論 */
.answer{background:#eef5f0;border:2px solid #2d6a4f;border-radius:10px;padding:18px 16px 8px;margin:10px 0 8px}
.answer-label{display:inline-block;background:#2d6a4f;color:#fff;font-size:15px;font-weight:700;padding:3px 12px;border-radius:4px;margin:0 0 12px}
.big-answer{font-size:26px;line-height:1.5;font-weight:700;margin:0 0 10px}
.answer-list{list-style:none;padding:0;margin:0 0 14px}
.answer-list li{position:relative;padding:0 0 0 1.6em;margin:0 0 10px}
.answer-list li::before{content:"✓";position:absolute;left:0;top:0;color:#2d6a4f;font-weight:700}
.four{font-weight:700;margin:4px 0 14px}

/* 2つの数字の図 */
.nums{display:flex;gap:10px;margin:8px 0 14px}
.nums>div{flex:1;border-radius:8px;padding:12px 10px;text-align:center;line-height:1.5}
.nums .n-label{display:block;font-size:15px;color:#555;margin-bottom:4px}
.nums .n-main{display:block;font-size:19px;font-weight:700}
.nums .n-where{display:block;font-size:15px;margin-top:6px}
.nums .known{background:#f1f1f1;border:1px solid #d0d0d0}
.nums .unknown{background:#fff8e6;border:2px solid #d9a300}
.nums .unknown .n-where{color:#8a5a00;font-weight:700}

/* 流れ図 */
.flow{border:1px solid #d6d6d6;border-radius:8px;padding:14px;margin:8px 0 16px;background:#fafafa}
.flow-row{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:700;line-height:1.4}
.flow-row span.box{flex:1;background:#fff;border:1px solid #bbb;border-radius:6px;padding:10px 6px;font-size:17px}
.flow-row span.arrow{font-size:22px;color:#2d6a4f;flex:0 0 auto}
.flow-note{font-size:16px;color:#444;margin:10px 0 0;text-align:center}

/* 目次 */
.toc{background:#f7f7f4;border-radius:8px;padding:14px 16px 6px;margin:18px 0 6px}
.toc-title{font-weight:700;margin:0 0 8px;font-size:17px}
.toc ol{margin:0 0 8px}
.toc li{font-size:17px;margin:0 0 6px}
.toc a{text-decoration:none}

/* 事実ボックス・注記 */
.fact{border-left:5px solid #8a8a8a;background:#f7f7f7;padding:14px 14px 4px;margin:18px 0 8px}
.fact-title{font-weight:700;margin:0 0 8px}
.muted{color:#555;font-size:16px}
.note{font-size:15px;color:#555}
.where{font-size:16px;background:#fbf8ee;border:1px dashed #d7c98f;padding:6px 10px;border-radius:4px;display:inline-block}
.example{border:2px dashed #2d6a4f;border-radius:8px;padding:12px 14px 4px;margin:6px 0 16px;background:#fbfdfb}
.example-title{font-weight:700;color:#2d6a4f;margin:0 0 6px}

/* 捨てる許可 */
.drop{padding-left:1.2em}
.drop li{list-style:none;position:relative;padding-left:2px}
.drop li::before{content:"―";position:absolute;left:-1.2em;color:#999}
.notnow{background:#f7f7f4;border-radius:8px;padding:6px 16px 4px;margin:18px 0}
.notnow h2{border-color:#999}

/* 番号見出し */
.num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#2d6a4f;color:#fff;font-size:17px;margin-right:8px;vertical-align:2px}

/* チェックリスト */
.checks{list-style:none;padding:0;margin:0 0 16px}
.checks li{border:1px solid #ddd;border-radius:8px;padding:12px 14px;margin:0 0 10px}
.checks .c-head{display:block;font-weight:700;font-size:19px;margin-bottom:4px}
.checks .c-body{display:block}
.checks .c-where{display:block;font-size:16px;color:#555;margin-top:6px}
.checks li.c-unknown{border:2px solid #d9a300;background:#fffcf2}

.pause{text-align:center;padding:30px 0 26px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin:18px 0}
.pause p{margin:0 0 6px}
.two-numbers{border:2px solid #2d6a4f;border-radius:8px;padding:14px 14px 6px;margin:6px 0 16px}
.two-numbers dl{margin:0 0 8px}
.two-numbers dl div{padding:8px 0;border-top:1px solid #e3e3e3}
.two-numbers dt{font-weight:700}
.two-numbers dd{margin:0;font-size:16px;color:#555}

/* 表 */
.table-wrap{overflow-x:auto;margin:0 0 16px}
table.compare{width:100%;border-collapse:collapse;font-size:16px;line-height:1.65;margin:0 0 16px}
.compare th,.compare td{border:1px solid #d0d0d0;padding:10px 8px;vertical-align:top;text-align:left}
.compare th{background:#eef1ee;font-weight:700}
.compare td:first-child{width:30%;font-weight:700;background:#fafafa}
.ways td:first-child{width:32%}
.ways td:last-child{width:22%}
.sides th:nth-child(2){background:#e8f1fb}
.sides th:nth-child(3){background:#fbf3e6}
.sides td:first-child{width:24%}

/* 注意・誠実ブロック */
.caution{background:#fff6f2;border:1px solid #f0d2c4;border-radius:8px;padding:4px 14px 6px;margin:20px 0}
.caution h2{border-color:#c0603a}
.quote{font-weight:700;border-left:4px solid #c0603a;padding-left:10px}
.links li{font-size:16px}
.honest{background:#f7f7f2;border-radius:8px;padding:4px 14px 6px;margin:20px 0}
.honest h2{border-color:#666}
.phrases{padding-left:0}
.phrases li{background:#fff;border:1px solid #d8d8d8;border-radius:6px;padding:10px 12px;list-style:none;margin:0 0 10px}
.help{border:3px solid #1a5fb4;border-radius:8px;padding:4px 14px 8px;margin:20px 0}
.help h2{border-color:#1a5fb4}
.help .tel{font-size:19px;font-weight:700}

/* CTA */
.bridge,.summary{background:#eef5f0;border-radius:10px;padding:4px 14px 16px;margin:22px 0}
.steps{counter-reset:st;list-style:none;padding:0;margin:0 0 12px}
.steps li{counter-increment:st;position:relative;padding:0 0 0 2.2em;margin:0 0 10px}
.steps li::before{content:counter(st);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:#2d6a4f;color:#fff;font-size:15px;font-weight:700;text-align:center;line-height:26px}
.cta{display:block;text-align:center;background:#2f9e44;color:#fff;font-weight:700;font-size:20px;line-height:1.5;text-decoration:none;padding:18px 12px;border-radius:10px;box-shadow:0 4px 0 #23793a;margin:16px 0 10px}
.cta:active{transform:translateY(2px);box-shadow:0 1px 0 #23793a}
.cta-sub{font-size:15px;color:#444;text-align:center;margin:0}
.cta-soft{display:block;text-align:center;border:2px solid #2f9e44;color:#23793a;background:#fff;font-weight:700;font-size:18px;text-decoration:none;padding:14px 12px;border-radius:10px;margin:12px 0 8px}

/* FAQ */
details{border:1px solid #ccc;border-radius:8px;padding:12px 14px;margin:0 0 12px}
summary{font-weight:700;cursor:pointer;font-size:18px}
details p{margin:10px 0 0;font-size:17px}

/* v1互換（index.v1.html が参照） */
.supervisor{border:1px dashed #999;border-radius:6px;padding:10px 14px;margin:18px 0}
.sv-label{font-size:14px;color:#666;margin:0}
.sv-tbd{font-weight:700;margin:0;color:#8a5a00}

/* フッター */
.foot{font-size:14px;color:#555;line-height:1.75;border-top:1px solid #ddd;padding-top:16px;margin-top:10px}
.foot p{margin:0 0 8px}
.sources{padding-left:1.4em;margin:12px 0}
.sources li{margin:0 0 6px}
.sources a{margin-left:4px;word-break:break-all}
.operator{margin-top:12px}

/* 早見表（.sides）：幅480px以下は行ごとのカードに切り替える。td の data-label を見出しに使うため、列を足すときは data-label も付けること */
@media (max-width:480px){
  .sides thead{display:none}
  table.sides,.sides tbody,.sides tr,.sides td{display:block;width:100%}
  .sides tr{border:1px solid #d0d0d0;border-radius:8px;margin:0 0 12px;overflow:hidden}
  .sides td{border:0;border-top:1px solid #e3e3e3;padding:10px 12px;font-size:17px}
  .sides td:first-child{width:100%;border-top:0;background:#eef1ee;font-size:18px}
  .sides td:nth-child(2){background:#f4f8fd}
  .sides td:nth-child(3){background:#fdf8ef}
  .sides td[data-label]::before{content:attr(data-label);display:block;font-size:15px;font-weight:700;color:#444;margin-bottom:2px}
}

@media (max-width:380px){
  body{font-size:17px}
  h1{font-size:25px}
  .nums{flex-direction:column}
  /* .sides は480px以下でカード表示。ここで .sides まで詰めるとカードの余白が6pxになり文字が枠に貼りつく */
  .compare:not(.sides) th,.compare:not(.sides) td{padding:8px 6px}
}