.vp-article-wrap { padding: 20px 0 40px; }
.vp-article-wrap .page-title {
font-size: 26px; font-weight: 700; color: #2f4f4f;
border-bottom: 3px solid #006699; padding-bottom: 10px; margin: 10px 0 6px;
}
.vp-article-meta { color: #777; font-size: 13px; margin-bottom: 18px; }
.vp-article-meta a { color: #006699; text-decoration: none; }
.vp-article-meta a:hover { text-decoration: underline; } .vp-article { line-height: 1.9; color: #333; }
.vp-article p { margin: 0 0 1em; }
.vp-article h2 {
font-size: 22px; font-weight: 700; color: #fff; background: #006699;
padding: 8px 14px; border-radius: 4px; margin: 1.6em 0 0.8em;
scroll-margin-top: 20px;
}
.vp-article h3 {
font-size: 18px; font-weight: 700; color: #006699;
border-left: 5px solid #006699; padding-left: 10px; margin: 1.4em 0 0.7em;
scroll-margin-top: 20px;
}
.vp-article ul, .vp-article ol { margin: 0 0 1.2em; padding-left: 1.8em; }
.vp-article li { margin-bottom: 0.4em; } .vp-article li:has(> ul:only-child), .vp-article li:has(> ol:only-child) { list-style: none; }
.vp-article li > ul:only-child, .vp-article li > ol:only-child { margin: 0; }
.vp-article li > ul:only-child { list-style: disc; } .vp-article figure { margin: 1.2em 0; text-align: center; }
.vp-article figure img { max-width: 100%; height: auto; }
.vp-article figcaption { color: #777; font-size: 13px; margin-top: 6px; } .vp-article table {
border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 14px;
}
.vp-article th, .vp-article td {
border: 1px solid #b9cdd8; padding: 8px 10px; vertical-align: top; text-align: left;
}
.vp-article thead th { background: #006699; color: #fff; white-space: nowrap; }
.vp-article tbody tr:nth-child(even) { background: #f4f8fa; }
.vp-article td p { margin: 0 0 0.5em; }
@media (max-width: 767px) {
.vp-article table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
} .vp-article .vp-toc {
background: #f4f8fa; border: 1px solid #b9cdd8; border-radius: 4px;
padding: 14px 18px; margin: 1.2em 0; display: inline-block; min-width: 60%;
}
.vp-article .vp-toc p { font-weight: 700; color: #2f4f4f; margin: 0 0 0.5em; }
.vp-article .vp-toc ul { margin: 0; padding-left: 1.4em; }
.vp-article .vp-toc li { margin-bottom: 0.2em; }
.vp-article .vp-toc a { color: #006699; text-decoration: none; }
.vp-article .vp-toc a:hover { text-decoration: underline; } .vp-article-related { margin-top: 30px; border-top: 1px dashed #b9cdd8; padding-top: 18px; }
.vp-article-related .related-title { font-size: 18px; font-weight: 700; color: #2f4f4f; margin-bottom: 10px; }
.vp-article-related ul { padding-left: 1.4em; margin: 0 0 1em; }
.vp-cta-service {
display: inline-block; background: #006699; color: #fff !important;
padding: 10px 22px; border-radius: 4px; text-decoration: none; font-weight: 700;
}
.vp-cta-service:hover { background: #2f4f4f; }  .vp-news-list .row { display: flex; flex-wrap: wrap; }
.vp-news-list .row::before, .vp-news-list .row::after { content: none; } .vp-news-list .vp-card { margin-bottom: 24px; }
.vp-news-list .vp-card-inner {
border: 1px solid #d7e2e8; border-radius: 4px; overflow: hidden; height: 100%;
display: flex; flex-direction: column; background: #fff;
transition: box-shadow 0.2s;
}
.vp-news-list .vp-card-inner:hover { box-shadow: 0 3px 12px rgba(0, 51, 77, 0.18); }
.vp-news-list .vp-card-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f4f8fa; }
.vp-news-list .vp-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-news-list .vp-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.vp-news-list .vp-card-cat {
display: inline-block; align-self: flex-start;
color: #d32f2f; border: 1px solid #d32f2f; border-radius: 3px;
font-size: 13px; font-weight: 700; padding: 1px 8px; margin-bottom: 8px;
}
.vp-news-list .vp-card-title { text-align: left; font-size: 20px; font-weight: 700; line-height: 1.45; margin: 0 0 10px; }
.vp-news-list .vp-card-title a { color: #006699; text-decoration: none; }
.vp-news-list .vp-card-title a:hover { color: #d32f2f; }
.vp-news-list .vp-card-excerpt { color: #333; font-size: 15px; line-height: 1.8; flex: 1; }
.vp-news-list .vp-card-date { color: #777; font-size: 13px; margin-top: 12px; }