@charset "utf-8";

.gjs-dashed .card-name {
    opacity: 1;
}

.gjs-dashed .swiper-slide {
    width: 25%;
    padding: 15px;
}

.gjs-dashed .swiper-wrapper {
    flex-wrap: wrap;
    height: auto;
}

.gjs-dashed .coverWr {
    height: auto;
}

.gjs-dashed .topFvSliderBox {
    overflow: unset;
}

.gjs-dashed .swiperCard {
    padding: 15px;
}

.gjs-dashed .card-img:before {
    display:none;
}

.card-img {
    position: relative;
}

.card-img:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:#001537;
    opacity:0.25;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    mix-blend-mode:multiply
}

.swiper-slide.swiper-slide-active .card-img:before {
    display:none;
}

.coverWr {
    padding: 80px 0 10vw 0 !important;
    height: 120vw;
}

.swiper-container-wrapper {
    max-width: 1500px;
    width: 100%;
    padding: 0 0 16px;
    margin: 0 auto;
    overflow: hidden;
}

.swiper {
    padding: 10px 0 40px;
}

.card-img {
    transition: 1s;
    border-radius: unset !important;
}

.card-img > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.swiper-slide-active .card-img {
    background: #6A6A6A;
    background: linear-gradient(133deg, rgba(106, 106, 106, 1) 0%, rgba(160, 160, 160, 1) 25%, rgba(224, 224, 224, 1) 50%, rgba(160, 160, 160, 1) 75%, rgba(106, 106, 106, 1) 100%);
    padding: 10px;
}

.card-name {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.45em;
    color: #fff;
    padding: 10px 10px 0;
    opacity: 0;
    transition: 1s;
}

.swiper-slide-active .card-name {
    opacity: 1;
}

@media screen and (min-width:544px) {

.coverWr {
    height: 110vw;
}

}/* min-width: 1600px ここまで */

@media screen and (min-width:768px) {

.swiper-slide {
    width: 33.33%;
    transition: 1s;
}

.swiper-slide-prev,
.swiper-slide-next {
    z-index: 9;
}

.swiper-slide-active {
    width: 50% !important;
    transform: translateY(40px) !important;
    margin: 0 -8.33%;
    z-index: 99;
}

.card-name {
    font-size: 16px;
}

.coverWr {
    padding: 70px 0 10vw 0 !important;
    height: 75vw;
}

.swiper-slide-active .card-img {
    padding: 15px;
}
  
}/* min-width: 768px ここまで */

@media screen and (min-width:1024px) {

.swiper {
    padding: 10px 0 85px;
}

.swiper-slide {
    width: 20%;
}

.swiper-slide-prev,
.swiper-slide-next {
    transform: translateY(50px) !important;
}

.swiper-slide-prev {
    margin-left: -6.66%;
}

.swiper-slide-next {
    margin-right: -6.66%;
}

.swiper-slide-active {
    width: 42% !important;
    transform: translateY(85px) !important;
    margin: 0 -4.33%;
}

.swiper-slide-active .card-img {
    padding: 15px;
}

.card-name {
    font-size: 20px;
    padding: 15px 15px 0;
}

.coverWr {
    padding: 70px 0 10vw 0 !important;
    height: 65vw;
}

}/* min-width: 1024px ここまで */


@media screen and (min-width:1200px) {

.coverWr {
    padding: 90px 0 10vw 0 !important;
    height: 65vw;
}

}/* min-width: 1200px ここまで */


@media screen and (min-width:1600px) {

.coverWr {
    padding: 110px 0 10vw 0 !important;
    height: 905px;
}

}/* min-width: 1600px ここまで */