@import url('https://fonts.googleapis.com/css2?family=VT323&family=Silkscreen:wght@400;700&display=swap');

html,body{background:#000!important;color:#fff;margin:0}
/* ── NAV RIGHT ────────────────────────────────────────────────── */
/* ── STAT MODAL TRIGGER ────────────────────────────────────────── */
.stat-hint{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pcb);margin-top:10px;
  opacity:0;transition:opacity .2s;
}
.stat:hover .stat-hint,.stat:focus .stat-hint{opacity:.6}
@media(max-width:600px){.stat-hint{opacity:.45}}

/* ── MODAL ─────────────────────────────────────────────────────── */
#m-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
#m-overlay.on{opacity:1;pointer-events:all}
.m-box{
  background:#080808;
  border:1px solid rgba(255,255,255,.1);
  width:100%;max-width:660px;
  max-height:90svh;overflow-y:auto;
  position:relative;
  transform:translateY(18px);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  scrollbar-width:none;
}
.m-box::-webkit-scrollbar{display:none}
#m-overlay.on .m-box{transform:translateY(0)}
.m-header{
  position:sticky;top:0;
  display:flex;justify-content:flex-end;padding:14px 18px 0;
  background:linear-gradient(to bottom,#080808 60%,transparent);
  z-index:2;
}
.m-close{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);background:none;
  border:1px solid var(--border);
  padding:7px 16px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.m-close:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.m-img{
  width:100%;height:clamp(200px,30vw,300px);
  display:block;overflow:hidden;background:#040410;
}
.m-img img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.85) saturate(.9)}
.m-body{padding:clamp(22px,4vw,44px)}
.m-eye{
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(0,255,136,.6);opacity:1;
  margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
.m-eye::before{content:'';width:16px;height:1px;background:var(--pcb);opacity:.5;flex-shrink:0}
.m-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(30px,5vw,52px);
  font-weight:200;letter-spacing:.04em;text-transform:uppercase;
  line-height:.95;margin-bottom:20px;
}
.m-title strong{font-weight:600;display:block}
.m-text{
  font-family:'Noto Sans JP',sans-serif;
  font-size:15px;line-height:2.0;
  color:var(--off);letter-spacing:.04em;
}
.m-text strong{color:#fff;font-weight:400}
.m-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  margin-top:28px;
}
.m-stat{background:#080808;padding:20px 18px}
.m-stat-n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,4vw,32px);font-weight:200;
  color:var(--pcb);line-height:1;margin-bottom:5px;
}
.m-stat-l{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:var(--dim);letter-spacing:.08em}

/* ── Skip link (accessibility + SEO) ────────────────────────── */
.skip-link{
  position:absolute;top:-100%;left:0;
  background:var(--pcb);color:#000;
  padding:8px 16px;font-size:12px;letter-spacing:.1em;
  z-index:9999;text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{top:0}
/* ── RESET & BASE ─────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#000;
  --white:#fff;
  --off:rgba(255,255,255,.75);
  --dim:rgba(255,255,255,.45);
  --faint:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.09);
  --panel:rgba(255,255,255,.03);
  --accent:#7eb8ff;
  --accent-dim:rgba(126,184,255,.15);
  --pcb:#00ff88;
  --px:clamp(20px,5vw,64px);
  --gap:1px;
}
html{background:#000;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--black);color:var(--white);font-family:'Barlow','Noto Sans JP',sans-serif;font-weight:300;line-height:1.6}
/* ── Global resets ── */
button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background:none;border:none;padding:0;font:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
/* ── TYPOGRAPHY SCALE ─────────────────────────────────────────── */

/* ── NAV ──────────────────────────────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--px);
  transition:background .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.nav-logo{flex-shrink:0}
#nav.solid{
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}
.nav-logo img{height:18px;filter:invert(1);opacity:.85;display:block}
.nav-links{display:flex;list-style:none;gap:clamp(20px,3vw,40px);align-items:center;flex:1;justify-content:center}
.nav-links a{
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-decoration:none;
  transition:color .2s;
}
.nav-links a:hover{color:var(--pcb)}
.nav-pill{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--white);text-decoration:none;
  border:1px solid rgba(255,255,255,.25);
  padding:8px 22px;
  transition:background .2s,border-color .2s;
}
.nav-pill:hover{background:var(--white);color:var(--black)}
.nav-right{display:flex;align-items:center;gap:16px}
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;z-index:1000}
.ham span{display:block;width:20px;height:1px;background:var(--white);transition:transform .3s,opacity .3s}
.ham.x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ham.x span:nth-child(2){opacity:0}
.ham.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{
  display:none;position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,.96);
  flex-direction:column;align-items:center;justify-content:center;gap:28px;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.drawer.open{opacity:1;pointer-events:all}
.drawer a{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(28px,8vw,44px);font-weight:200;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;transition:color .2s;
}
.drawer a:hover{color:var(--white)}

/* ── NOTICE BAR ───────────────────────────────────────────────── */
.notice{
  position:relative;z-index:1;
  margin-top:64px;
  padding:10px var(--px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.notice-dot{width:4px;height:4px;border-radius:50%;background:var(--pcb);opacity:.5;flex-shrink:0;animation:blink 3s infinite}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:.7}}
.notice-text{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);text-align:center;
}
.notice-text em{color:rgba(255,255,255,.6);font-style:normal}

/* ── HERO ─────────────────────────────────────────────────────── */
#hero{
  position:relative;height:100svh;min-height:580px;
  overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;
}
/* Star canvas */
#star-canvas{position:absolute;inset:0;width:100%;height:100%}

/* PCB circuit overlay */
#pcb-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
  mix-blend-mode:screen;
  opacity:.55;
}

/* Vignette */
.hero-vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, transparent 0%, rgba(0,0,0,.45) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.3) 0%, transparent 15%, transparent 55%, rgba(0,0,0,.98) 100%);
}

