@charset "utf-8";
/* ===================================================================
CSS information

file name	: style_new.css
author		 : Abilive
style info : 20230518追加
=================================================================== */
/**/
.p-top__feelFirstIntro .body__yt .c-img video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.p-top__feelFirstIntro .body__yt .c-img .bg_video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: url("../images/top/feel-intro.jpg") no-repeat center / cover;
}

.p-top__feelFirstIntro {
  
}


.p-top__aboutBnr {
  margin-top: calc(150em/16);
}
@media screen and (min-width:751px) {
  .p-top__aboutBnr {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.p-top__aboutBnr .bnr {
    width: 41%;
    max-width: 400px;
}
@media screen and (min-width:1025px) {
  .p-top__aboutBnr .bnr {
    width: 50%;
  }
}
@media screen and (max-width:750px) {
  .p-top__aboutBnr .bnr {
    width: 100%;
  }
}

.p-top__aboutBnr .bnr a {
    display: block;
    text-decoration: none;
    opacity: 1;
    transition: opacity 400ms ease;
}

/* Feel the time 1泊2日を 温泉旅館で過ごす */
.p-top__feelFirstIntro .feelFirstIntro__photo {
  flex-basis: calc(620/980*100%);
  position: relative;
  overflow: hidden;  
  padding-top: calc(220/620*100%);
}
@media screen and (max-width: 750px) {
  .p-top__feelFirstIntro .feelFirstIntro__photo {
    flex-basis: auto;
    height: calc(430/750*100vw);
    margin-top: calc(34em/16);
    
  }
}

.p-top__feelFirstIntro .feelFirstIntro__photo .c-img__body-wrap {
  position: absolute;
  height: 118%;
  top: -9%; 
  left: 0;
  width: 100%;
}
@media screen and (max-width: 750px) {
  .p-top__feelFirstIntro .feelFirstIntro__photo .c-img__body-wrap {
    height: 100%;
    top: 0;
  }
}

/* 新しい施設も続々登場 */
.p-top__facility {
  position: relative;
  z-index: 1;
  padding-top: calc(175em/16);
  margin-bottom: 13.5em;
}
@media screen and (max-width: 750px) {
  .p-top__facility {
    margin-bottom: 6.25em;
  }
}
.p-top__facility::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
 height: clamp(400px, calc(-45px + 36vw), 550px);
  background: url(../images/top/bg_fac.jpg) no-repeat center bottom;
  background-size: cover; 
}
@media screen and (max-width: 750px) {
  .p-top__facility::before {
    height: 50%;
    background-position: right bottom;
  }
}
.p-top__facility__inner {
  position: relative;
  z-index: 2;
  padding-bottom: 2em;
}
@media screen and (min-width: 751px) {
  .p-top__facility__inner {
    display: flex;
    margin-left: auto;
    width: calc(1738/1920*100%);
  }
}
@media screen and (max-width: 750px) {
  .p-top__facility__inner {
    width: 100%;
  }
}
@media screen and (min-width: 751px) {
  .p-top__facility__inner__title {
    width: calc(350/1738*100%);
  }
}
@media screen and (max-width: 750px) {
  .p-top__facility__inner__title {
    /* width: calc(630/750*100%);*/
    width: calc(264/390*100%);
    margin-inline: auto;
  }
}
.p-top__facility__inner__title__main {
  position: relative;
  z-index: 1;
}
.p-top__facility__inner__title__main__img {
  display: block;
  width: calc(132/350*100%);
  margin-left: calc(-50/350*100%);
}
.p-top__facility__inner__title__main__img img {
  width: 100%;
}
.p-top__facility__inner__title__main__text {
  display: inline-block;
  /*font-size: calc(30em/16);*/
  /* font-size: 1.857em;*/
  font-size: 1.5em;
  font-family: "Kiwi Maru", serif;
  position: relative;
  white-space: nowrap;
  line-height: 0.5;
  padding-bottom: 0;
  border-bottom: solid 10px #e5d5d5;
}
.p-top__facility__inner__title__thum {
  position: relative;
  z-index: 1;
  border-top: solid 2px #9D6060;
  border-bottom: solid 2px #9D6060;
  text-align: center;
  color: #9D6060;
}
@media screen and (min-width: 751px) {
  .p-top__facility__inner__title__thum {
    margin-top: calc(62em/16);
    padding-block: calc(40em/16);
  }
}
@media screen and (max-width: 750px) {
  .p-top__facility__inner__title__thum {
    margin-top: calc(24em/16);
    padding-block: calc(21em/16);
  }
}
.p-top__facility__inner__title__thum::before, .p-top__facility__inner__title__thum::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 1px;
  background: #9D6060;
}
.p-top__facility__inner__title__thum::before {
  top: 5px;
}
.p-top__facility__inner__title__thum::after {
  bottom: 5px;
}
.p-top__facility__inner__title__thum span {
  display: inline-block;
  text-align: left;
}
.p-top__facility__inner__wrp {
  width: calc(1330/1738*100%);
  margin-left: calc(58/1738*100%);
  box-sizing: border-box;
}
@media screen and (max-width: 750px) {
  .p-top__facility__inner__wrp {
    width: 100%;
    margin-left: 0;
    padding-left: 1.5em;
    padding-bottom: 3em;
  }
}
.p-top__facility__inner__wrp__list {
  width: calc(100% + 1.8em);
}
@media screen and (max-width: 750px) {
  .p-top__facility__inner__wrp__list {
    margin-top: 3.6em;
  }
}
.p-top__facility__inner__wrp__list .slick-list {
  width: 100%;
  padding-top: 1.8em;
  padding-left: 1.8em;
}
@media screen and (max-width: 750px) {
  .p-top__facility__inner__wrp__list .slick-list {
    width: 95%;
  }
}
.p-top__facility__inner__wrp__list__item {
  border: solid 1px #9D6060;
  box-sizing: border-box;
  border-radius: calc(14em/16);
  background: #fff;
  cursor: pointer;
  margin-right: 2em;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.p-top__facility__inner__wrp__list__item__img {
  position: relative;
  flex-shrink: 0;
}
.p-top__facility__inner__wrp__list__item__img__label {
  position: absolute;
  z-index: 2;
  top: -1.8rem;
  left: -1.8rem;
  width: calc(200/342*100%);
}
.p-top__facility__inner__wrp__list__item__img__label img {
  width: 100%;
}
.p-top__facility__inner__wrp__list__item__img__img {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top-right-radius: calc(14em/16);
  border-top-left-radius: calc(14em/16);
  aspect-ratio: 342 / 210;
}
.p-top__facility__inner__wrp__list__item__img__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-top__facility__inner__wrp__list__item__text {
  padding: calc(23/342*100%);
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.p-top__facility__inner__wrp__list__item__text__name {
  text-align: left;
  font-size: 1em;
  position: relative;
  z-index: 1;
  padding-bottom: .8em;
  flex-shrink: 0;
}
.p-top__facility__inner__wrp__list__item__text__name::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 1.5em;
  height: 2px;
  background: #C7737B;
}
.p-top__facility__inner__wrp__list__item__text__text {
  font-size: 0.75em;
  text-align: left;
  margin-top: .8em;
  flex: 1;
}
.p-top__facility__inner__wrp .js-Slide-control {
  width: calc(100% - calc(30/1330*100%));
  margin-top: calc(26em/16);
  display: flex;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .p-top__facility__inner__wrp .js-Slide-control {
    margin-left: 1.8em;
    width: calc(100% - calc(30/1330*100%) - 1.8em);
  }
}
.p-top__facility__inner__wrp .js-Slide-control__Arrow {
  display: flex;
  justify-content: space-between;
  width: 5.813em;
}
.p-top__facility__inner__wrp .js-Slide-control__Arrow__button {
  width: 2.313em;
  cursor: pointer;
}
.p-top__facility__inner__wrp .js-Slide-control__Dots {
  width: calc(100% - 93px - 40px);
  margin-left: calc(40/1300*100%);
  text-align: left;
}
.p-top__facility__inner__wrp .js-Slide-control__Dots .slick-dots {
  display: flex;
}
.p-top__facility__inner__wrp .js-Slide-control__Dots .slick-dots > li {
  width: 0.5em;
  height: 0.5em;
  border-radius: .188em;
  background: #DEDEDE;
  transition: width 500ms ease, background-color 500ms ease;
  cursor: pointer;
}
.p-top__facility__inner__wrp .js-Slide-control__Dots .slick-dots > li + * {
  margin-left: .75em;
}
.p-top__facility__inner__wrp .js-Slide-control__Dots .slick-dots > li.slick-active {
  width: 2.625em;
  background: #9D6060;
}
.p-top__facility__inner__wrp .js-Slide-control__Dots .slick-dots > li:hover {
  background: #9D6060;
}
.p-top__facility__inner__wrp .js-Slide-control__Dots .swiper-pagination-bullet {
  border: none;
}

/* 新しい施設も続々登場 ポップアップ */
.p-top__facilitypopup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  min-height: 100vh;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: calc(20em/16) 0;
  font-size: .9em;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}
