/* 企業サイト配下に移したときに足したもの（2026-11-03、担当者依頼）。
   ヘッダーと見出しの書体・色を企業サイト（corporate.css）に寄せる。
     見出しの英字: Montserrat → Oswald（企業サイトの --corp-display と同じ）
     本文の色:     #2f4858 → #273038（--corp-ink）
     ヘッダー:     メニューは企業サイトと同じ太さ・下線アニメーション、ENTRY は企業サイトの採用ボタンと同じ橙（--corp-recruit）
   common.css / top.css / contents.css の後に読み込む。 */
:root {
  --corp-display: "Oswald", "Arial Narrow", sans-serif;
  --corp-ink: #273038;
  --corp-cyan: #2ab7d9;
  --corp-blue: #0069aa;
  --corp-recruit: #ff6b43;
}

html { background: #fff; }  /* 旧テーマは背景色を指定しておらず、ダーク系の表示環境で背景が黒くなる */
body { color: var(--corp-ink); }

/* 見出しの英字 */
.parts_title .main,
.page_main_title_box .title .main,
.page-data-title .title .main,
.entry_link .title .main,
.modal_nav_flex .title .main,
.entry_footer-title,
.bc_entry .entry_list-wrap > .main,
.newga_page-title {
  font-family: var(--corp-display);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.parts_title .sub,
.page_main_title_box .title .sub,
.page-data-title .title .sub { font-weight: 700; }

/* ヘッダー */
.header_nav ul li { font-weight: 700; letter-spacing: 0.025em; }
.header_nav ul li a { position: relative; color: var(--corp-ink); }
.header_nav ul li a::after {
  content: ""; position: absolute; right: 5px; bottom: 0; left: 5px; height: 2px;
  background: var(--corp-cyan); transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
}
.header_nav ul li a:hover { color: var(--corp-ink); }
.header_nav ul li a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ENTRY ボタン: 企業サイトの採用ボタンと同じ橙のピル型。ドロップダウンは白いカード */
@media (min-width: 920px) {
  .header_entry { position: relative; display: flex; align-items: center; height: 110px; padding: 0 12px 0 4px; }
  .header_entry a.entry-btn {
    width: auto; height: 46px; padding: 0 26px; border-radius: 999px;
    background: var(--corp-recruit);
    font-family: var(--corp-display); font-weight: 600; font-size: 1.6rem; letter-spacing: 0.1em;
    box-shadow: 0 6px 16px rgba(255, 107, 67, 0.3);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .header_entry a.entry-btn:hover { background: var(--corp-recruit); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255, 107, 67, 0.35); }
  .dropdown__lists {
    top: 78px; right: 12px; width: 232px; padding-top: 6px;  /* ボタンとの隙間はカードの外側（透明）で埋め、ホバーが切れないようにする */
  }
  .dropdown__lists::before {  /* 吹き出しの三角 */
    content: ""; position: absolute; top: -2px; right: 36px; width: 14px; height: 14px;
    background: #fff; border-left: 1px solid #d9e5e9; border-top: 1px solid #d9e5e9; transform: rotate(45deg);
  }
  .dropdown__lists > li { background: #fff; }
  .dropdown__lists > li:first-child { border-radius: 12px 12px 0 0; padding-top: 6px; }
  .dropdown__lists > li:last-child { border-radius: 0 0 12px 12px; padding-bottom: 6px; box-shadow: 0 14px 30px rgba(15, 59, 88, 0.16); }
  .dropdown__list { height: auto; border: 1px solid #d9e5e9; border-top: 0; border-bottom: 0; }
  .dropdown__lists > li:first-child { border-top: 1px solid #d9e5e9; }
  .dropdown__lists > li:last-child { border-bottom: 1px solid #d9e5e9; }
  .dropdown__list:not(:first-child)::before { display: none; }
  .dropdown__list:hover { background-color: #fff; }
  .header_entry .dropdown__list a {
    display: flex; flex-direction: column; gap: 2px; margin: 0 6px; padding: 10px 14px; border-radius: 8px;
    color: var(--corp-ink); font-weight: 700; font-size: 1.4rem; line-height: 1.4; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
  }
  .header_entry .dropdown__list a small { font-size: 1.1rem; font-weight: 400; color: #7c8d95; letter-spacing: 0; }
  .header_entry .dropdown__list a:hover { background: #fff1ec; color: var(--corp-recruit); }
  .header_entry .dropdown__list a:hover small { color: var(--corp-recruit); }
}

/* TOP の募集職種一覧: 文字が右端の丸矢印に重ならないよう、矢印の分だけ右に余白を取る */
.recruitment_list li a { padding-right: 52px; }
.recruitment_list li .sub { white-space: nowrap; }
@media (min-width: 920px) {
  /* 一覧の枠を左に広げ（560px→660px、左の余白 84px→60px）、「コールセンター/カスタマーサポート」が1行に収まるようにする（2026-11-03 担当者依頼） */
  .recruitment_content { flex: 0 0 660px; width: 660px; padding-left: 60px; }  /* 旧テーマは flex で縮んで 560px 未満になっていた。こちらは縮めない */
  .recruitment_img_pc { flex: 1 1 calc(100% - 660px + 50vw); min-width: 0; width: calc(100% - 660px + 50vw); }
  .recruitment_list li a { padding-right: 70px; }
}

/* 社員インタビューの冒頭（写真＋吹き出し）: 枠の大きさと位置は旧サイトのまま（2026-11-03 担当者指示）。
   仮画像の右下に焼き込まれた旧吹き出しは、PC 幅では本物の吹き出しの範囲にほぼ収まっているが、
   旧テーマの吹き出しが不透明度 97% だったため透けて見えていた。不透明にし、数px 左上へ寄せて完全に隠す。
   見た目は「白いカード＋水色のアクセント」（企業サイトのカードと同じ文法。担当者が3案から選択） */
.parts_interview_mv .content {
  background: #fff; color: var(--corp-ink);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(15, 59, 88, 0.16);
  line-height: 1.7;
}
.parts_interview_mv .content::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 4px; border-radius: 2px; background: var(--corp-cyan); }
.parts_interview_mv .content .job { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 1.3rem; }
.parts_interview_mv .content .job_en { font-family: var(--corp-display); font-weight: 500; font-size: 1.2rem; letter-spacing: 0.16em; color: #0a7a96; }
.parts_interview_mv .content .job_jp { padding: 2px 12px; border-radius: 999px; background: #eaf9fd; color: #0a7a96; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.7; }
.parts_interview_mv .content .catch { margin-top: 10px; font-size: 1.5rem; font-weight: 700; line-height: 1.8; }
.parts_interview_mv .content .name_wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid #d9e5e9; }
.parts_interview_mv .content .name { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.04em; }
@media (min-width: 920px) {
  .parts_interview_mv .content { transform: translate(-6px, -6px); padding: 34px 44px; }
  .parts_interview_mv .content::before { top: 36px; bottom: 36px; }
  .parts_interview_mv .content .job_en { font-size: 1.25rem; }
  .parts_interview_mv .content .job_jp { font-size: 1.3rem; }
  .parts_interview_mv .content .catch { margin-top: 12px; font-size: 1.65rem; }
  .parts_interview_mv .content .name_wrap { margin-top: 18px; padding-top: 14px; }
  .parts_interview_mv .content .name { font-size: 2rem; }
}
@media (max-width: 919px) {
  /* スマホ幅は吹き出しが写真の下に来て右下を隠せないので、写真は左側（焼き込みのない範囲）だけを見せる */
  .parts_interview_mv .img img { display: block; width: 100%; aspect-ratio: 700 / 538; object-fit: cover; object-position: left center; }
}

/* TOP の社員一覧: 職種タグの色がばらばら（ピンク・茶・緑）だったのを、企業サイトの水色系にそろえる */
.js_member_slider .member_list_item .name .category {
  display: block; width: max-content; max-width: 100%; margin: 6px auto 0; padding: 3px 14px; border-radius: 999px;  /* 職種は常に名前の下の行に */
  background: #eaf9fd; color: #0a7a96; font-size: 1.3rem; font-weight: 700; line-height: 1.6;
}
@media (min-width: 920px) { .js_member_slider .member_list_item .name .category { font-size: 1.4rem; } }

/* 福利厚生・社内環境の認証一覧: SVG のアイコン（がん対策推進企業アクション）が flex の中で幅ゼロになるので幅を明示する */
.benefit-icn-list-img img { display: block; width: 100%; height: auto; }
@media (min-width: 920px) { .benefit-icn-list-img { flex: 0 0 100px; width: 100px; } }

/* 下層ページの見出しブロック（社員インタビュー・福利厚生）: 企業サイトの下層ページと同じ「明るい地に小見出し＋見出し＋説明文、右に角丸の写真」に（2026-11-03 担当者が3案から選択）。
   写真は旧サイトのストック写真から自社の写真（ロゴ壁の前の社員 / 本社オフィス）に差し替え */
.page_main_title { background: #f4f8f9; }
.page_main_title .page_main_title_box .title { color: var(--corp-ink); }
.page_main_title .page_main_title_box .title .main {
  display: block; margin-bottom: 16px; color: var(--corp-blue);
  font-family: var(--corp-display); font-weight: 500; font-size: 1.4rem; letter-spacing: 0.12em; line-height: 1.2;
}
.page_main_title .page_main_title_box .title .main::before { content: ""; display: inline-block; width: 30px; height: 1px; margin-right: 12px; background: currentColor; vertical-align: 0.35em; }
.page_main_title .page_main_title_box .title .sub { display: block; font-size: 3rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.25; }
.page_main_title .page_main_title_box .lead { margin: 16px 0 0; color: #304857; font-size: 1.4rem; line-height: 2; }
.page_main_title .bg { border-radius: 14px; box-shadow: 0 20px 44px rgba(15, 59, 88, 0.14); }
/* 写真は「大1枚＋小2枚」（2026-11-03 担当者が案Bを選択）。1枚目が大、2・3枚目が右に縦並び。スマホ幅は大が上、小2枚が下に横並び */
.page_main_title .bg_photos,
.interview .page_main_title .bg_photos,
.workplace .page_main_title .bg_photos { display: grid; gap: 14px; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
.page_main_title .bg_photos img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 18%; border-radius: 12px; box-shadow: 0 10px 24px rgba(15, 59, 88, 0.12); }
.page_main_title .bg_photos img:first-child { object-position: center 40%; }
.workplace .page_main_title .bg_photos img:first-child { object-position: center center; }
@media (max-width: 919px) {
  .page_main_title { padding: 28px 0 32px; }
  .page_main_title .page_main_title_box .title { padding: 0; }
  .page_main_title .page_main_title_box .lead { margin: 10px 0 22px; }
  .page_main_title .bg { margin: 0 20px; padding-top: 58%; }
  .page_main_title .bg_photos { padding-top: 0; grid-template-columns: 1fr 1fr; gap: 10px; }
  .page_main_title .bg_photos img:first-child { grid-column: 1 / 3; aspect-ratio: 16 / 10; }
  .page_main_title .bg_photos img { aspect-ratio: 4 / 3; }
}
@media (min-width: 920px) {
  .page_main_title { height: auto; padding: 56px 0 64px; }
  .page_main_title .page_main_title_box { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; min-height: 400px; padding-right: 54%; }
  .page_main_title .page_main_title_box .title { padding: 0; }
  .page_main_title .page_main_title_box .title .main { font-size: 1.5rem; }
  .page_main_title .page_main_title_box .title .sub { font-size: 5.2rem; }
  .page_main_title .page_main_title_box .lead { margin-top: 22px; font-size: 1.6rem; }
  .page_main_title .bg {
    top: 56px; right: max(40px, calc((100% - 1200px) / 2)); width: min(600px, calc(50% - 40px)); padding-top: 0; height: 400px;
  }
  .page_main_title .bg_photos { grid-template-columns: 1fr 200px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .page_main_title .bg_photos img:first-child { grid-row: 1 / 3; }
}

/* 社員インタビューの職種タブ: 灰色の箱から、文字＋選択中は水色の下線（企業サイトのメニューと同じ）に */
.tabs { display: flex; flex-wrap: wrap; gap: 0 36px; border-bottom: 1px solid #d9e5e9; }
.tabs .tab_item {
  width: auto; height: auto; float: none; border: 0; background: transparent;
  padding: 12px 2px 14px; margin-bottom: -1px; line-height: 1.5; font-size: 1.5rem; font-weight: 700; color: #304857;
  border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.tabs .tab_item:hover { opacity: 1; color: var(--corp-blue); }
.tabs input:checked + .tab_item { background: transparent; color: var(--corp-blue); border-bottom-color: var(--corp-cyan); }
.tabs .tab_content { flex: 0 0 100%; padding-top: 32px; }
@media (max-width: 919px) { .tabs { gap: 0 20px; } .tabs .tab_item { font-size: 1.4rem; padding: 10px 0 12px; } }

/* 追記した注記 */
.entry_note, .data_note { font-size: 1.3rem; line-height: 1.8; }
/* 数字で見る: 「2025年版」の画像の代わりの文字（画像と同じ青） */
.data_year { display: block; margin: 0 auto 10px; color: #2592d0; line-height: 1; white-space: nowrap; }
.data_year .num { font-family: var(--corp-display); font-weight: 600; font-size: 4.2rem; letter-spacing: 0.02em; }
.data_year .unit { margin-left: 4px; font-size: 1.8rem; font-weight: 700; }
@media (min-width: 920px) {
  .data_year { margin-bottom: 25px; }
  .data_year .num { font-size: 5.6rem; }
  .data_year .unit { font-size: 2.4rem; }
}
.entry_note { margin: 20px auto 0; max-width: 760px; }
.entry_note dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; }
.entry_note dt { font-weight: 700; }
.entry_note dd { margin: 0; }
@media (max-width: 767px) {
  .entry_note dl { grid-template-columns: 1fr; gap: 2px 0; }
  .entry_note dd { margin-bottom: 8px; }
}