@charset "UTF-8";

/* Front page foundation */
.front-page { color: var(--color-text); background: var(--color-bg); }
.front-page [id] { scroll-margin-top: 1rem; }
.section-title { display: grid; justify-items: center; row-gap: .625rem; margin-bottom: clamp(2rem, 4vw, 3.75rem); line-height: 1.4; text-align: center; }
.section-title br { display: none; }
.section-title img { display: block; width: auto; max-width: min(100%, 48rem); max-height: 4.125rem; object-fit: contain; }
.section-title--light img { filter: drop-shadow(0 0 .01px transparent); }
.section--navy { color: #fff; background: var(--color-primary); }

/* Hero */
.hero {
    position: relative;
    display: grid;
    min-height: clamp(43rem, 77.92vw, 93.5rem);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    /*
    background: #1660ca;
    */
}
.hero__background { position: absolute; inset: 0; z-index: -1; background: url("../images/hero/hero_bg.png") center top / cover no-repeat; }
.hero__content { display: grid; justify-items: center; align-content: start; width: min(100% - 2rem, 80rem); margin-inline: auto; padding-top: clamp(2rem, 3.2vw, 4rem); text-align: center; }
.hero__eyebrow { color: #fff; font-size: clamp(.75rem, 1vw, 1.15rem); font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 4px rgb(0 29 109 / 60%); }
.hero__title { width: min(34vw, 40.5rem); margin-top: clamp(1rem, 2.2vw, 2.5rem); }
.hero__title img { width: 100%; filter: drop-shadow(0 0 1rem rgb(255 255 255 / 78%)); }
.hero__date { width: min(43vw, 51.25rem); margin-top: clamp(4rem, 5vw, 6rem); }
.hero__date img { width: 100%; }

/* Desktop navigation immediately below the hero */
.front-nav { position: relative; z-index: 5; color: #fff; background: var(--color-primary); box-shadow: 0 .5rem 1.25rem rgb(3 0 89 / 20%); }
.front-nav__list { display: flex; align-items: center; justify-content: center; min-height: 4.25rem; }
.front-nav__item { display: flex; align-items: center; }
.front-nav .site-menu__divider { display: flex; align-items: center; margin-inline: clamp(.7rem, 1.45vw, 1.4rem); color: rgb(255 255 255 / 78%); }
.front-nav a { color: #fff; font-size: clamp(.9rem, 1.25vw, 1.125rem); font-weight: 700; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.front-nav a:hover { color: var(--color-accent-yellow); }

/* Event information */
.event-info { padding-top: clamp(5rem, 7vw, 8rem); }
.event-info__lead { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; text-align: center; font-weight: 500; line-height: 2; }
.event-info__lead p { font-size: clamp(.9375rem, 1.35vw, 1.125rem); }
.event-outline { border-top: 1px solid var(--color-border); }
.event-outline__row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); border-bottom: 1px solid var(--color-border); }
.event-outline dt, .event-outline dd { line-height: 1.65; }
.event-outline dt { font-weight: 800; text-align: left; padding: .75rem 2rem;}
.event-outline dd { font-weight: 600; padding: .75rem 1rem; }
.event-outline dd p + p { margin-top: .5rem; }
.event-info.section--navy .event-outline { border-top-color: rgb(255 255 255 / 65%); }
.event-info.section--navy .event-outline__row { border-bottom-color: rgb(255 255 255 / 65%); }

/* News */
.news { padding-block: clamp(5rem, 7vw, 7rem); }
.news-list { width: min(100%, 52rem); margin-inline: auto; border-top: 1px solid var(--color-border); }
.news-list__item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--color-border); }
.news-list__item time { font-size: .875rem; font-weight: 400; }
.news-list__item h3 { font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.5; font-weight: 700; }
.news-list__item a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .18em; }
.news-list__item a:hover { color: color-mix(in srgb, var(--color-primary) 70%, var(--color-accent-pink)); }
.news__empty { text-align: center; }
.news__more { margin-top: 2.5rem; text-align: center; }
.news .c-btn--pill { min-width: 12rem; border-color: var(--color-primary); color: var(--color-primary); background: #fff; box-shadow: 0 .2rem .8rem rgb(0 0 0 / 8%); }
.news .c-btn--pill:hover { color: #fff; background: var(--color-primary); }

/* Ticket cards */
.ticket-list { display: grid; gap: 1.25rem; }
.ticket-card { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; min-height: 8.5rem; border: .2rem solid var(--color-primary); border-radius: .875rem; background: #fff; overflow: hidden; }
.ticket-card__body { display: grid; align-content: center; gap: .35rem; padding: 1.5rem 1.75rem; }
.ticket-card__body h3 { font-size: clamp(1rem, 1.55vw, 1.25rem); line-height: 1.5; font-weight: 600;}
.ticket-card__period { font-weight: 700; }
.ticket-card__status { color: var(--color-alert); font-size: .9rem; font-weight: 800; }
.ticket-card__link { display: grid; grid-auto-flow: column; place-content: center; align-items: center; padding: 1rem; color: var(--color-primary); font-weight: 600; line-height: 1.05; text-align: center; text-decoration: none; }
.ticket-card__arrow { display: block; width: 1.0625rem; height: 1.875rem; margin-left: .5rem; background-color: currentColor; -webkit-mask: url("../images/icons/icon_arrow.svg") center / contain no-repeat; mask: url("../images/icons/icon_arrow.svg") center / contain no-repeat; }
.ticket-card__link:not(.is-pending):hover { color: #fff; background: var(--color-primary); }
.ticket-card__link.is-pending, .ticket-card.is-closed .ticket-card__link { color: #a6a6b8; cursor: default; }

/* Goods */
.goods { padding-top: clamp(5rem, 7vw, 8rem); }
.goods-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.8vw, 2.75rem); }
.goods-card { display: grid; align-content: start; width: 100%; min-width: 0; padding: .8rem; color: #fff; background: var(--color-primary); text-align: center; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast); }
.goods-card:hover { transform: translateY(-.25rem); box-shadow: 0 .75rem 1.75rem rgb(8 0 128 / 22%); }
.goods-card__image { display: grid; place-items: center; width: 100%; aspect-ratio: 1; color: #a9a9c0; background: #fff; font-size: .75rem; font-weight: 700; line-height: 1.4; }
.goods-card__content { display: grid; gap: .35rem; padding: 1.1rem .35rem .75rem; }
.goods-card__category { font-size: .75rem; }
.goods-card__price { font-size: clamp(1rem, 1.55vw, 1.25rem); margin-block: .5rem 1.2rem;}
.goods-card__name { font-size: clamp(.75rem, 1vw, .9375rem); font-weight: 700; line-height: 1.55; }

/* Goods modal. JS will toggle hidden/is-open. */
.goods-modal { position: fixed; inset: 0; z-index: calc(var(--z-drawer) + 20); display: grid; place-items: center; padding: 1.25rem; opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base); }
.goods-modal.is-open { opacity: 1; visibility: visible; }
.goods-modal__backdrop { position: absolute; inset: 0; width: 100%; padding: 0; background: rgb(3 1 50 / 76%); cursor: default; }
.goods-modal__panel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(14rem, 42%) minmax(0, 1fr); gap: 2rem; width: min(100%, 58rem); max-height: min(88dvh, 48rem); padding: clamp(1.25rem, 4vw, 3rem); border-radius: .75rem; background: #fff; box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 35%); overflow-y: auto; transform: translateY(1rem) scale(.98); transition: transform var(--duration-base) var(--ease-out); }
.goods-modal.is-open .goods-modal__panel { transform: translateY(0) scale(1); }
.goods-modal__close { position: absolute; inset: .75rem .75rem auto auto; z-index: 2; display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; color: #fff; background: var(--color-primary); font-size: 1.6rem; line-height: 1; }
.goods-modal__image { display: grid; place-items: center; aspect-ratio: 1; color: #9999af; background: var(--color-surface-muted); font-size: .8rem; font-weight: 700; }
.goods-modal__content { display: grid; align-content: center; gap: 1rem; }
.goods-modal__price { color: var(--color-primary); font-size: 1.4rem; font-weight: 900; }
.goods-modal__content h3 { padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
body.is-modal-open { overflow: hidden; }

/* Streaming ticket and video */
.streaming-ticket { padding-bottom: clamp(4rem, 6vw, 6rem); }
.promo-video { padding-top: 0; padding-bottom: clamp(5rem, 7vw, 8rem); }
.promo-video__embed { width: min(100%, 60rem); margin-inline: auto; aspect-ratio: 16 / 9; background: var(--color-primary); box-shadow: 0 .8rem 2.5rem rgb(8 0 128 / 15%); }
.promo-video__embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Attention */
.attention { padding-top: 0; padding-bottom: clamp(6rem, 8vw, 10rem); }
.attention__intro { display: grid; gap: 1.25rem; margin-bottom: 2rem; font-weight: 600; line-height: 1.8; }
.attention-list { display: grid; gap: 1.25rem; }
.attention-card { padding: clamp(1.25rem, 2.6vw, 2rem); background: var(--color-surface-muted); }
.attention-card h3 { margin-bottom: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--color-border); color: var(--color-primary); font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 600;}
.attention-card__body { color: #171742; font-size: clamp(.875rem, 1.12vw, 1rem); line-height: 1.7; }
.attention-card__body > * + * { margin-top: 1rem; }
.attention-card__body ul { display: grid; gap: .25rem; }
.attention-card__body li { position: relative; padding-left: 1em; }
.attention-card__body li::before { content: "・"; position: absolute; left: 0; }
.attention-card__body .attention-notes { gap: .6rem; }
.attention-card__body .attention-notes li { padding-left: 1.5em; }
.attention-card__body .attention-notes li::before { content: "※"; }
.attention-note__continuation { display: block; margin-top: .25rem; }
.attention-card__body h4 { color: var(--color-primary); font-size: 1rem; }

@media (min-width: 769px) and (max-width: 1100px) {
    .hero { min-height: 75vw; }
    .hero__title { width: 33vw; }
    .hero__date { width: 48vw; }
    .goods-grid { gap: 1.25rem; }
    .front-nav .site-menu__divider { margin-inline: .55rem; }
}

@media (max-width: 768px) {
    .front-page [id] { scroll-margin-top: 4rem; }
    .section-title { row-gap: .5rem; margin-bottom: 2rem; }
    .section-title img { width: auto; height: clamp(1.75rem, 8.2vw, 2rem); max-width: 100%; max-height: none; }
    .hero { min-height: 0; aspect-ratio: 768 / 1143; }
    .hero__background { background-image: url("../images/hero/hero_bg_sp.png"); background-size: cover; background-position: center top; }
    .hero__content { width: 100%; padding: clamp(2.75rem, 13.2vw, 3.25rem) 1rem 0; }
    .hero__eyebrow { width: 100%; max-width: 100%; font-size: clamp(.7rem, 3.2vw, .8rem); line-height: 1.45; text-align: center; }
    .hero__title { width: min(79vw, 29rem); margin-top: clamp(.875rem, 4vw, 1.125rem); }
    .hero__date { width: min(82vw, 29.5rem); margin-top: clamp(2rem, 9vw, 2.375rem); }
    .news { padding-top: 1rem; }
    .event-info__lead { gap: 1rem; margin-bottom: 1.75rem; line-height: 1.8; }
    .event-outline__row { grid-template-columns: 5.75rem minmax(0, 1fr); }
    .event-outline dt, .event-outline dd { padding: .65rem .5rem; font-size: .78rem; }
    .info-img{ margin-block: 1rem; }    
    .news-list__item { grid-template-columns: 1fr; gap: .25rem; padding: 1rem 0; }
    .news-list__item h3 { font-size: .95rem; }
    .ticket-list { gap: .75rem; }
    .ticket-card { grid-template-columns: minmax(0, 1fr) 5rem; min-height: 6.5rem; border-width: .15rem; border-radius: .65rem; }
    .ticket-card__body { padding: 1rem; }
    .ticket-card__body h3,{ font-size: .9rem; }.ticket-card__period { font-size: .78rem; line-height: 1.3; }
    .ticket-card__status { font-size: .72rem; }
    .ticket-card__link { padding: .5rem; font-size: .75rem; line-height: 1.5;}
    .goods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
    .goods-card { padding: .45rem; }
    .goods-card__content { padding: .75rem .2rem .45rem; }
    .goods-card__category { font-size: .63rem; }
    .goods-card__price { font-size: .86rem; }
    .goods-card__name { font-size: .66rem; line-height: 1.45; }
    .goods-modal { padding: .75rem; }
    .goods-modal__panel { grid-template-columns: 1fr; gap: 1.25rem; width: min(100%, 31rem); padding: 3.5rem 1rem 1.25rem; }
    .goods-modal__image { width: min(100%, 18rem); margin-inline: auto; }
    .goods-modal__content { gap: .75rem; }
    .promo-video__embed { width: 100%; }
    .attention__intro { font-size: .9rem; }
    .attention-card { padding: 1rem; }
    .attention-card h3 { font-size: 1rem; }
    .attention-card__body { font-size: .78rem; line-height: 1.65; }
}

@media (max-width: 420px) {
    .event-outline__row { grid-template-columns: 5rem minmax(0, 1fr); }
    .event-outline dt, .event-outline dd { font-size: .8rem; }
    .event-outline dd { margin-left: 0;}
}

/* Compact short phones from the sky side while keeping the Budokan visible. */
@media (max-width: 420px) and (max-height: 700px) {
    .hero { aspect-ratio: 768 / 1014; }
    .hero__background { background-position: center bottom; }
    .hero__content { padding-top: 2rem; }
    .hero__title { width: min(66vw, 24.25rem); margin-top: .625rem; }
    .hero__date { width: min(76vw, 27.25rem); margin-top: 1.25rem; }
}