body {
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  perspective: 1000px;
}
.font-poppins { font-family: 'Poppins', sans-serif; }

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-gradient {
  background: linear-gradient(-45deg, #0f172a, #0b2a4c, #005f73, #0a9396);
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

.reveal-text .word {
  opacity: 0;
  transform: translateY(30px) rotate(5deg);
  transform-origin: bottom left;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#positions { position: relative; z-index: 2; }
#hero-content { transform-style: preserve-3d; will-change: transform; }

.twist-grad { background-image: linear-gradient(90deg,#00A1CC, #4fd1c5, #00A1CC); }
.twist-stroke {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 1px rgba(0,0,0,.05), 0 0 20px rgba(0,161,204,.1);
}
.twist-ring {
  --deg: 0deg;
  background:
    radial-gradient(closest-side, transparent 60%, rgba(0,161,204,0.15) 62%, transparent 64%),
    conic-gradient(from var(--deg), rgba(0,161,204,.6), rgba(79,209,197,.4), rgba(0,161,204,.6));
  mask: radial-gradient(circle at center, transparent 0 48%, #000 50%);
}
.particle { position: absolute; width: 10px; height: 10px; border-radius: 9999px; background: rgba(0,161,204,.18); filter: blur(2px); }
.p1 { left: 10%; top: 30%; width: 12px; height: 12px; }
.p2 { right: 15%; top: 55%; }
.p3 { left: 50%; bottom: 12%; width: 8px; height: 8px; }
.chip {
  border: 1px solid rgba(0,161,204,.35);
  background: rgba(0,161,204,.06);
  color: #0b3a46;
  padding: .5rem .9rem;
  border-radius: 9999px;
  font-size: .85rem;
  backdrop-filter: saturate(120%) blur(2px);
}
@media (prefers-reduced-motion: reduce) {
  .twist-ring { transition: none !important; }
}

.js #innovation-twist .twist-kicker,
.js #innovation-twist .twist-title,
.js #innovation-twist .twist-lines p,
.js #innovation-twist .chip {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

.fastlane-persp { perspective: 1000px; overflow: hidden; }
.tunnel-bg {
  position: absolute;
  inset: -30% -30%;
  transform: rotateX(55deg) translateZ(0);
  backface-visibility: hidden;
  will-change: background-position, transform;
  filter: saturate(120%);
  --line-color: rgba(0,161,204,0.18);
  --gap: 36px;
  --thick: 3px;
  --speed: 600px;
  background:
    repeating-linear-gradient(to bottom, var(--line-color) 0, var(--line-color) var(--thick), transparent var(--thick), transparent var(--gap)),
    radial-gradient(60% 80% at 50% 20%, rgba(0,161,204,0.12), transparent 65%);
  background-size: 100% var(--gap), 100% 100%;
  background-repeat: repeat, no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  animation: tunnel-scroll 4.5s linear infinite;
}
@keyframes tunnel-scroll {
  from { background-position: 0 0, 50% 0; }
  to   { background-position: 0 var(--speed), 50% 0; }
}
@media (prefers-reduced-motion: reduce) { .tunnel-bg { animation: none; } }

.ow-edge-fade-left{
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, transparent 100%);
  background: linear-gradient(to right, rgba(2,6,23,0.95), transparent);
}
.ow-edge-fade-right{
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
          mask-image: linear-gradient(to left, #000 0%, transparent 100%);
  background: linear-gradient(to left, rgba(2,6,23,0.95), transparent);
}
#ow-track::-webkit-scrollbar { height: 10px; }
#ow-track::-webkit-scrollbar-track { background: transparent; }
#ow-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 9999px; }

.heading-accent{
  background: linear-gradient(90deg,#00A1CC, #4fd1c5 60%, #00A1CC);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.syn-cyan{ color:#00A1CC; }
.grow-line{ transform: scaleX(0); transition: transform .7s cubic-bezier(.22,.61,.36,1); }
#culture.is-in .grow-line{ transform: scaleX(1); }
.float-blob{
  position:absolute; left:-12%; bottom:-10%;
  width:52vmin; height:52vmin; border-radius:9999px;
  background: radial-gradient(closest-side, rgba(0,161,204,.18), transparent 70%);
  filter: blur(30px); animation: blob-move 16s ease-in-out infinite;
}
@keyframes blob-move{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(8%, -6%) scale(1.08); }
  100%{ transform: translate(0,0) scale(1); }
}

.v-card{
  position: relative;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 6px 20px rgba(2,6,23,.06);
  transform-style: preserve-3d;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) rotateX(0.0001deg);
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}
.v-card.in{ opacity:1; transform: translateY(0) rotateX(0); }
.v-card-inner{ position: relative; padding: 1.5rem; }
.v-leading-bar{
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(#00A1CC,#4fd1c5);
  transform: scaleY(0); transform-origin: top;
  transition: transform .6s cubic-bezier(.16,.84,.44,1);
}
.v-card.in .v-leading-bar{ transform: scaleY(1); }
.v-icon{
  width: 40px; height: 40px; border-radius: 9999px;
  background: rgba(0,161,204,.08); color:#0ea5b7;
  display:flex; align-items:center; justify-content:center;
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 0 0 rgba(0,161,204,0);
}
.v-card.in .v-icon{ transform: translateZ(0) scale(1.04); box-shadow: 0 10px 30px rgba(0,161,204,.20); }
.v-title{ font-weight: 700; font-size: 1.125rem; margin-top: .75rem; }
.v-desc{ margin-top:.25rem; color:#475569; font-size:.95rem; }
.v-list{ margin-top: .75rem; padding-left: 1.1rem; color:#1f2937; font-size:.9rem; list-style: disc; }
.v-card:hover{ transform: translateY(-2px) rotateX(0) rotateZ(0.1deg); }
.v-card:active::after, .v-card:hover::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 120px at var(--rx,50%) var(--ry,50%), rgba(0,161,204,.09), transparent 60%);
  pointer-events:none; transition: background .2s ease;
}

.jn-grad{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,161,204,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(0,161,204,.16), transparent 65%),
    linear-gradient(180deg,#0b1220 0%, #0b1e2a 40%, #071823 100%);
}
.jn-grid{
  opacity:.12;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 36px 36px;
}
.jn-lines{
  pointer-events:none;
  background: repeating-linear-gradient(to right, rgba(79,209,197,.14) 0 2px, transparent 2px 10px);
  mix-blend-mode: screen; opacity:.25;
  animation: jn-lines-move 8s linear infinite;
}
@keyframes jn-lines-move{ from{ background-position:0 0; } to{ background-position:-400px 0; } }
.jn-blob{
  position:absolute; width:44vmin; height:44vmin; border-radius:9999px; filter: blur(28px);
  background: radial-gradient(closest-side, rgba(0,161,204,.16), transparent 70%);
  animation: jn-blob-float 16s ease-in-out infinite;
}
.jn-blob-a{ left:-12%; top:10%; animation-delay:0s; }
.jn-blob-b{ right:-10%; bottom:-8%; animation-delay:4s; }
@keyframes jn-blob-float{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6%, -4%) scale(1.06); }
  100%{ transform:translate(0,0) scale(1); }
}
.jn-accent{ background: linear-gradient(90deg,#00A1CC,#4fd1c5 60%,#00A1CC); -webkit-background-clip:text; background-clip:text; color:transparent; }
.jn-card{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter:saturate(120%) blur(4px);
  overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.15);
  transform: translateY(10px) scale(.98); opacity:0;
  will-change: transform, opacity;
}
.jn-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(500px 120px at var(--mx,50%) var(--my,50%), rgba(0,161,204,.10), transparent 60%);
  transition: background .2s ease;
}
.jn-card-in{ padding:1.5rem; }
.jn-card-title{ font-weight:800; font-size:1.25rem; letter-spacing:.01em; }
.jn-card-desc{ margin-top:.4rem; color:#cbd5e1; }
.jn-card:hover{ transform: translateY(-2px) scale(1.0); }
#jn-cta.is-hover { transform: translate(var(--dx,0), var(--dy,0)) scale(1.02); box-shadow:0 14px 40px rgba(0,161,204,.35); }
.jn-ticker{ display:flex; white-space:nowrap; will-change: transform; }
.jn-ticker span{ padding-right:2rem; font-weight:800; letter-spacing:.08em; color:#00A1CC; }
@keyframes tickerLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.ww-blob{ position:absolute; width:48vmin; height:48vmin; border-radius:9999px; filter: blur(28px);
  background: radial-gradient(closest-side, rgba(0,161,204,.12), transparent 70%);
  animation: ww-float 18s ease-in-out infinite; }
.ww-blob-a{ left:-14%; top:-6%; }
.ww-blob-b{ right:-10%; bottom:-12%; animation-delay: 6s; }
@keyframes ww-float{ 0%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6%,-4%) scale(1.06);} 100%{ transform: translate(0,0) scale(1);} }
.ww-underline{ transform: scaleX(0); transition: transform .7s cubic-bezier(.22,.61,.36,1); }
#who-we-want.is-in .ww-underline{ transform: scaleX(1); }
.ww-card{
  position:relative; border:1px solid rgba(15,23,42,.08); border-radius:1rem;
  background:#fff; box-shadow: 0 8px 24px rgba(2,6,23,.06);
  transform: translateY(10px) scale(.98); opacity:0;
  overflow:hidden; will-change: transform, opacity;
}
.ww-card-in{ padding:1.25rem 1.25rem 1rem; position:relative; }
.ww-icon{
  width:40px; height:40px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  background: rgba(0,161,204,.08); color:#0ea5b7;
  box-shadow: 0 0 0 rgba(0,161,204,0); transition: transform .3s ease, box-shadow .3s ease;
}
.ww-title{ font-weight:800; font-size:1.1rem; margin-top:.75rem; letter-spacing:.005em; }
.ww-desc{ color:#475569; margin-top:.25rem; }
.ww-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(500px 120px at var(--mx,50%) var(--my,50%), rgba(0,161,204,.08), transparent 60%);
  transition: background .2s ease;
}
.ww-card:hover{ transform: translateY(-2px) scale(1.0); }
.ww-card.in .ww-icon{ transform: scale(1.05); box-shadow: 0 10px 30px rgba(0,161,204,.15); }

.proc-blob{ position:absolute; width:48vmin; height:48vmin; border-radius:9999px; filter: blur(28px);
  background: radial-gradient(closest-side, rgba(0,161,204,.12), transparent 70%); animation: proc-float 18s ease-in-out infinite; }
.proc-blob-a{ left:-14%; top:-8%; }
.proc-blob-b{ right:-12%; bottom:-10%; animation-delay:6s; }
@keyframes proc-float{ 0%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(6%,-4%) scale(1.06);} 100%{ transform: translate(0,0) scale(1);} }
.pr-underline{ transform: scaleX(0); transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.proc-badge{
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,161,204,.08); color:#0ea5b7; font-weight:800;
  font-size: 1rem; line-height: 1;
  margin-right: .5rem;
  box-shadow: 0 0 0 rgba(0,161,204,0);
  transform: translateY(6px) scale(0.9);
  transition: background-color .3s ease;
}
.proc-step:hover .proc-badge{
  background: rgba(0,161,204,.15);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 161, 204, 0.25);
}
.proc-card{
  background:#fff; border:1px solid rgba(15,23,42,.08);
  border-radius: 1rem; padding:1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}
.proc-title{ font-weight:800; letter-spacing:.01em; }
.proc-desc{ color:#475569; margin-top:.25rem; font-size:.95rem; }
.proc-line{ position:absolute; }
.proc-line-fill{ transition: height .6s cubic-bezier(.22,.61,.36,1); }

.ju-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; font-weight: 700; font-size: 1.05rem; color: #fff;
  background: rgba(0,161,204,0.25); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,161,204,0.25); transition: all 0.3s ease;
}
.ju-btn-primary:hover {
  background: rgba(0,161,204,0.4);
  box-shadow: 0 12px 32px rgba(0,161,204,0.35);
  transform: translateY(-2px);
}
.ju-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; font-weight: 600; font-size: 1.05rem; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 9999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.ju-btn-ghost:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }

@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ #join-us *{ animation:none !important; transition:none !important; } }
.ju-underline{ transform:scaleX(0); transition:transform .7s cubic-bezier(.22,.61,.36,1); }
#join-us.is-in .ju-underline{ transform:scaleX(1); }

body.recruit-hero-page { perspective: none !important; }
.recruit-hero-page #site-header {
  position: sticky !important; top: 0; left: 0; right: 0; z-index: 9999;
  background: transparent !important; color: #fff !important; border-bottom: none;
  backdrop-filter: none !important; transition: color .3s;
}
.recruit-hero-page #site-header a,
.recruit-hero-page #site-header nav,
.recruit-hero-page #site-header h1,
.recruit-hero-page #site-header h2,
.recruit-hero-page #site-header h3 { color: #fff !important; }
.recruit-hero-page.scrolled #site-header { background: transparent !important; color: #fff !important; }
.recruit-hero-page.scrolled #site-header a { color: #fff !important; }
.recruit-hero-page main { padding-top: 0 !important; }
#hero, #innovation-twist { top: 0 !important; }