/* このページの色・余白。本文は capabilities.html の各 scope-detail を編集します。 */
.capabilities-page { --scope-green: #246b72; --scope-green-bg: #eef5f6; --scope-orange: #4b5876; --scope-orange-bg: #f1f3f8; }
.capabilities-page .content-grid { grid-template-columns: minmax(0, 1fr); }
.capabilities-page .section-lead { max-width: 50em; margin-bottom: 32px; }
.scope-group { padding: clamp(18px, 3vw, 36px); border-radius: 18px; margin-bottom: 32px; }
.scope-included { background: var(--scope-green-bg); }
.scope-outside { background: var(--scope-orange-bg); }
.scope-label { display: inline-block; font-size: 1rem; font-weight: 700; color: var(--scope-green); border: 1px solid currentColor; border-radius: 6px; padding: 3px 12px; }
.scope-outside .scope-label { color: var(--scope-orange); }
.capabilities-page .scope-heading h2 { margin: 16px 0 12px; font-size: clamp(1.5rem, 2.96vw, 2rem); line-height: 1.5; }
.capabilities-page .scope-heading p { margin: 0 0 24px; }
.scope-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.capabilities-page .scope-detail { background: #fff; border: 1px solid #d7e5d9; border-radius: 12px; padding: clamp(20px, 2.5vw, 28px); min-width: 0; }
.capabilities-page .scope-outside .scope-detail { border-color: #dce1ea; }
.scope-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--scope-green); background: var(--scope-green-bg); border-radius: 12px; margin-bottom: 16px; }
.scope-icon svg { width: 27px; height: 27px; }
.scope-outside .scope-icon { color: var(--scope-orange); background: var(--scope-orange-bg); }
.capabilities-page .scope-detail h3 { margin: 0 0 12px; font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.6; }
.capabilities-page .scope-detail p { margin: 0; line-height: 1.9; overflow-wrap: anywhere; }
.capabilities-page .scope-help { border-left: 5px solid var(--scope-green); background: #f4f6f5; box-shadow: none; }
.capabilities-page .side { position: static; }
.capabilities-page .side ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 680px) { .scope-cards { grid-template-columns: minmax(0, 1fr); } .scope-group { border-radius: 12px; } .capabilities-page .scope-help { padding: 22px; } }