@charset "UTF-8";
body.tour #mainwrap {
  margin-top: 30px;
}
@media (max-width: 600px) {
  body.tour #mainwrap {
    margin-top: 3px;
  }
}

/* メインビジュアル */
.picMain {
  position: relative;
  max-height: 465px;
  margin-top: 10px;
}
.picMain .mainTtl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 523px;
  height: 387px;
  margin: auto;
  z-index: 99;
}
@media (max-width: 600px) {
  .picMain .mainTtl {
    width: 50%;
    height: 100%;
  }
}

/* イラスト見出し */
.illustTop {
  margin-bottom: 25px;
  text-align: center;
}

.pcCenter {
  text-align: center;
}
@media (max-width: 600px) {
  .pcCenter {
    text-align: left;
  }
}

/* =====================================
	スポット紹介
======================================= */
.spot {
  padding-bottom: 56px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 100%;
}
@media (max-width: 600px) {
  .spot {
    padding: 30px 0 16px;
  }
}

/* ▼プール・ビーチ(waterSpot)削除 170901▼ */
/*
#waterSpot {
  background-image: url(../images/bg_wave_top_blue.gif), url(../images/bg_wave_bottom_blue.gif);
  background-color: #e5f7fd;
  background-size: contain;
}
#waterSpot .detail .detailInner {
  background: url(../images/illust_water.png) no-repeat top 22px right 18px, url(../images/illust_wave.png) no-repeat bottom 18px left 50%;
}
@media (max-width: 600px) {
  #waterSpot .detail .detailInner {
    background-position: top 11px right 9px, bottom 10px left 50%;
    background-size: 25px, 70%;
  }
}
*/
/* ▼夏限定イベント(summerEvent)削除 170901▼ */
/*
#summerEvent {
  background-image: url(../images/bg_wave_top_pink.gif), url(../images/bg_wave_bottom_pink.gif);
  background-color: #fdebe6;
  background-size: contain;
}
#summerEvent .detail .detailInner {
  background: url(../images/illust_cloud.png) no-repeat top 22px left 18px, url(../images/illust_fireworks.png) no-repeat bottom 36px left 50%;
}
@media (max-width: 600px) {
  #summerEvent .detail .detailInner {
    background-position: top 11px left 9px, bottom 10px left 50%;
    background-size: 30px, 70%;
  }
}
*/
/* ▼秋限定イベント(autumnEvent)削除 180109▼ */
/*
#autumnEvent {
  background-image: url(../images/bg_wave_top_pink.gif), url(../images/bg_wave_bottom_pink.gif);
  background-color: #fdebe6;
  background-size: contain;
}
#autumnEvent .detail .detailInner {
  background: url(../images/illust_cloud.png) no-repeat top 22px right 18px, url(../images/illust_autumn.png) no-repeat bottom 38px left 50%;
  padding: 70px 42px 172px;
}
@media (max-width: 600px) {
  #autumnEvent .detail .detailInner {
    background-position: top 11px right 9px, bottom 10px left 50%;
    background-size: 25px, 70%;
    padding: 35px 10px 16%;
  }
}
*/

#winterEvent {
  background-image: url(../images/bg_wave_top_blue.gif), url(../images/bg_wave_bottom_blue.gif);
  background-color: #e5f7fd;
  background-size: contain;
}
#winterEvent .detail .detailInner {
  /*background: url(../images/illust_sparkles.png) no-repeat top 12px right 10px, url(../images/illust_spring_190226.png) no-repeat bottom 24px left 50%;  夏ver*/
  background: url(../images/illust_sparkles.png) no-repeat top 12px right 10px, url(../images/illust_winter.png) no-repeat bottom 24px left 50%;  /*冬ver*/
  padding: 33px 42px 158px;
}
@media (max-width: 600px) {
  #winterEvent .detail .detailInner {
    background-position: top 11px right 9px, bottom 10px left 50%;
    background-size: 25px, 70%;
    padding: 35px 10px 38%;
  }
}


