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


/* 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://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap";
@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
------------------------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
-webkit-text-size-adjust: 100%;
background: #811B2E;
font-family: "Noto Sans JP", sans-serif;
color: #000;
font-size: 1.6rem;
font-weight: 500;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
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 */
h1 a { /* Abolition Regular */
font-family: "abolition", sans-serif;
font-weight: 400;
}
.PLR,
#menu ul li a small { /* Pirulen Regular */
font-family: pirulen, sans-serif;
font-weight: 400;
}
.PLB { /* Pirulen Bold */
font-family: pirulen, sans-serif;
font-weight: 700;
font-style: normal;
}
.PLBI,
h2,
h3.line,
time { /* Pirulen Bold Italic */
font-family: pirulen, sans-serif;
font-weight: 700;
font-style: italic;
}
small {
font-size: 87.5%;
}

/* layout */
main {
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
article {
width: 100%;
padding: 6rem 0;
position: relative;
}
section {
width: 1090px;
max-width: 92%;
margin: 0 auto;
position: relative;
}

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

h2 {
font-size: 6.6rem;
text-align: center;
margin-bottom: 2rem;
}
h2 small {
font-family: "Noto Sans JP", sans-serif;
font-size: 2rem;
font-style: normal;
display: block;
}

h3.line {
font-size: 3.9rem;
text-align: center;
margin-top: 6rem;
}
h3.line span {
padding: 0 3rem;
display: inline-block;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
h3.line.bgd span {
border-left: 1px solid #811B2E;
border-right: 1px solid #811B2E;
}
h3.line.gld span {
border-left: 1px solid #C8B27E;
border-right: 1px solid #C8B27E;
}
h3.line.wht span {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
h3.line small {
font-size: 2rem;
font-style: normal;
display: block;
}

.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex.center {
justify-content: center;
}
.flex.col-4 {
margin-top: 3rem;
position: relative;
z-index: 1;
}
.flex.col-4 > * {
flex-basis: 23%;
margin-bottom: 2.5%;
}
.flex.col-4::before,
.flex.col-4::after {
content: "";
width: 23%;
display: block;
}
.flex.col-4::before {
order: 1;
}

article:has(section.box) {
padding-top: 3.5rem;
}
section.box {
width: 1000px;
text-align: center;
padding: 2rem;
border: .6rem solid #811B2E;
}
.box.auto {
width: auto;
display: inline-block;
}
section.box::before {
content: "";
background: #811B2E;
width: 4rem;
height: 4rem;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
position: absolute;
bottom: -1px;
right: -1px;
}
section.box h2 {
background: #FFF;
color: #811B2E;
margin: -7rem auto 1rem;
padding: 0 2rem;
display: inline-block;
}

.more a {
background: #FFF;
font-weight: 700;
padding: 1rem 3rem;
display: inline-block;
border: 1px solid #FFF;
}
.more a:hover {
background: #000;
color: #FFF;
opacity: 1;
}
.more a::before {
content: "\f138";
font-family: "Font Awesome 6 Free";
font-weight: 900;
padding-right: .5rem;
}

.ticket a {
background: #811B2E;
color: #C8B27E;
font-size: 2.4rem;
font-weight: 700;
letter-spacing: .07em;
text-align: center;
margin: 0 1rem;
padding: 1rem 1rem;
display: block;
outline: 1px solid #C8B27E;
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: "Font Awesome 6 Free";
font-weight: 900;
padding-left: 2rem;
}
.ticket a:hover {
background: #000;
opacity: 1;
}

.under {
text-decoration: underline;
text-underline-offset: .3rem;
}
h3.under {
text-decoration-thickness: 8px;
text-underline-offset: .8rem;
margin-bottom: 1rem;
}
h4.under {
text-decoration-thickness: 3px;
text-underline-offset: .8rem;
margin-bottom: 1rem;
}

ul.disc li,
ul.footnote li {
line-height: 1.2;
padding: 0 0 .5rem 2rem;
position: relative;
}
ul.disc li::before,
ul.footnote li::before {
content: "・";
position: absolute;
top: 0;
left: 0;
}
ul.footnote li::before {
content: "※";
}

/* color */
.bgd {
color: #811B2E;
}
.gld {
color: #C8B27E;
}
.wht {
color: #FFF;
}
.sdw_bgd {
text-shadow: 1px 1px 0 #811B2E, -1px 1px 0 #811B2E, 1px -1px 0 #811B2E, -1px -1px 0 #811B2E, 1px 0 #811B2E, 0 1px 0 #811B2E, -1px 0 0 #811B2E, 0 -1px 0 #811B2E;
}
.sdw_gld {
text-shadow: 1px 1px 0 #C8B27E, -1px 1px 0 #C8B27E, 1px -1px 0 #C8B27E, -1px -1px 0 #C8B27E, 1px 0 #C8B27E, 0 1px 0 #C8B27E, -1px 0 0 #C8B27E, 0 -1px 0 #C8B27E;
}
.sdw_wht {
text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF, 1px 0 #FFF, 0 1px 0 #FFF, -1px 0 0 #FFF, 0 -1px 0 #FFF;
}

/* background */
.bg_bgd {
background: #811B2E;
}
.bg_gld {
background: #C8B27E;
}
.bg_wht {
background: #FFF;
}
.arrow_gld li {
background: #C8B27E;
}
.arrow_gld li:hover {
background: #000;
}
.arrow_blk li {
background: #000;
}
.arrow_blk li:hover {
background: #811B2E;
}
.hvr {
display: inline-block;
position: relative;
}
.hvr::before {
content: "";
background: #000;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1
}

/* .sns */
.sns {
font-size: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sns li a {
background: #FFF;
color: #811B2E;
width: 6rem;
height: 6rem;
margin: 1rem;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.sns li a:hover {
background: #000;
color: #FFF;
opacity: 1;
}

/* Swiper */
#goods .swiper-wrapper,
#arena_gourmet .swiper-wrapper {
margin: 5rem 0;
}
.swiper-wrapper.center {
flex-wrap: nowrap;
}
.swiper.frame {
margin-bottom: 3rem;
}
.swiper.frame .swiper-wrapper {
margin: 3rem 0;
}
.swiper.frame .swiper-slide {
background: #FFF;
height: auto;
padding: 6px;
border: 5px solid #C8B27E;
outline: 3px solid #C8B27E;
outline-offset: -12px;
}
.swiper.frame .swiper-slide a {
color: #811B2E;
text-decoration: underline;
}
.swiper.frame .swiper-slide a:hover {
text-decoration: none;
}
.swiper.frame .swiper-slide:has(dl) {
padding: 6px 6px 70px;
}
#arena_gourmet .swiper-slide.frame {
border: 5px solid #811B2E;
outline: 3px solid #811B2E;
}
.swiper.frame .swiper-slide h3 {
color: #811B2E;
font-size: 2.5rem;
line-height: 1.2;
padding: 1rem 2rem;
}
.swiper.frame .swiper-slide p {
font-size: 1.5rem;
font-weight: 400;
padding: 0 2rem 2em;
}
.swiper.frame .swiper-slide dl {
width: calc(100% - 3rem - 22px);
position: absolute;
left: calc(1.5rem + 11px);
bottom: 11px;
}
.swiper.frame .swiper-slide dl dt {
background: #811B2E;
color: #FFF;
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.frame .swiper-slide dl dd {
margin-bottom: .5rem;
}
.swiper.frame .swiper-slide dl dd small {
font-size: 70%;
}
.swiper ul:not(.swiper-wrapper, .footnote) li {
width: 70px;
margin: 0 5px;
cursor: pointer;
}
.swiper ul.footnote {
font-size: 1.3rem;
font-weight: 400;
margin: -2rem 0 2rem;
}

/* .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: #FFF;
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: #FFF;
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 #FFF;
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 #FFF;
border-right: 1px solid #FFF;
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 {
background: #FFF;
width: 900px;
max-width: 92%;
margin: 0 auto;
padding: 3rem;
}


/* header
------------------------------------------------------------ */
header {
background: #811B2E;
color: #FFF;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
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: #C8B27E;
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: #FFF;
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: #FFF;
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;
}
#main img {
width: 100vw;
}

/* #game_information */
#game_information section {
z-index: 1;
}
#game_information h2 {
color: transparent;
-webkit-text-stroke: 1.5px #FFF;
text-stroke: 1.5px #FFF;
}
#vs {
margin: 2rem auto;
}
#vs figure {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#vs figcaption {
font-size: 1.7rem;
font-weight: 700;
padding: 1rem;
}
#vs figure > div {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
#vs .PLB {
font-size: 4rem;
padding: 0 2rem;
display: flex;
align-items: center;
}
#game_information .more {
margin: .5rem;
}
#game_information p.wht {
font-size: 3rem;
font-weight: 700;
margin-top: 2rem;
}
#days li {
margin: 2rem;
}
#days time {
font-size: 9.7rem;
line-height: 1.1;
letter-spacing: .05em;
display: block;
margin-bottom: 1rem;
}
#days time small {
font-size: 3rem;
padding-left: .5rem;
}
#days time span {
font-size: 3.2rem;
display: block;
}

