/* GREEN 採用サイト デモ 共通スタイル */

:root {
  --c-primary: #FF8A1E;      /* オレンジ */
  --c-primary-dark: #E66F00;
  --c-secondary: #FFC72C;    /* イエロー */
  --c-accent: #FF5C5C;       /* コーラル(強調) */
  --c-dark: #2B2118;         /* 文字色(暖かいダークブラウン) */
  --c-cream: #FFF8EC;        /* 背景クリーム */
  --c-cream-soft: #FFF1DC;
  --c-line: #F2D9B6;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  color: var(--c-dark);
  background: var(--c-cream);
}

.font-display { font-family: "Zen Maru Gothic", sans-serif; }

/* ===== Header ===== */
.site-header {
  background: rgba(255, 248, 236, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--c-line);
}

.nav-link {
  position: relative;
  color: var(--c-dark);
  font-weight: 700;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 3px;
  background: var(--c-primary);
  border-radius: 2px;
  transition: width .2s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--c-primary-dark); }

.btn-cta {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 20px -6px rgba(255, 92, 92, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(255, 92, 92, .65); }
.btn-cta:active { transform: translateY(0); }

/* ===== Hero ===== */
.hero-blob {
  background: radial-gradient(60% 60% at 30% 20%, rgba(255,199,44,.55) 0%, rgba(255,199,44,0) 70%),
              radial-gradient(55% 55% at 85% 15%, rgba(255,138,30,.45) 0%, rgba(255,138,30,0) 70%);
}

.chip {
  background: #fff;
  border: 2px solid var(--c-line);
  font-weight: 700;
}

/* ===== Cards ===== */
.pop-card {
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(230, 111, 0, .35);
  border-color: var(--c-primary);
}

.section-title {
  display: inline-block;
  position: relative;
  font-weight: 800;
}
.section-title::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 2px;
  height: 0.5em;
  background: var(--c-secondary);
  opacity: .55;
  z-index: -1;
  border-radius: 4px;
}

/* ===== Timeline (働き方) ===== */
.day-line { border-left: 3px dashed var(--c-line); }
.day-dot {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--c-primary);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--c-line);
}

/* ===== FAQ Accordion ===== */
.faq-item { border: 2px solid var(--c-line); border-radius: 16px; background: #fff; }
.faq-q {
  cursor: pointer;
  font-weight: 800;
}
.faq-icon { transition: transform .2s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }

/* ===== Voices ===== */
.avatar-badge {
  width: 64px; height: 64px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 1.1rem;
  flex-shrink: 0;
}

/* ===== Entry form ===== */
.form-input {
  border: 2px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(255,138,30,.18);
}
.step-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--c-line); }
.step-dot.active { background: var(--c-primary); }

/* honeypot field: hidden from real users, visible to bots filling every field */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* mobile nav */
#mobileNav { transition: max-height .25s ease, opacity .2s ease; }

/* badge pulse for job count */
@keyframes pulseSoft { 0%,100% { transform: scale(1);} 50% { transform: scale(1.06);} }
.pulse-soft { animation: pulseSoft 2.4s ease-in-out infinite; }