/* ============================================================
   YUIME LP2 — Figma より先行している見た目の手直し（2026-08-22 ユーザー指示）
   .fig にはまだ入っていない調整だけをこのファイルに置く（responsive.css には追記しない方針。2026-08-24）。
   読み込みは data/page-meta.json の "styles"（responsive.css の後に読まれるので同じ強さなら勝つ）。
   Figma に反映して再生成したら、該当行を削除する。
   ============================================================ */

/* MV：チップ「JA・監理団体の皆様へ」16px → 20px、リード文 16px → 20px（行間は .fig の 1.95 のまま） */
[data-n="02_メインビジュアル"] [data-n="チップ / JA・監理団体の皆様へ"] > [data-n] { font-size:20px; }
[data-n="MVリード"] { font-size:20px; }

/* 06_分岐ナビ：緑・赤の帯リンクの文字 14px → 16px */
[data-n^="分岐 / "] [data-n="リンク"] > [data-n] { font-size:16px; }

@media (max-width:768px) {
  /* 狭い画面ではチップ 16px・リード 17px（responsive.css の元値 15px を上書き） */
  [data-n="02_メインビジュアル"] [data-n="チップ / JA・監理団体の皆様へ"] > [data-n] { font-size:16px; }
  [data-n="MVリード"] { font-size:17px; }
  /* MVの縦の空きが詰まって見えるため 12px → 16px（2026-08-22 ユーザー指摘） */
  [data-n="MVコピー"] > [data-n="間"] { height:16px; }
}

/* ============================================================
   SP版の可読性（2026-08-25 クライアント指摘）
   ① 字間（カーニング／トラッキング）が日本語の語のまとまりを壊している
   ② 自動改行が単語の途中で切れる
   ③ CTAの地のロゴ透かしが2枚あって、SPではボタンと重なる
   ============================================================ */

/* ── ② 改行位置 ───────────────────────────────────────────
   index.html には tools_wbr.js（BudouX）で文節の切れ目に <wbr> が
   入っている。keep-all を当てると、ブラウザはその位置でしか改行しない。
   <wbr> の間隔より欄が狭いときだけ、はみ出す前に途中で折る（anywhere）。
   ※ .fig から再生成したら node tools_wbr.js tohtml/LP2/index.html を流し直す */
@media (max-width:1024px) {
  .root [data-n] { word-break:keep-all; overflow-wrap:anywhere; }

  /* ── ① 字間 ────────────────────────────────────────────
     「」（）、。 は字面の左右に半角ぶんの空きを持っている。狭い画面だと
     この空きが語の切れ目に見えてしまうので、palt（約物・かなの詰め）で詰める。
     ※ 以前はここで letter-spacing:.02em も足していたが、`.fig` の箱は文字幅
       ぴったりで作られているものがあり（ヘッダーの「問い合わせ」は箱70px＝
       文字70px）、0.28px はみ出して2行に割れた。tracking は足さない */
  .root [data-n] { font-feature-settings:"palt" 1; }
}

/* 日本語のチップは 0.1em では字間が空きすぎて語の区切りが見えない。
   欧文（RISK / HURDLE 等）は大文字なので 0.1em のままにする */
@media (max-width:768px) {
  [data-n="チップ / JA・監理団体の皆様へ"] > [data-n],
  [data-n="チップ / 最大のリスク"] > [data-n] { letter-spacing:.04em; }
}

/* ── ③ ロゴ透かし ───────────────────────────────────────
   CTA帯には「画像 / mark」が2枚（右上420px・左下300px）。SPでは
   ボタンの真下で重なって濁るので、2枚目以降を落として1枚にする。
   残す1枚も、文字の可読性を優先して薄くする */
@media (max-width:768px) {
  section > [data-n="画像 / mark"] ~ [data-n="画像 / mark"] { display:none; }
  section > [data-n="画像 / mark"] { opacity:.07; }
}

