/* KumiteLab website (design handoff v4). Phone first: ~767px phone, 768-1199px the PC layout scaled down, 1200px- PC. */
@font-face{font-family:'ArchivoC';src:url(fonts/archivo-900-62-latin.woff2) format('woff2');font-weight:900;font-stretch:62% 125%;font-display:swap}
.n,.kumite-bg{font-stretch:62%;font-variation-settings:'wdth' 62,'wght' 900}   /* Archivo condensed, as in the design (font-stretch 62%) */
@font-face{font-family:'Plex Mono';src:url(fonts/plex-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/plex-600.woff2) format('woff2');font-weight:600;font-display:swap}
:root{--sumi:#1A191B;--washi:#E6E7EA;--ink:#141518;--ink2:#4A4D55;--ink3:#2C2E33;--d1:#F2F2F3;--d2:#C9CACE;--d3:#A9ABB2;--d4:#8A8C93;
  --line:#CFD3D9;--aka:oklch(0.58 0.2 27);--jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --mono:'Plex Mono',ui-monospace,Menlo,Consolas,monospace;--pad:20px;--wrap:1280px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sumi);color:var(--ink);font-family:var(--jp);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--aka);outline-offset:3px}
img,video{display:block;max-width:100%}
h1,h2{margin:0;font-weight:900}
p{margin:0}
.mono{font-family:var(--mono);font-weight:500}
.pc-only{display:none!important}
section,.top,.foot-in{scroll-margin-top:72px}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 14px;background:var(--sumi)}
.logo{display:block;width:125px;height:16px;background:url(assets/logo.jpeg) -108px -325px / 336px auto no-repeat;mix-blend-mode:lighten}
.nav{display:flex;align-items:center;gap:36px}
.nav a{color:var(--d2);font-size:14px;text-decoration:none}
.pill{height:44px;padding:0 20px;border-radius:999px;background:var(--sumi);color:var(--d1)!important;font-weight:700;display:flex;align-items:center;box-shadow:4px 4px 10px #0A0A0B,-4px -4px 10px #2C2B2E}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:16px;background:var(--d1);color:var(--ink);font-size:16px;font-weight:700;text-decoration:none;box-shadow:5px 5px 12px #0A0A0B,-5px -5px 12px #2C2B2E}
.btn.ghost{height:52px;background:transparent;border:1px solid #4A494D;color:var(--d1);font-size:15px;box-shadow:none}
.btn.soft{height:52px;background:var(--washi);color:var(--ink);font-size:15px;box-shadow:5px 5px 12px #B9BEC7,-5px -5px 12px #FFFFFF}
.note{font-size:13px;color:var(--d3)}

/* hero */
.hero{position:relative;padding:28px var(--pad) 40px;overflow:hidden;background:var(--sumi)}
.kumite-bg{display:none}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.tag{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--d2)}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--aka)}
.hero h1{font-size:min(26px,calc((100vw - 40px) / 14));line-height:1.5;letter-spacing:-.02em;color:var(--d1)}
.hero h1 span,.nw{white-space:nowrap}   /* each of the two lines stays one line (13-14 characters) */
.lead{color:var(--d3)}
.cta{align-self:stretch;display:flex;flex-direction:column;gap:12px;margin-top:6px}

