/* ============================================= */
/*       シンプル & ミニマル リセットCSS         */
/* ============================================= */

/* 1. paddingとborderをwidth/heightに含める (レイアウトの基本) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. bodyのデフォルトマージンを削除 */
body {
  margin: 0;
}

/* 3. 画像がコンテナからはみ出すのを防ぐ (レスポンシブの基本) */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 4. ボタンやフォームのフォントを親から継承させる */
input,
button,
textarea,
select {
  font: inherit;
}

/* 5. h1~h6, pタグのデフォルトマージンをリセット */
/* (これらは特にブラウザ差が大きいため、リセットしておくと便利) */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* 6. ul, olのデフォルトマージンとパディングをリセット */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none; /* マーカー(点や数字)も消す */
}

/* ------ここから本文------- */
/* ===== CSSカスタムプロパティ (変数) ===== */
:root {
  --color-primary: #00529b;
  --color-accent: #fbc02d;
  --color-text: #333;
  --color-light: #fff;
  --color-dark: #222;
  --font-family-base: "Mozilla Text", "M PLUS 2", sans-serif;
  --container-width: 1100px;
  --color-accent-orange: #ff4500; /* デザイン案のオレンジ */
}

/* ===== 基本スタイル & リセット ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-light);
  overflow-x: hidden; /* 横スクロール防止 */
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== ヘッダー ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;

  /* ★★★ この一行を追加 ★★★ */
  align-items: center; /* 中身の要素をすべて上下中央揃えに */

  padding: 20px 40px;
  z-index: 1000;
  transition: background-color 0.3s ease, padding 0.3s ease; /* paddingもアニメーション対象に */
}

.header.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  padding: 15px 40px; /* スクロールしたら少し高さを詰める */
}

.header__logo {
  font-weight: 900;
  font-size: 24px;
  color: var(--color-light);
}
.header.scrolled .header__logo {
  color: var(--color-primary);
}

.header__logo img {
  width: 350px;
  width: 450px;
  height: auto;
}

@media (max-width: 768px) {
  .header__logo img {
    width: 250px;
    width: 300px;
    height: auto;
  }
}

.header__nav {
  display: none; /* スマホでは非表示 */
}

.btn--header {
  padding: 8px 20px;
  font-size: 0.9rem;
  border-width: 2px;
  background-color: transparent;
  border-color: var(--color-light);
  color: var(--color-light) !important; /* ★ !importantで優先度を上げる */
  transition: all 0.3s; /* transitionをここに集約 */
}
/* スクロールしたヘッダー用のスタイル */
.header.scrolled .btn--header {
  border-color: var(--color-primary);
  color: var(--color-text) !important; /* ★ !importantで優先度を上げる */
}
.btn--header:hover {
  background-color: var(--color-light) !important;
  color: var(--color-primary) !important;
}
.header.scrolled .btn--header:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-text) !important;
}

@media (min-width: 768px) {
  .header__nav {
    display: block;
  }
  .header__nav ul {
    display: flex;
    align-items: center;
    gap: 30px;
    gap: 25px; /* 以前は 30px だったものを変更 */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* --- 通常のナビゲーションリンク --- */
  .header__nav li a {
    font-weight: 700;
    color: var(--color-light);
    transition: color 0.3s;
  }
  .header.scrolled .header__nav li a {
    color: var(--color-dark);
  }

  /* ★★★ CONTACTボタンのスタイル（最終FIX版）★★★ */

  /* [初期状態] CONTACTボタン */
  .header__nav li a.btn--header {
    padding: 8px 20px;
    padding: 8px 15px; /* 以前は 8px 20px だったものを変更 */
    font-size: 0.9rem;
    border: 2px solid var(--color-light);
    background-color: transparent;
    color: var(--color-light); /* 文字色は白 */
    transition: all 0.3s;
  }
  /* [初期状態] CONTACTボタンのホバー */
  .header__nav li a.btn--header:hover {
    background-color: var(--color-light);
    color: var(--color-primary); /* 文字色は青 */
  }

  /* [スクロール後] CONTACTボタン */
  .header.scrolled .header__nav li a.btn--header {
    border-color: var(--color-primary);
    color: var(--color-primary); /* 文字色は青 */
  }

  /* ★★★ [スクロール後] CONTACTボタンのホバー（ここが重要）★★★ */
  /* 最も詳細度の高いセレクタで、スタイルを強制的に上書き */
  .header.scrolled .header__nav li a.btn--header:hover {
    background-color: var(--color-primary);
    color: var(--color-text) !important; /* ★ !importantで最終手段 */
  }
}

/* ===== ハンバーガーメニュー ===== */
.hamburger {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1002;
}
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

.hamburger span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: var(--color-light);
  margin: 6px 0;
  transition: all 0.4s ease-in-out;
}
.header.scrolled .hamburger span {
  background-color: var(--color-primary);
}

