@charset 'utf-8';

/* =============================================================
   採用情報（/recruit/）
   design : PC 1440px（SP デザインなし。PC の値を基準に組み立てている）

   - page-recruit.php   .p-recruit
   - 本文は ACF（inc/acf-recruit.php）
   - 「仕事を知る」の 4 事業はカスタム投稿 business から取得

   ページ全体の地色は青。その上に薄いグレーの帯を敷いてセクションを区切る。
   帯と写真は装飾なので絶対配置にして、文章の流れを崩さないようにしている。
   ============================================================= */
/* 横にはみ出す帯や歯車は切るが、縦は切らない（overflow-x: clip）。
   overflow: hidden だと、ヘッダーの裏まで引き上げている FV（c-fv の margin-top がマイナス）の
   上端が切れて、ヘッダーの裏に写真がなく青い地だけになり、ヘッダーが透けて見えなくなる */
.p-recruit {
    overflow-x: clip;
    background-color: var(--color-hamabo-blue);
}


/* =============================================================
   FV
   ============================================================= */
/* 写真は 575px。下に INDEX バー（74px）が付いて合計 649px になる */
.p-recruit__fv .c-fv__img {
    height: calc(575 * var(--u));
}

/* 他の下層ページは写真の上に青の暗幕（85%）を掛けているが、
   このページのデザインには暗幕がないので外す */
.p-recruit__fv .c-fv__img::after {
    display: none;
}

/* INDEX バーの地色はこのページだけ青 */
.p-recruit__fv .c-fv__index {
    background-color: rgba(0, 64, 149, 0.95);
}

/* バーはデザインどおり 74px（575 + 74 = 写真の 649px ちょうど）。
   共通の上下 31px のままだと 77px になり、写真の下端（649px）より 3px 下まで伸びる。
   その 3px は写真ではなく FV の地色（濃いグレー）の上に半透明の青が乗るので、
   下の青いセクションとの境目に暗い線が出てしまう。文字の位置は変えず、下だけ詰める */
@media screen and (min-width: 769px) {
    .p-recruit__fv .c-fv__index {
        padding-bottom: calc(28 * var(--u));
    }
}

.p-recruit__fv .c-secTtl__en {
    letter-spacing: 0.0353em;   /* 3px */
    text-transform: uppercase;
}


/* =============================================================
   FV 下（見出し ＋ 本文 ＋ 流れるスライダー）
   ============================================================= */
/* 見出しの字の上端が、INDEX バーの下から 201px（デザインどおり）。
   上の FV と 1px 重ねているぶん（main > * の margin-bottom: -1px）も含めて 189px */
.p-recruit__hero {
    position: relative;
    padding-top: calc(189 * var(--u));
    padding-bottom: calc(71 * var(--u));
}

/* 背景の歯車。CSS のアニメーションでゆっくり回り続ける。
   中央寄せの見出し「いつの時代も、…」と中心がそろうよう、画面の中央に置く */
.p-recruit__hero-gear {
    position: absolute;
    top: calc(47 * var(--u));
    left: calc(50% - 439 * var(--u));   /* 幅 878px の半分 */
    z-index: 0;
    width: calc(878 * var(--u));
    aspect-ratio: 878 / 886;
    background: no-repeat center / contain;
    /* スクロールに連動させず、ゆっくり回り続ける */
    animation: c-gear-spin 30s linear infinite;
    will-change: transform;
}

.p-recruit__hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.p-recruit__hero-ttl {
    color: #fff;
    font-size: calc(48 * var(--u));
    font-weight: 800;
    letter-spacing: 0.0208em;   /* 1px */
    line-height: calc(66 / 48);
}

.p-recruit__hero-text {
    margin-top: calc(49 * var(--u));
    color: #fff;
    font-size: calc(18 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0556em;   /* 1px */
    line-height: calc(40 / 18);
}

.p-recruit__hero-text p + p {
    margin-top: calc(40 * var(--u));
}

/* 見出しは「。」で終わり、句点の右半分（0.5em）は字のない空きなので、
   そのまま中央ぞろえにすると見た目が 12px ほど左に寄る。
   さらに「。」自体も小さな点で見た目の重さがほとんどなく、句点を除いた字面は
   まだ 11.5px 左に寄って見える。空き 0.5em ＋ 見た目の補正 20px（0.4167em）ぶん
   右へはみ出させ、字の見た目の中心を歯車・本文とそろえる（PC のみ） */
@media screen and (min-width: 769px) {
    .p-recruit__hero-ttl {
        margin-right: -0.9167em;
    }
}

/* --- 流れるスライダー（TOP の ABOUT と同じ組み方） --- */
.p-recruit__slider {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: calc(106 * var(--u));
}

.p-recruit__slider-track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    /* 1 枚あたり 10 秒（もとの「6 枚で 60 秒」と同じ速さ）。--slideUnit は 1 ユニットの枚数（page-recruit.php） */
    animation: p-recruit__slide calc(var(--slideUnit, 6) * 10s) linear infinite;
    animation-play-state: paused;
}

/* スクロールして画面に入ったら動き出す */
.p-recruit__slider.is-active .p-recruit__slider-track {
    animation-play-state: running;
}

.p-recruit__slide {
    flex-shrink: 0;
    overflow: hidden;
    width: calc(247 * var(--u));
    aspect-ratio: 247 / 350;
    margin-right: calc(30 * var(--u));
    border-radius: calc(10 * var(--u));
}

