@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #0a0d0d;
    --gray01: #cdbfbf;
    --gray02: #ebe5e5;
    --yellow01: #ffc60b;
    --yellow02: rgba(255, 198, 11, 0.2);
    --yellow03: #ffdc32;
    --yellow04: #fff1c2;
    --yellow05: #fffaeb;
    --yellow06: #fff0c8;
    --green01: #009277;
    --green02: #e4f8d1;
    --green03: #67c090;
    --orange01: #ff8b00;
    --orange02: #ffc580;
    --orange03: #f5a10a;
    --brown01: #370000;
    --brown02: #9b8080;
    --pink01: #fd8c78;
    --pink02: #ffb0be;
    --pink03: #fec8be;
    --pink04: #ffc8d2;
    --beige01: #fff8ea;
    --beige02: #ffffef;

    /* ぼかし */
    --blur: blur(10px);

    --shadowOrange: 10px 10px 0 var(--orange02);
    --shadowYellow: 10px 10px 0 var(--yellow03);
    --shadowPink01: 10px 10px 0 var(--pink03);
    --shadowPink02: 10px 10px 0 var(--pink04);
    --shadowbrown: 6px 6px 0 var(--brown02);



    /* 書式 */
    --zenKaku: "Zen Kaku Gothic New", sans-serif;

    /* 文字サイズ */
    --font17: clamp(14px, 0.27vw + 13.23px, 17px);
    --font18: clamp(15px, 0.27vw + 14.23px, 18px);
    --font19: clamp(15px, 0.36vw + 13.86px, 19px);
    --font21: clamp(16px, 0.45vw + 14.57px, 21px);
    --font22: clamp(17px, 0.45vw + 15.57px, 22px);
    --font23: clamp(18px, 0.45vw + 16.57px, 23px);
    --font24: clamp(18px, 0.54vw + 16.29px, 24px);
    --font28: clamp(20px, 0.71vw + 17.71px, 28px);
    --font30: clamp(22px, 0.71vw + 19.71px, 30px);
    --font32: clamp(24px, 0.71vw + 21.71px, 32px);
    --font36: clamp(25px, 0.98vw + 21.86px, 36px);
    --font40: clamp(35px, 0.45vw + 33.57px, 40px);

    /* ウェイト */
    --weight500: 500;
    --weight700: 700;

    /* 行間 */
    --lineHight120: 1.2;
    --lineHight150: 1.5;
    --lineHight160: 1.6;
    --lineHight20: 2.0;

    /* 文字間 */
    --fontSpace050: 0.05em;
    --fontSpace100: 0.1em;

    /* トランジションの変数　 */
    --transition01: all 0.5s ease-in-out;

    /* 角丸の変数　 */
    --borderRadius01: 500px;
    --borderRadius10: 10px;
    --borderRadius20: 20px;
    --borderRadius25: 25px;
    --borderRadius30: 30px;
    --borderRadiusCircle: 50%;

    --opacity07: .7;

    --responsivePadding: clamp(15px, 4.16vw, 40px);
}


@media screen and (max-width: 768px) {
    :root {
        --opacity07: 1;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --borderRadius20: 10px;
        --borderRadius25: 10px;
        --borderRadius30: 15px;
    }
}

/*******************************************
common
*******************************************/

body {
    color: var(--brown01);
    font-family: var(--zenKaku);
    font-weight: var(--weight700);
    font-size: var(--font19);
    line-height: var(--lineHight120);

    a,
    .hamburger,
    .btn,
    .pagiBtn,
    .workSwiper-tab__list .swiper-slide {
        transition: var(--transition01);
        cursor: pointer;

        &:hover {
            opacity: var(--opacity07);
        }
    }
}

p {
    text-align: justify;
    line-height: var(--lineHight160);
    font-weight: var(--weight500);
    font-size: var(--font19);
}


.section {
    position: relative;
}

.section__inner {
    position: relative;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: clamp(50px, 6.42vw, 90px) 0 clamp(50px, 9.64vw, 135px);

    @media screen and (max-width:1180px) {
        padding-left: var(--responsivePadding) !important;
        padding-right: var(--responsivePadding) !important;
    }
}