/* #menu */
#menu section {
width: 930px;
}
#menu .hvr::before {
height: calc(100% - 10px);
top: 10px;
}
#menu ul {
margin-top: 6rem;
}
#menu ul li {
flex-basis: 25%;
padding: 1rem;
}
#menu ul li a {
background: #811B2E;
color: #C8B27E;
text-align: center;
height: 100%;
min-height: 90px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #C8B27E;
position: relative;
}
#menu ul li a::before {
content: "";
background: #C8B27E;
width: 1vw;
height: 1vw;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
position: absolute;
bottom: -1px;
right: -1px;
}
#menu ul li a small {
color: #FFF;
font-size: 1.2rem;
margin-top: .3rem;
display: block;
}
#menu ul li a:hover {
background: #000;
opacity: 1;
}

/* #time_schedule */
#time_schedule {
padding: 3rem 0 20%;
}
#time_schedule::before {
content: "";
background: #C8B27E;
clip-path: polygon(0 0, 100% 20vw, 100% 100%, 0 100%);
width: 100%;
height: calc(100% + 6rem);
position: absolute;
top: -6rem;
left: 0;
z-index: -1;
}
#time_schedule::after {
content: "";
background: url("img/player_03.png") no-repeat bottom/contain;
width: 365px;
max-width: 26%;
height: 1330px;
position: absolute;
bottom: -20%;
left: -5%;
z-index: -1;
}
#time_schedule section {
width: 860px;
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: #FFF;
font-size: 6rem;
-webkit-text-stroke: 2px #898989;
text-stroke: 2px #898989;
position: relative;
z-index: 1;
}
.tab time small {
font-size: 3rem;
-webkit-text-stroke: 0;
text-stroke: 0;
padding-left: .5rem;
}
.tab.is-active::before {
border-color: #811B2E transparent transparent transparent;
}
.tab.is-active::after {
background: #811B2E;
}
.tab.is-active time {
-webkit-text-stroke: 2px #811B2E;
text-stroke: 2px #811B2E;
}
.panel {
display: none;
}
.panel.is-show {
display: block;
}
.panel ul li {
background: #FFF;
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.7rem;
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.6rem;
font-weight: 500;
padding: .3rem 4rem .3rem 1rem;
}

