@charset "utf-8";

/* *****************************************
PC調整
******************************************** */
@media screen and (max-width:1150px) {}


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

  /* ===========ルーム=========== */
  .room {
    display: block;
  }

  .room-type {
    width: 100%;
  }

  .room .pic-wrap {
    margin-top: 5rem;
  }

  /* ===========サービス=========== */
  .service {
    width: 90%;
  }

  .sv-head {
    display: block;
  }

  .sv-head .c-tl {
    margin-bottom: 5rem;
  }

  .service .c-tl span {
    text-align: start;
  }

  /* サービスリスト */
  .sv-list {
    gap: 8rem 5%;
  }

  .sv-list li {
    width: calc((100% - 10%) / 3);
  }

  /* ===========小セクション共通=========== */
  .c-sec {
    width: 90%;
  }

  .c-sec-flex {
    width: 100%;
    display: block;
    margin-top: 8rem;
  }

  .c-sec-flex .pic02 {
    width: 100%;
    margin-right: 0;
    margin-left: auto;
    margin-top: 3rem;
  }

  .c-sec-flex .sub-c-tl {
    margin-bottom: 3rem;
  }

  /* ==========施設======== */
  .facilities-list {
    width: 100%;
  }

  /* ==========アクセス======== */
  .access .cont {
    width: 100%;
  }

  /* ==========会員 SFホテルズ======== */
  .member .inner {
    flex-flow: column;
  }

  /* ===========観光=========== */



  /* ===========フッター=========== */
  footer .inner {
    max-width: 280px;
    display: block;
  }

  /* box01 */
  footer .box01 .ftlogo {
    margin-right: auto;
    margin-left: auto;
  }

  footer .box01 h2 {
    text-align: center;
  }

  footer .box01 address {
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
  }

  footer .box02 {
    width: fit-content;
    padding: 3rem 0;
  }

  .terms-list {
    width: fit-content;
  }

}

/* *****************************************
タブレット
******************************************** */
@media screen and (max-width:768px) {
  .sp-br {
    display: block;
  }

  /* =========== MV =========== */
  .mv-txt {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    text-align: start;
  }

  .mv-txt h1 {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
  }

  .mv-txt p {
    font-size: 2.8rem;
  }

  /*  ===========サブナビゲーション=========== */
  .intro-nav {
    display: block;
  }

  .intro-nav .card {
    width: 100%;
    aspect-ratio: 7 / 3;
  }

  .intro-nav .cont {
    width: 100%;
    padding-left: 2rem;
  }

  .intro-nav .cont span {
    font-size: 2rem;
  }

  .intro-nav .cont p {
    font-size: 2rem;
  }

  /* ===========イントロ=========== */
  .intro {
    flex-flow: column;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
  }

  .intro .pic {
    width: 80%;
    aspect-ratio: 3 / 1;
    overflow: hidden;
  }

  .intro .txt {
    position: relative;
    width: 80%;
    margin-bottom: 8rem;
  }

  .scroll_down {
    position: absolute;
    top: -5rem;
    left: 0;
  }

  /* ===========ルーム=========== */
  .room_box {
    flex-direction: column;
    align-items: start;
  }

  .room_card {
    width: 100%;
  }

  /* ==========共通=========== */
  .c-tl {
    font-size: 3.2rem;
    white-space: wrap;
  }

  .c-tl span {
    font-size: 1.6rem;
  }

  .sub-c-tl {
    white-space: wrap;
  }

  .sub-c-tl span {
    font-size: 1.6rem;
  }

  /* =========小セクション共通========= */
  .c-sec-flex {
    width: 98%;
    margin-top: 5rem;
  }

  /* .c-sec-flex .txt {
    padding: 8rem 60px 8rem 3rem;
  } */

  .c-sec-flex .pic02 {
    width: 100%;
  }


  /* ========レストランお食事処========= */
  .buffe {
    flex-flow: column;
    flex-direction: column-reverse;
  }

  /* ========サービス======== */
  .sv-list {
    gap: 8rem 5%;
  }

  .sv-list li {
    width: calc((100% - 5%) / 2);
  }

  .sv-list li h3 {
    font-size: 1.8rem;
  }

  .sv-list li p {
    font-size: 1.4rem;
  }


  /* ========施設案内======== */
  .facility {
    width: 90%;
  }

  .facility .c-tl {
    margin-right: auto;
    margin-left: auto;
  }

  .facility .c-tl span {
    display: block;
    text-align: center;
  }

  /* =========会員 SFホテルズ======== */
  .member .inner {
    width: 95%;
  }

  .benefits-list {
    justify-content: center;
    align-items: stretch;
    gap: 15px;
  }

  .benefits-list li {
    flex: initial;
    width: calc((100% - 15px) / 2);
    padding: 3rem 10px;
  }

  /* =========観光========= */
  .exp-head .pic {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    opacity: 0.9;
  }

  /* ギャラリー */
  .exp-gallary .item {
    margin-bottom: 3rem;
  }

  /* ========アクセス======== */
  .access .inner {
    width: 90%;
  }

  .access .c-tl {
    margin-right: auto;
    margin-left: auto;
  }

  .access .c-tl span {
    text-align: center;
  }

  .access .cont {
    flex-flow: column;
  }

  /* ========フッター ======== */

  footer .inner {
    width: 90%;
    flex-flow: column;
  }

  footer .box02 {
    margin-top: 5rem;
  }
}


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

  /* =========== MV =========== */


  /* ===========ルーム=========== */
  /* タブボタン */
  .tab_buttons {
    flex-flow: column;
    gap: 10px;
  }


  /* ===========サービス=========== */
  /* サービスリスト */
  .sv-list li {
    width: 100%;
  }

  .benefits-list li {
    width: 100%;
    padding: 3rem;
  }
}

/* *****************************************
SP最大サイズ
******************************************** */
@media screen and (max-width:375px) {}