@charset "UTF-8";
/*
Version: 3.0.0
Creation Date: 2025.8.17
Last Updated: 2025.8.27
*/


/* import
------------------------------------------------------------ */
@import "https://cdn.jsdelivr.net/gh/amcosand/shared@main/2025.1.css";
@import "https://cdn.jsdelivr.net/gh/amcosand/shared/fonts/KintoSans/KintoSans.css";
@import "https://use.typekit.net/xqm3ivt.css";
@import "https://use.typekit.net/csv3sqi.css";
@font-face {
font-family: "RDN";
src: url(font/Raiden-Regular.otf);
}
@font-face {
font-family: "RDN-ilc";
src: url(font/Raiden-Italic.otf);
}


/* set
------------------------------------------------------------ */
:root {
--font-base: 'Kinto Sans', sans-serif;
--font-en: 'sheepman', serif;
--color-primary: #00441B;
--color-secondary: #BFA666;
}
* {
font-style: normal;
}
body {
font-size: 1.8rem;
line-height: 1.5;
}


/* common
------------------------------------------------------------ */
/* font */
.RDN { /* Raiden Regular */
font-family: "RDN", serif;
font-weight: normal;
letter-spacing: .05em;
}
.RDN-ilc { /* Raiden Italic */
font-family: "RDN-ilc", serif;
font-weight: normal;
letter-spacing: .05em;
}
.SPM { /* Sheepman Regular */
font-family: var(--font-en);
font-weight: 400;
letter-spacing: .05em;
}
.SPM-ilc { /* Sheepman Regular Slanted */
font-family: var(--font-en);
font-weight: 400;
font-style: italic;
}
.KCB { /* Korolev Condensed Bold */
font-family: korolev-condensed, var(--font-base);
font-weight: 700;
}
.KNT { /* Kinto Sans */
font-family: var(--font-base);
font-weight: 700;
}
.f35 {
font-size: clamp(3rem, 2.56vw, 3.5rem);
}
.f88 {
font-size: clamp(6rem, 6.44vw, 8.8rem);
}

/* layout */
section {
width: 80%;
z-index: 1;
}

/* style */
.box {
padding: 3vw;
border: .73vw solid var(--color-secondary);
border-radius: 2.2vw;
}
.disc li {
margin-bottom: 3rem;
padding-left: 1em;
position: relative;
}
.disc li::before {
content: "・";
position: absolute;
top: 0;
left: 0;
}
.desk {
padding: 1em 1.5em;
display: inline-block;
border: 3px double var(--color-primary);
}

/* color */
.grn {
color: var(--color-primary);
}
.gld {
color: var(--color-secondary);
}
.red {
color: #d61518;
}

/* hover */
.hvr a {
text-decoration: underline;
}
.hvr a:hover {
text-decoration: none;
}

/* background */
.bg_grn {
background: var(--color-primary);
color: var(--color-secondary);
}
.bg_wht {
color: var(--color-text);
}

/* Swiper */
.swiper.loop .swiper-wrapper {
transition-timing-function: linear !important;
}


/* header
------------------------------------------------------------ */
header {
width: 100%;
height: 70px;
position: fixed;
top: 0;
left: 0;
z-index: 3;
}
header h1 {
max-width: calc(100% - 140px);
height: 100%;
display: flex;
align-items: center;
}
#menu {
background: url("img/menu.svg") no-repeat;
right: 70px;
}
#menu.open {
background: url("img/menu_close.svg") no-repeat;
}
#share .btn {
background: url("img/share.svg") no-repeat;
right: 0;
}
#share .btn.open {
background: url("img/share_close.svg") no-repeat;
}
.btn {
background-size: contain !important;
position: absolute;
top: 0;
width: 70px;
height: 70px;
text-indent: -9999px;
cursor: pointer;
}
nav {
display: none;
background: rgba(0,68,27,.95);
width: 100%;
height: calc(100svh - 150px);
position: absolute;
top: 100%;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
nav ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
nav ul li a {
padding: 1em 0;
display: block;
}
#share ul {
display: none;
background: rgba(191,166,102,.9);
width: 70px;
position: absolute;
top: 100%;
right: 0;
}


