@charset "UTF-8";

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

mice CSS

・最低価格保証用CSS「.mice-×××」

上記はここに記述する

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


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

/* MICEについて（about）
----------------------------------------------------------------------------- */
.mice-about {
  @media (width > 640px) {
    text-align: center;
  }
  @media (width <= 640px) {
    text-align: left;
  }
  .p-tg-ja_heading-A {
    @media (width > 640px) {
      margin-bottom: 5.6rem;
    }
    @media (width <= 640px) {
      margin-bottom: 3.2rem;
    }
  }
}


/* 宴会場紹介
----------------------------------------------------------------------------- */
.mice-introduce {
  position: relative;
  @media (width > 640px) {
    margin-bottom: 16rem;
    padding: 16rem 0 31.4rem;
  }
  @media (width <= 640px) {
    margin-bottom: 12rem;
    padding: 6.4rem 0 8rem;
  }
  .mice-wrap {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-left: auto;
      width: 36rem;
    }
  }
  .mice-item {
    @media (width > 640px) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row-reverse;
    }
    @media (width <= 640px) {
    }
  }
  .mice-item {
    @media (width > 640px) {
      margin-bottom: 16rem;
    }
    @media (width <= 640px) {
      margin-bottom: 6.4rem;
    }
  }
  .mice-item:nth-child(3) {
    @media (width > 640px) {
      margin-bottom: 12rem;
    }
  }
  .mice-txtbox {
    @media (width > 640px) {
      width: 43rem;
    }
    @media (width <= 640px) {
      width: 33rem;
    }
  }
  .l-heading-B {
    @media (width > 640px) {
      margin-bottom: 5.6rem;
    }
    @media (width <= 640px) {
      margin-bottom: 3.2rem;
    }
  }
  .p-tg-text-A {
    @media (width > 640px) {
      margin-bottom: 4rem;
    }
    @media (width <= 640px) {
      margin-bottom: 3.2rem;
    }
  }
  .mice-mapimg {
    @media (width > 640px) {
      width: 40rem;
    }
    @media (width <= 640px) {
      width: 100%;
    }
  }
  .mice-img {
    height: auto;
    @media (width > 640px) {
      width: 80rem;
    }
    @media (width <= 640px) {
      margin-bottom: 4rem;
      width: 36rem;
    }
  }
  .mice-linkbox {
    display: flex;
    gap: 4rem;
    width: 30rem;
    @media (width > 640px) {
      margin-left: auto;
      margin-right: auto;
    }
    @media (width <= 640px) {
      margin: 0 auto;
    }
  }
}
.mice-introduce::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  background-color: var(--cc-white-B);
  @media (width > 640px) {
    width: 100rem;
  }
  @media (width <= 640px) {
    width: 28rem;
  }
}


/* 会場面積／収容人数
----------------------------------------------------------------------------- */
.mice-spec {
  @media (width > 640px) {
    margin-bottom: 16rem;
  }
  @media (width <= 640px) {
    margin-bottom: 10.4rem;
  }
  .l-heading-B {
    @media (width > 640px) {
      margin-bottom: 8rem;
    }
    @media (width <= 640px) {
    }
  }
  table {
    --max: 1360;
  }
  .l-banquet-spec_table tbody tr:nth-child(odd) :is(.th2,td) {
    background-color: var(--cc-white-A);
  }
  .l-banquet-spec_table tbody tr:nth-child(even) :is(.th2,td) {
    background-color: var(--cc-gray_back-A);
  }
  .mice-th2 {
    padding-inline: 0;
    padding-left: 2.4rem;
  }
  .table-note {
    display: flex;
    justify-content: flex-end;
    gap: 1.6rem;
    @media (width <= 640px) {
      &::after {
        content: none;
      }
    }
  }
  .table-note li {
    margin-left: 0;
    @media (width <= 640px) {
      position: static;
      font-size: 1.3rem;
    }
  }
}


