/* ------------------------------------------------
PAGE: RECRUIT - 採用ページ  -
------------------------------------------------ */

/* 共通設定
-----------------------------------------*/
/* 採用ページ用のスタイル */
.page-recruit main {
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-2);
    letter-spacing: var(--letterSpacing-6);
}

.page-recruit .container {
    padding: clamp(56px, 5.4vw, 74px) var(--padding-container) clamp(60px, 6.2vw, 84px);
    position: relative;
}

/* 共通タイトル -------- */
.recruit__title2 {
    --min-size: 17;
    --max-size: 30;
    font-size: var(--clamp-size);
    color: var(--color-white);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-125);
    letter-spacing: var(--letterSpacing-12);
    background: var(--gradient-dark-reverse);
    padding: 1em var(--padding-container);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: var(--space-lg);
}

.recruit__title2::before {
    content: attr(data-en);
    display: block;
    --min-size: 15;
    --max-size: 30;
    font-size: var(--clamp-size);
    color: var(--color-sky);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-175);
    letter-spacing: var(--letterSpacing-6);
}

/* 共通タイトルのグラデーション反転セクション */
.personality__head,
.numbers__head {
    background: var(--gradient-dark) !important;
}

@media (width < 768px) {
    .recruit__title2 {
        flex-direction: column;
    }
}


/* KV
-----------------------------------------*/

.kv-recruit {
    position: relative;
    height: 90vh;
    height: 90svh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    filter: blur(2px);
    animation: BlurFadeIn 1s ease-out .5s 1 normal both;
}

.kv-recruit__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--zindex-back);
}

.kv-recruit__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.kv-recruit__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #11868b, #014d7f);
    opacity: 0.69;
    z-index: var(--zindex-middle);
}

/* 既存のスタイルはそのまま維持 */
.kv-recruit__subtitle {
    --min-size: 40;
    --max-size: 45;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-medium);
    color: var(--color-white);
    line-height: var(--lineHeight-1);
    letter-spacing: var(--letterSpacing-6);
    mix-blend-mode: overlay;
    padding-left: 20%;
    margin-bottom: clamp(18px, 2.6vw, 36px);
    z-index: calc(var(--zindex-front) + 1);
    opacity: 0;
    filter: blur(1px);
    animation: BlurFadeIn 1s ease-out 1.2s 1 normal both;
}

.kv-recruit__contents {
    position: relative;
    color: #fff;
    padding-left: 20%;
    z-index: var(--zindex-front);
    opacity: 0;
    filter: blur(1px);
    animation: BlurFadeIn 1s ease-out 1.8s 1 normal both;
}

.kv-recruit__title {
    --min-size: 30;
    --max-size: 60;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-serif);
    font-weight: var(--fontWeight-medium);
    letter-spacing: var(--letterSpacing-14);
    line-height: 1.33;
    margin-bottom: var(--space-xl);
}

.kv-recruit__text {
    --min-size: 13;
    --max-size: 18;
    font-size: var(--clamp-size);
    line-height: var(--lineHeight-225);
    letter-spacing: var(--letterSpacing-8);
}

.kv-recruit__button {
    position: absolute;
    bottom: var(--space-xl);
    right: var(--space-2xl);
    width: clamp(100px, 58vw, 260px);
    background: #bfa330;
    border: 3px solid var(--color-white);
    padding: 3px;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: var(--zindex-front);
    animation: BlurFadeIn 1s ease-out 2.5s 1 normal both;
}

.kv-recruit__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: url(../../img/page/recruit/path_kv_btn.svg);
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    --min-size: 14;
    --max-size: 20;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-180);
    color: white;
    text-align: center;
    position: relative;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 3.5px rgba(0, 0, 0, 0.2);
}

.kv-recruit__link::before {
    --min-size: 25;
    --max-size: 36;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-medium);
    color: #a58a17;
    content: attr(data-en);
    display: block;
    margin-right: 0.5em;
    transition: transform 0.3s ease;
}

.kv-recruit__link span {
    margin-top: 0.3em;
}

@media (width < 768px) {
    .kv-recruit {
        aspect-ratio: 1200 / 1792;
        width: 100%;
        height: 100%;
        min-height: 660px;
        max-height: unset;
    }

    .kv-recruit__subtitle,
    .kv-recruit__contents {
        padding-inline: 7%;
    }

    .kv-recruit__button {
        position: static;
        margin-top: 40px;
        align-self: center;
    }
}

/* MESSAGE
-----------------------------------------*/
.recruit-message {
    background: url(../../img/common/bg_grey.avif) repeat center/100% auto;
}

.recruit-message__inner {
    margin-inline: auto;
    max-width: 920px;
}

.recruit-message__title {
    --min-size: 25;
    --max-size: 30;
    font-size: var(--clamp-size);
    color: var(--color-sky);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-175);
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.recruit-message__wrap {
    display: flex;
    align-items: stretch;
    gap: var(--space-xl);
}

.recruit-message__copy {
    font-weight: var(--fontWeight-medium);
    font-family: var(--fontFamily-serif);
    color: var(--color-white);
    letter-spacing: var(--letterSpacing-6);
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 1.3vw, 16px);
    container-type: inline-size;

    p {
        font-size: clamp(14px, 4.53cqi, 26px);
        line-height: var(--lineHeight-150);
        padding: 0.25em 0.75em;
        background: linear-gradient(45deg, #0eb5bb, #006aaf);
        width: fit-content;
    }
}

.recruit-message__container {
    display: grid;
    grid-template-columns: 6.5fr 3.5fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-2xl);
}

/* キャッチコピー */
.recruit-message__copy {
    grid-row: 1/2;
    grid-column: 1/2;
    margin-bottom: var(--space-2xl);
}

