@charset "UTF-8";

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

Banquet Cuisine CSS

・料理のご案内用CSS「.banquet_cuisine-×××」

上記はここに記述する

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


/* KV
----------------------------------------------------------------------------- */
.l-lowerpage-header-A {
  .imgs {
    display:grid;
    @media (width > 640px) {
      grid-template-rows:1fr 1fr;
      grid-template-columns:calc(50% + 10.0rem) 1fr;
    }
    @media (width <= 640px) {
      grid-template-rows:61% 39%;
      grid-template-columns:1fr 1fr;
    }
    .img01 {
      @media (width > 640px) {
        grid-row:1/3;
        grid-column:1/2;
      }
      @media (width <= 640px) {
        grid-row:1/2;
        grid-column:1/3;
      }
    }
    .img02 {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:2/3;
        img {
          object-position:left center;
        }
      }
      @media (width <= 640px) {
        grid-row:2/3;
        grid-column:1/2;
      }
    }
    .img03 {
      @media (width > 640px) {
        grid-row:2/3;
        grid-column:2/3;
        img {
          object-position:left center;
        }
      }
      @media (width <= 640px) {
        grid-row:2/3;
        grid-column:2/3;
      }
    }
  }
}


/* 序盤
----------------------------------------------------------------------------- */
.banquet_cuisine-intro {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
  > .inner {
    @media (width > 640px) {
      display:flex;
      align-items: flex-start;
      justify-content: space-between;
      width:160.0rem;
      margin-inline:auto;
      max-width: 100%;
    }
    @media (width <= 640px) {
    }
  }
  .text {
    @media (width > 640px) {
      padding-left:17.0rem;
      position:sticky;
      top:12.0rem;
    }
    @media (width <= 640px) {
    }
  }
  .imgs {
    display:grid;
    grid-template-rows:auto auto auto auto;
    grid-template-columns:auto auto auto 6.4rem;
    justify-content: flex-end;
    align-items: flex-start;
    gap:1.6rem;
    @media (width <= 640px) {
      grid-template-columns:auto 4.7rem auto auto 2.0rem;
      gap:.8rem;
      margin-top:6.4rem;
    }

    img {
      &:nth-child(1) {
        grid-row:1/2;
        grid-column:2/5;
        @media (width <= 640px) {
          grid-column:3/6;
        }
      }
      &:nth-child(2) {
        grid-row:2/3;
        grid-column:1/3;
        @media (width <= 640px) {
          grid-column:1/4;
        }
      }
      &:nth-child(3) {
        grid-row:2/4;
        grid-column:3/4;
        @media (width <= 640px) {
          grid-column:4/5;
        }
      }
      &:nth-child(4) {
        grid-row:3/5;
        grid-column:2/3;
        @media (width <= 640px) {
          grid-column:2/4;
        }
      }
    }
  }
  .hotel_name {
    font-size:10.8rem;
    line-height:1;
    letter-spacing: .1em;
    text-align: center;
    color:var(--cc-gray_line-A);
    @media (width > 640px) {
      padding-block:4.8rem;
    }
    @media (width <= 640px) {
      padding-top:8.0rem;
      font-size:3.6rem;
      line-height:1.2;
    }
  }
}


