/* ===========================================
   CSS Variables 
   =========================================== */
   :root {
    /* メインカラー */
    --primary-color: #6121A1;        /* Primary */
    --primary-secondary: #30349B;    /* Secondary */
    --primary-light: #C1AFD2;        /* Primary light */
    --primary-pale: #EAE8F6;         /* Primary Pale */
    
     /* グラデーション（追加） */
     --primary-gradient: linear-gradient(135deg, #6121A1, #30349B);
    
    /* モノカラー */
    --color-white: #FFFFFF;          /* mono_wh */
    --color-black: #000000;          /* mono_bk */
    
    /* テキストカラー */
    --text-primary: #3C3C3C;         /* Text_color_#1 */
    --text-secondary: #363030;       /* Text_color_#2 */
    --text-tertiary: #717171;        /* Text_color_#3 */
    
    /* アクセントカラー */
    --accent-orange: #FF550D;        /* Accent */
    --accent-yellow: #FFF38A;        /* Marking */
    
    /* フォントファミリー */
    /* フォントファミリー */
    --font-family-serif: "UD Digi Kyokasho N-R", "IPAex明朝", serif;
    --font-family-sans: "Zen Kaku Gothic New", "DIN Next", sans-serif;
    --font-family: var(--font-family-sans);
    --font-family-heading: var(--font-family-serif);
    --font-family-body: var(--font-family-sans);

    
    /* フォントウェイト */
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    
    /* フォントサイズ（タイトル系） */
    --font-size-title-1: 28px;
    --font-size-title-2: 24px;
    --font-size-title-3: 18px;
    --font-size-title-4: 16px;
    
    /* フォントサイズ（ボディ系） */
    --font-size-body-1: 24px;
    --font-size-body-2: 20px;
    --font-size-body-3: 18px;
    --font-size-body-4: 16px;
    --font-size-body-5: 14px;
    --font-size-body-6: 12px;
    
    /* 行間 */
    --line-height-default: 1.5;
    --line-height-loose: 1.7;
    --line-height-tight: 1.3;
    
    /* ブレークポイント */
    --bp-mobile: 390px;
    --bp-tablet: 960px;
    --bp-desktop: 1200px;
    
    /* レイアウト */
    --container-width: 1200px;
    --section-padding: 80px;
    --content-gap: 40px;
    --border-radius: 8px;
    --header-height: 80px;
}

/* ===========================================
   Base Styles
   =========================================== */
body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-4);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: var(--line-height-default);
    background-color: var(--color-white);
}

/* ===========================================
   Container System
   =========================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

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

/* ===========================================
   Section System
   =========================================== */
.section {
    padding: var(--section-padding) 0;
}

@media (max-width: 767px) {
    .section {
        padding: 60px 0;
    }
}

/* ===========================================
   Grid System
   =========================================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.col {
    flex: 1;
    padding: 0 10px;
}

.col-2 { flex: 0 0 50%; }
.col-3 { flex: 0 0 33.333%; }
.col-4 { flex: 0 0 25%; }

@media (max-width: 767px) {
    .col, .col-2, .col-3, .col-4 {
        flex: 0 0 100%;
    }
}

/* ===========================================
   Background Utilities
   =========================================== */
.bg-primary {
    background-color: var(--primary-color);
    color: var(--color-white);
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-secondary));
    color: var(--color-white);
}

.bg-light {
    background-color: var(--primary-pale);
}

.bg-white {
    background-color: var(--color-white);
}