@charset "UTF-8";

/* =========================================================
   Recruit page styles
   - 変数
   - Hero
   - About
   - Business
   - Work
   - Benefits
   - Positions
   - Company
   - Entry
   ※ 文字化けしたコメントは削除し再記述
   ========================================================= */

/* ---------------------------------
   変数（カラー）
--------------------------------- */
:root {
  --brand: #006e35;
  /* ブランドグリーン */
  --ink: #012814;
  /* 文章色（濃い緑） */
}

/* =================================
   01) Recruit Hero
================================= */

/* 背景エリア：ヘッダー高を考慮しつつ、カバー表示 */
.recruit-hero-section .recruit-hero__bg {
  background-repeat: no-repeat;
  background-position: 46%;
  background-size: cover;
  height: 55vh;
  padding-top: var(--header-height);
  position: relative;
  /* 絶対配置の基点 */
  overflow: hidden;
  width: 100%;
}

@media (min-width: 768px) {
  .recruit-hero-section .recruit-hero__bg {
    height: 80vh;
  }
}

/* 右下見出し（RECRUITをボトムに接地） */
.recruit-hero__headline {
  position: absolute;
  right: clamp(12px, 1vw, 40px);
  bottom: 0;
  /* 接地 */
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* iOSセーフエリア配慮 */
  text-align: right;
  color: #fff;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .5);
}

/* 見出し1行目（JP） */
.recruit-hero__headline-jp {
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(1.8rem, 1.1rem + 1.8vw, 3.6rem);
  color: #fff;
}

/* 見出し2行目（EN） */
.recruit-hero__headline-en {
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(3.0rem, 1.6rem + 4vw, 6.4rem);
  margin-top: .2em;
  margin-bottom: 0;
  /* 下端接地のため余白0 */
}

/* 下段コンテンツ背景 */
.recruit-hero__content {
  background-color: #006e35;
}

/* リード文ラッパー：影や位置調整なし、上下パディングのみ */
.recruit-hero__wrapper {
  background: transparent;
  box-shadow: none;
  position: static;
  top: auto;
  color: #fff;
  padding: clamp(1.4rem, 3rem + 3vw, 7rem) 0 clamp(2.4rem, 3rem + 3vw, 9rem) 0;
}

/* リード文（最後の行は太め・大きめ） */
.recruit-hero__lead {
  color: #fff;
  line-height: 2.4;
  margin: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 0.1em;
  font-size: clamp(0.8rem, 1.2rem + 0.4vw, 2.6rem);
}

.recruit-hero__lead strong {
  font-weight: 900;
  font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.2rem);
}

/* =================================
   02) About（会社紹介）
================================= */

.recruit-about-section {
  background: #fff;
  padding: clamp(3rem, 2rem + 7vw, 23rem) 0;
}

/* 見出し */
.recruit-about__heading h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  color: #012814;
  margin: 0;
  padding: 2rem 0 3rem;
  line-height: 1.2;
  font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3.2rem);
  position: relative;
}

.recruit-about__heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 5px;
  background-color: var(--brand);
}

/* “ABOUT US”リード（緑・大見出し風） */
.recruit-about__lead {
  color: var(--brand);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
  font-size: clamp(2.0rem, 1.2rem + 2.2vw, 3.4rem);
}

/* このセクション内の span は親サイズを継承 */
.recruit-about-section span {
  font-size: inherit;
  line-height: inherit;
}

/* 強調（緑） */
.recruit-about__hl {
  color: var(--brand);
  font-weight: 800;
  font-size: inherit;
}

/* 見出しと本文の間隔を広めに */
.recruit-about__inner {
  /* padding: clamp(2rem, 1rem + 2vw, 4rem) 0 1.5rem; */
  padding: clamp(1.4rem, 3rem + 3vw, 7rem) 0;
}

/* 本文（中央寄せ） */
.recruit-about__textwrap {
  text-align: center;
}

.recruit-about__text {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: #012814;
  margin: 0;
  line-height: 1.9;
  font-size: clamp(1.5rem, 1.2rem + 0.4vw, 1.7rem);
}

/* 画像 */
.recruit-about__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* =================================
   03) Business（事業内容）
================================= */

.recruit-business-section {
  position: relative;
  padding: clamp(3rem, 2rem + 7vw, 23rem) 0;
  background: url("/wp-content/themes/sc-retail/assets/img/bg_recruit_business.png") center/cover no-repeat;
  background-position: 35% 50%;
}

/* 右上 “SERVICE” の装飾テキスト */
.recruit-business-section::after {
  content: "SERVICE";
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  top: clamp(12px, 2.5vw, 36px);
  color: #fff;
  text-transform: uppercase;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  font-size: clamp(2.4rem, 1.2rem + 3.2vw, 5.0rem);
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* 見出し */
.recruit-business__heading h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  color: #012814;
  margin: 0;
  padding: 2rem 0 3rem;
  line-height: 1.2;
  font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3.2rem);
  position: relative;
}

