@charset "UTF-8";

/* =============================================================================

Top CSS

・トップページ用CSS「.top-×××」

上記はここに記述する

============================================================================= */


/* ヘッダー（TOPのみのスタイル）
----------------------------------------------------------------------------- */
.g-header {
  @media (width > 640px) {
    background-color: rgba(28, 20, 20, 0.5) !important;
  }
}



/* キービジュアル
----------------------------------------------------------------------------- */
.top-kv {
  display:flex;
  justify-content: center;
  align-items: center;
  height:100lvh;
  overflow:hidden;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    margin-top:var(--header-height);
    height:calc(100svh - var(--header-height) - 8.2rem);
  }

  .kv-heading {
    @media (width <= 640px) {
      margin-top:calc((var(--header-height) + var(--topicpath-height)) * -.5);
    }
  }
  .kv-desc {
    font-size:1.8rem;
    line-height:2.1;
    letter-spacing: .16em;
    position:absolute;
    bottom:8.0rem;
    @media (width <= 640px) {
      font-size:1.6rem;
      bottom:5.6rem;
    }
  }

  .m-abs_bg {
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}


/* トピックス
----------------------------------------------------------------------------- */
.l-topics-A {
  .top-topics-header {
    @media (width > 640px) {
      display:flex;
      justify-content: space-between;
      align-items: baseline;
      margin-inline:auto;
      width:126.0rem;
    }
    .l-heading-A {
      @media (width <= 640px) {
        margin-bottom:2.4rem;
      }
      .p-tg-en_heading-B {
        @media (width <= 640px) {
          font-size:4.0rem;
        }
      }
    }
    .tab-buttons {
      display:flex;
      font-size:1.6rem;
      line-height:1.4;
      color:var(--cc-gray_text-A);
      @media (width > 640px) {
        gap:4.0rem;
      }
      @media (width <= 640px) {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.8rem 2rem;
        margin-bottom:3.6rem;
        font-size:1.5rem;
      }
      .js-tab-button {
        transition-property: color;
        transition-duration: var(--duration-hover-A);
        position:relative;
        &[aria-expanded="false"] {
          color:#B6B6B6;
          &::after {
            transform:scaleX(0);
          }
        }
        @media (hover:hover) {
          &:hover {
            color:var(--cc-gray_text-A);
          }
        }
        &::after {
          content:"";
          width:100%;
          border-bottom:1px solid var(--cc-gray_text-A);
          position:absolute;
          bottom:0;
          left:0;
          transition-property: transform;
          transition-duration: var(--duration-hover-A);
        }
      }
    }
  }
  .l-heading-A {
    .p-tg-en_heading-B {
    }
  }
}



