.ki-article { line-height: 1.9; color: #333; font-size: 16px; }
.ki-article h1 {
font-size: 1.7em;
color: #1e5a8e;
border-bottom: 3px solid #f4b400;
padding-bottom: 12px;
margin: 0 0 24px;
line-height: 1.5;
}
.ki-article h3 {
background: linear-gradient(135deg, #1e5a8e 0%, #3a7cb8 100%);
color: #fff;
padding: 18px 22px;
border-radius: 8px;
font-size: 1.45em;
margin: 50px 0 28px;
border-left: 6px solid #f4b400;
box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.ki-article h4 {
color: #1e5a8e;
border-bottom: 2px solid #1e5a8e;
padding: 8px 0 8px 14px;
border-left: 5px solid #f4b400;
margin: 35px 0 18px;
font-size: 1.2em;
background: #f7fafd;
}
.ki-article p { margin: 0 0 18px; }
.ki-article strong { color: #1e5a8e; font-weight: bold; }
.ki-article .lead {
background: #f7fafd;
border: 1px solid #d6e4f0;
padding: 22px 24px;
border-radius: 8px;
margin: 0 0 30px;
}
.ki-article .supervisor-card {
background: linear-gradient(135deg, #f7fafd 0%, #eaf2f9 100%);
border: 1px solid #1e5a8e;
border-left: 6px solid #1e5a8e;
border-radius: 8px;
padding: 20px 24px;
margin: 28px 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.ki-article .supervisor-card .title {
font-weight: bold;
color: #1e5a8e;
font-size: 1.05em;
margin-bottom: 12px;
border-bottom: 1px dashed #1e5a8e;
padding-bottom: 8px;
}
.ki-article .supervisor-card dl { margin: 0; }
.ki-article .supervisor-card dt { font-weight: bold; color: #555; }
.ki-article .supervisor-card dd { margin: 0; }
.ki-article .point-box {
background: #fff8e7;
border-left: 5px solid #f4b400;
padding: 18px 22px;
margin: 22px 0;
border-radius: 4px;
}
.ki-article .point-box .label {
display: inline-block;
background: #f4b400;
color: #fff;
font-weight: bold;
padding: 3px 12px;
border-radius: 3px;
font-size: 0.9em;
margin-bottom: 10px;
}
.ki-article .caution-box {
background: #fff5f5;
border-left: 5px solid #d9534f;
padding: 18px 22px;
margin: 22px 0;
border-radius: 4px;
}
.ki-article .caution-box .label {
display: inline-block;
background: #d9534f;
color: #fff;
font-weight: bold;
padding: 3px 12px;
border-radius: 3px;
font-size: 0.9em;
margin-bottom: 10px;
}
.ki-article .info-box {
background: #eaf6f3;
border-left: 5px solid #2e8b75;
padding: 18px 22px;
margin: 22px 0;
border-radius: 4px;
}
.ki-article .info-box .label {
display: inline-block;
background: #2e8b75;
color: #fff;
font-weight: bold;
padding: 3px 12px;
border-radius: 3px;
font-size: 0.9em;
margin-bottom: 10px;
}
.ki-article .price-table,
.ki-article .compare-table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-size: 0.95em;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
border-radius: 6px;
overflow: hidden;
}
.ki-article .price-table th,
.ki-article .compare-table th {
background: #1e5a8e;
color: #fff;
padding: 12px 14px;
text-align: left;
font-weight: bold;
border: 1px solid #1e5a8e;
}
.ki-article .price-table td,
.ki-article .compare-table td {
padding: 12px 14px;
border: 1px solid #d6e4f0;
background: #fff;
vertical-align: top;
}
.ki-article .price-table tr:nth-child(even) td,
.ki-article .compare-table tr:nth-child(even) td {
background: #f7fafd;
}
.ki-article .compare-table .col-feature {
background: #eaf2f9 !important;
font-weight: bold;
width: 25%;
}
.ki-article .timeline {
margin: 24px 0;
padding-left: 24px;
border-left: 3px solid #1e5a8e;
}
.ki-article .timeline-item {
position: relative;
margin-bottom: 20px;
padding-left: 16px;
}
.ki-article .timeline-item::before {
content: "";
position: absolute;
left: -32px;
top: 6px;
width: 14px;
height: 14px;
background: #f4b400;
border-radius: 50%;
border: 3px solid #1e5a8e;
}
.ki-article .timeline-item .stage {
font-weight: bold;
color: #1e5a8e;
display: block;
margin-bottom: 4px;
}
.ki-article .faq-item {
background: #fff;
border: 1px solid #d6e4f0;
border-radius: 8px;
margin: 18px 0;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
display: block;
width: 100%;
clear: both;
}
.ki-article .faq-q {
background: #1e5a8e;
color: #fff;
padding: 14px 20px 14px 54px;
font-weight: bold;
position: relative;
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
}
.ki-article .faq-q::before {
content: "Q";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
background: #f4b400;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 28px;
font-size: 0.95em;
font-weight: bold;
}
.ki-article .faq-a {
padding: 16px 20px 16px 54px;
position: relative;
background: #f7fafd;
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
color: #333;
}
.ki-article .faq-a::before {
content: "A";
position: absolute;
left: 16px;
top: 16px;
width: 28px;
height: 28px;
background: #2e8b75;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: bold;
}
.ki-article .cta-box {
background: linear-gradient(135deg, #1e5a8e 0%, #3a7cb8 100%);
color: #fff;
padding: 30px;
border-radius: 10px;
margin: 35px 0;
text-align: center;
box-shadow: 0 4px 12px rgba(30,90,142,0.3);
}
.ki-article .cta-box .cta-title {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 12px;
}
.ki-article .cta-box .cta-tel {
font-size: 1.5em;
font-weight: bold;
margin: 10px 0;
}
.ki-article .cta-box .cta-tel a {
color: #fff;
text-decoration: none;
border-bottom: 2px solid #f4b400;
}
.ki-article .cta-box .cta-note { font-size: 0.92em; opacity: 0.95; }
.ki-article .access-info {
background: #fafafa;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px 24px;
margin: 24px 0;
}
.ki-article .access-info dt {
font-weight: bold;
color: #1e5a8e;
margin-top: 8px;
}
.ki-article .access-info dd { margin: 4px 0 0 1em; }
.ki-article .toc-box {
background: #f7fafd;
border: 1px solid #d6e4f0;
border-radius: 8px;
padding: 20px 28px;
margin: 30px 0;
}
.ki-article .toc-box .toc-title {
font-weight: bold;
color: #1e5a8e;
font-size: 1.05em;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px dashed #1e5a8e;
}
.ki-article .toc-box ol {
margin: 0;
padding-left: 20px;
}
.ki-article .toc-box ol li {
margin-bottom: 6px;
}
.ki-article .toc-box ol li a {
color: #1e5a8e;
text-decoration: none;
}
.ki-article .toc-box ol li a:hover {
text-decoration: underline;
}
.ki-article .check-list {
list-style: none;
padding: 0;
margin: 0;
}
.ki-article .check-list li {
padding-left: 28px;
position: relative;
margin-bottom: 10px;
}
.ki-article .check-list li::before {
content: "\2714";
position: absolute;
left: 0;
color: #f4b400;
font-weight: bold;
}
@media (max-width: 600px) {
.ki-article h1 { font-size: 1.3em; }
.ki-article h3 { font-size: 1.2em; padding: 14px 16px; }
.ki-article h4 { font-size: 1.05em; }
.ki-article .supervisor-card dt { font-weight: bold; color: #555; }
.ki-article .price-table,
.ki-article .compare-table { font-size: 0.88em; }
.ki-article .price-table th,
.ki-article .price-table td,
.ki-article .compare-table th,
.ki-article .compare-table td { padding: 8px 10px; }
.ki-article .cta-box { padding: 20px 16px; }
.ki-article .cta-box .cta-tel { font-size: 1.2em; }
} .supervisor-card dl { display: grid !important; grid-template-columns: 6em 1fr !important; row-gap: 6px !important; margin: 0 !important; align-items: start !important; }
.supervisor-card dl + dl { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px dashed #d6e4f0 !important; }
.supervisor-card dt { grid-column: 1 !important; display: block !important; width: auto !important; margin: 0 !important; font-weight: bold !important; }
.supervisor-card dd { grid-column: 2 !important; display: block !important; margin: 0 !important; min-width: 0 !important; overflow-wrap: break-word !important; word-break: break-word !important; }
@media (max-width: 600px) { .supervisor-card dl { grid-template-columns: 5em 1fr !important; } } .ki-article { background: #ffffff !important; color: #333 !important; padding: 24px !important; border-radius: 8px !important; }
.ki-article p, .ki-article li, .ki-article dd, .ki-article .lead, .ki-article .faq-a, .ki-article td { color: #333 !important; }
@media (max-width: 600px) { .ki-article { padding: 16px !important; } } .cta-box, .cta-box p, .cta-box li, .cta-box dd, .cta-box td, .cta-box .lead, .cta-box .faq-a { color: #fff !important; }
.ki-article .cta-box, .ki-article .cta-box p, .ki-article .cta-box li, .ki-article .cta-box dd, .ki-article .cta-box td, .ki-article .cta-box .lead, .ki-article .cta-box .faq-a { color: #fff !important; } .supervisor-byline { font-size: 0.85em; color: #777; margin: 0 0 20px; } .ki-article h2#top {
background: none;
color: #1e5a8e;
border: none;
border-bottom: 3px solid #f4b400;
border-radius: 0;
box-shadow: none;
padding: 0 0 12px;
font-size: 1.7em;
margin: 0 0 24px;
line-height: 1.5;
}
@media (max-width: 600px) {
.ki-article h2#top { font-size: 1.3em; }
}