/* フロアマップ
----------------------------------------------------------------------------- */
.mice-map {
  @media (width > 640px) {
    margin: 0 auto 8rem;
    width: 144rem;
  }
  @media (width <= 640px) {
    margin-bottom: 3.3rem;
  }
}
.mice-tab01 .mice-wrap{
  @media (width > 640px) {
    display: flex;
    gap: 5.6rem;
  }
  @media (width <= 640px) {
  }
}
.mice-tab01 .mice-img {
  @media (width > 640px) {
    width: 85.1rem;
    height: auto;
  }
  @media (width <= 640px) {
    margin-bottom: 4rem;
    width: 100%;
  }
}
.mice-tab02 .mice-wrap {
  @media (width > 640px) {
    margin: 0 auto;
    width: 104.8rem;
  }
  @media (width <= 640px) {
  }
  p {
    margin-bottom: 2.4rem;
    text-align: center;
  }
  .p-ff-castoro {
    margin-right: 1.6rem;
    line-height: 1;
    letter-spacing: 0.05em;
    @media (width > 640px) {
      font-size: 2.4rem;
    }
    @media (width <= 640px) {
      font-size: 1.6rem;
    }
  }
}

/* 照明・美術設備
----------------------------------------------------------------------------- */
/* 宴会会場共通 */
.mice-tab02 {
  .map_heading {
    margin-bottom:2.4rem;
    @media (width <= 640px) {
      margin-bottom:1.6rem;
    }
  }
  .map {
    display:flex;
    justify-content: center;
    @media (width <= 640px) {
      padding-inline:1.5rem;
    }
    &.p-bg-gray_back-A {
      padding-block:6.2rem;
      @media (width <= 640px) {
        padding-block:1.5rem;
      }
    }
  }
  .icons {
    display:grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: 4.0rem;
    margin-top:4.0rem;
    @media (width <= 640px) {
      grid-template-columns: repeat(2,1fr);
      column-gap: 1.6rem;
      margin-top:2.4rem;
    }
    
    .group {
      display:grid;
      grid-template-columns: subgrid;
      align-content: flex-start;
      @media (width > 640px) {
        grid-column:span 2;
      }
      @media (width <= 640px) {
        grid-column:span 1;
        row-gap:.8rem;
      }
    }
    .pc_group {
      display:grid;
      grid-template-columns: subgrid;
      align-content: flex-start;
      row-gap:.8rem;
      @media (width > 640px) {
        grid-column:span 1;
      }
      @media (width <= 640px) {
        grid-column:span 1;
      }
      
      > li {
        display:flex;
        align-items: center;
        column-gap: .8rem;
        font-size:1.4rem;
        line-height:1.4;
        > img {
          flex-shrink: 0;
        }
        
        &.sub {
          margin-left:3.2rem;
          > span {
            &::before {
              content:"…";
              margin-right:.8rem;
            }
          }
        }
      }
    }
  }
}

/* MICE独自 */
.mice-floorname:nth-child(4) {
  @media (width > 640px) {
    margin-top: 8rem;
  }
  @media (width <= 640px) {
    margin-top: 5.6rem;
  }
}



/* ホテル全体マップ
----------------------------------------------------------------------------- */
.mice-tab03 {
  @media (width > 640px) {
    padding-top: 12rem;
  }
  @media (width <= 640px) {
    padding-top: 5.6rem;
  }
  .mice-item button {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      padding: 2.4rem 0 4.5rem;
    }
  }
  .mice-item .img {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      aspect-ratio: 376 / 93;
    }
  }
}


/* ループ
----------------------------------------------------------------------------- */
.mice-loop {
  color: var(--cc-white-B);
  line-height: 1;
  letter-spacing: 0.07em;
  @media (width > 640px) {
    margin-bottom: 8rem;
    font-size: 12rem;
  }
  @media (width <= 640px) {
    margin-bottom: 4.8rem;
    font-size: 5rem;
  }
}


/* MICE使用事例
----------------------------------------------------------------------------- */
.mice-case {
  @media (width > 640px) {
    margin-bottom: 16rem;
  }
  @media (width <= 640px) {
    margin-bottom: 10.4rem;
  }
  .l-column3-A {
    @media (width > 640px) {
      gap: 3.2rem;
    }
    @media (width <= 640px) {
      gap: 6.4rem;
    }
  }
  .item-img {
    margin-bottom: 2.4rem;
  }
  .p-tg-ja_heading-B {
    @media (width > 640px) {
      font-size: 2.2rem;
    }
    @media (width <= 640px) {
    }
  }
}


