/* ===================================
   TOP画像セクション（#recruitment-hero）
=================================== */
#recruitment-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 3;
  background-image: url('https://irie.or.jp/wp-content/uploads/2025/06/recruitment_top-2.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding-left: 5%;
}

.recruitment-title {
  color: #fff;
  line-height: 1.2;
}

.recruitment-title .en {
  font-family: 'adobe-handwriting-ernie', sans-serif;
  font-size: 3vw;
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: 0.2em;
  line-height: 1.1;
}

.recruitment-title .jp {
  font-size: 2vw;
  font-weight: bold;
  letter-spacing: 0.15em;
}

.pc-space {
  display: inline;
}
.sp-br {
  display: none;
}

@media (max-width: 960px) {
  #recruitment-hero {
    aspect-ratio: 1 / 1;
    background-image: url('https://irie.or.jp/wp-content/uploads/2025/07/recruitment_top_sp.jpg');
    padding-left: 8%;
  }

  .recruitment-title .en {
    font-size: 6vw;
  }

  .recruitment-title .jp {
    font-size: 4vw;
  }

  .pc-space {
    display: none;
  }
  .sp-br {
    display: block;
  }
}


/* ===================================
   施設見学・エントリーボタン
=================================== */
.fix-list {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  gap: 12px;
  z-index: 999;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.fix-list li {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fix-list li:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.fix-list li img {
  width: 190px;
  height: auto;
  object-fit: cover;
  display: block;
}
.fix-list li.dimmed img {
  opacity: 0.5;
}

@media screen and (max-width: 768px) {
  .fix-list {
    flex-direction: row;
    gap: 10px;           /* 少し広げてもOK */
    right: 15px;
    bottom: 15px;
  }

  .fix-list li {
    width: 90px;         /* ← サイズアップ */
    height: 90px;
  }

  .fix-list li img {
    width: 90px;
    height: 90px;        /* 明示的に追加しておくと崩れにくい */
    object-fit: cover;   /* 正方形を保って丸く切り取る */
  }
}


/* ===================================
   横並びメニューボタン（#recruitment-menu）
=================================== */
#recruitment-menu {
  width: 100%;
  background-color: #eeeeee; /* 帯背景グレー */
  padding: 0;
}

.recruitment-menu-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;
}

.recruitment-menu-button {
  flex: 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;
  border: none;
  border-left: 1px solid #ccc;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.recruitment-menu-button:first-child {
  border-left: none;
}

.recruitment-menu-button:hover {
  background-color: #2a2a80;
  color: #fff;
}


/* ===== スマホ表示（横幅狭い端末）用のレスポンシブ対応 ===== */
@media (max-width: 960px) {
  .recruitment-menu-container {
    padding: 0;       /* ← 左右余白をなくす */
    width: 100%;
  }

  .recruitment-menu-button {
    font-size: 1.2rem; /* ← スマホ用に少しだけ縮小（好みに応じて） */
  }
}


/* ===================================
   プルダウンメニュー (ユーザー提供のCSSをそのまま使用)
=================================== */

/* プルダウン親ラッパー */
.recruitment-menu-dropdown {
  position: relative;
  flex: 1;
  height: 100%;
}

/* ボタン全体を中央表示に */
.recruitment-menu-dropdown .recruitment-menu-button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;
  border: none;
  border-left: 1px solid #ccc;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 左端の線を消す（先頭ボタンなら） */
.recruitment-menu-dropdown:first-child .recruitment-menu-button {
  border-left: none;
}

/* ホバー反応 */
.recruitment-menu-dropdown .recruitment-menu-button:hover {
  background-color: #2a2a80;
  color: #fff;
}

