@charset "UTF-8";
/*
Version: 1.2.0
Creation Date: 2022.9.5
Last Updated: 2025.12.8
*/


/* import
------------------------------------------------------------ */
@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
@import "https://use.typekit.net/nyp2jee.css";
@import "https://use.typekit.net/oyf4pyu.css";


/* common
------------------------------------------------------------ */
/* font */
.en { /* Bely Display Regular */
font-family: bely-display, sans-serif;
font-weight: 400;
}
.gibson { /* Gibson */
font-family: canada-type-gibson, sans-serif;
font-weight: 400;
}

/* layout */
article * {
font-size: 1.8rem;
font-weight: bold;
box-sizing: border-box;
}
article {
width: 100%;
position: relative;
}
article section {
width: 1100px;
max-width: 90%;
margin: 0 auto;
padding: 60px 0;
}

/* Overwrite */
body {
width: 100%;
overflow: hidden;
}
.match_bottom .date span,
.sec_title,
.time_inner h3 span,
.cv_inner .date {
font-family: bely-display, sans-serif;
font-weight: 400;
}
.time_inner h3 {
font-family: 'League Gothic';
}
.cv_inner .date font small {
font-size: 3.2rem;
padding: 0 .1em;
}
.match_bottom .date {
letter-spacing: normal;
}
.match_bottom .date font,
.cv_inner .date font {
font-family: canada-type-gibson, sans-serif;
font-size: 70%;
}
.match_bottom .date font small {
font-size: 3.6rem;
padding: 0 .1em;
}
.time_box span {
font-size: 80%;
}
#navi li a,
.cv_day,
.cv_day01,
.match_day,
.match_day01,
.time_day,
.time_day01,
.sec_title,
.col,
.staduim_title,
.ft_share {
color: #E9E611;
}
#access_info h2 {
color: #FFF;
}
.cv_day02,
.place span,
.match_day02,
.time_day02,
.staduim_wrap h2,
.page_top a {
background: #E9E611;
}
#social ul {
background:rgba(233,230,17,0.90);
}
.col {
background: #000 url("img/icon_close.svg") no-repeat right 30px center/20px;
}
.col.change {
background: #000 url("img/icon_open.svg") no-repeat right 30px center/20px;
}
.access_inner h3 span {
border-bottom: 5px solid #E9E611;
}

/* style */
.flex {
display: flex;
}
.vwmax img {
width: 100vw;
}
small {
font-size: 80%;
}
sup {
vertical-align: super;
font-size: 80%;
padding: .2rem;
}
.sec_title {
font-size: min(4rem, 6vw);
}
.sec_title span {
font-family: 'Noto Sans Japanese', sans-serif;
font-size: min(2rem, 3vw);
}
.date_b span {
font-family: 'Noto Sans Japanese', sans-serif;
}

/* background */
.bg_se {
background: #E9E611;
color: #000;
}
.bg_an {
background: #E40073;
}


/* #wrapper
------------------------------------------------------------ */
#wrapper {
background: #000;
color: #FFF;
}

/* header
------------------------------------------------------------ */
#header_logo a {
color: #E9E611;
font-size: 2rem;
line-height: 1.2;
letter-spacing: .1em;
display: flex;
align-items: center;
gap: 20px;
}
#header_logo .logo {
content: "";
background: url("img/logo.svg") no-repeat center/contain;
width: 80px;
height: 50px;
display: inline-block;
flex-shrink: 0;
}
#header_logo .site_title {
line-height: 1.2;
display: inline-block;
}
#header_logo .site_title br {
display: none;
}
.btn_menu {
background: url("img/menu_open.svg") center center no-repeat;
}
.btn_menu.active {
background: url("img/menu_close.svg") center center no-repeat;
}
#navi li a span.jp {
background: url("img/icon_nav.svg")no-repeat left center;
}
#social button {
background: url("img/sns_open.svg") center center no-repeat;
}
#social button.active {
background: url("img/sns_close.svg") center center no-repeat;
}
#social i {
color: #000;
font-size: 3.5rem;
}
#social i.fa-line,
#social i.fa-tiktok {
font-size: 3rem;
}

