/* ══ BENTO GRID ══
   Cols: A(1.08fr) | B(0.48fr) | D(1fr)
   Rows: top(1fr) | bottom(140px)
*/
.bento{
  width:100%;max-width:1240px;margin:0 auto;
  display:grid;
  grid-template-columns:1.08fr .48fr 1fr;
  grid-template-rows:1fr clamp(90px,16svh,120px);
  gap:var(--slit);
  height:min(680px,100svh);
  position:sticky;top:0;z-index:10;
}

/* ══════════════════════════════
   ZONE A — Giant Killing
   ══════════════════════════════ */
.z-h1{
  grid-column:1;grid-row:1;
  position:relative;overflow:hidden;
  background:#FFFFFF;
  padding:clamp(20px,2.5vw,32px);
  display:flex;flex-direction:column;
  clip-path:polygon(0 0,100% 0,100% calc(100% - clamp(32px,5vw,58px)),calc(100% - clamp(32px,5vw,58px)) 100%,0 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),var(--shadow-section);
  opacity:0;transform:translateY(20px);
  transition:opacity 1s var(--smooth),transform 1s var(--spring);
}
.z-h1.--in{opacity:1;transform:none}
/* テクスチャ①: CSSネイティブグレイン + 方向性グラデーション */
.z-h1::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    var(--grain-fine),
    linear-gradient(145deg, transparent 20%, rgba(212,220,233,.4) 70%, rgba(168,181,204,.25) 100%);
  background-size:200px 200px, 100% 100%;
  opacity:.5;mix-blend-mode:multiply;
}

.zl--m{
  position:absolute;z-index:0;pointer-events:none;
  height:55%;width:auto;right:-2%;bottom:0%;
  opacity:0;mix-blend-mode:multiply;
  transition:opacity 2.2s .6s var(--smooth);
}
.z-h1.--in .zl--m{opacity:.055}



.z-h1__top{
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:5;margin-bottom:auto;
}
.z-h1__ey{
  font-family:var(--fm);font-size:clamp(6px,.5vw,8px);font-weight:400;
  letter-spacing:.36em;text-transform:uppercase;color:var(--k6);
  opacity:0;transition:opacity .7s .15s var(--smooth);
}
.z-h1.--in .z-h1__ey{opacity:1}
.z-h1__tag{
  font-family:var(--fm);font-size:clamp(6px,.5vw,8px);letter-spacing:.28em;
  text-transform:uppercase;color:var(--bl);
  border:1px solid rgba(24,71,204,.18);padding:3px 8px;
  opacity:0;transition:opacity .7s .2s var(--smooth);
}
.z-h1.--in .z-h1__tag{opacity:.6}
.z-h1__headline{position:relative;z-index:5;margin-top:clamp(8px,1.2vh,16px)}
.z-h1__pre{
  display:block;font-family:var(--fd);font-size:clamp(10px,.75vw,13px);font-weight:300;
  letter-spacing:.06em;color:var(--k5);margin-bottom:clamp(6px,.8vh,10px);
  opacity:0;transform:translateX(-10px);
  transition:opacity .7s .22s var(--smooth),transform .7s .22s var(--smooth);
}
.z-h1.--in .z-h1__pre{opacity:1;transform:none}
.z-h1__giant{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(72px,10.5vw,168px);line-height:.82;letter-spacing:-.05em;color:var(--k);
  opacity:0;transform:translateY(28px);
  transition:opacity .9s .28s var(--smooth),transform .9s .28s var(--spring);
}
.z-h1.--in .z-h1__giant{opacity:1;transform:none}
.z-h1__kill{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(72px,10.5vw,168px);line-height:.82;letter-spacing:-.05em;color:var(--k);
  opacity:0;transform:translateY(32px);
  transition:opacity .9s .38s var(--smooth),transform .9s .38s var(--spring);
}
.z-h1.--in .z-h1__kill{opacity:1;transform:none}
.z-h1__kill .--period{
  color:var(--bl);
  text-shadow:0 0 18px rgba(24,71,204,.4),0 0 40px rgba(24,71,204,.15);
}

.z-h1__bottom{
  position:relative;z-index:5;margin-top:clamp(16px,2.2vh,26px);
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
}
.z-h1__rule{
  width:0;height:1px;flex-shrink:0;
  background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.08));
  transition:width .9s .62s var(--smooth);
}
.z-h1.--in .z-h1__rule{width:clamp(28px,3vw,44px)}
.z-h1__sub-ja{
  font-family:var(--fjs);font-size:clamp(12px,.95vw,15px);font-weight:400;
  letter-spacing:.16em;color:var(--k3);
  opacity:0;transform:translateY(6px);
  transition:opacity .85s .68s var(--smooth),transform .85s .68s var(--smooth);
}
.z-h1.--in .z-h1__sub-ja{opacity:1;transform:none}
.z-h1__sub-en{
  font-family:var(--fb);font-size:clamp(7px,.55vw,9px);color:var(--k6);
  opacity:0;transition:opacity .85s .82s var(--smooth);
}
.z-h1.--in .z-h1__sub-en{opacity:1}

/* ══════════════════════════════
   ZONE B — 営業は、芸術だ。(merged)
   ══════════════════════════════ */
.z-acc{
  grid-column:2;grid-row:1;
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#1A52D8 0%,#1238A8 60%,#0D2A7A 100%);
  padding:clamp(14px,1.8vw,24px);
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 1px 0 0 rgba(255,255,255,.06),
    0 0 20px 4px rgba(18,56,168,.25),
    0 0 40px 8px rgba(18,56,168,.1),
    var(--shadow-section);
  opacity:0;transform:translateY(20px);
  transition:opacity 1s .08s var(--smooth),transform 1s .08s var(--spring);
}
.z-acc.--in{opacity:1;transform:none}
.z-acc::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 110% 110%,rgba(255,255,255,.07),transparent);
}
.zl--u{
  position:absolute;z-index:0;pointer-events:none;
  height:60%;width:auto;right:-4%;bottom:-6%;
  filter:brightness(0) invert(1);
  opacity:0;transition:opacity 2s .7s var(--smooth);
}
.z-acc.--in .zl--u{opacity:.12}

.z-acc__ey{
  font-family:var(--fm);font-size:clamp(6px,.44vw,7px);letter-spacing:.34em;
  text-transform:uppercase;color:rgba(255,255,255,.2);
  position:relative;z-index:5;
  opacity:0;transition:opacity .7s .28s var(--smooth);
}
.z-acc.--in .z-acc__ey{opacity:1}

.z-acc__copy{
  position:relative;z-index:5;flex:1;
  display:flex;flex-direction:column;justify-content:center;
}
.z-acc__line1{
  display:block;font-family:var(--fjs);font-weight:500;
  font-size:clamp(28px,3.6vw,52px);line-height:1.3;letter-spacing:.04em;color:var(--w);
  opacity:0;transform:translateY(20px);
  transition:opacity .85s .35s var(--smooth),transform .85s .35s var(--spring);
}
.z-acc.--in .z-acc__line1{opacity:1;transform:none}
.z-acc__line2{
  display:block;font-family:var(--fjs);font-weight:500;
  font-size:clamp(28px,3.6vw,52px);line-height:1.3;letter-spacing:.04em;color:var(--w);
  opacity:0;transform:translateY(20px);
  transition:opacity .85s .48s var(--smooth),transform .85s .48s var(--spring);
}
.z-acc.--in .z-acc__line2{opacity:1;transform:none}
.z-acc__glow{
  text-shadow:0 0 10px rgba(255,255,255,.95),0 0 24px rgba(255,255,255,.5),0 0 48px rgba(255,255,255,.18);
}

