@charset "UTF-8";

/* ==========================================================================
   1. @font-face による極太明朝体（ウエイト 900）の定義
   ========================================================================== */
@font-face {
  font-family: 'Noto Serif JP Custom';
  /* 実際のフォントファイルの配置パス・形式に合わせて適宜変更してください */
  src: url('fonts/noto-serif-jp-v31-japanese-900.woff2') format('woff2'),
       url('fonts/noto-serif-jp-v31-japanese-900.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap; /* フォント読み込み中もテキストを即座に代替フォントで表示 */
}

/* ==========================================================================
   2. 共通設定・リセット（上のマージンは不要）
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ==========================================================================
   3. メインビジュアル全体（スマホ基準：448 : 598、横幅100%レスポンシブ）
   ========================================================================== */
.main-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 376 / 498; /* スマホ用の縦横比（448:598） */
  overflow: hidden;
}

/* 各パーツの絶対配置ベース */
.main-visual__bg,
.main-visual__watermark,
.main-visual__catch,
.main-visual__logo {
  position: absolute;
}

/* -------------------------------------------
 * 背景画像（全面に配置・<picture>タグ対応）
 * ------------------------------------------- */
.main-visual__bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.main-visual__bg picture,
.main-visual__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 比率を保ったままエリア全体を覆う */
  object-position: center center;
}

/* -------------------------------------------
 * 透かし文字（スマホ時：横幅100%いっぱいに表示）
 * ------------------------------------------- */
.main-visual__watermark {
  left: 0;
  bottom: 0;
  width: 100%; 
  z-index: 2;
  pointer-events: none;
}
.main-visual__watermark img {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------------------------
 * キャッチコピー（スマホ時：極太明朝体・必ず2段・白背景＋斜めカット）
 * ------------------------------------------- */
.main-visual__catch {
  top: 52%;
  left: 5%;
  z-index: 3;
  
  /* @font-face で定義した識別名を指定 */
  font-family: 'Noto Serif JP Custom', "Hiragino Mincho ProN", "serif";
  font-weight: 900; 
  
  /* 子要素（各行）を縦並び（2段）にする設定 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
}

.main-visual__catch-line1,
.main-visual__catch-line2 {
  display: block; 
  background-color: #ffffff;
  color: #0b2240; /* カンプに合わせた濃紺・黒系 */
  font-family: "Noto Serif JP", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS Serif", serif;
  font-size: 1.5rem;
  font-weight: 900; 
  padding: 6px 8px 6px 8px;
  margin-bottom: 10px; /* 1段目と2段目の間の余白 */
  position: relative;
  white-space: nowrap; /* 意図しない自動改行を防止 */
}

/* カンプの右側にある斜めカット（平行四辺形風アクセント）の再現 */
.main-visual__catch-line1::after,
.main-visual__catch-line2::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 20px;
  height: 100%;
  background-color: #ffffff;
  transform: skewX(-15deg);
  z-index: -1;
}

/* -------------------------------------------
 * 100周年ロゴマーク（スマホ時：右下配置）
 * ------------------------------------------- */
.main-visual__logo {
  right: 0;
  bottom: 18%;
  z-index: 3;
  width: 45%; /* スマホ画面の横幅に対してのサイズ */
  max-width: 180px;
}
.main-visual__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   4. PC用設定（画面幅が 768px 以上：縦横比 15 : 7 に自動切り替え）
   ========================================================================== */
@media (min-width: 768px) {
  .main-visual {
    aspect-ratio: 15 / 7.5; /* PC用の縦横比（15:7） */
  }

  /* 透かし文字（PC時は左から60%の比率に戻す） */
  .main-visual__watermark {
    width: 60%; 
    bottom: -2%; /* カンプのように少し下に見切れる配置の微調整 */
  }

  /* キャッチコピーのPC用最適化 */
  .main-visual__catch {
    top: 25%;
    left: 5%;
  }
  .main-visual__catch-line1,
  .main-visual__catch-line2 {
    font-size: 3.0rem; /* PC用に文字を大きく */
    padding: 10px 35px 10px 20px;
    margin-bottom: 14px; 
  }
  .main-visual__catch-line1::after,
  .main-visual__catch-line2::after {
    right: -15px;
    width: 30px;
  }

  /* 100周年ロゴマークのPC用最適化 */
  .main-visual__logo {
    right: 0;
    bottom: 15%;
    width: 25%;
    max-width: 260px;
  }
}
@charset "UTF-8";

/* ==========================================================================
   会社・仕事紹介エリア（コンテンツ幅1100px / 左右背景100%等高）
   ========================================================================== */
