/**
 * レスポンシブタイポグラフィー統一設定
 * Version: 1.0.0
 * 全ページで美しく読みやすいフォントサイズを実現
 * 
 * 適用優先度: このファイルを他のCSSより後に読み込むことで、
 * 過大なフォントサイズを適切に上書きします
 */

/* ========================================
   ベースタイポグラフィー
   ======================================== */

/* 本文テキスト - デバイスに応じた最適サイズ */
body {
    font-size: 16px;
    line-height: 1.8;
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
        line-height: 1.75;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* 段落テキスト */
p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    p {
        font-size: 0.95rem;
        line-height: 1.75;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

/* ========================================
   見出しタイポグラフィー - 適切なサイズに調整
   ======================================== */

/* h1: メインタイトル */
h1,
.hero h1,
.section-title h1,
.page-title h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    h1,
    .hero h1,
    .section-title h1,
    .page-title h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.35 !important;
        margin-bottom: 0.875rem !important;
    }
}

@media (max-width: 480px) {
    h1,
    .hero h1,
    .section-title h1,
    .page-title h1 {
        font-size: clamp(1.375rem, 6vw, 1.75rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
}

/* h2: セクションタイトル */
h2,
.section-title h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
    line-height: 1.35 !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    h2,
    .section-title h2 {
        font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 0.875rem !important;
    }
}

@media (max-width: 480px) {
    h2,
    .section-title h2 {
        font-size: clamp(1.125rem, 5vw, 1.5rem) !important;
        line-height: 1.45 !important;
        margin-bottom: 0.75rem !important;
    }
}

/* h3: サブセクションタイトル */
h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 0.875rem !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    h3 {
        font-size: clamp(1.125rem, 3vw, 1.375rem) !important;
        line-height: 1.45 !important;
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    h3 {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
        line-height: 1.5 !important;
    }
}

/* h4: 小見出し */
h4 {
    font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
    line-height: 1.45 !important;
    margin-bottom: 0.75rem !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    h4 {
        font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    h4 {
        font-size: clamp(0.95rem, 3vw, 1.125rem) !important;
    }
}

/* h5, h6: 最小見出し */
h5,
h6 {
    font-size: clamp(1rem, 1.5vw, 1.125rem) !important;
    line-height: 1.5 !important;
    margin-bottom: 0.625rem !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    h5,
    h6 {
        font-size: clamp(0.95rem, 2vw, 1.0625rem) !important;
    }
}

@media (max-width: 480px) {
    h5,
    h6 {
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
    }
}

/* ========================================
   特定コンポーネントのフォント調整
   ======================================== */

/* ヒーローセクションのサブテキスト */
.hero p,
.hero-subtitle,
.hero-description {
    font-size: clamp(0.95rem, 2vw, 1.125rem) !important;
    line-height: 1.7 !important;
}

@media (max-width: 768px) {
    .hero p,
    .hero-subtitle,
    .hero-description {
        font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
        line-height: 1.65 !important;
    }
}

@media (max-width: 480px) {
    .hero p,
    .hero-subtitle,
    .hero-description {
        font-size: clamp(0.8125rem, 3vw, 0.9375rem) !important;
        line-height: 1.6 !important;
    }
}

/* カードタイトル */
.card-title,
.treatment-card h3,
.benefit-card h3,
.testimonial-card h3,
.examination-card h3 {
    font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
}

@media (max-width: 768px) {
    .card-title,
    .treatment-card h3,
    .benefit-card h3,
    .testimonial-card h3,
    .examination-card h3 {
        font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
    }
}

@media (max-width: 480px) {
    .card-title,
    .treatment-card h3,
    .benefit-card h3,
    .testimonial-card h3,
    .examination-card h3 {
        font-size: clamp(0.95rem, 3vw, 1.125rem) !important;
    }
}

/* カード本文 */
.card-text,
.card-description,
.treatment-card p,
.benefit-card p,
.testimonial-text,
.examination-card p {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    line-height: 1.75 !important;
}

@media (max-width: 768px) {
    .card-text,
    .card-description,
    .treatment-card p,
    .benefit-card p,
    .testimonial-text,
    .examination-card p {
        font-size: clamp(0.8125rem, 2vw, 0.9375rem) !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 480px) {
    .card-text,
    .card-description,
    .treatment-card p,
    .benefit-card p,
    .testimonial-text,
    .examination-card p {
        font-size: clamp(0.75rem, 2.5vw, 0.875rem) !important;
        line-height: 1.65 !important;
    }
}

/* ========================================
   ボタンとリンクのフォント
   ======================================== */

/* ボタンテキスト */
.btn,
.cta-button,
.primary-button,
.secondary-button,
button {
    font-size: clamp(0.9rem, 1.5vw, 1rem) !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    .btn,
    .cta-button,
    .primary-button,
    .secondary-button,
    button {
        font-size: clamp(0.875rem, 2vw, 0.95rem) !important;
    }
}

@media (max-width: 480px) {
    .btn,
    .cta-button,
    .primary-button,
    .secondary-button,
    button {
        font-size: clamp(0.8125rem, 2.5vw, 0.9rem) !important;
    }
}

/* ナビゲーションリンク */
.nav-link,
.mobile-menu-nav a {
    font-size: clamp(0.9375rem, 1.5vw, 1rem) !important;
    font-weight: 500 !important;
}

@media (max-width: 768px) {
    .nav-link,
    .mobile-menu-nav a {
        font-size: clamp(0.9rem, 2vw, 0.95rem) !important;
    }
}

/* ========================================
   リストアイテム
   ======================================== */

li {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    li {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    li {
        font-size: 0.9rem;
        line-height: 1.65;
        margin-bottom: 0.375rem;
    }
}

/* ========================================
   テーブルのフォント
   ======================================== */

table {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    table {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    table {
        font-size: 0.8125rem;
    }
}

th {
    font-size: 1rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    th {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    th {
        font-size: 0.875rem;
    }
}

/* ========================================
   スペシャルケース: 統計数値
   ======================================== */

.stat-number,
.testimonial-stat-number {
    font-size: clamp(2rem, 5vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

@media (max-width: 768px) {
    .stat-number,
    .testimonial-stat-number {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    }
}

@media (max-width: 480px) {
    .stat-number,
    .testimonial-stat-number {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
}

.stat-label,
.testimonial-stat-label {
    font-size: clamp(1rem, 2vw, 1.125rem) !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    .stat-label,
    .testimonial-stat-label {
        font-size: clamp(0.9375rem, 2.5vw, 1.0625rem) !important;
    }
}

@media (max-width: 480px) {
    .stat-label,
    .testimonial-stat-label {
        font-size: clamp(0.875rem, 3vw, 1rem) !important;
    }
}

/* ========================================
   改行とワードブレーク調整
   ======================================== */

/* 長い単語の自動改行 */
h1, h2, h3, h4, h5, h6,
p, li, .card-text, .card-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 日本語テキストの禁則処理 */
body {
    word-break: normal;
    line-break: strict;
}

/* モバイルでの適切な改行 */
@media (max-width: 768px) {
    h1, h2, h3 {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}

/* ========================================
   フォーム要素のフォント
   ======================================== */

input,
textarea,
select {
    font-size: 1rem !important;
}

@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    input,
    textarea,
    select {
        font-size: 0.9rem !important;
    }
}

label {
    font-size: 0.95rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    label {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    label {
        font-size: 0.875rem;
    }
}

/* ========================================
   キャプションと小さなテキスト
   ======================================== */

.caption,
.small-text,
small,
.footnote {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    .caption,
    .small-text,
    small,
    .footnote {
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 480px) {
    .caption,
    .small-text,
    small,
    .footnote {
        font-size: 0.75rem !important;
    }
}