@charset "UTF-8";
/*
Version: 1.0.0
Creation Date: 2025.6.19
Last Updated: 2025.6.20
*/


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


@font-face {
  font-family: 'Bely Display W00 Regular';
  src: url('https://www.89ers.jp/files/user/_/lp/fanclub2025-26/Bely_Display_W00_Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



/* set
------------------------------------------------------------ */
body {
background: #000;
color: #FFF;
}
:hover {
transition: .3s;
}
a:hover img {
opacity: .8;
}
.smd,.smp {
display: none;
}
section a:hover {
color: #000;
text-decoration: underline !important;
}


/* common
------------------------------------------------------------ */
/* layout */
#wrapper {
min-width: auto;
}
article * {
box-sizing: border-box;
font-weight: bold;
}
article {
width: 100%;
position: relative;
}
article section {
width: 1200px;
max-width: 90%;
margin: 0 auto;
padding: 3rem 0 6rem;
}
.w1000 {
width: 1000px;
}
.w800 {
width: 800px;
}
.bg_wht {
background: #FFF;
color: #000;
}
.bg_yel {
background: #E9E611;
color: #000;
}

/* style */
.vwmax img {
width: 100vw;
}
.en {
font-family: 'Bely Display W00 Regular', 'League Gothic', 'Noto Sans Japanese', sans-serif !important;
letter-spacing: normal;
}
p {
font-size: 2rem;
}
.fallback-font {
font-family: 'League Gothic', 'Noto Sans Japanese', sans-serif !important;
}
small {
font-size: 80%;
}
.center {
text-align: center;
}
div.center {
margin-top: 3rem;
}
.title {
background: #E4E4E4;
color: #000;
font-size: 1.8rem;
font-weight: 900;
text-align: center;
padding: 3em 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title .en {
font-size: 5rem;
font-weight: normal;
line-height: 1.2;
text-transform: uppercase;
}
.title .en:after {
content: "";
background: #1A1311;
display: block;
margin: 10px auto;
width: 300px;
height: 5px;
}


/* 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_n_n.png") no-repeat center/contain;
width: 81px;
height: 45px;
display: inline-block;
flex-shrink: 0;
}
#header_logo .site_title {
line-height: 1.2;
display: inline-block;
}
#navi ul {
max-width: 360px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}
#social i {
color: #000;
font-size: 3.5rem;
}
#social i.fa-line,
#social i.fa-tiktok {
font-size: 3rem;
}


/* #merits
------------------------------------------------------------ */
#merits section {
padding-top: 0;
}

/* #niners_lounge
------------------------------------------------------------ */
#niners_lounge div {
margin-top: 3rem;
}

/* #seat_types
------------------------------------------------------------ */
#seat_types section {
padding-top: 6rem;
}
#seat_types .swiper-button-next,
#seat_types .swiper-button-prev {
background: #E9E611;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
z-index: 10;
}
#seat_types .swiper-button-next::after,
#seat_types .swiper-button-prev::after {
color: #FFF;
font-size: 20px;
}
#seat_types .swiper-button-prev {
left: calc(50% - 300px);
}
#seat_types .swiper-button-next {
right: calc(50% - 300px);
}
#seat_types .thumb-swiper {
margin-top: 6rem;
}
#seat_types .thumb-swiper .swiper-slide {
cursor: pointer;
transition: opacity .2s ease, transform .2s ease;
}
#seat_types .thumb-swiper .swiper-slide:hover {
opacity: .7;
transform: scale(1.02);
}
#seat_types .thumb-swiper .swiper-slide img {
width: 100%;
height: 85px;
object-fit: cover;
object-position: top;
}

/* #owner_benefits
------------------------------------------------------------ */
#owner_benefits ol {
counter-reset: item;
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
#owner_benefits ol li {
background: #f5f5f5;
text-align: center;
flex-basis: 48%;
margin-top: 3rem;
border: .4em solid #888;
}
#owner_benefits ol h3 {
background: #888;
color: #FFF;
font-size: 2.8rem;
line-height: 1.2;
font-weight: 900;
padding-bottom: .4em;
position: relative;
}
#owner_benefits ol h3::before {
content: counter(item);
counter-increment: item;
font-family: 'Bely Display W00 Regular', 'League Gothic', 'Noto Sans Japanese', sans-serif !important;
background: #FFF;
color: #333;
font-size: 3.8rem;
line-height: 1;
font-style: italic;
padding: 0 .9em .5em 0;
display: inline-block;
clip-path: polygon(0 0, 100% 0, 0 100%);
shape-outside: polygon(0 0, 100% 0, 0 100%);
position: absolute;
top: 0;
left: 0;
}
#owner_benefits ol p {
color: #000;
font-size: 2rem;
line-height: 1.4;
padding: .4em;
}

