/* =========================================================
   sppoX — Service LP  (Apple × Nike × Linear aesthetic)
   Navy #0F172A · Blue #2563EB · Success #22C55E
   ========================================================= */
:root{
  --navy:#0F172A; --navy-2:#1E293B; --navy-3:#334155;
  --blue:#2563EB; --blue-hi:#3B82F6; --blue-soft:#EFF4FF; --blue-deep:#1D4ED8;
  --green:#22C55E; --green-soft:#ECFDF3;
  --teal:#0AA6C2;
  --bg:#ffffff; --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E9EEF4;
  --line:#E2E8F0; --line-2:#EDF1F6;
  --ink:#0F172A; --ink-2:#475569; --ink-3:#8A98AB;
  --r:16px; --r-lg:24px; --r-sm:12px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 24px 60px rgba(15,23,42,.14);
  --shadow-blue:0 14px 34px rgba(37,99,235,.28);
  --maxw:1160px;
  --pad:24px;
  --font-jp:"Noto Sans JP", system-ui, sans-serif;
  --font-dp:"Plus Jakarta Sans","Noto Sans JP", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-jp); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; font-family:var(--font-dp); font-weight:800; letter-spacing:-.01em; line-height:1.18;}
p{margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
section{position:relative;}

/* link defaults */
a.tlink{color:var(--blue);} a.tlink:hover{color:var(--blue-deep);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font-dp); font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:14px 24px; border-radius:999px; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px;}
.btn-primary{background:var(--blue); color:#fff; box-shadow:var(--shadow-blue);}
.btn-primary:hover{background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 18px 40px rgba(37,99,235,.36);}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:#000; transform:translateY(-2px);}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.btn-white{background:#fff; color:var(--navy);}
.btn-white:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.22);}
.btn-lg{padding:17px 30px; font-size:16px;}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(1.2); border-color:var(--line); box-shadow:0 1px 0 rgba(15,23,42,.04);}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:16px var(--pad); display:flex; align-items:center; gap:24px;}
.nav-logo{height:26px; width:auto;}
.nav-links{display:flex; gap:28px; margin-left:16px;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--ink-2); transition:color .16s;}
.nav-links a:hover{color:var(--navy);}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center;}
.nav .btn{padding:11px 20px; font-size:14px;}
.nav-burger{display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; align-items:center; justify-content:center; cursor:pointer;}
.nav-burger svg{width:22px;height:22px;color:var(--navy);}

/* ---------- Section head ---------- */
.sec{padding:104px 0;}
.sec-tight{padding:80px 0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-dp); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); margin-bottom:16px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--blue); border-radius:2px;}
.eyebrow.c-center{justify-content:center;}
.h-sec{font-size:clamp(28px,4.6vw,44px); color:var(--navy); letter-spacing:-.02em;}
.sub-sec{margin-top:18px; font-size:clamp(16px,2vw,18px); color:var(--ink-2); line-height:1.85; max-width:640px;}
.head-center{text-align:center;}
.head-center .sub-sec{margin-left:auto; margin-right:auto;}

