@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}

:root {
  --color_black: #000;
  --color_white: #fff;
  --color_gray: #8c8c8c;

  --color_txt_green: #054937;
  --color_txt_yellow: #e4bf41;

  --color_bg_green: #054937;
  --color_bg_black: #2f2f2f;
  --color_bg_gray: #e4e4e4;

  --font_en: "Oswald", sans-serif;

  --color_active: var(--color_white);
  --color_article: var(--color_bg_green);

  --color_title_l2: var(--color_txt_green);
  --color_title_l3: var(--color_white);
  --color_title_l3_bg: var(--color_bg_black);

  --color_border_article: #02564c;

  --font_weight: 400;

  --tab_ratio: calc(100vw / 1500);
  --size_window: 750;
  --size_font: 24;
}

@media (min-width: 750px) {
  :root {
    --size_window: 1500;
    --size_font: 16;
  }
}

.active {
  --color_active: var(--color_txt_yellow);
  --font_weight: 600;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: var(--color_txt_green);
  font-weight: 600;
  text-decoration: underline;
}

a:has(> img) {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  a:hover,
  a:focus {
    text-decoration: none;
  }
}

ol li,
ul li {
  list-style-type: none;
}

img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  height: auto;
  vertical-align: bottom;
  line-height: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

.pc {
  display: none;
}

@media (min-width: 750px) {
  .sp {
    display: none;
  }

  .pc {
    display: block;
  }
}

::-moz-selection {
  background: var(--color_bg_green);
  color: var(--color_black);
}

::selection {
  background: var(--color_bg_green);
  color: var(--color_black);
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--color_black);
}

::-webkit-scrollbar-thumb {
  background: var(--color_bg_green);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color_bg_green) var(--color_black);
}

html {
  background: url(../images/common/bg_black.webp) repeat top left / 50px,
    var(--color_black);
  scroll-behavior: smooth;
  color: var(--color_black);
}

@media (max-width: 750px) {
  html {
    font-size: clamp(0.75rem, 0.214rem + 2.68vw, 1.5rem);
    scroll-padding-top: 4rem;
  }
}

@media (min-width: 750px) {
  html {
    font-size: clamp(0.563rem, 0.031rem + 1.11vw, 1rem);
    scroll-padding-top: 12rem;
  }
}

body {
  font-family: "Local Noto Sans JP", "Noto Sans JP", "ヒラギノ角ゴシック",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
    "Arial", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

#container {
  overflow: hidden;
}

/* ------------------------------
  header / nav
------------------------------ */

@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(0px 0px 5px rgba(0, 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);
}

@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 0.5s;
  }

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

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

  nav ul li > * {
    padding: 0.7em 0.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 0.6em center /
      auto calc(66 / var(--size_window) * 100vw);
    mask: url(../images/common/nav/top.webp) no-repeat left 0.6em center / auto
      calc(66 / var(--size_window) * 100vw);
  }

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

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

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

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

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

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

@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(nav ul li.about, nav ul li.ticket, nav ul li.goods) > * > img {
    height: min(30 / var(--size_window) * 100vw, 30px);
  }
}

@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 0.3s, translate 0.3s 0.3s;
  }

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

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

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

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

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

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

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

@media (min-width: 750px) {
  #btnNav {
    display: none;
  }
}

/* ------------------------------
  footer
------------------------------ */

footer {
  display: grid;
  font-size: 1rem;
  color: var(--color_white);
}

@media (max-width: 750px) {
  footer {
    gap: calc(80 / var(--size_window) * 100vw);
    padding-block: calc(80 / var(--size_window) * 100vw);
    text-align: center;
  }
}

@media (min-width: 750px) {
  footer {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: min(80 / var(--size_window) * 100vw, 80px);
    padding: min(60 / var(--size_window) * 100vw, 60px)
      max(min(100 / var(--size_window) * 100vw, 100px), (100vw - 1500px) / 2);
    text-align: right;
  }
}

footer ul {
  display: grid;
  justify-content: center;
  align-items: center;
}

@media (max-width: 750px) {
  footer ul {
    grid-template-columns: repeat(3, calc(80 / var(--size_window) * 100vw));
    gap: calc(60 / var(--size_window) * 100vw);
  }
}

@media (min-width: 750px) {
  footer ul {
    grid-template-columns: repeat(3, min(60 / var(--size_window) * 100vw, 60px));
    gap: min(30 / var(--size_window) * 100vw, 30px);
  }
}

footer .copyright {
  display: grid;
}

footer .copyright a {
  color: #abcd03;
}

@media (max-width: 750px) {
  footer .copyright {
    gap: calc(48 / var(--size_window) * 100vw);
  }

  footer .copyright a {
    width: fit-content;
    margin-inline: auto;
  }
}

@media (min-width: 750px) {
  footer .copyright {
    gap: min(16 / var(--size_window) * 100vw, 16px);
  }
}

/* ------------------------------
  common utility
------------------------------ */

.imgShadow {
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.6));
}

:where(.article) {
  background: hsla(0, 0%, 100%, 0.8);
  margin-inline: auto;
  border-top: 10px solid var(--color_border_article);
}

@media (max-width: 750px) {
  :where(.article) {
    width: calc(630 / var(--size_window) * 100vw);
    padding: calc(40 / var(--size_window) * 100vw);
  }
}

@media (min-width: 750px) {
  :where(.article) {
    width: min(1096 / var(--size_window) * 100vw, 1096px);
    padding: min(40 / var(--size_window) * 100vw, 40px);
  }
}

/* ------------------------------
  Cookie page specific
------------------------------ */

body#cookie #container {
  min-height: 100vh;
}

body#cookie main {
  color: var(--color_black);
  background:
    url("../images/cookie/bg_cookie.webp") no-repeat top center,
    url("../images/common/bg_black.webp") repeat top left / 50px,
    #111;
  background-size: 100% auto, 50px, auto;
}

body#cookie main > h1 {
  margin-inline: auto;
}

@media (max-width: 750px) {
  body#cookie main {
    padding-top: calc(120 / var(--size_window) * 100vw);
    padding-bottom: calc(120 / var(--size_window) * 100vw);
  }

  body#cookie main > h1 {
    width: calc(645 / var(--size_window) * 100vw);
    padding-block: calc(80 / var(--size_window) * 100vw);
  }
}

@media (min-width: 750px) {
  body#cookie main {
    padding-top: min(120 / var(--size_window) * 100vw, 120px);
    padding-bottom: min(120 / var(--size_window) * 100vw, 120px);
  }

  body#cookie main > h1 {
    width: min(966 / var(--size_window) * 100vw, 966px);
    padding-block: min(160 / var(--size_window) * 100vw, 160px)
      min(40 / var(--size_window) * 100vw, 40px);
  }
}

body#cookie .article h1 {
  margin-block: 0 1.5rem;
  font-weight: 900;
}

body#cookie .article h2 {
  margin-block: 2rem 1rem;
  font-weight: 900;
  color: var(--color_txt_green);
}

body#cookie .article p {
  font-weight: 600;
}

body#cookie .article a {
  word-break: break-all;
}

body#cookie footer {
  background:
    url("../images/cookie/bg_footer.webp") no-repeat center bottom / cover;
  min-height: 220px;
}
/*# sourceMappingURL=maps/cookie.css.map */