.z-acc__lower{position:relative;z-index:5}
.z-acc__div{
  width:0;height:1px;background:rgba(255,255,255,.12);
  margin-bottom:clamp(10px,1.3vh,16px);
  transition:width .9s .65s var(--smooth);
}
.z-acc.--in .z-acc__div{width:100%}
.z-acc__sub{
  font-family:var(--fj);font-weight:300;
  font-size:clamp(8px,.65vw,11px);line-height:1.95;letter-spacing:.06em;color:rgba(255,255,255,.42);
  opacity:0;transform:translateY(8px);
  transition:opacity .85s .75s var(--smooth),transform .85s .75s var(--smooth);
}
.z-acc.--in .z-acc__sub{opacity:1;transform:none}
.z-acc__en{
  display:block;margin-top:clamp(6px,.8vh,10px);
  font-family:var(--fd);font-size:clamp(5px,.4vw,7px);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.16);
  opacity:0;transition:opacity .8s .9s var(--smooth);
}
.z-acc.--in .z-acc__en{opacity:1}

/* ══════════════════════════════
   ZONE D — Photo + copy overlay
   ══════════════════════════════ */
.z-photo{
  grid-column:3;grid-row:1;
  position:relative;overflow:hidden;
  background:var(--k);
  opacity:0;transform:translateY(20px);
  transition:opacity 1s .15s var(--smooth),transform 1s .15s var(--spring);
}
.z-photo.--in{opacity:1;transform:none}
.z-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.75) contrast(1.1) brightness(.88);
  transform:scale(1.03);
  transition:transform 8s ease-out;
}
.z-photo.--in img{transform:scale(1)}

/* Dark gradient overlay — bottom heavy for text legibility */
.z-photo__grad{
  position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(6,11,24,.82) 0%, rgba(6,11,24,.45) 40%, rgba(6,11,24,.1) 70%, transparent 100%),
    linear-gradient(to right, transparent 50%, rgba(238,242,250,.12) 100%);
  pointer-events:none;
}

/* Copy block — bottom of zone */
.z-photo__copy{
  position:absolute;bottom:0;left:0;right:0;
  padding:clamp(20px,2.8vw,38px);
  z-index:5;
}
.z-photo__q{
  font-family:var(--fjs);font-weight:400;
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.85;letter-spacing:.08em;
  color:rgba(255,255,255,.82);
  display:block;
  opacity:0;transform:translateY(14px);
  transition:opacity 1s .55s var(--smooth),transform 1s .55s var(--smooth);
}
.z-photo.--in .z-photo__q{opacity:1;transform:none}

.z-photo__rule{
  width:0;height:1px;
  background:rgba(255,255,255,.2);
  margin:clamp(10px,1.3vh,16px) 0;
  transition:width 1s .9s var(--smooth);
}
.z-photo.--in .z-photo__rule{width:clamp(32px,3.5vw,52px)}

.z-photo__a{
  font-family:var(--fjs);font-weight:500;
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.7;letter-spacing:.08em;
  color:rgba(255,255,255,.95);
  display:block;
  opacity:0;transform:translateY(12px);
  transition:opacity .9s 1.05s var(--smooth),transform .9s 1.05s var(--smooth);
}
.z-photo.--in .z-photo__a{opacity:1;transform:none}

/* ══════════════════════════════
   ZONE E — Business CTA + Stats
   ══════════════════════════════ */
.z-cta{
  grid-column:1;grid-row:2;
  position:relative;overflow:hidden;
  background:#FFFFFF;
  padding:0 clamp(22px,2.8vw,40px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,28px);
  cursor:pointer;text-decoration:none;color:inherit;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.8),var(--shadow-section);
  opacity:0;transform:translateY(14px);
  transition:opacity .9s .26s var(--smooth),transform .9s .26s var(--spring),background .3s;
}
.z-cta.--in{opacity:1;transform:none}
.z-cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    var(--grain-fine),
    linear-gradient(90deg, transparent 30%, rgba(212,220,233,.35) 100%);
  background-size:200px 200px, 100% 100%;
  opacity:.4;mix-blend-mode:multiply;
}
.z-cta:hover{background:#F4F7FF}
.z-cta::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--bl3),var(--bl));
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--smooth);
}
.z-cta:hover::after{transform:scaleY(1)}

.zl--s{
  position:absolute;z-index:0;pointer-events:none;
  height:110%;width:auto;
  right:-2%;top:50%;transform:translateY(-50%);
  opacity:0;mix-blend-mode:multiply;
  transition:opacity 1.8s .6s var(--smooth);
}
.z-cta.--in .zl--s{opacity:.12}

.z-cta__stats{
  display:flex;align-items:center;gap:clamp(24px,3.5vw,52px);
  position:relative;z-index:5;
}
.z-cta__stat{display:flex;flex-direction:column;gap:3px;position:relative}
.z-cta__stat+.z-cta__stat::before{
  content:'';position:absolute;
  left:calc(clamp(24px,3.5vw,52px) * -.5);
  top:15%;bottom:15%;width:1px;background:var(--k7);
}
.z-cta__num{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(38px,4.2vw,62px);
  line-height:1;letter-spacing:-.04em;color:var(--k);
  display:flex;align-items:baseline;gap:2px;
}
.z-cta__num .--val{
  opacity:0;transform:translateY(12px);
  transition:opacity .8s .32s var(--smooth),transform .8s .32s var(--spring);
}
.z-cta.--in .z-cta__num .--val{opacity:1;transform:none}
.z-cta__num .--suffix{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(18px,2vw,28px);letter-spacing:-.02em;color:var(--bl);
  opacity:0;transition:opacity .6s .55s var(--smooth);
}
.z-cta.--in .z-cta__num .--suffix{opacity:1}
.z-cta__lbl{
  font-family:var(--fm);font-size:clamp(7px,.52vw,9px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--k5);
  opacity:0;transition:opacity .7s .7s var(--smooth);
}
.z-cta.--in .z-cta__lbl{opacity:1}
.z-cta__sub{
  font-family:var(--fj);font-size:clamp(8px,.6vw,10px);font-weight:300;color:var(--k6);
  opacity:0;transition:opacity .7s .8s var(--smooth);
}
.z-cta.--in .z-cta__sub{opacity:1}

.z-cta__action{
  position:relative;z-index:5;flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:clamp(6px,.8vh,8px);
}
.z-cta__btn{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  padding:clamp(10px,1.2vh,14px) clamp(16px,2vw,26px);
  background:var(--k);position:relative;overflow:hidden;
  transition:background .35s var(--smooth);
}
.z-cta__btn::before{
  content:'';position:absolute;inset:0;background:var(--bl);
  transform:translateX(-101%);transition:transform .4s var(--smooth);
}
.z-cta:hover .z-cta__btn::before{transform:translateX(0)}
.z-cta__btn-texts{position:relative;z-index:1}
.z-cta__btn-label{
  font-family:var(--fd);font-size:clamp(9px,.7vw,11px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w);
  opacity:0;transition:opacity .7s .4s var(--smooth);
}
.z-cta.--in .z-cta__btn-label{opacity:1}
.z-cta__btn-jp{
  font-family:var(--fj);font-size:clamp(8px,.6vw,10px);font-weight:300;color:rgba(255,255,255,.5);
  position:relative;z-index:1;
  opacity:0;transition:opacity .7s .5s var(--smooth);
}
.z-cta.--in .z-cta__btn-jp{opacity:1}
.z-cta__btn-arr{
  position:relative;z-index:1;width:clamp(18px,1.6vw,24px);height:clamp(18px,1.6vw,24px);
  display:grid;place-items:center;transition:transform .35s var(--smooth);
}
.z-cta:hover .z-cta__btn-arr{transform:translateX(4px)}
.z-cta__btn-arr svg{width:100%;height:auto;fill:none;stroke:var(--w);stroke-width:1.8}
.z-cta__desc{
  font-family:var(--fj);font-size:clamp(7px,.55vw,9px);font-weight:300;
  color:var(--k6);text-align:right;
  opacity:0;transition:opacity .7s .9s var(--smooth);
}
.z-cta.--in .z-cta__desc{opacity:1}

/* ══════════════════════════════
   ZONE F — Join & Engage (black)
   ══════════════════════════════ */
