/* 採用情報ページ：採用メッセージと募集内容の表 */
.c-recruitment {
    padding: var(--space-lg) 0 var(--space-md);
}

.c-recruitment--table {
    padding: var(--space-lg) 0;
}

/* NUMBERS の直後の募集内容の表は、上の余白を詰める */
.c-numbers + .c-recruitment--table {
    padding-top: var(--space-md);
}

/*
 * 採用メッセージ。原本はイラストの上部に、白い枠なしで直接文字を載せる。
 * 文字の位置はイラストの高さに対する割合で決める（上から約20%）。
 */
/*
 * 採用メッセージの下の NUMBERS との間の余白を詰める。背景イラストは薄い装飾
 * （opacity 0.25）で object-fit:contain のため、縦横比を詰めても歪まず少し小さく収まるだけ。
 */
.c-recruitment__message {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    aspect-ratio: 1995 / 650;
    text-align: center;
}

.c-recruitment__message-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    /* 原本のイラストは淡く薄めてあり、その上の文字が読める */
    opacity: 0.25;
}

.c-recruitment__message-text {
    position: relative;
    z-index: 1;
    padding-top: 7.5%;
}

.c-recruitment__heading {
    color: var(--color-primary);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-sm);
}

.c-recruitment__lead {
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.9;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-sm);
}

.c-recruitment__lead:last-child {
    margin-bottom: 0;
}

/*
 * スマホ幅ではイラストが低くなり文字が収まらないので、文章を上に、
 * イラストをその下に置く。
 */
@media (max-width: 599px) {
    .c-recruitment__message {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column-reverse;
    }

    .c-recruitment__message-bg {
        position: static;
        height: auto;
        margin-top: var(--space-sm);
    }

    .c-recruitment__message-text {
        padding-top: 0;
    }
}

/*
 * 募集内容の見出し。原本は左に小さく「Recruitment details／募集内容」、その右に大きく
 * 「採用情報」、右端にイラスト。下に紺の長い線を引く。
 */
/*
 * 「募集内容」ラベルは表の見出し列（th）と同じ幅（24%）・同じ中央揃えにして位置をそろえる。
 * 「採用情報」はラベルの直後に、td の左 padding と同じ余白を空けて続け、表の内容列（td）の開始位置にそろえる
 * （gap ではなく margin で個別に指定）。
 */
.c-recruitment__table-heading {
    display: flex;
    align-items: flex-end;
    gap: 0;
    max-width: 930px;
    margin: 0 auto;
    padding: 0 var(--space-md) var(--space-sm);
    border-bottom: 3px solid var(--color-primary);
}

.c-recruitment__table-label {
    display: flex;
    flex: 0 0 24%;
    flex-direction: column;
    align-items: center;
    margin: 0;
    color: var(--color-text);
    line-height: 1.5;
}

.c-recruitment__table-label-en {
    font-family: var(--font-heading-en);
    font-weight: 700;
    font-size: 0.6rem;
}

.c-recruitment__table-label-ja {
    font-weight: 700;
    font-size: 0.85rem;
}

.c-recruitment__table-title {
    color: var(--color-primary);
    font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
    letter-spacing: 0.06em;
    line-height: 1.3;
    /* tdの左パディングと同じ分だけ、ラベル（thと同じ24%幅）の直後に余白を空ける */
    margin: 0 0 0 var(--space-sm);
}

.c-recruitment__table-icon {
    width: 220px;
    height: auto;
    margin-left: auto;
}

/* 表：背景色・外枠なし、項目名は黒の太字（中央揃え）、行の間にグレーの線 */
.c-recruitment__table {
    width: 100%;
    max-width: 850px;
    margin: var(--space-md) auto 0;
    border-collapse: collapse;
    color: var(--color-text);
}

.c-recruitment__table th,
.c-recruitment__table td {
    padding: 1.1em var(--space-sm);
    border-bottom: 2px solid #b4b4b4;
    vertical-align: middle;
}

.c-recruitment__table tr:last-child th,
.c-recruitment__table tr:last-child td {
    border-bottom: none;
}

.c-recruitment__table th {
    width: 24%;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.c-recruitment__table td {
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

@media (max-width: 599px) {
    /*
     * 見出し（募集内容・採用情報）とイラストは、狭い端末（iPhone SE の375px幅など）でも1行に並べる（依頼主の指示）。
     * 折り返さず、収まらない分はイラストを最大120pxから縮める。
     */
    .c-recruitment__table-heading {
        align-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    .c-recruitment__table-icon {
        flex: 0 1 120px;
        width: 120px;
        min-width: 0;
    }

    /*
     * スマホ幅では見出し列（th）が細すぎて「募集／職種」「諸手／当」のように
     * 折り返すため、見出しを上・内容を下に積む。
     */
    .c-recruitment__table th,
    .c-recruitment__table td {
        display: block;
        width: auto;
    }

    .c-recruitment__table th {
        text-align: left;
        padding-bottom: 0.2em;
        border-bottom: none;
    }

    /* 「未経験者歓／迎」のように語の途中で割れないよう、文節で折り返す */
    .c-recruitment__table td {
        padding-top: 0;
        word-break: auto-phrase;
    }
}