@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Italiana&display=swap");

:root {
  color-scheme: dark;
  --color-bg: #000;
  --color-surface: #0f0e0e;
  --color-surface-soft: #1a1a1a;
  --color-text: #fff;
  --color-muted: #999;
  --color-red: #c00;
  --color-blue: #01afd2;
  --color-blue-shadow: #0a6791;
  --color-gold: #cd9d70;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif;
  --content-width: min(700px, calc(100vi - 2rem));
  --footer-height: 60px;
  --nav-safe-space: clamp(9rem, 16vi, 12rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-block-end: var(--nav-safe-space);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  text-size-adjust: 100%;
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin-block-start: 0;
}

h1 {
  color: #626262;
  text-shadow: -1px -1px 0 #1b1b1b;
  font: 180% var(--font-serif);
  margin-block-end: 0;
}

h2 {
  color: var(--color-blue);
  text-shadow: -1px -1px 0 var(--color-blue-shadow);
  margin-block-end: 30px;
  font: 100% var(--font-sans);
}

h3 {
  color: var(--color-red);
  margin-block-end: 40px;
  font: 180% var(--font-serif);
}

p {
  color: var(--color-text);
  letter-spacing: 0.1em;
  font: 80%/2 var(--font-sans);
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

img {
  display: block;
  max-inline-size: min(100%, 700px);
  block-size: auto;
}

iframe {
  display: block;
  inline-size: 100%;
  border: 0;
}

.red {
  color: var(--color-red) !important;
}

.blue {
  color: var(--color-blue) !important;
}

.YL {
  color: var(--color-gold) !important;
}

.pink {
  color: #f90392 !important;
}

.space {
  margin-block-end: 60px;
  clear: both;
}

.center {
  text-align: center;
  margin-block: 20px;
}

.message {
  color: var(--color-red);
  list-style: none;
  font: bold 110% var(--font-serif);
  letter-spacing: 0;
  text-align: center;
}

.message2 {
  text-align: center;
  letter-spacing: 0.2em;
  color: var(--color-text);
  font-size: 60%;
}

.teepix {
  color: var(--color-blue);
  text-shadow: -1px -1px 0 var(--color-blue-shadow);
  margin-block: 60px 30px;
  font: 36px var(--font-serif);
  text-align: center;
}

.teepix a {
  color: var(--color-blue) !important;
  text-decoration: underline;
}

.live {
  color: var(--color-text);
  text-shadow: -1px -1px 0 #666;
  margin-block-end: 20px;
  font-family: var(--font-serif);
  font-size: 200%;
  font-weight: bolder;
}

.mb0 {
  margin-block-end: 0 !important;
}

.mb40 {
  margin-block-end: 40px !important;
}

.mb60 {
  margin-block-end: 60px !important;
}

.mb80 {
  margin-block-end: 80px !important;
}

.mb100 {
  margin-block-end: 100px !important;
}

.fsize70 {
  font-size: 70% !important;
}

.fsize80 {
  font-size: 80% !important;
}

.fsize90 {
  font-size: 90% !important;
}

.fsize100 {
  font-size: 100% !important;
}

.fsize110 {
  font-size: 110% !important;
}

.fsize120 {
  font-size: 120% !important;
}

.image_left {
  float: inline-start;
  margin: 0 10px 5px 0;
}

.clear {
  clear: both;
  margin: 0;
  padding: 0;
}

.listwrap {
  display: flex;
  justify-content: center;
}

.comentwrap {
  background: var(--color-surface-soft);
  padding: 60px 32px;
}

#nav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: var(--footer-height);
  z-index: 10000;
  cursor: default;
  background: var(--color-surface);
  font: 90% var(--font-serif);
  letter-spacing: 0.1em;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
  will-change: opacity, transform;
}

#nav.nav-at-top {
  inset-block-start: 0;
  inset-block-end: auto;
}

#nav.nav-is-fading {
  opacity: 0;
  pointer-events: none;
}

#nav:not(.nav-at-top).nav-is-fading {
  transform: translateY(0.75rem);
}

#nav.nav-at-top.nav-is-fading {
  transform: translateY(-0.75rem);
}

#nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem clamp(1rem, 3vi, 2rem);
  margin: 0;
  padding: 0.5rem 1.25rem 0.75rem;
  list-style: none;
}

#nav li {
  display: grid;
  grid-template-rows: 1em 2rem;
  align-items: center;
  justify-items: center;
  min-block-size: 3rem;
}

.nav-menu-item {
  display: none !important;
}

#nav li > br {
  display: none;
}

#nav li:not(:has(> em))::before {
  content: "";
  display: block;
  grid-row: 1;
  min-block-size: 1em;
}

#nav a {
  display: grid;
  grid-row: 2;
  place-items: center;
  min-block-size: 2rem;
  color: var(--color-muted);
  text-shadow: -1px -1px 0 #181818;
  text-decoration: none;
  outline: 0;
}

.nav-menu-button {
  display: grid;
  grid-row: 2;
  place-items: center;
  min-block-size: 2rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-muted);
  text-shadow: -1px -1px 0 #181818;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

#nav a:hover,
#nav a:focus-visible,
.nav-menu-button:hover,
.nav-menu-button:focus-visible,
.nav-menu-button[aria-expanded="true"] {
  color: var(--color-blue-shadow) !important;
}

#nav ul li em {
  display: block;
  grid-row: 1;
  min-block-size: 1em;
  color: var(--color-red);
  font-size: 70%;
  font-style: normal;
  font-weight: bold;
  line-height: 1;
}

.facebook-icon {
  inline-size: 30px;
  block-size: 30px;
}

.nav-more {
  display: none;
}

.site-hero {
  margin: 0;
  background: var(--color-bg);
  inline-size: 100%;
}

