@charset 'utf-8';

/*↓section↓*/
section {
position:relative;
overflow:hidden;
background:#000 url('../img/bg-1.jpg') 0 0 / contain;
box-shadow:0 0 24px #FC0, 0 0 16px #FFC, 0 0 8px #FFF;
border-radius:16px;
margin:0 32px;
}
section >.inner { padding:32px;}
section >.inner >:nth-child(n+2) { margin-top:32px;}
@media screen and ( max-width:768px ){
section { margin:0 16px;}
section >.inner { padding:16px;}
section >.inner >:nth-child(n+2) { margin-top:16px;}
}
@media screen and ( max-width:480px ){
section { border-radius:0; margin:0;}
}
/*↑section↑*/
/*↓h1↓*/
section > h1 {
background:linear-gradient(#024,#046);
box-shadow:0 2px 2px #024 inset;
color:#FFF; font-size:18px; text-shadow:0 1px 1px #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↑*/
/*↓メイン↓*/
.main { color:#FFF; text-shadow:0 1px 3px #001;}
.main img:nth-of-type(1) {/* パケ */
position:relative; z-index:1;
max-width:296px; width:80%; margin:16px auto 0;
filter:drop-shadow(0 0 16px #CFF);
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:512px; width:100%; margin:-64px auto 0;
}
.main h4 { font-size:16px;}
.main p { margin-top:16px;}
.main p:nth-of-type(1) { font-size:24px; color:#FC3;}
.main p:nth-of-type(2) { font-size:20px; color:#9FF;}
.main p:nth-of-type(3) { font-size:28px;}
.main p:nth-of-type(3) span { 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:20px;}
.main p:nth-of-type(2) { font-size:16px;}
.main p:nth-of-type(3) { font-size:24px;}
}
@media screen and ( max-width:480px ){
.main img:nth-of-type(2) { margin-top:-32px;}
.main p { margin-top:8px;}
.main p:nth-of-type(1) { font-size:16px;}
.main p:nth-of-type(2) { font-size:12px;}
.main p:nth-of-type(3) { font-size:20px;}
}
/*↑メイン↑*/
/*↓アップデート↓*/
.update {
background:#046;
border:solid #FFF; border-width:2px 0;
box-shadow:0 2px 4px #012 inset;
color:#CFF;
padding:32px;
}
.update h4 { font-size:18px; margin-bottom:8px;}
.update p { font-size:14px; line-height:1.25;}
.update a {
display:inline-block;
background:linear-gradient(#F66,#C06);
box-shadow:0 2px 2px #012;
border-radius:8px;
color:#FFF; font-size:20px; text-shadow:0 1px 1px #201; text-decoration:none;
padding:16px; margin:16px 0;
}
@media screen and ( max-width:768px ){
.update { padding:16px;}
.update h4 { font-size:16px;}
.update a { font-size:18px;}
}
@media screen and ( max-width:768px ){
.update >:nth-child(n+2) { margin-top:8px;}
.update h4 { font-size:14px;}
.update p { font-size:12px;}
.update a { font-size:16px;}
}
/*↑アップデート↑*/
/*↓動画↓*/
section iframe {
width:512px; height:288px;/* 16:9 */
box-shadow:0 0 8px #FFF,0 0 16px #0FF;
}
@media screen and ( max-width:768px ){ section iframe { width:384px; height:216px;}}
@media screen and ( max-width:480px ){ section iframe { width:256px; height:144px;}}
/*↑動画↑*/
/*↓枠↓*/
.frame {
background:url('../img/bg-2.jpg') 0 0 / contain;
border:solid 2px #840; border-radius:16px;
color:#640;
padding:22px;
}
.frame > h2 { font-size:20px; padding:8px;}
.frame > h3 {
background:linear-gradient(#036,#069);
border-radius:8px;
font-size:18px; color:#FFF; text-shadow:0 1px 1px #036;
padding:0.75em; margin:8px;
}
.frame > p { font-size:14px; line-height:1.5; padding:8px;}
.frame > img { display:inline-block; max-width:100%; width:auto; padding:8px;}
.frame > img:nth-of-type(1) { max-width:128px; width:100%;}/* 布団で寝るカーバンクル */
@media screen and ( max-width:768px ){
.frame { padding:6px;}
.frame > h2 { font-size:18px;}
.frame > h3 { font-size:16px;}
}
@media screen and ( max-width:480px ){
.frame > h2 { font-size:16px;}
.frame > h3 { font-size:14px;}
.frame > p { font-size:12px;}
}
/*↑枠↑*/
/*↓ラインナップ↓*/
.lineup {
display:inline-block;
text-align:left;
padding:8px; margin-left:10%; margin-right:10%;
}
.lineup li { position:relative; font-size:16px; line-height:1.25; margin-left:1em;}
.lineup li:before { position:absolute; left:-1em; top:0; content:'・';}
/*↑ラインナップ↑*/
/*↓注意(p,li両対応)↓*/
.caution {
display:inline-block;/* 文字量に応じて中央揃え */
color:#F33; text-align:left;/* でも左揃え */
padding:8px;
}
.caution >* { position:relative; font-size:12px; line-height:1.25; margin-left:1em;}
.caution >:nth-child(2) { margin-top:0.25em;}
.caution >:before { position:absolute; left:-1em; top:0; content:'※';}
@media screen and ( max-width:768px ){
.caution >* { font-size:10px;}
}
/*↑注意↑*/
/*↓仕様↓*/
.spec { display:flex; flex-wrap:wrap; font-size:14px; line-height:1.25; padding:8px;}
.spec :nth-child(n+3) { margin-top:0.75em;}
.spec dt {
position:relative;
width:10em;
color:#069; 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;}}
/*↑仕様↑*/
/*↓商標など↓*/
.copyright {
background:linear-gradient(#024,#046);
box-shadow:0 2px 2px #024 inset;
color:#FFF; text-shadow:0 1px 1px #010;
padding:24px;
}
.copyright ul { display:flex; flex-wrap:wrap; justify-content:center;}/* 商標 */
.copyright li { font-size:10px; padding:4px;}
.copyright div { display:inline-block; padding:4px;}
.copyright p {/* 注意 */
position:relative;
font-size:10px; line-height:1.25; text-align:left;
margin-left:1em;
}
.copyright p:before { position:absolute; left:-1em; top:0; content:'※';}
@media screen and ( max-width:768px ){
.copyright { padding:8px;}
.copyright li,
.copyright p { font-size:10px;}
}
/*↑商標など↑*/