@charset "utf-8";

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


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

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

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

  /* --------MV--------- */
  .mv {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
  }

  .mv-item.left {
    width: 70%;
    margin-right: 0;
    margin-left: auto;
    margin-top: 3rem;
  }

  /* 左 */
  .mv-item.left img:first-child {
    flex: 1;
    aspect-ratio: 16 / 9;
  }

  .mv-item.left img:last-child {
    flex: 1;
    aspect-ratio: 16 / 9;
    margin-top: 15px;
  }

  /* 真ん中 */
  .mv-item.cont {
    display: block;
    width: 30%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 10;
  }

  .mv-item .logo-wrap {
    width: 100%;
  }

  .mv-logo {
    margin-right: auto;
    margin-left: auto;
  }


  /* 右 */
  .mv-item.right {
    width: 70%;
    margin-right: 0;
    margin-left: auto;
    margin-top: 15px;
    padding: 0;
  }

  .mv-item.right img {
    aspect-ratio: 16 / 9;
  }

  /* --------イントロ--------- */
  .intro .upper {
    display: block;
  }

  .intro .upper .txt {
    margin-top: 8rem;
  }

  .intro .vertical-wrap {
    margin-right: auto;
    margin-left: auto;
  }

  /* 下のセクション */
  .intro .under {
    display: block;
  }

  .intro .under .pic1 {
    width: 95%;
  }

  .intro .under .txt {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    padding: 8rem 0;
  }

  .intro .under .pic2 {
    width: 45%;
    margin-right: 0;
    margin-left: auto;
  }

  .intro .under .deco-pic-l {
    position: initial;
  }

  .intro .pic-rt {
    width: 80%;
    margin-top: 8rem;
  }

  /* --------アバウト--------- */
  .about {
    margin-top: 20rem;
  }

  .about::after {
    top: 0;
    bottom: auto;
    left: 0;
    width: 95%;
    height: 100%;
  }

  .about .inner {
    width: 100%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-top: 8rem;
  }

  /* box01 */
  .about .box01 {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10rem;
  }

  .about .box01 .btn-box {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .about .box01 .btn-box li {
    width: 70%;
  }

  /* box02 */
  .about .box02 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row-reverse;
  }

  .about .vertical-wrap {
    flex: 3;
    width: 100%;
    justify-content: flex-start;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    margin-top: -15rem;
    gap: 0;
  }

  .about .vertical {
    display: block;
    font-size: 3.6rem;
    line-height: 1;
  }

  /* safariのフォントバグ修正 */
  .vertical+.vertical {
    margin-right: -0.2em;
    /* ←ここで詰める */
  }

  .about .box02 .pic {
    flex: 7;
    aspect-ratio: 3 / 2;
  }

  /* --------ルーム--------- */
  .room {
    margin: 10rem 0;
  }

  .room .tl-wrap {
    width: 80%;
  }

  .tab_buttons {
    margin-bottom: 5rem;
  }

  .room_box {
    flex-direction: column;
  }

  .room_card {
    width: 100%;
  }

  /* --------大浴場--------- */
  .pbbath {
    display: block;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 5rem 0 0;
  }

  .pbbath::after {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    z-index: 1;
    content: '';
    width: 80%;
    height: 40%;
  }

  .pbbath .cont {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
  }

  .pbbath .pic {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 8rem;
  }

  /* --------サービス--------- */
  .service .tl-wrap {
    display: block;
  }

  .service .tl-wrap p {
    margin-top: 5rem;
  }

  .service .card-list {
    flex-flow: column;
  }

  /* --------朝食--------- */
  .breakfast .inner {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
  }

  .breakfast .item01 {
    flex-flow: column;
    gap: 3rem;
  }

  /* item01 */
  .breakfast .item01 .pic {
    width: 100%;
  }

  .breakfast .item01 .txt {
    width: 100%;
  }

  /* item02 */
  .breakfast .item02 {
    margin-top: 15rem;
    flex-flow: column;
  }

  /* item03 */
  .breakfast .item03 {
    margin-top: 15rem;
  }

  /* --------施設案内--------- */
  .facilities {
    width: 90%;
  }

  .facilities .common-tl {
    margin-right: auto;
    margin-left: auto;
  }

  /* --------会員 SFホテルズ--------- */
  .member {
    width: 90%;
  }

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

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

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

  /* --------フッター --------- */
  footer {
    padding-bottom: calc(62px + 3rem);
    /* 固定予約ボタン高さ */
  }

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

  footer .box02 {
    width: calc(100% - (25px + 2rem));
    /* page-topボタン分 */
    margin-top: 5rem;
  }

  .ft-sfhotels {
    width: 100%;
  }

  footer .box02 .register {
    font-size: 2rem;
  }

  footer .box02 nav ul {
    justify-content: start;
  }

  footer .page-top {
    bottom: 28rem;
  }
}


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

  /* 左 */
  .mv-item.left {
    width: 60%;
  }

  .mv-item.left img:first-child {
    aspect-ratio: 3 / 2;
  }

  .mv-item.left img:last-child {
    aspect-ratio: 3 / 2;
  }

  /* 真ん中 */
  .mv-item.cont {
    width: 40%;
  }

  .mv-logo {
    padding: 0 15px;
  }

  /* 右 */
  .mv-item.right {
    width: 60%;
  }

  .mv-item.right img {
    aspect-ratio: 3 / 2;
  }

  /* --------朝食-------- */
  .breakfast .detail li {
    padding: 10px 20px;
  }

  /* --------ルーム--------- */
  .tab_content {
    padding: 5rem 15px;
  }

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

  /* 会員 SFホテルズ */

  .benefits-list {
    flex-flow: column;
  }

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

}

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