.recruit-business__heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 5px;
  background-color: var(--brand);
}

/* 内側余白（上側やや広め） */
.recruit-business__inner {
  padding: clamp(1.5rem, 1rem + 1vw, 2.5rem) 0 0;
}

/* グリッド（番号付きカード） */
.recruit-business__grid {
  list-style: none;
  margin: 0;
  padding: clamp(1.4rem, 3rem + 3vw, 7rem) 0;
  counter-reset: biz;
}

/* アイテム（列幅はBootstrapのcolに依存） */
.recruit-business__item {
  display: block;
  margin-block: clamp(8px, 1.2vw, 20px);
}

/* カード（白80%・番号は疑似要素で） */
.recruit-business__card {
  counter-increment: biz;
  display: flex;
  align-items: center;
  gap: .6em;
  background: rgba(255, 255, 255, .8);
  padding: clamp(1.2rem, .8rem + .8vw, 1.8rem);
  border-radius: .5rem;
  color: #012814;
  line-height: 1.85;
  font-size: clamp(1.2rem, 1.2rem + .4vw, 2.4rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  margin-inline: clamp(6px, 1.2vw, 16px);
  /* 横方向の間隔 */
  margin-block: 4px;
  /* 縦方向の間隔（微） */
}

/* 「01 |」表記（本文の約2倍） */
.recruit-business__card::before {
  content: counter(biz, decimal-leading-zero) " |";
  flex: 0 0 auto;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--brand);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 4.4rem);
  line-height: 1;
}

/* =================================
   04) Work（仕事紹介）
================================= */

.recruit-work-section {
  position: relative;
  padding: clamp(3rem, 2rem + 2vw, 6rem) 0;
  padding-bottom: clamp(120px, 12vw, 220px);
  background-color: #fff;
  background-image: url(/wp-content/themes/sc-retail/assets/img/bg_recruit_work.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  counter-reset: work;
}

/* セクション見出し（右端に “WORKS”） */
.recruit-work__heading {
  --heading-pad-top: 2rem;
  /* 上余白(右端テキスト位置合わせ用) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.2rem, .8rem + 1vw, 2rem);
  padding: var(--heading-pad-top) 0 3rem;
  position: relative;
}

.recruit-work__heading h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  color: #012814;
  margin: 0;
  line-height: 1.2;
  font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3.2rem);
  flex: 1 1 auto;
}

.recruit-work__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 5px;
  background-color: var(--brand);
}

.recruit-work__eyebrow {
  flex: 0 0 auto;
  color: var(--brand);
  text-transform: uppercase;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}

/* 2カラム（Bootstrapのcol制御） */
.recruit-work__grid {
  margin-top: clamp(.5rem, .3rem + .8vw, 1.2rem);
}

/* 各ブロック（カード） */
.recruit-work__block {
  background: #dcfbd7;
  border-radius: .6rem;
  padding: clamp(1.4rem, 1rem + 1vw, 2.2rem);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(.6rem, .4rem + .6vw, 1.2rem);
  /* 見出し/本文/画像の間隔 */
}

.recruit-work__block.is-schedule {
  background: #eaeeeb;
}

/* サブ見出し（中央揃え） */
.recruit-work__subheading {
  position: relative;
  text-align: center;
  margin-bottom: .2rem;
}

.recruit-work__subheading h3 {
  margin: 0;
  color: var(--brand);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  line-height: 1.25;
  font-size: clamp(1.8rem, 1.2rem + .8vw, 2.4rem);
}

/* 括弧内は改行（スマホ見やすさ配慮） */
.recruit-work__note {
  display: block;
  font-weight: 800;
}

/* 連番 “WORK.01 / ”（スケジュール以外） */
.recruit-work__block:not(.is-schedule) {
  counter-increment: work;
}

.recruit-work__block:not(.is-schedule) .recruit-work__subheading::before {
  content: "WORK." counter(work, decimal-leading-zero) " / ";
  position: absolute;
  left: clamp(0px, 2vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(0.8rem, 0.8rem + .8vw, 2.2rem);
}

/* 本文リスト */
.recruit-work__inner {
  margin-top: .2rem;
}

.recruit-work__list {
  margin: 0;
  padding-left: 1.4em;
  font-size: clamp(1.5rem, 1.2rem + .4vw, 1.7rem);
  line-height: 1.9;
  color: #012814;
}

ul.recruit-work__list li {
  font-size: clamp(1.0rem, 1.0rem + .4vw, 2.4rem);
}

.recruit-work__list li+li {
  margin-top: .2em;
}

.recruit-work__list li::marker {
  color: var(--brand);
}

/* スケジュール（ドット無し・色変更） */
.recruit-work__list.is-schedule {
  list-style: none;
  padding-left: 0;
  color: #4d4e4d;
}

/* 画像（本文の後に挿入） */
.recruit-work__image {
  padding: clamp(8px, 3.2vw, 44px);
  box-sizing: border-box;
}

.recruit-work__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* =================================
   05) Benefits（福利厚生・待遇）
================================= */

.recruit-benefits-section {
  --heading-pad-top: 2rem;
  /* WORKSと揃えるための上余白 */
  background: #dcfbd7;
  padding: clamp(3rem, 2rem + 7vw, 23rem) 0;
}

/* 見出し（左H2／右BENEFITS） */
.recruit-benefits__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.2rem, .8rem + 1vw, 2rem);
}

