/* 公開するサイトの見た目。prototype/editor.html の2つ目の <style> から
   機械的に取り出し、編集画面でしか使わない指定を site.edit.css に分けたもの。 */
/* サイト表示用のCSS。prototype/editor.html の2つ目の <style> から機械的に取り出した。
   .site 以下だけを扱い、編集画面の見た目（.app / .top など）は含まない。 */

/* 公開するページの土台。プロトタイプでは枠の中に入れて表示していたので
   気づかなかったが、単体で公開すると body の既定の余白（8px）が
   サイト全体の外周に隙間として出る。 */
body:has(>.site){margin:0}

/* 幅の計算に内側の余白を含める。含めないと、width:100% を指定した箱が
   内側余白のぶんだけ画面からはみ出す（スマホで本文が右に切れていた） */
.site,.site *,.site *:before,.site *:after{box-sizing:border-box}

/* ---------- sample site inside the frame (token-driven) ---------- */
.site{--s-primary:#1E3A8A;--s-accent:#E08A1E;--s-bg:#FFFFFF;--s-surface:#F4F6FA;--s-ink:#1A1F2B;--s-ink2:#4A5263;--s-dark:#101522;--s-dark-ink:#F5F6F8;
  --s-fd:"Noto Sans JP",sans-serif;--s-fb:"Noto Sans JP",sans-serif;--s-r:8px;--s-sp:1;--s-imgr:10px;--s-btn-r:8px;--s-hw:700;--s-ls:0;--s-bls:0;--s-lh:1.7;--s-scale:1;--s-w:1040px;--s-measure:32em;--s-gap:1;--s-pad:1;
  font-family:var(--s-fb);color:var(--s-ink);background:var(--s-bg);line-height:var(--s-lh);font-size:calc(15px*var(--s-scale));letter-spacing:var(--s-bls)}

.site h1,.site h2,.site h3{font-family:var(--s-fd);font-weight:var(--s-hw);letter-spacing:var(--s-ls);line-height:1.3;margin:0;text-wrap:balance}

.site p{margin:0}

.s-wrap{max-width:var(--s-w);margin:0 auto;padding:0 calc(clamp(16px,4cqi,40px)*var(--s-pad))}

.s-sec{padding:calc(56px*var(--s-sp)) 0;container-type:inline-size;background:var(--s-bg)}

.s-sec[data-bg="surface"]{background:var(--s-surface)}

.s-sec[data-bg="dark"]{background:var(--s-dark);color:var(--s-dark-ink)}

.s-sec[data-bg="dark"] .s-ink2{color:color-mix(in srgb,var(--s-dark-ink) 70%,transparent)}

.s-sec[data-bg="primary"]{background:var(--s-primary);color:#fff}

.s-ink2{color:var(--s-ink2)}

.s-eyebrow{font-size:12px;letter-spacing:.14em;color:var(--s-accent);font-weight:700;margin-bottom:10px;display:block}

/* `.site h1,h2,h3{margin:0}` のほうが詳しさで勝ってしまい、見出しの下の余白が
   ずっと0になっていた。どの節も見出しと中身がくっついて見えていた原因。
   `.site` を足して詳しさをそろえる。 */
.site .s-h2{font-size:calc(clamp(22px,3.2cqi,32px)*var(--s-scale));margin-bottom:calc(26px*var(--s-sp))}

.s-h2.bar{padding-left:14px;border-left:4px solid var(--s-accent)}

.s-h2.center{text-align:center}

.s-lead{max-width:var(--s-measure)}

.s-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--s-btn-r);background:var(--s-primary);color:#fff;font-weight:700;text-decoration:none;font-size:14px;border:2px solid var(--s-primary)}

.s-btn.ghost{background:transparent;color:inherit;border-color:currentColor}

.s-btn.accent{background:var(--s-accent);border-color:var(--s-accent);color:#1A1F2B}

.s-btn.text{background:transparent;border-color:transparent;color:inherit;padding-inline:4px;text-decoration:underline;text-underline-offset:4px}

.s-btn.full{width:100%;justify-content:center}

.ctas.center{justify-content:center}

.s-img{background:var(--s-surface);border-radius:var(--s-imgr);overflow:hidden;position:relative;display:grid;place-items:center;color:var(--s-ink2);font-size:12px;aspect-ratio:4/3}

.s-img.ph{background:linear-gradient(135deg,color-mix(in srgb,var(--s-primary) 18%,#e8e9ee),color-mix(in srgb,var(--s-accent) 22%,#e8e9ee))}

/* hero */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(clamp(24px,5cqi,56px)*var(--s-gap));align-items:center}

.hero-grid[data-img="L"]{grid-template-columns:5fr 6fr}

.hero-grid[data-img="S"]{grid-template-columns:6fr 4fr}

.hero-grid.left .hero-txt{order:2}

.hero h1{font-size:calc(clamp(26px,4.4cqi,44px)*var(--s-scale));margin-bottom:16px}

.hero .s-lead{margin-bottom:24px}

.hero .ctas{display:flex;gap:10px;flex-wrap:wrap}

/* 写真を背景に敷き、中身の高さに合わせて伸ばす。
   写真の高さを決め打ちにすると、見出し・文章・ボタンが多いときに
   中身が写真からはみ出し、膜の外に出て読めなくなる（実際にそうなった）。 */
.hero.full{position:relative;padding:0;overflow:hidden}
.hero.full>.s-img{position:absolute;inset:0;width:100%}
/* 横長の枠に縦長の写真を入れると上下が切られる。人は上のほうにいるので、
   真ん中で切ると顔が飛ぶ。少し上寄りを残す（実際に頭が切れた） */
.hero.full>.s-img>img{width:100%;height:100%;object-fit:cover}

/* バナーをそのまま出すファーストビュー。画像の縦横比のまま、切らずに置く */
.bannerhero .s-img{aspect-ratio:auto;background:none}

.bannerhero .s-img>img{height:auto;object-fit:contain}
/* バナーの下に置く文章とボタン。画像と離しすぎない */
/* 文字入りのバナーは、左右いっぱいに・上の余白なしで置く。
   余白があると、画像が箱に入った札のように浮いて見える。
   上の余白は節（.s-sec）が持っているので、同じぶんだけ引き上げて消す。
   （:has で節の余白を消す書き方は、なぜか効かなかった） */
.bannerhero{max-width:none;padding-left:0;padding-right:0;
  margin-top:calc(-56px*var(--s-sp))}
/* バナーは画面いっぱいだが、下の文章とボタンは**他の節と同じ幅・同じ左端**に
   そろえる。そろえないと、画面が広いときだけ左端に張り付いて見える */
.bannerunder{max-width:var(--s-w);margin:1.6em auto 0;
  padding:0 calc(clamp(16px,4cqi,40px)*var(--s-pad))}


/* 目には出さないが、読み上げと検索には届く見出し */
.s-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.hero.full .s-img,.hero.full .s-video{aspect-ratio:auto;height:460px;border-radius:0}

/* 写真の上に白い文字を置く。上のほうが薄すぎると、明るい写真に文字が負ける。
   見出し・文章・ボタンと中身が多いときは、薄いところまで伸びてしまう。
   下を濃く、上も**文字が読める濃さ**まで残す（おうちピカピカで読めなかった）。 */
/* 高さは画面の幅に合わせて伸ばす。決め打ちにすると、広い画面で
   帯のように低くなり、入口が弱くなる（1440pxで389pxしか無かった）。
   ただし伸ばしすぎると、写真の切れる量が増えて顔が飛ぶので上限をつける */
.hero.full .ov{position:relative;min-height:clamp(360px,38vw,560px);display:flex;align-items:flex-end;
  background:linear-gradient(to top,rgba(10,15,25,.86) 25%,rgba(10,15,25,.62) 65%,rgba(10,15,25,.46));
  color:#fff;padding:48px 0}

.hero.full .ov .s-ink2{color:rgba(255,255,255,.88)}
/* 小見出しは色つきのまま。暗い膜の上では沈むので、明るくする */
.hero.full .ov .s-eyebrow{color:rgba(255,255,255,.82)}

.hero.center{text-align:center}

.hero.center .s-lead,.hero.center .ctas{margin-left:auto;margin-right:auto;justify-content:center}

.hero.center .s-img{max-width:720px;margin:32px auto 0;aspect-ratio:16/8}
@container (max-width:640px){.hero-grid .hero-txt{order:2}
.hero-grid .s-img{order:1}
.hero.full .s-img{height:360px}}

/* 狭い画面では、写真の上に文字を重ねない。
   全面の入口は、枠の形が画面の幅で 1.0（ほぼ正方形）〜 3.1（とても横長）まで
   3倍も変わる。1枚の写真で両方に合わせることはできず、狭い側で大きく切れて
   人が消える（おうちピカピカで顔が飛んだ）。
   狭いときは写真を上・文字を下に置き、写真を切らずに出す。 */
@media (max-width:900px){
  .hero.full{overflow:visible}
  .hero.full>.s-img{position:relative;inset:auto;width:auto;height:auto}
  .hero.full>.s-img>img{height:auto;object-fit:contain}
  .hero.full .ov{position:relative;min-height:0;background:none;color:var(--s-ink);
    padding:22px 0 0;align-items:flex-start}
  .hero.full .ov .s-ink2{color:var(--s-ink2)}
  .hero.full .ov .s-eyebrow{color:var(--s-accent)}
}

/* cards */
.cards{display:grid;gap:calc(18px*var(--s-sp)*var(--s-gap));grid-template-columns:repeat(var(--cols,3),1fr)}

.card{background:var(--s-bg);border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);border-radius:var(--s-r);padding:calc(20px*var(--s-sp));display:flex;flex-direction:column;gap:10px;overflow:hidden}

.s-sec[data-bg="surface"] .card{border-color:transparent}

.s-sec[data-bg="dark"] .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}

.card h3{font-size:17px}

.card .ic{width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--s-primary) 12%,transparent);color:var(--s-primary);display:grid;place-items:center;font-weight:700}

.card .s-img{aspect-ratio:3/2;margin:calc(-20px*var(--s-sp)) calc(-20px*var(--s-sp)) 4px;border-radius:0;width:auto}

.card .meta{display:flex;gap:10px;font-size:12px;color:var(--s-ink2)}

.card p{font-size:14px}
@container (max-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
@container (max-width:480px){.cards{grid-template-columns:1fr}}

/* list / check */
.checks{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:calc(14px*var(--s-gap))}

.checks div{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;background:var(--s-bg);border-radius:var(--s-r);font-size:14px;border:1px solid color-mix(in srgb,var(--s-ink) 8%,transparent)}

.checks i{width:20px;height:20px;border-radius:50%;background:var(--s-accent);flex:none;display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px;margin-top:2px}
@container (max-width:640px){.checks{grid-template-columns:1fr}}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:calc(clamp(24px,5cqi,56px)*var(--s-gap));align-items:center}

.split.right .txt{order:1}
.split.right .s-img{order:2}

.split.left .txt{order:2}
.split.left .s-img{order:1}
@container (max-width:640px){.split .txt,.split .s-img{order:initial}
.split{grid-template-columns:1fr}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}

.stats b{display:block;font-family:var(--s-fd);font-size:clamp(28px,4cqi,44px);color:var(--s-accent);font-variant-numeric:tabular-nums;line-height:1.1}

.stats small{display:block;font-size:13px;margin-top:6px}

.stats .as{font-size:11px;opacity:.6;margin-top:16px;grid-column:1/-1;text-align:right}
@container (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(14px*var(--s-gap));counter-reset:st}

.steps div{position:relative;padding:18px 16px 16px;border-radius:var(--s-r);background:var(--s-bg);border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent)}

.steps div:before{counter-increment:st;content:"0" counter(st);font-family:var(--s-fd);font-weight:700;color:var(--s-accent);font-size:22px;display:block;margin-bottom:6px}

.steps h3{font-size:15px;margin-bottom:4px}

.steps p{font-size:13px}

.steps.vertical{grid-template-columns:1fr;max-width:640px}

.steps.vertical div{display:grid;grid-template-columns:48px 1fr;gap:0 12px}

.steps.vertical div:before{grid-row:1/3;margin:0}
@container (max-width:640px){.steps{grid-template-columns:1fr 1fr}}

/* faq */
/* 見出しが中央寄せなので、本体も中央に置かないと右半分だけ大きく空く */
.faq{max-width:max(560px,var(--s-measure) + 8em);margin-inline:auto;display:flex;flex-direction:column;gap:8px}

.faq details{border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);border-radius:var(--s-r);padding:12px 16px;background:var(--s-bg)}

.faq summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;gap:10px}

.faq summary:before{content:"Q";color:var(--s-accent)}

.faq p{padding:10px 0 4px 24px;font-size:14px}

.faq.two{max-width:none;display:grid;grid-template-columns:1fr 1fr}
@container (max-width:640px){.faq.two{grid-template-columns:1fr}}

/* cta */
.cta-band{text-align:center}

.cta-band .s-h2{margin-bottom:10px}

.cta-band p{max-width:var(--s-measure);margin-left:auto;margin-right:auto}

.hero.center .s-lead{margin-left:auto;margin-right:auto}

.cta-band .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

.cta-band .tel{font-family:var(--s-fd);font-size:clamp(22px,3cqi,30px);font-weight:700;display:block;margin-top:8px}

.cta-2col{display:grid;grid-template-columns:1fr 1fr;gap:calc(32px*var(--s-gap));align-items:center}

.cta-2col .form{background:var(--s-bg);color:var(--s-ink);border-radius:var(--s-r);padding:20px;display:flex;flex-direction:column;gap:8px}

.cta-2col .form i{display:block;height:36px;border:1px solid #d5d9e0;border-radius:6px;background:#fff}
@container (max-width:640px){.cta-2col{grid-template-columns:1fr}}

/* --- 記事本文 --- */
.art{max-width:var(--s-measure);margin:0 auto}

.art.wide{max-width:min(760px,100%)}

.art .meta{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--s-ink2);margin-bottom:12px;flex-wrap:wrap}

.art h1{font-size:clamp(21px,3.4cqi,30px);line-height:1.5;margin-bottom:14px}

.art .toc{background:var(--s-surface);border-radius:var(--s-r);padding:16px 20px;margin:22px 0}

.art .toc b{display:block;font-size:12.5px;margin-bottom:8px;font-family:var(--s-fd)}

.art .toc ol{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:6px}

.art .bd{font-size:15px;line-height:2.05}

.art .bd h2{font-size:19px;margin:32px 0 12px;padding-left:12px;border-left:4px solid var(--s-accent);line-height:1.5}

.art .bd h3{font-size:16px;margin:24px 0 8px}

.art .bd p{margin:0 0 18px}

.art .bd ul{margin:0 0 18px;padding-left:20px;display:flex;flex-direction:column;gap:6px}

.art .bd blockquote{margin:0 0 18px;padding:14px 18px;background:var(--s-surface);border-radius:var(--s-r);font-size:14px;border-left:3px solid var(--s-accent)}

.art .bd .s-img{margin:0 0 18px}

.art .tags{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0}

.art .tags span{font-size:11px;padding:3px 10px;border-radius:99px;background:var(--s-surface)}

.art .share{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--s-ink2);margin-bottom:26px}

.art .share i{width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--s-ink) 10%,transparent);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700}

.art .nav2{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent);padding-top:20px}

.art .nav2 a{font-size:12.5px;color:inherit;text-decoration:none;padding:10px 12px;border-radius:var(--s-r);background:var(--s-surface)}

.art .nav2 small{display:block;font-size:10.5px;opacity:.6;margin-bottom:3px}

.art .nav2 .r{text-align:right}

.ncards.two{grid-template-columns:repeat(2,1fr)}
@container (max-width:640px){.art .nav2{grid-template-columns:1fr}}

/* --- お知らせ --- */
.nlist{display:flex;flex-direction:column;max-width:840px}

.nlist a{cursor:pointer;display:grid;grid-template-columns:92px 96px 1fr;gap:14px;align-items:baseline;padding:15px 2px;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent);text-decoration:none;color:inherit}

.nlist time{font-size:12.5px;opacity:.65;font-variant-numeric:tabular-nums}

.ncat{font-size:10.5px;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--s-accent) 18%,transparent);text-align:center;white-space:nowrap;justify-self:start}

.nlist h3{font-size:15px;font-family:var(--s-fb);font-weight:500}

.ncards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16px*var(--s-gap))}

