/* ============================================
   wafu-dark tokens
   ============================================ */
:root{
  --bg:#0e1f3a;--bg2:#132a4d;--card:#1a355e;
  --ink:#eef3fa;--body:#b9c6dc;--muted:#7c8ea9;
  --line:rgba(238,243,250,.12);
  --accent:#e8dcc0;--accent-2:#e8dcc0;--shu:#c94040;
  --line-green:#06C755;
  --fd:"Shippori Mincho B1",serif;
  --fh:"Noto Serif JP",serif;
  --fb:"Noto Sans JP",sans-serif;
  --pad:clamp(24px,5vw,80px);
}

/* ============================================
   reset
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  font-family:var(--fb);font-size:17px;line-height:1.9;
  color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 2000'%3E%3C!-- 大鳥居シルエット（右寄り） --%3E%3Cg opacity='.05' fill='%23e8dcc0'%3E%3C!-- 笠木（反った上の梁） --%3E%3Cpath d='M600 240 Q620 220 850 210 Q880 210 880 224 Q880 238 850 240 Q620 250 600 270 Q580 250 350 240 Q320 238 320 224 Q320 210 350 210 Q580 220 600 240Z'/%3E%3C!-- 島木（笠木の下の梁） --%3E%3Crect x='365' y='260' width='470' height='18' rx='2'/%3E%3C!-- 額束（中央の板） --%3E%3Crect x='570' y='278' width='60' height='50' rx='3'/%3E%3C!-- 貫（中央の横梁） --%3E%3Crect x='390' y='340' width='420' height='12' rx='2'/%3E%3C!-- 左柱 --%3E%3Crect x='400' y='248' width='26' height='700' rx='3'/%3E%3C!-- 右柱 --%3E%3Crect x='774' y='248' width='26' height='700' rx='3'/%3E%3C!-- 台石 左 --%3E%3Crect x='388' y='940' width='50' height='16' rx='4'/%3E%3C!-- 台石 右 --%3E%3Crect x='762' y='940' width='50' height='16' rx='4'/%3E%3C/g%3E%3C!-- 小鳥居（左奥・遠景） --%3E%3Cg opacity='.03' fill='%23e8dcc0'%3E%3Cpath d='M120 680 Q130 672 190 668 Q200 668 200 674 Q200 680 190 681 Q130 685 120 692 Q110 685 50 681 Q40 680 40 674 Q40 668 50 668 Q110 672 120 680Z'/%3E%3Crect x='58' y='692' width='124' height='8'/%3E%3Crect x='70' y='700' width='10' height='200' rx='1'/%3E%3Crect x='160' y='700' width='10' height='200' rx='1'/%3E%3C/g%3E%3C!-- 石灯籠（右下） --%3E%3Cg opacity='.04' fill='%23e8dcc0'%3E%3Cpath d='M1060 1220 L1080 1190 L1100 1220Z'/%3E%3Crect x='1058' y='1220' width='44' height='10' rx='2'/%3E%3Crect x='1065' y='1230' width='30' height='36' rx='2'/%3E%3Crect x='1060' y='1266' width='40' height='8' rx='2'/%3E%3Crect x='1075' y='1274' width='10' height='50' rx='1'/%3E%3Crect x='1065' y='1324' width='30' height='10' rx='3'/%3E%3C/g%3E%3C!-- 石灯籠（左下） --%3E%3Cg opacity='.03' fill='%23e8dcc0'%3E%3Cpath d='M90 1460 L105 1436 L120 1460Z'/%3E%3Crect x='88' y='1460' width='34' height='8' rx='2'/%3E%3Crect x='93' y='1468' width='24' height='28' rx='2'/%3E%3Crect x='90' y='1496' width='30' height='6' rx='2'/%3E%3Crect x='101' y='1502' width='8' height='40' rx='1'/%3E%3Crect x='94' y='1542' width='22' height='8' rx='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% auto;background-repeat:repeat-y;background-position:center top;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 12% 80%,rgba(232,220,192,.04) 0,transparent 100%),
    radial-gradient(ellipse 50% 40% at 88% 10%,rgba(232,220,192,.03) 0,transparent 100%);
}

/* ============================================
   progress
   ============================================ */
.progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:100}
.progress__bar{height:100%;width:0;background:var(--accent);transition:width .1s linear}

/* ============================================
   masthead
   ============================================ */
.mast{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--pad);
  font-family:var(--fd);font-size:11px;
  letter-spacing:.25em;color:var(--muted);
  z-index:90;transition:transform .4s,background .3s;
}
.mast.is-hidden{transform:translateY(-100%)}
.mast.is-scrolled{background:rgba(14,31,58,.92);backdrop-filter:blur(6px)}
.mast__c{color:var(--ink);font-size:12px}

/* ============================================
   page counter
   ============================================ */
.pgn{
  position:fixed;bottom:28px;right:var(--pad);
  font-family:var(--fh);font-size:11px;
  letter-spacing:.15em;color:var(--muted);z-index:90;
}

/* ============================================
   HERO
   ============================================ */
.hero{
  display:flex;flex-direction:column;
  align-items:center;
  text-align:center;gap:clamp(12px,2vw,24px);
  padding:clamp(48px,8vh,100px) var(--pad) clamp(32px,4vh,60px);
  position:relative;overflow:hidden;
}

.hero__wm{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--fh);font-weight:700;font-style:italic;
  font-size:clamp(60px,18vw,280px);
  color:var(--ink);opacity:.025;
  letter-spacing:.35em;white-space:nowrap;
  pointer-events:none;user-select:none;
}

.hero__col-l{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
}

.hero__title{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(72px,16vw,240px);
  color:var(--ink);line-height:1;
  letter-spacing:.18em;white-space:nowrap;
}
.hero__title .hc{display:inline-block}

.hero__stamp{
  width:52px;height:52px;
  border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:22px;color:var(--accent);
  transform:rotate(-12deg);opacity:.7;
  transition:opacity .4s;
}
.hero__stamp:hover{opacity:1}

.hero__col-r{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  max-width:480px;z-index:2;
}

.hero__kana{
  font-family:var(--fb);font-size:11px;font-weight:300;
  letter-spacing:.45em;color:var(--muted);
}

.hero__sub{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(20px,5.5vw,64px);
  color:var(--accent);letter-spacing:.22em;line-height:1.5;
  white-space:nowrap;
}

.hero__cap{
  font-size:11px;letter-spacing:.3em;
  color:var(--muted);line-height:1.9;
}

.hero__bot{
  display:flex;align-items:center;justify-content:center;z-index:2;
}

.hero__cta{
  font-family:var(--fb);font-size:12px;letter-spacing:.2em;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(238,243,250,.2);
  padding-bottom:4px;transition:color .3s,border-color .3s;
}
.hero__cta:hover{color:var(--accent);border-color:var(--accent)}

.hero__hint{font-size:10px;letter-spacing:.3em;color:var(--muted);opacity:.5}

/* embers */
.embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.ember{
  position:absolute;bottom:15%;
  width:3px;height:3px;background:var(--accent);
  border-radius:50%;opacity:0;
  animation:ember-up var(--dur,4s) var(--del,0s) ease-out infinite;
}
.ember--gold{background:var(--accent-2)}
@keyframes ember-up{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  12%{opacity:.65}
  100%{opacity:0;transform:translateY(-55vh) translateX(var(--dx,10px)) scale(0)}
}

/* ink stroke */
.hero__ink{
  position:absolute;right:clamp(48px,10vw,140px);top:0;
  width:30px;height:100%;opacity:1;pointer-events:none;z-index:1;
}

/* 神社イラスト */
.hero__shrine{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.shide{animation:shide-sway 5s ease-in-out infinite}
.shide--1{transform-origin:280px 180px;animation-duration:6s}
.shide--2{transform-origin:520px 180px;animation-duration:5s;animation-delay:-.5s}
.shide--3{transform-origin:400px 180px;animation-duration:7s;animation-delay:-1.5s}
@keyframes shide-sway{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(2deg)}
}

