/* ===== LP共通(/hojokin・/system)。色・文字はコーポレートサイト(style.css)の変数を使う ===== */
.lp { background: #fff; }
.lp-inner { width: min(1040px, 100% - 32px); margin-inline: auto; }
.lp-inner--narrow { width: min(720px, 100% - 32px); }

/* ボタン */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 44px; border-radius: 999px;
  font-size: 16px; font-weight: 700; color: #fff;
  background: var(--grad-dark);
  box-shadow: 0 12px 24px rgba(16, 37, 65, .2);
  transition: transform .2s, box-shadow .2s;
}
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(16, 37, 65, .26); }
.lp-btn--sm { padding: 10px 22px; font-size: 14px; box-shadow: none; }

/* ヘッダー */
.lp-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 32px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.lp-header__brand img { width: 140px; }

/* メインビジュアル: 左に文章、右に写真+小さなカード */
.lp-hero { padding: 72px 0 96px; background: linear-gradient(180deg, #f2f8f9 0%, #fff 100%); }
.lp-hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; }
.lp-hero__label {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--c-brand); background: #fff;
  border: 1px solid rgba(29, 122, 147, .3);
}
.lp-hero__catch { margin-top: 22px; font-size: clamp(32px, 3.7vw, 52px); white-space: nowrap; font-weight: 900; line-height: 1.35; letter-spacing: .03em; color: var(--c-ink); }
.lp-hero__sub { margin-top: 22px; font-size: 16px; line-height: 2; }
.lp-hero__points { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 22px 0 32px; font-size: 14px; font-weight: 700; color: var(--c-ink); }
.lp-hero__points span::before { content: "●"; margin-right: 6px; font-size: 9px; vertical-align: 2px; color: var(--c-brand-2); }
.lp-hero__photo { position: relative; margin: 0; }
.lp-hero__photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 60px rgba(16, 37, 65, .18); }
.lp-hero__card {
  position: absolute; left: -32px; bottom: -28px;
  display: grid; gap: 4px; padding: 18px 24px; border-radius: 12px; background: #fff;
  border-left: 4px solid var(--c-brand);
  box-shadow: 0 18px 36px rgba(16, 37, 65, .16);
}
.lp-hero__card b { font-size: 16px; color: var(--c-ink); }
.lp-hero__card span { font-size: 12px; color: var(--c-mute); }

/* セクション共通 */
.lp-sec { padding: 96px 0; }
.lp-sec--soft { background: #f4f8f9; }
.lp-title { margin-bottom: 48px; text-align: center; font-size: clamp(24px, 3vw, 32px); font-weight: 900; color: var(--c-ink); }
.lp-title span { display: block; margin-bottom: 8px; font-family: var(--f-en); font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--c-brand); }
.lp-note { margin-top: 32px; font-size: 13px; line-height: 1.9; color: var(--c-mute); }
.lp-note a { color: var(--c-brand); font-weight: 700; text-decoration: underline; }

/* お悩み: 線で区切った2列の一覧 */
.lp-worries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; max-width: 920px; margin: 0 auto; border-top: 1px solid var(--c-line); }
.lp-worries li { position: relative; padding: 22px 0 22px 34px; border-bottom: 1px solid var(--c-line); font-weight: 700; color: var(--c-ink); }
.lp-worries li::before {
  content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: 18px; font-weight: 700; color: var(--c-brand);
}

/* 写真の帯 */
.lp-band {
  padding: 110px 0; text-align: center;
  background: linear-gradient(rgba(16, 37, 65, .78), rgba(16, 37, 65, .78)), url("/img/office.jpg") center / cover;
}
.lp-band__text { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.9; color: #fff; }

/* 支援内容: 文章と写真・図が左右交互に並ぶ */
.lp-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.lp-row + .lp-row { margin-top: 96px; }
.lp-row--rev .lp-row__text { order: 2; }
.lp-row__label { display: inline-block; padding-bottom: 6px; border-bottom: 2px solid var(--c-brand-2); font-size: 14px; font-weight: 700; color: var(--c-brand); }
.lp-row h3 { margin: 18px 0 16px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; line-height: 1.6; color: var(--c-ink); }
.lp-row__photo { margin: 0; }
.lp-row__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 48px rgba(16, 37, 65, .14); }

