@charset "utf-8";

/* 色の変数　　color: var(--blue); */
:root {
    --white: #fff;
    --white02: rgba(255, 255, 255, 0.5);
    --black: #000;
    --black02: #333333;
    --gray: #656565;
    --orange01: #f59f6d;
    --orange02: #fdf3ee;
    --orange03: #fce9de;
    --orange04: #cc8e7c;
    --orange05: rgba(245, 159, 109, 0.2);
    --orange06: rgba(245, 159, 109, 0.5);
    --orange07: rgba(252, 233, 222, 0.4);


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

    /* 書式 */
    --notoSans: "Noto Sans JP", sans-serif;
    --zenOld: "Zen Old Mincho", serif;
    --cinzel: "Cinzel", serif;
    --zenAntique: "Zen Antique Soft", serif;

    /* 文字サイズ */
    --font12: clamp(10px, 0.18vw + 9.43px, 12px);
    --font13: clamp(10px, 0.27vw + 9.14px, 13px);
    --font16: clamp(13px, 0.27vw + 12.14px, 16px);
    --font17: clamp(14px, 0.27vw + 13.14px, 17px);
    --font18: clamp(14px, 0.36vw + 12.86px, 18px);
    --font19: clamp(15px, 0.36vw + 13.86px, 19px);
    --font21: clamp(16px, 0.45vw + 14.71px, 21px);
    --font22: clamp(16px, 0.54vw + 14.29px, 22px);
    --font23: clamp(16px, 0.63vw + 13.86px, 23px);
    --font24: clamp(17px, 0.625vw + 15px, 24px);
    --font26: clamp(19px, 0.80vw + 14.43px, 26px);
    --font27: clamp(17px, 0.89vw + 14.14px, 27px);
    --font28: clamp(18px, 0.89vw + 15.14px, 28px);
    --font29: clamp(18px, 0.98vw + 14.86px, 29px);
    --font31: clamp(20px, 0.98vw + 16.86px, 31px);
    --font35: clamp(22px, 1.16vw + 18.29px, 35px);
    --font40: clamp(23px, 1.52vw + 18.14px, 40px);
    --font43: clamp(23px, 1.79vw + 17.29px, 43px);
    --font48: clamp(25px, 2.05vw + 18.43px, 48px);
    --font58: clamp(27px, 2.77vw + 18.14px, 58px);
    --font72: clamp(30px, 3.75vw + 18.00px, 72px);
    --font99: clamp(47px, 5.98vw + 12.86px, 99px);

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

    /* 行間 */
    --lineHight120: 1.2;
    --lineHight175: 1.75;
    --lineHight20: 2.0;

    /* 文字間 */
    --fontSpace050: 0.05em;
    --fontSpace080: 0.08em;
    --fontSpace130: 0.13em;
    --fontSpace150: 0.15em;

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

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

    --opacity07: .7;


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

}


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


}

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



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