.btn_menu {
right: 0;
}

/* #schedule
------------------------------------------------------------ */
#schedule section {
width: 1300px;
}
#schedule ul {
gap: 3rem;
}
#schedule li {
flex-basis: calc(100% / 3);
}
#schedule li h3 {
margin-bottom: 1rem;
}
#schedule li p {
font-size: 2.4rem;
text-align: center;
margin-top: 2rem;
padding: 0 2rem;
}
#schedule li div {
margin-top: 2rem;
}

/* #about
------------------------------------------------------------ */
#about p {
font-family: serif;
font-size: 2rem;
line-height: 2.2;
text-align: center;
margin-bottom: 4rem;
}

/* #roster
------------------------------------------------------------ */
#roster .main_slider figure {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#roster .main_slider figure > div {
flex-basis:	45%;
}
#roster .main_slider figcaption {
flex-basis:	45%;
}
#roster .main_slider figcaption h3 {
font-size: 2.4rem;
}
#roster .main_slider figcaption h3 + p {
font-family: 'SENDAI89ERSFONT-Regular','League Gothic';
padding: 10px 0 20px;
}
#roster .main_slider figcaption h3 + p small {
font-size: 70%;
}
#roster .main_slider figcaption p + p {
font-size: 1.6rem;
line-height: 2;
}

#roster .thumbnail_slider .slick-track {
width: 100% !important;
display: flex !important;
flex-wrap: wrap;
transform: unset !important;
}
#roster .thumbnail_slider .slick-slide {
width: 12% !important;
margin: 10px 1%;
}
#roster .thumbnail_slider .slick-current img {
opacity: 1;
}
#roster .thumbnail_slider figure {
transition: opacity .3s linear;
}
#roster .thumbnail_slider figure div {
position: relative;
}
#roster .thumbnail_slider figure div:before {
content: "";
background: #000;
opacity: .6;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#roster .thumbnail_slider .slick-current figure div:before,
#roster .thumbnail_slider figure:hover div:before {
opacity: 0;
cursor: pointer;
}
#roster .thumbnail_slider figcaption {
font-size: 1.4rem;
text-align: center;
padding: 5px;
}

#roster .slick-dots {
width: 100%;
display: flex;
justify-content: center;
bottom: -50px;
}
#roster .slick-dots li {
margin: 0 5px;
}
#roster .slick-dots li button:before {
background: #FFF;
width: 10px;
height: 10px;
}
#roster .slick-dots li button:hover:before,
#roster .slick-dots li.slick-active button:before {
background: #000;
}

#roster .slick-prev,
#roster .slick-next {
background: none;
position: absolute;
z-index: 3;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#roster .slick-next {
left: auto;
right: 0;
}
#roster .slick-prev:after,
#roster .slick-next:after {
content: "";
width: 14px;
height: 14px;
border-top: 2px solid #000;
border-right: 2px solid #000;
position: absolute;
top: 0;
right: -30px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#roster .slick-prev:after {
right: auto;
left: -30px;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}

#roster .bg_an .slick-prev:after,
#roster .bg_an .slick-next:after {
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
}

/* #results
------------------------------------------------------------ */
#results {
text-align: center;
}
#results div.flex > div {
flex-basis: 50%;
}
#results .bg_an  {
text-align: right;
}
#results .bg_se  {
text-align: left;
}
#results div.flex > div > div {
text-align: center;
padding: 6rem;
display: inline-block;
}
#results div.flex p {
font-size: 7rem;
margin-top: 2rem;
}
#results div.flex p small {
font-size: 3rem;
}
#results .bg_grade {
background: radial-gradient(circle, #e9e611, #000 100%);
}
#results .bg_grade p {
color: #000;
font-size: 2.4rem;
line-height: 2;
text-align: left;
padding: 6rem 10% 8rem;
display: inline-block;
}

