@charset "utf-8";

@import "../../css/content.css";
@import url("reset.css");
@import url("common.css");

/***************************************************************

PC

****************************************************************/

#hotels #main-column {
    position: relative;
    display: block;
    width: 960px;
    line-height: 1.2;
    margin: 0 auto;
}

#hotels .header-column {
    min-width: 1200px;
   /* height: 625px;*/
    margin: 0 auto 40px;
}


#hotels .header-column .item{margin: 0;}
#hotels .header-column .item.w100{
	width: 100%;
    margin-bottom: 20px;
}
#hotels .header-column .item.w70{
	width: 70%;
	vertical-align: middle;
}
#hotels .header-column .item.w30{
	width: 30%;margin: 0 -5px 0 0;
	vertical-align: middle;
}
#hotels .header-column .item.w33{
	width: 33.333333333333333333%;
	margin: 0 -5px 0 0;
	vertical-align: middle;
}


#hotels p.read-txt {
    /* display: none; */
    border: 1px #999 solid;
    border-left: none;
    border-right: none;
    margin: 20px 50px;
}


.header-column .hotel-box{
	background: url(../images/index/header-column-bg.png) center top repeat-x;
    text-align: center;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
}

.header-column .hotel-box h2{
    padding: 20px 0;
}


.header-column .hotel-box div{
    display: inline-block;
    width: 320px;
    background: #fff;
    padding: 10px 0 0 0;

  *display: inline;  
    *zoom: 1; 
}




.item-container.privilege{}

.item-container.privilege h3{
    display: inline-block;
    border-top: 1px #001040 solid;
    color: black;
    padding: 20px 50px;
  *display: inline;  
    *zoom: 1; 
}
.item-container.privilege h3 img{
    border-bottom: 3px #001040 solid;
    padding: 0 0 20px 0;
}


.item-container.privilege .item{
border: 1px #ccc solid;
    border-top: 0;
    border-left: 0;
	margin: 0 -5px 0 0;
}

.item-container.privilege .item {
    width: 33.33%;
}
.item-container.privilege .item.w25 {
    width: 25%;
}
.item-container.privilege .item .inbody {
    padding: 20px;
}

.item-container.privilege .item h4{
    font-size: 16px;
    font-weight: bold;
    color: #00468C;
}
.item-container.privilege .item p.txt{
    margin: 10px 0;
    line-height: 1.4;
}

.bestrate{
    display: inline-block;
    border: 3px #E7B50B solid;
    border-left: 0;
    border-right: 0;
    padding: 5px 60px;
    margin: 50px auto;
  *display: inline;  
    *zoom: 1; 

}


.item-container.hotels {
    margin: 40px 0 0 0;
}

a.button {
    color: #fff;
    border: 0;
    font-size: 13px!important;
    padding: 10px 20px;
}

a.button.large {
    padding: 18px 20px;
}


a.button.he {
    background: #3D0100;
}
a.button.am {
    background: #212d48
}
a.button.fv {
    background: #416A68;
}

a.button:hover{
	opacity: 0.5;
}

.item-container.banner {
    padding: 20px 0;
    margin: 40px 0;
    border-top: 1px #ccc solid;
}

.item-container.banner img{
margin:5px;
}



ul.list-circle{
    margin: 10px;
    padding: 10px;
    text-align: left;
}
ul.list-circle li {
    list-style-type: disc;
}

ul.list-asterisk{
    margin: 10px;
    padding: 10px;
    text-align: left;
}
ul.list-asterisk li{
	text-indent:-1em;
    list-style-type: none;
}
ul.list-asterisk li:before{ content:"※"; }


.best-rate {}

.best-rate .item .inbody p.txt {
    padding: 5px 0;
    line-height: 1.3;
    font-size: 16px;
    text-align: left;
    margin: 20px 0 10px;
}

.best-rate .item .inbody p.txt.strong {
    font-weight: bold;

}

.best-rate .item h4 {
    clear: both;
    width: auto;
    height: auto;
    font-size: 28px;
    text-indent: 0;
    color: #A07800;
    font-weight: bold;
    text-align: left;
}

.best-rate p.ttl {
    text-align: left;
    font-size: 17px;
    line-height: 1.5;
}
.best-rate a.button {
    font-size: 17px;
}



h2 {
    font-size: 34px;
    position: relative;
    display: block;
    line-height: 1.2;
    margin: 30px 0;
    background: #eee;
}

h2 span{
    border-top: 4px #233772 solid;
    padding: 5px 20px;
    color: #233772;
    display: inline-block;
}

h2 span span{
    border-top: 0px #7b3f3f solid;
    font-size: 11px;
    display: block;
}




