/* =========================================================
   LPデザインの型「手紙（ナチュラル）」
   元: 医師が書く手紙型のプログラム案内ページ（2026-10 自社制作）の作り。
   クリーム地に細かい水玉、オリーブ緑の見出し、オレンジの帯マーカー、丸ゴシック。
   先生が一人に語りかける長い手紙を、カード・表・価格の内訳で読みやすく区切る。
   色は下の5色を置き換えるだけで変わる（検索して一括置換）：
     オレンジ #e06800 ／ 濃い緑 #3f4d10 ／ 緑 #5c7315 ／ 地 #fbfaf1 ／ 薄い緑 #f4f6e4
   ========================================================= */

.dsl-outer{background:#fff;width:100%;overflow-x:hidden;}
.dsl-outer,.dsl-outer *{box-sizing:border-box;}

.dsl{
  font-family:'Zen Maru Gothic',sans-serif;
  width:100%;max-width:640px;min-width:0;margin:0 auto;
  background-color:#fbfaf1;
  background-image:radial-gradient(circle,#f1f2e0 1.5px,transparent 1.5px),radial-gradient(circle,#f1f2e0 1px,transparent 1px);
  background-size:40px 40px,20px 20px;
  background-position:0 0,10px 10px;
  color:#3d3d2b;line-height:1.85;font-size:18px;
  text-wrap:pretty;word-break:auto-phrase;
  padding-bottom:96px;
}
.dsl *{font-family:'Zen Maru Gothic',sans-serif;}
.dsl img{max-width:100%;display:block;}
.dsl p{margin:0 0 1.5em;}
.dsl p:last-child{margin-bottom:0;}
.dsl b,.dsl strong{font-weight:700;color:#2f3a0c;}

/* 帯マーカー */
.dsl .hl-o{background:#e06800;color:#fff;padding:.1em .4em;border-radius:3px;line-height:1.9;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.dsl .hl-w{background:#fbfaf1;color:#4a5a18;padding:.1em .4em;border-radius:3px;line-height:1.9;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.dsl .red{color:#c25700;font-weight:700;}
.dsl .quiet{color:#8b8b73;font-size:15px;line-height:1.85;}

/* トップ画像 */
.dsl .hero{width:100%;}
.dsl .hero img{width:100%;height:auto;display:block;}

/* セクション */
.dsl .sec{padding:52px 18px;}
.dsl .sec-in{max-width:640px;margin:0 auto;}
.dsl .eyebrow{display:inline-block;font-size:17px;font-weight:700;letter-spacing:.1em;color:#e06800;border-bottom:1.5px solid #e06800;padding-bottom:3px;margin-bottom:16px;}
.dsl h1{font-size:32px;font-weight:900;color:#3f4d10;line-height:1.55;margin:0 0 24px;}
.dsl h2{font-size:29px;font-weight:900;color:#3f4d10;line-height:1.55;margin:0 0 24px;}
.dsl h3{font-size:22px;font-weight:900;color:#3f4d10;line-height:1.65;margin:0 0 12px;}
.dsl h4{font-size:21px;font-weight:900;color:#3f4d10;line-height:1.6;margin:0 0 10px;}
.dsl hr{border:none;border-top:1px dashed #d5d8bb;margin:0;}

/* 白カード＋左オレンジ罫 */
.dsl .box{background:#fbfaf1;border:1px solid #ebecd8;border-radius:14px;padding:24px 22px;margin:22px 0;font-size:18px;color:#4f5040;line-height:1.9;}
.dsl .box-title{font-weight:900;color:#e06800;font-size:19px;line-height:1.7;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed rgba(224,104,0,.35);}
.dsl .box p:last-child{margin-bottom:0;}

/* 読者の声 */
.dsl .voice{margin:22px 0;}
.dsl .voice .v{background:#fbfaf1;border:1px solid #ebecd8;border-radius:10px;padding:15px 18px;margin-bottom:10px;font-size:17px;line-height:1.9;color:#4f5040;}
.dsl .voice .v:before{content:"「";color:#bcbfa0;}
.dsl .voice .v:after{content:"」";color:#bcbfa0;}

/* 引用 */
.dsl blockquote{margin:22px 0;padding:24px 22px;background:#f4f6e4;border-radius:14px;font-size:17.5px;line-height:1.95;color:#4f5040;position:relative;}
.dsl blockquote:before{content:"“";display:block;font-family:Georgia,serif;font-size:42px;line-height:.6;color:#c3ce93;margin-bottom:6px;}

/* 箇条書き */
.dsl ul{margin:0 0 1.5em;padding:0!important;list-style:none!important;}
.dsl ul li{list-style:none!important;padding:13px 0;border-bottom:1px dashed rgba(63,77,16,.16);font-size:18px;line-height:1.85;}
.dsl ul li:last-child{border-bottom:none;}
.dsl ul li:before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;background:#e06800;margin-right:11px;position:relative;top:-3px;}

/* カード共通 */
.dsl .sp,.dsl .step,.dsl .pillar,.dsl .case{background:#fbfaf1;border:1px solid #ebecd8;border-radius:14px;padding:24px 20px;margin-bottom:16px;}
.dsl .sp-photo{width:100%;border-radius:10px;margin-bottom:16px;}
.dsl .sp-name{font-size:23px;font-weight:900;color:#3f4d10;margin-bottom:4px;line-height:1.5;}
.dsl .sp-name span{font-size:14px;font-weight:500;color:#e06800;margin-left:8px;}
.dsl .sp p,.dsl .step p,.dsl .pillar p,.dsl .case p{font-size:17.5px;line-height:1.95;color:#4f5040;margin:0 0 1em;}
.dsl .sp p:last-child,.dsl .step p:last-child,.dsl .pillar p:last-child,.dsl .case p:last-child{margin-bottom:0;}
.dsl .step .lbl,.dsl .pillar .no,.dsl .case .tag{display:inline-block;background:#e06800;color:#fff;font-size:14px;font-weight:700;padding:5px 14px;border-radius:50px;margin-bottom:12px;letter-spacing:.06em;}
.dsl .pillar .no{background:#5c7315;}
.dsl .case .tag{background:#5c7315;}
.dsl .case .said{background:#f7f8ea;border-radius:10px;padding:18px;margin-top:14px;font-size:17.5px;line-height:1.95;color:#3d3d2b;}

/* 3ヶ月後 */
.dsl .future{background:#fbfaf1;border:2px solid #5c7315;border-radius:14px;padding:24px 20px;margin:22px 0;}
.dsl .future h3{color:#5c7315;}
.dsl .future ul li:before{background:#5c7315;}
.dsl .future p{margin:16px 0 0;font-size:17px;line-height:1.95;color:#6b6c58;}

/* 価格表 */
.dsl .pt{width:100%;border-collapse:collapse;font-size:16.5px;margin:0 0 6px;}
.dsl .pt td{padding:13px 0;border-bottom:1px dashed rgba(63,77,16,.16);line-height:1.7;vertical-align:top;}
.dsl .pt td.n{text-align:right;white-space:nowrap;padding-left:12px;font-weight:700;color:#3f4d10;}
.dsl .pt tr:last-child td{border-bottom:none;}

/* 合計 */
.dsl .total{text-align:center;background:#fbfaf1;border:1px solid #ebecd8;border-radius:14px;padding:26px 18px;margin:22px 0;}
.dsl .total .lb{font-size:17px;color:#6b6c58;font-weight:700;margin-bottom:6px;line-height:1.7;}
.dsl .total .yen{font-size:42px;font-weight:900;color:#3f4d10;line-height:1.25;}
.dsl .total .yen small{font-size:22px;font-weight:900;margin-left:2px;}
.dsl .total .cap{font-size:16px;color:#8b8b73;margin-top:10px;line-height:1.85;}

/* 合わせて */
.dsl .combine{background:#fbfaf1;border:1px solid #ebecd8;border-radius:14px;padding:22px 20px;margin:22px 0;}
.dsl .combine .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px dashed rgba(63,77,16,.16);font-size:17px;line-height:1.8;}
.dsl .combine .row span:last-child{white-space:nowrap;font-weight:700;color:#3f4d10;}
.dsl .combine .row .strike{color:#a9ab90;text-decoration:line-through;font-weight:400;margin-right:8px;}
.dsl .combine .grand{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;padding-top:16px;border-top:2px solid #e3e6c9;}
.dsl .combine .grand span:first-child{font-size:18px;font-weight:900;color:#3f4d10;}
.dsl .combine .grand span:last-child{font-size:28px;font-weight:900;white-space:nowrap;line-height:1.25;color:#3f4d10;}

/* 価格 */
.dsl .bigprice{text-align:center;background:#fbfaf1;border:3px solid #e06800;border-radius:14px;padding:28px 20px;margin:0 0 20px;}
.dsl .bigprice .was{color:#8b8b73;font-size:17px;line-height:1.8;}
.dsl .bigprice .now{font-size:46px;font-weight:900;color:#e06800;line-height:1.2;margin-top:4px;}
.dsl .perday{border-top:1px dashed #dfe2c4;margin-top:20px;padding-top:18px;}
.dsl .perday .big{font-size:21px;font-weight:900;color:#3f4d10;line-height:1.6;}
.dsl .perday .sm{font-size:15px;color:#8b8b73;line-height:1.85;margin-top:8px;}

/* 比較表 */
.dsl .cmpwrap{margin:22px 0;}
.dsl .cmp{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px;background:#fbfaf1;border-radius:12px;overflow:hidden;}
.dsl .cmp th,.dsl .cmp td{border:1px solid #e8ead4;padding:11px 3px;text-align:center;line-height:1.55;}
.dsl .cmp thead th{background:#f4f6e4;font-weight:700;color:#5c7315;font-size:12.5px;line-height:1.45;}
.dsl .cmp thead th.me{background:#e06800;color:#fff;}
.dsl .cmp tbody th{text-align:left;font-weight:500;color:#4f5040;padding:11px 8px 11px 10px;font-size:13px;}
.dsl .cmp td{font-size:17px;}
.dsl .cmp td.me{background:#fdf3e6;font-weight:700;color:#e06800;}
.dsl .cmp .o{color:#5c7315;font-weight:700;}
.dsl .cmp .x{color:#c9cbb4;}
.dsl .cmp tbody tr.key th{font-weight:700;color:#e06800;}
.dsl .cmp tbody tr.key td.me{font-size:19px;}

/* 情報テーブル */
.dsl .info{width:100%;border-collapse:collapse;font-size:17px;background:#fbfaf1;border-radius:12px;overflow:hidden;margin:0 0 1.5em;}
.dsl .info th,.dsl .info td{padding:15px 14px;text-align:left;border-bottom:1px dashed rgba(63,77,16,.16);vertical-align:top;line-height:1.85;}
.dsl .info th{width:82px;background:#f4f6e4;font-weight:700;color:#5c7315;font-size:15px;white-space:nowrap;}
.dsl .info tr:last-child th,.dsl .info tr:last-child td{border-bottom:none;}

/* FAQ */
.dsl .faq{background:#fbfaf1;border:1px solid #ebecd8;border-radius:12px;padding:20px;margin-bottom:12px;}
.dsl .faq .q{font-size:18px;font-weight:700;line-height:1.75;margin-bottom:9px;padding-left:30px;position:relative;color:#3f4d10;}
.dsl .faq .q:before{content:"Q";position:absolute;left:0;top:0;color:#e06800;font-weight:900;font-size:19px;}
.dsl .faq .a{font-size:17px;line-height:1.95;color:#4f5040;padding-left:30px;position:relative;}
.dsl .faq .a:before{content:"A";position:absolute;left:0;top:0;color:#5c7315;font-weight:900;font-size:19px;}

/* CTA */
.dsl .cta{padding:30px 18px;background:#e8ebd4;text-align:center;}
.dsl .btn{display:block;background:#e06800;color:#fff!important;text-align:center;padding:20px 16px;border-radius:50px;font-weight:700;font-size:19px;text-decoration:none!important;line-height:1.6;max-width:420px;margin:0 auto;box-shadow:0 4px 14px rgba(224,104,0,.24);}
.dsl .btn-note{font-size:15px;color:#7d7e66;line-height:1.85;margin-top:12px;text-align:center;}

/* 追伸 */
.dsl .ps{margin-top:20px;background:#fbfaf1;border:1px solid #ebecd8;border-radius:14px;padding:24px 22px;font-size:17px;line-height:1.95;color:#4f5040;}
.dsl .ps-title{font-weight:900;color:#5c7315;font-size:18px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed rgba(92,115,21,.35);}
.dsl .ps p:last-child{margin-bottom:0;}

/* 注意書き */
.dsl .note{font-size:14px;line-height:1.9;color:#8b8b73;padding:26px 18px 34px;}
.dsl .signature{padding:26px 18px 0;font-size:16px;color:#6b6c58;line-height:1.9;}

/* 固定CTA */
.dsl-sticky{position:fixed;bottom:0;left:0;right:0;background:#fbfaf1;padding:12px 18px;box-shadow:0 -3px 16px rgba(0,0,0,.1);z-index:9999;transform:translateY(110%);transition:transform .3s;display:flex;justify-content:center;}
.dsl-sticky.on{transform:translateY(0);}
.dsl-sticky a{display:block;width:100%;max-width:400px;background:#e06800;color:#fff!important;text-align:center;padding:16px;border-radius:50px;font-weight:700;font-size:17px;text-decoration:none!important;font-family:'Zen Maru Gothic',sans-serif;}

@media(max-width:400px){
  .dsl{font-size:17px;}
  .dsl h1{font-size:27px;}
  .dsl h2{font-size:25px;}
  .dsl .sec{padding:44px 16px;}
  .dsl .total .yen{font-size:36px;}
  .dsl .bigprice .now{font-size:40px;}
  .dsl .combine .grand span:last-child{font-size:24px;}
}
.dsl .sec-b{background:#f4f6e4;}

/* 事例のビフォーアフター */
.dsl .ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px;}
.dsl .ba figure{margin:0;}
.dsl .ba img{width:100%;border-radius:10px;display:block;}
.dsl .ba figcaption{margin-top:8px;padding:7px;border-radius:6px;font-size:15px;font-weight:700;color:#fff;text-align:center;letter-spacing:.06em;}
.dsl .ba .b figcaption{background:#5c7315;}
.dsl .ba .a figcaption{background:#e06800;}
.dsl .shot{margin:0 0 12px;}
.dsl .shot img{width:100%;border-radius:10px;display:block;}
.dsl .fignote{font-size:14px;color:#8b8b73;line-height:1.85;margin:0 0 16px;}
/* 図版 */
.dsl .box .fig{margin:0 0 14px;}
.dsl .fig{margin:20px 0;}
.dsl .fig img{width:100%;border-radius:12px;display:block;}

/* 1行に収める見出し（画面幅に合わせて縮む） */
.dsl h2.oneline{font-size:clamp(18px,6vw,29px);white-space:nowrap;}

/* クロレラミン 成分ポップアップ（開いたときに body 直下へ移すので .dsl を付けない） */
}

body{margin:0;background:#fff;}
.dsl .vsec{padding:28px 18px 36px;}
.dsl .vwrap{border-radius:14px;overflow:hidden;background:#000;box-shadow:0 6px 20px rgba(0,0,0,.12);}
.dsl .vwrap video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;}
.dsl .vnote{margin:12px 0 0;text-align:center;}
.dsl .gift-band{margin:20px 0 0;background:#fdf3e6;border:2px solid #e06800;border-radius:14px;padding:16px 18px;text-align:center;font-size:17px;line-height:1.8;color:#3d3d2b;}
.dsl .gift-band b{color:#e06800;font-size:20px;}
.dsl .gift-band.off{background:#f4f6e4;border-color:#d5d8bb;font-size:15.5px;}

/* 見本だけの部品名札（本番では消す） */
.part-label{margin:0;padding:6px 12px;font:700 11px/1.4 sans-serif;color:#fff;background:#555;}
.part-label b{display:inline-block;margin-right:8px;padding:0 6px;background:#000;border-radius:3px;}
.part-label code{margin-left:8px;padding:0 6px;background:#777;border-radius:3px;font-size:11px;}
/* 写真の仮置き（写真が無ければ薄い緑の面） */
.dsl .ph{display:grid;place-items:center;aspect-ratio:var(--r,4/3);border-radius:10px;background:#e8ebd4;color:#8b8b73;font-size:13px;}
.dsl .sp .ph{margin-bottom:16px;}
/* 表題（写真の代わりに文字で作るトップ） */
.dsl .top{padding:40px 18px 8px;text-align:center;}
.dsl .top .for{display:inline-block;padding:4px 16px;border-radius:50px;background:#fff;border:1px solid #ebecd8;font-size:14px;font-weight:700;color:#5c7315;margin-bottom:14px;}
.dsl .top .name{font-size:clamp(30px,9vw,44px);font-weight:900;color:#e06800;line-height:1.3;margin:0 0 8px;}
.dsl .top .name small{display:block;font-size:.5em;color:#3f4d10;}
.dsl .top .tagline{font-size:16px;font-weight:700;color:#3f4d10;letter-spacing:.1em;}
