@charset "utf-8";

*{margin: 0; padding: 0;}
a{text-decoration: none;}
ul,ol{list-style: none;}
img {
    vertical-align : middle ;
    max-width: 100%;
}

.cf::after{
    content: "";
    display: block;
    clear: both;
}
/*ここまでリセット*/

html{
    font-family: Verdana, Geneva, "sans-serif";
    line-height: 1.5;
    font-size: 625%;
}
body{font-size: .16rem;}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: .24rem;
}
h1 {
    font-size: .48rem;
    line-height: 1; /* 48px */
}
h2 {
    font-size: .36rem;
    line-height: 1.333333333333; /* 48px/36px */
}
h3 {
    font-size: .24rem;
    line-height: 1; /* 24px */
}
header h2, h4, h5, h6 {
    font-size: .16rem; /* 16px */
    line-height: 1.5; /* 24px/16px */
}
/*ここまでベースの文字設定*/

header {
    text-align: center;
    padding-top: .24rem;
    background: #2D231E;
}
header h1 {
    margin-bottom: .24rem;
}
header h2 {
    color: #FFF;
}

nav ul li{
    box-sizing: border-box;
    width: 25%;
    float: left;
    border-left: 1px solid #d8c2a4;
}
nav ul li:first-child{
    border-left:none;
}
nav ul li a:hover{
    color:white;
    background: #7d4934;
}
nav ul li a{
    display: block;
    color: #d8c2a4;
    padding: .12rem 0;
}
nav{
    margin-bottom:.24rem;
    background: #7d4934;
    background: linear-gradient(to bottom, rgb(125,73,52)0%, rgb(43,21,18)88%);
}
/*ここまでヘッダー*/

#contents{
    width:90%;
    margin: 0 auto;
    text-align: center;
}
#contents p{
    margin-bottom:.24rem;
    text-align: left;
}
#contents img{
    margin-bottom: .24rem;
    box-shadow: 0 0 5px #2f1f1f;
}
/*ここまで本文*/

footer {
    color: white;
    text-align: center;
    padding: .24rem 0;
    background: #2D231E;
}
/*ここまでフッター*/

/*ここからメディアクエリ*/

html{font-size: calc(625 * 0.75%);}

@media screen and (min-width:768px){
    html{font-size: calc(625 * 0.875%);}
    #contents{
        text-align:left;
    }
}

@media screen and (min-width:1024px){
    html{
        font-size: 625%;
    }
    #contents{
        width: calc(960/1024*100%);
    }
    #main,#sub{
        float:left;
        margin: 0 calc(10/960*100%);
    }
    #contents #main{width:calc(620/960*100%);}
    #contents #sub{width:calc(300/960*100%);}
/*    #contents #main{width:calc(620/960) ;}
    #contents #sub{width:calc(300/960);}*/
/*    #contents #main{width:620px;}  620/960
    #contents #sub{width:300px;}*/
    nav ul{
        width:calc(960/1024*100%);
        margin: 0 auto;
    }
}