html {
    /* 1920px時: 1rem = 10px */
    /*font-size:0.520833vw;*/
    font-size: clamp(8px, 0.520833vw, 10px);
}

body.top header {
    padding-bottom: 1rem;
    border-bottom: none;
}

/* ============================================================
   KV Layout
   ============================================================ */

.kv__top {
    height: calc(50vh - 1rem);
    min-height: 47rem;
    padding-top: 1rem;
    box-sizing: border-box;
    position: relative;


}

/* ============================================================
   Video Area
   ============================================================ */
.kv__bottom {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================================
   Product Slider
   ============================================================ */
.productSwiper {
    height: calc(100% - 14rem);
    /* PC時はドラッグ不可のためデフォルトカーソル（Swiperのgrabを上書き） */
    cursor: default !important;
}

.productSwiper .swiper-wrapper,
.productSwiper .swiper-slide {
    cursor: default !important;
}

.productSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.productSwiper .swiper-slide {
    width: 81rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.6s ease;
}

.productSwiper .swiper-slide.swiper-slide-active {
    opacity: 1;
}

/* ループ位置の瞬時リセット時はフェードを止めて二重フェードインを防ぐ */
.productSwiper.is-normalizing .swiper-slide {
    transition: none !important;
}


.product-slider__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    width: 100%;
    height: 100%;
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.product-slider__info {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 5rem;
    /*gap: 1.563vw;*/
    /* 30px */
}

.product-slider__name {
    font-size: 3rem;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-weight: 700;
    text-align: start;
}

.product-slider__figure {
    max-width: 38rem;
    max-height: 31rem;
    height: 100%;
}

.product-slider__figure.is-bottom {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2.3rem;
}

.product-slider__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-slider__figure.is-bottom .product-slider__image {
    height: auto;
}

.product-slider__badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10rem;
}

.product-slider__new {
    width: 12.1rem;
    height: auto;
}
.productSwiper .swiper-slide[data-index="3"] .product-slider__info {
    min-width: 22rem;
}
.productSwiper .swiper-slide[data-index="4"] .product-slider__content {
    justify-content: flex-start;
}

.productSwiper .swiper-slide[data-index="4"] .product-slider__name {
    width: 32rem;
}

.productSwiper .swiper-slide[data-index="4"] .product-slider__image {
    max-width: 34rem;
}

/* ============================================================
   Thumbnail Slider
   ============================================================ */
.thumbSwiper {
    height: 8rem;
    margin-top: 1rem;
}

.thumbSwiper .swiper-wrapper {
    justify-content: center;
}

.thumbSwiper .swiper-slide {
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.6s ease;
}

.thumbSwiper .swiper-slide.is-active {
    opacity: 1;
}

/* 初期フェードイン中 */
.kv.is-intro-active .productSwiper {
    opacity: 0;
}

.kv.is-intro-active .thumbSwiper .swiper-slide {
    opacity: 0;
    transition: none;
}

/* 初期フェードイン終了後 */
.kv.is-intro-done .thumbSwiper .swiper-slide {
    opacity: 0.4;
}

.kv.is-intro-done .thumbSwiper .swiper-slide.is-active {
    opacity: 1;
}

.thumbSwiper .swiper-slide,
.thumbSwiper .swiper-slide img {
    height: 8rem;
    width: auto;
}

/* ============================================================
   KV Info Banner
   ============================================================ */
.kv-info {
    position: absolute;
    bottom: -4.4rem;
    /*top: 50%;
    transform: translateY(-50%);*/
    z-index: 20;
    overflow: hidden;
    background-color: transparent;
}

.kv-info__bg {
    position: absolute;
    inset: 0;
    background-color: #0085d5;
    z-index: 0;
    transform-origin: left center;
    will-change: transform;
}

.kv-info__inner {
    position: relative;
    z-index: 1;
    will-change: transform, opacity;
}

.kv-info__txt {
    padding: 2rem 3rem 2rem 30px;
}

.kv-info__ttl {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 3rem;
    font-weight: 800;
    display: inline-block;
    padding-right: 3rem;
}

.kv-info__date {
    color: #fff;
    font-size: 2.4rem;
    font-family: "Roboto", sans-serif;
    padding-right: 1em;
}

.kv-info__place {
    color: #fff;
    font-size: 1.6rem;
    display: inline-block;
}

.kv-info__txt--sp {
    display: none;
}

