@charset "UTF-8";
/*==========================================================================================

  ステージ (/shintoyosu/stage/, /shiba/stage/)

  Loaded only by page-stage-lineup.php, after base.css (stage.css draws the title). The venue tabs (.avenue__select,
  outline.css) and the usual subpage box and title as on the ドリンク＆フード page, then the lineup laid out like
  hibiyamusicfes.jp/2026/lineup/: each photo whole in a rounded 3:2 frame with the name centred under it, 3 across on
  PC and 2 on phones. A performer with a profile gets プロフィールを見る under the name, and the whole card opens the
  profile dialog (.tcm-stage-profile, at the end of this file).

==========================================================================================*/
#contents.second #stage .title {
  margin-bottom: 16px;
}
.tcm-stage__venues {
  margin-bottom: 16px;
}
/* Under the title text: the title starts 100px in (76px from 980px down), past the Santa icon. */
.tcm-stage__venue {
  margin-left: 100px;
  color: #20681a;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
}

/* A short last row is centred. The negative margin takes back the outer half gutters. */
.tcm-stage__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 4px -12px 0;
}
.tcm-stage__artist {
  box-sizing: border-box;
  width: 33.3333%;
  margin-top: 28px;
  padding: 0 12px;
}
/* The client's photos are 3:2 already, portraits padded white at the sides; any other shape is fitted, never cut. */
.tcm-stage__photo {
  position: relative;
  height: 0;
  padding-top: 66.6667%;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}
.tcm-stage__photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tcm-stage__name {
  margin-top: 10px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-align: center;
}
.tcm-stage__note {
  margin-top: 2px;
  color: #555;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-align: center;
}
/* reset.css gives every span font-weight: normal. */
.tcm-stage__nobreak {
  display: inline-block;
  font-weight: inherit;
}
/* Names come from wp-admin: as on the food page, no small kana or ー at the start of a line, and even lines. */
.tcm-stage__name,
.tcm-stage__note {
  line-break: strict;
  text-wrap: balance;
  word-wrap: break-word;
}
#contents.second .tcm-stage__caution {
  margin-top: 32px;
  line-break: strict;
  text-align: center;
  text-wrap: balance;
}

/* A card with a profile: the button's ::before stretches over the whole card, so the photo and the name open it too. */
.tcm-stage__artist.has-profile {
  position: relative;
}
.tcm-stage__open {
  display: block;
  margin: 8px auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: #c41316;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 1.45;
  cursor: pointer;
}
.tcm-stage__open::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
}
.tcm-stage__open::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 2px 6px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
  vertical-align: middle;
}
/* isolation: Safari otherwise drops the frame's rounded corners while the photo is scaled. */
.tcm-stage__artist.has-profile .tcm-stage__photo {
  isolation: isolate;
}
.tcm-stage__artist.has-profile .tcm-stage__photo img {
  transition: transform 0.3s ease;
}
.tcm-stage__artist.has-profile:hover .tcm-stage__photo img {
  transform: scale(1.04);
}
.tcm-stage__artist.has-profile:hover .tcm-stage__open {
  text-decoration: underline;
}
/* Kept apart from other selectors: a browser that does not know :focus-visible drops the whole rule. */
.tcm-stage__open:focus-visible {
  outline: none;
}
.tcm-stage__open:focus-visible::before {
  outline: 3px solid #c41316;
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .tcm-stage__venue {
    margin-left: 76px;
  }
}
@media (max-width: 678px) {
  .tcm-stage__venues {
    margin-bottom: 12px;
  }
  .tcm-stage__venue {
    margin-left: 0;
    font-size: 17px;
    text-align: center;
  }
  .tcm-stage__list {
    margin: 0 -6px;
  }
  .tcm-stage__artist {
    width: 50%;
    margin-top: 20px;
    padding: 0 6px;
  }
  /* 13px as on the food page: 「DIE KIRCHDORFER®」 still fits a 375px phone's column on one line. */
  .tcm-stage__name {
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: 0.03em;
  }
  .tcm-stage__note {
    font-size: 11px;
  }
  .tcm-stage__open {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }
  .tcm-stage__open::after {
    width: 5px;
    height: 5px;
    margin-left: 4px;
  }
  #contents.second .tcm-stage__caution {
    margin-top: 24px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tcm-stage__artist.has-profile .tcm-stage__photo img {
    transition: none;
  }
}

