/* ペット海洋散骨 なぎのふね（架空のサービスのデザインサンプル）
   トーン: 供養なので静か〜上品・強さの上限2。暗い背景・原色・バネの曲線・弾む動き・流れる帯は使わない
   色: 地＝生成り／文字＝深い藍鼠／差し色＝砂色の1つだけ
   書体: Shippori Mincho（見出し）＋ Zen Kaku Gothic New（本文）
   曲線: 行き過ぎない減速（power2.out 相当）だけ。ずっと動く物は最初の画面の波の線1本だけ */
:root{
  --bg:#f6f3ee;
  --paper:#fbfaf7;
  --ink:#2f3e46;
  --ink-2:#4c5a61;
  --sand:#c9b79c;
  --sand-d:#8a7352;
  --sand-t:#efe6d7;
  --mark:rgba(201,183,156,.5);
  --line:rgba(47,62,70,.16);
  --err:#9e3127;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --ease:cubic-bezier(.33,1,.68,1);
  --hd:72px;
  --bar:0px;
  --band:34px;
  --gut:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 12px)}
html:not(.lenis){scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.95 var(--sans);letter-spacing:.04em;overflow-x:clip;line-break:strict;word-break:auto-phrase;padding-bottom:var(--bar)}
h1,h2,h3,summary,.worry-list li{text-wrap:balance}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.55;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure,dl,dd,blockquote{margin:0}
button{font:inherit;color:inherit}
em{font-style:normal;background:linear-gradient(transparent 64%,var(--mark) 64%)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:min(1120px,100% - var(--gut) * 2);margin-inline:auto}
.narrow{width:min(780px,100% - var(--gut) * 2)}
main:focus{outline:none}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;z-index:600;padding:12px 18px;border-radius:4px;background:var(--ink);color:var(--paper);font-size:18px;text-decoration:none}
.skip:focus{left:8px}
.center{text-align:center}
.note{font-size:14px;line-height:1.8;color:var(--ink-2)}

/* 上の細い注記の帯 */
.band{background:var(--sand-t);color:var(--ink);font-size:13px;line-height:1.6;text-align:center;padding:7px 16px;letter-spacing:.04em;border-bottom:1px solid var(--line)}

/* 写真の枠（写真はフリー素材。注記は上の帯とフッターだけ） */
.ph{position:relative;overflow:hidden;background:#e4e2dd}
.ph img{width:100%;height:100%;object-fit:cover}

/* 章の見出し */
.sec{padding:clamp(80px,10vw,140px) 0}
.sec-hd{margin-bottom:clamp(36px,4.5vw,56px)}
.en{display:block;margin-bottom:12px;font:500 12px/1.4 var(--serif);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2)}
.sec-ttl{font-size:clamp(28px,3.1vw,40px);letter-spacing:.12em}
.haze .ln{display:block}
.sec-lead{margin-top:18px;color:var(--ink-2)}
.center .sec-lead{margin-inline:auto;max-width:36em}

/* ボタン：押すと少し沈む（行き過ぎない） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding:0 34px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:700 18px/1.2 var(--sans);letter-spacing:.08em;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background-color .3s var(--ease)}
.btn:hover{background:#3d4f58}
.btn:active{transform:translateY(2px)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:rgba(47,62,70,.06)}
.btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn--wide{width:100%;min-height:60px}
.more{display:inline-flex;align-items:center;gap:.6em;min-height:48px;font:500 18px/1.3 var(--sans);color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat;transition:background-size .4s var(--ease)}
.more:hover{background-size:30% 1px}
.more::after{content:"";width:22px;height:1px;background:currentColor}
/* JSなしでは押しても何も起きないボタン（送信・プライバシーポリシー）を隠す */
html:not(.js) .js-only{display:none!important}
.nojs-note{font-size:18px;line-height:1.7;margin-top:8px}

/* 進み具合の細い線（動作中だけ） */
.progress{display:none}
.gs .progress{display:block;position:fixed;left:0;right:0;top:0;height:2px;z-index:300;pointer-events:none}
.progress i{display:block;height:100%;background:var(--sand-d);transform:scaleX(0);transform-origin:left}

