/* ============================================================
   株式会社Refra  —  style.css
   base width 1440 / 実測値をもとに再現
   ============================================================ */
:root{
  --navy:#00587B;
  --green:#1CA639;
  --text:#444;
  --sub:#6C6C6C;
  --gray:#F4F4F4;
  --tint:linear-gradient(135deg,#E9F2F6 0%,#EEF7F0 55%,#E6F5EA 100%);
  --dark:#444;
  --line:#DDD;
  --caption:#050038;
  --ja:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --en:"Montserrat",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --gutter:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  font-family:var(--ja);
  color:var(--text);
  background:linear-gradient(160deg,#CFE4EE 0%,#EAF4F1 40%,#F6FBF8 55%,#CFEEDA 100%) fixed;
  font-weight:500;
  line-height:1.8;
  overflow-x:clip;
}
body.is-loading{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dd,dt,address{margin:0}
address{font-style:normal}
button{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.clip-defs{position:absolute;width:0;height:0}

/* ---------- カーソル（差の合成で背景の補色になる丸） ---------- */
.cursor{
  position:fixed;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:rgba(28,166,57,.55);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .35s var(--ease),opacity .3s;
  opacity:0;
}
.cursor.is-on{opacity:1}
.cursor.is-hover{transform:translate(-50%,-50%) scale(2.6);background:rgba(28,166,57,.9);mix-blend-mode:difference}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- ローディング ---------- */
.loader{
  position:fixed;inset:0;z-index:9000;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .9s var(--ease);
}
.loader.is-done{transform:translateY(-100%)}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:32px}
.loader__logo{width:320px;display:flex;justify-content:center}
.loader__full{width:320px;height:auto;opacity:0;transform:scale(.6) translateY(20px);filter:blur(10px);
  animation:logoIn 1.1s var(--pop) .15s forwards}
.loader__bar{width:240px;height:3px;background:#e6eef1;overflow:hidden;border-radius:3px}
.loader__bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--navy),var(--green));transform:translateX(-100%);animation:loaderBar 1.5s var(--ease) .5s forwards}
@keyframes logoIn{60%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes loaderBar{to{transform:none}}

/* ---------- ヘッダー ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:124px;
  transition:background .4s,box-shadow .4s,height .4s var(--ease);
}
.header.is-scrolled{height:72px}
.header::before{content:"";position:absolute;left:0;right:0;top:0;height:220%;z-index:-1;opacity:0;transition:opacity .4s;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 30%,rgba(255,255,255,.6) 55%,rgba(255,255,255,.25) 75%,rgba(255,255,255,0) 100%)}
.header.is-scrolled::before{opacity:1}
.header__inner{height:100%;max-width:none;margin:0;padding:0 44px;display:flex;align-items:center;justify-content:space-between;transition:padding .4s var(--ease)}
.header.is-top .header__inner{align-items:flex-start;padding-top:40px}
.header__logo{transition:opacity .5s,transform .6s var(--pop)}
.header.is-top .header__logo{opacity:0;transform:translateX(-24px);pointer-events:none}
.header__logo img{width:137px;height:auto;transition:transform .4s var(--ease)}
.header__logo:hover img{transform:scale(1.04)}
.nav{display:flex;align-items:center;gap:36px}
.nav__list{display:flex;align-items:center;gap:24px}
.nav__link{
  font-family:var(--en);font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--text);
  display:inline-flex;align-items:center;gap:6px;position:relative;padding:4px 0;overflow:hidden;
}
.nav__link span{display:inline-block;transition:transform .4s var(--ease)}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link svg{color:var(--sub);flex:none}

/* 共通ボタン（丸ボタン＋矢印が横にスライド） */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  height:44px;padding:0 9px 0 22px;border-radius:999px;color:#fff;
  font-size:14px;font-weight:500;letter-spacing:.03em;white-space:nowrap;
  transition:transform .4s var(--ease),box-shadow .4s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
.btn--green{background:linear-gradient(100deg,var(--green),#12805a 60%,var(--navy));background-size:200% 100%;transition:background-position .6s var(--ease),transform .4s var(--ease),box-shadow .4s}
.btn--green:hover{background-position:100% 0}
.btn--navy{background:var(--navy);height:50px;padding:0 9px 0 34px;font-size:16px;gap:20px}
.btn__icon{
  position:relative;width:26px;height:26px;border-radius:50%;background:#fff;
  display:grid;place-items:center;overflow:hidden;flex:none;
}
.btn--navy .btn__icon{width:32px;height:32px}
.btn__icon svg{
  position:absolute;width:14px;height:14px;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease);
}
.btn--navy .btn__icon svg{stroke:var(--navy);width:16px;height:16px}
.btn__icon svg:nth-child(2){transform:translateX(-160%)}
.btn:hover .btn__icon svg:nth-child(1){transform:translateX(160%)}
.btn:hover .btn__icon svg:nth-child(2){transform:translateX(0)}

/* ハンバーガー（SPのみ） */
.burger{display:none;width:44px;height:44px;position:relative;z-index:110}
.burger span{position:absolute;left:10px;width:24px;height:2px;background:var(--text);transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:25px}
.burger.is-open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.is-open span:nth-child(2){top:21px;transform:rotate(-45deg)}

/* ---------- 有機的な切り抜き（blob） ---------- */
.blob{
  position:relative;overflow:hidden;
  clip-path:url(#blob-fallback);
  will-change:transform;
  transform:translate3d(0,var(--py,0px),0);
}
.blob{animation:bob 7s ease-in-out infinite alternate}
.blob:nth-of-type(2n){animation-duration:9s;animation-direction:alternate-reverse}
@keyframes bob{
  0%{translate:0 0;rotate:-1.5deg}
  100%{translate:0 -14px;rotate:1.5deg}
}
.blob__img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);
  animation:drift 9s ease-in-out infinite alternate;
}
.blob:nth-of-type(2n) .blob__img{animation-duration:11s;animation-direction:alternate-reverse}
@keyframes drift{
  0%{transform:scale(1.14) translate(-2.5%,-2%) rotate(-1deg)}
  100%{transform:scale(1.2) translate(2.5%,2%) rotate(1.5deg)}
}

/* ---------- セクション見出し（グラデ文字：ゆっくり流れる） ---------- */
.sec-ttl{
  font-family:var(--en);font-weight:600;font-size:24px;letter-spacing:.02em;line-height:1;
  background:linear-gradient(90deg,var(--navy) 0%,var(--green) 35%,var(--navy) 70%,var(--green) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
  animation:gradShift 8s linear infinite;
}
@keyframes gradShift{to{background-position:300% 0}}
.sec-h{font-size:52px;font-weight:700;line-height:1.15;margin-top:14px;letter-spacing:.02em}
.sec-lead{font-size:16px;font-weight:400;line-height:2;letter-spacing:.03em;margin-top:20px;max-width:640px;color:var(--text)}

/* ---------- HERO：全画面フォトスライド ---------- */
.hero{position:relative;padding:12px 12px 0;
  background:transparent}
.hero::before{content:"";position:absolute;left:0;top:0;right:0;height:calc(100vh);height:calc(100svh);border-radius:0;
  background:linear-gradient(135deg,var(--navy),var(--green));background-size:200% 200%;animation:gradMove 10s ease-in-out infinite alternate;z-index:0}
.fv{position:relative;z-index:1}
.fv{position:relative;height:calc(100vh - 24px);height:calc(100svh - 24px);min-height:560px;overflow:hidden;border-radius:20px;background:#1a1a1a}
.fv__slides{position:absolute;inset:0}
.fv__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);will-change:opacity}
.fv__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6.5s linear}
.fv__slide.is-active{opacity:1;z-index:1}
.fv__slide.is-active img{transform:scale(1.16)}
.fv__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%)}
.fv{opacity:0;transform:scale(1.02);transition:opacity 1.2s var(--ease),transform 1.6s var(--ease)}
.is-ready .fv{opacity:1;transform:none}

