@charset "utf-8";

/* ==================================================================
	mainvisual用のCSS
=================================================================== */

/* =================================
   ■ メインビジュアル
================================== */
.accentBox {
    height: 590px;
    overflow: hidden;
    margin-bottom: 60px;
}

.contents .mainArea {
    width: 100%;
    max-width: 1500px;
}

/* ◇ mainArea
-------------------------------- */
.accentBox .mainArea.mv_slider {
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 590px;
}
.accentBox .slick-dotted.slick-slider {
    margin-bottom: 0;
}
.accentBox .slick-slider,
.accentBox .slick-slider .slick-track,
.accentBox .slick-slider .slick-list {
    height: 100%;
}


.accentBox .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accentBox .slick-num {
    color: #36353D;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    position: absolute;
    right: 138px;
    bottom: 4%;
    text-align: center;
}
.accentBox .slick-prev,
.accentBox .slick-next {
    color: #36353D;
    font-size: 0;
    top: auto;
    bottom: 4%;
    left: auto;
    right: 208px;
    z-index: 1;
    width: auto;
    height: auto;
    padding: 6px 0;
    transition:.4s;
    transform: none;
  }
    .accentBox .slick-next {
        right: 52px;
    }
    .accentBox .slick-prev:before {
        content: none;
    }
    .accentBox .slick-prev:after,
    .accentBox .slick-next:before {
        content:'PREV';
        color: #36353D;
        font-size: 1.4rem;
        font-family: 'EB Garamond', serif;
        font-weight: 500;
        letter-spacing: 0.08em;
        opacity: 1;
        padding: 0 10px;
        line-height: 1;
    }
    .accentBox .slick-next:before {
        content:'NEXT';
    }
    .accentBox .slick-prev:hover,
    .accentBox .slick-next:hover {
        opacity: 0.7;
    }

.accentBox .catch {
    position: absolute;
    bottom: 30px;
    left: 4%;
    text-align: left;
}
    .accentBox .catch h2 {
        font-size:2.8rem;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    .accentBox .catch p {
        font-size: 1.6rem;
        margin-bottom: 0;
        line-height: 2;
    }

/* ◇ subArea
-------------------------------- */
.accentBox .subArea.mv_movie {
    margin: 0 auto;
    padding: 0;
    position: relative;
}
    .accentBox .subArea.mv_movie video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.accentBox .subArea.mv_movie .buttonStyle.arrow {
    position: absolute;
    right: 15px;
    bottom: 15px;
}
    .accentBox .subArea.mv_movie .buttonStyle.arrow a {
        font-size: 1.3rem;
        letter-spacing: 0.06em;
        color: #111;
    }
@media (max-width: 1600px) and (min-width: 768px) {
    .accentBox .wrapper {
        width: auto;
        margin-left: 0%;
        margin-right: 0%;
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .accentBox .catch {
        bottom: 10%;
    }
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {
}


@media only screen and (max-width : 767px) {
    .accentBox {
        height: auto;
        margin-bottom: 30px;
    }
    .accentBox .flexbox {
        flex-direction: column;
    }
    .accentBox .mainArea.mv_slider,
    .accentBox .subArea.mv_movie {
        width: 100%;
        min-width: 100%;
        height: auto;
    }
    .accentBox .slick-prev {
        left: 4%;
        bottom: 4%;
    }
    .accentBox .slick-next {
        right: 4%;
        bottom: 4%;
    }
    .accentBox .slick-num {
        display: none;
    /*  bottom: 4%;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    */
    }

    .accentBox .catch {
        width: 92%;
        bottom: auto;
        top: 4%;
    }
        .accentBox .catch h2 {
            font-size: 2.2rem;
        }
        .accentBox .catch p {
            font-size: 1.4rem;
        }

    .accentBox .subArea.mv_movie {
        position: relative;
        width: 100%;
        padding-top: 124%;
    }

    .accentBox .subArea.mv_movie .buttonStyle.arrow a {
        padding-right: 15px;
    }

}