@charset "utf-8";

#event {
  background: url("../img/common/bg-black.png") repeat;
  background-size: 50px 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.eventBlock {
  margin: 0 auto 4em auto;
  max-width: 1100px;
  background: var(--color-bg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4em 4em;
  position: relative;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.eventBlock:last-of-type {
  margin-bottom: 0;
}

@media only screen and (max-width: 800px) {
  .eventBlock {
    padding: 2.5em 1.6em;
  }
}

@media only screen and (max-width: 560px) {
  .eventBlock {
    padding: 2em 1.2em;
    margin-bottom: 2.5em;
  }
}

.eventHead {
  text-align: center;
  margin: 0 auto 2em auto;
}

.eventBadge {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 0.5em 1.4em;
  margin-bottom: 2.5em;
  text-transform: uppercase;
}

@media only screen and (max-width: 560px) {
  .eventBadge {
    font-size: 0.95em;
    letter-spacing: 0.2em;
    padding: 0.45em 1.1em;
    margin-bottom: 1.8em;
  }
}

.eventH3 {
  font-family: var(--font-jp);
  font-size: clamp(1.8em, 4vw, 2.6em);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

@media only screen and (max-width: 560px) {
  .eventH3 {
    font-size: 1.5em;
  }
}

.eventH3 .eventH3Sub {
  display: block;
  font-family: var(--font-en);
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-fg-mute);
  margin-bottom: 0.7em;
}

.eventH3 .eventH3Main {
  display: block;
  color: var(--color-fg);
}

.eventH3 .eventH3Main em {
  font-style: normal;
  color: var(--color-accent-2);
}

#preEvent .eventH3 {
  font-size: clamp(2.4em, 5.4vw, 3.6em);
}
@media only screen and (max-width: 560px) {
  #preEvent .eventH3 {
    font-size: 2em;
  }
}
#preEvent .eventH3 .eventH3Sub {
  font-size: 0.4em;
  margin-bottom: 0.6em;
}

.eventLead {
  text-align: center;
  font-size: 1.05em;
  margin: 0 auto 2em auto;
  width: fit-content;
  max-width: 760px;
  background: rgba(255,255,255,0.20);
  padding: 0.25em 1em;
  line-height: 1.7;
}

@media only screen and (max-width: 560px) {
  .eventLead {
    line-height: 1.8;
    padding: 0.5em 0.9em;
    text-align: left;
  }
}

#mainEvent {
  text-align: center;

  --color-accent-2: var(--color-flyer-green);
}

#mainEvent .ticketBuy a:hover {
  background: var(--color-flyer-green-dark);
}

#mainEvent .eventVisual {
  width: 100%;
  max-width: 720px;
  margin: 2em auto;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mainEvent .eventVisual img {
  width: 100%;
  height: auto;
  display: block;
}

#mainEvent .eventConcept {
  position: relative;
  text-align: left;
  max-width: 720px;
  margin: 3em auto;
  font-size: 1em;
  line-height: 2;
  color: var(--color-fg);
  background: transparent;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 2.2em 2em 1.8em 2em;
}

@media only screen and (max-width: 560px) {
  #mainEvent .eventConcept {
    padding: 1.8em 1.2em 1.5em 1.2em;
  }
}

#mainEvent .eventConcept::before {
  content: "“";
  position: absolute;
  top: -0.35em;
  left: 0.2em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5em;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.85;
  pointer-events: none;
}

@media only screen and (max-width: 560px) {
  #mainEvent .eventConcept::before {
    font-size: 4em;
    top: -0.3em;
    left: 0.1em;
  }
}

#mainEvent .eventConcept .conceptWord {
  display: block;
  font-family: var(--font-jp);
  font-size: 1.25em;
  font-weight: 800;
  color: var(--color-accent-2);
  margin-bottom: 0.6em;
  letter-spacing: 0.08em;
  padding-left: 1.4em;
  position: relative;
}

#mainEvent .eventConcept .conceptWord::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 2px;
  background: var(--color-accent-2);
}

#mainEvent .eventDateVenue {
  margin: 2.5em auto;
  font-size: 1.15em;
  line-height: 1.8;
}

#mainEvent .eventDateVenue .dates {
  font-family: var(--font-en);
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-fg);
  margin-bottom: 0.3em;
}

