@charset "UTF-8";



section h2{
	text-align: center !important;
	margin-bottom: 60px;
	color: #f53d7e;
}
.img-title{
	margin:0 auto;
}

@media (max-width: 767px){
section h2{
	text-align: center;
	margin-bottom: 20px;
}
.img-title{
	zoom:0.5;
	margin:0 auto;
}

}


#Hero{
	height: 560px;
	background: url(/seat/willertheater/img/bg-hero.jpg) bottom center;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
}
#Hero h1{
	width: 100%;
	text-align: center;
	position: absolute;
	bottom:50%;
	right: 0;
	z-index: 2;
	margin-bottom: -80px;
}
#Hero h1 img{
	margin:0 auto;
	width: 100%;
	max-width: 800px;
}
.wrap-hand{
	position: absolute;
	bottom:0;
	left: 0px;
	z-index: 1;
}
@media (max-width: 1200px){
#Hero{
	background-size: cover;
	background: url(/seat/willertheater/img/bg-hero-md.jpg) bottom right;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
}
#Hero h1 img{
	zoom:0.8;
}
.wrap-hand{
	position: absolute;
	bottom:0;
	left: -60px;
	z-index: 1;
}
#Hero h1{
	width: 100%;
	text-align: right;
	position: absolute;
	bottom:100px;
	right: 0;
	z-index: 2;
}
}
@media (max-width: 900px){
.wrap-hand{
	position: absolute;
	bottom:0;
	left: -60px;
	z-index: 1;
	max-width: 550px;
}
#Hero h1{
	width: 100%;
	text-align: center;
	position: absolute;
	bottom:100px;
	right: 0;
	z-index: 2;
}
}
@media (max-width: 767px){
#Hero{
	height: 425px;
	background: url(/seat/willertheater/img/bg-hero-sp.jpg) center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
}

}
@media (max-width: 567px){
#Hero{
	height: 425px;
	background: url(/seat/willertheater/img/bg-hero-sp.jpg) center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
}
#Hero h1{
	width: 100%;
	text-align: center;
	position: absolute;
	top:10px;
	bottom:auto;
	right: 0;
	z-index: 2;
}
}
#about{
	padding: 140px 0;
}
.col-abot-text{
	float: left;
	width: 60%;
	padding-right: 60px;
}
.col-about-img{
	float: left;
	width: 40%;
	padding: 0 20px;
}
.col-abot-text h2{
	font-size: 24px;
	margin-bottom: 24px;
	color: #f53d7e;
	text-align: left !important;
}
.col-abot-text p{
	font-size: 16px;
	font-weight: normal;
	line-height: 1.8;
}
.link-motto{
	text-align:center;
	margin-top: 48px;
}
.link-motto a{
	background: url(/static/img/index/bg-stripe-pink.png) top left;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	padding: 8px 25px;
	border-radius: 50px;
	color: #f53d7e;
	text-align: center;
	margin: 0 auto;
	width: 90%;
}
.link-motto a:after{
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #f53d7e;
	margin-left: 15px;
}
.link-motto a:hover{
	color: #f53d7e;
}

@media (max-width: 767px){
	#about{
		padding: 40px 0;
	}
	.col-abot-text{
		float: none;
		width: 100%;
		padding-right: 0px;
	}
	.col-abot-text h2{
		text-align: center !important;
	}
	.col-about-img{
		float: none;
		width: 100%;
		padding: 20px 60px 0;
		text-align: center;
	}
.col-abot-text h2{
	font-size: 20px;
	text-align: center;
}
.col-abot-text p{
	font-size: 14px;
}
.link-motto{
	text-align:center;
	margin-top: 24px;
}
.link-motto a{
	background: url(/static/img/index/bg-stripe-pink.png) top left;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	padding: 8px 25px;
	border-radius: 50px;
	color: #f53d7e;
	text-align: center;
	margin: 0 auto;
}
}


