@charset "utf-8";

/* ヘッダー */
header h1{
	position: relative;
	padding: 10px;
	background-color: #0d0517;
	border-bottom: solid 1px #fdff6a;
	z-index: 10;
}
header h1 img{
	position: relative;
	margin: 0 auto;
	height:32px;
	width: auto;
}
header #keyvisual{
	position: relative;
	margin: 0 auto ;
	display: block;
	background-image: url("../img/main_page.jpg");
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: 240% auto;
	padding-top: 100px;
	width: 100%;
	border-radius: 0 0 50% 50%;
	border-bottom: solid 6px #A2C2CC;
}
#catch{padding: 30px 10px 0  10px;margin: 0;overflow: hidden;}

/*  spschedule */
#spschedule{
	position: relative;
	margin: 100px auto 0 auto;
}
#spschedule .info{
	position: relative;
	margin: 0 auto;
	 width: calc(100% - 40px);
}
#spschedule .list{
	position: relative;
	margin: -30px auto 0 auto;
	width: calc(100% - 80px);
	border: solid 1px #5F5F5F;
	background-color: rgba(255,255,255,.2);
	padding: 20px;
}
#spschedule .list::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	background-color: rgba(0,0,0,.7);
	z-index: 30;
}
#spschedule .list p{
	position: relative;
	z-index: 10;
}
#spschedule .list p.ttl{
	font-weight: 900;
	padding: 30px 0 5px 0;
	border-bottom: solid 1px #ffffff;
	text-align: center;
	margin: 0 auto 15px auto;
}
#spschedule ul{
	position: relative;
	margin: 0 auto;
}
#spschedule ul li{
	position: relative;
	padding: 0;
	margin: 20px 0;
	width: calc(50% - 15px);
}
#spschedule ul li .date{
	position: relative;
	margin: 0 auto;
	background-color: #000000;
	border-radius: 100px;
	color: #ffffff;
	text-align: center;
	padding: 5px 0;
	z-index: 1;
}
#spschedule ul li .date::after{
	position: absolute;
	top: -1em;
	left: -15px;
	content: '';
	height: 4em;
	width: 100%;
	background-image: url("../img/special/icon_cast.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: 0 50%;
}
#spschedule ul li .Image{
	position: relative;
	margin: -5px auto 0 auto;
	width: calc(100% - 20px);
}


#first{
	position: relative;
	margin: 0 auto;
}
#first .bg1{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#first .bg1::before{
	position: absolute;
	top:-100px;
	left: 50%;
	transform: translateX(-50%);
	width: 620px;
	height:620px;
	content: '';
	display: block;
	background-color: rgba(226,198,0,0.20);
	border-radius: 50%;
}
#first .bg1::after{
	position: absolute;
	top:-100px;
	left: calc(50% + 40px);
	transform: translateX(-50%);
	width: 620px;
	height:620px;
	content: '';
	display: block;
	background-color: rgba(25,29,13,0.42);
	border-radius: 50%;
}
#first h2{
	position: relative;
	margin: 20px auto 10px auto;
	width: calc(100% - 20px);
	background-image:none;
	padding: 0;
}
#first h2 img{margin: 0 auto;height: 38px;}
#first h2.hight img{height: 85px;}
#first h2.secret img{height: 25px;}
#first p{
	position: relative;
	margin: 40px auto;
	width: calc(100% - 80px);
	padding: 20px;
	font-size: .17rem;
	line-height: 1.8em;
	background-color: rgba(0,0,0,0.8);
}
/*.movie{background-color: #031923;border: solid 1px #14A9B6;}*/
#first .movie .soon{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
#first .movie .soon img{
	height: 82%;
	width: auto;
	margin: 9% auto 0 auto;
}

#btmArea{padding-bottom: 240px;}

#special{
	position: relative;
	/*margin: 50px auto 0 auto;*/
	margin: 0 auto;
}
#special .special{
	position: relative;
	margin: 0 auto;
	background-color: rgba(73,6,83,.8);
	border: solid 1px #803789;
	padding: 20px 20px 40px 20px;
	width: calc(100% - 80px);
}
#special h3{
	position: relative;
	margin: 0 auto 10px auto;
	padding: 10px 0 0 0;
	width: calc(100% - 40px);
}
#special h3 img{
	position: relative;
	height: 50px;
	width: auto;
	margin: 0 auto 5px auto;
}
#special h3.hight{padding: 50px 0 0 0;}
/*#special h3.hight img{height: 84px;}*/