.z-recruit{
  grid-column:2;grid-row:2;
  position:relative;overflow:hidden;
  background:var(--k);
  padding:0 clamp(18px,2.2vw,28px);
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;text-decoration:none;color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 1px 0 0 rgba(255,255,255,.04),var(--shadow-section);
  opacity:0;transform:translateY(14px);
  transition:opacity .9s .32s var(--smooth),transform .9s .32s var(--spring),background .35s;
}
.z-recruit.--in{opacity:1;transform:none}
.z-recruit:hover{background:#0F1623}
.z-recruit::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--w),rgba(255,255,255,.2));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--smooth);
}
.z-recruit:hover::before{transform:scaleX(1)}

.zl--e{
  position:absolute;z-index:0;pointer-events:none;
  height:110%;width:auto;right:-4%;top:50%;transform:translateY(-50%);
  filter:brightness(0) invert(1);
  opacity:0;transition:opacity 1.8s .5s var(--smooth);
}
.z-recruit.--in .zl--e{opacity:.07}

.z-recruit__left{
  position:relative;z-index:5;
  display:flex;flex-direction:column;gap:clamp(4px,.6vh,7px);
}
.z-recruit__badge{display:inline-flex;align-items:center;gap:6px;width:fit-content}
.z-recruit__badge-dot{
  width:5px;height:5px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 6px rgba(74,222,128,.7);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.3)}
}
.z-recruit__badge-label{
  font-family:var(--fm);font-size:clamp(6px,.45vw,7px);letter-spacing:.28em;
  text-transform:uppercase;color:#4ADE80;
  opacity:0;transition:opacity .7s .3s var(--smooth);
}
.z-recruit.--in .z-recruit__badge-label{opacity:1}
.z-recruit__catch{
  font-family:var(--fd);font-weight:800;font-size:clamp(15px,1.3vw,20px);
  letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.85);
  opacity:0;transform:translateY(6px);
  transition:opacity .7s .22s var(--smooth),transform .7s .22s var(--smooth);
}
.z-recruit.--in .z-recruit__catch{opacity:1;transform:none}
.z-recruit__title{
  font-family:var(--fd);font-weight:800;font-size:clamp(18px,1.7vw,26px);
  letter-spacing:-.01em;color:var(--w);
  opacity:0;transform:translateY(8px);
  transition:opacity .8s .32s var(--smooth),transform .8s .32s var(--spring);
}
.z-recruit.--in .z-recruit__title{opacity:1;transform:none}

.z-recruit__cta{
  position:relative;z-index:5;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;
}
.z-recruit__cta-ja{
  font-family:var(--fj);font-size:clamp(8px,.6vw,10px);font-weight:300;
  color:rgba(255,255,255,.3);
  opacity:0;transition:opacity .7s .55s var(--smooth);
}
.z-recruit.--in .z-recruit__cta-ja{opacity:1}
.z-recruit__arr{
  display:flex;align-items:center;gap:6px;
  font-family:var(--fd);font-size:clamp(7px,.52vw,9px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);
  opacity:0;transition:opacity .7s .6s var(--smooth),color .3s,gap .3s var(--smooth);
}
.z-recruit.--in .z-recruit__arr{opacity:1}
.z-recruit:hover .z-recruit__arr{color:rgba(255,255,255,.85);gap:10px}
.z-recruit__arr svg{width:14px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ══════════════════════════════
   ZONE G — 買取かざみどり
   ══════════════════════════════ */
.z-kaza{
  grid-column:3;grid-row:2;
  position:relative;overflow:hidden;
  background:var(--k);
  cursor:pointer;text-decoration:none;color:inherit;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s .38s var(--smooth),transform .9s .38s var(--spring);
}
.z-kaza.--in{opacity:1;transform:none}

/* Background image */
.z-kaza__bg{
  position:absolute;inset:0;
  background:url('https://muse-inc.net/wp-content/uploads/2026/03/ChatGPT-Image-2026年3月5日-03_57_55_Crop-Image.png') center/cover no-repeat;
  transform:scale(1.04);
  transition:transform 6s ease-out;
  filter:saturate(.85) brightness(.75);
}
.z-kaza.--in .z-kaza__bg{transform:scale(1)}

/* Gradient overlay — left dark only, right fully transparent */
.z-kaza__grad{
  position:absolute;inset:0;
  background:linear-gradient(to right, rgba(6,11,24,.80) 0%, rgba(6,11,24,.48) 32%, rgba(6,11,24,.08) 58%, transparent 78%);
  pointer-events:none;
}

/* Mark watermark — right side large */
.z-kaza__wm{
  position:absolute;z-index:1;pointer-events:none;
  height:160%;width:auto;
  right:-3%;top:50%;transform:translateY(-50%);
  filter:brightness(0) invert(1);
  opacity:0;transition:opacity 2s .5s var(--smooth);
}
.z-kaza.--in .z-kaza__wm{opacity:.1}

/* Inner layout */
.z-kaza__inner{
  position:relative;z-index:5;
  height:100%;
  padding:0 clamp(20px,2.4vw,36px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,24px);
}

/* Left: tag + text logo + tagline */
.z-kaza__left{
  display:flex;flex-direction:column;gap:5px;
}
.z-kaza__tag{
  font-family:var(--fm);font-size:clamp(6px,.45vw,7px);letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.35);
  opacity:0;transition:opacity .7s .4s var(--smooth);
}
.z-kaza.--in .z-kaza__tag{opacity:1}
.z-kaza__logo{
  height:clamp(24px,2.4vh,36px);width:auto;max-width:220px;
  object-fit:contain;object-position:left center;
  filter:brightness(0) invert(1);
  opacity:0;transform:translateY(6px);
  transition:opacity .85s .48s var(--smooth),transform .85s .48s var(--smooth);
}
.z-kaza.--in .z-kaza__logo{opacity:1;transform:none}
.z-kaza__tagline{
  font-family:var(--fj);font-size:clamp(7px,.55vw,9px);font-weight:300;
  letter-spacing:.08em;color:rgba(255,255,255,.42);
  opacity:0;transition:opacity .7s .62s var(--smooth);
}
.z-kaza.--in .z-kaza__tagline{opacity:1}

