/*
 Theme Name:   Cocoon Child - 退職とお金の教科書
 Theme URI:    https://taishoku-money.com
 Description:  Cocoon子テーマ。退職とお金の教科書用カスタマイズ。
 Author:       taisyoku-money
 Author URI:   https://taishoku-money.com
 Template:     cocoon-master
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  cocoon-child
*/

/* ========================================
 * カラースキーム（変数）
 * ======================================== */
:root {
    --color-primary: #2B6CB0;
    --color-secondary: #38A169;
    --color-accent: #E53E3E;
    --color-line: #06C755;
    --color-text: #2D3748;
    --color-bg: #FFFFFF;
    --color-bg-sub: #F7FAFC;
}

/* ========================================
 * 見出しスタイル
 * ======================================== */
.entry-content h2 {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5em;
}

.entry-content h3 {
    color: var(--color-secondary);
}

/* ========================================
 * テーブル基本スタイル
 * ======================================== */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    border: 1px solid #E2E8F0;
    padding: 12px;
    text-align: left;
}

.entry-content th {
    background: var(--color-bg-sub);
    color: var(--color-text);
    font-weight: 600;
}

/* ========================================
 * メインCTA（LINE登録）
 * ======================================== */
.custom-cta.cta-line {
    background: var(--color-bg-sub);
    border-left: 4px solid var(--color-line);
    padding: 24px;
    margin: 32px 0;
    border-radius: 8px;
}

.custom-cta .cta-heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}

.custom-cta .cta-text {
    color: var(--color-text);
    margin-bottom: 16px;
    line-height: 1.7;
}

.cta-button.cta-button-line {
    display: inline-block;
    background: var(--color-line);
    color: #FFFFFF !important;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.cta-button.cta-button-line:hover {
    opacity: 0.9;
}

/* ========================================
 * サブCTA（クリニック予約）
 * ======================================== */
.custom-cta.cta-clinic {
    background: #FFF5F5;
    border-left: 4px solid var(--color-accent);
    padding: 24px;
    margin: 32px 0;
    border-radius: 8px;
}

.cta-button.cta-button-clinic {
    display: inline-block;
    background: var(--color-accent);
    color: #FFFFFF !important;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.cta-button.cta-button-clinic:hover {
    opacity: 0.9;
}

/* ========================================
 * フローティングLINEボタン
 * ======================================== */
.floating-line-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-line);
    color: #FFFFFF !important;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.floating-line-btn:hover {
    opacity: 0.95;
    color: #FFFFFF !important;
}

.floating-line-btn-icon {
    font-size: 1.5rem;
}

.floating-line-btn-text {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .floating-line-btn {
        right: 16px;
        bottom: 16px;
        padding: 10px 16px;
    }

    .floating-line-btn-text {
        font-size: 0.85rem;
    }
}

/* ========================================
 * Step形式ブロック（howto記事用）
 * ======================================== */
.step-block {
    position: relative;
    padding-left: 48px;
    margin-bottom: 32px;
}

.step-block::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: -24px;
    width: 2px;
    background: var(--color-primary);
    opacity: 0.3;
}

.step-block:last-child::before {
    display: none;
}

.step-block-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.step-block-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.step-block-content {
    color: var(--color-text);
    line-height: 1.7;
}

/* Step用クラスを付けた見出し直後用 */
.entry-content .step-wrapper {
    margin-bottom: 24px;
}

/* ========================================
 * 比較テーブル（compare記事用）
 * ======================================== */
.compare-table {
    width: 100%;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    border: 1px solid #E2E8F0;
    padding: 12px;
    text-align: left;
}

.compare-table th {
    background: var(--color-bg-sub);
    font-weight: 600;
}

.compare-table .badge-recommend {
    display: inline-block;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

.compare-table .check-yes {
    color: var(--color-secondary);
    font-weight: 600;
}

.compare-table .check-no {
    color: var(--color-accent);
    font-weight: 600;
}

/* モバイル：横スクロール対応 */
@media (max-width: 768px) {
    .compare-table-wrapper {
        overflow-x: auto;
    }

    .compare-table {
        min-width: 400px;
    }
}

/* ========================================
 * 免責事項
 * ======================================== */
.custom-disclaimer {
    margin-top: 32px;
    padding: 16px;
    background: var(--color-bg-sub);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #718096;
}

.custom-disclaimer p {
    margin: 0;
    line-height: 1.6;
}