@charset "utf-8";
/*******************************************
common
*******************************************/

.part-time-only {
    display: block !important;
}

.full-time-only {
    display: none !important;
}

.partTime {
    display: block !important;
}


.headerNav__list {
    &.part-time-only {
        display: flex !important;
    }
}

.footerNav {
    gap: clamp(10px, 2.43vw, 35px);

    &.part-time-only {
        display: flex !important;
    }
}


.section__inner {
    padding: max(var(--size110), 50px) 0 clamp(50px, 10.06vw, 145px);
}

.section__ttl {
    position: relative;
    font-size: var(--font37);
    width: 16.6em;
    aspect-ratio: 617/222;
    margin: 0 auto max(var(--size50), 40px);
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: var(--lineHight140);
    gap: 0.27em;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/part-time/work/ttl-frame.png);
        background-size: contain;
        background-repeat: no-repeat;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }

    .ja,
    .en {
        position: relative;
    }

    .ja {
        transform: translateX(0.3em);
        margin: 0;
    }

    .en {
        font-size: 0.4594em;
        transform: translateX(0.5em);
    }

    @media screen and (max-width:480px) {
        width: 100%;
        align-items: initial;

        &::before {
            aspect-ratio: 617/222;
            height: auto;
            width: min(100%, 390px);
        }
    }

    @media screen and (max-width:374px) {
        &::before {
            width: 118%;
        }
    }
}

.sectionTtl-parts {
    position: absolute;
    width: clamp(95px, 16.73vw, 241px);
    bottom: 0;
}

.sectionTtl-parts01 {
    left: 0;
    transform: translate(-78%, 20%);
}

.sectionTtl-parts02 {
    right: 0;
    transform: translate(53%, 18%);
}


.job,
.questionnaire,
.search {

    .section__inner {
        padding-top: max(var(--size90), 30px);
    }

    .section__ttl {
        margin-bottom: 10px;
    }
}


/*******************************************
mv
*******************************************/

.mv {
    position: relative;

    @media screen and (max-width: 768px) {
        background-color: #fff;
        overflow: hidden;
    }
}

.mv__bg {
    position: relative;
    width: 100%;
    z-index: -1;

    @media screen and (max-width: 768px) {
        z-index: 0;
    }
}

.mv__parts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    pointer-events: none;

    @media screen and (max-width: 768px) {
        z-index: 2;
    }
}

.mv__img01 {
    position: absolute;
    top: 16%;
    left: 19.6%;
    width: 37.56vw;

    @media screen and (max-width: 768px) {
        width: 84.26vw;
        top: 10%;
        left: 23%;
    }
}

.mv__img02 {
    position: absolute;
    top: 38.5%;
    left: -5%;
    width: 19.027vw;

    @media screen and (max-width: 768px) {
        width: 38.133vw;
        left: -4%;
        top: 35.5%;
    }
}

.mv__img03 {
    position: absolute;
    top: 60%;
    left: 8.7%;
    width: 19.23vw;

    @media screen and (max-width: 768px) {
        width: 36.933vw;
        top: 63.5%;
        left: 0;
        z-index: 1;
    }
}

.mv__img04 {
    position: absolute;
    top: 53.5%;
    left: 85%;
    width: 14.86vw;

    @media screen and (max-width: 768px) {
        width: 28.6vw;
        top: 80%;
        left: -0.5%;

    }
}

.mv__img05 {
    position: absolute;
    top: 48%;
    left: 51%;
    width: 26.3vw;
    z-index: -1;

    @media screen and (max-width: 768px) {
        z-index: 0;
        width: 50.666vw;
        top: 77%;
        left: 51%;
    }

}

.mv__ttl {
    position: absolute;
    top: 20%;
    left: 60.5%;
    font-size: 1.854vw;
    z-index: -1;

    .bg-ttl {
        font-size: 1em;

        &>span {
            background-color: var(--red05);
            letter-spacing: var(--fontSpace250);
            border-radius: 0.2247em;
            margin-bottom: 0.3745em;
            font-weight: var(--weight700);
            padding: 0.5em 0.84em;
        }

    }

    @media screen and (max-width: 768px) {
        font-size: 3.565vw;
        z-index: 1;
        top: 57.7%;
        left: 31%;

        .bg-ttl {
            &>span {
                border-radius: 0.45112em;
                margin-bottom: 0.30em;
                padding: 0.5em 0.7em;
            }

        }
    }
}


