@charset "utf-8";
:root{
	--color-base: #231815;
	--color-gold:#BF9F4B;
	--font-size-base: min(3.7vw, 14px);
	--line-height-base: 1.6;/*ベースの行間*/
	/*カラー*/
	--color-logo1: #0A1A32;
	--color-logo2: #BF9F4B;
	--color-text: #231815;
	/*フォントサイズ*/
	--font-size-base: min(3.7vw, 14px);/*  14px */
	--font-size-l: min(4.23vw, 16px); /*   16px */
	--font-size-xl: min(4.76vw, 18px);/*  18px */
	/*隙間*/
	--spacing-xs: 5px;
	--spacing-s: 10px;
	--spacing-m: 15px;
	--spacing-l: 20px;
	--spacing-xl: 30px;
	--spacing-xxl: 40px;
}
html {
	/* height: 100%; */
}
html:has(#policy) {
	height: 100%;
}
html,body {
	width: 100%;
}

.textRight {
	text-align: right;
}
.textCenter {
	text-align:center;
}
.serif {
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-style: normal;
}
body {
	color:var(--color-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	background-color:#fff;
	font-family: "Noto Sans Jp", sans-serif;
	font-weight: 500;
	font-style: normal;
	overflow-y: scroll;
	overflow-x: hidden;
}

body#policy,
body#terms {
	height: 100%;
}
img {
	/* width:100%; */
	max-width: 100%;
}
a {
	
}
li {

}
p {
	color: var(--color-base);
}
.dark p {
	color: #fff;
}

input {
	appearance: auto;
}

/* general */
.right {
	text-align: right;
}
.relative {
	position: relative;
}
.mbSpace {
	margin-bottom: 50px;
}
nav:has(.globalNavi) {
	display: none;
}
nav:has(.globalNavi.active) {
	display: block;
	background: #fff;
	width: 468px;
	position: fixed;
	top: max(3.6vw,56px);
	z-index: 30;
}
@media screen and (max-width:787px) {
	nav:has(.globalNavi.active) {
		width: 100vw;
		height: 100dvh;
		top: 0;
	}
}
.menuLogo {
	text-align: center;
	width: 40%;
	margin: 60px auto;
}
.globalNavi a {
	color: var(--color-logo1);
	text-decoration: none;
	padding: 20px 0;
	border-top: 1px solid var(--color-logo1);
	display: inline-block;
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
}
/* .globalNavi li {
	border-bottom: 1px solid var(--color-logo1);
} */
.globalNavi + div {
	padding: 20px;
	background: var(--color-logo1);
}
.globalNavi + div a {
	color: #fff;
	text-decoration: none;
}
.globalNavi + div ul {
	width: fit-content;
	margin: 0 auto;
}
.globalNavi + div ul li {
	padding: 10px 0;
}

/* toggle */
#toggle {
	width: 26px;
	height: 20px;
	position: fixed;
	top: max(4.6vw,76px);
	z-index: 40;
	margin-left: 420px;
	cursor: pointer;
}
@media screen and (max-width:787px) {
	#toggle {
		width: 26px;
		height: 20px;
		position: fixed;
		top: 30px;
		z-index: 31;
		margin-left: 88vw;
	}
}
#toggle span{
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	height: 3px;
	transition: .3s;
	background: var(--color-base);
}
#toggle span:first-of-type{
	top: 0px;
	background: var(--color-gold);
}
#toggle span:last-of-type{
	top: 17px;
	background: var(--color-gold);
}
#toggle.active span {
	opacity: 0;
	background: var(--color-base);
}
#toggle.active span:first-of-type{
	top: 0;
	opacity: 1;
	transform: rotate(45deg);
}
#toggle.active span:last-of-type{
	top: 0;
	opacity: 1;
	transform: rotate(-45deg);
}
#toggle .btnMenu {
	margin-top: 20px;
	font-size: 9.5px;
}
#a1,
#a2,
#a3,
#a4 {
	padding-top: 100px;
	margin-top: -150px;
	display: inline-block;
}