/* プルダウン中身 */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ccc;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* プルダウンリンク */
.dropdown-content a {
  display: block;
  padding: 18px 20px;          /* ← 十分な余白でクリックしやすく */
  font-size: 1.5rem;           /* ← 大きく見やすい文字サイズ */
  line-height: 1.5;            /* ← 行間ゆったりに */
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.dropdown-content a:hover {
  background-color: #f0f0f0;
}

/* ホバー時に表示 (PC用) */
.recruitment-menu-dropdown:hover .dropdown-content {
  display: block;
}

/* レスポンシブ対応 */
@media (max-width: 960px) {
  /* 親に position: relative を与えて基準にする */
  #recruitment-menu {
    position: relative;
  }

  /* モバイルでは、ユーザー提供のCSSに従い position: static; を維持 */
  .recruitment-menu-dropdown {
    position: static;
  }

  .dropdown-content {
    position: absolute;
    top: 100%;      /* ← #recruitment-menu の下に表示 */
    left: 0;
    width: 100vw;   /* ビューポートの幅いっぱいに広げる */
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    z-index: 9999;
    display: none; /* SPはクリック式に切り替えるため初期は非表示 */
  }

  .dropdown-content a {
    padding: 16px;
    font-size: 1.4rem;
    text-align: center;
  }

  /* JSで付与される 'open' クラスで表示 (SP用) */
  .dropdown-content.open {
    display: block !important; /* ← 強制的に表示 */
  }

  /* モバイルではホバー表示を無効化 */
  .recruitment-menu-dropdown:hover .dropdown-content {
    display: none;
  }
}


/* ===================================
   バナースライダー（標準型）
=================================== */
#recruitment-banner-slider {
  width: 100%;
  margin: 40px auto;
  padding: 0 20px;
}

#recruitment-banner-slider .swiper-slide {
  text-align: center;
}

#recruitment-banner-slider img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


/* ===================================
   グラデーション背景セクション
=================================== */
#job-info-section {
  padding: 80px 20px;
  background: linear-gradient(to right, #FFCCDC, #FFF9DD); /* ピンク〜黄 */
  text-align: center;
}

/* タイトル */
.job-info-title .en {
  font-family: 'adobe-handwriting-ernie', sans-serif;
  font-size: 3.5rem;
  transform: rotate(-2deg);
  margin-bottom: 0.5em;
  display: inline-block;
}

.job-info-title .jp {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #333;
  margin-bottom: 100px;
}

/* ===================================
   タブ：カード外に飛び出すデザイン
=================================== */
.nurse-recruit-wrapper,
.kaigo-recruit-wrapper,
.rehab-recruit-wrapper,
.pharmacist-recruit-wrapper,
.doctor-recruit-wrapper,
.dietitian-recruit-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 60px 20px 40px;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
  position: relative;
  text-align: left;
}

/* 募集内容ラッパー表示/非表示 */
.job-info-section-wrapper { display: none; }
.job-info-section-wrapper.active { display: block; }

/* PC用タブ配置 */
.nurse-tab,
.kaigo-tab,
.rehab-tab,
.pharmacist-tab,
.dietitian-tab {
  position: absolute;
  top: -50px;
  left: 30px;
  display: flex;
  gap: 16px;
  z-index: 2;
}

