@charset "utf-8";

body {
 background-color:#ffffff;
 font-size:12px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
body, h1, h2, h3, h4, p, ul, li, dl, dt, dd {
  margin:0;
}
li { list-style:none; }

ul,li{ padding:0px; margin:0px; }

img { border:none; }

a { text-decoration:none; }

@media screen and (min-width:800px) {.pc{display: block;}.sp{display: none;}}
@media screen and (max-width:799px) {.pc{display: none;}.sp{display: block;}}

@media screen and (min-width:640px) {.pc1{display: block;}.sp1{display: none;}}
@media screen and (max-width:639px) {.pc1{display: none;}.sp1{display: block;}}

#ddr_body{
width:100%;
  overflow-x: hidden;
 background:url("../images/common/ddr_bg.jpg") top center no-repeat fixed #f6f3d2;
}
.ddr_body_on{
width:100%;
max-width:1400px;
 margin:0px auto;
}

#ddr_body #title_bg{
 height:200px;
 margin:0px auto;
}

#ddr_body #title_bg div.title_logo{
  width:98%;
  max-width:460px;
  margin: 0 auto;
 padding-top:10px;
}
#ddr_body #title_bg div.title_logo img{
width: 100%;
  
}

#ddr_body #title_bg .inner{
 position:relative;
}

#ddr_body #title_bg #ontitle_link{
  margin:-180px 2% auto auto;
 padding-top:0px;
 width:152px;
  float: right;
}

#ddr_body #title_bg #ontitle_link li{
 overflow: hidden;
}
#ddr_body #title_bg #ontitle_link #freeplay{
 height:0px;
 padding-top:100px;
 width:99px;
 margin:0px auto 6px;
 background:url("../images/common/free_play_icon.png") no-repeat;
}
#ddr_body #title_bg #ontitle_link #shop a{
 width:152px;
 height:0px;
 padding-top:52px;
 display:block;
 background:url("../images/common/serch_button_mini.png") no-repeat;
 background-position:0px 0px;
}
#ddr_body #title_bg #ontitle_link #shop a:hover{
 background-position: 0 -52px;
}

#ddr_body #goto_page_top{
 height:40px;
 text-align:right;
}
#ddr_body #goto_page_top #button{
 margin:0 auto;
}

#ddr_body #goto_page_top #button a{
 background:url("../images/common/pagetop_btn.png") no-repeat;
 display:block;
 width:157px;
 height:0px;
 padding-top:24px;
 overflow:hidden;
 margin:8px 0px 0px 820px;
}
#ddr_body #goto_page_top #button a:hover{
background-position:0 -24px;
}
/*
================================================================================================================
サイドメニュー
================================================================================================================
*/

#ddr_left div.menu_top{
 background:url(../images/common/side_base_top.png) no-repeat;width:206px;heigth:0px;padding-top:16px;
}
#ddr_left div.menu_mdl{
width:206px;text-align:center; margin-left: -18px;
}
#ddr_left div.menu_mdl div.title{
margin:0px 0px 10px 0px;
}
#ddr_left div.menu_mdl div.item{
width:184px;height:0px;padding-top:24px;overflow:hidden;
background-position:0px 0px;
margin:10px auto 0px auto;
}
#ddr_left div.menu_mdl div.item:hover{
background-position:0px -24px;
}


#ddr_left div.menu_mdl div.item#bottom{
 margin-bottom:6px;
}

#ddr_left div.menu_mdl div.item#top{
 margin-top:6px;
}

#ddr_left div.menu_mdl div.subitem{
width:184px;height:0px;padding-top:24px;overflow:hidden;
background-position:0px 0px;
margin:0px auto 0px auto;
}
#ddr_left div.menu_mdl div.subitem:hover{
background-position:0px -24px;
}

#ddr_left div.menu_btm{
background:url(../images/common/side_base_under.png) no-repeat;width:206px;height:0px;padding-top:58px;
}

/*
================================================================================================================
コンテンツ内分割
================================================================================================================
*/
#ddr_contents{
text-align:left;
width:100%;
  margin:0px auto 0px auto;
  max-width: 1600px;
}
#ddr_main{
width:100%;
  margin:0px auto 0px auto;
}
#ddr_left{
 width:206px;
  margin:0px auto 0px 10px;
  display:inline-block;
 text-align:left;
  vertical-align:top;
}
#ddr_right{
 width:calc( 100% - 224px );
 display:inline-block;
 text-align:left;vertical-align:top;
}
/*
================================================================================================================
メイン項目
================================================================================================================
*/
#ddr_right div.main{
border:1px solid #000000;
background:#ffffff;
padding:12px 0px 12px 0px;
margin:4px 0px 0px 0px;
}