.top-content {
  padding-block-start: 0;
}

.site-logo {
  text-align: center;
}

.hero-image {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: auto;
  margin-block-start: 0;
  aspect-ratio: 3333 / 1333;
  object-fit: cover;
}

.latestnews,
.nextlive,
.info,
.info2,
.past_live,
.mailorder,
.contact {
  margin: 0 auto;
  background: var(--color-bg);
  color: var(--color-text);
}

.latestnews {
  padding-block: 8em 0;
}

.nextlive {
  padding-block: 10em;
}

.info,
.info2,
.mailorder,
.contact {
  padding-block: 6em 8em;
}

.past_live {
  padding-block: 2em 8em;
}

.latestnews_content,
.nextlive_content,
.info_content,
.info2_content,
.past_live_content,
.mailorder_content,
.contact_content {
  inline-size: var(--content-width);
  block-size: auto;
  margin-inline: auto;
  color: var(--color-text);
}

.news-title {
  font-size: 160%;
}

.news-list {
  display: grid;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-list li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  color: var(--color-text);
  letter-spacing: 0.1em;
  font: 16px/2 var(--font-sans);
}

.news-list time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.news-list span {
  color: var(--color-gold);
}

.nextlive_content ul li,
.nextlive_content ol li,
.info2_content ol li,
.past_live_content ol li,
.info_content ul li,
.mailorder_content li {
  font-size: 80%;
  line-height: 2;
  letter-spacing: 0.1em;
}

.nextlive_content ul li,
.info2_content ol li,
.past_live_content ol li,
.mailorder_content li {
  padding-inline-start: 2%;
}

.nextlive_content ol li {
  margin-inline-start: 5%;
}

#info .info_content p a {
  color: var(--color-muted);
}

.info_content ul li a {
  color: var(--color-blue);
}

.content-image {
  inline-size: min(700px, 100%);
  margin-inline: auto;
}

.order-link {
  font-size: 150%;
}

.set_list {
  position: relative;
  z-index: 1000;
  inline-size: 100% !important;
  block-size: auto;
}

.setlist-wrap {
  inline-size: min(50%, 100%);
  margin-inline: auto;
}

.encore-label {
  margin-block-start: 2em;
}

.live-pix-link {
  font-size: 22px;
}

.product {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: clamp(1.5rem, 5vi, 4rem);
  align-items: start;
  padding-block: 40px;
  border-block-end: 1px solid #111;
}

.box1 {
  margin: 0;
  padding-block-start: 100px;
}

.box1 img {
  margin-inline: auto;
}

.box2 {
  min-inline-size: 0;
}

.mailorder_content_a {
  display: block;
  margin-block-start: 20px;
  color: var(--color-blue-shadow);
  text-shadow: -1px -1px 0 #181818;
  text-align: right;
  text-decoration: none;
  outline: 0;
  font-size: 110%;
  font-weight: bolder;
}

.text-left {
  text-align: left;
}

.form-frame-order {
  block-size: 1200px;
}

.form-frame-contact {
  block-size: 600px;
}

hr {
  clear: both;
  border: 0;
  margin-block: 40px;
}

#footer {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 20000;
  block-size: var(--footer-height);
  background: var(--color-bg);
  text-align: center;
}

#footer p {
  color: var(--color-muted);
  text-shadow: -1px -1px 0 #181818;
  font: 60% var(--font-serif);
  padding-block-start: 10px;
}

@media (max-width: 760px) {
  :root {
    --content-width: min(100vi - 1.25rem, 700px);
    --nav-safe-space: 4.75rem;
  }

  #nav,
  #nav.nav-at-top {
    inset-block-start: auto;
    inset-block-end: 0;
  }

  #nav ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 0.35rem 0.25rem max(0.45rem, env(safe-area-inset-bottom));
  }

  #nav li,
  #nav li:not(:has(> em)) {
    grid-template-rows: 1fr;
    min-block-size: 3.25rem;
  }

  #nav li::before,
  #nav ul li em {
    display: none;
  }

  #nav a,
  .nav-menu-button {
    grid-row: 1;
    min-block-size: 3rem;
    padding-inline: 0.25rem;
    font-size: clamp(0.63rem, 2.6vi, 0.78rem);
    line-height: 1.15;
    text-align: center;
  }

  .nav-secondary {
    display: none !important;
  }

  .nav-menu-item {
    display: grid !important;
  }

  .nav-menu-button {
    color: var(--color-blue);
  }

  .nav-more {
    position: absolute;
    inset-inline: auto 0.75rem;
    inset-block-end: calc(100% + 0.5rem);
    display: grid;
    inline-size: min(13rem, calc(100vi - 1.5rem));
    padding: 0.5rem;
    border: 1px solid #222;
    background: rgba(15, 14, 14, 0.96);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  #nav.nav-menu-open .nav-more {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-more a {
    grid-row: auto;
    justify-content: start;
    min-block-size: 2.75rem;
    padding-inline: 0.85rem;
    border-block-end: 1px solid #222;
    font-size: 0.86rem;
    text-align: left;
  }

  .nav-more a:last-child {
    border-block-end: 0;
  }

  #footer {
    position: static;
    block-size: auto;
    padding-block: 1rem calc(var(--nav-safe-space) + 0.75rem);
  }

  #footer p {
    padding-block-start: 0;
  }

  h3 {
    font-size: clamp(1.25rem, 7vi, 1.8rem);
  }

  .latestnews {
    padding-block-start: 4em;
  }

  .product {
    grid-template-columns: 1fr;
  }

  .setlist-wrap {
    inline-size: 100%;
  }

  .box1 {
    padding-block-start: 0;
  }

  .form-frame-order {
    block-size: 900px;
  }

  .form-frame-contact {
    block-size: 520px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #nav {
    transition: none;
  }
}