@charset "utf-8";

#wrapper { overflow:hidden; }
#vermeer .txt-c { text-align:center;}
#vermeer .font120 { font-size:120%; }
#vermeer .font80 { font-size:80%; }
#vermeer .font-b { font-weight:bold; }
#vermeer .font-green { color:#9DC138; }
#vermeer .font-blue { color:#44ADE9; }
#vermeer .font-pink { color:#E687BE; }
#vermeer ul,li { list-style:none; }
#vermeer img { display:block; }
.sp-block {
	display:inline-block;
}
@media only screen and (max-width: 768px) {
	.sp-block {
		display:block;
	}
}

/*　上部検索窓　*/
@media only screen and (max-width: 768px) {
	#headerBtm .blockSearch table {
	margin-bottom: 0px;
	}
}

/*　外枠　*/
#vermeer {
	position: relative;
	width: 100%;
	margin:0;
	color: #000;
	background-color: #fff;
	font-size: 16px;
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
}

@media only screen and (max-width: 768px) {
	#vermeer {
		font-size: 13px;
	}	
}


/* feature-header BEGIN */
#vermeer .feature-header {
	text-align: center;
	padding:0;
	background-color:#fff; 
}
#vermeer .feature-header_main {
	position: relative;
	padding: 40px 0 50px;	
}
#vermeer .feature-header_main h1 {
	width:800px;
	margin:20px auto;
}
#vermeer .feature-header_main h1 img {
	width:100%;
	height:auto;
	display:block;
}

@media only screen and (max-width: 768px) {
	#vermeer .feature-header_main h1 {
		margin:30px auto 0;
		width: 90%;
	}
}




/* feature-navi BEGIN */
/*ナビゲーション*/
#vermeer .feature-navi {
	position: relative;
	width: 100%;
	height: 70px;
	background-color:#fff;
	}
#vermeer .feature-navi ul {
	width: 980px;
	height: 70px;
	margin: 0px auto;
	text-align: left;
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
	border-right: none;
	font-size:0;
}
#vermeer .feature-navi ul li {
	position: relative;
	letter-spacing: normal; /* 文字間を通常に戻す */
	height: 70px;
	line-height: 70px;
	display: inline-block;
	text-align: center;
	margin:0;
}
#vermeer .feature-navi ul li {
	width:25%;
}
#vermeer .feature-navi ul li:first-child {

}
#vermeer .feature-navi ul li a {
	color: #000;
	font-size: 18px;
	letter-spacing: 0.9px;
	display: block;
	border-bottom: 4px solid #000;
	text-align: center;
	margin:0 10px;
	font-weight:bold;
	box-sizing:border-box;
}
#vermeer .feature-navi ul li a:hover {
    color:#b20b20; 
	border-bottom:4px solid #b20b20;
	background-image:url(http://image.pia.jp/uploads5/files/7915/2836/3982/arrow-red.png);
	background-position:50% bottom;
	background-repeat:no-repeat;
	background-size:15px auto;
	text-decoration:none;
}

@media only screen and (max-width: 768px) {
	#vermeer .feature-navi {
		height: auto;
	}
	#vermeer .feature-navi ul {
		height: auto;
		font-size:0;
		width:90%;
		margin:0 auto;
	}
	#vermeer .feature-navi ul li {
		width: 100%;
		display:inline-block;
		margin:0 auto 10px;
		height: 50px;
		line-height: 50px;		
	}
	#vermeer .feature-navi ul li:first-child {
	}	
	#vermeer .feature-navi ul li a {
		display:block;
		border: 1px solid #000;
		box-sizing:border-box;
		font-size:14px;
		width:95%;
		margin:0 auto 0px;
	}
	#vermeer .feature-navi ul li a:hover {
		background-image: none;
		border:1px solid #b20b20;
		background:#b20b20;
		color:#fff;	
	}
}


/* feature-ssnavi BEGIN */
#vermeer #feature-ssnavi {
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 54px;
	background-color: #fff;
	display: none;
	box-shadow:0 1px 4px rgba(0,0,0,.2);
}
#vermeer #feature-ssnavi ul {
	max-width: 1180px;
	height: 54px;
	margin: 0 auto;
	text-align: left;
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
	border-right: none;
	list-style: none;
    font-size:0;
}
#vermeer #feature-ssnavi ul li {
	position: relative;
	letter-spacing: normal; /* 文字間を通常に戻す */
	height: 54px;
	line-height: 54px;
	display: inline-block;
	text-align: center;
	width:25%;
}
#vermeer #feature-ssnavi ul li:first-child {
	width: 0;
	height: 0;
}
#vermeer #feature-ssnavi ul li a {
	color: #000;
	font-size: 14px;
	letter-spacing: 0.9px;
	display: block;
	border-left: 0px solid #000;
}
#vermeer #feature-ssnavi ul li a:hover {
	text-decoration: none;
	color:#b20b20;
}