/*******************************************
work
*******************************************/
.work {
    .sectionTtl-parts01 {
        transform: translate(-61%, 35%);
    }

    .sectionTtl-parts02 {
        transform: translate(61%, 20%);
    }

    @media screen and (max-width: 480px) {
        .sectionTtl-parts01 {
            transform: translate(0%, 35%);
        }

        .sectionTtl-parts02 {
            transform: translate(0%, 20%);
        }

    }

    @media screen and (max-width: 400px) {
        .sectionTtl-parts01 {
            transform: translate(-20%, 35%);
        }

        .sectionTtl-parts02 {
            transform: translate(20%, 42%);
        }

    }

    @media screen and (max-width: 360px) {
        .sectionTtl-parts01 {
            transform: translate(-36%, 53%);
        }

        .sectionTtl-parts02 {
            transform: translate(36%, 56%);
        }

    }
}

.workFlex {
    display: flex;
    justify-content: center;
    gap: var(--size60);


    @media screen and (max-width: 1100px) {
        flex-direction: column;
        width: min(100%, 500px);
        margin: 0 auto;
    }

    @media screen and (max-width: 768px) {
        width: min(100%, 450px);
    }
}

.workBox {
    position: relative;
    border: 1px solid var(--gray04);
    border-radius: var(--radius30);
    padding: 45px max(var(--size40), 20px) 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--white);


    @media screen and (max-width: 1100px) {
        flex: none;
        padding-top: 30px;
    }
}

.workBox__person {
    position: absolute;
    bottom: 20%;
    right: 2%;
    width: clamp(120px, 11.04vw, 159px);
    z-index: 1;

    @media screen and (max-width: 480px) {
        width: 22vw;
    }

    @media screen and (max-width: 400px) {
        top: 2%;
        bottom: auto;
    }
}

.workBox__txtBox {
    .number {
        display: block;
        font-size: var(--font17);
        background-color: var(--red05);
        color: var(--white);
        width: 7.05em;
        font-family: var(--poppins);
        border-radius: var(--radius01);
        font-weight: var(--weight500);
        line-height: 1;
        padding: 0.4em 0 0.36em;
        text-align: center;
    }

    .ttl {
        text-align: left;
        line-height: var(--lineHight150);
        font-size: var(--font28);
        font-weight: var(--weight700);
        margin: 0.7em 0;
        width: 12.8571em;
    }

    @media screen and (max-width: 1300px) {
        .ttl {
            width: 11em;
        }
    }

    @media screen and (max-width: 1100px) {
        .ttl {
            width: 12.8571em;
        }
    }

    @media screen and (max-width: 768px) {
        .ttl {
            margin-top: 0.3em;
        }
    }

    @media screen and (max-width: 480px) {
        .number {
            padding: 0.3em 0 0.2em;
        }
    }

    @media screen and (max-width: 360px) {
        .ttl {
            font-size: 5vw;
        }
    }
}

.workBox__bottom {
    position: relative;
    padding: 35px 0 45px;
    flex-grow: 1;

    &::before {
        position: absolute;
        content: "";
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 200%;
        height: 100%;
        background-color: var(--beige05);
    }

    @media screen and (max-width: 480px) {
        padding: 20px 0 30px;
    }
}

.workBox__cate {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: var(--font15);
    gap: 1em;

    li {
        font-size: 1em;
        text-align: center;
        color: var(--red05);
        line-height: 1;
        border: 1px solid var(--red05);
        border-radius: var(--radius01);
        padding: 0.5em 1.33em;
    }


    @media screen and (max-width: 400px) {
        gap: 5px;
    }

    @media screen and (max-width: 360px) {
        flex-direction: column;
    }
}

.workBox__comment {
    font-size: var(--font17);
    width: 23em;
    margin: 30px 0 35px;

    li {
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }

        p {
            text-align: left;
        }
    }

    @media screen and (max-width: 1300px) {
        width: 19em;
    }

    @media screen and (max-width: 480px) {
        margin: 10px 0 15px;
        width: 80%;
    }
}