@media (max-width: 932px) {

    .productSwiper .swiper-slide {
        width: 90rem;
        height: 100%;
    }

    body.top header {
        padding: 1rem 1.5rem;
    }

    .kv-info__txt--pc {
        padding: 2rem 3rem 2rem 4rem;
    }

    .kv-info__ttl {
        font-size: 3rem;
        padding-right: 3rem;
    }

    .kv-info__date {
        font-size: 2.4rem;
    }

    .kv-info__place {
        font-size: 1.6rem;
    }

    .productSwiper {
        height: calc(100% - 13rem);
    }

    .product-slider__content {
        max-width: 100%;
    }

    .product-slider__badge {
        top: -10rem;
    }

    .product-slider__new {
        width: 13.4rem;
    }

    .product-slider__name {
        font-size: 3rem;
    }

    .productSwiper .swiper-slide[data-index="4"] .product-slider__content {
        justify-content: center;
    }

    .productSwiper .swiper-slide[data-index="4"] .product-slider__image {
        width: 100%;
    }

    .thumbSwiper {
        height: 8rem;
        margin-top: 1rem;
    }

    .thumbSwiper .swiper-slide,
    .thumbSwiper .swiper-slide img {
        height: 8rem;
    }
}

@media (max-width: 605px) {
    .kv-info {
        bottom: -7.2rem;
    }

    .productSwiper .swiper-slide {
        width: 70rem;
    }

    .product-slider__new {
        width: 11rem;
    }

    .product-slider__name {
        font-size: 2.2rem;
    }

    .product-slider__figure {
        max-width: 35rem;
        max-height: 28rem;
    }
}

/* ============================================================
   SP Styles
   ============================================================ */
@media (max-width: 480px) {
    html {
        font-size: 2.325581vw;
        /* 430px時 = 1rem = 10px */
    }

    body.top header {
        padding: 1rem 1.5rem;
    }

    .kv__top {
        height: 50vh;
        min-height: 44.5rem;
        padding-top: 0;
    }

    .productSwiper {
        height: calc(100% - 6.6rem);
        margin-top: 0;
        cursor: grab !important;
    }

    .productSwiper .swiper-wrapper,
    .productSwiper .swiper-slide {
        cursor: grab !important;
    }

    .productSwiper .swiper-slide {
        width: 100%;
        height: 100%;
        align-items: flex-end;
        width: 30rem;
    }

    /*.product-slider .swiper-slide {
        width: 300px;
        height: 100%;
    }*/

    .product-slider__content {
        display: grid;
        justify-items: center;
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "name";
        gap: 1rem;
        height: 100%;
        padding-top: 2.5rem;
        padding-bottom: 4rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .product-slider__info {
        display: contents;
    }

    .product-slider__badge {
        top: 3rem;
        left: unset;
        right: 4rem;
    }

    .product-slider__new {
        width: 7rem;
    }


    .product-slider__image {
        max-height: 100%;
        height: unset;
    }

    .productSwiper .swiper-slide[data-index="0"] .product-slider__badge{
        top: 7rem;
        right: 1rem;
        left: unset;
    }

    .productSwiper .swiper-slide[data-index="3"] .product-slider__badge{
        right: 1rem;
    }
    .productSwiper .swiper-slide[data-index="4"] .product-slider__badge {
        top: 8rem;
        right: 1rem;
        left: unset;
    }

    .product-slider__figure {
        grid-area: image;
        height: 26.6rem;
        display: flex;
        align-items: flex-end;
        padding-top: 4.5rem;
        height: 24rem;
    }

    .productSwiper .swiper-slide[data-index="4"] .product-slider__name {
        width: 100%;
    }

    .productSwiper .swiper-slide[data-index="4"] .product-slider__image {
        width: 25rem;
    }

    .productSwiper .product-slider__figure.is-bottom {
        padding-bottom: 1rem;
    }

    .product-slider__name {
        grid-area: name;
        font-size: 1.9rem;
    }

    .thumbSwiper {
        display: none;
    }

    .kv-info {
        bottom: -6.6rem;
    }

    .kv-info__txt,
    .kv-info__txt--sp {
        display: block;
        padding: 2rem 2rem 2.1rem 1.5rem;
    }

    .kv-info__txt .kv-info__ttl {
        font-size: 2.4rem;
        line-height: 1;
        padding: 0 0 0.5rem;
    }

    .kv-info__txt .kv-info__date {
        font-size: 1.8rem;
        line-height: 1.5;
        display: block;
    }

    .kv-info__txt .kv-info__place {
        font-size: 1.5rem;
        padding: 0;
    }

    .kv__bottom {
        height: 50%;
        overflow: hidden;
    }

    .kv__bottom img,
    .kv__bottom video {
        width: 100%;
        height: 100%;
        height: 50vh;
        object-fit: cover;
        display: block;
    }
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

section.sep#news > div:last-child,
section.sep > div {
    width: 100%;
}

.leaflet-wrap {
    /*grid-column: 1 / -1;*/
}

a.leaflet {
    width: 300px;
}

section.leaflet-wrap div {
    /*width: 50%;*/
}

@media (max-width: 480px) {
    main {
        grid-template-columns: 1fr;
    }

    section.leaflet div {
        width: 100%;

    }
}