@charset "utf-8";

/*******************************************
common
*******************************************/
.section__ttl {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font43);
    text-align: center;
    margin-bottom: clamp(25px, 6.7%, 85px);

    .en {
        font-size: 4.58em;
        font-family: var(--zenMaru);
        font-weight: var(--weight900);
        color: var(--beige01);
        line-height: 1;
    }

    .ja {
        margin-top: -1em;
        letter-spacing: var(--fontSpace140);
        line-height: var(--lineHight133);
    }

    @media screen and (max-width:768px) {
        .en {
            font-size: 4.285em;
        }
    }
}

/*******************************************
mv
*******************************************/
.mv {
    position: relative;
    margin-top: var(--headerHeight);

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

    @media screen and (max-width:768px) {
        aspect-ratio: 375/547;

        &::before {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            background: var(--gra02);
            width: 100%;
            height: 95.61%;
            z-index: -1;
            border-radius: 0 0 20vw 0;
        }
    }

}

.mvBox {
    position: absolute;
    left: 5.9027vw;
    top: 50%;
    transform: translateY(-48%);
    font-size: 4.0277vw;

    @media screen and (max-width:768px) {
        position: initial;
        font-size: 9.06666vw;
        top: auto;
        bottom: 0;
        transform: none;
    }
}


.mv__type {
    font-size: 0.36em;
    width: 13em;
    background-color: var(--white);
    border: clamp(1px, 0.095em, 3px) solid var(--black);
    aspect-ratio: 280/53;
    margin-bottom: 1em;
    text-align: center;
    line-height: 1.25;

    @media screen and (max-width:768px) {
        position: absolute;
        top: 4.3em;
        left: 1em;
        font-size: 0.295em;
        width: 13.2em;
    }
}

.mv__ttl {
    line-height: 1.6896;
    letter-spacing: 0.05em;
    font-weight: var(--weight500);

    .thin {
        letter-spacing: -0.3em;
    }

    @media screen and (max-width:768px) {
        line-height: 1.43;

        .bg-ttl {
            display: inline-block;
            background-color: var(--white);
            margin-bottom: 0.1em;
            padding: 0 0.15em;
        }

    }


}

.mv__tagList {
    font-size: 0.31em;
    margin: 1.5em 0 2.5em;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.833em;


    li {
        width: 7.66em;
        aspect-ratio: 138/54;
        border: none;
        background-color: var(--white);
        color: var(--pink01);
        box-shadow: 0.38em 0.38em 0.27em rgba(0, 0, 0, 0.1);
    }

    @media screen and (max-width:768px) {
        font-size: 0.29em;
        margin: 0.8em 0 1.2em;
        gap: 0.5em 1em;
        width: 90%;
        padding-left: 1em;

        li {
            position: relative;
            background-color: transparent;
            box-shadow: none;
            width: fit-content;
            aspect-ratio: initial;

            &::before {
                position: absolute;
                content: "/";
                top: 0;
                right: 0;
                transform: translateX(0.8em);
            }

            &:last-child {
                &::before {
                    display: none;
                }
            }
        }
    }
}

.mv__btnFlex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.346em;
    font-size: 0.448em;

    .btn-outer {
        width: 16.9em;
        aspect-ratio: 440/90;
        height: auto;
    }

    .btn {
        font-size: 1em;

        &::before {
            width: 1.23em;
        }
    }


    @media screen and (max-width:768px) {
        width: 24.285em;
        gap: 0.714em;
        font-size: 0.411em;
        justify-content: space-between;

        .btn-outer {
            width: calc((100% - 0.29em) /2);
            aspect-ratio: 162.5/39;
            height: auto;
        }

        .btn {
            &::before {
                width: 0.85em;
            }
        }
    }
}


@media screen and (max-width:768px) {
    .mvBox__main {
        position: absolute;
        width: 100%;
        left: 50%;
        bottom: 21px;
        left: 0.29em;
    }
}

/*******************************************
match
*******************************************/
.match {
    .section__inner {
        padding: 30px 0 clamp(10px, 8.3%, 120px);
    }

    .section__ttl {
        margin-bottom: 0;

        .ja {
            margin-left: -1.5em;
        }
    }

    @media screen and (max-width:768px) {
        .section__inner {
            padding-bottom: min(4vw, 50px);
        }

        .section__ttl {
            .ja {
                margin-left: 0;
            }
        }
    }
}