/* Right: copy + arrow */
.z-kaza__right{
  display:flex;flex-direction:column;align-items:flex-end;gap:clamp(4px,.6vh,6px);
  flex-shrink:0;
}
.z-kaza__copy{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(13px,1.1vw,17px);
  letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
  text-align:right;
  opacity:0;transform:translateX(8px);
  transition:opacity .8s .55s var(--smooth),transform .8s .55s var(--smooth);
}
.z-kaza.--in .z-kaza__copy{opacity:1;transform:none}
.z-kaza__arr{
  display:flex;align-items:center;gap:5px;
  font-family:var(--fd);font-size:clamp(7px,.52vw,9px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
  opacity:0;transition:opacity .7s .7s var(--smooth),color .3s,gap .3s var(--smooth);
}
.z-kaza.--in .z-kaza__arr{opacity:1}
.z-kaza:hover .z-kaza__arr{color:rgba(255,255,255,.85);gap:9px}
.z-kaza__arr svg{width:12px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Hover: image brightens slightly */
.z-kaza:hover .z-kaza__bg{filter:saturate(.95) brightness(.85)}




@media (max-width: 767px) {

  .bento{
    width:100%;
    max-width:100%;
    height:calc(100svh - 56px - 40px);
    top:56px;
    grid-template-columns:48fr 52fr;
    grid-template-rows:24fr 42fr 13fr 13fr;
    gap:2px;
  }

  .z-h1{
    grid-column:1 / 3;grid-row:1;
    clip-path:none;padding:clamp(20px,5vw,28px);
    justify-content:flex-end;
  }
  .z-h1__top,.z-h1__pre,.z-h1__sub-en,.zl--m{ display:none }
  .z-h1__giant,.z-h1__kill{ font-size:clamp(52px,14vw,78px) }
  .z-h1__headline{ margin-top:0 }
  .z-h1__bottom{ margin-top:8px }

  .z-acc{
    grid-column:1;grid-row:2;
    padding:0;align-items:center;justify-content:center;
  }
  .z-acc__ey,.z-acc__lower,.zl--u{ display:none }
  .z-acc__copy{
    flex:1;writing-mode:vertical-rl;text-orientation:mixed;
    display:flex;flex-direction:row;align-items:center;justify-content:center;
  }
  .z-acc__line1,.z-acc__line2{
    font-size:clamp(28px,7.5vw,38px);
    writing-mode:vertical-rl;transform:none;line-height:1.05;
  }

  .z-photo{ grid-column:2;grid-row:2 }
  .z-photo__q,.z-photo__rule{ display:none }
  .z-photo__a{ font-size:clamp(9px,2.4vw,12px);line-height:1.65 }
  .z-photo__copy{ padding:clamp(14px,3.5vw,18px) }

  .z-cta{
    grid-column:1 / 3;grid-row:3;
    padding:0 clamp(14px,3.5vw,20px);
  }
  .zl--s,.z-cta__sub,.z-cta__desc,.z-cta__btn-jp{ display:none }
  .z-cta__num{ font-size:clamp(24px,7vw,36px) }
  .z-cta__num .--suffix{ font-size:clamp(14px,3.5vw,20px) }
  .z-cta__lbl{ font-size:6px }
  .z-cta__btn{ padding:8px 12px;gap:8px }
  .z-cta__btn-label{ font-size:clamp(8px,2.2vw,10px) }
  .z-cta__stat+.z-cta__stat::before{ display:none }

  .z-recruit{ grid-column:1;grid-row:4;padding:0 clamp(14px,3.5vw,18px) }
  .zl--e,.z-recruit__cta-ja,.z-recruit__badge-label{ display:none }
  .z-recruit__catch{ font-size:clamp(9px,2.6vw,12px) }

  .z-kaza{ grid-column:2;grid-row:4 }
  .z-kaza__wm,.z-kaza__tag,.z-kaza__tagline{ display:none }
  .z-kaza__logo{ height:clamp(14px,2vh,20px) }
  .z-kaza__copy{ font-size:clamp(8px,2.2vw,11px) }
  .z-kaza__inner{ padding:0 clamp(14px,3.5vw,18px) }

}


/* VISION v5 */
/* ══════════════════════════════
   VISION — 500vh sticky
   ══════════════════════════════ */
.vision{
  position:relative;
  height:700vh;
}
.vision__stage{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--bg);
  z-index:10;
}

/* (Geometric 3D shapes → tokens.css) */

/* ══════════════════════════════
   A: Caustics 背景 — 水面コースティクス
   ══════════════════════════════ */
.v-caustics{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;
  transition:opacity 2s var(--smooth);
}

/* B: 光の拡散 — 縦線から放射状に広がるグロウ */
.v-glow{
  position:absolute;
  left:50%;top:50%;
  width:0;height:0;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(37,88,232,.12) 0%,
    rgba(37,88,232,.04) 35%,
    transparent 70%
  );
  z-index:2;pointer-events:none;
  opacity:0;
  will-change:width,height,opacity;
}

/* ══════════════════════════════
   P1 — 縦線の呼吸（強化版）
   ══════════════════════════════ */
.v-line{
  position:absolute;
  left:50%;top:0;bottom:0;
  transform:translateX(-50%);
  z-index:20;
  pointer-events:none;
}

/* 縦線本体 — ★ グロウ追加 */
.v-line__track{
  position:absolute;
  left:50%;top:10%;bottom:10%;
  transform:translateX(-50%);
  width:1px;
  background:linear-gradient(
    180deg,
    transparent 0%,
    var(--k7) 15%,
    var(--k7) 85%,
    transparent 100%
  );
  transform-origin:center;
  will-change:width,opacity;
  box-shadow:0 0 0 rgba(37,88,232,0);
  transition:box-shadow .6s var(--smooth);
}
.v-line__track.--glow{
  box-shadow:
    0 0 8px 2px rgba(37,88,232,.3),
    0 0 24px 4px rgba(37,88,232,.12),
    0 0 48px 8px rgba(37,88,232,.05);
}

/* 光の粒子が縦線を走る */
.v-line__runner{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:80px;
  background:linear-gradient(
    180deg,
    transparent,
    var(--bl3),
    rgba(255,255,255,.9),
    var(--bl3),
    transparent
  );
  border-radius:50%;
  top:-80px;
  will-change:top,opacity;
  opacity:0;
}

/* ══════════════════════════════
   P2 — フレーズ（霧が晴れる）
   ══════════════════════════════ */
.v-phrase{
  position:absolute;inset:0;z-index:15;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.v-phrase__inner{
  text-align:center;
  position:relative;
}

.v-phrase__line{
  display:block;
  font-family:var(--fjs);font-weight:600;
  font-size:clamp(38px,5.5vw,80px);
  line-height:1.4;letter-spacing:.04em;
  color:var(--k);
  will-change:opacity;
  /* 初期状態: 透明 */
  opacity:0;
}
.v-phrase__line.--accent{
  color:var(--bl);
  font-size:clamp(44px,6.5vw,94px);
  letter-spacing:.02em;
}

/* ══════════════════════════════
   P3 — Bento Grid（Vision着地）
   heroの設計言語を継承
   Cols: A(1.1fr) | B(0.44fr) | C(1fr)
   Rows: top(1fr) | bottom(120px)
   ══════════════════════════════ */
.v-grid{
  position:absolute;inset:0;z-index:10;
  display:grid;
  max-width:1240px;
  margin:0 auto;
  left:0;right:0;
  top:50%;transform:translateY(-50%);
  height:min(720px,98vh);
  grid-template-columns:1.1fr .44fr 1fr;
  grid-template-rows:1fr clamp(90px,16vh,120px);
  gap:var(--slit);
  padding:0 var(--sp-wrap);
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}

/* ── Tile A: Vision テキスト（左上、大タイル） ── */
.vb-a{
  grid-column:1;grid-row:1;
  background:var(--w);
  position:relative;overflow:hidden;
  padding:var(--sp-inner);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),var(--shadow-section);
  opacity:0;transform:translateY(14px);
  transition:opacity .85s var(--smooth),transform .85s var(--spring);
}
.vb-a.--in{opacity:1;transform:none}
.vb-a::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    var(--grain-fine),
    linear-gradient(160deg, transparent 15%, rgba(212,220,233,.35) 60%, rgba(168,181,204,.22) 100%);
  background-size:200px 200px, 100% 100%;
  opacity:.45;mix-blend-mode:multiply;
}
.vb-a__ey{
  font-family:var(--fm);font-size:clamp(6px,.5vw,8px);
  letter-spacing:.36em;text-transform:uppercase;color:var(--k6);
  margin-bottom:clamp(12px,1.5vh,22px);
  display:flex;align-items:center;gap:12px;
  position:relative;z-index:2;
}
.vb-a__ey::before{content:'';width:22px;height:1px;background:var(--k7);flex-shrink:0}
.vb-a__title{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(36px,4.5vw,64px);
  letter-spacing:-.03em;line-height:.9;color:var(--k);
  margin-bottom:clamp(10px,1.2vh,16px);
  position:relative;z-index:2;
}
.vb-a__title .--dot{color:var(--bl)}
.vb-a__copy{
  font-family:var(--fjs);font-weight:400;
  font-size:clamp(12px,.92vw,14px);
  line-height:2;letter-spacing:.07em;color:var(--k4);
  position:relative;z-index:2;
}
.vb-a__copy strong{color:var(--k);font-weight:600}
.vb-a__rule{
  width:clamp(24px,2.5vw,40px);height:1px;
  background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.06));
  margin:clamp(12px,1.5vh,18px) 0 clamp(6px,.8vh,10px);
  position:relative;z-index:2;
}
.vb-a__tagline{
  font-family:var(--fjs);font-weight:500;
  font-size:clamp(12px,.92vw,14px);
  letter-spacing:.1em;color:var(--k);
  position:relative;z-index:2;
}