.mainVisual {
	/* height: 80svh; */
	/* position: fixed; */
	padding-bottom: 60px;
	position: relative;
	top: 60px;
	margin: 0 auto;
	width: 90%;
	/* z-index: -1; */
	/* left: 50%;
	transform: translateX(-50%); */
}

.read.target,
.title.target,
.period.target,
.scroll.target {
	transition: 1s;
}
.read.target.sticky,
.period.target.sticky,
.scroll.target.sticky {
	opacity: 0;
}
.title.target.sticky {
	opacity: .2;
}
.scrollWrap {
	position: relative;
	z-index: 1;
	/* padding-bottom: 10svh; */
}
.light {
	background: rgba(255, 255, 255, 1);
	padding: 3vh 15px 0;
	/* box-shadow: 0 -28px 13px -13px rgba(255, 255, 255, 0.8); */
}
.dark {
	background: rgba(0, 0, 0, 1);
	padding: 3vh 15px;
	color: #fff;
}
/* #teaser .scrollArea .newsArea,
#teaser .scrollArea .about,
#teaser .scrollArea .discount {
	min-height: 70svh;
} */
/* title */
.titleA {
	font-size: 28px;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	padding: 0 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	line-height: 1;
}
@media screen and (max-width:787px) {
	.titleA {
		font-size: 18px;
		line-height: 1;
	}
}
.titleA span {	
	font-family: "Noto Sans Jp", sans-serif;
	font-size: 12px;
	padding: 0 5px;
	color: #fff;
	background: var(--color-gold);
	border-radius: 100vmax;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20px;
	font-weight: 400;
	width: 95px;
	line-height: 1;
}
.titleB {
	background: var(--color-gold);
	text-shadow: 1px 1px 8px #808080;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	width: 345px;
	height: 58px;
	margin: 0 auto 20px;
	position: relative;
}
.titleB:before {
	content: "";
	display: inline-block;
	background-image: linear-gradient(to top, #fff 9px, transparent 0px);
	background-size: 30px 14px;
	background-repeat: repeat-y;
	background-position: left bottom;
	width: 10px;
	height: 90%;
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
}
.titleB:after {
	content: "";
	display: inline-block;
	background-image: linear-gradient(to top, #fff 9px, transparent 0px);
	background-size: 30px 14px;
	background-repeat: repeat-y;
	background-position: left bottom;
	width: 10px;
	height: 90%;
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
}
.titleC {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}
.titleD {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
}
.titleD:before {
	content: "■";
	/* color: var(--color-gold); */
}
.titleE {
	font-size: 18px;
	font-weight: 700;
}
.titleF {
	background: var(--color-base);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	height: 50px;
	margin-bottom: 30px;
}
.titleG {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
}
.titleH {
	font-size: 22px;
	font-weight: 700;
	font-family: "Noto Serif JP", serif;
	margin-bottom: 20px;
	text-align: center;
	position: relative;
	line-height: 1.4;
}
.titleH:after {
	background-color: #333;
  bottom: -4px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 1s;
  width: 100%;
	box-shadow: 0 1px 0 var(--color-gold);
}
.titleH.trigger.perform:after {
	transform: scale(1, 1);
}
.titleI {
	font-size: 22px;
	font-weight: 700;
	font-family: "Noto Serif JP", serif;
	margin-bottom: 20px;
	text-align: center;
	position: relative;
}
.titleI:after {
	background-color: #fff;
  bottom: -4px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 1s;
  width: 100%;
	box-shadow: 0 1px 0 var(--color-gold);
}
.titleI.trigger.perform:after {
	transform: scale(1, 1);
}
.titleI span {
	font-size: 14px;
}
.titleJ {
	font-size: 18px;
	font-family: "Noto Serif JP", serif;
	text-align: center;
	margin-bottom: 20px;
}
.titleK {
	text-align: center;
	width: 65px;
	margin: 0 auto 10px;
}
.titleL {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 20px;
}


/* teaser */
body#teaser #opv-wrap {
	display: none;
}
@media screen and (max-width:787px) {
	body#teaser #opv-wrap {
		display: block;
		position: relative;
	}
	body#teaser #opv {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		height: 85svh;
		object-fit: cover;
		object-position: center;
	}
}
/* body#teaser.fixed  {
	position: fixed;
} */
#teaser .cover {
	position: fixed;
	top: 0;
	width:100vw;
	height: auto;
	z-index: 10;
	pointer-events: none;
}
@media screen and (max-width:787px) {
	#teaser .cover {
		display: none;
	}
}
#teaser .cover img {
	object-fit: cover;
	object-position: top;
	width: 100vw;
	height: 100vh;
}
#teaser .bg {
	position: fixed;
	top: 0;
	width:100vw;
	height: auto;
	z-index: 0;
	pointer-events: none;
}
#teaser .bg img {
	object-fit: cover;
	object-position: top;
	width: 100vw;
	height: 100vh;
}
#teaser .centerMain {
	position:relative;
}
#teaser .scroll {
	font-size: 14px;
	color:var(--color-gold);
	text-align: center;
	position: relative;
	padding-bottom: 50px;
	position: fixed;
	top: 60dvh;
	z-index: 20;
	margin-left: 468px;
}
@media screen and (max-width:787px) {
	#teaser .scroll {
		right: 10px;
	}
}
#teaser .scroll:before {
	content: "";
	position: absolute;
	bottom: 40px;
	left: 50%;
	width: 5px;
	height: 5px;
	background: var(--color-gold);
	transform: rotate(45deg) translate(-50%);
}
#teaser .scroll:after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 40px;
	background: var(--color-gold);
	animation: scroll 2s infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
