@charset "UTF-8";
/*
 * Key visual (inc/hero.php), the client's design of 2026-10-26: the words are page text over a picture without words.
 * Above 820px the picture is the old hero's layout (images/top_hero/hero_art.jpg, 1100x500, build_top_hero_art.py) and
 * each word is centred where the client's preview puts it, in % of that layout; sizes are in cqw of its width (vw
 * before container queries). At 820px and below: the client's phone layout, the venues as cards.
 * The title face is Noto Serif JP cut to the hero's characters (tools/build_hero_font.py): with system fonts the title
 * looked different on every OS, and Android may have no Mincho at all.
 */
@font-face {
  font-family: "TCM Hero Serif";
  src: url("../fonts/hero-serif-black.woff2?20261026") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "TCM Hero Serif";
  src: url("../fonts/hero-serif-bold.woff2?20261026") format("woff2");
  font-weight: 700;
  font-display: swap;
}

.tcm-hero,
.tcm-hero * {
  box-sizing: border-box;
}
.tcm-hero {
  --tcm-hero-serif: "TCM Hero Serif", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --tcm-hero-script: "Z003", "URW Chancery L", "Apple Chancery", "Palatino Linotype", Palatino, "Times New Roman", serif;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  color: #fff;
  font-family: var(--tcm-hero-serif);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  container-type: inline-size;
}
/* 500/1100: the picture's own ratio, by padding rather than aspect-ratio (Safari before 15). */
.tcm-hero::before {
  content: "";
  display: block;
  padding-top: 45.4545%;
}
.tcm-hero__art,
.tcm-hero__art img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Class selectors only, so the phone layout's margins below win over these. */
.tcm-hero__title,
.tcm-hero__english,
.tcm-hero__lead {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 900;
  line-height: 1;
}
.tcm-hero__home {
  color: inherit;
  text-decoration: none;
}

