@charset 'utf-8';

.lineup { display:flex; flex-wrap:wrap; justify-content:center; margin:0 16px;}
@media screen and ( max-width:768px ){
.lineup { margin:0;}
}
.lineup > div { width:33.33%; padding:12px;}
@media screen and ( max-width:847px /* 848 */){ .lineup > div { width:50%;}}
@media screen and ( max-width:543px /* 544 */){ .lineup > div { width:100%;}}

.lineup .head > * { overflow:hidden; line-height:1; white-space:nowrap; padding:4px;}
.lineup .head p { font-size:14px;}
.lineup .head h2 { font-size:20px;}

.lineup .ss { position:relative; display:inline-block; margin:12px 4px;}
.lineup .ss a.none { display:none;}
.lineup .ss a { display:inline-block; filter:drop-shadow(0 0 2px #CFF) drop-shadow(0 0 4px #0CC);}
.lineup .ss div,
.lineup .ss span {
width:240px; height:135px; /* 16:9 */
background:no-repeat center center / cover;
}
.lineup .ss div { position:relative; overflow:hidden; border-radius:8px;}
.lineup .ss span { display:block; transition:opacity .5s;}
.lineup .ss a:hover span { opacity:0;}
.lineup .ss img.iarc {
position:absolute; right:-8px; bottom:-8px; z-index:1;
display:block; height:48px;
}

.lineup .ss ul {
position:absolute; left:-8px; top:-8px; z-index:1;
display:flex; flex-wrap:wrap;
}
.lineup .ss ul li {
background:linear-gradient(#000,rgb(0,0,0,75%));
box-shadow:0 1px 2px rgb(0,0,0,50%);
border:solid 1px #FFF;
font-size:12px; text-shadow:none;
padding:0.5em; margin:0 4px 4px 0;
}

/* video-open */
.lineup .video-open {
position:absolute; left:-8px; bottom:-8px; z-index:1;
display:block; cursor:pointer;
width:40px; height:30px;
background:#000 url('../img/icon_video.png') no-repeat center center / contain;
border:solid 1px #FFF; border-radius:4px;
}
.lineup .video-open:before { position:absolute; left:0; right:0; top:0; bottom:0; display:block; content:'';}
.lineup .video-open:hover:before { animation:video-open 0.5s forwards;}
@keyframes video-open { 0% { background:#FFF;}}
/* video-open */

.lineup .cap {
display:-webkit-box; overflow:hidden;
font-size:14px; line-height:20px; -webkit-box-orient:vertical; -webkit-line-clamp:3;
padding-top:4px; margin:0 4px 4px;
}

@media screen and ( max-width:768px ){
.lineup .head p { font-size:12px;}
.lineup .head h2 { font-size:16px;}
.lineup .cap { font-size:12px;}
}

.lineup .store { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.lineup .store a { display:block; margin:4px;}
.lineup .store img { height:48px;}
.lineup .store div { padding:4px;}
.lineup .store p:nth-child(1) { font-size:12px;}
.lineup .store p:nth-child(2) { font-size:20px; margin-top:4px;}

.lineup .copy {
display:flex; flex-wrap:wrap; justify-content:center;
color:#9CC; font-size:10px; line-height:1.2; text-shadow:0 0 2px #123;
padding:2px;
}
.lineup .copy li { padding:2px;}
.lineup .copy li:empty { width:100%; padding:0;}