@charset "utf-8";
*{
padding: 0;
margin: 0;
}
body{
font-family: sans-serif;
line-height: 1;
color#333;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
display: block;
}
img{
max-width: 100%;
vertical-align: bottom;
}
.btn,.spnav{
display: none;
}

/*幅設定*/
.container{
max-width:960px;
margin:0 auto;
padding: 0 10px;
}

/*背景色・文字色*/
header,h2,footer{
 color:#fff;
 background-color:#070;
}

/*headerーーーーーー*/
header{
 height:300px;
 background:
  url(../img/header.jpg) 
    repeat-x center/cover;
}
h1{
 padding: 50px 0 30px;
 font-family:
  'Bruno Ace SC', cursive;
 font-size:60px;
}
header p{
 font-size:18px;
 font-weight: bold;
}

/*navigation------*/
.pcnav{
 margin-bottom: 50px;
 background-color:#cfa;
}
.pcnav ul{
 display: flex;
}
.pcnav li{
 width: 20%;
 text-align:center;
 line-height: 50px;
}
.pcnav a{
 color:#070;
}
.pcnav a:hover{
 color:#fff;
 background-color:#070;
}
 
/*2カラムレイアウト*/
.wrap{
margin-bottom: 50px;
display: flex;
justify-content: space-between;
padding: 50px 10px;
}
main{
width: calc(100%*(630/960));
}
.sidebar{
width: calc((100%*300/960));
}

/*main contents*/
h2{
padding:10px;
margin-bottom: 20px;
}
/*h3見出し*/
h3{
margin-bottom: 20px;
border-left:16px solid #070;
padding-left:5px;
}
main h3:last-of-type{
margin-top: 50px;
}

/*画像flot*/
main img{
float:left;
margin:0 20px 20px 0;
}
main div{
overflow:hidden;
}
main p{
line-height: 1.5;
}

/*詳細を見る*/
main a{
padding: 0 10px;
width: 5em;
color:#fff;
background-color:#f90;
}
main a:hover{
background-color:#f00;
}

/*sidebar------*/
.sidebar ul{
margin-bottom: 50px;
}
.sidebar li{
margin-bottom: 3px;

border: 1px solid #070;
}
.sidebar li a{
color: #070;
padding-left: 15px;
line-height: 50px;
}
.sidebar section a:hover{
color: #fff;
background: #070;
}



footer{
padding:30px 0;
}



/*メディアクエリ-----
--------------*/
@media screen and (max-width: 743px){
/*header*/
  header{
    height: 150px;
    text-align: center;
  }
  h1{
    font-size: 36px;
  }
  header p{
    font-size: 14px;  
  }

  /*menuボタン*/
  .btn i{
    display: block;
    line-height: 50px;
  }
  .btn{
    display: block;
    width: 50px;
    text-align: center;
    color: #eee;
    border: 4px solid #eee;
    background: rgba(85, 85, 85, 0.527);
    font-size: 35px;
    border-radius: 10px;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  /*navigation*/
  .pcnav{
    display: none;
  }
  .spnav{
    display: block;
    position: absolute;
    width: 100%;
    top: 64px;
  }
  .spnav li{
    text-align: center;
    line-height: 50px;
  }
  .spnav a{
    color: #070;
    background: rgba(204, 255, 170, 0.842);
    border-top: 1px solid #070;
  }
  .spnav li:last-child a{
    border-bottom: 1px solid #070; 
  }


  /*コンテンツ*/ 
  .wrap{
    padding: 20px 10px;
    display: block;
    margin-bottom: 0;
  }
  main, .sidebar{
    width: auto;
  }
  main h3:last-of-type{
    margin-top: 20px;
  }
  h3{
    margin-bottom: 10px;
  }
  main a{
    width: auto;
    margin: 10px 0 20px;
    text-align: center;
    line-height: 3.5em;
  }

  /*カテゴリー*/
  .sidebar ul{
    margin-bottom: 20px;
  }
  .sidebar  a{
    text-align: center;
    padding: 0;
  }
  .sidebar img{ 
      max-width: 70%;
  }

  /*footer*/
  footer{
    text-align: center;
  }
}