:root {
    --sbi: #073a96;
    --sbi-dark: #031b56;
    --ink: #102044;
    --paper: #f6f8fd;
    --line: #cbd4e4;
    --gw: #080d35;
    --gw2: #20125c;
    --violet: #8d67e8;
    --journey: #05020c;
    --pink: #ff2fce;
    --cyan: #36e7ff;
    --sans: "Noto Sans JP", system-ui, sans-serif;
    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --header: 78px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased
}

body.menu-open {
    overflow: hidden
}

img {
    display: block;
    width: 100%
}

a {
    color: inherit;
    text-decoration: none
}

button,
select {
    font: inherit
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.skip-link {
    position: fixed;
    z-index: 999;
    top: 8px;
    left: 8px;
    transform: translateY(-150%);
    padding: 10px 16px;
    background: #fff;
    color: var(--sbi);
    box-shadow: 0 5px 20px #001d5930
}

.skip-link:focus {
    transform: none
}

.content-width {
    width: min(1180px, calc(100% - 64px));
    margin-inline: auto
}

.section-pad {
    padding-block: 108px
}

.wire-title {
    margin: 0 0 38px;
    text-align: center;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.2
}

.center-heading {
    text-align: center
}

.center-heading h2,
.center-heading h3 {
    margin: 0;
    color: var(--sbi-dark);
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.2;
    letter-spacing: -.035em
}

.center-heading p {
    max-width: 860px;
    margin: 20px auto 0;
    color: #445274;
    font-size: 18px;
    font-weight: 500
}

.center-heading--light h3 {
    color: #fff
}

.center-heading--light p {
    color: #d6dcf4
}

/* Header */
.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    height: var(--header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: max(28px, calc((100vw - 1420px)/2));
    background: #fffffff0;
    border-bottom: 1px solid #dce3f0;
    backdrop-filter: blur(14px);
    transition: .25s
}

.site-header.is-scrolled {
    box-shadow: 0 10px 30px #082e7715
}

.brand {
    font: 800 27px/1 var(--display);
    letter-spacing: .03em;
    color: var(--sbi-dark)
}

.global-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.3vw, 38px)
}

.global-nav>a {
    font-size: 13px;
    font-weight: 700;
    color: #263456;
    white-space: nowrap
}

.global-nav>a:hover {
    color: var(--sbi)
}

.language-control select {
    min-width: 116px;
    padding: 9px 34px 9px 12px;
    border: 1px solid #b9c6dc;
    background: #fff;
    color: #26385e;
    font-size: 13px;
    font-weight: 700
}

.menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 0;
    background: transparent
}

.menu-button span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: var(--sbi-dark);
    transition: .2s
}

/* Hero, exact wireframe order */
.hero {
    padding: 20px 0 90px;
    background: linear-gradient(180deg, #fff 0, #f7faff 100%)
}

.hero-visual {
    position: relative;
    min-height: 500px;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: min(1400px, calc(100% - 48px));
    margin-inline: auto;
    border: 1px solid #d4deee;
    isolation: isolate
}

.hero-visual::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(105deg, #06236ee8, #0b4bb5b5 52%, #233399b5), radial-gradient(circle at 78% 26%, #8870ffb3, transparent 31%);
    content: ""
}

.hero-visual::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(#ffffff10 1px, transparent 1px), linear-gradient(90deg, #ffffff10 1px, transparent 1px);
    background-size: 65px 65px;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent)
}

.hero-visual__glow {
    position: absolute;
    width: 780px;
    height: 220px;
    border: 1px solid #ffffff66;
    border-radius: 50%;
    box-shadow: 0 0 80px #5a86ff40;
    transform: rotate(-7deg)
}

.hero-visual__copy {
    color: #fff;
    text-align: center;
    text-shadow: 0 5px 28px #00144299
}

.hero-visual__copy p {
    margin: 0 0 18px;
    font: 600 14px/1 var(--display);
    letter-spacing: .28em
}

.hero-visual h1 {
    margin: 0;
    font: 800 clamp(72px, 9vw, 132px)/.86 var(--display);
    letter-spacing: -.02em
}

.hero-visual h2 {
    margin: 30px 0 0;
    font-size: clamp(27px, 3vw, 42px);
    letter-spacing: .12em
}

.hero-event-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: -90px;
    position: relative;
    z-index: 2
}

