@charset "utf-8";

/* スマホ用 */
@media(max-width: 500px) {

  /*---------------------------------------------------------
  共通
  ---------------------------------------------------------*/
  /* スマホのみ改行 */
  .sp_br {
    display: block;
  }

  /* ページタイトル */
  .page-title-note {
    text-align: left;
  }

  /*---------------------------------------------------------
  ヘッダー
  ---------------------------------------------------------*/
  /* 予約アイコン */
  header .reserve_block {
    display: none;
  }

  /* メニューボタン */
  .menubtn {
    width: 60px;
    height: 60px;
  }

  .menubtn span:nth-of-type(1),
  .menubtn span:nth-of-type(3) {
    height: 3px;
    width: 40px;
    left: 10px;
  }

  .menubtn span:nth-of-type(1) {
    top: 10px;
  }

  .menubtn span:nth-of-type(2) {
    top: 21px;
    left: 10px;
    font-size: 13px;
  }

  .menubtn span:nth-of-type(3) {
    top: 48px;
  }

  /* アクティブ */
  .menubtn.active span:nth-of-type(1) {
    top: 23px;
    left: 7px;
    width: 45px;
  }

  .menubtn.active span:nth-of-type(3) {
    top: 35px;
    left: 7px;
    width: 45px;
  }

  /* リンク */
  #TOP-NAV.panelactive ul {
    flex-direction: column;
    align-items: center;
  }

  #TOP-NAV li {
    line-height: 3.5rem;
  }

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

  /* 予約アイコン */
  header .reserve-link {
    display: block;
    margin-top: 1rem;
  }

  header .reserve_link {
    background-color: #fff;
    margin: 0.5rem 0;
    padding: 15px 30px;
    width: 100%;
  }

  /* スマホでは画面外にはみ出しやすいため、メニュー内の外部リンクは非表示
     （「ゆもみねっと」「泉質主義」「湯の華会」はフッターやページ内からも辿れます） */
  #TOP-NAV-LIST ul .out-link {
    display: none;
  }

  /*---------------------------------------------------------
  フッター
  ---------------------------------------------------------*/
  #FOOTER .footer_wrap {
    width: 90%;
  }

  /*---------------------------------------------------------
  先頭へ
  ---------------------------------------------------------*/
  #PAGE_TOP {
    right: 1rem;
    bottom: 1rem;
  }

  #PAGE_TOP a img {
    width: 2.5rem;
  }

  /*---------------------------------------------------------
  トップページ
  ---------------------------------------------------------*/
  /* メインビジュアル：スマホ版は別画像を使用。
     assets/images/top/slider/内の 01_sp.webp〜05_sp.webp を
     差し替えるだけでスマホ表示用の画像を変更できます
     （現状はPC版と同じ画像を仮で複製してあります）。 */
  #TOP .slider-item01 {
    background-image: url(../images/top/slider/01_sp.webp);
  }

  #TOP .slider-item02 {
    background-image: url(../images/top/slider/02_sp.webp);
  }

  #TOP .slider-item03 {
    background-image: url(../images/top/slider/03_sp.webp);
  }

  #TOP .slider-item04 {
    background-image: url(../images/top/slider/04_sp.webp);
  }

  #TOP .slider-item05 {
    background-image: url(../images/top/slider/05_sp.webp);
  }

  /* メインビジュアル：スマホはスワイプで切り替えられるため、
     誤タップしやすい矢印ボタンは非表示にしてドットのみ表示 */
  #TOP .slick-prev,
  #TOP .slick-next {
    display: none;
  }

  #TOP .slick-dots {
    margin-top: -30px;
  }

  #TOP .slick-dots button {
    width: 10px;
    height: 10px;
  }

  /* ロゴ */
  #TOP .title_logo {
    top: 25px;
    right: 15px;
    left: auto;
    width: 170px;
  }

  /* SNSリンク */
  header .sns_block {
    top: 20px;
    left: 95px;
  }

  header .sns_block .sns_link {
    font-size: 20px;
  }

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

  #TOP .catchcopy .catchcopy-title {
    font-size: 1.2rem;
  }

  #TOP .catchcopy .catchcopy-note {
    margin: 1rem 0;
  }

  /* 投稿記事 */
  #TOP .notice {
    padding: 10rem 1rem;
  }

  #TOP .notice h3 {
    font-size: 1.5rem;
    padding-bottom: 1rem;
  }

  /* 新着3件 */
  #TOP .notice .post_block iframe {
    margin: 1rem 0;
    width: 90%;
  }

  /* アピールポイント */
  #TOP .info {
    padding: 5rem 0;
  }

  #TOP .info .info_note {
    width: 90%;
  }

  #TOP .info .info_img {
    width: 90%;
  }

  /*---------------------------------------------------------
  個別ページ（共通）
  ---------------------------------------------------------*/
  .page-title h1 {
    font-size: 2.5rem;
  }

  .page_separate {
    width: 95%;
  }

  .page-title {
    padding-top: 10rem;
    padding-bottom: 10rem;
    height: auto;
  }

  .page_table {
    width: 100%;
  }

  .page_table tbody tr {
    display: grid;
  }

  .page_list li {
    margin: 0 0 0 2rem;
  }

  /*---------------------------------------------------------
  ご案内
  ---------------------------------------------------------*/
  #INFO .contents-note {
    text-align: start;
  }

  /*---------------------------------------------------------
  客室
  ---------------------------------------------------------*/
  #ROOM .main-Word {
    flex-direction: column;
  }

  #ROOM .main .main-title h3 {
    font-size: 2rem;
  }

  #ROOM .main .main-note_right,
  #ROOM .main .main-note_left {
    width: 95%;
  }

  /*---------------------------------------------------------
  温泉
  ---------------------------------------------------------*/
  #SPA .contents-note {
    text-align: left;
  }

  #MEAL .main-left .main-title,
  #MEAL .main-right .main-title {
    font-size: 3rem;
  }

  /*---------------------------------------------------------
  問い合わせ
  ---------------------------------------------------------*/
  .caution {
    padding: 2rem;
  }

  .caution .caution-title {
    text-align: center;
  }

  .caution-note {
    text-align: left;
  }

  #CONTACT h3 {
    width: 90%;
    text-align: center;
  }

  #CONTACT .wp-block-contact-form-7-contact-form-selector {
    width: 100%;
  }

  #CONTACT .wpcf7 p {
    width: 90%;
    margin: 2rem auto;
  }

  #CONTACT .wpcf7 p .wpcf7-textarea {
    width: 100%;
  }
}

/* スマホ用 */
@media(max-width: 350px) {}