/* ============================================================
   YUIME LP2（育成就労 toB向け） — レスポンシブ指定

   index.html は .fig（YUIME様LPデザイン2.fig）から自動生成される。
   ここでは Figma のレイヤー名（data-n 属性）を目印にする。
   レイヤー名は .fig を更新しても変わらないので、再生成しても
   このファイルは生き続ける。

   ※ index.html / css/index.css は手で編集しない。直すのは .fig か
     このファイル。
   ※ :not() を改行でつなぐと「子孫」の意味になるので必ず1行で書く
   ※ セクションの左右余白は .fig では 160px 固定。狭い画面では
     「本文1120pxを保てるところまで余白を詰める」式（LP1と同じ）
   ============================================================ */

:root {
  --green:#2F7D24; --greenTx:#337A28; --red:#DD001B; --redF:#E62327;
  --ink:#211815; --cream:#FDF8F0; --label:#6E6E6E;
  /* 本文1120pxを保てるところまで左右余白を詰める（1439px→159.5px、1160px以下→20px） */
  --side:max(20px, calc((100% - 1120px) / 2));
}

/* 生成物は 1440px を前提に px で組まれている。
   幅が足りない画面では、まず横あふれを止める */
html, body { max-width:100%; overflow-x:hidden; }

/* ============================================================
   UXの底上げ（Figmaに無い、実装側で足す分）
   ============================================================ */

/* main は .fig 由来のノードではないので幅指定を持たない。
   ルートフレームが縦並び（flex）なので、指定しないと中身の最大幅まで伸びてしまう */
main { width:100%; align-self:stretch; }

/* 本文へスキップ。キーボード操作でヘッダーのCTAを毎回踏まずに済むように */
.skiplink {
  position:absolute; left:8px; top:-60px; z-index:9999;
  padding:10px 16px; border-radius:0 0 8px 8px;
  background:#211815; color:#fff; font-weight:700; text-decoration:none;
}
.skiplink:focus { top:0; }

