:root{
  --blue:#2B4BDF;
  --blue-bright:#4D7CFF;
  --blue-deep:#1B2FA0;
  --ink:#0A0F2C;
  --ink-soft:#4A5170;
  --paper:#FFFFFF;
  --tint:#F4F7FE;
  --tint2:#E7EDFB;
  --line:#E4E9F5;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--blue);color:#fff}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--paper);line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{font-family:'Space Grotesk','Noto Sans JP',sans-serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.65,.25,1),transform .9s cubic-bezier(.2,.65,.25,1)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* hairline-reveal: gap:1px+背景(--line)で罫線を描くグリッドでは、セル自体を透明から出すと
   現れる前の間だけ --line の青灰色がベタで見え「読み込み中に青くなる」ように見える(2026-09-07 ユーザー指摘)。
   セルは最初から不透明にしておき、中身(子要素)だけをリビールさせる。遅延はセルの inline の transition-delay を継承 */
.v-grid>[data-reveal],.philo>[data-reveal],.mlist.three>[data-reveal],.pt-grid>[data-reveal],.contact-grid>[data-reveal],.mission-cards>[data-reveal]{opacity:1;transform:none}
.v-grid>[data-reveal]>*,.philo>[data-reveal]>*,.mlist.three>[data-reveal]>*,.pt-grid>[data-reveal]>*,.contact-grid>[data-reveal]>*,.mission-cards>[data-reveal]>*{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.65,.25,1),transform .9s cubic-bezier(.2,.65,.25,1);transition-delay:inherit}
.v-grid>[data-reveal].in>*,.philo>[data-reveal].in>*,.mlist.three>[data-reveal].in>*,.pt-grid>[data-reveal].in>*,.contact-grid>[data-reveal].in>*,.mission-cards>[data-reveal].in>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.v-grid>[data-reveal]>*,.philo>[data-reveal]>*,.mlist.three>[data-reveal]>*,.pt-grid>[data-reveal]>*,.contact-grid>[data-reveal]>*,.mission-cards>[data-reveal]>*{opacity:1;transform:none;transition:none}}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:200;transition:transform .4s ease,background .3s;background:transparent}
/* スクロール後のヘッダーは完全な白。rgba(...,.97) だと背後の見出しや写真が薄く透けて
   汚れのように見え、さらに 1px のヘアラインが「白地に浮いた線」として目立っていた
   (2026-09-07 ユーザー指摘)。不透明にすれば境界は自明なので線そのものを外す。 */
