@charset "UTF-8";

#contents{background-color: var(--main01);padding: 90px 0 180px;}

#comments-header{background-image: url(../img/page-header.jpg);}
.container-mini{max-width: 640px;}

#comments-list{color: #fff;}
.comments-txt p{font-size: 18px;font-size: 1.8rem;line-height: 1.75;margin-bottom: 15px;}
.comments-txt h3{position: relative;font-size: 24px;font-size: 2.4rem;line-height: 1.25;color: var(--key01);text-align: right;}
.comments-txt h3 span{display: inline-block;font-size: 70%;transform: translateY(-2px);padding-left: 2px;}
.comments-txt h3::before{content: '——— ';}
.comments-txt:not(:last-of-type){margin-bottom: 90px;}





#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%;aspect-ratio: 16 / 9;}
#trailer .mov iframe{display: block;width: 100%;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-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%;}
}