@charset 'utf-8';

.lineup {
    display:flex; flex-wrap:wrap; justify-content:space-around;
    margin:16px 0;
}
.lineup > div { width:320px; padding:12px;}/* 各アイテムの器：320px max */
.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 .body {
position:relative; display:inline-block; margin:20px 4px;
filter:drop-shadow(0 0 2px #CFF) drop-shadow(0 0 4px #0CC);
}

.lineup a.ss,
.lineup a.ss div {
    display:inline-block;
    background:#000 no-repeat center center / cover;
}
.lineup a.ss {
    width:256px; aspect-ratio:16/10; overflow:hidden;
    border-radius:8px; 
}
.lineup a.ss div {
    width:100%; height:100%;
    transition:opacity .5s;
}
.lineup a.ss:hover div { opacity:0;}

/* tag */
.lineup .tag {
position:absolute; left:-8px; top:-16px; z-index:1;
display:flex; flex-wrap:wrap;
}
.lineup .tag p,
.lineup .tag a {
display:block;
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-underline:none !important; text-shadow:none;
padding:0.5em; margin:0 4px 4px 0;
}
.lineup .tag a { position:relative; text-decoration:none;}
.lineup .tag a:before { position:absolute; left:0; right:0; top:0; bottom:0; display:block; content:'';}
/* tag */
/* iarc */
.lineup img.iarc {
position:absolute; right:-8px; bottom:-16px;
display:block; height:48px;
}
/* iarc */
/* video-open */
.lineup .video-open {
position:absolute; left:-8px; bottom:-16px;
display:block; cursor:pointer;
width:40px; height:30px;
background:#000 url('/project/egg/console/img/icon_video.png') no-repeat center center / contain;
border:solid 1px #FFF; border-radius:4px;
}
/* video-open */

.lineup .cap {
display:-webkit-box; overflow:hidden;
font-size:14px; line-height:20px; -webkit-box-orient:vertical; -webkit-line-clamp:3;
padding:4px 0 0; 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;}
}

/* store */
.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 div.sale { position:relative;}
.lineup .store div.sale:after { /* SALE */
z-index:-1; position:absolute; left:calc(50% - 40px); top:calc(50% - 40px);
display:block; width:80px; height:80px; border-radius:50%;
background:url('/project/egg/console/img/sale/price.png') no-repeat center center / contain;
content:'';
animation:lineup-sale 0.5s alternate ease-in-out /*linear*/ infinite;
}
@keyframes lineup-sale { 0% { transform:scale(1.0);} to { transform:scale(1.25);}}
.lineup .store div.sale p {
    text-shadow:0 0 8px #321, 0 0 4px #210;
    transform:rotate(-15deg);
}
.lineup .store p:nth-child(1) { font-size:12px;}
.lineup .store p:nth-child(2) { font-size:20px; margin-top:4px;}
/* store */
/* copy */
.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;}
/* copy */
/* animation */
.lineup .flash:before { position:absolute; left:0; right:0; top:0; bottom:0; display:block; content:'';}
.lineup .flash:hover:before { animation:lineup_flash 0.5s forwards;}
@keyframes lineup_flash { 0% { background:#FFF;}}
/* animation */