@charset "utf-8";
/* CSS Document */

/*/////////////////////////////////////////////////////////
file name: flow.css
description: 予約方法専用スタイルシート

1.レイアウト
2.スマートフォン縦横
3.スマートフォン横

///////////////////////////////////////////////////////// */

/* ===========  1.レイアウト =========== */

.boxNav {
	background-color: #e5e5e5;
	padding: 20px;
}

.boxNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.boxNav ul li {
	float: left;
	width: 300px;
	list-style-type: none;
}

.boxFlow01 {
	float: left;
	width: 160px;
	text-align: center;
}

.boxFlow02 {
	float: right;
	width: 460px;
}
	
.mt60Flow {
	margin-top: 60px;
}

.mt10Flow {
	margin-top: 10px;
}

.mt40Flow {
	margin-top: 40px;
}

.mt20Flow {
	margin-top: 20px;
}

table.tblCancel {
	border: 1px solid #a0a0a0;
	border-collapse:collapse;
	width: 60%;
	margin-top: 10px;
}

table.tblCancel th {
	border: 1px solid #a0a0a0;
	border-bottom:none;
	vertical-align: middle;
	text-align: left;
	padding: 5px 10px;
	white-space: nowrap;
	font-weight: bold;
	line-height: 1.4;
	background-color: #e5e5e5;
}

table.tblCancel td {
	border: 1px solid #a0a0a0;
	border-bottom: none;
	padding: 5px 10px;
	vertical-align: middle;
	line-height: 1.4;
	white-space: nowrap;
}



/* ===========  2.667px以下スマホ縦横 =========== */
@media screen and (max-width: 667px) {
	
.boxNav {
	background-color: #e5e5e5;
	padding: 20px 20px 10px;
}

.boxNav ul li {
	float: none;
	width: 100%;
	list-style-type: none;
	margin-bottom: 10px;
}

.boxBtn p img {
	width: 100%;
}

.boxFlow01 {
	float: left;
	width: 35%;
	text-align: center;
}

.boxFlow01 img {
	width: 100%;
}

.arrow img {
	width: 60%;
}

.boxFlow02 {
	float: right;
	width: 60%;
}

.mt60Flow {
	margin-top: 0;
}

.mt10Flow {
	margin-top: 0;
}

.mt40Flow {
	margin-top: 0;
}

.mt20Flow {
	margin-top: 0;
}

table.tblCancel {
	width: auto;

}

}

/* ===========  3.スマホ横 =========== */
@media only screen and (max-device-width:667px) and (orientation:landscape) {

.boxNav ul li {
	float: left;
	width: 50%;
	list-style-type: none;
}

.boxBtn p img {
	width: auto;
}

.boxFlow01 {
	float: left;
	width: 25%;
	text-align: center;
}

.boxFlow02 {
	float: right;
	width: 70%;
}

.mt60Flow {
	margin-top: 60px;
}

.mt10Flow {
	margin-top: 10px;
}

.mt40Flow {
	margin-top: 40px;
}

.mt20Flow {
	margin-top: 20px;
}

}