body {
    color: var(--black);
    font-family: var(--zenOld);
    font-weight: var(--weight700);
    font-size: var(--font17);
    line-height: var(--lineHight120);

    a,
    .hamburger,
    .btn,
    .pagiBtn,
    .aco-click {
        transition: var(--transition01);

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

p {
    text-align: justify;
    font-size: var(--font16);
    line-height: var(--lineHight175);
    font-family: var(--notoSans);
    font-weight: var(--weight400);
    letter-spacing: var(--fontSpace080);
}

.section {
    position: relative;
}

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

    padding: clamp(50px, 8.68%, 125px) 0;


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


    @media screen and (min-width: 901px) and (max-width: 1300px) {
        padding-left: 70px !important;
        padding-right: 70px !important;
    }
}

.section__ttl {
    display: flex;
    flex-direction: column;
    font-size: var(--font99);
    align-items: center;
    line-height: 1;

    .en {
        color: var(--orange01);
        font-family: var(--cinzel);
        font-weight: var(--weight500);
    }

    .ja {
        position: relative;
        font-size: var(--font23);
        padding-left: 1.2em;
        margin-top: 1em;

        &::before {
            position: absolute;
            content: "";
            width: 0.869em;
            height: 2px;
            background-color: var(--black);
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }

    @media screen and (max-width: 480px) {
        .ja {
            margin-top: 0.3em;
            font-size: min(3.5vw, 26px);

            &::before {
                height: 1px;
            }
        }
    }
}

.push {
    display: inline-block;
}

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

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

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

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

    &::before {
        position: absolute;
        content: "◯";
        font-size: 1em;
        top: 0;
        left: 0;
    }
}

.verticalTtlFlex {
    display: flex;

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

.verticalTtlFlex__ttl {
    font-size: var(--font35);
    margin-right: 12.7%;
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    gap: 0.57em;

    span {
        writing-mode: vertical-rl;
    }

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

    @media screen and (max-width:768px) {
        margin: 0 auto 30px;
        flex-direction: column;
        gap: 0.2em;
        width: min(100%, 600px);

        span {
            writing-mode: initial;
        }
    }
}

.flexList {
    display: flex;
    justify-content: center;
    counter-reset: num;

    @media screen and (max-width:768px) {
        width: min(100%, 400px);
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 50px !important;
    }
}

.flexList__item {
    position: relative;
    counter-increment: num;
    flex: 1;



    .img {
        position: relative;
        margin-bottom: 20px;

        &::before {
            position: absolute;
            content: counter(num, decimal-leading-zero);
            top: 0;
            left: 0;
            color: var(--orange01);
            font-size: var(--font28);
            line-height: 1;
        }
    }

    @media screen and (max-width:768px) {
        flex: initial;
        width: 100%;
        margin-top: 0 !important;

        .img {
            width: min(100%, 250px);
            margin: 0 auto 10px;
        }
    }

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

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

.list {
    li {
        position: relative;
        font-size: var(--font16);
        padding-left: 1em;

        &::before {
            position: absolute;
            content: "・";
            top: 0;
            left: 0;
            font-size: 1em;
            line-height: var(--lineHight175);
        }
    }
}


.block768,
.block374 {
    display: none;
}



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

    .none768 {
        display: none;
    }
}

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

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


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

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

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

.btn {
    display: block;
    position: relative;
    text-align: center;
    color: var(--black02);
    background-color: var(--white);
    font-size: var(--font18);
    border: 1px solid var(--black);
    width: 100%;
    height: 100%;
    transition: var(--transition01);
    cursor: pointer;
    padding: 5px;
}

.btn__inner {
    border: 1px solid var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.arrow {
    position: absolute;
    top: 50%;
    right: 0;
    width: clamp(50px, 24.14%, 110px);
    height: 1px;
    background-color: var(--black);
    transform: translate(55%, 0);

    &::before {
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        background-color: var(--black);
        width: 35%;
        height: 1px;
        transform-origin: top right;
        transform: rotate(35deg);
    }
}

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

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

    .btn__inner {
        border-radius: var(--borderRadiusCircle);
    }

    .arrow {
        right: 50%;
        transform: translate(50%, -50%);
    }

    @media screen and (max-width: 480px) {
        .btn {
            padding: 2px;
        }
    }
}









/*******************************************
追従ボタン
*******************************************/
.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(--black);
        border: 1px solid var(--black);
        transition: var(--transition01);

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

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

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

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

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





/*******************************************
entryBox-fixed
*******************************************/
.entryBox-fixed {
    position: fixed;
    top: 50%;
    right: 0;
    width: 70px;
    aspect-ratio: 70/509;
    display: flex;
    flex-direction: column;
    z-index: 10;
    transform: translate(101%, -50%);
    transition: var(--transition01);
    opacity: 0;
    visibility: hidden;

    &.show {
        transform: translate(0%, -50%);
    }

    @media screen and (max-width:900px) {
        width: min(95%, 500px);
        flex-direction: row;
        aspect-ratio: initial;
        top: auto;
        right: auto;
        left: 50%;
        bottom: 2%;
        transform: translateX(-50%);
        height: 60px;

        &.show {
            transform: translateX(-50%);
        }
    }
}

.entryBtn {
    aspect-ratio: 70/210;
    writing-mode: vertical-rl;


    &:last-child {
        aspect-ratio: initial;
        flex: 1;

        a {
            background-color: var(--white);
            border-top: none;
        }
    }

    a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--font18);
        background-color: var(--orange03);
        border: 1px solid var(--black);
    }

    @media screen and (max-width:900px) {
        writing-mode: initial;
        aspect-ratio: initial;
        flex-basis: 40%;

        &:last-child {
            aspect-ratio: initial;
            flex-basis: initial;

            a {
                border-top: 1px solid var(--black);
                border-left: none;
            }
        }
    }

    @media screen and (max-width:340px) {
        a {
            font-size: 13px;
        }
    }

}






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

.header {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 clamp(15px, 2.43vw, 30px) 0 clamp(15px, 2.43vw, 35px);
    height: var(--headerHeight);
    z-index: 95;
    transition: var(--transition01);

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

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

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

    @media screen and (max-width:1024px) {
        backdrop-filter: initial;
    }
}

.header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    width: clamp(250px, 25vw, 360px);

    a {
        display: flex;
        flex: 0 0 calc(274 / 360 * 100%);
        height: 100%;
        transition: var(--transition01);

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

    .txt {
        display: block;
        flex: 1;
        margin-left: 3.2%;
        margin-top: 2.2%;
    }

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

        .txt {
            margin-top: 0;
        }
    }
}



.hamburger {
    display: block;
    position: relative;

    width: 130px;
    aspect-ratio: 130/50;
    cursor: pointer;
    z-index: 100;
    transition: var(--transition01);
    background-color: var(--black);
    margin-left: auto;
    border-radius: var(--borderRadiusCircle);


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

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

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

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

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


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

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

    @media screen and (max-width:1100px) {
        font-size: min(2.7vw, 20px);
        padding: min(20.7vw, 150px) 4.15vw 2vh;
    }

    @media screen and (max-width:480px) {
        width: 100%;
        align-items: center;
        font-size: initial;
        padding: 150px 80px 2vh;
    }

    @media screen and (max-width:374px) {
        padding-top: 31vw;
    }
}