#product{
	padding: 120px 0 80px 0;
background: #333333;
background: -moz-linear-gradient(left, #333333 1%, #565656 100%);
background: -webkit-linear-gradient(left, #333333 1%,#565656 100%);
background: linear-gradient(to right, #333333 1%,#565656 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#565656',GradientType=1 );
}

.row-productlist{
	margin:24px 0 48px 0;
}
.row-productlist div img{
	width: 100%;
	height: auto;
	margin-bottom: 24px;
}
.row-productlist div img.mb-tyousei-01{
	margin-bottom: 44px;
}
.teikyo-ul{
	max-width: 500px;
	margin:0 auto;
}
.teikyo-img{
	float: left;
	width: 25%;
	padding: 0 5px;
}
.teikyo-text{
	float: left;
	width: 75%;
	color: #fff;
	font-weight: normal;
	padding: 0 5px;
}

@media (max-width: 1200px){
.row-productlist div img.mb-tyousei-01{
	margin-bottom: 24px;
}
}

@media (max-width: 767px){
#product{
	padding: 40px 0;
}
.row-productlist{
	margin:12px 0 24px 0;
}
.row-productlist div img{
	margin-bottom: 12px;
}
.teikyo-ul{
	max-width: 100%;
	margin:0 auto;
}
.teikyo-text{
	font-size: 12px;
}
}



#download{
	padding: 140px 0;
	background:#fef6f9;
}
.big-ul{
	margin-top: 48px;
	margin-bottom: 36px;
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.big-ul:before{
	content: "";
	display: block;
	position: absolute;
	top: -50px;
	left: -60px;
	background: url(/seat/willertheater/img/img-fukidashi.png) top left;
	width: 121px;
	height: 44px;
}
.big-ul li{
	font-size: 23px;
	font-weight: normal;
	line-height: 1.6;
	margin-bottom: 8px;
	position: relative;
	padding-left: 35px;
}
.big-ul li:last-child{
	margin-bottom: 0px;
}
.big-ul li:before{
	content: "";
	display: block;
	position: absolute;
	top: 12px;
	left: 0;
	background: url(/seat/willertheater/img/img-arrow.png) top left;
	width: 25px;
	height: 17px;
}
.big-ul li a{
	color: #5b39ff;
	text-decoration: underline;
}
.big-ul li a:hover{
	text-decoration: none;
}
.big-ul li span{
	color: #f53d7e;
	font-weight: bold;
}

.col-and{
	text-align: right;
}
.col-ios{
	text-align: left;
}
.col-and img,
.col-ios img{
	max-width: 220px;
	height: auto;
}
@media (max-width: 767px){
#download{
	padding: 40px 0;
}
.big-ul{
	margin-top: 36px;
	margin-bottom: 36px;
	width: 96%;
	max-width: initial;
}
.big-ul:before{
	content: "";
	display: block;
	position: absolute;
	top: -30px;
	left: -4%;
	background: url(/seat/willertheater/img/img-fukidashi.png) top left;
	background-size: 80px 29px;
	width: 80px;
	height: 29px;
}
.big-ul li{
	font-size: 18px;
}
.big-ul li:before{
	top: 8px;
}
.col-and,
.col-ios{
	text-align: center;
}
.col-and img,
.col-ios img{
	max-width: 100%;
	height: auto;
}
}


/* ====================================
共通　リスト装飾パーツ
==================================== */
.wrap-atteintion{
	background:#fafafa;
	padding: 24px 36px;
	margin: 24px 0;
}
.base-ul{
	margin-top: 24px;
	margin-bottom: 24px;
}
.base-ul li{
	font-size: 14px;
	font-weight: normal;
	line-height: 1.6;
	margin-bottom: 3px;
	position: relative;
	padding-left: 18px;
}
.base-ul li:last-child{
	margin-bottom: 0px;
}
.base-ul li:before{
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}