@media only screen and (max-width: 768px) {
	#vermeer #feature-ssnavi {
	height: 155px;
	border-bottom:1px solid #ccc;
	box-shadow:none;
	}
	#vermeer #feature-ssnavi ul {
	height: 155px;
	border-left: none;
	}
	#vermeer #feature-ssnavi ul li  {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #fff;
}
	#vermeer #feature-ssnavi ul li:first-child {
	width: 100%;
	height: 35px;
	line-height: 35px;
	border-bottom: none;
	margin-bottom: 0;
	font-size: 13px;
	font-weight: bold;
	color: #FFF;
	background-color: #fff;
	}
	#vermeer #feature-ssnavi ul li:first-child:after {
	content: "";
	display: inline-block;
	background-image: url(http://image.pia.jp/uploads5/files/6315/2836/4522/sp-menu-bar.png);
	background-position: 50% 50%;
	background-size: contain;
	width: 20px;
	height: 12px;
	position: absolute;
	right: 10px;
	top: 11px;
	}
	#vermeer #feature-ssnavi ul li:last-child {
	width: 100%;
	border-bottom: 1px solid #ccc;
	}	
	#vermeer #feature-ssnavi ul li a {
	font-size: 13px;
	border-bottom: none;
	}
	#vermeer #feature-ssnavi ul li:nth-child(2n+1) a {
	border-right: none;
	}
	#vermeer #feature-ssnavi.menu-hide {
	height: 36px;
	}
	#vermeer #feature-ssnavi.menu-hide ul {
	height: 35px;
	}
	#vermeer #feature-ssnavi.menu-hide ul li {
	display: none;
	}
	#vermeer #feature-ssnavi.menu-hide ul li:first-child {
	display: block;
	}
}


/* feature-detail BEGIN */
/*枠*/
#vermeer .feature-detail {
	padding: 0;
	max-width: 1180px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
#vermeer-outline ,
#vermeer-info ,
#vermeer-ticket ,
#vermeer-buy ,
#vermeer-att {
	width: 980px;
	margin: 60px auto;
	position: relative;
}

@media only screen and (max-width: 768px) {
	#vermeer .feature-detail {
		padding: 0 ;
		margin:0px 5px;/*画面左右のマージン*/
	}
	#vermeer-outline ,
	#vermeer-info ,
	#vermeer-ticket ,
	#vermeer-buy ,
	#vermeer-att {
		width: 90%;
		margin: 40px auto;
		position: relative;
	}
}


h2 {
    color: #000; /*文字色を変える*/
    font-size: 200%;
    background: transparent; /*背景色を変える*/
    padding: 12px 10px;
    text-align: center; /*寄せ位置を変える*/
    margin: 10px 0 20px;
	border-bottom:4px solid #000;
	font-weight:bold;
	letter-spacing:2px;
}
h3 {
	text-align:center;
	font-size:150%;
	font-weight:bold;
	margin:0 0 15px 0;
}
h3 span {
	border-bottom:3px solid #000;
	padding:5px 10px;
}


/* news */
#vermeer-news {
	width: 980px;
	margin: 60px auto;
	position: relative;
	border:1px solid #000;
	padding:1em;
	font-size:90%	;
	box-sizing:border-box;
}
.news-tit {
	text-align:center;
	color:#b20b20;
	font-size:150%;
}
.dottedline {
    border: 1px dotted #ccc; 
    width: 100%;
    margin: 5px auto;
}

@media only screen and (max-width: 768px) {
	#vermeer-news {
		width: 90%;
		margin: 40px auto;
		padding:1em;
		font-size:90%;
		border:1px solid #b20b20;
	}
	.dottedline {
		width: 100%;
		margin: 5px auto;
	}	
}


/* outline */
#vermeer-outline p.txt {
	line-height:1.6;
	margin-top:2em;
}



