/* ============================================================
   AIKK Website ── リンク付きボタンの Hover 反転（共通仕様）
   2026-08-19 作成

   ■ 目的
     Website 上で「リンクが設定されていて、視覚的にボタンとして表示される要素」を、
     Desktop の Hover 時に

         ブランドカラー背景 ＋ 白文字  →  白背景 ＋ ブランドカラー文字

     へ反転させる。ボタンごとの色（オレンジ ／青）はそれぞれの既存色を使い、
     Hover 用に新しい色は作らない。

   ■ このファイルだけを直せば全ページに反映される
     本サイトは多くのページが Header ／MENU ／ボタンの CSS をページ内 <style> に
     自前で持つ自己完結型のため、共通CSS を1本だけ最後に読み込ませて上書きする方式にした。
     各HTML への変更は <link> 1行のみ。同じ Hover CSS を各ページへ複製しない。

   ■ 読み込み位置
     各ページの </head> 直前（ページ内 <style> より後）。
     specificity と読み込み順だけで解決しており、!important は使用していない。

   ■ 対象外（リンクがあってもボタンUIではないもの）
     Header ／Footer のテキストNavigation、本文中のテキストリンク、下線だけの
     「詳しく見る →」、ロゴリンク、カード全体リンク（記事カード ／FIRST STEP カード）、
     目次 ／タグ ／パンくず、非クリック装飾。
     また <button type="submit"> の送信ボタンはリンクではないため対象にしていない。

   ■ 共通仕様
     ・background は gradient を確実に消すため background-image: none を併記する
     ・枠線は border を新設せず inset box-shadow で描く（外寸 ・padding ・角丸 ・
       レイアウトは Hover 前後で不変）
     ・矢印SVG は fill="currentColor" のため文字色に追従して一緒に反転する
     ・タッチ端末でタップ後に Hover が残らないよう @media (hover: hover) に限定する
     ・:focus-visible は各ページ側の指定をそのまま使う（ここでは触らない）
   ============================================================ */

/* ============================================================
   Footer ブランド行 ： 1行表示の統一（2026-08-19 追加）
   ★ Footer 左側の「経営の判断を、会社に残す。」（`footer .logo-txt .tag`）が、
     ロゴ横のテキスト列幅（実測 140px）に対して1行の必要幅がわずかに足りず、
     全ページで2行に折り返していた。文言 ・文字サイズ ・色は変えずに1行へ揃える。
   ★ 対象は Footer 内のみ。Header の同じ `.tag` は元から1行のため触らない。
   ★ 本ファイルはサイト内の全ページが読み込む唯一の共通CSSのため、
     同じ指定を各HTMLへ複製せずここに集約している（ファイル名はボタン由来だが、
     共通chromeの最小修正もここで一元管理する）。
   ============================================================ */
footer .logo-txt .tag { white-space: nowrap; }