#teaser h1 {
	width: 427px;
	margin: 0 auto;
	max-width: 600px;
	text-align: center;
}	
@media screen and (max-width:787px) {
	#teaser h1 {
		width: 90%;
	}	
}
#teaser .scrollArea {
	max-width: 468px;
}
@media screen and (max-width:787px) {
	#teaser .scrollArea {
		max-width: 468px;
	}
}
/* scroll bar */
#teaser .scrollArea::-webkit-scrollbar{
	display: none;
}
#teaser .scrollArea {
	/* -ms-overflow-style: none;
	scrollbar-width: none; */
	margin: 0 auto 0;
	/* padding: 5vh 0 34vh; */
	/* padding: 5vh 0 10vh;  */
}
#teaser .scrollArea {
	font-size: 14px;
}
#teaser .scrollArea .about p {
	margin-bottom: 20px;
}

#teaser .wrap {
	height: 100%;
}
@media screen and (max-width:787px) {
	#teaser .scrollArea {
		padding: 0 0 250px; 
	}
	#teaser .wrap:before {
		position: fixed;
		content: "";
		width: 100vw;
		height: 10px;
		background: var(--color-base);
		box-shadow:0 2px 5px -2px #000;
		z-index: 10;
	}
}
#teaser .scrollArea .read {
	text-align: center;
	font-size: 30px;
	padding: 40px 0 0;
	margin-bottom: 20px;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	color: var(--color-base);
	letter-spacing: 2px;
}
#teaser .period {
	text-align: center;
	padding: 40px 0 0;
	margin-bottom: 16px;
}
#teaser .period .flex {
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid var(--color-base);
	border-bottom: 1px solid var(--color-base);
	width: 100%;
}
#teaser .period p {
	font-size: 14px;
	padding: 10px 0;
	font-weight: bold;
}
#teaser .period p:first-child:after {
	content: "─";
	display: inline-block;
	margin: 0 5px;
}
#teaser .period p b {
	font-size: 20px;
}
#teaser .wrap .top {
	width:100%;
	height: 100%;
}
@media screen and (max-width:787px) {
	#teaser .wrap .top {
		display: none;
	}
}
#teaser .date {
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
#teaser .news {
	/* border: 1px solid var(--color-gold); */
	border-radius: 8px;
	padding: 16px 17px;
	margin-bottom: 30px;
}
#teaser .news p {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}
#teaser .about {
	margin-bottom: 50px;
}
/* #teaser .about.trigger {
	transition: .3s;
	transform: scale(0);
}
#teaser .about.trigger.perform {
	transform: scale(1);
}  */
/* #teaser .about dl div {
	margin-bottom: 10px;
}
#teaser .about dl dt {
	font-size: 20px;
	font-weight: 700;
}
#teaser .about dl dt:before {
	content: "●";
	color:var(--color-gold)
}
#teaser .about dl dd {
	color: #93001B;
	font-size: 12px;
} */
#teaser .discount .ticketBtn {
	height: 60px;
}
#teaser .discount dl {
	border: 1px solid var(--color-base);
	border-radius: 10px;
	margin-bottom: 20px;
}
#teaser .discount dl dt {
	text-align: center;
	padding: 20px 0 10px;
	font-weight: 700;
	line-height: 1;
}
#teaser .discount dl dd {
	text-align: center;
	padding: 5px;
	border-top: 1px solid var(--color-base);
}
#teaser .discount dl dd:first-of-type {
	display: flex;
	justify-content: center;
	font-size: 12px;
}
#teaser .discount dl dd .start:after {
	content: "─";
	display: inline-block;
	margin: 0 2px;
}
#teaser .discount dl dd:last-child {
	padding: 10px 0 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}