/* Center logo */
.hero-logo{
  position:absolute;top:38%;left:0;right:0;
  transform:translateY(-62%);
  z-index:3;text-align:center;
  opacity:0;animation:fadeUp .8s .6s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-logo img{height:36px;filter:invert(1);opacity:.9;display:block;margin:0 auto}
.hero-logo-sub{
  margin-top:14px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;letter-spacing:.45em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.hero-logo-since{
  margin-top:6px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}

/* Bottom content */
.hero-bottom{
  position:relative;z-index:3;
  padding:0 var(--px) clamp(40px,6vw,80px);
  display:grid;grid-template-columns:1fr auto;
  align-items:flex-end;gap:40px;
  opacity:0;animation:fadeUp .7s 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-hed{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(44px,7vw,105px);
  font-weight:200;letter-spacing:.03em;text-transform:uppercase;
  line-height:.92;
  text-align:center;
}
/* スマホ: SVG はブロックで全幅 */
.hero-hed .stars-svg{display:block;width:100%}
/* PC: 1行センタリング（br を非表示、SVG をインラインに） */
@media(min-width:601px){
  .hero-hed{font-size:40px;white-space:nowrap;display:block}
  .hero-hed br{display:none}
  .hero-hed .stars-svg{display:inline-block;width:auto;vertical-align:text-bottom}
}
.mission-text .stars-svg{display:block;width:100%}
@media(max-width:600px){
  .hero-hed{text-align:center}
  .hero-hed .stars-svg{margin:0 auto;display:block}
}

.hero-scroll{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-bottom:4px;
}
.hero-scroll span{
  font-family:'Barlow Condensed',sans-serif;
  font-size:8px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--dim);
  writing-mode:vertical-rl;
}
.scroll-bar{
  width:1px;height:52px;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation:scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim{0%,100%{opacity:.2;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── HERO: PC 向け調整（スマホ表示に影響なし）──────────────────── */
@media(min-width:601px){
  /* ロゴ上下の余白を広げる */
  .hero-logo{
    top:42%;
    transform:translateY(-58%);
  }

  /* MAKING STARS をフル幅でセンタリング */
  .hero-bottom{
    grid-template-columns:1fr;
    position:relative;
    padding-bottom:clamp(72px,10vw,120px);
  }
  /* Scroll インジケーターを右端へ絶対配置 */
  .hero-scroll{
    position:absolute;
    right:var(--px);
    bottom:clamp(72px,10vw,120px);
  }
}

/* PCB corner decorations */
.pcb-corner{
  position:absolute;z-index:3;pointer-events:none;
  width:80px;height:80px;
}
.pcb-corner svg{width:100%;height:100%}
.pcb-corner.tl{top:76px;left:var(--px)}
.pcb-corner.tr{top:76px;right:var(--px);transform:scaleX(-1)}
.pcb-corner.bl{bottom:clamp(40px,6vw,80px);left:var(--px);transform:scaleY(-1)}
.pcb-corner.br{bottom:clamp(40px,6vw,80px);right:var(--px);transform:scale(-1,-1)}

/* Status bar */
.hero-status{
  position:absolute;top:76px;left:50%;transform:translateX(-50%);
  z-index:3;
  display:flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(0,255,136,.45);
  white-space:nowrap;
  opacity:0;animation:fadeUp .5s 1.5s ease forwards;
}
.hero-status::before,.hero-status::after{
  content:'';display:block;width:20px;height:1px;
  background:rgba(0,255,136,.3);flex-shrink:0;
}

/* ── SECTION COMMONS ──────────────────────────────────────────── */
.section{border-top:1px solid var(--border)}
.wrap{max-width:1100px;margin:0 auto;padding:clamp(40px,6vw,72px) var(--px)}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.38em;text-transform:uppercase;
  color:var(--dim);margin-bottom:20px;
}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--dim);flex-shrink:0}
.stitle{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(38px,5.5vw,80px);
  font-weight:200;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.2;margin-bottom:clamp(24px,4vw,40px);
}
/* About タイトルのみPC向けでサイズを抑制（3行防止） */
@media(min-width:601px){
  #about-stitle{font-size:clamp(38px,3.8vw,52px)}
  #company-stitle{line-height:.85}
}
.stitle b,.stitle strong{font-weight:600;display:block;margin-top:.18em}
.sbody{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15px,1.6vw,16px);
  line-height:2.0;color:var(--off);
  letter-spacing:.04em;max-width:480px;
}
.sbody strong{color:var(--white);font-weight:400}

/* ── GRID PRIMITIVES ──────────────────────────────────────────── */

/* ── ABOUT ────────────────────────────────────────────────────── */
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,100px);align-items:start}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);background:transparent;border:none}
.stat{
  background:var(--black);
  padding:clamp(22px,3.5vw,36px) clamp(18px,3vw,28px);
  position:relative;overflow:hidden;
  cursor:pointer;transition:background .3s;
  border:1px solid rgba(0,255,136,.14);
}
.stat::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1px;background:var(--white);
  transition:width .5s cubic-bezier(.77,0,.18,1);
}
.stat:hover{background:var(--panel)}
.stat:hover::after{width:100%}
.stat-n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(38px,5vw,58px);
  font-weight:200;line-height:1;margin-bottom:6px;
  color:var(--pcb);
}
.stat-u{font-size:.55em;color:var(--pcb);opacity:.75}
.stat-l{
  font-family:'Noto Sans JP',sans-serif;
  font-size:14px;color:var(--dim);letter-spacing:.1em;
}

/* ── DRM ──────────────────────────────────────────────────────── */
#drm{
  border-top:1px solid var(--border);
  background:#000;
  position:relative;overflow:hidden;
}
#drm > *{ position:relative;z-index:1; }
.drm-layout{
  max-width:1100px;margin:0 auto;
  padding:clamp(40px,6vw,72px) var(--px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(48px,8vw,100px);align-items:center;
}
.drm-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(0,255,136,.6);
  border:1px solid rgba(0,255,136,.2);
  padding:7px 16px;margin-bottom:24px;
}
.drm-badge::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:rgba(0,255,136,.6);
  animation:blink 2s infinite;
}
.drm-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(40px,5.5vw,78px);
  font-weight:200;letter-spacing:.04em;text-transform:uppercase;
  line-height:0.95;margin-bottom:22px;
}
.drm-title strong{font-weight:700;display:block;margin-top:.12em}
.drm-body{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15px,1.6vw,16px);
  line-height:2.0;color:var(--off);
  letter-spacing:.04em;margin-bottom:32px;
}
.drm-body strong{color:var(--white);font-weight:400}
.drm-tags{display:flex;flex-wrap:wrap;gap:8px}
.drm-tag{
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;letter-spacing:.25em;text-transform:uppercase;
  border:1px solid rgba(0,255,136,.15);
  padding:7px 14px;color:var(--pcb);
  cursor:default;
}

/* Funnel SVG */
.drm-funnel{display:flex;align-items:center;justify-content:center;padding:20px}
.drm-funnel svg{width:100%;max-width:420px;overflow:visible}

/* DRM Metrics */

/* ── SERVICES ─────────────────────────────────────────────────── */