/* main
------------------------------------------------------------ */
/* #kv */
#kv {
border-bottom: 1.46vw solid var(--color-secondary);
}

/* #point */
#point {
background: url("img/point_bg.jpg") no-repeat center/cover;
}
#point section {
width: 90%;
}
#point h2 img {
max-width: 45.39vw;
}
#point .swiper {
width: 88.7%;
margin: 0 auto;
}
#point .swiper-nav {
position: relative;
}
#point .swiper-nav::before {
content: "";
background: url("img/player_01.png") no-repeat top/contain;
width: 17.56vw;
aspect-ratio: 240 / 520;
position: absolute;
top: -20vw;
left: 4vw;
z-index: -1;
}
#point .swiper-prev,
#point .swiper-next {
width: clamp(30px, 5vw, 50px);
cursor: pointer;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#point .swiper-next {
left: auto;
right: 0;
}
#point .swiper-pagination {
display: flex;
justify-content: center;
position: static;
gap: clamp(1rem, 1.68vw, 2.3rem);
}
#point .swiper-pagination-bullet {
background: #FFF;
font-size: clamp(1.5rem, 2.2vw, 3rem);
color: var(--color-secondary);
width: clamp(3rem, 3.3vw, 4.5rem);
height: clamp(3rem, 3.3vw, 4.5rem);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: clamp(.2rem, .2vw, .3rem) solid var(--color-secondary);
border-radius: 50%;
opacity: 1;
cursor: pointer;
transition: all .3s;
}
#point .swiper-pagination-bullet-active {
background: var(--color-secondary);
color: var(--color-primary);
}

/* #benefits */
#benefits {
background: url("img/benefits_bg.jpg") no-repeat center/cover;
}
#benefits section::before {
content: "";
background: url("img/player_02.png") no-repeat top/contain;
width: 19.76vw;
aspect-ratio: 270 / 460;
position: absolute;
top: -8vw;
right: 0;
z-index: -1;
}
#benefits h2 img {
max-width: 38.94vw;
}

/* #tickets */
#tickets h2 img {
max-width: 28.55vw;
}
#tickets article.bg_grn::before {
content: "";
background: url("img/player_03.png") no-repeat top/contain;
width: 24.89vw;
aspect-ratio: 340 / 380;
position: absolute;
top: -20vw;
right: 3vw;
}
#tickets ul.col-2 li {
flex-basis: 49%;
margin-bottom: 2%;
}

#tickets .tab-group {
margin: 6rem auto;
display: flex;
justify-content: center;
}
#tickets .tab-group .tab {
flex: 1;
background: #FFF;
color: var(--color-primary);
font-size: 2.2rem;
font-weight: 700;
text-align: center;
padding: 1.3rem;
border: 1px solid var(--color-primary);
position: relative;
}
#tickets .tab-group .tab.is-active {
background: var(--color-primary);
color: #FFF;
}
#tickets .tab-group .tab::after {
content: "";
border-top: 16px solid var(--color-primary);
border-right: 11px solid transparent;
border-left: 11px solid transparent;
position: absolute;
left: 50%;
bottom: -16px;
transform: translateX(-50%);
}

#tickets .panel-group figcaption {
display: flex;
justify-content: space-between;
}

#tickets .sub-panel-group {
flex-basis: 58%;
margin: 5rem 0;
}
#tickets .sub-panel-group .panel h4 {
font-size: 2.7rem;
margin: 1.5rem 0;
padding: .25em 1em;
border-radius: 0 2rem 0 0;
}
#tickets .sub-panel-group .panel p {
margin: 1.2rem 0;
}
#tickets .sub-panel-group .panel small {
margin: 1rem 0;
display: block;
}
#tickets .sub-panel-group .panel dl {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .8rem;
}
#tickets .sub-panel-group .panel dt {
background: var(--color-primary);
color: #FFF;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: .02em;
padding: .15em 1em;
}
#tickets .sub-panel-group .panel dd {
color: var(--color-primary);
font-size: 3.6rem;
font-weight: 700;
}
#tickets .sub-panel-group .panel dd em {
font-size: 5rem;
letter-spacing: .06em;
padding-right: .5em;
}