.ncards .c{cursor:pointer;background:var(--s-bg);border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);border-radius:var(--s-r);overflow:hidden}

.ncards .tx{padding:15px}

.ncards time{font-size:11.5px;opacity:.65}

.ncards h3{font-size:14.5px;margin:4px 0 6px}

.ncards p{font-size:13px;opacity:.85}

.nfeat{display:grid;grid-template-columns:1.2fr 1fr;gap:calc(24px*var(--s-gap))}

.nempty{padding:26px;text-align:center;font-size:13px;opacity:.6;border:1px dashed color-mix(in srgb,var(--s-ink) 20%,transparent);border-radius:var(--s-r)}
@container (max-width:760px){.ncards{grid-template-columns:1fr}
.nfeat{grid-template-columns:1fr}
.nlist a{grid-template-columns:1fr;gap:3px}}

/* --- フォーム --- */
.sform{display:grid;grid-template-columns:1fr;gap:calc(14px*var(--s-gap));max-width:720px}

.sform.two{grid-template-columns:1.15fr .85fr;max-width:none;align-items:start}

.sform.narrow{max-width:560px;margin:0 auto}

.ffields{display:flex;flex-direction:column;gap:13px;background:var(--s-bg);border:1px solid color-mix(in srgb,var(--s-ink) 11%,transparent);border-radius:var(--s-r);padding:calc(22px*var(--s-sp))}

.ff{display:flex;flex-direction:column;gap:5px}

.ff label{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px}

.ff .req{font-size:10px;background:var(--s-accent);color:#fff;padding:1px 6px;border-radius:3px;font-weight:700}

.ff .opt{font-size:10px;border:1px solid color-mix(in srgb,var(--s-ink) 25%,transparent);padding:1px 6px;border-radius:3px;opacity:.6}

.ff .inp{border:1px solid color-mix(in srgb,var(--s-ink) 22%,transparent);border-radius:calc(var(--s-r)*.8);background:#fff;height:40px}

.ff .inp.area{height:96px}

.ff .inp.sel{display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:13px;opacity:.55}

.ff .radios{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}

.ff .radios span{display:flex;align-items:center;gap:6px}

.ff .radios i{width:14px;height:14px;border:1.5px solid color-mix(in srgb,var(--s-ink) 35%,transparent);border-radius:50%;display:block}

.ff .radios.cb i{border-radius:3px}

.fconsent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;opacity:.85}

.fconsent i{width:15px;height:15px;border:1.5px solid color-mix(in srgb,var(--s-ink) 35%,transparent);border-radius:3px;flex:none;margin-top:2px}

.fsubmit{margin-top:4px;justify-content:center;width:100%}

.finfo{display:flex;flex-direction:column;gap:14px;font-size:13.5px}

.finfo .bigtel{font-family:var(--s-fd);font-size:clamp(22px,3cqi,28px);font-weight:700;line-height:1.2}

.finfo .row2{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent)}

.finfo small{opacity:.65;font-size:11.5px}
@container (max-width:760px){.sform.two{grid-template-columns:1fr}}

/* --- ページ見出し --- */
.phead{padding:calc(38px*var(--s-sp)) 0}

.phead h1{font-size:clamp(22px,3.4cqi,32px);margin-bottom:7px}

.phead .crumbs{font-size:11.5px;opacity:.72;display:flex;gap:7px;flex-wrap:wrap}

.phead .crumbs i{font-style:normal;opacity:.5}

.phead.center{text-align:center}

.phead.center .crumbs{justify-content:center}

.pheadimg{position:relative}

.pheadimg .s-img{aspect-ratio:auto;height:210px;border-radius:0}

.pheadimg .ov{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(rgba(8,14,24,.5),rgba(8,14,24,.5));color:#fff}

/* --- 動画 --- */
.s-video{position:relative;aspect-ratio:16/9;border-radius:var(--s-imgr);overflow:hidden;background:#11151c;display:grid;place-items:center;container-type:inline-size}

/* 写真を枠いっぱいに収める。これが無いと、img が元の大きさのまま置かれ、
   枠（aspect-ratio:4/3・overflow:hidden）が写真の左上だけを切り取ってしまう。
   プロトタイプではこの1行が編集画面側の <style> に書かれていたため、
   サイト用CSSを抜き出したときに落ちていた。
   align-self:stretch も要る。親が place-items:center のグリッドなので、
   これが無いと枠に伸びず、height:100% が効かずに写真の上側だけが出る。 */
/* スマホでは、ファーストビューの写真と文章を上下に積む。
   これもプロトタイプでは編集画面側の <style> にあったため、サイト用CSSから漏れていた。
   無いと、狭い画面でも2列のままになり、写真が親指くらいの大きさになる。 */
@container (max-width:640px){.hero-grid,.hero-grid[data-img]{grid-template-columns:1fr}}

.s-img>img{grid-area:1/1;width:100%;height:100%;object-fit:cover;display:block;align-self:stretch;justify-self:stretch;min-height:0}

.s-video>video,.s-video>img{grid-area:1/1;width:100%;height:100%;object-fit:cover;display:block}

.s-video.ph{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--s-ink) 4%,transparent) 0 10px,transparent 10px 20px),color-mix(in srgb,var(--s-ink) 6%,transparent)}

.s-video.ph:before{content:"";position:absolute;inset:7px;border:2px dashed color-mix(in srgb,var(--s-primary) 38%,transparent);border-radius:inherit;pointer-events:none}

.s-video.ph:hover:before{border-color:var(--s-primary);background:color-mix(in srgb,var(--s-primary) 7%,transparent)}

.s-video .vph{position:absolute;inset:0;background:linear-gradient(135deg,#2b333f,#4a5462)}

.s-video .playbtn{position:relative;z-index:2;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);color:#11151c;display:grid;place-items:center;font-size:22px;padding-left:4px;box-shadow:0 6px 26px rgba(0,0,0,.4)}

.vfull{display:flex;flex-direction:column;gap:calc(16px*var(--s-gap))}

.vsplit{display:grid;grid-template-columns:1.25fr 1fr;gap:calc(30px*var(--s-gap));align-items:center}

.vsplit.rev .s-video{order:2}

.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16px*var(--s-gap))}

.vcards .c h3{font-size:15px;margin:10px 0 3px}

.vcards .c p{font-size:13px}

.vloop{position:relative}

.vloop .s-video{aspect-ratio:auto;height:420px;border-radius:0}

.vloop .ov{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(rgba(8,14,24,.55),rgba(8,14,24,.55));color:#fff;padding:24px}

.vcap{font-size:13px;opacity:.8}
@container (max-width:760px){.vsplit{grid-template-columns:1fr}
.vsplit.rev .s-video{order:0}
.vcards{grid-template-columns:1fr}}
@container (max-width:170px){.s-video .playbtn{width:38px;height:38px;font-size:14px}}

/* --- about variants --- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(18px*var(--s-gap))}

.reasons .r{background:var(--s-bg);border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);border-radius:var(--s-r);padding:24px 20px}

.reasons .no{font-family:var(--s-fd);font-size:12px;font-weight:700;color:var(--s-accent);letter-spacing:.1em;display:block;margin-bottom:8px}

.reasons h3{font-size:17px;margin-bottom:8px}

.reasons p{font-size:13.5px}

.bignum{display:flex;flex-direction:column;gap:calc(22px*var(--s-gap))}

.bignum .r{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}

.bignum .no{font-family:var(--s-fd);font-size:clamp(34px,5cqi,56px);font-weight:700;line-height:.9;color:color-mix(in srgb,var(--s-accent) 85%,transparent);font-variant-numeric:tabular-nums}

.bignum h3{font-size:18px;margin-bottom:6px}

.statement{text-align:center;max-width:var(--s-measure);margin:0 auto}

.statement .big{font-family:var(--s-fd);font-size:clamp(20px,3.2cqi,30px);font-weight:var(--s-hw);line-height:1.6;letter-spacing:var(--s-ls);text-wrap:balance}

.statement .rule{width:48px;height:2px;background:var(--s-accent);margin:22px auto}
@container (max-width:640px){.reasons{grid-template-columns:1fr}
.bignum .r{grid-template-columns:1fr;gap:6px}}

/* --- services variants --- */
.svclist{display:flex;flex-direction:column;gap:0}

.svclist .r{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 4px;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent)}

.svclist .r:first-child{border-top:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent)}

.svclist em{width:42px;height:42px;border-radius:var(--s-r);background:color-mix(in srgb,var(--s-primary) 12%,transparent);display:grid;place-items:center;font-style:normal;font-size:19px;flex:none}

.svclist h3{font-size:16px;margin-bottom:2px}

.svclist p{font-size:13.5px}

.svclist .arw{opacity:.35;font-size:18px}

.svczig{display:flex;flex-direction:column;gap:calc(36px*var(--s-gap))}

.svczig .r{display:grid;grid-template-columns:1fr 1fr;gap:calc(30px*var(--s-gap));align-items:center}

.svczig .r:nth-child(even) .s-img{order:2}

.svczig h3{font-size:20px;margin-bottom:8px}

.svczig .no{font-size:11px;letter-spacing:.12em;color:var(--s-accent);font-weight:700;display:block;margin-bottom:6px}
@container (max-width:640px){.svczig .r{grid-template-columns:1fr}
.svczig .r:nth-child(even) .s-img{order:0}
.svclist .r{grid-template-columns:auto 1fr}
.svclist .arw{display:none}}

/* --- testimonial --- */
.tst{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(18px*var(--s-gap))}

.tst .c{background:var(--s-bg);border-radius:var(--s-r);padding:24px 22px;border:1px solid color-mix(in srgb,var(--s-ink) 9%,transparent);display:flex;flex-direction:column;gap:12px}

.tst .q{font-size:14px;line-height:1.85;flex:1}

.tst .q:before{content:"“";font-family:var(--s-fd);font-size:34px;color:var(--s-accent);line-height:0;display:block;margin-bottom:14px;opacity:.6}

.tst .who{font-size:12.5px;display:flex;flex-direction:column;gap:1px;border-top:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);padding-top:12px}

.tst .who b{font-family:var(--s-fd);font-size:13.5px}

.tst .who small{opacity:.7}

.stars{color:var(--s-accent);font-size:13px;letter-spacing:2px}

.tst.one{grid-template-columns:1fr;max-width:var(--s-measure);margin:0 auto;text-align:center}

.tst.one .c{border:0;background:transparent;padding:0}

.tst.one .q{font-family:var(--s-fd);font-size:clamp(17px,2.6cqi,23px);line-height:1.9}

.tst.one .who{align-items:center;border:0}

.tstph{display:grid;grid-template-columns:auto 1fr;gap:calc(30px*var(--s-gap));align-items:center;background:var(--s-bg);border-radius:var(--s-r);padding:28px;border:1px solid color-mix(in srgb,var(--s-ink) 9%,transparent)}

.tstph .s-img{width:190px;aspect-ratio:1;border-radius:50%}

.tstscroll{display:flex;gap:calc(16px*var(--s-gap));overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}

.tstscroll .c{flex:0 0 min(300px,76%);scroll-snap-align:start}
@container (max-width:760px){.tst{grid-template-columns:1fr}
.tstph{grid-template-columns:1fr;text-align:center}
.tstph .s-img{margin:0 auto;width:140px}}

/* --- staff --- */
.stf{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(20px*var(--s-gap))}

.stf.n4{grid-template-columns:repeat(4,1fr)}

.stf .m .s-img{aspect-ratio:3/4;margin-bottom:12px}

.stf .m h3{font-size:16px}

.stf .m .role{font-size:12px;color:var(--s-accent);font-weight:700;margin:2px 0 6px;font-family:var(--s-fd)}

.stf .m p{font-size:13px}

.stf.circle .m{text-align:center}

.stf.circle .m .s-img{aspect-ratio:1;border-radius:50%;max-width:150px;margin:0 auto 12px}

.stflist{display:flex;flex-direction:column;gap:calc(16px*var(--s-gap))}

.stflist .m{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;background:var(--s-bg);border-radius:var(--s-r);padding:16px;border:1px solid color-mix(in srgb,var(--s-ink) 9%,transparent)}

.stflist .m .s-img{aspect-ratio:1;margin:0}

.stfone{display:grid;grid-template-columns:1fr 1.2fr;gap:calc(34px*var(--s-gap));align-items:center}

.stfone .s-img{aspect-ratio:4/5}

.stfone h3{font-size:clamp(20px,3cqi,28px)}

.stfscroll{display:flex;gap:calc(18px*var(--s-gap));overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}

.stfscroll .m{flex:0 0 min(210px,58%);scroll-snap-align:start}
@container (max-width:760px){.stf,.stf.n4{grid-template-columns:repeat(2,1fr)}
.stfone{grid-template-columns:1fr}}
@container (max-width:480px){.stflist .m{grid-template-columns:1fr}}

/* --- message --- */
.msg2{display:grid;grid-template-columns:1fr 1fr;gap:calc(40px*var(--s-gap));align-items:center}

.msg2.right .s-img{order:2}

.msg2 .s-img{aspect-ratio:4/5}

.msg2 h2{font-size:clamp(20px,3.2cqi,30px);line-height:1.55;margin-bottom:18px}

.msg2 p{font-size:14.5px;line-height:2}

.msg2 .sign{margin-top:22px;font-family:var(--s-fd);font-size:15px;display:flex;align-items:baseline;gap:10px}

.msg2 .sign small{opacity:.65;font-size:11px;letter-spacing:.1em}

.msgq{max-width:var(--s-measure);margin:0 auto;text-align:center}

.msgq .big{font-family:var(--s-fd);font-size:clamp(19px,3cqi,28px);line-height:1.85;margin-bottom:22px;text-wrap:balance}

.msgv{display:grid;grid-template-columns:auto 1fr;gap:calc(36px*var(--s-gap));justify-content:center}

.msgv .vt{writing-mode:vertical-rl;font-family:var(--s-fd);font-size:16px;line-height:2.4;letter-spacing:.12em;max-height:340px;text-align:start}

.msgv .vt h2{font-size:clamp(19px,2.6cqi,24px);margin-left:22px;line-height:1.9;letter-spacing:.16em}

.msgv .s-img{aspect-ratio:3/4;width:220px}
@container (max-width:700px){.msg2,.msgv{grid-template-columns:1fr}
.msg2.right .s-img{order:0}
.msgv .vt{writing-mode:horizontal-tb;max-height:none}
.msgv .vt h2{margin-left:0}
.msgv .s-img{width:100%}}

/* --- pricing --- */
.pscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.ptable{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}

.ptable th,.ptable td{padding:14px 16px;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent);text-align:left;vertical-align:top}

.ptable thead th{font-size:12px;letter-spacing:.06em;opacity:.65;font-weight:400;border-bottom-width:2px}

.ptable .nm{font-family:var(--s-fd);font-weight:700;white-space:nowrap}

.ptable .pr{font-family:var(--s-fd);font-weight:700;color:var(--s-accent);white-space:nowrap;font-variant-numeric:tabular-nums}

.ptable .ds{font-size:13px;opacity:.8}

.pnote{font-size:12.5px;opacity:.7;margin-top:14px}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16px*var(--s-gap));align-items:start}

.plan{border:1px solid color-mix(in srgb,var(--s-ink) 14%,transparent);border-radius:var(--s-r);padding:26px 22px;background:var(--s-bg);position:relative}

.plan.hl{border-color:var(--s-accent);border-width:2px;box-shadow:0 8px 28px color-mix(in srgb,var(--s-accent) 18%,transparent)}

.plan .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--s-accent);color:#fff;font-size:11px;padding:3px 12px;border-radius:99px;white-space:nowrap;font-weight:700}

.plan h3{font-size:17px}

.plan .pr{font-family:var(--s-fd);font-size:clamp(24px,3.4cqi,32px);font-weight:700;margin:10px 0 4px;font-variant-numeric:tabular-nums}

.plan .sub{font-size:12.5px;opacity:.75;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent)}

.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px}

.plan li:before{content:"✓";color:var(--s-accent);margin-right:8px;font-weight:700}

.plist{display:flex;flex-direction:column;max-width:760px}

.plist .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 2px;border-bottom:1px dashed color-mix(in srgb,var(--s-ink) 20%,transparent)}

.plist .nm{font-family:var(--s-fd);font-weight:700;font-size:15px}

.plist .ds{font-size:12.5px;opacity:.7;display:block;font-weight:400;font-family:var(--s-fb)}