/* PC: every word is centred on its point of the 1100x500 layout. */
.tcm-hero__title-text,
.tcm-hero__year,
.tcm-hero__english,
.tcm-hero__lead,
.tcm-hero__venue-name,
.tcm-hero__venue-date {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.tcm-hero__title-text {
  left: 50%;
  top: 25.9%;
  font-size: min(47px, 4.273vw);
  font-size: 4.273cqw;
  letter-spacing: -0.08em;
}
.tcm-hero__year {
  left: 50.2%;
  top: 44.5%;
  font-family: "Times New Roman", Georgia, var(--tcm-hero-serif);
  font-weight: 700;
  font-size: min(103px, 9.364vw);
  font-size: 9.364cqw;
  letter-spacing: -0.04em;
}
.tcm-hero__english {
  left: 50.2%;
  top: 57.7%;
  font-family: var(--tcm-hero-script);
  font-style: italic;
  font-weight: 400;
  font-size: min(29px, 2.636vw);
  font-size: 2.636cqw;
  letter-spacing: -0.025em;
}
.tcm-hero__lead {
  left: 50%;
  top: 66.9%;
  font-size: min(33px, 2.982vw);
  font-size: 2.982cqw;
  letter-spacing: -0.04em;
}
.tcm-hero__gold {
  display: block;
  background-image: linear-gradient(to bottom, #fff7d8 0%, #e5bc73 18%, #ffedb3 33%, #bc7a32 51%, #f6d991 73%, #a86427 87%, #fde7ae 100%);
  background-size: 100% 110%;
  -webkit-background-clip: text;
  background-clip: text;
  color: #ebc476;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.02em rgba(113, 63, 13, 0.75);
  filter: drop-shadow(0 0.12cqw 0 #6a380b) drop-shadow(0 0.28cqw 0.13cqw #01051b);
}
.tcm-hero__lead .tcm-hero__gold {
  display: inline-block;
  background-image: linear-gradient(180deg, #ffedc6 0%, #f7cf8a 38%, #e7a84e 78%, #a66122 100%);
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 0.12cqw 0.08cqw #68411e);
}
/* High contrast modes drop backgrounds: without this the clipped text would vanish. */
@media (forced-colors: active) {
  .tcm-hero__gold {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

/* The ribbons: the link covers the name band and the date band under it. */
.tcm-hero__venue {
  position: absolute;
  top: 78.6%;
  height: 15%;
  width: 23.6%;
  z-index: 1;
  color: inherit;
  text-decoration: none;
  border-radius: 0.6cqw;
}
.tcm-hero__venue--shintoyosu { left: 21.6%; }
.tcm-hero__venue--shiba { left: 54.3%; }
.tcm-hero__venue:hover,
.tcm-hero__venue:focus-visible {
  filter: brightness(1.12);
}
.tcm-hero__venue:focus-visible {
  outline: 3px solid #fff0ab;
  outline-offset: 3px;
}
.tcm-hero__venue-name {
  left: 50%;
  top: 28.7%;
  color: #fff9e9;
  font-size: min(30px, 2.709vw);
  font-size: 2.709cqw;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 1px #091029, -1px -1px 1px rgba(255, 255, 255, 0.25);
}
.tcm-hero__venue-in {
  margin-right: 0.22em;
  font-family: var(--tcm-hero-script);
  font-size: 1.1em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
}
.tcm-hero__venue-date {
  left: 50%;
  top: 74.7%;
  color: #08172f;
  font-size: min(19px, 1.7vw);
  font-size: 1.7cqw;
  letter-spacing: -0.06em;
}
.tcm-hero__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/* Phones and narrow tablets: the client's layout, the star and scrolls above the title, the pyramids at the edges, the
   venues as cards. */
@media (max-width: 820px) {
  .tcm-hero {
    max-width: none;
    padding: 78px 18px 32px;
    background: #000928;
    overflow: hidden;
  }
  .tcm-hero__art {
    display: none;
  }
  .tcm-hero::before,
  .tcm-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    padding: 0;
    pointer-events: none;
  }
  .tcm-hero::before {
    top: 7px;
    left: calc(50% - 95px);
    width: 190px;
    height: 64px;
    background: url("../../images/top_hero/sp_flourish.webp") center / contain no-repeat;
  }
  /* Both pyramids at the same scale (their pieces are 564px high): each fan hub 3px inside the edge. */
  .tcm-hero::after {
    top: 24px;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.65;
    background-image: url("../../images/top_hero/sp_pyramid_l.webp"), url("../../images/top_hero/sp_pyramid_r.webp");
    background-size: auto 287px, auto 287px;
    background-position: -44px 6px, calc(100% + 42px) 6px;
    background-repeat: no-repeat;
  }
  .tcm-hero__identity,
  .tcm-hero__lead,
  .tcm-hero__venues {
    position: relative;
    z-index: 1;
  }
  .tcm-hero__title-text,
  .tcm-hero__year,
  .tcm-hero__english,
  .tcm-hero__lead,
  .tcm-hero__venue-name,
  .tcm-hero__venue-date {
    position: static;
    transform: none;
  }
  .tcm-hero__title-text {
    font-size: clamp(23px, 6.65vw, 41px);
    line-height: 1.32;
    letter-spacing: -0.075em;
  }
  .tcm-hero__year {
    margin-top: -3px;
    font-size: clamp(68px, 19vw, 112px);
  }
  .tcm-hero__english {
    margin-top: 4px;
    font-size: clamp(15px, 4.1vw, 24px);
  }
  .tcm-hero__gold {
    -webkit-text-stroke: 0.5px rgba(113, 63, 13, 0.7);
    filter: drop-shadow(0 2px 1px #6a380b);
  }
  .tcm-hero__lead {
    margin: 26px auto 19px;
    font-size: clamp(19px, 5.6vw, 27px);
    line-height: 1.5;
  }
  .tcm-hero__venues {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-row-gap: 14px;
  }
  .tcm-hero__venue {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    min-height: 106px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px 15px;
    border: 1.5px solid #b88a41;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(255, 241, 189, 0.19), 0 4px 16px rgba(0, 0, 0, 0.21);
  }
  .tcm-hero__venue--shintoyosu,
  .tcm-hero__venue--shiba {
    left: auto;
  }
  .tcm-hero__venue--shintoyosu { background: linear-gradient(115deg, rgba(5, 29, 57, 0.85), rgba(17, 50, 87, 0.93), rgba(6, 24, 48, 0.93)); }
  .tcm-hero__venue--shiba { background: linear-gradient(115deg, rgba(64, 7, 17, 0.93), rgba(121, 13, 32, 0.93), rgba(64, 7, 16, 0.93)); }
  .tcm-hero__venue-name {
    font-size: clamp(22px, 6.4vw, 29px);
    line-height: 1.3;
    color: #fff9ed;
  }
  .tcm-hero__venue-date {
    margin-top: 7px;
    font-size: clamp(15px, 4.3vw, 21px);
    font-weight: 700;
    line-height: 1.35;
    color: #fbebca;
    letter-spacing: -0.055em;
  }
}
@media (max-width: 345px) {
  .tcm-hero {
    padding-left: 10px;
    padding-right: 10px;
  }
  .tcm-hero__title-text {
    font-size: 6.45vw;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .tcm-hero__venue {
    transition: filter 0.2s ease;
  }
}