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

/*/////////////////////////////////////////////////////////
file name: service.css
description: 料金・ご利用の流れ専用スタイルシート

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

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

/*料金表*/

.boxPrice01 {
	width: 130px;
	float: left;
}

.boxPrice02 {
	width: 690px;
	float: left;
	border-bottom: 2px solid #e5e5e5;
	height: 58px;
}

.boxPrice02 h1 {
	font-size: 120%;
	margin-top: 35px;
}

.boxPrice03 {
	width: 290px;
	float: left;
}

.boxPrice04 {
	width: 530px;
	float: left;
}

.txtPrice {
	border-bottom: 1px dotted black;
	padding-bottom: 5px;
}

/*表*/
table.tblPrice {
	border: 1px solid #a0a0a0;
	border-collapse:collapse;
	width: 100%;
	margin-top: 10px;
}

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

table.tblPrice th.weekly {
	background: #3dac4a;
}

table.tblPrice th.monthly {
	background: #076bb0;
}

table.tblPrice th.dw {
	background: #e5e5e5;
	color: black;
}

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

/*流れ*/
.boxFlow01 {
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Safari,Chrome */
	-khtml-border-radius: 10px;
	border: 3px solid #d2d2d2;
	background: #f7f7f7;
	padding: 20px 20px;
}

.boxFlow02 {
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Safari,Chrome */
	-khtml-border-radius: 10px;
	border: 3px solid #d2d2d2;
	padding: 25px 20px;
}


.blockFlow01 {
	width: 112px;
	float: left;
	text-align: center;
	margin-right: 20px;
}

.blockFlow02 {
	width: 642px;
	float: left;
	margin-top: 5px;
}

.blockFlow02 h1 {
	border-bottom: 2px solid #7d7d7d;
	padding-bottom: 5px;
	font-size: 171.4%;
	margin-bottom: 15px;
}

.blockFlow02 p {
	padding-bottom: 0;
}

.boxArrow {
	text-align: center;
}

.blockFlow02 span.boxTelLink {
	font-size: 171.4%;
}


/* ===========  2.667px以下スマホ縦横 =========== */
@media screen and (max-width: 667px) {

/*料金表*/

.boxPrice01 {
	width: 25%;
	float: left;
}

.boxPrice01 img {
	width: 100%;
}

.boxPrice02 {
	width: 75%;
	float: left;
	border-top: 2px solid #19144e;
	border-bottom: none;
	height: auto;
}

.boxPrice02 h1 {
	font-size: 120%;
	margin-top: 6%;
	padding-left: 5%;
}

.boxPrice03 {
	width: 100%;
	float: none;
	text-align: center;
}

.boxPrice04 {
	width: 100%;
	float: none;
}

/*表*/
table.tblPrice th {
	display: block;
	border-right: none;
}

table.tblPrice td {
	display: block;
	text-align: center;
	border-right: none;
}

/*流れ*/
.boxFlow01 {
	padding: 5%;
}

.boxFlow02 {
	padding: 5%;
}


.blockFlow01 {
	width: 25%;
	float: left;
	text-align: center;
	margin-right: 0;
}

.blockFlow01 img {
	width: 100%;
}

.blockFlow02 {
	width: 68%;
	float: right;
	margin-top: 0;
}

.blockFlow02 h1 {
	border-bottom: 2px solid #7d7d7d;
	padding-bottom: 5px;
	font-size: 120%;
	margin-bottom: 15px;
}

.blockFlow02 p {
	padding-bottom: 0;
}


.blockFlow02 span.boxTelLink {
	font-size: 106.7%;
}

}


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

/*表*/
table.tblPrice th {
	display: table-cell;
	border-right: 1px solid #a0a0a0;
}

table.tblPrice td {
	display: table-cell;
	text-align: left;
	border-right: 1px solid #a0a0a0;
}

.blockFlow02 span.boxTelLink {
	font-size: 160%;
}

}


/* ====== スマートフォンiPhone5縦 ====== */
@media screen and (max-width: 320px) {

.boxPrice02 h1 {
	font-size: 106.7%;
}

/*流れ*/
.blockFlow01 {
	width: 100%;
	float: none;
	text-align: center;
}

.blockFlow01 img {
	width: 40%;
}

.blockFlow02 {
	width: 100%;
	float: none;
	margin-top: 10px;
}

.blockFlow02 h1 {
	font-size: 106.7%;
	text-align: center;
}


}