@charset 'utf-8';

/* Google Fonts（Montserrat／Noto Sans JP）は functions.php で <link> として読み込む */

:root {
    --color-hamabo-blue: #004095;
    --color-midium-gray: #A6B0BA;
    --color-dark-gray: #2A323E;
    --color-light-silver: #DCDFE3;
    --color-light-blue: #7BA5E1;
    --color-medium-blue: #4874B2;
    --grad: linear-gradient(to right,#DCDFE3,#A6B0BA);
    --color-light-gray: #F4F5F7;
    --color-dark-blue: #023A84;
    --color-cation-red: #FF0000;
    --color-anten: rgba(0, 30, 75, 0.6);
    --font-noto: "Noto Sans JP", sans-serif;
    --font-mon: "Montserrat", sans-serif;

    /* デザイン上の 1px = var(--u)
       PC : 常に等倍（1440px 未満でも文字を縮小しない）
       SP : 375px 基準で拡縮（450px 以上は 1.2px で頭打ち）                        */
    --u: 1px;

    /* セクション左右の余白。1440px で 120px、狭い画面ほど詰めてコンテンツを優先する */
    --gut: clamp(24px, 8.334vw, 120px);

    /* .l-inner の内側余白。全幅に出したい要素はこの値を打ち消して使う */
    --inner-pad: var(--gut);
}

/* 英語版は見出し・本文とも Montserrat に統一する（2026-09-24 指示）。
   --font-noto を使っている指定がすべて Montserrat になる。和文が混ざったときだけ Noto Sans JP で表示する */
html[lang^="en"] {
    --font-noto: "Montserrat", "Noto Sans JP", sans-serif;
}

/* 1260px 以下は左右の余白を 24px 固定にして、コンテンツ幅を優先する */
@media screen and (min-width: 769px) and (max-width: 1260px) {
    :root {
        --gut: 24px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --u: min(1.2px, 100vw / 375);
    }
}

* {
    box-sizing: border-box;
}

/* アンカーリンクの移動をなめらかにする（ブラウザ標準の挙動）。
   JS 側で behavior を明示している処理には影響しない。                        */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--font-noto);
    font-size: 100%;
    font-weight: 500;
    color: var(--color-text);
    line-height: 2;
    letter-spacing: 0;
    overflow-x: hidden;
    position: relative;
    /* 下地を白のままにしておくと、下の「1px の隙間」の対策をすり抜けた
       ところで白いすじが見える。ヘッダーとフッターに合わせて青にする */
    background-color: var(--color-hamabo-blue);
}

/* 表示倍率が端数になる環境（Windows の 125% 表示、ブラウザのズーム、
   DevTools のレスポンシブ表示など）では、隣り合うセクションの境目に
   1px の隙間ができて、下地がすじになって見えることがある。
   背景が同じ色どうしのところで特に目立つので、1px 重ねて隙間を作らない。 */
main > * {
    margin-bottom: -1px;
}
img {
    display: block;
    width: 100%;
    height: auto;
}
a {
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
}
a:hover {
    opacity: 0.7;
}
button {
    cursor: pointer;
}

/* -------------------------------------------------------------
   l-inner
   セクション共通の内側コンテナ。背景は各セクションが全幅で持ち、
   コンテンツ幅だけを最大 1200px に収める。
   （1440px 時に 1440 - 左右120 = 1200 になる）
   ヘッダー / フッター / FV は全幅レイアウトのため対象外。
   ------------------------------------------------------------- */
.l-inner {
    width: 100%;
    max-width: calc(1200px + 2 * var(--gut));
    margin-inline: auto;
    padding-inline: var(--inner-pad);
}

@media screen and (max-width: 768px) {
    :root {
        --inner-pad: calc(20 * var(--u));
    }

    .l-inner {
        padding-inline: var(--inner-pad);
    }
}

/* -------------------------------------------------------------
   c-tel
   電話番号の tel: リンク。本文と同じ色のまま下線だけで示す
   （フッターの .l-footer__tel と同じ見せ方にそろえている）
   ------------------------------------------------------------- */
.c-tel {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* 発信できるのは電話機のある端末だけなので、リンクとして見せるのは SP のみ。
   PC では本文と同じ平文の見た目にして、クリックもできないようにする */
@media screen and (min-width: 769px) {

    .c-tel {
        pointer-events: none;
        color: inherit;
        text-decoration: none;
        cursor: text;
    }
}

/* -------------------------------------------------------------
   c-btn
   角丸ボタン（テキスト＋矢印）。c-btnInvert と併用する。
   ------------------------------------------------------------- */
.c-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(280 * var(--u));
    height: calc(45 * var(--u));
    padding-inline: calc(18 * var(--u));
    border: 1px solid var(--color-medium-blue);
    border-radius: calc(10 * var(--u));
    color: #fff;
    font-family: var(--font-noto);
    font-size: calc(14 * var(--u));
    /* デザインどおりの 500 だと和文が太く見えるため 1 段細くする */
    font-weight: 400;
    line-height: 1;
}

.c-btn__arrow {
    flex-shrink: 0;
    width: calc(16 * var(--u));
    aspect-ratio: 66 / 30;
    background-color: var(--color-medium-blue);
    transition: background-color 0.3s, transform 0.3s;
    -webkit-mask: url(../img/common/arrow_btn_mblue.png) no-repeat center / contain;
    mask: url(../img/common/arrow_btn_mblue.png) no-repeat center / contain;
}

.c-btn:hover .c-btn__arrow {
    background-color: var(--color-hamabo-blue);
}

/* 明るい背景に置く場合（文字を反転させて濃色で塗る） */
.c-btn--onLight {
    color: var(--color-hamabo-blue);
}

.c-btn--onLight.c-btnInvert:hover {
    background-color: var(--color-hamabo-blue);
    border-color: var(--color-hamabo-blue);
    color: #fff;
}

