/* ============================================================
   お片付けプランナー 分割払いページ専用スタイル
   morisaki変更 2026-06-01 新規作成 → 同日 既存デザインへ整合（全面改訂）
   依存: main-kplan.css / main-kplan-sm.css
        - CSS変数（カラー・radius・shadow）
        - .btn / .btn-primary / .btn-tel-hero / .btn-line / .btn-label-small / .btn-tel-number
        - .faq-list / .faq-item / .faq-question / .faq-answer（FAQは既存コンポーネントを流用）
   ※ page.php の .page-main > .section-inner（max 1100px）内にレンダリングされるため、
     当ページ側では max-width を再指定せず、余白とブロック装飾のみを担当する。
   ============================================================ */

/* === 全体コンテナ === */
.bunkatsu-page {
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 1rem;
    line-height: 1.9;
}

.bunkatsu-page section {
    margin-bottom: 56px;
}

/* セクション見出し（既存 .section-title のトーンに合わせ中央寄せ＋アクセントバー） */
.bunkatsu-page h2 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-primary-dk);
    text-align: center;
    line-height: 1.45;
    margin: 0 0 28px;
}

.bunkatsu-page h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 14px auto 0;
    background: var(--color-accent);
    border-radius: 2px;
}

/* 小見出し（左アクセントバー：payment-card のトーンを踏襲） */
.bunkatsu-page h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-dk);
    line-height: 1.5;
    margin: 36px 0 16px;
    padding-left: 14px;
    border-left: 4px solid var(--color-accent);
}

.bunkatsu-page p {
    margin: 0 0 16px;
    color: var(--color-text);
}

.bunkatsu-page p:last-child {
    margin-bottom: 0;
}

.bunkatsu-page strong {
    color: var(--color-accent-dk);
    font-weight: 700;
}

/* 補足ノート */
.bunkatsu-page p.bunkatsu-note {
    background: var(--color-primary-lt);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--color-text-sub);
    margin: 20px 0 0;
}

.bunkatsu-page p.bunkatsu-note strong {
    color: var(--color-primary-dk);
}

/* === ファーストビュー（ページ見出し＝ヒーロー：既存 .hero / .area-hero のトーンを踏襲） === */
/* page.php のプレーンなページタイトルはヒーロー見出しに統合するため非表示
   （bunkatsu-page.css は当ページのみ読み込まれるため影響範囲は分割払いページに限定） */
.page-title {
    display: none;
}

/* 固定ページ（エリアページ以外）のヒーローは白背景。
   ※ トップページ .hero / エリアページ .area-hero はネイビーのまま（別クラス・別CSSで未変更） */
.bunkatsu-hero {
    background: var(--color-white);
    color: var(--color-text);
    padding: 48px 44px;
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.bunkatsu-hero-inner {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: center;
}

.bunkatsu-hero-content {
    min-width: 0;
}

/* バッジ（白背景向け：ライトネイビーのピル） */
.bunkatsu-hero-badge {
    display: inline-block;
    background: var(--color-primary-lt);
    border: 1px solid var(--color-border);
    color: var(--color-primary-dk);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 999px;
    margin: 0 0 18px;
    letter-spacing: 0.05em;
}

/* 見出し（h1：既存 .hero-title のトーン／白背景向けにネイビー文字） */
.bunkatsu-hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary-dk);
    margin: 0 0 20px;
    letter-spacing: 0.02em;
}

.bunkatsu-hero-title-accent {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-white);
    padding: 2px 12px;
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.bunkatsu-hero-lead {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--color-text);
    margin: 0 0 14px;
    max-width: 600px;
}

.bunkatsu-hero-lead strong {
    color: var(--color-accent-dk);
}

/* ミニ訴求バッジ（既存 .badge-item を流用しつつ、白背景向けに文字色を上書き） */
.bunkatsu-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 20px 0 0;
}

.bunkatsu-hero-badges .badge-item {
    color: var(--color-primary-dk);
    font-weight: 600;
}

/* マスコット（既存 .hero-mascot と同挙動：ふわっと浮遊） */
.bunkatsu-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bunkatsu-hero-mascot {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25));
    animation: heroMascotFloat 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .bunkatsu-hero-mascot {
        animation: none;
    }
}

/* === CTAエリア（既存 .btn コンポーネントを流用しレイアウトのみ担当） === */
.bunkatsu-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    margin-top: 28px;
}

.bunkatsu-cta .btn {
    min-width: 280px;
}

/* ヒーロー内のCTAは左寄せ（見出し・本文と揃える） */
.bunkatsu-hero .bunkatsu-cta {
    justify-content: flex-start;
    margin-top: 24px;
}

/* === 比較表 === */
.bunkatsu-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 24px 0 0;
    border-radius: var(--radius-md);
}

.bunkatsu-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 600px;
}

.bunkatsu-table th,
.bunkatsu-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
    line-height: 1.7;
}

.bunkatsu-table thead th {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    text-align: center;
}

.bunkatsu-table thead th small {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    margin-top: 4px;
    opacity: 0.85;
}

.bunkatsu-table tbody th {
    background: var(--color-primary-lt);
    color: var(--color-primary-dk);
    font-weight: 700;
    width: 22%;
}

.bunkatsu-table tbody td small {
    color: var(--color-text-lite);
    font-size: 0.8rem;
}

.bunkatsu-table tbody tr:last-child th,
.bunkatsu-table tbody tr:last-child td {
    border-bottom: none;
}

/* === おすすめリスト（payment-card のトーン：白カード＋左アクセント） === */
.bunkatsu-target-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    gap: 16px;
}