.base-ul li a{
	color: #5b39ff;
	text-decoration: underline;
}
.base-ul li a:hover{
	text-decoration: none;
}

/* ※印 */
.kome-ul{
	margin-top: 24px;
	margin-bottom: 24px;
}
.kome-ul li{
	font-size: 14px;
	font-weight: normal;
	line-height: 1.6;
	margin-bottom: 3px;
	position: relative;
	padding-left: 18px;
}
.kome-ul li:last-child{
	margin-bottom: 0px;
}
.kome-ul li:before{
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}
.kome-ul + .base-ul,
.base-ul + .kome-ul{
	margin-top: -12px;
}
.text-base + .kome-ul{
	margin-top: -24px;
}

@media (max-width: 767px){
.wrap-atteintion{
	background:#fafafa;
	padding: 7px 12px;
	margin: 24px 0;
}

}






#rosen{
	padding: 140px 0 0 0;
}
.wrap-plan{
	margin-bottom: 60px;
}
.plan-list{
	background: #fff;
	padding: 21px 35px;
	border-radius:4px;
	box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	margin-bottom: 20px;
}
.plan-detail{
	border-bottom: 1px solid #efefef;
	padding: 14px 0 12px 0;
}
.plan-list .plan-detail:last-child{
	border-bottom: none;
}
.plan-detail-in li{
	float: left;
	display: table;
}
.plan-detail-in li span{
	display: table-cell;
	vertical-align: middle;
}
.list-departure{
	width: 55%;
	font-weight: bold;
	font-size: 18px;
	position: relative;
	top: 7px;
}
.list-departure i{
	color: #f53d7e;
	margin:0 5px;
}
.list-price{
	width: 25%;
	text-align: right;
	font-size: 12px;
	padding: 0 30px;
}
.list-btn{
	width: 20%;
}
.list-price span.num{
	color: #f53c7f;
	margin-left: 10px;
	font-size: 26px;
	font-weight: bold;
	display: inline;
}
.list-price span.num:after{
	content: "円～";
	color: #333;
	font-size: 16px;
	font-weight: normal;
	margin-left: 5px;
}
.plan-btn{
	display: block;
	width: 100%;
	background: #f53d7e;
	color: #fff;
	text-align:center;
	border-radius: 4px;
	padding: 10px;
	font-size: 14px;
}
.plan-btn:hover{
	color: #fff;
	text-decoration: none;
}
.plan-btn:hover{
	opacity: 0.5;
}

@media(max-width:991px) {
	.plan-list{
		padding: 21px 21px;
	}
	.list-departure{
		width: 47%;
	}
	.list-price{
		width: 30%;
	}
}
@media(max-width:767px) {
#rosen{
	padding: 40px 0 0 0;
}
	.title-page-h3{
		text-align: center;
	}
	.plan-list{
		background: #fff;
		padding: 15px 15px;
		border-radius:4px;
		box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
		margin-bottom: 20px;
	}
	.plan-detail-in li span{
		display: table-cell;
		vertical-align: bottom;
	}
	.list-departure{
		width:100%;
		margin-bottom: 20px;
	}
	.list-price{
		width: 70%;
		float: left;
		padding: 0 10px 0 0;
	}
	.list-btn{
		float: left;
		width: 30%;
		/*padding-top: 10px;*/
		text-align: right;
	}
	.plan-btn{
		display: block;
		width: auto;
		padding: 8px 10px;
		position: relative;
		top: 0;
		font-size: 13px;
	}
	.list-price span.num{
		font-size: 25px;
		position: relative;
	}
	.list-price span.num:after{
		font-size: 15px;
		position: relative;
		bottom: 0px;
	}
}
@media (max-width: 575px){
}

