@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.7);
    --black: #3e3e3e;
    --blue: #125fea;
    --blue02: #c2e6ff;
    --blue03: #1387eb;
    --blue04: #1286ea;
    --blue05: #42baee;
    --lightblue: #dffcfe;
    --gray: #a2a1a1;
    --orange: #ff931e;
    --beige: #f2ebd8;
    --btnColor: linear-gradient(90deg, rgba(67, 187, 255, 1) 0%, rgba(19, 96, 235, 1) 100%);

    /* 透明度 */
    --blur: blur(10px);

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


    /* 文字サイズ */
    --size14: 1.4rem;
    --size15: 1.5rem;
    --size16: 1.6rem;
    --size17: 1.7rem;
    --size18: 1.8rem;
    --size19: 1.9rem;
    --size22: 2.2rem;
    --size23: 2.3rem;
    --size26: 2.6rem;
    --size28: 2.8rem;
    --size32: 3.2rem;
    --size33: 3.3rem;
    --size40: 4rem;
    --size80: 8rem;

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

    /* 行間 */
    --lineHight133: 1.333333;
    --lineHight15: 1.5;
    --lineHight175: 1.75;

    /* 文字間 */
    --fontSpace004: 0.04em;
    --fontSpace005: 0.05em;

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

    /* 角丸の変数　 */
    --borderRadius50: 50px;
    --borderRadius20: 20px;
    --borderRadius10: 10px;
    --borderRadius15: 15vw 15vw 0 0;
    --borderRadiusCircle: 50%;


}



@media screen and (max-width: 1200px) {
    :root {
        --size18: 1.7rem;
    }
}



@media screen and (max-width: 768px) {
    :root {
        --size18: 1.6rem;
        --size22: 1.7rem;
        --size23: 2rem;
        --size28: 2.2rem;
        --size32: 2.3rem;
        --size80: 4.8rem;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --size15: 1.2rem;
        --size17: 1.5rem;
        --size23: 1.7rem;
        --size32: 1.7rem;
    }
}





/*******************************************
common
*******************************************/
body {
    color: var(--black);
    font-family: var(--zenKaku);
    font-weight: var(--weight500);
    font-size: var(--size17);
    background-color: var(--lightblue);
}

p {
    text-align: justify;
}


.section {
    padding: clamp(80px, 10.715%, 150px) 0 clamp(60px, 12%, 160px);
}

.section__inner {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.section__ttl,
.section__subTtl {
    width: fit-content;
    margin: 0 auto;
}


.section__ttl {
    background: var(--btnColor);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: var(--fontSpace004);
    font-size: var(--size80);
    font-family: var(--montserrat);
}


.section__subTtl {
    position: relative;
    font-size: var(--size22);
    padding-left: 0.7em;


    &::before {
        position: absolute;
        content: "";
        width: 0.5em;
        height: 0.5em;
        top: 50%;
        left: 0;
        transform: translateY(-35%);
        border-radius: var(--borderRadiusCircle);
        background-color: var(--orange);
    }
}

#points,
#voice {

    & .section__ttl {
        background: none;
        color: var(--white);
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
    }

    & .section__subTtl {
        color: var(--white);
    }
}

#message,
#company {

    & .section__ttl,
    & .section__subTtl {
        margin: 0;
    }
}





@media screen and (max-width:1024px) {
    .push01 {
        display: inline-block;
    }

    .none01 {
        display: none;
    }

    .section__inner {
        padding: 0 20px;
    }
}

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

    .none02 {
        display: none;
    }
}

@media screen and (max-width:520px) {
    .none520 {
        display: none;
    }
}

@media screen and (max-width:480px) {
    .push03 {
        display: inline-block;
    }

    .none03 {
        display: none;
    }
}

/*******************************************
pagination
*******************************************/
.paginationFlex {
    display: none;
}

@media screen and (max-width:480px) {
    .paginationFlex {
        display: block;
        text-align: center;
        margin: max(8%, 20px) 0 0;
    }

    .pageDot {
        width: 100%;

        & .swiper-pagination-bullet {
            width: 0.7em;
            height: 0.7em;
            background-color: transparent;
            border: 2px solid var(--white);
            opacity: 1;
            margin: 0 0.4em !important;
        }

        & .swiper-pagination-bullet-active {
            background: var(--white);
        }
    }
}



/*******************************************
btn
*******************************************/
.btn {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 14px 0;
    text-align: center;
    border-radius: var(--borderRadius50);
    color: var(--white);
    background: var(--btnColor);

    transition: var(--transitionBase);
    overflow: hidden;
    z-index: 0;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--orange);
        opacity: 0;
        transition: var(--transitionBase);
        z-index: -1;
    }

    &:hover::before {
        opacity: 1;
    }
}


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

