@charset "Shift-JIS";

/*
================================================================================================================
MENU-eAMUSEMENTログイン ログイン後
================================================================================================================
*/
#log-on{
display:block;
width:100%;
min-width:320px !important;
position:absolute;
top:200px;
left:0;
color:#fff;
font-size:13px;
font-family:'Noto Sans JP', sans-serif;
letter-spacing:0.5px;
text-shadow:0px 1px 0 #0084ff , 1px 1px 0 #0084ff , 1px 0px 0 #0084ff,
            0px -1px 0 #0084ff , -1px -1px 0 #0084ff , -1px 0px 0 #0084ff,
            -1px 1px 0 #0084ff , 1px -1px 0 #0084ff;
z-index:1;}
#log-on:after{visibility:hidden; display:block; content:" "; clear:both; height:0;}
#log-on a > div{display:block; color:#fff;}
#log-on a:hover > div{text-decoration:underline !important;}

#log-on ul li div{float:left;}
#log-on ul li div.on-cat{font-weight:900; padding:5px 0 0 10px;}
#log-on ul li div.on-name{padding:5px 0 0 15px;}

#log-on ul li div.on-icon{position:relative;}
#log-on ul li div.on-icon img{width:30px;}

/*
================================================================
レイアウト調整
================================================================
*/
@media screen and (max-width:1500px){#log-on{top:190px;}}
@media screen and (max-width:1300px){#log-on{top:180px;}}
@media screen and (max-width:1100px){#log-on{top:130px;}}
@media screen and (max-width:480px){#log-on{top:90px;}}

/*PCサイズ*/
@media screen and (min-width:1101px){
#log-on{height:66px;}
#log-on ul{
display:flex;
position:relative;
width:96%;
max-width:1200px;
height:66px;
background-image:url(../images/menu/login/bg03.png) , url(../images/menu/login/bg02.png) , url(../images/menu/login/bg01.png);
background-repeat:no-repeat , no-repeat , repeat-x;
background-position:right , left , center;
border-radius:18px;
align-items:center;
margin:0 auto;}

#log-on ul li{
display:block;
position:relative;
width:50%;
/*height:44px !important;
background-image:url(../images/menu/login/bg03.png);
border-radius:5px;
border:1px solid #000;*/
padding:0 20px;}}

/*SPサイズ*/
@media screen and (max-width:1100px){
#log-on ul{display:flex; width:100%; background-color:#fff; border-bottom:5px solid #0084ff;}
#log-on ul li{position:relative; width:50%; padding:10px 10px 5px; border-bottom:3px solid #fe8f01;}}

@media screen and (max-width:800px){
#log-on{font-size:11px;}
#log-on ul li div.on-cat{position:absolute; top:5px; left:50px; padding:0;}
#log-on ul li div.on-name{position:absolute; top:20px; left:50px; padding:0;}}

@media screen and (max-width:480px){
#log-on ul li{padding:15px 10px 0;}
#log-on ul li div.on-icon{top:-5px;}
#log-on ul li div.on-icon img{width:25px;}
#log-on ul li div.on-cat{top:5px; left:40px; font-size:8px !important;}
#log-on ul li div.on-name{top:20px; left:40px;}}

@media screen and (max-width:320px){
#log-on ul li{padding:5px 0 10px;}
#log-on ul li div.on-icon{top:5px; left:2px;}
#log-on ul li div.on-cat{left:30px;}
#log-on ul li div.on-name{left:30px;}}