/* テキスト表示最適化CSS */

/* 横スクロールのみ防止 */
* {
    overflow-x: hidden;
}

/* FAQ回答部分の完全表示 */
.faq-answer {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

.faq-answer.active {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 20px !important;
}

/* テキストコンテンツの自然な流れ */
.science-content,
.texture-content,
.ingredients-content,
.manufacturing-content,
.testimonials-content {
    overflow: hidden;
    height: auto !important;
    max-height: none !important;
}

/* 比較表の最適化 */
.enhanced-comparison-table {
    overflow: hidden;
}

.comparison-container {
    overflow: hidden;
}

/* チャートセクションの最適化 */
.chart-container {
    overflow: hidden;
}

.hyaluronic-chart {
    overflow: hidden;
}

/* グリッドレイアウトの最適化 */
.symptoms-grid,
.feature-grid,
.ingredients-grid {
    overflow: hidden;
}

/* テーブルの自然表示 */
table,
.table-container {
    overflow: hidden;
    white-space: normal !important;
}

/* フレックスレイアウトの最適化 */
.flex,
[style*="display: flex"],
[class*="flex"] {
    overflow: hidden;
}

/* テキストの自然な折り返し */
.btn-cta-main,
.btn-cta-small {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: hidden;
}

/* モバイル表示での最適化 */
@media (max-width: 768px) {
    /* 世界初バッジの幅調整 */
    .badge-world-first {
        padding: 8px 16px !important;
        font-size: 14px !important;
        letter-spacing: 1px !important;
        max-width: 90% !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
    }
    
    .hero-badge {
        text-align: center !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* chart-insightセクションの文字見切れ対策 */
    .chart-insight {
        padding: 15px 10px !important;
        margin: 20px 0 !important;
    }
    
    .chart-insight-balanced {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .insight-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        flex-wrap: wrap !important;
    }
    
    .insight-item span {
        flex: 1 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    .insight-item i {
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        font-size: 14px !important;
        width: 16px !important;
    }
    
    /* テキストサイズの調整 */
    p, li, span {
        line-height: 1.6 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* 長いテキストコンテンツの最適化 */
    .science-subtitle p,
    .chart-subtitle,
    .testimonial-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }
    
    /* FAQテキストの調整 */
    .faq-answer p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* 超小画面（360px以下）での追加調整 */
@media (max-width: 360px) {
    /* 世界初バッジのさらなる縮小 */
    .badge-world-first {
        padding: 6px 12px !important;
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
    }
    
    /* chart-insightテキストの極小画面対応 */
    .insight-item {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    .insight-item span {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    .insight-item i {
        font-size: 12px !important;
        width: 14px !important;
    }
    
    /* チャートコンテナの調整 */
    .chart-insight {
        padding: 10px 5px !important;
    }
    
    /* モバイル改行の表示 */
    .mobile-break {
        display: inline !important;
    }
}

/* デスクトップでは改行を非表示 */
@media (min-width: 769px) {
    .mobile-break {
        display: none !important;
    }
}

/* 追加のスクロール防止措置 */
body,
html {
    overflow-x: hidden;
    overflow-y: auto;
}

.container {
    overflow-x: hidden;
}

section {
    overflow-x: hidden;
}

/* エフェクト系のオーバーフロー調整 */
.effect-stats,
.comparison-content,
.feature-list {
    overflow: hidden;
}

/* 商品画像とギャラリーの調整 */
.gallery-grid,
.product-showcase {
    overflow: hidden;
}

/* 価格表示エリアの最適化 */
.price-breakdown,
.detailed-price-comparison {
    overflow: hidden;
}