@charset "UTF-8";
	
/*
	
Description: ニッポンレンタカー ハワイ
Version: 202205

*/


/*------------------------------------------------------------
	【共通】下層ページ：レイアウト
------------------------------------------------------------*/

@media only screen and (min-width: 813px) {

	
	.container .contents .conts-inner {
		margin-bottom: 40px;
	}

}

/*------------------------------------------------------------
	【共通】下層ページ：見出し
------------------------------------------------------------*/

h2 {
	background: url(/hawaii/img/common/bg_h2.svg) left 2px no-repeat;
	background-size: auto 21px;
	font-size: 1.6rem;
	line-height: 1.7;
	font-weight: 600;
	color: #000;
	border-bottom: 2px solid #ED0000;
	padding: 0 0 15px 20px;
	margin-bottom: 20px;
}

.narrow h2  {
	font-size: 2rem;
	background: none;
	text-align: center;
	padding: 0 0 15px;
}

@media only screen and (min-width: 813px) {
	
	h2 {
		background-position: 0 6px;
		background-size: auto 23px;
		font-size: 2rem;
		padding: 0 0 20px 30px;
		margin-bottom: 30px;
	}
	
	.narrow h2  {
		font-size: 2.4rem;
		background: none;
		text-align: center;
		padding: 0 0 20px;
	}
	
}


h3 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.7;
	color: #000;
}

h3 span {
	font-size: 1.4rem;
	display: block;
	color: #ED0000;
}

@media only screen and (min-width: 813px) {
	
	h3 {
		font-size: 1.8rem;
	}
	
}


h4 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.7;
	color: #000;
}


@media only screen and (min-width: 813px) {
	
	h4 {
		font-size: 1.8rem;
	}
	
}

h5 {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.7;
	color: #000;
}


@media only screen and (min-width: 813px) {
	
	h5 {
		font-size: 1.6rem;
	}
	
}



/*------------------------------------------------------------
	【共通】マージンホルダー
------------------------------------------------------------*/

.holder-15-20 {
	margin-bottom: 15px;
}

.holder-20-30 {
	margin-bottom: 20px;
}

.holder-30-40 {
	margin-bottom: 30px;
}

.holder-30-50 {
	margin-bottom: 30px;
}

.holder-60-90 {
	margin-bottom: 60px;
}

@media only screen and (min-width: 813px) {
	
	.holder-15-20 {
		margin-bottom: 20px;
	}
	
	.holder-20-30 {
		margin-bottom: 30px;
	}
	
	.holder-30-40 {
		margin-bottom: 40px;
	}
	
	.holder-30-50 {
		margin-bottom: 50px;
	}
	
	.holder-60-90 {
		margin-bottom: 90px;
	}
	
}

/*------------------------------------------------------------
	INFINITE SCROLL
------------------------------------------------------------*/

/*LOADERをセンターへ*/
div.malinky-ajax-pagination-loading img {
	margin: 0 auto;
}





/*------------------------------------------------------------
	下層ページ：その他のお得な情報＆お楽しみプラン
------------------------------------------------------------*/

#campaign-area .one-third dl {
	margin-top: 5px;
}

#campaign-area .one-third dl dt {
	font-size: 1.3rem;
	line-height: 1.7;
	margin-bottom: 3px;
}

#campaign-area .one-third dl dt a {
	font-weight: 600;
	color: #1c1c1c;
}

#campaign-area .one-third dl dd {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #3c3c3c;
}

@media only screen and (min-width: 813px) {
	
	#campaign-area .one-third {
		margin-bottom: 30px;
	}
	
	#campaign-area .one-third dl {
		margin-top: 10px;
	}
	
	#campaign-area .one-third dl dt {
		font-size: 1.3rem;
		line-height: 1.8;
		margin-bottom: 2px;
	}
	
	#campaign-area .one-third dl dd {
		font-size: 1.2rem;
		line-height: 1.8;
	}

}



/*------------------------------------------------------------
	下層ページ：予約確認ページ
------------------------------------------------------------*/

.agreement {
	border: 10px solid #f1f1f1;
	text-align: center;
	padding: 20px;
}

.agreement label {
	font-size: 1.3rem;
}

.agreement a.button {
	font-weight: bold;
	margin: 20px auto 15px;
	cursor: pointer;
}

a.cancel-back {
	font-size: 1.3rem;
	color: #000;
	cursor: pointer;
}

a.cancel-back i,
a.cancel-back:hover {
	color: #C30D23;
}

@media only screen and (min-width: 813px) {
	
	.agreement {
		padding: 30px;
	}
	
	.agreement label {
		font-size: 1.4rem;
	}
	
	a.cancel-back {
		font-size: 1.3rem;
	}


}

/*------------------------------------------------------------
	下層ページ：お問い合わせ
------------------------------------------------------------*/


@media only screen and (max-width: 812px) {
	
	#contact a.button {
		margin: 20px auto;
	}

}


/*------------------------------------------------------------
	404 Error
------------------------------------------------------------*/

dl.errorMsg {
	text-align: center;
}

dl.errorMsg dt {
	font-size: 20rem;
	letter-spacing: 5px;
	color: #D8182B;
	line-height: 100px;
	margin-top: 200px;
}

dl.errorMsg dt span {
	font-size: 6rem;
}

dl.errorMsg dd {
	font-size: 1.6rem;
	font-weight: bold;
	color: #000;
}



/*------------------------------------------------------------
	キャンセル・モーダル
------------------------------------------------------------*/

.modal {
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 100000;
}

.modal div.modal_body {	
    align-items: center;
    justify-content: center;
    background-color: white;
	width: 300px;
    height: 260px;
    padding: 0;
    position: fixed;
    left: calc(50% - 150px);
    top: calc(50% - 130px);
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
}

@media only screen and (min-width: 813px) {
	
	.modal div.modal_body {	
	    width: 360px;
		height: 300px;
	    left: calc(50% - 180px);
	    top: calc(50% - 150px);
	}
	
}
   
.modal .main_area_head {
	background: #C30D23;
	font-size: 1.8rem;
	text-align: center;
	color: #fff;
	line-height: 50px;
}

.modal .main_area_body {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 2.2;
	color: #000;
	text-align: center;
	padding: 35px 10px 20px;
}

@media only screen and (min-width: 813px) {
	
	.modal .main_area_body {
		font-size: 1.6rem;
		padding: 40px 20px 30px;
	}
	
}

.modal .button_area {
	font-size: 0;
	text-align: center;
}

.modal .button_area a {
	width: 40%;
	font-size: 1.4rem;
	display: inline-block;
	margin-right: 5%;
	cursor: pointer;
}

.modal .button_area a:nth-child(2) {
	margin-right: 0;
}
.fa-phone-square:before {
    content: "\f098";
}