.hero-event-card {
    min-height: 195px;
    display: grid;
    grid-template-columns: 1fr 170px;
    gap: 22px;
    align-items: center;
    padding: 25px 24px 25px 30px;
    color: #fff;
    border: 1px solid #ffffff30;
    box-shadow: 0 20px 55px #00153d4d;
    overflow: hidden
}

.hero-event-card--gateway {
    background: radial-gradient(circle at 85% 15%, #9e6bff80, transparent 40%), linear-gradient(135deg, #071752, #21115e)
}

.hero-event-card--journey {
    background: radial-gradient(circle at 87% 15%, #ff35d980, transparent 38%), linear-gradient(135deg, #060716, #25114a)
}

.hero-event-card h3 {
    margin: 0 0 8px;
    font: 700 clamp(29px, 2.8vw, 42px)/1 var(--display)
}

.hero-event-card b {
    font: 700 17px/1 var(--display);
    letter-spacing: .05em
}

.hero-event-card p {
    margin: 5px 0 15px;
    color: #dce4ff;
    font-size: 14px
}

.hero-event-card span {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #ffffff80;
    background: #ffffff14;
    font-size: 13px;
    font-weight: 700
}

.hero-event-card img {
    height: 140px;
    object-fit: cover;
    border: 1px solid #ffffff33;
    filter: brightness(.75)
}

/* About */
.project-about {
    background: #fff
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 980px;
    margin: 58px auto 0
}

.about-cards article {
    overflow: hidden;
    border: 1px solid #d7dfed;
    background: #fff;
    box-shadow: 0 16px 50px #062b7b12;
    text-align: center
}

.about-card__image {
    height: 150px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #eaf1ff, #fff)
}

.about-card__image span {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    border: 1px solid #a8bde7;
    border-radius: 50%;
    color: var(--sbi);
    font-size: 28px;
    font-weight: 800
}

.about-cards article>div:last-child {
    padding: 24px
}

.about-cards h3 {
    margin: 0 0 8px;
    color: var(--sbi);
    font-size: 24px
}

.about-cards p {
    margin: 0;
    color: #55627c;
    font-size: 14px
}

/* Event KV */
.event-kv {
    position: relative;
    min-height: 620px;
    display: grid;
    align-items: end;
    overflow: hidden;
    color: #fff;
    isolation: isolate
}

.event-kv__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    filter: brightness(.65)
}

.event-kv::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: ""
}

.event-kv::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(#fff 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: .12;
    content: ""
}

.event-kv--gateway::before {
    background: radial-gradient(circle at 80% 22%, #8e64f0a6, transparent 28%), radial-gradient(circle at 15% 90%, #1759c28a, transparent 35%), linear-gradient(110deg, #060c35f2, #241151d9)
}

.event-kv--journey::before {
    background: radial-gradient(circle at 82% 22%, #ff2fd2a8, transparent 26%), radial-gradient(circle at 10% 88%, #31e5ff66, transparent 32%), linear-gradient(110deg, #05030df7, #1b0839de)
}

.event-kv__content {
    padding-block: 100px 70px
}

.event-kv h2 {
    margin: 0;
    font: 800 clamp(75px, 8.8vw, 130px)/.82 var(--display);
    letter-spacing: -.02em
}

.event-kv__content>p {
    margin: 34px 0 54px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.55
}

.event-kv__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px
}

.event-kv__meta b {
    font: 600 23px/1.2 var(--display);
    letter-spacing: .04em
}

.event-kv__meta b strong {
    font-size: 1.65em
}

.event-kv__meta span {
    font-size: 17px;
    font-weight: 700
}

.event-kv__meta em,
.event-kv__meta i {
    font-style: normal
}

.event-kv__meta--journey {
    flex-direction: row;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap
}

.event-kv__meta--journey>span {
    width: 100%;
    font-size: 25px;
    letter-spacing: .08em
}

/* Gateway background and exact panels */
.gateway-surface {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 0 5%, #342178 0, transparent 27%), radial-gradient(ellipse at 100% 46%, #4d2082 0, transparent 30%), linear-gradient(180deg, #080d35, #100a39 55%, #070b2d);
    color: #fff;
    isolation: isolate
}

.gateway-surface::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
    background-size: 80px 80px;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent 42%, #000)
}

.concept-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 52px
}

.concept-cards article {
    overflow: hidden;
    background: #ffffff0d;
    border: 1px solid #ffffff26;
    box-shadow: 0 22px 60px #0003
}

.concept-cards img {
    height: 180px;
    object-fit: cover;
    filter: brightness(.65) saturate(1.2)
}

.concept-cards article>div {
    min-height: 235px;
    padding: 28px 25px;
    text-align: center
}

.concept-cards h4 {
    margin: 0;
    color: #fff;
    font: 700 34px/1 var(--display)
}

.concept-cards b {
    display: block;
    margin: 8px 0 20px;
    color: #c8c7ff;
    font: 600 15px/1.3 var(--display)
}

.concept-cards p {
    margin: 0;
    color: #d4d7eb;
    font-size: 14px
}

.wire-panel {
    margin-bottom: 38px;
    padding: 42px;
    border: 1px solid #ffffff24;
    background: linear-gradient(135deg, #ffffff10, #ffffff05);
    box-shadow: 0 25px 70px #0003
}

.wire-panel>h3 {
    margin: 0 0 30px;
    text-align: center;
    font: 700 clamp(34px, 4vw, 52px)/1.1 var(--display)
}

.food-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 45px;
    align-items: center
}

.food-grid img {
    height: 340px;
    object-fit: cover;
    filter: brightness(.72) saturate(1.15)
}

.food-grid h4 {
    margin: 0 0 22px;
    font-size: 25px
}

.food-grid ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.food-grid li {
    position: relative;
    padding: 11px 0 11px 23px;
    border-bottom: 1px solid #ffffff16;
    color: #d7daf0
}

.food-grid li::before {
    position: absolute;
    left: 0;
    color: #b69bf8;
    content: "•"
}

.culture-panel {
    padding-inline: 58px
}

.special-event-card {
    padding: 24px 0 64px
}

.special-event-card+.special-event-card {
    padding-top: 64px;
    border-top: 1px solid #ffffff22
}

.special-label {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    max-width: 900px;
    margin: 0 auto 24px;
    color: #bcb4e8;
    font: 600 15px/1 var(--display);
    font-style: italic;
    letter-spacing: .08em
}

.special-label i {
    height: 1px;
    background: #ffffff3d
}

.special-event-card>h4 {
    margin: 0;
    text-align: center;
    font: 700 clamp(48px, 5vw, 70px)/1 var(--display)
}

.special-event-card>h5 {
    margin: 15px 0 0;
    text-align: center;
    font: 700 clamp(27px, 3vw, 40px)/1 var(--display)
}

.special-date {
    margin: 25px 0 38px;
    text-align: center;
    color: #d5d7ee;
    font: 600 18px/1 var(--display);
    letter-spacing: .04em
}

.special-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #ffffff28;
    background: #070b2b99
}

.special-card-grid>img {
    height: 375px;
    object-fit: cover;
    filter: brightness(.7)
}

.special-card-grid>div {
    display: flex;
    flex-direction: column;
    padding: 42px
}

.special-card-grid h6 {
    margin: 0 0 14px;
    font-size: 21px
}

.special-card-grid p {
    margin: 0;
    color: #cfd3e7;
    font-size: 14px
}

