@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
変数
----------------------------------------*/
/* 10/25リリース時非表示にしているコンテンツ
---------------------------------------------- */
#gallery {
  display: none;
}

/* TOP画像が、slickで画像がループするページ共通
---------------------------------------------- */
.col2 {
  position: relative;
  height: 100svh;
  z-index: 1;
}
.col2 .side .sideLogo {
  padding-left: 20px;
}
@media screen and (min-width: 1366px) {
  .col2 .side .sideLogo {
    padding-left: unset;
  }
}
.col2 .main {
  position: relative;
}
.col2 .main .mainInner {
  height: 100%;
}
.col2 .main .mainInner .titleWrap {
  position: absolute;
  right: 40px;
  top: 97px;
  height: 80%;
}
@media screen and (min-width: 900px) {
  .col2 .main .mainInner .titleWrap {
    bottom: clamp(9rem, -0.092rem + 10.65vw, 12.688rem);
    left: 50%;
    right: unset;
    top: unset;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding-right: unset;
    width: clamp(37.5rem, 6.679rem + 36.1vw, 50rem);
    height: unset;
  }
}
.col2 .main .mainInner .titleWrap h1 {
  width: 100%;
  font-size: 15px;
  color: var(--colorTextSub);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.1em;
  text-shadow: 0 0 15px #000000;
}
@media screen and (min-width: 900px) {
  .col2 .main .mainInner .titleWrap h1 {
    -webkit-writing-mode: unset;
        -ms-writing-mode: unset;
            writing-mode: unset;
    text-align: center;
    font-size: clamp(1rem, 0.6917870036rem + 0.3610108303vw, 1.125rem);
  }
}

.downLineAni {
  position: absolute;
}
.downLineAni::after {
  content: "";
  width: 1px;
  height: 120px;
  background-color: var(--colorTextSub);
  -webkit-animation: pathmoveDownSP 2s ease-in-out infinite;
          animation: pathmoveDownSP 2s ease-in-out infinite;
  opacity: 0;
  margin-top: 1.83em;
  position: absolute;
  left: 50%;
}
@media screen and (min-width: 900px) {
  .downLineAni::after {
    height: 144px;
    -webkit-animation: pathmoveDown 2s ease-in-out infinite;
            animation: pathmoveDown 2s ease-in-out infinite;
  }
}

@-webkit-keyframes pathmoveDown {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 70px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 120px;
    opacity: 0;
  }
}

@keyframes pathmoveDown {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 70px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 120px;
    opacity: 0;
  }
}
@-webkit-keyframes pathmoveDownSP {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 60px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 120px;
    opacity: 0;
  }
}
@keyframes pathmoveDownSP {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 60px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 120px;
    opacity: 0;
  }
}
/*----------------------------------------
サイト共通 スタイルシート
----------------------------------------*/
body {
  padding-top: 0;
  position: relative;
  overflow-x: hidden;
}

#topImage {
  overflow: hidden;
}

/* ページ内共通
---------------------------------------------- */
.title01 {
  position: absolute;
  color: var(--colorTextSub);
  z-index: 10;
  font-size: 0.875em;
}
@media screen and (min-width: 900px) {
  .title01 {
    font-size: 1.125em;
  }
}
.title01 .downLine::after {
  content: "";
  display: block;
  height: 40px;
  width: 1px;
  margin: 10px auto 0;
  background-color: var(--colorTextSub);
  position: absolute;
  left: calc(50% - 1px);
}
@media screen and (min-width: 900px) {
  .title01 .downLine::after {
    height: 65px;
  }
}

.transitionLink {
  display: inline-block;
  position: absolute;
  color: var(--colorTextSub);
  font-size: 0.875rem;
  z-index: 10;
}
@media screen and (min-width: 900px) {
  .transitionLink {
    font-size: 1.125rem;
  }
}
.transitionLink a {
  color: var(--colorTextSub);
}
.transitionLink.pastLink, .transitionLink.restaurantLink, .transitionLink.mapLink, .transitionLink.reserveLink, .transitionLink.galleryLink {
  padding-right: calc(68px + 1em);
  right: 0;
  bottom: 50px;
  z-index: 10;
  white-space: nowrap;
}
@media screen and (min-width: 900px) {
  .transitionLink.pastLink, .transitionLink.restaurantLink, .transitionLink.mapLink, .transitionLink.reserveLink, .transitionLink.galleryLink {
    top: 90%;
    bottom: inherit;
    padding-right: calc(clamp(11.188rem, -3.647rem + 17.38vw, 17.313rem) + 1em);
  }
}
.transitionLink .rightLine::after {
  content: "";
  width: 68px;
  height: 1px;
  background-color: var(--colorTextSub);
  margin-left: 1.42em;
  position: absolute;
  top: 50%;
  right: 0;
}
@media screen and (min-width: 900px) {
  .transitionLink .rightLine::after {
    width: clamp(11.188rem, -3.647rem + 17.38vw, 17.313rem);
  }
}

/* ローディング画面 */
.splash {
  background-color: #000000;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 999999;
  position: fixed;
  top: 0;
  left: 0;
}
.splash .splashLogo {
  width: 240px;
}
@media screen and (min-width: 900px) {
  .splash .splashLogo {
    width: 432px;
  }
}
.splash .splashLogo img {
  width: 100%;
}

/* TOPページのみ食事予約ボタン出現
---------------------------------------------- */
.reserveBtnWrap .reserveBtnInner {
  width: clamp(14.3125rem, 11.8400358607rem + 10.143442623vw, 20.5rem);
  height: clamp(15.8125rem, 12.4909067623rem + 13.6270491803vw, 24.125rem);
}

/* メインイメージ
---------------------------------------------- */
.mainImage01 {
  background: url("../../top/images/mainImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  .mainImage01 {
    background: url("../../top/images/mainImage01.jpg") no-repeat center center/cover;
  }
}