#teaser .discount dl dd .icon {
	background: var(--color-base);
	border-radius: 5px;
	color: #fff;
	font-size: 12px;
	display: inline-block;
	padding: 5px 10px;
	font-weight: 400;
}
#teaser .discount dl dd span {
	font-size: 14px;
}
#teaser .discount ul {
	margin-bottom: 30px;
}
#teaser .note {
	font-size: 12px;
	text-indent: -1em;
	padding-left: 1em;
}
#teaser .noteList li {
	font-size: 12px;
	text-indent: -1em;
	padding-left: 1em;
	padding-bottom: 0;
	margin-bottom: 5px;
	border-bottom: none;
	content: "※";
}
#teaser .noteList li:before,
#teaser .note:before {
	content: "※";
}
/* #teaser .benefits {
	position: sticky;
	top: 0;
	background: #000;
	z-index: 10;
	padding-top: 20px;
} */
@media screen and (min-width:788px) {
	#teaser .benefits {
		top: max(3.5vw, 52px);
		padding-top: 25px;
	}
}
#teaser .benefits .pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
#teaser .benefits .pager li {
	border: 1px solid var(--color-gold);
	background: #fff;
	color: var(--color-gold);
	border-radius: 100px;
	width: 17px;
	height: 17px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	line-height: 1;
}
#teaser .benefits1, 
#teaser .benefits2 {
	background: rgba(255, 255, 255, .1);
	padding: 10px;
	border-radius: 10px;
	font-size: 12px;
}
#teaser .benefits .pager li.current {
	border: 1px solid var(--color-gold);
	background: var(--color-gold);
	color: #fff;
}
#teaser .benefitsList {
	height: 100%!important;
	/* position: relative!important; */
	    width: 100% !important;
    max-width: none !important;
		    /* top: 50px!important; */
}
#teaser .benefitsList .flex {
	display: flex;
	gap: 5px;
}
#teaser .benefitsList .flex:not(:last-child) {
	margin-bottom: 5px;
}
#teaser .benefitsList .flex p {
	line-height: 1.2;
}
#teaser .benefitsList .flex .ttl {
	background: #fff;
	border-radius: 5px;
	color: var(--color-base);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 70px;
	line-height: 1.2;
}
#teaser .benefitsList .flex dl > div {
	display: flex;
}
#teaser .benefitsList .flex dl > div dt {
	width: 3em;
}
#teaser .benefitsList .flex dl > div dd {
	width: calc(100% - 3em);
	line-height: 1.4;
}
#teaser .benefitsList > li {
	background-color: rgba(255,255,255,.2);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 30px;
}
#teaser .benefitsList > li:last-child {
	border: none;
	margin-bottom: 0px;
}
/* #teaser .detailList {
	margin-bottom: 15px;
}
#teaser .detailList li {
	margin-bottom: 15px;
} */
#teaser .benefitsList .figureBg {
	background: #fff;
	padding: 25px;
	border-radius: 20px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}