.btn-outer-work {
    width: min(90%, 290px);
    margin: 0 auto;

    @media screen and (max-width: 480px) {
        width: min(90%, 200px);
    }
}

/*******************************************
work(modal)
*******************************************/
.modal-work {
    .modalItem-outer {
        border-radius: var(--radius50);
        border: 1px solid var(--gray04);
    }

    .modal__inner {
        width: min(100%, 900px);
    }

    .modalItem__inner {
        width: min(95%, 845px);
        margin: 0 auto;
    }

    @media screen and (max-width:768px) {
        .modalItem__inner {
            width: 90%;
        }
    }
}

.modalWork__top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--size50);

    @media screen and (max-width:768px) {
        flex-direction: column;
        align-items: center;
    }

    @media screen and (max-width:480px) {
        gap: 20px;
    }
}


.modalWork__person {
    width: clamp(150px, 17.2vw, 247.7px);

    @media screen and (max-width:768px) {
        width: 120px;
    }

    @media screen and (max-width:480px) {
        width: 80px;
    }
}

.modalWork__main {
    flex: 1;
    padding-right: var(--size45);
    padding-top: 50px;

    @media screen and (max-width:768px) {
        padding-top: 0;
    }
}

.workBox__txtBox-modal {
    .ttl {
        font-size: var(--font32);
    }

    @media screen and (max-width: 1300px) {
        .ttl {
            width: min(100%, 400px);
        }
    }
}

.modalWork__txt {
    margin: 30px 0 40px;

    @media screen and (max-width:480px) {
        margin: 15px 0 20px;
    }
}

.modalWorkData {
    display: flex;
    gap: 20px;
    width: min(100%, 495px);

    @media screen and (max-width:768px) {
        margin: 0 auto;
    }

    @media screen and (max-width:480px) {
        flex-direction: column;
        align-items: center;
    }
}

.modalWorkData__detail {
    display: flex;
    flex-direction: column;
    font-size: var(--font19);
    background-color: var(--gray05);
    border-radius: var(--radius20);
    padding: 25px 15px 45px;
    flex: 1;


    dt {
        margin-bottom: 25px;
        text-align: center;
        font-size: 1em;
        font-weight: var(--weight500);
    }

    dd {
        width: min(40%, 82px);
        margin: 0 auto;
    }

    @media screen and (max-width:480px) {
        width: min(100%, 200px);
        flex: none;
        padding: 20px 10px;

        dt {
            margin-bottom: 10px;
        }

        dd {
            width: min(50%, 50px);
            margin: 0 auto;
        }
    }
}

.modalWorkData__detail02 {
    margin-bottom: 20px;
    padding-bottom: 20px;

    dt {
        margin-bottom: 0;
    }

    dd {
        width: min(100%, 440px);
    }


    @media screen and (max-width: 480px) {
        width: 100% !important;
    }
}

.modalWorkData__smallTxt {
    text-align: right;
    font-size: var(--font15);
    margin-top: 0.15em;
    letter-spacing: 0;
}

.modalWork__comment {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: min(100%, 718px);
    margin: max(var(--size55), 30px) auto 0;
    gap: 15px;


    .fukidashiBox {
        flex: 1;
        background-color: var(--beige05);
        font-size: var(--font19);
        padding: 1.3em 1.5em;
        border-radius: var(--radius01);

        p {
            font-size: 1em;
            line-height: 1.47;
            letter-spacing: 0;
        }
    }

    .icon {
        width: 135px;
    }

    @media screen and (max-width: 768px) {
        .icon {
            width: 100px;
        }
    }

    @media screen and (max-width: 480px) {
        flex-direction: column;
        align-items: center;


        .fukidashiBox {
            padding: 1em 1.5em;

            &::before {
                top: auto;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 90%);
                clip-path: polygon(0 0, 100% 0%, 50% 100%);
            }
        }
    }
}

.btn-outer-workModal {
    @media screen and (max-width: 768px) {
        .btn {
            padding: 0 2.2em;
        }
    }
}





