@charset 'utf-8';

*, *:before, *:after {
box-sizing:border-box;
text-overflow:ellipsis;
padding:0; margin:0;
outline:none;
}
html { -webkit-text-size-adjust:100%;}
h1,h2,h3,h4,h5 { font-weight:normal;}
a:link,a:visited { text-decoration:underline;}
a:hover,a:active { text-decoration:none;}
a:focus {}
ul { list-style:none;}
img, iframe { border:none;}
button,select,input,textarea { border:none;}
button,select,input[type='checkbox'],label { cursor:pointer;}
button,select { line-height:1;}
button::-moz-focus-inner,
input::-moz-focus-inner { padding:0 !important; border:0 !important;}

/* body */
html { font-family:メイリオ,Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,Arial,Verdana,Helvetica,sans-serif;}
body {
position:relative;
overflow-x:hidden;
background:#000;
color:#FFF; font-size:0; line-height:1;
min-height:100vh;
}
body:before,
body:after { position:fixed; display:block; content:'';}
body:before { /* 光輪 */
left:50%; top:50%; z-index:1;
background:radial-gradient(farthest-side circle at center center, #498,#244,#123,transparent);
animation:body-before 3s alternate ease-in-out /*linear*/ infinite;
opacity:0;
}
@keyframes body-before {
0% { transform:translate(-50%,-50%) scale(1.0); opacity:0.5;}
to { transform:translate(-50%,-50%) scale(1.5); opacity:1;}
}
body:after {
position:fixed; left:0; right:0; top:0; bottom:0; z-index:2;
background:center top
repeating-linear-gradient(transparent,transparent 6px,#123 6px,#123 8px),
repeating-linear-gradient(90deg, transparent,transparent 6px,#123 6px,#123 8px);
opacity:0.5;
}
body > .inner {
position:relative; max-width:768px; width:100%; z-index:3;
min-height:100vh; height:100%;
background:rgb(0,0,0,20%);
text-align:center; text-shadow:0 0 4px #9FC, 0 0 4px #0CC;
margin:0 auto;
animation:body-inner 2s 0.5s forwards;
opacity:0;
}
@keyframes body-inner { to { opacity:1;}}
body > .inner:before,
body > .inner:after {
position:absolute; top:0; bottom:0;
display:block; width:32px;
background:linear-gradient(90deg, rgb(0,0,0,50%),rgb(0,0,0,25%) 20%,transparent);
content:'';
}
body > .inner:before { left:-32px; transform:scaleX(-1);}
body > .inner:after  { right:-32px;}
@media screen and ( max-width:768px ){
}
@media screen and ( orientation:landscape ){
body:before { width:100vw; height:100vw;}
}
@media screen and ( orientation:portrait ){
body:before { width:100vh; height:100vh;}
}
/* body */

a:link, a:visited { color:#FFF; text-decoration:none;}
a:hover, a:active { color:#FFF; text-decoration:underline;}

/* topicon */
.topicon {
position:absolute; left:0; top:0; z-index:9; padding:16px;
display:flex; justify-content:space-between;
width:100%;
transform:translateY(-100%);
animation:top_icon 2s 1s forwards;
}
@keyframes top_icon { to { transform:translateY(0);}}
.hom, .sns {
display:block; width:32px; height:32px;
background: no-repeat center center / cover;
}
.hom:hover, .sns:hover { animation:flash 0.5s forwards;}
@keyframes flash { 0% { transform:scale(1.2); filter:drop-shadow(0 0 2px #9FF) drop-shadow(0 0 4px #0CC);}}
.hom {  left:16px; background-image:url('../img/home.png');}
.sns { right:16px; background-image:url('../img/sns_x.png');}
/* topicon */

/* header */
header {
background:linear-gradient(to top,rgb(0,0,0,50%),transparent 64px);
padding:24px; margin:0 auto;
}
header > div { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
header .top div,
header .egg div { padding:8px;}
header .top img { width:64px; height:64px;}
header .top h3 { font-size:18px; padding:8px;}
header .egg img {
display:block; max-width:200px; width:100%;
filter:drop-shadow(0 0 2px #9FF) drop-shadow(0 0 4px #0CC);
}
header .egg div.cap { width:calc(100% - 200px - 16px); text-align:left;}
header .egg div.cap p { font-size:14px; line-height:1.375;}
header .egg div.cap a {
display:inline-block;
background:rgb(0,0,0,25%);
border:solid 2px #FFF; border-radius:8px;
box-shadow:0 0 4px #9FC inset, 0 0 4px #9FC;
font-size:16px; line-height:1; text-decoration:none !important;
padding:10px; margin-top:8px;
}
header.noindex .top div,
header.noindex .egg div.cap { display:none;}
@media screen and ( max-width:768px ){
header { padding:8px;}
header .top { margin-top:48px;}
header .top img { width:40px; height:40px;}
header .top h3 { font-size:14px;}
header .egg div.cap { width:100%; text-align:center;}
header .egg div.cap p { font-size:12px;}
header .egg div.cap a { font-size:14px;}
}
/* header */

/* lineup */
.lineup { padding:24px;}
.lineup .head { padding:8px;}
.lineup .head p { font-size:14px;}
.lineup .head h2 { font-size:20px; margin-top:8px;}
.lineup .head h2 span { font-size:75%;}
.lineup .ss { display:flex; flex-wrap:wrap; justify-content:center; padding:0;}
.lineup .ss a {
position:relative;
display:block; width:160px; height:100px; overflow:hidden;
background:#000 no-repeat center center / cover;
border-radius:4px;
margin:8px;
filter:drop-shadow(0 0 2px #CFF) drop-shadow(0 0 4px #0CC);
}
.lineup .ss a:before { position:absolute; left:0; right:0; top:0; bottom:0; display:block; content:'';}
.lineup .ss a:hover,
.lineup .ss a:hover:before { animation:lineup 0.5s forwards;}
@keyframes lineup { 0% { z-index:765; background:#FFF; transform:scale(1.2);}}
.lineup .text { font-size:14px; line-height:1.5; padding:8px;}
.lineup .store { display:inline-block; margin:8px;} /* eshop banner */
.lineup .store img { height:48px;}
.lineup .info { display:flex; flex-wrap:wrap; justify-content:center; font-size:14px; padding:4px 0;}
.lineup .info li { padding:4px 8px;}
.lineup .info li span { color:#CF0; text-shadow:0 0 4px #F90, 0 0 4px #C60;}
.lineup .copy {
display:flex; flex-wrap:wrap; justify-content:center;
font-size:12px; line-height:1.2; opacity:66%;
padding:4px;
}
.lineup .copy li { padding:4px;}
.lineup .copy li.clear { width:100%; padding:0;}
.lineup hr {
display:block;
height:4px;
background:rgb(0,0,0,25%);
border:solid 1px; border-color:#064 #088 #0AC; border-radius:2px;
box-shadow:0 0 4px rgb(0,127,191,75%);
margin:8px;
}
@media screen and ( max-width:768px ){
.lineup { padding:8px;}
.lineup .date { font-size:12px;}
.lineup h2 { font-size:16px;}
.lineup .text { font-size:12px;}
.lineup .text br { display:none;}
.lineup .copy { font-size:10px;}
}
@media screen and ( max-width:640px ){
.lineup .ss :nth-child(n+3) { display:none;}
.lineup .ss a { width:calc(50vw - 24px); height:calc((50vw - 24px)/16*10);}
}
@media screen and ( max-width:432px ){
.lineup .ss :nth-child(n+2) { display:none;}
.lineup .ss a { width:calc(100vw - 16px); height:calc((100vw - 16px)/16*10);}
}
/* lineup */

/* footer */
footer {
background:linear-gradient(to bottom,rgb(0,0,0,50%),transparent 64px);
padding:24px;
}
footer ul { display:flex; flex-wrap:wrap; justify-content:center; padding:4px;}
footer li { font-size:10px; padding:4px;}
footer li:empty { width:100%; padding:0;}
footer a.d4e {
display:inline-block;
text-decoration:none !important;
padding:8px; margin-top:16px;
}
footer a.d4e img {
display:inline-block; max-width:64px;
filter:drop-shadow(0 0 1px #9FF) drop-shadow(0 0 2px #0CC);
}
footer a.d4e p { font-size:12px; margin-top:8px;}
@media screen and ( max-width:768px ){
footer { padding:8px;}
footer li { font-size:10px;}
}
/* footer */