@charset "utf-8";

/* ============================================================================
   共通定義（base.css）
   ============================================================================
   
   【このファイルの役割】
   - プロジェクト共通のCSS変数（カラー・サイズ）
   - ユーティリティクラス（幅、余白、文字、表示制御など）
   
   【プロジェクトごとの変更箇所】
   - 「カラー設定」セクションのCSS変数を変更すればテーマが変わります
   
   【レスポンシブ ブレイクポイント】
   - PC: 1201px以上（基準100%）
   - タブレット: 769px〜1200px（約85%）
   - SP: 768px以下（約70%）
   
   【rem基準】
   - 1rem = 16px（ブラウザデフォルト）
   
   ============================================================================ */


/* ============================================================================
   1. カラー設定
   ============================================================================ */

:root {
    /* --- メインカラー --- */
    --color-primary: #ed2e64;
    --color-primary-dark: #c91e50;
    
    /* --- サブカラー --- */
    --color-secondary: #10317C;
    --color-secondary-dark: #0a2050;
    
    /* --- 状態カラー --- */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;
    
    /* --- グレースケール --- */
    --color-black: #333333;
    --color-gray-dark: #475569;
    --color-gray: #64748b;
    --color-gray-light: #94a3b8;
    --color-gray-lighter: #cbd5e1;
    --color-gray-lightest: #e2e8f0;
    --color-white: #ffffff;
    
    /* --- 背景色 --- */
    --bg-body: #e5e5e5;
    --bg-content: #ffffff;
    --bg-sidebar: #1c2842;
    --bg-header: #ffffff;
    
    /* --- ボーダー色 --- */
    --border-color: #e2e8f0;
    --border-color-dark: #cbd5e1;

    /* --- セカンダリ淡色（ホバー背景・チップ用） --- */
    --color-secondary-light: #eaf0fa;

    /* --- ステータスチップ用 8組（背景/前景） --- */
    --st-draft-bg:    #f1f5f9;  --st-draft-fg:    #64748b;
    --st-pending-bg:  #fef3c7;  --st-pending-fg:  #92400e;
    --st-approved-bg: #d1fae5;  --st-approved-fg: #065f46;
    --st-rejected-bg: #fee2e2;  --st-rejected-fg: #991b1b;
    --st-paid-bg:     #d1fae5;  --st-paid-fg:     #065f46;
    --st-overdue-bg:  #fee2e2;  --st-overdue-fg:  #991b1b;
    --st-info-bg:     #dbeafe;  --st-info-fg:     #1e40af;
    --st-warn-bg:     #fef3c7;  --st-warn-fg:     #92400e;
}


/* ============================================================================
   2. フォント設定
   ============================================================================ */

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);


/* ============================================================================
   3. ベーススタイル
   ============================================================================ */

* {
    box-sizing: border-box;
}

body {
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-black);
    background-color: var(--bg-body);
    -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 1200px) {
    body {
        font-size: 0.8125rem;
    }
}

@media screen and (max-width: 768px) {
    body {
        font-size: 0.75rem;
    }
}


/* ============================================================================
   4. リンク
   ============================================================================ */

a {
    text-decoration: underline;
    color: var(--color-primary);
    outline: none;
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none;
}


/* ============================================================================
   5. 幅指定ユーティリティ（.w5 〜 .w100）
   ============================================================================ */

.w5  { width: 5% !important; }
.w10 { width: 10% !important; }
.w15 { width: 15% !important; }
.w20 { width: 20% !important; }
.w25 { width: 25% !important; }
.w30 { width: 30% !important; }
.w35 { width: 35% !important; }
.w40 { width: 40% !important; }
.w45 { width: 45% !important; }
.w50 { width: 50% !important; }
.w55 { width: 55% !important; }
.w60 { width: 60% !important; }
.w65 { width: 65% !important; }
.w70 { width: 70% !important; }
.w75 { width: 75% !important; }
.w80 { width: 80% !important; }
.w85 { width: 85% !important; }
.w90 { width: 90% !important; }
.w95 { width: 95% !important; }
.w100 { width: 100% !important; }


/* ============================================================================
   6. レイアウト（.inner, .col-x, .l-xcol）
   ============================================================================ */

.inner {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    padding: 3.75rem 0;
}

.inner-entry {
    width: 100%;
    padding: 0;
}