/* ── MISSION ──────────────────────────────────────────────────── */
#mission{
  position:relative;height:48vh;min-height:280px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--border);
}
#mission-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.mission-overlay{
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 100%);
}
.mission-text{position:relative;z-index:3;text-align:center;padding:0 var(--px);max-width:1100px;margin:0 auto;width:100%}
.mission-text h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(48px,11vw,140px);
  font-weight:200;letter-spacing:.06em;text-transform:uppercase;line-height:.9;
}
@media(min-width:601px){
  .mission-text h2{font-size:clamp(48px,7.7vw,98px);line-height:.75}
}

.mission-text p{
  margin-top:18px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;letter-spacing:.45em;text-transform:uppercase;
  color:var(--dim);
}

/* ── COMPANY ──────────────────────────────────────────────────── */
#company{
  border-top:1px solid var(--border);
  position:relative;overflow:hidden;background:#040c1e;
}
#shibuya-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.company-layout{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(48px,8vw,100px);align-items:start;
}
@media(min-width:601px){
  .company-layout{align-items:stretch}
  .company-layout > div:last-child{display:flex;flex-direction:column}
  .map-wrap{
    margin-top:0;flex:1;
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  .map-wrap iframe{flex:1;width:100%;min-height:320px;height:100%}
}
.table{border-top:1px solid var(--border);margin-top:36px}
.table-row{
  display:grid;grid-template-columns:clamp(100px,15vw,140px) 1fr;
  gap:clamp(12px,2.5vw,24px);
  padding:clamp(14px,2vw,20px) 0;
  border-bottom:1px solid rgba(255,255,255,.055);
  align-items:start;
}
.table-key{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);padding-top:2px;
}
.table-val{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15px,1.6vw,16px);
  color:var(--off);line-height:1.85;letter-spacing:.04em;
}
.map-wrap svg{width:100%;display:block}

/* ── CONTACT ──────────────────────────────────────────────────── */

/* Password gate */

.pw-label::before{content:'';width:16px;height:1px;background:var(--pcb);opacity:.5;flex-shrink:0}

/* Unlockable CTA */

.pw-status-dot.green{background:var(--pcb);animation:blink 2s infinite}

/* Policy cards */

/* ── CONTACT (new) ───────────────────────────────────────────── */
.contact-new-layout{
  display:grid;grid-template-columns:1fr;
  max-width:640px;
}
/* PC向け右カラム: デフォルト非表示→PC表示 */
.contact-referral-visual{display:none}
@media(min-width:601px){
  .contact-new-layout{
    grid-template-columns:1fr 1fr;
    max-width:100%;
    gap:clamp(48px,6vw,80px);
    align-items:center;
  }
  .contact-referral-visual{display:flex;align-items:center;justify-content:center}
}

.contact-new-page-btn{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(24px,3.5vw,36px);
  padding:14px 28px;
  border:1px solid rgba(0,255,136,.35);
  background:rgba(0,255,136,.06);
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(13px,1.6vw,15px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--pcb);text-decoration:none;
  transition:background .2s,border-color .2s;
}
.contact-new-page-btn:hover{background:rgba(0,255,136,.14);border-color:rgba(0,255,136,.6);}

/* ── Contact: padlock bg ── */
.cl-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
.cl-bg svg{position:absolute;}
@keyframes cl-float{
  0%  {opacity:0;transform:translateY(30px) rotate(var(--r0));}
  15% {opacity:var(--a);}
  85% {opacity:var(--a);}
  100%{opacity:0;transform:translateY(-40px) rotate(var(--r1));}
}
@keyframes cl-shackle{
  0%,40%  {d:path(var(--sh-close));}
  55%,85% {d:path(var(--sh-open));}
  100%    {d:path(var(--sh-close));}
}
/* ── FOOTER ───────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--border);
  padding:clamp(24px,3vw,36px) var(--px);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
}
.foot-logo img{height:14px;filter:invert(1);opacity:.2;display:block}
.foot-copy{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-align:center;line-height:1.8;
}
.foot-right{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.12em;color:var(--dim);
  display:block;
  white-space:nowrap;
}

/* ── REVEAL ANIMATION ─────────────────────────────────────────── */
.r{animation:revealUp .8s cubic-bezier(.16,1,.3,1) both}
.r1{animation-delay:.08s}.r2{animation-delay:.16s}.r3{animation-delay:.24s}
.r4{animation-delay:.32s}.r5{animation-delay:.40s}.r6{animation-delay:.48s}
@keyframes revealUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.r{animation:none}}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:900px){
  .about-layout,.drm-layout,.company-layout{grid-template-columns:1fr;gap:clamp(36px,6vw,60px)}
}
@media(max-width:600px){
  #nav{height:56px}
  .nav-links,.nav-pill{display:none}
  .ham{display:flex}
  .drawer{display:flex}
  .notice{margin-top:56px}
  .hero-bottom{grid-template-columns:1fr;gap:24px}
  .hero-scroll{display:none}
  .hero-status{display:none}
  .pcb-corner{width:50px;height:50px}
  .pcb-corner.tr,.pcb-corner.br{display:none}
  .notice-text{font-size:14px;letter-spacing:.12em}
  .about-layout,.drm-layout,.company-layout{grid-template-columns:1fr;gap:clamp(28px,5vw,48px)}
  .stats-grid{grid-template-columns:1fr 1fr;gap:1px}
  .px-stats-inner{max-width:1100px;margin:0 auto;padding:clamp(32px,5vw,56px) var(--px)}
    .company-layout > div:last-child{display:none}
  .table-row{grid-template-columns:1fr;gap:3px;padding:13px 0}
  .table-key{font-size:9px}
  footer{flex-direction:column;gap:12px;text-align:center}
  .foot-right{font-size:12px;letter-spacing:.06em}
  .stat-n{font-size:38px}
  #mission{height:44vh;min-height:260px}
    }

/* ── Core Web Vitals: content-visibility (LCP/INP boost) ────── */
#company, footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}
#contact {
  position:relative;
  content-visibility: auto;
  contain-intrinsic-size: 0 auto;
}
/* INP: reduce layout thrash on interactions */

/* CLS: prevent layout shift on font load */
.stitle, .drm-title, .hero-hed {
  font-display: optional;
  size-adjust: 100%;
}
/* ── DRM FUNNEL overflow fix ───────────────────────────────── */


