html {
    font-size: 62.5%;
    color: var(--color-black);
}

* {
    /* 色定義 */
    --color-primary: #006E36;
    --color-primary-background: #E4F5EC;
    --color-secondary: #99CCB2;
    --color-white: #FEFEFE;
    --color-black: #313131;
    --color-gray: #D7D7D7;
    --color-light-gray: #F0F0F0;
    --color-light-yellow: #FFFFE0;
    --color-dark-gray: #777676;
    --color-danger: #E22E2E;
    --color-danger-background: #FFEFEF;
    --color-success: #006E36;
    /* 色使用 */
    --color-header: var(--color-white); /* ヘッダー */
    --color-btn-execute: var(--color-primary); /* ポジティブボタン */
    --color-btn-execute-action: #34a36b; /* ポジティブボタン(アクション時) */
    --color-btn-execute-outline-action: var(--color-primary-background); /* ポジティブアウトラインボタン(アクション時) */
    --color-btn-execute-secondary: var(--color-secondary); /* ポジティブボタン（セカンダリ） */
    --color-btn-execute-secondary-action: #BFE5D0; /* ポジティブボタン（セカンダリ）(アクション時) */
    --color-btn-back: var(--color-gray); /* ネガティブボタン */
    --color-btn-back-action: var(--color-light-gray); /* ネガティブボタン(アクション時) */
    --color-btn-danger: var(--color-danger); /* デンジャーボタン */
    --color-btn-danger-action: #f35e5e; /* デンジャーボタン(アクション時) */
    --color-btn-danger-outline-action: var(--color-danger-background); /* デンジャーアウトラインボタン(アクション時) */
    --color-error: var(--color-danger); /* エラーメッセージ */
    --color-error-background: var(--color-danger-background); /* エラーメッセージの背景色 */
    --color-disabled-background: var(--color-light-gray); /* 編集不可エリアの背景色 */
    --color-disabled-input-font-color: var(--color-dark-gray); /* 編集不可エリアの文字色 */
    --color-disabled-input-font-color: var(--color-gray); /* 編集不可エリアのボーダー色 */
    /* フォントサイズ */
    --font-size-header-menu: 1.4rem; /* ヘッダーメニューのフォントサイズ */
    --font-size-title: 2rem; /* 画面タイトルのフォントサイズ */
    --font-size-label-small: 1.4rem; /* ラベル(小)のフォントサイズ */
    --font-size-label-medium: 1.6rem; /* ラベル(中)のフォントサイズ */
    --font-size-label-large: 4rem; /* ラベル(大)のフォントサイズ */
    --font-size-annotation: 1.2rem; /* 注釈のフォントサイズ */
    --font-size-error: 1.4rem; /* バリデーションエラーのフォントサイズ */
    --font-size-button: 1.4rem; /* ボタンのフォントサイズ */
    /* wijimo grid */
    --wj-width-hourly-wage: 90px; /* 時給のグリッド横幅 */
    --wj-width-status: 100px; /* ステータスのグリッド横幅 */
    --wj-width-work-datetime: 155px; /* 勤務日時のグリッド横幅 */
    --wj-width-full-name-small: 140px; /* 氏名（小）のグリッド横幅 */
    --wj-width-full-name: 160px; /* 氏名のグリッド横幅 */
    --wj-width-age: 70px; /* 年齢のグリッド横幅 */
    --wj-width-gender: 70px; /* 性別のグリッド横幅 */
    --wj-width-birthdate: 110px; /* 生年月日のグリッド横幅 */
    --wj-width-apply-category-small: 139px; /* 応募枠（小）のグリッド横幅 */
    --wj-width-apply-category: 145px; /* 応募枠のグリッド横幅 */
    --wj-width-staff-status: 110px; /* スタッフステータスのグリッド横幅 */
    --wj-width-suspension: 72px; /* 停止中のグリッド横幅 */
    --wj-width-deactivated: 84px; /* 退会済みのグリッド横幅 */
    --wj-width-penalty-start: 140px; /* ペナルティ開始日のグリッド横幅 */
    --wj-width-apply-status: 110px; /* 応募ステータスのグリッド横幅 */
    --wj-width-review-class: 100px; /* 評価のグリッド横幅 */
    --wj-width-review-class-medium: 150px; /* 評価（中）のグリッド横幅 */
    --wj-width-work-start-date: 130px; /* 勤務日のグリッド横幅 */
    --wj-width-reward: 120px; /* 報酬金額のグリッド横幅 */
    --wj-width-staff-qualification-confirmation: 110px; /* 必須資格確認のグリッド横幅 */
    --wj-width-reward-status: 110px; /* 報酬申請状況のグリッド横幅 */
    --wj-width-terms-of-use-approval-date: 130px; /* 利用規約承認日のグリッド横幅 */
    --wj-width-payment-date: 110px; /* 支払い日のグリッド横幅 */
    --wj-width-applicant: 90px; /* 応募者のグリッド横幅 */
    --wj-width-phone-number: 130px; /* 電話番号のグリッド横幅 */
    --wj-width-last-message-send-datetime: 185px; /* 最終メッセージ送信日時のグリッド横幅 */
    --wj-width-button-small: 125px; /* ボタン（小）のグリッド横幅 */
    --wj-width-button-medium: 200px; /* ボタン（中）のグリッド横幅 */
    --wj-width-button-copy: 34px; /* ボタン（コピー）のグリッド横幅 */
    --wj-width-button-chat-small: 50px; /* ボタン（チャット）（小）のグリッド横幅 */
    --wj-width-button-chat: 60px; /* ボタン（チャット）のグリッド横幅 */
    --wj-width-application-number: 80px; /* 応募件数のグリッド横幅 */
    --wj-width-favorite: 96px; /* お気に入りのグリッド横幅 */
    --wj-width-block: 80px; /* ブロックのグリッド横幅 */
    /* 高さ・幅 */
    --header-height: 6rem; /* ヘッダーの高さ */
    --sidenav-width: 18rem; /* サイドナビの幅 */
    /* padding,margen,gap等 */
    --space-x-large: 4.8rem;
    --space-large: 3.2rem;
    --space-medium: 2.4rem;
    --space-small: 1.2rem;
    --space-x-small: 0.8rem;
    /* border-radius */
    --radius-small: 0.3rem;
}


