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


/* import
------------------------------------------------------------ */
@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.css";
@import "https://cdn.jsdelivr.net/gh/amcosand/shared/fonts/KintoSans/KintoSans.css";
@import "https://use.typekit.net/amd2ejv.css";
@import "https://use.typekit.net/cau0ekr.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 */
.PLB { /* Pirulen Bold */
font-family: pirulen, sans-serif;
font-weight: 700;
font-style: normal;
}
.PLBI { /* Pirulen Bold Italic */
font-family: pirulen, sans-serif;
font-weight: 700;
font-style: italic;
}
.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 {
font-size: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sns li a {
background: var(--color-white);
color: var(--color-primary);;
width: 6rem;
height: 6rem;
margin: 1rem;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.sns li a:hover {
background: var(--color-text);
color: var(--color-white);
opacity: 1;
}

/* Swiper */
.swiper {
margin-bottom: 3rem;
}
.swiper .swiper-wrapper {
margin: 3rem 0;
}
.swiper li.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 li.swiper-slide:has(dl) {
padding: 6px 6px 70px;
}
.swiper li.swiper-slide h3 {
color: var(--color-primary);
font-size: 2.5rem;
line-height: 1.2;
padding: 1rem 2rem;
}
.swiper li.swiper-slide p {
font-size: 1.5rem;
font-weight: 400;
line-height: 1.6;
padding: 0 2rem 2em;
}
.swiper li.swiper-slide dl {
width: calc(100% - 3rem - 22px);
position: absolute;
left: calc(1.5rem + 11px);
bottom: 11px;
}
.swiper li.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 li.swiper-slide dl dd {
margin-bottom: .5rem;
padding-top: .4rem;
}
.swiper li.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;
}

/* .modal */
.modal {
display: none;
background: rgba(0,0,0,.85);
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.modal.active {
display: flex;
}
.modal-content {
background: var(--color-white);
width: 840px;
max-width: calc(100% - 20rem);
max-height: 80vh;
overflow: auto;
}
.modal ul {
width: calc(840px + 20rem);
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
}
.modal-close {
color: var(--color-white);
font-size: 4rem;
font-weight: 100;
position: absolute;
top: 2rem;
right: 2rem;
cursor: pointer;
}
.modal .prev,
.modal .next {
width: 6rem;
height: 6rem;
border: 1px solid var(--color-white);
border-radius: 50%;
position: absolute;
top: -3rem;
cursor: pointer;
}
.modal .prev {
left: 2rem;
}
.modal .next {
right: 2rem;
}
.modal .prev::before,
.modal .next::before {
content: "";
width: 2rem;
height: 2rem;
border-top: 1px solid var(--color-white);
border-right: 1px solid var(--color-white);
position: absolute;
top: 50%;
left: 50%;
}
.modal .prev::before {
transform: translate(-30%,-50%) rotate(-135deg);
}
.modal .next::before {
transform: translate(-70%,-50%) rotate(45deg);
}

/* Lity */
.lity {
background: rgba(0,0,0,.85);
}
.lity-content {
max-width: 92%;
margin: 0 auto;
}
.lity-close,
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
font-family: "Noto Sans JP", sans-serif;
font-size: 4rem;
font-weight: 100;
line-height: auto;
text-shadow: none;
width: auto;
height: auto;
top: 2rem;
right: 2rem;
}

/* .box */
.box {
background: var(--color-white);
width: auto;
max-width: 92%;
text-align: center;
margin: 15rem auto 5rem;
padding: 3rem;
display: inline-block;
border: .6rem solid var(--color-primary);
}
.box::before {
content: "";
background: var(--color-primary);
width: 4rem;
height: 4rem;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
position: absolute;
bottom: -1px;
right: -1px;
}
.box h2 {
background: var(--color-white);
color: var(--color-primary);
margin: -15rem auto 1rem;
padding: 0 2rem;
display: inline-block;
}


/* header
------------------------------------------------------------ */
header {
background: var(--color-primary);
color: var(--color-white);
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 4;
}
header section {
width: 92%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
header h1 {
flex-basis: 50%;
}
header h1 a {
color: var(--color-secondary);
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: 150px;
height: 75px;
margin-right: 1rem;
display: inline-block;
}
header nav {
flex-basis: 50%;
}
header nav ul:not(.sns) {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
header nav ul:not(.sns) li a {
font-size: 1.3rem;
font-weight: 400;
padding: 1rem;
position: relative;
}
header nav ul:not(.sns) li a::before,
header nav ul:not(.sns) li a::after {
content: "";
background: var(--color-white);
width: 1px;
height: 15px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
header nav ul:not(.sns) li a::before {
left: 0;
}
header nav ul:not(.sns) li a::after {
right: -1px;
}

header .sns {
display: none;
}

/* #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: -7vw;
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;
}

#more {
margin: 3vw auto;
}
.more {
margin: .5rem;
}
.more a {
background: var(--color-white);
font-weight: 700;
padding: 1rem 3rem;
display: inline-block;
border: 1px solid var(--color-white);
}
.more a:hover {
background: var(--color-text);
color: var(--color-white);
opacity: 1;
}
.more a::before {
content: "\f138";
font-family: "Font Awesome 6 Free";
font-weight: 900;
padding-right: .5rem;
}

#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;
}
#days figure {
margin-bottom: 3vw;
}
#days figure a:hover {
background: rgba(255,255,255,.3);
display: block;
opacity: 1;
}
#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;
}

/* #time_schedule */
#time_schedule {
background: var(--color-primary) url("img/schedule_bg.png") no-repeat top/100% auto;
padding: 32vw 0 15vw;
}
#time_schedule h2 {
position: absolute;
top: 8vw;
right: 0;
}
#time_schedule section {
width: 70%;
padding-top: 3rem;
z-index: 1;
}
/* tab */
.tab-group {
display: flex;
justify-content: space-between;
margin-bottom: 2em;
}
.tab-group.none {
display: none;
}
.tab {
flex-basis: 49%;
text-align: center;
position: relative;
}
.tab::before {
content: "";
border-style: solid;
border-width: 26px 15px 0 15px;
border-color: #898989 transparent transparent transparent;
position: absolute;
top: 90%;
left: 50%;
transform: translateX(-50%);
}
.tab::after {
content: "";
background: #898989;
width: 100%;
height: 70%;
position: absolute;
bottom: 0;
left: 0;
}
.tab:hover {
cursor: pointer;
}
.tab time {
color: var(--color-white);
font-size: 8rem;
-webkit-text-stroke: 2px #898989;
text-stroke: 2px #898989;
position: relative;
z-index: 1;
}
.tab time small {
font-size: 5rem;
-webkit-text-stroke: 0;
text-stroke: 0;
padding-left: .5rem;
}
.tab.is-active::before {
border-color: var(--color-secondary) transparent transparent transparent;
}
.tab.is-active::after {
background: var(--color-secondary);
}
.tab.is-active time {
-webkit-text-stroke: 2px var(--color-secondary);
text-stroke: 2px var(--color-secondary);
}
.panel {
display: none;
}
.panel.is-show {
display: block;
}
.panel ul li {
background: var(--color-white);
margin-bottom: .8rem;
padding: 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
}
.panel ul li i {
width: 3rem;
height: 3rem;
border: 1px solid #811B2E;
border-radius: 50%;
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
}
.panel ul li i::before,
.panel ul li i::after {
content: "";
background: #811B2E;
width: 1.5rem;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.panel ul li i::after {
width: 1px;
height: 1.5rem;
}
.panel ul li:hover {
background: #E1E1E1;
cursor: pointer;
}
.panel ul li span {
color: #811B2E;
font-size: 1.9rem;
text-align: center;
flex-basis: 8rem;
padding: .3rem 0;
border-right: 1px solid #811B2E;
}
.panel ul li h3 {
flex-basis: calc(100% - 8rem);
font-size: 1.7rem;
font-weight: 500;
padding: .3rem 4rem .3rem 1rem;
}

#time_schedule .swiper {
margin-bottom: 0;
}
#time_schedule .swiper .swiper-wrapper {
margin: 0;
}
#time_schedule .modal .swiper-slide {
background: none;
height: auto;
padding: 5rem 3rem;
border: none;
outline: none;
outline-offset: 0;
}
#time_schedule .modal .swiper-slide span {
color: #811B2E;
font-size: 2rem;
}
#time_schedule .modal .swiper-slide h3 {
color: var(--color-primary);
font-size: 2rem;
margin-bottom: 1rem;
padding: 1.5rem 0 2rem;
border-bottom: 1px solid #CCC;
}
#time_schedule .modal .swiper-slide p {
font-size: 1.6rem;
line-height: 1.6;
padding: 1rem 0;
}

