/* 動きの試し（オン/オフで比べる用）。決まったら使うものだけ残す */

/* ── 既存の動きをオフにする ── */
html.fx-off-fade .rv,html.fx-off-fade .hero__visual text{opacity:1!important;transform:none!important;transition:none!important}
html.fx-off-zoom .about__shot:hover img,html.fx-off-zoom .biz__shot:hover img,html.fx-off-zoom .cnt__card:hover .ph{transform:none!important}

/* ── なめらかスクロール ── */
html.fx-smooth{scroll-behavior:auto!important}

/* ── 専用カーソル ── */
.fxc{position:fixed;left:0;top:0;z-index:400;pointer-events:none;mix-blend-mode:difference}
.fxc__dot,.fxc__ring{position:fixed;left:0;top:0;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.fxc__dot{width:6px;height:6px}
.fxc__ring{width:38px;height:38px;background:transparent;border:1px solid #fff;display:flex;align-items:center;justify-content:center;transition:width .35s cubic-bezier(.2,.7,.1,1),height .35s cubic-bezier(.2,.7,.1,1),background .35s}
.fxc__ring span{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;color:#000;opacity:0;transition:opacity .2s}
.fxc.link .fxc__ring{width:64px;height:64px;background:#fff}
.fxc.view .fxc__ring{width:92px;height:92px;background:#fff}
.fxc.view .fxc__ring span{opacity:1}
.fxc.link .fxc__dot,.fxc.view .fxc__dot{opacity:0}
@media(hover:hover) and (pointer:fine){html.fx-cursor,html.fx-cursor *{cursor:none!important}}
@media not ((hover:hover) and (pointer:fine)){.fxc{display:none}}

/* ── 見出しが1文字ずつせり上がる ── */
.fxs .ch{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.fxs .ch>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.75,.1,1);transition-delay:calc(var(--i)*28ms)}
.fxs.fx-in .ch>span{transform:none}

/* ── 写真が幕を開けるように現れる ── */
html.fx-clip .fx-clipel{clip-path:inset(100% 0 0 0);transition:clip-path 1.25s cubic-bezier(.77,0,.18,1)}
html.fx-clip .fx-clipel img{scale:1.3;transition:scale 1.8s cubic-bezier(.2,.7,.1,1),transform .8s cubic-bezier(.22,.61,.36,1)}
html.fx-clip .fx-clipel.fx-in{clip-path:inset(0 0 0 0)}
html.fx-clip .fx-clipel.fx-in img{scale:1}

/* ── 写真の奥行き（パララックス） ── */
html.fx-parallax .fx-plx img{height:122%!important;margin-top:-11%;translate:0 var(--py,0px);will-change:translate}

/* ── 磁石のように吸いつくボタン ── */
.fx-mag{transition:translate .5s cubic-bezier(.2,.7,.1,1)}
.fx-mag.fx-magon{transition:translate .12s linear}

/* ── 流れる文字がスクロールの勢いで加速・傾く ── */
html.fx-marquee .ticker__run{animation:none!important;will-change:transform}

/* ── トップの大きなロゴがスクロールで広がる ── */
html.fx-hero .hero__visual svg{transform-origin:100% 60%;will-change:transform,opacity}

/* ── 黒い面がせり出してくる（世界商圏の帯） ── */
html.fx-invert .vis{position:relative;isolation:isolate;border-color:transparent;padding-top:120px;padding-bottom:120px}
html.fx-invert .vis::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;clip-path:inset(calc((1 - var(--v,0)) * 45%) calc((1 - var(--v,0)) * 30%))}
html.fx-invert .vis h2,html.fx-invert .vis p{transition:color .6s}
html.fx-invert .vis.dark h2{color:var(--paper)}
html.fx-invert .vis.dark p{color:#B4AEA5}
@media(max-width:900px){html.fx-invert .vis{padding-top:70px;padding-bottom:70px}}

/* ── ページ切り替えの幕 ── */
.fxpt{position:fixed;inset:0;z-index:500;background:var(--ink,#141414);color:var(--paper,#FFFFFF);display:flex;align-items:center;justify-content:center;transform:translateY(100%);pointer-events:none}
.fxpt b{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(28px,5vw,56px);font-weight:700;letter-spacing:.06em;opacity:0;transition:opacity .3s}
html.fx-pt-cover .fxpt{transform:none;transition:transform .65s cubic-bezier(.77,0,.18,1)}
html.fx-pt-cover .fxpt b{opacity:1}
html.fx-pt-enter .fxpt{transform:none}
html.fx-pt-enter body::before{content:"";position:fixed;inset:0;background:#141414;z-index:499}
html.fx-pt-enter .fxpt b{opacity:1}
html.fx-pt-leave .fxpt{transform:translateY(-100%);transition:transform .8s cubic-bezier(.77,0,.18,1) .1s}
html.fx-pt-leave .fxpt b{opacity:0}

/* ── フィルムのざらつき ── */
.fxg{position:fixed;inset:-50%;z-index:450;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fxgrain .9s steps(6) infinite}
@keyframes fxgrain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* ── 読んだ位置のライン ── */
.fxp{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}

/* ── 下へ読むとヘッダーが隠れる ── */
html.fx-header .top{transition:transform .45s cubic-bezier(.2,.7,.1,1),background .3s}
html.fx-header.fx-hidehead .top{transform:translateY(-110%)}

/* ── リンクの文字がくるっと入れ替わる ── */
.fxr{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.5;height:1.5em}
.fxr>span{display:block;transition:transform .45s cubic-bezier(.2,.7,.1,1)}
a:hover>.fxr>span,.fxr:hover>span{transform:translateY(-100%)}

/* ── 強みを横に流す（パソコンのみ） ── */
@media(min-width:1001px){
  html.fx-hscroll .fxh{position:relative}
  html.fx-hscroll .fxh__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  html.fx-hscroll .fxh .str{display:flex;gap:1px;width:max-content;will-change:transform}
  html.fx-hscroll .fxh .str>div{width:min(560px,44vw);flex:none;padding:56px 44px}
  html.fx-hscroll .fxh .str h3{font-size:26px}
  html.fx-hscroll .fxh__count{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--grey);margin-top:22px}
}

/* ── 試しパネル ── */
.fxlab-btn{position:fixed;left:14px;bottom:14px;z-index:600;font:700 12.5px/1 "Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.06em;background:#141414;color:#FAFAF8;border:1px solid #FAFAF8;border-radius:999px;padding:11px 16px;cursor:pointer!important;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.fxlab{position:fixed;left:14px;bottom:62px;z-index:600;width:min(380px,calc(100vw - 28px));max-height:min(74vh,680px);overflow:auto;background:#fff;color:#141414;border:1px solid #141414;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.25);font:13px/1.55 "Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.02em;display:none}
.fxlab.open{display:block}
.fxlab *{cursor:auto!important}
.fxlab header{position:sticky;top:0;background:#fff;padding:14px 16px 10px;border-bottom:1px solid #E2DFD8;z-index:1}
.fxlab header b{display:block;font-size:14px;margin-bottom:6px}
.fxlab header p{font-size:11.5px;color:#6B675F}
.fxlab .acts2{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.fxlab .acts2 button{font:inherit;font-size:11.5px;border:1px solid #CFCBC3;background:#FAFAF8;border-radius:4px;padding:5px 9px;cursor:pointer!important}
.fxlab h4{font-size:11px;letter-spacing:.12em;color:#8C8880;padding:12px 16px 4px}
.fxlab label{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:9px 16px;border-top:1px solid #F0EEE9;cursor:pointer!important}
.fxlab label:hover{background:#FAFAF8}
.fxlab input{width:16px;height:16px;margin-top:2px;accent-color:#141414;cursor:pointer!important}
.fxlab label b{font-weight:700}
.fxlab label small{grid-column:2;font-size:11.5px;color:#6B675F}
.fxlab label em{font-style:normal;font-size:10.5px;color:#fff;background:#8C8880;border-radius:3px;padding:0 5px;margin-left:6px;vertical-align:1px}