.schedule-toggle {
    align-self: flex-end;
    min-width: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 11px 16px;
    border: 1px solid #ffffff4f;
    background: #ffffff0c;
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

.schedule-toggle b {
    font-size: 17px
}

.schedule-panel {
    border: 1px dashed #ffffff60;
    border-top: 0;
    padding: 20px 48px;
    background: #03061f75
}

.schedule-panel[hidden] {
    display: none
}

.schedule-table {
    border: 1px solid #ffffff28
}

.schedule-table>div {
    display: grid;
    grid-template-columns: 150px 1fr;
    border-bottom: 1px solid #ffffff1f
}

.schedule-table>div:last-child {
    border-bottom: 0
}

.schedule-table time,
.schedule-table span {
    padding: 10px 20px
}

.schedule-table time {
    border-right: 1px solid #ffffff1f;
    color: #c7c8e7;
    text-align: center;
    font: 600 15px/1.5 var(--display)
}

.schedule-table span {
    color: #c9ccdf;
    font-size: 13px
}

.daily-heading,
.venue-group header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 28px 0 20px;
    padding: 18px 24px;
    background: linear-gradient(90deg, #31407e, #4d2d78);
    font: 700 20px/1.2 var(--display);
    letter-spacing: .04em
}

.daily-heading i {
    font-style: normal
}

.event-card-list {
    display: grid;
    gap: 18px
}

.wire-event-card {
    display: grid;
    grid-template-columns: 32% 1fr;
    position: relative;
    overflow: hidden;
    border: 1px solid #ffffff2b;
    background: linear-gradient(110deg, #ffffff0e, #ffffff07)
}

.wire-event-card>img {
    height: 230px;
    object-fit: cover;
    filter: brightness(.65)
}

.wire-event-card__copy {
    display: flex;
    flex-direction: column;
    padding: 25px 30px
}

.wire-event-card h4 {
    margin: 0 0 12px;
    font: 700 28px/1.2 var(--display)
}

.wire-event-card h4 span {
    display: inline-block;
    margin-right: 8px;
    padding: 7px 9px;
    background: #7061b9
}

.wire-event-card h4 small {
    font-size: .55em
}

.wire-event-card h5 {
    margin: 0 0 7px;
    font-size: 16px
}

.wire-event-card p {
    margin: 0 0 10px;
    color: #cad0e3;
    font-size: 13px;
    line-height: 1.55
}

.schedule-toggle--small {
    min-width: 205px;
    margin-top: auto;
    padding: 8px 13px;
    font-size: 13px
}

.schedule-panel--card {
    grid-column: 1/-1;
    border-top: 1px dashed #ffffff4f
}

.access-section,
.ticket-section,
.faq-section {
    padding-block: 90px
}

.gateway-access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
    max-width: 950px;
    margin-inline: auto
}

.map-box {
    min-height: 340px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 75% 20%, #875be559, transparent 35%), linear-gradient(145deg, #142160, #0c103d);
    border: 1px solid #ffffff2b;
    color: #fff;
    font-size: 32px;
    font-weight: 800
}

.gateway-access-grid h4 {
    margin: 0 0 20px;
    font-size: 27px
}

.gateway-access-grid p {
    color: #d1d5e7
}

.ticket-section {
    text-align: center
}

.ticket-section>h4 {
    margin: 0 0 12px;
    font-size: 23px
}

.ticket-section>p {
    margin: 0;
    color: #c9cee1;
    font-size: 14px
}

.price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 800px;
    margin: 38px auto 30px
}

.price-grid>div {
    padding: 24px;
    border: 1px solid #ffffff38;
    background: #ffffff0b
}

.price-grid span,
.price-grid small {
    display: block;
    color: #d1d5e6
}

.price-grid strong {
    display: block;
    margin: 5px 0;
    font: 700 58px/1 var(--display)
}

.ticket-button {
    width: min(680px, 100%);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    background: #fff;
    color: #111953;
    font-weight: 800;
    box-shadow: 0 15px 45px #0004;
    transition: .2s
}

.ticket-button:hover {
    transform: translateY(-3px)
}

.app-link {
    display: inline-block;
    border-bottom: 1px solid currentColor;
    color: #d7d6ff;
    font-weight: 700
}

.faq-section {
    padding-top: 40px;
    padding-bottom: 110px
}

.faq-list {
    max-width: 900px;
    margin-inline: auto;
    border-top: 1px solid #ffffff3b
}

.faq-list article {
    border-bottom: 1px solid #ffffff3b
}

.faq-list button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer
}

.faq-list button span {
    font-weight: 700
}

.faq-list button b {
    font-size: 22px;
    font-weight: 400
}

.faq-answer {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 10px;
    padding: 0 16px 20px;
    color: #ced2e4
}

.faq-answer[hidden] {
    display: none
}

.faq-answer p {
    margin: 0
}

/* Journey */
.journey-surface {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 0 8%, #133c5547, transparent 30%), radial-gradient(ellipse at 100% 44%, #a3158b42, transparent 33%), linear-gradient(180deg, #05020c, #0c0518 58%, #03040d);
    color: #fff;
    isolation: isolate
}