#time_schedule .modal .swiper-slide {
padding: 5rem 3rem;
}
#time_schedule .modal .swiper-slide span {
color: #811B2E;
font-size: 2rem;
}
#time_schedule .modal .swiper-slide h3 {
font-size: 2rem;
margin-bottom: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #CCC;
}

/* #special_topic */
#special_topic {
background: #C8B27E;
padding: 10rem 0;
}
#special_topic::before {
content: "";
background: url("img/bg_02.png") no-repeat top/100% auto;
width: 100%;
height: 150%;
position: absolute;
top: -50%;
left: 0;
}

/* #arena_map */
#arena_map::before {
content: "";
background: url("img/bg_03.png") no-repeat top/cover;
width: 100%;
height: calc(100% + 10rem + 15%);
position: absolute;
top: calc(-6rem + -15%);
left: 0;
z-index: -1;
}

/* #event */
#event {
padding-top: 0;
}
#event section {
width: 1260px;
}
#event figure {
max-width: 1260px;
margin: 6rem auto 12rem -5%;
position: relative;
}
#event figure > div {
width: 65%;
clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%);
}
#event figcaption {
max-width: 55%;
height: 100%;
padding: 5rem;
position: absolute;
right: 0;
bottom: -4rem;
}
#event figcaption::before {
content: "";
background: #FFF;
width: 120%;
height: 100%;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
}
#event figcaption h3 span {
background: #811B2E;
color: #FFF;
font-size: 3rem;
white-space: nowrap;
margin-bottom: 1rem;
padding: 0 2rem;
display: inline-block;
}
#event figcaption h3 span:first-child {
margin-left: 2rem;
}
#event figcaption div {
max-width: 80%;
height: 70%;
margin: 3rem 0 3rem auto;
overflow-y: auto;
}
#event figcaption div a {
color: #811B2E;
text-decoration: underline;
}
#event figcaption div a:hover {
text-decoration: none;
}
#event figcaption div p {
font-size: 1.7rem;
}

