@charset "UTF-8";

/* =========================================================
   RECRUIT DETAIL
   Mobile First
========================================================= */
body {
    background-color: var(--color-white);
}

/* =========================================================
   Detail section
========================================================= */

.recruit-detail {
    position: relative;
    z-index: 2;

    width: 100%;
    margin-top: -42px;
    padding:
        0
        var(--content-padding-sp)
        90px;

    background-color: var(--color-white);
}

.recruit-detail__container {
    width: 100%;
    min-width: 0;
    margin-inline: auto;
}

.recruit-detail__background {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    background-color: #ededed8c;
    /* clip-path: polygon(
        0 10px,
        100% 0,
        100% calc(100% - 32px),
        0 100%
    ); */
}

.recruit-detail__card {
    width: 100%;
    min-width: 0;
    padding: 44px 10px;

    border-radius: 12px;
    background-color: var(--color-white);
}


/* =========================================================
   Detail header
========================================================= */

.recruit-detail__header {
    margin-bottom: 12px;
}

.recruit-detail__title {
    position: relative;

    margin: 0;
    padding:
        0
        0
        12px;

    border-bottom: 1px solid #c8c8c8;

    color: var(--color-primary);

    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;

    overflow-wrap: anywhere;
}

.recruit-detail__title::after {
    content: "";

    position: absolute;
    bottom: -1px;
    left: 0;

    width: 88px;
    height: 1px;

    background-color: var(--color-primary);
}


/* =========================================================
   Main image
========================================================= */

.recruit-detail__image-wrap {
    position: relative;

    width: 100%;
    margin-bottom: 18px;

    overflow: hidden;

    background-color: #bdbdbd;
}

.recruit-detail__image-wrap::before {
    content: "";

    display: block;

    padding-top: 62%;
}

.recruit-detail__image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   Detail list
========================================================= */

.recruit-detail__list {
    width: 100%;
    margin: 0;
}

.recruit-detail__row {
    display: block;

    width: 100%;
    padding:
        14px
        0
        16px;

    border-top: 1px solid #c8c8c8;
}
.recruit-detail__row:last-child{
    border-bottom: 1px solid #c8c8c8;
}
.recruit-detail__row:first-child {
    border-top: 0;
}

.recruit-detail__term {
    position: relative;

    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 9px;

    color: #4d0000;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.recruit-detail__row::after {
    content: "";
    display: inline-block;
    position: relative;
    bottom: -26px;
    left: 0;
    width: 120px;
    height: 1px;
    background-color: var(--color-primary);
}

