/*************************************
** RECRUITページ用 style設定
*************************************/

:root {
    /*フォント*/
    --font-family-1: "Noto Sans JP", sans-serif;
    --font-family-2: "Lato", sans-serif;

    /*フォントサイズ*/
    --font-ss: 14px;
    --font-sm: 16px;
    --font-sl: 18px;
    --font-mid: 20px;
    --font-ms: 22px;
    --font-mm: 24px;
    --font-lm: 32px;
    --font-l: 36px;

    /*背景*/
    --sub-bk1: #F3F7F6;
    --sub-bk2: linear-gradient(
        to right,
        #003921 0%,
        #006038 100%
    );
    --entry-btn-bk: linear-gradient(
        40deg,
        #EB0725 0%,
        #DD0F4E 40%,
        #C418AA 100%
    );
    --sub-bk3: #C0D8CE;

    /* color */
    --accent-color1: #005733;
    --accent-color2: #E9F2E9;
    --title-sub-color1: #E6EFEA;
    --title-sub-color2: #0C6A42;

    --font-color-st: #333;

    /*角丸*/
    --br25: 25px;
    --br20: 20px;
    --br10: 10px;
    --br5: 5px;

    /* width.padding.margin */
    --max-wid-pc: 1440px;
    --contents-pd: 80px;
}
@media screen and (max-width: 768px) {
    :root {
        /*フォントサイズ*/
        --font-ss: 12px;
        --font-sm: 13px;
        --font-sl: 14px;
        --font-mid: 15px;
        --font-ms: 16px;
        --font-mm: 18px;
        --font-lm: 18px;
        --font-l: 20px;

        /* width.padding.margin */
        --contents-pd: 20px;
    }
}

/* 共通項目
***************************/

.l-wrapper {
    overflow: hidden;
}

/* 背景色 */
.bg-sub1 { background: var(--sub-bk1); }
.bg-sub2 { background: var(--sub-bk2); }
.bg-sub3 { background: var(--sub-bk3); }


.entry-btn {
    font-size: var(--font-mid);
    font-family: var(--font-family-2);
    color: white;
    padding: .4em 2.89em;
    background: var(--entry-btn-bk);
    text-decoration: none;
    border-radius: var(--br5);
    box-shadow: 2px 2px 20px rgba(0,0,0,.25);
}

/* padding */
.pd-tb80-120 { padding: 90px 0 120px; }
@media screen and (max-width: 768px) {
    .pd-tb80-120 { padding: 60px 0 60px; }
}

/* mask */
.-mask {
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    &.-ct {
        mask-position: center top;
        -webkit-mask-position: center top;
    }
}

/* ヘッダー
***************************/
:root {
    --header-logo-w: 70px;
    --recruit-drawer-w: 25px;
}
.l-header.-recruit {
    position: relative !important;
    top: 0;
    & .header__logo {
        z-index: 20;
    }
    & .header__body {
        max-width: var(--max-wid-pc);
        padding: 12px var(--contents-pd);
        margin: 0 auto;
        justify-content: space-between;
        & .header__menu {
            width: fit-content;
            margin: 0 auto;
            padding-right: 190px;
            z-index: 20;
            & .g-navi {
                & a {
                    font-size: var(--font-sm);
                    &.foot-only {
                        display: none;
                    }
                }
            }
        }
        & .entry-btn-wrap {
            position: fixed;
            width: 100%;
            height: fit-content;
            max-width: var(--max-wid-pc);
            padding: 0 var(--contents-pd);
            top: calc(var(--ark-adminbar_height) + 18px);
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: right;
            z-index: 10;
        }
        & .recruit-drawer {
            display: none;
        }
    }
    
}
@media screen and (max-width: 768px) {
    .l-header.-recruit {
        & .header__body {
            & .entry-btn-wrap {
                display: none;
            }
            & .recruit-drawer {
                display: block;    
                & .recruit-drawer-btn {
                    position: relative;
                    display: flex;
                    width: var(--recruit-drawer-w);
                    height: calc(var(--recruit-drawer-w) * .8);
                    user-select: none;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    cursor: pointer;
                    & span {
                        position: absolute;
                        display: block;
                        width: 100%;
                        height: 4px;
                        background: #333;
                        left: 0;
                        right: 0;
                        margin: auto;
                        transition: .5s;
                    }
                    & span:nth-child(1) {
                        top: 0;
                    }
                    & span:nth-child(2) {
                        top: 0;
                        bottom: 0;
                    }
                    & span:nth-child(3) {
                        bottom: 0;
                    }
                }
                & .recruit-drawer-menu {
                    position: absolute;
                    top: 50px;
                    right: -1000px;
                    width: 100%;
                    height: 85vh;
                    background: white;
                    transition: .5s;
                    padding: 35px;
                    & .g-navi {
                        & a {
                            display: block;
                            text-decoration: none;
                            color: #333;
                            font-size: 20px;
                            font-weight: 600;
                            font-family: var(--font-family-1);
                            padding: 20px;
                            &.foot-only {
                                display: none;
                            }
                        }
                    }
                    & .entry-btn {
                        display: block;
                        width: fit-content;
                        margin: 30px auto;
                        padding: .5em 1em;
                        font-size: 20px;
                    }
                }
            }
            & .-active.recruit-drawer {
                & .recruit-drawer-btn {
                    & span:nth-child(1) {
                        top: 0;
                        bottom: 0;
                        transform: rotate(-45deg);
                    }
                    & span:nth-child(2) {
                        display: none;
                    }
                    & span:nth-child(3) {
                        top: 0;
                        bottom: 0;
                        transform: rotate(45deg);
                    }
                }
                & .recruit-drawer-menu {
                    right: 0;
                }
            }
        }
    }
}