.topReturn {
    position: fixed;
    bottom: 2%;
    right: 20px;
    width: 60px;
    height: 60px;
    opacity: 0;
    visibility: hidden;
    border-radius: var(--borderRadiusCircle);
    background: linear-gradient(0deg, rgba(67, 187, 255, 1) 0%, rgba(19, 96, 235, 1) 100%);
    ;
    transition: var(--transitionBase);
    z-index: 50;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 101%;
        height: 101%;
        transform: translate(-50%, -50%);
        background-color: var(--orange);
        opacity: 0;
        transition: var(--transitionBase);
        border-radius: var(--borderRadiusCircle);
    }

    &:hover::before {
        opacity: 1;
    }

    &.show {
        opacity: 1;
        visibility: visible;
    }
}

.topReturn__link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    &::before,
    &:after {
        position: absolute;
        content: "";
        top: 50%;
        left: 50%;
        width: 20%;
        height: 2px;
        background-color: var(--white);
        transition: var(--transitionBase);
    }

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

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

@media screen and (max-width:480px) {
    .topReturn {
        width: 44px;
        height: 44px;
    }
}



/*******************************************
header
*******************************************/
.hamburger {
    display: none;
}


.header {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    padding: max(1.43%, 10px) max(1.1%, 5px) max(1.43%, 10px) max(3%, 10px);
    z-index: 90;
    transition: var(--transitionBase);
}

.bg-white {
    background-color: var(--white02);
    backdrop-filter: var(--blur);
}

.header__logo {
    width: clamp(250px, 24.2%, 400px);
    margin-right: 10px;
}

.headerNav {
    flex: 1;
}

.headerNav__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.headerNav__item {
    font-size: clamp(13px, 1.15vw, 18px);
    margin-left: clamp(15px, 1.79vw, 30px);
    position: relative;

    &:last-child {
        width: min(100%, 170px);
    }

    &:first-child {
        margin-left: 0;
    }

    & a {
        transition: var(--transitionBase);
    }

    &:not(:last-child) a:hover {
        color: var(--blue);
    }


    & .btn {
        font-size: clamp(15px, 1.22vw, 20px);
    }
}


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

    .header {
        position: initial;
    }

    .hamburger {
        display: block;
        position: fixed;
        right: 0;
        top: 0;
        width: 64px;
        height: 64px;
        cursor: pointer;
        z-index: 100;
        transition: var(--transitionBase);
        background-color: var(--blue);

        & .line {
            position: absolute;
            width: 40%;
            height: 3px;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: .4s;
            background-color: var(--white);

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

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

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


    .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 {
        position: fixed;
        width: 100%;
        height: 100svh;
        top: 0;
        left: 0;
        z-index: 95;
        transform: translateX(100%);
        background-color: var(--white02);
        backdrop-filter: var(--blur);
        transition: var(--transitionBase);
    }

    .active .headerNav {
        transform: translateX(0);
    }

    .headerNav__list {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 50%;
        height: 100%;
        padding: clamp(80px, 16svh, 125px) 5% 2vh;
        margin-left: auto;
        background-color: var(--white);
    }

    .headerNav__item {
        font-size: max(2vw, 15px);
        margin: 0 0 max(4.5svh, 10px);

        &:nth-child(6) {
            margin-bottom: 0;
        }

        &:last-child {
            width: min(100%, 180px);
            margin: max(6.13svh, 30px) 0 0;
        }
    }


    /* フェードイン
------------------------------------ */
    .headerNav {
        opacity: 0;
        visibility: hidden;
        transform: none;
    }

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


}

@media screen and (max-width:768px) {
    .header {
        padding: 19px 0 19px 20px;
    }

    .header__logo {
        width: max(50%, 175px);
        margin-right: 0;
    }
}

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


    .headerNav__list {
        width: 100%;
        align-items: center;
    }
}

@media screen and (max-width:374px) {
    .header {
        padding: 5.0667vw 0 5.0667vw 5.34%;
    }

    .hamburger {
        width: 17.067vw;
        height: 17.067vw;
    }
}


/*******************************************
mv
*******************************************/
.mv {
    position: relative;
    padding-top: clamp(100px, 9%, 150px);
}

.mv__img {
    width: 81.15%;
    margin-left: auto;
}

.mv__ttlBox {
    position: absolute;
    top: 48%;
    left: 6%;

    & h2 {
        width: 50%;
    }

    & h3 {
        font-size: 1.72vw;
        margin-top: max(2vw, 5px);


        & span {
            line-height: 1;
            padding: 0.3vw 1.08vw 0.7vw;
            color: var(--white);
            background-color: var(--orange);
        }
    }
}