.plist .pr{font-family:var(--s-fd);font-weight:700;color:var(--s-accent);white-space:nowrap;font-variant-numeric:tabular-nums}

.pmenu{display:grid;grid-template-columns:1fr 1fr;gap:0 calc(40px*var(--s-gap))}
@container (max-width:760px){.plans{grid-template-columns:1fr}
.pmenu{grid-template-columns:1fr}
.ptable .ds{display:none}}

/* --- access --- */
.acc{display:grid;grid-template-columns:1.2fr 1fr;gap:calc(30px*var(--s-gap));align-items:stretch}

.acc.right .mapbox{order:2}

.mapbox{border-radius:var(--s-r);min-height:280px;border:1px solid color-mix(in srgb,var(--s-ink) 14%,transparent);display:grid;place-items:center;font-size:12px;opacity:.95;position:relative;overflow:hidden;background:
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--s-ink) 6%,transparent) 0 1px,transparent 1px 30px),
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--s-ink) 6%,transparent) 0 1px,transparent 1px 30px),
  color-mix(in srgb,var(--s-ink) 5%,transparent)}

.mapbox:before{content:"";position:absolute;left:18%;top:0;bottom:0;width:14px;background:color-mix(in srgb,var(--s-ink) 7%,transparent)}

.mapbox:after{content:"📍";font-size:26px;position:absolute}

.acctable{width:100%;border-collapse:collapse;font-size:13.5px}

.acctable th{text-align:left;font-weight:400;opacity:.6;padding:11px 16px 11px 0;white-space:nowrap;vertical-align:top;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 11%,transparent);width:1%}

.acctable td{padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 11%,transparent)}

.acctable tr:last-child th,.acctable tr:last-child td{border-bottom:0}

.acctable .tel{font-family:var(--s-fd);font-weight:700;font-size:19px}

.accfull .mapbox{min-height:340px}

.accfull{position:relative}

.accfull .card{position:absolute;top:24px;right:24px;width:min(340px,44%);background:var(--s-bg);border-radius:var(--s-r);padding:22px;box-shadow:0 10px 30px rgba(10,20,35,.18)}

.accmulti{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16px*var(--s-gap))}

.accmulti .c{background:var(--s-bg);border-radius:var(--s-r);border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);overflow:hidden}

.accmulti .mapbox{min-height:130px;border:0;border-radius:0}

.accmulti .tx{padding:16px}

.accmulti h3{font-size:15px;margin-bottom:4px}

.accmulti p{font-size:12.5px;opacity:.8}
@container (max-width:760px){.acc{grid-template-columns:1fr}
.acc.right .mapbox{order:0}
.accmulti{grid-template-columns:1fr}
.accfull .card{position:static;width:auto;margin-top:14px;box-shadow:none;border:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent)}}

/* --- faq extra --- */
.faqopen{max-width:max(560px,var(--s-measure) + 8em);margin-inline:auto;display:flex;flex-direction:column;gap:22px}

.faqopen .r h3{font-size:15.5px;display:flex;gap:10px;margin-bottom:7px}

.faqopen .r h3:before{content:"Q.";color:var(--s-accent);font-family:var(--s-fd)}

.faqopen .r p{font-size:14px;padding-left:26px;opacity:.85}

.faqnum{display:flex;flex-direction:column;gap:0;max-width:max(560px,var(--s-measure) + 8em);margin-inline:auto}

.faqnum .r{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent)}

.faqnum .no{font-family:var(--s-fd);font-weight:700;color:var(--s-accent);font-size:14px;font-variant-numeric:tabular-nums}

.faqnum h3{font-size:15.5px;margin-bottom:6px}

.faqnum p{font-size:14px;opacity:.85}

.faqbox{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(14px*var(--s-gap))}

.faqbox .r{background:var(--s-bg);border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);border-radius:var(--s-r);padding:20px}

.faqbox h3{font-size:15px;margin-bottom:8px;display:flex;gap:8px}

.faqbox h3:before{content:"Q";color:var(--s-accent);font-family:var(--s-fd);font-weight:700}

.faqbox p{font-size:13.5px;opacity:.85}
@container (max-width:640px){.faqbox{grid-template-columns:1fr}}

/* --- problem variants --- */
.bubbles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 26px}

.bubble{position:relative;background:var(--s-bg);border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);border-radius:calc(var(--s-r) + 6px);padding:14px 18px;font-size:14px}

.bubble:after{content:"";position:absolute;bottom:-9px;left:26px;width:16px;height:16px;background:inherit;border-right:inherit;border-bottom:inherit;transform:rotate(45deg)}

.bubble-row{display:flex;align-items:flex-end;gap:12px}

.bubble-row .av{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--s-primary) 18%,transparent);flex:none;display:grid;place-items:center;font-size:15px}

.iconcards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16px*var(--s-gap))}

.iconcards div{background:var(--s-bg);border-radius:var(--s-r);padding:22px 18px;text-align:center;border:1px solid color-mix(in srgb,var(--s-ink) 8%,transparent);font-size:14px}

.iconcards em{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:color-mix(in srgb,var(--s-accent) 20%,transparent);font-style:normal;font-size:20px}

.ba{display:grid;grid-template-columns:1fr 1fr;gap:calc(24px*var(--s-gap))}

.ba .col{background:var(--s-bg);border-radius:var(--s-r);padding:18px;border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent)}

.ba .col.after{border-color:var(--s-accent);border-width:2px}

.ba h3{font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px}

.ba h3 span{font-size:10px;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--s-ink) 10%,transparent);font-weight:400}

.ba .col.after h3 span{background:var(--s-accent);color:#fff}

.ba ul{margin:0;padding-left:18px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
@container (max-width:640px){.bubbles,.ba{grid-template-columns:1fr}
.iconcards{grid-template-columns:1fr}}

/* --- works variants --- */
.wlist{display:flex;flex-direction:column;gap:calc(12px*var(--s-gap))}

.wlist a{display:grid;grid-template-columns:180px 1fr auto;gap:18px;align-items:center;background:var(--s-bg);border:1px solid color-mix(in srgb,var(--s-ink) 10%,transparent);border-radius:var(--s-r);padding:12px;text-decoration:none;color:inherit}

.wlist .s-img{aspect-ratio:16/10;margin:0}

.wlist h3{font-size:16px;margin-bottom:4px}

.wlist .meta{font-size:12.5px;color:var(--s-ink2);display:flex;gap:14px;flex-wrap:wrap}

.wlist .arw{opacity:.4;font-size:18px}

.wfeat{display:grid;grid-template-columns:1.4fr 1fr;gap:calc(16px*var(--s-gap))}

.wfeat .sub{display:grid;gap:calc(16px*var(--s-gap))}

.wscroll{display:flex;gap:calc(16px*var(--s-gap));overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}

.wscroll .card{flex:0 0 min(280px,72%);scroll-snap-align:start}
@container (max-width:640px){.wlist a{grid-template-columns:1fr}
.wlist .arw{display:none}
.wfeat{grid-template-columns:1fr}}

/* --- stats variants --- */
.stats.n3{grid-template-columns:repeat(3,1fr)}

.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(14px*var(--s-gap))}

.scards div{background:color-mix(in srgb,var(--s-bg) 80%,transparent);border-radius:var(--s-r);padding:20px 14px;text-align:center}

.s-sec[data-bg="primary"] .scards div,.s-sec[data-bg="dark"] .scards div{background:rgba(255,255,255,.1)}

.scards b{display:block;font-family:var(--s-fd);font-size:clamp(24px,3.4cqi,36px);line-height:1.1;font-variant-numeric:tabular-nums}

.scards small{display:block;font-size:12px;margin-top:6px;opacity:.85}

.simg{display:grid;grid-template-columns:1fr 1fr;gap:calc(28px*var(--s-gap));align-items:center}

.simg .g{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.simg b{display:block;font-family:var(--s-fd);font-size:clamp(24px,3.4cqi,38px);color:var(--s-accent);line-height:1.1;font-variant-numeric:tabular-nums}

.simg small{display:block;font-size:12.5px;margin-top:4px}

.sbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 24px;border-radius:var(--s-r);background:color-mix(in srgb,var(--s-bg) 75%,transparent);flex-wrap:wrap}

.s-sec[data-bg="primary"] .sbar,.s-sec[data-bg="dark"] .sbar{background:rgba(255,255,255,.1)}

.sbar div{text-align:center;flex:1;min-width:110px;border-right:1px solid color-mix(in srgb,currentColor 15%,transparent)}

.sbar div:last-child{border-right:0}

.sbar b{font-family:var(--s-fd);font-size:clamp(20px,2.6cqi,28px);display:block;font-variant-numeric:tabular-nums}

.sbar small{font-size:11.5px;opacity:.8}
@container (max-width:640px){.scards{grid-template-columns:repeat(2,1fr)}
.simg{grid-template-columns:1fr}}

/* --- steps variants --- */
.steps.arrows{gap:calc(26px*var(--s-gap));position:relative}

.steps.arrows div:not(:last-child):after{content:"";position:absolute;top:50%;right:calc(-14px*var(--s-gap));width:0;height:0;border-left:9px solid color-mix(in srgb,var(--s-accent) 70%,transparent);border-top:7px solid transparent;border-bottom:7px solid transparent;transform:translateY(-50%)}

.steps.arrows div{position:relative}

.szig{display:flex;flex-direction:column;gap:calc(20px*var(--s-gap))}

.szig .r{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:var(--s-bg);border-radius:var(--s-r);padding:18px 20px;border:1px solid color-mix(in srgb,var(--s-ink) 9%,transparent)}

.szig .r:nth-child(even){margin-left:8%}

.szig .r:nth-child(odd){margin-right:8%}

.szig .num{font-family:var(--s-fd);font-size:30px;font-weight:700;color:var(--s-accent);line-height:1;font-variant-numeric:tabular-nums}

.szig h3{font-size:16px;margin-bottom:4px}

.szig p{font-size:13.5px}

.scardsimg{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(14px*var(--s-gap))}

.scardsimg div{background:var(--s-bg);border-radius:var(--s-r);overflow:hidden;border:1px solid color-mix(in srgb,var(--s-ink) 9%,transparent)}

.scardsimg .s-img{aspect-ratio:16/10;border-radius:0;margin:0}

.scardsimg .tx{padding:14px}

.scardsimg .n{font-size:11px;color:var(--s-accent);font-weight:700;font-family:var(--s-fd)}

.scardsimg h3{font-size:15px;margin:2px 0 4px}

.scardsimg p{font-size:13px}
@container (max-width:700px){.scardsimg{grid-template-columns:repeat(2,1fr)}
.steps.arrows div:after{display:none}}
@container (max-width:640px){.szig .r{margin:0!important}}

/* --- cta variants --- */
.cta3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(14px*var(--s-gap));margin-top:22px}

.cta3 a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 14px;border-radius:var(--s-r);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);text-decoration:none;color:inherit}

.s-sec[data-bg="surface"] .cta3 a{background:var(--s-bg);border-color:color-mix(in srgb,var(--s-ink) 12%,transparent)}

.cta3 em{font-size:22px;font-style:normal}

.cta3 b{font-family:var(--s-fd);font-size:16px}

.cta3 small{font-size:11px;opacity:.8}

.ctaimg{position:relative}

.ctaimg .s-img{aspect-ratio:auto;height:300px;border-radius:0}

.ctaimg .ov{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(rgba(10,15,25,.62),rgba(10,15,25,.62));color:#fff;padding:24px}

.ctasplit{display:grid;grid-template-columns:1fr 1fr;gap:calc(32px*var(--s-gap));align-items:center}

.ctabar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

.ctabar b{font-family:var(--s-fd);font-size:clamp(16px,2.2cqi,20px)}
@container (max-width:640px){.cta3{grid-template-columns:1fr}
.ctasplit{grid-template-columns:1fr}
.ctaimg .s-img{height:340px}}

/* footer */
.foot{font-size:13px}

.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}

.foot b{display:block;margin-bottom:8px;font-family:var(--s-fd)}

.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;opacity:.85}

/* 指で押す前提の高さを確保する。行の高さのままだと19pxしかなく、
   電話番号のような大事なリンクが押しにくい（実測で見つけた） */
.foot ul a{display:inline-flex;align-items:center;min-height:44px}

.foot .legal{margin-top:28px;padding-top:14px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);display:flex;justify-content:space-between;gap:12px;opacity:.6;font-size:11px;flex-wrap:wrap}

.foot.simple{text-align:center}
.foot.simple .cols{display:flex;flex-direction:column;align-items:center;gap:10px}

.foot .sns{margin-top:12px}

.foot .bigtel{display:flex;flex-direction:column;gap:2px}

.foot .bigtel b{font-family:var(--s-fd);font-size:clamp(24px,3.4cqi,32px);letter-spacing:.01em;margin:0}

.foot .bigtel small{opacity:.75;font-size:12px}

.foot .cols.two{grid-template-columns:1.4fr 1fr;align-items:start}

.foot .cols.five{grid-template-columns:repeat(5,1fr)}

.foot .cols.map{grid-template-columns:1fr 1fr;align-items:stretch}

.foot .mapbox{border-radius:var(--s-r);min-height:190px;border:1px solid color-mix(in srgb,currentColor 15%,transparent);background:
   repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 26px),
   repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 26px),
   color-mix(in srgb,currentColor 12%,transparent);
   display:grid;place-items:center;font-size:12px;opacity:.85;position:relative}

.foot .mapbox:after{content:"📍";position:absolute;font-size:22px;filter:grayscale(.2)}

.foot table{border-collapse:collapse;font-size:12.5px;width:100%}

.foot table th{text-align:left;font-weight:400;opacity:.6;padding:6px 14px 6px 0;white-space:nowrap;vertical-align:top;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}

.foot table td{padding:6px 0;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}

.foot table tr:last-child th,.foot table tr:last-child td{border-bottom:0}