#special p{
	position: relative;
	margin-bottom: 50px;
	text-align: center;
	z-index: 10;
}
#special p.nomargin{margin-bottom: 20px;}
#special .sample{
	position: relative;
	margin:10px auto 30px auto;
	width: calc(100% - 40px);
}
#special .qr{
	position: relative;
	margin:10px auto 30px auto;
	width: 120px;
}
#special .ttlS{
	position: relative;
	font-weight: 900;
	color: #d1a9ff;
	padding-bottom: 8px;
	text-align: center;
	font-size: .16rem;
	z-index: 10;
}
#special .ttlSp{
	position: relative;
	font-weight: 900;
	color: #d1a9ff;
	font-size: .14rem;
}
#special .ttlSp01{
	position: relative;
	font-weight: 900;
	color: #f6ff07;
	font-size: .14rem;
	padding-bottom: 5px;
}
#special .clist{
	position: relative;
	margin: 20px auto 0 auto;
}
#special .clist li{
	position: relative;
	padding: 0 0 10px 1.2em;
}
#special .clist li::before{
	position: absolute;
	left: 0;
	top:0;
	content: '・';
}
#special dl{
	position: relative;
	margin: 0 auto 40px auto;
	border: solid 1px #F4C8FE;
	text-align: center;
}
#special dl dt.th, #special dl dd.th{background-color: #715770;}
#special dl dt{
	position: relative;
	padding: 10px;
	width: calc(55% - 21px);
	border-right: solid 1px #F4C8FE;
	border-bottom: solid 1px #F4C8FE;
}
#special dl dd{
	position: relative;
	padding: 10px;
	width: calc(45% - 20px);
	border-bottom: solid 1px #F4C8FE;
}
#special dl dt.noborder, #special dl dd.noborder{	border-bottom: none;}
#special dl.price,#special dl.entry{margin: 0 auto 10px auto;}
#special dl.entry dt{
	width: calc(30% - 21px);
	font-size: .12rem;
	line-height: 1.5em;
}
#special dl.entry dd{width: calc(70% - 20px);}
#special p.caution{text-align: left;margin: 0 auto 50px auto;}
#special p.att{margin:20px auto 30px auto;text-align: left;}
#ticket .price{
	position: relative;
	margin: 0 auto;
}
#ticket .price ul {margin: 10px auto 0 auto;}
#ticket .price ul li p{margin-bottom: 0;}
#ticket .priceBox .ttl{
	position: relative;
	margin: 30px auto 10px auto;
	text-align: center;
	color:  #d1a9ff;
	font-weight: 900;
	font-size: .15rem;
}
#ticket .priceBox .table{width: 100%;margin: 20px auto 0 auto;}
#ticket .priceBox .table table{
	position: relative;
	margin: 0 auto;
	border-collapse: collapse !important;
	border-spacing:1px;
	border: solid 1px #F4C8FE;
	
}
#ticket .priceBox table th{
	border: solid 1px #F4C8FE;
	background-color: #715770;
}
#ticket .priceBox table th.trans{background-color: #715770;}
#ticket .priceBox table td{
	border: solid 1px #F4C8FE;
	background-color: transparent;
}
#ticket .priceBox table tbody tr:nth-child(odd) td{background-color: transparent;}
#ticket .caution{
	margin:0 auto !important;
	width: 100%;
}

#special .special::before, #special .special::after, #info ul::before, #info ul::after{
	position: absolute;
	left: 0;
	width: 100%;
	height: 50px;
	content: '';
	display: block;
	background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.4));
	background: -o-linear-gradient(top,  rgba(0,0,0,0), rgba(0,0,0,.4));
	background: linear-gradient(to top,  rgba(0,0,0,.4), rgba(0,0,0,0));
}
#info ul::before, #special .special::before{top:0; transform: rotate(180deg);}
#info ul::after, #special .special::after{bottom:0;}
#special .special ul li:nth-child(4) .ttlS{padding-top: 50px;}

