@charset "UTF-8";
@import url("./common/reset.css");
@import url("./common/advanced.css");
@import url("./common/base.css");

/*------------------------------------------------------------
ホテルリスト
-------------------------------------------------------------*/
.hotel_list{ margin: 0 auto; padding: 20px 0 100px; text-align: center;}
.hotel_list .common_tit{ margin-bottom: 30px;}
.hotel_list .common_tit span{ bottom: 2px;}

/* コピー
------------------------------------------------------------ */
.copy{ box-sizing: border-box; width: 1190px; margin: 40px auto 40px; padding-top: 10px;}
.copy p.tit{ font-size: 36px; color: #c79d6e; margin-bottom: 15px;}
.copy p.txt{ font-size: 18px; color: #fff;}

/* ホテル検索
------------------------------------------------------------ */
.hotel_search{ background: rgba(0,0,0,0.6); border: 1px solid #000; margin-bottom: 30px;}
.hotel_search .search_wrap{ height: 70px; background: #000; color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.hotel_search .search_wrap .search_tit{ display: flex; flex-wrap: wrap; justify-content: left; align-items: center;}
.hotel_search .search_wrap .search_tit p{ font-size: 26px; color: #c79d6e; padding: 0 15px 0 20px;}
.hotel_search .search_wrap .search_tit span{ letter-spacing: 0.3em;}
.hotel_search .search_wrap .search_num{ padding-right: 20px; text-align: right; font-size: 20px;}
.hotel_search .search_wrap .search_num span{ font-size: 36px; font-weight: bold; color: #c79d6e; padding: 0 10px;}

.hotel_search .search_item_list{ padding: 20px; position: relative;}

.hotel_search .input_wrap{ box-sizing: border-box; width: 100%; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; border: 1px solid #323232; height: 55px;}
.hotel_search .input_wrap p{ color: #fff; width: 16%; text-align: center;}
.hotel_search .input_wrap .input_cont{ box-sizing: border-box; width: 84%; text-align: left; padding-right: 15px;}
.hotel_search .input_wrap .input_cont input{ box-sizing: border-box; width: 100%; padding: 3px 6px; border: none;}
.hotel_search .input_wrap:hover{ cursor: pointer; background: #c79d6e; border: 1px solid #c79d6e; color: #000; transition: .3s ease-in-out;}
.hotel_search .input_wrap:hover p{ color: #000; transition: .3s ease-in-out;}

.btn_search_wrap{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-right: 15px;}
.btn_search_wrap button{ margin: 0 2px; cursor: pointer; font-size: 16px; border-radius: 8px;}
.btn_search_wrap button i{ padding-right: 6px;}
.btn_search_wrap button:hover{ opacity: 0.7;}
.btn_search_wrap .btn_search button{ width: 200px; height: 50px; background: #c79d6e;}
.btn_search_wrap .btn_clear button{ width: 160px; height: 50px; background: #e8e8e8;}

/* ホテルリスト本体
------------------------------------------------------------ */
.common_hotellist{}
.common_hotellist .hotellist_wrap{}

.common_hotellist .hotellist_wrap li{ box-sizing: border-box; background: rgba(0,0,0,0.6); color: #fff; text-align: left; margin-bottom: 5px; padding: 20px; border: 1px solid #333; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.common_hotellist .hotellist_wrap li:last-child{ margin-bottom: 25px;}

.common_hotellist .hotellist_wrap li .data_wrap{ box-sizing: border-box; width: 1140px; padding-right: 20px; border-right: 1px solid #333;}
.common_hotellist .hotellist_wrap li .data_wrap .name_wrap{ display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 5px;}
.common_hotellist .hotellist_wrap li .data_wrap .name_wrap .h_tel{ margin-left: auto;}

/*ホテル名・電話番号・住所*/
.common_hotellist .hotellist_wrap li .data_wrap .name_wrap .h_name{ font-size: 23px;}
.common_hotellist .hotellist_wrap li .data_wrap .name_wrap .h_link a{ box-sizing: border-box; display: block; background: #c79d6e; height: 20px; line-height: 20px; padding: 0 12px; border-radius: 10px; margin-left: 18px; font-size: 12px; position: relative; top: -2px;}
.common_hotellist .hotellist_wrap li .data_wrap .name_wrap .h_link a i{ padding-right: 2px;}
.common_hotellist .hotellist_wrap li .data_wrap .name_wrap .h_link a:hover{ opacity: 0.7; text-decoration: none;}
.common_hotellist .hotellist_wrap li .data_wrap .name_wrap .h_tel{ font-size: 24px;}
.common_hotellist .hotellist_wrap li .data_wrap .name_wrap .h_tel i{ padding-right: 8px; color: #c79d6e; font-size: 23px;}
.common_hotellist .hotellist_wrap li .data_wrap .h_add{ display: flex; flex-wrap: wrap; align-items: center;}
.common_hotellist .hotellist_wrap li .data_wrap .h_add i.fa-map-marker-alt{ padding-right: 6px; color: #c79d6e;}
.common_hotellist .hotellist_wrap li .data_wrap .h_add .h_map_link a{ box-sizing: border-box; display: block; background: #c79d6e; height: 20px; line-height: 20px; padding: 0 12px; border-radius: 10px; margin-left: 8px; font-size: 12px; position: relative; top: -2px;}
.common_hotellist .hotellist_wrap li .data_wrap .h_add .h_map_link a i{ padding-right: 2px;}
.common_hotellist .hotellist_wrap li .data_wrap .h_add .h_map_link a:hover{ opacity: 0.7; text-decoration: none;}

/*ボタン*/
.common_hotellist .hotellist_wrap li .btn_wrap{ display: flex; flex-wrap: wrap;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item{ box-sizing: border-box; text-align: center; width: 90px; height: 68px; border-radius: 8px; line-height: 1; position: relative; padding-top: 7px; cursor: pointer;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item:first-of-type{ margin-right: 10px;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item:hover{ opacity: 0.7;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item.btn_ok{ background: #6286d0;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item.btn_ok i{ color: #6286d0;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item.btn_ng{ background: #dc6e93;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item.btn_ng i{ color: #dc6e93;}

.common_hotellist .hotellist_wrap li .btn_wrap .btn_item .num{ font-size: 30px; font-weight: bold;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item .btn_body{ width: 84px; height: 27px; line-height: 28px; position: absolute; left: 3px; bottom: 3px; text-align: center; background: #000; border-radius: 5px;}
.common_hotellist .hotellist_wrap li .btn_wrap .btn_item .btn_body i{ padding-right: 5px;}







/* ページャー
------------------------------------------------------------ */
.hotel_list .pager{ background: #fff; padding: 30px 0;}