@charset "utf-8";

#Gmenu_pc, #Gmenu_sp {
width:100%;
position: relative;
padding:0;
margin:0;
z-index:100;
}
@media screen and (min-width:800px) {#Gmenu_pc {position: relative; top:0px;}}
@media screen and (max-width:799px) {#Gmenu_sp {position: relative; top:0px;}}

/*
==========================================================================
グローバルメニュー(PC)
==========================================================================
*/
#ddr_menu{
width:100%;
max-width:1400px;
height:auto;
margin:0px auto;
background:url("../images/common/top_menu_base.png") no-repeat center top ;
background-size: 100%;
}
#ddr_menu ul{
margin:0px auto;
padding:2.5% 0 1.2% 0;
line-height: 0;
width:94%;
letter-spacing: -.40em;
/*background-color: aqua;*/
}

#ddr_menu ul li{
margin:0;
/* width:calc(100% / 8);*/
width:12.5%;
padding: 0;
line-height: 0;
display: inline-block;
}

#ddr_menu ul li a{
height:auto;
padding:0;
margin:0;
overflow:hidden;
display:block;
text-align:center;
}
#ddr_menu ul li img{
width:100%;
height:100%;
text-align:center; 
}

#ddr_menu li a:hover,
#ddr_menu li a.select{
background-position: left bottom;
}

.menu_close a{
background:url("../images/common/top_menu_event.png") no-repeat left top;
background-size: 100%;
}

#menu_info a{
background:url("../images/common/top_menu_news.png") no-repeat left top;
background-size: 100%;
}
#menu_how a{
background:url("../images/common/top_menu_howto.png") no-repeat left top;
background-size: 100%;
}
#menu_music a{
background:url("../images/common/top_menu_music.png") no-repeat left top;
background-size: 100%;
}
#menu_event a{
background:url("../images/common/top_menu_event.png") no-repeat left top;
background-size: 100%;
}
#menu_play a{
background:url("../images/common/top_menu_playdata.png") no-repeat left top;
background-size: 100%;
}
#menu_rival a{
background:url("../images/common/top_menu_rival.png") no-repeat left top;
background-size: 100%;
}
#menu_setting a{
background:url("../images/common/top_menu_setting.png") no-repeat left top;
background-size: 100%;
}
#menu_ranking a{
background:url("../images/common/top_menu_ranking.png") no-repeat left top;
background-size: 100%;
}
#menu_customize a{
background:url("../images/common/top_menu_customize.png") no-repeat left top;
background-size: 100%;
}
#menu_coming a{
background:url("../images/common/top_menu_coming.png") no-repeat left top;
background-size: 100%;
}
/*
==========================================================================
グローバルメニュー(SP)
==========================================================================
*/

#ddr_menu_sp {
padding-top:0px;
position: relative;
}
/*#ddr_menu_sp ul#g_menu{ margin-top:0px;}*/
#spmenu_swich {
width:65px;
height:65px;
position: absolute;
top:0px;
right:0;
z-index:3;
cursor:pointer;
}
#spmenu_swich.active {
width:calc(50% - 1px);
left:50%;
}
#sp_opcl_mark, #sp_opcl_mark span {
display: inline-block;
transition: all .4s;
}
#sp_opcl_mark {
width:65px;
height:65px;
position: absolute;
top:0px;
right:0;
z-index:2;
}
#sp_opcl_mark span {
position: absolute;
top: 0;
left: 13px;
z-index:2;
width: 39px;
height: 2px;
background: #FFA;
}
#sp_opcl_mark span.line01 {
top: 17px;
}
#sp_opcl_mark span.line02 {
top: 30px;
}
#sp_opcl_mark span.line03 {
top: 42px;
}
#sp_opcl_mark .bg {
width:64px;
height:64px;
position: absolute;
border-left:solid 1px #851;
border-bottom:solid 1px #851;
top:0;
right:0;
z-index:1;
background-color:#F94;
}
/*SPメニューボタンアニメ*/
#sp_opcl_mark.active span {
background: #F94;
}
#sp_opcl_mark.active span.line01 {
-webkit-transform: translateY(12.5px) rotate(-45deg);
transform: translateY(12.5px) rotate(-315deg);
}
#sp_opcl_mark.active span.line02 {
opacity: 0;
}
#sp_opcl_mark.active span.line03 {
-webkit-transform: translateY(-12.5px) rotate(45deg);
transform: translateY(-12.5px) rotate(315deg);
}
#sp_opcl_mark.active .bg {
width:64px;
height:64px;
position: absolute;
border-left:solid 1px #851;
border-top:solid 1px #851;
top:0;
right:0;
z-index:1;
background-color:#FFFFAA;
}
#spmenu_logo_bg {
width:100%;
height:65px;
padding:0;
cursor:pointer;
background: url(../images/common/sp_menu_title_bg.png) center center no-repeat;
background-size: cover;
}
#spmenu_logo_bg .spmenu_logo {
width:140px;
height:65px;
margin:0 auto;
padding:0 10% 0 0;
}
#spmenu_logo_bg .spmenu_logo img {
width: auto;
height:60px;
margin:5px 0 0 5px;
cursor:pointer;
}

