@charset "UTF-8";
.first{
	overflow: hidden;
}
.first #base{
	opacity: 0;
}

#base{
	position: relative;
	overflow-x: clip;
}

/*-- ==================== loading ==================== --*/
.loading{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10011;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--black);
	opacity: 1;
	visibility: visible;
	transition: all 1s;
	overflow: hidden;
}
.loading.is-active{
	opacity: 0;
	visibility: hidden;
}
.loading-animation {
	width: 100%;
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
}
.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}
.loading-animation img{
	display: block;
	animation: korokoro 2.5s linear 0s 1;
	max-width: 220px;
	margin: 0 auto;
}
@keyframes korokoro {
	0%   { transform: translate(0%, 0%); }
	5%   { transform: translate(10%, 0%) rotate(10deg); }
	25%  { transform: translate(20%, 0%) rotate(20deg); }
	30%  { transform: translate(-10%, 0%) rotate(-10deg); }
	35%  { transform: translate(-15%, 0%) rotate(-15deg); }
	45%  { transform: translate(10%, 0%) rotate(10deg); }
	50%  { transform: translate(15%, 0%) rotate(15deg); }
	60%  { transform: translate(-5%, 0%) rotate(-5deg); }
	65%  { transform: translate(-7%, 0%) rotate(-7deg); }
	75%  { transform: translate(0%, 0%) rotate(0deg); }
	100% { transform: translate(0%, 0%) rotate(0deg); }
}
/*-- ========== //loading ========== --*/

/*-- ==================== fadein ==================== --*/
.fadein {
	opacity : 0;
	transform : translate(0, 0.5em);
	transition: 0.5s ease;
}

.fadein.active{
	opacity : 1;
	transform: translateY(0);
}
/*-- ========== //fadein ========== --*/

/*-- ==================== footer ==================== --*/
footer{
	text-align: center;
	margin-top: var(--size-20);
	padding-top: var(--size-10);
	padding-bottom: var(--size-30);
	border: solid 1px var(--inkblack);
}
footer img{
	width: 20vw;
}
footer p{
	font-size: var(--font-2down);
	margin-top: var(--size-04);
}
@media screen and (max-width: 768px) {/* TB */
	footer img{
		width: 40vw;
	}
	footer p{
		margin-top: var(--size-08);
	}
}
/*-- ========== //footer ========== --*/

/*-- ==================== btnBox ==================== --*/
.btnBox ul{
	display: flex;
	flex-wrap: wrap;
}
.btnBox ul li{
	width: calc(100% / 2);
	padding: var(--size-01);
	line-height: normal;
}
@media screen and (max-width: 1024px) {/* iPad pro　portrait */
	.btnBox ul li{
		width: calc(100% / 2);
	}
}
@media screen and (max-width: 768px) {/* TB */
	.btnBox ul li{
		width: 100%;
	}
}
.btnBox ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("../img/link_b.svg") right 1em center no-repeat var(--gold);
	background-size: var(--size-02);
	color: var(--black);
	padding: var(--size-04) var(--size-06);
	font-weight: var(--font-bold);
	border-radius: var(--size-02);
	transition: .2s;
}
.btnBox ul li a:hover{
	background: url("../img/link_b.svg") right 0.5em center no-repeat var(--white);
	background-size: var(--size-02);
}
@media screen and (max-width: 768px) {/* TB */
	.btnBox ul li a{
		background: url("../img/link_b.svg") right 1em center no-repeat var(--gold);
		background-size: var(--size-08);
		padding: var(--size-12) var(--size-06);
		border-radius: var(--size-08);
		transition: inherit;
	}
	.btnBox ul li a:hover{
		background: url("../img/link_b.svg") right 0.5em center no-repeat var(--white);
		background-size: var(--size-08);
	}
}

/*-- ==================== btnBox ==================== --*/
#ticket{
	display: flex;
	justify-content: center;
	margin-top: var(--size-10);
}
#ticket table,
#ticket tbody{
	width: 100%;
}
#ticket tr{
	background: var(--inkblack);
}
#ticket th,
#ticket td{
	padding: var(--size-08) var(--size-02);
	text-align: center;
	line-height: var(--line-height1down);
}
#ticket th span{
	font-size: var(--font-2down);
}
#ticket td{
	background: var(--inkblack2);
}
@media screen and (max-width: 768px) {/* TB */
	#ticket .tb{
		display: table;
	}
	#ticket .tbth td{
		width: 40vw;
	}
}
#ticket .btnBox{
	margin-top: var(--size-04);
}
#ticket .btnBox ul{
	margin-top: var(--size-04);
}

