/**
 * Quill Fonts CSS v2.0.0
 * Quillエディタで設定したフォント・サイズを公開ページで表示するためのスタイル
 * 
 * 機能:
 * - フォントクラス定義（日本語8種・英語8種）
 * - サイズクラス定義（10px〜64px）
 * - ツールバーのフォント/サイズ選択ボタンの幅調整
 * - フォントピッカーのラベル定義
 * - HeroSlide用の詳細度を上げたスタイル
 * 
 * 書体ファイルの読み込み:
 * - 管理画面: App.razor（Google Fonts から一括）
 * - 公開ページ: ヒーロースライドが使う書体だけを HeroSlide.razor.js が読み込む
 * 書体・サイズを増減するときは Models/QuillFormats.cs と wwwroot/js/quill-editor.js も揃えること
 * 
 * @version 2.0.0
 */


/* ========================================
   フォントクラス定義
   Quillは .ql-font-xxx のクラスを生成する
   ======================================== */

/* --- 日本語フォント --- */

.ql-font-noto-sans-jp {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

.ql-font-noto-serif-jp {
    font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

.ql-font-m-plus-1p {
    font-family: 'M PLUS 1p', 'Noto Sans JP', sans-serif;
}

.ql-font-m-plus-rounded {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}

.ql-font-zen-maru-gothic {
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
}

.ql-font-zen-kaku-gothic {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
}

.ql-font-shippori-mincho {
    font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
}

.ql-font-kosugi-maru {
    font-family: 'Kosugi Maru', 'M PLUS Rounded 1c', sans-serif;
}


/* --- 英語フォント --- */

.ql-font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ql-font-roboto {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ql-font-playfair-display {
    font-family: 'Playfair Display', Georgia, serif;
}

.ql-font-montserrat {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ql-font-poppins {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ql-font-merriweather {
    font-family: 'Merriweather', Georgia, serif;
}

.ql-font-oswald {
    font-family: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ql-font-lora {
    font-family: 'Lora', Georgia, serif;
}


/* ========================================
   フォントサイズクラス定義
   ======================================== */

.ql-size-10px { font-size: 10px; }
.ql-size-12px { font-size: 12px; }
.ql-size-14px { font-size: 14px; }
.ql-size-16px { font-size: 16px; }
.ql-size-18px { font-size: 18px; }
.ql-size-20px { font-size: 20px; }
.ql-size-24px { font-size: 24px; }
.ql-size-28px { font-size: 28px; }
.ql-size-32px { font-size: 32px; }
.ql-size-36px { font-size: 36px; }
.ql-size-48px { font-size: 48px; }
.ql-size-64px { font-size: 64px; }


/* ========================================
   ツールバー：フォント選択ボタンの幅
   ======================================== */

.ql-snow .ql-picker.ql-font {
    width: 180px !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label {
    width: 100%;
    padding-right: 24px;
}

.ql-snow .ql-picker.ql-font .ql-picker-options {
    width: 200px;
}


/* ========================================
   ツールバー：サイズ選択ボタンの幅
   ======================================== */

.ql-snow .ql-picker.ql-size {
    width: 90px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-options {
    width: 100px;
}


/* ========================================
   フォントピッカーのラベル定義
   ======================================== */

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: 'デフォルト';
}

/* 日本語フォント */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="noto-sans-jp"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="noto-sans-jp"]::before {
    content: 'Noto Sans JP';
    font-family: 'Noto Sans JP', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="noto-serif-jp"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="noto-serif-jp"]::before {
    content: 'Noto Serif JP';
    font-family: 'Noto Serif JP', serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="m-plus-1p"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="m-plus-1p"]::before {
    content: 'M PLUS 1p';
    font-family: 'M PLUS 1p', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="m-plus-rounded"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="m-plus-rounded"]::before {
    content: 'M PLUS Rounded';
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="zen-maru-gothic"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="zen-maru-gothic"]::before {
    content: 'Zen 丸ゴシック';
    font-family: 'Zen Maru Gothic', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="zen-kaku-gothic"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="zen-kaku-gothic"]::before {
    content: 'Zen 角ゴシック';
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="shippori-mincho"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="shippori-mincho"]::before {
    content: 'しっぽり明朝';
    font-family: 'Shippori Mincho', serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="kosugi-maru"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="kosugi-maru"]::before {
    content: '小杉丸ゴシック';
    font-family: 'Kosugi Maru', sans-serif;
}

/* 英語フォント */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="inter"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="inter"]::before {
    content: 'Inter';
    font-family: 'Inter', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before {
    content: 'Roboto';
    font-family: 'Roboto', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="playfair-display"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="playfair-display"]::before {
    content: 'Playfair Display';
    font-family: 'Playfair Display', serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="montserrat"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="montserrat"]::before {
    content: 'Montserrat';
    font-family: 'Montserrat', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="poppins"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="poppins"]::before {
    content: 'Poppins';
    font-family: 'Poppins', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="merriweather"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="merriweather"]::before {
    content: 'Merriweather';
    font-family: 'Merriweather', serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="oswald"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="oswald"]::before {
    content: 'Oswald';
    font-family: 'Oswald', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lora"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lora"]::before {
    content: 'Lora';
    font-family: 'Lora', serif;
}


/* ========================================
   サイズピッカーのラベル定義
   ======================================== */

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '16px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: '28px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before { content: '36px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48px'; }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="64px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="64px"]::before { content: '64px'; }


/* ========================================
   HeroSlide内でのフォント適用（詳細度を上げる）
   ======================================== */

.hero-slide-title .ql-font-noto-sans-jp,
.hero-slide-description .ql-font-noto-sans-jp,
.hero-slide-custom .ql-font-noto-sans-jp {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
}

.hero-slide-title .ql-font-noto-serif-jp,
.hero-slide-description .ql-font-noto-serif-jp,
.hero-slide-custom .ql-font-noto-serif-jp {
    font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif !important;
}

.hero-slide-title .ql-font-m-plus-1p,
.hero-slide-description .ql-font-m-plus-1p,
.hero-slide-custom .ql-font-m-plus-1p {
    font-family: 'M PLUS 1p', sans-serif !important;
}

.hero-slide-title .ql-font-m-plus-rounded,
.hero-slide-description .ql-font-m-plus-rounded,
.hero-slide-custom .ql-font-m-plus-rounded {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

.hero-slide-title .ql-font-zen-maru-gothic,
.hero-slide-description .ql-font-zen-maru-gothic,
.hero-slide-custom .ql-font-zen-maru-gothic {
    font-family: 'Zen Maru Gothic', sans-serif !important;
}

.hero-slide-title .ql-font-zen-kaku-gothic,
.hero-slide-description .ql-font-zen-kaku-gothic,
.hero-slide-custom .ql-font-zen-kaku-gothic {
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
}

.hero-slide-title .ql-font-shippori-mincho,
.hero-slide-description .ql-font-shippori-mincho,
.hero-slide-custom .ql-font-shippori-mincho {
    font-family: 'Shippori Mincho', serif !important;
}

.hero-slide-title .ql-font-kosugi-maru,
.hero-slide-description .ql-font-kosugi-maru,
.hero-slide-custom .ql-font-kosugi-maru {
    font-family: 'Kosugi Maru', sans-serif !important;
}

.hero-slide-title .ql-font-inter,
.hero-slide-description .ql-font-inter,
.hero-slide-custom .ql-font-inter {
    font-family: 'Inter', sans-serif !important;
}

.hero-slide-title .ql-font-roboto,
.hero-slide-description .ql-font-roboto,
.hero-slide-custom .ql-font-roboto {
    font-family: 'Roboto', sans-serif !important;
}

.hero-slide-title .ql-font-playfair-display,
.hero-slide-description .ql-font-playfair-display,
.hero-slide-custom .ql-font-playfair-display {
    font-family: 'Playfair Display', serif !important;
}

.hero-slide-title .ql-font-montserrat,
.hero-slide-description .ql-font-montserrat,
.hero-slide-custom .ql-font-montserrat {
    font-family: 'Montserrat', sans-serif !important;
}

.hero-slide-title .ql-font-poppins,
.hero-slide-description .ql-font-poppins,
.hero-slide-custom .ql-font-poppins {
    font-family: 'Poppins', sans-serif !important;
}

.hero-slide-title .ql-font-merriweather,
.hero-slide-description .ql-font-merriweather,
.hero-slide-custom .ql-font-merriweather {
    font-family: 'Merriweather', serif !important;
}

.hero-slide-title .ql-font-oswald,
.hero-slide-description .ql-font-oswald,
.hero-slide-custom .ql-font-oswald {
    font-family: 'Oswald', sans-serif !important;
}

.hero-slide-title .ql-font-lora,
.hero-slide-description .ql-font-lora,
.hero-slide-custom .ql-font-lora {
    font-family: 'Lora', serif !important;
}


/* ========================================
   HeroSlide内でのサイズ適用
   ======================================== */

.hero-slide-title .ql-size-10px,
.hero-slide-description .ql-size-10px,
.hero-slide-custom .ql-size-10px { font-size: 10px !important; }

.hero-slide-title .ql-size-12px,
.hero-slide-description .ql-size-12px,
.hero-slide-custom .ql-size-12px { font-size: 12px !important; }

.hero-slide-title .ql-size-14px,
.hero-slide-description .ql-size-14px,
.hero-slide-custom .ql-size-14px { font-size: 14px !important; }

.hero-slide-title .ql-size-16px,
.hero-slide-description .ql-size-16px,
.hero-slide-custom .ql-size-16px { font-size: 16px !important; }

.hero-slide-title .ql-size-18px,
.hero-slide-description .ql-size-18px,
.hero-slide-custom .ql-size-18px { font-size: 18px !important; }

.hero-slide-title .ql-size-20px,
.hero-slide-description .ql-size-20px,
.hero-slide-custom .ql-size-20px { font-size: 20px !important; }

.hero-slide-title .ql-size-24px,
.hero-slide-description .ql-size-24px,
.hero-slide-custom .ql-size-24px { font-size: 24px !important; }

.hero-slide-title .ql-size-28px,
.hero-slide-description .ql-size-28px,
.hero-slide-custom .ql-size-28px { font-size: 28px !important; }

.hero-slide-title .ql-size-32px,
.hero-slide-description .ql-size-32px,
.hero-slide-custom .ql-size-32px { font-size: 32px !important; }

.hero-slide-title .ql-size-36px,
.hero-slide-description .ql-size-36px,
.hero-slide-custom .ql-size-36px { font-size: 36px !important; }

.hero-slide-title .ql-size-48px,
.hero-slide-description .ql-size-48px,
.hero-slide-custom .ql-size-48px { font-size: 48px !important; }

.hero-slide-title .ql-size-64px,
.hero-slide-description .ql-size-64px,
.hero-slide-custom .ql-size-64px { font-size: 64px !important; }