@charset "UTF-8";

/* ============================================
   採用情報（RECRUIT）ページ専用スタイル
   - 共通パーツは style.css、hero土台は about.css(.page-hero) を継承
   - 数値は Figma(基準幅1920px) を rem / vw / clamp で流体化
============================================ */

.rec-inner {
  width: 76.92vw;
  max-width: 1477px;
  margin: 0 auto;
  /* padding: 0 var(--side-padding-pc); */
}

/* ============================================
   Hero
============================================ */
.page-hero__overlay--dark {
  background: rgba(0, 0, 0, 0.4);
  mix-blend-mode: normal;
}

.rec-hero__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
}

.rec-hero__catch {
  margin: min(1.2vw, 24px) 0 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: min(4.3rem, 2.24vw);
  letter-spacing: 0.2em;
  color: var(--color-white);
  line-height: 1.3;
  text-align: center;
}

.rec-hero__ja {
  margin: min(2.6vw, 50px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.4rem, 1.25vw);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}

/* ============================================
   見出し（JAタイトル＋下線）
============================================ */
.rec-title {
  text-align: center;
  margin-bottom: min(4.7vw, 90px);
}

.rec-title__text {
  display: inline-block;
  position: relative;
  margin: 0;
  padding-bottom: min(1.6vw, 32px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3.2rem, 1.66vw);
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: #000;
}

.rec-title__text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background-color: currentColor;
}

/* 見出し（EN + JA、中央） */
.rec-head {
  text-align: center;
  margin-bottom: min(4.7vw, 90px);
}

.rec-head__en {
  position: relative;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(3.8rem, 2vw);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #000;
  line-height: 1.3;
}
.rec-head__en::before,
.rec-head__en::after {
  content: "";
  position: absolute;
  top: 0.15em;
  width: 11px;
  height: 1em;
  background-color: rgba(255, 227, 156, 0.69);
}
.merit--team .rec-head__en::before,
.merit--team .rec-head__en::after {
  background-color: rgba(255, 191, 156, 0.69);
}
.rec-head__en::before {
  margin-left: -1.65em;
}
.rec-head__en::after {
  margin-left: 1.15em;
}

.rec-head__ja {
  margin: min(0.5vw, 10px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.7rem, 1.4vw);
  letter-spacing: 0.2em;
  color: #000;
  line-height: 1.4;
}

.rec-head--light .rec-head__en,
.rec-head--light .rec-head__ja {
  color: var(--color-white);
}

/* インタビュー見出しの赤い下線（EN と JA の間） */
.interview .rec-head__en::before {
  display: none;
}
.interview .rec-head__en::after {
  content: "";
  display: block;
  position: relative;
  top: 0;
  width: 2.1em;
  height: 2px;
  margin: min(1.61vw, 31px) auto 0;
  background-color: #9c2929;
}
.interview .rec-head__ja {
  margin-top: min(1.61vw, 31px);
  font-size: min(2rem, 1.04vw);
}

/* ============================================
   イントロ（事業紹介・白背景／下線なし見出し）
============================================ */
.rec-intro {
  background-color: #fff;
  padding: min(6.7vw, 128px) 0;
}

.rec-intro__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3.2rem, 1.66vw);
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: #000;
}

.rec-intro__text {
  /* max-width: 1010px; */
  margin: min(2.5vw, 50px) auto 0;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.15em;
  line-height: 2.1;
  color: #000;
}

/* ============================================
   丸山ステンレス工業の仕事（4職種カード）
============================================ */
.rec-jobs {
  background-color: var(--color-base);
  padding: min(6.7vw, 128px) 0 0;
  color: var(--color-white);
}

.rec-jobs .rec-inner {
  padding: 0;
}

.rec-jobs .rec-title {
  margin-bottom: min(2vw, 36px);
}

.rec-jobs .rec-title__text {
  color: var(--color-white);
}

.rec-jobs__intro {
  max-width: 1100px;
  margin: 0 auto min(4.2vw, 80px);
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--color-white);
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.job-card a {
  position: relative;
  display: block;
  overflow: hidden;
}

.job-card__img {
  width: 100%;
  aspect-ratio: 480 / 360;
  background-color: #1a1a1a;
}

.job-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.job-card a:hover .job-card__img img {
  transform: scale(1.05);
}

.job-card__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.4rem, 1.25vw);
  letter-spacing: 0.2em;
  color: var(--color-white);
  text-align: center;
}

/* ============================================
   会社/仕事/仲間の魅力
============================================ */
.merit {
  background-color: rgba(85, 79, 58, 0.29);
  padding: min(6.7vw, 128px) 0;
  color: #000;
}

