@charset "utf-8";

/* メインイメージ */
#mainvisual{
  background-size:cover;
  background-position:center center;
  position:relative;
}
#mainvisual .copy{
  font-size:3.6rem;
  color:#ffffff;
  line-height:200%;
  padding:180px 10px 150px 10px;
}
#mainvisual .concept a{
  position:absolute;
  right:10px;
  bottom:15px;
  text-decoration:none;
  color:#ffffff;
  font-size:1.8rem;
  display:inline-block;
  padding-right:50px;
  background-image:url(../../img/arrow.png);
  background-repeat:no-repeat;
  background-position:right center;
  background-size:45px;
}

/* バナーエリア */
main #banner{
  background:#f0f0f0;
  padding:10px;
}

/* Swiper */
.swiper-wrapper{
  padding-bottom:20px;
}
.swiper-pagination-bullets{
  bottom:2px !important;
}
.swiper-pagination-bullet{
  width:8px !important;
  height:8px !important;
  margin:0 0 0 10px !important;
  background:#333333 !important;
}
.swiper-pagination-bullet:first-child{
  margin:0 !important;
}

/* HOTELS */
#hotels{
  padding:30px 10px 50px 10px;
}
#hotels ul li.item{
  background:#f0f0f0;
  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 h3{
  font-size:1.6rem;
  line-height:100%;
  font-weight:400;
  margin-bottom:5px;
}
#hotels .detail h3 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;
}

/* NEWS */
#news{
  padding:30px 10px 50px 10px;
  background:#000000;
  color:#ffffff;
}
#news h2{
  color:#bf9f5e;
}
#news h3{
  font-size:2.2rem;
  margin-bottom:10px;
  line-height:120%;
}
#news h3 span{
  font-size:1.8rem;
  display:block;
}
#news .news_item p{
  line-height:150%;
}
#news .more a{
  color:#ffffff;
  border:1px solid #ffffff;
}



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

  /* メインイメージ */
  #mainvisual .copy br:last-child{
    display:none;
  }

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

  /* NEWS */
  #news{
    padding:30px 20px 50px 20px;
  }
}



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

  /* メインイメージ */
  #mainvisual .copy{
    padding:250px 50px 200px 50px;
  }
  #mainvisual .concept a{
    right:50px;
    bottom:30px;
    font-size:2.4rem;
    background-size:80px;
    padding-right:90px;
  }

  /* バナーエリア */
  main #banner{
    padding:30px 30px 20px 30px;
  }

  /* Swiper */
  main #bnr-swiper{
    padding-bottom:20px;
    max-width:1280px;
    margin:0 auto;
  }
  .swiper-pagination-bullet{
    width:12px !important;
    height:12px !important;
    margin:0 0 0 15px !important;
    background:#333333 !important;
  }

  /* HOTELS */
  #hotels{
    padding:50px 30px 70px 30px;
  }
  #hotels > ul{
    max-width:1280px;
    margin:0 auto;
  }
  #hotels 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;
  }

  /* NEWS */
  #news{
    padding:50px 30px 70px 30px;
  }
  #news .news_item{
    max-width:1000px;
    margin:0 auto;
  }
  #news h3{
    font-size:2.4rem;
    margin-bottom:20px;
    line-height:150%;
  }
  #news h3 span{
    font-size:2rem;
    display:inline-block;
    margin-right:10px;
  }
}