/* フッター
***************************/
.p-fixBtnWrap {
    top: 90dvh;
    bottom: auto;
}
@media screen and (max-width: 768px) {
    .p-fixBtnWrap {
        top: 78dvh;
        right: 20px;
    }
}

.l-footer {
    background: var(--accent-color1);
}
:root {
    --footer-logo-w: 70px;
}
.l-footer.-recruit {
    & .l-footer__inner {
        padding: 40px 0;
        & .footer__body {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            max-width: var(--max-wid-pc);
            padding: 0 var(--contents-pd);
            margin: 0 auto 20px;
            align-items: center;
            & .footer__logo {
                width: var(--footer-logo-w);
            }
            & .footer__menu {
                width: fit-content;
                & .g-navi {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                    align-items: center;
                    & a {
                        display: block;
                        height: fit-content;
                        font-family: var(--font-family0);
                        font-weight: 500;
                        font-size: var(--font-ss);
                        text-decoration: none;
                        color: white;
                        margin: 10px;
                        transition: .5s;
                    }
                    & a:not(:last-child) {
                        margin-right: 35px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .l-footer.-recruit {
        & .l-footer__inner {
            padding: 40px 0 100px;
            & .footer__body {
                padding: 0 30px;
                margin-bottom: 50px;
                & .footer__menu {
                    & .g-navi {
                        justify-content: flex-start;
                        & a {
                            width: 100%;
                            font-size: 20px;
                            margin: 15px 0;
                        }
                    }
                }
                & .entry-btn {
                    display: none;
                }
            }
        }
    }
}


/* コンテンツ
***************************/
.p-breadcrumb {
    display: none;
}
.l-content__body {
    margin: 0 auto;
}

/***** 共通項目 *****/

/* ブロック・見出し */
.recruit-contents {
    width: 100%;
    max-width: var(--max-wid-pc);
    padding: 0 var(--contents-pd);
    margin: 0 auto;
    & .contents-wrap.-pd {
        padding: 0 32px;
    }
    & h2, h3, h4, h5, p, a, dt, dd, li {
        font-family: var(--font-family-1);
        color: var(--font-color-st);
        font-weight: 500;
        line-height: 1.6;
    }
    & h2 {
        position: relative;
        width: fit-content;
        padding: .1em .7em .1em 1.4em;
        font-size: 48px;
        color: var(--accent-color1);
        margin: 0 auto 80px;
        text-align: center;
        font-weight: 400;
        border-bottom: 3px solid var(--accent-color1);
        z-index: 2;
        &::before {
            position: absolute;
            content: "";
            width: 3px;
            height: 55px;
            bottom: -13px;
            left: 22px;
            background: var(--accent-color1);
            transform: rotate(55deg);
        }
        & span {
            position: absolute;
            display: inline-block;
            font-family: var(--font-family-2);
            font-size: 40px;
            color: var(--title-sub-color1);
            top: -.6em;
            left: .6em;
            right: 0;
            margin: 0 auto;
            font-weight: 600;
            z-index: -1;
        }
    }
    & p {
        font-size: var(--font-mm);
    }
    & span.w-marker {
        display: inline-block;
        background: white;
        padding: 0 5px;
    }
}
.bg-sub2 .recruit-contents h2 {
    color: white;
    border-bottom: 3px solid white;
    &::before {
        background: white;
    }
    & span {
        color: var(--title-sub-color2);
    }
}
@media screen and (max-width: 768px) {
    .recruit-contents {
        & .contents-wrap.-pd {
            padding: 0;
        }
        & h2 {
            font-size: 24px;
            margin: 0 auto 40px;
            border-bottom: 1px solid var(--accent-color1);
            &::before {
                width: 1px;
                height: 26px;
                bottom: -6px;
                left: 11px;
            }
            & span {
                font-size: 20px;
            }
        }
    }
    .bg-sub2 .recruit-contents h2 {
        border-bottom: 1px solid white;
    }
}

/* コンテンツ用ボタン */
.recruit-btn {
    width: fit-content;
    margin: 0 0 0 auto;
    & a {
        position: relative;
        padding-right: 100px;
        font-size: var(--font-lm);
        font-weight: 600;
        color: var(--accent-color1);
        text-decoration: none;
        &::after {
            position: absolute;
            content: "";
            width: 80px;
            height: 60px;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto 0;
            background: url(../img/recruit/btn-arrow.webp) no-repeat center / contain;
        }
    }
}
.bg-sub2 .recruit-btn a {
    color: white;
}
@media screen and (max-width: 768px) {
    .recruit-btn {
        & a {
            font-size: 14px;
            padding-right: 30px;
            &::after {
                width: 22px;
                height: 15px;
            }
        }
    }
}


/* モーダル */
:root {
    --modal-w: 450px;
    --modal-close-btn-w: 40px;
    --modal-close-btn-inner-w: calc(var(--modal-close-btn-w) * .6);
}
.modal-contents {
    display: none;
}
.-active.modal-contents {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: var(--ark-adminbar_height);
    left: 0;
    padding: 50px 0 80px;
    background: rgba(255,255,255,.98);
    z-index: 5;
    & .modal-contents-inner {
        width: 100%;
        height: 100%;
        max-width: var(--modal-w);
        padding: 0 20px;
        margin: 0 auto;
        overflow-y: auto;
        & img {
            display: block;
            width: 100%;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
    }
    .modal-close-btn {
        position: absolute;
        content: "";
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--modal-close-btn-w);
        height: var(--modal-close-btn-w);
        top: 50px;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: white;
        border-radius: 9999px;
        transform: translateX(calc(var(--modal-w) * .6));
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: pointer;
        & div {
            position: relative;
            width: var(--modal-close-btn-inner-w);
            height: var(--modal-close-btn-inner-w);
            & span {
                position: absolute;
                display: block;
                width: 100%;
                height: 3px;
                background: var(--accent-color1);
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            & span:first-child {
                transform: rotate(45deg);
            }
            & span:last-child {
                transform: rotate(-45deg);
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .-active.modal-contents {
        padding: 20px 0 180px;
        .modal-close-btn {
            top: 10px;
            left: auto;
            right: 10px;
            transform: none;
        }
    }
}

/***** MV *****/
:root {
    --recruit-mv-h: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 70px);
    --mv-round-x: 56%;
    --mv-round-y: 82%;
}
.recruit-contents.-mv {
    width: 100%;
    height: var(--recruit-mv-h);
    padding: 50px var(--contents-pd) 80px;
    transition: height 0.2s;
    & .mv-wrap {
        position: relative;
        width: 100%;
        max-width: var(--max-wid-pc);
        height: 100%;
        margin: 0 auto;
        & .mv-img {
            position: relative;
            height: 91%;
            filter: url(#mv-round);
            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center 58%;
                border-radius: var(--br20);
                clip-path: polygon(
                    0 0,
                    100% 0,
                    100% 100%,
                    var(--mv-round-x) 100%,
                    var(--mv-round-x) var(--mv-round-y),
                    0 var(--mv-round-y)
                    );
            }
        }
        & svg.mv-round {
            visibility: hidden;
            position: absolute;
            width: 0;
            height: 0;
        }
        & .mv-catch {
            position: absolute;
            width: 63%;
            left: 0;
            bottom: 0;
            & .mv-catch-inner {
                position: relative;
                overflow: hidden;
                & img {
                    position: relative;
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    :root {
        --recruit-mv-h: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - var(--recruit-sp-footer) - 66px);
        --mv-round-x: 58%;
        --mv-round-y: 82%;
    }
    .recruit-contents.-mv {
        padding: 10px var(--contents-pd) 30px;
        & .mv-wrap {
            & .mv-img {
                height: 100%;
            }
            & .mv-catch {
                width: 93%;
                & .mv-catch-inner {
                    overflow: initial;
                }
            }
        }
    }
}

/* スマホ用 MV下部メッセージ */
:root {
    --recruit-sp-footer: 112px;
}
.recruit-sp-footer {
    display: none;
}
@media screen and (max-width: 768px) {
    .recruit-sp-footer {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: var(--recruit-sp-footer);
        background: #EFEFEF;
        padding: 15px 15px 15px 25px;
        z-index: 5;
        & p {
            width: 72%;
            font-weight: 600;
            font-size: var(--font-ms);
            & span {
                display: inline-block;
                background: white;
            }
            & span:not(:last-child) {
                margin-bottom: .3em;
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .recruit-sp-entry {
        position: fixed;
        top: 88dvh;
        right: 20px;
        width: fit-content;
        margin: 0;
        padding: 0;
        z-index: 10;
        & a.entry-btn {
            display: block;
            width: 105px;
            text-align: center;
            font-size: 20px;
            padding: .4em;
        }
    }
}


/***** MESSAGE *****/
.message-img {
    position: relative;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: 0 auto 60px;
    & img {
        width: 100%;
        height: 100%;
        border-radius: var(--br20);
        object-fit: cover;
        object-position: center 7%;
    }
    & .message-copy {
        position: absolute;
        right: 40px;
        bottom: -95px;
        & p {
            writing-mode: vertical-rl;
            font-size: 36px;
            font-weight: bold;
            color: black;
            text-align: -webkit-right;
            line-height: 1.5;
            letter-spacing: .2em;
            & span {
                display: block;
                height: fit-content;
                padding: 5px 0;
                & .-pd {
                    padding: .2em 0;
                }
                &.-mg {
                    margin: 0 0 1em .3em;
                    margin-bottom: 1em;
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .message-img {
        aspect-ratio: 1 / 1;
        margin: 0 auto 60px;
        & .message-copy {
            right: 30px;
            bottom: -30px;
            & p {
                font-size: 20px;
            }
        }

    }
}

p.message-tx {
    font-size: var(--font-ms);
    & span:not(:last-child) {
        margin-bottom: .7em;
    }
}
@media screen and (max-width: 768px) {
    p.message-tx {
        display: none;
    }
}

:root {
    --message-point-mg: 40px;
    --message-point-box-w: calc((100% - (var(--message-point-mg) * 2)) / 3);
}
.message-point {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
    & .message-box {
        position: relative;
        width: var(--message-point-box-w);
        background: white;
        padding: 30px;
        border-radius: var(--br25);
        & h3 {
            position: relative;
            color: var(--accent-color1);
            font-family: var(--font-family-2);
            font-size: var(--font-l);
            font-weight: 600;
            padding-bottom: .2em;
            margin-bottom: 1em;
            &::before {
                position: absolute;
                content: "";
                width: 60px;
                height: 3px;
                bottom: 0;
                left: 0;
                background: var(--accent-color1);
            }
        }
    }
    & .message-box:not(:nth-child(3n)) {
        margin-right: var(--message-point-mg);
    }
    & .point-icon {
        position: absolute;
        width: 100px;
        aspect-ratio: 1 / 1;
        top: -20px;
        right: 30px;
        &.-vision {
            background: url(../img/recruit/icon-vision.webp) no-repeat center top / contain;
        }
        &.-mission {
            background: url(../img/recruit/icon-mission.webp) no-repeat center top / contain;
        }
        &.-value {
            background: url(../img/recruit/icon-value.webp) no-repeat center top / contain;
        }
    }
}
@media screen and (max-width: 768px) {
    :root {
        --message-point-mg: 0;
        --message-point-box-w: 100%;
    }
    .message-point {
        margin-top: 70px;
        & .message-box:not(:last-child) {
            margin-bottom: 45px;
        }
        & .point-icon {
            width: 77px;
            right: 25px;
        }
    }
}

:root {
    --message-entry-icon-w: 150px;
}
.message-entry {
    position: relative;
    width: fit-content;
    margin: 80px auto 0;
    padding-right: var(--message-entry-icon-w);
    &::after {
        position: absolute;
        content: "";
        width: var(--message-entry-icon-w);
        height: var(--message-entry-icon-w);
        right: 0;
        bottom: 0;
        background: url(../img/recruit/icon-leaf.webp) no-repeat center bottom / contain;
    }
    & h3 {
        width: fit-content;
        margin: 0 auto;
        padding: 0 4em .5em;
        font-size: var(--font-l);
        color: var(--accent-color1);
        border-bottom: 2px solid var(--accent-color1);
        font-weight: 600;
    }
    & p {
        width: fit-content;
        margin: 0 auto;
        padding: 1.5em 0 calc(var(--message-entry-icon-w) / 2);
    }
}
@media screen and (max-width: 768px) {
    :root {
        --message-entry-icon-w: 110px;
    }
    .-message .recruit-inner {
        padding-bottom: 20px;
    }
    .message-entry {
        margin: 60px auto 0;
        padding-right: 0;
        padding-bottom: 80px;
        & h3 {
            width: 100%;
            padding: 0 0 .5em;
        }
        & p {
            padding: .7em 0 0;
        }
    }
}

/***** SERVICE *****/
:root {
    --service-box-mg: 60px;
    --service-box-w: calc((100% - (var(--service-box-mg) * 1)) / 2);
}
.recruit-service-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 40px;
    & .recruit-service-box {
        width: var(--service-box-w);
        padding: 40px;
        background: white;
        border-radius: var(--br20);
        & .-image {
            width: 100%;
            height: fit-content;
            aspect-ratio: 3 / 2;
            & img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: var(--br20);
            }
        }
        & h3 {
            width: 100%;
            font-size: var(--font-lm);
            padding: .5em 0;
            color: var(--accent-color1);
            text-align: center;
            font-weight: 700;
        }
    }
    & .recruit-service-box:not(:nth-child(2n)) {
        margin-right: var(--service-box-mg);
    }
}
@media screen and (max-width: 768px) {
    .-service.recruit-contents {
        padding: 0;
    }
    :root {
        --service-box-mg: 45px;
        --service-box-w: 100%;
    }
    .recruit-service-wrap {
        margin: 0 auto 25px;
        & .recruit-service-box {
            margin-right: var(--service-box-mg);
            margin-left: 0;
            border-radius: 0 var(--br20) var(--br20) 0;
            padding: 0 0 24px;
            overflow: hidden;
            & .-image {
                & img {
                    border-radius: 0;
                }
            }
            & h3 {
                padding: 12px 15px 16px;
            }
            & p {
                padding: 0 15px;
            }
        }
        & .recruit-service-box:not(:nth-child(2n)) {
            margin-right: 0;
            margin-left: var(--service-box-mg);
            border-radius: var(--br20) 0 0 var(--br20);
        }
        & .recruit-service-box:not(:last-child) {
            margin-bottom: 60px;
        }
    }
    .-service .recruit-btn {
        margin-right: var(--contents-pd);
    }
}

/***** WORKS *****/
.recruit-contents.-works {
    max-width: 100%;
    padding: 0;
}
:root {
    --works-column-w: 50%;
}
.works-contents {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 220px;
    & .works-wrap {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        max-width: var(--max-wid-pc);
        margin: 0 auto;
        padding: 0 var(--contents-pd);
        z-index: 2;
        & .works-column {
            width: var(--works-column-w);
            margin-bottom: 40px;
            &.-img {
                padding: 120px 50px 0 0;
            }
            &.-tx {
                padding: 200px 0 0 50px;
                & .works-box {
                    border-radius: 10px 10px 5px 5px;
                    overflow: hidden;
                    & h3 {
                        font-size: var(--font-l);
                        padding: 20px;
                        background: white;
                        text-align: center;
                    }
                    & .works-list {
                        padding: 50px;
                        background: var(--accent-color1);
                        & ul {
                            margin-bottom: 40px;
                            & li {
                                font-size: var(--font-ms);
                                color: white;
                                padding-bottom: .5em;
                            }
                        }
                        & p {
                            font-size: var(--font-ss);
                            color: white;
                        }
                    }
                }
            }
        }
    }
    &::before, &::after {
        position: absolute;
        content: "";
    }
    &::before {
        width: 100%;
        height: 110%;
        bottom: 0;
        left: 0;
        background: var(--title-sub-color2);
        clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 75% );
        opacity: .3;
    }
    &::after {
        width: 50%;
        height: 50%;
        top: 150px;
        left: 0;
        background: var(--accent-color1);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
}
@media screen and (max-width: 768px) {
    .-works .recruit-inner {
        padding-bottom: 40px;
    }
    :root {
        --works-column-w: 100%;
    }
    .works-contents {
        padding-bottom: 60px;
        & .works-wrap {
            & .works-column {
                margin-bottom: 25px;
                &.-img {
                    padding: 0;
                    margin-bottom: 50px;
                }
                &.-tx {
                    padding: 0;
                     & .works-box {
                        border-radius: 2px;
                        & h3 {
                            padding: 5px;
                        }
                        & .works-list {
                            padding: 12px 20px;
                            & ul {
                                margin-bottom: 5px;
                            }
                        }
                     }
                }
            }
        }
        &::before {
            height: 620px;
            clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90% );
        }
        &::after {
            width: 100%;
            height: 150px;
            top: 70px;
        }
    }
}


/***** IDEAL CANDIDATE *****/
:root {
    --ideal-box-w: 50%;
    --schedule-mark1: 32px;
    --schedule-mark1-shift: calc(var(--schedule-mark1) / 2 * -1);
    --schedule-mark2: 16px;
    --schedule-mark2-shift: calc(var(--schedule-mark2) / 2 * -1);
    --schedule-line: 1px solid var(--accent-color1);
}
.ideal-wrap {
    display: flex;
    flex-wrap: wrap;
    & h3.ideal-head {
        position: relative;
        width: 100%;
        font-size: var(--font-l);
        text-align: center;
        margin-bottom: 80px;
        font-weight: 600;
        color: var(--accent-color1);
        padding-bottom: .5em;
        &::after {
            position: absolute;
            content: "";
            width: 2em;
            height: 1px;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            background: var(--accent-color1);
        }
    }
    & .ideal-column {
        position: relative;
        width: var(--ideal-box-w);
        &.-border::before {
            position: absolute;
            content: "";
            width: 1px;
            height: calc(100% - 65px);
            bottom: 0;
            right: 0;
            background: var(--accent-color1);
        }
        &.-tx {
            padding: 0 60px;
            & .ideal-tx-box {
                border-radius: var(--br20);
                overflow: hidden;
                & h3 {
                    font-size: var(--font-lm);
                    text-align: center;
                    background: var(--accent-color2);
                    padding: 20px;
                    font-weight: 700;
                }
                & ul {
                    background: white;
                    padding: 30px 10px;
                    & li {
                        font-size: var(--font-mm);
                        margin-left: 40px;
                        padding: 0 0 .5em;
                    }
                }
            }
            & .ideal-tx-box:not(:last-child) {
                margin-bottom: 40px;
            }
        }
        &.-img {
            & img {
                width: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                border-radius: var(--br20);
            }
        }
        &.-img2 {
            width: 100%;
            height: 380px;
            margin-bottom: 80px;
            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: var(--br20);
            }
        }
        &.-schedule {
            &.-pd {
                padding-top: 175px;
            }
            & h3 {
                position: relative;
                border-bottom: var(--schedule-line);
                font-size: var(--font-lm);
                padding: 0 1em .3em;
                color: var(--accent-color1);
                font-weight: 600;
                &::before, &::after {
                    position: absolute;
                    content: "";
                }
                &::before {
                    width: var(--schedule-mark1);
                    aspect-ratio: 1 / 1;
                    border-radius: 9999px;
                    border: var(--schedule-line);
                    background: var(--sub-bk1);
                    bottom: var(--schedule-mark1-shift);
                }
                &.-right::before {
                    right: var(--schedule-mark1-shift);
                }
                &.-left::before {
                    left: var(--schedule-mark1-shift);
                }
                &::after {
                    width: var(--schedule-mark2);
                    aspect-ratio: 1 / 1;
                    border-radius: 9999px;
                    bottom: var(--schedule-mark2-shift);
                }
                &.-right::after {
                    right: var(--schedule-mark2-shift);
                }
                &.-left::after {
                    left: var(--schedule-mark2-shift);
                }
                &.-col1::after {
                    background: #005733;
                }
                &.-col2::after {
                    background: #34A575;
                }
                &.-col3::after {
                    background: #ABD5AB;
                }
            }
            & .schedule-box {
                padding: 25px 35px 50px;
                & p {
                    padding: 20px;
                    background: white;
                }
            }
        }
        &.-terms {
            padding-left: 60px;
            & h4 {
                font-size: var(--font-lm);
                color: var(--accent-color1);
                font-weight: 600;
                margin-bottom: 15px;
            }
            & p {
                margin-bottom: 60px;
            }
        }
    }
}
.ideal-wrap:not(:last-child) {
    margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
    :root {
        --ideal-box-w: 100%;
        --schedule-mark1: 25px;
        --schedule-mark2: 13px;
    }
    .ideal-wrap {
        &.-sp-re {
            flex-direction: column-reverse;
        }
        & h3.ideal-head {
            margin-bottom: 25px;
        }
        & .ideal-column {
            &.-tx {
                padding: 0 25px;
                & .ideal-tx-box {
                    & h3 {
                        padding: 8px;
                    }
                    & ul {
                        padding: 10px;
                        & li {
                            font-size: 16px;
                            margin-left: 25px;
                        }
                    }
                }
                & .ideal-tx-box:not(:last-child) {
                    margin-bottom: 20px;
                }
            }
            &.-img {
                margin-bottom: 25px;
            }
            &.-img2 {
                height: auto;
                aspect-ratio: 1 / 1;
                margin-bottom: 15px;
            }
            &.-schedule {
                & h3 {
                    padding-left: 22px;
                    border: 0;
                    &::before {
                        top: 3px;
                        bottom: auto;
                    }
                    &::after {
                        top: 9px;
                        bottom: auto;
                    }
                    &.-right::before {
                        right: auto;
                        left: var(--schedule-mark1-shift);
                    }
                    &.-right::after {
                        right: auto;
                        left: var(--schedule-mark2-shift);
                    }
                }
                & .schedule-box {
                    padding: 5px 0px 25px 12px;
                    & p {
                        padding: 5px 10px;
                        font-size: 16px;
                    }
                }
            }
            &.-border::before {
                right: auto;
                left: 0;
                height: calc(100% - 15px);
            }
            &.-terms {
                padding-left: 5px;
                & h4 {
                    font-size: 20px;
                }
                & p {
                    font-size: 16px;
                    padding-bottom: 20px;
                    margin-bottom: 20px;
                    border-bottom: 1px solid gray;
                }
                & p:last-child {
                    border: none;
                    margin-bottom: 0;
                }
            }
        }

    }
    .ideal-wrap:not(:last-child) {
        margin-bottom: 60px;
    }
}

/***** RECRUIT *****/
:root {
    --recruit-dt-w: 210px;
    --recruit-dd-w: calc(100% - var(--recruit-dt-w));
}
.recruit-wrap {
    padding: 30px;
    background: white;
    border-radius: var(--br20);
    & dl {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 20px 0;
        & dt {
            width: var(--recruit-dt-w);
            font-size: var(--font-mm);
            color: var(--accent-color1);
            font-weight: 600;
        }
        & dd {
            width: var(--recruit-dd-w);
            font-size: var(--font-sl);
            & span {
                font-size: var(--font-ss);
            }
        }
    }
    & dl:not(:last-child) {
        border-bottom: 1px solid gray;
    }
}
@media screen and (max-width: 768px) {
    :root {
        --recruit-dt-w: 100%;
        --recruit-dd-w: 100%;
    }
    .recruit-wrap {
        padding: 15px;
        border-radius: var(--br10);
        & dl:first-child {
            padding-top: 0;
        }
        & dl:last-child {
            padding-bottom: 0;
        }
        & dl {
            padding: 15px 0;
            & dt {
                margin-bottom: .5em;
            }
        }
    }
}