@charset "UTF-8";

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

Restaurant CSS

・レストラントップ用CSS「.restaurant-×××」

上記はここに記述する

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

/* キービジュアル
----------------------------------------------------------------------------- */
.restaurant-kv_pc {
  @media (width > 640px) {
    display:grid;
    width:100%;
    height:100%;
    grid-template-rows:32.8% 17.2% 50.0%;
    grid-template-columns:31.25% 31.25% 37.5%;

    .kv-img01 {
      grid-row:1/2;
      grid-column:1/2;
    }
    .kv-img02 {
      grid-row:1/2;
      grid-column:2/3;
    }
    .kv-img03 {
      grid-row:2/4;
      grid-column:1/3;
    }
    .kv-img04 {
      grid-row:1/3;
      grid-column:3/4;
    }
    .kv-img05 {
      grid-row:3/4;
      grid-column:3/4;
    }
  }
}


/* ムービー下冒頭
----------------------------------------------------------------------------- */
.resutaurant_list {
  display:grid;
  gap:var(--mb-C);
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}
.resutaurant_list-item {
  @media (width > 640px) {
    display:grid;
    align-items: center;
    gap:12.0rem;
    &:nth-child(odd) {
      grid-template-columns:calc(50vw + 16.0rem) 40.0rem;
    }
    &:nth-child(even) {
      margin-left:auto;
      grid-template-columns:40.0rem calc(50vw + 16.0rem);
      grid-auto-flow: column;
      .img {
        grid-column:2/3;
      }
    }
  }
  @media (width <= 640px) {
  }

  .img {
    @media (width > 640px) {
      height:72.0rem;
    }
    @media (width <= 640px) {
      margin-bottom:4.8rem;
    }
  }
  .text {
    .subheading {
      margin-bottom:1.6rem;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .05em;
    }
    .heading {
      display:grid;
      gap:1.2rem;
      margin-bottom:3.2rem;
      @media (width <= 640px) {
        margin-bottom:2.4rem;
        margin-top:3.2rem;
      }
      .p-ff-castoro {
        font-size:1.2rem;
        line-height:1;
        letter-spacing: .05em;
      }
    }
    .desc {

    }
    .time {
      margin-top:4.8rem;
      border-bottom:1px solid var(--cc-gray_line-A);
      padding-block:2.4rem;
      position:relative;
      @media (width > 640px) {
        display:grid;
        grid-template-columns: 11.0rem auto;
      }
      @media (width <= 640px) {
        margin-top:3.2rem;
      }
      &::before {
        content:"";
        height:1px;
        background-image:linear-gradient(
          to right,
          var(--cc-red-A) 2.4rem,
          transparent 2.4rem,
          transparent 3.2rem,
          var(--cc-gray_line-A) 3.2rem
        );
        position:absolute;
        top:0;
        inset-inline:0;
      }
      dt {
        @media (width <= 640px) {
          margin-bottom:1.2rem;
        }
      }
      dd {
        display:grid;
        gap:2.0rem;
        @media (width <= 640px) {
          gap:1.6rem;
        }
      }
    }
  }

}


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