.icon-day-night,
.icon-day,
.icon-night{
	padding-left: 68px;
}
.icon-day-night{
	background: url(/seat/willertheater/img/icon-night-day.png) no-repeat left center;
}
.icon-day{
	background: url(/seat/willertheater/img/icon-day.png) no-repeat left center;
}
.icon-night{
	background: url(/seat/willertheater/img/icon-night.png) no-repeat left center;
}
@media (max-width: 767px){
	.icon-day-night,
	.icon-day,
	.icon-night{
		padding-left: 40px;

	}
	.icon-day-night{
		background-size: 29px auto;
	}
	.icon-day{
		background-size: 29px auto;
	}
	.icon-night{
		background-size: 29px auto;
	}
.wrap-reserve{
	margin-top: 24px;
}
.wrap-plan{
	margin-bottom: 24px;
}
}




#moviecopy{
	padding: 80px 0;
}

.text-moviecopy{
	font-size: 10px;
	line-height: 1.6;
}

#moviecopy .base-ul{
	margin-top: 0px;
	margin-bottom: 0px;
}
#moviecopy .base-ul li{
	font-size: 12px;
	font-weight: normal;
	line-height: 1.6;
	margin-bottom: 3px;
	position: relative;
	padding-left: 0;
}
#moviecopy .base-ul li:last-child{
	margin-bottom: 0px;
}
#moviecopy .base-ul li:before{
	display: none;
}


.modal-dialog{
	max-width: 800px;
}
.modal-header{
	padding: 10px;
	height: initial;
}
.modal-title{
	font-size: 18px;
}
.col-movie-img{
	float: left;
	width: 30%;
}
.col-movie-img img{
	width: 100%;
	height: auto;
}
.col-movie-text{
	float: left;
	width: 70%;
	padding-left: 10px;
}
.col-movie-text h3{
	font-size: 16px;
	margin-bottom: 24px;
}
.txt-cast,
.txt-dis{
	font-size: 14px;
	line-height: 1.6;
}
p.movie-en,
p.movie-ja{
	color: #fff;
}


@media (max-width: 767px){
	.col-movie-img{
		float: none;
		width: 100%;
		text-align: center;
		margin-bottom: 12px;
	}
	.col-movie-img img{
		width: initial;
		max-width: 100%;
		height: auto;
		margin:0 auto;
	}
	.col-movie-text{
		float: none;
		width: 100%;
		padding-left: 0;
	}
}

.text-chushaku{
	padding: 10px;
	background:#fafafa;
	border-radius: 5px;
	color: #666;
	font-size: 12px !important;
	display: block;
}

/*color*/
.pk {
	color: #f53d7e;
}

/*------------20210910追記-iOS15以降非対応→改修中の案内------------*/
#about{
	padding-top: 40px;
}
.ios_ver_announce{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: baseline;
	background: #ededed;
	padding: 16px 16px 16px 8px;
	margin-bottom: 24px;
}
.ios_ver_announce h2,.ios_ver_announce p{
	font-weight: bold;
	font-size: 13px;
	color: #212529;
	margin-bottom: 0;
}
.ios_ver_announce h2{
	width: 144px;
}
.ios_ver_announce p{
	width: calc(100% - 144px);
}
.ios_ver_announce p .text-right{
	display: block;
	font-size: 12px;
	font-weight: normal;
}

#announcement{
	margin: 0 auto;
	background: #f5f5f5;
	padding: 24px 0;
}
#announcement .col-12 div{
	border: 2px solid #f53d7e;
	background: #fff;
	padding: 32px 24px;
	box-shadow: 4px 4px 0px #f53d7e;
}
#announcement h2{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 24px;
}
#announcement p{
	font-size: 14px;
	line-height: 1.8;
}

@media (max-width: 767px){
	.ios_ver_announce{
		flex-wrap: wrap;
		justify-content: center;
		padding: 16px;
	}
	.ios_ver_announce h2{
		width: 100%;
		margin-bottom: 16px;
		font-size: 15px;
	}
	.ios_ver_announce p{
		width: 100%;
	}
	#announcement p{
		font-size: 13px;
		line-height: 1.8;
	}
}