/* =======================
   Base / Variables
   ======================= */
:root{
  --bg:#0b0b0f;   /* page background */
  --fg:#eaeaea;   /* text */
  --muted:#9aa0a6;
  --acc:#7df9ff;  /* accent */
  --w:1100px;     /* content width */
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout utils */
.alignwide{max-width:var(--w);margin-inline:auto;padding-inline:16px}
.section{padding:clamp(56px,10vw,120px) 0}
h1,h2,h3{letter-spacing:.02em;margin:0 0 .6em}

/* =======================
   Buttons
   ======================= */
.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  background:var(--acc);
  color:#000;
  font-weight:700;
  transition:transform .2s ease, background .2s ease
}
.btn:hover{transform:translateY(-2px); background:#5ee6ff}

/* =======================
   Hero
   ======================= */
.hero{
  position:relative;
  min-height:92vh;
  background:#0b0b0f;
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden
}
.hero .inner{
  position:relative;
  z-index:2;
  max-width:var(--w);
  padding:clamp(80px,16vh,200px) 16px
}

/* Watermark (single definition) */
.hero .watermark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:1;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  font-weight:900;
  letter-spacing:.08em;
  font-size:min(14vw,140px);
  color:rgba(255,255,255,.15);
  text-shadow:0 0 2px rgba(0,0,0,.5);
  filter:blur(1px);
  transform:translateY(-6%)
}

/* Headline & sub */
.hero h1{font-size:clamp(32px,6vw,68px); font-weight:800; line-height:1.2; margin:0 0 .5em}
.hero .sub{font-size:clamp(16px,2.5vw,22px); opacity:.9; margin:0 0 1.2em}

/* Drop-in animation (fixed duration typo) */
.hero .stack{
  opacity:0;
  transform:translateY(-24vh) scale(.98);
  filter:blur(4px);
  will-change:transform, opacity, filter
}
.hero.is-visible .stack{
  animation:heroDrop .75s cubic-bezier(.16,1,.3,1) .15s forwards
}
.hero.is-visible .stack .sub{animation:fadeUp .6s ease .95s forwards}
.hero.is-visible .stack .btn{animation:fadeUp .6s ease 1.1s forwards}

@keyframes heroDrop{
  to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:none}
}

/* Mobile-safe watermark */
@media (max-width:768px){
  .hero .watermark{
    font-size:clamp(40px,12vw,140px);
    transform:none;
    padding:0 5vw
  }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .hero .stack,
  .hero.is-visible .stack,
  .hero.is-visible .stack .sub,
  .hero.is-visible .stack .btn{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important
  }
}

/* =======================
   Full-bleed background helper
   Usage: <section class="bg-photo" style="--bg:url('assets/xxx.jpg')">
   ======================= */
.bg-photo{
  position:relative;
  color:#fff;
  background:var(--bg) center/cover no-repeat;
  overflow:hidden
}
.bg-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25))
}
.bg-photo > *{position:relative; z-index:1}

/* =======================
   Grid / Card
   ======================= */
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:#101015cc;
  backdrop-filter:saturate(120%) blur(2px);
  border:1px solid #1e1e25;
  border-radius:16px;
  padding:22px;
  transition:transform .25s ease, border-color .25s ease
}
.card:hover{transform:translateY(-4px); border-color:#2a2a33}

/* =======================
   Flow (service flow)
   ======================= */
.flow h2{margin-bottom:1rem}
.flow-steps{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
}
@media (min-width:980px){ .flow-steps{grid-template-columns:repeat(3,1fr)} }

.flow-step{
  background:#101015cc;
  color:#eaeaea;
  border:1px solid #1e1e25;
  border-radius:16px;
  padding:18px 16px;
  backdrop-filter:saturate(120%) blur(2px);
  transition:transform .45s ease, opacity .45s ease, border-color .25s ease;
  opacity:1; transform:none
}
.flow-step:hover{border-color:#2a2a33}
.flow-step.reveal{opacity:0; transform:translateY(12px)}
.flow-step.reveal.is-visible{opacity:1; transform:none}

.flow .ico{
  width:36px; height:36px; border-radius:10px;
  background:#0f1520; border:1px solid #2a3745;
  display:grid; place-items:center; margin-bottom:10px
}
.flow .ico svg{width:20px;height:20px;fill:#9beaff}
.flow-step h3{margin:.1rem 0 .25rem; font-size:1.05rem}
.flow-step p{margin:0; color:#9aa0a6; font-size:.95rem; line-height:1.6}
.flow-cta{text-align:center; margin-top:22px}
.flow-cta .btn{padding:12px 22px; border-radius:999px; font-weight:700}

/* =======================
   Recruit
   ======================= */
.recruit .lead{color:#9aa0a6; margin:.2rem 0 1.2rem}
.recruit-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.recruit .list{margin:0; padding-left:1.1em}
.recruit .list li{margin:.35rem 0; color:#cfd3d7}
.recruit .card{opacity:1; transform:none}
.recruit .card.reveal{opacity:0; transform:translateY(12px); transition:.45s ease}
.recruit .card.reveal.is-visible{opacity:1; transform:none}
.recruit-cta{text-align:center; margin-top:22px}
.recruit-cta .btn{padding:12px 22px; border-radius:999px; font-weight:700}

/* =======================
   Company (sunset background)
   ======================= */
.company{
  position:relative;
  color:#fff;
  background:url('assets/sunset-1200.jpg') center/cover no-repeat;
  padding:80px 20px
}
.company::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:rgba(0,0,0,.55)
}
.company .alignwide{position:relative; z-index:1}

/* Optional card layout for company items */
.company-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.company-item{
  background:#101015cc; border:1px solid #1e1e25; border-radius:14px;
  padding:18px 16px; color:#eaeaea; backdrop-filter:saturate(120%) blur(2px);
  transition:.4s ease; opacity:1; transform:none
}
.company-item:hover{border-color:#2a2a33}
.company-item h3{margin:.1rem 0 .4rem; font-size:1rem; color:#7df9ff; letter-spacing:.03em}
.company-item p{margin:0; color:#cfd3d7; line-height:1.6}
.company-item.wide{grid-column:1/-1}

/* =======================
   Access / Map
   ======================= */
.map h2{text-align:center; margin-bottom:.6rem}
.map-address{text-align:center; margin-bottom:1rem; color:#cfd3d7; font-size:1rem}
.map-wide{display:block; width:100%; max-width:100%; overflow:hidden}
.map-wide img{display:block; width:100%; height:auto; object-fit:cover; transition:transform .3s ease, opacity .3s ease}
.map-wide:hover img{transform:scale(1.02); opacity:.95}

/* =======================
   CTA / Footer
   ======================= */
.cta{text-align:center; background:linear-gradient(180deg,#101015,rgba(16,16,21,0))}
.footer{padding:24px 0; border-top:1px solid #1a1a1f}

/* =======================
   Reveal animation (generic)
   ======================= */
.reveal{
  opacity:0;
  transform:translateY(18px);
  clip-path:inset(0 0 10% 0);
  transition:opacity .7s ease, transform .7s ease, clip-path 1s cubic-bezier(.2,.8,.2,1)
}
.reveal.is-visible{opacity:1; transform:none; clip-path:inset(0 0 0 0)}

/* Small screens tweaks */
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
}