@charset "utf-8";

/* CSS reset */
a {
  text-decoration: none;
  display: block;
}
ul{
  padding: 0;
  list-style: none;
}

.container {
  width: 960px;
  margin: 0 auto;
}

/*共通CSS*/
header,h2{
color:#fff;
background-color:#070;
}

/*header*/
header{
height:300px;
background:url(../img/top_bg2.jpg) repeat-x;
}
h1 {
  font-size: 60px;
  font-family: 'Berkshire Swash', serif;
  padding-top: 30px;
}

h2{
  padding-left: 5px;
}

/*navigation*/

nav{
background-color:#cfa;
text-align:center;
}

nav ul{
display: flex;
justify-content: center;
padding: 0;
width: 960px;
margin: 0 auto;
}

nav li{
  width: 192px;
}

nav a{
color:#070;
padding: 20px 0;
}

nav a:hover{
background-color:#070;
color:#fff;
}

.wrap{
  display: flex;
  justify-content: space-between;
}

main{
width: calc(100% * (630/960));
}

.side_bar{
width: calc(100% * (300/960));
}

main p{
overflow: hidden;
}
main img{
  float: left;
}


/*見出し*/
h2{
padding:10px;
color:#fff;
background-color:#070;
}

h3 {
  border-left: 16px solid #070;
  padding-left: 5px;
}

/*詳細を見る*/
.more a{
background-color: #f90;
text-align: center;
color:#fff;
width: 120px;
padding: 10px 0;
}

.more a:hover{
background-color: #f00;
color: #fff;
}

/*カテゴリー*/
.cate{
   margin-bottom:30px; 
}

.cate li{
border:1px solid #070;
margin: 10px 0;
}

.cate a{
color:#070;
padding: 20px 0 20px 20px;
}

.cate a:hover {
  background: #070;
  color: #fff;
}

.side_bar img {
  width: 300px;
}


/*フッター*/
footer{
  background: #070;
  padding: 30px;
  color:#fff;
  margin-top: 50px;
}