/* 朝霧の余白 — morning-fog (No.074) × deck
   比喩: 不安は朝霧。05:40 → 06:40、スクロールで霧が晴れる。強い色は LINE の緑（ボタン）だけ */
:root{
  --bg:#f2f3f4;--bg2:#e9ebee;--card:#fff;--ink:#2a2f36;--body:#555c66;--muted:#8f97a3;--line:#dde1e6;
  --accent:#6b7f99;--line-green:#06C755;
  --serif:"Noto Serif JP",serif;--en:"Cormorant Garamond",serif;--sans:"Noto Sans JP",sans-serif;
  --fog:1;--p:0;
  --pad:clamp(22px,8vw,140px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-snap-type:y proximity;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--body);font:300 16px/2 var(--sans);letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 70%,rgba(107,127,153,.22) 0)}
ul,ol{list-style:none}
.sp{display:none}

/* ---------- 空と霧 ---------- */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.sky__img{position:absolute;inset:-4%;background:center/cover no-repeat;opacity:0;transition:opacity 1.6s ease;transform:scale(1.04)}
/* 空の色：濃い霧の灰 → 薄明 → 淡い青。写真が入ったら .has-photo で上に重ねる */
.sky__img--kv{background-image:linear-gradient(180deg,#e4e7eb 0%,#eef0f2 55%,#e9ebee 100%);opacity:1}
.sky__img--thin{background-image:linear-gradient(180deg,#e6ebf0 0%,#f1f2f2 52%,#e7eaed 100%)}
.sky__img--clear{background-image:linear-gradient(180deg,#d9e4ef 0%,#eef2f5 50%,#f5f2ec 64%,#e8ebee 100%)}
.sky[data-scene="thin"] .sky__img--thin,.sky[data-scene="clear"] .sky__img--clear{opacity:1}
/* 写真：人影が文字と重ならないよう右へずらし、左端は空に溶かす */
.sky__photo{position:absolute;top:-3%;bottom:-3%;left:12%;right:-22%;background:url(../img/kv.jpg) center 88%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%);opacity:calc(.62 + var(--p) * .33);filter:blur(calc((1 - var(--p)) * 3px)) saturate(calc(.7 + var(--p) * .3));transform:scale(calc(1.06 - var(--p) * .06));transition:opacity .4s linear}
.sky__photo ~ .land{display:none}
.land{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:calc(.25 + var(--p) * .75);transition:opacity .4s linear}
.sun{position:absolute;left:50%;top:64%;width:60vmax;height:30vmax;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,220,.95),rgba(255,244,220,0));opacity:calc(var(--p) * var(--p));transition:opacity .4s linear}
.sky__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(242,243,244,.9) 0%,rgba(242,243,244,.78) 42%,rgba(242,243,244,.18) 78%,rgba(242,243,244,0) 100%)}
.fog{position:absolute;inset:0;opacity:var(--fog);transition:opacity .4s linear}
.fog__b{position:absolute;width:70vmax;height:46vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(30px);animation:drift 46s ease-in-out infinite alternate}
.fog__b--1{left:-20vmax;top:-8vmax}
.fog__b--2{right:-26vmax;top:12vh;animation-duration:58s;animation-delay:-12s}
.fog__b--3{left:10vw;bottom:-18vmax;animation-duration:52s;animation-delay:-20s}
.fog__b--4{right:6vw;bottom:-10vmax;width:50vmax;animation-duration:40s;animation-delay:-6s}
.fog__b--5{left:30vw;top:30vh;width:40vmax;height:24vmax;opacity:.7;animation-duration:64s}
@keyframes drift{from{transform:translate3d(-6vw,0,0)}to{transform:translate3d(8vw,-3vh,0)}}

/* ---------- HUD（時計・ゲージ・名前） ---------- */
.hud{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:22px;padding:20px var(--pad);pointer-events:none}
.hud__clock{font:300 28px/1 var(--en);color:var(--ink);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.hud__clock small{font:400 10px/1 var(--sans);letter-spacing:.3em;color:var(--muted);margin-left:8px}
.hud__gauge{flex:1;max-width:220px;height:1px;background:var(--line);overflow:hidden}
.hud__gauge i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--p))}
.hud__name{margin-left:auto;font:400 10px/1 var(--sans);letter-spacing:.34em;color:var(--muted)}

.dots{position:fixed;right:clamp(14px,2.4vw,40px);top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:14px}
.dots a{position:relative;display:block;width:14px;height:14px}
.dots i{position:absolute;inset:5px;border-radius:50%;background:var(--muted);opacity:.45;transition:.4s}
.dots a.is-on i{inset:3px;background:var(--ink);opacity:1}
.dots a::before{content:attr(data-label);position:absolute;right:24px;top:50%;transform:translateY(-50%);font:400 11px/1 var(--sans);letter-spacing:.14em;color:var(--ink);white-space:nowrap;opacity:0;transition:.3s}
.dots a:hover::before,.dots a.is-on::before{opacity:.75}

/* ---------- スライド ---------- */
.slide{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px var(--pad) 96px;scroll-snap-align:start}
.slide__in{position:relative;z-index:1;width:100%;max-width:720px}
/* 各画面の時刻を、霧の中の透かし文字として右に置く。時間が進むほど濃くなる */
.slide::after{content:attr(data-time);position:absolute;right:clamp(40px,7vw,140px);bottom:clamp(60px,12vh,140px);font:300 clamp(90px,15vw,260px)/1 var(--en);letter-spacing:-.02em;color:var(--accent);opacity:.1;filter:blur(3px);pointer-events:none;font-variant-numeric:tabular-nums}
.slide--hero::after{opacity:.07;filter:blur(6px)}
#s5::after,#s6::after{opacity:.13;filter:blur(1.5px)}
#s7::after,#s8::after{opacity:.16;filter:none}
.cap{font:400 11px/1 var(--sans);letter-spacing:.34em;color:var(--muted);margin-bottom:clamp(24px,4vh,44px)}
.cap span{font:italic 400 15px/1 var(--en);letter-spacing:.1em;color:var(--accent)}
.hero__h{font:300 clamp(46px,9.6vw,168px)/1.18 var(--serif);color:var(--ink);letter-spacing:.02em;margin-left:-.06em;white-space:nowrap}
.slide--hero .slide__in{max-width:none}
.hero__lead{max-width:34em;margin-top:clamp(28px,5vh,52px);font-size:clamp(14px,1.15vw,17px)}
.h2{white-space:nowrap;font:300 clamp(34px,5.6vw,92px)/1.3 var(--serif);color:var(--ink);letter-spacing:.03em;margin-bottom:clamp(24px,4vh,40px)}
.body{max-width:36em;margin-top:1em}
.close{margin-top:clamp(28px,5vh,48px);font:400 clamp(17px,1.7vw,24px)/1.8 var(--serif);color:var(--ink);padding-left:22px;border-left:1px solid var(--accent)}
.note{margin-top:28px;font-size:13px;color:var(--muted)}

.checks{margin-top:28px;border-top:1px solid var(--line)}
.checks li{position:relative;padding:12px 0 12px 34px;border-bottom:1px solid var(--line);line-height:1.8;color:var(--ink)}
.checks li::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:7px;border-left:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(-45deg)}

/* 悪循環：4語が順番に濃くなり、また薄れる */
.loop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin-top:34px;font:400 clamp(15px,1.5vw,20px)/1 var(--serif);color:var(--ink)}
.loop li{display:flex;align-items:center;opacity:.28}
.loop li:not(:last-child)::after{content:"";width:clamp(20px,3vw,48px);height:1px;background:var(--muted);margin:0 14px}
.loop li:last-child::after{content:"↺";margin-left:14px;font-family:var(--en);color:var(--muted)}
.loop.is-in li{animation:loop 6s ease-in-out infinite}
.loop.is-in li:nth-child(2){animation-delay:1.5s}.loop.is-in li:nth-child(3){animation-delay:3s}.loop.is-in li:nth-child(4){animation-delay:4.5s}
@keyframes loop{0%,100%{opacity:.28}12%,30%{opacity:1}}