.p-top__facilitypopup.is-open {
  visibility: visible;
  opacity: 1;
}
.p-top__facilitypopup__inner {
  max-width: calc(819em/16);
  background-color: #f0eaea;
  padding: calc(32em/16) calc(32em/16) calc(50em/16);
  text-align: left;
  position: relative;
}
@media screen and (max-width: 750px) {
  .p-top__facilitypopup__inner {
    max-width: calc(656/750*100%);
    padding: calc(50em/16) 1em;
  }
}
@media screen and (max-width: 415px) {
  .p-top__facilitypopup__inner {
    padding: calc(50em*.8/16) calc(8em/16);
  }
}
.p-top__facilitypopup__inner__item {
  visibility: hidden;
  opacity: 0;
  display: none;
  flex-wrap: wrap;
}
.p-top__facilitypopup__inner__item.is-active {
  display: flex;
  visibility: visible;
  opacity: 1;
}
.p-top__facilitypopup__inner__item__img {
  width: 100%;
  margin-bottom: calc(40em/16);
}
.p-top__facilitypopup__inner__item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-top__facilitypopup__inner__item__text {
  display: flex;
  flex-direction: column;
  padding-left: calc(20em/16);
  width: calc(425/755*100%);
}
@media screen and (max-width: 750px) {
  .p-top__facilitypopup__inner__item__text {
    width: 100%;
    padding: 0 calc(15em/16);
  }
}
.p-top__facilitypopup__inner__item__text__title {
  order: 2;
  font-size: calc(28em/16);
}
.p-top__facilitypopup__inner__item__text__place {
  order: 1;
  line-height: 1;
  font-size: calc(15em/16);
  color: #7d7d7d;
}
.p-top__facilitypopup__inner__item__text__txt {
  order: 3;
  font-size: calc(15em/16);
  margin-top: calc(5em/15);
}
.p-top__facilitypopup__inner__item__lnks {
  width: calc(330/755*100%);
  justify-content: flex-end;
  display: flex;
}
@media screen and (max-width: 750px) {
  .p-top__facilitypopup__inner__item__lnks {
    width: auto;
    justify-content: center;
    margin-top: calc(40em/16);
  }
}
@media screen and (max-width: 415px) {
  .p-top__facilitypopup__inner__item__lnks {
    font-size: 0.8em;
  }
}
.p-top__facilitypopup__inner__item__lnks .btn__item + * {
  margin-left: calc(19em/16);
}