@charset "UTF-8";

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

Restaurant Detail CSS

・レストラン詳細用CSS「.restaurant_detail-×××」

上記はここに記述する

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

/* キービジュアル
----------------------------------------------------------------------------- */
.restaurant_detail-header {
  overflow: hidden;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .header-heading {
    display:grid;
    justify-content: center;
    gap:1.6rem;
    padding-block:14.4rem 8.0rem;
    text-align: center;
    @media (width <= 640px) {
      gap:.8rem;
      padding-block:4.0rem 3.2rem;
    }
    .ja {
      font-size: 4.4rem;
      font-weight:400;
      line-height:1.8;
      letter-spacing:.16em;
      @media (width <= 640px) {
        font-size: 2.8rem;
      }
    }
    .en {
      font-size: 1.6rem;
      font-weight:400;
      line-height:1;
      letter-spacing:.1em;
      color:var(--cc-gray_text-A);
      @media (width <= 640px) {
        font-size: 1.2rem;
      }
    }
  }

  .restaurant_detail_js-kv {
    overflow:visible;
    .splide__track {
      overflow:visible;
    }
    .splide__slide {
      img {
        width:100%;
      }
    }
    .js-carousel-count-A {
      display:grid;
      position:absolute;
      right:2.7rem;
      bottom:2.5rem;
      z-index: 100;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        margin-inline:auto;
        width:fit-content;
        inset-inline:0;
        bottom:1.6rem;
      }

      .splide__pagination {
        grid-row:2/3;
        width:100%;
      }
    }
  }
}


/* ムービー下冒頭
----------------------------------------------------------------------------- */
.restaurant_detail-intro {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .js-infiniteloop {
    --loop-duration:20s;
    font-size: 9.6rem;
    font-weight:400;
    line-height:1;
    letter-spacing:.08em;
    color:var(--cc-gray_line-A);
    @media (width > 640px) {
      padding-top:2.4rem;
    }
    @media (width <= 640px) {
      font-size: 4.0rem;
    }
    .text {
      padding-inline:.05em 5.6rem;
      padding-bottom:.05em;
    }
  }

  .intro-logo {
    margin-inline:auto;
    margin-bottom:2.5rem;
    width:fit-content;
    @media (width <= 640px) {
      margin-bottom:1.6rem;
    }
  }
  .intro-heading {
    @media (width <= 640px) {
      font-size: 2.0rem;
    }
  }
  .intro-desc {
    color:var(--cc-gray_text-A);
  }
  /* 冒頭2カラム用 */
  .img-column {
    display: grid;
    grid-template-columns: 1fr 65.6rem;
    align-items: center;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      display: flex;
      flex-direction: column;
      gap: 4.0rem;
    }
    .text {
      grid-column: 1/2;
      @media (width <= 640px) {
      }
    }
    .intro-logo {
      @media (width > 640px) {
        margin-left: 0;
      }
    }
    .img {
      grid-column: 2/3;
    }
  }
}

/* 組み写真
============================================================================= */
.restaurant_detail-photos {
  display:grid;
  padding-inline:var(--body-pd);
  gap:2px;
  @media (width > 640px) {
    grid-template-rows: 30.0rem 30.0rem;
    grid-template-columns:1fr repeat(2,39.2rem) 1fr;
    padding-top:3.2rem;
  }
  @media (width <= 640px) {
    grid-template-rows:repeat(4,13.5rem);
    grid-template-columns:1fr 1fr;
    padding-bottom:.8rem;
  }
  .img {
    &:nth-child(1) {
      @media (width > 640px) {
        grid-row:1/3;
        grid-column:1/2;
      }
      @media (width <= 640px) {
        grid-row:2/4;
        grid-column:1/2;
      }
    }
    &:nth-child(2) {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:2/3;
      }
      @media (width <= 640px) {
        grid-row:1/2;
        grid-column:1/2;
      }
    }
    &:nth-child(3) {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:3/4;
      }
      @media (width <= 640px) {
        grid-row:1/2;
        grid-column:2/3;
      }
    }
    &:nth-child(4) {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:4/5;
      }
      @media (width <= 640px) {
        grid-row:3/4;
        grid-column:2/3;
      }
    }
    &:nth-child(5) {
      @media (width > 640px) {
        grid-row:2/3;
        grid-column:2/3;
      }
      @media (width <= 640px) {
        grid-row:2/3;
        grid-column:2/3;
      }
    }
    &:nth-child(6) {
      @media (width > 640px) {
        grid-row:2/3;
        grid-column:3/5;
      }
      @media (width <= 640px) {
        grid-row:4/5;
        grid-column:1/3;
      }
    }
  }
}

