/**
 * recruit.css — XiADEN 採用ページCSS
 * 対象テンプレート: page-recruit.php
 */

/* Recruit Hero */
.s-rec-hero { background:var(--n); min-height:440px; position:relative; overflow:hidden; }
.rec-hero-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--sp48);
  min-height:440px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--sp48);
  position:relative; z-index:2;
}
.rec-hero-content { padding:var(--sp64) 0; }
.rec-hero-eyebrow { display:block; font-size:var(--f-xs); font-weight:700; letter-spacing:.18em; color:rgba(255,255,255,.56); margin-bottom:var(--sp12); }
.rec-hero-h1 { font-size:clamp(24px,3.5vw,38px); font-weight:900; color:var(--w); line-height:1.3; margin-bottom:var(--sp16); }
.rec-hero-desc { font-size:var(--f-body); color:rgba(255,255,255,.72); line-height:1.85; margin-bottom:var(--sp32); }
.rec-hero-btns { display:flex; gap:var(--sp12); flex-wrap:wrap; }
.rec-hero-btns .btn-outline { border-color:rgba(255,255,255,.36); color:rgba(255,255,255,.85); }
.rec-hero-btns .btn-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); color:var(--w); }
.rec-hero-visual { position:relative; height:300px; border-radius:var(--r4); overflow:hidden; }
.rec-hero-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.rec-hero-visual-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(29,58,90,.2) 0%,transparent 60%); }

/* Work Points */
.s-work-points { background:var(--bs); border-top:1px solid var(--div); }
.work-points-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp20); }
.work-point-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r3);
  padding:var(--sp32) var(--sp28); display:flex; flex-direction:column; gap:var(--sp12);
  transition:box-shadow .2s, transform .18s;
}
.work-point-card:hover { box-shadow:var(--s2); transform:translateY(-2px); }
.work-point-icon {
  width:48px; height:48px; background:var(--b); border:1px solid var(--bm);
  border-radius:var(--r2); display:flex; align-items:center; justify-content:center; color:var(--n);
}
.work-point-title { font-size:15px; font-weight:700; color:var(--n); line-height:1.4; }
.work-point-desc  { font-size:var(--f-sm); color:var(--txm); line-height:1.72; }

/* Jobs */
.s-jobs { background:var(--w); border-top:1px solid var(--div); }
.jobs-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp32); }
.job-card { background:var(--bs); border:1px solid var(--bm); border-radius:var(--r3); overflow:hidden; }
.job-card-header {
  background:var(--n); padding:var(--sp32) var(--sp40);
  display:flex; flex-direction:column; gap:var(--sp8);
}
.job-badge {
  display:inline-block; font-size:10px; font-weight:700; padding:3px 12px;
  border-radius:var(--rf); align-self:flex-start;
}
.job-badge--primary { background:var(--or); color:var(--w); }
.job-badge--secondary { background:rgba(255,255,255,.15); color:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.3); }
.job-card-title    { font-size:clamp(17px,2vw,22px); font-weight:900; color:var(--w); }
.job-card-subtitle { font-size:13px; color:rgba(255,255,255,.72); }
.job-card-body { padding:var(--sp32) var(--sp40); }
.job-table { width:100%; border-collapse:collapse; font-size:var(--f-sm); }
.job-table th, .job-table td { padding:10px 0; border-bottom:1px solid var(--div); vertical-align:top; line-height:1.72; }
.job-table th { font-weight:700; color:var(--n); white-space:nowrap; padding-right:var(--sp24); width:100px; }
.job-table td { color:var(--txm); }
.job-table tr:last-child th,
.job-table tr:last-child td { border-bottom:none; }
.job-note { font-size:11px; color:var(--txl); }

/* Fit */
.s-fit { background:var(--bs); border-top:1px solid var(--div); }
.fit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp16); }
.fit-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  padding:var(--sp24); display:flex; align-items:flex-start; gap:var(--sp12);
  transition:box-shadow .18s;
}
.fit-card:hover { box-shadow:var(--s2); }
.fit-icon { font-size:24px; flex-shrink:0; }
.fit-txt  { font-size:14px; color:var(--txm); line-height:1.65; }

/* Day Timeline */
.s-day { background:var(--w); border-top:1px solid var(--div); }
.day-timeline { display:flex; flex-direction:column; gap:0; max-width:680px; margin:0 auto; }
.day-item { display:flex; align-items:flex-start; gap:var(--sp20); padding:var(--sp20) 0; border-bottom:1px solid var(--div); }
.day-item:last-child { border-bottom:none; }
.day-time {
  font-size:14px; font-weight:700; color:var(--or); letter-spacing:.04em;
  flex-shrink:0; width:52px;
}
.day-title { font-size:15px; font-weight:700; color:var(--n); margin-bottom:var(--sp4); }
.day-desc  { font-size:var(--f-sm); color:var(--txm); line-height:1.72; }

/* Recruit Flow */
.s-rec-flow { background:var(--bs); border-top:1px solid var(--div); }
.rec-flow-list { display:flex; flex-direction:column; gap:0; max-width:680px; margin:0 auto; }
.rec-flow-item { display:flex; align-items:flex-start; gap:var(--sp20); padding:var(--sp24) 0; border-bottom:1px solid var(--div); }
.rec-flow-item:last-child { border-bottom:none; }
.rec-flow-num  { font-size:24px; font-weight:900; color:var(--or); line-height:1; flex-shrink:0; width:44px; }
.rec-flow-title { font-size:16px; font-weight:700; color:var(--n); margin-bottom:var(--sp8); }
.rec-flow-desc  { font-size:var(--f-sm); color:var(--txm); line-height:1.72; }

/* Recruit Form */
.s-rec-form { background:var(--w); border-top:1px solid var(--div); }

/* Responsive */
@media (max-width:1024px) {
  .work-points-grid { grid-template-columns:repeat(2,1fr); }
  .fit-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .rec-hero-inner   { grid-template-columns:1fr; padding:0 20px; }
  .rec-hero-visual  { height:200px; }
  .work-points-grid { grid-template-columns:1fr 1fr; }
  .jobs-grid        { grid-template-columns:1fr; }
  .job-card-header  { padding:var(--sp24) 20px; }
  .job-card-body    { padding:var(--sp24) 20px; }
  .fit-grid         { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .work-points-grid { grid-template-columns:1fr; }
}