:root {

    /* --- 色 --- */

    /* 主要カラー　*/
    /* アクセント：ロゴ、重要なリンク等 */
    --accent-color: #485373;
    /* メイン：ヘッダー、ナビゲーション等 */
    --main-color: #444949;
    /* ベース：セクションの背景やアクセントサブ */
    --base-color: #6d5151;
    /* アクセントの背景色 */
    --bgaccent-color: #5a6485;

    /* 白色 */
    --white: #ffffff;

    /*　文字色　*/
    /* 基本テキストカラー */
    --text-color: #7A7A7A;

    /* グレースケール（ボタンのアウトライン、背景等） */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;

    /*　特定の操作を意味する色　*/
    /* プライマリ（通常ボタン） */
    --button-color: #485373;
    --button-color-hover: #3d4460;
    --button-color-active: #485373;

    /* セカンダリ（キャンセル等） */
    --secondary-color: #6b7280;
    --secondary-color-hover: #4b5563;

    /* 削除・危険 */
    --delete-color: #dc2626;
    --delete-color-hover: #b91c1c;
    --delete-color-active: #991b1b;
    --danger-bg-light: #fee2e2;
    --danger-bg-lighter: #fecaca;

    /* 成功・確定 */
    --success-color: #16a34a;
    --success-color-hover: #15803d;
    --success-color-active: #166534;
    --success-bg-light: #dcfce7;
    --success-bg-lighter: #bbf7d0;

    /* 編集・変更 */
    --edit-color: #1d4ed8;
    --edit-color-hover: #1e40af;
    --edit-bg-light: #dbeafe;
    --edit-bg-lighter: #bfdbfe;

    /* 情報 */
    --info-color: #1E40AF;
    --info-bg-light: #eff6ff;
    --info-border-color: #bfdbfe;

    /* 警告 */
    --warning-color: #ea580c;
    --warning-bg-light: #fed7aa;

    /* プライマリの薄い背景 */
    --primary-bg-light: #e0e4f0;

    /* 無効化 */
    --color-disabled-bg: #B3B3B3;
    --color-disabled-text: #7A7A7A;

    /* --- スペース --- */

    /* padding,margin,gapに使用 */

    --space-2xs: 0.125rem;  /* 2px */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 0.75rem;    /* 12px */
    --space-lg: 1rem;       /* 16px */
    --space-xl: 1.5rem;     /* 24px */
    --space-2xl: 2rem;      /* 32px */
    --space-3xl: 3rem;      /* 48px */


    /* --- タイポグラフィ --- */

    /* 文字サイズ */
    --fs-2xs: 0.688rem;       /* 11px - 非常に小さい（バッジ等） */
    --fs-xs: 0.75rem;         /* 12px - 注釈、小さなラベル */
    --fs-xs-plus: 0.813rem;   /* 13px - 中間サイズ */
    --fs-sm: 0.875rem;        /* 14px - ボタン、小見出し */
    --fs-main: 1rem;          /* 16px - 標準テキスト */
    --fs-md: 1.125rem;        /* 18px - 中見出し */
    --fs-lg: 1.25rem;         /* 20px - 大見出し */
    --fs-xl: 1.5rem;          /* 24px - 特大見出し */
    --fs-2xl: 2rem;           /* 32px - 特大見出し */


    /* 文字の太さ */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;


    /* --- 角の丸み --- */

    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;    /* 完全な円形 */


    /* --- 影 --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    /* テーブルの影 */
    --shadow-table: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* フォーカス時の影 */
    --shadow-focus: 0 0 0 3px rgba(72, 83, 115, 0.1);
    /* ドロップダウンの影 */
    --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* --- z-index --- */
    --z-header: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-tooltip: 500;

    --mobile-header-height: 3.5rem;

}


/* =========================================================================
   ユーティリティクラス（スタイルの微調整に活用）
   ========================================================================= */