.foot .ctaband{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;border-radius:var(--s-r);background:color-mix(in srgb,var(--s-accent) 88%,#000);color:#fff;margin-bottom:30px;flex-wrap:wrap}

.foot .ctaband b{font-family:var(--s-fd);font-size:clamp(16px,2.2cqi,21px);margin:0}

.foot .ctaband .s-btn{background:#fff;color:#1A1F2B;border-color:#fff}

.foot .hoursrow{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;border-bottom:1px dashed color-mix(in srgb,currentColor 20%,transparent)}
@container (max-width:760px){.foot .cols.five{grid-template-columns:repeat(3,1fr)}}
@container (max-width:640px){.foot .cols,.foot .cols.two,.foot .cols.five,.foot .cols.map{grid-template-columns:1fr 1fr}
.foot .cols.map,.foot .cols.two{grid-template-columns:1fr}}

/* header */
.s-head{display:flex;align-items:center;justify-content:space-between;padding-block:14px;gap:16px}

.s-head .logo{font-family:var(--s-fd);font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;white-space:nowrap}

.s-head .logo i{width:26px;height:26px;border-radius:calc(var(--s-r)*.7);background:var(--s-primary);flex:none}

.s-head nav{display:flex;gap:22px;font-size:14px;white-space:nowrap}

.s-head .s-btn{padding:9px 16px;font-size:13px;white-space:nowrap}

.s-head .tel{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}

.s-head .tel b{font-family:var(--s-fd);font-size:17px;letter-spacing:.01em}

.s-head .tel small{font-size:10px;opacity:.7}

.sns{display:inline-flex!important;gap:6px;align-items:center}

.sns i{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,currentColor 14%,transparent);font-style:normal;font-size:9px;font-weight:700;display:grid;place-items:center;letter-spacing:0;line-height:1}

.s-head .burger{display:none;flex-direction:column;gap:4px;width:34px;height:34px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:calc(var(--s-r)*.6);align-items:center;justify-content:center;flex:none}

.s-head .burger i{display:block;width:16px;height:1.5px;background:currentColor}

.s-head .grow{flex:1}

/* 2段: 上帯 */
.s-topbar{font-size:11.5px;background:color-mix(in srgb,var(--s-primary) 7%,transparent);border-bottom:1px solid color-mix(in srgb,var(--s-ink) 8%,transparent)}

.s-sec[data-bg="dark"] .s-topbar{background:rgba(255,255,255,.07);border-bottom-color:rgba(255,255,255,.12)}

.s-topbar .in{display:flex;justify-content:space-between;align-items:center;padding-block:7px;gap:16px;flex-wrap:wrap}

.s-topbar .l{display:flex;gap:16px;opacity:.8}

/* ロゴ中央・下にメニュー */
.s-head.center{flex-direction:column;gap:14px;padding-block:20px}

.s-head.center nav{gap:28px}

.s-head.center .logo{font-size:22px}

.s-head.center .side{display:flex;gap:12px;align-items:center}

/* メニュー左右分け */
.s-head.split{display:grid;grid-template-columns:1fr auto 1fr;padding-block:18px}

.s-head.split nav{gap:26px}

.s-head.split nav.r{justify-content:flex-end}

.s-head.split .logo{font-size:20px}

/* 透過（写真に重ねる） */
.sec.hdr-overlay{position:absolute;top:0;left:0;right:0;z-index:6}

.sec.hdr-overlay .s-sec{background:transparent;color:#fff}

.sec.hdr-overlay .s-head .logo i{background:#fff}

.sec.hdr-overlay .s-btn.accent{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff}

.sec.after-overlay .hero.full .ov{padding-top:108px}

.sec.after-overlay > .s-sec:not(:has(.hero.full)){padding-top:calc(96px*var(--s-sp))}

/* ハンバーガーだけの型は、画面幅に関係なく常にボタンを出す */
.s-head.burgeronly .burger{display:flex}

.s-head.burgeronly nav{display:none}

/* ハンバーガーで開くメニュー */
.burger{cursor:pointer}

/* 公開ページのメニュー。スクロールした位置でも画面いっぱいに出す。
   （エディタの見本は枠の中に出すので absolute のまま） */
.s-menu.pub{position:fixed;inset:0;height:auto}

.s-menu.pub .mtel{color:inherit;text-decoration:none}

.e-burger{cursor:pointer;padding:10px;margin-right:-10px}

.s-menu{position:absolute;left:0;right:0;top:0;height:100%;z-index:30;display:none}

.site.menu-open .s-menu{display:block}

.s-menu .veil{position:absolute;inset:0;background:rgba(8,14,24,.5)}

.s-menu .panel{position:absolute;background:var(--s-bg);color:var(--s-ink);display:flex;flex-direction:column;gap:4px;padding:24px;box-shadow:0 10px 50px rgba(0,0,0,.3)}

.s-menu .mclose{position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid color-mix(in srgb,var(--s-ink) 18%,transparent);background:transparent;color:inherit;font-size:15px;cursor:pointer;display:grid;place-items:center;line-height:1}

.s-menu nav{display:flex;flex-direction:column;gap:0;margin-top:14px}

.s-menu nav span,.s-menu nav a{color:inherit;text-decoration:none;padding:13px 2px;border-bottom:1px solid color-mix(in srgb,var(--s-ink) 12%,transparent);font-family:var(--s-fd);font-size:15px;display:flex;justify-content:space-between;align-items:center}

.s-menu nav span:after,.s-menu nav a:after{content:"›";opacity:.35}

.s-menu .mtel{margin-top:18px;font-family:var(--s-fd);font-weight:700;font-size:21px;display:flex;flex-direction:column;line-height:1.25}

.s-menu .mtel small{font-size:11px;opacity:.7;font-weight:400}

.s-menu .s-btn{margin-top:14px;justify-content:center}

.s-menu .sns{margin-top:18px}

.s-menu[data-style="drawer"] .panel{top:0;right:0;bottom:0;width:min(320px,82%)}

.s-menu[data-style="fullscreen"] .veil{background:rgba(8,14,24,.2)}

.s-menu[data-style="fullscreen"] .panel{inset:0;width:auto;align-items:center;justify-content:center;padding:44px}

.s-menu[data-style="fullscreen"] nav{align-items:center;width:min(360px,86%)}

.s-menu[data-style="fullscreen"] nav span{width:100%;font-size:19px;padding:15px 2px;justify-content:center}

.s-menu[data-style="fullscreen"] nav span:after{display:none}

.s-menu[data-style="dropdown"]{top:var(--hdr-h,64px);bottom:0;height:auto}

.s-menu[data-style="dropdown"] .panel{top:0;left:0;right:0;bottom:auto;padding:8px 24px 24px}

.s-menu[data-style="dropdown"] .mclose{display:none}

.s-menu[data-style="dropdown"] nav{margin-top:4px}

.site.menu-open .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}

.site.menu-open .burger i:nth-child(2){opacity:0}

.site.menu-open .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.burger i{transition:transform .18s,opacity .18s}
@media (prefers-reduced-motion:reduce){.burger i{transition:none}}

/* LP用（メニューなし・ハンバーガーなし） */
.s-head.lp .burger,.s-head.lp nav{display:none!important}

.s-head.lp{padding-block:16px}

.s-head.lp .tel{display:flex}

.s-head.center-only{justify-content:center}

.s-head.center-only .logo{font-size:20px}

.s-head.center-only .grow{display:none}
@container (max-width:640px){
  .s-head.lp .tel b{font-size:14px}

  .s-head.lp .tel small{display:none}

  .s-head.lp .s-btn{padding:8px 12px;font-size:12px}}

/* 固定表示バッジ */
.s-head .pin{font-size:9px;border:1px solid currentColor;border-radius:3px;padding:0 4px;opacity:.35;font-family:var(--ui)}
@container (max-width:900px){
  .s-head .sns{display:none}

  .s-head nav{gap:16px;font-size:13.5px;min-width:0}

  .s-head .logo{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis}}
@container (max-width:800px){
  .s-head .tel{display:none}

  .s-head.lp .tel,.s-head.burgeronly .tel{display:flex}

  .s-head nav{gap:13px;font-size:13px}}
@container (max-width:700px){
  .s-head nav,.s-head.split nav{display:none}

  .s-head .burger{display:flex}

  .s-head.split{grid-template-columns:auto 1fr auto}

  .s-head.center{flex-direction:row}

  .s-topbar .l span:nth-child(n+3){display:none}}
@container (max-width:640px){
  .s-head .tel,.s-head.lp .tel,.s-head.burgeronly .tel{display:none}

  .s-head.lp .tel{display:flex}

  .s-topbar .l span:nth-child(n+2){display:none}}

/* 狭い画面では、屋号とボタンを1行に並べると屋号のほうが削られて
   「健康サ」のように切れてしまう。屋号は店の名前なので削らない。
   ボタンを次の行に回して、横幅いっぱいに置く。 */
@container (max-width:560px){
  .s-head{flex-wrap:wrap;row-gap:10px}

  .s-head .logo{overflow:visible;flex:0 1 auto}

  .s-head .grow{order:1}

  .s-head .burger{order:2}

  .s-head .s-btn{order:3;flex:1 1 100%;min-width:0;box-sizing:border-box;justify-content:center}}

/* image shapes */
.site[data-imgshape="square"] .s-img{border-radius:0}

.site[data-imgshape="arch"] .hero .s-img,.site[data-imgshape="arch"] .split .s-img{border-radius:999px 999px var(--s-imgr) var(--s-imgr)}

.site[data-imgshape="circle"] .split .s-img{border-radius:50%;aspect-ratio:1}

/* mobile sticky CTA (in sp preview) */
.sp-cta{display:none;position:sticky;bottom:0;z-index:4;background:var(--s-primary);color:#fff;padding:10px 14px;gap:8px;font-weight:700;font-size:13px}

.sp-cta a{flex:1;text-align:center;padding:9px 4px;border-radius:6px;background:rgba(255,255,255,.16);color:inherit;text-decoration:none;font-size:12.5px}

.stage-inner[data-device="sp"] .sp-cta{display:flex}
/* 「スマホでは非表示」の指定。編集画面では薄く表示するだけだが、
   公開したサイトでは実際に隠す。これが無いと設定が何もしないことになる。 */
@media (max-width:640px){.sec.sp-hidden{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   デザインスタイル / エディトリアル系のセクション
   docs/11_design_charter.md を参照。
   カード・角丸ボックスを使わない組み方と、スタイルごとの見た目をここに置く。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 共通の部品 ───────────────────────────────────────────────── */

/* 見出し。行ごとに下からせり上がって出す（マスクReveal） */
.e-mask{display:block;overflow:hidden}

.e-in{display:block}

/* 日本語の見出しは、語の途中で折れると読みにくい
   （「日本人のポ／テンシャルを」のように切れる）。
   auto-phrase は文節で折る。対応していないブラウザでは
   これまでどおりの折り返しになるだけで、崩れはしない */
.e-h,.e-h1{word-break:auto-phrase;overflow-wrap:anywhere}

/**
 * 見出しの入る列を、それぞれ「もの差し」にする。
 *
 * 見出しの大きさは cqi（いちばん近い「もの差し」の幅）で決める。
 * もの差しがセクションしかないと、**列が半分幅でもセクション全体の
 * 幅で計算してしまい、見出しが切れる**（実際に切れた）。
 * 見出しの入る列そのものをもの差しにすれば、その列の幅で収まる。
 */
.e-hero-s-txt,.e-hero-t-txt,.e-hero-txt,.e-art-l,.e-artc-head,.e-art2-head,
.e-phead,.e-pheadc,.e-pheads>div,.e-ctaq-l,.e-ctas-tx,.e-cta-in,
.e-reasons-head,.e-svc-ix-head,.e-msgt-head,.e-stf-t-head,.e-price-s-head{
  container-type:inline-size}

/* 大きさは「決めた上限」と「1行が収まる大きさ」の小さいほう。
   伸びる部分は画面の幅（vw）で、はみ出さない上限だけ列の幅（cqi）で
   見る。両方を列の幅にすると、列が狭いときに伸びる部分まで縮んで、
   見出しが小さくなりすぎた（37pxになった）。
   日本語は1文字＝1全角なので、文字数で必要な幅が決まる。
   --s-hch にいちばん長い行の文字数が入る（描画側が渡す）。
   これが無いと、長い見出しが右端で切れる（実際に切れた） */
.e-h{font-family:var(--s-fd);font-weight:var(--s-hw);line-height:1.4;letter-spacing:.04em;
  font-size:min(clamp(28px,3.2vw,42px),calc(96cqi / (var(--s-hch,8) + .4)));margin:0}

.e-h1{font-family:var(--s-fd);font-weight:var(--s-hw);line-height:1.32;letter-spacing:.03em;
  font-size:min(clamp(37px,5vw,68px),calc(96cqi / (var(--s-hch,8) + .3)));margin:0}

/* 書いた通りの位置で改行させる。途中で折れると意味が変わる */
.e-h1 .e-in{white-space:nowrap}

@container (max-width:520px){.e-h1 .e-in{white-space:normal}}

.e-eyebrow{display:block;font-family:var(--s-fb);font-size:11px;letter-spacing:.28em;color:var(--s-accent);margin-bottom:22px}

.e-lead{font-size:clamp(14px,1.3cqi,16px);line-height:2.1;color:var(--s-ink2);max-width:34em}

.e-num{font-family:var(--s-fd);font-size:12px;letter-spacing:.22em;color:var(--s-accent);display:block}

.e-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

/* 背景装飾・05 oversized typography。本文より必ず後ろ、薄く */
.e-wm{position:absolute;left:-.05em;top:-.46em;font-family:var(--s-fd);font-size:clamp(64px,13cqi,170px);letter-spacing:.08em;line-height:1;color:var(--s-ink);opacity:.055;pointer-events:none;user-select:none;z-index:0;white-space:nowrap}

.e-reasons,.e-price,.e-access{overflow:hidden}

.s-sec{position:relative}

.s-wrap{position:relative;z-index:1}

/* ── ヘッダー ─────────────────────────────────────────────────── */
.e-head{display:flex;align-items:center;gap:40px;padding-block:10px}

.e-logo{font-family:var(--s-fd);font-size:19px;letter-spacing:.12em;text-decoration:none;color:inherit;white-space:nowrap}

.e-nav{display:flex;gap:clamp(14px,1.8cqi,28px);margin-left:auto;font-size:13px;letter-spacing:.04em;min-width:0}

.e-nav a,.e-nav span{text-decoration:none;color:inherit;position:relative;padding:11px 0;white-space:nowrap}

.e-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:8px;height:1px;background:currentColor;transition:right .45s cubic-bezier(.16,1,.3,1)}

.e-nav a:hover:after{right:0}

.e-headr{display:flex;align-items:center;gap:18px}

.e-tel{font-family:var(--s-fd);font-size:17px;letter-spacing:.04em;text-decoration:none;color:inherit}

.e-burger{display:none;flex-direction:column;gap:6px;margin-left:auto}

.e-burger i{display:block;width:24px;height:1px;background:currentColor}

@container (max-width:1180px){.e-head{gap:24px}

  .e-nav{font-size:12.5px}}

@container (max-width:1060px){
  .e-nav,.e-headr{display:none}

  .e-burger{display:flex}}

/* ── ファーストビュー ─────────────────────────────────────────── */
.e-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;min-height:clamp(520px,86svh,900px)}

.e-hero-img{position:absolute;inset:0;overflow:hidden}

.e-hero-img .s-img{position:absolute;inset:-8% 0;aspect-ratio:auto;height:auto;border-radius:0}

.e-hero-img .s-img>img{height:100%;width:100%}

.e-hero-img:after{content:"";position:absolute;inset:0;background:linear-gradient(94deg,var(--s-bg) 0%,var(--s-bg) 26%,color-mix(in srgb,var(--s-bg) 92%,transparent) 42%,color-mix(in srgb,var(--s-bg) 40%,transparent) 58%,color-mix(in srgb,var(--s-bg) 0%,transparent) 74%)}

.e-hero-txt{position:relative;z-index:2;width:100%;padding-block:clamp(60px,9cqi,130px)}

.e-hero-txt>.e-lead{max-width:min(47%,560px)}

/* 2026-10-15 写真の上に重なる一言は、14〜16px・薄い色だと読みにくかった（FINEで指摘）。
   大きく・濃くする */
.e-hero-txt>.e-lead{font-size:clamp(16px,1.6cqi,19px);color:var(--s-ink);font-weight:500;line-height:1.95}

.e-hero-txt>.e-eyebrow,.e-hero-txt>.e-btns{max-width:none;white-space:nowrap}

/* 狭い画面では幅の制限を外す。`.e-hero-txt>.e-lead` のほうが詳しいので、
   同じ詳しさで打ち消さないと効かない（本文が1行12文字になっていた） */
@container (max-width:900px){
  .e-hero-txt>.e-lead,.e-hero-txt>.e-eyebrow,.e-hero-txt>.e-btns{max-width:none}}

@container (max-width:640px){.e-hero-txt>.e-eyebrow{white-space:normal}}

.e-hero-txt .e-lead{white-space:pre-line}

/* 見出しの下に並べる要点（値段・営業時間など）。箱で囲まず、
   上に細い線を引き、項目のあいだを縦の罫で区切る。雑誌の見出し下の仕様欄の組み */
.site .e-hero-stats{display:flex;flex-wrap:wrap;margin:30px 0 22px;padding-top:16px;
  border-top:1px solid var(--s-accent);width:fit-content;max-width:100%}
.e-hero-stats>div{padding:0 clamp(18px,2.4cqi,32px)}
.e-hero-stats>div:first-child{padding-left:0}
.e-hero-stats>div+div{border-left:1px solid var(--s-line)}
.site .e-hero-stats dt{font-size:clamp(11px,1cqi,13px);letter-spacing:.24em;color:var(--s-accent);font-weight:600;margin:0}
.site .e-hero-stats dd{margin:6px 0 0;font-family:var(--s-fd);font-weight:700;color:var(--s-ink);
  font-size:clamp(21px,2.5cqi,31px);letter-spacing:.03em;line-height:1.15;white-space:nowrap}

@container (max-width:760px){
  .e-hero{min-height:0;display:block}

  .e-hero-img{position:relative;inset:auto;height:46svh}

  .e-hero-img .s-img{position:absolute;inset:0}

  .e-hero-img:after{background:linear-gradient(180deg,transparent 45%,var(--s-bg) 99%)}

  .e-hero-txt{padding-block:26px 0}}

/* ── 選ばれる理由（番号つきの一覧。カードにしない） ──────────── */
.e-reasons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6cqi,90px)}

.e-reasons-head{position:sticky;top:110px;align-self:start}

@container (max-width:820px){.e-reasons-head{position:static}}

.e-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}

.e-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;padding:34px 0;border-top:1px solid var(--s-line)}

.e-list li:last-child{border-bottom:1px solid var(--s-line)}