/* 中央のキャッチコピー */
.hero__copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;pointer-events:none;padding:0 24px}
.hero__line{position:relative;display:inline-block;font-weight:700;line-height:1.25;letter-spacing:.02em;color:var(--navy);padding:8px 40px 12px}
/* 帯：他の写真と同じ有機的な形で、ゆっくり形が変わる（JSがclip-pathを更新） */
.hero__band{position:absolute;inset:0;z-index:-1;display:block;border-radius:12px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 60px -20px rgba(0,40,60,.35),inset 0 1px 0 rgba(255,255,255,.9);
  transform:scale(0);transform-origin:left center;transition:transform 1s var(--pop)}
.hero__line--1 .hero__band{transition-delay:.25s}
.hero__line--2 .hero__band{transition-delay:.5s}
.is-ready .hero__band{transform:scale(1)}
.hero__line em{font-style:normal;color:var(--green)}
.hero__line--1{font-size:72px;animation:lineFloat 6s ease-in-out infinite alternate}
.hero__line--2{font-size:72px;margin:10px 0 0 120px;animation:lineFloat 7s ease-in-out -3s infinite alternate-reverse}
@keyframes lineFloat{from{translate:0 0;rotate:-.3deg}to{translate:0 -8px;rotate:.3deg}}
.hero__line em{font-style:normal;color:var(--green)}
.hero__line--1{font-size:72px;transition-delay:.25s}
.hero__line--2{font-size:72px;margin:12px 0 0 120px;transition-delay:.5s}
.hero__line .ch.pu{margin-right:-.42em}
.hero__line .ch.pu:last-child{margin-right:-.5em}
.is-ready .hero__line{clip-path:inset(0 0 0 0)}
.hero__sub{font-family:var(--en);font-size:15px;font-weight:600;letter-spacing:.32em;margin-top:34px;opacity:0;transform:translateY(12px);transition:opacity 1s .2s,transform 1s var(--ease) .2s}
.hero__sub::before,.hero__sub::after{content:"";display:inline-block;width:40px;height:1px;background:#fff;vertical-align:middle;margin:0 16px;transform:scaleX(0);transition:transform .8s var(--ease) 1.8s}
.is-ready .hero__sub{opacity:.95;transform:none;transition-delay:2s}
.is-ready .hero__sub::before,.is-ready .hero__sub::after{transform:scaleX(1)}
.hero__copy .ch{display:inline-block;opacity:0;transform:translateY(.6em) scale(.5) rotate(-10deg);filter:blur(6px);transition:opacity .4s,transform .8s var(--pop),filter .5s}
.is-ready .hero__copy .ch{opacity:1;transform:none;filter:blur(0)}
.hero__line--1 .ch{animation:heroFloat 4s ease-in-out infinite alternate}
@keyframes heroFloat{to{translate:0 -4px}}
/* ヘッダーロゴ：FVでも白ロゴで表示 */
.header.is-top .header__logo{opacity:1;transform:none;pointer-events:auto}
/* 右下：スクロールダウン（FVを過ぎたら消える） */
.scrolldown{position:fixed;right:44px;bottom:40px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;
  transition:opacity .5s,visibility .5s,transform .6s var(--pop)}
.scrolldown.is-hide{opacity:0;visibility:hidden;transform:translateY(20px)}
.scrolldown__circle{width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);display:grid;place-items:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow:visible;transition:background .4s}
.scrolldown__circle svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:arrowDown 2s cubic-bezier(.4,0,.2,1) infinite;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.scrolldown:hover .scrolldown__circle{background:rgba(255,255,255,.18)}
.scrolldown__label{font-family:var(--en);font-size:10px;font-weight:700;letter-spacing:.3em}
@keyframes arrowDown{0%{transform:translateY(-60%);opacity:0}20%{transform:translateY(0);opacity:1}55%{transform:translateY(0);opacity:1}100%{transform:translateY(240%);opacity:0}}

