@charset "UTF-8";

#contents{padding: 0;background-color: var(--back01);z-index: 1111;}

#mainimg {
	position: relative;
	margin: 0px;
	padding: 2.5% 0;
	z-index: 2222;
	width: 100%;
	height: 100vh;
	height: 100svh;
/* 	height: auto; */
	min-height: 760px;
/* 	min-height: 100svh; */
	background: url(../img/main.jpg) no-repeat center bottom;
	background-size: cover;
}
#mainimg-body{
	position: relative;
	padding: 0;
/* 	overflow: hidden; */
	height: 100%;
}
#main-title {position: relative;height: 50%;}
#main-title h1{position: relative;margin: 0 auto;line-height: 1;width: 100%;max-width: 640px;padding-bottom: 3.4%;}
#main-title h1 img {display: block;width: 100%;filter: drop-shadow(0px 0px 3px rgba(10,87,118,1));margin: 0 auto;}
#main-title span {display: block;}
#main-title span img{display: block;width: 100%;filter: drop-shadow(0px 0px 3px rgba(10,87,118,1));}
#maintitle-01{position: absolute;top: 50px;left: 0;width: 16.975308641975309%;max-width: 220px;}

#main-copy {position: relative;height: 50%;padding-top: 2%;}
#main-copy img{display: block;width: 100%;}
#maintitle-02{position: absolute;top: 36px;left: 60%;width: 10%;max-width: 100px;}
#maincopy-01{width: 19.753086419753086%;max-width: 256px;filter: drop-shadow(0px 0px 3px rgba(10,87,118,1));}
#maincopy-02{width: 26.851851851851852%;max-width: 348px;filter: drop-shadow(0px 0px 3px rgba(10,87,118,1));}

@media (max-height: 760px) and (orientation: landscape) {
	#mainimg {min-height: 760px;}
}

@media (max-width: 960px) {
	#mainimg {padding: 7.5% 0;min-height: 100svh;}

	#main-title h1{width: 90%;}
	#maintitle-01{position: relative;top: auto;left: auto;width: 30%;max-width: 220px;margin: 0 auto;}
	#maintitle-02{top: 50%;left: 65%;}
	#maincopy-01,
	#maincopy-02 {width: 30%;}
}
@media (max-width: 767px) {
	#mainimg {padding: 7.5% 0;}
	#main-title {height: 45%;}
	#main-copy {height: 55%;}

	#maincopy-01{width: 50%;margin: 0 auto 80px;}
	#maincopy-02{width: 75%;margin: 0 auto;}
}
/*
@media (max-width: 400px) {
	#mainimg {min-height: auto;}
}
*/

#intro {padding: 90px 0;background-color: var(--main01);color: #fff;z-index: 333;}
#intro h1{color: #fff;}
#intro h1 span{color: var(--key01);}
#intro-desc{position: relative;}
#intro-img{position: absolute;left: 0;top: 60px;width: 60%;z-index: 222;}
#intro-img img{display: block;width: 100%;position: relative;}
#intro-txt{position: relative;width: 50%;margin-left: 50%;background-color: var(--back03);padding: 0 5vw;z-index: 333;line-height: 1.8;}

@media (max-width: 767px) {
	#intro-txt{width: 65%;margin-left: 35%;}
}
@media (max-width: 767px) {
	#intro-img{position: relative;width: 90%;margin: 0 auto 30px;top: auto;}
	#intro-txt{width: 90%;margin: 0 auto;}
}


#story {position: relative;padding: 0 0 60px;z-index: 222;clip-path: inset(0 0 0 0);}
#story::before{content: '';display: block;width: 100%;height: 100vh;position: fixed;bottom: 0;left: 0; background: url(../img/story.jpg) no-repeat center bottom;background-size: 1440px;z-index: -111;}
#story .container-s{padding: 100vh 0;}
#story-txt{position: relative;padding: 60px 10%;z-index: 222;background-color: rgba(253,245,246,0.9);line-height: 1.8;}

