@charset "UTF-8";
/* ================================================
hero-pagettl
================================================ */
.hero-pagettl-cmn{
  margin: 0 0 80px;
  background-image: url("../img/bg_pagettl_01.jpg?19040");
}
/* ================================================
parts
================================================ */
/* セクションタイトル */
.ttl-sec-cmn{
  color: #00adca;
  text-align: center;
}
.ttl-sec-cmn > .en{
  margin: 0 0 15px;
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 10px;
  font-size: 38px;
  font-weight: normal;
}
.ttl-sec-cmn > .lead{
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.ttl-sec-cmn > .lead--space{
  letter-spacing: 0.5em;
  margin-left: 0.5em;
}
/* ================================================
area-intro
================================================ */
.area-intro{
  padding: 0 10px;
  margin-bottom:130px;
  text-align: center;
}
.area-intro .lead-intro-cmn{
  margin: 0 0 40px;
}

/* ================================================
area-amenity
================================================ */
.area-amenity{
  margin: 0 auto 150px;
  width: calc(100% - 30px);
  max-width: 1870px;
}
.area-amenity .ttl-sec-cmn{
  max-width: max-content;
  margin: 0 auto 30px;
}
.area-amenity__txt{
  margin: 0 0 40px;
  text-align: center;
  line-height: 1.8;
}
.area-amenity__img{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}
.area-amenity__img img{
}

/* ================================================
area-service
================================================ */
.area-service{
  margin: 0 auto 150px;
  width: calc(100% - 30px);
  max-width: 1870px;
}
.area-service .ttl-sec-cmn{
  max-width: max-content;
  margin: 0 auto 30px;
}
.area-service__txt{
  margin: 0 0 40px;
  text-align: center;
  line-height: 1.8;
}

/* 一覧 */
.area-service__list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 35px;
  grid-row-gap: 0px;
}
.area-service__list .ttl{
  display: flex;
  margin: 0 0 20px;
  padding: 18px 20px;
  align-items: center;
  justify-content: center;
  color: #0069a0;
  font-size: 20px;
  font-weight: normal;
  border:1px solid #0069a0;
  text-align: center;
}
.area-service__list .txt{
  margin: 15px 0 15px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
}

.area-service__list .btn{
  max-width: 250px;
  margin: 0 auto;
  padding: 20px 20px 20px 10px;
  display: flex;
  gap: 0 1em;
  background: #0069a0;
  border: 1px solid #0069a0;
  border-radius: 9999px;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}
