/*
Theme Name: Life Advisor
Theme URI: 
Author: Antigravity
Author URI: 
Description: A magazine style theme for Life Advisor.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: magazine, blog, two-columns, right-sidebar
Text Domain: life-advisor
*/

/* Custom Scrollbar (Horizontal) */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hover Zoom Effect */
.hover-zoom img {
    transition: transform 0.5s ease;
}
.hover-zoom:hover img {
    transform: scale(1.05);
}

/* Base Responsive Fixes for Content */
img {
    max-width: 100%;
    height: auto;
}
iframe {
    max-width: 100%;
}

/* Hero Section Grid Fix - Mobile: Uniform image heights */
@media (max-width: 767px) {
    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: auto !important;
    }

    /* All hero cards get uniform height on mobile */
    .hero-grid > div,
    .hero-grid > div > div {
        height: 220px !important;
        min-height: 220px;
        max-height: 220px;
        overflow: hidden;
    }

    /* Sub-features wrapper - also needs to be flex column */
    .hero-grid > div:last-child {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: auto !important;
        max-height: none !important;
    }

    /* Each sub-feature card */
    .hero-grid > div:last-child > div {
        height: 220px !important;
        min-height: 220px;
        max-height: 220px;
        flex: none;
    }

    .hero-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Hero Section Grid Fix - Desktop: Prevent image overflow */
@media (min-width: 768px) {
    .hero-grid {
        overflow: hidden;
    }

    /* Force hero grid children to respect parent height */
    .hero-grid > div {
        max-height: 100%;
        overflow: hidden;
    }

    /* Main feature container - explicit height constraint */
    .hero-grid > div:first-child {
        height: 100%;
    }

    /* Sub-features column - match parent height */
    .hero-grid > div:last-child {
        height: 100%;
    }

    /* Ensure images inside hero don't overflow */
    .hero-grid img {
        max-height: 100%;
        object-fit: cover;
    }
}

/* ============================================
 * 記事2カラムレイアウト（PC: 横並び、スマホ: 縦並び）
 * ============================================ */
.content-with-image {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin: 24px 0;
    align-items: flex-start;
}
.content-with-image .content-text {
    flex: 1;
    min-width: 0;
}
.content-with-image .content-image {
    flex: 0 0 40%;
    max-width: 400px;
    margin: 0;
}
.content-with-image .content-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 目次ボックス */
.toc-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 24px 0;
}
.toc-box .toc-title {
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 1.1em;
}
.toc-box ul {
    margin: 0;
    padding-left: 20px;
}
.toc-box li {
    margin: 8px 0;
}
.toc-box a {
    color: #333;
    text-decoration: none;
}
.toc-box a:hover {
    color: #007bff;
}

/* ポイントボックス */
.point-box {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border-left: 4px solid #ffc107;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin: 20px 0;
}
.point-box .point-title {
    font-weight: bold;
    color: #856404;
    margin-bottom: 8px;
}

/* まとめボックス */
.summary-box {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
}
.summary-box .summary-title {
    font-weight: bold;
    color: #2e7d32;
    margin-bottom: 12px;
    font-size: 1.1em;
}
.summary-box ul {
    margin: 0;
    padding-left: 20px;
}
.summary-box li {
    margin: 8px 0;
}

/* 参考文献ボックス */
.references-box {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
}
.references-box .references-title {
    font-weight: bold;
    color: #555;
    margin-bottom: 12px;
    font-size: 1em;
}
.references-box ul {
    margin: 0;
    padding-left: 20px;
}
.references-box li {
    margin: 8px 0;
    font-size: 0.9em;
}
.references-box a {
    color: #0066cc;
    text-decoration: none;
}
.references-box a:hover {
    text-decoration: underline;
}

/* リード文 */
.lead-text {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
    margin-bottom: 24px;
}