/* #photos
------------------------------------------------------------ */

/* swiper
------------------------------------------------------------ */
.swiper {
width: 1080px;
max-width: 98%;
padding: 60px 0;
}
.swiper-button {
position: relative;
}
.swiper-container {
width: 1000px;
max-width: calc(100% - 60px);
margin: 40px auto 50px;
}
.swiper-wrapper {
display: flex;
}
.swiper-slide {
height: auto;
}
.swiper-slide p {
font-size: 1.6rem;
padding: 1rem 0;
}
.swiper-button-prev,
.swiper-button-next {
background: rgba(255,255,255,1);
width: 28px;
height: 28px;
border-radius: 50%;
z-index: 1;
overflow: hidden;
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background: rgba(255,255,255,.7);
transition: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
content: "";
border-top: solid 7px transparent;
border-right: solid 10px transparent;
border-bottom: solid 7px transparent;
border-left: solid 10px #000;
position: absolute;
top: 7px;
right: -2px;
}
.swiper-button-prev:after {
border-top: solid 7px transparent;
border-right: solid 10px #000;
border-bottom: solid 7px transparent;
border-left: solid 10px transparent;
right: auto;
left: -2px;
	}
.swiper-slide-prev,
.swiper-slide-next + .swiper-slide +  .swiper-slide {
opacity: 0;
transition: 2s;
}

/* #pickup
------------------------------------------------------------ */
#pickup figure {
max-width: 1000px;
margin: 0 auto 3rem;
}
#pickup figure > div {
margin-bottom: 4rem;
box-shadow: 10px 10px 0 #E9E611;
}
#pickup figure h3 {
background: #E9E611;
color: #000;
font-size: 2.4rem;
padding: .5em 1em;
position: relative;
}
#pickup figure h3::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}
#pickup figcaption {
padding: 4rem;
}
#pickup figcaption h4 {
font-size: 2rem;
color: #E9E611;
margin: 3rem 0 1rem;
}
#pickup figcaption p {
margin-top: 1rem;
}

/* #arena
------------------------------------------------------------ */
#arena div.flex > div {
flex-basis: 50%;
padding: 6rem;
}
#arena div.flex > div div {
___max-width: 60%;
margin: 4rem auto;
}
#arena div.flex > div figure {
margin-bottom: 4rem;
}
#arena div.flex > div h3 {
font-size: 2.2rem;
margin-bottom: 1rem;
display: inline-block;
border-bottom: double 3px;
}
#arena div.flex > div address {
font-size: 2rem;
margin-bottom: 1rem;
}
#arena div.flex > div h4 {
margin-bottom: .5rem;
}
#arena div.flex > div p {
font-size: 1.6rem;
}

/* .ft_share
------------------------------------------------------------ */
.ft_share i {
color: #E9E611;
font-size: 4.5rem;
}
.ft_share i.fa-line,
.ft_share i.fa-tiktok {
font-size: 4rem;
}

#ft_share {
display: flex;
}
#ft_share .ft_share {
flex-basis: 50%;
}
#akita.ft_share {
background: #FFF;
}
#akita.ft_share,
#akita.ft_share i {
color: #E40073;
}

/* #pagetop
------------------------------------------------------------ */
#pagetop {
position: fixed;
right: 0;
bottom: 0;
z-index: 101;
}
#pagetop a {
background: #000;
width: 80px;
height: 80px;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#pagetop a::before {
content: "";
width: 20px;
height: 20px;
margin: 0 auto;
display: block;
border-top: 2px solid #E9E611;
border-right: 2px solid #E9E611;
transform: rotate(-45deg);
position: absolute;
top: 35px;
right: 30px;
}





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

/* common
------------------------------------------------------------ */
/* layout */
article section {
padding: 30px 0;
}

/* Overwrite */
.staduim_wrap h2,
#access_info h2,
#xebio_area h2 {
font-size: 4vw;
}
#navi {
height: calc(100vh - 50px);
padding: 10px 0;
}
.time_day, .time_day01, .time_day02 {
padding: 9vw 0 15vw;
}
.time_box dt {
width: 16vw;
}