@media only screen and (max-width: 560px) {
  #mainEvent .eventDateVenue .dates {
    font-size: 1.3em;
  }
}

#mainEvent .eventDateVenue .times {
  font-family: var(--font-en);
  color: var(--color-fg-mute);
  font-size: 0.9em;
  letter-spacing: 0.1em;
  margin-bottom: 0.8em;
}

#mainEvent .eventDateVenue .venue {
  font-weight: 700;
  font-size: 1.1em;
}

#mainEvent .eventDateVenue .venueNote {
  font-size: 0.85em;
  color: var(--color-fg-mute);
  margin-top: 0.4em;
}

#mainEvent .eventCast {
  margin: 2.5em auto 0 auto;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 2em;
  max-width: 640px;
  font-size: 1em;
  line-height: 1.7;
  color: var(--color-fg);
  text-align: center;
}

@media only screen and (max-width: 560px) {
  #mainEvent .eventCast {
    padding: 1.4em;
  }
}

#mainEvent .eventCastLabel {
  font-family: var(--font-jp);
  font-size: 2em;
  font-weight: 800;
  color: var(--color-accent-2);
  margin-bottom: 0.6em;
  display: block;
  letter-spacing: 0.15em;
}

@media only screen and (max-width: 560px) {
  #mainEvent .eventCastLabel {
    font-size: 1.7em;
  }
}

.ticketWrap {
  margin: 2.5em auto 0 auto;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 2em;
  max-width: 640px;
}

@media only screen and (max-width: 560px) {
  .ticketWrap {
    padding: 1.4em;
  }
}

.ticketWrap .ticketLabel {
  font-family: var(--font-jp);
  font-size: 2em;
  font-weight: 800;
  color: var(--color-accent-2);
  text-align: center;
  margin-bottom: 1em;
  display: block;
  letter-spacing: 0.15em;
}

@media only screen and (max-width: 560px) {
  .ticketWrap .ticketLabel {
    font-size: 1.7em;
  }
}

.ticketList {
  list-style: none;
  text-align: left;
}

.ticketList li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding: 0.8em 0;
  border-bottom: 1px dashed var(--color-line);
  font-size: 0.95em;
}

.ticketList li:last-child {
  border-bottom: none;
}

.ticketList li .ticketName {
  flex: 1;
  line-height: 1.5;
}

.ticketList li .ticketPrice {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.15em;
  white-space: nowrap;
  color: var(--color-accent-2);
}

.ticketBuy {
  display: flex;
  justify-content: center;
  gap: 0.8em;
  margin-top: 1.5em;
  flex-wrap: wrap;
}

.ticketBuy a,
.preEventTicket a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 0.95em;
  color: #ffffff;
  background: var(--color-accent-2);
  padding: 0.9em 2em;
  border-radius: 999px;
  text-transform: uppercase;
}

.ticketBuy a .ticketBuyLabel,
.preEventTicket a .ticketBuyLabel {
  letter-spacing: 0.2em;
  font-size: 0.85em;
  font-weight: 600;
  opacity: 0.85;
}

.ticketBuy a .ticketBuyService,
.preEventTicket a .ticketBuyService {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 1.1em;
  letter-spacing: 0;
  text-transform: none;
}

.ticketBuy a:hover,
.preEventTicket a:hover {
  background: var(--color-blue-dark);
  color: #ffffff;
  opacity: 1;
}

.ticketNote {
  font-size: 0.8em;
  color: var(--color-fg-mute);
  text-align: center;
  margin-top: 1em;
  line-height: 1.6;
}

#preEvent {
  margin-top: 0;
}

#preEvent .nikonStatement {
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--color-fg);
  font-size: 1em;
  text-align: center;
  margin: 2em auto 2.5em auto;
  line-height: 2;
  max-width: 760px;
}

.preEventTicket {
  text-align: center;
  margin: 2em auto 4em auto;
}

.cityBlock {
  margin: 0 auto 3em auto;
}

.cityBlock:last-of-type {
  margin-bottom: 0;
}

.cityHead {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  border-bottom: 2px solid var(--color-fg);
  padding-bottom: 0.8em;
  margin-bottom: 1.5em;
  flex-wrap: nowrap;
}