/* 2カラムレイアウトのモバイル対応 */
@media (max-width: 768px) {
    .content-with-image {
        flex-direction: column-reverse;
        gap: 12px;
        margin: 12px 0;
    }
    .content-with-image .content-image {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .toc-box {
        padding: 14px;
        margin: 14px 0;
    }
    .toc-box .toc-title {
        margin-bottom: 8px;
        font-size: 1em;
    }
    .toc-box li {
        margin: 6px 0;
        font-size: 14px;
    }
    .point-box {
        padding: 12px 14px;
        margin: 12px 0;
    }
    .point-box .point-title {
        margin-bottom: 6px;
        font-size: 14px;
    }
    .point-box p {
        font-size: 14px;
        line-height: 1.6;
    }
    .summary-box {
        padding: 14px;
        margin: 16px 0;
    }
    .summary-box .summary-title {
        margin-bottom: 8px;
        font-size: 1em;
    }
    .summary-box li {
        margin: 6px 0;
        font-size: 14px;
    }
    .lead-text {
        font-size: 1em;
        margin-bottom: 16px;
    }
}

/* 記事本文のスタイル定義 */
.post-content h2 {
    font-family: "Noto Serif JP", serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #D4A373; /* アクセントカラーの下線 */
    line-height: 1.4;
}
.post-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 4px solid #8C7B75; /* プライマリカラーの縦線 */
    line-height: 1.4;
}
.post-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8; /* 読みやすさ重視で行間を広めに */
    text-align: justify;
}
.post-content strong {
    background: linear-gradient(transparent 60%, #E6CCB2 60%); /* マーカー風の強調 */
    padding: 0 4px;
}

/* ========================================
   Pagination Styles (WordPress paginate_links)
   ======================================== */
.pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination-nav .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4B5563; /* gray-600 */
    background-color: #F9FAFB; /* gray-50 */
    border: 1px solid #E5E7EB; /* gray-200 */
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination-nav .page-numbers:hover {
    background-color: #F3F4F6; /* gray-100 */
    border-color: #D1D5DB; /* gray-300 */
    color: #1F2937; /* gray-800 */
}

.pagination-nav .page-numbers.current {
    background-color: #8C7B75; /* brand-primary */
    border-color: #8C7B75;
    color: #FFFFFF;
    font-weight: 600;
}

.pagination-nav .page-numbers.dots {
    background: transparent;
    border: none;
    cursor: default;
    min-width: auto;
    padding: 0 0.25rem;
}

.pagination-nav .page-numbers.dots:hover {
    background: transparent;
}

.pagination-nav .prev,
.pagination-nav .next {
    font-weight: 600;
}

/* Category page pagination (if not using nav wrapper) */
.page-numbers:not(.pagination-nav .page-numbers) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4B5563;
    text-decoration: none;
    transition: all 0.2s ease;
    margin: 0 0.125rem;
}

.page-numbers.current:not(.pagination-nav .page-numbers) {
    background-color: #8C7B75;
    color: #FFFFFF;
    border-radius: 0.5rem;
    font-weight: 600;
}

/* ============================================
 * 関連記事ボックス（内部リンク）
 * ============================================ */
.related-articles {
    background: linear-gradient(135deg, #fdf2f4 0%, #fff5f6 100%);
    border-radius: 12px;
    padding: 24px;
    margin: 32px 0;
    border: 1px solid #f5e1e3;
}

.related-articles h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.related-articles h3::before {
    content: "📖";
    font-size: 18px;
}

.related-articles ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-articles li {
    padding: 12px 0;
    border-bottom: 1px solid #f0e0e2;
}

.related-articles li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-articles li.link-hub {
    background: rgba(212, 132, 139, 0.08);
    margin: 0 -12px;
    padding: 12px;
    border-radius: 8px;
    border-bottom: none;
    margin-bottom: 8px;
}

.related-articles a {
    color: #d4848b;
    text-decoration: none;
    font-weight: 500;
    display: block;
    transition: color 0.2s ease;
}

.related-articles a:hover {
    color: #c0717a;
    text-decoration: underline;
}

.related-articles li.link-hub a::before {
    content: "⭐ ";
}

.related-articles li.link-related a::before {
    content: "→ ";
    color: #999;
}

/* ============================================
 * 記事内画像グリッド（2カラム表示）
 * ============================================ */
/* 明示的なクラス指定での2カラム */
.post-content .image-grid,
.post-content .photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.post-content .image-grid img,
.post-content .photo-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* ============================================
 * セクション内の画像を自動2カラム化
 * section.section内のp>imgを自動でグリッド表示
 * ============================================ */

/* セクション内の画像を含むpタグをflex子要素として扱う */
.post-content section.section {
    display: flex;
    flex-direction: column;
}

/* セクション内で画像を持つ段落が連続する場合、flexboxでラップ */
.post-content section.section .images-wrapper,
.post-content section.section .photo-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0;
}