/* ── Tile B: 設立 + Geometric（中央、縦長） ── */
.vb-b{
  grid-column:2;grid-row:1/3;
  background:linear-gradient(160deg,#1A52D8 0%,#1238A8 60%,#0D2A7A 100%);
  position:relative;overflow:hidden;
  padding:clamp(18px,2vw,28px);
  display:flex;flex-direction:column;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 20px 4px rgba(18,56,168,.2),
    var(--shadow-section);
  opacity:0;transform:translateY(14px);
  transition:opacity .85s .1s var(--smooth),transform .85s .1s var(--spring);
}
.vb-b.--in{opacity:1;transform:none}
.vb-b::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 110% 110%,rgba(255,255,255,.07),transparent);
}
.vb-b__ey{
  font-family:var(--fm);font-size:clamp(6px,.44vw,7px);
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.2);position:relative;z-index:2;
  flex-shrink:0;
}
.vb-b__date{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  margin:auto 0;
}
.vb-b__founded{
  font-family:var(--fj);font-size:clamp(8px,.6vw,10px);
  font-weight:300;letter-spacing:.16em;
  color:rgba(255,255,255,.35);
  margin-bottom:clamp(6px,.8vh,10px);
}
.vb-b__year{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(48px,5.5vw,72px);
  line-height:.85;letter-spacing:-.04em;color:var(--w);
}
.vb-b__md{
  font-family:var(--fm);font-size:clamp(10px,.8vw,13px);
  letter-spacing:.2em;color:rgba(255,255,255,.4);
  margin-top:clamp(6px,.8vh,10px);
}

/* ── Tile C1: 事業内容（右上） ── */
.vb-c1{
  grid-column:3;grid-row:1;
  background:var(--w);
  position:relative;overflow:hidden;
  padding:var(--sp-inner);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),var(--shadow-section);
  opacity:0;transform:translateY(14px);
  transition:opacity .85s .15s var(--smooth),transform .85s .15s var(--spring);
}
.vb-c1.--in{opacity:1;transform:none}
.vb-c1::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    var(--grain-fine),
    linear-gradient(170deg, transparent 25%, rgba(212,220,233,.3) 65%, rgba(168,181,204,.2) 100%);
  background-size:200px 200px, 100% 100%;
  opacity:.42;mix-blend-mode:multiply;
}
.vb-c1__ey{
  font-family:var(--fm);font-size:clamp(6px,.5vw,8px);
  letter-spacing:.36em;text-transform:uppercase;color:var(--k6);
  margin-bottom:clamp(10px,1.2vh,16px);
}
.vb-c1__title{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(14px,1.2vw,18px);
  letter-spacing:.02em;color:var(--k);
  margin-bottom:clamp(8px,1vh,14px);
}
.vb-c1__list{
  font-family:var(--fj);font-weight:300;
  font-size:clamp(10px,.78vw,12px);
  line-height:2;letter-spacing:.04em;color:var(--k5);
}
.vb-c1__list strong{color:var(--k3);font-weight:500}
.vb-c1__rule{
  width:clamp(20px,2vw,32px);height:1px;
  background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.06));
  margin:clamp(10px,1.2vh,16px) 0 clamp(6px,.8vh,10px);
}
.vb-c1__note{
  font-family:var(--fjs);font-weight:400;
  font-size:clamp(10px,.78vw,12px);
  letter-spacing:.06em;color:var(--k4);
}

/* ── Tile D: CTA（左下） ── */
.vb-d{
  grid-column:1;grid-row:2;
  background:var(--w);
  position:relative;overflow:hidden;
  padding:0 var(--sp-inner);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,28px);
  cursor:pointer;text-decoration:none;color:inherit;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.8),var(--shadow-section);
  opacity:0;transform:translateY(14px);
  transition:opacity .85s .2s var(--smooth),transform .85s .2s var(--spring),background .3s;
}
.vb-d.--in{opacity:1;transform:none}
.vb-d::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    var(--grain-fine),
    linear-gradient(90deg, transparent 40%, rgba(212,220,233,.3) 100%);
  background-size:200px 200px, 100% 100%;
  opacity:.35;mix-blend-mode:multiply;
}
.vb-d:hover{background:#F4F7FF}
.vb-d::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--bl3),var(--bl));
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--smooth);
}
.vb-d:hover::after{transform:scaleY(1)}
.vb-d__left{display:flex;flex-direction:column;gap:2px}
.vb-d__label{
  font-family:var(--fd);font-size:clamp(9px,.7vw,11px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--k);
}
.vb-d__sub{
  font-family:var(--fj);font-size:clamp(8px,.6vw,10px);font-weight:300;color:var(--k6);
}
.vb-d__arr{
  display:flex;align-items:center;gap:8px;
  font-family:var(--fd);font-size:clamp(7px,.52vw,9px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bl);
  transition:gap .35s var(--smooth);
}
.vb-d:hover .vb-d__arr{gap:14px}
.vb-d__arr svg{width:14px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .35s var(--smooth)}
.vb-d:hover .vb-d__arr svg{transform:translateX(4px)}

/* ── Tile E: Business CTA（右下、ダーク） ── */
.vb-e{
  grid-column:3;grid-row:2;
  background:var(--k);
  position:relative;overflow:hidden;
  padding:0 var(--sp-inner);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2vw,28px);
  cursor:pointer;text-decoration:none;color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-section);
  opacity:0;transform:translateY(14px);
  transition:opacity .85s .25s var(--smooth),transform .85s .25s var(--spring),background .35s;
}
.vb-e.--in{opacity:1;transform:none}
.vb-e:hover{background:#0F1623}
.vb-e::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--bl3),rgba(255,255,255,.25));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--smooth);
}
.vb-e:hover::before{transform:scaleX(1)}
.vb-e__left{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);
}
.vb-e__count{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;letter-spacing:-.04em;color:var(--w);
}
.vb-e__count .--s{font-size:.42em;color:var(--bl3);font-weight:700}
.vb-e__texts{display:flex;flex-direction:column;gap:2px}
.vb-e__label{
  font-family:var(--fd);font-size:clamp(9px,.7vw,11px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w);
}
.vb-e__sub{
  font-family:var(--fj);font-size:clamp(8px,.6vw,10px);font-weight:300;
  color:rgba(255,255,255,.35);
}
.vb-e__arr{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;
  font-family:var(--fd);font-size:clamp(7px,.52vw,9px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  transition:gap .35s var(--smooth),color .3s;
}
.vb-e:hover .vb-e__arr{color:rgba(255,255,255,.85);gap:14px}
.vb-e__arr svg{width:14px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .35s var(--smooth)}
.vb-e:hover .vb-e__arr svg{transform:translateX(4px)}

/* ══ P3 モバイル ══ */
@media(max-width:767px){
  .v-grid{
    grid-template-columns:34fr 66fr;
    grid-template-rows:auto auto 12svh 12svh;
    height:auto;min-height:80vh;max-height:90vh;
    top:52%;
    padding:0 2px;
  }
  .vb-a{grid-column:1/3;grid-row:1;padding:clamp(20px,4vw,28px)}
  .vb-a__copy{font-size:clamp(10px,2.6vw,12px);line-height:1.85}
  .vb-a__title{font-size:clamp(28px,8vw,40px)}
  .vb-a__tagline{font-size:clamp(11px,3vw,13px)}
  .vb-b{grid-column:1;grid-row:2;padding:clamp(12px,3vw,18px)}
  .vb-b__year{font-size:clamp(32px,9vw,46px)}
  .vb-c1{grid-column:2;grid-row:2;padding:clamp(14px,3.5vw,20px)}
  .vb-d{grid-column:1/3;grid-row:3;padding:0 clamp(14px,3.5vw,20px)}
  .vb-e{grid-column:1/3;grid-row:4;padding:0 clamp(14px,3.5vw,20px)}
  .vb-e__count{font-size:clamp(22px,6vw,32px)}
}

/* ══════════════════════════════
   着地バー
   ══════════════════════════════ */
.v-bar{
  position:absolute;bottom:0;left:0;right:0;z-index:30;
  padding:clamp(18px,2.2vh,28px) clamp(32px,5vw,80px);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to top,rgba(230,236,247,.95) 0%,transparent 100%);
  opacity:0;pointer-events:none;
}
.v-bar__left{
  font-family:var(--fm);font-size:clamp(7px,.52vw,9px);
  letter-spacing:.28em;text-transform:uppercase;color:var(--k6);
  display:flex;align-items:center;gap:12px;
}
.v-bar__left::before{content:'';width:26px;height:1px;background:var(--k7)}
.v-bar__scroll{
  font-family:var(--fm);font-size:clamp(7px,.52vw,9px);
  letter-spacing:.28em;text-transform:uppercase;color:var(--k6);
  display:flex;align-items:center;gap:10px;
}
.v-bar__tick{width:1px;height:18px;background:var(--k7);position:relative;overflow:hidden}
.v-bar__tick::after{
  content:'';position:absolute;top:-100%;left:0;right:0;
  height:100%;background:var(--bl);
  animation:tickAnim 2s var(--smooth) infinite;
}
@keyframes tickAnim{0%{top:-100%}100%{top:100%}}