.p-recruit__slide:nth-child(even) {
    margin-top: calc(123 * var(--u));
}

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

@keyframes p-recruit__slide {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .p-recruit__slider-track { animation: none; }
}


/* =============================================================
   仕事を知る（What's HAMABO?）
   帯は左端から 1320px まで（右に 120px の青が残る）
   ============================================================= */
.p-recruit__work {
    position: relative;
    padding-top: calc(87 * var(--u));
    padding-bottom: calc(114 * var(--u));
}

/* 画面の外に出ていない側（右）だけ角を丸める。
   内側の空きは中身と同じ --gut（1440px で 120px、1260px 以下は 24px）に
   合わせる。固定 120px にすると中身だけが帯の外へ出てしまう */
/* 影は Figma どおり（右下へ 5px ずらし、ぼかし 30px、濃い紺 #022B62） */
.p-recruit__work-band {
    position: absolute;
    inset: 0 var(--gut) 0 0;
    border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
    background-color: var(--color-light-gray);
    box-shadow: calc(5 * var(--u)) calc(5 * var(--u)) calc(30 * var(--u)) #022b62;
}

.p-recruit__work-inner {
    position: relative;
    z-index: 1;
}

/* 各セクションの英字見出し（What’s HAMABO? など）はデザインどおりすべて大文字。
   管理画面の入力は小文字交じりのままでよい */
.p-recruit__work-head .c-secTtl__en,
.p-recruit__culture-head .c-secTtl__en,
.p-recruit__talent-head .c-secTtl__en {
    text-transform: uppercase;
}

.p-recruit__work-lead {
    margin-top: calc(34 * var(--u));
    max-width: calc(597 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

/* このボタンだけ文字が長いので、左右の余白と矢印がひとまわり小さい
   （デザイン実測：左 12 / 右 13、矢印 11px。c-btn 既定の 18 / 16 では入らず折り返す） */
.p-recruit__work-btn {
    width: calc(193 * var(--u));
    margin-top: calc(28 * var(--u));
    padding-inline: calc(12 * var(--u)) calc(13 * var(--u));
    white-space: nowrap;
}

.p-recruit__work-btn .c-btn__arrow {
    width: calc(11 * var(--u));
}

/* --- 4 事業 --- */
/* 1440px では 1059px の行が 1200px の中に収まるので効かない。
   画面が狭いときに写真が帯の右端に張り付かないための逃げ */
.p-recruit__work-list {
    margin-top: calc(102 * var(--u));
    padding-right: calc(24 * var(--u));
}

/* 番号｜文章｜写真。1440px では右に 141px 余る（デザイン実測）。
   1260〜1290px あたりは --gut がまだ大きく内容幅が 1059px を下回るので、
   文章と写真の列は minmax(0, ...) で縮められるようにして帯からはみ出さない */
.p-recruit__work-item {
    display: grid;
    grid-template-columns: calc(285 * var(--u)) minmax(0, calc(481 * var(--u))) minmax(0, calc(293 * var(--u)));
    align-items: start;
}

.p-recruit__work-item + .p-recruit__work-item {
    margin-top: calc(76 * var(--u));
}

/* 番号は歯車の中に置く。歯車の中心をデザインの 251px に合わせる */
.p-recruit__work-num {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: calc(8 * var(--u));
    width: calc(176 * var(--u));
    aspect-ratio: 1 / 1;
    /* 数字と英字はデザインどおり円の中心より 6px 上に寄せる（下に 12px 足して中央ぞろえ） */
    padding-bottom: calc(12 * var(--u));
    margin-top: calc(26 * var(--u));
    margin-left: auto;
    margin-right: calc(66 * var(--u));
    color: var(--color-hamabo-blue);
    text-align: center;
}

/* 歯車は上下左右対称で、青い歯が 1 つだけ。デザインでは事業ごとに
   青い歯が 01=上 / 02=右 / 03=下 / 04=左 と 90 度ずつ回るので、
   同じ画像を疑似要素に置いて回転させる（番号の文字は回さない） */
.p-recruit__work-num::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/recruit/recruit_gear_badge.webp) no-repeat center / contain;
}

.p-recruit__work-item:nth-child(2) .p-recruit__work-num::before { transform: rotate(90deg); }
.p-recruit__work-item:nth-child(3) .p-recruit__work-num::before { transform: rotate(180deg); }
.p-recruit__work-item:nth-child(4) .p-recruit__work-num::before { transform: rotate(270deg); }

.p-recruit__work-numFig,
.p-recruit__work-numEn {
    position: relative;
}