/* 月 */
.sec__moon{
  position:absolute;top:-40px;right:-20px;
  width:clamp(180px,22vw,300px);height:auto;
  pointer-events:none;z-index:0;
}

/* 流水 */
.sec__water{
  position:absolute;bottom:0;left:0;right:0;
  width:100%;height:clamp(80px,12vw,160px);
  pointer-events:none;z-index:0;
}

/* hero-cta-bar */
.hero-cta-bar{
  text-align:center;
  padding:clamp(24px,3vh,40px) var(--pad);
}

/* ============================================
   sections
   ============================================ */
.sec{
  padding:clamp(48px,6vh,100px) var(--pad);
  position:relative;max-width:1100px;margin:0 auto;
}

.sec__bg{
  position:absolute;font-family:var(--fd);
  font-size:clamp(140px,26vw,380px);
  color:var(--ink);opacity:.022;line-height:1;
  pointer-events:none;user-select:none;
  top:clamp(20px,6vh,80px);left:-3%;z-index:0;
}
.sec__bg--r{left:auto;right:-3%}

/* asymmetric grid */
.sec__grid{display:grid;position:relative;z-index:1}
.sec__grid--lr{
  grid-template-columns:clamp(160px,28%,300px) 1fr;
  gap:clamp(40px,6vw,100px);align-items:start;
}

.sec__wide{position:relative;z-index:1;max-width:620px}

.sec__left{padding-top:4px}

.sec__label{
  font-family:var(--fh);font-size:11px;
  letter-spacing:.35em;color:var(--muted);
  text-transform:uppercase;display:block;margin-bottom:12px;
}

.sec__h{
  font-family:var(--fd);
  font-size:clamp(24px,4vw,42px);
  color:var(--ink);letter-spacing:.2em;line-height:1.3;
}
.sec__h--xl{
  font-size:clamp(32px,6vw,64px);letter-spacing:.15em;
}

.sec__rule{
  border:none;border-top:1px solid rgba(238,243,250,.14);
  margin:clamp(20px,3vh,36px) 0 clamp(28px,4vh,48px);
  transform-origin:left;transform:scaleX(0);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1);
}
.sec__rule.is-in{transform:scaleX(1)}
.sec__rule--short{max-width:100px}

.sec__body{font-size:17px;line-height:2.2;max-width:520px}
.sec__body--verse{
  font-family:var(--fd);
  font-size:clamp(16px,2.2vw,22px);
  line-height:2.4;letter-spacing:.08em;
}

/* drop cap */
.dc{
  font-family:var(--fd);font-size:3.8em;float:left;
  line-height:.78;margin-right:.12em;margin-top:.05em;
  color:var(--ink);
}

/* accent section — brush-stroke left border */
.sec--accent{
  margin-left:var(--pad);padding-left:clamp(40px,6vw,100px);
  max-width:none;position:relative;
}
.sec--accent::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:
    linear-gradient(to bottom,
      var(--accent) 0%,var(--accent) 14%,
      transparent 14%,transparent 16%,
      var(--accent) 16%,var(--accent) 48%,
      transparent 48%,transparent 51%,
      var(--accent) 51%,var(--accent) 79%,
      transparent 79%,transparent 83%,
      var(--accent) 83%,var(--accent) 100%);
}

/* ============================================
   steps
   ============================================ */
.steps{display:flex;flex-direction:column}
.step{
  display:grid;grid-template-columns:64px 1fr;
  gap:20px;align-items:start;
  padding:clamp(24px,3vh,36px) 0;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:none}
.step__n{
  font-family:var(--fd);font-size:clamp(28px,3.5vw,40px);
  color:var(--accent-2);line-height:1.2;text-align:center;
}
.step__h{
  font-family:var(--fd);font-size:clamp(16px,2vw,20px);
  color:var(--ink);letter-spacing:.1em;margin-bottom:4px;line-height:1.6;
}
.step__p{font-size:15px;color:var(--muted);letter-spacing:.05em}

