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

/*/////////////////////////////////////////////////////////
file name: price.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: 33%;
	list-style-type: none;
}

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

.boxPrice02 {
	width: 370px;
	float: right;
	text-align: right;
}

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

.boxPrice04 {
	width: 320px;
	float: right;
	text-align: right;
}
.boxPrice05 {
	width: 340px;
	float: left;
}

.boxPrice06 {
	width: 340px;
	float: right;
	text-align: right;
}

.copyPrice {
	font-size: 180%;/*228.6%;*/
	color: red;
	line-height: 1.4;
}

table.tblPrice {
	margin-top: 10px;
}

table.tblPrice th.tblPrice01 {
	width: 25%;
	background-color: #ff9c00;
	color: white;
}

table.tblPrice th.tblPrice02 {
	width: 25%;
	background-color: #1e94ed;
	color: white;
}

table.tblPrice th.tblPrice03 {
	width: 25%;
	background-color: #e5e5e5;
}

table.tblPrice td {
	width: 25%;
}


.page-price table.tblPrice td {
	padding: 8px;
}



.page-price .price-table {
	box-sizing: border-box;
	border: 2px solid #cbcbcb;
}

.page-price .price-table .price-wm {
	display: flex;
	flex-wrap: nowrap;
	box-sizing: border-box;
	border-bottom: 2px solid #cbcbcb;
}

.page-price .price-table .price-cwd {
	display: flex;
}

.page-price .price-table .price-wm dt,
.page-price .price-table . dt {
	text-align: center;
	box-sizing: border-box;
	border-right: 2px solid #cbcbcb;
}

.page-price .price-table dl dt,
.page-price .price-table dl dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-weight: bold;
	line-height: 1.4;
	min-width: 170px;
	padding: 10px;
}

.page-price .price-table .price-wm dd.border-right {
	box-sizing: border-box;
	border-right: 2px solid #cbcbcb;
}

.page-price .price-table .price-wm dt.price-w {
	display: flex;
	justify-content: center;
	color:  #fff;
	background-color: #f58181;
}

.page-price .price-table .price-wm dt.price-m {
	display: flex;
	justify-content: center;
	color:  #fff;
	background-color: #7fbf3a;
}

.page-price .price-table .price-cwd dt {
	display: flex;
	justify-content: center;
	background-color: #d5d5d5;
}
.page-price .price-table .haruna{
	background-color: #fff;
	border-top:#cbcbcb 0.1px solid;
}

.page-price .price-table dl dd {
	font-size: 125%;
}

.page-price .price-table dl dd span {
	font-size: 75%;
	font-weight: normal;
}

.page-price .boxPrice02 img {
	max-width: 100%;
}



/*オプション料金*/
.boxOption01 {
	width: 520px;
	float: left;
}

.boxOption02 {
	width: 140px;
	float: right;
}

table.tblOption {
	width: 600px;
	margin: 20px auto 0;
}

p.tblOption_txt {
	text-align: right;
	margin-right: 40px;
}

/*メリット*/
.boxMerit {
	width: 202px;
	border: 4px solid #65b50f;
	margin-left: 20px;
	position: relative;
	height: 202px;
	float: left;
	margin-bottom: 15px;
}

.boxMeritDetail {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 202px;
	text-align: center;
	line-height: 1.4;
}