/* 仕事の魅力（中間トーン・白文字） */
.merit--alt {
  background-color: rgba(85, 79, 58, 0.62);
  color: var(--color-white);
}

/* 仲間の魅力（濃トーン・白文字） */
.merit--team {
  background-color: rgba(25, 21, 15, 0.69);
  color: var(--color-white);
}

.merit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(4.7vw, 90px) min(4vw, 78px);
}

.merit-card__img {
  width: 100%;
  aspect-ratio: 700 / 525;
  overflow: hidden;
  background-color: #e0ded6;
}

.merit-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merit-card__head {
  display: flex;
  align-items: stretch;
  gap: min(1vw, 20px);
  margin: min(2vw, 40px) 0 min(1vw, 20px);
}

.merit-card__bar {
  width: clamp(8px, 0.57vw, 11px);
  height: auto;
  flex: none;
  background-color: rgba(255, 227, 156, 0.69);
}
.merit--team .merit-card__bar {
  background-color: rgba(255, 191, 156, 0.69);
}

.merit-card__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.7rem, 1.4vw);
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: inherit;
}

.merit-card__text {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.8rem, 0.94vw);
  letter-spacing: 0.1em;
  line-height: 2;
  color: inherit;
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;/* 両端揃えの種類 */
}

/* ============================================
   インタビュー（暗背景）
============================================ */
.interview {
  background-color: var(--color-base);
  color: var(--color-white);
  padding: min(6.7vw, 128px) 0;
  overflow: hidden;
}

.interview-inner {
  width: 83.75vw;
  max-width: 1608px;
  margin: 0 auto;
}

/* 社員インタビュー（明るい背景・黒文字） */
.interview--light {
  background-color: #ebebeb;
  color: #000;
}

.interview--light .iv-role {
  color: #000;
}

.interview--light .iv-years {
  color: #000;
}

.interview--light .iv-qa__q,
.interview--light .iv-col__title {
  color: #000;
}

.interview--light .iv-qa__a,
.interview--light .iv-col__text {
  color: rgba(0, 0, 0, 0.85);
}



/* -----------------------------------
  上部用：2カラムグリッド（社長インタビューと同じ）
----------------------------------- */
.iv-grid-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: min(4.9vw, 95px) min(6.35vw, 122px);
  margin: 0 auto; /* 上部のmarginは適宜調整してください */
}

/* -----------------------------------
  下部用：3カラムグリッド
----------------------------------- */
.iv-grid-3col {
  display: grid;
  /* 1frを3つ並べて3カラムにする */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 3カラムの場合は左右の隙間(gap)が少し狭くなることが多いので、Figmaに合わせて調整してください */
  gap: min(4.9vw, 95px) min(3vw, 50px);
  margin: min(4vw, 80px) auto 0;
}


.iv-photo {
  width: 50vw;
  max-width: none;
  justify-self: end;
  margin-right: calc(min(6.35vw, 122px) / -2);

  aspect-ratio: 961 / 541;
  overflow: hidden;
}

.iv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.iv-role {
  margin: 0 0 min(5.2vw, 100px);
  padding-bottom: min(0.8vw, 16px);
  border-bottom: 2px solid #9c2929;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3rem, 1.56vw);
  letter-spacing: 0.15em;
  line-height: 1.4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.iv-years {
  margin-left: 1.2em;
  font-size: min(2rem, 1.04vw);
  color: rgba(255, 255, 255, 0.7);
}

.iv-qa__q {
  margin: 0 0 min(1.2vw, 24px);
  padding-bottom: min(0.8vw, 16px);
  border-bottom: 2px solid #9c2929;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3rem, 1.56vw);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.iv-intro .iv-qa__q {
  border-bottom: none;
}

.iv-qa__a {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: min(1.8rem, 0.93vw);
  letter-spacing: 0.08em;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;/* 両端揃えの種類 */
}

.iv-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(3vw, 56px);
  margin-top: min(4vw, 80px);
}

.iv-col__title {
  margin: 0 0 min(1vw, 20px);
  padding-bottom: min(0.8vw, 16px);
  border-bottom: 2px solid #9c2929;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.2rem, 1.15vw);
  letter-spacing: 0.1em;
}

.iv-col__text {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: min(1.6rem, 0.83vw);
  letter-spacing: 0.08em;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;/* 両端揃えの種類 */
}