/* 特徴
----------------------------------------------------------------------------- */
.restaurant_detail-feature {
  position:relative;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  &::before {
    content:"";
    width:calc(50% + 60.0rem);
    background-color:var(--cc-gray_back-A);
    position:absolute;
    inset-block:2.4rem 0;
    right:0;
    z-index: -1;
    @media (width <= 640px) {
      width:calc(100% - var(--pi-sp-30));
      top:2.0rem;
    }
  }
  .l-heading-B {
    @media (width > 640px) {
      margin-inline:auto;
      margin-bottom:10.4rem;
      width:123.2rem;
    }
    @media (width <= 640px) {
    }
  }
  .l-column3-A {
    .column-item {
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        padding-left:var(--pi-sp-30);
      }
    }
    .item-img {
      @media (width <= 640px) {
        margin-bottom:4.8rem;
        margin-left:calc(var(--pi-sp-30) * -2);
      }
    }
  }
}


/* 紹介2
----------------------------------------------------------------------------- */
.restaurant_detail-refer {
  @media (width > 640px) {
    display:flex;
    align-items: center;
  }
  @media (width <= 640px) {
  }

  .img {
    @media (width > 640px) {
      flex-shrink: 0;
    }
    img {
      /* width:100%; */
    }
  }
  .text {
    @media (width > 640px) {
      padding-inline:10.4rem;
    }
    @media (width <= 640px) {
      padding-block:6.4rem;
    }
  }
  .text-heading {
    margin-bottom:1.2rem;
  }
  .text-subheading {
    margin-bottom:3.2rem;
    font-size: 1.4rem;
    font-weight:400;
    line-height:1.8;
    letter-spacing:.16em;
    @media (width <= 640px) {
      margin-bottom:4.0rem;
      font-size: 1.3rem;
    }
  }
}