.c-btn--onLight.c-btnInvert:hover .c-btn__arrow {
    background-color: #fff;
}

/* 明るい背景・グレー基調（PEOPLE など） */
.c-btn--gray {
    border-color: var(--color-midium-gray);
    color: var(--color-dark-gray);
}

.c-btn--gray .c-btn__arrow {
    background-color: var(--color-midium-gray);
}

.c-btn--gray.c-btnInvert:hover {
    background-color: var(--color-hamabo-blue);
    border-color: var(--color-hamabo-blue);
    color: #fff;
}

.c-btn--gray.c-btnInvert:hover .c-btn__arrow {
    background-color: #fff;
}

/* 写真の上など、明るい枠線で置きたい場合 */
.c-btn--light {
    border-color: var(--color-midium-gray);
}

.c-btn--light .c-btn__arrow {
    background-color: var(--color-midium-gray);
}

/* -------------------------------------------------------------
   c-btnInvert
   ボタン／カテゴリタグ共通。ホバー（および現在地）で色を反転する。
   枠線と文字色で構成された要素に付与する想定。
   ------------------------------------------------------------- */
.c-btnInvert {
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.c-btnInvert:hover,
.c-btnInvert.is-current {
    background-color: #fff;
    border-color: #fff;
    color: var(--color-hamabo-blue);
    opacity: 1;
}

/* 色反転に加えて矢印を右へ送る */
.c-btnInvert:hover .c-btn__arrow {
    transform: translateX(calc(6 * var(--u)));
}

@media (prefers-reduced-motion: reduce) {
    .c-btn__arrow,
    .c-btnInvert:hover .c-btn__arrow {
        transform: none;
        transition: none;
    }
}

/* -------------------------------------------------------------
   c-btn--back
   「一覧へ戻る」用。矢印を左端に置き、左向きにする。
   （デザイン実測：左余白 18px → 矢印 16px → 17px → テキスト）
   ------------------------------------------------------------- */
.c-btn--back {
    justify-content: flex-start;
    column-gap: calc(17 * var(--u));
}

.c-btn--back .c-btn__arrow {
    transform: scaleX(-1);
}

/* scaleX(-1) の内側なので translateX は画面上では左へ送られる */
.c-btn--back.c-btnInvert:hover .c-btn__arrow {
    transform: scaleX(-1) translateX(calc(6 * var(--u)));
}

@media (prefers-reduced-motion: reduce) {
    .c-btn--back .c-btn__arrow,
    .c-btn--back.c-btnInvert:hover .c-btn__arrow {
        transform: scaleX(-1);
    }
}

.u-spb,
.u-spi,
.u-spf {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .u-pcb,
    .u-pci,
    .u-pcf {
        display: none !important;
    }
    .u-spb {
        display: block !important;
    }
    .u-spi {
        display: inline-block !important;
    }
    .u-spf {
        display: flex !important;
    }
}
/* 改行だけを breakpoint で出し分ける。<br class="u-spbr"> のように使う。
   display:none / inline の切り替えなので、リッチテキスト内でも効く */
.u-spbr {
    display: none;
}
@media screen and (max-width: 768px) {
    .u-pcbr {
        display: none;
    }
    .u-spbr {
        display: inline;
    }
}

/* 文中の「※」（注記への目印）。デザインどおり 6 割ほどの大きさで、字の上側に寄せる。
   見出しなどでは hamabo_bizz_inline() が自動で <span class="u-kome">※</span> に包む */
.u-kome {
    font-size: 0.6em;
    line-height: 1;
    vertical-align: 0.55em;
}

/* -------------------------------------------------------------
   c-scrollUp
   画面に入ったら下からふわっと表示する共通クラス。
   要素に付けるだけで有効（JS が .is-inview を付与）。
   ------------------------------------------------------------- */
.c-scrollUp {
    opacity: 0;
    transform: translateY(calc(40 * var(--u)));
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.c-scrollUp.is-inview {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .c-scrollUp {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================================
   c-secTtl
   セクション見出し（英字 + 日本語サブ）
     base           … 濃い背景の上（白抜き）
     --onLight      … 明るい背景の上
     --sm           … ひとまわり小さい版（CONTACT など）
   <div class="c-secTtl">
     <h2 class="c-secTtl__en">NEWS</h2>
     <p class="c-secTtl__ja"><span class="c-secTtl__icon"></span>最新情報</p>
   </div>
   ============================================================= */
.c-secTtl__en {
    /* 1 文字ずつ span に分割するため、文字間で折り返さないようにする */
    white-space: nowrap;
    color: #fff;
    font-family: var(--font-mon);
    font-size: calc(85 * var(--u));
    font-weight: 600;
    /* デザイン実測（1440px で NEWS の文字幅 272px）に合わせた字送り */
    letter-spacing: 0.034em;
    line-height: 1;
}

.c-secTtl__ja {
    display: flex;
    align-items: center;
    /* 飾り（32 x 12px）の右端から和文の左端まで、デザイン実測どおり 12px */
    column-gap: calc(12 * var(--u));
    /* 英字の文字下端から和文の文字上端まで、デザイン（PC_Title コンポーネント）の
       実測どおり 22.6px あける。行ボックスには英字の下に 11px ほどの余白が
       含まれるので、margin は 10px でよい。
       見出しの組はデザイン上、全ページ同じコンポーネントなので、
       ページごとにこの値を上書きしないこと */
    margin-top: calc(10 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
    /* デザインどおりの 500 だと和文が太く見えるため 1 段細くする */
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px（PC_Title コンポーネントの実測） */
    line-height: 1;
}

.c-secTtl__icon {
    flex-shrink: 0;
    width: calc(32 * var(--u));
    aspect-ratio: 32 / 12;
    background: url(../img/common/deco_subttl.webp) no-repeat center / contain;
    /* 和文は行ボックスの中でやや下に描かれるため、天地中央そろえのままだと
       アイコンが上に見える。実測で 1px 上だったぶんを下げる */
    transform: translateY(calc(1 * var(--u)));
}

/* 1 文字ずつスライドイン（JS が文字を span に分割し、表示時に is-inview を付ける）
   マスクは 1 文字ごとに持たせる。見出し全体に overflow:hidden を掛けると
   幅が足りない画面で文字が切れてしまうため。 */
.c-secTtl__enChar {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.c-secTtl__enCharInner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0, 0.6, 0.4, 1);
}

.c-secTtl__en.is-inview .c-secTtl__enCharInner {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .c-secTtl__enCharInner {
        transform: none;
        transition: none;
    }
}

/* 明るい背景の上 */
.c-secTtl--onLight .c-secTtl__en { color: var(--color-hamabo-blue); }
.c-secTtl--onLight .c-secTtl__ja { color: var(--color-dark-gray); }

/* 小さい版 */
/* 1440px で 64px。カード内が狭くなる幅では収まるところまで詰める */
.c-secTtl--sm .c-secTtl__en { font-size: clamp(44px, 4.444vw, 64px); }
.c-secTtl--sm .c-secTtl__ja { margin-top: calc(10.5 * var(--u)); }

@media screen and (max-width: 768px) {

    /* 字送りはデザイン実測で PC・SP とも 3px。文字が小さいぶん em では大きくなる */
    .c-secTtl__en {
        font-size: calc(36 * var(--u));
        letter-spacing: 0.0833em;   /* 3px */
    }

    .c-secTtl--sm .c-secTtl__en { font-size: calc(36 * var(--u)); }

    .c-secTtl__ja {
        margin-top: calc(9 * var(--u));
        font-size: calc(14 * var(--u));
        letter-spacing: 0;
    }

    .c-secTtl--sm .c-secTtl__ja { margin-top: calc(6 * var(--u)); }
}

/* 英語版：Figma「英語版」のセクション見出し（PC_Title 英語版）
   マーク（76 x 28）＋英字 1 行。日本語サブの段は無い（英語版では英字と同じ語が重なるため）。
     - 募集要項の見出しは日本語側（h1）が職種名なので対象外
     - FV のページ名は文字の大きさ・色を各ページの指定のまま、組み方だけそろえる
     - CONTACT（--sm）は Figma でマーク無し */
html[lang^="en"] .c-secTtl:not(.p-requirements__ttl) {
    display: flex;
    align-items: center;
    column-gap: calc(26 * var(--u));
}

html[lang^="en"] .c-secTtl:not(.p-requirements__ttl) .c-secTtl__en {
    order: 2;
}

html[lang^="en"] .c-secTtl:not(.p-requirements__ttl) .c-secTtl__ja {
    order: 1;
    margin-top: 0;
    column-gap: 0;
    font-size: 0;        /* サブの文字は出さずマークだけ残す */
}

html[lang^="en"] .c-secTtl:not(.p-requirements__ttl) .c-secTtl__icon {
    width: calc(76 * var(--u));
    aspect-ratio: 76 / 28;
    background-image: url(../img/common/deco_secttl_en.svg);
    transform: none;
}

html[lang^="en"] .c-secTtl:not(.p-requirements__ttl):not(.c-fv *) .c-secTtl__en {
    color: var(--color-light-silver);
    font-size: calc(60 * var(--u));
    font-weight: 700;
    letter-spacing: 0.05em;     /* 3px */
    text-transform: uppercase;
}

/* 上の指定と同じ :not() を付けて詳細度をそろえ、後勝ちにする */
html[lang^="en"] .c-secTtl.c-secTtl--onLight:not(.p-requirements__ttl):not(.c-fv *) .c-secTtl__en {
    color: var(--color-hamabo-blue);
}

html[lang^="en"] .c-secTtl.c-secTtl--sm:not(.p-requirements__ttl) .c-secTtl__ja {
    display: none;
}

html[lang^="en"] .c-secTtl.c-secTtl--sm:not(.p-requirements__ttl):not(.c-fv *) .c-secTtl__en {
    font-size: clamp(44px, 4.444vw, 64px);
    font-weight: 600;
}

/* 英字の見出しは 1 文字ずつに分けて動かすため折り返さない。60px のままだと 830px 前後より狭い画面で
   長い見出し（採用の「WHAT'S HAMABO?」など）が帯の右端からはみ出すので、画面幅に合わせて少し縮める
   （833px 以上は 60px のまま） */
@media screen and (min-width: 769px) and (max-width: 899px) {
    html[lang^="en"] .c-secTtl:not(.p-requirements__ttl):not(.c-fv *) .c-secTtl__en {
        font-size: min(calc(60 * var(--u)), 7.2vw);
    }
}

/* 日本語版も同じ。英字の見出しは 85px なので、980px 前後より狭いと採用の「WHAT'S HAMABO?」や
   プライバシーポリシーの「PRIVACY POLICY」が帯・画面の右端からはみ出す。画面幅に合わせて縮める
   （977px 以上は 85px のまま。小さい見出し --sm は別の指定で縮むので対象外） */
@media screen and (min-width: 769px) and (max-width: 999px) {
    html:not([lang^="en"]) .c-secTtl:not(.c-secTtl--sm):not(.p-requirements__ttl):not(.c-fv *) .c-secTtl__en {
        font-size: min(calc(85 * var(--u)), 8.7vw);
    }
}

@media screen and (max-width: 768px) {

    /* SP の Figma は無いので、日本語版 SP の英字（36px）に対する PC の比率で縮める */
    html[lang^="en"] .c-secTtl:not(.p-requirements__ttl) {
        column-gap: calc(16 * var(--u));
    }

    html[lang^="en"] .c-secTtl:not(.p-requirements__ttl) .c-secTtl__icon {
        width: calc(46 * var(--u));
    }

    html[lang^="en"] .c-secTtl:not(.p-requirements__ttl):not(.c-fv *) .c-secTtl__en,
    html[lang^="en"] .c-secTtl.c-secTtl--sm:not(.p-requirements__ttl):not(.c-fv *) .c-secTtl__en {
        font-size: calc(36 * var(--u));
    }
}

/* =============================================================
   c-contact
   共通パーツ（content-contact.php）。他ページでも使うため common.css に置く。
   design : PC 1440px / SP 375px
   ============================================================= */
.c-contact {
    padding: calc(158 * var(--u)) 0 calc(127.5 * var(--u));
    background-color: var(--color-light-gray);
    font-family: var(--font-noto);
    line-height: 1;
}

.c-contact__card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background-color: #fff;
    border-radius: calc(10 * var(--u));
}

.c-contact__body {
    flex: 1;
    min-width: 0;
    /* 左右は他セクションと同じ比率で詰める（1440px 時 79 / 40） */
    padding: calc(76 * var(--u)) max(24px, calc(var(--gut) / 3)) calc(73 * var(--u)) max(32px, calc(var(--gut) * 0.658));
}

.c-contact__text {
    margin-top: calc(35 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    line-height: 2;
}

.c-contact__btn {
    margin-top: calc(50 * var(--u));
}

.c-contact__img {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;   /* ズームしても表示領域（枠）は変えない */
    width: 49.917%;   /* 599 / 1200 */
}

/* 写真の上に黒を重ねる（ホバーのズームに引きずられないよう枠側に置く） */
.c-contact__img::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: #000;
    opacity: 0.3;
}

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

/* カードにホバーで写真をゆっくりズーム（はみ出しはカードの角丸で切り取られる） */
.c-contact__card:hover .c-contact__img img {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .c-contact__img img,
    .c-contact__card:hover .c-contact__img img {
        transform: none;
        transition: none;
    }
}

/* =============================================================
   SP
   ============================================================= */
@media screen and (max-width: 768px) {

    .c-contact {
        padding: calc(42 * var(--u)) 0 calc(71 * var(--u));
    }

    .c-contact__card {
        display: block;
    }

    .c-contact__body {
        padding: calc(40 * var(--u)) calc(28 * var(--u)) calc(29.5 * var(--u));
    }

    .c-contact__text {
        margin-top: calc(31 * var(--u));
        font-size: calc(16 * var(--u));
        line-height: 2;
    }

    .c-contact__btn {
        width: 100%;
        margin-top: calc(19 * var(--u));
    }

    .c-contact__img {
        width: 100%;
        aspect-ratio: 337 / 185;
        border-radius: 0 0 10px 10px;
    }
}

/* =============================================================
   c-secHead
   下層ページのセクション見出し（英字ラベル + 日本語見出し）
   <div class="c-secHead">
     <p class="c-secHead__en"><span class="c-secHead__icon"></span>ABOUT US</p>
     <h2 class="c-secHead__ja">私たちについて</h2>
   </div>
   ============================================================= */
/* Figma は全ページ textCase = UPPER。入力の大小に関わらず大文字で出す */
.c-secHead__en {
    display: flex;
    align-items: center;
    column-gap: calc(12 * var(--u));
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(16 * var(--u));
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.c-secHead__icon {
    flex-shrink: 0;
    width: calc(32 * var(--u));
    aspect-ratio: 32 / 12;
    background: url(../img/common/deco_subttl_blue.png) no-repeat center / contain;
}

/* 行送りはデザイン実測 24px / 42px（1.75）。1.4 だと見出しの下が 5px ほど詰まり、
   本文に近すぎて窮屈に見えていた。行送りを広げるぶん上の margin を詰めて、
   英字ラベル → 和文の間隔はデザインの 18.4px に合わせる */
.c-secHead__ja {
    margin-top: calc(6 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.75;
}

@media screen and (max-width: 768px) {

    /* SP はデザイン実測で 12px・字送り 0。左の飾りは 27 x 10、飾りと英字の間は 8px */
    .c-secHead__en {
        column-gap: calc(8 * var(--u));
        font-size: calc(12 * var(--u));
        letter-spacing: 0;
    }

    .c-secHead__icon {
        width: calc(27 * var(--u));
    }

    /* SP はデザイン実測 20px / 38px（1.9）。英字ラベル → 和文は 14px */
    .c-secHead__ja {
        margin-top: calc(2 * var(--u));
        font-size: calc(20 * var(--u));
        line-height: 1.9;
    }
}

/* 英語版の折り返し：1 語だけの行を作らない。
   本文は最後の行が 1 語にならないよう調整し（pretty）、見出しは各行の長さをそろえる（balance）。
   white-space: nowrap で 1 行にしている見出しを崩さないよう、折り返す／しない（text-wrap-mode）は
   変えずに、組み方（text-wrap-style）だけを指定する。未対応のブラウザは通常の折り返しのまま */
html[lang^="en"] main {
    text-wrap-style: pretty;
}

html[lang^="en"] main :is(h1, h2, h3, h4, h5, h6, dt) {
    text-wrap-style: balance;
}

/* 英語版：TOP の英語版見出し（c-secTtl）と同じ組みで 1 行にする
   （Figma「英語版」TOP_インドネシアの BUSINESS AREAS：マーク＋英字 1 行）。
   2 段目（日本語版の和文見出し。英語版では同じ意味の英文になり重複する）は画面に出さず、
   読み上げと見出し構造のために残す */
html[lang^="en"] .c-secHead {
    position: relative;
}

html[lang^="en"] .c-secHead__en {
    column-gap: calc(26 * var(--u));
    font-size: calc(60 * var(--u));
    font-weight: 700;
    letter-spacing: 0.05em;     /* 3px */
    line-height: 1.2;
}

html[lang^="en"] .c-secHead__icon {
    width: calc(76 * var(--u));
    aspect-ratio: 76 / 28;
    background-image: url(../img/common/deco_secttl_en.svg);
}

html[lang^="en"] .c-secHead__ja {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media screen and (max-width: 768px) {

    /* 一番長い AVAILABLE SALES ITEMS も 1 行に収まる大きさ（375px で右に 9px 残る）。
       字送りは日本語版 SP と同じく 0 */
    html[lang^="en"] .c-secHead__en {
        column-gap: calc(12 * var(--u));
        font-size: calc(21 * var(--u));
        letter-spacing: 0;
    }

    html[lang^="en"] .c-secHead__icon {
        width: calc(40 * var(--u));
    }
}

/* =============================================================
   c-subHead
   小見出しブロック。左に細い罫線を通し、ラベルの高さだけ青くする。
   <div class="c-subHead">
     <p class="c-subHead__label">コーポレート・タグライン</p>
     <div class="c-subHead__body"> … </div>
   </div>
   ============================================================= */
.c-subHead {
    position: relative;
    padding-left: calc(17 * var(--u));
}

/* ブロックの高さぶん、薄い縦罫線を通す版 */
.c-subHead--line {
    border-left: 1px solid var(--color-light-silver);
}

.c-subHead__label {
    position: relative;
    color: var(--color-hamabo-blue);
    font-size: calc(16 * var(--u));
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.625;
}

/* ラベルの高さぶんだけ罫線を青く重ねる。
   デザインはラベルの枠の上端から、下端の 2px 先まで（枠 26px に対して 28px）。
   太さもデザイン実測どおり 2px */
.c-subHead__label::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: calc(-2 * var(--u));
    left: calc(-18 * var(--u));
    width: 2px;
    background-color: var(--color-hamabo-blue);
}

@media screen and (max-width: 768px) {

    /* SP は本文を画面幅いっぱいに使い、ラベルだけ罫線から下げる */
    .c-subHead {
        padding-left: 0;
    }

    /* 文字サイズはデザイン実測で PC と同じ 16px なので上書きしない */
    .c-subHead__label {
        padding-left: calc(13 * var(--u));
    }

    .c-subHead__label::before {
        left: 0;
    }

    .c-subHead--line {
        border-left: 0;
    }
}

/* =============================================================
   c-btn の追加バリエーション
     __ext   … 矢印ではなく外部リンクアイコン
     --sm    … ひとまわり小さい版
   ============================================================= */
.c-btn__ext {
    flex-shrink: 0;
    width: calc(16 * var(--u));
    aspect-ratio: 1 / 1;
    background-color: var(--color-midium-gray);
    transition: background-color 0.3s, transform 0.3s;
    -webkit-mask: url(../img/common/icon_link_mgray.png) no-repeat center / contain;
    mask: url(../img/common/icon_link_mgray.png) no-repeat center / contain;
}

.c-btnInvert:hover .c-btn__ext {
    background-color: #fff;
    transform: translate(calc(3 * var(--u)), calc(-3 * var(--u)));
}

.c-btn--sm {
    width: calc(186 * var(--u));
    height: calc(32 * var(--u));
    padding-inline: calc(14 * var(--u));
    border-radius: calc(6 * var(--u));
    font-size: calc(13 * var(--u));
}

.c-btn--sm .c-btn__ext {
    width: calc(13 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
    .c-btn__ext,
    .c-btnInvert:hover .c-btn__ext {
        transform: none;
        transition: none;
    }
}

/* =============================================================
   c-logoWord
   HAMABO のロゴタイプ（logo.webp の文字部分だけをマスクで抜き、
   任意の色で塗る）。幅を指定して使う。
   ============================================================= */
.c-logoWord {
    display: block;
    aspect-ratio: 610 / 80;
    background-color: currentColor;
    -webkit-mask: url(../img/common/logo.webp) no-repeat right center / 142.951% auto;
    mask: url(../img/common/logo.webp) no-repeat right center / 142.951% auto;
}


/* =============================================================
   c-backToTop
   右下に浮かせるページ先頭ボタン（縦書きの英字 + 丸矢印）。
   上方向にスクロールしたときだけ出てくる（JS が .is-shown を付与）。
   青や暗い背景に重なっている間は白抜きにする（JS が .is-onDark を付与）。
   ============================================================= */
.c-backToTop {
    position: fixed;
    right: calc(20 * var(--u));
    bottom: calc(20 * var(--u));
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: calc(15 * var(--u));
    width: calc(30 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(10 * var(--u)));
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.c-backToTop.is-shown {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.c-backToTop__text {
    writing-mode: vertical-rl;
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(10 * var(--u));
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.3s;
}

/* 色はページによって変わる（採用情報だけ白）ので、
   画像はマスクにして background-color で塗る。
   デザインでは円も矢印も線が 1px 固定で、円が 30px→20px に小さくなっても
   線は細くならない。1 枚を縮小すると線まで縮むため、SP は別画像を使う */
.c-backToTop__icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-hamabo-blue);
    -webkit-mask: url(../img/common/icon_backtotop.png) no-repeat center / contain;
    mask: url(../img/common/icon_backtotop.png) no-repeat center / contain;
    transition: transform 0.3s ease, background-color 0.3s;
}

.c-backToTop:hover {
    opacity: 1;
}

.c-backToTop:hover .c-backToTop__icon {
    transform: translateY(calc(-4 * var(--u)));
}

/* 読み上げ用のラベル（見た目には出さない） */
.u-visuallyHidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media screen and (max-width: 768px) {

    /* SP は青ではなくダークグレー、丸も 30px → 20px（Figma 実測） */
    .c-backToTop {
        right: calc(16 * var(--u));
        row-gap: calc(6 * var(--u));
        width: calc(20 * var(--u));
    }

    .c-backToTop__text {
        color: var(--color-dark-gray);
    }

    /* 20px でも線の太さがデザインどおりになる SP 用の画像に差し替える */
    .c-backToTop__icon {
        background-color: var(--color-dark-gray);
        -webkit-mask-image: url(../img/common/icon_backtotop_sp.png);
        mask-image: url(../img/common/icon_backtotop_sp.png);
    }
}

/* 青や暗い背景の上に来たときは白抜き（PC・SP 共通）。
   どの背景に重なっているかは JS（initBackToTopTheme）が見て付け替える */
.c-backToTop.is-onDark .c-backToTop__text {
    color: #fff;
}

.c-backToTop.is-onDark .c-backToTop__icon {
    background-color: #fff;
}

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

    .c-backToTop,
    .c-backToTop__icon,
    .c-backToTop:hover .c-backToTop__icon {
        transition: none;
        transform: none;
    }

    .c-backToTop__icon,
    .c-backToTop:hover .c-backToTop__icon {
        transform: none;
    }
}


/* =============================================================
   c-fv
   下層ページ共通の FV（template-parts/fv.php）。
   ヘッダー（76px）を含めて高さ 540px。写真は上端を基準に幅へ合わせ、
   はみ出した下側を切る。INDEX バーはその下に並ぶ。
   ============================================================= */
.c-fv {
    position: relative;
    overflow: hidden;
    /* ヘッダーぶん下がった body の padding を打ち消し、写真をヘッダーの下まで敷く */
    margin-top: calc(-1 * var(--l-header-h));
    background-color: var(--color-dark-gray);
}

.c-fv__img {
    position: relative;
    /* 写真がないページ（ENERGY など）でも高さを保つ */
    height: calc(540 * var(--u));
}

/* 暗幕は写真の上部だけに掛ける（INDEX バーの裏には掛けない） */
.c-fv__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-hamabo-blue);
    opacity: 0.85;
}

.c-fv__img picture {
    display: block;
    height: 100%;
}

/* 写真は INDEX バーの裏まで敷く（デザイン上は 649px）。
   下にはみ出したぶんは INDEX バーが半透明で覆う */
.c-fv__img img {
    height: calc(649 * var(--u));
    object-fit: cover;
    object-position: center top;
}

/* --- パンくず ---
   コンテンツ（1200px）の左端から 88px 外へ出した位置。
   1440px で 32px、狭い画面では 20px で止める。                            */
.c-fv__bread {
    position: absolute;
    top: calc(96 * var(--u));
    left: max(calc(20 * var(--u)), calc((100% - 1200px) / 2 - 88px));
    right: max(calc(20 * var(--u)), calc((100% - 1200px) / 2 - 88px));
    z-index: 2;
}

/* 和文が基準。英字の項目だけ下の --en で上書きする（PC / SP 共通） */
/* 和文と英字は書体もサイズも違うため、
   - 行の高さを倍率（1.2 など）で指定すると項目ごとに行ボックスの高さが変わり、
     align-items: center だと端数の位置に置かれて上下がずれて見える
   - 書体の ascent／descent の差ぶんだけ、文字の描かれる位置もずれる
   ことになる。とくに Montserrat や Noto Sans JP が読み込めずに代替書体に
   なった環境では差が大きく出る。
   行の高さを固定値にして全項目の行ボックスをそろえたうえで、
   ベースライン（文字の下端の線）でそろえる。 */
.c-fv__breadList {
    display: flex;
    align-items: baseline;
    color: #fff;
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.05em;   /* 0.7px */
    line-height: calc(23 * var(--u));
}

/* 行の高さは .c-fv__breadList の固定値をそのまま使う（上書きしない） */
.c-fv__breadItem--en {
    font-family: var(--font-mon);
    font-size: calc(15 * var(--u));
    letter-spacing: 0.0667em;   /* 1px */
}

/* 現在地だけ少し太い */
.c-fv__breadItem[aria-current] {
    font-weight: 500;
}

/* 現在地（記事タイトルなど長くなりうる項目）だけを縮める。
   flex 既定のままだと TOP や親階層まで一緒に詰まって読めなくなる */
.c-fv__breadItem {
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.c-fv__breadItem[aria-current] {
    flex-shrink: 1;
    min-width: 0;
}

/* 区切りは直径 3px の丸（Figma 実測）。「・」の文字だと書体や文字サイズで大きさが変わり、大きく見える。
   前の項目の文字から 14px、次の項目の文字まで 10px（Figma は行末の字間を幅に数えないので、左は 13px）。
   色は後ろの項目と同じ（リンクはグレー、現在地は白。白地のページでは濃色） */
.c-fv__breadItem + .c-fv__breadItem::before {
    content: '';
    display: inline-block;
    width: calc(3 * var(--u));
    height: calc(3 * var(--u));
    margin: 0 calc(10 * var(--u)) 0 calc(13 * var(--u));
    border-radius: 50%;
    background-color: currentColor;
    vertical-align: calc(4 * var(--u));   /* 丸の中心が文字のベースラインから 5.5px 上（Figma 実測 5.6px） */
}

.c-fv__breadItem + .c-fv__breadItem:has(> a)::before {
    background-color: var(--color-midium-gray);
}

/* リンクはグレー、現在地だけ白（Figma 実測） */
.c-fv__breadItem a {
    color: var(--color-midium-gray);
    opacity: 1;
}

.c-fv__breadItem a:hover {
    color: #fff;
}

/* --- 本文スロット（1200px のコンテンツ幅に載せる） --- */
.c-fv__body {
    position: absolute;
    top: calc(262 * var(--u));
    right: 0;
    left: 0;
    z-index: 2;
}

/* --- INDEX（ページ内リンク）。FV 写真の下に並ぶ --- */
/* 背景は不透明度 95%。裏に写真が透ける */
.c-fv__index {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    background-color: rgba(42, 50, 62, 0.95);   /* --color-dark-gray の 95% */
    padding: calc(31 * var(--u)) 0;
}

/* 「INDEX」は Montserrat、項目は和文で、行の高さもページによって違う
   （事業領域と事業詳細は 24/14）。上端そろえだと行ボックスの高さの差が
   そのままずれになるので、デザインどおりベースライン（文字の下端の線）で
   そろえる。デザインも INDEX と項目の文字下端が 0.2px 以内でそろっている */
.c-fv__indexInner {
    display: flex;
    align-items: baseline;
    column-gap: calc(48 * var(--u));
}

.c-fv__indexLabel {
    flex-shrink: 0;
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1;
}

/* 既定は内容なりに並べる。項目数が決まっているページは --fixed で桁を揃える */
.c-fv__indexList {
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(48 * var(--u));
    row-gap: calc(19 * var(--u));
}

.c-fv__indexList--fixed {
    display: grid;
    grid-template-columns: repeat(4, calc(142 * var(--u)));
    column-gap: calc(34 * var(--u));
}

/* 4 列（142px × 4 ＋ 間隔）は 822px ほど要る。それより狭いと 4 列目（経営理念 / PHILOSOPHY）の
   V が画面の外に出て見えなくなるので、900px 未満は列と間隔を画面幅に合わせて縮める */
@media screen and (min-width: 769px) and (max-width: 899px) {
    .c-fv__indexList--fixed {
        grid-template-columns: repeat(4, minmax(0, calc(142 * var(--u))));
        column-gap: clamp(16px, 3vw, 34px);
    }
}

/* 既定はグレー、ホバーで白（デザイン実測。矢印も同じ色で動く） */
.c-fv__indexLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: calc(8 * var(--u));
    color: var(--color-midium-gray);
    font-size: calc(14 * var(--u));
    /* デザインは 500 だが、和文が太く見えるため 1 段細くする */
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.3s;
}

.c-fv__indexLink:hover {
    color: #fff;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .c-fv__indexLink {
        transition: none;
    }
}

/* 英字だけの項目（What’s HAMABO? など）。PC デザインは Montserrat 400・字間 1px・大文字 */
.c-fv__indexLink--en {
    font-family: var(--font-mon);
    letter-spacing: 0.0714em;   /* 1px */
    text-transform: uppercase;
}

/* デザインの V は線幅込みで 9.49 x 5.24。
   マスク画像（38 x 36）は上に 15px の余白があり、contain だとその余白ごと
   縮んで V が 7.4 x 4.1 にしか出ない。幅いっぱい＋下端そろえにして、
   画像の下 21/38 ＝ V の部分だけを枠に収める。
   margin-top はデザインの位置（項目のベースラインの 3.98px 上が V の中心）に合わせるぶん */
.c-fv__indexChevron {
    flex-shrink: 0;
    width: calc(9.5 * var(--u));
    aspect-ratio: 38 / 21;
    margin-top: calc(2 * var(--u));
    background-color: var(--color-midium-gray);
    transition: background-color 0.3s, transform 0.3s;
    -webkit-mask: url(../img/common/header_arrow_down.png) no-repeat center bottom / 100% auto;
    mask: url(../img/common/header_arrow_down.png) no-repeat center bottom / 100% auto;
}

.c-fv__indexLink:hover .c-fv__indexChevron {
    background-color: #fff;
    transform: translateY(calc(3 * var(--u)));
}

@media (prefers-reduced-motion: reduce) {
    .c-fv__indexChevron,
    .c-fv__indexLink:hover .c-fv__indexChevron {
        transform: none;
        transition: none;
    }
}

@media screen and (max-width: 768px) {

    /* SP は写真が INDEX バーの手前で終わるデザイン */
    .c-fv__img {
        height: auto;
        aspect-ratio: 1500 / 1184;
    }

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

    .c-fv__bread {
        top: calc(70 * var(--u));
        left: calc(20 * var(--u));
        right: calc(20 * var(--u));
    }

    /* SP も PC と同じサイズ。英字の字送りだけ 0 になる */
    .c-fv__breadItem--en {
        letter-spacing: 0;
    }

    /* 字送りが 0 になって「TOP」の後ろの空きが 1px 減るので、丸の左を広げて位置（左から 48px）をデザインに合わせる */
    .c-fv__breadItem + .c-fv__breadItem::before {
        margin-left: calc(16 * var(--u));
    }

    .c-fv__body {
        top: calc(146 * var(--u));
        padding-inline: calc(20 * var(--u));
    }

    .c-fv__index {
        padding: calc(27 * var(--u)) calc(30.5 * var(--u)) calc(35 * var(--u));
    }

    .c-fv__indexInner {
        display: block;
        padding-inline: 0;
    }

    .c-fv__indexLabel {
        display: none;
    }

    /* SP は 2 列。長いラベルだけ 2 列ぶん使う */
    .c-fv__indexList,
    .c-fv__indexList--fixed {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(24 * var(--u));
        row-gap: calc(9 * var(--u));
    }

    .c-fv__indexItem--wide {
        grid-column: 1 / -1;
    }

    .c-fv__indexLink {
        line-height: 1.71;
    }

    /* SP デザインは和文と同じ Noto・字間 0 のまま大文字だけにしている */
    .c-fv__indexLink--en {
        font-family: var(--font-noto);
        letter-spacing: 0;
    }
}

/* =============================================================
   c-recruit
   design : PC 1440px / SP 375px
   liquid : common.css の --u（デザイン上の 1px）でスケール
   ============================================================= */
.c-recruit {
    --rp: 0.5;               /* 0 → 1 : スクロール進捗（背景の上方向パララックス） */
    position: relative;
    overflow: hidden;
    padding: calc(132 * var(--u)) 0 calc(133.5 * var(--u));
    background-color: var(--color-hamabo-blue);
    font-family: var(--font-noto);
    line-height: 1;
}

/* -------------------------------------------------------------
   背景（スクロールで上へ流れる）
   ------------------------------------------------------------- */
.c-recruit-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* 帯にマウスが乗ったら背景を 4 秒かけて 1.4 倍まで拡大し、離れたら 4 秒かけて元に戻す。
   戻りも同じ transition で逆再生されるので JS は使わない。
   写真のパララックスは img 側の transform なので、
   ここを 1 枚はさんで動きが競合しないようにしている。 */
.c-recruit-bgInner {
    position: absolute;
    inset: 0;
    transform: scale(1);
    transition: transform 4s ease;
}

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

    .c-recruit:hover .c-recruit-bgInner {
        transform: scale(1.4);
    }
}

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

    .c-recruit-bgInner,
    .c-recruit:hover .c-recruit-bgInner {
        transform: none;
        transition: none;
    }
}

