/* ========================================
   レスポンシブタイポグラフィ完全版
   ======================================== */

/* デスクトップファースト → モバイルファーストに統一 */

/* ベースタイポグラフィ */
:root {
    /* フォントサイズ変数 */
    --fs-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 1.75vw, 1rem);
    --fs-base: clamp(1rem, 2vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 2.25vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 2.5vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 3vw, 1.875rem);
    --fs-3xl: clamp(1.875rem, 3.75vw, 2.25rem);
    --fs-4xl: clamp(2.25rem, 4.5vw, 3rem);
    --fs-5xl: clamp(3rem, 6vw, 4rem);
    --fs-6xl: clamp(3.75rem, 7.5vw, 5rem);
}

/* 見出し */
h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

/* 本文 */
p, li, td { 
    font-size: var(--fs-base);
    line-height: 1.7;
}

/* 小さいテキスト */
small, .small-text {
    font-size: var(--fs-sm);
}

/* カード内の見出し */
.feature-card h3,
.benefit-card h3,
.plan-card h3,
.story-card h3,
.tool-card h3 {
    font-size: var(--fs-xl);
}

/* カード内の本文 */
.feature-card p,
.benefit-card p,
.plan-card p,
.story-card p {
    font-size: var(--fs-sm);
}

/* 価格表示 */
.plan-price-value {
    font-size: var(--fs-4xl);
}

.plan-price-unit {
    font-size: var(--fs-base);
}

/* ボタン */
.btn {
    font-size: var(--fs-base);
}

.btn-large {
    font-size: var(--fs-lg);
}

.btn-small {
    font-size: var(--fs-sm);
}

/* フッター */
.footer-title {
    font-size: var(--fs-lg);
}

.footer-list {
    font-size: var(--fs-sm);
}

/* FAQセクション */
.faq-question {
    font-size: var(--fs-lg);
}

.faq-answer {
    font-size: var(--fs-base);
}

/* ブログカード */
.blog-title {
    font-size: var(--fs-lg);
}

.blog-excerpt {
    font-size: var(--fs-sm);
}

.blog-date {
    font-size: var(--fs-xs);
}

/* 統計表示 */
.stat-value {
    font-size: var(--fs-4xl);
}

.stat-label {
    font-size: var(--fs-sm);
}

/* ========================================
   デバイス別調整
   ======================================== */

/* 超大画面（1920px以上） */
@media (min-width: 1920px) {
    :root {
        --fs-base: 1.125rem;
        --fs-lg: 1.375rem;
        --fs-xl: 1.75rem;
        --fs-2xl: 2.125rem;
        --fs-3xl: 2.625rem;
        --fs-4xl: 3.5rem;
        --fs-5xl: 4.5rem;
        --fs-6xl: 6rem;
    }
}

/* 大画面PC（1440px-1919px） */
@media (max-width: 1919px) and (min-width: 1440px) {
    .hero-title { font-size: 4rem; }
    .section-title { font-size: 3rem; }
}

/* デスクトップ（1024px-1439px） */
@media (max-width: 1439px) and (min-width: 1024px) {
    .hero-title { font-size: 3.5rem; }
    .section-title { font-size: 2.5rem; }
}

/* タブレット横向き（768px-1023px） */
@media (max-width: 1023px) and (min-width: 768px) {
    .hero-title { font-size: 3rem; }
    .section-title { font-size: 2.25rem; }
    
    .feature-card h3,
    .benefit-card h3 {
        font-size: 1.375rem;
    }
}

/* スマホ横向き（600px-767px） */
@media (max-width: 767px) and (min-width: 600px) {
    .hero-title { font-size: 2.5rem; }
    .section-title { font-size: 2rem; }
    
    .btn {
        font-size: 1rem;
    }
}

/* スマホ縦向き（320px-599px） */
@media (max-width: 599px) {
    html {
        font-size: 15px; /* ベースサイズを少し小さく */
    }
    
    .hero-title { 
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .section-title { 
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .feature-card h3,
    .benefit-card h3,
    .plan-card h3 {
        font-size: 1.25rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    /* フォーム要素のiOSズーム防止 */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* 超小型デバイス（320px未満） */
@media (max-width: 319px) {
    html {
        font-size: 14px;
    }
    
    .hero-title { font-size: 1.75rem; }
    .section-title { font-size: 1.5rem; }
    
    .btn {
        font-size: 0.875rem;
        padding: 10px 16px;
    }
}

/* ========================================
   アクセシビリティ対応
   ======================================== */

/* ハイコントラストモード */
@media (prefers-contrast: high) {
    body {
        font-weight: 500;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-weight: 800;
    }
}

/* モーション設定を尊重 */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    body {
        font-weight: 400; /* ダークモードでは少し細く */
    }
}