/* 1. カラーパレット & フォント変数 */
:root {
  --brand-primary: #1e3a8a;       /* コーポレートブルー */
  --text-main:   #333333;        /* メインテキスト */
  --text-sub:    #666666;        /* サブテキスト */
  --bg-light:    #F9F9F9;        /* 薄い背景 */
  --border-light:#E5E5E5;        /* 薄いボーダー */
}

 /* ── ヘッダー直下スペーサー ── */
 .header-spacer {
   height: 120px;
 }
 @media (max-width: 768px) {
   .header-spacer { height: 100px; }
 }
 @media (max-width: 480px) {
   .header-spacer { height: 80px; }
 }

 /* ── ページ全体の横余白調整 ── */
 body {
   margin: 0;
   padding: 0 1rem;
 }
 @media (max-width: 768px) {
   body { padding: 0 0.75rem; }
 }
 @media (max-width: 480px) {
   body { padding: 0 0.5rem; }
 }

/* 2. リセット & ベース */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
}
body {
  /*padding: 0 1rem;*/
  font-family: 'Zen Kaku Gothic New', sans-serif;
  margin: 0;
  background-color: #fff;
  color: var(--text-main);
}
main {
  /*padding: 6rem 3rem;*/
  max-width: 1200px;
  margin: 2.5rem auto;
  text-align: center;
}
a {
  color: var(--brand-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul, ol {
  margin-left: 1.25rem;
}

/* 3. タイポグラフィー */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  /*color: var(--text-main);*/
  margin-bottom: 1rem;
}
h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}
h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

/* 4. レイアウトユーティリティ */
.section-divider {
  height: 1px;
  background: var(--border-light);
  margin: 3rem 0;
  border: none;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 5. ヘッダー & ナビゲーション */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000;
  /*padding: 1rem 1.5rem;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ccc;
}
header img {
  height: 100px !important;
  margin-bottom: 0 !important;
  object-fit: contain;
}

.toggle-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
}
.toggle-button span {
  display: block;
  height: 2px;
  background: var(--text-main);
  border-radius: 1px;
}
nav ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
 nav a {
  text-decoration: none;
  color: #111;
  font-weight: bold;
  position: relative;
  transition: color 0.3s ease, transform 0.3s ease;
}
 nav a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #111;
  transition: width 0.3s ease;
}
 nav a:hover::after {
  width: 100%;
}
nav a:hover {
color: #333;
transform: translateY(-2px);
background-color: transparent; /* ← 明示的に背景透明を指定 */
}

.nav-menu li {
  margin: 1rem 0;
}
.nav-menu a {
  text-decoration: none;
  color: #111;
  font-weight: bold;
  position: relative;
  transition: color 0.3s ease, transform 0.3s ease;
}
.nav-menu a.active,
.nav-menu a:hover {
  width: 100%;
}

.policy-list {
  list-style: none;
  margin: 1em 0 0 1.2em;
  padding: 0;
  text-align: center;
}

.policy-list li {
  margin-bottom: 0.8em;
  line-height: 1.6;
}

.dli-chevron-down {
  display: inline-block;
  vertical-align: middle;
  color: #1e3a8a;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

/* 6. フェードインアニメーション */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}
.hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
  background-color: #fff;
}
.hero-container {
  width: 90%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
  background-color: #fff;
}
.hero-container {
  width: 90%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-slide,
.hero-text {
  position: relative;
  z-index: 1;
}
.hero-track {
  display: flex;
  height: 100%;
  transition: transform 1s ease;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), -2px -2px 4px rgba(0, 0, 0, 0.6);
}


.hero-track {
  display: flex;
  height: 100%;
  transition: transform 1s ease;
}
.hero-slide {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /*height: 100%;*/
  /*margin: 1.85rem 0;*/
  aspect-ratio: 16/9;
  border-radius: 16px;      /* 角丸の大きさはお好みで調整 */
  overflow: hidden;         /* 角丸で切り取るために必須 */
  flex: 0 0 100%;
}
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), -2px -2px 4px rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 6px;
  width: auto;
  max-width: 90%;
  z-index: 2;
}
.hero-text h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0;
  line-height: 1.3;
}
.fade-in, .fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in.visible, .fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
  text-align: center;
}
.recruit-hero {
    background-image: url('path/to/hero.jpg');
    background-size: cover;
    background-position: center;
    background-image: url('path/to/hero.jpg');
   /* 全体を表示：縦横比を維持したまま余白を許容 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 高さはビューに合わせて可変 */
    height: 60vh;
    min-height: 300px;
    width: 100%;
   }


 /* ハンバーガーメニュー ------------------------------------------------ */
 .hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--text-main);
}

.nav-menu ul {
  display: flex;
  gap: 2rem;
}

footer {
  text-align: center;
  padding: 3rem 1rem;
  font-size: 0.875rem;
  color: #111;
  border-top: 1px solid #ddd;
  font-family: 'Noto Sans JP', sans-serif;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;

  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;

  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
}

/* タップハイライトを無色に */
.hamburger,
.hamburger span,
.nav-menu ul li a {
  -webkit-tap-highlight-color: transparent;
}

/* フォーカス時の背景色もクリアに */
.hamburger:focus,
.hamburger span:focus,
.nav-menu ul li a:focus {
  background-color: transparent;
  outline: none;
}

.nav-menu ul {
  display: flex;
  gap: 2rem;
}


 /* Divider */
 section-divider {
  background: url('images/wave-divider.svg') repeat-x bottom;
  background-size: contain;
  margin: 0 auto -25px;
    }

    /* Scroll Progress Bar */
    #scrollProgress {
      position: fixed;
      top: 0; left: 0;
      width: 0%; height: 4px;
      background: var(--brand-primary);
      z-index: 10000;
    }



/* モバイル時だけ表示／切替 */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
#nav-menu {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#nav-menu.open {
  display: flex;          /* 従来通り */
  opacity: 1;             /* ← 追加：開いたときフェードイン */
}
  .nav-menu ul {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
}
@media (max-width: 768px) {
  nav ul {
    gap: 1rem;
  }
  .about-section, .stats-section, .cta-section {
    padding: 4rem 1rem;
  }
  .stat-number {
    font-size: 2rem;
  }
  .stat-label {
    font-size: 0.9rem;
  }
  .hero-text h1 {
    font-size: 6vw;       /* 画面幅に応じた文字サイズ */
    line-height: 1.2;     /* 行間を詰めすぎない */
    word-break: break-word; /* 長い単語も折り返す */
  }
  .hero-text span {
    display: block;
    font-size: 3.5vw;
    margin-top: 0.25em;
  }

}
@media (max-width: 480px) {
  header img {
    height: 60px;
  }
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
  .about-section, .stats-section, .cta-section {
    padding: 3rem 1rem;
  }
  .stat-number {
    font-size: 1.8rem;
  }
  .stat-label {
    font-size: 0.85rem;
  }

}

     /* ── モバイル時：募集ヒーロー領域調整 ── */
  @media (max-width: 768px) {
    .recruit-hero {
      padding: 6rem 1.5rem;
      height: 50vh;
    }
  }
  @media (max-width: 480px) {
    .recruit-hero {
      padding: 4rem 1rem;
      height: 40vh;
    }
    .recruit-hero h2 {
      font-size: 2rem;
    }
    .recruit-hero p {
      font-size: 0.9rem;
    }
  }