@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: 25%;
	list-style-type: none;
	font-size: 90%;
}

.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: 228.6%;
	color: red;
	text-shadow: 3px 3px 1px #c4c4c4;
	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;
}

table.tblPrice th.tblPrice04 {
	width: 25%;
	background-color: #fff;
}


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

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

table.tblOption {
	width: 100%;/*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;
}

.page-price-times .headline {
	position: relative;
}
.page-price-times .headline img {
	width: 100%;
}

.page-price-times .headline span {
	width: 100%;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  display: inline-block;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-style: normal;
}
@media screen and (max-width: 667px) {
	.page-price-times .headline span {
		font-size: 26px;
	}
}

.page-price-times .title02 {
	display: flex;
  align-items: flex-end;
}
.page-price-times .title02 span {
	font-size: small;
	font-weight: normal;
  margin-left: auto;
}

.page-price-times .detail-wrap {
	display: flex;
}
@media screen and (max-width: 667px) {
	.page-price-times .detail-wrap {
		flex-wrap: wrap;
	}
}

.page-price-times .detail-wrap .detail-img {
	width: 50%;
}
@media screen and (max-width: 667px) {
	.page-price-times .detail-wrap .detail-img {
		width: 100%;
		text-align: center;
	}
}

.page-price-times .detail-wrap .detail-img img {
	width: 80%;
}

.page-price-times .detail-wrap .detail-img .img-70p {
	width: 70%;
}

.page-price-times .detail-wrap .detail-txt {
	width: 50%;
	padding-left: 2rem;
	padding-top: 1rem;
}
@media screen and (max-width: 667px) {
	.page-price-times .detail-wrap .detail-txt {
		width: 100%;
		padding-left: 0;
	}
}

.page-price-times .detail-wrap .detail-txt h4 {
  font-size: 150%;
  line-height: 1.5;
}

.page-price-times .detail-wrap .detail-txt .detail-item {
	display: flex;
	color: #fff;
}

.page-price-times .detail-wrap .detail-txt .detail-item .detail-item-etc {
  display: flex;
  align-items: center;
	background-color: #6c5fd1;
	border-radius: 5px;
	margin: 2px;
	padding: 5px;
}

.page-price-times .detail-wrap .detail-txt .detail-item .detail-item-bc {
	display: flex;
  align-items: center;
	background-color: #5292b9;
	border-radius: 5px;
	margin: 2px;
	padding: 5px;
}

.page-price-times .price-wrap {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
  margin-bottom: 40px;
}
@media screen and (max-width: 667px) {
	.page-price-times .price-wrap {
		flex-wrap: wrap;
	}
}

.page-price-times .price-wrap .price-6,
.page-price-times .price-wrap .price-24,
.page-price-times .price-wrap .price-ex {
	display: flex;
	width: 100%;
}

.page-price-times .price-wrap .price {
	width: 100%;
	box-sizing: border-box;
  border: 1px solid #ccc;
}

.page-price-times .price-wrap .price-last {
	/*width: 40%;*/
}

.page-price-times .price-wrap .price-head {
	width: 50%;
	color: #fff;
  padding: 10px 2px;
  font-size: 110%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-price-times .price-wrap .price-head-6 {
	background-color: #bd8d50;
	align-self: unset;
	white-space: nowrap;
}

.page-price-times .price-wrap .price-head-24 {
	background-color: #777530;
	align-self: unset;
	white-space: nowrap;
}

.page-price-times .price-wrap .price-head-ex {
	background-color: #7f6f7b;
	align-self: unset;
	font-size: 80%;
  white-space: nowrap;
}

.page-price-times .price-wrap .price-body {
	width: 50%;
  font-size: 150%;
  text-align: center;
  align-self: center;
}

.page-price-times .price-wrap .price-body span {
	font-size: small;
}

.detail-txt .hv-mark {
	margin-left: 20px;
}


.page-price-times #class01 .title04 {
	background-color: #6da134;
}

.page-price-times #class02 .title04 {
	background-color: #5b64a3;
}

.page-price-times #class03 .title04 {
	background-color: #97a35b;
}

.page-price-times #class05 .price-wrap {
	flex-wrap: wrap;
}

.page-price-times #class05 .price-wrap .price {
	display: flex;
}

.page-price-times #class05 .price-wrap .price-head-1 {
	background-color: #8f7373;
}

.page-price-times #class05 .price-wrap .price-head-2 {
	background-color: #b18e8e;
}

.page-price-times #class05 .price-wrap .price-head-3 {
	background-color: #d7b0b0;
}

.page-price-times #class05 .price-wrap .price-head-4 {
	background-color: #645faa;
}

.page-price-times #class05 .price-wrap .price-body {
	font-size: 100%;
	text-align: left;
	padding: 10px;
  line-height: 1.3;
}

.page-price-times #class06 .times-video {
	margin-bottom: 60px;
}

.page-price-times #class06 .times-video h5 {
	font-size: 150%;
	text-align: center;
	padding-bottom: 20px;
}

.page-price-times #class06 .times-notice h5 {
	font-size: 150%;
  border-bottom: 3px solid rgba(27, 127, 204, .8);
	padding-bottom: 5px;
  margin-bottom: 20px;
}

.page-price-times #class06 .times-notice dl {
	line-height: 1.5;
}

.page-price-times #class06 .times-notice dl dd {
	margin-left: 1rem;
	margin-bottom: 0.5rem;
}

.page-price-times .price-o dl {
	display: flex;
	flex-wrap: wrap;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.page-price-times .price-o dl dt {
	width: 4%;
}

.page-price-times .price-o dl dd {
	width: 95%;
}

@media screen and (max-width: 667px) {
	.page-price-times .price-o {
		flex-wrap: wrap;
	}
	.page-price-times .price-o .price-head,
	.page-price-times .price-o .price-body {
		width: 100%;
	}
}




/* ===========  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;
}

.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: 100%;
}

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

.boxSystem p img {
	width: 100%;
}



}

/* ===========  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%;
}

	
}