@charset "utf-8";

@media (max-width: 900px) {
  .mv {
    height: auto;
    flex-flow: column;
    gap: 3rem;
  }

  .mv .picBox {
    flex: auto;
    width: 60%;
  }

  .mv .txtBox .catch {
    margin-right: auto;
    margin-left: auto;
  }

  .promotion section {
    width: 70%;
  }

  .list-item h5 {
    font-size: 1.6rem;
  }
}

@media (max-width: 768px) {

  /* -------MV------- */
  .mv .txtBox .catch {
    font-size: 1.6rem;
    padding: 10px 20px;
  }

  .mv .txtBox h1 {
    font-size: 3rem;
  }

  /* -------注意事項------- */
  .note p {
    font-size: 2rem;
  }

  .note ul li {
    font-size: 1.4rem;
  }

  /* -------クーポン------- */
  .promotion section h2 {
    font-size: 2rem;
  }

  .promotion section .textBox p {
    font-size: 60px;
  }

  .promotion section .textBox span {
    font-size: 1.8rem;
  }

  .coupon span {
    font-size: 3.4rem;
  }

  /* -------対象ホテル------- */
  .target-wrapper h3 {
    font-size: 2.4rem;
  }

  /* -------カテゴリ------- */
  .luxury::before {
    font-size: 40px;
  }

  .executive::before {
    font-size: 40px;
  }

  .hiyori::before {
    font-size: 40px;
  }

  .tabino::before {
    font-size: 40px;
  }

  .original::before {
    font-size: 40px;
  }

  /* ホテル内容 */
  .hotel-box h4 {
    font-size: 2rem;
  }

  .hotel-box {
    padding: 5rem 0 5rem 5rem;
  }

  /* ホテルカード */
  .list-item {
    width: calc((100% - 48px) / 3);
    /* gap×2 を引いて3等分 */
  }

  .list-item h5 {
    font-size: 1.4rem;
  }
}

@media (max-width: 572px) {

  /* -------MV------- */
  .mv .txtBox h1 {
    font-size: 2.4rem;
  }

  /* -------注意事項------- */
  .note {
    padding: 5rem 3rem;
  }

  /* ホテルカード */
  .list-item {
    width: calc((100% - 24px) / 2);
    /* gap を引いて2等分 */
  }

  /* -------クーポン------- */
  .promotion section {
    width: 90%;
  }

  .promotion section h2 {
    font-size: 1.6rem;
    text-align: start;
  }

  /* -------フッター------- */
  footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  footer small {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {

  /* ホテルリスト */
  .hotel-list {
    gap: 3rem 15px;
  }

  /* ホテルカード */
  .list-item {
    width: calc((100% - 15px) / 2);
    /* gap を引いて2等分 */
  }
}