/* =====================================================
温泉紹介ページ
===================================================== */

.onsen-page{
  background:#fff;
  color:#2f3a40;
  /* margin:109px 0 0; */
  overflow:hidden;
}

.onsen-page img{
  max-width:100%;
  height:auto;
  vertical-align:bottom;
}

.onsen-page .container{
  width:min(100% - 32px, 1180px);
  margin:0 auto;
}


/* =====================================================
intro
===================================================== */

.onsen-intro{
  padding:86px 0 54px;
}

.onsen-intro__inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
}

.onsen-intro__sub{
  margin:0 0 10px;
  font-size:.95rem;
  line-height:1.4;
  letter-spacing:.18em;
  color:#7aa8b7;
}

.onsen-intro__title{
  margin:0;
  font-size:2.8rem;
  line-height:1.5;
  font-weight:700;
  color:#2f4149;
}

.onsen-intro__title::after{
  content:"";
  display:block;
  width:58px;
  height:2px;
  margin:16px auto 0;
  background:#b9d9e3;
  border-radius:999px;
}

.onsen-intro__text{
  margin:20px 0 0;
  font-size:1.5rem;
  line-height:2;
  color:#53636a;
}


/* =====================================================
section
===================================================== */

.onsen-section{
  padding:30px 0 120px;
}

.onsen-layout + .onsen-layout{
  margin-top:100px;
  padding-top:100px;
  border-top:1px solid #e4edf1;
}


/* =====================================================
layout
===================================================== */

.onsen-layout{
  display:block;
}

.onsen-layout__head{
  display:flex;
  flex-direction:column;
  gap:32px;
}

.onsen-layout__body{
  margin-top:32px;
  display:grid;
  gap:20px;
}

.onsen-layout__media{
  width:100%;
}

.onsen-layout__floor{
  margin:0 0 14px;
  font-size:2.8rem;
  line-height:1;
  font-weight:700;
  color:#243944;
}

.onsen-layout__en{
  margin:0 0 8px;
  font-size:.9rem;
  line-height:1.4;
  letter-spacing:.16em;
  color:#7ba3b1;
}

.onsen-layout__title{
  margin:0 0 16px;
  font-size:2.8rem;
  line-height:1.45;
  font-weight:700;
  color:#2f4149;
}

.onsen-layout__lead{
  margin:0 0 24px;
  font-size:1.5rem;
  line-height:1.95;
  color:#53636a;
}


/* =====================================================
slider / photo
===================================================== */

.onsen-slider{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#f3f7f8;
  box-shadow:0 16px 36px rgba(28, 65, 83, .08);
}

.onsen-slider .swiper-slide{
  aspect-ratio:16 / 10;
  overflow:hidden;
}

.onsen-slider .swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.onsen-slider__pagination{
  position:absolute;
  left:0;
  right:0;
  bottom:14px !important;
  text-align:center;
  z-index:2;
}

.onsen-slider__pagination .swiper-pagination-bullet{
  width:10px;
  height:10px;
  opacity:1;
  background:rgba(255,255,255,.55);
}

.onsen-slider__pagination .swiper-pagination-bullet-active{
  background:#fff;
}

.onsen-photo-panel{
  overflow:hidden;
  border-radius:18px;
  background:#f3f7f8;
  box-shadow:0 16px 36px rgba(28, 65, 83, .08);
  aspect-ratio:16 / 10;
}

.onsen-photo-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* =====================================================
spec table
===================================================== */

.onsen-spec{
  display:grid;
  gap:0;
  border-top:1px solid #d8e5ea;
  border-bottom:1px solid #d8e5ea;
}

.onsen-spec__row{
  display:grid;
  grid-template-columns:110px 1fr;
  border-top:1px solid #e6eef1;
}

.onsen-spec__row:first-child{
  border-top:none;
}

.onsen-spec__head{
  padding:16px 14px;
  background:#f7fbfc;
  font-size:1.35rem;
  line-height:1.6;
  font-weight:700;
  color:#2f4149;
  border-right:1px solid #e6eef1;
}

.onsen-spec__body{
  padding:16px 18px;
  font-size:1.42rem;
  line-height:1.9;
  color:#5a6870;
}


/* =====================================================
note / compact boxes
===================================================== */

.onsen-note{
  padding:22px 20px;
  border-radius:16px;
  background:#f7fbfc;
  border:1px solid #e3edf1;
}

.onsen-note h3{
  margin:0 0 10px;
  font-size:1.55rem;
  line-height:1.5;
  font-weight:700;
  color:#2f4149;
}

.onsen-note p{
  margin:0;
  font-size:1.42rem;
  line-height:1.9;
  color:#5a6870;
}

.onsen-boxes{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.onsen-boxes__item{
  padding:20px 18px;
  border-radius:16px;
  background:#fff;
  border:1px solid #dbe7ec;
}

.onsen-boxes__item h4{
  margin:0 0 8px;
  font-size:1.45rem;
  line-height:1.5;
  font-weight:700;
  color:#2f4149;
}

.onsen-boxes__item p{
  margin:0 0 8px;
  font-size:1.35rem;
  line-height:1.8;
  color:#5a6870;
}

.onsen-list{
  margin:0;
  padding-left:1.2em;
}

.onsen-list li{
  font-size:1.35rem;
  line-height:1.8;
  color:#5a6870;
}


/* =====================================================
tablet
===================================================== */

@media screen and (min-width:768px){

  .onsen-boxes{
    grid-template-columns:repeat(2, 1fr);
  }

}


/* =====================================================
pc
===================================================== */

@media screen and (min-width:1024px){

  .onsen-intro{
    padding:96px 0 60px;
  }

  .onsen-intro__title{
    font-size:3.2rem;
  }

  .onsen-intro__text{
    font-size:1.55rem;
  }

  .onsen-layout__head{
    display:grid;
    grid-template-columns:minmax(0, 52%) minmax(0, 48%);
    gap:72px;
    align-items:start;
  }

  .onsen-layout--sub .onsen-layout__head{
    grid-template-columns:minmax(0, 48%) minmax(0, 52%);
  }

  .onsen-layout--reverse .onsen-layout__media{
    order:2;
  }

  .onsen-layout__body{
    margin-top:34px;
    gap:22px;
  }

  .onsen-layout__title{
    font-size:3rem;
  }

  .onsen-layout__lead{
    font-size:1.55rem;
  }

  .onsen-spec__row{
    grid-template-columns:124px 1fr;
  }

  .onsen-spec__head{
    padding:18px 16px;
    font-size:1.4rem;
  }

  .onsen-spec__body{
    padding:18px 20px;
  }

}

.onsen-layout__body{
  margin-top:32px;
  display:grid;
  gap:18px;
}

.onsen-note--compact{
  padding:18px 20px;
}

.onsen-note--compact h3{
  margin:0 0 8px;
}

.onsen-note--compact p{
  line-height:1.8;
}

.onsen-spec--sub .onsen-spec__row{
  grid-template-columns:160px 1fr;
}

.onsen-spec--sub .onsen-spec__head{
  background:#f7fbfc;
}

@media screen and (min-width:1024px){

  .onsen-layout__body{
    margin-top:34px;
    gap:20px;
  }

  .onsen-spec--sub .onsen-spec__row{
    grid-template-columns:180px 1fr;
  }

}