/* アイテム */
.recruit-message__contents {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    max-width: 540px;
}

.recruit-message__text {
    --min-size: 14;
    --max-size: 16;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-2);
    letter-spacing: var(--letterSpacing-6);
    margin-bottom: 1em;
}

.recruit-message__name {
    --min-size: 16;
    --max-size: 24;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-serif);
    font-weight: var(--fontWeight-semi-bold);
    letter-spacing: var(--lineHeight-160);
    text-align: right;

    /* 役職 */
    span {
        --min-size: 12;
        --max-size: 15;
        font-size: var(--clamp-size);
        margin-right: 1em;
    }
}

.recruit-message__image {
    grid-row: 1 / 3;
    grid-column: 2 / 3;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }
}

@media (width < 768px) {

    .recruit-message {
        background: url(../../img/common/bg_grey-sp.avif) repeat center/100% auto;
    }

    .recruit-message__contents {
        padding: 0 var(--padding-container);
    }

    .recruit-message__text {
        padding-left: var(--padding-container);
    }

    /* キャッチコピーを幅いっぱいに */
    .recruit-message__copy {

        margin-bottom: clamp(14px, 3.5vw, 27px);

        p {
            width: 100%;
            text-align: center;
        }
    }

    .recruit-message__image.sp {
        float: right;
        width: 40%;
        margin: 0 0 1em 0.5em;
        aspect-ratio: 294/242;
        max-width: 242px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .recruit-message__contents {
        overflow: hidden;
        /* float のクリアフィックス */
        max-width: unset;
        padding-inline: 0 var(--padding-container);
    }

    .recruit-message__text {
        margin-bottom: 0;
        margin-top: 1em;
    }

    .recruit-message__image.pc {
        display: none;
    }

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

    /* Grid解除 */
    .recruit-message__container {
        display: block;
    }
}


/* FEAUTURES ３つの理由
-----------------------------------------*/
.features__body {
    padding-top: clamp(38px, 4.68vw, 64px);
    padding-bottom: clamp(64px, 11.27vw, 156px);
}

.features__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    --min-size: 28;
    --max-size: 47;
    column-gap: var(--clamp-size);
    list-style: decimal-leading-zero;
    padding: 0 var(--padding-container);
}

/* subgridでカードの高さを合わせる */
.features__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    margin-inline: auto;
}

.features__number {
    --min-size: 25;
    --max-size: 40;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-serif);
    line-height: var(--lineHeight-150);
    background: var(--gradient-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.25;
}

.features__number::before,
.features__number::after {
    content: "";
    display: block;
    --min-size: 27;
    --max-size: 44;
    width: var(--clamp-size);
    height: 2px;
    background: var(--gradient-dark);
    margin-top: 0.2em;
}

.features__number::before {
    margin-right: 0.2em;
}

.features__title {
    align-self: center;
    --min-size: 16;
    --max-size: 20;
    font-size: var(--clamp-size);
    /* グラデーション文字 */
    background: var(--gradient-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;

    font-family: var(--fontFamily-serif);
    line-height: var(--lineHeight-150);
    margin-bottom: 10px;
}

.features__image {
    --min-size: 16;
    --max-size: 26;
    margin-bottom: var(--clamp-size);
}

.features__text {
    --min-size: 14;
    --max-size: 15;
    font-size: var(--clamp-size);
}

@media (width < 768px) {

    .features__list {
        grid-template-columns: 1fr;
    }

    .features__item {
        margin-bottom: 30px;
    }

    .features__item:last-child {
        margin-bottom: 0px;
    }

    .features__text {
        line-height: var(--lineHeight-180);
    }
}

/* PERSONALITY 求める人物像
-----------------------------------------*/
.personality {
    background: url(../../img/common/bg_grey.avif) center center / 100% repeat;
    position: relative;
}

.personality::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #49c9d0, #2f89c4);
    z-index: 1;
    mix-blend-mode: multiply;
}

.personality__head {
    z-index: 2;
    position: relative;
}

.personality__body {
    padding-top: clamp(45px, 4.68vw, 64px);
    padding-bottom: clamp(84px, 7.9vw, 108px);
    position: relative;
    z-index: var(--zindex-middle);
}

.personality__copy {
    --min-size: 18;
    --max-size: 30;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-serif);
    color: var(--color-white);
    line-height: var(--lineHeight-160);
    text-align: center;
    padding-bottom: 28px;

    em {
        display: inline-block;
        padding: 0 0.2em;
        font-style: normal;
        position: relative;
    }

    em::after {
        content: "";
        display: inline-block;
        width: 100%;
        height: 0.4em;
        bottom: 0em;
        left: 50%;
        background: linear-gradient(90deg, #2591b2, #1f71a8);
        font-style: normal;
        position: absolute;
        z-index: -1;
        width: 87%;
        transform: translateX(-51%);
    }
}

.personality__text {
    color: var(--color-white);
    text-align: center;
    margin-bottom: var(--space-2xl);
}

/* 台形の画像 ---------- */
.personality__gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.personality__image {
    flex: 1;
    height: auto;
    overflow: hidden;

    /* 初期状態：JavaScriptでアニメーション開始するまで非表示 */
    opacity: 0;
    transform: translateX(-200px);
    filter: blur(4px);

    /* 台形のclip-pathは固定 */
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);

    margin-right: calc(-1 * clamp(0px, 3vw, 40px));
    margin-left: -20px;
}

.personality__gallery>.personality__image:first-child {
    margin-left: 0;
}

.personality__gallery>.personality__image:last-child {
    margin-right: 0;
}