@media screen and (max-width: 1200px) {
    .inner {
        padding: 2.5rem 0.9375rem;
    }
}

@media screen and (max-width: 768px) {
    .inner {
        padding: 1.875rem 0.625rem;
    }
}

/* カラムレイアウト（table-cell方式） */
.col {
    width: 100%;
    display: table;
}

.col-2 {
    display: table-cell;
    vertical-align: top;
    width: 50%;
}

.col-3 {
    display: table-cell;
    vertical-align: top;
    width: calc(100% / 3);
}

@media screen and (max-width: 768px) {
    .col-2,
    .col-3 {
        display: block;
        width: 100%;
    }
}

/* Flexカラムレイアウト */
.l-2col {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.l-2col form {
    width: 100%;
}

.l-2col-box {
    width: 49.5%;
}

.l-2col-L {
    width: 20%;
}

.l-2col-R {
    width: 79%;
}

.l-3col {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.l-3col-box {
    width: 33%;
}

.l-4col {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

.l-4col-box {
    width: 25%;
}

@media screen and (max-width: 1200px) {
    .l-2col-L {
        width: 25%;
    }
    .l-2col-R {
        width: 74%;
    }
    .l-3col-box {
        width: 32%;
    }
}

@media screen and (max-width: 768px) {
    .l-2col,
    .l-3col,
    .l-4col {
        display: block;
    }
    .l-2col-box,
    .l-2col-L,
    .l-2col-R,
    .l-3col-box,
    .l-4col-box {
        display: block;
        width: 100%;
        margin-bottom: 0.625rem;
    }
}


/* ============================================================================
   7. 文字色（.fc-xxx）
   ============================================================================ */

.fc-black  { color: var(--color-black) !important; }
.fc-red    { color: var(--color-error) !important; }
.fc-green  { color: var(--color-success) !important; }
.fc-orange { color: var(--color-warning) !important; }
.fc-blue   { color: var(--color-info) !important; }
.fc-pink   { color: var(--color-primary) !important; }
.fc-gray   { color: var(--color-gray) !important; }
.fc-white  { color: var(--color-white) !important; }
.fc-sub    { color: #666 !important; }
.fc-mute   { color: #999 !important; }

/* 意味名（10011 互換） */
.fc-main    { color: var(--color-secondary) !important; }
.fc-light   { color: var(--color-gray-light) !important; }
.fc-warn    { color: var(--color-warning) !important; }
.fc-error   { color: var(--color-error) !important; }
.fc-success { color: var(--color-success) !important; }
.fc-info    { color: var(--color-info) !important; }


/* ============================================================================
   8. フォントサイズ（.fs10 〜 .fs24）
   ============================================================================ */

.fs10 { font-size: 0.625rem !important; }
.fs11 { font-size: 0.6875rem !important; }
.fs12 { font-size: 0.75rem !important; }
.fs13 { font-size: 0.8125rem !important; }
.fs14 { font-size: 0.875rem !important; }
.fs15 { font-size: 0.9375rem !important; }
.fs16 { font-size: 1rem !important; }
.fs18 { font-size: 1.125rem !important; }
.fs20 { font-size: 1.25rem !important; }
.fs24 { font-size: 1.5rem !important; }

@media screen and (max-width: 1200px) {
    .fs10 { font-size: 0.5625rem !important; }
    .fs11 { font-size: 0.625rem !important; }
    .fs12 { font-size: 0.6875rem !important; }
    .fs13 { font-size: 0.75rem !important; }
    .fs14 { font-size: 0.8125rem !important; }
    .fs15 { font-size: 0.875rem !important; }
    .fs16 { font-size: 0.875rem !important; }
    .fs18 { font-size: 1rem !important; }
    .fs20 { font-size: 1.125rem !important; }
    .fs24 { font-size: 1.3125rem !important; }
}

@media screen and (max-width: 768px) {
    .fs10 { font-size: 0.5rem !important; }
    .fs11 { font-size: 0.5625rem !important; }
    .fs12 { font-size: 0.625rem !important; }
    .fs13 { font-size: 0.6875rem !important; }
    .fs14 { font-size: 0.75rem !important; }
    .fs15 { font-size: 0.8125rem !important; }
    .fs16 { font-size: 0.8125rem !important; }
    .fs18 { font-size: 0.875rem !important; }
    .fs20 { font-size: 1rem !important; }
    .fs24 { font-size: 1.125rem !important; }
}


/* ============================================================================
   9. フォントウェイト（.fw-xxx）
   ============================================================================ */

.fw-normal { font-weight: normal !important; }
.fw-bold   { font-weight: bold !important; }
.fw-600    { font-weight: 600 !important; }

/* 数値ウェイト（10011 互換） */
.fw-n  { font-weight: 400 !important; }
.fw-m  { font-weight: 500 !important; }
.fw-b  { font-weight: 600 !important; }
.fw-bb { font-weight: 700 !important; }


/* ============================================================================
   10. テキスト配置（.tal, .tac, .tar）
   ============================================================================ */

.tal { text-align: left !important; }
.tac { text-align: center !important; }
.tar { text-align: right !important; }


/* ============================================================================
   11. 垂直配置（.vat, .vam, .vab）
   ============================================================================ */

.vat { vertical-align: top !important; }
.vam { vertical-align: middle !important; }
.vab { vertical-align: bottom !important; }


/* ============================================================================
   12. マージン（.mt0 〜 .mt50 など）
   ============================================================================ */

/* リセット */
.m0 { margin: 0 !important; }

/* 上マージン */
.mt0  { margin-top: 0 !important; }
.mt5  { margin-top: 0.3125rem !important; }
.mt10 { margin-top: 0.625rem !important; }
.mt15 { margin-top: 0.9375rem !important; }
.mt20 { margin-top: 1.25rem !important; }
.mt30 { margin-top: 1.875rem !important; }
.mt40 { margin-top: 2.5rem !important; }
.mt50 { margin-top: 3.125rem !important; }

/* 下マージン */
.mb0  { margin-bottom: 0 !important; }
.mb5  { margin-bottom: 0.3125rem !important; }
.mb10 { margin-bottom: 0.625rem !important; }
.mb15 { margin-bottom: 0.9375rem !important; }
.mb20 { margin-bottom: 1.25rem !important; }
.mb30 { margin-bottom: 1.875rem !important; }
.mb40 { margin-bottom: 2.5rem !important; }
.mb50 { margin-bottom: 3.125rem !important; }

/* 左マージン */
.ml0  { margin-left: 0 !important; }
.ml5  { margin-left: 0.3125rem !important; }
.ml10 { margin-left: 0.625rem !important; }
.ml15 { margin-left: 0.9375rem !important; }
.ml20 { margin-left: 1.25rem !important; }
.ml30 { margin-left: 1.875rem !important; }
.ml40 { margin-left: 2.5rem !important; }
.ml50 { margin-left: 3.125rem !important; }

/* 右マージン */
.mr0  { margin-right: 0 !important; }
.mr5  { margin-right: 0.3125rem !important; }
.mr10 { margin-right: 0.625rem !important; }
.mr15 { margin-right: 0.9375rem !important; }
.mr20 { margin-right: 1.25rem !important; }
.mr30 { margin-right: 1.875rem !important; }
.mr40 { margin-right: 2.5rem !important; }
.mr50 { margin-right: 3.125rem !important; }

/* 中央寄せ */
.mauto { margin: 0 auto !important; }

/* タブレット */
@media screen and (max-width: 1200px) {
    .mt5  { margin-top: 0.25rem !important; }
    .mt10 { margin-top: 0.5rem !important; }
    .mt15 { margin-top: 0.8125rem !important; }
    .mt20 { margin-top: 1.0625rem !important; }
    .mt30 { margin-top: 1.5625rem !important; }
    .mt40 { margin-top: 2.125rem !important; }
    .mt50 { margin-top: 2.625rem !important; }

    .mb5  { margin-bottom: 0.25rem !important; }
    .mb10 { margin-bottom: 0.5rem !important; }
    .mb15 { margin-bottom: 0.8125rem !important; }
    .mb20 { margin-bottom: 1.0625rem !important; }
    .mb30 { margin-bottom: 1.5625rem !important; }
    .mb40 { margin-bottom: 2.125rem !important; }
    .mb50 { margin-bottom: 2.625rem !important; }

    .ml5  { margin-left: 0.25rem !important; }
    .ml10 { margin-left: 0.5rem !important; }
    .ml15 { margin-left: 0.8125rem !important; }
    .ml20 { margin-left: 1.0625rem !important; }
    .ml30 { margin-left: 1.5625rem !important; }
    .ml40 { margin-left: 2.125rem !important; }
    .ml50 { margin-left: 2.625rem !important; }

    .mr5  { margin-right: 0.25rem !important; }
    .mr10 { margin-right: 0.5rem !important; }
    .mr15 { margin-right: 0.8125rem !important; }
    .mr20 { margin-right: 1.0625rem !important; }
    .mr30 { margin-right: 1.5625rem !important; }
    .mr40 { margin-right: 2.125rem !important; }
    .mr50 { margin-right: 2.625rem !important; }
}

/* SP */
@media screen and (max-width: 768px) {
    .mt5  { margin-top: 0.1875rem !important; }
    .mt10 { margin-top: 0.4375rem !important; }
    .mt15 { margin-top: 0.625rem !important; }
    .mt20 { margin-top: 0.875rem !important; }
    .mt30 { margin-top: 1.3125rem !important; }
    .mt40 { margin-top: 1.75rem !important; }
    .mt50 { margin-top: 2.1875rem !important; }

    .mb5  { margin-bottom: 0.1875rem !important; }
    .mb10 { margin-bottom: 0.4375rem !important; }
    .mb15 { margin-bottom: 0.625rem !important; }
    .mb20 { margin-bottom: 0.875rem !important; }
    .mb30 { margin-bottom: 1.3125rem !important; }
    .mb40 { margin-bottom: 1.75rem !important; }
    .mb50 { margin-bottom: 2.1875rem !important; }

    .ml5  { margin-left: 0.1875rem !important; }
    .ml10 { margin-left: 0.4375rem !important; }
    .ml15 { margin-left: 0.625rem !important; }
    .ml20 { margin-left: 0.875rem !important; }
    .ml30 { margin-left: 1.3125rem !important; }
    .ml40 { margin-left: 1.75rem !important; }
    .ml50 { margin-left: 2.1875rem !important; }

    .mr5  { margin-right: 0.1875rem !important; }
    .mr10 { margin-right: 0.4375rem !important; }
    .mr15 { margin-right: 0.625rem !important; }
    .mr20 { margin-right: 0.875rem !important; }
    .mr30 { margin-right: 1.3125rem !important; }
    .mr40 { margin-right: 1.75rem !important; }
    .mr50 { margin-right: 2.1875rem !important; }
}


/* ============================================================================
   13. パディング（.pt0 〜 .pt50 など）
   ============================================================================ */

/* リセット */
.p0 { padding: 0 !important; }

/* 上パディング */
.pt0  { padding-top: 0 !important; }
.pt5  { padding-top: 0.3125rem !important; }
.pt10 { padding-top: 0.625rem !important; }
.pt15 { padding-top: 0.9375rem !important; }
.pt20 { padding-top: 1.25rem !important; }
.pt30 { padding-top: 1.875rem !important; }
.pt40 { padding-top: 2.5rem !important; }
.pt50 { padding-top: 3.125rem !important; }

/* 下パディング */
.pb0  { padding-bottom: 0 !important; }
.pb5  { padding-bottom: 0.3125rem !important; }
.pb10 { padding-bottom: 0.625rem !important; }
.pb15 { padding-bottom: 0.9375rem !important; }
.pb20 { padding-bottom: 1.25rem !important; }
.pb30 { padding-bottom: 1.875rem !important; }
.pb40 { padding-bottom: 2.5rem !important; }
.pb50 { padding-bottom: 3.125rem !important; }

/* 左パディング */
.pl0  { padding-left: 0 !important; }
.pl5  { padding-left: 0.3125rem !important; }
.pl10 { padding-left: 0.625rem !important; }
.pl15 { padding-left: 0.9375rem !important; }
.pl20 { padding-left: 1.25rem !important; }
.pl30 { padding-left: 1.875rem !important; }
.pl40 { padding-left: 2.5rem !important; }
.pl50 { padding-left: 3.125rem !important; }

/* 右パディング */
.pr0  { padding-right: 0 !important; }
.pr5  { padding-right: 0.3125rem !important; }
.pr10 { padding-right: 0.625rem !important; }
.pr15 { padding-right: 0.9375rem !important; }
.pr20 { padding-right: 1.25rem !important; }
.pr30 { padding-right: 1.875rem !important; }
.pr40 { padding-right: 2.5rem !important; }
.pr50 { padding-right: 3.125rem !important; }

/* タブレット */
@media screen and (max-width: 1200px) {
    .pt5  { padding-top: 0.25rem !important; }
    .pt10 { padding-top: 0.5rem !important; }
    .pt15 { padding-top: 0.8125rem !important; }
    .pt20 { padding-top: 1.0625rem !important; }
    .pt30 { padding-top: 1.5625rem !important; }
    .pt40 { padding-top: 2.125rem !important; }
    .pt50 { padding-top: 2.625rem !important; }

    .pb5  { padding-bottom: 0.25rem !important; }
    .pb10 { padding-bottom: 0.5rem !important; }
    .pb15 { padding-bottom: 0.8125rem !important; }
    .pb20 { padding-bottom: 1.0625rem !important; }
    .pb30 { padding-bottom: 1.5625rem !important; }
    .pb40 { padding-bottom: 2.125rem !important; }
    .pb50 { padding-bottom: 2.625rem !important; }

    .pl5  { padding-left: 0.25rem !important; }
    .pl10 { padding-left: 0.5rem !important; }
    .pl15 { padding-left: 0.8125rem !important; }
    .pl20 { padding-left: 1.0625rem !important; }
    .pl30 { padding-left: 1.5625rem !important; }
    .pl40 { padding-left: 2.125rem !important; }
    .pl50 { padding-left: 2.625rem !important; }

    .pr5  { padding-right: 0.25rem !important; }
    .pr10 { padding-right: 0.5rem !important; }
    .pr15 { padding-right: 0.8125rem !important; }
    .pr20 { padding-right: 1.0625rem !important; }
    .pr30 { padding-right: 1.5625rem !important; }
    .pr40 { padding-right: 2.125rem !important; }
    .pr50 { padding-right: 2.625rem !important; }
}

/* SP */
@media screen and (max-width: 768px) {
    .pt5  { padding-top: 0.1875rem !important; }
    .pt10 { padding-top: 0.4375rem !important; }
    .pt15 { padding-top: 0.625rem !important; }
    .pt20 { padding-top: 0.875rem !important; }
    .pt30 { padding-top: 1.3125rem !important; }
    .pt40 { padding-top: 1.75rem !important; }
    .pt50 { padding-top: 2.1875rem !important; }

    .pb5  { padding-bottom: 0.1875rem !important; }
    .pb10 { padding-bottom: 0.4375rem !important; }
    .pb15 { padding-bottom: 0.625rem !important; }
    .pb20 { padding-bottom: 0.875rem !important; }
    .pb30 { padding-bottom: 1.3125rem !important; }
    .pb40 { padding-bottom: 1.75rem !important; }
    .pb50 { padding-bottom: 2.1875rem !important; }

    .pl5  { padding-left: 0.1875rem !important; }
    .pl10 { padding-left: 0.4375rem !important; }
    .pl15 { padding-left: 0.625rem !important; }
    .pl20 { padding-left: 0.875rem !important; }
    .pl30 { padding-left: 1.3125rem !important; }
    .pl40 { padding-left: 1.75rem !important; }
    .pl50 { padding-left: 2.1875rem !important; }

    .pr5  { padding-right: 0.1875rem !important; }
    .pr10 { padding-right: 0.4375rem !important; }
    .pr15 { padding-right: 0.625rem !important; }
    .pr20 { padding-right: 0.875rem !important; }
    .pr30 { padding-right: 1.3125rem !important; }
    .pr40 { padding-right: 1.75rem !important; }
    .pr50 { padding-right: 2.1875rem !important; }
}


/* ============================================================================
   14. 背景色（.bg-xxx）
   ============================================================================ */

.bg-white   { background-color: var(--color-white) !important; }
.bg-gray    { background-color: var(--bg-body) !important; }
.bg-dark    { background-color: #1a1a2e !important; }
.bg-red     { background-color: #fef2f2 !important; }
.bg-green   { background-color: #ecfdf5 !important; }
.bg-blue    { background-color: #eff6ff !important; }
.bg-yellow  { background-color: #fffbeb !important; }
.bg-pink    { background-color: rgba(237, 46, 100, 0.1) !important; }
.bg-skyblue { background-color: #ddeaef !important; }


/* ============================================================================
   15. 表示制御（.d-none, .d-flex など）
   ============================================================================ */

.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-table        { display: table !important; }
.d-table-cell   { display: table-cell !important; }


/* ============================================================================
   16. Flexbox ユーティリティ
   ============================================================================ */

.flex-wrap       { flex-wrap: wrap !important; }
.flex-nowrap     { flex-wrap: nowrap !important; }
.flex-row        { flex-direction: row !important; }
.flex-column     { flex-direction: column !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }

.align-start     { align-items: flex-start !important; }
.align-center    { align-items: center !important; }
.align-end       { align-items: flex-end !important; }
.align-stretch   { align-items: stretch !important; }

.gap5  { gap: 0.3125rem !important; }
.gap10 { gap: 0.625rem !important; }
.gap15 { gap: 0.9375rem !important; }
.gap20 { gap: 1.25rem !important; }
.gap30 { gap: 1.875rem !important; }

@media screen and (max-width: 1200px) {
    .gap5  { gap: 0.25rem !important; }
    .gap10 { gap: 0.5rem !important; }
    .gap15 { gap: 0.8125rem !important; }
    .gap20 { gap: 1.0625rem !important; }
    .gap30 { gap: 1.5625rem !important; }
}

@media screen and (max-width: 768px) {
    .gap5  { gap: 0.1875rem !important; }
    .gap10 { gap: 0.4375rem !important; }
    .gap15 { gap: 0.625rem !important; }
    .gap20 { gap: 0.875rem !important; }
    .gap30 { gap: 1.3125rem !important; }
}


/* ============================================================================
   17. テキスト装飾
   ============================================================================ */

.text-underline    { text-decoration: underline !important; }
.text-line-through { text-decoration: line-through !important; }
.text-none         { text-decoration: none !important; }
.text-nowrap       { white-space: nowrap !important; }
.text-wrap         { white-space: normal !important; }
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-break {
    word-wrap: break-word;
    word-break: break-all;
}


/* ============================================================================
   18. ボーダー
   ============================================================================ */

.bd-none { border: none !important; }
.bd      { border: 1px solid var(--border-color) !important; }
.bd-t    { border-top: 1px solid var(--border-color) !important; }
.bd-b    { border-bottom: 1px solid var(--border-color) !important; }
.bd-l    { border-left: 1px solid var(--border-color) !important; }
.bd-r    { border-right: 1px solid var(--border-color) !important; }

.bd-primary   { border-color: var(--color-primary) !important; }
.bd-secondary { border-color: var(--color-secondary) !important; }
.bd-gray      { border-color: var(--color-gray-lighter) !important; }


/* ============================================================================
   19. 角丸
   ============================================================================ */

.radius0     { border-radius: 0 !important; }
.radius4     { border-radius: 0.25rem !important; }
.radius8     { border-radius: 0.5rem !important; }
.radius12    { border-radius: 0.75rem !important; }
.radius-full { border-radius: 9999px !important; }


/* ============================================================================
   20. カーソル
   ============================================================================ */

.cursor-pointer     { cursor: pointer !important; }
.cursor-default     { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }


/* ============================================================================
   21. フロート
   ============================================================================ */

.flL { float: left !important; }
.flR { float: right !important; }
.flN { float: none !important; }


/* ============================================================================
   22. 状態クラス
   ============================================================================ */

.is-required::after {
    content: "必須";
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: bold;
    color: var(--color-white);
    background-color: var(--color-error);
    border-radius: 0.25rem;
    vertical-align: middle;
}

.is-error {
    background-color: #fef2f2 !important;
    border-color: var(--color-error) !important;
}

.is-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.is-changed {
    background-color: #f7ecb0 !important;
}

.is-new {
    background-color: #e2f7ff !important;
}

.is-select {
    border: 1px solid var(--color-secondary) !important;
}


/* ============================================================================
   23. レスポンシブ表示制御
   ============================================================================ */

/* PCのみ表示 */
@media screen and (max-width: 1200px) {
  .pc-only {
    display: none !important;
  }
}
/* SPのみ表示 */
@media screen and (min-width: 1201px) {
  .sp-only {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {
    button[name="btnCsv"],
    button[name="print"] {
        display: none;
    }
}


/* ============================================================================
   24. スクロールバー
   ============================================================================ */

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background-color: #f1f5f9;
    border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #64748b 0%, #475569 100%);
}