.bunkatsu-target-list > li {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    padding: 20px 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.bunkatsu-target-list > li strong {
    display: block;
    font-size: 1.05rem;
    color: var(--color-primary-dk);
    margin-bottom: 6px;
}

.bunkatsu-target-list > li p {
    font-size: 0.92rem;
    color: var(--color-text-sub);
    margin: 0;
}

/* === STEPリスト === */
.bunkatsu-step-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 16px;
}

.bunkatsu-step-list > li {
    position: relative;
    padding: 20px 24px 20px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.bunkatsu-step-num {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.bunkatsu-step-list > li strong {
    display: block;
    font-size: 1.1rem;
    color: var(--color-primary-dk);
    margin: 0 0 8px;
}

.bunkatsu-step-list > li p {
    font-size: 0.92rem;
    color: var(--color-text-sub);
    margin: 0;
}

/* === プライバシー配慮ボックス === */
.bunkatsu-privacy {
    background: var(--color-primary-lt);
    padding: 24px 28px;
    border-radius: var(--radius-md);
    margin-top: 32px;
}

.bunkatsu-privacy h3 {
    border-left: none;
    padding-left: 0;
    margin-top: 0;
}

/* === FAQ === */
/* 既存 .faq-list / .faq-item / .faq-question / .faq-answer（main-kplan.css）を流用。
   当ページでは details ベースのアコーディオンとして再利用するため固有指定は不要。 */
.bunkatsu-page .faq-list {
    margin-top: 24px;
}

/* === 地域密着セクション === */
.bunkatsu-local {
    background: var(--color-bg-gray);
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

/* === 料金透明性セクション === */
.bunkatsu-link-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

.bunkatsu-link-list li {
    margin-bottom: 8px;
}

.bunkatsu-link-list a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bunkatsu-link-list a:hover {
    color: var(--color-accent-dk);
}

/* インラインリンク（本文・ノート内） */
.bunkatsu-page p a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bunkatsu-page p a:hover {
    color: var(--color-accent-dk);
}

/* === 流れリスト（番号付き丸：flow-num のネイビーを踏襲） === */
.bunkatsu-process-list {
    list-style: none;
    counter-reset: process;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    gap: 16px;
}

.bunkatsu-process-list > li {
    counter-increment: process;
    position: relative;
    padding: 22px 24px 22px 76px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.bunkatsu-process-list > li::before {
    content: counter(process);
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-primary);
    color: var(--color-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    font-feature-settings: 'tnum';
}

.bunkatsu-process-list > li strong {
    display: block;
    font-size: 1.1rem;
    color: var(--color-primary-dk);
    margin-bottom: 6px;
}

.bunkatsu-process-list > li p {
    font-size: 0.92rem;
    color: var(--color-text-sub);
    margin: 0;
}

/* === 末尾CTA（既存 .cta-section のネイビー→オレンジのトーンを踏襲） === */
.bunkatsu-final-cta {
    background: linear-gradient(135deg, var(--color-primary-dk) 0%, var(--color-primary) 60%, var(--color-primary-gradient-end) 100%);
    color: var(--color-white);
    padding: 48px 32px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-card);
}

.bunkatsu-final-cta h2 {
    color: var(--color-white);
}

.bunkatsu-final-cta h2::after {
    background: var(--color-accent);
}

.bunkatsu-final-cta p {
    color: rgba(255,255,255,0.95);
    text-align: left;
    max-width: 720px;
    margin: 0 auto 16px;
}

.bunkatsu-final-cta strong {
    color: var(--color-accent-lt);
}

/* === スマホ対応（既存サイトのブレークポイント 786px に統一） === */
@media (max-width: 786px) {
    .bunkatsu-page {
        font-size: 0.95rem;
    }
    .bunkatsu-page section {
        margin-bottom: 44px;
    }
    .bunkatsu-page h2 {
        font-size: 1.45rem;
    }
    .bunkatsu-page h3 {
        font-size: 1.1rem;
    }
    .bunkatsu-hero {
        padding: 28px 20px;
    }
    .bunkatsu-hero-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* SPではマスコットを見出し上に配置（第一印象でキャラ提示） */
    .bunkatsu-hero-image {
        order: -1;
        max-width: 190px;
        margin: 0 auto;
    }
    .bunkatsu-hero-mascot {
        max-width: 190px;
    }
    .bunkatsu-hero-badge {
        margin-bottom: 14px;
    }
    .bunkatsu-hero-title {
        font-size: 1.5rem;
        margin-bottom: 16px;
    }
    .bunkatsu-hero-title-accent {
        font-size: 1rem;
    }
    .bunkatsu-hero-lead {
        font-size: 0.92rem;
    }
    .bunkatsu-cta {
        flex-direction: column;
        gap: 12px;
    }
    .bunkatsu-hero .bunkatsu-cta {
        justify-content: stretch;
    }
    .bunkatsu-cta .btn {
        width: 100%;
        min-width: 0;
    }
    .bunkatsu-table {
        font-size: 0.85rem;
        min-width: 480px;
    }
    .bunkatsu-table th,
    .bunkatsu-table td {
        padding: 10px 12px;
    }
    .bunkatsu-target-list > li,
    .bunkatsu-step-list > li {
        padding: 18px 18px;
    }
    .bunkatsu-privacy,
    .bunkatsu-local {
        padding: 24px 18px;
    }
    .bunkatsu-process-list > li {
        padding: 18px 18px 18px 64px;
    }
    .bunkatsu-process-list > li::before {
        top: 16px;
        left: 14px;
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
    }
    .bunkatsu-final-cta {
        padding: 36px 18px;
    }
}