.recruit-benefits__heading h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  color: #012814;
  margin: 0;
  padding: var(--heading-pad-top) 0 3rem;
  line-height: 1.2;
  font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3.2rem);
  position: relative;
  flex: 1 1 auto;
}

.recruit-benefits__heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 5px;
  background-color: var(--brand);
}

.recruit-benefits__eyebrow {
  flex: 0 0 auto;
  color: var(--brand);
  text-transform: uppercase;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  margin-top: var(--heading-pad-top);
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}

/* 内側余白 */
.recruit-benefits__inner {
  padding: clamp(1.4rem, 3rem + 3vw, 7rem) 0;
}

/* グリッド（Bootstrap col：SP=2, PC=3） */
.recruit-benefits__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード（白背景・中央寄せ） */
.recruit-benefits__card {
  background: #fff;
  border-radius: .6rem;
  padding: clamp(1.2rem, .8rem + 1vw, 2rem);
  height: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(.6rem, .4rem + .6vw, 1.2rem);
}

/* 画像 */
.recruit-benefits__img {
  padding: 3rem clamp(8px, 7.2vw, 54px);
  box-sizing: border-box;
  max-width: clamp(8px, 10rem + 7.2vw, 100rem);
}

.recruit-benefits__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* アイテム上下の間隔（列間はg-*で制御） */
.recruit-benefits__item {
  margin-block: clamp(6px, 1.2vw, 12px);
}

/* =================================
   06) Positions（募集要項）
================================= */

.recruit-positions-section {
  --heading-pad-top: 2rem;
  padding: clamp(3rem, 2rem + 2vw, 6rem) 0;
  background: #fff;
}

/* 見出し（左H2／右RECRUIT） */
.recruit-positions__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.2rem, .8rem + 1vw, 2rem);
}

.recruit-positions__heading h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  color: #012814;
  margin: 0;
  padding: var(--heading-pad-top) 0 3rem;
  line-height: 1.2;
  font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3.2rem);
  position: relative;
  flex: 1 1 auto;
}

.recruit-positions__heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 5px;
  background: var(--brand);
}

.recruit-positions__eyebrow {
  flex: 0 0 auto;
  color: var(--brand);
  text-transform: uppercase;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1;
  margin-top: var(--heading-pad-top);
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}

/* 各職種カード */
.recruit-positions__block {
  background: #fff;
  border-radius: .6rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  margin: clamp(1.4rem, 3rem + 3vw, 7rem) 0;
  overflow: hidden;
  /* 角丸に沿って中身をクリップ */
  /* padding: clamp(1.4rem, 3rem + 3vw, 7rem) 0; */
}

/* DL テーブル */
.recruit-positions__dl {
  margin: 0;
}

/* 行（項目名／内容の2カラム） */
.recruit-positions__row {
  display: grid;
  grid-template-columns: clamp(9rem, 7rem + 6vw, 15rem) 1fr;
  /* 項目名 / 内容 */
  align-items: center;
  column-gap: clamp(10px, 1.6vw, 20px);
  padding: clamp(10px, .6rem + .6vw, 16px) clamp(12px, 1.6vw, 24px);
  border-top: 1px solid var(--brand);
  /* 2行目以降に水平線 */
  background: #fff;
}

.recruit-positions__row:first-child {
  border-top: none;
}

/* タイトル行（募集職種） */
.recruit-positions__row.is-title {
  background: var(--brand);
  color: #fff;
  border-top: none;
}

.recruit-positions__row.is-title dt,
.recruit-positions__row.is-title dd {
  color: #fff;
}

/* 項目名／内容 */
.recruit-positions__row dt {
  margin: 0;
  font-weight: 700;
  color: #012814;
  font-size: clamp(1.5rem, 1.2rem + .2vw, 1.7rem);
}

.recruit-positions__row dd {
  margin: 0;
  color: #012814;
  font-size: clamp(1.5rem, 1.2rem + .2vw, 1.7rem);
  line-height: 1.8;
}