/* ── DRM とは？ block ──────────────────────────────────────── */
.drm-what{
  max-width:1100px;margin:0 auto;
  padding:0 var(--px) clamp(40px,6vw,60px);
}
.drm-what-inner{
  border:1px solid var(--border);
  padding:clamp(32px,5vw,60px);
  position:relative;
  background:var(--panel);
}
.drm-what-q{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(36px,5vw,56px);
  font-weight:200;letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:clamp(6px,1vw,10px);
  line-height:1;
}
.drm-what-q span{
  font-size:.55em;font-family:'Noto Sans JP',sans-serif;
  letter-spacing:.08em;text-transform:none;
  color:var(--off);font-weight:300;
  margin-left:.3em;
}
.drm-what-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
  margin-bottom:clamp(28px,4vw,44px);
}
.drm-what-card{
  padding:clamp(20px,2.5vw,32px);
  border:1px solid var(--border);
  background:rgba(2,6,16,.55);
  position:relative;
  overflow:hidden;
}
.drm-what-card canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.18;
  z-index:0;
}
#wc-canvas-0,#wc-canvas-1,#wc-canvas-2{ opacity:.65; }
.drm-what-card > *:not(canvas){ position:relative;z-index:1; }
.drm-what-text{
  background:color-mix(in srgb, var(--wc) 12%, rgba(2,6,16,.88));
  border-radius:4px;
  padding:10px 12px;
  margin-top:8px;
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15px,1.5vw,16px);
  line-height:2;
  color:var(--off);
}
.drm-what-icon{
  width:36px;height:36px;
  color:var(--wc,var(--pcb));opacity:.8;
  margin-bottom:14px;
}
.drm-what-icon svg{width:100%;height:100%}
.drm-what-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.8vw,30px);font-weight:500;letter-spacing:.06em;
  color:var(--wc,var(--white));
  line-height:1.1;margin-bottom:4px;
}
.drm-what-en{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--wc,var(--pcb));opacity:.6;
  margin-bottom:14px;
}

.drm-what-sub-en{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(15px,1.6vw,17px);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(0,255,136,.5);margin-top:4px;margin-bottom:clamp(16px,2vw,22px);
}
.drm-what-intro{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15px,1.7vw,18px);
  line-height:2;
  color:var(--off);
  max-width:640px;
  margin-bottom:clamp(28px,4vw,44px);
}

/* ── DRM 成果ポテンシャル ──────────────────────────────────── */
.drm-what-result{
  margin-top:clamp(32px,4vw,48px);
  padding:clamp(20px,3vw,32px);
  border:1px solid rgba(255,55,75,.6);
  background:rgba(255,55,75,.05);
  position:relative;
}
.drm-what-result::before{
  content:'RESULT POTENTIAL';
  position:absolute;top:-1px;left:20px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(14px,1.5vw,16px);letter-spacing:.28em;text-transform:uppercase;
  color:#1a0a00;
  background:#ffd700;
  padding:0 8px;
  transform:translateY(-50%);
}
.drm-what-result-text{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15px,1.6vw,17px);line-height:2.0;
  color:rgba(255,255,255,.75);
  letter-spacing:.04em;
}
.drm-what-result-text strong{
  color:#fff;font-weight:500;
}
@media(max-width:600px){
  .drm-what-result{padding:20px 16px}
  .drm-what-result-text{font-size:15px;line-height:1.9}
}
@media(max-width:900px){
  .drm-what-grid{grid-template-columns:1fr}
}

/* ── DRM 成果イメージ図 ──────────────────────────────────────── */

/* ── Referral reasons ────────────────────────────────────────── */

.cursor-star{
  position:fixed;pointer-events:none;z-index:99999;
  width:4px;height:4px;
  transform:translate(-50%,-50%);
  animation:starFade 1.4s cubic-bezier(.2,.8,.4,1) forwards;
  filter:drop-shadow(0 0 3px rgba(0,255,136,.95)) drop-shadow(0 0 7px rgba(0,255,136,.4));
}
.cursor-star::before,.cursor-star::after{
  content:'';position:absolute;
  background:var(--pcb);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.cursor-star::before{width:100%;height:1px}
.cursor-star::after{width:1px;height:100%}
@keyframes starFade{
  0%  {opacity:1;  transform:translate(-50%,-50%) translateY(0)   rotate(0deg)  scale(1)}
  40% {opacity:.8; transform:translate(-50%,-50%) translateY(-10px) rotate(30deg) scale(.85)}
  100%{opacity:0;  transform:translate(-50%,-50%) translateY(-28px) rotate(60deg) scale(.2)}
}

/* ── DRM Diagram: PC shows SVG, mobile shows vertical cards ─── */

/* Mobile cycle cards */
/* Map fix */
.map-wrap{margin-top:24px;border:1px solid var(--border);overflow:hidden}
.map-wrap iframe{display:block;width:100%;height:300px}

/* ── 完全成果報酬ブロック ────────────────────────────────────── */
.perf-block{
  max-width:1100px;margin:0 auto;
  padding:0 var(--px) clamp(40px,6vw,60px);
}

.perf-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(255,60,80,.8);
  border:1px solid rgba(255,60,80,.25);
  padding:6px 14px;margin-bottom:28px;
}
.perf-header{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,48px);align-items:end;
  margin-bottom:clamp(32px,4vw,48px);
}
@media(min-width:601px){
  .perf-header{grid-template-columns:1fr;gap:12px}
  .perf-credo{text-align:left}
}
.perf-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(40px,5.5vw,70px);
  font-weight:200;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.25;
}
@media(min-width:601px){
  .perf-title{line-height:1.05}
}
.perf-title strong{font-weight:700;color:#ff3c50;display:block}
.perf-title-en{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);margin-top:10px;
}
@media(min-width:601px){
  .perf-title-en{margin-top:4px}
}
.perf-credo{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15.6px,1.85vw,19.5px);
  line-height:2.0;color:var(--off);letter-spacing:.05em;
  text-align:left;
}
@media(min-width:601px){
  .perf-credo{line-height:1.6}
}
.perf-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,20px);
  margin-bottom:clamp(28px,4vw,44px);
}
.perf-card{
  padding:clamp(20px,2.5vw,28px);
  border:1px solid var(--border);
  background:var(--black);
  transition:border-color .3s;
  pointer-events:none;
}
.perf-card-icon{
  width:28px;height:28px;color:#ff3c50;opacity:.7;margin-bottom:14px;
}
.perf-card-icon svg{width:100%;height:100%}
.perf-card-head{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(19px,2.4vw,24px);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--white);margin-bottom:10px;font-weight:500;
}
.perf-card-text{
  font-family:'Noto Sans JP',sans-serif;
  font-size:16px;line-height:1.9;color:var(--off);
}
.perf-summary{margin-top:clamp(24px,3vw,36px)}
.perf-summary-divider{
  height:1px;background:var(--border);margin-bottom:clamp(20px,3vw,32px);
}
.perf-summary-text{
  font-family:'Noto Sans JP',sans-serif;
  font-size:17px;line-height:2.1;color:var(--off);
  text-align:center;
}
.perf-summary-text strong{color:var(--white);font-weight:400}
@media(max-width:900px){
  .perf-header{grid-template-columns:1fr}
  .perf-credo{text-align:left}
  .perf-cards{grid-template-columns:1fr}
}