.icon {
    --icon-block-danger: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ibWFzazBfNTMzMl82MDk3IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzEiIGhlaWdodD0iMzAiPjxyZWN0IHg9IjAuNSIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjRDlEOUQ5Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjbWFzazBfNTMzMl82MDk3KSI+PHBhdGggZD0iTTE1LjQ5OTEgMjguMTAwMkMxMy42ODc0IDI4LjEwMDIgMTEuOTg1OCAyNy43NTQzIDEwLjM5NDQgMjcuMDYyN0M4LjgwMjkyIDI2LjM3MTIgNy40MTUyMSAyNS40MzM1IDYuMjMxMjUgMjQuMjQ5NUM1LjA0NzUgMjMuMDY1NiA0LjExMjcxIDIxLjY3NSAzLjQyNjg4IDIwLjA3NzdDMi43NDEyNSAxOC40ODA0IDIuMzk4NDQgMTYuNzc1OSAyLjM5ODQ0IDE0Ljk2NDJDMi4zOTg0NCAxMy4xNTI2IDIuNzQxMjUgMTEuNDUzOSAzLjQyNjg4IDkuODY4M0M0LjExMjcxIDguMjgyODggNS4wNDc1IDYuOTAxMTEgNi4yMzEyNSA1LjcyMjk5QzcuNDE1MjEgNC41NDUwNyA4LjgwMjkyIDMuNjEzMiAxMC4zOTQ0IDIuOTI3MzZDMTEuOTg1OCAyLjI0MTc0IDEzLjY4NzQgMS44OTg5MyAxNS40OTkxIDEuODk4OTNDMTcuMzEwNyAxLjg5ODkzIDE5LjAxMjMgMi4yNDE3NCAyMC42MDM3IDIuOTI3MzZDMjIuMTk1MiAzLjYxMzIgMjMuNTgyOSA0LjU0NTA3IDI0Ljc2NjkgNS43MjI5OUMyNS45NTA2IDYuOTAxMTEgMjYuODg1NCA4LjI4Mjg4IDI3LjU3MTMgOS44NjgzQzI4LjI1NjkgMTEuNDUzOSAyOC41OTk3IDEzLjE1MjYgMjguNTk5NyAxNC45NjQyQzI4LjU5OTcgMTYuNzc1OSAyOC4yNTY5IDE4LjQ4MDQgMjcuNTcxMyAyMC4wNzc3QzI2Ljg4NTQgMjEuNjc1IDI1Ljk1MDYgMjMuMDY1NiAyNC43NjY5IDI0LjI0OTVDMjMuNTgyOSAyNS40MzM1IDIyLjE5NTIgMjYuMzcxMiAyMC42MDM3IDI3LjA2MjdDMTkuMDEyMyAyNy43NTQzIDE3LjMxMDcgMjguMTAwMiAxNS40OTkxIDI4LjEwMDJaTTE1LjQ5OTEgMjQuNzg3N0MxNi41Mjk5IDI0Ljc4NzcgMTcuNTMwOCAyNC42MzQ4IDE4LjUwMTkgMjQuMzI4OUMxOS40NzI5IDI0LjAyMzMgMjAuMzYwNSAyMy41NTYyIDIxLjE2NDcgMjIuOTI3N0w3LjUzNTYzIDkuMzE2MTFDNi45MzA2MyAxMC4xNDQgNi40NzUzMSAxMS4wMzc2IDYuMTY5NjkgMTEuOTk2N0M1Ljg2Mzg1IDEyLjk1NjEgNS43MTA5NCAxMy45NDUzIDUuNzEwOTQgMTQuOTY0MkM1LjcxMDk0IDE3LjY5NjkgNi42NjIwOCAyMC4wMTc0IDguNTY0MzggMjEuOTI1NUMxMC40NjY1IDIzLjgzMzYgMTIuNzc4IDI0Ljc4NzcgMTUuNDk5MSAyNC43ODc3Wk0yMy40OCAyMC42MTI0QzI0LjA3MzMgMTkuNzg0NCAyNC41MjI4IDE4Ljg5MDkgMjQuODI4NCAxNy45MzE3QzI1LjEzNDMgMTYuOTcyNCAyNS4yODcyIDE1Ljk4MzIgMjUuMjg3MiAxNC45NjQyQzI1LjI4NzIgMTIuMjQzMiAyNC4zMzYgOS45Mzc0NyAyMi40MzM4IDguMDQ3MDVDMjAuNTMxNyA2LjE1NjYzIDE4LjIyMDEgNS4yMTE0MyAxNS40OTkxIDUuMjExNDNDMTQuNDgwMSA1LjIxMTQzIDEzLjQ5NCA1LjM1ODQgMTIuNTQwNiA1LjY1MjM2QzExLjU4NzMgNS45NDYzMiAxMC42OTY3IDYuMzg5OTcgOS44Njg3NSA2Ljk4MzNMMjMuNDggMjAuNjEyNFoiIGZpbGw9IiNFMjJFMkUiLz48L2c+PC9zdmc+");
    --icon-block-white: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ibWFzazBfNTMzMl82MDk3IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzEiIGhlaWdodD0iMzAiPjxyZWN0IHg9IjAuNSIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjRDlEOUQ5Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjbWFzazBfNTMzMl82MDk3KSI+PHBhdGggZD0iTTE1LjQ5OTEgMjguMTAwMkMxMy42ODc0IDI4LjEwMDIgMTEuOTg1OCAyNy43NTQzIDEwLjM5NDQgMjcuMDYyN0M4LjgwMjkyIDI2LjM3MTIgNy40MTUyMSAyNS40MzM1IDYuMjMxMjUgMjQuMjQ5NUM1LjA0NzUgMjMuMDY1NiA0LjExMjcxIDIxLjY3NSAzLjQyNjg4IDIwLjA3NzdDMi43NDEyNSAxOC40ODA0IDIuMzk4NDQgMTYuNzc1OSAyLjM5ODQ0IDE0Ljk2NDJDMi4zOTg0NCAxMy4xNTI2IDIuNzQxMjUgMTEuNDUzOSAzLjQyNjg4IDkuODY4M0M0LjExMjcxIDguMjgyODggNS4wNDc1IDYuOTAxMTEgNi4yMzEyNSA1LjcyMjk5QzcuNDE1MjEgNC41NDUwNyA4LjgwMjkyIDMuNjEzMiAxMC4zOTQ0IDIuOTI3MzZDMTEuOTg1OCAyLjI0MTc0IDEzLjY4NzQgMS44OTg5MyAxNS40OTkxIDEuODk4OTNDMTcuMzEwNyAxLjg5ODkzIDE5LjAxMjMgMi4yNDE3NCAyMC42MDM3IDIuOTI3MzZDMjIuMTk1MiAzLjYxMzIgMjMuNTgyOSA0LjU0NTA3IDI0Ljc2NjkgNS43MjI5OUMyNS45NTA2IDYuOTAxMTEgMjYuODg1NCA4LjI4Mjg4IDI3LjU3MTMgOS44NjgzQzI4LjI1NjkgMTEuNDUzOSAyOC41OTk3IDEzLjE1MjYgMjguNTk5NyAxNC45NjQyQzI4LjU5OTcgMTYuNzc1OSAyOC4yNTY5IDE4LjQ4MDQgMjcuNTcxMyAyMC4wNzc3QzI2Ljg4NTQgMjEuNjc1IDI1Ljk1MDYgMjMuMDY1NiAyNC43NjY5IDI0LjI0OTVDMjMuNTgyOSAyNS40MzM1IDIyLjE5NTIgMjYuMzcxMiAyMC42MDM3IDI3LjA2MjdDMTkuMDEyMyAyNy43NTQzIDE3LjMxMDcgMjguMTAwMiAxNS40OTkxIDI4LjEwMDJaTTE1LjQ5OTEgMjQuNzg3N0MxNi41Mjk5IDI0Ljc4NzcgMTcuNTMwOCAyNC42MzQ4IDE4LjUwMTkgMjQuMzI4OUMxOS40NzI5IDI0LjAyMzMgMjAuMzYwNSAyMy41NTYyIDIxLjE2NDcgMjIuOTI3N0w3LjUzNTYzIDkuMzE2MTFDNi45MzA2MyAxMC4xNDQgNi40NzUzMSAxMS4wMzc2IDYuMTY5NjkgMTEuOTk2N0M1Ljg2Mzg1IDEyLjk1NjEgNS43MTA5NCAxMy45NDUzIDUuNzEwOTQgMTQuOTY0MkM1LjcxMDk0IDE3LjY5NjkgNi42NjIwOCAyMC4wMTc0IDguNTY0MzggMjEuOTI1NUMxMC40NjY1IDIzLjgzMzYgMTIuNzc4IDI0Ljc4NzcgMTUuNDk5MSAyNC43ODc3Wk0yMy40OCAyMC42MTI0QzI0LjA3MzMgMTkuNzg0NCAyNC41MjI4IDE4Ljg5MDkgMjQuODI4NCAxNy45MzE3QzI1LjEzNDMgMTYuOTcyNCAyNS4yODcyIDE1Ljk4MzIgMjUuMjg3MiAxNC45NjQyQzI1LjI4NzIgMTIuMjQzMiAyNC4zMzYgOS45Mzc0NyAyMi40MzM4IDguMDQ3MDVDMjAuNTMxNyA2LjE1NjYzIDE4LjIyMDEgNS4yMTE0MyAxNS40OTkxIDUuMjExNDNDMTQuNDgwMSA1LjIxMTQzIDEzLjQ5NCA1LjM1ODQgMTIuNTQwNiA1LjY1MjM2QzExLjU4NzMgNS45NDYzMiAxMC42OTY3IDYuMzg5OTcgOS44Njg3NSA2Ljk4MzNMMjMuNDggMjAuNjEyNFoiIGZpbGw9IiNGRUZFRkUiLz48L2c+PC9zdmc+");
}

    .icon[class*="icon-"] {
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: var(--current-size);
        min-width: var(--current-size);
        height: var(--current-size);
        min-height: var(--current-size);
    }

    .icon.icon-16 {
        --current-size: 1.6rem;
    }

    .icon.icon-20 {
        --current-size: 2rem;
    }

    .icon.icon-24 {
        --current-size: 2.4rem;
    }

    .icon.icon-28 {
        --current-size: 2.8rem;
    }

    .icon.icon-32 {
        --current-size: 3.2rem;
    }

    .icon.icon-block-danger {
        background-image: var(--icon-block-danger)
    }

    .icon.icon-block-white {
        background-image: var(--icon-block-white)
    }

