@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #333333;
    --black02: rgba(0, 0, 0, 0.5);
    --orange01: #FA7132;
    --orange02: #FF8246;
    --orange03: #F05F1A;
    --blue01: #2E87E6;
    --blue02: #44B2F6;
    --blue03: #F0F9FF;
    --blue04: #EAF3FC;
    --blue05: #3D90E8;
    --blue06: #1762B2;
    --gray01: #A8A8A8;
    --gray02: #CDCDCD;
    --gray03: #F5F5F5;

    --gra01: linear-gradient(90deg, var(--blue05), var(--blue06));
    --gra02: linear-gradient(180deg, var(--blue01), var(--blue02));
    --gra03: linear-gradient(90deg, var(--orange02), var(--orange03));


    /* 書式 */
    --notoSans: "Noto Sans JP", sans-serif;
    --lexend: "Lexend", sans-serif;

    /* 文字サイズ */
    --font16: clamp(12px, 0.37vw + 10.81px, 16px);
    --font18: clamp(13px, 0.463vw + 11.52px, 18px);
    --font20: clamp(14px, 0.556vw + 12.22px, 20px);
    --font22: clamp(15px, 0.648vw + 12.93px, 22px);
    --font24: clamp(16px, 0.741vw + 13.63px, 24px);
    --font28: clamp(20px, 0.741vw + 17.63px, 28px);
    --font32: clamp(24px, 0.741vw + 21.63px, 32px);
    --font36: clamp(21px, 1.1719vw + 17.25px, 36px);

    /* ウェイト */
    --weight500: 500;
    --weight600: 600;
    --weight700: 700;
    --weight800: 800;

    /* 行間 */
    --lineHight128: 1.28;
    --lineHight140: 1.40;
    --lineHight150: 1.50;
    --lineHight170: 1.70;
    --lineHight200: 2.0;

    /* 文字間 */
    --fontSpace040: 0.04em;
    --fontSpace060: 0.06em;
    --fontSpace080: 0.08em;
    --fontSpace100: 0.10em;

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

    /* 角丸の変数　 */
    --borderRadius01: 9999px;
    --borderRadius10: 10px;
    --borderRadius16: 16px;
    --borderRadius20: 20px;
    --borderRadius30: 30px;
    --borderRadiusCircle: 50%;

    /* ホバー透明度 */
    --opacity07: .7;

    --size003: 3px;

    --gap20: 20px;
    --gap40: 40px;
}

@media screen and (max-width: 1024px) {
    :root {
        --gap40: 25px;
    }
}


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

        --borderRadius16: 10px;
        --borderRadius20: 15px;
        --borderRadius30: 15px;

        --gap40: 20px;
    }


}

@media screen and (max-width:480px) {
    :root {
        --borderRadius30: 10px;
        --size003: 1.5px;

        --gap20: 10px;
    }


    .section__ttl {
        font-size: 4vw;
    }


}




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

body {
    color: var(--black);
    font-family: var(--notoSans);
    font-weight: var(--weight700);
    font-size: var(--font18);
    line-height: var(--lineHight120);
    letter-spacing: var(--fontSpace080);
}

.rome {
    font-family: "Noto Serif KR", serif;
}

p {
    text-align: justify;
    font-size: var(--font16);
    line-height: var(--lineHight170);
    font-weight: var(--weight500);
    letter-spacing: var(--fontSpace060);
}

.lexend {
    font-family: var(--lexend);
}

.section {
    position: relative;
}

.section__inner {
    position: relative;
    width: min(100%, 1200px);
    margin: 0 auto;
}

.section__ttl {
    display: flex;
    flex-direction: column;
    font-size: var(--font28);
    margin: 0 auto max(5%, 25px);

    .en {
        font-family: var(--lexend);
        letter-spacing: var(--fontSpace040);
        font-size: 3.5714em;
        line-height: 1.3;
    }

    .ja {
        position: relative;
        letter-spacing: var(--fontSpace100);
        padding-left: 1em;
        font-size: 1em;

        &::before {
            position: absolute;
            content: "";
            top: 0.35em;
            left: 0;
            border-radius: var(--borderRadiusCircle);
            background-color: var(--orange01);
            width: 0.571em;
            aspect-ratio: 1;
        }
    }
}

.interview,
.benefit {
    .section__ttl {
        color: var(--white);
    }
}

.ttlFrame {
    text-align: center;
    font-size: var(--font36);
    height: 1.88em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    background-color: var(--orange01);
    width: fit-content;
    padding: 0 0.83em;
    margin: 0 auto max(4.55%, 20px);
    letter-spacing: var(--fontSpace080);
}

.ttlFrame-blue01 {
    background-color: var(--blue01);
}

.ttlFrame-blue02 {
    background-color: var(--blue02);
}

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


.push {
    display: inline-block;
}


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

.section-chara {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(63px, 10.7vw, 170px);
    transform: translate(0%, 100%);
}

@media screen and (max-width:1300px) {
    .section-chara {
        transform: translate(20px, 100%);
    }
}



@media screen and (max-width:1280px) {
    .section__inner {
        padding-left: max(4vw, 20px) !important;
        padding-right: max(4vw, 20px) !important;
    }
}


@media screen and (max-width:768px) {
    .section__ttl {
        font-size: clamp(12px, 3.9vw, 23px);

        .en {
            font-size: 3em;
        }
    }
}


