:root {
    --font-size: 14px;
    --line-height: 1.75;
    --s: 780 * 100;
    --main-color: #172A88;
    --main-font: "Noto Sans JP", sans-serif;
    --en-font: "Inter", sans-serif;

    --sp-large: calc(56vw / var(--s));
    --sp-normal: calc(32vw / var(--s));
}

body {
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    color: var(--main-color);
    width: 100vw;
    overflow-x: hidden;
    font-weight: 400;

    position: relative;

}
@media screen and (max-width: 768px) {
    body {
        font-size: var(--sp-normal);
    }
    
}
img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.btn {
    border-radius: 75px;
    width: 412px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.54px;
    font-weight: bold;

    transition: .5s background-color, .5s color;

    &.-contact {
        background-color: var(--main-color);
        border: 2px solid var(--main-color);

        &:hover {
            background-color: white;
            color: var(--main-color);
        }
    }
    &.-wait {
        background-color: #3EBA39;
        border: 2px solid #3EBA39;

        &:hover {
            background-color: white;
            color: #3EBA39;
        }
    }
}
@media screen and (max-width: 768px) {
    .btns {
        gap: calc(80vw / var(--s));
    }
    .btn {
        width: calc(620vw / var(--s));
        height: calc(120vw / var(--s));
        font-size: calc(32vw / var(--s));
    }
    
}

