/*クソザコcssで良ければ参考にしてどうぞ*/

/*全体のサイズ*/
html,
body
{
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}

/*共通設定*/
body
{
    font-family: sans-serif;
}
img
{
    width: 100%;
    height: auto;
}
a
{
    color: #666666;
}
a:hover
{
    color: #999999;
}
a:focus
{
    color: #cccccc;
}

/*全体の配色*/
header,
main,
footer
{
    background-color: #ffffff;
}

/*レスポンシブ*/
@media screen and (min-width: 1000px){
    header,
    #menus,
    main,
    footer
    {
        width: 980px;
        margin: 0 calc((100% - 1000px) / 2);
        padding: 0 10px 0 10px;
    }
}
@media screen and (max-width: 999px){
    header,
    #menus,
    main,
    footer
    {
        width: 100%;
        margin: 0;
        padding: 0 5px 0 5px;
    }
}

/*ヘッダー部分*/
header
{
    min-height: 50px;
}
header #sitelogo
{
    float: left;
    width: auto;
    height: 37px;
    padding: 3px;
}
header #links
{
    float: left;
    margin: 15px 0 0 10px;
}
@media screen and (max-width: 640px){
    header #sitelogo,
    header #links
    {
        float: none;
        text-align: center;
    }
}

/*メニュー部分*/
#menus
{
    min-height: 30px;
    border-bottom: 1px solid #808080;
}
.menu
{
    float: left;
    font-size: 20px;
    font-weight: 600;
    height: 29px;
    margin: 0 15px 0 15px;
}
/*メニュー1列表示モード*/
@media screen and (max-width: 640px){
    .menu
    {
        float: none;
        text-align: center;
        width: 100%;
    }
}

/*メイン部分*/
main
{
    min-height: calc(100% - 110px);
}

/*フッダー部分*/
footer
{
    height: 29px;
    text-align: center;
    border-top: 1px solid #808080;
}