@media (max-height: 760px) and (orientation: landscape) {
	#story::before {background-size: contain;}
}
@media (max-width: 1296px) {
	#story::before {background-size: contain;}
}
@media (max-width: 960px) {
	#story::before {background-position: center top;}
}
@media (max-width: 800px) {
	#story .container-s{padding: 50vh 0;}
}

#image{position: relative;padding: 0;background-color: var(--back01);z-index: 333;}
#image img{display: block;width: 33.3333333333%;}
@media (max-width: 960px) {
	#image img{width: 50%;}
}

#cast {padding: 90px 0 33.3333333333%;background-color: var(--back02);color: #fff;z-index: 333;}
#cast h1{color: #fff;}
#cast h1 span{color: var(--key01);}
#cast::before{content: '';position: absolute;bottom: 0;left: 0;display: block;width: 100%;height: 33.3333333333vw;max-height: 770px;background: url(../img/cast-img.jpg) no-repeat center center;background-size: cover;}
#cast-list{position: relative;border-bottom: 1px solid #fff;}
#cast-list::after{content: '';width: 31.25%;}
.cast-detail{width: 31.25%;margin-bottom: 60px;}
.cast-img {margin-bottom: 20px;}
.cast-img img{display: block;width: 100%;}
.cast-txt h3{font-size: 26px;font-size: 2.6rem;margin-bottom: 17px;text-align: center;}
.cast-txt h3 span {font-size: 60%;}
.cast-txt h3 span.roll{display: inline-block;line-height: 1;font-size: 60%;font-size: 0.6em;color: var(--key01);padding-left: 15px;transform: translateY(-3px)}
.cast-txt p{font-size: 14px;font-size: 1.4rem;}
#staff {position: relative;padding-top: 80px;}
#staff .cast-txt h3 span.roll{display: block;margin-bottom: 5px;padding: 0;}
.staff-detail{margin-bottom: 60px;}
/* #staff-list {padding-top: 60px;} */
#staff-list .staff-detail{width: 31.25%;margin-bottom: 60px;}
/* .staff-detail:not(:last-of-type){margin-bottom: 60px;} */
#staff h2{font-size: 26px;font-size: 2.6rem;text-align: center;margin-bottom: 17px;color: var(--key01);}

@media (max-width: 960px) {
	.cast-detail{width: 48%;}
}

@media (max-width: 767px) {
	.cast-detail,
	#staff-list .staff-detail{width: 100%;}
}


#trailer{padding: 90px 0;background-color: #fff;z-index: 333;}
#trailer .mov{width: 48%;}
#trailer .mov iframe{display: block;width: 100%;aspect-ratio: 16 / 9;/* height: 100%;object-fit: cover;object-position: center; */margin-bottom: 10px;}
#trailer .mov h3 {font-size: 26px;font-size: 2.6rem;text-align: center;color: #444444;}
#trailer .mov h3 span{font-size: 60%;display: inline-block;line-height: 1;font-size: 60%;font-size: 0.6em;padding-left: 5px;transform: translateY(-3px)}

@media (max-width: 767px) {
	#trailer .mov{width: 100%;}
	#trailer .mov:not(:last-of-type){margin-bottom: 60px;}
}


#theater {padding: 120px 0 10px;background-color: var(--back01);z-index: 333;}
#theater h1{margin-bottom: 30px;}
#mvtk{margin-bottom: 30px;}
#mvtk-widgets-container{margin: 0 auto;}

.theater-table {margin-bottom: 60px;}
.theater-table h2{font-size: 20px;font-size: 2.0rem;margin-bottom: 20px;line-height: 1.25;letter-spacing: 0.12em;text-align: center;padding-left: 0.12em;}
.theater-table table{width: 100%;border-bottom: 1px solid #444444;}
.theater-table table td{border-top: 1px solid #444444;line-height: 1.25;padding: 15px 0;text-align: left}
.theater-table table td.theater-area{width: 15%;padding-right: 20px;}
.theater-table table td.theater-name{width: 50%;padding-right: 20px;}
.theater-table table td.theater-date{padding-right: 0;}

#theater-img{display: block;margin: 0 auto;}

@media (max-width: 960px) {
	.theater-table table td.theater-area{width: 12%;}
}