@charset "utf-8";

#recruit {
  --recruit-bg: #2d323a;
  --recruit-blue: #4381b2;
  --recruit-blue-muted: #557a9a;
  --recruit-paper: #f4f4f2;
  margin: 0;
  background: var(--recruit-bg);
  color: #fff;
}

#recruit .recruit-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 0 4vw;
  background: #f1f1ef;
}

.recruit-logo { display: flex; align-items: center; color: #0c3154; font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 800; }
.recruit-logo img { width: 42px; margin-right: 10px; }
#recruit .recruit-header nav { width: min(62%, 760px); padding: 0; background: transparent; }
#recruit .recruit-header nav ul { display: flex; justify-content: space-between; }
#recruit .recruit-header nav li { width: auto; }
#recruit .recruit-header nav a { padding: 1rem; color: #0c3154; font-size: .76rem; font-weight: 800; }
#recruit .recruit-header nav a:hover { background: transparent; color: var(--recruit-blue); }

#recruit main { background: var(--recruit-bg); }
#recruit section { margin: 0; }
.recruit-hero { min-height: 290px; background: linear-gradient(90deg, var(--recruit-blue) 0 50%, #4c88b8 50% 100%); }
.recruit-hero__title { display: flex; flex-direction: column; justify-content: center; width: min(49%, 625px); min-height: 290px; padding: 3rem clamp(2rem, 8vw, 7.5rem); background: var(--recruit-blue-muted); }
.recruit-hero__title h1 { font: 800 clamp(2.8rem, 5vw, 4.6rem)/1 var(--font-heading); letter-spacing: -.03em; }
.recruit-hero__title p { margin-top: 1.5rem; font-weight: 700; }

.recruit-content { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 140px 0 120px; }
.recruit-intro { display: flex; justify-content: flex-end; margin-bottom: 110px !important; }
.recruit-intro > div { width: min(620px, 70%); }
#recruit .recruit-intro h2 { padding: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.45; text-transform: none; }
.recruit-intro p { margin-top: 2.5rem; font-size: .92rem; line-height: 1.9; }
.recruit-section { margin-top: 110px !important; }
.recruit-heading { margin-bottom: 58px; }
.recruit-heading > p { font: 800 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--font-heading); }
#recruit .recruit-heading h2 { padding: .65rem 0 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; text-transform: none; }

.position-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 6vw, 80px); padding: 0 3%; }
.position-grid article { min-height: 235px; padding: 28px 20px; background: #dedede; }
.position-grid h3, .position-grid p { color: #fff; }
.position-grid h3 { min-height: 62px; font: 700 1rem/1.45 var(--font-body); }
.position-grid p { margin-top: 1rem; font-size: .78rem; line-height: 1.65; }

.recruit-copy { max-width: 920px; }
.recruit-copy > h3 { margin-bottom: 1.8rem; font: 700 1.1rem/1.6 var(--font-body); }
.recruit-copy > p { margin-top: 1.6rem; font-size: .88rem; line-height: 1.8; }
.environment-list { font-size: 1rem; line-height: 1.75; }
.environment-list li + li { margin-top: .15rem; }

.requirements-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 80px; }
.job-card h3 { margin: 0 0 1.8rem 20%; font: 700 1.15rem/1.5 var(--font-body); }
.job-card dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 18px; margin-top: 1rem; }
.job-card dt, .job-card dd { color: #fff; font-size: .78rem; line-height: 1.7; }
.job-card dt { font-weight: 700; }
.job-card--common { grid-column: 2; }

#recruit .recruit-footer { margin: 0; padding: 70px 7vw 20px; background: var(--recruit-paper); color: var(--recruit-bg); }
.recruit-footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1120px; margin: auto; }
.recruit-footer__company { color: var(--recruit-bg); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; }
.recruit-footer__marks { display: flex; gap: 12px; margin: 70px 0 0 40px; }
.recruit-footer__marks span { width: 72px; height: 72px; background: #ddd; }
#recruit .recruit-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#recruit .recruit-footer nav a { padding: 10px 16px; border-radius: 6px; background: var(--recruit-blue); color: #fff; font-size: .74rem; font-weight: 700; }
.recruit-footer__copyright { padding-top: 50px !important; color: var(--recruit-bg); }

@media (max-width: 767px) {
  #recruit .recruit-header { min-height: 68px; padding: 0 20px; }
  .recruit-logo img { width: 34px; }
  #recruit .recruit-header nav { width: auto; }
  #recruit .recruit-header nav li:not(:last-child) { display: none; }
  #recruit .recruit-header nav a { padding: .75rem 0; }
  .recruit-hero, .recruit-hero__title { min-height: 230px; }
  .recruit-hero__title { width: 86%; padding: 2.5rem 24px; }
  .recruit-content { width: min(100% - 40px, 620px); padding: 90px 0; }
  .recruit-intro { justify-content: flex-start; margin-bottom: 80px !important; }
  .recruit-intro > div { width: 100%; }
  .recruit-section { margin-top: 85px !important; }
  .recruit-heading { margin-bottom: 38px; }
  .position-grid, .requirements-grid { grid-template-columns: 1fr; padding: 0; gap: 22px; }
  .position-grid article { min-height: 0; }
  .job-card--common { grid-column: auto; }
  .job-card h3 { margin-left: 0; }
  .job-card dl > div { grid-template-columns: 82px 1fr; gap: 12px; }
  .recruit-footer__inner { grid-template-columns: 1fr; gap: 50px; }
  .recruit-footer__marks { margin: 35px 0 0; }
  .recruit-footer__marks span { width: 52px; height: 52px; }
}