/**
 * readability-sp.css
 * SP（スマホ）可読性の底上げ
 * ─────────────────────────────────────────────
 * 背景: SP本文が11〜12pxと小さすぎ「おしゃれだが読みにくい」状態だった。
 *       客層は治療＋美容（若年〜年配が混在）のため、シニア特化ではなく
 *       「全年齢に快適な通常サイズ」へ着地。トーン（暖色・画像・余白・見出しの手書き/明朝）は不変。
 * 方針: 「読ませる本文」を通常16px・補足15pxへ、電話導線のタップ領域を 44px 以上に。
 *
 * 【カスケード戦略 — 変更時の注意】
 *   本ファイルは「全ページ専用CSS（front-page.css 等）の後に読み込む」ことで、
 *   同一詳細度のSP用既存ルール（例: front-page.css の @media(max-width:768px) 内 .access-card-value:12px）
 *   を後勝ちで上書きする。!important は使わない。
 *   ・enqueue は functions.php の fujioka_light_enqueue_scripts() 末尾に固定（順序変更禁止）。
 *     ページ専用CSSはページ条件付きenqueueのため、wp依存宣言ではなく「関数末尾の配置」で読み込み順を担保している。
 *   ・各ページ専用CSSに font-size のSPルールを足すと、本ファイルが暗黙の上書き担当になる。
 *     「16pxにしたのに効かない」時はまずこのファイルを確認すること。
 *
 * 基準: 本文（長文）16px / 行間1.8、補足テキスト15px / 行間1.8（市販サイト標準の快適サイズ）
 */

/* ============================================================
   P1: 本文サイズの底上げ（SP: 〜768px）
   ============================================================ */
@media (max-width: 768px) {

  /* 読ませる長文 16px / 行間1.8
     .about-text             … フロント「当院の思い」本文
     .faq-answer             … フロント FAQ 回答
     .first-visit-faq-answer … 初めての方へ FAQ 回答（「鍼は注射針とは異なり…」等）
     .menu-card-desc         … フロント メニュー説明（初診案内・美容鍼説明 等）
     .treatment-grid-card-excerpt … 施術について 各施術カードの説明文
     .info-box-content p/li  … 施術メニュー 案内ボックス本文・箇条書き */
  .about-text p,
  .faq-answer,
  .faq-answer p,
  .first-visit-faq-answer,
  .first-visit-faq-answer p,
  .menu-card-desc,
  .treatment-grid-card-excerpt,
  .info-box-content p,
  .info-box-content li {
    font-size: 16px;
    line-height: 1.8;
  }

  /* 補足・短い読みテキスト 15px / 行間1.8
     .trouble-sub       … フロント 症状キーワード（「肩こり、腰痛など」）
     .access-card-value … アクセス 住所・値
     .hero-cta-lead     … ヒーロー CTA リード（「まずはお気軽にご相談ください」）
     .page-header-catch … 各ページヘッダーのキャッチ */
  .trouble-sub,
  .access-card-value,
  .hero-cta-lead,
  .page-header-catch {
    font-size: 15px;
    line-height: 1.8;
  }

  /* SP見出し: 30px だと長い文見出しで句点や1〜2文字が最終行に落ちる（「す。」「問」等）。
     line-break: strict で行頭禁則を効かせたうえで、狭い画面では 8vw で段階的に縮めて
     不体裁なぶら下がりを防ぐ。意味の切れ目で改行したい見出しは <br class="br-sp"> を併用。 */
  .section-title,
  .cat-section .section-title,
  .cta-title {
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.45;
    letter-spacing: 0.01em;
    line-break: strict;
    /* 句点が単独で最終行に落ちるのを防ぐ。行末の約物を半角分詰める */
    font-feature-settings: 'palt' 1;
  }

  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  /* SP は画面幅が狭いので角丸を控えめに（参照実装も PC 70px / SP 40px） */
  .section--arch {
    border-radius: 40px 40px 0 0;
  }
}

/* ============================================================
   P6: 極小幅（320px）の見出し（2026-08-07）
   iPhone SE(第1世代) 等の 320px では上の clamp 下限 26px でも
   1行約10文字しか入らず、「あなただけのために。」のような
   10文字超の行で句点や1〜2文字が3行目に孤立する。
   下限をさらに下げて2行に収める（左右 padding 24px×2 を差し引いた
   実効幅 272px に対し 22px なら約12文字入る）。
   ============================================================ */
@media (max-width: 360px) {
  .section-title,
  .cat-section .section-title,
  .cta-title {
    font-size: 22px;
  }
}

/* ============================================================
   P2: 電話予約導線のタップ領域 44px 以上
   アクセスカード内のインライン電話リンクをタップしやすい白チップ状に。
   固定CTA・ヒーローCTA等の既存ボタンは除外。
   文字色は白背景で AA 合格する --color-tel-chip（約5:1）を使用。
   （テーマの --color-accent-text(#967A3F) は実測4.08:1で AA 未達のため流用しない）

   【1100px 以下に限定する理由】タップ領域の確保はタッチ端末向けの施策。
   PC まで適用すると footer の電話欄でチップ(137px)＋注記(240px)が
   242px の枠に収まらず「（電話予約は17時ま／で）」と折れる。
   ヘッダーがハンバーガー化する 1100px を境界に揃える。

   【footer を除外する理由】フッターは住所・営業時間・定休日が 13px の
   テキストで並ぶ情報リストで、電話だけ 16px の枠付き箱にすると浮く。
   SP のタップ導線は固定CTAバーの電話ボタンが担うため機能上の問題はない。
   ============================================================ */