.e-list h3{font-family:var(--s-fd);font-size:clamp(17px,1.8cqi,21px);margin-bottom:12px;letter-spacing:.04em}

.e-list p{font-size:14px;line-height:2;color:var(--s-ink2)}

.e-list .e-num{padding-top:.45em}

@container (max-width:820px){.e-reasons{grid-template-columns:minmax(0,1fr)}}

/* ── サービス（全幅の交互レイアウト。箱で囲わない） ───────────── */
.e-acat{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}

.e-acat:hover{opacity:.6}

/* ── お知らせ：ページ送り ── */
.e-pager{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3.2cqi,38px);
  padding-top:clamp(16px,2.4cqi,26px);border-top:1px solid var(--s-line)}

.e-pager a{color:inherit;text-decoration:none;font-size:13.5px;
  display:inline-flex;align-items:center;min-height:44px;
  transition:opacity .4s cubic-bezier(.16,1,.3,1)}

.e-pager a:hover{opacity:.6}

.e-pager a.n{margin-left:auto}

.e-pager>span:first-child{margin-right:auto}

.e-pgno{font-size:12px;letter-spacing:.09em;color:var(--s-ink2);
  font-variant-numeric:tabular-nums;margin-inline:auto}

/* ── 記事：写真・タグ・前後 ── */
/* 記事の写真は切り取らず、まるごと出す。
   枠を4:3に固める作りだと、縦長の写真が3分の1しか残らない
   （554x1200 の写真が35%まで切られていた）。記事に載せる写真は
   撮った人が選んだ1枚なので、欠けさせない。高すぎるものだけ抑える */
.e-apic{margin:0 0 clamp(20px,3cqi,34px)}
.e-apic .s-img{aspect-ratio:auto;max-height:78svh}
/* 小さい写真を引き伸ばさない。元が554pxのものを707pxで出すとぼやける。
   入りきらないときだけ縮める（幅いっぱいには広げない） */
.e-apic .s-img>img{width:auto;max-width:100%;height:auto;max-height:78svh;object-fit:contain;justify-self:center;align-self:center}

.e-apic .s-img{border-radius:0}

.e-afig{margin:clamp(20px,3cqi,34px) 0}

.e-afig .s-img{border-radius:0}

.e-afig figcaption{margin-top:10px;font-size:12.5px;line-height:1.85;color:var(--s-ink2)}

.e-aq{margin:clamp(20px,3cqi,34px) 0;padding:0 0 0 clamp(14px,2cqi,22px);
  border-left:2px solid var(--s-line);font-size:clamp(15px,1.6cqi,17px);
  line-height:2;color:var(--s-ink2)}

.e-atags{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;
  margin:clamp(24px,3.4cqi,40px) 0 0;padding:0}

.e-atags li{font-size:12px;letter-spacing:.06em;color:var(--s-ink2);
  border:1px solid var(--s-line);border-radius:99px;padding:5px 12px}

.e-around{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,2.4cqi,32px);margin-top:clamp(28px,4cqi,54px);
  padding-top:clamp(18px,2.6cqi,28px);border-top:1px solid var(--s-line)}

.e-around a{display:flex;flex-direction:column;gap:6px;min-height:44px;
  justify-content:center;color:inherit;text-decoration:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1)}

.e-around a:hover{opacity:.6}

.e-around a.n{text-align:right}

.e-around small{font-size:11.5px;letter-spacing:.09em;color:var(--s-ink2)}

.e-around span{font-size:14px;line-height:1.7}

/* ── 記事本文：見出しを上に、1本の柱で ── */
.e-artc-head{max-width:30em;margin-bottom:clamp(24px,3.6cqi,48px)}

.e-artc-body{max-width:38em}

/* ── 記事本文：2列に流す ── */
.e-art2-head{max-width:32em;margin-bottom:clamp(24px,3.6cqi,48px)}

.e-art2-body{columns:2;column-gap:clamp(30px,5cqi,80px)}

.e-art2-body>*{break-inside:avoid}

.e-art2-body>*:first-child{margin-top:0}

@container (max-width:820px){.e-art2-body{columns:1}}

/* ── お知らせ：本文の頭も見せる ── */
.e-newsl-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(24px,3.4cqi,48px)}

.e-newsl-l>a,.e-newsl-l>div{display:block;color:inherit;text-decoration:none;
  border-top:1px solid var(--s-line);padding-top:clamp(14px,2cqi,22px);
  transition:opacity .4s cubic-bezier(.16,1,.3,1)}

.e-newsl-l>a:hover{opacity:.6}

.e-newsl-l time{font-size:12.5px;letter-spacing:.09em;color:var(--s-ink2);
  font-variant-numeric:tabular-nums}

.e-newsl-l h3{font-family:var(--s-fd);font-size:clamp(15px,1.65cqi,18px);
  letter-spacing:.03em;margin:10px 0 9px;line-height:1.65}

.e-newsl-l p{font-size:13.5px;line-height:2;color:var(--s-ink2)}

/* ── お問い合わせ：見出しを上に ── */
.e-formst-head{max-width:34em;margin-bottom:clamp(26px,4cqi,52px)}

.e-formst-r{display:flex;flex-direction:column;gap:26px;max-width:34em}

.e-formst-r .s-btn{align-self:flex-start;margin-top:6px}

/* ── ヘッダー：屋号を真ん中に ── */
.e-headc{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding-block:clamp(14px,2cqi,22px);text-align:center}

.e-headc .e-nav{gap:clamp(16px,2.6cqi,34px)}

.e-headc .e-tel{font-size:13px}

@container (max-width:820px){
  .e-headc{flex-direction:row;justify-content:space-between;text-align:left}
  .e-headc .e-nav,.e-headc .e-tel{display:none}
}

/* ── ヘッダー：屋号だけ ── */
.e-headb{display:flex;align-items:center;gap:18px;padding-block:clamp(12px,1.8cqi,20px)}

.e-headb .e-headr{margin-left:auto;display:flex;align-items:center;gap:14px}

/* メニューは読み上げには残し、画面には出さない（開くボタンから出す想定） */
.e-nav.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* ── フッター：電話を大きく ── */
.e-footT{display:flex;flex-direction:column;align-items:flex-start;gap:10px}

.e-footT-b{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px clamp(20px,3cqi,44px);
  margin-top:clamp(20px,3cqi,38px);padding-top:clamp(18px,2.6cqi,30px);
  border-top:1px solid var(--s-line);width:100%}

.e-footT-b p{font-size:13px;color:var(--s-ink2);line-height:1.9}

.e-footT small{margin-top:14px;font-size:11.5px;color:var(--s-ink2);opacity:.8}

/* ── フッター：最小限 ── */
.e-footM{display:flex;align-items:center;gap:18px clamp(20px,3cqi,40px);flex-wrap:wrap;
  padding-block:clamp(18px,2.6cqi,30px)}

.e-footM .e-fnav{margin-left:auto}

.e-footM small{font-size:11.5px;color:var(--s-ink2);opacity:.8;width:100%}

@container (max-width:820px){.e-footM .e-fnav{margin-left:0}}

/* ── ページ見出し：中央 ── */
.e-pheadc{text-align:center;max-width:36em;margin-inline:auto}

.e-pheadc .e-lead{margin-inline:auto}

/* ── ページ見出し：左右に分ける ── */
.e-pheads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4cqi,64px);align-items:end}

@container (max-width:820px){.e-pheads{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ── 施工事例：高さをそろえずに並べる ── */
.e-flowg-head{margin-bottom:clamp(28px,4cqi,56px)}

.e-flowg-l{columns:3;column-gap:clamp(18px,2.6cqi,34px)}

.e-flowg-l figure{break-inside:avoid;margin:0 0 clamp(18px,2.6cqi,34px)}

.e-flowg-l .s-img{border-radius:0}

.e-flowg-l figcaption{margin-top:11px;font-size:13px;line-height:1.8}

.e-flowg-l figcaption b{display:block;font-family:var(--s-fd);font-weight:500;letter-spacing:.03em}

.e-flowg-l figcaption span{color:var(--s-ink2);font-size:12px}

@container (max-width:1000px){.e-flowg-l{columns:2}}

@container (max-width:560px){.e-flowg-l{columns:1}}

/* ── 施工事例：横に流す ── */
.e-strip-head{margin-bottom:clamp(24px,3.4cqi,46px)}

/* はみ出した分を横スクロールで見せる。指でも払える */
.e-strip-l{display:flex;gap:clamp(14px,2cqi,26px);overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-inline:var(--s-gut,24px);padding-bottom:12px}

.e-strip-l figure{margin:0;flex:0 0 clamp(230px,32cqi,420px);scroll-snap-align:start}

.e-strip-l .s-img{aspect-ratio:3/4;border-radius:0}

.e-strip-l figcaption{margin-top:11px;font-size:13px;line-height:1.8}

.e-strip-l figcaption b{display:block;font-family:var(--s-fd);font-weight:500;letter-spacing:.03em}

.e-strip-l figcaption span{color:var(--s-ink2);font-size:12px}

/* ── 数字：罫で区切って横に ── */
.e-nums-head{margin-bottom:clamp(24px,3.6cqi,48px);max-width:32em}

.e-nums-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(20px,3cqi,44px)}

.e-nums-l>div{border-top:1px solid var(--s-line);padding-top:clamp(14px,2cqi,22px)}

.e-nums-l b{display:block;font-family:var(--s-fd);font-weight:var(--s-hw);
  font-size:clamp(32px,4.6cqi,58px);line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}

.e-nums-l b span{font-size:.42em;margin-left:.2em;letter-spacing:.05em}

.e-nums-l small{display:block;margin-top:11px;font-size:13px;line-height:1.85;color:var(--s-ink2)}

.e-asof{margin-top:clamp(18px,2.6cqi,30px)}

/* ── 数字：縦に積む ── */
.e-numst-head{margin-bottom:clamp(24px,3.6cqi,48px);max-width:32em}

.e-numst-l{margin:0;border-top:1px solid var(--s-line);max-width:44em}

.e-numst-l>div{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(18px,3cqi,44px);align-items:baseline;
  padding:clamp(16px,2.4cqi,26px) 0;border-bottom:1px solid var(--s-line)}

.e-numst-l dt{margin:0;font-family:var(--s-fd);font-weight:var(--s-hw);
  font-size:clamp(26px,3.6cqi,44px);line-height:1.15;font-variant-numeric:tabular-nums}

.e-numst-u{font-size:.42em;margin-left:.2em;letter-spacing:.05em}

.e-numst-l dd{margin:0;font-size:14px;line-height:1.95;color:var(--s-ink2)}

/* ── スタッフ：写真を縦長に ── */
.e-stf-head{margin-bottom:clamp(26px,4cqi,54px);max-width:32em}

.e-stf-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(22px,3.2cqi,44px)}

.e-stf-l figure{margin:0}

.e-stf-l .s-img{aspect-ratio:3/4;border-radius:0;margin-bottom:14px}

.e-stf-l figcaption b{display:block;font-family:var(--s-fd);font-weight:500;
  letter-spacing:.04em;font-size:clamp(15px,1.6cqi,17px)}

.e-stf-l figcaption span{display:block;margin-top:5px;font-size:12px;
  letter-spacing:.08em;color:var(--s-accent)}

.e-stf-l figcaption p{margin-top:10px;font-size:13px;line-height:1.95;color:var(--s-ink2)}

/* ── スタッフ：写真なし ── */
.e-stf-t{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(30px,6cqi,90px)}

.e-stf-t-head{position:sticky;top:110px;align-self:start}

.e-stf-t-l{margin:0;border-top:1px solid var(--s-line)}

.e-stf-t-l>div{padding:clamp(18px,2.6cqi,30px) 0;border-bottom:1px solid var(--s-line)}

.e-stf-t-l dt{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-family:var(--s-fd);letter-spacing:.04em;font-size:clamp(16px,1.7cqi,19px)}

.e-stf-t-l dt small{font-size:12px;letter-spacing:.08em;color:var(--s-accent)}

.e-stf-t-l dd{margin:10px 0 0;font-size:14px;line-height:2;color:var(--s-ink2)}

@container (max-width:820px){
  .e-stf-t{grid-template-columns:minmax(0,1fr)}
  .e-stf-t-head{position:static}
}

/* ── よくある質問：全部開いたまま ── */
.e-faq-o-head{margin-bottom:clamp(28px,4cqi,54px);max-width:32em}

.e-qa{margin:0;border-top:1px solid var(--s-line)}

.e-qa-r{padding:clamp(22px,3.2cqi,34px) 0;border-bottom:1px solid var(--s-line);max-width:46em}

.e-qa-r dt{display:flex;gap:14px;font-family:var(--s-fd);letter-spacing:.03em;
  font-size:clamp(16px,1.75cqi,19px);line-height:1.65;margin:0}

.e-qmark{font-size:13px;letter-spacing:.1em;color:var(--s-accent);flex:none;padding-top:.35em}

.e-qa-r dd{margin:12px 0 0 30px;font-size:14px;line-height:2.05;color:var(--s-ink2)}

/* ── よくある質問：2列 ── */
.e-faq-p-head{margin-bottom:clamp(28px,4cqi,54px);max-width:32em}

.e-faq-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(26px,3.6cqi,50px) clamp(28px,4.5cqi,70px)}

.e-faq-c{border-top:1px solid var(--s-line);padding-top:18px}

.e-faq-c h3{font-family:var(--s-fd);font-size:clamp(15px,1.6cqi,17px);letter-spacing:.03em;
  margin:0 0 10px;line-height:1.65}

.e-faq-c p{font-size:13.5px;line-height:2;color:var(--s-ink2)}

/* ── 流れ：横に並べて線でつなぐ ── */
.e-flow-head{margin-bottom:clamp(30px,4.5cqi,60px);max-width:32em}

.e-flow-l{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(22px,3cqi,40px)}

.e-flow-l li{position:relative;border-top:1px solid var(--s-line);
  padding-top:clamp(16px,2.2cqi,24px)}

/* 手順のつながりを、番号の高さの細い線で示す */
.e-flow-l li::after{content:"";position:absolute;top:-1px;right:calc(-1 * clamp(22px,3cqi,40px) / 2);
  width:clamp(22px,3cqi,40px);height:1px;background:var(--s-line)}

.e-flow-l li:last-child::after{display:none}

.e-flow-l h3{font-family:var(--s-fd);font-size:clamp(15px,1.6cqi,18px);letter-spacing:.04em;
  margin:12px 0 9px;line-height:1.6}

.e-flow-l p{font-size:13.5px;line-height:2;color:var(--s-ink2)}

/* ── 流れ：番号を大きく ── */
.e-flowb-head{margin-bottom:clamp(30px,4.5cqi,62px)}

.e-flowb-r{position:relative;padding:clamp(24px,3.6cqi,48px) 0;
  border-top:1px solid var(--s-line)}

.e-flowb>.s-wrap:last-child .e-flowb-r{border-bottom:1px solid var(--s-line)}

.e-flowb-tx{position:relative;padding-left:clamp(0px,6cqi,120px);max-width:44em}

.e-flowb-tx h3{font-family:var(--s-fd);font-size:clamp(18px,2.2cqi,27px);letter-spacing:.04em;
  margin:0 0 12px;line-height:1.5}

.e-flowb-tx p{font-size:14.5px;line-height:2.05;color:var(--s-ink2)}

/* ── お悩み：ひとことずつ大きく ── */
.e-wbig{max-width:26em}

.e-wbig-l{list-style:none;margin:18px 0 0;padding:0}

.e-wbig-l li{font-family:var(--s-fd);font-weight:var(--s-hw);letter-spacing:.03em;
  font-size:clamp(19px,2.6cqi,32px);line-height:1.75;padding:0;text-indent:-1em;
  padding-left:1em}

.e-wbig-l li::before{content:"— "}

.e-wbig-h{margin-top:clamp(26px,4cqi,48px)}

/* ── お悩み：横一列 ── */
.e-wrow-head{margin-bottom:clamp(28px,4cqi,54px);max-width:32em}

.e-wrow-l{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,2.8cqi,38px)}

.e-wrow-l li{display:flex;flex-direction:column;gap:11px;
  border-top:1px solid var(--s-line);padding-top:16px;font-size:14.5px;line-height:1.95}

/* ── お問い合わせ導線：罫だけ ── */
.e-ctaq{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,5cqi,80px);align-items:end;
  border-top:1px solid var(--s-line);padding-top:clamp(30px,4.5cqi,58px)}

