/*=================================================
 * CSS for PC
 * ================================================= */

/** system **/

#system{
	text-align: left;
}

.topimg{
	font-size: 0;
	line-height: 0;
	margin: 0 0 20px 0;
}


/** sys **/

.sys{
	text-align: left;
	margin: 0 0 20px 0;
}

.sys .boxtxt{
	font-size: 14px;
	line-height: 20px;
	padding: 15px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}

.sys table{
	width: calc(100% - 20px);
	font-size: 18px;
	line-height: 20px;
	margin: 0 auto;
}

.sys tr{
	vertical-align	: middle;
}

.sys th{
	width: 50%;
	font-weight: bold;
	text-align: left;
	padding: 15px 0 14px 95px;
	border-bottom-width	: 1px;
	border-bottom-style	: dotted;
}

.sys th p span{
	font-size: 10px;
	color: #ff0000;
}

.sys td{
	font-weight: bold;
	text-align: right;
	padding: 15px 95px 14px 0;
	border-bottom-width	: 1px;
	border-bottom-style	: dotted;
}

.sys th,
.sys td{
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}


/** play **/

.play{
	margin: 0 0 10px 0;
	padding: 15px 0 0 0;
}

.play ul{
	font-size: 0;
	line-height: 0;
	padding: 0 0 0 7px;
}

.play li{
	display: inline-block;
	vertical-align: top;
	width: 215px;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	border-radius: 2px;
	border-style: solid;
	border-width: 2px;
	margin: 0 5px 10px 5px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}


/** credit **/

.credit{
	text-align: center;
	margin: 0 0 20px 0;
}

.credit p{
	font-size: 14px;
	line-height: 20px;
	padding: 15px;
}

.credit .bt1{
	display: inline-block;
	vertical-align: top;
	width: 250px;
}


/** area **/

.area{
	margin: 0 0 20px 0;
}

.area dl{
	display: table;
	font-size: 0;
	line-height: 0;
	width: calc(100% - 20px);
	margin: 0 auto;
}

.area dt,
.area dd{
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
	line-height: 20px;
}

.area dt{
	width: 155px;
	font-weight: normal;
	text-align: left;
	padding: 15px 0 15px 15px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.area dd{
	padding: 15px 15px 15px 0;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}


/** other **/

.other{
	margin: 0 0 20px 0;
}

.other p{
	font-size: 14px;
	line-height: 20px;
	padding: 15px 20px 0 20px;
}


/** map **/

.map{
	margin: 0 0 20px 0;
	padding: 15px 0 0 0;
}

.gmap{
	font-size: 0;
	line-height: 0;
	border-width: 10px;
	border-style: solid;
}

.gmap iframe{
	width: 670px;
	height: 400px
}

.map table{
	width: calc(100% - 20px);
	font-size: 14px;
	line-height: 20px;
	margin: 0 auto;
}

.map tr{
	vertical-align: middle;
}

.map th{
	width: 65px;
	font-weight: normal;
	text-align: left;
	padding: 10px 0 10px 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.map td{
	padding: 10px 15px 10px 0;
}


/** caution **/

.caution{
	margin: 0 0 20px 0;
}

.caution p{
	font-size: 12px;
	line-height: 20px;
	margin: 0 10px;
	padding: 15px 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}


/*=================================================
 * CSS for SP
 * ================================================= */

@media screen and (max-width: 650px) {
	#system{
	}
	#system > div:last-of-type{	margin-bottom: 0;}
	.topimg{
		text-align: center;
		margin: 0 0 10px 0;
	}
	.topimg img{
		width: 100%;
		max-width: 690px;
	}

	/** sys **/
	.sys{	margin: 0 0 10px 0;}
	.sys .boxtxt{
		font-size: 12px;
		line-height: 18px;
		padding: 10px;
	}
	.sys table{
		width: 100%;
		font-size: 15px;
		line-height: 20px;
		margin: 0;
	}
	.sys th{	padding: 15px 0 14px 10px;}
	.sys td{	padding: 15px 10px 14px 0;}
	.sys tr:last-child th,
	.sys tr:last-child td{	border-bottom-style: solid;}

	/** play **/
	.play{
		margin: 0 0 5px 0;
		padding: 5px 0 0 0;
	}
	.play ul{
		font-size: 0;
		line-height: 0;
		padding: 0 3px;
	}
	.play li{
		width: calc(50% - 4px);
		font-size: 11px;
		line-height: 40px;
		text-align: center;
		border-radius: 2px;
		border-style: solid;
		border-width: 2px;
		margin: 0 2px 5px 2px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	/** credit **/
	.credit{
		text-align: left;
		margin: 0 0 10px 0;
	}
	.credit p{
		font-size: 12px;
		line-height: 18px;
		padding: 10px;
	}
	.credit .form{
		text-align: center;
		padding: 0 10px 10px 10px;
	}
	.credit .bt1{
		display: block;
		width: 100%;
	}

	/** area **/
	.area{	margin: 0 0 10px 0;}
	.area dl{
		display: block;
		width: 100%;
		margin: 0;
	}
	.area dt,
	.area dd{
		display: block;
	}
	.area dt{
		width: 100%;
		font-weight: bold;
		line-height: 18px;
		padding: 10px 10px 0 10px;
		border: none;
	}
	.area dd{
		font-size: 12px;
		line-height: 18px;
		padding: 5px 10px 10px 10px;
	}
	.area dl:last-of-type dd{	border-bottom-style: solid;}

	/** other **/
	.other{	margin: 0 0 10px 0;}
	.other p{
		font-size: 12px;
		line-height: 18px;
		padding: 10px;
	}

	/** map **/
	.map{
		margin: 0 0 10px 0;
		padding: 10px 0 0 0;
	}
	.gmap{
		margin: 0 10px;
		border-width: 5px;
	}
	.gmap iframe{
		width: 100%;
		height: 250px
	}
	.map table{
		width: 100%;
		font-size: 12px;
		line-height: 18px;
		margin: 0;
	}
	.map th{	width: 55px;}
	.map td{	padding: 10px 10px 10px 0;}

	/** caution **/
	.caution{
		margin: 0 0 10px 0;
	}
	.caution p{
		line-height: 18px;
		margin: 0;
		padding: 10px;
	}
	.caution p:last-of-type{	border-bottom-style: solid;}
}