/* �w�b�_�[ */
#header {
	width:100%;
	background: rgb(0,0,0);
	filter:alpha(opacity=60);
	background: rgba(0,0,0,0.6);
	position:fixed;
	top:0;
	height:100px;
	z-index: 99;
	box-sizing:border-box;
}
#header .logo {
	background-image:url(../images/header_logo.png);
	background-repeat:no-repeat;
	background-position: 30px center;
	width:100%;
	background-size:121px 64px;
	padding:25px 230px 0 170px;
	height:100px;
	box-sizing:border-box;
	text-align:left;
}
#header .logo h1 {
	font-size:30px;
	line-height:120%;
	font-weight:700;
}
#header .logo h1 a {
	text-decoration:none;
	color:#FFF;
}
#header .logo h1 span {
	display:block;
	font-size:14px;
	line-height:120%;
	font-weight:500;
}
#header .mail_btn {
	width:100px;
	height:100px;
	position:absolute;
	top:0;
	right:100px;
}
#header .mail_btn a {
	background-color:#84959E;
	color:#FFF;
	text-decoration:none;
	width:100%;
	height:100%;
	box-sizing:border-box;
	display:block;
	background-image:url(../images/icon_mailo.png);
	background-size:51px auto;
	background-position:center 31%;
	background-repeat:no-repeat;
}
#header .mail_btn a:hover {
	background-color:#6E7F87;
}
#header .mail_btn a strong {
	position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
}
.menu-container {
  position: relative;
}
.menu-container .menu {
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container .menu .menu-item {
  flex: 1;
}

.menu-container .menu .menu-item a {
  background: #fff;
  border-right: 1px solid #ccc;
  color: #333;
  display: block;
  padding: 0.6em 0.4em;
  text-align: center;
  text-decoration: none;
}

.menu-container .menu .menu-item a:hover {
  background: #77573F;
  color: #ffffff;
}

.menu-container .menu .menu-item:last-child a {
  border-right: none;
}

.icon-hamburger {
  background: #956134;
  cursor: pointer;
  height: 100px;
  position: absolute;
  width: 100px;
  margin-bottom:0;
 top: 0px;
 right:0;
 font-size:17px;
 line-height:19px;
 color:#FFFFFF;
}
.icon-hamburger:hover {
	background-color:#77573F;
}
.icon-hamburger strong {
	position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
}

.icon-hamburger span {
    background: #FFFFFF;
    display: block;
    height: 5px;
    left: 0;
    margin: -2% auto 0 auto;
    position: absolute;
    top: 38%;
    width: 65%;
    right: 0;
}

.icon-hamburger span::before,
.icon-hamburger span::after {
  background: #FFFFFF;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  width: 100%;
}

.icon-hamburger span::before {
 margin-top: -28%;
}

.icon-hamburger span::after {
  margin-top: 20%;
}

  .menu-container .menu {
    display: none;
    position: absolute;
    width: 100%;
  }
  .menu-container .menu .menu-item {
    flex: 1;
    width: 100%;
	margin: 0;
}
 .menu-container .menu .menu-item a {
    border-bottom: 1px solid #ccc;
    border-right: none;
  }
  .menu-container .menu .menu-item:last-child a {
    border-bottom: none;
  }
    .icon-hamburger {
    display: inline-block;
  }


@media screen and (max-width: 800px) {
#header {
    height: 80px;
}

#header .logo h1 {
    font-size: 23px;
}
#header .logo {
    background-position: 10px center;
    background-size: 80px auto;
    padding: 13px 180px 0 100px;
    height: 80px;
}
#header .mail_btn {
    width: 80px;
    height: 80px;
    right: 80px;
}
.icon-hamburger {
    height: 80px;
    width: 80px;
}
#header .mail_btn a strong {
    bottom: 0px;
}
.icon-hamburger strong {
    bottom: 6px;
}
}
@media screen and (max-width: 700px) {
#header .logo h1 span {
    display: none;
}
#header .logo {
    padding: 25px 180px 0 100px;
}
}