/* W Body 和歌山 LP v4（症状別・エディトリアル）
   コンセプト: 「整えて、支える。」を静かに語る雑誌の特集ページ。アイボリー×深いティール、見出し明朝・本文ゴシック、英字はCormorantを添えるだけ */
:root{
  --ivory:#faf8f3; --paper:#ffffff; --sand:#f1ebe1; --ink:#1f3a44; --sub:#56707a; --teal:#2e7f87; --teal-deep:#1d5c63;
  --teal-soft:#e7f1f0; --coral:#e07a5f; --rule:#dfe6e3; --line:#06c755; --line-dark:#04a341;
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --serif-en:"Cormorant Garamond","Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--gothic);color:var(--ink);background:#e8eeec;line-height:1.85;font-weight:400;letter-spacing:.02em;padding-bottom:calc(env(safe-area-inset-bottom) + 84px)}
img{display:block;max-width:100%;height:auto}
.page{max-width:520px;margin:0 auto;background:var(--ivory);overflow:hidden}
.nowrap{white-space:nowrap}
.price .num,.chapter .num,ol.points .n,.figure .badge,ol.flow li::before{font-variant-numeric:lining-nums tabular-nums}
p,li,dd,.lead{text-wrap:pretty}
.en{font-family:var(--serif-en);font-style:italic;font-weight:500;letter-spacing:.06em;color:var(--teal)}

/* 上の帯 */
.topbar{background:var(--teal-deep);color:#fff;text-align:center;font-size:clamp(12px,3.3vw,13.5px);padding:7px 10px;letter-spacing:.06em}
.topbar b{font-weight:700;color:#bfe9e6}

/* ヒーロー */
.hero{position:relative;background:var(--paper)}
.hero-img{position:relative;width:100%;height:min(calc(min(100vw,520px)*16/9),68vh);height:min(calc(min(100vw,520px)*16/9),68svh);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%;animation:slowzoom 10s ease-out forwards;transform-origin:var(--fx,50%) var(--fy,50%)}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-img::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper) 94%)}
.hero-head{position:absolute;top:0;left:0;right:0;padding:22px 22px 0;z-index:2}
.hero-head .en{display:block;font-size:15px;text-shadow:0 0 10px #fff,0 0 4px #fff}
.hero h1{margin-top:8px;font-family:var(--mincho);font-weight:800;font-size:clamp(31px,8.8vw,44px);line-height:1.38;letter-spacing:.04em;color:var(--ink);
  text-shadow:0 0 18px rgba(255,255,255,.95),0 0 8px rgba(255,255,255,.95),0 0 3px #fff}
.hero .h1-sub{display:inline-block;margin-top:12px;padding-top:10px;border-top:1px solid var(--ink);font-size:clamp(12.5px,3.5vw,14px);font-weight:500;letter-spacing:.08em;text-shadow:0 0 8px #fff,0 0 3px #fff}
.glow{position:absolute;left:var(--gx,50%);top:var(--gy,50%);width:var(--gs,30%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1;opacity:0;animation:glowin .6s .5s forwards}
.glow::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(224,122,95,.55) 0%,rgba(224,122,95,.25) 45%,rgba(224,122,95,0) 70%);animation:pulse 1.4s ease-in-out infinite}
.glow::after{content:"";position:absolute;inset:20%;border-radius:50%;border:2px solid rgba(224,122,95,.75);animation:ring 1.4s ease-out infinite}
@keyframes glowin{to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.05);opacity:1}}
@keyframes ring{from{transform:scale(.6);opacity:.9}to{transform:scale(1.6);opacity:0}}
.pin{position:absolute;left:50%;top:var(--py,50%);transform:translate(-50%,-100%);z-index:2;background:#fff;border:2px solid var(--teal);border-radius:999px;padding:5px 16px;font-weight:700;font-size:clamp(15px,4.3vw,18px);white-space:nowrap;box-shadow:0 6px 14px rgba(31,58,68,.18)}
.pin::after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--teal)}