/* ===== ヘッダー（80：小さな名前＋少ないナビ＋相談ボタン） ===== */
.hd{position:sticky;top:0;z-index:200;height:var(--hd);display:flex;align-items:center;gap:clamp(12px,2.4vw,36px);padding:0 var(--gut);background:rgba(246,243,238,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.logo{display:flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;flex:none}
.logo-mark{width:34px;height:21px;flex:none;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.logo-mark .l2{stroke:var(--sand)}
.logo-txt{display:grid;line-height:1.15}
.logo-txt b{font:600 20px/1.2 var(--serif);letter-spacing:.16em}
.logo-txt i{font:500 10px/1.3 var(--serif);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.gnav{margin-left:auto}
.gnav ul{display:flex;gap:clamp(4px,1vw,16px)}
.gnav a{display:inline-flex;align-items:center;min-height:48px;padding:0 10px;font:500 15px/1 var(--sans);letter-spacing:.08em;text-decoration:none;white-space:nowrap;background:linear-gradient(currentColor,currentColor) 50% calc(100% - 10px)/0 1px no-repeat;transition:background-size .35s var(--ease)}
.gnav a:hover{background-size:calc(100% - 20px) 1px}
.hd-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--paper);font:700 15px/1 var(--sans);letter-spacing:.08em;text-decoration:none;white-space:nowrap;flex:none;transition:transform .2s var(--ease),background-color .3s var(--ease)}
.hd-cta:hover{background:#3d4f58}
.hd-cta:active{transform:translateY(2px)}
.hd-menu{display:none;margin-left:auto;align-items:center;gap:10px;min-width:48px;min-height:48px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:500 15px/1 var(--sans);letter-spacing:.08em;cursor:pointer}
.hd-menu i{display:grid;gap:6px}
.hd-menu i::before,.hd-menu i::after{content:"";display:block;width:18px;height:1.5px;background:currentColor}

/* スマホのメニュー（popover） */
.drawer{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:96px 24px 40px;background:var(--bg);color:var(--ink);overflow:auto}
.drawer:popover-open{display:flex;flex-direction:column;align-items:center}
.drawer-en{font:500 12px/1 var(--serif);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);margin-bottom:20px}
.drawer ul{display:grid;width:min(380px,100%);border-top:1px solid var(--line)}
.drawer a{display:flex;align-items:center;justify-content:center;min-height:64px;border-bottom:1px solid var(--line);font:600 19px/1.4 var(--serif);letter-spacing:.1em;text-decoration:none;text-align:center}
.drawer-close{position:absolute;top:14px;right:14px;min-width:80px;min-height:48px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:500 16px/1 var(--sans);cursor:pointer}

/* スマホの下の固定バー */
.spbar{display:none}

/* ===== 1 最初の画面（5＋45＋14） ===== */
.fv{position:relative;height:clamp(540px,calc(100svh - var(--hd) - var(--band)),940px);overflow:hidden;isolation:isolate;background:#dfe2e0}
.fv-ph{position:absolute;inset:0;z-index:-2}
.fv-ph img{object-position:50% 55%}
.fv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(246,243,238,.92) 0%,rgba(246,243,238,.78) 30%,rgba(246,243,238,.28) 54%,rgba(246,243,238,0) 70%),linear-gradient(0deg,rgba(246,243,238,.55) 0%,rgba(246,243,238,0) 36%)}
.fv-in{position:absolute;left:max(var(--gut),calc((100% - 1120px) / 2));bottom:clamp(48px,10vh,120px);width:min(640px,58%)}
.fv-kicker{display:block;margin-bottom:16px;font:500 18px/1.6 var(--sans);letter-spacing:.16em;color:var(--ink-2)}
.fv-catch{display:block;font:600 clamp(38px,5vw,68px)/1.42 var(--serif);letter-spacing:.1em}
.fv-catch .ln{display:block}
.wave{display:block;width:clamp(220px,24vw,320px);height:auto;margin:20px 0 18px;overflow:hidden}
.wave path{fill:none;stroke:var(--sand-d);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:0}
.fv-sub{font:500 clamp(18px,1.4vw,20px)/1.9 var(--sans);letter-spacing:.06em}
.fv-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:28px}

