/*
================================================================================================================
MENU
================================================================================================================
*/
#site-header{
width:100%;
position:relative;
margin:0 auto;
display: flex;}

#site-header .head_f{width:180px;position:absolute; top:0;z-index:1;}
#site-header .head_f img{width:100%;height:auto;}
#site-header .head_f#left{left:0;}
#site-header .head_f#right{ right:0;}

#site-header-in{
display:flex;
justify-content: center;
position:relative;
width:1300px;
height:auto;
min-height:150px;
background-image:url(../img/menu/bg01.png);
background-size:1300px auto;
background-repeat:no-repeat;
background-position:center top;
margin:0 auto;}

#site-header-in .logo-menu{z-index:2;}

#site-header-in .logo-menu{position:relative; width:140px;}
#site-header-in .logo-menu .title-logo{
position:absolute;
width:140px;
top:5px;
left:0;}
#site-header-in .logo-menu .title-logo img{width:100%; height auto;}

#site-header-in .global-menu{z-index:2;}

@media screen and (min-width:1024px){

#site-header-in .global-menu{display:block;width:calc(100% - 145px);max-width:875px;}}

@media screen and (min-width:900px) and (max-width:1024px){

#site-header-in {width:100%;}
#site-header-in .global-menu{width:calc(100% - 145px);max-width:800px;} 
 
 }

@media screen and (max-width:899px){
#site-header .head_f{display:none;}
#site-header.bar-fix {
    position: fixed !important;
    top: 0;
    z-index:999;
}

#site-header-in{
position:relative;
width:100%;
min-height:60px;
flex-wrap:wrap;
margin:0 auto;
background-image:url(../img/menu/bg_sp_btm.png),url(../img/menu/bg_sp.png);
background-position:bottom center,top center;
background-size:auto 20px,auto 80px;
background-repeat:repeat-x,repeat-x;
}

#site-header-in .logo-menu{
width:100%;
height:90px !important;
overflow:hidden;}
#site-header-in .logo-menu .title-logo{width: 100px;position:absolute; top:2px !important;}
#site-header-in .logo-menu .title-logo a img{max-width:100px;}

#site-header-in .global-menu{
position:absolute;
width:100%;
top:-480px;
left:0;
z-index:4;
background-image:url(../img/menu/bg_sp_btm.png),url(../img/menu/bg_sp.png);
background-position:bottom center,top center;
background-size:auto 27px,auto 80px;
background-repeat:repeat-x,repeat;}

#site-header-in .global-menu ul{padding-bottom:10px;}

.slide_menu{
-moz-transform:translateY(550px);
-webkit-transform:translateY(550px);
transform:translateY(550px);
display:block;
animation-name:fadeIn;
animation-duration:0.5s;
animation-timing-function:liner;
-webkit-animation-name:fadeIn;
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:liner;}
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}}
@-webkit-keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}}
}

/*
================================================================================================================
MENU SP版用開閉ボタン
================================================================================================================
*/
#site-header-in .global-menu-btn{position:absolute; top:0; right:0; z-index:10;}
#site-header-in .global-menu-btn a{
display:block;
position:relative;
width:80px;
height:80px;
background:url("../img/menu/sp_btn.png");
background-size:cover;}
#site-header-in .global-menu-btn a.selected{background-position:0 -80px;}

