/**
* PC CSS
* roomのスタイル
*/
#room {
  .toc-container {
    margin: 0 auto clamp(2.188rem, 1.25rem + 4vw, 3.75rem);
    max-width: 680px;
  }

  .event-container {
    margin-bottom: 50px;

    .event-container__content {
      display: grid;
      grid-template-columns: repeat(
        auto-fit,
        minmax(
          calc(370px - (clamp(0.938rem, -2.25rem + 13.6vw, 6.25rem) * 2)),
          1fr
        )
      );
      gap: 0 1.25rem;

      .event-container__bordered-section {
        border: 2px solid var(--color-main);
        border-radius: 15px;
        margin-bottom: 30px;
        padding: 42px 16px 16px;
        position: relative;

        .event-container__bordered-section-title {
          background-color: var(--color-main);
          border-radius: 13px 13px 0 0;
          color: #fff;
          text-align: center;
          padding: 0 0 6px;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
        }
      }

      /* .event-container__bordered-section */
    }

    /* .event-container__content */
  }

  /* .event-container */
}

/* ---------- 外部サイトリンクボタン2(カラーバリエーションあり) ---------- */
.btn--outsite {
  /* background: var(--color-sub-yellow); */
  border-radius: 9999px !important;
  /* color: var(--color-primary); */
  cursor: pointer;
  display: grid;
  place-content: center;
  padding: 12px 0;
  margin: auto;
  width: 100%;

  span {
    display: grid;
    font-size: var(--font-size-base);
    font-weight: 700;
    text-align: center;
    grid-template-columns: auto 1rem;
    gap: 1rem;

    &:after {
      content: "\f08e";
      font-family: "Font Awesome 6 Free";
      display: block;
    }
  }

  &.btn--outsite--primary {
    background: var(--color-primary);
  }

  &.btn--outsite--main {
    background: var(--color-main) !important;
    color: #fff !important;
  }

  &.btn--outsite--sub-yellow {
    background: var(--color-sub-yellow);
    color: var(--color-primary);
  }

  &.btn--outsite--sub-green {
    background: var(--color-sub-green);
  }

  &.btn--outsite--sub-pink {
    background: var(--color-sub-pink);
    color: var(--color-primary);
  }

  &.btn--outsite--sub-deeppink {
    background: var(--color-sub-deeppink);
    color: var(--color-primary);
  }

  &.btn--outsite--sub-purple {
    background: var(--color-sub-purple);
  }

  &:hover {
    color: #fff;
  }
}