/* ===================================
   kaitori-page.css
   Default Page Styles (利用規約, 会社概要 etc.)
   ALL properties use !important to override LiteWord parent theme
   Hardcoded color values only (no CSS variables)
   =================================== */

/* ===== Hide parent theme header/footer ===== */
body.kj-page #masthead,
body.kj-page .site-header,
body.kj-page #colophon,
body.kj-page .site-footer,
body.kj-page .site-branding,
body.kj-page .main-navigation {
    display: none !important;
}

/* ===== Page Layout ===== */
.kj-page-default {
    margin-top: 56px !important;
    min-height: 60vh !important;
}

.has-campaign .kj-page-default {
    margin-top: 96px !important;
}

/* ===== Page Article ===== */
.kj-page-article {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 32px 16px 0 !important;
}

/* ===== Page Title ===== */
.kj-page-title {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1B5E7D !important;
    line-height: 1.4 !important;
    margin-bottom: 32px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #f0ebe3 !important;
}

/* ===== Page Content ===== */
.kj-page-content {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-size: .95rem !important;
    line-height: 1.8 !important;
    color: #2D2D2D !important;
}

.kj-page-content p {
    margin-bottom: 1.5em !important;
}

.kj-page-content h2 {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1B5E7D !important;
    margin-top: 2.5em !important;
    margin-bottom: .8em !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f0ebe3 !important;
    line-height: 1.4 !important;
}

.kj-page-content h3 {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #2D2D2D !important;
    margin-top: 2em !important;
    margin-bottom: .6em !important;
    line-height: 1.4 !important;
}

.kj-page-content ul,
.kj-page-content ol {
    margin-bottom: 1.5em !important;
    padding-left: 1.5em !important;
}

.kj-page-content li {
    margin-bottom: .5em !important;
    line-height: 1.7 !important;
}

/* ===== Table (会社概要 etc.) ===== */
.kj-page-content table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin-bottom: 2em !important;
    font-size: .9rem !important;
}

.kj-page-content th,
.kj-page-content td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0ebe3 !important;
    text-align: left !important;
    vertical-align: top !important;
    line-height: 1.7 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.kj-page-content th {
    font-weight: 700 !important;
    color: #1B5E7D !important;
    width: 30% !important;
    background: #F5F0E8 !important;
}

.kj-page-content td {
    color: #2D2D2D !important;
}

/* ===== Links ===== */
.kj-page-content a:not([class*="kj-btn"]):not([class*="kj-fc-"]):not([class*="kj-worry-link"]):not([class*="kj-all-link"]):not([class*="kj-voices-all-link"]):not([class*="kj-column-all-link"]) {
    color: #0066CC !important;
    text-decoration: underline !important;
}

.kj-page-content a:not([class*="kj-btn"]):not([class*="kj-fc-"]):not([class*="kj-worry-link"]):not([class*="kj-all-link"]):not([class*="kj-voices-all-link"]):not([class*="kj-column-all-link"]):hover {
    color: #004499 !important;
}

.kj-page-content a:not([class*="kj-btn"]):not([class*="kj-fc-"]):not([class*="kj-worry-link"]):not([class*="kj-all-link"]):not([class*="kj-voices-all-link"]):not([class*="kj-column-all-link"]):visited {
    color: #551A8B !important;
}

/* ===== Shortcode Grids (買取実績・お客様の声) ===== */
.kj-page-content .kj-result-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin: 2em 0 !important;
}

.kj-page-content .kj-voices-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 2em 0 !important;
}

.kj-page-content .kj-voices-grid .kj-voice-card {
    text-decoration: none !important;
}

