@charset 'utf-8';

/*↓reset↓*/
*, *:before, *:after {
box-sizing:border-box;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;
text-overflow:ellipsis;
padding:0; margin:0;
}
html { -webkit-text-size-adjust:100%;}
h1,h2,h3,h4,h5,h6 { font-weight:normal;}
a:link, a:visited { text-decoration:none;}
a:hover, a:active { text-decoration:underline;}
a:focus { outline:none;}
ul { list-style:none;}
img, iframe { border:0;}
button, select, input, textarea { outline: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;}/* 呪 */
/*↑reset↑*/
/*↓body↓*/
body {
position:relative;
overflow-scrolling:touch; -webkit-overflow-scrolling:touch;
width:100vw; overflow-x:hidden;
min-height:100vh; overflow-y:scroll;
background:#000;
color:#FFF; font-size:0; line-height:1; text-align:center;
}
body.lock { overflow-y:hidden; overflow-scrolling:auto; -webkit-overflow-scrolling:auto;}
body >.inner { width:100%; overflow-x:hidden;}
/*↑body↑*/
/*↓a(白背景想定)↓*/
a:link, a:visited { color:#FF0;}
a:hover, a:active { color:#FFF;}
/*↑a↑*/
/*↓section↓*/
section >.inner { position:relative; max-width:1024px; width:100%; margin:0 auto;}
/*↑section↑*/
/*↓ヘッダ↓*/
header {
position:relative;
overflow:hidden;
border-bottom:solid 2px #FFF;
}
/*↑ヘッダ↑*/
/*↓ヘッダ＞スクリーンショット↓*/
header .sshot {
position:absolute; left:0; right:0; top:0; bottom:0;
display:flex;
opacity:0;
animation:header-ssot 2s forwards;
}
@keyframes header-ssot { to { opacity:0.25;}}
header .sshot ul {
position:absolute; top:0;
display:flex; width:100vw; height:100%;
animation:header-sshot-ul1 60s linear infinite;
}
@keyframes header-sshot-ul1 { to { transform:translateX(-300vw);}}
header .sshot ul.lot1:nth-of-type(1) { left:0;}
header .sshot ul.lot2:nth-of-type(2) { left:100vw;}
header .sshot ul.lot3:nth-of-type(3) { left:200vw;}
header .sshot ul.lot1:nth-of-type(4) { left:300vw;}
header .sshot li {
width:20vw; height:100%;
background:no-repeat center center / cover;
}
@media screen and ( max-width:1024px ){/* 2個表示 */
header .sshot ul { width:calc(50vw*5); animation:header-sshot-ul2 90s linear infinite;}
header .sshot ul.lot1:nth-of-type(1) { left:0;}
header .sshot ul.lot2:nth-of-type(2) { left:calc(50vw*5);}
header .sshot ul.lot3:nth-of-type(3) { left:calc(50vw*10);}
header .sshot ul.lot1:nth-of-type(4) { left:calc(50vw*15);}
header .sshot li { width:50vw;}
}
@keyframes header-sshot-ul2 { to { transform:translateX(-750vw);}}
@media screen and ( max-width:512px ){/* 1個表示*/
header .sshot ul { width:calc(75vw*5); animation:header-sshot-ul3 120s linear infinite;}
header .sshot ul.lot1:nth-of-type(1) { left:0;}
header .sshot ul.lot2:nth-of-type(2) { left:calc(75vw*5);}
header .sshot ul.lot3:nth-of-type(3) { left:calc(75vw*10);}
header .sshot ul.lot1:nth-of-type(4) { left:calc(75vw*15);}
header .sshot li { width:75vw;}
}
@keyframes header-sshot-ul3 { to { transform:translateX(-1125vw);}}
/*↑ヘッダ＞スクリーンショット↑*/
/*↓ヘッダ＞スターアーサー↓*/
header .arthur {
position:absolute; left:0; right:0; top:16px; bottom:0; z-index:2;
background:url('../img/kv/a2.png') no-repeat center bottom / contain;
opacity:0;
filter:hue-rotate(360deg);
transform:translate(0,16px);
animation:header-arthur 3s forwards;
}
@keyframes header-arthur {
33.33%,
66.66% { opacity:1; filter:hue-rotate(0deg); transform:translate(0,0);}
to { opacity:0; transform:translate(0,0);}
}
/*↑ヘッダ＞スターアーサー↑*/
/*↓ヘッダ＞ロゴ・テキスト↓*/
header .main {
position:relative; z-index:3;
max-width:1024px; width:100%;
text-shadow:0 1px 2px #FF0;
padding:32px; margin:0 auto;
opacity:0;
filter:hue-rotate(360deg);
transform:translate(0,-16px);
animation:header-main 1s 2s forwards;
}
@keyframes header-main { to { opacity:1; filter:hue-rotate(0deg); transform:translate(0,0);}}
header .main >:nth-child(n+2) { margin-top:16px;}
header .main img {
display:inline-block; max-width:640px; width:100%;
filter:drop-shadow(0 2px 2px #000);
}
header .main h1 { font-size:24px; line-height:1.25; color:#0FF;}
header .main h1 span { white-space:nowrap;}
header .main p  { font-size:16px; line-height:1.5;}
@media screen and ( max-width:768px ){
header .main { padding:64px 16px 16px;}
header .main h1 { font-size:20px;}
header .main p  { font-size:14px;}
}
@media screen and ( max-width:480px ){
header .main h1 { font-size:16px;}
header .main p  { font-size:12px;}
}
/*↑ヘッダ＞ロゴ・テキスト↑*/
/*↓ヘッダ＞リンク↓*/
header .egg,
header .tweet {
position:absolute; top:16px; z-index:4;
display:block;
}
header .egg { left:32px;}
header .tweet { right:32px;}
header .egg img { width:100px; height:60px;}
header .tweet img { width:40px; height:40px;}
@media screen and ( max-width:768px ){
header .egg { left:16px;}
header .tweet { right:16px;}
header .egg img { width:80px; height:48px;}
header .tweet img { width:32px; height:32px;}
}
/*↑ヘッダ＞リンク↑*/
/*↓フッタ↓*/
footer { padding:24px;}
footer .trilogies { padding:8px;}
footer .trilogies a { display:inline-block;}
footer .trilogies img {
max-width:320px; width:100%;
filter:drop-shadow(0 2px 2px #000);
}
footer ul {
display:flex; flex-wrap:wrap; justify-content:center;
padding:4px; margin-top:16px;
}
footer li { display:inline-block; padding:4px;}
footer .link a {
display:block;
background:#FFF;
box-shadow:0 0 4px #FFF;
border-radius:4px;
color:#233; font-size:12px; text-shadow:0 0 1px rgba(0,0,0,0.5); text-decoration:none;
padding:0.75em;
}
footer .link a:hover { animation:footer-link 1s forwards;}
@keyframes footer-link { 0% { box-shadow:0 0 16px #FFF;}}
footer .copy li { color:#FFF; font-size:10px; text-shadow:0 1px 1px #900,0 2px 1px #300;}
footer .corp a {
display:inline-block;
color:#FFF; font-size:10px; text-decoration:none;
}
footer .corp a:hover { color:#FFF;}
footer .corp a:before {
display:block;
background:no-repeat center center / contain;
margin:0 auto 8px;
content:'';
}
footer .corp a.d4e:before {
width:72px; height:72px;
background-image:url('../img/logo/d4e.png');
}
@media screen and ( max-width:768px ){
footer { padding:8px;}
}
@media screen and ( max-width:480px ){
footer .trilogies img { max-width:240px;}
}
/*↑フッタ↑*/
/*↓雑魚↓*/
body .zako {
position:absolute; z-index:-1; left:0; right:0; bottom:0;
height:568px; overflow-x:hidden;
background:linear-gradient(#000 25%,#900);
opacity:0;
transition:opacity 1s;
}
body .zako.fire { opacity:1;}
body .zako img {
position:absolute; bottom:0;
max-width:568px; width:45%;
transition:transform 1s;
}
body .zako :nth-child(1) { left:0;  transform:translateX( 10%);}
body .zako :nth-child(2) { right:0; transform:translateX(-10%);}
body .zako.fire :nth-child(1) { transform:translateX(0);}
body .zako.fire :nth-child(2) { transform:translateX(0);}
/*↑雑魚↑*/