@charset "UTF-8";

/* ================================================================
   株式会社Logic - recruit.css
   採用情報ページ専用スタイル
================================================================ */

/* ================================================================
   本文写真のグレースケール量（このページだけ）
   ※ --photo-grayscale は common.css の :root で 10% を持つ共通変数。
     サイト全体（トップ・ service.php など）のコンテンツ写真と共用しているので、
     :root 側を直接触ると全ページに影響する。
   ※ このページだけ強めたいので、body（.page-recruit）のスコープで
     同じ変数名を上書きする。カスタムプロパティは下の要素に継承されるので、
     このページ内で var(--photo-grayscale) を参照している写真
     （.sec-lead__image ・ .recruit-outline__photo）に一括で健く。
     common.css や他ページ（service.php 等）には影響しない。 */
.page-recruit {
    --photo-grayscale: 20%;
}

/* ── page-hero（背景画像）のフォーカス位置 ──
   ※ 共通側（common.css の .page-hero__bg）は center（中央固定）。
     このページだけ上端基準（center top ＝ 横中央・縦上端）にしたいので上書きする。 */
.page-recruit .page-hero__bg {
    background-position: center top 25%;
}

/* ================================================================
   セクション見出しの装飾（ページ共通）
   ※ このページは全セクションを同じ形で揃える。
     形＝O字ブロック（2×2）。ヘッダー・ドロワー・トップの
     Recruit と同じマーク（定義は common.css の .c-mark-oblock）。
     左上と右下だけを濃くし、残り2マスは淡くする。
     （施工実績の O字ブロックは4マスとも同じ濃さ。色の振り分けで区別する）
   ※ 色だけ背景に合わせて反転する。
     明るい背景：濃 = var(--color-title)         / 淡 = rgba(13, 13, 13, 0.3)
     暗い背景　：濃 = var(--color-text-inverse)  / 淡 = rgba(245, 244, 242, 0.35)
   ※ サイズ調整は --recruit-cell / --recruit-gap を触る。
     外形 = マス2つ + 隙間1つ（10px - 2px → マス4px）。
     マスが端数にならない値を保つこと（にじみ防止）。
================================================================ */