/* picture */
#vermeer-outline .vermeer-picture {
	width: 980px;
	margin:40px auto 0;
	border:1px solid #000;
	padding:2.5em 1em;
	box-sizing:border-box;
}
.slick-prev { 
	z-index: 1!important; 
	height: 48px!important; 
	width: 48px!important; 
	margin-top: 0px!important;
	background-image:url(http://image.pia.jp/uploads5/files/9915/2836/3889/arrow2-red.png)!important; 
	transform:rotate(-180deg)!important;
}
.slick-next { 
	z-index:1!important; 
	height: 48px!important; 
	width: 48px!important; 
	margin-top: 0px!important;
	background-image:url(http://image.pia.jp/uploads5/files/9915/2836/3889/arrow2-red.png)!important; 
}
.slick-prev { 
	left:0;
}
.slick-next { 
	right:0;
}
.slick-prev:before, .slick-next:before {
	display:none!important;
}


.vermeer-slider li {
	margin:40px auto 0;
	position:relative;
}

.vermeer-img {
	width:100%!important;
	height:480px!important;
	position:relative;
	margin:0 auto!important;
}
.vermeer-img img {
	width:auto!important;
	height:auto!important;
	max-height:100%!important;
	max-width:100%!important;
	position:absolute!important;
	top:0!important;
	bottom:0!important;
	left:0!important;
	right:0!important;
	margin:auto!important;
}
img.vermeer-number {
	position:absolute;
	top:0;
	right:100px;
	width:70px;
	height:auto;
	z-index:1000;
}
.item_caption {
	text-align:center;
	margin-top:10px;
}

@media only screen and (max-width: 768px) {
	#vermeer-outline .vermeer-picture {
		margin:40px auto 0;
		padding:2.5em 0em;
		width:100%;
		margin:20px auto;
	}
	.slick-prev , .slick-prev a:hover { 
		height: 30px!important; 
		width: 30px!important; 
		background-size:100% auto!important;
	}
	.slick-next , .slick-next a:hover  { 
		height: 30px!important; 
		width: 30px!important; 
		background-size:100% auto!important;
	}	
	.slick-prev { 
		left:5px;
	}
	.slick-next { 
		right:5px;
	}
	.vermeer-img {
		width:100%!important;
		height:250px!important;
		position:relative;
	}
	img.vermeer-number {
		position:static;
		width:50px;
		height:auto;
		display:block;
		margin:0 auto 20px;
	}
}


/* info */
#vermeer-info .admission {
	border:2px solid #b20b20;
	padding:2em;
	margin:2em auto 3em;
}

.font-big { font-size:150% }
.font-medium { font-size:125% }

#vermeer-info ul.vermeer-time li {
	display:inline-block;
	margin-right:1.5em;
}

@media only screen and (max-width: 768px) {
	#vermeer-info .admission {
		padding:1.5em;
	}
	.font-big { font-size:150% }
	.font-medium { font-size:125% }
	ul.vermeer-time li { 
		display:block;
		margin-right:0;
		margin-bottom:3px;
	}	
}


/*▼公演リスト・発売導線*/
#vermeer .kouen-list table {
    border-top: 1px solid #4f4d47; /*表組みの枠を変える(全て同じ値にする)*/
    border-right: 1px solid #4f4d47; /*表組みの枠を変える(全て同じ値にする)*/
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
	margin:2em auto;
}

#vermeer .kouen-list th, 
#vermeer .kouen-list td {
    border-bottom: 1px solid #4f4d47; /*表組みの枠を変える(全て同じ値にする)*/
    border-left: 1px solid #4f4d47; /*表組みの枠を変える(全て同じ値にする)*/
    text-align: center;
    padding: 15px 5px;
    vertical-align: middle;
}

#vermeer .kouen-list th {
    background-color: #000; /*表組みの見出し背景色を変える*/
    color: #fff; /*表組みの見出し文字色を変える*/
	padding:5px;
}

#vermeer .schedle-list th {
    background-color: #b20b20; /*表組みの見出し背景色を変える*/
    color: #fff; /*表組みの見出し文字色を変える*/
	padding:5px;
}

@media only screen and (max-width: 768px) {
	#vermeer .kouen-list th, 
	#vermeer .kouen-list td {
		border-left: none; /*表組みの枠を変える(全て同じ値にする)*/
	}
	#vermeer .price-list table {
		width: 100%;
		border:none;
		padding: 10px 0;
		margin:1em auto 0;
		}
	#vermeer .price-list thead {
		display: none;
		}
	#vermeer .price-list tr {
		border-top: none; /*表組みの枠を変える(全て同じ値にする)*/
		display: block;
		margin-bottom: 20px;
		}
	#vermeer .price-list td {
		border-right: none; /*表組みの枠を変える(全て同じ値にする)*/
		border-bottom: none;
		display: block;
		padding: 0;
		font-size:125%;
		margin:0 0 10px 0
		}
	#vermeer .price-list td:nth-of-type(1) {
		background-color: #fff; /*表組みの見出し色を変える*/
		color: #000;
		padding: 0;
		}
	#vermeer .price-list td:last-child {
		border-bottom: none; /*表組みの枠を変える(全て同じ値にする)*/
		}
	#vermeer .price-list td:before {
		background-color: #000; /*SP用に追加される見出し背景色を変える*/
		color: #fff;
		display: block;
		padding:3px 0;
		font-size:85%;
		margin:0 0 3px 0
		}
	  /*SPで消えてしまう見出しを追加する*/
	#vermeer .price-list-midashi td:nth-of-type(1):before {
		content: "大人";
		}
	#vermeer .price-list-midashi td:nth-of-type(2):before {
		content: "大学生・高校生";
		}
	#vermeer .price-list-midashi td:nth-of-type(3):before {
		content: "中学生・小学生";
		}
	
	#vermeer .schedle-list table {
		width:100%;
		margin:20px auto;
		border:2px solid #b20b20;
	}	
	#vermeer .schedle-list tr {
		border-bottom:1px solid #b20b20;
		padding:0;
		margin:5px 0 5px;
	}
	#vermeer .schedle-list tr:last-child {
		border-bottom:none;
	}
	#vermeer .schedle-list td {
		border-right: none;
		border-bottom: none;
		display: block;
		padding: 0;
		font-size:125%;
		margin:0 0 5px 0
	}
	#vermeer .schedle-list td:nth-of-type(1) {
		/*販売スケジュールテーブル用の見出し*/
		background-color: #fff;
		border-bottom:1px dotted #000;
		color: #000;
		padding:0 0 3px 0!important;
		font-size:100%;
		margin:3px 15px;
		}
}

