@charset "utf-8";
/* ==========================================================================
   演出レイヤー ── 導入・カーソル・視差・遷移
   ========================================================================== */

/* ---------- 読み込み演出 ---------- */
.ld{
  display:none;
  position:fixed;inset:0;z-index:200;background:#fff;
  place-items:center;overflow:hidden;
  transition:clip-path 1.1s var(--ease-out) .15s;
}
.js .ld{display:grid}
.ld.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
.ld__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(64px,7vw,120px) clamp(64px,7vw,120px);
}
.ld__mark{
  position:relative;text-align:center;
}
.ld__mark img{width:clamp(180px,20vw,280px);margin:0 auto;opacity:0;animation:ldIn 1s var(--ease-out) .1s forwards}
.ld__cap{
  margin-top:1.8em;font-family:var(--f-mono);font-size:10px;letter-spacing:.4em;
  color:var(--tx-faint);text-transform:uppercase;opacity:0;animation:ldIn 1s var(--ease-out) .3s forwards;
}
@keyframes ldIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ld__no{
  position:absolute;right:var(--gut);bottom:clamp(18px,3vw,44px);
  font-family:var(--f-latin);font-weight:600;font-size:clamp(54px,10vw,150px);
  line-height:.85;color:rgba(9,42,82,.12);letter-spacing:.01em;
}
.ld__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad)}

/* ---------- スクロール量のバー ---------- */
.prog{position:fixed;left:0;top:0;height:2px;width:0;z-index:100;background:var(--grad);pointer-events:none}

/* ---------- ページ遷移 ---------- */
.trans{
  position:fixed;inset:0;z-index:190;pointer-events:none;
  background:linear-gradient(100deg,#eaf3fc,#9bd0ff 52%,var(--blue-500));
  clip-path:inset(0 0 100% 0);
}
@keyframes transReveal{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
.js .trans{clip-path:inset(0 0 0 0);animation:transReveal .85s var(--ease-out) .08s forwards}
.trans.is-out{animation:none;clip-path:inset(0 0 0 0);transition:clip-path .5s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js .trans{animation:none;clip-path:inset(0 0 100% 0)}
}

/* ---------- 章見出しの罫 ---------- */
.chap{align-items:baseline}
.chap__no{
  font-family:var(--f-latin)!important;font-weight:700!important;
  font-size:clamp(19px,2vw,34px)!important;letter-spacing:.02em!important;
  color:transparent!important;-webkit-text-stroke:1px rgba(0,92,196,.85);
  padding-top:.25em!important;
}
.sec--light .chap__no{-webkit-text-stroke-color:var(--blue-700)}
.chap__rule{
  flex:1;height:1px;background:var(--line);align-self:center;margin-bottom:-.4em;min-width:20px;
  transform-origin:left;transition:transform 1.25s var(--ease-out) .25s;
}
.js .chap__rule{transform:scaleX(0)}
.js .chap.is-in .chap__rule{transform:scaleX(1)}
.chap__en{position:relative}

/* 文字が下からせり上がる */
.up{display:inline-block;overflow:hidden;vertical-align:bottom}
.up>span{display:inline-block;transition:transform 1.05s var(--ease-out)}
.js .up>span{transform:translateY(105%)}
.js .is-in .up>span{transform:none}
.up:nth-child(2)>span{transition-delay:.05s}
.up:nth-child(3)>span{transition-delay:.1s}
.up:nth-child(4)>span{transition-delay:.15s}
.up:nth-child(5)>span{transition-delay:.2s}
.up:nth-child(6)>span{transition-delay:.25s}
.up:nth-child(7)>span{transition-delay:.3s}
.up:nth-child(8)>span{transition-delay:.35s}
.up:nth-child(9)>span{transition-delay:.4s}
.up:nth-child(10)>span{transition-delay:.45s}
.up:nth-child(11)>span{transition-delay:.5s}
.up:nth-child(12)>span{transition-delay:.55s}

/* ---------- 左から順に出てくる ---------- */
.rv-x{transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js .rv-x{opacity:0;transform:translateX(-56px)}
.js .rv-x.is-in{opacity:1;transform:none}
.rec__itv .rv-x:nth-child(1){transition-delay:0s}
.rec__itv .rv-x:nth-child(2){transition-delay:.15s}
.rec__itv .rv-x:nth-child(3){transition-delay:.3s}

/* ---------- 透かし文字 ---------- */
.otxt{color:transparent;-webkit-text-stroke:1px rgba(9,42,82,.16)}
.hero__wm{
  position:absolute;left:var(--gut);right:0;bottom:calc(100% - 100svh + clamp(28px,4vw,64px));z-index:1;
  font-family:var(--f-latin);font-weight:700;font-size:clamp(90px,22vw,340px);line-height:.78;
  letter-spacing:.01em;color:transparent;-webkit-text-stroke:1px rgba(9,42,82,.05);
  pointer-events:none;white-space:nowrap;overflow:hidden;
}

/* ---------- 大判の写真帯 ---------- */
.band{position:relative;height:clamp(420px,62vh,760px);overflow:hidden;display:grid;place-items:center}
.band__bg{position:absolute;inset:-14% 0;z-index:0;will-change:transform}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.95}
.band::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--ink-900),rgba(255,255,255,.42) 26%,rgba(255,255,255,.5) 72%,var(--ink-900)),
             radial-gradient(70% 60% at 50% 50%,rgba(255,255,255,.5),transparent 72%);
}
.band__in{position:relative;z-index:2;width:100%;padding-inline:var(--gut);text-align:center}
.band__q{
  font-family:var(--f-mincho);font-weight:700;color:var(--tx-strong);
  font-size:clamp(22px,4.4vw,72px);line-height:1.6;letter-spacing:.08em;
  text-shadow:0 4px 34px rgba(255,255,255,.95),0 2px 10px rgba(255,255,255,.9);
}
.band__c{margin-top:2.2em;font-family:var(--f-mono);font-size:10px;letter-spacing:.36em;text-transform:uppercase}
.band__c span{display:inline-block;padding:.9em 1.6em;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);color:var(--blue-700)}