.mainImage02 {
  background: url("../../top/images/mainImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  .mainImage02 {
    background: url("../../top/images/mainImage02.jpg") no-repeat center center/cover;
  }
}

.mainImage03 {
  background: url("../../top/images/mainImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  .mainImage03 {
    background: url("../../top/images/mainImage03.jpg") no-repeat center center/cover;
  }
}

.mainImage04 {
  background: url("../../top/images/mainImage04_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  .mainImage04 {
    background: url("../../top/images/mainImage04.jpg") no-repeat center center/cover;
  }
}

/* news
---------------------------------------------- */
#news {
  background-color: #100B0D;
  position: relative;
}
#news .newsTitle {
  position: relative;
}
#news .newsTitle .titleText {
  font-size: 0.875rem;
  position: absolute;
  top: -70px;
  left: 110px;
  z-index: 3;
}
@media screen and (min-width: 900px) {
  #news .newsTitle .titleText {
    font-size: 1.125rem;
    top: -100px;
    left: clamp(12.188rem, -11.699rem + 27.98vw, 21.875rem);
  }
}
#news .newsWrapInner {
  padding: 10em 20px 11.25em;
}
#news .newsWrapInner .titleWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 33px;
}
@media screen and (min-width: 900px) {
  #news .newsWrapInner .titleWrap {
    margin-bottom: clamp(5.25rem, -0.298rem + 6.5vw, 7.5rem);
  }
}
#news .newsWrapInner .titleWrap h2 {
  width: clamp(6rem, -0.164rem + 7.22vw, 8.5rem);
}
#news .newsWrapInner .titleWrap h2 img {
  width: 100%;
}
#news #newsBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 900px) {
  #news #newsBox {
    max-width: clamp(45rem, 0.617rem + 51.99vw, 63rem);
    margin: 0 auto;
  }
}
#news #newsBox section {
  margin: 0 0.6rem 0 0.6rem;
  white-space: normal;
  text-overflow: ellipsis;
}
#news #newsBox section a {
  color: #ffffff;
}
#news #newsBox section a .newsImg {
  height: auto;
  width: 100%;
  aspect-ratio: 10/7;
  overflow: hidden;
  margin-bottom: 1em;
}
@media screen and (min-width: 900px) {
  #news #newsBox section a .newsImg {
    overflow: hidden;
  }
}
#news #newsBox section a .newsImg img {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
#news #newsBox section a .newsImg span {
  display: inline-block;
  width: 100%;
  height: 100%;
}
#news #newsBox section a .newsImg span img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
#news #newsBox section a .newsHead {
  margin-bottom: 0.5rem;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #news #newsBox section a:hover .newsImg img {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
}
#news #newsBox section a .caption {
  text-align: center;
}
#news #newsBox section p {
  font-size: 0.9rem !important;
}

/* 2025/03/14 newsのスライド機能実装関連
---------------------------------------------- */
#news #newsBox .splide__arrow--prev,
#news #newsBox .splide__arrow--next {
  position: absolute;
  z-index: 10;
  top: 41.1764705882vw;
  bottom: 50px;
  margin: auto;
}
#news #newsBox .splide__arrow--prev {
  right: 90%;
}
#news #newsBox .splide__arrow--next {
  left: 90%;
}
#news #newsBox .splide__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
#news #newsBox .splide__pagination__page {
  background: #d7d7d7;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin: 3px;
  opacity: 0.7;
  padding: 0;
  position: relative;
  -webkit-transition: -webkit-transform 0.2s linear;
  transition: -webkit-transform 0.2s linear;
  transition: transform 0.2s linear;
  transition: transform 0.2s linear, -webkit-transform 0.2s linear;
  width: 10px;
}
#news #newsBox .splide__pagination__page.is-active {
  background: #16234d;
}
#news .splide__arrow--prev,
#news .splide__arrow--next {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
  background-color: rgba(215, 215, 215, 0.7);
  border-radius: 50%;
  border: none;
}
#news .splide__arrow--prev::after,
#news .splide__arrow--next::after {
  width: 0.5rem;
  height: 0.5rem;
  content: "";
  border: solid #16234d;
  border-width: 2px 2px 0 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#news .splide__arrow--prev::after {
  margin-left: 0.2rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
#news .splide__arrow--next::after {
  margin-right: 0.2rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
#news .splide__arrow svg {
  display: none;
}