/* #guest */
#guest::before {
content: "";
background: url("img/player_04.png") no-repeat right top/contain;
width: 300px;
max-width: 22%;
height: 625px;
position: absolute;
top: -15rem;
left: 1%;
}

/* #goods */
#goods::before {
content: "";
background: #C8B27E;
clip-path: polygon(0 20vw, 100% 0, 100% 100%, 0 100%);
width: 100%;
height: 100%;
position: absolute;
bottom: -20%;
left: 0;
z-index: -1;
}
#goods section {
z-index: 1;
}
#goods .more {
margin-top: 6rem;
}

/* #arena_gourmet */
#arena_gourmet {
padding: 10rem 0 6rem;
}
#arena_gourmet::before {
content: "";
background: url("img/bg_04.png") no-repeat top/100% auto;
width: 100%;
height: 100%;
position: absolute;
top: -15%;
left: 0;
}
#arena_gourmet p.wht {
font-size: 1.9rem;
line-height: 1.8;
}

/* #member */
#member section::after {
content: "";
background: url("img/player_05.png") no-repeat bottom/contain;
width: 735px;
___max-width: 67%; /* 1人用 */
max-width: 50%;    /* 2人用 */
height: 430px;
position: absolute;
right: -3%;
bottom: -6rem;
z-index: -1;
}
#member h2 + div {
margin-bottom: 2rem;
}
#member p.center {
font-size: 1.7rem;
line-height: 2.4;
margin-bottom: 4rem;
}
#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 #FFF;
border-radius: 50%;
position: absolute;
right: 1rem;
bottom: 1rem;
}
#member ul li div span::before,
#member ul li div span::after {
content: "";
background: #FFF;
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 figure {
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;
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: .5rem 1rem;
border-bottom: 1px solid #CCC;
}
#member-modal figcaption dd {
flex-basis: 70%;
font-size: 1.5rem;
padding: .5rem 1rem;
border-bottom: 1px solid #CCC;
}