.page-recruit .section-head__label {
    --recruit-gap: 0.125rem;
    --recruit-cell: calc((var(--mark-size) - var(--recruit-gap)) / 2);
    --label-mark: var(--mark-size);
    /* ※ 暗転前の既定は明るい背景向け（淡 = 墨黒30%）だった。
         全面暗転で全セクションが暗い地になったので白系に入れ替える。 */
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

/* 募集メッセージ（.sec-lead--light）のラベル装飾。
   ※ 暗転前は帯がオフホワイトだったので、ここだけ
     暗色に戻していた。帯の色を決めている
     --lead-band-ink が --color-bg-light を参照しており、
     その値が暗転で #1F1F1F になったので帯も暗い。
     暗色のままだと黒地に黒でマークが消えるので白系に戻す。
   ※ 帯を明るい面に戻すときは、この2行を
         --mark-ink: var(--color-title);
         --mark-ink-sub: rgba(13, 13, 13, 0.3);
     に戻すこと。
   ※ 詳細度 0-3-0。ページ既定（0-2-0）より強い。 */
.page-recruit .sec-lead .section-head__label {
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

/* ※ common.css の .section--dark .section-head__label::before が
     background-color を塗るので transparent で打ち消す。
     詳細度は同じだが、ページCSS は common.css の後に
     読み込まれるのでこちらが勝つ。 */
.page-recruit .section-head__label::before {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink) 0 0),           /* 左上：濃 */
        linear-gradient(var(--mark-ink-sub) 0 0),       /* 右上：淡 */
        linear-gradient(var(--mark-ink-sub) 0 0),       /* 左下：淡 */
        linear-gradient(var(--mark-ink) 0 0);           /* 右下：濃 */
    background-size: var(--recruit-cell) var(--recruit-cell);
    background-repeat: no-repeat;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

/* ================================================================
   募集メッセージ
   ※ レイアウト（黒いL字帯＋2カラム＋写真2枚のずらし重ね）は
     common.css の .sec-lead が持つ。service ページと共用。
     このページ固有の指定は上のラベル色だけ。
   ※ 列の比率を変えたい場合は .sec-lead に対して
     --lead-col-div / --lead-col-gap をここで上書きする
     （帯の幅も自動で追従する）。
   ※ 写真の寄せ量を変えたい場合は .sec-lead__figure に対して
     --lead-img-offset を上書きする。
   ※ 本文カラム右上のイラスト（.sec-lead__illust）の仕組みも
     common.css 側。service ページと共用。
     大きさをこのページだけ変えたい場合は、下の形で
     --lead-illust-w を上書きする（現在は既定の 96〜176px）。
         .page-recruit .sec-lead__illust { --lead-illust-w: clamp(...); }
================================================================ */

/* ── 帯の色（オフホワイト）──
   ※ background-color ではなく --lead-band-ink を変える。
     このセクションは「面がL字に降りてくる」演出なので、
     セクションに背景色を塗るとリビールが見えなくなる。

   ── ※重要※ この1行を消さないこと ──
   ※ .sec-lead--light も同じ変数をオフホワイトにしているが、
     あちらは詳細度 0-1-0、ここは 0-2-0 なのでこちらが勝つ。
     つまり --light を付けても、この行が黒いままだと帯は黒いままになる。
     帯の色を変えるときは必ずこの行を直すこと。

   ── ※重要※ 半透明にしないこと ──
   ※ 半透明（rgba）にすると、このセクションに仕込まれている
     「重なりで継ぎ目を隠す」仕組みと衝突する。
     重なる箇所は2つあり、どちらもアルファが二重に乗って
     そこだけ濃い線になる。
         1. 縦棒の幅の +1px（写真の下に潜り込んでいる）
            → 写真の左端に縦の濃い線が出る
         2. 横棒の左端の -2px（縦棒に潜り込んでいる）
            → L字の角が濃くなる
     不透明なら重なっても同色なので何も起きない。

   ※ 帯の上に乗る文字は .sec-lead--light 側で墓黒に固定されている
     （見出し #0D0D0D / 本文 0.8 / ラベル 0.66）。
     これより暗くすると本文・ラベルのコントラストが危うい。
   ※ 写真の隅に残る正方形（--lead-figure-bg）は
     帯の色を参照しているので自動で追従する。 */
.page-recruit .sec-lead {
    --lead-band-ink: var(--color-bg-light);
}

/* ── 1枚目の写真のフォーカス位置 ──
   ※ Join Us（募集メッセージ）の写真ブロックの1枚目（strength-02.webp）だけを狙う。
   ※ ※重要※ 0% center は 4値構文の left 0 center 50% と同値。
     4値構文（エッジ＋距離）は縦長画像などでブラウザ間の解釈ブレを起こすため、
     service.php のイントロ（.service-detail__image）と同じく 2値%構文で書く。
     0% center ＝ 左端・中央。
   ※ 共通の .sec-lead（service など）には影響させないよう .page-recruit スコープにする。 */
.page-recruit .sec-lead__figure .sec-lead__image:first-child {
    object-position: 25% center;
}

/* ── 2枚目の写真のフォーカス位置 ──
   ※ 写真ブロックの2枚目（strength-01.webp）だけを狙う。
   ※ center center で上下左右中央に固定。 */
.page-recruit .sec-lead__figure .sec-lead__image:last-child {
    object-position: center center;
}

/* ================================================================
   募集について ＋ エントリーを囲むブロック
   ※ 2セクションを暗色の1枚の面で囲い、ひとまとまりに見せる。
     トップの .index-dark-block と同じ考え方。
   ※ 各セクション側は背景色を持たない。ここだけが背景を持つ。
   ※ 上の .sec-lead は --light なので、下地が墓黒（#0D0D0D）。
     このブロックも同系の暗色なので、両者の境目は見えにくい。
     境目を付けたいときは --recruit-block-1 を下げて
     上端を薄くする。
   ※ 濃淡を強めたい・弱めたいときは下の4つの変数（アルファ値）を触る。
================================================================ */

/* ── 写真のトリミング基準 ──
   ※ 以前は --01 / --02 / --02-front に対して個別の
     object-position を持たせていたが、写真を単純に
     並べる方式（.sec-lead__image）に変更したので不要になった。
     必要になったら .sec-lead__image に対して直接上書きすること。 */

.recruit-detail-block {
    /* 上は薄めの黒、下に行くほど濃くなり #0D0D0D に沈む（4段階）。
       ※ 段階の持ち方はトップの .index-dark-block と同じ。
         ただし基色はあちらが #1A1A1A、こちらは #0D0D0D。
       ※ ※注意※ アルファの差が 0.95→1 しかないので、
         見た目はほぼ単色の黒になる（上下差は20階調程度）。
         段差をはっきり見せたいときは --recruit-block-1 を
         0.8 前後まで下げる。 */
    --recruit-block-1: 0.95;   /* 上端 */
    --recruit-block-2: 0.975;  /* 33%地点 */
    --recruit-block-3: 0.985;  /* 66%地点 */
    --recruit-block-4: 1;      /* 下端 */

    background: linear-gradient(to bottom,
        rgba(13, 13, 13, var(--recruit-block-1))   0%,
        rgba(13, 13, 13, var(--recruit-block-2))  33%,
        rgba(13, 13, 13, var(--recruit-block-3))  66%,
        rgba(13, 13, 13, var(--recruit-block-4)) 100%);
    color: var(--color-text-inverse);
}

/* ================================================================
   暗背景向けの色反転
   ※ 上のブロックを暗色にしたので、中身の文字・罫線を
     まとめて白系に反転させる。
   ※ 濃淡はサイト共通の階層に揃えてある。
         見出し 1 ／ 本文 0.8 ／ 補足・ラベル 0.66
   ※ 明るい背景に戻すときは、このブロックを丸ごと削るだけでよい。
     （各要素の基本指定は明るい背景前提のまま残してある）
================================================================ */

/* ── セクション見出し（募集について / Join Our Requirements）── */
.recruit-detail-block .recruit-outline__headline-line {
    color: var(--color-text-inverse);
}

/* ラベル装飾（O字ブロック）を白系に戻す。
   ※ ページ既定（.page-recruit .section-head__label ・ 0-2-0）は
     明るい背景前提で暗色なので、ここで上書きする。
   ※ 詳細度 0-2-0。同値だがこちらが後に書かれているので勝つ。 */
.recruit-detail-block .section-head__label {
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

/* 帯アニメの帯も背景に合わせて白抜きにする。
   ※ 共通側の既定は墓黒（--color-primary）なので、
     暗地の上では帯が通っているのが見えない。
   ※ 帯が通り過ぎた後の文字色も白系に戻す必要がある。
     共通側は is-revealed 側にも指定があり、
     is-revealed を含む形で書かないと効かない。 */
.recruit-detail-block .section-head.js-reveal .section-head__label-text::after,
.recruit-detail-block .section-head.js-reveal .section-head__title:not(.js-lines)::after {
    background-color: var(--color-text-inverse);
}

.recruit-detail-block .section-head.js-reveal.is-revealed .section-head__label {
    color: rgba(245, 244, 242, 0.66);
}

.recruit-detail-block .section-head.js-reveal.is-revealed .section-head__title:not(.js-lines) {
    color: var(--color-text-inverse);
}

@media (prefers-reduced-motion: reduce) {
    .recruit-detail-block .section-head.js-reveal .section-head__label {
        color: rgba(245, 244, 242, 0.66);
    }

    .recruit-detail-block .section-head.js-reveal .section-head__title {
        color: var(--color-text-inverse);
    }
}

/* ── 項目（01 / 02 / 03）とテーブルの色 ──
   ※ 反転指定は持たない。項目をカード（オフホワイトの面）に
     したので、中身は明るい背景の上に乗る。
     連番・英字ラベル・見出し・本文・テーブルの罫線と文字色は、
     いずれも基本指定（明るい背景前提）がそのまま正しい。
   ※ 文字色を本文色に戻すのはカード側の役目。
     .recruit-outline__item の color を参照。
     あれが無いと親のブロックから白系の文字色を継いでしまう。
   ※ カードをやめて暗地に直接置く形に戻すときは、
     ここに反転指定を書き戻すこと。必要なのは
         .recruit-outline__item-head の border-bottom-color
         .recruit-outline__num / __en の color（0.66）
         .recruit-outline__ja / __catch の color（白）
         .recruit-outline__text の color（0.8）
         .recruit-table / __row / __head / __data の罫線と文字色
     の5系統。 */

/* ブロック内の2つ目以降は上パディングを落とす。
   ※ .section の上下パディング（768px〜で 8rem）をそのまま重ねると
     境目に 16rem の空白ができて、一続きに見えない。
     前のセクションの下パディングだけを間隔として使う。
   ※ ブロック全体の上下余白は、先頭の上パディングと
     末尾の下パディングがそのまま担うので、他セクションと揃う。 */
.recruit-detail-block .section + .section {
    padding-top: 0;
}

/* ── 見出しの右側に置くイラスト装飾 ──
   ※ トップの事業内容（index.css の .index-service__illust）と
     同じ位置・同じサイズに揃えてある。
     値を変えるときはあちらとセットで見直すこと。

   ※ .section__inner を基準に絶対配置する。
     セクション基準にすると左右パディングの分だけ外側に出るので、
     右端を見出し・項目リストの右端と揃えるために __inner を使う。

   ※ このセクションは .sec-lead と違って右カラムに写真がないので、
     トップと同じくセクションの右上に置ける。
     （.sec-lead は写真ブロックが右上を占めていて置けないため、
       あちらは本文カラム内に入れてある）

   ※ 帯を持たないセクションなので、背景は
     .recruit-detail-block の暗色グラデーション。
     イラストが白系の線画ならそのまま乗るはずだが、
     暗色の線画だと地に沈む。実物を見て
     opacity や filter での調整が必要になるかもしれない。

   ※ 装飾なのでクリックと選択を奪わない。
   ※ 大きさは --requirements-illust-w の1行で決まる。 */
/* ── セクションの地 ──
   ※ 親（.recruit-detail-block）のグラデーションを透かさず、
     ここだけ一段浮かせた面にする。
   ※ 値は --color-bg-raise（#111111）。トップの
     暗色ブロック（.index-dark-block）・新着情報・
     ヘッダーと同じ面の色。
   ※ ※重要※ 下に続くエントリーは背景を持たず、
     親のグラデーション（下端 #0D0D0D）を透かすまま。
     つまりこのセクションの下端に境目が出る。
     地続きに見せたい場合は、この行を消して
     親の --recruit-block-* 側を調整する。 */
.recruit-outline {
    background-color: var(--color-bg-raise);
}

.recruit-outline .section__inner {
    position: relative;
}

.recruit-outline__illust {
    /* 下限 7.5rem = 120px。画面幅 600px 未満でこの値に固定される
       （20vw が 7.5rem を下回るのが 600px）。
       上限 16rem = 256px。画面幅 1280px 以上で固定。
       ※ トップの --service-illust-w と同値。 */
    --requirements-illust-w: clamp(7.5rem, 20vw, 16rem);

    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: var(--requirements-illust-w);
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* 見出しをイラストより前面に出す。
   ※ 英字3行の3行目（Requirements）は長いので右に伸び、
     イラストと重なることがある。そのときは文字側を優先する。
   ※ トップの .index-service__head に z-index: 1 を与えているのと同じ。
   ※ 項目リスト側はイラスト（右上）と重ならないので不要。 */
.recruit-outline__head {
    position: relative;
    z-index: 1;
    /* 中央配置。
       ※ 見出しが REQUIREMENTS の1語になったので、
         左揃えだと右側が大きく空く。
         トップの事業内容（.index-service__head）と同じ、
         中央に置く形に揃えてある。
       ※ 下の英字は .recruit-outline__headline-line が block なので
         これだけで中央に来る。ラベル側は flex なので
         別途 justify-content: center が要る（下の規則）。
       ※ 階段状の字下げ（--headline-indent-*）とは
         併用しないこと。中央揃えに字下げを足すと軸がぶれる。 */
    text-align: center;
}

/* ラベル（日本語「募集について」）を中央に寄せる。
   ※ .section-head__label は flex なので text-align だけでは
     中央に来ない。左の装飾マークごと寄せるので
     justify-content で揃える。
   ※ 共通CTA（.sec-cta__head .section-head__label）と同じ扱い。
   ※ 帯アニメの帯は width: fit-content で内容幅になるので、
     切り取り枠は文字の位置に自動で付いてくる。 */
.recruit-outline__head .section-head__label {
    justify-content: center;
}

/* ================================================================
   募集について（DETAILS）
   応募条件 / 募集要項 / 選考について の3項目を
   1セクションに畳んである。
   ※ 以前は3つの独立セクションで、h2 の見出しが3つ並んで
     間延びしていた。トップの事業内容（.index-service）と同じ
     「1つの見出し＋項目リスト」の構成に変えた。
   ※ 項目の見出し（連番＋英字ラベル＋日本語）の作りは
     service.php の .service-detail__head と揃えてある。
   ※ 3項目＋写真1枚をカードとして並べてある。
     テキストの3枚はオフホワイトの面、写真の1枚は写真そのもの。
     暗いブロックの上に明るい面を浮かせる型で、
     共通CTAの .cta-box・下のエントリー箱（.recruit-entry__body）と
     同じ語彙。
   ※ 並びは 1024px 未満が1カラム、1024px以上が2×2。
         ［写真］［01 応募条件］
         ［02 募集要項］［03 選考について］
     HTMLの並びと見た目の並びは一致している。
     4枚とも自動配置なので、grid-column / grid-row の
     明示指定は持たない。
     ※ 以前は HTML を 01 → 写真 の順で置き、CSS側の
       grid-column で左右だけを入れ替えていた。
       構造と見た目を一致させる方針に変えて廃止してある。
   ※ 順番を変えたいときは recruit.php の li の並びを直す。
     項目を増やしたときも、そのまま左上から順に埋まっていく。
   ※ 項目間の間隔はカード同士の隙間なので、
     セクションを畳んでいた頃（4rem / 5.5rem）より詰めてある。
================================================================ */

.recruit-outline__list {
    display: grid;
    gap: var(--spacing-sm);
}

@media (min-width: 768px) {
    .recruit-outline__list {
        gap: var(--spacing-md);
    }
}

/* 2×2 に並べるのは 1024px から。
   ※ この幅ではカード1枚の中身が 350px 前後まで落ちる。
     共通の .recruit-table は 768px 以上で2列（見出し｜内容）に
     なるが、見出し列が 11rem を占めるのでそのままでは
     内容側が潰れる。下の「カード内のテーブルは縦積み」で
     そちらを縦に戻してある。セットで扱うこと。 */
@media (min-width: 1024px) {
    .recruit-outline__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── カード本体 ──
   ※ ※重要※ color を本文色に戻すこと。
     親の .recruit-detail-block が白系の文字色を持つので、
     この1行がないと明るい面の上で白文字になり中身が消える。
     .recruit-entry__body と同じ理由。
   ※ 角は落とさない（サイト共通の方針）。
   ※ 高さはグリッドの stretch に任せる。
     同じ行に並ぶカードの下端が揃う。
   ※ 登場アニメはこの li に .js-mask を付けて実現する
     （HTML側を参照）。帯がカード全体を通過し、
     その後を追うように中身が現れる。
     ※ .js-mask は position: relative と overflow: hidden を
       自分で持つので、ここに書く必要はない。
     ※ ※重要※ .js-mask は「直下の子」を opacity で隠す。
       この li の直下は __item-head / __body / __foot
       （写真カードは img 1枚）なので、
       包み直さずにそのまま成立する。
       直下に要素を追加するとそれもマスクの対象になる。 */
.recruit-outline__item {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-sm);
    /* ※ カードの面は --black-2（#080808）。
         ブロックの地（#111111 系）より一段沈むので、カードが面として立つ。
       ※ 実値のベタ書きはしない。黒はスケール（common.css の :root）経由で持つ。 */
    background-color: var(--black-2);
    /* ※ カードの輪郭。白15%（--color-border）。純黒の面に枠線を付けて引き締める。 */
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

@media (min-width: 768px) {
    .recruit-outline__item {
        padding: var(--spacing-md);
    }
}

/* ※ 1024px以上は2×2になりカードが半分幅に落ちるので、
     余白を一段詰めて内容幅を稼ぐ。
   ※ 1200px以上ではコンテナが広がるので 2rem に戻す。 */
@media (min-width: 1024px) {
    .recruit-outline__item {
        padding: var(--spacing-sm);
    }
}

@media (min-width: 1200px) {
    .recruit-outline__item {
        padding: var(--spacing-md);
    }
}

/* ※ 帯の抜ける向きは全幅で共通の .js-mask のまま（左→右）。
     1カラムの縦並びのときも横に抜ける。
   ※ 以前は 1023px 以下だけ scaleY（上→下、recruitMaskSweepY）に
     差し替えていたが、向きを揃える方針に変えて廃止した。
     トップの強みカードと同じ挙動になる。
   ※ 縦に戻したいときは、.recruit-outline__item::after に
     transform: scaleY(0) / transform-origin: top を与え、
     .is-revealed::after の animation-name を縦用の
     @keyframes に差し替える。 */

/* ── カードの中の文字色・罫線 ──
   ※ 値は基本指定（明るい背景前提）と同じ。
     同じ値をもう一度書いているのは、このセクション全体が
     .recruit-detail-block（白系の文字色を持つ暗いブロック）の
     中にあるため。
     ※重要※ 継承と「上書きが無いこと」に頼ると、あとで
     .recruit-detail-block 側に色指定を1行足しただけで
     カードの中身が白文字になって消える。
     カード側で閉じておけばその事故が起きない。
   ※ 詳細度 0-2-0。基本指定（0-1-0）より強いので、
     書く位置に関係なく勝つ。 */
.recruit-outline__item .recruit-outline__num,
.recruit-outline__item .recruit-outline__en {
    color: var(--color-text-light);
}

.recruit-outline__item .recruit-outline__ja,
.recruit-outline__item .recruit-outline__catch {
    color: var(--color-title);
}

.recruit-outline__item .recruit-outline__text {
    color: var(--color-text);
}

.recruit-outline__item .recruit-outline__item-head {
    border-bottom-color: var(--color-border);
}

.recruit-outline__item .recruit-table,
.recruit-outline__item .recruit-table__row {
    border-color: var(--color-border);
}

.recruit-outline__item .recruit-table__head {
    color: var(--color-title);
}

.recruit-outline__item .recruit-table__data {
    color: var(--color-text);
}

/* ── カード内のテーブルは常に縦積み ──
   ※ 共通の .recruit-table は 768px 以上で table-cell になり、
     見出し列（min-width: 11rem）と内容列の2列になる。
     だが 1024px 以上でカードが半分幅になると、
     内容列に 200px 前後しか残らず1〜2文字ずつ折り返される。
   ※ そこでカードの中だけ、見出しの下に内容を置く縦積みに固定する
     （ベース（〜767px）の見た目と同じ）。
     スペックをカードに収める形としても自然。
   ※ 2列に戻したいときはこのブロックを削り、
     .recruit-table__head の min-width と
     上の2×2のブレークポイントをセットで見直すこと。
   ※ padding を個別に書き戻しているのは、768px 以上の
     共通指定が padding: 1.5rem 1rem のショートハンドで
     上書きしてくるため。 */
.recruit-outline__item .recruit-table__head,
.recruit-outline__item .recruit-table__data {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
    border-right: none;
}

.recruit-outline__item .recruit-table__head {
    padding: 1rem 0 0.375rem;
}

.recruit-outline__item .recruit-table__data {
    padding: 0 0 1rem;
}

/* ── 写真のマス（01の左）──
   ※ カードは写真そのもの。余白も地色も持たない
     （施工実績の .works-list__figure と同じ考え方）。
   ※ 左に置くための grid-column / grid-row は上の
     2×2 のブロックにまとめてある。
   ※ 中身を絶対配置にしてあるのは、高さの決まり方が
     幅によって変わるため。
         〜1023px：aspect-ratio（4 / 3）で自分の高さを持つ
         1024px〜：隣の01に合わせてグリッドが伸ばす
     どちらの場合も inset: 0 なら写真がマスを埋め尽くす。
     height: 100% だけだと、親の高さがグリッド由来のときに
     解決されない環境がある。
   ※ 背景色は遅延読み込みの待ち時間に見える色。
   ※ グレースケール量は共通の写真用変数を参照する
     （定義は common.css の :root）。
   ※ リンクではないのでホバー演出は付けない。 */
.recruit-outline__item--photo {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    background-color: var(--color-primary);
    /* ── 写真カードの比率（ベース、576px未満）──
       ※ 576px未満  16 / 11（縦を少し高く）
         576px以上  16 / 10（下の 576px ブロック）
         1024px以上 auto（隣の01に高さを揃える）
       ※ news 詳細の画像（.news-detail__figure img）と同じ考え方。 */
    aspect-ratio: 16 / 11;
}

@media (min-width: 576px) {
    .recruit-outline__item--photo {
        aspect-ratio: 16 / 10;
    }
}

@media (min-width: 1024px) {
    .recruit-outline__item--photo {
        /* 高さは隣の01に揃えるので、自分の比率は持たない。
           ※ 比率が残っているとそちらが優先され、
             01 と下端が揃わなくなる。 */
        aspect-ratio: auto;
    }
}

.recruit-outline__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(var(--photo-grayscale));
}

/* ── セクション見出し：日本語ラベル＋英字3行のL字型 ──
   トップの事業内容（index.css の .index-service__headline）と同じ形。
   短い語→短い語→長めの語 と並べ、行頭を揃えたまま
   行尾を階段状に伸ばしてL字を作る。

   ※ 共通の .section-head--swap は index.css にあるので使わない。
     ここでは .section-head をラッパーとして使い、
     ラベルの書体と大見出しの形をここで持つ。
     帯アニメ・装飾マークは共通側のものがそのまま効く。

   ※ 行送りの登場は common.css の .js-lines。
     各行を .js-lines__line で包む必要がある。

   ※ 大きさは --outline-headline-size の1行で決まる。
================================================================ */

/* ラベル（上段・日本語小）。
   ※ 共通側の .section-head は下余白を持つが、ここでは
     大見出しとの間隔を自分で持つので打ち消す。 */
.recruit-outline__head-top {
    margin-bottom: var(--spacing-xs);
}

/* ※ 日本語なので uppercase を戻す（共通側でかかっている）。
   ※ line-height: 1 だと帯アニメの切り取り枠で濁点やハネが欠けるので、
     padding で上下に余裕を取り、同じ分を負のマージンで相殺する。
     common.css の .js-lines__line と同じ考え方。 */
.recruit-outline__head-top .section-head__label {
    /* 装飾（O字ブロック）の一辺。
       ※ ページ既定の --mark-size（10px）だと、
         隣の日本語（15〜18px）に対して小さく見えるので、
         このラベルだけ一段大きく取る。
       ※ トップの事業内容（.index-service__head-top）と同値。
       ※ 整数pxで持つこと。端数にするとマスがにじむ。
         0.75rem = 12px。隔間（2px）を引いてマス 5px で割り切れる。
       ※ マスの大きさ（--recruit-cell）はページ既定で
         --mark-size を参照しているので、ここで計算し直す。 */
    --label-mark: 0.75rem;
    --recruit-cell: calc((var(--label-mark) - var(--recruit-gap)) / 2);

    font-family: var(--font-heading);
    font-weight: 600;
    /* ※ トップの事業内容（.index-service__head-top .section-head__label）と同値。
         15〜18px。片方を変えるときはもう一方もセットで見直すこと。 */
    font-size: clamp(0.9375rem, 3.4vw, 1.125rem);
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: none;
}

.recruit-outline__head-top .section-head__label-text {
    padding-block: 0.24em;
    margin-block: -0.24em;
}

/* ── ラベル左右の装飾：O字ブロック（2×2）──
   ※ 見出しが中央揃えなので、左だけに装飾があると
     文字の中心と装飾込みの中心がずれる。
     右（::after）にも同じ形を置いて左右対称にする。
     トップの事業内容・共通CTA・施工実績と同じ扱い。
   ※ ::after には共通側の content もサイズ指定も無いので、
     ここで一式与える。
   ※ 形はページ既定（.page-recruit .section-head__label::before）と
     同じ。左上と右下が濃、残り2マスが淡。
   ※ 共通側はこの装飾を scale(0) → scale(1) で弾けさせる。
     ::before / ::after の両方が対象なので、ここで
     transform を上書きしないこと。 */
.recruit-outline__head-top .section-head__label::before,
.recruit-outline__head-top .section-head__label::after {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink) 0 0),           /* 左上：濃 */
        linear-gradient(var(--mark-ink-sub) 0 0),       /* 右上：淡 */
        linear-gradient(var(--mark-ink-sub) 0 0),       /* 左下：淡 */
        linear-gradient(var(--mark-ink) 0 0);           /* 右下：濃 */
    background-size: var(--recruit-cell) var(--recruit-cell);
    background-repeat: no-repeat;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

/* 大見出し（下段・英字3行）の入れ物。
   ※ .js-lines はここに付ける。p 側は display: contents で
     レイアウトから外しているため、p に付けると
     ボックスを持たず監視できない。 */
.recruit-outline__headline-wrap {
    --outline-headline-size: clamp(2.25rem, 12vw, 3.5rem);

    margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
    .recruit-outline__headline-wrap {
        --outline-headline-size: clamp(3.5rem, 7vw, 5.5rem);

        margin-bottom: var(--spacing-xl);
    }
}

/* ※ display: contents で p をレイアウトから外す。
     こうすると各行（.js-lines__line）が直接 __headline-wrap の
     子として並び、p の行高が間に入らない。 */
.recruit-outline__headline {
    display: contents;
}

.recruit-outline__headline-line {
    font-family: var(--font-en-display);
    font-size: var(--outline-headline-size);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: var(--color-title);
}

/* ── L字型の作り方 ──
   行頭は3行とも揃えたまま。語の長さが
     Join（短）→ Our（短）→ Requirements（長）
   と増えるので、行尾が自然に階段状に伸びてL字になる。
   ※ 3行目だけ字間を詰める。長い語なので、同じ字間だと
     狭い画面で折り返してL字が崩れる。
   ※ 語を差し替えるときは「短・短・長」の順を保つこと。 */
.recruit-outline__headline-line--3 {
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ── 項目見出し：連番（左）＋英字・日本語（右） ──
   ※ 下に線を引いて、見出しと中身を分ける。
   ※ セクション見出し（.recruit-outline__head）と名前が
     紛らわしいので __item-head としてある。 */
.recruit-outline__item-head {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    /* ※ 下線は news ページと同じ「左が真っ白・右が薄い」2色ライン。
         左：白（--color-text-inverse）・短く・太く（2px）/ 右：白15%（--color-border）・全幅・細く（1px）。
       ※ border-bottom では2色に分けられないので background の2レイヤーで描く（.news-detail__title と同じ手法）。
       ※ 短い線の長さは --news-line-accent（common.css の :root）。 */
    background-image:
        linear-gradient(var(--color-text-inverse) 0 0),
        linear-gradient(var(--color-border) 0 0);
    background-size:
        var(--news-line-accent) 2px,
        100% 1px;
    background-repeat: no-repeat;
    background-position:
        left bottom,
        left bottom;
}

@media (min-width: 768px) {
    .recruit-outline__item-head {
        gap: var(--spacing-md);
    }
}

.recruit-outline__num {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .recruit-outline__num {
        font-size: 2.75rem;
    }
}

/* ── 項目の英字ラベル（Requirements / Application / Selection）──
   左にこのページ固有の装飾を置く。
   形＝O字ブロック（2×2、左上と右下だけ濃い）。
   ヘッダー・ドロワー・トップの Recruit と同じマーク。
   ※ service.php の .service-detail__label と同じ考え方。
     あちらは三角2つ（Service のマーク）を置いている。
   ※ この要素は .section-head__label ではなく素の p なので、
     flex と gap をここで与える。
   ※ カードは明るい面（--color-bg-light）なので、
     マークの色は暗色系。ページ既定
     （.page-recruit .section-head__label）と同じ値。
   ※ サイズ調整は --recruit-cell / --recruit-gap を触る。
     外形 = マス2つ + 隔す1つ（10px - 2px → マス4px）。
     マスが端数にならない値を保つこと（にじみ防止）。 */
.recruit-outline__en {
    --recruit-gap: 0.125rem;
    --recruit-cell: calc((var(--mark-size) - var(--recruit-gap)) / 2);
    --label-mark: var(--mark-size);
    /* ※ 暗転前はカードが明るい面（--color-bg-light）だったので
         暗色系のマークだった。--color-bg-light が #1F1F1F に
         なったのでカードも暗い面になり、マークが消える。 */
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);

    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 0.125rem;
}

/* ※ 色は currentColor ではなく変数で持つ。
     サイト共通の方針（帯アニメ中に親が
     color: transparent になる箱所と揃えるため）。
   ※ マスごとに色を振り分けるので、背景グラデーションを
     4枚重ねて四隅に配置する（要素を増やさない）。 */
.recruit-outline__en::before {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink) 0 0),           /* 左上：濃 */
        linear-gradient(var(--mark-ink-sub) 0 0),       /* 右上：淡 */
        linear-gradient(var(--mark-ink-sub) 0 0),       /* 左下：淡 */
        linear-gradient(var(--mark-ink) 0 0);           /* 右下：濃 */
    background-size: var(--recruit-cell) var(--recruit-cell);
    background-repeat: no-repeat;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
}

