/* ==========================================================================
   POTOMAK 2026 — RECRUITページ専用スタイル
   出典: Figma「POTOSITE_FINAL」リクルートトップ(2026/08/07 改訂版)

   企業向けページとの違いは3つだけ。骨は同じにしてある。
     1. 明朝を使わない(ゴシックだけでまとめる)
     2. 黄・橙を「点」で置く(面では使わない)
     3. コラージュの図形を記号として共有する(写真の切り抜きは再現しない)
   ========================================================================== */

/* --------------------------------------------------------------------------
   ★ 調整用のつまみ
   このページの雰囲気は、下の値でほぼ決まる。
   -------------------------------------------------------------------------- */

.recruit-page {
  /*
   * ヒーローのスローガンの色。
   *
   * 写真の上に直接載るので白。
   * 写真そのものは明るいままにしておき、下側だけ黒のグラデーション
   * (.rec-hero__art の --photo-strip-shade)で沈めることで、白ヌキが読めるようにしている。
   *
   * 以前は黄色(#FFD644)だった。
   * コラージュ1枚をやめて写真4枚並びにしたときに白へ変更。
   */
  --rec-lettering: #FFFFFF;

  /* 塗り分けるセクションの地色 */

  /*
   * セクションどうしの空き(全RECRUIT系ページ共通。ここ1つで一律に効く)。
   *
   *   ふつうのセクションどうし … 32px + 32px = 中身から中身まで64px
   *   ベタ面(has-tint)         … 色の境目から中身まで、内も外も64px
   *                              (中身から中身までは128px)
   *
   * ベタ面は「色の境目」という見える線が中身のあいだに立つ。
   * その線から中身までの空きを、ふつうのセクションの境目(64px)と
   * 同じにそろえる、という考え方。
   *
   * 「境目をはさんで、内側と外側を必ず同じ数値にする」という
   * サイト共通の考え方(tokens.css の --rule-section)はそのまま。
   *
   * 画面幅では変えない(狭い画面でも同じ空き)。
   */
  --rec-gap:      var(--rule-row);
  --rec-gap-tint: var(--space-2xl);

  /* コラージュから持ってきた図形の大きさ */
  --rec-mark: 10px;
}

/*
 * このページの見出しはすべてゴシック。
 * 明朝を使わないので、企業ページとは声の高さが変わる。
 *
 * .rec-message__lead は、明朝のH3を使うのをやめて
 * もともとゴシックの --type-subhead に変えたので、この行から外した。
 */
.recruit-page .rec-head__ja,
.recruit-page .rec-person__quote,
.recruit-page .rec-culture__ja,
.recruit-page .rec-value__en {
  font-family: var(--font-sans);
}


/* ---------- コラージュから借りた図形(CSSだけで描く) ---------- */

/*
 * 円・三角・四角。画像ファイルは使わない。
 * 見出しの脇や4つの価値の背後で、同じ記号として繰り返し出す。
 */
.rec-mark {
  display: inline-block;
  width: var(--rec-mark);
  height: var(--rec-mark);
  vertical-align: middle;
  margin-right: 8px;
}

.rec-mark--circle {
  border-radius: 50%;
}

/*
 * 三角は「上の頂点 / 右下 / 左下」を結んで切り抜く。
 *
 * 正三角形にするため、枠の高さいっぱいには描かず、
 * 上下に 6.7% ずつ余らせて、高さを底辺の 0.866倍(√3 ÷ 2)にしている。
 * 枠のまま切り抜くと底辺と高さが同じ二等辺三角形になり、
 * 円や四角と並べたときに1つだけ縦に伸びて見える。
 *
 * 枠の大きさ自体は変えていないので、
 * 見出しの脇の小さな印(10px)でも、4つの価値の背後の大きな図形でも、
 * 同じ指定のまま正三角形になる。
 */
.rec-mark--triangle {
  clip-path: polygon(50% 6.7%, 100% 93.3%, 0% 93.3%);
}

/*
 * 「and Smile!」の丸の中に入れる白い笑顔。
 *
 * 言葉が Smile なので、4つのうちここだけ図形に表情を足している。
 * 丸・三角・四角という記号の並びの中で1つだけ崩す形になるが、
 * 「and」が付いて「!」で終わる、というこの言葉だけの例外に合わせている。
 *
 * 作り方は、白い楕円を1つ置いて、その上から同じ幅の楕円で
 * 上側を削るだけ。2つの左右の端が同じ位置なので、
 * 削り残りが両端で0になり、三日月の形になる。
 * 大きさはすべて％なので、図形が大きくなっても形が崩れない。
 *
 * 小さな印(見出しの脇の10px)には出さない。潰れて汚れに見えるため。
 */