/* --- Margin (外余白) --- */
.u-m-none {
    margin: 0 !important;
}

.u-m-xs {
    margin: var(--space-xs) !important;
}

.u-m-sm {
    margin: var(--space-sm) !important;
}

.u-m-md {
    margin: var(--space-md) !important;
}

.u-mt-md {
    margin-top: var(--space-md) !important;
}

.u-mb-md {
    margin-bottom: var(--space-md) !important;
}

.u-mt-lg {
    margin-top: var(--space-lg) !important;
}

.u-mb-lg {
    margin-bottom: var(--space-lg) !important;
}

/* --- Padding (内余白) --- */
.u-p-none {
    padding: 0 !important;
}

.u-p-sm {
    padding: var(--space-sm) !important;
}

.u-p-md {
    padding: var(--space-md) !important;
}

/* --- Typography (タイポグラフィ) --- */
.u-text-center {
    text-align: center !important;
}

.u-text-right {
    text-align: right !important;
}

.u-text-left {
    text-align: left !important;
}

.u-weight-bold {
    font-weight: var(--fw-bold) !important;
}

.u-weight-normal {
    font-weight: var(--fw-normal) !important;
}

.u-fs-xs {
    font-size: var(--fs-xs) !important;
}

.u-fs-sm {
    font-size: var(--fs-sm) !important;
}

.u-fs-lg {
    font-size: var(--fs-lg) !important;
}

/* --- Colors (文字色) --- */
.u-color-accent {
    color: var(--accent-color) !important;
}

.u-color-main {
    color: var(--main-color) !important;
}

.u-color-delete {
    color: var(--delete-color) !important;
}

.u-color-text {
    color: var(--text-color) !important;
}

/* --- Display (表示制御) --- */
.u-d-block {
    display: block !important;
}

.u-d-inline-block {
    display: inline-block !important;
}

.u-d-none {
    display: none !important;
}

.u-d-flex {
    display: flex !important;
}


/* =========================================================================
   フォントの指定
   ========================================================================= */
h1 {
    font-family: Arial, Helvetica, sans-serif;
}

.no-items {
    color: var(--gray-500);
    font-size: var(--fs-sm);
    text-align: center;
    padding: var(--space-md);
}


/* =========================================================================
   アイコンスタイル
   ========================================================================= */

/* アイコンロゴを丸く切り抜く */
.c-logo-icon img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    display: block;
    margin: 0 auto 1rem;
}

.c-logo-icon-md img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: block;
    margin: 0 auto;
}

.c-logo-icon-sm {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.c-logo-icon-sm img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: block;
}

/* アイコンサイズ調整 */
.c-icon-sm {
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
    /* SVGの色を#485373に指定 */
    filter: brightness(0) saturate(100%) invert(28%) sepia(21%) saturate(749%) hue-rotate(204deg) brightness(91%) contrast(89%);
}

.c-icon-md {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0 auto;
    /* SVGの色を#485373に指定 */
    filter: brightness(0) saturate(100%) invert(28%) sepia(21%) saturate(749%) hue-rotate(204deg) brightness(91%) contrast(89%);
}

.c-icon-lg {
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto;
    /* SVGの色を#485373に指定 */
    filter: brightness(0) saturate(100%) invert(28%) sepia(21%) saturate(749%) hue-rotate(204deg) brightness(91%) contrast(89%);
}

/* SVGの色を白に指定 */
.icon-white {
    filter: brightness(0) invert(1); /* 白色に変更 */
}



/* =========================================================================
   状態クラス（JavaScript制御用）
   ========================================================================= */

/* 要素を非表示にする（モーダル、トースト等の初期状態） */
.is-hidden {
    display: none !important;
}

/* 要素を表示する */
.is-visible {
    display: block !important;
}


/* ディバイダー */
.c-divider {
    border-top: 1px solid var(--gray-300);
    margin: var(--space-md) 0;
}