@charset "utf-8";

 header{
   background-color:#ccc;
 }
 /*ログインメッセージ*/
 div.login_message{
   border:1px #ffbf00 solid;
   padding:10px;
   text-align:left;
   font-size:1.3rem;
   margin:10px 0;
 }
 /*全体のサイズ*/
 header section#rule ul,
 header section#logo,
 #wrapper{
   margin:0 auto;
   width:100%;
   padding: 0 10px;
   min-width:820px;/*後でminに変えてOK*/
 max-width:1020px;/*後でminに変えてOK*/}


 #wrapper{
   margin-top:10px;
   margin-bottom:20px;
 }


 /*ヘッダ*/

 /*ルールなど*/
 header section#rule{
   display:block;
   background:#333;
   height:30px;
   text-align: right;
 }
 header section#rule ul {
 background:url('../img/town_top.png') 100% 100% no-repeat,
 url('../img/moon/t/9.png') 79% 100% no-repeat;
 }
 header section#rule ul li{
   display:inline-block;
   margin:0 0 0 5px;
   line-height: 30px;
   font-size:1.15rem;
 }

 /*ロゴ*/
 header section#logo{
 padding:5px 0;
 background:
 url('../img/town_bottom.png') 100% 0% no-repeat,
 url('../img/cloud.png') 100% 20% no-repeat,
 url('../img/moon/b/9.png') 79% 0px no-repeat;
 }
 header section#logo ul{
   display:block;
 }
 header section#logo ul li{
   display:inline-block;
   height:50px;
 }

 header section#logo ul li img{
   max-height:50px;
 }
 #wrapper{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }

 #wrapper section#user{
   width:  200px;
   margin-right:10px;
   padding-right:5px;
   font-size: 1.15rem;
   border-right:1px #444 dashed;
 }


 #wrapper section#main_content{
   background:#000;
   flex:1;
 }


 #wrapper section#sub_content{
 margin-left:10px;
   width:  200px;
 }

 footer{
   background:#333;
   font-size:1.3rem;
 }