/*-- ========== //ticket ========== --*/


/*-- ==================== detai ==================== --*/
#detail{
	display: flex;
	justify-content: center;
	margin-top: var(--size-10);
}
#detail dl{
	display: flex;
}
#detail dl:nth-child(odd){
	background: var(--inkblack);
}
#detail dt,
#detail dd{
	padding: var(--size-04);
}
#detail dt{
	width: 8.5em;
	font-weight: var(--font-bold);
	text-align: center;
	padding-right: var(--size-02);
}
#detail dd{
	width: calc(100% - 8.5em);
	padding-left: var(--size-02);
}
#detail dd span{
	display: inline-block;
}

@media screen and (max-width: 768px) {/* TB */
	#detail dl{
		flex-wrap: wrap;
	}
	#detail dl:nth-child(odd){
		background: none;
	}
	#detail dt,
	#detail dd{
		width: 100%;
	}
	#detail dt{
		background: var(--inkblack);
		margin-top: 0.5em;
	}
}

/*-- ========== detai ========== --*/


/*-- ==================== other ==================== --*/
.list_atnt,
.list_point{
	margin-top: 1em;
}
.list_atnt li,
.list_point li{
	font-size: var(--font-2down);
	line-height: var(--line-height2down);
	margin-top: 0.3em;
	text-indent: -1.5em;
	padding-left: 1.5em;
}
.list_atnt li::before{
	content: "※ "
}
.list_point li::before{
	content: "・ "
}

/*-- ==================== TOP ==================== --*/

/*-- ===== MV */
body.has-mv main,
body.has-mv footer,
body.has-mv #topMv{/* MVがあるページだけ、初期状態のmainを隠す */
	display: none;
	opacity: 0;
}
body.has-mv main.is-visible,
body.has-mv footer.is-visible,
body.has-mv #topMv.is-visible{/* アニメーション終了後に表示する設定 */
	display: block;
	animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
	to { opacity: 1; }
}

#mv {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	/*overflow: hidden;*/
}
#mask {
	/* --- 基本設定 --- */
	position: absolute;
	top: -5vh;
	left: 0;
	width: 100%;
	height: 110vh;
	overflow: hidden;
	-webkit-mask-image: url('../img/key.webp');
	mask-image: url('../img/key.webp');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	opacity: 0;
	animation: none !important; 
}

#mask img {
	/* --- 基本設定 --- */
	position: absolute;
	top: 5vh;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	height: 100vh;
	width: auto;
	animation: none !important;
}

/* --- .is-loaded がついた瞬間にアニメーションを「注入」して開始 --- */
body.is-loaded #mask {
	opacity: 1;
	/* ここで初めてアニメーション名を指定する */
	animation: maskStepAnim 6s forwards !important;
	transition: opacity 0.5s ease;
}

body.is-loaded #mask img {
	/* ここで初めてアニメーション名を指定する */
	animation: imgStepAnim 6s forwards !important;
}

/* --- マスクのアニメーション --- */
@keyframes maskStepAnim {
	0%, 13% {/* 0.8秒待機 〜 ①マスク縮小 */
		top: -5vh; 
		-webkit-mask-size: auto 100%;
		mask-size: auto 100%;
	}
	30%, 38% {
		top: -5vh;
		-webkit-mask-size: auto 45%;/*マスクのサイズ*/
		mask-size: auto 45%;/*マスクのサイズ*/
	}
	55%, 100% {/* ②マスクを上に移動 */
		top: -23vh; /*マスクの最終位置*/
		-webkit-mask-size: auto 45%;/*マスクのサイズ*/
		mask-size: auto 45%;/*マスクのサイズ*/
	}
}

