/* --------------- reserve-car login --------------- */

.bg_pagettl.reserve {
	background-image: url(../img/reserve/bg_pagettl.jpg);
	background-repeat: no-repeat;
}

.bg_pagettl.reserve #pagettl .jp {
	letter-spacing: 0.1em;
}

.bg_pagettl.reserve .en {
	width: 112px;
	margin: 0 auto;
	padding: 0;
}

#mtsrcb-find-entry p.reserve-description {
	max-width: 640px;
	margin: 0 auto 50px;
	padding: 0;
}

form#mtsrcb-entry-form {
	max-width: 640px;
	margin: 0 auto 120px;
	padding: 40px;
	border: solid 1px #00c700;
	box-sizing: border-box;
}

.reserve-form-block input[type="text"] {
	width: 100%;
	margin: 0;
	padding: 8px;
	font-size: 16px;
}

form#mtsrcb-entry-form #reserve-action-box {
	margin: 0;
	padding: 20px 0 0;
	text-align: center;
}

form#mtsrcb-entry-form #reserve-action-box input[type="submit"] {
	width: 140px;
	height: 42px;
	margin: 0 auto;
	padding: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	background-color: #ff8100;
	border: none;
	transition: opacity .3s;
	cursor: pointer;
}


/* --------------- reserve-car reserved --------------- */

.mtsrcb-page-block {
	width: 92%;
	max-width: 780px;
	margin: 0 auto 80px;
	padding: 0;
}

.rental-form-title {
	margin: 0 0 5px;
	font-weight: 600;
}

.list-page table.mts-form-table {
	margin: 0;
}

table.mts-form-table th:first-child,
table.mts-form-table th:last-child,
table.mts-form-table th {
	width: 190px;
	margin: 0;
	padding: 10px 15px;
	text-align: left;
	background-color: #f0f0f0;
	box-sizing: border-box;
}

table.mts-form-table td:first-child,
table.mts-form-table td:last-child,
table.mts-form-table td {
	width: calc( 100% - 190px );
	margin: 0;
	padding: 10px 15px;
	box-sizing: border-box;
}

.list-page table.mts-form-table td .reserve-vehicle-image {
	width: 90%;
	margin: 0 auto;
}

.list-page table.mts-form-table td img {
	width: 100%;
	height: auto;
}

.rental-form-block.charge-list > h3 {
	margin: 0 0 5px;
	font-weight: 600;
}

.rental-form-block.charge-list table.mts-form-table td {
	font-size: 17px;
}

.rental-form-block.action-row input[type="submit"] {
	width: 140px;
	height: 42px;
	margin: 0 10px 0 0;
	padding: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 600px;
	text-align: center;
	background-color: #333;
	border: none;
	transition: opacity 0.3s;
	cursor: pointer;
}



/* --------------- reserve-car cancel --------------- */

table.mts-form-table {
	margin: 0;
	border-spacing: 0;
	border: none;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
}

table.mts-form-table td img {
	width: 100%;
}

.reserve-form-block.reserve-cancel {
	width: 100%;
	max-width: 100%;
	padding: 20px 0 0;
	border: none;
}

.reserve-form-block.reserve-cancel > h3 {
	margin: 0 0 5px;
	font-weight: 600;
}

.cancel-charge-message {
	margin: 0 0 5px;
}



/* --------------- reserve-car cancel complete --------------- */

#mtsrcb-page-block {
	width: 92%;
	max-width: 700px;
	min-height: 300px;
	margin: 0 auto;
	padding: 40px 0 0;
	text-align: center;
}

#mtsrcb-page-block .canceld-message p {
	margin: 0;
	padding: 40px 0 0;
}

#mtsrcb-page-block .canceld-message p a {
	margin: 0;
	padding: 0 50px 0 0;
	color: #00c700;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	position: relative;
	z-index: 0;
}

#mtsrcb-page-block .canceld-message p a:before {
	content: "";
	width: 32px;
	height: 6px;
	margin: 0;
	padding: 0;
	border-right: solid 1px #00c700;
	border-bottom: solid 1px #00c700;
	transform: skewX(45deg);
	transition: width .3s;
	position: absolute;
	top: calc( 50% - 6px );
	left: calc( 100% - 40px );
}





/* ---------------------------------------------------------------
	start max 1033px
--------------------------------------------------------------- */

@media screen and ( max-width: 1033px ) {
	
	
	
	
	

}

/* ---------------------------------------------------------------
	end max 1033px
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
	start max 850px
--------------------------------------------------------------- */

@media screen and ( max-width: 850px ) {
	
}

/* ---------------------------------------------------------------
	end max 850px
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
	start min 701px
--------------------------------------------------------------- */

@media print,screen and ( min-width: 701px ) {
	
/* --------------- reserve-car login --------------- */
	
	.reserve-form-block #reserve-action-box input[type="submit"]:hover {
		opacity: 0.8;
	}
	
	.rental-form-block.action-row input[type="submit"]:hover {
		opacity: 0.8;
	}
	
	
/* --------------- reserve-car cancel complete --------------- */
	
	#mtsrcb-page-block .canceld-message p a:hover:before {
		width: 35px;
	}
	
}

/* ---------------------------------------------------------------
	end min 701px
--------------------------------------------------------------- */
	
/* ---------------------------------------------------------------
	start max 700px
--------------------------------------------------------------- */

@media screen and ( max-width: 700px ) {
	
/* --------------- reserve-car login --------------- */
	
	form .reserve-form-block {
		margin: 0 auto 80px;
		padding: 30px 4%;
	}
	
	
/* --------------- reserve-car reserved --------------- */
	
	table.mts-form-table th:first-child,
	table.mts-form-table th:last-child,
	table.mts-form-table th {
		width: 140px;
		padding: 10px;
	}
	
	table.mts-form-table td:first-child,
	table.mts-form-table td:last-child,
	table.mts-form-table td {
		width: calc( 100% - 140px );
		padding: 10px;
	}
	
	table.mts-form-table .rental-period-date {
		width: 100%;
	}
	
	table.mts-form-table .rental-period-arrow {
		width: 20px;
		margin: 0 auto;
		font-size: 1em;
		transform: rotate(90deg);
		display: block;
	}	
	
	
}

/* ---------------------------------------------------------------
	end max 700px
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
	start max 600px
--------------------------------------------------------------- */

@media screen and ( max-width: 600px ) {
	
	
	
}

/* ---------------------------------------------------------------
	end max 600px
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
	start max 450px
--------------------------------------------------------------- */

@media screen and ( max-width: 450px ) {
	
	.bg_pagettl.reserve .en {
		width: 24.58vw;
	}
	
/* --------------- reserve-car login --------------- */
	
	#mtsrcb-find-entry p.reserve-description {
		margin: 0 auto 8vw;
	}
	
	form .reserve-form-block {
		margin: 0 auto 16vw;
	}
	
	
/* --------------- reserve-car reserved --------------- */
	
	table.mts-form-table th:first-child,
	table.mts-form-table th:last-child,
	table.mts-form-table th {
		width: 86px;
		padding: 10px;
		line-height: 1.4;
	}
	
	table.mts-form-table td:first-child,
	table.mts-form-table td:last-child,
	table.mts-form-table td {
		width: calc( 100% - 86px );
		padding: 10px;
	}
	
	.rental-form-block.action-row {
		display: flex;
		justify-content: center;
	}
	
	.rental-form-block.action-row input[name="reserve_cancel"] {
		margin-right: 0;
	}
}

/* ---------------------------------------------------------------
	end max 450px
--------------------------------------------------------------- */