/*
================================================================================================================
e-amusement ログイン
================================================================================================================
*/
#log-on{
display:block;
width:100%;
position:relative;
background:#fff;
font-size:13px;
font-family:'Noto Sans JP', sans-serif;
letter-spacing:0.5px;}
#log-on > ul{display:flex; width:100%; max-width:980px; color:#000; margin:0 auto; align-items:center;}
#log-on > ul > li{width:50%; font-weight:700;}
#log-on > ul > li > a{display:flex; color:#ff9000; align-items:center; transition:color .2s ease;}
#log-on > ul > li > a:hover{color:#00bebe;}

#log-on > ul > li div.on-icon{display:flex; min-height:44px; align-items:center;}
#log-on > ul > li div.on-icon img{width:30px;}

#log-on ul.on-name{display:flex; line-height:120%;}
#log-on ul.on-name li:first-child{color:#000; margin:0 5px;}

@media screen and (max-width:1300px){
#log-on > ul{width:calc(100% - 40px); max-width:calc(100% - 40px);}}

@media screen and (max-width:1200px){
#log-on{border-bottom:1px solid #25b07c;}
#log-on > ul{width:100%; max-width:100%; border-radius:0; border-left:none; border-right:none; padding:5px 10px;}
#log-on > ul > li{position:relative; width:50%;}}

@media screen and (max-width:800px){
#log-on{font-size:11px;}
#log-on ul.on-name{display:block; margin-left:5px;}
#log-on ul.on-name li:first-child{margin:0;}}

@media screen and (max-width:480px){
#log-on > ul{padding:5px;}
#log-on > ul > li div.on-icon{min-height:36px;}
#log-on > ul > li div.on-icon img{width:25px;}
#log-on ul.on-name li:first-child{font-size:8px;}}

@media screen and (max-width:360px){
#log-on{font-size:10px;}}