/* ==============================================
   article_wig-summer.css
   アクアドール コラム記事スタイル
   - 日本語記事の可読性最適化
   - SEO：視覚的見出し階層 / コントラスト比 WCAG AA準拠
   - コンバージョン：CTA設計
   ============================================== */

/* ------ 変数 ------ */
:root {
    --accent:        #e8390e;
    --accent-light:  #f5a67a;
    --accent-pale:   #fff3ee;
    --text-primary:  #1e1e1e;
    --text-body:     #3d3d3d;
    --text-muted:    #888;
    --bg-toc:        #f7f9fc;
    --bg-summary:    #fff8f0;
    --border-light:  #e2e8f0;
    --border-toc:    #d6e0f0;
    --shadow-sm:     0 2px 8px rgba(0,0,0,.06);
    --shadow-md:     0 5px 18px rgba(232,57,14,.35);
    --radius:        8px;
    --radius-lg:     10px;
    --transition:    0.18s ease;
}


/* ============================================
   1. ベース・コンテナ
   ============================================ */

#post.post {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3.5rem;
    color: var(--text-body);
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}


/* ============================================
   2. パンくずリスト
   ============================================ */

#post .pan_list {
    font-size: 0.78rem;
    color: var(--text-muted);
}

#post .pan_list a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

#post .pan_list a:hover {
    color: var(--text-body);
    text-decoration: underline;
}


/* ============================================
   3. ヘッダー（H1・ヒーロー画像・リード）
   ============================================ */

#post .post__header {
    margin-bottom: 2.5rem;
}

/* H1：記事タイトル
   SEO：h1 は 1 つのみ。大きく・太く・コントラスト高く */
#post .post__header__title {
    font-size: clamp(1.45rem, 4.5vw, 2rem);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    margin: 1.25rem 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--accent);
}

/* ヒーロー画像 */
#post .post__header picture img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
    margin-bottom: 1.75rem;
}

/* リード文 */
#post .post__header__text {
    font-size: 1rem;
    line-height: 1.95;
    letter-spacing: 0.04em;
    color: #3d3d3d;
}

#post .post__header__text span {
    display: inline; /* モバイル折り返し制御を維持 */
}


/* ============================================
   4. 要約ボックス（記事上部・まとめ共通）
   ============================================ */

#post .post__contents--matome {
    background: var(--bg-summary);
    border: 2px solid var(--accent-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
}

#post .post__contents__title--matome {
    font-size: 1.05rem;
    font-weight: 700;
    color: #c74a00;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--accent-light);
    letter-spacing: 0.03em;
}

/* まとめリスト：チェックマーク付き */
#post .post__contents__list--matome {
    list-style: none;
    padding: 0;
    margin: 0;
}

#post .post__contents__list--matome li {
    position: relative;
    padding-left: 1.6rem;
    line-height: 1.85;
    color: var(--text-body);
    letter-spacing: 0.03em;
}

#post .post__contents__list--matome li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}


/* ============================================
   5. 目次（TOC）
   ============================================ */

#post .post__nav {
    background: var(--bg-toc);
    border: 1px solid var(--border-toc);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
}

#post .post__nav__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
}

#post .post__nav__ol {
    padding-left: 1.5rem;
    margin: 0;
}

#post .post__nav__li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

#post .post__nav__li > ol {
    padding-left: 1.25rem;
    margin-top: 0.35rem;
}

#post .post__nav__li__li {
    margin-bottom: 0.3rem;
    font-size: 0.875rem;
}

#post .post__nav__a {
    color: #1a5fb4;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color var(--transition);
}

#post .post__nav__a span {
    display: inline;
}

#post .post__nav__a:hover {
    color: var(--accent);
    text-decoration: underline;
}


/* ============================================
   6. H2 見出し
   SEO：H2 は各セクションの主題。左ボーダー＋背景で
        スキャン読みしやすく
   ============================================ */

#post .post__contents__title {
    font-size: clamp(1.2rem, 3.5vw, 1.5rem);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1.1rem 0.75rem 1.25rem;
    background: linear-gradient(to right, var(--accent-pale), #fff);
    border-left: 5px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

#post .post__contents__title span {
    display: inline;
}


/* ============================================
   7. H3 見出し
   ============================================ */

#post .post__contents__title--kind {
    font-size: clamp(1rem, 3vw, 1.15rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 0.875rem;
    padding-left: 0.9rem;
    border-left: 3px solid var(--accent-light);
}

#post .post__contents__title--kind span {
    display: inline;
}


/* ============================================
   8. 本文テキスト
   ============================================ */

#post .post__contents__text {
    font-size: 1rem;
    line-height: 1.95;
    letter-spacing: 0.04em;
    color: var(--text-body);
    margin-bottom: 1.25rem;
}

#post .post__contents__text span {
    display: inline;
}

/* インライン強調：色を変えて視線を誘導 */
#post .post__contents__text .fw-bold,
#post .card-text .fw-bold {
    color: #c74a00;
}


/* ============================================
   9. テーブル
   ============================================ */

#post .post__contents__table {
    font-size: 0.9rem;
    line-height: 1.7;
    width: 100%;
    border-collapse: collapse;
}

#post .post__contents__table th {
    background: #2d3748;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.75rem 1rem;
    vertical-align: middle;
    text-align: center;
}

#post .post__contents__table td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    border: 1px solid var(--border-light);
    line-height: 1.75;
}

