@charset "Shift-JIS";

/*e-amusementサイトテンプレート*/
header,footer,
header#id_nav_menu_1{position:relative !important; z-index:9999 !important;}
#wrapper{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#container{background-color:#000;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; height:100%;}
body{
min-width:320px !important;
color:#fff;
background-color:#000;
margin:0;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
header,footer{z-index:1;}
h1,h2,h3,h4,h5,h6{display:none;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:bold; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

button:focus,input[type="submit"]:focus{outline:0;}

a img{
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
transition:all 0.6s ease;}

/*画像サイズ*/
img.img800{
display:block;
width:100%;
max-width:801px;
border:1px solid #fff;
margin:15px auto;}
@media screen and (max-width:840px){img.img800{width:90%;}}

img.img640{
display:block;
width:100%;
max-width:641px;
border:1px solid #fff;
margin:15px auto;}
@media screen and (max-width:700px){img.img640{width:90%;}}

/*
================================================================================================================
PAGE COMMON
================================================================================================================
*/
.main-bg,
.main-bg::before{
display:block;
position:fixed;
top:50px;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
content:"";
background-color:#07114d;
background-image:url("../img/common/bg/bg05.png") , url("../img/common/bg/bg04.png") , url("../img/common/bg/bg03.png"), url("../img/common/bg/bg02.jpg") , url("../img/common/bg/bg01.jpg");
background-repeat:repeat-x , repeat-y , repeat , no-repeat , no-repeat;
background-size:auto , 100% , 100% , 100% , 100%;
background-position:top , top , top , top , top;
padding:0;
opacity:1;
z-index:1;
/*z-index:-1;*/}

.page-title,.page-title p{width:100%; height:100px;}

.page-title{
position:relative;
max-width:1360px;
color:#fff;
background-repeat:no-repeat;
background-position:top;
font-weight:bold;
margin:20px auto 0;
z-index:3;
text-shadow:2px 1px 6px rgba(39,65,128,0.5),-2px -1px 6px rgba(39,65,128,0.5),
            2px 2px 3px rgba(39,65,128,0.5),-2px -2px 3px rgba(39,65,128,0.5),
            0px 0px 3px rgba(39,65,128,0.3),-1px -1px 3px rgba(39,65,128,0.3),
            1px 1px 3px rgba(39,65,128,0.3);}

.page-title p{
position:relative;
background-repeat:no-repeat;
background-position:top;
background-size:90%;
margin:0 auto;}

.page-title p span{
display:block;
position:absolute;
top:0;
left:24%;
width:auto;
font-size:26px;
padding-top:2%;}

@media screen and (min-width:981px){
.page-title{background-image:url("../img/common/title/title_bg01.png"); background-size:90%;}
#startup.page01 .page-title p{background-image:url("../img/common/title/startup_page01.png");}/*ゲームの準備*/
#startup.page02 .page-title p{background-image:url("../img/common/title/startup_page02.png");}/*動作環境*/
#startup.page03 .page-title p{background-image:url("../img/common/title/startup_page03.png");}/*INFINITASベーシックコース*/
#startup.page04 .page-title p{background-image:url("../img/common/title/startup_page04.png");}/*FAQ*/
#howto.page01 .page-title p{background-image:url("../img/common/title/howto_page01.png");}/*基本の遊び方*/
#howto.page02 .page-title p{background-image:url("../img/common/title/howto_page01.png");}/*操作方法*/
#howto.page03 .page-title p{background-image:url("../img/common/title/howto_page01.png");}/*楽曲譜面の増やし方*/
#howto.page04 .page-title p{background-image:url("../img/common/title/howto_page01.png");}/*ライバル機能*/
#howto.page05 .page-title p{background-image:url("../img/common/title/howto_page01.png");}/*プレーカスタマイズ機能*/
#howto.page06 .page-title p{background-image:url("../img/common/title/howto_page01.png");}/*追加オプション*/
#music.page01 .page-title p{background-image:url("../img/common/title/music_page01.png");}/*収録曲*/
#djdata.page01 .page-title p{background-image:url("../img/common/title/djdata_page01.png");}/*ステータス*/
#djdata.page02 .page-title p{background-image:url("../img/common/title/djdata_page01.png");}/*コメント編集*/
#djdata.page03 .page-title p{background-image:url("../img/common/title/djdata_page01.png");}/*段位認定*/
#djdata.page04 .page-title p{background-image:url("../img/common/title/djdata_page01.png");}/*ライバルリスト*/
#djdata.page05 .page-title p{background-image:url("../img/common/title/djdata_page01.png");}/*プレーヤー検索*/
#djdata.page06 .page-title p{background-image:url("../img/common/title/djdata_page01.png");}/*逆ライバル情報*/
#djdata.page07 .page-title p{background-image:url("../img/common/title/djdata_page01.png");}/*DJNAME変更*/
#djdata.page08 .page-title p{background-image:url("../img/common/title/djdata_page08.png");}/*プレーカスタマイズ*/
#djdata.page09 .page-title p{background-image:url("../img/common/title/djdata_page09.png");}/*INFINITASチケット*/
#djdata.page10 .page-title p{background-image:url("../img/common/title/djdata_page10.png");}/*楽曲パック*/
#event.page01 .page-title p{background-image:url("../img/common/title/event_page01.png");}/*イベント汎用*/
#error.page01 .page-title p{background-image:url("../img/common/title/error_page01.png");}/*エラー*/}

@media screen and (max-width:1100px){
.page-title,.page-title p{height:80px;}}

@media screen and (max-width:980px){
.page-title,.page-title p{height:100px;}
.page-title{background-image:url("../img/common/title/title_bg02.png"); background-size:100%;}
.page-title p span{font-size:30px; left:10%; padding-top:3.3%;}}

@media screen and (max-width:800px){
.page-title,.page-title p{height:80px;}}

@media screen and (max-width:700px){
.page-title p span{font-size:24px; left:10%; padding-top:3%;}}

@media screen and (max-width:640px){
.page-title,.page-title p{height:65px;}}

@media screen and (max-width:500px){
.page-title,.page-title p{height:50px;}
.page-title p span{font-size:18px; padding-top:2.5%;}}

@media screen and (max-width:420px){
.page-title,.page-title p{height:45px;}
.page-title p span{font-size:16px; padding-top:2%;}}

@media screen and (max-width:350px){
.page-title,.page-title p{height:36px;}
.page-title p span{font-size:14px; padding-top:1.8%;}}

/*
================================================================================================================
ERROR
================================================================================================================
*/
#error .main{
position:relative;
width:100%;
max-width:980px;
text-align:center;
margin:100px auto;
z-index:2;}

#error .main strong{font-size:18px; display:block;}
#error .main strong br{display:none;}
#error .main p{font-size:14px; margin:20px auto;}
#error .main span{display:block; font-size:12px;}

@media screen and (max-width:1100px){#error .main{width:90%;}}

@media screen and (max-width:800px){
#error .main strong{line-height:22px;}
#error .main strong br{display:block;}
#error .main p,
#error .main span{text-align:left !important;}}

@media screen and (max-width:370px){
#error .main strong{font-size:15px;}}

/*
================================================================================================================
ラジオボタン
================================================================================================================
*/
input[type="radio"]{display:none !important; border:0 !important; margin:0 !important;}

.input-radio{
display:block;
position:relative;
text-align:left;
padding-left:20px;}

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

.input-radio label:after{
top:5px;
left:3px;
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:#ff00f0; 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; width:90%; margin:1% 5%; font-size:13px;}}*/