header.solid{background:#fff}
.header-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:90px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.header-in .logo{flex:0 0 auto;display:flex;align-items:center}
.header-in .logo img{height:32px;width:auto;max-width:none}
.header-in .btn{min-width:170px}
@media(max-width:560px){.header-in .btn{min-width:0}}
@media(max-width:560px){.header-in{height:74px}.header-in .logo img{height:28px}}
nav{display:flex;align-items:center;gap:34px;font-size:.86rem;font-weight:700}
.nav-links{display:flex;gap:34px}
.nav-links a{position:relative;padding:4px 0;letter-spacing:.04em}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.65,.25,1)}
@media(hover:hover){.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}}
@media(max-width:900px){.nav-links{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#fff;font-weight:700;padding:15px 34px;border-radius:10px;font-size:.9rem;transition:background .25s,transform .25s;letter-spacing:.02em}
.btn .arr{display:inline-block;transition:transform .3s}
@media(hover:hover){.btn:hover{background:var(--blue);transform:translateY(-2px)}}
@media(hover:hover){.btn:hover .arr{transform:translateX(5px)}}
.btn.small{padding:11px 24px;font-size:.82rem;border-radius:8px}
.btn.blue{background:var(--blue)}
@media(hover:hover){.btn.blue:hover{background:var(--blue-deep)}}
.btn.line{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
@media(hover:hover){.btn.line:hover{background:var(--ink);color:#fff}}
.btn.line.w{border-color:rgba(255,255,255,.55);color:#fff}
@media(hover:hover){.btn.line.w:hover{background:#fff;color:var(--ink)}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 60px;overflow:hidden;background:var(--paper)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg::before{content:"";position:absolute;top:0;bottom:0;right:0;width:37%;background:var(--tint)}
.hero-bg::after{content:"";position:absolute;top:0;bottom:0;right:37%;width:1px;background:var(--line)}
@media(max-width:1020px){.hero-bg::before,.hero-bg::after{display:none}}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-kicker{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:.8rem;letter-spacing:.28em;color:var(--blue);margin-bottom:30px}
.hero-kicker::before{content:"";width:38px;height:2px;background:var(--blue)}
.hero h1{font-weight:900;font-size:clamp(2.7rem,7.6vw,6rem);line-height:1.22;letter-spacing:.01em;text-shadow:0 0 16px rgba(255,255,255,.9),0 0 40px rgba(255,255,255,.85)}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row span{display:inline-block;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.65,.2,1) forwards}
.hero h1 .row:nth-child(2) span{animation-delay:.12s}
.hero h1 .g{color:var(--blue)}
@keyframes rise{to{transform:none}}
@media(prefers-reduced-motion:reduce){.hero h1 .row span{transform:none;animation:none}}
.hero h1 .sp-br{display:none}
/* 狭い画面では1行目(8.95em)が入りきらず「に、」だけが落ちていた。450px以下は
   改行位置を自分で決めて4行にし、そのぶん字を大きくする。最長行は「まなびを。」の5.05em。
   従来は clamp の下限 2.7rem=43.2px が効きっぱなしで、375pxではセクション見出し(41.6px)と
   ほぼ同寸になりメインタイトルに見えなかった。 */
@media(max-width:450px){
  .hero h1{font-size:min(3.4rem,calc((100vw - 64px) / 5.3))}
  .hero h1 .sp-br{display:inline}}

.hero-sub{max-width:560px;margin-top:36px;color:var(--ink-soft);font-size:1rem}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px}
.hero-stats{display:flex;flex-wrap:wrap;margin-top:70px;border-top:1px solid var(--line);max-width:820px}
.hero-stats .hs{padding:24px 46px 0 0;margin-right:46px;display:flex;flex-direction:column}
.hero-stats .hs:not(:last-child){border-right:1px solid var(--line)}
@media(max-width:700px){.hero-stats .hs{padding-right:24px;margin-right:24px}}
.hero-stats .v{font-weight:700;font-size:2.1rem;line-height:1.1;color:var(--ink)}
.hero-stats .v i{font-style:normal;font-size:.9rem;font-weight:700;color:var(--blue);margin-left:2px}
.hero-stats .k{font-size:.76rem;color:var(--ink-soft);margin-top:8px;letter-spacing:.02em}
.hero-art{position:absolute;right:max(8px,calc((100vw - 1180px)/2 - 40px));top:55%;transform:translateY(-50%);width:min(31vw,460px);z-index:1;pointer-events:none}
@media(max-width:1020px){.hero-art{display:none}}
.hero-art svg{width:100%;height:auto;overflow:visible}
.hero-art .f{animation:floaty 7s ease-in-out infinite;transform-box:fill-box}
.hero-art .f2{animation-delay:1.4s}
.hero-art .f3{animation-delay:2.8s}
.hero-art .f4{animation-delay:.7s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.hero-art .f{animation:none}}
.hero-scroll{position:absolute;left:32px;bottom:28px;font-size:.68rem;letter-spacing:.34em;color:var(--ink-soft);display:flex;align-items:center;gap:12px;z-index:3}
.hero-scroll::after{content:"";width:60px;height:1px;background:var(--ink-soft);transform-origin:left;animation:scrollhint 2s ease-in-out infinite}
@keyframes scrollhint{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}

/* マーキー(濃紺の帯)を外したので、ヒーローと次のセクションの境界が無くなった。
   サイト共通の区切り(ヘアライン)で受け直す */
#mission{border-top:1px solid var(--line)}        /* careers: ヒーロー直後 */
.page-hero + section{border-top:1px solid var(--line)}  /* about / contact: ヒーロー直後 */
#prod-list,#philosophy{border-top:0}   /* product / about はヒーロー直後に仕切りを入れない */
.page-hero-particles + section{border-top:0}   /* contact: パーティクル背景のヒーロー直後にも線を入れない(2026-09-07 ユーザー指示) */

/* ---------- section shell ---------- */
section{position:relative;padding:140px 0}
.sec-head{display:flex;align-items:baseline;gap:24px;margin-bottom:20px;flex-wrap:wrap}
.sec-index{font-weight:700;font-size:.88rem;color:var(--blue)}
.sec-en{font-weight:700;font-size:clamp(2.6rem,6.4vw,4.8rem);letter-spacing:-.01em;line-height:1;text-transform:uppercase;color:var(--ink)}
.sec-en.ghost{color:var(--ink);-webkit-text-stroke:0}
.sec-jp{font-size:1rem;font-weight:700;color:var(--ink-soft)}
.sec-lead{max-width:720px;color:var(--ink-soft);font-size:.98rem;margin-top:20px}

/* ---------- mission ---------- */
#mission{border-bottom:1px solid var(--line)}
.mission-cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:70px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.mission-cards{grid-template-columns:1fr}}
.m-card{position:relative;padding:52px 46px;background:#fff;overflow:hidden;transition:background .3s}
@media(hover:hover){.m-card:hover{background:var(--tint)}}
.m-card .idx{font-weight:700;font-size:.875rem;letter-spacing:.2em;color:var(--blue);margin-bottom:22px}
.m-card h3{font-size:1.35rem;font-weight:900;line-height:1.6;margin:12px 0 18px;max-width:20em}
.m-card p{color:var(--ink-soft);font-size:.93rem}
.m-card .tag{display:inline-block;background:var(--ink);color:#fff;font-weight:700;font-size:.74rem;padding:5px 16px;border-radius:6px;letter-spacing:.1em}
.goal-band{margin-top:80px;background:var(--ink);color:#fff;padding:64px 56px;position:relative;overflow:hidden;border-radius:14px}
.goal-band::after{content:"100M";position:absolute;right:-14px;bottom:-44px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(77,124,255,.35);pointer-events:none}
.goal-band strong{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:900;display:block;line-height:1.6}
.goal-band p{color:rgba(255,255,255,.72);font-size:.92rem;max-width:600px;margin-top:14px}
/* モバイルは 11rem のままだと "100M" が幅463pxでカード外にはみ出し、
   overflow:hidden で左右が切れて読めなくなる。幅に追従させて全体を見せる */
@media(max-width:700px){.goal-band{padding:44px 30px}
  .goal-band::after{font-size:clamp(6rem,30vw,11rem);right:-8px;bottom:-22px}}

/* ---------- numbers ---------- */
.numbers{background:var(--ink);color:#fff;padding:150px 0}
.numbers .sec-en{color:#fff}
.numbers .sec-index{color:#fff}
.numbers .sec-jp{color:rgba(255,255,255,.55)}
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border-top:1px solid rgba(255,255,255,.14)}
@media(max-width:960px){.num-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.num-grid{grid-template-columns:1fr}}
.num-cell{padding:44px 28px 40px;border-bottom:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14);transition:background .3s}
@media(hover:hover){.num-cell:hover{background:rgba(255,255,255,.04)}}
.num-cell:nth-child(3n){border-right:none}
@media(max-width:960px){.num-cell:nth-child(2n){border-right:none}.num-cell:nth-child(4n-1){border-right:1px solid rgba(255,255,255,.14)}}
.num-cell .v{font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-weight:700;font-size:clamp(2.5rem,4.6vw,3.7rem);line-height:1.1;color:#fff}
.num-cell .v small{font-size:42%;font-weight:700;color:#fff;margin-left:4px;white-space:nowrap}
.num-cell .k{margin-top:12px;font-size:.83rem;color:rgba(255,255,255,.6);line-height:1.7}

/* 白背景のセクションでも数字を使えるようにした明色版（product の導入実績で使用）。
   既定の .num-cell は濃紺の .numbers 用に白文字なので、色と罫線だけ差し替える */
.num-grid.light{grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.num-grid.light .num-cell{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:52px 32px 48px}
.num-grid.light .num-cell:last-child{border-right:0}
.num-grid.light .num-cell .v{color:var(--ink);font-size:clamp(3rem,6vw,5rem)}
.num-grid.light .num-cell .v small{color:var(--blue)}
.num-grid.light .num-cell .k{color:var(--ink-soft)}
@media(max-width:700px){.num-grid.light{grid-template-columns:1fr}.num-grid.light .num-cell{border-right:0}}
.num-note{margin-top:28px;text-align:right;font-size:.74rem;color:rgba(255,255,255,.35)}

/* ---------- business ---------- */
#business{background:var(--tint)}
.biz-list{margin-top:76px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.biz-row{display:grid;grid-template-columns:110px 1fr 1.3fr;gap:32px;padding:52px 46px;border-bottom:1px solid var(--line);align-items:start;transition:background .3s;position:relative}
.biz-row:last-child{border-bottom:none}
@media(hover:hover){.biz-row:hover{background:var(--tint)}}
@media(max-width:820px){.biz-row{grid-template-columns:1fr;gap:14px;padding:36px 26px}}
.biz-row .no{font-weight:700;font-size:.95rem;color:var(--blue);padding-top:6px}
.biz-row h3{font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:900;line-height:1.5}
.biz-row h3 small{display:block;font-weight:700;font-size:.76rem;color:var(--blue);letter-spacing:.16em;margin-bottom:10px}
.biz-row .desc{color:var(--ink-soft);font-size:.92rem}
.biz-row .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{background:var(--tint);border:1px solid var(--tint2);color:var(--blue);font-size:.75rem;font-weight:700;border-radius:6px;padding:4px 14px;letter-spacing:.04em}

/* ---------- values ---------- */
.values{background:#fff}
.high3{display:flex;gap:12px;flex-wrap:wrap;margin:60px 0 20px}
.high3 span{background:var(--ink);color:#fff;border-radius:8px;padding:13px 30px;font-weight:700;font-size:.95rem;transition:.3s;letter-spacing:.03em}
@media(hover:hover){.high3 span:hover{background:var(--blue);transform:translateY(-3px)}}
.v-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:40px;background:var(--line);border:1px solid var(--line)}
@media(max-width:960px){.v-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.v-grid{grid-template-columns:1fr}}
.v-card{background:#fff;padding:40px 34px;position:relative;overflow:hidden;transition:background .3s}
.v-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.2,.65,.25,1)}
@media(hover:hover){.v-card:hover{background:var(--tint)}}
@media(hover:hover){.v-card:hover::before{transform:scaleY(1)}}
.v-card .q{font-weight:700;font-size:1rem;color:var(--blue);margin-bottom:10px;display:block;letter-spacing:.02em}
.v-card h3{font-size:1.12rem;font-weight:900;margin-bottom:12px}
.v-card p{color:var(--ink-soft);font-size:.87rem}

/* ---------- stories ---------- */
#stories{background:var(--tint)}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:70px}
@media(max-width:1000px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.story-grid{grid-template-columns:1fr}}
.story-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.65,.25,1),box-shadow .4s,border-color .3s;position:relative;overflow:hidden}
.story-card .thumb{display:block;aspect-ratio:1280/670;overflow:hidden;background:var(--tint);border-bottom:1px solid var(--line)}
.story-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.65,.25,1)}
@media(hover:hover){.story-card:hover .thumb img{transform:scale(1.04)}}
.story-card .body{display:flex;flex-direction:column;gap:16px;padding:28px 30px 32px;flex:1}
@media(hover:hover){.story-card:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 20px 50px rgba(10,15,44,.08)}}
.story-card .cat{font-weight:700;font-size:.72rem;letter-spacing:.22em;color:var(--blue)}
.story-card h3{font-size:1rem;font-weight:700;line-height:1.75}
.story-card .more{margin-top:auto;font-weight:700;font-size:.84rem;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.story-card .more .arr{transition:transform .3s}
@media(hover:hover){.story-card:hover .more .arr{transform:translateX(6px)}}
.story-cta{margin-top:44px}

/* ---------- team ---------- */
.team{background:#fff;color:var(--ink);padding:150px 0;border-top:1px solid var(--line)}
.mlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:46px 30px;margin-top:76px}
@media(max-width:1000px){.mlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}}
@media(max-width:560px){.mlist{grid-template-columns:1fr}}
.mcard img{width:68%;max-width:180px;margin-inline:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--tint);border:1px solid var(--line);border-radius:50%}
.mcard{display:flex;flex-direction:column}
.mcard h3{font-weight:900;font-size:1.2rem;color:var(--ink);margin-top:22px;line-height:1.4}
.mcard .role{color:var(--ink);font-weight:700;font-size:.8rem;line-height:1.6;margin-top:8px}
.mcard p{color:var(--ink-soft);font-size:.85rem;line-height:1.95;margin-top:16px}
.mcard .mlink{color:var(--blue);font-size:.8rem;font-weight:700;align-self:flex-start;margin-top:auto;padding-top:14px}
/* founder (1+3) */
/* Management: 四角ベース(角丸なし・ヘアライン罫線・白地・ホバー淡青)に統一(2026-09-07 ユーザー指示) */
.founder{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start;margin-top:76px;padding:44px;border:1px solid var(--line);background:#fff;position:relative;z-index:2}
.founder-ph{aspect-ratio:4/5;overflow:hidden;background:#fff;border:1px solid var(--line)}
.founder-ph img{width:100%;height:100%;object-fit:cover;object-position:56% 25%}
.founder .cat{font-weight:700;font-size:.72rem;letter-spacing:.22em;color:var(--blue)}
.founder h3{font-weight:900;font-size:2.1rem;line-height:1.15;margin-top:12px;color:var(--ink)}
.founder .jp{font-weight:700;font-size:.9rem;color:var(--ink-soft);margin-top:4px}
.founder-lead{font-weight:700;font-size:1.25rem;line-height:1.6;margin-top:20px;color:var(--ink)}
.founder p:not(.founder-lead){color:var(--ink-soft);font-size:.9rem;line-height:1.95;margin-top:14px}
.founder .btn{margin-top:26px}
.mlist.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px;position:relative;z-index:2}
.mlist.three .mcard{background:#fff;padding:36px 32px 38px;transition:background .3s}
@media(hover:hover){.mlist.three .mcard:hover{background:var(--tint)}}
.mlist.three .mcard img{width:128px;max-width:none;margin-inline:0;aspect-ratio:1/1;border-radius:0;background:#fff;object-position:50% 20%}
.mlist.three .mcard .role{margin-top:24px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:700;line-height:1.6}
.mlist.three .mcard h3{font-size:1.35rem;margin-top:10px}
.mlist.three .mcard p{margin-top:14px}
.mlist.three .mcard .mlink{padding-top:18px}
/* モバイルでは Management 全員の写真を中央揃え(2026-09-07 ユーザー指示)。テキストは左揃えのまま */
@media(max-width:900px){.founder{grid-template-columns:1fr;gap:30px;padding:28px}.founder-ph{max-width:220px;margin-inline:auto;width:100%}.mlist.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* gap:1px+背景(--line)で罫線を描く手法は、セル数が列数の倍数でないと
   余ったマスに --line がベタで出る。カードの大きさは揃えたままにしたいので、
   最後の1枚が単独で余る場合(:has で判定)だけ、白いセルを1つ差し込んで塞ぐ。
   人数が偶数になれば :has が外れて自動的に無効になる。 */
@media(max-width:900px) and (min-width:561px){
  .mlist.three:has(.mcard:last-child:nth-child(odd))::after{content:"";background:#fff}}
@media(max-width:560px){.founder{padding:22px}.founder h3{font-size:1.7rem}.mlist.three{grid-template-columns:1fr}.mlist.three .mcard img{margin-inline:auto}}

/* ---------- faq ---------- */
#faq{border-bottom:1px solid var(--line)}
.faq-list{margin-top:64px;max-width:880px}
details{border-top:1px solid var(--line);padding:28px 8px}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;display:flex;align-items:center;gap:20px;transition:color .2s}
summary::-webkit-details-marker{display:none}
@media(hover:hover){summary:hover{color:var(--blue)}}
summary .qm{font-weight:700;color:var(--blue);font-size:1.1rem;flex-shrink:0}
summary .plus{margin-left:auto;flex-shrink:0;width:26px;height:26px;position:relative}
summary .plus::before,summary .plus::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transition:transform .35s}
summary .plus::before{width:16px;height:2px;transform:translate(-50%,-50%)}
summary .plus::after{width:2px;height:16px;transform:translate(-50%,-50%)}
details[open] summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details p{margin-top:16px;color:var(--ink-soft);font-size:.92rem;padding-left:42px}
.todo{background:#FFF3D6;color:#8A5C00;font-size:.76rem;font-weight:700;border-radius:5px;padding:2px 10px;margin-right:8px}

/* ---------- jobs ---------- */
.jobs{padding-bottom:160px}
.job-list{margin-top:76px}
.job-row{display:grid;grid-template-columns:96px 1fr auto;gap:26px;align-items:center;padding:38px 12px;border-top:1px solid var(--line);transition:background .3s,padding .3s;position:relative}
.job-row:last-child{border-bottom:1px solid var(--line)}
@media(hover:hover){.job-row:hover{background:var(--tint);padding-left:30px}}
@media(max-width:700px){.job-row{grid-template-columns:1fr;gap:8px}.job-row .go{display:none}}
.job-row .no{font-weight:700;color:var(--blue);font-size:.95rem}
.job-row h3{font-size:1.28rem;font-weight:900}
.job-row h3 small{display:block;font-weight:500;font-size:.83rem;color:var(--ink-soft);margin-top:8px;line-height:1.8}
.job-row .go{width:54px;height:54px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:.3s}
@media(hover:hover){.job-row:hover .go{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(-45deg)}}

/* ---------- join band ---------- */
.join{background:var(--blue-deep);color:#fff;padding:130px 0;position:relative;overflow:hidden}
.join::before{content:"";position:absolute;right:-14vw;top:-30vw;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(circle,rgba(77,124,255,.4),transparent 62%)}
.join .wrap{position:relative;z-index:1}
.join .big{font-weight:700;font-size:clamp(3.2rem,10.5vw,8rem);line-height:1;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.75);white-space:nowrap}
.join .big .fill{color:#fff;-webkit-text-stroke:0}
@media(max-width:760px){.join .big{white-space:normal;font-size:clamp(2.8rem,14vw,4rem);line-height:1.1}}
.join p{margin:30px 0 44px;color:rgba(255,255,255,.85);max-width:620px;font-size:.98rem}
.join-ctas{display:flex;gap:14px;flex-wrap:wrap}
.join .btn{background:#fff;color:var(--blue-deep)}
@media(hover:hover){.join .btn:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}}
.join .btn.line.w{background:transparent;color:#fff}
@media(hover:hover){.join .btn.line.w:hover{background:#fff;color:var(--blue-deep)}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.7);padding:84px 0 44px;font-size:.86rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}
footer .flogo{height:26px;width:auto;margin-bottom:22px}
footer h4{color:#fff;font-size:.76rem;font-weight:700;margin-bottom:18px;letter-spacing:.24em}
footer dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px}
footer dt{color:rgba(255,255,255,.42);white-space:nowrap}
footer li{list-style:none;margin-bottom:12px}
footer a{transition:color .2s}
@media(hover:hover){footer a:hover{color:var(--blue-bright)}}
.copyright{padding-top:32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.35);font-size:.75rem}

/* ---------- global nav active ---------- */
.nav-links a.on{color:var(--blue)}
.nav-links a.on::after{transform:scaleX(1)}

/* ---------- subpage hero ---------- */
.page-hero{position:relative;padding:190px 0 90px;background:var(--paper);overflow:hidden}

/* about / product のパーティクル用。ヒーローを透過させて背後の canvas を見せ、
   下の不透明セクションで蓋をする(ホームの #customers と同じ役割)。 */
/* about / product のパーティクルは"ヒーローの中だけ"に閉じる。
   本文の上や背後に敷くと読ませたいものと競合するため（ホームと同じ「ヒーローが舞台」の使い方）。 */
.page-hero-particles{background:transparent}
/* 右30%の淡青パネル(.page-hero::before)と境界線(::after)は、パーティクルと競合するので消す。
   背景は白で統一し、動くのは粒だけにする。 */
.page-hero-particles::before,.page-hero-particles::after{display:none}
/* about / product は画面に固定してスクロールに追従させつつ、z-index を負にして本文の"背面"に置く。
   粒が文字の上に乗らず、不透明な背景を持つセクションが自動的に蓋になる。
   (ホーム用の #webgl-canvas は z-index:1 で後ろに定義されているため、クラス付きで上書きしている) */
#webgl-canvas.behind{z-index:-1}
/* 白背景のセクションはパーティクルを通す。body も白なので見た目は変わらず、粒だけが背後に見える。
   淡青(--tint)や濃紺のセクションはそのまま蓋として機能させ、出る/出ないのリズムを作る。
   :has() でパーティクルのあるページ(about/product)だけに限定している(careers等には影響しない)。 */
body:has(#webgl-canvas.behind) .team{background:transparent}
.page-hero::before{content:"";position:absolute;top:0;bottom:0;right:0;width:30%;background:var(--tint)}
.page-hero::after{content:"";position:absolute;top:0;bottom:0;right:30%;width:1px;background:var(--line)}
@media(max-width:1020px){.page-hero::before,.page-hero::after{display:none}}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-weight:700;font-size:clamp(3.3rem,7vw,5.2rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.page-hero .jp{display:block;font-size:1.05rem;font-weight:700;color:var(--ink-soft);margin-top:18px;letter-spacing:.06em}
.page-hero .lead{max-width:640px;margin-top:26px;color:var(--ink-soft);font-size:.98rem}

/* ---------- product ---------- */
/* ---------- product hero: レイヤー図 + 対象セグメント表 ---------- */
/* SVG1枚だったものを「積層図(SVG)+凡例(HTML)」に分離。モバイルで文字が縮まないようにするため(2026-09-07) */
.prod-hero-art{margin:80px auto 0;max-width:900px;display:grid;grid-template-columns:minmax(0,450fr) minmax(0,434fr);gap:0 18px;align-items:center}
.prod-hero-art svg{width:100%;height:auto;overflow:visible}
.prod-legend{align-self:center}
.pl-head,.pl-row{display:grid;grid-template-columns:124px minmax(0,1fr);gap:0 0}
.pl-head{font-size:.63rem;font-weight:700;color:#9AA1BC;letter-spacing:.14em;line-height:1;padding-bottom:16px}
.pl-row{align-items:center;padding:15px 0}
.pl-row+.pl-row{border-top:1px solid var(--line)}
.pl-row dt{line-height:1.5}
.pl-row dt b{display:block;font-size:.94rem;font-weight:700;letter-spacing:.07em;color:var(--ink)}
.pl-row dt span{display:block;font-size:.72rem;color:var(--ink-soft)}
.pl-row dd{display:flex;flex-wrap:wrap;gap:5px}
.pl-row dd span{background:#EFF3FD;color:var(--blue);font-size:.7rem;font-weight:700;line-height:1;padding:7px 11px;border-radius:999px;white-space:nowrap}
.pl-row .pl-note{display:block;font-size:.72rem;color:var(--ink-soft)}
.pl-row-base dt b{white-space:nowrap}
@media(max-width:760px){
  .prod-hero-art{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:44px}
  .prod-stack{max-width:400px;margin:0 auto}
  .pl-head{display:none}
  .pl-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 0}
  .pl-row dt b{font-size:1rem}
  .pl-row dt span,.pl-row dd span,.pl-row .pl-note{font-size:.78rem}
}
/* プロダクトは1つ＝1画面。内容が入りきらない時は min-height を超えて伸びる */
.prod-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center;padding:104px 0}
/* 画像の縦横比の違いでセクション高さがばらつくため、2列表示のときは一番高いものに揃える */
@media(min-width:921px){.prod-section{min-height:735px}}
.prod-section:first-of-type{border-top:none}
@media(max-width:920px){.prod-section{grid-template-columns:minmax(0,1fr);gap:40px;padding:70px 0}}
.prod-section.rev .art{order:2}
@media(max-width:920px){.prod-section.rev .art{order:0}}
.prod-section:has(.art-photo){grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:64px}
.prod-section.rev:has(.art-photo){grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}

@media(max-width:920px){.prod-section:has(.art-photo),.prod-section.rev:has(.art-photo){grid-template-columns:minmax(0,1fr);gap:40px}}
.prod-section .art svg{width:100%;height:auto;overflow:visible}
.prod-section .art-photo{position:relative;min-width:0;display:flex;align-items:center;justify-content:center}
.prod-section .art-photo img{position:relative;display:block;width:100%;max-width:100%;height:auto;filter:drop-shadow(0 18px 34px rgba(10,15,44,.13))}
/* iOS Safari は filter:drop-shadow を掛けた画像が opacity のアニメーション(リビール)を通ると、
   画像の矩形全体に薄い灰色を描く(出たり消えたりする)。スマホ幅では影を外して回避(2026-09-07 ユーザー指摘) */
@media(max-width:920px){.prod-section .art-photo img{filter:none}}
.prod-section .no{font-weight:700;font-size:.9rem;color:var(--blue);letter-spacing:.2em;margin-bottom:14px;display:block}
.prod-section h3{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:900;line-height:1.5;margin-bottom:8px}
.prod-section h3 small{display:block;font-size:.8rem;font-weight:700;color:var(--blue);letter-spacing:.16em;margin-bottom:10px}
.prod-section .desc{color:var(--ink-soft);font-size:.95rem;margin-top:16px}
.feat-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:26px}
@media(max-width:560px){.feat-list{grid-template-columns:1fr}}
.feat-list li{list-style:none;font-size:.86rem;font-weight:500;color:var(--ink);display:flex;align-items:baseline;gap:10px}
.feat-list li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--blue);flex-shrink:0;transform:translateY(-1px)}

@media(max-width:820px){}

/* ---------- case cards ---------- */

/* ---------- company table ---------- */
.co-table{margin-top:70px;border-top:1px solid var(--line);max-width:880px}
.co-table .row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:24px 8px;border-bottom:1px solid var(--line)}
@media(max-width:600px){.co-table .row{grid-template-columns:1fr;gap:4px}}
.co-table dt{font-weight:700;font-size:.88rem;color:var(--blue)}
.co-table dd{font-size:.92rem;color:var(--ink)}

/* ---------- philosophy ---------- */
.philo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:70px}
@media(max-width:820px){.philo{grid-template-columns:1fr}}
.philo .ph-cell{background:#fff;padding:52px 40px;transition:background .3s}
@media(hover:hover){.philo .ph-cell:hover{background:var(--tint)}}
.philo .ph-cell .l{font-weight:700;font-size:.875rem;letter-spacing:.2em;color:var(--blue);display:block;margin-bottom:20px}
.philo .ph-cell h3{font-size:1.5rem;font-weight:900;line-height:1.6;margin-bottom:16px}
.philo .ph-cell p{color:var(--ink-soft);font-size:.92rem}

/* ---------- contact ---------- */
/* メール導線は角丸の帯(=部品)ではなく画面端まで抜くダークセクション。
   .numbers / .join と同じフルブリードの語彙に寄せ、巨大アウトライン CONTACT を
   .goal-band の "100M" と同じ device で右下にブリードさせる(2026-09-07 案A採用) */
.mail-band{background:var(--ink);color:#fff;padding:104px 0 112px;overflow:hidden}
.mail-band .wrap{position:relative;z-index:1}
.mail-band::after{content:"CONTACT";position:absolute;z-index:0;right:-26px;bottom:-72px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(7.5rem,23vw,15rem);line-height:1;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px rgba(77,124,255,.30);pointer-events:none}
.mail-band .l{display:block;font-weight:700;font-size:.78rem;letter-spacing:.22em;color:rgba(255,255,255,.58)}
.mail-band h3{font-size:clamp(1.6rem,4vw,2.7rem);font-weight:900;line-height:1.5;margin-top:20px;max-width:880px}
.mail-band .mlk{display:inline-flex;align-items:center;gap:14px;margin-top:38px;font-size:1.05rem;font-weight:700;color:#fff;border-bottom:2px solid var(--blue-bright);padding-bottom:9px;transition:gap .3s,border-color .3s}
@media(hover:hover){.mail-band .mlk:hover{gap:20px;border-color:#fff}}
.mail-band .mlk .arr{display:inline-block;transition:transform .3s}
@media(hover:hover){.mail-band .mlk:hover .arr{transform:translateX(4px)}}
@media(max-width:760px){.mail-band{padding:74px 0 80px}.mail-band::after{font-size:7.5rem;right:-14px;bottom:-34px}.mail-band h3 br{display:none}}   /* 狭幅では強制改行を解除して自然折り返しに */
@media(max-width:480px){.mail-band::after{font-size:5rem;right:-10px;bottom:-24px}}   /* CONTACT が両端で切れて別語に見えるのを防ぐ */
/* 理念カード(.philo)/プロダクトカード(.pt-grid)と同じ四角ベース: ヘアライン罫線グリッド・角丸なし・ホバーは淡青 */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:60px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:#fff;padding:52px 40px;transition:background .3s}
@media(hover:hover){.contact-card:hover{background:var(--tint)}}
.contact-card .l{font-weight:700;font-size:.72rem;color:var(--blue);letter-spacing:.22em}
.contact-card h4{font-size:1.08rem;font-weight:900;margin:12px 0 10px}
.contact-card p{color:var(--ink-soft);font-size:.86rem;margin-bottom:18px}
.contact-card .lk{font-weight:700;font-size:.86rem;color:var(--blue)}

/* ---------- product teaser (top) ---------- */
/* 理念カード(.philo)と同じ四角ベース: ヘアライン罫線グリッド・角丸なし・ホバーは淡青(2026-09-07 ユーザー指示) */
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:70px;position:relative;z-index:2}
@media(max-width:920px){.pt-grid{grid-template-columns:1fr}}
.pt-card{background:#fff;padding:52px 40px;display:flex;flex-direction:column;gap:16px;transition:background .3s}
@media(hover:hover){.pt-card:hover{background:var(--tint)}}
.pt-card .ic{width:56px;height:56px;border-radius:12px;background:var(--tint);display:flex;align-items:center;justify-content:center}
.pt-card .ic svg{width:30px;height:30px}
.pt-card h3{font-size:1.12rem;font-weight:900}
.pt-card h3 small{display:block;font-size:.72rem;font-weight:700;color:var(--blue);letter-spacing:.18em;margin-bottom:6px}
.pt-card p{color:var(--ink-soft);font-size:.87rem}
.pt-card .more{margin-top:auto;font-weight:700;font-size:.84rem;color:var(--blue)}

/* ---------- cta band (pages) ---------- */
.cta-band{background:var(--blue-deep);color:#fff;padding:100px 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-14vw;top:-30vw;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(circle,rgba(77,124,255,.4),transparent 62%)}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{font-weight:700;font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.2;letter-spacing:-.01em}
.cta-band p{margin:22px 0 36px;color:rgba(255,255,255,.85);max-width:620px;font-size:.95rem}
.cta-band .btn{background:#fff;color:var(--blue-deep)}
@media(hover:hover){.cta-band .btn:hover{background:var(--ink);color:#fff}}
.cta-band .btn.line.w{background:transparent;color:#fff}
@media(hover:hover){.cta-band .btn.line.w:hover{background:#fff;color:var(--blue-deep)}}

/* ---------- news list ---------- */
.news-list{margin-top:64px;border-top:1px solid var(--line)}
.news-row{display:grid;grid-template-columns:110px 130px 1fr auto;gap:22px;align-items:center;padding:26px 10px;border-bottom:1px solid var(--line);transition:background .3s,padding .3s}
@media(hover:hover){.news-row:hover{background:var(--tint);padding-left:22px}}
@media(max-width:760px){.news-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}.news-row .date{flex:0 0 auto}.news-row .ntag{flex:0 0 auto}.news-row .nt{flex:1 0 100%}.news-row .ext{display:none}}
.news-row .date{font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink-soft)}
.news-row .ntag{font-size:.7rem;font-weight:700;color:var(--blue);border:1px solid var(--tint2);background:var(--tint);border-radius:6px;padding:4px 10px;text-align:center;letter-spacing:.04em;white-space:nowrap}
.news-row .nt{font-size:.94rem;font-weight:700;line-height:1.7}
.news-row .ext{color:var(--blue);font-weight:700;transition:transform .3s}
@media(hover:hover){.news-row:hover .ext{transform:translate(3px,-3px)}}

/* ---------- customers logo grid ---------- */
.cust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:64px}
@media(max-width:960px){.cust-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.cust-grid{grid-template-columns:repeat(2,1fr)}}
.cust-cell{background:#fff;min-height:118px;display:flex;align-items:center;justify-content:center;padding:20px;transition:background .3s}
@media(hover:hover){.cust-cell:hover{background:var(--tint)}}
.cust-cell .wordmark{font-weight:900;font-size:1.15rem;color:#242B4A;letter-spacing:.04em;text-align:center;line-height:1.4}
.cust-cell .wordmark.en{font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-weight:700;letter-spacing:.06em}
.cust-cell img{max-height:44px;width:auto;max-width:80%}
.cust-note{margin-top:18px;font-size:.76rem;color:var(--ink-soft);text-align:right}
/* 投資家セルはロゴ画像ではなく社名テキスト。ロゴが揃ったら .cust-cell > img に戻す */
/* 社名は長短の差が大きいので折り返し前提。リンクなのでホバーも付ける */
.cust-cell.inv span{font-weight:700;font-size:.95rem;line-height:1.6;letter-spacing:.02em;color:var(--ink);text-align:center;text-wrap:balance}

/* 投資家は8セル(7社+海外投資家)で .four を使用。.three は3列用の予備 */
.cust-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cust-grid.three{grid-template-columns:repeat(2,1fr)}}

/* customers: 4列・実ロゴ */
.cust-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cust-grid.four{grid-template-columns:repeat(2,1fr)}}
.cust-cell.more{background:var(--tint)}
.cust-cell.more span{font-weight:700;color:var(--blue);font-size:.92rem;text-align:center;line-height:1.9;letter-spacing:.04em;/* 幅が足りる限り1行。折り返す場合も <wbr> の位置(複数の/海外投資家)だけで折る */word-break:keep-all}

/* hero art: 人物・情景を前面に(大きめ) */
.hero-art{width:min(40vw,600px);right:max(0px,calc((100vw - 1180px)/2 - 90px))}

/* ---------- photo marquee (CADDi style) ---------- */
.photo-band{overflow:hidden;padding:0;background:var(--paper)}
.photo-band .pb-track{display:flex;width:max-content;animation:pbscroll 30s linear infinite}
.photo-band .pb-track img{width:343px;height:214px;object-fit:cover;display:block;flex:none}
@keyframes pbscroll{to{transform:translateX(-50%)}}
@media(hover:hover){.photo-band:hover .pb-track{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.photo-band .pb-track{animation:none}}
@media(max-width:700px){.photo-band .pb-track img{width:240px;height:150px}}

/* ---------- hero particles: 全画面固定のWebGLパーティクル ---------- */
/* 移植元 manabiesite と同じ重なり方: canvas(z-index:1) が
   ヒーロー→About→Product の背後(Aboutは本文の上に薄く霧のように)まで残り、
   Customers 以降の白背景(z-index:2)で覆われて終わる。 */
.hero{overflow:hidden;padding:150px 0 min(20vw,190px);min-height:100svh;justify-content:flex-start}
/* ヒーロー高は 100svh(=画面の高さ)追従だが、コピーの高さは画面の幅で決まる。
   縦長タブレット(iPad Air縦 820x1180 等)では高さだけ伸びて CTA下に半分近い空白ができるため、
   縦向き かつ 601px以上(スマホは対象外。スマホはコピーが画面を埋めるので空白は9%)で上限をかける */
@media(max-aspect-ratio:1/1) and (min-width:601px){.hero{min-height:min(100svh,820px)}}
.hero-bg{display:none}
.hero .wrap{position:relative;z-index:2}
/* .hero は careers.html と共有しているため、透過は index 専用クラスに限定する */
.hero-particles{background:transparent}
#webgl-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}
#product-teaser .wrap{position:relative;z-index:1}
/* Customers も Media も透過のままにして、パーティクルをページ後半まで残す。
   蓋をするのは footer(濃紺)。手前で不透明度が 0.05 まで落ちるので消え方はなめらか。
   ロゴ壁だけは前面に出して視認性を保つ(マナビスが写真に z-index:2 を当てているのと同じ扱い)。 */
.cust-grid{position:relative;z-index:2}
/* About の理念カード(MISSION/VISION/PURPOSE)は不透明の白で前面に出す(2026-09-07 ユーザー指示「透過させない」) */
.philo{position:relative;z-index:2}
footer{position:relative;z-index:2}

/* 行が並ぶブロック(リスト/テーブル/数字)だけを不透明の白にする(2026-09-07 ユーザー指示)。
   セクションごと白で塗ると粒が早く消えてしまうので、蓋をするのは"読ませる矩形"の中だけ。
   余白側にはパーティクルが残る。index の canvas は z-index:1 なので z-index:2 が要る。
   about/product の canvas は .behind(z-index:-1) で背景色だけで足りるが、指定は揃えておく。 */
.news-list{position:relative;z-index:2;background:#fff}      /* index: お知らせ・メディア掲載 */
.co-table{position:relative;z-index:2;background:#fff}       /* about: 会社概要テーブル */
.num-grid.light{position:relative;z-index:2;background:#fff} /* product: 導入実績の数字 */

/* ---------- motion: セクション見出しの立ち上がり ---------- */
.sec-en{display:inline-block;overflow:hidden}
[data-reveal] .sec-en,.sec-head[data-reveal] .sec-en{will-change:transform}
.sec-head[data-reveal] .sec-en{transform:translateY(24px);opacity:0;transition:transform 1.1s cubic-bezier(.16,.84,.28,1) .05s,opacity 1.1s ease .05s}
.sec-head[data-reveal].in .sec-en{transform:none;opacity:1}
.sec-head[data-reveal] .sec-jp{opacity:0;transition:opacity .9s ease .35s}
.sec-head[data-reveal].in .sec-jp{opacity:1}

/* 数字のせり上がり */
.num-cell[data-reveal] .v{transform:translateY(18px);opacity:0;transition:transform 1s cubic-bezier(.16,.84,.28,1),opacity 1s ease}
.num-cell[data-reveal].in .v{transform:none;opacity:1}

/* ヒーロー文の順次フェード */
.hero-kicker{opacity:0;animation:fadeUp .9s ease .1s forwards}
.hero-sub{opacity:0;animation:fadeUp 1s ease .55s forwards}
.hero-ctas{opacity:0;animation:fadeUp 1s ease .75s forwards}
.hero-stats{opacity:0;animation:fadeUp 1s ease .95s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero-kicker,.hero-sub,.hero-ctas,.hero-stats{opacity:1;animation:none}
  .sec-head[data-reveal] .sec-en,.num-cell[data-reveal] .v{transform:none;opacity:1}
}

/* ---------- global expansion ---------- */

/* country rows */
.country-list{margin-top:70px;border-top:1px solid var(--line)}
.country{display:grid;grid-template-columns:180px 1fr 1.25fr;gap:32px;padding:44px 12px;border-bottom:1px solid var(--line);transition:background .3s}
@media(hover:hover){.country:hover{background:var(--tint)}}
@media(max-width:880px){.country{grid-template-columns:1fr;gap:14px;padding:34px 8px}}
.country .cn{font-size:1.35rem;font-weight:900;line-height:1.4}
.country .cn small{display:block;font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-size:.72rem;font-weight:700;color:var(--blue);letter-spacing:.2em;margin-bottom:8px}
.country .role{font-weight:700;font-size:.95rem;line-height:1.8}
.country .desc{color:var(--ink-soft);font-size:.9rem}
.country .kpi{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.country .kpi b{font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-size:1.15rem;color:var(--ink)}
.country .kpi span{font-size:.76rem;color:var(--ink-soft);display:block}
.country .kpi div{border-left:2px solid var(--blue);padding-left:12px}

/* country site link */
.country .sitelink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:.85rem;color:var(--blue);border-bottom:1.5px solid var(--tint2);padding-bottom:3px;transition:border-color .25s}
@media(hover:hover){.country .sitelink:hover{border-color:var(--blue)}}
.country .sitelink .ex{font-size:.9em}

/* ---------- careers hero: 3Dフォトカルーセル（CADDi careers 参照） ---------- */
.chero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center}
/* 中央にワード＋中央にカルーセル、という構図はやめて左右非対称に */
.chero-copy{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  left:max(24px,calc((100vw - var(--maxw))/2 + 32px));max-width:min(48vw,600px);pointer-events:none}
.chero-kicker{display:block;font-weight:700;font-size:.8rem;letter-spacing:.26em;color:var(--blue);margin-bottom:18px}
.chero-word{font-size:clamp(3.8rem,8.6vw,7.4rem);font-weight:700;line-height:.94;letter-spacing:-.03em;
  color:var(--ink);white-space:nowrap;user-select:none}
.chero-tag{margin-top:22px;font-size:clamp(1.1rem,2.1vw,1.7rem);font-weight:900;line-height:1.6;color:var(--ink)}
.chero-tag .g{color:var(--blue)}
.chero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;pointer-events:auto}
.chero-stage{position:absolute;inset:0;z-index:2;perspective:1200px;perspective-origin:73% 50%}
.chero::before{content:"";position:absolute;left:0;right:0;top:0;height:130px;z-index:3;pointer-events:none;background:linear-gradient(#fff 26%,rgba(255,255,255,.86) 55%,rgba(255,255,255,0))}
.chero-track{position:absolute;left:73%;top:50%;width:0;height:0;
  transform-style:preserve-3d;transform:rotateX(1deg) rotateZ(-6deg)}
.chero-card{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw)*1.5);
  margin:calc(var(--cw)*-0.65) 0 0 calc(var(--cw)/-2);
  border-radius:14px;overflow:hidden;background:#EFF3FD;
  box-shadow:0 24px 60px rgba(10,15,44,.20);
  animation:cflow var(--cdur) linear infinite;will-change:transform,opacity}
.chero{--cw:min(40vw,420px);--cdur:26s}
.chero-card img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes cflow{
  0%   {transform:translate3d(0,700px,-620px);opacity:0}
  9%   {opacity:1}
  50%  {transform:translate3d(0,0,0)}
  91%  {opacity:1}
  100% {transform:translate3d(0,-700px,-620px);opacity:0}
}
.chero-card:nth-child(1){animation-delay:calc(var(--cdur) / -9 * 0)}
.chero-card:nth-child(2){animation-delay:calc(var(--cdur) / -9 * 1)}
.chero-card:nth-child(3){animation-delay:calc(var(--cdur) / -9 * 2)}
.chero-card:nth-child(4){animation-delay:calc(var(--cdur) / -9 * 3)}
.chero-card:nth-child(5){animation-delay:calc(var(--cdur) / -9 * 4)}
.chero-card:nth-child(6){animation-delay:calc(var(--cdur) / -9 * 5)}
.chero-card:nth-child(7){animation-delay:calc(var(--cdur) / -9 * 6)}
.chero-card:nth-child(8){animation-delay:calc(var(--cdur) / -9 * 7)}
.chero-card:nth-child(9){animation-delay:calc(var(--cdur) / -9 * 8)}
.chero .hero-scroll{z-index:4}
@media(max-width:900px){
  /* 狭い画面では左右に分けられないので、コピーを上・カルーセルを下に */
  /* デスクトップは大きな1枚が右下に抜けていく構図。モバイルでカードを小さくすると
     前後のカードが重なって見えてコラージュのように崩れるため、
     カードを画面幅いっぱいまで大きくして「1枚が流れる」構図に揃える(2026-09-07) */
  .chero{--cw:min(104vw,400px);height:auto;min-height:0;display:block;padding:120px 0 0}
  .chero-copy{position:static;transform:none;max-width:none;padding:0 24px;margin-bottom:28px}
  .chero-stage{position:relative;inset:auto;height:min(calc(var(--cw) * 1.42),64svh);
    overflow:hidden;perspective:900px;perspective-origin:50% 50%}
  .chero-track{left:50%;transform:rotateX(1deg) rotateZ(-4deg)}
  /* 上端はコピーから写真が立ち上がるように、下端は次セクションへ抜けるように白でフェード。
     白のグラデーションを"上に重ねる"方式だと、3D変形したカードが合成レイヤーになるため
     overflow の切り口がグラデーションを貫いて 1px の硬い線として残る(2026-09-07 ユーザー指摘)。
     ステージ自体に mask を掛ければ合成レイヤーごと透過するので切れ目が出ない。 */
  .chero::before{display:none}
  .chero-stage::before,.chero-stage::after{display:none}
  .chero-stage{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 84px,#000 calc(100% - 110px),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 84px,#000 calc(100% - 110px),transparent 100%)}
  /* フェードで消えた直後にセクションの罫線が来ると、もう一本の切れ目に見える。
     100行目の #mission{border-top} を上書きするため section#mission で当てる */
  .chero + section,section#mission{border-top:0}
  /* 移動量もステージの高さに合わせて縮める */
  .chero-card{animation-name:cflow-sp}
  @keyframes cflow-sp{
    0%   {transform:translate3d(0,560px,-420px);opacity:0}
    10%  {opacity:1}
    50%  {transform:translate3d(0,0,0)}
    90%  {opacity:1}
    100% {transform:translate3d(0,-560px,-420px);opacity:0}
  }
  /* 写真が全幅になるので SCROLL の置き場所がない */
  .chero .hero-scroll{display:none}
}
@media(prefers-reduced-motion:reduce){
  .chero-card{animation:none;opacity:1}
  .chero-card:nth-child(n+4){opacity:0}
  .chero-card:nth-child(1){transform:translate3d(0,-360px,-460px)}
  .chero-card:nth-child(2){transform:translate3d(0,0,0)}
  .chero-card:nth-child(3){transform:translate3d(0,360px,-460px)}
}


/* ---------- お問い合わせフォーム（項目は manabie.com/ja 準拠、意匠は本サイトに合わせる） ---------- */
.cform-wrap{margin-top:60px;display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1fr);gap:60px;align-items:start}
@media(max-width:900px){.cform-wrap{grid-template-columns:1fr;gap:34px}}
.cform-side .l{font-weight:700;font-size:.72rem;color:var(--blue);letter-spacing:.22em}
.cform-side h3{font-size:1.45rem;font-weight:900;margin:14px 0 14px;line-height:1.55}
.cform-side p{color:var(--ink-soft);font-size:.9rem}
.cform-side .note{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-soft)}
.cform-side .note a{color:var(--blue);font-weight:700}

.cform{background:#fff;border:1px solid var(--line);padding:44px 40px}
@media(max-width:600px){.cform{padding:30px 22px}}
.cf-field{border:0;margin-bottom:28px;min-width:0}
.cf-label,.cf-field legend{display:block;font-weight:700;font-size:.86rem;color:var(--ink);padding:0}
.cf-field legend{margin-bottom:13px}
.cf-req{color:var(--blue);margin-left:4px}
.cf-input{display:block;width:100%;margin-top:11px;font-family:inherit;font-weight:400;font-size:.92rem;line-height:1.7;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 16px;transition:border-color .2s,box-shadow .2s}
@media(max-width:768px){.cf-input{font-size:16px}}
.cf-input::placeholder{color:#9AA3C0}
@media(hover:hover){.cf-input:hover{border-color:#CBD5EE}}
.cf-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,75,223,.12)}
textarea.cf-input{min-height:128px;resize:vertical}

/* 入力が不正なときは赤で示す(参照元フォームと同じ挙動、2026-09-09 ユーザー指示)。
   :invalid だと読み込み直後に未入力の必須項目まで赤くなってしまうので、
   ユーザーが一度触って離れたあとだけ効く :user-invalid を使う。 */
.cf-input.cf-bad{border-color:#D93025;background:#FEF6F5}
.cf-input.cf-bad:focus{border-color:#D93025;box-shadow:0 0 0 3px rgba(217,48,37,.14)}

/* 選択肢はプロダクトページのセグメントチップと同じ淡青チップに揃える */
.cf-opts{display:flex;flex-wrap:wrap;gap:10px}
.cf-radio{position:relative;display:inline-flex;align-items:center;font-size:.86rem;color:var(--ink);background:var(--tint);border:1.5px solid transparent;border-radius:10px;padding:11px 20px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
@media(hover:hover){.cf-radio:hover{border-color:var(--tint2)}}
.cf-radio input{position:absolute;opacity:0;width:0;height:0}
.cf-radio:has(input:checked){background:#fff;border-color:var(--blue);color:var(--blue);font-weight:700}
.cf-radio:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
/* 未選択のまま送信されたグループは、選択肢のチップ全部を赤枠にする */
.cf-radio.cf-bad{border-color:#D93025;background:#FEF6F5}

.cform .btn{width:100%;padding:17px 34px}
button.btn{border:0;cursor:pointer;font-family:inherit}
.cf-note{display:none;font-size:.82rem;color:var(--ink-soft);margin-top:18px;line-height:1.75}
.cf-note.on{display:block}
.cf-dump{white-space:pre-wrap;font-family:inherit;font-size:.8rem;line-height:1.8;background:var(--tint);border-radius:10px;padding:16px 18px;margin-top:10px;color:var(--ink)}

/* ---------- 資料請求ポップアップ（ページヒーローと同じ淡青パネル＋ヘアライン） ---------- */
body.cmodal-lock{overflow:hidden}
.cmodal{position:fixed;inset:0;z-index:200;background:rgba(10,15,44,.62);display:none;overflow-y:auto;padding:44px 20px}
.cmodal.on{display:block;animation:cmfade .25s ease}
@keyframes cmfade{from{opacity:0}to{opacity:1}}
.cmodal-in{position:relative;max-width:720px;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden}
.cmodal-head{background:var(--tint);border-bottom:1px solid var(--line);padding:44px 48px 36px}
.cmodal-head .en{display:block;font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,3rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.cmodal-head .jp{display:block;font-size:.95rem;font-weight:700;color:var(--ink-soft);margin-top:14px;letter-spacing:.06em}
.cmodal-head p{max-width:460px;margin-top:16px;font-size:.86rem;color:var(--ink-soft)}
.cmodal-body{padding:40px 48px 46px}
@media(max-width:700px){.cmodal{padding:16px 12px}.cmodal-head{padding:34px 24px 28px}.cmodal-body{padding:30px 24px 34px}}
.cmodal .cform{border:0;padding:0}
.cmodal-x{position:absolute;top:18px;right:20px;z-index:3;width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:1.3rem;line-height:1;color:var(--ink-soft);cursor:pointer;transition:border-color .2s,color .2s}
@media(hover:hover){.cmodal-x:hover{border-color:var(--blue);color:var(--blue)}}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cform .btn:disabled{opacity:.5;cursor:default;transform:none}
.cf-done{text-align:center;padding:30px 0 10px}
.cf-done .en{display:block;font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.22em;color:var(--blue)}
.cf-done h4{font-size:1.35rem;font-weight:900;margin:16px 0 12px}
.cf-done p{font-size:.88rem;color:var(--ink-soft);max-width:400px;margin:0 auto}

/* ---------- mobile menu（900px以下・全画面オーバーレイ / ボタンとオーバーレイは site.js が生成） ---------- */
.menu-btn{display:none;width:44px;height:44px;margin-right:-8px;padding:0;border:0;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .32s cubic-bezier(.2,.65,.25,1)}
body.mnav-open .menu-btn span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.mnav-open .menu-btn span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:150;background:#fff;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s}
body.mnav-open{overflow:hidden}
body.mnav-open .mnav{opacity:1;visibility:visible}
body.mnav-open header{transform:none!important;background:transparent;box-shadow:none}
.mnav-in{width:100%;max-width:460px;padding:64px 32px 0;display:flex;flex-direction:column}
.mnav-in a{font-size:1.45rem;font-weight:900;color:var(--ink);padding:19px 0;border-bottom:1px solid var(--line);transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.16,.84,.28,1),opacity .5s ease}
body.mnav-open .mnav-in a{transform:none;opacity:1}
.mnav-in a:nth-child(2){transition-delay:.05s}
.mnav-in a:nth-child(3){transition-delay:.1s}
.mnav-in a:nth-child(4){transition-delay:.15s}
.mnav-in a:nth-child(5){transition-delay:.2s}
.mnav-in a.on{color:var(--blue)}
.mnav-in .mnav-cta{margin-top:30px;border-bottom:0;justify-content:center;font-size:.95rem;font-weight:700;padding:18px 30px;color:#fff}
@media(max-width:900px){.menu-btn{display:flex}.header-in nav>.btn{display:none}}
@media(min-width:901px){.mnav{display:none}}

/* ---------- 利用規約などの条文ページ ---------- */
.legal-sec{padding:80px 0 40px}
.legal{max-width:840px}
.legal h2{font-size:1.12rem;font-weight:900;color:var(--ink);line-height:1.6;
  margin:56px 0 18px;padding-top:26px;border-top:1px solid var(--line)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:none}
.legal p{color:var(--ink-soft);font-size:.92rem;line-height:2.05;margin-top:14px}
.legal p.sub{padding-left:1.6em;text-indent:-1.6em;margin-top:8px}
.legal-end{margin-top:48px;text-align:right;letter-spacing:.3em}
.legal-date{margin-top:36px;font-size:.86rem}
.legal-note{max-width:840px;margin-top:64px;padding:24px 26px;background:var(--tint);
  border:1px solid var(--line);border-radius:12px;color:var(--ink-soft);font-size:.84rem;line-height:1.95}
.legal-note a{color:var(--blue);font-weight:700}