.intro-section {
  width: 100%;
  padding: 0; 
  position: relative;
  overflow: hidden; /* 左右へのはみ出し背景を画面外でカット */
  background-color: #e9f0fa; /* スマホ時は全体をグレー背景に */
}

.intro-section__inner {
  width: 100%;
  max-width: 1100px; /* コンテンツの最大幅を 1100px に制限 */
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* スマホ時は縦並び */
}

/* 1. 左側画像（電柱） */
.intro-section__image {
  width: 60%;         /* スマホ時に画像の幅を60%に縮小 */
  margin: 40px auto 0 auto; /* 左右中央寄せにし、上部に少し余白を設ける */
  position: relative;
}
.intro-section__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 2. 右側コンテンツ */
.intro-section__content {
  width: 100%;
  display: flex;
  align-items: center; 
  position: relative;
}

/* テキストを内側で包むブロック */
.intro-section__content-inner {
  width: 100%;
  padding: 40px 20px 120px 20px; 
  position: relative;
  z-index: 2;
}

/* 見出し */
.intro-section__heading {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 1.8;
  color: #557093;
  margin-bottom: 24px;
  /* スマホ時は画面幅に合わせて自然に自動折り返しさせます */
  word-break: break-all;
  white-space: normal;
}

/* 【新規追加】スマホ表示時は、見出し（heading）の中のすべてのbrタグ（改行）を消去 */
.intro-section .intro-section__inner .intro-section__content .intro-section__content-inner .intro-section__heading br {
  display: none !important;
}

/* リード文（スマホ時） */
.intro-section__text {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #557093;
  /* 【修正】通常の表示に戻し、画面幅に合わせて自動で折り返し（はみ出しを解消）させます */
  display: block !important;
  width: 100% !important;
  word-break: break-all;
  white-space: normal !important;
}

/* 【継続】スマホ表示時は、リード文（text）の中のすべてのbrタグ（改行）を消去 */
.intro-section .intro-section__inner .intro-section__content .intro-section__content-inner .intro-section__text br {
  display: none !important;
}



/* 線画イラスト（右下配置） */
.intro-section__illustration {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60%;
  max-width: 280px;
  z-index: 1;
  pointer-events: none;
}
.intro-section__illustration img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   PC用設定（画面幅が 768px 以上：左右等高・写真背景も100%グレー化）
   ========================================================================== */
@media (min-width: 768px) {
  .intro-section {
    background-color: transparent; /* 左右の疑似要素でシームレスな背景帯を生成 */
  }

  .intro-section__inner {
    flex-direction: row; /* 横並び（2カラム） */
    align-items: stretch; /* 左右のカラムの高さを強制的に等高にし、画像に同期させる */
    position: relative;
  }

  /* 左側画像カラム：全体の35%の幅に（20%縮小調整済み） */
  .intro-section__image {
    width: 35%;
    margin: 0;
    z-index: 2;
    background-color: #e9f0fa;
  }
  
  /* 画面の左端（横幅100%）まで電柱の高さのままグレー背景を突き抜けさせる設定 */
  .intro-section__image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200vw;
    height: 100%;
    background-color: #e9f0fa;
    z-index: -1;
  }

  .intro-section__image img {
    width: 100%;
    height: 100%; /* 親要素（.intro-section__inner）の高さにぴったり追従 */
    object-fit: cover;
  }

  /* 右側コンテンツカラム：全体の65%の幅に（20%拡大調整済み） */
  .intro-section__content {
    width: 65%;
    background-color: #e9f0fa;
  }
  
  /* 画面の右端（横幅100%）までグレー背景を突き抜けさせる設定 */
  .intro-section__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200vw; 
    height: 100%;
    background-color: #e9f0fa;
    z-index: 1;
  }

  /* テキスト用の内側ブロック */
  .intro-section__content-inner {
    padding: 60px 8% 60px 10%; 
  }

  /* 見出し（PC向けサイズアップ） */
  .intro-section__heading {
    font-size: 1.6rem;
    margin-bottom: 32px;
  }

  /* 【新規追加】PC表示に切り替わったら、見出し内のbrタグによる改行を復活 */
  .intro-section .intro-section__inner .intro-section__content .intro-section__content-inner .intro-section__heading br {
    display: inline !important;
  }

  /* リード文（PC向け：サイズアップと改行の復活） */
  .intro-section__text {
    font-size: 1.2rem;
  }

  /* PC表示に切り替わったら、リード文内のbrタグによる改行を復活 */
  .intro-section .intro-section__inner .intro-section__content .intro-section__content-inner .intro-section__text br {
    display: inline !important;
  }
  
   .intro-section__illustration {
    width: 45%;
    max-width: 400px;
    bottom: 0;
    right: 0; 
    z-index: 2;
  }
}