/* stay
---------------------------------------------- */
#stay .stayTitle {
  position: relative;
}
#stay .stayTitle .titleText {
  width: 50px;
  position: absolute;
  top: -70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #stay .stayTitle .titleText {
    top: -100px;
  }
}
#stay .stayImage01 {
  background: url("../../top/images/stayImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .stayImage01 {
    background: url("../../top/images/stayImage01.jpg") no-repeat center center/cover;
  }
}
#stay .stayImage02 {
  background: url("../../top/images/stayImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .stayImage02 {
    background: url("../../top/images/stayImage02.jpg") no-repeat center center/cover;
  }
}
#stay .stayImage03 {
  background: url("../../top/images/stayImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .stayImage03 {
    background: url("../../top/images/stayImage03.jpg") no-repeat center center/cover;
  }
}
#stay .stayImageWrap {
  position: relative;
  width: 100%;
  color: var(--colorTextSub);
  z-index: 2;
}
@media screen and (min-width: 900px) {
  #stay .stayImageWrap {
    height: 100vh;
    height: 100svh;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
}
#stay .stayImageWrap a {
  height: 100%;
}
#stay .stayImageWrap a:hover {
  opacity: unset;
}
#stay .stayImageWrap .stayImage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#stay .stayImageWrap .stayImage .slick-list, #stay .stayImageWrap .stayImage .slick-track {
  height: 100%;
}
@media screen and (min-width: 900px) {
  #stay .stayImageWrap .stayImage .slick-dots {
    left: clamp(2rem, 0.767rem + 1.44vw, 2.5rem);
    right: unset;
    -webkit-transform: unset;
            transform: unset;
  }
}
#stay .stayImageWrap .stayImageInner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 6rem 20px calc(6em + 70px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 900px) {
  #stay .stayImageWrap .stayImageInner {
    padding: 11rem 20px;
  }
}
#stay .stayImageWrap .stayImageInner h2 {
  width: clamp(11rem, -0.096rem + 13vw, 15.5rem);
  margin: 0 auto;
  margin-bottom: clamp(1.875rem, -0.128rem + 2.35vw, 2.688rem);
}
#stay .stayImageWrap .stayImageInner h2 img {
  width: 100%;
}
#stay .stayImageWrap .stayImageInner p {
  color: var(--colorTextSub);
  padding: 1.125em 0;
  line-height: 1.75;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #stay .stayImageWrap .stayImageInner p {
    max-width: clamp(45rem, 0.617rem + 51.99vw, 63rem);
    font-size: clamp(1rem, 0.6917870036rem + 0.3610108303vw, 1.125rem);
    margin: 0 auto;
  }
}
#stay .villaType {
  overflow: hidden;
}
#stay .roomWrap .roomTitle {
  position: relative;
}
#stay .roomWrap .roomTitle .titleText {
  width: 74px;
  position: absolute;
  top: -70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomTitle .titleText {
    top: -100px;
  }
}
#stay .roomWrap .jou .roomImage01 {
  background: url("../../top/images/jouImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .jou .roomImage01 {
    background: url("../../top/images/jouImage01.jpg") no-repeat center center/cover;
  }
}
#stay .roomWrap .jou .roomImage02 {
  background: url("../../top/images/jouImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .jou .roomImage02 {
    background: url("../../top/images/jouImage02.jpg") no-repeat center center/cover;
  }
}
#stay .roomWrap .jou .roomImage03 {
  background: url("../../top/images/jouImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .jou .roomImage03 {
    background: url("../../top/images/jouImage03.jpg") no-repeat center center/cover;
  }
}
#stay .roomWrap .ryu .roomImage01 {
  background: url("../../top/images/ryuImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .ryu .roomImage01 {
    background: url("../../top/images/ryuImage01.jpg") no-repeat center center/cover;
  }
}
#stay .roomWrap .ryu .roomImage02 {
  background: url("../../top/images/ryuImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .ryu .roomImage02 {
    background: url("../../top/images/ryuImage02.jpg") no-repeat center center/cover;
  }
}
#stay .roomWrap .ryu .roomImage03 {
  background: url("../../top/images/ryuImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .ryu .roomImage03 {
    background: url("../../top/images/ryuImage03.jpg") no-repeat center center/cover;
  }
}
#stay .roomWrap .zen .roomImage01 {
  background: url("../../top/images/zenImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .zen .roomImage01 {
    background: url("../../top/images/zenImage01.jpg") no-repeat center center/cover;
  }
}
#stay .roomWrap .zen .roomImage02 {
  background: url("../../top/images/zenImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .zen .roomImage02 {
    background: url("../../top/images/zenImage02.jpg") no-repeat center center/cover;
  }
}
#stay .roomWrap .ryu .roomImageWrap .roomImageInner p {
  left: 54%;
}
@media screen and (min-width: 590px) {
  #stay .roomWrap .ryu .roomImageWrap .roomImageInner p {
    left: 50%;
  }
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .ryu .roomImageWrap .roomImageInner p {
    left: unset;
  }
}
#stay .roomWrap .roomImageWrap {
  position: relative;
  width: 100%;
  height: 110vw;
  color: var(--colorTextSub);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #stay .roomWrap .roomImageWrap {
    max-height: 472px;
  }
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap {
    max-height: clamp(29.5rem, -0.088rem + 34.66vw, 41.5rem);
    width: 100%;
    margin: 0 auto;
  }
}
#stay .roomWrap .roomImageWrap a {
  display: block;
  width: 100%;
  height: 100%;
}
#stay .roomWrap .roomImageWrap a:hover {
  opacity: unset;
}
#stay .roomWrap .roomImageWrap .roomImage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#stay .roomWrap .roomImageWrap .roomImage .slick-list, #stay .roomWrap .roomImageWrap .roomImage .slick-track {
  height: 100%;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImage .slick-dots {
    bottom: inherit;
    right: clamp(4.25rem, 0.243rem + 4.69vw, 5.875rem);
    top: clamp(1.563rem, 1.388rem + 0.72vw, 2rem);
    -webkit-transform: unset;
            transform: unset;
  }
}
#stay .roomWrap .roomImageWrap .roomImage .captionText {
  color: var(--colorTextSub);
  font-size: 0.875rem;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImage .captionText {
    font-size: clamp(1.125rem, 0.046rem + 1.26vw, 1.563rem);
    bottom: clamp(1.5rem, 0.421rem + 1.26vw, 1.938rem);
    left: clamp(2rem, 0.767rem + 1.44vw, 2.5rem);
  }
}
#stay .roomWrap .roomImageWrap .roomImageInner {
  position: absolute;
  height: unset;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImageInner {
    width: clamp(28.25rem, 0.049rem + 33.03vw, 39.688rem);
    margin-left: auto;
    height: unset;
    top: 42%;
  }
}
#stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .villaTitleWrap {
  position: absolute;
  top: 43%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: clamp(7.5rem, -1.103rem + 35.29vw, 18.75rem);
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .villaTitleWrap {
    width: clamp(11rem, -0.096rem + 13vw, 15.5rem);
    position: relative;
    top: unset;
    left: unset;
    -webkit-transform: unset;
            transform: unset;
  }
}
#stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .villaTitleWrap .villaTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .villaTitleWrap .villaTitle {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
}
#stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .villaTitleWrap .villaTitle img {
  width: 100%;
}
#stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .villaTitleWrap .roomType {
  color: var(--colorTextSub);
  position: absolute;
  right: 0;
  top: -2em;
  letter-spacing: 0.4rem;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .villaTitleWrap .roomType {
    top: -3em;
  }
}
#stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: var(--colorTextSub);
  font-size: var(--size14px);
  letter-spacing: 0.1em;
  position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  padding-right: 6px;
  width: 30%;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .link {
    font-size: clamp(0.938rem, 0.013rem + 1.08vw, 1.313rem);
    padding-right: clamp(1.25rem, -0.291rem + 1.81vw, 1.875rem);
    position: relative;
    padding-right: unset;
    right: 20px;
  }
}
#stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .link::after {
  content: "";
  height: 1px;
  width: calc((100vw - 150px) / 5);
  background-color: #ffffff;
  position: absolute;
  right: 0;
  bottom: -8px;
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImageInner .titleLinkWrap .link::after {
    width: calc((100vw - 150px) / 10);
    bottom: 18px;
  }
}
#stay .roomWrap .roomImageWrap .roomImageInner p {
  position: absolute;
  left: 60%;
  bottom: 32%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  color: var(--colorTextSub);
  padding: 0 40px;
  font-size: var(--size16px);
  text-align: left;
  letter-spacing: 0.1em;
  font-size: var(--size14px);
  line-height: 1.6;
}
@media screen and (min-width: 590px) {
  #stay .roomWrap .roomImageWrap .roomImageInner p {
    left: 50%;
  }
}
@media screen and (min-width: 900px) {
  #stay .roomWrap .roomImageWrap .roomImageInner p {
    padding: 32px 0;
    margin-right: auto;
    font-size: clamp(1rem, 0.075rem + 1.08vw, 1.375rem);
    line-height: 2.125;
    width: auto;
    left: unset;
    bottom: unset;
    -webkit-transform: unset;
            transform: unset;
    font-size: var(--size16px);
  }
}

