:root{
  --bg:#0a0a0a;
  --panel:#141414;
  --line:#2b2b2b;
  --text:#f2f2f2;
  --muted:#a0a0a0;
  --red:#e0283f;
  --red-d:#b11d31;
  --display:"Bebas Neue","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;background:var(--bg)}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.9;font-size:16px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* film grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(10,10,10,.82);
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px);transition:background .3s}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--display);font-size:34px;letter-spacing:.04em;text-decoration:none;line-height:1}
.logo span{color:var(--red)}
.nav{display:flex;gap:30px;font-family:var(--display);font-size:20px;letter-spacing:.12em}
.nav a{position:relative;text-decoration:none;color:var(--text)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}

/* hero */
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 68px);display:flex;align-items:center;padding:70px 0 90px}
.smoke{position:absolute;border-radius:50%;pointer-events:none;filter:blur(40px);animation:drift 16s ease-in-out infinite}
.smoke.s1{width:620px;height:620px;left:-160px;top:-200px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%)}
.smoke.s2{width:520px;height:520px;right:-120px;bottom:-200px;background:radial-gradient(circle,rgba(224,40,63,.30),transparent 68%);animation-delay:-6s;animation-duration:20s}
.smoke.s3{width:420px;height:420px;left:38%;top:20%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%);animation-delay:-11s;animation-duration:24s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,34px) scale(1.12)}}
.bg-word{position:absolute;left:-1%;bottom:-.14em;font-family:var(--display);font-size:clamp(120px,27vw,420px);
  line-height:.85;letter-spacing:.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);
  pointer-events:none;user-select:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.eyebrow{font-family:var(--display);font-size:22px;letter-spacing:.24em;color:var(--red)}
.hero h1{margin-top:14px;font-size:clamp(32px,5.2vw,64px);line-height:1.38;font-weight:900;letter-spacing:.01em}
.hl{position:relative;display:inline-block;padding:0 .18em;z-index:0}
.hl::before{content:"";position:absolute;left:0;right:0;top:12%;bottom:6%;background:var(--red);z-index:-1;
  transform:scaleX(0);transform-origin:left;animation:wipe .8s .9s cubic-bezier(.7,0,.2,1) forwards}
@keyframes wipe{to{transform:scaleX(1)}}
.hero-text>p{margin-top:26px;max-width:540px;color:#cfcfcf}
.btn{display:inline-flex;align-items:center;gap:12px;margin-top:38px;padding:14px 34px;background:var(--red);color:#fff;
  text-decoration:none;font-family:var(--display);font-size:22px;letter-spacing:.14em;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:background .25s,transform .25s,padding .25s}
.btn::after{content:"→";font-family:sans-serif;transition:transform .25s}
.btn:hover{background:#fff;color:#0a0a0a;padding-right:44px}
.btn:hover::after{transform:translateX(4px)}

.hero-text .eyebrow,.hero-text h1,.hero-text>p,.hero-text .btn{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-text .eyebrow{animation-delay:.1s}.hero-text h1{animation-delay:.25s}
.hero-text>p{animation-delay:.5s}.hero-text .btn{animation-delay:.65s}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.hero-art{opacity:0;animation:fadeUp 1.1s .45s cubic-bezier(.2,.7,.2,1) forwards}
.hero-art svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
@keyframes grow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.35)}}
.hero-art .float,.hero-art .pulse,.hero-art .bar{transform-box:fill-box}
.hero-art .float{animation:floaty 6s ease-in-out infinite}
.hero-art .float.b{animation-duration:5s;animation-delay:-2s}
.hero-art .float.c{animation-duration:7s;animation-delay:-4s}
.hero-art .pulse{transform-origin:center;animation:pulse 3.2s ease-in-out infinite}
.hero-art .d1{animation-delay:-.8s}.hero-art .d2{animation-delay:-1.6s}.hero-art .d3{animation-delay:-2.4s}
.hero-art .bar{transform-origin:bottom;animation:grow 3.4s ease-in-out infinite}