/* ==========================================================================
   Top Page - Work Section (仕事を知る)
   ========================================================================== */

.top-work {
  position: relative;
  width: 100%;
  padding: 120px 0;
  overflow: hidden; /* すかし文字やトラックのハミ出し対策 */
  background-color: #fff;
}

/* 背景のすかし文字画像 */
.top-work__bg-text {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}
.top-work__bg-text img {
  width: 100%;
  height: auto;
}

/* 専用コンテナ（1100px） */
.top-work__container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* セクションヘッダー */
.top-work__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 下揃えにすることでタイトル位置を下げる */
  margin-bottom: 60px;
  position: relative;
  min-height: 180px; /* タイトルをすかし文字の下へ下げるための高さ確保 */
}
.top-work__header-text {
  padding-bottom: 10px;
}
.top-work__title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}
.top-work__lead {
  font-size: 14px;
  color: #d15151; /* 赤いテキストカラー */
  font-weight: bold;
}

/* 右上のトラック画像 */
.top-work__header-visual {
  width: 45%;
  max-width: 500px;
  align-self: flex-start;
  margin-top: -20px;
}
.top-work__header-visual img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* カードレイアウト（2カラム） */
.top-work__card-list {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.top-work__card {
  flex: 1;
  min-height: 320px; /* 背景画像を表示するための最小高さを確保 */
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: right bottom; /* 画像と一体化した背景を右下に配置 */
  background-size: contain; /* 横幅に応じて背景のサイズを自動調整 */
}
/* 1. カード本体（aタグ）のスタイルを元のdivと完全に同期させる */
a.top-work__card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important; /* リンクの下線を消す */
  color: #333333 !important;        /* 文字色の変化を防ぐ */
}

/* 2. PC時：文字エリアの横幅（55%）とレイアウトを完全に維持する */
a.top-work__card .top-work__card-content {
  width: 55% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
}

/* 3. 中にある説明文や元のボタンの色・下線を完全にキープする */
a.top-work__card .top-work__card-desc {
  color: #666666 !important;
}
a.top-work__card .top-work__card-link {
  color: #004c83 !important;
  text-decoration: none !important;
}
a.top-work__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease;
}
/* 各カード個別の背景画像設定 */
.top-work__card--transport {
  background-image: url('../images/top/t_work.webp');
}
.top-work__card--electric {
  background-image: url('../images/top/p_work.webp');
}