.recruit-outline__ja {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    letter-spacing: 0.1em;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .recruit-outline__ja {
        font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    }
}

/* 01 の小見出し（「20代活躍中！」） */
.recruit-outline__catch {
    font-family: var(--font-heading);
    font-size: clamp(1.0625rem, 4.5vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-title);
    margin-bottom: var(--spacing-xs);
}

.recruit-outline__text {
    margin-bottom: var(--spacing-sm);
}

.recruit-outline__text:last-child {
    margin-bottom: 0;
}

/* ================================================================
   募集要項 / 選考について（共通テーブル）
   ※ .recruit-outline__item の 02 / 03 の中身で使う。
================================================================ */

.recruit-table {
    border-top: 1px solid var(--color-border);
}

.recruit-table__row {
    border-bottom: 1px solid var(--color-border);
}

.recruit-table__head,
.recruit-table__data {
    display: block;
    width: 100%;
    text-align: left;
    padding-block: 1rem;
}

@media (min-width: 768px) {
    .recruit-table__head,
    .recruit-table__data {
        display: table-cell;
        padding: 1.5rem 1rem;
        vertical-align: top;
    }
}

.recruit-table__head {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-title);
    padding-bottom: 0.375rem;
}

/* ※ このテーブルは項目リスト（.recruit-outline__item）の中に入るので、
     ページ幅ほどの余裕がない。width は table-layout: auto では
     あくまで目安なので、14rem では確保されずに見出し列が潰され、
     1文字ずつ折り返されて縦書きのようになっていた。
   ※ width: 1% は「内容に必要な最小幅」の意味になる。
     残り幅は td 側が取る。
   ※ 一番長い見出しは「合否通知について」（8文字）。
     min-width はそれが収まる下限に合わせてある。
   ※ nowrap と keep-all で折り返し自体を禁じる。 */
