/* =========================================================
   採用案内ページ専用（共通部分は design-base.css 側）
   会社紹介ページと同じデザインの型：
   ヒーロー（白）→ 写真（薄い青緑）→ はたらく環境（白）→ 募集職種（薄い青緑）
   → 先輩社員インタビュー（白）→ オフィス（薄い青緑）→ CTA（薄いグレー）
========================================================= */

/* タイトル帯：h1の開始位置を本文(.wrap)にそろえる（文字サイズは common.css で全ページ共通） */
body:not(.home) main .wrapper-h1 h1{max-width:var(--max);padding-left:var(--pad);padding-right:var(--pad)}

/* ラベル（Culture など）：技術・開発体制と同じ青緑・太字に */
.eyebrow{font-size:14.5px;font-weight:700;letter-spacing:.18em;line-height:20px;color:#17808a}
.eyebrow::before{background:#17808a}
@media(max-width:720px){.eyebrow{font-size:13.5px;letter-spacing:.16em}}

/* セクション見出し：大きめ・濃いめ */
.sec-title{font-size:clamp(24px,3vw,34px);line-height:1.5;color:#1c2b33}

/* セクションの余白・背景色（色で区切るので線は使わない） */
main section{padding:clamp(72px,9vw,120px) 0;border-top:none}
.page-hero,.rec-culture,.rec-interview{background:#fff}
.rec-photos,.rec-positions,.rec-office{background:linear-gradient(120deg,#eef7f8 0%,#eef3fa 100%)}

/* =========================================================
   ヒーロー：ラベル＋大きな見出し＋リード文（会社紹介の About と同じ型）
========================================================= */
.page-hero{padding:clamp(56px,7vw,104px) 0 clamp(56px,6vw,80px);border-bottom:none}
.page-hero .ptag{margin-top:20px;font-family:var(--sans);font-size:clamp(32px,4.4vw,52px);font-weight:700;line-height:1.35;letter-spacing:.02em;color:#1c2b33;word-break:auto-phrase}
.page-hero .plead{margin-top:28px;max-width:720px;font-size:16.5px;line-height:1.95;color:var(--sub)}

/* =========================================================
   写真：大1枚＋小2枚
========================================================= */
.hero-banner img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:8px}
.hero-banner-pair{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-banner-pair img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:8px}
@media(max-width:640px){.hero-banner-pair{grid-template-columns:1fr}}

/* =========================================================
   はたらく環境：左に見出し、右に上が濃い線の一覧（左にラベル・見出し、右に説明）
========================================================= */
.rec-culture .env-grid{margin:0;display:block;border-top:2px solid #1c2b33}
.rec-culture .env-cell,.rec-culture .env-cell:first-child{display:grid;grid-template-columns:220px 1fr;column-gap:32px;padding:24px 0;border-top:none;border-bottom:1px solid #e3eaee}
.rec-culture .env-cell .e-label{grid-column:1;font-size:12.5px;font-weight:700;letter-spacing:.18em;color:#17808a}
.rec-culture .env-cell h3{grid-column:1;margin-top:8px;font-size:17.5px;line-height:1.6;color:#1c2b33}
.rec-culture .env-cell p{grid-column:2;grid-row:1 / span 2;margin-top:0;font-size:15.5px;line-height:1.9;color:var(--sub)}
@media(max-width:640px){
  .rec-culture .env-cell,.rec-culture .env-cell:first-child{grid-template-columns:1fr}
  .rec-culture .env-cell p{grid-column:1;grid-row:auto;margin-top:10px}
}

/* =========================================================
   募集職種：白いカード（要項は会社概要の表と同じく、項目名ティール）
========================================================= */
.job{margin-top:24px;padding:clamp(26px,4vw,40px);border:none;border-radius:8px;background:#fff}
.rec-positions .sec-title + .job{margin-top:40px}
.job h3{font-size:21.5px;color:#1c2b33}
.job .j-en{display:block;margin-bottom:8px;font-size:12.5px;font-weight:700;letter-spacing:.18em;color:#17808a}
.job p{margin-top:16px;font-size:15.5px;line-height:1.9;color:var(--sub)}
.job dl{margin-top:24px;border-top:1px solid #e3eaee}
.job dl div{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid #e3eaee;font-size:15px}
.job dt{font-weight:700;letter-spacing:.06em;color:#17808a}
.job dd{line-height:1.85;color:#1c2b33}
@media(max-width:640px){.job dl div{grid-template-columns:1fr;gap:2px}}

/* 職種カード：写真つきバリエーション */
.job-with-photo{display:grid;grid-template-columns:180px 1fr;gap:32px;align-items:start}
.job-photo{position:relative}
.job-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px}
.job-photo .j-icon{position:absolute;left:-16px;bottom:-16px;width:56px;height:56px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.job-photo .j-icon img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:640px){.job-with-photo{grid-template-columns:1fr}.job-photo{max-width:180px;margin:0 auto}}

/* 募集要項ページへのリンク */
.job-more{margin-top:20px}
.job-more a{font-size:14.5px;font-weight:700;letter-spacing:.04em;color:#17808a;text-decoration:none}
.job-more a::after{content:">";display:inline-block;margin-left:10px;transform:scale(.6,1.2)}

/* =========================================================
   先輩社員インタビュー：左に見出し、右に上が濃い線のQ&A一覧
========================================================= */
.interview{margin:0;border-top:2px solid #1c2b33}
.interview > div{padding:24px 0;border-bottom:1px solid #e3eaee}
.interview dt{font-size:17px;font-weight:700;line-height:1.6;color:#1c2b33}
.interview dt::before{content:"Q. ";color:#17808a}
.interview dd{margin-top:10px;font-size:15.5px;line-height:1.95;color:var(--sub)}
.interview dd::before{content:"A. ";font-weight:700;color:#17808a}

/* =========================================================
   オフィス紹介：写真3列
========================================================= */
.office-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.office-grid figure{margin:0}
.office-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.office-grid figcaption{margin-top:10px;font-size:14.5px;color:var(--sub);text-align:center}
@media(max-width:760px){.office-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   CTA：ボタンはトップの「パートナーシップのご相談」と同じアウトライン型
========================================================= */
.cta-band h2{font-size:clamp(23.5px,3vw,34px)}
.cta-band .btn{position:relative;background:#fff;color:#3786CD !important;border:1px solid #3786CD;border-radius:999px;padding:16px 56px 16px 46px;font-size:16px;transition:background .3s,color .3s}
.cta-band .btn::after{content:'>';position:absolute;top:50%;right:1.4rem;line-height:1;transform:translateY(-50%) scale(.6,1.2)}
.cta-band .btn:hover{background:#3786CD;color:#fff !important}