/* =============================================================
 * 採用サイト 下層ページ（v1.38.0）
 * -------------------------------------------------------------
 * ・rc-nav  … HERO の下のページ切り替え
 * ・rg-list … 採用トップの「目次」カード
 * ・ivc-list… 社員インタビューの一覧カード
 * 配色は既存のトークンのみ。
 * ============================================================= */

/* ---- ページ切り替え ---- */
.pm-mock .rc-nav{
  border-bottom:1px solid var(--line,#e6ecf2);
  background:#fff; position:relative; z-index:2;
}
.pm-mock .rc-nav ul{
  display:flex; flex-wrap:wrap; gap:2px 0;
  list-style:none; margin:0; padding:0;
}
.pm-mock .rc-nav a{
  display:block; padding:14px 18px;
  color:var(--sub,#5a6a7a); font-size:15px; font-weight:700;
  text-decoration:none; border-bottom:2px solid transparent;
}
.pm-mock .rc-nav a:hover{ color:var(--sky,#1c93d2); }
.pm-mock .rc-nav a[aria-current="page"]{
  color:var(--navy,#1a2332); border-bottom-color:var(--sky,#1c93d2);
}

/* ---- 採用トップの目次カード ---- */
.pm-mock .rg-list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:26px 0 0;
}
.pm-mock .rg-card{
  display:block; padding:24px 22px 20px; background:#fff;
  border:1px solid var(--line,#e6ecf2); border-radius:6px;
  color:inherit; text-decoration:none;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.pm-mock .rg-card:hover{
  border-color:var(--sky,#1c93d2); transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(15,30,55,.08);
}
.pm-mock .rg-en{
  display:block; margin:0 0 8px;
  font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; color:var(--sky,#1c93d2);
}
.pm-mock .rg-card h3{ margin:0 0 8px; font-size:19px; font-weight:700; line-height:1.5; }
.pm-mock .rg-card p{ margin:0; font-size:14.5px; line-height:1.8; color:var(--sub,#5a6a7a); }
.pm-mock .rg-more{
  display:block; margin:14px 0 0; font-size:14px; font-weight:700; color:var(--sky-dark,#14719f);
}
.pm-mock .rg-link{ margin:24px 0 0; text-align:right; font-size:15px; font-weight:700; }
.pm-mock .rg-link a{ color:var(--sky-dark,#14719f); text-decoration:none; }
.pm-mock .rg-link a:hover{ text-decoration:underline; }

/* ---- インタビュー一覧（v1.40.1：2列カード → 1列の横並びに変更）----
 * 旧：写真＋氏名＋所属＋前職を左の縦列に積み、右は見出しとリンクだけ。
 *     左右で高さが揃わず、右下に大きな余白ができていた。
 * 新：1行1名。写真・見出し＋メタ情報・導線を横一列に並べて余白をなくす。
 */
.pm-mock .ivc-list{
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:26px 0 0;
}
.pm-mock .ivc{
  display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:0 24px;
  align-items:center;
  padding:18px 24px; background:#fff; border:1px solid var(--line,#e6ecf2); border-radius:6px;
  color:inherit; text-decoration:none;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.pm-mock .ivc:hover{
  border-color:var(--sky,#1c93d2); transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(15,30,55,.08);
}
/* hub.css の .hub-voices .iv-photo（148px 丸）を一覧用に縮める。
   詳細度で勝つために .hub-voices .hub-body から書く */
.pm-mock .hub-voices .hub-body .ivc .iv-photo{ width:88px; height:88px; margin:0; }
.pm-mock .hub-voices .hub-body .ivc .iv-photo--none span{ font-size:30px; }
.pm-mock .ivc-body{ min-width:0; }
.pm-mock .ivc-body h3{
  margin:0; font-size:18px; font-weight:700; line-height:1.6; color:var(--navy,#1B224C);
}
.pm-mock .ivc-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px;
  margin:8px 0 0; font-size:13px; line-height:1.7; color:var(--faint,#98A5B8);
}
.pm-mock .ivc-meta .ivc-nm{ font-size:14.5px; font-weight:900; color:var(--navy,#1B224C); }
.pm-mock .ivc-meta .ivc-rl{ font-weight:700; color:var(--sky,#1C93D2); }
.pm-mock .ivc-more{
  display:block; margin:0; font-size:14px; font-weight:700; white-space:nowrap;
  color:var(--sky-dark,#14719f);
}

/* =============================================================
 * スマホ
 * ============================================================= */
@media (max-width:900px){
  .pm-mock .rg-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .pm-mock .rc-nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pm-mock .rc-nav ul{ flex-wrap:nowrap; }
  .pm-mock .rc-nav a{ padding:12px 14px; font-size:14px; white-space:nowrap; }

  .pm-mock .rg-list{ grid-template-columns:minmax(0,1fr); gap:10px; margin:18px 0 0; }
  .pm-mock .rg-card{ padding:16px 16px 14px; }
  .pm-mock .rg-card h3{ font-size:17px !important; }
  .pm-mock .rg-card p{ font-size:14px; line-height:1.75; }
  .pm-mock .rg-more,
  .pm-mock .ivc-more{ font-size:13.5px; }
  .pm-mock .rg-link{ text-align:left; }

  .pm-mock .ivc{ grid-template-columns:60px minmax(0,1fr); gap:0 14px; padding:14px 16px; }
  .pm-mock .hub-voices .hub-body .ivc .iv-photo{ width:60px; height:60px; }
  .pm-mock .hub-voices .hub-body .ivc .iv-photo--none span{ font-size:22px; }
  .pm-mock .ivc-body h3{ font-size:15.5px !important; line-height:1.6; }
  .pm-mock .ivc-meta{ gap:0 10px; margin-top:6px; font-size:11.5px; }
  .pm-mock .ivc-meta .ivc-nm{ font-size:12.5px; }
  .pm-mock .ivc-more{ grid-column:2; margin-top:8px; text-align:right; }
}

/* ------------------------------------------------------------------
   代表写真（背景切り抜き版）— v1.40.0
   hub.css の .rep-avatar は背景ネイビー＋1:1 の cover 前提だったが、
   切り抜き画像は淡いトーンを焼き込んだ正方形なので、枠だけを整える。
------------------------------------------------------------------ */
.pm-mock .hub-mv .hub-body .rep-avatar{
  background:#EEF3F8;
  border:1px solid var(--line,#E2E8F1);
}
.pm-mock .hub-mv .hub-body .rep-avatar img{
  object-position:50% 50%;
}
@media (min-width:1101px){
  /* 写真をもらったので、PCでは少し大きく見せる */
  .pm-mock .hub-mv .hub-body .rep-message-head{
    grid-template-columns:186px minmax(0,1fr);
  }
}

/* =============================================================
 * 職種ごとの募集要項（v1.67.0）
 * -------------------------------------------------------------
 * /recruit/requirements/ の「募集職種」カードの下に、
 * 職種ごとの仕事内容・要件・条件を並べる。
 * 共通の勤務条件は最後に1枚だけ置く。
 * 配色は既存のトークンのみ。
 * ============================================================= */
.pm-mock .jobdet-list{ display:grid; gap:16px; margin:26px 0 0; }

.pm-mock .jobdet{
  padding:26px 28px 22px;
  background:#fff; border:1px solid var(--line,#e6ecf2); border-radius:6px;
}
.pm-mock .jobdet-head{ margin:0 0 14px; }
.pm-mock .jobdet-head .job-tag{
  display:inline-block; margin:0 0 10px; padding:4px 12px;
  background:var(--sky-pale,#EAF4FB); color:var(--sky,#1C93D2);
  font-size:13px; font-weight:900; line-height:1.7;
}
/* 「経験者優遇」のバッジ（hub.css / review-tune.css と同じ配色） */
.pm-mock .jobdet-head .job-tag.orange{ background:#FDF1DF; color:#9A6310; }
.pm-mock .jobdet-head h3{
  margin:0; font-size:21px; font-weight:900; line-height:1.45;
  color:var(--navy,#1B224C);
}
.pm-mock .jobdet-kind{
  margin:6px 0 0; font-size:13px; line-height:1.7; color:var(--faint,#98A5B8);
}
.pm-mock .jobdet-lead{
  margin:0 0 18px; font-size:15px; line-height:1.95; color:var(--ink,#1a2332);
}

/* 主な業務 ／ 要件 の2段組み */
.pm-mock .jobdet-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 32px; margin:0 0 18px;
}
.pm-mock .jobdet-col h4{
  margin:0 0 8px; font-size:14px; font-weight:900; letter-spacing:.02em;
  color:var(--sky-dark,#14719f);
}
.pm-mock .jobdet-col h4 + ul + h4{ margin-top:16px; }
.pm-mock .jobdet-col ul{
  margin:0; padding:0 0 0 1.1em; list-style:disc;
}
.pm-mock .jobdet-col li{
  margin:0 0 5px; font-size:14px; line-height:1.85; color:var(--sub,#5a6a7a);
}

/* 年収・就業時間などの行 */
.pm-mock .jobdet-meta{
  margin:0; padding:16px 0 0; border-top:1px solid var(--line,#e6ecf2);
  display:grid; gap:8px;
}
.pm-mock .jobdet-meta > div{
  display:grid; grid-template-columns:110px minmax(0,1fr); gap:0 16px; align-items:baseline;
}
.pm-mock .jobdet-meta dt{
  margin:0; font-size:13px; font-weight:900; color:var(--navy,#1B224C);
}
.pm-mock .jobdet-meta dd{
  margin:0; font-size:14px; line-height:1.85; color:var(--sub,#5a6a7a);
}

/* 共通の勤務条件 */
.pm-mock .jobdet--common{ background:var(--tint,#f5f9fc); }
.pm-mock .jobdet--common h3{
  margin:0 0 14px; font-size:18px; font-weight:900; color:var(--navy,#1B224C);
}
.pm-mock .jobdet--common .jobdet-meta{ border-top:0; padding-top:0; }
.pm-mock .jobdet--common .jobdet-meta > div{ grid-template-columns:130px minmax(0,1fr); }

@media (max-width:760px){
  .pm-mock .jobdet{ padding:18px 18px 16px; }
  .pm-mock .jobdet-head h3{ font-size:18px !important; }
  .pm-mock .jobdet-lead{ font-size:14.5px; line-height:1.9; }
  .pm-mock .jobdet-cols{ grid-template-columns:minmax(0,1fr); gap:16px 0; }
  .pm-mock .jobdet-meta > div,
  .pm-mock .jobdet--common .jobdet-meta > div{ grid-template-columns:minmax(0,1fr); gap:2px 0; }
  .pm-mock .jobdet-meta dt{ font-size:12.5px; }
}

/* -------------------------------------------------------------
 * 求める人物像：2枚のカードの開始位置を揃える（v1.67.1）
 * hub.css の .biz-features は margin-top:auto で箇条書きを
 * カードの下端に寄せている（事業ページでは説明文の長さが
 * まちまちなので、そちらでは意図どおり）。
 * ここは見出しのすぐ下に並べたいので、#ideal だけ解除する。
 * ----------------------------------------------------------- */
.pm-mock #ideal .biz-card .biz-features{ margin-top:0 !important; }

/* =========================================================================
   採用トップのバナー（2026-09-22）
   旧サイトで出していた3枚を、そのまま縦に並べる。
   画像の縦横比がそれぞれ違うので、横に並べず中央に積む。
   ========================================================================= */
.pm-mock .rc-bn-list{
  display:flex; flex-direction:column; align-items:center;
  gap:22px; margin-top:26px;
}
.pm-mock .rc-bn{
  display:block; width:100%; max-width:760px;
  border-radius:12px; overflow:hidden;
  box-shadow:0 4px 16px rgba(27,34,76,.10);
  transition:transform .2s, box-shadow .2s;
}
.pm-mock .rc-bn:hover{
  transform:translateY(-3px); box-shadow:0 10px 24px rgba(27,34,76,.18);
}
.pm-mock .rc-bn img{
  display:block; width:100%; height:auto;
}
@media (max-width:760px){
  .pm-mock .rc-bn-list{ gap:16px; margin-top:20px; }
  .pm-mock .rc-bn{ border-radius:10px; }
}


/* ---- 募集職種の下に出す告知バナー（v2.55.0）----
   正規の募集職種とは別枠であることが分かるよう、カードではなく
   淡い地の帯にして、中にリンクを2つ並べる。 */
.pm-mock .rbanner{
  margin-top:26px; padding:22px 26px;
  background:var( --paper, #F4F7FB );
  border:1px solid var( --line, #E2E8F1 );
  border-radius:8px;
}
.pm-mock .rbanner__lead{
  margin:0 0 14px !important;
  font-size:16px; font-weight:700; line-height:1.6;
  color:var( --navy, #0F3E64 );
}
.pm-mock .rbanner__list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  margin:0; padding:0; list-style:none;
}
.pm-mock .rbanner__list > li{ margin:0; padding:0; list-style:none; }
.pm-mock .rbanner a{
  display:block; height:100%;
  background:#fff; border:1px solid var( --line, #E2E8F1 ); border-radius:6px;
  padding:16px 18px; text-decoration:none;
  transition:border-color .2s, transform .2s;
}
.pm-mock .rbanner a:hover{ border-color:var( --sky, #1B74B2 ); transform:translateY(-2px); }
.pm-mock .rbanner .rbanner__g{
  display:block; font-size:12px; letter-spacing:.04em;
  color:var( --sub, #5C6B80 );
}
.pm-mock .rbanner .rbanner__b{
  display:flex; align-items:center; gap:6px; margin-top:3px;
  font-size:15.5px; font-weight:700; color:var( --navy, #0F3E64 );
}
.pm-mock .rbanner .rbanner__b::after{ content:"→"; font-size:13px; color:var( --sky, #1B74B2 ); }
@media ( max-width:760px ){
  .pm-mock .rbanner{ padding:18px 18px; }
  .pm-mock .rbanner__list{ grid-template-columns:minmax(0,1fr); }
}

/* =============================================================
 * v1.88.0  文字サイズの統一（typography.css の8段階に寄せる）
 * -------------------------------------------------------------
 * 見出し 28 / 22・リード 21・本文 18・ボックス内 16・注記/タグ 14。
 * 0.5px 刻みと 14px 未満をなくすための上書き。自動で役割を判定して
 * 生成しているので、元の指定は書き換えていない。
 * 見た目がおかしい箇所は、このブロックの該当行を消せば元に戻る。
 * ヘッダー・ナビ・ボタン・数値の強調・ヒーローは対象外。
 * ============================================================= */

.pm-mock .rg-en{font-size:14px}
.pm-mock .rg-card h3{font-size:22px}
.pm-mock .rg-card p{font-size:16px}
.pm-mock .rg-link{font-size:16px}
.pm-mock .ivc-meta{font-size:14px}
.pm-mock .ivc-meta .ivc-nm{font-size:16px}
.pm-mock .jobdet-head .job-tag{font-size:14px}
.pm-mock .jobdet-head h3{font-size:22px}
.pm-mock .jobdet-kind{font-size:14px}
.pm-mock .jobdet-lead{font-size:21px}
.pm-mock .jobdet-col h4{font-size:18px}
.pm-mock .jobdet-col li{font-size:16px}
.pm-mock .jobdet-meta dt{font-size:18px}
.pm-mock .jobdet-meta dd{font-size:18px}
.pm-mock .rbanner__lead{font-size:21px}
.pm-mock .rbanner .rbanner__g{font-size:14px}
.pm-mock .rbanner .rbanner__b{font-size:16px}
.pm-mock .rbanner .rbanner__b::after{font-size:14px}

@media (max-width:900px){
  .pm-mock .rg-en{font-size:13px}
  .pm-mock .rg-card h3{font-size:19px}
  .pm-mock .rg-card p{font-size:14.5px}
  .pm-mock .rg-link{font-size:14.5px}
  .pm-mock .ivc-meta{font-size:13px}
  .pm-mock .ivc-meta .ivc-nm{font-size:14.5px}
  .pm-mock .jobdet-head .job-tag{font-size:13px}
  .pm-mock .jobdet-head h3{font-size:19px}
  .pm-mock .jobdet-kind{font-size:13px}
  .pm-mock .jobdet-lead{font-size:17px}
  .pm-mock .jobdet-col h4{font-size:16px}
  .pm-mock .jobdet-col li{font-size:14.5px}
  .pm-mock .jobdet-meta dt{font-size:16px}
  .pm-mock .jobdet-meta dd{font-size:16px}
  .pm-mock .rbanner__lead{font-size:17px}
  .pm-mock .rbanner .rbanner__g{font-size:13px}
  .pm-mock .rbanner .rbanner__b{font-size:14.5px}
  .pm-mock .rbanner .rbanner__b::after{font-size:13px}
}

@media (max-width:760px){
  .pm-mock .jobdet-head h3{font-size:16px !important}
  .pm-mock .jobdet-lead{font-size:16px}
  .pm-mock .jobdet-meta dt{font-size:16px}
}

@media (max-width:640px){
  .pm-mock .rg-card h3{font-size:16px !important}
  .pm-mock .rg-card p{font-size:14.5px}
  .pm-mock .rg-more{font-size:14.5px}
  .pm-mock .ivc-more{font-size:14.5px}
  .pm-mock .ivc-body h3{font-size:16px !important}
  .pm-mock .ivc-meta{font-size:13px}
  .pm-mock .ivc-meta .ivc-nm{font-size:13px}
}