@charset "utf-8";

@media screen and (max-width: 768px) {
	
	.guidance .box-kousoku-01 li {
		clear: both;
		overflow: hidden;
		width: 100%;
	}
	.guidance .box-kousoku-01 li img,
	.guidance .box-kousoku-01 li p {
		width: 49%;
	}
	.guidance .box-kousoku-01 li p {
		float: right;
	}

	.reserve table{
		background-color: #f4f4f4
	}

	.reserve .head{
		display: none;
	}

	.reserve .body{
		overflow: hidden;
		position: relative;
		display: block;
		border-bottom: 1px solid #ccc;
		margin-bottom: 6px
	}

	.reserve .body+.body{
		border-top: 1px solid #ccc;
	}
	
	.reserve .body td{
		display: block;
		width: 74%;
		border: none;
		text-align: left;
		padding: 6px 10px 6px 60px;
		overflow: hidden;
		position: relative;
		font-size: 12px;
		line-height: 18px;
	}

	.reserve .body td p{
		background-color: #78909c;
		color: #fff;
		text-align: center;
		font-size: 10px;
		line-height: 1;
		position: absolute;
		width: 50px;
		height: 100%;
		left: 0;
		top: 0;
		box-sizing: border-box;
	}

	.reserve .body td p span{
		transform: translate(0%, -50%);
		top: 50%;
		position: absolute;
		width: 100%;
		padding: 2px;
		left: 0;
		box-sizing: border-box;

	}

	.reserve .body td.one,
	.reserve .body td.two{
		border-bottom: 1px solid #ccc
	}

	.reserve .body td.two{
		line-height: 1;
		text-align: center;
	}

	.reserve .body td.two p+span{
		transform: rotate(90deg);
		display: inline-block;
		font-size: 12px;
	}

	.reserve .body td.four{
		float:right;
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 26%;
		font-size: 10px;
		padding: 0;
		text-align: center;
		border-left: 1px solid #ccc
	}

	.reserve .body td.four a{
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		position: absolute;
		padding: 6px;
		width: 100%;
		letter-spacing: -0.8px;
		box-sizing: border-box;
	}

	.reserve .body td.four img{
		width: 100%
	}
}