@charset "UTF-8";

/* =============================================
   数字で見るRRG
   ============================================= */
/* グレー背景前に白い余白を作り、他セクションと揃える */
.p-recruit-numbers {
  margin-top: 120px;
  padding-top: 80px !important;
}

@media screen and (max-width: 750px) {
  .p-recruit-numbers {
    margin-top: 80px;
    padding-top: 60px !important;
  }
}

.p-recruit-numbers .list {
  gap: 10px;
}

.p-recruit-numbers .list > li {
  padding: 32px;
  border-radius: 5px;
}

/* =============================================
   トップ：採用情報セクション
   ============================================= */
.p-top-recruit {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px 110px;
}

.p-top-recruit .inner {
  display: flex;
  align-items: center;
  gap: 60px;
  background-color: var(--bg-clr3);
  border: 1px solid var(--border-clr);
  border-radius: 5px;
  padding: 60px;
}

.p-top-recruit .img {
  width: 400px;
  min-width: 400px;
  height: 300px;
  overflow: hidden;
  border-radius: 3px;
}

.p-top-recruit .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-recruit .body {
  flex: 1;
  min-width: 0;
}

.p-top-recruit .body .small {
  font-family: var(--font-family-en);
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--main-clr);
  margin-bottom: 8px;
}

.p-top-recruit .body h2 {
  font-size: 3.2rem;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.4;
}

