/* LP用（/barrel-sauna/ など）。style.css のあとに読む */
:root{
  --night:#1f2f3f;
  --night-deep:#16222e;
  --wood:#8a5b36;
  --wood-soft:#efe3d3;
  --mist:#f1f4f3;
  --moss:#4f6f52;
  --moss-dark:#3d5840;
  --ink:#24292d;
  --warm-light:#f4c983;
}
.lp{font-size:17px}
.lp main{max-width:none;padding:0}
.lp-wrap{max-width:680px;margin:0 auto;padding:0 18px}
.lp h1,.lp h2,.lp .serif{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;letter-spacing:.04em}
.lp h2{border-left:none;padding-left:0;font-size:25px;line-height:1.55;margin:0 0 18px}
.lp h3{font-size:18px;margin:28px 0 8px}
.lp p{margin:0 0 1.1em}

/* ヒーロー */
.hero{background:var(--night-deep);color:#f3f1ec;position:relative;overflow:hidden}
.hero svg{display:block;width:100%;height:auto}
.hero-copy{max-width:680px;margin:0 auto;padding:8px 18px 44px}
.hero h1{font-size:34px;line-height:1.45;margin:0 0 14px;color:#fff}
.hero .sub{font-size:16px;color:#cdd6dd;margin:0 0 22px}
.hero .meta{font-size:13px;color:#93a2ae;margin:0}

/* セクション */
.sec{padding:56px 0}
.sec.mist{background:var(--mist)}
.sec.wood{background:var(--wood-soft)}
.sec.night{background:var(--night);color:#eef1f3}
.sec.night h2{color:#fff}
.sec.night a{color:var(--warm-light)}
.lead-q{font-size:19px;line-height:1.9}
.figure{margin:28px 0}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{font-size:13px;color:#6b6f72;margin-top:8px;line-height:1.7}
.sec.night .figure figcaption{color:#a9b5bf}

/* 一日の流れ */
.day{list-style:none;margin:28px 0 0;padding:0;position:relative}
.day::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;background:#4b6072}
.day li{position:relative;padding:0 0 26px 76px;min-height:56px}
.day .time{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--night-deep);border:2px solid #4b6072;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--warm-light)}
.day strong{display:block;font-size:17px;color:#fff;margin-bottom:2px}
.day span{font-size:15px;color:#c3ccd3}

/* 結論 */
.answer{background:#fff;border:2px solid var(--night);border-radius:14px;padding:24px 22px;margin:8px 0 0}
.answer h2{font-size:21px;margin-bottom:12px}
.answer ol{margin:0;padding-left:1.3em}
.answer li{margin-bottom:10px}

/* 明細 */
.receipt{background:#fffdf8;border:1px solid #d9cbb8;border-radius:4px;padding:22px 20px 18px;box-shadow:0 10px 0 -6px #e7d9c6,0 20px 0 -12px #ddcdb8;font-size:15px;margin:24px 0 14px}
.receipt .r-title{font-family:"Noto Serif JP",serif;text-align:center;font-size:17px;letter-spacing:.3em;margin-bottom:14px}
.receipt table{margin:0;background:none;font-size:15px}
.receipt th,.receipt td{border:none;border-bottom:1px dashed #d4c5b1;padding:9px 2px;background:none;width:auto;font-weight:400}
.receipt td{text-align:right;white-space:nowrap}
.receipt tr.total th,.receipt tr.total td{border-bottom:none;border-top:2px solid var(--ink);font-weight:700;padding-top:12px}
.receipt .note{font-size:12px;color:#7b6e5e;margin:10px 0 0}

/* ボタン */
.cta{margin:34px 0 8px;text-align:center}
.cta a.btn{display:block;background:var(--moss);color:#fff;text-decoration:none;font-weight:700;font-size:18px;line-height:1.5;padding:18px 16px;border-radius:999px;box-shadow:0 4px 0 var(--moss-dark)}
.cta a.btn:hover{background:var(--moss-dark)}
.cta a.btn:focus-visible{outline:3px solid var(--warm-light);outline-offset:3px}
.cta a.btn small{display:block;font-weight:400;font-size:13px;opacity:.9}
.cta .micro{font-size:13px;color:#6b6f72;margin:10px 0 0}
.sec.night .cta .micro{color:#a9b5bf}

/* 比較表など */
.lp table{background:#fff}
.lp th{background:var(--wood-soft)}
.facts th{width:30%}

/* 手順 */
.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0 0}
.steps li{counter-increment:s;position:relative;padding:14px 0 14px 58px;border-bottom:1px solid #dde3e1}
.steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:40px;height:40px;border-radius:50%;background:var(--night);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps li strong{display:block}
.steps li span{color:#5f6468;font-size:15px}

/* チェックリスト */
.memo{background:#fff;border-radius:10px;padding:20px 20px 8px;border:1px solid #dde3e1}
.memo ul{list-style:none;padding:0;margin:0}
.memo li{position:relative;padding:0 0 14px 34px}
.memo li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border:2px solid var(--moss);border-radius:4px}

.sources{font-size:14px;color:#5f6468}
.sources li{margin-bottom:6px}

@media (max-width:600px){
  .lp{font-size:16px}
  .hero h1{font-size:27px}
  .lp h2{font-size:22px}
  .sec{padding:44px 0}
  .lead-q{font-size:17px}
  .facts th{width:36%}
}

/* 上書き（詳細度の調整） */
.lp .receipt th,.lp .receipt td{background:none}
.lp .sec.night table{color:var(--ink)}
@media (max-width:600px){
  .hero svg{height:250px;width:100%}
}

/* 実写ヒーロー */
.hero.photo{position:relative;min-height:560px;display:flex;align-items:flex-end;background:#16222e}
.hero.photo .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 40%}
.hero.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,22,30,0) 30%,rgba(14,22,30,.55) 58%,rgba(14,22,30,.9) 100%)}
.hero.photo .hero-copy{position:relative;z-index:1;width:100%;padding:0 18px 40px}
.hero.photo h1{font-size:40px;line-height:1.4;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.hero.photo .sub{color:#e8ecef;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero.photo .meta{color:#b8c3cc}
.hero .credit{position:absolute;z-index:1;right:10px;top:8px;margin:0;font-size:11px;color:rgba(255,255,255,.75);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.photo-fig img{display:block;width:100%;height:auto;border-radius:10px}
@media (max-width:600px){
  .hero.photo{min-height:88vh}
  .hero.photo .hero-img{object-position:60% 50%}
  .hero.photo h1{font-size:29px}
}