@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

html {
	scroll-behavior: smooth;
	scroll-padding-top: 3em;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	line-height: 1.75;
	color: #000;
	background: #fff;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: center;
}

* {
	font-size: 1em;
	box-sizing: border-box;
	background-size: contain;
}

html, body, p, h1, h2, h3, h4, h5, ul, ol, li, dd, dl, dt, div {
	padding: 0;
	margin: 0;
	font-weight: 500;
}

img {
	border: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	vertical-align:top;
	max-width: 100%;
}

html { height: 100%; }
li { list-style-type: none; }
a {
	color: inherit;
	text-decoration: none;
}
a.underline,
.underline a { text-decoration: underline; }
.none { display: none; }
.sp { display: none; }
.pc { display: block; }

/* for modern brouser */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	visibility: hidden;
}

/* IE7,MacIE5 */
.clearfix { display: inline-block; }

/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.tcenter { text-align: center; }
.tright { text-align: right; }

/* 選択色 */
::selection {
	background: #d8ff00;
	color: #000;
}

::-moz-selection {
	background: #d8ff00;
	color: #000;
}

/* header */
main {
	position: relative;
	z-index: 0;
	overflow: hidden;
}
main:before {
	content: '';
	width: 100%;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 101%;
	height: 100%;
	z-index: -1;
}
main h1 img {
	width: 100%;
	max-width: 1200px;
}

/* menu */
.menu {
	position: relative;
	width: 100%;
	background: #d8ff00;
	margin-top: -0.125em;
	z-index: 100;
}
.m_fixed {
	left: 0;
	position: fixed;
	top: 0;
}

.menu li {
	display: inline-block;
	color: #959e64;
	padding: 0.5em 0.75em;
	font-size: 1.5em;
	font-weight: 700;
}
.menu li a { color: #000; }


/* section BG */
.boxArea {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 2em;
	padding: 2em 0;
}

/* title */
section {
	padding-top: 2em;
}
section h2 {
	padding: 1em 0 0;
	font-size: 2.5em;
	font-weight: 800;
	letter-spacing: 0.125em;
}

/* SCHEDULE */
.scheduleBTN {
	width: 100%;
	margin: 0 auto 2em;
	display: grid;
	grid-gap: 0.5em;
	grid-template-columns: 1fr 1fr;
}
#SCHEDULE a { cursor: pointer; }
.scheduleBTN li {
	position: relative;
	background: #999;
	color: #fff;
	padding: 0.5em 1em;
	text-align: center;
}
.scheduleBTN li.on,
.scheduleBTN li:hover {
	background: #d8ff00;
	color: #000;
}
.scheduleBTN li.on:after,
.scheduleBTN li:hover:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.7em;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #d8ff00 transparent transparent transparent;
	border-width: 0.75em 0.75em 0 0.75em;
}