@media (prefers-reduced-motion:no-preference){
  .js .fv-ph img{animation:fv-focus 1.2s var(--ease) both}
  .js .fv-kicker{animation:fv-fade .8s var(--ease) .05s both}
  .js .fv-catch .ln{animation:fv-haze 1s var(--ease) both}
  .js .fv-catch .ln:nth-child(1){animation-delay:.2s}
  .js .fv-catch .ln:nth-child(2){animation-delay:.5s}
  .js .fv .wave path{animation:fv-draw 1.1s cubic-bezier(.45,.05,.35,1) .75s both}
  .js .fv-sub{animation:fv-up .8s var(--ease) 1s both}
  .js .fv-btns{animation:fv-up .8s var(--ease) 1.15s both}
  /* ずっと動く物はこの1つだけ（ごくゆっくり左右に揺れる。止めるボタンで止まる） */
  .js .wave-g{animation:sway 9s ease-in-out 1.9s infinite alternate}
  /* 最初の画面の演出が終わったら（止めた時も）仕上がった姿に固定する。再開で流し直さない */
  .js.fv-done .fv-ph img,.js.fv-done .fv-kicker,.js.fv-done .fv-catch .ln,.js.fv-done .fv .wave path,.js.fv-done .fv-sub,.js.fv-done .fv-btns{animation:none}
}
@keyframes fv-focus{from{filter:blur(14px);transform:scale(1.03)}}
@keyframes fv-fade{from{opacity:0}}
@keyframes fv-haze{from{opacity:0;filter:blur(10px)}}
@keyframes fv-up{from{opacity:0;transform:translateY(10px)}}
@keyframes fv-draw{from{stroke-dashoffset:1.01}}
@keyframes sway{from{transform:translateX(-14px)}to{transform:translateX(14px)}}

/* ===== 2 こんな思いはありませんか ===== */
.worry-list{border-top:1px solid var(--line)}
.worry-list li{padding:26px 8px;border-bottom:1px solid var(--line);text-align:center;font:500 clamp(19px,1.9vw,23px)/1.9 var(--serif);letter-spacing:.06em}
.worry-end{margin-top:40px;text-align:center}

/* ===== 3・9 左に宣言文・右に縦長の写真（79。9章は左右反転） ===== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(40px,7vw,120px);align-items:end}
.split--rev{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.split-ph{aspect-ratio:4/5;border-radius:2px}
.split-txt p+p{margin-top:16px}
.decl{margin-bottom:28px;font:600 clamp(24px,2.5vw,32px)/1.75 var(--serif);letter-spacing:.08em}
.split-txt .note{margin-top:20px}

/* ===== 4 大切にしていること ===== */
.care-in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.care-ph{aspect-ratio:4/5;border-radius:2px;width:min(100%,420px)}
.care-list{border-top:1px solid var(--line)}
.care-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:start;padding:28px 0;border-bottom:1px solid var(--line)}
.care-num{min-width:1.1em;font:500 clamp(48px,5vw,64px)/1 var(--serif);color:var(--sand-d);text-align:center}
.care-list h3{font-size:clamp(20px,1.9vw,23px);letter-spacing:.08em}
.care-list p{margin-top:8px}

/* ===== 5 当日のご報告（紙の書類のような枠） ===== */
.paper{max-width:900px;margin-inline:auto;padding:10px;background:var(--paper);border:1px solid var(--line);box-shadow:0 26px 50px -34px rgba(47,62,70,.45)}
.paper-in{padding:clamp(24px,4vw,48px);border:1px solid rgba(47,62,70,.24)}
.paper-hd{padding-bottom:18px;margin-bottom:clamp(24px,3vw,36px);border-bottom:3px double rgba(47,62,70,.3);text-align:center}
.paper-en{font:500 11px/1.4 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.paper-hd h3{margin-top:6px;font-size:clamp(22px,2.2vw,28px);letter-spacing:.3em;margin-right:-.3em}
.paper-body{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,48px);align-items:start}
.paper-ph{border-radius:2px}
.paper-ph img{aspect-ratio:3/2}
.paper-ph figcaption{padding-top:10px;background:var(--paper);font-size:18px;line-height:1.6;color:var(--ink-2)}
.paper-dl div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px dotted rgba(47,62,70,.35)}
.paper-dl div:first-child{padding-top:0}
.paper-dl dt{font:600 18px/1.7 var(--serif);letter-spacing:.12em;color:var(--ink-2)}
.paper-dl dd{font-size:18px;line-height:1.7}
.paper-sign{width:max-content;margin:28px 0 0 auto;padding:4px 12px;border:1px solid var(--sand-d);color:var(--sand-d);font:600 15px/1.5 var(--serif);letter-spacing:.3em}
.report .note{margin-top:18px}

