@charset "UTF-8";
/*
Version: 1.1.0
Creation Date: 2024.12.15
Last Updated: 2025.8.13
*/


/* import
------------------------------------------------------------ */
@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
@import "https://cdn.jsdelivr.net/gh/amcosand/shared/fonts/KintoSans/KintoSans.css";
@import "https://use.typekit.net/amd2ejv.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css";


/* set
------------------------------------------------------------ */
:root {
--design-width: 1366;
--font-size-base: clamp(8.75px, calc(10 * 100vw / var(--design-width)), 11.25px);
--font-base: 'Kinto Sans', sans-serif;
--font-en: 'abolition', sans-serif;
--font-awesome: 'Font Awesome 6 Free';
--color-primary: #811B2E;
--color-secondary: #C8B27E;
--color-text: #000;
--color-white: #FFF;
}
* {
margin: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
html {
font-size: var(--font-size-base);
}
body {
-webkit-text-size-adjust: 100%;
font-family: var(--font-base);
color: var(--color-text);
font-size: 1.7rem;
font-weight: 500;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
abbr {
text-decoration: none;
border-bottom: none;
}
video,iframe {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;
border: none;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
opacity: .7;
}
a:hover picture {
opacity: .7 !important;
transition: 0 !important;
}
:hover {
transition: .3s;
}
.smd,.smp {
display: none;
}
.pc {
display: block;
}


/* common
------------------------------------------------------------ */
/* font */
.EN,
h1 a,
h2,
time,
.swiper.coming-soon::after { /* Abolition Regular */
font-family: var(--font-en);
font-weight: 400;
letter-spacing: .05em;
}
small {
font-size: 87.5%;
}
.v-rl {
writing-mode: vertical-rl;
}

/* layout */
main {
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
article {
width: 100%;
padding: 4vw 0;
position: relative;
}
section {
width: 80%;
margin: 0 auto;
position: relative;
}

/* style */
.none {
display: none !important;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}

h2 {
font-size: clamp(8rem, 15vw, 20rem);
}

h3.line span {
display: inline-block;
}
h3.line em {
font-size: 9.8rem;
}
h3.line strong {
font-size: 2.8rem;
font-weight: 700;
padding: .2em 0;
display: block;
border-top: 5px solid var(--color-text);
border-bottom: 5px solid var(--color-text);
}
h3.line.bgd strong {
border-top: .2em solid var(--color-primary);
border-bottom: .2em solid var(--color-primary);
}
h3.line.gld strong {
border-top: .2em solid var(--color-secondary);
border-bottom: .2em solid var(--color-secondary);
}
h3.line.wht strong {
border-top: .2em solid var(--color-white);
border-bottom: .2em solid var(--color-white);
}

.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex.center {
justify-content: center;
}
.col-2 > * {
flex-basis: 48%;
}

.ticket a {
background: var(--color-primary);
color: var(--color-secondary);
font-size: 2.4rem;
font-weight: 700;
letter-spacing: .07em;
text-align: center;
margin: 0 1rem;
padding: 1rem;
display: inline-block;
outline: 1px solid var(--color-secondary);
outline-offset: -6px;
}
.ticket a::before {
content: "";
background: url("img/b_league.png") no-repeat top/contain;
vertical-align: middle;
width: 90px;
height: 30px;
margin: .4rem 1rem .4rem 0;
display: inline-block;
}
.ticket a::after {
content: "\f0a9";
font-family: var(--font-awesome);
font-weight: 900;
padding-left: 2rem;
}
.ticket a:hover {
background: var(--color-text);
opacity: 1;
}

/* color */
.bgd {
color: var(--color-primary);
}
.gld {
color: var(--color-secondary);
}
.wht {
color: var(--color-white);
}

/* background */
.bg_bgd {
background: var(--color-primary);
}
.bg_gld {
background: var(--color-secondary);
}
.bg_wht {
background: var(--color-white);
}

/* .sns */
.sns {
display: flex;
justify-content: center;
}
.sns li a {
font-size: 4rem;
color: var(--color-secondary);
padding: 1rem 1.5rem;
}
.sns li a:hover {
color: var(--color-white);
opacity: 1;
}

/* Swiper */
.swiper {
margin-bottom: 3rem;
}
.swiper .swiper-wrapper {
margin: 3rem 0;
}
.swiper .swiper-slide {
background: var(--color-white);
height: auto;
padding: 6px;
border: 5px solid var(--color-secondary);
outline: 3px solid var(--color-secondary);
outline-offset: -12px;
}
.swiper .swiper-slide a {
color: var(--color-primary);
text-decoration: underline;
}
.swiper .swiper-slide a:hover {
text-decoration: none;
}
.swiper .swiper-slide:has(dl) {
padding: 6px 6px 70px;
}
.swiper .swiper-slide h3 {
color: var(--color-primary);
font-size: 2.5rem;
line-height: 1.2;
padding: 1rem 2rem;
}
.swiper .swiper-slide p {
font-size: 1.5rem;
font-weight: 400;
line-height: 1.6;
padding: 0 2rem 2em;
}
.swiper .swiper-slide dl {
width: calc(100% - 3rem - 22px);
position: absolute;
left: calc(1.5rem + 11px);
bottom: 11px;
}
.swiper .swiper-slide dl dt {
background: var(--color-primary);
color: var(--color-white);
font-size: 1.4rem;
font-weight: 500;
line-height: 1.6;
text-align: center;
width: 70px;
margin: 0 1rem .5rem 0;
float: left;
clear: both;
}
.swiper .swiper-slide dl dd {
margin-bottom: .5rem;
padding-top: .4rem;
}
.swiper .swiper-slide dl dd small {
font-size: 70%;
}
.swiper ul.flex li {
background: var(--color-text);
width: 70px;
margin: 0 5px;
cursor: pointer;
}
.swiper.coming-soon::after {
content: "Coming soon";
color: var(--color-white);
font-size: 15.8rem;
font-size: clamp(6rem, 11.5vw, 15.8rem);
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
}
.swiper.coming-soon .swiper-slide::after {
content: "";
background: rgba(34,22,19,.95);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}


/* header
------------------------------------------------------------ */
header {
background: var(--color-primary);
color: var(--color-secondary);
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 4;
}
header section {
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1em;
}
header h1 {
flex-shrink: 0;
}
header h1 a {
font-size: 2.5rem;
letter-spacing: .25em;
}
header h1 a::before {
content: "";
background: url("img/logo.png") no-repeat center/contain;
vertical-align: middle;
width: 11vw;
aspect-ratio: 360 / 225;
margin-right: 1rem;
display: inline-block;
}
header nav {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
header nav ul:not(.sns) {
flex: 1;
display: flex;
justify-content: center;
}
header nav ul:not(.sns) li a {
white-space: nowrap;
padding: 1rem;
position: relative;
}
header nav ul:not(.sns) li a:hover {
color: var(--color-white);
opacity: 1;
}
header nav ul:not(.sns) li:not(:last-child) a::after {
content: "";
background: var(--color-secondary);
width: 1px;
height: 50%;
position: absolute;
top: 50%;
right: -1px;
transform: translateY(-50%);
}
header .sns li a {
font-size: 2.2rem;
padding: .8rem;
}

/* #triple */
#triple {
display: none;
font-size: 1rem;
text-align: center;
width: 60px;
height: 60px;
padding-top: 40px;
cursor: pointer;
position: fixed;
top: 0;
right: 0;
}
#triple span,
#triple span::before,
#triple span::after {
content: "";
background: var(--color-white);
width: 30px;
height: 1px;
position: absolute;
top: calc(40% - 8px);
left: 50%;
transform: translate(-50%,-50%);
transition: all .2s ease-in-out;
}
#triple span::before {
top: calc(50% + 8px);
}
#triple span::after {
top: calc(50% + 16px);
}
#triple.open span {
top: 40%;
transform: translate(-50%,-50%) rotate(-45deg);
}
#triple.open span::before {
opacity: 0;
}
#triple.open span::after {
top: 40%;
transform: translate(-50%,-50%) rotate(90deg);
}