#spaHealingFood {
  background-image: url(../images/bg_wave_top_green.gif), url(../images/bg_wave_bottom_green.gif);
  background-color: #f5fcde;
  background-size: contain;
}
@media (max-width: 600px) {
  #spaHealingFood {
    padding-bottom: 0;
  }
}
#spaHealingFood .detail .detailInner {
  background: url(../images/illust_leaf.png) no-repeat top 22px left 18px, url(../images/illust_tree.png) no-repeat bottom 36px left 50%;
  padding: 70px 42px 174px;
}
@media (max-width: 600px) {
  #spaHealingFood .detail .detailInner {
    background-position: top 11px left 9px, bottom 10px left 50%;
    background-size: 30px, 40%;
    padding: 35px 10px 20%;
  }
}

#activity {
  background-image: url(../images/bg_wave_top_yellow.gif), url(../images/bg_wave_bottom_yellow.gif);
  background-color: #fbf0be;
  background-size: contain;
}
#activity .detail .detailInner {
  background: url(../images/illust_triangle_170904.png) no-repeat top 22px right 18px, url(../images/illust_bird.png) no-repeat bottom 36px left 50%;
  padding: 70px 42px 176px;
}
@media (max-width: 600px) {
  #activity .detail .detailInner {
    background-position: top 11px right 9px, bottom 10px left 50%;
    background-size: 30px, 30%;
    padding: 35px 10px 17%;
  }
}

#otherInfo {
  background-image: url(../images/bg_wave_top_pink.gif), url(../images/bg_wave_bottom_pink.gif);
  background-color: #fdebe6;
  background-size: contain;
}
#otherInfo .detail .detailInner {
  background: url(../images/illust_check_pink.png) no-repeat top 22px left 18px, url(../images/illust_drink_pink.png) no-repeat bottom 36px left 50%;
  padding: 70px 42px 156px;
}
@media (max-width: 600px) {
  #otherInfo .detail .detailInner {
    background-position: top 11px left 9px, bottom 10px left 50%;
    background-size: 50px, 58%;
    padding: 35px 10px 25%;
  }
}

/* -------- 大カセット -------- */
.largeBlock {
  margin-bottom: 28px;
}
@media (max-width: 600px) {
  .largeBlock {
    margin-bottom: 14px;
  }
}
.largeBlock .detailWrap {
  width: 556px;
}
@media (max-width: 600px) {
  .largeBlock .detailWrap {
    width: auto;
  }
}
.largeBlock .flipBoxWrap {
  width: 423px;
}
@media (max-width: 600px) {
  .largeBlock .flipBoxWrap {
    width: auto;
  }
}

/* -------- 小カセット -------- */
.smallBox {
  padding-left: 1px;
}
@media (max-width: 600px) {
  .smallBox {
    padding: 0 10px;
  }
}
.smallBox .column {
  float: left;
  width: 319px;
  margin-right: 10px;
}
@media (max-width: 600px) {
  .smallBox .column {
    float: none;
    width: auto;
    margin-right: 0;
    margin-bottom: 24px; /* 170703 */
  }
}
.smallBox .column.last {
  margin-right: 0;
}
.smallBox .column.empty {
  position: relative;
  height: 357px;
  background: url(../images/bg_stripe.png) repeat top left;
}
.smallBox .column.empty:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 186px;
  height: 112px;
  margin: auto;
  background: url(../images/icon_logo.png) no-repeat center center;
}

/* -------- スポット紹介 -------- */
.detail {
  position: relative;
  margin-top: 60px;
  background-color: #fff;
}
@media (max-width: 600px) {
  .detail {
    margin-top: 0;
  }
}
/*
.detail .detailInner {
  padding: 70px 42px 170px;
}
@media (max-width: 600px) {
  .detail .detailInner {
    padding: 35px 10px 15%;
  }
}
*/
.detail .ttl {
  margin-bottom: 50px;
}
@media (max-width: 600px) {
  .detail .ttl {
    margin-bottom: 25px;
  }
}
.detail .ttl p.ttl02 {
    position: relative;
    text-align: center;
    z-index: 2;
}
.detail .ttl .icon {
  position: absolute;
  z-index: 1;
}
@media (max-width: 600px) {
  .detail .ttl .icon {
    width: 60px;
    height: 60px;
  }
}

