@charset "UTF-8";

/*↓頭↓*/
.sp21-head {
position:relative;
overflow:hidden;
background:linear-gradient(#000,#011);
color:#FFF; line-height:1; text-shadow:0 1px 2px #011; text-align:center;
padding:32px;
}
.sp21-head:after {
position:absolute; z-index:2; left:0; right:0; bottom:0;
height:96px;
background:linear-gradient(rgba(255,255,255,0.0),#FFF);
content:'';
}
.sp21-head > div:nth-of-type(1) {
position:absolute; z-index:1; left:0; right:0; top:0; bottom:0;
background:no-repeat center center; background-size:cover;
filter:blur(1px);
opacity:0.2;
}
.sp21-head > div:nth-of-type(2) { position:relative; z-index:3;}

.sp21-head img { display:block; max-width:192px; width:100%;}
.sp21-head img:nth-of-type(1) { max-width:192px; margin:0 auto;}
.sp21-head img:nth-of-type(2) {
display:block; max-width:480px; width:100%;
margin:32px auto;
}
.sp21-head h1 { font-size:28px; line-height:1;}
.sp21-head p { font-size:18px; color:#EFF; margin-top:32px;}
@media screen and ( max-width:768px ){
.sp21-head { padding:16px;}
.sp21-head h1 { font-size:20px;}
.sp21-head p { font-size:14px;}
}
/*↑頭↑*/
/*↓胴↓*/
.sp21-body > :first-child { margin-top:0 !important;}
.sp21-body > h3,
.sp21-body > h2 {  line-height:1; text-align:center;}
.sp21-body > h3 { color:#455; font-size:16px; margin-top:32px;}/* 投稿者 */
.sp21-body > h2 { color:#899; font-size:20px; margin-top:8px;}/* ゲームタイトル */

.sp21-body > p { font-size:14px; line-height:1.5;}
.sp21-body > p.pen {/* 投稿者コメント */
display:block;
background:#899;
box-shadow:0 0 4px #899, 0 0 4px #EFF inset;
border-radius:0.5em;
color:#FFF;  text-shadow:0 0 2px #011;
padding:1em; margin-top:32px;
}
.sp21-body > p.d4e {/* D4Eコメント */
margin:16px 1em 0;
}

.sp21-body > ul {/* 挿絵 */
display:flex; flex-wrap:wrap; justify-content:center;
margin-top:16px;
}
.sp21-body > ul li { width:192px; margin:16px 8px 0;}
.sp21-body > ul img {
display:block; width:100%; overflow:hidden;
box-shadow:0 0 4px #455;
border-radius:8px;
margin:0 auto 8px;
}
.sp21-body > ul a {
display:block;
background:linear-gradient(#FA0,#F80);
box-shadow:0 0 3px rgba(34,51,51,0.8), 0 2px 4px rgba(34,51,51,0.8), 0 2px 4px #F60 inset;
border:solid 2px; border-color:#FFF #ABB #899; border-radius:24px;
color:#FFF; font-size:14px; line-height:1; text-align:center; text-shadow:0 1px 2px #930,0 0 4px #630; text-decoration:none;
margin:8px auto 0; padding:8px 16px;
}
@media screen and ( max-width:768px ){
.sp21-body > h2 { font-size:20px;}
}
@media screen and ( max-width:480px ){
.sp21-body > h3 { font-size:14px;}
.sp21-body > h2 { font-size:16px;}
.sp21-body > p { font-size:12px;}
.sp21-body > ul { width:auto; margin:0;}
.sp21-body > ul li { max-width:256px; width:100%;}
}
/*↑胴↑*/