@charset "utf-8";

@media screen and (max-width: 768px) {

  /* 固定ボタン */
  .book-btn span {
    font-size: 1.6rem;
    padding: 5px 40px;
  }

  /* メインビジュアル */
  .mv {
    height: 110vh;
  }

  .m-tl {
    padding: 0 3rem;
    top: 20%;
  }

  /* スライダー */
  .swiper-container {
    position: initial;
    transform: none;
    width: 90%;
    height: 90vh;
    padding-top: 5rem;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  /* 共通 */

  .tl {
    font-size: 2rem;
  }

  .tl span {
    font-size: 5rem;
  }

  .subtl {
    font-size: 1.8rem;
  }

  .subtl span {
    font-size: 4rem;
  }

  /* 特典カード */
  .card-box {
    gap: 5rem 0;
  }

  .card {
    width: 48%;
  }

  .card h3 {
    font-size: 2rem;
    line-height: 1;
    color: #000;
    text-shadow:
      3px 3px 0 #DBF227,
      -3px 3px 0 #DBF227,
      -3px -3px 0 #DBF227,
      3px -3px 0 #DBF227;
    margin-bottom: 25px;
  }

  .tbsado .upper .tl {
    position: absolute;
    top: 0;
    left: 0;
  }

  .tbsado .pic {
    aspect-ratio: 3 / 2;
  }

  .tbsado .under {
    flex-flow: column;
  }

  .tbsado .under .txt {
    flex: auto;
  }

  .tbsado .under .pic {
    flex: auto;
    width: 100%;
  }
}

@media screen and (max-width: 624px) {

  /* 特典カード */
  .card-box {
    flex-flow: column;
  }

  .card {
    width: 100%;
  }

  /* プランサービス */
  .plan-service .item {
    flex-flow: column;
  }

  .plan-service .txt {
    flex: auto;
    width: 100%;
  }

  .plan-service .pic {
    flex: auto;
  }

  /* その他 */
  .other .item ol {
    flex-flow: column;
  }
}

@media screen and (max-width: 480px) {

  /* 共通 */
  p {
    font-size: 1.4rem;
    font-weight: 400;
  }
  /* メインビジュアル */
  .m-tl {
    width: 100%;
    padding: 0 2rem;
  }

  /* イントロ  */
  .intro p {
    margin-bottom: 3rem;
    padding: 0 2rem;
  }

  /* たび佐渡 */
  .tbsado .under .txt h3 {
    font-size: 1.8rem;
  }
/* 宿泊料金 */
  .fee ul {
    padding: 15px;
  }

  .fee table th {
    font-size: 1.6rem;
  }

  .fee table td {
    font-size: 1.6rem;
  }

}