@media screen and (min-width:900px){
#site-header-in .global-menu-btn{display:none;}}

/*
================================================================================================================
MENU メニューボタン
================================================================================================================
*/
#site-header-in .global-menu ul{display:flex; flex-wrap:wrap;padding-top:10px;}
#site-header-in .global-menu ul li{display: block;position: relative; min-height:inherit;}
#site-header-in .global-menu ul li a{position:absolute; top:0; bottom:0;left:0;right:0;}
#site-header-in .global-menu ul li img{width:100%;height:auto;}

/*PC*/
@media screen and (min-width:1024px){
#site-header-in .global-menu ul li{width:calc(20% - 5px);max-width:170px;margin:0 5px 5px 0;}
}

@media screen and (min-width:900px) and (max-width:1024px){
#site-header-in .global-menu ul li{width:calc(20% - 5px);max-width:155px;margin:0 5px 5px 0;}
}

@media screen and (max-width:899px){
#site-header-in .global-menu ul{width:100%;max-width:570px;z-index:9999 !important;margin:10px auto;justify-content:space-between;}
#site-header-in .global-menu ul li{width:33%;max-width:170px;margin:10px 5px;}
}

@media screen and (max-width:639px){
#site-header-in .global-menu ul{width:100%;max-width:380px;z-index:9999 !important;margin:10px auto;justify-content:space-between;}
#site-header-in .global-menu ul li{width:calc(50% - 10px);max-width:170px;margin:10px 5px;}
#site-header-in .global-menu ul li:last-child{margin:10px -5px 10px 5px;}
}

#site-header-in .global-menu ul li a#id1,
#site-header-in .global-menu ul li a#id2,
#site-header-in .global-menu ul li a#id3,
#site-header-in .global-menu ul li a#id4,
#site-header-in .global-menu ul li a#id5,
#site-header-in .global-menu ul li a#id6,
#site-header-in .global-menu ul li a#id7,
#site-header-in .global-menu ul li a#id8,
#site-header-in .global-menu ul li a#id9,
#site-header-in .global-menu ul li a#id10{background-size:100% auto !important; background-position:center top;}

#site-header-in .global-menu ul li a#id1{background:url("../img/menu/bt_top.png");}
#site-header-in .global-menu ul li a#id2{background:url("../img/menu/bt_game.png");}
#site-header-in .global-menu ul li a#id3{background:url("../img/menu/bt_new.png");}
#site-header-in .global-menu ul li a#id4{background:url("../img/menu/bt_eam.png");}
#site-header-in .global-menu ul li a#id5{background:url("../img/menu/bt_rnk.png");}
#site-header-in .global-menu ul li a#id6{background:url("../img/menu/bt_shop.png");}
#site-header-in .global-menu ul li a#id7{background:url("../img/menu/bt_dl.png");}
#site-header-in .global-menu ul li a#id8{background:url("../img/menu/bt_qa.png");}
#site-header-in .global-menu ul li a#id9{background:url("../img/menu/bt_kantan.png");}
#site-header-in .global-menu ul li a#id10{background:url("../img/menu/bt_remote.png");}

/*
================================================================================================================
MENU メニューボタン 画像
================================================================================================================
*/
#site-header-in .global-menu ul li a#id1:hover,
#site-header-in .global-menu ul li a#id2:hover,
#site-header-in .global-menu ul li a#id3:hover,
#site-header-in .global-menu ul li a#id4:hover,
#site-header-in .global-menu ul li a#id5:hover,
#site-header-in .global-menu ul li a#id6:hover,
#site-header-in .global-menu ul li a#id7:hover,
#site-header-in .global-menu ul li a#id8:hover,
#site-header-in .global-menu ul li a#id9:hover,
#site-header-in .global-menu ul li a#id10:hover,
#site-header-in .global-menu ul li a#id1.selected,
#site-header-in .global-menu ul li a#id2.selected,
#site-header-in .global-menu ul li a#id3.selected,
#site-header-in .global-menu ul li a#id4.selected,
#site-header-in .global-menu ul li a#id5.selected,
#site-header-in .global-menu ul li a#id6.selected,
#site-header-in .global-menu ul li a#id7.selected,
#site-header-in .global-menu ul li a#id8.selected,
#site-header-in .global-menu ul li a#id9.selected,
#site-header-in .global-menu ul li a#id10.selected{background-position:center bottom 0;}
#site-header-in .global-menu ul li a#id5.comingsoon{background-position:center bottom 0; pointer-events:none;}

@media screen and (min-width:900px) and (max-width:1024px){
#site-header-in .global-menu ul li a{height:44px; width:100%;}
#site-header-in .global-menu ul li a#id1:hover,
#site-header-in .global-menu ul li a#id2:hover,
#site-header-in .global-menu ul li a#id3:hover,
#site-header-in .global-menu ul li a#id4:hover,
#site-header-in .global-menu ul li a#id5:hover,
#site-header-in .global-menu ul li a#id6:hover,
#site-header-in .global-menu ul li a#id7:hover,
#site-header-in .global-menu ul li a#id8:hover,
#site-header-in .global-menu ul li a#id9:hover,
#site-header-in .global-menu ul li a#id10:hover,
#site-header-in .global-menu ul li a#id1.selected,
#site-header-in .global-menu ul li a#id2.selected,
#site-header-in .global-menu ul li a#id3.selected,
#site-header-in .global-menu ul li a#id4.selected,
#site-header-in .global-menu ul li a#id5.selected,
#site-header-in .global-menu ul li a#id6.selected,
#site-header-in .global-menu ul li a#id7.selected,
#site-header-in .global-menu ul li a#id8.selected,
#site-header-in .global-menu ul li a#id9.selected,
#site-header-in .global-menu ul li a#id10.selected{background-position:center bottom 0;}
/*#site-header-in .global-menu ul li a#id5.comingsoon{background-position:center bottom 0; pointer-events:none;}*/
}

@media screen and (max-width:899px){
#site-header-in .global-menu ul li a#id1:hover,
#site-header-in .global-menu ul li a#id2:hover,
#site-header-in .global-menu ul li a#id3:hover,
#site-header-in .global-menu ul li a#id4:hover,
#site-header-in .global-menu ul li a#id5:hover,
#site-header-in .global-menu ul li a#id6:hover,
#site-header-in .global-menu ul li a#id7:hover,
#site-header-in .global-menu ul li a#id8:hover,
#site-header-in .global-menu ul li a#id9:hover,
#site-header-in .global-menu ul li a#id10:hover,
#site-header-in .global-menu ul li a#id1.selected,
#site-header-in .global-menu ul li a#id2.selected,
#site-header-in .global-menu ul li a#id3.selected,
#site-header-in .global-menu ul li a#id4.selected,
#site-header-in .global-menu ul li a#id5.selected,
#site-header-in .global-menu ul li a#id6.selected,
#site-header-in .global-menu ul li a#id7.selected,
#site-header-in .global-menu ul li a#id8.selected,
#site-header-in .global-menu ul li a#id9.selected,
#site-header-in .global-menu ul li a#id10.selected{background-position:center bottom 0;}
/*#site-header-in .global-menu ul li a#id5.comingsoon{background-position:center bottom 0; pointer-events:none;}*/
}

@media screen and (max-width:639px){
#site-header-in .global-menu ul li a#id1:hover,
#site-header-in .global-menu ul li a#id2:hover,
#site-header-in .global-menu ul li a#id3:hover,
#site-header-in .global-menu ul li a#id4:hover,
#site-header-in .global-menu ul li a#id5:hover,
#site-header-in .global-menu ul li a#id6:hover,
#site-header-in .global-menu ul li a#id7:hover,
#site-header-in .global-menu ul li a#id8:hover,
#site-header-in .global-menu ul li a#id9:hover,
#site-header-in .global-menu ul li a#id10:hover,
#site-header-in .global-menu ul li a#id1.selected,
#site-header-in .global-menu ul li a#id2.selected,
#site-header-in .global-menu ul li a#id3.selected,
#site-header-in .global-menu ul li a#id4.selected,
#site-header-in .global-menu ul li a#id5.selected,
#site-header-in .global-menu ul li a#id6.selected,
#site-header-in .global-menu ul li a#id7.selected,
#site-header-in .global-menu ul li a#id8.selected,
#site-header-in .global-menu ul li a#id9.selected,
#site-header-in .global-menu ul li a#id10.selected{background-position:center bottom 0;}
/*#site-header-in .global-menu ul li a#id5.comingsoon{background-position:center bottom 0x; pointer-events:none;}*/
}
