@charset "UTF-8";

/*↓セクション↓*/
section {
background:#000;
box-shadow:0 0 24px #FC0,0 0 16px #FFC,0 0 8px #FFF;
color:#FFF;
}
/*↑セクション↑*/
/*↓h1↓*/
section > h1 {
background:linear-gradient(#123,#456);
color:#FFF; font-size:20px; text-shadow:0 1px 2px #000;
padding:1em;
}
@media screen and ( max-width:768px ){ section > h1 { font-size:16px;}}
@media screen and (max-width:480px){ section > h1 { font-size:14px;}}
/*↑h1↑*/
/*↓h2,p,img↓*/
section h2 {
color:#3FC; font-size:20px;
margin-top:1em; padding-bottom:0.25em;
padding:8px;
}
section h2:nth-of-type(1) { margin-top:16px;}
section h2:after {/* 下線 */
display:block;
width:100%; height:2px;
background:#F90;
margin-top:4px;
content:'';
}
section .inner > p { font-size:14px; line-height:1.5em; padding:8px;}
section .inner > img { display:inline-block; max-width:100%; width:auto; padding:8px;}
@media screen and (max-width:480px){
section h2 { font-size:16px;}
section .inner > p { font-size:12px;}
}
/*↑h2,p,img↑*/
/*↓注意↓*/
section .caution {
display:inline-block;
color:#F66; font-size:12px; line-height:1.25; text-align:left;
padding:8px;
}
section .caution li { position:relative; margin-left:1em;}
section .caution :nth-child(2) { margin-top:0.25em;}
section .caution li:before { position:absolute; left:-1em; top:0; content:'※';}
@media screen and ( max-width:768px ){
section .caution { font-size:10px;}
}
/*↑注意↑*/
/*↓メイン↓*/
.main { position:relative; text-shadow:0 1px 3px #0CC; padding:8px;}
.main img:nth-of-type(1) {/* パケ */
position:relative; z-index:1;
max-width:296px; width:80%; margin:0 auto;
animation:main-img1 1s infinite alternate ease-in-out;
 }
@keyframes main-img1 { 0% { transform:translateY(8px);} to { transform:translateY(-8px);}}
.main img:nth-of-type(2) {/* ロゴ */
position:relative; z-index:2;
max-width:400px; width:100%; margin:-64px auto 0;
}/* ロゴ */
.main img:nth-of-type(3) {/* 限定 */
position:absolute; z-index:3; right:16px; top:16px;
max-width:160px; width:33.33%;
animation:main-img3 0.5s infinite alternate;
}
@keyframes main-img3 { to { transform:scale(0.9);}}
.main p { margin-top:0.5em;}
.main p:nth-of-type(1) { font-size:24px; color:#FC6;}
.main p:nth-of-type(2) { font-size:16px; color:#FFF; line-height:1.25;}
.main p:nth-of-type(3) { font-size:32px; color:#F00;}
@media screen and ( max-width:768px ){
.main img:nth-of-type(2) { margin-top:-32px;}
.main p:nth-of-type(1) { font-size:18px;}
.main p:nth-of-type(3) { font-size:24px;}
}
/*↑メイン↑*/
/*↓ゲーム↓*/
.game { display:flex; flex-wrap:wrap; justify-content:space-around;}
.game li { max-width:208px; margin-top:16px; padding:0 8px;}
.game li:before { content:'' !important;}
.game img { position:relative; display:block; margin:0 auto;}
.game img:nth-of-type(1) { z-index:2; width:176px; margin-bottom:-24px;}
.game img:nth-of-type(2) { z-index:1; width:128px; margin-bottom:16px;}
.game p { font-size:12px; line-height:1.5; text-align:center;}
/*↑ゲーム↑*/
/*↓サントラ↓*/
.soundtrack { display:flex; flex-wrap:wrap; justify-content:space-around;}
.soundtrack > div { margin-left:32px; width:176px;}
.soundtrack h3 { color:#F93; font-size:14px; padding:8px;}
.soundtrack ol { font-size:12px; line-height:1.25; text-align:left; padding:8px;}
/*↑サントラ↑*/
/*↓仕様↓*/
.spec { display:flex; flex-wrap:wrap; font-size:14px; line-height:1.25em; padding:8px;}
.spec :nth-child(n+3) { margin-top:0.75em;}
.spec dt {
position:relative;
width:10em;
color:#FC6; text-align:right;
padding-right:1em;
}
.spec dt:after { position:absolute; right:0; top:0; content:'：';}
.spec dd { width:calc(100% - 10em); text-align:left;}
@media screen and (max-width:480px){
.spec { font-size:12px;}
.spec :nth-child(n+3) { margin-top:0;}
.spec dt { width:100%; text-align:left; padding-right:0;}
.spec dt:after { position:initial;}
.spec dt:nth-of-type(n+2) { margin-top:0.75em;}
.spec dd { width:100%; padding-left:1em;}}
/*↑仕様↑*/