/*
================================================================================================================
テーマ変更
================================================================================================================
*/
.main-cat-name{
position:relative;
font-size:22px;
font-family:'M PLUS 1', sans-serif;
letter-spacing:1px;
text-align:left;
padding:8px 10px !important;
margin:0 auto 20px;}

.title-blue{
font-size:18px;
letter-spacing:1px;
border-bottom:3px solid #00ab95!important;
margin:0 auto 10px;}

.bar-cut{display:block; width:100%; height:2px; background:#000; margin:30px auto;}
.bar-cut:last-child{margin:30px auto 0 auto;}

@media screen and (max-width:640px){
.main-cat-name{font-size:18px;}
.title-blue{font-size:15px;}}

@media screen and (max-width:480px){
.main-cat-name{font-size:16px;}
.title-blue{font-size:14px;}}

/*
================================================================================================================
COMMON
================================================================================================================
*/
div.txt{display:block; width:100%; color:#ff00ff; font-size:13px; font-weight:bold; text-align:center; margin:20px auto;}
@media screen and (max-width:640px){div.txt{font-size:12px;}}

/*タブ内容非表示*/
.no-show{display:none;}

/*見出し*/
#play-menu ul li,
#visit-rank-menu ul li,
#series-menu ul li,
.title-skyblue,
.title-yellow{
text-shadow:1px 1px 1px rgba(0,0,0,.5) , 2px 2px 5px rgba(0,0,0,.3);
font-family:'Noto Sans JP', sans-serif;
font-weight:700;}

.title-gold{color:#fff; background:#1fd8ff; font-weight:700;}

.title-gold,
.title-blue,
#error-page .error_title,
#error-page .sub-title{font-family:'M PLUS 1', sans-serif;}

/*
================================================================================================================
タブ切り替え用ボタン(2カラム)-SP/DP用
================================================================================================================
*/
#play-menu{position:relative; /*z-index:3;*/}
#play-menu ul{display:flex; width:100%; margin:20px auto 10px;}
#play-menu ul li{
width:48%;
color:#fff;
background:linear-gradient(to bottom, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
font-size:16px;
text-align:center;
border-radius:10px;
border:1px solid #888;
padding:15px 0;}
#play-menu ul li:first-child{margin-right:2%;}
#play-menu ul li:last-child{margin-left:2%;}
#play-menu ul li:hover{cursor:pointer;}

/*blue*/
#play-menu ul li:first-child:hover,
#play-menu ul li:first-child.tab-select{
background:linear-gradient(to bottom, #0cc0ff 0%,#65fcfe 100%);
border:1px solid #006ba2;}

/*yellow*/
#play-menu ul li:last-child:hover,
#play-menu ul li:last-child.tab-select{
background:linear-gradient(to bottom, #ffb502 0%,#ffe858 100%);
border:1px solid #a87300;}

@media screen and (max-width:640px){
#play-menu ul{margin:20px auto 0;}
#play-menu ul li{font-size:14px;}}

@media screen and (max-width:480px){
#play-menu ul li{padding:10px 0;}}

/*
================================================================================================================
タブ切り替え用ボタン(3カラム)-行脚王RANKING用
================================================================================================================
*/
#visit-rank-menu ul{display:flex; width:100%;}
#visit-rank-menu ul li{
width:32%;
color:#fff;
background:linear-gradient(to bottom, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
font-size:16px;
text-align:center;
border-radius:10px;
border:1px solid #000;
margin:20px 0;
padding:15px 0;}
#visit-rank-menu ul li:first-child{margin-right:2%;}
#visit-rank-menu ul li:last-child{margin-left:2%;}
#visit-rank-menu ul li:hover{cursor:pointer;}

/*blue*/
#visit-rank-menu ul li:first-child:hover,
#visit-rank-menu ul li:first-child.tab-select{
background:linear-gradient(to bottom, #0cc0ff 0%,#65fcfe 100%); border:1px solid #006ba2;}

/*yellow*/
#visit-rank-menu ul li:nth-child(2):hover,
#visit-rank-menu ul li:nth-child(2).tab-select{
background:linear-gradient(to bottom, #ffb502 0%,#ffe858 100%); border:1px solid #a87300;}

/*pink*/
#visit-rank-menu ul li:last-child:hover,
#visit-rank-menu ul li:last-child.tab-select{
background:linear-gradient(to bottom, #ff38dc 0%,#ffa4ff 100%); border:1px solid #aa0058;}

@media screen and (max-width:480px){
#visit-rank-menu ul li{font-size:13px; padding:10px 0;}}

/*
================================================================================================================
タブ切り替え用ボタン(6カラム)-楽曲シリーズ用
================================================================================================================
*/
#series-menu ul{display:flex; width:100%; align-items:center; justify-content:space-between; margin:20px auto;}
#series-menu ul li{
color:#fff;
background:linear-gradient(to bottom, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
font-size:16px;
text-align:center;
border-radius:5px;
border:1px solid #000;
padding:15px 0;}
#series-menu ul li:hover{cursor:pointer;}

/*beginner*/
#series-menu ul li:first-child:hover,
#series-menu ul li:first-child.tab-select{
background:linear-gradient(to bottom, #79d100 0%,#93ff00 100%); border:1px solid #79d100;}

/*normal*/
#series-menu ul li:nth-child(2):hover,
#series-menu ul li:nth-child(2).tab-select{
background:linear-gradient(to bottom, #20a8ff 0%,#86cfff 100%); border:1px solid #20a8ff;}

/*hyper*/
#series-menu ul li:nth-child(3):hover,
#series-menu ul li:nth-child(3).tab-select{
background:linear-gradient(to bottom, #ff7800 0%,#ffb746 100%); border:1px solid #ff7800;}

/*another*/
#series-menu ul li:nth-child(4):hover,
#series-menu ul li:nth-child(4).tab-select{
background:linear-gradient(to bottom, #ff0000 0%,#fa5758 100%); border:1px solid #ff0000;}

/*leggendaria*/
#series-menu ul li:nth-child(5):hover,
#series-menu ul li:nth-child(5).tab-select{
background:linear-gradient(to bottom, #ce00d6 0%,#f500ff 100%); border:1px solid #ce00d6;}

/*all*/
#series-menu ul li:last-child:hover,
#series-menu ul li:last-child.tab-select{
background:linear-gradient(to bottom, #ffcc00 0%,#fff400 100%); border:1px solid #ffcc00;}

@media screen and (min-width:901px){
#series-menu ul li{width:calc((100% / 6) - 5px);}}

@media screen and (max-width:900px){
#series-menu ul{flex-wrap:wrap;}
#series-menu ul li{width:calc((100% / 3) - 5px); font-size:13px;}

#series-menu ul li:nth-child(4),
#series-menu ul li:nth-child(5),
#series-menu ul li:nth-child(6){margin-top:10px;}}

@media screen and (max-width:480px){#series-menu ul li{padding:10px 0;}}
@media screen and (max-width:370px){#series-menu ul li{font-size:11px;}}

/*
================================================================================================================
ページネーション仮
================================================================================================================
*/
.page-navi{display:block; position:relative; width:100%; margin:10px auto; max-width:980px;}
.page-navi table{width:100%; text-align:center; max-width:980px;}
.page-navi table td:first-child{width:10%;}
.page-navi table td:nth-child(2){width:80%;}
.page-navi table td:last-child{width:10%;}

.page-navi table a{display:block; width:100%; color:#444; font-weight:bold;}
.page-navi table a:hover{text-decoration:underline; color:#0066cc;}

.page-navi table .navi-prev,
.page-navi table .navi-next{
width:100%;
color:#777;
background-color:rgba(255,255,255,0.8);
font-size:13px;
text-align:center;
border:2px solid #444;
padding:5px;}

.page-navi table .navi-page{
display:flex;
width:90%;
max-width:800px;
flex-wrap:wrap;
justify-content:center;
margin:0 5%;}

.page-navi table .navi-page .num{
display:flex;
font-size:13px;
text-align:center;
white-space:nowrap;
border:2px solid #444;
margin:4px;
padding:5px 10px;}

.page-navi table .navi-page .num:not(a){color:#777; background-color:rgba(255,255,255,0.8);}

@media screen and (max-width:799px){
.page-navi table td:first-child{display:none; width:0;}
.page-navi table td:nth-child(2){width:100%;}
.page-navi table td:last-child{display:none; width:0;}
.page-navi table .navi-prev,
.page-navi table .navi-next{display:none;}}

/*NEXT PREVのみ*/
.next-prev{display:block; position:relative; width:100%; margin:10px auto; background-color:transparent;}
.next-prev table{width:100%; text-align:center; background-color:transparent; border:none !important;}
.next-prev table td:first-child{width:50% !important; background-color:transparent;}
.next-prev table td:last-child{width:50% !important; background-color:transparent;}

.next-prev table .navi-prev,
.next-prev table .navi-next{
width:40% !important;
color:#777;
background-color:rgba(255,255,255,0.8);
font-size:13px;
text-align:center;
border:2px solid #444;
padding:5px;}

.next-prev table .navi-prev{margin-right:60%;}
.next-prev table .navi-next{margin-left:60%;}
.next-prev table .navi-prev a,
.next-prev table .navi-next a{display:block; color:#000; font-weight:bold; padding:5px 0;}
.next-prev table .navi-prev a:hover,
.next-prev table .navi-next a:hover{text-decoration:underline; color:#0066cc;}

@media screen and (max-width:480px){
.next-prev table .navi-prev,
.next-prev table .navi-next{width:90%!important;}
.next-prev table .navi-prev{margin-right:10%!important;}
.next-prev table .navi-next{margin-left:10%!important;}}

/*
================================================================================================================
ページネーション スクロールタイプ仮
================================================================================================================
*/
.page-scroll{display:flex; position:relative; width:100%; margin:10px auto;}
.page-scroll:after{visibility:hidden; display:block; content: " "; clear:both; height:0;}

.page-scroll .page-navi{display:flex;}
.page-scroll .page-navi a{text-decoration:none;}
.page-scroll .page-navi a:hover{cursor:pointer;}
.page-scroll .page-navi:nth-child(3){flex-direction:row-reverse;}

/*ページ送りボタン*/
.page-scroll .page-navi{width:10%; margin:0 auto;}
.page-scroll .page-navi .page-first,
.page-scroll .page-navi .page-prev,
.page-scroll .page-navi .page-next,
.page-scroll .page-navi .page-last{background:#fafafa; background:linear-gradient(to bottom, #fafafa 0%,#eeeeee 50%,#e0e0e0 51%,#f9f9f9 100%); text-align:center; margin:0;}
.page-scroll .page-navi .page-first,
.page-scroll .page-navi .page-last{width:45%;}
.page-scroll .page-navi .page-prev,
.page-scroll .page-navi .page-next{width:30%;}
.page-scroll .page-navi .page-prev{margin:0 15% 0 5%;}
.page-scroll .page-navi .page-next{margin:0 5% 0 15%;}
.page-scroll .page-navi a{display:block; color:#222; border:2px solid #222; padding:3px 0;}
.page-scroll .page-navi a:hover{color:#c8281e; border:2px solid #c8281e;}

/*スクロールパーツ-ページ数*/
.page-scroll .page-num .page-amount{width:100%; color:#fff; font-size:12px; font-weight:bold; text-align:center;}

@media screen and (min-width:800px){
/*スクロールパーツ*/
.page-scroll .page-num{
display:block;
position:relative;
width:80%;
height:20px;
background:linear-gradient(to bottom, #5d5c5c 0%,#464646 45%,#3e3d3d 50%,#313030 100%);
border:1px solid #000;
border-radius:10px;
margin-top:8px;}

/*スクロールパーツ-可動パーツ*/
.page-scroll .page-num .scroll-tab{
display:block;
position:absolute;
top:0;
left:0;
width:10%;
height:18px;
background:linear-gradient(to bottom, #d2281e 0%,#c7281e 50%,#9e2018 51%,#d2251c 100%);
border:1px solid #320a09;
border-radius:8px;}}

@media screen and (max-width:799px){
.page-scroll .page-navi{width:45%;}
.page-scroll .page-num{width:10%; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000);}
.page-scroll .page-navi .page-first,
.page-scroll .page-navi .page-last{width:45%;}
.page-scroll .page-navi .page-prev,
.page-scroll .page-navi .page-next{width:30%;}
.page-scroll .page-navi .page-prev{margin:0 15% 0 5%;}
.page-scroll .page-navi .page-next{margin:0 5% 0 15%;}
.page-scroll .page-num .page-amount{font-size:14px; margin-top:8px;}}

@media screen and (max-width:980px){
.page-scroll .page-navi{width:20% !important;}
.page-scroll .page-num{width:60% !important;}}

@media screen and (max-width:480px){
.page-scroll .page-navi{width:40% !important;}
.page-scroll .page-num{width:20% !important; font-size:11px !important;}
.page-scroll .page-num .page-amount{font-size:11px !important;}}

/*
================================================================================================================
カテゴリ名
================================================================================================================
*/
.title-blue,
.title-skyblue,
.title-yellow,
.title-gold{text-align:center; padding:8px 0;}

.title-skyblue{background:linear-gradient(to bottom, #0cc0ff 0%,#65fcfe 100%);}/*SP用*/
.title-yellow{background:linear-gradient(to bottom, #ffb502 0%,#ffe858 100%);}/*DP用*/

@media screen and (max-width:640px){
.title-blue,
.title-skyblue,
.title-yellow,
.title-gold{font-size:15px;}}

@media screen and (max-width:480px){
.title-blue,
.title-skyblue,
.title-yellow,
.title-gold{font-size:13px; padding:5px 0;}}

/*
================================================================================================================
フォーム用 ラジオボタン
================================================================================================================
*/
#base select{
min-height:30px;
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance:none !important;
background-image:url(/game/2dx/30/images/common/select.png);
background-size:20px;
background-repeat:no-repeat;
background-position:right 5px center;
background-color:#fff;
border:1px solid #000;
font-size:13px;
letter-spacing:2px;
padding:0 5px;}
#base select::-ms-expand{display:none;}

#base button,
#base input[type="submit"]{display:block; min-height:30px; box-sizing:border-box;}

#base input[type="text"]{display:block; min-height:30px; border:1px solid #000; padding:5px; box-sizing:border-box;}

/*共通*/
input[type="radio"]{display:none !important; border:0 !important; margin:0 !important;}

.input-radio{
display:block;
position:relative;
padding:0 10px 0 22px;}

.input-radio label{
display:block;
font-size:13px;
text-align:left;
cursor:pointer;}
.input-radio label:before{
top:0;
left:0;
width:18px;
height:18px;
background-color:rgba(255,255,255,0.7);
border:1px solid #222;}

.input-radio label:after{
top:4px;
left:4px;
width:10px;
height:10px;
background-color:transparent;
transform:scale(0);}

.input-radio label:before,
.input-radio label:after{
content: "";
position:absolute;
display:inline-block;
border-radius:50%;
transition:transform .2s ease;}

.input-radio input[type="radio"]:checked + label:after{
background-color:#ba00ba;
transform:scale(1);}

@media screen and (min-width:800px){
.input-radio{float:left; width:40%; margin:0 5%;}
.input-radio:after{visibility:hidden; display:block; content: " "; clear:both; height:0;}}
@media screen and (max-width:799px){
#base select{font-size:12px !important; background-size:15px;}
.input-radio label{float:none; display:block; /*width:90%; margin:1% 5%;*/ font-size:13px;}}

/*
================================================================================================================
プレーカスタマイズ 設定変更 チェックボックス
================================================================================================================
*/
input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-checkbox{
display:block;
position:relative;
padding:0 10px 0 22px;}

.input-checkbox label{
display:inline-block;
font-size:13px;
cursor:pointer;
padding-top:3px;}

.input-checkbox label:before{
top:4px;
left:0;
width:16px;
height:16px;
background-color:rgba(255,255,255,0.7);
border:1px solid #333;}

.input-checkbox label:before,
.input-checkbox label:after{
content:"";
position:absolute;
display:inline-block;
transition:transform .2s ease;}

.input-checkbox label:after{
top:5px;
left:4px;
width:8px;
height:17px;
margin-top:-5.5px;
border-right:3px solid transparent;
border-bottom:3px solid transparent;
border-radius:1.5px;
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

.input-checkbox input[type="checkbox"]:checked + label:after{border-color:#ba00ba;}

/*
================================================================================================================
ボタン
================================================================================================================
*/
/*マウスオフ*/
#base button.submit_btn,
#base input[type="submit"].submit_btn,
#base div.submit_btn{width:100%; font-size:14px; font-weight:bold; text-align:center;}

/*リンク装飾*/
#base button.submit_btn,
#base input[type="submit"].submit_btn,
#base div.submit_btn a{width:100%; color:#fff; background:#333; border-radius:5px; transition:background .2s ease; padding:10px 0; border:1px solid #000;}
#base div.submit_btn a{display:block;}

/*マウスオン*/
#base button.submit_btn:hover,
#base input[type="submit"].submit_btn:hover,
#base div.submit_btn a:hover{cursor:pointer; background:#999; text-decoration:none !important;}

@media screen and (max-width:480px){
#base button.submit_btn,
#base input[type="submit"].submit_btn,
#base div.submit_btn a{font-size:12px; padding:8px 0;}}

/*
================================================================================================================
戻るボタン
================================================================================================================
*/
.back-btn{width:30%; margin:0 auto;}
.back-btn div{
width:100%;
font-size:16px;
font-weight:bold;
text-align:center;
margin:0 1%;}
.back-btn div a{
display:block;
width:100%;
color:#fff;
background-color:#555;
border-radius:5px;
padding:15px 0;
transition:background .2s ease;}
.back-btn div a:hover{background-color:#ba00ba;}
@media screen and (max-width:480px){
.back-btn{width:100% !important; margin:0 auto;}
.back-btn div a{padding:10px 0;}}

/*
================================================================================================================
エラー
================================================================================================================
*/
#error-page .frame{text-align:left; margin:0 auto 40px;}
#error-page .frame:last-child{margin:0 auto;}
#error-page .error_btn a{color:#fff; background-color:#000; border:1px solid #00ffff; border-radius:10px;}
#error-page .error_btn a:hover{color:#fff; text-shadow:0 0 10px rgba(0,255,255,.5) , 0 0 5px rgba(0,255,255,1); box-shadow:0 0 10px rgba(0,255,255,.5) , 0 0 5px rgba(0,255,255,1);}

#error-page a{color:#fa3435; font-weight:bold; transition:color .2s ease;}
#error-page a:hover{color:#fc0;}

#error-page .error_title{
font-size:18px;
font-weight:bold;
text-align:center;
margin:0 auto 20px;}

#error-page .sub-title{
display:block;
width:100%;
color:#fff;
background-color:#ef00ba;
font-size:14px;
text-align:center;
margin:15px 0 5px 0;
padding:5px;}

#error-page p{padding:10px 80px 0;}

#error-page .error_btn a{
display:block;
width:100%;
font-size:15px;
font-weight:bold;
text-align:center;
padding:10px 0;
margin:20px auto 0;
transition:all .2s ease;}

@media screen and (max-width:800px){
#error-page{padding:20px;}
#error-page p{padding:0 40px;}}

@media screen and (max-width:480px){
#error-page{font-size:12px; padding:20px 10px;}
#error-page p{padding:0 10px; font-size:11px !important;}
#error-page .error_title{font-size:14px;}
#error-page .error_btn a{font-size:12px;}
#error-page .sub-title{font-size:12px;}}

@media screen and (max-width:400px){
#error-page .sub-title{font-size:12px;}}

#error-page .error_login{text-align:center;}
#error-page .error_login span{font-size:18px; font-weight:bold;}
#error-page p{font-size:13px;}

@media screen and (max-width:480px){
#error-page .error_login span{font-size:15px;}}