/*------------------------------------------------------------------------------------------
  The profile dialog (page-stage-lineup.php, common/js/stage-lineup.js): the frame is the page's own section box
  (green waves around the cream panel), with CLOSE on its corner and the arrows beside it on PC, under it on narrower
  screens. The panel scrolls; the page behind does not.
------------------------------------------------------------------------------------------*/
html.tcm-stage-profile-open {
  overflow: hidden;
}
/* The dialog fills the screen: around the frame is the backdrop, which closes it when clicked. */
.tcm-stage-profile {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 32px 24px;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  overflow: hidden;
}
.tcm-stage-profile[open] {
  display: grid;
  grid-template-columns: 64px minmax(0, 920px) 64px;
  grid-template-areas: "prev frame next";
  column-gap: 28px;
  align-items: center;
  justify-content: center;
}
.tcm-stage-profile::backdrop {
  background: rgba(0, 9, 40, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tcm-stage-profile__frame {
  grid-area: frame;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  padding: 25px;
  border-radius: 8px;
  background: url(../images/bg_texture_wave.png) 10px 0 repeat;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.tcm-stage-profile__panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 48px 48px 56px;
  background: #fcfdeb;
}
.tcm-stage-profile__panel:focus {
  outline: none;
}
.tcm-stage-profile__close,
.tcm-stage-profile__nav {
  box-sizing: border-box;
  border: 2px solid #001933;
  background: #c41316;
  color: #fff;
  box-shadow: 0 4px 0 #001933;
  font-family: inherit;
  cursor: pointer;
}
.tcm-stage-profile__close:hover,
.tcm-stage-profile__nav:hover {
  background: #d8231d;
}
.tcm-stage-profile__close:active,
.tcm-stage-profile__nav:active {
  box-shadow: 0 1px 0 #001933;
  transform: translateY(3px);
}
.tcm-stage-profile__close:focus-visible,
.tcm-stage-profile__nav:focus-visible {
  outline: 3px solid #dcb24b;
  outline-offset: 3px;
}
/* On the panel's top right corner, half over the waves. */
.tcm-stage-profile__close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  min-width: 108px;
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.12em;
}
.tcm-stage-profile__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
}
.tcm-stage-profile__nav.is-prev {
  grid-area: prev;
}
.tcm-stage-profile__nav.is-next {
  grid-area: next;
}
.tcm-stage-profile__nav svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tcm-stage-profile[open] .tcm-stage-profile__frame {
  animation: tcm-stage-profile-in 0.25s ease-out;
}
.tcm-stage-profile[open]::backdrop {
  animation: tcm-stage-profile-fade 0.25s ease-out;
}
@keyframes tcm-stage-profile-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes tcm-stage-profile-fade {
  from {
    opacity: 0;
  }
}

/* The profile: name, note and links beside the photo, then the text under a rule. */
.tcm-stage-profile__head {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.tcm-stage-profile__intro {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 4px;
}
.tcm-stage-profile__name {
  color: #1a1a1a;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 1.4;
  line-break: strict;
  text-wrap: balance;
}
.tcm-stage-profile__note {
  margin-top: 6px;
  color: #555;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.tcm-stage-profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  list-style: none;
}
.tcm-stage-profile__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  background: #fff;
  color: #808080;
  transition: color 0.2s, border-color 0.2s;
}
.tcm-stage-profile__links a:hover {
  border-color: #c41316;
  color: #c41316;
}
.tcm-stage-profile__links a:focus-visible {
  border-color: #c41316;
  color: #c41316;
  outline: 3px solid #dcb24b;
  outline-offset: 2px;
}
.tcm-stage-profile__links svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.tcm-stage-profile__photo {
  flex: 0 0 46%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}
