@charset 'utf-8';

.hero {
position:relative; overflow:hidden;
border:solid #FFF; border-width:1px 0;
background:#000;
}

/* over */
.hero .over {
position:absolute; top:0; bottom:0; z-index:1;
left:calc((100% - 480px)/2);
right:calc((100% - 480px)/2);
}
.hero .over .area { display:block; width:100%; height:100%;}
@media screen and ( max-width:480px ){
.hero .over { left:0; right:0;}
}
/* over */
/* tag */
.hero .tag {
position:absolute; left:6px; top:6px;
display:flex; flex-wrap:wrap;
}
.hero .tag 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:2px;
}
/* tag */

.hero .iac { position:absolute; right:8px; top:8px; height:48px;}

/* info */
.hero .info {
position:absolute; left:0; right:0; bottom:0;
display:block;
overflow:hidden;
background:rgb(0,0,0,75%);
text-shadow:none; text-align:right;
padding:8px; padding-left:112px;
}
.hero .info p { font-size:14px;}
.hero .info h2 { font-size:20px; margin-top:4px;}
.hero .info h2 span { font-size:75%; white-space:nowrap; margin-left:0.5em;}
@media screen and ( max-width:768px ){
.hero .info p { font-size:12px;}
.hero .info h2 { font-size:18px;}
}
/* info */
/* menu */
.hero .menu {
position:absolute; left:4px; bottom:4px;
display:flex; align-items:center;
}
.hero .menu a {
position:relative; display:block; width:40px; height:40px;
background:no-repeat center center / contain;
margin:4px; cursor:pointer;
}
.hero .menu a:before {
position:absolute; left:0; right:0; top:0; bottom:0;
border-radius:50%;
content:'';
}
.hero .menu a:hover:before { animation:hero-head-menu 0.5s forwards;}
@keyframes hero-head-menu { 0% { transform:scale(2); background:#FFF;}}
.hero .menu a.video { background-image:url('/project/egg/console/img/icon_video.png');}
.hero .menu a.image { background-image:url('/project/egg/console/img/icon_image.png');}
.hero .menu a.none { display:none !important;}
/* menu */
/* slick */
.hero .slick { background:#000;}
.hero .item {
display:block; width:480px; height:300px; /* 16:10 */
background:no-repeat center center / cover;
}
.hero .slick-arrow {
top:0; bottom:0;
width:calc((100% - 480px)/2);
background:rgb(0,0,0,75%);
}
.hero .slick-arrow:hover { animation:hero-sk-arw 0.5s forwards;}
@keyframes hero-sk-arw { 0% { background:#FFF;}}
.hero .slick-arrow:before {
position:absolute; left:calc(50% - 20px); top:calc(50% - 20px);
width:40px; height:40px;
background:url('/project/egg/console/img/arrow.png?1') no-repeat center center / contain;
content:'';
}
.hero .slick-next { right:0;}
.hero .slick-prev { left:0;}
.hero .slick-next:before { transform:scale(-1);}

@media screen and ( max-width:768px ){
.hero .slick-arrow {
top:50%; bottom:initial;
width:40px; height:40px;
border:solid 1px #FFF;
filter:drop-shadow(0 1px 2px rgb(0,0,0,75%));
}
.hero .slick-arrow:before { left:calc(50% - 12px); top:calc(50% - 12px); width:24px; height:24px;}
.hero .slick-next { left:16px;}
.hero .slick-prev { right:16px;}
}
@media screen and ( max-width:480px ){
.hero .item { width:100vw; height:calc(100vw/16*9); min-height:75vw;}
.hero .slick-next { left:8px;}
.hero .slick-prev { right:8px;}
}
/* slick */
/* foot */
.hero_foot { padding:8px;}
.hero_foot .cap { font-size:16px; line-height:1.25; padding:8px;}
.hero_foot .store { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.hero_foot .store a { display:block; margin:4px;}
.hero_foot .store img { height:48px;}
.hero_foot .store div { position:relative; padding:4px;}
.hero_foot .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:hero-sale 0.5s alternate ease-in-out /*linear*/ infinite;
}
@keyframes hero-sale { 0% { transform:scale(1.0);} to { transform:scale(1.25);}}
.hero_foot .store div.sale p {
    text-shadow:0 0 8px #321, 0 0 4px #210;
    transform:rotate(-15deg);
}
.hero_foot .store p:nth-child(1) { font-size:12px;}
.hero_foot .store p:nth-child(2) { font-size:20px; margin-top:4px;}
.hero_foot .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:6px;
}
.hero_foot .copy li { padding:2px;}
.hero_foot .copy li:empty { width:100%; padding:0;}
@media screen and ( max-width:768px ){
.hero_foot { margin:0;}
.hero_foot .cap { font-size:14px;}
}
/* foot */