/* =========================================================
   JB AI SPORTS VISION — Homepage variant B
   Orange monochrome × glassmorphism (fitness-platform style)
   ========================================================= */
:root{
  --o-bg1:#ff9b33;
  --o-bg2:#ec5f0b;
  --o-bg3:#cf5206;
  --ink:#2a1402;
  --white:#fff;
  --w-dim:rgba(255,255,255,.74);
  --w-dim2:rgba(255,255,255,.55);
  --glass:rgba(255,255,255,.12);
  --glass-2:rgba(255,255,255,.16);
  --glass-line:rgba(255,255,255,.26);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"DM Sans","Zen Kaku Gothic New",system-ui,sans-serif;
  color:var(--white);line-height:1.8;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:radial-gradient(130% 90% at 50% 22%,#ffa845 0%,#ef6710 52%,#cf5206 100%) fixed;
  background-color:#ec5f0b;
}
.jp{font-family:"Zen Kaku Gothic New",sans-serif}
.disp{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.98}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* glass primitives */
.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);border:1px solid var(--glass-line);border-radius:20px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;
  padding:9px 16px;border-radius:100px;border:1px solid var(--glass-line);background:rgba(255,255,255,.08);transition:.2s}
.chip:hover{background:rgba(255,255,255,.2)}
.chip.on{background:#fff;color:var(--ink)}
.arrow{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1px solid var(--glass-line);
  background:rgba(255,255,255,.1);color:#fff;font-size:18px;transition:.25s;flex-shrink:0}
.arrow:hover{background:#fff;color:var(--ink);transform:rotate(-12deg)}
.btn{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:15px;line-height:1;padding:15px 26px;
  border-radius:100px;cursor:pointer;transition:.25s;border:1px solid transparent;white-space:nowrap}
.btn-white{background:#fff;color:var(--ink)}
/* 白ボタンのホバー：トップへ戻るボタン（.totop）と同じ水色に */
.btn-white:hover{background:#00aae5;border-color:#00aae5;color:#fff;transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.12);border-color:var(--glass-line);color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.22)}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:80;background:rgba(236,95,11,.55);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.14)}
.head .row{display:flex;align-items:center;justify-content:space-between;height:80px;gap:16px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800}
.logo .lk{width:30px;height:30px;border-radius:50%;border:2px solid #fff;position:relative}
.logo .lk::before,.logo .lk::after{content:"";position:absolute;top:50%;width:11px;height:11px;border:2px solid #fff;border-radius:50%;transform:translateY(-50%)}
.logo .lk::before{left:2px}.logo .lk::after{right:2px}
.logo b{font-family:"Barlow Condensed";font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:8px}
.nav a{font-size:13.5px;font-weight:600;color:#fff;padding:9px 16px;border-radius:100px;border:1px solid var(--glass-line);
  background:rgba(255,255,255,.06);transition:.2s}
.nav a:hover{background:rgba(255,255,255,.2)}
.navtoggle{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}
@media(max-width:940px){
  .nav{position:fixed;inset:80px 0 auto 0;flex-direction:column;align-items:stretch;gap:8px;
    background:#e8590c;padding:16px 18px 22px;display:none;border-bottom:1px solid rgba(255,255,255,.18)}
  .nav.open{display:flex}.nav a{text-align:center}
  .navtoggle{display:block}
}

/* ---------- hero ---------- */
.hero{padding:72px 0 104px}
.hero .eyebrow-en{margin-bottom:22px}
.hero .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:30px;align-items:start}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}}
.stat-row{display:flex;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.statbox{padding:18px 20px;min-width:150px;flex:1}
.statbox .k{font-size:12px;color:var(--w-dim2);line-height:1.45}
.statbox .n{font-family:"Barlow Condensed";font-weight:800;font-size:34px;line-height:1.05;margin-top:6px}
.hero h1{font-family:"Barlow Condensed";font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(30px,4.6vw,58px)}
.hero h1 .thin{font-weight:600;color:var(--w-dim)}
.hero .jp-sub{font-family:"Zen Kaku Gothic New";font-weight:700;font-size:clamp(15px,1.7vw,19px);margin-top:16px;color:#fff}
/* feature media card */
.feature{position:relative;border-radius:24px;overflow:hidden;min-height:430px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(170deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid var(--glass-line)}
.feature .topbar{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.feature .mini{display:flex;gap:7px}
.feature .mini i{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);border:1px solid var(--glass-line);display:grid;place-items:center;font-size:13px;font-style:normal}
.player{position:absolute;inset:54px 16px 120px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(160deg,#243140,#16202e);background-color:#1b2636}
.player .court{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:74%;height:56%;
  border:2px solid rgba(255,255,255,.22);border-bottom:0;border-radius:50% 50% 0 0/72% 72% 0 0;opacity:.45}
.player .live{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,77,77,.95);
  color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:100px}
.player .live i{width:6px;height:6px;border-radius:50%;background:#fff;font-style:normal;animation:blink 1.3s infinite}
@keyframes blink{50%{opacity:.25}}
.player .ai{position:absolute;top:14px;right:14px;font-family:"Barlow Condensed";font-weight:800;font-size:10px;letter-spacing:.1em;
  color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.3);padding:4px 9px;border-radius:100px}
.player .play{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;
  background:#fff;display:grid;place-items:center;color:var(--ink);font-size:20px}
.feature .fbar{position:relative;z-index:2;margin:auto 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:14px;background:rgba(20,12,4,.42);backdrop-filter:blur(8px);border:1px solid var(--glass-line)}
.feature .fbar p{font-size:12.5px;color:var(--w-dim)}
.feature .fbar b{display:block;font-size:14px;color:#fff;font-weight:700}

/* ---------- section shells ---------- */
section.sec{padding:120px 0;position:relative}
section[id]{scroll-margin-top:92px}
@media(max-width:900px){section.sec{padding:84px 0}}
@media(max-width:600px){section.sec{padding:64px 0}}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:64px;flex-wrap:wrap}
@media(max-width:600px){.sec-top{margin-bottom:42px}}
.kic{font-size:13.5px;color:var(--w-dim);max-width:360px;line-height:1.7}
.sec-h{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.eyebrow-en{display:inline-flex;align-items:center;gap:10px;font-family:"Barlow Condensed";font-weight:700;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#fff;opacity:.72}
.eyebrow-en::before{content:"";width:24px;height:1px;background:rgba(255,255,255,.6)}
.bighead{font-family:"Barlow Condensed";font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  font-size:clamp(28px,4.6vw,58px)}
.bighead .thin{font-weight:600;color:var(--w-dim)}

/* radial process */
.radial{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}
.radial .core{width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.03));
  border:1px solid var(--glass-line);display:grid;place-items:center;text-align:center}
.radial .core .ic{font-size:74px}
.radial .ring{position:absolute;width:560px;height:560px;border:1px dashed rgba(255,255,255,.3);border-radius:50%;top:0;left:50%;transform:translateX(-50%)}
.node{position:absolute;width:178px;text-align:center}
.node .b{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);
  font-family:"Barlow Condensed";font-weight:800;font-size:14px;margin-bottom:8px}
.node h4{font-size:14px;font-weight:700}
.node p{font-size:12px;color:var(--w-dim2);line-height:1.5}
.node.n1{top:8px;left:50%;transform:translateX(-50%)}
.node.n2{top:150px;left:calc(50% - 330px)}
.node.n3{top:150px;left:calc(50% + 152px)}
.node.n4{bottom:60px;left:calc(50% - 300px)}
.node.n5{bottom:60px;left:calc(50% + 122px)}
@media(max-width:900px){
  .radial{min-height:0;flex-direction:column;gap:14px}
  .radial .ring{display:none}.radial .core{width:200px;height:200px;margin-bottom:10px}
  .node{position:static;transform:none;width:100%;max-width:420px;background:rgba(255,255,255,.1);
    border:1px solid var(--glass-line);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;text-align:left}
  .node .b{margin:0;flex-shrink:0}
}

/* testimonial cards */
.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:980px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tgrid{grid-template-columns:1fr}}
.tcard{padding:22px 20px;display:flex;flex-direction:column;gap:14px;min-height:230px}
.tcard .q{font-size:34px;font-family:"Barlow Condensed";font-weight:800;line-height:.6;color:rgba(255,255,255,.5)}
.tcard p{font-size:13px;color:var(--w-dim);flex:1}
.tcard .who{display:flex;align-items:center;gap:10px}
.tcard .av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:800;font-size:13px}
.tcard .who b{font-size:13px;display:block}
.tcard .who span{font-size:11px;color:var(--w-dim2)}

/* trainer/target cards */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
@media(max-width:980px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fcard{border-radius:18px;overflow:hidden;border:1px solid var(--glass-line);background:rgba(255,255,255,.08);display:flex;flex-direction:column}
.fcard .ph{position:relative;aspect-ratio:3/3.4;background:linear-gradient(160deg,#3a2a1a,#1c1206);display:flex;align-items:flex-end;padding:14px;overflow:hidden}
.fcard .ph .em{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;opacity:.9}
.fcard .ph .nm{position:relative;z-index:1;font-weight:800;font-size:14px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.fcard .ph .tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;background:rgba(20,12,4,.5);border:1px solid var(--glass-line)}
/* 写真入りの活用シーンカード（スポーツ施設） */
.fcard .ph-photo .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fcard .ph-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72))}
.fcard .ph-photo .tag,.fcard .ph-photo .nm{z-index:2}
.fcard .fb{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.fcard .fb li{list-style:none;font-size:12.5px;color:var(--w-dim);padding-left:18px;position:relative}
.fcard .fb li::before{content:"●";position:absolute;left:0;color:#fff;font-size:8px;top:5px}

/* filter chips row */
.filters{display:flex;flex-wrap:wrap;gap:10px;max-width:680px}

/* final cta */
.final{text-align:center;padding:130px 0 40px}
.final .eyebrow-en{justify-content:center;margin-bottom:22px}
.final .eyebrow-en::after{content:"";width:24px;height:1px;background:rgba(255,255,255,.6)}
.final .bighead{font-size:clamp(32px,6.4vw,82px)}
.final p{color:var(--w-dim);max-width:540px;margin:22px auto 34px;font-size:16px}
.final .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer */
.foot{border-top:0;margin-top:100px;height:80px;padding:0 30px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--w-dim2)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:.85s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}.d5{transition-delay:.3s}

/* ===== added: richer content blocks ===== */
.grid2,.grid3,.grid4{display:grid;gap:16px}
.grid2{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.gcard{padding:24px;display:flex;flex-direction:column;gap:9px}
.gcard .gi{font-size:30px}
.gcard h3{font-size:17px;font-weight:800}
.gcard p{font-size:13.5px;color:var(--w-dim)}

/* spec lists (機種 / 対応競技 / オプション) */
.spec{padding:24px}
.spec h4{font-size:13px;letter-spacing:.06em;color:#fff;font-weight:800;margin-bottom:14px;text-transform:uppercase;font-family:"Barlow Condensed"}
.spec .r{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.22);font-size:13.5px}
.spec .r:last-child{border-bottom:0}
.spec .r b{font-weight:700;white-space:nowrap}
.spec .r span{color:var(--w-dim2);text-align:right}

/* revenue 4 pillars */
.revcard{padding:26px 24px;display:flex;flex-direction:column;gap:8px;position:relative;min-height:190px}
.revcard .no{font-family:"Barlow Condensed";font-weight:800;font-size:13px;letter-spacing:.1em;color:#fff;opacity:.65}
.revcard h3{font-size:19px;font-weight:800;line-height:1.3}
.revcard p{font-size:13px;color:var(--w-dim)}
.revcard .amt{margin-top:auto;font-family:"Barlow Condensed";font-weight:800;font-size:15px;color:#fff}

/* pricing */
.ptwrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.ptwrap{grid-template-columns:1fr}}
.ptable{padding:26px}
.ptable .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.ptable .ph b{font-family:"Barlow Condensed";font-weight:800;font-size:18px;text-transform:uppercase}
.ptable .ph span{font-size:12px;color:var(--w-dim2)}
.ptable .pr{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.22);font-size:13.5px}
.ptable .pr:last-child{border-bottom:0}
.ptable .pr .v{font-family:"Barlow Condensed";font-weight:800;white-space:nowrap}
.pnote{font-size:12px;color:var(--w-dim2);margin-top:14px}

/* section "詳しく見る →" CTA links — text + arrow only, white */
.morewrap{display:flex;flex-wrap:wrap;gap:28px;margin-top:32px}
.more{display:inline-flex;align-items:center;gap:12px;font-size:14.5px;font-weight:700;color:#fff;
  padding:0;background:none;border:0;transition:opacity .25s}
.more:hover{opacity:.7}
.more::after{content:"→";font-family:"Barlow Condensed";font-weight:800;font-size:18px;line-height:1;transition:transform .25s}
.more:hover::after{transform:translateX(6px)}

/* sales record band (大会配信 販売実績) */
.recordwrap{padding:24px 26px 20px;margin-top:26px}
.recordhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.recordhead b{font-size:15px;font-weight:800}
.recordhead span{font-size:12px;color:var(--w-dim2)}
.recordtbl{width:100%;border-collapse:collapse;font-size:13px}
.recordtbl th,.recordtbl td{text-align:left;padding:11px 10px;border-bottom:1px dashed rgba(255,255,255,.2)}
.recordtbl thead th{font-family:"Barlow Condensed";font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12px;color:var(--w-dim)}
.recordtbl tbody td{color:#fff}
.recordtbl td.num,.recordtbl th.num{text-align:center;font-family:"Barlow Condensed";font-weight:800;white-space:nowrap}
.recordtbl tbody tr:last-child td{border-bottom:0}
@media(max-width:680px){
  .recordtbl,.recordtbl thead,.recordtbl tbody,.recordtbl tr,.recordtbl th,.recordtbl td{display:block}
  .recordtbl thead{display:none}
  .recordtbl tr{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.16)}
  .recordtbl td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px}
  .recordtbl td::before{content:attr(data-l);color:var(--w-dim2);font-size:12px}
  .recordtbl td.num{justify-content:space-between}
}

/* trust / company */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:760px){.trust-grid{grid-template-columns:1fr}}
.company{padding:26px}
.company .r{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.2);font-size:13.5px}
.company .r:last-child{border-bottom:0}
.company .r b{min-width:84px;font-weight:700;color:#fff}
.company .r span{color:var(--w-dim)}

/* ===== 背景グリッドを完全撤去 =====
   ・HTML から .grid-lines 要素を削除、site.js から番号生成(.grid-nums)を削除済み。
   ・残る .grid-lines / .grid-nums のスタイル定義は対象要素が無く不活性（dead code）。
   ・下記はヒーローのセル罫線・コーナードットの無効化＋念のための保険。 */
.grid-lines, .grid-nums{ display:none !important; }
.hero-grid{ border:0 !important; }
.hero-grid .gc{ border:0 !important; }
.hero-grid .gc::before{ display:none !important; }
/* 背景装飾メディア・プレースホルダの枠線も撤去（格子に見えるため）。ガラスUIカードの枠は維持 */
.grid-photo, .grid-img, .grid-video{ border:0 !important; }
.imgslot{ border:0 !important; }
/* ===== 背景グリッド撤去ブロック ここまで ===== */

/* lead text forced to one line — desktop only (mobile wraps to avoid pushing the heading off-screen) */
@media(min-width:761px){ .kic-nowrap{max-width:none;white-space:nowrap} }

/* accessibility: respect reduced-motion — disable animations/transitions, reveal everything, hide bg videos */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
  .grid-video{display:none!important}
}

/* faq */
.faq-cat{display:flex;flex-direction:column;gap:4px;margin:34px 0 16px;
  font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:15px;line-height:1.3;color:var(--w-dim)}
.faq-cat:first-child{margin-top:0}
.faq-cat .eyebrow-en{font-size:clamp(24px,2.6vw,34px);line-height:.92;opacity:.92}
.faq{margin-bottom:12px;padding:0 24px}
.faq .faq-q{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:20px 0;font-weight:700;font-size:15px;width:100%;background:none;border:0;color:inherit;font-family:inherit;text-align:left}
.faq .faq-q .pm{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid var(--glass-line);
  position:relative;font-size:0;transition:.25s}
.faq .faq-q .pm::before,.faq .faq-q .pm::after{content:"";position:absolute;top:50%;left:50%;
  background:currentColor;border-radius:1px;transition:transform .25s,opacity .25s}
.faq .faq-q .pm::before{width:9px;height:1px;transform:translate(-50%,-50%)}   /* horizontal bar */
.faq .faq-q .pm::after{width:1px;height:9px;transform:translate(-50%,-50%)}    /* vertical bar */
.faq.open .faq-q .pm{background:#fff;color:var(--ink)}
.faq.open .faq-q .pm::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}  /* + → − */
/* 滑らかな開閉：max-height を 0 ⇄ 内容高さ にトランジション（paddingは内側 .ans-in に置き枠を完全に畳む） */
.faq .ans{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.faq .ans .ans-in{font-size:13.5px;color:var(--w-dim);padding:0 0 20px}
@media(prefers-reduced-motion:reduce){.faq .ans{transition:none}}

/* ===== Typography update: 日本語=ヒラギノ角ゴシック W4 / 文字=白100% ===== */
:root{--w-dim:#ffffff;--w-dim2:#ffffff;--txt:#ffffff}
body{font-family:"DM Sans","Hiragino Kaku Gothic ProN","Hiragino Sans","Hiragino Kaku Gothic Pro",sans-serif;font-weight:400;color:#fff}
.jp,.jp-sub,.kic,.sub,.nav a,.btn,.chip,
.hero h1,.hero h1 .thin,
.bighead,.bighead .thin,
.solcard h3,.solcard p,.solcard .go,
.step h3,.step p,
.gcard h3,.gcard p,
.revcard h3,.revcard p,
.casec h3,.casec p,
.tcard p,.tcard .who b,.tcard .who span,
.node h4,.node p,
.spec h4,.spec .r,
.company h4,.company .r,
.ptable .ph b,.ptable .pr,.pnote,
.faq .faq-q,.faq .ans-in,
.fcard .nm,.fcard .fb,
.statbox .k,
.feature .fbar,
.final p{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Hiragino Kaku Gothic Pro",sans-serif;
  font-weight:400;
}
/* full-white text (remove dimming) */
.eyebrow-en{opacity:1}
.revcard .no{opacity:1;color:#fff}
.player .ai{color:#fff}

/* ===== English = Barlow Condensed, dramatically enlarged ===== */
.eyebrow-en{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,7vw,108px);line-height:.82;letter-spacing:.012em;opacity:1;display:block;gap:0;
}
.eyebrow-en::before{display:none}
.sec-h{gap:6px;align-items:flex-end}
.hero .eyebrow-en{font-size:clamp(38px,5vw,72px);margin-bottom:12px}
.final .eyebrow-en{font-size:clamp(46px,7vw,108px);margin-bottom:4px;justify-content:center;text-align:center}
.final .eyebrow-en::after{display:none}
/* numbers larger */
.statbox .n{font-size:clamp(42px,4.8vw,66px)}
.casec .money{font-size:clamp(40px,4.6vw,56px)}
.logo b{font-size:18px;letter-spacing:.03em}

/* ===== Barlow Condensed = regular weight (400) ===== */
.eyebrow-en,.disp,.logo b,.statbox .n,.player .ai,.revcard .no,
.ptable .ph b,.ptable .pr .v,.step .no,.casec .money,.casec .ml,
.tcard .q,.node .b{font-weight:400}

/* ===== smaller card corner radius ===== */
.glass{border-radius:10px}
.feature{border-radius:12px}
.player{border-radius:8px}
.feature .fbar{border-radius:8px}
.fcard{border-radius:10px}
@media(max-width:900px){.node{border-radius:10px}}

/* ===== tiled grid-line background + frame crosshairs (ref: Longbow) ===== */
.grid-lines{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;
  width:min(var(--maxw),calc(100% - 56px));pointer-events:none;z-index:0;
  border-left:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);
  --cell:clamp(130px,20vw,300px);
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:100% var(--cell), var(--cell) 100%;background-position:0 0;}
.grid-lines .gx{position:absolute;width:14px;height:14px}
.grid-lines .gx::before,.grid-lines .gx::after{content:"";position:absolute;background:rgba(255,255,255,.65)}
.grid-lines .gx::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.grid-lines .gx::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.grid-lines .tl{top:-7px;left:-7px}.grid-lines .tr{top:-7px;right:-7px}
.grid-lines .bl{bottom:-7px;left:-7px}.grid-lines .br{bottom:-7px;right:-7px}
@media(max-width:600px){.grid-lines{width:calc(100% - 28px);--cell:25vw}}
/* keep page content above the grid */
.head,.hero,section.sec,.final,.foot{position:relative;z-index:1}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* ===== update: full-screen grid + intersection dots + transparent header ===== */
.grid-lines{left:0;right:0;width:100%;margin:0;border-left:0;border-right:0;z-index:-1;
  --cell:clamp(110px,12.5vw,180px);
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px),
    radial-gradient(circle at 0 0, rgba(255,255,255,.6) 2px, transparent 2.6px);
  background-size:100% var(--cell), var(--cell) 100%, var(--cell) var(--cell);
  background-position:0 0,0 0,0 0;}
.grid-lines .gx{display:none}
/* transparent header */
.head{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;position:sticky;top:0;z-index:80}
.nav.open{background:#e8590c}

/* ===== grid scrolls with page + larger cells + content aligned to grid ===== */
body{position:relative}
.grid-lines{position:absolute;inset:0;width:auto;height:auto;margin:0;border:0;z-index:-1;pointer-events:none;
  --cell:clamp(180px,25vw,300px);
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:100% var(--cell);background-position:0 0;background-repeat:repeat;}
.grid-lines::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(var(--maxw),calc(100% - 60px));
  border-left:1px solid rgba(255,255,255,.13);border-right:1px solid rgba(255,255,255,.13);
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),
    radial-gradient(circle at 0 0,rgba(255,255,255,.65) 2px,transparent 2.6px);
  background-size:25% 100%, 25% var(--cell);background-position:0 0;}
.grid-lines .gx{display:none}
/* align content to the grid module */
.wrap{max-width:var(--maxw)}
.hero .grid{grid-template-columns:1fr 1fr}

/* ===== 5-column rigid grid ===== */
.grid-lines{--cell:clamp(160px,20vw,240px)}
.grid-lines::before{background-size:20% 100%, 20% var(--cell)}
/* rigid layout: align hero split to a grid line (2:3 = 40/60) */
.hero .grid{grid-template-columns:2fr 3fr;gap:0}
.hero .grid > div:first-child{padding-right:40px}
.hero h1{font-size:clamp(30px,4.2vw,54px)}

/* ===== background: slightly blue-tinted gray gradient ===== */
:root{--ink:#1e2632}
body{background:radial-gradient(135% 95% at 50% 14%, #5b6675 0%, #444e5d 50%, #2b323e 100%) fixed;background-color:#3a4350}
.nav.open{background:#2b323e}

/* ===== liquid grid: 5 equal columns across full viewport (20vw each) ===== */
.grid-lines{--cell:20vw;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px),
    radial-gradient(circle at 0 0,rgba(255,255,255,.6) 2px,transparent 2.6px);
  background-size:100% var(--cell), var(--cell) 100%, var(--cell) var(--cell);
  background-position:0 0,0 0,0 0;}
.grid-lines::before{display:none}

/* ===== stronger background gradient contrast (light vs dark) ===== */
body{background:radial-gradient(125% 105% at 50% 8%, #788698 0%, #4a5566 38%, #2a313d 72%, #1a1f28 100%) fixed;background-color:#2a313d}

/* ===== section JP headings 30% smaller ===== */
.bighead{font-size:clamp(20px,3.2vw,41px)}

/* ===== headings: further 15% smaller + top margin ===== */
.bighead{font-size:clamp(17px,2.7vw,35px);margin-top:18px}

/* ===== hero background photo: top 3 grid rows (60vw) ===== */
.hero-photo{position:absolute;top:0;left:0;width:100%;height:60vw;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,24,32,.62) 0%, rgba(20,24,32,.18) 50%, rgba(20,24,32,0) 78%),
    linear-gradient(180deg, rgba(20,24,32,.30) 0%, rgba(20,24,32,0) 55%),
    url(hero.jpg) center 28%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);}

/* ===== hero photo: no gradient overlay, plain image ===== */
.hero-photo{background:url(hero.jpg) center 28%/cover no-repeat;-webkit-mask-image:none;mask-image:none}

/* ===== hero photo: flat black semi-transparent screen for readability ===== */
.hero-photo{background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)), url(hero.jpg) center 28%/cover no-repeat}

/* darker screen */
.hero-photo{background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)), url(hero.jpg) center 28%/cover no-repeat}

/* darker screen 2 */
.hero-photo{background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)), url(hero.jpg) center 28%/cover no-repeat}

/* ===== remove illustration (emoji) icons ===== */
.gcard .gi,.fcard .ph .em,.radial .core .ic{display:none}

/* ===== hero video embed: grid rows 2-3 × cols 3-5 ===== */
.hero{min-height:calc(60vw - 74px)}
.hero .grid{display:block}
.hero .rv{max-width:min(440px,34vw)}
.video-embed{position:absolute;left:40vw;top:calc(20vw - 74px);width:60vw;height:40vw;z-index:6;
  overflow:hidden;background:#0d131c;border:1px solid var(--glass-line)}
.video-embed .ve-vid{width:100%;height:100%;object-fit:cover;display:block;background:#0d131c}
.video-embed::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.20);pointer-events:none}
.ve-play{position:absolute;top:auto;left:auto;right:0;bottom:0;transform:none;z-index:2;width:60px;height:60px;
  border-radius:0;border:0;cursor:pointer;background:rgba(255,255,255,.5);color:#15151a;font-size:17px;display:grid;place-items:center;padding-left:4px;transform-origin:100% 100%}
.ve-play:hover{transform:scale(1.06)}
.ve-tag{position:absolute;left:22px;bottom:18px;z-index:2;font-family:"Barlow Condensed";font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:15px;color:#fff}
@media(max-width:900px){
  .hero{min-height:0}
  .hero .rv{max-width:none}
  .video-embed{position:static;left:auto;top:auto;width:auto;height:auto;aspect-ratio:16/9;margin-top:32px}
}

/* ===== remove hero background photo ===== */
.hero-photo{display:none}

/* ===== video flush to right edge ===== */
.video-embed{right:0;width:auto}
@media(max-width:900px){.video-embed{right:auto;width:auto}}

/* video-embed now child of .hero (full-width containing block) */
@media(max-width:900px){.video-embed{margin:32px 18px 0}}

/* ===== structural hero grid (real CSS grid, not background) ===== */
/* stop using the background grid */
.grid-lines{display:none}

.hero{position:relative;padding:0;min-height:0}
.hero-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,20vw);
  border-top:1px solid rgba(255,255,255,.13);border-left:1px solid rgba(255,255,255,.13)}
.hero-grid .gc{border-right:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);position:relative}
.hero-grid .gc::before{content:"";position:absolute;left:-3px;top:-3px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6)}

.hero-grid .hero-text{grid-column:1 / 3;grid-row:1 / 4;z-index:3;max-width:none;
  display:flex;flex-direction:column;justify-content:center;padding:0 28px 0 clamp(20px,4vw,60px)}
.hero-grid .hero-text .eyebrow-en{margin-bottom:18px}
.hero-grid .hero-text .stat-row{margin-bottom:22px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:24px}
.hero .hero-note{margin:6px 0 12px;padding-right:var(--pad);text-align:right;white-space:nowrap;font-size:11.5px;line-height:1.55;color:var(--w-dim);letter-spacing:.02em}
@media(max-width:900px){.hero .hero-note{padding:0 18px;text-align:left;white-space:normal;font-size:11px}}
#service .spec-note{margin:12px 0 0;text-align:left;font-size:11.5px;line-height:1.55;color:var(--w-dim);letter-spacing:.02em}

.hero-grid .video-embed{grid-column:3 / 6;grid-row:2 / 4;z-index:3;
  position:relative;left:auto;top:auto;right:auto;bottom:auto;width:auto;height:auto;max-width:none;
  overflow:hidden;background:#0d131c;border:0}

@media(max-width:900px){
  .hero-grid{display:block;border:0}
  .hero-grid .gc{display:none}
  .hero-grid .hero-text{padding:96px 18px 24px}
  .hero-grid .video-embed{aspect-ratio:16/9;margin:0 18px 44px}
}

/* ===== grid across the whole site (visible background grid), hero structural grid stays aligned ===== */
.grid-lines{display:block;position:absolute;inset:0;z-index:-1}
/* fixed header so hero starts at y=0 → hero grid aligns with full-page grid origin */
.head{position:fixed;left:0;right:0;top:0}
/* hide hero's own grid lines/dots to avoid doubling with the page grid */
.hero-grid{border:0}
.hero-grid .gc{border:0}
.hero-grid .gc::before{display:none}

/* ===== revise: sticky header + visible hero grid + background grid continuing below hero ===== */
.head{position:sticky}
.hero-grid{border-top:1px solid rgba(255,255,255,.13);border-left:1px solid rgba(255,255,255,.13)}
.hero-grid .gc{border-right:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.hero-grid .gc::before{display:block}
.grid-lines{display:block;top:calc(74px + 60vw)}
@media(max-width:900px){.grid-lines{top:0}}

/* ===== fix: explicitly place all 15 grid cells so lines fill the whole hero ===== */
.hero-grid .gc:nth-child(1){grid-area:1/1/2/2}
.hero-grid .gc:nth-child(2){grid-area:1/2/2/3}
.hero-grid .gc:nth-child(3){grid-area:1/3/2/4}
.hero-grid .gc:nth-child(4){grid-area:1/4/2/5}
.hero-grid .gc:nth-child(5){grid-area:1/5/2/6}
.hero-grid .gc:nth-child(6){grid-area:2/1/3/2}
.hero-grid .gc:nth-child(7){grid-area:2/2/3/3}
.hero-grid .gc:nth-child(8){grid-area:2/3/3/4}
.hero-grid .gc:nth-child(9){grid-area:2/4/3/5}
.hero-grid .gc:nth-child(10){grid-area:2/5/3/6}
.hero-grid .gc:nth-child(11){grid-area:3/1/4/2}
.hero-grid .gc:nth-child(12){grid-area:3/2/4/3}
.hero-grid .gc:nth-child(13){grid-area:3/3/4/4}
.hero-grid .gc:nth-child(14){grid-area:3/4/4/5}
.hero-grid .gc:nth-child(15){grid-area:3/5/4/6}

/* ===== align hero grid columns with full-page grid (both 20vw) ===== */
.hero-grid{grid-template-columns:repeat(5,20vw)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ===== grid cells: --sq = column width (set by JS), --rh = row height = --sq × 1.1 (panels 10% taller) ===== */
:root{--sq:20vw;--rh:calc(var(--sq) * 1.1)}
.hero-grid{grid-template-columns:repeat(5,var(--sq));grid-template-rows:repeat(3,var(--rh))}
.grid-lines{background-size:100% var(--rh), var(--sq) 100%, var(--sq) var(--rh);
  background-position:0 0, 0 0, 0 0;top:calc(80px + (3 * var(--rh)))}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;grid-template-rows:none}
  .grid-lines{top:0}
}

/* ===== header menu: text only (no pill background/border) ===== */
.nav a{background:transparent;border:0;border-radius:0;padding:8px 12px}
.nav a:hover{background:transparent;opacity:.6}

/* ===== nudge hero text down 50px ===== */
.hero-grid .hero-text{position:relative;top:50px}
@media(max-width:900px){.hero-grid .hero-text{top:0}}

/* ===== move section sub-text (.kic) below the Japanese heading ===== */
.sec-top{flex-direction:column;align-items:flex-end;text-align:right;gap:14px}
.sec-top > .sec-h{order:1}
.sec-top > .kic{order:2;max-width:560px;margin-top:2px}

/* ===== alternate section heading alignment: left / right per section ===== */
.sec:nth-of-type(even) .sec-top{align-items:flex-start;text-align:left}
.sec:nth-of-type(even) .sec-h{align-items:flex-start;text-align:left}
.sec:nth-of-type(even) .sec-top>.kic{text-align:left}

/* ===== How it works — radial spokes + bounce + click-zoom ===== */
.radial{position:relative;height:min(780px,80vw);min-height:600px;display:grid;place-items:center;
  --R:clamp(190px,26vw,350px)}
.radial .ring{display:none}
.radial .core{width:clamp(120px,13vw,176px);height:clamp(120px,13vw,176px);border-radius:50%;
  display:grid;place-items:center;text-align:center;z-index:1;background:var(--glass)}
.radial .core .core-label{font-family:"Barlow Condensed";font-weight:700;letter-spacing:.14em;font-size:15px;color:#fff;opacity:.85;line-height:1.25}
.radial .spoke{position:absolute;left:50%;top:50%;width:2px;height:var(--R);margin-left:-1px;
  transform-origin:top center;transform:rotate(var(--a))}
.radial .spoke .line{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.12))}
.radial .spoke .node{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  width:200px;background:none;border:0;padding:0;cursor:pointer;z-index:2;color:#fff;font-family:inherit}
.radial .spoke .node-in{display:flex;flex-direction:column;align-items:center;gap:9px;animation:nodebob 3.2s ease-in-out infinite}
.radial .spoke .b{width:50px;height:50px;border-radius:50%;background:#fff;color:#15151a;
  font-family:"Barlow Condensed";font-weight:700;font-size:24px;display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.5);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.radial .spoke .lbl{display:flex;flex-direction:column;gap:2px;text-align:center}
.radial .spoke .lbl b{font-size:14px;font-weight:700}
.radial .spoke .lbl i{font-style:normal;font-size:12px;color:var(--w-dim)}
@keyframes nodebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.radial .spoke:nth-of-type(2) .node-in{animation-delay:0s}
.radial .spoke:nth-of-type(3) .node-in{animation-delay:.45s}
.radial .spoke:nth-of-type(4) .node-in{animation-delay:.9s}
.radial .spoke:nth-of-type(5) .node-in{animation-delay:1.35s}
.radial .spoke:nth-of-type(6) .node-in{animation-delay:1.8s}
.radial .spoke .node:hover .b{transform:scale(1.12)}
.radial .spoke .node.zoom .b{transform:scale(1.9)}
.radial .spoke .node.zoom .node-in{animation-play-state:paused}
@media(max-width:760px){
  .radial{height:auto;min-height:0;display:block}
  .radial .core{display:none}
  .radial .spoke{position:static;width:auto;height:auto;transform:none;margin:0 0 14px}
  .radial .spoke .line{display:none}
  .radial .spoke .node{position:static;transform:none;width:100%}
  .radial .spoke .node-in{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;animation:none;
    background:rgba(255,255,255,.08);border:1px solid var(--glass-line);border-radius:12px;padding:12px 16px}
  .radial .spoke .lbl{text-align:left}
}

/* ===== How it works v2 — sequential lines (1→5) + pentagon core ===== */
.radial{position:relative;width:min(720px,86vw);height:min(720px,86vw);margin:6px auto 0;display:block}
.radial .rlines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.radial .rlines polyline{fill:none;stroke:rgba(255,255,255,.6);stroke-width:.4;stroke-linejoin:round;stroke-linecap:round}
/* pentagon core */
.radial .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(118px,17vw,180px);height:clamp(112px,16vw,170px);border-radius:0;
  background:var(--glass);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
  display:grid;place-items:center;text-align:center;z-index:1}
.radial .core .core-label{font-family:"Barlow Condensed";font-weight:700;letter-spacing:.12em;font-size:14px;color:#fff;opacity:.85;line-height:1.25}
/* nodes anchored by their number */
.radial .node{position:absolute;transform:translate(-50%,-50%);width:52px;height:52px;
  background:none;border:0;padding:0;cursor:pointer;color:#fff;z-index:3;overflow:visible}
.radial .node-in{position:relative;width:52px;height:52px;animation:nodebob 3.2s ease-in-out infinite}
.radial .b{width:52px;height:52px;border-radius:50%;background:#fff;color:#15151a;
  font-family:"Barlow Condensed";font-weight:700;font-size:25px;display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.5);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.radial .lbl{position:absolute;top:62px;left:50%;transform:translateX(-50%);width:172px;text-align:center;
  display:flex;flex-direction:column;gap:2px}
.radial .lbl b{font-size:14px;font-weight:700}
.radial .lbl i{font-style:normal;font-size:12px;color:var(--w-dim)}
@keyframes nodebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.radial .node:nth-of-type(1) .node-in{animation-delay:0s}
.radial .node:nth-of-type(2) .node-in{animation-delay:.4s}
.radial .node:nth-of-type(3) .node-in{animation-delay:.8s}
.radial .node:nth-of-type(4) .node-in{animation-delay:1.2s}
.radial .node:nth-of-type(5) .node-in{animation-delay:1.6s}
.radial .node:hover .b{transform:scale(1.12)}
.radial .node.zoom .b{transform:scale(1.95)}
.radial .node.zoom .node-in{animation-play-state:paused}
@media(max-width:760px){
  .radial{width:auto;height:auto;display:block;margin:0}
  .radial .rlines,.radial .core{display:none}
  .radial .node{position:static;transform:none;width:100%;height:auto;margin-bottom:12px}
  .radial .node-in{width:100%;height:auto;animation:none;display:flex;align-items:center;gap:14px;
    background:rgba(255,255,255,.08);border:1px solid var(--glass-line);border-radius:12px;padding:12px 16px}
  .radial .lbl{position:static;transform:none;width:auto;text-align:left}
}

/* ===== radial v3: closed polygon, thinner line, bigger random bounce ===== */
.radial .rlines polygon{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.22;stroke-linejoin:round}
@keyframes nodebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.radial .node:nth-of-type(1) .node-in{animation-duration:2.8s;animation-delay:0s}
.radial .node:nth-of-type(2) .node-in{animation-duration:3.7s;animation-delay:.7s}
.radial .node:nth-of-type(3) .node-in{animation-duration:2.3s;animation-delay:.35s}
.radial .node:nth-of-type(4) .node-in{animation-duration:4.1s;animation-delay:1.15s}
.radial .node:nth-of-type(5) .node-in{animation-duration:3.2s;animation-delay:.5s}

/* radial: floating handled by JS (disable CSS bounce) */
.radial .node-in{animation:none}

/* number color = background gray */
.radial .b{color:#3a4350}

/* number color = lighter gray */
.radial .b{color:#8a94a3}

/* ===== wider spacing between sections ===== */
section.sec{padding:172px 0}
@media(max-width:900px){section.sec{padding:112px 0}}
@media(max-width:600px){section.sec{padding:80px 0}}

/* even wider spacing between sections */
section.sec{padding:240px 0}
@media(max-width:900px){section.sec{padding:150px 0}}
@media(max-width:600px){section.sec{padding:100px 0}}

/* label: closer to the number, centered on the number */
.radial .lbl{top:56px;left:50%;transform:translateX(-50%);width:180px;text-align:center;align-items:center}

/* ===== hero eyebrow: single line, centered to the screen ===== */
.hero-grid .hero-eyebrow{position:absolute;top:clamp(18px,2.6vw,40px);left:0;right:0;width:100%;
  margin:0;display:block;text-align:center;white-space:nowrap;z-index:4}
@media(max-width:760px){
  .hero-grid .hero-eyebrow{position:static;white-space:normal;text-align:center;padding:88px 16px 4px;font-size:clamp(30px,9vw,46px)}
  .hero-grid .hero-text{padding-top:6px}
}

/* ===== align hero left content (stats) to the 2nd-row grid line ===== */
.hero-grid .hero-text{grid-row:2 / 4;justify-content:flex-start;top:0}

/* ===== align HOW IT WORKS heading to the 5th-row grid line ===== */
@media(min-width:761px){ #how{padding-top:var(--sq)} }

/* ===== hero eyebrow: vertically centered within the 1st grid panel ===== */
@media(min-width:761px){
  .hero-grid .hero-eyebrow{top:0;height:var(--rh);display:flex;align-items:center;justify-content:center}
}

/* ===== court photo placed in grid: row 6 (panels 31-33), columns 1-3 ===== */
.grid-photo{position:absolute;left:0;top:calc(80px + 6 * var(--rh));
  width:calc(3 * var(--sq));height:var(--rh);object-fit:cover;display:block;z-index:1;
  border:1px solid rgba(255,255,255,.13)}
@media(max-width:760px){.grid-photo{display:none}}

/* ===== align all content (except header) to the grid columns (cols 2-4) ===== */
@media(min-width:761px){
  .wrap{max-width:none;width:100%;margin:0;padding-left:var(--sq);padding-right:var(--sq)}
  .head .wrap{max-width:var(--maxw);width:auto;margin:0 auto;padding:0 30px}
}

/* ===== cards as grid panels (1 card = 1 panel; info-heavy = multiple) ===== */
@media(min-width:761px){
  .wrap{padding-left:0;padding-right:0}
  .head .wrap{padding:0 30px}
  .grid4,.grid3,.tgrid,.fgrid,.ptwrap,.trust-grid,.cases{
    display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:var(--rh);gap:0;margin:0}
  .gcard,.revcard,.tcard,.fcard,.spec,.ptable,.company,.casec{
    border-radius:0!important;border:1px solid rgba(255,255,255,.13);margin:0;background:var(--glass);
    display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
  .spec{grid-row:span 2}
  .tcard{grid-row:span 2}
  .fcard{grid-row:span 2}
  .casec{grid-row:span 2}
  .ptable{grid-column:span 2;grid-row:span 3}
  .company{grid-column:span 2;grid-row:span 2}
  .gcard,.revcard{padding:24px}
  .fcard .ph{aspect-ratio:auto;flex:1;min-height:0}
  .grid3{margin-top:0!important}
}

/* ===========================================================
   Longbow-referenced rigid grid: everything below the header snaps
   to the 288px (--sq) module. Each section is a stack of whole rows:
   [ 1 empty row ] → [ heading band = 1 row ] → [ content = N rows ].
   Card grids are already N×--sq, so once a block starts on a grid
   line it also ends on one → background lines run along every edge.
   =========================================================== */
@media(min-width:761px){
  /* section rhythm: one empty grid row (--rh) before each section, no bottom pad */
  section.sec{padding:var(--rh) 0 0!important}
  #how{padding-top:var(--rh)!important}

  /* heading = exactly one grid panel tall; top-aligned so the h2's top offset is
     identical across sections regardless of eyebrow/heading/kicker line counts */
  .sec-top{min-height:var(--rh);margin:0;justify-content:flex-start;padding-top:52px}

  /* HOW: radial diagram occupies a 3-col × 3-row panel block (cols 2–4), centered */
  #how .radial{width:calc(3 * var(--sq));height:calc(3 * var(--rh));
    min-height:0;margin:0 auto}

  /* SOLUTIONS: filter chips form a one-row band, fgrid starts on the next line */
  #find .filters{min-height:var(--rh);max-width:none;margin:0;
    display:flex;flex-wrap:wrap;align-items:center;align-content:center}

  /* TRUST: trailing caption + city chips → two-row band */
  #about .gridband{min-height:calc(2 * var(--rh));margin:0;
    display:flex;flex-direction:column;justify-content:center;gap:14px}
  #about .gridband .filters{max-width:none;margin:0}

  /* FAQ: height follows content (no reserved empty band below the last item) */
  #faq .faqwrap{min-height:0;
    display:flex;flex-direction:column;justify-content:flex-start}
  #faq .faqwrap .faq:last-child{margin-bottom:0}

  /* final CTA begins on a grid line; +58px so its h2 top offset matches the .sec sections */
  .final{padding:calc(var(--rh) + 58px) 0 0}

  /* "詳しく見る" CTA band = exactly one grid row → keeps section rhythm on the grid */
  .morewrap{min-height:var(--rh);margin-top:0;align-items:center;align-content:center}

  /* sales-record band (Voice) = exactly two grid rows → keeps section rhythm on the grid */
  .recordwrap{min-height:calc(2 * var(--rh));margin-top:0;display:flex;flex-direction:column;justify-content:center}
}

/* ===========================================================
   50px frame: inset the whole grid system (background lines, hero
   grid, every card row) by --pad (=50px desktop, set in site.js).
   --sq is recomputed as (clientWidth − 2·--pad)/5 so the 5 columns
   still tile the framed width exactly and content stays aligned.
   =========================================================== */
:root{--pad:80px}
@media(min-width:761px){
  /* background grid lines + intersection dots live inside the frame */
  .grid-lines{left:var(--pad);right:var(--pad);
    border-right:1px solid rgba(255,255,255,.10)}
  /* hero structural grid inset to the frame */
  .hero-grid{margin-left:var(--pad);margin-right:var(--pad)}
  /* court photo offset by the frame */
  .grid-photo{left:var(--pad)}
  /* section content (headings, card rows, filters, CTA) inset to the frame */
  section .wrap{padding-left:var(--pad);padding-right:var(--pad)}
}

/* ===========================================================
   Faint sequential panel numbers (built in site.js). One number,
   centered, in every grid cell — numbered left→right, top→bottom
   from the screen's top-left. Sits in the background grid layer
   (behind cards, visible through empty panels).
   =========================================================== */
.grid-nums{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.grid-nums span{position:absolute;transform:translate(-50%,-50%);
  font-family:"Barlow Condensed",sans-serif;font-weight:400;line-height:1;
  font-size:calc(var(--sq) * 0.24);color:rgba(255,255,255,.08);
  font-variant-numeric:tabular-nums}
@media(max-width:760px){.grid-nums{display:none}}

/* ===== remove rounded corners from glass card backgrounds (square grid look) ===== */
.glass{border-radius:0}

/* ===== hero stat cards fill a whole grid panel each (80カ国 → panel 6, 16競技 → panel 7) ===== */
@media(min-width:761px){
  .hero-grid .hero-stat{grid-row:2 / 3;margin:0;min-width:0;
    display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
    padding:clamp(16px,1.8vw,24px)}
  .hero-grid .hero-stat.hs6{grid-column:1 / 2}   /* panel 6 */
  .hero-grid .hero-stat.hs7{grid-column:2 / 3}   /* panel 7 */
  /* headline / sub / CTA drop to the row below (panels 11–12) */
  .hero-grid .hero-text{grid-row:3 / 4}
}

/* ===== background: Palladio-style azure gradient (ref: palladiogroup.com, brand #229ada) =====
   Same light-top → deep-bottom luminance profile as before so white text / faint grid stay readable,
   hue shifted to Palladio's vivid azure. */
body{background:radial-gradient(125% 105% at 50% 8%, #36abe8 0%, #229ada 36%, #15699f 70%, #0a4670 100%) fixed;
  background-color:#15699f}
.nav.open{background:#0c466f}

/* ===== header & footer: 80px left/right padding ===== */
@media(min-width:761px){
  .head .wrap{max-width:none;width:auto;margin:0;
    padding-left:80px;padding-right:80px}
  .final .foot{padding-left:80px;padding-right:80px;margin-top:100px}
}

/* ===== top-right nav menu text 10% smaller (13.5px → 12.15px) ===== */
.nav a{font-size:12.15px}

/* ===== How it works: nudge the radial infographic up a little (transform = visual only,
   so it doesn't shift SERVICE off the grid) ===== */
@media(min-width:761px){
  #how .radial{transform:translateY(calc(-0.5 * var(--rh)))}
}

/* ===== SERVICE title: horizontally centered on screen ===== */
@media(min-width:761px){
  #service .sec-top{align-items:center;text-align:center;padding-right:0}
  #service .sec-h{align-items:center;text-align:center}
}

/* ===== image-placeholder slots: 1 row above the SERVICE cards, ready to hold an <img> ===== */
.imgslot{aspect-ratio:16/10;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(160deg,#3a2a1a,#1c1206)}
.imgslot::before{content:"画像挿入";position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  font-size:clamp(13px,1.2vw,16px);letter-spacing:.08em;color:rgba(255,255,255,.55)}
.imgslot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.imgslot.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.imgslot.has-img::before{content:none}
/* アイコン表示（グラデ背景の上に線画アイコンを中央配置） */
.imgslot.is-icon{display:flex;align-items:center;justify-content:center}
.imgslot.is-icon::before{content:none}
.imgslot.is-icon svg{width:clamp(56px,34%,96px);height:auto;color:#7ecdf2;z-index:1}

/* ===== square image placeholder inside a testimonial card (width = text width) ===== */
.tcard-img{aspect-ratio:1/1;width:100%;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.13);background:linear-gradient(160deg,#3a2a1a,#1c1206)}
.tcard-img::before{content:"画像挿入";position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.tcard-img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
@media(min-width:761px){
  .imgrow{margin:0}
  .imgslot{aspect-ratio:auto}   /* desktop: height comes from the grid row (--rh) */
  /* absolutely-placed image-slot blocks */
  .imggrid{position:absolute;z-index:1;display:grid;grid-auto-rows:var(--rh);gap:0}
  .ig142{left:calc(var(--pad) + var(--sq));top:calc(80px + 28 * var(--rh));
    width:calc(4 * var(--sq));height:var(--rh);grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){.imggrid{display:none}}

/* ===== SOLUTIONS (活用シーン) cards: align to the right-most panels (left column empty) ===== */
@media(min-width:761px){
  #find .fgrid .fcard:first-child{grid-column-start:2}
}

/* ===== SERVICE spec cards (機種ラインナップ / 対応競技 / オプション機能): each spans 3 panels wide, stacked ===== */
@media(min-width:761px){
  #service .grid3{grid-auto-rows:minmax(var(--rh),auto)} /* 内容に合わせて行を伸ばす（クリップ防止） */
  #service .grid3 .spec{grid-column:1 / span 3;grid-row:span 1;overflow:visible}
  #service .grid3 .spec:first-child{grid-column:1 / span 2}    /* 機種ラインナップ: 左上 */
  #service .grid3 .spec:nth-of-type(2){grid-column:3 / span 2;grid-row:span 2} /* 対応競技: 右・縦長（16競技を全記載） */
  #service .grid3 .spec:nth-of-type(3){grid-column:1 / span 2} /* オプション機能: 機種の下 */
}

/* ===== PRICING sub-caption: single line, no wrap ===== */
@media(min-width:761px){
  #pricing .kic{white-space:nowrap;max-width:none}
}

/* ===== TRUST sub-caption: single line, no wrap ===== */
@media(min-width:761px){
  #about .sec-top .kic{white-space:nowrap;max-width:none}
}

/* ===== PRICING tables: pushed to the right-end panels (left column left empty), 2 rows tall ===== */
@media(min-width:761px){
  #pricing .ptable{grid-row:span 2}
  #pricing .ptable:first-child{grid-column:1 / span 2}
  #pricing .ptable:last-child{grid-column:3 / span 2}
}

/* ===== image tile filling panel 25 (row 4, col 5) ===== */
.grid-img{position:absolute;display:block;object-fit:cover;z-index:1;
  border:1px solid rgba(255,255,255,.13)}
@media(min-width:761px){
  .gp25{left:calc(var(--pad) + 4 * var(--sq));top:calc(80px + 4 * var(--rh));
    width:var(--sq);height:var(--rh)}
}
@media(max-width:760px){.grid-img{display:none}}

/* ===== gv81 video at panels 91-92 (row 18, cols 1-2); REVENUE+ still shifted down 2 rows ===== */
.grid-video{position:absolute;display:block;object-fit:cover;z-index:1;
  border:1px solid rgba(255,255,255,.13);background:#0d131c}
@media(min-width:761px){
  .gv81{left:var(--pad);top:calc(80px + 18 * var(--rh));
    width:calc(2 * var(--sq));height:var(--rh)}
  /* Revenue heading pulled up to panel 121 (row 24) — 2-row offset removed */
  #revenue{margin-top:0}
  /* movie2 in panels 106 & 111 (col 0, rows 21-22) */
  .gv106{left:var(--pad);top:calc(80px + 21 * var(--rh));
    width:var(--sq);height:calc(2 * var(--rh))}
  /* movie3 in panels 119 & 120 (cols 3-4, row 23) */
  .gv129{left:calc(var(--pad) + 3 * var(--sq));top:calc(80px + 23 * var(--rh));
    width:calc(2 * var(--sq));height:var(--rh)}
}
@media(max-width:760px){.grid-video{display:none}}

/* ===== hero eyebrow: 15% larger + aligned to panel 1's left edge ===== */
@media(min-width:761px){
  .hero .eyebrow-en{font-size:clamp(53px,6.9vw,100px)}
  .hero-grid .hero-eyebrow{left:var(--pad);right:auto;width:auto;
    justify-content:flex-start;text-align:left}
}

/* ===== SERVICE: no extra top margin — uniform 400px gap like every other section ===== */
@media(min-width:761px){
  #service{margin-top:0}
}

/* ===== CASE STUDIES (#voice): no extra top margin — uniform 400px gap like every other section ===== */
@media(min-width:761px){
  #voice{margin-top:0}
}

/* ===== brighten the dark basketball video (gv81, now panels 91-92) ===== */
.gv81{filter:brightness(1.32) contrast(1.06) saturate(1.05)}
/* lighten the hero's dark overlay */
.video-embed::after{background:rgba(0,0,0,.08)}

/* ===== hero video split into TWO files: top → panels 8,9 (sample_movie1),
   bottom → panels 14,15 (movie_basketball1); panels 10 & 13 left empty ===== */
@media(min-width:761px){
  .hero-grid .video-embed.ve-top{grid-column:3 / 5;grid-row:2 / 3}     /* panels 8,9 */
  .hero-grid .video-embed.ve-bottom{grid-column:4 / 6;grid-row:3 / 4}  /* panels 14,15 */
  /* tag at the top of the top video */
  .ve-top .ve-tag{top:18px;bottom:auto}
  /* headline panel moved one cell right (panels 11,12 → 12,13) */
  .hero-grid .hero-text{grid-column:2 / 4}
  /* headline panel background = panel 1's blue (solid azure, viewport-independent) */
  .hero-grid .hero-text{background:#229ada;border:0}
}

/* ===== header logo: color mark + wordmark ===== */
.logo-img{height:30px;width:auto;display:block}
@media(max-width:600px){.logo-img{height:26px}}

/* ===== hero headline block: solid panel-1 blue, text resized to fit one row ===== */
@media(min-width:761px){
  .hero-grid .hero-text{
    background:#229ada;border:0;
    padding:clamp(18px,2vw,30px);
    justify-content:center;gap:10px;overflow:hidden}
  .hero-grid .hero-text h1{font-size:clamp(20px,2.9vw,38px)}
  .hero-grid .hero-text .jp-sub{font-size:clamp(11.5px,1.05vw,13.5px);
    line-height:1.65;margin-top:0}
}

/* ===== background: replaced azure gradient with sports-field photo (field-bg.jpg) =====
   Dark green gradient overlay keeps the light-top → deep-bottom luminance so white text
   and the faint grid stay readable over the grass texture. */
body{
  background-image:
    linear-gradient(180deg, rgba(10,42,22,.42) 0%, rgba(8,34,18,.50) 45%, rgba(5,24,13,.66) 100%),
    url(field-bg.jpg);
  background-size:cover, cover;
  background-position:center top, center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
  background-color:#0d3a1e;
}

/* ===== top scrim: black → transparent fade from the top of the screen ===== */
body::before{
  content:"";
  position:fixed;
  top:0;left:0;right:0;
  height:48vh;
  background:linear-gradient(180deg,
    rgba(0,0,0,.90) 0%,
    rgba(0,0,0,.62) 26%,
    rgba(0,0,0,.30) 56%,
    rgba(0,0,0,0) 100%);
  z-index:-1;
  pointer-events:none;
}

/* ===== hero headline card: solid blue → frosted glass (matches the stat panels) ===== */
@media(min-width:761px){
  .hero-grid .hero-text{
    background:var(--glass);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
            backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--glass-line);
  }
}

/* ===== hero main copy: same type treatment as the card headline (.hero h1) ===== */
.hero-grid .hero-maincopy{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Hiragino Kaku Gothic Pro",sans-serif;
  font-weight:400;
  text-transform:none;
  letter-spacing:-.01em;
  line-height:1.2;
  white-space:normal;
  color:#fff;
}
@media(min-width:761px){
  .hero-grid .hero-maincopy{
    font-size:clamp(20px,2.9vw,38px);   /* matches .hero-grid .hero-text h1 */
    max-width:min(76vw,1000px);
    word-break:keep-all;
    text-shadow:0 2px 18px rgba(0,0,0,.45);
  }
}
@media(max-width:760px){
  .hero-grid .hero-maincopy{
    font-size:clamp(20px,5.4vw,25px);
    padding:96px 18px 8px;
    line-height:1.5;
    text-align:left;            /* SP: left-aligned */
    word-break:keep-all;
    text-shadow:0 2px 14px rgba(0,0,0,.4);
  }
}

/* (removed: orphaned pentagon spacing — #service-flow is no longer rendered) */

/* ===== "more" links (all sections): pull up close to the cards above (was centered in a tall grid-row band) ===== */
@media(min-width:761px){
  .morewrap{min-height:0;margin-top:28px;align-items:flex-start;align-content:flex-start}
}
/* PRICING "more" link: left-aligned (default) */
#pricing .morewrap{justify-content:flex-start}

/* TRUST: right-align the two company cards (cols 2–5, leaving col 1 empty) + equal height */
@media(min-width:761px){
  #about .trust-grid{grid-auto-rows:auto;align-items:stretch}
  #about .trust-grid .company{grid-row:1}
  #about .trust-grid .company.d1{grid-column:4 / span 2}
  #about .trust-grid .company.d2{grid-column:2 / span 2}
}

/* FAQ: center the heading group (eyebrow / heading / kicker) horizontally */
#faq .sec-top{align-items:center;text-align:center}
#faq .sec-h{align-items:center;text-align:center}
#faq .sec-top>.kic{text-align:center;max-width:none}

/* ===== SOLUTIONS: vertical video fills the already-reserved left column, full card height ===== */
#find .fvideo{position:relative;min-height:0;overflow:hidden;border-radius:0;
  border:1px solid var(--glass-line);background:#0d131c}
#find .fvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:761px){
  /* desktop grid is repeat(5,1fr); cards start at column 2, so column 1 is free.
     span 2 rows to match the cards' height (grid-auto-rows = --rh, cards span 2). */
  #find .fvideo{grid-column:1;grid-row:span 2}
}
@media(max-width:760px){
  #find .fvideo{display:none}
}

/* ===== REVENUE: 4 cards + video below, right-aligned (cards cols 2–5, video cols 4–5) ===== */
#revenue .revvideo{position:relative;min-height:0;overflow:hidden;background:#0d131c;border:1px solid var(--glass-line)}
#revenue .revvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:761px){
  #revenue .grid4 .revcard:first-child{grid-column-start:2}
  #revenue .revvideo{grid-column:4 / span 2;grid-row:2}
}
@media(max-width:760px){
  #revenue .revvideo{display:none}
}

/* ===== PROBLEM: supplementary images, now in-flow below the cards (replaces the old body-level
   fixed-positioned decoration that broke section spacing). Follows the normal section flow. ===== */
#problem .grid3 .prob-court,#problem .grid3 .prob-soccer{
  width:100%;height:100%;min-height:0;object-fit:cover;display:block;
  border:1px solid rgba(255,255,255,.13)}
@media(min-width:761px){
  /* court: below the 3 cards, 3 cards wide (cols 1–3, row 2) */
  #problem .grid3 .prob-court{grid-column:1 / span 3;grid-row:2}
  /* soccer: right of the cards, 2 cards wide, full height (cols 4–5, rows 1–2) */
  #problem .grid3 .prob-soccer{grid-column:4 / span 2;grid-row:1 / span 2}
}
@media(max-width:760px){
  #problem .grid3 .prob-court,#problem .grid3 .prob-soccer{aspect-ratio:16/9;height:auto}
}

/* ===== back-to-top button (fixed bottom-right; appears after scrolling, smooth-scrolls to top) ===== */
.totop{position:fixed;right:clamp(16px,2.6vw,32px);bottom:clamp(16px,2.6vw,32px);z-index:90;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--glass-line);
  background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,transform .3s,background .2s,border-color .2s}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:#00aae5;border-color:#00aae5}
.totop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.totop{width:46px;height:46px}.totop svg{width:20px;height:20px}}

/* ===== SP hamburger menu: right-side slide-in drawer (redesigned) ===== */
@media(max-width:940px){
  .head .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,330px);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px;
    background:linear-gradient(180deg,#0e2117 0%,#0a1a12 100%);
    border-left:1px solid var(--glass-line); border-bottom:0;
    box-shadow:-26px 0 70px rgba(0,0,0,.55);
    padding:84px 20px 28px; margin:0;
    display:flex; transform:translateX(100%);
    transition:transform .4s cubic-bezier(.33,1,.68,1);
    z-index:95; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .head .nav.open{transform:translateX(0)}
  .head .nav a{
    text-align:left; font-size:15.5px; font-weight:600; color:#fff;
    padding:15px 12px; border:0; border-radius:10px; background:transparent;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:space-between; gap:10px; transition:.2s}
  .head .nav a::after{content:"\203A"; font-size:18px; opacity:.35; font-weight:400}
  .head .nav a:hover,.head .nav a:active{background:rgba(255,255,255,.08);opacity:1}
  /* last link (お問い合わせ) → highlighted CTA */
  .head .nav a:last-child{margin-top:14px;padding:14px;justify-content:center;border-bottom:0;
    background:#00aae5;border-radius:100px;font-weight:700}
  .head .nav a:last-child::after{display:none}
  .head .nav a:last-child:hover,.head .nav a:last-child:active{background:#15afe7}

  .navtoggle{display:grid;place-items:center;width:40px;height:40px;font-size:0;z-index:97;position:relative}
  /* two-line hamburger (bars morph into ✕ when open) */
  .navtoggle::before,.navtoggle::after{content:"";position:absolute;left:9px;right:9px;height:2px;
    background:#fff;border-radius:2px;transition:transform .25s ease,top .25s ease,bottom .25s ease}
  .navtoggle::before{top:14px}
  .navtoggle::after{bottom:14px}
  .navtoggle[aria-expanded="true"]::before{top:50%;transform:translateY(-50%) rotate(45deg)}
  .navtoggle[aria-expanded="true"]::after{top:50%;bottom:auto;transform:translateY(-50%) rotate(-45deg)}

  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:79;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.nav-open .totop{opacity:0;visibility:hidden}
}

/* ===== SP layout refinements (hero / service / contact / footer) ===== */
/* hero main copy: SP-only line breaks */
.spbr{display:none}
/* hero stat cards (80カ国 / 16競技): wrapper dissolves on desktop, 2-col on SP */
.hero-grid .hero-stats{display:contents}
/* service media wrapper: transparent on desktop (image row + card row unchanged) */
.svc-media{display:contents}
@media(max-width:900px){
  .hero-grid .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 18px 24px}
  /* align the two numbers (80カ国 / 16競技) to the card bottom so their baselines match */
  .hero-grid .hero-stat{display:flex;flex-direction:column}
  .hero-grid .hero-stat .n{margin-top:auto}
  /* gap between the two hero videos = same as Problem section images (16px) */
  .hero-grid .video-embed.ve-top{margin-bottom:16px}
  /* space above the hero copy below the videos: halved (44px → 22px) */
  .hero-grid .video-embed.ve-bottom{margin-bottom:22px}
}
@media(max-width:760px){
  .spbr{display:inline}
  /* service SP: pair each image with its card (image flush above its card) */
  .svc-media{display:flex;flex-direction:column;margin-top:14px}
  .svc-media .imgrow,.svc-media .grid4{display:contents}
  .svc-media .imgslot{margin:0}
  .svc-media .gcard{margin:0 0 18px}
  .svc-media .imgrow .imgslot:nth-child(1){order:1}
  .svc-media .grid4:not(.imgrow) .gcard:nth-child(1){order:2}
  .svc-media .imgrow .imgslot:nth-child(2){order:3}
  .svc-media .grid4:not(.imgrow) .gcard:nth-child(2){order:4}
  .svc-media .imgrow .imgslot:nth-child(3){order:5}
  .svc-media .grid4:not(.imgrow) .gcard:nth-child(3){order:6}
  .svc-media .imgrow .imgslot:nth-child(4){order:7}
  .svc-media .grid4:not(.imgrow) .gcard:nth-child(4){order:8}
  .svc-media .imgrow .imgslot:nth-child(5){order:9}
  .svc-media .grid4:not(.imgrow) .gcard:nth-child(5){order:10}
  /* contact lead: fit on one line */
  .final p{font-size:clamp(11.5px,3.4vw,13.5px);white-space:nowrap;max-width:none}
  /* footer: centered, stacked */
  .foot{flex-direction:column;justify-content:center;align-items:center;text-align:center;
    gap:6px;height:auto;padding:22px 18px;margin-top:80px}
  /* 30px space below the copyright line (above JELLY BEANS GROUP); +6px flex gap = 24 */
  .foot .disp:first-child{margin-bottom:24px}
}

/* ===== SP: remove all rounded corners on cards/media ===== */
@media(max-width:760px){
  .glass,.gcard,.fcard,.revcard,.spec,.company,.casec,.ptable,.statbox,.faq,
  .recordwrap,.tcard,.tcard-img,.imgslot,.fcard .ph,
  .prob-media img,#problem .grid3 .prob-court,#problem .grid3 .prob-soccer,
  .svc-media .imgslot,.svc-media .gcard,
  .video-embed,.revvideo,#find .fvideo,.hero-grid .hero-text{border-radius:0}
}

/* ===== SP only: move hero copy "撮るを収益に。…" below the two videos ===== */
@media(max-width:760px){
  .hero-grid{display:flex;flex-direction:column}
  .hero-grid .hero-text{order:1;margin-top:0}
  .pcbr{display:none}
  /* fit "地域スポーツを映像資産へ。" on one line */
  .hero-grid .hero-text h1{font-size:clamp(22px,6.6vw,27px);line-height:1.18}
}