/* ハンバーガー active時 (JSでbodyに.nav-openを付与) */
.nav-open .hamburger span {
  background-color: var(--color-light);
}
.nav-open .hamburger span:nth-of-type(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-open .hamburger span:nth-of-type(2) {
  opacity: 0;
}
.nav-open .hamburger span:nth-of-type(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* モバイルナビゲーション */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
  z-index: 999;
}
.nav-open .mobile-nav {
  transform: translateY(0);
}
.mobile-nav ul {
  text-align: center;
}
.mobile-nav li {
  margin: 30px 0;
  opacity: 0; /* 初期状態 */
}
.mobile-nav a {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-light);
}
.mobile-nav {
  /* メインメニューとCONTACTボタンを分けるため、レイアウトを調整 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ★★★ スマホ用ナビのCONTACTボタン ★★★ */
.mobile-nav__contact {
  margin-top: 60px; /* メインメニューとの間に余白 */
  padding: 0 40px; /* 左右の余白 */
}
.btn--mobile-nav {
  display: block; /* 横幅いっぱいに広げる */
  width: 100%;
  padding: 15px 20px;
  font-size: 1.1rem;
  background-color: var(--color-primary); /* 目立つように青色に */
  border-color: var(--color-primary);
  color: var(--color-light);
}
.btn--mobile-nav:hover {
  background-color: var(--color-light) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-light) !important;
}
.btn--mobile-nav i {
  margin-right: 10px; /* アイコンとテキストの間の余白 */
}
/* ===== ヒーローセクション ===== */
.hero {
  height: 100vh;
  position: relative;
  color: var(--color-light);
}

.hero-slider {
  width: 100%;
  height: 100%;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 画面幅ぴったりに */
  height: 100%;
  background-size: cover;
  background-position: bottom;
  /* 以前のtransformとtransitionは削除 */
}

/*
.hero-slider .swiper-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1; 
}
*/

.hero__content {
  position: relative;
  z-index: 2; /* テキストは最前面に */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding-leftはJSで制御するので、ここでは定義しないか初期値を設定 */
  padding-left: 10%;
}

.hero__title {
  /* キャッチコピーに合わせたフォントサイズに調整 */
  font-size: clamp(2rem, 5vw, 3.5rem);
  /* 太字にしつつ、最も太い900から少し調整 */
  font-weight: 700;
  /* 複数行になることを想定した行間 */
  line-height: 1.6;
  /* 巨大タイトルで使っていた斜体を解除 */
  font-style: normal;
  overflow: hidden;
  transform-origin: left center;
  /* テキストが長くなるので、横幅の最大値を設定 */
  max-width: 30em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.hero__title-line {
  display: block;
  will-change: transform, opacity;
  transform: translateZ(0);
}
/* スマホ表示でのみ改行するためのクラス */
.sp-only {
  display: none;
}
@media (max-width: 767px) {
  .hero__title {
    /* スマホでは少しフォントを小さく調整 */
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .sp-only {
    display: block;
  }
}
/* ===== 共通コンポーネント: ボタン ===== */
.btn {
  display: inline-block;
  padding: 12px 35px;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-light);
  font-weight: 700;
  border-radius: 50px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.btn:hover {
  background-color: var(--color-light);
  color: var(--color-primary);
}
.btn {
  text-decoration: none !important; /* aタグに適用した際に下線が出ないように */
}
/* ===== トップ対談セクション ===== */
.crosstalk-top {
  padding: 100px 0;
  background: linear-gradient(to bottom, var(--color-light) 50%, var(--color-primary) 50%);
}
.crosstalk-top .container {
  background: var(--color-primary);
  padding: 60px;
  color: var(--color-light);
}
.crosstalk-top__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .crosstalk-top__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.crosstalk-top__label {
  font-weight: 700;
  margin-bottom: 20px;
}
.crosstalk-top__title {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 30px;
}
.crosstalk-top__desc {
  line-height: 1.8;
  margin-bottom: 40px;
}
.crosstalk-top .btn {
  background: var(--color-light);
  color: var(--color-primary);
  border-color: var(--color-light);
}
.crosstalk-top .btn:hover {
  background: transparent;
  color: var(--color-light);
}

.crosstalk-top__image {
  background-color: rgba(255, 255, 255, 0.2);
  min-height: 300px;
}

/* ===== アバウトセクション ===== */
.about {
  padding: 100px 0;
  background-color: var(--color-light);
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.about__text {
  font-size: 1.1rem;
  line-height: 1.8;
}
.about__text .btn {
  margin-top: 30px;
}
.about__title {
  font-size: 4rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1.2;
  text-align: right;
}
.about__title span {
  display: block;
}

/* 他のセクションのスタイルも同様に記述 ... */

/* ===== 画像プレースホルダースタイル ===== */
.crosstalk-top__image,
.crosstalk-item__image,
.special-contents__image {
  background-color: #e0e0e0;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* 画像プレースホルダーに「画像」という文字を表示 */
.crosstalk-item__image::before {
  content: "画像";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 20px;
}

/* ===== フッター ===== */
.footer {
  background-color: var(--color-dark);
  color: var(--color-light);
  padding: 80px 0 20px;
}
.footer h3 {
  font-size: 2rem;
}
.footer__contact-info {
  margin-top: 40px;
}
.footer .phone {
  font-size: 2rem;
  font-weight: 700;
}
.footer .form {
  display: block;
  margin-top: 20px;
  text-decoration: underline;
}
.footer__bottom {
  margin-top: 80px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 0.9rem;
}

/* ★★★ Swiperにキレのある動きを追加 ★★★ */
.hero-slider .swiper-wrapper {
  /* ease-in-outをカスタマイズして、よりメリハリのある動きに */
  /* https://cubic-bezier.com/ で好みのカーブを探せます */
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* ---------------------------------------------------------- */

/* ===== CONCEPT SECTION ===== */
.concept {
  position: relative;
  padding: 150px 0;
  color: var(--color-light);
  z-index: 1;
  /* ★ ご指示通り top を追加 */
  top: -10rem;
  /* ★ topで上にずらした分、下のマージンで相殺してレイアウトの崩れを防ぐ */
  margin-bottom: -10rem;
}

/* 傾斜した背景を疑似要素で作成 */
.concept::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-dark);
  z-index: -1;

  /* ★ ご指示通りの clip-path に変更 */
  clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
}

/* コンテンツは疑似要素の上に乗る */
.concept__label,
.concept .container {
  position: relative;
  z-index: 1;
}

/* ラベル */
.concept__label {
  position: absolute;
  top: 50%;
  left: 2%;
  font-size: 4rem;
  font-weight: bold;
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
  transform-origin: center center;
  white-space: nowrap;
  opacity: 0.3;
  letter-spacing: 4px;
}

/* レイアウト */
.concept__layout-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 500px;
}
.concept__text {
  width: 65%;
  padding-right: 5%;
  position: relative;
  z-index: 2;
  /* 3D空間を定義し、子要素の3D変形を有効にする */
  transform-style: preserve-3d;
  /* 800px離れた視点から見る */
  perspective: 800px;
}
.concept__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 40px;
}
.concept__desc {
  line-height: 2;
  margin-bottom: 50px;
}
.concept .btn {
  background: var(--color-light);
  color: var(--color-primary);
  border-color: var(--color-light);
}
.concept .btn:hover {
  background: transparent;
  color: var(--color-text);
}

/* 画像のラッパー */
.concept__image-wrapper {
  width: 55%;
  height: 120%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  perspective: 1200px;
}

/* 画像本体 */
.concept__image {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  background-image: url("../images/top/concept-img.webp");
  background-size: cover;
  background-position: center;

  /* ★ ご指示通りの clip-path に変更 */
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}

/* ★★★ スマホ対応の修正 ★★★ */
/* スマホでも傾斜を維持するため、リセット用のスタイルを削除・調整 */
@media (max-width: 767px) {
  .concept {
    padding: 100px 0;
    /* ★ ご指示通り top を -10rem に変更 */
    top: -10rem;
    margin-bottom: -10rem;
  }

  /* ★★★ スマホのみ背景の傾斜を滑らかにする ★★★ */
  .concept::before {
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
  }
  .concept__label {
    display: none;
  }
  .concept__layout-wrapper {
    flex-direction: column;
  }
  .concept__text {
    width: 100%;
    padding-right: 0;
    margin-bottom: 40px;
  }
  .concept__image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    transform: none;
    top: auto;
    right: auto;
  }
}