@media (min-width: 769px) {
    .kj-page-content .kj-result-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .kj-page-content .kj-voices-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================================
   FAQ Accordion
   kaitori-components.css のスタイルをページ内でも有効にする
   ========================================================= */
.kj-page-content .kj-faq-list {
    max-width: 100% !important;
    margin: 0 0 2em !important;
}

.kj-page-content .kj-faq-item {
    border-bottom: 1px solid #e8e0d4 !important;
    padding: 18px 0 !important;
}

.kj-page-content .kj-faq-q {
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    color: #2D2D2D !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.kj-page-content .kj-faq-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #1B5E7D !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.kj-page-content .kj-faq-a {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding-left: 38px !important;
    font-size: .85rem !important;
    color: #555 !important;
    line-height: 1.8 !important;
}

/* FAQ内のリンクもコンテンツリンク色を維持 */
.kj-page-content .kj-faq-a a {
    color: #0066CC !important;
    text-decoration: underline !important;
}

.kj-page-content .kj-faq-a a:hover {
    color: #004499 !important;
}

/* =========================================================
   FAQ Accordion (native <details>/<summary>)
   JS不要。ブロックエディタのカスタムHTMLにそのまま貼り付けて動作
   ========================================================= */
.kj-page-content .kj-faq-native {
    max-width: 100% !important;
    margin: 0 0 2em !important;
}

.kj-page-content .kj-faq-native details {
    border-bottom: 1px solid #e8e0d4 !important;
}

.kj-page-content .kj-faq-native summary {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 18px 0 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #2D2D2D !important;
    cursor: pointer !important;
    list-style: none !important;
}

.kj-page-content .kj-faq-native summary::-webkit-details-marker {
    display: none !important;
}

.kj-page-content .kj-faq-native summary::before {
    content: 'Q' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: #1B5E7D !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
}

.kj-page-content .kj-faq-native summary::after {
    content: '+' !important;
    margin-left: auto !important;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    color: #999 !important;
    transition: transform .2s !important;
}

.kj-page-content .kj-faq-native details[open] summary::after {
    content: '−' !important;
}

.kj-page-content .kj-faq-native .kj-faq-answer {
    padding: 0 0 18px 38px !important;
    font-size: .85rem !important;
    color: #555 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

.kj-page-content .kj-faq-native .kj-faq-answer a {
    color: #0066CC !important;
    text-decoration: underline !important;
}

/* ===== Table: border fix ===== */
.kj-page-content table,
.kj-page-article table {
    border-top: 1px solid #d5cfc7 !important;
    border-bottom: 1px solid #d5cfc7 !important;
}

.kj-page-content th,
.kj-page-content td,
.kj-page-article th,
.kj-page-article td {
    border-bottom: 1px solid #d5cfc7 !important;
}

/* =========================================================
   LiteWord Mail Form (.lw_mail_form)
   親テーマのフォームスタイルをブランドに合わせて上書き
   ========================================================= */

/* フォーム全体 */
.kj-page-content .lw_mail_form {
    margin-top: 2em !important;
}

/* 各フォームグループ */
.kj-page-content .lw_mail_form .form_group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #f0ebe3 !important;
}

.kj-page-content .lw_mail_form .form_group:first-of-type {
    border-top: 1px solid #f0ebe3 !important;
}

/* ラベル */
.kj-page-content .lw_mail_form .label_in {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kj-page-content .lw_mail_form .label_in label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: #2D2D2D !important;
}

/* 必須バッジ */
.kj-page-content .lw_mail_form .required.is-required {
    display: inline-block !important;
    background: #C4873B !important;
    color: #fff !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    line-height: 1.4 !important;
}

/* 入力欄コンテナ */
.kj-page-content .lw_mail_form .form_in {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* テキスト入力・テキストエリア */
.kj-page-content .lw_mail_form input[type="text"],
.kj-page-content .lw_mail_form input[type="email"],
.kj-page-content .lw_mail_form input[type="tel"],
.kj-page-content .lw_mail_form textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: .95rem !important;
    color: #2D2D2D !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: border-color .2s !important;
}

.kj-page-content .lw_mail_form input[type="text"]:focus,
.kj-page-content .lw_mail_form input[type="email"]:focus,
.kj-page-content .lw_mail_form input[type="tel"]:focus,
.kj-page-content .lw_mail_form textarea:focus {
    border-color: #1B5E7D !important;
    outline: none !important;
}

.kj-page-content .lw_mail_form textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

/* 補足テキスト */
.kj-page-content .lw_mail_form .supplement_text {
    font-size: .8rem !important;
    color: #999 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* チェックボックス */
.kj-page-content .lw_mail_form .checkbox_in {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 16px !important;
}

.kj-page-content .lw_mail_form .checkbox_in label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: .9rem !important;
    color: #2D2D2D !important;
    cursor: pointer !important;
    font-weight: 400 !important;
}

.kj-page-content .lw_mail_form .checkbox_in input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #1B5E7D !important;
}