.section__ttl {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: max(7.2%, 35px);
    letter-spacing: var(--fontSpace050);
    text-align: center;
    font-size: var(--font40);
    padding-bottom: 0.6em;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/common/ttl-parts.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 3.875em;
        aspect-ratio: 155/11;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

.push {
    display: inline-block;
}

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

.under-line01 {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4em;
    text-decoration-color: var(--black01);
}

.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.mark-circle {
    position: relative;
    padding-left: 1em;
    font-size: min(var(--font19), 18px);
    line-height: var(--lineHight120);
    display: inline-block;

    &::before {
        position: absolute;
        content: "";
        width: 0.535em;
        aspect-ratio: 1;
        border-radius: var(--borderRadiusCircle);
        top: max(0.65em, 7px);
        left: 0;
        background-color: var(--orange01);
        transform: translateY(-50%);
    }
}

.bg-dots {
    background-image: radial-gradient(circle, var(--yellow06) 1.5px, transparent 1.5px);
    background-position: 0 0;
    background-size: 18px 18px;
}


.check__list {
    li {
        position: relative;
        padding-left: 1.57em;
        font-size: var(--font19);
        line-height: 1.3;
        margin-bottom: 0.78em;
        font-weight: var(--weight500);

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/work/check.svg);
            background-size: contain;
            background-repeat: no-repeat;
            aspect-ratio: 20.5/20;
            width: 1.05em;
            top: 0.2em;
            left: 0;

        }
    }
}

.font-orange01 {
    color: var(--orange01);
}



.block768 {
    display: none;
}

@media screen and (max-width: 768px) {
    .block768 {
        display: block;
    }

    .none768 {
        display: none;
    }
}



