@media screen and (max-width: 48em) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }

  .header {
    margin-top: 3.2rem;
  }

  .container {
    padding: 0 2rem;
  }

  .title {
    font-size: 3.2rem;
    top: 2.5rem;
  }
  .title span {
    letter-spacing: -.4rem;
  }

  .header_text {
    font-size: 1.8rem;
    bottom: 2rem;
  }

  .present_title {
    font-size: 2.4rem;
  }

  .present__content {
    flex-direction: column-reverse;
  }

  .present__content-text {
    padding: 2rem 0;
    margin: 2rem;
    font-size: 1.6rem;
  }

  .present__content-text::before {
    height: 0;
    width: 100%;
    top: inherit;
    bottom: 0;
  }


  #comicroom {
    padding: 0 2rem;
  }

  .comicroom__header-title {
    font-size: 2.8rem;
    letter-spacing: 1.12px;
  }

  .comicroom__content-titte {
    font-size: 1.8rem;
    letter-spacing: 1.08px;
    text-align: center;
  }

  .comicroom__time-title {
    font-size: 1.8rem;
    letter-spacing: 1.08px;
  }

  .comicroom__plan {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
  .comicroom__plan:not(:last-child) {
    padding-bottom: 2rem;
  }
  .plan {
    gap: 3rem;
  }

  #rewards {
    padding: 0 2rem;
  }

  .rewards-container {
    flex-direction: column;
    align-items: center;
  }

  .rewards__content {
    max-width: 51.5rem;
  }

  .rewards__img img {
    max-width: 100%;
  }

  .rewards__btn .plan_button {
    width: 32rem;
    margin: 0 auto;
  }

  .contact__container {
    padding: 2rem;
  }
  .contact__inner {
    padding: 4rem 2rem;
  }
  .contact__content {
    flex-direction: column;
    gap: 4rem;
  }

  .hotel__details-title {
    font-size: 2rem;
  }
  .hotel__details-address {
    font-size: 1.4rem;
  }

  .logo__container {
    gap: 2rem;
  }
  .hotel-name {
    font-size: 1.4rem;
  }

  .present__content {
    background-color: white;
  }

  .present__content-img img {
    /* max-height: 25rem; */
    border-radius: 50%;
    background-color: #eee;
  }
}

@media screen and (max-width: 31.25em) {
  /* .title {
    font-size: 3.5rem;
  }

  .header_text {
    font-size: 1.9rem;
  } */



  .comicroom__header-cont {
    padding: 3.5rem 0;
  }
  .comicroom__header::before {
    content: url(../img/comicroom-sp.svg);
    top: -0.5rem;
  }

  #breakfast .comicroom__header::before {
    content: url(../img/breakfast-sp.svg);
    top: -0.5rem;
  }
}

@media screen and (max-width: 25em) {
  .title {
    /* font-size: 2rem; */
  }
  .title span {
    letter-spacing: -.45rem;
  }

  .present_title {
    font-size: 1.8rem;
  }

  .comicroom__header {
    padding-left: 5rem;
  }

  .present__content-text {
    /* font-size: 1.6rem; */
  }

  .comicroom__content-text {
    font-size: 1.6rem;
  }
  .text-sm {
    font-size: 1.2rem;
  }

  .plan {
    gap: 1rem;
  }

  .rewards__content-title {
    font-size: 1.8rem;
    letter-spacing: 0.72px;
  }
  .rewards__content-text {
    letter-spacing: 0.1px;
    font-size: 1.4rem;
  }

  .contact-title {
    font-size: 2.4rem;
    letter-spacing: 0.96px;
    text-align: center;
  }

  .footer__btn .plan_button {
    max-width: 29.5rem;
  }

  .hotel-name {
    /* gap: 1rem; */
  }

  .hotel__details-title {
    font-size: 1.8rem;
  }

  .present_title {
    /* margin: 3.2rem 0 0 0; */
    margin-bottom: 0rem;
  }
}

@media screen and (max-width: 23.4375em) {
  .title {
    /* font-size: 3.2rem; */
    letter-spacing: 1.28px;
  }

  .header_text {
    font-size: 1.8rem;
    letter-spacing: 1.08px;
  }

  .plan_text {
    /* letter-spacing: -.01rem; */
  }
}