body.fixed {
  height: 100%;
  overflow: hidden;
}
#overlay {
  z-index: -1;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  transition: opacity 0.4s;
}
#overlay.active {
  opacity: 1;
  z-index: 95;
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
}
#hamburger {
  position: fixed;
  background-image: url(../img/menu_mask.png), url(../img/menu_open.svg), url(../img/menu_close.svg);
  background-position: bottom center, bottom min(14px, 3.73vw) center, bottom -12px center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-color: #1a1a1a;
  background-size: min(55px, 14.67vw), min(22.9px, 6.1vw), min(28.6px, 7.63vw);
  border-radius: min(12px, 3.2vw);
  width: min(55px, 14.67vw);
  height: min(55px, 14.67vw);
  right: min(20px, 5.33vw);
  top: min(20px, 5.33vw);
  cursor: pointer;
  z-index: 102;
  transition: 0.4s;
}
@media only screen and (min-width: 750px) {
  #hamburger {
    background-position: bottom center, bottom 24px center, bottom -12px center;
    background-size: auto,auto,auto;
    border-radius: 17px;
    width: 77px;
    height: 77px;
    right: 60px;
    top: 50px;
  }
}
#hamburger span {
  position: absolute;
  top: min(25px, 6.66vw);
  width: 17px;
  left: calc((100% - 17px) / 2);
  height: 3px;
  transition: 0.4s;
}
@media only screen and (min-width: 750px) {
  #hamburger span {
    top: 32px;
    width: 25px;
    left: calc((100% - 25px) / 2);
  }
}
#hamburger span:before {
  content: "";
  position: absolute;
  background-color: #fcebb5;
  top: -1px;
  height: 3px;
  border-radius: 3px;
  left: calc((100% - 17px) / 2);
  width: 17px;
  transition: 0.4s;
}
@media only screen and (min-width: 750px) {
  #hamburger span:before {
    top: 1px;
    left: calc((100% - 25px) / 2);
    width: 25px;
  }
}
#hamburger span:after {
  content: "";
  position: absolute;
  background-color: #fcebb5;
  top: -7px;
  height: 3px;
  border-radius: 3px;
  left: calc((100% - 17px) / 2);
  width: 17px;
  transition: 0.4s;
}
@media only screen and (min-width: 750px) {
  #hamburger span:after {
    top: -7px;
    left: calc((100% - 25px) / 2);
    width: 25px;
  }
}
#hamburger.active {
  background-position: bottom center, bottom -12px center, bottom min(14px, 3.73vw) center;
}
@media only screen and (min-width: 750px) {
  #hamburger.active {
    background-position: bottom center, bottom -12px center, bottom 24px center;
  }
}
#hamburger.active span:before {
  transform: rotate(154deg);
  top: -2px;
}
#hamburger.active span:after {
  transform: rotate(-154deg);
  top: -2px;
}
@media only screen and (min-width: 750px) {
  .ccm-page #hamburger {
    background-image: url(/application/themes/theme2024/img/d_menu.webp);
    top: 16px;
    right: 309px;
    width: 90px;
    height: 90px;
  }
  .ccm-page #hamburger.active {
    background-image: url(/application/themes/theme2024/img/d_close.webp);
  }
}
.drawer {
  position: fixed;
  background-color: #f9f2dc;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  left: 100%;
  right: -100%;
  transition: 0.5s ease-in-out;
  overflow-y: auto;
  padding-top: min(120px, 32vw);
  padding-bottom: min(100px, 26.7vw);
}
@media screen and (min-width: 750px) {
  .drawer {
    padding-top: 140px;
    padding-bottom: 50px;
  }
}
.drawer.active {
  left: 0;
  right: 0;
}
@media screen and (min-width: 1024px) {
  .drawer.active {
    left: 50%;
    width: 50%;
  }
}
.drawer .d_menu li {
  list-style: none;
  text-align: center;
}
.drawer .d_menu li a {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #333;
  line-height: 1;
  display: inline-block;
  margin-bottom: min(20px, 5.3vw);
}
@media screen and (min-width: 750px) {
  .drawer .d_menu li a {
    margin-bottom: 40px;
  }
}
.drawer .d_menu li a.home {
  background-image: url(../img/h_home.svg);
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 40px;
  font-size: 14px;
  text-align: center;
  width: 76px;
}
.drawer .d_menu li a.howtojoin {
  background-image: url(../img/h_howto.svg);
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 40px;
  font-size: 14px;
  text-align: center;
  width: 143px;
}
.drawer .d_menu li a.aboutus {
  background-image: url(../img/h_about.svg);
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 40px;
  font-size: 14px;
  text-align: center;
  width: 157px;
}
.drawer .sns_link {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: min(30px, 8vw);
  padding-bottom: min(100px, 26.6vw);
}
@media screen and (min-width: 750px) {
  .drawer .sns_link {
    padding-top: 60px;
    padding-bottom: 50px;
  }
}
.drawer .sns_link a {
  overflow: hidden;
  border-radius: 50%;
}
.drawer .sns_link a img.size70 {
  width: 70px;
  height: 70px;
}
.drawer .contact_link {
  text-align: center;
}
.drawer .contact_link a.phone {
  background-image: url(../img/icon_phone.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 35px;
  padding-left: 45px;
  font-size: min(30px, 8vw);
  font-weight: 700;
  color: #333;
  line-height: 2;
  text-decoration: none;
  display: inline-block;
}
.drawer .contact_link a.mail {
  background-image: url(../img/icon_link.svg);
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 24px;
  color: #333;
  font-weight: 700;
  font-size: min(14px, 3.73vw);
  display: inline-block;
}