/* ── Orbit diagram ───────────────────────────────────────────── */

/* ── DRM Tactics grid ────────────────────────────────────────── */
.drm-tactics{
  max-width:1100px;margin:0 auto;
  padding:0 var(--px) clamp(28px,4vw,52px);
}
.drm-tactics-inner{
  border-top:1px solid var(--border);
  padding-top:clamp(28px,4vw,48px);
}
.drm-tactics-header{margin-bottom:clamp(20px,3vw,36px)}
.drm-tactics-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(44px,4vw,56px);
  font-weight:200;letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:12px;line-height:1;
}
.drm-tactics-sub{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(16px,1.8vw,18px);line-height:1.9;color:var(--off);
}
.drm-tactics-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);
}
.drm-tactic{
  background:var(--black);
  padding:clamp(22px,3vw,34px) clamp(18px,2.5vw,28px);
  display:flex;flex-direction:column;gap:14px;
  transition:background .3s;position:relative;overflow:hidden;

  cursor:pointer;
}
.drm-tactic::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--tc,var(--pcb));
  transform:scaleX(0);transition:transform .4s cubic-bezier(.77,0,.18,1);
  transform-origin:left;opacity:.5;
}
.drm-tactic:hover::before{transform:scaleX(1)}
.drm-tactic-icon{
  width:32px;height:32px;
  color:var(--tc,var(--pcb));opacity:.7;
  flex-shrink:0;
}
.drm-tactic-icon svg{width:100%;height:100%}
.drm-tactic-head{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(14px,1.8vw,17px);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);font-weight:500;line-height:1.2;
}
.drm-tactic-en{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tc,var(--pcb));opacity:.6;margin-top:2px;
}
.drm-tactic-text{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15px,1.6vw,16px);line-height:1.9;color:var(--off);
}
.drm-tactic-body{display:flex;flex-direction:column;gap:4px}
@media(max-width:900px){
  .drm-tactics-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .drm-tactics-grid{grid-template-columns:1fr}
  .drm-tactic{flex-direction:row;align-items:flex-start;gap:16px}
  .drm-tactic-body{flex:1}
}

#greeting{border-top:1px solid var(--border)}

/* Right column */

/* ── Service icon graphic ─────────────────────────────────────── */

/* ── Referral reason icons ───────────────────────────────────── */

/* ── Referral full-width block ──────────────────────────────── */

/* referral-reasons-title becomes left column */

/* referral-reasons takes full right column */

/* ── About illo full-width ───────────────────────────────────── */

/* ── Map access label ─────────────────────────────────────────── */
.map-label{
  display:flex;align-items:center;gap:10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(0,255,136,.6);opacity:1;
  margin-bottom:10px;margin-top:clamp(16px,2.5vw,24px);
}
.map-label::before{content:'';width:16px;height:1px;background:var(--pcb);opacity:.5;flex-shrink:0}

/* ── About illo desktop/mobile wrappers ─────────────────────── */
.illo-desktop{display:block;width:100%}
.illo-mobile{
  display:none;
  flex-direction:column;align-items:stretch;
  gap:0;
  padding:4px 0;
}
.illo-step{
  display:flex;flex-direction:row;align-items:center;
  padding:10px 14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  gap:12px;
}
.illo-step.green{border-color:rgba(0,255,136,.35);background:rgba(0,255,136,.05)}
.illo-step.hi{border-color:rgba(126,184,255,.25);background:rgba(126,184,255,.04)}
.illo-step-n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  min-width:80px;
}
.illo-step.green .illo-step-n{color:rgba(0,255,136,.9)}
.illo-step-p{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.08em;
  color:var(--dim);
}
.illo-step.green .illo-step-p{color:rgba(0,255,136,.6)}
.illo-step-arr{
  text-align:center;
  font-size:13px;color:var(--dim);opacity:.4;
  padding:3px 0;
  flex-shrink:0;
}
.stars-svg{
  display:block;
  width:100%;
  overflow:visible;
  visibility:hidden;
}
.stars-svg.ready{visibility:visible}
.stars-txt{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* ══════════════════════════════════════════════════════════════
   ── PARTICLE NUMBERS & STAT GRID ─────────────────────────── */
/* ── Pixel fonts: VT323 (numbers) + Silkscreen (labels) ── */

/* ══════════════════════════════════════════════════════════════
   ── PIXEL GAME STATS ──────────────────────────────────────── */
#particle-section{
  background:#0d0d1a;
  padding:0;
  border-top:1px solid var(--border);
  overflow:hidden;
  position:relative;
}
.particle-header{text-align:left}

/* マリオゲーム画面キャンバス */
.px-game-screen{
  width:100%;
  overflow:hidden;
  line-height:0;
  display:block;
  margin-bottom:clamp(32px,5vw,56px);
  border-radius:4px;
}
#px-stage-canvas{
  display:block;
  width:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* stats wrapper */
.px-stats-inner{
  max-width:960px;
  margin:0 auto;
  padding:clamp(32px,5vw,56px) var(--px) clamp(60px,10vw,120px);
}

/* 2列グリッド */
.px-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border:3px solid #1a6a2a;
  box-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(0,255,80,.12);
}
@media(max-width:500px){.px-grid{grid-template-columns:1fr}}

/* NESダイアログボックス風カード */
.px-card{
  position:relative;
  background:#000;
  border:2px solid #0a3a0a;
  outline:1px solid #1a6a2a;
  padding:clamp(16px,3vw,28px) clamp(14px,2.5vw,24px) clamp(20px,3.5vw,32px);
  overflow:hidden;
  cursor:default;
}
.px-card:nth-child(odd){ border-right:2px solid #1a6a2a; }
.px-card:nth-child(1),.px-card:nth-child(2){ border-bottom:2px solid #1a6a2a; }
/* スキャンライン */
.px-card::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,
    transparent,transparent 3px,
    rgba(0,0,0,.22) 3px,rgba(0,0,0,.22) 4px);
  pointer-events:none;z-index:4;
}
/* カード点灯 */
@keyframes cardFlash{
  0%  {box-shadow:inset 0 0 40px rgba(0,255,80,.5),0 0 0 3px #00ff50}
  100%{box-shadow:none}
}
.px-card.firing{animation:cardFlash .5s ease-out forwards}
.px-card-inner{position:relative;z-index:3}

/* バッジ */
.px-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Silkscreen',monospace;
  font-size:clamp(7px,1.1vw,11px);
  color:#ffd700;
  border:2px solid #ffd700;
  box-shadow:2px 2px 0 #000;
  padding:4px 8px;
  margin-bottom:12px;
  text-shadow:0 0 8px rgba(255,215,0,.8);
  letter-spacing:.06em;
}

