/* ==========================================
   モバイル画面でのタイトル中央揃え
   ========================================== */

/* スマートフォン向け（768px以下） */
@media (max-width: 768px) {
    /* すべての見出しタグを中央揃え */
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
    }
    
    /* セクションタイトル関連のクラス */
    .section-title,
    .section-title__en,
    .section-title__ja,
    .section-subtitle {
        text-align: center !important;
        display: block;
        width: 100%;
    }
    
    /* ヒーローセクションのタイトル */
    .hero__title,
    .hero__subtitle,
    .hero-title,
    .hero-subtitle {
        text-align: center !important;
        display: block !important;
        width: 100%;
    }
    
    /* フェイスデザインセクション */
    .face-design-title {
        text-align: center !important;
    }
    
    /* 料金セクションのタイトル */
    .pricing__title,
    .pricing__subtitle,
    .price-card__title {
        text-align: center !important;
    }
    
    /* その他のタイトルクラス */
    .campaign-title,
    .features-title,
    .flow-title,
    .faq-title,
    .access-title,
    .contact-title {
        text-align: center !important;
    }
    
    /* ページタイトル */
    .page-title {
        text-align: center !important;
    }
    
    /* 各セクションの内部タイトル */
    .card-title,
    .item-title,
    .list-title {
        text-align: center !important;
    }
}

/* タブレット向け（767px以下）の調整 */
@media (max-width: 767px) {
    /* セクションタイトルの追加調整 */
    .section-title {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* タイトルの装飾要素も中央揃え */
    .section-title::before,
    .section-title::after,
    .hero__title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* より小さいスマートフォン向け（480px以下） */
@media (max-width: 480px) {
    /* フォントサイズの調整と中央揃えの維持 */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* すべてのタイトルを確実に中央揃え */
    h1, h2, h3, h4, h5, h6,
    .section-title,
    .hero__title,
    .page-title {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}