@charset "utf-8";

/* *****************************************
PC
******************************************** */
@media screen and (max-width:1100px) {

  /* --------------------
  ハンバーガーメニュー切り替えに伴う調整
  -------------------- */
  /* 共通設定 */
  .cont-width {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
  }

  .mv-upper {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
  }

  /*  ----プラン料金---- */
  .price .sec-flex {
    display: block;
  }

  .price .sec-flex .pic {
    margin-top: 5rem;
  }

  /* =========大浴場========= */
  .pbbath .cont {
    display: block;
  }

  .pbbath .bg {
    width: 100%;
    margin-bottom: 5rem;
  }

  /* =========朝食========= */
  .breakfast {
    padding-left: 0;
  }
}

/* ****************************************
タブレット
******************************************* */
@media screen and (max-width:960px) {

  /* ==========ホテル========= */
  .hotel-about {
    display: block;
  }

  .hotel-about .box01 {
    margin-bottom: 5rem;
  }

  .tbsadoTl-wrap {
    margin-bottom: 5rem;
  }
}

/* *****************************************
スマホ
******************************************** */
@media screen and (max-width:768px) {

  /* =========共通設定========= */
  .c-p {
    font-size: 1.6rem;
  }

  .c-txt-tl {
    font-size: 2rem;
  }

  /* =========メインビジュアル========= */
  .mv-upper {
    width: 100%;
    background-position: center 20%;
  }

  .mv-upper::before {
    top: 2rem;
    left: 2rem;
    width: 50px;
  }

  .mv-upper .cont-pic {
    width: 50%;
    right: 2rem;
    left: auto;
    bottom: 15%;
  }

  .mv-upper .cont-pic .mv-sob {
    width: 70%;
  }

  /* =========イントロ========= */
  .intro .cont {
    display: block;
  }

  .intro .pic-container .illust02 {
    position: absolute;
    bottom: -5rem;
    top: auto;
    left: -5rem;
    z-index: 1;
    width: 130px;
    height: auto;
  }

  .intro .pic-container .illust03 {
    position: absolute;
    right: -90px;
    bottom: -65px;
    z-index: 1;
    width: 180px;
    height: auto;
  }

  .intro .cont .txt-wrap {
    margin-bottom: 5rem;
  }

  /* =========朝食========= */
  .sec-flex {
    flex-flow: column;
    gap: 5rem;
  }

  .bf-list li {
    flex-wrap: wrap;
  }

  .bf-list .list-price {
    width: 100%;
  }

  .bf-list .cont {
    padding-left: 15px;
  }

  .bf-list .cont h4 {
    text-align: start;
    font-size: 2.4rem;
  }

  .bf-list .list-price {
    font-size: 2.4rem;
    padding-left: 15px;
  }

  /* --------島ごはん 若草-------- */
  .menu-container li .pic {
    flex: 1;
  }

  .menu-container li .txt {
    flex: 1;
  }

  .menu-container li .txt .c-p {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .menu-container li h6 {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }

  /* =========大浴場========= */
  .pbbath {
    padding: 5rem 3rem;
  }

  /* =========宿泊プラン特典========= */
  .benefits .inner {
    padding: 5rem 3rem;
  }

  /* =========注意事項========= */
  .at-list li address {
    font-size: 1.6rem;
  }

}

/* *****************************************
スマホ中
******************************************** */
@media screen and (max-width:572px) {

  /* =========MV========= */
  .mv-upper .cont-pic {
    width: 70%;
  }

  .mv-detail {
    display: block;
    padding-top: 5rem;
  }

  .mv-detail .mv-btn {
    margin-top: 5rem;
  }

  .mv-detail .mv-btn a {
    margin-right: auto;
    margin-left: auto;
  }

  .mv-detail .mv-btn a:not(:last-child) {
    margin-bottom: 2rem;
  }

  /* =========朝食========= */

  .breakfast {
    padding-left: 0;
  }

  .bf-list .cont {
    width: 100%;
    padding-left: 15px;
  }

  .bf-list li {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .bf-list .cont h4 {
    font-size: 2rem;
  }

  /* =========宿泊プラン特典========= */
  .benefits .card-list {
    flex-flow: column;
  }

  .benefits .card {
    width: 100%;
  }

  /* =========大浴場========= */
  .pbbath {
    padding: 4rem 2rem;
  }

  .pbbath .bg {
    padding: 3rem 2rem;
  }

  .pbbath .bg h3 {
    font-size: 1.8rem;
  }

  .pbbath .txt .pbTl-wrap {
    flex-wrap: wrap;
  }

  .pbTl-wrap h4 {
    margin-bottom: 15px;
  }

  /* ==========特典========== */
  .benefits .inner {
    padding: 4rem 2rem;
  }

  .benefitsTL-wrap h2 {
    font-size: 3rem;
  }

  .benefitsTL-wrap p {
    font-size: 2rem;
  }

  .benefitsTL-wrap img {
    width: 200px;
  }

  /* =========注意事項========= */
  .at-list li {
    padding: 5rem 2rem;
  }

  /* =========フッター========= */
  footer .inner {
    justify-content: center;
    gap: 30px;
  }
}

/* *****************************************
スマホ小
******************************************** */
@media screen and (max-width:375px) {}