/* ========================================
   ベーススタイル & 変数定義
   ======================================== */

/* CSS Custom Properties */
:root {
    /* コンテンツ幅 */
    --content-max-width: 880px;

    /* ブレークポイント */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1920px;

    /* Alliance カラーパレット */
    --color-alliance-main: #3B7B7B;
    --color-elt-main-blue: #00508E;
    --color-elt-sub: #2D88AE;
    --color-elt-base: #EAEBF4;
    --color-elt-bg-light: #E4EBEB;
    --color-elt-text-sub: #8CA3B8;
    --color-elt-text-main: #4D515A;

    /* カラー（後方互換性のため残す） */
    --color-primary: #333;
    --color-secondary: #666;
    --color-accent: #0073aa;
    --color-bg: #fff;
    --color-text: var(--color-elt-text-main);

    /* ヘッダーカラー */
    --color-header-bg: #1a2b3d;
    --color-header-text: #ffffff;
    --color-header-link: #ffffff;

    /* アクセントカラー（テール/グリーン） */
    --color-teal: #00a8a8;
    --color-green: #2d8659;

    /* スペーシング */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;

    /* タイポグラフィ */
    --font-size-body: 16px;
    --line-height-body: 32px;
    --font-weight-body: 500; /* Medium */
}

/* ========================================
   コンテナ & レイアウト
   ======================================== */
.container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-md);
    }
}

/* 全幅コンテナ（背景用） */
.container-full {
    width: 100%;
}

/* ========================================
   ユーティリティクラス
   ======================================== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   レスポンシブ調整（1920px環境での表示最適化）
   ======================================== */
@media (min-width: 1920px) {

    /* 大画面でもコンテンツは880pxに制限し、中央配置 */
    .container,
    .content-area,
    .header-inner {
        max-width: var(--content-max-width);
    }
}