/* #mascot */
#mascot {
padding: 5rem 0 10rem;
}
#mascot::before {
content: "";
background: #FFF;
clip-path: polygon(0 20vw, 100% 0, 100% 100%, 0 100%);
width: 100%;
height: 120%;
position: absolute;
top: -20%;
left: 0;
z-index: -2;
}
#mascot figure > div {
flex-basis: 40%;
}
#mascot figcaption {
flex-basis: 57%;
}
#mascot figcaption h3 {
margin: 2rem 0;
}
#mascot figcaption p {
font-size: 1.8rem;
line-height: 2.2;
padding: 0 2rem;
}

/* #cheer */
#cheer {
padding: 3rem 0 10rem;
padding: 5rem 0;
}
#cheer h2 {
margin: -6rem auto 6rem;
position: relative;
}
#cheer h2::before {
content: "CHEER";
color: #811B2E;
-webkit-text-stroke: 2rem #811B2E;
text-stroke: 2rem #811B2E;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
#cheer figure > div {
flex-basis: 50%;
margin-bottom: 2rem;
}
#cheer figcaption {
flex-basis: 48%;
}
#cheer figcaption h3 {
margin-bottom: 2rem;
}
#cheer figcaption p {
line-height: 2;
}

/* #arena_mc */
#arena_mc {
padding: 10rem 0;
}
#arena_mc::before {
content: "";
background: #FFF;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20vw), 0 100%);
width: 100%;
height: 130%;
height: 115%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#arena_mc figure {
margin-top: 2rem
}
#arena_mc figure > div {
flex-basis: 45%;
margin-bottom: 2rem
}
#arena_mc figcaption {
flex-basis: 53%;
}
#arena_mc figcaption h3 {
margin-bottom: 2rem;
}
#arena_mc figcaption p {
font-size: 1.7rem;
line-height: 2.2;
}

/* #ticket */
#ticket {
padding: 10rem 0;
}
#ticket section::before {
content: "";
background: url("img/player_06.png") no-repeat top/contain;
width: 330px;
max-width: 30%;
height: 445px;
position: absolute;
top: -5%;
left: -5%;
z-index: -1;
}
#ticket h2 + div.center {
background: #383735;
padding: 3rem 0;
border-radius: 2rem;
}
#ticket dl {
color: #FFF;
max-width: 980px;
margin: 3rem auto;
}
#ticket dt {
background: #811B2E;
font-size: 1.8rem;
margin-bottom: -2px;
padding: 1rem 3rem;
border: 2px solid #C8B27E;
cursor: pointer;
position: relative;
}
#ticket dt::before {
content: "";
background: #C8B27E;
width: 7px;
height: 70%;
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
}
#ticket dt.arena_01::before {background: #c7b180;}
#ticket dt.arena_02::before {background: #e70011;}
#ticket dt.arena_03::before {background: #7ccff3;}
#ticket dt.arena_04::before {background: #8bc41c;}
#ticket dt.arena_05::before {background: #ea619a;}
#ticket dt.arena_06::before {background: #036fbc;}
#ticket dt.arena_07::before {background: #fed800;}
#ticket dt.arena_08::before {background: #eb6201;}
#ticket dt.arena_09::before {background: #ac4e96;}
#ticket dt.arena_10::before {background: #029844;}
#ticket dt.arena_11::before {background: #7d7d7d;}
#ticket dt.arena_12::before {background: #e8e8e8;}
#ticket dt::after {
content: "\f055";
font-family: "Font Awesome 6 Free";
color: #C8B27E;
font-size: 2rem;
font-weight: 900;
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
}
#ticket dt.active::after {
content: "\f056";
}
#ticket dd {
display: none;
background: #C8B27E;
color: #811B2E;
padding: 1rem 3rem;
}
#ticket dd figure {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#ticket dd figure > * {
flex-basis: 48%
}
#ticket ul.footnote {
font-size: 1.4rem;
font-weight: 400;
max-width: 940px;
margin: 3rem auto 6rem;
}