.e-ctaq-r{display:flex;flex-direction:column;align-items:flex-start;gap:10px}

@container (max-width:820px){.e-ctaq{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ── お問い合わせ導線：写真を横に ── */
.e-ctas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4.5cqi,70px);align-items:center}

.e-ctas-tx{display:flex;flex-direction:column;align-items:flex-start;gap:14px}

.e-ctas-img .s-img{aspect-ratio:4/3;border-radius:0}

@container (max-width:820px){.e-ctas{grid-template-columns:minmax(0,1fr)}}

/* ── アクセス：写真を全面に ── */
.e-acf{position:relative;isolation:isolate}

.e-acf-img{position:absolute;inset:0;z-index:-1;overflow:hidden}

/* 全面に敷くので、縦横比の指定を外して枠いっぱいに広げる。
   height だけ指定すると、比率が残って横に余白ができた（実際にできた） */
.e-acf-img .s-img{width:100%;height:100%;aspect-ratio:auto;border-radius:0}

/* 写真の上に文字を置くので、下に敷いて読めるようにする */
.e-acf-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,10,8,.82) 0%,rgba(12,10,8,.58) 55%,rgba(12,10,8,.3) 100%)}

.e-acf-in{padding-block:clamp(48px,8cqi,120px);color:#fff;max-width:34em}

.e-acf-in .e-h,.e-acf-in .e-eyebrow{color:#fff}

.e-acf-in .e-dl dt,.e-acf-in .e-dl dd{color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.2)}

/* ── アクセス：文字だけ ── */
/* 公式LINEのQR。紙やPCの画面から、手元の携帯で読ませるためのもの。
   小さすぎると読めないので、148px より縮めない */
.e-qr{display:flex;align-items:center;gap:clamp(14px,2cqi,22px);margin-top:clamp(24px,3.4cqi,40px);flex-wrap:wrap}
.e-qr-img{background:#fff;padding:10px;border-radius:calc(var(--s-radius)*.5);line-height:0;flex:0 0 auto}
.e-qr-img svg{display:block;width:148px;height:148px}
.e-qr p{font-size:13px;line-height:1.9;color:var(--s-ink2);max-width:22em;margin:0}
.e-acp-head{margin-bottom:clamp(26px,4cqi,50px)}

.e-acp-dl{columns:2;column-gap:clamp(30px,5cqi,80px);max-width:none}

.e-acp-dl>div{break-inside:avoid}

@container (max-width:820px){.e-acp-dl{columns:1}}

/* ── 代表挨拶：写真なし ── */
.e-msgt{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(30px,6cqi,90px)}

.e-msgt-head{position:sticky;top:110px;align-self:start}

.e-msgt-body{max-width:38em}

@container (max-width:820px){
  .e-msgt{grid-template-columns:minmax(0,1fr)}
  .e-msgt-head{position:static}
}

/* ── 代表挨拶：写真を大きく上に ── */
.e-msgp-img .s-img{aspect-ratio:21/9;border-radius:0}

.e-msgp-tx{margin-top:clamp(26px,4cqi,52px);max-width:40em}

.e-msgp-tx .e-body{margin-top:20px}

/* ── 料金：金額を大きく ── */
.e-price-b .e-price-head{margin-bottom:clamp(30px,4.5cqi,62px)}

.e-pbig{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(26px,4cqi,56px)}

.e-pb{border-top:1px solid var(--s-line);padding-top:clamp(16px,2.4cqi,26px)}

.e-pb-y{display:block;font-family:var(--s-fd);font-weight:var(--s-hw);
  font-size:clamp(30px,4.4cqi,54px);line-height:1.15;letter-spacing:.01em;
  font-variant-numeric:tabular-nums}

.e-pb h3{font-family:var(--s-fd);font-size:clamp(15px,1.6cqi,18px);
  letter-spacing:.05em;margin:14px 0 8px;line-height:1.6}

.e-pb p{font-size:13px;line-height:1.95;color:var(--s-ink2)}

/* ── 料金：見出しが左に貼り付く ── */
.e-price-s{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(34px,6cqi,90px)}

.e-price-s-head{position:sticky;top:110px;align-self:start}

.e-price-s-head .e-note{margin-top:20px}

@container (max-width:820px){
  .e-price-s{grid-template-columns:minmax(0,1fr)}
  .e-price-s-head{position:static}
}

/* ── お客様の声：1件を大きく ── */
.e-voice-1{max-width:30em}

.e-bigq{font-family:var(--s-fd);font-weight:var(--s-hw);
  font-size:clamp(20px,2.8cqi,34px);line-height:1.75;letter-spacing:.03em;
  margin:18px 0 0;padding:0;border:0;text-indent:-.5em}

.e-bigq::before{content:"「"}

.e-bigq::after{content:"」"}

.e-bigq-n{font-size:13px;letter-spacing:.09em;color:var(--s-ink2);margin:24px 0 0}

.e-bigq-n span{margin-left:12px;opacity:.75}

/* ── お客様の声：縦に積む ── */
.e-voice-st .e-voice-head{margin-bottom:clamp(26px,4cqi,54px);max-width:34em}

.e-vst{margin:0;padding:clamp(22px,3.2cqi,38px) 0;border-top:1px solid var(--s-line);
  max-width:44em}

.e-voice-st>.e-vst:last-of-type{border-bottom:1px solid var(--s-line)}

.e-vst blockquote{margin:0;padding:0;border:0;font-size:clamp(15px,1.65cqi,18px);
  line-height:2;letter-spacing:.02em}

.e-vst figcaption{font-size:12.5px;letter-spacing:.09em;color:var(--s-ink2);margin-top:16px}

.e-vst figcaption span{margin-left:12px;opacity:.75}

/* ── サービス：目次（写真なし） ── */
.e-svc-ix{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(34px,6cqi,90px)}

.e-svc-ix-head{position:sticky;top:110px;align-self:start}

.e-ixlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--s-line)}

.e-ixlist li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:6px clamp(18px,2.6cqi,34px);padding:clamp(20px,2.8cqi,30px) 0;
  border-bottom:1px solid var(--s-line)}

.e-ixlist .e-num{grid-row:1/3;padding-top:.3em}

.e-ixlist h3{font-family:var(--s-fd);font-size:clamp(17px,1.9cqi,22px);
  letter-spacing:.04em;margin:0;line-height:1.55}

.e-ixlist p{font-size:14px;line-height:2;color:var(--s-ink2);margin:0}

@container (max-width:820px){
  .e-svc-ix{grid-template-columns:minmax(0,1fr)}
  .e-svc-ix-head{position:static}
}

/* ── サービス：1件目を大きく、残りを2列 ── */
.e-svc-mo-head{margin-bottom:clamp(30px,4.5cqi,58px)}

.e-mo .s-img{border-radius:0}

.e-mo.big{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(22px,3.4cqi,54px);align-items:end;margin-bottom:clamp(34px,5cqi,74px)}

.e-mo.big .s-img{aspect-ratio:16/10}

.e-mo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(24px,3.4cqi,48px)}

.e-mo-grid .e-mo .s-img{aspect-ratio:4/3;margin-bottom:16px}

.e-mo-tx h3{font-family:var(--s-fd);letter-spacing:.04em;margin:10px 0 9px;
  font-size:clamp(16px,1.7cqi,19px)}

.e-mo.big .e-mo-tx h3{font-size:clamp(20px,2.5cqi,28px)}

.e-mo-tx p{font-size:14px;line-height:2;color:var(--s-ink2)}

@container (max-width:820px){.e-mo.big{grid-template-columns:minmax(0,1fr)}}

/* ── サービス：名前を大きく（写真なし） ── */
.e-svc-q-head{margin-bottom:clamp(30px,5cqi,70px);max-width:34em}

.e-q{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3cqi,44px);padding:clamp(26px,4cqi,52px) 0;
  border-top:1px solid var(--s-line)}

.e-q:last-child{border-bottom:1px solid var(--s-line)}

.e-q .e-num{padding-top:.55em}

.e-q-tx h3{font-family:var(--s-fd);font-weight:var(--s-hw);letter-spacing:.03em;
  font-size:clamp(22px,3cqi,38px);line-height:1.45;margin:0 0 14px}

.e-q-tx p{font-size:14.5px;line-height:2.05;color:var(--s-ink2);max-width:36em}

/* ── 選ばれる理由：1件ずつ全幅 ── */
.e-why-w-head{margin-bottom:clamp(34px,5cqi,72px)}

.e-why-one{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  padding:clamp(26px,4cqi,54px) 0;border-top:1px solid var(--s-line)}

.e-why-w>.s-wrap:last-child .e-why-one{border-bottom:1px solid var(--s-line)}

.e-bignum{position:absolute;left:-.06em;top:0;font-family:var(--s-fd);
  font-size:clamp(70px,13cqi,190px);line-height:.82;letter-spacing:-.03em;
  color:var(--s-ink);opacity:.055;pointer-events:none;user-select:none}

.e-why-one-tx{position:relative;padding-left:clamp(0px,6cqi,120px);max-width:44em}

.e-why-one-tx h3{font-family:var(--s-fd);font-size:clamp(19px,2.4cqi,30px);
  letter-spacing:.04em;margin:0 0 14px;line-height:1.5}

.e-why-one-tx p{font-size:14.5px;line-height:2.05;color:var(--s-ink2)}

/* ── 選ばれる理由：2列 ── */
.e-why-p-head{max-width:34em;margin-bottom:clamp(30px,4.5cqi,62px)}

.e-why-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(28px,4cqi,58px) clamp(28px,4.5cqi,70px)}

.e-why-c{border-top:1px solid var(--s-line);padding-top:20px}

.e-why-c h3{font-family:var(--s-fd);font-size:clamp(16px,1.8cqi,20px);
  letter-spacing:.04em;margin:12px 0 10px;line-height:1.6}

.e-why-c p{font-size:14px;line-height:2;color:var(--s-ink2)}

.e-rows>.s-wrap:first-child{margin-bottom:clamp(40px,6cqi,80px)}

.e-rows>.s-wrap+.s-wrap{margin-top:clamp(50px,8cqi,120px)}

.e-row{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(24px,3.2cqi,52px)}

.e-row-img{overflow:hidden}

.e-row-img .s-img{aspect-ratio:4/5;border-radius:0}

.e-row.alt .e-row-img{order:2}

.e-row-txt{padding-inline:clamp(0px,1.4cqi,26px)}

.e-row-txt h3{font-family:var(--s-fd);font-size:clamp(20px,2.5cqi,30px);letter-spacing:.04em;margin:16px 0 18px}

.e-row-txt p{font-size:14.5px;line-height:2.1;color:var(--s-ink2);max-width:30em}

/* 1枚目は左端を画面の外まで出して、左右の対称を崩す */
.e-row:not(.alt) .e-row-img{margin-left:calc(-1*max(0px,(100cqi - var(--s-w))/2 + 24px))}

.e-row.alt .e-row-img{margin-right:calc(-1*max(0px,(100cqi - var(--s-w))/2 + 24px))}

@container (max-width:760px){
  .e-row,.e-row.alt{grid-template-columns:minmax(0,1fr)}

  .e-row.alt .e-row-img{order:0}

  .e-row .e-row-img{margin-inline:0}

  .e-row-img .s-img{aspect-ratio:5/4}}

/* ── 写真2枚（段差をつけて置く） ──────────────────────────────── */
.e-duo{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4cqi,32px);align-items:start}

.e-duo-head{grid-column:1/-1;margin-bottom:clamp(20px,3cqi,40px)}

.e-fig{margin:0}

.e-fig.f1{grid-column:1/8}

.e-fig.f2{grid-column:8/13;margin-top:clamp(40px,8cqi,120px)}

.e-fig .s-img{border-radius:0}

.e-fig.f1 .s-img{aspect-ratio:4/3}

.e-fig.f2 .s-img{aspect-ratio:3/4}

.e-fig figcaption{display:flex;flex-direction:column;gap:5px;margin-top:16px;font-size:12.5px;letter-spacing:.06em}

.e-fig figcaption b{font-family:var(--s-fd);font-size:15px}

.e-fig figcaption span{color:var(--s-ink2)}

@container (max-width:760px){
  .e-fig.f1,.e-fig.f2{grid-column:1/-1}

  .e-fig.f2{margin-top:28px}}

/* ── 配られたバナーをそのまま並べる ─────────────────────────── */
.e-banners{display:flex;flex-direction:column;gap:clamp(24px,4cqi,56px)}

.e-banners-head{margin-bottom:clamp(8px,2cqi,20px)}

.e-banners figure{margin:0}

/* 切らずに、元の縦横比のまま置く。切ると焼き込まれた文字が欠ける */
.e-banners .s-img{aspect-ratio:auto;border-radius:0;background:none}

.e-banners .s-img>img{height:auto;object-fit:contain}

.e-banners figcaption{margin-top:12px;font-size:12.5px;line-height:1.9;color:var(--s-ink2)}

/* ── 料金（罫だけの一覧。表の枠を描かない） ──────────────────── */
.e-price-head{margin-bottom:clamp(26px,4cqi,50px)}

.e-plist{margin:0}

.e-prow{display:flex;align-items:baseline;gap:20px;padding:22px 0;border-bottom:1px solid var(--s-line)}

.e-prow:first-child{border-top:1px solid var(--s-line)}

.e-prow dt{flex:1;font-size:15px;letter-spacing:.03em;display:flex;flex-direction:column;gap:5px}

.e-prow dt small{font-size:12.5px;color:var(--s-ink2);letter-spacing:.02em}

.e-prow dd{font-family:var(--s-fd);font-size:clamp(17px,2cqi,23px);letter-spacing:.03em;margin:0;white-space:nowrap}

.e-note{margin-top:20px;font-size:12.5px;color:var(--s-ink2)}

/* ── ご利用の流れ（左が貼り付き、右が流れる） ────────────────── */
.e-steps{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6cqi,90px)}

.e-sticky{position:sticky;top:96px}

.e-steps-r{list-style:none;margin:0;padding:0}

.e-steps-r li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;padding:30px 0;border-bottom:1px solid var(--s-line)}

.e-steps-r li:first-child{border-top:1px solid var(--s-line)}

.e-steps-r h3{font-family:var(--s-fd);font-size:17px;letter-spacing:.04em;margin-bottom:9px}

.e-steps-r p{font-size:14px;line-height:1.95;color:var(--s-ink2)}

.e-steps-r .e-num{padding-top:.4em}

@container (max-width:820px){
  .e-steps{grid-template-columns:minmax(0,1fr)}

  .e-sticky{position:static}}

/* ── よくある質問（罫だけ） ───────────────────────────────────── */
.e-faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,6cqi,90px)}

.e-faq-r details{border-bottom:1px solid var(--s-line)}

.e-faq-r details:first-child{border-top:1px solid var(--s-line)}

.e-faq-r summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:15.5px;letter-spacing:.03em}

.e-faq-r summary::-webkit-details-marker{display:none}

.e-faq-r summary i{position:relative;width:13px;height:13px;flex:none}

.e-faq-r summary i:before,.e-faq-r summary i:after{content:"";position:absolute;inset:50% 0 auto;height:1px;background:currentColor}

.e-faq-r summary i:after{transform:rotate(90deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}

.e-faq-r details[open] summary i:after{transform:rotate(0)}

.e-faq-r p{padding:0 0 26px;font-size:14px;line-height:2.05;color:var(--s-ink2);max-width:40em}

@container (max-width:820px){.e-faq{grid-template-columns:minmax(0,1fr)}}

/* ── アクセス ─────────────────────────────────────────────────── */
.e-access{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6cqi,90px);align-items:center}

.e-dl{margin-top:clamp(20px,3cqi,38px)}

.e-dl>div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid var(--s-line)}

.e-dl>div:first-child{border-top:1px solid var(--s-line)}

.e-dl dt{font-size:12px;letter-spacing:.14em;color:var(--s-ink2);padding-top:.2em}

.e-dl dd{margin:0;font-size:14.5px;line-height:1.8}
/* メール・公式LINEの行は押せる。ブラウザ既定の青のままだと、
   暗い背景の上でほとんど読めない（実際に読めなかった） */
.e-dl dd a{color:inherit;text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px;text-decoration-color:var(--s-line)}
.e-dl dd a:hover{text-decoration-color:currentColor}
/* スマホでは指で押す。文字の高さ（21px）のままだと押しにくい。
   上下に余白を足して、押せる高さ（36px以上）にする */
