.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

section{padding:64px 0;}
section.alt{background:var(--white);}
.eyebrow{color:var(--gold-strong); font-weight:700; font-size:13px; letter-spacing:0.08em; margin-bottom:8px;}
h2{font-size:26px; color:var(--navy); margin:0 0 12px;}
.lead{color:var(--text-sub); font-size:15px; max-width:680px;}

.page-hero{
  position:relative; color:#fff; overflow:hidden;
  background:
  linear-gradient(105deg, rgba(15,32,25,0.86) 0%, rgba(15,32,25,0.55) 60%, rgba(15,32,25,0.2) 100%),
  url("../assets/recruit.webp") center/cover no-repeat,
  linear-gradient(135deg,#163a2e,#24483c);
}
.page-hero .wrap{position:relative; z-index:2; padding:80px 24px 64px;}
.page-hero .eyebrow{color:var(--gold);}
.page-hero h1{font-size:34px; margin:8px 0 14px; max-width:640px; line-height:1.4;}
.page-hero p{color:#e4e6e0; font-size:15px; max-width:600px; margin:0 0 24px;}
.page-hero .btn-primary{background:var(--gold-strong); color:#fff; padding:14px 28px; font-size:14px;}
.crumb{font-size:12px; color:#c9cdc2; margin-bottom:12px;}
.crumb a{color:#c9cdc2;}

/* 求める人 */
.want-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px;}
.want-card{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:24px; text-align:center;}
.want-card .ico{width:48px; height:48px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; margin:0 auto 14px;}
.want-card h3{font-size:15px; color:var(--navy); margin:0 0 8px;}
.want-card p{font-size:13px; color:var(--text-sub); margin:0;}

/* 仕事内容 */
.work-list{display:flex; flex-direction:column; gap:14px; margin-top:28px;}
.work-item{display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:18px 20px;}
.work-item .chk{width:24px; height:24px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:13px; margin-top:2px;}
.work-item h3{font-size:14px; color:var(--navy); margin:0 0 4px;}
.work-item p{font-size:13px; color:var(--text-sub); margin:0;}

/* 募集要項 */
.req-wrap{margin-top:28px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--white);}
table.req{width:100%; border-collapse:collapse; font-size:13px;}
table.req th{background:var(--navy); color:#fff; text-align:left; padding:14px 18px; font-weight:500; width:200px; vertical-align:top;}
table.req td{padding:14px 18px; border-top:1px solid var(--border); color:var(--text-sub);}
table.req tr:first-child th, table.req tr:first-child td{border-top:none;}
.tbd{color:#a32d2d; font-weight:700;}

/* 流れ */
.flow-row{display:flex; gap:0; margin-top:32px;}
.flow-step{flex:1; text-align:center; position:relative; padding:0 12px;}
.flow-step:not(:last-child)::after{content:"→"; position:absolute; top:16px; right:-6px; color:var(--border); font-size:14px;}
.flow-num{width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin:0 auto 10px;}
.flow-step h3{font-size:13px; margin:0 0 6px; color:var(--navy);}
.flow-step p{font-size:12px; color:var(--text-sub); margin:0;}

.final-cta{background:var(--navy); color:#fff; text-align:center; padding:56px 0;}
.final-cta h2{color:#fff;}
.final-cta p{color:#c7c9c0; margin:0 0 24px;}
.final-cta .btn-primary{background:var(--gold-strong); color:#fff; padding:14px 32px; font-size:14px;}

@media(max-width:860px){

  .page-hero h1{font-size:26px;}
  .want-grid{grid-template-columns:1fr;}
  table.req th{width:120px;}
  .flow-row{flex-direction:column; gap:16px;}
  .flow-step:not(:last-child)::after{display:none;}

}


/* =========================================================
   レスポンシブ（下層ページ共通）
   ※ common.css より後に読み込まれるので、ここで上書きする
   ========================================================= */
@media(max-width:1024px){
  section{padding:44px 0;}
  .page-hero .wrap{padding-top:52px; padding-bottom:40px;}
  .page-hero h1{font-size:27px;}
}
@media(max-width:600px){
  .page-hero .wrap{padding-left:16px; padding-right:16px; padding-top:36px; padding-bottom:28px;}
  .page-hero h1{font-size:22px; line-height:1.45;}
  .page-hero p{font-size:14px;}
  .crumb{font-size:11px; margin-bottom:10px;}
  section{padding:34px 0;}
  h2{font-size:19px;}
  .final-cta{padding:40px 0;}
  .final-cta .btn-primary{padding:13px 22px;}
}

@media(max-width:600px){
  .page-hero h1{font-size:21px;}
  .work-item{gap:12px;}
  /* 募集要項の表は縦積みにして読みやすくする */
  table.req, table.req tbody, table.req tr, table.req th, table.req td{display:block; width:auto;}
  table.req th{padding:12px 14px 4px; border-bottom:none;}
  table.req td{padding:0 14px 14px;}
}