.commandbase-lp {
  --ink: #222222;
  --muted: #5c5c5c;
  --navy: #04384c;
  --navy-deep: #022d3d;
  --green: #1f9c6c;
  --green-action: #137a52;
  --surface: #eef2f4;
  --surface-warm: #f7f7f3;
  --surface-mint: #d9ebe3;
  --surface-blue: #dce8ed;
  --white: #ffffff;
  --line: rgb(4 56 76 / 20%);
  --line-light: rgb(255 255 255 / 24%);
  --container: 1580px;
}

.commandbase-lp * { box-sizing: border-box; }

.commandbase-lp { scroll-behavior: smooth; }

.commandbase-lp {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.commandbase-lp img { display: block; max-width: 100%; }
.commandbase-lp a { color: inherit; }
.commandbase-lp h1, .commandbase-lp h2, .commandbase-lp h3, .commandbase-lp p, .commandbase-lp figure, .commandbase-lp dl, .commandbase-lp dd { margin-top: 0; }
.commandbase-lp h1, .commandbase-lp h2, .commandbase-lp h3 { line-height: 1.35; letter-spacing: -0.035em; text-wrap: pretty; }
.commandbase-lp h2 { margin-bottom: 18px; font-size: clamp(1.7rem, 4vw, 2.65rem); }
.commandbase-lp h3 { margin-bottom: 10px; font-size: 1.2rem; }
.commandbase-lp ol, .commandbase-lp ul { margin: 0; padding: 0; }
.commandbase-lp .keep-word { white-space: nowrap; }

.commandbase-lp .container {
  width: min(calc(100% - 32px), var(--container));
  margin-inline: auto;
}

.commandbase-lp .section { padding: 56px 0; }

.commandbase-lp .section-heading {
  max-width: 1050px;
  margin-bottom: 30px;
}

.commandbase-lp .section-heading > p:last-child {
  max-width: 48em;
  margin-bottom: 0;
  color: var(--muted);
}

.commandbase-lp .section-heading--light h2 { color: var(--white); }
.commandbase-lp .section-heading--light > p:last-child { color: rgb(255 255 255 / 78%); }

.commandbase-lp .eyebrow {
  max-width: 50em;
  margin-bottom: 18px;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.commandbase-lp .number {
  display: block;
  margin-bottom: 18px;
  color: var(--green-action);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.commandbase-lp .button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 15px 22px;
  border: 2px solid currentColor;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.commandbase-lp .button::after { content: "→"; font-size: 1.15rem; }
.commandbase-lp .button--primary { color: var(--white); background: var(--green-action); border-color: var(--green-action); }
.commandbase-lp .button:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.commandbase-lp .button:focus-visible,
.commandbase-lp summary:focus-visible,
.commandbase-lp .brand-mark:focus-visible {
  outline: 3px solid #ffca52;
  outline-offset: 4px;
}

.commandbase-lp .section-action { display: flex; justify-content: center; margin-top: 32px; }

/* 1. HERO */
.commandbase-lp .hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 0 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.commandbase-lp .hero > .container { position: relative; z-index: 1; order: 1; }

.commandbase-lp .brand-mark {
  display: block;
  width: 260px;
  height: 58px;
  overflow: hidden;
  background-color: var(--surface);
  background-image: url("/wp-content/themes/swell_child/lp/assets/exhibition-management/commandbase-logo-v1.png");
  background-repeat: no-repeat;
  background-position: 49% 50%;
  background-size: 142% auto;
  background-blend-mode: multiply;
}

.commandbase-lp .brand-mark img { width: 142%; max-width: none; opacity: 0; transform: translate(-14.5%, -42%); }
.commandbase-lp .hero__grid { margin-top: 32px; padding-bottom: 46px; }
.commandbase-lp .hero__copy { min-width: 0; }
.commandbase-lp .hero-product-label {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-left: 4px solid var(--green);
  color: var(--navy);
  background: rgb(255 255 255 / 72%);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}
.commandbase-lp .hero h1 { max-width: 15ch; margin-bottom: 22px; font-size: clamp(2.25rem, 10vw, 4.9rem); }

.commandbase-lp .hero-art {
  position: relative;
  order: 2;
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #f4f1ea;
}

.commandbase-lp .hero-art img { width: 100%; height: 100%; object-fit: cover; }

/* 2. 課題提起 */
.commandbase-lp .problems { background: var(--surface-mint); }
.commandbase-lp .problem-grid { display: grid; border-top: 1px solid var(--navy); }
.commandbase-lp .problem-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.commandbase-lp .problem-item h3 { color: var(--navy); }
.commandbase-lp .problem-item p { max-width: 36em; margin-bottom: 0; color: var(--muted); }

/* 3. 提供内容 */
.commandbase-lp .service { color: var(--white); background: var(--navy-deep); }
.commandbase-lp .service-rail { position: relative; display: grid; gap: 0; list-style: none; }
.commandbase-lp .service-rail::before { position: absolute; top: 28px; bottom: 28px; left: 22px; width: 1px; background: var(--line-light); content: ""; }

.commandbase-lp .service-step {
  position: relative;
  min-width: 0;
  padding: 16px 18px 20px 68px;
  border-bottom: 1px solid var(--line-light);
}

.commandbase-lp .service-step__number {
  position: absolute;
  top: 15px;
  left: 0;
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--navy-deep);
  background: #83dfba;
  font-size: 0.76rem;
  font-weight: 800;
}

.commandbase-lp .service-step h3 { color: var(--white); }
.commandbase-lp .service-step h3 small { display: block; color: #83dfba; font-size: 0.72rem; }
.commandbase-lp .service-step p { margin-bottom: 0; color: rgb(255 255 255 / 76%); }
.commandbase-lp .service-step--optional { background: rgb(255 255 255 / 4%); border: 1px dashed rgb(131 223 186 / 65%); }
.commandbase-lp .service-step--optional .service-step__number { color: var(--white); background: var(--navy-deep); border: 1px dashed #83dfba; }

/* 4. 比較 */
.commandbase-lp .comparison { background: var(--surface-blue); border-top: 8px solid var(--green); }
.commandbase-lp .comparison-table-wrap { overflow: hidden; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); background: var(--white); }
.commandbase-lp .comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.commandbase-lp .comparison-table th,
.commandbase-lp .comparison-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.commandbase-lp .comparison-table tbody th { width: 34%; padding: 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); font-weight: 400; text-align: left; vertical-align: middle; }
.commandbase-lp .comparison-table tbody tr:not(.comparison-table__row--featured) th { border-left: 6px solid rgb(4 56 76 / 28%); }
.commandbase-lp .comparison-table tbody tr:not(.comparison-table__row--featured) th,
.commandbase-lp .comparison-table tbody tr:not(.comparison-table__row--featured) td { background: rgb(4 56 76 / 6%); }
.commandbase-lp .comparison-table tbody th h3 { color: var(--navy); }
.commandbase-lp .comparison-table tbody td { background: var(--white); }
.commandbase-lp .comparison-table tbody td p { max-width: 54em; margin-bottom: 0; color: var(--muted); }
.commandbase-lp .comparison-table tbody td strong { color: var(--navy); }
.commandbase-lp .comparison-table tbody tr:last-child th,
.commandbase-lp .comparison-table tbody tr:last-child td { border-bottom: 0; }
.commandbase-lp .comparison-table tbody .comparison-table__row--featured th { color: var(--white); background: var(--navy); border-top: 6px solid var(--green); }
.commandbase-lp .comparison-table tbody .comparison-table__row--featured th h3 { color: var(--white); }
.commandbase-lp .comparison-table tbody .comparison-table__row--featured td { color: var(--white); background: var(--navy); border-color: rgb(255 255 255 / 20%); border-top: 6px solid var(--green); }
.commandbase-lp .comparison-table tbody .comparison-table__row--featured td p { color: rgb(255 255 255 / 82%); }
.commandbase-lp .comparison-table tbody .comparison-table__row--featured td strong { color: var(--white); }

/* 5. 成果物 */
.commandbase-lp .deliverables { background: var(--surface-mint); }
.commandbase-lp .deliverable-ledger { border-top: 2px solid var(--navy); }
.commandbase-lp .deliverable-row { display: grid; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 72%); }
.commandbase-lp .deliverable-row dt { display: grid; grid-template-columns: 38px 1fr; gap: 10px; color: var(--navy); font-weight: 800; }
.commandbase-lp .deliverable-row__number { color: var(--green-action); font-size: 0.78rem; }
.commandbase-lp .deliverable-row__label { min-width: 0; }
.commandbase-lp .deliverable-row dt small { display: block; color: var(--muted); font-size: 0.72rem; }
.commandbase-lp .deliverable-row dd { margin: 0 0 0 50px; color: var(--muted); }
.commandbase-lp .deliverable-row--optional { border-left: 4px solid var(--green); background: rgb(4 56 76 / 8%); }

/* 6. 進め方 */
.commandbase-lp .process { background: var(--surface-blue); }
.commandbase-lp .process-callout { margin-bottom: 26px; padding: 17px; border-left: 6px solid var(--green); color: var(--navy); background: var(--white); font-weight: 700; }
.commandbase-lp .timeline { position: relative; display: grid; list-style: none; }
.commandbase-lp .timeline::before { position: absolute; top: 28px; bottom: 28px; left: 7px; width: 2px; background: var(--navy); content: ""; }

.commandbase-lp .timeline li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 0 14px 38px;
  border-bottom: 1px solid var(--line);
}