.headerNav__item {
    margin: 0 0 5svh;
    font-size: 20px;

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

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

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

    @media screen and (max-width:1100px) {
        font-size: 1em;

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

        .btn {
            font-size: 1em;

            .arrow {
                width: 20%;
            }
        }
    }

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

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

        .btn {
            /* リセット */
            font-size: var(--font18);

            .arrow {
                width: clamp(50px, 24.14%, 110px);
            }
        }
    }
}

.active {
    .line {

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

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

    }

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

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




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

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





/*******************************************
mv
*******************************************/
.mv {
    margin-top: var(--headerHeight);
    font-size: 4.166666vw;

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

.mv__top {
    position: relative;
    width: 100%;
}

.mv__loop {
    width: 90.28%;
    margin-left: auto;


}

.loopSwiper__list {
    transition-timing-function: linear;
    gap: 1.1805vw;
}

.mv__txt {
    position: absolute;
    left: 2%;
    bottom: 0;
    writing-mode: vertical-rl;
    font-size: 0.2166em;
    font-family: var(--zenAntique);
    font-weight: var(--weight400);
    padding-top: 1.4em;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/mv/icon.svg);
        background-repeat: no-repeat;
        background-size: contain;
        aspect-ratio: 1;
        width: 1.007em;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }


}

.mv__bottom {
    position: relative;
    padding: 0.83em 0 0 0.8em;


}

.mv__ttl {
    position: relative;
    z-index: 1;
    letter-spacing: 0.04em;

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

}

.mvParts {
    position: absolute;
    top: -260%;
    right: -11%;
    width: 10.5em;
    aspect-ratio: 1;
}

.footer-parts span,
.mvParts {

    animation: rotate 70s linear infinite;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/common/circle01.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}

.mv__circle {
    position: absolute;
    top: 0;
    right: 0;
    width: 13.54%;
    aspect-ratio: 1;
    transform: translate(-41%, -37%);
    z-index: 1;

    .arrow {
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%) rotate(90deg);
        width: 36%;
        height: 1.5px;

        &::before {
            height: 1.5px;
        }
    }
}