/* ラベル */
.px-lbl{
  font-family:'Silkscreen',monospace;
  font-size:clamp(16px,2vw,18px);
  color:#00aa44;
  letter-spacing:.04em;
  margin-bottom:clamp(10px,1.5vw,16px);
  line-height:1.9;
  text-shadow:0 0 6px rgba(0,180,0,.4);
}

/* 数値 */
.px-screen{
  font-family:'VT323',monospace;
  font-size:clamp(52px,9vw,110px);
  color:#00ff50;
  text-shadow:
    0 0 8px rgba(0,255,80,.95),
    0 0 18px rgba(0,255,80,.5),
    0 0 36px rgba(0,255,80,.2);
  line-height:1.1;
  display:flex;align-items:baseline;gap:.2em;flex-wrap:wrap;
  min-height:1.3em;
}
.px-unit{font-size:.38em;color:#00cc40;opacity:.9}
.px-pre{font-size:.34em;color:#008830;opacity:.8}
.px-cursor{
  display:inline-block;width:.5em;height:.85em;
  background:#00ff50;margin-left:.1em;vertical-align:middle;
  animation:blink .6s steps(1) infinite;
  box-shadow:0 0 8px rgba(0,255,80,.9);
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.px-card.fired .px-cursor{display:none}

/* range */
.px-range{display:flex;flex-direction:column;gap:0}
.px-range-row{
  font-size:.55em;line-height:1.15;
  opacity:0;transform:translateX(-8px);
  transition:opacity .4s ease,transform .4s ease;
  white-space:nowrap;
}
.px-card.fired .px-range-row:nth-child(1){opacity:1;transform:none;transition-delay:.1s}
.px-card.fired .px-range-row:nth-child(2){opacity:1;transform:none;transition-delay:.4s}

/* コインアイコン（CSSピクセルアート） */
.px-coin-icon{
  display:inline-block;
  width:8px;height:8px;
  background:#ffd700;
  border-radius:50%;
  box-shadow:0 0 4px rgba(255,215,0,.8);
  animation:coinBounce .5s steps(2) infinite alternate;
  flex-shrink:0;
}
@keyframes coinBounce{from{transform:translateY(0)}to{transform:translateY(-2px)}}

/* ── DRM Tactic Popup ─────────────────────────────────────────── */
.drm-tactic-tip{
  position:absolute;bottom:10px;right:12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pcb);opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  display:flex;align-items:center;gap:5px;
}
.drm-tactic-tip::before{
  content:'';display:inline-block;
  width:4px;height:4px;border-radius:50%;
  background:var(--pcb);
  animation:tipPulse 1.2s ease-in-out infinite;
}
@keyframes tipPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.drm-tactic:hover .drm-tactic-tip{opacity:1}
.drm-tactic:hover{
  background:rgba(0,255,136,.04);
  box-shadow:inset 0 0 0 1px rgba(0,255,136,.18);
}

/* ── DRM Modal ─────────────────────────────────────────────────── */
#drm-modal-overlay{
  display:flex;position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1), backdrop-filter .4s ease;
}
#drm-modal-overlay.open{
  opacity:1;
  pointer-events:auto;
  backdrop-filter:blur(12px) brightness(.7);
  -webkit-backdrop-filter:blur(12px) brightness(.7);
}
#drm-modal-overlay.closing{
  opacity:0;
  transition:opacity .3s cubic-bezier(.4,0,1,1), backdrop-filter .3s ease;
}
#drm-modal-box{
  position:relative;
  background:color-mix(in srgb, rgba(var(--mc-rgb),1) 3%, #050d08);
  border:1px solid rgba(var(--mc-rgb),.35);
  box-shadow:
    0 0 0 1px rgba(var(--mc-rgb),.08),
    0 0 60px rgba(var(--mc-rgb),.12),
    0 60px 120px rgba(0,0,0,.7);
  max-width:560px;width:100%;
  padding:clamp(28px,4vw,48px);
  transform:translateY(60px) scale(.88) rotateX(6deg);
  opacity:0;
  filter:blur(4px);
  transform-origin:center bottom;
  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    opacity .5s cubic-bezier(.16,1,.3,1),
    filter .5s cubic-bezier(.16,1,.3,1),
    box-shadow .7s ease;
  will-change:transform,opacity,filter;
}
#drm-modal-overlay.open #drm-modal-box{
  transform:none;
  opacity:1;
  filter:blur(0px);
}
#drm-modal-overlay.closing #drm-modal-box{
  transform:translateY(40px) scale(.90) rotateX(4deg);
  opacity:0;
  filter:blur(6px);
  transition:
    transform .4s cubic-bezier(.4,0,1,1),
    opacity .35s cubic-bezier(.4,0,1,1),
    filter .35s cubic-bezier(.4,0,1,1);
}
#drm-modal-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--mc-rgb),.7),transparent);
}
.drm-modal-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(var(--mc-rgb),.6);opacity:1;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.drm-modal-eyebrow::before{
  content:'';width:16px;height:1px;background:rgba(var(--mc-rgb),1);opacity:.5;flex-shrink:0;
}
.drm-modal-icon{
  width:36px;height:36px;color:rgba(var(--mc-rgb),1);opacity:.7;margin-bottom:16px;
}
.drm-modal-icon svg{width:100%;height:100%}
.drm-modal-head{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,3.5vw,32px);
  font-weight:400;letter-spacing:.04em;
  color:#fff;line-height:1.1;margin-bottom:4px;
}
.drm-modal-en{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(var(--mc-rgb),.6);opacity:1;margin-bottom:20px;
}
.drm-modal-divider{
  width:32px;height:1px;background:rgba(var(--mc-rgb),.4);margin-bottom:20px;
}
.drm-modal-img-wrap{
  width:100%;height:160px;
  overflow:hidden;border-radius:2px;
  margin-bottom:20px;
  position:relative;
  border:1px solid rgba(var(--mc-rgb),.15);
}
.drm-modal-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.7) brightness(.75);
  transition:filter .4s ease,transform .6s ease;
}
.drm-modal-img-wrap:hover img{
  filter:saturate(.9) brightness(.88);
  transform:scale(1.03);
}
.drm-modal-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55));
  pointer-events:none;
}
.drm-modal-text{
  font-family:'Noto Sans JP',sans-serif;
  font-size:15px;line-height:2;color:rgba(255,255,255,.7);
  margin-bottom:20px;
}
.drm-modal-detail{
  font-family:'Noto Sans JP',sans-serif;
  font-size:14px;line-height:1.9;color:rgba(255,255,255,.5);
  border-left:2px solid rgba(var(--mc-rgb),.25);
  padding-left:16px;margin-bottom:24px;
}
.drm-modal-close{
  display:none;
}
.drm-modal-close-x{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(var(--mc-rgb),.3);
  border-radius:2px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);
  box-shadow:0 0 10px rgba(var(--mc-rgb),.15);
  transition:background .2s, border-color .2s, box-shadow .2s, color .2s, transform .15s;
  z-index:10;
}
.drm-modal-close-x:hover{
  background:rgba(var(--mc-rgb),.15);
  border-color:rgba(var(--mc-rgb),.8);
  box-shadow:0 0 18px rgba(var(--mc-rgb),.4);
  color:#fff;
  transform:scale(1.1);
}
.drm-modal-close-x svg{width:14px;height:14px;pointer-events:none;}
.drm-modal-tag{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(var(--mc-rgb),1);border:1px solid rgba(var(--mc-rgb),.25);
  padding:3px 8px;margin:3px 3px 3px 0;
}

