#header {
position: sticky;
top: 0;
z-index: 100;
width: 100vi;
margin-inline: calc(50% - 50vi);
}
body.home #header h1 {
display: none;
}
.nav-menu {
width: 100%;
background-color: var(--navy-color);
position: relative;
}
.nav-menu::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 7px;
background: linear-gradient(to right, #9e74ab 0% 5%, #7abdab 5% 10%, #61a6da 10% 15%, #e6a4b2 15% 20%, #e9cf67 20% 25%, #bbd36b 25% 30%, #95acc7 30% 35%, #e8e476 35% 40%, #7fba7a 40% 45%, #ebb059 45% 50%, #e1895e 50% 55%, #d16f61 55% 60%, #8ebce4 60% 65%, #e377c2 65% 70%, #9e74ab 70% 75%, #7abdab 75% 80%, #61a6da 80% 85%, #e6a4b2 85% 90%, #e9cf67 90% 95%, #bbd36b 95% 100%);
}
.nav-list {
display: flex;
align-items: center;
gap: 3.5rem;
padding: 25px 0 32px;
}
.nav-list li {
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 14px;
color: var(--white-color);
transition: opacity 0.2s ease;
}
.nav-list li a:hover {
color: var(--Key-color);
}

body.page-id-15 .nav-menu,
body.page-id-19 .nav-menu,
body.page-id-21 .nav-menu,
body.page-id-23 .nav-menu,
body.page-id-24 .nav-menu,
body.page-id-26 .nav-menu,
body.page-id-48 .nav-menu,
body.post-type-archive-ticket .nav-menu,
body.post-type-archive-goods .nav-menu,
body.single .nav-menu {
padding: 0;
position: relative;
height: 5.75rem;
}
@media (min-width: 899px) {
body.page-id-15 .nav-menu,
body.page-id-19 .nav-menu,
body.page-id-21 .nav-menu,
body.page-id-23 .nav-menu,
body.post-type-archive .nav-menu,
body.post-type-archive-ticket .nav-menu,
body.post-type-archive-goods .nav-menu,
body.single .nav-menu {
height: 81px;
}
body.home .innerHeader {
position: static !important;
display: flex !important;
justify-content: center !important;
}
}
body.page-id-15 .nav-list,
body.page-id-19 .nav-list,
body.page-id-21 .nav-list,
body.page-id-23 .nav-list,
body.post-type-archive .nav-list,
body.post-type-archive-ticket .nav-list,
body.post-type-archive-goods .nav-list,
body.single .nav-list {
padding: 0;
margin-top: -1em;
margin-top: clamp(-80px, 12.598vw - -32px, -32px);
margin-top: clamp(-80px, 4.199vw - -32px, -32px);
}
.nav-list li:first-child {
display: none;
}
body.home .nav-list li:first-child {
display: block;
}
.innerHeader {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
width: var(--inner);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index: 2;
}
.nav-menu h1 {
width: 35%;
max-width: 350px;
}
.nav-menu h1 img {
width: 100%;
height: auto;
display: block;
}
.menu,
.nav-toggle,
.nav-btn,
.nav-list .sp-menu-logo {
display: none;
}
@media (max-width: 898px) {
body {
transform: none !important;
animation: none !important;
opacity: 1 !important;
}
.wrapper {
padding-top:clamp(60px, 5.74vw + 38.49px, 90px); !important;
}
#header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
margin: 0 !important;
margin-inline: 0 !important;
z-index: 9999 !important;
}
body.home #header h1,
.nav-menu h1 {
display: block !important;
width: 9% !important;
min-width: 90px !important;
}
.nav-menu {
height: clamp(60px, 5.74vw + 38.49px, 90px);!important;
padding: 0 !important;
}
body.page-id-15 .nav-list,
body.page-id-19 .nav-list,
body.page-id-21 .nav-list,
body.page-id-23 .nav-list,
body.post-type-archive .nav-list,
body.post-type-archive-ticket .nav-list,
body.post-type-archive-goods .nav-list,
body.single .nav-list {
margin-top: 0 !important;
padding: 0 !important;
}
.nav-list .sp-menu-logo {
display: block !important;
width: 40% !important;
max-width: 200px !important;
margin-bottom: 1rem !important;
}
.nav-list .sp-menu-logo img {
width: 100% !important;
height: auto !important;
display: block !important;
}
.nav-toggle {
display: none;
}
.menu {
display: block !important;
position: fixed !important;
top: 8px !important;
right: 8px !important;
z-index: 10000 !important;
width: 40px !important;
height: 40px !important;
}
.nav-btn {
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 100% !important;
height: 100% !important;
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
}
.nav-btn span {
display: block;
width: 25px;
height: 2px;
background-color: var(--line-color);
transition: all 0.3s ease-out;
}
.nav-list {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important;
height: calc(100vh - 7px) !important;
background: url("../images/background/pattern.png") repeat left top, var(--bg-contents) url("../images/background/bg.png") repeat !important;
background-size: 250% auto, 40px auto !important;
background-attachment: fixed !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 2.5rem !important;
padding: 0 !important;
z-index: 9998 !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.4s ease, visibility 0.4s ease !important;
}
.nav-list li {
font-family: "Noto Serif JP", serif;
font-weight: 700;
color: var(--Key-color);
font-size: clamp(20px, calc(0.8rem + 0.5vw), 22px);
}
.nav-list li:first-child {
display: block;
}
.nav-list li a:hover {
color: var(--font-color) !important;
}
body:has(#nav-toggle:checked) .nav-list {
opacity: 1 !important;
visibility: visible !important;
}
#nav-toggle:checked + .nav-btn span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#nav-toggle:checked + .nav-btn span:nth-child(2) {
opacity: 0;
}
#nav-toggle:checked + .nav-btn span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.innerHeader {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 0 clamp(0.75rem, 0.53rem + 0.76vw, 1.25rem) !important;
position: relative !important;
left: auto !important;
right: auto !important;
margin: 0 !important;
width: 100% !important;
z-index: 2 !important;
}
.nav-list::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 7px;
background: linear-gradient(to right, #9e74ab 0% 5%, #7abdab 5% 10%, #61a6da 10% 15%, #e6a4b2 15% 20%, #e9cf67 20% 25%, #bbd36b 25% 30%, #95acc7 30% 35%, #e8e476 35% 40%, #7fba7a 40% 45%, #ebb059 45% 50%, #e1895e 50% 55%, #d16f61 55% 60%, #8ebce4 60% 65%, #e377c2 65% 70%, #9e74ab 70% 75%, #7abdab 75% 80%, #61a6da 80% 85%, #e6a4b2 85% 90%, #e9cf67 90% 95%, #bbd36b 95% 100%);
z-index: 10;
}
.nav-list::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 7px;
background: linear-gradient(to right, #9e74ab 0% 5%, #7abdab 5% 10%, #61a6da 10% 15%, #e6a4b2 15% 20%, #e9cf67 20% 25%, #bbd36b 25% 30%, #95acc7 30% 35%, #e8e476 35% 40%, #7fba7a 40% 45%, #ebb059 45% 50%, #e1895e 50% 55%, #d16f61 55% 60%, #8ebce4 60% 65%, #e377c2 65% 70%, #9e74ab 70% 75%, #7abdab 75% 80%, #61a6da 80% 85%, #e6a4b2 85% 90%, #e9cf67 90% 95%, #bbd36b 95% 100%);
z-index: 10;
}
}