/* 狭幅端末でのカラム幅調整 */
@media (max-width: 420px) {
  .recruit-positions__row {
    grid-template-columns: clamp(7.6rem, 40%, 9.5rem) 1fr;
  }
}

/* =================================
   07) Company（会社情報）
================================= */

.recruit-company-section {
  --heading-pad-top: 2rem;
  background: #fff;
  padding: clamp(3rem, 2rem + 7vw, 23rem) 0;
}

/* 見出し（左H2／右COMPANY） */
.recruit-company__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.2rem, .8rem + 1vw, 2rem);
}

.recruit-company__heading h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  color: #012814;
  margin: 0;
  padding: var(--heading-pad-top) 0 3rem;
  line-height: 1.2;
  font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3.2rem);
  position: relative;
  flex: 1 1 auto;
}

.recruit-company__heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 5px;
  background: var(--brand);
}

.recruit-company__eyebrow {
  flex: 0 0 auto;
  color: var(--brand);
  text-transform: uppercase;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1;
  margin-top: var(--heading-pad-top);
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}

/* 表本体（DefineList） */
.recruit-company__inner {
  margin-top: clamp(1rem, .6rem + 1vw, 2rem);
  padding: clamp(1.4rem, 3rem + 3vw, 7rem) 0;
}

.recruit-company__dl {
  margin: 0;
}

/* 各行（項目名／内容）下部は黒の罫線 */
.recruit-company__row {
  display: grid;
  grid-template-columns: clamp(9rem, 7rem + 6vw, 15rem) 1fr;
  column-gap: clamp(10px, 1.6vw, 20px);
  align-items: center;
  padding: clamp(10px, .6rem + .6vw, 16px) clamp(12px, 1.6vw, 24px);
  border-bottom: 1px solid #000;
  background: #fff;
}

.recruit-company__row dt {
  margin: 0;
  font-weight: 800;
  color: var(--brand);
  /* 項目名はブランドグリーン */
  font-size: clamp(1.5rem, 1.2rem + .2vw, 1.7rem);
}

.recruit-company__row dd {
  margin: 0;
  color: #012814;
  font-size: clamp(1.5rem, 1.2rem + .2vw, 1.7rem);
  line-height: 1.8;
}

/* 狭幅端末調整 */
@media (max-width: 420px) {
  .recruit-company__row {
    grid-template-columns: clamp(7.6rem, 40%, 9.5rem) 1fr;
  }
}

/* =================================
   08) Entry（応募・お問い合わせ）
================================= */

/* セクション背景：全面画像＋十分な上下余白 */
.recruit-entry-section {
  --heading-pad-top: 2rem;
  padding: clamp(3rem, 2rem + 7vw, 23rem) 0;
  background: url("/wp-content/themes/sc-retail/assets/img/bg_recruit_entry.png") center/cover no-repeat;
}

/* 1枚カード（見出し＋DL） */
.recruit-entry__card {
  background: #fff;
  border-radius: .6rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  padding: clamp(1.4rem, 1rem + 1vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(.8rem, .4rem + 1vw, 1.6rem);
}

/* 見出し（左H2／右ENTRY） */
.recruit-section__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--heading-pad-top) 0 3rem;
  position: relative;
}

.recruit-section__heading h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  color: #012814;
  margin: 0;
  line-height: 1.2;
  font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3.2rem);
  flex: 1 1 auto;
}

.recruit-section__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 5px;
  background: var(--brand);
}

.recruit-section__eyebrow {
  flex: 0 0 auto;
  color: var(--brand);
  text-transform: uppercase;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1;
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}

/* 定義リスト（2カラム） */
.recruit-entry__dl {
  margin: 0;
}

.recruit-entry__row {
  display: grid;
  grid-template-columns: clamp(9rem, 7rem + 6vw, 15rem) 1fr;
  column-gap: clamp(10px, 1.6vw, 20px);
  align-items: center;
  padding: clamp(10px, .6rem + .6vw, 16px) clamp(12px, 1.6vw, 24px);
  border-bottom: 1px solid #e1e1e1;
}

.recruit-entry__row:last-child {
  border-bottom: none;
}

.recruit-entry__row dt {
  margin: 0;
  font-weight: 800;
  color: var(--brand);
  font-size: clamp(1.5rem, 1.2rem + .2vw, 1.7rem);
}

.recruit-entry__row dd {
  margin: 0;
  color: #012814;
  font-size: clamp(1.5rem, 1.2rem + .2vw, 1.7rem);
  line-height: 1.8;
}

/* 狭幅端末：見出し幅をやや狭く */
@media (max-width: 420px) {
  .recruit-entry__row {
    grid-template-columns: clamp(7.6rem, 40%, 9.5rem) 1fr;
  }
}