@charset "utf-8";
/* Live Viewing additions to the Mekara Uroko 30th design. */
#first-view.lv-first-view { min-height: 490px; }
#first-view.lv-first-view .centerTitle { width: min(70vw, 620px); }
#first-view.lv-first-view .main-title__artist { font-size: clamp(18px, 2.8vh, 27px); margin-bottom: .6em; }
#first-view.lv-first-view .main-title h1 { font-size: clamp(39px, 6.4vh, 64px); }
#first-view.lv-first-view .main-title__anniversary { font-size: clamp(14px, 2vh, 20px); margin-top: .45em; }
#first-view.lv-first-view .lv-subtitle { margin: 1.2em auto 0; padding: .55em 1em; width: min(80%, 370px); box-sizing: border-box; border: 1px solid var(--mekara-accent); color: var(--mekara-accent); font-family: Georgia, serif; font-size: clamp(17px, 2.5vw, 26px); letter-spacing: .08em; }
#schedule, #venues { background-color: #101010; }
#ticket, #attention { background-color: #1b1b1b; }
.lv-schedule-card { max-width: 800px; margin: 0 auto; padding: 32px 20px; box-sizing: border-box; border: 1px solid var(--mekara-line); background: rgba(255,255,255,.035); text-align: center; font-family: Georgia, serif; font-size: clamp(22px, 3vw, 34px); letter-spacing: .03em; }
.lv-weekday { font-size: .7em; }.lv-start { color: var(--mekara-accent); white-space: nowrap; }
.lv-ticket-types { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.lv-ticket-card { min-width: 0; padding: 30px; box-sizing: border-box; background: var(--mekara-panel); color: var(--mekara-text-dark); line-height: 1.8; }
.lv-ticket-card h3 { min-height: 2.8em; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--mekara-accent); font-size: clamp(19px,2vw,25px); line-height: 1.4; }
.lv-ticket-card p { margin: 0 0 10px; }.lv-ticket-card .lv-note { font-size: 13px; }.lv-ticket-card .lv-price { margin-top: 22px; font-size: 32px; font-weight: bold; line-height: 1.2; }.lv-price small { font-size: 14px; font-weight: normal; }
.lv-image-placeholder { display: grid; place-items: center; min-height: 170px; margin: 25px auto 60px; border: 1px dashed var(--mekara-line); color: #c8c8c8; text-align: center; }
.lv-entry-list .accordion.entry_list { margin-bottom: 18px; }.lv-entry-list .acc-trigger { cursor: pointer; }.lv-entry-list .acc-trigger:focus-visible, .lv-tab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lv-entry-list .lv-pending { padding: 30px; text-align: center; }
#ticket .lv-entry-list .accordion > dd .btn.btn_sub a { background: #171717; border-color: #171717; }
.lv-tabs { display: flex; max-width: 800px; margin: auto; }.lv-tab { flex: 1; min-width: 0; padding: 18px 12px; border: 1px solid var(--mekara-line); background: #303030; color: #fff; font: inherit; font-weight: bold; line-height: 1.5; cursor: pointer; }.lv-tab + .lv-tab { border-left: 0; }.lv-tab.is-active { background: var(--mekara-accent); color: #111; }
.lv-tab-panel { max-width: 800px; margin: auto; padding: 25px 30px 35px; box-sizing: border-box; background: var(--mekara-panel); color: #111; }.lv-tab-panel[hidden] { display: none; }.lv-dummy-note { margin: 0 0 20px; font-size: 13px; color: #555; }.lv-venue-list { margin: 0; }.lv-venue-list > div { display: grid; grid-template-columns: 26% 1fr; border-bottom: 1px solid #777; }.lv-venue-list > div:first-child { border-top: 1px solid #777; }.lv-venue-list dt,.lv-venue-list dd { margin: 0; padding: 15px; }.lv-venue-list dt { border-right: 1px solid #777; font-weight: bold; }
.lv-attention { max-width: 800px; margin: auto; padding: 45px 25px; box-sizing: border-box; border: 1px solid var(--mekara-line); text-align: center; }.lv-tour-banner { max-width: 800px; margin: 50px auto; padding: 42px 20px; border: 1px dashed var(--mekara-line); color: #ccc; text-align: center; }
@media screen and (max-width:767px) { #first-view.lv-first-view { min-height: 460px; } #first-view.lv-first-view .centerTitle { width: 82vw; max-width: 82vw; } #first-view.lv-first-view .main-title h1 { font-size: clamp(32px, 9vw, 48px); } .lv-schedule-card { padding: 26px 12px; }.lv-start { display: block; margin-top: 7px; }.lv-ticket-types { grid-template-columns: 1fr; gap: 14px; }.lv-ticket-card { padding: 24px 20px; }.lv-ticket-card h3 { min-height: 0; }.lv-image-placeholder { margin-bottom: 45px; }.lv-tab { font-size: 12px; padding: 14px 5px; }.lv-tab-panel { padding: 22px 15px 30px; }.lv-venue-list > div { grid-template-columns: 30% 1fr; }.lv-venue-list dt,.lv-venue-list dd { padding: 12px 8px; font-size: 13px; } .lv-tour-banner { margin: 35px 20px; } }

/* VENUES: wide, dark card layout inspired by the reference page. */
.lv-venues-shell { padding: clamp(24px, 5vw, 70px); border: 1px solid var(--mekara-accent); box-sizing: border-box; background: #101010 url(../images/bg_grunge.png) center / cover no-repeat; background-blend-mode: multiply; }
.lv-tabs { max-width: none; margin: 0 0 42px; }
.lv-tab { padding: 20px 12px; background: #111; color: var(--mekara-accent); border-color: var(--mekara-accent); font-size: clamp(14px, 1.6vw, 19px); }
.lv-tab.is-active { background: var(--mekara-accent); color: #111; }
.lv-tab-panel { max-width: none; padding: 0; background: transparent; color: #fff; }
.lv-venue-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lv-venue-list > div, .lv-venue-list > div:first-child { display: block; min-width: 0; padding: 25px 28px; border: 0; background: rgba(0, 0, 0, .66); box-sizing: border-box; }
.lv-venue-list dt, .lv-venue-list dd { padding: 0; border: 0; }
.lv-venue-list dt { margin-bottom: 8px; color: var(--mekara-accent); font-size: 16px; }
.lv-venue-list dd { color: #fff; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
@media screen and (max-width: 767px) {
  .lv-venues-shell { padding: 18px 14px 25px; }
  .lv-tabs { margin-bottom: 25px; }
  .lv-tab { padding: 12px 5px; font-size: 12px; }
  .lv-venue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lv-venue-list > div, .lv-venue-list > div:first-child { padding: 17px 15px; }
  .lv-venue-list dt { font-size: 13px; }
  .lv-venue-list dd { font-size: 14px; }
}
@media screen and (max-width: 420px) { .lv-venue-list { grid-template-columns: 1fr; } }

/* Compact masthead and horizontal navigation for the viewing page. */
@media screen and (min-width: 768px) {
  .liveviewing-page, .liveviewing-page + footer { width: 100%; }
  body::before { width: 100%; }
  header .tip { left: 0; right: auto; width: 92px; height: 62px; border: 0; background: transparent; }
  header .tip .lang { top: 0; height: 62px; }
  header .tip .lang .text { padding: 0; }
  header .tip .lang .pulldown { background: #181818; }
  header .tip .sns, #menu-btn { display: none; }
  #menu-panel, .on #menu-panel { left: 0; right: 0; top: 0; width: 100%; height: 62px; min-height: 0; display: flex; justify-content: flex-end; padding: 0 30px 0 105px; box-sizing: border-box; background: rgba(10,10,10,.92); border-bottom: 1px solid rgba(205,186,117,.3); transition: none; }
  #menu-panel .inner, #menu-panel .inner > *, #menu-panel nav { width: auto; display: block; }
  #menu-panel nav ul { display: flex; align-items: center; gap: 30px; font-size: 14px; letter-spacing: .07em; }
  #menu-panel nav ul li + li { margin: 0; }
  #menu-panel nav ul li a { color: #fff; }
  #menu-panel nav ul li a:hover { color: var(--mekara-accent); opacity: 1; }
}
#first-view.lv-first-view { height: auto; min-height: 0; padding: 120px 20px 70px; box-sizing: border-box; background: #050505; }
#first-view.lv-first-view .centerTitle { width: min(90vw, 690px); max-width: 100%; top: 0; }
#first-view.lv-first-view .main-title__artist { margin-bottom: 22px; font-size: 20px; line-height: 1.1; }
#first-view.lv-first-view .main-title h1 { font-size: clamp(38px, 5vw, 62px); letter-spacing: .09em; }
#first-view.lv-first-view .main-title__anniversary { margin-top: 6px; font-size: 19px; }
#first-view.lv-first-view .lv-subtitle { width: auto; margin-top: 32px; padding: 20px 0 0; border: 0; border-top: 1px solid var(--mekara-accent); color: var(--mekara-accent); font-size: 28px; }
#schedule { padding-top: 75px; }
@media screen and (max-width: 767px) {
  #first-view.lv-first-view { min-height: 0; padding: 115px 20px 58px; }
  #first-view.lv-first-view .centerTitle { top: 0; }
  #first-view.lv-first-view .main-title__artist { font-size: 17px; margin-bottom: 20px; }
  #first-view.lv-first-view .main-title h1 { font-size: clamp(31px, 9vw, 46px); }
  #first-view.lv-first-view .main-title__anniversary { font-size: 15px; }
  #first-view.lv-first-view .lv-subtitle { margin-top: 26px; padding-top: 17px; font-size: 22px; }
  #schedule { padding-top: 60px; }
  header .tip { left: 0; right: 0; width: 100%; height: 54px; background: rgba(10,10,10,.92); border-bottom: 1px solid rgba(205,186,117,.35); z-index: 1010; }
  header .tip .lang { width: 70px; }
  header .tip .lang .text { font-size: 12px; }
  header .tip .lang .text::after { margin-left: 6px; border-width: 6px 4px 0; }
  #menu-btn { width: 54px; right: 0; left: auto; border: 0; border-left: 1px solid rgba(205,186,117,.35); background: #181818; }
  #menu-btn .bars { width: 23px; height: 16px; }
  #menu-panel { z-index: 1000; padding-top: 54px; box-sizing: border-box; }
}

/* Header language control, hero spacing, and legible schedule numerals. */
@media screen and (min-width: 768px) {
  header .tip { width: 96px; height: 62px; background: #111; border-right: 1px solid rgba(205,186,117,.45); box-sizing: border-box; }
  header .tip .lang { width: 100%; height: 100%; display: flex; top: 0; align-items: stretch; }
  header .tip .lang .text { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 0; font-size: 13px; text-align: center; text-shadow: none; }
  header .tip .lang .text::after { position: static; display: block; margin: 2px 0 0; border-width: 5px 4px 0; border-color: #fff transparent transparent; }
  header .tip .lang .pulldown { top: 100%; }
}
#first-view.lv-first-view { padding-top: 180px; padding-bottom: 140px; }
.lv-schedule-card { font-family: Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .015em; }
.lv-schedule-card .lv-weekday { font-weight: 500; }
.lv-schedule-card .lv-start { font-weight: 700; }
@media screen and (max-width: 767px) {
  header .tip .lang { width: 76px; height: 100%; display: flex; align-items: stretch; border-right: 1px solid rgba(205,186,117,.35); box-sizing: border-box; }
  header .tip .lang .text { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0; text-shadow: none; }
  header .tip .lang .text::after { position: static; display: block; margin: 2px 0 0; border-width: 5px 4px 0; border-color: #fff transparent transparent; }
  #first-view.lv-first-view { padding-top: 145px; padding-bottom: 90px; }
}

/* Match the ticket price typography and keep card headings close to their rules. */
.lv-schedule-card { font-family: 'Noto Serif JP', serif; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
.lv-schedule-card .lv-weekday { font-weight: 400; }
.lv-schedule-card .lv-start { font-weight: 500; }
.lv-ticket-card h3 { min-height: 0; margin-bottom: 20px; padding-bottom: 14px; }

@media screen and (min-width: 768px) {
  header .tip { border-bottom: 1px solid rgba(205,186,117,.3); }
}

@media screen and (min-width: 768px) {
  header .tip .sns {
    display: flex;
    position: fixed;
    left: 18px;
    top: 50%;
    bottom: auto;
    width: 34px;
    padding: 0;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
  }
  header .tip .sns li { margin: 0; font-size: 20px; line-height: 1; }
  header .tip .sns a { color: #fff; display: block; transition: color .2s; }
  header .tip .sns a:hover { color: var(--mekara-accent); }
}

/* Clearer alternation between content sections. */
#schedule, #venues { background-color: #111; }
#ticket, #attention { background-color: #252525; }
#ticket::after, #attention::after { opacity: .08; }

@media screen and (min-width: 768px) {
  header .tip .sns { top: 42vh; transition: top .3s ease; }
  body.past-hero header .tip .sns { top: 90px; transform: none; }
}

/* Keep the initial social links wholly inside the hero, then show the fixed set. */
@media screen and (min-width: 768px) {
  #first-view.lv-first-view { position: relative; }
  #first-view .lv-hero-sns {
    position: absolute; z-index: 4; left: 18px; top: 50%;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
    width: 34px; margin: 0; padding: 0;
    transform: translateY(-50%); list-style: none;
  }
  #first-view .lv-hero-sns li { font-size: 20px; line-height: 1; }
  #first-view .lv-hero-sns a { display: block; color: #fff; transition: color .2s; }
  #first-view .lv-hero-sns a:hover { color: var(--mekara-accent); }
  header .tip .sns { display: none; }
  body.past-hero header .tip .sns { display: flex; top: 90px; transform: none; transition: none; }
}
@media screen and (max-width: 767px) {
  #first-view .lv-hero-sns { display: none; }
}

/* Section selectors must outrank the shared section background rule. */
section#schedule.contents, section#venues.contents { background: #111; }
section#ticket.contents, section#attention.contents { background: #202020; }
section#ticket.contents::after, section#attention.contents::after {
  background-image: url(../images/bg_grunge.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 38% 45%;
  mix-blend-mode: screen;
  opacity: .16;
}

/* Align the small labels with the lower edge of the adjacent numerals. */
.lv-schedule-card .lv-weekday { position: relative; top: .5em; }
.lv-ticket-card .lv-price small { position: relative; top: 1.25em; }

/* Provisional attention copy and linked-site banner area. */
.lv-attention { max-width: none; padding: 38px 42px; text-align: left; background: rgba(0,0,0,.18); line-height: 1.9; }
.lv-attention ul { margin: 0; padding: 0; list-style: none; }
.lv-attention li { position: relative; padding-left: 1.25em; margin: 0 0 12px; }
.lv-attention li:last-child { margin-bottom: 0; }
.lv-attention li::before { content: '・'; position: absolute; left: 0; color: var(--mekara-accent); }
.lv-tour-banner { max-width: 980px; margin: 50px auto; padding: 0; border: 0; }
.lv-tour-banner img { display: block; width: 100%; height: auto; }
@media screen and (max-width: 767px) {
  .lv-attention { padding: 25px 20px; font-size: 14px; }
  .lv-tour-banner { margin: 35px 20px; }
}

/* Two ticket tiers in each viewing card. */
.lv-ticket-card { display: flex; flex-direction: column; }
.lv-ticket-card h3 { text-align: center; }
.lv-ticket-seating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 27px; }
.lv-ticket-seating span { display: inline-block; padding: 5px 10px; background: #111; color: var(--mekara-accent); font-size: 16px; line-height: 1.5; }
.lv-ticket-seating small { font-size: 12px; line-height: 1.5; }
.lv-ticket-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; min-height: 76px; margin-bottom: 18px; }
.lv-ticket-option:last-child { margin-bottom: 0; }
.lv-ticket-option p { margin: 0; line-height: 1.45; }
.lv-ticket-option .lv-price { margin: 0; font-size: clamp(23px, 2vw, 27px); white-space: nowrap; line-height: 1.25; font-variant-numeric: lining-nums tabular-nums; }
.lv-ticket-option .lv-price small { position: static; font-size: 13px; font-weight: normal; vertical-align: baseline; }
.lv-ticket-note { margin: 15px 0 0; color: #fff; font-size: 14px; text-align: center; }

@media screen and (max-width: 767px) {
  .lv-ticket-seating { margin-bottom: 20px; }
  .lv-ticket-option { min-height: 67px; }
}
@media screen and (max-width: 420px) {
  .lv-ticket-option { grid-template-columns: 1fr; align-items: start; gap: 4px; min-height: 0; margin-bottom: 25px; }
  .lv-ticket-option .lv-price { justify-self: end; }
  .lv-ticket-seating small { flex-basis: 100%; }
}

/* Linked banner: replace only href and artwork when supplied. */
.lv-tour-banner a { display: block; transition: opacity .2s ease, transform .2s ease; }
.lv-tour-banner a:hover { opacity: .75; transform: translateY(-3px); }
.lv-tour-banner a:focus-visible { outline: 2px solid var(--mekara-accent); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .lv-tour-banner a { transition: none; } }

/* Supplied title artwork; Live Viewing remains editable text below. */
#first-view.lv-first-view .main-title h1.lv-brand-logo { width: min(100%, 610px); margin: 0 auto; line-height: 0; white-space: normal; }
#first-view.lv-first-view .lv-brand-logo img { display: block; width: 100%; height: auto; }
#first-view.lv-first-view .lv-subtitle { border-top-color: #c1ab0c; color: #c1ab0c; }

/* 2026-10-19 TICKET revision: shared note and timed reception buttons. */
#ticket .lv-ticket-note { max-width: 980px; margin: 22px auto 38px; text-align: left; line-height: 1.9; }
#ticket .lv-entry-list .accordion > dd .btn a.lv-entry-button--disabled,
#ticket .lv-entry-list .accordion > dd .btn a.lv-entry-button--ended { background: #888; border-color: #888; color: #fff !important; }
#ticket .lv-entry-list .accordion > dd .btn a.lv-entry-button--disabled,
#ticket .lv-entry-list .accordion > dd .btn a.lv-entry-button--disabled:hover { background: #888; border-color: #888; color: #fff !important; cursor: default; }
#ticket .lv-entry-list .accordion > dd .btn a.lv-entry-button--ended:hover { background: #777; border-color: #777; color: #fff !important; }