/**
 * Readability Optimization
 * 全デバイスで読みやすさを最優先したタイポグラフィ改善
 * - 改行後1〜2文字孤立の防止
 * - 行間の統一
 * - モバイルでの横幅最大化
 * - 文字サイズの統一
 */

/* ===== 基本的な読みやすさ設定 ===== */
body {
    word-break: keep-all; /* 日本語の自然な改行 */
    line-break: strict; /* 句読点が行頭に来ない */
    overflow-wrap: break-word; /* 長い英単語の処理 */
}

/* ===== 行間の統一 ===== */
p, li, span {
    line-height: 1.75; /* 統一的な行間 */
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4; /* 見出しは少し詰める */
    word-break: keep-all;
}

/* ===== モバイル最適化 ===== */
@media (max-width: 576px) {
    /* コンテナのpadding縮小で横幅最大化 */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* セクションのpadding最適化 */
    section {
        padding: 60px 0 !important;
    }
    
    /* 本文の行間をさらに広げる */
    p {
        line-height: 1.8;
        font-size: 15px; /* わずかに小さく調整して1行の文字数を増やす */
    }
    
    /* 見出しの調整 */
    h2 {
        font-size: 26px !important; /* 少し小さく */
        line-height: 1.4;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.4;
    }
    
    h4 {
        font-size: 17px !important;
        line-height: 1.5;
    }
    
    /* リストアイテムの最適化 */
    li {
        line-height: 1.75;
        font-size: 15px;
    }
}

/* ===== タブレット最適化 ===== */
@media (min-width: 577px) and (max-width: 968px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    p {
        line-height: 1.75;
        font-size: 16px;
    }
    
    h2 {
        font-size: 30px !important;
        line-height: 1.4;
    }
    
    h3 {
        font-size: 22px !important;
        line-height: 1.4;
    }
}

/* ===== デスクトップ最適化 ===== */
@media (min-width: 969px) {
    p {
        line-height: 1.75;
        font-size: 16px;
    }
    
    h2 {
        font-size: 36px;
        line-height: 1.4;
    }
    
    h3 {
        font-size: 24px;
        line-height: 1.4;
    }
}

/* ===== 特定セクションの調整 ===== */

/* 問題セクション */
.problem-title {
    word-break: keep-all !important;
    line-height: 1.4 !important;
}

.problem-description {
    line-height: 1.75 !important;
}

/* 誤解セクション */
.misconception-title {
    word-break: keep-all !important;
    line-height: 1.4 !important;
}

.misconception-detail p {
    line-height: 1.75 !important;
}

/* アコーディオンタイトル */
.accordion-title {
    word-break: keep-all !important;
    line-height: 1.4 !important;
}

/* CTAテキスト */
.cta-title {
    word-break: keep-all !important;
    line-height: 1.4 !important;
}

/* FAQ */
.faq-item span {
    word-break: keep-all !important;
    line-height: 1.5 !important;
}

.faq-item p {
    line-height: 1.75 !important;
}

/* プロセスセクション */
.step-title {
    word-break: keep-all !important;
    line-height: 1.4 !important;
}

.step-description {
    line-height: 1.75 !important;
}

/* 顧客の声 */
.testimonial-text {
    line-height: 1.8 !important;
}

/* ===== 孤立文字防止（追加ルール） ===== */

/* 句読点が行頭に来ないようにする */
p::after, span::after, li::after {
    content: "";
    display: inline-block;
    width: 0;
}

/* 短い単語を前の行に保持 */
@media (max-width: 576px) {
    /* 助詞など短い言葉の扱い */
    strong, em {
        white-space: nowrap; /* 強調部分は改行しない */
    }
}
