@charset "UTF-8";
/* ============================================================
   ソラヒカリ 下層ページだけが使う共通（css\sub.css）
   トップは読まない。1画面目の重さの枠を守るため。design.md 6-11／A5-8（2026-09-23 web-lead 判断）
   読むのはトップ以外の全ページ（/hojokin/ /hojokin/tokyo/ /erabikata/ /partner/ /kimari/ /kiyaku/
   privacy.html operator.html form\*.php）。読む順番は style.css → sub.css → 束。
   中身は、トップが1行も使わず、2つ以上の束（器を持たない privacy.html・operator.html も
   1つの器として数える）が使う規則。もとは style.css の末尾の塊（2026-09-23 に切り出した）。
   第6-11節の「CSS は最大2本」の例外（下層は3本）。
   ============================================================ */
/* ---- 日ざしの帯（design.md 8-1）。地はヘッダーと同じ夜、上に 1px。点は金のまま ----
   金のベタ帯はやめた（工事現場の警告テープの配色になる）。
   中身は文字だけ。ボタンを入れない。左端に sun-dot を1つだけ */
.sun-bar {
  background: var(--c-sky-0);
  color: var(--c-text);
  border-top: 1px solid var(--c-line);
  font-size: 14px; font-weight: 700; line-height: 1.5;
  letter-spacing: .02em;
}
.sun-bar .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2); min-height: 36px;
  padding-top: var(--s-1); padding-bottom: var(--s-1);
  text-align: center;
}
.sun-bar .sun-dot { flex: 0 0 auto; width: 12px; height: 12px; display: block; }
.sun-bar p { margin: 0; }

