/* ===================================
   kaitori-blog.css
   Blog / Column Page Styles
   ALL properties use !important
   Hardcoded color values only
   =================================== */

/* ===== Breadcrumb (shared with category) ===== */
.kj-blog .kj-breadcrumb {
    margin-top: 56px !important;
    padding: 12px 16px !important;
    font-size: .75rem !important;
    color: #888 !important;
    background: #F5F0E8 !important;
}

.kj-blog .kj-breadcrumb a {
    color: #1B5E7D !important;
    text-decoration: none !important;
}

.kj-blog .kj-breadcrumb span {
    margin: 0 6px !important;
}

/* ===== Article Wrapper ===== */
.kj-blog-article {
    padding: 24px 16px !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

/* ===== Article Header ===== */
.kj-article-header {
    margin-bottom: 24px !important;
}

.kj-article-tag {
    display: inline-block !important;
    background: #1B5E7D !important;
    color: #fff !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 3px !important;
    margin-bottom: 8px !important;
}

.kj-article-title {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #2D2D2D !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
}

.kj-article-meta {
    display: flex !important;
    gap: 16px !important;
    font-size: .75rem !important;
    color: #888 !important;
    margin-bottom: 16px !important;
}

.kj-article-eyecatch {
    width: 100% !important;
    height: 200px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #e8e0d4 !important;
}

[class*="kj-"] .kj-article-eyecatch img,
.kj-article-eyecatch img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ===== Article Intro (書き出し) ===== */
.kj-article-intro {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

.kj-article-intro p {
    font-size: .95rem !important;
    line-height: 1.9 !important;
    color: #2D2D2D !important;
}

/* ===== TOC ===== */
.kj-toc {
    background: #F5F0E8 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 32px !important;
}

.kj-toc-title {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #1B5E7D !important;
    margin-bottom: 10px !important;
}

.kj-toc-list {
    list-style: none !important;
    counter-reset: toc !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kj-toc-list li {
    counter-increment: toc !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    font-size: .85rem !important;
}

.kj-toc-list li:last-child {
    border-bottom: none !important;
}

.kj-toc-list li::before {
    content: counter(toc) ". " !important;
    color: #C4873B !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
}

.kj-toc-list a {
    color: #2D2D2D !important;
    text-decoration: none !important;
}

/* ===== Blog Article Content ===== */
.kj-blog-content h2 {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1B5E7D !important;
    padding: 12px 0 8px !important;
    border-bottom: 2px solid #1B5E7D !important;
    margin-bottom: 16px !important;
    margin-top: 40px !important;
}

.kj-blog-content h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #2D2D2D !important;
    margin-top: 28px !important;
    margin-bottom: 8px !important;
    padding-left: 12px !important;
    border-left: 3px solid #C4873B !important;
}

.kj-blog-content p {
    font-size: .95rem !important;
    margin-bottom: 16px !important;
    line-height: 1.9 !important;
}

.kj-blog-content strong {
    color: #1B5E7D !important;
}

.kj-blog-content ul,
.kj-blog-content ol {
    margin: 16px 0 !important;
    padding-left: 24px !important;
}

.kj-blog-content li {
    font-size: .95rem !important;
    line-height: 1.8 !important;
    margin-bottom: 6px !important;
}

.kj-blog-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
}

/* ===== Highlight Box ===== */
.kj-highlight-box {
    background: #F5F0E8 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin: 20px 0 !important;
    font-size: .9rem !important;
    line-height: 1.7 !important;
}

.kj-highlight-box.tip {
    border-left: 4px solid #1B5E7D !important;
}

.kj-highlight-box.warning {
    border-left: 4px solid #C4873B !important;
    background: #fff8f0 !important;
}

.kj-highlight-box-title {
    font-weight: 700 !important;
    color: #1B5E7D !important;
    margin-bottom: 4px !important;
}

/* ===== Compare Table ===== */
.kj-compare-table,
.kj-blog-content table,
.kj-blog-content .wp-block-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 !important;
    font-size: .85rem !important;
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
    border: none !important;
}

