/*==================================================
  school.css
  Sarashima Municipal Junior High School Website
==================================================*/

body{
    margin:0;
    padding:0;
    background:#c0c0c0;
    font-family:"MS PGothic","MS UI Gothic",sans-serif;
    font-size:13px;
    color:#222;
}

a{
    color:#003399;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

/*==============================
  Header
==============================*/

.topbar{

    position:relative;

    height:120px;

    background-image:url("DSC01067.JPG");

    background-size:cover;

    background-position:center;

    border-bottom:2px solid #808080;

    color:#fff;

    box-sizing:border-box;

}

.topbar::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,25,45,.35);

}

.logo{

    position:relative;

    padding:38px 22px 0;

    font-family:
        "MS Mincho",
        "ＭＳ 明朝",
        serif;

    font-size:30px;

    font-weight:bold;

    text-shadow:1px 1px 2px #000;

}

.sub{

    position:relative;

    padding-left:24px;

    margin-top:4px;

    font-size:12px;

    color:#f0f0f0;

    letter-spacing:1px;

}

/*==============================
  Layout
==============================*/

.container{

    display:flex;

    min-height:calc(100vh - 120px);

}

.sidebar{

    width:220px;

    background:#dcdcdc;

    border-right:2px solid #888;

    padding:10px;

    box-sizing:border-box;

}

.main{

    flex:1;

    display:flex;

    flex-direction:column;

    background:#fff;

}

/*==============================
  Sidebar
==============================*/

.menu-title{

    background:#808080;

    color:#fff;

    padding:4px 6px;

    margin-bottom:8px;

    font-weight:bold;

}

.menu{

    margin-bottom:20px;

}

.menu a{

    display:block;

    padding:5px 4px;

    color:#003399;

}

.menu a:hover{

    background:#efefef;

}

.storage{

    border:1px solid #999;

    background:#fafafa;

    padding:10px;

    line-height:1.8;

    font-size:12px;

}

/*==============================
  Content
==============================*/

.content{

    flex:1;

    padding:20px;

    overflow:auto;

}

.content h2{

    margin:0 0 18px;

    padding:7px 10px;

    font-size:20px;

    background:#efefef;

    border-left:5px solid #5d7fa6;

    border-bottom:1px solid #bbb;

}

/*==============================
  Tables
==============================*/

.info-box{

    border:1px solid #999;

    background:#fafafa;

    margin-bottom:20px;

}

.info-box table{

    width:100%;

    border-collapse:collapse;

}

.info-box th{

    width:220px;

    background:#efefef;

    border:1px solid #aaa;

    padding:8px;

    text-align:left;

}

.info-box td{

    border:1px solid #aaa;

    padding:10px;

    line-height:1.8;

    background:#fff;

}

/*==============================
  News Table
==============================*/

.notice-table{

    width:100%;

    border-collapse:collapse;

    margin-top:15px;

}

.notice-table th{

    background:#e9e9e9;

    border:1px solid #a8a8a8;

    padding:8px;

    text-align:left;

}

.notice-table td{

    border:1px solid #bdbdbd;

    padding:10px;

    vertical-align:top;

    line-height:1.8;

    background:#fff;

}

.notice-table tr:hover td{

    background:#f5f9ff;

}

.notice-table .date{

    width:140px;

    white-space:nowrap;

    color:#666;

}

/*==============================
  Greeting
==============================*/

.small-date{

    font-size:12px;

    color:#666;

    margin-bottom:18px;

}

.greeting{

    line-height:2;

    text-indent:1em;

}

.principal-sign{

    margin-top:30px;

    text-align:right;

    line-height:1.8;

}

/*==============================
  Images
==============================*/

.content img{

    margin:15px 0;

    max-width:100%;

    border:1px solid #999;

    background:#fff;

    padding:4px;

}

/*==============================
  Notice Box
==============================*/

.notice{

    border:1px solid #d5cf95;

    background:#fffde8;

    padding:15px;

    line-height:1.8;

    margin-top:20px;

}

/*==============================
  Forms
==============================*/

input{

    border:1px solid #888;

    padding:5px;

    font-family:"MS PGothic",sans-serif;

    font-size:13px;

}

button{

    border:1px solid #777;

    background:#ececec;

    padding:5px 12px;

    cursor:pointer;

    font-family:"MS PGothic",sans-serif;

}

button:hover{

    background:#dfe8f4;

}

/*==============================
  Utility
==============================*/

.small{

    font-size:11px;

    color:#666;

}

.center{

    text-align:center;

}

.right{

    text-align:right;

}

.gray{

    color:#777;

}

.box{

    border:1px solid #bbb;

    background:#fafafa;

    padding:15px;

    margin-bottom:20px;

}

hr{

    border:none;

    border-top:1px solid #d5d5d5;

    margin:20px 0;

}

/*==============================
  Footer
==============================*/

.footer{

    background:#efefef;

    border-top:1px solid #bdbdbd;

    text-align:center;

    padding:10px;

    font-size:11px;

    color:#555;

}