@charset 'utf-8';

/*↓slick：共通↓*/
.slick { position:relative;}
.slick-dots button { font-size:0;}
.slick-track { display:flex;}
.slick-arrow { position:absolute; z-index:2;}
/*↑slick：共通↑*/
/*↓slick-arrow：1型↓*/
.arw1 .slick-arrow {
top:50%;
display:flex; justify-content:center; align-items:center;
width:64px; height:64px;
background:rgba(0,0,0,75%);
border:#FFF 1px solid;
transform:translateY(-50%);
}
.arw1 .slick-arrow.slick-prev {  left:32px;}
.arw1 .slick-arrow.slick-next { right:32px;}
.arw1 .slick-arrow:hover { animation:best10-arrow 1s forwards;}
@keyframes best10-arrow { 0% { background:#FFF;}}
.arw1 .slick-arrow:after {/* 矢印 */
width:33.33%; height:33.33%;
background:url( ../img/common/arrow.png?2021-1125 ) 0 0 / auto 100%;
content:'';
}
.arw1 .slick-arrow.slick-next:after { background-position:-100% 0;}
@media screen and ( max-width:768px ){
.arw1 .slick-arrow { width:44px; height:44px;}
.arw1 .slick-arrow.slick-prev {  left:8px;}
.arw1 .slick-arrow.slick-next { right:8px;}
}
/*↑slick-arrow：1型↑*/
/* slick-arrow arw2 */
.arw2 .slick-arrow {
top:0; bottom:0;
width:64px;
background:rgb(0,0,0,50%);
border:0;
}
.arw2 .slick-arrow:hover { animation:s-slick-arrow 0.5s forwards;}
@keyframes s-slick-arrow { 0% { background:#FFF;}}
.arw2 .slick-arrow:before {
position:absolute; left:33.33%; top:0; bottom:0;
width:33.33%;
background:url('../img/common/arrow.png?2021-1125') no-repeat left center / 200% auto;
content:'';
}
.arw2 .slick-arrow.slick-prev { left:0;}
.arw2 .slick-arrow.slick-next { right:0; transform:scaleX(-1);}
.arw2 .slick-arrow:before { animation:arw2 0.5s infinite alternate;}
@keyframes arw2 { 0% { transform:translateX(-4px);} to { transform:translateX( 4px);}}
@media screen and ( max-width:1000px ){/* sp */
.arw2 .slick-arrow { width:32px; background:rgb(0,0,0,25%);}
}
/* slick-arrow arw2 */
/* slick-dots */
.slick-dots {
display:flex; flex-wrap:wrap; justify-content:center;
list-style-type:none;
padding:14px; margin:0;
}
.slick-dots li { padding:2px;}
.slick-dots button {
display:block; width:16px; height:16px;
box-shadow:inset 0 1px 3px rgba(0,17,17,0.5), 0 0 3px #899;
border-radius:50%;
font-size:0; text-indent:-999em;
border:0;
cursor:pointer;
}
.slick-dots button:hover { background:#8CE;}
.slick-dots .slick-active button { background:linear-gradient(#3CF,#069); cursor:default;}
/* slick-dots */