@import '_content/RazorLibrary/RazorLibrary.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-iaqrn1db8n] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-iaqrn1db8n] {
    flex: 1;
}

.sidebar[b-iaqrn1db8n] {
    background-color: #00BCD4;
}

.top-row[b-iaqrn1db8n] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-iaqrn1db8n]  a, .top-row[b-iaqrn1db8n]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-iaqrn1db8n]  a:hover, .top-row[b-iaqrn1db8n]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-iaqrn1db8n]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ���[�U�[���S�̂��͂ރR���e�i�̃X�^�C�� */
    .top-row .user-info[b-iaqrn1db8n] {
        display: flex; /* �^�O�������тɂ��� */
        align-items: center;
        gap: 0.75rem; /* �^�O�Ԃ̃X�y�[�X */
    }

    /* �e���^�O�̊�{�X�^�C�� */
    .top-row .info-item[b-iaqrn1db8n] {
        background-color: #d1e7dd; /* �����O���[�̔w�i */
        color: #0f5132; /* �����Z���O���[�̕��� */
        padding: 0.3rem 0.8rem; /* �^�O���̗]�� */
        border-radius: 1rem; /* �p���ۂ����āu�s���v�`��� */
        font-size: 0.8rem;
        white-space: nowrap; /* �܂�Ԃ���h�� */
    }

@media (max-width: 640.98px) {
    .top-row[b-iaqrn1db8n] {
        justify-content: space-between;
    }

    .top-row[b-iaqrn1db8n]  a, .top-row[b-iaqrn1db8n]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-iaqrn1db8n] {
        flex-direction: row;
    }

    .sidebar[b-iaqrn1db8n] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-iaqrn1db8n] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-iaqrn1db8n]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-iaqrn1db8n], article[b-iaqrn1db8n] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/*13�C���`�ȏ�16�C���`����*/
@media screen and (min-width: 1280px) and (max-width: 1359px) {
    .sidebar[b-iaqrn1db8n] {
        width: 200px;
    }
}

/* ���O�A�E�g�{�^���̃X�^�C�� */
.logout-button[b-iaqrn1db8n] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 1rem; /* ���[�U�[���Ƃ̊Ԋu */
    display: flex;
    align-items: center;
}

/* ���O�A�E�g�A�C�R����SVG�ƃT�C�Y */
.bi-logout-nav-menu[b-iaqrn1db8n] {
    display: inline-block;
    background-size: cover;
    width: 1.5rem; /* �� 1.3rem ����ύX */
    height: 1.5rem; /* �� 1.3rem ����ύX */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23343a40' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
}

/* �z�o�[���ɃA�C�R���������Z������ */
.logout-button:hover .bi-logout-nav-menu[b-iaqrn1db8n] {
    filter: brightness(0.8);
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-m770u3tkgc] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-m770u3tkgc] {
    height: 3.5rem;
    background-color: #00BCD4;
}

.navbar-brand[b-m770u3tkgc] {
    font-size: 1.1rem;
    color: white;
}
    .navbar-brand .logo-mask[b-m770u3tkgc] {
        width: 100px;
        height: 40px;
        -webkit-mask: url('_content/RazorLibrary/logo/CIRCULIT_logo design.svg') no-repeat center / contain;
        mask: url('_content/RazorLibrary/logo/CIRCULIT_logo design.svg') no-repeat center / contain;
        background: #ffffff;
    }

.bi[b-m770u3tkgc] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

/*�Č��ꗗ*/
.bi-topic-nav-menu[b-m770u3tkgc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-collection' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z'/%3E%3C/svg%3E");
}

/*�V�K�Č��ꗗ*/
.bi-topic-plus-nav-menu[b-m770u3tkgc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-earmark-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z'/%3E%3C/svg%3E");
}

/*�A�J�E���g���*/
.bi-account-nav-menu[b-m770u3tkgc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z'/%3E%3C/svg%3E");
}

/*�ڋq�Ǘ�*/
.bi-customer-nav-menu[b-m770u3tkgc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3Cpath fill-rule='evenodd' d='M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}

/*�e���*/
.bi-yakkan-nav-menu[b-m770u3tkgc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-earmark-text' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z'/%3E%3C/svg%3E");
}

/*�����p�K�C�h*/
.bi-guide-nav-menu[b-m770u3tkgc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-book' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z'/%3E%3C/svg%3E");
}

/*JAMAT���[�U�Ǘ�*/
.bi-jamat-user-nav-menu[b-m770u3tkgc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm4.5 0a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm5 2.755C12.146 12.825 10.623 12 8 12s-4.146.826-5 1.755V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.245z'/%3E%3C/svg%3E");
}

.nav-item[b-m770u3tkgc] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-m770u3tkgc] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-m770u3tkgc] {
        padding-bottom: 1rem;
    }

    .nav-item[b-m770u3tkgc]  a {
        color: white;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-m770u3tkgc]  a.active {
            background-color: rgba(255,255,255,0.37);
            color: white;
        }

        .nav-item[b-m770u3tkgc]  a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

@media (min-width: 641px) {
    .navbar-toggler[b-m770u3tkgc] {
        display: none;
    }

    .collapse[b-m770u3tkgc] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-m770u3tkgc] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        background-color: #00BCD4;
    }
}
/* /Pages/A01/Chat/ChatPanel.razor.rz.scp.css */
/* チャットパネル全体 */
.chat-panel[b-gf76xjxwv0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
    position: relative;
}

/* ヘッダー */
.chat-header[b-gf76xjxwv0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background-color: #fff;
    flex-shrink: 0;
}

    .chat-header svg[b-gf76xjxwv0] {
        width: 20px;
        height: 20px;
    }

    .chat-header h5[b-gf76xjxwv0] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #343a40;
    }

/* 参加人数表示エリア */
.chat-participant-counter[b-gf76xjxwv0] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    background-color: rgba(0, 188, 212, 0.1);
    border: 1px solid #00BCD4;
    border-radius: 999px; /* 角丸 */
    padding: 2px 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #00BCD4;
    position: relative; /* 光の位置の基準点になります */
    overflow: hidden; /* はみ出した光を隠します */
    animation: none; /* 以前のアニメーションは不要なので消します */
}

    .chat-participant-counter[b-gf76xjxwv0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 40px; /* 光の帯の幅 */
        height: 100%; /* 親要素と同じ高さ */
        background: rgba(255, 255, 255, 0.8); /* 光の色（半透明の白） */
        transform: translateX(-50px) skewX(-30deg); /* 開始前から画面外に配置 */
        /* アニメーションを適用 */
        animation: shine-pass-b-gf76xjxwv0 1s ease-in-out;
    }

    .chat-participant-counter svg[b-gf76xjxwv0] {
        width: 14px;
        height: 14px;
    }

    .chat-participant-counter .count[b-gf76xjxwv0] {
        line-height: 1;
        display: block;
        transform: translateY(0.5px);
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }


/* 参加人数表示エリア アニメーション*/
@keyframes shine-pass-b-gf76xjxwv0 {
    100% {
        /* 終了時：光は右の画面外に移動 */
        transform: translateX(200px) skewX(-30deg);
    }
}

/* メッセージ表示エリア */
.message-area[b-gf76xjxwv0] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative; /* 新着通知を配置する際の基準点 */
}

    /* カスタムスクロールバー */
    .message-area[b-gf76xjxwv0]::-webkit-scrollbar {
        width: 6px;
    }

    .message-area[b-gf76xjxwv0]::-webkit-scrollbar-track {
        background: transparent;
    }

    .message-area[b-gf76xjxwv0]::-webkit-scrollbar-thumb {
        background-color: #ced4da;
        border-radius: 10px;
    }

/* 入力エリア */
.input-area[b-gf76xjxwv0] {
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
}