.journey-surface::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(#35e9ff0d 1px, transparent 1px), linear-gradient(90deg, #ff2fcf0c 1px, transparent 1px);
    background-size: 70px 70px;
    content: "";
    mask-image: linear-gradient(to bottom, transparent, #000 10%, transparent 78%, #000)
}

.journey-flow {
    margin-top: 60px
}

.journey-flow>h4 {
    margin: 0 0 25px;
    text-align: center;
    color: #d9dcf1;
    font-size: 20px
}

.journey-flow>div {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px
}

.journey-flow article {
    min-height: 155px;
    display: grid;
    place-content: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid #ffffff28;
    background: linear-gradient(145deg, #ffffff0c, #ffffff04);
    text-align: center
}

.journey-flow article span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-inline: auto;
    border: 1px solid #ff53d88c;
    border-radius: 50%;
    color: #fff;
    font: 700 22px/1 var(--display);
    box-shadow: 0 0 25px #ff2fcf38
}

.journey-flow article p {
    margin: 0;
    color: #d0d4e6;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45
}

.journey-flow i {
    color: #ffffff65;
    font-style: normal
}

.venues-section {
    padding-bottom: 45px
}

.venue-group {
    padding-top: 42px
}

.venue-group header {
    background: linear-gradient(90deg, #6b1b73, #1b5170);
    box-shadow: 0 0 30px #ed2bdb1c
}

.venue-group header h4 {
    margin: 0;
    font: 700 20px/1.2 var(--display)
}

.venue-group header span {
    font: 600 13px/1 var(--display)
}

.journey-surface .wire-event-card {
    background: linear-gradient(110deg, #ffffff0d, #ffffff04);
    box-shadow: inset 0 1px 0 #ff31d233
}

.journey-surface .wire-event-card h4 span {
    background: linear-gradient(100deg, #ee31be, #2ba5c7)
}

.journey-surface .schedule-toggle {
    border-color: #ff52de66
}

.journey-access>.wire-title,
.journey-surface .wire-title {
    color: #fff
}

.area-map-list {
    display: grid;
    gap: 30px
}

.area-map {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 40px;
    align-items: center
}

.area-map .map-box {
    min-height: 210px;
    background: radial-gradient(circle at 75% 20%, #ff2fcf47, transparent 35%), linear-gradient(145deg, #101130, #07101f);
    box-shadow: 0 0 45px #ff2fcf12
}

.area-map ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px 24px;
    margin: 0;
    padding: 0;
    list-style: none
}

.area-map li {
    position: relative;
    padding-left: 18px;
    color: #d2d4e5;
    font-size: 13px
}

.area-map li::before {
    position: absolute;
    left: 0;
    color: #ff43d6;
    content: "●"
}

.ticket-button--neon {
    background: linear-gradient(90deg, #ff36cd, #995cff 48%, #43dff0);
    color: #08020d;
    box-shadow: 0 0 35px #ff38d33d
}

.app-link--neon {
    color: #69ebff
}

/* App / partners / footer */
.app-guide {
    background: #fff
}

.app-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    margin-top: 50px
}

.app-steps article {
    padding: 22px 18px;
    border: 1px solid #cad4e5;
    background: #fff;
    box-shadow: 0 14px 45px #0528620d;
    text-align: center
}

.app-steps h3 {
    margin: 0 0 16px;
    color: #6e7b96;
    font: 700 20px/1 var(--display);
    letter-spacing: .04em
}

.phone-frame {
    width: 150px;
    height: 285px;
    margin: 0 auto 18px;
    padding: 8px;
    border-radius: 27px;
    background: #0b1d4b;
    box-shadow: 0 14px 30px #0725602b
}

.phone-frame>div {
    position: relative;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 21px;
    background: linear-gradient(150deg, #eff4ff, #fff);
    color: #526382;
    font-size: 13px;
    font-weight: 700
}

.phone-frame>div::before {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 7px;
    border-radius: 8px;
    background: #0b1d4b;
    content: "";
    transform: translateX(-50%)
}

.app-steps h4 {
    margin: 0;
    font-size: 17px
}

.partners {
    padding-top: 40px;
    background: #f5f8fd
}

.cooperation-logos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px
}

.cooperation-logos>div {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #c8d3e4;
    background: #fff;
    box-shadow: 0 10px 35px #0527630c
}

.cooperation-logos span {
    color: #8a97ad;
    font-size: 14px
}

.cooperation-logos b {
    font-size: 16px
}

.team-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 90px 0 25px
}

.team-heading h2 {
    margin: 0;
    font-size: 36px
}

.team-heading span {
    color: #66728a;
    font-weight: 700
}

.team-logos {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px
}

.team-logos>span {
    aspect-ratio: 1.6;
    display: grid;
    place-content: center;
    gap: 4px;
    border: 1px solid #cad3e2;
    background: #fff;
    color: #7e8ba2;
    font-size: 12px;
    text-align: center
}

.team-logos small {
    color: #b0bacb
}

.subsidy-credit {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #f5f8fd;
    color: #273b68;
    font-size: 25px
}

.osaka-mark {
    width: 52px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--sbi);
    font-size: 50px
}

.site-footer {
    padding-block: 60px;
    background: #031b56;
    color: #fff
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr .55fr;
    gap: 20px;
    align-items: start
}

.footer-kv {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    border: 1px solid #ffffff6b;
    background: radial-gradient(circle at 80% 20%, #864bf97a, transparent 35%), linear-gradient(130deg, #0b3993, #111554)
}

.footer-kv b {
    font: 700 24px/1 var(--display)
}

.footer-kv span {
    font-size: 11px
}

.footer-brand h3 {
    margin: 16px 0 0;
    font-size: 13px
}

.footer-brand p {
    margin: 0;
    color: #c5cee3;
    font-size: 12px
}

.site-footer nav {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.site-footer nav b {
    font: 700 19px/1.2 var(--display)
}

.site-footer nav a,
.footer-app-link,
.footer-legal a {
    color: #c9d2e6;
    font-size: 12px
}

.footer-app-link {
    align-self: center;
    text-decoration: underline
}

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-self: center
}

.footer-legal a {
    text-decoration: underline
}

.language-control--footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #c8d2e7;
    font-size: 12px
}

.back-to-top {
    position: fixed;
    z-index: 80;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--sbi);
    box-shadow: 0 8px 25px #00184538;
    opacity: 0;
    pointer-events: none;
    transition: .2s
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto
}

@media(max-width:980px) {
    .content-width {
        width: calc(100% - 40px)
    }

    .global-nav {
        gap: 15px
    }

    .global-nav>a {
        font-size: 11px
    }

    .hero-event-card {
        grid-template-columns: 1fr 135px
    }

    .culture-panel {
        padding-inline: 34px
    }

    .app-steps {
        gap: 10px
    }

    .phone-frame {
        width: 130px;
        height: 250px
    }

    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr
    }

    .footer-app-link,
    .footer-legal,
    .language-control--footer {
        margin-top: 15px
    }
}