@media (max-width:480px){.e-dl dd a{display:inline-block;padding-block:8px}}

.e-access-r .s-img{aspect-ratio:3/4;border-radius:0}

@container (max-width:820px){
  .e-access{grid-template-columns:minmax(0,1fr)}

  .e-access-r .s-img{aspect-ratio:4/3}}

/* ── 締めの呼びかけ ───────────────────────────────────────────── */
.e-cta{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(420px,64svh,660px);display:grid;grid-template-columns:minmax(0,1fr);align-content:center}

.e-cta-bg{position:absolute;inset:0;z-index:0}

.e-cta-bg .s-img{position:absolute;inset:-10% 0;aspect-ratio:auto;border-radius:0}

.e-cta-bg .s-img>img{height:100%}

.e-cta-bg:after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--s-ink) 62%,transparent)}

/* width:100% を必ず書く。
   .s-wrap は margin:0 auto を持つ。grid の中で左右が auto の箱は
   引き伸ばされず「中身の幅」になる。ところが .e-cta-in は
   container-type:inline-size を持つので、中身は幅の計算に加われない。
   結果、幅が左右の余白ぶん（32px）だけになり、電話番号もボタンも
   1文字ずつ縦に折れた。公開後に見つかった。
   同じ組み合わせの .e-hero-txt が無事なのは width:100% があるから。 */
.e-cta-in{position:relative;z-index:1;width:100%;color:#fff;text-align:center;padding-block:clamp(60px,10cqi,150px)}

.e-cta-in .e-lead{color:rgba(255,255,255,.82);margin:26px auto 0}

.e-cta-in .e-btns{justify-content:center}

.e-bigtel{display:block;font-family:var(--s-fd);font-size:clamp(30px,5cqi,58px);letter-spacing:.05em;text-decoration:none;color:inherit;margin-top:34px}

.e-hours{display:block;font-size:12.5px;letter-spacing:.1em;opacity:.75;margin-top:10px}

/* ── フッター ─────────────────────────────────────────────────── */
.e-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}

.e-foot p{font-size:12.5px;line-height:2;opacity:.75;margin-top:14px}

.e-foot .e-bigtel.sm{font-size:clamp(22px,3cqi,32px);margin-top:0}
/* スマホで押す先。文字の高さだけだと33pxで、指には小さい */
@media (max-width:480px){.e-bigtel.sm{padding-block:4px;min-height:36px}}

.e-fnav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 30px;padding-top:28px;font-size:13px;letter-spacing:.05em}

/* 指で押す的は、小さすぎると外す。狭い画面では高さを確保する */
.e-fnav a{display:inline-flex;align-items:center;min-height:44px}

.e-fnav a{color:inherit;text-decoration:none;opacity:.8}

.e-fnav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

.e-foot small{grid-column:1/-1;font-size:11px;letter-spacing:.08em;opacity:.5;padding-top:30px;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}

@container (max-width:640px){.e-foot{grid-template-columns:minmax(0,1fr)}}

/* ══════════════════════════════════════════════════════════════════════
   デザインスタイル（STYLE01〜10）
   色・書体・余白・角丸はテーマ変数で決まるので、ここには
   「背景の層」と「暗い地のときの調整」だけを書く。
   src/styles.ts を参照。
   ══════════════════════════════════════════════════════════════════════ */

/* 背景の層は --s-drift-* でゆっくり動かせる（動きのプリセット次第） */
@property --s-drift-x{syntax:"<percentage>";inherits:true;initial-value:0%}

@property --s-drift-y{syntax:"<percentage>";inherits:true;initial-value:0%}

.site[data-style]{position:relative;overflow-x:clip;--s-line:color-mix(in srgb,var(--s-ink) 16%,transparent);--s-ink2:color-mix(in srgb,var(--s-ink) 62%,var(--s-bg))}

/* 色の層。複数指定されたら重ねる */
.site[data-style]:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat}

.site[data-style] .sec{position:relative;z-index:1}
/* ヘッダーを上に貼り付ける。スクロールしても消えない。
   すぐ上の決まりが .sec の position を relative にしているので、
   同じ強さで書かないと効かない（弱く書いて効かなかった）。
   地の色を敷かないと、下の中身が透けて文字が重なる。 */
.site[data-style] .sec.hdr-sticky{position:sticky;top:0;z-index:20;
  background:var(--s-bg);box-shadow:0 1px 0 color-mix(in srgb,var(--s-ink) 10%,transparent)}

/* 01 subtle radial gradient */
.site[data-bg~="radial"]:before{
  background-image:
    radial-gradient(120% 70% at calc(78% + var(--s-drift-x,0%)) calc(-6% + var(--s-drift-y,0%)),color-mix(in srgb,var(--s-accent) 14%,transparent) 0%,transparent 58%),
    radial-gradient(90% 60% at calc(6% - var(--s-drift-x,0%)) calc(102% - var(--s-drift-y,0%)),color-mix(in srgb,var(--s-primary) 10%,transparent) 0%,transparent 62%)}

/* 08 soft glow */
.site[data-bg~="glow"]:before{
  background-image:radial-gradient(70% 46% at calc(50% + var(--s-drift-x,0%)) calc(22% + var(--s-drift-y,0%)),color-mix(in srgb,var(--s-accent) 16%,transparent) 0%,transparent 72%)}

/* 07 grid pattern */
.site[data-bg~="grid"]:before{
  opacity:.5;
  background-image:linear-gradient(var(--s-ink) 1px,transparent 1px),linear-gradient(90deg,var(--s-ink) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 78%)}

/* 06 geometric line pattern */
.site[data-bg~="lines"]:before{
  opacity:.5;
  background-image:repeating-linear-gradient(90deg,color-mix(in srgb,var(--s-ink) 7%,transparent) 0 1px,transparent 1px calc(100% / 12))}

/* 04 abstract SVG shape */
.site[data-bg~="shape"]:before{
  background-image:conic-gradient(from 210deg at calc(88% + var(--s-drift-x,0%)) 8%,color-mix(in srgb,var(--s-primary) 13%,transparent) 0deg,transparent 72deg);
  background-size:100% 62vh}

/* 02 blurred gradient orb */
.site[data-bg~="blob"]:before{
  filter:blur(70px);opacity:.5;
  background-image:
    radial-gradient(38vw 38vw at calc(6% + var(--s-drift-x,0%)) calc(4% + var(--s-drift-y,0%)),color-mix(in srgb,var(--s-primary) 26%,transparent) 0%,transparent 70%),
    radial-gradient(42vw 42vw at calc(94% - var(--s-drift-x,0%)) calc(92% - var(--s-drift-y,0%)),color-mix(in srgb,var(--s-accent) 26%,transparent) 0%,transparent 70%)}

/* 写真の無い組み方は、列を詰める。2列のまま片方を空けると間が抜ける */
.e-hero-t.nopic,.e-ctas.nopic,.e-msg.nopic{grid-template-columns:minmax(0,1fr)}

.e-msg.nopic .e-msg-txt{max-width:44em}

/* 写真の無いアクセスは1列に。2列のまま右を空けると、間が抜ける */
.e-access.nopic{grid-template-columns:minmax(0,1fr)}

.e-access.nopic .e-dl{columns:2;column-gap:clamp(30px,5cqi,70px);max-width:none}

.e-access.nopic .e-dl>div{break-inside:avoid}

@container (max-width:820px){.e-access.nopic .e-dl{columns:1}}

/* 見出しの下を走る線。動きが入らない環境では、ただの短い罫になる */
.e-runline{display:block;height:2px;width:clamp(40px,6cqi,86px);margin-top:.5em;
  background:var(--s-accent);transform-origin:left center}

/* ── 鈴蘭（すずらん）の線画 ──
   社名が花の名前のときに使う。花を描いた背景は、写真を借りてくる
   より正直で、そのお店だけのものになる。
   濃さは 0.05 前後。本文の読みやすさを絶対に邪魔しない。 */
.site[data-bg~="suzuran"]:before{
  opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22240%22%20viewBox%3D%220%200%20180%20240%22%20fill%3D%22none%22%20stroke%3D%22%2523000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M96%20232C96%20176%2092%20126%2074%2086%22%2F%3E%3Cpath%20d%3D%22M74%2086C58%2058%2044%2044%2028%2036%22%2F%3E%3Cpath%20d%3D%22M74%2086C86%2056%20100%2040%20118%2028%22%2F%3E%3Cpath%20d%3D%22M96%20150C96%20150%2078%20142%2070%20126%22%2F%3E%3Cpath%20d%3D%22M96%20186C96%20186%20114%20178%20122%20162%22%2F%3E%3Cellipse%20cx%3D%2264%22%20cy%3D%22120%22%20rx%3D%2213%22%20ry%3D%2215%22%2F%3E%3Cpath%20d%3D%22M53%20126c4%207%2018%207%2022%200%22%2F%3E%3Cellipse%20cx%3D%22128%22%20cy%3D%22156%22%20rx%3D%2212%22%20ry%3D%2214%22%2F%3E%3Cpath%20d%3D%22M118%20162c4%206%2016%206%2020%200%22%2F%3E%3Cellipse%20cx%3D%2288%22%20cy%3D%2296%22%20rx%3D%2211%22%20ry%3D%2213%22%2F%3E%3Cpath%20d%3D%22M79%20101c3%206%2015%206%2018%200%22%2F%3E%3Cpath%20d%3D%22M64%20105v-9M128%20142v-9M88%2083v-8%22%2F%3E%3C%2Fsvg%3E");
  background-size:clamp(150px,14vw,230px) auto;
  background-repeat:repeat;
  background-position:calc(0px + var(--s-drift-x,0%)) calc(0px + var(--s-drift-y,0%))}

/* 花をひとつだけ、大きく置く。ページの頭の余白に効く */
.site[data-bg~="bloom"]:before{
  opacity:.07;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22240%22%20viewBox%3D%220%200%20180%20240%22%20fill%3D%22none%22%20stroke%3D%22%2523000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M96%20232C96%20176%2092%20126%2074%2086%22%2F%3E%3Cpath%20d%3D%22M74%2086C58%2058%2044%2044%2028%2036%22%2F%3E%3Cpath%20d%3D%22M74%2086C86%2056%20100%2040%20118%2028%22%2F%3E%3Cpath%20d%3D%22M96%20150C96%20150%2078%20142%2070%20126%22%2F%3E%3Cpath%20d%3D%22M96%20186C96%20186%20114%20178%20122%20162%22%2F%3E%3Cellipse%20cx%3D%2264%22%20cy%3D%22120%22%20rx%3D%2213%22%20ry%3D%2215%22%2F%3E%3Cpath%20d%3D%22M53%20126c4%207%2018%207%2022%200%22%2F%3E%3Cellipse%20cx%3D%22128%22%20cy%3D%22156%22%20rx%3D%2212%22%20ry%3D%2214%22%2F%3E%3Cpath%20d%3D%22M118%20162c4%206%2016%206%2020%200%22%2F%3E%3Cellipse%20cx%3D%2288%22%20cy%3D%2296%22%20rx%3D%2211%22%20ry%3D%2213%22%2F%3E%3Cpath%20d%3D%22M79%20101c3%206%2015%206%2018%200%22%2F%3E%3Cpath%20d%3D%22M64%20105v-9M128%20142v-9M88%2083v-8%22%2F%3E%3C%2Fsvg%3E");
  background-size:auto clamp(340px,52vh,620px);
  background-repeat:no-repeat;
  background-position:calc(92% + var(--s-drift-x,0%)) calc(4% + var(--s-drift-y,0%))}

/* 03 grain / noise texture。いちばん手前の薄い層 */
.site[data-bg~="grain"]:after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 05 oversized typography。節ごとの背面の大きな欧文（.e-wm）を出すかどうか。
   本文に重なると装飾ではなく汚れに見えるので、使うスタイルを選ぶ。 */
.site[data-style]:not([data-bg~="type"]) .e-wm{display:none}

/* 角丸ゼロのスタイルでは、写真とボタンの角も立てる */
.site[data-style]:is([data-style="minimal-luxury"],[data-style="dark-cinematic"],[data-style="editorial"],[data-style="jp-modern"],[data-style="creative-studio"]) .s-img,
.site[data-style]:is([data-style="minimal-luxury"],[data-style="dark-cinematic"],[data-style="editorial"],[data-style="jp-modern"],[data-style="creative-studio"]) .s-btn{border-radius:0}

/* ボタンは全スタイル共通で、細く・字間を広く・ゆっくり反転 */
.site[data-style] .s-btn{
  font-family:var(--s-fb);font-size:12.5px;letter-spacing:.14em;padding:17px 34px;border-width:1px;
  transition:background-color .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1)}

.site[data-style] .s-btn.ghost{background:transparent;border-color:currentColor}

.site[data-style] .s-btn.ghost:hover{background:var(--s-ink);color:var(--s-bg);border-color:var(--s-ink)}

.site[data-style] .e-cta-in .s-btn.ghost:hover{background:#fff;color:#111;border-color:#fff}

/* ── 地が暗いスタイル ─────────────────────────────────────────── */
.site[data-tone="dark"]{--s-line:color-mix(in srgb,var(--s-ink) 22%,transparent);--s-ink2:color-mix(in srgb,var(--s-ink) 66%,var(--s-bg))}

.site[data-tone="dark"] .s-img{background:color-mix(in srgb,var(--s-ink) 10%,var(--s-bg))}

.site[data-tone="dark"] .e-hero-img:after{
  background:linear-gradient(94deg,var(--s-bg) 0%,var(--s-bg) 24%,color-mix(in srgb,var(--s-bg) 86%,transparent) 44%,color-mix(in srgb,var(--s-bg) 34%,transparent) 60%,transparent 76%)}

.site[data-tone="dark"] .s-btn.ghost:hover{background:var(--s-ink);color:var(--s-bg)}

/* 暗い地では主色が明るいので、ボタンの文字は地の色にしないと読めない */
.site[data-tone="dark"] .s-btn:not(.ghost):not(.text){color:var(--s-bg)}

/* ── 動きの前後 ──────────────────────────────────────────────────
   隠す指定はCSSに書かない。JSが動くときだけJS自身が隠して、出し終わったら
   消す。こうしておくと、GSAPが読み込めなかったときや途中で失敗したときに
   中身が見えないまま残ることがない。 */
.e-mask .e-in,.e-rise{will-change:transform,opacity}

/* ── 下層ページの見出し ───────────────────────────────────────── */
.e-phead{padding-block:clamp(30px,5cqi,70px) 0}

.e-h1.sm{font-size:min(clamp(28px,4.1vw,54px),calc(96cqi / (var(--s-hch,8) + .3)))}

.e-phead .e-lead{margin-top:26px}

.e-phead-img{margin-top:clamp(34px,5cqi,64px)}

.e-phead-img .s-img{aspect-ratio:21/9;border-radius:0}

/* 切らずに、元の縦横比のまま出す。縦長の写真のとき */
.e-phead-img.whole .s-img{aspect-ratio:auto;background:none}

.e-phead-img.whole .s-img>img{height:auto;object-fit:contain}

.e-phead-img.whole{max-width:min(100%,470px)}

.e-phead-cap{margin-top:12px;font-size:12.5px;line-height:1.9;color:var(--s-ink2)}

@container (max-width:760px){.e-phead-img .s-img{aspect-ratio:4/3}

  .e-phead-img.whole .s-img{aspect-ratio:auto}}

/* ── 代表のことば ─────────────────────────────────────────────── */
.e-msg{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(30px,6cqi,88px);align-items:start}

.e-msg-img .s-img{aspect-ratio:3/4;border-radius:0;position:sticky;top:110px}

.e-sign{margin-top:30px;font-family:var(--s-fd);font-size:15px;letter-spacing:.08em;text-align:right}

@container (max-width:820px){
  .e-msg{grid-template-columns:minmax(0,1fr)}

  .e-msg-img .s-img{position:static;aspect-ratio:4/3}}

/* 長い文章の組み。1行を読みやすい長さで止める */
/* 長い住所（URL）は切れ目が無く、日本語のようには折り返せない。 入れておかないと画面からはみ出す（375pxで記事2本が実際にはみ出していた） */
.e-body p,.e-body li,.e-aul li,.e-anote,.e-aq{overflow-wrap:anywhere}
.e-body p{font-size:15px;line-height:2.15;color:var(--s-ink2);max-width:36em}

.e-body p+p{margin-top:1.4em}

/* .site h3 の「margin:0」のほうが強く、この余白が効いていなかった（2026-10-14）。
   .site を付けて同じ強さ以上にする */
.site .e-ah{font-family:var(--s-fd);font-size:clamp(17px,2cqi,22px);letter-spacing:.05em;
  margin:2.6em 0 1em;padding-left:14px;border-left:2px solid var(--s-accent);color:var(--s-ink)}

.site .e-ah:first-child{margin-top:0}

.e-aul{list-style:none;padding:0;margin:1.4em 0;max-width:36em}

.e-aul li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--s-line);font-size:14.5px;line-height:1.9}