/* カードヘッダーとカラーバリエーション */
.top-work__card-header {
  padding: 20px 25px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 2;
}
.top-work__card-header--transport { background-color: #004c83; }
.top-work__card-header--electric  { background-color: #3d7cb9; }

.top-work__card-num {
  font-size: 24px;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  padding-right: 15px;
}
.top-work__card-title {
  font-size: 18px;
  font-weight: 700;
}

/* カードボディ */
.top-work__card-body {
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

/* 左側のテキストエリア（右側の背景画像と被らないよう横幅を制限） */
.top-work__card-content {
  width: 55%; /* テキストが右側の写真背景と重ならないように調整 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}
.top-work__card-desc {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 25px;
}

/* 詳しく見る ボタン */
.top-work__card-link {
  display: inline-flex;
  align-items: center;
  color: #004c83;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  width: fit-content;
  margin-top: auto; /* ボタンを常に下部に固定 */
  transition: opacity 0.2s ease;
}
.top-work__card-link:hover {
  opacity: 0.7;
}

/* 矢印アイコン */
.top-work__card-link-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #004c83;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
}
.top-work__card-link-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 45%;
  width: 5px;
  height: 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* 📱 レスポンシブ（960px以下・タブレット/スマホ） */
@media (max-width: 960px) {
  .top-work {
    padding: 60px 0;
  }
  .top-work__bg-text {
    display: none;
  }
  .top-work__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
    min-height: auto;
  }
  .top-work__header-visual {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }
  .top-work__card-list {
    flex-direction: column;
    gap: 40px;
  }
  .top-work__card {
    min-height: 260px;
    background-size: auto 70%; /* スマホ時は背景がテキストの下に回り込むようにサイズ調整 */
    background-position: right bottom;
  }
  .top-work__card-content {
    width: 100%; /* スマホ時は横幅いっぱいに広げる */
  }
  /* スマホ時はカードを縦並びに（元の記述を維持） */
  a.top-work__card {
    min-height: 260px !important;
    background-size: auto 70% !important;
    background-position: right bottom !important;
  }
  /* スマホ時は文字エリアを横幅100%に広げる（元の記述を維持） */
  a.top-work__card .top-work__card-content {
    width: 100% !important;
  }
}


/* ==========================================================================
   Top Page - Voice Section (先輩社員の声)
   ========================================================================== */

/* セクション全体の背景は「白」、上のハミ出し要素のための余白を確保 */
.top-voice {
  width: 100%;
  padding: 160px 0 80px 0; 
  background-color: #fff; 
}

/* 1100pxコンテナ：センター揃え（ハミ出しを許可するため overflow: visible） */
.top-voice__container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* 1. 背景のすかし文字画像：枠外の上（上辺）にくっつけて配置 */
.top-voice__bg-text {
  position: absolute;
  bottom: 100%;
  left: 20px;
  width: 75%;
  max-width: 800px;
  z-index: 1; /* 一番奥のレイヤー */
  pointer-events: none;
}
.top-voice__bg-text img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 1100pxの枠内（グラデーション背景の本体ボックス） */
.top-voice__inner-box {
  width: 100%;
  padding: 60px 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3293e4 0%, #1e5ba3 100%);
  box-shadow: 0 10px 40px rgba(30, 91, 163, 0.15);
  position: relative;
}

/* セクションヘッダー（グラデーション枠内のテキスト） */
.top-voice__header {
  margin-bottom: 50px;
  color: #fff;
  position: relative;
  z-index: 1; /* マイクの奥に配置 */
}
.top-voice__title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}
.top-voice__title::after {
  content: "";
  display: block;
  width: 35px;
  height: 4px;
  background-color: #e54d4d;
  margin-top: 15px;
}
.top-voice__lead {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.8;
}

/* 2. 右上のマイク：横幅548px、上へ120pxはみ出させる */
.top-voice__bg-mic {
  position: absolute;
  top: 0;
  right: -60px; /* カンプの重なりに合わせた調整値 */
  width: 548px;
  z-index: 2; /* 👈 グラデーション背景やタイトル文(z-index:1)より手前 */
  pointer-events: none;
  transform: translateY(-120px); 
}
.top-voice__bg-mic img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* 3. カードレイアウト（2カラム）：ここをマイクより前面に引き出す */
.top-voice__card-list {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  z-index: 3; /* 👈 マイク(z-index: 2)よりもさらに前面（最前面）に重ねる */
}

/* カード全体 */
.top-voice__card {
  flex: 1;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.top-voice__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* カードヘッダー */
.top-voice__card-header {
  padding: 5px 25px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-voice__card-header--transport { background-color: #0d426a; }
.top-voice__card-header--electric  { background-color: #1b4b8f; }

.top-voice__card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 各部門のイラストアイコン（高さ102px / 縦横比 156:102 を維持） */
.top-voice__card-icon {
  height: 102px;
  aspect-ratio: 156 / 102;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-voice__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* カードボディ */
.top-voice__card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: #fff;
}

/* 先輩社員の写真（縦横比 457:256 をアスペクト比で固定） */
.top-voice__card-img {
  width: 100%;
  aspect-ratio: 457 / 256;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 4px;
}
.top-voice__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
  transition: transform 0.3s ease;
}
.top-voice__card:hover .top-voice__card-img img {
  transform: scale(1.03);
}

/* 詳しく見る（右寄せエリア） */
.top-voice__card-link-area {
  margin-top: auto;
  text-align: right;
}
.top-voice__card-link {
  display: inline-flex;
  align-items: center;
  color: #6da2cd;
  font-size: 14px;
  font-weight: bold;
}
/* 水色の丸矢印アイコン */
.top-voice__card-link::before {
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #2b8cd9;
  color: #fff;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 11px;
  font-weight: normal;
}

/* ==========================================================================
   📱 レスポンシブ対応（960px以下・タブレット/スマホ）
   ========================================================================== */
@media (max-width: 960px) {
  .top-voice {
    /* 装飾が上に大きくはみ出すため、スマホでも上部の余白をしっかり確保 */
    padding: 120px 0 60px 0; 
  }
  
  .top-voice__container {
    padding: 0 15px; /* 画面端に少しだけ余白を持たせる */
  }
  
  .top-voice__inner-box {
    padding: 40px 20px;
    border-radius: 8px; /* スマホ時も角丸を維持 */
  }

  /* 1. 背景のすかし文字：スマホ表示でも消さずに縮小して表示 */
  /* 1. 背景のすかし文字：スマホ時は横幅80%で完全な左寄せに設定 */
  .top-voice__bg-text {
    width: 70%; /* 👈 ご指定の横幅80% */
    left: 0;    /* 👈 枠外の左端にぴったりくっつける（左寄せ） */
  }
  /* 2. 右上のマイク：スマホ表示でも消さずに縮小。位置も調整してカードと重なりすぎないように */
  .top-voice__bg-mic {
    width: 40%; /* 横幅を画面に対して40%に縮小 */
    max-width: 200px;
    right: 10px;
    transform: translateY(-80px); /* はみ出し量をスマホ用に調整（約100px〜80px） */
  }

  /* 3. カードリスト：縦並び（1カラム）に変更 */
  .top-voice__card-list {
    flex-direction: column;
    align-items: center; /* 👈 子要素（カード）を中央寄せにする */
    gap: 30px;
  }

  /* カード本体：横幅を80%に設定 */
  .top-voice__card {
    width: 80%; /* 👈 ご指定の横幅80% */
    flex: none; /* flex-growを解除して幅を確定させる */
  }

  /* 各部門のイラストアイコンもスマホ用にサイズを微調整 */
  .top-voice__card-icon {
    height: 60px; 
  }

  .top-voice__header {
    margin-bottom: 35px;
    padding-right: 35px; /* 右側のマイク画像とタイトルが被らないように防波堤を作る */
  }
  .top-voice__title {
    font-size: 24px; /* スマホ用にタイトルを少し小さく */
  }
}

/* 📱 さらに画面幅が狭いスマホ（560px以下）の微調整 */
@media (max-width: 560px) {
  .top-voice__card {
    width: 90%; /* あまりに画面が狭い場合は見やすさ優先で90%まで広げる、または80%のままでもOKです */
  }
  .top-voice__bg-mic {
    width: 45%;
    transform: translateY(-60px);
  }
}

/* ==========================================
   Top Benefits Section (最終完全版)
   ========================================== */

/* セクション全体 */
.top-benefits {
  position: relative;
  width: 100%;
  padding: 80px 0 100px 0;
  overflow: hidden;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* 1244px幅で中央揃えにする背景すかしレイヤー */
.top-benefits__bg-layer {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 1244px;
  pointer-events: none;
  z-index: 1;
}
.top-benefits__watermark {
  width: 100%;
}
.top-benefits__watermark img {
  width: 100%;
  height: auto;
  display: block;
}

/* メインコンテンツ（1100px中央揃え） */
.top-benefits__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* タイトルと写真を内包する複合エリア */
.top-benefits__main-visual {
  position: relative;
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}

/* タイトル部分 */
.top-benefits__title-area {
  position: relative;
  z-index: 3;
  padding-bottom: 20px;
}
.top-benefits__main-title {
  font-size: 32px;
  font-weight: 500;
  color: #2b3b65;
  margin: 0 0 12px 0;
  letter-spacing: 0.05em;
}
.top-benefits__title-line {
  display: block;
  width: 40px;
  height: 4px;
  background-color: #d11a1a;
}

/* 家族写真 */
.top-benefits__family-img {
  position: absolute;
  bottom: -15px;
  right: 0;
  width: 48%;
  max-width: 530px;
  z-index: 2;
}
.top-benefits__family-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* リード文 */
.top-benefits__lead {
  font-size: 15px;
  line-height: 1.8;
  color: #333333;
  margin: 40px 0 0 0;
  width: 100%;
  letter-spacing: 0.02em;
}

/* 6面の福利厚生カード（PC時:3カラム×2段） */
.top-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
  margin-top: 50px;
}

/* 福利厚生カード単体（下段カード：確実に50px低くなるよう調整） */
.top-benefits__card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 25px 20px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  height: 200px; /* 確実につぶすため、min-heightから固定height(200px)に変更 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.top-benefits__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* 上段カード修飾クラス（上段カード：確実に260pxになるよう調整） */
.top-benefits__card--large {
  height: 260px; /* 固定height(260px)に変更 */
  padding: 30px 20px;
}

/* 背景アイコン（175px×163px・右下配置） */
.top-benefits__card-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 175px;
  height: 163px;
  opacity: 0.06;
  z-index: 1;
  pointer-events: none;
}
.top-benefits__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
}

/* カードコンテンツ（PC時:高度を100%にして最下部固定の基準にする） */
.top-benefits__card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%; /* 親の固定高さを100%いっぱいに広げる */
  display: flex;
  flex-direction: column;
}

/* タイトル（太字・隙間を狭く） */
.top-benefits__card-title {
  font-size: 18px;
  font-weight: bold;
  color: #2b3b65;
  margin: 0 0 15px 0;
  letter-spacing: 0.02em;
}

/* 補足テキスト（隙間を狭く） */
.top-benefits__card-subtext {
  font-size: 14px;
  line-height: 1.5;
  color: #4a5568;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 実績・数字エリア（PC時:親の底面から20pxの位置に固定） */
.top-benefits__card-impact {
  position: absolute;
  bottom: 0px; /* カード自体のpadding下部25px/30pxの内側に入るため、0px指定で下から20〜30pxの位置に綺麗に収まります */
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

/* 数字等フォントパーツ */
.top-benefits__number-huge {
  font-size: 64px;
  font-weight: bold;
  color: #d11a1a;
  line-height: 1;
  font-family: sans-serif;
}
.top-benefits__number-large {
  font-size: 54px;
  font-weight: bold;
  color: #d11a1a;
  line-height: 1;
}
.top-benefits__text-large {
  font-size: 28px;
  font-weight: bold;
  color: #2b3b65;
}
.top-benefits__text-medium {
  font-size: 22px;
  font-weight: bold;
  color: #2b3b65;
  margin-left: 2px;
}
.top-benefits__text-small {
  font-size: 14px;
  font-weight: bold;
  color: #2b3b65;
  margin-right: 2px;
  align-self: center;
}
.top-benefits__card-impact .color-red {
  color: #d11a1a;
}

/* ボタン配置エリア（親コンテナの最下部に中央揃えで設置） */
.top-benefits__btn-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 50px; /* カード下部との余白 */
  box-sizing: border-box;
}

/* 添付画像の立体ボタンをCSSで完全再現 */
.top-benefits__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;                  /* 矢印とテキストの隙間 */
  width: 220px;               /* 指定の横幅 */
  height: 50px;               /* 押しやすい適正な高さ */
  background-color: #3b9cdc;  /* 画像の鮮やかな水色ベース */
  color: #ffffff;             /* 白文字 */
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 30px;        /* 左右が完全な半円になる丸み */
  box-sizing: border-box;
  
  /* 画像にある「少し濃い青の立体的な底面の影」を再現 */
  box-shadow: 0 6px 0px 0px #2a6f9d; 
  position: relative;
  top: 0;
  transition: all 0.15s ease-out;
}

/* ボタンの中の白丸矢印アイコンの再現 */
.top-benefits__more-btn::before {
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #ffffff;  /* 白い丸背景 */
  color: #3b9cdc;             /* 矢印はボタンのベース色と同じ */
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
}

/* ホバー（マウスを乗せたとき）およびクリック時のリアルな押し込み演出 */
.top-benefits__more-btn:hover {
  opacity: 0.65;
}
.top-benefits__more-btn:active {
  top: 4px; /* 影の厚み分下に沈み込ませる */
  box-shadow: 0 2px 0px 0px #2a6f9d; /* 影を薄くして押した感を表現 */
}
/* ==========================================
   レスポンシブ（タブレット・スマホ対応）
   ========================================== */

/* タブレット（960px以下） */
@media screen and (max-width: 960px) {
  .top-benefits__main-visual {
    min-height: 200px;
  }
  .top-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .top-benefits__card--large,
  .top-benefits__card {
    height: 220px; /* タブレット時は高さを揃えて一律220pxに固定 */
  }
}

/* スマートフォン（599px以下） */
@media screen and (max-width: 599px) {
  .top-benefits {
    padding: 50px 0;
  }
  
  /* 写真（上）→ タイトル（中）→ リード（下）の並び替えFlex */
  .top-benefits__main-visual {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .top-benefits__family-img {
    position: relative;
    bottom: 0;
    width: 85%;
    max-width: 340px;
    margin: 0 auto 24px auto;
    order: 1;
  }

  .top-benefits__title-area {
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 24px;
    order: 2;
  }
  .top-benefits__title-line {
    margin: 0 auto;
  }

  .top-benefits__lead {
    text-align: center;
    font-size: 14px;
    margin-top: 0;
  }

  /* スマホ時: カードを横に2つずつ並べて3段にする */
  .top-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 35px auto 0;
  }
  
  /* スマホ時は画面幅が狭く文字が折り返す可能性があるため、固定高さを解除（auto） */
  .top-benefits__card--large,
  .top-benefits__card {
    height: auto;
    min-height: auto;
    padding: 20px 10px;
  }
  .top-benefits__card-content {
    height: auto;
  }
  .top-benefits__card-impact {
    position: relative;
    bottom: auto;
    margin-top: 8px;
    margin-bottom: 0;
  }
  
  /* スマホ用のフォントサイズ縮小 */
  .top-benefits__card-title { font-size: 14px; margin-bottom: 6px; }
  .top-benefits__card-subtext { font-size: 11px; }
  .top-benefits__number-huge { font-size: 38px; }
  .top-benefits__number-large { font-size: 34px; }
  .top-benefits__text-large { font-size: 18px; }
  .top-benefits__text-medium { font-size: 14px; }
  .top-benefits__text-small { font-size: 11px; }

  /* スマホ用の背景アイコンサイズ縮小 */
  .top-benefits__card-icon {
    width: 90px;
    height: 84px;
  }
}
@media screen and (max-width: 480px) {
  .top-benefits__more-btn {
    width: 85%; /* スマホ画面幅に対して適切なサイズに縮小 */
    height: 54px;
    font-size: 15px;
  }
}

/* ==========================================================================
   カラー・変数定義
   ========================================================================== */
:root {
  --color-entry-blue: #3182dc;     /* キャッチコピーの爽やかな青色 */
  --color-entry-text: #333333;     /* 本文のダークグレー */
}

/* ==========================================================================
   Entry セクション基本設計
   ========================================================================== */
.top-entry {
  padding: 100px 0;
  background: none; /* セクション自体の背景は無し（透明） */
}

/* メインコンテンツ（最大横幅1100px中央揃え） */
.top-entry__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px; /* 左右カラムの間隔 */
}