#teaser .benefitsList .figureBg img {
	height: 100%;
}
#teaser .benefitsList > li > p {
	margin-bottom: 30px;
}
#teaser .benefits1 .noteList li {
	margin-bottom: 0;
}
#teaser .content {
	/* padding-bottom: 50px; */
	/* margin-bottom: 100svh; */
	/* border-bottom: 1px solid var(--color-gold); */
	/* opacity: 0; */
	/* padding-top: 100svh; */
}
@media screen and (min-width:788px) {
	#teaser .content {
		/* padding-bottom: 250px; */
		padding-bottom: min(50dvh,350px);
	}
}
#teaser .fade {
	animation: fade 2s cubic-bezier(0.33, 1, 0.68, 1) 1s forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
	}
  100% {
    opacity: 1;
  }
}
#teaser .wrap .top .centerMainWrap {
	margin: 0 auto;
	width: 100%;
		max-width: none;
}
/* @media screen and (max-width: 787px) {	
	#teaser .wrap .top .centerMainWrap {
		max-width: 375px;
	}
} */
#teaser .wrap .top .centerMainWrap:before {
	content: "";
	position: fixed;
	width: 100%;
	min-height: 76vh;
	margin: 0 auto;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	aspect-ratio: 5 / 3;
	background: url(../images/cover.png) center top no-repeat;
	background-size: 100% auto;
	z-index: 10;
}
@media screen and (min-width:788px) {
	#teaser .wrap .cover img {
		animation: filter 2s linear .2s forwards;
	}
	@keyframes filter {
		100% {filter: brightness(0.2) saturate(1);}		
	}
}	
#teaser .wrap .top .centerMainWrap:before {
	background: none;
}
#teaser .wrap .top .centerMain {
	margin: 0 auto;
	width: 100%;
	min-width: 375px;
	max-width: 600px;
	/* padding: 3vh 15px 0; */
	background-color: #fff;
}
@media screen and (min-width:788px) {
	body#teaser,
	#teaser .wrap .top .centerMain {
		background: #000;
		animation: changeBg 1s linear 1s forwards;
	}
	@keyframes changeBg {
		100% {background: #fff;}		
	}	
}
#teaser .wrap .bottom {
	background: url(../images/bg_btm.png) center top no-repeat;
	background-size: cover;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 250px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: end;
	z-index: 20;
}
#teaser .ticketBtn {
	background: var(--color-gold);
	border-radius: 100vmax;
	width: 280px;
	height: 50px;
	color: #fff;
	margin: 0 auto 25px;
	padding-left: 30px;
	font-size: 20px;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: .2s;
	position: relative;
	text-decoration: none;
}
#teaser .ticketBtn:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 40px;
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url(../images/icon_ticket.png) center center no-repeat;
	background-size: cover;
	transform: translateY(-50%);
}
#teaser .ticketBtn:hover {
	opacity: .7;
}

/* footer */
#teaser footer {
	margin-top: auto;
	background-image: linear-gradient(0deg, #0a1a32, #0a1a32 26%, transparent);
}
@media screen and (max-width:787px) {
	#teaser footer {
		margin-top: 0;
	}
}
footer p {
	text-align: center;
	width: 100%;
	font-size: 13px;
	color: #FFF;
}

#teaser footer .subPage {
	/* border-bottom: 1px solid #fff;
	padding-bottom: 12px; */
	margin-bottom: 12px;
}
footer .subPage ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
footer .subPage ul li {
	position: relative;
}
footer .subPage ul li:after {
	position: absolute;
	top: 50%;
	right: -10px;
	transform: translateY(-50%);
	content: "|";
	color: #fff;
}
footer .subPage ul li:last-child:after {
	content: none;
}
footer .subPage ul li a {
	color: #fff;
	font-size: 11px;
	text-decoration: none;
}
footer .copy {
	text-align: center;
	background: rgba(0,0,0,.7);
	padding: 5px;
}

/* sns */
.sns {
	margin-top: 40px;
	margin-bottom: 10px;
	display: flex;
	gap: 50px;
	justify-content: center;
	position: relative;
}
.sns::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: 1px;
	background: #000;
	pointer-events: none;
}
.sns p {
	text-align: center;
	    margin-bottom: 10px;
}
.sns ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 120px;
}
.sns ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .2s;
}
.sns ul li a:hover {
	opacity: .7;
}