/*
================================================================================================================
ユーザーのコミュニティニックネーム、ダンサーネーム
================================================================================================================
*/

#ddr_body .user_all{
 height:52px;
 width:98%;
 max-width:1400px;
 margin:4px auto 6px 2%;
 position:relative;
}
@media screen and (max-width:639px) {#ddr_body .user_all{height:110px; width:96%; margin:4px auto 6px 2%;}}

#ddr_body .user_all .nickname {
 width:48%;
 height:47px;
  margin-right:1%;
 display:block;
 overflow:hidden;
  background-color: aliceblue;
  border: solid 1px #534747;
 display: inline-block;
 position:relative;
  background-image: url("../images/common/gate_menu_c_name.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size:40%;
  
}
@media screen and (max-width:639px) {#ddr_body .user_all .nickname {width:100%; position:relative;}}

#ddr_body .user_all .nickname:hover{
  background-color:lemonchiffon;
  cursor:pointer;
}
 
#ddr_body .user_all .nickname img{
 position:absolute;
 left:40%;
 top:3px;
 height:41px;
 width:41px;
}
#ddr_body .user_all .nickname .name_str{
 position:absolute;
 left:42%;
 top:18px;
 font-size:12px;
 text-align:center;
 width:50%;
}

#ddr_body .user_all .dancer_name{
 width:48%;
 height:47px;
 position:relative;
 overflow:hidden;
  background-color: aliceblue;
  border: solid 1px #534747;
 display: inline-block;
 position:relative;
  background-image: url("../images/common/gate_menu_d_name.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size:30%;
}
@media screen and (max-width:639px) {#ddr_body .user_all .dancer_name {width:100%; position:relative;}}
#ddr_body .user_all .dancer_name:hover{
  background-color:lemonchiffon;
  cursor:pointer;
}

#ddr_body .user_all .dancer_name img{
 position:absolute;
 left:30%;
 top:3px;
 height:41px;
 width:41px;
}

#ddr_body .user_all .dancer_name .name_str{
 position:absolute;
 left:32%;
 top:18px;
 font-size:12px;
 text-align:center;
 width:50%;
}
#ddr_body .user_all .community_nickname a .name_str,
#ddr_body .user_all .dancer_name a .name_str{
 text-decoration:underline;
}
#ddr_body .user_all .community_nickname a:hover .name_str,
#ddr_body .user_all .dancer_name a:hover .name_str{
 text-decoration:none;
}
#ddr_body .user_all .dancer_name a#no_link .name_str{
 text-decoration:none;
}
/*
#ddr_body #ddr_contents .user_all .community_nickname a{
 background-position:0px 0px;
}
#ddr_body #ddr_contents .user_all .dancer_name a{
 background-position:-475px 0px;
}
#ddr_body #ddr_contents .user_all .community_nickname a:hover{
 background-position:0px -64px;
}
#ddr_body #ddr_contents .user_all .dancer_name a:hover{
 background-position:-475px -64px;
}
#ddr_body #ddr_contents .user_all .dancer_name a:hover#no_link{
 background-position:-475px 0px;
}*/

/*float 解除*/
#ddr_body #ddr_menu ul:after,
#ddr_body #user_name:after{
clear:both;
}


@media screen and (max-width:799px) {
  #ddr_left{display: none;}
  #ddr_right{width: 100%;}
}


/*
================================================================================================================
楽曲絞込(ポップアップの絞込み)
================================================================================================================
*/
#ddr_right .game_type#t_narrowing {
 margin-top:2px;
 background-image:url("../images/music/button_shiborikomi.png");
 height /**/:33px;
 width:131px;
}
#ddr_right .game_type#t_narrowing:hover{
 background-position:0 -33px;
}

#slide_contents{
/*width:670px;*/
padding-bottom:12px;
/*display:none;*/
}

.tab{
overflow:hidden;
/*margin:0px 30px;*/
/*width:153%;*/
}
.tab.w100{width:100%;}
.tab.w153{width:153%;}
.tab.w144{width:144%;}
.tab li{
 float:left; 
 margin-right:1px;
 display:block;
}