/* ══════════════════════════════
   P4 — 事業内容セクション
   カードが上から順に落下出現 → 横スクロールで閲覧
   ══════════════════════════════ */
.v-biz{
  position:absolute;z-index:8;
  left:0;right:0;
  top:50%;transform:translateY(-50%);
  max-width:1240px;
  margin:0 auto;
  height:min(660px,90vh);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(32px,4.5vh,52px) var(--sp-wrap) 0;
  opacity:0;pointer-events:none;
  will-change:opacity;
}
.v-biz__inner{
  width:100%;
  padding:clamp(24px,3.5vh,48px) 0;
  display:flex;flex-direction:column;
  justify-content:center;
  background:var(--w);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),var(--shadow-section);
  position:relative;overflow:hidden;
}
.v-biz__inner::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    var(--grain-coarse),
    linear-gradient(180deg, transparent 0%, rgba(212,220,233,.3) 50%, rgba(168,181,204,.2) 100%);
  background-size:250px 250px, 100% 100%;
  opacity:.5;mix-blend-mode:multiply;
}

.v-biz__header{
  width:100%;
  padding:0 var(--sp-wrap);
  margin-bottom:clamp(20px,3vh,36px);
  opacity:0;transform:translateY(16px);
  transition:opacity .85s var(--smooth),transform .85s var(--spring);
}
.v-biz__header.--in{opacity:1;transform:none}
.v-biz__header-ey{
  font-family:var(--fm);font-size:clamp(6px,.5vw,8px);
  letter-spacing:.36em;text-transform:uppercase;color:var(--k6);
  display:flex;align-items:center;gap:12px;
  margin-bottom:clamp(8px,1vh,14px);
}
.v-biz__header-ey::before{
  content:'';width:22px;height:1px;background:var(--k7);flex-shrink:0;
}
.v-biz__header-title{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(36px,4.5vw,64px);
  letter-spacing:-.03em;line-height:.9;color:var(--k);
}
.v-biz__header-title .--dot{color:var(--bl)}
.v-biz__header-sub{
  font-family:var(--fj);font-size:clamp(10px,.78vw,12px);
  font-weight:300;color:var(--k6);letter-spacing:.04em;
  margin-top:clamp(6px,.8vh,10px);
}

/* ── 横スクロールトラック ── */
.v-biz__track{
  display:flex;
  gap:clamp(10px,1.2vw,18px);
  padding:0 var(--sp-wrap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
  cursor:grab;
}
.v-biz__track::-webkit-scrollbar{display:none}
.v-biz__track:active{cursor:grabbing}

/* ── カード本体 — 写真背景 + ダークオーバーレイ ── */
.v-biz-card{
  flex:0 0 clamp(320px,28vw,420px);
  height:clamp(360px,52vh,480px);
  position:relative;overflow:hidden;
  scroll-snap-align:start;
  cursor:pointer;
  /* 出現アニメーション — 穏やかなフェードアップ */
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--smooth),transform .8s var(--smooth),box-shadow .4s;
  box-shadow:0 8px 32px -4px rgba(6,11,24,.18),0 2px 8px rgba(6,11,24,.08);
}
.v-biz-card.--in{opacity:1;transform:none}
.v-biz-card:hover{
  box-shadow:0 12px 40px -8px rgba(24,71,204,.18);
}

/* 写真背景 */
.v-biz-card__bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  filter:saturate(.8) contrast(1.05) brightness(.7);
  transition:transform 8s ease-out,filter .5s;
}
.v-biz-card:hover .v-biz-card__bg{
  transform:scale(1.06);
  filter:saturate(.9) contrast(1.05) brightness(.78);
}

/* ダークオーバーレイ — 全面を均一に暗く */
.v-biz-card__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(6,11,24,.45) 0%,
    rgba(6,11,24,.35) 30%,
    rgba(6,11,24,.55) 60%,
    rgba(6,11,24,.85) 100%
  );
  transition:background .5s;
}
.v-biz-card:hover .v-biz-card__overlay{
  background:linear-gradient(180deg,
    rgba(6,11,24,.35) 0%,
    rgba(6,11,24,.25) 30%,
    rgba(6,11,24,.45) 60%,
    rgba(6,11,24,.78) 100%
  );
}

/* 上部アクセントライン */
.v-biz-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent 10%,var(--bl3) 30%,rgba(255,255,255,.5) 50%,var(--bl3) 70%,transparent 90%);
  opacity:0;transition:opacity .4s;
}
.v-biz-card:hover::before{opacity:.6}

/* 下部ブルーグロウ */
.v-biz-card::after{
  content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--bl3),transparent);
  opacity:.15;transition:opacity .4s;
}
.v-biz-card:hover::after{opacity:.45}

/* カード内部 — 白インナーフレーム + 半透明背景 */
.v-biz-card__inner{
  position:absolute;z-index:2;
  inset:clamp(14px,1.8vw,22px);
  padding:clamp(16px,2vw,26px);
  display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(6,11,24,.25);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:border-color .4s,background .4s;
}
.v-biz-card:hover .v-biz-card__inner{
  border-color:rgba(255,255,255,.25);
  background:rgba(6,11,24,.18);
}

.v-biz-card__num{
  font-family:var(--fd);font-weight:200;
  font-size:clamp(40px,4.5vw,64px);
  letter-spacing:-.02em;color:rgba(255,255,255,.12);
  line-height:1;margin-bottom:auto;
}

.v-biz-card__ey{
  font-family:var(--fm);font-size:clamp(6px,.48vw,8px);
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
  margin-bottom:clamp(8px,1vh,12px);
}

.v-biz-card__title{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(18px,1.6vw,26px);
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--w);
  margin-bottom:clamp(6px,.8vh,10px);
}

.v-biz-card__body{
  font-family:var(--fj);font-weight:300;
  font-size:clamp(10px,.78vw,12px);
  line-height:1.85;letter-spacing:.03em;
  color:rgba(255,255,255,.55);
  margin-bottom:clamp(12px,1.5vh,20px);
}
.v-biz-card__body strong{color:rgba(255,255,255,.85);font-weight:500}

.v-biz-card__cta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fd);font-size:clamp(8px,.6vw,10px);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bl3);text-decoration:none;
  transition:gap .35s var(--smooth),color .3s;
  margin-top:auto;
}
.v-biz-card:hover .v-biz-card__cta{color:var(--w);gap:12px}
.v-biz-card__cta svg{
  width:12px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;
  transition:transform .35s var(--smooth);
}
.v-biz-card:hover .v-biz-card__cta svg{transform:translateX(4px)}

