@charset "utf-8";

/*↓色↓*/
body {
background:radial-gradient(farthest-side circle at center top,#C70 10%,#950 20%,#101);
color:#233;
}
section a:link, section a:visited,
section a:hover, section a:active { color:#C83;}
/*↑色↑*/

section {
background:#000 url('../img/bg.png') no-repeat center bottom / contain;
box-shadow:0 0 16px #ED4,0 0 8px #C83,0 0 4px #642;
color:#FFF;
}
section .inner >:nth-child(n+2) { margin-top:16px;}
section .inner >p { font-size:16px; line-height:1.75; padding:8px;}

section h1 {
background:linear-gradient(#312,#632);
font-size:16px; text-shadow:0 1px 2px #000,0 0 3px #312;
padding:1em;
}
section h2 {
background:linear-gradient(#000,#632 10%,#C83,#ED4,#C83,#632 90%,#000);
font-size:20px; text-shadow:0 1px 2px #312,0 0 3px #632;
padding:1em;
}
@media screen and ( max-width:768px ){
section h1 { font-size:14px;}
section h2 { font-size:18px;}
}
@media screen and ( max-width:480px ) {
section h1 { font-size:12px;}
section h2 { font-size:16px;}
}

/*↓メイン↓*/
.main {
position:relative;
text-shadow:0 1px 3px #0CC;
padding:8px;
}
.main img:nth-of-type(1) {/* パケ */
position:relative; z-index:1;
max-width:304px; width:80%;
filter:drop-shadow(0 0 4px #FFF) drop-shadow(0 0 16px #C83);
margin:0 auto;
animation:section-main-img1 1s infinite alternate ease-in-out;
}
@keyframes section-main-img1 { 0% { transform:translateY(8px);} to { transform:translateY(-8px);}}
.main img:nth-of-type(2) {/* ロゴ */
position:relative; z-index:2;
max-width:512px; width:100%;
filter:drop-shadow(0 0 8px #000);
margin:-128px auto 0;
}/* ロゴ */
.main img:nth-of-type(3) {/* バッヂ */
position:absolute; z-index:3; right:0; top:0;
max-width:160px; width:33.33%;
animation:section-main-img3 0.5s infinite alternate;
}
@keyframes section-main-img3 { 0%{ transform:scale(1);}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 span { color:#E30;}
.main a {
display:inline-block;
background:linear-gradient(#612,#E30 40%,#F60,#E30 60%,#612);
border-radius:8px; border:solid 4px; border-color:#FFF #C60 #640; box-shadow:0 0 16px #906,inset 0 0 8px #412;
font-size:20px; text-shadow:0 1px 2px #200,0 0 4px #301; color:#FFF !important; text-decoration:none;
padding:1em 2em; margin-top:16px;
}
@media screen and (max-width:768px){
.main p:nth-of-type(1) { font-size:18px;}
.main p:nth-of-type(2) { font-size:14px;}
.main a { font-size:16px;}
}
/*↑メイン↑*/
/*↓収録↓*/
.lineup {
display:flex; flex-wrap:wrap;
font-size:16px; line-height:1.25;
padding:8px;
}
.lineup dt:nth-of-type(n+2),
.lineup dd:nth-of-type(n+2) { margin-top:0.25em;}
.lineup dt { position:relative; color:#ED4; width:21em; text-align:right; padding-right:1em;}
.lineup dt:after { position:absolute; right:0; top:0; content:'：';}
.lineup dd { width:calc(100% - 21em); text-align:left;}
@media screen and ( max-width:768px ) { .lineup { font-size:14px;}}
@media screen and ( max-width:480px ) {
.lineup { display:block;}
.lineup dt:nth-of-type(n+2) { margin-top:1em;}
.lineup dd:nth-of-type(n+2) { margin-top:0.25em;}
.lineup dt { width:auto; font-size:12px; text-align:left;}
.lineup dt:after { position:static; padding-right:0;}
.lineup dd { width:auto;padding-left:2em; margin-top:0.25em;}
}
/*↑収録↑*/

.caution { font-size:12px; line-height:1.25em; text-align:left; padding:8px;}
.caution >:nth-child(n+2) { margin-top:0.25em;}
.caution li { position:relative; padding-left:1.25em;}
.caution li:before { position:absolute; left:0; top:0; content:'※';}

/*↓同梱↓*/
.item { padding:8px;}
.item >:nth-child(n+2) { margin-top:16px;}
.item p { font-size:14px; line-height:1.75;}
.item img { display:inline-block; max-width:448px; width:100%;}
.item img.soundtrack { max-width:232px; border-radius:4px; box-shadow:0 0 8px #FFF;}
.item h3 { font-size:18px; color:#E30; text-shadow:0 0 4px #F0C,0 0 8px #906;}
@media screen and ( max-width:480px ) {
.item p { font-size:12px;}
.item h3 { font-size:14px;}
}
/*↑同梱↑*/
/*↓仕様↓*/
.spec { display:flex; flex-wrap:wrap; padding:8px;}
.spec dt,
.spec dd { font-size:14px; line-height:1.25;}
.spec dt:nth-of-type(n+2),
.spec dd:nth-of-type(n+2) { margin-top:0.25em;}
.spec dt { position:relative; color:#ED4; width:12em; text-align:right; padding-right:1em;}
.spec dt:before { position:absolute; right:0; top:0; content:'：';}
.spec dd { width:calc(100% - 12em); text-align:left;}
.spec dd a { margin-left:0.5em; white-space:nowrap;}
@media screen and ( max-width:480px ) {
.spec { font-size:12px;}
.spec dt { width:8em;}
.spec dd { width:calc(100% - 8em);}
}
/*↑仕様↑*/
/*↓商標↓*/
.copy { display:flex; flex-wrap:wrap; padding:4px;}
.copy li { font-size:10px; padding:4px;}
/*↑商標↑*/