/* =========================================================
   チャレンジドジム LP
   1. トークン  2. 基本  3. 共通部品  4. セクション  5. PC(1024px〜)
   余白は必ずトークン(--sec-y / --head-gap / --block-gap / --card-gap)を使う
   ========================================================= */

/* ---------- 1. トークン ---------- */
:root{
  /* 色 */
  --main:#118a86;--main2:#0c6f70;--deep:#0b3336;--acc:#ffe14a;--accInk:#0b3140;
  --pale:#eef6f5;--ink:#1b2a30;--sub:#4b5c61;--line:#cfe3e3;--danger:#e0584d;

  /* 文字 */
  --ff-disp:"BIZ UDPGothic","Hiragino Kaku Gothic ProN",sans-serif;
  --ff-body:"BIZ UDPGothic","Hiragino Kaku Gothic ProN",sans-serif;
  --ff-num:"Zen Kaku Gothic New","BIZ UDPGothic",sans-serif;   /* 大きな数字だけ */
  --ff-hand:"Caveat",cursive;

  /* 幅: ヘッダーとコンテンツは同じ箱(--container から左右 --gutter を引いた幅)に揃える */
  --container:1200px;
  --gutter:22px;
  --measure:40em;           /* 段落の最大幅 */

  /* 余白(SP) */
  --sec-y:80px;             /* セクションの上下 */
  --head-gap:32px;          /* 見出し → 中身 */
  --block-gap:40px;         /* セクション内のまとまり同士 */
  --card-gap:12px;          /* カード同士 */
  --card-pad:20px;          /* カードの内側 */
  --radius:16px;
  --shadow:0 4px 16px rgba(11,49,64,.08);
}

/* ---------- 2. 基本 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ff-body);color:var(--ink);background:#fff;line-height:1.8;letter-spacing:.05em;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
section{scroll-margin-top:88px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. 共通部品 ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec-y) 0}
.bg-pale{background:var(--pale)}
.bg-teal{background:linear-gradient(165deg,var(--main) 0%,var(--main2) 75%);color:#fff}

/* 見出しまわり: eyebrow → sec-title → (sec-lead) → 中身 */
.eyebrow{display:inline-block;font-family:var(--ff-hand);font-size:22px;line-height:1.2;color:var(--main);transform:rotate(-4deg);letter-spacing:.02em;margin-bottom:6px}
.sec-title{font-family:var(--ff-disp);font-weight:700;font-size:clamp(24px,6.4vw,30px);line-height:1.45;letter-spacing:.06em;color:var(--deep);margin-bottom:var(--head-gap)}
.sec-title:has(+ .sec-lead){margin-bottom:16px}
.sec-lead{max-width:var(--measure);font-size:14.5px;margin-bottom:var(--head-gap)}
.bg-teal .eyebrow,.bg-teal .sec-title{color:#fff}
.mk{text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:.2em;text-underline-offset:.18em;text-decoration-skip-ink:none}

.card{background:#fff;border-radius:var(--radius);padding:var(--card-pad);box-shadow:var(--shadow)}
.note{font-size:12px;color:var(--sub);margin-top:16px}
.bg-teal .note{color:rgba(255,255,255,.85)}

.btn-cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--acc);color:var(--accInk);font-weight:700;font-size:16px;padding:16px 18px 16px 22px;border-radius:99px;box-shadow:0 6px 0 rgba(0,0,0,.18);text-decoration:none;letter-spacing:.05em;border:0;font-family:inherit;cursor:pointer}
.btn-cta i{font-style:normal;flex:none;width:30px;height:30px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-size:15px}
.btn-cta--inline{max-width:440px;margin:var(--block-gap) auto 0}