/* main
------------------------------------------------------------ */
/* #main */
#main {
padding: 0;
z-index: 3;
}
#main img {
width: 100vw;
}

/* #game */
#game {
background: url("img/game_bg.jpg") no-repeat center/cover;
}
#game::before {
content: "";
background: url("img/player_01.png") no-repeat center/contain;
width: 29vw;
aspect-ratio: 400 / 900;
position: absolute;
right: -4vw;
bottom: 0;
z-index: 2;
}
#game h2 {
position: absolute;
top: 2vw;
left: 0;
}
#game section {
max-width: 840px;
z-index: 2;
}
#vs {
margin: 3vw auto;
}
#vs figure {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#vs figcaption {
font-weight: 700;
padding: 1rem;
}
#vs figure > div {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
#vs .EN {
font-size: 5.9rem;
padding: 0 2rem;
display: flex;
align-items: center;
}
#days li {
text-align: center;
display: flex;
flex: 0 0 48%;
justify-content: center;
}
#days time {
font-size: 11rem;
line-height: 1.1;
display: block;
margin-bottom: 1rem;
}
#days time small {
font-size: 6rem;
vertical-align: bottom;
padding: 0 .7rem .7rem 0;
display: inline-flex;
flex-direction: column;
}
#days time abbr {
font-size: 5rem;
padding-left: .5rem;
}
#days time span {
font-size: 6rem;
display: block;
border-top: 1px solid var(--color-white);
}
#days:has(.none) {
justify-content: center;
}
#days:has(.none) time small img {
display: none;
}
#game > div {
color: var(--color-white);
line-height: 1.5;
height: 8rem;
text-align: center;
margin-top: 7rem;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
#game > div em {
font-weight: 700;
}
#game > div strong {
font-size: 2.7rem;
font-weight: 700;
}
#game > div a::after {
content: "\f0a9";
font-family: var(--font-awesome);
font-weight: 900;
}
#game > div::before,
#game > div::after {
content: "";
background: #801b2e;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#game > div::after {
background: #003454;
clip-path: polygon(5rem 0, 100% 0, 100% 100%, 0 100%);
width: calc(50% + 2.5rem);
}