/* ---- パンくず ---- */
.breadcrumb { font-size: var(--fs-note); color: var(--c-text-weak); padding: var(--s-3) 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
/* 区切りの「＞」は目に見える字。⚠ --c-line-strong を当てない（枠専用。
   文字の最低線 4.5:1 を割る。2026-09-20 に直した） */
.breadcrumb li + li::before { content: "＞"; margin: 0 var(--s-1); color: var(--c-text-weak); }
/* 14px の字。上下 +14px */
/* 押せる幅も 44px 以上にする（12-2 は 44×44px）。「ホーム」は3文字で 42.27px しかない。
   inline のままにする（inline-block にすると行の高さが 46px になり帯が背高くなる）。
   左右 2px の詰め物を同じだけ負のマージンで引き戻すので、li の幅は 42.27px のまま＝
   「ホーム」の字も「＞」の位置も動かない。幅 42.27 → 46.27px。高さ 46.00px は据え置き */
.breadcrumb li a {
  padding: 15px 2px;   /* A-昼5 で字が 14px のまま（768px〜 も）になり 14px では 43.8px。15px で 45.8px */
  margin-left: -2px; margin-right: -2px;
}

/* ---- 目次（design.md 8-16。畳まない。第A5-12-2：地 --c-bg-soft・リンク --c-link）----
   ⚠ 2026-09-19 の C2版で css\pg-main.css（束）から共通へ上げた。
     置くページが /kiyaku/ の1枚から6枚に増え、2つの束（hj-main・pg-main）と
     器を持たないページ（privacy.html・operator.html）の両方に出るため
     （design.md 第6-11節「どちらに置くかの決め方」。器を持たないページも1つの器として数える）。
   地は1段沈めた紙（注釈の箱と同じ）。C2版の左 4px の藍は A-昼5 で外した（線は手元の灯りの1種類）。
   見出しは h2 にしない（目次そのものが目次に載ってしまう）。番号は ol に任せる。
   ページの下に「目次へ戻る」を置かない（端末の「戻る」で帰れる）
   ⚠ 内側の余白は C2版で var(--s-4) → var(--s-5)（16 → 24px。design.md 移行メモ (8) の ⑤）。
     .toc li の 12px と .toc a の当たり判定は1pxも動かしていない */
.toc {
  background: var(--c-bg-soft);
  border-radius: var(--r-m);
  padding: var(--s-5);
  margin: 0 0 var(--s-6);
}
.toc .toc-head { font-size: var(--fs-body); font-weight: 700; color: var(--c-head); margin: 0 0 var(--s-3); }
.toc ol { margin: 0; padding-left: 1.4em; }
/* 押せるものの隣との間は 8px 以上（12px 取る）。
   ⚠ .toc a は block にする（2026-09-19 に直した。design.md 8-16 の「上下に重なっていた」）。
     行の中（inline）の上下の詰め物は行の高さに1pxも効かないので、
     当たり判定だけが行送りより高くなり、下の行の当たり判定に食い込んでいた
     （上下12px のとき 3.07px 重なっていた。実測は pages.md）。
     block にすると当たり判定が行の箱の中に収まるので、
     .toc li の下の余白 12px が、そのまま「押せる面と面のあいだ」になる（12 ≧ 8）。
     おまけに行の幅ぜんぶが押せる面になる（短い行の幅が 44px を割る落ち方も消える）。
   ⚠ .toc li の 12px は1pxも動かさない（余白を広げる手は、当たり判定の溢れを直さない）。
   ⚠ box-sizing: border-box は上の 2. 土台で全要素に当たっているので書かない。
   ⚠ inline-block にしない（design.md 12-2 が文の中で禁じている）。
   高さは 8 ＋ 行の高さ（16px × 1.9 ＝ 30.4px）＋ 8 ＝ 46.4px。
   min-height は、字体やブラウザで行の高さが数px 縮んだときの床。**実測は pages.md** */
.toc li { margin-bottom: var(--s-3); }
.toc li:last-child { margin-bottom: 0; }
.toc a {
  color: var(--c-link);
  display: block;
  padding: var(--s-2) 0;
  min-height: 44px;
}

/* ---- 畳んだ中身（design.md 8-12）。/hojokin/ とフォームが使う ----
   枠箱にしない・角丸も影も付けない・左の縦線も付けない。
   summary の形は style.css の 9. の .faq と共有。開いたときだけ中身の上下に余白が付く */
.fold { margin-top: var(--s-5); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }

/* 畳んだ中身の、文章だけのとき（補助金ページの制度ごとの条件。design.md 8-12 の用途③）。
   上下の余白は、もとのカード（.cards）のときと同じ。枠箱にしない・左の縦線も付けない */
.fold > .fold-body { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.fold > .fold-body > *:last-child { margin-bottom: 0; }

/* ---- 確認画面の表 ---- */
.check-list { margin: 0 0 var(--s-6); }
.check-list > div {
  border-bottom: 1px solid var(--c-line);
  padding: var(--s-3) 0;
}
.check-list dt { font-weight: 700; color: var(--c-head); font-size: var(--fs-note); margin: 0 0 var(--s-1); }
.check-list dd { margin: 0; white-space: pre-wrap; }
/* 16px の字。上下 +12px */
.check-list dd a:not(.btn) { padding-top: 12px; padding-bottom: 12px; }  /* 20.67〜24.67 → 44.67 */

/* ---- 流れの図（番号つき。CSS だけで描く）。/hojokin/ と送信後の画面（トップは intro.css の .lamps） ---- */
.flow { list-style: none; margin: 0; padding: 0; }
.flow > li {
  position: relative;
  padding-left: calc(44px + var(--s-4));
  padding-bottom: var(--s-6);
  margin: 0;
}
.flow > li:last-child { padding-bottom: 0; }
.flow > li::before {
  content: attr(data-step);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-main); color: var(--c-text-on-dark);
  font-size: 20px; font-weight: 700; line-height: 1;
  border-radius: 50%;
}
.flow > li:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 8px;
  border-left: 2px solid var(--c-line-strong);
}
.flow h3 { margin-bottom: var(--s-2); }
.flow p { margin-bottom: 0; }

@media (min-width: 768px) {
  /* 流れの図は横3列。線は丸と丸の間だけ */
  .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .flow > li { padding: 0; }
  .flow > li::before { position: static; margin: 0 0 var(--s-3); }
  .flow > li:not(:last-child)::after {
    top: 22px; left: calc(44px + var(--s-2)); right: calc(var(--s-5) * -1 + var(--s-2)); bottom: auto;
    border-left: 0; border-top: 2px solid var(--c-line-strong);
  }

  /* 4段の流れ（媒体版）は、広い画面でも縦に積む。
     横4列にすると1列 155〜250px になり、各段の1〜2行の説明が読めなくなる。
     design.md 8-5 の「PC は横」は3段のときの決めごと（A版）。4段目を足したのでここだけ外す */
  .flow--4 { display: block; }
  .flow--4 > li { padding-left: calc(44px + var(--s-4)); padding-bottom: var(--s-6); }
  .flow--4 > li:last-child { padding-bottom: 0; }
  .flow--4 > li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .flow--4 > li:not(:last-child)::after {
    top: 44px; left: 21px; right: auto; bottom: 8px;
    border-top: 0; border-left: 2px solid var(--c-line-strong);
  }
}

