@charset "utf-8";

#main_Col{
font-family:var(--cmn-font-family);
}

/* --------------------------------------------------
hdg
----------------------------------------------------*/
.hdg-lv1-01{
margin:20px 0 15px;
color:#111;
font-size:16px;
font-weight:normal;
}

.hdg-lv2 {
margin: 31px 0 15px;
padding: 5px 10px 5px 42px;
font-size: 17px;
border: 1px solid #d5d5d5;
background: #f7f7f7 url(/element/j_hotel/shared/images/sprite-hgd.png) 6px -44px no-repeat;
box-shadow: 0 1px 1px rgba(231,231,231,.75);
background-position: 6px 6px;
}

.hdg-lv3-01{
padding:7px 15px 4px;
font-size:15px;
color:#333;
background:#f1f1f1;
border-bottom:1px solid #d2d2d2;
}

/* --------------------------------------------------
link
----------------------------------------------------*/
.link-other {
margin:-27px 15px 7px 0;
font-weight:bold;
text-align:right;
}
.link-page-top{
margin-bottom:30px;
text-align:right;
}
.link-page-top:before{
content:"";
margin-right:3px;
display:inline-block;
border-bottom:7px solid #0b41a1;
border-left:5px solid transparent;
border-right:5px solid transparent;
}

/* --------------------------------------------------
icon
----------------------------------------------------*/
#main_Col span[class*="icon-"]{
display:inline-block;
width:14px;
margin: -2px 4px 0 0;
height:0;
padding-top:14px;
background-image:url(/element/j_hotel/sch/htl_lst/images/htllst-ico-sprite.png);
background-repeat:no-repeat;
line-height:2;
overflow:hidden;
vertical-align:middle;
}
.icon-ryokan{ background-position:0 0;}
.icon-hotel{ background-position:-44px 0;}
.icon-pension{ background-position:-88px 0;}
.icon-etc{ background-position:-132px 0;}


/* --------------------------------------------------
tbl-select-area
----------------------------------------------------*/
.tbl-select-area{
border-collapse: collapse;
width:100%;
}
.tbl-select-area th{
font-size:16px;
text-align: left;
}
.tbl-select-area td{
font-size:15px;
text-align: left;
}
.tbl-select-area thead th{
padding:7px 0 7px 15px;
background:#f5f5f5;
color:#333;
}
.tbl-select-area tbody th,
.tbl-select-area tbody td{
padding:7px 15px 7px 15px;
border-bottom: 1px solid #ddd;
}
.tbl-select-area tbody th{
width:15%;
}
.tbl-select-area li{
display: inline-block;
width:102px;
margin-right: 5px;
}
.tbl-select-area li a{
color:#555;
}

/* --------------------------------------------------
select-list
----------------------------------------------------*/
/* nav-select-type
-----------------------------------------------------*/
.nav-select-type{
margin-top: 30px;
}
.nav-select-type:before,
.nav-select-type:after{
content:"";
display:table;
}
.nav-select-type:after{
clear:both;
}
.nav-select-type li{
display:table;
float: left;
width:120px;
font-size:16px;
font-weight:bold;
vertical-align: top;
}
.nav-select-type li:first-child{
width:119px;
border-left:1px solid #ccc;
}
.nav-select-type em,
.nav-select-type a{
display: table-cell;
height: 65px;
vertical-align: middle;
text-align: center;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
line-height: 1.3;
}
.nav-select-type a{
background-color: #fff;
color:#555;
}
.nav-select-type a:hover{
background-color:#eee;
text-decoration: none;
}
.nav-select-type em,
.nav-select-type .active a{
position: relative;
background-color:#777;
color:#fff;
border-top:1px solid #777;
border-bottom:1px solid #777;
}
.nav-select-type em:after,
.nav-select-type .active a:after{
position: absolute;
bottom:-10px;
content: "";
display: block;
left:50%;
margin-left: -10px;
border-top:10px solid #777;
border-right:10px solid transparent;
border-left:10px solid transparent;
}
.nav-select-type li span{
display: block;
font-size: 15px;
}