/* -------------------------------------------------------------- */
/* css/style.css */

/* ===== ABOUT SECTION ===== */
.about {
  padding: 150px 0;
  background-color: var(--color-light);
  overflow: hidden; /* アニメーションのため */
  position: relative;
}
/* ★★★ 右端の縦書きサブタイトル ★★★ */
.about__subtitle-vertical {
  position: absolute;
  top: 50%;
  /* ★ rightプロパティをご指示通りに変更 */
  right: 1%;

  transform: translateY(-50%) translateX(50%) rotate(90deg);
  transform-origin: center center;
  white-space: nowrap;

  /* ★ フォントサイズを一回り大きく調整 */
  font-size: clamp(2rem, 4vw, 2.5rem); /* (例: 1.5rem -> 2rem, 3vw -> 4vw, 2rem -> 2.5rem) */

  font-weight: 700;
  letter-spacing: 4px;
  color: var(--color-primary);
  opacity: 0.3;
}
.about__grid {
  display: grid;
  /* PCでは 1:1 の比率で分割 */
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px; /* カラム間の余白 */
}

.about__text-content {
  /* 左カラムのスタイル */
}

.about__desc {
  font-size: 1rem;
  line-height: 2.2;
  margin-bottom: 40px;
}

.about .btn {
  /* ボタンのスタイルは既存のものを継承 */
}

/* 右カラム：巨大な縦組みテキスト */
.about__title-stack h2 {
  font-weight: 900; /* 最も太いウェイト */
  color: var(--color-primary);
  line-height: 1.2;
  /* 巨大なフォントサイズをレスポンシブに指定 */
  font-size: clamp(4rem, 12vw, 9rem);
  font-size: clamp(3.5rem, 11vw, 8rem);
  font-size: clamp(2rem, 5vw, 4.5rem);
}

.about__title-word {
  display: block; /* spanをブロック要素にして縦に積む */
  text-align: right; /* 右揃えで配置 */
  /* アニメーションのために非表示にしておく */
  /* opacity: 0; */
  /* transform: translateY(50px); */
}

/* スマホ表示用の調整 */
@media (max-width: 991px) {
  .about__grid {
    /* 縦積みに変更 */
    grid-template-columns: 1fr;
  }
  .about__title-stack {
    /* スマホではタイトルを先に表示 */
    order: -1;
    margin-bottom: 40px;
  }
  .about__title-word {
    text-align: left; /* スマホでは左揃えに */
  }
}

/* ===== INFINITE SCROLL SLIDER (画像版) ===== */
.infinite-slider {
  /* 背景色は、画像が読み込まれるまでの間の色になります */
  background-color: var(--color-dark);
  padding: 3rem 0;
  white-space: nowrap;
  overflow: hidden;
  position: relative;

  /* セクション全体を傾ける */
  transform: skewY(4deg);
}

.slider-track {
  display: flex; /* ★ flexboxを使って横並びにするのが画像には最適 */
  /* ★ トラック全体の幅を、画像の合計幅の2倍に設定 */
  /* （画像5枚 * 350px * 2セット = 3500px）*/
  width: calc(350px * 10);

  /* 
  animation: infinite-scroll 25s linear infinite;
 */
}

