@charset "utf-8";
/* =====================================================================
   DboxV3 紹介ページ（/services/dbox/）専用のスタイル
   ---------------------------------------------------------------------
   原稿: ホームページ案の Word ファイル（2026-10-24 受領）
   ヘッダー・フッターは site.css のまま。ここは本文だけを受け持つ。
   すべて .lp-dbox の内側に閉じ込め、他のページへ影響させない。

   色は原稿の Word で使われている値をそのまま使う。
     #123E78  見出し・カードの題（濃い紺）
     #153D63  本文のリード文
     #1E2A3A  強めの本文
     #206BD6  強調・帯（青）
     #5B6C82  補足の文字
     #EFF5FD  薄い青の面（キーワード・機能の帯）
     #F7FAFE  カードの面
   ===================================================================== */

.lp-dbox {
  --lp-navy:   #123E78;
  --lp-text:   #153D63;
  --lp-ink:    #1E2A3A;
  --lp-blue:   #206BD6;
  --lp-blue-strong: #1857B3;
  --lp-muted:  #5B6C82;
  --lp-tint:   #EFF5FD;
  --lp-card:   #F7FAFE;
  --lp-line:   #D6E3F5;
  --lp-white:  #FFFFFF;
  --lp-shadow: 0 1px 2px rgba(18,62,120,.06), 0 10px 28px rgba(18,62,120,.08);
  --lp-radius: 14px;

  color: var(--lp-ink);
  background: var(--lp-white);
}

@media (prefers-color-scheme: dark) {
  .lp-dbox {
    --lp-navy:   #CFE2FF;
    --lp-text:   #B9CCE3;
    --lp-ink:    #E6ECF2;
    --lp-blue:   #5CA0F2;
    --lp-blue-strong: #3D86E6;
    --lp-muted:  #9FB1C6;
    --lp-tint:   #15253A;
    --lp-card:   #172434;
    --lp-line:   #2A3D55;
    --lp-white:  #0F151B;
    --lp-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.35);
  }
}

.lp-dbox h1, .lp-dbox h2, .lp-dbox h3 { color: var(--lp-navy); letter-spacing: .01em; }
.lp-dbox p { margin: 0; }

/* ---------- ボタン ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 10px;
  font-size: 15.5px; font-weight: 700; line-height: 1.4;
  text-decoration: none; border: 1.5px solid transparent;
  transition: background-color .15s, color .15s, transform .15s;
}
.lp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.lp-btn-primary { background: #206BD6; color: #fff; }
.lp-btn-primary:hover { background: #1857B3; color: #fff; }
.lp-btn-light { background: rgba(255,255,255,.96); color: #123E78; border-color: rgba(255,255,255,.96); }
.lp-btn-light:hover { background: #fff; color: #0b2c5a; }
.lp-btn-lg { padding: 16px 40px; font-size: 18px; border-radius: 12px; }
.lp-btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- ヒーロー（原稿の画像をそのまま使う） ---------- */
/* 画像の左端は紺、右端は明るい青。広い画面でも継ぎ目が出ないよう、
   左右で背景色を変えて画像の縁につなげる。 */