/* list-select-01
-----------------------------------------------------*/
.list-select-01 {
position: relative;
display: table;
width: 100%;
margin-bottom: 20px;
line-height: 1;
table-layout:fixed;
}
.list-select-01 > li {
display: table-cell;
text-align: center;
vertical-align: bottom;
}
.list-select-01 > li:first-child > a,
.list-select-01 > li:first-child > em{
margin-left: 0;
}
.list-select-01 > li > a,
.list-select-01 > li > em {
display: block;
margin-left: -1px;
padding: 12px 0;
color: #333;
white-space: nowrap;
text-decoration: none;
border-radius: 4px 4px 0 0;
border: 1px solid #b0b0b0;
background-color: #f5f5f5;
font-size:16px;
}
.list-select-01 > li > em {
padding-bottom: 13px;
font-weight: bold;
background: #fff;
border-bottom: none;
}
.list-select-01 > li > a:hover{
background: #fff;
}

/* list-select-02
-----------------------------------------------------*/
.list-select-02{
display: block;
padding:10px 15px;
background-color: #f5f5f5;
overflow: hidden;
}
.list-select-02 li{
display: inline-block;
margin:0 15px 3px 0;
padding-right:15px;

border-right:1px solid #a0a0a0;
font-size:16px;
line-height:1.1;
}
.list-select-02 li:last-child{
border-right:none;
}
.list-select-02 li>span{
color: #a0a0a0;
}

/* list-select-03
-----------------------------------------------------*/
.list-select-03{
padding:13px 15px 0;
margin-bottom: 40px;
}
.list-select-03 li{
display: inline-block;
margin: 0 5px 3px 0;
font-size:12px;
}

/* --------------------------------------------------
list-item
----------------------------------------------------*/
.list-item{
margin:0 0 15px -40px;
overflow:hidden;
}
.list-item li{
display:block;
float:left;
width:460px;
margin-left:40px;
vertical-align:top;
border-bottom:1px solid #d2d2d2;
}
.list-item li a{
color:#555;
position:relative;
display:block;
padding:10px 15px 10px 30px;
}
.list-item li a:hover{
background-color: #f5f5f5;
}
.list-item li:nth-child(odd){
clear:both;
}
.list-item span[class*="icon-"]{
position:absolute;
top:15px;
left:10px;
}
.list-item li a em{
float:right;
color:#333;
}

/* --------------------------------------------------
list-rev
----------------------------------------------------*/
.list-rev{
margin-left: -10px;
font-size: 0;
}
.list-rev li{
display: inline-block;
margin: 0 0 10px 10px;
font-size: 13px;
}
.list-rev a{
display: block;
padding: 8px 15px;
border: 1px solid #d2d2d2;
border-radius: 5px;
}
.list-rev a:hover{
background-color: #f5f5f5;
text-decoration: none;
}

/* --------------------------------------------------
define
----------------------------------------------------*/
.define{
padding-left:10px;
margin-bottom:9px;
}
.define p{
margin-top:-17px;
text-align:right;
font-size:10px;
}
.list-def li{
display:inline-block;
margin-right:10px;
}
.define.bottom{
margin-bottom: 120px;
}

/* --------------------------------------------------
hotel-type
----------------------------------------------------*/
.hotel-type{
margin-top:30px;
border:1px solid #d2d2d2;
}
.hotel-type h3{
padding:5px 15px 2px;
font-size:15px;
color:#333;
background:#f1f1f1;
}
.hotel-type ul{
padding:17px 20px 12px;
}
.hotel-type li{
display:inline-block;
width:216px;
margin-bottom:5px;
padding-right:10px;
vertical-align: top;
}

/* --------------------------------------------------
contents-footer-nav
----------------------------------------------------*/
.contents-footer-nav{
margin-top:30px;
border:1px solid #d2d2d2;
padding:0 20px 15px;
}

.contents-footer-nav .contents-footer-nav-hdg{
margin:0 -20px 15px;
padding:5px 20px 2px;
border-top:none;
font-size:15px;
color:#333;
background:#f1f1f1;
}

.contents-footer-nav .contents-footer-nav-list-thumb{
line-height:1.25;
font-size:12px;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}

.contents-footer-nav .contents-footer-nav-list-thumb > li:not(:first-child){
margin-left:20px;
}

.contents-footer-nav .contents-footer-nav-list-thumb > li{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
}

.contents-footer-nav .contents-footer-nav-list-thumb > li > a{
padding-top:80px;
color:#555;
display:block;
position:relative;
}

.contents-footer-nav .contents-footer-nav-list-thumb > li .thumb{
border: 1px solid #dae1e5;
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
overflow:hidden;
background-color:#fff;
box-sizing:border-box;
}

.contents-footer-nav .contents-footer-nav-list-thumb > li .thumb img{
margin:auto;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
max-width:100%;
max-height:100%;
}