/* スマホ表示の余白と写真の大きさをそろえる調整。
 *
 * 既存ファイルは触らず、いちばん最後に読み込んで上書きする。
 * 直しているのは次の2点。
 *
 * 1) セクションの上下余白
 *    hero-mockup.css で、640px以下向けの 54px より後ろに 900px以下向けの 64px が
 *    書かれているため、スマホでも 64px が効いていた（後ろの指定が勝つ）。
 *    上下で128pxになり、1画面のうち内容が入る割合が小さくなっていた。
 *
 * 2) セラピスト一覧の写真
 *    375px幅で写真が 180×223px。その下の文字（サイズとタグ）が140pxあり、
 *    写真とほぼ同じ面積を使っていた。写真を縦に伸ばして主役に戻す。
 */

/* ===== 1. セクションの余白 ===== */
@media (max-width: 640px) {
  .section {
    padding: 40px 0;
  }
}

@media (max-width: 400px) {
  .section {
    padding: 34px 0;
  }
}

/* ===== 2. セラピスト一覧の写真を大きく ===== */
@media (max-width: 640px) {
  /* 写真は縦長のものが多いので、枠も縦長にして見える範囲を増やす。 */
  .therapist-mini-visual {
    aspect-ratio: 3 / 4;
    height: auto;
  }

  .therapist-mini-visual picture,
  .therapist-mini-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 文字側は詰めて、写真に面積を渡す。 */
  .therapist-mini-body {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* 左右の隙間を詰めて、カード1枚あたりの幅を稼ぐ。 */
  .therapist-directory-grid {
    gap: 10px;
  }
}

/* ===== 3. 右上のメニューボタン =====
 *
 * もとは 11px の角丸四角に枠線と濃い影、線は2px×3本。
 * 同じサイトの中でも、開いたあとに出る閉じるボタンは真円（999px）なので形が揃っていなかった。
 * 下部の予約ボタン（電話・LINE・WEB）のアイコンも丸なので、丸に統一する。
 *
 * 背景は不透明の白ではなくすりガラスにする。
 * このボタンはパステルのヒーローの上にも白い本文の上にも重なるため、
 * 透かしたほうがどちらでも浮かずになじむ。
 */
@media (max-width: 900px) {
  .site-header .mobile-menu-button,
  body[data-page="home"] .site-header .mobile-menu-button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow:
      0 1px 2px rgba(40, 45, 60, 0.06),
      0 6px 18px rgba(40, 45, 60, 0.08);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  /* 線は細く、間隔は広く。3本の塊に見えないようにする。 */
  .site-header .mobile-menu-button span,
  body[data-page="home"] .site-header .mobile-menu-button span {
    width: 17px;
    height: 1.5px;
    margin: 3.5px 0;
    border-radius: 99px;
    background: #3b4147;
  }

  /* 押したときの反応は背景の濃さだけで出す。
   * 縮める演出も入れたかったが、mobile-home-final.css に
   * transform: none !important があるため、ここで transform を書いても効かない。 */
  .site-header .mobile-menu-button:active,
  body[data-page="home"] .site-header .mobile-menu-button:active {
    background: rgba(255, 255, 255, 0.86);
  }

  .site-header .mobile-menu-button:focus-visible {
    outline: 2px solid rgba(96, 137, 221, 0.72);
    outline-offset: 3px;
  }
}