/* ==========================================================================
   左側：キャッチコピーエリア
   ========================================================================== */
.top-entry__copy-wrap {
  flex: 1;
}

.top-entry__copy {
  font-size: 3.5rem; /* 56pxの大迫力フォント */
  font-weight: bold;
  color: var(--color-entry-blue);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin: 0;
}

/* ==========================================================================
   右側：文章 ＆ ボタンエリア
   ========================================================================== */
.top-entry__body {
  width: 540px; /* 右側エリアのPC時固定幅 */
  flex-shrink: 0;
}

/* リード文テキスト */
.top-entry__text-wrap {
  margin-bottom: 40px;
}

.top-entry__text {
  font-size: 1rem; /* 16px */
  color: var(--color-entry-text);
  line-height: 1.8;
  letter-spacing: 0.03em;
  margin: 0 0 24px 0;
}

.top-entry__text:last-child {
  margin-bottom: 0;
}

/* ボタンエリア（右寄せ配置） */
.top-entry__btn-wrap {
  display: flex;
  justify-content: flex-end;
}

/* 募集要項を見るボタン */
.top-entry__btn {
  display: block;
  text-decoration: none;
  line-height: 0;
  width: 321px; /* 修正：ボタン画像の横幅を321pxに固定 */
  height: auto;
  background: none;
  border: none;
  box-shadow: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.top-entry__btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* ホバー時のなめらかなアニメーション */
.top-entry__btn:hover {
  transform: translateY(-2px); /* 少し浮き上がる */
  opacity: 0.85;                /* ほんのり薄くなる */
}

/* 改行コントロール用ヘルパークラス */
@media screen and (max-width: 768px) {
  .u-pc-only { display: none !important; }
}

/* ==========================================================================
   スマホ（レスポンシブ）対応
   ========================================================================== */
@media screen and (max-width: 768px) {
  .top-entry {
    padding: 60px 0;
  }

  /* 左右分割を縦に組み替え */
  .top-entry__inner {
    flex-direction: column;
    gap: 32px;
    padding: 0 20px;
  }

  /* 左側コピー */
  .top-entry__copy-wrap {
    width: 100%;
  }
  .top-entry__copy {
    font-size: 2.25rem; /* 36px相当に縮小 */
    line-height: 1.4;
  }

  /* 右側エリア */
  .top-entry__body {
    width: 100%;
  }

  .top-entry__text-wrap {
    margin-bottom: 32px;
  }
  .top-entry__text {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.7;
    margin-bottom: 16px;
  }

  /* 修正：スマホ時はボタンエリアをセンター揃えにする */
  .top-entry__btn-wrap {
    justify-content: center;
  }
  
  /* 修正：スマホ時はボタンの横幅を「80%」のセンター揃えにする */
  .top-entry__btn {
    width: 60%;
    max-width: 321px; /* 元の画像幅（321px）を超えて拡大しないように上限を設定 */
  }
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
  .top-entry__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 40px);
  }

  .top-entry__copy-wrap {
    flex: 0 0 40%;
    min-width: 0;
  }

  .top-entry__copy {
    font-size: clamp(2rem, 3.8vw, 2.625rem);
    line-height: 1.45;
  }

  .top-entry__body {
    width: auto; // 元の540px固定を解除
    flex: 1 1 0;
    min-width: 0;
  }

  .top-entry__btn {
    max-width: 100%;
  }
}