/* ----- 1日のスケジュール ----- */
.schedule {
  display: flex;
  gap: min(4vw, 70px);
  align-items: flex-start;
  margin-top: min(5vw, 96px);
  padding: min(2.08vw, 40px) min(3.38vw, 65px) min(2.96vw, 57px);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.6);
}

.schedule__left {
  flex: 0 0 clamp(180px, 22.8vw, 437px);
}

.schedule__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: min(1.3vw, 25px);
}

.schedule__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(3rem, 1.56vw);
  letter-spacing: 0.2em;
  line-height: 1;
  color: #000;
}

.schedule__ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.8rem, 0.94vw);
  letter-spacing: 0.2em;
  color: #000;
  line-height: 1;
  margin-bottom: 0.2em;
  color: #000;
}


.schedule__right {
  flex: 1 1 0;
}

.schedule__body {
  display: flex;
  gap: min(4vw, 70px);
  align-items: flex-start;
}

.schedule__photo {
  aspect-ratio: 437 / 328;
  overflow: hidden;
}

.schedule__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule__list {
  /* flex: 1 1 0; */
  position: relative;
  margin: 0 auto;
}

.schedule__list::before {
  content: "";
  position: absolute;
  left: 4.4em;
  top: 0.5em;
  bottom: 0.5em;
  width: 0.2em;
  font-size: min(1.8rem, 0.94vw);
  background-image: linear-gradient(to bottom, #9C2929 50%, transparent 50%);
  background-size: 2px 6px; /* 線の太さ 破線の間隔 */
  background-repeat: repeat-y; /* 縦方向に繰り返す */
}

.schedule__list li {
  position: relative;
  display: flex;
  gap: 2.5em;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.8rem, 0.94vw);
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: #000;
}
.schedule__list li + li {
  margin: min(3.12vw, 60px) 0 0;
}

.schedule__list li::before {
  content: "";
  position: absolute;
  left: 4.12em;
  top: 0.5em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  font-size: min(1.8rem, 0.94vw);
  background-color: #9C2929;
}

.schedule__time {
  flex: none;
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  width: 4em;
}

/* ============================================
   募集要項テーブル
============================================ */
.rec-recruit {
  background-color: #fff;
  padding: min(6.7vw, 128px) 0;
}

.recruit-inner {
  width: 64.58vw;
  max-width: 1240px;
  margin: 0 auto;
}

.recruit-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.1em;
}

.recruit-table th,
.recruit-table td {
  border: 1px solid #9ea0ad;
  padding: min(1.2vw, 24px) min(1.8vw, 35px);
  vertical-align: top;
  line-height: 1.8;
}

.recruit-table th {
  width: 18%;
  background-color: var(--color-base);
  color: var(--color-white);
  text-align: center;
  font-weight: 500;
  vertical-align: top;
}

.recruit-table td {
  background-color: #fff;
  color: #000;
  text-align: left;
}

.recruit-table__list {
  list-style: disc;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.recruit-table__list li {
  list-style: disc;
}

.rec-recruit__note {
  margin: 0 auto min(7.08vw, 136px);
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: min(1.6rem, 0.83vw);
  letter-spacing: 0.05em;
  line-height: 1.9;
  color: #000;
}

/* ============================================
   CONTACT リード文
============================================ */
.rec-contact-lead {
  margin: 0;
  padding: min(5vw, 96px) var(--side-padding-pc) 0;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.4rem, 1.25vw);
  letter-spacing: 0.1em;
  line-height: 2;
  color: #000;
}