/* シェフ
----------------------------------------------------------------------------- */
.banquet_cuisine-chef {
  .chef-header {
    position:relative;
    height:68.0rem;
    @media (width <= 640px) {
      height:26.0rem;
    }
    .l-heading-B {
      position:absolute;
      @media (width > 640px) {
        top:calc(100% + 12.0rem);
        inset-inline:0;
        pointer-events:none;
        z-index: 2;
      }
      @media (width <= 640px) {
        margin-bottom:4.0rem;
        bottom:0;
      }
    }
    .bg {
      height:100%;
    }
  }
  .chef-contents {
    padding-block:12.0rem;
    position:relative;
    z-index: 1;
    overflow:hidden;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      padding-block:3.0rem 8.0rem;
    }
    > .inner {
      position:relative;
      @media (width <= 640px) {
        padding-bottom:9.0rem;
      }
    }
  }
  .banquet_cuisine_js-chef {
    @media (width <= 640px) {
      position:static;
    }
    .splide__slide {
      @media (width > 640px) {
      }
      @media (width <= 640px) {
      }
    }
    .content {
      @media (width > 640px) {
        display:grid;
        justify-content: space-between;
        grid-auto-flow: column;
        grid-template-columns: 60.0rem 64.0rem;
      }
      @media (width <= 640px) {
      }
      .img {
        @media (width <= 640px) {
          margin-bottom:4.8rem;
        }
      }
      .text {
        @media (width > 640px) {
          grid-column:1/2;
          padding-top:14.6rem;
        }
        @media (width <= 640px) {
        }
      }
      .text-place {
        margin-bottom:.8rem;
        font-size:1.6rem;
        line-height:1.8;
        letter-spacing: .16em;
      }
      .text-name {
        margin-bottom:4.0rem;
        @media (width <= 640px) {
          margin-bottom:3.2rem;
        }
        .position {
          font-size:1.6rem;
          line-height:1.8;
          letter-spacing: .16em;
        }
        .name {
          font-size:2.2rem;
          line-height:1.8;
          letter-spacing: .16em;
        }
      }
      .img {
        @media (width > 640px) {
          grid-column:2/3;
        }
        @media (width <= 640px) {
        }
      }
    }
    .js-carousel-count-A {
      position:absolute;
      bottom:0;
      @media (width > 640px) {
        width:60.0rem;
      }
      @media (width <= 640px) {
        display:grid;
        grid-template-columns: 1fr auto;
        row-gap:.8rem;
        width:calc(100% - 6.0rem);
      }
      .splide__pagination {
        @media (width <= 640px) {
          grid-column:1/3;
          width:100%;
        }
        &::before {
          background-color:#fff;
        }
        &::after {
          background-color:var(--cc-gold-A);
        }
      }
      .arrows_number {
        @media (width <= 640px) {
          grid-column:2/3;
        }
      }
    }
  }
  .banquet_cuisine_js-chef_thumb {
    @media (width > 640px) {
      width:60.0rem;
      position:absolute;
      bottom:5.6rem;
    }
    @media (width <= 640px) {
      margin-top:5.6rem;
      width:29.6rem;
    }
    .splide__track {
      overflow:visible;
    }
    .splide__slide {
      position:relative;
      cursor: pointer;
      &::before {
        content:"";
        background-color:#000;
        opacity:.2;
        position:absolute;
        inset:0;
        transition-property: opacity;
        transition-duration:var(--duration-hover-A);
        mix-blend-mode: multiply;
      }
      &.is-active::before {
        opacity:.75;
      }
    }
  }
  .banquet_cuisine_js-chef_bgs {
    position:absolute;
    inset:0;
    z-index: -1;
    pointer-events: none;
    &::before {
      content:"";
      background-color:rgba(0,0,0,.75);
      backdrop-filter: blur(25px);
      position:absolute;
      inset:0;
      z-index: 1;
    }

    .bg {
      position:absolute;
      inset:0;
      transition-property: opacity;
      transition-duration:1s;
      pointer-events: none;

      &:not(.is-active) {
        opacity:0;
      }
    }
  }
}


/* 宴会料理
----------------------------------------------------------------------------- */
.banquet_cuisine-cuisine {
  position:relative;
  @media (width > 640px) {
    padding-block:var(--mb-B) 12.0rem;
    &::before {
      content:"";
      width:calc(50% + 63.0rem);
      background-color:var(--cc-gray_back-A);
      position:absolute;
      inset-block:0;
      right:0;
      z-index: -1;
    }
  }
  @media (width <= 640px) {
    padding-block:var(--mb-B);
    background-color:var(--cc-gray_back-A);
  }
  .l-heading-B {
    @media (width <= 640px) {
      margin-bottom:4.0rem;
    }
  }
}



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