/* #movie */
#movie {
background: url("img/movie_bg.jpg") no-repeat top -1px center/cover;
padding: 7vw 0 15vw;
}
#movie h2 {
position: absolute;
top: 2vw;
right: 0;
}
#movie section {
width: 70%;
}
.movie {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
}
.movie iframe {
width: 100%;
height: 100%;
border: 0;
position: absolute;
inset: 0;
}
#movie h3 {
font-size: 3.7rem;
font-weight: 700;
font-style: italic;
margin-top: 2rem;
}

/* #ticket */
#ticket::before,
#ticket::after {
content: "";
background: url("img/bg_01.png") no-repeat right/contain;
width: 22vw;
aspect-ratio: 310 / 400;
position: absolute;
top: 0;
right: 0;
}
#ticket::after {
background: url("img/bg_02.png") no-repeat right/contain;
width: 80vw;
aspect-ratio: 1100 / 590;
top: 38%;
}
#ticket section {
margin-top: -13vw;
z-index: 1;
}
#movie.none + #ticket section {
margin-top: 0;
}
#ticket section::before {
content: "";
background: url("img/player_02.png") no-repeat right/contain;
width: 20vw;
aspect-ratio: 280 / 580;
position: absolute;
top: 45%;
right: -5vw;
z-index: -1;
}
#ticket h2 + p {
font-size: 2.8rem;
font-weight: 700;
padding: 0 0 6rem 1.5rem;
}
#ticket h3 {
margin-bottom: 1em;
}
#ticket .attention + h3 {
margin-top: 3em;
}
#ticket h4 {
font-size: 6.1rem;
font-weight: 700;
font-style: italic;
margin: 4rem 0 2rem;
}
#ticket h5 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 1rem;
}
#ticket h5 + p {
line-height: 1.7;
margin-bottom: 2rem;
}
#ticket .ticket {
margin-bottom: 5rem;
}
.attention {
max-width: 800px;
margin: 0 auto;
padding: 3em 0;
}
.attention p {
font-size: 2.5rem;
font-weight: 700;
}
.attention div {
margin: 2rem auto;
cursor: pointer;
font-size: 5rem;
}
.attention div::before {
content: "\f055";
font-family: var(--font-awesome);
font-weight: 900;
display: block;
}
.attention div.active::before {
content: "\f056";
}
.attention ul {
display: none;
background: var(--color-secondary);
background: rgba(255,255,255,.8);
padding: 2rem;
}
.attention ul li::before {
content: "◎";
position: absolute;
top: 0;
left: 0;
}
.attention ul li {
line-height: 1.3;
margin-bottom: .5em;
padding-left: 1.5em;
position: relative;
}

/* #schedule */
#schedule {
background: var(--color-primary) url("img/schedule_bg.png") no-repeat top/100% auto;
padding: 26vw 0 15vw;
}
#schedule h2 {
position: absolute;
top: 8vw;
right: 0;
}
#schedule h3 {
margin-bottom: 2em;
}

