/* ============================================================
   YUIME LP1 — スマホの日本語組版と、手で決めた改行（2026-08-25）
   LP2（tohtml/LP2/css/adjust.css）と同じ方式をそのまま持ち込んだもの。
   `.fig` から再生成しても残るよう、Figmaのレイヤー名（data-n）で指定する。
   読み込みは data/page-meta.json の "styles"（responsive.css の後）。
   ============================================================ */

/* ── 自動改行 ───────────────────────────────────────────────
   ブラウザは日本語をどの文字の間でも改行してよいと考えるので、
   「これまで／の」「デッ／ドライン」のように単語の途中で折り返す。
   index.html には tools_wbr.js（BudouX）で文節の切れ目に <wbr> が入っている。
   keep-all を当てると、ブラウザはその位置でしか改行しなくなる。
   <wbr> の間隔より欄が狭いときだけ、はみ出す前に途中で折る（anywhere）。
   ※ `.fig` から再生成したら node tools_wbr.js tohtml/LP1/index.html tohtml/LP1/contact.html を流し直す */
@media (max-width:1024px) {
  .root [data-n] { word-break:keep-all; overflow-wrap:anywhere; }

  /* ── 字間 ──────────────────────────────────────────────
     「」（）、。 は字面の左右に半角ぶんの空きを持っている。狭い画面だと
     この空きが語の切れ目に見えてしまうので、palt（約物・かなの詰め）で詰める。
     ※ letter-spacing は足さない。`.fig` の箱は文字幅ぴったりで作られている
       ものがあり、わずかでも広げると中で2行に割れる（LP2で実際に起きた） */
  .root [data-n] { font-feature-settings:"palt" 1; }
}

/* `.fig` の改行が「半角スペース」に化けるのを止める。
   狭い画面では responsive.css がこの見出しを white-space:normal に戻していて、
   改行が空白1個に潰れ「…導入された JA・農業法人様の事例」と出ていた */
@media (max-width:1024px) {
  [data-n="特定技能派遣サービスを導入された"] { white-space:pre-line; }
}

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

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

/* ============================================================
   768px以下でカードが1枚ずつの縦積みになると、カードは画面幅まで広がるのに
   中身は `.fig` の固定幅のまま（実績カード 箱600/中身309、お悩みカード 箱600/中身214）で、
   白地だけが左右に大きく余っていた（2026-08-25 ユーザー指摘・640pxで確認）。
   中身をカード幅に合わせる（LP2 の カード / ○○ と同じ扱い）
   ============================================================ */
@media (max-width:768px) {
  [data-n^="実績カード"] > [data-n],
  [data-n^="お悩みカード"] > [data-n],
  [data-n*="事例カード"] > [data-n] { width:100%; }
}


/* ============================================================
   スマホ用の固定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)); }
}

/* ============================================================
   お問い合わせ完了ページ（thanks.html・2026-08-25 新設）
   文言は contact.js が ?sent=1 のときに出していたものと同じ。
   ============================================================ */
.thanks-note { padding:8px 0 0; max-width:760px; margin:0 auto; text-align:center; color:#211815; }
.thanks-note__mark {
  width:72px; height:72px; margin:0 auto 24px; border-radius:50%;
  background:#337A28; display:flex; align-items:center; justify-content:center;
}
.thanks-note__mark svg { width:36px; height:36px; display:block; }
.thanks-note__lead { font-size:20px; font-weight:700; line-height:1.8; margin:0 0 16px; }
.thanks-note__sub  { font-size:15px; line-height:1.9; margin:0 0 32px; color:#555555; }
.thanks-note__link {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 32px; border-radius:999px;
  background:#8c8c9f; color:#ffffff; font-size:15px; font-weight:700; text-decoration:none;
}
.thanks-note__link:hover { opacity:.9; }
@media (max-width:768px) {
  .thanks-note { padding:0 20px; }
  .thanks-note__lead { font-size:18px; }
  .thanks-note__sub  { font-size:14px; }
}

/* ============================================================
   MVの「人材を支援」に、スマホでも黄色の下線を出す（2026-08-26 ユーザー指示）
   responsive.css は 768px以下でこれを消していた。`.fig` の矩形は top:56px の
   固定位置で、28pxまで縮んだ文字から取り残されるため。
   1024px以下ですでに使っている「文字の下端基準」に置き直して出し直す。
   写真の上の白文字に敷くので、下線は文字の後ろに入る（矩形が先に置かれている）
   ============================================================ */
@media (max-width:768px) {
  [data-n="マーカー強調"] > [data-n="矩形"] {
    display:block;
    top:auto; bottom:.14em; left:4px; right:4px; width:auto; height:.3em;
  }
}