/* プロセス：線が左から引かれて、4語が順に現れる */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;padding-top:30px}
.flow::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.6,0,.2,1) .2s}
.flow.is-in::before{transform:scaleX(1)}
.flow li{position:relative;font:400 clamp(15px,1.6vw,22px)/1.5 var(--serif);color:var(--ink);opacity:0;transform:translateY(10px);transition:.8s}
.flow li::before{content:"";position:absolute;left:0;top:-34px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.flow.is-in li{opacity:1;transform:none}
.flow.is-in li:nth-child(2){transition-delay:.5s}.flow.is-in li:nth-child(3){transition-delay:.9s}.flow.is-in li:nth-child(4){transition-delay:1.3s}
.flow li:first-child{transition-delay:.2s}

/* STEP：細い巨大数字 */
.steps{margin-top:8px}
.step{display:grid;grid-template-columns:clamp(110px,13vw,200px) 1fr;align-items:center;gap:clamp(16px,3vw,40px);padding:18px 0;border-bottom:1px solid var(--line)}
.step__no{font:400 10px/1 var(--sans);letter-spacing:.3em;color:var(--muted);display:flex;align-items:flex-end;gap:10px}
.step__no b{font:300 clamp(72px,9vw,150px)/.8 var(--en);color:var(--ink);letter-spacing:0}
.step h3{font:400 clamp(19px,2vw,28px)/1.5 var(--serif);color:var(--ink);margin-bottom:4px}
.step p{line-height:1.8}

/* 3大特典：ローマ数字の目次 */
.gifts{border-top:1px solid var(--ink)}
.gift{display:grid;grid-template-columns:clamp(70px,8vw,120px) 1fr;gap:clamp(14px,2.6vw,36px);padding:22px 0;border-bottom:1px solid var(--line)}
.gift__no{font:italic 300 clamp(46px,5.4vw,86px)/.9 var(--en);color:var(--accent)}
.gift__kind{font:400 11px/1.4 var(--sans);letter-spacing:.24em;color:var(--muted);margin-bottom:6px}
.gift h3{font:400 clamp(20px,2.2vw,30px)/1.45 var(--serif);color:var(--ink);margin-bottom:6px}
.gift p:last-child{line-height:1.85}
.learn{margin-top:34px;padding:24px 26px;background:rgba(255,255,255,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.learn__h{font:400 13px/1.6 var(--serif);color:var(--ink);letter-spacing:.12em;margin-bottom:8px}
.learn li{position:relative;padding-left:22px;font-size:14px;line-height:1.9}
.learn li::before{content:"";position:absolute;left:2px;top:.85em;width:9px;height:1px;background:var(--accent)}

/* 案内人 */
.guide__head{display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.guide__face{width:clamp(110px,12vw,170px);aspect-ratio:1;object-fit:cover;object-position:50% 20%;border-radius:50%;filter:saturate(.8)}
.guide__role{font:400 11px/1.4 var(--sans);letter-spacing:.24em;color:var(--muted)}
.guide__name{font:300 clamp(48px,6.4vw,104px)/1.1 var(--serif);color:var(--ink);letter-spacing:.08em}
.guide__years{font-size:13px;letter-spacing:.2em;color:var(--body)}
.guide__years b{font:300 34px/1 var(--en);color:var(--ink);margin:0 4px;letter-spacing:0}
.guide__lic{margin-top:26px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;line-height:1.9;color:var(--ink)}
.textlink{display:inline-block;margin-top:18px;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:color .3s,border-color .3s}
.textlink:hover{color:var(--accent);border-color:transparent}

/* 最後 */
.slide--end{flex-direction:column;align-items:flex-start;justify-content:center}
.end__h{white-space:nowrap;font:300 clamp(42px,7.4vw,128px)/1.22 var(--serif);color:var(--ink);letter-spacing:.02em;margin-left:-.05em}

/* CTA（LINE の緑はボタンだけ） */
.cta{margin-top:clamp(30px,5vh,52px)}
.btn--line{display:inline-flex;align-items:center;gap:12px;padding:20px 38px;border-radius:999px;background:var(--line-green);color:#fff;text-decoration:none;font:500 clamp(15px,1.3vw,18px)/1 var(--sans);letter-spacing:.08em;box-shadow:0 12px 34px -14px rgba(6,120,60,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.btn--line:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(6,120,60,.6)}
.cta__note{margin-top:12px;font-size:12px;color:var(--muted);letter-spacing:.1em}

.faq{width:100%;max-width:720px;margin-top:clamp(48px,8vh,80px)}
.faq__h{font:400 11px/1 var(--sans);letter-spacing:.34em;color:var(--muted);margin-bottom:12px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;font:400 15px/1.7 var(--serif);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:300 24px/1 var(--en);color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-size:14px}

.foot{width:100%;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.foot__links{display:flex;gap:22px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

.scroll-hint{position:absolute;left:var(--pad);bottom:34px;font:400 10px/1 var(--sans);letter-spacing:.36em;color:var(--muted);display:flex;align-items:center;gap:14px}
.scroll-hint i{width:60px;height:1px;background:var(--muted);transform-origin:left;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

.stick{display:none}

/* ---------- 登場（霧から浮かぶ：ぼかし → くっきり） ---------- */
.motion .in{opacity:0;filter:blur(8px);transform:translateY(14px);transition:opacity 1.2s ease,filter 1.4s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.motion .in.is-in{opacity:1;filter:none;transform:none}
.motion .checks li.in.is-in:nth-child(2){transition-delay:.08s}.motion .checks li.in.is-in:nth-child(3){transition-delay:.16s}
.motion .checks li.in.is-in:nth-child(4){transition-delay:.24s}.motion .checks li.in.is-in:nth-child(5){transition-delay:.32s}.motion .checks li.in.is-in:nth-child(6){transition-delay:.4s}
.motion .gift.in.is-in:nth-child(2){transition-delay:.15s}.motion .gift.in.is-in:nth-child(3){transition-delay:.3s}
.motion .step.in.is-in:nth-child(2){transition-delay:.15s}.motion .step.in.is-in:nth-child(3){transition-delay:.3s}
.mist-c{display:inline-block;transition:opacity 1.6s ease,filter 1.8s ease}
.motion .js-mist .mist-c{opacity:0;filter:blur(14px)}
.motion .js-mist.is-in .mist-c{opacity:1;filter:none}

/* 開幕：白い霧の幕が上がる */
.curtain{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 30% 50%,#fff,var(--bg));pointer-events:none;transition:opacity 1.8s ease .2s}
.curtain.is-done{opacity:0}

/* ---------- SP ---------- */
@media (max-width:760px){
  .sp{display:inline}
  html{scroll-snap-type:none}
  .sky__veil{background:linear-gradient(180deg,rgba(242,243,244,.72),rgba(242,243,244,.86))}
  .sky__photo{left:-20%;right:-20%;-webkit-mask-image:none;mask-image:none;background-position:50% 70%}
  .hud{padding:16px 20px;gap:14px}
  .hud__clock{font-size:22px}
  .hud__name{display:none}
  .dots{display:none}
  .slide{padding:96px 22px 84px;min-height:auto}
  .slide--hero{min-height:100vh;min-height:100svh}
  .hero__h{font-size:clamp(34px,10.6vw,60px)}
  .h2{font-size:clamp(26px,8.2vw,44px)}
  .end__h{font-size:clamp(32px,10vw,56px);white-space:nowrap}
  .body br,.close br:not(.sp){display:none}
  .slide::after{right:16px;bottom:auto;top:84px;font-size:26vw;opacity:.07}
  .hero__lead br{display:none}
  .btn--line{width:100%;justify-content:center;padding:19px 18px}
  .flow{grid-template-columns:1fr 1fr;row-gap:44px}
  .step{grid-template-columns:86px 1fr}
  .step__no{flex-direction:column;align-items:flex-start;gap:6px}
  .gift{grid-template-columns:56px 1fr}
  .learn{padding:20px 18px}
  .guide__head{gap:18px}
  .stick{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:30;padding:15px;border-radius:999px;background:var(--line-green);color:#fff;text-align:center;text-decoration:none;font:500 15px/1 var(--sans);letter-spacing:.08em;box-shadow:0 10px 30px -10px rgba(6,120,60,.6);transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .stick.is-on{transform:none}
  .slide--end{padding-bottom:110px}
}

/* ---------- 動きを減らす設定：全停止・全文表示 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .in,.mist-c,.flow li{opacity:1!important;filter:none!important;transform:none!important}
  .flow::before{transform:none!important}
  .loop li{opacity:1}
  .curtain{display:none}
}