@charset "UTF-8";

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

Stay Room CSS

・客室詳細用CSS「.lounge-×××」

上記はここに記述する

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

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

/* ステイタスラウンジ紹介（about）
----------------------------------------------------------------------------- */
.lounge-about {
  .lounge-wrap {
    @media (width > 640px) {
      display: flex;
      justify-content: space-between;
    }
    @media (width <= 640px) {
    }
  }
  .inner {
    @media (width > 640px) {
      width: 52rem;
    }
    @media (width <= 640px) {
      width: 100%;
      margin-bottom: 5.6rem;
    }
  }
}
.lounge-ttl {
  @media (width > 640px) {
    margin-bottom: 5.6rem;
  }
  @media (width <= 640px) {
    margin-bottom: 3.2rem;
    padding-inline: 2.7rem;
  }
}
.lounge-txt {
  @media (width > 640px) {
    margin-bottom: 4.0rem;
  }
  @media (width <= 640px) {
    margin-bottom: 3.2rem;
  }
}
.lounge-subject {
  color: var(--cc-gold-A);
  line-height: 2;
  letter-spacing: 0.2em;
  @media (width > 640px) {
    font-size: 1.8rem;
  }
  @media (width <= 640px) {
    font-size: 1.4rem;
  }
  span {
    font-size: 1.4rem;
  }
}
.lounge-pic {
  @media (width > 640px) {
    width: 72rem;
  }
  @media (width <= 640px) {
    width: 100%;
  }
}

/* サービス
----------------------------------------------------------------------------- */
.lounge-service {
  .columc-item:not(:last-child) {
    @media (width <= 640px) {
      margin-bottom: 6.4rem;
    }
  }
  .item-img {
      margin-bottom: 2.4rem;
  }
  .column-item .text-heading {
    margin-bottom: 0.8rem;
  }
}

/* 利用シーン
----------------------------------------------------------------------------- */

.lounge-stay {
  @media (width > 640px) {
    padding-bottom: 20.8rem;
  }
  @media (width <= 640px) {
    padding-bottom: var(--mb-B);
  }
}
.lounge-img {
  @media (width > 640px) {
    width: 89.6rem;
    height: 56rem;
  }
  @media (width <= 640px) {
    width: 39rem;
    height: 44rem;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.lounge-txtbox {
  @media (width > 640px) {
    grid-row:2/3;
    grid-column:2/3;
    margin-top:auto;
  }
  @media (width <= 640px) {
  }
  .p-mbs-pc-F {
    margin-top: 0.8rem;
  }
}

/* ご利用情報
----------------------------------------------------------------------------- */
.lounge-info {
  div {
    @media (width > 640px) {
      display: flex;
      justify-content: flex-start;
      gap: 4.8rem;
      padding: 1.6rem;
    }
    @media (width <= 640px) {
      padding: 1.6rem 0;
    }
  }
  dt {
    @media (width > 640px) {
      width: 31.2rem;
      flex-shrink: 0;
    }
    @media (width <= 640px) {
      width: 100%;
    }
  }
}

/* 下ボタン群（共通設定）
----------------------------------------------------------------------------- */
.lounge-other {
  @media (width > 640px) {
    margin-bottom: 16rem;
  }
  @media (width <= 640px) {
    margin-bottom: 12rem;
  }
  .p-ff-castoro {
    letter-spacing: 0.05em;
    text-align: center;
    @media (width > 640px) {
      margin-bottom: 4rem;
      font-size: 2.8rem;
      line-height: 1;
    }
    @media (width <= 640px) {
      margin-bottom: 2.4rem;
      font-size: 2rem;
      line-height: 1.2;
    }
  }
}
.lounge-fbtns {
  display: grid;
  @media (width > 640px) {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    padding: 0 1.6rem;
  }
  @media (width <= 640px) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.2rem;
    padding: 0 0.4rem;
  }
}
.lounge-fbtn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  .lounge-fbtn_bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    pointer-events: none;
    transition: var(--duration-hover-A);
  }
  .lounge-txtbox {
    position: absolute;
    width: 100%;
    height: 100%;
    color: var(--cc-white-A);
  }
  .lounge-txtbox a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    height: 100%;
  }
  .p-ff-castoro {
    display: block;
    letter-spacing: 0.05em;
    text-align: center;
    @media (width > 640px) {
      margin-bottom: 0.8rem;
      font-size: 2.2rem;
      line-height: 1.3;
    }
    @media (width <= 640px) {
      margin-bottom: 0.4rem;
      font-size: 1.5rem;
      line-height: 1.5;
    }
  }
  .p-ff-serif {
    display: block;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    @media (width > 640px) {
      font-size: 1.4rem;
    }
    @media (width <= 640px) {
      font-size: 1.1rem;
    }
  }
  .l-button-A {
    @media (width > 640px) {
      gap: 1.2rem;
      min-height: 2rem;
      color: var(--cc-white-A);
    }
    @media (width <= 640px) {
      display: none;
    }
  }
  .l-button-A::before {
    border-bottom: 1px solid var(--cc-white-A);
  }
  .l-button-A::after {
    background-color: var(--cc-white-A);
  }
}
.lounge-fbtn:hover {
  @media (width > 640px) {
    .lounge-fbtn_bg {
      transform: scale(1.04);
    }
    .l-button-A::before {
      background-color: transparent;
    }
  }
}