.commandbase-lp .timeline li::before {
  position: absolute;
  top: 27px;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--green);
  border: 4px solid var(--surface-blue);
  outline: 2px solid var(--green);
  content: "";
}

.commandbase-lp .timeline li.is-optional::before { background: var(--surface-blue); outline-style: dashed; }
.commandbase-lp .timeline time { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.commandbase-lp .timeline strong { color: var(--navy); }
.commandbase-lp .timeline small { display: block; color: var(--muted); font-size: 0.72rem; }

/* 7. 価格 */
.commandbase-lp .price { background: var(--navy-deep); }
.commandbase-lp .price-panel { display: grid; gap: 20px; padding: 26px 20px; border-top: 8px solid var(--green); background: var(--white); }
.commandbase-lp .price-panel h2 { margin-bottom: 18px; }
.commandbase-lp .price-main { margin-bottom: 0; color: var(--navy); font-weight: 800; }
.commandbase-lp .price-main strong { display: inline-block; font-size: clamp(2.7rem, 12vw, 5.5rem); line-height: 1; letter-spacing: -0.06em; }
.commandbase-lp .price-main__value { display: inline-flex; align-items: baseline; gap: 0.08em; white-space: nowrap; }
.commandbase-lp .price-main__plan { display: block; margin-top: 8px; color: var(--muted); font-size: 0.82rem; }
.commandbase-lp .price-tax { display: block; margin-top: 2px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.commandbase-lp .price-additional { margin-bottom: 0; padding: 18px 0; border-block: 1px solid var(--line); color: var(--navy); font-weight: 800; }
.commandbase-lp .price-additional .price-tax { display: inline-block; margin-left: 0.35em; }
.commandbase-lp .price-note { margin-bottom: 0; color: var(--muted); }
.commandbase-lp .price-note__tax { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 700; }
.commandbase-lp .price-panel__action { display: flex; align-items: flex-start; padding-top: 18px; border-top: 2px solid rgb(31 156 108 / 45%); }

/* 8. FAQ */
.commandbase-lp .faq { background: var(--surface-blue); }
.commandbase-lp .faq__grid { display: grid; align-items: start; gap: 18px; }
.commandbase-lp .faq__grid > h2 { margin-bottom: 0; padding: 20px 22px; color: var(--white); background: var(--navy); border-left: 8px solid var(--green); }
.commandbase-lp .faq-list { border-top: 2px solid var(--navy); background: var(--white); }
.commandbase-lp .faq details { border-bottom: 1px solid var(--navy); }
.commandbase-lp .faq summary { position: relative; padding: 16px 42px 16px 20px; font-weight: 800; cursor: pointer; list-style: none; }
.commandbase-lp .faq summary::-webkit-details-marker { display: none; }
.commandbase-lp .faq summary::after { position: absolute; top: 13px; right: 6px; color: var(--green-action); content: "+"; font-size: 1.4rem; }
.commandbase-lp .faq details[open] summary::after { content: "−"; }
.commandbase-lp .faq details p { max-width: 58em; margin: 0 20px 20px; color: var(--muted); }

/* 9. 最終CTA */
.commandbase-lp .final-cta { padding-bottom: 26px; color: var(--white); background: var(--ink); border-top: 10px solid var(--green); }
.commandbase-lp .final-cta__grid { display: grid; gap: 30px; }
.commandbase-lp .final-cta h2 { margin-bottom: 18px; }
.commandbase-lp .final-cta__grid p { margin-bottom: 0; color: rgb(255 255 255 / 76%); }
.commandbase-lp .operator-anchor { margin-top: 38px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 15%); }
.commandbase-lp .operator-anchor p { margin: 0; color: rgb(255 255 255 / 62%); font-size: 0.78rem; }
.commandbase-lp .operator-anchor a { text-underline-offset: 0.2em; }

@media (max-width: 719px) {
  .commandbase-lp .comparison-table,
  .commandbase-lp .comparison-table tbody { display: block; }
  .commandbase-lp .comparison-table tbody { display: grid; gap: 12px; }
  .commandbase-lp .comparison-table tbody tr {
    display: block;
    border: 1px solid var(--line);
  }
  .commandbase-lp .comparison-table tbody th {
    display: block;
    width: 100%;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .commandbase-lp .comparison-table tbody td {
    display: block;
    padding: 16px;
    border-bottom: 0;
  }
  .commandbase-lp .comparison-table__row--featured th,
  .commandbase-lp .comparison-table__row--featured td { border-top: 0; }
  .commandbase-lp .comparison-table__row--featured { border-top: 6px solid var(--green) !important; }
}

@media (min-width: 720px) {
  .commandbase-lp .container { width: min(calc(100% - 64px), var(--container)); }
  .commandbase-lp .section { padding: 68px 0; }
  .commandbase-lp .hero { padding-top: 22px; }
  .commandbase-lp .hero__grid { margin-top: 36px; }
  .commandbase-lp .hero h1 { font-size: clamp(3.4rem, 8vw, 5rem); }
  .commandbase-lp .problem-item { padding: 26px 22px 26px 0; }
  .commandbase-lp .deliverable-row { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 22px; }
  .commandbase-lp .deliverable-row dd { margin: 0; }
  .commandbase-lp .price-panel { padding: 36px; }
  .commandbase-lp .price-panel__action { justify-content: center; }
  .commandbase-lp .faq__grid { grid-template-columns: 0.35fr 1fr; gap: 42px; }
  .commandbase-lp .final-cta__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (min-width: 860px) {
  .commandbase-lp .hero { display: block; min-height: clamp(620px, 68svh, 700px); padding-bottom: 0; }
  .commandbase-lp .hero__grid { margin-top: 42px; padding-bottom: 64px; }
  .commandbase-lp .hero__copy { width: min(58%, 660px); }
  .commandbase-lp .hero h1 { font-size: clamp(3.05rem, 4.5vw, 4.4rem); }
  .commandbase-lp .hero-art { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 68%; height: 100%; aspect-ratio: auto; }
  .commandbase-lp .hero-art::after { position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface) 0%, rgb(238 242 244 / 96%) 12%, rgb(238 242 244 / 74%) 28%, rgb(238 242 244 / 16%) 50%, rgb(238 242 244 / 0%) 68%); content: ""; pointer-events: none; }
  .commandbase-lp .hero-art img { object-position: 58% center; }
}

@media (min-width: 960px) {
  .commandbase-lp .problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .commandbase-lp .problem-item { padding: 28px 26px 28px 0; border-right: 1px solid var(--line); }
  .commandbase-lp .problem-item + .problem-item { padding-left: 26px; }
  .commandbase-lp .problem-item:last-child { padding-right: 0; border-right: 0; }
  .commandbase-lp .service-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .commandbase-lp .service-rail::before { top: 22px; right: 0; bottom: auto; left: 0; width: auto; height: 1px; }
  .commandbase-lp .service-step { padding: 64px 22px 20px; border-right: 1px solid var(--line-light); border-bottom: 0; }
  .commandbase-lp .service-step__number { top: 0; left: 22px; }
  .commandbase-lp .service-step:last-child { border-right: 0; }
  .commandbase-lp .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .commandbase-lp .timeline::before { top: 17px; right: 10%; bottom: auto; left: 10%; width: auto; height: 2px; }
  .commandbase-lp .timeline li { padding: 38px 20px 18px; border-right: 1px solid var(--line); border-bottom: 0; text-align: center; }
  .commandbase-lp .timeline li::before { top: 9px; left: calc(50% - 8px); }
  .commandbase-lp .timeline li:last-child { border-right: 0; }
  .commandbase-lp .price-panel { grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr); align-items: center; }
  .commandbase-lp .price-additional { padding: 22px 0; }
  .commandbase-lp .price-note { grid-column: 1 / -1; }
  .commandbase-lp .price-panel__action { grid-column: 1 / -1; }
}

@media (min-width: 1440px) {
  .commandbase-lp .section { padding: 84px 0; }
  .commandbase-lp .price-panel { padding: 44px 52px; }
}

@media (max-width: 430px) {
  .commandbase-lp h2 { font-size: 1.6rem; }
  .commandbase-lp .problems .section-heading h2 { font-size: 1.35rem; }
  .commandbase-lp .brand-mark { width: 242px; height: 54px; }
  .commandbase-lp .hero h1 { font-size: 2.35rem; letter-spacing: -0.05em; }
  .commandbase-lp .button { width: 100%; gap: 12px; padding-inline: 14px; font-size: 0.9rem; }
  .commandbase-lp .service-step { padding-right: 4px; }
  .commandbase-lp .deliverable-row dd { margin-left: 0; }
  .commandbase-lp .process-callout { padding: 17px 15px; }
  .commandbase-lp .price-panel { padding: 26px 18px; }
  .commandbase-lp .price-main strong { font-size: 3.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .commandbase-lp { scroll-behavior: auto; }
}