.slide-item {
  /* 各画像のサイズをここで定義 */
  width: 350px; /* 横幅 */
  height: 250px; /* 高さ */
  margin: 0 15px; /* 画像間の余白 */
  flex-shrink: 0; /* flexアイテムが縮まないようにする */
}

.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を保ったまま領域を埋める */
  /* 必要であれば、画像にフィルターや角丸を適用 */
  /* filter: grayscale(100%); */
  /* border-radius: 8px; */
}

/* ★★★ 無限スクロールのキーフレームアニメーション ★★★ */
@keyframes infinite-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* ★ トラック全体の幅の半分だけ左に移動させる */
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------- */

/* ===== DESCRIPTION SECTION ===== */
.description {
  padding: 150px 0;
  background-color: var(--color-light);
}

.description__grid {
  display: grid;
  /* PCでは 1:2 の比率で分割 */
  grid-template-columns: 1fr 2fr;
  gap: 80px; /* カラム間の余白を広めに */
  align-items: start; /* 上揃えで配置 */
}

/* 左カラム：タイトルエリア */
.description__title-area {
  position: sticky;
  top: 120px;
  /* perspectiveはここに移動 */
  perspective: 800px;
}

/* ★★★ 傾斜させるためのラッパー ★★★ */
.title-skew-wrapper {
  transform: skewY(-8deg); /* この値で傾斜角度を調整 */
  transform-origin: top left;
}

/* ★★★ 歪み補正のためのラッパー ★★★ */
.title-content-wrapper {
  transform: skewY(8deg); /* 逆方向に傾けて中身をまっすぐに戻す */
  transform-origin: top left;
}

.description__subtitle {
  margin-bottom: 20px;
  font-weight: 700;
}

.description__title {
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-dark);

  /* ★★★ transform: rotate() は削除 ★★★ */
  /* transform: rotate(-10deg); */
  /* transform-origin はラッパーに移動 */
}

/* 単語ごとに改行 */
.description__title .word {
  display: block;
  white-space: nowrap;
}

/* 各文字のスタイル */
.description__title .char {
  display: inline-block;
  position: relative;
}

/* 右カラム：カードリスト */
.description__card-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.description-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

/* 傾斜させる画像ボックス（共通スタイル） */
.description-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  transform: skewY(-8deg);
  background-color: #e0e0e0; /* 画像読み込み中の背景色 */
}

/* 画像を表示する疑似要素（共通スタイル） */
.description-card__image::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  transform: skewY(8deg); /* 歪み補正 */
}

/* ★★★ ここから各カードの画像を個別に指定 ★★★ */

/* 1番目のカードの画像 */
.description-card:nth-of-type(1) .description-card__image::before {
  background-image: url("../images/top/about_img_06.webp");
}

/* 2番目のカードの画像 */
.description-card:nth-of-type(2) .description-card__image::before {
  background-image: url("../images/top/about_img_05.webp");
}

/* 3番目のカードの画像 */
.description-card:nth-of-type(3) .description-card__image::before {
  background-image: url("../images/top/about_img_01.webp");
}

/* 4番目のカードの画像 */
.description-card:nth-of-type(4) .description-card__image::before {
  background-image: url("../images/top/about_img_04.webp");
}
/* 4番目のカードの画像 */
.description-card:nth-of-type(5) .description-card__image::before {
  background-image: url("../images/top/about_img_03.webp");
}
/* 4番目のカードの画像 */
.description-card:nth-of-type(6) .description-card__image::before {
  background-image: url("../images/top/about_img_02.webp");
}
/* カードのテキストコンテンツ */
.description-card__content h4 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.description-card__label {
  font-weight: 700;
  color: #888;
}

/* スマホ表示用の調整 */
@media (max-width: 991px) {
  .description__grid {
    /* 縦積みに変更 */
    grid-template-columns: 1fr;
  }
  .description__title-area {
    position: static; /* stickyを解除 */
    margin-bottom: 60px;
  }
}