/* コンセプト
----------------------------------------------------------------------------- */
.top-concept {
  clip-path: inset(0px);
  padding: 0;

  .inner {
    @media (width > 640px) {
      padding-bottom: 50vh;
    }
    @media (width <= 640px) {
      position: relative;
      padding-top: 150vh;
      padding-bottom: 100vh;
    }
  }
  .m-abs_bg_thumb {
    position: absolute;
    overflow: hidden;
    z-index: 100;
    cursor: pointer;
    @media (width > 640px) {
      bottom: 3.2rem;
      left: 3.2rem;
      width: 16.8rem;
      height: 9.4rem;
    }
    @media (width <= 640px) {
      bottom: 15.5rem;
      right: 1.5rem;
      width: 11.2rem;
      height: 6.4rem;
    }
    &.is-visible {
      position: fixed;
    }
    picture {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .concept-header {
    @media (width > 640px) {
      position: sticky;
      top:20.0rem;
    }
    .header-subheading {
      margin-bottom:3.2rem;
      font-size:1.6rem;
      line-height:1;
      letter-spacing: .1em;
      @media (width <= 640px) {
        margin-bottom:2.4rem;
        font-size:1.4rem;
      }
    }
    .header-heading {
      @media (width <= 640px) {
        margin-bottom:4.8rem;
        font-size:1.8rem;
        line-height:2;
        letter-spacing: .2em;
      }
    }
  }
  .concept-text {
    @media (width > 640px) {
      position: relative;
      font-size:1.6rem;
      padding-top: 200vh;
      padding-left: 41rem;
      left: 10rem;
    }
    .text-desc + .text-desc {
      margin-top:1lh;
    }
    .l-button-A {
      margin-top:6.0rem;
      @media (width <= 640px) {
        margin-top:4.0rem;
      }
    }
  }
  .m-abs_bg02 {
    position: sticky;
    left: 0;
    top: var(--header-height);
    @media (width > 640px) {
      height: calc(100dvh - var(--header-height));
    }
    @media (width <= 640px) {
      height: calc(100dvh - (var(--header-height) + 8.2rem + env(safe-area-inset-bottom)));
    }
    .focus-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .black {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.4);
    }
  }
  .m-abs_bg {
    position: sticky;
    left: 0;
    top: var(--header-height);
    height: 0;
    .m-abs_bg_in {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      @media (width > 640px) {
        height: calc(100dvh - var(--header-height));
      }
      @media (width <= 640px) {
        height: calc(100dvh - (var(--header-height) + 8.2rem + env(safe-area-inset-bottom)));
      }
    }
    .m-abs_bg_pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .black {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color:rgba(0,0,0,.4);
        z-index: 5;
        pointer-events: none;
      }
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* 英語のみ */
html[lang="en"] .top-concept .concept-header {
  @media (width > 640px) {
    width: 42rem;
  }
}


/* ループ写真
----------------------------------------------------------------------------- */
.top-interlude {
  position:relative;

  .interlude-heading {
    margin:auto;
    width:fit-content;
    height:fit-content;
    font-size:8.0rem;
    font-weight:400;
    line-height:1;
    letter-spacing: .07em;
    text-align: center;
    color:var(--cc-gray_line-A);
    position:absolute;
    inset:0;
    z-index: 10;
    @media (width <= 640px) {
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap:.8rem;
    }
    .sub {
      @media (width <= 640px) {
        font-size:2.0rem;
      }
    }
    .main {
      @media (width <= 640px) {
        font-size:4.8rem;
      }
    }
  }
  .js-infiniteloop {
    --loop-duration: 30s;
    pointer-events: none;
    @media (width <= 640px) {
      --loop-duration: 28s;
    }
    .looitem {
      padding-right:10.4rem;
      @media (width <= 640px) {
        padding-right:4.0rem;
      }
    }
  }
}



/* 宿泊
----------------------------------------------------------------------------- */
.top-stay {
  .stay-header {
    height:150lvh;

    > .inner {
      display:flex;
      justify-content: center;
      align-items: center;
      position:relative;
      height:100lvh;
      position:sticky;
      top:0;

      @media (width > 640px) {
        margin-inline:var(--body-pd);
      }
      @media (width <= 640px) {
        height:calc(100lvh - (8.2rem + env(safe-area-inset-bottom)))
      }
    }
    .header-text {
      margin-top:calc(var(--header-height) * -1);
      position:absolute;
      z-index: 1;
      .l-heading-A {
        @media (width <= 640px) {
          margin-bottom:3.2rem;
        }
      }
      .l-button-A {
        margin-top:1.6rem;
      }
    }
    .header-bg {
      clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
      position:absolute;
      inset:0;
      pointer-events: none;
    }
    .top_js-stay-bg {
      overflow:visible;
      height:100%;
      :is(.splide__track,.splide__list) {
        height:100%;
      }
      .splide__track {
        margin-bottom:-100lvh;
        position:sticky;
        top:var(--header-height);
        @media (width > 640px) {
          height: calc(100lvh - var(--header-height));
        }
        @media (width <= 640px) {
          height: calc(100lvh - (var(--header-height) + 8.2rem + env(safe-area-inset-bottom)));
        }
      }
      .splide__slide {
        overflow:hidden;
        img {
          --scale:calc(var(--progress) * -.2);
          transform:scale(calc(1.2 + var(--scale)));
        }
      }
      .js-carousel-count-A {
        display:grid;
        width:fit-content;
        position:absolute;
        bottom:5.2rem;
        z-index: 100;
        @media (width > 640px) {
          margin-inline:auto;
          inset-inline:0 -100.0rem;
        }
        @media (width <= 640px) {
          margin-inline:auto;
          inset-inline:0;
          bottom:10.0rem;
        }

        .splide__pagination {
          grid-row:2/3;
          width:100%;
        }
      }
    }
    .top_js-stay-thumbnail {
      position:absolute;
      bottom:3.2rem;
      @media (width > 640px) {
        width:71.4rem;
      }
      @media (width <= 640px) {
        padding-inline:var(--pi-sp-30) 9.6rem;
        width:100%;
        left:0;
        bottom:2.0rem;
      }
      .splide__track {
        @media (width <= 640px) {
          overflow:visible;
        }
      }
      .splide__slide {
        position:relative;
        cursor: pointer;

        &::before {
          content:"";
          border:1px solid var(--base-color);
          position:absolute;
          inset:0;
          opacity:0;
          transition-property: opacity;
          transition-duration: var(--duration-hover-A);
          pointer-events:none;
        }
        &.is-active {
          &::before {
            opacity:1;
          }
        }

        img {
          height:auto;
          aspect-ratio: 16/9;
        }
      }
    }
  }
}



/* ウエディング
----------------------------------------------------------------------------- */
.top-wedding {
  @media (width > 640px) {
    padding-top:var(--body-pd);
  }
  @media (width <= 640px) {
  }
  .wedding-kv {
    --over-mb:16.0rem;
    display:flex;
    justify-content: center;
    align-items: center;
    height:calc(100lvh + var(--over-mb));
    padding-bottom:var(--over-mb);
    margin-bottom:calc(var(--over-mb) * -1);
    @media (width > 640px) {
      margin-inline:var(--body-pd);
    }
    @media (width <= 640px) {
      --over-mb:14.4rem;
    }
    .l-heading-A {
      margin-bottom:var(--over-mb);
      position:sticky;
      top:50%;
    }
    .m-abs_bg {
    }
  }
  .wedding-contents {
    position:relative;
    z-index: 1;
    @media (width > 640px) {
      display:grid;
      grid-template-columns:1fr 60.0rem;
      grid-auto-flow: column;
      padding-left:12.0rem;
    }
    @media (width <= 640px) {
    }
  }
  .contents-img {
    @media (width > 640px) {
      grid-column:2/3;
    }
    @media (width <= 640px) {
      width:21.6rem;
      margin-inline:auto var(--pi-sp-30);
    }
  }
  .contents-text {
    @media (width > 640px) {
      grid-column:1/2;
      margin-top:31.4rem;
    }
    @media (width <= 640px) {
    }
  }
}


/* 宴会・MICE
----------------------------------------------------------------------------- */
.top-banquet {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .inner {
    @media (width > 640px) {
      width:calc(50% + 68.0rem);
      display:grid;
      grid-template-rows:auto 1fr;
      grid-template-columns:1fr 41.6rem;
      column-gap:12.8rem;
    }
  }
  .l-heading-A {
    @media (width > 640px) {
      grid-row:1/2;
      grid-column:2/3;
    }
    @media (width <= 640px) {
    }
  }
  .banquet-carousel {
    @media (width > 640px) {
      grid-row:1/3;
      grid-column:1/2;
      overflow:hidden;
      margin-bottom:calc(var(--mb-B) * -1);
      padding-bottom:var(--mb-B);
    }
    @media (width <= 640px) {
    }
    .js-carousel-A {
      position:relative;
      @media (width > 640px) {
        margin-left:auto;
        width:85.7rem;
      }
      @media (width <= 640px) {
        margin-right:var(--pi-sp-30);
      }
      .splide__track {
        @media (width > 640px) {
          overflow:visible;
        }
      }
    }
    .js-carousel-count-A {
      @media (width > 640px) {
        width:100%;
        position:absolute;
        top:calc(100% + 4.0rem);
      }
      @media (width <= 640px) {
        margin-top:3.2rem;
        margin-left:var(--pi-sp-30);
      }
    }
  }
  .banquet-text {
    @media (width > 640px) {
      grid-row:2/3;
      grid-column:2/3;
      margin-top:auto;
    }
    @media (width <= 640px) {
    }
  }
}


/* レストラン
----------------------------------------------------------------------------- */
.top-restaurant {
  overflow:hidden;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .inner {
    @media (width > 640px) {
      display:grid;
      grid-template-rows:auto auto auto;
      grid-template-columns:1fr auto;
      align-items:flex-start;
    }
  }
  .l-heading-A {
    @media (width > 640px) {
      grid-row:1/3;
      grid-column:1/2;
    }
    @media (width <= 640px) {
    }
  }
  .restaurant-desc {
    @media (width > 640px) {
      grid-row:1/2;
      grid-column:2/3;
    }
    @media (width <= 640px) {
    }
  }
  .js-carousel-A {
    position:relative;
    @media (width > 640px) {
      grid-row:3/4;
      grid-column:1/-1;
      padding-right:49.8rem;
    }
    @media (width <= 640px) {
      padding-left:1.0rem;
    }
    .splide__track {
      @media (width > 640px) {
        overflow:visible;
      }
    }
    .splide__slide {
      display:grid;
      grid-template-columns:3.0rem 1fr;
      grid-row:auto 1fr;
      align-content: flex-start;
      @media (width <= 640px) {
        grid-template-columns:2.0rem 1fr;
      }
    }
    .p-vertical_text-A {
      grid-row:1/-1;
      grid-column:1/2;
      width: fit-content;
    }
    .img {
      grid-row:1/2;
      grid-column:2/3;
    }
    .text {
      grid-row:2/3;
      grid-column:2/3;
      @media (width > 640px) {
        display:grid;
        grid-template-columns: 1fr auto;
        grid-template-rows:auto 1fr;
        row-gap:.8rem;
        align-items: center;
        padding-top:3.2rem;
        padding-inline:1.6rem;
      }
      @media (width <= 640px) {
        grid-template-columns:2.0rem 1fr;
        padding-top:4.8rem;
        padding-right:var(--pi-sp-30);
      }
    }
    .text-heading {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:1/2;
      }
      @media (width <= 640px) {
        margin-bottom:1.6rem;
      }
    }
    .text-desc {
      @media (width > 640px) {
        grid-row:2/3;
        grid-column:1/-1;
        letter-spacing: .1em;
      }
    }
    .l-button-A {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:2/3;
      }
      @media (width <= 640px) {
        margin-top:3.2rem;
      }
    }
  }
  .js-carousel-count-A {
    position:absolute;
    @media (width > 640px) {
      width:calc(100% - 3.0rem);
      margin-left:3.0rem;
      bottom:0;
    }
    @media (width <= 640px) {
      width:calc(100% - 2.0rem - var(--pi-sp-30));
      margin-inline:2.0rem var(--pi-sp-30);
      top:28.5rem;
    }
  }
  .inner > .l-button-A {
    @media (width > 640px) {
      grid-row:2/3;
      grid-column:2/3;
    }
    @media (width <= 640px) {
    }
  }
}


/* アクセス
----------------------------------------------------------------------------- */
.top-access {
  position:relative;
  margin-bottom:7.2rem;
  @media (width > 640px) {
    padding-left:6.4rem;
    &::before {
      content:"";
      display:block;
      width:calc(50% + 68.0rem);
      height:100%;
      background-color:var(--cc-gray_back-A);
      position:absolute;
      top:0;
      right:0;
      z-index: -1;
    }
  }
  @media (width <= 640px) {
    background-color:var(--cc-gray_back-A);
  }

  > .inner {
    @media (width > 640px) {
      display:grid;
      grid-template-columns:28.0rem 1fr;
      gap:12.0rem;
      position:relative;
    }

  }

  .access-img {
    overflow:hidden;
    @media (width > 640px) {
      height:50.4rem;
    }
    img {
      max-width:unset;
      transform:translateX(calc(var(--tftl) * (var(--iw) * -.1rem + 28.0rem)));
    }
  }
  .access-text {

  }
  .text-desc {
    margin-bottom:3.2rem;
  }
  .text-method {
    border-top:1px solid var(--cc-gray_line-A);
    @media (width <= 640px) {
    }

    .method_item {
      display:grid;
      align-items: center;
      grid-template-columns:10.8rem 1fr;
      gap:2.8rem;
      align-content: center;
      border-bottom:1px solid var(--cc-gray_line-A);
      padding-block:2.5rem;
      @media (width <= 640px) {
        grid-template-columns:8.0rem 1fr;
        gap:2.4rem;
      }
    }
    .method_item-img {
      display:flex;
      position:relative;
      @media (width > 640px) {
        justify-content: center;
      }

      &::after {
        content:"";
        width:2px;
        height:100%;
        background-image:radial-gradient(circle at center, var(--cc-gray_line-A) 1px, transparent 1px);
        background-size:2px .6rem;
        background-repeat:repeat-y;
        background-position:center;
        position:absolute;
        right:-1px;
      }
    }
    .method_item-heading {
      margin-bottom:.4rem;
      font-size:1.6rem;
      line-height:1.8;
      letter-spacing: .16em;
    }
    .method_item-desc {
      @media (width <= 640px) {
        font-size: 1.3rem;
        line-height:1.8;
      }

      > span {
        text-decoration: underline;
      }
    }
  }
}


/* SelectorName
----------------------------------------------------------------------------- */
.top-SelectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}