/**
* Room CSS
* お部屋探しページのスタイル
*/

/* CSS 変数 */
:root {
  /* カラー */
  --color-primary: #3e3a39;
  --color-main: #7d488f;
  --color-sub-yellow: #ffd900;
  --color-sub-green: #00a55b;
  --color-sub-pink: #ef6181;
  --color-sub-deeppink: #fd155f;
  --color-sub-purple: #9933cc;

  /* フォントサイズ */
  /* --font-size-base: clamp(0.875rem, 0.795rem + 0.33vw, 1rem); */
  --font-size-base: 1rem;
  --font-size-small: clamp(0.75rem, 0.6rem + 0.64vw, 1rem);
  --font-size-xsmall: clamp(0.625rem, 0.438rem + 0.8vw, 0.938rem);
  --font-size-xxsmall: clamp(0.75rem, 0.675rem + 0.32vw, 0.875rem);
  --font-size-h1: clamp(1.5rem, 1.05rem + 1.92vw, 2.25rem);
  --font-size-h2: clamp(1.25rem, 0.875rem + 1.6vw, 1.875rem);
  --font-size-h2-icon: clamp(1.5rem, 1.275rem + 0.96vw, 1.875rem);
  --font-size-h3: clamp(1.125rem, 0.9rem + 0.96vw, 1.5rem);
  --font-size-h4: clamp(1rem, 0.85rem + 0.64vw, 1.25rem);
}

main {
  .site-container {
    .page-header {
      .page-title {
        line-height: 1.5;
      }
    }
  }
}