/* ── ①の続き：.fig の改行が「半角スペース」に化けるのを止める ──
   狭い画面では responsive.css がこれらを white-space:normal に戻している。
   normal だと .fig の改行が空白1個に潰れ、文の途中に不自然な空きが出る
   （「そして離農。 地域の農家様を」「確保できる 「特定技能制度」」など）。
   pre-line なら改行は改行のまま扱われ、空きが出ない。
   .fig の改行位置はどれも文・句の切れ目なので、狭い画面でも不自然にならない */
@media (max-width:1024px) {
  [data-n="リード"],
  [data-n="期限バナー"] > [data-n],
  [data-n="07b_解決帯"] > [data-n="主文"], [data-n="07b_解決帯"] > [data-n="サブ文"],
  [data-n="リード枠"] > [data-n="見出し"],
  [data-n="見出し文"] > [data-n]:not([data-n="1行目"]) { white-space:pre-line; }
}

/* ============================================================
   13_選ばれる理由：カードの作りを LP1 に合わせる（2026-08-25 ユーザー指示）
   LP1（tohtml/LP1/index.html の「理由グリッド」）は
     写真 → 緑の帯［POINT 01 ……… ✓］→ 白地に緑の見出し → 本文
   という並び。LP2 は帯の中に白文字で見出しが入っていた。
   `.fig` はまだ直っていないので、ここで見た目だけ合わせる。
   → Figma を直して再生成したら、このブロックは削除する
   ============================================================ */

/* 写真の高さ 230px → LP1 と同じ 172px */
[data-n^="理由カード / POINT"] > [data-n^="画像 / "] { height:172px; }

/* 緑の帯：上60pxだけを緑にして、見出しは帯の下（白地）へ回り込ませる。
   要素を親子で組み替えることはCSSではできないので、
   帯を「折り返す横並び」にして、見出しだけ2段目に落としている */
[data-n^="理由カード / POINT"] > [data-n="見出し帯"] {
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  height:auto;
  padding:12px 24px 0;
  column-gap:0;
  row-gap:36px;                  /* 帯の下12px ＋ LP1の見出し上24px */
  background-size:100% 60px;     /* グラデーションを上60pxだけに切る */
  background-repeat:no-repeat;
  background-origin:border-box;
  background-clip:border-box;
}

/* 番号：白い角丸ピルの中に緑文字 → 帯に直接、白文字（LP1と同じ） */
[data-n^="理由カード / POINT"] [data-n="番号"] {
  background:none; border-radius:0; width:auto; height:36px; gap:8px; padding:0;
}
[data-n^="理由カード / POINT"] [data-n="POINT"] {
  color:#ffffff; font-size:15px; line-height:15px; letter-spacing:.1em;
}
[data-n^="理由カード / POINT"] [data-n="番号"] > [data-n]:last-child {
  color:#ffffff; font-size:28px; line-height:28px;
}