/*******************************************
btn
*******************************************/
.btn-outer {
    width: min(100%, 330px);
    height: 80px;

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

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

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: var(--white);
    background-color: var(--orange01);
    font-size: var(--font21);
    width: 100%;
    height: 100%;
    border-radius: var(--borderRadius20);
    transition: var(--transition01);
    cursor: pointer;

    &::before {
        position: absolute;
        content: "";
        mask-image: url(../img/common/arrow.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        top: 50%;
        right: 5%;
        width: 9.5px;
        aspect-ratio: 9.5/17;
        transform: translateY(-50%);
        background-color: var(--white);
    }
}

.btn-orange02 {
    background-color: var(--orange03);
}

.btn-gray01 {
    background-color: var(--gray02);
    color: var(--brown01);

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

.btn-outer-circle {
    width: 55px;
    height: auto;
    aspect-ratio: 1;

    .btn {
        background-color: var(--green01);
        border-radius: var(--borderRadiusCircle);

        &::before {
            right: auto;
            left: 50%;
            transform: translate(-50%, -50%);
            width: max(18.18%, 7px);
        }
    }

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


/*******************************************
追従ボタン
*******************************************/
.main__inner {
    position: relative;
}

.topReturn {
    position: fixed;
    bottom: 2%;
    right: 3%;
    width: 70px;
    aspect-ratio: 1;
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    transition: var(--transition01);

    a {
        font-size: var(--font19);
        border-radius: var(--borderRadiusCircle);
        background-color: var(--orange03);

        &::before {
            width: max(13.57%, 5px);
            top: 0;
            right: auto;
            left: 50%;
            transform: translate(-50%, 80%) rotate(-90deg);
        }

        span {
            transform: translateY(30%);
        }


    }

    @media screen and (max-width: 768px) {
        width: 50px;
        bottom: calc(65px + 2%);

        a {
            &::before {
                transform: translate(-50%, 60%) rotate(-90deg);
            }

            span {
                transform: translateY(20%);
            }
        }
    }

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

        a {
            font-size: 13px;
        }
    }
}



/*******************************************
entryBox
*******************************************/
.entryBox-fixed {
    position: fixed;
    top: 50%;
    right: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
    width: clamp(100px, 15.35vw, 215px);
    transform: translateY(-50%);
    transition: var(--transition01);
    opacity: 0;
    visibility: hidden;

    a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: var(--font19);
        background-color: var(--green01);
        color: var(--white);
        line-height: 1.75;
        height: 80px;
        padding-left: 0.78em;

        &:last-child {
            background-color: var(--orange01);
        }
    }

    @media screen and (max-width: 1180px) {
        a {
            line-height: 1.2;
            padding: 0 0.4em;
        }
    }

    @media screen and (max-width: 768px) {
        width: min(95%, 500px);
        top: auto;
        right: auto;
        bottom: 2%;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 5px;

        a {
            flex: 1;
            height: 60px;
            text-align: center;
            justify-content: center;
            border: 1px solid var(--white);
        }
    }
}






/*******************************************
header
*******************************************/
:root {
    --headerHeight: clamp(40px, 8.16vw, 100px);
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 30px 0 40px;
    height: var(--headerHeight);
    z-index: 95;
    transition: var(--transition01);
    font-size: 20px;

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

    @media screen and (max-width:768px) {
        font-size: max(1.73vw, 10px);
    }

    @media screen and (max-width:768px) {
        padding-left: min(1.5625vw, 20px);
        position: absolute;
    }
}

.bg-white {
    background-color: var(--yellow05);


    @media screen and (max-width:768px) {
        backdrop-filter: initial;
        background-color: transparent;
    }
}

.header__logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 10px;

    a {
        display: inline-block;
        width: clamp(200px, 22.14vw, 310px);
        height: 100%;
        transition: var(--transition01);
    }

    .txt {
        display: block;
        font-size: clamp(12px, 1.35vw, 19px);
        margin-left: 1em;
    }


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

.hamburger {
    position: relative;
    display: block;
    width: 120px;
    aspect-ratio: 120/80;
    cursor: pointer;
    z-index: 100;
    transition: var(--transition01);
    background-color: var(--yellow01);
    border-radius: var(--borderRadius10);
    margin-left: auto;

    .line {
        position: absolute;
        width: 55%;
        height: 3px;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: var(--transition01);
        background-color: var(--brown01);

        &:nth-of-type(1) {
            top: 30%;
        }

        &:nth-of-type(2) {
            top: 50%;
        }

        &:nth-of-type(3) {
            top: 70%;
        }
    }

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


    @media screen and (max-width:768px) {
        position: fixed;
        right: 3%;
        top: calc(var(--headerHeight)/2);
        transform: translateY(-50%);
        width: 5.88em;
    }

    @media screen and (max-width:480px) {
        width: min(15.625vw, 50px);

        .line {
            height: 1.5px;
        }
    }
}


.headerNav {
    position: fixed;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 95;
    background-color: var(--white02);
    backdrop-filter: blur(10px);
    transition: var(--transition01);
    opacity: 0;
    visibility: hidden;
}

.headerNav__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: min(50%, 500px);
    height: 100%;
    padding: clamp(80px, 10svh, 100px) 5% 2vh;
    margin-left: auto;
    background-color: var(--white);
    transform: translateX(100%);
    transition: var(--transition01);

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

.headerNav__item {
    margin: 0 0 5svh;

    &:nth-last-child(2) {
        margin: 0;
    }

    &:last-child {
        margin: 8svh 0 0;
        width: 100%;
    }

    a:not(.btn) {
        display: inline-block;
        width: 100%;
        position: relative;
        color: var(--black);
    }

    @media screen and (max-width:768px) {
        font-size: 15px;
    }

}

.active {
    .line {

        &:nth-of-type(1) {
            top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        &:nth-of-type(2) {
            opacity: 0;
        }

        &:nth-of-type(3) {
            top: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
        }
    }

    .headerNav {
        opacity: 1;
        visibility: visible;
    }

    .headerNav__list {
        transform: translateX(0);
    }
}

.btn-outer-header {
    margin: 0 auto;
}


/*******************************************
mv
*******************************************/
.mv {
    position: relative;
    background-color: var(--yellow05);
    aspect-ratio: 1400/916;
    padding-top: var(--headerHeight);
    font-size: 4.714vw;


    @media screen and (max-width:768px) {
        aspect-ratio: 980/1120;
        font-size: 7.85vw;
    }
}

.mv__inner {
    position: relative;
    height: 100%;
}

.mv__img {
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 2.5%;
    z-index: 1;

    @media screen and (max-width:768px) {
        width: 12.18em;
        right: 3%;
    }
}

.mv__ttl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10.48em;
    aspect-ratio: 692/348;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;

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

    .ttl {
        position: relative;
        text-align: center;
        line-height: 1.3;
        transform: translate(4%, -11%);
    }

    @media screen and (max-width:768px) {
        z-index: initial;
        transform: translate(-50%, -57%);
        width: 10.09em;
    }
}

.mv__parts01 {
    position: absolute;
    top: 1.3%;
    left: 1.3%;
    width: 7.6em;

    @media screen and (max-width:768px) {
        width: 6.25em;
        left: -2%;
    }
}

.mv__parts02 {
    position: absolute;
    top: 1.5%;
    right: 1%;
    width: 7.22em;

    @media screen and (max-width:768px) {
        width: 6em;
        right: -2%;
    }
}

.mv__parts03 {
    position: absolute;
    bottom: 6%;
    left: 0.5%;
    width: 6.22em;

    @media screen and (max-width:768px) {
        width: 5.6em;
        left: 0%;
        bottom: 2%;
        transform: rotate(-9deg);
    }
}

.mv__parts04 {
    position: absolute;
    bottom: 8%;
    right: -1%;
    width: 5.8em;

    @media screen and (max-width:768px) {
        width: 6em;
        transform: rotate(10deg);
        bottom: 2%;
        right: -0.5%;
    }
}

.mv__parts05 {
    position: absolute;
    bottom: 1%;
    left: 43%;
    width: 4.69em;

    @media screen and (max-width:768px) {
        display: none !important;
    }
}

/*******************************************
message
*******************************************/
.message {
    .section__inner {
        width: min(100%, 1400px);
        padding-top: clamp(50px, 10.35vw, 145px);
    }

    .section__ttl {
        margin-bottom: clamp(60px, 7.85vw, 110px);
    }

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

.message__ttl {
    position: relative;
    letter-spacing: var(--fontSpace050);
    text-align: center;
    font-size: var(--font32);
    font-weight: var(--weight500);
    margin-bottom: max(2.86%, 30px);

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/message/icon.png);
        background-size: contain;
        background-repeat: no-repeat;
        aspect-ratio: 36/38;
        width: 1.125em;
        top: 0;
        left: 50%;
        transform: translate(-50%, -105%);
    }
}