.mv__bgParts01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 43%;
}

.mv__bgParts02 {
    position: absolute;
    top: 55%;
    left: 0;
    width: 35.72%;
    z-index: -1;
}

.mv__bgParts01--sp {
    display: none;
}

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

    .mv__bgParts01--pc {
        display: none;
    }

    .mv__bgParts01--sp {
        display: block;
        z-index: -1;
    }
}

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

    .mv__img {
        width: 100%;
    }

    .mv__ttlBox {
        width: 100%;
        top: 70%;
        left: 0;
        padding-left: 5.333vw;

        & h2 {
            width: 94%;
        }

        & h3 {
            font-size: 3.2vw;
            margin-top: max(3vw, 10px);
        }
    }
}


/*******************************************
message
*******************************************/


#message {
    position: relative;
    padding-top: clamp(100px, 8.5%, 120px);

    & .section__parts {
        position: absolute;
        width: min(100%, 258px);
        top: -12%;
        left: 81%;
        z-index: -1;
    }
}

.messageFlex {
    margin: 25px auto 0;
    display: flex;
    align-items: flex-end;
}

.messageFlex__img {
    width: min(100%, 535px);
    transform: translateX(-15%);

    & img {
        border-radius: var(--borderRadiusCircle);
    }
}

.messageFlex__txt {
    flex: 1;
    line-height: 2.2;
    font-size: var(--size18);

    & p:last-child {
        margin-top: 25px;
        text-align: right;
    }
}

.txt22 {
    display: inline-block;
    width: 1em;
    transform: translateY(-1px);

    & img {
        vertical-align: baseline;
    }
}

.messe__bgParts01 {
    position: absolute;
    width: max(100%, 1400px);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -2;

}

.messe__bgParts02 {
    position: absolute;
    width: max(100%, 2034px);
    top: 0;
    left: 50%;
    transform: translate(-50%, -25%);
    z-index: -1;
}

.messe__bgParts03 {
    position: absolute;
    width: 94%;
    top: 35%;
    left: 30%;
    z-index: -1;
}

@media screen and (max-width:1400px) {
    .messe__bgParts02 {
        width: 150%;
    }
}

@media screen and (max-width:1150px) {
    .messageFlex__img {
        width: min(100%, 450px);
        transform: translateX(0);
        margin-right: 15px;
    }

    #message .section__parts {
        width: max(23vw, 100px);
        left: 70%;
    }
}

@media screen and (max-width:913px) {
    #message .section__parts {
        top: -2%;
    }

    .messageFlex {
        align-items: flex-start;
    }

    .messageFlex__img {
        width: min(100%, 350px);
    }
}

@media screen and (max-width:768px) {
    #message {

        & .section__ttl,
        & .section__subTtl {
            margin: 0 auto;
        }
    }

    #message .section__parts {
        width: 18.67vw;
        top: -8%;
        left: 72%;
    }

    .messageFlex {
        margin-top: 50px;
        flex-direction: column;
        align-items: center;
    }

    .messageFlex__img {
        margin-right: 0;
        margin-bottom: 20px;
        width: min(56.74%, 300px);
    }


    .messageFlex__txt p {
        text-align: center;

        &:last-child {
            text-align: center;
            margin-top: 15px;
        }
    }

    .messe__bgParts01 {
        width: max(100%, 450px);
        top: 70%;
    }


}

@media screen and (max-width:374px) {
    #message {
        padding-top: max(20%, 50px);
    }

    #message .section__parts {
        top: -5%;
    }
}



/*******************************************
points (sp時はスライダー)
*******************************************/


#points {
    position: relative;
    border-radius: var(--borderRadius15);

    & .section__parts {
        position: absolute;
        width: min(100%, 240px);
        top: -22%;
        left: 0%;

    }
}

.points__bgBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--borderRadius15);
    overflow: hidden;
    z-index: -1;
}

.points__bg {
    position: relative;
    height: 100%;

    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(66, 186, 238, 0.7);
    }

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


.pointsSwiper {
    margin-top: 60px;
}

.pointsSwiper__list {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;

    & .swiper-slide {
        width: calc((100% - 70px)/3);
        height: auto;
    }
}

.pointsSwiper__item {
    height: 100%;
    padding: max(10%, 20px) max(6.46%, 5px) max(8%, 20px);
    border-radius: var(--borderRadius10);
    background-color: var(--white);
}