/* ページ内リンク（分岐ナビ → 07 / 09）の飛び先で、見出しが画面上端に張り付かないようにする */
[data-n="07_体制要件_監理団体向け"], [data-n="09_3つの事態_JA向け"] { scroll-margin-top:24px; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* 押せる要素の当たり判定を確保する（フッターの文字リンクが21pxしかない） */
[data-n="コーポレートサイト"], [data-n="◎ インスタグラム"], [data-n="▤ メディア情報"],
[data-inline-link] { min-height:24px; display:inline-flex; align-items:center; }

/* ------------------------------------------------------------
   印刷（組合内で回覧される想定 — LP2の要件）
   ------------------------------------------------------------ */
@media print {
  @page { size:A4; margin:12mm; }
  /* 背景を落とすと、白抜き文字が白紙に消える。
     色を1つずつ戻すのは漏れるので、背景ごと印刷させる指定に切り替える */
  html, body, .root, .root * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .root { overflow:visible; }
  .skiplink { display:none !important; }
  /* 見出しやカードがページ跨ぎで割れないようにする */
  [data-n^="カード / "], [data-n^="理由カード / "], [data-n^="分岐 / "],
  [data-n^="行 / "], [data-n="最大のリスク"], [data-n="期限バナー"],
  [data-n="比較表の枠"], [data-n="パネル"], [data-n="YUIMEの立ち位置"],
  [data-n="問いかけ枠"], [data-n^="03_"], [data-n^="08_"], [data-n^="11_"],
  [data-n^="14_"], [data-n^="16_"], [data-n^="17_"],
  [data-n="18_フッター"], [data-n="F04_フッター"], [data-n="T03_フッター"] { break-inside:avoid; }
  /* 印刷では「↑」ボタンは意味が無い */
  [data-n="スクロールトップ"] { display:none !important; }
  /* 写真帯・背景の模様は紙では情報を持たない。インク節約で落とす */
  [data-n="07c_写真帯"], [data-n^="背景 / "], [data-n="背景の弧"] { display:none !important; }
}

/* ------------------------------------------------------------
   日本語の組版
   行頭に「ー」「ょ」「ョ」などが来る（禁則違反）のと、
   最終行に1〜2文字だけ落ちるのを減らす。
   ------------------------------------------------------------ */
.root [data-n] {
  line-break:strict;
  text-wrap:pretty;
}

/* ============================================================
   hover / focus
   Figmaはホバー状態を持たないので、ここで足す。
   既存サイトに合わせ、opacity をわずかに落とすだけの控えめな作り。
   付けるのは「押せる要素」だけ。
   ============================================================ */
.root a { transition: opacity .2s ease, transform .2s ease; }
[data-n^="ボタン / "]:hover, [data-n^="ナビボタン / "]:hover, [data-n="リンク"]:hover { opacity:.94; }
[data-n^="ボタン / "]:active, [data-n^="ナビボタン / "]:active, [data-n="リンク"]:active { opacity:.88; }
/* 文字リンクは面積が小さく .94 では気づけないので、もう少し落とす */
[data-n="コーポレートサイト"]:hover, [data-n="◎ インスタグラム"]:hover,
[data-n="▤ メディア情報"]:hover, [data-inline-link]:hover { opacity:.7; }

/* キーボードで辿ったときに、どこにいるか分かるようにする。
   リンクは緑の帯・赤の帯・グレーパープルのフッターの上にも乗るので、
   地色を選ばない濃茶＋黄の2色重ね（LP1と同じ） */
.root a:focus-visible, .skiplink:focus {
  outline:3px solid #211815; outline-offset:2px; border-radius:4px;
  box-shadow:0 0 0 6px #F5CE2E;
}
/* 指で操作する端末では hover を効かせない（押した後に残って見える） */
@media (hover:none) {
  [data-n^="ボタン / "]:hover, [data-n^="ナビボタン / "]:hover, [data-n="リンク"]:hover { opacity:1; }
}

/* リンク先が未確定の <a href=""> は、押しても同じページを再読み込みするだけなので
   押せる見た目（カーソル）は出さない。href が入れば自動で戻る */
.root a[href=""] { cursor:default; }

/* フッターのSNSリンクが親から数pxはみ出す（.fig の固定幅と実際の文字幅の差） */
[data-n="SNS"] > [data-n] { width:max-content; max-width:100%; }

/* Figma より先行している手直しは css/adjust.css に分離（2026-08-24。読み込みは page-meta.json の styles） */

/* ------------------------------------------------------------
   1440pxより広い画面
   ------------------------------------------------------------ */
@media (min-width:1441px) {
  /* MV：コピー（左端基準）と写真（右端基準）が画面が広いほど離れていく。
     1440px の箱を画面中央に置いた位置に固定する */
  [data-n="02_メインビジュアル"] > [data-n="コピー枠"] { left:calc(50% - 720px); }
  [data-n="02_メインビジュアル"] > [data-n="image 1"] { right:calc(50% - 720px + 48px); }
  /* 解決帯の下向きの三角は .fig の絶対位置（left:686px）。画面中央へ */
  [data-n="07b_解決帯"] > [data-n="三角"] { left:50%; right:auto; margin-left:-34px; }
  /* 比較表の強調枠は .fig の絶対位置。表は中央寄せなので、表と同じ式で置く */
  [data-n="強調カードの枠線"] { left:calc(50% - 560px + 713px); }
  /* セカンドオピニオン：パネルは .fig の絶対位置（左から160px）。画面中央に置き直し、背景写真は画面幅いっぱいに */
  [data-n="写真ステージ"] > [data-n="パネル"] { left:calc(50% - 560px); }
  [data-n="写真ステージ"] > [data-n="画像 / solution"] { width:100%; }
  /* 背景の模様（1440px幅の画像）は画面幅に広げる。05 のものは 2158px 幅で左に -378px はみ出させてある */
  [data-n="04_4つのハードル"] > [data-n="背景 / bgSwirl"] { width:100%; }
  [data-n="05_迫るリスク"] > [data-n="背景 / bgSwirl"] { left:50%; transform:translateX(-50%); min-width:100%; }
}

/* ------------------------------------------------------------
   0. 土台（1439px以下）：固定pxの箱が親からはみ出さないようにする
   意図的に画面外へ出す装飾（背景の弧・ロゴ透かし・キラキラ・背景の模様）と、
   位置が意味を持つ図形（マーカー・三角・強調枠）だけ対象外にする。
   ------------------------------------------------------------ */
@media (max-width:1439px) {
  .root [data-n]:not([data-n="背景の弧"]):not([data-n="画像 / mark"]):not([data-n^="装飾"]):not([data-n="矩形"]):not([data-n="三角"]):not([data-n^="背景 / "]):not([data-n="強調カードの枠線"]) { max-width:100%; min-width:0; }

  /* チップは文字幅に合わせる箱。.fig の固定幅のままだと、
     狭い画面で親の幅いっぱいまで伸びた帯に見える */
  [data-n^="チップ / "] { width:max-content; max-width:100%; }

  /* セクションの左右余白（.fig は160px固定） */
  [data-n="03_CTA_資料DL"], [data-n="04_4つのハードル"], [data-n="05_迫るリスク"],
  [data-n="06_分岐ナビ"], [data-n="07_体制要件_監理団体向け"], [data-n="07b_解決帯"],
  [data-n="08_CTA_無料相談"], [data-n="09_3つの事態_JA向け"], [data-n="11_CTA_セミナー依頼"],
  [data-n="12_制度比較表"], [data-n="13_選ばれる理由"], [data-n="14_CTA_資料DL"],
  [data-n="15_コントラクター事業"], [data-n="16_CTA_コントラクター相談"], [data-n="17_クロージングCTA"],
  [data-n="立ち位置枠"] {
    padding-left:var(--side); padding-right:var(--side);
  }

  /* 横並びのカードは、Figmaの幅の比率を保ったまま縮める（flex-basis:auto で縮小だけ許可） */
  [data-n="カード列"] > [data-n] { flex:0 1 auto; min-width:0; }
  [data-n="カード列"] { align-items:stretch; }
  /* カードの中の固定幅（214 / 309 / 500）は親に合わせる */
  [data-n^="カード / "] > [data-n], [data-n^="理由カード / "] > [data-n],
  [data-n^="分岐 / "] > [data-n] { width:100%; }
  [data-n="見出し枠"] > [data-n], [data-n="本文枠"] > [data-n], [data-n="中身"] > [data-n] { width:100%; }
  /* 分岐ナビのボタン・見出し */
  [data-n^="分岐 / "] [data-n="リンク"] { width:100%; min-height:56px; }
  [data-n^="分岐 / "] [data-n="リンク"] > [data-n] { white-space:normal; text-align:center; }

  /* 縮むと文字やアイコンが欠けるものは縮ませない */
  [data-n^="チップ / "], [data-n^="アイコン"], [data-n="矢印"], [data-n="番号"],
  [data-n="画像 / mark"], [data-n^="マスクグループ"] { flex:none; }
  /* 1枚目のカードだけ、Figma上で古いアイコンの枠の中に写真が置かれている（枠は左右いっぱいに伸びる指定）。
     他の3枚と同じく中央に置く */
  [data-n="アイコン / problem0"] { align-self:center; width:214px; max-width:100%; }

  /* 要件リスト・事態リスト：ラベル380 ＋ 本文740。本文側を縮ませる */
  [data-n="要件リスト"], [data-n="事態リスト"] { width:100%; }
  [data-n="要件リスト"] > [data-n^="行 / "], [data-n="事態リスト"] > [data-n^="行 / "] { width:100%; height:auto; }
  [data-n^="行 / "] > [data-n="ラベル"] { flex:0 0 34%; width:auto; min-width:0; }
  [data-n^="行 / "] > [data-n="本文"] { flex:1 1 auto; width:auto; min-width:0; }
  /* ※ フォームの行（ラベル / ○○）には当てない。必須バッジまで横に伸びる */
  [data-n="要件リスト"] > [data-n^="行 / "] > [data-n] > [data-n],
  [data-n="事態リスト"] > [data-n^="行 / "] > [data-n] > [data-n] { width:100%; }

  /* 比較表：表826pxを枠に合わせて縮める。列は .fig の比率（304 / 260 / 2 / 260） */
  [data-n="比較表の枠"] { width:100%; padding-left:clamp(16px, 5vw, 56px); padding-right:clamp(16px, 5vw, 56px); }
  [data-n="表"] { width:100%; }
  [data-n="表"] > [data-n] { width:100%; }
  [data-n="見出し行"] > [data-n="空"], [data-n^="行 / "] > [data-n="ラベル"]:first-child { flex:0 0 36.8%; width:auto; }
  [data-n="表"] [data-n="ラベル"] { flex:0 0 36.8%; width:auto; min-width:0; }
  [data-n="表"] [data-n="比較"], [data-n="表"] [data-n="主役"],
  [data-n="表"] [data-n="見出し / 技能実習・育成就労"], [data-n="表"] [data-n="見出し / 特定技能"] { flex:1 1 0; width:auto; min-width:0; }
  [data-n="表"] [data-n="隙間"] { flex:0 0 2px; }
  [data-n="表"] [data-n] > [data-n] { max-width:100%; text-align:center; }
  /* 強調枠は .fig では絶対位置（713,64）。表の「特定技能」列に追従させる */
  [data-n="比較表の枠"] { position:relative; }
  [data-n="強調カードの枠線"] {
    left:auto; right:clamp(16px, 5vw, 56px); top:64px;
    width:calc((100% - 2 * clamp(16px, 5vw, 56px)) * 0.3148); height:calc(100% - 128px);
  }

  /* セカンドオピニオン：写真の上の白パネルを流し込みにする */
  [data-n="写真ステージ"] {
    display:flex; flex-direction:column; align-items:center; height:auto; min-height:0;
    padding:clamp(96px, 18vw, 260px) var(--side) 0; overflow:hidden;
  }
  /* 背景写真は .fig の 1440×777 固定。枠の大きさに追従させる（はみ出すと矢印の下まで写真が続く） */
  [data-n="写真ステージ"] > [data-n="画像 / solution"] { width:100%; height:100%; left:0; top:0; right:auto; }
  [data-n="写真ステージ"] > [data-n="パネル"] { position:relative; left:auto; right:auto; top:auto; width:100%; }
  [data-n="パネル"] > [data-n] { width:100%; }
  [data-n="パネル"] [data-n="本文"] > [data-n] { width:100%; }
  [data-n="YUIMEの立ち位置"] { width:100%; }
  [data-n="YUIMEの立ち位置"] > [data-n]:last-child { flex:1 1 auto; width:auto; min-width:0; }

  /* 解決帯：文章の幅は枠いっぱい、三角は中央。
     高さが伸びると .fig の top:308px が文字に重なるので下端基準にする */
  [data-n="07b_解決帯"] > [data-n="サブ文"], [data-n="07b_解決帯"] > [data-n="主文"] { width:100%; }
  [data-n="07b_解決帯"] > [data-n="三角"] { left:50%; right:auto; margin-left:-34px; top:auto; bottom:0; }

  /* CTA帯：ボタンは帯の幅に合わせる。長い文言は折り返す */
  [data-n="CTAボタン"], [data-n="CTAボタン下段"] { width:100%; }
  [data-n="CTAボタン"] > [data-n^="ボタン / "], [data-n="CTAボタン下段"] > [data-n^="ボタン / "] { max-width:100%; }
  /* .fig の改行（2行の文言）は残しつつ折り返す */
  [data-n^="ボタン / "] > [data-n="ラベル"] { white-space:pre-line; text-align:center; width:auto; flex:0 1 auto; min-width:0; }
  [data-n="リード枠"] { width:100%; }
  /* クロージングCTAの見出しは .fig では左揃え（1440pxでは1行なので気づかない）。折り返すと中央の段落と揃わないので中央に */
  [data-n="リード枠"] > [data-n] { width:100%; text-align:center; }

  /* 理由カードの見出し帯は 番号＋文字 の横並び。文字側を縮ませる（1025〜1110px でもはみ出していた） */
  [data-n="見出し帯"] > [data-n]:last-child { flex:1 1 auto; width:auto; min-width:0; }

  /* 最大のリスク・期限バナーの中身 */
  [data-n="05_迫るリスク"] > [data-n="最大のリスク"] > [data-n], [data-n="期限バナー"] > [data-n] { width:100%; }
  [data-n="期限バナー"] > [data-n] { white-space:pre-line; text-align:center; }
  [data-n="05_迫るリスク"] > [data-n="最大のリスク"] > [data-n^="チップ / "] { width:max-content; }
  [data-n="05_迫るリスク"] > [data-n="最大のリスク"] > [data-n="アイコン枠"] { width:100%; }
}

/* ------------------------------------------------------------
   1. 1280px 以下：MVを流し込みにする
   .fig のMVは 1440px 前提の絶対配置（コピー 0〜680 / 写真 546〜1392）。
   ------------------------------------------------------------ */
@media (max-width:1280px) {
  [data-n="02_メインビジュアル"] {
    display:flex; flex-direction:row; align-items:center; justify-content:center;
    height:auto; min-height:0; gap:24px;
    padding:48px var(--side);
  }
  [data-n="02_メインビジュアル"] > [data-n="コピー枠"] {
    position:relative; left:auto; right:auto; top:auto; order:1;
    flex:0 1 560px; width:auto; height:auto; padding:0;
  }
  [data-n="02_メインビジュアル"] > [data-n="image 1"] {
    position:relative; left:auto; right:auto; top:auto; order:2;
    flex:1 1 0; width:auto; min-width:0; height:auto; aspect-ratio:846 / 564;
  }
  [data-n="MVコピー"] { width:100%; }
  [data-n="MVコピー"] > [data-n] { max-width:100%; }
  /* 大見出し（48px・折り返さない指定）は画面幅に追従させる */
  [data-n="“その後”"], [data-n="の準備は"], [data-n="できていますか？"] {
    font-size:clamp(30px, 4.2vw, 48px); line-height:1.4; white-space:normal;
  }
  [data-n="MVコピー"] > [data-n="1行目"] { flex-wrap:wrap; }
  [data-n="マーカー強調"] { width:auto; }
  /* 黄色マーカーは .fig の絶対位置（top:48px）。文字を縮めると宙に浮くので、文字の下端基準にする */
  [data-n="マーカー強調"] > [data-n="矩形"] { top:auto; bottom:.1em; left:4px; right:4px; width:auto; height:.3em; }
  [data-n="MV小見出し"] { white-space:normal; font-size:clamp(18px, 2.1vw, 24px); }
  [data-n="MVリード"] { width:100%; }
}

/* ------------------------------------------------------------
   2. 1024px 以下（タブレット）
   ------------------------------------------------------------ */
@media (max-width:1024px) {
  [data-n="01_ヘッダー"] { padding:16px 24px; }

  [data-n="04_4つのハードル"], [data-n="05_迫るリスク"], [data-n="06_分岐ナビ"],
  [data-n="07_体制要件_監理団体向け"], [data-n="09_3つの事態_JA向け"], [data-n="12_制度比較表"],
  [data-n="13_選ばれる理由"], [data-n="15_コントラクター事業"] {
    padding-top:72px; padding-bottom:72px;
  }
  [data-n="03_CTA_資料DL"], [data-n="08_CTA_無料相談"], [data-n="11_CTA_セミナー依頼"],
  [data-n="14_CTA_資料DL"], [data-n="16_CTA_コントラクター相談"] { padding-top:56px; padding-bottom:56px; }
  [data-n="17_クロージングCTA"] { padding-top:56px; padding-bottom:56px; }

  /* 見出し（40px・折り返さない指定）は画面幅に追従させる */
  [data-n="見出し文"] { width:100%; }
  [data-n="見出し文"] > [data-n="1行目"] { flex-wrap:wrap; justify-content:center; width:100%; }
  [data-n="見出し文"] [data-n] { white-space:normal; }
  [data-n="見出し文"] > [data-n]:not([data-n="1行目"]), [data-n="見出し文"] > [data-n="1行目"] > [data-n] {
    font-size:clamp(26px, 3.5vw, 40px); line-height:1.5;
  }
  [data-n="リード"] { white-space:normal; text-align:center; width:100%; }

  /* 4つのハードル：2列×2段 */
  [data-n="04_4つのハードル"] > [data-n="カード列"] { flex-wrap:wrap; }
  [data-n="04_4つのハードル"] > [data-n="カード列"] > [data-n] { flex:0 0 calc(50% - 12px); }

  /* 期限バナー・問いかけの大きな文字 */
  [data-n="期限バナー"] > [data-n] { font-size:clamp(17px, 2.3vw, 24px); }
  [data-n="問いかけ"] { width:100%; }
  [data-n="問いかけ"] > [data-n] { white-space:normal; text-align:center; font-size:clamp(22px, 3vw, 32px); width:100%; }

  /* 解決帯 */
  [data-n="07b_解決帯"] > [data-n="主文"] { font-size:clamp(22px, 3vw, 32px); }
  [data-n="07b_解決帯"] > [data-n="サブ文"] { font-size:clamp(15px, 2vw, 21px); }

  /* セカンドオピニオン */
  [data-n="写真ステージ"] { padding-top:clamp(72px, 14vw, 160px); }
  [data-n="パネル"] { padding:clamp(24px, 5vw, 64px); }
  [data-n="パネル"] [data-n="見出し文"] > [data-n] { font-size:clamp(24px, 3.3vw, 40px); }

  /* 比較表の文字 */
  [data-n="表"] [data-n="ラベル"] { padding-left:8px; padding-right:8px; }

  /* 写真帯（5枚・各20%）は高さを詰める */
  [data-n="07c_写真帯"], [data-n="07c_写真帯"] > [data-n^="画像 / "] { height:180px; }

  [data-n="右（会社情報）"] { padding:64px 32px 32px; }
}

/* ------------------------------------------------------------
   3. 768px 以下（スマートフォン）
   ------------------------------------------------------------ */
@media (max-width:768px) {
  [data-n="04_4つのハードル"], [data-n="05_迫るリスク"], [data-n="06_分岐ナビ"],
  [data-n="07_体制要件_監理団体向け"], [data-n="09_3つの事態_JA向け"], [data-n="12_制度比較表"],
  [data-n="13_選ばれる理由"], [data-n="15_コントラクター事業"] {
    padding-top:56px; padding-bottom:56px;
  }

  /* ヘッダー：ピル型ナビを隠す（LP1と同じ） */
  [data-n="01_ヘッダー"] { padding:14px 16px; }
  [data-n^="ナビボタン / "] { display:none; }

  /* MV：写真を上、コピーを下に縦積み */
  [data-n="02_メインビジュアル"] { flex-direction:column; align-items:stretch; gap:20px; padding:24px 20px 40px; }
  [data-n="02_メインビジュアル"] > [data-n="image 1"] { order:1; width:100%; flex:none; }
  [data-n="02_メインビジュアル"] > [data-n="コピー枠"] { order:2; flex:none; width:100%; }
  [data-n="“その後”"], [data-n="の準備は"], [data-n="できていますか？"] { font-size:clamp(26px, 7.5vw, 34px); }
  [data-n="MV小見出し"] { font-size:18px; }
  [data-n="MVリード"] { font-size:15px; }
  [data-n="MVコピー"] > [data-n="間"] { height:12px; }

  /* 見出し */
  [data-n="見出し文"] > [data-n]:not([data-n="1行目"]), [data-n="見出し文"] > [data-n="1行目"] > [data-n] {
    font-size:24px; line-height:1.5;
  }
  [data-n="見出し"] { width:100%; }
  [data-n^="チップ / "] { padding:7px 16px; }
  [data-n^="チップ / "] > [data-n] { font-size:14px; letter-spacing:.1em; }

  /* 横並びをすべて縦積みに */
  [data-n="カード列"], [data-n="フッター本体"] { flex-direction:column; gap:16px; }
  [data-n="カード列"] > [data-n] { width:100%; flex:none; }
  /* 4つのハードル（4枚）とコントラクター（3枚）は 768px でもまだ横に並べられる。1列は 640px 以下 */
  [data-n="04_4つのハードル"] > [data-n="カード列"] { flex-direction:row; flex-wrap:wrap; gap:16px; }
  [data-n="04_4つのハードル"] > [data-n="カード列"] > [data-n] { flex:0 0 calc(50% - 8px); width:auto; }
  [data-n="15_コントラクター事業"] > [data-n="カード列"] { flex-direction:row; gap:12px; }
  [data-n="15_コントラクター事業"] > [data-n="カード列"] > [data-n] { flex:1 1 0; width:auto; min-width:0; padding:24px 14px; }

  /* 要件リスト・事態リスト：余白を詰める（ラベルを上に積むのは 640px 以下） */
  [data-n="要件リスト"] [data-n="ラベル"], [data-n="事態リスト"] [data-n="ラベル"] { padding:16px 12px; }
  [data-n="要件リスト"] [data-n="本文"], [data-n="事態リスト"] [data-n="本文"] { padding:16px 18px; }

  /* 比較表：3列のまま、文字と余白を詰める（組合内で印刷されても表として読めるように） */
  [data-n="比較表の枠"] { padding:24px 12px; }
  [data-n="強調カードの枠線"] { right:12px; top:24px; width:calc((100% - 24px) * 0.3148); height:calc(100% - 48px); }
  [data-n="表"] [data-n] > [data-n] { font-size:12px; line-height:1.5; }
  [data-n="表"] [data-n="ラベル"] { padding-left:4px; padding-right:4px; }
  [data-n="表"] [data-n="ラベル"] > [data-n] { font-size:12px; }
  [data-n="表"] [data-n="見出し / 技能実習・育成就労"] > [data-n], [data-n="表"] [data-n="見出し / 特定技能"] > [data-n] { font-size:13px; }
  [data-n="表"] [data-n^="行 / "], [data-n="表"] [data-n="見出し行"] { min-height:64px; }

  /* 期限バナー・最大のリスク */
  [data-n="期限バナー"] { padding:16px 18px; }
  [data-n="05_迫るリスク"] > [data-n="最大のリスク"] { padding:28px 20px; }
  [data-n="05_迫るリスク"] > [data-n="最大のリスク"] > [data-n]:last-child { font-size:15px; }

  /* 解決帯・写真帯 */
  [data-n="07b_解決帯"] { padding-top:40px; padding-bottom:48px; }
  [data-n^="装飾"] { display:none; }
  [data-n="07c_写真帯"], [data-n="07c_写真帯"] > [data-n^="画像 / "] { height:120px; }

  /* セカンドオピニオン */
  [data-n="写真ステージ"] { padding-top:120px; }
  [data-n="パネル"] { gap:20px; }
  [data-n="パネル"] [data-n="本文"] > [data-n] { font-size:14px; }
  [data-n="矢印枠"] { padding-top:28px; }
  [data-n="立ち位置枠"] { padding-top:20px; padding-bottom:56px; }
  [data-n="YUIMEの立ち位置"] { flex-direction:column; padding:24px 20px; gap:16px; }
  [data-n="YUIMEの立ち位置"] > [data-n]:last-child { width:100%; font-size:15px; text-align:left; }

  /* 理由カード：見出し帯は 番号＋見出し の横並び。幅が足りないときは見出しを番号の下に回す */
  [data-n^="理由カード / "] > [data-n^="画像 / "] { height:190px; }
  [data-n="見出し帯"] { padding:12px 16px; flex-wrap:wrap; gap:8px 14px; }
  [data-n="見出し帯"] > [data-n]:last-child { flex:1 1 220px; font-size:16px; }

  /* CTA：ボタンは1列に。2本並びも縦に積む */
  [data-n="CTAボタン"] { flex-direction:column; gap:12px; }
  [data-n="CTAボタン"] > [data-n^="ボタン / "], [data-n="CTAボタン下段"] > [data-n^="ボタン / "] {
    width:100%; height:auto; min-height:64px; padding:14px 16px; gap:10px;
  }
  [data-n^="ボタン / "] > [data-n="ラベル"] { font-size:16px; letter-spacing:.04em; }
  [data-n^="ボタン / "] > [data-n="アイコン"] { width:22px; height:22px; }
  [data-n="リード枠"] { padding-bottom:24px; }
  [data-n="リード枠"] > [data-n="見出し"] { font-size:22px; }
  [data-n="リード枠"] > [data-n]:last-child { font-size:14px; }

  /* 背景の弧は消す */
  [data-n="背景の弧"] { display:none; }

  /* 本文まわりの文字サイズ */
  [data-n="本文枠"] > [data-n], [data-n="中身"] > [data-n]:not([data-n="リンク"]) { font-size:14px; }
  [data-n="見出し枠"] > [data-n] { font-size:18px; }

  /* フッター */
  [data-n="右（会社情報）"] { width:100%; padding:48px 20px 32px; }
  /* 住所は1行で組まれているため、狭い画面で切れる。折り返しを許す */
  [data-n="会社情報"] > [data-n] { width:100%; white-space:normal; text-align:center; }
}

/* ------------------------------------------------------------
   4. 高さの解除（1024px以下で共通）
   生成物は Figma の高さをそのまま px で持っている。縦積みにすると
   中身が増えて枠から溢れ、次のセクションと重なる。
   高さが意味を持つもの（写真・アイコン・矢印・区切り線）だけ残す。
   ※ :not() を改行でつなぐと「子孫」の意味になるので必ず1行で書く
   ------------------------------------------------------------ */
@media (max-width:1024px) {
  .root [data-n]:not([data-n^="画像 / "]):not([data-n="image 1"]):not([data-n^="マスクグループ"]):not([data-n="矩形"]):not([data-n^="アイコン"]):not([data-n="背景の弧"]):not([data-n^="背景 / "]):not([data-n="矢印"]):not([data-n="三角"]):not([data-n^="装飾"]):not([data-n="番号"]):not([data-n="区切り"]):not([data-n="隙間"]):not([data-n="07c_写真帯"]):not([data-n^="ナビボタン / "]):not([data-n^="ボタン / "]):not([data-n="強調カードの枠線"]):not([data-n="丸"]):not([data-n="チェックボックス"]):not([data-n="スクロールトップ"]):not([data-n="チェック丸"]):not([data-n="チェック"]):not([data-n="DLアイコン"]):not([data-n="間"]) { height:auto; }

  /* 比較表のセルは高さが揃っていないと表に見えない。行の高さに合わせて伸ばす */
  [data-n="表"] [data-n^="行 / "] > [data-n], [data-n="表"] [data-n="見出し行"] > [data-n] { align-self:stretch; }
  [data-n="表"] [data-n^="行 / "], [data-n="表"] [data-n="見出し行"] { min-height:72px; }
  /* 要件・事態の行も同じ（ラベルの地色が本文より短いと段差になる） */
  [data-n^="行 / "] > [data-n="ラベル"], [data-n^="行 / "] > [data-n="本文"] { align-self:stretch; }
  /* 理由カードの見出し帯・カードの中身 */
  [data-n="見出し帯"] { min-height:68px; }
  /* 写真帯は高さが見た目を決めるので残す（上で指定済み） */
  /* 間（MVの空き）は高さそのもの。上の一括指定の :not() で除外してある（除外しないと優先度で負けて 0px になる。2026-08-22 修正） */
  /* CTAボタン（97px固定）は 1024px以下で文言が折り返すことがあるので、中身に合わせて伸びる */
  [data-n="CTAボタン"] > [data-n^="ボタン / "], [data-n="CTAボタン下段"] > [data-n^="ボタン / "] { height:auto; min-height:80px; }
}
@media (max-width:768px) {
  [data-n="CTAボタン"] > [data-n^="ボタン / "], [data-n="CTAボタン下段"] > [data-n^="ボタン / "] { min-height:64px; }
}

/* ------------------------------------------------------------
   4b. 640px 以下：横に並べていたカード・表組みを1列に
   ------------------------------------------------------------ */
@media (max-width:640px) {
  /* .fig の手動改行は 1440px 向け。狭い幅では自動折り返しと二重になって 1〜3 文字の孤立行ができるので、改行を無視する
     （引用を1行ずつ並べている「最大のリスク」本文と、2行目の大きさが違うボタン文言は除く） */
  [data-n="期限バナー"] > [data-n], [data-n="07b_解決帯"] > [data-n="主文"], [data-n="07b_解決帯"] > [data-n="サブ文"],
  [data-n="リード枠"] > [data-n="見出し"], [data-n="問いかけ"] > [data-n] { white-space:normal; }
  [data-n="04_4つのハードル"] > [data-n="カード列"], [data-n="15_コントラクター事業"] > [data-n="カード列"] { flex-direction:column; gap:16px; }
  [data-n="04_4つのハードル"] > [data-n="カード列"] > [data-n],
  [data-n="15_コントラクター事業"] > [data-n="カード列"] > [data-n] { flex:none; width:100%; }
  [data-n="15_コントラクター事業"] > [data-n="カード列"] > [data-n] { padding:32px 24px; }
  /* 要件リスト・事態リスト：ラベルを上に積む */
  [data-n="要件リスト"] > [data-n^="行 / "], [data-n="事態リスト"] > [data-n^="行 / "] { flex-direction:column; }
  [data-n="要件リスト"] [data-n="ラベル"], [data-n="事態リスト"] [data-n="ラベル"] { flex:none; width:100%; padding:14px 16px; }
  [data-n="要件リスト"] [data-n="本文"], [data-n="事態リスト"] [data-n="本文"] { width:100%; }
  [data-n="要件リスト"] [data-n="ラベル"] > [data-n], [data-n="事態リスト"] [data-n="ラベル"] > [data-n] { text-align:center; }
}

/* ------------------------------------------------------------
   5. 400px 以下（小さいスマートフォン）
   見出し24pxだと「育成就労制 / 度」のように語の途中で折れる。少し詰める
   ------------------------------------------------------------ */
@media (max-width:400px) {
  [data-n="見出し文"] > [data-n]:not([data-n="1行目"]), [data-n="見出し文"] > [data-n="1行目"] > [data-n] { font-size:21px; }
  [data-n="“その後”"], [data-n="の準備は"], [data-n="できていますか？"] { font-size:26px; }
  [data-n="表"] [data-n] > [data-n] { font-size:11px; }
  [data-n="表"] [data-n="比較"], [data-n="表"] [data-n="主役"] { padding:0 4px; }
}

/* ============================================================
   6. 資料DLフォーム（download.html）／完了（thanks.html）
   .fig の「入力欄」レイヤー（白い箱・角丸8・内側の余白）はそのまま枠として使い、
   その中に透明な input / select を敷いている（LP1 contact.html と同じ方式）。
   ラベル343px＋間隔40px＋入力欄799px（全体1182px）の2カラム。
   ============================================================ */
:root { --lbcol:383px; }                                   /* 343（ラベル列）＋40（間隔） */
@media (max-width:1200px) { :root { --lbcol:288px; } }     /* 260＋28 */
@media (max-width:1024px) { :root { --lbcol:220px; } }     /* 200＋20 */
@media (max-width:768px)  { :root { --lbcol:0px; } }       /* 縦積みになる */

.field .ctl {
  flex:1 1 auto; min-width:0; width:100%; align-self:stretch;
  border:0; background:transparent; outline:none; box-shadow:none;
  font:inherit; color:#211815; padding:0;
}
.field .ctl::placeholder { color:#B4B4B4; opacity:1; }
.field .ctl--select { appearance:none; -webkit-appearance:none; cursor:pointer; }
.field .ctl--select:invalid { color:#B4B4B4; }
.ctl-chevron {
  width:14px; height:9px; flex:none; pointer-events:none;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M2 2.5 L7 6.5 L12 2.5' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 選択肢の文字が右の山形と重なる（枠の右パディングは山形のぶんしかない） */
.field .ctl--select { padding-right:6px; }

/* ラジオ・チェックは本物の控えを透明にして重ね、.fig の丸／四角を見た目として使う */
.ctl-sr { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.opt { cursor:pointer; }
.opt .ctl-sr:checked ~ [data-n="丸"] { box-shadow:inset 0 0 0 1.5px #E72227; }
.opt .ctl-sr:checked ~ [data-n="丸"]::after {
  content:""; position:absolute; inset:4px; border-radius:50%; background:#E72227;
}
/* 1行まるごとが押せるカード。選んだ行は枠を赤に（手書き版と同じ見せ方） */
.opt:has(.ctl-sr:checked) { box-shadow:inset 0 0 0 2px #E72227; }
[data-n="チェックボックス"] { position:relative; cursor:pointer; }
[data-n="チェックボックス"]:has(:checked) { background:#E72227; box-shadow:inset 0 0 0 1px #E72227; }
[data-n="チェックボックス"]:has(:checked)::after {
  content:""; position:absolute; left:5px; top:1px; width:6px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* キーボードで辿れるように、フォーカスが分かる指定（生成り／白の上なので緑1色で足りる） */
.field:focus-within, .opt:has(.ctl-sr:focus-visible) { outline:2px solid #337A28; outline-offset:2px; border-radius:8px; }
[data-n="チェックボックス"]:has(.ctl-sr:focus-visible) { outline:2px solid #337A28; outline-offset:3px; }
/* 同意チェックの当たり判定を 44px 以上にする（見た目は 18px のまま）。
   ::before では押せないので、透明な本物の input を枠の外まで広げる */
[data-n="チェックボックス"] > .ctl-sr { inset:-13px; width:auto; height:auto; }
[data-n="同意チェック"] { position:relative; }
[data-n="同意チェック"] > [data-n="同意の文"] { cursor:pointer; }

/* 送信ボタン（button 要素になるので既定の見た目を消す） */
button[data-n^="ボタン / "] { border:0; font:inherit; cursor:pointer; }
button[data-n^="ボタン / "]:hover { background:#cf1d21; }

/* ------------------------------------------------------------
   入力エラーの表示（.fig「資料DL エラー表示の見本」と同じ見せ方）
     ・帯   … 入力欄の列に置く。赤枠2px＋薄赤の地＋！アイコン、16px太字
     ・欄   … 内側に赤の枠（2px）
     ・文言 … 欄の直下8px、13px太字の赤
   本文カラムの gap が 28px あるので、文言は負のマージンで 8px まで詰める
   ------------------------------------------------------------ */
.form-error {
  display:flex; align-items:center; gap:10px;
  margin:0 0 0 var(--lbcol); width:calc(100% - var(--lbcol)); max-width:100%;
  padding:16px 20px; border:2px solid #DD001B; border-radius:8px;
  background:#FFF1F2; color:#DD001B; font-size:16px; font-weight:700; line-height:1.6;
}
.form-error svg { width:20px; height:20px; flex:none; }
.field.is-error { box-shadow:inset 0 0 0 2px #DD001B; }
.field.is-error:focus-within { outline-color:#DD001B; outline-offset:4px; }
[role="radiogroup"].is-error .opt { box-shadow:inset 0 0 0 2px #DD001B; }
[data-n="チェックボックス"].is-error { box-shadow:inset 0 0 0 2px #DD001B; }
.field-error {
  margin:-20px 0 0; padding-left:var(--lbcol);
  color:#DD001B; font-size:13px; font-weight:700; line-height:1.6;
}
/* 同意チェックのエラー文言は同じ列の中（ラベル列のぶんを足さない） */
[data-n="同意と送信ボタン"] > .field-error { margin:-7px 0 0; padding-left:0; }

/* ------------------------------------------------------------
   フォームのレスポンシブ：ラベル列を 343 → 260 → 200 → 上置き と縮める
   ------------------------------------------------------------ */
@media (max-width:1439px) {
  [data-n="本文カラム"] { width:100%; max-width:1182px; }
  [data-n="本文カラム"] > [data-n^="行 / "], [data-n="同意と送信ボタンの行"] { width:100%; height:auto; }
  [data-n="本文カラム"] [data-n^="ラベル / "] { flex:none; }
  [data-n="本文カラム"] [data-n^="入力欄 / "], [data-n="ラジオ"], [data-n="同意と送信ボタン"] { flex:1 1 0; min-width:0; width:auto; }
  [data-n="本文カラム"] [data-n^="ラベル / "] > [data-n]:first-child { width:auto; flex:0 1 auto; min-width:0; }
  [data-n="ラジオ"] > [data-n^="選択肢 / "] { width:100%; }
  [data-n="ラジオ"] > [data-n^="選択肢 / "] > [data-n]:last-child { white-space:normal; width:auto; flex:1 1 auto; min-width:0; }
  [data-n="同意と送信ボタン"] > [data-n^="ボタン / "] { width:100%; }
  [data-n="F02_見出し"] > [data-n] { white-space:pre-line; width:auto; max-width:100%; text-align:center; }
  /* 完了ページ：ボタンは中央の箱（480px）の幅まで。
     LP2本体用の汎用ルール（.root [data-n]:not()… の max-width:100% と [data-n="中身"] > [data-n]{width:100%}）が
     同じレイヤー名「中身」に当たって詳細度で勝つため、ここだけ !important で上書きする */
  [data-n="T02_完了"] [data-n="中身"] { width:100% !important; max-width:480px !important; }
  [data-n="T02_完了"] [data-n="ボタン枠"], [data-n="T02_完了"] [data-n="見出し枠"] { width:100% !important; max-width:480px !important; }
  [data-n="T02_完了"] [data-n="チェック丸"] { width:80px !important; height:80px !important; }
  [data-n="T02_完了"] [data-n^="ボタン / "] { width:100%; }
  [data-n="T02_完了"] [data-n="見出し枠"] > [data-n] { white-space:normal; width:auto; text-align:center; }
}
@media (max-width:1200px) {
  [data-n="本文カラム"] > [data-n^="行 / "], [data-n="同意と送信ボタンの行"] { gap:28px; }
  [data-n="本文カラム"] [data-n^="ラベル / "], [data-n="同意と送信ボタンの行"] > [data-n="空き"] { width:260px; }
}
@media (max-width:1024px) {
  [data-n="本文カラム"] > [data-n^="行 / "], [data-n="同意と送信ボタンの行"] { gap:20px; }
  [data-n="本文カラム"] [data-n^="ラベル / "], [data-n="同意と送信ボタンの行"] > [data-n="空き"] { width:200px; }
  [data-n="本文カラム"] [data-n^="ラベル / "] > [data-n]:first-child { letter-spacing:.04em; }
  [data-n="F02_見出し"] > [data-n] { font-size:28px; }
  [data-n="F02_見出し"] { padding-top:56px; }
  [data-n="F03_フォーム"] { padding:40px 24px 72px; }
  /* 入力欄・選択肢・ボタンは高さが見た目を決める（高さ解除の対象外にする代わりに最低高さを持つ） */
  [data-n^="入力欄 / "] { min-height:72px; }
  [data-n^="選択肢 / "] { min-height:64px; }
  [data-n="同意と送信ボタン"] > [data-n^="ボタン / "] { min-height:64px; }
  [data-n="T02_完了"] { min-height:520px; padding:72px 20px; }
  [data-n="T02_完了"] [data-n="見出し枠"] > [data-n] { font-size:28px; }
}
@media (max-width:768px) {
  /* ラベルを入力欄の上に置く */
  [data-n="本文カラム"] > [data-n^="行 / "] { flex-direction:column; align-items:stretch; gap:10px; }
  [data-n="本文カラム"] [data-n^="ラベル / "] {
    width:100%; flex:none; justify-content:flex-start; text-align:left; height:auto; padding-top:0;
  }
  [data-n="本文カラム"] [data-n^="ラベル / "] > [data-n]:first-child { font-size:15px; text-align:left; }
  [data-n="本文カラム"] [data-n^="入力欄 / "], [data-n="ラジオ"], [data-n="同意と送信ボタン"] { width:100%; flex:none; }
  [data-n="本文カラム"] { gap:22px; }
  [data-n="同意と送信ボタンの行"] > [data-n="空き"] { display:none; }
  [data-n="同意と送信ボタンの行"] { gap:0; }
  [data-n^="入力欄 / "] { min-height:64px; padding-left:16px; padding-right:16px; }
  [data-n^="入力欄 / "] .ctl { font-size:16px; }
  [data-n^="選択肢 / "] { min-height:60px; padding:12px 16px; }
  [data-n^="選択肢 / "] > [data-n]:last-child { font-size:15px; }
  [data-n="F02_見出し"] { padding-top:40px; }
  [data-n="F02_見出し"] > [data-n] { font-size:22px; }
  [data-n="F03_フォーム"] { padding:28px 20px 56px; }
  /* 文言が長く右端の山形と重なるので、スマホでは山形を出さない */
  [data-n="同意と送信ボタン"] > [data-n^="ボタン / "] { min-height:60px; padding:0 16px; }
  [data-n="同意と送信ボタン"] > [data-n^="ボタン / "] > [data-n] { font-size:15px; letter-spacing:.02em; white-space:normal; text-align:center; }
  [data-n="同意と送信ボタン"] > [data-n^="ボタン / "] > [data-n="山形"] { display:none; }
  [data-n="同意の文"] { flex-wrap:wrap; }
  .form-error { margin-left:0; width:100%; padding:14px 16px; font-size:14px; }
  .field-error { margin-top:-14px; }
  /* フッターの「↑」ボタン */
  [data-n="スクロールトップ"] { right:20px; }
  [data-n="同意の文"] > [data-n] { white-space:normal; }
  /* 完了ページ */
  [data-n="T02_完了"] { min-height:440px; padding:56px 20px; }
  [data-n="T02_完了"] [data-n="見出し枠"] > [data-n] { font-size:22px; }
  [data-n="T02_完了"] [data-n^="ボタン / "] { height:72px; }
  [data-n="T02_完了"] [data-n^="ボタン / "] > [data-n]:last-child { font-size:17px; letter-spacing:.02em; white-space:normal; text-align:center; }
  [data-n="T02_完了"] [data-n="チェック丸"] { width:64px !important; height:64px !important; }
  [data-n="チェック丸"] > [data-n="チェック"] { width:28px; height:28px; }
}
@media (max-width:1024px) {
  /* 高さ解除の例外：入力欄・選択肢・チェック丸は上で最低高さを持たせている。丸・チェックボックスは大きさが見た目そのもの */
  [data-n="丸"], [data-n="チェックボックス"], [data-n="チェック丸"], [data-n="チェック"], [data-n="DLアイコン"] { flex:none; }
  [data-n="チェック丸"] { height:80px; }
  [data-n="スクロールトップ"] { width:60px; height:60px; }
  [data-n="本文カラム"] [data-n^="ラベル / "] > [data-n^="バッジ"] { width:auto; flex:none; }
}