/* ホテルの紹介
----------------------------------------------------------------------------- */
.mice-facility {
  .mice-img {
    width: 100%;
    @media (width > 640px) {
      margin-bottom: 4rem;
    }
    @media (width <= 640px) {
      margin-bottom: 3.2rem;
    }
  }
  .mice-txt {
    @media (width > 640px) {
      text-align: center;
      margin-bottom: 10.4rem;
    }
    @media (width <= 640px) {
      text-align: left;
      margin-bottom: 6.4rem;
    }
  }
  .l-column2-A {
    @media (width > 640px) {
      width: 124.4rem;
      margin: 0 auto;
    }
    @media (width <= 640px) {
    }
  }
  .item-heading {
    margin-bottom: 0.8rem;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      font-size: 1.8rem;
    }
  }
}


/* submv
----------------------------------------------------------------------------- */
.mice-submv {
  position: relative;
  width: 100%;
  p {
    position: absolute;
    bottom: 0;
    color: var(--cc-white-A);
    text-align: center;
    line-height: 1;
    letter-spacing: 0.08em;
    @media (width > 640px) {
      right: 1.6rem;
      font-size: 9.6rem;
    }
    @media (width <= 640px) {
      right: 0;
      left: 0;
      font-size: 2.9rem;
      white-space: nowrap;
    }
  }
}


/* アクセス
----------------------------------------------------------------------------- */
.mice-access {
  .mice-wrap {
    display: flex;
    @media (width > 640px) {
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 10.4rem;
    }
    @media (width <= 640px) {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 5.6rem;
      margin-bottom: 6.4rem;
    }
  }
  .p-tg-ja_heading-C {
    @media (width > 640px) {
      margin-bottom: 0.8rem;
    }
    @media (width <= 640px) {
      margin-bottom: 1.6rem;
    }
  }
  .l-column4-A {
    @media (width > 640px) {
      gap: 4rem;
    }
    @media (width <= 640px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 2rem 1rem;
    }
  }
  .item-heading {
    position: relative;
    padding-top: 1.6rem;
  }
  .item-heading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--cc-gray_line-A);
  }
  .item-heading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 5.8rem;
    height: 1px;
    background-color: var(--cc-red-A);
  }
  .item-heading .p-ff-castoro {
    display: block;
    color: var(--cc-red-A);
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.05em;
    @media (width > 640px) {
      margin-bottom: 1.6rem;
    }
    @media (width <= 640px) {
      margin-bottom: 1.9rem;
    }
  }
  .item-heading .p-ff-serif {
    display: block;
    letter-spacing: 0.16em;
    @media (width > 640px) {
      font-size: 2rem;
      line-height: 1.8;
    }
    @media (width <= 640px) {
      height: 4.4rem;
      font-size: 1.4rem;
      line-height: 1.6em;
    }
  }
  .column-item:nth-child(4) .p-ff-serif {
    @media (width <= 640px) {
      padding: 1.1rem 0;
    }
  }
  .item-img {
    margin-bottom: 0;
  }
}


/* 周辺会議室
----------------------------------------------------------------------------- */
.mice-nearby {
  background-color: var(--cc-gray_back-A);
  .l-column4-A {
    @media (width > 640px) {
      margin-bottom: 8rem;
    }
    @media (width <= 640px) {
      gap: 3.2rem;
      margin-bottom: 6.4rem;
    }
  }
  .item-img {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-bottom: 1.6rem;
    }
  }
  .item-heading {
    margin-bottom: 0;
  }
  .mice-map {
    display: flex;
    @media (width > 640px) {
      gap: 4rem;
      margin-bottom: 16rem;
    }
    @media (width <= 640px) {
      flex-direction: column;
      gap: 2.4rem;
      margin-bottom: 8rem;
    }
  }
  .mice-map .mice-googlemap,
  .mice-map .mice-img {
    @media (width > 640px) {
      width: 66rem;
      height: 56rem;
    }
    @media (width <= 640px) {
      width: 100%;
      height: 28rem;
    }
  }
  .mice-googlemap iframe {
    width: 100%;
    height: 100%;
  }
}
.mice-group {
  @media (width > 640px) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  @media (width <= 640px) {
    display: block;
  }
  .l-heading-B {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-bottom: 4rem;
    }
  }
  .l-column2-A {
    @media (width > 640px) {
      width: 85.8rem;
      gap: 5.6rem;
    }
    @media (width <= 640px) {
      gap: 3.2rem;
    }
  }
  .item-img {
    margin-bottom: 2.4rem;
  }
}


/* ご利用情報
----------------------------------------------------------------------------- */
.mice-info {
  .l-table-A {
    grid-template-columns: 31.2rem 1fr;
  }
}