@charset "utf-8";
/* css/careers.css — 採用情報ページ */


/* ══════════════════════════════════════
   MESSAGE — 代表メッセージ
══════════════════════════════════════ */
.cr-message {
  padding: 100px 80px;
  background: var(--black);
  border-bottom: 1px solid var(--border);
}

.cr-message-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.cr-message-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 16px 0 32px;
}
.cr-message-title .red { color: var(--red); }

.cr-message-body {
  font-size: 14px;
  color: var(--muted2);
  line-height: 2.3;
  margin-bottom: 20px;
}
.cr-message-body:last-of-type { margin-bottom: 0; }

.cr-message-sign {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.cr-sign-role {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cr-sign-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ── ビジュアル ── */
.cr-message-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cr-message-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.cr-message-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) contrast(1.05);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.cr-message-img-wrap:hover .cr-message-img { transform: scale(1.04); }

.cr-message-img-deco {
  position: absolute;
  bottom: -10px; right: -10px;
  width: 50%; height: 50%;
  border: 1px solid rgba(200,16,46,0.35);
  pointer-events: none;
}

/* キャッチ数値 */
.cr-message-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.cr-msg-num-item {
  background: var(--surface);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cr-msg-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.05em;
}
.cr-msg-num span {
  color: var(--red);
  margin-left: 4px;
}
.cr-msg-num-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  line-height: 1.5;
}


/* ══════════════════════════════════════
   POINTS — 働く理由
══════════════════════════════════════ */
.cr-points {
  padding: 100px 80px;
  background: var(--off-black);
  border-bottom: 1px solid var(--border);
}

.cr-points-inner { max-width: 1200px; margin: 0 auto; }

.cr-points-header { margin-bottom: 56px; }

.cr-points-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}

.cr-point-card {
  background: var(--black);
  padding: 40px 28px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.cr-point-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.cr-point-card:hover { background: var(--surface); }
.cr-point-card:hover::before { transform: scaleX(1); }

.cr-point-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--red);
  margin-bottom: 20px;
}
.cr-point-icon {
  width: 40px; height: 40px;
  margin-bottom: 20px;
  display: block;
}
.cr-point-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.cr-point-desc {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.9;
}


/* ══════════════════════════════════════
   FLOW — 入社の流れ
══════════════════════════════════════ */
.cr-flow {
  padding: 100px 80px;
  background: var(--black);
  border-bottom: 1px solid var(--border);
}

.cr-flow-inner { max-width: 1200px; margin: 0 auto; }

.cr-flow-header { margin-bottom: 56px; }

.cr-flow-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.cr-flow-step {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  transition: border-color 0.25s, background 0.25s;
}
.cr-flow-step:hover {
  background: var(--surface2);
  border-color: var(--border-red);
}

.cr-flow-step-num {
  position: absolute;
  top: -1px; left: -1px;
  background: var(--red);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
}

