@charset "UTF-8";

/* CSS Document */
:root {
    --brand: #E60039;
    /* 見出し・タブの基調色（お好みで変更） */
    --ink: #222;
    --muted: #666;
    --line: #000000;
    --bg: #fff;
    --pill: #fafafa;
    --radius: 4px;
    --radius-lg: 16px;
    --w: 1100px;
    /* 最大幅 */
    --subline: #B7B7B7;
    --en: "Poppins";
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.75;
}

.second h1 {
    text-align: center;
    font-size: clamp(32px, 4.5vw, 48px);
    margin: 150px auto 100px;
    color: var(--brand);
    letter-spacing: .02em;
    font-weight: bold;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .second h1 {
        margin: 100px auto 50px;
    }
}

/*top*/


/*アニメーションーーーーーーーーーーーーーー*/


.fv-img:before {
    position: absolute;
}

.fv-img01 {
    position: relative;
}


@keyframes kakukaku-left {
    0% {
        rotate: 0deg;
    }

    20% {
        rotate: -2deg;
    }

    40% {
        rotate: 0deg;
    }

    60% {
        rotate: 2deg;
    }

    80% {
        rotate: 0deg;
    }

    100% {
        rotate: -2deg;
    }
}

@keyframes kakukaku-right {
    0% {
        rotate: 0deg;
    }

    20% {
        rotate: 2deg;
    }

    40% {
        rotate: 0deg;
    }

    60% {
        rotate: -2deg;
    }

    80% {
        rotate: 0deg;
    }

    100% {
        rotate: 2deg;
    }
}