.rec-value__shape.rec-mark--smile::before,
.rec-value__shape.rec-mark--smile::after {
  content: "";
  position: absolute;
  left: 22%;
  width: 56%;
  border-radius: 50%;
}

/* 下地の白い楕円 */
.rec-value__shape.rec-mark--smile::before {
  top: 36%;
  height: 46%;
  background-color: var(--color-white);
}

/* 上から削る楕円。図形と同じ色で塗りつぶす */
.rec-value__shape.rec-mark--smile::after {
  top: 24%;
  height: 40%;
  background-color: var(--color-smile);
}

/* 色。4つの価値の名前でそのまま呼べるようにしている */
.rec-mark--enjoy    { background-color: var(--color-enjoy); }
.rec-mark--creative { background-color: var(--color-creative); }
.rec-mark--variety  { background-color: var(--color-variety); }
.rec-mark--smile    { background-color: var(--color-smile); }


/* ---------- ヒーロー ---------- */

/*
 * 写真4枚を並べた帯そのもの（並べ方・切り取り・グラデーション）は、
 * TOPの採用セクションと共通なので layout.css の .photo-strip にある。
 * ここでは「このページではどう見せるか」だけを指定する。
 */
.rec-hero {
  position: relative;
  background-color: var(--rec-hero-bg, transparent);
}

/*
 * 帯の形（横に4枚。PCは画面いっぱい、スマホは正方形）は共通の初期値を土台にしているので、
 * ここでは指定していない。layout.css の .photo-strip を参照。
 *
 * shade（下にかける黒）だけを上書きしている。
 * このページだけ、スローガンの白ヌキを写真の上に載せるため。
 * 写真を差し替えて文字が読みにくくなったら、まずこの数字を上げる。
 */
.rec-hero__art {
  /* 0.55では写真が暗すぎたので0.40に。文字が読めなくなったらここを上げる */
  --photo-strip-shade: .40;

  /*
   * 開いた瞬間に、写真が画面の下端まで届くようにする。
   *
   * 比率(16:9など)で高さを決めると、画面の高さとは無関係に決まるので、
   * 「写真の途中で画面が終わる」「下に次のセクションが少し覗く」といった
   * 中途半端な切れ方になる。ここでは比率を使わず、
   * 画面の高さからヘッダーのぶんを引いた「残り全部」を高さにしている。
   *
   * dvh は、スマートフォンでアドレスバーが出入りしても
   * ずれない高さの単位。対応していないブラウザのために、
   * 先に vh で同じ指定を書いてある(下の行が使えれば上書きされる)。
   */
  aspect-ratio: auto;
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));

  color: var(--rec-lettering);
}

/*
 * スローガンの重ね方そのもの(位置・幅・重なり順)は、
 * TOPの採用セクションと共通なので layout.css の .photo-strip__lettering にある。
 * ここでは置き場所の数字と色だけを上の .rec-hero__art で上書きしている。
 */


/* ---------- セクション共通 ---------- */

/* セクションの上下。境目の前後32pxずつ＝64px */
.rec-section {
  padding-block: var(--rec-gap);
}

/*
 * RECRUITトップへ戻るリンク(template-parts/recruit-back.php)。
 *
 * .section-foot の上の空き(32px)は「セクションの中身のあとにリンクが続く」
 * ときのための値。ここはリンクだけで1つのセクションになっていて、
 * セクションの余白(前32px + 後32px = 64px)がすでに空いているので、
 * そのまま重ねると96pxになり、セクションの区切りより広くなってしまう。
 * (.section-foot のコメントにある「逆転」の状態)
 */
.rec-back .section-foot {
  margin-top: 0;
}

/*
 * 地色を沈ませた面。
 * 色の境目から中身までを、内側も外側も --rec-gap-tint(64px)にする。
 * 外側は、隣のセクションが自分の padding(--rec-gap)を先に持っているので、
 * その差ぶんだけ margin で足す。
 */
.recruit-page .has-tint {
  margin-block: calc(var(--rec-gap-tint) - var(--rec-gap));
  padding-block: var(--rec-gap-tint);
}

/*
 * 見出しから下の空き。
 *
 *   見出し → リード文 … 16px。リード文は見出しの続きとして読ませる
 *   リード文 → 中身   … 32px
 *   見出し → 中身     … 32px(リード文が無いセクション)
 *
 * リード文があってもなくても、見出しのかたまりから中身までの
 * 見え方が変わらないよう、下の空きは同じ32pxにそろえている。
 */
.rec-head {
  margin-bottom: var(--rule-row);
}

/* すぐ下にリード文が来るときだけ、そこまでを詰める */
.rec-head:has(+ .rec-lead) {
  margin-bottom: var(--space-sm);
}

/*
 * 下層ページのイントロでは、見出しの下の空きは
 * 序文のかたまり(.rec-intro__body)が24pxで受け持つ。
 * 見出し自身にも持たせると二重になるので、ここでは消す。
 */
