/* ===== SUBARU販売会社グループ 採用LP カスタムスタイル ===== */

html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #1A1A1A;
  background: #FAF7F1;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
p { overflow-wrap: anywhere; }
.font-mincho { font-family: 'Noto Sans JP', sans-serif; }

/* 見出しの字間（全体に余裕を持たせる） */
h1, #hero h1 span { letter-spacing: .06em; }
h2 { letter-spacing: .1em; }
h3 { letter-spacing: .05em; }
h4 { letter-spacing: .04em; }
p.font-mincho { letter-spacing: .06em; }

/* フェードイン */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* FAQアコーディオン */
.faq-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-grid.open { grid-template-rows: 1fr; }
.faq-inner { overflow: hidden; }

/* CTAパルス */
@keyframes pulse-cta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,169,63,0.55); }
  50% { box-shadow: 0 0 0 14px rgba(216,169,63,0); }
}
.pulse-cta { animation: pulse-cta 2.4s infinite; }

/* ヒーロー背景 */
.hero-bg {
  background: linear-gradient(90deg, rgba(6,18,43,0.9) 0%, rgba(6,18,43,0.8) 30%, rgba(6,18,43,0.35) 58%, rgba(6,18,43,0.5) 100%);
}
.hero-media {
  background-image: url('../images/hero-recruitment-05.webp');
  background-size: cover; background-repeat: no-repeat; background-position: 50% 24%;
}
.hero-shell { min-height: clamp(680px, calc(100svh - 4rem), 860px); }

@media (max-width: 767px) {
  .hero-media { background-position: 70% top; background-size: auto 78%; }
  .hero-bg {
    background: linear-gradient(180deg, rgba(6,18,43,0.15) 0%, rgba(6,18,43,0.2) 24%, rgba(6,18,43,0.66) 54%, rgba(6,18,43,0.96) 94%);
  }
  .hero-shell { min-height: 720px; }
}

/* 六連星の星屑（ダーク背景に散りばめる） */
.stars::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 32% 66%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.6px 1.6px at 48% 12%, rgba(239,206,126,.75), transparent),
    radial-gradient(1.2px 1.2px at 66% 46%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 80% 26%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 88% 72%, rgba(239,206,126,.6), transparent),
    radial-gradient(1.2px 1.2px at 40% 86%, rgba(255,255,255,.4), transparent);
}

.num-large { font-family: 'Noto Sans JP', sans-serif; letter-spacing: -.04em; }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #D8A93F; transition: width .3s ease; }
.nav-link:hover::after { width: 100%; }
.quote-mark { font-family: 'Noto Sans JP', sans-serif; }

.timeline-dot::before {
  content: ''; position: absolute; left: -42px; top: 6px; width: 18px; height: 18px;
  border-radius: 9999px; background: #D8A93F; border: 4px solid #FAF7F1;
}
@media (min-width: 768px) { .timeline-dot::before { left: -50px; } }

/* 追従エントリーバー */
#sticky-bar { transition: transform .4s cubic-bezier(.16,1,.3,1); }

/* ===== WHY SUBARU ラダー（01→04 の段階は番号チップで表現） ===== */
.ladder-step {
  background: #fff;
  border: 1px solid rgba(11,44,99,.10);
}
.ladder-step .ladder-title { color: #0B2C63; }
.ladder-step .ladder-body  { color: rgba(11,44,99,.68); }

.ladder-chip { display: flex; justify-content: center; }
.ladder-chip .ladder-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
}
@media (min-width: 768px) {
  .ladder-chip .ladder-num { width: 3rem; height: 3rem; font-size: 1.0625rem; }
}

/* 01 → 04 で紺の濃度を段階的に上げる（面ではなく番号で見せる）
   枠線は 4枚とも「カードのみ・同一」。番号チップは全段階とも枠線なしの塗りで統一する。 */
.ladder-01 .ladder-num { background: #F0F5FC;  color: #4A6FA8; }
.ladder-02 .ladder-num { background: #D6E3F4;  color: #23508F; }
.ladder-03 .ladder-num { background: #B0C7E5;  color: #123B78; }
.ladder-04 .ladder-num { background: #0B2C63;  color: #EFCE7E; }

/* 01→04 を1本の線でつなぐ（PCのみ。SPは2列なので出さない） */
@media (min-width: 768px) {
  .ladder-step { position: relative; }
  .ladder-01 { z-index: 4; }
  .ladder-02 { z-index: 3; }
  .ladder-03 { z-index: 2; }
  .ladder-04 { z-index: 1; }
  .ladder-step:not(.ladder-04)::after {
    content: '';
    position: absolute;
    top: 3.25rem;
    left: calc(50% + 1.75rem);
    width: calc(100% - 2rem);
    height: 1px;
    background: rgba(11,44,99,.16);
  }
}