/* ===== CSS Variables ===== */
:root {
  --ink: #0F0F0F;
  --accent: #F5E13C;
  --bg: #F1ECE0;
}

html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.font-display { font-family: "Archivo Black", "Anton", sans-serif; letter-spacing: 0.02em; }
.stroke-text { -webkit-text-stroke: 2px var(--ink); color: transparent; }
.stroke-accent { -webkit-text-stroke: 1.5px var(--ink); color: var(--accent); }
.h-jp { letter-spacing: 0.02em; }

/* ===== Buttons ===== */
.btn-base {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 34px; font-weight: 800; font-size: 16px;
  border-radius: 999px; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--ink); color: #fff; box-shadow: 6px 6px 0 var(--accent); }
.btn-primary:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--accent); }
.btn-accent { background: var(--accent); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.btn-accent:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); padding: 16px 28px;
  border-radius: 999px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .15s ease;
}
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-arrow::after { content: "→"; font-weight: 900; }

.shadow-pop { box-shadow: 6px 6px 0 var(--accent); }
.shadow-pop-ink { box-shadow: 6px 6px 0 var(--ink); }
.shadow-pop-lg { box-shadow: 14px 14px 0 var(--accent); }

/* ===== Marquee ===== */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: marquee 32s linear infinite;
  font-family: "Archivo Black", sans-serif;
  font-size: 38px;
}
.marquee-dot {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 999px; background: var(--accent);
  margin: 0 24px; vertical-align: middle;
}

/* ===== FAQ Accordion ===== */
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 28px;
}
.faq-item.open .faq-a { padding: 6px 28px 26px; max-height: 400px; }
.faq-item.open .faq-toggle { transform: rotate(45deg); background: var(--ink); color: var(--accent); }

/* ===== Header ===== */
.header-blur { transition: background .25s ease, box-shadow .25s ease, padding .25s ease; }
.header-blur.scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ===== Misc ===== */
.aspect-4-5 { aspect-ratio: 4/5; }
.aspect-4-3 { aspect-ratio: 4/3; }

/* ===== Mobile Navigation ===== */
#mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 40;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
#mobile-nav.is-open { display: flex; }
body.nav-open { overflow: hidden; }

/* Hamburger button */
#hamburger {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px; cursor: pointer;
  background: none; border: none; z-index: 50; position: relative;
}
@media (min-width: 768px) { #hamburger { display: none; } }
.hamburger-line {
  display: block; width: 24px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#hamburger.is-open .hamburger-line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#hamburger.is-open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#hamburger.is-open .hamburger-line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav-link {
  font-size: 1.5rem; font-weight: 900; letter-spacing: 0.04em;
  color: var(--ink); transition: color 0.15s ease; text-decoration: none;
}
.mobile-nav-link:hover { color: var(--accent); }
.mobile-nav-link .nav-num {
  font-family: "Archivo Black", sans-serif; font-size: 0.7rem;
  color: rgba(15,15,15,0.4); margin-right: 8px;
}

/* ===== CF7 field helpers ===== */
.cf7-field { display: flex; flex-direction: column; gap: 6px; }
.cf7-required {
  background: var(--ink); color: #fff;
  font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 700;
}

/* ===== Responsive Table Fix ===== */
@media (max-width: 640px) {
  .job-table th, .job-table td { display: block; width: 100%; }
  .job-table th { padding-bottom: 2px; border-bottom: none; }
  .company-table th, .company-table td { display: block; width: 100%; }
  .company-table th { border-right: none; border-bottom: none; padding-bottom: 2px; }
}

/* ===== Page content styles ===== */
.page-content h2 {
  font-weight: 900; font-size: clamp(20px, 2.5vw, 26px);
  margin-top: 2.5rem; margin-bottom: 1rem;
  padding-left: 14px; border-left: 4px solid var(--accent); line-height: 1.3;
}
.page-content p { font-size: 15px; line-height: 1.9; color: rgba(15,15,15,0.8); margin-bottom: 1rem; }