/*******************************************
feature
*******************************************/
.feature {
    background-color: var(--red05);

    .section__ttl {
        margin-bottom: clamp(40px, 4vw, 60px);

        .en {
            color: var(--green02);
        }

        &::before {
            background-image: url(../img/part-time/feature/ttl-frame.png);
        }
    }

    .sectionTtl-parts01 {
        transform: translate(-57%, 18%);
    }

    .sectionTtl-parts02 {
        transform: translate(53%, 18%);
    }

    @media screen and (max-width: 480px) {
        .sectionTtl-parts01 {
            transform: translate(-10%, 50%);
        }

        .sectionTtl-parts02 {
            transform: translate(11%, 55%);
        }
    }
}

.feature__list {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 5px;

    @media screen and (max-width: 1180px) {
        flex-wrap: wrap;
        width: min(100%, 600px);
        margin: 0 auto;
    }

    @media screen and (max-width: 768px) {
        width: min(100%, 500px);
    }

    @media screen and (max-width: 550px) {
        width: min(100%, 300px);
    }
}

.featureBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white);
    flex: 1;
    border-radius: var(--font25);
    padding: 35px 15px;

    .icon {
        width: min(100%, 62px);
    }

    @media screen and (max-width: 1180px) {
        flex: none;
        width: calc((100% - 5px)/2);
    }

    @media screen and (max-width: 550px) {
        width: 100%;
        padding: 25px 15px;
    }
}

.featureDetail {
    dt {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--font23);
        text-align: center;
        line-height: var(--lineHight140);
        margin: 0.86em 0;
        min-height: calc(var(--lineHight140)*2em);
    }

    dd {
        width: min(100%, 240px);
        margin: 0 auto;

        p {
            letter-spacing: 0;
        }
    }

    @media screen and (max-width: 1300px) {
        dt {
            font-size: 20px;
        }
    }

    @media screen and (max-width: 1180px) {
        dt {
            font-size: var(--font23);
        }
    }

    @media screen and (max-width: 550px) {
        dt {
            margin: 15px 0 10px;
        }
    }
}




/*******************************************
job
*******************************************/
.job {
    background-color: var(--beige05);

    .section__inner {
        padding-bottom: clamp(100px, 20.486vw, 295px);
    }

    .section__ttl {
        &::before {
            background-image: url(../img/part-time/job/ttl-frame.png);
        }
    }

    .sectionTtl-parts01 {
        transform: translate(-78%, 20%);
    }

    .sectionTtl-parts02 {
        transform: translate(53%, 18%);
    }


    @media screen and (max-width: 480px) {
        .sectionTtl-parts01 {
            transform: translate(-10%, 30%);
        }

        .sectionTtl-parts02 {
            transform: translate(10%, 25%);
        }
    }

    @media screen and (max-width: 400px) {
        .sectionTtl-parts01 {
            transform: translate(-35%, 30%) scale(0.9);
        }

        .sectionTtl-parts02 {
            transform: translate(20%, 25%);
        }
    }

    @media screen and (max-width: 350px) {
        .sectionTtl-parts01 {
            transform: translate(-35%, 50%) scale(0.9);
        }

        .sectionTtl-parts02 {
            transform: translate(30%, 45%);
        }
    }
}

.jobSwiper-tab__list {
    .swiper-slide {
        height: 80px;


        .btn {
            border-radius: var(--radius10);
            align-items: flex-start;
            font-size: var(--font19);
            padding-left: var(--arrow25);
            letter-spacing: 0;
            font-weight: var(--weight500);
        }

        .arrow {
            width: var(--arrow25);
            background-color: var(--brown01);
        }
    }

    .swiper-slide-thumb-active {
        .btn {
            background-color: var(--red05);
            color: var(--white);

            .arrow {
                background-color: var(--white);

                &::before {
                    background-color: var(--brown01);
                }
            }
        }
    }

    @media screen and (max-width: 1300px) {
        .swiper-slide {

            .btn {
                padding-left: 10px;
            }

            .arrow {
                right: 2%;
            }
        }
    }

    @media screen and (max-width: 1100px) {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;

        .swiper-slide {
            width: calc((100% - 20px)/3);

            .btn {
                padding-left: 1.3em;
            }

            .arrow {
                right: 5%;
            }
        }
    }


    @media screen and (max-width: 768px) {
        .swiper-slide {
            height: 60px;
        }
    }

    @media screen and (max-width: 620px) {
        gap: 5px;

        .swiper-slide {
            height: 60px;
            width: calc((100% - 5px)/2);
        }
    }

    @media screen and (max-width: 380px) {
        .swiper-slide {
            height: 45px;
            width: min(100%, 200px);
        }
    }
}