.message__txtBox {
    p {
        margin-bottom: max(2.86%, 20px);
        text-align: center;
        letter-spacing: var(--fontSpace050);

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

.message__imgBox {
    .img {
        position: absolute;
        width: clamp(100px, 18.42vw, 258px);
    }

    .im01 {
        top: 24%;
        left: 2%;
    }

    .im02 {
        top: 43%;
        right: 1%;
    }

    .im03 {
        top: 44%;
        left: 6%;
    }

    .im04 {
        top: 64%;
        right: 7%;
    }

    @media screen and (max-width:1135px) {
        width: clamp(270px, 65.81vw, 645px);
        margin: clamp(30px, 10.71%, 105px) auto 0;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: clamp(15px, 4.08%, 40px) clamp(5px, 2.55vw, 25px);

        .img {
            width: 40%;
            position: initial;
        }

        .im01 {
            margin-left: auto;
        }


    }

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

        .im02,
        .im04 {
            transform: translateY(5.61vw);
        }
    }


}

/*******************************************
work
*******************************************/
.work {
    background-color: var(--yellow04);
}

.workSwiper-tab__list {
    height: 100px;
    align-items: flex-end;

    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--font19);
        text-align: center;
        line-height: 1.3;
        border-radius: var(--borderRadius25) var(--borderRadius25) 0 0;
        background-color: var(--orange03);
        transition: var(--transition01);
        height: calc(100% - 25px);
        font-weight: var(--weight500);

        .small {
            font-size: 0.84em;
        }

        &.swiper-slide-thumb-active {
            height: 100%;
            font-weight: var(--weight700);
        }
    }

    .swiper-slide02 {
        background-color: var(--yellow03);
    }

    .swiper-slide03 {
        background-color: var(--pink01);
    }

    .swiper-slide04 {
        background-color: var(--pink02);
    }

    @media screen and (max-width:768px) {
        height: auto;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 5px;

        .swiper-slide {
            width: calc((100% - 5px)/2);
            height: 60px;
            border-radius: var(--borderRadius10);


            &.swiper-slide-thumb-active {
                height: 60px;
            }
        }
    }

    @media screen and (max-width:480px) {
        width: min(100%, 250px);
        margin: 0 auto 5px;

        .swiper-slide {
            width: 100%;
        }
    }
}

.workSwiper-cont__list {
    .swiper-slide {
        background-color: var(--white);
        padding: 65px 60px 80px;
        border-radius: 0 0 var(--borderRadius25) var(--borderRadius25);
    }

    @media screen and (max-width:768px) {
        .swiper-slide {
            border-radius: var(--borderRadius10);
            padding: max(9.23%, 35px) max(8.5%, 15px) max(11.5%, 40px);
        }
    }


}