/* bath
---------------------------------------------- */
#bath .bathTitle {
  position: relative;
}
#bath a:hover {
  opacity: unset;
}
#bath .bathInner {
  position: relative;
}
#bath .bathInner .bathImageWrap {
  width: 100%;
  height: 100svh;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  #bath .bathInner .bathImageWrap {
    height: 80svh;
  }
}
.en #bath .bathInner .bathImageWrap {
  height: 130svh;
}
@media screen and (min-width: 590px) {
  .en #bath .bathInner .bathImageWrap {
    height: 80svh;
  }
}
#bath .bathInner .bathImageWrap .slick-dots {
  left: 40px;
  right: unset;
  -webkit-transform: unset;
          transform: unset;
}
@media screen and (min-width: 900px) {
  #bath .bathInner .bathImageWrap .slick-dots {
    left: clamp(2.5rem, 0.343rem + 2.53vw, 3.375rem);
  }
}
#bath .bathInner .bathImageWrap .bathImage01 {
  background: url("../../top/images/bathBG01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #bath .bathInner .bathImageWrap .bathImage01 {
    background: url("../../top/images/bathBG01.jpg") no-repeat center center/cover;
  }
}
#bath .bathInner .bathImageWrap .bathImage02 {
  background: url("../../top/images/bathBG02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #bath .bathInner .bathImageWrap .bathImage02 {
    background: url("../../top/images/bathBG02.jpg") no-repeat center center/cover;
  }
}
#bath .bathInner .bathImageWrap .bathImage03 {
  background: url("../../top/images/bathBG03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #bath .bathInner .bathImageWrap .bathImage03 {
    background: url("../../top/images/bathBG03.jpg") no-repeat center center/cover;
  }
}
#bath .link {
  position: absolute;
  bottom: clamp(4.375rem, -0.248rem + 5.42vw, 6.25rem);
  z-index: 10;
  color: var(--colorTextSub);
  font-size: clamp(0.938rem, 0.013rem + 1.08vw, 1.313rem);
  padding-right: clamp(1.25rem, -0.291rem + 1.81vw, 1.875rem);
  padding-bottom: 1em;
  letter-spacing: 0.1em;
  line-height: 1;
  width: clamp(6.875rem, 4.963rem + 7.84vw, 9.375rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow: hidden;
  right: 0;
  width: 40%;
}
@media screen and (min-width: 900px) {
  #bath .link {
    width: clamp(14.688rem, -0.107rem + 17.33vw, 20.688rem);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    right: 0;
  }
}
#bath .link::after {
  content: "";
  height: 1px;
  background-color: #ffffff;
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(6.875rem, 4.963rem + 7.84vw, 9.375rem);
}
@media screen and (min-width: 900px) {
  #bath .link::after {
    width: clamp(14.688rem, -0.107rem + 17.33vw, 20.688rem);
  }
}
#bath .sectionInner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
}
#bath .sectionInner .textBox {
  margin: 0 auto;
  width: 100%;
  max-width: clamp(68.75rem, 16.354rem + 61.37vw, 90rem);
}
#bath .sectionInner .textBox .sectionTitle {
  color: var(--colorTextSub);
  line-height: 1.75;
  letter-spacing: 0.2em;
  font-family: var(--fontJP);
  font-weight: 400;
  text-align: center;
  font-size: clamp(1.875rem, 1.575rem + 1.23vw, 2.625rem);
  margin-bottom: clamp(2.313rem, 1.463rem + 3.48vw, 4.438rem);
}
@media screen and (min-width: 1366px) {
  #bath .sectionInner .textBox .sectionTitle {
    font-size: clamp(2.625rem, -0.149rem + 3.25vw, 3.75rem);
    margin-bottom: clamp(4.438rem, 0.277rem + 4.87vw, 6.125rem);
  }
}
#bath .sectionInner .textBox .text {
  font-size: clamp(1rem, 0.384rem + 0.72vw, 1.25rem);
  letter-spacing: 0.2em;
  line-height: 2.1;
  color: var(--colorTextSub);
  font-weight: 600;
}
@media screen and (min-width: 900px) {
  #bath .sectionInner .textBox .text {
    text-align: center;
  }
}

