@charset "utf-8";

/*↓section↓*/
section { color:#FFF;}
section a:link, section a:visited,
section a:hover, section a:active { color:#C03;}
section > div { position:relative;}
section > h2 {
position:relative;
background:#D02;
font-size:24px; text-shadow:0 1px 2px #312,0 0 3px #632;
padding:0.5em; margin:0 5em;
}
section > h2:before,
section > h2:after {
position:absolute; top:0; bottom:0;
display:block; width:5em;
background:linear-gradient(-45deg,
#D02 0.0em, #D02 2.0em, transparent 2.0em, transparent 2.2em,
#D02 2.2em, #D02 2.6em, transparent 2.6em, transparent 2.8em,
#D02 2.8em, #D02 3.0em, transparent 3.0em);
content:'';
}
section > h2:before { left:-5em;}
section > h2:after  { right:-5em; transform:scale(-1,-1);}
@media screen and ( max-width:768px ){
section > h2 { font-size:18px;}
}
@media screen and ( max-width:480px ) {
section > h2 { font-size:16px;}
}
/*↑section↑*/

/*↓メイン↓*/
.main {
text-shadow:0 0 2px #000, 0 0 2px #000, 0 0 4px #009, 0 0 8px #06C;
padding:32px;
}
.main img {
width:100%;
filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #009);
}
.main img:nth-of-type(1) { max-width:640px;}
.main img:nth-of-type(2) { max-width:720px; margin-top:16px;}
.main dl {
display:inline-block;
width:75%;
font-size:14px; line-height:1.25;
margin-top:32px;
}
.main dl dt { width:6em; float:left; color:#0CD; text-align:right;}
.main dl dd { width:calc(100% - 6em); float:right; text-align:left; padding-left:1em;}
.main dl a { color:#FC0 !important;}
.main > p:nth-of-type(1) { font-size:24px; margin-top:16px;}
.main > p:nth-of-type(2) { font-size:32px; margin-top:8px;}
.main a.store {
display:inline-block;
background:linear-gradient(#D02,#A04 49%,#603 51%,#A04);
border-radius:8px; border:solid 4px; border-color:#FFF #D02 #A04;
box-shadow:0 0 16px #A04, 0 0 8px #402 inset;
text-shadow:0 1px 2px #200,0 0 4px #301; color:#FFF !important; text-decoration:none;
padding:16px; margin-top:16px;
}
.main a.store :nth-child(1) { font-size:24px;}
.main a.store :nth-child(2) { font-size:16px; margin-top:0.5em;}
@media screen and ( max-width:768px ){
.main { padding:16px;}
}
@media screen and ( max-width:480px ){
.main dl { font-size:12px;}
.main > p:nth-of-type(1) { font-size:20px;}
.main > p:nth-of-type(2) { font-size:28px;}
.main a.store :nth-child(1) { font-size:18px;}
.main a.store :nth-child(2) { font-size:14px;}
}
/*↑メイン↑*/
/*↓アップデート↓*/
.update { padding:32px;}
.update .frame {
position:relative;
background:#FC0;
padding:16px;;
}
.update .frame:before {
position:absolute; left:0; right:0; top:0; bottom:0;
background:repeating-linear-gradient(45deg, #333, #333 8px, transparent 8px, transparent 16px);
content:'';
}
.update .frame > div { position:relative; background:#FFF; color:#233; padding:16px;}
.update .frame > div > :nth-child(n+2) { margin-top:16px;}
.update .frame > div.ver2 { background:#FFC;}
.update .frame > div.ver1 { background:#DEE;}

.update .frame > div > p { font-size:12px; line-height:1.5;}

.update h4 {
display:inline-block;
border-bottom:solid 2px;
font-size:16px;
padding-bottom:0.25em;
}
.update div.ver2 h4 { border-color:#D02;}
.update div.ver1 h4 { border-color:#899;}

.update ul {
display:inline-block;
width:80%;
font-size:14px; line-height:1.5; text-align:left;
padding-left:1em;
}
.update li { position:relative;}
.update li:before { position:absolute; left:-1em; top:0; content:'・';}
.update li span { background:#FC0;}

.update p.check { display:flex; justify-content:center; align-items:center; line-height:1;}
.update p.check input[checkbox] { width:40px;}
.update p.check label { padding-left:0.5em; cursor:pointer;}
.update p.check label.sw-0 { color:#D02;}
.update p.check label.sw-1 { color:#899;}
.update a {
display:inline-block;
box-shadow:0 2px 4px #BCC;
border-radius:8px;
font-size:16px; text-decoration:none !important;
padding:1em;
transition:background 0.5s, color 0.5s;
}
.update a.sw-0 { background:#899; color:#BCC !important; pointer-events:none;}
.update a.sw-1 { background:#D02; color:#FFF !important; pointer-events:auto;}
.update a :nth-child(1) { font-size:125%;}
.update a :nth-child(2) { margin-top:8px;}
@media screen and ( max-width:768px ){
.update { padding:16px;}
.update ul { width:90%;}
.update a { font-size:14px;}
}
@media screen and ( max-width:480px ){
.update h4 { font-size:14px;}
.update ul { width:100%; font-size:12px;}
.update a { font-size:12px;}
}
/*↑アップデート↑*/
/*↓導入↓*/
.intro { padding:32px;}
.intro img {
max-width:640px; width:100%;
filter:drop-shadow(0 0 8px #06C);
}
.intro p {
width:80%;
font-size:18px; line-height:1.5; text-shadow:0 0 4px #0CF, 0 0 8px #06C;
margin:1em auto 0;
}
@media screen and ( max-width:768px ){
.intro { padding:16px;}
.intro p { width:90%; font-size:16px;}
}
@media screen and ( max-width:480px ){
.intro p { width:100%; font-size:14px;}
}
/*↑導入↑*/
/*↓物語↓*/
.story { padding:24px;}
.story ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.story ul:nth-of-type(n+2) { margin-top:16px;}
.story li { padding:8px;}
.story li:nth-of-type(1) { width:272px;}
.story li:nth-of-type(2) { width:calc(100% - 272px);}
@media screen and ( min-width:769px ){
.story ul:nth-of-type(odd)  > :nth-child(1) { order:1;}
.story ul:nth-of-type(even) > :nth-child(1) { oeder:2;}
.story ul:nth-of-type(odd)  > :nth-child(2) { text-align:right;}
.story ul:nth-of-type(even) > :nth-child(2) { text-align:left;}
}
.story img {
width:100%;
background:#000;
box-shadow:0 0 2px #FFF, 0 0 4px #0CF, 0 0 8px #00C;
padding:8px;
}
.story h3 { font-size:24px; color:#FFC; border-bottom:solid 2px #D02; padding-bottom:4px;}
.story h3 span { font-size:75%; color:#CC9; margin-left:0.5em;}
.story h4 { font-size:18px; color:#0FC; margin:0.5em 0;}
.story p  { font-size:16px; line-height:1.5;}
@media screen and ( max-width:768px ){
.story { padding:8px;}
.story li:nth-of-type(1) { width:336px;}
.story li:nth-of-type(2) { width:100%;}
.story h3 { font-size:20px;}
.story h4 { font-size:16px;}
.story p  { font-size:14px;}
}
@media screen and ( max-width:480px ){
.story li:nth-of-type(1) { width:304px;}
.story h3 { font-size:18px;}
.story h4 { font-size:14px;}
.story p  { font-size:12px;}
}
/*↑物語↑*/
/*↓特典↓*/
.benefit { padding:24px;}
.benefit { display:flex; flex-wrap:wrap; justify-content:center;}
.benefit div { width:33.33%; padding:8px;}
.benefit div.w100 { width:100%;}
.benefit div > :nth-child(n+2) { margin-top:1em;}
.benefit div > span { display:flex; justify-content:center; align-items:center; height:240px;}
.benefit div > span img { max-width:100%; width:auto; max-height:100%; height:auto;}
.benefit h3 { color:#FE0; font-size:18px;}
.benefit h3 span { color:#BCC; font-size:75%;}
.benefit h4 { color:#0CD; font-size:16px;}
.benefit h4 + h4 { margin-top:0.25em !important;}
.benefit p { font-size:14px; line-height:1.25;}
.benefit ul {
display:inline-block;
font-size:14px; line-height:1.25; text-align:left;
}
.benefit ul li { position:relative; margin-left:1em;}
.benefit ul li:before { position:absolute; left:-1em; content:'・';}
@media screen and ( max-width:768px ){
.benefit { padding:8px;}
.benefit div { width:50%;}
}
@media screen and ( max-width:480px ){
.benefit div { width:100%;}
.benefit h3 { font-size:16px;}
.benefit h4 { font-size:14px;}
.benefit p { font-size:12px;}
.benefit ul { font-size:12px;}
}
/*↑特典↑*/
/*↓キャンペーン↓*/
.campaign { padding:24px;}
.campaign h3 { font-size:24px; padding:8px;}
.campaign ul { display:flex; flex-wrap:wrap;}
.campaign li { padding:8px;}
.campaign li:nth-of-type(1) { width:40%;}
.campaign li:nth-of-type(2) { width:60%;}
.campaign div {
width:100%; height:100%;
background:#FFF; border:solid 8px #8AD;
padding:16px;}
.campaign div > :nth-child(n+2) { margin-top:1em;}
.campaign div > h4 { font-size:18px; color:#8AD;}
.campaign div > p { font-size:14px; color:#566; line-height:1.5;}
.campaign div > a {
display:inline-block;
background:#004A85;
font-size:16px; color:#FFF !important; text-decoration:none !important;
padding:1em;
}
.campaign span {
display:inline-block;
font-size:12px; color:#899; line-height:1.25; text-align:left;
padding-left:1em;
}
.campaign span p { position:relative;}
.campaign span p:before { position:absolute; left:-1em; content:'※';}
@media screen and ( max-width:768px ){
.campaign { padding:8px;}
.campaign h3 { font-size:20px;}
.campaign li:nth-of-type(1),
.campaign li:nth-of-type(2) { width:100%;}
}
@media screen and ( max-width:480px ){
.campaign h3 { font-size:16px;}
}
/*↑キャンペーン↑*/
/*↓仕様↓*/
.spec { padding:24px;}
.spec dl {
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.5em;}
.spec dt { position:relative; color:#0CD; width:12em; text-align:right; padding-right:1em;}
.spec dt:after { position:absolute; right:0; content:'：';}
.spec dd { width:calc(100% - 12em); text-align:left;}
.spec dd a { margin-left:0.5em; white-space:nowrap;}
.spec li { position:relative; margin-left:1em;}
.spec li:before { position:absolute; left:-1em; content:'・';}
.spec p { position:relative; margin-left:1em; margin-top:0.5em; color:#D02;}/* 注意 */
.spec p:before { position:absolute; left:-1em; content:'※';}
@media screen and ( max-width:768px ) {
.spec { padding:8px;}
}
@media screen and ( max-width:480px ) {
.spec dl { font-size:12px;}
.spec dt { width:100%; text-align:left;}
.spec dt:after { position:initial;}
.spec dd { width:100%; padding-left:1em;}
}
/*↑仕様↑*/