@charset "UTF-8";

/* ===================================================
   Excel版LP（3つの版をまとめたページ）専用スタイル
   ・子テーマのフォルダに「dplus-excel-lp.css」という名前で置く（page-excel-lp.php が自動で読み込む）
   ・部品の名前は「xl-」で始まるものだけ（ほかのページに影響しない）
=================================================== */

.xl-root {
  --xl-green: #173d2d;
  --xl-green-2: #0f2b20;
  --xl-green-btn: #1d6b4b;
  --xl-gold: #b8913f;
  --xl-gold-2: #e9cf8f;
  --xl-navy: #152b40;
  --xl-sky: #3b82c4;
  --xl-ink: #1b1f1c;
  --xl-text: #2b302d;
  --xl-muted: #636b66;
  --xl-line: #e4ded2;
  --xl-cream: #f5f1e9;
  --xl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --xl-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;

  width: 100%;
  background: #ffffff;
  color: var(--xl-text);
  font-family: var(--xl-sans);
  font-size: 16px;
  line-height: 1.85;
  overflow-x: hidden;
}
@supports (overflow-x: clip) { .xl-root { overflow-x: clip; } }
.xl-root *, .xl-root *::before, .xl-root *::after { box-sizing: border-box; }
.xl-root img { max-width: 100%; height: auto; display: block; }
.xl-root section[id] { scroll-margin-top: 72px; }
.xl-root h1, .xl-root h2, .xl-root h3 { border: 0 !important; background: none !important; padding: 0 !important; margin: 0; color: inherit; }
.xl-root h1::before, .xl-root h1::after, .xl-root h2::before, .xl-root h2::after, .xl-root h3::before, .xl-root h3::after { content: none !important; display: none !important; }
.xl-root ul, .xl-root ol { list-style: none; margin: 0; padding: 0; }
.xl-root p { margin: 0; }
.xl-root a { text-decoration: none; }
.xl-root dl, .xl-root dd { margin: 0; }
.xl-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; }
.xl-pc { display: inline; }
.xl-sp { display: none; }
.xl-ok { flex-shrink: 0; color: var(--xl-green-btn); }
.xl-ng { flex-shrink: 0; color: #b9b3a8; }

/* 見出し */
.xl-section { padding: 110px 0; }
.xl-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 56px; }
.xl-eyebrow { font-family: var(--xl-serif); font-size: 13px; letter-spacing: 0.32em; color: var(--xl-gold); padding-left: 0.32em; }
.xl-eyebrow.is-gold { color: var(--xl-gold-2); }
.xl-eyebrow.is-sky { color: #9cc7ee; }
.xl-root .xl-title { font-family: var(--xl-serif); font-size: 34px; line-height: 1.5; font-weight: 700; letter-spacing: 0.04em; color: var(--xl-ink); }
.xl-root .xl-title.is-light { color: #ffffff; }
.xl-sub { max-width: 720px; font-size: 16px; line-height: 1.9; color: var(--xl-muted); }
.xl-sub.is-light { color: #c9d2cd; }
.xl-sub b { color: var(--xl-ink); }
.xl-note { margin-top: 28px !important; font-size: 13.5px; line-height: 1.8; color: var(--xl-muted); text-align: center; }
.xl-note a { color: var(--xl-green-btn); text-decoration: underline; }

/* ボタン */
.xl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border-radius: 4px; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.xl-btn:hover { transform: translateY(-2px); }
.xl-btn--lg { min-height: 58px; padding: 0 36px; font-size: 16px; }
.xl-btn--block { width: 100%; }
.xl-root .xl-btn--green { background: var(--xl-green); color: #f6efdc; box-shadow: 0 12px 28px rgba(23, 61, 45, 0.28), inset 0 0 0 1px rgba(233, 207, 143, 0.35); }
.xl-root .xl-btn--green:hover { background: var(--xl-green-2); color: #f6efdc; }
.xl-root .xl-btn--gold { background: linear-gradient(120deg, #9b7533, #e1c27a 45%, #b8913f); color: #1a1408; box-shadow: 0 12px 28px rgba(155, 117, 51, 0.32); }
.xl-root .xl-btn--gold:hover { color: #1a1408; }
.xl-root .xl-btn--sky { background: #ffffff; color: var(--xl-navy); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); }
.xl-root .xl-btn--sky:hover { color: var(--xl-navy); }
.xl-root .xl-btn--line { background: transparent; color: var(--xl-green); box-shadow: inset 0 0 0 1.5px var(--xl-green); }
.xl-root .xl-btn--line:hover { color: var(--xl-green); background: rgba(23, 61, 45, 0.05); }

/* ---------- ① ヒーロー ---------- */
.xl-hero { position: relative; padding: 90px 0 0; text-align: center; background:
  radial-gradient(ellipse 70% 60% at 50% 70%, #f7f3ec 0%, rgba(247, 243, 236, 0) 70%),
  linear-gradient(180deg, #f3eee5 0%, #e9e3d8 70%, #ddd5c7 100%); }
.xl-hero__kick { display: inline-flex; align-items: center; gap: 12px; font-family: var(--xl-serif); font-size: 17px; letter-spacing: 0.12em; color: #3a3329; }
.xl-hero__kick span { flex-shrink: 0; display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--xl-green); color: var(--xl-gold-2); font-size: 17px; letter-spacing: 0; }
.xl-root .xl-hero__title { margin-top: 22px; font-family: var(--xl-serif); font-size: 52px; line-height: 1.3; font-weight: 700; letter-spacing: 0.06em; color: var(--xl-ink); }
.xl-hero__title small { display: block; margin-top: 10px; font-size: 22px; letter-spacing: 0.4em; color: var(--xl-gold); padding-left: 0.4em; }
.xl-hero__lead { max-width: 720px; margin: 26px auto 0 !important; font-size: 16.5px; line-height: 2; color: #4a4f4b; }
.xl-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px !important; }
.xl-hero__chips li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--xl-ink); }
.xl-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.xl-hero__visual { max-width: 1200px; margin: 30px auto 0; padding: 0 12px; }
.xl-hero__visual img { width: 100%; }

/* ---------- ② 導入先 ---------- */
.xl-users { background: var(--xl-green); color: #e8dfc9; padding: 26px 0; }
.xl-users .xl-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.xl-users__label { font-family: var(--xl-serif); font-size: 14px; letter-spacing: 0.14em; color: var(--xl-gold-2); }
.xl-users__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.xl-users__list li { font-size: 14px; font-weight: 700; padding: 4px 14px; border: 1px solid rgba(233, 207, 143, 0.4); border-radius: 999px; }

/* ---------- ③ 3つの版 ---------- */
.xl-plans { background: #ffffff; }
.xl-plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.xl-plan { position: relative; display: flex; flex-direction: column; padding: 38px 30px 30px; background: #fffdf9; border: 1px solid var(--xl-line); border-top: 4px solid var(--xl-green); }
.xl-plan--pro { background: #1a1a1a; border-color: #3b3324; border-top-color: var(--xl-gold); color: #e7e2d6; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18); }
.xl-plan--info { border-top-color: var(--xl-navy); }
.xl-plan__badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: linear-gradient(120deg, #9b7533, #e1c27a 45%, #b8913f); color: #1a1408; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; padding: 4px 18px; white-space: nowrap; }
.xl-plan__en { font-family: var(--xl-serif); font-size: 12px; letter-spacing: 0.28em; color: var(--xl-gold); }
.xl-root .xl-plan__name { margin-top: 6px; font-family: var(--xl-serif); font-size: 26px; font-weight: 700; letter-spacing: 0.04em; color: var(--xl-ink); }
.xl-root .xl-plan--pro .xl-plan__name { color: var(--xl-gold-2); }
.xl-plan__desc { margin-top: 10px !important; font-size: 14px; line-height: 1.75; color: var(--xl-muted); min-height: 3.5em; }
.xl-plan--pro .xl-plan__desc { color: #b9b2a3; }
.xl-plan__price { margin-top: 18px !important; padding-bottom: 20px; border-bottom: 1px solid var(--xl-line); font-size: 16px; color: var(--xl-ink); }
.xl-plan--pro .xl-plan__price { color: #fff; border-color: #3b3324; }
.xl-plan__price b { font-family: var(--xl-serif); font-size: 42px; letter-spacing: 0.02em; margin-right: 2px; }
.xl-plan__price small { display: block; font-size: 12.5px; color: var(--xl-muted); letter-spacing: 0.1em; }
.xl-plan--pro .xl-plan__price small { color: #b9b2a3; }
.xl-plan__list { display: flex; flex-direction: column; gap: 9px; margin: 22px 0 26px !important; flex: 1; }
.xl-plan__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.6; }
.xl-plan__list li .xl-ok, .xl-plan__list li .xl-ng { margin-top: 2px; }
.xl-plan--pro .xl-ok { color: var(--xl-gold-2); }
.xl-plan__list li.is-off { color: #a49d90; }
.xl-plan--pro .xl-plan__list li.is-off { color: #6c665b; }
.xl-plan__more { display: block; margin-top: 14px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--xl-green-btn); text-decoration: underline !important; text-underline-offset: 3px; }
.xl-plan--pro .xl-plan__more { color: var(--xl-gold-2); }

/* ---------- ④ 動画 ---------- */
.xl-movie { background: var(--xl-cream); }
.xl-movie__tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.xl-root .xl-movie__tab { appearance: none; border: 1px solid var(--xl-line); background: #fff; color: var(--xl-text); font: inherit; font-size: 14.5px; font-weight: 700; padding: 10px 22px; border-radius: 999px; cursor: pointer; }
.xl-root .xl-movie__tab.is-active { background: var(--xl-green); border-color: var(--xl-green); color: #f6efdc; }
.xl-movie__frame { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 60px rgba(40, 30, 15, 0.2); }
.xl-movie__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- ⑤ 基本の機能 ---------- */
.xl-feat__item { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding: 48px 0; border-top: 1px solid var(--xl-line); }
.xl-feat__item:first-of-type { border-top: 0; padding-top: 0; }
.xl-feat__item.is-rev .xl-feat__img { order: 2; }
.xl-feat__img { background: #fff; border: 1px solid var(--xl-line); padding: 10px; box-shadow: 0 20px 40px rgba(40, 30, 15, 0.08); }
.xl-feat__num { display: block; font-family: var(--xl-serif); font-size: 40px; line-height: 1; color: var(--xl-gold); letter-spacing: 0.04em; }
.xl-root .xl-feat__title { margin: 14px 0 16px; font-family: var(--xl-serif); font-size: 24px; line-height: 1.55; font-weight: 700; letter-spacing: 0.03em; color: var(--xl-ink); }
.xl-feat__text p { font-size: 15.5px; line-height: 1.95; color: #4a4f4b; }
.xl-feat__points { display: flex; flex-direction: column; gap: 6px; margin-top: 16px !important; }
.xl-feat__points li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--xl-ink); }

/* ---------- ⑥⑦ 版だけの機能 ---------- */
.xl-only--pro { background: radial-gradient(ellipse at 50% 0%, #2a2620 0%, #121212 60%); color: #e7e2d6; }
.xl-only--info { background: radial-gradient(ellipse at 50% 0%, #1f3c58 0%, #10202f 65%); color: #dfe8f1; }
.xl-only__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.xl-only__card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(233, 207, 143, 0.25); padding: 16px 16px 28px; }
.xl-only__img { background: #fff; padding: 6px; }
.xl-root .xl-only__card h3 { margin: 22px 10px 10px; font-family: var(--xl-serif); font-size: 22px; font-weight: 700; color: var(--xl-gold-2); letter-spacing: 0.04em; }
.xl-only__card p { margin: 0 10px !important; font-size: 15px; line-height: 1.9; color: #cfc8b8; }
.xl-only__wide { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.xl-only__pts { display: flex; flex-direction: column; gap: 26px; }
.xl-root .xl-only__pts h3 { font-family: var(--xl-serif); font-size: 21px; font-weight: 700; color: #ffffff; margin-bottom: 8px; letter-spacing: 0.04em; }
.xl-only__pts p { font-size: 15px; line-height: 1.9; color: #c4d3e2; }
.xl-only__pts > div { padding-left: 18px; border-left: 2px solid #9cc7ee; }
.xl-only__cta { margin-top: 48px; text-align: center; }

/* ---------- ⑧ 比較表 ---------- */
.xl-cost { background: var(--xl-cream); }
.xl-table-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--xl-line); }
.xl-root .xl-table { width: 100%; min-width: 600px; border-collapse: collapse; margin: 0; font-size: 15px; border: 0; }
.xl-root .xl-table th, .xl-root .xl-table td { border: 0; border-bottom: 1px solid #efe9de; padding: 18px 16px; text-align: center; vertical-align: middle; line-height: 1.6; background: none; }
.xl-root .xl-table thead th { font-family: var(--xl-serif); font-size: 15px; letter-spacing: 0.06em; color: var(--xl-muted); background: #faf7f1; }
.xl-root .xl-table tbody th { text-align: left; font-weight: 700; color: var(--xl-ink); white-space: nowrap; }
.xl-root .xl-table td { color: var(--xl-muted); }
.xl-root .xl-table .is-hl { background: #f1f6f2; color: var(--xl-green); }
.xl-root .xl-table thead .is-hl { background: var(--xl-green); color: var(--xl-gold-2); }

/* ---------- ⑨ 全機能 ---------- */
.xl-all { background: var(--xl-green-2); background-image: radial-gradient(ellipse at 50% 0%, #1f4a37 0%, rgba(15, 43, 32, 0) 60%); color: #e8e2d3; }
.xl-all__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.xl-all__grid li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(233, 207, 143, 0.14); font-size: 14.5px; line-height: 1.6; }
.xl-all__grid li .xl-ok { color: var(--xl-gold-2); margin-top: 2px; }
.xl-tag { display: inline-block; flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 1px 8px; border-radius: 3px; margin-left: auto; line-height: 1.7; }
.xl-sub .xl-tag { margin: 0 2px; }
.xl-tag--pro { background: linear-gradient(120deg, #9b7533, #e1c27a 45%, #b8913f); color: #1a1408; }
.xl-tag--info { background: #9cc7ee; color: #10202f; }

/* ---------- ⑩ 最後 ---------- */
.xl-final { background: linear-gradient(180deg, #f3eee5 0%, #e9e3d8 100%); }
.xl-final__btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 960px; margin: 0 auto; }
.xl-final__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; background: var(--xl-green); color: #f6efdc; box-shadow: 0 16px 34px rgba(23, 61, 45, 0.22), inset 0 0 0 1px rgba(233, 207, 143, 0.3); transition: transform .2s ease; }
.xl-final__btn:hover { transform: translateY(-3px); color: #f6efdc; }
.xl-final__btn--pro { background: #161616; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(233, 207, 143, 0.55); }
.xl-final__btn--info { background: var(--xl-navy); }
.xl-final__btn span { font-family: var(--xl-serif); font-size: 18px; letter-spacing: 0.06em; color: var(--xl-gold-2); }
.xl-final__btn b { font-family: var(--xl-serif); font-size: 32px; letter-spacing: 0.02em; color: #fff; }
.xl-final__btn b small { font-size: 13px; color: #cfc6b0; margin-left: 2px; }
.xl-final__btn em { font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; }
.xl-final__info { max-width: 760px; margin: 44px auto 0; background: #fffdf9; border: 1px solid var(--xl-line); padding: 26px 32px; }
.xl-final__info dl { display: flex; flex-direction: column; gap: 10px; }
.xl-final__info dl > div { display: grid; grid-template-columns: 7em 1fr; gap: 16px; font-size: 14.5px; line-height: 1.75; }
.xl-final__info dt { font-weight: 700; color: var(--xl-ink); }
.xl-final__info dd { color: #4a4f4b; }
.xl-final__info a { color: var(--xl-green-btn); text-decoration: underline; }
.xl-app { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 22px auto 0; padding: 16px 22px; background: #0d1512; color: #dbe7e1; border-radius: 4px; }
.xl-app img { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.xl-app span { flex: 1; font-size: 14px; line-height: 1.6; }
.xl-app span b { display: block; color: #fff; font-size: 14.5px; }
.xl-app em { font-style: normal; font-size: 13.5px; font-weight: 700; color: #6ee7b7; white-space: nowrap; }
.xl-app:hover { color: #dbe7e1; }

/* ---------- スマホ・タブレット ---------- */
@media (max-width: 960px) {
  .xl-plans__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 36px; }
  .xl-plan__desc { min-height: 0; }
  .xl-feat__item { grid-template-columns: 1fr; gap: 26px; }
  .xl-feat__item.is-rev .xl-feat__img { order: 0; }
  .xl-only__grid, .xl-only__wide { grid-template-columns: 1fr; }
  .xl-all__grid { grid-template-columns: 1fr 1fr; }
  .xl-final__btns { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 600px) {
  .xl-section { padding: 76px 0; }
  .xl-wrap { padding: 0 16px; }
  .xl-pc { display: none; }
  .xl-sp { display: inline; }
  .xl-head { margin-bottom: 38px; }
  .xl-root .xl-title { font-size: 25px; }
  .xl-hero { padding-top: 56px; }
  .xl-root .xl-hero__kick { gap: 8px; font-size: 13.5px !important; line-height: 1.5 !important; letter-spacing: 0.04em; white-space: nowrap; }
  .xl-root .xl-hero__kick span { width: 26px; height: 26px; font-size: 14px !important; }
  .xl-root .xl-hero__title { font-size: 31px; }
  .xl-hero__title small { font-size: 17px; }
  .xl-hero__lead { font-size: 15px; text-align: left; }
  .xl-hero__chips { flex-direction: column; align-items: center; gap: 8px; }
  .xl-hero__actions .xl-btn { width: 100%; }
  .xl-hero__visual { margin-top: 18px; padding: 0; }
  .xl-plan { padding: 34px 20px 24px; }
  .xl-movie__tabs { gap: 6px; }
  .xl-root .xl-movie__tab { padding: 8px 14px; font-size: 13.5px; }
  .xl-root .xl-feat__title { font-size: 20px; }
  .xl-root .xl-feat__title br { display: none; }
  .xl-all__grid { grid-template-columns: 1fr; }
  .xl-only__cta .xl-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.5; padding: 12px 18px; }
  .xl-final__info { padding: 20px 18px; }
  .xl-final__info dl > div { grid-template-columns: 1fr; gap: 2px; }
  .xl-app { flex-wrap: wrap; }
}