.s-jobs-outer {
    width: 90vw;
    background-color: var(--theme1);
    padding: 8vw 18vw;
    box-sizing: border-box;
    border-radius: 40px;
    margin: 4vw auto;
}

.s-jobs-outer > img {
    width: 8vw;
    height: auto;
}

.s-jobs-sep {
    height: 1px;
    margin: 3vw 0;
}

.s-jobs-inner {
    width: 100%;
    color: #FFFFFF;
    text-align: left;
    font-size: 1vw;
}

.s-jobs-inner .s-list-style3{
    margin-bottom: 1em;
}

.s-jobs-tab {
    width: 100%;
    margin: 2vw auto;
    display: flex;
    flex-wrap: wrap;
}

.s-jobs-tab > label {
    height: 3.5vh;
    padding: .7em 1em .5em;
    border-radius: 5px 5px 0px 0px;
    background-color: #e9f0f6;
    color: #838383;
    border: 1px solid var(--theme1);
    font-size: 1.2vw;
    text-align: center;
    cursor: pointer;
    align-content: center;
    flex: 1 1;
    order: -1;
    user-select: none;
}

.s-jobs-tab > label:first-of-type {
    border-left: 0px;
}

.s-jobs-tab > label:last-of-type {
    border-right: 0px;
}

.s-jobs-tab > label:hover {
    opacity: .8;
}

.s-jobs-tab input {
    display: none;
}

.s-jobs-tab > div {
    display: none;
    width: 100%;
    padding: 5em 1vw 5em 1vw;
    background-color: #fff;
    border-radius: 0px 0px 3px 3px;
    color: var(--theme1);
    opacity: 0;
}

.s-jobs-tab label:has(:checked) {
    background-color: #fff;
    border-color: var(--theme1) #f0f0f0 #fff;
    border-style: solid;
    color: var(--theme1);
}

.s-jobs-tab label:has(:checked) + div {
    display: block;
    animation-name: fadeIn;
    animation-fill-mode:forwards;
    animation-duration:0.5s;
}

/* dummy tab */
.s-jobs-tab > label.s-jobs-tab-dummy {
    opacity: 0;
    cursor: default;
}

.s-jobs-tab > label.s-jobs-tab-dummy:hover {
    opacity: 0;
}

/*フェードインアニメ*/
@keyframes fadeIn{
    0% {
        pacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
    }
}

.s-jobs-tab-contents {
    display: flex;
    flex-direction: row;
    line-height: 4vw;
    justify-content: center;
}

.s-jobs-tab-contents > ul {
    width: 100% ;
    margin-bottom: 2vh;
}

.s-jobs-tab-condition {
    width: 80%;
}

.s-jobs-tab-condition .bubble-top {
    width: 10vw;
    font-size: 1vw;
    line-height: normal;
}

.s-jobs-bottom {
    display: flex;
    font-size: 0.9vw;
    align-items: center;
    justify-content: space-around;
    color: #FFFFFF;
    text-align: left;
}


/* smartphone */
@media screen and (max-width: 800px) {

    .s-jobs-outer {
        padding: 8vh 7vw 1vh 7vw;
    }

    .s-jobs-inner {
        font-size: small;
        line-height: normal;
        margin: 3vh 0;
    }

    .s-jobs-inner > p {
        margin-left: 3.2vw;
    }

    .s-jobs-tab > label {
        font-size: small;
    }

    .s-jobs-outer > img {
        width: 25vw;
    }

    .s-jobs-tab-contents {
        display: block;
        line-height: 1.8em;
        width: min-content;
        margin: 0 auto;
    }

    .s-jobs-cond700 {
        margin-left: 5.3vw;
    }

    .s-jobs-tab-condition {
        display: flex;
        width: 100%;
        text-wrap: nowrap;
    }

    .s-jobs-tab-condition > .bubble-top {
        width: 2em;
        height: fit-content;
    }

    .s-jobs-tab-condition > .bubble-top > p {
        width: fit-content;
    }

    .s-jobs-tab-contents > ul {
        width: 13em;
        padding-left: 2.5em;
    }

    .s-jobs-bottom {
        display: block;
        font-size: x-small;
        line-height: normal;
    }

    .s-jobs-bottom > .s-button {
        margin: 5vh auto;
    }

}