@charset "utf-8";
/*--****************************************



@



*****************************************--*/
* {
  box-sizing: border-box;
}

body, html {
	background-color: #000000;
	color: #FFF;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#wrapper {
	width: 100%;
	background: #000;
	overflow-x: scroll;
	display: block;
	opacity: 1;
	-webkit-opacity: 1;
	border-bottom: 1px solid #555;
	-moz-opacity: 1;
}

#wrapper img {
  width: 100%;
  vertical-align: middle;
}

.w100 {
  width: 100%;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 30px; /*追加*/
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

section {
	margin: 14% auto 0;
}

.contents-ttl {
	position: relative;
	margin: 0 auto 8%;
}

.contents-ttl::before {
	content: "";
	display: block;
	width: 90%;
	border-bottom: solid 1px #d1000d;
	position: absolute;
	top: 60%;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.ttl-img {
	width: 35%;
	margin: 0 auto;
	position: relative;
}

/*-------------------------------

top

-------------------------------*/

#top{
	margin: 0 auto 5%;
}

.mv {
	width: 100%;
	margin: 0 auto;
}

.copy {
	width: 85%;
	margin: 3% auto 8%;
}

.rs {
	width: 85%;
	margin: 0 auto;
}

.news-btn {
	width: 50%;
	display: block;
	margin: 6% auto 0;
}

/*-------------------------------

trailer

-------------------------------*/

.trailer-movie-iframe {
	width: 80%;
	margin: 0 auto;
	aspect-ratio: 16/9;
}

/*-------------------------------

theater

-------------------------------*/
#theater {
	margin: 9% auto 0;
	width: 59%;
}

.theater-ttl {
	font-size: 1.1em;
	font-weight: bold;
	border-bottom: solid 1px #d1000d;
	display: inline-block;
	/* margin-bottom: .5em; */
	padding-bottom: 2px;
}

.theater-txt {
	font-size: 1.3em;
	font-weight: normal;
	padding: 0 5%;
}

/*-------------------------------

performer

-------------------------------*/

.performer-box {
	margin: 2em auto 0;
	padding: 0 5%;
	font-size: 1.1em;
	line-height: 2;
}

.performer-box span {
	font-size: .8em;
}

.performer-ttl {
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: .5em;
}

.performer-ttl span {
	font-weight: normal;
}

.performer-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.performer-wrap2 {
	margin: 7% auto 0;
}

.cast-container {
	width: 42%;
	font-family: 'Noto Serif JP', serif;
	margin: 4% 2%;
}

.cast-box {
	position: relative;
	border: solid 1px #d1000d;
}

.cast-name-box {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0.6979385504201681) 0%, rgba(0,0,0,0.3926164215686274) 66%, rgba(0,0,0,0) 100%);
	padding: 8px 0 5px;
}

.cast-name {
	font-weight: bold;
	line-height: 1.6;
}

.cast-name span {
	font-size: 11px;
	display: block;
	letter-spacing: 1px;
	font-weight: normal;
}

.actor-name {
	font-size: 14px;
	margin: 7px auto 0;
	line-height: 1.5;
}

.actor-name span {
	font-size: 10px;
	display: block;
}

.performer-group-ttl {
	width: 100%;
	margin: 11% auto 2%;
}


/*-------------------------------

story

-------------------------------*/

.story-txt {
	padding: 0 7%;
	text-align: left;
	line-height: 2;
	font-size: 13px;
}

/*-------------------------------

staff

-------------------------------*/

.staff-wrap {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0 auto 1em;
	padding: 0 1em;
	width: 18em;
}

.staff-wrap dt {
	border-bottom: solid 1px #d1000d;
	display: inline-block;
	margin-right: 1.1em;
	padding-bottom: 2px;
}

.staff-wrap span {
	font-size: .7em;
}

/*-------------------------------

schedule

-------------------------------*/

.list-img {
	width: 87%;
	margin: 0 auto;
}

.schedule-att {
	font-size: 10px;
	margin: 3em auto 0;
	line-height: 2;
}

/*-------------------------------

ticket

-------------------------------*/
.price-txt {
	line-height: 2;
	padding: 0 5%;
}

.price-txt span {
	font-size: .7em;
	line-height: 2;
	display: block;
	margin: 1.5em auto 0;
}

.ticket-wrap {
	width: 90%;
	margin: 10% auto 0;
	text-align: left;
	border: solid 1px #aaaaaa;
}

.entry-site-name {
	background: #aaaaaa;
	color: #000;
	font-weight: bold;
	padding: 3%;
	line-height: 1.4;
}

.entry-detail-txt {
	font-size: 14px;
	margin: 0 auto;
	padding: 5%;
}