/*SPサブメニューボタン*/
#ddr_menu_sp ul.spg_menu {
width:calc(100% + 1px);
width:-moz-calc(100% + 1px);
width:-webkit-calc(100% + 1px);
position:absolute;
top:0;
left:0;
z-index:1;
background-color:#331100;
color:#FFF;
background-image: url(../images/common/sp_menu_bg.png);
background-repeat: repeat;
}
#ddr_menu_sp ul.spg_menu li {
float:left;
width:calc(50% - 1px);
height: 44px;
font-size:16px;
background-color:#FF7722;
border-top:#663300 solid 1px;
border-right:#663300 solid 1px;
display:table;
text-align:center;
cursor:pointer;
}
/*#ddr_menu_sp ul.spg_menu li:hover {background-color:#CCFFCC;}*/
#ddr_menu_sp ul.spg_menu li.soon, #ddr_menu_sp ul.spg_menu ul.sp_sub li.soon, #ddr_menu_sp ul.spg_menu ul.sp_sub ul.sp_sub_sub li.soon{
color:#420;
cursor: default;
background-color:#AA4422;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
}
#ddr_menu_sp ul.spg_menu li.link_howto, #ddr_menu_sp ul.spg_menu li.link_ranking, #ddr_menu_sp ul.spg_menu li.link_ticket, #ddr_menu_sp ul.spg_menu li.link_search {
border-right:none;
}
#ddr_menu_sp ul.spg_menu li span {
display:table-cell;
vertical-align:middle;
}
#ddr_menu_sp ul.spg_menu li.pull:after {
display: block;
clear: both;
float:right;
top:10px;
margin:12px 10px 0 -40px;
content: "\25BC";
}
#ddr_menu_sp ul.spg_menu li.pull {
background-size: 12%;
}
#ddr_menu_sp ul.spg_menu li:not(.soon).hover{
background-color:#FFAAAA;
color:#600;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
}
#ddr_menu_sp ul.spg_menu li:not(.soon).active {
background-color:#FFCC44;
color:#630;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
}
/*
#ddr_menu_sp ul.spg_menu li.hover,#ddr_menu_sp ul.spg_menu li.active{ background-color:#fcfcfe;color:#000;}
*/

#ddr_menu_sp ul.sp_sub {
clear:both;
width:100%;
background-color: #F39B9D;
}
#ddr_menu_sp ul.sp_sub:after {
content: "";
display: block;
clear: both;
}
#ddr_menu_sp ul.sp_sub li {
float:left;
calc(46% - 1px);
height: 44px;
font-size: 12.5px;
background-color:#FFFFDD;
color:#630;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
padding:0px 0px;
}
#ddr_menu_sp ul.sp_sub_sub li .soon{
background-color:#AAFFFF;
color:#049;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
}
#ddr_menu_sp ul.sp_sub li:nth-child(odd) {
border-right:#663300 solid 1px;
}
#ddr_menu_sp ul.sp_sub li:nth-child(even) {
border-right:#663300 solid 1px;
}

/*SPサブメニューのサブメニューボタン*/
.spg_menu ul.howto, .spg_menu ul.ranking {
width:calc(100% - 1px);
width:-moz-calc(100% - 1px);
width:-webkit-calc(100% - 1px);
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
}
.spg_menu ul.howto li, .spg_menu ul.ranking li {
float:left;
width:calc(46% - 2px);
height: 44px;
font-size:16px;
display:table;
text-align:center;
cursor:pointer;
}
.spg_menu ul.howto li.soon, .spg_menu ul.ranking li.soon {
color:#999;
cursor: default;
}
.spg_menu ul.howto li span, .spg_menu ul.ranking li span {
display:table-cell;
vertical-align:middle;
}
#ddr_menu_sp ul.spg_menu li.pull_sub:after {
display: block;
clear: both;
float:right;
top:10px;
margin:15px 10px 0 -40px;
content: "\25BC";
}
#ddr_menu_sp ul.spg_menu li.pull_sub {
background-color:#FFFFDD; color:#630;
}
#ddr_menu_sp ul.spg_menu li.pull_sub:hover {background-color:#FFAAAA; color:#600;}
#ddr_menu_sp ul.spg_menu li.pull_sub.active{background-color:#FFCCCC; color:#600;}
.spg_menu ul.howto li:not(.soon).active, .spg_menu ul.ranking  li:not(.soon).active {
background-color:#AAFFFF;
color:#049;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
}

