/* ===== BASE ===== */
body { font-family: 'Noto Sans JP', sans-serif; }

/* ===== SCROLL ANIMATION ===== */
.su { opacity:0; transform:translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.su.on { opacity:1; transform:none; }
.su.t1 { transition-delay:.1s; }
.su.t2 { transition-delay:.2s; }
.su.t3 { transition-delay:.3s; }
.su.t4 { transition-delay:.4s; }

/* ===== HERO ANIMATION ===== */
@keyframes riseIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.rise { opacity:0; animation: riseIn .9s cubic-bezier(.16,1,.3,1) forwards; }
.d1 { animation-delay:.1s; } .d2 { animation-delay:.3s; } .d3 { animation-delay:.5s; }
.d4 { animation-delay:.7s; } .d5 { animation-delay:.9s; }

/* ===== NAV ===== */
#nav { transition: background .3s, box-shadow .3s; }
#nav.scrolled { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); box-shadow: 0 1px 12px rgba(0,0,0,.08); }

#nav:not(.scrolled) .nav-brand       { color: #ffffff; }
#nav.scrolled       .nav-brand       { color: #1e3a8a; }
#nav:not(.scrolled) .nav-sub         { color: rgba(255,255,255,.75); }
#nav.scrolled       .nav-sub         { color: #2563eb; }
#nav:not(.scrolled) .nav-link        { color: rgba(255,255,255,.9); }
#nav:not(.scrolled) .nav-link:hover  { color: #ffffff; }
#nav.scrolled       .nav-link        { color: #334155; }
#nav.scrolled       .nav-link:hover  { color: #1d4ed8; }
#nav:not(.scrolled) #hamburger       { color: rgba(255,255,255,.9); }
#nav.scrolled       #hamburger       { color: #1e3a8a; }

/* ===== MOBILE MENU ===== */
#mobile-menu { transition: opacity .3s ease, visibility 0s linear .3s; opacity:0; visibility:hidden; pointer-events:none; }
#mobile-menu.open { opacity:1; visibility:visible; pointer-events:auto; transition: opacity .3s ease, visibility 0s linear 0s; }

/* ===== FLOATING CTA ===== */
#float-cta { transition: opacity .3s, transform .3s; }
#float-cta.hide { opacity:0; pointer-events:none; transform: translateY(16px); }

/* ===== JOB CARD ===== */
.job-card { transition: box-shadow .25s, border-color .25s; }

/* ===== FORM ===== */
.form-input { transition: border-color .2s, box-shadow .2s; }
.form-input:focus { outline:none; border-color:#1565C0; box-shadow: 0 0 0 3px rgba(21,101,192,.15); }

/* ===== PHOTO SLOT ===== */
.photo-slot { position:relative; overflow:hidden; flex-shrink:0; background: linear-gradient(135deg, #1565C0 0%, #0A3880 100%); }
.photo-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.photo-slot .ph-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:rgba(255,255,255,.18); pointer-events:none; }

/* ===== CTA BUTTONS ===== */
.btn-cta     { background-color:#FF6B35; color:#fff; font-weight:900; border-radius:.75rem; transition:background-color .15s; }
.btn-cta:hover { background-color:#E55A2B; }
.btn-cta-nav { background-color:#FF6B35; color:#fff; font-weight:700; border-radius:9999px; transition:background-color .15s; }
.btn-cta-nav:hover { background-color:#E55A2B; }