@charset "UTF-8";

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

Banquet CSS

・宴会・MICEトップ用CSS「.banquet-×××」

上記はここに記述する

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


/* 序盤
----------------------------------------------------------------------------- */
.banquet-intro {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .imgs {
    display:grid;
    @media (width > 640px) {
      grid-template-rows:23.7rem 20.0rem 23.7rem;
      grid-template-columns:1fr 92.0rem 1fr;
      gap:.8rem;
      padding-inline:var(--body-pd);
    }
    @media (width <= 640px) {
      grid-template-rows:19.1rem 29.3rem 19.1rem;
      grid-template-columns:1fr 11.6rem 1fr;
      gap:.4rem;
    }
    .img01 {
      grid-row:1/3;
      grid-column:1/2;
      @media (width <= 640px) {
        grid-row:1/2;
      }
    }
    .img02 {
      grid-row:3/4;
      grid-column:1/2;
      @media (width <= 640px) {
        grid-row:1/2;
        grid-column:2/4;
      }
    }
    .img03 {
      grid-row:1/-1;
      grid-column:2/3;
      @media (width <= 640px) {
        grid-row:2/3;
        grid-column:1/-1;
      }
    }
    .img04 {
      grid-row:1/2;
      grid-column:3/4;
      @media (width <= 640px) {
        grid-row:3/4;
        grid-column:1/3;
      }
    }
    .img05 {
      grid-row:2/4;
      grid-column:3/4;
      @media (width <= 640px) {
        grid-row:3/4;
      }
    }
  }
}


/* マイス
----------------------------------------------------------------------------- */
.banquet-mice {
  @media (width > 640px) {
    display:grid;
    grid-template-rows:1fr auto auto 1fr;
    grid-template-columns:calc(50% + 10.0rem) 40.8rem;
    column-gap:17.2rem;
  }
  @media (width <= 640px) {
  }

  .l-heading-B {
    @media (width > 640px) {
      grid-row:2/3;
      grid-column: 2/3;
    }
    @media (width <= 640px) {
      margin-bottom:4.0rem;
    }
  }

  .imgs {
    @media (width > 640px) {
      grid-row:1/-1;
      grid-column:1/2;
      display:grid;
      grid-template-rows: 1fr 1fr;
      height:90.0rem;
    }
    @media (width <= 640px) {
      margin-bottom:6.0rem;
      margin-right:var(--pi-sp-30);
    }
  }

  .text {
    @media (width > 640px) {
      grid-row:3/4;
      grid-column: 2/3;
    }
    @media (width <= 640px) {
    }

    .catch {
      margin-bottom:3.2rem;
    }
    .l-button-A {
      @media (width <= 640px) {
        margin-top:1.6rem;
      }
    }
  }

}


/* 宴会お料理
----------------------------------------------------------------------------- */
.banquet-cuisine {
  .js-infiniteloop {
    @media (width > 640px) {
      --loop-duration:30s;
    }
    @media (width <= 640px) {
      --loop-duration:24s;
    }
    .js-infiniteloop_inner {
    }
    .js-infiniteloop-item {
      padding-inline:1.0rem;
      @media (width > 640px) {
      }
    }
    .imgs {
      display:flex;
      gap:2.0rem;

      .img {
        flex-shrink: 0;
      }
    }
  }

  .text {
    @media (width > 640px) {
      display:grid;
      grid-template-rows:auto auto;
      grid-template-columns:56.0rem 1fr;
      margin-inline:auto;
      width:104.0rem;
    }
    @media (width <= 640px) {
      margin-top:5.6rem;
    }

    .catch {
      @media (width > 640px) {
        grid-row:1/-1;
      }

    }
  }
}
/* アクセス
============================================================================= */
.banquet-access {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .access-points {
    display:grid;
    @media (width > 640px) {
      grid-template-columns: repeat(4,1fr);
      gap:4.0rem;
    }
    @media (width <= 640px) {
      grid-template-columns: repeat(2,1fr);
      gap:2.0rem 1.0rem;
    }
    .item {
      border-top:1px solid var(--cc-gray_line-A);
      padding-top:1.6rem;
      position:relative;

      &::before {
        content:"";
        border-top:1px solid var(--cc-red-A);
        width:5.6rem;
        position:absolute;
        top:-1px;
      }

      .point {
        margin-bottom:1.6rem;
        font-size:1.2rem;
        line-height:1;
        letter-spacing: .05em;
        color:var(--cc-red-A);
        @media (width <= 640px) {
          margin-bottom:.8rem;
        }
      }

      .heading {
        margin-bottom:3.2rem;
        font-size:2.0rem;
        line-height:1.8;
        letter-spacing: .16em;
        @media (width <= 640px) {
          display:flex;
          align-items: center;
          min-height:2lh;
          margin-bottom:.8rem;
          font-size:1.4rem;
          line-height:1.6;
        }
      }
    }
  }
  .access-map {
    @media (width > 640px) {
      display:grid;
      grid-template-columns: 1fr auto;
      grid-row:auto 1fr;
      align-items: flex-end;
      row-gap:7.0rem;
    }
    @media (width <= 640px) {
      margin-top:5.6rem;
    }
    .address {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column: 1/2;;
      }
      .name {
        margin-bottom:.8rem;
        @media (width <= 640px) {
          margin-bottom:1.6rem;
        }
      }
    }
    .map {
      @media (width > 640px) {
        grid-row:2/3;
        grid-column: 1/-1;
      }
      @media (width <= 640px) {
        margin-top:3.2rem;
      }
      iframe {
        width:100%;
        @media (width > 640px) {
          height:56.0rem;
        }
        @media (width <= 640px) {
          height:auto;
          aspect-ratio: 1/1;
        }
      }
    }
    .l-button-A {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column: 2/3;
      }
    }

  }
}


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