/* ============================================
   quote
   ============================================ */
.qt{padding:0;margin-top:clamp(24px,3vh,40px)}
.qt__txt{
  font-family:var(--fd);
  font-size:clamp(20px,3.5vw,34px);
  color:var(--ink);line-height:1.9;letter-spacing:.1em;
  padding-left:24px;border-left:2px solid var(--accent);
}
.qt__cite{
  display:block;margin-top:24px;padding-left:24px;
  font-family:var(--fb);font-size:12px;font-style:normal;
  color:var(--muted);letter-spacing:.2em;
}

/* ============================================
   CTA
   ============================================ */
.sec--cta{text-align:center;max-width:640px;padding-bottom:clamp(60px,8vh,120px)}
.cta__inner{position:relative;z-index:1}
.cta__h{
  font-family:var(--fd);
  font-size:clamp(26px,5vw,52px);
  color:var(--ink);letter-spacing:.2em;margin-bottom:28px;
}
.cta__body{font-size:17px;line-height:2.2;margin-bottom:44px;color:var(--body)}
.cta__note{margin-top:16px;font-size:12px;color:var(--muted);letter-spacing:.15em}

.btn-line{
  display:inline-flex;align-items:center;gap:12px;
  padding:22px 48px;background:var(--line-green);color:#fff;
  font-family:var(--fb);font-size:19px;font-weight:700;letter-spacing:.1em;
  text-decoration:none;transition:opacity .3s;white-space:nowrap;
}
.btn-line:hover{opacity:.85}
.btn-line svg{flex-shrink:0}

/* ============================================
   footer
   ============================================ */
.foot{
  padding:40px var(--pad);text-align:center;
  font-size:11px;color:var(--muted);letter-spacing:.15em;
  border-top:1px solid var(--line);
  max-width:1100px;margin:0 auto;
}

/* ============================================
   reveal
   ============================================ */
.in{
  opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1);
}
.in.is-in{opacity:1;transform:translateY(0)}

/* ============================================
   lightning
   ============================================ */
.fx-bolt{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:92;mix-blend-mode:screen;
}

/* ============================================
   responsive
   ============================================ */
@media(max-width:768px){
  .hero{padding-left:20px;padding-right:20px}
  .hero__col-l,.hero__col-r{width:100%;align-items:center}
  .hero__title{
    font-size:clamp(56px,22vw,140px);letter-spacing:.15em;
    padding-left:.15em;
  }
  .hero__sub{padding-left:.22em}
  .hero__kana{padding-left:.45em}
  .hero__col-r{max-width:none}
  .hero__bot{flex-direction:column;gap:12px}
  .hero__ink{display:none}
  .hero__shrine{opacity:.7}
  .hero-cta-bar{text-align:center;display:flex;justify-content:center;padding-left:20px;padding-right:20px}
  .sec__moon{width:clamp(120px,30vw,180px);top:-20px;right:-10px}
  .sec__water{height:60px}

  .sec__grid--lr{grid-template-columns:1fr;gap:20px}
  .sec__bg{font-size:clamp(100px,22vw,200px);opacity:.018}
  .sec--accent{margin-left:0;padding-left:clamp(28px,5vw,48px)}
  .sec__wide{max-width:none}
  .sec__h--xl{font-size:clamp(28px,7vw,48px)}

  .step{grid-template-columns:48px 1fr;gap:12px}
  .btn-line{display:flex;width:100%;justify-content:center;padding:18px 20px;font-size:17px}
  .pgn{display:none}
}

@media(max-width:480px){
  .hero__title{font-size:clamp(48px,20vw,100px)}
  .hero__sub{font-size:clamp(20px,5vw,32px)}
  .sec__bg{font-size:clamp(80px,20vw,160px)}
}

/* ============================================
   reduced motion
   ============================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
  .in{opacity:1;transform:none}
  .sec__rule{transform:scaleX(1)}
  .progress,.hero__hint,.embers{display:none}
  .lantern{animation:none}
}