#modal {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
}
#modal img {
 position: absolute;
 top: 2.5rem;
 left: 3.3rem;
 width: calc(11.5rem + ((1vw - 3.2px) * 3.125));
}
.menu-trigger, .close-trigger {
 display: block;
 position: fixed;
 top: 2.5rem;
 width: 5rem;
 height: 5rem;
 right: 3.3rem;
 cursor: pointer;
 z-index: 333;
}
.menu-trigger-bar {
 display: block;
 position: relative;
 width: 100%;
 height: 0.5rem;
 margin-top: 0.75rem;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 background-color: #0ec2ff;
}
.menu-trigger-bar.top {
 width: 50%;
}
.menu-trigger-bar.middle:before {
 right: 0;
 left: auto;
}
.menu-trigger-bar.bottom {
 width: 50%;
 margin-left: 50%;
}
.menu-trigger:hover .menu-trigger-bar:before {
 width: 100%;
}
.menu-trigger-bar:before {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 0%;
 height: 100%;
 content: "";
 transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 background-color: rgba(0, 0, 0, 0.2);
}
.close-trigger {
 z-index: 5;
}
.close-trigger-bar {
 display: block;
 position: relative;
 width: 100%;
 height: 0.5rem;
 background-color: #000000;
}
.close-trigger-bar.left {
 margin-top: 2rem;
 -webkit-transform: translateX(100px) translateY(-100px) rotate(-45deg);
 -ms-transform: translateX(100px) translateY(-100px) rotate(-45deg);
 transform: translateX(100px) translateY(-100px) rotate(-45deg);
}
.close-trigger-bar.right {
 margin-top: -0.5rem;
 -webkit-transform: translateX(-100px) translateY(-100px) rotate(45deg);
 -ms-transform: translateX(-100px) translateY(-100px) rotate(45deg);
 transform: translateX(-100px) translateY(-100px) rotate(45deg);
}
.close-trigger:hover .close-trigger-bar:before {
 width: 100%;
}
.close-trigger-bar:before {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 0%;
 height: 100%;
 content: "";
 transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 background-color: rgba(255, 255, 255, 0.2);
}
.container {
 position: relative;
 width: 100%;
 max-width: 120%;
 min-height: 100vh;
 margin: 0 auto;
 overflow: hidden;
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 background-color: #000000; 
}
.inner-container {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 200;
}
.menu-bg {
 display: block;
 position: absolute;
 background-color: #0ec2ff;
}
.menu-bg.middle {
 top: -66%;
 left: -137%;
 width: 332%;
 height: 215%;
 -webkit-transform: rotate(-45deg) scaleY(0.04);
 -ms-transform: rotate(-45deg) scaleY(0.04);
 transform: rotate(-45deg) scaleY(0.04);
}
.menu-bg.top {
 top: -129%;
 left: -61%;
 width: 125%;
 height: 150%;
 -webkit-transform: rotate(45deg) translateY(0%);
 -ms-transform: rotate(45deg) translateY(0%);
 transform: rotate(45deg) translateY(0%);
}
.menu-bg.bottom {
 top: 79%;
 left: 35%;    
 width: 125%;
 height: 150%;
 -webkit-transform: rotate(45deg) translateY(0%);
 -ms-transform: rotate(45deg) translateY(0%);
 transform: rotate(45deg) translateY(0%);
}
.menu-container {
 -js-display: flex;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 align-items: center;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index:999;
}
.menu {
 display: block;
 width: 100%;
 padding: 20%;
}
.menu li {
 display: block;
 text-align: center;
 padding: 2px 0;
}
.menu a {
 display: inline-block;
 position: relative;
 font-size: calc(1.5rem + ((1vw - 0px) * 0.208));
 color: #000000;
 text-decoration: none;
 padding: 1vh 0;
}
.menu a:hover:before {
 opacity: 0;
 -webkit-transform: translateX(0px);
 -ms-transform: translateX(0px);
 transform: translateX(0px);
}
.menu a:before {
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 width: 18px;
 height: 4px;
 content: "";
 opacity: 0;
 -webkit-transform: translateX(100px);
 -ms-transform: translateX(100px);
 transform: translateX(100px);
 transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 background-color: #000000;
}
.pc_nav {
 display: none;
 position: fixed;
 width: 70%;
 list-style: none;
 z-index: 5;
}
.pc_menu {
 -js-display: flex;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 justify-content: flex-end;
}
.pc_menu li {
 text-decoration: none;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
 #modal img {
  top: 2.5rem;
  left: 3.3rem;
  width: calc(10rem + ((1vw - 3.2px) * 3.125));
 }
 .menu-trigger, .close-trigger {
  top: 2.5rem;
  right: 3.3rem;
  width: 5rem;
  height: 5rem;
 }
 .menu-trigger-bar {
  height: 0.5rem;
  margin-top: 0.75rem;
 }
 .close-trigger-bar {
  height: 0.5rem;
 }
 .menu-bg.middle {
  top: -120%;
  left: -34%;
  width: 215%;
  height: 332%;
 }
 .menu-bg.top {
  top: -105%;
  left: -84%;
  width: 150%;
  height: 125%;
  -webkit-transform: rotate(-45deg) translateY(0%);
  -ms-transform: rotate(-45deg) translateY(0%);
  transform: rotate(-45deg) translateY(0%);
 }
 .menu-bg.bottom {
  top: 82%;
  left: 35%;    
  width: 150%;
  height: 125%;
  -webkit-transform: rotate(-45deg) translateY(0%);
  -ms-transform: rotate(-45deg) translateY(0%);
  transform: rotate(-45deg) translateY(0%);
 }
 .menu a {
  font-size: calc(1.6rem + ((1vw - 4.8px)* 0.208));
  padding: 2vh 0;
 }
 .menu br {
  display: none;
 }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
 #modal img {
  top: 4rem;
  left: 5.5rem;
  width: calc(13.5rem + ((1vw - 3.2px) * 3.125));
 }
 .menu-trigger, .close-trigger {
  top: 4rem;
  right: 5.5rem;
  width: 6rem;
  height: 6rem;
 }
 .menu-trigger-bar {
  height: 0.6rem;
  margin-top: 0.8rem;
 }
 .close-trigger-bar {
  height: 0.6rem;
 }
 .menu a {
  font-size: calc(2rem + ((1vw - 7.68px) * 0.520));
  padding: 1vh 0;
 }
 .menu-bg.middle {
  top: -56%;
  left: -74%;
  width: 232%;
  height: 200%;
 }
 .menu-bg.top {
  top: -92%;
  left: -67%;
  width: 100%;
  height: 100%;
 }
 .menu-bg.bottom {
  top: 95%;
  left: 65%;    
  width: 100%;
  height: 100%;
 }
}
@media only screen and (device-width: 812px) and (device-height: 375px) {
 #modal img {
  top: 2.8rem;
  left: 4.9rem;
  width: 13rem;
 }
 .menu-trigger, .close-trigger {
  top: 2.8rem;
  right: 4.9rem;
  width: 5rem;
  height: 5rem;
 }
 .menu-trigger-bar {
  height: 0.5rem;
  margin-top: 0.75rem;
 }
 .close-trigger-bar {
  height: 0.5rem;
 }
 .menu a {
  font-size: calc(1.8rem + ((1vw - 8.12px)* 0.208));
  padding: 1.5vh 0;
 }
 .menu-bg.middle {
  top: -35%;
  left: -50%;
  width: 206%;
  height: 260%;
 }
 .menu-bg.top {
  top: -121%;
  left: -45%;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-45deg) translateY(0%);
  -ms-transform: rotate(-45deg) translateY(0%);
  transform: rotate(-45deg) translateY(0%);
 }
 .menu-bg.bottom {
  top: 121%;
  left: 45%;    
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-45deg) translateY(0%);
  -ms-transform: rotate(-45deg) translateY(0%);
  transform: rotate(-45deg) translateY(0%);
 }
 .menu br {
  display: none;
 }
}
@media screen and (min-width: 960px) and (max-width: 1279px) {
 #modal img {
  top: 2.8rem;
  left: 4.9rem;
  width: calc(17rem + ((1vw - 12.8px) * 4.545));
 } 
 .pc_nav {
  display: inherit;
  top: 3.5rem;
  right: 3.8rem;
 }
 .pc_menu li {
  padding: 0 calc(1.1rem + ((1vw - 9.6px) * 0.909));
 }
 .pc_menu li a {
  font-size: calc(1.5rem + ((1vw - 9.6px) * 0.625));
  letter-spacing: 0.09em;
 }
 .close-trigger, #modal-content, #modal-open, #modal-close {
  display: none;
 }
}
@media screen and (min-width: 1280px) {
 #modal img {
  top: 3rem;
  left: 7rem;
  width: calc(18rem + ((1vw - 12.8px) * 4.545));
  }
 .pc_nav {
  display: inherit;
  top: 3.6rem;
  right: 6rem;
 }
 .pc_menu li {
  padding: 0 calc(1.2rem + ((1vw - 12.8px)* 0.909));
 }
 .pc_menu li a {
  font-size: calc(1.6rem + ((1vw - 12.8px)* 0.909));
  letter-spacing: 0.09em;
 }
 .close-trigger, #modal-content, #modal-open, #modal-close {
  display: none;
 }
}