/* アニメーション完了後の状態 */
.personality__image.is-visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.personality__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (width < 768px) {

    .personality {
        background: url(../../img/common/bg_grey-sp.avif) center center / 100% auto repeat;
        position: relative;
    }

    .personality__inner {
        padding-inline: var(--padding-container);
    }

    .personality__gallery {
        display: none;
    }

    .personality__text {
        text-align: left;
    }

    /* スライダー全体 */
    .personality__gallery-wrapper {
        margin-inline: calc(50% - 50vw);
    }

    /* 各スライド */
    .personality__gallery-slider .splide__slide {
        overflow: hidden;
        /* クリッピングパスを適用 */
        clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
        margin-right: -20px !important;
        max-width: 333px;
    }

    .personality__gallery-slider .splide__slide:last-child {
        margin-right: 0;
    }

    /* 画像のスタイル */
    .personality__gallery-slider .splide__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        max-height: 234px;
        margin-right: -20px;
        aspect-ratio: 333/234;
    }
}

/* MEMBER 
-----------------------------------------*/
/* PC */
.member__body {
    padding: clamp(56px, 5.4vw, 74px) var(--padding-container) clamp(72px, 8vw, 110px);
}

.member__inner {
    max-width: 850px;
    margin-inline: auto;
}

.member__item {
    display: flex;
    gap: var(--space-2xl);
    align-items: center;
}

.member__item:nth-child(even) {
    flex-direction: row-reverse;
    /* 奇数番目は画像を右に */
}

/* 各コンテンツブロック内のスタイル */
.member__content {
    flex: 5.5;
}

.member__copy {
    padding: 0.25em 0.75em;
    text-align: center;
    margin-inline: auto;
    box-shadow: var(--shadow);

    span {
        --min-size: 16;
        --max-size: 26;
        font-size: var(--clamp-size);
        font-family: var(--fontFamily-serif);
        /* グラデーション */
        background: var(--gradient-dark);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        width: fit-content;
    }
}

.member__name {
    --min-size: 14;
    --max-size: 20;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-serif);
    margin: var(--space-md) 0 var(--space-lg);
    text-align: center;
}

.member__text {
    --min-size: 13;
    --max-size: 15;
    font-size: var(--clamp-size);
}

.member__image {
    flex: 4.5;
}

.member__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* MEMBER3名のSplideスライダー -------- */
/* SPはスライダーなし */
.member__splide {
    display: block;
    /* PCでは通常通り表示されるが、中身はGridで制御される */
}

/* Splide矢印・ページネーションはPCでは非表示 */
.splide__arrows {
    display: none;
}

/* スマートフォン (1列 & Splide表示) */
@media (max-width: 768px) {

    .member__content {
        padding-inline: var(--padding-container);
    }


    .splide__arrows {
        display: block;
    }

    /* Splide矢印 高さ計算中は非表示 */
    .member__splide .splide__arrow {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    /* 高さ計算完了後 */
    .member__splide.arrows-ready .splide__arrow {
        opacity: 1;
    }


    .splide__arrow {
        background: #000;
        width: clamp(28px, 7vw, 56px);
        height: clamp(28px, 7vw, 56px);

        svg {
            width: 45%;
            height: 45%;
        }
    }

    .splide__arrow--prev {
        left: 0;
    }

    .splide__arrow--next {
        right: 0;
    }

    .member__item:nth-child(even) {
        flex-direction: column;
        /* 奇数番目は画像を右に */
    }

    /* Splide内の各スライドアイテム (li) のスタイル調整 */
    .member__item {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        gap: var(--space-sm);
    }

    .member__content {
        order: 1;
        /* SPでのテキストコンテンツの順序 */
        width: 100%;
        /* スマホでのテキストコンテンツの幅 */
    }

    .member__image {
        order: 0;
        width: 60%;
        height: auto;
    }
}

/* BY THE NUMBERS 数字で分かる
-----------------------------------------*/
.numbers__body {
    background: url(../../img/common/bg_grey.avif) center center / 100% repeat;
}

.numbers__inner {
    max-width: 920px;
    margin-inline: auto;
}

.numbers__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    --min-size: 13;
    --max-size: 26;
    gap: var(--clamp-size);
}

.numbers__item {
    background: white;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.3s ease;
    container-type: inline-size;
}

.numbers__item:hover {
    transform: translateY(-5px);
}