body {
    margin: 0;
}

.body-content,
.body-content * {
    font-size: var(--font-size-label-small);
}

.body-content {
    box-sizing: border-box;
    width: calc(100% - var(--sidenav-width));
    padding: var(--space-medium);
    margin-top: var(--header-height);
    position: relative;
}

.body-section:not(:first-child):not(#RequestVerificationToken + .body-section),
.modal-body #dialogMessage .body-section:not(:first-child):not(#RequestVerificationToken + .body-section) {
    margin-top: var(--space-medium);
}

.body-section .body-content-inner:not(:first-child),
.body-section .body-content-inner-short:not(:first-child),
.modal-body #dialogMessage .body-section .body-content-inner:not(:first-child) {
    padding-left: var(--space-small);
    padding-right: var(--space-small);
    margin-top: var(--space-medium);
}

.body-section .body-content-inner-short {
    min-height: 39rem;
}

h2, h3, h4, hr {
    margin: 0;
}

    h2 > .breadcrumb-list {
        margin-left: var(--space-medium);
    }

.line-break {
    white-space: pre-wrap;
}

.success {
    color: var(--color-success);
}

.danger {
    color: var(--color-danger);
}

.confirmation {
    color: var(--color-dark-gray);
}

.bold {
    font-weight: bold;
}

