@charset "UTF-8";

/*//////////////////// SWIPER ////////////////////////*/

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    font-size: 2rem;
    background: rgba(0, 0, 0, .8);
    color: var(--color-non);
    padding: 1.5rem 2rem;
}

.swiper-pagination-bullet-active {
    background: var(--color-basic);
}

.swiper figcaption {
    font-size: 1.6rem;
    font-weight: 400;
    margin: 1rem 0;
}

.e152 .swiper figcaption {
    font-size: 1.6rem;
    font-weight: 400;
    background: var(--color-basic);
    color: var(--color-non);
    padding: 1rem 0;
    margin: 0;
}

/*//////////////////// SWIPER basic ////////////////////////*/

.basic {
    width: 100%;
    margin: 0 auto;
    /*background: radial-gradient( circle at 30% 30%, rgb(255 255 255), rgb(245 245 245 / 100%));*/
}

.basic .swiper-slide {
    min-height: 400px;
    opacity: 0.4;
    overflow: hidden;
    transition: .7s;
}

.basic .swiper-slide-active {
    opacity: 1;
    z-index: 1;
    transform: scale(1);
}

.basic .slide-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: 2rem auto;
    /*background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .6)) 100%;*/
}

.e1 .basic .swiper-wrapper {
    height: 50vh;
}

.e16 .basic .swiper-wrapper {
    height: 50vh;
}

.e242 .basic,
.e243 .basic {
    background: var(--color-pale);
    padding: 4rem;
}

.e242 .basic .slide-wrap,
.e243 .basic .slide-wrap {
    background: var(--color-pale);
}

@media (min-width: 821px) {

    .e16 .basic .swiper-wrapper {
        height: 100vh;
    }

}

/*//////////////////// SWIPER loop ////////////////////////*/

.loop {
    overflow: hidden;
}

.loop .swiper {
    overflow: visible;
    padding: 0 3.2rem;
}

.loop .swiper-slide {
    overflow: hidden;
    box-sizing: border-box;
    height: auto;
    border-radius: 4px;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-transition: var(--transition), opacity 1s;
    transition: var(--transition), opacity 1s;
}

.loop .swiper-slide:not(.swiper-slide-visible) .slide-wrap {
    pointer-events: none;
    opacity: 0.3;
}

.loop .loop-inner {
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden;
}

@media (min-width: 821px) {

    .loop .loop-inner {
        padding: 2rem 10rem;
    }

    .loop .loop-inner {
        overflow-x: visible;
    }

}

.loop .contents-img {
    position: relative;
    overflow: hidden;
    padding-top: 62.5%;
}

.loop .contents-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

@media (min-width: 1025px) {

    .loop .slide-wrap img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .loop .slide-wrap:hover img {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

}

.loop .contents-text {
    padding: 2rem;
}

.loop h3 {
    padding: 0;
}

.loop h3 span {
    display: block;
    font-family: var(--font-family-ja);
}

.loop .intro-text {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
}

.loop .swiper .swiper-wrapper {
    box-sizing: inherit;
}

/*//////////////////// SWIPER mv ////////////////////////*/

.mv {
    position: relative;
    width: 100%;
    height: 80vh;
}

.mv .swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.mv .swiper-slide video {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/*//////////////////// SWIPER thumb ////////////////////////*/

.thumb {
    overflow: hidden;
}

.thumb .swiper {
    overflow: visible;
}

.thumb .swiper-fade .swiper-slide {
    -webkit-transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, transform !important;
    transition-property: opacity, transform, -webkit-transform !important;
    pointer-events: none;
}

.thumb .swiper-fade .swiper-slide-active {
    pointer-events: auto;
}

.thumb .swiper-button-prev,
.thumb .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
}

.thumb .swiper-button-prev {
    right: calc(100% + 3.2rem);
}

.thumb .slide {
    display: block;
    overflow: hidden;
}

.thumb .slide-media img {
    -o-object-fit: contain;
    object-fit: contain;
}

.thumb .slide-title {
    font-size: 1.6rem;
    font-weight: 400;
}

.thumb .thumb-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.thumb .thumb-media {
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    width: calc((100% - 60px) / 4);
}

.thumb .thumb-media img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.thumb .thumb-media-active {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    opacity: 0.3;
}

@media (min-width: 821px) {

    .thumb .thumb-media {
        width: calc((100% - 140px) / 8);
    }

}

/*//////////////////// SWIPER img ////////////////////////*/

.slide_01 {
    background: url(/content/images/1/carousel/01s.jpg) no-repeat center/cover;
}

.slide_02 {
    background: url(/content/images/1/carousel/02s.jpg) no-repeat center/cover;
}

.e16 .slide_01 {
    background: url(/content/images/16/carousel/01.jpg) no-repeat center/cover;
}

.e16 .slide_02 {
    background: url(/content/images/16/carousel/02.jpg) no-repeat center/cover;
}


@media (min-width: 821px) {

    .slide_01 {
        background: url(/content/images/1/carousel/01.jpg) no-repeat center/cover;
    }

    .slide_02 {
        background: url(/content/images/1/carousel/02.jpg) no-repeat center/cover;
    }

}