@charset "UTF-8";
/* ====================================================
　採用情報ページ固有CSS（ファーストビュー以降）
　pageRecruit_body.css

　【スマートフォン版の実装方針】
　Figmaのスマホアートボード幅390pxを基準比率とし、320〜430px程度の画面幅で
　常に同じデザイン比率を維持するため、font-size・余白・サイズ指定は
　vw のみで画面幅に比例して拡大縮小させる（390pxで頭打ちにしない・下限も設けない）。
　margin/paddingはem・%・vw・vhのみを使用し、pxは使用しない。
==================================================== */


/* ######################################################################################

　共通コンテナ（採用情報ページ内側1000px幅コンテナ）

###################################################################################### */

/* ----- recruitBody ----- */
@media print, screen and (min-width: 768px){
    .recruitBody{ max-width: 1080px; }
}
@media screen and (max-width: 767px){
    /* Figma実測：本ページのSP左右余白は24px（共通.contentsの20pxとは異なる） */
    .recruitBody{ padding-right: 6.1538vw; padding-left: 6.1538vw; }
}


/* ######################################################################################

　RECRUIT INTRO（採用メッセージ・現場写真）

###################################################################################### */

/* ----- recruitIntro ----- */
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：パンくず下端〜見出し=95px */
    .recruitIntro{ padding-top: 5.9375em; }
}
@media screen and (max-width: 767px){
    .recruitIntro{ padding-top: 12.3077vw; }
}

/* recruitIntro__heading（共通部分は widget/sectionHeading.css の .sectionHeading）
---------------------------------------------------- */
.recruitIntro__heading{
    --sectionHeading-textAlign: center;
    --sectionHeading-lineHeight-pc: 1.433;
    /* Figma SPアートボード幅390px基準：24px ÷ 390 × 100 */
    --sectionHeading-fontSize-sp: 6.1538vw;
    --sectionHeading-lineHeight-sp: 1.5;
}

/* recruitIntro__lead（共通部分は widget/sectionHeading.css の .sectionLead）
---------------------------------------------------- */
.recruitIntro__lead{
    /* 0.25em刻み（自身のfont-size 14px基準）：27px÷14 */
    --sectionLead-marginTop-pc: 1.9286em;
    --sectionLead-fontSize-pc: 1.4rem;
    --sectionLead-textAlign-pc: center;
    /* Figma SPアートボード幅390px基準：20px・15px ÷ 390 × 100。SPは左揃え・自然改行 */
    --sectionLead-lineHeight-sp: 1.733;
    --sectionLead-textAlign-sp: left;
}

/* recruitIntro__photoList
---------------------------------------------------- */
.recruitIntro__photoList{
    display: flex;
}
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：写真リスト上部=64px／画像間gap=5px */
    .recruitIntro__photoList{ margin-top: 4em; gap: 0.3125em; }
}
@media screen and (max-width: 767px){
    .recruitIntro__photoList{ margin-top: 5.641vw; gap: 2.0513vw; }
}

.recruitIntro__photoItem{ flex: 1; min-width: 0; }
.recruitIntro__photoItem img{
    display: block;
    width: 100%;
    height: auto;
}
@media print, screen and (min-width: 768px){
    /* PC書き出し画像は330×220（3:2）で統一 */
    .recruitIntro__photoItem img{ aspect-ratio: 3 / 2; }
}
@media screen and (max-width: 767px){
    /* SP書き出し画像は109×100前後（ほぼ1:1に近い横長）で統一 */
    .recruitIntro__photoItem img{ aspect-ratio: 109 / 100; }
}


/* ######################################################################################

　RECRUIT OVERVIEW（採用募集要項）

###################################################################################### */

/* ----- recruitOverview__titleBlock ----- */
.recruitOverview__titleBlock{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：写真リスト下端〜タイトルブロック=60px */
    .recruitOverview__titleBlock{ margin-top: 3.75em; }
}
@media screen and (max-width: 767px){
    .recruitOverview__titleBlock{ margin-top: 7.6923vw; }
}

/* recruitOverview__eyebrow
　共通スタイルは widget/sectionHeading.css の .sectionEyebrow（ラベル→見出しの
　間隔・色・太さを共通化。旧・titleBlock側gapとの重複指定はしない） */

/* recruitOverview__heading
---------------------------------------------------- */
.recruitOverview__heading{
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text);
}
@media print, screen and (min-width: 768px){
    .recruitOverview__heading{ font-size: 2.8rem; }
}
@media screen and (max-width: 767px){
    .recruitOverview__heading{ font-size: 5.641vw; }
}

/* recruitOverview__notice
---------------------------------------------------- */
.recruitOverview__notice{
    line-height: 2;
    text-align: center;
    color: var(--color-text);
}
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（自身のfont-size 14px基準）：35px÷14 */
    .recruitOverview__notice{ margin-top: 2.5em; font-size: 1.4rem; }
}
@media screen and (max-width: 767px){
    .recruitOverview__notice{ margin-top: 9.2308vw; font-size: 3.5897vw; line-height: 2; }
}