@media (min-width: 768px) {
    .recruit-table__head {
        width: 1%;
        min-width: 11rem;
        white-space: nowrap;
        word-break: keep-all;
        padding-left: 0;
        border-right: 1px solid var(--color-border);
    }
}

.recruit-table__data {
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--color-text);
    padding-top: 0;
}

@media (min-width: 768px) {
    .recruit-table__data {
        padding-top: 1.5rem;
        padding-right: 0;
    }
}

/* ================================================================
   エントリー
   ※ 一度は 03「選考について」カードの中に畳んでいたが、
     独立したセクションに戻してある。
   ※ ※重要※ HTML 側で .recruit-detail-block（暗色）の外に
     置いてある。背景は共通の .section--light（オフホワイト）。
     暗色ブロックの中に戻す場合は、見出し・本文・ボタンを
     すべて白系に戻す必要がある（以前の値）。
         .recruit-entry__note の color: rgba(245, 244, 242, 0.8)
         ボタンに .btn--outline
   ※ 明るい面なので、見出し（.section-head）の色は
     共通の既定のままで正しい。反転指定は不要。
   ※ 電話番号はここでも出す。すぐ下の共通CTA
     （includes/contact.php）と重複するが、
     採用ページとして導線を強めるための意図的な重複。
================================================================ */