#tickets .sub-tab-group {
flex-basis: 38%;
margin: 3rem 0;
}
#tickets .sub-tab-group::before {
content: "※ボタンクリックでシート情報が切り替わります";
font-size: 1.5rem;
display: block;
}
#tickets .sub-tab-group .tab {
font-size: 2.2rem;
letter-spacing: .02em;
margin: 1.5rem 0;
padding: .25em 1em;
border-radius: 100vh;
}
.word-long_ {
display: inline-block;
transform-origin: left center;
transform: scaleX(0.5);
width: 100%;
background: red;
}
.sub-tab-group .tab.is-active {
box-shadow: inset 0 0 0 2px #FFF;
}
.seat-1 { background: #d0346f; color: #FFF; }
.seat-2 { background: #e4841d; color: #FFF; }
.seat-2-v2 { background: linear-gradient(135deg, #e4841d 50%, #872b7a 50%); color: #FFF; }
.seat-3 { background: #0f98ad; color: #FFF; }
.seat-4 { background: #9b5230; color: #FFF; }
.seat-4-v2 { background: linear-gradient(135deg, #66aa65 50%, #ca9112 50%); color: #FFF; }
.seat-5 { background: #872b7a; color: #FFF; }
.seat-6 { background: #f7e03b; color: var(--color-text); }
.seat-7 { background: #ecbdc6; color: var(--color-text); }
.seat-8 { background: #4ca6dc; color: #FFF; }
.seat-9 { background: #FFF; color: var(--color-text); border: 1px solid var(--color-text);}

/* #application */
#application {
margin-top: -1px;
}
#application h2 img {
max-width: 30vw;
}
#application section::before {
content: "";
background: url("img/player_04.png") no-repeat top/contain;
width: 24.16vw;
aspect-ratio: 330 / 460;
position: absolute;
top: -5vw;
left: 0;
z-index: -1;
}
#application .box {
background: var(--color-primary);
background: #e6ebe8;
margin-top: 3.66vw;
padding: 0;
border: 1px solid #FFF;
border-radius: 0;
}
#application .box h3 {
background: var(--color-primary);
padding: .2vw;
}
#application .box dl {
padding: 2.2vw;
position: relative;
}
#application .box dl::before {
content: "";
background: url("img/silhouette.svg") no-repeat center/contain;
width: 8.78vw;
aspect-ratio: 120 / 160;
position: absolute;
top: 50%;
right: 2.2vw;
transform: translateY(-50%);
}
#application .box dl dt {
padding: 0 2vw;
}
#application .box dl dd {
padding: 0 2vw;
border-left: 2px solid var(--color-primary);
}
#application .box p {
background: var(--color-primary);
padding: 1rem 2rem;
}

/* #precautions */
#precautions {
background: url("img/precautions_bg.jpg") no-repeat center/cover;
}
#precautions h2 img {
max-width: 25.76vw;
}
#precautions section::before {
content: "";
background: url("img/player_05.png") no-repeat top/contain;
width: 16.11vw;
aspect-ratio: 220 / 350;
position: absolute;
top: -10vw;
right: 0;
z-index: -1;
}

/* #faq */
#faq dl {
width: 80.6%;
margin: 0 auto;
}
#faq dl a {
text-decoration: underline;
}
#faq dl a:hover {
text-decoration: none;
}
#faq dl dt,
#faq dl dd {
background: #FFF;
color: var(--color-primary);
margin-top: clamp(1.5rem, 2.2vw, 3rem);
padding: 1.1em 3em 1.1em 5em;
position: relative;
cursor: pointer;
}
#faq dl dt::before,
#faq dl dd::before {
content: "Q";
background: var(--color-secondary);
font-family: "RDN", serif;
font-size: 4rem;
font-weight: normal;
width: 1.6em;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
}
#faq dl dd::before {
content: "A";
background: #FFF;
color: var(--color-primary);
}
#faq dl dt::after {
content: "＋";
font-size: 3rem;
font-weight: 400;
position: absolute;
top: 50%;
right: .5em;
transform: translateY(-50%);
}
#faq dl dt.open::after {
content: "ー";
}
#faq dl dd {
display: none;
background: var(--color-secondary);
color: #FFF;
font-weight: 500;
margin-top: 0;
}