/* ============================================
   SP（375px基準）
============================================ */
@media print, screen and (max-width: 768px) {
  .page-hero {
    height: 67.4svh;
    min-height: 450px;
  }

  .rec-inner {
    width: 100%;
    padding: 0 var(--side-padding-sp);
  }

  .rec-hero__en {
    font-size: 4vw;
  }

  .rec-hero__catch {
    margin-top: 3.7vw;
    font-size: 5.6vw;
  }

  .rec-hero__ja {
    margin-top: 6.4vw;
    font-size: 4.2vw;
  }

  .rec-title {
    margin-bottom: 10.6vw;
  }

  .rec-title__text {
    padding-bottom: 4.8vw;
    font-size: 5.3vw;
  }

  .rec-head {
    margin-bottom: 10.6vw;
  }

  .rec-head__ja {
    margin-top: 6px;
    font-size: 4.5vw;
  }

  .interview .rec-head__en::after {
    margin: 3.2vw auto 0;
  }

  .interview .rec-head__ja {
    font-size: 3.2vw; /* 12 */
    margin-top: 3.2vw;
  }

  .rec-intro__title {
    font-size: 5vw;
  }

  .rec-intro__text {
    margin-top: 6.4vw;
    font-size: 3.7vw;
    line-height: 2;
    text-align: left;
  }

  .rec-head__en {
    font-size: 5.4vw;
  }
  .rec-head__en {
    padding: 0 1em;
  }
  .rec-head__en::before,
  .rec-head__en::after {
    width: 2.7vw
  }
  .rec-head__en::before {
    left: 0;
    margin-left: 0;
  }
  .rec-head__en::after {
    right: 0;
    margin-right: 0;
  }

  .rec-intro,
  .interview,
  .rec-recruit {
    padding: 16vw var(--side-padding-sp);
  }

  .rec-jobs {
    padding: 16vw 0 0;
  }

  .rec-jobs .rec-title {
    margin-bottom: 6.4vw;
  }

  .rec-jobs__intro {
    margin-bottom: 10.6vw;
    font-size: 3.7vw;
    text-align: left;
    padding: 0 var(--side-padding-sp);
  }

  .job-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .job-card__label {
    font-size: 3.7vw;
  }

  .job-card__label {
    padding: 5vw;
  }

  .merit-grid {
    grid-template-columns: 1fr;
    gap: 10.6vw 8vw;
  }

  .merit-card__head {
    gap: 12px;
    margin: 5.3vw 0 3.2vw;
  }
  .merit-card__bar {
    width: 2vw;
  }

  .merit-card__title {
    font-size: 4.5vw;
  }

  .merit-card__text {
    font-size: 3.4667vw;
  }

  .iv-grid-2col,
  .iv-grid-3col {
    display: block;
  }

  .iv-photo {
    width: 100%;
    margin-right: 0;
  }

  .iv-role,
  .iv-qa__q,
  .iv-col__title {
    font-size: 4vw;
    margin: 4.8vw 0 2.6vw;
    padding-bottom: 1.6vw;
  }
  .iv-role {
    font-size: 4.8vw;
  }
  .iv-role--large {
    flex-direction: column;
    align-items: flex-start;
  }
  .iv-years {
    font-size: 3.2vw;
    align-self: flex-end;
  }

  .schedule {
    display: block;
    margin-top: 13.3vw;
    padding: 5.3vw 5.3vw 8vw;
  }

  .schedule__head {
    margin-bottom: 4.2vw;
  }
  .schedule__en {
    font-size: 4.8vw;
  }
  .schedule__ja {
    font-size: 3.2vw;
  }

  .schedule__right {
    margin-top: 8vw; /* 30 */

  }
  .schedule__body {
    position: relative;
    flex-direction: column;
    gap: 8vw;
    width: 100%;
    margin:auto;
  }
  .schedule__body::before {
    background-image: linear-gradient(to bottom, #9C2929 50%, transparent 50%);
    content: "";
    position: absolute;
    left: 5em;
    top: 0.5em;
    bottom: 0.5em;
    width: 0.2em;
    font-size: 4.2vw;
    background-size: 2px 6px;
    background-repeat: repeat-y;
  }

  .schedule__list {
    width: 100%;
  }
  .schedule__list::before {
    display: none;
  }
  .schedule__list li::before {
    font-size: 4.2vw;
    left: 5em;
  }
  .schedule__list li::before {
    left: 4.75em;
  }
  .schedule__list li {
    font-size: 4.2vw;
    gap: 15.46vw
  }

  .schedule__list li + li {
    margin-top: 8vw;
  }

  .schedule__photo {
    flex-basis: auto;
    width: 100%;
  }

  .iv-qa__a,
  .iv-col__text {
    font-size: 3.2vw;
  }

  .recruit-inner {
    width: 100%;
  }
  .rec-recruit__note {
    font-size: 3.2vw;
    margin-bottom: 6.4vw;
  }

  /* 募集要項テーブル：縦積み */
  .recruit-table,
  .recruit-table tbody,
  .recruit-table tr,
  .recruit-table th,
  .recruit-table td {
    display: block;
    width: 100%;
  }

  .recruit-table tr {
    margin-bottom: 4vw;
    border: 1px solid #9ea0ad;
  }

  .recruit-table th,
  .recruit-table td {
    border: 0;
    font-size: 3.7vw;
    padding: 3.2vw var(--side-padding-sp);
  }

  .recruit-table td {
    border-top: 1px solid #9ea0ad;
  }

  .rec-contact-lead {
    padding: 13.3vw var(--side-padding-sp) 0;
    font-size: 4vw;
  }
}