@charset 'utf-8';

section.game.top { padding-bottom:8px;}
section.game.btm { padding-top:8px;}

a.necpc {
display:inline-block;
background:rgb(255,255,255,12.5%);
border:solid 2px #FFF; border-radius:8px;
color:#FFF; font-size:16px; text-shadow:none; text-decoration:none;
padding:1em;
}
a.necpc:hover { animation:a_necpc 0.5s forwards;}
@keyframes a_necpc { 0% { background:#FFF; filter:drop-shadow(0 0 8px #FFF);}}
@media screen and ( max-width:768px ){
a.necpc { font-size:14px;}
}

.flash:after {
position:absolute; left:0; right:0; top:0; bottom:0;
display:block;
content:'';
}
.flash:hover:after { animation:flash 0.5s forwards;}

@keyframes flash { 0% { background:#FFF;}}
.acfree ul { display:flex; flex-wrap:wrap; justify-content:center;}
.acfree ul li { display:block; padding:8px;}
.acfree a {
position:relative;
display:block; width:240px; height:180px;
box-shadow:0 2px 2px rgb(0,0,0,50%);
background:#000 no-repeat center center / cover;
color:#FFF !important; text-decoration:none !important;
}
.acfree a div {
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(transparent,rgb(0,0,0,75%) 16px);
padding:24px 8px 8px;
}
.acfree a h3 { font-size:16px;}
.acfree a p { font-size:12px; opacity:75%; margin-top:4px;}
.acfree > p { font-size:14px; padding:8px;}

.slide { background:#000; overflow:hidden;}
.slide a { position:relative; display:flex;}
.slide ul { white-space:nowrap;}
.slide ul { width:2400px; animation:slide 24s linear infinite;}
@keyframes slide { to {transform:translateX(-100%);}}
.slide li {
display:inline-block;
width:200px; height:150px;
background:no-repeat center center / cover;
}

@media screen and ( max-width:1200px ){
.slide ul { width:200vw;}
.slide li { width:calc(100vw / 6); height:calc(100vw / 6 * 0.75);}
}
@media screen and ( max-width:800px ){
.slide ul { width:300vw;}
.slide li { width:calc(100vw / 4); height:calc(100vw / 4 * 0.75);}
}
@media screen and ( max-width:600px ){
.slide ul { width:400vw;}
.slide li { width:calc(100vw / 3); height:calc(100vw / 3 * 0.75);}
}
@media screen and ( max-width:400px ){
.slide ul { width:600vw;}
.slide li { width:calc(100vw / 2); height:calc(100vw / 2 * 0.75);}
}

.egguser { display:inline-block; font-size:16px; line-height:1.5; text-align:left;}
.egguser li { position:relative; padding-left:1em;}
.egguser li:before { position:absolute; left:0; top:0; display:block; content:'\30fb';}

.manual { display:flex; flex-wrap:wrap; justify-content:center;}
.manual div { text-align:left; padding:8px;}
.manual div h3 { font-size:14px;}
.manual div ul { display:block; font-size:16px; line-height:1.25; margin-top:8px;}
.manual div li { position:relative; padding-left:1em;}
.manual div li:before { position:absolute; left:0; top:0; display:block; content:'\30fb';}
.manual .pho { position:relative; width:480px; height:320px;}
.manual .pho img { position:absolute; display:block;}
.manual .pho img.bg { left:8px; top:8px; width:384px;}
.manual .pho img.ss { right:8px; bottom:8px; width:240px; box-shadow:0 2px 2px rgb(0,0,0,50%);}
@media screen and ( max-width:768px ){
.manual div h3 { font-size:12px;}
.manual div ul { font-size:14px;}
.manual .pho { max-width:360px; width:100%; height:240px;}
.manual .pho img.bg { width:256px;}
.manual .pho img.ss { width:180px;}
}
.copy {
display:flex; flex-wrap:wrap; justify-content:center;
font-size:10px; color:rgb(255,255,255,67%);
padding:6px;
}
.copy li { padding:2px;}