@charset "UTF-8";
/* ================================================
COMMON
================================================ */
/* ttl-area
------------------------------------------------ */
.ttl-area{
  text-align: center;
  color: #00afcc;
  overflow: hidden;
}
.ttl-area-main{
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.ttl-area-main:after{
  margin: 10px auto;
  content: "";
  display: block;
  width: 100%;
  max-width: 508px;
  height: 17px;
  background: url(../common/img/ttl_line.png) center center no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}
.ttl-area-sub{
  font-size: 28px;
  line-height: 1;
}
/* lead-area
------------------------------------------------ */
.lead-area{
  font-size: 24px;
  color: #0069a0;
}
/* btn-more
------------------------------------------------ */
.btn-more{
  font-size: 21px;
  color: #000;
  transition: 0.2s;
}
.btn-more:after{
  margin: 0 0 0 8px;
  content: "";
  display: inline-block;
  width: 58px;
  height: 15px;
  background: url(../common/img/img_arrow_more.png);
  -webkit-background-size: cover;
  background-size: cover;
  transition: 0.2s;
}
.btn-more:hover{
  color: #0c6c99;
}
.btn-more:hover:after{
  transform:translateX(10px);
}
/* ================================================
hero-mainimg
================================================ */
.hero-mainimg{
  margin: 0 0 70px;
  position: relative;
}
.hero-mainimg li{
  position: relative;
}
.hero-mainimg li img{
  width: 100%;
}
.hero-mainimg .lead{
  position: absolute;
  max-width: 35%;
  top: 35%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}
/* box-reserve
------------------------------------------------ */
.hero-mainimg .box-reserve{
  padding: 0 5px;
  margin: auto;
  position: absolute;
  width: 100%;
  max-width: 1024px;
  bottom: 30px;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.75);
}

/* box-banner
------------------------------------------------ */
.hero-mainimg .box-banner{
  max-width: 250px;
  position: fixed;
  z-index: 5000;
  top: 110px;
  left: -10px;
}
.hero-mainimg .box-banner a{
  display: block;
  margin-bottom: 10px;
}

/* slider
------------------------------------------------ */
.hero-mainimg .slick-slider{
  overflow: hidden;
}

/* ================================================
area-notice
================================================ */
.area-notice{
  justify-content: space-between;
  margin: 0 auto 100px;
  width: calc(100% - 20px);
  max-width: 1000px;
}
.area-notice a,
.area-notice button{
  transition: 0.3s;
}
.area-notice a:hover,
.area-notice button:hover{
  opacity: 0.65;
}

/*-- ボタン --*/
.area-notice .list-btn{
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area-notice .list-btn li{
  width: 100%;
}
.area-notice .list-btn li.w_half{
  flex-basis: calc((100% - (2 - 1) * 10px) / 2);
}

/* 画像 */
.area-notice .btn-img{
  display: block;
}
.area-notice .btn-img img{
  width: 100%;
  vertical-align: bottom;
}

/* テキスト */
.area-notice .btn-txt{
  height: 100%;
  position: relative;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #ccc;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
}
.area-notice .btn-txt span{
  display: block;
  padding-left: 1em;
  flex: 1;
}
.area-notice .btn-txt span > .small{
  font-size: 80%;
}
.area-notice .btn-txt:before{
  margin: auto 0;
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../img/ico_01.png) center center no-repeat;
  background-size: contain;
  align-self: center;
}

/* カラー */
.area-notice .btn--pink{
  background: #e86d81;
}
.area-notice .btn--blue{
  background: #00afcc;
}
.area-notice .btn--red{
  background: #dd2a2a;
}
.area-notice .btn--green{
  background: #00ccb5;
}

/* 工事のお知らせ */
.area-notice .btn--construction{
  min-height: 105px;
  font-size: 26px;
}

/*-- バナー --*/
.area-notice .banner-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area-notice .banner-wrap .list-goto{
  width: 49.4%;
}
.area-notice .banner-wrap .list-goto li + li{
  margin-top: 1.5%;
}

/*-- ゆのぶら --*/
.area-notice .box-yunobura{
  padding: 15px;
  background: #fde4ec;
}
.area-notice .box-yunobura-txt{
  display: flex;
  align-items: center;
  gap: 0 10px;
  max-width: max-content;
  margin: 0 auto 5px;
  font-size: 24px;
  color: #0069a0;
}
.area-notice .box-yunobura-txt::after{
  transform: rotate(90deg);
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  mask-image: url("/img/ico_01.png");
  mask-size: contain;
  background: #0069a0;
}
/* ================================================
area-offers
================================================ */
.area-offers{
  margin: 0 0 115px;
}
.area-offers .ttl-area{
  margin: 0 0 45px;
}
.area-offers .btn-more-wrap{
  text-align: center;
}

