/* =========================================================
   製品ページの型 lp.css（2026-09-27 方針：組み立ては製品型、見た目はコーポレート）
   使うページ：/db-reflector/ ・ /services/access-excel/ ・ /products/minutes-core/
   見た目の基準はコーポレート（welzo型）：
     内容幅1106（ni__body と同じ）／大きな枠は左右 var(--edge)・角丸45／カード角丸20・細い線
     英字ラベル Poppins 600 15.75px／見出し 紺 700 字間.04em／ボタンは丸いピル型
   組み立ての基準は Minutes 製品サイト：最初の画面にボタン→課題→仕組み→機能→料金→流れ→FAQ→申込
   ========================================================= */
.lp { color: var(--ink); }
.lp-wrap { width: min(1106px, calc(100% - 48px)); margin: 0 auto; }
.lp-sec { padding: clamp(72px, 8.3vw, 120px) 0; }

/* 薄い水色・紺の区画は、TOPや採用と同じ「左右に余白のある角丸パネル」 */
.lp-sec--soft, .lp-sec--navy { margin: 0 var(--edge); border-radius: clamp(20px, 3.125vw, 45px); }
.lp-sec--soft { background: var(--pale); }
.lp-sec--navy { background: var(--navy); color: #fff; }

/* 見出し */
.lp-eyebrow { margin: 0; font-family: var(--en); font-weight: 600; font-size: 15.75px; letter-spacing: .12em; color: var(--primary); }
.lp-sec--navy .lp-eyebrow { color: var(--brand-sky); }
.lp-h2 { margin: 10px 0 0; font-size: clamp(28px, 2.97vw, 43px); font-weight: 700; line-height: 1.45; letter-spacing: .04em; color: var(--navy); word-break: auto-phrase; text-wrap: pretty; }
.lp-sec--navy .lp-h2 { color: #fff; }
.lp-lead { margin: 18px 0 0; max-width: 780px; font-size: clamp(15px, 1.17vw, 17px); line-height: 2; letter-spacing: .04em; color: var(--ink); }
.lp-sec--navy .lp-lead { color: rgba(255, 255, 255, .86); }
.lp-head { margin-bottom: clamp(36px, 4vw, 56px); }
.lp-head--center { text-align: center; }
.lp-head--center .lp-lead { margin-left: auto; margin-right: auto; }

/* ボタン（コーポレートのピル型） */
.lp-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 210px; height: 60px; padding: 0 30px; border: 1.5px solid var(--primary); border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-decoration: none; transition: background .3s, border-color .3s, color .3s; }
.lp-btn::after { content: "→"; transition: transform .3s var(--ease-out); }
.lp-btn:hover { background: var(--navy); border-color: var(--navy); }
.lp-btn:hover::after { transform: translateX(4px); }
.lp-btn--outline { background: #fff; color: var(--navy); border-color: rgba(10, 42, 74, .3); }
.lp-btn--outline:hover { background: var(--pale); color: var(--navy); border-color: var(--navy); }
.lp-btn--white { background: #fff; color: var(--navy); border-color: #fff; }
.lp-btn--white:hover { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.lp-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.lp-btn--ghost:hover { background: #fff; color: var(--navy); }

/* 1. 最初の画面：左に見出し・ボタン、右に製品画面や写真 */
.lp-hero { padding: clamp(28px, 3vw, 44px) 0 clamp(64px, 7vw, 100px); }
.lp-hero .bc { margin-bottom: clamp(28px, 3.5vw, 48px); }
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.lp-hero__logo { display: block; width: 210px; height: auto; margin-bottom: 18px; }
.lp-hero__title { margin: 12px 0 0; font-size: clamp(26px, 2.75vw, 40px); font-weight: 700; line-height: 1.4; letter-spacing: .04em; color: var(--navy); word-break: auto-phrase; }
.lp-hero__lead { margin: 22px 0 30px; font-size: clamp(15px, 1.17vw, 17px); line-height: 2; letter-spacing: .04em; color: var(--ink); }
.lp-hero__checks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; }
.lp-hero__checks li { position: relative; padding-left: 24px; font-size: 14px; font-weight: 700; color: var(--navy); }
.lp-hero__checks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 8px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.lp-hero__visual { border-radius: clamp(20px, 3.125vw, 45px); overflow: hidden; aspect-ratio: 16 / 11; }
.lp-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.lp-screen { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(10, 42, 74, .12); box-shadow: 0 30px 60px rgba(10, 42, 74, .12); }
.lp-screen__bar { display: flex; gap: 6px; padding: 11px 16px; background: var(--pale); border-bottom: 1px solid rgba(10, 42, 74, .08); }
.lp-screen__bar span { width: 10px; height: 10px; border-radius: 50%; background: #c8d4e0; }
.lp-screen img { display: block; width: 100%; height: auto; }
.lp-screen__notes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 14px 16px 16px; gap: 10px; border-top: 1px solid rgba(10, 42, 74, .08); font-size: 12.5px; line-height: 1.6; color: var(--text); }
.lp-screen__notes b { display: block; color: var(--navy); font-size: 13px; }

/* 2. 課題カード（写真付き3列） */
.lp-issues { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.lp-issue { background: #fff; border-radius: 20px; overflow: hidden; }
.lp-issue__img { aspect-ratio: 3 / 2; overflow: hidden; }
.lp-issue__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.lp-issue:hover .lp-issue__img img { transform: scale(1.05); }
.lp-issue__body { padding: 24px 26px 28px; }
.lp-issue__tag { font-family: var(--en); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.lp-issue h3 { margin: 6px 0 10px; font-size: 19px; line-height: 1.55; color: var(--navy); }
.lp-issue p, .lp-issue ul { margin: 0; font-size: 15px; line-height: 1.85; color: var(--ink); }
.lp-issue ul { padding-left: 1.2em; }

/* 3. 仕組みの図 */
.lp-flowmap { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: stretch; gap: 16px; }
.lp-node { padding: 28px 26px; border-radius: 20px; background: #fff; border: 1px solid rgba(10, 42, 74, .12); }
.lp-node__en { font-family: var(--en); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--primary); }
.lp-node h3 { margin: 6px 0 12px; font-size: 19px; color: var(--navy); }
.lp-node ul { margin: 0; padding-left: 1.1em; font-size: 14.5px; line-height: 1.95; color: var(--ink); }
.lp-node--core { background: var(--navy); border-color: var(--navy); color: #fff; }
.lp-node--core h3 { color: #fff; }
.lp-node--core ul { color: rgba(255, 255, 255, .88); }
.lp-node--core .lp-node__en { color: var(--brand-sky); }
.lp-arrow { display: grid; place-items: center; font-size: 26px; color: var(--primary); }

/* 4. 要点（紺のパネルの中・4列） */
.lp-points { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.lp-points li { padding: 28px 26px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); }
.lp-points__no { font-family: var(--en); font-weight: 600; font-size: 28px; line-height: 1; color: var(--brand-sky); }
.lp-points b { display: block; margin: 14px 0 8px; font-size: 19px; }
.lp-points p { margin: 0; font-size: 14.5px; line-height: 1.85; color: rgba(255, 255, 255, .85); }

/* 5. カード（3列。機能・サービス・オプション） */
.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-card { padding: 28px 30px; border-radius: 20px; background: #fff; border: 1px solid rgba(10, 42, 74, .12); }
.lp-sec--soft .lp-card { border-color: transparent; }
.lp-card__no { font-family: var(--en); font-weight: 600; font-size: 13px; letter-spacing: .12em; color: var(--accent); }
.lp-card h3 { margin: 6px 0 10px; font-size: 20px; line-height: 1.5; color: var(--navy); word-break: auto-phrase; }
.lp-card p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--ink); }
.lp-card__more { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--primary); }
.lp-card--link { display: block; overflow: hidden; color: inherit; text-decoration: none; transition: border-color .3s; }
.lp-card--link:hover { border-color: var(--primary); }
.lp-card--link .lp-card__img { margin: -28px -30px 20px; aspect-ratio: 16 / 9; overflow: hidden; }
.lp-card--link .lp-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.lp-card--link:hover .lp-card__img img { transform: scale(1.05); }
.lp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.lp-tags li { padding: 4px 12px; border-radius: 999px; background: var(--pale); font-size: 12.5px; font-weight: 700; color: var(--navy); }
.lp-sec--soft .lp-tags li { background: #fff; }

/* 6. 詳しい説明（2列の行。機能の詳細など） */
.lp-details { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(10, 42, 74, .12); }
.lp-details > li { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px 48px; padding: 32px 0; border-bottom: 1px solid rgba(10, 42, 74, .12); scroll-margin-top: calc(var(--hd-h) + 20px); }
.lp-details__no { display: block; font-family: var(--en); font-weight: 600; font-size: 13px; letter-spacing: .12em; color: var(--accent); }
.lp-details h3 { margin: 4px 0 0; font-size: 22px; color: var(--navy); }
.lp-details p { margin: 0; font-size: 16px; line-height: 1.95; color: var(--ink); }

/* 7. 写真＋チェックリスト */
.lp-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.lp-fit__img { border-radius: clamp(20px, 3.125vw, 45px); overflow: hidden; aspect-ratio: 4 / 3; }
.lp-fit__img img { width: 100%; height: 100%; object-fit: cover; }
.lp-checks { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid rgba(10, 42, 74, .12); }
.lp-checks li { position: relative; padding: 16px 0 16px 36px; border-bottom: 1px solid rgba(10, 42, 74, .12); font-weight: 700; color: var(--navy); line-height: 1.7; }
.lp-checks li::before { content: ""; position: absolute; left: 4px; top: 1.35em; width: 14px; height: 8px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.lp-checks li small { display: block; font-weight: 400; font-size: 14.5px; color: var(--ink); }

/* 8. チップ（対応DB・連携先など） */
.lp-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; }
.lp-chips li { padding: 14px 26px; border-radius: 999px; background: #fff; border: 1px solid rgba(10, 42, 74, .12); font-weight: 700; color: var(--navy); }

/* 9. 料金カード */
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.lp-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-plan { position: relative; display: flex; flex-direction: column; padding: 34px 30px; border-radius: 20px; background: #fff; border: 1px solid rgba(10, 42, 74, .12); }
.lp-plan--pick { border: 2px solid var(--primary); }
.lp-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.lp-plan__name { font-family: var(--en); font-size: 15.75px; font-weight: 600; letter-spacing: .12em; color: var(--primary); }
.lp-plan__price { margin: 10px 0 4px; line-height: 1.3; font-family: var(--en); font-size: clamp(30px, 2.8vw, 40px); font-weight: 600; color: var(--navy); }
.lp-plan__price small { display: inline-block; white-space: nowrap; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--muted); }
.lp-plan__desc { margin: 0 0 18px; font-size: 14.5px; color: var(--ink); }
.lp-plan ul { flex: 1; margin: 0 0 26px; padding: 18px 0 0 1.2em; border-top: 1px solid rgba(10, 42, 74, .1); font-size: 14.5px; line-height: 1.95; color: var(--ink); }
.lp-plan .lp-btn { width: 100%; min-width: 0; }
.lp-note { margin: 22px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--muted); }

/* 10. 流れ（4〜7段階。コーポレートの .flow と同じ見た目） */
.lp-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.lp-steps li { counter-increment: s; padding: 26px 22px; border-radius: 20px; background: #fff; }
.lp-sec:not(.lp-sec--soft) .lp-steps li { background: var(--pale); }
.lp-steps li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--en); font-weight: 600; font-size: 28px; line-height: 1; color: var(--primary); }
.lp-steps b { display: block; margin-bottom: 6px; font-size: 17px; color: var(--navy); }
.lp-steps p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink); }

/* 11. サポート（4列・項目リスト付き） */
.lp-support { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-support > div { padding: 28px 24px; border-radius: 20px; background: #fff; }
.lp-support h3 { margin: 6px 0 10px; font-size: 18px; color: var(--navy); }
.lp-support p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.85; color: var(--ink); }
.lp-support ul { margin: 0; padding: 14px 0 0 1.1em; border-top: 1px solid rgba(10, 42, 74, .1); font-size: 13.5px; line-height: 1.9; color: var(--ink); }
.lp-price-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; padding: 28px 34px; border-radius: 20px; background: #fff; border: 2px solid var(--primary); }
.lp-price-box b { font-size: 17px; color: var(--navy); }
.lp-price-box strong { font-family: var(--en); font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; color: var(--navy); }
.lp-price-box small { display: block; font-size: 13.5px; color: var(--muted); }

/* 12. 事例（page.css の .case-card を利用） */
.lp .case-list { display: grid; gap: 20px; }

/* 13. FAQ・関連 */
.lp .faq-list { max-width: 900px; margin: 0 auto; }
.lp .link-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 56px; }
.lp .cl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 14. 最後の申込・相談（紺の角丸パネル） */
.lp-cta { margin: clamp(56px, 6vw, 96px) var(--edge) clamp(56px, 6vw, 96px); padding: clamp(48px, 5.5vw, 80px) 0; border-radius: clamp(20px, 3.125vw, 45px); background: var(--navy); color: #fff; }
.lp-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.lp-cta .lp-eyebrow { color: var(--brand-sky); }
.lp-cta h2 { margin: 10px 0 0; color: #fff; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.5; letter-spacing: .04em; word-break: auto-phrase; }
.lp-cta p { margin: 12px 0 0; color: rgba(255, 255, 255, .85); line-height: 1.9; }

@media (max-width: 1000px) {
  .lp-hero__grid, .lp-fit { grid-template-columns: 1fr; gap: 32px; }
  .lp-flowmap { grid-template-columns: 1fr; }
  .lp-arrow { transform: rotate(90deg); }
  .lp-points, .lp-support, .lp-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cards, .lp-plans, .lp-issues, .lp .link-cards, .lp .cl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-details > li { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lp-sec--soft, .lp-sec--navy, .lp-cta { margin-left: 12px; margin-right: 12px; }
  .lp-points, .lp-support, .lp-cards, .lp-cards--2, .lp-plans, .lp-plans--4, .lp-issues, .lp .link-cards, .lp .cl-list, .lp-screen__notes { grid-template-columns: 1fr; }
  .lp-plans { gap: 30px; }
  .lp-btn { width: 100%; }
}

/* 角丸パネルが続くときは間をあける */
.lp-sec--soft + .lp-sec--soft, .lp-sec--soft + .lp-sec--navy, .lp-sec--navy + .lp-sec--soft, .lp-sec--navy + .lp-sec--navy { margin-top: clamp(20px, 2.5vw, 36px); }

/* イラストは切り取らずに全体を見せる */
.lp-hero__visual--illust { aspect-ratio: auto; background: #fff; }
.lp-hero__visual--illust img { height: auto; object-fit: contain; }
/* イラストは切り取らない */
.lp-fit__img--illust { aspect-ratio: auto; background: #fff; }
.lp-fit__img--illust img { height: auto; object-fit: contain; }

/* 紺の区画の中の見出し・カード見出しは白（共通の「見出しは紺」を上書き） */
.lp-sec--navy h2, .lp-sec--navy h3, .lp-cta h2 { color: #fff; }