@charset "Shift-JIS";

h2{width:100% !important; margin:0 auto 20px !important;}

/*
================================================================================================================
インストーラーダウンロード
================================================================================================================
*/
#dl{}
#dl .cat{background-color:rgba(0,0,0,.5); border:1px solid #ff35a4;}
#dl .cat + .cat{margin:20px auto 0;}
#dl .cat > strong{
display:block;
background-color:#ff35a4;
font-size:20px;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);
padding:10px 20px;}
#dl .cat > .inner{padding:20px;}
#dl .cat > .inner a{color:#00aeff; text-decoration:underline;}
#dl .cat > .inner a:hover{text-decoration:none;}

#dl .dl-btn{
display:block;
width:100%;
color:#00aeff;
background-color:rgba(0,0,0,.5);
font-size:18px;
text-align:center;
font-family:'M PLUS Rounded 1c', sans-serif;
border:1px solid #00aeff;
border-radius:10px;
transform:rotate(0.05deg);
padding:15px 5px;
margin:40px auto 0;
transition:all .2s ease;}
#dl .dl-btn > br{display:none;}
#dl .dl-btn:hover{
color:#fff;
background-color:rgba(0,0,0,.3);
border:1px solid #fff;
box-shadow:0 0 8px #00aeff, inset 0 0 8px #00aeff;
text-shadow:0 0 5px #00aeff, 0 0 5px #00aeff, 0 0 3px #00aeff;
cursor:pointer;}

#dl .dl-btn + ul.notice{margin:10px auto 40px;}

@media screen and (max-width:480px){
#dl .cat > strong{font-size:18px;}
#dl .dl-btn{font-size:15px; margin:20px auto 0;}
#dl .dl-btn + ul.notice{margin:10px auto 20px;}}
@media screen and (max-width:430px){
#dl .cat > .inner{padding:10px;}
#dl .cat > strong{font-size:16px; padding:5px 10px;}}
@media screen and (max-width:370px){
#dl .dl-btn{font-size:14px; padding:10px 5px;}
#dl .dl-btn > br{display:block;}}

/*
================================================================================================================
ゲームを始める前に
================================================================================================================
*/
#startup .cat{
width:100%;
max-width:800px;
background-image:url(../img/common/frame/04/01.png) , url(../img/common/frame/04/02.png) , url(../img/common/frame/04/03.png) , url(../img/common/frame/04/04.png);
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
background-position:left top , right top , right bottom , left bottom;
padding:5px;
margin:0 auto;}
#startup .cat + .cat{margin:30px auto 0;}

#startup .cat > .inner{width:100%; background:linear-gradient(to bottom, rgba(0,0,0,.3) 20%,rgba(0,0,0,.1) 100%); padding:20px;}

#startup .cat > .inner > strong{
display:block;
position:relative;
font-size:20px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
text-shadow:0 0 4px rgba(28,188,255,.9) , 0 0 10px rgba(28,188,255,.9);
padding-left:40px;
margin:0 auto 20px;}
#startup .cat > .inner > strong::after{
display:block;
content:"";
position:absolute;
left:40px;
bottom:-5px;
width:calc(100% - 40px);
height:1px;
background-color:#fff;
box-shadow:0 0 5px #00b4ff , 0 0 5px #00b4ff , 0 0 3px #00b4ff;}

#startup .cat > .inner > strong::before{display:block; position:absolute; font-size:50px; top:0; left:0;}
#startup .cat:nth-child(3) strong::before{content:"1";}
#startup .cat:nth-child(4) strong::before{content:"2";}
#startup .cat:nth-child(5) strong::before{content:"3";}
#startup .cat:nth-child(6) strong::before{content:"4";}
#startup .cat:nth-child(7) strong::before{content:"5";}
#startup .cat:nth-child(8) strong::before{content:"6";}
#startup .cat:nth-child(9) strong::before{content:"7";}
#startup .cat:nth-child(10) strong::before{content:"8";}

#startup .cat > .inner > p{padding:0 30px;}
#startup .cat > .inner > p a{color:#ffc78b; transition:color .2s ease;}
#startup .cat > .inner > p a:hover{color:#feff8b;}

#startup .cat.other > .inner > strong{padding-left:0;}
#startup .cat.other > .inner > strong > span{display:inline-block; padding-right:10px;}
#startup .cat.other > .inner > strong::after{width:100%; left:0;}
#startup .cat.other > .inner > p{padding:0 10px;}

#startup .cat > .inner .setting{
width:calc(100% - 30px);
background-color:rgba(0,0,0,.3);
padding:20px;
margin:10px 0 10px auto;}
#startup .cat > .inner .setting b{color:#69cfff;}