.jobSwiper-cont {
    margin: 35px auto 0;

    @media screen and (max-width: 768px) {
        margin-top: 10px;
    }
}

.jobSwiper-cont__list {
    .swiper-slide {
        background-color: var(--white);
        padding: max(var(--size60), 30px) max(var(--size70), 20px) max(var(--size85), 30px);
        border-radius: var(--radius30);
    }
}

.jobSwiper__ttl {
    position: relative;
    font-size: var(--font58);
    letter-spacing: 0;
    margin-bottom: 0.86em;

    &>span {
        background-color: var(--red05);
        width: 100%;
        border-radius: var(--radius20);
        padding: 0.26em 0.7em;
    }

    .small {
        font-size: var(--font19);
    }

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/part-time/job/chara01.png);
        background-size: contain;
        background-repeat: no-repeat;
        aspect-ratio: 714/518;
        width: clamp(100px, 24.791vw, 357px);
        top: 0;
        right: 0;
        transform: translate(7%, -28%);
    }

    @media screen and (max-width: 600px) {
        font-size: 6vw;

        .small {
            font-size: max(0.5em, 10px);
        }
    }

    @media screen and (max-width: 480px) {
        &::before {
            transform: translate(20%, -15%);
        }
    }

    @media screen and (max-width: 370px) {
        font-size: 7vw;


    }
}

.jobSwiper__box {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: max(var(--size55), 15px);
    margin-bottom: max(var(--size70), 40px);

    &:last-child {
        margin-bottom: 0;
    }

    .img {
        border-radius: var(--radius30);
        overflow: hidden;
        width: clamp(200px, 30.208vw, 435px);
    }

    @media screen and (max-width: 768px) {
        flex-direction: column;
        align-items: center;

        .img {
            width: min(100%, 250px);
        }
    }

}

.jobSwiper__txtBox {
    flex: 1;
}

.jobSwiper__detail {
    font-size: var(--font37);

    dt {
        font-size: 1em;
        margin-bottom: 0.67em;
        line-height: 1.2;
    }

    dd {
        margin-bottom: 0.81em;
    }

    @media screen and (max-width: 480px) {
        dt {
            margin-bottom: 10px;
        }
    }
}

.btn-outer-job {
    width: min(100%, 310px);
    height: 70px;

    .btn {
        color: var(--red05);
        border: 1px solid var(--brown01);
		font-size:16px;

        .arrow {
            width: var(--arrow25);
        }
    }

    @media screen and (max-width: 768px) {
        width: min(100%, 250px);
        height: 50px;
        margin: 0 auto;
		 
		.btn {
			 font-size:14px;
		}
    }

    @media screen and (max-width: 480px) {
        width: min(100%, 200px);
    }
}

.jobSwiperPoint {
    margin: max(var(--size70), 40px) auto 0;
    background-color: var(--beige05);
    padding: clamp(80px, 7.291vw, 105px) 15px max(var(--size70), 40px);
    border-radius: var(--radius30);

    @media screen and (max-width: 480px) {
        padding: 60px 15px 30px;
    }

    @media screen and (max-width: 480px) {
        padding: 50px 15px 25px;
    }
}

.jobSwiperPoint__ttl {
    position: relative;
    text-align: center;
    letter-spacing: 0;
    font-size: var(--font43);
    margin-bottom: 25px;
    padding-bottom: 25px;

    &::before,
    &::after,
    &>span::before {
        position: absolute;
        content: "";
        background-size: contain;
        background-repeat: no-repeat;
        left: 50%;
    }

    &::before {
        background-image: url(../img/part-time/job/icon01.png);
        top: 0;
        transform: translate(-50%, -120%);
        aspect-ratio: 65/50;
        width: 1.511em;
    }

    &::after {
        background-image: url(../img/part-time/job/dotted01.svg);
        bottom: 0;
        transform: translateX(-50%);
        aspect-ratio: 194/4;
        width: max(4.511em, 120px);
    }

    &>span {
        position: relative;

        &::before {
            background-image: url(../img/part-time/job/chara02.png);
            aspect-ratio: 164/168;
            width: 1.9em;
            left: 0;
            top: 50%;
            transform: translate(-133%, -50%);
        }
    }



    @media screen and (max-width: 400px) {
        font-size: 20px;
        margin-bottom: 1em;
        padding-bottom: 1em;
    }

}

