:root {
	--pc-width: 1024px;
	--bf-accent: #fbc426;
	--bf-white: #f7f7f7;
	--bf-grey: #777777;
	--bf-red: #e94c42;
	--rem-vw: 1.5625vw;
	--cast-item-width: 0.416;
}
html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
html,
body {
	padding: 0;
	margin: 0;
	border: 0;
	background-color: black;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}
a {
	transition-duration: 0.5s;
}
a:link,
a:visited {
	/* color: #d6cf8e; */
	text-decoration: none;
}
.yantra {
	font-family: Yantramanav, sans-serif;
}
.noto {
	font-family: "Noto Sans JP", sans-serif;
}
.noto-serif {
	font-family: "Noto Serif JP", serif;
}
.yakuhan-noto {
	font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}
.kakko {
	margin-left: -0.7rem;
	margin-right: -0.7rem;
}
#intro {
	width: 100vw;
	text-align: center;
	height: 100vh;
	padding-bottom: 20vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	background-color: var(--bf-accent);
	opacity: 1;
	top: 0;
	font-size: calc(2 * var(--rem-vw));
	font-weight: 500;
	letter-spacing: 4px;
}
.align-left {
	text-align: left;
}
.copy {
	color: black;
	background-color: var(--bf-accent);
}
.copy2 {
	position: absolute;
	font-weight: 700;
	background-color: var(--bf-accent);
	z-index: -1;
}
.catch1-show {
	opacity: 0;
	animation: 1s ease 0.25s 1 fadeInCatch forwards;
}
.catch11-show {
	opacity: 0;
	animation: 1s ease 2.25s 1 fadeInCatch forwards;
}
.catch12-show {
	opacity: 0;
	animation: 1s ease 4.5s 1 fadeInCatch forwards;
}
.catch2-show {
	opacity: 0;
	animation: 0.5s ease 6.95s 1 fadeInCatch forwards;
}
.copy-show {
	animation: 0.45s linear 6.5s 1 fadeOutCatch forwards;
}
.copy2-show {
	animation: 0.4s linear 9.55s 1 fadeOutCatchZoom forwards;
}
.catch1,
.catch11,
.catch12,
.catch2 {
	width: 100%;
	white-space: nowrap;
}