/* ── 余白は __body だけが持つ ──
   ※ Philosophy（.index-about）と同じ方式。
     セクション側の padding を外し、本文ブロックに持たせることで、
     左のイラストを画面の左端まで伸ばせる。
   ※ ※重要※ 下の3つはセットで初めて成立する。
       1. .recruit-entry の padding: 0
       2. .recruit-entry .section__inner の max-width: none
       3. .recruit-entry__body の padding
     どれか1つでも戻すと、イラストの位置と本文の余白がずれる。
   ※ セクションの高さは __body の padding で決まる。
     イラストがそれより高ければイラスト側が高さを決める。
   ※ 背景（.section--light）は padding を外しても
     グリッド全体を覚うので、オフホワイトの面はこれまでどおり。 */
/* ── セクションの地（上が薄く下が濃い勾配）──
   トップの採用（index.css の .index-recruit__overlay）を
   上下反転させた形。
   ※ 向こうは背景写真の上に敷く半透明のオーバーレイで、
     上端 1 → 33% 0.6 → 66% 0.5 → 下端 0.4 と
     下へ行くほど薄くなる。
     こちらは写真が無いので不透明の色で作り、
     濃淡の向きを逆（上が薄く下が濃い）にしてある。
   ※ 上端は上の「募集について」（.recruit-outline・#111111）と
     同値なので、境目が出ずに続く。
   ※ 下端はページ背景（--color-bg ＝ #0D0D0D）と同値。
     次の共通CTA へも継ぎ目なくつながる。
   ※ ※重要※ 親（.recruit-detail-block）もグラデーションを
     持っているが、ここで不透明に塗るので透けない。
     親側の --recruit-block-* を触ってもこのセクションには
     反映されない。
   ※ 濃さを変えるときは下の2つの変数だけを触る。
     中間の2点（33% / 66%）は上下端の間を
     トップと同じ配分で割ってある。 */
