/* ===== スマホ表示の調整 =====
   文字サイズを大きくしている端末でも、ボタンが枠からはみ出したり
   1〜2文字だけ次の行に落ちたりしないようにする */

@media (max-width: 768px) {

  /* ボタン：幅は枠に収める・文字間と余白を控えめに */
  .btn,
  .sns-btn {
    max-width: 100%;
    min-width: 0 !important;      /* HTML側の min-width:260px などを打ち消す */
    white-space: normal;
    letter-spacing: 0.02em;
    line-height: 1.5;
    word-break: keep-all;         /* 言葉の途中では改行しない（<wbr> の位置で改行） */
    overflow-wrap: anywhere;      /* それでも入りきらない時だけ途中で改行 */
  }
  .btn--lg {
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-base);
  }

  /* 予約・送信など大事なボタンは横幅いっぱいに（文字が1行に収まりやすい） */
  .btn--lg,
  .form-submit-area .btn,
  .reserve-cta-card__btn,
  .sns-buttons,
  .sns-btn {
    width: 100%;
  }
  .form-submit-area .btn {
    font-size: var(--fs-base);
  }
  /* お問い合わせページの「オンライン予約」カード：左右の余白を詰めてボタンを広く */
  .online-card {
    padding: var(--sp-8) var(--sp-5) !important;
  }
  .sns-btn {
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4);
    font-size: var(--fs-base);
  }

  /* 見出し・短い説明文：行の長さをそろえて、最後の1〜2文字だけ落ちるのを防ぐ */
  h1, h2, h3,
  .section-subtitle,
  .reservation-cta__text,
  .form-privacy,
  .page-hero__sub {
    text-wrap: balance;
    line-break: strict;
  }
  p {
    text-wrap: pretty;
    line-break: strict;
  }

  /* 店舗情報の表：「項目名」を上、「内容」を下に縦並び */
  .info-table,
  .info-table tbody,
  .info-table tr,
  .info-table th,
  .info-table td {
    display: block;
    width: 100%;
  }
  .info-table tr {
    padding: var(--sp-4) 0;
  }
  .info-table th {
    text-align: left;
    padding: 0 var(--sp-2) var(--sp-1);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
  }
  .info-table td {
    text-align: left;
    padding: 0 var(--sp-2);
    font-size: var(--fs-base);
  }

  /* 店舗紹介ページの LINE・Instagram・Facebook ボタン：同じ横幅でそろえる */
  .sns-pill {
    width: 100% !important;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    column-gap: 0.3em !important;
    row-gap: 0;
    line-height: 1.5;
  }
  /* 「（友だち追加）」などを途中で切らず、まとめて次の行へ */
  .keep-together {
    display: inline-block;
  }

  /* トップの「お客様へのご挨拶」：1行が画面に収まる大きさに */
  .about-preview__quote {
    font-size: var(--fs-base);
    line-height: 2;
    word-break: keep-all;          /* 文のまとまり（<wbr> の位置）で改行 */
    overflow-wrap: anywhere;
  }

  /* 右下の「LINE予約」ボタン：LINEアイコンだけの丸ボタンにして本文を隠しにくく */
  .float-cta {
    bottom: var(--sp-4);
    right: var(--sp-4);
  }
  .float-cta__btn {
    width: 56px;
    height: 56px;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .float-cta__btn svg {
    width: 28px;
    height: 28px;
  }
  .float-cta__btn span {           /* 文字は画面上だけ隠す（読み上げには残す） */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  /* ページの一番下がボタンで隠れないように余白を確保 */
  .footer {
    padding-bottom: calc(var(--sp-8) + 64px);
  }
}