/* footer
------------------------------------------------------------ */
footer .mascot img {
max-width: 20vw;
}
footer h1 img {
width: clamp(25rem, 31vw, 42.5rem);
}
footer li {
width: clamp(5rem, 6vw, 6rem);
margin: 0 .5em;
}

/* #pagetop */
#pagetop a {
background: var(--color-secondary);
}
#pagetop a::before {
border-top: 3px solid var(--color-primary);
border-right: 3px solid var(--color-primary);
right: 19px;
}

/* #ticket */
#ticket {
display: none;
position: fixed;
right: 1em;
bottom: 1em;
z-index: 1;
}
#ticket img {
width: clamp(8rem, 12vw, 12vw);
}





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

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

/* main
------------------------------------------------------------ */
/* #point */
#point section {
width: 98%;
}

/* #faq */
#faq dl {
width: 90%;
}

}


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

/* main
------------------------------------------------------------ */
main h2 img {
max-width: 50% !important;
}

/* #tickets */
#tickets .panel-group figcaption {
flex-direction: column;
}
#tickets .sub-panel-group {
margin: 0;
}
#tickets .sub-tab-group {
order: -1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
align-items: start;
width: 100%;
}
#tickets .sub-tab-group::before {
grid-column: 1 / -1;
}
#tickets .sub-tab-group .tab {
margin: 0;
}

}


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

/* common
------------------------------------------------------------ */
/* style */
.box {
padding: 6vw 3vw;
}
.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;
}

/* header
------------------------------------------------------------ */
header {
height: 50px;
}
header h1 {
max-width: calc(100% - 100px);
}
#menu {
right: 50px;
}
.btn {
width: 50px;
height: 50px;
}
nav {
height: calc(100svh - 110px);
}
#share ul {
width: 50px;
}

/* main
------------------------------------------------------------ */
main h2 img {
max-width: 80% !important;
}

/* #point */
#point .swiper-nav::before {
display: none;
}

/* #benefits */
#benefits section::before {
top: -25vw;
}

/* #tickets */
#tickets article.bg_grn::before {
top: -15vw;
}

#tickets .tab-group {
margin: 6rem auto 2rem;
}
#tickets .tab-group .tab {
font-size: 1.6rem;
font-weight: 500;
padding: .3rem;
display: flex;
align-items: center;
justify-content: center;
}
#tickets .tab-group .tab::after {
border-top: 10px solid var(--color-primary);
border-right: 8px solid transparent;
border-left: 8px solid transparent;
bottom: -10px;
}
#tickets .sub-panel-group .panel h4 {
font-size: 2rem;
margin: .5rem 0;
border-radius: 0 1rem 0 0;
}
#tickets .sub-panel-group .panel dt {
font-size: 1.2rem;
letter-spacing: 0;
padding: .15em .5em;
}
#tickets .sub-panel-group .panel dd {
font-size: 2rem;
}
#tickets .sub-panel-group .panel dd em {
font-size: 3.8rem;
letter-spacing: .03em;
padding-right: .3em;
}
#tickets .sub-tab-group {
margin: 2rem 0;
}
#tickets .sub-tab-group::before {
text-align: center;
}
#tickets .sub-tab-group .tab {
font-size: 1.4rem;
letter-spacing: 0;
padding: .5em 1em;
}

/* #application */
#application section::before {
display: none;
}
#application .box dl::before {
width: 15vw;
top: 10%;
transform: translateY(0);
}
#application .box dl dd {
padding: 2vw;
border-left: none;
border-top: 2px solid var(--color-primary);
}

/* #faq */
#faq dl {
width: 100%;
}

/* footer
------------------------------------------------------------ */
/* #pagetop */
#pagetop a {
width: 50px;
height: 50px;
}
#pagetop a::before {
width: 15px;
height: 15px;
border-top: 2px solid var(--color-primary);
border-right: 2px solid var(--color-primary);
top: 21px;
right: 16px;
}

}