

.u-effect[data-effect=cover] {position: relative;z-index: 0; transition: -webkit-filter .2s ease-in-out; transition: filter .2s ease-in-out; transition: filter .2s ease-in-out, -webkit-filter .2s ease-in-out}
.u-effect[data-effect=cover]:before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 100%; background-color: var(--color_white); transition: width .33s var(--easing_hover); -webkit-transform: translateZ(0); transform: translateZ(0); z-index: -1}
.u-effect[data-effect=cover]:hover { -webkit-filter: brightness(1.2); filter: brightness(1.2)}

.mv_library { width: 1280px; max-width: 1280px; margin: auto;}
.mv_library .slick-slide:hover { -webkit-filter: brightness(1.15); filter: brightness(1.15); transition: .3s;}
.mv_library a { cursor: pointer; transition: .3s;}
.mv_library img { width: 976px; height:400px;}

.mv_library .slick-dots li button:before{font-family: 'slick'; font-size: 10px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color:  var(--color_green); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.mv_library .slick-dots li.slick-active button:before{opacity: 1; color: var(--color_green);}
.mv_library .slick-track {display: flex;}
.mv_library .slick-slide { opacity: 1; transition: opacity 0.4s ease-in-out;}
.mv_library .slick-slide[aria-hidden="true"] { opacity: 0.2;}
.mv_library .slick-slide.slick-center,
.mv_library .slick-slide.slick-cloned.slick-center { opacity: 1;}

.cardArea {margin-top: 100px;}
.cardArea > ul > li {width:24%;}
.cardArea > ul > li img{width: 100%; height:133px;}
.cardArea dl dt{ text-decoration: underline; font-weight: normal; font-size: 16px;}

.slick-arrow { display:none;}
.mv_library a { align-items: center; justify-content: center; position: relative;}
.slick-prev { left: 15px; z-index: 5;}
.slick-next { right: 15px; z-index: 5;}
.slick-prev, .slick-next { width: 8%; height: 100%; z-index: 10;}
.slick-prev.slick-arrow{left:0px;}
.slick-next.slick-arrow{right:0px;}
.slick-prev:before,.slick-next:before{content: "";}
.slick-prev::after,.slick-next::after {content: ""; display: block; width: 30px; height: 30px; border-top: 8px solid #FFF; border-right: 8px solid #FFF; opacity: 0.75;}
.slick-prev::after { position: absolute; top: 50%; left: 45%; transform: rotate(225deg);}
.slick-next::after { position: absolute; top: 50%; right: 45%; transform: rotate(45deg);}
.responsive:not(.slick-initialized) { visibility: hidden; height: 0; overflow: hidden;}

@media (max-width: 1280px) {
.mv_library { width: 100%; max-width:100%; margin: auto; height:auto;}
.mv_library img { width:100%; height:auto;}
}

@media (max-width: 640px) {
.cardArea > ul{width: 95vw; margin-left:14px;}
.cardArea > ul > li { flex: 0 0 calc(50% - 8px); margin-bottom:5px;}
.cardArea { margin-top:40px;}
.slick-prev::after{left:35%}
.slick-next::after{right:35%}
.slick-prev, .slick-next { width: 10% !important; height: 100% !important; z-index: 9;}
.slick-prev.slick-arrow{left:0px;}
.slick-next.slick-arrow{right:0px;}
}