.site-logo {
	width: 60%;
	margin: 0 auto;
}

.entry-btn {
	background: #fff;
	color: #000;
	width: 90%;
	display: block;
	position: relative;
	text-align: center;
	font-weight: bold;
	margin: 8% auto 5%;
	padding: 1em;
}

.entry-btn::after {
	content: "";
	position: absolute;
	width: 0.7em;
	height: 0.7em;
	border-top: solid 2px #000;
	border-right: solid 2px #000;
	bottom: 1.3em;
	right: 1em;
	transform: rotate(45deg);
}

.footer-bnr-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin: 10% auto;
}

.footer-bnr {
	width: 45%;
	margin: 1.5%;
}

.info-container {
	padding: 0 5% 5%;
	font-size: 13px;
	text-align: center;
}

.info-container a {
	text-decoration: underline;
}

.performer-wrap3 {
	display: flex;
	overflow-x: scroll;
	flex-wrap: nowrap;
	margin: 12% auto 0;
	padding: 0 2%;
	align-items: flex-start;
}

.cast-container2 {
	width: 35%;
	min-width: 130px;
	margin: 0 5%;
	font-family: 'Noto Serif JP', serif;
}

.team-name {
	margin: 7% auto;
	line-height: 1.6;
	font-size: 10px;
	white-space: nowrap;
}

.team-name span {
	font-size: .9em;
}

.arrow-right-icon {
	color: #fff;
	position: relative;
	width: 40px;
	height: 1px;
	background-color: currentColor;
	margin: 6% auto;
	animation: swipe-right 2s ease infinite;
}

.arrow-right-icon:before {
	content: '';
	position: absolute;
	right: 2px;
	top: -3.4px;
	width: 10px;
	height: 10px;
	border-top: solid 1px currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(35deg);
}

@keyframes swipe-right {
	0% {
    transform: translateX(-15px);
	}
100% {
    transform: translateX(15px);
	}
}

.other-wrap {
	margin: 20% auto 0;
}

.goods-ttl {
	width: 54%;
}

.goods-img-wrap {
	display: block;
	width: 90%;
	margin: 0 auto 5%;
	position: relative;
}

.magnify.icon {
	color: #fff;
	position: absolute;
	margin-top: 7px;
	margin-left: 7px;
	width: 30px;
	height: 30px;
	border: solid 2px currentColor;
	border-radius: 100%;
}

.magnify.icon:before {
	content: '';
	position: absolute;
	top: 22px;
	left: 27px;
	height: 6px;
	width: 2px;
	height: 14px;
	display: block;
	background-color: #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.magnify.icon i {
	position: absolute;
	left: 7px;
	top: 13px;
}

.magnify.icon i:before {
	content: '';
	position: absolute;
	width: 12px;
	height: 2px;
	background-color: currentColor;
}

.magnify.icon i:after {
	content: '';
	position: absolute;
	width: 12px;
	height: 2px;
	background-color: currentColor;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.magnify-bg {
	background: #d1000d;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
}

.store-wrap {
	margin: 6% auto 10%;
	padding: 0 0 5%;
	width: 90%;
	border: solid 1px #aaa;
}

.store-name {
	background: #aaa;
	color: #000;
	font-weight: bold;
	padding: 3px 0;
	margin: 0 auto 4%;
}

.store-btn {
	background: #fff;
	color: #000;
	width: 80%;
	display: block;
	position: relative;
	text-align: center;
	margin: 1em auto;
	padding: 11px;
}


.store-btn::after {
	content: "";
	position: absolute;
	width: 0.6em;
	height: 0.6em;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	bottom: 1.2em;
	right: 0.8em;
	transform: rotate(45deg);
}

.store-att {
	margin-top: 10px;
	padding: 0 10px;
	font-size: .8em;
}

.store-txt {
	padding: 10px;
}

.att-container {
	font-size: .8em;
	width: 90%;
	margin: 0 auto 5%;
}

.att-container p:nth-child(1) {
	font-size: 1.1em;
	margin-bottom: 3%;
	padding-bottom: 1%;
	border-bottom: solid 1px #fff;
}

.att-container p:nth-child(2) {
	text-align: left;
	padding: 0 2%;
}

.goods-btn {
	background: #d1000d;
	color: #fff;
	width: 70%;
	display: block;
	position: relative;
	text-align: center;
	margin: 1em auto 3em;
	padding: 7px;
	font-size: 14px;
}

.goods-btn::after {
	content: "";
	position: absolute;
	width: 0.6em;
	height: 0.6em;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	bottom: 1em;
	right: .8em;
	transform: rotate(45deg);
}

.dvd-link {
	width: 80%;
	display: block;
	margin: 10% auto -4%;
}