@charset "utf-8";
/*
 * smartphone_nav
 */
.sm_header {
	position:fixed;
	top: 0px;
	left: 0px;
  display: none;
  justify-content: space-between;
  background: #fffee6;/* 背景色 */
  border-bottom: #7bb277 solid 1px;
  padding: 5px 4%;
  width: 100%;
  z-index: 30;
}
.sm_logo a{
  font-size: 14px;
  color: white;
  line-height: 40px;
  text-decoration: none;
}
.sm_logo a img{
	width: 140px;
}

.sm_nav-button {
  display: none;
}
.sm_nav {
  a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    color: #448aff;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
}
.sm_nav-wrap.open {
  display: block;
}
.sm_nav-wrap.close {
  display: none;
}
@media screen and (max-width: 767px) {
	.sm_header {
	  display: flex;
	}
  .sm_nav-button {
    display: block;
    cursor: pointer;
  }
  .sm_nav-wrap {
    position: fixed;
    left: 0;
    top: 50px;
    display: none;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 200;
  }
	.sm_nav{
		padding: 0;
	  height: 100%;
	  position: relative;
	  overflow-x: hidden;
	  overflow-y: auto;
	}
	.sm_nav li{
	  display: block;
	  border-bottom: white solid 1px;
    background-color: rgba(0, 0, 0, 0.5);
	  padding: 0 10px;
	  margin: 0;
	}
	.sm_nav li:first-child{
	  border-top: white solid 1px;
	}
	.sm_nav li:last-child{
		margin-bottom: 40px;
	}
	.sm_nav li a{
	  display: block;
	  padding: 10px 0;
	  color: #fff;
	  font-size: 15px;
	  text-decoration: none;
	}
	
	.sm_subnav{
		padding-left: 10px;
		height: auto;
	}
	.sm_subnav li{
		height: auto;
		border: none !important;
		margin-bottom: 0px !important;
	}
	
  /*メニューボタンのエフェクト*/
  .sm_nav-button,
  .sm_nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
    z-index: 300;
  }
  .sm_nav-button {
    z-index: 20;
    position: relative;
    width: 40px;
    height: 36px;
    z-index: 300;
  }
  .sm_nav-button span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #4f884b;
    border-radius: 4px;
    z-index: 300;
  }
  .sm_nav-button span:nth-of-type(1) {
    top: 5px;
  }
  .sm_nav-button span:nth-of-type(2) {
    top: 16px;
  }
  .sm_nav-button span:nth-of-type(3) {
    bottom: 5px;
  }
  .sm_nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(11px) rotate(-45deg);
    transform: translateY(11px) rotate(-45deg);
  }
  .sm_nav-button.active span:nth-of-type(2) {
    opacity: 0;
  }
  .sm_nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-11px) rotate(45deg);
    transform: translateY(-11px) rotate(45deg);
  }
}