/* ══════════════════════════════════════════════════════════════
   ── SCROLL SEQUENCE ANIMATIONS ───────────────────────────── */

/* ── Funnel layers (drop in top-to-bottom) ── */
.funnel-layer, .funnel-txt {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
#drm-funnel-anim.seq-in .funnel-layer.fl-0 { opacity:1; transform:none; transition-delay:.05s }
#drm-funnel-anim.seq-in .funnel-layer.fl-1 { opacity:1; transform:none; transition-delay:.22s }
#drm-funnel-anim.seq-in .funnel-layer.fl-2 { opacity:1; transform:none; transition-delay:.38s }
#drm-funnel-anim.seq-in .funnel-layer.fl-3 { opacity:1; transform:none; transition-delay:.54s }
#drm-funnel-anim.seq-in .funnel-txt.ft-0 { opacity:1; transform:none; transition-delay:.12s }
#drm-funnel-anim.seq-in .funnel-txt.ft-1 { opacity:1; transform:none; transition-delay:.28s }
#drm-funnel-anim.seq-in .funnel-txt.ft-2 { opacity:1; transform:none; transition-delay:.44s }
#drm-funnel-anim.seq-in .funnel-txt.ft-3 { opacity:1; transform:none; transition-delay:.60s }

/* ── Flow nodes (slide in left-to-right) ── */
.flow-node {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
#cycle-flow.seq-in .fn-0 { opacity:1; transform:none; transition-delay:.04s }
#cycle-flow.seq-in .fn-1 { opacity:1; transform:none; transition-delay:.16s }
#cycle-flow.seq-in .fn-2 { opacity:1; transform:none; transition-delay:.28s }
#cycle-flow.seq-in .fn-3 { opacity:1; transform:none; transition-delay:.40s }
#cycle-flow.seq-in .fn-4 { opacity:1; transform:none; transition-delay:.52s }
#cycle-flow.seq-in .fn-5 { opacity:1; transform:none; transition-delay:.64s }

/* ── DRM cycle stages (slide in left-to-right) ── */
#drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in 
/* ── Mobile illo-step items ── */
.illo-step, .illo-step-arr {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
#cycle-flow.seq-in .illo-step:nth-child(1)  { opacity:1; transform:none; transition-delay:.04s }
#cycle-flow.seq-in .illo-step-arr:nth-child(2) { opacity:1; transform:none; transition-delay:.12s }
#cycle-flow.seq-in .illo-step:nth-child(3)  { opacity:1; transform:none; transition-delay:.18s }
#cycle-flow.seq-in .illo-step-arr:nth-child(4) { opacity:1; transform:none; transition-delay:.24s }
#cycle-flow.seq-in .illo-step:nth-child(5)  { opacity:1; transform:none; transition-delay:.30s }
#cycle-flow.seq-in .illo-step-arr:nth-child(6) { opacity:1; transform:none; transition-delay:.36s }
#cycle-flow.seq-in .illo-step:nth-child(7)  { opacity:1; transform:none; transition-delay:.42s }
#cycle-flow.seq-in .illo-step-arr:nth-child(8) { opacity:1; transform:none; transition-delay:.48s }
#cycle-flow.seq-in .illo-step:nth-child(9)  { opacity:1; transform:none; transition-delay:.54s }
#cycle-flow.seq-in .illo-step-arr:nth-child(10){ opacity:1; transform:none; transition-delay:.60s }
#cycle-flow.seq-in .illo-step:nth-child(11) { opacity:1; transform:none; transition-delay:.66s }

/* ── Mobile orbit nodes (scale in) ── */
#drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in 
/* ── Orbit metrics ── */
#drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in #drm-cycle.seq-in 
/* ── Company section glass-morph readability ── */
#company .wrap{
  position:relative;z-index:1;
}
#company .company-layout > div:first-child,
#company .company-layout > div:last-child {
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border:1px solid rgba(80,160,255,.12);
  padding:clamp(20px,3vw,32px);
}

/* ── CAREER (共通) ─────────────────────────────────────────────── */
.career-section{
  padding:clamp(8px,2vw,36px) 0 clamp(28px,4vw,48px);
  border-top:1px solid var(--border);
  background:#000;
  position:relative;overflow:hidden;
}
.career-layout{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(48px,8vw,110px);
  align-items:start;
}
/* ── PC: 縦積み全幅 ── */
@media(min-width:601px){
  .career-layout{ grid-template-columns:1fr; gap:40px }
  .career-sticky{ position:static }
  #history-star-canvas{ height:140px!important; width:100%!important }
  .tl-year{  font-size:28px }
  .tl-title{ font-size:clamp(17px,2vw,20px); line-height:1.85 }
  .tl-tag{   font-size:13px;top:clamp(80px,10vh,110px); }
}
.career-note{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(14px,1.3vw,15px);font-weight:300;line-height:1.9;
  color:rgba(255,255,255,.45);
  margin-top:clamp(18px,2.5vw,28px);
}
.career-more{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(20px,3vw,32px);
  padding:14px 28px;
  border:1px solid rgba(0,255,136,.35);
  background:rgba(0,255,136,.06);
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(14px,1.6vw,16px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--pcb);text-decoration:none;
  transition:background .2s,border-color .2s;
}
.career-more:hover{background:rgba(0,255,136,.14);border-color:rgba(0,255,136,.6);}
.tl-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;letter-spacing:.32em;text-transform:uppercase;
  color:#ff3c50;opacity:.8;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.tl-label::after{content:'';flex:1;height:1px;background:rgba(0,255,136,.15)}
.tl-items{
  display:flex;flex-direction:column;gap:0;
  border-left:1px solid var(--border);margin-left:8px;
}
.tl-item{
  padding:14px 0 14px 20px;
  border-bottom:1px solid rgba(255,255,255,.04);
  position:relative;
}
.tl-item::before{
  content:'';position:absolute;left:-4px;top:20px;
  width:7px;height:7px;border-radius:50%;
  background:#000;border:1px solid rgba(255,255,255,.2);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.tl-item.milestone::before{
  background:rgba(0,255,136,.18);
  border-color:rgba(0,255,136,.55);
}
.tl-item.active::before{
  background:var(--pcb);border-color:var(--pcb);
  box-shadow:0 0 10px rgba(0,255,136,.55);
}
.tl-year{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pcb);opacity:.9;margin-bottom:6px;line-height:1;
}
.tl-item.milestone .tl-year{opacity:.9}
.tl-item.active .tl-year{opacity:1}
.tl-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(17px,2vw,20px);font-weight:400;
  letter-spacing:.06em;color:rgba(255,255,255,.8);
  margin-bottom:3px;
}
.tl-item.milestone .tl-title{color:#fff}
.tl-desc{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(15px,1.4vw,16px);font-weight:300;
  line-height:1.8;color:rgba(255,255,255,.45);
}
.tl-item.milestone .tl-desc{color:rgba(255,255,255,.62)}
.tl-item.active .tl-desc{color:rgba(255,255,255,.72)}
.tl-tag{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pcb);border:1px solid rgba(0,255,136,.28);
  padding:1px 8px;background:rgba(0,255,136,.04);
  margin-top:6px;
}
@media(max-width:700px){
  .career-layout{grid-template-columns:1fr}
  .career-sticky{position:static}
}