.p-top-recruit .body .description {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

.p-top-recruit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 416px;
  height: 60px;
  background-color: #fff;
  border: 2px solid var(--main-clr);
  border-radius: 30px;
  color: var(--main-clr);
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.p-top-recruit__btn:hover {
  background-color: var(--main-clr);
  color: #fff;
}

.p-top-recruit__btn svg {
  fill: currentColor;
}

@media screen and (max-width: 750px) {
  .p-top-recruit {
    padding: 0 20px 40px;
  }

  .p-top-recruit .inner {
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
  }

  .p-top-recruit .img {
    width: 100%;
    min-width: unset;
    height: 220px;
  }

  .p-top-recruit .body h2 {
    font-size: 2.4rem;
  }

  .p-top-recruit__btn {
    max-width: 100%;
  }
}

/* =============================================
   SP: 福利厚生・数字で見るRRG をワンカラムに
   ============================================= */
@media screen and (max-width: 750px) {
  .p-recruit-welfare .list,
  .p-recruit-numbers .list {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   仕事紹介 / 制度紹介 h3
   ============================================= */
.p-recruit-job .list > li .body h3,
.p-recruit-system .list > li .body h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2rem;
  font-weight: bold;
}

.p-recruit-job .list > li .body h3::before,
.p-recruit-system .list > li .body h3::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background-color: var(--main-clr);
}

/* =============================================
   社員インタビュー
   ============================================= */
.p-recruit-interview .list > li {
  align-items: center;
}

/* =============================================
   福利厚生
   ============================================= */
.p-recruit-welfare .list > li h3 {
  font-size: 1.8rem;
}

/* =============================================
   先輩フロー
   ============================================= */
/* STEP間の青い縦線を非表示 */
.p-recruit-flow .list > li:not(:last-child)::after {
  display: none;
}

/* =============================================
   キャリアパス
   ============================================= */
.p-recruit-career .list {
  gap: 10px;
}

.p-recruit-career .list > li {
  border-radius: 5px;
}

.p-recruit-career .list > li .stage {
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0;
  padding-bottom: 20px;
}

.p-recruit-career .list > li p {
  font-size: 1.6rem;
  line-height: 2;
}

/* 矢印を非表示（Figmaデザインに合わせる） */
.p-recruit-career .list > li:not(:last-child)::after {
  display: none;
}

/* =============================================
   ヘッダーロゴ
   ============================================= */
/* ロゴの横幅を240pxに変更（SPは既存サイズを維持） */
.h-logo {
  width: 240px;
}

@media screen and (max-width: 750px) {
  .h-logo {
    width: 180px;
  }
}

/* フッターロゴも横幅240pxに変更（SPは既存サイズを維持） */
.f-logo {
  width: 240px;
}

@media screen and (max-width: 750px) {
  .f-logo {
    width: 180px;
  }
}

/* =============================================
   トップ お知らせ：右側にFacebook埋め込み
   ============================================= */
.c-nav-post__fb {
  width: 340px;
  min-width: 340px;
  margin-left: 40px;
}

.c-nav-post__fb iframe {
  width: 100%;
  max-width: 340px;
  vertical-align: bottom;
}

@media screen and (max-width: 750px) {
  .c-nav-post__fb {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-top: 32px;
    display: flex;
    justify-content: center;
  }
}

/* トップ お知らせ：日付とタイトルを2行（縦並び）にする */
.c-nav-post .c-card-news {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* =============================================
   c-table1 全体：左列（見出しセル）の幅を狭く一律に
   ============================================= */
/* ※数値を変えれば全テーブルの左列幅をまとめて調整できます */
.c-table1 > * > tr > th:first-child {
  width: 220px;
}

@media screen and (max-width: 750px) {
  /* SPはセルが縦積みになるため幅指定を解除 */
  .c-table1 > * > tr > th:first-child {
    width: auto;
  }
}

/* =============================================
   定量調査「主な調査方法」テーブル（c-table1--method）
   ============================================= */
/* 見出し行（調査方法／特徴）を主色背景＋白文字に */
.c-table1--method > * > tr:first-child > th {
  background-color: var(--main-clr);
  color: #fff;
}

/* 左列を220pxに揃え、残り2列（特徴・強み）は均等 */
.c-table1--method {
  table-layout: fixed;
}

.c-table1--method > * > tr > th:first-child {
  width: 220px;
}

/* =============================================
   トップ ヒーロー：スマホ時に縦長へ
   ============================================= */
/* SPの画像高さ（初期値180px）を広げて縦長に ※数値で高さ調整可 */
@media screen and (max-width: 750px) {
  .c-hero__slider-item img {
    height: 480px;
  }

  /* SPは画像下の白背景にリード文が乗るため、白文字だと見えない → 可読色に */
  .c-hero .c-hero__info .lead {
    color: var(--text-clr);
  }
}

/* =============================================
   企業情報：会社概要テーブル下のプライバシーマーク
   ============================================= */
.p-company-privacymark {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.p-company-privacymark__img {
  flex-shrink: 0;
}

.p-company-privacymark__img img {
  width: 100px;
  height: auto;
}

.p-company-privacymark__text {
  font-size: 1.4rem;
  line-height: 1.9;
}

/* プライバシーポリシーへのリンク：主色＋下線、ホバーで下線を消す */
.p-company-privacymark__text a {
  color: var(--main-clr);
  text-decoration: underline;
}

.p-company-privacymark__text a:hover {
  text-decoration: none;
}

@media screen and (max-width: 750px) {
  .p-company-privacymark {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: left;
  }
}

/* =============================================
   プライバシーポリシー：テーブルのセルを天地センター
   ============================================= */
.p-privacy .c-table1 > * > tr > th,
.p-privacy .c-table1 > * > tr > td {
  vertical-align: middle;
}

/* =============================================
   企業情報 アクセス：Googleマップ埋め込み（画像スロットに表示）
   ============================================= */
.p-company-access .c-company-map {
  height: 300px;
}

.p-company-access .c-company-map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

@media screen and (max-width: 750px) {
  .p-company-access .c-company-map {
    height: 240px;
  }
}

/* =============================================
   比較表（c-table1--compare）：SPでもテーブル維持＋横スクロール
   ============================================= */
.c-table1--compare > * > tr > th,
.c-table1--compare > * > tr > td {
  text-align: left;
  vertical-align: top;
}

/* 左列（項目）を220pxに揃え、残り2列は均等 */
.c-table1--compare {
  table-layout: fixed;
}

.c-table1--compare > * > tr > th:first-child {
  width: 220px;
}

/* SP時の横スクロール化は下部の「SP：全テーブルを横スクロール」で一括対応 */

/* =============================================
   画像キャプション
   ============================================= */
.c-img-caption {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--text-clr);
  margin-top: 10px;
}

/* =============================================
   フッターナビ：PCの列間を詰める
   ============================================= */
/* 元は justify-content:space-between で左右いっぱいに均等配置 →
   右寄せ＋固定gapにして、列間を詰めつつ「お知らせ」を右端に揃え右側の余白を無くす
   （SPは display:block のため影響なし） */
@media screen and (min-width: 751px) {
  .f-nav > ul {
    justify-content: flex-end;
    gap: 40px;
  }
}

/* =============================================
   SP：全テーブルを横スクロール（縦積みを廃止）  sp-table-scroll-block
   ============================================= */
/* 既定テーマはSPで th/td を display:block にして縦積みするため、
   表パターンによってはレイアウトが崩れる。
   → 表を横スクロールコンテナ化し、セルは通常のテーブルセルに戻す。 */
@media screen and (max-width: 750px) {
  .c-table1,
  .c-post table,
  .c-post-main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 行グループ(tbody)をテーブル化。幅は最低100%を確保しつつ、
     セルmin-widthの合計が超えたら親がスクロール
     （当サイトのテーブルはthead分割なしの単一グループのため安全） */
  .c-table1 > *,
  .c-post table > *,
  .c-post-main table > * {
    display: table;
    width: 100%;
  }

  /* 縦積み解除：セルをテーブルセルに戻す */
  .c-table1 > * > tr > th,
  .c-table1 > * > tr > td,
  .c-post table > * > tr > th,
  .c-post table > * > tr > td,
  .c-post-main table > * > tr > th,
  .c-post-main table > * > tr > td {
    display: table-cell;
    padding: 14px 16px;
    border: solid 1px var(--border-clr);
    white-space: normal;
    min-width: 8em;
  }

  .c-table1 > * > tr > th:first-child {
    width: auto;
  }

  .c-table1--method,
  .c-table1--compare {
    table-layout: auto;
  }
}

/* =============================================
   ホーム透過ヘッダー：グロナビ hover/current を白50%に  home-gnav-white50
   （トップレベルのみ。アコーディオン=サブメニュー内(> ul > li > ul)は変更しない）
   ============================================= */
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li > a:where(:any-link, :enabled, summary):hover,
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li.current-page-ancestor > a,
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li.current-menu-item > a,
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li.current_page_item > a,
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li.current > a {
  color: rgba(255, 255, 255, 0.5);
}

/* カレントのドット（●インジケータ）も白50%に揃える */
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li.current-page-ancestor > a::after,
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li.current-menu-item > a::after,
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li.current_page_item > a::after,
html:not(.is-scroll) .home .h-header.hero02-a .h-gNav > ul > li.current > a::after {
  background-color: rgba(255, 255, 255, 0.5);
}

/* =============================================
   feature「私たちの強みと特徴」：POINTと数字の間に半角スペース  feature-point-space
   ============================================= */
.c-list-feature > li h3::before {
  content: "POINT " counter(counter1, decimal-leading-zero);
}