.event-container {
  .event-container__content {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(
        calc(320px - (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__button {
    background: var(--color-sub-yellow);
    border-radius: calc(clamp(2.813rem, 2.625rem + 0.8vw, 3.125rem) / 2);
    color: var(--color-primary);
    cursor: pointer;
    display: grid;
    place-content: center;
    margin: auto;
    width: clamp(18.75rem, 17.063rem + 7.2vw, 21.563rem);
    height: clamp(2.813rem, 2.625rem + 0.8vw, 3.125rem);

    span {
      display: grid;
      font-size: clamp(0.875rem, 0.725rem + 0.64vw, 1.125rem);
      font-weight: 700;
      text-align: center;
      grid-template-columns: auto 1rem;
      gap: 1rem;
      width: fit-content;

      &:after {
        content: "\f08e";
        font-family: "Font Awesome 5 Free";
        display: block;
      }
    }
  }
} /* .event-container */

.contents-title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.45;
  margin: clamp(0.625rem, 0.25rem + 1.6vw, 1.25rem) 0;
  padding-bottom: 1rem;
  width: 100%;

  &.contents-title--main {
    border-bottom: 2px solid var(--color-main);
    color: var(--color-main);
  }
}

.room-finder {
  border: 2px solid var(--color-main);
  border-radius: 15px;
  margin: clamp(6.75rem, 5.55rem + 5.12vw, 8.75rem) auto
    clamp(3.125rem, 2rem + 4.8vw, 5rem);
  padding: clamp(3.438rem, 2.688rem + 3.2vw, 4.688rem)
    clamp(1.25rem, 0.625rem + 1.6vw, 2.5rem)
    clamp(1.688rem, 1.35rem + 1.44vw, 2.25rem);
  position: relative;
  max-width: 680px;

  &:before {
    content: "";
    background: url(../images/icon_lead_02.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: calc(
      clamp(3.75rem, 2.25rem + 6.4vw, 6.25rem) -
        (clamp(3.75rem, 2.25rem + 6.4vw, 6.25rem) * 2)
    );
    left: 50%;
    transform: translateX(-50%);
    width: clamp(6.25rem, 4.075rem + 9.28vw, 9.875rem);
    height: clamp(6.688rem, 4.362rem + 9.92vw, 10.563rem);
  }

  .room-finder__title {
    font-size: clamp(1.5rem, 1.05rem + 1.92vw, 2.25rem);
    display: grid;
    align-items: center;
    gap: clamp(0.875rem, 0.5rem + 1.6vw, 1.5rem);
    grid-template-columns: clamp(4.25rem, 2.975rem + 5.44vw, 6.375rem) auto;
    margin: auto;
    width: fit-content;
  }

  .room-finder__description {
    font-size: clamp(0.813rem, 0.7rem + 0.48vw, 1rem);
    text-align: center;
  }

  .room-finder__button {
    background: var(--color-main);
    border-radius: calc(clamp(1.875rem, 1.125rem + 3.2vw, 3.125rem) / 2);
    color: #fff;
    cursor: pointer;
    font-size: clamp(0.875rem, 0.725rem + 0.64vw, 1.125rem);
    display: grid;
    place-content: center;
    margin: auto;
    width: clamp(14.375rem, 10.063rem + 18.4vw, 21.563rem);
    height: clamp(1.875rem, 1.125rem + 3.2vw, 3.125rem);
  }
} /* .room-finder */

.list-yarukoto {
  border: 2px solid var(--color-main);
  border-radius: 6px;
  padding: 1em;
  margin: 1em auto;
}

.list-yarukoto ul li {
  list-style: none;
  padding-left: 1.3em;
  position: relative;
  line-height: 2em;
  font-size: 1.1em;

  &:before {
    position: absolute;
    left: 0;
    font-family: "Font Awesome 6 Free";
    content: "\f044";
    color: var(--color-main);
  }
}
.voice-box {
  background: #f9f8ef;
  border-radius: 20px;
  padding: 2em 1em 1.5em;
  position: relative;
  margin-bottom: 2em;

  .voice-balloon {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .voice-balloon span {
    position: relative;
    background: var(--color-main);
    color: #fff;
    border-radius: calc(clamp(2.813rem, 2.625rem + 0.8vw, 3.125rem) / 2);
    padding: 0.3em 1.3em;
    font-size: 0.9em;
    white-space: nowrap;

    &:before {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -8px;
      border: 8px solid transparent;
      border-top: 8px solid var(--color-main);
    }
  }
}

.bg-pattern {
  background-image: url("../images/bg_image.svg");
  background-repeat: repeat;
  background-color: rgb(255 255 255 / 0.75);
  background-blend-mode: lighten;
}

.UnivGo {
  background: #f3e9ec;
  padding: 2em;
}

/**
*アンダーライン
**/
.underline {
  background: linear-gradient(transparent 60%, #f9e600 30%);
}

/* よくある質問アコーディオン */
.question {
  display: block;
  /*デフォルトの三角形を削除*/
  cursor: pointer;
  padding: 10px 10px 10px 40px;
  background: #f3e9ec;
  border-bottom: 1px solid var(--color-main);
  font-weight: bold;
  font-size: 1.1rem;
  position: relative;

  &:after {
    font-family: "Font Awesome 6 Free";
    content: "\f055";
    color: var(--color-main);
    font-size: 1.6rem;
    position: absolute;
    top: calc(50% - 0.5em);
    left: 10px;
    line-height: 1;
    padding: 0;
    pointer-events: none;
  }
}
.faq-acc[open] .question:after {
  content: "\f056";
}
.question::-webkit-details-marker {
  /* Safari-デフォルトの三角形を削除*/
  display: none;
}
.answer {
  overflow: hidden;
  /* padding・marginはここでは設定しない */
}
.answerInner {
  padding: 20px 20px 20px 30px;
}

.register_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.register_list li {
  position: relative;
  padding: 0 0 0 2em;
  margin: 0;
}
.register_list li::before {
  position: absolute;
  left: 0;
  font-family: "Font Awesome 5 Free";
  font-size: 1.2rem;
  font-weight: 400;
  content: "\f14a";
  color: var(--color-main);
}

/**
* Media Queries
*/
@media (min-width: 768px) {
  #event {
    .event-container {
      .event-container__bordered-section {
        margin-bottom: 0;
      }
    }
  } /* #event */
  #register {
    .bg-pattern {
      background-image: none;
    }
  }
}

@media (max-width: 767px) {
  .list-yarukoto ul {
    padding-left: 0;
  }
}