.pointsSwiper__img {
    position: relative;
    width: min(100%, 163px);
    aspect-ratio: 1/1;
    margin: 0 auto;
    background-color: var(--beige);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--borderRadiusCircle);

    & img {
        width: min(100%, 116px);
    }

    &::before {
        position: absolute;
        content: "01";
        font-family: var(--montserrat);
        letter-spacing: var(--fontSpace004);
        font-size: 4rem;
        top: 0;
        left: 0;
        background: var(--btnColor);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.p-s__img02::before {
    content: "02";
}

.p-s__img03::before {
    content: "03";
}

.p-s__img04::before {
    content: "04";
}

.p-s__img05::before {
    content: "05";
}

.p-s__img06::before {
    content: "06";
}


.pointsSwiper__detail {
    margin-top: 25px;
    display: flex;
    flex-direction: column;

    & dt {
        text-align: center;
        margin-bottom: 15px;
        font-size: var(--size22);
        color: var(--blue03);
        font-weight: var(--weight500);

    }

    & dd {
        line-height: var(--lineHight175);
    }
}


@media screen and (max-width:768px) {
    #points {
        padding: clamp(55px, 10.715%, 150px) 0 clamp(60px, 12%, 160px);
    }

    #points .section__parts {
        width: 21.4vw;
        top: -14%;
        left: 14%;
    }

    .pointsSwiper {
        margin-top: clamp(30px, 8%, 60px);
    }

    .pointsSwiper__list .swiper-slide {
        width: calc((100% - 35px)/2);
    }

    .pointsSwiper__detail {
        margin-top: 20px;

        & dt {
            font-size: 2rem;

        }

        & dd {
            font-size: 1.5rem;
        }
    }

    .pointsSwiper__img {
        width: 100px;

        &::before {
            font-size: 2.4rem;
        }

        & img {
            width: 75px;
        }
    }


}

@media screen and (max-width:480px) {
    #points .section__inner {
        padding: 0;
    }

    .pointsSwiper__list {
        flex-wrap: nowrap;
        gap: 0;
    }

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


}

/*******************************************
about
*******************************************/
#about {
    position: relative;
    background-color: var(--white);

    & .section__parts {
        position: absolute;
        left: 80%;
        top: -5vw;
        width: min(23vw, 252px);
    }
}

.about__bgParts01,
.about__bgParts02 {
    position: absolute;
    width: 46.5%;
}

.about__bgParts01 {
    top: 0;
    left: 0;
}

.about__bgParts02 {
    top: 70%;
    right: 0;
    z-index: 1;
}

.aboutSwiper {
    position: relative;
    margin-top: 140px;
}

/* タブ
ーーーーーーーーーーーーーーーーーーーーー */
.aboutSwiper-tab {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 875px);
    margin: 0 auto;
}

.aboutSwiper-tab__list {
    align-items: flex-end;

    & .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        color: var(--blue);
        background-color: var(--blue02);
        cursor: pointer;
        border-radius: 20px 20px 0 0;
        transition: var(--transitionBase);

        &:hover {
            color: var(--white);
            background-color: var(--blue);
            height: 100px;
        }
    }

    & .swiper-slide-thumb-active {
        height: 100px;
        font-size: 20px;
        color: var(--white);
        background-color: var(--blue);
    }
}

/* コンテンツ
ーーーーーーーーーーーーーーーーーーーーー */
.aboutSwiper-cont__list .swiper-slide {
    padding: max(6%, 20px) max(6%, 15px);
    border-radius: var(--borderRadius20);
    background-color: var(--beige);
}

.aboutTop {
    display: flex;

}

.aboutTop__img {
    flex: 1;
}

.aboutTop__txt {
    width: min(100%, 470px);
    margin-left: 6.82%;
}

.aboutTop__detail {

    & dt {
        font-size: 30px;
        color: var(--blue);
    }

    & dd {
        margin: 20px 0 35px;
        line-height: var(--lineHight175);
    }
}

.carModel {
    display: flex;
    align-items: center;
    color: var(--blue);

    & dt {
        background-color: var(--white);
        border: 1px solid var(--blue);
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 10px;
    }
}

.flow {
    margin-top: max(5.7%, 30px);
    padding: max(6.82%, 20px) max(6.82%, 10px);
    border-radius: var(--borderRadius20);
    background-color: var(--white);
}

.flow__ttl {
    position: relative;
    font-size: 25px;
    padding: 0 0 20px 45px;
    margin-bottom: max(4.61%, 20px);
    border-bottom: 1px solid var(--orange);

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/about/icon.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 38px;
        height: 26px;
        top: 2px;
        left: 0;
    }
}

.flowFlex {
    display: flex;
}