/* backgrounds */
.bg-gray{background:var(--gray-50);}
.bg-grad{background:linear-gradient(180deg,#fff, var(--gray-50));}

/* ============ HERO ============ */
.hero{position:relative; padding:150px 0 90px; overflow:hidden;}
.hero-bgfx{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.hero-bgfx .blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;}
.hero-bgfx .b1{width:520px;height:520px; background:radial-gradient(circle,#DCE8FF,transparent 70%); top:-160px; right:-120px;}
.hero-bgfx .b2{width:460px;height:460px; background:radial-gradient(circle,#D7F7E6,transparent 70%); bottom:-180px; left:-140px;}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:13px; font-weight:700; color:var(--navy); margin-bottom:24px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green); box-shadow:0 0 0 4px var(--green-soft);}
.hero h1{font-size:clamp(38px,6.4vw,68px); color:var(--navy); letter-spacing:-.035em; line-height:1.06;}
.hero h1 .g{background:linear-gradient(100deg,var(--blue),var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.hero-sub{margin-top:24px; font-size:clamp(16px,2.1vw,19px); color:var(--ink-2); line-height:1.85; max-width:520px;}
.hero-cta{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;}
.hero-trust{margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--ink-3); font-size:13.5px; font-weight:600;}
/* trust band under hero */
.trust-band{padding:44px 0 48px; background:#fff; border-bottom:1px solid var(--line);}
.trust-band-label{text-align:center; font-size:clamp(15px,2.2vw,20px); font-weight:800; letter-spacing:.02em; color:var(--ink); margin-bottom:26px;}
.trust-band-label .tb-strong{color:var(--blue); font-size:1.25em;}
.trust-band-logos{display:flex; align-items:center; justify-content:center; gap:clamp(28px,6vw,64px); flex-wrap:wrap;}
/* marquee */
.trust-marquee{overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.trust-track{display:flex; align-items:center; gap:clamp(48px,7vw,90px); width:max-content; padding:6px 0;
  animation:trust-scroll 26s linear infinite;}
.trust-track img{height:clamp(52px,7vw,72px); width:auto; flex:none;}
.trust-track img.on-dark{height:clamp(58px,7.5vw,80px); padding:14px 26px; border-radius:14px; background:#0F1424; box-shadow:0 4px 14px rgba(15,20,36,.18);}
@keyframes trust-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.trust-track{animation:none;}}
.trust-band-logos img{height:clamp(52px,7vw,72px); width:auto;}
.trust-band-logos img.on-dark{height:clamp(58px,7.5vw,80px); padding:14px 26px; border-radius:14px; background:#0F1424; box-shadow:0 4px 14px rgba(15,20,36,.18);}
.hero-trust .logos{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.hero-trust .logos img{height:40px; width:auto;}
.hero-trust .logos img.on-dark{height:44px; padding:10px 18px; border-radius:12px; background:#0F1424; box-shadow:0 4px 14px rgba(15,20,36,.18);}

/* hero visual */
/* hero visual — photo integrated with page bg */
.hero-visual{position:relative; aspect-ratio:4/4.4; border-radius:var(--r-lg); overflow:visible; background:none; box-shadow:none;}
.hero-visual::before{content:""; position:absolute; top:-30px; right:-34px; width:78%; height:60%;
  background:radial-gradient(circle at 70% 30%, rgba(37,99,235,.2), transparent 70%); filter:blur(8px); z-index:0;}
.hero-visual::after{content:""; position:absolute; right:-14px; bottom:-14px; width:64%; height:52%;
  border-radius:28px; background:linear-gradient(140deg, rgba(37,99,235,.16), rgba(16,185,129,.16)); z-index:0;}
.hv-photo{position:absolute; inset:0; z-index:1; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:30px;}
.hv-photo .ph-note{font-family:ui-monospace,monospace; font-size:12px; color:rgba(255,255,255,.5); letter-spacing:.04em;}
.hv-photo .hv-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%;}
.hv-card{position:absolute; z-index:2; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-radius:14px; padding:13px 15px; box-shadow:0 16px 34px rgba(15,23,42,.16); border:1px solid rgba(15,23,42,.06);}
.hv-card .ic{width:32px;height:32px;border-radius:9px; display:grid;place-items:center; color:#fff; margin-bottom:8px;}
.hv-card .k{font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.04em;}
.hv-card .v{font-family:var(--font-dp); font-weight:800; color:var(--navy); font-size:17px; line-height:1.15;}
.hv-1{top:34px; left:-26px; animation:floaty 5.5s ease-in-out infinite;}
.hv-1 .ic{background:var(--blue);}
.hv-2{bottom:110px; right:-22px; animation:floaty 6.5s ease-in-out infinite .4s;}
.hv-2 .ic{background:var(--green);}
.hv-3{bottom:26px; left:-18px; animation:floaty 5s ease-in-out infinite .8s;}
.hv-3 .ic{background:var(--navy);}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
@media (prefers-reduced-motion:reduce){.hv-card{animation:none !important;}}

/* ============ Partner logos + case studies ============ */
.pc-logos{display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,28px); flex-wrap:wrap;}
.pc-logo{display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 30px; min-height:92px; box-shadow:var(--shadow-sm);}
.pc-logo img{height:clamp(34px,4.5vw,46px); width:auto; object-fit:contain;}
.pc-logo.dark{background:#0F1424; border-color:#0F1424;}
.pc-stats{margin-top:34px; display:flex; justify-content:center; gap:clamp(20px,5vw,60px); flex-wrap:wrap;}
.pc-stat{text-align:center; min-width:150px;}
.pc-stat .k{font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.06em; margin-bottom:6px;}
.pc-stat .v{font-family:var(--font-dp); font-weight:800; font-size:clamp(26px,3.4vw,34px); color:var(--navy);}
.pc-stat .v small{font-size:.42em; font-weight:700; color:var(--ink-2); margin-left:4px;}
.case-head{position:relative; height:150px; display:flex; align-items:center; justify-content:flex-start; padding:0 26px; overflow:hidden;}
.case-head .case-logo{position:relative; z-index:2; height:44px; width:auto; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));}
.case-logo-chip{position:relative; z-index:2; display:inline-flex; align-items:center; background:#fff; border-radius:12px; padding:10px 16px; box-shadow:0 6px 18px rgba(0,0,0,.22);}
.case-logo-chip .case-logo{height:26px; filter:none;}
.case-head.club-hearts .case-logo{height:60px;}
.case-head::before{content:""; position:absolute; inset:0; background:inherit;}
.case-head .case-mark{position:absolute; z-index:1; right:-24px; bottom:-30px; height:150%; width:auto; opacity:.16; pointer-events:none;}
.case-head.club-thunders .case-mark{right:-10px; bottom:-18px; top:auto; transform:none; height:115%; opacity:.34;}
.case-head.club-jets .case-mark{right:-14px; bottom:-24px; top:auto; transform:none; height:140%; opacity:.34;}
.case-head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,0)); z-index:2;}
.club.case{border:none; box-shadow:var(--shadow);}
.club.case:hover{transform:translateY(-6px); box-shadow:0 24px 56px rgba(15,23,42,.16);}
.case-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.case-tags span{font-size:11.5px; font-weight:700; color:var(--blue); background:var(--blue-soft); border-radius:999px; padding:4px 11px;}
.case-title{font-size:19px; color:var(--navy); line-height:1.45; margin-bottom:10px;}
.club.case .club-link{font-size:13px;}
.loop-catch{margin-top:22px; font-family:var(--font-dp); font-weight:800; font-size:clamp(20px,3vw,28px); color:var(--navy); letter-spacing:-.01em; line-height:1.4;}
.sp-br{display:none;}
.gloop{position:relative;}
.gloop-steps{display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr; align-items:stretch; gap:0;}
.gstep{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 20px 22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;}
.gstep:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.gstep-no{font-family:var(--font-dp); font-weight:800; font-size:13px; color:var(--blue); letter-spacing:.08em; margin-bottom:12px;}
.gstep-ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; margin-bottom:16px;}
.gstep-ic svg{width:24px; height:24px;}
.gstep h3{font-size:16.5px; color:var(--navy); margin-bottom:8px;}
.gstep p{font-size:13.5px; color:var(--ink-2); line-height:1.75; flex:1;}
.gstep-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
.gstep-tags span{font-size:11px; font-weight:700; color:var(--blue); background:var(--blue-soft); border-radius:999px; padding:4px 10px;}
.gstep-arw{display:grid; place-items:center; color:var(--blue);}
.gstep-arw svg{width:20px; height:20px;}
.gloop-return{position:relative; margin-top:10px; padding-top:8px; width:100%; color:var(--blue);}
.glr-path{display:block; width:100%; height:52px; color:var(--blue); opacity:.55;}
.glr-label{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px;
  color:var(--navy); font-size:14.5px; font-weight:600;}
.glr-label b{color:var(--blue);}
.glr-badge{font-family:var(--font-dp); font-weight:800; font-size:11px; letter-spacing:.12em; color:#fff; background:var(--blue); border-radius:999px; padding:5px 12px;}
@media (max-width:960px){.glr-path{display:none;}.gloop-return{margin-top:18px;}}
.gloop-b2b{margin-top:44px; text-align:center;}
.gloop-b2b p{font-size:clamp(15px,2vw,17.5px); color:var(--ink-2); line-height:2;}
.gloop-b2b b{color:var(--navy);}
@media (max-width:960px){
  .gloop-steps{grid-template-columns:1fr; gap:0;}
  .gstep-arw{padding:8px 0;}
  .gstep-arw svg{transform:rotate(90deg);}
  .gstep p{flex:none;}
  .sp-br{display:block;}
}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:30px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:#D3DEEC;}
.card .ic-box{width:52px;height:52px;border-radius:14px; display:grid;place-items:center; color:#fff; margin-bottom:20px;}
.card .ic-box svg{width:26px;height:26px;}
.card h3{font-size:20px; color:var(--navy); margin-bottom:10px;}
.card p{color:var(--ink-2); font-size:15px; line-height:1.8;}
.ic-blue{background:linear-gradient(150deg,var(--blue-hi),var(--blue));}
.ic-green{background:linear-gradient(150deg,#34D399,var(--green));}
.ic-navy{background:linear-gradient(150deg,var(--navy-3),var(--navy));}
.ic-amber{background:linear-gradient(150deg,#FBBF24,#F59E0B);}

/* ============ S2 horizontal scroll ============ */
.hscroll{display:flex; gap:18px; overflow-x:auto; padding:6px 0 22px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.hscroll::-webkit-scrollbar{display:none;}
.hscroll .wrap-pad{flex:0 0 max(24px, calc((100vw - var(--maxw))/2));}
.feat{
  flex:0 0 262px; scroll-snap-align:start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:26px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s;
}
.feat:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.feat .ic-box{width:46px;height:46px;border-radius:12px; display:grid;place-items:center; margin-bottom:18px; background:var(--blue-soft); color:var(--blue);}
.feat .ic-box svg{width:24px;height:24px;}
.feat h4{font-size:17px; color:var(--navy); margin-bottom:7px;}
.feat p{font-size:14px; color:var(--ink-2); line-height:1.7;}
.hint-swipe{font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:2px;}

/* ============ S3 big reason cards ============ */
.reason{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s;
}
.reason:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.reason .num{font-family:var(--font-dp); font-weight:800; font-size:14px; color:var(--blue); letter-spacing:.05em;}
.reason .ic-box{width:56px;height:56px;border-radius:16px; display:grid;place-items:center; color:#fff; margin:16px 0 20px;}
.reason .ic-box svg{width:28px;height:28px;}
.reason h3{font-size:22px; color:var(--navy); margin-bottom:10px;}
.reason p{color:var(--ink-2); font-size:15.5px; line-height:1.8;}
.reason .glow{position:absolute; width:180px;height:180px; border-radius:50%; filter:blur(50px); opacity:.16; top:-40px; right:-40px;}

/* ============ S4 clubs ============ */
.club-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.club{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;
}
.club:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg);}
.club-banner{position:relative; aspect-ratio:16/10; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.club-banner .ph-note{position:absolute; bottom:12px; right:14px; font-family:ui-monospace,monospace; font-size:11px; color:rgba(255,255,255,.7);}
.club-banner .emblem{width:56%; height:56%; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(0,0,0,.3)); opacity:.96;}
.club-jets{background:radial-gradient(120% 100% at 50% 0%, #ff2236, #c1001a);}
.club-thunders{background:radial-gradient(120% 100% at 50% 0%, #9a123f, #4a0a20);}
.club-yessir{background:radial-gradient(120% 100% at 50% 0%, #2b2b31, #0b0b0e);}
.club-hearts{background:radial-gradient(120% 100% at 50% 0%, #2b6fd6, #143d86);}
.club-body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1;}
.club-logo{height:30px; width:auto; margin-bottom:14px; object-fit:contain; object-position:left;}
.club-logo.chip{align-self:flex-start; height:auto; padding:8px 12px; background:var(--navy); border-radius:10px;}
.club-logo.chip img{height:20px;}
.club-name{font-family:var(--font-dp); font-weight:800; font-size:18px; color:var(--navy); margin-bottom:8px;}
.club-desc{color:var(--ink-2); font-size:14.5px; line-height:1.8; flex:1;}
.club-link{margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  align-self:stretch; width:100%; padding:11px 16px 11px 18px; border-radius:999px;
  background:var(--blue-soft); border:1px solid transparent;
  font-family:var(--font-dp); font-weight:700; font-size:14px; color:var(--blue);
  transition:background .2s ease, color .2s ease;}
.club-link .arw{flex:none; width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff;
  display:grid; place-items:center; transition:transform .22s ease;}
.club-link .arw svg{width:15px; height:15px;}
.club:hover .club-link{background:var(--blue); color:#fff;}
.club:hover .club-link .arw{background:#fff; color:var(--blue); transform:translateX(3px);}
.club-soon{
  border-style:dashed; align-items:center; justify-content:center; text-align:center;
  background:var(--gray-50);
}
.club-soon .inner{padding:44px 24px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.club-soon .plus{width:56px;height:56px;border-radius:50%; border:2px dashed var(--ink-3); display:grid;place-items:center; color:var(--ink-3);}
.club-soon .plus svg{width:26px;height:26px;}
.club-soon h3{font-size:18px; color:var(--navy);}
.club-soon p{font-size:14px; color:var(--ink-3);}

/* ============ S5 timeline flow ============ */
.flow{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:20px;}
.flow::before{content:""; position:absolute; top:32px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,var(--blue),var(--teal)); opacity:.28; z-index:0;}
.flow-step{position:relative; z-index:1; text-align:center;}
.flow-step .node{width:64px;height:64px;border-radius:20px; margin:0 auto 16px; display:grid;place-items:center; color:#fff; background:#fff; box-shadow:var(--shadow); border:1px solid var(--line);}
.flow-step .node .ico{width:44px;height:44px;border-radius:13px; display:grid;place-items:center; color:#fff; background:linear-gradient(150deg,var(--blue-hi),var(--blue));}
.flow-step .node .ico svg{width:22px;height:22px;}
.flow-step:nth-child(6) .node .ico{background:linear-gradient(150deg,#34D399,var(--green));}
.flow-step .st{font-family:var(--font-dp); font-weight:800; font-size:12px; color:var(--blue); letter-spacing:.06em;}
.flow-step h4{font-size:15px; color:var(--navy); margin-top:4px;}
.flow-step p{font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.6;}

/* ============ S6 pro content ============ */
.pro-wrap{display:grid; grid-template-columns:.92fr 1.08fr; gap:40px; align-items:center;}
.pro-hero{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/4.6; background:linear-gradient(160deg,#7a0f33,#2a0512); box-shadow:var(--shadow-lg); display:flex; align-items:flex-end; justify-content:center;}
.pro-hero img{position:absolute; bottom:0; left:50%; transform:translateX(-50%); height:96%; width:auto; object-fit:contain;}
.pro-hero .tagchip{position:absolute; top:18px; left:18px; z-index:2; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); color:#fff; font-family:var(--font-dp); font-weight:700; font-size:12px; letter-spacing:.1em; padding:7px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.25);}
.pro-hero .namechip{position:absolute; bottom:18px; left:18px; z-index:2; color:#fff;}
.pro-hero .namechip .n{font-family:var(--font-dp); font-weight:800; font-size:22px;}
.pro-hero .namechip .p{font-size:12px; opacity:.8; letter-spacing:.08em;}
.pro-list{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.pro-item{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s;}
.pro-item:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.pro-item .k{font-family:var(--font-dp); font-weight:800; font-size:12px; color:var(--blue); letter-spacing:.05em;}
.pro-item h4{font-size:16px; color:var(--navy); margin:8px 0 6px;}
.pro-item p{font-size:13.5px; color:var(--ink-2); line-height:1.7;}
.pro-item.soon{background:var(--gray-50); border-style:dashed; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;}
.pro-item.soon h4{color:var(--ink-3);}

/* ============ S7 stats ============ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.stat{text-align:center; padding:20px 12px;}
.stat .num{font-family:var(--font-dp); font-weight:800; font-size:clamp(40px,6vw,60px); letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--blue),var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1;}
.stat .num .u{font-size:.42em; -webkit-text-fill-color:var(--ink-3); color:var(--ink-3); margin-left:4px;}
.stat .lbl{margin-top:12px; font-size:14px; color:var(--ink-2); font-weight:600;}

/* ============ S8 FAQ ============ */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.qa{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:box-shadow .2s, border-color .2s;}
.qa.open{box-shadow:var(--shadow); border-color:#D3DEEC;}
.qa-q{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 24px; display:flex; align-items:center; gap:16px; font-family:var(--font-jp); font-weight:700; font-size:16px; color:var(--navy);}
.qa-q .qi{flex:none; width:26px;height:26px;border-radius:8px; background:var(--blue-soft); color:var(--blue); display:grid;place-items:center; font-family:var(--font-dp); font-weight:800; font-size:14px;}
.qa-q .chev{margin-left:auto; flex:none; width:22px;height:22px; color:var(--ink-3); transition:transform .25s;}
.qa.open .qa-q .chev{transform:rotate(180deg); color:var(--blue);}
.qa-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.qa-a .inner{padding:0 24px 22px 66px; color:var(--ink-2); font-size:15px; line-height:1.85;}

/* ============ 導入相談 ============ */
.consult{background:var(--blue); color:#fff; padding:96px 0 104px;}
.consult-title{font-size:clamp(26px,4.4vw,40px); letter-spacing:-.02em; line-height:1.3; color:#fff;}
.consult-sub{margin:18px auto 0; max-width:600px; color:rgba(255,255,255,.88); font-size:clamp(15px,2vw,16.5px); line-height:1.9;}
.consult-card{margin:48px auto 0; max-width:720px; background:#fff; border-radius:var(--r-lg); padding:34px 38px; display:flex; align-items:center; gap:26px; box-shadow:0 20px 50px rgba(0,0,0,.18); transition:transform .2s ease, box-shadow .2s ease;}
.consult-card:hover{transform:translateY(-4px); box-shadow:0 28px 64px rgba(0,0,0,.24);}
.consult-card-tx{flex:1;}
.consult-card h3{display:flex; align-items:center; gap:12px; font-size:clamp(19px,2.6vw,23px); color:var(--navy); margin-bottom:10px;}
.consult-card h3 svg{width:26px; height:26px; color:var(--blue); flex:none;}
.consult-card p{color:var(--ink-2); font-size:14.5px; line-height:1.85;}
.consult-arw{flex:none; width:46px; height:46px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center;}
.consult-arw svg{width:22px; height:22px;}
.consult-card:hover .consult-arw{background:var(--blue-deep);}
@media (max-width:640px){.consult-card{flex-direction:column; align-items:flex-start;}.consult-arw{align-self:flex-end;}}

/* ============ Footer CTA ============ */
.foot-cta{position:relative; overflow:hidden; background:linear-gradient(160deg,#0F172A,#1E293B); color:#fff; text-align:center; padding:110px 0;}
.foot-cta .glow{position:absolute; border-radius:50%; filter:blur(80px);}
.foot-cta .g1{width:460px;height:460px; background:radial-gradient(circle,rgba(37,99,235,.6),transparent 70%); top:-160px; left:50%; transform:translateX(-60%);}
.foot-cta .g2{width:380px;height:380px; background:radial-gradient(circle,rgba(10,166,194,.4),transparent 70%); bottom:-180px; right:8%;}
.foot-cta .in{position:relative; z-index:1;}
.foot-cta h2{font-size:clamp(30px,5.2vw,52px); letter-spacing:-.025em; line-height:1.14;}
.foot-cta p{margin:20px auto 0; max-width:540px; color:rgba(255,255,255,.75); font-size:17px; line-height:1.8;}
.foot-cta .btns{margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.footer{background:#152B5E; color:rgba(255,255,255,.72); padding:44px 0 40px; border-top:1px solid rgba(255,255,255,.12);}
.footer-in{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.footer img{height:24px; width:auto;}
.footer .links{display:flex; gap:22px; flex-wrap:wrap;}
.footer .links a{font-size:13.5px; color:rgba(255,255,255,.6); transition:color .16s;}
.footer .links a:hover{color:#fff;}
.footer .cp{font-size:12.5px; color:rgba(255,255,255,.4); width:100%; text-align:center; margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);}

/* ============ scroll reveal ============ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important; transform:none !important;}}

/* ============ Responsive ============ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-visual{max-width:440px; margin:0 auto; width:100%;}
  .grid-3,.club-grid{grid-template-columns:1fr 1fr;}
  .flow{grid-template-columns:repeat(3,1fr); gap:28px 16px;}
  .flow::before{display:none;}
  .pro-wrap{grid-template-columns:1fr; gap:28px;}
  .pro-hero{max-width:380px; margin:0 auto; width:100%;}
  .nav-links{display:none;}
}
@media (max-width:680px){
  :root{--pad:18px;}
  .sec{padding:74px 0;}
  .hero{padding:120px 0 66px;}
  .grid-3,.grid-4,.grid-2,.club-grid,.stats{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .flow{grid-template-columns:1fr 1fr;}
  .pro-list{grid-template-columns:1fr;}
  .nav-cta .btn.only-lg{display:none;}
  .nav-burger{display:flex;}
  .hero-cta .btn, .foot-cta .btns .btn{width:100%; justify-content:center;}
}