.fv__logo{position:absolute;right:36px;bottom:36px;z-index:3;width:220px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.fv__credit{position:absolute;left:36px;bottom:150px;z-index:3;writing-mode:vertical-rl;font-family:var(--en);font-size:12px;letter-spacing:.12em;color:#fff;opacity:.9}
.fv__ctrl{position:absolute;left:32px;bottom:28px;z-index:3;display:flex;flex-direction:column;gap:10px;align-items:flex-start;color:#fff}
.fv__gauge{position:relative;width:52px;height:52px}
.fv__gauge svg{width:52px;height:52px;transform:rotate(-90deg)}
.fv__gauge circle{fill:none;stroke-width:2}
.fv__gauge-bg{stroke:rgba(255,255,255,.35)}
.fv__gauge-bar{stroke:#fff;stroke-dasharray:138.2;stroke-dashoffset:138.2;stroke-linecap:round}
.fv__num,.fv__den{position:absolute;left:0;width:100%;text-align:center;font-family:var(--en);font-size:11px;font-weight:600;line-height:1}
.fv__num{top:13px}
.fv__den{top:29px}
.fv__num::after{content:"";position:absolute;left:50%;top:15px;width:14px;height:1px;background:#fff;transform:translateX(-50%) rotate(-30deg)}
.fv__arrows{display:flex;gap:6px}
.fv__arrows button{width:22px;height:22px;display:grid;place-items:center;color:#fff;transition:transform .3s var(--pop)}
.fv__arrows button:hover{transform:scale(1.3)}
.fv__arrows svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.fv__scroll{position:absolute;right:40px;bottom:36px;z-index:3;width:1px;height:70px;overflow:hidden}
.fv__scroll span{position:absolute;left:0;top:0;width:1px;height:100%;background:#fff;animation:scrollLine 2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}50%{transform:translateY(0)}100%{transform:translateY(100%)}}

.marquee--hero{position:relative;margin:20px 0 0;line-height:1;pointer-events:none}
.marquee--hero .marquee__track span{color:var(--navy);opacity:.9}

/* ヘッダー：最上部（写真の上）は白文字 */
.header__logo-light{display:none}
.header.is-top .header__logo-dark{display:none}
.header.is-top .header__logo-light{display:block}
.header.is-top .nav__link{color:#fff}
.header.is-top .nav__link svg{color:rgba(255,255,255,.7)}
.header.is-top .burger span{background:#fff}

/* 横流れ帯 */
.marquee{overflow:hidden;white-space:nowrap;width:100%}
.marquee__track{display:inline-flex;animation:marquee 32s linear infinite}
.marquee__track span{
  font-family:var(--en);font-weight:700;font-size:210px;line-height:1;color:#585858;
  letter-spacing:.005em;padding-right:.15em;
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- ABOUT ---------- */
.about{padding-top:96px;padding-bottom:0;position:relative;z-index:2}
.about__grid{display:grid;grid-template-columns:720px minmax(0,1fr);column-gap:60px;align-items:start}
.about__lead{font-size:40px;font-weight:700;line-height:1.45;letter-spacing:.02em;margin-top:28px}
.about__body{padding-top:40px;font-size:16px;line-height:2.2;letter-spacing:.03em;max-width:640px;margin:0}
.about__body p+p{margin-top:1.2em}
.about__body p+p{margin-top:0}

.about__visual{position:relative;min-height:640px;margin-top:40px}
.about__v1{position:absolute;right:0;top:0;width:min(440px,90%);aspect-ratio:1;z-index:2}
.about__v2{position:absolute;left:0;bottom:0;width:min(320px,70%);aspect-ratio:1;z-index:3}
.deco--a1{width:220px;height:210px;left:6%;top:-20px;z-index:1}
.deco--a2{width:120px;height:110px;right:8%;bottom:40px;z-index:4}
.about__visual .deco{animation:none;transform:translate3d(0,var(--py,0px),0)}
/* ABOUT 画像ストリップ：4枚を段違いに置き、下のSERVICES帯に食い込ませる */
.about__strip{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:0 var(--gutter);max-width:1440px;margin:40px auto 0;z-index:2}
.about__img1{width:420px;aspect-ratio:1/1.15}
.about__img2{width:320px;aspect-ratio:11/10;margin-bottom:140px}
.about__img3{width:480px;aspect-ratio:1.3;margin-bottom:40px}
.deco--st{position:absolute;width:180px;height:170px;right:30%;top:-60px;z-index:0}
.about__strip .deco{animation:none;transform:translate3d(0,var(--py,0px),0)}

/* ---------- 薄グラデ帯（上下が楕円で膨らむ：幅を140%にして両端を画面外へ） ---------- */
.band-gray{
  position:relative;z-index:0;
  width:140%;margin:-140px 0 120px -20%;
  padding:380px 20% 180px;
  border-radius:50% / 160px;
  background:rgba(255,255,255,.72);
}
.band-gray__cap{display:none}
.band-gray{overflow:hidden}
.band-gray .deco{transform:translate3d(0,var(--py,0px),0);animation:none;z-index:0}
.deco--s1{width:360px;height:340px;left:8%;top:14%}
.deco--s2{width:180px;height:170px;right:10%;top:30%}
.deco--s3{width:260px;height:250px;left:40%;top:52%}
.deco--s4{width:420px;height:400px;right:4%;bottom:6%}
.deco--s5{width:120px;height:112px;left:22%;bottom:12%}
.wm{position:absolute;left:50%;top:9%;transform:translateX(-50%);font-family:var(--en);font-weight:700;font-size:min(22vw,320px);line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(0,88,123,.14);pointer-events:none;z-index:0;white-space:nowrap;user-select:none}
.wm--about{top:40px}
.wm--works{top:-20px;left:auto;right:-4%;transform:none}
.wm--company{top:40px;left:auto;right:-3%;transform:none}
.wm--contact{top:120px;-webkit-text-stroke:1px rgba(255,255,255,.22)}
.company{position:relative;overflow:hidden}
.company .deco,.band-dark .deco{transform:translate3d(0,var(--py,0px),0);animation:none;z-index:0}
.company .container,.band-dark .container{position:relative;z-index:1}
.deco--c1{width:300px;height:280px;left:4%;top:34%}
.deco--c2{width:160px;height:150px;right:6%;top:22%}
.deco--c3{width:240px;height:230px;right:14%;bottom:8%}
.deco--c4{width:110px;height:100px;left:28%;bottom:16%}
.deco--k1{width:320px;height:300px;left:2%;top:10%;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));box-shadow:none}
.deco--k2{width:200px;height:190px;right:6%;bottom:-40px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));box-shadow:none}
.band-gray .container{position:relative;z-index:1}

/* SERVICES */
.svc{margin-top:64px}
.svc__row{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  min-height:500px;padding:40px 0;overflow:hidden;
}
.svc__row:nth-child(even){flex-direction:row-reverse}
.svc__text{max-width:650px;padding:0 40px}
.svc__num{font-family:var(--en);font-size:18px;font-weight:600;letter-spacing:.08em;color:var(--green)}
.svc__ttl{font-size:40px;font-weight:700;line-height:1.3;color:var(--navy);margin-top:14px}
.svc__lead{font-size:22px;font-weight:700;line-height:1.6;letter-spacing:.03em;margin-top:18px;color:var(--text)}
.svc__body{font-size:15px;font-weight:400;line-height:2;letter-spacing:.03em;margin-top:22px}
.svc__img{width:600px;aspect-ratio:6/4.3;flex:none;transition:transform .8s var(--ease)}
.svc__row:hover .svc__img{transform:translate3d(0,var(--py,0px),0) scale(1.03)}

/* ---------- WORKS ---------- */
.works{padding-top:40px}
.works__head{width:80%;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.works__btn{flex:none;margin-bottom:8px}
.wmarquee{overflow:hidden;padding:56px 0 40px;position:relative}
.wmarquee{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wmarquee__track{display:flex;gap:48px;width:max-content;animation:wmarquee 60s linear infinite}
.wmarquee__track--rev{margin-top:40px;animation:wmarqueeRev 56s linear infinite}
@keyframes wmarqueeRev{from{transform:translateX(calc(-50% - 20px))}to{transform:translateX(0)}}
.wmarquee:hover .wmarquee__track{animation-play-state:paused}
@keyframes wmarquee{to{transform:translateX(calc(-50% - 24px))}}
.work{width:560px;flex:none}
.work__img{overflow:hidden;aspect-ratio:560/380;transform:translateZ(0);animation:none}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.work:hover .work__img img{transform:scale(1.08)}
.work__body{margin-top:22px}
.work__tags{display:flex;flex-wrap:wrap;gap:8px}
.work__tags span{display:inline-block;background:var(--green);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1;padding:8px 14px;border-radius:999px}
.work__cap{font-size:22px;font-weight:700;line-height:1.4;letter-spacing:.04em;color:var(--navy);margin-top:14px}
.work__txt{font-size:14px;font-weight:400;line-height:1.9;letter-spacing:.03em;color:var(--text);margin-top:10px}

/* ---------- パララックス帯 ---------- */
.plx{position:relative;height:900px;overflow:hidden;margin-top:60px;color:#fff}
.plx__bg{position:absolute;inset:0;z-index:0}
.plx__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,88,123,.75),rgba(28,166,57,.45))}
.plx__bg img{position:absolute;left:0;top:-160px;width:100%;height:1140px;object-fit:cover;will-change:transform}
.plx__inner{position:relative;z-index:1;max-width:1440px;height:100%;margin:0 auto;padding:0 var(--gutter)}
.plx__ph{position:absolute;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.plx__ph--1{width:420px;aspect-ratio:1;left:4%;top:140px}
.plx__ph--2{width:520px;aspect-ratio:1.2;right:5%;top:60px}
.plx__ph--3{width:340px;aspect-ratio:1;left:34%;bottom:60px}
.plx__ph--4{width:260px;aspect-ratio:1;right:30%;bottom:120px}
.plx__ph--5{width:220px;aspect-ratio:1;left:24%;top:40px}
.deco--p1{width:140px;height:130px;left:14%;bottom:140px}
.deco--p2{width:220px;height:200px;right:12%;bottom:-40px}
.deco--p3{width:90px;height:84px;left:60%;top:80px}
.plx .deco{transform:translate3d(0,var(--py,0px),0);animation:none;filter:blur(1px)}

/* ---------- COMPANY ---------- */
.company{padding:120px 0 200px}
.company__grid{display:grid;grid-template-columns:370px 1fr;align-items:start}
.company__table{border-top:1px solid var(--line)}
.company__row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.9;letter-spacing:.03em}
.company__row dt{width:140px;flex:none;font-weight:700}
.company__map{grid-column:2;margin-top:32px;border-radius:24px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,88,123,.4)}
.company__map iframe{display:block;width:100%;height:360px}
.company__row dd{font-weight:400;flex:1}

.stats-sec{margin-top:100px}
.stats-wrap{margin-top:48px;padding:48px;border-radius:40px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--navy) 0%,#0a7a6a 50%,var(--green) 100%);background-size:200% 200%;animation:gradMove 12s ease-in-out infinite alternate}
.stats-wrap::before,.stats-wrap::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.stats-wrap::before{width:420px;height:420px;right:-120px;top:-180px;animation:decoFloat 10s ease-in-out infinite alternate}
.stats-wrap::after{width:260px;height:260px;left:-80px;bottom:-120px;animation:decoFloat 8s ease-in-out infinite alternate-reverse}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;z-index:1}
.stat{border:1px solid rgba(255,255,255,.6);border-radius:24px;padding:40px;min-height:239px;display:flex;flex-direction:column;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  transition:transform .6s var(--ease),box-shadow .6s;
}
.stat{position:relative}
.stat::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:2px;
  background:linear-gradient(120deg,var(--navy),var(--green));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s}
.stat:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(0,88,123,.35)}
.stat:hover::before{opacity:1}
.stat__ttl{font-size:30px;font-weight:700;line-height:1.3;color:var(--navy)}
.stat__sub{font-size:14px;color:var(--sub);line-height:1.4;margin-top:10px;font-weight:500}
.stat__num{margin-top:auto;text-align:right;display:flex;align-items:baseline;justify-content:flex-end;gap:8px;line-height:1}
.counter{font-family:var(--en);font-size:64px;font-weight:400;color:var(--green);font-variant-numeric:tabular-nums}
.stat__unit{font-family:var(--en);font-size:40px;font-weight:400;color:var(--text)}

/* ---------- グラデ帯（CONTACT：上が楕円で膨らむ） ---------- */
.tail{
  position:relative;z-index:0;width:140%;margin:-140px 0 0 -20%;padding:0 20%;
  border-radius:50% 50% 0 0 / 160px 160px 0 0;
  background:linear-gradient(115deg,var(--navy) 0%,#0a7a6a 45%,var(--green) 100%);
  background-size:200% 200%;animation:gradMove 16s ease-in-out infinite alternate;
}
.band-dark{position:relative;color:#fff;padding:200px 0 120px}
.band-dark__cap{display:none}
@keyframes gradMove{from{background-position:0% 0%}to{background-position:100% 100%}}
/* CONTACT：巨大CTAカード（廣野鐵工所 採用サイトのENTRY参考） */
.cta{position:relative;display:block;z-index:1;
  border-radius:20px;padding:56px 0;color:var(--navy);
  transition:transform .5s var(--pop);
}
.cta::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;z-index:1;transition:background .5s}
.cta:hover::before{background:#f4fbf6}
.cta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;z-index:2;
  background:radial-gradient(circle at 15% 20%,rgba(28,166,57,.18),transparent 45%),radial-gradient(circle at 85% 90%,rgba(0,88,123,.16),transparent 50%)}
.cta__shadow{position:absolute;inset:0;border-radius:inherit;background:#0b3d52;transform:translate(14px,14px);z-index:0;transition:transform .5s var(--pop)}
.cta:hover{transform:translate(-4px,-4px)}
.cta:hover .cta__shadow{transform:translate(22px,22px)}
.cta__inner{position:relative;z-index:3;width:calc(100% - 96px);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;column-gap:48px;align-items:center}
.cta__en{grid-area:1/1/2/2;font-family:var(--en);font-size:112px;font-weight:700;line-height:1;letter-spacing:-.01em}
.cta__box{grid-area:1/3/2/4;position:relative;width:96px;height:96px;border-radius:12px;background:var(--green);overflow:hidden;display:block}
.cta__box svg{position:absolute;left:50%;top:50%;width:38px;height:38px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:arrowRun 1.6s var(--ease) infinite}
.cta__box svg:last-child{animation-delay:.8s}
@keyframes arrowRun{0%{transform:translate(-250%,-50%)}40%{transform:translate(-50%,-50%)}60%{transform:translate(-50%,-50%)}100%{transform:translate(150%,-50%)}}
.cta:hover .cta__box svg{animation-duration:.9s}
.cta__copy{grid-area:1/2/2/3;font-size:18px;font-weight:700;line-height:1.8;letter-spacing:.03em;color:var(--text)}
.cta__en .ch{transform:translateY(1em) scale(.5) rotate(8deg)}


/* ---------- FOOTER（角丸ダークカード） ---------- */
.footer{padding:0 0 0 24px;position:relative}
.footer__card{position:relative;background:#262626;color:#fff;border-radius:40px 0 0 0;padding:120px 8% 40px;margin:0}
.footer__grid{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:start}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-top:12px}
.footer__wordmark{width:240px;height:auto}
.footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.footer__nav a{display:flex;flex-direction:column;gap:8px}
.footer__nav strong{font-family:var(--en);font-size:44px;font-weight:700;line-height:1;letter-spacing:-.01em;transition:transform .5s var(--pop),color .3s}
.footer__nav small{font-size:13px;font-weight:700;letter-spacing:.08em}
.footer__nav a:hover strong{transform:translateX(8px);color:#8ee6a3}
.footer__sub{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:40px}
.footer__sub a{font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.footer__sub a::before{content:"";width:7px;height:7px;border-right:2px solid var(--green);border-top:2px solid var(--green);transform:rotate(45deg);transition:transform .3s var(--pop)}
.footer__sub a:hover::before{transform:rotate(45deg) translate(3px,-3px)}
.footer__btns{display:flex;flex-wrap:wrap;gap:18px;margin-top:56px}
.obtn{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;height:80px;padding:0 20px 0 40px;border:1px solid rgba(255,255,255,.7);border-radius:999px;font-size:16px;font-weight:700;min-width:300px;transition:background .4s,transform .4s var(--pop)}
.obtn i{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.obtn svg{width:18px;height:18px;fill:none;stroke:var(--dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.obtn:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.obtn--icon{min-width:0;width:80px;padding:0;justify-content:center}
.obtn--icon svg{width:26px;height:26px;stroke:#fff}
.footer__btm{border-top:1px solid rgba(255,255,255,.2);margin-top:100px;padding-top:40px;text-align:center;color:#bbb;display:flex;flex-direction:column;gap:10px}
.footer__addr{font-size:13px}
.footer__btm small{font-family:var(--en);font-size:14px;font-weight:600;letter-spacing:.02em}

/* ---------- トップへ戻る（常時ふわふわ） ---------- */
.totop{
  position:fixed;right:24px;bottom:24px;z-index:200;width:110px;height:110px;border-radius:50%;
  display:grid;place-items:center;animation:floaty 3.2s ease-in-out infinite;
  opacity:0;visibility:hidden;transform:translateY(30px) scale(.8);transition:opacity .5s,visibility .5s,transform .6s var(--pop);
}
.totop.is-show{opacity:1;visibility:visible;transform:none}
.totop::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.totop__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.totop__ring text{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.1em;fill:var(--navy)}
.totop__core{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 12px 30px -10px rgba(0,88,123,.5);display:grid;place-items:center;transition:transform .5s var(--pop)}
.totop__core img{width:44px;height:44px}
.totop:hover .totop__core{transform:scale(1.12) rotate(-12deg)}
.totop:hover .totop__ring{animation-duration:4s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(6deg)}}
@media (max-width:900px){.totop{right:12px;bottom:12px;width:84px;height:84px}.totop__core{width:50px;height:50px}.totop__core img{width:34px;height:34px}}

/* ---------- 浮遊するグラデの玉（デコ） ---------- */
.deco{position:absolute;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,rgba(0,88,123,.28) 0%,rgba(255,255,255,.45) 45%,rgba(28,166,57,.28) 100%);
  backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);
  box-shadow:inset 0 0 40px rgba(255,255,255,.35);
  animation:decoFloat 6s ease-in-out infinite alternate}
.deco::after{content:none}
.deco--1{width:200px;height:190px;right:8%;top:40px}
.deco--2{width:90px;height:84px;left:46%;top:640px;animation-duration:5s;animation-delay:-2s}
.deco--3{width:130px;height:120px;right:12%;top:0;animation-duration:7s;animation-delay:-3s}
@keyframes decoFloat{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(-24px,36px) rotate(10deg)}}
.about{position:relative}
.works{position:relative;overflow:hidden}

/* ---------- 画像の出現：中央の点からじわっと広がる ---------- */
[data-reveal] .blob__img,[data-reveal] .work__img img,[data-reveal].work__img img{
  clip-path:circle(0% at 50% 50%);filter:blur(12px);
  transition:clip-path 1.5s var(--ease),filter 1.4s var(--ease);
}
[data-reveal].is-in .blob__img,[data-reveal].is-in .work__img img{clip-path:circle(75% at 50% 50%);filter:blur(0)}

/* ---------- スクロール出現 ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
.blob[data-reveal]{transform:translate3d(0,calc(28px + var(--py,0px)),0) scale(.94)}
.blob[data-reveal].is-in{transform:translate3d(0,var(--py,0px),0)}
/* 見出しの文字分割 */
[data-split] .ch{display:inline-block;opacity:0;transform:translateY(1.1em) scale(.5) rotate(10deg);transition:opacity .35s,transform .85s var(--pop)}
[data-split].is-in .ch{opacity:1;transform:none}
[data-split].is-in{opacity:1;transform:none}
[data-split] .ch.sp{width:.3em}
/* 本文：文字が順にほどけて現れる */
[data-chars] .ch{opacity:0;filter:blur(6px);transition:opacity .5s,filter .6s}
[data-chars].is-in .ch{opacity:1;filter:blur(0)}
[data-chars].is-in{opacity:1;transform:none}
/* ヒーロータグ：1文字ずつポップ */
[data-split-tag] .ch{display:inline-block;opacity:0;transform:translateX(.6em) scale(.6);transition:opacity .3s,transform .7s var(--pop)}
.is-ready [data-split-tag] .ch{opacity:1;transform:none}
/* セクション英字はさらに弾む */
.sec-ttl .ch{transform:translateY(1.4em) scale(.3) rotate(-20deg)}
/* 数字のポップ */
.counter.is-done{animation:numPop .6s var(--pop)}
@keyframes numPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.counter{display:inline-block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  .about__grid{grid-template-columns:1fr 1fr;column-gap:80px}
  .about__body{padding-top:120px}
  .company__grid{grid-template-columns:260px 1fr}
  .contact{grid-template-columns:400px 1fr}
  .contact__left{margin-left:40px}
  .marquee__track span{font-size:100px}
}

@media (max-width:900px){
  :root{--gutter:24px}
  .header{height:88px}
  .header.is-top .header__inner{padding-top:20px}
  .header__logo img{width:120px}
  .nav{
    position:fixed;inset:0;background:#fff;flex-direction:column;justify-content:center;gap:40px;
    clip-path:circle(0 at calc(100% - 46px) 36px);transition:clip-path .8s var(--ease);
  }
  .nav.is-open{clip-path:circle(150% at calc(100% - 46px) 36px)}
  .nav__list{flex-direction:column;gap:24px}
  .nav__link{font-size:22px}
  .burger{display:block}

  .hero{padding:8px}
  .fv{height:calc(100svh - 16px);min-height:520px;border-radius:14px}
  .marquee--hero{margin-top:16px}
  .hero__line{padding:8px 22px 10px;letter-spacing:.02em}
  .hero__band{border-radius:8px}
  .hero__line--1,.hero__line--2{font-size:28px}
  .hero__line--2{margin-left:24px}
  .hero__sub{font-size:11px;margin-top:22px}
  .hero__sub::before,.hero__sub::after{width:20px;margin:0 8px}
  .scrolldown{right:16px;bottom:16px}
  .scrolldown__circle{width:52px;height:52px}
  .fv{border-radius:14px}
  .fv__credit{display:none}
  .fv__ctrl{left:16px;bottom:24px}
  .fv__scroll{right:20px;bottom:24px;height:50px}

  .marquee__track span{font-size:84px}
  .nav.is-open .nav__link{color:var(--text)}
  .header.is-top .nav.is-open .nav__link{color:var(--text)}

  .about{padding-top:72px}
  .about__grid{grid-template-columns:1fr;column-gap:0}
  .about__lead{font-size:28px}
  .sec-h{font-size:34px}
  .svc__ttl{font-size:28px}
  .about__body{padding-top:24px;font-size:15px;line-height:2.1;max-width:none}
  .about__visual{min-height:0;height:380px;margin-top:16px}
  .about__v1{width:62%}
  .about__v2{width:46%}
  .deco--a1{width:120px;height:110px}
  .deco--a2{width:70px;height:64px}
  .about__strip{gap:12px;margin-top:24px;flex-wrap:wrap}
  .about__img1{width:48%}
  .about__img2{width:40%;margin-bottom:40px}
  .about__img3{width:70%;margin:-20px 0 0 auto}
  .deco--st{display:none}

  .band-gray{margin:-60px 0 80px -20%;padding:180px 20% 90px;border-radius:50% / 80px}
  .deco--s1{width:160px;height:150px}
  .deco--s3,.deco--s5{display:none}
  .deco--s4{width:200px;height:190px}
  .wm{font-size:28vw}
  .deco--c1,.deco--c3,.deco--k1{width:140px;height:130px}
  .deco--c4{display:none}
  .svc{margin-top:40px}
  .svc__row,.svc__row:nth-child(even){flex-direction:column-reverse;align-items:stretch;min-height:0;padding:40px 0;gap:28px}
  .svc__text{padding:0;max-width:none}
  .svc__img{width:100%;aspect-ratio:16/11}
  .svc__lead{font-size:18px}
  .svc__body{font-size:14px;margin-top:16px}

  .works__head{width:auto;padding:0 var(--gutter);flex-direction:column;align-items:flex-start;gap:20px}
  .works__btn{margin:0}
  .sec-lead{font-size:14px;margin-top:14px}
  .wmarquee{padding:56px 0 24px}
  .wmarquee::before,.wmarquee::after{width:32px}
  .work{width:300px}
  .wmarquee__track{gap:24px}
  .work__cap{font-size:15px}
  @keyframes wmarquee{to{transform:translateX(calc(-50% - 12px))}}
  @keyframes wmarqueeRev{from{transform:translateX(calc(-50% - 12px))}to{transform:translateX(0)}}
  .wmarquee__track--rev{margin-top:24px}
  .deco--1{width:70px;height:70px}
  .deco--2{display:none}

  .plx{height:auto;min-height:0;margin-top:120px;padding:80px 0}
  .plx__bg img{top:-120px;height:calc(100% + 240px)}
  .plx__inner{display:flex;flex-direction:column;gap:20px}
  .plx__ph{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .plx__ph--1{width:60%}
  .plx__ph--2{width:45%;margin-left:auto;margin-top:-40px}
  .plx__ph--3{width:50%;margin-top:-30px}
  .plx__ph--4,.plx__ph--5{display:none}
  .plx .deco{display:none}
  .footer{padding:0 0 0 12px}
  .footer__card{border-radius:24px 0 0 0;padding:64px 24px 24px}
  .footer__grid{grid-template-columns:1fr;gap:40px}
  .footer__wordmark{width:150px}
  .footer__nav{gap:20px}
  .footer__nav strong{font-size:30px}
  .obtn{min-width:0;width:100%;height:64px}
  .obtn--icon{width:64px}
  .footer__btm{margin-top:60px}
}

/* 超縦長ビューポート（全ページキャプチャ等）ではFVを固定高さに */
@media (min-height:2000px){
  .fv{height:820px}
  .hero::before{height:844px}
}