.flow__schedule {
    position: relative;
    width: min(100%, 410px);

    & div {
        display: flex;
        margin-bottom: 45px;


        &:last-child dt::after {
            display: none;
        }
    }

    & dt {
        width: min(100%, 65px);
        text-align: end;
        position: relative;
        margin-right: 50px;
    }

    & dt::before {
        position: absolute;
        content: "";
        width: 0.7em;
        height: 0.7em;
        top: 0;
        left: calc(100% + 25px);
        background-color: var(--gray);
        border-radius: var(--borderRadiusCircle);
        transform: translate(-50%, 50%);
        z-index: 1;
    }


    & dt::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 320%;
        background: linear-gradient(to bottom, var(--gray) 50%, transparent 50%);
        background-size: 1px 2px;
        top: 50%;
        left: calc(100% + 24.5px);
        z-index: 0;
    }

    & dd {
        flex: 1;
    }

}

.flow__day {
    display: inline-block;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
    background-color: var(--lightblue);
}

.flow__img {
    flex: 1;
    margin-left: 5px;

    & img:nth-of-type(2) {
        margin-top: 20px;
    }
}

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

@media screen and (max-width:950px) {
    .aboutSwiper-tab {
        width: 100%;
    }

    .aboutSwiper-cont__list .swiper-slide {
        border-radius: 0 0 20px 20px;
    }

    .flowFlex {
        flex-direction: column;
    }

    .flowBox {
        margin-bottom: 30px;

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

    .flow__schedule {
        width: 100%;
    }
}

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

    .aboutTop__img {
        margin-bottom: 20px;
    }

    .aboutTop__txt {
        margin-left: 0;
    }

    .aboutTop__detail dd {
        margin: 15px 0 15px;
    }

    .flow {
        margin-top: max(10%, 30px);
    }
}

@media screen and (max-width:768px) {
    .aboutSwiper-tab__list {

        & .swiper-slide {
            height: 50px;


            &:hover {
                height: 70px;
            }
        }

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

    .aboutSwiper-cont__list .swiper-slide {
        padding: clamp(10px, 3%, 20px);
    }
}

@media screen and (max-width:480px) {
    #about {
        & .section__parts {
            position: absolute;
            left: 75%;
            top: 2%;
            width: 21.34vw;
        }

        & .section__inner {
            padding: 0 10px;
        }
    }


    .aboutSwiper-tab__list .swiper-slide-thumb-active {
        font-size: 1.5rem;
    }

    .aboutTop__detail dt {
        font-size: 2rem;
    }

    .aboutTop__detail dt {
        margin: 10px 0;
    }

    .flow__ttl {
        font-size: 1.8rem;

        &::before {
            top: 0;
        }
    }


    .flow {
        padding:25px 20px 30px;
    }

    .flow__schedule {



        & dt {
            width: min(100%, 45px);
        }

        & dt::after {
            height: 200%;
        }

        & div {
            margin-bottom: 20px;
        }
    }
}

@media screen and (max-width:410px) {
    #about .section__parts {
        top: 50px;
    }
}

@media screen and (max-width:340px) {
    .flow__schedule .line340::after {
        height: 130%;
    }
}

/*******************************************
voice
*******************************************/
#voice {
    position: relative;
    background-color: var(--white);
    padding: clamp(80px, 10.715%, 150px) 0 clamp(75px, 12%, 160px);

    & .section__inner {
        z-index: 2;
    }

    & .section__parts {
        position: absolute;
        width: min(100%, 215px);
        left: -2%;
        top: -22%;
    }
}

.voice__bgParts01 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1;
}

.voiceSwiper {
    margin-top: max(6%, 20px);
    overflow: initial;
}

.voice__list {
    display: flex;
    justify-content: center;
    gap: 30px;

    & .swiper-slide {
        max-width: 400px;
        width: calc((100% - 30px) / 2);
        filter: drop-shadow(0px 20px 40px var(--lightblue));
        border-radius: var(--borderRadius10);
        overflow: hidden;
    }
}

.voice__item {
    display: block;
    width: 100%;
    height: 100%;

    &:hover .voiceBox__btn {
        background-color: var(--blue);
    }
}

.voice__img {
    position: relative;
}

.voice__txt {
    position: absolute;

    left: 0;
    bottom: 20px;

    & span {
        display: block;
        padding: 10px;
        background-color: var(--blue);
        color: var(--white);
        font-size: var(--size22);
        margin-bottom: 5px;
        width: fit-content;
    }

    & .p-r0 {
        padding-right: 0;
    }
}

.voiceBox {
    padding: 15px;
    background-color: var(--white);
}

.voiceBox__age {
    margin: 10px 0;
    font-size: var(--size15);
}

.voiceBox__name {
    font-size: var(--size28)
}

.voiceBox__detail {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    & span {
        font-size: 1.4rem;

    }

    & .voiceBox__btn {
        position: relative;
        width: 37px;
        height: 37px;
        margin-left: 10px;
        background-color: var(--orange);
        border-radius: var(--borderRadiusCircle);
        transition: var(--transitionBase);

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/voice/arrow.svg);
            background-repeat: no-repeat;
            background-size: contain;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -65%);
            width: 64%;
            height: 7px;
        }
    }


}