/* #arena_map */
#arena_map {
padding-bottom: 15vw;
}
#arena_map section {
margin-top: -13vw;
}
#arena_map div {
margin-top: 3vw;
}

/* #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 {
margin-bottom: 4%;
position: relative;
z-index: 1;
}
#pickup li::before {
content: "";
background: var(--color-text);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#pickup .attention ul {
line-height: 1.5;
}

/* #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;
}

/* #member */
#member ul li {
flex-basis: 23%;
margin: 3rem 0;
}
#member ul::before,
#member ul::after {
content: "";
width: 23%;
display: block;
}
#member ul::before {
order: 1;
}
#member ul li div {
position: relative;
overflow: hidden;
}
#member ul li div::before {
content: "";
background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(129,27,46,.6) 100%);
background: rgba(0,0,0,.5);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#member ul li div img {
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: 0 0;
transition: .5s;
}
#member ul li div span {
width: 3rem;
height: 3rem;
border: 1px solid var(--color-white);
border-radius: 50%;
position: absolute;
right: 1rem;
bottom: 1rem;
}
#member ul li div span::before,
#member ul li div span::after {
content: "";
background: var(--color-white);
width: 1.5rem;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#member ul li div span::after {
width: 1px;
height: 1.5rem;
}
#member ul li p {
font-size: 1.8rem;
margin: 1rem 0;
opacity: .8;
}
#member ul li:hover {
cursor: pointer;
}
#member ul li:hover div::before {
display: none;
}
#member ul li div img:hover {
transform: scale(1.1);
transition: .5s;
}
#member ul li:hover p {
opacity: 1;
}

