/* forwards.jp リニューアル案 共通の土台（各案の style で色・書体・形を上書き） */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
:root{--cw:1600px;--gut:clamp(20px,4.4vw,64px);--ease:cubic-bezier(.22,.61,.24,1)}
.wrap{max-width:var(--cw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.nw{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 改行：見出しは均す・本文は文節（BudouX読込後） */
h1,h2,h3,.bal{text-wrap:balance;word-break:auto-phrase}
p{line-break:strict}
.bx [data-jpb]{word-break:keep-all;overflow-wrap:anywhere}

/* 出現：見出しは左からフェード／箱は1つずつフェード／ステップは上から */
.js [data-rv]{opacity:0;transform:translateX(-36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-rv="r"]{transform:translateX(36px)}
.js [data-rv="up"]{transform:none}
.js [data-rv].in{opacity:1;transform:none}
.js [data-chars] .ch{display:inline-block;opacity:0;transform:translateX(-18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-chars].in .ch{opacity:1;transform:none}
.js .stg{opacity:0;transition:opacity .9s var(--ease)}
.js [data-stagger].in>.stg{opacity:1}
.js .stp{opacity:0;transform:translateY(-28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-steps].in>.stp{opacity:1;transform:none}
/* マーカー：文字高の約22%を左から引く */
.mk{background:linear-gradient(transparent 68%,var(--mkc,rgba(242,126,26,.3)) 68%,var(--mkc,rgba(242,126,26,.3)) 90%,transparent 90%) no-repeat 0 0/0% 100%;transition:background-size 1.1s var(--ease) var(--mkd,.3s);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mk.in,.in .mk,.rm .mk{background-size:100% 100%}

/* SCROLL（左下・縦書き＋動く線） */
.scroll{position:absolute;left:clamp(14px,2vw,32px);bottom:32px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;font:700 11px/1 Figtree,sans-serif;letter-spacing:.3em;writing-mode:vertical-rl;transition:opacity .5s}
.scroll::after{content:"";width:1px;height:84px;background:currentColor;transform-origin:top;animation:scl 2s var(--ease) infinite}
@keyframes scl{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.scrolled .scroll{opacity:0}

/* トップへ戻る */
.totop{position:fixed;right:16px;bottom:16px;z-index:60;width:48px;height:48px;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .4s,transform .4s var(--ease),bottom .4s var(--ease)}
.totop svg{display:block;width:18px;height:18px}
.totop-on .totop{opacity:1;pointer-events:auto;transform:none}
.fbn-on .totop{bottom:calc(var(--fbn-h,96px) + 24px)}

/* 固定バナー（出し入れ） */
.fbn{position:fixed;left:0;right:0;bottom:0;z-index:55;transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s;pointer-events:none}
.fbn-on .fbn{transform:none;visibility:visible;transition:transform .6s var(--ease)}
.fbn-on .fbn .fbn-in{pointer-events:auto}
body{padding-bottom:0}
body.has-fbn{padding-bottom:var(--fbn-h,96px)}

/* クリックの紙吹雪・背面に降る紙吹雪 */
.fx{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.fx i{position:absolute;width:12px;height:8px;background:var(--c);animation:fx var(--t) cubic-bezier(.15,.7,.3,1) forwards}
.fx .fx-r{width:10px;height:10px;border-radius:50%}
.fx .fx-s{width:5px;height:15px}
.fx .fx-t{width:14px;height:13px;clip-path:polygon(0 0,100% 50%,0 100%)}
@keyframes fx{0%{transform:translate(-50%,-50%) scale(.4)}70%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 40px)) rotate(var(--r));opacity:0}}
.rain{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.rain .rn{position:absolute;top:-20px;width:var(--s);height:calc(var(--s) * .62);background:var(--c);opacity:.85;animation:rn var(--d) linear var(--dl) infinite}
.rain .rn-r{height:var(--s);border-radius:50%;width:calc(var(--s) * .8);height:calc(var(--s) * .8)}
.rain .rn-s{width:calc(var(--s) * .4);height:var(--s)}
.rain .rn-t{clip-path:polygon(0 0,100% 50%,0 100%);height:var(--s)}
@keyframes rn{0%{transform:translate(0,-20px) rotate(0)}50%{transform:translate(var(--sw),50vh) rotate(260deg)}100%{transform:translate(0,105vh) rotate(520deg)}}
main,header,footer{position:relative;z-index:2}

/* ホバー（PCのみ） */
@media (hover:hover) and (pointer:fine){
  .zoom img{transition:transform 1.2s var(--ease)}
  .zoom:hover img{transform:scale(1.065)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.rm *,.rm *::before,.rm *::after{animation-play-state:paused!important;transition:none!important}

/* 写真スライド（共通）：重ねてクロスフェード、表示中はゆっくり寄る */
[data-slides]{position:relative;overflow:hidden}
[data-slides]>figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s ease}
[data-slides]>figure.on{opacity:1;z-index:1}
[data-slides]>figure.prev{z-index:0}
[data-slides] img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transform:scale(1.02)}
[data-slides]>figure.on img{animation:kb 8s linear forwards}
[data-slides]>figure:nth-child(even).on img{animation-name:kb2}
[data-slides] figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes kb2{from{transform:scale(1.12) translate(1.5%,0)}to{transform:scale(1.02) translate(0,0)}}
.slbar{height:2px;background:currentColor;transform-origin:left;transform:scaleX(0)}
.slbar.run{animation:slbar 6s linear forwards}
@keyframes slbar{to{transform:scaleX(1)}}
/* メガメニューは開いているときだけマウスに反応（閉じかけのパネルで開き直さない） */
.gnav>li:not(.open) .mega{pointer-events:none}