.p-mainvisual {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    &__swiper {
        transition-timing-function: linear;
        &-slide {
            position: relative;
            overflow: hidden;
            height: 100vh;
            min-height: 660px;
            img {
                width: 100%;
                height: 100%;
                object-position: top;
                object-fit: cover;
            }
        }
        .swiper-wrapper img {
            width: 100%;
          }

    }
    &__container.swiper-container {
        padding-bottom: 5px;
        position: relative;
    }

    &__progress {
        position: absolute;
        left: 0;
        bottom: 3px;
        width: 0;
        height: 8px;
        background: $brand-color;
        z-index: 70;
        transition: linear;
    }

    &__scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal {
        width: 100%;
        background: #e0eeea;
        left: 0;
        height: 6px;
        .swiper-scrollbar-drag {
            border-radius: 0;
            background-color: $brand-color;
        }
    }

    &__text {
        position: absolute;
        width: 100%;
        padding: 1rem;
        text-align: center;
        top: clamp(rem(140), 11.98vw, rem(230));
        left: 50%;
        transform: translateX(-50%);
        font-family: $font-family-noto;
        font-size: clamp(rem(50), 3.65vw, rem(70));
        font-weight: 700;
        z-index: 50;
        color: #fff;
        text-shadow: 0px 0px 3px #000;
    }

    &__buttons {
        position: absolute;
        display: flex;
        gap: 0 45px;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
    }
}

// Phone
// --------------------------------------------------
@include media-breakpoint-sp {
    .p-mainvisual {
        &__swiper {
            &-slide {
                max-height: 100vh;
                height: 138vw;
                min-height: 580px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        &__buttons {
            bottom: 5%;
            gap: 0 12px;
            flex-wrap: wrap;
            flex-direction: row-reverse;
            justify-content: center;

        }

        &__text {
            font-size: rem(32);
            top: 140px;
            // line-height: 1.3;
         }
    }
}