.recruit-entry {
    /* オーバーレイの濃さ（上が薄く下が濃い）。
       ※ トップの採用（.index-recruit__overlay）を
         上下反転させた配分。
         向こうは 1 / 0.6 / 0.5 / 0.4（上が濃い）。
       ※ 濃さを変えるときはこの4つのアルファ値だけを触る。 */
    --entry-overlay-1: 0.4;
    /* 上端：最も薄い（写真が一番見える） */
    --entry-overlay-2: 0.5;
    /* 33%地点 */
    --entry-overlay-3: 0.6;
    /* 66%地点 */
    --entry-overlay-4: 1;
    /* 下端：不透明。次の共通CTA（#0D0D0D）へ継ぎ目なくつなぐ */

    padding-block: var(--spacing-xxl);
    padding-inline: 0;
    /* ※ 背景写真とオーバーレイを background の
         レイヤー2枚で重ねる。要素を増やさずに済む。
         ※ ※重要※ linear-gradient を先に書くこと。
           background は先頭が手前に描かれる。
           逆にすると写真がオーバーレイの上に乗る。
       ※ トップの採用は写真とオーバーレイを別要素で
         持っているが、こちらは HTML を触らずに
         済ませるため background で重ねてある。
       ※ 写真を差し替えるときは url() の1行だけを直す。
       ※ グレースケールはかけていない。
         採用（.index-recruit）やページヒーローと揃えるなら
         filter: grayscale(var(--photo-grayscale-bg)) を足すが、
         background には filter がかけられないので
         その場合は疑似要素に分ける必要がある。 */
    background-image:
        linear-gradient(to bottom,
            rgba(13, 13, 13, var(--entry-overlay-1)) 0%,
            rgba(13, 13, 13, var(--entry-overlay-2)) 33%,
            rgba(13, 13, 13, var(--entry-overlay-3)) 66%,
            rgba(13, 13, 13, var(--entry-overlay-4)) 98%,
            rgba(13, 13, 13, var(--entry-overlay-4)) 100%),
        url('../images/company.webp');
    background-size: auto, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    /* ※ ※重要※ 下端の地色を background-color でも持つ。
         オーバーレイ（半透明のグラデーション）と
         写真はどちらも background のレイヤーなので、
         ブラウザの小数点丸めで下端に 1px の隙が出ると
         そこだけ写真が細く視いて白っぽい線に見える。
         下の共通CTA（.page-bottom）との境目で目立つ。
       ※ 地色を敷いておけば、隙が出ても同色なので見えない。
       ※ あわせて上のグラデーションは 98% で不透明に
         到達させてある（下端付近を平らにして、
         丸めの影響を受ける幅をなくす）。 */
    background-color: rgba(13, 13, 13, var(--entry-overlay-4));
}