/* eat
---------------------------------------------- */
#eat {
  color: #ffffff;
}
#eat .eatTitle {
  position: relative;
}
#eat .eatTitle .titleText {
  width: 50px;
  position: absolute;
  top: -70px;
  left: calc(50% - 25px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #eat .eatTitle .titleText {
    top: -100px;
  }
}
#eat .link {
  position: absolute;
  bottom: clamp(4.375rem, -0.248rem + 5.42vw, 6.25rem);
  z-index: 10;
  color: var(--colorTextSub);
  font-size: clamp(0.938rem, 0.013rem + 1.08vw, 1.313rem);
  padding-right: clamp(1.25rem, -0.291rem + 1.81vw, 1.875rem);
  padding-bottom: 1em;
  letter-spacing: 0.1em;
  line-height: 1;
  width: clamp(6.875rem, 4.963rem + 7.84vw, 9.375rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow: hidden;
  right: 0;
  width: 40%;
}
@media screen and (min-width: 900px) {
  #eat .link {
    width: clamp(14.688rem, -0.107rem + 17.33vw, 20.688rem);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    right: 0;
  }
}
#eat .link::after {
  content: "";
  height: 1px;
  background-color: #ffffff;
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(6.875rem, 4.963rem + 7.84vw, 9.375rem);
}
@media screen and (min-width: 900px) {
  #eat .link::after {
    width: clamp(14.688rem, -0.107rem + 17.33vw, 20.688rem);
  }
}
#eat .eatImage01 {
  background: url("../../top/images/eatImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .eatImage01 {
    background: url("../../top/images/eatImage01.jpg") no-repeat center center/cover;
  }
}
#eat .eatImage02 {
  background: url("../../top/images/eatImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .eatImage02 {
    background: url("../../top/images/eatImage02.jpg") no-repeat center center/cover;
  }
}
#eat .eatImage03 {
  background: url("../../top/images/eatImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .eatImage03 {
    background: url("../../top/images/eatImage03.jpg") no-repeat center center/cover;
  }
}
#eat .eatImage04 {
  background: url("../../top/images/eatImage04_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .eatImage04 {
    background: url("../../top/images/eatImage04.jpg") no-repeat center center/cover;
  }
}
#eat .eatImageWrap {
  position: relative;
  width: 100%;
  color: var(--colorTextSub);
  z-index: 2;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #eat .eatImageWrap {
    max-height: 844px;
  }
}
@media screen and (min-width: 900px) {
  #eat .eatImageWrap {
    height: 100vh;
    height: 100svh;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
}
#eat .eatImageWrap a {
  display: block;
  height: 100%;
}
#eat .eatImageWrap a:hover {
  opacity: unset;
}
#eat .eatImageWrap .eatImage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#eat .eatImageWrap .eatImageInner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 6rem 20px calc(6em + 70px);
}
@media screen and (min-width: 900px) {
  #eat .eatImageWrap .eatImageInner {
    padding: clamp(14.063rem, 0.655rem + 15.7vw, 19.5rem) 20px 0;
  }
}
#eat .eatImageWrap .eatImageInner h2 {
  max-width: clamp(7.5rem, 4.776rem + 11.18vw, 11.063rem);
  margin: 0 auto;
}
@media screen and (min-width: 900px) {
  #eat .eatImageWrap .eatImageInner h2 {
    max-width: clamp(11.063rem, 0.121rem + 12.82vw, 15.5rem);
  }
}
#eat .eatImageWrap .eatImageInner h2 img {
  width: 100%;
}
#eat .eatImageWrap .eatImageInner p {
  font-size: var(--size16px);
  color: var(--colorTextSub);
  padding: 1.125em 0;
  line-height: 2;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #eat .eatImageWrap .eatImageInner p {
    width: clamp(32rem, -58.615rem + 106.14vw, 68.75rem);
    margin: 0 auto;
    font-size: clamp(1rem, 0.075rem + 1.08vw, 1.375rem);
  }
}
#eat .eatImageWrap .eatImageInner::before {
  display: block;
  content: "";
  background: radial-gradient(#000000, transparent);
  border-radius: 50%;
  -webkit-filter: blur(50px);
          filter: blur(50px);
  width: 82%;
  max-width: 526px;
  height: 57.9%;
  max-height: 328px;
  position: absolute;
  top: 8em;
  left: 50%;
  right: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
  opacity: 0.3;
}
#eat .eatImageWrap .eatImageInner .timeSchedule {
  max-width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  color: var(--colorTextSub);
}
#eat .eatImageWrap .eatImageInner .timeSchedule::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--colorTextSub);
  position: absolute;
  left: 3.6em;
  top: 0;
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  line-height: 2;
  position: relative;
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl.time01 {
  top: 15.7vh;
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl.time02 {
  top: 27.8vh;
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl.time03 {
  top: 39vh;
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl.time04 {
  top: 45.5vh;
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl.time05 {
  top: 66.8vh;
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl dt {
  width: 3em;
  margin-right: 2em;
  text-align: right;
  position: relative;
  font-family: var(--fontEN);
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl dt::after {
  content: "";
  display: block;
  width: 11px;
  height: 1px;
  background-color: var(--colorTextSub);
  position: absolute;
  right: -1em;
  top: 1em;
}
#eat .eatImageWrap .eatImageInner .timeSchedule dl dd {
  font-family: var(-fontJP);
}
#eat .eatImageWrap .restaurantLink {
  width: 40%;
  position: absolute;
  right: 0;
  bottom: 120px;
  z-index: 3;
  overflow: hidden;
}
@media screen and (min-width: 900px) {
  #eat .eatImageWrap .restaurantLink {
    text-align: right;
    padding-right: 40px;
    bottom: inherit;
    top: calc(clamp(14.063rem, 0.655rem + 15.7vw, 19.5rem) + clamp(5.875rem, 0.019rem + 6.86vw, 8.25rem) / 2 - 0.5em);
  }
}
#eat .eatImageWrap .restaurantLink span {
  line-height: 2.5;
}
#eat .eatImageWrap .restaurantLink .rightLine::after {
  margin-left: 80px;
}
@media screen and (min-width: 900px) {
  #eat .eatImageWrap .restaurantLink .rightLine::after {
    margin-left: unset;
  }
}
@media screen and (min-width: 900px) {
  #eat .eatImageWrap .restaurantLink .rightLine::after {
    top: unset;
    bottom: 0;
    right: 0;
    width: calc(50vw - (clamp(5.875rem, 0.019rem + 6.86vw, 8.25rem) + 3em));
  }
}
#eat .restaurantInner {
  position: relative;
}
#eat .restaurantInner .restaurantTitle {
  position: relative;
}
#eat .restaurantImageWrap {
  position: relative;
  width: 100%;
  color: var(--colorTextSub);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 900px) {
  #eat .restaurantImageWrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
}
#eat .restaurantImageWrap a {
  display: block;
  width: 100%;
}
#eat .restaurantImageWrap a:hover {
  opacity: unset;
}
#eat .restaurantImageWrap .typeLogoImageWrap {
  position: absolute;
  z-index: 10;
  left: 15px;
  bottom: 98px;
}
@media screen and (min-width: 900px) {
  #eat .restaurantImageWrap .typeLogoImageWrap {
    left: clamp(3.125rem, 1.276rem + 2.17vw, 3.875rem);
    bottom: clamp(3.125rem, 1.276rem + 2.17vw, 3.875rem);
    width: clamp(13.25rem, -0.003rem + 15.52vw, 18.625rem);
  }
}
#eat .restaurantImageWrap .typeLogoImageWrap img {
  width: 100%;
}
#eat .restaurantImageWrap .dinnerLogoImageWrap {
  width: 130px;
}
@media screen and (min-width: 900px) {
  #eat .restaurantImageWrap .dinnerLogoImageWrap {
    width: clamp(13.25rem, -0.003rem + 15.52vw, 18.625rem);
  }
}
#eat .restaurantImageWrap .barLogoImageWrap {
  width: 150px;
}
@media screen and (min-width: 900px) {
  #eat .restaurantImageWrap .barLogoImageWrap {
    width: clamp(14.688rem, -0.107rem + 17.33vw, 20.688rem);
  }
}
#eat .restaurantImageWrap .breakFastLogoImageWrap {
  width: 150px;
}
@media screen and (min-width: 900px) {
  #eat .restaurantImageWrap .breakFastLogoImageWrap {
    width: clamp(14.688rem, -0.107rem + 17.33vw, 20.688rem);
  }
}
#eat .restaurantImageWrap .restaurantImage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#eat .restaurantImageWrap .restaurantImage .slick-list, #eat .restaurantImageWrap .restaurantImage .slick-track {
  height: 100%;
}
#eat .restaurantImageWrap .restaurantImageInner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 550px;
}
@media screen and (min-width: 900px) {
  #eat .restaurantImageWrap .restaurantImageInner {
    height: clamp(29.438rem, -0.151rem + 34.66vw, 41.438rem);
  }
}
#eat .restaurantImageWrap .restaurantImageInner .restaurantName {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#eat .restaurantImageWrap .restaurantImageInner .restaurantName img {
  width: 100%;
}
#eat .restaurantImageWrap .restaurantImageInner p {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  position: absolute;
  top: clamp(4.375rem, -0.248rem + 5.42vw, 6.25rem);
  right: 27px;
  color: var(--colorTextSub);
  text-align: start;
  height: 64%;
}
@media screen and (min-width: 900px) {
  #eat .restaurantImageWrap .restaurantImageInner p {
    right: clamp(5.625rem, 0.385rem + 6.14vw, 7.75rem);
    font-size: clamp(1rem, 0.075rem + 1.08vw, 1.375rem);
    height: 420px;
  }
}
#eat .slick-dots {
  right: clamp(4.25rem, 0.243rem + 4.69vw, 5.875rem);
  -webkit-transform: unset;
          transform: unset;
}
@media screen and (min-width: 900px) {
  #eat .slick-dots {
    bottom: unset;
    top: clamp(1.875rem, 0.026rem + 2.17vw, 2.625rem);
  }
}
#eat .slick-list, #eat .slick-track {
  height: 100%;
}
#eat .dinnerEn .titleText {
  font-size: 1rem;
  letter-spacing: 0.2em;
}
#eat .dinnerEn .restaurantType {
  bottom: 70px;
  left: 20px;
}
@media screen and (min-width: 590px) {
  #eat .dinnerEn .restaurantType {
    left: inherit;
    bottom: 20px;
    right: 5.5%;
  }
}
#eat .dinnerEn .restaurantImage01 {
  background: url("../../top/images/enImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .dinnerEn .restaurantImage01 {
    background: url("../../top/images/enImage01.jpg") no-repeat center center/cover;
  }
}
#eat .dinnerEn .restaurantImage02 {
  background: url("../../top/images/enImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .dinnerEn .restaurantImage02 {
    background: url("../../top/images/enImage02.jpg") no-repeat center center/cover;
  }
}
#eat .dinnerEn .restaurantImage03 {
  background: url("../../top/images/enImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .dinnerEn .restaurantImage03 {
    background: url("../../top/images/enImage03.jpg") no-repeat center center/cover;
  }
}
#eat .dinnerEn .restaurantImage04 {
  background: url("../../top/images/enImage04_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .dinnerEn .restaurantImage04 {
    background: url("../../top/images/enImage04.jpg") no-repeat center center/cover;
  }
}
#eat .dinnerEn .nameEn {
  width: 100px;
}
@media screen and (min-width: 900px) {
  #eat .dinnerEn .nameEn {
    width: clamp(8.813rem, -0.126rem + 10.47vw, 12.438rem);
  }
}
#eat .dinnerEn .nameEn img {
  margin-bottom: 100px;
}
#eat .cadre .restaurantType {
  bottom: 70px;
  left: 20px;
}
@media screen and (min-width: 590px) {
  #eat .cadre .restaurantType {
    left: inherit;
    bottom: 10px;
    right: 5.5%;
  }
}
#eat .cadre .nameCadre {
  width: 218px;
}
@media screen and (min-width: 900px) {
  #eat .cadre .nameCadre {
    width: clamp(26.813rem, -0.002rem + 31.41vw, 37.688rem);
  }
}
#eat .cadre .restaurantImage01 {
  background: url("../../top/images/cadreImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .cadre .restaurantImage01 {
    background: url("../../top/images/cadreImage01.jpg") no-repeat center center/cover;
  }
}
#eat .cadre .restaurantImage02 {
  background: url("../../top/images/cadreImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .cadre .restaurantImage02 {
    background: url("../../top/images/cadreImage02.jpg") no-repeat center center/cover;
  }
}
#eat .cadre .restaurantImage03 {
  background: url("../../top/images/cadreImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .cadre .restaurantImage03 {
    background: url("../../top/images/cadreImage03.jpg") no-repeat center center/cover;
  }
}
#eat .cadre .restaurantImage04 {
  background: url("../../top/images/cadreImage04_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .cadre .restaurantImage04 {
    background: url("../../top/images/cadreImage04.jpg") no-repeat center center/cover;
  }
}
#eat .toki .restaurantType {
  bottom: 70px;
  left: 20px;
}
@media screen and (min-width: 590px) {
  #eat .toki .restaurantType {
    left: inherit;
    bottom: 10px;
    right: 5.5%;
  }
}
#eat .toki .restaurantImage01 {
  background: url("../../top/images/tokiImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .toki .restaurantImage01 {
    background: url("../../top/images/tokiImage01.jpg") no-repeat center center/cover;
  }
}
#eat .toki .restaurantImage02 {
  background: url("../../top/images/tokiImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .toki .restaurantImage02 {
    background: url("../../top/images/tokiImage02.jpg") no-repeat center center/cover;
  }
}
#eat .toki .restaurantImage03 {
  background: url("../../top/images/tokiImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .toki .restaurantImage03 {
    background: url("../../top/images/tokiImage03.jpg") no-repeat center center/cover;
  }
}
#eat .toki .restaurantImage04 {
  background: url("../../top/images/tokiImage04_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .toki .restaurantImage04 {
    background: url("../../top/images/tokiImage04.jpg") no-repeat center center/cover;
  }
}
#eat .toki .restaurantImageInner::before {
  display: block;
  content: "";
  background: radial-gradient(#000000, #000000);
  border-radius: 50%;
  -webkit-filter: blur(50px);
          filter: blur(50px);
  width: 82%;
  max-width: 648px;
  height: 100%;
  max-height: 336px;
  position: absolute;
  top: 2em;
  left: 50%;
  right: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
  opacity: 0.3;
}
@media screen and (min-width: 900px) {
  #eat .toki .restaurantImageInner::before {
    top: 3em;
  }
}
#eat .toki .nameToki {
  width: 130px;
}
@media screen and (min-width: 900px) {
  #eat .toki .nameToki {
    width: clamp(9.375rem, -6.036rem + 18.05vw, 15.625rem);
  }
}
#eat .toki .nameToki img {
  margin-bottom: 100px;
}
#eat .acoya .restaurantType {
  bottom: 70px;
  left: 20px;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #eat .acoya .restaurantType {
    left: inherit;
    bottom: 10px;
    right: 5.5%;
  }
}
@media screen and (min-width: 900px) {
  #eat .acoya .restaurantType {
    top: 10px;
    bottom: inherit;
    left: clamp(8.313rem, -8.177rem + 19.31vw, 15rem);
  }
}
#eat .acoya .restaurantImage01 {
  background: url("../../top/images/acoyaImage01_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .acoya .restaurantImage01 {
    background: url("../../top/images/acoyaImage01.jpg") no-repeat center center/cover;
  }
}
#eat .acoya .restaurantImage02 {
  background: url("../../top/images/acoyaImage02_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .acoya .restaurantImage02 {
    background: url("../../top/images/acoyaImage02.jpg") no-repeat center center/cover;
  }
}
#eat .acoya .restaurantImage03 {
  background: url("../../top/images/acoyaImage03_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .acoya .restaurantImage03 {
    background: url("../../top/images/acoyaImage03.jpg") no-repeat center center/cover;
  }
}
#eat .acoya .restaurantImage04 {
  background: url("../../top/images/acoyaImage04_sp.jpg") no-repeat center center/cover;
}
@media screen and (min-width: 900px) {
  #eat .acoya .restaurantImage04 {
    background: url("../../top/images/acoyaImage04.jpg") no-repeat center center/cover;
  }
}
@media screen and (min-width: 900px) {
  #eat .acoya .restaurantImageInner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    padding: 8% 0 10%;
  }
}
#eat .acoya .nameAcoya {
  width: 160px;
}
@media screen and (min-width: 900px) {
  #eat .acoya .nameAcoya {
    width: clamp(13.25rem, -0.003rem + 15.52vw, 18.625rem);
  }
}
#eat .acoya .restaurantTitle .titleText {
  width: 250px;
}
@media screen and (min-width: 900px) {
  #eat .acoya .restaurantTitle .titleText {
    width: unset;
  }
}

