@charset 'utf-8';

/* =============================================================
   募集要項
   design : なし（採用情報・プライバシーポリシーのデザインに合わせて組んでいる）
   liquid : common.css の --u（PC はデザイン上の 1px、SP は画面幅に比例）

   - content-requirements.php   .c-requirements  一覧（採用情報の JOIN OUR TEAM の中）
   - single-recruit-job.php     .p-requirements  詳細（/recruit/entry/〇〇/。エントリーフォームは固定ページ /recruit/entry/）
   - 中身はカスタム投稿 recruit-job（inc/acf-recruit-job.php）
   ============================================================= */


/* =============================================================
   一覧（c-requirements）
   青地の上に、区分と職種名だけの細い白カードを並べる。採用情報ページと同じ「青地に白」のトーン。
   詳しい条件（募集職種・勤務時間など）は詳細ページで見せる
   ============================================================= */
.c-requirements {
    font-family: var(--font-noto);
    text-align: left;
}

/* ---------- 見出し ---------- */
.c-requirements__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: calc(40 * var(--u));
}

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

/* ---------- カードの並び ---------- */
.c-requirements__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(30 * var(--u));
    margin-top: calc(60 * var(--u));
}

/* 採用情報では、中央揃えの JOIN OUR TEAM の本文とボタンのあいだに入る。
   1200px いっぱいだとカードが横長になりすぎるので少し狭める */
.c-requirements--inEntry {
    max-width: calc(1000 * var(--u));
    margin-top: calc(64 * var(--u));
    margin-inline: auto;
}

.c-requirements--inEntry .c-requirements__list {
    margin-top: 0;
}

/* カードが 1 件だけのときは、左に寄らないよう中央に置く */
.c-requirements__list:has(> .c-requirements__item:only-child) {
    grid-template-columns: minmax(0, calc(485 * var(--u)));
    justify-content: center;
}

/* ---------- カード ----------
   ホバーは右の丸矢印が青く塗られるだけ。カード自体は動かさず、透けさせもしない */
.c-requirements__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: calc(24 * var(--u));
    height: 100%;
    min-height: calc(100 * var(--u));
    padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u)) calc(32 * var(--u));
    border-radius: calc(10 * var(--u));
    background-color: #fff;
    color: var(--color-dark-gray);
}

.c-requirements__card-body {
    min-width: 0;
}

.c-requirements__card-en {
    color: var(--color-medium-blue);
    font-family: var(--font-mon);
    font-size: calc(12 * var(--u));
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.c-requirements__card-ttl {
    color: var(--color-hamabo-blue);
    font-size: calc(22 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0455em;   /* 1px */
    line-height: 1.5;
}

.c-requirements__card-en + .c-requirements__card-ttl {
    margin-top: calc(8 * var(--u));
}

/* 丸の中に矢印（矢印の形は c-btn__arrow と同じ画像） */
.c-requirements__card-arrow {
    position: relative;
    flex-shrink: 0;
    width: calc(40 * var(--u));
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-medium-blue);
    border-radius: 50%;
    transition: background-color 0.3s, border-color 0.3s;
}

.c-requirements__card-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    width: calc(15 * var(--u));
    aspect-ratio: 66 / 30;
    margin: auto;
    background-color: var(--color-medium-blue);
    transition: background-color 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;
}

/* common.css の a:hover { opacity: 0.7 } を打ち消す（カードは透けさせない） */
a.c-requirements__card:hover {
    opacity: 1;
}

a.c-requirements__card:hover .c-requirements__card-arrow {
    border-color: var(--color-hamabo-blue);
    background-color: var(--color-hamabo-blue);
}

a.c-requirements__card:hover .c-requirements__card-arrow::after {
    background-color: #fff;
}

/* 募集停止中は矢印の代わりに文字を出す */
.c-requirements__card-closed {
    flex-shrink: 0;
    color: var(--color-dark-gray);
    font-size: calc(13 * var(--u));
    font-weight: 400;
    line-height: 1.5;
}

/* ---------- エントリーボタン（TOP） ---------- */
.c-requirements__foot {
    display: flex;
    justify-content: center;
    margin-top: calc(60 * var(--u));
}


/* =============================================================
   詳細（p-requirements）
   プライバシーポリシーと同じ「薄いグレー地に見出し ＋ 本文 898px」
   ============================================================= */
.p-requirements {
    background-color: var(--color-light-gray);
    font-family: var(--font-noto);
}

/* ---------- 見出し（パンくず ＋ タイトル） ---------- */
/* html body に fixed ヘッダーぶんの padding-top が入っているので、
   ここではヘッダー下からの 20px だけを足す */