.rec-intro__head > .rec-head {
  margin-bottom: 0;
}

/* 英字ラベル。先頭に色の図形を添える */
.rec-head__en {
  display: flex;
  align-items: center;
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ink);
}

/* 見出し。ゴシックの32px(H1-San) */
.rec-head__ja {
  /* 英字ラベル→見出しの空き。全セクション共通 */
  margin-top: var(--space-xs);
  font: var(--type-h1-san);
  /*
   * 字間は他ページのH1(明朝)と同じ0.08em。
   * 大きさの段は全ページ共通で、RECRUITだけ明朝がゴシックに変わっている、
   * という関係なので、字間まで別にする理由がない。
   */
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
}

.rec-lead {
  margin-bottom: var(--rule-row);
  /* 見出しの下のリード文。全ページ共通で Body(15px) */
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.rec-foot {
  margin-top: var(--rule-row);
  text-align: center;
}

/* 一覧の行末に置く矢印。線1本だけで描く */
.rec-arrow {
  position: relative;
  width: 24px;
  height: 1px;
  background-color: var(--color-ink);
}

.rec-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--color-ink);
  border-right: 1px solid var(--color-ink);
  transform: rotate(45deg);
}


/* ---------- ここだけ広く取る2か所 ---------- */

/*
 * ページの決まりは「境目の前後32pxずつ＝64px」だが、
 * 次の2か所だけ、ひと呼吸ぶん広げている。
 * 数字を大きくしたいのではなく、ここは間を持たせたい、という判断。
 *
 * 1) ヒーローのすぐ下
 *    ヒーローは全面写真で、下端が硬い縁になっている。
 *    写真の側は空きを1つも負担しないので、
 *    いつもの32pxだと文字が写真に貼り付いて見える。
 *    この面だけで区切りを作りきるため、倍の64pxを持たせる。
 *
 * 2) 4つの価値のすぐ下
 *    4つの価値までが「会社の姿勢の話」、そこから下が「募集の話」で、
 *    ページの中で話題が切り替わる。
 *    境目の前後を48pxずつにして、他の区切りより一段深くしている
 *    (内側と外側を同じ数値にする決まりは守る)。
 *    下が色ベタ(PEOPLE)のときは、色の側が自分の 64px を持っているので、
 *    ここで足すのは 4つの価値の側だけでよい。
 */
/*
 * MESSAGEだけ、上下をセクションの倍(64px)取る。
 *
 * 中身が短い文章だけで、写真も罫線も無い。
 * 他のセクションと同じ空きにすると、前後の中身に挟まれて
 * ただの一段落に見えてしまう。ここは間そのものを見せる場所なので、
 * 上下に空きを足して、文章が浮いている状態をつくっている。
 *
 * 下は次のセクションの上の空き(32px)と足されるので、
 * 見た目の空きは96pxになる。
 */
.rec-message {
  padding-top: calc(var(--rec-gap) * 2);
  padding-bottom: calc(var(--rec-gap) * 2);
}

.rec-values {
  padding-bottom: var(--space-xl);
}


/* ---------- MESSAGE ---------- */

.rec-message__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3xl);
}

/*
 * 瑠璃色で置いて視線を止める。ゴシックの24px(H2-San)。
 * ここは4行の短い文が続くので、行間を広めに取って
 * ゆっくり読ませる(H2-San の既定の1.5では詰まって見える)。
 */
/*
 * 見出しと本文のかたまり。2カラムの右半分に置く。
 * 左半分は空けたままにして、そこを「間」として使う。
 */
.rec-message__body {
  grid-column: 2;
}

/*
 * 呼びかけの1行。
 *
 * 以前はH3(20px)を瑠璃色で置いていた。
 * 大きさは同じだが、日本語の文章を瑠璃色にしているのは
 * サイトでここと、インタビュー記事の章見出しの2箇所だけで、
 * 他に例のない扱いになっていた。
 * 瑠璃色は「英字ラベルとリンクの色」に絞ることにして、
 * 文章の上に置く小見出しの組み(--type-subhead)にそろえた。
 *
 * --type-subhead は 20px・ウエイト350・墨色。
 * 見出しを本文より太くせず、大きさと行送りの詰まり具合だけで
 * 主従をつける組みで、中途採用の「働くメリット」や
 * BUSINESSの各ステップ、ポリシーの中見出しと同じもの。
 *
 * 行送りだけは、ここは1行の呼びかけなので広めの2.0にしている。
 */
.rec-message__lead {
  font: var(--type-subhead);
  line-height: var(--lh-loose);
  /*
   * 字間は下の本文と同じ 0.08em。
   * 他の見出しは --ls-heading(0.03em)だが、
   * ここだけ本文を広げているので、見出しが詰まって見えてしまう。
   * かたまりとして同じ空気にするため、上下でそろえている。
   */
  letter-spacing: 0.08em;
  color: var(--color-ink);
}