/* メニュー
----------------------------------------------------------------------------- */
.restaurant_detail-menu {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .menu-contents {
    display:grid;
    gap:10.4rem;
    padding-top:10.4rem;
    @media (width <= 640px) {
      gap:5.2rem;
      padding-top:4.8rem;
    }
  }
  .contents-item {
    @media (width > 640px) {
      display:grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 50.4rem 1fr;
      grid-auto-flow: column;
      align-items: flex-start;
      gap:4.0rem 9.6rem;
    }
    @media (width <= 640px) {
      display:flex;
      flex-direction: column;
    }
    .item-img {
      position:relative;
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:1/2;
      }
      .img-tag {
        padding-block:1.2rem;
        padding-inline:1.6rem 2.5rem;
        position:absolute;
        top:1.7rem;
        font-size:1.4rem;
        line-height:1;
        letter-spacing: .12em;
        clip-path:polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%);
      }
      img {
        width:100%;
        height:auto;
        aspect-ratio: 16/13;
      }
    }
    .item-text {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:2/3;
      }
      @media (width <= 640px) {
        display:contents;
      }
      .text-heading {
        margin-bottom:2.4rem;
        @media (width <= 640px) {
          margin-block:4.0rem 1.6rem;
        }
      }
      .text-desc {
        margin-bottom:2.4rem;
        @media (width <= 640px) {
          margin-bottom:4.0rem;
        }
      }
      .l-table-A {
        dt {
          padding-left:0;
        }
        .plice {
          font-size:1.4rem;
          @media (width <= 640px) {
            font-size:1.3rem;
          }
          .amount {
            display:inline-flex;
            align-items: baseline;
            line-height:1;
            @media (width > 640px) {
              margin-inline:.8rem;
            }
            > small {
              font-size:inherit;
            }
            .n {
              font-size:2.2rem;
              @media (width <= 640px) {
                font-size:2.0rem;
              }
            }
          }
        }
        .note {
          @media (width <= 640px) {
            display:block;
          }
        }
      }
      .l-button-C {
        margin-top:4.0rem;
        @media (width <= 640px) {
          order:100;
          margin-top:2.4rem;
        }
      }
    }
    .js-accordion-group {
      @media (width > 640px) {
        grid-column:1/-1;
      }
      @media (width <= 640px) {
        margin-top:4.0rem;
      }
    }
    .js-accordion-button {
      display:flex;
      justify-content: center;
      align-items: center;
      gap:1.4rem;
      margin-inline:auto;
      padding-bottom:.1em;
      width:100%;
      min-height:5.6rem;
      color:var(--cc-red-A);
      background-color:var(--cc-gray_back-A);
      position:relative;
      transition-property:opacity;
      transition-duration: var(--duration-hover-A);
      z-index: 1;

      @media (width > 640px) { /* PC */
      }
      @media (width <= 640px) { /* SP */
      }

      @media (hover) {
        &:hover {
          opacity:.7;
        }
      }
      &:is([aria-expanded="false"]) {
        > i::after {
          transform:rotate(-90deg);
        }
      }
      &:is([aria-expanded="true"]) {
        > i::before {
          transform:rotate(180deg);
        }
      }
      > i {
        display:flex;
        justify-content: center;
        align-items: center;
        width:1.4rem;
        height:1.4rem;
        position:relative;
        bottom:.05em;
        &::before,&::after {
          content:"";
          width:100%;
          height:2px;
          background-color:var(--cc-red-A);
          position:absolute;
          transition-property:transform;
          transition-duration: var(--duration-hover-A);
        }
      }
    }
    .js-accordion-target_inner {
      @media (width > 640px) {
       padding-top:.8rem;
      }
      @media (width <= 640px) {
       padding-bottom:1.6rem;
      }
      .l-table-A {
        border-top-width:0;
        @media (width > 640px) {
        }
        > div {
          @media (width <= 640px) {
            padding-inline:3.0rem;
          }
        }
      }
    }
  }
  .menu-single {
    display:grid;
    margin-top:10.4rem;
    @media (width > 640px) {
      grid-template-columns: 1fr 1fr;
      gap:4.8rem;
      margin-inline:auto;
      width:104.0rem;
    }
    @media (width <= 640px) {
      gap:1.6rem;
      margin-top:5.6rem;
    }
    .other-item {
      display:grid;
      grid-template-columns: 18.4rem 1fr auto;
      align-items: center;
      padding-block:.8rem;
      padding-right:2.4rem;
      @media (width <= 640px) {
        grid-template-columns: 12.4rem 1fr auto;
      }
    }
    .item-img {
      img {
        width:100%;
        height:auto;
        aspect-ratio: 16/9;
      }
    }
    .item-name {
      margin-inline:auto;
    }
  }

}


/* お席のご案内
----------------------------------------------------------------------------- */
.restaurant_detail-facility {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .facility-header {
    display:grid;
    margin-bottom:8.0rem;
    @media (width > 640px) {
      grid-template-columns:1fr 1fr;
    }
    @media (width <= 640px) {
      margin-bottom:5.6rem;
    }
    .header-desc {
      color:var(--cc-gray_text-A);
    }
  }

  .facility-carousel_wrap {
    overflow:hidden;
    position:relative;
    @media (width <= 640px) {
      padding-bottom:9.6rem;
    }
    .l-column3-carousel {
      @media (width <= 640px) {
        width:28.0rem;
        position:static;
      }
      .js-carousel-count-A {
        @media (width <= 640px) {
          width:calc(100% - var(--pi-sp-30) * 2);
          position:absolute;
          bottom:0;
          .splide__slide {
            height: auto;
          }
          .splide__track,
          .splide__list {
            height: auto;
          }
        }
      }
    }
  }
}



/* SelectorName
----------------------------------------------------------------------------- */
.restaurant_detail-other {
  overflow:hidden;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .l-column4-carousel {
    @media (width <= 640px) {
      width:30.2rem;
    }
    .js-carousel-count-A {
      display:none;
    }
  }
}

.restaurant_detail-information {
  > .p-tg-text-C {
    color:var(--cc-gray_text-A);
  }
}


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