/* 業者向けページ（/local/）専用。値の出典：デザイン部長（Codex）Run1 design_spec.md §3・§4・§6（2026-11-14）
   共通のヘッダー・フッターは site.css 等のまま。本文だけを .local-page .lp の中で組む。
   読ませる文字は16px以上（本文18px）。影なし。橙の地に白文字を置かない。 */
.local-page {
  --lp-text: #0B2447;
  --lp-muted: #41546F;
  --lp-soft: #F4F7FC;
  --lp-accent: #FB6223;
  --lp-link: #BF3F0E;
  --lp-border: #CDD6E2;
  --lp-control: #41546F;
  --lp-error: #9B2C24;
  --lp-error-bg: #FFF4F1;
  --lp-gutter: 1.25rem;
  --lp-max: 70rem;
  --lp-read: 45rem;
  --lp-h1: 1.875rem;
  --lp-h2: 1.625rem;
  --lp-h3: 1.25rem;
  --lp-price: 2rem;
  --lp-section: 3rem;
  --lp-radius: 0.25rem;
}
@media (min-width: 761px) { .local-page { --lp-gutter: 2.5rem; } }
@media (min-width: 1100px) {
  .local-page { --lp-gutter: 5rem; --lp-h1: 2.75rem; --lp-h2: 2rem; --lp-h3: 1.375rem; --lp-price: 2.5rem; --lp-section: 4.5rem; }
}
@media (max-width: 359px) { .local-page { --lp-gutter: 1rem; } }

.local-page .lp { background: #FFFFFF; color: var(--lp-text); font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; font-size: 1.125rem; line-height: 1.8; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.local-page .lp *, .local-page .lp *::before, .local-page .lp *::after { box-sizing: border-box; }
.local-page .lp-wrap { width: 100%; max-width: calc(var(--lp-max) + var(--lp-gutter) * 2); margin: 0 auto; padding: 0 var(--lp-gutter); }
.local-page .lp h1, .local-page .lp h2, .local-page .lp h3 { color: var(--lp-text); font-family: inherit; font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; margin: 0; }
.local-page .lp h1 { font-size: var(--lp-h1); max-width: 52.5rem; }
.local-page .lp h2 { font-size: var(--lp-h2); margin-bottom: 1.5rem; }
.local-page .lp h3 { font-size: var(--lp-h3); margin-bottom: 0.5rem; }
.local-page .lp p { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.8; color: var(--lp-text); }
.local-page .lp a { color: var(--lp-link); text-decoration: underline; text-underline-offset: 0.18em; }
.local-page .lp a:focus-visible, .local-page .lp button:focus-visible, .local-page .lp input:focus-visible, .local-page .lp textarea:focus-visible, .local-page .lp summary:focus-visible { outline: 3px solid var(--lp-text); outline-offset: 3px; }
.local-page .lp ul, .local-page .lp ol { margin: 0; padding: 0; }
.local-page .lp-small { font-size: 1rem !important; line-height: 1.75 !important; color: var(--lp-muted) !important; }
.local-page .lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 節（ページ内リンクで飛んだとき、固定ヘッダーに見出しが隠れないように） */
.local-page .lp-intro, .local-page .lp-section { scroll-margin-top: 88px; }
.local-page .lp-section { padding: var(--lp-section) 0; border-top: 1px solid var(--lp-border); }
.local-page .lp-short { padding: 2rem 0; }
.local-page .lp-soft { background: var(--lp-soft); border-top: 0; }

/* 冒頭 */
.local-page .lp-intro { padding: 2rem 0 2.5rem; }
@media (min-width: 1100px) { .local-page .lp-intro { padding: 3.5rem 0 4rem; } }
.local-page .lp-eyebrow { font-size: 1rem !important; font-weight: 700; color: var(--lp-muted) !important; margin-bottom: 1rem !important; }
.local-page .lp-intro h1 { margin-bottom: 1.25rem; }
.local-page .lp-lead { max-width: var(--lp-read); }
.local-page .lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 1.5rem 0 1.25rem; }
.local-page .lp-price-note { max-width: var(--lp-read); }