.tab li.bpm{
 height: 31px;
 max-width: 59px;
 background: url(../images/music/music_button_bpm.png);
 background-position-y:0px;
}
.tab li.bemani, .tab li.level, .tab li.level_s, .tab li.level_d,
.tab li.clearrank, .tab li.genle, .tab li.musicname,
.tab li.version, .tab li.all, .tab li.course, .tab li.allcourse {line-height:0 !important;}
.tab li.bemani img, .tab li.level img, .tab li.level_s img, .tab li.level_d img,
.tab li.clearrank img, .tab li.genle img, .tab li.musicname img,
.tab li.version img, .tab li.all img, .tab li.course img, .tab li.allcourse img {width: 100%;}
.tab li.bemani a, .tab li.level a, .tab li.level_s a, .tab li.level_d a,
.tab li.clearrank a, .tab li.genle a img, .tab li.musicname a,
.tab li.version a, .tab li.all a, .tab li.course a, .tab li.allcourse a {width:100%; line-height:0 !important;}
.tab li.bemani{
 /*height: 31px;*/
 width: 11.0%;
 max-width: 76px;
 background: url(../images/music/music_button_bemani.png);
 background-position:top;
background-size:100%;
} 

.tab li.level{
/* height: 31px;*/
 width: 8.2%;
 max-width: 60px;
 background: url(../images/music/music_button_level.png);
 background-position:top;
 background-size:100%;
} 

.tab li.level_s{
/* height: 31px;*/
 width: 16.1%;
 max-width: 110px;
 background: url(../images/music/music_button_level_s.png);
 background-position:top;
background-size:100%;
} 

.tab li.level_d{
/* height: 31px;*/
 width: 16.1%;
 max-width: 110px;
 background: url(../images/music/music_button_level_d.png);
 background-position:top;
background-size:100%;
} 

.tab li.clearrank{
/* height: 31px;*/
 width: 12.4%;
 max-width: 86px;
 background: url(../images/music/music_button_clear.png);
 background-position:top;
background-size:100%;
} 

.tab li.genle{
/* height: 31px;*/
 width: 11.0%;
 max-width: 76px;
 background: url(../images/music/music_button_genre.png);
 background-position:top;
background-size:100%;
} 


.tab li.hit{
 height: 31px;
 width: 94px;
 background: url(../images/music/music_button_hit.png);
 background-position:top;
} 

.tab li.musicname{
 /*height: 31px;*/
 width: 8.2%;
 max-width: 57px;
 background: url(../images/music/music_button_musicname.png);
 background-position:top;
background-size:100%;
} 

.tab li.version{
 /*height: 31px;*/
 width: 11.2%;
 max-width: 77px;
 background: url(../images/music/music_button_version.png);
 background-position:top;
background-size:100%;
} 

.tab li.all{
/* height: 31px;*/
 width: 11.2%;
 max-width: 77px;
 background: url(../images/music/music_button_all.png);
 background-position:top;
background-size:100%;
} 

.tab li.course{
/* height: 31px;*/
 width: 11.2%;
 max-width: 77px;
 background: url(../images/music/music_button_course.png);
 background-position:top;
background-size:100%;
} 
 
.tab li.allcourse{
/* height: 31px;*/
 width: 12.4%;
 max-width: 86px;
 background: url(../images/music/music_button_allcourse.png);
 background-position:top;
background-size:100%;
} 

.tab li.all a {
display:block;
/* height: 31px;*/
}

.tab li.select{
 background-position:bottom;
}
  
.content li{
    padding: 10px 10px;
/*    margin-bottom: 10px;*/
    /* margin-left: 30px; */
    /* margin-right: 30px; */
    border: solid 1px #A9A9A9;
    width: calc(100% - 22px);;
    display:none;
}
.defo {display:none;}
.hide {display:none;}