.spg_menu ul.howto li:not(.soon).hover, .spg_menu ul.ranking  li:not(.soon).hover {
background-color:#AAFFFF;
color:#049;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
}
/*
#ddr_menu_sp ul.spg_menu li.hover,#ddr_menu_sp ul.spg_menu li.active{ background-color:#fcfcfe;color:#000;}
*/

#ddr_menu_sp ul.sp_sub_sub {
clear:both;
width:100%;
}
#ddr_menu_sp ul.sp_sub_sub:after {
content: "";
display: block;
clear: both;
}
#ddr_menu_sp ul.sp_sub_sub li {
float:left;
width:calc(50% - 1px);
height: 44px;
font-size: 12.5px;
background-color:#FFEEEE;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
padding:0px 0px;
color:#600;
}
#ddr_menu_sp ul.sp_sub_sub li:not(.soon).hover{
background-color:#FFAAAA;
color:#900;
border-top: #663300 solid 1px;
border-right:#663300 solid 1px;
}

#ddr_menu_sp ul.sp_sub_sub li:nth-child(odd) {
border-right:#663300 solid 1px;
}
#ddr_menu_sp ul.sp_sub_sub li:nth-child(even) {
border-right:none;
}




#ddr_menu_sp #sp_link_menu {
clear:both;
width:100%;
padding:20px 0 0 0;
border-top:#663300 solid 1px;
}
#ddr_menu_sp #sp_link_menu ul {
width:98%;
height:65px;
margin:0 auto;
}
#ddr_menu_sp #sp_link_menu ul li {
float:left;
width:46%;
margin:0 2%;
cursor:pointer;
border:none;
background-color:transparent;
}
#ddr_menu_sp #sp_link_menu ul li:hover {
background:none;
}

/*
================================================================================================================
リンクボタン/プレイデータのレイアウト
================================================================================================================
*/
.link_eria{margin-top:82px; width:100%; position: absolute;}

/*
================================================================================================================
リンクボタン（商品紹介サイト・お問い合わせ）
================================================================================================================
*/

/* 上部レイアウト */
.contents_link {
position: relative;
width:98%;
max-width: 1170px;
min-width: 960px;
margin: 0px auto;
}