/* ボタン：橙地に紺文字 */
.local-page .lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0.75rem 1.5rem; background: var(--lp-accent); color: var(--lp-text) !important; font-size: 1.125rem; font-weight: 700; line-height: 1.5; text-decoration: none !important; border: 2px solid var(--lp-accent); border-radius: var(--lp-radius); cursor: pointer; font-family: inherit; text-align: center; transition: border-color 120ms; }
.local-page .lp-btn:hover { border-color: var(--lp-text); }
@media (max-width: 760px) { .local-page .lp-btn { width: 100%; } }
.local-page .lp-sublink { font-size: 1rem; min-height: 3rem; display: inline-flex; align-items: center; }

/* 募集枠 */
.local-page .lp-slot { margin: 0 0 1.25rem; padding: 1.25rem; background: #FFFFFF; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); max-width: 52.5rem; }
.local-page .lp-slot div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 0.5rem 0; }
.local-page .lp-slot div + div { border-top: 1px solid var(--lp-border); }
.local-page .lp-slot dt { font-size: 1rem; font-weight: 700; color: var(--lp-muted); }
.local-page .lp-slot dd { margin: 0; font-size: 1.125rem; }
.local-page .lp-status { max-width: var(--lp-read); }

/* 見出し脇置き（PC） */
@media (min-width: 1100px) { .local-page .lp-split { display: grid; grid-template-columns: 14.5rem 1fr; gap: 3rem; } .local-page .lp-split h2 { margin-bottom: 0; } }
.local-page .lp-lines { list-style: none; max-width: 52.5rem; }
.local-page .lp-lines li { padding: 1rem 0; border-bottom: 1px solid var(--lp-border); font-size: 1.125rem; line-height: 1.8; }
.local-page .lp-lines li:first-child { padding-top: 0; }

/* 手順 */
.local-page .lp-steps { list-style: none; counter-reset: lpstep; max-width: 52.5rem; }
.local-page .lp-steps li { counter-increment: lpstep; position: relative; padding-left: 3rem; margin-bottom: 1.5rem; }
.local-page .lp-steps li::before { content: counter(lpstep); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--lp-text); color: var(--lp-text); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
@media (min-width: 1100px) { .local-page .lp-steps li { padding-left: 4.5rem; margin-bottom: 2rem; } .local-page .lp-steps li::before { width: 3rem; height: 3rem; font-size: 1.25rem; } }
.local-page .lp-steps-compact li { margin-bottom: 1rem; }
.local-page .lp-steps-compact li p { margin: 0; padding-top: 0.15rem; }
.local-page .lp-sample { margin: 2rem 0 0; max-width: 52.5rem; padding: 1.25rem; border: 1px dashed var(--lp-control); border-radius: var(--lp-radius); }
.local-page .lp-sample figcaption { font-size: 1rem; font-weight: 700; color: var(--lp-muted); margin-bottom: 0.5rem; }
.local-page .lp-sample p { margin: 0; }