/* テキストエリアのラッパー */
.textarea-wrapper[b-gf76xjxwv0] {
    position: relative;
    display: flex;
    align-items: flex-end;
    /*align-items: center;*/
    border: 1px solid #dee2e6;
    border-radius: 24px;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .textarea-wrapper:focus-within[b-gf76xjxwv0] {
        border-color: #00BCD4;
        box-shadow: 0 0 0 3px rgba(2, 188, 212, 0.15);
    }

/* テキストエリア本体 */
.auto-textarea[b-gf76xjxwv0] {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    background-color: transparent;
    resize: none;
    overflow-y: auto; /* 内容がはみ出た時だけスクロールバー表示 */
    /*overflow-y: hidden;*/
    font-size: 0.95rem;
    line-height: 1.5;
    max-height: 220px; /* 最大の高さを約10行分に制限 */
}

    .auto-textarea:focus[b-gf76xjxwv0] {
        outline: none;
    }

/* ボタンのオーバーレイ */
.button-overlay[b-gf76xjxwv0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.3rem;
    margin-bottom: 2.5px; /*ボタン位置を微調整*/
}

/* アイコンボタンとSVGのスタイル */
.icon-button[b-gf76xjxwv0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .icon-button:hover[b-gf76xjxwv0] {
        background-color: #e9ecef;
    }

    .icon-button svg[b-gf76xjxwv0] {
        width: 20px;
        height: 20px;
        transition: all 0.2s ease-in-out;
    }

/* ファイル添付ボタン */
.attach-button svg[b-gf76xjxwv0] {
    stroke: #6c757d;
}

.attach-button:hover svg[b-gf76xjxwv0] {
    stroke: #00BCD4;
    transform: rotate(15deg);
}

/* 送信ボタン */
.send-button[b-gf76xjxwv0] {
    background-color: #00BCD4;
}

    .send-button:hover[b-gf76xjxwv0] {
        background-color: #0194a8;
    }

    .send-button svg[b-gf76xjxwv0] {
        fill: #fff;
    }

/* 添付ファイルプレビューエリア */
.attachment-previews[b-gf76xjxwv0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0.5rem 0.75rem 0.5rem;
}

.attachment-preview-item[b-gf76xjxwv0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #e9ecef;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    color: #495057;
    /* ★ 追加：コンテナの最大幅と、はみ出しを隠す設定 */
    max-width: 100%;
    overflow: hidden;
}

    /* 添付ファイルプレビュー内のアイコンの基本スタイル */
    .attachment-preview-item .bi[b-gf76xjxwv0] {
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
    }

/* ファイルアイコンの定義 */
.bi-file-earmark-text-fill[b-gf76xjxwv0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-file-earmark-text-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z'/%3E%3C/svg%3E");
}

/* ファイル名自体のはみ出し処理 */
.file-name[b-gf76xjxwv0] {
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* はみ出した部分を隠す */
    text-overflow: ellipsis; /* はみ出しを...で表示 */
}

.remove-attachment[b-gf76xjxwv0] {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0 0 0.25rem;
}

    .remove-attachment:hover[b-gf76xjxwv0] {
        color: #343a40;
    }

/* ドラッグオーバー時のスタイル */
.input-area.drag-over[b-gf76xjxwv0] {
    /* テーマカラーの点線枠を表示 */
    border: 2px dashed #02BCD4;
    border-radius: 12px;
}

/**チャット送信エリア グロック処理用*/
/* 送信ブロック用のオーバーレイ */
.block-overlay[b-gf76xjxwv0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 少し濃いめの半透明の黒 */
    background-color: rgba(200, 200, 200, 0.7);
    /* 背景を少しぼかす効果を追加 */
    backdrop-filter: blur(2px);
    display: flex;
    /* アイコンとテキストを縦に並べる */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* アイコンとテキストの間隔 */
    z-index: 10;
    border-radius: 24px;
    cursor: not-allowed;
    /* 文字色を白に */
    color: white;
    /* フェードイン・アウトのアニメーション */
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* オーバーレイ内のアイコン */
.block-overlay-icon[b-gf76xjxwv0] {
    width: 24px;
    height: 24px;
    fill: currentColor; /* 親要素のcolor(白)を継承 */
}

/* オーバーレイ内のテキスト */
.block-overlay-text[b-gf76xjxwv0] {
    font-size: 0.85rem;
    font-weight: 500;
}

/**チャット送信エリア 待機処理用*/
/* ローディングオーバーレイ */
.loading-overlay[b-gf76xjxwv0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(200, 200, 200, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 24px; /* 親要素の角丸に合わせる */
}

/* スピナー（くるくる回るアイコン） */
.spinner[b-gf76xjxwv0] {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(2, 188, 212, 0.2);
    border-top-color: #02BCD4;
    border-radius: 50%;
    animation: spin-b-gf76xjxwv0 1s linear infinite;
}

@keyframes spin-b-gf76xjxwv0 {
    to {
        transform: rotate(360deg);
    }
}

/* ボタン非活性時のスタイル */
.icon-button:disabled[b-gf76xjxwv0] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 削除確認用のオーバーレイ */
.delete-confirm-overlay[b-gf76xjxwv0] {
    position: absolute; /* .chat-panel を基準に絶対配置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 背景色を少し暗くして、より明確に非アクティブ状態を示す */
    background-color: rgba(33, 37, 41, 0.2);
    backdrop-filter: blur(3px); /* ぼかしを少し強くする */
    z-index: 100; /* 他の要素より手前に表示 */
    cursor: pointer; /* クリックでキャンセルできることを示す */
    /* フェードインアニメーションを追加して滑らかな表示に */
    animation: fadeIn-b-gf76xjxwv0 0.3s ease-out;
}

/* 削除対象としてフォーカスされたメッセージ */
.focused-for-delete[b-gf76xjxwv0] {
    position: relative;
    z-index: 101; /* オーバーレイよりさらに手前に表示 */
}

/* 削除確認ボタンのコンテナ */
.delete-confirmation-buttons[b-gf76xjxwv0] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: -0.5rem; /* バブルとの間隔を詰める */
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}

/* 確認ボタンの共通スタイル */
.confirm-btn[b-gf76xjxwv0] {
    border: none;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

    /* 削除ボタンのスタイル */
    .confirm-btn.delete[b-gf76xjxwv0] {
        background-color: #dc3545;
        color: white;
    }

        .confirm-btn.delete:hover[b-gf76xjxwv0] {
            background-color: #c82333;
        }

    /* キャンセルボタンのスタイル */
    .confirm-btn.cancel[b-gf76xjxwv0] {
        background-color: #f8f9fa;
        color: #495057;
        border: 1px solid #dee2e6;
    }

        .confirm-btn.cancel:hover[b-gf76xjxwv0] {
            background-color: #e9ecef;
        }

@keyframes fadeIn-b-gf76xjxwv0 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 未読イメージ */
.unread-separator[b-gf76xjxwv0] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0; /* 上下の余白 */
    color: #00BCD4; /* テーマカラー */
}

    .unread-separator .line[b-gf76xjxwv0] {
        flex-grow: 1; /* 可能な限り幅を広げる */
        height: 1px;
        background-color: #e0e0e0; /* 線の色 */
    }

    .unread-separator .text[b-gf76xjxwv0] {
        padding: 0 15px; /* テキストの左右の余白 */
        font-size: 0.8rem;
        font-weight: 500;
        white-space: nowrap; /* テキストが折り返さないように */
    }

/* 新着メッセージ通知 */
.new-message-notification[b-gf76xjxwv0] {
    position: absolute;
    bottom: 2.5rem; /* 位置を少し上に調整 */
    left: 50%; /* 中央寄せの基準 */
    transform: translateX(-50%); /* 中央に配置 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明の白 */
    backdrop-filter: blur(8px); /* 背景をぼかす */
    color: #008f9f; /* 少し濃いテーマカラー */
    padding: 0.6rem 1rem;
    border-radius: 999px; /* 角を完全に丸くする */
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap; /* テキストが折り返さないようにする */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: transform 0.2s ease-out, background-color 0.2s;
    animation: fade-in-slide-up-b-gf76xjxwv0 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

    .new-message-notification:hover[b-gf76xjxwv0] {
        background-color: rgba(255, 255, 255, 0.95);
        transform: translateX(-50%) translateY(-10px); /* 少し上に動かす */
    }

/* 通知の出現アニメーション */
@keyframes fade-in-slide-up-b-gf76xjxwv0 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
/* /Pages/A01/Chat/UI/MessageBubble.razor.rz.scp.css */
/* チャットメッセージ全体のコンテナ */
.chat-message[b-g5o7uz9fce] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    max-width: 75%;
    position: relative;
}

/* 相手のメッセージ */
.from-them[b-g5o7uz9fce] {
    align-items: flex-start;
    margin-right: auto;
}

    .from-them .chat-content[b-g5o7uz9fce] {
        /* 白に近いクリーンなライトグレーに変更 */
        background-color: #e9ecef;
        color: #212529;
        border-radius: 18px 18px 18px 4px; /* 角丸を調整 */
    }

/* 自分のメッセージ */
.from-me[b-g5o7uz9fce] {
    align-items: flex-end;
    margin-left: auto;
}

    .from-me .chat-content[b-g5o7uz9fce] {
        /* テーマカラーを適用 */
        background-color: #00BCD4;
        color: #fff;
        border-radius: 18px 18px 4px 18px; /* 角丸を調整 */
    }

/* メタ情報全体のコンテナ（2行レイアウト用） */
.chat-meta-grid[b-g5o7uz9fce] {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    margin: 0 0.75rem 0.25rem;
    font-size: 0.75rem;
    max-width: 100%; /* 親要素の幅を超えないようにする */
    overflow: hidden; /* はみ出し防止 */
}

.from-me .chat-meta-grid[b-g5o7uz9fce] {
    align-items: flex-end; /* 右揃え */
}

.from-them .chat-meta-grid[b-g5o7uz9fce] {
    align-items: flex-start; /* 左揃え */
}

/* 会社名（送信者）のスタイル */
.chat-sender[b-g5o7uz9fce] {
    font-weight: 600;
    color: #343a40;
    /* テキストの省略に関する設定 */
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* はみ出した部分を隠す */
    text-overflow: ellipsis; /* はみ出しを...で表示 */
    /* 自身の幅が親要素を超えないようにする */
    width: 100%;
}

/* 自分のメッセージの場合、会社名を右寄せにする */
.from-me .chat-sender[b-g5o7uz9fce] {
    text-align: right;
}

/* 既読と時刻の行 */
.chat-sub-meta[b-g5o7uz9fce] {
    display: flex;
    align-items: center;
    color: #6c757d;
    margin-top: 3px; /* 会社名との間隔を少し調整 */
}

/* 新しい「既読」マークのスタイル */
.read-receipt[b-g5o7uz9fce] {
    background-color: #e9ecef; /* 背景色 */
    color: #6c757d; /* 文字色 */
    padding: 1px 6px; /* 内側の余白 */
    border-radius: 4px; /* 角の丸み */
    font-size: 0.7rem; /* 少し小さめのフォント */
    font-weight: 600;
    line-height: 1.2;
}

/* 区切り文字 */
.meta-separator[b-g5o7uz9fce] {
    margin: 0 0.4rem;
}

/* タイムスタンプ */
.chat-timestamp[b-g5o7uz9fce] {
    color: #6c757d;
}

/* メッセージの吹き出し本体 */
.chat-content[b-g5o7uz9fce] {
    padding: 0.75rem 1rem;
    word-wrap: break-word;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.message-text[b-g5o7uz9fce] {
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.6;
    word-break: break-all; /*自動折り返し*/
}

/* 添付ファイルコンテナ */
.attachment-container[b-g5o7uz9fce] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* 添付ファイルボタン */
.attachment-button[b-g5o7uz9fce] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    /*gap: 0.5rem;*/
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.85rem;
    color: inherit;
    text-align: left;
}

.from-me .attachment-button[b-g5o7uz9fce] {
    color: #212529; /* 濃いグレーに変更 */
}

.from-them .attachment-button[b-g5o7uz9fce] {
    color: #212529;
}


.attachment-button:hover[b-g5o7uz9fce] {
    background-color: rgba(255, 255, 255, 0.8);
}


.attachment-button .bi[b-g5o7uz9fce] {
    width: 16px;
    height: 16px;
    flex-shrink: 0; /* アイコンが縮まないように設定 */
    margin-right: 8px; /* 固定の右マージン設定 (0.5rem相当) */
    background-color: currentColor;
    opacity: 0.7;
    /* アイコンの右側に固定のマージンを設定 */
    margin-right: 0.5rem;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-file-earmark-text-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-file-earmark-text-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z'/%3E%3C/svg%3E");
}

/* 削除ボタン */
.delete-button[b-g5o7uz9fce] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background-color: rgba(220, 53, 69, 0.6);
    color: white;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
    z-index: 2;
    padding: 0;
}

/* 自分のメッセージにマウスが乗った時だけ削除ボタンを表示 */
.chat-message.from-me:hover .delete-button[b-g5o7uz9fce] {
    opacity: 1;
}

/* 削除ボタンのホバー効果 */
.delete-button:hover[b-g5o7uz9fce] {
    background-color: rgba(220, 53, 69, 0.8);
}

/* 取り消されたメッセージのテキスト専用スタイル */
.canceled-text[b-g5o7uz9fce] {
    color: #6c757d; /* 少し薄いグレー */
    font-size: 0.9rem;
    font-style: italic;
    padding: 0.75rem 1rem; /* 通常のメッセージと同じ余白を適用 */
}
/* /Pages/A01/SearchTopic.razor.rz.scp.css */
/* タイトルコンテナ */
.title-container[b-jstewy7obf] {
    margin-bottom: 2rem;
}

/* メインタイトル */
.page-title-accent[b-jstewy7obf] {
    display: inline-block;
    position: relative;
    font-weight: 700;
    color: #343a40;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    /* タイトルのアクセントライン */
    .page-title-accent[b-jstewy7obf]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; /* 50px から 100% へ変更 */
        height: 3px;
        background-color: #00BCD4;
        border-radius: 2px;
    }

/* サブタイトル */
.page-subtitle[b-jstewy7obf] {
    color: #6c757d;
    margin: 0;
}

/* タイトルアイコン */
.bi-title-icon[b-jstewy7obf] {
    width: 24px;
    height: 24px;
    /* ナビゲーションアイコンと同じものを採用 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300BCD4' class='bi bi-collection' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z'/%3E%3C/svg%3E");
}

/* アイコンの基本スタイル */
.bi[b-jstewy7obf] {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

/* 検索カード全体 */
.search-card[b-jstewy7obf] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* 影を柔らかく */
    overflow: hidden;
    margin-bottom: 2rem;
}

/* カードヘッダー */
.card-header[b-jstewy7obf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    background-color: #f7f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .card-header:hover[b-jstewy7obf] {
        background-color: #f0f2f5;
    }

.header-title[b-jstewy7obf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* 開閉アイコン */
.toggle-icon[b-jstewy7obf] {
    transition: transform 0.3s ease-in-out;
    color: #00BCD4;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* toggle-icon内のSVG自体のスタイル */
    .toggle-icon svg[b-jstewy7obf] {
        width: 25px;
        height: 25px;
    }

/* is-openクラスが付いた時のアイコンの向き */
.search-card.is-open .toggle-icon[b-jstewy7obf] {
    transform: rotate(180deg);
}

/* 開閉するコンテンツエリア */
.collapsible-content[b-jstewy7obf] {
    max-height: 0; /* デフォルト（閉じている状態）では高さを0に */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out; /* max-heightをアニメーション対象に */
}

.search-card.is-open .collapsible-content[b-jstewy7obf] {
    max-height: 500px; /* is-openクラスが付くと高さを広げる（内容は収まる十分な高さを指定） */
}

/* カード本体 */
.card-body[b-jstewy7obf] {
    padding: 2rem;
}

    /* card-body内のrowの、各カラム間の縦のスペースを調整 */
    .card-body .row > [class*="col-"][b-jstewy7obf] {
        margin-bottom: 1.5rem; /* 各検索項目の下に余白を追加 */
    }

/* ボタンを中央揃えに */
.card-footer[b-jstewy7obf] {
    display: flex;
    justify-content: center; /* flex-end から center に変更 */
    gap: 1rem;
    padding: 1.25rem 2rem;
    background-color: #f7f9fa;
    border-top: 1px solid #e9ecef;
}

/* ラベルと入力欄の間に余白を追加 */
.form-group label[b-jstewy7obf] {
    display: block; /* ブロック要素として扱う */
    margin-bottom: 0.5rem; /* ラベルの下に余白を設定 */
    font-weight: 500;
}

.form-control:disabled[b-jstewy7obf], .form-control[readonly][b-jstewy7obf] {
    background-color: #e9ecef;
    opacity: 1;
}

.require label[b-jstewy7obf]::after {
    content: ' ＊';
    color: #dc3545;
    font-weight: bold;
    vertical-align: baseline;
}

/* 検索ボタン */
.btn-search[b-jstewy7obf] {
    min-width: 120px;
    background-color: #00BCD4; /* テーマカラー */
    border-color: #00BCD4;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .btn-search:hover[b-jstewy7obf] {
        background-color: #0194a8;
        border-color: #0194a8;
    }

/* クリアボタン */
.btn-clear[b-jstewy7obf] {
    min-width: 120px;
    color: #6c757d;
    background-color: transparent;
    border-color: #ced4da;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .btn-clear:hover[b-jstewy7obf] {
        background-color: #e9ecef;
        border-color: #ced4da;
    }

    .btn-clear .bi[b-jstewy7obf] {
        filter: invert(45%) sepia(8%) saturate(274%) hue-rotate(167deg) brightness(90%) contrast(87%); /* アイコンの色を文字色に合わせる */
    }

/* CSV出力ボタン */
.btn-output-csv[b-jstewy7obf] {
    min-width: 120px;
    background-color: #0194a8;
    border-color: #0194a8;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .btn-output-csv:hover[b-jstewy7obf] {
        background-color: #008394;
        border-color: #008394;
    }

/* クリアボタンのアイコン（リセット） */
.bi-clear-button[b-jstewy7obf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-counterclockwise' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
}

/* 検索ボタンのアイコン（虫眼鏡） */
.bi-search-button[b-jstewy7obf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

/* CSV出力ボタンのアイコン（ダウンロード） */
.bi-csv-download-button[b-jstewy7obf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-earmark-arrow-down' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 6.5a.5.5 0 0 0-1 0v3.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z'/%3E%3Cpath d='M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z'/%3E%3C/svg%3E");
}

.grid-container[b-jstewy7obf] {
    /*width:1606px;*/
    width: calc(100vw - 250px - (2rem + 1.5rem)) !important;
}
/* /Pages/A01/Tabs/Step/DialogUtile/CalendarSingle.razor.rz.scp.css */
/* ダイアログの基本スタイル */
.dialog-overlay[b-r94b9gm4ep] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-card[b-r94b9gm4ep] {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 550px; /* 横幅を小さく変更 */
    border-radius: 16px;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInScale-b-r94b9gm4ep 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ダイアログ表示時のアニメーション定義 */
@keyframes fadeInScale-b-r94b9gm4ep {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* メインタイトル */
.section-title[b-r94b9gm4ep] {
    background-color: transparent !important;
    color: #212529 !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0;
    padding-left: 0.5rem;
    border-left: 5px solid;
    border-image: linear-gradient(to top, #00BCD4, #00BCD4) 1;
    text-align: left;
    border-bottom: none;
    border-radius: 0;
}

/* 内部カード */
.form-card[b-r94b9gm4ep] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
}

.card-header[b-r94b9gm4ep] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #006064;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}

.card-body[b-r94b9gm4ep] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-r94b9gm4ep] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.form-group[b-r94b9gm4ep] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-r94b9gm4ep] {
        display: inline-flex; /* アイコンとテキストを横並びにする */
        align-items: center; /* 上下中央揃え */
        text-align: left;
        margin-bottom: 0.75rem; /* 余白を少し広げる */
        /* タイポグラフィ調整 */
        color: #6c757d; /* 文字色を少し落ち着いた色に */
        font-size: 0.9rem; /* 文字を少し小さく */
        font-weight: 450; /* 少し太く */
        text-transform: uppercase; /* 英字を大文字に */
        letter-spacing: 0.05em; /* 文字間を少し広げる */
    }

        /* ラベルの前にカレンダーアイコンを追加 */
        .form-group label[b-r94b9gm4ep]::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 0.5rem; /* アイコンとテキストの間の余白 */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.8;
        }

/* フッター */
.card-footer[b-r94b9gm4ep] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    /* ボタン共通スタイル */
    .card-footer button[b-r94b9gm4ep] {
        min-width: 160px;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .card-footer button:hover[b-r94b9gm4ep] {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }


/* 主要ボタン */
.btn-update[b-r94b9gm4ep] {
    background: #00BCD4;
    color: white;
}

    .btn-update:hover[b-r94b9gm4ep] {
        opacity: 0.9;
    }

/* 二次ボタン */
.btn-cancel[b-r94b9gm4ep] {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-cancel:hover[b-r94b9gm4ep] {
        background-color: #dee2e6;
    }

/* アイコン */
.bi-update-button[b-r94b9gm4ep] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-box-arrow-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z'/%3E%3Cpath fill-rule='evenodd' d='M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E");
}

/* --- カレンダーコントロールのスタイル --- */
.form-calender[b-r94b9gm4ep] {
    display: flex; /* アイコンと入力欄を横並びにする */
    align-items: center; /* 上下中央に揃える */
    /* form-controlのpaddingを活かしつつ、アイコン用の左paddingを調整 */
    padding-left: 0.75rem;
}

    /* カレンダーアイコンを::before擬似要素で追加 */
    .form-calender[b-r94b9gm4ep]::before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 0.75rem; /* アイコンと入力欄の間のスペース */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23495057' class='bi bi-calendar-event' viewBox='0 0 16 16'%3E%3Cpath d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z'/%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0; /* アイコンがコンテナの縮小によって潰れないようにする */
    }

    /* CustomDateTimePicker内部のinput要素の不要なpaddingをリセット */
    .form-calender[b-r94b9gm4ep]  .custom-input,
    .form-calender[b-r94b9gm4ep]  .flatpickr-input {
        /* 親(form-calender)にpaddingがあるため、子のpaddingは0にする */
        padding: 0;
        /* 残りのスペースをすべて埋めるようにする */
        flex-grow: 1;
    }

/* エラーメッセージ */
.error-message[b-r94b9gm4ep] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-r94b9gm4ep]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A01/Tabs/Step/DialogUtile/FileUploader.razor.rz.scp.css */
/* ダイアログの基本スタイル */
.dialog-overlay[b-sk4d0h7tb2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 背景を少し暗めに */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-card[b-sk4d0h7tb2] {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 750px;
    border-radius: 16px; /* 角をより丸く */
    padding: 2rem; /* パディングを少し広めに */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3); /* 内側に明るい境界線 */
    /* 表示時のアニメーション */
    animation: fadeInScale-b-sk4d0h7tb2 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ダイアログ表示時のアニメーション定義 */
@keyframes fadeInScale-b-sk4d0h7tb2 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* メインタイトル */
.section-title[b-sk4d0h7tb2] {
    background-color: transparent !important;
    color: #212529 !important; /* 文字色を少し濃く */
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0;
    padding-left: 0.5rem;
    border-left: 5px solid;
    border-image: linear-gradient(to top, #00BCD4, #00BCD4) 1;
    text-align: left;
    border-bottom: none;
    border-radius: 0;
}

/* 内部カード */
.form-card[b-sk4d0h7tb2] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
}

.card-header[b-sk4d0h7tb2] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #006064;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}

.card-body[b-sk4d0h7tb2] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-sk4d0h7tb2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.form-group[b-sk4d0h7tb2] {
    display: flex;
    flex-direction: column;
}

.property-list[b-sk4d0h7tb2] {
    display: flex;
}

.input-with-button[b-sk4d0h7tb2] {
    margin-right: 0.5rem;
    width: 100%;
}

/* 参照ボタンを左寄せにするためのスタイル */
[b-sk4d0h7tb2] .multi-uploader {
    text-align: left;
}

/* フッター */
.card-footer[b-sk4d0h7tb2] {
    display: flex;
    justify-content: center; /* ボタンを中央ぞろえに変更 */
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    /* ボタン共通スタイル */
    .card-footer button[b-sk4d0h7tb2] {
        min-width: 160px; /* ボタン幅を少し小さく */
        border-radius: 8px; /* 角を丸く */
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* ボタンに影を追加 */
    }

        .card-footer button:hover[b-sk4d0h7tb2] {
            transform: translateY(-2px); /* ホバー時に少し浮き上がる効果 */
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }


/* 主要ボタン */
.btn-update[b-sk4d0h7tb2] {
    background: #00BCD4; /* グラデーション背景 */
    color: white;
}

    .btn-update:hover[b-sk4d0h7tb2] {
        opacity: 0.9;
    }

/* 二次ボタン */
.btn-cancel[b-sk4d0h7tb2] {
    background-color: #e9ecef; /* 背景色を少し濃く */
    color: #495057;
    border: 1px solid #dee2e6; /* 枠線の色も調整 */
}

    .btn-cancel:hover[b-sk4d0h7tb2] {
        background-color: #dee2e6; /* ホバー時の色も一段階濃く */
    }

/* アイコン */
.bi-update-button[b-sk4d0h7tb2] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-box-arrow-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z'/%3E%3Cpath fill-rule='evenodd' d='M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E");
}

/* エラーメッセージ */
.error-message[b-sk4d0h7tb2] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-sk4d0h7tb2]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A01/Tabs/Step/DialogUtile/Todo101.razor.rz.scp.css */
/* ダイアログの基本スタイル */
.dialog-overlay[b-jaf9g8nme9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-card[b-jaf9g8nme9] {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 550px;
    border-radius: 16px;
    padding: 2rem;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInScale-b-jaf9g8nme9 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInScale-b-jaf9g8nme9 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* メインタイトル */
.section-title[b-jaf9g8nme9] {
    background-color: transparent !important;
    color: #212529 !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0;
    padding-left: 0.5rem;
    border-left: 5px solid;
    border-image: linear-gradient(to top, #00BCD4, #00BCD4) 1;
    text-align: left;
    border-bottom: none;
    border-radius: 0;
}

/* 内部カード */
.form-card[b-jaf9g8nme9] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
}

.card-header[b-jaf9g8nme9] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #006064;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}

.card-body[b-jaf9g8nme9] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-jaf9g8nme9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.form-group[b-jaf9g8nme9] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-jaf9g8nme9] {
        display: inline-flex;
        align-items: center;
        text-align: left;
        margin-bottom: 0.75rem;
        color: #6c757d;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

        .form-group label[b-jaf9g8nme9]::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 0.6rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.9;
        }

/* --- エラーメッセージのスタイルを追加 --- */
.error-message[b-jaf9g8nme9] {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}


/* フッター */
.card-footer[b-jaf9g8nme9] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    .card-footer button[b-jaf9g8nme9] {
        min-width: 160px;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .card-footer button:hover[b-jaf9g8nme9] {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

/* 主要ボタン */
.btn-update[b-jaf9g8nme9] {
    background: #00BCD4;
    color: white;
}

    .btn-update:hover[b-jaf9g8nme9] {
        opacity: 0.9;
    }

/* 二次ボタン */
.btn-cancel[b-jaf9g8nme9] {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-cancel:hover[b-jaf9g8nme9] {
        background-color: #dee2e6;
    }

/* アイコン */
.bi-update-button[b-jaf9g8nme9] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}

/*必須マーク*/
.require label[b-jaf9g8nme9]::after {
    content: ' ＊';
    color: #dc3545;
    font-weight: bold;
    vertical-align: baseline;
}

/* エラーメッセージ */
.error-message[b-jaf9g8nme9] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-jaf9g8nme9]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A01/Tabs/Step/DialogUtile/Todo102.razor.rz.scp.css */
/* ダイアログの基本スタイル */
.dialog-overlay[b-or8cy94lqg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-card[b-or8cy94lqg] {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 550px;
    border-radius: 16px;
    padding: 2rem;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInScale-b-or8cy94lqg 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInScale-b-or8cy94lqg {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* メインタイトル */
.section-title[b-or8cy94lqg] {
    background-color: transparent !important;
    color: #212529 !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0;
    padding-left: 0.5rem;
    border-left: 5px solid;
    border-image: linear-gradient(to top, #00BCD4, #00BCD4) 1;
    text-align: left;
    border-bottom: none;
    border-radius: 0;
}

/* 内部カード */
.form-card[b-or8cy94lqg] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
}

.card-header[b-or8cy94lqg] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #006064;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}

.card-body[b-or8cy94lqg] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.preface-text[b-or8cy94lqg] {
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.7;
    text-align:left;
    /* カード内の左右の余白と合わせる */
    /*padding: 1.5rem 1.5rem 0;*/
}

.form-row[b-or8cy94lqg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.form-group[b-or8cy94lqg] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-or8cy94lqg] {
        display: inline-flex;
        align-items: center;
        text-align: left;
        margin-bottom: 0.75rem;
        color: #6c757d;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

        .form-group label[b-or8cy94lqg]::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 0.6rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.9;
        }

/* --- エラーメッセージのスタイルを追加 --- */
.error-message[b-or8cy94lqg] {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.75rem;
}


/* フッター */
.card-footer[b-or8cy94lqg] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    .card-footer button[b-or8cy94lqg] {
        min-width: 160px;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .card-footer button:hover[b-or8cy94lqg] {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

/* 主要ボタン */
.btn-update[b-or8cy94lqg] {
    background: #00BCD4;
    color: white;
}

    .btn-update:hover[b-or8cy94lqg] {
        opacity: 0.9;
    }

/* 二次ボタン */
.btn-cancel[b-or8cy94lqg] {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-cancel:hover[b-or8cy94lqg] {
        background-color: #dee2e6;
    }

/* アイコン */
.bi-update-button[b-or8cy94lqg] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}

/* エラーメッセージ */
.error-message[b-or8cy94lqg] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-or8cy94lqg]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A01/Tabs/Step/DialogUtile/Todo105.razor.rz.scp.css */
/* ダイアログの基本スタイル */
.dialog-overlay[b-cmj72dit8l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-card[b-cmj72dit8l] {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 550px;
    border-radius: 16px;
    padding: 2rem;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInScale-b-cmj72dit8l 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInScale-b-cmj72dit8l {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* メインタイトル */
.section-title[b-cmj72dit8l] {
    background-color: transparent !important;
    color: #212529 !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0;
    padding-left: 0.5rem;
    border-left: 5px solid;
    border-image: linear-gradient(to top, #00BCD4, #00BCD4) 1;
    text-align: left;
    border-bottom: none;
    border-radius: 0;
}

/* 内部カード */
.form-card[b-cmj72dit8l] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
}

.card-header[b-cmj72dit8l] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #006064;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}

.card-body[b-cmj72dit8l] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-cmj72dit8l] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.form-group[b-cmj72dit8l] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-cmj72dit8l] {
        display: inline-flex;
        align-items: center;
        text-align: left;
        margin-bottom: 0.75rem;
        color: #6c757d;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

        .form-group label[b-cmj72dit8l]::before {
            /*content: '';*/
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 0.6rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.9;
        }

/* --- エラーメッセージのスタイルを追加 --- */
.error-message[b-cmj72dit8l] {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* ラジオボタン */
.radio-group[b-cmj72dit8l] {
    display: flex;
    gap: 0.75rem; /* ボタン間の隙間を調整 */
    align-items: center;
    min-height: calc(0.5rem * 2 + 0.95rem * 1.5 + 2px);
}

    /* デフォルトのラジオボタンを非表示に */
    .radio-group input[type="radio"][b-cmj72dit8l] {
        display: none;
    }

    /* ラベルをボタン風にスタイリング */
    .radio-group label[b-cmj72dit8l] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1.25rem;
        border: 1px solid #ced4da;
        border-radius: 999px; /* ピル形状（角が丸い形）に */
        cursor: pointer;
        transition: all 0.2s ease;
        font-weight: 500;
        color: #495057;
        background-color: #fff;
    }

        /* 選択されていないボタンのホバー効果 */
        .radio-group label:has(input:not(:checked)):hover[b-cmj72dit8l] {
            border-color: #03A9F4;
            background-color: #e3f2fd;
        }

        /* 選択されたボタンのスタイル */
        .radio-group label:has(input:checked)[b-cmj72dit8l] {
            background-color: #00BCD4; /* テーマカラー */
            border-color: #00BCD4;
            color: #fff;
            box-shadow: 0 4px 12px rgba(2, 188, 212, 0.2);
        }

        /* ラジオボタンのラベルには必須マークは不要 */
        .radio-group label[b-cmj72dit8l]::after {
            content: none !important;
        }
        .radio-group label:has(input:disabled)[b-cmj72dit8l] {
            background-color: #e9ecef;
            opacity: 0.5;
            border-color: #ced4da;
            color: #000000;
            box-shadow: none;
            cursor: unset;
        }
            .radio-group label:has(input:disabled):hover[b-cmj72dit8l] {
                border-color: #ced4da;
                background-color: #e9ecef;
            }
        .radio-group label:has(input:checked:disabled)[b-cmj72dit8l] {
            background-color: #00BCD4;
            border-color: #00BCD4;
            color:#000;
            opacity: 0.4;
        }


/* フッター */
.card-footer[b-cmj72dit8l] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    .card-footer button[b-cmj72dit8l] {
        min-width: 160px;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .card-footer button:hover[b-cmj72dit8l] {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

/* 主要ボタン */
.btn-update[b-cmj72dit8l] {
    background: #00BCD4;
    color: white;
}

    .btn-update:hover[b-cmj72dit8l] {
        opacity: 0.9;
    }

/* 二次ボタン */
.btn-cancel[b-cmj72dit8l] {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-cancel:hover[b-cmj72dit8l] {
        background-color: #dee2e6;
    }

/* アイコン */
.bi-update-button[b-cmj72dit8l] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}

/*必須マーク*/
.require label[b-cmj72dit8l]::after {
    content: ' ＊';
    color: #dc3545;
    font-weight: bold;
    vertical-align: baseline;
}

/* エラーメッセージ */
.error-message[b-cmj72dit8l] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-cmj72dit8l]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A01/Tabs/Step/DialogUtile/Todo203.razor.rz.scp.css */
/* ダイアログの基本スタイル */
.dialog-overlay[b-h3ft84gzbl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-card[b-h3ft84gzbl] {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 550px;
    border-radius: 16px;
    padding: 2rem;
    overflow-y: auto;
    max-height: 90vh;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInScale-b-h3ft84gzbl 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInScale-b-h3ft84gzbl {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* メインタイトル */
.section-title[b-h3ft84gzbl] {
    background-color: transparent !important;
    color: #212529 !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0;
    padding-left: 0.5rem;
    border-left: 5px solid;
    border-image: linear-gradient(to top, #00BCD4, #00BCD4) 1;
    text-align: left;
    border-bottom: none;
    border-radius: 0;
}

/* 内部カード */
.form-card[b-h3ft84gzbl] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
}

.card-header[b-h3ft84gzbl] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #006064;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}

.card-body[b-h3ft84gzbl] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 各要素間の余白を調整 */
}

/* フッター */
.card-footer[b-h3ft84gzbl] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    .card-footer button[b-h3ft84gzbl] {
        min-width: 160px;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .card-footer button:hover[b-h3ft84gzbl] {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

.btn-update[b-h3ft84gzbl] {
    background: #00BCD4;
    color: white;
}

    .btn-update:hover[b-h3ft84gzbl] {
        opacity: 0.9;
    }

.btn-cancel[b-h3ft84gzbl] {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-cancel:hover[b-h3ft84gzbl] {
        background-color: #dee2e6;
    }

.bi-update-button[b-h3ft84gzbl] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}


/* --- ここから追加 --- */

/* 本文テキスト */
.info-text[b-h3ft84gzbl] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    text-align: left;
}

/* 宛先ブロック */
.address-block[b-h3ft84gzbl] {
    text-align: left;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    border: 1px solid #e9ecef;
}

    .address-block .address-title[b-h3ft84gzbl] {
        font-weight: 600;
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
        color: #555;
    }

    .address-block p[b-h3ft84gzbl] {
        margin: 0.25rem 0;
        line-height: 1.7;
        font-size: 1rem;
    }

/* チェックボックスセクション */
.checkbox-section[b-h3ft84gzbl] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* チェックボックス間の余白 */
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.checkbox-item[b-h3ft84gzbl] {
    display: flex;
    align-items: center;
    gap: 0 .75em;
    position: relative;
    cursor: pointer;
    font-size: 0.95rem;
}

    /* 偽のチェックボックス（円）を作成 */
    .checkbox-item[b-h3ft84gzbl]::before {
        content: '';
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #e6edf3;
        flex-shrink: 0;
    }

    /* チェックされたら円の背景色を変更 */
    .checkbox-item:has(input:checked)[b-h3ft84gzbl]::before {
        background-color: #00BCD4;
    }

    /* チェックマークを作成 */
    .checkbox-item:has(input:checked)[b-h3ft84gzbl]::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 9px;
        transform: rotate(45deg);
        width: 7px;
        height: 12px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
    }

    /* 元のチェックボックスを非表示に */
    .checkbox-item input[type="checkbox"][b-h3ft84gzbl] {
        display: none;
    }

/* エラーメッセージ */
.error-message[b-h3ft84gzbl] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-h3ft84gzbl]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A01/Tabs/Step/DialogUtile/Todo406.razor.rz.scp.css */
/* ダイアログの基本スタイル */
.dialog-overlay[b-vkuxes66to] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-card[b-vkuxes66to] {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 550px;
    border-radius: 16px;
    padding: 2rem;
    overflow-y: auto;
    max-height: 90vh;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInScale-b-vkuxes66to 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInScale-b-vkuxes66to {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* メインタイトル */
.section-title[b-vkuxes66to] {
    background-color: transparent !important;
    color: #212529 !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0;
    padding-left: 0.5rem;
    border-left: 5px solid;
    border-image: linear-gradient(to top, #00BCD4, #00BCD4) 1;
    text-align: left;
    border-bottom: none;
    border-radius: 0;
}

/* 内部カード */
.form-card[b-vkuxes66to] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
}

.card-header[b-vkuxes66to] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #006064;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}

.card-body[b-vkuxes66to] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 各要素間の余白を調整 */
}

/* フッター */
.card-footer[b-vkuxes66to] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    .card-footer button[b-vkuxes66to] {
        min-width: 160px;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .card-footer button:hover[b-vkuxes66to] {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

.btn-update[b-vkuxes66to] {
    background: #00BCD4;
    color: white;
}

    .btn-update:hover[b-vkuxes66to] {
        opacity: 0.9;
    }

.btn-cancel[b-vkuxes66to] {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-cancel:hover[b-vkuxes66to] {
        background-color: #dee2e6;
    }

.bi-update-button[b-vkuxes66to] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}


/* --- ここから追加 --- */

/* 本文テキスト */
.info-text[b-vkuxes66to] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    text-align: left;
}

/* 宛先ブロック */
.address-block[b-vkuxes66to] {
    text-align: left;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    border: 1px solid #e9ecef;
}

    .address-block .address-title[b-vkuxes66to] {
        font-weight: 600;
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
        color: #555;
    }

    .address-block p[b-vkuxes66to] {
        margin: 0.25rem 0;
        line-height: 1.7;
        font-size: 1rem;
    }

/* チェックボックスセクション */
.checkbox-section[b-vkuxes66to] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* チェックボックス間の余白 */
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.checkbox-item[b-vkuxes66to] {
    display: flex;
    align-items: center;
    gap: 0 .75em;
    position: relative;
    cursor: pointer;
    font-size: 0.95rem;
}

    /* 偽のチェックボックス（円）を作成 */
    .checkbox-item[b-vkuxes66to]::before {
        content: '';
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #e6edf3;
        flex-shrink: 0;
    }

    /* チェックされたら円の背景色を変更 */
    .checkbox-item:has(input:checked)[b-vkuxes66to]::before {
        background-color: #00BCD4;
    }

    /* チェックマークを作成 */
    .checkbox-item:has(input:checked)[b-vkuxes66to]::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 9px;
        transform: rotate(45deg);
        width: 7px;
        height: 12px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
    }

    /* 元のチェックボックスを非表示に */
    .checkbox-item input[type="checkbox"][b-vkuxes66to] {
        display: none;
    }

/* エラーメッセージ */
.error-message[b-vkuxes66to] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-vkuxes66to]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A01/Tabs/Step/DialogUtile/Todo407.razor.rz.scp.css */
/* ダイアログの基本スタイル */
.dialog-overlay[b-2u428cc6c6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-card[b-2u428cc6c6] {
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 550px;
    border-radius: 16px;
    padding: 2rem;
    overflow-y: auto;
    max-height: 90vh;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInScale-b-2u428cc6c6 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInScale-b-2u428cc6c6 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* メインタイトル */
.section-title[b-2u428cc6c6] {
    background-color: transparent !important;
    color: #212529 !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0;
    padding-left: 0.5rem;
    border-left: 5px solid;
    border-image: linear-gradient(to top, #00BCD4, #00BCD4) 1;
    text-align: left;
    border-bottom: none;
    border-radius: 0;
}

/* 内部カード */
.form-card[b-2u428cc6c6] {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: none;
    margin-bottom: 0;
}

.card-header[b-2u428cc6c6] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    background: #006064;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}

.card-body[b-2u428cc6c6] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 各要素間の余白を調整 */
}

/* フッター */
.card-footer[b-2u428cc6c6] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

    .card-footer button[b-2u428cc6c6] {
        min-width: 160px;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .card-footer button:hover[b-2u428cc6c6] {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

.btn-update[b-2u428cc6c6] {
    background: #00BCD4;
    color: white;
}

    .btn-update:hover[b-2u428cc6c6] {
        opacity: 0.9;
    }

.btn-cancel[b-2u428cc6c6] {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .btn-cancel:hover[b-2u428cc6c6] {
        background-color: #dee2e6;
    }

.bi-update-button[b-2u428cc6c6] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}


/* --- ここから追加 --- */

/* 本文テキスト */
.info-text[b-2u428cc6c6] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    text-align: left;
}

/* 宛先ブロック */
.address-block[b-2u428cc6c6] {
    text-align: left;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    border: 1px solid #e9ecef;
}

    .address-block .address-title[b-2u428cc6c6] {
        font-weight: 600;
        margin-bottom: 0.75rem;
        font-size: 0.9rem;
        color: #555;
    }

    .address-block p[b-2u428cc6c6] {
        margin: 0.25rem 0;
        line-height: 1.7;
        font-size: 1rem;
    }

/* チェックボックスセクション */
.checkbox-section[b-2u428cc6c6] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* チェックボックス間の余白 */
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.checkbox-item[b-2u428cc6c6] {
    display: flex;
    align-items: center;
    gap: 0 .75em;
    position: relative;
    cursor: pointer;
    font-size: 0.95rem;
}

    /* 偽のチェックボックス（円）を作成 */
    .checkbox-item[b-2u428cc6c6]::before {
        content: '';
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #e6edf3;
        flex-shrink: 0;
    }

    /* チェックされたら円の背景色を変更 */
    .checkbox-item:has(input:checked)[b-2u428cc6c6]::before {
        background-color: #00BCD4;
    }

    /* チェックマークを作成 */
    .checkbox-item:has(input:checked)[b-2u428cc6c6]::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 9px;
        transform: rotate(45deg);
        width: 7px;
        height: 12px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
    }

    /* 元のチェックボックスを非表示に */
    .checkbox-item input[type="checkbox"][b-2u428cc6c6] {
        display: none;
    }

/* エラーメッセージ */
.error-message[b-2u428cc6c6] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-2u428cc6c6]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A01/Tabs/TabBaseInfo.razor.rz.scp.css */
.section-title[b-pzsqhxmptb] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 1rem;
    padding-left: 0.25rem;
    border-left: 4px solid #00BCD4;
}
.second-paragraph[b-pzsqhxmptb]{
    margin-top:1.25rem;
}

/* --- タイトル部 --- */
/* タイトルコンテナ */
.title-container[b-pzsqhxmptb] {
    margin-bottom: 2rem;
}

/* メインタイトル */
.page-title-accent[b-pzsqhxmptb] {
    display: inline-block;
    position: relative;
    font-weight: 700;
    color: #343a40;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    /* タイトルのアクセントライン */
    .page-title-accent[b-pzsqhxmptb]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; /* 50px から 100% へ変更 */
        height: 3px;
        background-color: #00BCD4;
        border-radius: 2px;
    }

/* サブタイトル */
.page-subtitle[b-pzsqhxmptb] {
    color: #6c757d;
    margin: 0;
}

/* タイトルアイコン */
.bi-title-icon[b-pzsqhxmptb] {
    width: 24px;
    height: 24px;
    /* ナビゲーションアイコンと同じものを採用 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300BCD4' class='bi bi-file-earmark-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z'/%3E%3C/svg%3E");
}

/* アイコンの基本スタイル */
.bi[b-pzsqhxmptb] {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- 項目部 --- */
.form-container[b-pzsqhxmptb] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* ★ コンパクト化：各カード間の隙間を縮小 */
}

.form-card[b-pzsqhxmptb] {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.card-header[b-pzsqhxmptb] {
    padding: 0.8rem 1.5rem; /* ★ コンパクト化：ヘッダーの高さを調整 */
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    /* ★ 色変更：背景をサブカラー2に、文字を白に */
    background-color: #006064;
    color: #fff;
}

.card-body[b-pzsqhxmptb] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* ★ コンパクト化：各行間の隙間を縮小 */
}

.form-row[b-pzsqhxmptb] {
    display: grid;
    grid-template-columns: 1fr; /* ★ 1列表示に変更 */
    gap: 1.25rem; /* ★ 1列表示のため、縦の隙間として機能 */
}

.form-group[b-pzsqhxmptb] {
    display: flex;
    flex-direction: column;
}

    /* 1つの項目を2カラム幅にする指定は1列表示では不要
.form-group.full-width {
    grid-column: 1 / -1;
}
*/

    .form-group label[b-pzsqhxmptb] {
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
        font-size: 0.9rem;
    }



.form-control[b-pzsqhxmptb] {
    padding: 0.5rem 0.75rem; /* ★ コンパクト化：コントロールの高さを調整 */
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem; /* ★ コンパクト化：フォントサイズを微調整 */
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control:focus[b-pzsqhxmptb] {
        outline: none;
        border-color: #03A9F4;
        box-shadow: 0 0 0 3px rgba(3, 169, 244, 0.15);
    }

    .form-control:disabled[b-pzsqhxmptb] {
        background-color: #e9ecef;
    }

.custom-input[b-pzsqhxmptb], .flatpickr-input[b-pzsqhxmptb] {
    border: none !important;
}

/*セレクトボックスアイコン付与*/
/*.wrap-select {
    position: relative;
}

    .wrap-select::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.5;
        z-index: 1;
    }*/

/* ラジオボタン */
.radio-group[b-pzsqhxmptb] {
    display: flex;
    gap: 0.75rem; /* ボタン間の隙間を調整 */
    align-items: center;
    min-height: calc(0.5rem * 2 + 0.95rem * 1.5 + 2px);
}

    /* デフォルトのラジオボタンを非表示に */
    .radio-group input[type="radio"][b-pzsqhxmptb] {
        display: none;
    }

    /* ラベルをボタン風にスタイリング */
    .radio-group label[b-pzsqhxmptb] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1.25rem;
        border: 1px solid #ced4da;
        border-radius: 999px; /* ピル形状（角が丸い形）に */
        cursor: pointer;
        transition: all 0.2s ease;
        font-weight: 500;
        color: #495057;
        background-color: #fff;
    }

        /* 選択されていないボタンのホバー効果 */
        .radio-group label:has(input:not(:checked)):hover[b-pzsqhxmptb] {
            border-color: #03A9F4;
            background-color: #e3f2fd;
        }

        /* 選択されたボタンのスタイル */
        .radio-group label:has(input:checked)[b-pzsqhxmptb] {
            background-color: #00BCD4; /* テーマカラー */
            border-color: #00BCD4;
            color: #fff;
            box-shadow: 0 4px 12px rgba(2, 188, 212, 0.2);
        }

        /* ラジオボタンのラベルには必須マークは不要 */
        .radio-group label[b-pzsqhxmptb]::after {
            content: none !important;
        }
        .radio-group label:has(input:disabled)[b-pzsqhxmptb] {
            background-color: #e9ecef;
            opacity: 0.5;
            border-color: #ced4da;
            color: #000000;
            box-shadow: none;
            cursor: unset;
        }

            .radio-group label:has(input:disabled):hover[b-pzsqhxmptb] {
                border-color: #ced4da;
                background-color: #e9ecef;
            }

        .radio-group label:has(input:checked:disabled)[b-pzsqhxmptb] {
            background-color: #00BCD4;
            border-color: #00BCD4;
            color: #000;
            opacity: 0.4;
        }

.form-actions[b-pzsqhxmptb] {
    display: block;
    gap: 1rem;
    margin-top: 0; /* ★ 上の余白を削除 */
    margin-bottom: 0; /* ★ 下の余白を削除 */
    text-align: center;
}

.btn[b-pzsqhxmptb] {
    padding: 0.6rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
}

.btn-primary[b-pzsqhxmptb] {
    background-color: #00BCD4;
    color: #fff;
}

    .btn-primary:hover[b-pzsqhxmptb] {
        background-color: #0097a7;
    }

.btn-secondary[b-pzsqhxmptb] {
    background-color: #e0e0e0;
    color: #343a40;
}

    .btn-secondary:hover[b-pzsqhxmptb] {
        background-color: #bdbdbd;
    }

/* 枠線のみのボタン（参照ボタン用） */
.btn-outline[b-pzsqhxmptb] {
    flex-shrink: 0; /* ボタンが縮まないように */
    padding: 0.725rem 0.75rem; /* ボタンの横幅を確保 */
    background-color: transparent;
    border: 1px solid #ced4da;
    color: #495057;
}

    .btn-outline:hover[b-pzsqhxmptb] {
        background-color: #f0f2f5;
    }

.property-list[b-pzsqhxmptb] {
    display: flex;
    
}

.btn-linklabel[b-pzsqhxmptb] {
    flex-shrink: 0; /* ボタンが縮まないように */
    padding: 0.725rem 0.75rem; /* ボタンの横幅を確保 */
    /*border-bottom: 1px solid #ced4da;*/
    text-decoration: underline;
    cursor: pointer;
    color: #0000EE;
    background: none;
    border: none;
    /*padding: 0;*/
    color: #03A9F4;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}
    
.btn-linklabel > span[b-pzsqhxmptb] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ファイル名アンダーライン */
    .btn-linklabel:hover > span[b-pzsqhxmptb] {
        border-bottom: 0.5px solid currentColor;
        padding-bottom: 1.5px;
    }


/* 削除ボタンのアイコン（バツ印） */
.bi-save-button[b-pzsqhxmptb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-trash3' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

/* 閉じるボタンのアイコン（ゴミ箱） */
.bi-estimate-button[b-pzsqhxmptb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.custom-svg[b-pzsqhxmptb] {
    margin-right: 7px;
}

/* textareaにもform-controlのスタイルを適用 */
textarea.form-control[b-pzsqhxmptb] {
    font-family: inherit; /* フォントを他のコントロールと合わせる */
}

/* 「参照」ボタン付きの入力欄 */
.input-with-button[b-pzsqhxmptb] {
    margin-right: 0.5rem;
    width: 100%;
}

    .input-with-button .form-uploader[b-pzsqhxmptb] {
        width: 100%;
    }

    .input-with-button .form-control[b-pzsqhxmptb] {
        flex-grow: 1; /* 入力欄が伸びるように */
    }


/*必須アイコン*/
.require label[b-pzsqhxmptb]::after {
    content: ' ＊';
    color: #dc3545;
    font-weight: bold;
    vertical-align: baseline;
}

/* エラーメッセージ */
.error-message[b-pzsqhxmptb] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-pzsqhxmptb]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }

.err_class[b-pzsqhxmptb] {
    background-color: #fee2e2 !important;
    box-shadow: 0 4px 12px rgba(2, 188, 212, 0.2);
}

.wrap-error-message[b-pzsqhxmptb] {
    display: table;
    margin: 0 auto;
    margin-bottom: 1rem;
}
    .wrap-error-message > .error-message[b-pzsqhxmptb] {
        padding: 0; /* 内側の余白 */
        margin-top: 0; /* 上の要素との距離 */
    }

/* カレンダー用の作成 */
.form-control.is-disabled[b-pzsqhxmptb] {
    background-color: #e9ecef;
}
/* /Pages/A01/Tabs/TabPropertys.razor.rz.scp.css */
/* ★ 修正後 */
.preface-text[b-r1qriq576q] {
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.7;
    /* カード内の左右の余白と合わせる */
    padding: 1.5rem 1.5rem 0;
}

.section-title[b-r1qriq576q] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 1rem;
    padding-left: 0.25rem;
    border-left: 4px solid #00BCD4;
}

.form-card[b-r1qriq576q] {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 2.0rem;
}

.card-header[b-r1qriq576q] {
    padding: 0.8rem 1.5rem; /* ★ コンパクト化：ヘッダーの高さを調整 */
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    /* ★ 色変更：背景をサブカラー2に、文字を白に */
    background-color: #006064;
    color: #fff;
}

.card-body[b-r1qriq576q] {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-r1qriq576q] {
    display: grid;
    grid-template-columns: 1fr; /* ★ 1列表示に変更 */
    gap: 1.25rem; /* ★ 1列表示のため、縦の隙間として機能 */
}

.form-group[b-r1qriq576q] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-r1qriq576q] {
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
        font-size: 0.9rem;
    }

.property-list[b-r1qriq576q] {
    display: flex;
}

/* 「参照」ボタン付きの入力欄 */
.input-with-button[b-r1qriq576q] {
    margin-right: 0.5rem;
    width: 100%;
}

    .input-with-button .form-uploader[b-r1qriq576q] {
        width: 100%;
    }

    .input-with-button .form-control[b-r1qriq576q] {
        flex-grow: 1; /* 入力欄が伸びるように */
    }

.property-list[b-r1qriq576q] {
    display: flex;
}


/* ボタンのスタイル */
/* ボタンを中央揃えに */
.card-footer[b-r1qriq576q] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    background-color: #f7f9fa;
    border-top: 1px solid #e9ecef;
}

/* 更新ボタン */
.btn-update[b-r1qriq576q] {
    min-width: 120px;
    background-color: #00BCD4; /* テーマカラー */
    border-color: #00BCD4;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .btn-update:hover[b-r1qriq576q] {
        background-color: #0194a8;
        border-color: #0194a8;
    }

/* アイコンの基本スタイル */
.bi[b-r1qriq576q] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    /* テキストとアイコンの垂直方向の位置を揃える */
    vertical-align: text-bottom;
}

/* 更新ボタンのアイコン（ボックス上矢印） */
.bi-update-button[b-r1qriq576q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-box-arrow-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z'/%3E%3Cpath fill-rule='evenodd' d='M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E");
}

/* 関連ファイルがない場合のメッセージスタイル */
.empty-state[b-r1qriq576q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    background-color: #f8f9fa; /* 少し色をつけた背景 */
    border-radius: 8px;
    margin-top: 1rem;
    border: 1px dashed #dee2e6; /* 破線ボーダー */
}

.empty-state-icon[b-r1qriq576q] {
    color: #adb5bd; /* アイコンの色 */
    margin-bottom: 1rem;
}

    .empty-state-icon svg[b-r1qriq576q] {
        width: 36px;
        height: 36px;
    }

.empty-state-text[b-r1qriq576q] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #495057; /* メインテキストの色 */
    margin: 0;
}

.empty-state-hint[b-r1qriq576q] {
    font-size: 0.9rem;
    color: #6c757d; /* ヒントテキストの色 */
    margin-top: 0.25rem;
}
/* /Pages/A01/Tabs/TabTop.razor.rz.scp.css */
.top-tab-container[b-9blgcjyway] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.section-title[b-9blgcjyway] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 1rem;
    padding-left: 0.25rem;
    border-left: 4px solid #00BCD4;
}

/*進行状況トラッカー*/ 
.status-tracker[b-9blgcjyway] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.status-card[b-9blgcjyway] {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-bottom: 4px solid #e0e0e0;
}

    .status-card:hover[b-9blgcjyway] {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

    .status-card.active[b-9blgcjyway] {
        border-color: #00BCD4;
        border-bottom-color: #00BCD4;
        box-shadow: 0 8px 25px rgba(2, 188, 212, 0.15);
    }

.status-header[b-9blgcjyway] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
    color: #6c757d;
}

.status-no[b-9blgcjyway] {
    font-size: 0.9rem;
}

.status-title[b-9blgcjyway] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
}

.status-card hr[b-9blgcjyway] {
    border: none;
    height: 1px;
    background-color: #e9ecef;
    margin: 0.75rem 0;
}

.status-badge[b-9blgcjyway] {
    text-align: center;
    padding: 0.3rem 0;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
}

/*未完了*/
.status-incomplete[b-9blgcjyway] {
    background-color: #e3f2fd;
    color: #03A9F4;
}

/*進行中*/
.status-inprogress[b-9blgcjyway] {
    background-color: #ffebee;
    color: #f44336;
}

/*完了*/
.status-complete[b-9blgcjyway] {
    background-color: #e8f5e9;
    color: #4CAF50;
}

/*メインコンテンツエリア*/ 
.main-content-section[b-9blgcjyway] {
    display: grid;
    grid-template-columns: 450px 1fr; /*左ペイン固定、右ペイン可変 */
    gap: 2rem;
    align-items: start; /*上端揃え */
}

.card-title[b-9blgcjyway] {
    font-size: 1rem;
    font-weight: 600;
    color: #343a40;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f2f5;
    margin-bottom: .75rem;
}

/*To Do ペイン*/ 
.todo-section .card-title[b-9blgcjyway] {
    font-size: 1rem;
    font-weight: 600;
    color: #343a40;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.todo-card[b-9blgcjyway] {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    height: 350px; /*高さ固定(TODO領域の高さを指定する場合はここを設定)*/
}

.todo-content-wrapper[b-9blgcjyway] {
    overflow-y: auto; /*内容がはみ出たら縦スクロールバーを表示*/ 
    padding-right: 1rem; /*スクロールバーのスペースを確保*/ 
    margin-right: -1rem; /*padding分を相殺して見た目を揃える*/ 
    flex-grow: 1;
}

.todo-group[b-9blgcjyway] {
    margin-bottom: 1.75rem;
}

    .todo-group:last-child[b-9blgcjyway] {
        margin-bottom: 0;
    }

.todo-group-title[b-9blgcjyway] {
    font-weight: 600;
    color: #343a40;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.todo-item[b-9blgcjyway] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

    .todo-item:last-child[b-9blgcjyway] {
        margin-bottom: 0;
    }

/*チェックマークのスタイル*/ 
.todo-status-icon[b-9blgcjyway] {
    width: 20px;
    height: 20px;
    border-radius: 50%; /*円形*/ 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

    /*未完了時のスタイル*/ 
    .todo-status-icon.incomplete[b-9blgcjyway] {
        border: 2px solid #ced4da; /*灰色の枠線*/ 
    }

    /*完了時のスタイル*/ 
    .todo-status-icon.completed[b-9blgcjyway] {
        background-color: #00BCD4;/*テーマカラーの背景*/ 
        border: 2px solid #00BCD4;
        color: #fff; /*アイコンの色を白に*/ 
    }

    .todo-status-icon svg[b-9blgcjyway] {
        width: 14px;
        height: 14px;
        opacity: 0; /*デフォルトではアイコンを非表示*/ 
        transition: opacity 0.2s;
    }

    /*completedクラスが付いた時だけアイコンを表示*/ 
    .todo-status-icon.completed svg[b-9blgcjyway] {
        opacity: 1;
    }

/*リンクラベルボタン*/ 
.todo-link[b-9blgcjyway] {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    color: #495057;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    text-align: left;
    transition: all 0.2s ease;
}

    .todo-link:hover[b-9blgcjyway] {
        background-color: #e9ecef;
        border-color: #dee2e6;
    }

.todo-item input[type="checkbox"]:checked ~ .todo-link[b-9blgcjyway] {
    text-decoration: line-through;
    opacity: 0.6;
}

.next-step-button[b-9blgcjyway] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 1;
    width: 100%;
    background-color: #00BCD4;
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 1rem;
}

    .next-step-button:hover[b-9blgcjyway] {
        background-color: #0194a8;
        box-shadow: 0 6px 20px rgba(0, 188, 212, 0.3), 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .next-step-button svg[b-9blgcjyway] {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

    .next-step-button:disabled[b-9blgcjyway],
    .next-step-button:disabled:hover[b-9blgcjyway] {
        background-color: #e0f7fa; /* 薄い水色に変更 */
        color: #b0bec5; /* 文字色を薄いグレーに */
        cursor: not-allowed; /* カーソルを禁止マークに */
        box-shadow: none; /* ホバー時の影を削除 */
    }

/*--- 右ペイン ---*/ 
.msg-next-pane[b-9blgcjyway] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section[b-9blgcjyway] {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
}

.form-group[b-9blgcjyway] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

    .form-group label[b-9blgcjyway] {
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
        font-size: 0.9rem;
    }

.form-control[b-9blgcjyway] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem;
}

.input-with-button[b-9blgcjyway] {
    display: flex;
    gap: 0.5rem;
}

.action-row[b-9blgcjyway] {
    text-align: right;
    margin-top: 1rem;
}

.btn[b-9blgcjyway] {
    padding: 0.6rem 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.btn-primary[b-9blgcjyway] {
    background-color: #00BCD4;
    color: #fff;
}

.input-with-button .btn-outline[b-9blgcjyway] {
    flex-shrink: 0;
    /*paddingとfont-sizeを.form-controlと合わせる */
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    background-color: transparent;
    border: 1px solid #ced4da;
    border-radius: 6px;  /*角丸も合わせる*/ 
    color: #495057;
    transition: background-color 0.2s;
}

    .input-with-button .btn-outline:hover[b-9blgcjyway] {
        background-color: #f0f2f5;
    }

.form-placeholder[b-9blgcjyway] {
    background-color: #f8f9fa;
    border: 2px dashed #e9ecef;
    border-radius: 8px;
    padding: 3rem;
    text-align: center;
    color: #6c757d;
}

/*--- 右ペインカード ---*/ 
.message-card[b-9blgcjyway],
.next-action-card[b-9blgcjyway] {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
}

/*メッセージ*/
.message-card[b-9blgcjyway] {
    height: 200px; /*高さ固定(TODO領域の高さを指定する場合はここを設定)*/
    display: flex;
    flex-direction: column;
}

    .message-card .card-body[b-9blgcjyway] {
        font-size: 0.9rem;
        color: #495057;
        line-height: 1.7;
        white-space: pre-wrap;
        flex-grow: 1;
        overflow-y: auto;
        padding: 0 1rem !important;
    }

/*次にやること*/
.next-action-card[b-9blgcjyway] {
    height: 125px; /*高さ固定(TODO領域の高さを指定する場合はここを設定)*/
    display: flex;
    flex-direction: column;
}

/*「次にやること」アイコンの垂直位置を微調整*/ 
.next-action-card .card-title svg[b-9blgcjyway] {
    position: relative;
    top: -2px;  /*少し上にずらす */
}
    .next-action-card .card-body[b-9blgcjyway] {
        white-space: pre-wrap;
        flex-grow: 1;
        overflow-y: auto;
        padding: 0 1rem !important;
    }

/*次にやることのテキスト*/
.next-action-text[b-9blgcjyway] {
    font-size: 0.9rem;
    color: #495057;
    font-weight: normal;
}

/* 関連ファイルがない場合のメッセージスタイル */
.empty-state[b-9blgcjyway] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    background-color: #f8f9fa; /* 少し色をつけた背景 */
    border-radius: 8px;
    margin-top: 1rem;
    border: 1px dashed #dee2e6; /* 破線ボーダー */
}

.empty-state-icon[b-9blgcjyway] {
    color: #adb5bd; /* アイコンの色 */
    margin-bottom: 1rem;
}

    .empty-state-icon svg[b-9blgcjyway] {
        width: 48px;
        height: 48px;
    }

.empty-state-text[b-9blgcjyway] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #495057; /* メインテキストの色 */
    margin: 0;
}

.empty-state-hint[b-9blgcjyway] {
    font-size: 0.9rem;
    color: #6c757d; /* ヒントテキストの色 */
    margin-top: 0.25rem;
}

/*16インチ以上24インチ未満*/
@media screen and (min-width: 1360px) and (max-width: 1535px) {
    .main-content-section[b-9blgcjyway] {
        grid-template-columns: 350px 1fr; /*左ペイン固定、右ペイン可変 */
    }
}
/*13インチ以上16インチ未満*/
@media screen and (min-width: 1280px) and (max-width: 1359px) {
    .main-content-section[b-9blgcjyway] {
        grid-template-columns: 350px 1fr; /*左ペイン固定、右ペイン可変 */
    }
    .message-card .card-body[b-9blgcjyway], .next-action-card .card-body[b-9blgcjyway] {
        padding: 0;
    }
}
/* /Pages/A01/TopicDetailTab.razor.rz.scp.css */
/* ページ全体のレイアウト */
.page-layout[b-90ths96lzw] {
    display: flex;
    height: calc(100vh - 80px);
    padding: 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 案件情報ヘッダ */
.topic-header[b-90ths96lzw] {
    display: flex;
    justify-content: space-between; /* 両端に要素を配置 */
    align-items: center;
    margin-bottom: 1rem; /* タブとの間隔 */
    padding-bottom: 1rem; /* 下線と要素の間の余白 */
    border-bottom: 1px solid #e0e0e0; /* 区切りの下線 */
}

/* 案件タイトルとアイコンのコンテナ */
.topic-title-container[b-90ths96lzw] {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* アイコンとタイトルの間隔 */
}

/* 案件アイコンのスタイル */
.topic-icon[b-90ths96lzw] {
    flex-shrink: 0; /* アイコンが縮まないように */
}

/* 案件タイトル */
.topic-title[b-90ths96lzw] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #004d40;
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
    border-radius: 8px;
    border: 1px solid #b2ebf2;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
}

    /* タイトル内のSVGアイコンのスタイル */
    .topic-title svg[b-90ths96lzw] {
        width: 20px;
        height: 20px;
        color: #00796b;
    }

/* 顧客・担当者情報 */
.topic-info[b-90ths96lzw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    /* 各情報タグ */
    .topic-info .info-item[b-90ths96lzw] {
        background-color: #f0f0f0;
        color: #333;
        padding: 0.4rem 0.9rem;
        border-radius: 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

/* 左ペイン（タブコンテンツ） */
.left-pane[b-90ths96lzw] {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: margin-right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    /*z-index: 1;*/
}

/* 右ペイン（チャット） */
.right-pane[b-90ths96lzw] {
    position: relative;
    width: 450px;
    height: 100%;
    flex-shrink: 0;
    margin-left: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /*z-index: 1;*/
}

/* ★ チャットが閉じている時の挙動 */
.page-layout.chat-closed .right-pane[b-90ths96lzw] {
    /* パネルを100%右にスライドさせて画面外へ */
    transform: translateX(100%);
}

.page-layout.chat-closed .left-pane[b-90ths96lzw] {
    /* 右パネルがなくなった分のスペースを埋める */
    margin-right: -450px;
}

/* 開閉ボタンのスタイル */
.chat-toggle-button[b-90ths96lzw] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 60px;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.2s;
}

    .chat-toggle-button:hover[b-90ths96lzw] {
        background-color: #f8f9fa;
    }

    .chat-toggle-button svg[b-90ths96lzw] {
        width: 20px;
        height: 20px;
        color: #495057;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

/* チャットが開いている時のアイコンの向き（右向き > に） */
.page-layout.chat-open .chat-toggle-button svg[b-90ths96lzw] {
    transform: rotate(0deg);
}

/* チャットが閉じている時のアイコンの向き（左向き < に） */
.page-layout.chat-closed .chat-toggle-button svg[b-90ths96lzw] {
    transform: rotate(180deg);
}


/* --- 以下、タブのスタイル --- */
.tab-container[b-90ths96lzw] {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

.nav-pills[b-90ths96lzw] {
    flex-shrink: 0;
}

.tab-content[b-90ths96lzw] {
    margin-top: 1.5rem;
    padding: 2rem;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    flex-grow: 1;
    overflow-y: auto;
    display: block;
}

.nav-pills ul[b-90ths96lzw] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

.nav-pills li[b-90ths96lzw] {
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    border-radius: 999px;
    color: #495057;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

    .nav-pills li:not(.active):hover[b-90ths96lzw] {
        background-color: #f0f2f5;
    }

    .nav-pills li.active[b-90ths96lzw] {
        color: #fff;
        font-weight: 600;
        background-color: #00BCD4;
        box-shadow: 0 4px 12px rgba(2, 188, 212, 0.3);
    }

/*16インチ以上24インチ未満*/
@media screen and (min-width: 1360px) and (max-width: 1535px) {
    .right-pane[b-90ths96lzw] {
        width:320px;
    }
    .page-layout.chat-closed .left-pane[b-90ths96lzw] {
        margin-right: -320px;
    }
    /* 案件タイトル */
    .topic-title[b-90ths96lzw] {
        padding: 0.3rem 0.6rem;
    }
    .tab-content[b-90ths96lzw] {
        padding: 1rem;
    }

    .related-files-section .card-title[b-90ths96lzw] {
        padding: 1rem;
    }

    .related-files-section .card-body[b-90ths96lzw] {
        padding: 1rem .5rem !important;
    }
}

/*13インチ以上16インチ未満*/
@media screen and (min-width: 1280px) and (max-width: 1359px) {
    .page-layout[b-90ths96lzw]{
        padding:0;
    }
    .right-pane[b-90ths96lzw] {
        width: 290px;
    }
    .page-layout.chat-closed .left-pane[b-90ths96lzw] {
        margin-right: -290px;
    }
    /* 案件タイトル */
    .topic-title[b-90ths96lzw] {
        padding: 0.3rem 0.6rem;
        font-size:1rem;
    }
    .tab-content[b-90ths96lzw] {
        padding: 1rem;
    }
    .related-files-section .card-title[b-90ths96lzw]{
        padding:1rem;
    }
    .related-files-section .card-body[b-90ths96lzw] {
        padding: 1rem .5rem;
    }
}
/* /Pages/A02/TopicPlus.razor.rz.scp.css */
/* --- タイトル部 --- */
/* タイトルコンテナ */
.title-container[b-4ur2ii0rb2] {
    margin-bottom: 2rem;
}

/* メインタイトル */
.page-title-accent[b-4ur2ii0rb2] {
    display: inline-block;
    position: relative;
    font-weight: 700;
    color: #343a40;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    /* タイトルのアクセントライン */
    .page-title-accent[b-4ur2ii0rb2]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; /* 50px から 100% へ変更 */
        height: 3px;
        background-color: #00BCD4;
        border-radius: 2px;
    }

/* サブタイトル */
.page-subtitle[b-4ur2ii0rb2] {
    color: #6c757d;
    margin: 0;
}

/* タイトルアイコン */
.bi-title-icon[b-4ur2ii0rb2] {
    width: 24px;
    height: 24px;
    /* ナビゲーションアイコンと同じものを採用 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300BCD4' class='bi bi-file-earmark-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z'/%3E%3C/svg%3E");
}

/* アイコンの基本スタイル */
.bi[b-4ur2ii0rb2] {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- 項目部 --- */
.form-container[b-4ur2ii0rb2] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* ★ コンパクト化：各カード間の隙間を縮小 */
}

.form-card[b-4ur2ii0rb2] {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.card-header[b-4ur2ii0rb2] {
    padding: 0.8rem 1.5rem; /* ★ コンパクト化：ヘッダーの高さを調整 */
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    /* ★ 色変更：背景をサブカラー2に、文字を白に */
    background-color: #006064;
    color: #fff;
}

.card-body[b-4ur2ii0rb2] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* ★ コンパクト化：各行間の隙間を縮小 */
}

.form-row[b-4ur2ii0rb2] {
    display: grid;
    grid-template-columns: 1fr; /* ★ 1列表示に変更 */
    gap: 1.25rem; /* ★ 1列表示のため、縦の隙間として機能 */
}

.form-group[b-4ur2ii0rb2] {
    display: flex;
    flex-direction: column;
}

    /* 1つの項目を2カラム幅にする指定は1列表示では不要
.form-group.full-width {
    grid-column: 1 / -1;
}
*/

    .form-group label[b-4ur2ii0rb2] {
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
        font-size: 0.9rem;
    }


.form-control[b-4ur2ii0rb2] {
    padding: 0.5rem 0.75rem; /* ★ コンパクト化：コントロールの高さを調整 */
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem; /* ★ コンパクト化：フォントサイズを微調整 */
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control:focus[b-4ur2ii0rb2] {
        outline: none;
        border-color: #03A9F4;
        box-shadow: 0 0 0 3px rgba(3, 169, 244, 0.15);
    }
    .form-control:disabled[b-4ur2ii0rb2] {
        background-color: #e9ecef;
    }

/*セレクトボックスアイコン付与*/
.wrap-select[b-4ur2ii0rb2] {
    position: relative;
}

    .wrap-select[b-4ur2ii0rb2]::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.5;
        z-index:1;
    }

/* ラジオボタン */
.radio-group[b-4ur2ii0rb2] {
    display: flex;
    gap: 0.75rem; /* ボタン間の隙間を調整 */
    align-items: center;
    min-height: calc(0.5rem * 2 + 0.95rem * 1.5 + 2px);
}

    /* デフォルトのラジオボタンを非表示に */
    .radio-group input[type="radio"][b-4ur2ii0rb2] {
        display: none;
    }

    /* ラベルをボタン風にスタイリング */
    .radio-group label[b-4ur2ii0rb2] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1.25rem;
        border: 1px solid #ced4da;
        border-radius: 999px; /* ピル形状（角が丸い形）に */
        cursor: pointer;
        transition: all 0.2s ease;
        font-weight: 500;
        color: #495057;
        background-color: #fff;
    }

        /* 選択されていないボタンのホバー効果 */
        .radio-group label:has(input:not(:checked)):hover[b-4ur2ii0rb2] {
            border-color: #03A9F4;
            background-color: #e3f2fd;
        }

        /* 選択されたボタンのスタイル */
        .radio-group label:has(input:checked)[b-4ur2ii0rb2] {
            background-color: #00BCD4; /* テーマカラー */
            border-color: #00BCD4;
            color: #fff;
            box-shadow: 0 4px 12px rgba(2, 188, 212, 0.2);
        }

        /* ラジオボタンのラベルには必須マークは不要 */
        .radio-group label[b-4ur2ii0rb2]::after {
            content: none !important;
        }

.form-actions[b-4ur2ii0rb2] {
    display: block;
    /*justify-content: center;*/
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align:center;
}

.btn[b-4ur2ii0rb2] {
    padding: 0.6rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
}

.btn-primary[b-4ur2ii0rb2] {
    background-color: #00BCD4;
    color: #fff;
}

    .btn-primary:hover[b-4ur2ii0rb2] {
        background-color: #0097a7;
    }

.btn-secondary[b-4ur2ii0rb2] {
    background-color: #e0e0e0;
    color: #343a40;
}

    .btn-secondary:hover[b-4ur2ii0rb2] {
        background-color: #bdbdbd;
    }

/* 枠線のみのボタン（参照ボタン用） */
.btn-outline[b-4ur2ii0rb2] {
    flex-shrink: 0; /* ボタンが縮まないように */
    padding: 0.725rem 0.75rem; /* ボタンの横幅を確保 */
    background-color: transparent;
    border: 1px solid #ced4da;
    color: #495057;
}

    .btn-outline:hover[b-4ur2ii0rb2] {
        background-color: #f0f2f5;
    }

/* 削除ボタンのアイコン（バツ印） */
.bi-save-button[b-4ur2ii0rb2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-trash3' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

/* 閉じるボタンのアイコン（ゴミ箱） */
.bi-estimate-button[b-4ur2ii0rb2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.custom-svg[b-4ur2ii0rb2]{
    margin-right:7px;
}

/* textareaにもform-controlのスタイルを適用 */
textarea.form-control[b-4ur2ii0rb2] {
    font-family: inherit; /* フォントを他のコントロールと合わせる */
}

/* 「参照」ボタン付きの入力欄 */
.input-with-button[b-4ur2ii0rb2] {
    margin-right: 0.5rem;
    width:100%;
}

    .input-with-button .form-uploader[b-4ur2ii0rb2] {
        width:100%;
    }
    .input-with-button .form-control[b-4ur2ii0rb2] {
        flex-grow: 1; /* 入力欄が伸びるように */
    }
.property-list[b-4ur2ii0rb2]{
    display:flex;
}


/*必須アイコン*/
.require label[b-4ur2ii0rb2]::after {
    content: ' ＊';
    color: #dc3545;
    font-weight: bold;
    vertical-align: baseline;
}

/* エラーメッセージ */
.error-message[b-4ur2ii0rb2] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-4ur2ii0rb2]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }

.err_class[b-4ur2ii0rb2] {
    background-color: #fee2e2 !important;
    box-shadow: 0 4px 12px rgba(2, 188, 212, 0.2);
}
.wrap-error-message[b-4ur2ii0rb2] {
    display: table;
    margin: 0 auto;
    margin-bottom: 1rem;
}

    .wrap-error-message > .error-message[b-4ur2ii0rb2] {
        padding: 0; /* 内側の余白 */
        margin-top: 0; /* 上の要素との距離 */
    }

/* --- カレンダーコントロールのスタイル --- */
.form-calender[b-4ur2ii0rb2] {
    display: flex; /* アイコンと入力欄を横並びにする */
    align-items: center; /* 上下中央に揃える */
}

    /* カレンダーアイコン */
    .form-calender[b-4ur2ii0rb2]::before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 0.75rem; /* アイコンと入力欄の間のスペース */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23495057' class='bi bi-calendar-event' viewBox='0 0 16 16'%3E%3Cpath d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z'/%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0; /* アイコンがコンテナの縮小によって潰れないようにする */
    }

    /* CustomDateTimePicker内部のinput要素の不要なpaddingをリセット */
    .form-calender[b-4ur2ii0rb2]  .custom-input,
    .form-calender[b-4ur2ii0rb2]  .flatpickr-input {
        /* 親(.form-control)にpaddingがあるため、子のpaddingは0にする */
        padding: 0;
        /* 残りのスペースをすべて埋めるようにする */
        flex-grow: 1;
    }
/* /Pages/A03/Account.razor.rz.scp.css */
/* タイトルコンテナ */
.title-container[b-1fp7gn3mpj] {
    margin-bottom: 2rem;
}

/* メインタイトル */
.page-title-accent[b-1fp7gn3mpj] {
    display: inline-block;
    position: relative;
    font-weight: 700;
    color: #343a40;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    /* タイトルのアクセントライン */
    .page-title-accent[b-1fp7gn3mpj]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; /* 50px から 100% へ変更 */
        height: 3px;
        background-color: #00BCD4;
        border-radius: 2px;
    }

/* サブタイトル */
.page-subtitle[b-1fp7gn3mpj] {
    color: #6c757d;
    margin: 0;
}

/* タイトルアイコン */
.bi-title-icon[b-1fp7gn3mpj] {
    width: 24px;
    height: 24px;
    /* ナビゲーションアイコンと同じものを採用 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300BCD4' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z'/%3E%3C/svg%3E");
}

/* アイコンの基本スタイル */
.bi[b-1fp7gn3mpj] {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- 項目部 --- */
.form-container[b-1fp7gn3mpj] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* ★ コンパクト化：各カード間の隙間を縮小 */
}

.form-body[b-1fp7gn3mpj] {
    flex: 1 1 auto;
    padding: 1.5rem 1rem;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
/*.form-card {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}


.card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;*/ /* ★ コンパクト化：各行間の隙間を縮小 */
/*}*/
.form-row[b-1fp7gn3mpj] {
    display: grid;
    grid-template-columns: 1fr; /* ★ 1列表示に変更 */
    gap: 1.25rem; /* ★ 1列表示のため、縦の隙間として機能 */
}

.form-group[b-1fp7gn3mpj] {
    display: flex;
    flex-direction: column;
}

    /* 1つの項目を2カラム幅にする指定は1列表示では不要
.form-group.full-width {
    grid-column: 1 / -1;
}
*/

    .form-group label[b-1fp7gn3mpj] {
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
        font-size: 0.9rem;
    }

        .require label[b-1fp7gn3mpj]::after {
            content: ' ＊';
            color: #dc3545;
            font-weight: bold;
            vertical-align: baseline;
        }

.form-control[b-1fp7gn3mpj] {
    padding: 0.5rem 0.75rem; /* ★ コンパクト化：コントロールの高さを調整 */
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem; /* ★ コンパクト化：フォントサイズを微調整 */
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control:focus[b-1fp7gn3mpj] {
        outline: none;
        border-color: #03A9F4;
        box-shadow: 0 0 0 3px rgba(3, 169, 244, 0.15);
    }
    .form-control:disabled[b-1fp7gn3mpj], .form-control[readonly][b-1fp7gn3mpj] {
        background-color: #e9ecef;
        opacity: 1;
    }


/* ラジオボタン */
.radio-group[b-1fp7gn3mpj] {
    display: flex;
    gap: 0.75rem; /* ボタン間の隙間を調整 */
    align-items: center;
    min-height: calc(0.5rem * 2 + 0.95rem * 1.5 + 2px);
}

    /* デフォルトのラジオボタンを非表示に */
    .radio-group input[type="radio"][b-1fp7gn3mpj] {
        display: none;
    }

    /* ラベルをボタン風にスタイリング */
    .radio-group label[b-1fp7gn3mpj] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1.25rem;
        border: 1px solid #ced4da;
        border-radius: 999px; /* ピル形状（角が丸い形）に */
        cursor: pointer;
        transition: all 0.2s ease;
        font-weight: 500;
        color: #495057;
        background-color: #fff;
    }

        /* 選択されていないボタンのホバー効果 */
        .radio-group label:has(input:not(:checked)):hover[b-1fp7gn3mpj] {
            border-color: #03A9F4;
            background-color: #e3f2fd;
        }

        /* 選択されたボタンのスタイル */
        .radio-group label:has(input:checked)[b-1fp7gn3mpj] {
            background-color: #00BCD4; /* テーマカラー */
            border-color: #00BCD4;
            color: #fff;
            box-shadow: 0 4px 12px rgba(2, 188, 212, 0.2);
        }

        /* ラジオボタンのラベルには必須マークは不要 */
        .radio-group label[b-1fp7gn3mpj]::after {
            content: none;
        }

.form-actions[b-1fp7gn3mpj] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 2rem;
}

.notice[b-1fp7gn3mpj] {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: #495057;
}

.btn[b-1fp7gn3mpj] {
    /*padding: 0.6rem 2rem;*/
    font-size: 1rem;
    /*font-weight: 600;*/
    border-radius: .25rem !important;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
    border-bottom: 2px solid #00BCD4;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.btn-primary[b-1fp7gn3mpj] {
    background-color: #00BCD4;
    color: #fff;
}

    .btn-primary:hover[b-1fp7gn3mpj] {
        background-color: #0097a7;
    }

.btn-secondary[b-1fp7gn3mpj] {
    background-color: #e0e0e0;
    color: #343a40;
}

    .btn-secondary:hover[b-1fp7gn3mpj] {
        background-color: #bdbdbd;
    }
/* アイコンの基本スタイル */
.bi[b-1fp7gn3mpj] {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}
.bi-update-button[b-1fp7gn3mpj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-box-arrow-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z'/%3E%3Cpath fill-rule='evenodd' d='M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E");
}
/* textareaにもform-controlのスタイルを適用 */
textarea.form-control[b-1fp7gn3mpj] {
    font-family: inherit; /* フォントを他のコントロールと合わせる */
}

/* 「参照」ボタン付きの入力欄 */
.input-with-button[b-1fp7gn3mpj] {
    display: flex;
    gap: 0.5rem;
}

    .input-with-button .form-control[b-1fp7gn3mpj] {
        flex-grow: 1; /* 入力欄が伸びるように */
    }

/* 枠線のみのボタン（参照ボタン用） */
.btn-outline[b-1fp7gn3mpj] {
    flex-shrink: 0; /* ボタンが縮まないように */
    padding: 0 1.5rem; /* ボタンの横幅を確保 */
    background-color: transparent;
    border: 1px solid #ced4da;
    color: #495057;
}

    .btn-outline:hover[b-1fp7gn3mpj] {
        background-color: #f0f2f5;
    }

/* エラーメッセージ */
.error-message[b-1fp7gn3mpj] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-1fp7gn3mpj]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
/* /Pages/A04/Yakkan.razor.rz.scp.css */
:root[b-gg0kghqpzr] {
    --theme-color: #00BCD4;
}

/* --- ページタイトル --- */
.title-container[b-gg0kghqpzr] {
    margin-bottom: 2rem;
}

/* メインタイトル */
.page-title-accent[b-gg0kghqpzr] {
    display: inline-block;
    position: relative;
    font-weight: 700;
    color: #343a40;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    /* タイトルのアクセントライン */
    .page-title-accent[b-gg0kghqpzr]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #00BCD4;
        border-radius: 2px;
    }

/* タイトルアイコン */
.bi-title-icon[b-gg0kghqpzr] {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300BCD4' class='bi bi-file-earmark-text' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* --- 規約表示セクション --- */
.terms-card[b-gg0kghqpzr] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* 説明文セクションのスタイル */
.terms-preface[b-gg0kghqpzr] {
    padding: 2rem 2rem 1.5rem 2rem;
    text-align: center;
}

.preface-title[b-gg0kghqpzr] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #343a40;
    margin: 0 0 1rem 0;
}

.preface-text[b-gg0kghqpzr] {
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.7;
    margin: 0;
}

/*利用規約のスタイル*/
.terms-header[b-gg0kghqpzr] {
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    text-align: center;
}

.terms-body[b-gg0kghqpzr] {
    padding: 2rem;
}

.terms-container[b-gg0kghqpzr] {
    height: 63vh;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    line-height: 1.7;
    color: #495057;
    background-color: #fff;
    font-size:14px;
}

    .terms-container[b-gg0kghqpzr]::-webkit-scrollbar {
        width: 8px;
    }

    .terms-container[b-gg0kghqpzr]::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .terms-container[b-gg0kghqpzr]::-webkit-scrollbar-thumb {
        background: #ced4da;
        border-radius: 4px;
    }

        .terms-container[b-gg0kghqpzr]::-webkit-scrollbar-thumb:hover {
            background: #adb5bd;
        }

/*ポリシーのスタイル*/
.external-link-section[b-gg0kghqpzr] {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

    .external-link-section a[b-gg0kghqpzr] {
        color: var(--theme-color);
        font-weight: 500;
    }

.terms-footer[b-gg0kghqpzr] {
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}


/* --- 同意ボタンとチェックボックス --- */
.bi[b-gg0kghqpzr] {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-agree[b-gg0kghqpzr] {
    min-width: 120px;
    background-color: #00BCD4;
    border-color: #00BCD4;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .btn-agree:hover[b-gg0kghqpzr] {
        background-color: #0194a8;
        border-color: #0194a8;
    }

.bi-agree-button[b-gg0kghqpzr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-earmark-check' viewBox='0 0 16 16'%3E%3Cpath d='M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z'/%3E%3Cpath d='M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z'/%3E%3C/svg%3E");
}

.agreement-section[b-gg0kghqpzr] {
    margin-bottom: 1.5rem;
}

.checkbox-agree[b-gg0kghqpzr] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5em 2em;
    border: none;
}

    .checkbox-agree label[b-gg0kghqpzr] {
        display: flex;
        align-items: center;
        gap: 0 .5em;
        position: relative;
        cursor: pointer;
    }

        .checkbox-agree label[b-gg0kghqpzr]::before,
        .checkbox-agree label:has(:checked)[b-gg0kghqpzr]::after {
            content: '';
        }

        .checkbox-agree label[b-gg0kghqpzr]::before {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #e6edf3;
        }

        .checkbox-agree label:has(:checked)[b-gg0kghqpzr]::before {
            background-color: #00BCD4;
        }

        .checkbox-agree label:has(:checked)[b-gg0kghqpzr]::after {
            position: absolute;
            top: 5px;
            left: 8px;
            transform: rotate(45deg);
            width: 8px;
            height: 12px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
        }

    .checkbox-agree input[b-gg0kghqpzr] {
        display: none;
    }
/* /Pages/A05/Guide.razor.rz.scp.css */
:root[b-nlq10s6zlj] {
    --theme-color: #00BCD4;
}

/* --- ページタイトル --- */
.title-container[b-nlq10s6zlj] {
    margin-bottom: 2rem;
}

/* メインタイトル */
.page-title-accent[b-nlq10s6zlj] {
    display: inline-block;
    position: relative;
    font-weight: 700;
    color: #343a40;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    /* タイトルのアクセントライン */
    .page-title-accent[b-nlq10s6zlj]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #00BCD4;
        border-radius: 2px;
    }

.bi-title-icon[b-nlq10s6zlj] {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300BCD4' class='bi bi-book' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}


/* --- コンテンツエリア --- */
.guide-container[b-nlq10s6zlj] {
    display: grid;
    grid-template-columns: minmax(0, 960px);
    justify-content: center;
    gap: 2rem;
}

.guide-card[b-nlq10s6zlj] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    width:780px;
    margin:0 auto;
}

.card-title[b-nlq10s6zlj] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    background-color: #f8f9fa;
    padding: .75rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .card-title svg[b-nlq10s6zlj] {
        width: 20px;
        height: 20px;
        fill: var(--theme-color);
    }

.card-body[b-nlq10s6zlj] {
    padding: 1rem 1.5rem;
}

    .card-body p[b-nlq10s6zlj] {
        margin-top: 0;
        color: #495057;
    }

.inline-link[b-nlq10s6zlj] {
    color: var(--theme-color);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-decoration: underline;
}

.card-subtitle[b-nlq10s6zlj] {
    padding-bottom: 1rem;
    color: #495057;
}

.video-container[b-nlq10s6zlj] {
    padding: 0;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* 16:9のアスペクト比を維持 */
    background-color: #f0f0f0; /* 読み込み中の背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .video-container .spinner[b-nlq10s6zlj] {
        /* スピナー用のスタイル */
        width: 3rem;
        height: 3rem;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-top-color: var(--theme-color);
        border-radius: 50%;
        animation: spin-b-nlq10s6zlj 1s linear infinite;
        position: absolute;
    }

@keyframes spin-b-nlq10s6zlj {
    to {
        transform: rotate(360deg);
    }
}

video[b-nlq10s6zlj] {
    display: block; /* 不要な下余白を削除 */
    border-radius: 0 0 12px 12px; /* カードの角丸に合わせる */
}

.responsive-video[b-nlq10s6zlj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親要素いっぱいに広がる */
}
/* /Pages/A06/AccountManage.razor.rz.scp.css */
/* タイトルコンテナ */
.title-container[b-41m8tbdn5t] {
    margin-bottom: 2rem;
}

/* メインタイトル */
.page-title-accent[b-41m8tbdn5t] {
    display: inline-block;
    position: relative;
    font-weight: 700;
    color: #343a40;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    /* タイトルのアクセントライン */
    .page-title-accent[b-41m8tbdn5t]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; /* 50px から 100% へ変更 */
        height: 3px;
        background-color: #00BCD4;
        border-radius: 2px;
    }

/* サブタイトル */
.page-subtitle[b-41m8tbdn5t] {
    color: #6c757d;
    margin: 0;
}

/* タイトルアイコン */
.bi-title-icon[b-41m8tbdn5t] {
    width: 24px;
    height: 24px;
    /* ナビゲーションアイコンと同じものを採用 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300BCD4' class='bi bi-person-badge-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm4.5 0a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm5 2.755C12.146 12.825 10.623 12 8 12s-4.146.826-5 1.755V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.245z'/%3E%3C/svg%3E");
}

/* アイコンの基本スタイル */
.bi[b-41m8tbdn5t] {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

/* 検索カード全体 */
.search-card[b-41m8tbdn5t] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* 影を柔らかく */
    overflow: hidden;
    margin-bottom: 2rem;
}

/* カードヘッダー */
.card-header[b-41m8tbdn5t] {
    display: flex;
    justify-content:space-between;
    align-items: center;
    gap:0.75rem;
    padding: 1.25rem 2rem;
    background-color: #f7f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
}
.card-header-left span[b-41m8tbdn5t]{
    margin-right:.5rem;
}
/* カード本体 */
.card-body[b-41m8tbdn5t] {
    padding: 2rem;
}

/* ボタンを中央揃えに */
.card-footer[b-41m8tbdn5t] {
    display: flex;
    justify-content: center; /* flex-end から center に変更 */
    gap: 1rem;
    padding: 1.25rem 2rem;
    background-color: #f7f9fa;
    border-top: 1px solid #e9ecef;
}

.form-group[b-41m8tbdn5t] {
    margin: .5rem 0;
}
/* ラベルと入力欄の間に余白を追加 */
.form-group label[b-41m8tbdn5t] {
    display: block; /* ブロック要素として扱う */
    margin-bottom: 0.5rem; /* ラベルの下に余白を設定 */
    font-weight: 500;
}

.form-control:disabled[b-41m8tbdn5t], .form-control[readonly][b-41m8tbdn5t] {
    background-color: #e9ecef;
    opacity: 1;
}
.require label[b-41m8tbdn5t]::after {
    content: ' ＊';
    color: #dc3545;
    font-weight: bold;
    vertical-align: baseline;
}
/* ヘッダーのアイコン */
.bi-header-icon[b-41m8tbdn5t] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2302BCD4' class='bi bi-search-heart' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 4.482c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z'/%3E%3Cpath d='M13 6.5a6.471 6.471 0 0 1-1.258 3.844c.04.03.078.062.115.098l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1.007 1.007 0 0 1-.1-.115h.002A6.5 6.5 0 1 1 13 6.5ZM6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z'/%3E%3C/svg%3E");
    display:inline-block;
}
.btn-delete[b-41m8tbdn5t] {
    min-width: 120px;
    background-color: #fd5e5e !important; /* テーマカラー */
    border-color: #00BCD4;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}
    .btn-delete:hover[b-41m8tbdn5t] {
        background-color: #df5959 !important;
        /*#d73a3a*/
        border-color: #0194a8;
    }
/* 検索ボタン */
.btn-search[b-41m8tbdn5t] {
    min-width: 120px;
    background-color: #00BCD4; /* テーマカラー */
    border-color: #00BCD4;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .btn-search:hover[b-41m8tbdn5t] {
        background-color: #0194a8;
        border-color: #0194a8;
    }

/* クリアボタン */
.btn-clear[b-41m8tbdn5t] {
    min-width: 120px;
    color: #6c757d;
    background-color: transparent;
    border: 1px solid #ced4da;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .btn-clear:hover[b-41m8tbdn5t] {
        background-color: #e9ecef;
        border-color: #ced4da;
    }

    .btn-clear .bi[b-41m8tbdn5t] {
        filter: invert(45%) sepia(8%) saturate(274%) hue-rotate(167deg) brightness(90%) contrast(87%); /* アイコンの色を文字色に合わせる */
    }

/* クリアボタンのアイコン（リセット） */
.bi-clear-button[b-41m8tbdn5t] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-counterclockwise' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
}

/* 検索ボタンのアイコン（虫眼鏡） */
.bi-search-button[b-41m8tbdn5t] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

/* 新規登録ボタンのアイコン（人物プラス） */
.bi-regist-button[b-41m8tbdn5t] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-person-plus' viewBox='0 0 16 16'%3E%3Cpath d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/%3E%3Cpath fill-rule='evenodd' d='M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

/* 更新ボタンのアイコン（ボックス上矢印） */
.bi-update-button[b-41m8tbdn5t] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-box-arrow-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z'/%3E%3Cpath fill-rule='evenodd' d='M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E");
}

/* 削除ボタンのアイコン（バツ印） */
.bi-delete-button[b-41m8tbdn5t] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-trash3' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

/* 閉じるボタンのアイコン（ゴミ箱） */
.bi-close-button[b-41m8tbdn5t] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.grid-container[b-41m8tbdn5t] {
    /*width:1606px;*/
    width: calc(100vw - 250px - (2rem + 1.5rem)) !important;
}

/*セレクトボックスアイコン付与*/
.wrap-select[b-41m8tbdn5t] {
    position: relative;
}
    .wrap-select[b-41m8tbdn5t]::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.5;
    }


/* ダイアログ */
.dialog-overlay[b-41m8tbdn5t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9990;
    display: flex;
    justify-content: center;
    align-items: center;
}

.styled-dialog[b-41m8tbdn5t] {
    width: 660px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 9980;
    resize: both;
    height: 892px;
    max-height: 100vh;
}

    .styled-dialog .dialog-title[b-41m8tbdn5t] {
        padding: 0.8rem 1.5rem; /* ★ コンパクト化：ヘッダーの高さを調整 */
        border-bottom: 1px solid #e9ecef;
        font-weight: 600;
        /* ★ 色変更：背景をサブカラー2に、文字を白に */
        background-color: #006064;
        color: #fff;
    }


.dialog-body[b-41m8tbdn5t] {
    padding: .5rem 1rem;
    font-size: 15px;
    color: #333;
    word-wrap: break-word;
    /*max-height: calc(100% - 120px);*/
    height: calc(100% - 100px);
    overflow-y: auto;
}

    .dialog-body h3[b-41m8tbdn5t] {
        font-weight: bold;
        font-size: 16px;
        margin: 10px 0;
    }
    .dialog-body .form-group[b-41m8tbdn5t]{
        padding:.5rem 0;
    }
    /*.dialog-footer .btn-gray {
    background-color: #c3c3c3;
}

    .dialog-footer .btn-gray:hover {
        background-color: #8d8d8d;
    }*/
    .d-input-table[b-41m8tbdn5t] {
        border-bottom: 2px solid #afafaf;
        margin-bottom: 1rem;
        background: #ffffff;
    }

.form-body[b-41m8tbdn5t] {
    padding: 0.5rem 1rem;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    margin: 0.5rem 0;
}

.notice[b-41m8tbdn5t] {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: #495057;
}

.flex-item[b-41m8tbdn5t] {
    display: flex;
}

.d-input[b-41m8tbdn5t] {
    width: 80%;
}

.grid-dialog[b-41m8tbdn5t] {
    margin-bottom: .75rem;
    max-width: 100%;
    box-sizing: border-box;
    max-height: calc(100vh - 250px);
    overflow-x: auto;
    overflow-y: auto;
}

.dialog-footer[b-41m8tbdn5t] {
    padding: 10px;
    padding-right: 30px;
    padding-left: 30px;
    background: #f7f9fa;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    position: sticky;
    bottom: 0;
    left: 0;
}

    .dialog-footer button[b-41m8tbdn5t] {
        border-radius: .25rem !important;
        padding: .375rem .75rem !important;
        font-weight:normal;
    }

/* エラーメッセージ */
.error-message[b-41m8tbdn5t] {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 上下中央揃え */
    gap: 0.5rem; /* アイコンとテキストの間の隙間 */
    padding: 0.25rem .5rem 0.6rem; /* 内側の余白 */
    margin-top: 0.5rem; /* 上の要素との距離 */
    font-size: 0.875rem; /* 少しだけ大きくして読みやすく */
    font-weight: 500;
    /* 視認性の高い、少し落ち着いた赤色に変更 */
    color: #b91c1c;
    border-radius: 6px; /* 他の入力コントロールと角丸を合わせる */
}

    /* エラーアイコンを先頭に表示 */
    .error-message[b-41m8tbdn5t]::before {
        content: '';
        flex-shrink: 0; /* アイコンが縮まないように */
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b91c1c' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }