@charset "utf-8";

/* タブレット用 */
@media(max-width: 960px) {
  /*---------------------------------------------------------
  ヘッダー
  ---------------------------------------------------------*/
  #TOP-NAV ul {
    width: 95%;
  }

  /* 「ご案内」「外部リンク」列を横並び(各40%)にすると、
     文言が長い外部リンクがタブレット幅では列からはみ出して
     隣の列と重なってしまうため、縦積みに変更 */
  #TOP-NAV.panelactive ul {
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
    padding: 2rem 0;
  }

  #TOP-NAV-LIST ul .in-link,
  #TOP-NAV-LIST ul .out-link {
    width: 90%;
  }

  /*---------------------------------------------------------
  フッター
  ---------------------------------------------------------*/
  #FOOTER .footer_wrap {
    flex-direction: column;
  }

  #FOOTER .footer_wrap .footer_border,
  #FOOTER .footer_wrap .footer_link {
    display: none;
  }

  /*---------------------------------------------------------
  トップページ
  ---------------------------------------------------------*/
  /* ロゴ */
  #TOP .title_logo {
    top: 40%;
    right: 0;
    left: 0;
    margin: auto;
    width: 400px;
  }

  /* キャッチコピー */
  #TOP .catchcopy {
    bottom: 75px;
    margin-left: 0;
    left: 0;
    right: 0;
    text-align: center;
  }

  /* 新着記事3件 */
  #TOP .notice .post_block {
    flex-direction: column;
    /* align-items: center; */
  }

  #TOP .notice .post_block iframe {
    margin: 1.5rem 0;
    width: revert-layer;
  }

  /* アピールポイント */
  #TOP .info .info_note {
    width: 80%;
    text-align: left;
  }

  /*---------------------------------------------------------
  個別ページ（共通）
  ---------------------------------------------------------*/
  .page-title-note {
    width: 90%;
    margin: 0 auto;
  }

  .page_list {
    width: 95%;
  }

  /*---------------------------------------------------------
  ご案内
  ---------------------------------------------------------*/
  /* マップ */
  #INFO .access-map {
    width: 90%;
  }

  /* ご留意 */
  #INFO .contents-note {
    width: 90%;
    margin: 0 auto;
  }

  /*---------------------------------------------------------
  客室
  ---------------------------------------------------------*/
  /* 全体 */
  #ROOM .main:nth-child(odd) {
    padding: 5rem 0 0;
    flex-direction: column;
  }

  #ROOM .main:nth-child(even) {
    padding: 5rem 0;
    flex-direction: column-reverse;
  }

  /* 画像 */
  #ROOM .main img {
    width: 90%;
    margin: 0 auto;
  }

  /* 文字列グループ */
  #ROOM .main-Word {
    display: flex;
    width: 90%;
    margin: 2rem auto;
    align-items: center;
    justify-content: space-around;
  }

  /* タイトル */
  #ROOM .main .main-title h3 {
    margin: 0 auto;
  }

  /* ボーダー */
  #ROOM .room-border {
    display: none;
  }

  #ROOM .main .main-note_right,
  #ROOM .main .main-note_left {
    font-size: 1rem;
    position: unset;
    width: 80%;
  }

  /*---------------------------------------------------------
  温泉
  ---------------------------------------------------------*/
  /* 説明文章 */
  #SPA .contents-note {
    width: 90%;
    margin: 0 auto;
  }

  /* 説明画像 */
  #SPA .wakanoyu .wakanoyu_img,
  #SPA .shirahata .shirahata_img {
    width: 90%;
  }

  /* 大浴場画像ブロック */
  #SPA .bath .bath_imgblock {
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
  }

  /* 大浴場画像 */
  #SPA .bath .bath_img {
    width: 90%;
    margin: 2rem auto;
  }

  /*---------------------------------------------------------
  お食事
  ---------------------------------------------------------*/
  #MEAL .main-left {
    flex-direction: column-reverse;
  }

  #MEAL .main-right {
    flex-direction: column;
  }

  #MEAL .main-left .main-title,
  #MEAL .main-right .main-title {
    writing-mode: unset;
  }

  #MEAL .main-left p,
  #MEAL .main-right  p {
    margin: 2rem 0;
  }

  #MEAL .main-left img,
  #MEAL .main-right img {
    width: 90%;
  }

  #MEAL .other .img_block {
    flex-direction: column;
    margin: 0;
  }

  #MEAL .other .img_block .img_detail img {
    width: 90%;
  }

  #MEAL .other .img_block .img_detail {
    margin: 2rem 0;
  }

  /*---------------------------------------------------------
  お問い合わせ
  ---------------------------------------------------------*/
  .caution {
    margin: 3rem 0;
  }

  /*---------------------------------------------------------
  プライバシーポリシー
  ---------------------------------------------------------*/
  #POLICY .policy-area {
    padding: 5rem 2rem;
  }

}