.scheduleBox {
	position: relative;
	z-index: 0;
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	font-size: 0.75em;
}
.scheduleBox li a {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 2.5fr 3fr 0.5fr;
	background: #e8e8e8;
	font-size: 1.75em;
	color: #051c28;
	padding: 0.75em;
	border-radius: 0.5em;
}
.scheduleBox li div {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
}
.scheduleBox li div:nth-child(3) {
	justify-content: end;
	font-size: 0.75em;
	font-weight: 500;
}
.scheduleBox li.tky { grid-column: 1 / 5; }
.scheduleBox li.tky.pref { grid-column: 4 / 5; }
.scheduleBox li.tky a { grid-template-columns: 1.75fr 20fr 1.75fr; }
.scheduleBox li.tky.pref a { grid-template-columns: 2.5fr 3fr 0.5fr; }
.scheduleBox li.fin a:before {
	display: flex;
	justify-content: center;
	align-items: center;
	content: '公演終了';
	color: #fff;
	background: rgba(0,0,0,0.5);
	border-radius: 0.5em;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
.scheduleBox li.so a:after {
	content: '';
	background: url(../images/soldout.svg) right center no-repeat;
	background-size: auto 90%;
	position: absolute;
	bottom: -0.125em;
	right: 0;
	width: 100%;
	height: 80%;
	z-index: 2;
}

.btn {
	font-size: 0.7rem;
	height: 1.5rem;
	position: relative;
	display: inline-block;
	padding: 0.125rem 1rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: #fff;
	background: #000;
	border-radius: 100vh;
}

.pref-box h3 {
	font-size: 2em;
	font-weight: 600;
}
.pref-box h4 {
	font-size: 1.5em;
	font-weight: 600;
}
.pref-box small { font-size: 0.8em; }

.fancybox-bg { background:#d8ff00 !important; }
.fancybox-is-open .fancybox-bg { opacity:0.8 !important; }

/* TICKET */
#TICKET .boxArea { margin-bottom: 1em; }
.ticketBox {
	display: grid;
	grid-gap: 0;
	grid-template-columns: 1fr;
	font-size: 1.125rem;
	line-height: 1.5;
}
.ticketBox span { margin-right: 0.5rem; font-size: 0.75em; }
.ticketBox strong { font-size: 2.5rem; }
.ticketBox small { font-size: 0.75rem; }

.ticketLinkBox {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 2em;
}
.ticketLinkBox a { width: 100%; }
.ticketLinkBox li {
	background: #d8ff00;
	color: #000;
	display: grid;
	grid-gap: 0;
	grid-template-columns: 4fr 9fr 2.5fr;
	padding: 1.5em;
	margin-bottom: 1em;
	border-radius: 0.5em;
}
.ticketLinkBox li h3 {
	font-size: 1.4em;
	text-align: left;
	font-weight: 700;
}
.ticketLinkBox li h3 small { font-size: 0.75em; }
.ticketLinkBox li p { font-size: 1.25em; }
.ticketLinkBox li p small { font-size: 0.75em; }
.ticketLinkBox li span,
.ticketLinkBox li div,
.ticketLinkBox li h3 {
	display: flex;
	text-align: left;
	justify-content: start;
	align-items: center;
}
.ticketLinkBox li .btn {
	width: 100%;
	background: #000;
	color: #fff;
	border-radius: 0.5em;
	padding: 1em 0;
	height: 3.75em;
	font-size: 1em;
}

.ticketLinkBox li.off {
	background: #333333;
	color: #adadad;
}
.ticketLinkBox li.off .btn {
	background: #666;
	color: #c0c0c0;
}

.ticketLinkBox li.mada {
	background: #e8e8e8;
	color: #6b7176;
}
.ticketLinkBox li.mada .btn {
	background: #666;
	color: #c0c0c0;
	cursor: default;
}

/* NOTICE */
#NOTICE .boxArea { line-height: 2.5; }
#NOTICE a { text-decoration: underline; }

.noticeBox {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 2em;
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 1fr 1fr;
	text-align: left;
}
.noticeBox li {
	padding: 1em;
	border: #ccc solid 1px;
	background: rgba(255,255,255,0.8);
}
.noticeBox li.c2 { grid-column: 1 / 3; }

/* GOODS */
.LinkBox {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 1fr;
	padding: 1em 0;
}
.LinkBox .btn {
	width: 100%;
	background: #d8ff00;
	color: #000;
	font-size: 1.5em;
	font-weight: 600;
	height: 3.5em;
	border-radius: 0.5em;
	padding: 1em;
}

/* footer */
footer {
	background: #cccccc;
	margin-top: 0;
	padding: 4em 2em;
}
footer img {
	width: 50%;
	max-width: 250px;
}

.TF {
	position: fixed;
	bottom: 2em;
	right: 2em;
	width: 25vw;
	height: 25vw;
	max-width: 200px;
	max-height: 200px;
	cursor: pointer;
	z-index: 100;
}
.rotateIMG, rotateBG {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

.btn360 {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.rotateBG {
	content:"";
	z-index:-1;

	background: url("../images/TF_logo_bg.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

	transform-origin: center;
	animation: bgSpin 30s linear infinite;
}
@keyframes bgSpin{
	from { transform:rotate(0deg); }
	to { transform:rotate(-360deg); }
}

.snsBox li {
	display: inline-block;
	padding: 0.5em;
	margin-top: 8em;
}
.snsBox li img { max-width: 5em; }

.bg-L {
	z-index:-1;
	background: url("../images/bg-left.svg") left top no-repeat;
	background-size: auto 100%;
}
.bg-R {
	z-index:-1;
	background: url("../images/bg-right.svg") right top no-repeat;
	background-size: auto 100%;
	padding-bottom: 3em;
	width: 100%;
	height: 100%;
}

/* アニメーション */
.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-center {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.85);
		transform: scale(0.85);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes scale-up-center {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.85);
		transform: scale(0.85);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

/* 初期状態で非表示 */
.animate-section {
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
}

/* 表示時に適用されるアニメーション */
.animate-section.visible {
	animation: scale-up-center 0.5s ease-out 0.25s both;
}

@media all and (max-width: 900px) {
	.sp { display: block; }
	.pc { display: none; }
	body { font-size: 3vw; }

	/* main */
	main h1 img {
		width: 150%;
		max-width: auto;
		margin-left: -25%;
	}

	/* menu */
	.menu li { font-size: 1.25em; }

	.boxArea {
		padding: 1.5em 0;
		text-align: left;
	}

	/* SCHEDULE */
	.scheduleBox {
		position: relative;
		z-index: 0;
		display: grid;
		grid-gap: 1em;
		grid-template-columns: 1fr 1fr;
		font-size: 0.75em;
	}
	.scheduleBox li.tky { grid-column: 1 / 3; }
	.scheduleBox li.tky.pref { grid-column: 2 / 3; }
	.scheduleBox li.tky a { grid-template-columns: 1.75fr 7fr 1.75fr; }

	.btn { margin-left: 1em; }

	/* TICKET */
	.ticketBox { grid-template-columns: 1fr; text-align: center; }
	.ticketBox span { margin-left: 1rem; }
	.ticketLinkBox li {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.ticketLinkBox li span,
	.ticketLinkBox li p { font-size: 0.9em; }
	.ticketLinkBox li .btn {
		font-size: 1em;
		display: block;
		width: 100%;
		margin: 1em auto 0;
	}

	/* NOTICE */
	#NOTICE .boxArea { line-height: 1.75; }
	.noticeBox li { grid-column: 1 / 3; }

	/* GOOD */
	.LinkBox {
		width: 90%;
		margin: 0 auto;
		grid-gap: 1em;
		grid-template-columns: 1fr;
		padding: 1em 0;
	}
	.LinkBox .btn {
		font-size: 1.25em;
		margin: 0;
	}
	.TF {
		bottom: 1em;
		right: 1em;
	}
	.snsBox li img { max-width: 4em; }
	.bg-L {
		z-index:-1;
		background: url("../images/bg-left.svg") left top no-repeat;
		background-size: auto 100%;
	}
	.bg-R { background: none; }
}
::-webkit-full-page-media, :future, :root main { height: auto; }