.e-aul li:before{content:"";position:absolute;left:2px;top:1.5em;width:8px;height:1px;background:var(--s-accent)}

.e-anote{font-size:12.5px;line-height:1.9;color:var(--s-ink2);opacity:.85;margin-top:2em;
  padding:16px 18px;border:1px solid var(--s-line);max-width:40em}

/* 注釈は枠のある箱。**その直後に小見出しが来ると詰まって見える。**
   文章のあとより、箱のあとのほうが余白が要る */
.site .e-anote + .e-ah{margin-top:3.8em}

/* ── お悩み（箱もアイコンも使わない） ───────────────────────── */
.e-worries{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,6cqi,90px)}

.e-worries-head{position:sticky;top:110px;align-self:start}

.e-wlist{list-style:none;margin:0;padding:0}

.e-wlist li{padding:20px 0 20px 30px;border-bottom:1px solid var(--s-line);font-size:15.5px;letter-spacing:.03em;position:relative}

.e-wlist li:first-child{border-top:1px solid var(--s-line)}

.e-wlist li:before{content:"";position:absolute;left:2px;top:1.85em;width:14px;height:1px;background:var(--s-accent)}

@container (max-width:820px){
  .e-worries{grid-template-columns:minmax(0,1fr)}

  .e-worries-head{position:static}}

/* ── 長い説明（左の見出しが貼り付く） ───────────────────────── */
.e-art{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(30px,5cqi,72px)}

/* 貼り付く見出しの列は狭い。いちばん大きな字のままだと、
   「狭いカプセルでは」が「狭いカプ／セルでは」と途中で折れる */
.e-art-l .e-h,.e-faq-l .e-h,.e-form-l .e-h,.e-voice-head .e-h{font-size:clamp(24px,2.9cqi,36px)}

@container (max-width:820px){.e-art{grid-template-columns:minmax(0,1fr)}}

/* ══════════════════════════════════════════════════════════════════════
   ファーストビューの組み方（エディトリアル系）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 中央に大きく、写真は下に全幅 ─────────────────────────────── */
.e-hero-c{display:grid;gap:clamp(36px,6cqi,76px)}

.e-hero-c-txt{text-align:center;padding-top:clamp(50px,8cqi,120px)}

.e-hero-c-txt .e-lead{margin:28px auto 0}

.e-hero-c-txt .e-btns{justify-content:center}

.e-hero-c-img .s-img{aspect-ratio:21/9;border-radius:0}

@container (max-width:760px){.e-hero-c-img .s-img{aspect-ratio:4/3}}

/* ── 縦2分割。左は地色の面、右は写真いっぱい ────────────────── */
.e-hero-s{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(480px,80svh,820px)}

.e-hero-s-txt{display:grid;align-content:center;padding:clamp(36px,6cqi,90px);
  padding-left:max(clamp(36px,6cqi,90px),(100cqi - var(--s-w))/2);background:var(--s-surface)}

.e-hero-s-img{position:relative;overflow:hidden}

.e-hero-s-img .s-img{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}

@container (max-width:760px){
  .e-hero-s{grid-template-columns:minmax(0,1fr);min-height:0}

  .e-hero-s-img{height:52svh}

  .e-hero-s-txt{padding-inline:24px}}

/* ── 写真全面、見出しは下端 ──────────────────────────────────── */
.e-hero-b{position:relative;display:grid;align-content:end;min-height:clamp(520px,88svh,900px);isolation:isolate}

.e-hero-b-img{position:absolute;inset:0;z-index:0;overflow:hidden}

.e-hero-b-img .s-img{position:absolute;inset:-6% 0;aspect-ratio:auto;border-radius:0}

.e-hero-b-img:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,#000 62%,transparent) 100%)}

.e-hero-b-txt{position:relative;z-index:1;color:#fff;padding-bottom:clamp(44px,7cqi,96px)}

.e-hero-b-txt .e-lead{color:rgba(255,255,255,.86);margin-top:22px}

.e-hero-b-txt .e-eyebrow{color:#fff;opacity:.8}

/* ── 文字が主役。写真は右下に添える ─────────────────────────── */
.e-hero-t{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(24px,4cqi,60px);align-items:end;padding-block:clamp(50px,8cqi,120px)}

.e-h1.xl{font-size:min(clamp(38px,7.8vw,110px),calc(96cqi / (var(--s-hch,8) + .2)));
  line-height:1.18;letter-spacing:.01em}

.e-hero-t-txt{grid-column:1/-1}

.e-hero-t-side{align-self:start;padding-top:clamp(20px,3cqi,40px)}

.e-hero-t-img{order:-1;grid-column:2;grid-row:2}

.e-hero-t-img .s-img{aspect-ratio:4/5;border-radius:0}

.e-hero-t-side{grid-column:1;grid-row:2}

@container (max-width:760px){
  .e-hero-t{grid-template-columns:minmax(0,1fr)}

  .e-hero-t-side,.e-hero-t-img{grid-column:1;grid-row:auto}

  .e-hero-t-img{order:0}

  .e-hero-t-img .s-img{aspect-ratio:4/3}}

/* ── 写真2枚の段差 ───────────────────────────────────────────── */
.e-hero-d{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4cqi,30px);
  align-items:start;padding-block:clamp(40px,6cqi,90px)}

.e-hero-d-a{grid-column:1/6}

.e-hero-d-a .s-img{aspect-ratio:3/4;border-radius:0}

.e-hero-d-txt{grid-column:6/13;padding-top:clamp(20px,5cqi,90px)}

.e-hero-d-b{grid-column:7/13;margin-top:clamp(24px,4cqi,60px)}

.e-hero-d-b .s-img{aspect-ratio:16/10;border-radius:0}

@container (max-width:760px){
  .e-hero-d-a,.e-hero-d-txt,.e-hero-d-b{grid-column:1/-1}

  .e-hero-d-a .s-img{aspect-ratio:4/3}

  .e-hero-d-txt{padding-top:26px}}

/* ── 問い合わせフォーム ───────────────────────────────────────── */
.e-form{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,6cqi,90px)}

.e-form-r{display:flex;flex-direction:column;gap:26px;max-width:34em}

.e-f{display:grid;gap:9px}

.e-f>span{font-size:12.5px;letter-spacing:.1em;color:var(--s-ink2);display:flex;align-items:center;gap:9px}

.e-f>span i{font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--s-accent);
  border:1px solid currentColor;padding:1px 6px}

.e-f input,.e-f textarea,.e-f select{font:inherit;font-size:15px;color:inherit;background:transparent;
  border:0;border-bottom:1px solid var(--s-line);padding:11px 2px;border-radius:0;
  transition:border-color .4s cubic-bezier(.16,1,.3,1)}

.e-f textarea{border:1px solid var(--s-line);padding:13px 14px;resize:vertical}

.e-f input:focus,.e-f textarea:focus,.e-f select:focus{outline:0;border-color:var(--s-accent)}

.e-f input:disabled,.e-f textarea:disabled,.e-f select:disabled{opacity:.45;cursor:not-allowed}

/* ラジオ・チェックは、指で押せる大きさを確保する（44px） */
.e-opts{display:flex;flex-wrap:wrap;gap:4px 22px}

.e-opt{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;font-size:15px}

.e-opt input{width:19px;height:19px;flex:none;border:0;padding:0;accent-color:var(--s-accent)}

.e-opt input:disabled+span{opacity:.45}

.e-form-r .s-btn{align-self:flex-start;margin-top:6px}

/* お知らせの一覧。罫だけで並べる。箱で囲わない */
.e-news{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,6cqi,90px)}

.e-nlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--s-line)}

.e-nlist li{border-bottom:1px solid var(--s-line)}

.e-nlist a,.e-nlist>li>span{display:flex;align-items:baseline;gap:clamp(12px,2cqi,24px);
  flex-wrap:wrap;padding:clamp(15px,2.2cqi,22px) 2px;color:inherit;text-decoration:none;
  min-height:44px;transition:opacity .4s cubic-bezier(.16,1,.3,1)}

.e-nlist a:hover{opacity:.6}

.e-nlist time{font-size:12.5px;letter-spacing:.09em;color:var(--s-ink2);flex:none;
  font-variant-numeric:tabular-nums}

/* 会員限定の印。一覧で、誰でも読める記事と見分けるため。
   押してから『読めません』と分かるのは良くない */
.e-lock{display:inline-block;font-size:11px;letter-spacing:.08em;padding:2px 8px;
  border:1px solid var(--s-accent);border-radius:999px;color:var(--s-accent);
  line-height:1.7;white-space:nowrap;margin-right:2px}
.e-ncat{font-size:11px;letter-spacing:.1em;color:var(--s-accent);flex:none}

.e-ntitle{font-size:clamp(15px,1.5cqi,17px);line-height:1.7;flex:1 1 14em;min-width:0}

.e-adate{font-size:12.5px;letter-spacing:.09em;color:var(--s-ink2);margin:14px 0 0}

@container (max-width:820px){.e-news{grid-template-columns:minmax(0,1fr)}}

.e-fnote{font-size:12px;line-height:1.9;color:var(--s-ink2);opacity:.85}

@container (max-width:820px){.e-form{grid-template-columns:minmax(0,1fr)}}

/* ── SNS ─────────────────────────────────────────────────────── */
.e-sns{grid-column:1/-1;display:flex;gap:20px;padding-top:10px;font-size:12.5px;letter-spacing:.08em}

.e-sns a{color:inherit;text-decoration:none;opacity:.8;display:inline-flex;align-items:center;min-height:44px}

.e-sns a>span,.e-sns a{border-bottom:0}

.e-sns a{text-decoration:underline;text-underline-offset:5px}

.e-sns a:hover{opacity:1}

/* ロゴ画像。文字のロゴと同じ高さに揃える */
.e-logoimg{display:block;height:46px;width:auto;object-fit:contain}

.e-foot .e-logoimg{height:54px}

/* ロゴは背景を透明にしたPNGを使う。白地のまま置くと四角く浮く。
   暗い地では、黒い文字の部分だけを明るくする（葉の緑はそのまま残す） */
.s-sec[data-bg="dark"] .e-logoimg,.site[data-tone="dark"] .e-logoimg{filter:brightness(0) invert(1);opacity:.92}

.e-logo{display:inline-flex;align-items:center;gap:.6em}
/* 絵のロゴの隣に置く屋号。絵より小さく、少し字間を開けて添える */
/* カード型の描き方のヘッダーに置くロゴの画像 */
.logo .logoimg{display:block;height:34px;width:auto;object-fit:contain}
@media (max-width:560px){.logo .logoimg{height:28px}}
.e-logotext{font-family:var(--s-fd);font-size:15px;letter-spacing:.1em;white-space:nowrap}
@container (max-width:560px){.e-logotext{font-size:13px;letter-spacing:.06em}}

@container (max-width:900px){.e-logoimg{height:40px}}

@container (max-width:560px){.e-logoimg{height:34px}}

/* ロゴも押せる的。高さを確保する */
.e-logo{min-height:44px}

/* ── お客様の声（罫だけ。星も点数も出さない） ───────────────── */
.e-voice{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,6cqi,90px)}

.e-voice-head{position:sticky;top:110px;align-self:start}

.e-voice-list{display:flex;flex-direction:column}

.e-voice figure{margin:0;padding:30px 0;border-bottom:1px solid var(--s-line)}

.e-voice figure:first-child{border-top:1px solid var(--s-line)}

.e-voice blockquote{margin:0;font-size:15.5px;line-height:2.05;letter-spacing:.02em}

.e-voice blockquote:before{content:"「"}

.e-voice blockquote:after{content:"」"}

.e-voice figcaption{margin-top:14px;font-size:12.5px;letter-spacing:.08em;color:var(--s-ink2);
  display:flex;gap:14px;align-items:baseline}

.e-voice figcaption span{opacity:.75}

/* いただいたお手紙などの写真。切らずに、元の縦横比のまま置く */
.e-voice-photo{grid-column:2;margin:clamp(24px,4cqi,44px) 0 0}

.e-voice-photo .s-img{aspect-ratio:auto;border-radius:0;background:none}

.e-voice-photo .s-img>img{height:auto;object-fit:contain}

.e-voice-photo figcaption{margin-top:12px;font-size:12px;line-height:1.9;color:var(--s-ink2)}

@container (max-width:820px){
  .e-voice{grid-template-columns:minmax(0,1fr)}

  .e-voice-head{position:static}

  .e-voice-photo{grid-column:1}}

/* 見出しを出さないとき（ページ見出しで足りているとき）は1列にする */
.e-faq.nohead{grid-template-columns:minmax(0,1fr)}

.e-faq.nohead .e-faq-r{max-width:52em;margin-inline:auto}


/* PCで電話のリンクを押したときの番号表示（document.ts の TEL_JS） */
#s-telpop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}
#s-telpop .tp-veil{position:absolute;inset:0;background:rgba(20,20,20,.45)}
#s-telpop .tp-box{position:relative;background:#fff;color:#222;padding:34px 40px 28px;min-width:300px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.25)}
#s-telpop .tp-k{font-size:13px;letter-spacing:.18em;color:#777;margin:0}
#s-telpop .tp-n{font-size:34px;font-weight:700;letter-spacing:.04em;margin:10px 0 6px}
#s-telpop .tp-h{font-size:15px;font-weight:600;margin:0 0 6px}
#s-telpop .tp-s{font-size:13px;color:#777;margin:0 0 20px}
#s-telpop .tp-b{display:flex;gap:10px;justify-content:center}
#s-telpop button{font:inherit;font-size:14px;padding:10px 18px;border:1px solid #333;background:#fff;color:#222;cursor:pointer}
#s-telpop .tp-copy{background:#333;color:#fff}
#s-telpop .tp-l{margin:22px 0 0;padding-top:16px;border-top:1px solid #eee;font-size:13px;color:#555}
#s-telpop .tp-l a{display:inline-block;margin-left:.6em;padding:8px 16px;background:#06c755;color:#fff;text-decoration:none;font-weight:700}

/* 写真の上のボタンが長い文字になると、スマホで横にはみ出す（FINEでLINEを足して起きた）。
   狭い画面では縦に積んで、幅いっぱいにする */
@media (max-width:600px){
  .site .e-hero-txt>.e-btns{white-space:normal}
  .site .e-hero-txt>.e-btns .ctas{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .site .e-hero-txt>.e-btns .s-btn{justify-content:center;text-align:center;width:100%;margin:0}}
/* 流れの見出しの下に置く連絡ボタン。左の列は細いので、縦に積んで幅をそろえる */
.site .e-steps-l .e-btns{margin-top:28px;white-space:normal}
.site .e-steps-l .e-btns .ctas{display:flex;flex-direction:column;align-items:stretch;gap:10px;max-width:280px}
.site .e-steps-l .e-btns .s-btn{justify-content:center;text-align:center;width:100%;margin:0}

.e-parallax>img{transform-origin:center;will-change:transform}
.site[data-motion] .e-parallax>img{height:114%;object-position:center}
.e-glow{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.08;
  background:radial-gradient(60% 40% at 50% 30%,var(--s-accent),transparent 70%)}
.e-blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.e-blobs i{position:absolute;width:46vw;height:46vw;border-radius:50%;filter:blur(90px);opacity:.1}
.e-blobs i:first-child{left:-8vw;top:-6vw;background:var(--s-primary)}
.e-blobs i:last-child{right:-10vw;bottom:-8vw;background:var(--s-accent)}
.e-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;
  background-image:linear-gradient(var(--s-ink) 1px,transparent 1px),linear-gradient(90deg,var(--s-ink) 1px,transparent 1px);
  background-size:40px 40px}
.e-cursor{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  z-index:9;pointer-events:none;background:radial-gradient(circle,var(--s-accent),transparent 70%);opacity:.5}