.section-eb{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:clamp(10px,1.2vw,18px);
}
.section-h{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(32px,5vw,64px);font-weight:200;
  letter-spacing:.04em;line-height:.96;text-transform:uppercase;
  margin-bottom:clamp(28px,4vw,52px);
}

/* ── SERVICES GRID (navy card style) ──────────────── */
.svc-wrap{
  margin-top:clamp(32px,5vw,56px);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}

.svc-row{will-change:background;
  background:#070e18;
  padding:clamp(20px,2.5vw,32px) clamp(16px,2.2vw,26px);
  display:flex;align-items:center;
  gap:clamp(12px,1.8vw,20px);
  text-decoration:none;color:var(--white);
  transition:background .2s;
  position:relative;
  min-width:0;overflow:hidden;
}
.svc-row:hover{background:rgba(0,255,136,.04)}
.svc-row:hover .svc-arr{transform:translate(3px,-3px);border-color:#fff}
.svc-n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.25em;
  color:var(--dim);flex-shrink:0;width:18px;
}
.svc-icon-g{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;opacity:.45;transition:opacity .25s;
}
.svc-row:hover .svc-icon-g{opacity:.9}
.svc-icon-g svg{width:100%;height:100%;display:block}
.svc-names{flex:1;min-width:0;}
.svc-ja{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(16px,2vw,22px);font-weight:300;
  color:var(--dim);margin-top:3px;
}
.svc-en{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(13px,1.4vw,15px);font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.svc-en.hi{color:rgba(0,255,136,.9)}
.svc-desc{display:none}
.svc-arr{
  width:28px;height:28px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,border-color .2s;margin-left:auto;
}
.svc-arr svg{width:11px;height:11px;stroke:var(--dim);fill:none;stroke-width:1.5}
/* レスポンシブ */
@media(max-width:860px){
  .svc-wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
  .svc-wrap{grid-template-columns:1fr}
  .svc-icon-g{width:36px;height:36px}
  .svc-row{padding:14px clamp(14px,4vw,20px)}
}

/* ── DRM more (mobile collapse) ───────────────────── */
.drm-more-btn{
  -webkit-appearance:none;appearance:none;
  display:none; /* JSで制御 */
  align-items:center;justify-content:center;
  gap:8px;
  width:100%;
  margin-top:16px;
  padding:14px 20px;
  background:rgba(0,255,136,.06);
  border:1px solid rgba(0,255,136,.5);
  border-radius:0;
  color:rgba(0,255,136,.95);
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.25em;text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 0 10px rgba(0,255,136,.2),inset 0 0 12px rgba(0,255,136,.05);
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.drm-more-btn:hover{background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.8);box-shadow:0 0 18px rgba(0,255,136,.35),inset 0 0 16px rgba(0,255,136,.08)}
.drm-more-btn svg{width:16px;height:16px;transition:transform .3s}
.drm-more-btn.open svg{transform:rotate(180deg)}

/* ── DRM cycle mobile EN/JP switch ────────────────── */

/* ── svc-tip hover label ─────────────────────────── */
.svc-tip{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pcb);opacity:0;
  transition:opacity .25s;
  pointer-events:none;
  white-space:nowrap;
  padding-right:4px;
}
.svc-row:hover .svc-tip{opacity:1}

/* ── DRM modal (JS動的生成) ── */

/* ── UFO Scroll To Top ───────────────────────────────────────── */
#ufo-top{
  position:fixed;
  right:clamp(12px,3vw,32px);
  bottom:clamp(12px,3vw,32px);
  width:160px;
  background:none;border:none;
  padding:0;cursor:pointer;
  opacity:0;pointer-events:none;
  transform:translateY(20px);
  transition:opacity .4s ease, transform .4s ease;
  z-index:9000;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
@media(max-width:600px){
  #ufo-top{ width:88px }
  #ufo-top-canvas{ width:88px!important; height:88px!important }
}
#ufo-top.visible{
  opacity:1;pointer-events:auto;
  transform:translateY(0);
}
#ufo-top:hover{
  transform:translateY(-6px);
}
#ufo-top-arrow{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  animation:ufoArrowPulse 1.6s ease-in-out infinite;
}
#ufo-top-arrow svg{ display:block; }
@keyframes ufoArrowPulse{
  0%,100%{opacity:.5;transform:translateY(0)}
  50%    {opacity:1; transform:translateY(-4px)}
}
#ufo-top-canvas{
  display:block;width:160px;height:160px;
}
@keyframes ufoTrailFade{
  0%  {opacity:1;  transform:translateY(0)   scale(1)}
  60% {opacity:.7; transform:translateY(18px) scale(.8)}
  100%{opacity:0;  transform:translateY(36px) scale(.2)}
}