/* ===== 6 料金（46：真ん中だけ色づき、進むと両脇も色づく） ===== */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,32px);background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--sand);transition:background-color .9s var(--ease),border-color .9s var(--ease)}
.plan--main{background:var(--sand-t);border-color:var(--sand);border-top-color:var(--sand-d)}
.plan-badge{align-self:flex-start;margin-bottom:14px;padding:2px 10px;background:var(--ink);color:var(--paper);font:500 18px/1.6 var(--sans);letter-spacing:0}
.plan-name{font-size:clamp(22px,2vw,25px);letter-spacing:.1em}
.plan-price{margin-top:12px;font:600 clamp(28px,2.6vw,34px)/1.3 var(--serif);letter-spacing:.04em}
.plan-price span{margin-left:4px;font:500 18px/1 var(--sans)}
.plan-desc{margin-top:14px;flex:1}
.plan-dl{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.plan-dl div{display:flex;gap:16px}
.plan-dl dt{font-weight:700}
.gs .plans:not(.is-all) .plan:not(.plan--main){background:#f0efec;border-top-color:#d6d5d1}
.plans-common{margin-top:36px;text-align:center}
.pc-ttl{font:600 19px/1.6 var(--serif);letter-spacing:.1em}
.plans-common ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin-top:8px}
.plans-common li{display:inline-flex;align-items:center;gap:10px}
.plans-common li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sand-d)}
.price .note{margin-top:14px}
.cta-row{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:48px;text-align:center}
.cta-row p{color:var(--ink-2)}
.cta-row.left{align-items:flex-start;text-align:left;margin-top:12px}

/* ===== 7 流れ（10：縦のレールが伸び、通過した番号が反転する） ===== */
.flow-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(40px,7vw,110px);align-items:start}
.steps{position:relative;--rail:1}
.steps::before,.steps::after{content:"";position:absolute;left:27px;top:28px;bottom:56px;width:1.5px;background:var(--line)}
.steps::after{background:var(--ink);transform:scaleY(var(--rail));transform-origin:top}
.gs .steps{--rail:0}
.step{position:relative;z-index:1;display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px;padding-bottom:34px}
.step-num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font:500 24px/1 var(--serif);transition:background-color .5s var(--ease),color .5s var(--ease)}
.gs .step:not(.is-past) .step-num{background:var(--bg);color:var(--ink)}
.step h3{padding-top:9px;font-size:clamp(20px,1.8vw,22px);letter-spacing:.08em}
.step p{margin-top:4px}
.flow-ph{margin-top:clamp(0px,8vw,120px)}
.flow-ph .frame{aspect-ratio:4/5;border-radius:2px}
.flow-ph figcaption{margin-top:10px;font-size:18px;color:var(--ink-2)}

/* ===== 8 よくある質問（61） ===== */
.faq{display:grid;gap:12px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:4px}
.faq summary{position:relative;display:flex;align-items:center;min-height:68px;padding:16px 60px 16px 24px;font:600 19px/1.6 var(--serif);letter-spacing:.06em;cursor:pointer;list-style:none;border-radius:4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:16px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq .a{padding:0 24px 22px}
.faq .a p{padding-top:14px;border-top:1px solid var(--line)}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}
.faq-sec .note{margin-top:20px}

/* ===== 9 ごあいさつ ===== */
.greet-q p{font:500 clamp(20px,2vw,24px)/2 var(--serif);letter-spacing:.06em}
.greet-q p+p{margin-top:6px}
.greet-by{display:flex;align-items:center;gap:14px;margin-top:28px;font:500 18px/1.6 var(--serif);letter-spacing:.2em;color:var(--ink-2)}
.greet-by::before{content:"";width:32px;height:1px;background:var(--sand-d)}

