/* 2022/11/17 */

/* --------------------------------------------------- side menu */
.menu {
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;/*height: 100%;*/
  background: rgba(0,0,0,.8);
  -webkit-transition: all .5s;
  transition: all .5s;
  visibility: hidden;
  opacity: 0;
  z-index: 4;
}

.side-open .menu {
  /*cursor: url(../img/cross.svg),auto;*/
  -webkit-transition: all .5s;
  transition: all .5s;
  visibility: visible;
  opacity: 1;
}

.menu ul {
  display: table-cell;
  vertical-align: middle;
}

.menu li {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  
}
.menu li img{
  margin-right: 5px;
}
.menu li p{
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  
}


.side-open .menu li {
  opacity: 1;
}

.side-open .menu li:nth-child(1) {
  -webkit-transition: opacity 1s ease .5s;
  transition: opacity 1s ease .5s;
}

.side-open .menu li:nth-child(2) {
  -webkit-transition: opacity 1s ease .6s;
  transition: opacity 1s ease .6s;
}

.side-open .menu li:nth-child(3) {
  -webkit-transition: opacity 1s ease .7s;
  transition: opacity 1s ease .7s;
}

.side-open .menu li:nth-child(4) {
  -webkit-transition: opacity 1s ease .8s;
  transition: opacity 1s ease .8s;
}

.side-open .menu li:nth-child(5) {
  -webkit-transition: opacity 1s ease .9s;
  transition: opacity 1s ease .9s;
}

.menu li a {
  display: block;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #f5f5f5;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.menu li a:hover {
  color: #999;
}

/* --------------------------------------------------- menu-btn */
.menu-btn {
  position: fixed;/*position: absolute;*/
  top: 50%;/*top: 200px;*/
  right: 0px;
  /*width: 100px;*/
  /*height: 50px;*/
  line-height: 40px;
 /* font-size: 12px;*/
  padding: 20px 0;
  text-align: center;
  cursor: pointer;
  z-index: 5;/**/
  background:#fbd31c;
  -webkit-writing-mode: vertical-rl; /* Chrome,Safari対応*/
      -ms-writing-mode: tb-rl; /* IE対応*/
          writing-mode: vertical-rl;
border-radius: 20px 0px 0px 20px;
}

@media screen and (max-width: 480px) {
  .menu-btn {
  position: fixed;
  top: 50%;
  right: 0px;
  line-height: 30px;
}
  }

.menu-btn span {
  color: #222;
  font-weight: bold;
}

.menu-btn span:first-child {
  color: #222;
  font-weight: bold;
  text-orientation: upright;
  writing-mode: vertical-rl;
  text-combine-upright: all;
}

.menu-btn span:after {
  content: url(../img/open_menu.svg);
}

.side-open .menu-btn span:after {
  content: url(../img/close_menu.svg);
}


/*.menu-btn span:after {
  content: attr(data-txt-open);
}

.side-open .menu-btn span:after {
  content: attr(data-txt-close);
}*/

.menu-btn:hover span:nth-child(1):after {
  -webkit-animation: anim .5s ease 0s forwards;
  animation: anim .5s ease 0s forwards;
}

.menu-btn:hover span:nth-child(2):after {
  -webkit-animation: anim .5s ease .1s forwards;
  animation: anim .5s ease .1s forwards;
}

.menu-btn:hover span:nth-child(3):after {
  -webkit-animation: anim .5s ease .2s forwards;
  animation: anim .5s ease .2s forwards;
}

.menu-btn:hover span:nth-child(4):after {
  -webkit-animation: anim .5s ease .3s forwards;
  animation: anim .5s ease .3s forwards;
}

.menu-btn:hover span:nth-child(5):after {
  -webkit-animation: anim .5s ease .4s forwards;
  animation: anim .5s ease .4s forwards;
}

@-webkit-keyframes anim {
  0% {-webkit-transform:translateY(0px);transform:translateY(0px);}
  50% {-webkit-transform:translateY(-5px);transform:translateY(-5px);}
  100% {-webkit-transform:translateY(0px);transform:translateY(0px);}
}

@keyframes anim {
  0% {-webkit-transform:translateY(0px);transform:translateY(0px);}
  50% {-webkit-transform:translateY(-5px);transform:translateY(-5px);}
  100% {-webkit-transform:translateY(0px);transform:translateY(0px);}
}