.slide-sp {
    display: none;
}

.voice__ttl--sp {
    display: none;
}

@media screen and (max-width:1030px) {
    #voice .section__parts {
        position: absolute;
        width: min(21.3vw, 130px);
        left: 9%;
        top: -20%;
    }
}

@media screen and (max-width:995px) {
    #voice .section__parts {
        top: -15%;
    }
}

@media screen and (max-width:768px) {
    #voice .section__parts {
        top: -20%;
    }
}

@media screen and (max-width:566px) {
    .slide-sp {
        display: block;
    }

        .voice__list {
        justify-content: normal;
        gap: 0;

        & .swiper-slide {
            width: auto;
        }

        & .swiper-slide02 {
            margin-top: 0;
        }
    }

    .paginationFlex-voice {
        display: block;
        text-align: center;
        margin: max(8%, 20px) 0 0;

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

        & .swiper-pagination-bullet-active {
            background-color: var(--blue);
        }

        & .swiper-pagination-bullet:nth-child(3),
        & .swiper-pagination-bullet:nth-child(4),
        & .swiper-pagination-bullet:nth-child(5),
        & .swiper-pagination-bullet:nth-child(6) {
            display: none;
        }
    }
}

@media screen and (max-width:480px) {
    #voice .section__parts {
        top: -13%;
    }

    .voice__ttl--pc {
        display: none;
    }

    .voice__ttl--sp {
        display: block;
    }

    .voice__bgParts01 {
        top: 3%;
    }

    .voice__lis .swiper-slide {
        filter: drop-shadow(0px 10px 22px var(--lightblue));
    }
}


/* モーダル
ーーーーーーーーーーーーーーーーーーーーー */
.modal {
    display: none;
    padding-bottom: 75px;
}

.featherlight {
    background-color: rgba(0, 0, 0, 0.5) !important;
    overflow: auto;
    padding: max(10svh, 40px) 0;

    & .featherlight-content {
        width: min(100%, 1320px);
        margin: 0 auto;
        padding: 0;
        border: none;
        background-color: var(--beige);
        overflow: visible;
        max-height: none;
        border-radius: var(--borderRadius20);
    }
}

.modalMv {
    position: relative;
    padding: 75px 0;

}

.modalMv__img {
    position: relative;
    width: min(100%, 720px);
    margin-left: auto;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    z-index: 1;
}

.modalMv__ttlBox {
    position: absolute;
    width: min(100%, 1160px);
    right: 0;
    top: 24%;
    z-index: 2;
}

.modalMv__number {
    position: relative;
    padding-left: 1.7rem;
    font-size: var(--size18);
    color: var(--blue04);
    font-weight: var(--weight700);

    &::before {
        position: absolute;
        content: "";
        width: 0.6em;
        height: 0.6em;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        border-radius: var(--borderRadiusCircle);
        background-color: var(--orange);
    }
}

.modalMv__ttl {
    margin-top: 20px;

    & span {
        display: block;
        padding: 5px;
        margin-bottom: 5px;
        width: fit-content;
        background-color: var(--white);
        color: var(--blue04);
        font-size: var(--size40);
        font-weight: var(--weight700);
    }

    & .p-r0 {
        padding-right: 0;
    }
}

.modalMv__info {
    position: absolute;
    width: min(100%, 733px);
    background-color: var(--blue04);
    left: 0;
    bottom: 0;
    border-radius: 0 200px 200px 0;
    padding: 45px 0 50px;
    z-index: 0;
}

.modalMv__infoInner {
    width: min(100%, 570px);
    padding: 8px 0 5px 15px;
    margin-left: auto;
    border-left: 4px solid var(--white);
    color: var(--white);
}

.modalMv__kinds {
    font-size: var(--size18);
}

.modalMv__age {
    font-size: var(--size16);
    margin: 10px 0;
}

.modalMv__name {
    font-size: var(--size33);
    font-weight: var(--weight700);
}

.questionBox {
    margin-top: max(6.5%, 40px);
}

