@charset 'utf-8';

.freegames {
text-align:center;
animation:freegames 1s 1s forwards;
transform:translateY(16px);
opacity:0;
padding:24px;
}
.freegames h2 { font-size:18px; padding:8px;}
.freegames div + h2 { margin-top:16px;}
@keyframes freegames { to { transform:translateY(0); opacity:1;}}
@media screen and ( max-width:768px ){
.freegames { padding:8px;}
.freegames h2 { font-size:14px;}
}

/* ac,egg */
.freegames .ac,
.freegames .egg { display:flex; flex-wrap:wrap; justify-content:center;}
.freegames .item { padding:8px;}
.freegames .item a {
position:relative;
display:block;
background:#000 no-repeat center center / contain;
color:#FFF; text-align:center; text-decoration:none !important;
}
.freegames .ac .item a { width:256px; height:192px;}
.freegames .egg .item a { width:192px; height:144px;}
.freegames .item span {
display:block;
position:absolute; left:0; right:0; top:0; bottom:0;
background:center center / cover;
opacity:0;
}
.freegames .item a:hover span { animation:item-span 0.25s linear forwards;}
@keyframes item-span { to { opacity:1;}}
.freegames .item a > p {/* 機種 */
position:absolute; left:-4px; top:-4px;
background:rgba(0,0,0,75%);
border:solid 1px #FFF;
box-shadow:0 2px 3px #000;
font-size:12px;
padding:0.5em;
}
.freegames .item div {
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(rgb(0,0,0,0),rgb(0,0,0,75%) 8px);
padding:8px 16px;
}
.freegames .ac .item h3 { font-size:16px;}
.freegames .egg .item h3 { font-size:14px;}
.freegames .item div > p { color:#BCC; margin-top:4px;}
.freegames .ac .item div > p { font-size:14px;}
.freegames .egg .item div > p { font-size:12px;}
/* ac,egg */

/* compile */
.freegames .compile { padding:4px; margin-top:16px;}
.freegames .compile > * { line-height:1.25; padding:4px;}
.freegames .compile h4 { font-size:16px;}
.freegames .compile h4 a { color:#F66;}
.freegames .compile p { font-size:14px; color:#9AA;}
@media screen and ( max-width:768px ){
.freegames .compile h4 { font-size:14px;}
.freegames .compile p { font-size:12px;}
}
/* compile */