@charset "UTF-8";
/*数値の設定
------------------------------------------*/
/*上記数値の設定を呼び出しているmixin
------------------------------------------*/
/*
よく使用するmixin
------------------------------------------*/
.sizeL {
  display: block;
}
@media screen and (max-aspect-ratio: 16/9) {
  .sizeL {
    display: none;
  }
}

.sizeM {
  display: none;
}
@media screen and (max-aspect-ratio: 16/9) {
  .sizeM {
    display: block;
  }
}
@media screen and (max-aspect-ratio: 12/10) {
  .sizeM {
    display: none;
  }
}

.sizeS {
  display: none;
}
@media screen and (max-aspect-ratio: 12/10) {
  .sizeS {
    display: block;
  }
}

html.iziModal-isAttached body, html.iziModal-isOverflow body {
  overflow: unset !important;
}

main {
  padding-top: 0px;
}

.sec-com {
  background: #fff;
  padding-top: 90px;
  padding-bottom: 50px;
}
@media only screen and (max-width: 767px) {
  .sec-com {
    padding-top: 45px;
    padding-bottom: 25px;
  }
}
.sec-com .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 90.71vw;
  margin-left: auto;
}
@media only screen and (max-width: 1200px) {
  .sec-com .container {
    width: calc(100% - 35px);
    max-width: 1090px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-com .container {
    display: block;
    width: calc(100% - 30px);
  }
}
.sec-com .container .ttlWrap {
  position: sticky;
  top: 90px;
  left: 9.29vw;
  width: 31.1%;
}
@media only screen and (max-width: 1200px) {
  .sec-com .container .ttlWrap {
    width: 320px;
    left: min(35px, 100vw - 1090px);
  }
}
@media only screen and (max-width: 767px) {
  .sec-com .container .ttlWrap {
    position: static;
    width: calc(100% - 30px);
    margin-bottom: 25px;
  }
}
.sec-com .container .ttlWrap h2 {
  font-size: 3.59vw;
  margin-bottom: 1.07em;
  font-family: "Cinzel", serif;
  font-weight: 400;
  color: #888888;
  line-height: 1.3;
}
@media only screen and (max-width: 1200px) {
  .sec-com .container .ttlWrap h2 {
    font-size: 43px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-com .container .ttlWrap h2 {
    font-size: 33px;
  }
}
.sec-com .container .ttlWrap .sec_txt01 {
  font-size: 0.92vw;
  line-height: 2.72;
  color: #231815;
}
@media only screen and (max-width: 1200px) {
  .sec-com .container .ttlWrap .sec_txt01 {
    font-size: 12px;
  }
}
.sec-com .container .galleryWrap {
  width: 68.89%;
}
@media only screen and (max-width: 1200px) {
  .sec-com .container .galleryWrap {
    width: calc(100% - 340px);
  }
}
@media only screen and (max-width: 767px) {
  .sec-com .container .galleryWrap {
    width: 100%;
  }
}
.sec-com .container .galleryWrap ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}
@media only screen and (max-width: 991px) {
  .sec-com .container .galleryWrap ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
.sec-com .container .galleryWrap ul li figure {
  overflow: hidden;
  aspect-ratio: 1/1;
}
.sec-com .container .galleryWrap ul li figure img {
  filter: grayscale(0);
  transition: 0.3s ease-in 0s;
}
.sec-com .container .galleryWrap ul li:has([data-iziModal-open]) {
  cursor: pointer;
}
.sec-com .container .galleryWrap ul li:has([data-iziModal-open]):hover figure img {
  filter: grayscale(1);
  transform: scale(1.1);
}
.sec-com .container .galleryWrap ul li.inview-anmfilter {
  filter: grayscale(1);
  opacity: 0;
}
.sec-com .container .galleryWrap ul li.inview-anmfilter:nth-of-type(6n+1) {
  transition: 0.3s ease-in 0s;
}
.sec-com .container .galleryWrap ul li.inview-anmfilter:nth-of-type(6n+2) {
  transition: 0.3s ease-in 0.1s;
}
.sec-com .container .galleryWrap ul li.inview-anmfilter:nth-of-type(6n+3) {
  transition: 0.3s ease-in 0.2s;
}
.sec-com .container .galleryWrap ul li.inview-anmfilter:nth-of-type(6n+4) {
  transition: 0.3s ease-in 0.3s;
}
.sec-com .container .galleryWrap ul li.inview-anmfilter:nth-of-type(6n+5) {
  transition: 0.3s ease-in 0.4s;
}
.sec-com .container .galleryWrap ul li.inview-anmfilter:nth-of-type(6n+6) {
  transition: 0.3s ease-in 0.5s;
}
.sec-com .container .galleryWrap ul li.inview-anmfilter.inview {
  filter: grayscale(0);
  transform: translateY(0);
  opacity: 1;
}
.sec-com.sec-amenity {
  padding-bottom: 100px;
}

.iziModal {
  background: none;
}
.iziModal .iziModal-content {
  text-align: center;
}
.iziModal .iziModal-content .inner {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
  gap: 10px;
}
.iziModal .iziModal-content .inner > figure {
  width: 55.2vw;
}
@media only screen and (max-width: 991px) {
  .iziModal .iziModal-content .inner > figure {
    width: 100%;
  }
}
.iziModal .iziModal-content .inner > figure.tate {
  width: 34.37vw;
}
@media only screen and (max-width: 991px) {
  .iziModal .iziModal-content .inner > figure.tate {
    width: 100%;
  }
}
.iziModal .iziModal-content .inner > figure img {
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}
.iziModal .iziModal-content .inner .modal_cap {
  width: 55.2vw;
  color: #fff;
  font-size: 1.45vw;
  text-align: justify;
  text-align: left;
}
@media only screen and (max-width: 991px) {
  .iziModal .iziModal-content .inner .modal_cap {
    width: 100%;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0px 20px;
    padding-bottom: 20px;
  }
}
.iziModal .iziModal-content .inner .modal_cap.tate {
  width: 34.37vw;
}
@media only screen and (max-width: 991px) {
  .iziModal .iziModal-content .inner .modal_cap.tate {
    width: 100%;
  }
}

.sp_modal_nav {
  display: none;
}
@media only screen and (max-width: 991px) {
  .sp_modal_nav {
    display: block;
  }
}
.sp_modal_nav .btn {
  position: absolute;
  z-index: 1000;
  top: 50%;
  font-size: 0px;
  width: 32px;
  height: 32px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-size: contain;
  background-color: rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  padding: 0px;
  cursor: pointer;
}
.sp_modal_nav .btn.prev {
  left: 0px;
}
.sp_modal_nav .btn.next {
  right: 0px;
}