.kj-compare-table th,
.kj-blog-content table th,
.kj-blog-content .wp-block-table th {
    background: #1B5E7D !important;
    color: #fff !important;
    padding: 10px 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    border: none !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.kj-compare-table td,
.kj-blog-content table td,
.kj-blog-content .wp-block-table td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.kj-compare-table tr:last-child td,
.kj-blog-content table tr:last-child td,
.kj-blog-content .wp-block-table tr:last-child td {
    border-bottom: none !important;
}

.kj-blog-content .wp-block-table {
    margin: 20px 0 !important;
}

.kj-blog-content .wp-block-table figcaption {
    font-size: .75rem !important;
    color: #888 !important;
    text-align: center !important;
    margin-top: 8px !important;
}

/* ===== Checklist ===== */
.kj-checklist {
    list-style: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

.kj-checklist li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0ebe3 !important;
    font-size: .9rem !important;
}

.kj-checklist li:last-child {
    border-bottom: none !important;
}

.kj-check-icon {
    width: 24px !important;
    height: 24px !important;
    background: #1B5E7D !important;
    color: #fff !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* ===== Number Cards ===== */
.kj-number-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 20px 0 !important;
}

.kj-number-card {
    display: flex !important;
    gap: 14px !important;
    background: #fff !important;
    border-radius: 10px !important;
    padding: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

.kj-number-card-num {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #C4873B !important;
    min-width: 40px !important;
    text-align: center !important;
    line-height: 1 !important;
    padding-top: 4px !important;
}

.kj-number-card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1B5E7D !important;
    margin-bottom: 4px !important;
}

.kj-number-card-text {
    font-size: .85rem !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* ===== Area Info Card ===== */
.kj-area-info-card {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
    margin: 20px 0 !important;
}

.kj-area-info-card h4 {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #1B5E7D !important;
    margin-bottom: 8px !important;
}

.kj-area-info-card p {
    font-size: .8rem !important;
    color: #666 !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
}

/* ===== Inline CTA ===== */
.kj-inline-cta {
    background: linear-gradient(135deg, #1B5E7D, #2a7a9e) !important;
    border-radius: 16px !important;
    padding: 28px 20px !important;
    text-align: center !important;
    color: #fff !important;
    margin: 32px 0 !important;
}

.kj-inline-cta h3 {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    color: #fff !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
}

.kj-inline-cta p {
    font-size: .8rem !important;
    color: rgba(255,255,255,.85) !important;
    margin-bottom: 16px !important;
}

.kj-inline-cta-micro {
    font-size: .7rem !important;
    color: rgba(255,255,255,.6) !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.kj-cta-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.kj-btn-w-phone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 8px !important;
    background: #C4873B !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(196,135,59,.3) !important;
}

.kj-btn-w-line {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 8px !important;
    background: #06C755 !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ===== Author Box ===== */
.kj-author-box {
    display: flex !important;
    gap: 14px !important;
    background: #F5F0E8 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 32px 0 !important;
}

.kj-author-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #e8e8e8 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

[class*="kj-"] .kj-author-avatar img,
.kj-author-avatar img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.kj-author-name {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #1B5E7D !important;
    margin-bottom: 4px !important;
}

.kj-author-bio {
    font-size: .75rem !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* ===== Related Articles ===== */
.kj-blog-related {
    padding: 32px 0 !important;
}

.kj-blog-related-title {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1B5E7D !important;
    margin-bottom: 16px !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.kj-blog-related-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.kj-blog-related-card {
    display: flex !important;
    gap: 12px !important;
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
    text-decoration: none !important;
    color: #2D2D2D !important;
}

.kj-blog-related-thumb {
    width: 100px !important;
    min-height: 80px !important;
    flex-shrink: 0 !important;
    background: #e8e0d4 !important;
    overflow: hidden !important;
}

[class*="kj-"] .kj-blog-related-thumb img,
.kj-blog-related-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.kj-blog-related-body {
    padding: 10px 12px 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.kj-blog-related-tag {
    font-size: .6rem !important;
    color: #1B5E7D !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

.kj-blog-related-name {
    font-size: .85rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* ===== PC ===== */
@media (min-width: 769px) {
    .kj-blog .kj-breadcrumb {
        margin-top: 80px !important;
    }

    .kj-blog-article {
        padding: 32px 24px !important;
    }

    .kj-article-eyecatch {
        height: 300px !important;
    }
}