/* 画像だけを含むpタグを横並びに（CSSのみでの自動検出） */
.post-content section.section p:has(> img:only-child) {
    flex: 0 0 calc(50% - 8px);
    margin-bottom: 16px;
}

/* 連続する画像pタグの親要素をflex-wrapに */
.post-content section.section:has(p > img:only-child) {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 16px;
}

/* 画像pタグ内のimgスタイル */
.post-content section.section p:has(> img:only-child) img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

/* テキストを含むpタグは幅100%を維持 */
.post-content section.section p:not(:has(> img:only-child)) {
    flex: 0 0 100%;
}

/* h2, h3も幅100%を維持 */
.post-content section.section h2,
.post-content section.section h3 {
    flex: 0 0 100%;
}

/* 画像ギャラリー用 */
.post-content .gallery,
.post-content .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.post-content .gallery img,
.post-content .wp-block-gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 連続するfigure/wp-block-imageを2カラムに */
.post-content figure + figure,
.post-content .wp-block-image + .wp-block-image {
    margin-top: 0;
}

/* セクション内の画像グリッド化（明示的クラス） */
.post-content .section-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0;
}

@media (max-width: 640px) {
    .post-content .image-grid,
    .post-content .photo-grid,
    .post-content .gallery,
    .post-content .wp-block-gallery,
    .post-content .section-images,
    .post-content section.section .images-wrapper,
    .post-content section.section .photo-section {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* モバイルでは画像を1カラムに */
    .post-content section.section:has(p > img:only-child) {
        flex-direction: column;
    }

    .post-content section.section p:has(> img:only-child) {
        flex: 0 0 100%;
    }
}

/* ============================================
 * コラムニスト・ライター紹介ボックス
 * （記事内インラインCSSを上書きするため !important を使用）
 * ============================================ */
.post-content .columnist-box,
.post-content .writer-box,
.post-content .author-intro {
    background: linear-gradient(135deg, #fff5f7 0%, #fef0f3 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin: 32px 0 !important;
    border: 1px solid #f5d5dc !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
}

/* アバター画像のpタグラッパー */
.post-content .writer-box > p:first-child,
.post-content .writer-box p:has(.writer-avatar) {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 8px auto !important;
    padding: 0 !important;
    position: relative !important;
}

/* アバター画像（srcがない場合のプレースホルダー付き） */
.post-content .writer-box .writer-avatar,
.post-content .writer-box > p:first-child > img,
.post-content .writer-box img:first-of-type {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #fff !important;
    box-shadow: 0 4px 12px rgba(212, 132, 139, 0.2) !important;
    display: block !important;
    /* 画像がない場合のプレースホルダー背景 */
    background: linear-gradient(135deg, #e8d4d8 0%, #f5e1e5 100%) !important;
    background-size: cover !important;
}

/* 画像srcがない場合、デフォルトアバターアイコンを表示 */
/* 複数のセレクターで確実にキャッチする */
.post-content .writer-box img:not([src]),
.post-content .writer-box img[src=""],
.post-content img.writer-avatar:not([src]),
.post-content img.writer-avatar[src=""],
/* 直接クラス指定（埋め込みCSSより優先度高い） */
.post-content .writer-avatar:not([src]),
.post-content .writer-avatar[src=""] {
    font-size: 0 !important;
    color: transparent !important;
    position: relative !important;
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    /* SVGデータURLでユーザーアイコンを表示 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4848b'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") !important;
    background-color: #f5e8eb !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 50% !important;
}

/* writer-info ラッパー */
.post-content .writer-box .writer-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    flex: none !important;
}

/* 肩書き/役割 */
.post-content .writer-box .writer-title {
    font-size: 11px !important;
    color: #d4848b !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
    order: -1 !important;
}

/* 名前 */
.post-content .writer-box .writer-name {
    font-family: "Noto Serif JP", serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 0 !important;
}

/* 汎用セレクタ（後方互換性） */
.columnist-box .role,
.writer-box .role {
    font-size: 11px;
    color: #d4848b;
    font-weight: 600;
}

.columnist-box .name,
.writer-box .name,
.author-intro .name {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.columnist-box .bio,
.writer-box .bio,
.author-intro .bio {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

/* PR・商品紹介セクション */
.pr-section,
.product-intro {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    margin: 32px 0;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pr-section h3,
.product-intro h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
    padding-left: 0;
    border-left: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pr-section h3::before,
.product-intro h3::before {
    content: "✨";
}

/* ハイライトボックス */
.highlight-box {
    background: linear-gradient(135deg, #fef9e7 0%, #fff5eb 100%);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 24px 0;
    border-left: 4px solid #f5c542;
}

.highlight-box p {
    margin: 0;
    color: #5a4d3a;
    line-height: 1.8;
}

/* セクション区切り */
.post-content section.section {
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px dashed #e8e8e8;
}

.post-content section.section:last-of-type {
    border-bottom: none;
}

/* FAQ スタイル */
.faq-item {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
}

.faq-question {
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.faq-question::before {
    content: "Q.";
    color: #d4848b;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-answer {
    color: #666;
    line-height: 1.8;
    padding-left: 24px;
}

.faq-answer::before {
    content: "A. ";
    color: #8C7B75;
    font-weight: 600;
}

/* 免責事項 */
.disclaimer {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 32px 0;
    font-size: 12px;
    color: #888;
    line-height: 1.8;
}

.disclaimer p {
    margin: 4px 0;
}

/* 記事内フッター */
.post-content .footer {
    display: none;
}

/* 記事内の不要なフッターロゴを非表示 */
.post-content .footer-logo {
    display: none;
}

/* ============================================
 * CTAボタン - モバイル最適化
 * スマホで押しやすく、目立つデザイン
 * ============================================ */

/* 汎用CTAボタン */
.post-content a[href*="click"]:not(.text-xs),
.post-content .cta-button,
.post-content a.cta,
.post-content .btn-cta,
/* インラインスタイルのボタンも対象 */
.post-content a[style*="background"]:not([style*="transparent"]) {
    display: inline-block;
    text-align: center;
    text-decoration: none !important;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* モバイル時のCTAボタン強化 */
@media (max-width: 640px) {
    /* ボタン風リンクを大きく */
    .post-content a[href*="click"]:not(.text-xs),
    .post-content .cta-button,
    .post-content a.cta,
    .post-content .btn-cta,
    .post-content a[style*="background"]:not([style*="transparent"]),
    .post-content a[style*="pink"],
    .post-content a[style*="gradient"] {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 16px auto !important;
        padding: 18px 24px !important;
        font-size: 17px !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 15px rgba(212, 132, 155, 0.35) !important;
    }

    /* ボタンの親要素のマージン調整 */
    .post-content p:has(> a[href*="click"]),
    .post-content p:has(> a[style*="background"]) {
        margin: 24px 0 !important;
        text-align: center !important;
    }
}

/* ============================================
 * セクション余白 - モバイル最適化
 * スマホでは余白を大幅に詰めてテンポよく
 * LPとしてコンバージョンを意識したデザイン
 * ============================================ */

@media (max-width: 640px) {
    /* ===== 点線の区切りを削除（流れを止めない） ===== */
    .post-content section.section {
        border-bottom: none !important;
        border-top: none !important;
    }

    .post-content hr {
        display: none !important;
    }

    /* ===== 基本余白の大幅削減 ===== */

    /* 記事全体のパディング */
    .post-content {
        padding: 0 12px !important;
    }

    /* セクション間の余白を最小化 */
    .post-content section.section {
        margin-bottom: 14px !important;
        padding-bottom: 6px !important;
    }

    /* 見出し周りの余白削減 */
    .post-content h2 {
        margin: 14px 0 8px 0 !important;
        font-size: 1.25rem !important;
        padding-bottom: 6px !important;
    }

    .post-content h3 {
        margin: 10px 0 6px 0 !important;
        font-size: 1.1rem !important;
        padding-left: 0.75rem !important;
    }

    /* 段落間の余白削減 */
    .post-content p {
        margin-bottom: 10px !important;
        line-height: 1.7 !important;
    }

    /* ===== ボタン周りの余白を詰める ===== */

    /* CTAラッパーの余白削除 */
    .post-content .cta-wrapper {
        margin: 8px 0 !important;
        padding: 0 !important;
    }

    .post-content p:has(> a[style*="background"]),
    .post-content p:has(> a[href*="click"]),
    .post-content p:has(> .cta-button),
    .post-content div:has(> a[style*="background"]),
    .post-content div:has(> .cta-button) {
        margin: 8px 0 !important;
        padding: 0 !important;
    }

    /* CTAボタン自体 */
    .post-content .cta-button,
    .post-content a[style*="background"],
    .post-content a[style*="pink"],
    .post-content a[style*="gradient"],
    .post-content a[href*="click"] {
        margin: 4px auto !important;
    }

    /* ===== ボックス系要素の余白削減 ===== */

    /* PRセクション */
    .pr-section,
    .product-intro {
        padding: 12px !important;
        margin: 10px 0 !important;
    }

    /* ハイライトボックス */
    .highlight-box {
        padding: 10px 12px !important;
        margin: 8px 0 !important;
    }

    /* ポイント・まとめ・目次ボックス */
    .point-box,
    .summary-box,
    .toc-box {
        padding: 10px !important;
        margin: 8px 0 !important;
    }

    /* コラムニスト/ライターボックス */
    .post-content .columnist-box,
    .post-content .writer-box,
    .post-content .author-intro {
        padding: 12px !important;
        margin: 10px 0 !important;
    }

    /* 引用・口コミボックス */
    .post-content blockquote {
        padding: 10px 12px !important;
        margin: 8px 0 !important;
    }

    /* 見出し付きボックス（こんな人に向いています等） */
    .post-content [style*="background-color"][style*="border-radius"],
    .post-content div[style*="background: linear-gradient"] {
        margin: 8px 0 !important;
        padding: 10px !important;
    }

    /* FAQ */
    .faq-item {
        padding: 10px !important;
        margin: 6px 0 !important;
    }

    .faq-question {
        margin-bottom: 6px !important;
        font-size: 14px !important;
    }

    .faq-answer {
        padding-left: 18px !important;
        font-size: 13px !important;
    }

    /* 2カラムレイアウト */
    .content-with-image {
        margin: 8px 0 !important;
        gap: 6px !important;
    }

    /* ===== Tailwind上書き（インラインスタイル対策） ===== */

    /* py-* (padding-y) 系の上書き */
    .post-content [class*="py-8"],
    .post-content [class*="py-10"],
    .post-content [class*="py-12"],
    .post-content [class*="py-16"] {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .post-content [class*="py-4"],
    .post-content [class*="py-6"] {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* my-* (margin-y) 系の上書き */
    .post-content [class*="my-8"],
    .post-content [class*="my-10"],
    .post-content [class*="my-12"],
    .post-content [class*="my-16"] {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .post-content [class*="my-4"],
    .post-content [class*="my-6"] {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* mb-* (margin-bottom) 系の上書き */
    .post-content [class*="mb-8"],
    .post-content [class*="mb-10"],
    .post-content [class*="mb-12"] {
        margin-bottom: 16px !important;
    }

    /* mt-* (margin-top) 系の上書き */
    .post-content [class*="mt-8"],
    .post-content [class*="mt-10"],
    .post-content [class*="mt-12"] {
        margin-top: 16px !important;
    }

    /* space-y-* 系の上書き */
    .post-content [class*="space-y-6"] > * + *,
    .post-content [class*="space-y-8"] > * + * {
        margin-top: 12px !important;
    }

    /* gap系の上書き */
    .post-content [class*="gap-6"],
    .post-content [class*="gap-8"] {
        gap: 12px !important;
    }

    /* ===== セクション区切り ===== */

    .post-content section.section:last-of-type {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }

    /* hrタグの余白 */
    .post-content hr {
        margin: 16px 0 !important;
    }

    /* ===== 画像周りの余白 ===== */

    .post-content img {
        margin: 8px 0 !important;
    }

    .post-content figure {
        margin: 8px 0 !important;
    }

    .post-content figure img {
        margin: 0 !important;
    }

    .post-content figcaption {
        margin-top: 4px !important;
        font-size: 11px !important;
    }

    /* ===== リスト系の余白 ===== */

    .post-content ul,
    .post-content ol {
        margin: 8px 0 !important;
        padding-left: 18px !important;
    }

    .post-content li {
        margin-bottom: 4px !important;
    }

    /* チェックリスト風 */
    .post-content ul[style*="list-style: none"] li,
    .post-content .checklist li {
        padding: 6px 0 !important;
    }

    /* ===== 免責事項 ===== */

    .disclaimer {
        padding: 10px 12px !important;
        margin: 10px 0 !important;
        font-size: 11px !important;
    }

    /* ===== コンテナ幅調整 ===== */

    .post-content .container,
    .post-content [class*="max-w-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================
 * 内部リンク・テキストリンクスタイル
 * 記事本文中のリンクを視覚的に分かりやすく
 * SEO: 隠しリンクにならないよう視認性を確保
 * ============================================ */

/* 記事本文内の通常テキストリンク */
.post-content a:not([style*="background"]):not(.cta-button):not([href*="click"]):not(.btn-cta):not(.writer-avatar):not([class*="button"]) {
    color: #0066cc;
    text-decoration: underline;
    text-decoration-color: rgba(0, 102, 204, 0.4);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: all 0.2s ease;
}

.post-content a:not([style*="background"]):not(.cta-button):not([href*="click"]):not(.btn-cta):not(.writer-avatar):not([class*="button"]):hover {
    color: #004499;
    text-decoration-color: #004499;
}

/* 内部リンク（同一サイト内）は少し目立たせる */
.post-content a[href*="life-advisor.site"]:not([style*="background"]):not(.cta-button):not([href*="click"]):not(.btn-cta) {
    color: #0066cc;
    text-decoration: underline;
    text-decoration-color: rgba(0, 102, 204, 0.5);
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
    background: linear-gradient(transparent 85%, rgba(0, 102, 204, 0.08) 85%);
    padding: 0 2px;
    border-radius: 2px;
}

.post-content a[href*="life-advisor.site"]:not([style*="background"]):not(.cta-button):not([href*="click"]):not(.btn-cta):hover {
    color: #004499;
    text-decoration-color: #004499;
    background: linear-gradient(transparent 85%, rgba(0, 102, 204, 0.15) 85%);
}

/* モバイルではタップしやすいよう少し太めのアンダーライン */
@media (max-width: 640px) {
    .post-content a:not([style*="background"]):not(.cta-button):not([href*="click"]):not(.btn-cta):not(.writer-avatar):not([class*="button"]) {
        text-decoration-thickness: 1.5px;
        text-underline-offset: 3px;
    }

    .post-content a[href*="life-advisor.site"]:not([style*="background"]):not(.cta-button):not([href*="click"]):not(.btn-cta) {
        text-decoration-thickness: 2px;
    }
}