/* modal */
.ticketModalContents {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	max-width: 600px;
	z-index: 1;
	background-color: #FFF;
	z-index: 30;
	max-height: 90vh;
	overflow: auto;
}
.ticketModalOverLay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(12px);
	z-index: 20;
}
.ticketModalClose {
	position: absolute;
	right: 10px;
	top: 14px;
	width: 25px;
	height: 25px;
	color:var(--color-base);
	z-index: 1;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	background: #fff;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .2s;
}
.ticketModalClose:hover {
	opacity: .7;
	transform: scale(1.2);
}
.modalContent {
	padding: 0 20px 25px;
}
.modalContent dl {
	margin-bottom: 30px;
}
.ticketList {
	max-width: 280px;
	margin: 0 auto;
}
.ticketA a,
.ticketB a,
.ticketC a,
.ticketD a {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	height: 58px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100vmax;
	margin-bottom: 10px;
	transition: .2s;
	color: #fff;
	text-decoration: none;
}
.ticketA a { background: var(--color-gold);}
.ticketB a { background: var(--color-gold);}
.ticketC a { background: var(--color-gold);}
.ticketD a { background: var(--color-gold);}
.ticketList a:hover {
	opacity: .7;
	transform: scaleX(1.2);
}

.opening {
	position: relative;
}
.opening .scene1,
.opening .scene2 {
	writing-mode: vertical-rl;
	position: fixed;
	top: 30svh;
	left: 50%;
	transform-origin: center center;
	transform: translateX(-50%) rotate(0.03deg);
	opacity: 0;
	pointer-events: none;
	font-feature-settings:initial;
	font-family: "Noto Serif JP", serif;
	font-weight: 900;
	font-style: normal;
}
.anim {
	animation: anim 2.8s cubic-bezier(0.33, 1, 0.68, 1) 1.5s forwards;
}
@keyframes anim {
  0% {
    opacity: 0;
		transform: translateX(-50%) scale(0);
  }
  20% {
    opacity: 1;
		transform: translateX(-50%) scale(4.5);
  }
  70% {
    opacity: 1;
		transform: translateX(-50%) scale(4.5);
  }
  100% {
    opacity: 0;
		transform: translateX(-50%) scale(60);
  }
}
.read.target.sticky.anim2,
.title.target.sticky.anim2,
.period.target.sticky.anim2 {
	animation: anim2 2.5s cubic-bezier(0.33, 1, 0.68, 1) .1s forwards;
}
@keyframes anim2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* button */
.btnRev a {
	border-radius: 100vmax;
	position: relative;
	width: 260px;
	height: 58px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: var(--color-logo1);
	transition: .2s;
}
.btnRev a:hover {
	opacity: .7;
}
@media screen and (max-width:787px) {
.btnRev a {
	width: 100%;
}	
}
/* .btnRev a:before {
	content: "";
	position: absolute;
	display: inline-block;
	background: var(--color-gold);
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
	width: 10px;
	height: 10px;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	pointer-events: none;
} */


/* policy */
body#policy .wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}
body#policy h1 {
	background: var(--color-logo1);
	font-size: 20px;
	color: #fff;
	height: 60px;
	margin-bottom: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
body#policy .contents {
	max-width: 870px;
	padding: 0 15px;
	margin: 0 auto;
}
body#policy .section {
	border-bottom: 3px dotted var(--color-base);
	padding-bottom: 26px;
	margin-bottom: 26px;
}
body#policy .section ol {
	counter-reset: num;
}
body#policy .section ol li {
	counter-increment: num;
	text-indent: -1.1em;
	padding-left: 1.2em;
}
body#policy .section ol li:before {
	content: counter(num) ". ";
}
body#policy .section:last-child {
	border-bottom: none;
}

/* terms */
body#terms .wrap {
	display: flex;
	flex-direction: column;
}
body#terms h1 {
	background: var(--color-base);
	font-size: 20px;
	color: #fff;
	height: 60px;
	margin-bottom: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