@media (max-width: 575px) {
  .description-card {
    /* カード内も縦積みに */
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------- */

/* ===== RECRUIT & INTERVIEW SECTION ===== */
.recruit-special {
  padding: 100px 0;
  background-color: var(--color-light);
  overflow: hidden;
}
.recruit-special__grid {
  display: grid;
  /* ★★★ 最もシンプルで確実なグリッド定義 ★★★ */
  /* 左カラムにコンテナ幅の60%、残り全部を右カラムに */
  grid-template-columns: 38% 1fr;
  /* コンテナのような左右の余白をグリッド自体に設定 */
  padding: 0 20px;
}

/* --- 左カラム：Recruit --- */
.recruit-area-wrapper {
  /* グリッドの子要素なので、配置指定は不要 */
  padding-right: 60px; /* 右カラムとの間の余白 */
}

.recruit-area__title {
  font-size: clamp(3rem, 7vw, 4.5rem); /* (例: 2rem -> 3rem, 5vw -> 7vw, 3rem -> 4.5rem) */
  font-weight: 900;
  color: var(--color-primary);
}
.recruit-area__subtitle {
  font-weight: 700;
  margin-bottom: 30px;
}
.recruit-area__desc {
  line-height: 1.8;
  margin-bottom: 15px;
}
.recruit-area__links {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
  margin-bottom: 40px;
  padding-left: 20px;
}

/* ★★★ 特徴リストのスタイル ★★★ */
.recruit-area__features {
  list-style: none; /* デフォルトの黒丸を削除 */
  padding-left: 0; /* デフォルトのpaddingを削除 */
  margin: 30px 0 40px; /* 上下の余白 */
  display: flex;
  flex-direction: column;
  gap: 15px; /* 各項目間の余白 */
}

.recruit-area__features li {
  font-weight: 700;
  color: var(--color-primary); /* 文字色をメインの青色に */
  position: relative;
  padding-left: 25px; /* アイコン分のスペースを確保 */
}

/* ★ アイコンを疑似要素で追加 */
.recruit-area__features li::before {
  content: "✔"; /* チェックマークのアイコン（Font Awesomeを使ってもOK）*/
  /* content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; */
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--color-accent); /* アイコンの色を黄色に */
}
.recruit-area__links a {
  font-weight: 700;
  text-decoration: underline;
}

/* --- 右カラム：Interview --- */
.interview-area {
  /* グリッドの子要素なので、配置指定は不要 */
  position: relative;
  padding: 40px;
  background-image: url("../images/top/rec_bg.webp");
  background-size: cover;
  background-position: center;
  border-radius: 8px 0 0 8px;

  /* ★★★ 右端いっぱいにするためのネガティブマージン ★★★ */
  /* グリッドのpadding(20px)を打ち消して画面端にくっつける */
  margin-right: -20px;
}
.interview-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.interview-area > * {
  position: relative;
  z-index: 2;
} /* 子要素をすべて手前に */
.interview-area__vertical-text {
  position: absolute;
  top: 40px;
  left: 40px;
  writing-mode: vertical-rl;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
}
.interview-area__main {
  color: var(--color-light);
  padding-left: 60px;
}
.interview-area__title {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1;
}
.interview-area__subtitle {
  font-weight: 700;
  margin: 10px 0;
}
.interview-area__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.8);
}
.interview-area .btn--dark {
  background-color: var(--color-light);
  color: var(--color-dark);
  border-color: var(--color-light);
}
.interview-area__image-collage {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-left: 60px;
}
.interview-area__image-collage img {
  width: 33.33%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--color-light);
  border-radius: 4px;
}

/* ===== TEXT MASK ANIMATION ===== */
.anim-text-wrap {
  overflow: hidden;
} /* マスク役 */

/* レスポンシブ */
/* --- タブレットサイズ (1200px以下) --- */
@media (max-width: 1200px) {
  .recruit-special__grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 20px;
  }
  .recruit-area-wrapper {
    grid-column: 1 / 2;
    padding-right: 30px;
  }
  .interview-area {
    grid-column: 2 / 3;
    /* ★ ネガティブマージンを解除 */
    margin-right: 0;
  }
}

/* --- スマホサイズ (991px以下) --- */
@media (max-width: 991px) {
  .recruit-special__grid {
    /* ★ 縦積みに変更 */
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .recruit-area-wrapper,
  .interview-area {
    /* ★ 1列にまとめる */
    grid-column: 1 / 2;
  }
  .recruit-area-wrapper {
    padding-right: 0;
  }
}
/* ===== BUTTON HOVER ANIMATION ===== */
.btn {
  /* 既存の .btn スタイルに transition を追加 */
  /* (すでにあれば、追記・修正してください) */
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative; /* 疑似要素の基準点 */
  overflow: hidden; /* はみ出した疑似要素を隠す */
  z-index: 1;
}

/* ★★★ ホバーエフェクト用の疑似要素 ★★★ */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-light); /* 明るい色のボタン用 */
  transform: scaleX(0); /* 最初は幅0で見えない */
  transform-origin: right; /* 右側を軸に広がる */
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
}

/* darkボタン用の疑似要素の色 */
.btn--dark::before {
  background-color: var(--color-dark);
}

/* ★★★ ホバーした時の変化 ★★★ */
.btn:hover::before {
  transform: scaleX(1); /* 幅100%まで広がる */
  transform-origin: left; /* 左側を軸に広がる */
}

.btn:hover {
  color: var(--color-primary); /* 明るい色のボタンのホバー後の文字色 */
}

.btn--dark:hover {
  color: var(--color-light); /* darkボタンのホバー後の文字色 */
}

/* ----------------------------------------------------------------------- */
/* ===== SITE FOOTER (統合版) ===== */
.site-footer {
  position: relative;
  color: var(--color-light);
  overflow: hidden; /* はみ出した傾斜を隠す */
}

/* ★★★ 傾斜した黒い背景 ★★★ */
.footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-dark);
  z-index: -1;

  /* ★ 上辺を傾斜させる */
  clip-path: polygon(0 10vw, 100% 0, 100% 100%, 0% 100%);
}

/* コンテンツ全体のコンテナ */
.footer-content {
  position: relative;
  z-index: 1;
}

/* --- CONTACT AREA --- */
.contact-area {
  padding: 150px 0; /* 上下の余白を十分に確保 */
  text-align: center;
}

.contact-area__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  text-transform: uppercase; /* ★ 大文字に */
  letter-spacing: 2px; /* ★ 文字間隔を広げる */
}
.contact-area__subtitle {
  font-weight: 700;
  margin-bottom: 30px;
}
.contact-area__desc {
  line-height: 1.8;
  margin-bottom: 60px;
  opacity: 0.8;
}

.contact-area__methods {
  display: flex;
  flex-direction: column; /* 縦に積む */
  gap: 20px; /* 各コラム間の余白 */
  max-width: 900px; /* 横幅が広がりすぎないように制限 */
  margin: 0 auto; /* 中央揃え */
  text-align: left; /* テキストは左揃えに */
}