/* --- 画像のアニメーション --- */
#mask, #mask img {/* 初期状態ではアニメーションを止めておく */
	animation-play-state: paused;
}
.is-loaded #mask, 
.is-loaded #mask img {/* 読み込み完了後に付与するクラス */
	animation-play-state: running;
}
@keyframes imgStepAnim {
	0%, 38% { /* 移動開始までは初期位置をキープ */
		top: 5vh; 
		height: 100vh;
	}
	/* ②マスクと一緒に動くので、ここは top を変えなくてOK！ */
	55%, 63% {
		top: 5vh; 
		height: 100vh; /* 移動完了、0.5秒ストップ */
	}
	/* ③画像の拡大 */
	85%, 100% {
		top: 5vh;
		height: 110vh;
	}
}
#title {
	position: absolute;
	top: 60vh; /*タイトル画像の最終位置*/
	width: 100%;
	text-align: center;
	opacity: 0;
	transform: translateY(5vw);
	/* 消える時（リセット時）の設定：一瞬で消す */
	transition: none; 
}
#title img{
	width: 44vh;
	max-width: 80vw;
}
#title.is-active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1.0s ease, transform 1.0s ease; /* ここでアニメーションを指定 */
	transition-delay: 0.3s;
}
#sttl {
	position: absolute;
	top: 28vh; /*鍵マスク左右のテキストの最終位置*/
	width: 100%;
	text-align: center;
	opacity: 0;
	transform: translateY(5vw);
	/* 消える時（リセット時）の設定：一瞬で消す */
	transition: none; 
}
#sttl img{
	width: 40vh;
	max-width: 85vw;
}
#sttl.is-active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1.0s ease, transform 1.0s ease;
}

#topMv{
	position: fixed;
	z-index: 25;
	right: 2vw;
	bottom: 2vw;
	display: flex !important;
	justify-content: center;
	align-items: center;
	background: var(--inkblack);
	font-size: var(--font-3down);
	line-height: var(--line-height2down);
	text-align: center;
	width: 5vw;
	max-width: 160px;
	min-width: 80px;
	height: 5vw;
	max-height: 160px;
	min-height: 80px;
	border-radius: var(--rall);
	cursor: pointer;
}
@media screen and (max-width: 768px) {/* TB */
	#topMv{
		width: 15vw;
		max-width: inherit;
		min-width: inherit;
		height: 15vw;
		max-height: inherit;
		min-height: inherit;
	}
}

.scroll-line {
	position: absolute;
	bottom: -6vw;
	left: 4vw;
	transform: translateX(-50%);
	z-index: 20;
	width: 1px;
	height: 12vw;
	background: #047dc4;
	overflow: hidden;
	/* 初期状態は非表示 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease;
}
@media screen and (max-width: 768px) {/* TB */
	.scroll-line {
		display: none;
		bottom: -15vw;
		left: 50vw;
		height: 30vw;
	}
}

/* 表示用クラス */
.scroll-line.is-visible {
	opacity: 1;
	visibility: visible;
}

.scroll-line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
animation: scroll-line-anim 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scroll-line-anim {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}
	/* 35%で一気に最大まで伸ばす（素早い動き） */
	35% {
		transform: scaleY(1);
		transform-origin: top;
	}
	/* 40%から55%の間、一瞬だけ全長のまま維持しつつ起点を下に切り替え */
	40%, 55% {
		transform: scaleY(1);
		transform-origin: bottom;
	}
	/* 75%で完全に消しきる */
	75% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
	/* 75%から100%の間、何も表示されない「長い溜め」 */
	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/*-- ===== //MV */

#floating {
	height: 62.5vw;
	margin: var(--size-16) 0;
}
.floating-list {
	position: relative;
	height: 62.5vw;
	width: 100%;
}
@media screen and (max-width: 768px) {/* TB */
	#floating {
		height: 180vw;
	}
	.floating-list {
		height: 180vw;
	}
}

.floating-list li {
	position: absolute;
	/* transitionは配置用、animationは浮遊用 */
	transition: opacity 0.5s ease;

	/* 変数を使って個別にタイミングと速度を変える */
	animation: float-loop var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite;
}

@keyframes float-loop {
	0%, 100% {
		translate: 0 0;
		rotate: 0deg;
	}
	33% {
		translate: var(--move-x, 1.5vw) var(--move-y, -1.5vw);
		rotate: 0.5deg; /* 2degから0.5degに縮小 */
	}
	66% {
		translate: calc(var(--move-x, 1.5vw) * -0.7) calc(var(--move-y, -1.5vw) * -0.7);
		rotate: -0.5deg; /* -2degから-0.5degに縮小 */
	}
}