/* ==========================================================================
   カラー・変数定義（既存のものがあれば差し替えてください）
   ========================================================================== */
:root {
  --color-links-bg: #f5f6f8;    /* 背景のうっすらとしたグレー */
  --color-links-navy: #163570;  /* ボタンの文字・枠線・矢印のきれいな紺色 */
  --color-links-white: #ffffff; /* ボタンの背景色（白） */
}

/* ==========================================================================
   Link セクション基本設計
   ========================================================================== */
.top-links {
  width: 100%;
  background-color: var(--color-links-bg); /* 背景はグレーで横幅100% */
  padding: 100px 0;
}

/* メインコンテンツ（最大横幅1100px中央揃え） */
.top-links__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ==========================================================================
   PC時：2段センター揃えレイアウト（Flexboxによる緻密な整列制御）
   ========================================================================== */
.top-links__grid {
  display: flex;
  flex-wrap: wrap;
  /* コンテンツエリア内（1100px内）で下段に折り返した要素も含めて「完全センター揃え」にします */
  justify-content: center; 
  /* 上段と下段の縦の間隔を48px、横のボタン同士の間隔を32pxに設定 */
  gap: 48px 32px; 
}

/* リンクカード（ボタン）共通デザイン
   3列並び（1100px内）で綺麗に収まるよう、ボタン1つずつの横幅を計算して固定。
   計算式：（最大1100px - 左右パディング40px - 横の隙間32px × 2）÷ 3 ＝ 約332px
   カンプの余白感とフィットさせるため、330px前後の固定幅で美しくホールドします。 */