/* 共通タブボタン（PC用設定） */
.nurse-tab-button,
.kaigo-tab-button,
.rehab-tab-button,
.pharmacist-tab-button,
.dietitian-tab-button {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 14px 0;
  width: 200px;              /* PCでは200px固定 */
  text-align: center;
  background-color: #fce4ec;
  color: #333;
  border: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nurse-tab-button:hover,
.kaigo-tab-button:hover,
.rehab-tab-button:hover,
.pharmacist-tab-button:hover,
.dietitian-tab-button:hover {
  background-color: #f8bbd0;
}

.nurse-tab-button.active,
.kaigo-tab-button.active,
.rehab-tab-button.active,
.pharmacist-tab-button.active,
.dietitian-tab-button.active {
  background-color: #f06292;
  color: #fff;
}

/* ========================
   スマホ表示調整
======================== */
@media (max-width: 960px) {
  .nurse-recruit-wrapper,
  .kaigo-recruit-wrapper,
  .rehab-recruit-wrapper,
  .pharmacist-recruit-wrapper,
  .doctor-recruit-wrapper,
  .dietitian-recruit-wrapper {
    padding: 20px 15px;
    padding-top: 70px;
    margin-top: 0;
  }

  .nurse-tab,
  .kaigo-tab,
  .rehab-tab,
  .pharmacist-tab,
  .dietitian-tab {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    padding: 0 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
  }

  /* スマホでは均等幅＋全体クリック可能 */
  .nurse-tab-button,
  .kaigo-tab-button,
  .rehab-tab-button,
  .pharmacist-tab-button,
  .dietitian-tab-button {
    flex: 1 1 0;       /* 均等幅 */
    max-width: none;   /* 幅固定を解除 */
    display: block;    /* ボタン全体をクリック可能に */
    width: 100%;
    font-size: 1rem;
    padding: 10px 0;
    border-radius: 10px 10px 0 0;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }

  /* hover/active時も均等幅を維持 */
  .nurse-tab-button:hover,
  .kaigo-tab-button:hover,
  .rehab-tab-button:hover,
  .pharmacist-tab-button:hover,
  .dietitian-tab-button:hover,
  .nurse-tab-button.active,
  .kaigo-tab-button.active,
  .rehab-tab-button.active,
  .pharmacist-tab-button.active,
  .dietitian-tab-button.active {
    flex: 1 1 0;
    max-width: none;
  }
}

/* ===================================
   タブコンテンツ表示制御
=================================== */
.nurse-tab-content,
.kaigo-tab-content,
.rehab-tab-content,
.pharmacist-tab-content,
.dietitian-tab-content { display: none; }
.nurse-tab-content.active,
.kaigo-tab-content.active,
.rehab-tab-content.active,
.pharmacist-tab-content.active,
.dietitian-tab-content.active { display: block; }



/* ==============================
   募集要項テーブル用（シンプル）
============================== */
.job-info-table {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

/* ▼ 見出し：中央揃え＆大きめ */
.job-info-heading {
  text-align: center;
  font-size: 2rem; /* ← 大きめ見出し */
  font-weight: bold;
  margin-bottom: 32px;
  color: #333;
  letter-spacing: 0.1em;
}

/* ▼ 仕切り：横長・角なし四角・グラデーション色に合わせる */
.job-info-divider {
  width: 80px;
  height: 10px;
  background-color: #f06292; /* グラデーションカラーに合わせる */
  margin: 0 auto 60px; /* ← 40px → 60px に拡大（PC/SP共通） */
}

/* ▼ 情報行：幅を80%に変更・フォントサイズUP */
.job-info-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  width: 80%; /* ← 70% → 80% に変更 */
  margin: 0 auto;
}

.job-info-label {
  flex: 0 0 30%; /* ← 元に戻しました */
  font-weight: bold;
  font-size: 1.6rem; /* ← 本文フォント大きく */
  color: #333;
  padding-right: 16px;
  padding-left: 1.5em; /* ← ここを追加して右にずらす */
  letter-spacing: 0.05em; /* ← 文字間を少し広げる */
}

.job-info-content {
  flex: 1;
  font-size: 1.6rem; /* ← 本文フォント大きく */
  color: #555;
  line-height: 1.9; /* ← これを追加（約1.9倍の行間） */
  letter-spacing: 0.05em; /* ← 文字間を少し広げる */
}

@media (max-width: 768px) {
  .job-info-row {
    flex-direction: column;      /* ← 縦並びに変更 */
    align-items: flex-start;     /* ← 左揃え */
    width: 90%;                  /* ← 幅もスマホ向けにやや広めに */
    padding: 20px 0;
  }

  .job-info-label {
    flex: none;                  /* ← 幅指定を解除 */
    font-size: 1.6rem;   /* ← 1.2rem → 1.6rem に拡大 */
    padding-left: 0;             /* ← インデント解除（中央寄せやズレ防止） */
    margin-bottom: 6px;          /* ← ラベルと本文の間に余白を */
    letter-spacing: 0.04em;
  }

  .job-info-content {
    font-size: 1.5rem;           /* ← 本文も読みやすく */
    line-height: 1.8;
    letter-spacing: 0.04em;
  }
}

/* アニメーション前の初期状態 */
.job-info-row {
  opacity: 0;
  transform: translateY(40px); /* ← 移動距離を増やすと “ふわっ感” が強くなる */
  transition: opacity 1s ease, transform 1s ease; /* ← スロー表示に変更 */
}

/* 表示状態 */
.job-info-row.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===================================
   医師用ボタン
=================================== */
.recruitment-menu-link-button {
  flex: 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;         /* 同じ背景色 */
  border: none;
  border-left: 1px solid #ccc;       /* 境界線 */
  font-size: 1.5rem;                 /* ボタンと揃える */
  font-weight: bold;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

/* 最初のボタンの左線なし（必要に応じて調整） */
.recruitment-menu-link-button:first-child {
  border-left: none;
}

/* ホバー時の色 */
.recruitment-menu-link-button:hover {
  background-color: #2a2a80;
  color: #fff;
}

/* レスポンシブ対応（スマホ時） */
@media (max-width: 960px) {
  .recruitment-menu-link-button {
    font-size: 1.2rem;
  }
}




/* ===================================
   仮の余白スペース
=================================== */
.recruitment-space {
  height: 100px;
}