#startup .img{width:100%; margin:20px auto 10px;}
#startup .img > p{width:100%; max-width:500px; margin:10px auto;}
#startup .img > p > img{width:100%;}

@media screen and (max-width:640px){#startup .cat > .inner > strong{font-size:16px;}}
@media screen and (max-width:480px){
#startup .cat > .inner > p{padding:0 0 0 30px;}
#startup .cat > .inner{padding:20px 10px 10px;}
#startup .cat > .inner .setting{padding:10px;}}

#startup a.basic{
display:block;
width:calc(100% - 60px);
color:#ffc78b;
background-color:rgba(0,0,0,.5);
text-align:center;
font-family:'M PLUS Rounded 1c', sans-serif;
border:1px solid #ffc78b;
border-radius:10px;
transform:rotate(0.05deg);
padding:10px 5px;
margin:20px auto 0;
transition:all .2s ease;}
#startup a.basic br{display:none;}
#startup a.basic:hover{
color:#fff;
background-color:rgba(0,0,0,.3);
border:1px solid #fff;
box-shadow:0 0 8px #fbb649 , inset 0 0 8px #fbb649;
text-shadow:0 0 5px #fbb649 , 0 0 5px #fbb649, 0 0 3px #fbb649;}
@media screen and (max-width:640px){#startup a.basic br{display:block;}}
@media screen and (max-width:430px){#startup a.basic{width:100%;}}

#startup .cat > .inner > .bar{width:calc(100% - 30px); height:1px; background-color:#1cbcff; margin:20px 0 20px auto;}

/*
================================================================================================================
FAQ
================================================================================================================
*/
#faq > ul.tab{
position:relative;
display:flex;
width:100%;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto 20px;
z-index:10;}
#faq > ul.tab li{
display:flex;
width:calc((100% / 3) - 5px);
background-color:rgba(0,0,0,.5);
text-align:center;
border:1px solid #fff;
align-items:center;
justify-content:center;
padding:6px 0;
margin:5px 0;
opacity:.7;
transition:all .3s ease;}
#faq > ul.tab li.select,
#faq > ul.tab li:hover{cursor:pointer; text-shadow:0 0 3px #1cbcff , 0 0 5px #1cbcff; box-shadow:0 0 8px #1cbcff , inset 0 0 8px #1cbcff; opacity:1;}

@media screen and (max-width:800px){#faq > ul.tab li{width:calc((100% / 2) - 5px);}}
@media screen and (max-width:430px){#faq > ul.tab li{width:calc((100% / 2) - 3px); padding:8px 0; margin:3px 0;}}

#faq .cat{
width:100%;
background-color:rgba(0,0,0,.5);
padding:20px;
margin:0 auto;}
#faq .cat + .cat{border-top:1px solid #3b517c;}

#faq .cat > div{position:relative; padding-left:35px;}
#faq .cat > div::before{color:#fff; font-size:24px; position:absolute; top:0; left:0;}

#faq .cat div.q,
#faq .cat div.a::before{font-family:'M PLUS Rounded 1c', sans-serif; transform:rotate(0.05deg); font-weight:500 !important;}

#faq .cat div.q{color:#ffc78b; font-size:16px;}
#faq .cat div.a{line-height:160%; margin-top:20px; padding-top:5px;}

#faq .cat div.q::before{content:"Q."; text-shadow:0 0 4px #ffc78b , 0 0 10px #ffc78b;}
#faq .cat div.a::before{content:"A."; text-shadow:0 0 4px rgba(28,188,255,.9) , 0 0 10px rgba(28,188,255,.9);}

#faq .cat div.p > b{font-weight:normal !important;}
#faq .cat div.a > b{color:#69cfff; font-weight:normal;}
#faq .cat div.a > em{color:#00fff6;}
#faq .cat div.a > a{color:#00aeff; text-decoration:underline;}
#faq .cat div.a > a:hover{text-decoration:none;}

#faq .cat div.a > .link{display:block; margin-top:5px; font-size:13px;}
#faq .cat div.a > .link a{
display:inline-block;
color:#00aeff;
border:1px solid #00aeff;
border-radius:3px;
padding:0 10px;
margin:5px 0 0 5px;
transition:all .2s ease;}
#faq .cat div.a > .link a:hover{color:#000; background-color:#00aeff;}

#faq .cat .img{width:100%; max-width:480px; margin:20px auto 0;}
#faq .cat .img img{width:100%;}

@media screen and (max-width:480px){#faq .cat div.q{font-size:14px;}}

/*
================================================================================================================
動作環境
================================================================================================================
*/
#system ul.setting{display:flex; flex-wrap:wrap; line-height:180%;}
#system ul.setting > li{display:flex; background-color:rgba(0,0,0,.5); flex-wrap:wrap; padding:10px 20px;}
#system ul.setting > li:nth-child(odd){
width:150px;
text-align:center;
font-weight:bold;
justify-content:center;
align-items:center;}
#system ul.setting > li:nth-child(even){width:calc(100% - 150px); border-left:1px solid #3b517c;}

#system .bar{width:100%; height:1px; border:dashed 1px #3b517c; margin:20px auto;}

#system ul.setting > li + li{border-top:1px solid #3b517c;}
#system ul.setting > li:nth-child(2){border-top:none;}

#system ul.setting li > b{display:block; width:100%;}
#system ul.setting li > strong{display:block; width:100%; background-color:#00285d; padding:5px 10px; margin:5px auto;}
#system ul.setting li em{color:#ffc78b;}

#system ul.setting > li:nth-child(odd),
#system ul.setting li > strong,
#system ul.setting li > b{font-size:15px; font-weight:700; font-family:'Noto Sans JP', sans-serif;}

@media screen and (max-width:640px){
#system ul.setting > li:nth-child(odd),
#system ul.setting > li:nth-child(even){width:100%;}

#system ul.setting > li:nth-child(odd){background-color:#3b517c;}
#system ul.setting > li:nth-child(even){border-left:none; margin-bottom:10px;}

#system ul.setting > li:nth-child(odd),
#system ul.setting li > strong,
#system ul.setting li > b{font-size:14px;}}

@media screen and (max-width:430px){
#system ul.setting > li{padding:10px;}

#system ul.setting > li:nth-child(odd),
#system ul.setting li > strong,
#system ul.setting li > b{font-size:13px;}}

/*
================================================================================================================
リスト装飾
================================================================================================================
*/
ul.notice{width:100%; }
ul.notice li{position:relative; font-size:12px; padding-left:15px;}
ul.notice li:before{display:block; position:absolute; top:0; left:0;}
ul.notice.ast li:before{content:"※";}
ul.notice.dot li:before{content:""; width:6px; height:6px; background-color:#fff; border-radius:50%; top:9px;}
ul.notice.imp li{padding-left:25px;}
ul.notice.imp li:before{content:"注：";}

/*動作環境*/
#system > ul.notice{margin:10px auto 0;}
#system ul.notice{padding:0 10px;}
@media screen and (max-width:480px){#system > ul.notice li{font-size:10px !important;}}
@media screen and (max-width:430px){#system ul.notice{padding:0 5px;}}

/*FAQ*/
#faq > ul.notice{margin:20px auto 0;}
@media screen and (max-width:480px){#faq > ul.notice li{font-size:10px !important;}}