.top-links__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-links-white);
  border: 1px solid var(--color-links-navy);
  border-radius: 8px; /* カンプに準拠したなめらかな角丸 */
  padding: 0 24px;
  width: 332px;       /* 画面伸縮時も形を破綻させない固定幅 */
  height: 72px;       /* 押しやすい適正なボタンの高さ */
  box-sizing: border-box;
  text-decoration: none;
  /* カンプ通りの綺麗な右下へのシャドウ（影）表現 */
  box-shadow: 4px 4px 0px 0px rgba(22, 53, 112, 0.2); 
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* ボタンテキスト */
.top-links__card-text {
  font-size: 1.125rem; /* 18px */
  font-weight: bold;
  color: var(--color-links-navy);
  letter-spacing: 0.05em;
}

/* 右側：スマートな長い矢印（CSS一本線再現） */
.top-links__card-arrow {
  position: relative;
  width: 80px; /* カンプ通りの非常に長い一本線矢印の幅 */
  height: 1px;
  background-color: var(--color-links-navy);
  transition: transform 0.3s ease;
}
/* 矢印の先端（＞） */
.top-links__card-arrow::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--color-links-navy);
  border-right: 1px solid var(--color-links-navy);
  transform: rotate(45deg);
}

/* ==========================================================================
   ホバーインタラクション（リアルな沈み込みアニメーション）
   ========================================================================== */