.breadcrumb-list {
    display: inline-flex;
    gap: var(--space-medium);
}

    .breadcrumb-list > .breadcrumb-item {
        position: relative;
        z-index: -1;
    }

        .breadcrumb-list > .breadcrumb-item:not(:first-child):before {
            content: "＞";
            display: inline-block;
            position: absolute;
            left: calc(var(--space-medium) / 2 * -1);
            top: 50%;
            transform: translate(-50%, -50%);
        }

.button-wrapper {
    display: flex;
    gap: var(--space-medium);
    justify-content: flex-end;
    margin-top: 3rem;
}

#inputForm {
    flex-direction: column;
}

    #inputForm header {
        margin-top: 0.8rem;
        margin-right: 2rem;
        margin-left: 2rem;
    }

        #inputForm header .header-title {
            padding-right: 2rem;
            font-size: var(--font-size-title);
            font-weight: bold;
        }

        #inputForm header .header-contents {
            display: inline-block;
            vertical-align: bottom;
        }

            #inputForm header .header-contents span {
                font-size: var(--font-size-label-medium);
            }

    #inputForm div[class$="-container"] {
        padding-right: 3rem;
        padding-left: 3rem;
        margin-top: 1.5rem;
    }

.field-validation-error {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 2rem;
    margin-bottom: 1rem;
    color: var(--color-error);
    background-color: var(--color-error-background);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    font-size: var(--font-size-error);
    min-width: 38rem;
    max-width: 38rem;
}