#post .post__contents__table td.fw-bold {
    color: var(--text-primary);
    font-weight: 700;
}

#post .post__contents__table tr:nth-child(even) td {
    background: #f7f9fc;
}

#post .post__contents__table tr:hover td {
    background: #eef2f8;
    transition: background var(--transition);
}


/* ============================================
   10. カード
   ============================================ */

#post .card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
}

#post .card-header {
    padding: 0.75rem 1.25rem;
    background: #f0f4f8;
    border-bottom: 1px solid var(--border-light);
}

/* グレーヘッダー（ポイント／アドバイス） */
#post .card-header[style*="background-color: #6c757d"] {
    background: linear-gradient(135deg, #4a5568, #2d3748) !important;
}

#post .card-body {
    padding: 1.125rem 1.5rem;
    background: #fff;
}

#post .card-text {
    font-size: 0.975rem;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: var(--text-body);
    margin-bottom: 0;
}

#post .card-title {
    letter-spacing: 0.03em;
    line-height: 1.5;
}

/* お客様の声カード（左ボーダー＋淡背景） */
#post #h04-04 .card {
    border: 1px solid var(--accent-light);
    border-left: 4px solid var(--accent-light);
    background: #fffaf7;
}

#post #h04-04 .card .card-body {
    background: #fffaf7;
}

#post #h04-04 .card .card-text {
    font-style: italic;
    color: #4a4a4a;
}


/* ============================================
   11. 番号付きリスト（相談TOP5）
   ============================================ */

#post ol.p-0 {
    list-style: none;
    padding: 0;
    counter-reset: rank-counter;
    margin-bottom: 1.25rem;
}

#post ol.p-0 .list-group-item {
    counter-increment: rank-counter;
    position: relative;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: #fff;
    line-height: 1.75;
}

#post ol.p-0 .list-group-item::before {
    content: counter(rank-counter);
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.65rem;
    height: 1.65rem;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================
   12. CTAボタン
   ============================================ */

#post .post__contents__text.row a,
#post .post__contents--matome .post__contents__text.row a {
    text-decoration: none;
    display: block;
}

#post .post__contents__text.row a .btn.btn-primary,
#post .post__contents--matome .post__contents__text.row a .btn.btn-primary {
    background: linear-gradient(135deg, #ff6b2b 0%, #e8390e 100%);
    border: none;
    border-radius: var(--radius);
    padding: 1.05rem 1.75rem;
    font-size: 1rem !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: normal;
    line-height: 1.55;
}

#post .post__contents__text.row a .btn.btn-primary::after,
#post .post__contents--matome .post__contents__text.row a .btn.btn-primary::after {
    content: "→";
    flex-shrink: 0;
    font-size: 1.15em;
}

#post .post__contents__text.row a:hover .btn.btn-primary,
#post .post__contents--matome .post__contents__text.row a:hover .btn.btn-primary {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 10px 28px rgba(232,57,14,.46);
    background: linear-gradient(135deg, #ff7d42 0%, #f04010 100%);
}

#post .post__contents__text.row a:active .btn.btn-primary,
#post .post__contents--matome .post__contents__text.row a:active .btn.btn-primary {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 3px 10px rgba(232,57,14,.28);
}


/* ============================================
   13. FAQ セクション
   ============================================ */

/* Q 見出し内の H3（border-left を無効化して card-header に合わせる） */
#post #h06 .card-header .post__contents__title--kind {
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--text-primary);
    border-left: none;
    padding-left: 0;
    margin: 0;
    line-height: 1.65;
    letter-spacing: 0.03em;
}

/* "Q. " はHTML側テキストに含まれるため ::first-letter で色付け */
#post #h06 .card-header .post__contents__title--kind::first-letter {
    color: var(--accent);
    font-weight: 800;
}


/* ============================================
   14. テキスト装飾ユーティリティ
   ============================================ */

#post .text-muted {
    font-size: 0.875rem;
    color: var(--text-muted) !important;
    display: block;
    margin-top: 0.5rem;
}


/* ============================================
   15. アクセシビリティ
   ============================================ */

#post a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}


/* ============================================
   16. レスポンシブ（〜768px）
   ============================================ */

@media (max-width: 768px) {
    #post.post {
        padding: 1rem 0.875rem 2.5rem;
    }

    #post .post__contents__title {
        font-size: 1.15rem;
        padding: 0.6rem 0.875rem 0.6rem 1rem;
        margin-top: 2.25rem;
    }

    #post .post__contents__title--kind {
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    #post .post__contents--matome,
    #post .post__nav {
        padding: 1.25rem;
    }

    #post .post__contents__table {
        font-size: 0.82rem;
    }

    #post .post__contents__table th,
    #post .post__contents__table td {
        padding: 0.55rem 0.6rem;
    }

    #post .card-body {
        padding: 1rem;
    }

    #post .post__contents__text.row a .btn.btn-primary,
    #post .post__contents--matome .post__contents__text.row a .btn.btn-primary {
        font-size: 0.925rem !important;
        padding: 0.9rem 1.125rem;
    }
}


/* ============================================
   17. 印刷
   ============================================ */

@media print {
    #post .post__nav,
    #post .post__contents__text.row,
    #post .post__contents--matome .post__contents__text.row {
        display: none;
    }

    #post .post__contents__title,
    #post .post__contents__title--kind {
        border-left-color: #000;
        background: none;
        color: #000;
    }
}