.narrow_btn{
/*background:url(../images/music/button_blank.png);*/

    height: 25px;
    line-height: 29px;
    font-size: 12px;
    margin: 1px;
    text-align: center;
}
.narrow_btn, .narrow_btn_l, .narrow_btn_jp, .narrow_btn_al, .narrow_btn_num{
float:left;
border-left:solid 1px #b3b3b3;
border-right:solid 1px #b3b3b3;
}
.narrow_btn:hover,
.narrow_btn.select{
 background-position-y:-25px;
}
.filter2 .narrow_btn,
.filter2_0 .narrow_btn,
.filter2_1 .narrow_btn{
    width: 66px;
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.filter3 .narrow_btn{
    width: 66px;
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.filter5 .narrow_btn{
    width: 142px;
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.filter6 .narrow_btn{
    width: 112px;
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.filter7 .narrow_btn{
float:left;
    width: 170px;
height:25px;
line-height: 25px;
font-size: 12px;
margin:2px 1px;
text-align:center; 
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.filter7 .narrow_btn_l{
float:left;
    width: 200px;
height:25px;
line-height: 25px;
font-size: 12px;
margin:2px 1px;
text-align:center; 
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.filter8 .narrow_btn_al{
float:left;
height:25px;
    width: 22px;
line-height: 25px;
font-size: 12px;
margin:2px 1px;
text-align:center;    
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.filter8 .narrow_btn_num{
float:left;
height:25px;
    width: 72px;
line-height: 25px;
font-size: 12px;
margin:2px 1px;
text-align:center;    
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.filter8 .narrow_btn_jp{
float:left;
height:25px;
    width: 50px;
line-height: 25px;
font-size: 12px;
margin:2px 1px;
text-align:center;    
background-image:url(../images/music/button_all.png);
background-repeat: repeat-x;
}
.narrow_btn_al:hover,
.narrow_btn_al.select,
.narrow_btn_num:hover,
.narrow_btn_num.select,
.narrow_btn_jp:hover,
.narrow_btn_jp.select{
 background-position-y:-25px;
}
.narrow_btn_l{
/*background:url(../images/music/button_blank_long.png); */
float:left;
width:200px;
height:25px;
line-height: 25px;
font-size: 12px;
margin:2px 1px;
text-align:center;
}

.narrow_btn_l:hover,
.narrow_btn_l.select{
 background-position-y:-25px;
}


.narrow_btn_ll{
background:url(../images/music/button_blank_long.png); float:left;
width:200px;
height:29px;
line-height: 29px;
font-size: 12px;
margin:10px 23px 10px 10px;
text-align:center;
}

.narrow_btn_ll:hover,
.narrow_btn_ll.select{
 background-position-y:-29px;
}


.narrow_btn_lr{
background:url(../images/music/button_blank_long.png); float:left;
width:200px;
height:29px;
line-height: 29px;
font-size: 12px;
margin:10px 10px 10px 23px;
text-align:center;
}

.narrow_btn_lr:hover,
.narrow_btn_lr.select{
 background-position-y:-29px;
}


/*海外対応*/
span.lg-ja,
span.lg-en {
  display: none;
}
body.ja span.lg-ja,
body.en span.lg-en {
  display: inline;
}


div.ja span.lg-ja,
div.en span.lg-en {
  display: inline ;
}

/*
================================================================================================================
ページトップ
================================================================================================================
*/
@media screen and (min-width:900px) {
#page-top {
  position:fixed;
  bottom:30px;
  right:20px;
  font-size:12px;
  z-index:9999;
  display:none;
}
#page-top span {
  font-size:20px;
}
#page-top a {
  background-color:rgba(205,102,13,0.80);
  text-decoration:none;
  color:#FFF;
  width:54px;
  padding:8px 4px 8px 4px;
  text-align:center;
  line-height:14px;
  display:block;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
}
#page-top a:hover {
  text-decoration:none;
  background-color:rgba(252,202,147,1.00);
  color:#996800;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}
}
@media screen and (max-width:899px) {
#page-top {
  position:fixed;
  bottom:10px;
  right:10px;
  font-size:10px;
  z-index:9999;
  display:none;
}
#page-top span {
  font-size:16px;
}
#page-top a {
  background-color:rgba(153,71,0,0.80);
  text-decoration:none;
  color:#FFF;
  width:44px;
  padding:8px 2px 8px 2px;
  text-align:center;
  line-height:10px;
  display:block;
  border-radius:26px;
  -webkit-border-radius:26px;
  -moz-border-radius:26px;
}
#page-top a:hover {
  text-decoration:none;
  background-color:rgba(255,237,204,1.00);
  color:#996800;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}
}

.ea_common_center{width:100% !important;}