.question {

    & div {
        margin-bottom: max(4%, 20px);

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

    & dt {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: var(--size23);
        line-height: 1.4;
    }



    & .montserrat {
        line-height: 1;
        margin-right: 10px;
        font-size: var(--size32);
        font-family: var(--montserrat);
        color: var(--blue04);
    }

    & dd {
        margin-top: max(2.5%, 15px);
        padding: 15px max(3%, 10px);
        line-height: var(--lineHight175);
        border-radius: var(--borderRadius10);
        background-color: var(--white);
        font-weight: var(--weight400);
    }

}

.answer__list li {
    position: relative;
    padding-left: 0.5em;

    &::before {
        position: absolute;
        content: "";
        width: max(0.2em, 3px);
        height: max(0.2em, 3px);
        background-color: var(--black);
        top: 0.9em;
        left: 0;
        transform: translateY(-50%);
        border-radius: var(--borderRadiusCircle);
    }
}

.modalClose {
    position: relative;
    width: min(100%, 220px);
    margin: 40px auto 0;
    background-color: var(--blue04);
    color: var(--white);
    font-size: var(--size19);
    cursor: pointer;
    text-align: center;
    padding: 20px 0;
    border-radius: var(--borderRadius50);
    transition: var(--transitionBase);
    border: 2px solid var(--blue04);

    &::before,
    &::after {
        position: absolute;
        content: "";
        width: 22px;
        height: 2px;
        top: 50%;
        right: 7%;
        background-color: var(--white);
        transition: var(--transitionBase);
    }

    &::before {
        transform: translateY(-50%) rotate(45deg);
    }

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

    &:hover {
        background-color: var(--white);
        color: var(--blue04);

        &::before,
        &::after {
            background-color: var(--blue04);
        }
    }
}

.modalClose-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border: 2px solid var(--orange);
    background-color: var(--orange);
    margin: 0;
    transform: translate(20%, -50%);
    padding: 0;

    &::before,
    &::after {
        top: 50%;
        left: 50%;
    }

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

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

    &:hover {
        background-color: var(--white);

        &::before,
        &::after {
            background-color: var(--orange);
        }
    }
}

.featherlight .featherlight-close-icon {
    display: none;
}

@media screen and (max-width:1330px) {
    .featherlight {
        padding: max(10svh, 40px) max(4%, 20px);
    }
}

@media screen and (max-width:1270px) {
    .modalMv__ttlBox {
        padding: 0 15px;
    }
}

@media screen and (max-width:1155px) {
    .modalMv__img {
        width: 68%;
    }

    .modalMv__ttl span {
        font-size: 3.4634vw;
    }

    .modalMv__infoInner {
        width: min(100%, 650px);
    }
}

@media screen and (max-width:1110px) {
    .modal .section__inner {
        padding: 0 20px;
    }
}

@media screen and (max-width:870px) {
    .modalMv__infoInner {
        width: min(100%, 700px);
    }
}

@media screen and (max-width:768px) {
    .modalClose-top {
        transform: none;
        width: 40px;
        height: 40px;
        top: 25px;
        right: 25px;
    }

    .modalMv {
        padding: clamp(90px, 26.87%, 135px) 0 clamp(125px, 42%, 200px);
    }

    .modalMv__img {
        width: max(86.27%, 270px);
        margin: 0 auto;
        border-radius: var(--borderRadius20);
    }

    .modalMv__ttlBox {
        width: 100%;
        padding: 0;
        left: 7%;
        top: 11%;
    }


    .modalMv__number {
        font-size: clamp(15px, 4.8vw, 25px);

        &::before {
            width: min(0.6em, 12px);
            height: min(0.6em, 12px);
        }
    }

    .modalMv__ttl {
        margin-top: max(49.26%, 130px);

        & span {
            font-size: clamp(17px, 5.07vw, 30px);
            padding: 2px 5px;
        }
    }

    .modalMv__info {
        width: 100%;
        border-radius: 0;
        padding: max(43%, 144px) 0 max(7.47%, 15px);
    }

    .modalMv__infoInner {
        width: 92%;
        padding: 0 10px;
        border-left: 3px solid var(--white);
    }

    .modalMv__kinds,
    .modalMv__age {
        font-size: clamp(14px, 3.733vw, 20px);
    }

    .modalMv__age {
        margin: 5px 0;
    }

    .modalMv__name {
        font-size: clamp(16px, 4.8vw, 25px);
    }

    .question .montserrat {
        margin-right: 5px;
        transform: translateY(10%)
    }
}

@media screen and (max-width:374px) {
    .modalClose-top {
        top: 5px;
        right: 5px;
    }
}


/*******************************************
company
*******************************************/
#company {
    background-color: var(--white);
    padding: 0;

    & .about__ttl {
        margin-bottom: 0.3em;
    }

    & .section__parts {
        position: absolute;
        top: -30%;
        right: 0;
        width: 303px;
    }
}