.p-recruit__work-numFig {
    font-family: var(--font-mon);
    font-size: calc(39 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0513em;   /* 2px（SP の 22px でも同じ比率） */
    line-height: 1;
}

.p-recruit__work-numEn {
    font-family: var(--font-mon);
    font-size: calc(16 * var(--u));
    font-weight: 600;
    letter-spacing: 0.125em;   /* 2px */
    line-height: 1;
    text-transform: uppercase;
}

/* 見出しが長い（英語版など）と写真の枠に触れるので、写真との間を 40px あける。
   列の幅は変えないので、写真の位置はデザインのまま */
.p-recruit__work-body {
    padding-right: calc(40 * var(--u));
}

.p-recruit__work-label {
    color: var(--color-dark-gray);
    font-size: calc(15 * var(--u));
    font-weight: 500;
    letter-spacing: 0.0667em;   /* 1px */
    line-height: calc(25 / 15);
}

.p-recruit__work-ttl {
    margin-top: calc(5 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0417em;   /* 1px */
    line-height: calc(42 / 24);
}

.p-recruit__work-text {
    max-width: calc(354 * var(--u));
    margin-top: calc(15 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

/* Read more の小さいピル（一覧ページ SP と同じ形） */
.p-recruit__work-more {
    width: calc(136 * var(--u));
    height: calc(30 * var(--u));
    margin-top: calc(14 * var(--u));
    padding-inline: calc(12 * var(--u)) calc(15.5 * var(--u));   /* 矢印は右端から 16.5px（デザイン実測、枠線 1px 込み） */
    border-radius: calc(15 * var(--u));
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
}

/* このピルの矢印は細い線の矢印（9 x 8）。c-btn 既定の矢印画像は平たく、8px 幅だと高さが 3.6px しか出ない */
.p-recruit__work-more .c-btn__arrow {
    width: calc(9 * var(--u));
    aspect-ratio: 9 / 8;
    -webkit-mask-image: url(../img/common/arrow_readmore.svg);
    mask-image: url(../img/common/arrow_readmore.svg);
}

.p-recruit__work-photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 293 / 228;
    border-radius: calc(10 * var(--u));
    background-color: #d9d9d9;
}

.p-recruit__work-photo picture {
    display: block;
    height: 100%;
}

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

/* 帯の下、青地にかかる写真（右端まで） */
.p-recruit__work-pic {
    position: absolute;
    /* 画面が狭いと文章が折り返してセクションが伸びるので、上端は
       セクションの「下端から」測る（固定値だと中身に重なる） */
    top: calc(100% + 152 * var(--u));
    right: 0;
    z-index: 1;
    width: calc(658 * var(--u));
    aspect-ratio: 658 / 446;
    overflow: hidden;
}

/* 右端まで伸びる写真なので、丸めるのは左側だけ（デザイン実測 10px） */
/* <picture> は既定が inline。img の height:100% を効かせるためブロックにする */
.p-recruit__work-pic picture,
.p-recruit__culture-pic picture {
    display: block;
    height: 100%;
}

.p-recruit__work-pic img {
    width: 100%;
    height: 100%;
    border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u));
    object-fit: cover;
}


/* =============================================================
   文化と風土（CULTURE）
   帯は左 120px から右端まで
   ============================================================= */
.p-recruit__culture {
    position: relative;
    padding-top: calc(353 * var(--u));
    padding-bottom: calc(95 * var(--u));
}

/* この帯は右端まで伸びるので、丸めるのは左側 */
.p-recruit__culture-band {
    position: absolute;
    top: calc(230 * var(--u));
    right: 0;
    bottom: 0;
    left: var(--gut);
    border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u));
    background-color: var(--color-light-gray);
    box-shadow: calc(5 * var(--u)) calc(5 * var(--u)) calc(30 * var(--u)) #022b62;   /* work の帯と同じ */
}

/* 内容は 1022px（カード 486 × 2 ＋ 間隔 50）。
   画面中央ではなく「帯の左端から 88px」を基準に置く。中央寄せだと
   画面が狭いときに中身が帯の左外へ出てしまう */
.p-recruit__culture-inner {
    position: relative;
    z-index: 1;
    /* l-inner も付いているので、その width:100% と左右パディングは打ち消す
       （width:100% のままだと margin と足されて右へあふれる） */
    width: auto;
    max-width: calc(1022 * var(--u));
    margin-left: calc(var(--gut) + 88 * var(--u));
    margin-right: var(--gut);
    padding-inline: 0;
}

/* デザインの枠は 492px だが、Figma は行末の字間（1px）を幅に数えない。
   ブラウザは数えるので、1 行目（29 字 × 17px = 493px）が 492px だと折り返してしまう。少しだけ広げる */
.p-recruit__culture-lead {
    max-width: calc(494 * var(--u));
    margin-top: calc(38 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;
    line-height: 2;
}

.p-recruit__culture-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(50 * var(--u));
    margin-top: calc(39 * var(--u));
}

.p-recruit__culture-card {
    min-height: calc(271 * var(--u));
    padding: calc(37 * var(--u)) calc(44 * var(--u)) calc(36 * var(--u));
    border-radius: calc(10 * var(--u));
    background-color: #fff;
}

/* アイコン ＋ 見出しを横並び。アイコンは高さ 80px の枠に収める */
.p-recruit__culture-cardHead {
    display: flex;
    align-items: center;
    column-gap: calc(46 * var(--u));
    min-height: calc(84 * var(--u));
}

/* デザインのアイコンは 45〜87px とまちまちなので、見出しの頭が揃うよう 80px の正方形の枠を置き、
   イラストはその中央にデザインどおりの大きさで出す（枠いっぱいに伸び縮みさせない）。
   大きさは画像の実寸の 1/4（Figma の 4 倍で書き出してある）を --iconW / --iconH で受け取る。
   04（幅 87px）と 03（アーチ込みで高さ 87px）は枠から少しはみ出す（デザインどおり）。
   大きすぎる画像でも崩れないよう 88 x 88 が上限 */
.p-recruit__culture-cardIcon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
}

.p-recruit__culture-cardIcon img {
    flex-shrink: 0;
    width: min(calc(var(--iconW, 80) * var(--u)), calc(88 * var(--u)));
    height: min(calc(var(--iconH, 80) * var(--u)), calc(88 * var(--u)));
    object-fit: contain;
}

