@charset "utf-8";



/*  Foundation
*/

.recruit {
    margin: 7em auto;
}

.recruit-page-title-text {
    margin: 0 0 1em 0;

    letter-spacing: 1px;
    font-weight: bold;
    font-size: var(--font-size-subtitle);
    color: var(--font-color-primary);
}



/*  Modules recruit top image box
*/

.recruit-image-box {
    margin: 7em auto 0;
    padding: 3em 0 7em;
    background-color: var(--bg-color-secondary);
}

.recruit-image-box .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.recruit-image-1 {
    width: 100%;
    text-align: center;
}

.recruit-image-2 {
    margin-right: 1%;
}

.recruit-image-3 {
    margin-left: 1%;
}

.recruit-image-box img {
    height: fit-content;
    object-fit: contain;
}



/*  Modules recruit overview
*/

.recruit-overview {
    margin: 0 auto 12em;
}

.recruit-overview-title-text {
    width: 96%;
    max-width: 348px;
    height: 63px;
    line-height: 63px;
    margin: -31.5px auto 0;
    background: url(../images/recruit/obi.png) center center no-repeat transparent;
    background-size: contain;

    letter-spacing: 2px;
    font-weight: bold;
    font-size: 1.4em;
}



/*  Modules recruit list
*/

.recruit-one {
    margin: 2em 0;
    border: 1px var(--bg-color-sub) solid;
}

.recruit-one:last-child .recruit-key {
    padding: 1em 1.5em;
}

.recruit-key {
    padding: 1.5em;
    border-bottom: 1px var(--bg-color-sub) solid;
    font-weight: bold;
    font-size: var(--font-size-subtitle-nano);

    display: flex;
    justify-content: space-between;
    align-items: center;

    cursor: pointer;
}

.exlink-box .recruit-key {
    cursor: initial;
}

.recruit-key.deactive {
    border-bottom: none;
}

:not(.exlink-box) > .recruit-key::after {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--font-color-main);
}

:not(.exlink-box) > .recruit-key.deactive::after {
    content: "\f078";
}

:not(.exlink-box) > .recruit-key.active::after {
    content: "\f077";
}

.recruit-key .exlink {
    width: fit-content;
    padding: 0.75em 1em 0.75em 2.25em;
    background-color: var(--color-dark-glay);

    display: flex;
    justify-content: space-between;
    align-items: center;

    letter-spacing: 1px;
    color: var(--color-white);
    font-size: var(--font-size-main);
}

.recruit-key .exlink span {
    margin-right: 1.5em;
}

.recruit-key .exlink::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--font-color-sub);
}

.recruit-value {
    box-sizing: border-box;
    overflow: hidden;
}

.recruit-value.deactive .recruit-data-one {
    visibility: hidden;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    height: 0;
    opacity: 0;
}

.recruit-data-one {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    height: fit-content;
    opacity: 1;
    margin: 0 10%;
    padding: 0 0 2em;
    border-bottom: 1px var(--bg-color-sub) dashed;
    margin-bottom: 2em;
}

.recruit-data-one:first-child {
    margin-top: 3em;
}

.recruit-data-one:last-child {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 3em;
}

.recruit-data-key {
    flex-basis: 20%;
    margin-right: 5%;
    font-weight: bold;
    font-size: 18px;
    line-height: 2em;
}

.recruit-data-value {
    flex-basis: 75%;
    font-size: 18px;
    line-height: 2em;
}

.recruit-data-value span {
    margin-right: 1em;
}

.recruit-data-value .small {
    line-height: 1.6em;
    font-size: var(--font-size-body);
}



/*  Modules recruit list
*/

.entry-button {
    width: 100%;
    text-align: center;
}