.jobSwiperPoint__txt {
    text-align: center;
    font-size: var(--font19);
    line-height: 1.47;
    letter-spacing: 0;
}


/*******************************************
loop
*******************************************/
:root {
    --loopWidth: clamp(150px, 33.68vw, 485px);
}

.loop {
    margin-top: calc(((var(--loopWidth)/1.317)/2)*-1);
}

.loopSwiper__list {


    transition-timing-function: linear;
    gap: max(var(--size55), 10px);

    .swiper-slide {
        width: var(--loopWidth);
        border-radius: var(--radius30);
        overflow: hidden;
    }

    .swiper-slide02 {
        width: calc(var(--loopWidth)/1.256);
    }
}





/*******************************************
questionnaire
*******************************************/
.questionnaire {
    .section__ttl {
        margin-bottom: 35px;

        &::before {
            background-image: url(../img/part-time/questionnaire/ttl-frame.png);
        }
    }

    .sectionTtl-parts01 {
        transform: translate(-54%, 18%);
    }

    .sectionTtl-parts02 {
        transform: translate(82%, 19%);
    }

    @media screen and (max-width: 768px) {
        .section__ttl {
            margin-bottom: 10px;
        }
    }

    @media screen and (max-width: 480px) {

        .sectionTtl-parts01 {
            transform: translate(-25%, 27%);
        }

        .sectionTtl-parts02 {
            transform: translate(47%, 25%);
        }
    }

    @media screen and (max-width: 400px) {
        .section__ttl {
            margin-bottom: 20px;
        }

        .sectionTtl-parts02 {
            transform: translate(45%, 43%);
        }
    }

    @media screen and (max-width:370px) {
        .sectionTtl-parts01 {
            transform: translate(-45%, 46%);
        }
    }
}


.questionnaire__flex {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 5px;

    @media screen and (max-width: 1024px) {
        flex-direction: column;
        width: min(100%, 500px);
        margin: 0 auto;
    }

    @media screen and (max-width: 768px) {
        width: min(100%, 350px);
    }
}

.questionnaireBox {
    display: flex;
    flex-direction: column;
    background-color: var(--beige05);
    flex: 1;
    padding: 20px 30px;
    border-radius: var(--radius30);

    &:has(.questionnaireBox__img) {
        padding-bottom: 0;
    }

    @media screen and (max-width: 1024px) {
        padding: 30px;
    }
}

.questionnaireBox__img {
    @media screen and (max-width: 1024px) {
        width: min(100%, 300px);
        margin: 0 auto;
    }
}

.questionnaireBox__ttl {
    line-height: 1.35;
    font-size: var(--font28);
    text-align: center;
    font-weight: var(--weight700);
    color: var(--red05);
    margin-bottom: 20px;
    padding: 10px 0;
    border-top: 2px solid var(--red05);
    border-bottom: 2px solid var(--red05);
}

.questionnaire__list {
    padding-top: 10px;

    li {
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }

        p {
            color: var(--red05);
        }
    }

    @media screen and (max-width: 1024px) {
        padding: 0;
    }

    @media screen and (max-width: 768px) {
        li {
            margin-bottom: 5px;
        }
    }
}

.questionnaire__banner {
    margin: 30px auto max(var(--size55), 30px);
    border-radius: var(--radius20);
    overflow: hidden;
    border: 3px solid var(--red05);

    @media screen and (max-width: 480px) {
        border: 1.5px solid var(--red05);
    }
}