@media (min-width: 768px) {
    .recruit-entry {
        padding-block: var(--spacing-3xl);
    }
}

.recruit-entry .section__inner {
    /* ※ 外側の要素。左右パディングを持つ（トップの .index-recruit .section__inner と同じ役割）。
         中央配置は内側の .recruit-entry__body が max-width ＋ margin-inline: auto で持つ。
       ※ 上下パディングはセクション本体（.recruit-entry）が持つので、ここは左右だけ。 */
    max-width: none;
    padding-inline: var(--section-pad-x);
}

/* ※ ※廃止※ 2カラムのグリッドと、左のイラスト（__figure /
     __illust）・見出し代わりのマップ（__map）は削除した。
     どちらの画像も使わない方針になったため。
   ※ 戻すときは recruit.php を .recruit-entry__grid で
     包み直し、以下を復活させる。
         .recruit-entry__grid   … 1fr 1fr の2カラム（768px以上）
         .recruit-entry__figure … --entry-illust-w: clamp(11rem, 40vw, 20rem)
         .recruit-entry__illust … 幅と pointer-events
         .recruit-entry__map    … --entry-map-w: clamp(9rem, 30vw, 14rem) */

/* ── 中身（ボタンだけ）──
   ※ ※重要※ セクションの余白はこのブロックだけが持つ。
     上の .recruit-entry の padding: 0 とセット。
     上下の値は共通の .section（xxl / 768px以上は 3xl）に揃えてある。
     他セクションと上下の間隔を揃えるため、
     .section 側を変えたときはここも合わせること。
   ※ 左揃え。他セクションの本文と左端が揃う。
     ※ 以前はベース中央揃え、768px以上で左揃えと
       切り替えていたが、全幅で左揃えに統一した。
   ※ 見出し（.section-head）は置かない。
     このページの h2 は上の2セクションが持つ。 */
.recruit-entry__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    /* ※ 内側の要素。max-width ＋ margin-inline: auto で中央配置する
         （トップの .index-recruit__head と同じ役割）。
       ※ 最大幅は段階的に上げる（contact のフォーム幅と同じ考え方）。
           ベース（〜767px）  576px
           768px以上       768px
           1024px以上      1280px
         値はこの3ヶ所（ベース＋768 / 1024 のクエリ）で持つ。
       ※ 上下パディングはセクション本体（.recruit-entry）が持つので、ここでは padding を持たない。
       ※ 左右パディングは外側（.recruit-entry .section__inner）が持つ。
       ※ 中身は左寄せ（align-items: flex-start）。タイトル・ボタンは左端、
         ウォーターマークだけ右端（align-self: flex-end）に振る。 */
    max-width: 576px;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .recruit-entry__body {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .recruit-entry__body {
        max-width: 1280px;
    }
}

/* ── セクション見出し（--swap：日本語ラベル＋英字大見出し）──
   ※ 他ページ（company / news / works）の --swap 見出しと揃える。
   ※ このセクションは HTML に .section--light を持つが、背景を暗い勾配＋写真で
     上書きしているので、共通の .section--dark の白系化は効かない。
     見出しの文字色・帯はここで白系にする。
   ※ 英字大見出しの大きさは他ページと同値（company.css の
     .page-company .section-head__title を参照）。
   ※ 本文（ボタン）と左端を揃えるので中央寄せにはしない（左揃えのまま）。 */
.recruit-entry__head {
    margin-bottom: 2.5rem;
}

.recruit-entry__head .section-head__title {
    font-size: clamp(2rem, 7vw, 2.625rem);
    /* ※ 暗背景なので英字大見出しは白（--color-title）。 */
    color: var(--color-title);
}

@media (min-width: 1024px) {
    .recruit-entry__head .section-head__title {
        font-size: clamp(2.625rem, 4.2vw, 3.75rem);
    }
}

/* 日本語ラベル（小）の文字色を白系にする。
   ※ 装飾マークの色はページ既定（.page-recruit .section-head__label）が
     すでに白系（--mark-ink / --mark-ink-sub）なので、ここでは
     ラベルの文字色だけ白系に寄せる。 */
.recruit-entry__head .section-head__label {
    color: rgba(245, 244, 242, 0.66);
}

/* 帯アニメの帯を白抜きにする（暗地の上で帯が見えるように）。
   ※ .recruit-detail-block 内の見出しで行っているのと同じ対応。 */
.recruit-entry__head.js-reveal .section-head__label-text::after,
.recruit-entry__head.js-reveal .section-head__title::after {
    background-color: var(--color-text-inverse);
}

/* ── 案内文＋ボタンを囲む箱 ──
   ※ 枠線だけ（背景写真が透ける・軽め）。背景は持たない。
   ※ 左寄せ・内容幅（max-width で控えめに）。__body の左端に揃う。
   ※ ボタンの L字装飾（.btn--frame が左右に 0.5rem 飛び出す）が枠線に
     当たらないよう、左右のパディングはその飛び出し分より広く取る。
   ※ 角は落とさない（サイト共通の方針）。 */
.recruit-entry__box {
    max-width: 30rem;
    /* ※ ベース（576px未満）は margin-inline: auto で中央配置。
         576px以上は下のブロックで 0 に戻して左寄せ（__body の左端に揃う）。 */
    margin-inline: auto;
    /* ※ ベース（576px未満）  上下 2rem・左右 1.5rem
         576px以上       全方向 2rem（下の 576px ブロック）
       ※ 2rem = --spacing-md、1.5rem = --spacing-sm。 */
    padding: var(--spacing-md) var(--spacing-sm);
    border: 1px solid var(--color-border);
}

@media (min-width: 576px) {
    .recruit-entry__box {
        margin-inline: 0;
        padding: var(--spacing-md);
    }
}

/* ── 箱の中の案内文 ──
   ※ ボタン2つの導線を一言で案内する本文。
   ※ 暗背景なので白系（本文より少し落とした白）。
   ※ ボタン群との間隔は margin-bottom で取る（幅は箱が持つ）。 */
.recruit-entry__lead {
    margin-bottom: var(--spacing-md);
    font-size: 0.9375rem;
    line-height: 1.9;
    color: rgba(245, 244, 242, 0.8);
}

@media (min-width: 768px) {
    .recruit-entry__lead {
        font-size: 1rem;
    }
}

/* ── 左カラム：イラスト ──
   ※ entry-illust.webp は未配置。ファイルを置けば表示される。
     未配置の間はこのカラムが空になるだけで、
     右カラムの位置は変わらない。
   ※ 大きさは --entry-illust-w の1行で決まる。
   ※ 装飾なのでクリックと選択を奪わない。 */
