@charset 'utf-8';

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

/* video-head over */
.hero_head .over {
position:absolute; left:calc((100% - 480px)/2);
right:calc((100% - 480px)/2); top:0; bottom:0; z-index:1;
}
.hero_head .over .area { display:block; width:100%; height:100%;}
@media screen and ( max-width:480px ){
.hero_head .over { left:0; right:0;}
}

/* video-head over */

.hero_head .tag {
position:absolute; left:6px; top:6px;
display:flex; flex-wrap:wrap;
}
.hero_head .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;
}

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

/* video-head info */
.hero_head .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_head .info p { font-size:14px;}
.hero_head .info h2 { font-size:20px; margin-top:4px;}
.hero_head .info h2 span { font-size:75%; margin-left:0.5em;}
@media screen and ( max-width:768px ){
.hero_head .info p { font-size:12px;}
.hero_head .info h2 { font-size:18px;}
}
/* video-head info */
/* video-head menu */
.hero_head .menu {
position:absolute; left:4px; bottom:4px;
display:flex; align-items:center;
}
.hero_head .menu a {
position:relative; display:block; width:40px; height:40px;
background:no-repeat center center / contain;
margin:4px; cursor:pointer;
}
.hero_head .menu a:before {
position:absolute; left:0; right:0; top:0; bottom:0;
border-radius:50%;
content:'';
}
.hero_head .menu a:hover:before { animation:hero-head-menu 0.5s forwards;}
@keyframes hero-head-menu { 0% { transform:scale(2); background:#FFF;}}
.hero_head .menu a.video { background-image:url('../img/icon_video.png');}
.hero_head .menu a.image { background-image:url('../img/icon_image.png');}
.hero_head .menu a.none { display:none !important;}
/* video-head menu */

/* slick */
.hero_head .slick { background:#000;}
.hero_head .item {
display:block; width:480px; height:270px; /* 16:9 */
background:no-repeat center center / cover;
}
.hero_head .slick-arrow {
top:0; bottom:0;
width:calc((100% - 480px)/2);
background:rgb(0,0,0,75%);
}
.hero_head .slick-arrow:hover { animation:hero-sk-arw 0.5s forwards;}
@keyframes hero-sk-arw { 0% { background:#FFF;}}
.hero_head .slick-arrow:before {
position:absolute; left:calc(50% - 20px); top:calc(50% - 20px);
width:40px; height:40px;
background:url('../img/arrow.png?1') no-repeat center center / contain;
content:'';
}
.hero_head .slick-prev { left:0;}
.hero_head .slick-next { right:0;}
.hero_head .slick-next:before { transform:scale(-1);}

@media screen and ( max-width:768px ){
.hero_head .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_head .slick-arrow:before { left:calc(50% - 12px); top:calc(50% - 12px); width:24px; height:24px;}
.hero_head .slick-prev { left:16px;}
.hero_head .slick-next { right:16px;}
}
@media screen and ( max-width:480px ){
.hero_head .item { width:100vw; height:calc(100vw/16*9); min-height:75vw;}
.hero_head .slick-prev { left:8px;}
.hero_head .slick-next { right:8px;}
}
/* slick */

/* foot */
.hero_foot { padding:8px; margin:0 16px;}
.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 { padding:4px;}
.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;}
}
/* info */