/* =========================================================
   静岡で働きたい方へ（sub.css の後に読む）
   ========================================================= */
:root{--page-hero-img:var(--img-recruit-hero);}

/* ---------- メッセージ ---------- */
.message__inner{display:grid;grid-template-columns:.85fr 1fr;gap:64px;align-items:start;}
.message h2{font-size:26px;font-weight:700;line-height:1.65;color:var(--ink);margin:10px 0 0;}
.message__body p{font-size:14px;line-height:2.1;color:var(--muted);}
.message__body p + p{margin-top:20px;}
.message__body .link-arrow{margin-top:26px;}

/* ---------- 静岡で働く5つのメリット ---------- */
/* 見出しは左右に細い罫を伸ばして、数字だけ大きく見せる */
.merits__head{display:flex;align-items:center;gap:22px;margin-bottom:44px;}
.merits__head::before,.merits__head::after{content:"";flex:1;height:1px;background:var(--line);}
.merits__ttl{display:flex;align-items:baseline;gap:8px;
             font-size:23px;font-weight:700;color:var(--ink);white-space:nowrap;}
.merits__ttl b{font-family:var(--font-en);font-size:44px;font-weight:800;line-height:1;
               letter-spacing:var(--track-num);color:var(--ac-blue);
               transform:scaleX(var(--cond-x));}

/* 3列に見せたいが5枚なので、6分割にして各カードを2つぶん占有させる。
   こうすると下段の2枚を半コマずらして中央に置ける */
.merits{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;}
.merit{grid-column:span 2;}
.merit:nth-child(4){grid-column:2 / span 2;}
.merit:nth-child(5){grid-column:4 / span 2;}

.merit{position:relative;overflow:hidden;padding:30px 28px 28px;background:#fff;
       border:1px solid var(--line);border-radius:var(--r-card);transition:.3s;}
.merit::before{content:"";position:absolute;right:0;bottom:0;width:38%;height:52%;
               background:var(--mr-tint);clip-path:polygon(100% 0,100% 100%,0 100%);
               opacity:.75;transition:opacity .35s;}
.merit:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.merit:hover::before{opacity:1;}
.merit__top{position:relative;display:flex;align-items:center;justify-content:space-between;
            gap:14px;margin-bottom:16px;}
.merit__num{font-family:var(--font-en);font-size:34px;font-weight:800;line-height:1;
            letter-spacing:var(--track-num);color:var(--mr-ink);
            transform:scaleX(var(--cond-x));transform-origin:left center;}
/* アイコンは白地の線画から抜いたアルファのみのPNG。色はここで当てる
   （トップの入口アイコンと同じやり方。1枚のファイルで何色にでもできる）*/
.merit__ic{width:76px;height:54px;flex:none;background:var(--mr-ink);
           -webkit-mask:var(--mr-icon) center/contain no-repeat;
                   mask:var(--mr-icon) center/contain no-repeat;}

/* 5枚の色は、トップの5つの入口 01〜05 と同じ並び */
.merit:nth-child(1){--mr-ink:var(--ac-blue);  --mr-tint:#e4edfa;--mr-icon:var(--mr-01);}
.merit:nth-child(2){--mr-ink:var(--ac-green); --mr-tint:#e9f5ee;--mr-icon:var(--mr-02);}
.merit:nth-child(3){--mr-ink:var(--ac-indigo);--mr-tint:#eaedf9;--mr-icon:var(--mr-03);}
.merit:nth-child(4){--mr-ink:var(--ac-cyan);  --mr-tint:#e9f4f8;--mr-icon:var(--mr-04);}
.merit:nth-child(5){--mr-ink:var(--ac-orange);--mr-tint:#fdeee4;--mr-icon:var(--mr-05);}
.merit h3{position:relative;font-size:16.5px;font-weight:700;line-height:1.55;color:var(--ink);}
.merit p{position:relative;margin-top:12px;font-size:12.5px;line-height:1.95;color:var(--muted);}

/* ---------- 先輩の声 ---------- */
.voices{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.voice{display:grid;grid-template-columns:190px 1fr;overflow:hidden;background:#fff;
       border:1px solid var(--line);border-radius:var(--r-card);transition:.3s;}
.voice:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.voice__photo{background:center/cover no-repeat;min-height:186px;
              clip-path:ellipse(100% 100% at 0 50%);}
.vc-01{background-image:var(--vc-01);} .vc-02{background-image:var(--vc-02);}
.vc-03{background-image:var(--vc-03);} .vc-04{background-image:var(--vc-04);}
.voice__body{padding:26px 26px 26px 22px;}
/* 小さい文字なので、薄い地色に濃い文字を乗せる */
.voice__role{display:inline-block;padding:5px 13px;border-radius:var(--r-pill);
             background:var(--vc-tint);font-size:11.5px;font-weight:700;color:var(--vc-ink);}
.voice:nth-child(1){--vc-tint:#e4edfa;--vc-ink:var(--ac-blue);}  /* 青 */
.voice:nth-child(2){--vc-tint:#e9f5ee;--vc-ink:var(--teal-600);} /* 緑 */
.voice:nth-child(3){--vc-tint:#eaedf9;--vc-ink:#3f57ab;}         /* インディゴ */
.voice:nth-child(4){--vc-tint:#fdeee4;--vc-ink:#c2611f;}         /* オレンジ */
.voice h3{margin-top:14px;font-size:16px;font-weight:700;line-height:1.6;color:var(--ink);}
.voice p{margin-top:10px;font-size:12.5px;line-height:1.95;color:var(--muted);}

@media (max-width:1000px){
  .message__inner{grid-template-columns:1fr;gap:26px;}
  .merits{grid-template-columns:repeat(4,1fr);}
  .merit,.merit:nth-child(4),.merit:nth-child(5){grid-column:span 2;}
  .voices{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .merits__head{gap:14px;}
  .merits__ttl{font-size:19px;}
  .merits__ttl b{font-size:36px;}
  .merits{grid-template-columns:1fr;}
  .merit,.merit:nth-child(4),.merit:nth-child(5){grid-column:auto;}
  /* 無理に縦積みにせず、写真を小さくして横並びのまま渡す */
  .voice{grid-template-columns:104px 1fr;}
  .voice__photo{min-height:0;}
  .voice__body{padding:20px 18px 20px 16px;}
  .voice h3{font-size:15px;}
  .voice p{font-size:12px;}
}

/* ---------- バナー（1枚のとき） ---------- */
/* 横幅をいっぱい使うので、写真の面積を広げて本文を読みやすい幅に収める */
.banners--single{grid-template-columns:1fr;}
.banners--single .banner{grid-template-columns:minmax(0,1fr) 44%;min-height:288px;}
.banners--single .banner__body{max-width:560px;}
/* 狭い画面での見え方は 2枚並びのバナーと共通。
   縦積みになるのも写真に最低高さが付くのも 600px 以下なので、
   こちらも 600px で切る（1000px で切ると写真の行が潰れて見えなくなる）*/
@media (max-width:600px){
  .banners--single .banner{grid-template-columns:1fr;}
  .banners--single .banner__body{max-width:none;}
}