.c-recruit-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;
}

/* 青の被せ */
.c-recruit-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 64, 149, 0.88);
}

.c-recruit-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
}

/* このセクションだけ左右の余白が広い（1440px 時 189px） */
.c-recruit-inner.l-inner {
    /* 1440px で 189px。狭い画面では他セクションと同じ比率で詰まる */
    padding-inline: calc(var(--gut) * 1.575);
}

/* -------------------------------------------------------------
   text
   ------------------------------------------------------------- */
.c-recruit-body {
    flex: 1;
    min-width: 0;
}

.c-recruit-headline {
    margin-top: calc(53 * var(--u));
    color: #fff;
    /* 1440px で 36px。狭い画面でもデザインの改行位置を保つ */
    font-size: clamp(28px, 2.5vw, 36px);
    /* 700 だと和文が太く見えるため 1 段細くする */
    font-weight: 600;
    line-height: 1.83;
}

.c-recruit-text {
    margin-top: calc(17 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
    /* 白抜きの和文は 400 でも太く見えるため 1 段細くする */
    font-weight: 300;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

.c-recruit-btn {
    margin-top: calc(30 * var(--u));
}

/* -------------------------------------------------------------
   gear（回転しながら中の写真が切り替わる）
   ------------------------------------------------------------- */
.c-recruit-gear {
    position: relative;
    flex-shrink: 0;
    width: 51.6%;     /* 548 / 1062（recruit は左右余白が広い） */
    aspect-ratio: 1 / 1;
    margin-top: calc(5.4 * var(--u));
    margin-left: auto;
    margin-right: calc(11.25 * var(--u));
}

.c-recruit-gearRing {
    position: absolute;
    inset: 0;
    background: url(../img/top/top_recruit_gear.webp) no-repeat center / contain;
    animation: c-recruit-spin 40s linear infinite;
    will-change: transform;
}

@keyframes c-recruit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 背景の透かしの歯車用。各ページの歯車がこれを使ってゆっくり回り続ける */
@keyframes c-gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.c-recruit-photos {
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: hidden;
    width: 73.27%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.c-recruit-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* プロトタイプどおりテンポよく切り替える（ゆっくり溶け合わせない） */
    transition: opacity 0.5s ease-in-out;
}

/* 1つ前の写真は不透明のまま下に残す。上に重ねた新しい写真がゆっくり現れるので、
   両方が半透明になる瞬間がなく、切り替わりの途中で背景が透けない */
.c-recruit-photo.is-prev {
    z-index: 1;
    opacity: 1;
    transition: none;
}

.c-recruit-photo.is-active {
    z-index: 2;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .c-recruit-gearRing {
        animation: none;
    }
}

/* =============================================================
   SP
   ============================================================= */
/* -------------------------------------------------------------
   950px 以下は英字見出し（改行できない RECRUIT）が列幅を超えて
   歯車に掛かるため、歯車を見出しの下まで下げる
   ------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 950px) {

    .c-recruit-gear {
        margin-top: calc(105 * var(--u));
    }
}

/* -------------------------------------------------------------
   本文の <br class="u-pcb"> は 2 カラム時の改行位置。u-pcb が消えるのは
   768px 以下なので、769〜889px では指定の改行のあとにさらに折り返し、
   行末が「み、」「す。」のように 1〜2 文字だけ残ってしまう。
   （いちばん長い行がちょうど入らなくなるのが 889px から）
   この帯では改行を解除して、列幅なりに送る。
   ------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 889px) {

    .c-recruit-text br {
        display: none;
    }
}

@media screen and (max-width: 768px) {

    .c-recruit {
        padding: calc(63 * var(--u)) 0 calc(87 * var(--u));
    }

    /* 並び順：見出し → 歯車 → リード → 本文 → ボタン */
    .c-recruit-inner.l-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 0 calc(20 * var(--u)) 0 calc(19*var(--u));
    }

    .c-recruit-body {
        display: contents;
    }

    .c-recruit-headTtl  { order: 1; }
    .c-recruit-headline { order: 4; margin-top: calc(50 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.75; }
    /* SP のデザインは字送り 0（1 行 21 文字で収まる幅になっている） */
    .c-recruit-text     { order: 5; margin-top: calc(13 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 400; letter-spacing: 0; line-height: 2; }
    .c-recruit-btn      { order: 6; margin-top: calc(60 * var(--u)); }

    .c-recruit-gear {
        order: 3;
        width: calc(333 * var(--u));
        margin: calc(66 * var(--u)) auto 0;
    }
}
/* reCAPTCHA のバッジは出さない。Google の規定どおり、フォームの下に文言を出している（page-contact.php）。
   display: none にすると reCAPTCHA が動かなくなることがあるので visibility で隠す */
.grecaptcha-badge {
    visibility: hidden;
}