#information .item-container-body {
    position: relative;
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding:0 0 10px 0;
}

#information h3 {
    font-size: 20px;
    position: relative;
    display: block;
    line-height: 1.2;
    margin: 30px 0;
    background: #fff;
    padding: 0;
}

#information h3 span{
    border-top: 4px #233772 solid;
    padding: 5px 20px;
    color: #233772;
    display: inline-block;
}

#information h3 span span{
    border-top: 0px #7b3f3f solid;
    font-size: 11px;
    display: block;
}

#information .info-box{
	border: 1px #eee solid;
    background: #00BCD4;
}

#information  .info-box p.label {
    background: #0492a5;
    color: #fff;
    padding: 8px 2px;
    font-size: 16px;
    line-height: 1;
}
#information .info-box p.txt{
}
#information .info-box p.txt span{
}

#information  a.button {
    display: inline-block;
    border: 0px solid #CCCCCC;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    behavior: url(PIE.htc);
    overflow: hidden;
    background: #036f7d;
    color: #fff;
    font-weight: normal;
    padding: 10px 10px;
    margin: 6px;
    line-height: 1.2;
    font-size: 15px;
    width: auto;
}



#privileges .item-container-body{
max-width:1000px;
}



#privileges h2 {
    text-align: center;
}

#privileges .privileges-box{
    border: 0px #eee solid;
    background: #e0a800;
    border-left: 10px #d27d00 solid;
    width: 31%;
	background: #00BCD4;
    border-left: 10px #0492a5 solid;
    background: #233772;
    border-left: 10px #233772 solid;
    position: relative;
}

#privileges .privileges-box02{
    border: 0px #eee solid;
    background: #FF9800;
    border-left: 10px #d27d00 solid;
    width: 31%;
    background: #40589c;
    border-left: 10px #40589c solid;
    position: relative;
}

#privileges .privileges-box .box-body,
#privileges .privileges-box02 .box-body{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
}


#privileges h3 {
    clear: both;
    width: auto;
    height: auto;
    font-size: 21px;
    text-indent: 0;
    margin: 15px 0 10px;
    padding: 10px 0;
    line-height: 1.3;
}
#privileges h4 {
    text-indent: 0;
    line-height: 1.3;
    text-align: left;
    color: #fff;
    font-size: 15.5px;
font-weight: bold;
}


#privileges  a.button {
    color: #233772;
    border: 0;
    font-size: 16px!important;
    padding: 16px 20px;
    background: #ffffff;
    margin: 30px auto 20px;
    border: 1px #233772 solid;
    font-weight: bold;
}


@media screen and (max-width: 736px) {


	#information .item-container-body {
	    position: relative;
	    overflow: hidden;
	    width: 100%;
	    margin: 0 auto;
	    text-align: center;
	    padding:0 0 10px 0;
	}
	#information h3 {
	    zoom:0.4;
	}
	#information a.button {
	    color: #fff;
	    border: 0;
	    font-size: 11px!important;
	    padding: 10px 4px;
	}


#privileges h4 {
    font-size: 13px;
}
#privileges h3 {
    font-size: 16px;

}

#privileges .privileges-box,
#privileges .privileges-box02 {
    width: 90%!important;
}

#privileges .privileges-box .box-body,
#privileges .privileges-box02 .box-body{
    position: relative;
    top: 00%;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    display: block;
}

}

/***************************************************************

スマホ

****************************************************************/


@media screen and (max-width: 736px) {

.img-auto {
    width: auto;
    height: auto;
}

h2 {
    zoom:0.4;
}

a.button.large {
    padding: 18px 20px;
    width: 80%;
}

#hotels #main-column {
    width: auto;
}

#hotels .header-column {
    min-width: 300px;
    padding: 10px 0 0;
    margin: 0 0 20px 0;
    height: auto;
}

#hotels .header-column .item.w100 {
    width: 100%;
    border-bottom: 1px #ECE8E8 solid;
    margin-bottom: 20px;
}

#hotels .header-column .item.w70 {
    width: 100%;
    vertical-align: middle;
}


#hotels .header-column .item.w30 {
    width: 100%;
    margin: 10px 0;
    vertical-align: middle;
}


.item-container.banner img {
    margin: 5px 0;
}

.item-container.banner img{
    width: 100%;
}


.item-container.hotels .item {
    width: 100%;
}


.img-auto {
    width: 100%;
    height: auto;
}


.best-rate p.ttl {
    font-size: 15px;
}
.best-rate .w90 {
    width: auto;
}
.best-rate .item .inbody p.txt {
    font-size:14px;
}

.best-rate .item h4 {
    font-size:16px;
}