/* --- 配置用の各クラス（変更なし） --- */
.floatingImg01 { z-index: 10; left: 50%; top: 50%; }
.floatingImg01 img { width: 34vw; }
.floatingImg02 { z-index: 9; right: -10vw; top: 6vw; }
.floatingImg02 img { width: 22vw; }
.floatingImg03 { z-index: 8; left: -10vw; bottom: -9vw; }
.floatingImg03 img { width: 30vw; }
.floatingImg04 { z-index: 7; right: 3vw; bottom: 3vw; }
.floatingImg04 img { width: 13vw; }
.floatingImg05 { z-index: 6; right: 8vw; top: 20vw; filter: blur(0.3rem); }
.floatingImg05 img { width: 17vw; }
.floatingImg06 { z-index: 5; left: 5vw; top: 10vw; filter: blur(0.3rem); }
.floatingImg06 img { width: 18vw; }
.floatingImg07 { z-index: 4; left: 50%; bottom: 15vw; filter: blur(0.5rem); }
.floatingImg07 img { width: 8vw; }
.floatingImg08 { z-index: 3; left: 22vw; top: 20vw; filter: blur(0.5rem); }
.floatingImg08 img { width: 6vw; }
.floatingImg09 { z-index: 2; left: 50%; bottom: 4vw; filter: blur(0.7rem); }
.floatingImg09 img { width: 6vw; }
.floatingImg10 { z-index: 1; left: 19vw; bottom: 5vw; filter: blur(0.7rem); }
.floatingImg10 img { width: 5vw; }
@media screen and (max-width: 768px) {/* TB */
	.floatingImg01 { z-index: 10; left: 50%; top: 50%; }
	.floatingImg01 img { width: 66.75vw; }
	.floatingImg02 { z-index: 9; right: -10vw; top: 6vw; }
	.floatingImg02 img { width: 35vw; }
	.floatingImg03 { left: -10vw; bottom: 10vw; }
	.floatingImg03 img { width: 37vw; }
	.floatingImg04 { right: 3vw; bottom: -4vw; }
	.floatingImg04 img { width: 24.5vw; }
	.floatingImg05 { right: -22vw; top: 70vw; }
	.floatingImg05 img { width: 33.5vw; }
	.floatingImg06 { left: -10vw; top: 18vw; }
	.floatingImg06 img { width: 35vw; }
	.floatingImg07 { left: 53%; bottom: 18vw; }
	.floatingImg07 img { width: 16.5vw; }
	.floatingImg08 { left: -6vw; top: 73vw; }
	.floatingImg08 img { width: 12.5vw; }
	.floatingImg09 { left: 50%; bottom: 37vw; }
	.floatingImg09 img { width: 12vw; }
	.floatingImg10 { left: 36vw; bottom: 26vw; }
	.floatingImg10 img { width: 9vw; }
}


/*-- ===== topTxt */
#topTxt{
	display: flex;
	flex-direction: column;
	text-align: center;
}

@media screen and (max-width: 768px) {/* TB */
	#topTxt{
		width: 100%;
		margin-top: calc(var(--size-40) + var(--size-20));
		text-align: left;
	}
	#topTxt h3 br,
	#topTxt p br{
		display: none;
	}}

/*-- ===== //topTxt */

/*-- ===== Book */
#book{
	margin-top: var(--size-16);
	margin-bottom: var(--size-20);
}
#book h2{
	text-align: center;
}
#bookList{
	padding-bottom: var(--size-10);
}
#bookList li{
	width: 39vw;
	padding: 0 2vw;
	text-align: center;
	line-height: var(--line-height2down);
}
#bookList li span{
	font-size: var(--font-3down);
}
#bookList li img{
	display: block;
	height: 35vw;
	width: auto;
	margin: 0 auto;
	margin-bottom: var(--size-02);
}
.slide-arrow{
	position: absolute;
	left: calc(50% + 1.5vw);
	bottom: 0;
}
.prev-arrow{
	left: calc(50% - 3vw);
}
.slide-arrow img{
	width: 1.5vw;
}
@media screen and (max-width: 768px) {/* TB */
	#book{
		margin-top: var(--size-32);
		margin-bottom: var(--size-40);	
	}
	#bookList{
		padding-bottom: var(--size-30);
	}
	#bookList li{
		width: 64vw;
	}
	#bookList li img{
		height: 60vw;
		margin-bottom: var(--size-08);
	}
	.slide-arrow{
		position: absolute;
		left: calc(50% + 5vw);
		bottom: 0;
	}
	.prev-arrow{
		left: calc(50% - 10vw);
	}
	.slide-arrow img{
		width: 5vw;
	}
}
/*-- ===== //Book */

@media screen and (max-width: 1366px) {/* iPad pro　landscape */

}



@media screen and (max-width: 1194px) {/* iPad pro 11　landscape */

}



@media screen and (max-width: 1024px) {/* iPad pro　portrait */

}



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

}



@media screen and (max-width: 759px) {/* SP */


}