.numbers__title {
    background: linear-gradient(135deg, #4ecdc4, #2980b9);
    color: white;
    padding: var(--space-xs) var(--space-lg);
    margin: 0;
    font-size: clamp(12px, calc(18 / 300 * 100 * 1cqi), 18px);
    font-weight: var(--fontWeight-bold);
    text-align: center;
    line-height: var(--lineHeight-1);
}

.numbers__content {
    padding: var(--space-sm) var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.numbers__number {
    font-feature-settings: "palt" 1;
    /* グラデーション文字 */
    font-size: clamp(13px, calc(30 / 300 * 100 * 1cqi), 30px);
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--fontFamily-serif);
    line-height: var(--lineHeight-1);
    letter-spacing: var(--letterSpacing-0);
    display: inline-block;

    span {
        font-size: clamp(28px, calc(58 / 300 * 100 * 1cqi), 58px);
        display: inline-block;
    }
}

/* アイコン設定 */
/* 創業 */
.numbers__content--year .numbers__number span {
    font-size: clamp(21px, calc(46 / 300 * 100 * 1cqi), 46px);
}

/* 従業員 */
.numbers__content--employee .numbers__number {}

/* 年間休日 */
.numbers__content--holiday .numbers__number {}

/* 平均有給取得日数 */
.numbers__content--average .numbers__number {}

/* 有給取得率 */
.numbers__content--age .numbers__number {}

/* 男女比 */
.numbers__content--gender .numbers__number {}

/* 平均年齢 */
.numbers__content--age .numbers__number {}

/* 月平均残業時間 */
.numbers__content--over .numbers__number {}

/* 平均勤続年数 */
.numbers__content--tenure .numbers__number {
    letter-spacing: -0.06em;
}

.numbers__content::before {
    content: '';
    --max-size: 72;
    width: auto;
    height: clamp(36px, calc(72 / 300 * 100 * 1cqi), 72px);
    aspect-ratio: 1;
    margin-right: 4px;
}

/* アイコン設定 */
/* 創業 */
.numbers__content--year::before {
    aspect-ratio: 63/72;
    background: url(../../img/page/recruit/icon_year.svg) no-repeat center/contain;
}

/* 従業員 */
.numbers__content--employee::before {
    aspect-ratio: 54/72;
    background: url(../../img/page/recruit/icon_employee.svg) no-repeat center/contain;
}

/* 年間休日 */
.numbers__content--holiday::before {
    aspect-ratio: 50/72;
    background: url(../../img/page/recruit/icon_holiday.svg) no-repeat center/contain;
}

/* 平均有給取得日数 */

.numbers__content--average::before {
    background: url(../../img/page/recruit/icon_average.svg) no-repeat center/contain;
}

/* 有給取得率 */
.numbers__content--rate::before {
    aspect-ratio: 64/72;
    background: url(../../img/page/recruit/icon_rate.svg) no-repeat center/contain;
}

/* 男女比 */

.numbers__content--gender {
    padding: var(--space-xs) var(--space-lg);
}

.numbers__content--gender::before {
    aspect-ratio: 64/72;

    background: url(../../img/page/recruit/icon_gender.svg) no-repeat center/contain;
}

/* 平均年齢 */
.numbers__content--age::before {
    aspect-ratio: 61/72;
    background: url(../../img/page/recruit/icon_age.svg) no-repeat center/contain;
}

/* 月平均残業時間 */
.numbers__content--over::before {
    aspect-ratio: 61/72;
    background: url(../../img/page/recruit/icon_over.svg) no-repeat center/contain;
}

/* 平均 */
.numbers__content--tenure::before {
    aspect-ratio: 23/72;
    background: url(../../img/page/recruit/icon_tenure.svg) no-repeat center/contain;
}

/* 男女比 -------- */
.gender {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gender__item {
    display: flex;
    align-items: flex-end;
    color: #000;
}

.gender__item::before {
    content: "";
    display: block;
    aspect-ratio: 15/32;
    width: auto;
    height: clamp(15px, calc(32 / 300 * 100 * 1cqi), 32px);
    background: url(../../img/page/recruit/icon_man.svg) no-repeat center/contain;
}

.gender__item--female::before {
    background: url(../../img/page/recruit/icon_woman.svg) no-repeat center/contain;
}

.gender__label {
    display: inline-block;
    color: #000;
    writing-mode: vertical-rl;
    --min-size: 8;
    --max-size: 13;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-base);
}

.gender__number {
    font-size: clamp(12px, calc(20 / 300 * 100 * 1cqi), 20px);
    margin-top: 0.1em;

    span {
        font-size: clamp(21px, calc(37 / 300 * 100 * 1cqi), 37px);
    }
}

.gender__number--female {
    background: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    color: #eb5a98;
}

@media (width < 768px) {

    .numbers__body {
        background: url(../../img/common/bg_grey-sp.avif) center center / 100% repeat;
    }

    .numbers__list {
        grid-template-columns: 1fr 1fr;
    }

    .gender__label {
        font-size: clamp(5px, 1.8vw, 13px);
    }
}


/* OUR WORK environment 働く環境
-----------------------------------------*/
.environment__body {
    padding: clamp(35px, 7.3vw, 100px) var(--padding-container) clamp(64px, 8vw, 110px);
}

.environment__inner {
    max-width: 920px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xl);
}

.environment__article {
    height: 100%;
    align-items: center;
    gap: var(--space-2xl);
}

.environment__image {
    flex: 5;
    width: 100%;
    max-height: 232px;
    position: relative;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.environment__img::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-gray15);
    z-index: 10;
}

.environment__content {
    flex: 4.5;
}

.environment__title {
    --min-size: 16;
    --max-size: 20;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-black);
    letter-spacing: var(--letterSpacing-8);
    color: var(--color-sky);
    display: inline-block;
}

.environment__title::after {
    content: "";
    display: block;
    width: min(calc(100% + 2em), 220px);
    height: 1px;
    background-color: var(--color-black);
    margin-bottom: 0.5em;
}

.environment__text {
    --min-size: 13;
    --max-size: 16;
    font-size: var(--clamp-size);
    line-height: 1.781;
    margin-bottom: var(--space-lg);
}

@media (width < 768px) {

    .environment__inner {
        padding-inline: var(--padding-container);
    }

    .environment__image {
        flex: none;
        max-height: none;
        max-height: unset;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 710/300;
        }
    }

    .environment__content {
        flex: none;
    }

    .environment__text {
        line-height: var(--lineHeight-180);
        margin-bottom: 32px;
    }
}