.best-rate a.button {
    font-size: 14px;
}


.bestrate {
    padding: 5px 5px;
    margin: 30px auto;
}




ul#navCat{
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: #000;
    z-index: 9999;
      text-align: right;
}
ul#navCat li{
  position: relative;
  margin: 0;
  padding: 5px;
  width: 50.8%;
  background-color: #EAEBF0;
  display: inline-block;
    text-align: center
}
ul#navCat .child{
        position: absolute;
        padding: 0;
        margin-left: -5px;
    z-index: 9999;
}

ul#navCat .child li{
float: none;
  display: block;
  text-align: left;
  padding: 0px;
  width: 100%;
}
ul#navCat .child li a{
    padding: 5px 15px;
    display: block;
    color: #000;
  border-top: 1px #fff solid;
}
ul#navCat li a:hover{
}


ul#navCat-top li {
  font-size: 90%;

  border-bottom: #eee 1px solid;
  display: inline-block;
  width: 50%;
  text-align: center;
}
ul#navCat-top li a {
  display: block;
    font-weight: bold;
  padding: 10px 5px;
}

li.enjoy.cat16{
   background: #40AAEF;
}
li.gourmet.cat17{
   background: #F0AA13;
}
li.shopping.cat18{
     background: #80910F;
}
li.stay.cat19{
     background:#673401;
}

li.enjoy.cat16 a,
li.gourmet.cat17 a,
li.shopping.cat18 a,
li.stay.cat19 a{
   color:#fff;
}
li.enjoy a{
  color: #40AAEF;
}
li.gourmet a{
color: #F0AA13;
}
li.shopping a{
color: #80910F;
}
li.stay a{
  color: #673401;
}
li.enjoy a:before{
    content:"\F135";
	font-family: FontAwesome;
	margin: 0 5px 0 0;
}
li.gourmet a:before{
    content:"\F0F5";
	font-family: FontAwesome;
	margin: 0 5px 0 0;
}
li.shopping a:before{
    content:"\F07A";
	font-family: FontAwesome;
	margin: 0 5px 0 0;
}
li.stay a:before{
    content:"\F0F7";
	font-family: FontAwesome;
	margin: 0 5px 0 0;
}



}



/*************************************************************

*レスポンシブ

**************************************************************/

/* PCだけ表示 */
.visible_pc {
	display: block !important;
}
/* SPだけ表示 */
.visible_sp {
	display: none !important;
}

/* PCだけ表示 */
.visible_pc_inline {
	display: inline-block !important;
}
/* SPだけ表示 */
.visible_sp_inline {
	display: none !important;
}

.visible_pc_tb {
	display: table-cell !important;
}
@media screen and (max-width: 736px) {
	/* PCだけ表示 */
	.visible_pc {
		display: none !important;
	}
	/* SPだけ表示 */
	.visible_sp {
		display: block !important;
	}

	/* PCだけ表示 */
	.visible_pc_inline {
		display: none !important;
	}
	/* SPだけ表示 */
	.visible_sp_inline {
		display: inline-block !important;
	}

	.visible_pc_tb {
		display: none !important;
	}
}


/***************************************************************

JQUERY

****************************************************************/

#myslider {
  width: 100%!important;
  margin: 0 auto;
  height: 500px!important;
  background-color:#fff!important;  
}

@media only screen and (max-width: 640px){
	#myslider {
	  height: 200px!important;
	}
}


.juicyslider {
    position: relative;
    padding:0;
    margin:0;
    border: 0;
}

.juicyslider ul {
    width:100%;
    height:100%;
    position:absolute;
    overflow: hidden;
    list-style: none outside none;
    padding:0;
    margin:0;
}

.juicyslider li {
	width: 100%!important;
	height: 100%!important;
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;       /* all hidden initially */
}

.juicyslider li:first-child {
    display: block;
}

.juicyslider .nav {
    position: absolute;
    top: 45%;
    padding: 20px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    z-index: 1000;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    background-image: url(../img/nav-40.png);
}

.juicyslider:hover .nav {
    opacity: .5;
    filter: alpha(opacity=50); 
}

.juicyslider .nav.next {
    right: 3%;
}

.juicyslider .nav.prev {
    left: 3%;
    background-position: 40px 0;
}

.juicyslider .mask {
    background-image: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.juicyslider img.maxw {
    width: 100%;
    height: auto;
    max-height: none;
    position: absolute;
    filter:inherit;     /* for ie8 to inherit parent opacity */
}

.juicyslider img.maxh {
    width: auto;
    max-width: none;
    height: 100%;
    position: absolute;
    filter:inherit;     /* for ie8 to inherit parent opacity */
}