.company__bg {
    padding: clamp(80px, 10.715%, 150px) 0 clamp(60px, 12%, 160px);
    border-radius: var(--borderRadius15);
    background-image: url(../img/company/bg01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}



.company__flex {
    margin-top: max(4%, 20px);
    display: flex;
    justify-content: space-between;
}

.company__map,
.company__detail {
    width: calc((100% - 60px)/2);
}

.company__map {
    position: relative;
    height: 545px;

    & iframe {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

.company__detail {
    & div {
        display: flex;
    }

    & dt {
        padding: 25px 10px;
        width: min(100%, 149px);
        border-top: 1px solid var(--blue04);
        color: var(--blue04);
        line-height: var(--lineHight175);
        font-weight: var(--weight500);

    }

    & dd {
        flex: 1;
        padding: 25px 20px;
        border-top: 1px solid #bbbbbb;
        font-weight: var(--weight400);
        line-height: var(--lineHight175);
    }
}

.about__ttl-sp {
    display: none;
}

@media screen and (max-width:1024px) {
    #company .section__parts {
        width: 22vw;
        top: -20%;
        right: 3%;
    }
}

@media screen and (max-width:768px) {
    #company {

        & .section__ttl,
        & .section__subTtl {
            margin: 0 auto;
        }

        & .section__ttl {
            margin-bottom: 0.1em;
        }

        & .section__parts {
            top: -14%;
        }
    }


    .company__flex {
        flex-direction: column;
    }

    .company__map,
    .company__detail {
        width: min(100%, 600px);
        margin: 0 auto;
    }

    .company__map {
        margin-bottom: 25px;
        height: 300px;
    }

    .company__detail {

        & dt,
        & dd {
            padding: 20px 10px;
        }

    }
}

@media screen and (max-width:480px) {
    #company .section__parts {
        top: -10%;
        right: 15%;
    }

    .company__bg {
        background-image: url(../img/company/bg01-sp.png);
        background-size: contain;
    }

    .about__ttl-pc {
        display: none;
    }

    .about__ttl-sp {
        display: block;
        text-align: center;
    }

    .company__detail {
        & dt {
            width: min(100%, 95px);
        }
    }
}


/*******************************************
recruit
*******************************************/
.recruit {
    padding-bottom: 20px;
    background-color: var(--white);
}

.recruit__bg {
    padding: clamp(55px, 5.36%, 75px) 0 clamp(90px, 7.1%, 100px);
    border-radius: 0 30vw 30vw 0;
    background-image: url(../img/recruit/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

.recruit__txt {
    font-size: var(--size32);
    text-align: center;
    line-height: 1.8;
    color: var(--white);
}

.recruit__btnBox {
    display: flex;
    justify-content: space-between;
    width: min(100%, 632px);
    margin: 30px auto 0;
}

.recruit__btn {
    width: calc((100% - 30px)/2);

    & .btn {
        background: none;
        border: 2px solid var(--blue);
        background-color: var(--blue);
        color: var(--white);
        text-align: center;

        &:hover {
            background-color: var(--white);
            color: var(--blue);

            &::before,
            &::after {
                background-color: var(--blue);
            }
        }

        &::before,
        &:after {
            position: absolute;
            content: "";
            top: 50%;
            width: 12px;
            height: 2px;
            left: auto;
            background-color: var(--white);
            transition: var(--transitionBase);
            z-index: 0;
            opacity: 1;
        }

        &::before {
            right: 7.5%;
            transform: translateY(-50%) rotate(45deg);
        }

        &::after {
            right: 5%;
            transform: translateY(-50%) rotate(-45deg);
        }


    }


}

.recruit__btn--light .btn {
    border: 2px solid var(--blue05);
    background-color: var(--blue05);

    &:hover {
        color: var(--blue05);

        &::before,
        &::after {
            background-color: var(--blue05);
        }
    }
}

@media screen and (max-width:768px) {
    .recruit__bg {
        border-radius: var(--borderRadius15);
    }
}

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

    .recruit__btn {
        width: min(100%, 300px);
        margin: 0 auto;

        &:last-child {
            margin-top: 10px;
        }
    }
}







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

.footer {
    background-color: var(--white);
    padding: clamp(20px, 2.15%, 50px) 0;
    font-size: 15px;
}

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

    & a {
        position: relative;
    }

    & a:not(:first-child) {
        margin-left: 45px;
    }

    & a:not(:first-child):before {
        display: inline-block;
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        background-color: #000;
        top: 50%;
        left: -23px;
        transform: translate(50%, -50%);
    }

    & a:hover {
        opacity: .5;
    }
}


.copyright {
    text-align: center;
}



@media screen and (max-width:480px) {
    .footer {
        font-size: 14px;
    }
}

@media screen and (max-width:400px) {
    .footer-nav {
        flex-direction: column;
        justify-content: center;
        align-items: center;

        & a:not(:first-child) {
            margin-left: 0px;
        }

        & a:not(:first-child):before {
            display: none;
        }

        & a:first-child {
            margin-bottom: 10px;
        }
    }
}