/* #pickup */
#pickup {
background: url("img/pickup_bg.jpg") no-repeat center/cover;
padding: 4vw 0 15vw;
}
#pickup section {
margin-top: -13vw;
}
#pickup h2 {
margin-left: -4vw;
}
#pickup h3 {
max-width: 35%;
position: absolute;
top: 7vw;
right: 0;
}
#pickup li {
position: relative;
z-index: 1;
}
#pickup li::before {
content: "";
background: #000;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

/* #goods */
#goods {
background: rgba(200,178,126,.3);
}
#goods::before {
content: "";
background: url("img/bg_03.png") no-repeat left/contain;
width: 32vw;
aspect-ratio: 450 / 630;
position: absolute;
top: 0;
left: 0;
}
#goods section {
margin-top: -13vw;
}

/* #access */
#access {
padding: 0 0 10vw;
z-index: 1;
}
#access::before,
#access::after {
content: "";
background: url("img/bg_02.png") no-repeat right/contain;
width: 80vw;
aspect-ratio: 1100 / 590;
position: absolute;
top: -8vw;
right: 0;
}
#access::after {
background: url("img/player_03.png") no-repeat right/contain;
width: 26vw;
aspect-ratio: 360 / 540;
top: -4vw;
right: 4vw;
}
#access h2 {
position: absolute;
top: 4vw;
left: 0;
}
#access .flex {
margin: 8vw 0;
}
#access h3 {
font-size: 3.8rem;
font-weight: 700;
margin-bottom: 1rem;
}
#access address {
font-size: 1.9rem;
margin-bottom: 2rem;
}
#access p {
font-size: 1.6rem;
line-height: 1.5;
margin-bottom: 3rem;
}
#access h4 + p {
font-size: 1.8rem;
}
#access .flex h4 {
background: #f0edec;
margin-bottom: 3rem;
padding: 1em 3em;
border-radius: 100vh;
}
#access .flex h4 em {
margin-bottom: 1rem;
display: block;
}
#access h4 {
margin-bottom: 1rem;
}
#access h4 em {
font-size: 2.7rem;
font-weight: 500;
}
#access h4 small {
font-size: 1.6rem;
font-weight: 500;
}
#access div + h4 {
margin: 8vw 0 4rem;
}

/* #links */
#links {
padding: 0;
}
#links section {
padding: 7vw 0 6vw;
}
#links section::before {
content: "";
background: url("img/player_04.png") no-repeat top/contain;
width: 14vw;
aspect-ratio: 200 / 600;
position: absolute;
bottom: 3vw;
left: 0;
}
#links h1 {
margin-bottom: 3vw;
}
#links h3 {
font-size: 3rem;
margin-bottom: 2vw;
display: block !important;
}


/* footer
------------------------------------------------------------ */
footer {
background: var(--color-text);
width: 100%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 4;
}
footer ul li a {
background: var(--color-primary);
color: var(--color-white);
font-size: 2.1rem;
font-weight: 700;
line-height: 1.1;
text-align: left;
margin: 0 1rem;
padding: 1.3rem 2rem;
display: flex;
align-items: center;
outline: 1px solid var(--color-secondary);
outline-offset: -6px;
}
footer ul li a time {
font-size: 5.4rem;
color: var(--color-secondary);
}
footer ul li a time::before {
content: "";
background: url("img/b_league.png") no-repeat top/contain;
width: 10vw;
aspect-ratio: 144 / 52;	
margin-right: 2rem;
display: inline-block;
}
footer ul li a time small {
font-size: 3rem;
padding: 0 .5rem;
}
footer ul li a span {
margin-left: 1.5rem;
}

/* #pagetop */
#pagetop {
background: var(--color-secondary);
width: 120px;
position: fixed;
right: 0;
bottom: 0;
}
#pagetop:hover {
background: var(--color-primary);
}
#pagetop a:hover {
opacity: 1;
}





@media screen and (max-width: 1180px) {

/* common
------------------------------------------------------------ */
section {
width: 92%;
}

/* header
------------------------------------------------------------ */
header {
height: 80px;
}

/* main
------------------------------------------------------------ */
/* #pickup */
#pickup h2 {
margin-left: 0;
}

/* footer
------------------------------------------------------------ */
footer {
height: 90px;
}

/* #pagetop */
#pagetop {
width: 90px;
}

}


@media screen and (max-width: 1023px) {

/* set
------------------------------------------------------------ */
.pc,.smd-none {
display: none;
}
.smd {
display: block;
}

/* header
------------------------------------------------------------ */
header nav {
flex-direction: column;
}
header .sns {
order: -1;
margin: 0 0 1em auto;
}

/* main
------------------------------------------------------------ */
/* #game */
#game::before {
display: none;
}
#game h2 {
display: none;
}