/* ---- 塊に付ける仮置きの形（.kari--block。design.md 第10節。2026-09-19 に足した）----
   2026-09-23 に css\style.css から sub.css へ移した（トップは使わない。.kari は束に出さない。
   design.md 第6-11節・第A5-8節。いったん pg-main.css に置いたが、同じ日にここへ直した）。
   語ではなく「段落ごと・節ごと」がまだ決まっていないときに使う（中身は判断待ちの札）。
   色・点線・画面最上部の赤い帯・web-check の見方は、共通の .kari とまったく同じ。
   違うのは display と角と内側の余白だけ（角は「置いてあるもの」の --r-m ＝ A-昼5 で 0） */
.kari--block {
  display: block;
  max-width: var(--w-text);
  border-radius: var(--r-m);
  padding: var(--s-4);
  margin: 0 0 var(--s-5);
}
.kari--block > *:last-child { margin-bottom: 0; }

/* ---- 紙の面（第A5-3節②・第A5-12節）。<main class="… paper"> だけ ---- */
.paper {
  --c-bg: #FBF7EF;
  --c-sky: #F4EDDF;
  --c-bg-soft: #F6F0E4;
  --c-sun-tint: #F6F0E4;
  --c-head: #1F4B82;
  --c-text: #1F3349;
  --c-text-weak: #4F5A66;
  --c-main: #1F4B82;
  --c-main-deep: #0A192B;
  --c-main-tint: #EFE5D1;
  --c-link: #1D4F86;
  --c-text-on-dark:#FFFFFF;
  --c-line: #DCCFB4;
  --c-line-strong: #5E7389;
  --c-cta-edge: #8A6307;
  --logo-gap: #FBF7EF;
  --fs-h2: 24px;
  --sec-pad-t: 72px;
  --sec-pad-b: 56px;
  background: var(--c-bg);
  color: var(--c-text);
}
/* 紙の上の手元の灯りは紺のベタ */
.paper .honest-box::before, .paper .note-box::before, .paper .area-note::before { background: var(--c-main); }
@media (min-width: 768px) {
  .paper { --fs-h2: 28px; --sec-pad-t: 96px; --sec-pad-b: 72px; }
}
/* 1100px〜 は夜の上に置いた1枚の紙（〜1099px は画面幅いっぱい） */
@media (min-width: 1100px) {
  .paper { --fs-h2: 32px; --sec-pad-t: 128px; --sec-pad-b: 96px; max-width: 1120px; margin: 0 auto 64px; }
}

/* ---- ルミエナ（design.md 第A5-19節の4）。絵が左・吹き出しが右。吹き出しは押せない ----
   紙の面は地 --c-main-tint・縁 1px --c-line。夜の面（.on-dark）は紙の白・縁なし。
   字は紙の値 #1F3349 に固定（どちらの地も明るい）。角 16px はボタン 6px・札 999px と分けるため。
   .lm .lm-say と2段にしているのは、各束の「main p」系の規則に負けないため。動きは付けない（第8項） */
.lm { --lm-size: 80px; display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s-5); }
.lm-fig { flex: 0 0 auto; width: var(--lm-size); height: var(--lm-size); }
.lm .lm-say {
  position: relative; margin: 0; max-width: min(100%, 32em);
  padding: 10px 14px; border-radius: 16px;
  background: var(--c-main-tint); border: 1px solid var(--c-line);
  color: #1F3349; font-family: "LmYusei", var(--f-base); font-size: 16px; font-weight: 400; line-height: 1.6; text-align: left;
  text-wrap: balance;   /* 2行の長さをそろえ、1字だけの行を作らない */
  word-break: keep-all; overflow-wrap: anywhere;   /* 折るのは <wbr> の所だけ（2026-10-15） */
}
.lm-say::before {
  content: ""; position: absolute; left: -7px; top: calc(50% - 6px); width: 12px; height: 12px;
  background: inherit; border: inherit; border-width: 0 0 1px 1px; transform: rotate(45deg);
}
.on-dark .lm .lm-say { background: var(--c-paper); border-color: transparent; }
/* 絵が右の組（2026-10-15）。HTML の並びは左と同じ。右に置くのは think・night・happy だけ */
.lm--r { flex-direction: row-reverse; }
.lm--r .lm-say::before { left: auto; right: -7px; border-width: 1px 1px 0 0; }
@media (min-width: 768px) { .lm { --lm-size: 112px; } }
/* 吹き出しの字だけの字体（2026-10-15。Yusei Magic・SIL OFL 1.1。fonts/OFL-yuseimagic.txt）。preload しない */
@font-face { font-family: "LmYusei"; src: url("../fonts/lm-yusei-sub.woff2") format("woff2"); font-weight: 400; font-display: swap; }