.entry-button .wp-block-button__link {
    width: 80%;
    max-width: 800px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

.entry-button .wp-block-button__link::before {
    content: "";
    position: absolute;
    top: -14px;
    right: calc(5% - 5px);
    bottom: 0;
    width: 20px;
    height: 2px;
    margin: auto;
    background-color: var(--color-white);
    transform: rotate(45deg);
}

.entry-button .wp-block-button__link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 5%;
    bottom: 0;
    width: 13%;
    height: 2px;
    margin: auto;
    background-color: var(--color-white);
}

.entry-button .main {
    width: 100%;
    font-weight: bold;
    font-size: var(--font-size-subtitle);
}

.entry-button .sub {
    width: 100%;
    color: var(--font-color-sub);
    font-size: var(--font-size-main);
}




/*  new iPad portrate : pc x-small ((810px + 1024px) / 2)
*/
@media screen and (max-width: 917px) {
    .recruit-data-one {
        margin: 0 7% 2em;
    }
}



/*  iPhone 12 pro Max : iPad portrate ((428px + 768px) / 2)
*/

@media screen and (max-width: 598px) {
    .recruit {
        margin: 5em auto;
    }

    .recruit-page-title-image img {
        width: 120px;
        height: fit-content;
        object-fit: contain;
    }

    .recruit-page-title-text {
        font-size: var(--font-size-subtitle-micro);
    }

    .recruit-image-box {
        margin: 1em 0 0;
        padding: 1em 0 3em 0;
    }

    .recruit-image-box img {
        height: fit-content;
        object-fit: contain;
    }

    .recruit-image-1 img {
        width: 270px;
    }

    .recruit-image-2 img {
        width: 270px;
    }

    .recruit-image-3 img {
        width: 270px;
    }

    .recruit-overview-title-text {
        width: 218px;
        height: 40px;
        line-height: 40px;
        margin-top: -20px;
        background: url(../images/recruit/obi_sp.png) center center no-repeat transparent;
        background-size: contain;

        font-size: 15px;
    }

    .recruit-key {
        font-size: var(--font-size-body-big);
    }

    .exlink-box .recruit-key {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .exlink-box .recruit-key-text {
        width: 100%;
    }

    .exlink-box .exlink {
        width: 35%;
        margin-top: 0.5em;
        padding: 0.25em;
        font-size: var(--font-size-body);
        background-color: transparent;
        color: var(--color-dark-glay);
    }

    .recruit-key .exlink span {
        margin-right: 0;
    }

    .recruit-key .exlink::after {
        color: var(--color-dark-glay);
    }

    .recruit-data-one {
        flex-wrap: wrap;
        margin: 0 3% 1.5em;
        padding: 0 0 1.5em;
    }

    .recruit-data-one:first-child {
        margin-top: 1.5em;
    }

    .recruit-data-one:last-child {
        margin-bottom: 1.5em;
    }

    .recruit-data-key {
        flex-basis: initial;
        width: 100%;
        margin: 0;
        font-size: var(--font-size-body);
    }

    .recruit-data-value {
        flex-basis: initial;
        width: 100%;
        margin: 0;
        font-size: var(--font-size-body-mini);
    }

    .recruit-data-value .small {
        font-size: var(--font-size-body-nano);
    }

    /*  entry button
    */
    .entry-button .wp-block-button__link::before {
        top: -8px;
        right: 5%;
        width: 10px;
        height: 1px;
    }

    .entry-button .wp-block-button__link::after {
        height: 1px;
    }

    .entry-button .main {
        font-size: var(--font-size-subtitle-nano);
    }

    .entry-button .sub {
        font-size: var(--font-size-body);
    }

}



/*  iPhone SE : iPhone 6/7/8 ((320px + 375px) / 2)
*/

@media screen and (max-width: 421px) {
    .exlink-box .exlink {
        width: 40%;
    }
}


/*  iPhone SE : iPhone 6/7/8 ((320px + 375px) / 2)
*/

@media screen and (max-width: 348px) {
    .exlink-box .exlink {
        width: 50%;
    }
}