@media (max-width: 1100px) {
  a[href^="tel:"]:not(.fixed-cta-btn):not(.cta-btn):not(.hero-cta-btn):not(.hero-line-btn):not(.header-tel):not(.footer-tel) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-tel-chip);
    background: var(--color-bg);
    border: 1px solid var(--color-accent-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap; /* 電話番号を1行固定（access-card 等の flex 親で折り返さないように） */
    flex-shrink: 0;
  }

  a[href^="tel:"]:not(.fixed-cta-btn):not(.cta-btn):not(.hero-cta-btn):not(.hero-line-btn):not(.header-tel):not(.footer-tel):hover {
    background: var(--color-accent-pale);
  }
}

/* ============================================================
   P5: SP デザイン調整（2026-06-02 フィードバック反映）
   トーン（暖色・写真主役・見出しの明朝/手書き）は維持したまま:
   - 当院の思い … 中央寄せ→左寄せ＋暗幕を濃く（白長文の可読性）
   - hero メニュー … 明朝を大きく＋ゴールド線を長く＋英字サブで主役級に
   - ボタン … 階層（主要CTA/サブ）を保ったまま高さ・文字サイズを統一しタップ拡大
   - footer / access … 住所が「番地」だけ折れないよう改行位置を整える
   ============================================================ */
@media (max-width: 768px) {

  /* --- 当院の思い: 自然な日本語折り返し ---
     2026-08 デザイン刷新v2 で背景写真＋暗幕をやめ白地の誌面レイアウトにしたため、
     暗幕（background）の指定は撤去した。文字色は front-page.css の --color-text が正。 */
  .about-text {
    text-align: left;
    /* keep-all だとブラケット単位で区切られ「「人」」等が孤立する。左寄せ本文は通常折返しが自然 */
    word-break: normal;
    line-break: strict; /* 行頭に句読点・閉じ括弧が来ない日本語の禁則処理 */
  }

  /* --- hero メニュー: エディトリアル強化（明朝拡大＋ゴールド線＋英字サブ） ---
     位置は既存ブレークポイントの実績値（480blockで写真内に収まる）を尊重し、
     英字サブ追加で伸びる高さを font/gap で抑えて CTA「まずは…」との衝突を避ける */
  .hero-menu-marker {
    gap: 12px;
  }
  /* 写真はスライドで明部もあるため、メニュー背後に柔らかい暗がり(scrim)を敷いて
     白文字をどのスライドでも読めるように。放射状でエッジを出さない */
  .hero-menu-marker::before {
    content: '';
    position: absolute;
    inset: -22px -76px -22px -28px;
    background: radial-gradient(ellipse 80% 118% at 18% 50%, rgba(24, 20, 16, 0.68) 0%, rgba(24, 20, 16, 0.4) 50%, transparent 82%);
    z-index: -1;
    pointer-events: none;
  }
  .hero-menu-item {
    font-size: 18px;
    line-height: 1.15;
    padding-left: 38px;
  }
  .hero-menu-item::before {
    width: 28px;
    top: 0.55em; /* 2行化に伴い 1行目(明朝)の高さに線を合わせる */
  }
  .hero-menu-item::after {
    content: '';
    display: block;
    font-family: var(--font-serif-en);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  .hero-menu-item:nth-child(1)::after { content: 'SHINKYU'; }
  .hero-menu-item:nth-child(2)::after { content: 'BIYO-SHIN'; }
  .hero-menu-item:nth-child(3)::after { content: 'MASSAGE'; }

  /* --- ボタン統一: 階層を保ってタップ領域・文字サイズを揃える ---
     主要CTA（塗り）: 高さ56 / 文字16   サブ（outline・soft・初めての方へ）: 高さ50 / 文字15 */
  .cta-btn,
  .hero-line-btn,
  .fixed-cta-btn {
    min-height: 56px;
    font-size: 16px;
  }
  /* ハンバーガー内CTAは詳細度0,2,0で14pxが当たるため明示的に揃える */
  .mobile-menu-cta .cta-btn {
    font-size: 16px;
  }
  .btn-outline,
  .btn-soft,
  .hero-first-visit-btn-mobile {
    min-height: 50px;
    font-size: 15px;
  }
  /* サブの outline/soft は最小幅と中央揃えを統一して不揃い感をなくす */
  .btn-outline,
  .btn-soft {
    min-width: 200px;
    text-align: center;
    justify-content: center;
  }

  /* --- フッターのタップ領域拡大（電話・サイトマップ）---
     視覚上のフォントサイズは変えず、padding + 負margin で当たり判定を44px以上に広げる。
     .footer-sitemap は複数行折り返しがあるため、縦gapを24px（当たり判定の上下はみ出し
     12px×2分）まで広げて隣接行との当たり判定の重なりを防ぐ（codex-review P2対応 2026-08-06） */
  .footer-tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 0;
    margin: -12px 0;
  }
  .footer-sitemap {
    row-gap: 24px;
  }
  .footer-sitemap a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 4px;
    margin: -12px -4px;
  }
}