.contact-card {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  padding: 30px 40px;
  background-color: transparent;
  border: 2px solid var(--color-light);
  border-radius: 0; /* 角は直角 */
  transition: all 0.3s ease;
  width: 100%; /* 横幅いっぱいまで広がる */
}
.contact-card:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
}

/* アイコンは左端 */
.contact-card__icon {
  font-size: 2.5rem;
  margin-right: 20px;

  /* ★★★ アイコンの色とホバーエフェクトを追加 ★★★ */
  display: inline-block;
  transition: transform 0.3s ease;
}
.contact-card:hover .contact-card__icon {
  /* ホバー時に少し上に跳ねるエフェクト */
  transform: translateY(-5px);
}
/* 電話番号（主役） */
.contact-card__number {
  font-size: clamp(2rem, 5vw, 3.5rem); /* ★ ダイナミックなフォントサイズ */
  font-weight: 900; /* ★ 最も太く */
  line-height: 1;
  margin-right: auto; /* ★ 右側の要素を右端に押しやる */
}

/* フォーム・LINEのラベル */
.contact-card__label {
  font-size: clamp(1.8rem, 4vw, 3rem); /* ★ ダイナミックなフォントサイズ */
  font-weight: 900;
  line-height: 1;
  margin-right: auto;
}

/* 受付時間などのメタ情報 */
.contact-card__meta {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
  opacity: 0.8;
}

/* --- FOOTER NAV & INFO AREA --- */
.footer-nav-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-info .footer-logo {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 15px;
}
.footer-info .footer-logo img {
  width: 350px;
}
.footer-info p {
  margin-bottom: 5px;
  opacity: 0.8;
}
.footer-nav {
  display: flex;
  gap: 60px;
}
.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.footer-nav a:hover {
  text-decoration: underline;
}

/* --- COPYRIGHT AREA --- */
.copyright-area {
  padding: 30px 0;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.7;
}
/* スマホ用の微調整 */
@media (max-width: 575px) {
  .contact-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 30px;
  }
  .contact-card__number,
  .contact-card__label {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .contact-card__meta {
    text-align: left;
  }
}

/* --------------------------------------------------------------- */

/* ===== NEWS SECTION ===== */
.news {
  padding: 100px 0;
  background-color: var(--color-light);
}

.news__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #e0e0e0;
}

.news__title-group h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--color-accent-orange);
  line-height: 1;
}
.news__title-group p {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--color-accent-orange);
  margin-top: 10px;
}
.news__title-group p::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: var(--color-accent-orange);
  margin-right: 15px;
}

.btn--news-archive {
  background-color: var(--color-accent-orange);
  color: var(--color-light);
  border-color: var(--color-accent-orange);
  padding: 12px 30px;
  border-radius: 4px; /* 少しだけ角を丸める */
}
.btn--news-archive:hover {
  background-color: #d85600; /* 少し暗いオレンジに */
  border-color: #d85600;
}

.news__list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.news-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
  border-bottom: 1px solid #e0e0e0;
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.3s;
}
.news-item a:hover {
  background-color: #f7f7f7;
}

.news-item__main {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; /* スマホで折り返す用 */
}

.news-item__category {
  background-color: var(--color-accent-orange);
  color: var(--color-light);
  padding: 5px 15px;
  font-size: 0.9rem;
  font-weight: 700;
}

.news-item__date {
  font-weight: 700;
  color: #555;
}

.news-item__title {
  font-weight: 700;
}

.news-item__icon-wrapper {
  width: 50px;
  height: 50px;
  background-color: var(--color-accent-orange);
  color: var(--color-light);
  display: grid;
  place-items: center; /* アイコンを簡単に中央揃え */
  flex-shrink: 0; /* 縮まないように */
  margin-left: 20px;
}

/* スマホ対応 */
@media (max-width: 767px) {
  .news__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .news-item__main {
    gap: 10px;
  }
  .news-item__date {
    /* カテゴリの次に日付が来るように */
    order: 1;
  }
  .news-item__category {
    order: 0;
  }
  .news-item__title {
    /* タイトルは常に幅いっぱいに */
    order: 2;
    width: 100%;
    margin-top: 10px;
  }
}

.btn--orange {
  /* 共通の.btnスタイルを継承しつつ、色だけ上書き */
  background-color: var(--color-accent-orange);
  border-color: var(--color-accent-orange);
  color: var(--color-light);
}
.btn--orange:hover {
  background-color: transparent;
  color: var(--color-accent-orange);
}

/* --- 既存の.contact-cardのスタイル --- */
.contact-card {
  /* ... 既存のスタイル ... */
  /* text-alignをcenterに戻しておく */
  text-align: center;
}
.contact-card:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
}

/* ★★★ SNSカード専用のスタイル ★★★ */
.contact-card--sns {
  /* ★ flexboxを使って中身を簡単に中央揃え */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 他のカードと高さを合わせるためのpadding */
  padding: 30px;
}
.contact-card--sns .contact-card__label {
  font-size: 1rem; /* 説明文のフォントサイズ */
  font-weight: 700;
  margin-bottom: 25px; /* アイコンとの間に余白 */
}
/* ホバーしても色が変わらないように */
.contact-card--sns:hover {
  background-color: transparent;
  color: var(--color-light);
}

/* ★★★ SNSアイコンリストのスタイル（変更なし）★★★ */
.sns-icons-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.sns-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--color-light);
  border-radius: 50%; /* 円形にする */
  color: var(--color-light);
  font-size: 1.8rem;
  transition: all 0.3s ease;
}

