@charset "shift_jis";

/* header */
.subnav li a{display: block;position: relative;}
.subnav li a:before {content: '';position: absolute;top: 50%;left: 0;display: block;width: 1px;height: 12px;margin: -6px 0 0;}
.subnav li:first-of-type a:before {content: unset;}
@media screen and (max-width: 999px){.subnav{padding-top:80px;text-align: center;}
.subnav li{width:calc(100% / 4);}
.subnav li a{padding: 10px 0;color: #000;}
.subnav li a:before {background: #000;}
.subnav .fa {padding-right:.5em;}
.page-title{margin: 3vh auto !important;}
}
@media screen and (min-width: 1000px){
.subnav li a{padding: 20px 36px;color: #000;transition: all .5s ease;}
.subnav li a:hover{color: #3a3a3a;}
.subnav li a:before {background: #000;}
.subnav .fa {display:none;}
.page-title{margin-bottom: 3vh;}
}

/* footer */
@media screen and (max-width:999px){
body.fixed{z-index:1;}
/*.global-nav {position:fixed;z-index:900;}*/
.global-nav nav.is-active ul{
max-height:450px;z-index: 900;transform: translateZ(0);
display: -webkit-box !important;display: -moz-box !important;di51splay: -ms-flexbox !important;display: -webkit-flex !important;display: flex !important;
-webkit-flex-wrap: wrap;flex-wrap: wrap;
-webkit-box-pack: flex-start;-moz-box-pack: flex-start;-ms-flex-pack: flex-start;-webkit-justify-content: flex-start;justify-content: flex-start;}
.global-nav nav.is-active li{width:calc(100% / 2);z-index: 901;}
.global-nav nav a{height:49px;z-index: 902;}
#costume-wrap,#sch_nav,#page-top,.event-area article,.news-area article{padding-top:80px;}
}


/* mobile */
/* bottom menu */
.bottom-menu {
  width: 100%;height: 50px;
  position: fixed;bottom: 0;left: 0;
  z-index: 2;
}
.bottom-menu > ul {
  height: 50px;
  background: var(--color-primary);
  position: relative;
  z-index: 9999;
}
.bottom-menu > ul li {
  width: calc( 100% / 5 );max-width: 130px;
}
.bottom-menu > ul li a {
  width: 60px;
  margin: 0 auto;padding-top: 34px;padding-bottom: 6px;
  font-size: 10px;line-height: 1;color: #fff;
  display: block;
}
.bottom-menu > ul li.cast a {
  background: url("../../temp4/img/nav/cast-icon.svg") no-repeat;
  background-position: 50% 8px;background-size: auto 22px;
}
.bottom-menu > ul li.schedule a {
  background: url("../../temp4/img/nav/schedule-icon.svg") no-repeat;
  background-position: 50% 8px;background-size: auto 22px;
}
.bottom-menu > ul li.net a {
  background: url("../../temp4/img/nav/net-icon.svg") no-repeat;
  background-position: 50% 8px;background-size: auto 22px;
}
.bottom-menu > ul li.tel a {
  background: url("../../temp4/img/nav/tel-icon.svg") no-repeat;
  background-position: 50% 8px;background-size: auto 22px;
}
/*
.bottom-menu > ul a {
  height: 50px;
  line-height: 50px;color: var(--color-white);
  display: block;
}*/
.hamburger {
  width: 50px;height: 50px;
  position:fixed;bottom:10px;left: 0;
  z-index: 9999;
  background: var(--color-primary);
  cursor: pointer;
}
.hamburger span {
  width: 45%;height: 3px;
  position: absolute;left: 14px;
  display: inline-block;
  transition: all .3s;
  border-radius: 2px;
  background: #fff;
}
.hamburger span:nth-of-type(1) {top: 15px;}
.hamburger span:nth-of-type(2) {top:23px;}
.hamburger span:nth-of-type(3) {top:31px;}
.hamburger.active span:nth-of-type(1) {
  width: 30%;
  top: 18px;left: 18px;
  transform: translateY(6px) rotate(-45deg);
}
.hamburger.active span:nth-of-type(2) {opacity: 0;}
.hamburger.active span:nth-of-type(3) {
  width: 30%;
  top: 30px;left: 18px;
  transform: translateY(-6px) rotate(45deg);
}
.hamburger {
  position: absolute;bottom: 0;left: 50%;
  transform: translate(-50%, 0);
}

.nav-close {
  width: 50px;height: 50px;
  position:fixed;top:10px;right: 0;
  z-index: 9999;
  cursor: pointer;
  background: transparent;
}
.nav-close span {
  width: 45%;height: 3px;
  position: absolute;left: 14px;
  display: inline-block;
  border-radius: 2px;
  background: #fff;
}
.nav-close span:nth-of-type(1) {
  top: 18px;left: 18px;
  transform: translateY(6px) rotate(-45deg);
}
.nav-close span:nth-of-type(2) {
  top: 30px;left: 18px;
  transform: translateY(-6px) rotate(45deg);
}

#gnav {
  width: 100%;height: 100vh;
  position: fixed;top: 0;left: 0;
  z-index : 99;
  background: rgba(215, 215, 215, .95);
  transform: translateY(1000%);
  transition: all .3s;
}
#gnav .gnav-inner {
  width: 100%;max-width: 650px;height: calc( 100vh - 50px );
  position: fixed;left: 50%;
  transform: translate(-50%, 0);
  z-index: 9999;
  overflow: auto;
}

#gnav .gnav-inner ul {
  width: 100%;
  margin-top: 24px;
  gap: 10px 8px;
}
#gnav .gnav-inner ul:first-of-type{
  margin-top: 68px;
}
#gnav .gnav-inner li {
  width: calc( calc( 100% - 8px ) / 2 );
}
#gnav .gnav-inner ul:first-of-type li {
}
#gnav .gnav-inner ul:first-of-type li a {
  width: 100%;
  display: block;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
}

#gnav .gnav-inner ul:nth-of-type(2) li,
#gnav .gnav-inner ul:nth-of-type(3) li {
  height: 40px;
  position: relative;
  overflow: hidden;
}
#gnav .gnav-inner ul:nth-of-type(2) li a,
#gnav .gnav-inner ul:nth-of-type(3) li a {
  width: 100%;height: 40px;
  padding: 6px;
  display: block;
  border-radius: 3px;
  line-height: 1em;
  position: absolute;top: 50%;left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
#gnav .gnav-inner ul:nth-of-type(2) li a {
  background: rgb(255 255 255 / 80%);
}
#gnav .gnav-inner ul:nth-of-type(3) li a {
  //background: var(--color-tertiary);
  background: #40c2ba;
  color: var(--color-white);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
}
#gnav .gnav-inner ul:not(:first-of-type) li a::after {
  content: attr(title);
  display: block;
  font-size: 80%;
}
#gnav.active {
  opacity: 100;
  display: block;
  transform: translateY(0%);
}