@media (hover: hover) {

  /* ── オレンジ系ボタン（#f97316） ────────────────────────
     .btn-orange   ： 全ページ共通のオレンジボタン（Header CTA `.hd-cta` を含む）
     .hero-cta     ： Top Hero のCTA
     .s10-cta      ： Top 最終CTA ／`.pp-midcta-cta` 併用の中間CTA
     .nav-ov-cta a ： MENUオーバーレイ下部のCTA
     .btn-ai       ： 無料AI体験ページの「無料AI体験に申し込む」 */
  .btn-orange:hover,
  .hd-cta:hover,
  .hero-cta:hover,
  .nav-ov-cta a:hover,
  .btn-ai:hover {
    background: #ffffff;
    background-image: none;
    color: #f97316;
    box-shadow: inset 0 0 0 2px #f97316, 0 4px 20px rgba(249, 115, 22, 0.2);
  }

  /* 大型CTA ： 外周グローは通常時のデザイン要素なので残す。
     ただしオレンジの面積が大きいままだと反転が埋もれるため、濃さだけ弱める。 */
  .s10-cta:hover,
  .pp-midcta-cta:hover {
    background: #ffffff;
    background-image: none;
    color: #f97316;
    box-shadow: inset 0 0 0 2px #f97316, 0 0 0 12px rgba(249, 115, 22, 0.08), 0 12px 32px rgba(249, 115, 22, 0.20);
  }

  /* ── 青系ボタン（#1e88e5 ＝ 各ページの --primary） ──────────
     .start-btn  ： /stories の「最初から読む」
     a.btn-blue  ： リンクとして使われている青ボタン（送信ボタンは対象外） */
  .start-inner .start-btn:hover,
  a.start-btn:hover,
  a.btn-blue:hover {
    background: #ffffff;
    background-image: none;
    color: var(--primary, #1e88e5);
    box-shadow: inset 0 0 0 2px var(--primary, #1e88e5), 0 4px 20px rgba(30, 136, 229, 0.2);
  }

  /* 有料Integrated Session 完了ページの「トップページへ戻る」だけは、
     ボタン固有の濃い青（#0d5aa7 ／通常時の gradient 始点）で反転させる。 */
  .done-cta a.btn-blue:hover {
    color: #0d5aa7;
    box-shadow: inset 0 0 0 2px #0d5aa7, 0 4px 20px rgba(13, 90, 167, 0.2);
  }

  /* ── 送信 ・申込ボタン（<button type="submit">） ──────────────
     2026-08-19 追加。<a> か <button> かに関わらず、押せるボタンとして見える
     主要操作要素は同じ原則で反転させる。
     ・`:not(:disabled)` を付けているため、送信中 ／二重送信防止で disabled に
       なっている間は反転しない（既存の disabled スタイルを優先する）。
     ・対象は送信 ・申込の主要ボタンのみ。MENUトグル ・closeボタン ・
       小さなUI操作ボタンには適用していない。
     ・form action ／Web3Forms ／JavaScript ／送信処理は一切変更していない。 */
  button.btn-blue:not(:disabled):hover {
    background: #ffffff;
    background-image: none;
    color: var(--primary, #1e88e5);
    box-shadow: inset 0 0 0 2px var(--primary, #1e88e5), 0 4px 20px rgba(30, 136, 229, 0.2);
  }

  /* 申込フォーム（無料AI体験 ／有料Integrated Session の `#apply`）のボタンだけは
     通常時が濃い青（#0d5aa7 → #1565c0）のため、その固有色で反転させる。 */
  #apply button.btn-blue:not(:disabled):hover {
    color: #0d5aa7;
    box-shadow: inset 0 0 0 2px #0d5aa7, 0 4px 20px rgba(13, 90, 167, 0.2);
  }

  /* ── アウトライン型ボタン ─────────────────────────────
     塗りボタンとは逆方向に反転させる（白背景 ＋ 枠 → ブランドカラー背景 ＋ 白文字）。
     404ページの「無料相談する」が該当。色はこのページが Hover で使っていた
     --primary をそのまま使い、新しい色は作っていない。
     枠線は通常時から `border: 2px solid` があるため border-color を変えるだけで、
     ボタンの外寸は変わらない。 */
  a.btn-outline:hover {
    background: var(--primary, #1e88e5);
    background-image: none;
    border-color: var(--primary, #1e88e5);
    color: #ffffff;
  }

}

/* ============================================================
   Footer「見えていない」の Brand Orange 強調（2026-08-20 追加）

   全本番ページの Footer「会社情報」列にある /onaji-keshiki リンクのうち、
   「見えていない」だけを Brand Orange にする。文字色のみで、サイズ ・太さ ・
   下線 ・背景 ・hover は既存のまま変えない。
   色は Top 読み物カードの強調（--orange-soft）と同値。
   ※ --orange-soft は master CSS を読み込む3ページにしか無いため、
     全ページで同じ色になるよう、ここで #fb923c を1か所だけ定義する。
   ============================================================ */
.footer-onaji-em { color: #fb923c; white-space: nowrap; }

/* MENU（オーバーレイ）「見えていない」の Brand Orange 強調（2026-08-20 追加）
   Footer の .footer-onaji-em と同じ色 ・同じ考え方。文字色のみで、
   サイズ ・太さ ・下線 ・背景 ・hover ・項目構成は変えない。 */
.menu-onaji-em { color: #fb923c; white-space: nowrap; }

/* ============================================================
   CTA ボタンの折り返し修正（2026-09-03 追加）
   ── 「無料AI体験」→「無料AIコーチ体験」名称変更に伴う Visual Regression 修正

   ■ 何が起きていたか
     新称は旧称より3文字長く、CTA 文言が
       「無料AIコーチ体験を受けてみる」（15文字）
       「無料AIコーチ体験に申し込む」（14文字）
     となった結果、ボタン内の余白（padding）が大きいページで、
     Mobile 幅のときに末尾1〜2文字だけが2行目へ落ちていた。

   ■ 方針
     ・文言（Copy）は変更していない
     ・font-size は 360px 未満（320px 級の最狭幅）を除いて変更していない
     ・色 ・影 ・角丸 ・Hover ・リンク先 ・ボタンの高さは変更していない
     ・全ページ一律の `white-space: nowrap` は入れていない
       （狭い画面ではみ出すため。詰めるのは余白と矢印との間隔だけ）
     ・Mobile の対象ボタンは `width: 100%` ＋ 中央揃えのため、
       余白を詰めても通常時の見え方は変わらない（折り返しの閾値だけが変わる）

   ■ 対象（新称の CTA を持つページのみ ／文言ではなくリンク先で特定している）
     a.btn[href="/ai-taiken"] ： 記事下 共通CTAバンド ／/profile 最終CTA ／
                                /keiei-handan CTA 帯 など、「無料AIコーチ体験を
                                受けてみる」を出している塗りボタン（12か所）
     a.btn-ai                 ： /ai-taiken の「無料AIコーチ体験に申し込む」（3か所）
     a.discovery-cta          ： /stories/afterword の CTA
     ※ Header CTA（`.hd-cta`）は Mobile では非表示のため対象外。
       また inline style を持つため、ここでの指定は影響しない。
   ============================================================ */

@media (max-width: 768px) {
  /* 対象ボタンは Mobile では `width: 100%` ＋ 中央揃えのため、
     左右の余白を詰めても通常時の見た目は変わらず、折り返しの閾値だけが下がる。 */
  a.btn[href="/ai-taiken"],
  a.btn-ai { padding-left: 24px; padding-right: 24px; }

  /* /stories/afterword だけは CTA を囲むカード（.discovery-inner）の左右余白も
     効いており、ボタン側の余白を詰めるだけでは 360px 幅で1行に収まらない。
     カードの左右余白を 22px → 16px にして、必要な分を確保する。
     カードの背景 ・枠線 ・角丸 ・上下の余白は変更していない。 */
  .discovery-inner { padding-left: 16px; padding-right: 16px; }
  a.discovery-cta { padding-left: 12px; padding-right: 12px; gap: 8px; }
}

@media (max-width: 359px) {
  /* ★320px 級の最狭幅のみ。360px 以上の表示は一切変えていない。
     余白を詰めるだけでは1行に収まらないため、この幅に限って font-size を下げる。 */
  a.btn[href="/ai-taiken"],
  a.btn-ai { padding-left: 12px; padding-right: 12px; gap: 8px; font-size: 13.5px; }
  a.discovery-cta { padding-left: 8px; padding-right: 8px; font-size: 13px; }
}

/* ── Footer Navigation の「無料AIコーチ体験」 ──
   Footer の列幅は 769〜1024px で最も狭くなり、9文字の新称が2行に折り返していた。
   該当リンク1本だけを1行に固定する（Footer の他のリンクには影響しない）。
   Footer 全体を1行固定にはしていない。 */
footer .ft-nav-grp a[href="/ai-taiken"] { white-space: nowrap; }

/* ============================================================
   本文 ・見出しの折り返し修正（2026-09-03 追加 ／Phase N6-3B）
   ── 「無料AIコーチ体験」名称変更に伴う Typography Regression の修正

   ■ 何が起きていたか
     新称が旧称より3文字長くなったことで、見出し ・短い注記 ・FAQ の質問文など
     「1〜2行で収まる想定の短文」の行末に、1〜3文字だけが孤立して残るようになった。
     Human 確認例 ：
       「無料AIコーチ体験だけで、終えていただいてかまいませ」／「ん。」

   ■ 方針
     ・文言（Copy）は変更していない
     ・1行に詰め込むのではなく、★孤立した1〜2文字（orphan）をなくすことを目的にする
     ・対象は★短い見出し ・リード ・注記 ・ラベルのみ。長い本文段落 ・Legal 本文 ・
       Consent 文には適用しない（通常の文章折り返しは正常なため）
     ・全ページ一律の `white-space: nowrap` は入れていない
     ・`text-wrap: balance` は本サイトで既に使っている手法
       （business-os-pre-publication.css の `.pp-deliv-name` ／`.pp-hero-uni-b`、
         ai-taiken.html の `.ai-hero h1` など）に合わせている
   ============================================================ */

/* ── ① 見出し ・FAQ の質問文 ： 行のバランスを取って孤立文字をなくす ──
   対象は /ai-taiken ・/integrated-session の Section 見出しと FAQ 質問文。
   どちらも1〜2行で読ませる短文で、長い本文段落には掛からない。 */
.ai-h2,
p.ai-faq-q { text-wrap: balance; }

/* ── ② 意味のまとまりで折り返す見出し ──
   `.line-clause` を並べた見出しは、句読点のまとまりごとに折り返す。
   幅が足りる場合は従来どおり1行のまま。HTML 側は文言を変えず、
   既存の1文を2つの節に囲っただけ（`<br>` のような強制改行は入れていない）。
   使用箇所 ： /ai-taiken の S9 見出し、/pricing の CTA 帯見出し。 */
.line-clause { display: inline-block; }

/* ── ③ 手順を「→」で並べた1行（/ai-taiken） ──
   `word-break: keep-all` により、改行できる位置が「→」の前後だけになる。
   「無料AIコーチ／体験」のように名称の途中で切れることがなくなる。
   実測で全幅（1440〜320px）はみ出しなしを確認済み。 */
.ai-flow-steps { word-break: keep-all; text-wrap: balance; }

@media (max-width: 359px) {
  /* ★320px 級の最狭幅のみ。360px 以上の見出しサイズは変えていない。
     この幅では「無料AIコーチ体験に申し込む」が2行になり、名称の途中で
     切れてしまうため、この幅に限って1段だけ小さくする。 */
  .ai-h2 { font-size: 20px; }
}

/* ============================================================
   ★ 2026-09-03 Mobile Typography Base（Phase M9 ／第23章 Human Decision）
   日本語はどの文字間でも改行できるため、既定では
     「なぜそう判 ／断するのか。」「そ ／の「判断の目線」」「使い続けるた ／めの仕組みが、」
   のように語の途中で割れる。Phase M9-PF の実測では、Blog を除く21ページ ×
   Mobile 6幅で 2,289件の不自然な分割を確認した。

   ★ `word-break: auto-phrase` ： ブラウザが文節（フレーズ）単位で改行位置を選ぶ。
     未対応ブラウザでは `normal` 相当へフォールバックする＝現状と同じ表示になるため、
     Progressive Enhancement として安全に入れられる。
   ★ `text-wrap: pretty` ： 最終行が極端に短くなるのを抑える。

   ★★`li` へは global に当てない。
     `/about` のモバイルメニュー `.nav-overlay` 内の `li` に当てると
     min-content 幅が変わり、横スクロール（+140px）が発生することを実測で確認した。
     `li` が必要な箇所は、この下の「② 限定セレクタ」で content area だけに当てる。
   ★ Copy は1文字も変更していない。
   ============================================================ */

/* ── ① 共通ベース ── */
p,
h1,
h2,
h3,
h4,
h5,
figcaption,
blockquote { word-break: auto-phrase; }

p,
h1,
h2,
h3,
h4,
li { text-wrap: pretty; }

/* ── ② 限定セレクタ（Phase M9-IMP ／Commit J） ──
   ①のベース（p ／h1〜h5 等）では届かない `li` ／`span` ／`a` ／一部 `div` に、
   content area だけ auto-phrase を当てる。

   ★ 除外している場所と理由（すべて実測にもとづく）：
     ・header ／footer ／nav ／.nav-overlay
       → ナビゲーションのラベルは長く、min-content 幅が広がると narrow 幅で
         はみ出すおそれがあるため、従来の折返しのまま残す。
     ・table 内（/about の会社概要テーブル）
       → `li { word-break: auto-phrase }` を当てると `.about-table` の
         min-content 幅が 496px まで広がり、375px で横スクロール（+140px）が
         発生することを実測で確認したため除外する。 */
li,
span,
a { word-break: auto-phrase; }

header li, header span, header a,
footer li, footer span, footer a,
nav li, nav span, nav a,
.nav-overlay li, .nav-overlay span, .nav-overlay a,
table li, table span, table a { word-break: normal; }

/* 本文として読ませる div（見出し風・カード内テキスト）。
   ページ横断の div へは当てず、実測で HIGH が出た component だけを列挙している。 */
.is-spec-v,
.is-samecheck,
.v-txt,
.ba-title,
.svc-domain,
.form-note,
.toc-title { word-break: auto-phrase; }

/* ── ③ 行長を均す（Phase M9-IMP ／Commit J） ──
   ②まででも最終行が2文字だけ残る component に、`text-wrap: balance` を当てる。
   ★ 実測で HIGH が残った箇所のみ。global には当てていない。
   ★ `.sf-ttl` は既に display:block のため、display は変更していない。 */
.sf-ttl,
.ai-uses-desc,
.is-samecheck,
.is-flow-t,
.ai-handoff-merit { text-wrap: balance; }

/* ── ④ 320px 級のボタン（Phase M9-IMP ／Commit J） ──
   最狭幅でのみ、ボタンの左右 padding を 1段だけ詰める。
   /404 の「AI経営革新株式会社 トップページへ戻る」が「戻る」だけ次行に落ちるのを解消する。
   ★ font-size ／Copy は変更していない。★360px 以上には影響しない。 */
@media (max-width: 359px) {
  .btn { padding-left: 14px; padding-right: 14px; }
}

/* ── ⑤ 横幅の狭いカード本文に、少しだけ横幅を渡す（Phase M12-R ／Narrow Card Typography Balance Resolution） ──
   Phase M12 では同じ課題に `word-break: normal` で対処したが、Human Visual Review により
   ★取り消した。行数は減るものの「出／来事」「た／どります」「とし／て」のように
   日本語の語中 ・意味の途中で切れてしまい、Card として読みにくくなるため。

   M12-R の方針 ： ★改行方式は M9 の `word-break: auto-phrase`（文節改行）のまま KEEP し、
   ★カードの左右 padding を 22px → 15px にして、使い切れていない横幅を本文へ渡す。
   文節はそのまま保たれるので★語中分割は増えず、それでいて 1枠あたり 1〜3行ぶん短くなる。

   ・font-size ／line-height ／Copy ／Card 幅 ／grid ／gap は変更していない（gap 20px のまま）。
     gap を変えていないため、カード間の矢印（.ai-step + .ai-step::before の left:-15px）も無調整で足りる。
   ・上下 padding（26px / 24px）も変更していない。左右だけを 7px 詰めている。
   ・Mobile（≤767px）はカードが1カラムになり本文幅が十分あるため、★M9 の状態を完全に維持する。
   ・既存 breakpoint（768px）を再利用しており、新しい breakpoint は増やしていない。
   ・`.ai-steps--cards` は /ai-taiken と /integrated-session の2ページにのみ存在する。
   ・/profile（.fs-step）は実測で行数・カード高さの改善が出なかったため★対象から外し、M9 のままとする。 */
@media (min-width: 768px) {
  /* ★ 2026-09-03（Phase M13-R） ： Copy を短くしたあと 15px と 22px を再実測した結果、
     /integrated-session の3枠は★22px でも行数 ・カード高さが 15px と完全に同じだったため、
     余白を優先して★22px（M9 の元の値）へ戻した ── selector から外している。
     /ai-taiken の 4枠（.is-4）と 3枠（.is-3）は★22px にすると
     769px で2文字だけの行が出る（4枠は 1440px でも1行増える）ため、★15px を維持する。 */
  .ai-steps--cards.is-4 .ai-step,
  .ai-steps--cards.is-3 .ai-step { padding-left: 15px; padding-right: 15px; }
}