/* -------- 左右ブロック分け -------- */
.leftBlock {
  float: left;
}
@media (max-width: 600px) {
  .leftBlock {
    float: none;
  }
}
.leftBlock .ttl {
  padding-left: 38px;
}
@media (max-width: 600px) {
  .leftBlock .ttl {
    padding: 0 25px 0 55px;
  }
}
.leftBlock .ttl .icon {
  top: 9px;
  left: 4px;
}

.rightBlock {
  float: right;
}
@media (max-width: 600px) {
  .rightBlock {
    float: none;
  }
}
@media (max-width: 600px) {
  .rightBlock .ttl {
    padding: 0 40px 0 30px;
  }
}
.rightBlock .ttl .icon {
  top: 9px;
  right: 9px;
}

/* -------- フリップボックス -------- */
@media (max-width: 600px) {
  .flipBoxWrap {
    padding: 20px 10px 10px;
  }
}

.flipBox {
  cursor: pointer;
  position: relative;
  -webkit-perspective: 1000;
          perspective: 1000;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.largeBlock .flipBox {
  padding-top: 95%;
}
.smallBox .flipBox {
  padding-top: 112%;
}
.flipBox .flipBoxFront, .flipBox .flipBoxBack {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-perspective: 1000;
          perspective: 1000;
  border-radius: 8px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.flipBox.open .flipBoxFront {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.flipBox.open .flipBoxBack {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}
.flipBox.open {
  cursor: default;
}
.flipBox .flipBoxFront {
  z-index: 2;
}
.flipBox .smallText {
  font-size: 18px;
}
@media (max-width: 600px) {
  .flipBox .smallText {
    font-size: 12px;
  }
}
.flipBox .frontTtl {
  position: absolute;
  top: 36px;
  left: 0;
  width: 100%;
  padding: 0 25px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}
.flipBox .frontTtl.sBlack {
  text-shadow: 0 0 20px #080808, 0 0 20px #080808, 0 0 20px #080808, 0 0 20px #080808;
}
.flipBox .frontTtl.sBlue {
  text-shadow: 0 0 19px #2d8eff, 0 0 19px #2d8eff, 0 0 19px #2d8eff, 0 0 19px #2d8eff;
}
.largeBlock .flipBox .frontTtl {
  font-size: 32px;
}
@media (max-width: 600px) {
  .largeBlock .flipBox .frontTtl {
    font-size: 20px;
  }
}
.smallBox .flipBox .frontTtl {
  font-size: 24px;
}
@media (max-width: 600px) {
  .smallBox .flipBox .frontTtl {
    font-size: 20px;
  }
}
.flipBox .img img {
  width: 100%;
}
.flipBox .excerpt {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 14px;
  color: #343133;
  vertical-align: bottom;
  background: rgba(255, 255, 255, 0.78) url(../images/icon_pointer.png) no-repeat right 7px bottom 8px;
  z-index: 2;
}
.flipBox .flipBoxFront {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.flipBox .flipBoxBack {
  /*cursor: pointer;*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  border-radius: 8px;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  border: 2px solid #4f391d;
  z-index: 3;
}
/* ▼プール・ビーチ(waterSpot)削除 170901▼ */
/*
#waterSpot .flipBox .flipBoxBack {
  background-color: #e5f7fd;
}
*/
/* ▼夏限定イベント(summerEvent)削除 170901▼ */
/*
#summerEvent .flipBox .flipBoxBack {
  background-color: #fdebe6;
}
*/
/* ▼秋限定イベント(autumnEvent)削除 180109▼ */
/*
#autumnEvent .flipBox .flipBoxBack {
  background-color: #fdebe6;
}
*/
#winterEvent .flipBox .flipBoxBack {
  background-color: #e5f7fd;
}

#spaHealingFood .flipBox .flipBoxBack {
  background-color: #f5fcde;
}
#activity .flipBox .flipBoxBack {
  background-color: #fbf0be;
}
#otherInfo .flipBox .flipBoxBack {
  background-color: #fdebe6;
}
.largeBlock .flipBox .flipBoxBack {
  padding: 40px 18px 25px;
}
.smallBox .flipBox .flipBoxBack {
  padding: 35px 18px;
}
.flipBox .closeBtn {
  position: absolute;
  top: 19px;
  right: 19px;
}
.flipBox .backTtl {
  margin-bottom: 25px;
  color: #3f3f3f;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}
.largeBlock .flipBox .backTtl {
  font-size: 32px;
}
@media (max-width: 600px) {
  .largeBlock .flipBox .backTtl {
    font-size: 20px;
  }
}
.smallBox .flipBox .backTtl {
  font-size: 24px;
}
@media (max-width: 600px) {
  .smallBox .flipBox .backTtl {
    font-size: 20px;
  }
}

/* -------- フォーム -------- */
.spot .cassSubmit,
.spot .itemStyle.cassSelect {
  display: block;
}

.spot .cassSerch {
  padding: 0;
  background: none;
}

.spot .cassSubmit {
  width: auto;
  height: auto;
  margin-top: 11px;
  text-align: center;
}
@media (max-width: 600px) {
  .spot .cassSubmit {
    margin-left: 0;
  }
}

.searchBtn {
  cursor: pointer;
  padding-left: 40px;
  color: #fff;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-shadow: 1px 1px 0 black;
  background: url(../images/btn_search.png) no-repeat 0 0;
  background-size: contain;
  border: 0;
}
.largeBox .searchBtn {
  font-size: 14px;
}
.smallBox .searchBtn {
  font-size: 12px;
}
.largeBlock .searchBtn {
  width: 370px;
  height: 55px;
}
@media (max-width: 600px) {
  .largeBlock .searchBtn {
    width: 300px;
    height: 45px;
  }
}
.smallBox .searchBtn {
  width: 297px;
  height: 45px;
}
@media (max-width: 600px) {
  .smallBox .searchBtn {
    width: 300px;
    height: 45px;
  }
}

.spot .btnCaption {
  padding: 8px 20px 0;
  text-align: center;
}

/* =====================================
	ホテルタブ切替
======================================= */
#hotelArea {
  margin-bottom: 70px;
  padding-top: 168px;
  background: url(../images/illust_bottom_180109.png) no-repeat 44% 0, url(../images/bg_green.jpg) no-repeat 50% 60px;
  /* バナー */
}
@media (max-width: 600px) {
  #hotelArea {
    padding-top: 18%;
    background-position: 50% 0;
    background-size: 90% auto, 160% auto;
  }
}
#hotelArea .parentTab {
  padding: 0;
  height: 158px;
  text-align: center;
  background: url(../images/bg_tab_border_pc.gif) repeat-x 0 100%;
}
@media (max-width: 600px) {
  #hotelArea .parentTab {
    padding: 2.5% 2.5% 0;
    height: auto;
    background-image: url(../images/bg_tab_border_sp.png);
    background-size: contain;
  }
  #hotelArea .parentTab .childTab {
    position: relative;
    top: -1px;
    width: 48.75%;
    margin-right: 2.5%;
  }
  #hotelArea .parentTab .childTab.lastTab {
    margin-right: 0;
  }
}
#hotelArea .wrapCntTab {
  margin-top: 0;
  padding: 43px 36px;
  background-color: #fff;
}
@media (max-width: 600px) {
  #hotelArea .wrapCntTab {
    padding: 21px 10px;
  }
}
#hotelArea .wrapCntTab h2 {
  margin-bottom: 45px;
  text-align: center;
}
@media (max-width: 600px) {
  #hotelArea .wrapCntTab h2 {
    margin-bottom: 24px;
  }
}
#hotelArea .wrapCntTab h2 img {
  display: inline-block;
  vertical-align: top;
}
#hotelArea .wrapCntTab h2 .icon {
  margin-right: 34px;
}
@media (max-width: 600px) {
  #hotelArea .wrapCntTab h2 .icon {
    width: 20%;
    margin-right: 5.8%;
  }
}
#hotelArea .wrapCntTab .textBox {
  width: 44.6%;
}
@media (max-width: 600px) {
  #hotelArea .wrapCntTab .textBox {
    width: auto;
  }
}
#hotelArea .wrapCntTab .aptBox {
  width: 52.4%;
}
@media (max-width: 600px) {
  #hotelArea .wrapCntTab .aptBox {
    width: auto;
  }
}
@media (max-width: 600px) {
  #hotelArea #cntSheraton .ttl {
    width: 60%;
  }
  #hotelArea #cntHimuka .ttl {
    width: 55%;
  }
}
#hotelArea .hotelImg {
  margin-top: 43px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  #hotelArea .hotelImg {
    margin-top: 20px;
  }
}
#hotelArea .hotelImg .hotelImgList {
  width: 908px;
}
@media (max-width: 320px) {
  #hotelArea .hotelImg .hotelImgList {
    width: 798px;
  }
}
#hotelArea .hotelImg .hotelImgList .hotelList {
  float: left;
  width: 296px;
  margin-right: 9px;
}
@media (max-width: 320px) {
  #hotelArea .hotelImg .hotelImgList .hotelList {
    width: 260px;
  }
}
#hotelArea .hotelImg .hotelImgList .hotelList .caption {
  text-align: right;
}
#hotelArea .bnrArea {
  margin-top: 19px;
  text-align: center;
}