/* ENTRY エントリー
-----------------------------------------*/
.entry {
    padding: clamp(56px, 5.4vw, 74px) var(--padding-container, 20px) clamp(60px, 6.2vw, 84px);
    position: relative;
    z-index: 0;

    /* グラデーションを本体に移動 */
    background: linear-gradient(90deg, #0eb5bb, #006aaf);
}

.entry::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    /* beforeの正確な高さ */
    left: 0;
    width: 100%;
    height: 100%;
    /* 残りの高さ */
    background-image: url(../../img/page/recruit/bg_recruit_1.avif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    z-index: -30;
    mix-blend-mode: multiply;
}

/* JOB-INFO 募集要項 ----------------*/
.job-info__inner {
    max-width: 1000px;
    padding-inline: var(--padding-container);
    --min-size: 46;
    --max-size: 66;
    padding-bottom: var(--clamp-size);
    margin-inline: auto;
    position: relative;
    z-index: 10;
}

.job-info__title {
    text-align: center;
    font-size: clamp(16px, 2.8vw, 30px);
    color: white;
    margin-bottom: clamp(24px, 2.2vw, 30px);
}


.job-info__title::before {
    content: attr(data-en);
    display: block;
    font-size: clamp(45px, 6vw, 88px);
    color: #5dfbff;
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-125);
    letter-spacing: 0.1em;
}

.job-info__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    margin-top: 48px;
}

.job-info__item {
    display: flex;
    --min-size: 12;
    --max-size: 40;
    column-gap: var(--clamp-size);
    ;
    align-items: flex-start;
    color: white;
    font-size: clamp(14px, 1.2vw, 16px);
}

.job-info__item dt {
    width: 5.5em;
    letter-spacing: 0.1em;
    font-weight: var(--fontWeight-bold);
    line-height: 1.6;
}

.job-info__item dd {
    flex: 1;
    line-height: 1.6;
}


/* 応募フォーム -------------------*/
.entry-form {
    padding: 0 var(--padding-container, 20px);
    z-index: 10;
    position: relative;
}

.entry-form__inner {
    max-width: 920px;
    background: white;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.entry-form__box {
    padding: clamp(10px, 3.5vw, 48px) var(--padding-container, 20px) clamp(38px, 9.8vw, 134px);
}

.entry-form__form {
    width: min(100%, 480px);
    margin: 0 auto;
}

.entry-form__title {
    background: var(--color-navy);
    width: 100%;
    color: white;
    text-align: center;
    padding: var(--space-md);
    margin: 0 0 30px;
    --min-size: 16;
    --max-size: 30;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-1);
}

/* お電話でのお問い合わせ -------- */
.entry-form__tel {
    --min-size: 25;
    --max-size: 40;
    margin-bottom: var(--clamp-size);
    width: 100%;
}

.entry-form__title3 {
    color: var(--color-navy);
    font-weight: var(--fontWeight-bold);
    --min-size: 14;
    --max-size: 18;
    font-size: var(--clamp-size);
    margin-bottom: 0.5em;
}

.entry-form__number {
    background: white;
    border: 2px solid #ddd;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--fontFamily-serif);
    color: #2c4f7c;
    width: 100%;
    padding: 8px;
    line-height: var(--lineHeight-125);
    border-radius: 0.5em;
    box-shadow: 5px 5px 4px #00000010;
}

.phone__link {
    --min-size: 23;
    --max-size: 34;
    font-size: var(--clamp-size);
    display: flex;
    align-self: center;
    gap: var(--space-md);
}

.phone__link::before {
    content: "";
    display: inline-block;
    background: url(../../img/page/recruit/icon_phone.svg) no-repeat center/contain;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

.phone__time {
    --min-size: 11;
    --max-size: 13;
    font-size: var(--clamp-size);
}


/* ------------------------------------------------
採用応募・採用問い合わせ
------------------------------------------------ */
.entry-form__radios {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em 1em;
    margin-bottom: 30px;
}

.entry-form__radios input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 0.5px solid #ddd;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    position: relative;
}

.entry-form__radios input[type="radio"]:checked {
    border-color: 0.5px solid var(--color-navy);
    background: radial-gradient(circle, var(--color-navy) 50%, white 51%);
}

/* タブ切り替え用のラジオボタンを非表示 */
input[name="tab-radio"] {
    display: none;
}

/* ボタンコンテナ */
.entry-form__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
    width: 100%;
}

/* デフォルトのボタンスタイル */
.entry-form__button {
    display: inline-block;
    padding: 15px 20px;
    border-radius: 0.5em;
    border: 1px solid #b3b3b3;
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.5;
    text-align: center;
    color: #2c4f7c;
    font-weight: var(--fontWeight-bold);
    background: #f8f9fa;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #2c4f7c;
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(44, 79, 124, 0.3);
    transform: translateY(-1px);
}

/* 選択されたボタンのスタイル（.entry-form__buttonの選択時と同じ） */
.entry-form__button:has(input[type="radio"]:checked) {
    background: var(--gradient-dark);
    color: white;
}

/* ホバー効果 */
.entry-form__button:hover {
    transform: translateY(-1px);
}

/* フォームスタイル */
.entry-form__form-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1em;
}

.entry-form__form-group {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    line-height: var(--lineHeight-1);


    dd {
        flex: 1;
        width: 100%;
    }
}

.entry-form__form-label {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4em;
    font-size: var(--fontSize-sm);
    font-weight: var(--fontWeight-black);
    color: #333;
    width: 8em;
    margin-top: 0.2em;
}

.entry-form__required {
    background: var(--gradient-dark);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
}

