/* ============================
   採用情報(RECRUIT)ページ
   FV・パンくず・フッターは共通スタイルを使用。
   サイズはすべて 390px → 1920px で変化する clamp()（Figma: 採用-PC / 採用-SP）
============================ */

.recruit {
    /* 最後の募集要項〜フッターまでの余白: 100px → 180px */
    padding-bottom: clamp(6.25rem, 4.975rem + 5.23vw, 11.25rem);
}

/* ============================
   リード
============================ */
.recruit-intro {
    /* パンくず下線〜見出し: 40px → 151px */
    padding-top: clamp(2.5rem, 0.732rem + 7.25vw, 9.438rem);
}

/* 見出し: 24px → 48px / 行間 30px → 60px。各行の下に青い下線（PCは「いただける」の後で改行） */
.recruit-intro__title {
    margin: 0;
    font-family: "ShipporiGothic";
    font-weight: 400;
    font-size: clamp(1.5rem, 1.118rem + 1.569vw, 3rem);
    line-height: clamp(1.875rem, 1.397rem + 1.96vw, 3.75rem);
    color: #000;
}

.recruit-intro__title-inner {
    padding-right: 0.15em;
    background: linear-gradient(transparent calc(100% - 2px), #3172FF calc(100% - 2px));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* 見出し〜本文: 40px → 88px */
.recruit-intro__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 1.49rem + 2.09vw, 4rem);
    margin-top: clamp(2.5rem, 1.735rem + 3.14vw, 5.5rem);
}

/* 本文: 13px → 20px / 行間 2 */
.recruit-intro__text {
    flex: 0 1 59.563rem; /* 953px */
    font-size: clamp(0.813rem, 0.701rem + 0.46vw, 1.25rem);
    line-height: 2;
    color: #333;
}

.recruit-intro__text p {
    margin: 0;
}

.recruit-intro__text p + p {
    margin-top: 2em;
}

/* 人物イラスト: 幅 200px → 416px */
.recruit-intro__image {
    flex: 0 0 auto;
    width: clamp(12.5rem, 9.059rem + 14.12vw, 26rem);
}

/* ============================
   募集要項（未経験採用 / 経験者採用）
============================ */
/* リード〜未経験採用: 60px → 191px */
.recruit-job {
    margin-top: clamp(3.75rem, 1.663rem + 8.56vw, 11.938rem);
    /* ヘッダーメニューのリンク（#beginner / #career）で移動した時、固定ヘッダーに隠れないようにする
       固定ヘッダーぶんの余白（--header-offset: header.css で定義） */
    scroll-margin-top: var(--header-offset);
}

/* 未経験採用〜経験者採用: 80px → 247px */
.recruit-job + .recruit-job {
    margin-top: clamp(5rem, 2.339rem + 10.92vw, 15.438rem);
}

/* 見出し: 30px → 64px */
.recruit-job__heading {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.697rem + 1.24vw, 2.188rem);
    margin: 0;
    font-family: "ShipporiGothic";
    font-weight: 400;
    font-size: clamp(1.875rem, 1.333rem + 2.22vw, 4rem);
    line-height: 1;
    color: #000;
}

/* 見出し左の縦長ドット: 8×15px → 20×33px */
.recruit-job__dot {
    flex-shrink: 0;
    width: clamp(0.5rem, 0.309rem + 0.78vw, 1.25rem);
    height: clamp(0.938rem, 0.651rem + 1.18vw, 2.063rem);
    border-radius: 999px;
    background: #3172FF;
}

/* 見出し〜要項: 40px → 80px */
.recruit-job__body {
    display: flex;
    justify-content: space-between;
    margin-top: clamp(2.5rem, 1.863rem + 2.61vw, 5rem);
}

/* 要項: 本文 13px → 20px / 行間 2。見出し左のドットぶん字下げ */
.recruit-job__detail {
    flex: 0 1 36rem; /* 576px */
    padding-left: 1em;
    font-size: clamp(0.813rem, 0.701rem + 0.46vw, 1.25rem);
    line-height: 2;
    color: #333;
}

/* 項目同士: 30px → 80px */
.recruit-job__group + .recruit-job__group {
    margin-top: clamp(1.875rem, 1.078rem + 3.27vw, 5rem);
}

/* 項目名: 16px → 26px */
.recruit-job__label {
    margin: 0;
    font-family: "ShipporiGothic";
    font-weight: 400;
    font-size: clamp(1rem, 0.841rem + 0.65vw, 1.625rem);
    line-height: 1.6;
    color: #3172FF;
}

.recruit-job__text {
    margin: 0;
}

/* イラスト＋お問い合わせボタン */
.recruit-job__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

/* イラスト: 幅 180px → 497px */
.recruit-job__illust {
    width: clamp(11.25rem, 6.2rem + 20.72vw, 31.063rem);
    /* 落ち影（透過PNGのため drop-shadow でイラストの形に沿わせる）
       x: 4px → 8px / y: 5px → 10px / ぼかし: 2px → 4px（390px → 1920px） */
    filter: drop-shadow(
        clamp(0.25rem, 0.186rem + 0.26vw, 0.5rem)
        clamp(0.313rem, 0.233rem + 0.33vw, 0.625rem)
        clamp(0.125rem, 0.093rem + 0.13vw, 0.25rem)
        rgba(0, 0, 0, 0.2)
    );
}

/* お問い合わせボタン: 185×41px → 383×84px / 文字 12px → 24px */
.recruit-job__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2em;
    width: clamp(11.563rem, 8.408rem + 12.94vw, 23.938rem);
    height: clamp(2.563rem, 1.878rem + 2.81vw, 5.25rem);
    background: #444;
    color: #FFF;
    font-size: clamp(0.75rem, 0.559rem + 0.78vw, 1.5rem);
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s;
}

.recruit-job__button:hover {
    background: #3172FF;
}

.recruit-job__button-arrow {
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

/* ============================
   PC(769px以上)
============================ */
@media screen and (min-width: 769px) {

    /* 要項＋ボタンの幅（見出しは1440px幅のまま）
       769px時: コンテナ幅いっぱい(約609px) → 1920px時: 1080px。中央寄せ */
    .recruit-job__body {
        width: min(100%, clamp(38.088rem, 18.39rem + 40.92vw, 67.5rem));
        margin-left: auto;
        margin-right: auto;
    }

    /* イラスト列: デザイン通り要項の中央より少し上に置く（中央揃え＋下余白で上へずらす） */
    .recruit-job__side {
        align-self: center;
        margin-bottom: clamp(0rem, -7.516rem + 15.638vw, 11.25rem); /* 0px at 769px → 180px at 1920px */
    }
}

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

    .recruit-intro__body {
        flex-direction: column;
    }

    .recruit-intro__text {
        flex-basis: auto;
    }

    .recruit-job__body {
        flex-direction: column;
        gap: 2.5rem;
    }

    .recruit-job__detail {
        flex-basis: auto;
    }
}