/* 比較表：狭い画面は行ごとに縦に並べる（文字は縮めない） */
.local-page .lp-table-wrap { max-width: 70rem; }
.local-page .lp-compare { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.75; background: #FFFFFF; }
.local-page .lp-compare th, .local-page .lp-compare td { text-align: left; vertical-align: top; padding: 1rem; border: 1px solid var(--lp-border); font-size: 1rem; }
.local-page .lp-compare thead th { background: var(--lp-soft); font-weight: 700; }
.local-page .lp-compare .lp-ours { background: var(--lp-soft); font-weight: 700; }
@media (max-width: 1099px) {
  .local-page .lp-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .local-page .lp-compare, .local-page .lp-compare tbody, .local-page .lp-compare tr, .local-page .lp-compare th, .local-page .lp-compare td { display: block; width: 100%; }
  .local-page .lp-compare tr { margin-bottom: 1.5rem; border: 1px solid var(--lp-border); }
  .local-page .lp-compare tbody th { background: var(--lp-text); color: #FFFFFF; border: 0; }
  .local-page .lp-compare td { border: 0; border-top: 1px solid var(--lp-border); }
  .local-page .lp-compare td::before { display: block; font-weight: 700; color: var(--lp-muted); font-size: 1rem; }
  .local-page .lp-compare td:nth-of-type(1)::before { content: "一般的な見積もり比較サイト"; }
  .local-page .lp-compare td:nth-of-type(2)::before { content: "自社のホームページと広告"; }
  .local-page .lp-compare td:nth-of-type(3)::before { content: "この掲載枠"; color: var(--lp-text); }
}

/* 料金 */
.local-page .lp-price-grid { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 1100px) { .local-page .lp-price-grid { grid-template-columns: 40.5rem 1fr; gap: 2rem; } }
.local-page .lp-price-main, .local-page .lp-price-side { background: #FFFFFF; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 1.25rem; }
@media (min-width: 1100px) { .local-page .lp-price-main, .local-page .lp-price-side { padding: 2rem; } }
.local-page .lp-price-list { margin: 0; }
.local-page .lp-price-list div { padding: 0.75rem 0; }
.local-page .lp-price-list div + div { border-top: 1px solid var(--lp-border); }
.local-page .lp-price-list dt { font-size: 1rem; font-weight: 700; color: var(--lp-muted); }
.local-page .lp-price-list dd { margin: 0.25rem 0 0; font-size: 1.125rem; }
.local-page .lp-num { display: block; font-size: var(--lp-price); font-weight: 700; line-height: 1.35; }
.local-page .lp-num-sub { font-size: 1.5rem; margin-top: 0.25rem; }
.local-page .lp-terms { margin: 0 0 1.5rem; max-width: 52.5rem; }
.local-page .lp-terms div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--lp-border); }
.local-page .lp-terms dt { font-weight: 700; font-size: 1.125rem; }
.local-page .lp-terms dd { margin: 0; font-size: 1.125rem; }
.local-page .lp-valid { background: #FFFFFF; border-left: 3px solid var(--lp-text); padding: 1.25rem; max-width: 52.5rem; margin-bottom: 1.5rem; }
.local-page .lp-actions-inline { margin: 0; }

/* できること・できないこと */
.local-page .lp-two { display: grid; gap: 1.5rem; }
@media (min-width: 1100px) { .local-page .lp-two { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.local-page .lp-two > div { border-top: 3px solid var(--lp-text); padding-top: 1rem; }
.local-page .lp-note-box { max-width: 52.5rem; padding: 1rem 1.25rem; background: var(--lp-soft); border-radius: var(--lp-radius); font-size: 1rem !important; line-height: 1.75 !important; }

/* よくある質問 */
.local-page .lp-faq { max-width: 52.5rem; border-top: 1px solid var(--lp-border); }
.local-page .lp-faq details { border-bottom: 1px solid var(--lp-border); }
.local-page .lp-faq summary { cursor: pointer; min-height: 4rem; padding: 1rem 0; font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
.local-page .lp-faq details p { padding: 0 0 1.5rem; margin: 0; }

/* フォーム */
.local-page .lp-form-wrap { max-width: calc(45rem + var(--lp-gutter) * 2); }
.local-page .lp-form { background: #FFFFFF; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 1.25rem; }
@media (min-width: 1100px) { .local-page .lp-form { padding: 2rem; } }
.local-page .lp-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.local-page .lp-form .field { margin-bottom: 1.5rem; }
.local-page .lp-form label, .local-page .lp-form legend { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--lp-text); }
.local-page .lp-form .req, .local-page .lp-form .opt { font-size: 1rem; font-weight: 700; margin-left: 0.5rem; color: var(--lp-muted); }
.local-page .lp-form .req { color: var(--lp-error); }
.local-page .lp-form .hint { font-size: 1rem; color: var(--lp-muted); margin: 0 0 0.5rem; }
.local-page .lp-form input[type="text"], .local-page .lp-form input[type="email"], .local-page .lp-form textarea { width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem; font-size: 1.125rem; font-family: inherit; color: var(--lp-text); border: 1px solid var(--lp-control); border-radius: var(--lp-radius); background: #FFFFFF; }
.local-page .lp-form textarea { min-height: 10rem; resize: vertical; }
.local-page .lp-kind { border: 0; padding: 0; margin: 0 0 1.5rem; }
.local-page .lp-kind label { font-weight: 400; font-size: 1.125rem; display: flex; gap: 0.5rem; align-items: center; }
.local-page .lp-form .legal-box { font-size: 1rem; margin: 0 0 1.5rem; }
.local-page .lp-form .legal-box p { font-size: 1rem; line-height: 1.75; color: var(--lp-muted); margin: 0 0 0.5rem; }
.local-page .lp-form .form-error { background: var(--lp-error-bg); color: var(--lp-error); border: 1px solid var(--lp-error); padding: 0.75rem 1rem; border-radius: var(--lp-radius); font-size: 1rem; }
.local-page .lp-form .form-submit { width: 100%; margin-bottom: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .local-page .lp-btn { transition: none; } }