/* access
---------------------------------------------- */
#access {
  background-color: #1A1A1A;
  padding-bottom: 160px;
  position: relative;
}
@media screen and (min-width: 900px) {
  #access {
    padding-bottom: clamp(11.25rem, -2.62rem + 16.25vw, 16.875rem);
  }
}
#access .accessTitle {
  position: relative;
}
#access .accessTitle .titleText {
  width: 100px;
  position: absolute;
  top: -70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #access .accessTitle .titleText {
    top: -100px;
  }
}
#access .accessWrapInner {
  padding: 56px 20px;
  text-align: center;
  color: var(--colorTextSub);
}
@media screen and (min-width: 900px) {
  #access .accessWrapInner {
    font-size: 1.125rem;
  }
}
#access .accessWrapInner p {
  text-align: center;
  font-size: 0.9375em;
}
@media screen and (min-width: 900px) {
  #access .accessWrapInner p {
    font-size: 0.88em;
  }
}
#access .accessWrapInner p:not(first-of-type) {
  margin-top: 1em;
}
#access .accessWrapInner p:first-of-type {
  margin-top: 2em;
}
#access .gmap {
  width: 100%;
  height: 80vw;
}
@media screen and (min-width: 900px) {
  #access .gmap {
    height: clamp(23.5rem, 0.384rem + 27.08vw, 32.875rem);
  }
}
#access .gmap iframe {
  height: 100%;
  width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
