@charset "utf-8";

#sec_reserve_form{padding-bottom: 20px !important;}

.line_comment{font-size: 16px; margin: 12px 0 10px;}
#items_list{margin-top: 40px !important;}
.title_comment{font-size: 16px; width: 100%; margin-bottom: 30px;}


.reserve_container, .reserve_container_price, .confirm_container {max-width: 880px !important; margin: 0 auto;}
.complete_container{max-width: 780px !important; margin: 0 auto;}
.reserve_container_price{margin: 140px auto 0 !important;}

.vehicle_catchcopy_box{
	width: 100%; padding: 40px 0; margin: 0 auto 0px; border-top:1px #ccc solid; border-bottom:1px #ccc solid;
	font-size: 18px; letter-spacing: .05em; text-align: center;
}
.vehicle_catchcopy_box span{color: #bb4236;}

.reserve_title{
	width: 100%; padding-bottom: 32px; font-size: 26px; letter-spacing: .05em; position: relative; border-bottom: 1px #ccc solid; margin-top: 100px;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
.reserve_title:after{
	display: block; position: absolute; content: ""; width: 92px; height: 59px; right: 0; bottom: 0;
	background-image: url("/_common_new/img/common/ico_tree.png"); background-repeat: no-repeat; background-size: 100%;
}

.form_step_container{text-align: center; margin-top: 80px;}
.form_step_container img {width: 500px; height: auto;}

.form_line_container{width: 100%; overflow: hidden; height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content; margin-bottom: 40px;}
.form_line_container .form_line_box{
	display: flex; width: 100%; padding: 15px 0; border-bottom: 1px #ccc solid; position: relative;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
.form_line_container .form_line_box.dotted{border-bottom: 1px #ccc dotted !important;}
.form_line_container .form_line_box div.th{
	flex: 1;
	height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
.form_line_container .form_line_box div.td{
	flex: 2.5;
	display: flex; align-items: center;
	height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
.form_line_container .form_line_box div.td.textarea{
	display: flex; align-items: flex-start;
}

.form_line_container .form_line_box div.td{
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
.td .frm_box_flex{padding-bottom: 0 !important;}

.form_line_box span{
	font-size: 16px; margin-left: 20px;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
.form_line_box span.floating{float: unset; position: absolute; font-size: 14px; text-align: right; right: 0; bottom: 10px;}
.form_line_box textarea, .form_line_box input{width: 368px; margin-left: 12px; margin-right: 12px;}
.form_line_box img{width: 56px; height: auto;}

@media screen and (max-width: 767px) {
	.form_step_container{margin-bottom: 32px;}
	.form_step_container img{width: 400px;}
	.form_line_container .form_line_box{display: block;}
	.form_line_container .form_line_box div.th{margin-bottom: 12px;}
	.form_line_box textarea, .form_line_box input{width: 100%;}
}

@media (max-width: 576px) {
	.form_step_container img{width: 84%;}
}


.reserve_form_link {text-align: center; margin-top: 48px; margin-bottom: 20px;}
.reserve_form_link img {display: inline-block; width: 320px; height: auto;}
.confirm_container .reserve_form_link a:first-child {margin-right: 12px;}
.confirm_container .reserve_form_link img {width: 320px;}
.confirm_container .reserve_form_link a:last-child {margin-left: 12px;}

@media screen and (max-width: 767px) {
	.confirm_container .reserve_form_link a:first-child {margin-right: 8px;}
	.confirm_container .reserve_form_link img {width: 40%;}
}

@media (max-width: 576px) {
	.reserve_form_link img {width: 80%};
}


label.checkbox span{margin-left: 0 !important;}

span.frm_title{margin: 0 10px 0 10px !important;}
span.frm_title:first-of-type{margin: 0 10px 0 0 !important;}
input.mid, select.mid{width: 195px !important;}
input.shrt, select.shrt{width: 167px !important;}
input.shrter, select.shrter {width: 90px !important;}

.item_price_num{padding: 0 5px; margin: 10px auto;}
.inner_result_button{margin-bottom: 100px;}




#confirm_table, #confirm_table_total{
	width:100%; border-collapse: collapse; table-layout: fixed; border-spacing: 0; margin: 55px auto 0; border: 1px #ccc solid;}
#confirm_table_total{margin: 0 auto 65px; border: 1px #ccc solid; border-top: 0 !important;}
#confirm_table th, #confirm_table_total th{text-align: left !important; width: 365px !important; vertical-align: middle;}
#confirm_table th, #confirm_table td{padding: 15px 20px; border-bottom: 1px #ccc dotted;}
#confirm_table th.tab, #confirm_table_total th.tab{padding: 15px 20px 15px 40px !important;}

#confirm_table tr.solid th, #confirm_table tr.solid td{border-bottom: 1px #ccc solid !important;}
#confirm_table tr.last th, #confirm_table tr.last td{border-bottom: 2px #ccc solid !important;}
#confirm_table th.title, #confirm_table th.last{font-weight: 600;}

#confirm_table_total th, #confirm_table_total td{background-color: #386474 !important; padding: 20px; color: #fff;}
#confirm_table tr:last-of-type th, #confirm_table tr:last-of-type td{border-bottom: none;}
#confirm_table th, #confirm_table_total th{background-color: #f6f6f6; border-right: 1px #ccc solid;}
#confirm_table td{background-color: #fff;}

#confirm_table th, #confirm_table td,
#confirm_table_total th, #confirm_table_total td{
	font-size: 16px; letter-spacing: .05em;

}
#confirm_table_total th, #confirm_table_total td{font-size: 20px !important;}
#confirm_table td span, #confirm_table_total td span{
	display: inline-block;
	font-weight: 600 !important; margin-left: 5px;
}
#confirm_table_total td span, #confirm_table_total td span{font-size: 24px; color: #fff !important;}
#confirm_table tr.last td span{font-weight: 600 !important;}
td.minus{display: flex; align-items: center; justify-content: flex-end;}
td.minus, td.minus span{color: #bb4236;} td.right{text-align: right;}

@media screen and (max-width: 768px) {
	#confirm_table th, #confirm_table_total th {width: 30% !important;}
}

h7{width: 100%; margin-top: 75px;}
.confirm_box{padding: 0 24px; letter-spacing: .02em;}

ul{list-style: disc; font-size: 16px; padding-left: 20px; margin-bottom: 40px; line-height: 26px;}
ol{font-size: 16px; padding-left: 20px; margin-bottom: 40px; line-height: 26px;}
.confirm_txtarea{padding: 25px 20px;} .confirm_txtarea.scroll{overflow:scroll !important; height: 345px !important;}
.confirm_txtarea span{display: block; margin: 15px auto 35px; text-align: center; font-size: 20px; font-weight: 600;}
.confirm_txtarea p{display: block;}
.confirm_txtarea p, .confirm_txtarea ol li, .complete_txtarea ul li{font-size: 16px; line-height: 26px;}
.confirm_txtarea p b{font-weight: 600 !important;}
.confirm_txtarea.m30{margin: 30px 0;} .confirm_txtarea.m30t{margin: 30px 0 0;}

.creditcard{display: flex; align-items: center; margin: 20px 0 35px;}
.creditcard div{
	float: left; margin-right: 10px; width: 53px; height: 32px; border: 1px #ccc solid; border-radius: 3px;
	background-color: #fff;
}
.creditcard div.selected{border: 2px #a5c04f solid !important;}
.creditcard div img{width: 100%;}

.creditcard_inputs {display: flex; border: none; border-radius: 5px; box-sizing: border-box;}
.creditcard_inputs .card_number_container,
.creditcard_inputs .xpiry_date_container,
.creditcard_inputs .cvv_container {
	flex: 1; padding: 10px; box-sizing: border-box;
}
.creditcard_inputs input{ outline: none; }
.card_number_container {position: relative; flex: 1.5 !important;}
.card_number_container input { padding-left: 50px;}
.card_number_container .icon {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); border: none; padding-left: 10px;}

.confirm_txt{margin: 50px 0; font-size: 16px; line-height: 34px; letter-spacing: .05em;}

@media screen and (max-width: 768px) {
	.creditcard_inputs {display: block; border: none; text-align: center;}
	.creditcard_inputs input{width: 100%; border: 1px solid #ccc; box-sizing: border-box;}
	.card_number_container .icon{padding-left: 0;}
	.xpiry_date_container, .cvv_container{display: inline-block; width: 48%; padding-top: 0 !important;}
	.xpiry_date_container{padding-left: 0 !important; padding-right: 4px !important;}
	.cvv_container{padding-left: 4px !important; padding-right: 0 !important;}
	.card_number_container .icon {left: 20px;}
}



#items_list{display: flex; flex-wrap: wrap; margin: 120px -15px 0 -15px;}
#items_list .item_container{
	flex: 1; max-width: calc(33.33% - 16px); box-sizing: border-box; padding: 0 12px; margin-bottom: 24px;}
/* #items_list .item_container:nth-of-type(3n+2){margin: 0 26px;} */

#items_list .item_container .item_img_box{position: relative;}
#items_list .item_container .item_img_box img{height: 200px; width: auto; object-fit: cover;}

#items_list .item_container .item_img_box .label{
	display: block; position: absolute; width:127px; height: 30px; left: 0; bottom: 0;
}
#items_list .item_container .item_img_box .label_blue{background-color: #7dafcc;}
#items_list .item_container .item_img_box .label_green{background-color: #a5c04f;}
#items_list .item_container .item_img_box .label_deep_green{background-color: #386474;}
#items_list .item_container .item_img_box .label span{font-size: 16px; letter-spacing: .04em;}


#items_list .item_container .item_title{display: block; padding: 10px 5px; font-size: 18px; line-height: 30px;}

#items_list .item_container .item_price{display: block; padding: 0 5px;}
#items_list .item_container .item_price span{color: #bb4236; letter-spacing: .02em;}
#items_list .item_container .item_price span:first-of-type, #items_list .item_container .item_price span:last-of-type{font-size: 16px;}
#items_list .item_container .item_price span:nth-of-type(2){font-size: 28px;}

@media screen and (max-width: 768px) {
	#items_list {display: block;}
	#items_list .item_container {max-width: 100%; padding: 0 32px; margin-bottom: 28px;}
	#items_list .item_container .item_img_box img{object-fit: fill; width: 100%; height: auto;}
	select.shrt{width: 50% !important;}
}


.btn_greenline{display: block; position: relative; width: 200px; height: 46px; margin-top: 22px; border-radius: 5px; border: 1px #80a000 solid; background-color: #fff;}
.btn_greenline span, .btn_greenline i{color: #80a000 !important;}
.btn_greenline span{font-size: 16px; letter-spacing: .05em;}
.btn_greenline i{font-size: 14px; letter-spacing: .05em; right: 10px;}



/*====== 計算フォーム =====*/
.inner_result{padding: 60px 28px 20px; margin-bottom: 40px; position: relative;}

.inner_result .area_header{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 60px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
.inner_result .area_header{background-color: #386474;}
.inner_result .area_header span{font-size: 26px; letter-spacing: .05em;}
.border-r { 
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
 }

@media screen and (max-width: 768px) {
	.inner_result .area_header{height: 52px;}
	.inner_result .area_header span{font-size: 20px;}
}

.inner_result .area_inner{
	display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
    border-bottom: 1px #ccc dotted;
    overflow: hidden;
    height: 78px;
}
.inner_result .area_inner.tab{padding-left: 40px;}
.inner_result .area_inner.solid{border-bottom: 1px #ccc solid !important;}
.inner_result .area_inner.last{border-bottom: 2px #ccc solid !important;}
.inner_result .area_inner:last-of-type{border: none;}

.inner_result .area_inner span{
	display: block;
	font-family:"貂ｸ繧ｴ繧ｷ繝�け菴�", "YuGothic", "貂ｸ繧ｴ繧ｷ繝�け Medium", "Yu Gothic Medium", "貂ｸ繧ｴ繧ｷ繝�け", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif !important;
	font-weight: 500; font-size: 16px; letter-spacing: .05em;
}
.inner_result .area_inner.title span, .inner_result .area_inner.title span{font-size: 16px;}
.inner_result .area_inner.title span, .inner_result .area_inner.title div span{font-size: 18px !important;}
.inner_result .area_inner.end div, .inner_result .area_inner.end div span{font-size: 20px !important;}

.inner_result .area_inner div{display: flex; align-items: center; font-weight: 500; font-size: 16px; letter-spacing: .05em;}
.inner_result .area_inner div span{display: inline-block; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; margin-left: 5px; float: none;}
.inner_result .area_inner div.minus, .inner_result .area_inner div.minus span{color: #bb4236 !important;}




.inner_result .area_inner div i, td.minus i{
	display: inline-block; width: 42px; height: 42px; margin-right: 15px; background-color: #bb4236; border-radius: 50%; position: relative;
}

.inner_result .area_inner div i:before, td.minus i:before{
	display: block; position: absolute; top: 6px; left: 0; right: 0; margin: auto;
	font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 14px; color: #fff;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
.inner_result .area_inner div i:after, td.minus i:after{
	display: block; position: absolute; bottom: 4px; left: 0; right: 0; margin: auto; content: "0FF";
	font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 12px; color: #fff;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
.inner_result .area_inner div i.off5:before, td.minus i.off5:before{content: "5%"}
.inner_result .area_inner div i.off10:before, td.minus i.off10:before{content: "10%"}
.inner_result .area_inner div i.off15:before, td.minus i.off15:before{content: "15%"}
.inner_result .area_inner div i.off20:before, td.minus i.off20:before{content: "20%"}
.inner_result .area_inner div i.off25:before, td.minus i.off25:before{content: "25%"}
.inner_result .area_inner div i.off30:before, td.minus i.off30:before{content: "30%"}



.inner_result_button{
	float: right; width: 100%; overflow: hidden;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;}
.inner_result_button .btn_green_arrow_center{width: 404px !important; height: 62px !important; cursor: pointer;}


.btn_green_arrow_center{
	display: block;
    border-radius: 5px;
    background-color: #386474;
    width: 200px;
    height: 46px;
    margin: 15px auto 0;
    position: relative;
}
.btn_green_arrow_center span, .btn_green_arrow_center i{font-size: 16px; letter-spacing: .05em;}
.btn_green_arrow_center i {right: 10px;}




h3.form-title {
    font-size: 26px;
    letter-spacing: .08em;
    font-weight: 500;
    color: #386474;
    padding-bottom: 20px;
    border-bottom: 0.08em #80746d solid;


}




table.vehicle_prices{width: 100%; border-collapse: collapse; border-spacing: 0; overflow: hidden; margin: 24px auto; table-layout: fixed;}
table.vehicle_prices th, table.vehicle_prices td{
	padding: 18px 0; border: 1px #ccc solid; border-collapse: collapse; font-weight: 600; font-size: 16px; vertical-align: middle;
}
table.vehicle_prices th{background-color: #f7f8f5; text-align: center;}
table.vehicle_prices td{background-color: #fff; text-align: center;}




input, select{height: 37px;}
input, select, textarea{border: 1px solid #ccc; border-radius: 4px; padding-left: 12px; padding-right: 12px;}
input:focus, select:focus, textarea:focus{
	outline: 0;
  box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}
textarea{
    padding: 12px;
    width: 100%;
    max-width: 100%;
    max-height: 400px;
    min-height: 150px;
    height: 150px;}

div.frm_box_flex{display: flex; width: 100%; padding-bottom: 15px; align-items: center;}
div.frm_box{display: block; width: 100%; padding-bottom: 15px;}
div.frm_box label, div.confirm_box label{display: flex; margin-bottom: 10px; position: relative; align-items: center; height: 30px;}
div.frm_box span, div.frm_box_flex span{float: left;}
div.frm_box input[type=checkbox], div.confirm_box input[type=radio]{display: none;}
div.frm_box label.checkbox{width: 220px;}
div.confirm_box label.radio{
	padding-left: 36px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;}

div.frm_box label.checkbox:before{
	display: block; position: absolute; width: 28px; height: 28px; border: 1px #ccc solid; background-color: #fff; content: "";
	right: 0; top: 0; bottom: 0; margin: auto;
}
div.confirm_box label.radio:before{
	display: block; position: absolute; width: 28px; height: 28px; border: 1px #ccc solid; background-color: #fff; content: "";
	left: 0; top: 0; bottom: 0; margin: auto;
}
div.frm_box label.checkbox.disable:before{
	border: 1px #eee solid !important; background-color: #ddd !important;
}
div.frm_box label.checkbox.on:after{
	display: block; position: absolute; font-size: 14px; font-weight: 700; font-family: "Font Awesome 5 Free"; color: #222; content: "\f00c";
	right: 6px; top: 0; bottom: 0; margin: auto;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}

div.confirm_box label.radio:before, div.confirm_box label.radio.on:after{border-radius: 50%;}
div.confirm_box label.radio.on:after{
	display: block; position: absolute; width: 16px; height: 16px; background-color: #80a000; content: "";
	left: 6px; top: 0; bottom: 0; margin: auto;
}

.vehicle_service_txt{font-size: 16px; line-height: 29px; letter-spacing: .1em;}
.two_buttons_container{
	/* margin: 60px auto 0; overflow: hidden;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content; */
	display: flex;
  justify-content: center;
}
.two_buttons_container a{
		width: 50%;
		margin: 0 32px;
}
.two_buttons_container img{
		width: 100%;
}
.two_buttons_container .btn_greenline, .two_buttons_container .btn_green_arrow{
	display: block; float: left; width: 340px; height: 62px; position: relative; top: unset; left: unset; right: unset; bottom: unset;
}
.two_buttons_container .btn_greenline{margin: 0 20px 0 0 !important;}
.two_buttons_container .btn_green_arrow{margin: 0 0 0 20px !important;}

.box_map_container{
	width: 1200px; overflow: visible; margin: 0 auto;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;}
.box_map_container .box_shadow{margin: 100px 12px 12px 0 !important;}

.btn_green_arrow {
    display: block;
    border-radius: 5px;
    background-color: #a5c04f;
    position: absolute;
    width: 200px;
    height: 46px;
    right: 0;
    top: 70px;
    border: none;
}

.btn_green_arrow span, .btn_green_arrow i {
    font-size: 16px;
    letter-spacing: .05em;
}
.fcWht {
    color: #fff !important;
}
.vhcenter {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.vhcenter, .vcenter, .hcenter {
    display: block;
    position: absolute;
    margin: auto;
    height: fit-content;
    height: -ms-fit-content;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: -o-fit-content;
    width: fit-content;
    width: -ms-fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -o-fit-content;
}

.confirm_txtarea {
    padding: 25px 20px;
}
.bg_white {
    background-color: #fff;
    border: 1px #ccc solid;
}