.entry-form__form-input,
.entry-form__form-textarea {
    flex: 1;
    width: 100%;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    line-height: var(--lineHeight-160);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.entry-form__form-input:focus,
.entry-form__form-textarea:focus {
    outline: none;
    border-color: #2c4f7c;
    box-shadow: 0 0 0 3px rgba(44, 79, 124, 0.1);
}

.entry-form__form-textarea {
    height: 120px;
    resize: vertical;
    font-family: inherit;
}

.entry-form__submit {
    background: var(--gradient-dark);
    color: white;
    padding: 3px;
    border: 3px solid var(--color-white);
    font-weight: var(--fontWeight-bold);
    cursor: pointer;
    width: 100%;
    margin-top: 45px;
    transition: all 0.3s ease;
    position: relative;
    display: grid;
    place-items: center;
    box-shadow: 4px 4px 3.5px rgba(0, 0, 0, 0.2);
}

.entry-form__btn {
    width: 100%;
    height: 100%;
    background: url(../../img/page/recruit/path_btn.svg) !important;
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat !important;
    text-align: center;
    padding: 0.3em;
    color: white;
    font-size: 22px;
    font-weight: bold;
    line-height: var(--lineHeight-180);
    letter-spacing: 0.07em;
    border: none;
    border-radius: 3px;
    box-shadow: 4px 4px 5px rgba(44, 79, 124, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    position: relative;
    cursor: pointer;

    span {
        margin-top: 0.3em;
    }
}

.entry-form__btn::before {
    --min-size: 25;
    --max-size: 37;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-medium);
    color: var(--color-sky);
    content: "Entry!";
    transition: transform 0.3s ease;
    mix-blend-mode: multiply;
    margin-right: 0.5em;
    margin-top: -0.1em;
}

.entry-form__btn::after {
    background: url(../../img/page/recruit/icon_recruit_arrow.svg) no-repeat center/contain;
    color: white;
    content: "";
    width: 1em;
    height: 1em;
    margin-top: 0.3em;

    display: block;
    transition: transform 0.3s ease;
    margin-left: 0.5em;
}

.entry-form__submit:active {
    transform: translateY(0);
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .entry-form__buttons {
        gap: 10px;
        margin-bottom: 20px;
    }

    .entry-form__button {
        padding: 12px 16px;
        font-size: clamp(14px, 3vw, 18px);
    }

    .entry-form__form-list {
        padding: 0 var(--padding-container);
    }

    .entry-form__form-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5em;
    }

    .entry-form__form-label {
        flex-direction: row;
        align-items: flex-end;
        width: 100%;
    }

    .entry-form__form-input,
    .entry-form__form-textarea {
        padding: 10px;
    }
}

/* ----------------------------------------
SNOW MONKEY FORMS変換用CSS
---------------------------------------- */

/* Snow Monkey Forms内のラジオボタンを非表示（入力画面でも） */
/* .snow-monkey-forms .entry-form__radios {
    display: none !important;
} */

.entry-form__form-group {
    padding-bottom: 0 !important;
}

/* webで応募・採用問い合わせのradio */
.entry-form__radios {

    .smf-item__col.smf-item__col--label {
        display: none;
    }

    /* 必須ボタン削除 */
    .smf-item__label::after {
        content: none;
    }

    .smf-radio-buttons-control__control {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
    }

    .entry-form__radios label:first-of-type {
        margin-right: 1em;
    }

    .entry-form__radio {
        --min-size: 12;
        --max-size: 14;
        font-size: var(--clamp-size);
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        cursor: pointer;
        color: #2c4f7c;
        font-weight: var(--fontWeight-bold);
    }

    input[type="radio"] {
        appearance: none;
        width: 18px;
        height: 18px;
        border: 0.5px solid #ddd;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        position: relative;
    }
}

/* スノーモンキーフォームのデフォルトのラジオボタン中心の白点を消す */
.smf-form .smf-radio-button-control__control:checked:before {
    content: none !important;
}

/* 新卒採用・中途採用 */
.entry-form__buttons {

    .smf-label {
        background: var(--gradient-dark);
        color: white;
        font-weight: var(--fontWeight-bold);
        box-shadow: 0 4px 12px rgba(44, 79, 124, 0.3);
        transform: translateY(-2px);
    }

    input[type="radio"] {
        display: none;
    }

    input[type="radio"]:checked {
        background: #fff;
    }

    /* 応募の方という文言を追加する（Snow Monkey Formsの設定ではHTML編集ができないため） */
    .smf-radio-button-control__label::after {
        content: "応募の方";
        display: block;
    }

    /* Snow Monkey Forms ラジオボタンコンテナ */
    .smf-radio-buttons-control__control {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        justify-content: center;
        width: 100%;
    }

    /* デフォルトのボタンスタイル（.entry-form__buttonと同じ） */
    .smf-radio-buttons-control__control .smf-label {
        display: inline-block;
        padding: 15px 20px;
        border-radius: 0.5em;
        border: 1px solid #b3b3b3;
        font-size: clamp(12px, 2vw, 28px);
        line-height: 1.5;
        text-align: center;
        color: #2c4f7c;
        font-weight: var(--fontWeight-bold);
        background: #f8f9fa;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    /* ラジオボタンを非表示 */
    .smf-radio-buttons-control__control input[type="radio"] {
        display: none;
    }

    /* ホバー効果 */
    .smf-radio-buttons-control__control .smf-label:hover {
        transform: translateY(-1px);
    }

    /* 選択されたボタンのスタイル（.entry-form__buttonの選択時と同じ） */
    .smf-radio-buttons-control__control .smf-label:has(input[type="radio"]:checked) {
        background: var(--gradient-dark);
        color: white;
        font-weight: var(--fontWeight-bold);
        box-shadow: 0 4px 12px rgba(44, 79, 124, 0.3);
        transform: translateY(-2px);
    }
}

/* フォームラベル */
.smf-item__label {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4em;
    font-size: var(--fontSize-sm);
    font-weight: var(--fontWeight-black);
    color: #333;
    width: 8em;
    margin-top: 0.2em;
}

.smf-item:has([data-validations*="required"]) .smf-item__label::after {
    content: "必須";
    background: var(--gradient-dark);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
}

.smf-item__col.smf-item__col--controls {
    flex: 1;
}

/* Snow Monkey Forms 送信ボタン */
.smf-action .smf-button-control {
    background: var(--gradient-dark);
    color: white;
    padding: 3px;
    border: 3px solid var(--color-white);
    font-weight: var(--fontWeight-bold);
    cursor: pointer;
    width: 100%;
    margin-top: 45px;
    transition: all 0.3s ease;
    position: relative;
    display: grid;
    place-items: center;
    box-shadow: 4px 4px 3.5px rgba(0, 0, 0, 0.2);
}

.smf-button-control__control {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: url(../../img/page/recruit/path_btn.svg) !important;
    background-size: 100% !important;
    background-position: top center;
    background-repeat: no-repeat ! important;
    color: white !important;
    font-size: 20px;
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-180);
    text-align: center;
    position: relative;
    transition: background 0.3s ease, transform 0.3s ease !important;
    box-shadow: 0px 4px 3.5px rgba(0, 0, 0, 0.2);
    /* reset */
    border: none !important;
    border-radius: unset;
    padding: 0.3em !important;
}