#access .transitionLink.mapLink {
  top: inherit;
  bottom: 80px;
  overflow: hidden;
}
@media screen and (min-width: 590px) {
  #access .transitionLink.mapLink {
    bottom: 6%;
  }
}
@media screen and (min-width: 900px) {
  #access .transitionLink.mapLink {
    bottom: 10%;
  }
}

/* calender
---------------------------------------------- */
#calender {
  background-color: #100B0D;
}
#calender .calenderTitle {
  position: relative;
}
#calender .calenderTitle .titleText {
  width: 100px;
  position: absolute;
  top: -70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #calender .calenderTitle .titleText {
    top: -100px;
  }
}
#calender .reserveLink {
  bottom: 85px;
  overflow: hidden;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding-right: unset;
}
@media screen and (min-width: 900px) {
  #calender .reserveLink {
    bottom: inherit;
    padding-right: calc(clamp(11.188rem, -3.647rem + 17.38vw, 17.313rem) - 7.25em);
    left: unset;
    -webkit-transform: unset;
            transform: unset;
    display: block;
    width: unset;
  }
}
#calender .reserveLink .rightLine::after {
  margin-left: 60%;
}
@media screen and (min-width: 900px) {
  #calender .reserveLink .rightLine::after {
    top: inherit;
    bottom: 0;
    margin-left: unset;
  }
}
#calender .reserveLink a span {
  line-height: 2.5;
}