#boxMerit01 {
	background: url(../images/merit/bg_boxMerit01.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit02 {
	background: url(../images/merit/bg_boxMerit02.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit03 {
	background: url(../images/merit/bg_boxMerit03.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit04 {
	background: url(../images/merit/bg_boxMerit04.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit05 {
	background: url(../images/merit/bg_boxMerit05.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit06 {
	background: url(../images/merit/bg_boxMerit06.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit07 {
	background: url(../images/merit/bg_boxMerit07.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit08 {
	background: url(../images/merit/bg_boxMerit08.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit09 {
	background: url(../images/merit/bg_boxMerit09.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit10 {
	background: url(../images/merit/bg_boxMerit10.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit11 {
	background: url(../images/merit/bg_boxMerit11.jpg) center top no-repeat;
	background-size: 100% auto;
}
#boxMerit12 {
	background: url(../images/merit/bg_boxMerit12.jpg) center top no-repeat;
	background-size: 100% auto;
}


/*仕組み*/
.boxSystem {
	margin-left: 20px;
	width: 330px;
	margin-top: 15px;
	float: left;
}

#titleSystem01 {
	background: url(../images/system/bg_titleSystem01.gif) left top no-repeat;
	min-height: 39px;
	padding: 20px 0 0 70px;
	font-size: 157.1%;
	color: red;
	font-weight: 900;
}

#titleSystem02 {
	background: url(../images/system/bg_titleSystem02.gif) left top no-repeat;
	min-height: 39px;
	padding: 20px 0 0 70px;
	font-size: 157.1%;
	color: red;
	font-weight: 900;
}

#titleSystem03 {
	background: url(../images/system/bg_titleSystem03.gif) left top no-repeat;
	min-height: 39px;
	padding: 20px 0 0 70px;
	font-size: 157.1%;
	color: red;
	font-weight: 900;
}

#titleSystem04 {
	background: url(../images/system/bg_titleSystem04.gif) left top no-repeat;
	min-height: 39px;
	padding: 20px 0 0 70px;
	font-size: 157.1%;
	color: red;
	font-weight: 900;
}

#titleSystem05 {
	background: url(../images/system/bg_titleSystem05.gif) left top no-repeat;
	min-height: 39px;
	padding: 20px 0 0 70px;
	font-size: 157.1%;
	color: red;
	font-weight: 900;
}

#titleSystem06 {
	background: url(../images/system/bg_titleSystem06.gif) left top no-repeat;
	min-height: 39px;
	padding: 20px 0 0 70px;
	font-size: 157.1%;
	color: red;
	font-weight: 900;
}



/* ===========  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;
	font-size: x-small;
  font-weight: normal;
	margin-bottom: 0;
}

.boxPrice01, .boxPrice03, .boxPrice05{
	width: 100%;
	float: none;
}

.boxPrice02, .boxPrice04, .boxPrice06 {
	width: 100%;
	float: none;
	text-align: center;
}

.boxPrice02 img,
.boxPrice06 img{
	width: 100%;
}

.copyPrice {
	font-size: 160%;
}





/*オプション料金*/
.boxOption01 {
	width: 100%;
	float: none;
}

.boxOption02 {
	width: 100%;
	float: none;
	text-align: center;
	margin-top: 20px;
}


table.tblOption {
	width: 96%;
	margin: 20px auto 0;
}

table.tblOption td {
	white-space: nowrap;
}

p.tblOption_txt {
	text-align: right;
	margin-right: 2%;
}

/*メリット*/
.boxMerit {
	width: 43%;
	border: 2% solid #65b50f;
	margin-left: 2%;
	margin-right: 2%;
	position: relative;
	height: 150px;
	float: left;
	margin-bottom: 15px;
}

.boxMeritDetail {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	text-align: center;
	line-height: 1.4;
}

.boxMeritDetail .xxlarge {
	font-size: 106.7%;
}

.boxMeritDetail .large {
	font-size: 86.7%;
}


/*仕組み*/
#mainContent h2 img {
	width: auto;
}

.boxSystem {
	margin-left: 2%;
	margin-right: 2%;
	width: auto;
	float: none;
}

.boxSystem p img {
	width: 100%;
}

#boxMerit06 h2.boxMeritDetail {
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  position: static;
  align-content: space-between;
  padding-top: 10px;
  background: rgba(255,255,255,0.6);
}

#boxMerit06 h2 .sp-small {
	font-size: 90%;
}



}

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

/*レンタカー料金*/
.boxNav ul li {
	float: left;
	width: 33%;
	list-style-type: none;
}

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

.boxPrice02 {
	width: 55%;
	float: right;
}

.boxPrice02 img {
	width: 100%;
}

.boxPrice03 {
	width: 50%;
	float: left;
}

.boxPrice04 {
	width: 45%;
	float: right;
}

.boxPrice04 img {
	width: 100%;
}







/*オプション料金*/
.boxOption01 {
	width: 70%;
	float: left;
}

.boxOption02 {
	width: 25%;
	float: right;
	margin-top: 0;
}

.boxOption02 img {
	width: 100%;
}

/*メリット*/
.boxMerit {
	width: 28%;
	border: 2% solid #65b50f;
	margin-left: 2%;
	margin-right: 2%;
	position: relative;
	height: 180px;
	float: left;
	margin-bottom: 15px;
}

.boxMeritDetail {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	text-align: center;
	line-height: 1.4;
}

.boxMeritDetail .xxlarge {
	font-size: 120%;
}

.boxMeritDetail .large {
	font-size: 100%;
}


/*仕組み*/


.boxSystem {
	margin-left: 2%;
	margin-right: 2%;
	width: 46%;
	float: left;
}

.boxSystem p img {
	width: 100%;
}

	
}




















@media only screen and (max-device-width:667px) {

	.page-price .price-table dl.price-wm, 
	.page-price .price-table dl.price-cwd {
		flex-wrap: wrap;
	}

	.page-price .price-table dl dt,
	.page-price .price-table dl dd {
		justify-content: center;
		min-width: auto;
		width: 100%;
	}


}