@media(max-width:760px) {
    :root {
        --header: 62px
    }

    body {
        font-size: 15px
    }

    .content-width {
        width: calc(100% - 28px)
    }

    .section-pad {
        padding-block: 74px
    }

    .site-header {
        padding-inline: 14px
    }

    .brand {
        font-size: 23px
    }

    .menu-button {
        display: block
    }

    .menu-button[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg)
    }

    .menu-button[aria-expanded="true"] span:nth-child(2) {
        opacity: 0
    }

    .menu-button[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg)
    }

    .global-nav {
        position: fixed;
        inset: var(--header) 0 auto;
        height: calc(100svh - var(--header));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 24px 20px 50px;
        background: #f9fbfffa;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: .2s
    }

    .global-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: none
    }

    .global-nav>a {
        padding: 17px 2px;
        border-bottom: 1px solid #d8e1ef;
        font-size: 14px
    }

    .global-nav .language-control {
        margin-top: 25px
    }

    .global-nav select {
        width: 100%
    }

    .hero {
        padding-top: 12px;
        padding-bottom: 72px
    }

    .hero-visual {
        width: calc(100% - 20px);
        min-height: 305px
    }

    .hero-visual__glow {
        width: 80vw;
        height: 120px
    }

    .hero-visual__copy p {
        font-size: 10px
    }

    .hero-visual h1 {
        font-size: clamp(50px, 14vw, 76px)
    }

    .hero-visual h2 {
        margin-top: 20px;
        font-size: 23px
    }

    .hero-event-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        width: calc(100% - 64px);
        margin-top: 18px
    }

    .hero-event-card {
        min-height: 170px;
        grid-template-columns: 1fr 31%;
        padding: 20px
    }

    .hero-event-card h3 {
        font-size: 28px
    }

    .hero-event-card b {
        font-size: 14px
    }

    .hero-event-card img {
        height: 120px
    }

    .center-heading h2,
    .center-heading h3 {
        font-size: 34px
    }

    .center-heading p {
        font-size: 15px;
        line-height: 1.95
    }

    .about-cards {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 35px
    }

    .about-cards article {
        display: grid;
        grid-template-columns: 110px 1fr;
        align-items: center;
        text-align: left
    }

    .about-card__image {
        height: 120px;
        background: #f4f7fd
    }

    .about-card__image span {
        width: 70px;
        height: 70px
    }

    .about-cards article>div:last-child {
        padding: 18px
    }

    .about-cards h3 {
        font-size: 22px
    }

    .event-kv {
        min-height: 450px
    }

    .event-kv__content {
        padding-block: 68px 44px;
        text-align: center
    }

    .event-kv h2 {
        font-size: clamp(54px, 13.7vw, 78px)
    }

    .event-kv__content>p {
        margin: 26px 0 35px;
        font-size: 17px
    }

    .event-kv__meta {
        align-items: center
    }

    .event-kv__meta b {
        font-size: 19px
    }

    .event-kv__meta--journey {
        justify-content: center;
        gap: 14px
    }

    .event-kv__meta--journey>span {
        font-size: 20px
    }

    .gateway-intro {
        padding-bottom: 40px
    }

    .concept-cards {
        display: none
    }

    .wire-panel {
        width: calc(100% - 34px);
        padding: 24px 18px
    }

    .wire-panel>h3 {
        font-size: 30px
    }

    .food-grid {
        grid-template-columns: 100%;
        gap: 18px
    }

    .food-grid img {
        height: 230px
    }

    .food-grid h4 {
        font-size: 17px
    }

    .food-grid li {
        padding-block: 7px;
        font-size: 12px
    }

    .culture-panel {
        padding: 28px 12px
    }

    .culture-panel>h3 {
        font-size: 26px
    }

    .special-event-card {
        padding-bottom: 52px
    }

    .special-label {
        gap: 14px;
        font-size: 12px
    }

    .special-event-card>h4 {
        font-size: 38px
    }

    .special-event-card>h5 {
        font-size: 24px
    }

    .special-date {
        font-size: 13px
    }

    .special-card-grid {
        grid-template-columns: 1fr
    }

    .special-card-grid>img {
        height: 290px
    }

    .special-card-grid>div {
        min-height: 270px;
        padding: 24px
    }

    .schedule-toggle {
        min-width: 190px
    }

    .schedule-panel {
        padding: 12px
    }

    .schedule-table>div {
        grid-template-columns: 100px 1fr
    }

    .schedule-table time,
    .schedule-table span {
        padding: 8px 9px;
        font-size: 10px
    }

    .daily-heading {
        justify-content: center;
        padding: 16px 8px;
        font-size: 16px
    }

    .wire-event-card {
        grid-template-columns: 100%
    }

    .wire-event-card>img {
        height: 210px
    }

    .wire-event-card__copy {
        padding: 18px 14px
    }

    .wire-event-card h4 {
        font-size: 20px
    }

    .wire-event-card h4 span {
        padding: 5px 6px
    }

    .wire-event-card h5 {
        font-size: 13px
    }

    .wire-event-card p {
        font-size: 10px
    }

    .schedule-toggle--small {
        min-width: 150px;
        padding: 5px 9px;
        font-size: 10px
    }

    .gateway-access-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .map-box {
        min-height: 260px
    }

    .gateway-access-grid h4 {
        font-size: 23px
    }

    .ticket-section>h4 {
        font-size: 18px
    }

    .ticket-section>p {
        font-size: 11px
    }

    .price-grid {
        gap: 14px
    }

    .price-grid>div {
        padding: 18px 8px
    }

    .price-grid span {
        font-size: 11px
    }

    .price-grid strong {
        font-size: 43px
    }

    .price-grid small {
        font-size: 10px
    }

    .ticket-button {
        font-size: 14px
    }

    .faq-list button {
        padding: 15px 10px;
        font-size: 13px
    }

    .desktop-flow {
        display: none
    }

    .journey-intro {
        padding-bottom: 50px
    }

    .venues-section {
        width: calc(100% - 24px)
    }

    .venues-section .center-heading h3 {
        font-size: 29px
    }

    .venue-group {
        padding-top: 30px
    }

    .venue-group header {
        padding: 15px 12px
    }

    .venue-group header h4 {
        font-size: 15px
    }

    .venue-group header span {
        font-size: 10px
    }

    .area-map {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .area-map .map-box {
        min-height: 260px
    }

    .area-map ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 14px
    }

    .area-map li {
        font-size: 11px
    }

    .app-steps {
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }

    .app-steps article {
        padding: 22px 10px
    }

    .phone-frame {
        width: 118px;
        height: 230px
    }

    .app-steps h4 {
        font-size: 15px
    }

    .cooperation-logos {
        grid-template-columns: repeat(6, 1fr);
        gap: 12px
    }

    .cooperation-logos>div {
        grid-column: span 2;
        min-height: 110px
    }

    .cooperation-logos>div:nth-child(4) {
        grid-column: 2/span 2
    }

    .cooperation-logos>div:nth-child(5) {
        grid-column: 4/span 2
    }

    .cooperation-logos b {
        font-size: 12px
    }

    .team-heading {
        justify-content: center;
        margin-top: 70px
    }

    .team-heading h2 {
        font-size: 29px
    }

    .team-heading span {
        display: none
    }

    .team-logos {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px
    }

    .team-logos>span {
        font-size: 9px
    }

    .subsidy-credit {
        min-height: 110px;
        font-size: 15px
    }

    .osaka-mark {
        width: 36px;
        font-size: 36px
    }

    .site-footer {
        padding-block: 55px
    }

    .footer-grid {
        display: block;
        width: calc(100% - 80px);
        text-align: center
    }

    .footer-kv {
        min-height: 150px
    }

    .footer-kv b {
        font-size: 37px
    }

    .footer-brand h3 {
        margin-top: 35px;
        font-size: 22px
    }

    .footer-brand p {
        font-size: 17px
    }

    .site-footer nav,
    .footer-app-link,
    .language-control--footer {
        display: none
    }

    .footer-legal {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 55px
    }

    .footer-legal a {
        font-size: 12px
    }
}