/* ── スクロールインジケーター ── */
.v-biz__scroll-hint{
  margin:clamp(12px,1.5vh,20px) 0 0;width:100%;
  padding:0 var(--sp-wrap);
  display:flex;align-items:center;gap:8px;
  font-family:var(--fm);font-size:clamp(6px,.45vw,7px);
  letter-spacing:.28em;text-transform:uppercase;color:var(--k6);
  opacity:0;transition:opacity .6s .5s var(--smooth);
}
.v-biz__scroll-hint.--in{opacity:1}
.v-biz__scroll-hint::before{
  content:'';width:18px;height:1px;background:var(--k7);flex-shrink:0;
}
.v-biz__scroll-hint svg{
  width:14px;height:8px;fill:none;stroke:var(--k6);stroke-width:1.4;
  animation:hintSlide 2s var(--smooth) infinite;
}
@keyframes hintSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ── カードナビドット ── */
.v-biz__dots{
  margin:clamp(10px,1.2vh,16px) 0 0;width:100%;
  padding:0 var(--sp-wrap);
  display:flex;align-items:center;gap:6px;
  opacity:0;transition:opacity .6s .7s var(--smooth);
}
.v-biz__dots.--in{opacity:1}
.v-biz__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--k7);
  transition:width .4s var(--smooth),background .4s,border-radius .4s;
  flex-shrink:0;
}
.v-biz__dot.--active{
  width:24px;border-radius:3px;
  background:var(--bl);
}

/* ── ④ ホバー演出強化 ── */
.v-biz-card:hover::before{opacity:.85}
.v-biz-card:hover .v-biz-card__num{
  color:rgba(255,255,255,.2);
  text-shadow:0 0 24px rgba(37,88,232,.15);
}
.v-biz-card__num{transition:color .5s,text-shadow .5s}
.v-biz-card__title{transition:transform .5s var(--smooth),color .35s}
.v-biz-card:hover .v-biz-card__title{transform:translateY(-2px)}
.v-biz-card__body{transition:color .4s}
.v-biz-card:hover .v-biz-card__body{color:rgba(255,255,255,.7)}
.v-biz-card__cta::after{
  content:'';position:absolute;bottom:-1px;left:0;width:0;height:1px;
  background:currentColor;transition:width .4s var(--smooth);
}
.v-biz-card:hover .v-biz-card__cta::after{width:100%}
.v-biz-card__cta{position:relative}

/* ══ P4 モバイル ══ */
@media(max-width:767px){
  .v-biz__inner{padding:clamp(20px,3vh,32px) 0}
  .v-biz__header{padding:0 clamp(16px,4vw,24px)}
  .v-biz__track{
    gap:clamp(8px,2vw,12px);
    padding:0 clamp(16px,4vw,24px);
  }
  .v-biz-card{
    flex:0 0 calc(100vw - 56px);
    height:clamp(320px,48vh,420px);
  }
  .v-biz__scroll-hint{padding:0 clamp(16px,4vw,24px)}
}

/* ══════════════════════════════
   P5/P6 — RECRUIT & CONTACT
   初版vision P3の左右分割を継承
   互い違い（RECRUIT: 左ダーク/右白、CONTACT: 左白/右ダーク）
   ══════════════════════════════ */
.v-split{
  position:absolute;inset:0;z-index:8;
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1240px;
  margin:0 auto;left:0;right:0;
  top:50%;transform:translateY(-50%);
  height:min(660px,90vh);
  gap:0;
  padding:clamp(32px,4.5vh,52px) var(--sp-wrap) 0;
  opacity:0;pointer-events:none;
  will-change:opacity;
}

/* ── 白パネル（テキスト側） ── */
.v-split__text{
  background:var(--w);
  position:relative;overflow:hidden;
  padding:var(--sp-inner);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:none;
  opacity:0;
  transition:opacity .85s var(--smooth);
}
.v-split__text.--in{opacity:1}
.v-split__text::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    var(--grain-fine),
    linear-gradient(155deg, transparent 20%, rgba(212,220,233,.28) 65%, rgba(168,181,204,.15) 100%);
  background-size:200px 200px, 100% 100%;
  opacity:.35;mix-blend-mode:multiply;
}

.v-split__ey{
  font-family:var(--fm);font-size:clamp(6px,.5vw,8px);
  letter-spacing:.36em;text-transform:uppercase;color:var(--k6);
  display:flex;align-items:center;gap:12px;
  margin-bottom:clamp(20px,2.5vh,32px);
  position:relative;z-index:2;
}
.v-split__ey::before{content:'';width:22px;height:1px;background:var(--k7);flex-shrink:0}

.v-split__badge{
  display:none;
}
.v-split__badge-dot{
  width:5px;height:5px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 6px rgba(74,222,128,.7);
  animation:pulse-dot 2s ease-in-out infinite;
}
.v-split__badge-label{
  display:none;
}

.v-split__title{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(36px,4.5vw,64px);
  letter-spacing:-.03em;line-height:.9;
  color:var(--k);
  margin-bottom:clamp(12px,1.5vh,20px);
  position:relative;z-index:2;
}
.v-split__title .--dot{color:var(--bl)}
.v-split__sub{
  font-family:var(--fjs);font-weight:400;
  font-size:clamp(13px,1vw,15px);
  line-height:2.2;letter-spacing:.08em;
  color:var(--k4);
  position:relative;z-index:2;
}
.v-split__rule{
  width:clamp(28px,3vw,44px);height:1px;
  background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.06));
  margin:clamp(20px,2.5vh,32px) 0 clamp(16px,2vh,24px);
  position:relative;z-index:2;
}
.v-split__cta{
  display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  padding:clamp(12px,1.4vh,18px) clamp(24px,3vw,40px);
  background:var(--k);position:relative;overflow:hidden;z-index:2;
  text-decoration:none;transition:background .35s var(--smooth);
}
.v-split__cta:hover{background:var(--bl)}
.v-split__cta::before{
  content:'';position:absolute;inset:0;background:var(--bl);
  transform:translateX(-101%);transition:transform .45s var(--smooth);
}
.v-split__cta:hover::before{transform:translateX(0)}
.v-split__cta-label{
  position:relative;z-index:1;
  font-family:var(--fd);font-size:clamp(9px,.7vw,11px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w);
}
.v-split__cta-jp{
  position:relative;z-index:1;
  font-family:var(--fj);font-size:clamp(8px,.6vw,10px);font-weight:300;
  color:rgba(255,255,255,.5);
}
.v-split__cta-arr{
  position:relative;z-index:1;
  width:clamp(16px,1.4vw,22px);height:clamp(16px,1.4vw,22px);
  display:grid;place-items:center;transition:transform .35s var(--smooth);
}
.v-split__cta:hover .v-split__cta-arr{transform:translateX(4px)}
.v-split__cta-arr svg{width:100%;height:auto;fill:none;stroke:var(--w);stroke-width:1.8}

/* ── ダークパネル（写真側） ── */
.v-split__photo{
  background:var(--k2);
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-section);
  opacity:0;
  transition:opacity .85s .1s var(--smooth);
}
.v-split__photo.--in{opacity:1}

.v-split__photo-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.06);
  transition:transform 14s ease-out;
}
.v-split__photo.--in .v-split__photo-img{transform:scale(1)}
.v-split__photo-grad{
  position:absolute;inset:0;
  pointer-events:none;
  background:none;
}

/* 写真内テキスト */
.v-split__photo-stat{
  position:absolute;z-index:5;
  text-align:right;
}
.v-split--rec .v-split__photo-stat{bottom:clamp(28px,3.5vh,44px);left:clamp(24px,2.5vw,40px);text-align:left}
.v-split--con .v-split__photo-stat{bottom:clamp(28px,3.5vh,44px);right:clamp(24px,2.5vw,40px)}
.v-split__photo-num{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(36px,4.5vw,64px);
  line-height:1;letter-spacing:-.05em;color:var(--w);
}
.v-split__photo-num .--s{font-size:.44em;color:var(--bl3)}
.v-split__photo-lbl{
  font-family:var(--fm);font-size:clamp(6px,.5vw,8px);
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.28);margin-top:4px;
}

/* RECRUIT: ダーク左 / テキスト右 */
.v-split--rec .v-split__photo{grid-column:1;grid-row:1}
.v-split--rec .v-split__text{grid-column:2;grid-row:1}
/* CONTACT: テキスト左 / ダーク右 */
.v-split--con .v-split__text{grid-column:1;grid-row:1}
.v-split--con .v-split__photo{grid-column:2;grid-row:1}