/* 「、」の位置でだけ折り返す */
.rec-message__lead span {
  display: inline-block;
}

.rec-message__text {
  /*
   * 呼びかけ → 本文。16px。
   *
   * 「見出し → 中身」の24px(--rule-head)ではなく、
   * このページの「見出し → リード文」と同じ16pxを使う。
   * (.rec-head:has(+ .rec-lead) と同じ考え方)
   *
   * 上の1行は章の見出しではなく、本文の言い出しにあたる。
   * 24px空けると2つが別のかたまりに見えてしまうので、
   * ひと続きに読ませるぶんだけ詰めている。
   */
  margin-top: var(--space-sm);
  font: var(--type-body);
  /*
   * ------------------------------------------------------------------
   * ここから下は、サイトのルールから外れた「MESSAGEだけの扱い」
   * ------------------------------------------------------------------
   * この一角(.rec-message__lead と .rec-message__text)は、
   * 読んで情報を得る文章ではなく、間そのものを見せる文章として組んでいる。
   * 行送りも字間も表(tokens.css)の値を使っていない。
   *
   *   行送り 2.4  … 本文の既定は1.9、読ませる長文用の --lh-read でも2.2
   *   字間  0.08em … 本文の --ls-body は0.04em
   *
   * 他のページの本文はすべてトークンを使うこと。ここを真似しないこと。
   * 段落の空きを持たせない組み方なので、行送りを変えると
   * 折り返しも段落の変わり目も同じだけ動く。
   */
  line-height: 2.4;
  letter-spacing: 0.08em;
  color: var(--color-ink);
}

/*
 * 段落どうしの空きは持たせない。
 *
 * 4つとも短い一文で、どれも句点で終わるので、
 * 区切りは文字のほうが示してくれる。
 * そこに空きを足すと、折り返した行と段落の変わり目で
 * 間隔が2種類できて、読む調子が段ごとに途切れる。
 * 全部を同じ行送りで流して、ひと続きの語りとして読ませる。
 */
.rec-message__text p + p {
  margin-top: 0;
}


/* ---------- 4つの価値 ---------- */

.rec-values__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl);
}

.rec-value {
  text-align: center;
}

/*
 * 右奥に色の図形、その手前の左に切り抜いた人物写真。
 * 図形が背景、人が主役という関係にしている。
 * 写真がまだ無いあいだは図形だけが出るので、崩れない。
 */
.rec-value__art {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-md);
}

/*
 * 図形は3つとも大きさが違うので、端ではなく「中心」でそろえる。
 *
 * 上端や右端をそろえると、大きさの違いがそのまま位置のずれになって
 * ガタガタに見える。中心を1点に固定しておけば、
 * 大きさをいくら変えても4つの図形が同じ線の上に並ぶ。
 */
.rec-value__shape {
  position: absolute;
  left: 60%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: 76%;
  height: 76%;
}

/*
 * 四角だけ小さくする。
 *
 * 同じ大きさの枠に収めても、四角は枠を余さず埋めるのに対し、
 * 丸は約8割、三角は約4割しか埋めない。
 * 数値をそろえると四角だけが重く見えるので、目で見て釣り合う大きさに落としている。
 */
.rec-value__shape.rec-mark--square {
  width: 66%;
  height: 66%;
}

/* 三角は逆に、枠の4割ほどしか埋めないので少し大きくする */
.rec-value__shape.rec-mark--triangle {
  width: 84%;
  height: 84%;
}

/*
 * Enjoyの1枚だけ、人物が横向きで写っているぶん
 * 同じ枠に収めると他の3枚より小さく見える。ここだけ少し拡大する。
 * 足元の位置を動かしたくないので、左下を軸にして伸ばしている。
 */
.rec-value--enjoy .rec-value__cut {
  transform: scale(1.1);
  transform-origin: left bottom;
}

.rec-value__cut {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 人は下端に足を着ける。左寄せにして図形と重ねる */
  object-position: left bottom;
}

/*
 * 4つの価値の名前(Enjoy / Creative / Variety / and Smile!)。
 *
 * H1-San(32px)を Regular に落とし、字間もほとんど空けない。
 * 太字のままだと、この大きさでは見出しとして重すぎる。
 * 細くすることで、大きさの割に軽く、絵と釣り合って見える。
 */
/*
 * 英字(スローガンから切り出したSVG)。
 *
 * 幅は言葉ごとに違うので、高さだけをそろえる。
 * 4つとも同じ行の高さで書き出してあるので、高さを合わせれば
 * 文字の大きさと足元(ベースライン)が自然にそろう。
 */