#member-modal .swiper {
margin-bottom: 0;
}
#member-modal .swiper .swiper-wrapper {
margin: 0;
}
#member-modal figure {
color: var(--color-text);
padding: 3rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
#member-modal figure > div {
flex-basis: 38%;
position: relative;
}
#member-modal figure > div::before,
#member-modal figure > div::after {
content: "";
width: 10rem;
height: 10rem;
border: 1px solid #811B2E;
position: absolute;
}
#member-modal figure > div::before {
top: -1rem;
left: -1rem;
border-bottom: none;
border-right: none;
}
#member-modal figure > div::after {
bottom: -1rem;
right: -1rem;
border-top: none;
border-left: none;
}
#member-modal figcaption {
flex-basis: 58%;
}
#member-modal figcaption h3 {
color: #811B2E;
font-weight: 500;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#member-modal figcaption h3 span {
flex-basis: 5rem;
font-size: 2.5rem;
}
#member-modal figcaption h3 em {
flex-basis: calc(100% - 6rem);
font-size: 2.5rem;
font-style: normal;
}
#member-modal figcaption h3 em small {
font-size: 1.2rem;
margin-top: .5rem;
display: block;
}
#member-modal figcaption p {
background: #811B2E;
clip-path: polygon(3rem 0%, 100% 0%, calc(100% - 3rem) 100%, 0% 100%);
color: #C8B27E;
font-size: 1.7rem;
text-align: center;
margin: 1rem 0 .5rem;
padding: 1rem 3rem;
}
#member-modal figcaption dl {
display: flex;
flex-wrap: wrap;
}
#member-modal figcaption dt {
flex-basis: 30%;
padding: 1rem;
border-bottom: 1px solid #CCC;
}
#member-modal figcaption dd {
flex-basis: 70%;
font-size: 1.5rem;
padding: 1rem;
border-bottom: 1px solid #CCC;
}