.questionnaire__fukidashi {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 25px 20px;

    .fukidashi__flex {
        .icon {
            border: 1px solid var(--red01);
        }

        .fukidashiBox {
            background-color: var(--red05);

            p {
                color: var(--white);
            }

            &::before {
                background-color: var(--red05);
            }
        }

        &:nth-child(2) {
            .fukidashiBox {
                background-color: var(--white);
                border: 1px solid var(--red05);

                p {
                    color: var(--red05);
                }

                &::before {
                    background-color: var(--white);
                }

                &:after {
                    display: block;
                }
            }
        }
    }

    /* @media screen and (min-width: 481px) {

        .fukidashi__flex {
            &:nth-child(3) {
                .fukidashiBox {
                    background-color: var(--white);
                    border: 1px solid var(--red05);

                    p {
                        color: var(--red05);
                    }

                    &::before {
                        background-color: var(--white);
                    }

                    &:after {
                        display: block;
                    }
                }
            }
        }

    } */

    @media screen and (max-width: 480px) {
        gap: 30px;

        .fukidashi__flex {
            &:nth-child(4) {
                .fukidashiBox {
                    background-color: var(--white);
                    border: 1px solid var(--red05);

                    p {
                        color: var(--red05);
                    }

                    &::before {
                        background-color: var(--white);
                    }

                    &:after {
                        display: block;
                    }
                }
            }
        }
    }
}








.questionnaireSwiper-outer {
    margin-bottom: 50px;
}


.questionnaireSwiper {
    width: min(100%, 500px);
    margin: 0 auto;
    margin-top: 50px;
    overflow: visible;

    .questionnaire__fukidashi {
        justify-content: initial;
        align-items: initial;
        flex-wrap: initial;
        gap: 0;

    }

    .fukidashi__flex {
        width: auto;
        height: auto;

        .fukidashiBox {
            height: 100%;
        }
    }

    .fukidashi__flex02 {
        .fukidashiBox {
            background-color: var(--white);
            border: 1px solid var(--red05);

            p {
                color: var(--red05);
            }

            &::before {
                background-color: var(--white);
            }

            &:after {
                display: block;
            }
        }
    }
}





/*******************************************
search
*******************************************/
.search {
    background-color: var(--pink02);

    .section__inner {
        padding: max(var(--size60), 30px) 0 clamp(50px, 9.027vw, 130px);
    }

    .section__ttl {
        &::before {
            background-image: url(../img/part-time/search/ttl-frame.png);
        }
    }

    .sectionTtl-parts01 {
        transform: translate(-53%, 17%);
    }

    .sectionTtl-parts02 {
        transform: translate(83%, 16%);
    }

    @media screen and (max-width: 480px) {
        .sectionTtl-parts01 {
            transform: translate(-10%, 17%);
        }

        .sectionTtl-parts02 {
            transform: translate(40%, 25%);
        }
    }

    @media screen and (max-width: 400px) {
        .sectionTtl-parts01 {
            transform: translate(-35%, 30%);
        }

        .sectionTtl-parts02 {
            transform: translate(44%, 32%) scale(0.8);
        }
    }
}

.searchBtn__list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: max(var(--size40), 10px);

    .aco-container {
        flex: 1;
    }

    .aco-click {
        width: 100%;
        height: 100px;

        .btn {
            font-size: var(--font23);
        }

        .arrow {
            width: var(--arrow25);
        }
    }





    @media screen and (max-width: 1024px) {
        flex-direction: column;
        width: min(100%, 500px);
        margin: 0 auto;

        .aco-container {
            flex: none;
            width: 100%;
        }

        .aco-click {
            height: 85px;
        }
    }

    @media screen and (max-width: 768px) {
        width: min(100%, 300px);
    }

    @media screen and (max-width: 480px) {
        gap: 10px;

        .aco-click {
            height: 60px;
        }
    }
}


.searchBtn__sub {
    padding-top: 10px;

    li {
        width: 100%;
        height: 70px;

        .btn {
            background-color: transparent;
            border-radius: 0;
            border-bottom: 1px dashed var(--brown01);
            color: var(--brown01);
            font-size: var(--font19);
            font-weight: var(--weight500);

            .arrow {
                background-color: transparent;

                &::before {
                    background-color: var(--brown01);
                }
            }
        }

    }

    @media screen and (max-width: 480px) {
        padding: 0 0 30px;

        li {
            height: 50px;

        }
    }
}






/*******************************************
search
*******************************************/

.footerNav {
    @media screen and (max-width: 1380px) {
        gap: clamp(5px, 1vw, 35px);
        flex-wrap: wrap;
    }

}