.rec-value__en {
  display: flex;
  justify-content: center;
}

.rec-value__en svg {
  display: block;
  width: auto;
  /* 44pxでは絵と説明のあいだで英字だけが強すぎたので一段落とした */
  height: 38px;
}

/*
 * 組織と文化の見出し
 * (個人の情熱をサポートする / チームの結束を後押しする / 組織の対話の場をつくる)。
 *
 * 大きさは Name-San。広い画面で20px、狭い画面で18px
 * (--fs-name を base.css で落としている)。
 * 丸い写真に添える名前の扱いなので、大きくすると写真より文字が勝つ。
 * (以前は H2-San(24px)だったが、説明的な文言になり長すぎるため一段落とした)
 *
 * 字間は他の見出しと同じ --ls-heading。
 */
.rec-culture__ja {
  font: var(--type-name);
  /* 他の見出しと同じ字間。以前は 0.01em という表に無い値だった */
  letter-spacing: var(--ls-heading);
}

/*
 * 見出しを意味の切れ目で分けたかたまり(page-recruit.php)。
 *
 * inline-block にすると、この中では折り返しが起きなくなる。
 * 結果、行が変わるのはかたまりとかたまりのあいだだけになり、
 * 「個人の情熱をサポ / ートする」のような切れ方をしなくなる。
 * 1行に収まる幅があるときは、そのまま横に並ぶので見た目は変わらない。
 */
.rec-culture__chunk {
  display: inline-block;
}

/*
 * 名前の下に添える一行。いまは画面幅にかかわらず出していない。
 *
 * 3つの制度の中身は「私たちのカルチャーを知る」の先(組織と文化ページ)に
 * 用意してあり、ここは「3つある」ことと名前が分かれば足りる場所なので、
 * 説明を重ねると同じ話を2度読ませることになる。
 *
 * 出したくなったら display を消す。
 * 狭い画面では文字欄が画面の4割ほどしかないので、
 * そのときは 12px(--type-caption)まで落とすこと。
 */
.rec-culture__copy {
  display: none;
  margin-top: var(--space-xs);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  text-align: left;
}

/* 文字の色は図形と同じ。4つが色で結び付いて見えるようにする */
.rec-value__en--enjoy    { color: var(--color-enjoy); }
.rec-value__en--creative { color: var(--color-creative); }
.rec-value__en--variety  { color: var(--color-variety); }
.rec-value__en--smile    { color: var(--color-smile); }

/*
 * 4つの価値の説明文。
 *
 * カードの中に置く説明なので List(14px)。
 * 同じRECRUIT配下の「働くメリット」カードの本文(.careers-merit__body)や
 * 制度カードの説明と同じ扱いにそろえている。
 * 本文(15px)にすると、上の英字と説明のどちらも強くなり、
 * 4つ並べたときに1つずつが重く見える。
 *
 * 英字 → 説明のあいだは16px。「見出し → 中身」の24pxではなく、
 * 名前とその説明をひとまとまりに見せるための狭い空き。
 */
.rec-value__text {
  margin-top: var(--space-sm);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- PEOPLE ---------- */

.rec-people__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}

/* インタビュー一覧のカードと同じ正方形。同じ人の同じ写真なので揃える */
.rec-person__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-grayge);
}

/* インタビュー一覧のカードと同じ組み方 */
.rec-person__quote {
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  /* カードの1行なので、読ませる長文の Lead Body ではなく Body */
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.rec-person__meta {
  /* 説明どうしの行。全ページ共通の 4px */
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}


/* ---------- OUR CULTURE(青ベタ) ---------- */

/*
 * 円は列いっぱいに広げず、300pxで止めて3つを中央に寄せる。
 *
 * 1fr の列に置くと、画面が広いほど円どうしが離れていき、
 * 3つで1組に見えなくなる。幅を決めて中央に寄せておけば、
 * どの画面幅でも同じ間隔のまま、3つがひとまとまりに見える。
 */
.rec-culture__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: var(--space-3xl);
  text-align: center;
}

/*
 * 写真を円に切り抜くだけ。
 *
 * 写真を沈ませるグレーも、その上に載る施策名のロゴも、
 * 支給された画像の中にすでに入っている。
 * こちら側で重ねると二重になるので、何も足さない。
 */
.rec-culture__circle {
  position: relative;
  width: min(300px, 100%);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  /* 画像が入るまでの下地 */
  background-color: var(--color-grayge);
}

.rec-culture__circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * 円の下に置く「ラベル + 見出し」。
 *
 * 以前は英字と日本語を1行に横並びにしていたが、
 * 日本語が「個人の情熱をサポートする」と説明的になり、
 * カードの幅(300px)では収まらなくなったので上下2段にした。
 * 英字が上、日本語が下。組織と文化ページの丸バッジも同じ組み方。
 */