.gl-header {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    z-index: 1000;
    height: 24px;
    max-width: 1000px;

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    .to-top {
        font-size: 16px;
        font-weight: bold;
        a {
            display: flex;
            align-items: center;
            gap: 15px;
        }
    }

    .sns {
        .sns-close {
            display: none;
        }

        ul {
            display: flex;
            gap: 24px;
            li {
                a {
                    width: 24px;
                    height: 24px;
                    display: block;
                    transition: .5s opacity;

                    &:hover {
                        opacity: 0.7;
                    }
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
    }

    .sns-open {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .gl-header {
        top: calc(178vw / var(--s));
        height: calc(56vw / var(--s));

        .to-top {
            position: absolute;
            top: 0;
            left: calc(44vw / var(--s));
            right: auto;
            bottom: 0;
            font-size: calc(26vw / var(--s));
            transition: .5s opacity, .5s transform;

            a {
                gap: calc(8vw / var(--s));
            }
            svg {
                width: calc(9vw / var(--s));
                height: calc(19vw / var(--s));
            }
        }

        .header-content {
            padding: 0 calc(44vw / var(--s));
            position: relative;
        }
        .sns-open {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: auto;
            right: calc(44vw / var(--s));
            bottom: 0;
            margin: auto;
            font-size: calc(29vw / var(--s));
            width: calc(108vw / var(--s));
            height: calc(48vw / var(--s));
            border-radius: calc(50vw / var(--s));
            background-color: var(--main-color);
            color: white;
            cursor: pointer;
            transition: .5s opacity, .5s transform;
        }

        .sns {
            position: absolute;
            top: 0;
            left: auto;
            right: calc(44vw / var(--s));
            bottom: 0;
            margin: auto;

            opacity: 0;
            pointer-events: none;
            transform: translateX(20px);
            transition: .5s opacity, .5s transform;

            display: flex;
            gap: calc(58vw / var(--s));

            .sns-close {
                width: calc(25vw / var(--s));
                height: calc(50vw / var(--s));
                display: block;
                
                svg {
                    width: 100%;
                    height: 100%;
                }
            }
            ul {
                gap: calc(56vw / var(--s));
                li {
                    a {
                        width: calc(56vw / var(--s));
                        height: calc(56vw / var(--s));
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }   
        }

        
        &.sns-active {
            .sns {
                opacity: 1;
                pointer-events: all;
                transform: translateX(0);
            }

            .sns-open {
                opacity: 0;
                pointer-events: none;
                transform: translateX(-20px);
            }

            .to-top {
                opacity: 0;
                pointer-events: none;
                transform: translateX(-20px);
            }
            
        }

    }
}

.gl-footer {
    background-color: var(--main-color);
    margin-top: 95px;
    padding-top: 58px;
    padding-bottom: 59px;

    .footer-inner {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }

    .footer-logo {
        img {
            width: 197.827px;
            height: auto;
        }
    }
    .footer-content {
        margin-top: 87px;
        display: flex;
        justify-content: space-between;

        align-items: center;
    }
    .footer-sns {
        ul {
            display: flex;
            gap: 24px;
            li {
                a {
                    width: 24px;
                    height: 24px;
                    display: block;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
    }
    .footer-newsletter {
        color: white;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 133.333% */
        letter-spacing: 0.54px;

        a:hover {
            text-decoration: underline;
        }
    }

    .footer-end {
        margin-top: 43px;
        padding-top: 37px;
        border-top: 2px solid white;

        display: flex;
        justify-content: space-between;
    }

    .footer-menu {
        ul {
            display: flex;
            gap: 24px;
            li {
                a {
                    color: white;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .footer-copy {
        color: white;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}
@media screen and (max-width: 768px) {
    .gl-footer {
        padding-top: calc(159vw / var(--s));
        padding-bottom: calc(46vw / var(--s));
        margin-top: calc(227vw / var(--s));

        .footer-inner {
            padding: 0 calc(40vw / var(--s));
        }
        .footer-logo {
            img {
                width: calc(470.507vw / var(--s));
            }
        }
        .footer-content {
            flex-direction: column;
            align-items: flex-start;
            gap: calc(50vw / var(--s));
        }
        .footer-sns {
            ul {
                gap: calc(76.69vw / var(--s));

                li {
                    a {
                        width: calc(79vw / var(--s));
                        height: calc(79vw / var(--s));
                    }
                }
            }
        }
        .footer-newsletter {
            font-size: calc(32vw / var(--s));
            line-height: calc(56vw / var(--s)); /* 175% */
        }
        .footer-end {
            margin-top: calc(50vw / var(--s));
            padding-top: calc(30vw / var(--s));

            flex-direction: column;
            gap: calc(30vw / var(--s));
        }
        .footer-menu {
            ul {
                gap: calc(10vw / var(--s)) calc(40vw / var(--s));
                flex-wrap: wrap;
                li {
                    &:first-child {
                        width: 100%;
                    }
                    a {
                        font-size: calc(32vw / var(--s));
                        font-weight: 400;
                    }
                }
            }
        }
        .footer-copy {
            font-size: calc(32vw / var(--s));
            line-height: calc(56vw / var(--s)); /* 175% */
        }
    }
}

.kv {
    position: relative;
    height: 926px;
    width: 100%;
    overflow: hidden;
}
.kv-images-wrap {
    width: 100vw;
    overflow: hidden;
    position: absolute;
    height: 100%;
    pointer-events: none;
}
.kv-images {
    position: absolute;
    width: 1800px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.kv-image {
    position: absolute;
    opacity: 0;
    transform: translateY(10px);
    transition-timing-function: ease-in;
    transition: 1.2s opacity, 1.2s transform;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;

    }
    &.show {
        opacity: 1;
        transform: translateY(0);
    }
}
.kv-image.-k1 {
    left: -46px;
    top: -121px;
    width: 523px;
    height: 535.93px;

    transition-delay: .2s;
}
.kv-image.-k2 {
    left: 366px;
    top: -270px;
    width: 700.45px;
    height: 706.45px;
    transition-delay: .1s;
}
.kv-image.-k3 {
    left: 809px;
    top: -87px;
    width: 775.22px;
    height: 793px;
    /* transition-delay: .1s; */
}
.kv-image.-k4 {
    left: 1437px;
    top: 8px;
    width: 334px;
    height: 331px;
    transition-delay: .3s;
}
.kv-image.-k5 {
    left: 206px;
    top: 365px;
    width: 445px;
    height: 448px;
    transition-delay: .4s;
}
.kv-image.-k6 {
    left: 1291px;
    top: 513px;
    width: 403px;
    height: 393px;
    transition-delay: .5s;
}

.kv-main {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 126px;
    margin: 0 auto;
    max-width: 331px;
    width: 100%;
}
.kv-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;

    opacity: 0;
    transition: 1.2s opacity, 1.2s transform;
    transition-timing-function: ease-in;
    transition-delay: .6s;

    &.show {
        opacity: 1;
        transform: translateY(0);
    }

    .-sub {
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.8px;
        text-align: center ;
    }
    .-logo {
        width: 328.5px;
    }
}
.kv-provide {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 13px;
    font-family: var(--en-font);
    line-height: normal;

    opacity: 0;
    transition: 1.2s opacity, 1.2s transform;
    transition-timing-function: ease-in;
    transition-delay: .7s;

    &.show {
        opacity: 1;
        transform: translateY(0);
    }

    span {
        font-size: 12px;
    }
    img {
        width: 110.962px;
    }


}
.kv-scroll {
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-family: var(--en-font);
    line-height: normal;


    opacity: 0;
    transition: 1.2s opacity, 1.2s transform;
    transition-timing-function: ease-in;
    transition-delay: .8s;

    &.show {
        opacity: 1;
        transform: translateY(0);
    }
    span {
        font-size: 14px;
    }
    svg {
        width: 8.5px;
        height: 27px;
    }
}

@media screen and (max-width: 768px) {
    .kv {
        height: calc(1808vw / var(--s));
        padding-bottom: calc(152vw / var(--s));
    }
    .kv-images {
        width: 100vw;
        overflow: hidden;
    }
    .kv-image.-k1 {
        top: calc(1365vw / var(--s));
        left: calc(515vw / var(--s));
        width: calc(523vw / var(--s));
        height: calc(535.93vw / var(--s));
    }
    .kv-image.-k2 {
        left: calc(-410vw / var(--s));
        top: calc(-328vw / var(--s));
        width: calc(700.45vw / var(--s));
        height: calc(706.45vw / var(--s));
    }
    .kv-image.-k3 {
        left: calc(248vw / var(--s));
        top: calc(81vw / var(--s));
        width: calc(775.22vw / var(--s));
        height: calc(793vw / var(--s));
    }
    .kv-image.-k4 {
        left: calc(-66vw / var(--s));
        top: calc(350vw / var(--s));
        width: calc(329vw / var(--s));
        height: calc(337vw / var(--s));
    }
    .kv-image.-k5 {
        left: calc(-47vw / var(--s));
        top: calc(1091vw / var(--s));
        width: calc(458vw / var(--s));
        height: calc(461vw / var(--s));
    }
    .kv-image.-k6 {
        left: calc(566vw / var(--s));
        bottom: calc(337vw / var(--s) + (152vw / var(--s)));
        width: calc(364vw / var(--s));
        height: calc(378vw / var(--s));
    }

    .kv-main {
        top: calc(736vw / var(--s));
    }
    .kv-scroll {
        margin-top: calc(522vw / var(--s));
    }
    .kv-logo {
        gap: calc(36vw / var(--s));
        .-sub {
            font-size: calc(30vw / var(--s));
        }
        .-logo {
            width: calc(506.213vw / var(--s));
        }
    }
    .kv-provide {
        margin-top: calc(44vw / var(--s));
        gap: calc(26vw / var(--s));

        span {
            font-size: calc(24vw / var(--s));
        }

        img {
            width: calc(199.731vw / var(--s));
        }
    }
}

.headline {
    position: relative;
}
.headline-inner {

}
.headline-list {
    display: flex;
    justify-content: center;
    gap: 38px;
}
.headline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 306px;
}
.headline-item-title {
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 2.24px;
}
.headline-item-text {
    p {
        font-family: "Noto Sans JP";
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 133.333% */
        letter-spacing: 0.54px;
        text-align: justify;
        }
}
.headline-foot {
    margin-top: 64px;
}
@media screen and (max-width: 768px) {
    .headline-inner {
        padding: 0 calc(40vw / var(--s));
    }
    .headline-list {
        flex-direction: column;
        gap: calc(158vw / var(--s));
    }
    .headline-item {
        width: 100%;
        gap: 0;
    }
    .headline-item-title {
        margin-bottom: calc(70vw / var(--s));
    }
    .headline-item-text {
        margin-top: calc(48vw / var(--s));
        p {
            font-size: calc(32vw / var(--s));
            line-height: calc(56vw / var(--s)); /* 150% */
        }
    }
    .headline-foot {
        margin-top: calc(150vw / var(--s));
    }
}

.news {
    margin-top: 120px;
}
.news-inner {
    background-color: #F2F2F2;
    border-radius: 8px;
    padding: 29px 44px;
    max-width: 840px;
    width: 100%;
    margin: 0 auto;

    display: flex;
    gap: 43px;
}
.news-title {
    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    font-family: var(--en-font);
}
.news-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.news-item {
    display: flex;
    align-items: center;
    gap: 17px;

    time {
        color: #999;
        font-size: 16px;
        line-height: 32px; /* 178.571% */
    }

    p {
        font-size: 16px;
        line-height: 32px; /* 178.571% */
    }
}

@media screen and (max-width: 768px) {
    .news {
        padding: 0 calc(40vw / var(--s));
    }
    .news-inner {
        padding: calc(88vw / var(--s)) calc(63vw / var(--s)) calc(127vw / var(--s));

        flex-direction: column;
        gap: calc(65vw / var(--s));
    }
    .news-title {
        font-size: calc(48vw / var(--s));
    }
    .news-list {
        gap: calc(40vw / var(--s));
    }
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(20vw / var(--s));

        time {
            font-size: calc(32vw / var(--s));
        }
        p {
            font-size: calc(32vw / var(--s));
        }
    }
    
}

.podcast {
    margin-top: 108px;
}
.podcast-title {
    text-align: center;
    font-size: 22px;
    font-family: var(--en-font);
    font-weight: 700;
    line-height: normal;
}
.podcast-text {
    text-align: center;
    font-size: 16px;
    line-height: 32px; /* 178.571% */
    margin-top: 14px;
}
.podcast-tag {
    max-width: 606px;
    width: 100%;
    margin: 37px auto 0;
}

@media screen and (max-width: 768px) {
    .podcast {
        margin-top: calc(200vw / var(--s));
    }
    .podcast-tag {
        padding: 0 calc(40vw / var(--s));
    }
    .podcast-title {
        font-size: calc(48vw / var(--s));
    }
    .podcast-text {
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
    }    
    
}

.information {
    margin-top: 130px;
    background-color: #F2F2F2;
    padding: 58px 0 64px;
    overflow: hidden;
}
.information-inner {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}
.information-head {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
}
.information-title {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    font-family: var(--en-font);
}
.information-text {
    color: var(--TIBUS-BLUE, #172A88);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1.28px;
    text-align: center;
}
.information-body {
    margin-top: 78px;
    display: flex;
    gap: 47px;
    justify-content: center;
}
.information-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: calc(50% - 47px);
}
.information-content-title {
    img {
        width: 100%;
        max-width: 461.323px;
        aspect-ratio: 461.323 / 252;
        margin: auto;
    }
}


.information-content-body {
    .-head {
        background-color: var(--main-color);
        border-radius: 16px 16px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 47px; /* 167.857% */
        color: white;

        padding-top: 22px;
        padding-bottom: 22px;
    }
    .-body {
        padding: 48px 0 73px;
        border-radius: 0 0 16px 16px;
        background-color: white;
    }
    .-boxes {
        display: flex;
        flex-direction: column;
        gap: 68px;
    }

    .-box {
        dt {
            font-size: 16px;
            text-align: center;
            font-weight: 700;
        }
        dd {
            font-size: 22px;
            text-align: center;
            margin-top: 28px;
            font-weight: 700;
        }
    }
    .-boxes2 {
        display: flex;
        flex-direction: column;
        gap: 63px;
    }

    .-box2 {
        dt {
            font-size: 22px;
            text-align: center;
            font-weight: 700;
        }
        dd {
            font-size: 14px;
            text-align: center;
            margin-top: 16px;
        }
        .-img {
            text-align: center;
            margin: 0 0 16px;
            img {
                width: var(--width);
                height: var(--height);
                margin: auto;
            }
        }
    }
    .-border {
        text-align: center;
        margin: 54px 0 61px;
    }

    .companys {
        position: relative;
        height: 936px;
    }
    .companys-head {
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 42px;
    }
    .companys-body {
        
    }
    .swiper-pagination {
        position: relative;
        width: auto;
        bottom: 0;
    }
    .swiper-controls {
        display: flex;
        gap: 16px;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: -48px;
        left: 0;
        right: 0;
    }
    .swiper-pagination-bullet {
        width: 11.52px;
        height: 11.52px;
        margin: 0 7.2px !important;
    }
    .swiper-pagination-bullet-active {
        background-color: var(--main-color);
    }
    .swiper-play-button {
        i {
            width: 13.44px;
            height: 12px;
            display: block;
            &::after {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background-image: url(../images/stop.svg);
                background-size: cover;
            }
        }        
    }
        .swiper-play-button.paused {
            i {
                &::after {
                    background-image: url(../images/play.svg);
                }
            }
    }
    .companys-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 28px;
        width: 100%;
        gap: 32px 0;
    }
    .companys-item {
        width: calc(50% - 28px);
    }
    .companys-item-head {
        img {
            max-width: 110px;
            width: 100%;
            height: 54px;
            margin: auto;
        }
    }
    .companys-item-body {
        text-align: center;
        p {
            font-size: 12px;
            line-height: 18px; /* 150% */
        }
    }
}
@media screen and (max-width: 768px) {
    .information {
        margin-top: calc(286vw / var(--s));
        padding-top: calc(137vw / var(--s));
    }
    .information-title {
        font-size: calc(32vw / var(--s));
    }
    .information-text {
        font-size: calc(72vw / var(--s));
        line-height: normal;
    }
    .information-head {
        gap: calc(29vw / var(--s));
    }

    .information-body {
        margin-top: calc(173vw / var(--s));
        flex-direction: column;
    }
    @media screen and (max-width: 768px) {
        .information {
            margin-top: calc(286vw / var(--s));
            padding-top: calc(137vw / var(--s));
        }
        .information-title {
            font-size: calc(32vw / var(--s));
        }
        .information-text {
            font-size: calc(72vw / var(--s));
            line-height: normal;
        }
        .information-head {
            gap: calc(29vw / var(--s));
        }
    
        .information-body {
            margin-top: calc(173vw / var(--s));
            padding: 0 calc(40vw / var(--s));
        }
        .information-content {
            width: 100%;
            gap: calc(42vw / var(--s));
        }
        .information-content-title {
            img {
                width: calc(512.581vw / var(--s));
                height: calc(280vw / var(--s));
            }
        }
        .information-content-body {
            .-head {
                width: calc(700vw / var(--s));
                height: calc(240vw / var(--s));
                padding: calc(45vw / var(--s)) 0;
                font-size: calc(50vw / var(--s));
            }
            .-body {
                padding: calc(118vw / var(--s)) 0 calc(144vw / var(--s));
            }
            .-boxes {
                gap: calc(138vw / var(--s));
            }
            .-box {
                dt {
                    font-size: calc(32vw / var(--s));
                }
                dd {
                    font-size: calc(56vw / var(--s));
                    margin-top: calc(42vw / var(--s));
                }
            }
            .-box2 {
                dd {
                    margin-top: calc(51vw / var(--s));
                    font-size: calc(32vw / var(--s));
                }
                dt {
                    font-size: calc(56vw / var(--s));
                }
                .-img {
                    margin-bottom: calc(51vw / var(--s));
                }
            }
            .-border {
                margin: calc(150vw / var(--s)) 0 calc(170vw / var(--s));

                svg {
                    width: calc(154vw / var(--s));
                    height: calc(24vw / var(--s));
                }
            }

            .companys-head {
                font-size: calc(56vw / var(--s));
                margin-bottom: calc(90vw / var(--s));
            }
            .companys-list {
                gap: calc(46vw / var(--s)) calc(29vw / var(--s));
            }
            .companys-item-body {
                p {
                    font-size: calc(24vw / var(--s));
                }
            }
            .swiper-controls {
                gap: calc(30vw / var(--s));
                bottom: calc(-100vw / var(--s));
            }
            .swiper-pagination {

            }
            .swiper-pagination-bullet {
                width: calc(24vw / var(--s));
                height: calc(24vw / var(--s));
                margin: 0 calc(30vw / var(--s)) !important;
            }
            .swiper-play-button {
                i {
                    width: calc(28vw / var(--s));
                    height: calc(25vw / var(--s));
                }
            }
        }
    }
}

.interviews {
    margin-top: 120px;
    padding: 0 25px;
}
.interviews-title {
    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}
.interviews-text {
    font-size: 16px;
    line-height: 32px; /* 178.571% */
    margin-top: 14px;
    text-align: center;
}
.interviews-body {
    margin-top: 62px;
    display: flex;
    flex-direction: column;
    gap: 67px;
}

.inteview-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    img {
        width: 100%;
        height: auto;
        aspect-ratio: 17 / 10;
        object-fit: cover;
        object-position: center;
    }

    p {
        font-size: 14px;
        line-height: 25px; /* 178.571% */
    }
}
@media screen and (max-width: 768px) {
    .interviews {
        margin-top: calc(284vw / var(--s));
    }
    .interviews-title {
        font-size: calc(56vw / var(--s));
    }
    .interviews-text {
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
        margin-top: calc(34vw / var(--s));
    }
    .interviews-body {
        margin-top: calc(74vw / var(--s));
        gap: calc(74vw / var(--s));
    }
    .inteview-item {
        gap: calc(24vw / var(--s));

        p {
            font-size: calc(32vw / var(--s));
            line-height: calc(56vw / var(--s)); /* 175% */
        }
    }
}

.sliders {
    width: 100vw;
    overflow: hidden;
    /* スライドの動き等速 */
    .swiper-wrapper {
        transition-timing-function: linear;
    }
    /* 画像のサイズ調整 */
    .swiper-slide img {
        height: auto;
        width: 100%;
    }
}


.outline {
    padding: 134px 0 0;
}
.feature-content {
    
}
.feature-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 11px;
    span {
        font-family: var(--en-font);
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        text-align: center;
    }
    em {
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 1.28px;
        text-align: center;
        font-style: normal;
    }
}
.feature-text {
    margin-top: 24px;
    font-size: 16px;
    line-height: normal;
    text-align: center;
    line-height: 32px; /* 178.571% */
}
@media screen and (max-width: 768px) {
    .outline {
        padding: calc(174vw / var(--s)) 0 0;
    }
    .feature-content {
        padding: 0 calc(40vw / var(--s));
    }
    .feature-title {
        span {
            font-size: calc(32vw / var(--s));
        }
        em {
            font-size: calc(72vw / var(--s));
            line-height: calc(100vw / var(--s)); /* 138.889% */
        }
    }
    .feature-text {
        margin-top: calc(89vw / var(--s));
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
        text-align: justify;
    }
    
}

.backup-content {
    margin-top: 120px;
}
.backup-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 11px;
    span {
        font-family: var(--en-font);
        font-size: 14px;
        font-weight: 700;
        line-height: normal;
        text-align: center;
    }
    em {
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 1.28px;
        text-align: center;
        font-style: normal;
    }
}
.backup-text {
    margin-top: 24px;
    font-size: 16px;
    line-height: normal;
    text-align: center;
    line-height: 32px; /* 178.571% */
}
.backup-img {
    max-width: 802px;
    width: 100%;
    height: auto;
    margin: 90px auto 0;

    figcaption {
        font-size: 14px;
        line-height: 25px; /* 178.571% */
        text-align: center;
    }
}
@media screen and (max-width: 768px) {
    .backup-content {
        margin-top: calc(160vw / var(--s));
        padding: 0 calc(40vw / var(--s));
    }
    .backup-title {
        em {
            font-size: calc(52vw / var(--s));
            line-height: calc(100vw / var(--s)); /* 138.889% */
        }
    }
    .backup-text {
        margin-top: calc(89vw / var(--s));
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
        text-align: justify;
    }
    .backup-img {
        margin-top: calc(93vw / var(--s));
        figcaption {
            margin-top: calc(93vw / var(--s));
            font-size: calc(32vw / var(--s));
            line-height: calc(56vw / var(--s)); /* 175% */
        }
    }
    
}

.catalist {
    display: flex;
    max-width: 749px;
    width: 100%;
    margin: 120px auto 0;
    gap: 35px;
}
.catalist-content {
    width: 372px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.catalist-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 48px; /* 171.429% */
    letter-spacing: 1.12px;
}
.catalist-text {
    font-size: 14px;
    line-height: 25px; /* 178.571% */
    text-align: justify;
}
.catalist-img {
    flex: 1;
}
@media screen and (max-width: 768px) {
    .catalist {
        margin-top: calc(200vw / var(--s));
        gap: calc(40vw / var(--s));
        flex-direction: column;
        padding: 0 calc(40vw / var(--s));
    }
    .catalist-content {
        width: 100%;
        gap: calc(20vw / var(--s));
    }
    .catalist-title {
        font-size: calc(56vw / var(--s));
        line-height: calc(100vw / var(--s)); /* 138.889% */
    }
    .catalist-text {
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
    }
    
}
.asset {
    margin-top: 187px;
    display: flex;
    flex-direction: column;
    gap: 86px;
    align-items: center;
}
.asset-head {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 24px;
}
.asset-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 48px; /* 171.429% */
    letter-spacing: 1.12px;
    text-align: center;
}
.asset-text {
    font-size: 16px;
    line-height: 32px; /* 178.571% */
    text-align: center;
}
.asset-body {
}
.assets {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}
.asset-item {
    width: calc(100% / 3 - 35px);
}
.asset-item-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.54px;
    text-align: center;
    color: white;

    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--main-color);
    border-radius: 8px;
    margin-bottom: 30px;
}
.asset-item-img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;

    img {
        width: var(--width);
        height: 130px;
        margin: auto;
    }
}
.asset-item-text {
    font-size: 16px;
    line-height: 32px; /* 178.571% */
    text-align: justify;
}
@media screen and (max-width: 768px) {
    .asset {
        margin-top: calc(220vw / var(--s));
        padding: 0 calc(40vw / var(--s));
    }
    .asset-head {
        gap: calc(13vw / var(--s));
    }
    .asset-title {
        font-size: calc(52vw / var(--s));
        line-height: calc(84vw / var(--s)); /* 138.889% */
    }
    .asset-text {
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
        text-align: justify;
    }
    .assets {
        gap: calc(95vw / var(--s));
        padding: 0 calc(50vw / var(--s));
    }
    .asset-item {
        width: 100%;
    }
    
}

.place {
    margin-top: 87px;
    width: 100vw;
    overflow: hidden;
    .swiper-wrapper {
        transition-timing-function: linear;
    }
}
.place-head {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 35px;
}
.place-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 48px; /* 171.429% */
    letter-spacing: 1.12px;
    text-align: center;
}
.place-text {
    font-size: 16px;
    line-height: 32px; /* 178.571% */
    text-align: center;
}
.place-body {
    margin-top: 105px;
}

.place-img {
    width: 364px;
    padding: 0 22.5px;

    &:nth-child(2n - 1) {
        margin-top: 149px;
    }
}
@media screen and (max-width: 768px) {
    .place {
        margin-top: calc(187vw / var(--s));
    }
    .place-head {
        gap: calc(77vw / var(--s));
        padding: 0 calc(40vw / var(--s));
    }
    .place-title {
        font-size: calc(52vw / var(--s));
        line-height: calc(84vw / var(--s)); /* 138.889% */
    }
    .place-text {
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
        text-align: justify;
    }
    .place-body {
        margin-top: calc(82vw / var(--s));
    }
    .place-img {
        width: 100%;
        padding: 0 calc(20vw / var(--s));

        &:nth-child(2n - 1) {
            margin-top: calc(52vw / var(--s));
        }
    }
    
}

.media {
    background-color: #F2F2F2;
    padding: 43px 0 73px;
    margin-top: 167px;
}
.media-head {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 24px;
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
}
.media-subtitle {
    font-family: var(--en-font);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}
.media-title {
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.28px;

    text-align: center;
}
.media-body {
    margin-top: 105px;
    max-width: 840px;
    width: 100%;
    margin: 36px auto 0;
}
.media-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 38px 20px;
    background-color: white;
    border-radius: 16px;
    padding: 27px 17px;
}
.media-img {
    width: calc(100% / 5 - 38px);
    max-height: 51px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 122 / 51;

    span, a {
        display: block;
        height: 100%;
        width: 100%;
    }

    a {
        transition: .5s opacity;
        &:hover {
            opacity: 0.5;
        }
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    &:nth-child(5) {
        transform: scale(0.8);
    }
    &:last-of-type {
        transform: scale(1.2);
    }
}
.media-aside {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    line-height: 25px; /* 178.571% */
}
.media-btn {
    margin-top: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}
@media screen and (max-width: 768px) {
    .media {
        margin-top: calc(236vw / var(--s));
        padding: calc(118vw / var(--s)) calc(21vw / var(--s)) calc(200vw / var(--s));
    }
    .media-head {
        gap: calc(30vw / var(--s));
    }
    .media-subtitle {
        font-size: calc(32vw / var(--s));
    }
    .media-title {
        font-size: calc(72vw / var(--s));
        line-height: calc(100vw / var(--s)); /* 138.889% */
    }
    .media-body {
        margin-top: calc(147vw / var(--s));
    }
    .media-imgs {
        gap: calc(89vw / var(--s));
        padding: calc(87vw / var(--s)) calc(55vw / var(--s)) calc(115vw / var(--s));
    }
    .media-img {
        width: calc(100% / 2 - (92vw / var(--s)));

        &:nth-child(2) {
            transform: scale(0.8);
        }
        &:nth-child(5) {
            transform: scale(1);
        }
    }
    .media-aside {
        margin-top: calc(127vw / var(--s));
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
    }
    .media-btn {
        margin-top: calc(105vw / var(--s));
    }
    
    
}

.process {
    margin-top: 140px;
}
.process-head {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 24px;
}
.process-subtitle {
    font-family: var(--en-font);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}
.process-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 48px; /* 171.429% */
    letter-spacing: 1.12px;
    text-align: center;
}
.process-text {
    font-size: 16px;
    line-height: 32px; /* 178.571% */
    text-align: center;
}
.process-body {
    margin-top: 140px;
}
.process-img {
    background-color: #F2F2F2;
    border-radius: 8px;
    max-width: 1000px;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 0 62px;

    img {
        width: 73.3%;
        margin: auto;
    }
}
@media screen and (max-width: 768px) {
    .process {
        margin-top: calc(280vw / var(--s));
        padding: 0 calc(40vw / var(--s));
    }
    .process-head {
        gap: calc(30vw / var(--s));
    }
    .process-subtitle {
        font-size: calc(32vw / var(--s));
    }
    .process-title {
        font-size: calc(72vw / var(--s));
    }
    .process-text {
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
        text-align: justify;
        margin-top: calc(60vw / var(--s));
    }
    .process-body {
        margin-top: calc(243vw / var(--s));
    }
    .process-img {
        padding: calc(70vw / var(--s)) calc(22.5vw / var(--s)) calc(62vw / var(--s));

        img {
            width: 100%;
        }
    }
    
}

.faq {
    max-width: 765px;
    width: 100%;
    margin: 70px auto 0;
}
.faq-title {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.28px;
    text-align: center;
    margin-bottom: 40px;
}
.faq-list {
}
.faq-item {
    border-top: 2px solid var(--main-color);
    padding: 27px 0;
    &:last-child {
        border-bottom: 2px solid var(--main-color);
    }
}
.faq-item-head {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.54px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    svg {
        transition: transform 0.5s;
    }
}
.faq-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;

    p {
        margin-top: 20px;
        font-size: 16px;
        line-height: 32px; /* 178.571% */
    font-style: normal;
    font-weight: 400;
    text-align: justify;
    }
}

.active {
    svg {
        transform: rotate(180deg);
    }

    .faq-item-body {
        max-height: 1000px;
    }
}

.faq-aside {
    margin-top: 30px;
    font-size: 16px;
    line-height: 32px; /* 178.571% */
}
.faq-footer {
    margin-top: 96px;
}

@media screen and (max-width: 768px) {
    .faq {
        margin-top: calc(330vw / var(--s));
        padding: 0 calc(40vw / var(--s));
    }
    .faq-title {
        font-size: calc(72vw / var(--s));
    }
    .faq-list {
        margin-top: calc(124vw / var(--s));
    }
    .faq-item-head {
        font-size: calc(32vw / var(--s));
        p {
            padding-right: calc(76vw / var(--s));
            letter-spacing: calc(2.56vw / var(--s));
        }
    }
    .faq-item-body {
        font-size: calc(32vw / var(--s));
        line-height: calc(56vw / var(--s)); /* 175% */
    }
    .faq-aside {
        margin-top: calc(112vw / var(--s));
        font-size: calc(32vw / var(--s));
    }
    .faq-footer {
        margin-top: calc(184vw / var(--s));
    }
    
}