rta-sub:mishary1

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Sawarabi+Mincho&display=swap');
 
/* GLOBAL WIDTH */
div#container-wrap {
    background: url(http://msr-arc.wdfiles.com/local--files/theme:jp-director/skycolor.png) top left repeat-x;
}
body {
    background-color: #f2f2f2;
}
 
/* HEADER */
#header {
    height: 140px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px; /* FOR MENU */
    background: url(http://msr-arc.wdfiles.com/local--files/theme:jp-director/scp-logo-jp.svg) 10px 40px no-repeat;
    background-size: 100px;
    background-position: 10px;
}
 
#header h1 a span {
    font-size: 0px;
}
#header h1 a:before {
    font-family: 'Ma Shan Zheng', 'Sawarabi Mincho', sans-serif;
    font-size: 120%;
    content: "青き日の本";
    color: #ea3628;
    text-shadow: none;
}
#header h2 span {
    font-size:0px;
    padding: 4px;
}
#header h2:after {
    font-family: 'Sawarabi Mincho', sans-serif;
    content: "財団81管区支部理事会";
    font-weight: bold;
    color: #ea3628;
    padding: 19px 30px;
    text-shadow: none;
    white-space: pre;
}
 
/*login-status*/
#login-status {
    color: #633;
    font-size: 90%;
    z-index: 30;
}
div#login-status {
    opacity: 0.1 !important;
    transition: all 0.5s ease-out !important;
}
div#login-status:hover {
    opacity: 1 !important;
}
#login-status a {
    background: transparent;
    color: #633;
}
 
/* TOP MENU */
#top-bar a {
    color: #ea3628;
}
#top-bar ul li ul {
    border: solid 1px #444;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #fff;
    color: #ea3628;
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #eee;
}
 
/* Mobile Media Query */
@media (max-width: 479px) {
    #header, .mobile-top-bar {
        max-width: 90%;
    } 
    #header {
        background-position: 0 5.5em;
        background-size: 55px 55px;
    }
}
/* Note Media Query */
@media (min-width: 480px) and (max-width: 580px) {
    #header, .mobile-top-bar {
        max-width: 90%;
    }
    #header {
        background-position: 0.5em 4.5em;
        background-size: 66px 66px;
    }
}
/* Mini Tablet Media Query */
@media (min-width: 581px) and (max-width: 767px) {
    #header, .mobile-top-bar {
        max-width: 90%;
    }
    #header {
        background-position: 1em 4em;
        background-size: 77px 77px;
    }
}
/* Tablet Media Query */
@media (min-width: 768px) and (max-width: 979px) {
    #header, #top-bar #side-bar {
        max-width: 100%;
    }
    #header {
        background-position: 1em 4em;
        background-size: 88px 88px;
    }
}