/* ===== 10 無料相談フォーム（sea2 を薄く敷く） ===== */
.contact{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.contact-bg{position:absolute;inset:0;z-index:-2;background:transparent}
.contact-bg img{opacity:.26}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,rgba(246,243,238,.55) 30%,rgba(246,243,238,.55) 70%,var(--bg) 100%)}
.contact-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,96px);align-items:start}
.contact-txt>p+*{margin-top:24px}
.tel-box{display:grid;margin-top:28px;border-top:1px solid var(--line)}
.tel-box div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tel-box dt{font:600 18px/1.8 var(--serif);letter-spacing:.1em;color:var(--ink-2)}
.tel-box dd{font-size:18px;line-height:1.8}
.tel-box .tel-num{font:600 24px/1.5 var(--serif);letter-spacing:.06em}
.form{padding:clamp(24px,4vw,44px);background:rgba(251,250,247,.96);border:1px solid var(--line);border-radius:4px}
.f-row{margin-bottom:24px}
.f-lab,.f-choice legend{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-weight:700}
.f-lab em,.f-choice legend em,.f-check em{padding:1px 8px;background:var(--ink);color:var(--paper);font:500 18px/1.4 var(--sans);letter-spacing:.06em}
.f-opt{padding:0 8px;border:1px solid var(--ink-2);color:var(--ink-2);font:500 18px/1.4 var(--sans)}
.f-row input,.f-row textarea{width:100%;min-height:56px;padding:12px 16px;border:1px solid rgba(47,62,70,.38);border-radius:4px;background:#fff;color:var(--ink);font:400 18px/1.6 var(--sans)}
.f-row textarea{min-height:140px;resize:vertical}
.f-row input::placeholder,.f-row textarea::placeholder{color:#6b767b;opacity:1}
.f-row [aria-invalid=true],.f-check:has([aria-invalid=true]){border-color:var(--err)}
.f-row input:focus-visible,.f-row textarea:focus-visible{outline-offset:1px}
.f-choice{margin:0 0 24px;padding:0;border:0;min-width:0}
.f-choice legend{padding:0}
.f-choice label{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin:0 8px 8px 0;padding:0 18px;border:1px solid rgba(47,62,70,.3);border-radius:999px;background:#fff;cursor:pointer}
.f-choice label:has(input:checked){border-color:var(--ink);background:var(--sand-t)}
.f-choice input,.f-check input{width:22px;height:22px;margin:0;accent-color:var(--ink)}
.f-agree{margin:4px 0 28px}
.f-check{display:inline-flex;max-width:100%;word-break:normal;overflow-wrap:anywhere;align-items:center;gap:12px;min-height:48px;padding:0 4px;border:1px solid transparent;border-radius:4px;cursor:pointer;font-weight:700}
.f-check em{flex-shrink:0;margin-left:2px}
.f-policy{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;border:0;background:none;color:var(--ink);font:400 18px/1.4 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.f-err{margin-top:8px;font-size:18px;line-height:1.6;color:var(--err)}
.form .note{margin-top:14px}

/* ===== フッター ===== */
.ft{padding:56px 0 40px;border-top:1px solid var(--line);background:var(--paper)}
.ft-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:start}
.ft-name{display:grid;gap:2px;font:600 20px/1.5 var(--serif);letter-spacing:.12em}
.ft-name span{font:500 11px/1.4 var(--serif);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.ft address{margin-top:12px;font-style:normal;font-size:16px;line-height:1.9}
.ft-nav{display:flex;flex-wrap:wrap;gap:0 20px}
.ft-nav a{display:inline-flex;align-items:center;min-height:48px;font-size:15px;text-decoration:none}
.ft-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.ft-note{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.7;color:var(--ink-2)}
.ft-credit{display:block;margin-top:4px;letter-spacing:.06em}

/* 見本のお知らせ */
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 84px);z-index:400;width:max-content;max-width:calc(100% - 32px);padding:12px 22px;border-radius:4px;background:var(--ink);color:var(--paper);font-size:18px;line-height:1.6;opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 動きを止めるボタン */
.stop{position:fixed;right:16px;bottom:calc(var(--bar) + 16px);z-index:250;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:500 18px/1 var(--sans);cursor:pointer}
.stop svg{width:12px;height:12px;fill:currentColor}
.stop .i-play{display:none}
.stop[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.stop[aria-pressed=true] .i-pause{display:none}
.stop[aria-pressed=true] .i-play{display:block}
.stop:focus-visible,.spbar a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 7px var(--paper)}
.static .stop{display:none!important}

/* ===== thanks.html ===== */
.thanks-hd .hd-cta{margin-left:auto}
.thx{padding:clamp(28px,4vw,56px) 0 clamp(72px,9vw,120px)}
.thx-ph{aspect-ratio:21/9;border-radius:2px}
.thx-ph img{object-position:50% 60%}
.thx-in{width:min(760px,100% - var(--gut) * 2);margin:clamp(40px,5vw,64px) auto 0;text-align:center}
.thx-in h1{font-size:clamp(26px,3vw,38px);letter-spacing:.1em}
.thx-in .wave{margin:22px auto}
.thx-lead{font-size:18px}
.thx-box{margin-top:44px;padding:clamp(24px,3.5vw,40px);background:var(--paper);border:1px solid var(--line);text-align:left}
.thx-box h2{font-size:clamp(20px,2vw,24px);letter-spacing:.08em;text-align:center}
.thx-steps{display:grid;gap:12px;margin-top:22px}
.thx-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center}
.thx-steps span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);font:500 20px/1 var(--serif)}
.thx-back{margin-top:40px}
@media (prefers-reduced-motion:no-preference){
  .js .thx .wave path{animation:fv-draw 1.1s cubic-bezier(.45,.05,.35,1) .3s both}
  .js .thx-ph img{animation:fv-focus 1.2s var(--ease) both}
  .js.fv-done .thx .wave path,.js.fv-done .thx-ph img{animation:none}
}

