/* スマホ・タブレット用（2026-10-22 追加）。パソコン表示（920px以上）には効かない */
.sp-only { display: none; }

@media (max-width: 919px) {
  html { overflow-y: auto; -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; background-size: auto; }
  .sp-only { display: block; }
  .pc-only { display: none !important; }

  #container, #contents, #main, #main_contents, #page, #header, #footer,
  .footer_box, .sub, .text, .text2, #title, #movie, .movie_box,
  .info, .info_box, .ba_02, .ba_03, .ba_04, .message, .message2,
  .i_title, .i_text_box, .pol_m, .pol_m0, dl.fo, .fo_box {
    width: auto !important;
    max-width: 100%;
    float: none !important;
    height: auto;
    box-sizing: border-box;
  }
  #container { background: #fff; padding-bottom: 72px; }
  #contents { padding: 0; }
  #main { margin: 0 !important; padding: 0 14px; }
  img, iframe, video { max-width: 100% !important; height: auto; }
  iframe { width: 100% !important; }
  .text iframe, #main_contents iframe { min-height: 260px; }

  /* ヘッダー（ロゴ＋電話） */
  #header {
    height: auto;
    background: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 2px solid #ca994f;
  }
  #header h1 a {
    float: none;
    display: block;
    width: 200px;
    height: 58px;
    background-size: 600px auto;
  }
  #header p { display: none; }
  #header + .clear { display: none; }
  .sp-tel-head {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    color: #73451a;
    text-decoration: none;
    border: 1px solid #ca994f;
    border-radius: 8px;
    padding: 6px 10px;
    background: #fffaf0;
  }
  .sp-tel-head b { display: block; font-size: 15px; }

  /* メニュー（画像ボタン→文字のボタン） */
  #menu { width: auto; float: none; margin: 12px 0 4px; }
  /* ul内に があるためgridは使わず、文字幅0のinline-blockで2列に */
  #menu ul { width: auto !important; font-size: 0; margin: 0 -3px; }
  #menu ul li, li.m01, li.m02, li.m03, li.m04, li.m05, li.m06, li.m07, li.m08, li.m09 {
    display: inline-block; vertical-align: top; float: none;
    width: calc(50% - 6px) !important; height: auto; margin: 0 3px 6px; box-sizing: border-box;
  }
  #menu ul li a, li.m01 a, li.m02 a, li.m03 a, li.m04 a, li.m05 a, li.m06 a, li.m07 a, li.m08 a, li.m09 a {
    width: auto;
    height: auto;
    text-indent: 0;
    background: linear-gradient(#8a5a2b, #6b4119);
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    padding: 13px 8px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
  }
  #menu ul li a:hover { background: #a1662e; }
  #menu .clear { display: none; }

  /* 予約・LINE・資料・住所 */
  .yoyaku { margin: 12px 0; text-align: center; }
  .yoyaku img { display: block; margin: 0 auto 8px; }
  .yoyaku a img[alt="友だち追加"] { height: 44px !important; width: auto; }
  .siryo_download { text-align: center; margin: 0 0 8px; }
  .siryo_download input { max-width: 260px; width: 100%; height: auto; }
  .menu2 { display: none; }

  /* トップ */
  #main_contents { margin-top: 10px !important; }
  #movie { height: auto !important; padding: 0; }
  .movie_box { height: 0 !important; padding-top: 28.4%; background-size: contain; }
  #page { margin-top: 14px; }
  .info, .ba_02, .ba_03, .ba_04 { margin: 0 0 18px; }
  .info_t a, .ba_02 h5, .ba_03 h5, .ba_04 h5 { float: none; display: block; width: 310px; max-width: 100%; }
  .info_box p, .info_box h5 a, .i_date, .i_text { float: none; font-size: 15px; }
  .info_box h5 a { display: block; padding: 2px 0 4px; }
  .message, .message2 { font-size: 15px; line-height: 1.7; }
  .message table, .message2 table { width: 100%; }

  /* 下層ページ：見出し画像 */
  #title { height: auto !important; padding: 0 !important; }
  .t_about, .t_mg, .t_it, .t_ex, .t_ax, .t_faq, .t_mail, .t_info,
  .t_link, .t_karada, .t_room, .t_policy, .t_aiartns {
    width: auto !important;
    height: 0 !important;
    padding-top: 22.5%;
    background-size: contain !important;
  }
  #title { background-size: auto 100% !important; margin-bottom: 10px; }
  .text img.alignleft, .text img.alignright { display: block !important; }

  /* 本文 */
  .text, .text2 { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
  .text img { height: auto !important; }
  .text .alignleft, .text .alignright, .text .mt-image-left, .text img[style*="float"] {
    float: none !important;
    display: block;
    margin: 8px auto !important;
  }
  .text img[width="36"] { display: inline; float: left !important; margin: 0 10px 0 0 !important; width: 30px; }
  .text table { width: 100% !important; height: auto !important; }
  .text table td, .text table th { height: auto !important; word-break: break-word; }
  .text table td[width], .text table th[width] { width: auto !important; }
  .text table table { width: 100% !important; }

  /* お問い合わせ */
  dl.fo dt, dl.fo dd { width: auto !important; float: none; text-align: left; box-sizing: border-box; }
  .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
  .wpcf7 textarea, .wpcf7 select { width: 100%; max-width: 100%; font-size: 16px; box-sizing: border-box; }
  .buttonContainer #button { width: 90%; }

  /* フッター */
  #footer { margin: 18px 0 0; }
  .pagetop { display: none; }
  .footer_box { margin: 0; padding: 12px 14px 16px; height: auto; border-top: 1px solid #ca994f; }
  .sub { height: auto; font-size: 14px; line-height: 2.2; }
  .footer_box address { float: none; font-size: 13px; }
  .copy { font-size: 12px !important; }

  /* 画面下の固定ボタン（電話・WEB予約・LINE） */
  .sp-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    display: flex;
    background: rgba(255,255,255,.96);
    border-top: 1px solid #ca994f;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .sp-bar a {
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    padding: 11px 4px;
    border-radius: 8px;
  }
  .sp-bar .b-tel { background: #73451a; }
  .sp-bar .b-web { background: #e07b20; }
  .sp-bar .b-line { background: #06c755; }
}

@media (min-width: 600px) and (max-width: 919px) {
  #contents { max-width: 720px; margin: 0 auto; }
  #menu ul li, li.m01, li.m02, li.m03, li.m04, li.m05, li.m06, li.m07, li.m08, li.m09 { width: calc(25% - 6px) !important; }
}