.top-links__card:hover {
  /* 影の方向（右下）にボタンを押し込むことで、実際にボタンを押したようなリアルな立体感を表現 */
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px 0px rgba(22, 53, 112, 0.2);
  background-color: #fafbfe; /* ほんのり明るくしてリアクションを強調 */
}
.top-links__card:hover .top-links__card-arrow {
  transform: scaleX(1.05); /* 矢印が少しだけ右に伸びる高品位な演出 */
  transform-origin: left center;
}

/* ==========================================================================
   スマホ（レスポンシブ）対応 ── 安全な1カラム縦並び
   ========================================================================== */
@media screen and (max-width: 768px) {
  .top-links {
    padding: 60px 0;
  }

  .top-links__inner {
    padding: 0 16px; /* スマホ向けの左右余白 */
  }

  /* スマホ時はフレックス方向を縦（column）に切り替えて整然とした1カラムにします */
  .top-links__grid {
    flex-direction: column;
    align-items: center; /* 横方向もセンター揃え */
    gap: 20px;           /* スマホに適したカード同士の間隔 */
  }

  /* スマホの画面幅に合わせて横幅を100%可変にし、最大幅を制限 */
  .top-links__card {
    width: 70%;
    max-width: 480px; /* スマートフォンで押しやすい上限幅 */
    height: 64px;     /* スマホ向けに高さをスマート化 */
    padding: 0 16px;
    box-shadow: 3px 3px 0px 0px rgba(22, 53, 112, 0.2); 
  }
  
  .top-links__card:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px 0px rgba(22, 53, 112, 0.2);
  }

  .top-links__card-text {
    font-size: 1rem; /* 16px相当に最適化 */
  }

  /* スマホの狭い画面幅でもテキストと衝突して崩れないよう、矢印の長さをパーセントで自動縮小化 */
  .top-links__card-arrow {
    width: 25%;
    max-width: 80px;
  }
}