.p-requirements__head {
    padding-top: calc(20 * var(--u));
}

/* 左位置は FV ページのパンくず（.c-fv__bread）と同じ式 */
.p-requirements__bread {
    padding-inline: max(calc(20 * var(--u)), calc((100% - 1200px) / 2 - 88px));
}

/* 写真の上ではないので、パンくずは濃色になる */
.p-requirements__bread .c-fv__breadList {
    color: var(--color-dark-gray);
}

.p-requirements__bread .c-fv__breadItem a {
    color: var(--color-midium-gray);
}

.p-requirements__bread .c-fv__breadItem a:hover {
    color: var(--color-hamabo-blue);
}

.p-requirements__bread .c-fv__breadItem::after {
    background-color: var(--color-dark-gray);
}

.p-requirements__ttl {
    margin-top: calc(124 * var(--u));
}

.p-requirements__ttl .c-secTtl__en {
    color: var(--color-hamabo-blue);
    letter-spacing: 0.0353em;   /* 3px */
    text-transform: uppercase;
}

/* 職種名は文字数が多いものがあり、--u が 1px で固定される 769px 以上では
   85px のままだと画面からはみ出す（例：NEW GRADUATES は 790px 幅で 70px 超過）。
   1440px では今までどおり 85px、狭いときは画面幅に合わせて縮める */
@media screen and (min-width: 769px) {
    .p-requirements__ttl .c-secTtl__en {
        font-size: min(calc(85 * var(--u)), 8.8vw);
    }
}

.p-requirements__ttl .c-secTtl__ja {
    column-gap: calc(12 * var(--u));
    color: var(--color-dark-gray);
}

/* ---------- 本文 ---------- */
/* 本文カラムは 898px の中央寄せ。.l-inner と同じく max-width に左右余白ぶんを足しておく */
.p-requirements__body {
    max-width: calc(898 * var(--u) + 2 * var(--inner-pad));
    margin-inline: auto;
    padding-inline: var(--inner-pad);
    /* 下の余白は c-contact 側が持つ。main 直下の要素は 1px 重ねている（common.css の main > *）ので、
       ボタンの下の枠線が CONTACT に重なって切れないよう、そのぶんだけ足す */
    padding-bottom: 1px;
}

.p-requirements__intro {
    margin-top: calc(73 * var(--u));
}

.p-requirements__en {
    color: var(--color-medium-blue);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.p-requirements__lead {
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

.p-requirements__en + .p-requirements__lead {
    margin-top: calc(20 * var(--u));
}

.p-requirements__block {
    margin-top: calc(73 * var(--u));
}

.p-requirements__intro + .p-requirements__block {
    margin-top: calc(56 * var(--u));
}

.p-requirements__block + .p-requirements__block {
    margin-top: calc(90 * var(--u));
}

/* 大見出し。下に細い罫線、その左端に太い青の線を重ねる（プライバシーポリシーと同じ） */
.p-requirements__block-ttl {
    position: relative;
    padding-bottom: calc(11 * var(--u));
    border-bottom: 1px solid var(--color-light-silver);
    color: var(--color-hamabo-blue);
    font-size: calc(28 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0357em;   /* 1px */
    line-height: 1.75;
}

.p-requirements__block-ttl::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--u));
    width: calc(64 * var(--u));
    height: calc(2 * var(--u));
    background-color: var(--color-hamabo-blue);
}

.p-requirements__table {
    margin-top: calc(8 * var(--u));
}

/* 1 行ぶん。下線は会社概要の表と同じく「項目名の下 140px だけ青」→「残りはグレー」。
   border だと継ぎ目が出るので背景で引く */
.p-requirements__row {
    display: grid;
    grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr);
    padding-block: calc(26 * var(--u)) calc(20 * var(--u));
    background-image:
        linear-gradient(var(--color-hamabo-blue), var(--color-hamabo-blue)),
        linear-gradient(var(--color-light-silver), var(--color-light-silver));
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, left bottom;
    background-size: calc(140 * var(--u)) 1px, 100% 1px;
}

.p-requirements__row-label {
    padding-right: calc(20 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(16 * var(--u));
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.875;
}

.p-requirements__row-body {
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.875;
}

/* ---------- ボタン ---------- */
.p-requirements__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: calc(30 * var(--u));
    margin-top: calc(80 * var(--u));
}

/* エントリーボタン。採用情報の「エントリーする」と同じ大きさで、グレー地の上なので青く塗る */
.p-requirements__entryBtn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(430 * var(--u));
    max-width: 100%;
    height: calc(69 * var(--u));
    border: 1px solid var(--color-hamabo-blue);
    border-radius: calc(10 * var(--u));
    background-color: var(--color-hamabo-blue);
    color: #fff;
    font-size: calc(18 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0556em;   /* 1px */
    line-height: 1;
    transition: background-color 0.3s, color 0.3s;
}