/* list-offers
------------------------------------------------ */
.list-offers{
  margin: 0 0 40px;
}
.list-offers .slick-slim{
  transform: translate3d(0px, 0px, 0px) !important;
}
.list-offers.slick-slider{
  overflow: hidden;
}
.list-offers .slick-track{
  display: flex;
}
.list-offers .slick-slide{
  height: auto;
}
.list-offers li{
  padding: 20px;
  margin: 0 8px;
  border: 1px solid #000;
}
.list-offers li .photo{
  margin: 0 0 25px;
}
.list-offers li .photo img{
  width: 100%;
  max-width: 500px;
}
.list-offers li a{
  display: inline-block;
  margin: 0 0 1em;
  font-size: 18px;
  line-height: 1.3;
  color: #0069a0;
}
.list-offers li .txt{
  line-height: 1.4;
  /*
  height: 80px;
  margin: 0;
  overflow: hidden;
  */
}
.list-offers .slick-next,
.list-offers .slick-prev{
  width: 80px;
  height: 80px;
  background-color: #0069a0;
  z-index: 100;
  transition: 0.2s;
}
.list-offers .slick-next:hover,
.list-offers .slick-prev:hover{
  opacity: 0.9;
}
.list-offers .slick-next:before,
.list-offers .slick-prev:before{
  display: block;
  width: 29px;
  height: 34px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
}
.list-offers .slick-next{
  right: 0;
}
.list-offers .slick-next:before{
  content: "";
  background-image: url(../img/arrow_offers_next.png)

}
.list-offers .slick-prev{
  left: 0;
}
.list-offers .slick-prev:before{
  content: "";
  background-image: url(../img/arrow_offers_prev.png);
}
/* ================================================
area-spa
================================================ */
.area-spa{
  margin: 0 0 180px;
  padding: 100px 0;
  background: url(../img/bg_spa_01.jpg?190419);
  -webkit-background-size: cover;
  background-size: cover;
}
.area-spa .inner{
  padding: 80px 2%;
  width: 37.5%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.area-spa .inner .ttl-area{
  margin: 0 0 20px;
}
.area-spa .inner .lead-area{
  margin: 0 0 20px;
}
.area-spa .inner .txt{
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.7;
}
.area-spa .inner .btn-more-wrap{
  text-align: right;
}
/* ================================================
area-buffet
================================================ */
.area-buffet{
  margin: 0 0 190px;
  display: flex;
}
.area-buffet .photo-wrap{
  width: 61.66%;
  max-width: 1184px;
  height: auto;
  order: 1;
}
.area-buffet .main{
  padding: 0 0 0 20px;
  width: 34.375%;
  order: 2;
  text-align: center;
  align-self: center;
}
.area-buffet .main .ttl-area{
  margin: 0 0 20px;
}
.area-buffet .main .lead-area{
  margin: 0 0 20px;
}
.area-buffet .main .txt{
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.7;
}
.area-buffet .main .btn-more-wrap{
  text-align: right;
}
/* ================================================
area-rooms
================================================ */
.area-rooms{
  margin: 0 0 150px;
  display: flex;
}
.area-rooms .box-first{
  padding: 7% 0 0;
  width: 37.5%;
}
.area-rooms .box-first img{
  width: 100%;
}
.area-rooms .box-first .ttl-area{
  margin: 0 0 30px;
}
.area-rooms .box-first .lead-area{
  margin: 0 0 15%;
  text-align: center;
}
.area-rooms .box-second{
  width: 62.5%;
}
.area-rooms .box-second img{
  width: 100%;
}
.area-rooms .box-second .txt{
  padding: 2% 20px 0;
  font-size: 24px;
  text-align: center;
}
.area-rooms .box-second .txt .txt-room-kinen {
  display: block;
  border: #dd2a2a 2px solid;
  text-align: center;
  color: #dd2a2a;
  padding: 5px 10px;
  margin-bottom: 2%;
}
.area-rooms .box-second .btn-more-wrap{
  padding: 0 60px 0;
  text-align: right;
}
/* ================================================
area-kids
================================================ */
.area-kids{
  margin: 0 0 280px;
  display: grid;
  grid-template-columns: 62.5% 1fr;
  grid-template-rows: 1fr auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.area-kids .img-01{
  grid-area: 1 / 1 / 3 / 2;
}
.area-kids .img-02{
  margin-bottom: -15%;
  grid-area: 2 / 2 / 3 / 3;
}
.area-kids .contents{
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: 1 / 2 / 2 / 3;
}
.area-kids .contents-in{
  width: 100%;
  padding: 0 60px 20px 15px;
}
.area-kids .ttl-area{
  margin-bottom: 20px;
}
.area-kids .lead-area{
  margin: 0 0 30px;
  text-align: center;
}
.area-kids .txt{
  margin: 0 0 40px;
  font-size: 24px;
  line-height: 1.7;
  text-align: center;
}
.area-kids .btn-more-wrap{
  max-width: max-content;
  margin: 0 0 0 auto;
}
/* ================================================
area-news
================================================ */
.area-news{
  margin: 0 0 130px;
  display: flex;
  flex-wrap: wrap;
}
.area-news .ttl-area{
  width: 37.5%;
  align-self: center;
}
.area-news .list-wrap{
  width: 62.5%;
}
.area-news .btn-more-wrap{
  width: 100%;
  padding: 50px 60px 0 0;
  text-align: right;
}

/* list */
.area-news .list{
}
.area-news .list a{
  display: block;
  color: #000;
  position: relative;
  transition: 0.2s;
}
.area-news .list a:nth-child(odd){
  background: rgba(0, 175, 204, 0.25);
}
.area-news .list a:hover{
  opacity: 0.7;
}
.area-news .list div.new:before{
  content: "";
  margin: auto;
  position: absolute;
  display: block;
  width: 56px;
  height: 20px;
  top: 0;
  bottom: 0;
  left: 30px;
  background: url(../common/img/ico_new.jpg) center center no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}


/*
仮

.area-news .list div{
  color: #000;
  position: relative;
}
.area-news .list div:nth-child(odd){
  background: rgba(0, 175, 204, 0.25);
}
.area-news .list div.new:before{
  content: "";
  margin: auto;
  position: absolute;
  display: block;
  width: 56px;
  height: 20px;
  top: 0;
  bottom: 0;
  left: 30px;
  background: url(../common/img/ico_new.jpg) center center no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}
*/

.area-news .list dl{
  width: 100%;
  display: table;
  padding: 45px 0 45px 110px;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro" ,"メイリオ" ,"Meiryo" , sans-serif;
}
.area-news .list dl dt,
.area-news .list dl dd{
  display: table-cell;
}
.area-news .list dl dd{
  line-height: 1.3;
}
.area-news .list dl .date,
.area-news .list dl .category{
  width: 6em;
  color: #0069a0;
}
/* ================================================
area-banquet
================================================ */
.area-banquet{
  margin: 0 0 160px;
}
.area-banquet .lead-area{
  margin: 35px 0;
  text-align: center;
}
.area-banquet .list-photo{
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area-banquet .list-photo li{
  width: 25%;
}
.area-banquet .list-photo li img{
  width: 100%;
}
.area-banquet .txt{
  margin: 0 0 20px;
  font-size: 24px;
  text-align: center;
  line-height: 1.6;
}
.area-banquet .btn-more-wrap{
  text-align: center;
}
.area-banquet .txt-banquet-kyushi {
  width: 50%;
  display: block;
  border: #dd2a2a 2px solid;
  text-align: center;
  color: #dd2a2a;
  padding: 5px 10px;
  margin: 2% auto 2%;
}
/* ================================================
area-wedding
================================================ */
.area-wedding{
  margin: 0 0 120px;
  padding: 100px 0;
  background: url(../img/bg_wedding_01.jpg?190328);
  -webkit-background-size: cover;
  background-size: cover;
}
.area-wedding .inner{
  padding: 80px 2%;
  width: 37.5%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.area-wedding .inner .ttl-area{
  margin: 0 0 20px;
}
.area-wedding .inner .lead-area{
  margin: 0 0 20px;
}
.area-wedding .inner .txt{
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.7;
}
.area-wedding .inner .btn-more-wrap{
  text-align: right;
}

/* ============
====================================
area-youtube
================================================ */
.area-youtube {
  margin: 0 auto 120px;
  width: calc(100% - 20px);
  max-width: 900px;
}
.area-youtube .box-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;

}
.area-youtube .box-youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}