@charset "UTF-8";

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

Stay CSS

・宿泊トップ用CSS「.stay-×××」

上記はここに記述する

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

/* コンテンツ
----------------------------------------------------------------------------- */
.stay-contents {
  position:relative;
  z-index: 1;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  &::before {
    content:"";
    display:block;
    background-color:var(--cc-gray_back-A);
    position:absolute;
    inset-block:0;
    left:0;
    z-index: -1;
    @media (width > 640px) {
      width:calc(50% + 20.0rem);
    }
    @media (width <= 640px) {
      width:calc(100% - var(--pi-sp-30));
    }
  }

  .contents_list {
    display:grid;
    gap:16.0rem;
    @media (width <= 640px) {
      gap:8.0rem;
    }
  }
  .contents_list-item {
    @media (width > 640px) {
      display:grid;
      grid-template-columns:1fr 80.0rem;
      grid-auto-flow:column;
      gap:10.0rem;
    }
    .img {
      @media (width > 640px) {
        grid-column:2/3;
      }
      @media (width <= 640px) {
        margin-bottom:4.8rem;
        margin-right:calc(var(--pi-sp-30) * -1);
      }
    }
    .text {
      .subheading {
        margin-bottom:2.4rem;
        font-size:1.8rem;
        line-height:1;
        letter-spacing: .12em;
        @media (width <= 640px) {
          font-size:1.4rem;
          letter-spacing: .16em;
        }
      }
      &:not(.subheading) .l-heading-B {
        @media (width > 640px) {
          margin-top:4.8rem;
        }
      }
      .l-heading-B {
        @media (width <= 640px) {
          margin-bottom:3.2rem;
        }
      }
      .desc {
        @media (width <= 640px) {
          padding-right:3.0rem;
        }
      }
      .l-button-A {
        @media (width <= 640px) {
          margin-top:1.6rem;
        }
      }
    }
  }

  .service_list {
    display:grid;
    @media (width > 640px) {
      grid-template-columns: repeat(4,1fr);
      gap:5.6rem;
    }
    @media (width <= 640px) {
      gap:4.0rem;
    }
  }
  .service_list-item {
    @media (width <= 640px) {
      display:grid;
      grid-template-columns:12.0rem 1fr;
      grid-template-rows:auto 1fr;
      align-items: center;
      gap:1.6rem;
    }
    .img {
      @media (width <= 640px) {
      }
    }
    .heading {
      @media (width > 640px) {
        margin-block:1.6rem .8rem;
      }
    }
    .desc {
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        grid-column:1/-1;
        padding-right:3.0rem;
      }
      
      > .p-tg-text-C {
        display:block;
        margin-top:.4rem;
        @media (width <= 640px) {
        }
      }
    }
  }
}

/* ご利用情報
----------------------------------------------------------------------------- */
.stay-information {
  .stay-accordion-btn {
    @media (width > 640px) {
      width: 108rem;
    }
    @media (width <= 640px) {
    }
  }
  .js-accordion-button {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  dd {
    @media (width > 640px) {
      pointer-events: none;
      padding-right: 2.4rem;
    }
    @media (width <= 640px) {
    }
  }
  .js-accordion-group dd {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-top: 0;
    }
  }
}

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