.lp-hero {
  position: relative;
  background:
    linear-gradient(90deg, #012658 0%, #012658 50%, transparent 50%),
    linear-gradient(180deg, #0a86e2 0%, #0150b4 50%, #013f8c 100%);
}
.lp-hero-inner { position: relative; max-width: 1600px; margin: 0 auto; }
.lp-hero-inner img { display: block; width: 100%; height: auto; }
.lp-hero-actions {
  position: absolute; right: 3.5%; bottom: 4%;
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
}
@media (max-width: 760px) {
  .lp-hero-actions {
    position: static; justify-content: center;
    padding: 16px 16px 22px; background: #012658;
  }
  .lp-hero-actions .lp-btn { flex: 1 1 200px; }
}

/* ---------- 共通の区切り ---------- */
.lp-sec { padding: 72px 0; }
.lp-sec.lp-tinted { background: linear-gradient(180deg, var(--lp-tint), var(--lp-white)); }
.lp-sec.lp-center { text-align: center; }

.lp-h2 {
  margin: 0 0 14px;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.45; font-weight: 800;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.lp-center .lp-h2 { justify-content: center; }
.lp-lead { color: var(--lp-text); font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.9; max-width: 46em; }
.lp-center .lp-lead { margin-left: auto; margin-right: auto; }

/* 大きめの決め台詞 */
.lp-catch {
  margin-top: 40px !important; text-align: center;
  font-size: clamp(19px, 2.6vw, 27px); font-weight: 800; line-height: 1.6;
  color: var(--lp-blue);
}
.lp-catch.is-navy { color: var(--lp-navy); }
.lp-catch-sub {
  margin-top: 12px !important; text-align: center;
  color: var(--lp-text); font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.9;
}

/* 青い帯 */
.lp-band {
  background: linear-gradient(90deg, #1857B3, #206BD6 50%, #2F7FE6);
  color: #fff; text-align: center;
  padding: 26px 20px;
  font-size: clamp(18px, 2.6vw, 25px); font-weight: 800; letter-spacing: .04em; line-height: 1.5;
}
.lp-band .lp-band-sep { opacity: .75; margin: 0 .6em; font-weight: 400; }

/* ---------- 導入（ヒーロー直下） ---------- */
.lp-intro { padding: 64px 0 56px; text-align: center; }
.lp-intro h1 {
  margin: 0 0 18px;
  font-size: clamp(25px, 3.8vw, 38px); line-height: 1.45; font-weight: 800; color: var(--lp-ink);
}
.lp-intro .lp-lead { margin: 0 auto 6px; }
.lp-pills {
  list-style: none; padding: 0; margin: 34px auto 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  max-width: 920px;
}
.lp-pills li {
  background: var(--lp-tint); color: var(--lp-navy);
  border: 1px solid var(--lp-line); border-radius: 999px;
  padding: 10px 8px; font-weight: 700; font-size: 15px; line-height: 1.4;
}
@media (max-width: 720px) {
  .lp-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-pills li:last-child { grid-column: 1 / -1; }
}
.lp-statement {
  margin-top: 44px !important;
  font-size: clamp(18px, 2.4vw, 22px); font-weight: 800; color: var(--lp-navy); line-height: 1.6;
}
.lp-statement + .lp-catch-sub { margin-top: 8px !important; }

/* ---------- 課題（Excel・メール・紙） ---------- */
.lp-check { width: 30px; height: 30px; color: var(--lp-blue); flex: none; }
.lp-problems {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  margin-top: 36px;
}
@media (max-width: 820px) { .lp-problems { grid-template-columns: 1fr; } }
.lp-problem {
  background: var(--lp-card); border: 1.5px solid var(--lp-line);
  border-radius: 18px; padding: 26px 22px 24px; text-align: center;
  box-shadow: var(--lp-shadow);
}
.lp-problem-icon {
  width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--lp-white); border: 1px solid var(--lp-line); color: var(--lp-blue);
}
.lp-problem-icon svg { width: 30px; height: 30px; }
.lp-problem h3 { margin: 0 0 10px; font-size: 21px; font-weight: 800; }
.lp-problem ul { list-style: none; padding: 0; margin: 0; color: var(--lp-ink); font-size: 15px; line-height: 1.95; }

/* 三つの悩みが DboxV3 へ集まる絵 */
.lp-funnel { margin: 18px auto 0; max-width: 820px; text-align: center; }
.lp-funnel-arrows {
  display: grid; grid-template-columns: repeat(3, 1fr);
  color: var(--lp-blue); opacity: .85;
}
.lp-funnel-arrows svg { width: 26px; height: 34px; margin: 0 auto; display: block; }
@media (max-width: 820px) { .lp-funnel-arrows { grid-template-columns: 1fr; } .lp-funnel-arrows span:not(:first-child) { display: none; } }
.lp-funnel-box {
  margin-top: 6px;
  border: 2px solid var(--lp-navy); border-radius: 14px;
  background: var(--lp-white); color: var(--lp-navy);
  font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; letter-spacing: .06em;
  padding: 12px 20px; box-shadow: var(--lp-shadow);
}

/* ---------- 業務を BOX にする（図） ---------- */
.lp-boxmap {
  margin: 36px auto 0; max-width: 960px;
  border: 1.5px solid var(--lp-line); border-radius: 22px; overflow: hidden;
  background: var(--lp-white); box-shadow: var(--lp-shadow);
}
.lp-boxmap-head {
  background: linear-gradient(90deg, #1857B3, #206BD6);
  color: #fff; text-align: center; font-weight: 800;
  font-size: clamp(20px, 2.6vw, 25px); letter-spacing: .06em; padding: 14px;
}
.lp-boxmap-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  padding: 20px;
}
@media (max-width: 720px) { .lp-boxmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-boxmap-cell {
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 14px;
  padding: 18px 10px; text-align: center;
}
.lp-boxmap-cell svg { width: 30px; height: 30px; color: var(--lp-blue); display: block; margin: 0 auto 8px; }
.lp-boxmap-cell strong { display: block; color: var(--lp-navy); font-size: 17px; }
.lp-boxmap-cell span { display: block; color: var(--lp-muted); font-size: 13px; margin-top: 2px; }
.lp-boxmap-foot {
  background: var(--lp-tint); border-top: 1px solid var(--lp-line);
  padding: 14px 16px; text-align: center;
}
.lp-boxmap-foot ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0;
  color: var(--lp-ink); font-weight: 700; font-size: 15px;
}
.lp-boxmap-foot li + li::before { content: "｜"; color: var(--lp-muted); margin: 0 .55em; font-weight: 400; }

/* ---------- 画面（スクリーンショット） ---------- */
.lp-shots { display: grid; gap: 44px; margin: 40px auto 0; max-width: 920px; }
.lp-shot { margin: 0; }
.lp-tag {
  display: inline-block; margin-bottom: 12px;
  background: var(--lp-navy); color: var(--lp-white);
  border-radius: 999px; padding: 5px 16px; font-size: 14px; font-weight: 700; letter-spacing: .04em;
}
@media (prefers-color-scheme: dark) { .lp-tag { background: #2A5CA6; color: #fff; } }
.lp-shot-frame {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--lp-line); background: #fff;
  box-shadow: 0 2px 4px rgba(18,62,120,.06), 0 18px 40px rgba(18,62,120,.14);
}
.lp-shot-frame::before {
  /* ブラウザの窓らしさを出す上の帯 */
  content: ""; display: block; height: 22px;
  background:
    radial-gradient(circle at 14px 11px, #ff6058 4px, transparent 4.5px),
    radial-gradient(circle at 30px 11px, #ffbd2e 4px, transparent 4.5px),
    radial-gradient(circle at 46px 11px, #28c840 4px, transparent 4.5px),
    #eef2f7;
  border-bottom: 1px solid #dde4ee;
}
.lp-shot-frame img { display: block; width: 100%; height: auto; }

/* ---------- 使い方（01〜03） ---------- */
.lp-ease {
  list-style: none; padding: 0; margin: 36px auto 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 820px) { .lp-ease { grid-template-columns: 1fr; max-width: 560px; } }
.lp-ease li {
  background: var(--lp-card); border: 1.5px solid var(--lp-line); border-radius: 16px;
  padding: 22px 22px 20px; box-shadow: var(--lp-shadow);
}
.lp-ease .lp-num {
  display: block; font-size: 26px; font-weight: 800; line-height: 1; color: var(--lp-blue);
  letter-spacing: .02em; margin-bottom: 10px;
}
.lp-ease strong { display: block; color: var(--lp-navy); font-size: 18px; margin-bottom: 4px; }
.lp-ease span.lp-desc { display: block; color: var(--lp-muted); font-size: 14.5px; line-height: 1.75; }

/* ---------- 基本思想（01〜05） ---------- */
.lp-values {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 920px) { .lp-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-values li {
  background: var(--lp-card); border: 1.5px solid var(--lp-line);
  border-radius: 22px 22px 16px 16px; padding: 20px 12px 18px; text-align: center;
  box-shadow: var(--lp-shadow);
  border-top: 4px solid var(--lp-blue);
}
.lp-values .lp-num { display: block; color: var(--lp-blue); font-weight: 800; font-size: 15px; letter-spacing: .08em; }
.lp-values strong { display: block; color: var(--lp-navy); font-size: 17px; margin: 6px 0 6px; }
.lp-values span.lp-desc { display: block; color: var(--lp-muted); font-size: 13.5px; line-height: 1.7; }

/* ---------- 導入方法 ---------- */
.lp-plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-top: 30px;
}
@media (max-width: 860px) { .lp-plans { grid-template-columns: 1fr; } }
.lp-plan {
  background: var(--lp-card); border: 1.5px solid var(--lp-line); border-radius: 18px;
  padding: 26px 24px; box-shadow: var(--lp-shadow);
  display: flex; flex-direction: column;
}
.lp-plan .lp-num { color: var(--lp-blue); font-weight: 800; font-size: 14px; letter-spacing: .1em; }
.lp-plan h3 { margin: 6px 0 12px; font-size: 21px; font-weight: 800; }
.lp-plan h3 small { color: var(--lp-muted); font-size: 15px; font-weight: 700; white-space: nowrap; }
.lp-plan p { color: var(--lp-text); font-size: 15px; line-height: 1.85; }
.lp-price {
  display: inline-block; margin-top: 14px; align-self: flex-start;
  background: var(--lp-tint); border: 1px solid var(--lp-line); border-radius: 10px;
  padding: 8px 14px; color: var(--lp-navy); font-weight: 700; font-size: 15px;
}
.lp-price b { font-size: 22px; color: var(--lp-blue); margin: 0 2px; }
/* ご利用開始までの目安。カードの下端にそろえる */
.lp-start { margin-top: auto; padding-top: 18px; }
.lp-start-label {
  display: block; border-top: 1px solid var(--lp-line); padding-top: 14px;
  color: var(--lp-blue); font-size: 13px; font-weight: 800; letter-spacing: .06em;
}
.lp-plan .lp-start p { margin: 4px 0 0; color: var(--lp-muted); font-size: 14px; line-height: 1.75; }
.lp-nowrap { white-space: nowrap; }
.lp-final-cta { margin-top: 40px; text-align: center; }

.lp-accent { color: var(--lp-blue); }

/* 日本語の改行位置を整える（対応ブラウザだけで効く。非対応でも崩れない） */
.lp-dbox { word-break: auto-phrase; }
.lp-dbox h1, .lp-dbox h2, .lp-catch, .lp-statement, .lp-band { text-wrap: balance; }
.lp-lead, .lp-catch-sub, .lp-desc, .lp-plan p { text-wrap: pretty; }
/* 狭い画面では区切りの「｜」が行頭に来るので、区切り線をやめて間隔で並べる */
@media (max-width: 720px) {
  .lp-boxmap-foot ul { gap: 6px 16px; }
  .lp-boxmap-foot li + li::before { content: none; }
}