@charset 'utf-8';

/* top10 */
.top10 {
background:linear-gradient(transparent,rgb(0,0,0,50%) 16px);
padding:8px 0;
opacity:0;
transform:translateY(16px);
}
.completed .top10 { animation:top10 1s 1s forwards;}
@keyframes top10 { to { transform:translateY(0); opacity:1;}}
.top10 > .slick { overflow-x:hidden;}
.top10 .slick-dots {
display:flex; justify-content:center;
padding:6px;
}
.top10 .slick-dots li { width:64px; height:64px; padding:2px;}
.top10 .slick-dots li:nth-child(n+11){ display:none;}
.top10 .slick-dots button {
position:relative;
width:100%; height:100%;
background:#000 no-repeat center center / cover;
box-shadow:0 2px 3px rgba(0,0,0,50%);
}
.top10 .slick-dots .slick-active button { z-index:1; animation:top10-dots-1 0.5s forwards;}
@keyframes top10-dots-1 { 0% { transform:scale(1.25);}}
.top10 .slick-dots button:after {/* 非選択 */
position:absolute; left:0; right:0; top:0; bottom:0;
background:rgba(0,0,0,75%);
border:#FFF 1px solid;
transition:background 0.5s, border 0.5s;
content:'';
}
.top10 .slick-dots .slick-active button:after {/* 選択中 */
background:rgba(255,255,255,25%);
box-shadow:0 0 4px #FFF,0 0 8px #FFF;
}
.top10 .slick-dots button:hover:after { animation:top10-dots-2 1s;}
@keyframes top10-dots-2 { 0% { background:#FFF;}}
@media screen and ( max-width:768px ){
.top10 .slick-dots li {
width:calc((100vw - 28px)/10);
height:calc((100vw - 28px)/10);
}
}
/* top10 */
/* index_title */
.index_title {
position:relative;
background:linear-gradient(#046,#012);
border-top:solid 2px #FFF;
font-size:16px;
padding:0.75em;
}
@media screen and ( max-width:768px ){
.index_title { font-size:14px;}
}
/* index_title */
/* hero */
.hero {
overflow-x:hidden;
background:#000;
border-top:solid 2px #FFF;
}
/* hero */
/* recommend */
.recommend { position:relative; max-width:480px; width:100vw;}
.recommend a { display:block; color:#FFF; text-decoration:none;}
.recommend .ss {
display:block;
width:480px; height:360px;/* 4:3 */
background:no-repeat center center / cover;
}
.recommend .txt { padding:8px;}
.recommend .txt > :empty { display:none;}
.recommend .txt h3 { font-size:16px;}
.recommend .txt h4 { font-size:14px; color:#BCC; margin-top:4px;}
.recommend .txt p { font-size:10px; color:#899; margin-top:4px;}
@media screen and ( max-width:768px ){
.recommend .txt h3 { font-size:14px;}
.recommend .txt h4 { font-size:12px;}
}
@media screen and ( min-width:481px ){
.recommend:before,
.recommend:after {
position:absolute; top:0; bottom:0; z-index:2;
background:#FFF; width:1px;
content:'';
}
.recommend:before { left:0;}
.recommend:after { right:0;}
}
@media screen and ( max-width:480px ){
.recommend .ss { width:100vw; height:75vw;}
}
/* recommend */