.rec-culture__head {
  /* 写真 → その名前。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 英字ラベル → 見出し。全ページ共通の8px */
  gap: var(--space-xs);
}

/*
 * 英字のラベル。
 * 色は瑠璃色。飛んだ先の組織と文化ページで、各ブロックの上に出る
 * 同じ英字ラベル(.cul-block__eyebrow)と同じ色にして、
 * 「同じ3つの話が続いている」ことが色でも分かるようにしている。
 */
.rec-culture__en {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ruri);
}


/* ---------- BENEFITS(硬い情報。整然と) ---------- */

.rec-benefits__list {
  margin: 0;
  border-top: 1px solid var(--color-line);
}

.rec-benefits__row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 24px;
  gap: var(--space-md);
  align-items: center;
  /*
   * 罫線と文字のあいだ。
   * COMPANYの会社情報(.profile__row)と同じ 20px にそろえている。
   * 同じ「見出し + 内容」を罫線で区切った表なので、
   * ページが違っても行の詰まり方は同じにする。
   */
  padding: 20px;
  border-bottom: 1px solid var(--color-line);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  /*
   * 行ごとリンクにしている（制度ページの該当分類へ飛ぶ）。
   * 下線は引かない。表の行なので、下線が入ると罫線と喧嘩する。
   */
  color: var(--color-ink);
  text-decoration: none;
}

/*
 * 触れたときは、文字と矢印がまとめて瑠璃色になる。
 * 矢印は currentColor ではなく色を直接指定しているので、
 * ここで一緒に変えてやる必要がある。
 */
.rec-benefits__row dt {
  color: var(--color-ink);
}

.rec-benefits__row dd {
  margin: 0;
  color: var(--color-ink);
}


/* ---------- POSITIONS(硬い情報。整然と) ---------- */

.rec-positions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.rec-position__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-grayge);
}

/* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
.rec-position__en {
  margin-top: var(--rule-caption);
  font: var(--type-list);
  letter-spacing: var(--ls-en);
  color: var(--color-ink);
}

.rec-position__ja {
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}

/*
 * 矢印は、狭い画面で横1行になったときだけ出す。
 * PCは写真が大きく、カード全体が押せることが形で分かるので要らない。
 */
.rec-position .rec-arrow {
  display: none;
}


/* ---------- 採用相談への導線 ---------- */

.rec-cta__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.rec-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 20px;
  /* 枠は文字と同じ墨色。RECRUIT内のボタンと同じ考え方 */
  border: 1px solid var(--color-ink);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.rec-cta__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ---------- RECRUIT内のボタン ---------- */

/*
 * RECRUITの中のボタンは、上の導線(.rec-cta__btn)と同じ見た目にそろえる。
 * 角の丸い青い塗りではなく、細いグレーの枠に墨色の文字。
 * ページの中に青いかたまりが何度も出ると、
 * 図形の色(enjoy / variety など)とぶつかって、どこが主役か分からなくなる。
 *
 * 大きさは全ページ共通の .btn のまま(min-width 220px / padding 14px 24px / Caption)。
 * .rec-cta__btn は2つ並びの帯なので大きいが、
 * ここは文章のあとに1つ置くボタンなので、その大きさは要らない。
 *
 * ホバーは共通の指定(枠と文字が瑠璃色になる)がそのまま効くので、ここには書かない。
 *
 * 対象外が2つある。
 *
 *   .careers-search__submit … 条件検索の「この条件で探す」。
 *     押すと結果が変わる操作なので、ページの中で1つだけ青のまま残す。
 *
 *   .btn--outline … ページ末尾のお問い合わせ帯(template-parts/contact-band.php)。
 *     暗い写真の上に白ヌキで置く共通パーツで、ここを墨色にすると
 *     写真に沈んで読めなくなる。RECRUITページも他ページと同じ見た目にする。
 */
.recruit-page .btn:not(.careers-search__submit):not(.btn--outline) {
  color: var(--color-ink);
  background-color: transparent;
  /*
   * 枠は文字と同じ墨色。区切り線の色(--color-line)では
   * 押せるものに見えず、面の切れ目と区別がつかなかった。
   * サイト内のもう一つの枠ボタン(.btn--line)も同じ墨色。
   */
  border: 1px solid var(--color-ink);
  border-radius: 0;
}


/* ---------- タブレット ---------- */