.workSwiper__ttl {
    position: relative;
    text-align: left;
    font-size: var(--font36);
    font-weight: var(--weight500);
    width: fit-content;
    margin: 0 auto max(7.65%, 30px);
    padding-left: 3.88em;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/work/a-icon.png);
        background-size: contain;
        background-repeat: no-repeat;
        top: 50%;
        left: 0;
        transform: translate(0%, -50%);
        width: 3.25em;
        aspect-ratio: 117/108;
    }

    .small {
        margin-left: -0.5em;
        font-size: var(--font28);
    }

    @media screen and (max-width:480px) {
        font-size: var(--font28);
        padding-left: 3em;

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

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

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

.workKinds {
    margin-bottom: max(5.61%, 30px);
}

.workKinds__item {
    display: flex;
    justify-content: flex-start;
    background-color: var(--beige01);
    margin-bottom: 40px;
    box-shadow: var(--shadowOrange);

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

    .img {
        width: 45.92%;

        img {
            object-fit: cover;
            height: 100%;
        }
    }

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

        .img {
            width: 100%;
            max-height: 200px;
            overflow: hidden;

            img {
                object-fit: initial;
                height: auto;
            }
        }
    }
}

.workSwiper__detail {
    flex: 1;
    font-size: var(--font28);
    padding: 1.42em 1.25em;

    dt {
        font-size: 1em;
        color: var(--orange01);
        margin-bottom: 0.89em;
    }

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

.workPoint {
    display: flex;
    justify-content: space-between;
    gap: max(4.08%, 20px);

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

.workPoint__item {
    flex: 1;
    background-color: var(--gray02);
    padding: 30px max(3%, 20px) 30px clamp(30px, 6.07vw, 85px);

    @media screen and (max-width:1024px) {
        padding-left: max(2.5vw, 20px);
    }

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

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

.workPoint__detail {
    font-size: var(--font28);

    dt {
        font-size: 1em;
        margin-bottom: 1em;
    }
}


.btn-outer-work {
    margin: max(8%, 40px) auto 0;
    width: min(100%, 470px);

    .btn {
        padding: 0 2em;
    }
}

.btn-outer-back {
    width: min(100%, 200px);
    margin-left: auto;
    margin-top: 5px;
    display: none;

    .btn {
        &::before {
            transform: rotate(-90deg) translateX(100%);
        }
    }

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


.workSwiper-slide02 {
    .workSwiper__ttl {
        &::before {
            background-image: url(../img/work/b-icon.png);
            aspect-ratio: 117/71;
        }
    }

    .workKinds__item {
        box-shadow: var(--shadowYellow);
    }

    /* ↓↓他の部分の色も変えるなら↓↓ */
    /* .workSwiper__detail {
        dt {
            color: var(--yellow01);
        }
    }

    .mark-circle {
        &::before {
            background-color: var(--yellow01);
        }
    }

    .check__list {
        li {
            &::before {
                background-image: url(../img/work/check-yellow.svg);
            }
        }
    }

    .btn-outer-work {
        .btn {
            background-color: var(--yellow03);
            color: var(--brown01);

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

.workSwiper-slide03 {
    .workSwiper__ttl {
        padding-left: 3em;

        &::before {
            background-image: url(../img/work/c-icon.png);
            aspect-ratio: 117/97;
        }
    }

    .workKinds__item {
        box-shadow: var(--shadowPink01);
    }

    @media screen and (max-width:480px) {
        .workSwiper__ttl {
            padding-left: 2.5em;
        }
    }


    /* ↓↓他の部分の色も変えるなら↓↓ */
    /* .workSwiper__detail {
        dt {
            color: var(--pink01);
        }
    }

    .mark-circle {
        &::before {
            background-color: var(--pink01);
        }
    }

    .check__list {
        li {
            &::before {
                background-image: url(../img/work/check-pink01.svg);
            }
        }
    }

    .btn-outer-work {
        .btn {
            background-color: var(--pink01);
        }
    } */
}

.workSwiper-slide04 {
    .workSwiper__ttl {
        &::before {
            background-image: url(../img/work/d-icon.png);
            aspect-ratio: 117/79;
        }
    }

    .workKinds__item {
        box-shadow: var(--shadowPink02);
    }

    /* ↓↓他の部分の色も変えるなら↓↓ */
    /* .workSwiper__detail {
        dt {
            color: var(--pink02);
        }
    }

    .mark-circle {
        &::before {
            background-color: var(--pink02);
        }
    }

    .check__list {
        li {
            &::before {
                background-image: url(../img/work/check-pink02.svg);
            }
        }
    }

    .btn-outer-work {
        .btn {
            background-color: var(--pink02);
            color: var(--brown01);

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




/*******************************************
staff
*******************************************/
.staff {
    background-color: var(--green02);

    .section__inner {
        width: min(100%, 980px);
    }
}

.staffBox {
    margin-bottom: max(8.2%, 40px);

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

.staffBox__ttl {
    margin: 0 auto max(6.1%, 25px);
    font-size: var(--font28);
    color: var(--white);
    background-color: var(--green01);
    text-align: center;
    width: 10.7em;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: var(--fontSpace050);

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

.staffBox__list {
    display: flex;
    justify-content: center;
    gap: 20px;

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

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

.staffBox__item {
    width: calc((100% - 40px)/3);
    background-color: var(--white);
    border: 2px solid var(--gray01);
    border-radius: var(--borderRadius20);
    padding: 20px 20px 30px;

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

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

.staffBox__detail {
    font-size: var(--font24);

    dt {
        text-align: center;
        letter-spacing: var(--fontSpace050);
        margin-bottom: 1em;

        .ttl {
            display: block;
            margin-bottom: 1em;
        }

        .img {
            display: block;
            width: clamp(70px, 52%, 200px);
            margin: 0 auto;
        }
    }

    dd {
        p {
            font-size: var(--font17);
        }
    }

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

            .ttl {
                display: block;
                margin-bottom: 10px;
            }

            .img {
                width: 90px;
            }
        }
    }
}

.dataSwiper {
    @media screen and (max-width:768px) {
        width: min(100%, 400px);
        overflow: visible;
    }

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


.dataSwiper__list {
    flex-wrap: wrap;
    gap: 40px;

    .swiper-slide {
        width: calc((100% - 40px)/2);
        height: auto;
        padding-left: 25px;
        padding-right: 25px;
    }

    .staffBox__detail {

        dt {
            margin-bottom: 0.83em;

            .ttl {
                margin-bottom: 0.83em;
            }

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

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

        .swiper-slide {
            width: auto;
        }

        .staffBox__detail {

            dt {
                margin-bottom: 10px;
            }
        }
    }

    @media screen and (max-width:480px) {
        .swiper-slide {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
}







/*******************************************
pagination
*******************************************/
.paginationFlex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: max(5%, 20px);
    gap: 5px;
}

.paginationFlex-data {
    display: none;

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

.pagiDot {
    width: fit-content !important;
    opacity: 1;

    .swiper-pagination-bullet {
        transition: var(--transition01);
        background-color: var(--white);
        opacity: 1;
        border: 1px solid var(--green01);
    }


    .swiper-pagination-bullet-active {
        background-color: var(--green01);
        opacity: 1;
    }
}

.pagiBtn {
    width: 40px;
}

.prevBtn {
    transform: rotate(180deg);
}



/*******************************************
interview
*******************************************/
.interview {
    background-color: var(--beige02);

    .section__inner {

        &::before,
        &::after {
            position: absolute;
            content: "";
            background-image: url(../img/interview/parts01.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: clamp(300px, 27.14vw, 380px);
            aspect-ratio: 380/352;
            top: 0;
            left: 0;
            transform: translate(-66%, 26%);
        }

        &::after {
            background-image: url(../img/interview/parts02.png);
            top: auto;
            left: auto;
            bottom: 0;
            right: 0;
            transform: translate(56%, -13%);
        }
    }

    @media screen and (max-width:768px) {
        .section__inner {
            &::before {
                transform: translate(-12%, 36%);
            }

            &::after {
                transform: translate(7%, 0%);
            }
        }
    }

    @media screen and (max-width:480px) {
        .section__inner {
            &::before {
                transform: translate(-12%, 49%);
            }

            &::after {
                transform: translate(10%, -4%);
            }

        }
    }
}


.interview__list {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    z-index: 1;

    @media screen and (max-width:1100px) {
        flex-wrap: wrap;
        width: min(100%, 800px);
        margin: 0 auto;
        align-items: center;
    }

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

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

.interview__item {
    flex: 1;
    background-color: var(--white);
    box-shadow: var(--shadowbrown);

    &:nth-child(2) {
        margin-top: 40px;
    }

    &:nth-child(3) {
        margin-top: 80px;
    }

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

        &:nth-child(2),
        &:nth-child(3) {
            margin-top: 0;
        }
    }

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

.interview__main {
    position: relative;
    padding: 45px 25px 25px;

    .type {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(-50%);
        line-height: 1;
        font-size: var(--font18);
        padding: 10px 1.33em;
        background-color: var(--yellow01);
    }

    .ttl {
        text-align: left;
        font-size: var(--font23);
        line-height: var(--lineHight150);
        font-weight: var(--weight700);
        margin-bottom: 0.6em;
        white-space: nowrap;
    }

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

        .ttl {
            white-space: initial;
        }
    }

    @media screen and (max-width:480px) {
        .type {
            padding: 5px 1em;
        }
    }
}

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

    .txt {
        display: block;
        font-size: var(--font18);
        color: var(--green03);
        font-weight: var(--weight700);
        flex: 1;
    }

    @media screen and (max-width:768px) {
        .ttl {
            white-space: initial;
        }
    }

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

        .txt {
            font-size: 14px;
        }

        .btn-outer-circle {
            width: 35px;
        }
    }


}


/*******************************************
search
*******************************************/
.search {
    background-color: var(--gray02);
    padding-bottom: clamp(50px, 5%, 75px);

    .section__inner {
        padding-bottom: clamp(50px, 6.79%, 95px);
    }
}

.searchBox {
    position: relative;
    background-color: var(--white);
    border: 2px solid var(--brown02);
    border-radius: var(--borderRadius25);
    padding: 50px 20px 55px;
    margin-bottom: 40px;

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

    @media screen and (max-width:1190px) {
        width: min(100%, 700px);
        margin-left: auto;
        margin-right: auto;
    }


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

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

.searchBox__ttl {
    font-size: var(--font30);
    text-align: center;
    font-weight: var(--weight500);
    margin-bottom: 1em;
}

.searchBtn__list {

    width: min(100%, 980px);
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px 40px;

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

        .btn {
            font-size: var(--font19);
            padding: 0 1.5em;
        }
    }

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

        .btn-outer {
            width: calc((100% - 20px)/2);
        }
    }

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

        .btn-outer {
            width: calc((100% - 10px)/2);
        }
    }

    @media screen and (max-width:430px) {
        width: min(100%, 250px);

        .btn-outer {
            width: 100%;
        }
    }


}


.search-parts {
    position: absolute;
    width: clamp(100px, 18.21vw, 255px);
}

.search-parts01 {
    top: 0;
    right: 0;
    transform: translate(36%, 75%);

    @media screen and (max-width:1190px) {
        transform: translate(0%, 75%);
    }

    @media screen and (max-width:480px) {
        transform: translateY(150%);
    }
}

.search-parts02 {
    top: 50%;
    left: 0;
    transform: translate(-74%, -50%);

    @media screen and (max-width:1190px) {
        transform: translate(0, -50%);
    }

    @media screen and (max-width:480px) {
        transform: translate(-25%, -57%);
    }
}

.search-parts03 {
    bottom: 0;
    right: 0;
    transform: translate(54%, 1%);

    @media screen and (max-width:1190px) {
        transform: translate(0, 1%);
    }
}



/******************************************
流れる続けるスライダー
*******************************************/
/*スライドの動き等速 */
.loopSwiper__list {
    transition-timing-function: linear;
}







/*******************************************
modal
*******************************************/

/* 共通
ーーーーーーーーーーーーーーーーーーー */
.no-scroll {
    overflow: hidden;
}

.modalOpen,
.modalClose {
    transition: var(--transition01);
    cursor: pointer;

    &:hover {
        opacity: var(--opacity07);
    }
}

/* 背景 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 1000;
    transition: var(--transition01);
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    &::before {
        position: fixed;
        content: "";
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        opacity: .5;
        background-color: var(--black);
        z-index: 0;
    }
}

/* 開く時 */
.modal.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;

    .modal__inner,
    .modalItem-outer {
        opacity: 1;
        pointer-events: all;
        visibility: visible;
    }
}

/* モーダル箱の最大幅 */
.modal__inner {
    position: relative;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: clamp(50px, 8.92vw, 125px) 0;
}


/* 非表示の時触れないように */
.modal__inner,
.modalItem-outer {
    position: relative;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: var(--transition01);
}

.modalItem-outer {
    background-color: var(--white);
    padding: clamp(50px, 6.071vw, 85px) 0;
    border-radius: var(--borderRadius30);
}

.modalItem {
    width: 100%;
}

/* モーダルのコンテンツの最大幅 */
.modalItem__inner {
    width: min(100%, 980px);
    margin: 0 auto;

    @media screen and (max-width:1140px) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


.modalClose-top {
    position: absolute;
    width: 60px;
    aspect-ratio: 1;
    top: 0;
    right: 0;
    border-radius: var(--borderRadiusCircle);
    background-color: var(--black);
    z-index: 1;

    display: none;

    &::before,
    &::after {
        position: absolute;
        content: "";
        top: 50%;
        left: 50%;
        width: 50%;
        height: 2px;
        transform: translate(-50%, -50%) rotate(45deg);
        background-color: var(--white);
    }

    &::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}

.btn-outer-modalInterview {
    margin: max(7.3%, 40px) auto 25px;

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

.modalClose-bottom {
    margin: 0 auto;
}


/*******************************************
modal(interview)
*******************************************/
.modalMv {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 auto max(8.2%, 40px);

    .img {
        width: clamp(250px, 32vw, 448px);
    }

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


        .img {
            width: max(50vw, 230px);
            margin: 0 auto 15px;
        }
    }
}

.modalMv__txtBox {
    flex: 1;
    padding: clamp(15px, 1.42vw, 20px) 0 0 clamp(10px, 2.85vw, 40px);

    .ttl {
        font-size: var(--font40);
        background-color: var(--orange01);
        color: var(--white);
        padding: 10px 15px;
        margin-bottom: 5px;
        width: fit-content;

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

    .txt {
        font-size: var(--font22);
        color: var(--green01);
        font-weight: var(--weight700);
        line-height: 2;
        margin-top: clamp(15px, 3.21vw, 45px);
    }

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

        .txt {
            margin-top: 10px;
        }
    }

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

        .txt {
            line-height: var(--lineHight150);
        }
    }

    @media screen and (max-width:500px) {
        .ttl {
            font-size: min(8vw, 25px);
        }

        .txt {
            font-size: 14px;
        }
    }

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

.modal__question {
    dt {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: var(--font24);

        p {
            flex: 1;
            text-align: left;
            line-height: var(--lineHight120);
            font-size: 1em;
            padding: 0.55em 0 0 0.625em;
        }
    }

    dd {
        background-color: var(--yellow04);
        font-size: var(--font19);
        padding: 1.315em 3.94em;
        margin: 10px 0 40px;

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

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

        dd {
            padding: 1em;
        }
    }

    @media screen and (max-width:480px) {
        dt {
            p {
                padding: 0.3em 0 0 0.3em;
            }
        }
    }
}

.icon-q {
    position: relative;
    display: block;
    width: 2.5em;
    aspect-ratio: 1;
    background-color: var(--orange03);
    border-radius: var(--borderRadiusCircle);

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/modal/icon-q.svg);
        background-repeat: no-repeat;
        background-size: contain;
        aspect-ratio: 19/18.5;
        width: max(31.67%, 11px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

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

}








/*******************************************
footer
*******************************************/

.footer {
    background-color: var(--green01);
    padding: 30px 0 20px;
    position: relative;
    font-size: min(var(--font17), 16px);
    color: var(--white);
    font-weight: var(--weight500);

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

}

.footer-nav {
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    gap: 30px;

    a {
        position: relative;

        &:hover {
            opacity: var(--opacity07);
        }
    }

    a:not(:first-child):before {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        background-color: var(--white);
        top: 50%;
        left: -14px;
        transform: translate(50%, -50%);
    }
}


.copyright {
    text-align: center;
    font-size: 1em;
}




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

    .footer {
        .inner {
            padding: 0 15px;
        }
    }

    .footer-nav {
        flex-wrap: wrap;
        column-gap: 30px;
        row-gap: 10px;


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

        & a:not(:first-child):before {
            left: -14px;
        }
    }
}



/*******************************************
footer
*******************************************/
.fadeItem-mv {
    display: block;
    visibility: hidden;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: fadeInDown;

    &:nth-child(1) {
        animation-delay: 0s;
    }

    &:nth-child(2) {
        animation-delay: 0.1s;
    }

    &:nth-child(3) {
        animation-delay: 0.2s;
    }

    &:nth-child(4) {
        animation-delay: 0.3s;
    }

    &:nth-child(5) {
        animation-delay: 0.4s;
    }

}

.fadeItem {
    visibility: hidden;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInLeft;

    &:nth-child(1) {
        animation-delay: 0.1s;
    }

    &:nth-child(2) {
        animation-delay: 0.2s;
    }

    &:nth-child(3) {
        animation-delay: 0.3s;
    }

    &:nth-child(4) {
        animation-delay: 0.4s;
    }

    &:nth-child(5) {
        animation-delay: 0.5s;
    }

    &:nth-child(6) {
        animation-delay: 0.6s;
    }

    &:nth-child(7) {
        animation-delay: 0.7s;
    }
    &:nth-child(8) {
        animation-delay: 0.8s;
    }
    &:nth-child(9) {
        animation-delay: 0.9s;
    }

    @media screen and (max-width:480px) {
        .fadeItem {
            animation-delay: 0 !important;
        }
    }
}