/* 道明寺｜波動の鑑定士 淡い夜明け: アイコンの桃色→水色のグラデーションに合わせる */
:root{
  --bg:#fbf8fc;--bg2:#f4eff9;
  --ink:#2b2d4a;--body:#4f5170;--muted:#8e8aa6;--line:rgba(43,45,74,.13);
  --accent:#b95577;--accent-2:#8fa6e8;--petal:#efc3d6;
  --sky:linear-gradient(160deg,#fde6f0 0%,#f1e7fb 45%,#dce6fd 100%);
  --sky-glow:radial-gradient(60% 40% at 65% 70%,rgba(255,255,255,.85),transparent 70%);
  --sky-fade:linear-gradient(180deg,rgba(251,248,252,0) 55%,rgba(251,248,252,.95) 100%);
  --panel:linear-gradient(160deg,#fbe2ee 0%,#ece6fb 50%,#dfe7fd 100%);
  --glow:radial-gradient(closest-side,rgba(246,196,220,.55),rgba(190,205,250,.3) 50%,transparent 72%);
  --ring-line:rgba(110,125,200,.2);
  --num-stroke:rgba(43,45,74,.12);
  --head-bg:rgba(251,248,252,.92);
  --line-green:#06C755;
  --f-en:"Cormorant Garamond",serif;
  --f-h:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-b:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--f-b);font-size:15px;line-height:1.95;letter-spacing:.04em;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
figure{margin:0}

/* ---------- ローダー（波紋が描かれる） ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;place-items:center;align-content:center;gap:18px}
.motion .loader{display:grid;animation:loaderOut .8s 3s forwards}
.loader.is-done{opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.loader__rings{width:120px;height:120px}
.loader__rings circle{fill:none;stroke:var(--accent-2);stroke-width:1;stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1.3s cubic-bezier(.65,0,.35,1) forwards}
.loader__rings circle:nth-child(2){animation-delay:.15s;opacity:.7}
.loader__rings circle:nth-child(3){animation-delay:.3s;opacity:.45}
.loader__t{font:500 13px/1 var(--f-h);letter-spacing:.6em;color:var(--muted);text-indent:.6em}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}

/* ---------- 進み具合ゲージ ---------- */
.sando{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:45;height:44vh;display:flex;opacity:0;transition:opacity .6s;pointer-events:none}
.sando.is-on{opacity:1;pointer-events:auto}
.sando__rail{position:absolute;right:6px;top:0;bottom:0;width:1px;background:var(--line)}
.sando__fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.sando ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.sando li{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;font:500 10px/1 var(--f-h);color:var(--muted);letter-spacing:.1em}
.sando li a{text-decoration:none;writing-mode:vertical-rl;font-size:0;width:22px;height:22px;padding:0}
.sando li::after{content:"";position:absolute;right:3px;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid var(--muted);transition:background .4s,border-color .4s}
.sando li.is-past::after{background:var(--accent);border-color:var(--accent)}
.sando li.is-cur a{color:var(--ink)}

/* ---------- ヒーロー ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero__sky{position:absolute;inset:0;z-index:-2;background:var(--sky-glow),var(--sky)}
.hero__sky img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__sky::after{content:"";position:absolute;inset:0;background:var(--sky-fade)}

/* 水面の波紋 */
.water{position:absolute;left:60%;top:78%;width:0;height:0}
.water i{position:absolute;left:0;top:0;width:150vw;aspect-ratio:4/1;border:1px solid var(--ring-line);border-radius:50%;transform:translate(-50%,-50%) scale(.05);opacity:0;animation:swell 12s cubic-bezier(.2,.6,.4,1) infinite}
.water i:nth-child(2){animation-delay:-2.4s}
.water i:nth-child(3){animation-delay:-4.8s}
.water i:nth-child(4){animation-delay:-7.2s}
.water i:nth-child(5){animation-delay:-9.6s}
@keyframes swell{0%{transform:translate(-50%,-50%) scale(.05);opacity:0}12%{opacity:.5}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

.petals{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.petals i{position:absolute;top:-4%;left:var(--x);width:10px;height:8px;background:var(--petal);border-radius:80% 0 80% 0;opacity:.85;animation:petal var(--d) linear var(--delay) infinite}
@keyframes petal{0%{transform:translate(0,-6vh) rotate(0deg) scale(var(--sc))}100%{transform:translate(var(--sway),112vh) rotate(560deg) scale(var(--sc))}}

.hero__in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;gap:0 2vw;padding:40px 6vw 36px;align-content:start}
.eyebrow{grid-column:1/-1;font:700 clamp(17px,4.8vw,24px)/1.2 var(--f-h);color:var(--accent);letter-spacing:.3em;margin-bottom:20px}
.hero__h1{grid-column:1;grid-row:2;margin:0;writing-mode:vertical-rl;font:800 min(13.5vh,18vw)/1 var(--f-h);color:var(--ink);letter-spacing:.04em;position:relative;z-index:2}
.hero__h1 .ch{display:inline-block}

.slot--icon{grid-column:2;grid-row:2;align-self:center;justify-self:end;position:relative;width:min(66vw,380px);aspect-ratio:1;margin-right:-8vw;color:var(--accent-2)}
.icon__ring{position:absolute;inset:-9%;width:118%;height:118%;animation:spin 60s linear infinite;opacity:.9}
.icon__ring text{font:500 7.4px var(--f-en);letter-spacing:.32em;fill:currentColor}
.icon__face{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--panel);box-shadow:0 30px 70px -30px rgba(80,70,130,.45),0 0 0 6px rgba(255,255,255,.6)}
.icon__face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seal{position:absolute;left:2%;bottom:8%;writing-mode:vertical-rl;background:var(--accent);color:#fff;font:700 13px/1.15 var(--f-h);letter-spacing:.2em;padding:10px 7px;border-radius:2px;transform:rotate(-6deg);box-shadow:0 8px 20px -8px rgba(60,50,100,.45)}
@keyframes spin{to{transform:rotate(360deg)}}

.hero__copy{grid-column:1/-1;grid-row:3;margin-top:28px;position:relative;z-index:2}
.hero__lead{font:700 clamp(24px,6.6vw,40px)/1.55 var(--f-h);color:var(--ink);letter-spacing:.06em}
.hero__sub{margin-top:14px;max-width:28em;color:var(--body);font-size:14px}
.hero__copy .btn{margin-top:26px}
.hero__note{margin-top:14px;font-size:11px;color:var(--muted);letter-spacing:.2em}

/* ---------- ボタン（LINE 緑） ---------- */
.btn--line{display:inline-flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap;background:var(--line-green);color:#fff;text-decoration:none;font:700 18px/1.2 var(--f-b);letter-spacing:.06em;padding:23px 28px;border-radius:999px;box-shadow:0 12px 26px -12px rgba(6,199,85,.6);transition:transform .25s,box-shadow .25s}
.btn--line:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(6,199,85,.75)}
.btn--line:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.btn--lg{font-size:19px;padding:26px 28px}
.hero__copy .btn,.gate__body .btn,.honden .btn{width:100%;max-width:460px}
.btn--line svg{width:26px;height:26px}

/* ---------- 波のセクション ---------- */
.gate{position:relative;display:grid;gap:22px;padding:56px 7vw 48px 6vw;isolation:isolate}
.gate__head{display:flex;gap:18px;align-items:flex-start}
.sec__no{writing-mode:vertical-rl;flex:none;font:500 13px/1 var(--f-h);color:var(--accent);letter-spacing:.4em;padding-left:10px;border-left:1px solid var(--accent)}
.sec__title{margin:0;font:700 clamp(36px,10vw,92px)/1.3 var(--f-h);color:var(--ink);letter-spacing:.05em}
.gate__body{display:grid;gap:20px;max-width:36em}
.p{font-size:18px;line-height:1.95;color:var(--ink)}
.worries{list-style:none;margin:0;padding:0}
.worries li{position:relative;padding:14px 0 14px 1.8em;border-top:1px solid var(--line);font:500 18px/1.7 var(--f-h);color:var(--ink);transition:padding-left .35s}
.worries li:last-child{border-bottom:1px solid var(--line)}
.worries li::before{content:"";position:absolute;left:0;top:50%;width:1em;height:1px;background:var(--muted)}
.worries li:hover{padding-left:2.4em}
.wave{width:100%;height:110px;overflow:visible}
.wave path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.28;vector-effect:non-scaling-stroke}
.wave path:nth-child(3){opacity:.45;stroke:var(--accent-2)}
.gate__body .btn{justify-self:start}

/* 三の波: 一滴から広がる波紋 */
.slot--ripple{position:relative;aspect-ratio:3/2;border-radius:2px;overflow:hidden;background:var(--panel)}
.slot--ripple img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ripple__rings{position:absolute;inset:0;transform-origin:50% 58%;opacity:.4}
.ripple__rings i{position:absolute;left:50%;top:58%;aspect-ratio:3/1;border:1px solid var(--accent-2);border-radius:50%;transform:translate(-50%,-50%)}
.ripple__rings i:nth-child(1){width:14%;opacity:.95}
.ripple__rings i:nth-child(2){width:32%;opacity:.75}
.ripple__rings i:nth-child(3){width:54%;opacity:.55}
.ripple__rings i:nth-child(4){width:80%;opacity:.35}
.ripple__rings i:nth-child(5){width:112%;opacity:.2}
.ripple__rings b{position:absolute;left:50%;top:58%;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 22px 10px rgba(255,255,255,.9)}

/* ---------- 受け方 ---------- */
.flow{display:grid;gap:24px;padding:56px 7vw 56px 6vw;background:var(--bg2);border-block:1px solid var(--line)}
.flow__head{display:flex;gap:18px;align-items:flex-start}
.flow__body{display:grid;gap:28px}
.steps{margin:0}
.step{display:grid;grid-template-columns:3.2em 1fr;align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step dt{font:800 34px/1 var(--f-h);color:var(--ink)}
.step dd{margin:0;font:500 17px/1.7 var(--f-h);color:var(--ink)}
.step dd small{display:block;margin-top:4px;font:400 12px/1.6 var(--f-b);color:var(--muted);letter-spacing:.1em}
.topics__t{font:500 12px/1 var(--f-h);color:var(--muted);letter-spacing:.4em;margin-bottom:14px}
.topics ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.topics li{font:500 15px/1 var(--f-h);color:var(--ink);border:1px solid var(--line);background:var(--bg);padding:11px 16px;border-radius:2px;transition:border-color .3s}
.topics li:hover{border-color:var(--accent-2)}

/* ---------- 大きな一文 ---------- */
.quote{padding:64px 6vw}
.say{max-width:8.5em;font:800 clamp(38px,11vw,120px)/1.35 var(--f-h);color:var(--ink);letter-spacing:.04em}
.say .ch{display:inline-block}

/* ---------- 最後の CTA ---------- */
.honden{position:relative;overflow:hidden;isolation:isolate;padding:72px 6vw 64px;display:grid;align-items:end}
.honden__glow{position:absolute;left:50%;top:40%;width:130vw;height:130vw;max-width:1100px;max-height:1100px;transform:translate(-50%,-50%);z-index:-2;background:var(--glow)}
.honden__rings{position:absolute;left:50%;top:40%;width:min(150vw,1000px);transform:translate(-50%,-50%);z-index:-1}
.honden__rings circle{fill:none;stroke:var(--ring-line);stroke-width:.5}
.honden__in{display:grid;gap:22px;justify-items:start}
.honden .sec__no{writing-mode:horizontal-tb;border-left:0;padding-left:0;border-bottom:1px solid var(--accent);padding-bottom:8px;letter-spacing:.6em}
.honden .sec__title{font-size:clamp(32px,8.6vw,84px)}
.honden .btn{margin-top:6px}
.honden__lead{max-width:22em}

.foot{padding:32px 6vw calc(100px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot__c{font:400 12px/1 var(--f-h);color:var(--muted);letter-spacing:.2em}

/* スマホの追従ボタン */
.dock{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;font-size:15px;padding:16px 20px;transform:translateY(180%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dock.is-on{transform:none}
.dock.is-hide{transform:translateY(180%)}

/* ---------- 演出: タップした場所から波紋 ---------- */
.splat{position:fixed;z-index:1;pointer-events:none;width:8px;height:8px;border-radius:50%;background:var(--petal);transform:translate(-50%,-50%);animation:splat 1s cubic-bezier(.22,1,.36,1) forwards}
.ring{position:fixed;z-index:1;pointer-events:none;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(143,166,232,.6);transform:translate(-50%,-50%);animation:ring 1.7s cubic-bezier(.22,1,.36,1) both}
@keyframes splat{0%{transform:translate(-50%,-50%) scale(.2);opacity:.4}100%{transform:translate(-50%,-50%) scale(var(--s,20));opacity:0}}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(.3);opacity:.75}100%{transform:translate(-50%,-50%) scale(22);opacity:0}}

/* 登場 */
.motion .in{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.motion .in.is-in{opacity:1;transform:none}

/* ---------- PC ---------- */
@media (min-width:900px){
  body{font-size:16px}
  .sando{right:22px;height:50vh}
  .sando li{font-size:12px}
  .sando li a{font-size:12px;width:auto;height:auto;padding:4px 16px 4px 4px}
  .hero__in{grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;min-height:100svh;align-content:stretch;padding:64px 7vw 72px 6vw;gap:0 3vw}
  .p{font-size:19px}
  .eyebrow{grid-column:1/3;grid-row:1}
  .hero__h1{grid-row:2;align-self:center;font-size:min(18vh,10vw)}
  .slot--icon{grid-column:3;grid-row:1/3;justify-self:center;width:min(38vw,540px);margin:40px 0 0}
  .hero__copy{grid-column:2;grid-row:2;align-self:end;margin:0 0 2vh}
  .hero__lead{font-size:clamp(28px,2.6vw,42px)}
  .water{left:72%;top:84%}
  .water i{width:90vw}
  .gate{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end;gap:6vw;padding:14vh 10vw 10vh}
  .gate--r .gate__head{order:2}
  .gate--r .gate__body{order:1;justify-self:end}
  .sec__title{font-size:clamp(48px,5.6vw,96px)}
  .flow{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;padding:12vh 10vw}
  .quote{padding:16vh 10vw}
  .honden{padding:16vh 10vw 14vh}
  .dock{display:none}
  .foot{padding-bottom:40px}
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loader,.petals,.splat,.ring{display:none!important}
  .water i:nth-child(3){opacity:.6;transform:translate(-50%,-50%) scale(.5)}
  .in{opacity:1!important;transform:none!important}
  .sando{opacity:1;pointer-events:auto}
  .dock{transform:none}
}