/* 送信ボタン */
.kj-page-content .lw_mail_form input[type="submit"],
.kj-page-content .lw_mail_form button[type="submit"],
.kj-page-content .lw_mail_form .submit_btn,
.kj-page-content .lw_mail_form .form_submit_btn {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 24px auto 0 !important;
    padding: 16px !important;
    background: #C4873B !important;
    color: #fff !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(196,135,59,.3) !important;
    transition: background .2s !important;
    text-align: center !important;
    text-decoration: none !important;
}

.kj-page-content .lw_mail_form input[type="submit"]:hover,
.kj-page-content .lw_mail_form button[type="submit"]:hover,
.kj-page-content .lw_mail_form .submit_btn:hover,
.kj-page-content .lw_mail_form .form_submit_btn:hover {
    background: #b3762f !important;
}

/* 送信ボタン下の余白 */
.kj-page-content .lw_mail_form {
    margin-bottom: 56px !important;
    padding-bottom: 40px !important;
}

/* =========================================================
   PC: Form layout (横並び)
   ========================================================= */
@media (min-width: 769px) {
    .kj-page-content .lw_mail_form .form_group {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .kj-page-content .lw_mail_form .label_in {
        width: 200px !important;
        min-width: 200px !important;
        padding-top: 10px !important;
    }

    .kj-page-content .lw_mail_form .form_in {
        flex: 1 !important;
    }
}

/* =========================================================
   Final CTA (background image)
   kaitori-top.css からの複製 — 固定ページでも使えるようにする
   ========================================================= */
.kj-page-content .kj-final-cta {
    position: relative !important;
    overflow: hidden !important;
    padding: 56px 20px !important;
    text-align: center !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: 3em !important;
    margin-bottom: 0 !important;
}

.kj-page-content .kj-final-cta-bg {
    position: absolute !important;
    inset: 0 !important;
}

.kj-page-content .kj-final-cta-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(.3) !important;
    display: block !important;
}

.kj-page-content .kj-final-cta-inner {
    position: relative !important;
    z-index: 2 !important;
}

.kj-page-content .kj-final-cta-copy {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

.kj-page-content .kj-final-cta-sub {
    color: rgba(255,255,255,.85) !important;
    font-size: .85rem !important;
    margin-bottom: 28px !important;
}

.kj-page-content .kj-final-cta .kj-campaign-micro {
    margin-bottom: 16px !important;
}

.kj-page-content .kj-final-cta .kj-cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
}

.kj-page-content .kj-final-cta .kj-cta-micro {
    color: rgba(255,255,255,.6) !important;
    font-size: .8rem !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   Mid CTA (teal gradient)
   kaitori-components.css に定義済みだがページスタイルの上書き対策
   ========================================================= */
.kj-page-content .kj-mid-cta {
    padding: 36px 16px !important;
    text-align: center !important;
    background: linear-gradient(160deg, #1B5E7D 0%, #237a9c 100%) !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: 3em !important;
    margin-bottom: 0 !important;
}

.kj-page-content .kj-mid-cta h2 {
    color: #fff !important;
    border-bottom: none !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    font-size: 1.3rem !important;
}

.kj-page-content .kj-mid-cta .kj-mid-cta-text {
    font-size: .9rem !important;
    color: rgba(255,255,255,.85) !important;
    margin-bottom: 16px !important;
}

.kj-page-content .kj-mid-cta .kj-cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
}

.kj-page-content .kj-mid-cta .kj-cta-micro {
    color: rgba(255,255,255,.6) !important;
    font-size: .8rem !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

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

    .has-campaign .kj-page-default {
        margin-top: 124px !important;
    }

    .kj-page-article {
        padding: 48px 40px 0 !important;
    }

    .kj-page-title {
        font-size: 1.75rem !important;
    }

    .kj-page-content {
        font-size: 1rem !important;
    }

    .kj-page-content h2 {
        font-size: 1.4rem !important;
    }

    .kj-page-content th,
    .kj-page-content td {
        padding: 16px 20px !important;
    }

    .kj-page-content .kj-final-cta {
        padding: 80px 40px !important;
    }

    .kj-page-content .kj-final-cta-copy {
        font-size: 2.25rem !important;
    }

    .kj-page-content .kj-final-cta .kj-cta-buttons,
    .kj-page-content .kj-mid-cta .kj-cta-buttons {
        flex-direction: row !important;
        justify-content: center !important;
        max-width: unset !important;
    }
}