/* Bootstrap用のカスタムプロパティ（変数）の定義 */

:root {
    /* Bootstrap 標準の色変数をカスタマイズ */
    --bs-primary: var(--main-color);
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-dark: #343434;

    /* 背景カラー */
    --bg-primary: var(--main-color);
    --bg-secondary: var(--accent-color);
    --bg-light: #f5f5f5;
    --bg-dark: #1a1a1a;

    /* テキストカラー */
    --text-primary: #2a2a2a;
    --text-secondary: #6c757d;
    --text-muted: #9e9e9e;

    /* 文字サイズ */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;

    /* 行間・フォントウェイト */
    --bs-body-font-size: var(--text-base);
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.8;

    /* ボタン */
    --btn-padding: 0.75rem 1.5rem;
    --btn-radius: 8px;
    --btn-font-size: var(--text-base);
    --btn-primary-bg: var(--main-color);
    --btn-primary-text: var(--white);
    --btn-secondary-bg: var(--accent-color);
    --btn-secondary-text: var(--white);

    /* コンテナ幅 (Bootstrapのデフォルトサイズ) */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;

    /* グリッドシステム */
    --grid-gap: 16px;
    --grid-margin: 16px;

    /* セクションのパディング */
    --section-padding: 4rem 0;

    /* 影のスタイル */
    --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.15);

    /* アニメーション */
    --transition-fast: 0.2s ease-in-out;
    --transition-default: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

}



.container {
    max-width: var(--container-xxl);
}

@media (max-width: 1400px) {
    .container {
        max-width: var(--container-xl);
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: var(--container-lg);
    }
}

@media (max-width: 992px) {
    .container {
        max-width: var(--container-md);
    }
}

@media (max-width: 768px) {
    .container {
        max-width: var(--container-sm);
    }
}