@charset "utf-8";
.hamburger {
  /*position: relative;*/
  position: fixed;
  width: 100px;
  height: 40px;
  cursor: pointer;
  background-color: #000000;
  opacity: 0.8;
  border-radius: 6px;
  z-index: 9;
  color:#ffffff;
}

.hamburger_line {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  background-color: #ffffff;
}
.hamburger_line1 {
  top: 10px;
}
.hamburger_line2 {
  top: 18px;
}
.hamburger_line3 {
  top: 26px;
}
.hamburger_line {
  transition: all 0.3s;
}
.clicked .hamburger_line1 {
  transform: rotate(45deg);
  top: 20px;
}
.clicked .hamburger_line2 {
  width: 0px;
}
.clicked .hamburger_line3 {
  transform: rotate(-45deg);
  top: 20px;
}
.menu {
  position: fixed;
  opacity: 0;
  padding-right: 20px;
  padding-left:20px;
  margin-right:-250px;
  background-color: #000000;
  transition: all 0.3s;
  border-radius: 6px;
  padding-top: 50px;
  z-index:  8 !important;
  color:#ffffff;
}
.clicked .menu {
  opacity: 0.8;
  z-index:  8;
  margin-right:0;
  color:#ffffff;
}
.menu ul {
  list-style: none;
  margin-left: -1rem;
  margin-bottom:20px;
}
.menu ul li a{color:#ffffff}
/************▽スマホ表示▽************/
@media screen and (max-width:567px) {
.hamburger,.menu {
  top: 2px;
  right: 2px;
  }
}
/************△スマホ表示△************/
/************▽タブレット表示▽************/
@media screen and (min-width: 567px)and (max-width:1023px) {
.hamburger,.menu {
  top: 2px;
  right: 2px;
  }
}
/************△タブレット表示△************/
/************▽PC表示▽************/
@media screen and (min-width:1024px) {
.hamburger,.menu {
  top: 50px;
  right: 2px;
  }
  
}
/************△PC表示△************/