/* gallery
---------------------------------------------- */
#gallery {
  background-color: #1A1A1A;
  position: relative;
  /* swiper */
}
#gallery .galleryTitle {
  position: relative;
}
#gallery .galleryTitle .titleText {
  width: 100px;
  position: absolute;
  top: -70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #gallery .galleryTitle .titleText {
    top: -100px;
  }
}
#gallery .galleryWrapInner {
  margin: 0 20px;
}
#gallery .galleryWrapInner .swiper-container {
  width: 100%;
  max-width: 850px;
  padding: 120px 0 168px;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (min-width: 900px) {
  #gallery .galleryWrapInner .swiper-container {
    width: 60%;
    padding: clamp(10.5rem, -0.596rem + 13vw, 15rem) 20px;
  }
}
#gallery .galleryWrapInner .swiper-container .swiper-slide {
  height: 253px;
  width: 190px;
}
#gallery .galleryWrapInner .swiper-container .swiper-slide img {
  height: 253px;
  width: 190px;
  -o-object-fit: cover;
     object-fit: cover;
}
#gallery .galleryWrapInner .swiper-container .slide-invisible {
  opacity: 0;
}
#gallery .galleryLink {
  overflow: hidden;
  bottom: 16%;
}
@media screen and (min-width: 900px) {
  #gallery .galleryLink {
    bottom: unset;
    line-height: unset;
  }
}
#gallery .galleryLink .rightLineAni {
  line-height: 2.5;
}
#gallery .galleryLink .rightLineAni::after {
  margin-left: 64px;
}
@media screen and (min-width: 900px) {
  #gallery .galleryLink .rightLineAni::after {
    margin-left: unset;
  }
}
@media screen and (min-width: 900px) and (max-width: 1100px) {
  #gallery .galleryLink {
    padding-right: calc(clamp(11.188rem, -3.647rem + 17.38vw, 17.313rem) - 4em);
  }
  #gallery .galleryLink .rightLine::after {
    top: inherit;
    bottom: 0;
  }
}

/* 英語版ページの微調整
---------------------------------------------- */
.index.englishPage #calender .reserveLink a span {
  line-height: 1.5;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px) {
  #news #newsBox .splide {
    width: 100%;
  }
  #news #newsBox .splide__arrow--prev,
  #news #newsBox .splide__arrow--next {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 80px;
    margin: auto;
  }
  #news #newsBox .splideWrapper {
    padding: 0 5%;
  }
}
/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px) {
  #news #newsBox .splideWrapper {
    width: 65vw;
  }
  #news #newsBox .splide__track {
    overflow: hidden;
  }
  #news #newsBox .splide__arrow--prev,
  #news #newsBox .splide__arrow--next {
    position: absolute;
    z-index: 10;
    top: 0;
    margin: auto;
  }
  #news #newsBox .splide__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #news #newsBox .splide__list.center {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-right: 0 !important;
  }
  #news #newsBox .splide__track.margin {
    margin-left: 146px !important;
  }
  #news #newsBox .splide__arrow--prev {
    right: calc(100% + 2.4rem);
  }
  #news #newsBox .splide__arrow--next {
    left: calc(100% + 2.4rem);
  }
  #news #newsBox .splide__pagination {
    position: absolute;
    left: 0;
    top: calc(100% + 30px);
    right: 0;
  }
  #news .splide__arrow--prev,
  #news .splide__arrow--next {
    width: 30px;
    height: 30px;
  }
  #news .splide__arrow--prev::after,
  #news .splide__arrow--next::after {
    width: 8px;
    height: 8px;
  }
  #news .splide__arrow--prev::after {
    margin-left: 0.4rem;
  }
  #news .splide__arrow--next::after {
    margin-right: 0.4rem;
  }
}/*# sourceMappingURL=index_en.css.map */