/* marquee */
.marquee{background:var(--red);color:#0a0a0a;overflow:hidden;border-block:1px solid #000;transform:rotate(-1.2deg);margin:-14px -2% 0;position:relative;z-index:3}
.marquee .track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.marquee span{font-family:var(--display);font-size:34px;letter-spacing:.14em;padding:8px 26px;white-space:nowrap}
.marquee span::after{content:"✕";margin-left:52px;font-family:sans-serif;font-size:20px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
section{padding:110px 0}
.sec-head{margin-bottom:50px}
.sec-head .en{font-family:var(--display);font-size:clamp(54px,9vw,104px);line-height:.95;letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.sec-head h2{margin-top:6px;font-size:18px;font-weight:700;letter-spacing:.14em;color:var(--text)}
.sec-head h2::before{content:"";display:inline-block;width:30px;height:3px;background:var(--red);vertical-align:middle;margin-right:12px}

.lead{max-width:820px;font-size:17px}
.lead p+p{margin-top:1.2em;color:#cfcfcf}
.lead .big{font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.6;color:#fff}
.lead .big b{color:var(--red)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.tile{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);padding:30px 28px 32px;
  min-height:290px;display:flex;flex-direction:column;transition:background .3s,transform .3s,border-color .3s}
.tile.t1,.tile.t2{grid-column:span 3}
.tile.t3,.tile.t4,.tile.t5{grid-column:span 2}
.tile .num{position:absolute;right:16px;top:-8px;font-family:var(--display);font-size:120px;line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.18);transition:-webkit-text-stroke-color .3s,transform .4s}
.tile .ico{width:56px;height:56px;padding:12px;border:1.5px solid var(--red);color:var(--red);margin-bottom:auto;
  transition:background .3s,color .3s}
.tile h3{margin-top:34px;font-size:20px;line-height:1.5;font-weight:900}
.tile p{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.8;transition:color .3s}
.tile:hover{background:var(--red);border-color:var(--red);transform:translateY(-4px)}
.tile:hover p{color:#fff}
.tile:hover .ico{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.tile:hover .num{-webkit-text-stroke-color:rgba(255,255,255,.65);transform:translateX(-8px)}
.tile::before{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:var(--red);transition:width .5s}
.tile:hover::before{width:100%;background:#fff}

/* company */
.table{width:100%;border-collapse:collapse;border-top:2px solid var(--red)}
.table th,.table td{padding:24px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table th{width:210px;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.14em;color:var(--red);white-space:nowrap}
.table th small{display:block;font-family:"Noto Sans JP",sans-serif;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.table td{font-size:16px}
.table ul{list-style:none}
.table li::before{content:"■";color:var(--red);font-size:9px;margin-right:10px;vertical-align:2px}
.table a{color:#fff;text-decoration-color:var(--red);text-underline-offset:4px}

/* contact */
.contact{position:relative;overflow:hidden;background:var(--red);color:#fff;text-align:left}
.contact .sec-head .en{-webkit-text-stroke-color:rgba(255,255,255,.85)}
.contact .sec-head h2::before{background:#0a0a0a}
.contact p{max-width:560px}
.contact .mail{display:inline-block;margin-top:30px;font-family:var(--display);font-size:clamp(34px,6vw,72px);letter-spacing:.04em;line-height:1.1;
  color:#0a0a0a;text-decoration:none;border-bottom:4px solid #0a0a0a;word-break:break-all;transition:color .25s,border-color .25s}
.contact .mail:hover{color:#fff;border-color:#fff}
.contact .bg-word{color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.18);right:-2%;left:auto;bottom:-.2em;font-size:clamp(100px,22vw,320px)}
.contact .wrap{position:relative;z-index:1}

/* footer */
.site-footer{padding:34px 0;font-size:13px;color:var(--muted);background:#000;border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--red)}

/* policy */
.policy{padding:70px 24px 100px;max-width:820px}
.policy h1{font-family:var(--display);font-weight:400;font-size:54px;letter-spacing:.06em;margin-bottom:28px;line-height:1.1}
.policy h2{font-size:18px;margin:38px 0 8px;padding-left:14px;border-left:4px solid var(--red)}
.policy p,.policy li{color:#d4d4d4}
.policy ul{margin:8px 0 0 1.4em}
.policy a{text-decoration-color:var(--red);text-underline-offset:3px}
.policy .date{margin-top:44px;color:var(--muted);font-size:14px}

/* reveal */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .tile.reveal.in{transition:opacity .8s,transform .3s,background .3s,border-color .3s;transition-delay:var(--d,0s),0s,0s,0s}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:420px;margin:10px auto 0}
  .hero{min-height:0;padding:56px 0 100px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile.t1,.tile.t2,.tile.t3,.tile.t4{grid-column:span 1}
  .tile.t5{grid-column:span 2}
}
@media(max-width:640px){
  section{padding:76px 0}
  .nav a:not(.cta){display:none}
  .tiles{grid-template-columns:1fr}
  .tile.t5{grid-column:span 1}
  .tile{min-height:240px}
  .table th,.table td{display:block;width:100%;padding:14px 4px}
  .table th{border-bottom:none;padding-bottom:2px}
  .marquee span{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-text .eyebrow,.hero-text h1,.hero-text>p,.hero-text .btn,.hero-art{opacity:1}
  .hl::before{transform:scaleX(1)}
  .js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}