.fade {
	animation: 1.8s ease 9.9s 1 fadeIn forwards;
}
.fade-in-out {
	animation: 10s linear 0.1s 1 fadeInOut forwards;
}
.yellow-show {
	opacity: 0;
	animation: 1s ease 11.7s 1 yellowSlideDown forwards;
}
.june-show {
	opacity: 0;
	animation: 1.3s ease 11.3s 1 juneMoveUp forwards;
}
.logo-show {
	opacity: 0;
	animation: 2.2s ease 10.5s 1 logoMoveDown forwards;
}
.bar-show {
	opacity: 0;
	animation: 1.3s ease 10.5s 1 barMoveLeft forwards;
}
@keyframes fadeOutCatchZoom {
	0% {
		opacity: 1;
		transform: scale(1);
		filter: blur();
	}
	100% {
		opacity: 0;
		transform: scale(1.5);
		filter: blur(8px);
	}
}
@keyframes fadeOutCatch {
	0% {
		opacity: 1;

		filter: blur();
	}
	100% {
		opacity: 0;

		filter: blur(8px);
	}
}
@keyframes fadeInCatch {
	0% {
		opacity: 0;
		filter: blur(8px);
	}

	100% {
		opacity: 1;
		filter: blur();
	}
}
@keyframes fadeInOut {
	0% {
		opacity: 0;
		transform: scale(1);
		filter: brightness(1);
	}
	5% {
		opacity: 1;
		transform: scale(1);
		filter: brightness(1);
	}
	95% {
		opacity: 1;
		filter: brightness(1);
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
		filter: brightness(4);
		transform: scale(1.15);
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
@keyframes yellowSlideDown {
	0% {
		opacity: 1;
		height: 0;
	}

	100% {
		opacity: 1;
		height: 76vw;
	}
}
@keyframes juneMoveUp {
	0% {
		opacity: 0;
		bottom: -25vw;
	}

	100% {
		opacity: 1;
		bottom: 5vw;
	}
}
@keyframes logoMoveDown {
	0% {
		opacity: 0.6;
		top: -30%;
	}

	100% {
		opacity: 1;
		top: 0;
	}
}
@keyframes barMoveLeft {
	0% {
		opacity: 0;
		left: 100%;
	}

	100% {
		opacity: 1;
		left: 11%;
	}
}

@keyframes yellowSlideDownUp {
	0% {
		opacity: 1;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
	}

	100% {
		opacity: 1;
		height: 0;
		top: 50%;
	}
}
@keyframes nameSlideLeft {
	0% {
		opacity: 0.3;
		left: 150%;
	}

	100% {
		opacity: 1;
		left: -30%;
	}
}
@keyframes imageFadeIn {
	0% {
		opacity: 0;
		filter: brightness(100%);
	}
	80% {
		opacity: 0.7;
		filter: brightness(100%);
	}
	90% {
		opacity: 1;
		filter: brightness(300%);
	}
	100% {
		opacity: 1;
		filter: brightness(100%);
	}
}
@keyframes nameTopSlideUp {
	0% {
		opacity: 0;
		top: 63%;
	}

	100% {
		opacity: 1;
		top: 23%;
	}
}
@keyframes nameBottomSlideUp {
	0% {
		opacity: 0;
		top: 120%;
	}

	100% {
		opacity: 0.8;
		top: 57%;
	}
}
@keyframes nameEnSlideRight {
	0% {
		opacity: 0.3;
		left: -100%;
	}

	100% {
		opacity: 1;
		left: 0;
	}
}

.main {
	opacity: 0;
	max-width: var(--pc-width);
	margin: 0 auto;
	position: relative;
	background-color: var(--bf-white);
	width: 100%;
}
.box {
	width: 100%;
	max-width: var(--pc-width);
	margin: 0 auto;
}
.main-visual {
	position: relative;
	z-index: -2;
	width: 100%;
	min-height: 100%;
}
.visual-image {
	width: 100%;
	min-height: 100%;
	height: auto;
	position: fixed;
	top: 0;
	background-color: var(--bf-white);
	z-index: -2;
	mix-blend-mode: multiply;
	border-bottom: calc(20 * var(--rem-vw)) solid black;
}
.visual-bottom {
	top: unset;
	bottom: 0;
	padding-top: 41.5vw;
	border-bottom: 0;
}
.main-bottom {
	background-color: var(--bf-accent);
}
.visual-box {
	max-width: var(--pc-width);
	margin: 0 auto;
	position: relative;
	top: 0;
	width: 100%;
	height: 141.5vw;
	z-index: 1;

	overflow: hidden;
}
.br-news-box {
	position: relative;
	height: 280px;
	width: 280px;
	background-color: var(--bf-accent);
	margin-bottom: 16rem;
	display: flex;
	flex-direction: column;
	opacity: 0.7;
}
.breaking-news {
	max-width: var(--pc-width);
	width: 100vw;
	height: 100vh;
	text-align: center;
	position: fixed;
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
}
.br-news-title {
	margin: 0;
}
.br-news-text {
	font-size: 1.1rem;
	margin-top: auto;
	margin-bottom: auto;
	font-weight: 700;
	line-height: 1.7;

	position: relative;
	justify-content: center;
	align-self: center;
}

.started.breaking-news {
	opacity: 0;
	animation: 1.8s ease 10s 1 brNewsShowup forwards;
}
@keyframes brNewsShowup {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.logo {
	width: 100%;
}
.logo-image {
	position: absolute;
	width: 28%;
	right: 0;
	z-index: 1;
}
.bar {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.bar-image {
	position: absolute;
	width: 37.87%;
	left: 11%;
	top: 14vw;
	z-index: 1;
}
.yellow-image {
	position: absolute;
	width: 34.79%;
	height: 76vw;
	left: calc(50% - 17.4%);
	top: 26vw;
	background-color: #fbc426;
	mix-blend-mode: multiply;
	z-index: -1;
}
.june {
	width: 100%;
	position: relative;
}
.june-image {
	position: absolute;
	width: 1.54%;
	height: auto;
	left: 5.2%;
	bottom: 5vw;
	z-index: -1;
}
.data-box {
	padding: 1.5rem;
	background-color: rgba(0, 0, 0, 0.8);
}
.title-box {
	width: 100%;
	font-size: calc(1.6 * var(--rem-vw));
	color: var(--bf-accent);
	line-height: 1.1;
}
.title-box .noto {
	font-weight: 100;
}
.title {
	margin-left: -1em;
}
.title .noto {
	font-size: 1.3em;
}
.title .yantra {
	font-size: 1.4em;
	font-weight: 700;
}
.date .yantra {
	font-size: 1.5em;
}
.date {
	margin-top: -0.2rem;
}
.place {
	margin-top: 0;
}
.title-box .place {
	font-weight: 300;
	font-size: 1.1em;
}
.info-box {
	display: flex;
	width: 100%;
	margin-top: 1.5rem;
}
.bolder {
	font-weight: 500;
}
.credit {
	font-size: calc(0.8 * var(--rem-vw));
	color: var(--bf-white);
	line-height: 1.4;
	font-weight: 500;

	flex: 1 0 auto;
	align-self: flex-end;
}
.covid-notice {
	color: var(--bf-accent);
	font-size: calc(1.2 * var(--rem-vw));
	line-height: 1.2;

	justify-self: flex-end;
	border-top: 5px solid var(--bf-accent);
	border-bottom: 5px solid var(--bf-accent);

	flex: 0 1 auto;
	position: relative;
	display: block;
	font-weight: 700;
}
.covid-notice a {
	color: white;
	display: block;
	padding: 1em 0;
}
.covid-notice:hover {
	border-top: 5px solid var(--bf-white);
	border-bottom: 5px solid var(--bf-white);
}
.covid-notice:hover a {
	color: var(--bf-accent);
}
.covid-window-box {
	display: block;
	width: 100%;
	position: absolute;
	top: 20%;
	height: 60%;
	left: 0;
	z-index: 2;
	background-color: transparent;
	display: none;
}
.covid-window-flex {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
	z-index: 2;
}
.covid-window {
	position: fixed;
	background-color: var(--bf-white);
	color: black;
	font-size: 0.9rem;
	padding: 2rem 3rem;
	top: 20%;
	width: 80%;
	max-width: 900px;
	z-index: 2;
	filter: drop-shadow(0.5rem 0.5rem 1rem black);
}
.covid-window-close,
.comment-window-close,
.view-window-close {
	top: -9px;
	right: -9px;
	color: black;
	font-weight: 900;
	position: absolute;
	font-size: calc(1.5 * var(--rem-vw));
	border-radius: 1.8rem;
	padding: 2px 6px 5px 6px;
	border: 2px solid black;
	background-color: var(--bf-accent);
	line-height: 1;
	z-index: 2;
}

.view-window-close {
	color: var(--bf-white);
	border-color: var(--bf-white);
	background-color: var(--bf-grey);
}
.view-window-close:hover {
	color: var(--bf-grey);
	border-color: var(--bf-grey);
	background-color: var(--bf-white);
}
.comment-window-close,
.covid-window-close:hover {
	background-color: black;
	color: var(--bf-accent);
	border-color: var(--bf-accent);
}
.comment-window-close:hover {
	background-color: var(--bf-accent);
	color: black;
	border-color: black;
}
.news-info-title {
	font-size: calc(2.2 * var(--rem-vw));
	margin: 0 auto;
	background-color: var(--bf-accent);
	color: black;
	text-align: center;
	padding: 1rem 0 0.3rem 0;
	font-weight: 900;
}
.news-info-outer {
	background-color: var(--bf-accent);
	padding: 0 1rem;
	padding-bottom: 2rem;
}
.news-info-box {
	background-color: black;
	position: relative;
}
.news-item {
	border-top: 1px solid var(--bf-accent);
	transition-duration: 0.33s;
	transition-property: background;
	position: relative;
	font-weight: 300;
}
.news-item.urgent {
	background-color: var(--bf-red);
}
.news-divider {
	padding-bottom: 1.5rem;
	background-color: var(--bf-accent);
}
.news-text strong {
	font-weight: 500;
}
.news-text em {
	font-style: normal !important;
	color: var(--bf-accent) !important;
}
.news-head {
	padding: 0;
}
.news-item:hover .news-head {
	background-color: var(--bf-white);
	color: black;
	cursor: pointer;
}
.news-item:first-child {
	border: 0;
}
.news-item.closed .news-head::after {
	transform: scaleY(-1.73) scale(0.9);
}
.news-head.foldable::after {
	width: 12px;
	height: 12px;
	position: absolute;
	border-bottom: 8px solid var(--bf-accent);
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	right: 12px;
	top: 16px;
	content: "";
	transition-duration: 0.33s;
	transition-property: transform;
	transform-origin: center 9px;
	transform: scaleY(1.73);
	z-index: 0;
}
.news-item:hover::after {
	border-bottom: 8px solid black;
}

.news-date {
	color: var(--bf-accent);
	font-size: calc(0.8 * var(--rem-vw));
	padding: 0 1rem;
	font-weight: 700;
	line-height: 1.4;
	margin-left: -0.75rem;
}
.new-tick {
	background-color: var(--bf-red);
	color: black;
	padding: 0;
	border-radius: 1px;
	margin: 0 0.2rem 0 0;
	padding: 0 0.4rem 0.1rem;
	font-size: calc(0.7 * var(--rem-vw));
	transform: translate(0, -2px);
	font-weight: 700;
	display: inline-block;
}
/* .news-item:hover .new-tick {
	color: black;
	background-color: transparent;
} */
.news-title {
	color: var(--bf-white);
	font-size: calc(1.1 * var(--rem-vw));
	font-weight: 500;
	transition-duration: 0.33s;
	transition-property: color;
	padding: 0 1.5rem;
	line-height: 1.3;
	margin-top: -0.1rem;
	padding-bottom: 0.6rem;
	margin-right: 0.5rem;
}
.news-text-box {
	padding: 0;
	margin: 0;
}
.news-text {
	font-size: calc(0.9 * var(--rem-vw));
	color: var(--bf-white);
	transition-duration: 0.33s;
	transition-property: color;
	/* margin-top: 0.5rem; */
	padding: 1rem 1.5rem;
	line-height: 1.7;
	border-top: 1px dotted var(--bf-grey);
}
.news-text a {
	color: var(--bf-red);
	font-weight: 500;
}
.news-text p {
	margin: 0;
	min-height: 16px;
}
.news-text a:hover {
	color: var(--bf-accent);
}
.news-item:hover .news-title {
	color: black;
}

.toggle-slide-enter-active,
.toggle-slide-leave-active {
	transition: height 0.4s;
	overflow: hidden;
}
.toggle-slide-enter,
.toggle-slide-leave-to {
	height: 0;
	transition: height 0.4s;
}
.brnosp {
	display: block;
}
.brnosp-inline {
	display: inline;
}
.brsp {
	display: none;
}
.story-title,
.cast-title {
	width: 100%;
	background-color: var(--bf-white);
	color: black;
	font-size: calc(4.2 * var(--rem-vw));
	text-align: center;
	padding: 2rem 0 0 0;
	line-height: 1;
}
.cast-title {
	background-color: var(--bf-accent);
}
.story-title {
	background-color: black;
	color: var(--bf-accent);
	padding: 3rem 0 0 0;
}

.story-box,
.cast-box {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	background-color: var(--bf-accent);
	content: "";
	position: relative;
}
.story-box {
	padding-bottom: 4rem;
	background-color: black;
	color: var(--bf-accent);
}
.story-text {
	font-size: calc(1 * var(--rem-vw));
	padding: 0 4rem;
	text-align: left;
	font-weight: 500;
	padding-top: 1.5rem;
	line-height: 1.8;
}
.cast-box {
	position: relative;
}
.cast-image {
	width: 100%;
	max-width: var(--pc-width);
	height: auto;
	position: relative;
	display: block;
	transition-duration: 0.33s;
	filter: brightness(0.85) contrast(1.1);
}

.cast-name-jp {
	position: absolute;
	left: 0;
	bottom: 21%;
	width: 90%;
	height: 30%;
}
.cast-name-top {
	width: 40%;
	height: auto;
	position: absolute;
	left: 0;
	top: 28%;
}
.cast-name-bottom {
	height: 20%;
	position: absolute;
	top: 57%;
	left: 9%;
	display: block;
	opacity: 0.8;
}

.eiji.cast-name-bottom {
	left: 9%;
}
.cast-name-en {
	position: absolute;
	height: 8.2%;
	bottom: 84%;
	left: -100%;
}
.eiji.cast-name-en {
	bottom: 5%;
}
.cast-image-item {
	position: relative;
	width: 100%;
	height: auto;
	opacity: 0;
}
.cast-image-item::after {
	position: absolute;
	width: 0%;
	height: 100%;
	left: 50%;
	top: 0;
	mix-blend-mode: multiply;
	background-color: #fbc426;
	content: "";
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bf-white);
	font-size: calc(1.4 * var(--rem-vw));
	font-weight: 700;
	opacity: 0;
}
.start-animation.cast-image-item {
	opacity: 0;
	animation: 1.4s linear 0.1s 1 imageFadeIn forwards;
}
.start-animation.cast-image-item::before {
	opacity: 0;
	animation: 1.6s ease-in-out 0.5s 1 nameSlideLeft forwards;
}
.start-animation.cast-image-item::after {
	opacity: 1;
	animation: 0.4s ease-out 0.8s 1 yellowSlideDownUp forwards;
}
.start-animation.cast-image-item .cast-name-top {
	opacity: 0;
	animation: 0.8s ease-out 1.7s 1 nameTopSlideUp forwards;
}

.start-animation.cast-image-item .cast-name-bottom {
	opacity: 0;
	animation: 1s ease-out 1s 1 nameBottomSlideUp forwards;
}
.start-animation.cast-image-item .cast-name-en {
	opacity: 0;
	animation: 0.8s ease-in-out 2s 1 nameEnSlideRight forwards;
}
.cast-andmore {
	width: 100%;
	background-color: var(--bf-white);
	color: black;
	font-size: calc(1.6 * var(--rem-vw));
	text-align: center;
	padding: 0.3rem 0 2rem 0;
	font-weight: 600;
}

.cast-comment-title {
	color: var(--bf-accent);
	background-color: black;
	width: 22vw;
	margin: 0 auto;
	display: flex;
	align-content: center;
	justify-content: center;
}
.comment {
	font-size: calc(1.4 * var(--rem-vw));
	letter-spacing: calc(0.25 * var(--rem-vw));
	text-transform: uppercase;
	transition-duration: 0.33s;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	height: 26px;
	display: flex;
	align-items: center;
}
.cast-list-nav {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.cast-nav-left {
	transform: rotate(135deg);
	left: 2rem;
	display: none;
}
.cast-nav-right {
	transform: rotate(-45deg);
	right: 3rem;
}
.cast-nav-button {
	z-index: 2;
	background-color: transparent;
	width: 16px;
	height: 16px;
	border: 0;
	border-right: 4px solid white;
	border-bottom: 4px solid white;
	content: "";
	position: absolute;
	top: calc(50% - 60px);
	transition-duration: 0.33s;
}
.cast-nav-button:hover {
	cursor: pointer;
	border-right-color: var(--bf-accent);
	border-bottom-color: var(--bf-accent);
}
.cast-nav-button:hover::after {
	background-color: transparent;
}
.cast-nav-button::after {
	width: 36px;
	height: 36px;
	position: absolute;
	content: "";
	border-radius: 36px;
	background-color: var(--bf-accent);
	opacity: 0.5;
	transform: translate(-14px, -14px);
	z-index: -3;
	filter: drop-shadow(0 0 3px white);
}
.cast-list {
	width: 100%;
	background-color: var(--bf-white);
	color: var(--bf-accent);
	font-size: calc(1.9 * var(--rem-vw));
	text-align: center;
	padding-top: 1rem;
	font-weight: 400;
	line-height: 1.8;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	background-color: var(--bf-accent);
}

.cast-table {
	width: 100%;
	margin: 0 auto;
	line-height: 1;
	display: flex;
	position: relative;
	flex-direction: column;
	overflow-x: hidden;
}
.cast-item-outer {
	display: flex;
	flex-direction: column;
	width: 20%;
	flex: 0 0 20%;
	position: relative;
	padding-right: 0.75rem;
}
.cast-item-outer:last-child {
	margin-right: -0.75rem;
}
.cast-item {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.cast-item:hover .cast-image {
	filter: brightness(1) contrast(1);
}
.cast-item:hover {
	cursor: pointer;
}
.mr-20 {
	margin-right: 9rem;
}
.cast-row {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.cast-name-box {
	display: flex;
	flex-direction: column;
	margin-top: -16.4vw;
	height: 16.4vw;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 1.5rem;
}
.character {
	font-size: calc(0.9 * var(--rem-vw));
	font-weight: 400;
	padding-right: 0.2rem;
	text-align: left;
	padding-top: 8px;
	color: black;
	z-index: 1;
	line-height: 1.4;
}
.character-text {
	color: white;
}
.actor {
	text-align: center;
	margin-top: 0.7rem;
	z-index: 1;
}

.comment-button::after {
	position: absolute;
	content: "";

	left: calc(50% - 5px);
	margin: 0 auto;
	border: 8px solid transparent;
	border-right: 8px solid var(--bf-red);
	border-top: 8px solid var(--bf-red);
	transform: rotate(-45deg) translate(0, -8px);
	width: 10px;
	height: 10px;
	transition-duration: 0.33s;
}
.comment-button:hover::after {
	border-right-color: black;
	border-top-color: black;
}
.comment-button {
	font-size: 0.75rem;
	background-color: var(--bf-red);
	margin-top: 0.5rem;
	border: 0;
	color: var(--bf-white);
	font-weight: 700;
	line-height: 1.5;
	padding: 0.2rem 0.5rem 0.1rem;
	transition-duration: 0.33s;
	text-transform: uppercase;
}
.comment-button:hover {
	cursor: pointer;
	background-color: black;
	color: var(--bf-red);
}
.cast-add {
	font-size: calc(1.3 * var(--rem-vw));
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	margin: 0;
	padding: 3rem;
	line-height: 1.7;
	align-self: center;
	color: black;
}
.comment-box-outer {
	background-color: rgba(0, 0, 0, 0.25);
	padding: 4rem 6rem 3rem 6rem;
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: none;
	z-index: 3;
	margin: auto auto;
}
.comment-box-border {
	position: relative;
	width: 60vw;
	height: 290px;
	top: calc(50vh - 290px / 2);
	left: 20vw;
	position: fixed;
	background-color: var(--bf-accent);
}

.comment-box {
	text-align: left;
	padding: 0 2rem 1.5rem;
	position: fixed;
	width: 60vw;
	height: 290px;
	top: calc(50vh - 290px / 2);
	left: 20vw;
	padding-top: 1rem;
}
.acomment {
	display: none;
}
.cast-comment {
	position: absolute;
	left: 0;
	top: -26px;
	height: 26px;
}
.comment-text-head {
	font-weight: 700;
	font-size: calc(1.4 * var(--rem-vw));
}
.comment-text {
	margin-top: 0.5rem;
	font-size: calc(0.9 * var(--rem-vw));
	line-height: 1.8;
}
.cast-view-box {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background-color: rgba(0, 0, 0, 0.5);
}
.cast-view-flex {
	display: flex;
	flex-direction: column;
	justify-items: center;
	align-content: center;
	width: 70vw;
	height: calc(1.3808 * 70vw);
	left: 15vw;
	top: 10vw;
	position: relative;
}
.cast-large-image {
	width: 100%;
	height: auto;
	margin: auto auto;
	z-index: 2;
}
.schedule-box {
	padding-top: 3rem;
	background-color: black;
	font-size: calc(1 * var(--rem-vw));
}
.schedule-title {
	font-size: calc(4.2 * var(--rem-vw));
	color: var(--bf-accent);
	text-align: center;
	line-height: 1;
	margin-bottom: -0.4rem;
}
.schedule-title.ticket {
	margin-top: -1rem;
	margin-bottom: -0.4rem;
}
.year {
	font-size: calc(2 * var(--rem-vw));
	color: var(--bf-accent);
	text-align: center;
	font-weight: 400;
	margin-top: 1.25rem;
}
.day-en {
	text-transform: uppercase;
	font-size: 0.55em;
}
.forsp {
	display: none;
}
.calendar-outer {
	margin-top: 0.75rem;
}
.schedule-calendar {
	color: var(--bf-white);
	text-align: center;
	margin: 0 auto;
	border-collapse: collapse;
}
.cal-date,
.cal-day {
	color: var(--bf-accent);
}
.day-off {
	color: #666;
}
.day-off.noto {
	font-size: calc(1 * var(--rem-vw));
}

.cal-date {
	font-size: calc(3.4 * var(--rem-vw));
	line-height: 1;
	padding: 0 0.4rem;
	vertical-align: top;
	font-weight: 400 !important;
}
.month {
	position: relative;
	margin-right: -0.3em;
	letter-spacing: 3px;
}
.w400,
.w400 th {
	font-weight: 400 !important;
}
.light,
.light th {
	font-weight: 300 !important;
}
.price-add {
	margin-top: -0.25rem;
}
.price-add,
.venue-add,
.ticket-info-tel {
	font-weight: 300;
}
.ticket-price,
.ticket-info-title,
.total-info-tel {
	font-weight: 500;
}
.total-info-title {
	font-weight: 700;
}
.cal-day {
	font-size: calc(1.4 * var(--rem-vw));
	line-height: 1;
	margin-top: -0.8rem;
	font-weight: 500;
}
.cal-time {
	vertical-align: bottom;
	font-size: calc(1.6 * var(--rem-vw));
	padding: 0 0.6rem;
	padding-top: 1rem;
}
.cal-time.day-off {
	vertical-align: middle;
	color: #888;
}
.align-top {
	vertical-align: top;
}
.cal-date,
.cal-time,
.cal-day {
	border-right: 1px solid #666;
}
.cal-date:first-child,
.cal-date:last-child,
.cal-time:last-child,
.cal-day:last-child {
	border-right: 0;
	margin-right: -0.5rem;
}
.side-seat {
	margin-top: 1rem;
}
.schedule-notice,
.sideseat-notice {
	font-size: calc(0.8 * var(--rem-vw));
	color: var(--bf-white);
	margin-top: 1rem;
	text-align: center;
	padding-bottom: 3rem;
	font-weight: normal;
}
.sideseat-notice {
	margin-top: 0.2rem;
	padding-bottom: 1rem;
}
.hr-full {
	border-bottom: 1px solid var(--bf-grey);
	margin: 0 auto;
	width: 100%;
	padding-top: 1rem;
	background-color: black;
}
.hr-yellow {
	border-top: 4px solid var(--bf-accent);
	margin: 0 auto;
	width: 35%;
	background-color: black;
}
.hr-black {
	border-top: 4px solid black;
	margin: 0 auto;
	width: 35%;
	background-color: transparent;
	margin-top: -0.5rem;
}
.hr-black.onwhite {
	padding-bottom: 1rem;
	background-color: var(--bf-white);
}
.hr-yellow.long {
	width: 50%;
}
.divider-black {
	border-top: 1px solid black;
	background-color: transparent;
	width: calc(100% - 4rem);
	margin: 0 auto;
	margin-bottom: 1rem;
}
.divider-white {
	border-top: 1px solid var(--bf-white);
	background-color: transparent;
	width: calc(100% - 4rem);
	margin: 0 auto;
	margin-bottom: 1rem;
}
.border2px {
	border-top-width: 2px;
}
.cast-title-box {
	background-color: var(--bf-accent);
}
.pb-4 {
	padding-bottom: 1rem;
}
.mb-2 {
	margin-bottom: 0.5rem;
}
.mb-4 {
	margin-bottom: 1rem !important;
}
.mt-n3 {
	margin-top: -0.75rem;
}
.mt-2 {
	margin-top: 0.5rem;
}
.mt-4 {
	margin-top: 1rem !important;
}
.ticket-box,
.stream-box,
.goods-box,
.bluray-box {
	background-color: black;
	padding-bottom: calc(2 * var(--rem-vw));
	padding-top: calc(4 * var(--rem-vw));
	position: relative;
	overflow: hidden;
}
.bluray-info,
.bluray-box {
	font-size: calc(0.9 * var(--rem-vw));
}
.bluray-box {
	padding-bottom: calc(6 * var(--rem-vw));
}
.bluray-head {
	color: var(--bf-accent);
	font-size: 1.1em;
	display: inline-block;
	margin: 0 calc(4 * var(--rem-vw));;
	margin-bottom: 0.5rem;
	font-weight: 700;
}
.bluray-body {
	margin-top: 2.5rem;
}
.bluray-info {
	border: 1px solid var(--bf-accent);
	padding: calc(1 * var(--rem-vw));
	margin: 0 auto;
	line-height: 1.65;
	margin: 0 4rem;
}
.bluray-title {
	font-size: calc(1.3 * var(--rem-vw));
	font-weight: 500;
}
.bluray-text {
	color: white;
	font-size: calc(1 * var(--rem-vw));
	padding-top: calc(2 * var(--rem-vw));
	margin-left: 1rem;
	margin-right: 1rem;
}
.bluray-note {
	/* font-size: 0.9em; */
	margin-top: 0.2rem;
	display: block;
	font-weight: 700;
}
.reserve-now {
	margin-top: 1rem;
	margin-bottom: 3rem;
}
.reserve-copy {
	margin-top: 0;
}
.reserve-now-button,
.goods-button {
	padding: 0.5rem 1.2rem 0.6rem;
	border: 1px solid var(--bf-accent);
	border-radius: 2rem;
	font-size: calc(1.2 * var(--rem-vw));
	color: var(--bf-accent);
	font-weight: 500;
}

.reserve-now-button:hover,
.goods-button:hover {
	border-color: black;
	color: black;
	background-color: var(--bf-accent);
}
.dokusyasenkou {
	position: absolute;
	right: 0;
	top: 2.5rem;
	width: 18vw;
	opacity: 0;
	transform-origin: top right;
}
.start-animation .dokusyasenkou {
	animation: 1s ease-in-out 0.1s 1 senkouPopIn forwards;
}
.calendar-outer {
	width: 100%;
}
.stream-text,
.goods-text {
	color: white;
	font-size: calc(1.2 * var(--rem-vw));
	padding-top: 2rem;
	margin-left: 1rem;
	margin-right: 1rem;
}
.stream-notice {
	font-size: calc(0.8 * var(--rem-vw));
	line-height: 1.65;
}
.stream-notice-ul {
	text-indent: -0.8rem;
}
.stream-notice-list {
	list-style-type: none;
	margin-left: -30px;
}
.stream-notice-list::before {
	content: "※";
}
.stream-site-title {
	/* background-color: var(--bf-accent); */
	color: var(--bf-accent);
	font-weight: 700;
	padding: 0 1.4rem;
	line-height: 1.4;
	border: 1px solid var(--bf-accent);
	/* background-color: var(--bf-accent); */
	font-size: calc(0.9 * var(--rem-vw));
	width: 14vw;
	margin: 0 auto;
	margin-bottom: 0.4rem;
	margin-top: 1rem;
}
.stream-site-title.white {
	background-color: var(--bf-white);
	border-color: var(--bf-white);
	color: black;
}
.stream-site-title.reverse {
	background-color: var(--bf-accent);
	border-color: var(--bf-accent);
	color: black;
}
.complex-notice {
	font-size: calc(0.9 * var(--rem-vw));
	padding: 1rem 2rem;
	border: 1px solid var(--bf-red);
	margin: 1rem 4rem;
	line-height: 1.55;
}
.stream-head-text,
.theater-copy {
	font-size: calc(1 * var(--rem-vw));
	text-align: center;
	display: block;
}
.goods-head-text {
	font-size: calc(1.1 * var(--rem-vw));
}
.stream-data-box {
	width: calc(100% - 8rem);
	margin: 0 auto;
}

.special-program {
	border: 1px solid var(--bf-accent);
	color: var(--bf-accent);

	margin: 0 auto;
	padding: 0.4rem 0.8rem 0.5rem;
	margin-top: 2.5rem;
	font-weight: 500;
	text-align: left;
}
.special-program.yellow {
	background-color: var(--bf-accent);
	color: black;
	border-color: var(--bf-accent);
}
.special-program-data {
	font-size: calc(0.9 * var(--rem-vw));
	margin: 0 auto;
	margin-top: 0.2rem;
}
.data-notice {
	font-size: calc(0.8 * var(--rem-vw));
}
.data-copy {
	font-size: calc(0.9 * var(--rem-vw));
	display: block;
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}
.data-date,
.data-head {
	color: var(--bf-accent);
	font-weight: 500;
	margin-top: 0.5rem;
}
.data-head {
	font-size: calc(0.9 * var(--rem-vw));
}
.data-date {
	display: block;
	font-size: calc(1.4 * var(--rem-vw));
	font-weight: 700;
}
.special-program {
	font-size: calc(1.2 * var(--rem-vw));
}
.divider {
	border-top: thin dashed var(--bf-grey);
	width: 100%;
	margin-top: 1.5rem;
}
.divider.solid {
	border-top: thin solid var(--bf-red);
}
.divider.yellow {
	border-top: thin solid var(--bf-accent);
}
.divider-full {
	border: 0;
	border-top: 5px solid black;
	background-color: transparent;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 3rem;
}
.divider-full.white {
	border-top-color: var(--bf-white);
}
.mt-6 {
	margin-top: 1.5rem;
}
.smaller {
	font-size: 0.9em;
}
.larger {
	font-size: 1.1em;
}
@keyframes senkouPopIn {
	0% {
		opacity: 0;
		margin-right: -200px;
	}

	100% {
		opacity: 1;
		margin-right: 0;
	}
}
.opacLoop {
	animation: 2.8s cubic-bezier(0.26, 0.45, 0.45, 0.94) infinite opacityLoop
		forwards;
}

@keyframes opacityLoop {
	0% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.6;
	}
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.text-red {
	color: var(--bf-red);
}
.text-yellow {
	color: var(--bf-accent);
}
.ticket-price {
	color: var(--bf-white);
	margin-top: 1rem;
	margin-bottom: 2rem;
}
.yen > .yantra {
	font-size: 1.5em;
	font-weight: 300;
}
.total-info-title {
	font-size: calc(0.9 * var(--rem-vw));
}
.covid-notice,
.price-add,
.venue-add,
.ticket-info-tel,
.ticket-info-title {
	font-size: calc(1.1 * var(--rem-vw));
}
.ticket-price,
.ticket-venue,
.ticket-onsale-box {
	font-size: calc(1.2 * var(--rem-vw));
}
.yen {
	font-size: calc(1.4 * var(--rem-vw));
}
.cal-time {
	font-size: calc(1.6 * var(--rem-vw));
}

.ticket-onsale-box {
	margin-top: 1.5rem;
	font-weight: 700;
}
.onsale-date {
	background-color: var(--bf-accent);
	padding: 0.3rem 1rem;
	color: black;
	display: inline-block;
}
.ticket-venue {
	color: var(--bf-white);
	margin-top: 1rem;
}
.ticket-venue a,
.stream-text a {
	color: var(--bf-red);
}
.ticket-venue a:hover,
.stream-text a:hover {
	color: var(--bf-accent);
}
.ticket-info-title {
	color: var(--bf-accent);
	margin-top: 2.5rem;
}

.ticket-info-tel {
	color: var(--bf-white);
}
.total-info-tel {
	font-size: calc(0.9 * var(--rem-vw));
	color: black;
}
.theater-box {
	background-color: var(--bf-accent);
	padding-top: 2rem;
}
.theater-title {
	font-size: calc(2.2 * var(--rem-vw));
	line-height: 1;
	margin-bottom: 1.5rem;
	font-weight: 900;
}
.place-text {
	font-size: calc(2.6 * var(--rem-vw));
	font-weight: 300;
}
.place-image {
	width: 25vw;
}
.place-address {
	font-size: calc(0.8 * var(--rem-vw));
	line-height: 1.3;
	font-weight: 500;
}
.googlemap {
	padding: 1rem 2rem 2rem;
	filter: invert() grayscale();
}
.twitter-box {
	position: relative;
	padding-bottom: 12px;
}
.twitter-logo {
	width: 3.3vw;
	height: auto;
	margin: 0 auto;
	margin-top: 2rem;
}
.twitter-title {
	font-size: calc(2.2 * var(--rem-vw));
	margin-top: -0.5rem;
	margin-bottom: 0.25rem;
	color: var(--bf-accent);
	font-weight: 500;
}
.twitter-title a {
	color: var(--bf-accent);
}
.twitter-title a:hover {
	color: black;
}
.twitter {
	width: 40%;
	margin: 0 auto;
	padding: 12px;
	background-color: rgba(236, 185, 17);
	display: block;
	padding-bottom: 6px;
	opacity: 0.8;
	height: 424px;
	min-height: 400px;
}
.twitter-timeline {
	background-color: var(--bf-white);
	z-index: 5;
}
.total-info-box {
	text-align: center;
	width: 40%;
	margin: 0 auto;
	margin-bottom: calc(52 * var(--rem-vw));
	margin-top: 0.75rem;
	opacity: 0.8;
}
.bottom-banner {
	width: 100%;
	height: calc(7.5 * var(--rem-vw));
	background-color: rgba(247, 247, 247, 0.5);
	position: relative;
	display: flex;
	align-content: center;
	justify-content: center;
}
.logo-small {
	height: auto;
	width: 30.72vw;
	margin-top: 0.5vw;
}
.footer {
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.flowers-link-text {
	display: inline-block;
	position: relative;
}
.flowers-link-text a {
	display: block;
}
.flowers-link-text:hover {
	border-color: var(--bf-white);
}

.flowers-banner,
.flowers-banner-hover {
	width: calc(200vw / 10.24);
	display: block;
	transition-duration: 0.33s;
	transition-property: opacity;
}
.flowers-banner-hover {
	position: absolute;
	opacity: 0;
	bottom: 0;
	right: 0;
}
.flowers-link-text:hover .flowers-banner-hover {
	opacity: 1;
	z-index: 2;
}
.pp:hover a {
	color: var(--bf-white);
}
.credit-bottom {
	margin-top: 0.5rem;
	font-size: calc(0.7 * var(--rem-vw));
	line-height: 2;
	isolation: isolate;
	color: var(--bf-accent);
}
.pp {
	font-size: calc(0.7 * var(--rem-vw));
}
.pp a {
	color: var(--bf-accent);
}
.story-title,
.cast-title,
.schedule-title {
	font-weight: 400;
}
.theater-title {
	font-size: 2.2rem;
}

@media screen and (min-width: 850px) {
	.visual-image {
		border-bottom: 0;
	}
}
@media screen and (min-width: 1024px) {
	#intro {
		font-size: 2rem;
	}
	.yellow-image {
		top: calc(var(--pc-width) * 0.26);
		height: calc(var(--pc-width) * 0.76);
	}

	.june-image {
		top: calc(var(--pc-width) * 1.194);
	}
	.visual-box {
		height: calc(var(--pc-width) * 1.415);
	}
	.bar-image {
		top: calc(var(--pc-width) * 0.14);
		left: calc(var(--pc-width) * 0.11);
		width: calc(var(--pc-width) * 0.37);
	}
	@keyframes yellowSlideDown {
		0% {
			opacity: 0;
			height: 0;
		}

		100% {
			opacity: 1;
			height: calc(var(--pc-width) * 0.76);
		}
	}
	@keyframes juneMoveUp {
		0% {
			opacity: 0;
			top: 130vw;
		}

		100% {
			opacity: 1;
			top: calc(var(--pc-width) * 1.194);
		}
	}
	.story-title,
	.cast-title,
	.schedule-title {
		font-size: 4.2rem;
	}
	.cast-image-item::after {
		top: calc(var(--pc-width) * 0.28);
		height: calc(var(--pc-width) * 0.855);
	}
	.schedule-notice,
	.sideseat-notice {
		font-size: 0.8rem;
	}
	.title-box,
	.cast-andmore {
		font-size: 1.6rem;
	}
	.credit {
		font-size: 0.8rem;
	}
	.place-address {
		font-size: 0.7rem;
	}
	.flowers-link-text {
		font-size: 0.9rem;
	}
	.year {
		font-size: 2rem;
	}
	.total-info-title,
	.total-tel-title {
		font-size: 0.9rem;
	}
	.covid-notice,
	.price-add,
	.venue-add,
	.ticket-info-tel,
	.ticket-info-title {
		font-size: 1.1rem;
	}
	.ticket-price,
	.ticket-venue,
	.ticket-onsale-box {
		font-size: 1.2rem;
	}
	.yen {
		font-size: 1.4rem;
	}
	.cal-time {
		font-size: 1.6rem;
	}
	.cast-image-item::before,
	.cast-image-item::after,
	.cal-day {
		font-size: 1.4rem;
	}
	.news-date {
		font-size: 0.8rem;
	}
	.new-tick {
		font-size: 0.7rem;
	}
	.news-title {
		font-size: 1.1rem;
	}
	.news-text {
		font-size: 0.9rem;
	}
	.news-info-title,
	.twitter-title {
		font-size: 2.2rem;
	}

	.place-text {
		font-size: 2.6rem;
	}
	.place-image {
		width: 256px;
	}
	.cal-date {
		font-size: 3.4rem;
	}
	.flowers-banner,
	.flowers-banner-hover {
		width: 200px;
	}
	.credit-bottom,
	.pp {
		font-size: 0.7rem;
	}
	.bottom-banner {
		height: 120px;
	}
	.covid-window-close,
	.comment-window-close,
	.view-window-close,
	.br-news-window-close {
		font-size: 1.5rem;
	}
	.total-info-box {
		margin-bottom: 800px;
	}
	.logo-small {
		width: 300px;
		margin-top: calc(var(--pc-width) * -0.01px);
	}
	.dokusyasenkou {
		width: calc(0.18 * var(--pc-width));
	}
	.day-off.noto {
		font-size: 1rem;
	}
	.cast-comment-title {
		width: calc(0.19 * var(--pc-width));
	}
	.comment {
		font-size: 1.4rem;
		letter-spacing: 0.25rem;
	}

	.cast-list {
		font-size: 1.9rem;
	}
	.character {
		font-size: 0.9rem;
	}
	.cast-add {
		font-size: 1.3rem;
	}
	.comment-text-head {
		font-size: 1.4rem;
	}
	.comment-text {
		font-size: 0.9rem;
	}
	.cast-view-flex {
		width: calc(var(--pc-width) * 0.7);
		height: calc(1.3808 * var(--pc-width) * 0.7);
		left: calc(50vw - var(--pc-width) * 0.35);
		top: calc(var(--pc-width) * 0.1);
	}
	.total-info-tel {
		font-size: 0.9rem;
	}
	.stream-text,
	.goods-text {
		font-size: 1.2rem;
	}
	.stream-head-text,
	.theater-copy {
		font-size: 1rem;
	}
	.goods-head-text {
		font-size: 1.1rem;
	}
	.stream-notice {
		font-size: 0.8rem;
	}
	.stream-site-title {
		font-size: 0.9rem;
	}
	.complex-notice {
		font-size: 0.9rem;
	}
	.story-text {
		font-size: 1rem;
	}
	.special-program-data {
		font-size: 0.9rem;
	}
	.data-notice {
		font-size: 0.8rem;
	}
	.data-head,
	.data-copy {
		font-size: 0.9rem;
	}
	.special-program {
		font-size: 1.2rem;
	}
	.data-date {
		font-size: 1.4rem;
	}

	.bluray-info,
	.bluray-box {
		font-size: 0.9rem;
	}
	.bluray-text {
		font-size: 1rem;
	}

	.bluray-title {
		font-size: 1.3rem;
	}
	.reserve-now {
		margin-top: 1rem;
	}
	.reserve-now-button,
	.goods-button {
		font-size: 1.2rem;
	}
	.complex-notice {
		font-size: 0.9rem;
	}
}
@media screen and (max-width: 600px) {
	#intro {
		font-size: 1.2rem;
	}
	.info-box {
		flex-direction: column;
	}
	.credit {
		align-self: flex-start;
		flex: 1 0 100%;
		padding: 0.5rem 0;
	}
	.covid-notice::after {
		bottom: 12px;
		right: 6px;
		width: 12px;
		height: 12px;
	}
	.schedule-notice,
	.sideseat-notice {
		font-size: 0.7rem;
	}
	.sideseat-notice {
		margin-top: 0;
	}
	.data-box {
		padding: 0.5rem;
	}
	.title-box {
		font-size: 1rem;
	}
	.credit {
		font-size: 0.7rem;
	}
	.covid-notice {
		font-size: 0.8rem;
		text-align: center;
		margin: 1rem 0;
		justify-self: center;
		margin-bottom: 0.5rem;
		border-top-width: 4px;
		border-bottom-width: 4px;
	}
	.covid-notice:hover {
		border-top-width: 4px;
		border-bottom-width: 4px;
	}
	.covid-notice a {
		padding: 0.6rem 0;
	}
	.news-info-title {
		font-size: 1.6rem;
	}
	.news-date,
	.news-title {
		padding: 0 0.5rem;
	}
	.new-tick {
		margin: 0 0.2rem;
		padding: 0 0.4rem 0.1rem;
		font-size: 0.7rem;
		transform: translate(0, 0);
	}
	.news-info-outer {
		padding: 0 0.7rem 0.8rem;
	}
	.news-date {
		font-size: 0.8rem;
		margin-left: -0.5rem;
	}
	.news-title {
		font-size: 0.8rem;
		margin-right: 1.8em;
		padding-bottom: 0.3rem;
	}
	.news-text {
		padding: 0.5rem 0.5rem;
		font-size: 0.8rem;
		line-height: 1.5;
	}

	.cast-andmore {
		font-size: 1.4rem;
	}
	.calendar-outer {
		position: relative;
	}
	.calendar-box {
		width: calc(100% - 3rem);
		overflow-x: scroll;
		margin: 0.5rem 1.5rem;
		position: relative;
	}

	.arrows {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		content: "";
		overflow: hidden;
	}
	.arrow-right,
	.arrow-left {
		position: absolute;
		right: 5px;
		top: 40%;
		width: 12px;
		height: 12px;
		border-top: 2px solid var(--bf-accent);
		border-right: 2px solid var(--bf-accent);
		content: "";
		opacity: 0.8;
		transform: rotate(45deg) scale(1.2);
	}
	.arrow-right::before,
	.arrow-left::before {
		border-radius: 30px;
		background-color: rgba(255, 255, 255, 0.2);
		width: 24px;
		height: 24px;
		content: "";
		position: absolute;
		transform: translate(-5px, -9px);
	}
	.arrow-left::before {
		left: 2px;
		transform: translate(-6px, -10px);
	}
	.arrow-left {
		transform: rotate(225deg) scale(1.2);
		right: unset;
		left: 5px;
		display: none;
	}
	.arrow-left:hover,
	.arrow-right:hover {
		cursor: pointer;
	}
	.schedule-calendar {
		width: 100%;
		padding: 0.5rem 0;
		position: relative;
	}
	.forsp {
		display: inline;
	}
	.month {
		position: relative;
		margin-right: -1rem;
	}
	.cal-date {
		font-size: 1.8rem;
	}
	.cal-day {
		font-size: 0.9rem;
	}
	.cal-time {
		font-size: 1rem;
		padding: 1rem 0.4rem 0;
	}
	.day-off.noto {
		font-size: 0.65rem;
		letter-spacing: 0px;
		padding: 1rem 0 0;
	}
	.ticket-price {
		font-size: 1.1rem;
		line-height: 1.6;
		margin-bottom: 0;
	}
	.ticket-onsale-box {
		margin-top: 1rem;
	}
	.onsale-date {
		padding: 0.3rem 0.5rem;
	}
	.covid-notice,
	.price-add,
	.venue-add,
	.ticket-info-tel,
	.total-info-tel,
	.ticket-info-title,
	.total-info-title {
		font-size: 0.8rem;
	}
	.ticket-price,
	.ticket-venue,
	.ticket-onsale-box {
		font-size: 0.9rem;
	}
	.ticket-onsale-box {
		margin-top: 0.5rem;
	}
	.ticket-venue {
		margin-top: 0.5rem;
	}
	.ticket-info-title {
		margin-top: 1.5rem;
	}
	.yen {
		font-size: 1rem;
	}
	.ticket-info-tel,
	.total-info-tel {
		margin-top: 0.3rem;
	}
	.price-add {
		margin-top: -0.5rem;
	}
	.hr-yellow,
	.hr-black {
		margin-top: 0.3rem;
		border-top-width: 3px;
		width: 45%;
	}
	.hr-black.onwhite {
		margin-top: 0rem;
	}
	.hr-yellow.long {
		width: 70%;
	}
	.dokusyasenkou {
		top: 1rem;
		width: calc(135 / 320 * 100vw);
		max-width: 160px;
	}
	.story-title,
	.cast-title,
	.ticket-titile,
	.schedule-title {
		font-size: 2rem;
	}
	.theater-title {
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}
	.place-text {
		font-size: 1.5rem;
		font-weight: 400;
	}
	.place-image {
		width: 45vw;
	}
	.place-address {
		font-size: 0.8rem;
		margin-top: 0.2rem;
		padding: 0 1rem;
	}
	.googlemap {
		padding: 0.8rem 1rem;
		padding-top: 0;
	}
	.twitter-logo {
		width: 10vw;
	}
	.twitter-title {
		font-size: 2.4rem;
		font-weight: 900;
		margin-top: 0;
		line-height: 1;
		margin-bottom: 0.5rem;
	}
	.twitter {
		width: calc(100% - 2rem);
		margin: 0 1rem;
		padding: 6px;
		padding-bottom: 0;
		height: auto;
	}
	.flowers-banner,
	.flowers-banner-hover {
		width: 28vw;
	}
	.credit-bottom {
		font-size: 0.6rem;
		line-height: 1.6;
	}
	.pp {
		font-size: 0.6rem;
		margin-top: 0.4rem;
	}
	.covid-window-box {
		width: 100%;
		top: 0;
		height: 100%;
		left: 0;
		z-index: 2;
	}
	.covid-window {
		font-size: 0.7rem;
		padding: 2rem 1rem;
		top: 10%;
		left: 5%;
		width: 90%;
		height: auto;
		z-index: 2;
		/* overflow-y: scroll; */
		filter: drop-shadow(0.5rem 0.5rem 1rem black);
	}
	.covid-window-close,
	.comment-window-close,
	.view-window-close,
	.br-news-window-close {
		font-size: 1.3rem;
		padding: 2px 7px 8px 6px;
		line-height: 1;
		display: flex;
		align-content: center;
		justify-items: center;
	}
	.comment-window-close {
		padding: 4px 7px 7px 6px;
	}
	.br-news-box {
		margin-bottom: 8rem;
	}
	.year {
		font-size: 1.1rem;
		margin-top: 1rem;
	}
	.text-sp-left > span {
		margin-left: -0.8rem;
	}
	.text-sp-left {
		text-align: left;
		padding-left: 0.8rem;
	}
	.brsp {
		display: block;
	}
	.brnosp,
	.brnosp-inline {
		display: none;
	}
	.bottom-banner {
		height: 13vw;
	}
	.logo-small {
		width: 45vw;
		margin-top: -1vw;
	}
	.footer {
		padding-top: 1rem;
		padding-bottom: 2rem;
	}
	.cast-list,
	.comment-text-head {
		font-size: 1rem;
		white-space: nowrap;
	}
	.cast-list {
		line-height: 1.8;
		padding-top: 0;
		margin-top: -0.5rem;
	}
	.cast-nav-button {
		top: calc(50% - 22px);
	}
	.cast-nav-left {
		left: 1rem;
	}
	.cast-nav-right {
		right: 1rem;
	}
	.mr-20 {
		margin-right: 9rem;
	}
	.cast-name-box {
		display: flex;
		flex-direction: column;
		margin-top: -16.4vw;
		height: 16.4vw;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 0.5rem;
	}
	.cast-item-outer {
		display: flex;
		flex-direction: column;
		width: 25%;
		flex: 0 0 25%;
		padding-right: 0.25rem;
	}
	.cast-item-outer:last-child {
		margin-right: -0.25rem;
	}
	.character {
		font-size: 0.7rem;
	}
	.cast-add {
		font-size: 0.9rem;
		height: 100%;
		padding: 2rem 4rem;
	}
	.comment-box-outer {
		padding: 2rem 1rem 3rem 1rem;
	}
	.comment-box {
		padding: 1rem 0.8rem 1.5rem;
	}
	.cast-comment-title {
		width: 46vw;
	}
	.comment {
		font-size: 1.2rem;
	}
	.comment-text {
		font-size: 0.9rem;
		line-height: 1.6;
	}
	.total-info-box {
		width: calc(100% - 1rem);
	}
	.story-text {
		padding: 0 1rem;
		font-size: 0.8rem;
		line-height: 1.6;
	}
	.cast-comment {
		top: -23px;
	}
	.comment {
		height: 23px;
	}
	.stream-box {
		padding-left: 0.8rem;
		padding-right: 0.8rem;
		padding-bottom: 2rem;
	}
	.stream-text,
	.goods-text {
		font-size: 1rem;
		margin-left: 0;
		margin-right: 0;
	}
	.stream-notice {
		font-size: 0.6rem;
		text-align: left;
	}
	.stream-site-title {
		font-size: 0.8rem;
		width: 40vw;
		margin-top: 0;
	}
	.comment-box-border {
		width: 90vw;
		left: 5vw;
		height: 360px;
		top: calc(50vh - 360px / 2);
	}

	.comment-box {
		width: 90vw;
		left: 5vw;
		height: 360px;
		top: calc(50vh - 360px / 2);
		padding: 1rem 1.3rem 1.5rem;
	}
	.cast-view-flex {
		width: 90vw;
		height: calc(1.3808 * 90vw);
		left: 5vw;
		top: 15vw;
	}
	.actor {
		margin-top: 0.3rem;
	}
	.stream-head-text {
		font-size: 0.8rem;
		text-align: left;
	}
	.theater-copy {
		font-size: 0.8rem;
	}
	.stream-data-box {
		width: 100%;
	}
	.special-program {
		font-size: 1rem;
		padding: 0.2rem 0.4rem 0.3rem;
		margin-top: 2rem;
	}
	.data-date {
		font-size: 1.2rem;
	}
	.data-copy,
	.data-head,
	.special-program-data {
		font-size: 0.8rem;
	}
	.data-notice {
		font-size: 0.655rem;
	}
	.stream-notice-ul {
		text-indent: -0.6rem;
	}
	.divider,
	.mt-6 {
		margin-top: 0.5rem;
	}
	.goods-head-text {
		font-size: 0.8rem;
	}
	.text-md-center {
		text-align: center;
	}
	.story-title,
	.schedule-box,
	.ticket-box,
	.stream-box,
	.goods-box {
		padding-top: 2rem;
	}
	.schedule-title.ticket {
		margin-top: 0;
	}
	.cast-row {
		margin-top: 1rem;
	}
	.cast-add {
		padding: 1rem 0;
	}
	.schedule-notice {
		padding-bottom: 1rem;
	}
	.side-seat {
		margin-top: 0.5rem;
	}
	.complex-notice, .bluray-info {
		font-size: 0.8rem;
		padding: 0.5rem 0.5rem;
		margin: 1rem 0;
	}
	.bluray-text {
		margin-left: 0.8rem;
		margin-right: 0.8rem;
	}
	.me-0 {
		margin-block-end: 0;
	}
	.reserve-copy {
		margin-top: 0.5rem;
	}
	.reserve-now-button,
	.goods-button {
		font-size: 1.2rem;
	}
	.goods-box {padding-bottom: 2rem;}
	.bluray-text {
		font-size: 0.8rem;
	}
	.bluray-info,
	.bluray-box {
		font-size: 0.8rem;
	}
	.bluray-title {
		font-size: 1.0rem;
	}
	.bluray-body {
		margin-top: 2rem;
	}
}