/* =====================================
	検索モジュール
======================================= */
#searchModule h2 {
  margin-bottom: 20px;
  padding: 0 10px;
  color: #4f391e;
  font-size: 20px;
  text-align: center;
}
@media (max-width: 600px) {
  #searchModule h2 {
    font-size: 17px;
  }
}

/* =====================================
	マップ
======================================= */
#map {
  margin-top: 80px;
}
@media (max-width: 600px) {
  #map {
    margin-top: 40px;
  }
}
#map h2 {
  display: table;
  table-layout: fixed;
  width: 95%;
  margin: 0 auto 19px;
  text-align: center;
}
#map h2:before, #map h2:after, #map h2 img {
  display: table-cell;
  vertical-align: middle;
}
#map h2:before, #map h2:after {
  content: "";
  background-position: 0 50%;
  background-repeat: repeat-x;
}
@media (max-width: 600px) {
  #map h2:before, #map h2:after {
    width: 13%;
  }
}
#map h2:before {
  background-image: url(../images/ttl_bg_leaf_left.gif);
}
#map h2:after {
  background-image: url(../images/ttl_bg_leaf_right.gif);
}
#map h2 img {
  padding: 5px 23px;
  background-color: #fff;
}
@media (max-width: 600px) {
  #map h2 img {
    padding: 5px 13px;
  }
}
#map .btn-view {
  margin-top: 20px;
}

/* =====================================
	注釈
======================================= */
#cautionArea {
  padding: 56px 52px 0;
}
@media (max-width: 600px) {
  #cautionArea {
    padding: 24px 0 0;
  }
}

/* =====================================
	予約ボタン
======================================= */
.yoyakuBtn {
  position: fixed;
  left: auto;
  bottom: 10px;
  width: 138px;
  height: 138px;
  margin-left: 1000px;
  z-index: 99;
}
@media (max-width: 1300px) {
  .yoyakuBtn {
    right: 10px;
    margin-left: 0;
  }
}
@media (max-width: 600px) {
  .yoyakuBtn {
    right: 10px;
    width: 60px;
    height: 60px;
    margin-left: 0;
  }
}

/* =====================================
	汎用style
======================================= */
.pr10 {padding-right:10px;}