/* ══ モバイル ══ */
@media(max-width:767px){
  .v-split{
    grid-template-columns:1fr;
    grid-template-rows:auto 180px;
    height:auto;min-height:auto;max-height:none;
    gap:0;
    padding:var(--sp-section) var(--sp-wrap);
  }
  .v-split--rec .v-split__text,
  .v-split--con .v-split__text{
    grid-column:1;grid-row:1;
    padding:clamp(24px,5vw,36px) clamp(20px,5vw,36px);
    justify-content:flex-start;
    overflow:visible;
    box-shadow:none;
  }
  .v-split__cta{
    align-self:flex-start;
    margin-top:auto;
    padding:clamp(14px,1.8vh,20px) clamp(28px,7vw,44px);
  }
  .v-split__sub{font-size:clamp(12px,3.2vw,15px);line-height:1.85}
  .v-split__ey{margin-bottom:clamp(10px,1.5vh,16px)}
  .v-split__rule{margin:clamp(12px,1.5vh,20px) 0 clamp(8px,1vh,14px)}
  .v-split--rec .v-split__photo,
  .v-split--con .v-split__photo{
    grid-column:1;grid-row:2;
  }
  .v-split__title{font-size:clamp(28px,8vw,42px)}
}

/* ══ モバイル vision ══ */
@media(max-width:767px){
  .vision{height:720vh}
  .v-phrase__line{font-size:clamp(30px,8.5vw,52px)}
  .v-phrase__line.--accent{font-size:clamp(36px,10vw,60px)}
}

/* DOOR TRANSITION */
/* ══ DOOR TRANSITION CSS ══ */

/* bentoのゾーンにwill-changeを追加してGPUアクセラレート */
.z-h1,.z-acc,.z-photo,.z-cta,.z-recruit,.z-kaza{
  will-change:transform,opacity;
  transition:none; /* JSで制御するのでCSSトランジションは切る */
}
@media(max-width:767px){
  /* ★ モバイル: GPU層の個別昇格を抑制 — コンポジター負荷を削減 */
  .z-h1,.z-acc,.z-photo,.z-cta,.z-recruit,.z-kaza{
    will-change:auto;
  }
  /* ★ bentoの描画を完全に隔離 */
  .bento{
    contain:layout style paint;
  }
}

/* スリット光ランナー */
.slit-runner{
  position:absolute;
  top:-120px;
  width:3px;
  height:120px;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(37,88,232,.4) 20%,
    #2558E8 45%,
    #FFFFFF 50%,
    #2558E8 55%,
    rgba(37,88,232,.4) 80%,
    transparent 100%
  );
  opacity:0;
  pointer-events:none;
  z-index:50;
  /* スリット位置 — JSでleftをセットするが念のためデフォルト */
  border-radius:50%;
}
#slitRunnerL{ left:calc(1.08 / 2.56 * 100%); }
#slitRunnerR{ left:calc((1.08 + 0.48) / 2.56 * 100% + 3px); }
@media(max-width:767px){
  #slitRunnerL{ left:calc(38 / 100 * 100%); }
  #slitRunnerR{ display:none; }
}

/* 扉エッジ残光 — bentoの左端・右端に青いグロウ */
.bento::before,.bento::after{
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:4px;
  z-index:20;
  pointer-events:none;
  transition:opacity .3s;
  opacity:var(--edge-glow, 0);
}
.bento::before{
  left:calc(1.08 / 2.56 * 100% - 2px);
  background:linear-gradient(180deg,transparent,rgba(37,88,232,.9) 30%,#fff 50%,rgba(37,88,232,.9) 70%,transparent);
  box-shadow:0 0 12px 3px rgba(37,88,232,.5);
}
.bento::after{
  left:calc((1.08 + 0.48) / 2.56 * 100% + 2px);
  background:linear-gradient(180deg,transparent,rgba(37,88,232,.9) 30%,#fff 50%,rgba(37,88,232,.9) 70%,transparent);
  box-shadow:0 0 12px 3px rgba(37,88,232,.5);
}

/* vision stage は bento の背後に待機 */
.vision{
  position:relative;
  z-index:5; /* bento(z-index:10)の背後 */
}
@media(max-width:767px){
  .vision__stage{ transform:translateZ(0); } /* ★ GPU層を事前確保 */
}

/* ══════════════════════════════
   NAV — 右サイド固定ナビゲーション
   ══════════════════════════════ */
.s-nav{
  position:fixed;
  right:clamp(16px,2vw,28px);
  top:50%;transform:translateY(-50%);
  z-index:100;
  display:flex;flex-direction:column;
  align-items:center;
  gap:clamp(14px,1.6vh,20px);
  opacity:0;
  transition:opacity .8s var(--smooth);
}
.s-nav.--visible{opacity:1}
.s-nav__item{
  position:relative;
  cursor:pointer;
  padding:4px;
}
.s-nav__dot{
  width:8px;height:8px;
  border-radius:50%;
  border:1.5px solid var(--k6);
  background:transparent;
  transition:all .4s var(--smooth);
}
.s-nav__item.--active .s-nav__dot{
  border-color:var(--bl);
  background:var(--bl);
  box-shadow:0 0 8px rgba(24,71,204,.4);
}
.s-nav__item:hover .s-nav__dot{
  border-color:var(--bl3);
  transform:scale(1.3);
}
.s-nav__label{
  position:absolute;
  right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(4px);
  font-family:var(--fm);font-size:7px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--k6);white-space:nowrap;
  opacity:0;
  transition:opacity .3s var(--smooth),transform .3s var(--smooth);
  pointer-events:none;
}
.s-nav__item:hover .s-nav__label,
.s-nav__item.--active .s-nav__label{
  opacity:1;transform:translateY(-50%) translateX(0);
}
@media(max-width:767px){
  .s-nav{right:8px;gap:10px}
  .s-nav__dot{width:6px;height:6px}
  .s-nav__label{display:none}
}


/* ══ HOME — ヘッダー上書き（透過→ガラス、差分のみ） ══ */
/* header.cssの白ガラスをリセットし、透過初期状態にする */
.hd{
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
  transition:background .6s var(--smooth),backdrop-filter .6s,box-shadow .6s;
}
.hd::after{opacity:0;transition:opacity .6s var(--smooth)}
.hd.--scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 1px 24px -6px rgba(6,11,24,.04);
}
.hd.--scrolled::after{opacity:1}

/* HOME初期サイズ（大きめ → --scrolledで通常サイズに縮小） */
.hd__inner{
  height:clamp(68px,9vh,88px);
  transition:height .5s var(--smooth);
}
.hd.--scrolled .hd__inner{height:clamp(52px,7vh,68px)}
.hd__logo{transition:transform .4s var(--smooth)}
.hd__logo:hover{transform:translateY(-1px)}
.hd__logo-img{
  height:clamp(32px,3.6vw,46px);
  transition:height .5s var(--smooth);
}
.hd.--scrolled .hd__logo-img{height:clamp(26px,2.8vw,36px)}



@media(max-width:767px){
  .hd__inner{height:56px}
  .hd.--scrolled .hd__inner{height:48px}
}

/* ══════════════════════════════
   SCROLL HINT — Hero下部 固定CTA
   ══════════════════════════════ */
.bento-hint{
  position:fixed;
  bottom:clamp(18px,3vh,28px);
  left:50%;transform:translateX(-50%);
  z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .8s var(--smooth);
}
.bento-hint.--visible{opacity:1;pointer-events:auto}
.bento-hint__tick{
  width:1px;height:clamp(24px,3vh,36px);
  background:var(--k7);
  position:relative;overflow:hidden;
}
.bento-hint__tick::after{
  content:'';position:absolute;top:-100%;left:0;right:0;
  height:100%;
  background:linear-gradient(180deg,transparent,var(--bl),transparent);
  animation:bHintTick 1.8s var(--smooth) infinite;
}
@keyframes bHintTick{0%{top:-100%}100%{top:100%}}
.bento-hint__text{
  font-family:var(--fm);
  font-size:clamp(7px,.52vw,9px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--k6);
}
@media(max-width:767px){
  .bento-hint{bottom:clamp(10px,2vh,18px)}
}

/* ══════════════════════════════
   FOOTER — ダーク、heroのzFスタイル
   ══════════════════════════════ */