.area-service__list .btn::before{
  content: "";
  display: block;
  background: #fff;
  width: 8px;
  aspect-ratio: 15 / 20;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.area-service__list .btn:focus-visible{
  background: #fff;
  color: #0069a0;
}
.area-service__list .btn:focus-visible::before{
  background: #0069a0;
}
@media (any-hover: hover) {
  .area-service__list .btn:hover{
    background: #fff;
    color: #0069a0;
  }
  .area-service__list .btn:hover::before{
    background: #fff;
    background: #0069a0;
  }
}

/* ================================================
area-anniversary
================================================ */
.area-anniversary{
  margin: 0 auto 150px;
  width: calc(100% - 30px);
  max-width: 1870px;
}
.area-anniversary .ttl-sec-cmn{
  max-width: max-content;
  margin: 0 auto 30px;
}
.area-anniversary__txt{
  margin: 0 0 40px;
  text-align: center;
  line-height: 1.8;
}

/* 一覧 */
.area-anniversary__list{
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 35px;
  grid-row-gap: 0px;
  max-width: 1390px;
}
.area-anniversary__list .ttl{
  display: flex;
  margin: 0 0 20px;
  padding: 18px 20px;
  align-items: center;
  justify-content: center;
  color: #0069a0;
  font-size: 20px;
  font-weight: normal;
  border:1px solid #0069a0;
  text-align: center;
}
.area-anniversary__list .img--border{
  border: 1px solid #eee;
}
.area-anniversary__list .txt{
  margin: 15px 0 15px;
  text-align: center;
}
.area-anniversary__list .txt-note{
  margin-top: 8px;
}
.area-anniversary__list .btn{
  max-width: 250px;
  margin: 0 auto;
  padding: 20px 20px 20px 10px;
  display: flex;
  gap: 0 1em;
  background: #0069a0;
  border: 1px solid #0069a0;
  border-radius: 9999px;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}
.area-anniversary__list .btn::before{
  content: "";
  display: block;
  background: #fff;
  width: 8px;
  aspect-ratio: 15 / 20;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.area-anniversary__list .btn:focus-visible{
  background: #fff;
  color: #0069a0;
}
.area-anniversary__list .btn:focus-visible::before{
  background: #0069a0;
}
@media (any-hover: hover) {
  .area-anniversary__list .btn:hover{
    background: #fff;
    color: #0069a0;
  }
  .area-anniversary__list .btn:hover::before{
    background: #fff;
    background: #0069a0;
  }
}

/* ケーキ */
.area-anniversary__cake{
  max-width: 800px;
  margin: 0 auto;
}
.area-anniversary__cake .link{
  display: block;
  transition: 0.15s;
}
.area-anniversary__cake .link:hover{
  opacity: 0.7;
}
.area-anniversary__cake .img{
  margin: 0 0 20px;
}
.area-anniversary__cake .txt{
  text-align: center;
}
/* ================================================
area-facility
================================================ */
.area-facility{
  margin: 0 auto 150px;
  max-width: 1870px;
  width: calc(100% - 30px);
}
.area-facility .ttl-sec-cmn{
  margin: 0 0 50px;
}

/* 一覧 */
.area-facility__list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 35px;
  grid-row-gap: 0px;
}
.area-facility__list .ttl{
  display: flex;
  margin: 0 0 20px;
  padding: 18px 20px;
  align-items: center;
  justify-content: center;
  color: #0069a0;
  font-size: 20px;
  font-weight: normal;
  border:1px solid #0069a0;
  text-align: center;
}

/* ================================================
area-foryou
================================================ */
.area-foryou{
  max-width: 1920px;
  margin: 0 auto 150px;
  display: grid;
  grid-template-columns: 50% 1fr;
  grid-template-rows: 1fr;
  grid-row-gap: 0px;
}
.area-foryou__contents{
  display: flex;
  align-items: center;
  padding: 0 70px;
}
.area-foryou__contents-in{
  width: 100%;
}
.area-foryou__contents-in .ttl-sec-cmn{
  margin: 0 0 70px;
}
.area-foryou__ttl-plan{
  margin: 0 0 30px;
  padding: 20px 25px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 15px;
  background: #00afcc;
  color: #fff;
  font-weight: normal;
}
.area-foryou__ttl-plan .small{
  display: inline-block;
  padding: 10px 25px;
  font-size: 22px;
  letter-spacing: 0.05em;
  border: 1px solid #fff;
}
.area-foryou__ttl-plan .large{
  font-size: 28px;
  letter-spacing: 0.05em;
}

/* プラン特典 */
.area-foryou__ttl-special{
  margin: 0 0 30px;
  display: flex;
  align-items: center;
  gap: 0 15px;
}
.area-foryou__ttl-special::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #d34646;
}
.area-foryou__list-special{
  display: flex;
  padding: 0 25px 40px;
  flex-direction: column;
  gap: 18px 0;
  list-style: none;
  counter-reset: number 0; /* カウンター変数を初期化 */
  border-bottom: 2px solid #d34646;
}
.area-foryou__list-special li{
  display: flex;
  gap: 0 15px;
  font-size: 18px;
  line-height: 1.8;
}
.area-foryou__list-special li .inner{
  flex: 1;
}
.area-foryou__list-special li::before{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 18px;
  color: #fff;
  counter-increment: number 1; /* 増加数 */
  content: counter(number);
  background: #d34646;
}
.area-foryou__list-special li .mark{
  color: #d34646;
  font-weight: normal;
}
.area-foryou__list-special li .note{
  font-size: 14px;
}

/* ================================================
area-reserve
================================================ */
.area-reserve{
  margin-bottom: 100px;
}