/* Supplied key visual image: one asset, three text-overlay placements. */
.subsidy-credit__image {
    width: min(568px, calc(100% - 40px));
    height: auto;
    object-fit: contain
}

.hero-visual {
    background: #e9eaec
}

.hero-visual__image {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.hero-visual::before {
    background: linear-gradient(105deg, #06236e8c, #0b4bb560 52%, #23339970), radial-gradient(circle at 78% 26%, #8870ff55, transparent 31%)
}

.hero-visual::after {
    background-image: linear-gradient(#ffffff0c 1px, transparent 1px), linear-gradient(90deg, #ffffff0c 1px, transparent 1px)
}

.hero-visual__copy {
    position: relative;
    z-index: 1
}

.event-kv {
    background: #e9eaec
}

.event-kv__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: none;
    filter: none
}

.event-kv::after {
    opacity: .08
}

.event-kv--gateway::before {
    background: radial-gradient(circle at 80% 22%, #8e64f052, transparent 28%), radial-gradient(circle at 15% 90%, #1759c24f, transparent 35%), linear-gradient(110deg, #060c358a, #24115178)
}

.event-kv--journey::before {
    background: radial-gradient(circle at 82% 22%, #ff2fd250, transparent 26%), radial-gradient(circle at 10% 88%, #31e5ff3a, transparent 32%), linear-gradient(110deg, #05030d96, #1b083976)
}

.event-kv__content {
    position: relative;
    z-index: 1
}

@media(max-width:430px) {
    .hero-event-grid {
        width: calc(100% - 36px)
    }

    .hero-event-card {
        grid-template-columns: 1fr 115px;
        gap: 12px
    }

    .hero-event-card h3 {
        font-size: 25px
    }

    .hero-event-card img {
        height: 110px
    }

    .food-grid {
        grid-template-columns: 100%
    }

    .food-grid img {
        height: 210px
    }

    .food-grid h4 {
        font-size: 15px
    }

    .special-event-card>h4 {
        font-size: 33px
    }

    .wire-event-card {
        grid-template-columns: 100%
    }

    .wire-event-card>img {
        height: 195px
    }

    .wire-event-card__copy {
        padding: 14px 11px
    }

    .wire-event-card h4 {
        font-size: 18px
    }

    .price-grid strong {
        font-size: 38px
    }

    .app-steps {
        gap: 12px
    }

    .phone-frame {
        width: 105px;
        height: 205px
    }

    .cooperation-logos span {
        font-size: 10px
    }

    .team-logos {
        gap: 6px
    }

    .footer-kv b {
        font-size: 32px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important
    }
}