body#terms .wrap ol {
	margin-bottom: 10px;
}
body#terms .contents {
	max-width: 870px;
	padding: 0 15px;
	margin: 0 auto;
}
body#terms .section {
	border-bottom: 2px dotted var(--color-base);
	padding-bottom: 20px;
	margin-bottom: 20px;
}
body#terms .section ol {
	counter-reset: num;
	margin-top: 10px;
}
body#terms .section ul li {
	text-indent: -1em;
	padding-left: 1em;
}
body#terms .section ol li {
	counter-increment: num;
	text-indent: -1.5em;
	padding-left: 1.5em;
}
body#terms .section ol li:before {
	content: "("counter(num) ") ";
}

body#policy .scrollArea, 
body#terms .scrollArea {
	margin-bottom: 30px;
}

body#terms footer,
body#policy footer {
	margin-top: auto;
}
body#terms footer .copy,
body#policy footer .copy {
	text-align: center;
	background: var(--color-logo1);
	padding: 5px;
}
body#terms footer .subPage ,
body#policy footer .subPage {
	margin-bottom: 20px;
}
body#terms footer .subPage ul,
body#policy footer .subPage ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
body#terms footer .subPage ul li,
body#policy footer .subPage ul li {
	position: relative;
}
body#terms footer .subPage ul li:last-child:after,
body#policy footer .subPage ul li:last-child:after {
	content: none;
}
body#terms footer .subPage ul li:after,
body#policy footer .subPage ul li:after {
	position: absolute;
	top: 50%;
	right: -10px;
	transform: translateY(-50%);
	content: "|";
	color:var(--color-base);
}
body#terms footer .subPage ul li a,
body#policy footer .subPage ul li a {
	color: var(--color-base);
	text-decoration: none;
	font-size: 11px;
}
body#terms footer .subPage ul li.current a,
body#policy footer .subPage ul li.current a {
	color: var(--color-gold);
}


body#terms #faq h1 {
	margin-bottom: var(--spacing-xl);
}
/* ページ説明 */
body#terms #faq .descText {
	max-width: 870px;
	padding: 0 var(--spacing-m);
	margin: 0 auto var(--spacing-l);
}
body#terms #faq .descText p {
	color: var(--color-text);
}



/* faq */
#faq .qa {
	margin:0 0 var(--spacing-xl) 0;
}
/* Q */
#faq .qa dt {
	border-top: 1px solid var(--color-logo1);
	border-bottom: 1px solid var(--color-logo1);
	padding:  var(--spacing-xs) 0;
	display: flex;
	align-items: baseline;
	gap: 1em;
	font-weight: bold;
	font-size: var(--font-size-xl);
}
#faq .qa dt::before {
	content: "Q.";
	color: var(--color-logo1);
	flex-shrink: 0;
	font-size: var(--font-size-xl);
}
/* A */
#faq .qa dd {
	display: flex;
	align-items: baseline;
	gap: 1em;
	padding: var(--spacing-xs) 0;
	margin: 0 0 var(--spacing-xl) 0;
	color: var(--color-text);
}
#faq .qa dd::before {
	content: "A.";	
	color: var(--color-logo2);
	font-weight: bold;
	flex-shrink: 0;
	font-size: var(--font-size-xl);
}
#faq .qa dd:last-child{
	margin: 0 0 var(--spacing-xl) 0;
}
/* お問い合わせ */
#faq .contact {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--spacing-l);
	align-items: center;
}
#faq .contact p{
	color: var(--color-logo1);
	font-weight: bold;
	font-size: var(--font-size-xl);
	margin:0 0 var(--spacing-l) 0;
	text-align: center;
}
#faq .contact a{
	color: var(--color-text);
}
#faq .contact a:hover {
	color: var(--color-logo2);
}
#faq .contact .mailBtn {
  position: relative;
  display: inline-block;
  padding-left: var(--spacing-xl);
  font-size: var(--font-size-xl);
  font-weight: bold;
  border-bottom: 1px solid var(--color-logo1);
  color: var(--color-logo1);
  text-decoration: none;
  line-height: 1.5;
}

#faq .contact .mailBtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; 
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url(../images/icon_mail.svg) center center no-repeat;
  background-size: contain;
}
#faq .contact .mailBtn:hover::before {
	background-image: url(../images/icon_mail_hover.svg);
}
#faq .contact .mailBtn:hover{
	border-bottom: 1px solid var(--color-logo2); 
	color: var(--color-logo2);
}