.p-requirements__entryBtn:hover {
    background-color: #fff;
    color: var(--color-hamabo-blue);
}

.p-requirements__entryBtn-arrow {
    position: absolute;
    top: 50%;
    right: calc(27 * var(--u));
    width: calc(26 * var(--u));
    aspect-ratio: 26 / 8;
    background-color: #fff;
    transform: translateY(-50%);
    transition: background-color 0.3s, transform 0.3s;
    -webkit-mask: url(../img/common/arrow_entry.svg) no-repeat center / contain;
    mask: url(../img/common/arrow_entry.svg) no-repeat center / contain;
}

.p-requirements__entryBtn:hover .p-requirements__entryBtn-arrow {
    background-color: var(--color-hamabo-blue);
    transform: translate(calc(6 * var(--u)), -50%);
}

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

    .p-requirements__entryBtn:hover .p-requirements__entryBtn-arrow {
        transform: translateY(-50%);
    }
}

.p-requirements__closed {
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    line-height: 2;
}


/* =============================================================
   タブレット〜小さめの PC（769px 〜 1080px）
   2 列のままだとカードの中が窮屈になるので余白を詰める
   ============================================================= */
@media screen and (min-width: 769px) and (max-width: 1080px) {

    .c-requirements__card {
        column-gap: calc(16 * var(--u));
        padding-inline: calc(24 * var(--u)) calc(20 * var(--u));
    }

    .c-requirements__card-ttl {
        font-size: calc(19 * var(--u));
    }
}


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

    /* ---------- 一覧 ---------- */
    .c-requirements__head {
        display: block;
    }

    .c-requirements__lead {
        margin-top: calc(20 * var(--u));
        font-size: calc(15 * var(--u));
        letter-spacing: 0;
        line-height: calc(30 / 15);
    }

    .c-requirements__list,
    .c-requirements__list:has(> .c-requirements__item:only-child) {
        grid-template-columns: minmax(0, 1fr);
        gap: calc(10 * var(--u));
        margin-top: calc(32 * var(--u));
    }

    .c-requirements--inEntry {
        margin-top: calc(32 * var(--u));
    }

    .c-requirements__card {
        column-gap: calc(12 * var(--u));
        min-height: calc(80 * var(--u));
        padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
    }

    .c-requirements__card-en {
        font-size: calc(11 * var(--u));
    }

    .c-requirements__card-en + .c-requirements__card-ttl {
        margin-top: calc(6 * var(--u));
    }

    .c-requirements__card-ttl {
        font-size: calc(17 * var(--u));
        letter-spacing: 0;
    }

    .c-requirements__card-arrow {
        width: calc(32 * var(--u));
    }

    .c-requirements__card-arrow::after {
        width: calc(12 * var(--u));
    }

    .c-requirements__foot {
        margin-top: calc(40 * var(--u));
    }

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

    .p-requirements__head {
        padding-top: calc(16 * var(--u));
    }

    .p-requirements__ttl {
        margin-top: calc(46 * var(--u));
    }

    .p-requirements__intro,
    .p-requirements__block {
        margin-top: calc(48 * var(--u));
    }

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

    .p-requirements__block + .p-requirements__block {
        margin-top: calc(56 * var(--u));
    }

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

    .p-requirements__block-ttl {
        font-size: calc(22 * var(--u));
        letter-spacing: 0;
        line-height: calc(36 / 22);
    }

    .p-requirements__block-ttl::after {
        width: calc(48 * var(--u));
    }

    /* SP は項目名を内容の上に置く。青い下線も短くする */
    .p-requirements__row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: calc(4 * var(--u));
        padding-block: calc(18 * var(--u)) calc(16 * var(--u));
        background-size: calc(80 * var(--u)) 1px, 100% 1px;
    }

    .p-requirements__row-label {
        padding-right: 0;
        font-size: calc(15 * var(--u));
        line-height: 1.75;
    }

    .p-requirements__row-body {
        font-size: calc(15 * var(--u));
        letter-spacing: 0;
        line-height: calc(28 / 15);
    }

    .p-requirements__action {
        row-gap: calc(20 * var(--u));
        margin-top: calc(56 * var(--u));
    }

    .p-requirements__entryBtn {
        width: 100%;
        height: calc(64 * var(--u));
        font-size: calc(17 * var(--u));
        letter-spacing: 0;
    }

    .p-requirements__entryBtn-arrow {
        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);
    }
}