/* ===== 幅ごと ===== */
@media (max-width:1099.98px){
  .gnav a{padding:0 6px;font-size:14px}
}
@media (max-width:899.98px){
  :root{--hd:64px;--bar:64px;--band:68px}
  .gnav,.hd .hd-cta{display:none}
  .thanks-hd .hd-cta{display:inline-flex;min-height:44px;padding:0 16px;font-size:14px}
  .hd-menu{display:inline-flex}
  .logo-txt b{font-size:18px}
  .spbar{position:fixed;left:0;right:0;bottom:0;z-index:240;display:grid;grid-template-columns:1.35fr 1fr;height:calc(var(--bar) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--paper);border-top:1px solid var(--line)}
  .spbar a{display:flex;align-items:center;justify-content:center;gap:8px;font:700 18px/1 var(--sans);text-decoration:none;letter-spacing:.06em}
  .spbar a:first-child{background:var(--ink);color:var(--paper)}
  .spbar a:last-child{color:var(--ink)}
  .spbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))}
  .no-bar{--bar:0px}
  .stop{bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px) + 12px);right:12px;width:48px;padding:0;justify-content:center}
  .stop .stop-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .toast{bottom:calc(var(--bar) + 76px)}
  /* 最初の画面：写真の上、下の方に文字。主ボタンは固定バーの上に収める */
  html{scroll-padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px) + 72px)}
  .fv{height:clamp(340px,calc(100svh - var(--hd) - var(--band) - var(--bar)),780px)}
  /* スマホは写真を上の帯にして海と山並みをはっきり見せ、文字は下の生成りの上に置く（広告から来る人の多くはスマホ） */
  .fv{background:var(--paper)}
  .fv-ph{bottom:auto;height:64%}
  .fv-ph img{object-position:50% 50%}
  .fv::before{background:linear-gradient(0deg,rgba(246,243,238,1) 0%,rgba(246,243,238,1) 56%,rgba(246,243,238,.88) 63%,rgba(246,243,238,0) 78%)}
  .fv-in{left:var(--gut);right:var(--gut);bottom:22px;width:auto}
  .fv-kicker{margin-bottom:8px;font-size:18px;letter-spacing:.1em}
  .fv-catch{font-size:clamp(32px,8.6vw,44px)}
  .wave{width:200px;margin:12px 0 10px}
  .fv-sub{line-height:1.75;letter-spacing:.02em}
  .fv-btns{margin-top:16px;gap:4px 24px}
  .split,.split--rev,.care-in,.flow-in,.contact-in,.paper-body,.ft-in{grid-template-columns:minmax(0,1fr)}
  .split-ph{width:min(100%,460px);justify-self:center}
  .about .split-ph{order:-1}
  .care-ph{justify-self:center}
  .plans{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .flow-ph{margin-top:0;width:min(100%,380px);justify-self:center}
  .cta-row.left{align-items:stretch}
}
/* JSなし：メニューは開け閉めできないので、ヘッダーの下にリンクを並べる */
@media (max-width:899.98px){
  html:not(.js) .hd-menu,html:not(.js) .drawer-close,html:not(.js) .drawer-en,
  html.no-popover .hd-menu,html.no-popover .drawer-close,html.no-popover .drawer-en{display:none}
  html:not(.js) .drawer,html.no-popover .drawer{display:block;position:static;inset:auto;width:auto;height:auto;padding:0 8px;overflow:visible;background:var(--paper);border-bottom:1px solid var(--line)}
  html:not(.js) .drawer ul,html.no-popover .drawer ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;width:auto;border:0}
  html:not(.js) .drawer a,html.no-popover .drawer a{min-height:48px;padding:0 10px;border:0;font:500 15px/1.4 var(--sans)}
  /* 並べたリンク（2行・約96px）と帯の分だけ最初の画面を低くして、主ボタンを固定バーの上に収める */
  html:not(.js) .fv,html.no-popover .fv{height:clamp(340px,calc(100svh - var(--hd) - 80px - var(--bar) - 100px),780px)}
}
@media (max-width:599.98px){
  .band{font-size:12px;padding:6px 12px}
  .sec{padding:72px 0}
  .worry-list li{padding:20px 4px}
  .btn{padding:0 26px}
  .fv-btns .btn{flex:1 1 auto}
  .paper{padding:6px}
  .paper-dl div{grid-template-columns:4.6em minmax(0,1fr);gap:8px}
  .faq summary{padding-left:18px;padding-right:52px;font-size:18px}
  .faq .a{padding:0 18px 20px}
  .tel-box div{grid-template-columns:4.6em minmax(0,1fr)}
  .f-check{align-items:flex-start;padding-top:10px}
  .f-check input{margin-top:3px}
  .thx-ph{aspect-ratio:4/3}
}
@media (max-width:899.98px) and (max-height:700px){
  .fv-kicker{font-size:18px;margin-bottom:4px}
  .fv-catch{font-size:clamp(30px,8vw,38px)}
  .wave{margin:8px 0 6px}
  /* 画面の低いスマホ（iPhone SE など）: 下の固定バーと止めるボタンに主ボタンが重ならないよう詰める */
  .fv-sub{line-height:1.6}
  .fv-btns{margin-top:12px;padding-right:60px}
  .fv-btns .more{display:none}
}