/* style */
.vwmax img {
width: 100%;
}

/* header
------------------------------------------------------------ */
#header_logo a {
font-size: 1.2rem;
line-height: 1;
letter-spacing: .08em;
gap: 10px;
}
#header_logo .logo {
width: 56px;
height: 35px;
}
#header_logo .site_title br {
display: block;
}
#navi {
height: calc(100vh - 50px);
padding: 20px 0;
}
#navi ul {
max-width: 240px;
}
#social ul li {
padding: 5px 0;
}

/* #roster
------------------------------------------------------------ */
#roster .main_slider figure {
display: block;
padding-bottom: 30px;
}
#roster .main_slider figure > div {
max-width: 80%;
margin: 0 auto 10px;
}
#roster .main_slider figcaption h3 {
font-size: 1.8rem;
}
#roster .main_slider figcaption h3 + p {
font-size: 1.6rem;
padding: 0 0 10px;
}
#roster .main_slider figcaption p + p {
font-size: 1.4rem;
line-height: 1.5;
}
#roster .thumbnail_slider .slick-slide {
width: 23% !important;
}
#roster .slick-dots {
bottom: 0;
}
#roster .slick-prev:after,
#roster .slick-next:after {
right: 0;
}
#roster .slick-prev:after {
left: 0;
}

/* .cvWrap
------------------------------------------------------------ */
.cvWrap {
height: 60px;
}
.cv_inner {
height: 60px;
}
.cv_day01,
.cv_day02 {
display: flex;
align-items: center;
}
.cv_inner .date {
font-size: 5vw;
}
.cv_inner .date font small {
font-size: 1.4rem;
}
.cv_inner .ticket img {
height: 8vw;
}

/* .ft_share
------------------------------------------------------------ */
.ft_share ul {
padding: 0 20px;
}
.ft_share li {
margin: 0 5px;
}
.ft_share i {
color: #E9E611;
font-size: 3.5rem;
}
.ft_share i.fa-line, .ft_share i.fa-tiktok {
font-size: 3.2rem;
}

/* #pagetop
------------------------------------------------------------ */
#pagetop {
___bottom: 60px;
bottom: 0;
}
#pagetop a {
width: 50px;
height: 50px;
}
#pagetop a::before {
width: 15px;
height: 15px;
top: 23px;
right: 17px;
}

}


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

/* set
------------------------------------------------------------ */
.smp-none {
display: none;
}

/* #schedule
------------------------------------------------------------ */
#schedule ul {
flex-direction: column;
}

/* #about
------------------------------------------------------------ */
#about p {
font-size: 1.6rem;
letter-spacing: -.08em;
}

/* #results
------------------------------------------------------------ */
#results div.flex > div > div {
padding: 2rem;
}
#results div.flex p {
font-size: 5rem;
}
#results div.flex p small {
font-size: 2rem;
}
#results .bg_grade {
background: radial-gradient(circle, #e9e611 80%, #000 100%);
}
#results .bg_grade p {
font-size: 2rem;
padding: 3rem 10% 6rem;
}

/* swiper
------------------------------------------------------------ */
.swiper {
padding: 30px 0;
}

/* #pickup
------------------------------------------------------------ */
#pickup figure > div {
margin-bottom: 2rem;
box-shadow: 5px 5px 0 #E9E611;
}
#pickup figcaption {
padding: 2rem;
}
#pickup figcaption p {
font-size: 1.6rem;
}

/* #arena
------------------------------------------------------------ */
#arena div.flex {
___flex-direction: column-reverse;
flex-direction: column;
}
#arena div.flex > div {
flex-basis: 100%;
padding: 4rem 2rem 6rem;
}
#arena div.flex > div h3 {
font-size: 2rem;
}
#arena div.flex > div address {
font-size: 1.8rem;
}
#arena div.flex > div p {
font-size: 1.4rem;
}

}