#vermeer .kouen-list ul {
    padding:0 5px;
}

#vermeer .kouen-list li {
    display: inline-block;
    padding:5px;
    border:1px solid #666;
    width:100%
}


/* ticket */
#vermeer .ticket-frame {
	margin:2em 0;
	background:#edeaea;
	border:1px solid #c6c0c0;
	padding:1.25em;
}
#vermeer .ticket-frame p {
	margin:5px 0;
}

/*▼チケットボタン*/
.vermeer-button {
	text-align:center;
	margin:10px auto;
}

.vermeer-button a {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
	position: relative;
	background-color: #FF9F07;
	border-radius: 4px;
	color: #fff !important;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #BC7B13;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
	font-weight: bold;
	font-size: 18px;
	margin:0px auto;
}



/* buy */
ul.buy-select {
	width:100%;
	display:table;
	border-collapse: separate;
	border-spacing: 2px 0;
}
ul.buy-select li {
	display:table-cell;
	width:25%;
	height:50px;
	line-height:50px;
	text-align:center;
	text-decoration:none;
	background:#000;
	vertical-align:middle;
	color:#fff;
	cursor:pointer;
}
ul.buy-select li a:hover {
	background:#b20b20;
}
ul.buy-select li.present {
	background:#b20b20!important;
	font-weight:bold;
	font-size:110%;
}

.pc-none { display:none; }
.sp-none { display:inline-block; }

@media only screen and (max-width: 768px) {
	ul.buy-select li {
		padding:10px 3px;line-height:1.2;height:auto;
	}
	ul.buy-select li a:hover {
		background:transparent;color:#b20b20;
	}
	ul.buy-select li.present a:hover {
		color:#fff;
	}
	.pc-none { display:block; }
	.sp-none { display:none }
}

/*タブの中身*/
.disnon { display:none;}
.tab-inner { background:#fff;padding:40px; }
.step-frame {
	background:#edeaea;
	border:1px solid #c6c0c0;
	padding:1em;
	border-radius:3px;
	margin:0 5px;/*ここと↓*/
}
.image-2 .step-frame {
	margin:0 5px;/*↑ここは揃える*/
}
.step-frame p {
	width:100%!important;
	text-align:left!important;
}
.step-arrow {
	transform: rotate( 180deg );
	width:20px!important;
	height:auto!important;
	margin:5px auto!important;
}
.step-midashi {
	margin-bottom:30px;
	border-left:5px solid #b20b20;
	border-bottom:1px dotted #b20b20;
	padding:0px 0 3px 10px!important;
	font-weight:bold;
	font-size:125%;
}

.step-seven-step2 {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.step-seven-step2 li {
    flex-basis: 100%;
	background:#fff;
	border:1px solid #c6c0c0;
	margin:0 7px 7px;
	padding:1em;
	font-size:90%;
	line-height:1.5;
}
.step-seven-step2 li img {
	max-width:250px;
	width:100%;
	margin:0 auto 10px;
}

@media only screen and (max-width: 768px) {
	.tab-inner {
		padding:20px 10px;
	}
	.step {
		display: flex!important;
	}
	.step li { /*購入ステップの中でボックスの横並びを保ちたいので*/
   		flex-basis: 100%!important;width:95%;margin:0 auto;
	}	
	.step-frame {
		padding:10px;
	}
	.step-arrow {
		width:13px!important;margin:3px auto!important;
	}
	.step-seven-step2 {
		width: 100%;
		display: block;
	}
	.step-seven-step2 li {
		display: block;
	}
}


/* attentione */
#vermeer ul.list-indent li { 
	margin-bottom:5px;
	text-indent:-1em;
	padding-left:1em;
}