/* ===== 止めている間・撮影用・動きを減らす設定 ===== */
html.paused{scroll-behavior:auto!important}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important;transition:none!important}
.paused .btn:active,.paused .hd-cta:active{transform:none}
@supports selector(::details-content){.paused *::details-content,.static *::details-content{transition:none!important}}
.static *,.static *::before,.static *::after{animation:none!important;transition:none!important}
.static .btn:active,.static .hd-cta:active{transform:none}
html.static{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){
  html,html:not(.lenis){scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .btn:active,.hd-cta:active{transform:none}
  @supports selector(::details-content){*::details-content{transition:none!important}}
}

/* popover が使えないブラウザの広い画面: メニューはヘッダーのリンクがあるので、ドロワーは出さない */
@media (min-width:900px){html.no-popover .drawer{display:none}}
/* JSなし・popover なしで画面の低いスマホ: 並べたリンクを1行にし、飾りを外して主ボタンを固定バーの上に収める */
@media (max-width:899.98px) and (max-height:700px){
  html:not(.js) .drawer ul,html.no-popover .drawer ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}
  html:not(.js) .drawer li:last-child,html.no-popover .drawer li:last-child{display:none}
  html:not(.js) .drawer a,html.no-popover .drawer a{white-space:nowrap}
  html:not(.js) .fv,html.no-popover .fv{height:max(280px,calc(100svh - var(--hd) - 48px - var(--bar) - var(--band)))}
  html:not(.js) .fv .wave,html.no-popover .fv .wave,html:not(.js) .fv-kicker,html.no-popover .fv-kicker{display:none}
}