@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);
}
/*-- ========== //footer ========== --*/

/*-- ==================== ticket ==================== --*/
#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-04);
	text-align: center;
}
#ticket td{
	background: var(--inkblack2);
}
@media screen and (max-width: 768px) {/* TB */
	#ticket .tb{
		display: table;
	}
}
#ticket .btnBox{
	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;
}
/*-- ========== 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;
    overflow: hidden;
}
#mask {
    /* --- 基本設定（ここにはanimationを書かない） --- */
    position: absolute;
    top: -5vh;
    left: 0;
    width: 100%;
    height: 110vh;
    overflow: hidden;    
    -webkit-mask-image: url('../img/key.svg');
    mask-image: url('../img/key.svg');
    -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 50%;
		mask-size: auto 50%;
	}
	55%, 100% {/* ②マスクを上に移動 */
		top: -17vh;
		-webkit-mask-size: auto 50%;
		mask-size: auto 50%;
	}
}

/* --- 画像のアニメーション --- */
#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: 68vh;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(5vw);
    /* 消える時（リセット時）の設定：一瞬で消す */
    transition: none; 
}
#title img{
	width: 50vh;
	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: 36vh;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(5vw);
    /* 消える時（リセット時）の設定：一瞬で消す */
    transition: none; 
}
#sttl img{
	width: 63vh;
	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;
	height: 5vw;
	border-radius: var(--rall);
	cursor: pointer;
	
}
/*-- ===== //MV */

#floating {
    height: 62.5vw;
    margin: var(--size-16) 0;
}

.floating-list {
    position: relative;
    height: 62.5vw;
    width: 100%;
}

.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%; transform: translate(-50%, -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; transform: translateX(-300%); 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; transform: translateX(260%); filter: blur(0.7rem); }
.floatingImg09 img { width: 6vw; }
.floatingImg10 { z-index: 1; left: 19vw; bottom: 5vw; filter: blur(0.7rem); }
.floatingImg10 img { width: 5vw; }

/*-- ===== topTxt */
#topTxt{
	display: flex;
	justify-content: center;
	align-items: center;
}
#topTxt h3,
#topTxt p{
	width: 50%;
}
#topTxt h3{
	padding-right: var(--size-04);
}
#topTxt p{
	padding-left: var(--size-04);
}
/*-- ===== //topTxt */

/*-- ===== Book */
#book{
	margin-top: var(--size-16);
	margin-bottom: var(--size-20);
}
#book h2{
	text-align: center;
}
#bookList li{
	padding: 0 2vw;
}
#bookList li img{
	width: 25vw;
}
.slide-arrow{
	position: absolute;
	left: calc(50% + 1.5vw);
	bottom: -3vw;
}
.prev-arrow{
	left: calc(50% - 1.5vw);
}
.slide-arrow img{
	width: 1.5vw;
}

@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 */


}