/* #corporate_purchase
------------------------------------------------------------ */
#corporate_purchase h3 {
font-size: 2.5rem;
margin: 4rem 0 2rem;
padding-left: 1rem;
border-left: 5px solid #E9E611;
}
#corporate_purchase .box {
background: #FFF;
color: #000;
padding: 3rem;
border-radius: 1rem;
}

/* #info
------------------------------------------------------------ */
#info h3 {
font-size: 2.5rem;
}
#info ul li {
list-style: disc;
font-size: 1.8rem;
margin: .5em;
}

/* .ft_share
------------------------------------------------------------ */
.ft_share i {
font-family: 'Bely Display W00 Regular', 'League Gothic', 'Noto Sans Japanese', sans-serif !important;
color: #E9E611;
font-size: 4.5rem;
}
.ft_share i.fa-line,
.ft_share i.fa-tiktok {
font-size: 4rem;
}

/* .page_top
------------------------------------------------------------ */
.page_top a::before {
content: "";
width: 0;
height: 0;
margin: 0 auto;
display: block;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 30px solid #000;
}

/* #footer
------------------------------------------------------------ */
#footer {
padding-bottom: 68px;
}

/* #sign
------------------------------------------------------------ */
#sign {
background: #000;
text-align: center;
width: 100%;
padding: 15px;
position: fixed;
left: 0;
bottom: 0;
z-index: 1;
}





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

/* set
------------------------------------------------------------ */
html {
font-size: 100%;
}

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

/* common
------------------------------------------------------------ */
/* layout */
article section {
padding: 2.5rem 0 5rem;
}

.smd.smp h3 {
font-size: 2.2rem;
margin-top: .5em;
}
.smd.smp ul {
margin-bottom: 2rem;
}
.smd.smp ul li {
list-style: disc;
font-size: 1.8rem;
margin: .5em;
}
.smd.smp p {
font-size: 1.8rem;
margin-top: .3em;
}


/* header
------------------------------------------------------------ */
#header_logo a {
font-size: 1.3rem;
line-height: 1;
letter-spacing: .08em;
}
#header_logo a:before {
width: 63px;
height: 35px;
margin-right: 10px;
}
#navi {
height: calc(100vh - 50px);
padding: 20px 0;
}
#navi ul {
max-width: 240px;
}
#social ul li {
padding: 5px 0;
}

/* #seat_types
------------------------------------------------------------ */
#seat_types .swiper-button-prev {
left: calc(50% - 250px);
}
#seat_types .swiper-button-next {
right: calc(50% - 250px);
}
#seat_types .thumb-swiper .swiper-slide img {
height: 65px;
}

/* #owner_benefits
------------------------------------------------------------ */
#owner_benefits ol {
display: block;
}

/* #seat_map_and_prices
------------------------------------------------------------ */
#seat_map_and_prices div + div {
margin-top: 2rem;
}

/* .ft_share
------------------------------------------------------------ */
.ft_share li {
margin: 0 3vw;
}

}


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

/* set
------------------------------------------------------------ */
html {
font-size: 50%;
}
.smp {
display: block;
}

/* header
------------------------------------------------------------ */
#header_logo a {
gap: 0;
}
#header_logo .logo {
height: 35px;
}

/* #seat_types
------------------------------------------------------------ */
#seat_types .swiper-button-prev {
left: 0;
}
#seat_types .swiper-button-next {
right: 0;
}
#seat_types .thumb-swiper {
margin-top: 3rem;
}
#seat_types .thumb-swiper .swiper-slide img {
height: 37px;
}

/* #owner_benefits
------------------------------------------------------------ */
#owner_benefits ol h3 {
font-size: 2rem;
}
#owner_benefits ol h3::before {
font-size: 3rem;
}
#owner_benefits ol p {
font-size: 1.8rem;
}
#owner_benefits ol p small {
display: block;
}
#owner_benefits ol p br {
display: none;
}


/* #sign
------------------------------------------------------------ */
#sign div img {
width: auto;
height: 30px;
}

}