@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 2s alternate ease-in-out /*linear*/ infinite;
opacity:0;
}
@keyframes body-before {
0% { transform:translate(-50%,-50%) scale(1.0); opacity:.6;}
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 3px,#123 3px,#123 4px),
repeating-linear-gradient(90deg, transparent,transparent 3px,#123 3px,#123 4px);
opacity:0.5;
}
body > .inner {
position:relative; max-width:960px; width:100%; z-index:3;
min-height:100vh; height:100%;
background:rgb(0,0,0,20%);
text-align:center; text-shadow:0 0 4px #6FC, 0 0 4px #0C9;
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;}

/* tool */
.tool {
position:absolute; left:0; right:0; top:0; z-index:9;
height:40px; /* 32+8 */
transform:translateY(-100%);
animation:tool 2s 1s forwards;
}
@keyframes tool { to { transform:translateY(0);}}
.tool a { position:absolute; top:0; display:block; }
.tool a.home,
.tool a.post { top:8px; width:32px; height:32px; background: no-repeat center center / cover;}
.tool a.home {  left:8px; background-image:url('../img/tool_home.png');}
.tool a.post { right:8px; background-image:url('../img/tool_post.png');}
.home:hover,
.post: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);}}
.tool a.lang { /* 言語 */
left:50%; top:0;
background:rgb(0,0,0,50%);
box-shadow:0 2px 4px rgb(0,0,0,75%);
border-radius:0 0 4px 4px; border:solid #FFF; border-width:0 2px 2px;
font-size:12px; text-decoration:none; white-space:nowrap;
padding:8px;
transform:translateX(-50%);
}
/* tool */

/* 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 {
position:relative;
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 .egg div.cap a:hover { animation:enquete_a 1s forwards;}
@keyframes enquete_a { 0% { box-shadow:0 0 8px #9FC inset, 0 0 16px #9FC;}}
@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 */

/* slick */
.slick { position:relative;}
.slick button { font-size:0;}
.slick-track { display:flex;}
.slick-list { padding:0 !important;}
.slick-arrow { position:absolute; z-index:2;}
/* slick */

/* video-over */
.video-over {
position:fixed; z-index:100; left:0; right:0; top:0; bottom:0;
display:flex; justify-content:center; align-items:center;
overflow:hidden;
background:rgb(0,0,0,75%);
opacity:0; visibility:hidden;
transition:opacity 0.5s, visibility 0.5s;
}
.video-over.show { opacity:1; visibility:visible;}
.video-over .dark { position:absolute; left:0; right:0; top:0; bottom:0;}
.video-over .item { position:relative; z-index:9; background:#000;}
.video-over img { max-width:calc(100vw - 64px); max-height:calc(100vh - 64px);}
.video-over iframe { width:640px; height:400px;}
@media screen and ( max-width:1024px ){
.video-over img { max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);}
}
@media screen and ( max-width:768px ){
.video-over iframe { width:calc(100vw - 32px); height:calc((100vw - 32px)/16*10);}
}
/* video */

/* pager */
.pager { display:flex; flex-wrap:wrap; justify-content:center; padding:12px;}
.pager a,
.pager span {
display:block;
background:rgb(0,0,0,50%);
border:solid 2px #FFF; border-radius:4px;
font-size:12px; text-decoration:none; text-shadow:none;
padding:8px; margin:4px;
}
.pager a:hover { animation:pager 0.5s forwards;}
@keyframes pager { 0% { background:#FFF;}}
.pager span { opacity:0.25;}
/* pager */

/* 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 */