@charset "UTF-8";

body {
background:radial-gradient(farthest-side circle at center top,#034 10%,#021 20%,#001);
color:#FFF;
}
section {
background:#000;
box-shadow:0 0 8px #FFF,0 0 16px #0FC;
}
section .inner >:nth-child(n+2) { margin-top:16px;}
section a:link, section a:visited,
section a:hover, section a:active { color:#0C9;}

/*↓h1↓*/
h1 {
background:#FFF;
color:#333; text-shadow:0 0 1px #333,0 0 2px #666;
font-size:24px;
padding:2em 1em 0;
}
h1 >* { display:block;}
h1 >:nth-child(1) { font-size:150%;}
h1 >:nth-child(2) { font-size:100%; margin-top:0.5em;}
@media screen and ( max-width:768px ) {
h1 { font-size:18px;}
}
@media screen and ( max-width:480px ) {
h1 { font-size:12px;}
}
/*↑h1↑*/

section > h2 {
background:linear-gradient(to right,#000,#0C9,#000);
font-size:20px; text-shadow:0 1px 2px #000, 0 0 4px #000;
padding:1em 2em;
}
@media screen and ( max-width:480px ) { section > h2 { font-size:16px;}}

.inner > p { font-size:14px; line-height:1.75; padding:8px;}
@media screen and ( max-width:480px ) { .inner > p { font-size:12px;}}

/*↓メイン↓*/
.main {
background:linear-gradient(#FFF 10%,#666 10%,#000);
color:#FFF; text-shadow:0 1px 2px #000;
padding:32px;
}
.main .kv { position:relative;}
.main .kv img:nth-of-type(1) {/* パケ */
max-width:304px; width:80%;
filter:drop-shadow(0 0 4px #FFF) drop-shadow(0 0 16px #0C9);
margin:0 auto;
}
.main .kv img:nth-of-type(2) {/* ロゴ */
position:absolute; z-index:1; left:50%; bottom:0;
max-width:512px; width:100%;
transform:translateX(-50%);
}
.main h2 { font-size:16px; margin-top:1em;}
.main .rel { font-size:20px; margin-top:1em; color:#FC3;}
.main .inc { font-size:16px; margin-top:0.5em; color:#FF6;}
.main .pri { font-size:24px; margin-top:0.5em;}
.main .pri span { color:#E30; margin-left:0.5em;}
.main .cap { font-size:14px; line-height:1.5; margin-top:2em;}
.main a {/* 商品ページ */
display:inline-block;
background:linear-gradient(#F90, #FC3, #FFC 48%, #600 52%, #F90, #FC3);
border-radius:8px; border:solid 4px; border-color:#FF6 #630 #300; box-shadow:0 4px 8px #000,inset 0 0 4px #300;
font-size:20px; color:#FFF !important; text-shadow:0 0 4px #420,0 0 4px #420,0 0 8px #630,0 0 8px #630; text-decoration:none;
padding:1em 2em; margin-top:16px;
}
.main .pv {
width:512px; height:288px;
box-shadow:0 0 16px #FFF;
margin:16px auto 0;
}
.main .pv iframe { width:100%; height:100%;}
@media screen and ( max-width:768px ){
.main { padding:16px;}
.main h2 { font-size:14px;}
.main .rel { font-size:16px;}
.main .inc { font-size:14px;}
.main .pri { font-size:20px;}
.main .cap { font-size:12px;}
.main a { font-size:16px;}
.main .pv { width:416px; height:234px;}
}
@media screen and ( max-width:480px ) {
.main .pv { width:288px; height:160px;}
}
/*↑メイン↑*/
/*↓アップデート↓*/
.update { background:#FFF; color:#666; padding:32px;}
.update >:nth-child(n+2) { margin-top:16px;}
.update > p { font-size:14px; line-height:1.25;}
.update a {
display:block;
background:#0C9; border-radius:8px;
color:#FFF !important; text-decoration:none !important;
padding:16px;
}
.update a :nth-child(1) { font-size:20px;}
.update a :nth-child(2) { font-size:16px; margin-top:8px;}
.update h3 { font-size:16px; color:#0C9;}
@media screen and ( max-width:480px ){
.update { padding:16px;}
.update p { font-size:12px;}
.update a :nth-child(1) { font-size:16px;}
.update a :nth-child(2) { font-size:12px;}
.update h3 { font-size:14px;}
}
/*↑アップデート↑*/
/*↓収録↓*/
.lineup {
display:inline-block;
color:#FE9; font-size:16px; line-height:1.25; text-align:left;
padding:8px;
}
.lineup li { position:relative; width:100%; padding-left:1em;}
.lineup li:before { position:absolute; left:0; top:0; content:'・';}
.lineup li:nth-child(n+2) { margin-top:0.25em;}
@media screen and ( max-width:480px ) {
.lineup { font-size:14px;}
}
/*↑収録↑*/

.item { max-width:100%; width:auto; padding:8px;}

/*↓仕様↓*/
.spec {
display:flex; flex-wrap:wrap;
font-size:14px; line-height:1.25;
padding:8px;
}
.spec dt:nth-of-type(n+2),
.spec dd:nth-of-type(n+2) { margin-top:0.25em;}
.spec dt { position:relative; color:#0C9; 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:512px ) {
.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;}
/*↑商標↑*/