@charset "UTF-8";

.sp_menu{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1100;
}


.sp_menu .menu {
	float: right;
	width: 17.56vw;
	height: 13.5vw;
}

.sp_menu .menu a {
	display: block;
	width: 100%;
	height: 100%;
	color: #664A3A;
	text-decoration: none;
  position: absolute;
  top:0;
  left:0;
  right:0;
  margin:auto;
}

.sp_menu .menu a .icon{
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  width: 7.16vw;
  height: 0.945vw;
  background: #664A3A;
  border-radius: 1.5px;
  transform: translate(-50%, -50%);
}
.sp_menu .menu a .icon:before,
.sp_menu .menu a .icon:after{
  display: block;
  content: "";
  position: absolute;
  left:0;
  right:0;
  margin:auto;
  width: 7.16vw;
  height: 0.945vw;
  background: #664A3A;
  border-radius: 1.5px;
  transition: .3s;
}
.sp_menu .menu a .icon:before{
  top: -2.16vw;
}
.sp_menu .menu a .icon:after{
  bottom: -2.16vw;
}
.sp_menu .menu a.close .icon{
  background-color: transparent;
}
.sp_menu .menu a.close .icon:before,
.sp_menu .menu a.close .icon:after{
  top: 0;
  bottom: 0;
}
.sp_menu .menu a.close .icon:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.sp_menu .menu a.close .icon:after{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.sp_nav_area{
  display: none;
  background-color: #ffffff;
  position: fixed;
  top: 13.5vw;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 999;
  overflow: auto;
}
.sp_nav_area_inner{
  display: block;
  margin: 0.27vw 4.86vw 27vw;
}
.sp_nav_list{
  margin-bottom: 2.7vw;
  border-top: 1px solid #664A39;
}
.sp_nav_list > li{
  border-bottom: 1px solid #664A39;
}
.sp_nav_list > li > a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 14.05vw;
  padding: 1.62vw 9.45vw 1.62vw 3.24vw;
  color: #492B13;
  font-size: 4.324vw;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.5;
  letter-spacing: 0.02em;
  position: relative;
  box-sizing: border-box;
  transition-duration: 0.3s;
}
.sp_nav_list > li.is_active > a{
  background-color: #f5f3f0;
}
.sp_nav_list > li > a:after{
  content: "";
  display: block;
  width: 4.05vw;
  height: 4.05vw;
  background-color: #FF7300;
  background-image: url(../img/sp/icon-sp_nav_list.svg);
  background-position: 1.756vw center;
  background-repeat: no-repeat;
  background-size: 1.08vw auto;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 2.7vw;
  bottom: 0;
  margin: auto;
}
.sp_nav_list > li > a small{
  display: block;
  color: #FF7300;
  font-size: 0.625em;
}
.sp_nav_bnr{
  display: block;
  padding: 3.24vw 2.7vw;
  color: #492B13;
  font-size: 3.78vw;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
  text-align: center;
  background-color: #ffffff;
  border: 1.5px solid #492B13;
  border-radius: 1.62vw;
  transition-duration: 0.3s;
}
.sp_nav_bnr:hover{
  color: #ffffff;
  background-color: #492B13;
}


@media only screen and (max-width: 740px) {
  .sp_menu{
    display: block;
  }
  .header .header__cta{
    display: none;
  }
}