@charset "utf-8";

/* ======================================
 * レスポンシブウェブデザインのベース部分
 * ======================================
 */
 
html {
    font-family : verdana, sans-serif;
    line-height : 1.5;
}

h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
h1 {
    font-size: 48px; 
    line-height: 1} /* 48px */
h2 {
    font-size : 36px;
    line-height : 1.3333} /* 48px */
h3 {
    font-size : 24px;
    line-height : 1} /* 24px */
hgroup h2,h4,h5,h6 {
    font-size : 16px;
    line-height : 1.5} /* 24px */

header { text-align : center;padding-top : 24px}
header h1 { margin-bottom : 24px}
header h2 { color : #62240b}

nav ul li { width : 25%; float : left}
nav ul li a { display : block}

/* @group Nav */
nav {
margin-bottom : 24px;
background-color: #7D4934;
background: -moz-linear-gradient(top, rgba(81,24,8,0.71) 0%, rgba(91,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,24,8,0.71)), color-stop(100%,rgba(91,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* W3C */
}
nav ul { overflow : hidden}
nav ul li { width : 20%; float : left}
nav ul li a {
display : block;
color : #d8c2a4;
padding : 12px 0}
nav ul li a:hover {
color : white;
background-color : #7d4934}
/* @end */

#contents {
width : 90%;
margin : 0 auto;
text-align : center}
#contents p { 
margin-bottom : 24px;
text-align : left}
#contents img { 
margin-bottom : 24px; }

footer {
color : white;
text-align : center;
padding : 24px 0;
background-color : #ff9933}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration : none;
}


/*768px*/
@media screen and (min-width : 768px){
#contents { text-align : left}
}
/*1024px*/
@media screen and (min-width : 1024px) {
/* @group Nav */
nav ul {
width :93.75%;/* 960/1024 */
margin : 0 auto}
/* @end */
/* @group Contents */
#contents {
overflow : hidden;
width : 93.75%}/* 960/1024 */
#contents #main,
#contents #sub { 
float : left;
margin : 0 1.0416667%} /*10/960*/ 
#contents #main { width : 64.5833333%} /*620/960*/
#contents #sub { width : 31.25%} /*300/960*/
/* @end */
/* @group Footer */
footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto}
/* @end */
}