/* 上部レイアウト右上ボタン 開始 */
@media screen and (min-width:900px) {
.top_information {
display:block;
}
}
@media screen and (max-width:899px) {
.top_information {
display:none;
}
.top_info_button {
box-shadow:#FC9 0px 0px 10px;
}
}
.top_information {
position: absolute;
width: 320px;
top: 10px;
right: 0px;
height: 30px;
}
.top_information ul {
width: 100%;
margin:0;
padding: 0;
position: relative;
height: 30px;
}
.top_information ul li {
width: 48%;
margin:0 0% 0 1%;
padding: 0;
left: 0px;
height: 30px;
display: inline-block;
}
.top_info_button {
display: inline-block;
width: 100%;
height: 46px;
text-align: center;
text-decoration: none;
line-height: 48px;
outline: none;
position: relative;
z-index: 2;
background-color: #F72;
border: 1px solid #F72;
color:#FFF;
overflow: hidden;
border-radius:6px;
font-size:14px;
font-weight:bold;
}
.top_info_button::before, .top_info_button::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.top_info_button, .top_info_button::before, .top_info_button::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.top_info_button:hover {
color:#630;
}
.top_info_button::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(.5);
transform: scale(.5);
}
.top_info_button:hover::after {
background: #FFFFAA;
-webkit-transform: scale(1);
transform: scale(1);
border-radius:3px;
}
/*
================================================================================================================
e-amusement プレイデータ（コミュニティニックネーム・オーナー名）
================================================================================================================
*/
.eagate_width {
position: relative;
width:100%;
max-width: 1200px;
/*min-width: 980px;*/
margin: 0px auto;
}
@media screen and (min-width:900px) {
.eagate_menu {
height:56px;
width:64%;
min-width: 640px;
position:relative;
}
}
@media screen and (max-width:899px) {
.eagate_menu {
width:88%;
min-width:250px;
height:56px;
position:relative;
}
}
@media screen and (max-width:499px) {
.eagate_menu {
width:80%;
min-width:250px;
height:80px;
position:relative;
}
}
.eagate_menu {
overflow: hidden;
}
.eagate_menu_L {
border:solid 1px #99F;
border-radius:6px;
background-color:#CFF;
overflow:hidden;
z-index: 3;
}
.eagate_menu_L:hover {
border:solid 1px #CC6;
border-radius:6px;
background-color:#FFC;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.eagate_menu_L a.commu_name {
position:absolute;
width:100%;
display:block;
overflow:hidden;
padding-top: 44px;
}
.eagate_menu_R {
border:solid 1px #99F;
border-radius:6px;
background-color:#CFF;
margin-left:53%;
margin-top:10px;
overflow:hidden;
z-index: 3;
}
.eagate_menu_R:hover {
border:solid 1px #CC6;
border-radius:6px;
background-color:#FFC;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.eagate_menu_R a.player_name {
position:absolute;
width:100%;
display:block;
overflow:hidden;
padding-top: 44px;
}
.eagate_menu .name_text_table {
position:absolute;
left:62%;
width:49%;
text-align:center;
color:#000000;
font-size:14px;
height:44px;
}
@media screen and (max-width:499px) {
.eagate_menu .name_text_table {
position:absolute;
left:62%;
width:49%;
text-align:center;
color:#000000;
font-size:14px;
height:22px;
}
}
.eagate_menu .name_text_table td {
vertical-align:middle;
font-weight:bold;
border:none;
}
@media screen and (min-width:900px) {
.eagate_menu_L {
position:absolute;
width:48%;
height:46px;
margin-left:2%;
margin-top:10px;
}
}
@media screen and (max-width:899px) {
.eagate_menu_L {
position:absolute;
width:48%;
height:46px;
margin-left:1%;
margin-top:10px;
}
}
@media screen and (max-width:499px) {
.eagate_menu_L {
position:absolute;
width:98%;
height:26px;
margin-left:2%;
margin-top:10px;
}
}
@media screen and (min-width:900px) {
.eagate_menu_R {
position:absolute;
width:48%;
height:46px;
margin-left:52%;
margin-top:10px;
}
}
@media screen and (max-width:899px) {
.eagate_menu_R {
position:absolute;
width:48%;
height:46px;
margin-left:50%;
margin-top:10px;
}
}
@media screen and (max-width:499px) {
.eagate_menu_R {
position:absolute;
width:98%;
height:26px;
margin-left:2%;
margin-top:40px;
}
}
.menu_com_name {
position:absolute;
width:36%;
height:46px;
text-align:center;
top:0px;
left:0;
padding:0;
background-image: url(../images/common/e_amuse_com_name.png);
background-repeat:no-repeat;
background-position:left center;
background-size:contain;
}
.menu_com_name img {
width:100%;
}
.menu_owner_name {
position:absolute;
width:50%;
height:46px;
text-align:center;
top:0px;
left:0;
padding:0;
background-image: url(../images/common/e_amuse_owner_name.png);
background-repeat:no-repeat;
background-position:left center;
background-size:contain;
}
.menu_owner_name img {
width:100%;
}
.menu_img_box {
position:absolute;
width:100%;
max-width:46px;
height:100%;
max-height:44px;
background:#BBB;
text-align:center;
top:0px;
left:38%;
padding:2px 0 0 0;
}
.menu_img_box img {
width:100%;
max-width:40px;
height:100%;
max-height:40px;
}
.eagate_menu_sp, .swich_sp {
background:transparent;
}
@media screen and (max-width:499px) {
.menu_com_name {
position:absolute;
width:44%;
height:26px;
text-align:center;
top:0px;
left:0;
padding:0;
background-image: url(../images/common/e_amuse_com_name_sp.png);
background-repeat:no-repeat;
background-position:left center;
background-size:contain;
}
.menu_com_name img {
width:100%;
}
.menu_owner_name {
position:absolute;
width:50%;
height:26px;
text-align:center;
top:0px;
left:0;
padding:0;
background-image: url(../images/common/e_amuse_owner_name_sp.png);
background-repeat:no-repeat;
background-position:left center;
background-size:contain;
}
.menu_owner_name img {
width:100%;
}
.menu_img_box {
position:absolute;
width:100%;
max-width:26px;
height:100%;
max-height:24px;
background:#BBB;
text-align:center;
top:0px;
left:48%;
padding:1px 0 0 0;
}
.menu_img_box img {
width:100%;
max-width:22px;
height:100%;
max-height:22px;
}
.eagate_menu_sp, .swich_sp {
background-color:transparent;
}