.p-recruit__culture-cardTtl {
    color: var(--color-hamabo-blue);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0417em;
    line-height: calc(42 / 24);
}

.p-recruit__culture-cardText {
    margin-top: calc(18 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;
    line-height: 2;
}

/* 帯の下、青地にかかる写真（左端から） */
.p-recruit__culture-pic {
    position: absolute;
    top: calc(100% + 140 * var(--u));
    left: 0;
    z-index: 1;
    width: calc(658 * var(--u));
    aspect-ratio: 658 / 457;
    overflow: hidden;
}

/* 左端まで伸びる写真なので、丸めるのは右側だけ（デザイン実測 10px） */
.p-recruit__culture-pic img {
    width: 100%;
    height: 100%;
    border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
    object-fit: cover;
}


/* =============================================================
   求める人物像（TALENT）
   帯は左端から 1320px まで
   ============================================================= */
.p-recruit__talent {
    position: relative;
    padding-top: calc(354 * var(--u));
    padding-bottom: calc(169 * var(--u));
}

.p-recruit__talent-band {
    position: absolute;
    top: calc(230 * var(--u));
    right: var(--gut);
    bottom: 0;
    left: 0;
    border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
    background-color: var(--color-light-gray);
    box-shadow: calc(5 * var(--u)) calc(5 * var(--u)) calc(30 * var(--u)) #022b62;   /* work の帯と同じ */
}

/* 2 つめの歯車（白）。こちらもスクロールで回る。
   帯からはみ出さないよう右端基準で置く（1440px で 725〜1210） */
.p-recruit__talent-gear {
    position: absolute;
    top: calc(647 * var(--u));
    right: calc(var(--gut) + 110 * var(--u));
    z-index: 1;
    width: calc(485 * var(--u));
    aspect-ratio: 485 / 490;
    background: no-repeat center / contain;
    /* スクロールに連動させず、ゆっくり回り続ける */
    animation: c-gear-spin 30s linear infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .p-recruit__hero-gear,
    .p-recruit__talent-gear {
        animation: none;
    }
}

.p-recruit__talent-inner {
    position: relative;
    z-index: 2;
}

/* 見出しとリード文は右寄り（デザイン実測：1440px で x=720〜1217）。
   幅は auto のまま上限だけ 497px にしておくと、画面が狭いときは
   自動で縮んで帯の右外へはみ出さない */
.p-recruit__talent-head,
.p-recruit__talent-lead {
    margin-left: calc(600 * var(--u));
    max-width: calc(497 * var(--u));
}

.p-recruit__talent-lead {
    margin-top: calc(38 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;
    line-height: 2;
}

.p-recruit__talent-msg {
    margin-top: calc(152 * var(--u));
}

.p-recruit__talent-ttl {
    margin-left: calc(132 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(48 * var(--u));
    font-weight: 800;
    letter-spacing: 0.0208em;
    line-height: calc(66 / 48);
}

.p-recruit__talent-text {
    max-width: calc(860 * var(--u));
    margin-top: calc(54 * var(--u));
    margin-left: calc(154 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0625em;
    line-height: 2;
}

.p-recruit__talent-text p + p {
    margin-top: calc(32 * var(--u));
}

.p-recruit__talent-listWrap {
    margin-top: calc(113 * var(--u));
    margin-left: calc(154 * var(--u));
}

.p-recruit__talent-listLabel {
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(20 * var(--u));
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: calc(24 / 20);
}

.p-recruit__talent-list {
    margin-top: calc(32 * var(--u));
    margin-left: calc(-3 * var(--u));
}

.p-recruit__talent-item {
    display: flex;
    align-items: baseline;
    column-gap: calc(45 * var(--u));
}

.p-recruit__talent-item + .p-recruit__talent-item {
    margin-top: calc(30 * var(--u));
}

/* 幅 28px の枠は見出しの開始位置（番号の左端から 73px）を決めるためのもの。
   字間 2px を足すと「02」などは枠から少しはみ出すが、デザインも同じ */
.p-recruit__talent-itemNum {
    flex-shrink: 0;
    width: calc(28 * var(--u));
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(24 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0833em;   /* 2px */
    line-height: 1;
}

.p-recruit__talent-itemTtl {
    color: var(--color-hamabo-blue);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0417em;
    line-height: calc(42 / 24);
}


/* =============================================================
   エントリー（join our team）
   ============================================================= */
.p-recruit__entry {
    position: relative;
    overflow: hidden;
    margin-top: calc(189 * var(--u));
    padding-top: calc(215 * var(--u));
    padding-bottom: calc(189 * var(--u));
    text-align: center;
}

/* 写真の上に青を 70% で重ねる */
.p-recruit__entry {
    --rp: 0.5;   /* 0 → 1 : スクロール進捗（JS の js-bgParallax が入れる） */
}

/* 背景は TOP の RECRUIT（common.css の c-recruit-bg）と同じ動き。
   写真はスクロールで上へ流れ（img の translateY）、セクションにマウスが乗ると 4 秒かけて拡大し、
   離れると 4 秒かけて戻る（bgInner の scale）。
   2 つの動きが競合しないよう、拡大は 1 枚外側の bgInner に持たせる */
.p-recruit__entry-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.p-recruit__entry-bgInner {
    position: absolute;
    inset: 0;
    transform: scale(1);
    transition: transform 4s ease;
}

/* マウスで操作する端末だけ。タッチ端末はタップ後に :hover が残って拡大したままになるので対象外 */
@media (hover: hover) {

    .p-recruit__entry:hover .p-recruit__entry-bgInner {
        transform: scale(1.4);
    }
}

@media (prefers-reduced-motion: reduce) {

    .p-recruit__entry-bgInner,
    .p-recruit__entry:hover .p-recruit__entry-bgInner {
        transform: none;
        transition: none;
    }
}

.p-recruit__entry-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 64, 149, 0.7);
}

.p-recruit__entry-bg img {
    position: absolute;
    left: 0;
    /* 上下に 15% ずつはみ出させる。translateY の可動域（±7.5%）が枠内に収まり、上下に隙間ができない */
    top: -15%;
    width: 100%;
    height: 130%;
    object-fit: cover;
    transform: translateY(calc((0.5 - var(--rp)) * 15%));
    will-change: transform;
}

.p-recruit__entry-inner {
    position: relative;
    z-index: 1;
}

/* デザインどおりすべて大文字（入力は「join our team」のままでよい）。
   大文字は幅が出る（96px で 844px）ので、狭い PC・タブレットでは 2 行にならないよう
   画面幅に合わせて縮める。行送りが 52px と詰まっているので、2 行になると字が重なる */
.p-recruit__entry-ttl {
    color: #fff;
    font-family: var(--font-mon);
    font-size: min(calc(96 * var(--u)), 9vw);
    font-weight: 600;
    letter-spacing: 0.0313em;   /* 3px */
    line-height: calc(52 / 96);
    text-transform: uppercase;
}

.p-recruit__entry-text {
    margin-top: calc(64 * var(--u));
    color: #fff;
    font-size: calc(18 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0556em;
    line-height: calc(40 / 18);
}

/* 白いボタン。文字は青 */
.p-recruit__entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(430 * var(--u));
    height: calc(69 * var(--u));
    margin-top: calc(51 * var(--u));
    margin-inline: auto;
    border: 1px solid var(--color-medium-blue);
    border-radius: calc(10 * var(--u));
    background: var(--grad);
    color: var(--color-hamabo-blue);
    font-size: calc(20 * var(--u));
    font-weight: 700;
    line-height: calc(32 / 20);
    transition: opacity 0.3s;
}

.p-recruit__entry-btn:hover {
    opacity: 0.85;
}

/* 右端の細い線の矢印（デザイン実測：PC 26 x 8、右から 28px。SP は 20 x 8、右から 22px）。
   文字は中央のまま、矢印だけ右に置く。位置は枠線（1px）の内側から測るので 1px 引いた値 */
.p-recruit__entry-btn {
    position: relative;
}

.p-recruit__entry-btnArrow {
    position: absolute;
    top: calc(29 * var(--u));
    right: calc(27 * var(--u));
    width: calc(26 * var(--u));
    aspect-ratio: 26 / 8;
    background-color: var(--color-hamabo-blue);
    -webkit-mask: url(../img/common/arrow_entry.svg) no-repeat center / contain;
    mask: url(../img/common/arrow_entry.svg) no-repeat center / contain;
}


/* =============================================================
   タブレット〜小さめの PC（769px 〜 1200px）
   横方向の絶対値をゆるめて破綻を防ぐ
   ============================================================= */
@media screen and (min-width: 769px) and (max-width: 1200px) {

    .p-recruit__work-item {
        grid-template-columns: calc(200 * var(--u)) 1fr calc(240 * var(--u));
        column-gap: calc(24 * var(--u));
    }

    /* この幅は column-gap で写真との間をあけている */
    .p-recruit__work-body {
        padding-right: 0;
    }

    .p-recruit__work-num {
        width: calc(140 * var(--u));
        margin-right: 0;
    }

    .p-recruit__work-text {
        max-width: none;
    }

    .p-recruit__talent-head,
    .p-recruit__talent-lead {
        margin-left: calc(320 * var(--u));
    }

    .p-recruit__talent-ttl,
    .p-recruit__talent-text,
    .p-recruit__talent-listWrap {
        margin-left: 0;
    }

    /* 帯の右端に文章が張り付かないよう内側に逃がす */
    .p-recruit__talent-inner {
        padding-right: calc(var(--gut) + 24 * var(--u));
    }

    .p-recruit__talent-itemNum {
        margin-left: 0;
    }

}


/* =============================================================
   1360px 以下の写真まわり
   写真は帯をまたいで次セクションに入り込む配置のまま（デザインどおり）。
   ただし画面が狭くなると次セクションの見出し・リード文と横に重なるので
   （実測で 1351px 付近から）、見出しのほうを写真の下へ送る。
   写真は 152〜598px の位置にあるので、余白は 640px 取れば掛からない。
   ============================================================= */
@media screen and (min-width: 769px) and (max-width: 1360px) {

    .p-recruit__culture,
    .p-recruit__talent {
        padding-top: calc(640 * var(--u));
    }
}


/* =============================================================
   SP（design : SP_Recruit 375px）

   PC とは地と帯の関係が逆で、ページの地色は薄いグレー。
   青くなるのは FV 下（ヒーロー）とエントリーだけ。
   ============================================================= */
@media screen and (max-width: 768px) {

    /* PC の 0.0353em が SP にも効いてしまうので、共通の 3px に戻す */
    .p-recruit__fv .c-secTtl__en {
        letter-spacing: 0.0833em;   /* 3px */
    }

    .p-recruit {
        background-color: var(--color-light-gray);
    }

    /* ---------- FV ---------- */
    /* 写真は 296px。INDEX はその下に別ブロックとして並ぶ（重ならない）。
       共通の SP 指定（common.css）の aspect-ratio: 1500 / 1184 が残っていると、高さを固定したぶん
       幅が高さから逆算され、375 x 1.2 = 450px で止まって画面の右側が空く（450px 以上の SP 幅）。
       比率は外して、幅は画面いっぱいのままにする */
    .p-recruit__fv .c-fv__img {
        height: calc(296 * var(--u));
        aspect-ratio: auto;
    }

    /* デザインの写真は枠（296px）の上 12px が空いていて、ヘッダーの裏に隠れる。
       ヘッダーは少し透けるので、そこが空いていると写真の上端が線になって見える。
       SP 用の写真（recruit_fv_sp_v3.webp）は上 12px ぶんを写真の続きで描き足し、枠いっぱい（375 x 296）に
       してあるので、余白は付けずに枠の上端から敷く（写真の中身の位置はデザインのまま） */

    .p-recruit__fv .c-fv__img img {
        height: 100%;
    }

    /* 写真（296px）は下端まで見せ、その下の INDEX から青のベタになる（他の下層ページと同じ並び）。
       以前のデザインは写真の下 45px に青が重なっていたが、2026-09-15 のデザイン修正でなくなった。
       写真の暗幕も付けない（PC と同じく ::after は非表示のまま）。
       INDEX のバーは PC 用の 95% のままだと下地の濃いグレーが透けて下の青より少し暗くなるので、ベタにする */
    .p-recruit__fv .c-fv__index {
        background-color: var(--color-hamabo-blue);
    }

    /* 2 列ぶん使う「WHAT’S HAMABO?」は、V を右端ではなく文字のすぐ後ろに置く。
       デザインの間隔は 41px だが、ブラウザの文字幅がわずかに狭いので、V の位置（左から 192px）で合わせて 43px */
    .p-recruit__fv .c-fv__indexItem--wide .c-fv__indexLink {
        justify-content: flex-start;
        column-gap: calc(43 * var(--u));
    }

    /* 下地も青にしておく（写真の読み込み前や、境目の画素で濃いグレーが見えないように） */
    .p-recruit__fv {
        background-color: var(--color-hamabo-blue);
    }

    /* ---------- FV 下（青） ---------- */
    .p-recruit__hero {
        padding-top: calc(25 * var(--u));
        padding-bottom: calc(54 * var(--u));
        background-color: var(--color-hamabo-blue);
    }

    .p-recruit__hero-gear {
        top: calc(65 * var(--u));
        left: calc(20 * var(--u));
        width: calc(335 * var(--u));
    }

    /* SP は左寄せ（PC はページ中央寄せ） */
    .p-recruit__hero-inner {
        text-align: left;
    }

    .p-recruit__hero-ttl {
        font-size: calc(32 * var(--u));
        font-weight: 700;
        letter-spacing: 0;
        line-height: calc(54.4 / 32);
    }

    .p-recruit__hero-text {
        margin-top: calc(29 * var(--u));
        font-size: calc(16 * var(--u));
        font-weight: 400;
        letter-spacing: 0;
        line-height: 2;
    }

    .p-recruit__hero-text p + p {
        margin-top: calc(32 * var(--u));
    }

    .p-recruit__slider {
        margin-top: calc(60 * var(--u));
    }

    .p-recruit__slide {
        width: calc(160 * var(--u));
        aspect-ratio: 160 / 227;
        margin-right: calc(19 * var(--u));
        border-radius: calc(6.5 * var(--u));
    }

    .p-recruit__slide:nth-child(even) {
        margin-top: calc(79 * var(--u));
    }

    /* ---------- 仕事を知る ---------- */
    /* 地がグレーなので帯は要らない */
    .p-recruit__work-band,
    .p-recruit__culture-band,
    .p-recruit__talent-band {
        display: none;
    }

    .p-recruit__work {
        padding-top: calc(67 * var(--u));
        padding-bottom: calc(21 * var(--u));
    }

    /* 英字見出しは 2 行になるのでデザインの行送りに合わせる */
    .p-recruit__work-head .c-secTtl__en,
    .p-recruit__culture-head .c-secTtl__en,
    .p-recruit__talent-head .c-secTtl__en {
        line-height: calc(40 / 36);
    }

    .p-recruit__work-head .c-secTtl__ja,
    .p-recruit__culture-head .c-secTtl__ja,
    .p-recruit__talent-head .c-secTtl__ja {
        margin-top: calc(12 * var(--u));
        font-size: calc(14 * var(--u));
    }

    .p-recruit__work-lead {
        max-width: none;
        margin-top: calc(36 * var(--u));
        letter-spacing: 0;
    }

    .p-recruit__work-btn {
        width: calc(193 * var(--u));
        margin-top: calc(32 * var(--u));
    }

    /* ボタンの下端から 01 の円の上端まで 48px（デザイン実測） */
    .p-recruit__work-list {
        margin-top: calc(48 * var(--u));
        padding-right: 0;
    }

    /* 歯車＋見出しを 1 段目、写真・本文・Read more をその下に積む */
    .p-recruit__work-item {
        grid-template-columns: calc(100 * var(--u)) 1fr;
        column-gap: calc(18 * var(--u));
    }

    .p-recruit__work-item + .p-recruit__work-item {
        margin-top: calc(48 * var(--u));
    }

    .p-recruit__work-num {
        width: calc(100 * var(--u));
        margin: 0;
        padding-bottom: 0;
        row-gap: calc(5 * var(--u));
    }

    .p-recruit__work-numFig {
        font-size: calc(22 * var(--u));
        line-height: calc(13.6 / 22);
    }

    .p-recruit__work-numEn {
        font-size: calc(10 * var(--u));
        letter-spacing: 0.1136em;   /* SP デザインは 1.14px */
        line-height: calc(13.6 / 10);
    }

    .p-recruit__work-label {
        margin-top: calc(4 * var(--u));
        letter-spacing: 0;
    }

    .p-recruit__work-ttl {
        /* デザインの見出し枠は 197px。列幅（217px）のままだと折り返し位置がずれる */
        max-width: calc(197 * var(--u));
        margin-top: calc(7 * var(--u));
        font-size: calc(20 * var(--u));
        letter-spacing: 0;
        line-height: calc(32 / 20);
    }

    /* 1〜2 行目に歯車＋事業名＋見出し、3 行目以降に写真・本文・Read more を積む。
       .p-recruit__work-body は display:contents で中身をそのままグリッドに置く */
    .p-recruit__work-body {
        display: contents;
    }

    .p-recruit__work-num {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .p-recruit__work-label {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .p-recruit__work-ttl {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .p-recruit__work-photo {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: calc(30 * var(--u));
        aspect-ratio: 335 / 188;
    }

    .p-recruit__work-text {
        grid-column: 1 / -1;
        grid-row: 4;
        max-width: none;
        margin-top: calc(20 * var(--u));
        letter-spacing: 0;
    }

    .p-recruit__work-more {
        grid-column: 1;
        grid-row: 5;
        margin-top: calc(10 * var(--u));
    }

    /* 帯の下の写真は左右に少しはみ出す */
    /* SP は画面いっぱい。左右にはみ出さない */
    .p-recruit__work-pic,
    .p-recruit__culture-pic {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        margin-top: calc(68 * var(--u));
        margin-left: 0;
        /* デザインの写真は画面幅より少し大きく置かれていて、
           画面で見えているのは 375 x 289 の範囲 */
        aspect-ratio: 375 / 289;
    }

    /* 左右とも画面端まで来るので角丸は付けない */
    .p-recruit__work-pic img,
    .p-recruit__culture-pic img {
        border-radius: 0;
    }

    /* ---------- 文化と風土 ---------- */
    .p-recruit__culture {
        padding-top: calc(46 * var(--u));
        padding-bottom: 0;
    }

    .p-recruit__culture-inner {
        max-width: none;
        margin-inline: 0;
        padding-inline: var(--inner-pad);
    }

    .p-recruit__culture-lead {
        max-width: none;
        margin-top: calc(38 * var(--u));
        letter-spacing: 0;
    }

    .p-recruit__culture-list {
        grid-template-columns: 1fr;
        gap: calc(30 * var(--u));
        margin-top: calc(30 * var(--u));
    }

    .p-recruit__culture-card {
        min-height: calc(265 * var(--u));
        padding: calc(31 * var(--u)) calc(17 * var(--u)) calc(30 * var(--u));
    }

    .p-recruit__culture-cardHead {
        column-gap: calc(29 * var(--u));
        min-height: calc(62 * var(--u));
    }

    .p-recruit__culture-cardIcon {
        width: calc(62 * var(--u));
        height: calc(62 * var(--u));
    }

    /* SP のイラストは PC の約 0.71 倍（デザイン実測：32x55 / 58x58 / 41x41 / 61x45） */
    .p-recruit__culture-cardIcon img {
        width: min(calc(var(--iconW, 80) * 0.71 * var(--u)), calc(62 * var(--u)));
        height: min(calc(var(--iconH, 80) * 0.71 * var(--u)), calc(62 * var(--u)));
    }

    .p-recruit__culture-cardTtl {
        font-size: calc(20 * var(--u));
        letter-spacing: 0;
        line-height: calc(30 / 20);
    }

    /* 本文はカードの左端から 17px（カードの余白そのまま）、幅 297px（デザイン実測。右は 21px 空く） */
    .p-recruit__culture-cardText {
        margin-top: calc(16 * var(--u));
        padding-inline: 0 calc(4 * var(--u));
        letter-spacing: 0;
    }

    /* ---------- 求める人物像 ---------- */
    .p-recruit__talent {
        padding-top: calc(67 * var(--u));
        padding-bottom: calc(106 * var(--u));
    }

    /* SP デザインには白い歯車がない */
    .p-recruit__talent-gear {
        display: none;
    }

    .p-recruit__talent-head,
    .p-recruit__talent-lead,
    .p-recruit__talent-ttl,
    .p-recruit__talent-text {
        margin-left: 0;
    }

    .p-recruit__talent-head,
    .p-recruit__talent-lead {
        width: auto;
        margin-right: 0;
    }

    .p-recruit__talent-lead {
        max-width: none;
        margin-top: calc(38 * var(--u));
        letter-spacing: 0;
    }

    .p-recruit__talent-msg {
        margin-top: calc(30 * var(--u));
    }

    .p-recruit__talent-ttl {
        color: #023A84;
        font-size: calc(24 * var(--u));
        font-weight: 700;
        letter-spacing: 0;
        line-height: calc(40.8 / 24);
    }

    .p-recruit__talent-text {
        max-width: none;
        margin-top: calc(30 * var(--u));
        letter-spacing: 0;
    }

    .p-recruit__talent-listWrap {
        margin-top: calc(48 * var(--u));
        margin-left: calc(3 * var(--u));
    }

    .p-recruit__talent-list {
        margin-top: calc(30 * var(--u));
        margin-left: 0;
    }

    .p-recruit__talent-item {
        column-gap: calc(14 * var(--u));
    }

    .p-recruit__talent-item + .p-recruit__talent-item {
        margin-top: calc(28 * var(--u));
    }

    .p-recruit__talent-itemNum {
        width: calc(28 * var(--u));
        font-size: calc(20 * var(--u));
        letter-spacing: 0.1em;   /* 2px */
    }

    .p-recruit__talent-itemTtl {
        font-size: calc(20 * var(--u));
        letter-spacing: 0;
        line-height: calc(34 / 20);
    }

    /* ---------- エントリー（青） ---------- */
    .p-recruit__entry {
        margin-top: 0;
        padding-top: calc(93 * var(--u));
        padding-bottom: calc(95 * var(--u));
        text-align: left;
    }

    .p-recruit__entry-ttl {
        font-size: calc(40 * var(--u));
        letter-spacing: 0.075em;   /* 3px */
        line-height: calc(52 / 40);
    }

    .p-recruit__entry-text {
        margin-top: calc(30 * var(--u));
        font-size: calc(16 * var(--u));
        font-weight: 500;   /* PC だけ 400 にしたので、SP は元の 500 のまま */
        letter-spacing: 0;
        line-height: calc(35 / 16);
    }

    .p-recruit__entry-btn {
        width: 100%;
        max-width: none;
        height: calc(69 * var(--u));
        margin-top: calc(16 * var(--u));
        margin-inline: 0;
        font-size: calc(20 * var(--u));
    }

    .p-recruit__entry-btnArrow {
        right: calc(21 * var(--u));
        width: calc(20 * var(--u));
        aspect-ratio: 20 / 8;
        -webkit-mask-image: url(../img/common/arrow_entry_sp.svg);
        mask-image: url(../img/common/arrow_entry_sp.svg);
    }
}


/* =============================================================
   英語版：タブレット幅の「文化と風土」カード見出し
   アイコンの横の列が狭く、英文だと 1〜2 語ずつの 5 行になるため、
   少し小さくしてアイコンとの間も詰め、2〜3 行に収める
   ============================================================= */
@media screen and (min-width: 769px) and (max-width: 1279px) {

    html[lang^="en"] .p-recruit__culture-cardHead {
        column-gap: calc(20 * var(--u));
    }

    html[lang^="en"] .p-recruit__culture-cardTtl {
        font-size: calc(19 * var(--u));
        letter-spacing: 0;
        line-height: 1.5;
    }
}

/* 英語版：1280〜1339px はカードが 243px ほどと狭く、見出しが 4 行に細切れになるので少しだけ詰める */
@media screen and (min-width: 1280px) and (max-width: 1339px) {
    html[lang^="en"] .p-recruit__culture-cardTtl {
        font-size: calc(22 * var(--u));
        letter-spacing: 0;
    }
}

/* 英語版（Montserrat）：Noto Sans より 1 割ほど字幅が広いので、見出しが細切れにならないよう詰める */
@media screen and (min-width: 1280px) {
    html[lang^="en"] .p-recruit__culture-cardTtl {
        font-size: calc(21 * var(--u));
        letter-spacing: 0;
    }
}

@media screen and (max-width: 768px) {
    html[lang^="en"] .p-recruit__culture-cardTtl {
        font-size: calc(18 * var(--u));
    }

    /* 仕事を知る：「Supporting the / manufacturing / site.」のように 1 語だけ残らないようにする */
    html[lang^="en"] .p-recruit__work-ttl {
        font-size: calc(18 * var(--u));
    }
}

/* 英語版 CULTURE：見出しの下段（日本語の「文化と風土」）を出さないぶん見出しが 51px 低く、
   カードがそのぶん上がって、上の写真（WORK から入り込む写真）に右のカードが重なる。
   日本語版と同じ位置（写真の下 38px）になるよう、カードの上をあける。
   1360px 以下はセクション全体を写真の下へ送っているので対象外 */
@media screen and (min-width: 1361px) {
    html[lang^="en"] .p-recruit__culture-list {
        margin-top: calc((39 + 51) * var(--u));
    }
}

/* CULTURE：769〜1099px は 2 列だとカードが 280〜450px になり、アイコンの横の見出しが 70〜200px しか取れず
   日本語で 1 行 3 文字ほどに細切れになる。SP と同じく 1 列にして、見出しをデザインどおりの 2 行に収める。
   1 列ではカードが横に広いので、2 列用の最低の高さと PC だけの改行（u-pcbr）は使わない */
@media screen and (min-width: 769px) and (max-width: 1099px) {
    .p-recruit__culture-list {
        grid-template-columns: 1fr;
        gap: calc(30 * var(--u));
    }

    .p-recruit__culture-card {
        min-height: 0;
    }

    .p-recruit__culture-cardText br.u-pcbr {
        display: none;
    }

    /* 英語版の見出しは 2 列用に 19px まで詰めていたが、1 列では幅に余裕があるので PC と同じ 21px に戻す */
    html[lang^="en"] .p-recruit__culture-cardTtl {
        font-size: calc(21 * var(--u));
    }
}