/* ── 右カラム：マップイラスト＋注記＋ボタン ──
   ※ ※重要※ セクションの余白はこのブロックだけが持つ。
     上の .recruit-entry の padding: 0 とセット。
     上下の値は共通の .section（xxl / 768px以上は 3xl）に揃えてある。
     他セクションと上下の間隔を揃えるため、
     .section 側を変えたときはここも合わせること。
   ※ ベースは中央揃え、768px以上は左揃え。
     2カラムになったときは右カラムの左端で
     見出し・注記・ボタンが揃う。
   ※ 768px以上の左は 0。グリッドの溝（gap）が分け目になる。
   ※ 見出し（.section-head）は置かない。代わりに
     マップのイラスト（.recruit-entry__map）を立てている。 */
/* ── 見出しの代わりに置くマップイラスト ──
   ※ kyusyu-map-illust.webp は未配置。ファイルを置けば表示される。
   ※ 大きさは --entry-map-w の1行で決まる。
     左カラムのイラスト（--entry-illust-w）より小さく取る。
     主役は左、こちらは見出し代わりの小さめの引き。
   ※ 下のボタンとの間隔はここの margin-bottom で取る。
     ※ 以前は間に注記（.recruit-entry__note）があり、
       そちらの下余白がボタンとの間隔を担っていた。
       注記を削ったのでここで取る。
   ※ 装飾なのでクリックと選択を奪わない。 */
/* ── ボタン2つの並び ──
   ※ 幅によらず常に縦並び。
     ※ 以前は 768px以上で2列にしていたが、
       右カラムがセクションの半分幅なので縦に揃えてある。
   ※ 幅の上限はボタン側（.recruit-entry__button）が持つので、
     ここでは max-width を持たない。 */
.recruit-entry__actions {
    display: grid;
    /* ※ ボタン（width: 100% ＋ max-width: 20rem）を箱の中で左右中央に寄せる。 */
    justify-items: center;
    /* ※ .btn--frame はL字を --frame-offset（0.5rem）だけ
         外側に飛び出させる。ボタン同士の間隔を
         狭くすると、上下のL字が重なる。
         飛び出し分（上下で 1rem）を見込んで広げてある。
       ※ 以前は --spacing-xs（0.75rem）。 */
    gap: var(--spacing-md);
    width: 100%;
    /* ※ 左右パディングは 0。
         以前は .btn--frame のL字が左右に 0.5rem 飛び出す分を
         逃がすため padding-inline: 0.5rem を持っていたが、外した。 */
    padding-inline: 0;
}

/* ── ボタン本体 ──
   見た目（地・枠・文字色）は共通の .btn に任せる。
   墨黒の塗りなので、オフホワイトの面の上で十分に立つ。
   ※ ※重要※ ここで背景色や文字色を書かないこと。
     recruit.css は common.css の後に読み込まれるので、
     書くと共通側の指定を潰す。
   ※ ここで持つのは幅と余白だけ。
   ※ 左右の padding は .btn の 2rem から落とす。
     768px以上の2列で電話番号が窄くならないようにする。 */
.recruit-entry__button {
    width: 100%;
    max-width: 20rem;
    gap: 0.625rem;
    padding-inline: 1.25rem;
}

/* ── ボタンの下の大きな英字（ウォーターマーク）──
   ※ 見出しではなく装飾。HTML 側で aria-hidden を付けてある。
   ※ 書体はトップの英字大見出しと同じ --font-en-display（Orbitron）。
   ※ 大きさは --entry-watermark-size の1行で決まる。
     他セクションの英字見出し（32〜60px）より大きく取る。
     装飾なので見出しと絛らわず、面の一部として見える大きさ。
   ※ 濃さは白 12%。背景写真の上に乗るので、
     上げすぎるとボタンと競う。
     ※ 濃さを変えるときはこの1行だけを触る。
   ※ line-height: 1 で上下の余白を落とす。
     大きい文字なので、行高が残るとボタンとの間が開きすぎる。
   ※ クリックと選択を奪わない。大きいので、
     残すとボタン周辺の操作の邪魔になる。
   ※ 上のボタンとの間隔は margin-top で取る。 */
.recruit-entry__watermark {
    /* ※ .recruit-entry__body（flex・align-items: flex-start）の中に置くので、
         align-self: flex-end でこの要素だけ __body の右端に寄せる。
       ※ さらに margin-right のネガティブマージンで、__body の右端から
         --section-pad-x 分だけ外（.section__inner の左右パディング領域）に飛び出す。 */
    align-self: flex-end;
    margin-top: var(--spacing-md);
    margin-right: calc(var(--section-pad-x) * -1);
    --entry-watermark-size: clamp(3.5rem, 16vw, 6rem);
    font-family: var(--font-en-display);
    /* ※ サイズはエントリー独自の控えめな値。--entry-watermark-size の1行で決まる
         （ベースは上の行、768px以上は下のメディアクエリで上書き）。 */
    font-size: var(--entry-watermark-size);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: right;
    /* ※ 色だけはエントリーの控えめな白（白12%）を保つ。
         濃さを変えるときはこの1行。 */
    color: rgba(245, 244, 242, 0.12);
    pointer-events: none;
    user-select: none;
}

@media (min-width: 768px) {
    .recruit-entry__watermark {
        --entry-watermark-size: clamp(6rem, 12vw, 10rem);
    }
}

/* ── ボタン左のアイコン ──
   ※ 画像は共通CTA（.cta-box__icon-img）と同じもの。
     あちらは 2.5rem だが、ボタンの中なので小さく取る。
   ※ ※重要※ 素材は黒い線画なので、既定で白に反転させる。
     ボタンの地が墨黒なため。
     brightness(0) で一度真っ黒にしてから invert(1) で白にする。
     フッターのロゴ（.footer__logo-img）と同じ手法。
     ※ この1行を外すと、黒地に黒でアイコンが消える。
     ※ 白いアイコン画像が支給されたら、src を差し替えて
       filter を外す方がよい。
   ※ .btn はホバーで地が抜けるので、アイコンも黒に戻す。 */
.recruit-entry__button-icon {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* ※ ※重要※ 切り替えのタイミングを文字色と揃える。
         .btn--frame はホバーで
             ① L字が伸びて枠に閉じる（--frame-dur-line）
             ② 面が左→右へ塗られる（--frame-dur-fill）
         と進むので、文字色は塗りの真ん中で切り替わる。
         共通側と同じ式を使う。
       ※ 遅延を入れないと、面が塗られる前に
         アイコンだけが黒くなり、暗い地に黒で消える。
       ※ 解除時は共通側の逆順（面が先に引く）に合わせて、
         基本状態側は遅延を短くする。 */
    transition: filter 0s linear calc(var(--frame-dur-fill) / 2);
}

.recruit-entry__button:is(:hover, :active) .recruit-entry__button-icon {
    filter: none;
    transition: filter 0s linear calc(var(--frame-dur-line) + var(--frame-dur-fill) / 2);
}

@media (prefers-reduced-motion: reduce) {
    .recruit-entry__button-icon {
        transition: none;
    }
}