.mv__circle {
    .img {
        animation: rotate 15s linear infinite;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.mv__txt--sp {
    display: none;
}

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

    .mv {
        font-size: 9.4vw;
    }

    .mv__loop {
        width: 200%;
    }

    .mv__bottom {
        padding: 5vw 0 0 2vw;
    }

    .mv__ttl {
        line-height: 1.4;
    }

    .mv__txt {
        position: relative;
        writing-mode: initial;
        left: 2vw;
        padding: 0 0 0 1.3em;
        margin-top: 2em;
        font-size: 0.3em;

        &::before {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }

    .mv__txt--pc {
        display: none;
    }

    .mv__txt--sp {
        display: block;
    }

    .mv__circle {
        width: 25%;
        transform: translate(-16%, -47%);
    }

    .mvParts {
        top: -85%;
        right: -16%;
        width: 6.5em;
    }
}

/*******************************************
message
*******************************************/
.message {
    padding: clamp(65px, 10%, 140px) 0 clamp(80px, 14%, 200px);

    .section__inner {
        position: relative;
        padding: 0;
        width: min(100%, 1440px);
    }

    .section__ttl {
        width: fit-content;
        margin-left: auto;
        align-items: flex-end;

        .en {
            position: relative;

            &::before {
                position: absolute;
                content: "MESSAGE";
                font-size: 1em;
                top: 0;
                left: 0;
                color: var(--orange01);
                mix-blend-mode: multiply;
            }
        }
    }

    @media screen and (max-width: 768px) {
        padding-bottom: clamp(140px, 10%, 165px);

        .section__ttl {
            margin: 0 auto;
            align-items: center;
        }
    }
}

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

.message__inner01 {
    padding-top: clamp(30px, 6%, 60px);

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

.message__top {
    position: relative;
    padding-right: clamp(30px, 6%, 60px);

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

.message__topMain {
    padding-right: 1.7%;

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

.message__txtBox {
    display: flex;
    flex-direction: row-reverse;
    margin-top: clamp(30px, 6%, 60px);
    gap: 30px;

    p {
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: var(--font18);
        letter-spacing: var(--fontSpace080);
        line-height: 1.77;

        .dq01 {
            display: inline-block;
            height: 0.5em;
            transform: translateX(0.25em);
        }

        .dq02 {
            display: inline-block;
            transform: translate(-0.3em, 0.3em);
            height: 0.9em;
        }

        .tcy {
            display: inline-block;
            text-combine-upright: all;
            transform: translate(-0.15em, -0.1em);
        }
    }

    @media screen and (max-width:768px) {
        justify-content: center;
        gap: 15px;
    }

}

.btn-outer-message {
    margin: clamp(40px, 6%, 65px) 0 0 auto;
    width: min(100%, 390px);

    @media screen and (max-width:768px) {
        margin-left: auto;
        margin-right: auto;
        width: min(80%, 350px);

        .arrow {
            width: 20%;

            &::before {
                width: 30%;
            }
        }
    }

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

        .btn__inner {
            padding: 0 2em;
        }
    }

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

}

.message__imgBox {
    position: absolute;
    top: 0;
    left: 0;
    width: min(48.19444vw, 694px);

    .img01 {
        width: min(86.46%, 600px);
    }

    .img02 {
        width: min(60.52%, 420px);
        margin: -21.5% 0 0 auto;
    }


    @media screen and (max-width:768px) {
        position: relative;
        margin: 10% auto 0;
        width: min(90%, 700px);

        .img01 {
            width: min(60%, 350px);
        }

        .img02 {
            width: min(50%, 280px);
            margin: -12% 0 0 auto;
        }
    }

    @media screen and (max-width:480px) {
        .img02 {
            margin: -16% 0 0 auto;
        }
    }
}

.message__logoBox {
    position: relative;
    width: 39.48%;
    aspect-ratio: 1;
    background-color: var(--white);
    aspect-ratio: 1;
    border-radius: var(--borderRadiusCircle);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5.8px 5.8px 4.1px rgba(0, 0, 0, 0.1);
    margin: -9% 0 0 9%;
    z-index: 1;

    .img {
        width: 88.32%;
    }

    @media screen and (max-width:768px) {
        position: absolute;
        top: 0;
        right: 0;
        width: 30%;
        margin: 0;
    }
}


.featureBox {
    margin-top: max(11.7%, 50px);
}

.featureList {
    flex: 1;
    gap: 6.33%;

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

.flexList__item {
    font-size: max(var(--font19), 17px);

    &:nth-child(2) {
        margin-top: 6.33%;
    }

    &:nth-child(3) {
        margin-top: 11.6%;
    }
}

.featureList__detail {
    dt {
        margin-bottom: 0.5em;
        line-height: 1.73;
    }

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

        dt {
            margin-bottom: 0.4em;
            text-align: center;
            line-height: 1.5;
        }

    }
}

.message-parts01 {
    position: absolute;
    left: -1.5%;
    bottom: -11%;
    width: clamp(150px, 29.791vw, 429px);

    .txt {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 11px;
        transform: translate(-5%, -90%);
    }

    @media screen and (max-width:1200px) {
        bottom: -7%;

        .txt {
            transform: none;
        }
    }

    @media screen and (max-width:768px) {
        bottom: -6%;
        width: max(22%, 170px);

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

    @media screen and (max-width:600px) {
        .txt {
            transform: translate(69%, -67%);
            text-align: left;
            line-height: 1.2;
        }
    }
}






/*******************************************
job
*******************************************/

.job {
    &::before {
        position: absolute;
        content: "";
        background-color: var(--orange02);
        top: 0;
        left: 0;
        width: max(87.5vw, 300px);
        height: 100%;
        z-index: -1;
    }

    .section__inner {
        position: relative;
        padding: clamp(50px, 9%, 130px) 0 clamp(50px, 12%, 165px);
    }

    .section-container {
        margin-top: max(6.4%, 30px);
    }


}

.jobBtnFlex02-outer {
    padding: clamp(50px, 9%, 130px) 0 clamp(90px, 20%, 245px);
}

.jobBtnFlex {

    display: flex;
    gap: clamp(15px, 3.125vw, 45px);


    li {
        position: relative;
        flex: 1;
    }

    .btn-outer-circle {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 16.5%;
        transform: translate(-10%, 50%);
    }

    .arrow {
        width: 40%;
    }

    @media screen and (max-width:768px) {
        flex-direction: column;
        width: min(100%, 400px);
        gap: 50px;
        margin: 0 auto;

        li {
            flex: initial;
            width: 100%;
        }
    }
}

.jobBtnFlex__txtBox {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0.95em, 0.65em);
    font-size: var(--font48);

    span {
        display: block;
    }

    .main {
        margin-bottom: 0.2em;
        letter-spacing: var(--fontSpace080);
    }

    .small {
        font-size: 0.39em;
    }

    @media screen and (max-width:768px) {
        span {
            text-shadow:
                0 0 3px var(--white),
                0 0 8px var(--white),
                0 0 16px var(--white),
                0 0 24px rgba(255, 255, 255, .8);
        }
    }
}

.jobSwiper-tab {
    overflow: visible;
}

.jobSwiper-tab__list {
    .btn-outer-circle {
        right: auto;
        left: 0;
        transform: translate(45%, 50%) rotate(90deg);
    }

    .swiper-slide {
        cursor: pointer;
        transition: var(--transition01);

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

    .jobBtnFlex__txtBox {
        .main {
            margin: 0.41em 0 0;
        }
    }

    @media screen and (max-width:768px) {
        .swiper-slide {
            flex: initial;
            width: 100%;
        }

        .jobBtnFlex__txtBox {
            .main {
                margin: 0.2em 0 0;
            }
        }
    }

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

.jobSwiper-cont {
    padding: clamp(60px, 14%, 170px) 0 0;
    overflow: visible;
}


.jobSwiperTop {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(20px, 6.94vw, 100px);
    width: min(100%, 1176px);
    margin: 0 auto;

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

.jobSwiperTop__txtBox {
    flex: 1;
}

.jobSwiperTop__ttl {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: max(0.416em, 15px);
    font-size: var(--font72);
    margin-bottom: max(0.76em, 15px);


    &::before {
        position: absolute;
        content: "";
        background-color: var(--orange01);
        height: 3px;
        width: 0.97em;
        bottom: 0;
        left: 0;
    }

    .small {
        font-size: var(--font19);
        margin-bottom: 1.02em;
    }

    .main {
        letter-spacing: var(--fontSpace080);
    }

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

        .small {
            font-size: 13px;
            margin-bottom: 5px;
        }
    }

}

.jobSwiperTop__imgBox {
    width: min(41.6666vw, 600px);

    .img {
        width: 85.33%;
    }

    .img02 {
        width: 49.33%;
        margin: -32% 0 0 auto;
    }

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

        .img {
            width: 60%;
        }

        .img02 {
            width: 50%;
            margin: -37% 0 0 auto;
        }
    }
}

.jobStaff {
    width: min(100%, 1220px);
    margin: max(8.3%, 50px) 0 0 auto;

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

.jobStaff__item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: max(8.2%, 50px);
    gap: 4.86vw;

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

    &:nth-child(even) {
        margin-left: min(19.7vw, 285px);
    }

    .img {
        width: clamp(200px, 28.47vw, 410px);
    }

    @media screen and (max-width: 1024px) {
        &:nth-child(even) {
            margin-left: 10vw;
        }
    }

    @media screen and (max-width: 800px) {
        &:nth-child(even) {
            margin-left: 0;
        }
    }

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

.jobStaff__detail {
    flex: 1;
    max-width: 450px;
    font-size: var(--font40);
    padding-top: min(2.430vw, 35px);

    dt {
        line-height: 1.25;
        margin-bottom: 1em;
        letter-spacing: var(--fontSpace150);
    }

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

        dt {
            text-align: center;
            margin-bottom: 0.5em;
        }
    }
}

.btn-outer-jobStaff {
    margin: 11.11% 0 0 auto;

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

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

.jobData {
    margin: max(14.3%, 50px) 0 0 auto;
    width: min(100%, 1204px);

}

.jobDataList {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

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

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

.jobDataList__item {
    display: flex;
    flex-direction: column;
    min-height: 298px;
    width: calc(100%/3);
    padding: 35px 20px 30px;
    border: 1px solid var(--black);
    background-color: var(--orange02);

    &:nth-child(2) {
        margin-top: 4.1%;
    }

    &:nth-child(3) {
        margin-top: 8.2%;
    }

    @media screen and (max-width: 768px) {
        min-height: initial;
        margin: 0 !important;
        width: 100%;

        &:not(:first-child) {
            border-top: none;
        }
    }

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

.jobDataList__detail {
    display: flex;
    flex-direction: column;
    font-size: var(--font26);


    dt {
        font-size: 1em;
        letter-spacing: var(--fontSpace080);
        text-align: center;
        margin-bottom: 20px;

        .small {
            font-size: 0.76em;
        }
    }

    dd {
        .img {
            width: 104.59%;
            margin: 0 auto;
        }

        p {
            &:first-child {
                text-align: center;
                line-height: 1.125;
                margin-bottom: 10px;
            }

            &:last-child {
                font-size: var(--font13);
            }
        }
    }

    @media screen and (max-width: 768px) {
        dd {
            .img {
                width: min(90%, 200px);
            }
        }
    }
}

.jobData__txt {
    width: min(100%, 750px);
    margin: 35px auto 0;
}

.btn-outer-jobSwiper {
    width: min(80%, 980px);
    height: 90px;
    margin: 60px auto 0;

    .btn {
        background-color: var(--orange03);
        font-size: var(--font27);
    }

    .btn__inner {
        padding: 0 1em;
    }
}

.btn-outer-back {
    display: none;

    @media screen and (max-width: 768px) {
        display: block;
        margin: 0 12.5% 0 auto;
        width: min(100%, 200px);
    }

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

    @media screen and (max-width: 330px) {
        margin-right: 9%;
    }
}


/*******************************************
interview
*******************************************/
.interview {
    .section__inner {
        padding: clamp(50px, 10%, 135px) 0px clamp(50px, 10%, 85px);
        border-top: 1px solid var(--orange04);
    }

    @media screen and (max-width: 768px) {
        .section__inner {
            padding-top: max(18vw, 85px);
        }
    }
}

.interviewList {
    gap: clamp(50px, 7.638vw, 110px);
    margin: clamp(30px, 7.638vw, 110px) auto 0;

}

.interviewList__main {
    padding: 20px 0 0;

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

.interview__txtBox {
    .label {
        background-color: var(--orange01);
        color: var(--white);
        font-size: var(--font18);
        padding: 5px 15px;
        display: inline-block;
        font-family: var(--zenAntique);
        font-weight: var(--weight400);
    }

    .ttl {
        font-size: var(--font26);
        line-height: 1.73;
        margin: 0.57em 0;
    }

    .txt {
        text-align: left;
        color: var(--orange01);
    }
}

.btn-outer-interview {
    width: min(100%, 162px);
    height: auto;
    margin: 20px 0 0 auto;

    .btn {
        border: none;
        padding: 0 0 8px 5px;
        font-size: var(--font16);
    }

    .btn__inner {
        border: none;
        align-items: flex-start;
    }

    .arrow {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: none;

        &::before {
            width: 20px;
        }
    }

    @media screen and (max-width: 768px) {
        width: min(100%, 120px);
        margin-right: 5vw;

        .arrow {
            &::before {
                width: 15px;
            }
        }
    }
}

.interview-parts01 {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(150px, 18.6vw, 269px);
    transform: translateY(-21%);

    p {
        font-size: 11px;
        margin-top: 3px;

        span {
            display: block;
            width: fit-content;
            margin-left: auto;
        }
    }

    @media screen and (max-width: 768px) {
        width: max(30vw, 165px);

        p {
            font-size: 9.5px;
        }
    }
}



/*******************************************
environment
*******************************************/
.environment {
    background-color: var(--orange02);

    .section__inner {
        padding: clamp(50px, 11%, 150px) 0 clamp(50px, 13%, 175px);
        width: min(100%, 1075px);
    }
}

.environmentList {
    display: flex;
    flex-direction: column;
    margin: clamp(30px, 10%, 100px) auto 0;

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

.environmentList__item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: var(--font29);
    margin-bottom: 5.34em;

    .img {
        width: clamp(250px, 36.1vw, 520px);
    }

    &:nth-child(even) {
        margin-left: 3.44em;
    }

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


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

        &:nth-child(even) {
            margin-left: 0;
        }
    }
}

.environment__detail {
    font-size: 1em;
    flex: 1;
    margin-left: 1.89em;

    dt {
        margin-bottom: 0.68em;

        .number {
            display: block;
            font-size: var(--font23);
            margin-bottom: 0.9em;
        }

        .ttl {
            line-height: 1.379;
        }
    }


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

        dt {
            margin-bottom: 0.5em;

            .number {
                margin-bottom: 5px;
            }
        }
    }

}





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

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

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

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

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

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

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

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

/* モーダル箱の最大幅 */
.modal__inner {
    position: relative;
    width: min(100%, 1440px);
    margin: 0 auto;
}


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

.modalItem-outer {
    background-color: var(--white);
    padding: clamp(50px, 5.9%, 80px) 0 clamp(50px, 11.46%, 165px);

    &::before,
    &::after {
        position: absolute;
        content: "";
        background-image: url(../img/company/bg.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        aspect-ratio: 1093/474;
        width: clamp(400px, 75.9vw, 1093px);
    }

    &:after {
        transform: translateX(-50%) rotate(-180deg);
        top: auto;
        bottom: 0;
    }
}

.modalItem {
    width: 100%;
}

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

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


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


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

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

.modalClose-bottom {
    position: relative;
    z-index: 1;
    margin: max(10.42%, 70px) auto 0;

    .btn {
        background-color: transparent;
    }

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


/*******************************************
modal company
*******************************************/
.modal-company {
    background-color: var(--orange02);

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


    .modalItem-outer {
        background-color: var(--orange02);
    }

    .modalItem__inner {
        width: min(100%, 1440px);
    }


}

.companyTop {
    position: relative;
    font-size: var(--font43);

    .icon {
        display: block;
        width: 2.48em;
        margin: 0 auto;
    }
}

.company__ttl {
    font-size: 1em;

    .small {
        display: block;
        width: fit-content;
        margin: 0.55rem auto 1.29em;
        padding-bottom: max(0.35em, 5px);
        font-size: var(--font27);
        border-bottom: 2px solid var(--orange01);
    }

    .main {
        display: block;
        text-align: center;
    }
}

.companyMain {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: clamp(30px, 8.68vw, 125px) auto 0;
    gap: clamp(25px, 6.9vw, 100px);


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

.companyMain__imgBox {
    width: clamp(300px, 49.583vw, 714px);

    .img01 {
        width: 78.29%;
    }

    .img02 {
        width: 49.16%;
        margin: -3.5% 0 0 auto
    }

    .img03 {
        width: 27.45%;
        margin: -22% 0 0 17%;
    }

    @media screen and (max-width:768px) {
        width: max(66vw, 300px);

        .img01 {
            width: 65%;
        }

        .img02 {
            width: 45%;
            margin: -23.5% 0 0 auto;
            margin-top: -23.5%;
        }

        .img03 {
            margin: -13% 0 0 20%;
        }
    }


}

.companyMain__txtBox {
    flex: 1;
    padding-top: min(5.59%, 35px);

    p {
        line-height: 2.33;
        font-size: var(--font18);
        margin-bottom: clamp(20px, 7.18%, 45px);
        text-align: left;

        &:last-child {
            line-height: 1.98;
            font-size: var(--font23);
            margin-bottom: 0;
        }
    }

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

        p {
            line-height: var(--lineHight175);
            text-align: center;

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




/*******************************************
modal-routine
*******************************************/
.modal-routine {


    .modal__inner {
        position: relative;

        &::after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            background-color: var(--orange02);
            width: 100vw;
            aspect-ratio: 1440/100;
            max-height: 100px;
            min-height: 50px;
        }

        &::before {
            position: absolute;
            content: "1DAY ROUTINE";
            top: 0;
            left: 50%;
            transform: translate(-50%, 27%);
            font-size: clamp(50px, 7.08333vw, 102px);
            letter-spacing: 0.075em;
            color: var(--orange06);
            width: 100%;
            text-align: center;
            font-family: var(--cinzel);
            font-weight: var(--weight500);
            z-index: 1;
            transition: var(--transition01);
        }

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

    .modalItem-outer {
        padding-top: clamp(80px, 15.63%, 225px);


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

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

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

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

}

.routine__ttl {
    font-size: var(--font48);
    letter-spacing: var(--fontSpace150);
    text-align: center;
    margin-bottom: max(6.11%, 30px);

    .sub {
        position: relative;
        display: block;
        margin: 0 auto;
        font-size: var(--font28);
        padding: 0 max(0.35em, 4px);
        width: fit-content;

        &::before,
        &:after {
            position: absolute;
            content: "";
            left: 0;
            top: 50%;
            transform: translate(-100%, -50%);
            width: max(1.07em, 15px);
            height: 1px;
            background-color: var(--black);
        }
    }

    .main {
        display: block;
        margin-top: 0.5em;
    }
}

.routineBox {
    border: 1px solid var(--black);
    padding: 10px;

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

.routineBox__inner {
    border: 1px solid var(--black);
    padding: 55px 75px 85px;

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

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

.routineBox__ttl {
    font-size: var(--font35);
    letter-spacing: var(--fontSpace150);
    text-align: center;
}

.routineDetail {
    margin-top: 9%;
    overflow: hidden;
}

.routineDetail__item {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 1.45em;
    font-size: var(--font24);

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

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

    dt {
        position: relative;
        background-color: var(--orange05);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1em;
        width: 6.9em;
        height: max(1.91em, 35px);
        color: var(--gray);
        margin-right: 35px;

    }

    dd {
        position: relative;
        flex: 1;
        font-size: var(--font22);
        padding-left: 35px;

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

        &::after {
            position: absolute;
            content: "";
            top: 0.9em;
            left: 0;
            height: 200%;
            width: 1px;
            background-color: var(--orange01);
        }

        p {
            font-size: 1em;
            line-height: 2;
            text-align: left;
        }
    }

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

        dt {
            position: relative;
            margin: 0;
        }

        dd {
            padding: 0;

            p {
                line-height: var(--lineHight175);
            }

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

    @media screen and (max-width:480px) {
        dt {
            width: 5.7em;
            height: 25px;
        }
    }
}



/*******************************************
modal-interview
*******************************************/
.modal-interview {

    .modal__inner {
        position: relative;

        &::before {
            position: absolute;
            content: "";
            aspect-ratio: 855/615;
            width: clamp(200px, 61.45833vw, 885px);
            background-image: url(../img/interview/modal-bg01.png);
            background-repeat: no-repeat;
            background-size: contain;
            top: 0;
            right: 0;
            transform: none;
            z-index: 1;
        }


    }

    .modalItem-outer {
        padding: clamp(80px, 11.11%, 165px) 0 clamp(80px, 13.54%, 195px);


        &::before {
            position: absolute;
            content: "INTERVIEW";
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
            line-height: 1;
            width: 100vw;
            font-size: min(15.76388vw, 227px);
            color: var(--orange03);
            letter-spacing: var(--fontSpace080);
            font-family: var(--cinzel);
            font-weight: var(--weight500);
            text-align: center;
        }

        &:after {
            background-image: url(../img/interview/modal-bg02.png);
            aspect-ratio: 1092/555;
            width: clamp(400px, 75.9vw, 1092px);
            transform: translateX(-50%);
            top: auto;
            bottom: 0;
        }

    }

    .modalItem {
        position: relative;
        z-index: 1;
    }
}

.modalMv {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: var(--font31);
    gap: 1.29em;
    padding-bottom: max(9.5%, 30px);
    border-bottom: 1px solid var(--orange01);

    .img {
        width: clamp(300px, 31.94vw, 460px);
    }

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

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

.modalMv__txtBox {
    font-size: 1em;
    width: fit-content;
    padding-top: min(8.3vw, 120px);

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

    .ttl {
        font-size: 1em;
    }

    .txt {
        font-size: var(--font17);
        color: var(--gray);
    }

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

.modalMain {
    width: min(100%, 900px);
    margin: max(11%, 40px) auto 0;
}

.modalQuestion {

    dt {
        position: relative;
        font-size: var(--font26);
        line-height: 1.73;

        &::before {
            position: absolute;
            content: "";
            background-image: url(../img/interview/icon01.png);
            background-repeat: no-repeat;
            background-size: contain;
            top: 0;
            left: 0;
            aspect-ratio: 75/76;
            width: 2.88em;
            z-index: -1;
            transform: translate(-70%, -38%);
        }
    }

    dd {
        font-size: var(--font19);
        padding: 10px 0 100px;

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

        p {
            font-size: 1em;
        }
    }

    @media screen and (max-width:768px) {
        dt {
            &::before {
                transform: translate(-30%, -38%);
            }
        }
    }

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

        dt {
            line-height: 1.5;

            &::before {
                width: 2.2em;
                transform: translate(-40%, -15%);
            }
        }

        dd {
            padding: 5px 0 40px;

        }
    }

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

}

.trajectoryBox {
    margin: max(11.5%, 40px) auto 0;
}

.trajectoryBox__ttl {
    font-size: var(--font31);
    text-align: center;
    margin-bottom: 30px;

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

.trajectoryDetail__item {
    font-size: var(--font21);
    display: flex;
    align-items: first baseline;
    justify-content: flex-start;
    padding: 35px;

    &:nth-child(odd) {
        background-color: var(--orange07);
    }

    dt {
        width: 8em;
    }

    dd {
        font-size: var(--font19);
        flex: 1;

        p {
            font-size: 1em;
        }
    }

    @media screen and (max-width:480px) {
        padding: 30px 15px;
        flex-direction: column;

        dt {
            margin-bottom: 10px;
            width: 100%;
        }
    }
}

.modal-interview03 {
    .trajectoryDetail__item {

        &:last-child {
            dt {
                line-height: 2;
            }
        }
    }

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

            &:last-child {
                dt {
                    line-height: var(--lineHight150);
                }
            }
        }
    }
}


/* 追加 */
.modal-interview {
    .modalClose-bottom {
        margin-top: 45px;
    }

    @media screen and (max-width:480px) {
        .modalClose-bottom {
            margin-top: 20px;
        }
    }
}

.interviewModal-smallTxt {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: var(--font16);
    margin-top: clamp(40px, 5.208vw, 80px);

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

.btn-outer-interviewModal {
    position: relative;
    z-index: 1;
    margin: max(10.42%, 70px) auto 0;

    .btn {
        background-color: #fef6f2;
    }

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

.modal-company,
.modal-routine {

    .btn-outer-interviewModal,
    .interviewModal-smallTxt {
        display: none;
    }
}



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

:root {
    --foterNavGap: min(2.43vw, 35px);
}

.footer {
    position: relative;
}

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

.footer__img {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;

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

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

    @media screen and (max-width:1000px) {
        width: 30%;
    }

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

}

.footer-nav-outer,
.footer__main {
    width: min(100%, 675px);

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

.footer__main {
    font-size: var(--font58);
    padding: 3em 20px 2.32em;

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

.footer__txtBox {
    font-size: 1em;

    p {
        font-size: 1em;
        font-family: var(--zenOld);
        font-weight: var(--weight700);
        line-height: 1.74;
        letter-spacing: var(--fontSpace130);
        text-align: center;
    }
}

.btn-outer-footer {
    margin: 5.58em auto 0;
    font-size: var(--font24);
    width: min(100%, 17.79em);
    height: 80px;

    .btn {
        font-size: 1em;
    }

    .arrow {
        max-width: 88px;
    }

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

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

.footer-nav-outer {
    padding: clamp(40px, 4%, 50px) clamp(10px, 4%, 60px);
    font-size: var(--font13);

    p {
        font-size: 1em;
        font-family: var(--zenOld);
        margin-top: 1em;
        font-weight: var(--weight400);
    }

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

    @media screen and (max-width:480px) {
        padding-left: 7%;
        padding-right: 7%;

        p {
            text-align: center;
        }
    }
}

.footer-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--foterNavGap);

    a {
        position: relative;
        width: fit-content;
        font-weight: var(--weight400);

        &::before {
            position: absolute;
            content: "";
            width: 1px;
            height: 100%;
            background-color: var(--black);
            right: calc((-1*(var(--foterNavGap)/2)) - 1px);
            top: 0;
        }

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

    @media screen and (max-width:480px) {
        gap: 5px 15px;
        justify-content: center;
        flex-wrap: wrap;

        a {
            &::before {
                right: -8.5px;
            }
        }
    }
}

.footer-parts {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(200px, 39.3vw, 1000px);
    aspect-ratio: 1;
    transform: translate(-28%, -32%);
    z-index: -1;

    span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

}