/* ================================================
   YouTube Responsive Embed
   ================================================ */

/* YouTube埋め込み用レスポンシブコンテナ */
.youtube-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 (9/16 = 0.5625) */
  height: 0;
  overflow: hidden;
  background-color: #000; /* ローディング時の背景 */
}

/* iframe要素のスタイリング */
.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* 
  レスポンシブ対応:
  - PC: 最大980px幅（l-grid-narrowにより制限）で16:9
  - タブレット: 画面幅いっぱいで16:9
  - スマホ: 画面幅いっぱいで16:9
  
  追加のメディアクエリは不要（親要素で制御済み）
*/


/* ================================================
   Recruit Banner (汎用採用バナー)
   ================================================ */

/* 
  使い方: 他ページでも採用バナーを表示する場合に使用
  TOPページの.front-recruitスタイルをベースに、汎用化
*/

/* リストアイテムのレイアウト */
.recruit-banner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各バナーアイテム */
.recruit-banner-list li {
  flex: 1 1 calc(50% - 12px); /* 2カラムレイアウト、gap分を考慮 */
  min-width: 280px;
}

/* バナーリンク */
.recruit-banner-list li a {
  display: block;
  position: relative;
  padding: 42px 48px 42px 24px; /* 右側にアイコンスペース確保 */
  font-family: "Roboto Condensed", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", "yugothic", "yu gothic", "游ゴシック", "游ゴシック体", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  text-align: center;
  background: #222F4D;
  border-radius: 4px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

/* 右矢印アイコン（Font Awesome） */
.recruit-banner-list li a::before {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  color: #fff;
  content: "\f138"; /* 右矢印 */
  transition: color 0.25s ease;
}

/* ホバー時のスタイル */
.recruit-banner-list li a:hover {
  color: #222F4D;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24), 0 4px 16px 0 rgba(0, 0, 0, 0.19);
  transform: translateY(-2px);
}

.recruit-banner-list li a:hover::before {
  color: #222F4D;
}

/* タブレット対応（768px以下） */
@media screen and (max-width: 768px) {
  .recruit-banner-list {
    gap: 16px;
  }
  
  .recruit-banner-list li {
    flex: 1 1 100%; /* 1カラムレイアウト */
  }
  
  .recruit-banner-list li a {
    padding: 24px 40px 24px 20px;
    font-size: 16px;
    line-height: 1.6;
  }
  
  .recruit-banner-list li a::before {
    right: 16px;
  }
}

/* 
  使用例:
  
  <ul class="recruit-banner-list">
    <li><a href="https://saiyo-page.jp/aida-link/" target="_blank">中途採用（indeed）</a></li>
    <li><a href="https://saiyo-page.jp/aida-link/aboutus/#interview" target="_blank">先輩からのメッセージ</a></li>
  </ul>
*/