@charset "UTF-8";

/* ///////////////////////////////////////////////////////////////////

SP MENU

/////////////////////////////////////////////////////////////////// */

@media screen and (max-width:767px) {

.spMenu {
  position: fixed;
  top: 0;
  right: 0;
  /* width: 100%; */
  z-index: 998;
  text-align: right;
  height: 100vh;
  overflow-x: auto;
  background: rgb(23 21 19 / 90%);
}


.spMenu .pc-only {
  display: block !important;
}

.spMenu .headMenu {
  /* height: 100vh; */
  z-index: 999;
  transition: all ease .5s;
  overflow: hidden;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fff;
  font-family: 'Lato', sans-serif;
  display: inline-block !important;
  /* transform: translate(100vw, 0px); */
  /* transform-origin: right; */
  padding: 5em 2em 0;
  margin: 0 -100vw 0 0;
}

.is-open .headMenu {
  /* background: #7f7f7f; */
  /* width: 100%; */
  /* height: 100vh; */
  z-index: 999;
  display: inline-block;
  /* transform: translate(0vw, 0px); */
  margin: 0 0 0 0;
}

.spMenu .headMenu li {
  filter: drop-shadow(0px 0px 0.1em #6befff) drop-shadow(0px 0px 0.1em #6befff);
  line-height: 1;
  display: flex;
  align-items: center;
  margin: 0 0 1.2em;
}


.spMenu .headMenu li::before {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.15em;
  transform: scaleX(1.0);
  background: #fff;
  margin: 0 0.7em 0 0;
}

.spMenu .headMenu li a {
  text-decoration: none;
  color: unset;
}


.menuBT {
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  height: 5em;
  width: 5em;
  /* background: #fff; */
  z-index: 999;
}

.menuBT .menuIcon{
    position: relative;
    height: 100%;
    filter: drop-shadow(0px 0px 0.1em #6befff) drop-shadow(0px 0px 0.1em #6befff);
}

.menuBT .menuIcon span{
  display:block;
  height:6%;
  background:#fff;
  width:60%;
  position:absolute;
  margin:auto;
  left: 0%;
  right: 0%;
  transition:all .3s ease;
  transform-origin: center;
  transform: rotate(0deg);
}

.menuBT .menuIcon span:nth-child(1) {
  top: 30%;
  bottom: 64%;
}

.menuBT .menuIcon span:nth-child(2) {
  top: 0;
  bottom: 0;
}

.menuBT .menuIcon span:nth-child(3) {
  bottom: 30%;
  top: 64%;
}

.is-open .menuBT .menuIcon span:nth-child(1) {
  top: 0;
  bottom: 0;
  transform: rotate(45deg);

}

.is-open .menuBT .menuIcon span:nth-child(2) {
  width: 0;
}

.is-open .menuBT .menuIcon span:nth-child(3) {
  top: 0;
  bottom: 0;
  transform: rotate(-45deg);
}


}