/*　「ここで働くって、なんだかワクワクする。」テキスト */
span.smoothText {
    overflow: hidden;
    display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger {
    transition: 1s ease-in-out;
    transform: translate3d(0, 100%, 0) skewY(20deg);
    transform-origin: left;
    display: block;
}

span.smoothTextTrigger.smoothTextAppear {
    transform: translate3d(0, 0, 0) skewY(0);
}




@keyframes ringanime {
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 　FV PCのアニメーション調整　ーーーーーーーーーーーーーーーーーーーーー */

@media (min-width: 768px) {


    /* WE ARE ATMAN */
    .fv-img01:before {
        content: '';
        position: absolute;
        background: url(../images/top/fv_pc_tit.png) top no-repeat;
        width: 64%;
        height: 400px;
        background-size: contain;
        transform: translate(50%, 0);
        right: 50%;
        top: 0;
        /* キラキラ点滅 */
        animation: ringanime 500000ms ease 0s infinite alternate;
        animation-duration: 1.4s;
        z-index: 2;
    }


    /* キラキラ */
    .fv-img:before {
        background: url(../images/top/kira01.png) top no-repeat;
        transition: 1s;
        transform: translate(-50%, 0);
        left: 50%;
        position: absolute;
        content: '';
        top: 12%;
        display: block;
        width: 86%;
        /*幅*/
        height: 800px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: ringanime 10ms ease 0s infinite alternate;
        animation-duration: 1s;
        z-index: 2;
    }

    .fv-img::after {
        background: url(../images/top/kira02.png) top no-repeat;
        transition: 1s;
        transform: translate(50%, 0);
        position: absolute;
        content: '';
        top: 12%;
        display: block;
        width: 93%;
        /*幅*/
        height: 800px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: ringanime 2s ease 0s infinite alternate;
        animation-duration: 1.5s;
        right: 47%;
        z-index: 2;
    }


    /* 雑貨アニメーション */

    .fv-img .fv-img-inner01:before {
        background: url(../images/top/item01.png) top no-repeat;
        transition: 1s;
        transform: translate(-50%, 0);
        left: 10%;
        position: absolute;
        content: '';
        top: 45%;
        display: block;
        width: 10%;
        /*幅*/
        height: 800px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: kakukaku-right steps(1) 500000ms infinite;
        animation-duration: 3s;
        z-index: 2;
    }

    .fv-img .fv-img-inner01:after {
        background: url(../images/top/item02.png) bottom no-repeat;
        transition: 1s;
        /* transform: translate(50%, 0); */
        position: absolute;
        content: '';
        bottom: 0;
        display: block;
        width: 14%;
        /*幅*/
        height: 400px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: kakukaku-left steps(1) 10000s infinite;
        animation-duration: 4s;
        left: 10%;
        z-index: 2;
    }


    .fv-img .fv-img-inner02:before {
        background: url(../images/top/item03.png) bottom no-repeat;
        transition: 1s;
        transform: translate(-50%, 0);
        right: 2%;
        position: absolute;
        content: '';
        bottom: 0;
        display: block;
        width: 10%;
        /*幅*/
        height: 800px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: kakukaku-right steps(1) 500000ms infinite;
        animation-duration: 3s;
        z-index: 2;
    }

    .fv-img .fv-img-inner02:after {
        background: url(../images/top/item04.png) bottom no-repeat;
        transition: 1s;
        /* transform: translate(50%, 0); */
        position: absolute;
        content: '';
        bottom: 40%;
        display: block;
        width: 9%;
        /*幅*/
        height: 400px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: kakukaku-left steps(1) 10000s infinite;
        animation-duration: 4s;
        right: 7%;
        z-index: 2;
    }

}




/* 　FV　SPのアニメーション調整　ーーーーーーーーーーーーーーーーーーーーー */

@media (max-width: 768px) {


    /* WE ARE ATMAN */
    .fv-img01:before {
        content: '';
        position: absolute;
        background: url(../images/top/fv_sp_tit.png) top no-repeat;
        width: 78%;
        height: 400px;
        background-size: contain;
        transform: translate(50%, 0);
        right: 50%;
        top: 0;
        /* キラキラ点滅 */
        animation: ringanime 500000ms ease 0s infinite alternate;
        animation-duration: 1.4s;
        z-index: -1;
    }


    /* キラキラ */
    .fv-img:before {
        background: url(../images/top/kira01sp.png) top no-repeat;
        transition: 1s;
        transform: translate(-50%, 0);
        left: 48%;
        position: absolute;
        content: '';
        top: 16%;
        display: block;
        width: 86%;
        /*幅*/
        height: 800px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: ringanime 10ms ease 0s infinite alternate;
        animation-duration: 1s;
        z-index: 2;
    }

    .fv-img::after {
        background: url(../images/top/kira02sp.png) top no-repeat;
        transition: 1s;
        transform: translate(50%, 0);
        position: absolute;
        content: '';
        top: 11%;
        display: block;
        width: 76%;
        /*幅*/
        height: 800px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: ringanime 2s ease 0s infinite alternate;
        animation-duration: 1.5s;
        right: 56%;
        z-index: 2;
    }


    /* 雑貨アニメーション */

    .fv-img .fv-img-inner01:before {
        background: url(../images/top/item01sp.png) top no-repeat;
        transition: 1s;
        transform: translate(-50%, 0);
        right: -8%;
        position: absolute;
        content: '';
        top: 30%;
        display: block;
        width: 13%;
        /*幅*/
        height: 800px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: kakukaku-right steps(1) 500000ms infinite;
        animation-duration: 3s;
        z-index: 2;
    }

    .fv-img .fv-img-inner01:after {
        background: url(../images/top/item02.png) bottom no-repeat;
        transition: 1s;
        /* transform: translate(50%, 0); */
        position: absolute;
        content: '';
        bottom: 3%;
        display: block;
        width: 30%;
        /*幅*/
        height: 400px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: kakukaku-left steps(1) 10000s infinite;
        animation-duration: 4s;
        left: 3%;
        z-index: 2;
    }


    .fv-img .fv-img-inner02:before {
        background: url(../images/top/item03.png) bottom no-repeat;
        transition: 1s;
        transform: translate(-50%, 0);
        right: -3%;
        position: absolute;
        content: '';
        bottom: 0;
        display: block;
        width: 20%;
        /*幅*/
        height: 800px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: kakukaku-right steps(1) 500000ms infinite;
        animation-duration: 3s;
        z-index: 2;
    }

    .fv-img .fv-img-inner02:after {
        background: url(../images/top/item04.png) top no-repeat;
        transition: 1s;
        /* transform: translate(50%, 0); */
        position: absolute;
        content: '';
        top: 9%;
        display: block;
        width: 17%;
        /*幅*/
        height: 400px;
        /*どれだけデカくなってもはみ出ないであろう高さを指定*/
        background-size: contain;
        background-repeat: no-repeat;
        /*画像を繰り返さない*/
        animation: kakukaku-left steps(1) 10000s infinite;
        animation-duration: 4s;
        right: 44%;
        z-index: 2;
    }

}




/*アニメーションーーーーーーーーーーーーーー*/



section.top-fv {
    position: relative;
    margin: 50px auto 80px;
}

section.top-fv .fv-img {
    width: 70%;
    margin: 100px auto 40px;
    max-width: 1200px;
    position: relative;
}

section.top-fv h1 {
    text-align: center;
    font-size: 5rem;
    font-weight: 700;
    padding: 0 4.33%;
    line-height: 1.4;
}

@media (min-width: 768px) {
    section.top-fv .fv-img {
        min-width: 768px;
    }
}

@media (max-width: 768px) {
    section.top-fv {
        margin: 80px auto 50px;
    }

    section.top-fv .fv-img {
        width: 100%;
        margin: 0 auto 10px;
    }

    section.top-fv h1 {
        font-size: 3rem;
        line-height: 1.3;
    }
}

section.top-int {
    background: url(../images/common/dot-bg.jpg) center repeat;
    background-size: contain;
    padding: 150px 0;
}

section.top-int .int-area {
    width: 90%;
    margin: auto;
    position: relative;
    background: #fff;
    border: 2px solid;
    max-width: 1350px;
    padding: 0 4.33%;
}

section.top-int .int-area::before {
    content: "";
    background: url(../images/top/int-l_pc.png) center no-repeat;
    background-size: contain;
    width: 276px;
    height: 665px;
    bottom: 10px;
    left: -70px;
    position: absolute;
}

section.top-int .int-area::after {
    content: "";
    background: url(../images/top/int-r_pc.png) center no-repeat;
    background-size: contain;
    width: 284px;
    height: 664px;
    bottom: -2px;
    right: -40px;
    position: absolute;
}

section.top-int .int-area picture {
    margin: -10px auto 0;
    position: relative;
    display: block;
    width: 96%;
}

section.top-int .int-area .int-box {
    padding: 150px 0;
    text-align: center;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2;
}

@media (max-width: 768px) {
    section.top-int {
        padding: 80px 0;
    }

    section.top-int .int-area {
        width: 90%;
    }

    section.top-int .int-area::before {
        content: none;
    }

    section.top-int .int-area::after {
        content: "";
        background: url(../images/top/int_sp.png) no-repeat;
        background-size: contain;
        width: 340px;
        height: 185px;
        bottom: 0px;
        right: 0;
        position: absolute;
        left: 0;
        margin: 0 auto;
        position: absolute;
    }

    section.top-int .int-area .int-box {
        padding: 30px 10px 200px;
    }
}

.workstyle-week-box .workstyle-week-txt {
    padding-right: 30px;
}

section.top-workstyle {
    display: flex;
    flex-flow: column;
    gap: 100px;
    margin: 150px auto;
}

section.top-workstyle .workstyle-area {
    display: flex;
    flex-flow: column;
    gap: 50px;
}

section.top-workstyle .workstyle-area h2 {
    font-size: 4.8rem;
    font-weight: 700;
    text-align: center;
}

section.top-workstyle .workstyle-area h3 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

section.top-workstyle .workstyle-area .workstyle-flex {
    display: flex;
    justify-content: space-between;
}

section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box {
    width: 48.5%;
    background: #E60039;
    border: 2px solid;
    padding: 10px;
    position: relative;
}

section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box::before {
    content: "";
    background: url(../images/top/workstyle-bg.png) center no-repeat;
    background-size: contain;
    width: 38px;
    height: 38px;
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
    top: -15px;
    z-index: 1;
}

section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box::after {
    content: "";
    background: url(../images/common/next-icon.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 32px;
    height: 32px;
    bottom: 30px;
    right: 30px;
}

section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box .workstyle-img {
    border: 2px solid;
}

section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box .workstyle-txt {
    color: #fff;
    padding: 20px 30px 15px;
    position: relative;
}

section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box .workstyle-txt h4 {
    font-size: clamp(16px, 3rem, 20px);
    font-weight: 500;
    margin: 0 auto 10px;
}

section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box .workstyle-txt p {
    font-weight: 500;
    width: 90%;
}


section.top-faq {
    margin: 150px auto;
}

.faq-r img {
    max-width: 330px;
}



section.top-faq .faq-flex {
    border: 2px solid;
    display: flex;
    justify-content: flex-start;
    padding: 70px 0 8% 70px;
    position: relative;
    /* align-items: center; */
    gap: 100px;
    position: relative;
    flex-wrap: wrap;
}

section.top-faq .faq-flex::before {
    content: "";
    background: url(../images/top/faq-bg.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 76px;
    height: 93px;
    top: -60px;
    left: 40px;
}

section.top-faq .faq-flex .faq-l h2 {
    font-size: 4.8rem;
    font-weight: 700;
    color: #E60039;
    margin: 0 auto 40px;
    position: relative;
    display: inline-block;
}

section.top-faq .faq-flex .faq-l h2::after {
    content: "";
    background: url(../images/common/next-icon.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 32px;
    height: 32px;
    top: 24px;
    right: -50px;
    display: inline-block;
}

section.top-faq .faq-flex .faq-l p {
    font-size: 2rem;
    font-weight: 500;
    line-height: 2;
}

section.top-faq .faq-flex .faq-r {
    width: 309px;
    width: 50%;
    position: absolute;
    bottom: 0;
    right: 30px;
    margin: 0 auto;
    text-align: center;
    display: inline-block;
}

section.top-faq .faq-flex .faq-l {
    width: 50%;
    /* max-width: 480px; */
}


@media (min-width: 768px) and (max-width: 1200px) {
    section.top-int .int-area::after {
        right: -80px;
        width: 240px;
        border: 0;
        height: 500px;
    }

    section.top-int .int-area::before {
        left: -120px;
        width: 230px;
        height: 500px;
    }

    section.top-faq .faq-flex .faq-r {
        text-align: right;
    }


}

@media (max-width: 768px) {
    .faq-r img {
        max-width: 220px;
    }

    .tel-img img {
        max-width: 380px;
        text-align: center;
        margin: auto;
        width: 80%;
    }

    section.top-workstyle {
        gap: 50px;
        margin: 80px auto;
    }

    section.top-workstyle .workstyle-area {
        display: flex;
        flex-flow: column;
        gap: 30px;
    }

    section.top-workstyle .workstyle-area h2 {
        font-size: 3rem;
    }

    section.top-workstyle .workstyle-area h3 {
        font-size: 1.8rem;
    }

    section.top-workstyle .workstyle-area .workstyle-flex {
        flex-flow: column;
        gap: 20px;
    }

    section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box {
        width: 100%;
        padding: 10px;
    }

    section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box::after {
        bottom: 20px;
        right: 20px;
        width: 25px;
        height: 24px;
    }

    section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box .workstyle-txt {
        padding: 15px 20px 10px;
    }

    section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box .workstyle-txt p {
        width: 94%;
        line-height: 1.5;
    }
    section.top-workstyle .workstyle-area .workstyle-flex .workstyle-box::before {
    width: 30px;
    height: 30px;
    top: -10px;
    }

    section.top-faq {
        margin: 80px auto;
    }

    section.top-faq .faq-flex {
        padding: 30px 20px 0;
        gap: 20px;
        flex-flow: column;
    }

    section.top-faq .faq-flex::before {
        width: 56px;
        height: 70px;
        top: -40px;
        left: 10px;
    }

    section.top-faq .faq-flex .faq-l h2 {
        font-size: 3rem;
        margin: 0 auto 20px;
        display: block;
    }

    section.top-faq .faq-flex .faq-l h2::after {
        right: 0px;
        top: 11px;
        width: 25px;
        height: 24px;
    }

    section.top-faq .faq-flex .faq-l p {
        font-size: 1.8rem;
    }

    section.top-faq .faq-flex .faq-r {
        width: 100%;
        margin: 0 auto;
        position: inherit;
        right: inherit;
        text-align: center;
    }

    section.top-faq .faq-flex .faq-l {
        margin: 0px 0 0;
        width: 100%;
        max-width: inherit;
    }
}

/*workstyle*/
section.workstyle-int {
    margin: 0 auto 100px;
}

section.workstyle-int .workstyle-int-flex {
    display: flex;
    justify-content: space-between;
}

section.workstyle-int .workstyle-int-flex .workstyle-int-l h2 {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 auto 50px;
}

section.workstyle-int .workstyle-int-flex .workstyle-int-l p {
    font-weight: 700;
}

section.workstyle-int .workstyle-int-flex .workstyle-int-r {
    width: 46%;
}

@media (max-width: 768px) {
    section.workstyle-int {
        margin: 0 auto 70px;
    }

    section.workstyle-int .workstyle-int-flex {
        flex-flow: column;
    }

    section.workstyle-int .workstyle-int-flex .workstyle-int-l h2 {
        font-size: 3rem;
        line-height: 1.5;
        margin: 0 auto 20px;
    }

    section.workstyle-int .workstyle-int-flex .workstyle-int-r {
        width: 80%;
        margin: 30px auto 0;
    }
}

section.workstyle-work {
    margin: 0 auto 100px;
}

.workstyle-title {
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 30px;
}

.workstyle-title .workstyle-icon {
    width: 50px;
}

.workstyle-title h2 {
    font-size: 4.8rem;
    font-weight: 700;
    color: #E60039;
}

section.workstyle-week .workstyle-title small {
    color: #e60039;
    border: 2px solid;
    border-radius: 30px;
    font-weight: 700;
    padding: 0 23px;
    display: block;
}

.tab-4 {
    display: flex;
    flex-wrap: wrap;
    /* width: 500px; */
    margin: 40px auto 0;
    gap: 6px;
}

.tab-4>label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: 10px 0;
    background-color: #f7f7f7;
    color: #999;
    font-weight: 600;
    font-size: 2rem;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.tab-4>label:hover,
.tab-4 label:has(:checked) {
    background-color: #e60039;
    color: #fff;
}

.tab-4 label:has(:checked)::before {
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 14px;
    background-color: #e60039;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab-4 input {
    display: none;
}

.tab-4>div {
    display: none;
    width: 100%;
    padding-top: 40px;
}

.tab-4 label:has(:checked)+div {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.workstyle-work-table dl {
    width: calc(100% / 4 - 10px);
    border: 1px solid #B7B7B7;
    border-radius: 4px;
    padding: 30px;
}

.workstyle-work-table dl dt {
    color: #E60039;
    font-weight: 700;
    font-size: 1.8rem;
    margin: 0 auto 15px;
    position: relative;
}

.workstyle-work-table dl.workstyle-work01 dt::after {
    content: "";
    background: url(../images/workstyle/work01.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 30px;
    height: 32px;
    right: 0;
    top: 3px;
}

.workstyle-work-table dl.workstyle-work02 dt::after {
    content: "";
    background: url(../images/workstyle/work02.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 30px;
    height: 32px;
    right: 0;
    top: 3px;
}

.workstyle-work-table dl.workstyle-work03 dt::after {
    content: "";
    background: url(../images/workstyle/work03.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 30px;
    height: 32px;
    right: 0;
    top: 3px;
}

.workstyle-work-table dl.workstyle-work04 dt::after {
    content: "";
    background: url(../images/workstyle/work04.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 30px;
    height: 32px;
    right: 0;
    top: 3px;
}

.workstyle-work-table dl.workstyle-work05 dt::after {
    content: "";
    background: url(../images/workstyle/work05.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 30px;
    height: 32px;
    right: 0;
    top: 3px;
}

.workstyle-work-table dl.workstyle-work06 dt::after {
    content: "";
    background: url(../images/workstyle/work06.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 30px;
    height: 32px;
    right: 0;
    top: 3px;
}

.workstyle-work-table dl.workstyle-work07 dt::after {
    content: "";
    background: url(../images/workstyle/work07.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 30px;
    height: 32px;
    right: 0;
    top: 3px;
}

.workstyle-work-table dl.workstyle-work08 dt::after {
    content: "";
    background: url(../images/workstyle/work08.png) center no-repeat;
    background-size: contain;
    position: absolute;
    width: 30px;
    height: 32px;
    right: 0;
    top: 3px;
}

@media (max-width: 768px) {
    section.workstyle-work {
        margin: 0 auto 50px;
    }

    .workstyle-title {
        gap: 10px;
    }

    .workstyle-title .workstyle-icon {
        width: 35px;
    }

    .workstyle-title h2 {
        font-size: 3rem;
    }

    .tab-4 {
        margin: 20px auto 0;
    }

    .tab-4>label {
        font-size: 1.6rem;
    }

    .tab-4>div {
        padding: 1.5em 0;
    }

    .tab-4 label:has(:checked)+div {
        gap: 10px 0;
        justify-content: space-around;
    }

    .workstyle-work-table dl {
        width: 100%;
        padding: 20px;
    }

    .workstyle-work-table dl dt {
        font-size: 1.6rem;
    }
}

section.workstyle-week .workstyle-title p {
    font-weight: 700;
}

section.workstyle-week .workstyle-week-area>ul {
    display: flex;
    justify-content: center;
    margin: 50px auto 80px;
    gap: 40px;
}

section.workstyle-week .workstyle-week-area ul li {
    max-width: 160px;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box {
    border: 1px solid #b7b7b7;
    padding: 50px;
    border-radius: 6px;
    display: flex;
    flex-flow: column;
    gap: 50px;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l {
    width: 65%;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l h3 {
    color: #E60039;
    border-radius: 20px;
    border: 2px solid;
    font-weight: 700;
    display: inline-block;
    padding: 0px 20px;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l h2 {
    font-size: 3.2rem;
    font-weight: 700;
    margin: 30px auto;
    line-height: 1.4;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail {
    border-top: 1px solid #B7B7B7;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail dl {
    border-bottom: 1px solid #b7b7b7;
    padding: 15px 0;
    display: flex;
    gap: 50px;
    font-size: 1.4rem;
    font-weight: 500;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail dl dt {
    width: 18%;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail dl dd {
    width: 82%;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail dl dt {
    color: #565656;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail dl dd ul {
    display: flex;
    gap: 10px;
}

section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-r {
    width: 28%;
}

@media (max-width: 768px) {
    section.workstyle-week .workstyle-title p {
        margin: 30px auto 0;
        text-align: start;
    }

    section.workstyle-week .workstyle-week-area>ul {
        margin: 50px auto 30px;
        gap: 20px;
    }

    section.workstyle-week .workstyle-week-area ul li {
        width: 49%;
        max-width: 180px;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box {
        padding: 20px;
        gap: 30px;
        padding-right: 0;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt {
        flex-flow: column-reverse;
        gap: 20px;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l {
        width: 100%;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l h2 {
        font-size: 2rem;
        margin: 20px auto;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail dl {
        gap: 10px;
        flex-flow: column;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail dl dt {
        width: 100%;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-l .workstyle-week-l-detail dl dd {
        width: 100%;
        font-weight: 700;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-txt .workstyle-week-r {
        width: 40%;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-img {
        overflow-x: scroll;
    }

    section.workstyle-week .workstyle-week-area .workstyle-week-flex .workstyle-week-box .workstyle-week-img img {
        width: 650px;
    }
}

/*number*/
section.number-int {
    text-align: center;
    font-weight: 700;
}

section.number-area {
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 0;
}

section.number-area .number-box {
    border: 1px solid #b7b7b7;
    border-radius: 4px;
    /* display: flex; */
    /* flex-flow: wrap; */
    /* justify-content: space-between; */
}

.number01,
.number02,
.number03,
.number06,
.number07,
.number08 {
    width: calc(100% / 3 - 15px);
}

section.number-area .number-box h2 {
    font-weight: 700;
    text-align: center;
    margin: 40px auto 20px;
    font-size: 1.8rem;
}

section.number-area .number-box dl {
    display: flex;
    flex-flow: column;
    gap: 20px;
    justify-content: space-between;
}

.number01 dd {
    padding: 0px 20px 40px;
}

.number04,
.number05 {
    width: 48.7%;
}

.number04 dl,
.number05 dl {
    flex-flow: row !important;
    padding: 0 50px 50px;
    align-items: center;
}

.number08 dt {
    padding: 0 40px 40px;
}

.number06 dd,
.number07 dd {
    padding: 30px 0 0;
}

@media (max-width: 768px) {
    section.number-area {
        margin: 30px auto 70px;
        gap: 10px 0;
    }

    .number01,
    .number02,
    .number03,
    .number06,
    .number07,
    .number08 {
        width: 100%;
    }

    section.number-area .number-box h2 {

        font-size: 2rem;
    }

    section.number-area .number-box dl {
        gap: 20px;
    }

    .number01 dd {
        padding: 30px;
    }

    .number04,
    .number05 {
        width: 100%;
    }

    .number04 dl,
    .number05 dl {
        flex-flow: column !important;
        padding: 0 30px 30px;
    }
}

section.number-voice .number-voice-title {
    display: flex;
    flex-flow: column;
    gap: 40px;
    justify-content: center;
}

section.number-voice .number-voice-title .number-voice-title-logo {
    width: 42px;
    margin: auto;
}

section.number-voice .number-voice-title h2 {
    text-align: center;
    font-size: 4.8rem;
    font-weight: 700;
    color: #E60039;
}

section.number-voice .number-voice-title h3 {
    color: #e60039;
    border: 2px solid;
    border-radius: 30px;
    /* display: inline-block; */
    text-align: center;
    margin: auto;
    padding: 0 30px;
}

section.number-voice .number-voice-flex {
    display: flex;
    flex-flow: column;
    gap: 50px;
    margin: 70px auto 0;
}

section.number-voice .number-voice-flex .number-voice-box {
    border: 1px solid #b7b7b7;
    border-radius: 4px;
}

section.number-voice .number-voice-flex .number-voice-box h3 {
    background: #E60039;
    color: #fff;
    padding: 30px 80px 30px 130px;
    position: relative;
    font-size: 2rem;
    font-weight: 500;
}

section.number-voice .number-voice-flex .number-voice-box h3:before {
    background: url(../images/number/icon-mic.png) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 0;
    transition: 1s;
    content: '';
    width: 30px;
    height: 40px;
    z-index: 10px;
    transform: calc(50%, 50%);
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-0%, -50%);
    left: 80px;
}

section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail {
    display: flex;
    flex-flow: column;
    gap: 30px;
    padding: 50px 80px;
}

section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int {
    display: flex;
    align-items: center;
    gap: 80px;
}

section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int dt {
    width: 40%;
}

section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int dd {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.4;
}

section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail .number-voice-box-detail-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: stretch;
}

section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail .number-voice-box-detail-flex .number-voice-box-detail-box {
    border: 1px solid;
    padding: 20px;
    border-radius: 4px;
    width: calc(100% / 3 - 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail .number-voice-box-detail-flex .number-voice-box-detail-box p {
    font-size: 1.4rem;
    font-weight: 700;
}

section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail .number-voice-box-detail-flex .number-voice-box-detail-box small {
    text-align: end;
    display: block;
}

.number-box.number03 dd {
    padding-top: 50px;
}


@media (max-width: 768px) {
    section.top-int .int-area .int-box p {
        font-size: 16px;
        text-align: left;
        line-height: 1.8;
    }

    section.number-voice .number-voice-title {
        gap: 10px;
    }

    section.number-voice .number-voice-title h2 {
        font-size: 3rem;
        line-height: 1.5;
    }

    section.number-voice .number-voice-flex {
        margin: 30px auto 0;
    }

    section.number-voice .number-voice-flex .number-voice-box h3 {
        padding: 20px;
        font-size: 18px;
        line-height: 1.5;
        padding-left: 80px;
    }

    section.number-voice .number-voice-flex .number-voice-box h3:before {
        left: 30px;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail {
        padding: 40px 20px;
    }



    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int dt {
        width: 100%;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int dd {
        width: 100%;
        font-size: 2rem;
        text-align: left;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail .number-voice-box-detail-flex .number-voice-box-detail-box {
        width: 100%;
    }
}



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

    section.top-int .int-area .int-box {
        padding: 70px 0;
    }

    .faq-r img {
        max-width: 260px;
    }

    .workstyle-work-table dl {
        width: calc(100% / 2 - 10px);
    }

    .number04 dl,
    .number05 dl {
        flex-flow: column !important;
        padding: 0 30px 30px;
    }

    .number-box.number04 dt img,
    .number-box.number05 dt img,
    .number-box.number08 dt img {
        max-width: 320px;
    }

    .number-box.number04 dt,
    .number-box.number05 dt,
    .number-box.number08 dt {
        margin: 0 auto;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int dd {
        font-size: 2.6rem;
    }



}

@media (min-width: 500px) and (max-width: 768px) {
    .faq-r img {
        max-width: 260px;
    }


    section.top-int .int-area::after {
        width: 430px;
        height: 241px;
    }

    section.top-int .int-area .int-box {
        padding: 50px 30px 280px;
    }

    footer section.entry .entry-img {
        max-width: 380px;
    }



}

@media (max-width: 768px) {

    .number-box.number04 dt img,
    .number-box.number05 dt img,
    .number-box.number08 dt img {
        max-width: 320px;
    }

    .number-box.number04 dt,
    .number-box.number05 dt,
    .number-box.number08 dt {
        margin: 0 auto;
    }

    .number-box dl img {
        max-width: 360px;
    }


    .number-box dl {
        margin: 0 auto;
        text-align: center;
    }

    dl.number-voice-box-detail-int img {
        max-width: 320px;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int {
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }
}


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

    .number01,
    .number02,
    .number03,
    .number06,
    .number07,
    .number08 {
        width: calc(100% / 2 - 15px);
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int {
        gap: 30px;
        flex-flow: column-reverse;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int dt {
        width: 100%;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int dd {
        width: 100%;
        text-align: left;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail {
        padding: 40px;
    }

    section.number-voice .number-voice-flex .number-voice-box h3:before {
        left: 40px;
    }

    section.number-voice .number-voice-flex .number-voice-box h3 {
        padding: 20px 30px 20px 90px;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int dt {
        max-width: 320px;
        width: 100%;
    }

    section.number-voice .number-voice-flex .number-voice-box .number-voice-box-detail dl.number-voice-box-detail-int {
        text-align: center;
        gap: 40px;
        display: flex;
        flex-direction: row;
    }

}


label.seishain-workstyle a {
    color: #999;
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    line-height: 1.2;
}

.ex-link {
    position: relative;
}

label.seishain-workstyle {
    padding: 0;
}

label.seishain-workstyle:hover a {
    color: #fff;
    position: relative;
}




label.seishain-workstyle .ex-link:before {
    content: "";
    background: url(../images/common/blank-icon-gray.png) center no-repeat;
    background-size: contain;
    position: absolute;
    right: -21px;
    width: 12px;
    height: 12px;
    top: 50%;
    transform: translate(-50%, -50%);
}

label.seishain-workstyle:hover .ex-link:before {
    content: "";
    background: url(../images/common/blank-icon-white.png) center no-repeat;
    background-size: contain;
    position: absolute;
}