@charset "UTF-8";

/* ========================================
   HEADER (COMMON)
======================================== */

@media (min-width: 750px) {

header{
position:fixed;
z-index:100;
top:min(20 / var(--size_window) * 100vw,20px);
left:0;
background:url(../images/common/nav/bg_nav.webp) repeat-y top left / 80% auto;
width:100%;
filter:drop-shadow(0 0 5px rgba(0,0,0,.5))
}

}

nav ul li > *{
position:relative;
z-index:0;
display:block;
margin-block:calc(1em - 1lh);
background:var(--color_active);
font-family:var(--font_en);
font-weight:700;
line-height:1;
text-decoration:none
}

nav ul li > * > img{
opacity:0;
height:100%;
width:auto
}

@media (hover:hover) and (pointer:fine){

nav ul li > a:hover,
nav ul li > a:focus{
background:var(--color_txt_yellow)
}

}

nav ul li > span{
background:var(--color_gray)
}


/* ========================================
   NAV SP
======================================== */

@media (max-width:750px){

nav{
background:url(../images/common/nav/bg_nav_sp.webp) repeat-y top left / 100% auto;
position:fixed;
z-index:90;
top:0;
left:0;
width:100%;
height:100%;
overflow-y:auto;
font-size:calc(80 / var(--size_font) * 1rem);
padding-block:1em;
transition:translate .5s
}

nav:not(.isOpen){
translate:-100% 0
}

nav ul{
width:100%;
height:100%
}

nav ul li > *{
padding:.7em .6em
}

nav ul li > * > img{
height:calc(66 / var(--size_window) * 100vw)
}

nav ul li.top > *{
-webkit-mask:url(../images/common/nav/top.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw);
mask:url(../images/common/nav/top.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw)
}

nav ul li.about > *{
-webkit-mask:url(../images/common/nav/about.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw);
mask:url(../images/common/nav/about.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw)
}

nav ul li.ticket > *{
-webkit-mask:url(../images/common/nav/ticket.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw);
mask:url(../images/common/nav/ticket.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw)
}

nav ul li.goods > *{
-webkit-mask:url(../images/common/nav/goods.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw);
mask:url(../images/common/nav/goods.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw)
}

nav ul li.highlights > *{
-webkit-mask:url(../images/common/nav/highlights.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw);
mask:url(../images/common/nav/highlights.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw)
}

nav ul li.special > *{
-webkit-mask:url(../images/common/nav/special.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw);
mask:url(../images/common/nav/special.webp) no-repeat left .6em center / auto calc(66 / var(--size_window) * 100vw)
}

nav ul li:is(.about,.ticket,.goods) > * > img{
height:calc(60 / var(--size_window) * 100vw)
}

}


/* ========================================
   NAV PC
======================================== */

@media (min-width:750px){

nav ul{
display:flex;
justify-content:flex-start;
align-items:center;
gap:min(40 / var(--size_window) * 100vw,40px);
margin:calc((1em - 1lh) / 2) auto;
padding:min(30 / var(--size_window) * 100vw,30px)
}

nav ul li > * > img{
height:min(32 / var(--size_window) * 100vw,32px)
}

nav ul li.top > *{
-webkit-mask:url(../images/common/nav/top.webp) no-repeat center / contain;
mask:url(../images/common/nav/top.webp) no-repeat center / contain
}

nav ul li.about > *{
-webkit-mask:url(../images/common/nav/about.webp) no-repeat center / contain;
mask:url(../images/common/nav/about.webp) no-repeat center / contain
}

nav ul li.ticket > *{
-webkit-mask:url(../images/common/nav/ticket.webp) no-repeat center / contain;
mask:url(../images/common/nav/ticket.webp) no-repeat center / contain
}

nav ul li.goods > *{
-webkit-mask:url(../images/common/nav/goods.webp) no-repeat center / contain;
mask:url(../images/common/nav/goods.webp) no-repeat center / contain
}

nav ul li.highlights > *{
-webkit-mask:url(../images/common/nav/highlights.webp) no-repeat center / contain;
mask:url(../images/common/nav/highlights.webp) no-repeat center / contain
}

nav ul li.special > *{
-webkit-mask:url(../images/common/nav/special.webp) no-repeat center / contain;
mask:url(../images/common/nav/special.webp) no-repeat center / contain
}

nav ul li:is(.about,.ticket,.goods) > * > img{
height:min(30 / var(--size_window) * 100vw,30px)
}

}


/* ========================================
   HAMBURGER BUTTON
======================================== */

@media (max-width:750px){

#btnNav{
position:fixed;
z-index:100;
top:0;
right:0;
aspect-ratio:1 / 1;
background:var(--color_bg_green);
width:calc(100 / var(--size_window) * 100vw);
height:auto;
border:none
}

#btnNav span{
position:absolute;
z-index:10;
top:50%;
left:50%;
background:var(--color_white);
width:calc(60 / var(--size_window) * 100vw);
height:calc(5 / var(--size_window) * 100vw);
translate:-50% -50%;
transition:rotate .3s,translate .3s .3s
}

#btnNav span:nth-of-type(1){
translate:-50% calc(-50% - 2.1333333333vw)
}

#btnNav span:nth-of-type(2){
transition:scale .3s .3s
}

#btnNav span:nth-of-type(3){
translate:-50% calc(-50% + 2.1333333333vw)
}

#btnNav.isOpen span{
transition:rotate .3s .3s,translate .3s 0s
}

#btnNav.isOpen span:nth-of-type(1){
translate:-50% calc(-50% + 0);
rotate:z 45deg
}

#btnNav.isOpen span:nth-of-type(2){
scale:0 1;
transition:scale .3s 0s
}

#btnNav.isOpen span:nth-of-type(3){
translate:-50% calc(-50% - 0);
rotate:z -45deg
}

}

@media (min-width:750px){

#btnNav{
display:none
}

}


/* ========================================
   TOP PAGE ONLY
======================================== */

#top nav ul{
margin:calc((1em - 1lh) / 2) auto
}

/* ========================================
   header.phpで任意のメニューにdisabledクラスを付けてグレーアウト
======================================== */
nav ul li.disabled {
  opacity: .35;
}

nav ul li.disabled a {
  pointer-events: none;
}