/* Entry!の表示（左側） */
.smf-button-control__control::before {
    --min-size: 25;
    --max-size: 37;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-medium);
    color: var(--color-sky);
    content: "Entry!";
    transition: transform 0.3s ease;
    mix-blend-mode: multiply;
    margin-right: 0.5em;
    margin-top: -0.1em;
}

/* 矢印アイコン（右側） */
.smf-button-control__control::after {
    content: "";
    background: url(../../img/page/recruit/icon_recruit_arrow.svg) no-repeat center/contain;
    width: 1em;
    height: 1em;
    display: block;
    transition: transform 0.3s ease;
    margin-left: 0.5em;
}

span.smf-button-control:hover {
    filter: brightness(1.1);
}

/* フォーム表示切り替え */
.contact-form {
    display: none;
}

.contact-form.active {
    display: block;
}

/* フォーム内の「お問い合わせ種類」フィールドを非表示 */
.snow-monkey-forms .contact-type-field,
.snow-monkey-forms [data-name*="contact_type"],
.snow-monkey-forms [data-name*="お問い合わせ種類"] {
    display: none !important;
}

/* 確認画面では「お問い合わせ種類」を表示 */
.snow-monkey-forms .smf-confirm .contact-type-field,
.snow-monkey-forms .smf-confirm [data-name*="contact_type"],
.snow-monkey-forms .smf-confirm [data-name*="お問い合わせ種類"] {
    display: block !important;
}

@media (width < 768px) {

    /* ボタンコンテナ（ラジオボタン選択） */
    .entry-form__buttons .smf-radio-buttons-control__control {
        gap: 10px;
        margin-bottom: 20px;
    }

    .smf-radio-buttons-control__control {
        flex-wrap: wrap;
    }

    /* ボタンスタイル */
    .entry-form__buttons .smf-radio-buttons-control__control .smf-label {
        padding: 12px 16px;
        font-size: clamp(14px, 3vw, 18px);
    }

    /* フォームリスト全体 */
    .smf-form {
        padding: 0 var(--padding-container);
    }

    /* フォームグループ（各項目） */
    .wp-block-snow-monkey-forms-item.smf-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5em;
    }

    /* フォームラベル */
    .smf-item__label {
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin-top: 0;
    }

    .smf-form--letter .smf-item__col--label {
        padding-bottom: 0 !important;
    }

    /* 採用応募・問い合わせラジオボタン */
    .entry-form__radios .smf-radio-buttons-control__control {
        gap: 1em;
    }
}

/* 確認画面 ----------------*/
.snow-monkey-form[data-screen="confirm"] {

    .entry-form__form-group {
        display: flex;
        align-items: center;
    }

    /* 項目ごとの余白調整 */
    .smf-form--letter .smf-item {
        padding: 1rem 0 !important;
    }

    /* 応募方法と新卒中とのラジオボタン */
    .entry-form__radios.smf-item {
        padding: 0 0 1rem !important;

        .smf-item__controls {
            display: flex;
            align-items: center;
        }

        .smf-item__controls::after {
            content: "を選択";
            display: inline-block;
            margin-left: 0.5em;
        }
    }

    /* 確認画面はラベルを左寄せに */
    .smf-item__label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4em;
        font-size: var(--fontSize-sm);
        font-weight: var(--fontWeight-black);
        color: #333;
        width: 8em;
        margin-top: 0.2em;
    }

    /* Snow Monkey Forms アクション全体を横並びに */
    .smf-action {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    /* 戻るボタン 40% */
    .smf-button-control:has(button[data-action="back"]) {
        width: 40% !important;
        background: var(--gradient-dark);
        color: white;
        padding: 3px;
        border: 3px solid var(--color-white);
        font-weight: var(--fontWeight-bold);
        cursor: pointer;
        margin-top: 45px;
        transition: all 0.3s ease;
        position: relative;
        display: grid;
        place-items: center;
        box-shadow: 4px 4px 3.5px rgba(0, 0, 0, 0.2);
    }

    /* 送信するボタン 60% */
    .smf-button-control:has(button[data-action="complete"]) {
        width: 60% !important;
        background: var(--gradient-dark);
        color: white;
        padding: 3px;
        border: 3px solid var(--color-white);
        font-weight: var(--fontWeight-bold);
        cursor: pointer;
        margin-top: 45px;
        transition: all 0.3s ease;
        position: relative;
        display: grid;
        place-items: center;
        box-shadow: 4px 4px 3.5px rgba(0, 0, 0, 0.2);
    }

    /* 戻るボタンのEntry!を消去 */
    button[data-action="back"]::before {
        display: none !important;
    }

    /* 送信するボタンのEntry!も消去（必要に応じて） */
    button[data-action="complete"]::before {
        display: none !important;
    }

    /* 既存のボタンスタイルを維持 */
    .smf-button-control__control {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: unset !important;
        color: white !important;
        font-size: 20px;
        font-weight: var(--fontWeight-bold);
        line-height: var(--lineHeight-180);
        text-align: center;
        position: relative;
        transition: background 0.3s ease, transform 0.3s ease !important;
        box-shadow: 0px 4px 3.5px rgba(0, 0, 0, 0.2);
        border: none !important;
        border-radius: unset;
        padding: 0.5em !important;
    }

    /* 戻るボタンの矢印アイコンを左向きに */
    button[data-action="back"]::after {
        content: none;
    }

    button[data-action="back"]::before {
        content: "";
        background: url(../../img/page/recruit/icon_recruit_arrow.svg) no-repeat center/contain;
        width: 1em;
        height: 1em;
        display: block;
        transition: transform 0.3s ease;
        margin-left: 0.5em;
        transform: scaleX(-1);
    }

    @media (width < 768px) {

        .entry-form__form-group {
            display: flex;
            align-items: flex-start;
        }

        .smf-button-control__control {
            font-size: clamp(16px, 4vw, 20px);
        }
    }
}