/* #movie */
#movie h2 {
writing-mode: horizontal-tb;
text-align: center;
margin-bottom: 3rem;
position: static;
}
#movie section {
width: 92%;
}

/* #ticket */
#ticket h2 + p {
font-size: 2rem;
line-height: 1.5;
}

/* #schedule */
#schedule h2 {
padding-left: 4%;
writing-mode: horizontal-tb;
margin: -3rem 0 3rem;
position: static;
}

/* #access */
#access h3 {
font-size: 3.4rem;
}
#access h4 + p {
font-size: 1.7rem;
}
#access .flex h4 {
padding: 1em 2em;
}
#access h4 em {
font-size: 2.3rem;
}

/* #links */
#links section::before {
bottom: 8vw;
}
#links h1 {
max-width: 30%;
margin: 0 auto 3vw;
}

/* footer
------------------------------------------------------------ */
footer {
height: 60px;
}
footer ul {
width: calc(100% - 60px);
margin-right: auto;
}
footer ul li a {
font-size: 1.2rem;
padding: .8rem;
outline-offset: -3px;
}
footer ul li a time {
font-size: 4rem;
}
footer ul li a span {
margin-left: .5rem;
}

/* #pagetop */
#pagetop {
width: 60px;
}

}


@media screen and (max-width: 540px) {

/* set
------------------------------------------------------------ */
.smd,.smp-none {
display: none;
}
.smp,.smp-block {
display: block;
}
br.smp {
font-size: 0;
}

/* common
------------------------------------------------------------ */
/* style */
.smp-center {
text-align: center !important;
}
.smp-left {
text-align: left !important;
}

h3.line em {
font-size: 6.8rem;
}
h3.line strong {
font-size: 1.8rem;
}

.scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scroll img {
width: 150%;
max-width: none; 
display: block;
}
.scroll::before {
content: "scroll ↔";
text-align: left;
margin-bottom: 1em;
padding-left: 1em;
display: block;
}

/* .sns */
.sns li a {
font-size: 3rem;
padding: 1rem;
}

/* header
------------------------------------------------------------ */
header {
color: var(--color-white);
height: 60px;
}
header h1 {
color: var(--color-secondary);
padding-left: 2rem;
}
header h1 a::before {
width: 20vw;
}
header section {
width: 100%;
max-width: 100%;
}
header nav {
display: none;
background: rgba(0,0,0,.85);
width: 100%;
padding: 2rem;
position: absolute;
top: 60px;
left: 0;
}
header nav ul:not(.sns) {
flex-wrap: wrap;
justify-content: space-between;
}
header nav ul:not(.sns) li {
flex-basis: 48%;
}
header nav ul:not(.sns) li a {
font-size: 1.7rem;
text-align: center;
padding: 2rem 0;
display: block;
border-bottom: 1px solid #FFF;
}
header nav ul:not(.sns) li a::after {
display: none;
}
header .sns {
margin: 3rem 0;
}
header .sns li a {
color: var(--color-white);
}
#triple {
display: block;
}

/* main
------------------------------------------------------------ */
/* #game */
#days li {
padding: 2rem;
}
#days li + li {
margin-top: 5vw;
}

/* #ticket */
#ticket section::before {
display: none;
}
#ticket h4 {
font-size: 4.2rem;
}
#ticket .ticket a {
letter-spacing: 0;
margin: 0;
}

/* #pickup */
#pickup h3 {
max-width: 45%;
}
#pickup li {
max-width: 80%;
margin: 2rem auto;
}

/* #goods */
#goods section {
max-width: 80%;
}

/* #access */
#access::after {
right: 0;
}
#access .flex > div {
margin-bottom: 8vw;
}
#access h4 em {
margin-bottom: 1rem;
display: block;
}
#access .scroll img {
width: 180%;
}

/* #links */
#links section::before {
width: 18vw;
top: -8vw;
bottom: auto;
}
#links h1 {
max-width: 50%;
}

/* footer
------------------------------------------------------------ */
footer ul li a {
font-size: 1rem;
margin: 0 .5rem;
display: block;
}
footer ul li a time {
font-size: 3rem;
}
footer ul li a time::before {
width: 14vw;
margin-right: .5rem;
}
footer ul li a time small {
font-size: 2rem;
padding-left: .3rem;
}
footer ul li a span {
text-align: center;
display: block;
}
footer ul li a span br {
display: none;
}

}