/* 補助金ごとの用途 */
.lp-subsidies { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden; background: var(--c-line); gap: 1px; box-shadow: 0 20px 40px rgba(16, 37, 65, .10); }
.lp-subsidies div { padding: 20px 22px; background: #fff; }
.lp-subsidies dt { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.lp-subsidies dd { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--c-text); }

/* 採択後の手続きの図 */
.lp-timeline { position: relative; padding: 32px 32px 32px 64px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px rgba(16, 37, 65, .10); }
.lp-timeline::before { content: ""; position: absolute; left: 41px; top: 44px; bottom: 44px; width: 2px; background: linear-gradient(var(--c-brand-2), var(--c-brand-3)); }
.lp-timeline li { position: relative; display: grid; gap: 2px; padding: 10px 0; }
.lp-timeline li::before { content: ""; position: absolute; left: -29px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--c-brand); }
.lp-timeline b { font-size: 15px; color: var(--c-ink); }
.lp-timeline span { font-size: 13px; color: var(--c-mute); }

/* 流れ */
.lp-flow { counter-reset: step; display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.lp-flow li {
  counter-increment: step; display: grid; grid-template-columns: 56px 180px 1fr; align-items: center; gap: 16px;
  padding: 20px 24px; border-radius: 12px; background: #fff;
}
.lp-flow li::before {
  content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--f-en); font-weight: 600; color: #fff; background: var(--c-brand);
}
.lp-flow b { font-size: 17px; color: var(--c-ink); }
.lp-flow span { font-size: 14px; }

/* 料金 */
.lp-price { max-width: 720px; margin: 0 auto; padding: 48px 40px; border-radius: 16px; text-align: center; background: #fff; box-shadow: 0 24px 48px rgba(16, 37, 65, .12); }
.lp-price__main { margin-bottom: 16px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 900; color: var(--c-ink); }
.lp-price .lp-btn { margin-top: 28px; }

/* よくある質問 */
.lp-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.lp-faq details { border-radius: 12px; background: #fff; }
.lp-faq summary { position: relative; padding: 20px 56px 20px 24px; font-weight: 700; color: var(--c-ink); cursor: pointer; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--c-brand); }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { padding: 0 24px 22px; font-size: 14px; }

/* 運営会社 */
.lp-company { background: #f4f8f9; }
.lp-company__box { padding: 40px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px rgba(16, 37, 65, .08); }
.lp-company__box img { width: 180px; margin-bottom: 20px; }
.lp-company__box dl { margin: 0; border-top: 1px solid var(--c-line); }
.lp-company__box dl div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.lp-company__box dt { font-weight: 700; color: var(--c-ink); }
.lp-company__box dd { margin: 0; }
.lp-company__link { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--c-brand); }

/* フォーム */
.lp-form-sec { background: linear-gradient(180deg, #fff 0%, #eef6f7 100%); }
.lp-form-lead { margin: -24px 0 40px; text-align: center; }
.lp .form__submit { width: 100%; border: 0; cursor: pointer; font: inherit; font-size: 17px; font-weight: 700; }

/* フッター */
.lp-footer { padding: 40px 16px; text-align: center; font-size: 13px; color: #c9d4de; background: var(--c-brand-3); }
.lp-footer a { color: #fff; text-decoration: underline; }
.lp-footer p + p { margin-top: 8px; }
.lp-footer__copy { font-family: var(--f-en); font-size: 12px; color: #8ea0b3; }

/* スマホ */
@media (max-width: 860px) {
  .lp-header { height: 58px; padding: 0 16px; }
  .lp-header__brand img { width: 110px; }
  .lp-btn--sm { padding: 8px 14px; font-size: 12px; }
  .lp-hero { padding: 40px 0 72px; }
  .lp-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .lp-hero__label { font-size: 12px; padding: 6px 12px; }
  .lp-hero__card { left: 12px; bottom: -24px; padding: 14px 18px; }
  .lp-sec { padding: 72px 0; }
  .lp-worries { grid-template-columns: 1fr; }
  .lp-band { padding: 72px 0; }
  .lp-band__text { font-size: 16px; }
  .lp-row { grid-template-columns: 1fr; gap: 28px; }
  .lp-row + .lp-row { margin-top: 64px; }
  .lp-row--rev .lp-row__text { order: 0; }
  .lp-subsidies { grid-template-columns: 1fr; }
  .lp-timeline { padding: 24px 20px 24px 52px; }
  .lp-timeline::before { left: 29px; }
  .lp-flow li { grid-template-columns: 40px 1fr; }
  .lp-flow span { grid-column: 2; }
  .lp-price { padding: 36px 20px; }
  .lp-company__box { padding: 28px 20px; }
  .lp-company__box dl div { grid-template-columns: 1fr; gap: 2px; }
  .lp-btn { width: 100%; }
  .lp-btn--sm { width: auto; }
}