/*******************************************
btn
*******************************************/
.btn-outer {
    position: relative;
    width: min(100%, 300px);
    height: 80px;
    margin: 0 auto;
}

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--white);
    border: 2px solid var(--orange01);
    border-radius: var(--borderRadius10);
    font-size: var(--font20);
    transition: var(--transition01);
    background-color: var(--white);
    overflow: hidden;

    span {
        position: relative;
        z-index: 1;
    }

    &::before {
        mask-image: url(../img/common/arrow.svg);
        mask-size: contain;
        mask-repeat: no-repeat;
        background-color: var(--white);
        aspect-ratio: 8/14;
        height: auto;
        width: max(0.4em, 5px);
        position: absolute;
        content: "";
        top: 50%;
        right: 1.5em;
        transform: translateY(-50%);
        transition: var(--transition01);
        z-index: 1;
    }

    &::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gra03);
        transition: var(--transition01);
    }

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

        &::before {
            right: 1em;
            background-color: var(--orange01);
        }

        &:after {
            opacity: 0;
        }
    }
}

.btn-outer-circle {
    width: initial;
    height: initial !important;

    .btn {
        width: 60px;
        height: auto;
        aspect-ratio: 1;
        border-radius: var(--borderRadiusCircle);

        &::before {
            top: 50%;
            right: 50%;
            transform: translate(45%, -50%);
            width: 20%;
        }

        &:hover {
            &::before {
                right: 50%;
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    .btn-outer-circle {
        .btn {
            width: 40px;
        }
    }

    .btn-outer {
        height: 65px;
    }
}

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

    .btn:hover {
        color: var(--white);

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

        &:after {
            opacity: 1;
        }
    }
}



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

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



    a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: var(--borderRadiusCircle);
        background-color: var(--white);
        border: 2px solid var(--orange01);
        transition: var(--transition01);

        &::before {
            position: absolute;
            content: "";
            mask-image: url(../img/common/arrow.svg);
            mask-repeat: no-repeat;
            mask-size: contain;
            background-color: var(--orange01);
            top: 50%;
            left: 50%;
            width: 30%;
            aspect-ratio: 8/14;
            transform: translate(-50%, -50%) rotate(-90deg);
            transition: var(--transition01);
        }

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

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

}


@media screen and (max-width: 768px) {
    .topReturn {
        width: 40px;
        bottom: calc(60px + 2%);

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

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


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

        a {
            border: 1px solid var(--orange01);
        }
    }
}


/*******************************************
header
*******************************************/
.header {
    position: fixed;
    width: 100%;
    display: flex;
    height: auto;
    z-index: 95;
    transition: var(--transition01);
}

.bg-white {
    background-color: transparent;
}

.header__left {
    font-size: 15px;
    width: 29.6666em;
    aspect-ratio: 444/80;
    background-color: var(--white);
    border-radius: 0 0 var(--borderRadius20) 0;

    h1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
}

.header__logoBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 89.89%;

    .logo {
        position: relative;
        width: 15.4em;
        transition: var(--transition01);

        &::before {
            position: absolute;
            content: "";
            top: 50%;
            left: 105%;
            width: 1px;
            height: 83.6%;
            transform: translateY(-50%);
            background-color: var(--black);
        }

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

    .txt {
        font-size: 1em;
        line-height: var(--lineHight140);
        text-align: center;
        letter-spacing: var(--fontSpace060);
    }
}


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

.entryBox-fixed {
    flex: 1;
    height: 100%;

    .btn-outer {
        font-size: 18px;
        width: clamp(200px, 13.3em, 240px);
        height: 100%;
        margin: 0 0 0 auto;
    }

    .btn {
        font-size: 1em;
        gap: 0.166em;
        border-radius: 0 0 0 var(--borderRadius20);



        &::before {
            display: none;
        }
    }
}

.hamburger {
    position: relative;
    display: block;
    height: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    z-index: 110;
    background-color: var(--blue01);

    .line {
        position: absolute;
        width: max(42.5%, 32px);
        height: var(--size003);
        left: 50%;
        transform: translate(-50%, -50%);
        transition: var(--transition01);
        background-color: var(--white);

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

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

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

.headerNav {
    position: fixed;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 100;
    transition: var(--transition01);
    visibility: hidden;

    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100dvh;
        top: 0;
        left: 0;
        background-color: var(--black);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition01);
    }
}

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

.headerNav__item {
    &:last-child {
        margin: 8svh 0 0;
    }
}

.btn-outer-headerNav01 {
    width: 100%;
    height: auto;
    border: none;
    border-bottom: 2px solid var(--orange01);
    border-radius: initial;
    margin-bottom: clamp(10px, 5svh, 80px);


    .btn {
        color: var(--black);
        align-items: flex-start;
        padding: clamp(10px, 5svh, 25px) 1em;
        border: none;

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

        &::after {
            display: none;
        }

        &:hover {
            color: var(--orange01);
        }
    }


}




.active {

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

        &: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 {
        visibility: visible;

        &::before {
            opacity: 0.5;
            visibility: visible;
        }
    }

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

@media screen and (max-width:1024px) {
    .header__left {
        font-size: 12px;
    }

    .entryBox-fixed {
        .btn-outer {
            font-size: 15px;
        }
    }
}


@media screen and (max-width:768px) {
    .header {
        position: absolute;
    }

    .hamburger {
        position: fixed;
        top: 0;
        right: 0;
        width: 64.14px;
        height: auto;
        border-radius: 0 0 0 var(--borderRadius16);
    }

    .entryBox-fixed {
        position: fixed;
        left: 50%;
        bottom: 2%;
        transform: translateX(-50%);
        height: 60px;
        width: min(80%, 400px);
        flex: initial;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition01);

        .btn-outer {
            width: 100%;
        }

        .btn {
            border-radius: var(--borderRadius10);
        }
    }

    .headerNav__list {
        width: 70%;
    }

    .btn-outer-headerNav01 {
        .btn {
            &:hover {
                color: var(--black);
            }
        }
    }
}



@media screen and (max-width:480px) {
    .header__left {
        font-size: max(2.33vw, 8px);
        width: 30em;
        aspect-ratio: 300 / 60;
        border-radius: 0 0 1.6em 0;
    }

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

    .hamburger {
        width: max(13.96vw, 48px);
    }

    .headerNav__list {
        width: 80%;
    }

    .btn-outer-headerNav02 {
        width: min(100%, 295px);
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .entryBox-fixed {
        .btn-outer {
            font-size: 13px;
        }
    }
}

@media screen and (max-width:429px) {
    .hamburger {
        .line {
            width: min(55%, 32px);
            height: 2px;
        }
    }

    .headerNav__list {
        width: 100%;
    }

    .btn-outer-headerNav01 {
        margin-bottom: 0;
    }
}




/*******************************************
mv
*******************************************/
.mv {
    position: relative;
    aspect-ratio: 1600/946;
}

.mvSwiper {

    & .swiper-slide-active img,
    & .swiper-slide-duplicate-active img,
    & .swiper-slide-prev img {
        animation: zoomUp 15s linear 0s normal both;
    }
}

.mv__parts {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.mv__ttl {
    position: absolute;
    left: 3%;
    bottom: 18.5%;
    font-size: 7.5vw;
    color: var(--white);
    font-weight: var(--weight800);
    line-height: 1.08;
    z-index: 2;
}

.mv__ttlParts {
    display: block;
    position: absolute;
    width: 52.4%;
    bottom: 0;
    left: 50%;
    transform: translate(-75%, 12%);
    z-index: 1;
}


@keyframes zoomUp {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

@media screen and (max-width:768px) {
    .mv {
        aspect-ratio: 430/565;
        /* 隙間埋めるため */
        background-color: var(--orange03);

    }

    .mv__ttl {
        font-size: 12vw;
        left: 4.5%;
        bottom: 8.5%;


        .ttl {
            position: relative;

            .txt {
                position: relative;
            }


        }
    }

    .mv__ttlParts {
        width: 123.72%;
        transform: translate(-45%, 30%);
        z-index: 1;
    }


}





/*******************************************
about
*******************************************/
.about {
    background: var(--gra02);
    color: var(--white);
    margin-top: -25px;

    .section__inner {
        padding: 0 0 clamp(50px, 17%, 272px);
    }

    .section__ttl {
        margin-bottom: max(3.5%, 20px);
    }
}

.about-container {
    position: relative;
    width: fit-content;

    .img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: min(40.2vw, 643px);
        transform: translate(115%, 6%);
        z-index: 1;

        bottom: auto;
        top: 0;
        transform: translate(115%, -36%);
    }
}

.about__txtBox {
    position: relative;

    p {
        font-size: var(--font18);
        line-height: var(--lineHight200);
        letter-spacing: var(--fontSpace080);
        margin-bottom: clamp(15px, 5.2%, 25px);

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

@media screen and (max-width:1400px) {
    .about-container {
        .img {
            transform: translate(115%, -40%);
        }
    }
}

@media screen and (max-width:1200px) {
    .about-container {
        .img {
            transform: translate(115%, -43%);
        }
    }
}

@media screen and (max-width:1024px) {
    .about-container {
        .img {
            width: max(calc(72.55vw - 342.9px), 350px);
            transform: translate(100%, -18%);
        }
    }
}

@media screen and (max-width:900px) {
    .about-container {
        .img {
            transform: translate(88%, -18%);
        }
    }
}

@media screen and (max-width:800px) {
    .about-container {
        .img {
            transform: translate(72%, -18%);
        }
    }

    .about__txtBox {
        width: min(100%, 380px);

        p {
            text-align: left;
        }
    }
}

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

    .about {

        .section__inner {
            padding-top: max(5.23%, 25px);
        }
    }

    .about-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .img {
            position: initial;
            transform: initial;
            margin: max(5.23%, 20px) auto 0;
            width: min(80%, 300px);
        }
    }

    .about__txtBox {
        width: 100%;
    }
}

@media screen and (max-width:480px) {
    .about-container {
        .img {
            width: min(80%, 280px);
        }
    }
}

/*******************************************
search
*******************************************/
.search {
    border-radius: min(5vw, 80px);
    background-color: var(--white);
    margin-top: clamp(-85px, -5.33%, -30px);
    z-index: 2;

    .section__inner {
        padding: clamp(90px, 5.5%, 90px) 0;
    }

    .section__ttl {
        align-items: center;


        .en {
            background: linear-gradient(90deg, var(--blue01), var(--blue02));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ja {
            color: var(--blue01);
        }

    }
}

.searchBox {
    margin-bottom: max(6.66%, 40px);
    border-bottom: 1px solid var(--gray02);
    padding: 0 0 max(6.66%, 40px);

    &:last-child {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
    }
}

.searchBox__inner {
    width: min(100%, 1100px);
    margin: 0 auto;
}

.searchSwiper-tab {
    position: relative;
}

.searchSwiper-tab__list {
    position: relative;
    z-index: 10;
    height: 120px;
    border-bottom: var(--size003) solid var(--blue01);
    box-sizing: border-box;

    .swiper-slide {
        position: relative;
        color: var(--gray01);
        height: 100%;
        background-color: var(--gray03);
        font-size: var(--font24);
        letter-spacing: var(--fontSpace040);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: var(--borderRadius16) var(--borderRadius16) 0 0;
        transition: var(--transition01);
        line-height: var(--lineHight150);
        overflow: visible;
        border: var(--size003) solid transparent;
        border-bottom: none;

        &::before {
            position: absolute;
            content: "";
            bottom: 0;
            left: 0px;
            transform: translate(0, 5px);
            height: 6px;
            width: 100%;
            background-color: var(--white);
            opacity: 0;
            transition: var(--transition01);
        }


        &:hover,
        &.swiper-slide-thumb-active {
            border: var(--size003) solid var(--blue01);
            border-bottom: none;
            background-color: var(--white);
            color: var(--blue01);


            &::before {
                opacity: 1;
            }
        }



    }
}


.searchSwiper-cont {
    position: relative;

    .swiper-slide {
        display: grid;
        gap: var(--gap40);
        grid-template-columns: 1fr 1fr;
        /* grid-template-rows: 1fr 1fr; */
        padding-top: 50px;
    }
}

.searchSwiperBox {

    .ttlFrame {
        font-size: var(--font22);
        height: 2.09em;
        margin: 0 0 20px;
        padding: 0 0.72em;
    }

    .blueBox01 {
        background-color: var(--blue03);
    }

    .blueBox01,
    img {
        border-radius: var(--borderRadius16);
        overflow: hidden;
    }

    p {
        font-size: var(--font18);
    }
}

.searchTxtBox {
    padding: 0 clamp(10px, 9.5%, 50px) clamp(20px, 7.6%, 40px);
}

.searchTxtBox__txt {
    margin-top: 1em;
    font-size: var(--font16) !important;
    text-align: left;
}

.flowDetail {
    padding-top: 4px;
}

.flowDetail__item {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: var(--font20);
    padding-bottom: 1em;

    &::before {
        position: absolute;
        content: "";
        top: 0.5em;
        left: 0.4em;
        transform: translate(-50%, 0);
        width: 2px;
        height: 100%;
        background-color: var(--blue01);
    }

    &:last-child {
        padding-bottom: 0;

        &::before {
            display: none;
        }
    }

    dt {
        position: relative;
        font-size: 1em;
        width: 4.5em;
        color: var(--blue01);
        letter-spacing: var(--fontSpace060);
        margin-right: 1.1em;
        text-align: right;

        &::before {
            position: absolute;
            content: "";
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 0.8em;
            aspect-ratio: 1;
            border-radius: var(--borderRadiusCircle);
            background-color: var(--blue01);
        }
    }

    dd {
        flex: 1;
        font-size: var(--font16);
        font-weight: var(--weight500);
        padding-top: 0.15em;
    }
}

.numberList {
    counter-reset: num;

    li {
        p {
            position: relative;
            line-height: var(--lineHight200);
            text-align: left;
            padding-left: 1.22em;

            &::before {
                position: absolute;
                counter-increment: num;
                content: counter(num) ".";
                left: 0;
                top: 0;
                font-size: var(--font18);
            }
        }
    }
}






.aco-container {
    transition: var(--transition01);
    overflow: hidden;
}

.aco-click {
    position: relative;
    cursor: pointer;
    transition: var(--transition01);

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

.aco-box {
    max-height: 0;
    transition: var(--transition01);
}

.aco-container.open {
    .aco-click::before {
        transform: translateY(-50%) rotate(90deg);

    }
}

.searchBtnList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gap20);
}

.searchBtnList__item {
    width: calc((100% - 40px)/3);

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

.searchBtnList-sub {
    a {
        display: block;
        font-size: var(--font18);
        text-align: center;
        padding: 1.5em 0.5em;
        border-bottom: 1px dashed var(--orange01);
        transition: var(--transition01);
        font-weight: var(--weight500);
        line-height: 1.3;

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

.officeSwiper__list {
    display: grid;
    gap: var(--gap40);
    grid-template-columns: 1fr 1fr;

    .img {
        border-radius: var(--borderRadius16);
        overflow: hidden;
        margin: 0 auto 20px;
    }
}

.officeDetail {
    font-size: var(--font18);



    dt {
        font-size: 1.55em;

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

    dd {
        margin-top: 0.83em;

        p,
        .tell {
            position: relative;
            line-height: var(--lineHight200);
            padding-left: 1.388em;
            font-size: 1em;

            &::before {
                position: absolute;
                content: "";
                background-image: url(../img/search/icon01.svg);
                background-size: contain;
                background-repeat: no-repeat;
                width: 0.77em;
                aspect-ratio: 14/20;
                top: 0;
                left: 0;
                transform: translate(5%, 40%);
            }
        }

        .tell {
            display: block;
            width: fit-content;
            font-weight: var(--weight500);
            letter-spacing: var(--fontSpace060);

            &::before {
                background-image: url(../img/search/icon02.svg);
                width: 1em;
                aspect-ratio: 1;
                transform: translateY(60%);
            }

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

        }
    }
}

.btn-outer-search,
.btn-outer-office {
    width: 100%;
    margin: 30px auto 0;
}

@media screen and (max-width: 1024px) {
    .searchSwiper-tab__list {
        height: 100px;
    }

}

@media screen and (max-width: 768px) {
    .search {
        .section__inner {
            padding: max(11%, 40px) 0;
        }
    }

    .searchSwiper-tab {
        width: min(100%, 400px);
        margin: 0 auto;
    }

    .searchSwiper-tab__list {
        flex-direction: column;
        flex-wrap: wrap;
        overflow: visible;
        height: auto;
        border: none;


        .swiper-slide {
            border-radius: var(--borderRadius16);
            height: 80px;
            margin-bottom: 15px;
            border: var(--size003) solid transparent;

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

            &::before {
                display: none;
            }

            &:hover {
                color: var(--gray01);
                background-color: var(--gray03);
                border: var(--size003) solid transparent;
            }

            &.swiper-slide-thumb-active {
                border: var(--size003) solid var(--blue01);

                &:hover {
                    border: var(--size003) solid var(--blue01);
                    background-color: var(--white);
                    color: var(--blue01);

                }
            }

        }
    }

    .searchSwiper-cont {
        .swiper-slide {
            display: grid;
            grid-template-columns: 1fr;
            padding-top: 20px;
        }
    }

    .searchSwiperBox {
        width: min(100%, 500px);
        margin: 0 auto;

        img {
            display: block;
            width: min(100%, 350px);
            margin: 0 auto;
        }

        .ttlFrame {
            margin: 0 0 10px;
        }
    }

    .searchTxtBox {
        padding-bottom: 20px;
    }

    .btn-outer-search {
        width: min(100%, 300px);
    }

    .searchBtnList {
        width: min(100%, 500px);
        margin: 0 auto;
    }

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

    .officeSwiper__list {
        display: flex;

        .swiper-slide {
            display: flex;
            flex-direction: column;
            height: auto;
        }
    }

    .officeDetail {
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        dt {
            &:nth-of-type(2) {
                margin-top: 15px;
            }
        }

        dd {
            display: flex;
            flex-direction: column;
            flex-grow: 1;

            &:nth-of-type(2) {
                .txtBox {
                    margin-bottom: 30px;
                }
            }
        }
    }

    .btn-outer-office {
        margin-top: auto;
    }

    .section-chara-search {
        transform: translate(20px, 160%);
    }
}

@media screen and (max-width: 620px) {
    .section-chara-search {
        transform: translate(20px, 200%);
    }
}

@media screen and (max-width: 480px) {
    .searchSwiper-tab {
        width: min(100%, 350px);
        width: 100%;
        margin: 0 auto;

        .swiper-slide {
            height: 60px;
            line-height: 1.2;
            font-size: 13px;
        }
    }

    .searchTxtBox {
        padding: 0 15px 20px;
    }

    .flowDetail__item {

        &::before {
            transform: translate(-60%, 0);
        }

        dt {
            margin-right: 0.8em;

        }
    }


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

    .searchBtnList__item {
        width: 100%;
    }

    .section-chara-search {
        transform: translate(10px, 0);
    }
}

@media screen and (max-width:400px) {
    .section-chara-search {
        transform: translate(10px, 160%);
    }
}

@media screen and (max-width:374px) {
    .section-chara-search {
        transform: translate(10px, -32%);
    }
}

/*******************************************
ページネーション
*******************************************/
.paginationFlex {
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: max(7%, 30px);
    gap: 10px;

    .pagiBtn {
        position: relative;
        width: 40px;
        cursor: pointer;

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

        &::after {
            display: none;
        }
    }
}


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

.pagiDot {
    width: fit-content !important;

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

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





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







/*******************************************
interview
*******************************************/
.interview {
    background: linear-gradient(180deg, var(--blue01), var(--blue02));
    margin-top: clamp(-100px, -7%, -30px);
    max-height: 840px;
    z-index: 1;

    .section__inner {
        padding: clamp(80px, 13%, 210px) 0 0 0;
        padding: clamp(150px, 13%, 210px) 0 0 0;
    }

    .section__ttl {
        text-align: right;
        margin-bottom: 20px;

        .ja {
            width: fit-content;
            margin-left: auto;
        }
    }
}

.interviewList {
    display: flex;
    justify-content: space-between;
    gap: var(--gap40);
}

.interviewList__item {
    border-radius: var(--borderRadius16);
    overflow: hidden;
    background-color: var(--white);
    cursor: pointer;
    height: 100%;

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

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

    .img {
        overflow: hidden;

        img {
            transition: var(--transition01);
            display: block;
        }
    }

    &:hover {
        img {
            transform: scale(1.15);
        }

        .btn {
            &:after {
                opacity: 0;
            }

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

.interviewDetail {
    position: relative;

    dt {
        margin-top: -1em;

        p {
            font-size: max(var(--font20), 18px);
            background-color: var(--orange01);
            color: var(--white);
            width: fit-content;
            padding: 6px 15px 8px;
            line-height: 1.45;
            margin-bottom: 6px;
            letter-spacing: var(--fontSpace080);

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

    dd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 30px 30px;

        p {
            font-size: var(--font18);
            flex: 1;
        }

        .btn-outer-circle {
            margin-right: 0;
        }
    }
}

.section-chara-interview {
    transform: translate(175%, 126%);
}

@media screen and (max-width:1024px) {
    .interview {
        max-height: initial;

        .section__ttl {
            margin: 0 auto max(5%, 25px);
        }
    }

    .interviewList {
        flex-wrap: wrap;
        justify-content: center;
        width: min(100%, 700px);
        margin: 0 auto;
    }

    .interviewList__item {
        width: calc((100% - 40px)/2);
        margin-top: 0 !important;

        .img {
            max-height: 230px;
        }
    }
}

@media screen and (max-width:850px) {
    .section-chara-interview {
        transform: translate(20px, 126%);
    }
}

@media screen and (max-width:768px) {
    .interview {
        .section__inner {
            padding: max(18%, 80px) 0 0 0;
        }
    }

    .interviewList {
        width: min(100%, 300px);
    }

    .interviewList__item {
        width: 100%;

        &:hover {
            img {
                transform: scale(1);
            }

            .btn {
                &:after {
                    opacity: 1;
                }

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

@media screen and (max-width:480px) {
    .interviewDetail {
        dt {
            p {
                padding: 2px 5px;
                margin-bottom: 3px;
            }
        }

        dd {
            padding: 10px 2em 15px;
        }
    }

    .section-chara-interview {
        transform: translate(20px, 70%);
    }
}

@media screen and (max-width:400px) {
    .section-chara-interview {
        transform: translate(10px, 58%);
    }
}


/*******************************************
modal
*******************************************/
/* 共通
ーーーーーーーーーーーーーーーーーーー */
.modalOpen,
.modalClose {
    cursor: pointer;
}

.no-scroll {
    overflow: hidden;

    body {
        overflow: scroll;
    }
}

.modal {
    /* 背景 */
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: auto;
    z-index: -100;
    overflow: auto;
    transition: var(--transition01);
    background-color: transparent;

    &::before {
        position: fixed;
        content: "";
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        background-color: var(--black);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition01);
    }
}

.modalBox-outer {
    /* 最大幅*/
    position: absolute;
    width: min(100vw, 1000px);
    height: 100dvh;
    top: 0;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0);
    transition: var(--transition01);
    padding: clamp(40px, 5%, 80px) 0;
    z-index: -100;
}

.modalBox {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: var(--white);
    height: auto;
    border-radius: var(--borderRadius10);
    overflow: hidden;
}



.active {
    opacity: 1;
    visibility: visible;
    z-index: 1000;

    &::before {
        opacity: .7;
        visibility: visible;
    }

    .show.modalBox-outer {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        z-index: 1001;
    }
}

.modal__inner {
    /* モーダル中身のインナー */
    position: relative;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 50px 0;
}

.modalClose-top {
    position: absolute;
    content: "";
    width: 25px;
    aspect-ratio: 1;
    top: 0;
    right: 0;
    border-radius: var(--borderRadiusCircle);
    transform: translate(-50%, 50%);
    z-index: 10;
    transition: var(--transition01);

    &::before {
        position: absolute;
        content: "";
        mask-image: url(../img/interview/cross.svg);
        mask-size: contain;
        mask-repeat: no-repeat;
        aspect-ratio: 1;
        width: 100%;
        background-color: var(--white);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

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

    }
}



.modalMv {
    position: relative;
}

.modalMv__bg {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
}


.modalMv__inner {
    position: relative;
    width: min(100%, 920px);
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    gap: var(--gap40);
    padding-top: 40px;
}

.modalMv__img {
    width: min(55%, 500px);

    img {
        border-radius: var(--borderRadius16);
    }
}


.interviewDetail-modal {
    flex: 1;
    padding: 30px 0 0 0;

    dt {
        margin-top: 0;
        margin-bottom: 15px;

        p {
            font-size: var(--font24);
        }
    }

    dd {
        padding: 0;

        p {
            color: var(--white);

        }
    }
}

.section-chara-modalInterview {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    transform: translate(0%, -23%);
    width: clamp(45px, 9.2vw, 146px);
}




.modal__q {
    font-size: var(--font20);

    dt {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 0.9em;

        p {
            flex: 1;
            font-size: var(--font20);
            line-height: 1.217;
            font-weight: var(--700);
            text-align: left;
        }
    }

    dd {
        margin-bottom: 30px;
        border-radius: var(--borderRadius10);

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

        p {
            padding: 16px 30px;
            border-radius: 8px;
            border: 2px solid var(--blue02);
            background-color: var(--white);
        }
    }
}

.q-icon {
    position: relative;
    display: block;
    width: 1.5em;
    aspect-ratio: 1;
    transform: translateY(-8%);
    background-color: var(--blue01);
    border-radius: var(--borderRadiusCircle);

    &::before {
        position: absolute;
        content: "Q";
        font-size: 1em;
        color: var(--white);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -55%);
        font-family: var(--lexend);
        font-weight: var(--weight600);
    }
}

.btn-outer-modal {
    width: min(100%, 320px);
    height: 70px;
    margin-top: 50px;

    .btn {
        background-color: var(--gray03);
        border: none;
        color: var(--blue01);

        &::before {
            mask-image: url(../img/interview/cross.svg);
            aspect-ratio: 1;
            width: 0.9em;
            background-color: var(--blue01);
            transition: var(--transition01);
        }

        &::after {
            display: none;
        }

        &:hover {
            background-color: var(--blue01);
            color: var(--gray03);

            &::before {
                right: 1.5em;
                background-color: var(--gray03);
            }
        }
    }
}

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

    .modal__inner,
    .modalMv {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


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

    .modalMv {
        background: linear-gradient(to bottom,
                #44B2F6 96%,
                #fff 4%);
    }

    .modalMv__bg {
        top: 95%;
    }

    .modalMv__inner {
        flex-direction: column;
        width: min(100%, 350px);
        padding-top: 40px;
    }

    .modalMv__img {
        width: 100%;
    }

    .interviewDetail-modal {
        flex: initial;
        padding: 0;
    }

    .section-chara-modalInterview {
        transform: translate(100%, -18%);
        width: max(11vw, 45px);
    }

    .modal__inner {
        padding-top: 40px;
    }

    .modal__q {
        dd {
            p {
                padding: 10px;
            }
        }
    }

    .btn-outer-modal {
        .btn {
            &:hover {
                background-color: var(--gray03);
                color: var(--blue01);

                &::before {
                    right: 1.5em;
                    background-color: var(--blue01);
                }
            }
        }
    }

}

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

    .section-chara-modalInterview {
        transform: translate(0%, -18%);
        width: max(15vw, 45px);
    }

    .btn-outer-modal {
        height: 60px;
    }

    .modalClose-top {
        width: 18px;
    }
}





/*******************************************
BENEFIT
*******************************************/
.benefit {
    background-color: var(--blue02);
    z-index: 0;
    background-image: url(../img/benefit/bg.png);
    background-position: center 80px;
    background-size: 100%;
    background-repeat: repeat;
    background-attachment: fixed;

    .section__inner {
        padding: clamp(70px, 17.4%, 250px) 0 clamp(130px, 27%, 420px);
    }
}


.benefit-bg01,
.benefit-bg02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.benefit-bg02 {
    top: auto;
    bottom: -0.1%;
}

.benefit-container {
    position: relative;
    width: min(100%, 1100px);
    margin: 0 auto;
}


.section-chara-benefit {
    width: clamp(70px, 13.5vw, 210px);
    left: auto;
    right: 0;
    transform: translate(-23%, -60%)
}

.benefitBox {
    margin-bottom: max(7.3%, 40px);

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

    .ttlFrame {
        margin-left: 0;
    }
}

.dataList {
    display: flex;
    gap: 30px;

    .swiper-slide {
        background-color: var(--white);
        width: calc((100% - 60px)/3);
        border-radius: var(--borderRadius16);
        padding: 25px 20px 30px;
        display: flex;
        flex-direction: column;
        height: auto;
    }
}

.dataDetail {
    display: flex;
    flex-direction: column;
    flex-grow: 1;


    .ttl {
        font-size: var(--font24);
        letter-spacing: var(--fontSpace080);
        color: var(--orange01);
        text-align: center;
        line-height: var(--lineHight150);
        font-weight: var(--weight800);
    }

    .img {
        width: clamp(120px, 84%, 257px);
        margin: 25px auto 20px;
    }

    dd {
        p {
            text-align: center;
        }

        .color-blue01 {
            font-size: 0.77em;
            color: var(--blue02);
            margin-top: 0.8em;
            text-align: justify;
            letter-spacing: var(--fontSpace040);
        }
    }
}

@media screen and (max-width:1024px) {
    .dataList {
        display: flex;
        gap: 20px;

        .swiper-slide {
            width: calc((100% - 40px)/3);
            padding: 25px 10px 30px;
        }
    }
}

@media screen and (max-width:768px) {
    .benefit {
        .section__inner {
            padding-top: max(32%, 100px);
        }
    }

    .dataDetail {
        .img {
            width: clamp(100px, 50%, 257px);
            margin: 10px auto 5px;
        }
    }

    .dataList {
        .swiper-slide {
            padding: 15px 1.5em;
        }
    }
}

@media screen and (max-width:480px) {
    .benefit {
        background-position: top;
        background-attachment: initial;
    }

}

@media screen and (max-width:400px) {
    .section-chara-benefit {
        transform: translate(0%, -115%)
    }
}


/*******************************************
sp時 スライダー
*******************************************/

.resetSwiper__list {
    flex-wrap: wrap;
    justify-content: space-between;
}

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

    .resetSwiper {
        width: min(100%, 350px);
        overflow: visible;
    }

    .resetSwiper__list {
        flex-wrap: nowrap;
        justify-content: initial;
        gap: 0 !important;

        .swiper-slide {
            width: auto;
        }

        .swiper-slide02 {
            width: auto;
        }
    }

}

/*******************************************
sns
*******************************************/
.sns {
    background: linear-gradient(180deg, var(--blue01), var(--blue02));

    .section__inner {
        padding: clamp(60px, 8%, 125px) 0 clamp(200px, 25.7%, 41px);
        padding: clamp(60px, 8%, 125px) 0 0;
    }
}

.section-chara-sns {
    width: clamp(100px, 27.3vw, 435.5px);
    transform: translate(0%, -84%);
}

.sns__ttl {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(20%, -80%);
    font-size: clamp(30px, 7.5vw, 120px);
    color: var(--white);
    text-align: right;
    line-height: 1.083;

    span {
        display: block;
    }
}

.snsList {
    width: min(100%, 1000px);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap40);
}

.snsList__item {
    width: calc((100% - 40px)/2);
    height: 110px;

    &:first-child {
        width: min(100%, 600px);
    }


    .btn {
        font-size: var(--font32);
        letter-spacing: var(--fontSpace080);

        &::before {
            right: 1em;
        }

        &:hover {
            &::before {
                right: 0.5em;
            }
        }
    }
}

.btn-outer-sns {
    .btn {
        color: var(--orange01);
        font-family: var(--lexend);
        font-weight: var(--weight600);
        border: 2px solid var(--white);

        &::before {
            display: none;
        }

        &::after {
            opacity: 0;
        }

        span {
            padding-left: 1.6em;

            &::before {
                position: absolute;
                content: "";
                mask-image: url(../img/sns/icon01.svg);
                mask-size: contain;
                mask-repeat: no-repeat;
                width: 1.125em;
                aspect-ratio: 1;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                transition: var(--transition01);
                background-color: var(--orange01);
            }
        }

        &:hover {
            color: var(--white);
            border: 2px solid var(--orange01);

            &:after {
                opacity: 1;
            }

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

    &:last-child {
        .btn span::before {
            mask-image: url(../img/sns/icon02.svg);
        }
    }
}

.loop-container {
    transform: translateY(38%);
}

.loopBox {
    position: relative;
    aspect-ratio: 1200/460;
}

.section-chara-loop01 {
    left: auto;
    right: 0;
    z-index: 1;
    transform: translate(20%, -35%);
}

.section-chara-loop02 {
    top: auto;
    bottom: 0;
    z-index: 1;
    transform: translate(-15%, -20%);
}

.loopSwiper-outer {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.loopSwiper__list {
    transition-timing-function: linear;

    .swiper-slide {
        border-radius: var(--borderRadius30);
        overflow: hidden;
    }

    .swiper-slide02 {
        margin-top: max(5%, 15px);
    }
}

.main__inner {
    padding-bottom: clamp(80px, 16.5%, 260px);
}

@media screen and (min-width:1601px) {

    /* 1601以上 */
    .loopSwiper__list {
        .swiper-slide {
            max-width: 380px;
        }
    }
}

@media screen and (max-width:1500px) {
    .sns__ttl {
        transform: translate(5%, -100%);
    }
}

@media screen and (max-width:1300px) {
    .sns__ttl {
        transform: translate(-5%, -100%);
    }
}

@media screen and (max-width:768px) {
    .sns {
        .section__inner {
            padding-top: max(19%, 65px);
        }
    }

    .sns__ttl {
        font-size: max(11vw, 40px);
        transform: translate(-5%, -58%);
    }

    .section-chara-sns {
        width: max(25vw, 110px);
        transform: translate(0%, -23%);
    }

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

    .snsList__item {
        width: 100%;
        height: 80px;

        .btn {
            &:hover {
                &::before {
                    right: 1em;
                }
            }
        }
    }

    .btn-outer-sns {
        .btn {
            &:hover {
                color: var(--orange01);
                border: 2px solid var(--white);

                &:after {
                    opacity: 0;
                }

                span::before {
                    background-color: var(--orange01);
                }
            }
        }
    }
}




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

    .sns__ttl {
        transform: translate(-20px, -64%);
    }

    .section-chara-sns {
        transform: translate(20px, -20%);
    }

    .snsList {
        width: min(100%, 250px);
        gap: 15px;
    }

    .snsList__item {
        height: 60px;

        .btn {
            font-size: 16px;
        }
    }

    .section-chara-loop01 {
        left: auto;
        right: 0;
        z-index: 1;
        transform: translate(0%, -35%);
    }

    .section-chara-loop02 {
        top: auto;
        bottom: 0;
        z-index: 1;
        transform: translate(0%, 30%);
    }
}

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

    .section-chara-sns {
        transform: translate(10px, -3%);
    }
}

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

    .sns {
        .section__inner {
            padding-top: 17%;
        }
    }

    .sns__ttl {
        transform: translate(-10px, -64%);
        font-size: max(11vw, 35px);
    }

    .section-chara-sns {
        transform: translate(10px, -155%);
    }
}


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

.footer {
    padding: 60px 0;
    position: relative;
    font-size: var(--font16);
    color: var(--black);
    font-weight: var(--weight500);
    border: 1px solid var(--gray02);
    background-color: var(--white);
}

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

    a {
        position: relative;

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

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


.copyright {
    text-align: center;
}

@media screen and (max-width:768px) {
    .footer {
        padding: 40px 0 100px;
    }
}


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

    .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;
        }
    }
}