/* #access */
#access {
padding: 20rem 0 10rem;
}
#access::before {
content: "";
background: url("img/bg_05.png") no-repeat top/100% auto;
width: 100%;
height: 100%;
position: absolute;
top: -18%;
left: 0;
z-index: -1;
}
@media screen and (max-width: 1260px) {
#access::before {top: -10%;}
}
@media screen and (max-width: 1000px) {
#access::before {top: -5%;}
}
#access::after {
content: "";
background: #FFF;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20vw));
width: 100%;
height: 100%;
position: absolute;
bottom: -10%;
left: 0;
z-index: -2;
}
#access h2 {
margin-bottom: 10rem;
}
#access h3 {
font-size: 3rem;
letter-spacing: .07em;
margin-bottom: 2rem;
}
#access a {
color: #811B2E;
font-weight: 700;
}
#access a:hover {
color: #C8B27E;
color: #000;
text-decoration: underline;
opacity: 1;
}
#access p.center {
font-size: 2rem;
margin-bottom: 2rem;
}
#access div.center {
margin-bottom: 6rem;
}
#access div.flex {
font-size: 1.4rem;
margin-bottom: 3rem;
}
#access div.flex > div {
flex-basis: 48%;
margin-bottom: 2rem;
}
#access div.flex > div div {
margin-top: 2rem;
}
#access div.flex h4 {
font-size: 1.7rem;
line-height: 2;
margin-bottom: 2rem;
}
#access div.flex p {
line-height: 1.8;
margin-bottom: 2rem;
}
#access div.flex em {
font-size: 110%;
font-weight: 700;
font-style: normal;
}
#access ul.disc {
margin-bottom: 2rem;
}
#access ul.disc + h4 {
margin-top: 3rem;
}
#access h4 {
font-size: 2.3rem;
margin-bottom: 1rem;
}
#access ul.footnote {
font-size: 1.4rem;
font-weight: 400;
}

/* #rule */
#rule p {
margin-top: 2rem;
}

/* #links */
#links::before {
content: "";
background: url("img/player_07.png") no-repeat top/contain;
width: 365px;
max-width: 33%;
height: 430px;
position: absolute;
right: 3%;
bottom: 0;
z-index: -1;
}
#links h1 {
margin-bottom: 2rem;
}
#links h2 {
font-size: 2.5rem;
letter-spacing: .01em;
margin-bottom: 1rem;
}
#links .sns {
margin-bottom: 4rem;
}


/* footer
------------------------------------------------------------ */
footer {
background: #000;
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
}
footer ul li a {
background: #811B2E;
color: #FFF;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.1;
margin: 0 1rem;
padding: 1.3rem 2rem;
display: block;
outline: 1px solid #C8B27E;
outline-offset: -6px;
}
footer ul li a time {
font-size: 3.5rem;
letter-spacing: .05em;
color: #C8B27E;
display: block;
}
footer ul li a time::before {
content: "";
background: url("img/b_league.png") no-repeat top/contain;
width: 90px;
height: 30px;
margin-right: 1rem;
display: inline-block;
}
footer ul li a time small {
font-size: 1.5rem;
padding-left: .5rem;
}

/* #pagetop */
#pagetop {
width: 100px;
position: fixed;
right: 1%;
bottom: 1%;
}
#pagetop a:hover {
opacity: 1;
}





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

/* set
------------------------------------------------------------ */
html {
font-size: 50%;
}
.pc,.smd-none {
display: none;
}
.smd {
display: block;
}

/* main
------------------------------------------------------------ */
/* #game_information */
#game_information::before,
#game_information::after {
display: none;
}

/* #time_schedule */
#time_schedule::after {
display: none;
}

/* #event */
#event figure {
background: #FFF;
margin: 6rem auto;
}
#event figure > div {
width: 100%;
clip-path: none;
}
#event figcaption {
max-width: 100%;
position: static;
}
#event figcaption::before {
display: none;
}
#event figcaption h3 span {
white-space: normal;
}
#event figcaption h3 span:first-child {
margin-left: 0;
}
#event figcaption h3 span:nth-child(2) {
margin-left: 2rem;
}
#event figcaption div {
max-width: 100%;
height: auto;
margin: 3rem 0 0;
}

