@charset "UTF-8";

section {
position:relative;
box-shadow:0 0 24px #FC0,0 0 16px #FFC,0 0 8px #FFF;
color:#566;
}
section:before,
section:after {
position:absolute; z-index:-1; left:0; right:0; top:0; bottom:0;
content:'';
}
section:before{ background:linear-gradient(#F66,#FC6,#FF9);}
section:after {
background:url('../img/bg.png') 0 0 / 96px;
animation:section-bg 4s infinite linear;
}
@keyframes section-bg { to{ background-position:-96px -96px;}}

/*↓h1↓*/
h1 {
background:#233;
color:#FFF; font-size:20px;
padding:1em;
}
@media screen and ( max-width:768px ){ h1 { font-size:18px;}}
@media screen and ( max-width:480px ){ h1 { font-size:16px;}}
/*↑h1↑*/
/*↓ロゴ↓*/
.logo img { display:block; max-width:100%; width:auto; margin:0 auto;}
/*↑ロゴ↑*/
/*↓枠↓*/
.frame {
background:#FFF;
border:solid 4px #FC6; border-radius:16px;
color:#455;
padding:24px;
}
@media screen and ( max-width:768px ){
.frame { border-radius:8px; padding:8px;}
}
/*↑枠↑*/
/*↓導入↓*/
.intro .kv { padding:8px;}
.intro .kv img {
display:block; max-width:100%; width:auto; overflow:hidden;
box-shadow:0 0 4px #677;
border-radius:8px;
margin:0 auto;
}
.intro p { font-size:14px; line-height:1.5; padding:8px;}
.intro dl {
display:flex; flex-wrap:wrap;
font-size:16px; line-height:1.5;
padding:8px;
}
.intro dt {
position:relative;
width:33.33%;
color:#F66; text-align:right;
padding-right:1em;
}
.intro dt:after { position:absolute; right:0; top:0; content:'：';}
.intro dd { width:66.66%; text-align:left;}
.intro dd span { color:#F00; margin-left:0.5em;}
@media screen and ( max-width:768px ){
.intro p  { font-size:12px;}
.intro dl { font-size:14px;}
}
@media screen and ( max-width:480px ){
.intro dt { width:4em;}
.intro dd { width:calc(100% - 4em);}
}
/*↑導入↑*/
/*↓FAQ↓*/
.faq a {
display:inline-block;
background:linear-gradient(#F66,#C06);
box-shadow:0 0 4px #C06 inset,0 2px 4px #011;
border:solid 2px #FFF; border-radius:8px;
color:#FFF !important; font-size:20px; text-decoration:none !important;
padding:1em;
}
@media screen and ( max-width:768px ){ .faq a { font-size:18px;}}
@media screen and ( max-width:480px ){ .faq a { font-size:16px;}}
/*↑FAQ↑*/
/*↓詳細↓*/
.detail h3 { padding:8px;}
.detail h3 span {
position:relative;
display:block;
background:#F66;
color:#FFF; font-size:20px;
padding:1em; padding-left:calc(1.5em + 48px);
border-radius:8px;
}
.detail h3 span:before {
position:absolute; left:0.5em; top:50%;
display:block; width:48px; height:48px;
background:url('../img/champ.png') no-repeat 0 0 / contain;
transform:translateY(-50%);
content:'';
}
.detail h4 { color:#F66; font-size:16px; padding:8px;}
.detail p { font-size:14px; line-height:1.5; padding:8px;}
.detail .caution { padding:8px;}
.detail .caution p {
position:relative;
display:inline-block;
color:#E00; font-size:12px; line-height:1; text-align:left;
padding:0; padding-left:1em;
}
.detail .caution p:before { position:absolute; left:0; top:0; content:'※';}
@media screen and ( max-width:768px ){
.detail h3 span { font-size:16px; padding-left:calc(1.5em + 32px);}
.detail h3 span:before { width:32px; height:32px;}
.detail h4 { font-size:14px;}
.detail p { font-size:12px;}
.detail .caution p { font-size:10px;}
}
/*↑詳細↑*/
/*↓ゲーム↓*/
.game { display:flex; flex-wrap:wrap; justify-content:space-around;}
.game a {
position:relative;
display:block; width:256px; height:160px; overflow:hidden;
background:center center / cover;
border-radius:8px;
margin:8px;
}
.game p {
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8) 1em);
color:#FFF; font-size:12px;
padding:1em;
}
/*↑ゲーム↑*/
/*↓仕様↓*/
.spec {
display:flex; flex-wrap:wrap;
font-size:14px; line-height:1.5;
padding:8px;
}
.spec dt {
position:relative;
width:10em;
color:#F66; 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:768px ){
.spec { font-size:12px;}
}
@media screen and ( max-width:480px ){
.spec :nth-child(n+3) { margin-top:initial;}
.spec dt { width:100%; text-align:left; padding:0;}
.spec dt:after { position:initial;}
.spec dt:nth-of-type(n+2) { margin-top:1em;}
.spec dd { width:auto; margin-left:1em;}
}
/*↑仕様↑*/
/*↓商標↓*/
.copy { font-size:10px; text-align:left;}
.copy li { position:relative; margin-left:1em;}
.copy li:nth-of-type(n+2) { margin-top:0.5em;}
.copy li:before { position:absolute; left:-1em; top:0; content:'・';}
/*↑商標↑*/