/*タブレット向け調整*/
@media screen and (max-width: 1200px) and (min-width: 768px) {
.wrap .bottom {
    /* background-size: 1200px auto;
    height: 230px; */
}
.ticketBtn {
    /* bottom: 78px; */
}

} 
/*スマホ向け調整*/
@media screen and (max-width: 767px) {
.wrap .bottom {
    /* background-size: 900px auto;
    height: 160px; */
}
.ticketBtn {
    /* bottom: 60px; */
}

} 

.trigger {
	opacity: 0;
	margin-top: 50px;
	/* filter: blur(.2em); */
}
.trigger.perform {
	animation: perform .7s linear .2s forwards;
}
@keyframes perform {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
		margin-top: 0px;
		/* filter: blur(0em); */
  }
}

.title.trigger.perform {
	position: fixed;
	width: 90%;
	top: 230px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}


/* ノイズ */
/* body::after {
  animation: noise 8s steps(10) infinite;
  background: url("../images/white-noise_02_l.jpg");
  content: "";
  display: block;
  height: 500%;
  left: -100%;
  position: fixed;
  top: -100%;
  width: 300%;
  z-index: 2;
	opacity: .05;
	pointer-events: none;
}

@keyframes noise {
to {background-position: 0 0;}
10% {background-position: -5% -10%;}
20% {background-position: -15% 5%;}
30% {background-position: 7% -25%;}
40% {background-position: 20% 25%;}
50% {background-position: -25% 10%;}
60% {background-position: 15% 5%;}
70% {background-position: 0 15%;}
80% {background-position: 25% 35%;}
90% {background-position: -10% 10%;}
} */


/* .benefitsList li {
  position: absolute;
  inset: 0;
  opacity: 0;
	width: 100%;
	height: auto;
} */


/* intro */
.opening {
	position: relative;
	z-index: 900;
	background: #000;
	width: 100vw;
	height: 86vh;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	z-index: 0;
}
@media screen and (max-width:787px) {
	.opening {
		width: 100vw;
	}
}
.star-wars-intro {
  /* background: url("../images/stars-bg.jpg") center center;
  background-size: cover; */
  width: 100%;
  height: 110%;
  font-family: "Droid Sans", arial, verdana, sans-serif;
  font-weight: 700;
  color: #EBD71C;
  background-color: #000;
  overflow: hidden;
  position: relative;
}
.opening.active {
	animation: nonScreen 5s ease-in .5s forwards;
}
@keyframes nonScreen {
  100% { height: 0; }
}
.content-header,
.content-body {
	color: var(--color-gold);
}
.star-wars-intro .main-content{
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 3;
  width: 98%;
  height: 50em;
  bottom: 0;
  font-size: 80px;
  font-weight: bold;
  text-align: justify;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(350px) rotateX(25deg);
}
@media screen and (max-width:787px) {
	.star-wars-intro .main-content {
		bottom: 80px;
	}
} 

.star-wars-intro .main-content:after {
  position: absolute;
  content: ' ';
  top: 0;
  bottom: 60%;
  background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
  pointer-events: none;
}

.star-wars-intro .space-button {
  color: #EBD71C;
  border: 12px solid #EBD71C;
  padding: 20px;
  background: transparent;
  text-decoration: none;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.star-wars-intro .space-button:hover {
  background-color: #D2BE03;
  border-color: #D2BE03;
  color: black;
}

.star-wars-intro .space-button:active,
.star-wars-intro .space-button:focus {
  background-color: #B8A40A;
  border-color: #B8A40A;
  color: black;
}
.star-wars-intro .title-content {
  text-align: center;
  position: absolute;
  top: 100%;
  width: 100%;
  animation: scrollAnim 50s linear 0.01s forwards;
}

.star-wars-intro .main-logo > img {
  max-width: 100%;
}

@keyframes intro {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes scrollAnim {
  0% { top: 100%; }
  100% { top: -170%; }
}

@media screen and (max-width: 720px) {
  .star-wars-intro .main-content {
    font-size: 24vw;
  }
  .star-wars-intro .title-content {
    position: absolute;
    top: 100%;
    animation: scrollAnim 60s linear 0.01s forwards;
  }
}