.recruit-detail__description {
    min-width: 0;
    margin: 0;
    color: var(--color-black);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.recruit-detail__description br:first-child {
    display: none;
}

@media screen and (min-width: 768px) {
    .recruit-detail__row::after {
        content: "";
        position: relative;
        bottom: -22px;
        left: 0;
        width: 120px;
        height: 1px;
        background-color: var(--color-primary);
    }
}
/* =========================================================
   Map link
========================================================= */

.map-inline-link {
    display: inline-block;

    margin-left: 6px;

    color: var(--color-primary);

    font-weight: 700;
    text-decoration: underline;
}


/* =========================================================
   Apply form
========================================================= */

.apply-section {
    width: 100%;
    padding:
        74px
        var(--content-padding-sp)
        100px;

    background-color: var(--color-white);
}

.apply-section__title {
    margin:
        0
        0
        28px;

    color: #4d0000;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.apply-section__frame-wrap {
    width: 100%;
    max-width: 580px;
    margin-inline: auto;

    overflow: hidden;

    border-radius: 10px;
    background-color: #ededed;
}

.apply-section__iframe {
    display: block;

    width: 100%;
    min-height: 900px;

    border: 0;
}


/* =========================================================
   Loading / error
========================================================= */

.loader {
    width: 42px;
    height: 42px;
    margin: 80px auto;

    border: 4px solid rgb(58 117 187 / 20%);
    border-top-color: var(--color-primary);
    border-radius: 50%;

    animation: recruit-detail-loader 0.8s linear infinite;
}

@keyframes recruit-detail-loader {

    to {
        transform: rotate(360deg);
    }

}

.recruit-detail__container > .container {
    width: 100%;
    padding: 60px 20px;

    text-align: center;
}


/* =========================================================
   Tablet
========================================================= */

@media screen and (min-width: 768px) {

    .recruit-detail {
        margin-top: -80px;
        padding:
            0
            var(--content-padding-pc)
            120px;
    }

    .recruit-detail__background {
        width: min(100%, 1050px);
        margin-inline: auto;
        padding: 38px;

        clip-path: none;
        background-color: #e4e4e4ad;
    }

    .recruit-detail__card {
        padding: 44px 58px 64px;

        border-radius: 8px;
    }

    .recruit-detail__header {
        margin-bottom: 34px;
    }

    .recruit-detail__title {
        padding-bottom: 15px;

        font-size: 20px;
    }

    .recruit-detail__title::after {
        width: 150px;
    }

    .recruit-detail__image-wrap {
        width: min(100%, 500px);
        margin:
            0
            auto
            44px;
    }

    .recruit-detail__image-wrap::before {
        padding-top: 64%;
    }

    .recruit-detail__row {
        display: grid;

        grid-template-columns:
            minmax(130px, 180px)
            minmax(0, 1fr);

        column-gap: 28px;

        padding:
            20px
            0;
    }

    .recruit-detail__term {
        margin: 0;
        padding: 0;

        font-size: 14px;
    }

    .recruit-detail__term::after {
        top: 27px;
        bottom: auto;

        width: 100%;
    }

    .recruit-detail__description {
        font-size: 14px;
        line-height: 2;
    }

    .apply-section {
        padding:
            90px
            var(--content-padding-pc)
            130px;
    }

    .apply-section__title {
        margin-bottom: 34px;

        font-size: 18px;
    }

    .apply-section__frame-wrap {
        max-width: 620px;
    }

}


/* =========================================================
   PC
========================================================= */

@media screen and (min-width: 1024px) {

    .recruit-detail {
        margin-top: -190px;
        /* margin-top: -115px; */
        padding-bottom: 150px;
    }

    .recruit-detail__background {
        width: min(calc(100% - 160px), 1260px);
        padding: 58px;
    }

    .recruit-detail__card {
        width: min(100%, 970px);
        margin-inline: auto;
        padding: 58px 76px 76px;
    }

    .recruit-detail__title {
        font-size: 22px;
    }

    .recruit-detail__title::after {
        width: 220px;
    }

    .recruit-detail__image-wrap {
        width: min(100%, 480px);
        margin-bottom: 54px;
    }

    .recruit-detail__row {
        grid-template-columns:
            minmax(150px, 210px)
            minmax(0, 1fr);

        column-gap: 42px;

        padding:
            22px
            0;
    }

    .recruit-detail__term {
        font-size: 14px;
    }

    .recruit-detail__description {
        font-size: 14px;
    }

    .apply-section {
        padding-top: 110px;
        padding-bottom: 160px;
    }

    .apply-section__frame-wrap {
        max-width: 720px;
    }

}


/* =========================================================
   Large PC
========================================================= */

@media screen and (min-width: 1280px) {

    .recruit-detail__background {
        width: min(calc(100% - 300px), 1380px);
        padding: 70px;
        border-radius: 5px;
    
    }

    .recruit-detail__card {
        width: min(100%, 1020px);
        padding:
            64px
            82px
            82px;
    }

}

/* =========================================================
   Recruit Detail
========================================================= */

.recruit-detail {
    position: relative;
    z-index: 2;
    margin-top: -150px;
    padding: 0 0 190px;
    background-color: transparent;
}

.recruit-detail__inner {
    width: min(970px, calc(100% - 80px));
    margin: 0 auto;
    padding: 58px;
    background-color: #fff;
    border-radius: 10px;
}