.cr-flow-step-body {
  padding: 48px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.cr-flow-step-icon {
  width: 40px; height: 40px;
  border: 1px solid var(--border-red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 16px;
  margin-bottom: 4px;
}

.cr-flow-step-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.cr-flow-step-desc {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.9;
}

.cr-flow-arrow {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: rgba(200,16,46,0.4);
  font-size: 14px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════
   JOB — 募集要項
══════════════════════════════════════ */
.cr-job {
  padding: 100px 80px;
  background: var(--off-black);
  border-bottom: 1px solid var(--border);
}

.cr-job-inner { max-width: 1200px; margin: 0 auto; }

.cr-job-header { margin-bottom: 56px; }

.cr-job-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}

.cr-job-label {
  padding: 28px 36px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
}

.cr-job-badge {
  background: var(--red);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 5px 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cr-job-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

/* テーブル */
.cr-job-table {
  width: 100%;
  border-collapse: collapse;
}

.cr-job-table th,
.cr-job-table td {
  padding: 20px 36px;
  font-size: 13px;
  line-height: 1.9;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

.cr-job-table tr:last-child th,
.cr-job-table tr:last-child td {
  border-bottom: none;
}

.cr-job-table th {
  width: 160px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--red);
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
  background: rgba(200,16,46,0.04);
}

.cr-job-table td { color: var(--muted2); }

/* 注記 */
.cr-job-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 36px;
  border-top: 1px solid var(--border);
  background: rgba(200,16,46,0.04);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.cr-job-note .fa-circle-info {
  color: var(--red);
  margin-top: 2px;
  flex-shrink: 0;
}
.cr-job-note p { margin: 0; }


/* ══════════════════════════════════════
   CTA BLOCK — エントリー
══════════════════════════════════════ */
.cr-cta-block {
  background: var(--off-black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px;
}

.cr-cta-block-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.cr-cta-catch {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.cr-cta-catch .red { color: var(--red); }

.cr-cta-sub {
  font-size: 13px;
  color: var(--muted2);
  line-height: 2;
  margin-bottom: 28px;
}

.cr-cta-contacts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.cr-cta-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 14px 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.25s, background 0.25s;
}
.cr-cta-contact-item:hover {
  border-color: var(--border-red);
  background: var(--surface2);
}
.cr-cta-contact-item .fa-phone,
.cr-cta-contact-item .fa-envelope {
  color: var(--red);
  font-size: 18px;
  width: 20px;
  text-align: center;
}
.cr-cta-contact-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cr-cta-contact-val {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

.cr-cta-btn {
  white-space: nowrap;
  padding: 18px 40px;
  font-size: 13px;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}


/* ══════════════════════════════════════
   RESPONSIVE — SP (max-width: 767px)
══════════════════════════════════════ */
@media (max-width: 767px) {

  /* MESSAGE */
  .cr-message { padding: 60px 20px; }
  .cr-message-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cr-message-title { font-size: clamp(34px, 9vw, 56px); }
  .cr-message-img-deco { display: none; }
  .cr-message-nums { grid-template-columns: 1fr 1fr; }
  .cr-msg-num { font-size: 22px; }

  /* POINTS */
  .cr-points { padding: 60px 20px; }
  .cr-points-grid {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .cr-point-card { padding: 32px 24px; }
  .cr-point-card::before { transform: scaleX(1); }

  /* FLOW */
  .cr-flow { padding: 60px 20px; }
  .cr-flow-steps {
    flex-direction: column;
    gap: 2px;
  }
  .cr-flow-step { flex: none; }
  .cr-flow-arrow {
    padding: 8px 0;
    justify-content: center;
    transform: rotate(90deg);
  }
  .cr-flow-step-body { padding: 40px 20px 24px; }

  /* JOB */
  .cr-job { padding: 60px 20px; }
  .cr-job-label {
    padding: 20px 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cr-job-table th,
  .cr-job-table td { padding: 14px 20px; font-size: 12px; }
  .cr-job-table th {
    display: block;
    width: 100%;
    border-bottom: none;
    padding-bottom: 4px;
  }
  .cr-job-table td { display: block; padding-top: 4px; }
  .cr-job-table tr { display: block; border-bottom: 1px solid var(--border); }
  .cr-job-table tr:last-child { border-bottom: none; }
  .cr-job-note { padding: 16px 20px; }

  /* CTA BLOCK */
  .cr-cta-block { padding: 60px 20px; }
  .cr-cta-block-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .cr-cta-catch { font-size: clamp(30px, 9vw, 44px); }
  .cr-cta-contacts { flex-direction: column; gap: 10px; }
  .cr-cta-contact-item { width: 100%; }
  .cr-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }

}


/* ══════════════════════════════════════
   TABLET (768px ～ 1024px)
══════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

  .cr-message { padding: 80px 32px; }
  .cr-message-inner { grid-template-columns: 1fr; gap: 48px; }

  .cr-points { padding: 80px 32px; }
  .cr-points-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-point-card::before { transform: scaleX(1); }

  .cr-flow { padding: 80px 32px; }
  .cr-flow-steps { flex-direction: column; gap: 2px; }
  .cr-flow-step { flex: none; }
  .cr-flow-arrow {
    padding: 8px 0;
    justify-content: center;
    transform: rotate(90deg);
  }

  .cr-job { padding: 80px 32px; }
  .cr-job-table th { width: 140px; }

  .cr-cta-block { padding: 60px 32px; }
  .cr-cta-block-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .cr-cta-btn { align-self: flex-start; }

}