/* #mascot */
#mascot::before {
height: 130%;
top: -30%;
}

/* #cheer */
#cheer figure {
display: block;
}
#cheer figcaption p {
text-align: center;
}

/* #links */
#links::before {
display: none;
}

/* 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: 3rem;
letter-spacing: 0;
}
footer ul li a time::before {
width: 45px;
height: 15px;
margin-right: .5rem;
}

/* #pagetop */
#pagetop {
width: 60px;
right: 3%;
}

}


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

/* set
------------------------------------------------------------ */
html {
font-size: 46%;
}
.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;
}
.w50 img {width: 50%;}
.w60 img {width: 60%;}
.w70 img {width: 70%;}
.w80 img {width: 80%;}
.w90 img {width: 90%;}

h2 {
font-size: 4rem;
}
h3.line {
font-size: 3rem;
}

.flex.col-4 > * {
flex-basis: 49%;
}
.flex.col-4::before,
.flex.col-4::after {
display: none;
}

/* .sns */
.sns {
font-size: 3rem;
}
.sns li a {
width: 4rem;
height: 4rem;
margin: .5rem;
}

/* Swiper */
.swiper.frame {
max-width: 90%;
}
.swiper.frame .swiper-slide:has(dl) {
padding: 6px 6px 50px;
}
.swiper ul:not(.swiper-wrapper, .footnote) li {
width: 50px;
}

/* .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 #FFF;
}
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: #000;
}
#triple {
display: block;
}

/* main
------------------------------------------------------------ */
/* #game_information */
#vs .PLB {
font-size: 2rem;
}
#days time {
font-size: 8rem;
}

/* #menu */
#menu .hvr::before {
height: 100%;
top: 0;
}
#menu ul li {
flex-basis: 50%;
padding: .5rem;
}
#menu ul li a {
min-height: 40px;
}
#menu ul li a br {
display: none
}

/* #time_schedule */
#time_schedule {
padding: 3rem 0 10%;
}
/* 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%;
}

/* #arena_map */
#arena_map::before {
height: calc(100% + 6rem + 10%);
top: calc(-4rem + -10%);
}

/* #event */
#event figcaption {
padding: 2rem;
}
#event figcaption h3 span {
background: none;
color: #811B2E;
white-space: nowrap;
margin: 0 !important;
padding: 0;
display: inline;
}
#event figcaption div {
margin: 1rem 0;
}

/* #guest */
#guest::before {
height: 300px;
top: -5rem;
}

/* #arena_gourmet */
#arena_gourmet::before {
top: 0;
}

/* #member */
#member section::after {
display: none;
}
#member p.center {
line-height: 1.6;
}
#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;
}

/* #mascot */
#mascot::before {
height: 110%;
top: -10%;
}

/* #cheer */
#cheer h2::before {
-webkit-text-stroke: 1.5rem #811B2E;
text-stroke: 1.5rem #811B2E;
}
#cheer figcaption p {
line-height: 1.6;
}

/* #arena_mc */
#arena_mc::before {
height: 110%;
}

/* #ticket */
#ticket section::before {
display: none;
}
#ticket dd {
padding: 1rem 2rem;
}
#ticket dd figure {
display: block;
}
#ticket dd figure div {
margin-top: 1rem;
}

/* #access */
#access {
padding: 10rem 0 5rem;
}
#access::before {
top: 0;
}
#access::after {
bottom: -5%;
}

/* footer
------------------------------------------------------------ */
footer ul li a {
margin: 0 .5rem;
}
footer ul li a time {
font-size: 2rem;
}
footer ul li a time::before {
margin-right: .3rem;
}
footer ul li a time small {
font-size: 1rem;
padding-left: .3rem;
}

}