/* note
IE11 doesn't recognize rem unit.
*/

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: local("Noto Sans JP"),
    url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
    url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
    url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}

.color-red {
    color: red;
}

.bg-red { background: red; }
.bg-aqua { background: aqua; }
.bg-lime { background: lime; }
.bg-teal { background: teal; }
.bg-maroon { background: maroon; }
.bg-silver { background: silver; }
.bg-fuchsia { background: fuchsia; }
.bg-white { background: white; }


.bg-E9DADC { background: #333333; }
.bg-lds { background: #faebed; }

.bold {
    font-weight: bold;
}

html, body {
    width: 100%;
    height: 100%;
    /*background: #f5f5dc; !*beige*!*/
    background: #ece4b7;
    /*background: #e8e9eb;*/
    color: #333;
    font-family: "Noto Sans Japanese", sans-serif;
    margin: 0;
    padding: 0;
}

div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* navigation */
#leftPanel ul{
    list-style: none;
    padding: 0; }
#leftPanel li{
    background: #4169e1;
    text-align: center;
    margin: 1em 0 1em;
    padding: 0; }
#leftPanel li:hover{
    background: #a68f10; }
#leftPanel ul a{
    text-decoration: none;
    /*text-shadow: 1px 1px #ccc;*/
    color: #fffff0;
    display: block;
    padding: 1em;
    margin: 0; }
#leftPanel li.now{
    border-left: 1em solid tomato; }
#leftPanel li:not(.now){
    border-left: 1em solid beige; }

/* */
#returnToIndexLink {
    background: #333;
    color: #ccc;
    text-decoration: none;
    position: fixed;
    right: 0;
    bottom: 0;
    font-size: 2rem;
    font-weight: bold;
}

.fontColorRed {
    color: red;
}