@media only screen and (max-width: 560px) {
  .cityHead {
    gap: 0.5em;
  }
}

.cityHead .cityNameJa {
  font-family: var(--font-jp);
  font-size: clamp(1.5em, 3vw, 2.2em);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-fg);
  flex-shrink: 0;
}

.cityHead .cityDays {
  font-family: var(--font-en);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-accent-2);
  flex-shrink: 0;
}

@media only screen and (max-width: 560px) {
  .cityHead .cityDays {
    font-size: 0.72em;
    letter-spacing: 0.15em;
  }
}

.cityHead .cityName {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: clamp(1.2em, 2.8vw, 2em);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  opacity: 0.12;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 560px) {
  .cityHead .cityName {
    font-size: 1em;
    letter-spacing: 0.05em;
  }
}

.cityBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 2em;
  align-items: start;
}

@media only screen and (max-width: 800px) {
  .cityBody {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
}

.cityBody .preEventTicket {
  grid-column: 1 / -1;
  text-align: center;
  margin: 1.5em auto 0 auto;
}

.cityVisual {
  width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 560px) {
  .cityVisual {
    width: 80%;
  }
}

.cityVisual img {
  width: 100%;
  height: auto;
  display: block;
}

.cityVisualEmpty {
  aspect-ratio: 3 / 4;
  color: var(--color-fg-mute);
  font-family: var(--font-en);
  letter-spacing: 0.2em;
  font-size: 0.8em;
}

@media only screen and (max-width: 800px) {
  .cityVisual {
    max-width: 460px;
    margin: 0 auto;
  }
  .cityVisualEmpty {
    aspect-ratio: 16 / 9;
  }
}

.citySchedule {
  display: flex;
  flex-direction: column;
}

.cityList {
  list-style: none;
  margin-bottom: 1em;
}

.cityList li {
  display: block;
  padding: 1em 0;
  border-bottom: 1px solid var(--color-line);
}

.cityList li:first-child {
  padding-top: 0;
}

.cityList li .liveDate {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-en);
  white-space: nowrap;
  margin-bottom: 0.5em;
}

.cityList li .liveDate .dayLabel {
  display: inline-block;
  font-size: 0.7em;
  letter-spacing: 0.15em;
  background: var(--color-fg);
  color: var(--color-bg);
  padding: 0.2em 0.6em;
  font-weight: 800;
}

.cityList li .liveDate .dayDate {
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: 0.05em;
  color: var(--color-fg);
}

.cityList li .liveVenue {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  min-width: 0;
  font-size: 0.95em;
  line-height: 1.5;
}

.cityList li .liveVenue .venueName {
  font-weight: 700;
  flex-shrink: 0;
}

.cityList li .liveVenue .liveGuest {
  font-size: 0.85em;
  color: var(--color-fg-mute);
  flex: 1 1 auto;
  min-width: 0;
}

.cityList li .liveVenue .livePrice {
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--color-accent-2);
  white-space: nowrap;
  font-size: 0.9em;
  margin-left: auto;
  flex-shrink: 0;
}

@media only screen and (max-width: 560px) {
  .cityList li .liveDate {
    gap: 0.5em;
    margin-bottom: 0.4em;
  }
  .cityList li .liveDate .dayDate {
    font-size: 0.9em;
  }
  .cityList li .liveVenue {
    flex-wrap: wrap;
    gap: 0.4em 0.7em;
    font-size: 0.9em;
  }

  .cityList li .liveVenue .liveGuest {
    flex-basis: auto;
  }
  .cityList li .liveVenue .livePrice {
    font-size: 0.85em;

  }
}

.cityFoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8em;
  font-size: 0.95em;
  padding-top: 0.8em;
}

@media only screen and (max-width: 560px) {
  .cityFoot {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4em;
  }
}

.cityFoot .cityTime {
  font-family: var(--font-en);
  color: var(--color-fg-mute);
  letter-spacing: 0.1em;
  font-size: 0.85em;
}

.cityFoot .cityPass .passLabel {
  font-family: var(--font-jp);
  font-size: 0.85em;
  color: var(--color-fg-mute);
  margin-right: 0.5em;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.cityFoot .cityPass .passPrice {
  font-family: var(--font-en);
  font-size: 1.2em;
  color: var(--color-accent-2);
  font-weight: 800;
}