/* オファー（1画面目に入れる） */
.offer{position:relative;z-index:3;margin-top:-108px;padding:0 20px 26px;text-align:center}
.tags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.tags span{font-size:12px;font-weight:700;color:var(--teal-deep);background:var(--teal-soft);border-radius:999px;padding:3px 11px;letter-spacing:.04em}
.limited{margin-top:10px;font-size:13px;font-weight:700;color:var(--teal);letter-spacing:.08em}
.price{display:flex;align-items:flex-end;justify-content:center;gap:10px;line-height:1;margin-top:2px}
.price .lbl{text-align:left;font-size:13px;font-weight:700;line-height:1.5}
.price .lbl s{color:#8597a0;font-weight:400}
.price .num{font-family:var(--serif-en);font-weight:600;font-size:clamp(62px,17vw,80px);color:var(--teal-deep);letter-spacing:.01em;line-height:.9}
.price .yenbox{display:flex;flex-direction:column;align-items:center;padding-bottom:4px}
.price .tax{font-size:10.5px;font-weight:700}
.price .yen{font-family:var(--mincho);font-size:clamp(20px,5.6vw,25px);font-weight:800;color:var(--teal-deep)}
.btn-line{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px auto 0;max-width:420px;min-height:62px;border-radius:999px;background:linear-gradient(180deg,var(--line),var(--line-dark));color:#fff;text-decoration:none;font-weight:700;font-size:clamp(17px,5vw,20px);letter-spacing:.06em;box-shadow:0 5px 0 #038a37,0 10px 18px rgba(4,163,65,.28);animation:breathe 2.2s ease-in-out infinite}
.btn-line .ico{background:#fff;color:var(--line);font-size:11px;font-weight:900;border-radius:9px;padding:5px 7px;line-height:1;letter-spacing:0}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.btn-sub{display:inline-block;margin-top:13px;color:var(--ink);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--teal)}
.micro{margin-top:5px;font-size:11px;color:var(--sub)}

/* セクション共通（カードは使わない。罫線・帯・余白で区切る） */
section{padding:56px 24px}
.sand{background:var(--sand)}
.white{background:var(--paper)}
.kicker{display:block;font-family:var(--serif-en);font-style:italic;font-weight:500;font-size:17px;color:var(--teal);letter-spacing:.05em}
h2{font-family:var(--mincho);font-weight:800;font-size:clamp(23px,6.4vw,29px);line-height:1.5;letter-spacing:.04em;margin-top:6px}
.lead{margin-top:16px;font-size:15.5px}
.bleed{margin:26px -24px 0}
.bleed img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cap{display:block;margin-top:8px;padding:0 24px;font-size:11.5px;color:var(--sub)}

/* お悩みリスト */
ul.worries{list-style:none;margin-top:22px;border-top:1px solid var(--rule)}
ul.worries li{position:relative;padding:15px 0 15px 34px;border-bottom:1px solid var(--rule);font-size:15.5px;font-weight:500;line-height:1.6}
ul.worries li::before{content:"";position:absolute;left:2px;top:19px;width:18px;height:18px;border:1.5px solid var(--teal);border-radius:50%}
ul.worries li::after{content:"";position:absolute;left:8px;top:23px;width:5px;height:9px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.answer{margin-top:22px;font-family:var(--mincho);font-weight:700;font-size:18px;line-height:1.7}

/* WHY：図と3つのポイント */
.figure{position:relative;margin:26px auto 0;max-width:420px;background:#faf7f1}
.figure .badge{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--teal-deep);color:#fff;font-family:var(--serif-en);font-weight:600;font-size:17px;display:grid;place-items:center;box-shadow:0 0 0 3px #fff}
ol.points{list-style:none;margin-top:22px}
ol.points li{display:grid;grid-template-columns:44px 1fr;gap:4px 10px;padding:16px 0;border-top:1px solid var(--rule)}
ol.points li:last-child{border-bottom:1px solid var(--rule)}
ol.points .n{grid-row:span 2;font-family:var(--serif-en);font-weight:600;font-size:34px;line-height:1;color:var(--teal)}
ol.points b{font-family:var(--mincho);font-weight:800;font-size:17.5px;line-height:1.4}
ol.points span{font-size:14.5px;color:var(--ink)}

/* アプローチ：章立て */
.chapter{margin-top:40px}
.chapter:first-of-type{margin-top:30px}
.chapter .num{font-family:var(--serif-en);font-weight:500;font-size:46px;line-height:1;color:var(--teal);opacity:.9}
.chapter .num small{font-size:14px;letter-spacing:.2em;margin-left:8px;font-style:italic}
.chapter h3{font-family:var(--mincho);font-weight:800;font-size:clamp(20px,5.6vw,24px);line-height:1.5;margin-top:6px}
.chapter p{margin-top:12px;font-size:15px}

/* 担当 */
.therapist{margin-top:30px;padding:24px 0 0;border-top:1px solid var(--ink)}
.therapist .role{font-size:12.5px;color:var(--sub);letter-spacing:.06em}
.therapist .name{font-family:var(--mincho);font-weight:800;font-size:22px;margin-top:2px}
.therapist p{margin-top:10px;font-size:15px}

/* 途中のCTA帯 */
.ctaband{background:var(--teal-deep);color:#fff;text-align:center;padding:40px 22px 42px}
.ctaband .en{color:#bfe9e6;font-size:17px}
.ctaband h2{color:#fff;font-size:clamp(21px,5.8vw,26px)}
.ctaband p{margin-top:8px;font-size:14px;opacity:.92}

/* 声 */
.voice{padding:22px 0;border-bottom:1px solid var(--rule)}
.voice:first-of-type{margin-top:18px;border-top:1px solid var(--rule)}
.voice .who{font-size:12.5px;color:var(--sub)}
.voice .stars{color:#c9a24b;letter-spacing:.12em;font-size:12px;margin-left:6px}
.voice h3{font-family:var(--mincho);font-weight:800;font-size:17.5px;line-height:1.55;margin-top:6px}
.voice p{font-size:14.5px;margin-top:8px}
.note{margin-top:12px;font-size:11px;color:var(--sub)}

/* 流れ */
ol.flow{list-style:none;counter-reset:f;margin-top:22px}
ol.flow li{counter-increment:f;position:relative;padding:0 0 20px 50px;margin-left:16px;border-left:1px solid var(--teal)}
ol.flow li:last-child{border-left-color:transparent;padding-bottom:0}
ol.flow li::before{content:counter(f,decimal-leading-zero);position:absolute;left:-17px;top:-3px;width:34px;height:34px;border-radius:50%;background:var(--ivory);border:1px solid var(--teal);color:var(--teal);font-family:var(--serif-en);font-weight:600;font-size:15px;display:grid;place-items:center}
.sand ol.flow li::before{background:var(--sand)}
ol.flow b{display:block;font-family:var(--mincho);font-weight:800;font-size:16.5px}
ol.flow span{display:block;font-size:14px;color:var(--sub)}

/* 料金（CTAなのでここだけ枠を使う） */
.pricebox{margin-top:28px;text-align:center;padding:26px 18px 28px;background:var(--paper);border:1px solid var(--teal);border-radius:4px}
.pricebox .incl{margin-top:12px;font-size:13.5px;color:var(--sub)}
.pricebox .bonus{margin-top:4px;font-weight:700;font-size:13.5px}

/* FAQ */
dl.faq{margin-top:18px}
dl.faq dt{font-family:var(--mincho);font-weight:800;font-size:16.5px;line-height:1.55;padding:18px 0 4px 30px;border-top:1px solid var(--rule);position:relative}
dl.faq dt::before{content:"Q";position:absolute;left:0;top:14px;font-family:var(--serif-en);font-style:italic;font-weight:600;font-size:22px;color:var(--teal)}
dl.faq dd{font-size:14.5px;padding:0 0 18px 30px}

/* アクセス */
.access{margin-top:16px;font-size:15px}
.access .addr{font-family:var(--mincho);font-weight:800;font-size:17px}
.fallback{margin-top:14px;font-size:12.5px;color:var(--sub);text-align:center;line-height:1.7}
.fallback button{font:inherit;font-weight:700;color:var(--ink);background:var(--teal-soft);border:1px solid var(--rule);border-radius:6px;padding:2px 10px;margin-left:4px}
.related{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule);font-size:13.5px}
.related a{color:var(--teal-deep);font-weight:700;margin-right:12px;text-underline-offset:3px}
footer{padding:28px 22px 32px;text-align:center;font-size:12px;color:var(--sub);background:var(--paper)}

/* 下の固定バー */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(env(safe-area-inset-bottom) + 10px);background:rgba(250,248,243,.97);box-shadow:0 -4px 16px rgba(31,58,68,.12);transform:translateY(110%);transition:transform .3s}
.sticky.show{transform:none}
.sticky .btn-line{margin:0 auto;min-height:54px;font-size:17px;animation:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}