@charset "shift_jis";

/*レスポンシブする座席表*/
	body{
		margin-top: 0;
		margin-left: 0;
		padding: 0;
		overflow-y: scroll;
	}

	p{
		margin-top:0;
		margin-bottom:10px;
	}
	tr{
		font-size: 12px;
		line-height: 16px;
		color: #000000;
		letter-spacing: 1px;
	}



	.table_out{
		max-width:100%;
		margin:0 auto;
		text-align:center;
		box-sizing:border-box;
	}

	.table_wrapper{
		overflow:scroll;
		background:#fff;
		margin:0 auto;
		padding:10px;
		box-sizing:border-box;
		border:1px solid #afafaf;
	}


	.table_up,
	.table_down,
	.table_left,
	.table_right{
	box-sizing:border-box;
		font-size:12px;
		font-weight:bold;
		margin:0;
		padding:6px;
		line-height:18px;
		word-wrap: break-word ;
	}


	.table_cen{
		max-width:80%;
		display:inline-block;	
		vertical-align:middle;
		box-sizing:border-box;
	}
	.table_up,
	.table_down{width:100%;text-align:center;padding:10px 10%; height:50px}


	.table_left,
	.table_right{
		max-width:10%;
		vertical-align:middle;
		display:inline-block;	
		box-sizing:border-box;
	}

	@media (max-width: 980px) {
		.table_cen{
			max-width:75%;
		}
		.table_left,
		.table_right{
			max-width:10%;
			width:10%;

		}
	}


	table#seat_check{
		border-spacing: 0;
		box-sizing:border-box;
		margin:5px auto;
		padding:0;
		border-top:1px solid #efefef;
		border-right:1px solid #efefef;
	}


	#seat_check th,
	#seat_check td{
		min-width:26px;
		height:22px;
		min-height:22px;
		padding:0;
		border-left:1px solid #ededed;
		border-bottom:1px solid #ededed;
		box-sizing:border-box;
	}
	th.check_td,
	td.check_td{
		padding:0px;
		position: relative;
		text-align:center;
		box-sizing:border-box;

	}	


	th.text_th{font-weight:normal;}

	th.text_th,
	td.text_td{
		min-width:26px;
		height:22px;
		vertical-align:middle;
		box-sizing:border-box;
		padding:0px;
		text-align:center;
	}

	.notext_th{
		padding:0px;
		background-color:#fff;
	}

	td.fix_col{
		padding:0px;
		background-color: #fff
	}



	td.aisle{
		background:#aaa;
		box-sizing:border-box;
	}

	td.space{
		background:tranceparent;
	}

	span.r_seat{
		margin:0 auto;
		display:block;
		width: 8px;
		height:12px;
		border: 1px #fff solid;
		border-radius: 14px;
		background:#aaa;
		box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3) inset;
	}

	td.reserved span{

	}

	td.check_td:hover{
		}

	td.check_td label{
		width:100%;
		height:100%;
		cursor:pointer;
		display:block;
		box-sizing:border-box;
	}


	label span {
		cursor:pointer;
		display: inline-block;

	}

	.seat_color{
		
	}

	td input.checkseat{
		margin: 0;
		padding: 20px;
		background: none;
		border: none;
		border-radius: 0;
		outline: none;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
	}

	td input.checkseat:checked + span::before{

	}


	label input.checkseat{
		position: absolute;
		top:0;
		left:0;
		opacity: 0;
		padding:0;
		margin:0;
	}

	label input.checkseat + span::before, label input.checkseat + span::after {
		position: absolute;
		top: 3px;
		left:7.5px;
		display: inline-block;
		content: '';
		box-sizing: border-box;
	}

	label input.checkseat+ span::before {
		background-color: transparent;
		width: 10px;
		height:14px;
		border: 1px #fff solid;
		border-radius: 14px;
		background:#fff;
		box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3) inset;
		}



/*ユーザーによるグレード・座席指定表*/


		#box{
			text-align:center;
		}

		.wrapper{
			margin:50px auto;
			max-width:80%;
			text-align:center;
			min-height:100px;
			box-sizing:border-box;
			display:inline-block;
		}

		.grade_wrapper{

			width:20%;
			max-width:20%;
			min-width:20%;
			background:#fff;
			vertical-align:top;
			text-align:center;
			min-height:100px;
			box-sizing:border-box;
			display:table-cell;

		}

		.grade_header{
			height:30px;
			line-height:30px;
			white-space:nowrap;
			margin:0;
			padding:2px 20px;
			font-weight:bold;
			text-align:center;
			box-sizing:border-box;
		}

		ul.grade_list{
			margin:0;
			padding:0;
			list-style:none;
			text-align:center;
		}

		ul.grade_list li{
			margin:0;
			box-sizing:border-box;
		}



		ul.grade_list li p{
			width:100%;
			margin-right:1em;
			border-left:4px solid #666;
			border-bottom:1px solid #666;
			box-sizing:border-box;
			padding:6px;
			font-size:14px;
			display:inline-block;
		}

		ul.grade_list li p.grade_rank{
			font-weight:bolder;
		}

		ul.grade_list li p span{
			font-weight:bolder;
		}

		ul.grade_list li label a{
			font-size:18px;
			text-decoration:none;
			color:#000;
			display:block;
			width:100%;
			padding:10px;
			box-sizing:border-box;
			 transition: background-color 0.1s; /*transitionは通常時にセット*/
			  -webkit-transition: background-color 0.1s;
		}

		ul.grade_list li label a:hover{
		}

		ul.grade_list li label a{
			position:relative;
		}

		ul.grade_list li label a.choice{
		}

		ul.grade_list li label a.soldout:before{
			position:absolute;
			top:6%;
			right:6%;
			font-size:16px;
			padding:3px 12px;
			content:"満席";
			border:1px solid #fff;
			background:#26627f;
			color:#FF6;
			border-radius:15px;
		}

		ul.grade_list li .grade_detail{
			text-align:left;
			margin:5px auto 0;
			width:100%;
		}


		.grade_category{
			border:1px solid #000;
		}


		.seat_wrapper{
			
			width:80%;
			min-width:80%;
			max-width:80%;
			background:#fff;
			vertical-align:top;
			text-align:center;
			box-sizing:border-box;
			display:table-cell;

		}

		.seat_header{
			width:100%;
			height:30px;
			line-height:30px;
			margin:0;
			white-space:nowrap;
			padding:2px 20px;
			font-weight:bold;
			text-align:center;
			box-sizing:border-box;
		}

		.bt_area{
			padding:0px 0px 50px;
		}

		.bt_area input{
			padding:4px 12px;
		}