.tcm-stage-profile__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The text is the client's own HTML from the editor: give back what reset.css takes from it. */
.tcm-stage-profile__text {
  display: flow-root;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid #1a1a1a;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.95;
}
.tcm-stage-profile__text > * + * {
  margin-top: 1em;
}
.tcm-stage-profile__text li + li {
  margin-top: 0.3em;
}
.tcm-stage-profile__text h2,
.tcm-stage-profile__text h3,
.tcm-stage-profile__text h4 {
  font-weight: bold;
  line-height: 1.5;
}
.tcm-stage-profile__text h2 {
  font-size: 20px;
}
.tcm-stage-profile__text h3 {
  font-size: 18px;
}
.tcm-stage-profile__text h4 {
  font-size: 16px;
}
.tcm-stage-profile__text strong,
.tcm-stage-profile__text b {
  font-weight: bold;
}
.tcm-stage-profile__text em,
.tcm-stage-profile__text i {
  font-style: italic;
}
.tcm-stage-profile__text a {
  color: #c41316;
  text-decoration: underline;
}
.tcm-stage-profile__text ul,
.tcm-stage-profile__text ol {
  padding-left: 1.5em;
}
/* reset.css takes the markers off every li. */
.tcm-stage-profile__text ul > li {
  list-style: disc;
}
.tcm-stage-profile__text ol > li {
  list-style: decimal;
}
.tcm-stage-profile__text blockquote {
  padding-left: 1em;
  border-left: 3px solid #d0d0d0;
  color: #555;
}
.tcm-stage-profile__text hr {
  border: 0;
  border-top: 1px solid #d0d0d0;
}
.tcm-stage-profile__text table {
  border-collapse: collapse;
}
.tcm-stage-profile__text th,
.tcm-stage-profile__text td {
  padding: 4px 10px;
  border: 1px solid #d0d0d0;
}
.tcm-stage-profile__text img,
.tcm-stage-profile__text video,
.tcm-stage-profile__text iframe {
  max-width: 100%;
}
.tcm-stage-profile__text img,
.tcm-stage-profile__text video {
  height: auto;
}
/* The player WordPress makes of a YouTube URL on its own line keeps its width and height attributes. */
.tcm-stage-profile__text iframe[src*="youtube"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.tcm-stage-profile__text .aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.tcm-stage-profile__text .alignleft {
  float: left;
  margin: 0.3em 1.5em 1em 0;
}
.tcm-stage-profile__text .alignright {
  float: right;
  margin: 0.3em 0 1em 1.5em;
}
.tcm-stage-profile__text .wp-caption {
  max-width: 100%;
}
.tcm-stage-profile__text .wp-caption-text {
  margin-top: 4px;
  color: #555;
  font-size: 12px;
  line-height: 1.5;
}

/* Too narrow for the arrows beside the frame: they go under it, and the photo above the name. */
@media (max-width: 860px) {
  .tcm-stage-profile {
    padding: 16px 16px 20px;
  }
  .tcm-stage-profile[open] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "frame frame" "prev next";
    gap: 14px 20px;
  }
  .tcm-stage-profile__frame {
    max-height: 100%;
  }
  .tcm-stage-profile__nav {
    width: 52px;
    height: 52px;
  }
  .tcm-stage-profile__nav.is-prev {
    justify-self: end;
  }
  .tcm-stage-profile__nav.is-next {
    justify-self: start;
  }
  .tcm-stage-profile__nav svg {
    width: 24px;
    height: 24px;
  }
  .tcm-stage-profile__panel {
    padding: 48px 36px 40px;
  }
  .tcm-stage-profile__head {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .tcm-stage-profile__photo {
    order: -1;
    flex: none;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
}
@media (max-width: 678px) {
  .tcm-stage-profile {
    padding: 12px 12px 16px;
  }
  .tcm-stage-profile__frame {
    padding: 12px;
    background-size: 20px auto;
  }
  .tcm-stage-profile__close {
    top: -6px;
    right: -6px;
    min-width: 92px;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
  }
  .tcm-stage-profile__nav {
    width: 46px;
    height: 46px;
  }
  .tcm-stage-profile__nav svg {
    width: 22px;
    height: 22px;
  }
  .tcm-stage-profile__panel {
    padding: 40px 20px 32px;
  }
  .tcm-stage-profile__head {
    gap: 18px;
  }
  .tcm-stage-profile__name {
    font-size: 20px;
  }
  .tcm-stage-profile__note {
    font-size: 12px;
  }
  .tcm-stage-profile__links {
    gap: 10px;
    margin-top: 16px;
  }
  .tcm-stage-profile__links a {
    width: 42px;
    height: 42px;
  }
  .tcm-stage-profile__links svg {
    width: 20px;
    height: 20px;
  }
  .tcm-stage-profile__text {
    margin-top: 26px;
    padding-top: 22px;
    font-size: 14px;
    line-height: 1.85;
  }
  .tcm-stage-profile__text .alignleft,
  .tcm-stage-profile__text .alignright {
    float: none;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tcm-stage-profile[open] .tcm-stage-profile__frame {
    animation: none;
  }
  .tcm-stage-profile[open]::backdrop {
    animation: none;
  }
}