/* ================================================
PHP工房
================================================ */

/* エラー表示 */
#recruitForm .error-message {
    color: #d32f2f !important;
    font-size: 14px !important;
    margin-top: 5px !important;
    display: none;
}

#recruitForm .error {
    border-color: #d32f2f !important;
    background: #fff8f8 !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #recruitForm .entry-form__buttons {
        gap: 10px !important;
    }

    #recruitForm .smf-item {
        flex-direction: column !important;
        gap: 0.5em !important;
    }

    #recruitForm .smf-item__label {
        flex-direction: row !important;
        width: 100% !important;
    }
}


/* ================================================
確認画面用
================================================ */
/* デフォルトのスタイルを活用 */

table.formTable {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

table.formTable td,
table.formTable th {
    border: 1px solid #ccc;
    padding: 10px;
}

table.formTable th {
    width: 30%;
    font-weight: normal;
    background: #efefef;
    text-align: left;
}

p.error_messe {
    margin: 5px 0;
    color: red;
}

/*　簡易版レスポンシブ用CSS　*/
@media screen and (max-width:572px) {

    table.formTable th,
    table.formTable td {
        width: auto;
        display: block;
    }

    table.formTable td,
    table.formTable th {
        border: 1px solid #ccc;
        padding: 10px;
        border-bottom: 0;
        /* 基本的に消す */
        min-height: 38px;
        /* 最低限の高さを確保 */
    }

    table.formTable tr:last-of-type td {
        border-bottom: 1px solid #ccc;
    }

    /* 最初以外の th の上線を消す */
    table.formTable th:not(:first-child) {
        border-top: none;
    }

    /* ボタンを全幅に */
    form input[type="submit"],
    form input[type="reset"],
    form input[type="button"] {
        display: block;
        width: 100%;
        height: 40px;
    }
}

.entry-form__action {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 40px;
}

.entry-form__submit--center {
    margin-inline: auto;
}


.entry-form__submit:hover {
    background: var(--gradient);
}

.entry-form__btn--submit .entry-form__btn-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url('/wp-content/themes/systemproduct/assets/img/page/recruit/icon_recruit_arrow.svg') no-repeat center/contain;
    margin-left: 12px;
    vertical-align: middle;
}


/* 確認画面のメッセージ */
.confirm__message {
    line-height: var(--lineHeight-150);
    margin-bottom: var(--space-2xl);
    font-weight: var(--fontWeight-medium);
}

/* 戻るボタン 40% */
.entry-form__submit:has(.entry-form__back) {
    width: 40% !important;
    padding: 3px;
    border: 3px solid var(--color-white);
    font-weight: var(--fontWeight-bold);
    cursor: pointer;
    margin-top: 45px;
    transition: all 0.3s ease;
    position: relative;
    display: grid;
    place-items: center;
    box-shadow: 4px 4px 3.5px rgba(0, 0, 0, 0.2);
}

/* 送信するボタン 60% */
.entry-form__submit:has(.entry-form__send) {
    width: 60% !important;
    background: var(--gradient-dark);
    cursor: pointer;
    margin-top: 45px;
    ;
    place-items: center;
}

/* 戻るボタンのEntry!を消去 */
.entry-form__back::before {
    display: none !important;
}

/* 送信するボタンのEntry!も消去（必要に応じて） */
.entry-form__send::before {
    display: none !important;
}

.entry-form__btn:is(.entry-form__back, .entry-form__send) {
    background: unset !important;
}

/* 戻るボタンの矢印アイコンを左向きに */
.entry-form__back::after {
    content: none;
}

.entry-form__back::before {
    content: "";
    background: url(../../img/page/recruit/icon_recruit_arrow.svg) no-repeat center/contain;
    width: 1em;
    height: 1em;
    display: block;
    margin-left: 0.5em;
    rotate: 180deg;
    transition: transform 0.3s ease;
}

/* 送信するボタンのEntry!を非表示 */
.entry-form__btn:is(.entry-form__send)::before {
    display: none;
}

@media (width < 768px) {

    .entry-form__form-group {
        display: flex;
        align-items: flex-start;
    }

    .entry-form__label {
        font-size: clamp(16px, 4vw, 20px);
    }
}

/* ================================================
Thanksページ用
================================================ */

/* 送信完了ページのメッセージ */
.thanks__message {
    line-height: var(--lineHeight-180);
    margin-bottom: var(--space-2xl);
    font-weight: var(--fontWeight-medium);
}

@media (max-width: 768px) {
    .thanks__message {
        padding-inline: 1em;
    }
}