/* recruitOverview__blockHeading（応募方法・募集概要の小見出し／2色バー付き）
---------------------------------------------------- */
.recruitOverview__blockHeading{
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--color-text);
}
.recruitOverview__blockHeading::before{
    content: "";
    display: block;
    flex-shrink: 0;
    width: 3px;
    height: 23px;
    background: linear-gradient(to bottom, var(--color-primary) 0 50%, #dedede 50% 100%);
}
@media print, screen and (min-width: 768px){
    .recruitOverview__blockHeading{ gap: 0.5em; font-size: 2.2rem; }
    /* 0.25em刻み（基準16px）：注記下端〜「応募方法」=56px／申込方法下端〜「募集概要」=65px */
    .recruitOverview__notice + .recruitOverview__blockHeading{ margin-top: 3.5em; }
    .recruitOverview__methodBox + .recruitOverview__blockHeading{ margin-top: 4.0625em; }
}
@media screen and (max-width: 767px){
    .recruitOverview__blockHeading{ gap: 3.0769vw; font-size: 4.6154vw; }
    .recruitOverview__notice + .recruitOverview__blockHeading{ margin-top: 15.1282vw; }
    .recruitOverview__methodBox + .recruitOverview__blockHeading{ margin-top: 16.9231vw; }
}

/* recruitOverview__methodBox
---------------------------------------------------- */
.recruitOverview__methodBox{
    border: 1px solid #ddd;
    line-height: 1.867;
    color: var(--color-text);
}
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：見出し下端〜枠=26px／枠内padding：上下左右とも30px（Figma実測、四辺均等） */
    .recruitOverview__methodBox{
        margin-top: 1.625em;
        padding-top: 1.875em;
        padding-right: 1.875em;
        padding-bottom: 1.875em;
        padding-left: 1.875em;
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 767px){
    /* Figma実測：SPは枠線なし・内側paddingなし（本文が他要素と同じ左端に揃う） */
    .recruitOverview__methodBox{
        margin-top: 3.8462vw;
        padding: 0;
        font-size: 3.8462vw;
        border: none;
    }
}


/* ######################################################################################

　jobTable（募集概要テーブル）

###################################################################################### */

.jobTable{ width: 100%; }
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：見出し下端〜表=27px */
    .jobTable{ margin-top: 1.6875em; margin-bottom: 7.5625em; border: 1px solid #ccd4e0; }
}
@media screen and (max-width: 767px){
    .jobTable{ margin-top: 6.1538vw; border-top: 1px solid #a5b2c7; }
}

.jobTable__row{
    border-bottom: 1px solid #ccd4e0;
}
@media print, screen and (min-width: 768px){
    /* 行自身は余白を持たない（dt/ddの縦罫線をFigma実測どおり行の高さいっぱいに
       連続させるため。行にpaddingを持たせるとdt/ddがその内側の高さしか
       stretchせず、行と行の間の余白部分だけ縦罫線が途切れる原因になっていた） */
    .jobTable__row{
        display: flex;
        align-items: stretch;
    }
    .jobTable__row:last-child{ border-bottom: none; }
}
@media screen and (max-width: 767px){
    .jobTable__row{
        display: flex;
        flex-direction: column;
        gap: 2.0513vw;
        padding-top: 4.359vw;
        padding-bottom: 4.359vw;
    }
}

.jobTable__row dt{
    flex-shrink: 0;
    font-weight: 400;
    color: var(--color-text);
}
.jobTable__row dd{
    line-height: 1.6;
}
@media print, screen and (min-width: 768px){
    /* 行の上下padding（旧13px）と左右padding（旧19px）はここでdt/ddそれぞれの
       paddingとして持たせる（行自身は余白ゼロ・align-items:stretchのため、
       dtの高さ＝行の高さいっぱいになり、border-rightの縦罫線が行間で
       途切れなくなる） */
    .jobTable__row dt{
        display: flex;
        align-items: center;
        width: 150px;
        padding-top: 0.8125em;
        padding-right: 1.3125em;
        padding-bottom: 0.8125em;
        padding-left: 1.1875em;
        /* 横罫線（.jobTable__row）と同じ色に統一（旧#ddd は横線と別色で1本だけ
           濃く見える原因になっていた） */
        border-right: 1px solid #ccd4e0;
        font-size: 1.5rem;
    }
    .jobTable__row dd{
        display: flex;
        align-items: center;
        padding-top: 0.8125em;
        padding-right: 1.1875em;
        padding-bottom: 0.8125em;
        padding-left: 1.3125em;
        font-size: 1.5rem;
        color: #222;
    }
}
@media screen and (max-width: 767px){
    .jobTable__row dt{
        width: auto;
        font-weight: 700;
        font-size: 3.5897vw;
        color: var(--color-primary);
    }
    .jobTable__row dd{
        line-height: 1.733;
        font-size: 3.8462vw;
        color: var(--color-text);
    }
}