button {
    border: none;
    padding: var(--space-x-small);
    font-weight: 500;
}

    button:not(:disabled):hover {
        cursor: pointer;
    }

    button.button-large {
        min-width: 14rem;
    }

.btn-back {
    min-width: 10rem;
    background-color: var(--color-btn-back);
    color: var(--color-black);
    font-size: var(--font-size-button);
    border-radius: var(--radius-small);
}

    .btn-back:not(:disabled):hover {
        background-color: var(--color-btn-back-action);
    }

        .btn-back:not(:disabled):hover:active {
            background-color: var(--color-btn-back-action);
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-execute {
    min-width: 10rem;
    background-color: var(--color-btn-execute);
    color: var(--color-white);
    font-size: var(--font-size-button);
    border-radius: var(--radius-small);
}

    .btn-execute:not(:disabled):hover {
        background-color: var(--color-btn-execute-action);
    }

        .btn-execute:not(:disabled):hover:active {
            background-color: var(--color-btn-execute-action);
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-execute-outline {
    min-width: 10rem;
    background-color: var(--color-white);
    color: var(--color-btn-execute);
    font-size: var(--font-size-button);
    border: 0.2rem solid var(--color-btn-execute);
    border-radius: var(--radius-small);
}

    .btn-execute-outline:not(:disabled):hover {
        background-color: var(--color-btn-execute-outline-action);
    }

        .btn-execute-outline:not(:disabled):hover:active {
            background-color: var(--color-btn-execute-outline-action);
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-execute-secondary {
    min-width: 10rem;
    background-color: var(--color-btn-execute-secondary);
    color: var(--color-black);
    font-size: var(--font-size-button);
    border-radius: var(--radius-small);
}

    .btn-execute-secondary:not(:disabled):hover {
        background-color: var(--color-btn-execute-secondary-action);
    }

        .btn-execute-secondary:not(:disabled):hover:active {
            background-color: var(--color-btn-execute-secondary-action);
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 10rem;
    background-color: var(--color-btn-danger);
    color: var(--color-white);
    font-size: var(--font-size-button);
    border-radius: var(--radius-small);
}

    .btn-danger:not(:disabled):hover {
        background-color: var(--color-btn-danger-action);
    }

        .btn-danger:not(:disabled):hover:active {
            background-color: var(--color-btn-danger-action);
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-danger-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 10rem;
    background-color: var(--color-white);
    color: var(--color-btn-danger);
    font-size: var(--font-size-button);
    border: 0.2rem solid var(--color-btn-danger);
    border-radius: var(--radius-small);
}

    .btn-danger-outline:not(:disabled):hover {
        background-color: var(--color-btn-danger-outline-action);
    }

        .btn-danger-outline:not(:disabled):hover:active {
            background-color: var(--color-btn-danger-outline-action);
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-copy {
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjMWYxZjFmIj48cGF0aCBkPSJNNzYwLTIwMEgzMjBxLTMzIDAtNTYuNS0yMy41VDI0MC0yODB2LTU2MHEwLTMzIDIzLjUtNTYuNVQzMjAtOTIwaDI4MGwyNDAgMjQwdjQwMHEwIDMzLTIzLjUgNTYuNVQ3NjAtMjAwWk01NjAtNjQwdi0yMDBIMzIwdjU2MGg0NDB2LTM2MEg1NjBaTTE2MC00MHEtMzMgMC01Ni41LTIzLjVUODAtMTIwdi01NjBoODB2NTYwaDQ0MHY4MEgxNjBabTE2MC04MDB2MjAwLTIwMCA1NjAtNTYwWiIvPjwvc3ZnPg==");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}

    .btn-copy:not(:disabled):hover {
        filter: brightness(2.5);
    }

        .btn-copy:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-chat {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ibWFzazBfMTEzMV8xMTQ4MSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9IiNEOUQ5RDkiLz48L21hc2s+PGcgbWFzaz0idXJsKCNtYXNrMF8xMTMxXzExNDgxKSI+PHBhdGggZD0iTTEyIDI4SDI4VjI0SDEyVjI4Wk0xMiAyMkgzNlYxOEgxMlYyMlpNMTIgMTZIMzZWMTJIMTJWMTZaTTQgNDRWOEM0IDYuOSA0LjM5MTY3IDUuOTU4MzMgNS4xNzUgNS4xNzVDNS45NTgzMyA0LjM5MTY3IDYuOSA0IDggNEg0MEM0MS4xIDQgNDIuMDQxNyA0LjM5MTY3IDQyLjgyNSA1LjE3NUM0My42MDgzIDUuOTU4MzMgNDQgNi45IDQ0IDhWMzJDNDQgMzMuMSA0My42MDgzIDM0LjA0MTcgNDIuODI1IDM0LjgyNUM0Mi4wNDE3IDM1LjYwODMgNDEuMSAzNiA0MCAzNkgxMkw0IDQ0Wk0xMC4zIDMySDQwVjhIOFYzNC4yNUwxMC4zIDMyWiIgZmlsbD0iIzAwNkUzNiIvPjwvZz48L3N2Zz4=");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}

    .btn-chat:not(:disabled):hover {
        filter: brightness(1.4);
    }

        .btn-chat:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-reload {
    width: 2.4rem;
    height: 2.4rem;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjIiIGhlaWdodD0iNjIiIHZpZXdCb3g9IjAgMCA2MiA2MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ibWFzazBfMTc1MV8xNTg4NiIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjYyIiBoZWlnaHQ9IjYyIj48cmVjdCB3aWR0aD0iNjIiIGhlaWdodD0iNjIiIGZpbGw9IiNEOUQ5RDkiLz48L21hc2s+PGcgbWFzaz0idXJsKCNtYXNrMF8xNzUxXzE1ODg2KSI+PHBhdGggZD0iTTMwLjg1MzMgNTIuOTA4QzI0Ljc2NzQgNTIuOTA4IDE5LjU5NDcgNTAuNzc4IDE1LjMzNTIgNDYuNTE4MUMxMS4wNzUzIDQyLjI1ODYgOC45NDUzMSAzNy4wODU5IDguOTQ1MzEgMzFDOC45NDUzMSAyNC45MTQxIDExLjA3NTMgMTkuNzQxNCAxNS4zMzUyIDE1LjQ4MTlDMTkuNTk0NyAxMS4yMjIgMjQuNzY3NCA5LjA5MjA0IDMwLjg1MzMgOS4wOTIwNEMzNC4wNDMzIDkuMDkyMDQgMzcuMDczNSA5Ljc0MjE4IDM5Ljk0NCAxMS4wNDI1QzQyLjgxNDUgMTIuMzQyMyA0NS4yNjc0IDE0LjIxODQgNDcuMzAyNiAxNi42NzA5VjExLjk2NzNDNDcuMzAyNiAxMS4xNTI3IDQ3LjU3ODIgMTAuNDY5OCA0OC4xMjkzIDkuOTE4NzFDNDguNjgwNCA5LjM2NzYgNDkuMzYzMyA5LjA5MjA0IDUwLjE3NzkgOS4wOTIwNEM1MC45OTI1IDkuMDkyMDQgNTEuNjc1NCA5LjM2NzYgNTIuMjI2NSA5LjkxODcxQzUyLjc3NzYgMTAuNDY5OCA1My4wNTMxIDExLjE1MjcgNTMuMDUzMSAxMS45NjczVjI1LjU0MTRDNTMuMDUzMSAyNi40OTI1IDUyLjcyMDMgMjcuMzAwNyA1Mi4wNTQ3IDI3Ljk2NTlDNTEuMzg5NSAyOC42MzE1IDUwLjU4MTMgMjguOTY0MyA0OS42MzAyIDI4Ljk2NDNIMzUuOTgzMUMzNS4xNzg4IDI4Ljk2NDMgMzQuNTA0NiAyOC42ODg4IDMzLjk2MDQgMjguMTM3N0MzMy40MTY2IDI3LjU4NjYgMzMuMTQ0NyAyNi45MDM3IDMzLjE0NDcgMjYuMDg5MUMzMy4xNDQ3IDI1LjI4NDggMzMuNDIwMiAyNC42MTA2IDMzLjk3MTQgMjQuMDY2M0MzNC41MjI1IDIzLjUyMjEgMzUuMjA1MyAyMy4yNSAzNi4wMTk5IDIzLjI1SDQzLjc3NThDNDIuMzk4IDIwLjk4NDggNDAuNTY3OSAxOS4yIDM4LjI4NTUgMTcuODk1NEMzNi4wMDM2IDE2LjU5MDQgMzMuNTI2MiAxNS45Mzc5IDMwLjg1MzMgMTUuOTM3OUMyNi42Njk2IDE1LjkzNzkgMjMuMTEzMiAxNy40MDIyIDIwLjE4NDEgMjAuMzMwOEMxNy4yNTU1IDIzLjI1OTkgMTUuNzkxMSAyNi44MTYzIDE1Ljc5MTEgMzFDMTUuNzkxMSAzNS4xODM3IDE3LjI1NTUgMzguNzQwMSAyMC4xODQxIDQxLjY2OTJDMjMuMTEzMiA0NC41OTc4IDI2LjY2OTYgNDYuMDYyMSAzMC44NTMzIDQ2LjA2MjFDMzMuNTEzMiA0Ni4wNjIxIDM1Ljk2ODMgNDUuNDEwNyAzOC4yMTg0IDQ0LjEwNzhDNDAuNDY4NCA0Mi44MDUgNDIuMjczMSA0MS4wNjI5IDQzLjYzMjQgMzguODgxN0M0NC4xMTM3IDM4LjEyOTEgNDQuNzkwNCAzNy42MDQ5IDQ1LjY2MjIgMzcuMzA5MUM0Ni41MzQ1IDM3LjAxMzggNDcuMzg3OSAzNy4wMjI0IDQ4LjIyMjMgMzcuMzM1QzQ5LjExMjMgMzcuNjQ3NiA0OS43NTY2IDM4LjIyMTMgNTAuMTU1MyAzOS4wNTYxQzUwLjU1NCAzOS44OTEgNTAuNTMyNSA0MC42ODI4IDUwLjA5MDcgNDEuNDMxNUM0OC4xNzk1IDQ0LjkwMDUgNDUuNTIwOCA0Ny42ODA0IDQyLjExNDcgNDkuNzcxMUMzOC43MDg1IDUxLjg2MjQgMzQuOTU0NyA1Mi45MDggMzAuODUzMyA1Mi45MDhaIiBmaWxsPSIjMzEzMTMxIi8+PC9nPjwvc3ZnPg==");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}

    .btn-reload:not(:disabled):hover {
        filter: brightness(2.5);
    }

        .btn-reload:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.tab-header {
    list-style: none;
    padding: 0;
    display: flex;
    border-bottom: 1px solid #ccc;
    margin: var(--space-medium) 0;
}

    .tab-header button {
        padding: 10px 20px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-bottom: none;
    }

        .tab-header button.active {
            background: #fac94b;
            font-weight: bold;
        }

.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

.required-mark {
    color: var(--color-danger);
    margin-left: 4px;
    font-weight: bold;
}

.annotation {
    color: var(--color-dark-gray);
    font-size: var(--font-size-annotation);
}

.download-file {
    display: inline-flex;
    color: var(--color-dark-gray);
    font-size: var(--font-size-annotation);
    text-decoration: none;
}

.image-small {
    max-height: 5rem;
    max-width: 5rem;
    height: auto;
    width: auto;
}

    .image-small[src=""],
    .image-small:not([src]) {
        max-width: 10rem;
        width: auto;
    }

.image-medium {
    max-height: 20rem;
    max-width: 20rem;
    height: auto;
    width: auto;
    object-fit: contain;
    object-position: left;
}

/* flexgrid ------------------------------------------------- */
.grid-table-wrapper {
    margin-top: var(--space-medium);
}

    .grid-table-wrapper div[id$="no-result"] {
        text-align: center;
    }

.wj-content {
    position: relative;
    z-index: 0;
    border-radius: 0;
    border: 2px solid var(--color-light-gray);
    border-bottom: none;
}

.wj-flexgrid .wj-cell {
    color: var(--color-black);
    display: flex;
    align-items: center;
    padding-top: var(--space-x-small);
    padding-bottom: var(--space-x-small);
    border-right: none;
    border-bottom: 2px solid var(--color-light-gray);
}

.wj-flexgrid .wj-row .wj-cell:not(:last-child) {
    padding-right: 0;
}

.wj-flexgrid .wj-row .wj-cell:not(:first-child) {
    padding-left: var(--space-medium);
}

.wj-flexgrid .wj-cell.center {
    justify-content: center;
    text-align: center;
}

.wj-flexgrid .wj-cell .wj-cell-maker {
    width: 100%;
    height: auto;
}

.wj-flexgrid .wj-cell .cell-child,
.wj-flexgrid a.wj-cell-maker {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wj-cell.wj-header {
    color: var(--color-black);
    background: var(--color-light-gray);
    font-size: var(--font-size-label-small);
}

.wj-cell.wj-cell-button {
    padding-top: var(--space-x-small);
    padding-bottom: var(--space-x-small);
    justify-content: flex-end;
}

.wj-cell img {
    max-height: 5rem;
    max-width: 9rem;
    height: auto;
    width: auto;
}

.wj-flexgrid .wj-cell:not([wj-state-measuring]) button.btn-execute.wj-cell-maker {
    color: var(--color-white);
}

.wj-flexgrid .wj-cell:not([wj-state-measuring]) button.wj-cell-maker {
    position: relative;
    display: block;
    width: auto;
    height: auto;
}

    .wj-flexgrid .wj-cell:not([wj-state-measuring]) button.wj-cell-maker.btn-copy,
    .wj-flexgrid .wj-cell:not([wj-state-measuring]) button.wj-cell-maker.btn-chat {
        width: 2.8rem;
        height: 2.8rem;
    }
/* ---------------------------------------------------------- */

/* wijmo.input.InputDate------------------------------------- */
.wj-calendar .not-selectable {
    opacity: 0.2;
}

.input-date {
    width: 20rem;
    height: calc(var(--font-size-label-small) 1.4rem + calc(var(--space-x-small) * 2));
    border: 1px solid var(--color-dark-gray);
    border-radius: 0.2rem
}

.wj-state-disabled:not(.wj-popup) {
    border-color: var(--color-disabled-input-font-color);
    opacity: 1;
}
/* ---------------------------------------------------------- */
/* 詳細テーブル --------------------------------------------- */
.detail-table {
    width: 100%;
    table-layout: fixed;
}

    .detail-table th,
    .detail-table td {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        line-height: 1.5;
    }

    .detail-table tr:not(:first-of-type) th,
    .detail-table tr:not(:first-of-type) td {
        padding-top: var(--space-small);
    }

    .detail-table th {
        width: 16rem;
        text-align: left;
        vertical-align: top;
        font-weight: normal;
        padding-left: 0;
    }

    .detail-table td {
        word-break: break-all;
        padding-left: var(--space-large);
    }

.work-content-list,
.required-qualification-list {
    margin: 0;
    padding-left: var(--space-medium);
}

.with-separator-line-item {
    max-width: 20rem;
}

    .with-separator-line-item:not(:last-child) {
        padding-bottom: var(--space-small);
    }

    .with-separator-line-item:not(:first-child) {
        padding-top: var(--space-small);
        background-image: repeating-linear-gradient(90deg, var(--color-dark-gray), var(--color-dark-gray) 1.2rem, transparent 1.2rem, transparent 2.4rem);
        background-position: left top;
        background-repeat: repeat-x;
        background-size: 100% 0.1rem;
    }

/* ---------------------------------------------------------- */

.tilde {
    display: inline-flex;
    align-items: center;
}

    .tilde::after {
        content: "～";
    }

span.error {
    color: var(--color-error);
}

div.error-title {
    font-size: var(--font-size-label-large);
    color: var(--color-danger);
}

div.error-comment {
    font-size: var(--font-size-label-medium);
    padding-top: 1rem;
}

/* 検索エリア ----------------------------------------------- */
.search-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    margin-top: var(--space-medium);
    padding: var(--space-medium);
    background-color: var(--color-light-gray);
}

    .search-area .input-group {
        display: flex;
        gap: var(--space-x-large);
        margin-top: 0;
    }

    .search-area .input-date-period-wrapper {
        display: inline-flex;
        gap: var(--space-medium);
    }

    .search-area .input-wrapper {
        display: inline-flex;
        align-items: center;
        gap: var(--space-small);
    }

    .search-area .input-label,
    .search-area .checkbox-label {
        display: inline-block;
    }

    .search-area .input-label {
        width: 15rem;
    }

    .search-area .button-group {
        display: flex;
        justify-content: flex-end;
    }
/* ------------------------------------------------------------ */

/* 新規登録ボタンエリア --------------------------------------- */
.new-registration-group {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-medium);
    padding: 0 var(--space-medium);
}
/* ------------------------------------------------------------ */

/* 入力エリア ------------------------------------------------- */
select,
input,
textarea,
.wj-control .wj-input-group .wj-form-control {
    font-family: inherit;
    color: var(--color-black);
}

    select:disabled,
    input:disabled,
    textarea:disabled {
        color: var(--color-input-disabled-font-color);
        opacity: 0.7;
    }

    select, input[type=text], input[type=password], input[type=datetime], input[type=date] {
        height: calc(var(--font-size-label-small) + calc(var(--space-x-small) * 2));
        box-sizing: border-box;
    }

        select:not(:disabled), input[type=datetime]:not(:disabled), input[type=date]:not(:disabled), input[type=checkbox]:not(:disabled), input[type=checkbox]:not(:disabled) ~ label {
            cursor: pointer;
        }

        select.select-medium,
        input.input-medium {
            width: 20rem;
        }

        select.select-long,
        input.input-long {
            width: 40rem;
        }

textarea {
    box-sizing: border-box;
    line-height: 1.5;
}

    textarea.input-long {
        width: 40rem;
        resize: none;
    }

    textarea.input-full {
        width: 100%;
        resize: none;
    }

.input-group {
    margin-top: var(--space-small);
    display: flex;
    align-items: flex-start;
}

    .input-group .input-label-group-short,
    .input-group .input-label-annotation-group-short {
        display: inline-flex;
        width: 19.5rem;
        text-align: left;
        vertical-align: top;
        flex-shrink: 0;
    }

    .input-group .input-label-group,
    .input-group .input-label-annotation-group {
        display: inline-flex;
        width: 23rem;
        text-align: left;
        vertical-align: top;
        flex-shrink: 0;
    }

    .input-group .input-label-annotation-group,
    .input-group .input-label-annotation-group-short {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .input-group .input-item-group {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

        .input-group .input-item-group .field-validation-valid:empty {
            margin-top: -1rem;
        }

        .input-group .input-item-group .input-wrapper {
            display: flex;
            align-items: center;
            gap: var(--space-small);
        }

        .input-group .input-item-group .with-separator-line-item {
            min-width: 20rem;
        }
/* ------------------------------------------------------------ */

/* アイコン---------------------------------------------------- */
.material-symbols-outlined {
    color: var(--color-dark-gray)
}
/* ------------------------------------------------------------ */