/* 確認待ち */
.pending{margin-top:var(--block-gap);padding:12px 14px;border-radius:10px;font-size:12.5px;font-weight:700;color:#7a4a00;background:repeating-linear-gradient(-45deg,#fff6d6 0 10px,#ffeeb3 10px 20px);border:1.5px dashed #d9a400}
.pending-box{min-height:160px;display:grid;place-items:center;text-align:center}
.pending-tag{display:inline-block;font-size:11px;font-weight:700;color:#7a4a00;background:#ffeeb3;border:1px dashed #d9a400;border-radius:6px;padding:0 6px;vertical-align:middle}

/* 縦書き(数字と「〜」は横書きの箱で列の中央に置く) */
.num{writing-mode:horizontal-tb;display:inline-block;width:1.3em;text-align:center;letter-spacing:-.02em;line-height:1.25;margin-bottom:.12em}
.wave{writing-mode:horizontal-tb;display:inline-block;width:1.3em;text-align:center;transform:rotate(90deg);line-height:1;margin:.1em 0}

/* ---------- 4. セクション ---------- */

/* ヘッダー: コンテンツと同じ幅の箱 */
.hd{position:fixed;top:10px;left:0;right:0;z-index:50;width:calc(100% - 20px);max-width:calc(var(--container) - var(--gutter) * 2);margin:0 auto;display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:14px;padding:8px 10px 8px 12px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.hd-logo img{height:30px;width:auto}
.hd-btn{background:var(--acc);color:var(--accInk);font-weight:700;font-size:12px;padding:9px 14px;border-radius:99px;text-decoration:none}

/* 01 FV */
.fv{position:relative;background:linear-gradient(165deg,var(--main) 0%,var(--main2) 70%);color:#fff;padding:84px 0 calc(var(--sec-y) + 10px);overflow:hidden}
.fv::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.07);right:-190px;top:40px}
.fv::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-60px;height:110px;background:#fff;border-radius:50% 50% 0 0}
.fv-in{position:relative;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.fv h1{position:relative;font-family:var(--ff-disp);font-weight:700;font-size:33px;line-height:1.38;letter-spacing:.06em;margin-right:24px}
.fv h1 .s{display:block;font-size:22px;line-height:1.45}
.fv h1 br{display:none}
.fv h1 .mk{display:inline-block;margin-top:8px;line-height:1.3}
.tate{position:absolute;right:12px;top:0;writing-mode:vertical-rl;font-size:18px;font-weight:700;letter-spacing:.1em;line-height:1.3;text-shadow:0 2px 8px rgba(0,0,0,.18)}
.tate .num{font-family:var(--ff-num);font-weight:900;color:var(--acc);font-size:1.4em;width:1.2em;line-height:1.15}
.tate b{font-size:1.1em}
.fv-photos{position:relative;height:300px;margin:80px calc(-1 * var(--gutter)) 0}
.fv-p1,.fv-p2{position:absolute;display:block;overflow:hidden;border:4px solid #fff}
.fv-p1 img,.fv-p2 img{width:100%;height:100%;object-fit:cover}
.fv-p1{left:var(--gutter);right:52px;top:0;height:250px;border-radius:22px;transform:rotate(-2deg)}
.fv-p1 img{object-position:30% 0}
.fv-p2{right:12px;bottom:0;width:130px;height:100px;border-radius:18px;transform:rotate(4deg);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.bub{position:absolute;left:64px;top:-54px;background:#fff;color:var(--deep);font-weight:700;font-size:13px;padding:9px 14px;border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.bub::after{content:"";position:absolute;left:22px;bottom:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.fv-lead{margin-top:18px;font-size:14px;font-weight:400;line-height:1.9}
.fv-lead b{font-family:var(--ff-num);font-weight:900;font-size:26px;line-height:1.2;color:var(--acc)}
.fv-tags{list-style:none;padding:0;margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.fv-tags li{font-size:11px;font-weight:400;line-height:1.4;border:1.5px solid rgba(255,255,255,.7);padding:5px 10px 5px calc(10px + .05em);border-radius:6px}
.fv .btn-cta{margin-top:24px}
.fv-tel{position:relative;z-index:1;display:block;text-align:center;margin-top:24px;font-size:13px;font-weight:700;color:#fff;text-underline-offset:4px}
.fv-area{position:relative;z-index:1;text-align:center;font-size:12px;margin-top:8px;opacity:.85}

/* 02 3本柱 */
.pil{padding-top:calc(var(--sec-y) * .5)}
.pil-list{display:grid;gap:0}
.big{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:2px dashed var(--line)}
.big:first-child{border-top:2px dashed var(--line)}
.big .n{font-family:var(--ff-num);font-weight:900;font-size:58px;line-height:.9;color:var(--main);letter-spacing:0;white-space:nowrap;min-width:124px}
.big .n small{font-size:22px;letter-spacing:0}
.big:nth-child(3) .n{color:var(--main2)}
.big h3{font-size:15px;color:var(--deep);line-height:1.5}
.big .t p{margin-top:4px;font-size:13px;font-weight:400;line-height:1.7}

/* 03 共感 */
.emp{overflow:hidden}
.emp-in{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:16px}
.emp-blob{display:none}
.emp-vt{position:relative;z-index:0;grid-column:1;grid-row:1;justify-self:start;align-self:start;margin-top:24px;writing-mode:vertical-rl;color:#fff;font-family:var(--ff-disp);font-weight:700;font-size:24px;line-height:1.5;letter-spacing:.06em;width:max-content}
/* 図形は文字の中心に合わせて描く(文字の量が変わっても中央に来る) */
.emp-vt::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:calc(100% + 64px);height:calc(100% + 70px);transform:translate(-50%,-50%);background:var(--deep);border-radius:48% 52% 60% 40%/40% 45% 55% 60%}
.emp-vt em{font-style:normal;color:var(--acc)}
.emp-lead{position:relative;grid-column:2;grid-row:1;font-size:13.5px;font-weight:400;line-height:1.9;padding-top:4px}
.emp-list{grid-column:1/-1;list-style:none;padding:0;margin-top:var(--block-gap);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap)}
.emp-list>*{min-width:0}
.q{background:#fff;border-radius:var(--radius);padding:14px;font-size:13px;font-weight:400;line-height:1.6;box-shadow:var(--shadow)}
.q-hi{grid-column:1/-1;font-size:14.5px;border-left:5px solid var(--acc)}
.q-hi:nth-child(2){margin-left:18px}
.q .h{font-family:var(--ff-hand);color:var(--danger);font-size:17px;margin-right:4px}
.emp-close{grid-column:1/-1;margin-top:var(--block-gap);text-align:center;font-family:var(--ff-disp);font-weight:700;font-size:18px;line-height:1.7;color:var(--deep);letter-spacing:.06em}

/* 04 空白期間 */
.band{display:grid;grid-template-columns:1fr 1.1fr 1.3fr 1fr;font-size:10.5px;font-weight:700;text-align:center;line-height:1.35;align-items:stretch}
.band>div{padding:14px 4px;display:grid;place-items:center}
.band .b1{background:rgba(255,255,255,.18);border-radius:12px 0 0 12px}
.band .b2{background:rgba(255,255,255,.28)}
.band .gap{position:relative;z-index:1;background:var(--acc);color:var(--deep);font-size:14px;font-weight:700;letter-spacing:.06em;transform:scale(1.08);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.band .b4{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border-radius:0 12px 12px 0}
/* 「自立訓練」は空白期間の真下(帯の列比 1:1.1:1.3:1 → 中心は62.5%) */
.band-fill{position:relative;left:62.5%;transform:translateX(-50%);width:200px;margin-top:16px;background:#fff;color:var(--main2);border-radius:10px;padding:10px;text-align:center;font-size:12px;line-height:1.5}
.band-fill::before{content:"";position:absolute;left:50%;top:-10px;transform:translateX(-50%);border:10px solid transparent;border-bottom-color:#fff;border-top:0}
.band-fill b{display:block;font-size:13px}
.band-fill span{display:block;white-space:nowrap;font-size:10.5px;font-weight:700}
.gap-text{margin-top:var(--block-gap);max-width:var(--measure)}
.gap-text p{font-size:14px}
.gap-text p+p{margin-top:12px}
.gap-text b{color:var(--acc)}

/* 05 とは */
.about-text p{font-size:14.5px;max-width:var(--measure)}
.about-text p+p{margin-top:14px}
.def{margin-top:var(--block-gap);border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;font-size:12.5px;line-height:1.8;background:var(--pale)}

/* 06 3つの理由: 端まで広げた写真に、本文の面を重ねる */
.reason+.reason{margin-top:calc(var(--block-gap) + 16px)}
.reason-visual{position:relative;margin:0 calc(-1 * var(--gutter))}
.reason-visual img{width:100%;aspect-ratio:16/10;object-fit:cover}
.reason-tag{position:absolute;top:-12px;left:var(--gutter);writing-mode:vertical-rl;background:var(--acc);color:var(--deep);font-family:var(--ff-disp);font-weight:700;font-size:14px;letter-spacing:.2em;padding:12px 7px 10px;border-radius:0 0 12px 12px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.reason-tag .num{font-family:var(--ff-num);font-weight:900;font-size:30px;line-height:1.1;margin:6px 0 0;width:1.2em}
.reason:nth-child(even) .reason-tag{left:auto;right:var(--gutter)}
.reason-body{position:relative;background:#fff;border-radius:var(--radius);padding:24px var(--card-pad);margin:-56px 0 0 28px;box-shadow:0 10px 30px rgba(11,51,54,.12)}
.reason:nth-child(even) .reason-body{margin:-56px 28px 0 0}
.reason-body h3{font-family:var(--ff-disp);font-weight:700;font-size:20px;line-height:1.5;letter-spacing:.06em;color:var(--deep);margin-bottom:12px}
.reason-body p{font-size:14px}
.reason-body p+p{margin-top:10px}

/* 07 プログラム */
.prog-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap);counter-reset:p}
.prog-list>*{min-width:0}
.prog-list li{counter-increment:p;background:var(--pale);border-radius:var(--radius);padding:16px 14px}
.prog-list li::before{content:counter(p,decimal-leading-zero);font-family:var(--ff-num);font-weight:900;color:var(--main);font-size:22px;line-height:1}
.prog-list .prog-main,.prog-list .prog-key{grid-column:1/-1}
.prog-list .prog-key{background:var(--deep);color:#fff}
.prog-list .prog-key h3,.prog-list .prog-key::before{color:var(--acc)}
.prog-list .prog-key .who{color:#9fd8d5}
.prog-list h3{font-size:14.5px;line-height:1.5;margin:6px 0 2px;color:var(--deep)}
.prog-list .who{font-size:11px;font-weight:700;color:var(--main);margin-bottom:6px}
.prog-list p{font-size:12.5px;line-height:1.7}

/* 08 設備 */
.equip-list{display:grid;gap:var(--card-gap)}
.equip-list>div{background:#fff;border-radius:var(--radius);padding:var(--card-pad);box-shadow:var(--shadow)}
.equip-list dt{font-weight:700;font-size:15px;color:var(--deep)}
.equip-list dd{margin-top:4px;font-size:13px}
.equip-list .where{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#fff;background:var(--main);border-radius:6px;padding:1px 8px}

/* 09 雰囲気 */
.life .sec-lead{margin-bottom:0}

/* 10 1日の流れ */
.day-grid{display:grid;gap:var(--card-gap)}
.day-block h3{font-family:var(--ff-disp);font-weight:700;font-size:17px;color:var(--main2);letter-spacing:.06em;margin-bottom:12px}
.tl{list-style:none;padding:0}
.tl li{display:grid;grid-template-columns:58px 1fr;gap:10px;padding-bottom:14px;position:relative}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:52px;top:8px;bottom:-4px;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl time{font-family:var(--ff-num);font-weight:900;font-size:17px;color:var(--main);letter-spacing:0}
.tl p{font-weight:700;font-size:14px}
.tl p span{display:block;font-weight:400;font-size:12.5px;color:var(--sub)}

/* 11 料金 */
.price-text p{font-size:14.5px;max-width:var(--measure)}

/* 12 利用者の声 */
.voices{display:grid;gap:var(--card-gap)}
.voices>*{min-width:0}
.vc{color:var(--ink)}
.vc:nth-child(2){margin-left:18px}
.vc:nth-child(3){margin-right:18px}
.vc-who{font-weight:700;color:var(--deep)}
.vc-who span{margin-left:8px;font-size:12px;font-weight:700;color:var(--main)}
.vc-before{margin:6px 0 10px;font-size:12.5px;color:var(--sub)}
.vc-after{font-family:var(--ff-disp);font-weight:700;font-size:17px;line-height:1.6;letter-spacing:.06em;color:var(--deep);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:.2em;text-underline-offset:.18em;text-decoration-skip-ink:none}

/* 13 利用開始までの流れ */
.st{list-style:none;padding:0}
.st li{border-left:3px solid var(--line);padding:0 0 20px 18px;position:relative}
.st li::before{content:"";position:absolute;left:-9px;top:4px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--main)}
.st .st0{background:var(--pale);border-radius:0 var(--radius) var(--radius) 0;padding:16px 16px 16px 18px;margin-bottom:24px;border-left-color:var(--acc)}
.st .st0::before{background:var(--acc);border-color:var(--deep)}
.st-no{font-family:var(--ff-disp);font-weight:700;color:var(--main);font-size:13px;letter-spacing:.06em}
.st h3{margin:2px 0 4px;font-size:16px;color:var(--deep)}
.st p:not(.st-no){font-size:13.5px}
.steps-cta{margin-top:var(--block-gap);text-align:center;font-weight:700;color:var(--deep)}
.steps-cta+.btn-cta--inline{margin-top:16px}

/* 14 店舗 */
.shop-list{display:grid;gap:var(--card-gap)}
.shop-list>*{min-width:0}
.shop{border-top:6px solid var(--main)}
.shop h3{margin-bottom:8px;font-size:16px;line-height:1.5;color:var(--deep)}
.shop p{font-size:13px}
.shop p+p{margin-top:6px}
.shop-feat{font-weight:700;color:var(--main2)}
.shop-tel{display:inline-block;font-family:var(--ff-num);font-weight:900;font-size:20px;color:var(--deep);text-decoration:none;letter-spacing:.02em;margin:10px 14px 0 0}
.shop-map{font-size:13px;font-weight:700;color:var(--main2)}
.more-link{display:inline-block;margin-top:24px;font-weight:700;color:var(--main2)}

/* 15 FAQ */
.faq details{border-bottom:2px dashed var(--line)}
.faq details:first-of-type{border-top:2px dashed var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:flex-start;padding:16px 32px 16px 0;font-weight:700;font-size:14.5px;color:var(--deep);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--ff-disp);color:var(--main);font-size:18px;line-height:1.3}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:20px;color:var(--main)}
.faq details[open] summary::after{content:"−"}
.faq details>p{font-size:13.5px;padding:0 0 16px 24px}
.faq details>.pending{margin:0 0 16px 24px}

/* 16 最終CTA */
.final-text p{font-size:14px}
.final-text p+p{margin-top:12px}
.form{background:#fff;color:var(--ink);border-radius:20px;padding:24px 20px;margin-top:var(--block-gap);display:grid;gap:18px}
.form>label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:700;font-size:13.5px}
.form>label>input,.form>label>select,.form>label>textarea{flex:1 0 100%}
.form legend{font-weight:700;font-size:13.5px;margin-bottom:8px}
.form em{font-style:normal;font-size:11px;color:#fff;background:var(--danger);border-radius:4px;padding:0 6px;margin-left:6px}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:12px;border:1.5px solid #b9cfcf;border-radius:10px;background:#fbfdfd;width:100%}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.form .r{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px}
.form .r input{width:20px;height:20px}
.form .btn-cta{width:100%}
.form .note{margin-top:0}
.form-err{color:#c0392b;font-weight:700;font-size:13px}
.form-status{font-weight:700;font-size:13px;color:var(--main2)}
.tel-box{margin-top:var(--block-gap);display:grid;gap:8px;text-align:center}
.tel-box p{font-weight:700;margin-bottom:4px}
.tel-box a{color:#fff;font-family:var(--ff-disp);font-weight:700;font-size:18px;text-decoration:none;border:1.5px solid rgba(255,255,255,.6);border-radius:99px;padding:12px 24px}

/* フッター */
.ft{background:var(--deep);color:rgba(255,255,255,.85);padding:48px 0 104px;font-size:12px}
.ft p+p{margin-top:10px}
.ft a{color:#fff}
.ft-logo{height:28px;width:auto;background:#fff;border-radius:8px;padding:4px 8px;box-sizing:content-box;margin-bottom:16px}

/* スマホ下部の追従CTA */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;background:var(--acc);color:var(--accInk);text-align:center;font-weight:700;padding:14px;border-radius:99px;box-shadow:0 6px 18px rgba(0,0,0,.25);text-decoration:none}

/* ---------- 5. PC(1024px〜) ---------- */
@media (min-width:1024px){
  :root{
    --gutter:40px;
    --sec-y:128px;
    --head-gap:48px;
    --block-gap:56px;
    --card-gap:20px;
    --card-pad:28px;
  }
  .sp-only{display:none}
  .sticky-cta{display:none}
  .sec-title{font-size:38px}
  .sec-lead{font-size:15.5px}
  .hd{top:16px;padding:10px 12px 10px 18px}
  .hd-logo img{height:36px}
  .hd-btn{font-size:14px;padding:11px 20px}

  /* 見出しを左、本文を右に置く「2段組み」 */
  .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
  .split>.eyebrow{grid-column:1;grid-row:1;justify-self:start}
  .split>.sec-title{grid-column:1;grid-row:2;margin-bottom:0}
  .split>:not(.eyebrow):not(.sec-title){grid-column:2;grid-row:1 / span 3;align-self:start}

  /* 01 FV: 左にコピー、右に写真 */
  .fv{padding:136px 0 calc(var(--sec-y) + 20px)}
  .fv-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;grid-template-areas:"h1 ph" "lead ph" "tags ph" "cta ph" "tel ph" "area ph";align-content:start}
  .fv h1{grid-area:h1;font-size:54px;margin:32px 0 0}
  .fv h1 .s{font-size:33px}
  .fv-lead{grid-area:lead;font-size:17px;margin-top:28px}
  .fv-lead b{font-family:var(--ff-num);font-weight:900;font-size:34px}
  .fv-tags{grid-area:tags;margin-top:18px}
  .fv-tags li{font-size:13px}
  .fv .btn-cta{grid-area:cta;max-width:440px;margin-top:32px;padding:18px 20px 18px 26px}
  .fv-tel{grid-area:tel;text-align:left}
  .fv-area{grid-area:area;text-align:left}
  .fv-photos{grid-area:ph;height:540px;margin:72px 48px 0 0}
  .fv-p1{left:0;right:40px;height:450px}
  .fv-p2{width:220px;height:165px;right:-10px}
  .bub{font-size:16px;left:80px;top:-58px}
  .tate{right:var(--gutter);font-size:22px}

  /* 02 3本柱: 横に3つ。真ん中だけ下げる */
  .pil-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
  .big{flex-direction:column;align-items:flex-start;border-bottom:0;border-top:2px dashed var(--line);padding:28px 0 0}
  .big:nth-child(2){margin-top:48px}
  .big .n{font-size:76px}
  .big h3{font-size:17px}
  .big .t p{font-size:14px}

  /* 03 共感: 縦書きの見出しを左、悩みを右 */
  .emp-in{grid-template-columns:300px minmax(0,1fr);column-gap:64px}
    .emp-vt{grid-row:1 / span 2;justify-self:center;font-size:34px;margin-top:40px}
  .emp-vt::before{width:calc(100% + 150px);height:calc(100% + 100px)}
  .emp-lead{font-size:16px}
  .emp-list{grid-column:2;grid-row:2;margin-top:32px}
  .q{padding:18px 20px;font-size:14px}
  .q-hi{font-size:16px}
  .emp-close{font-size:24px}

  /* 04 空白期間 */
  .band{font-size:14px}
  .band>div{padding:24px 8px}
  .band .gap{font-size:20px}
  .band-fill{width:280px;padding:14px}
  .band-fill b{font-size:16px}
  .band-fill span{font-size:13px}
  .gap-text{columns:2;column-gap:56px;max-width:none}
  .gap-text p{font-size:15px;break-inside:avoid}

  /* 05 とは */
  .about-text p{font-size:15.5px}

  /* 06 3つの理由: 大きな写真に本文の面を重ね、左右を入れ替える */
  .reason{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .reason+.reason{margin-top:96px}
  .reason-visual{grid-column:1 / 9;grid-row:1;margin:0}
  .reason-visual img{border-radius:24px;aspect-ratio:3/2}
  .reason-body{grid-column:7 / 13;grid-row:1;margin:0;padding:44px 40px}
  .reason:nth-child(even) .reason-visual{grid-column:5 / 13}
  .reason:nth-child(even) .reason-body{grid-column:1 / 7;margin:0}
  .reason-tag{top:-18px;left:32px;font-size:16px;padding:16px 9px 12px}
  .reason:nth-child(even) .reason-tag{right:32px}
  .reason-tag .num{font-family:var(--ff-num);font-weight:900;font-size:40px}
  .reason-body h3{font-size:26px;margin-bottom:18px}
  .reason-body p{font-size:15px}

  /* 07 プログラム: 3列 */
  .prog-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prog-list .prog-main,.prog-list .prog-key{grid-column:span 2}
  .prog-list li:nth-child(6){grid-column:span 2}
  .prog-list li{padding:24px}
  .prog-list h3{font-size:17px}
  .prog-list p{font-size:14px}

  /* 08 設備 / 10 1日の流れ / 12 声 / 14 店舗: 横並び */
  .equip-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .day-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voices{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .vc:nth-child(2){margin:48px 0 0}
  .vc:nth-child(3){margin:0}
  .vc-after{font-size:20px}
  .shop-list{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* 13 流れ: 2列(STEP0は全幅) */
  .st{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .st .st0{grid-column:1 / -1}

  /* 15 FAQ: 見出し左・質問右 */
  .faq summary{font-size:16px;padding:20px 40px 20px 0}
  .faq details>p{font-size:14.5px}

  /* 16 最終CTA: 左に案内と電話、右にフォーム */
  .final .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:72px;align-items:start}
  .final .sec-title,.final-text,.final .tel-box{grid-column:1}
  .final .form{grid-column:2;grid-row:1 / span 4;margin-top:0;padding:36px 32px}
  .final-text p{font-size:15px}
  .tel-box{text-align:left}

  .ft{padding:64px 0}
}

/* ---------- 6. 字間の打ち消し(中央揃えの小さなラベル) ---------- */
.hd-btn,.equip-list .where,.pending-tag,.form em,.sticky-cta,.reason-tag{padding-left:calc(var(--pl,10px) + .05em)}
.hd-btn{--pl:14px;line-height:1.4}
.sticky-cta{--pl:14px}
.equip-list .where{--pl:8px}
.pending-tag,.form em{--pl:6px}
.reason-tag{--pl:7px;padding-left:7px;padding-bottom:calc(10px - .2em)}  /* 縦書きは字間が下に付く */
@media (min-width:1024px){.hd-btn{--pl:20px}.reason-tag{padding-left:9px;padding-bottom:calc(12px - .2em)}}

/* ---------- 7. ふわふわ(ランダムに置いた要素をゆっくり上下させる) ---------- */
@keyframes float{from{translate:0 0}to{translate:0 -7px}}
.q,.vc,.fv-p2,.bub,.reason-tag{animation:float 3.6s ease-in-out infinite alternate}
.q:nth-child(2n){animation-duration:4.2s;animation-delay:-1.3s}
.q:nth-child(3n){animation-duration:3.9s;animation-delay:-2.1s}
.vc:nth-child(2){animation-duration:4.4s;animation-delay:-1.6s}
.vc:nth-child(3){animation-duration:3.8s;animation-delay:-2.7s}
.fv-p2{animation-duration:4.6s;animation-delay:-1s}
.bub{animation-duration:3.2s}
.reason:nth-child(even) .reason-tag{animation-delay:-1.8s}
@media (prefers-reduced-motion:reduce){.q,.vc,.fv-p2,.bub,.reason-tag{animation:none}}

/* ---------- 8. ふわっと表示(画面に入ったら下から浮かび上がる) ---------- */
.js .reveal{opacity:0;translate:0 28px;transition:opacity .9s ease,translate .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;translate:0 0}
.js .big.reveal:nth-child(2){transition-delay:.18s}
.js .big.reveal:nth-child(3){transition-delay:.36s}
.js .emp-vt.reveal{translate:0 40px;transition-duration:1.1s}
.js .emp-vt.reveal.is-in{translate:0 0}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;translate:none;transition:none}}

/* ---------- 9. カードの写真(07 プログラム・08 設備) ---------- */
.prog-list li{--lp:14px;position:relative;padding:var(--lp)}
.equip-list>div{--lp:var(--card-pad);position:relative}
.card-ph{display:block;margin:calc(-1 * var(--lp)) calc(-1 * var(--lp)) 14px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.card-ph img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-ph--pending{aspect-ratio:16/9;display:grid;place-items:center;font-size:12px;font-weight:700;color:#7a4a00;background:repeating-linear-gradient(-45deg,#fff6d6 0 10px,#ffeeb3 10px 20px);text-align:center;padding:8px}
/* 番号は写真の上に札として重ねる */
.prog-list li::before{position:absolute;z-index:1;top:10px;left:10px;background:#fff;border-radius:8px;padding:5px 9px 4px;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.prog-list .prog-key::before{background:var(--deep)}
@media (min-width:1024px){.prog-list li{--lp:24px}.prog-list li::before{top:14px;left:14px;font-size:20px}}

/* 07: カードが回転しながら今の位置に収まる */
.js .prog-list li.reveal{opacity:0;rotate:-10deg;scale:.9;translate:0 48px;transition:opacity .7s ease,rotate 1s cubic-bezier(.2,.8,.25,1.15),scale 1s cubic-bezier(.2,.8,.25,1.15),translate 1s cubic-bezier(.2,.8,.25,1)}
.js .prog-list li.reveal:nth-child(even){rotate:9deg}
.js .prog-list li.reveal.is-in{opacity:1;rotate:0deg;scale:1;translate:0 0}
.js .prog-list li.reveal:nth-child(2){transition-delay:.1s}
.js .prog-list li.reveal:nth-child(3){transition-delay:.2s}
.js .prog-list li.reveal:nth-child(4){transition-delay:.3s}
.js .prog-list li.reveal:nth-child(5){transition-delay:.4s}
.js .prog-list li.reveal:nth-child(6){transition-delay:.5s}

/* 12: 利用者の声はふわふわを大きめに(少し傾きも付ける) */
@keyframes floatVc{from{translate:0 0;rotate:-.6deg}to{translate:0 -12px;rotate:.6deg}}
.vc{animation-name:floatVc}

/* CTA: 文字と矢印を中央に寄せる */
.btn-cta{justify-content:center;gap:14px}

@media (prefers-reduced-motion:reduce){.js .prog-list li.reveal{opacity:1;rotate:none;scale:none;translate:none;transition:none}.vc{animation:none}}
/* 写真ごとの見せる位置(人の顔を切らない) */
.card-ph img[src*="prog-2"]{object-position:50% 0}
.card-ph img[src*="prog-1"]{object-position:50% 60%}
@media (min-width:1024px){
  /* 07: 横長のカード(01・04・06)は写真を左、文章を右に */
  .prog-list .prog-main,.prog-list .prog-key,.prog-list li:nth-child(6){display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:24px}
  .prog-list .prog-main>.card-ph,.prog-list .prog-key>.card-ph,.prog-list li:nth-child(6)>.card-ph{grid-column:1;grid-row:1 / -1;align-self:stretch;margin:calc(-1 * var(--lp)) 0 calc(-1 * var(--lp)) calc(-1 * var(--lp));border-radius:var(--radius) 0 0 var(--radius)}
  .prog-list .prog-main>.card-ph img,.prog-list .prog-key>.card-ph img,.prog-list li:nth-child(6)>.card-ph img{height:100%;min-height:220px;aspect-ratio:auto}
  .prog-list .prog-main>:not(.card-ph),.prog-list .prog-key>:not(.card-ph),.prog-list li:nth-child(6)>:not(.card-ph){grid-column:2}
}

/* 14: 店舗カードの写真(上の色帯は写真に置き換える) */
.shop{--lp:var(--card-pad);position:relative;border-top:0}
.shop .card-ph img{aspect-ratio:16/10}

/* ヘッダー: LINE導線 */
.hd-actions{display:flex;align-items:center;gap:6px}
.hd-line{background:#06C755;color:#fff;font-weight:700;font-size:12px;line-height:1.4;padding:9px 12px 9px calc(12px + .05em);border-radius:99px;text-decoration:none}
.pc-only{display:none}
@media (min-width:1024px){
  .pc-only{display:inline}
  .hd-actions{gap:10px}
  .hd-line{font-size:14px;padding:11px 20px 11px calc(20px + .05em)}
}
/* 小さいスマホ(〜359px): ヘッダーを1行に収める */
@media (max-width:359px){
  .hd{padding:7px 8px 7px 10px}
  .hd-logo img{height:24px}
  .hd-actions{gap:4px}
  .hd-line,.hd-btn{font-size:11px;padding:8px 10px 8px calc(10px + .05em)}
}

/* ---------- 10. FVの写真の切り替え(6秒ごと・1秒でふんわり入れ替え) ---------- */
.fv-p1 .kv{position:absolute;inset:0;display:block}
@keyframes kvfade{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
.kv-1,.bub-1{animation:kvfade 12s ease-in-out infinite}
.kv-2,.bub-2{opacity:0;animation:kvfade 12s ease-in-out -6s infinite}
/* 吹き出しは切り替えとふわふわを両方かける */
.bub-1{animation:kvfade 12s ease-in-out infinite,float 3.2s ease-in-out infinite alternate}
.bub-2{animation:kvfade 12s ease-in-out -6s infinite,float 3.2s ease-in-out -1.2s infinite alternate}
.kv-2 img{object-position:60% 0}
/* 2枚目は縞のシャツのお客様(写真の横52%)から出す。しっぽの中心は吹き出しの左から30px */
.bub-2{left:calc(47% - 30px)}
@media (min-width:1024px){.bub-2{left:calc(46.4% - 30px)}}
@media (prefers-reduced-motion:reduce){.kv-1,.bub-1{animation:none;opacity:1}.kv-2,.bub-2{animation:none;opacity:0}}

/* ---------- 11. 共感の見出しを吹き出しに(左下に大小の丸) ---------- */
/* スマホ: 図形が画面に収まるよう左の列を広げ、見出しを少し右へ */
.emp-in{grid-template-columns:118px minmax(0,1fr)}
.emp-vt{margin-left:26px}
/* 丸(大)を ::after、丸(小)をその影で描く */
.emp-vt::after{content:"";position:absolute;z-index:-1;left:-28px;bottom:-58px;width:26px;height:26px;border-radius:50%;background:var(--deep);box-shadow:-20px 26px 0 -6px var(--deep)}
.emp-list{margin-top:128px}
@media (min-width:1024px){
  .emp-in{grid-template-columns:300px minmax(0,1fr)}
  .emp-vt{margin-left:0}
  .emp-vt::after{left:-64px;bottom:-86px;width:36px;height:36px;box-shadow:-28px 36px 0 -9px var(--deep)}
  .emp-list{margin-top:32px}
  .emp-close{margin-top:120px}
}

/* ---------- 12. 日本語の折り返しを文節で(「世／帯」のような途中の改行を防ぐ。Chrome・Edge) ---------- */
body{word-break:auto-phrase}

/* ---------- 13. FV「こんな方が対象です」(年齢と主な疾患) ---------- */
.fv-target{position:relative;z-index:1;margin-top:20px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);border-radius:14px;padding:14px 16px 16px}
.fv-target-h{font-weight:700;font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.fv-target-h::before{content:"";width:6px;height:18px;border-radius:3px;background:var(--acc)}
.fv-target dl{display:grid;gap:10px}
.fv-target dl>div{display:grid;grid-template-columns:4.6em minmax(0,1fr);align-items:start;column-gap:8px}
.fv-target dt{font-size:12px;font-weight:700;opacity:.85;padding-top:5px}
.fv-target dd{margin:0;font-size:14px}
.fv-target dd b{font-family:var(--ff-num);font-weight:900;font-size:22px;color:var(--acc);letter-spacing:.02em;margin-right:2px}
.fv-target .fv-tags{margin-top:0}
@media (min-width:1024px){
  .fv-target{grid-area:tags;margin-top:24px;padding:16px 20px 18px}
  .fv-target .fv-tags{grid-area:auto}
  .fv-target dd b{font-size:26px}
}
/* 対象の枠: 疾患だけにして、タグを大きく */
.fv-target-h{font-size:15px;margin-bottom:12px}
.fv-target .fv-tags{gap:8px}
.fv-target .fv-tags li{font-size:14px;font-weight:700;padding:7px 14px 7px calc(14px + .05em);border-radius:8px;background:rgba(255,255,255,.08)}
@media (min-width:1024px){
  .fv-target-h{font-size:17px}
  .fv-target .fv-tags li{font-size:16px;padding:8px 16px 8px calc(16px + .05em)}
}
/* 対象の枠: 見出しの右に年齢 */
.fv-target-h{justify-content:space-between;flex-wrap:wrap;row-gap:4px}
.fv-target-h::before{display:none}
.fv-target-t{display:flex;align-items:center;gap:8px}
.fv-target-t::before{content:"";width:6px;height:18px;border-radius:3px;background:var(--acc)}
.fv-target-age{font-size:14px;font-weight:700;white-space:nowrap}
.fv-target-age b{font-family:var(--ff-num);font-weight:900;font-size:24px;line-height:1;color:var(--acc);margin:0 1px}
@media (min-width:1024px){.fv-target-age{font-size:16px}.fv-target-age b{font-size:28px}}
/* 年齢は見出しのすぐ右に(右寄せにすると情報が離れて見えるため) */
.fv-target-h{justify-content:flex-start;column-gap:16px}