@media (max-width: 1100px) {
  /*
   * この幅では2カラムのまま。文章は右半分に置き、左は空けておく。
   *
   * 以前はここで1カラムにしていたが、そうすると文章が左端に寄り、
   * 広い画面と見え方が変わってしまう。左の空きは飾りではなく
   * 「間」として置いているものなので、横に余裕があるうちは残す。
   * 列の間だけ96px → 48pxに詰めて、右半分の幅を確保している。
   */
  .rec-message__inner {
    gap: var(--space-xl);
  }

  /*
   * 4つの価値は横1列のまま。
   * 折り返さないぶん1つが細くなるので、列の間と英字を小さくして収める。
   */
  .rec-values__grid {
    gap: var(--space-md);
  }

  .rec-value__en svg {
    height: 34px;
  }

  /*
   * 4つの価値(.rec-values__grid)はここに入れていない。
   *
   * 4つで1組の見出しのようなものなので、2列に折り返すと
   * 「2つ + 2つ」に見えてしまう。
   * 横1列(PC)か、上下に積む(768px以下)かの2つだけにして、
   * 途中で2列になる状態を作らない。
   */
  .rec-people__grid,
  .rec-culture__grid,
  .rec-positions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {
  /*
   * ここで初めて1カラムにする。
   * これ以上狭いと、右半分だけでは1行に入る文字数が足りない。
   */
  .rec-message__inner {
    grid-template-columns: 1fr;
  }

  /*
   * 1カラムになったら列の指定を解除する。
   * 残したままだと、1列しかないグリッドに2列目が作られてしまう。
   */
  .rec-message__body {
    grid-column: auto;
  }

  /*
   * 写真は横4枚のまま、枠が正方形になる（形の切り替えは layout.css 側）。
   * ここではPCでだけ効かせていた「画面いっぱいの高さ」を外す。
   */
  .photo-strip.rec-hero__art {
    /*
     * 画面いっぱいの高さをやめて、比率で決める。
     *
     * 縦長の画面で高さいっぱいにすると、1コマが細長く切り取られて
     * 顔が枠から外れてしまう。
     * スマートフォンでは形を優先して、スクロールで次を見せる。
     *
     * 帯の共通の初期値は正方形(layout.css)だが、ここは 5:6 の縦長。
     * ページを開いて最初に出る一枚という点で、
     * TOPのメインビジュアル(front-page.css の --visual-ratio: 1.2 = 5:6)と
     * 同じ役目なので、そちらに合わせている。
     *
     * .photo-strip を並べて書いているのは、
     * layout.css の同名の指定より確実に後勝ちさせるため。
     */
    --photo-strip-ratio: 5 / 6;
    aspect-ratio: var(--photo-strip-ratio);
    height: auto;
  }

  .rec-people__grid {
    grid-template-columns: 1fr;
  }

  /*
   * ------------------------------------------------------------------
   * 3つの柱を縦に積む
   * ------------------------------------------------------------------
   * 左右交互のジグザグ(円を左右にはみ出させ、その横に文字を置く)を
   * 試したが、うまくいかなかった。
   *
   * 円を大きく見せるほど、横に残る文字欄が100px前後まで細くなる。
   * 「個人の情熱をサポートする」は12文字あるので、その幅では
   * ことばの途中で折れるか、字を落として本文と同じ大きさにするしかない。
   * 説明文まで入れると1行9文字の細い柱になり、さらに読みづらい。
   * 円を小さくすれば文字は入るが、今度は円が主役でなくなる。
   *
   * PCは「円が中央、その下にラベルと見出しを中央揃え」で成立している。
   * スマホもそれをそのまま縦に並べる。文字は画面幅を使えるので
   * 見出しは1行に収まり、3つの中心線も1本にそろう。
   *
   * 組み方がPCと同じになるので、ここでの上書きは
   * 「1列にすること」と「円の大きさ」だけでよい。
   */
  .rec-culture__grid {
    grid-template-columns: 1fr;
    /* 3つの上下の空き。項目どうしの区切り(--rule-row / 32px) */
    gap: var(--rule-row);
  }

  /*
   * 円の大きさ。
   *
   * 基本の指定は min(300px, 100%)。狭い画面ではほぼ画面いっぱいになり、
   * 3つ並ぶと縦に伸びすぎるので、画面幅の66%に抑えている。
   * ここを上げると円は大きくなるが、そのぶんスクロールが長くなる。
   */
  .rec-culture__circle {
    width: 66%;
  }

  /*
   * 募集職種は2列のまま。
   * 1列にすると1枚が画面いっぱいになって縦に間延びし、
   * 9職種を見渡すのに何度もスクロールすることになる。
   */
  /*
   * 募集職種は、狭い画面では「左に写真・右に職種名」の横組みにして
   * 上から9段に積む。
   *
   * 2列だと1枚の写真が画面の半分以下になり、
   * 誰が何をしているのかが読み取れない大きさになる。
   * 横に組めば写真は小さいままだが、職種名が主役になって一覧として読める。
   * 写真の比率(16:9)はPCと同じまま。
   */
  .rec-positions__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .rec-position {
    display: grid;
    /* 左の写真の幅 / 右の文字 / 行末の矢印 */
    grid-template-columns: 38% minmax(0, 1fr) 24px;
    column-gap: var(--space-md);
    align-items: center;
  }

  /* 写真は2行ぶんにまたがらせて、右の2行に対して中央にそろえる */
  .rec-position__thumb {
    grid-row: 1 / 3;
  }

  .rec-position__en {
    grid-column: 2;
    align-self: end;
    /* 写真の下ではなく横に来るので、写真ぶんの空きは要らない */
    margin-top: 0;
  }

  .rec-position__ja {
    grid-column: 2;
    align-self: start;
  }

  .rec-position .rec-arrow {
    display: block;
    grid-column: 3;
    grid-row: 1 / 3;
  }

  /*
   * 4つの価値は、狭い画面では「左に絵・右に言葉」の横組みにして
   * 上から4段に積む。
   *
   * 2列のまま縦積みにすると、1つあたりの幅が半分になって
   * 説明文が3〜4行に折り返し、絵も小さくなる。
   * 横に組めば、絵は大きいまま、文章も1行が長く取れる。
   */
  .rec-values__grid {
    grid-template-columns: 1fr;
    /*
     * 4段の上下の空き。項目どうしの区切り(--rule-row / 32px)。
     *
     * 絵が正方形の枠なので、枠の中にもともと余白が入って見える。
     * それを見越して一段下の24pxにしていたが、
     * 実機では4つが窮屈に見えたのでルールどおりの32pxに戻した。
     */
    gap: var(--rule-row);
  }

  .rec-value {
    display: grid;
    /*
     * 左の絵の幅。
     * 30%では小さかったので38%に。これ以上広げると、
     * 説明文の欄が「想像力・夢・創造力を活かして」(14文字)を
     * 1行で持てなくなり、PCと改行の位置がそろわなくなる。
     */
    grid-template-columns: 38% minmax(0, 1fr);
    column-gap: var(--space-md);
    align-items: center;
    text-align: left;
  }

  /* 絵は左の列。右の2行(言葉と説明)に対して中央にそろえる */
  .rec-value__art {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .rec-value__en {
    grid-column: 2;
    align-self: end;
    justify-content: flex-start;
  }

  /*
   * 英字(Enjoy など)の大きさ。
   * 絵と横に並ぶ組みなので、絵より文字が勝たない大きさにする。
   * 36pxでは説明文に対して強すぎたので一段落とした。
   */
  .rec-value__en svg {
    height: 32px;
  }

  .rec-value__text {
    grid-column: 2;
    align-self: start;
    /* 言葉 → 説明。名前とひとまとまりに見せたいので狭く取る */
    margin-top: var(--space-xs);
  }

  /*
   * 左右のすき間は詰める。
   * 狭い画面では1枚が200px前後しかないので、32pxも空けると
   * すき間が写真の幅に対して目立ちすぎ、2枚が別々のものに見える。
   * 上下は行の区切りとして32pxのまま残す。
   */
  .rec-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /*
   * 狭い画面では分類名と中身を縦に積む。
   * ただし矢印は右端に残す(行ごとリンクなので、押せる印が要る)。
   * 左の列に分類名と中身を2段、右の列に矢印を縦中央で置く。
   */
  .rec-benefits__row {
    grid-template-columns: minmax(0, 1fr) 24px;
    /*
     * 見出しと中身を縦に積んだときの空き。
     * COMPANYの会社情報(.profile__row)と同じ8px。
     */
    gap: var(--space-xs) var(--space-md);
    padding-inline: 0;
  }

  .rec-benefits__row dt,
  .rec-benefits__row dd {
    grid-column: 1;
  }

  .rec-benefits__row .rec-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}


/* ==========================================================================
   下層ページ共通のイントロ (.rec-intro)
   英字ラベル + 見出しの下に序文を置く縦積み。
   benefits / culture などで共通利用する(template-parts/recruit-page-intro.php)。

   以前は左に見出し、右に序文の2カラムだったが、
   他のページ(BUSINESS / COMPANY)の導入はすべて見出しの下に文章が来る形なので、
   RECRUITだけ別の組み方をする理由がなかった。
   ========================================================================== */

/*
 * 見出しはRECRUITトップのセクション見出しと同じ部品(.rec-head)。
 * ここでは専用の指定を持たない。
 */

/* 見出し → 序文。全ページ共通の24px */
.rec-intro__body {
  margin-top: var(--rule-head);
}

/*
 * 序文。全ページ共通の Body(15px)。読ませる文章なのでグレーにしない。
 * 横幅は他ページの導入文と同じ886pxで止める。
 * 1行が長すぎると、目が次の行の頭に戻れなくなる。
 */
.rec-intro__lead {
  max-width: 886px;
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}