/**
 * フォント最適化 - FOUT/FOIT問題解決
 * Google Fontsから読み込みつつ、ちらつきを防止
 */

/* フォント読み込み中のフォールバック設定 */
body {
    /* システムフォントをフォールバックに */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* フォント読み込み完了後のクラス */
.fonts-loaded body {
    font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.fonts-loaded .font-hand {
    font-family: "Zen Kurenaido", cursive, sans-serif !important;
}

.fonts-loaded .font-serif {
    font-family: "Playfair Display", "Times New Roman", serif !important;
}

/* フォント読み込み中のスタイル調整（オプション） */
.font-loading body {
    /* フォント切り替え時のレイアウトシフトを最小化 */
    font-synthesis: none;
    -moz-font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 
 * font-display: swap の代替
 * Google Fonts の display=swap と同じ効果
 */
@supports (font-display: swap) {
    /* ブラウザがfont-displayをサポートしている場合 */
    body {
        font-display: swap;
    }
}

/* 
 * Critical font loading
 * 最初の3秒間はフォールバックフォントを表示
 */
body {
    font-display: swap;
    font-synthesis: weight style;
}

/* 
 * サイズ調整
 * Zen Kaku Gothic New と システムフォントのサイズ差を調整
 */
.font-loading body {
    font-size-adjust: 0.5;
}

.fonts-loaded body {
    font-size-adjust: none;
}

/* 
 * アニメーション中はフォント変更を隠す
 * ページ読み込み直後の0.1秒間は透明度を下げる
 */
@keyframes fontFadeIn {
    from {
        opacity: 0.95;
    }
    to {
        opacity: 1;
    }
}

.fonts-loaded body {
    animation: fontFadeIn 0.15s ease-in;
}

/* 
 * レイアウトシフト防止
 * フォント切り替え時にガタつかないようにする
 */
* {
    font-synthesis: none;
}

/* 
 * 重要な見出しは即座に正しいフォントで表示
 * （最初から読み込む）
 */
h1, h2, h3, .hero-title {
    font-display: block; /* 最大3秒待ってから表示 */
}