/* intro video */
.intro{background:var(--sumi);padding:0 0 56px;display:flex;flex-direction:column;gap:14px}
.vbox{position:relative;aspect-ratio:16/9;background:#0E0E0F;overflow:hidden}
.vbox video{width:100%;height:100%;object-fit:cover;background:#0E0E0F}
.vtry{position:absolute;left:41%;top:59%;width:18%;height:10%;min-width:96px;min-height:44px;border-radius:999px}
.vtry:hover{background:rgba(242,242,243,.08)}
.vsnd{position:absolute;right:12px;bottom:12px;height:40px;padding:0 16px;border:none;border-radius:999px;background:rgba(20,21,24,.82);color:var(--d1);font:700 13px var(--jp);display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.vsnd i{width:8px;height:8px;border-radius:50%;background:var(--d4)}
.vsnd.on i{background:var(--aka)}
.vsnd.done i{background:var(--d1)}
.vcap{padding:0 var(--pad);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vcap strong{color:var(--d1)}
.vcap .mono{font-size:12px;color:var(--d3)}

/* light sections */
.light{background:var(--washi)}
.light section{padding:8px var(--pad) 64px;display:flex;flex-direction:column;gap:24px}
.light h2{font-size:24px;line-height:1.5;letter-spacing:-.01em}
.light p{color:var(--ink3);line-height:1.9}
.why{padding-top:72px!important}
.why-text{display:flex;flex-direction:column;gap:24px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips span{padding:10px 16px;border-radius:999px;background:var(--washi);box-shadow:inset 3px 3px 7px #BFC4CC,inset -3px -3px 7px #FFF;font-weight:700;color:var(--ink2)}
.data{display:flex;flex-direction:column;margin-top:12px}
.data-cap{font-size:13px;font-weight:700;color:var(--ink2)}
.data-label{font-weight:700;margin-top:18px}
.big{display:flex;align-items:baseline;gap:8px;padding:4px 0 22px;border-bottom:1px solid var(--line)}
.big .mono{font-size:92px;line-height:1;letter-spacing:-.05em}
.big .unit{font-size:22px;font-weight:700}
.pair{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}
.pair div{display:flex;flex-direction:column;gap:8px;padding:18px 0}
.pair div:first-child{border-right:1px solid var(--line)}
.pair div:last-child{padding-left:18px}
.pair div>span:first-child{font-size:13px;color:var(--ink2)}
.num{font-size:34px;line-height:1}
.num small{font-size:13px;margin-left:4px}
.data strong{color:var(--ink)}
.head{display:flex;flex-direction:column;gap:20px}
.steps>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start;padding:20px 0;border-top:1px solid var(--ink)}
.n{font-family:'ArchivoC',var(--jp);font-weight:900;font-size:64px;line-height:.8}
.st{display:flex;flex-direction:column;gap:6px}
.st strong{font-size:18px}
.st span{font-size:14px;line-height:1.75;color:var(--ink2)}
.scene{width:calc(100% + 2 * var(--pad));max-width:none;margin:0 calc(-1 * var(--pad));height:auto;aspect-ratio:16/9;object-fit:cover;object-position:58% 50%}
.for ul{list-style:none;margin:0;padding:0}
.for li{padding:16px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.6;font-weight:700}
.for .small{margin-top:20px;font-size:13px;line-height:1.85;color:var(--ink2)}
.tl{display:flex;flex-direction:column}
.tl>div{position:relative;display:flex;flex-direction:column;gap:6px;padding:0 0 22px 36px}
.tl>div::before{content:"";position:absolute;left:9px;top:20px;bottom:0;width:2px;background:#C6CAD1}
.tl>div:last-child::before{display:none}
.tl .dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%}
.tl .now .dot{background:var(--ink)}
.tl .dev .dot{background:var(--washi);box-shadow:3px 3px 7px #B9BEC7,-3px -3px 7px #FFF}
.tl .idea .dot{background:var(--washi);box-shadow:inset 2px 2px 5px #BFC4CC,inset -2px -2px 5px #FFF}
.badge{align-self:flex-start;font:600 11px/1 var(--mono);padding:5px 8px;border-radius:6px;border:1px solid var(--ink2);color:var(--ink)}
.now .badge{background:var(--ink);color:var(--d1);border-color:var(--ink)}
.idea .badge{border-style:dashed}
.tl strong{font-size:17px}
.tl>div>span:last-child{font-size:14px;line-height:1.7;color:var(--ink2)}
.ig{gap:18px!important;padding-bottom:56px!important}
.ig-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.ig-id{display:flex;gap:14px;align-items:center}
.ig-id>span:last-child{display:flex;flex-direction:column;gap:4px}
.ig-id strong{font-size:15px;line-height:1.2}
.ig-id>span:last-child>span{font-size:13px;color:var(--ink2)}
.ig-mark{flex:none;width:52px;height:52px;border-radius:50%;background:var(--sumi);box-shadow:4px 4px 10px #B9BEC7,-4px -4px 10px #FFF;display:flex;align-items:center;justify-content:center}
.ig-mark i{width:23.1px;height:28px;transform:translateX(1px);background:url(assets/mark.jpeg) -20.3px -28.2px / 63.4px auto no-repeat}
.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid6 img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}

/* join (final CTA) */
.join{background:var(--sumi);padding:56px var(--pad) 48px;display:flex;flex-direction:column;gap:20px;color:var(--d1)}
.mark-big{display:none}
.join h2{font-size:26px;line-height:1.5;letter-spacing:-.02em}
.join>p{color:var(--d3);line-height:1.85}
.howjoin{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.howjoin li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.7;color:var(--d2)}
.howjoin b{flex:none;width:26px;height:26px;border-radius:50%;background:#2C2B2E;color:var(--d1);font:600 13px/26px var(--mono);text-align:center}
.howjoin strong{color:var(--d1)}
.join .note{line-height:1.75}

/* footer */
.foot{background:var(--sumi);padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 28px)}
.foot-in{border-top:1px solid #2C2B2E;padding-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.f-brand{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}
.f-brand .mono{font-size:11px;color:var(--d4);font-weight:400}
.foot-in>div{display:flex;flex-direction:column;gap:4px}
.foot .h{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--d4);margin-bottom:6px}
.foot a{min-height:40px;display:flex;align-items:center;font-size:13px;color:var(--d2);text-decoration:none;word-break:break-all}
.foot .op{font-size:12px;color:var(--d4);margin-top:6px}
.foot-in>div:last-child{grid-column:1/-1}

/* ---------- 768px and up: the PC layout (scaled down to 1199px) ---------- */
@media (min-width:768px){
  :root{--pad:40px}
  body{font-size:17px}
  .pc-only{display:revert!important}
  .btn.pc-only,a.pill{display:flex!important}
  .sp-only{display:none!important}
  .top{padding:28px var(--pad)}
  .logo{width:200px;height:25.6px;background:url(assets/logo.jpeg) -172.8px -520px / 537.6px auto no-repeat}
  .pill{height:48px;padding:0 26px;font-size:15px}
  .hero{padding:72px var(--pad) 88px}
  .kumite-bg{display:block;position:absolute;right:-24px;top:40px;font-family:'ArchivoC',sans-serif;font-weight:900;font-size:min(23.6vw,340px);line-height:.82;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px #3E3D44;text-align:right;white-space:nowrap;pointer-events:none}
  .hero-in{align-items:flex-start;text-align:left;gap:28px}
  .tag{font-size:14px;gap:10px}
  .tag i{width:8px;height:8px}
  .hero h1{font-size:44px;line-height:1.38;letter-spacing:-.015em}
  .lead{font-size:19px;line-height:1.9}
  .cta{flex-direction:row;align-items:center;flex-wrap:wrap;gap:20px;align-self:auto;margin-top:0}
  .btn{height:60px;padding:0 32px;border-radius:18px;font-size:17px}
  .btn.ghost{height:60px;padding:0 26px;font-size:16px}
  .btn.soft{height:56px;font-size:16px}
  .note{font-size:14px}
  .intro{padding:0 var(--pad) 120px;gap:20px}
  .vbox{border-radius:28px;box-shadow:14px 14px 32px #0A0A0B,-10px -10px 28px #2C2B2E}
  .vsnd{right:24px;bottom:24px;height:52px;padding:0 21px;font-size:15px}
  .vcap{padding:0}
  .vcap strong{font-size:18px}
  .vcap .mono{font-size:13px}
  .light section{padding:0 var(--pad) 128px;gap:40px}
  .light h2{font-size:40px;line-height:1.4}
  .light p{line-height:2}
  .why{padding-top:128px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px!important;align-items:center}
  .why-text{gap:28px}
  .why h2{font-size:min(40px,calc((100vw - 2 * var(--pad) - 64px) / 2 / 13.6))}   /* 「もっとシュッと突け」が、 stays one line in its half */
  .chips{gap:14px}
  .chips span{padding:12px 20px;font-size:17px}
  .data{margin-top:0}
  .data-cap{font-size:15px}
  .data-label{font-size:18px;margin-top:24px}
  .big{gap:12px;padding:6px 0 30px}
  .big .mono{font-size:clamp(110px,11.4vw,164px)}
  .big .unit{font-size:32px}
  .pair div{gap:10px;padding:24px 0}
  .pair div:last-child{padding-left:32px}
  .pair div>span:first-child{font-size:15px}
  .num{font-size:52px}
  .num small{font-size:17px;margin-left:6px}
  .head{gap:16px}   /* tablet: heading above its note; side by side from 1200px */
  .head p{max-width:440px}
  .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .steps>div{display:flex;flex-direction:column;gap:16px;padding:28px 0 0;border-top:2px solid var(--ink)}
  .n{font-size:128px}
  .st{gap:16px}
  .st strong{font-size:24px;margin-top:8px}
  .st span{font-size:16px;line-height:1.85}
  .scene{width:100%;margin:0;aspect-ratio:2041/770;border-radius:28px}
  .for{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:64px!important}
  .for li{padding:22px 0;font-size:20px}
  .for .small{font-size:15px;line-height:1.9}
  .tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .tl>div{padding:24px 0 0;gap:12px;border-top:2px solid var(--ink)}
  .tl>div.dev,.tl>div.idea{border-top-color:var(--d4)}
  .tl>div.idea{border-top-style:dashed}
  .tl>div::before,.tl .dot{display:none}
  .badge{font-size:12px;padding:6px 10px}
  .tl strong{font-size:22px}
  .tl>div>span:last-child{font-size:15px;line-height:1.8}
  .ig{padding-bottom:120px!important;gap:32px!important}
  .ig-id{gap:20px}
  .ig-mark{width:72px;height:72px;box-shadow:5px 5px 12px #B9BEC7,-5px -5px 12px #FFF}
  .ig-mark i{width:31.3px;height:38px;transform:translateX(1.4px);background:url(assets/mark.jpeg) -27.6px -38.2px / 86px auto no-repeat}
  .ig-id strong{font-size:22px;font-weight:600}
  .ig-id>span:last-child>span{font-size:14px}
  .grid6{gap:16px}
  .grid6 img{border-radius:16px}
  .join{padding:120px var(--pad) 72px;align-items:center;text-align:center;gap:24px}
  .mark-big{display:block;width:79.1px;height:96px;background:url(assets/mark.jpeg) -69.7px -96.5px / 217.2px auto no-repeat}
  .join h2{font-size:40px;line-height:1.4;letter-spacing:-.015em}
  .join>p{font-size:18px;line-height:1.9}
  .howjoin{text-align:left;max-width:640px;gap:14px}
  .howjoin li{font-size:16px}
  .cta.center{justify-content:center}
  .foot{padding:0 var(--pad) 56px}
  .foot-in{padding-top:48px;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
  .f-brand,.foot-in>div:last-child{grid-column:auto}
  .f-brand{gap:18px}
  .f-brand .logo{width:175px;height:22.4px;background:url(assets/logo.jpeg) -151.2px -455px / 470.4px auto no-repeat}
  .f-brand .mono{font-size:12px}
  .foot-in>div{gap:6px}
  .foot a{min-height:32px;font-size:14px}
}
/* ---------- 1200px and up: the PC design as drawn (1440px canvas, content up to 1280px) ---------- */
@media (min-width:1200px){
  :root{--pad:max(80px,calc((100vw - var(--wrap)) / 2))}
  .hero h1{font-size:54px}
  .light h2{font-size:48px}
  .why h2{font-size:min(48px,calc((100vw - 2 * var(--pad) - 96px) / 2 / 13.6))}
  .join h2{font-size:52px}
  .why{gap:96px!important}
  .for{gap:80px!important}
  .head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px}
  .steps,.tl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid6{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* the app pages in the site (FAQ / terms / privacy) */
.doc{background:var(--washi);min-height:70vh;padding:40px var(--pad) 72px}
.doc-in{max-width:760px;margin:0 auto}
.doc h1{font-size:28px;line-height:1.4;letter-spacing:-.01em}
.doc .ver{display:block;margin:10px 0 28px;font:500 12px var(--mono);color:var(--ink2)}
.doc section{padding:22px 0;border-top:1px solid var(--line)}
.doc h2{font-size:18px;line-height:1.5;margin-bottom:10px}
.doc p{font-size:15px;line-height:1.9;color:var(--ink3);margin:0 0 6px}
.doc details{border-top:1px solid var(--line);padding:16px 0}
.doc summary{font-weight:700;cursor:pointer;line-height:1.6}
.doc details p{margin-top:10px}
@media (min-width:768px){.doc{padding:64px var(--pad) 96px}.doc h1{font-size:40px}.doc h2{font-size:20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}