/* #cheer */
#cheer {
padding: 10rem 0;
}

/* #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: 10vw;
aspect-ratio: 150 / 540;
top: -4vw;
right: 12vw;
}
#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: 21vw;
aspect-ratio: 300 / 370;
position: absolute;
top: 5vw;
left: 0;
}
#links h1 {
margin-bottom: 3vw;
}
#links h3 {
font-size: 3rem;
margin-bottom: 2vw;
display: block !important;
}
#links div {
margin-top: 3vw;
}


/* 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;
}

/* #time_schedule */
#time_schedule section {
width: 92%;
padding-top: 0;
}
#time_schedule h2 {
padding-left: 4%;
writing-mode: horizontal-tb;
margin: -3rem 0 3rem;
position: static;
}

/* #access */
#access::after {
width: 12vw;
right: 4vw;
}
#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 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 {
font-size: 3rem;
}
.sns li a {
width: 4rem;
height: 4rem;
margin: .5rem;
}


/* .modal */
.modal {
align-items: flex-start;
padding-top: 8vh
}
.modal-content {
max-width: 90%;
}
.modal ul {
width: 20rem;
margin: 2rem 0;
top: auto;
bottom: 3rem;
transform: translate(-50%, 0);
}
.modal-close {
top: 1rem;
}
.modal .prev,
.modal .next {
top: auto;
bottom: -4rem;
}

/* header
------------------------------------------------------------ */
header {
height: 60px;
}
header h1 {
flex-basis: calc(100% - 60px);
padding-left: 2rem;
}
header h1 a::before {
width: 90px;
height: 50px;
}
header section {
width: 100%;
max-width: 100%;
}
header nav {
display: none;
background: rgba(0,0,0,.85);
padding: 2rem;
position: absolute;
top: 60px;
left: 0;
}
header nav ul:not(.sns) {
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 var(--color-white);
}
header nav ul:not(.sns) li a::before,
header nav ul:not(.sns) li a::after {
display: none;
}
header .sns {
display: flex;
margin: 3rem 0;
}
header .sns li a {
color: var(--color-text);
}
#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;
}

/* #time_schedule */
/* tab */
.tab::before {
border-width: 20px 12px 0 12px;
}
.tab::after {
height: 100%;
}
.tab time,
.tab.is-active time {
font-size: 4rem;
-webkit-text-stroke: 0;
text-stroke: 0;
}
.tab time small {
font-size: 2rem;
}
.panel ul li {
margin-bottom: .5rem;
padding: .5rem;
}

/* #special_topic */
#special_topic {
padding: 10rem 0 6rem;
}
#special_topic::before {
height: 100%;
top: -5%;
}

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

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

/* #member */
#member ul li {
flex-basis: 49%;
margin: 2rem 0;
}
#member ul::before,
#member ul::after {
display: none;
}

#member-modal figure {
padding: 3rem 3rem 2rem;
display: block;
}
#member-modal figure > div {
max-width: 60%;
margin: 0 auto 2rem;
}
#member-modal figure > div img {
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: 0 0;
}
#member-modal figcaption h3 {
justify-content: center;
}
#member-modal figcaption h3 span {
flex-basis: auto;
margin-right: 2rem;
}
#member-modal figcaption h3 em {
flex-basis: auto;
}
#member-modal figcaption p {
padding: .5rem 3rem;
}
#member-modal figcaption dt,
#member-modal figcaption dd {
padding: .3rem 1rem;
}

/* #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 {
top: 15vw;
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;
}

}