/* ★ 各SNSのブランドカラーをホバー時に適用 */
.sns-icon:hover {
  background-color: var(--color-light);
}
.sns-icon:hover .fa-instagram {
  color: #e1306c;
}
.sns-icon:hover .fa-line {
  color: #00b900;
}
.sns-icon:hover .fa-x-twitter {
  color: #000000;
}
.sns-icon:hover .fa-facebook-f {
  color: #1877f2;
}

/* --------------------------------------------- */
/* ============================================= */
/* PC表示用 プルダウンメニュー 最終修正版        */
/* ============================================= */

/* PCナビゲーションの基本レイアウト (既存のものを流用) */
@media (min-width: 992px) {
  .header__nav > ul {
    display: flex;
    align-items: center;
    gap: 25px; /* gapの値は適宜調整してください */
  }
}

/* プルダウンを持つ親 li.has-submenu の設定 (これが最重要！) */
@media (min-width: 992px) {
  .header__nav li.has-submenu {
    position: relative; /* これで .submenu の基準点になります */
  }
}

/* プルダウン本体 ul.submenu のスタイル */
@media (min-width: 992px) {
  .header__nav .submenu {
    /* --- 位置の指定 --- */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;

    /* --- 見た目の指定 --- */
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 8px 0;
    margin: 10px 0 0 0;

    /* --- 幅の指定 (ここを修正) --- */
    min-width: 280px; /* ★★★ 最低でも280pxの幅を確保 ★★★ */
    max-width: 350px; /* ★★★ 最大でも350pxまでしか広がらないようにする ★★★ */
    /* width: max-content; は削除 */

    /* --- アニメーションの準備 (初期状態は非表示) --- */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
}

/* 親メニューにホバーしたときに、プルダウンを表示 */
@media (min-width: 992px) {
  .header__nav li.has-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* プルダウン内の li と a のスタイル */
@media (min-width: 992px) {
  .header__nav .submenu li {
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .header__nav .submenu li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s;
    /* --- テキストの折り返し設定 (ここを修正) --- */
    white-space: normal; /* ★★★ テキストの折り返しを許可する ★★★ */
    line-height: 1.5; /* ★★★ 折り返した際の行間を調整 ★★★ */
  }

  .header__nav .submenu li a:hover {
    background-color: #f5f5f5;
  }
}

/* --- スマホ用アコーディオンメニュー --- */
.mobile-nav li.has-submenu-mobile {
  /* 以前のflex関連の指定を削除 */
  flex-wrap: wrap; /* 折り返しだけは残す */
}
.submenu-toggle-link {
  display: inline-flex; /* ★ 中身を横並びに */
  align-items: center; /* ★ 上下中央揃え */
  gap: 10px; /* ★ 文字とアイコンの隙間 */

  /* aタグなので、クリック範囲を確保するためのpadding */
  padding: 15px;
  width: 100%; /* 横幅いっぱい */
  justify-content: center; /* ★ 水平方向の中央揃え */
}
.submenu-toggle-icon {
  transition: transform 0.3s;
}
/* 開いた状態のアイコン */
.has-submenu-mobile.is-open .submenu-toggle-icon {
  transform: rotate(180deg);
}
.has-submenu-mobile > a {
  /* ★ flex-grow: 1; を削除 */
  /* flex-grow: 1; */
  padding: 15px 0 15px 15px; /* 適切なpaddingを設定 */
}
.submenu-toggle {
  background: none;
  border: none;
  color: var(--color-light);
  font-size: 1.2rem;
  padding: 15px;
  cursor: pointer;
  transition: transform 0.3s;
}
/* 開いた状態のアイコン */
.has-submenu-mobile.is-open .submenu-toggle {
  transform: rotate(180deg);
}

/* スマホ用サブメニューの初期状態（非表示） */
.submenu-mobile {
  list-style: none;
  width: 100%; /* 親の幅いっぱいに */
  padding: 10px 0 10px 30px; /* 少しインデント */

  /* アニメーションのための設定 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}
/* 開いた状態のサブメニュー */
.has-submenu-mobile.is-open .submenu-mobile {
  max-height: 500px; /* 十分な高さを確保 */
}
.submenu-mobile li a {
  display: block;
  padding: 12px 0;
  font-size: 1.1rem;
  opacity: 0.8;
}

/* ----------------------------------------------- */
/* 1. プルダウンの親要素に position: relative を追加 */
/* これが最も重要です。これにより、子メニュー(.submenu)がこの要素を基準に配置されます。*/
.header__nav .has-submenu {
  position: relative;
}

/* 2. プルダウンメニュー(.submenu)のスタイルを定義 */
.header__nav .submenu {
  position: absolute;
  top: 100%;
  left: 0;

  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 8px 0;
  margin: 10px 0 0 0;
  z-index: 1000;

  /* ▼▼▼ ここからが変更点 ▼▼▼ */
  width: max-content; /* ★★★ 幅を内容物(テキスト)の最大幅に自動調整する ★★★ */
  min-width: 100%; /* ★★★ 少なくとも親メニューと同じ幅を確保する ★★★ */
  /* min-width: 240px; を削除またはコメントアウト */

  /* 初期状態では非表示にする */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* 3. 親メニューにホバーしたときに、プルダウンメニューを表示 */
.header__nav .has-submenu:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 4. プルダウン内のリンクのスタイル */
.header__nav .submenu li {
  /* li要素自体のテキスト揃えを左に設定 */
  text-align: left;
  /* ブラウザのデフォルトスタイルによるmarginやpaddingをリセット */
  margin: 0;
  padding: 0;
}

/* 4. プルダウン内のリンクのスタイル */
.header__nav .submenu li a {
  display: block; /* aタグをブロック要素にしてliいっぱいに広げる */
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s;
  /* aタグの中のテキストも念のため左揃えに */
  text-align: left;
}

/* 5. プルダウン内のリンクにホバーしたときのスタイル */
.header__nav .submenu li a:hover {
  background-color: #f5f5f5;
  color: #111;
}

/* ------------------------------------------------------- */
/* ============================================= */
/* PC表示用 プルダウンメニュー スタイル          */
/* 992px以上の画面幅で適用（PC・タブレット横向き想定） */
/* ============================================= */
@media (min-width: 992px) {
  /* 1. プルダウンを持つ親 li.has-submenu の設定 (必須) */
  .header__nav li.has-submenu {
    position: relative;
  }

  /* 2. プルダウン本体 ul.submenu のスタイル */
  .header__nav .submenu {
    /* --- レイアウトのリセット (最重要) --- */
    display: block; /* FlexboxやGridではなく、通常のブロック要素に戻す */
    columns: unset; /* カラムレイアウトを完全に無効化 */
    column-count: unset;

    /* --- 位置の指定 --- */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;

    /* --- 見た目の指定 --- */
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 10px 0;
    margin: 10px 0 0 0;

    /* --- 幅の指定 --- */
    min-width: 280px; /* メニューの最低幅 */
    max-width: 350px; /* メニューの最大幅 */
    min-width: 150px;
    max-width: 250px;

    /* --- アニメーションの準備 --- */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }

  /* 3. 親メニューにホバーしたときに、プルダウンを表示 */
  .header__nav li.has-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* 4. プルダウン内の li と a のスタイル */
  .header__nav .submenu li {
    /* li自体は特別なスタイルは不要 */
    border-bottom: 1px solid #f0f0f0;
  }
  .header__nav .submenu li:last-child {
    border-bottom: none;
  }

  .header__nav .submenu li a {
    display: block; /* aタグをliいっぱいに広げる */
    padding: 14px 25px; /* 余白を少し広めに */
    color: #333;
    text-decoration: none;

    /* テキストの折り返し設定 */
    white-space: normal; /* テキストの折り返しを許可 */
    line-height: 1.6;
  }

  .header__nav .submenu li a:hover {
    background-color: #f5f5f5;
  }
}

/* ============================================= */
/* RECRUITセクション デザイン             */
/* ============================================= */

.recruit-hero {
  position: relative;
  padding: 120px 0;
  text-align: center;
  overflow: hidden;
  /* ★★★ テキストの基本色を「黒」に変更 ★★★ */
  color: #333;
}

/* 背景画像コンテナ */
.recruit-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.recruit-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ★★★ filter: brightness(0.8); は不要なので削除またはコメントアウト ★★★ */
}
/* is-inviewクラスが付いたら画像を少しズームアウトさせる */
.gsap-fade-up.is-inview .recruit-hero__bg img {
  transform: scale(1);
}

/* オーバーレイ (白グラデーション) */
.recruit-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* --- ▼▼▼ ここを白のグラデーションに変更 ▼▼▼ --- */
  background: linear-gradient(to bottom, /* 上から下へ */ rgba(255, 255, 255, 0) 0%, /* 上部は完全に透明 */ rgba(255, 255, 255, 0.8) 70%, /* 70%地点から白くし始め */ #ffffff 100% /* 下端は完全に不透明な白に */);
}
/* テキストやボタンなどのコンテンツエリア */
.recruit-hero__content {
  position: relative;
  z-index: 3;
}

.section-heading-alt {
  margin-bottom: 40px; /* 下のキャッチコピーとの間隔を調整 */
  position: relative;
}
/* 英文 (h2) のスタイル */
.section-heading-alt h2 {
  font-size: 6rem; /* ★★★ 文字をさらに大きくする (5rem -> 6rem) ★★★ */
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;

  /* --- ▼▼▼ オレンジ系のグラデーションに変更 ▼▼▼ --- */
  background: linear-gradient(45deg, /* グラデーションの角度を45度に変更 */ #ff8c00, /* 明るいオレンジ (DarkOrange) */ #ff4500 /* 鮮やかな赤みがかったオレンジ (OrangeRed) */);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* ★★★ 文字の周りにうっすらと影を付け、背景から浮かび上がらせる ★★★ */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
/* 日本語 (p) のスタイル */
.section-heading-alt p {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.2em; /* 文字間隔を広げて品を出す */
  color: #333;
  margin-top: 5px;
}

/* キャッチコピー (黒文字用に調整) */
.recruit-hero__catchphrase {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 25px;
  color: #111;
  /* ★★★ text-shadowを削除またはコメントアウト ★★★ */
}

/* 説明文 (黒文字用に調整) */
.recruit-hero__description {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto 40px;
  color: #444;
}

/* ボタンのスタイル */
.btn--recruit {
  background-color: var(--color-accent, #fbc02d); /* サイトのアクセントカラー */
  color: #333;
  border: none;
  padding: 15px 40px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn--recruit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .recruit-hero {
    padding: 80px 0;
  }
  .recruit-hero__catchphrase {
    font-size: 1.8rem;
  }
  .section-heading-alt h2 {
    font-size: 4rem; /* スマホではサイズを調整 (3.5rem -> 4rem) */
  }
  .section-heading-alt p {
    font-size: 1rem;
  }
  .br-sp {
    /* スマホでのみ改行 */
    display: block;
  }
}