/* ✓ の白丸。`.fig` にはまだ無いのでCSSで描く（LP1は「チェック」レイヤー） */
[data-n^="理由カード / POINT"] > [data-n="見出し帯"]::after {
  content:"✓"; order:2; flex:none;
  width:36px; height:36px; border-radius:50%;
  background:#ffffff; color:#2F7D24;
  font-size:17px; font-weight:900; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* 見出し：帯の中の白文字18px → 帯の下の緑文字22px（LP1と同じ） */
[data-n^="理由カード / POINT"] > [data-n="見出し帯"] > h3[data-n] {
  order:3; flex:0 0 100%; width:100%; max-width:100%; min-width:0;
  color:#337A28; font-size:22px; font-weight:700; line-height:1.6;
}

/* 本文：LP1 と同じ #444 / 16px / 1.85。見出しとの間は 12px */
[data-n^="理由カード / POINT"] > [data-n="中身"] { padding:12px 24px 24px; }
[data-n^="理由カード / POINT"] > [data-n="中身"] > [data-n] {
  color:#444444; font-size:16px; line-height:1.85;
}

/* 写真を LP1 と同じ並びにする（2026-08-25 ユーザー指示）。
   LP2 の img にある同じ写真を指し直しているだけ（POINT 04 だけ LP1 から複製）。
   ※ POINT 06 は LP1 が透かし入り（Adobe Stock）のため、暫定で別の写真。下の注記を参照 */
[data-n="理由カード / POINT 01"] > [data-n^="画像 / "] { background-image:url(../img/07c-photo-3.jpg); }
[data-n="理由カード / POINT 02"] > [data-n^="画像 / "] { background-image:url(../img/06-photo-1.jpg); }
[data-n="理由カード / POINT 03"] > [data-n^="画像 / "] { background-image:url(../img/06-photo-2.jpg); }
[data-n="理由カード / POINT 04"] > [data-n^="画像 / "] { background-image:url(../img/13-photo-1.jpg); }
[data-n="理由カード / POINT 05"] > [data-n^="画像 / "] { background-image:url(../img/07c-photo-2.jpg); }
/* POINT 06：文言が「経験豊富なスタッフが多数在籍」なので、スタッフが複数写っている
   写真に変更（2026-08-26 ユーザー指示）。LP1 も同じ写真にしてある */
[data-n="理由カード / POINT 06"] > [data-n^="画像 / "] { background-image:url(../img/07c-photo-1.jpg); }
/* 07c_写真帯の1枚目は、上でPOINT 06に回した写真と同じもの。同じページに2回出るので
   いただいた差し替え素材（草取り）に入れ替える（2026-08-26） */
[data-n="07c_写真帯"] > [data-n="画像 / photo0"] { background-image:url(../img/07c-photo-5.jpg); }

/* カードの高さは `.fig` の固定値（481 / 452 / 480px）。上の組み替えで中身が短くなり
   下に空きが出るので、中身なりの高さにして、横に並ぶ2枚は高い方に揃える */
[data-n^="理由カード / POINT"] { height:auto; }
[data-n="13_選ばれる理由"] > [data-n="カード列"] { align-items:stretch; }

/* ── 手で決めた改行位置（data/line-breaks.json）──────────────────
   ふつうの <br> だが、bp-sp は CSS で PC・タブレットのときだけ無効にしている
   （display:none にすると <br> の改行そのものが起きない）。
   bp-all は指定なし＝どの幅でも改行する、ふつうの <br> */
br.bp-sp { display:none; }               /* PC・タブレットでは改行しない */
@media (max-width:768px) {
  br.bp-sp { display:inline; }           /* スマホでだけ改行する */
}

/* ============================================================
   MV（02_メインビジュアル）の横並びの比率（2026-08-25 ユーザー指摘）
   responsive.css は 1280px以下で「コピー枠＝560px固定、イラスト＝残り」に
   していたため、幅が狭まるほどイラストだけが潰れていた
   （1024px:400px → 900px:276px → 769px:145px）。
   `.fig` の比率（コピー560 : イラスト846 ＝ おおむね 4:6）で分け合わせる。
   769px未満は responsive.css が縦積みに切り替えるので、この指定は関係しない
   ============================================================ */
@media (max-width:1280px) {
  [data-n="02_メインビジュアル"] > [data-n="コピー枠"] { flex:44 1 0; max-width:560px; }
  [data-n="02_メインビジュアル"] > [data-n="image 1"]  { flex:56 1 0; }
}

/* ヘッダーのナビボタンは `.fig` の箱が文字幅ぴったり（122px ＝ 文字70 ＋ 左右26）。
   フォントの差で1pxでもはみ出すと2行に割れるので、折り返さず箱の方を伸ばす */
@media (max-width:1024px) {
  [data-n^="ナビボタン / "] { width:auto; }
  [data-n^="ナビボタン / "] > [data-n] { white-space:nowrap; }
}

/* MV：769px未満は写真が上・コピーが下の縦積みになる。コピーは `.fig` の改行が
   そのまま残る3行組みなので、幅いっぱいの箱に左寄せだと右が大きく空く
   （600pxで箱560px・文字306px）。文字組みは変えず、箱を中身の幅にして中央へ */
@media (max-width:768px) {
  [data-n="MVコピー"] { width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
}

/* 上の比率変更でコピー欄が 769px時に310pxまで狭まる。リード20pxのままだと
   6行に割れるので、この帯だけ幅に追従させる（1024px:19.5px → 800px:15.2px） */
@media (max-width:1024px) and (min-width:769px) {
  [data-n="MVリード"] { font-size:clamp(15px, 1.9vw, 20px); }
}

/* 07b_解決帯 の下向き三角は削除（2026-08-25 ユーザー指示）。
   `.fig` にはまだ入っているので、三角と、そのために空けてある34px（三角の逃げ）を消す。
   → Figma から消して再生成したら、このブロックも削除する */
[data-n="07b_解決帯"] > [data-n="三角"],
[data-n="07b_解決帯"] > [data-n="三角の逃げ"] { display:none; }

/* data/line-breaks.json の "_wbrなし" に指定したレイヤー。
   <wbr> が無いので keep-all のままだと折り返せる位置が無くなり、
   かえって語の途中で切れる。ブラウザ既定の折り返しに戻す（対で使うこと） */
.root [data-wbr="off"] { word-break:normal; overflow-wrap:break-word; }

/* 07b_解決帯の主文は22px。390px幅（欄350px）だと36文字が6行に割れ、
   「プロへの「外部委託／（アウトソーシング）」です！」のように
   語の途中で切れていた。幅に追従させると4行に収まる（390px時 約18px） */
@media (max-width:768px) {
  [data-n="07b_解決帯"] > [data-n="主文"] { font-size:clamp(17px, 4.6vw, 32px); }
}

/* 05_迫るリスク「制度移行期の最大リスク」の本文は `.fig` が中央揃え。
   スマホでは1行が短く、中央揃えだと両端がガタついて読みにくいので左揃えにする
   （2026-08-25 ユーザー指示）。改行はPCと同じ扱い＝自動の文節改行はしない
   （data/line-breaks.json の "_wbrなし" に登録済み） */
@media (max-width:768px) {
  [data-n="2027年4月の移行期に向けて、各種申請や書類が"] { text-align:left; }
}

/* data/line-breaks.json の "_スマホで消す改行" で付く印。
   `.fig` の改行のうち、スマホでだけ無くしたいもの（PCでは今までどおり改行する） */
@media (max-width:768px) { br.bp-pc, br.bp-nosp { display:none; } }


/* ============================================================
   スマホ用の固定CTAバー（2026-08-25 ユーザー指示）
   中身は js/sp-cta.js が作る。768px以下でだけ出す。
   --spcta-under … 画面下にすでに固定されているバー（LP1の注意バー）の高さ
   --spcta-h     … このバー自身の高さ。どちらも js が実測して入れる
   ============================================================ */
.spcta { display:none; }

@media (max-width:768px) {
  .spcta {
    position:fixed; left:0; right:0; bottom:var(--spcta-under, 0px); z-index:99;
    display:flex; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:#ffffff;
    border-top:1px solid rgba(0,0,0,.12);
    box-shadow:0 -4px 14px rgba(0,0,0,.08);
  }
  .spcta__btn {
    flex:1 1 0; min-height:48px;
    display:flex; align-items:center; justify-content:center;
    border-radius:999px; text-decoration:none;
    color:#ffffff; font-size:15px; font-weight:700; line-height:1;
    white-space:nowrap;
  }
  .spcta__btn--contact  { background:#DD001B; }   /* CTAの赤（CLAUDE.md §5） */
  .spcta__btn--download { background:#337A28; }   /* 見出しラベルの緑（同上） */
  .spcta__btn:active { opacity:.88; }

  /* バーのぶんだけ本文の下に余白を足す（既にある指定より後に書いて上書きする） */
  body { padding-bottom: calc(var(--spcta-h, 68px) + var(--spcta-under, 0px)); }
}