@charset "UTF-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, th, td {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 500;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul, ol {
  list-style: none; /* マーカーを消す */
}

a {
  text-decoration: none; /* 下線を消す */
}

img {
  border: 0;
}

img, input {
  vertical-align: bottom;
}

/*レイアウト*/
body{
  
}



#wrapper{
width: 100%;
height: 100%;
}

/*header*/

#header{
  width: 100%;
  height: 50px;
}

#header_in{
  position: relative;
  
}

/*header---icon---*/

ul#icon_link{
}

#icon_link li{
  width: 40px;
  height: 40px;
  float: right;
  margin:5px 0 0 8px;
  float: left;
}

#icon_link li a{
  display: block;
  width: 40px;
  height: 40px;
}


#icon_link i{
  color: #3e3521;
  font-size: 40px;
}

#icon_link i:hover{
  color: #D9A52E;
}


 /*---ハンバーガー---*/
p#hum {
  display:block;
  width:50px;
  height:50px;
  float: right;
  background-color:#3e3521;
  position:relative;
}
#bar {
  display:block;
  width:30px;
  height:2px;
  background:#fff;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.2s;
}
#bar:before {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#fff;
  position:absolute;
  top:-18px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.3s;
}
#bar:after {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#fff;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  margin-bottom:-9px;/*firefoxのバグ対応*/
  transition:0.3s;
}

/*クリックしたら.clickがつく*/
#bar.click {
  background:transparent;/*透明になる*/
}
#bar.click:before {
  top:0;
transform:rotate(-45deg);
}

#bar.click:after {
  margin-bottom:0;
transform:rotate(45deg);

}

/*----------------------------サイド-------------------------------*/
#side nav{
  width: 150px;

}

#gNavi{
  background-color: #fff;
  opacity: 0.8;
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 1000;
  border: 1px solid;
  display: none;

}

#gNavi li {
  width: 150px;
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid;
}

#gNavi li:last-child {
  border-bottom: none;
}

#gNavi li a{
  width: 150px;
  font-size: 20px;
  color: #3e3521;
  text-align: center;
}





/*----------------------------コンテンツ-------------------------------*/



#content{
  width: 100%;
  height: calc(100vh - 50px);
  overflow: hidden;
  position: relative;
  }

#img01{
  width: calc(50% - 15px);
  background-color: #FC0107;
   float: left;
  margin-bottom: 15px;
  height: calc(50% - 15px);
  background: url('img/top_img01.jpg') no-repeat center/cover;
}

#img02{
  width: calc(50% - 15px);
  height: calc(50% - 15px);
  background-color: #FC0107;
   float: right;
  margin-bottom: 15px;
  background: url('img/top_img02.jpg') no-repeat center/cover;
}

#img03{
  width: calc(50% - 15px);
  height: calc(50vh - 15px);
  background-color: #FC0107;
  float: left;
  height: calc(50vh - 15px);
  margin-top: 15px;
  background: url('img/top_img03.jpg') no-repeat center/cover;
}

#img04{
  width: calc(50% - 15px);
  height: calc(50vh - 15px);
  background-color: #FC0107;
  float: left;
  float: right;
  margin-top: 15px;
  background: url('img/top_img04.jpg') no-repeat center/cover;
}

#img05{
  width: 70%;
  height: 45vh;
  background: url('img/top_imgLogo.png') no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

}