/* 求人セクション全体のコンテナ */
.rec-container {
  max-width: 1000px;
  margin: 40px auto;
  font-family: sans-serif;
  padding: 0 15px;
}

/* 導入テキスト */
.rec-intro {
  color: #333;
  margin-bottom: 5px;
}

/* 注釈（小さめの文字） */
.rec-note {
  font-size: 0.8rem;
  margin-bottom: 30px;
}

/* ボタン並びの親要素（Flexbox） */
.rec-btn-group {
  display: flex;
  gap: 40px; 
  justify-content: flex-start;
}

/* 各ボタンのボックス */
.rec-btn-box {
  flex: 1;
  max-width: 400px;
  text-align: center;
}

/* ラベルテキスト（ボタンの上の文字） */
.rec-btn-label {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 14px;
}
.rec-blue-text { color: #4088d5; }
.rec-red-text { color: #f28b84; }

/* ボタン本体の共通スタイル */
.rec-btn {
  display: block;
  width: 100%;
  padding: 15px 0;
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  text-align: center !important;  /* テキストを中央に */
  box-sizing: border-box;         /* 余白を幅に含める */
  left: 0;                        /* 位置のズレをリセット */
}

.rec-btn:hover {
  opacity: 0.8;
  /* ★枠線の「色だけ」を変える（太さは変わらないのでズレない） */
  border: 2px solid #fff; 
}

/* ボタンの背景色 */
.rec-blue-bg { background-color: #4088d5; }
.rec-red-bg { background-color: #f28b84; }

/* --- スマホ対応（画面幅600px以下） --- */
@media (max-width: 600px) {
  .rec-btn-group {
    flex-direction: column; /* 縦並びに変更 */
    gap: 30px;
    align-items: center;
  }
  .rec-btn-box {
    width: 100%;
    max-width: 100%;
  }
}

/* リンク集全体のコンテナ */
.rec-link-container {
  max-width: 1000px;
  margin: 20px 0;
  padding: 0 15px;
  font-family: sans-serif;
}

/* リスト自体の設定（デフォルトのポッチを調整） */
.rec-link-list {
  list-style: none; /* デフォルトの黒丸を消す */
  padding: 0;
  margin-left: 0px !important;
}

.rec-link-list li {
  position: relative;
  padding-left: 15px; /* ドット（・）のための余白 */
  margin-bottom: 10px; /* 行間の余白 */
  line-height: 1.5;
}

/* 行頭のドット（・）を擬似要素で作成 */
.rec-link-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #333;
}

/* リンクのテキスト（下線あり） */
.rec-link-list li a {
  color: #333;
  text-decoration: underline; /* 下線をつける */
  transition: opacity 0.3s;
}

.rec-link-list li a:hover {
  opacity: 0.7;
  text-decoration: none; /* ホバー時に下線を消す（お好みで） */
}

/* YouTube埋め込みの親要素 */
.rec-video-container {
  width: 100%;            /* 親の幅（コンテナ）に合わせる */
  max-width: 800px;       /* PCで大きくなりすぎないよう制限（任意） */
  margin: 20px auto;      /* 中央寄せ */
}

.rec-video-container iframe {
  width: 100% !important; /* 横幅を画面いっぱいに */
  height: auto !important;
  aspect-ratio: 16 / 9;   /* ★横16：縦9の比率を維持 */
  border-radius: 8px;     /* 角を少し丸める（お好みで） */
}

/* 古いブラウザ（数年前のスマホなど）も考慮する場合の予備設定 */
@supports not (aspect-ratio: 16 / 9) {
  .rec-video-container {
    position: relative;
    padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
    height: 0;
    overflow: hidden;
  }
  .rec-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* コンテンツ全体のコンテナ（余白調整用） */
.rec-content-container {
  max-width: 1000px; /* PCでの最大幅 */
  margin: 0px auto; /* 上下余白、左右中央寄せ */
  font-family: sans-serif;
}

/* h2見出しのスタイル */
.rec-section-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 20px; /* 下画像との間隔 */
  padding-bottom: 10px;
  border-bottom: 2px solid #ccc; /* 下線（任意） */
}

/* 画像を囲むコンテナ */
.rec-section-image {
  width: 100%;
  text-align: center; /* 画像を中央寄せ（PC用） */
  margin-bottom: 30px; /* 次の要素との間隔 */
}

/* ★画像自体のスタイル（レスポンシブ対応） */
.rec-section-image img {
  max-width: 100%; /* ★親要素の幅を超えない（スマホではみ出さない） */
  height: auto;     /* ★アスペクト比を維持して自動計算 */
  display: inline-block; /* text-align: centerを効かせるため */
}

/* スマホ表示（画面幅600px以下）の微調整 */
@media (max-width: 600px) {
  .rec-section-title {
    font-size: 1.3rem; /* 見出しを少し小さく */
    margin-bottom: 15px;
  }
  .rec-section-image {
    margin-bottom: 20px;
  }
}