.match__img {
    margin: max(3.57%, 15px) auto 0;
    width: min(88.27%, 1090px);

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





/*******************************************
point
*******************************************/
.point {
    &::before {
        transform: translate(-50%, 75%);
    }

    .section__inner {
        padding: 0 0 clamp(50px, 14%, 190px);
    }

    .section__ttl {

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


    @media screen and (max-width:1024px) {
        &::before {
            transform: translate(-50%, 33%);
        }

        .section__ttl {
            margin-bottom: max(8%, 35px);
        }

    }
}

.pointList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 80px clamp(10px, 2.77vw, 40px);
    counter-reset: num;


    @media screen and (max-width:1024px) {
        gap: 10px;
        width: min(100%, 600px);
        margin: 0 auto;
    }
}

.pointList__item {
    position: relative;
    width: calc((100% - (clamp(10px, 2.77vw, 40px)*2))/3);
    font-size: var(--font36);
    background-color: var(--yellow01);
    padding: 55px 0.83em 45px;
    border-radius: var(--borderRadius20);
    counter-increment: num;

    &::before {
        position: absolute;
        content: counter(num, decimal-leading-zero);
        font-size: var(--font84);
        font-family: var(--poppins);
        font-weight: var(--weight600);
        line-height: 1;
        color: var(--pink02);
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @media screen and (max-width:1024px) {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding: 0.55em 0.83em 1em;
        gap: 0.61em;


        &::before {
            top: 0.413em;
            left: 0.7em;
            transform: initial;
            font-size: min(var(--font84), 40px);
        }

        @media screen and (max-width:768px) {
            &::before {
                left: 0.5em;
            }

        }

        @media screen and (max-width:480px) {
            &::before {
                left: 0.413em;
            }
        }

        @media screen and (max-width:374px) {
            padding-right: 0.3em;
        }
    }
}

.pointList__icon {
    position: relative;
    width: 3.7em;
    margin: 0 auto 0.41em;

    @media screen and (max-width:1024px) {
        width: 2.04em;
        padding-top: 1.66em;
        margin-bottom: 0;
    }
}

.iine-fukidashi {
    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/part-time/point/iine.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: max(51.13%, 19px);
        aspect-ratio: 68/39;
        top: 50%;
        left: 0;
        transform: translate(-50%, -65%);
    }

    @media screen and (max-width:1024px) {
        &::before {
            top: auto;
            bottom: 0;
            transform: translate(-50%, -100%);
        }
    }

}

.pointList__detail {
    display: flex;
    flex-direction: column;

    dt {
        text-align: center;
    }

    dd {
        margin: 1.9em auto 0;
        font-size: var(--font23-13);
        line-height: 1.26;
        text-align: left;
        width: min(100%, 320px);
    }

    @media screen and (max-width:1024px) {
        dt {
            text-align: left;
        }

        dd {
            width: 100%;
            margin-top: 1.1538em;
            line-height: var(--lineHight153);
        }
    }
}

.btn-outer-point {
    margin: 15px auto 0;

    @media screen and (max-width:1024px) {
        height: 40px;
        width: clamp(162.5px, 63.3%, 200px);
        margin: 10px 0 0 auto;
    }
}

/* -------------
work
------------- */
.work {
    margin: max(6.7%, 40px) auto 0;
    width: min(100%, 1178px);
    padding-bottom: max(5.14%, 35px);

}

.work__ttl {
    font-size: var(--font36);
    letter-spacing: var(--fontSpace140);
    text-align: center;
    margin: 0 auto max(6.3%, 25px);

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

.workList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 50px;
    font-size: var(--font28-18);
    gap: clamp(10px, 2.43vw, 35px) clamp(20px, 3.47vw, 50px);
}

.workList__item {
    width: calc((100% - clamp(20px, 3.47vw, 50px))/2);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

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

}

.workList__icon {
    width: 3.57em;

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

.work__detail {
    flex: 1;
    padding-left: 0.6em;
    padding-top: 0.5em;

    dt {
        position: relative;
    }

    dd {
        font-size: var(--font23-13);
        margin-top: max(0.43em, 5px);

        .small {
            display: inline-block;
            font-size: max(0.65em, 10px);
        }
    }

    @media screen and (max-width:768px) {
        dd {
            line-height: var(--lineHight153);
        }
    }
}


.expert {
    display: block;
    position: relative;
    width: fit-content;

    &::after {
        position: absolute;
        content: "有識者のみ";
        background-color: var(--black);
        color: var(--white);
        font-size: var(--font17);
        width: max(8.235em, 84px);
        min-height: 16px;
        aspect-ratio: 140/24;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--borderRadius01);
        top: 0;
        left: 103%;
        transform: translateY(0.3em);
        font-weight: var(--weight500);
    }
}


/* -------------
base
------------- */
.base {
    padding-top: max(5.98%, 35px);
    width: min(100%, 1250px);
    margin: 0 auto;
    border-top: var(--borderGray01);
}

.base__ttl {
    font-size: var(--font43);
    letter-spacing: var(--fontSpace140);
    text-align: center;
    margin: 0 auto 15px;
    line-height: var(--lineHight133);

    @media screen and (max-width:768px) {
        margin-bottom: 20px;
        letter-spacing: 0;
    }
}

.base__txt {
    font-size: var(--font21-13);
    text-align: center;
    font-weight: var(--weight500);

    @media screen and (max-width:768px) {
        font-weight: var(--weight700);
        line-height: var(--lineHight153);
    }
}

.base__list {
    width: min(100%, 1000px);
    margin: 30px auto 0;
    display: flex;
    justify-content: center;
    /* align-items: flex-start; */
    gap: 40px;

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

.baseItem {
    width: calc((100% - 80px)/3);

    @media screen and (max-width:768px) {
        width: calc((100% - 20px)/2);
    }

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


.baseItem__top {
    position: relative;
    aspect-ratio: 306.6/290;
    z-index: 0;

    .label {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--font36);
        background-color: var(--pink01);
        color: var(--white);
        width: 2.5em;
        aspect-ratio: 90/45;
        min-height: 23px;
        line-height: 1;
        z-index: 1;
        pointer-events: none;
    }
}

.baseItem__map {
    position: relative;
    width: 100%;
    height: 100%;
}

.baseItem__detail {
    padding: 30px 20px 40px;
    border: var(--borderGray01);
    border-top: none;
    background-color: var(--white);

    dt {
        font-size: var(--font28-14);
        margin-bottom: max(0.53em, 5px);
    }

    dd {
        font-size: var(--font23-12);
    }

    @media screen and (max-width:768px) {
        padding: 15px 10px 20px;
    }

    @media screen and (max-width:480px) {
        flex-grow: 1;

    }
}


/*******************************************
voice
*******************************************/
.voice {
    .section__inner {
        padding: 0 0 clamp(80px, 7%, 100px);
    }

    .section__ttl {
        .en {
            color: var(--pink03);
        }
    }
}

.voice__list {
    width: min(100%, 1050px);
    margin: 0 auto 105px;
    counter-reset: num;

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

.voiceItem {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    counter-increment: num;

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

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

.voiceItem-pink {
    .voiceItem__number::before {
        color: var(--pink01);
    }
}

.voiceItem-orange {
    .voiceItem__number::before {
        color: var(--orange01);
    }
}

.voiceItem-green {
    .voiceItem__number::before {
        color: var(--green04);
    }
}

.voiceItem__number {
    position: absolute;
    top: 9.3%;
    left: 50px;
    font-size: max(var(--font21-10), 19px);
    height: 1em;

    &::before {
        position: absolute;
        content: "Interview." counter(num, decimal-leading-zero);
        top: 0;
        left: 0;
        font-size: 1em;
        font-weight: var(--weight900);
    }

    @media screen and (max-width:1024px) {
        top: 10px;
        left: 15px;
    }
}

.voiceItem__main {
    position: absolute;
    left: 50px;
    top: 20%;

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

.voiceItem__ttl {
    font-size: var(--font35);
    font-weight: var(--weight900);
    line-height: 1.485;
    text-align: left;

    @media screen and (max-width:1024px) {
        line-height: 1.571;
    }
}

.btn-outer-voice {
    margin-top: 20px;

    @media screen and (max-width:1024px) {
        width: min(69%, 300px);
        margin-left: auto;
        margin-right: auto;
    }
}



/* -------------
note
------------- */
.noteBox {
    background-color: var(--gray02);
    padding: 70px 45px 55px;
    border-radius: var(--borderRadius20);

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

.noteBox__ttl {
    position: relative;
    font-size: var(--font36);
    padding-bottom: 0.5em;

    .ttl {
        position: relative;
    }

    &::before {
        position: absolute;
        content: "！";
        font-family: var(--zenMaru);
        font-size: 5.44em;
        color: var(--white);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -59%) rotate(20deg);
        z-index: 0;
        font-weight: var(--weight900);
    }

    &:after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--black);
    }
}

.ttl-fukidashi-note {
    font-size: var(--font21-12);
    line-height: 1.285;
    transform: translate(150%, -34%);

    &::before {
        background-color: var(--yellow02);
        width: 175%;
        height: auto;
        aspect-ratio: 178/87;
    }

    @media screen and (max-width:768px) {
        transform: translate(53%, -166%);
    }
}

.noteBox__txt {
    position: relative;
    font-size: var(--font21-13);
    text-align: center;
    line-height: var(--lineHight153);
    font-weight: var(--weight500);
    margin-top: max(4.3%, 25px);

    @media screen and (max-width:480px) {
        font-weight: var(--weight700);
    }
}

.noteBox__list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3.47222vw;
    margin: max(4.3%, 25px) auto 0;
    counter-reset: num;

    @media screen and (max-width:768px) {
        flex-wrap: wrap;
        gap: 25px 20px;
    }
}

@counter-style circled {
    system: fixed;
    symbols: "❶" "❷" "❸" "❹" "❺" "❻" "❼" "❽" "❾" "❿";
    suffix: " ";
}

.noteBoxItem {
    width: calc((100% - (3.47222vw * 2))/3);
    counter-increment: num;

    .frame01 {
        position: relative;
        background-color: var(--white);
        font-size: var(--font24-12);
        width: min(100%, 12.375em);
        margin: 0 auto 0.8em;
        height: 2.5em;

        span {
            position: relative;
            padding-left: 1.3em;

            &::before {
                position: absolute;
                content: counter(num, circled);
                top: 0;
                left: 0;
                font-size: 1em;
            }
        }


    }

    @media screen and (max-width:768px) {
        width: calc((100% - 20px)/2);

        .frame01 {
            width: min(100%, 11.91em);
            border: 1px solid var(--black);
        }
    }
}

.noteBoxItem__main {
    .txt {
        font-size: var(--font21-10);
        font-weight: var(--weight500);
        margin-top: 0.9em;
    }
}


/*******************************************
modal-evaluation
*******************************************/
.modal-evaluation {
    .modalItem-outer {
        padding-top: clamp(65px, 7%, 100px);
    }

    .modalClose-top {
        top: clamp(10px, 3.125vw, 45px);
    }
}

.modalEvaluation__top {
    .frame01 {
        font-size: var(--font23-13);
        width: min(100%, 21.7em);
        margin: 0 auto max(2.17em, 20px);
        border: 2px solid var(--orange02);
        background-color: var(--white);

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

.modalEvaluation__ttl {
    position: relative;
    font-size: var(--font62);
    text-align: center;
    width: fit-content;
    margin: 0 auto;

    &:after {
        position: absolute;
        content: "";
        background-image: url(../img/part-time/point/icon06.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 3.4em;
        aspect-ratio: 67 / 54;
        transform: translate(36%, -71%) rotate(15deg);
    }


    &.iine-fukidashi {
        &::before {
            width: 2em;
            transform: translate(-175%, -65%);
        }
    }

    @media screen and (max-width:768px) {
        &:after {
            width: 2em;
            aspect-ratio: 67 / 54;
            transform: translate(10%, 3%) rotate(15deg);
        }

        &.iine-fukidashi {
            &::before {
                width: 1.75em;
                transform: translate(-128%, -15%);
            }
        }
    }
}

.modalEvaluation__txt {
    margin-top: max(2.6em, 25px);
    font-size: var(--font23-12);
    line-height: 1.26;
    text-align: center;
}


.modalEvaluation__main {
    width: min(94%, 1350px);
    margin: 15px auto 0;
    overflow: scroll;



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

        .img {
            width: 600px;
            margin: 0 auto;
        }
    }

    @media screen and (max-width:600px) {
        padding-left: 15px;
    }
}