#photo{
	position: relative;
	margin: 40px auto;
}
#photo h3{
	position: relative;
	margin: 0 auto 20px auto;
	padding: 20px 0 0 0;
	width: calc(100% - 40px);
}
#photo h3 img{
	position: relative;
	height: 50px;
	width: auto;
	margin: 0 auto 5px auto;
}
#photo .photoList{
	position: relative;
	margin: 0 auto 20px auto;
	width: calc(100% - 50px);
	padding: 5px;
	background-color: rgba(6,71,83,0.20);
	border: solid 1px #377989;
}
#photo .photoList div{
	position: relative;
	margin: 3px 0;
	width: calc(33% - 3px);
}
#photo p{
	position: relative;
	margin: 5px auto 20px auto;
	width: calc(100% - 50px);
}

a.button{
	margin: 0 auto 50px auto !important ;
	width: calc(100% - 60px) !important;
	padding: 5px 20px !important;
}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* ヘッダー */
	header #keyvisual{
		background-position: 50% 50%;
		background-size: cover;
		padding-top: 170px;
		border-radius: 0 0 50% 50%;
		border-bottom: solid 8px #A2C2CC;
	}
	#catch{padding: 50px 10px 0  10px;}
	#catch img{margin: 0 auto;}

	
	/*  spschedule */
	#spschedule{margin: 50px auto;}
	#spschedule .info{ width: 581px;}
	#spschedule .list{
		margin: -30px auto 0 auto;
		width: 600px;
		padding: 40px 190px;
	}
	#spschedule ul li{width: calc(30% - 15px);}


	#first{margin: 60px auto 0 auto;}
	#first .bg1::before{
		top:-20px;
		width: 720px;
		height:720px;
	}
	#first .bg1::after{
		top:-20px;
		width: 720px;
		height:720px;
	}
	#first h2{
		margin: 40px auto 30px auto;
		width:500px;
	}
	#first h2 img{height: 50px;}
	#first h2.secret img{margin: 120px auto 30px auto;height: 32px;}
	#first p{
		margin: 70px auto;
		width: 600px;
		padding: 40px;
		text-align: center;
		font-size: .19rem;
	}

	#special{margin: 0 auto 100px auto;}
	#special .special{
		padding: 40px 40px 60px 40px;
		width: 880px;
	}
	#special h3{
		padding: 10px 0 0 0;
		width: 800px;
	}
	#special h3 img{height: 72px;}
	#special h3.hight{padding: 120px 0 0 0;}
	#special h3.hight img{height: 79px;}

	#special .sample{width: 420px;}
	#special .ttlS{
		padding-bottom: 12px;
		font-size: .18rem;
	}
	#special .ttlSp{font-size: .16rem;text-align: center;}
	#special .ttlSp01{
		font-size: .17rem;
		text-align: center;
		padding-bottom: 10px;
	}
	#special .clist{width: 600px;}

	#special dl{margin: 0 auto 70px auto; width: 700px;}
	#special dl.entry, #special dl.price{margin: 0 auto 10px auto;}
	#special p{margin-bottom: 70px;}
	#special p.caution{width: 700px; margin: 0 auto 70px auto;}
	#special p.att{margin: 30px auto 60px auto;text-align: center;}

	#ticket .priceBox .table{width: 700px;}
	#ticket p.caution{width: 700px;}
	
	#special dl.cast{width: 500px;}
	#special .special ul li:nth-child(4) .ttlS{padding-top: 70px;}
	
	#photo{margin: 40px auto 100px auto;}
	#photo h3{
		margin: 0 auto 20px auto;
		padding: 40px 0 0 0;
	}
	#photo h3 img{height: 72px;}
	#photo .photoList{
		margin: 0 auto 40px auto;
		width: 840px;
		padding: 20px 60px;
	}
	#photo .photoList div{
		margin: 8px 0;
		width: calc(20% - 8px);
	}
	#photo p{
	margin: 0 auto 50px auto;
	text-align: center;
}
	
	a.button{
		margin: 0 auto 80px auto !important ;
		width: 400px !important;
	}

}