.p-mainVisual {
    width: 100%;
    height: calc(1080 / 1920 * 100vw);
    overflow: clip;
}

@media not all and (min-width: 960px) {
    .p-mainVisual {
        height: calc(454 / 375 * 100vw);
    }
}

.p-mainVisual__inner {
    height: 100% !important;
}

.p-mainVisual__slide {
    height: 100% !important;
}

.p-mainVisual__bg {
    background-color: #5EA8E1;
    height: 100% !important;
    display: grid;
    justify-items: flex-start;
}

.p-mainVisual__imgLayer:after {
    display: none;
}

@media not all and (min-width: 960px) {
    .p-mainVisual__imgLayer>svg {
        width: auto !important;
        height: 100% !important;
    }
}

.p-mainVisual__imgLayer path {
    fill: #6EADE2;
    opacity: 0.9;
}


.p-mainVisual__logo {
    transform: translateY(5px);
    position: absolute;
    inset: 0;
}

@media not all and (min-width: 960px) {
    .p-mainVisual__logo {
        display: grid;
        justify-items: flex-end;
    }
}

@media not all and (min-width: 960px) {
    .p-mainVisual__logo>svg {
        width: 100%;
        height: auto !important;
    }
}

.p-mainVisual__logo>svg>g:first-of-type>g:nth-of-type(2)>g>path {
    fill: #5EA8E1;
}

.p-mainVisual__wave {
    transform: translateY(5px);
    position: absolute;
    inset: 0;
}

@media not all and (min-width: 960px) {
    .p-mainVisual__wave {
        display: grid;
        justify-items: flex-end;
        align-items: flex-end;
    }
}

@media not all and (min-width: 960px) {
    .p-mainVisual__wave>svg {
        width: 150% !important;
        height: auto !important;
    }
}

.main-text-box {
    top: -18vw;
}

.main-text-box .main-text {
    font-size: min(48px, 4vw);
    letter-spacing: 0;
    line-height: 1.5;
}

@media not all and (min-width: 960px) {
    .main-text-box {
        top: 20vw;
    }
}

.p-mainVisual__waveText {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s, opacity 1s;
    opacity: 0;
}

.p-mainVisual__waveText.is-show {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}