/* ---------- フッターの大文字 ---------- */
.ft__big{
  position:absolute;left:0;right:0;bottom:clamp(10px,1.3vw,20px);z-index:0;
  font-family:var(--f-latin);font-weight:700;
  font-size:min(26.4vw,380px);line-height:.78;letter-spacing:.012em;white-space:nowrap;
  text-align:center;color:transparent;-webkit-text-stroke:1px rgba(9,42,82,.085);
  pointer-events:none;user-select:none;
}

/* ---------- 実績ストリップの操作 ---------- */
.works__strip{cursor:grab}
.works__strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.strip-bar{
  position:relative;height:1px;background:var(--line);margin-top:6px;
  margin-inline:var(--gut);
}
.strip-bar i{position:absolute;left:0;top:-1px;height:3px;width:14%;background:var(--grad);transition:transform .12s linear}
.strip-hint{color:var(--tx-faint)}
.strip-hint{
  display:flex;align-items:center;gap:.8em;margin-top:14px;padding-inline:var(--gut);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.24em;color:var(--tx-faint);text-transform:uppercase;
}
.strip-hint::before{content:"";width:22px;height:1px;background:var(--blue-400)}

/* ---------- カードの角ブラケット ---------- */
.wcard::before,.wcard::after{
  content:"";position:absolute;z-index:3;width:18px;height:18px;opacity:0;
  transition:opacity .45s var(--ease),transform .5s var(--ease-out);
}
.wcard::before{left:-1px;top:-1px;border-left:1px solid var(--blue-500);border-top:1px solid var(--blue-500);transform:translate(6px,6px)}
.wcard::after{right:-1px;bottom:-1px;border-right:1px solid var(--blue-500);border-bottom:1px solid var(--blue-500);transform:translate(-6px,-6px)}
.wcard:hover::before,.wcard:hover::after{opacity:1;transform:none}

/* ---------- ヒーローを一度だけ横切る光 ---------- */
.hero__sweep{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.5) 54%,transparent 70%);
}
.hero.is-ready .hero__sweep{animation:sweep 1.9s var(--ease-out) .35s 1}
@keyframes sweep{
  0%{opacity:0;transform:translateX(-38%)}
  22%{opacity:1}
  100%{opacity:0;transform:translateX(38%)}
}

/* ---------- ヒーローの視差 ---------- */
.hero__bg{will-change:transform}
.hero__in{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .ld{display:none}
}
@media (max-width:900px){
  .hero__wm{display:none}
}