@charset "utf-8";

h2.pagetitle{
  background-image:url("../../hotels/img/h2_hotels.jpg");
}

/* HOTELS */
#hotels{
  padding:10px;
  background:#000000;
}
#hotels .area{
  margin-bottom:20px;
}
#hotels .area_title{
  background:rgba(150, 150, 150, 0.5);
  padding:10px;
  margin-bottom:10px;
  color:#ffffff;
  position:relative;
  cursor:pointer;
  transition:all .5s ease;
  font-size:2rem;
  font-weight:400;
}

/* アコーディオン */
#hotels .area_title::before,
#hotels .area_title::after{
    position:absolute;
    content:'';
    width:15px;
    height:2px;
    background-color:#ffffff;
}
#hotels .area_title::before{
    top:48%;
    right:15px;
    transform:rotate(0deg);   
}
#hotels .area_title::after{    
    top:48%;
    right:15px;
    transform:rotate(90deg);
}
#hotels .area_title.close::before{
  transform:rotate(45deg);
}
#hotels .area_title.close::after{
  transform: rotate(-45deg);
}
#hotels .a_box{
  display:none;
}

/* パネルの中身 */
#hotels ul li.item{
  background:#ffffff;
  padding:5px;
  margin-bottom:10px;
  display:flex;
}
#hotels .photo{
  width:40%;
}
#hotels .detail{
  width:60%;
  box-sizing:border-box;
  padding-left:5px;
  font-size:1.2rem;
}
#hotels .detail h4{
  font-size:1.6rem;
  line-height:100%;
  font-weight:400;
  margin-bottom:5px;
}
#hotels .detail h4 span{
  font-size:1.2rem;
}
#hotels .detail .add{
  margin-bottom:5px;
  line-height:115%;
}

/* ボタン */
#hotels .detail .btn{
  display:flex;
  margin-top:10px;
}
#hotels .detail .btn li{
  width:48%;
}
#hotels .detail .btn li.coupon{
  margin-right:4%;
}
#hotels .detail .btn li a{
  display:inline-block;
  padding:5px 0;
  color:#ffffff;
  width:100%;
  text-decoration:none;
  text-align:center;
}
#hotels .detail .btn li.coupon a{
  background:#62c0a2;
}
#hotels .detail .btn li.view a{
  background:#000000;
}



/* タブレット
-------------------------------------------------- */
@media only screen and (min-width: 667px) {

  /* HOTELS */
  #hotels .a_box > ul{
    display:flex;
    flex-wrap:wrap;
  }
  #hotels .a_box ul li.item{
    box-sizing:border-box;
    width:calc(50% - 5px);
  }
  #hotels .a_box ul li.item:nth-child(odd){
    margin-right:10px;
  }
}



/* PC
-------------------------------------------------- */
@media only screen and (min-width: 1024px) {

  /* HOTELS */
  #hotels{
    padding:30px;
  }
  #hotels .area{
    max-width:1280px;
    margin:0 auto;
  }
  #hotels .a_box ul li.item{
    padding:10px;
    margin-bottom:20px;
  }
  #hotels .detail{
    padding-left:10px;
    font-size:1.6rem;
  }
  #hotels .detail h3{
    font-size:2.4rem;
    margin-bottom:10px;
  }
  #hotels .detail h3 span{
    font-size:1.6rem;
  }
  #hotels .detail .add{
    margin-bottom:10px;
    line-height:120%;
  }

  /* ボタン */
  #hotels .detail .btn{
    margin-top:20px;
  }
  #hotels .detail .btn li a{
    padding:10px 0;
  }

}