.pagingnavi {
    float: left;
    vertical-align: middle;
    margin: 3px 0px 0px 60px;
}

.pagingnavi2 {
    float: left;
    vertical-align: middle;
    margin: 0px 10px 0px 0px;
    cursor: pointer;
}

.pagingnavi3 {
    float: left;
    vertical-align: middle;
    vertical-align: middle;
    margin: 2px 10px 0px 0px;
    cursor: pointer;
}

.resultArea {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃え */
    gap: 12px; /* <br>の代わりの余白 */
}

.dataresult {
    width: 100%; /* これが重要：親の左端に揃って真下に来る */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.pagingnavicounter {
    float: left;
    vertical-align: middle;
    margin: 0px 0px 0px 0px;
}

.visible-true {
    visibility: visible;
}

.visible-false {
    visibility: hidden;
}

/*エラーメッセージ*/
.errormessagearea {
    width: 450px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 0px 25px;
}

    .errormessagearea .message {
        margin: 2px 0px;
        color: red;
        font-size: 1rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all; /* ← これが鍵！ */
    }

.errormessagearealogin {
    width: 300px;
    margin: 0px auto 0px auto;
    padding: 20px 0px 0px 0px;
}

    .errormessagearealogin .message {
        margin: 2px 0px;
        color: red;
        font-size: 1rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all; /* ← これが鍵！ */
    }

.errormessageareapasswordforget {
    width: 400px;
    margin: 0px auto 0px auto;
    padding: 0 0 0 40px;
}

    .errormessageareapasswordforget .message {
        margin: 2px 0px;
        color: red;
        font-size: 1rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all; /* ← これが鍵！ */
    }

.Instructions {
    width: 100%;
    max-width: 500px; /* 任意：デスクトップでの上限 */
    box-sizing: border-box;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    /* justify-content はコンテンツ整列。要素自体の位置なら justify-items  */
    justify-items: start;
}

    .Instructions .message {
        font-size: 0.7rem;
        white-space: normal;
        /* 連続文字やURL用の最強セット */
        overflow-wrap: anywhere; /* 最優先 */
        word-break: break-word; /* フォールバック */
        /* word-wrap は古い同義語なので省略可 */
        list-style: none;
        margin: 2px 16px 0 0; /* モバイルで少し控えめに */
        /* Grid/Flex 子要素が縮めるようにするのが超重要！ */
        min-width: 0;
    }

@media (max-width: 768px) {
    .Instructions {
        max-width: 100%; /* 画面幅にフィット */
        padding: 0 8px; /* 端まで張り付くのを防ぐ */
    }

        .Instructions .message {
            font-size: 0.8rem; /* 読みやすさ調整（任意） */
            margin-right: 8px;
        }
}
.errormessagearea2 {
    width: 450px;
    padding: 0px 0px 0px 25px;
}

    .errormessagearea2 .message {
        margin: 2px 0px;
        color: red;
        font-size: 1rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all; /* ← これが鍵！ */
    }

/*検索条件*/
.searchcondtion {
    display: grid;
    grid-template-columns: 1fr; /* 2列 */
    gap: 0px;
    margin: 0;
    padding: 0px 0px 0px 0px;
    justify-content: left;
    vertical-align: middle;
}

.searchcondtion .title {
    list-style: none;
    margin: 0px 0px 0px 0px;
    vertical-align: middle;
}

    .searchcondtion .title2 {
        list-style: none;
        padding: 10px 0px 0px 5px;
        vertical-align: middle;
    }

    .searchcondtion .title3 {
        list-style: none;
        padding: 0px 5px 0px 0px;
        vertical-align: middle;
    }

    .searchcondtion .data {
        list-style: none;
        padding: 0px 0px 0px 0px;
        vertical-align: middle;
    }


.searchcondtion .comment {
    list-style: none;
    padding: 0px 0px 0px 0px;
    color: #3F48CC;
    vertical-align: middle;
    font-size: 0.8rem;
}

.searchcondtion .spacer {
    list-style: none;
    padding: 0px 0px 10px 0px;
    vertical-align: middle;
}

/*検索条件*/
.search-form {
    margin: 0px;
    padding: 0px;
}

.search-form .table_line {
    display: table;
    margin-bottom: 4px;
}

.search-form .blocktitle {
    display: table-cell;
    vertical-align: central;
    width: 150px;
}

.search-form .block {
    display: table-cell;
    vertical-align: central;
}

.search-form .comment {
    display: table-cell;
    vertical-align: central;
    color: #3F48CC;
    vertical-align: middle;
    font-size: 0.8rem;
}

.searchresult-a {
    cursor: pointer;
}

/*検索結果内のボタン*/
/*リンクっぽく見せる*/
button.link-style-btn {
    cursor: pointer;
    border: none;
    background: none;
    color: #0033cc;
}

button.link-style-btn:hover {
    text-decoration: underline;
    color: #002080;
}

/*検索結果内のTD*/
td.top {
    vertical-align: top;
}

td.middle {
    vertical-align:middle;
}

td.center {
    text-align: center;
}

td.left {
    text-align: left;
}

th.top {
    vertical-align: top;
}

th.middle {
    vertical-align: middle;
}

th.center {
    text-align: center;
}

th.left {
    text-align: left;
}


/*タイトル行の背景色、フォント色*/
th.coloring {
    background: #1B4685;
    color: #FFFFFF;
}

/*パンくず*/
.pankuzu {
    list-style-type: none;
    margin: 0;
    padding: 10px 0px 15px 0px;
    display: flex;
    justify-content: left;
}

.pankuzu .start {
    padding: 0px 0px 0px 2px;
    font-size: 0.8rem;
}

.pankuzu .start2 {
    padding: 0px 0px 0px 2px;
    font-size: 1rem;
}

.pankuzu .data {
    padding: 0px 0px 0px 10px;
    font-size: 0.8rem;
}

/*パンくず*/
.pankuzu2 {
    display: flex;
    justify-content: space-between;
    padding: 10px 0px 0px 0px;
}

.pankuzu2 .leftstart {
    margin: 0px 0px 0px 0px;
    text-align: left;
}

.pankuzu2 .leftdata {
    padding: 0px 0px 0px 0px;
    text-align: left;
}

.pankuzu2 .right {
    text-align: right;
    margin-right: 8px;
    text-align: right;
    font-size: 0.8rem;
}

.pankuzu3 {
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 15px 0px;
    display: flex;
    justify-content: left;
}

    .pankuzu3 .start {
        padding: 0px 0px 0px 2px;
        font-size: 0.8rem;
    }

    .pankuzu3 .start2 {
        padding: 0px 0px 0px 2px;
        font-size: 1rem;
    }

    .pankuzu3 .data {
        padding: 0px 0px 0px 10px;
        font-size: 0.8rem;
    }

.pankuzu4 {
    list-style-type: none;
    margin: 0;
    padding: 10px 0px 15px 0px;
    /* 縦並びに変更 */
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.pankuzu4 .start {
    padding: 0px 0px 5px 2px; /* 下に少し余白を追加すると見やすくなります */
    font-size: 0.8rem;
}

    .pankuzu4 .start2 {
        padding: 0px 0px 5px 2px;
        font-size: 1rem;
    }

    .pankuzu4 .data {
        /* 左の余白をstartと合わせるために修正 */
        padding: 0px 0px 5px 2px;
        font-size: 0.8rem;
    }

/*アプリ情報情報*/
.appinfo {
    margin: 20px 0px 0px 40px;
    padding: 4px 0px 0px 0px;
    font-size: 0.4rem;
    vertical-align: middle;
}

/*ログインフォーム*/
.loginform {
    width: 450px;
    margin: 0px auto 0px auto;
    padding: 20px;
}

.loginform .banner {
    list-style: none;
    margin: 30px auto 20px auto;
    vertical-align: middle;
    text-align: center;
}

.loginform .title {
    list-style: none;
    padding: 0px 0px 0px 5px;
    vertical-align: middle;
    text-align:left;
}

.loginform .title2 {
    list-style: none;
    padding: 5px 0px 0px 5px;
    vertical-align: middle;
    text-align: left;
}

.loginform .data {
    list-style: none;
    padding: 0px 0px 0px 5px;
    vertical-align: middle;
    text-align: left;
}

.loginform .data2 {
    list-style: none;
    padding: 5px 0px 0px 5px;
    vertical-align: middle;
    text-align: left;
}

.loginform .comment {
    list-style: none;
    padding: 0px 0px 0px 5px;
    color: #3F48CC;
    vertical-align: middle;
    font-size: 0.8rem;
    text-align: left;
}

.loginform .space {
    list-style: none;
    margin-top: 20px;
    text-align: left;
}

    /* title.svg 下のブロックを中央に */
    .loginform .form-body {
        list-style: none;
        text-align: center;
    }

    /* 実際のフォーム幅 */
    .loginform .form-inner {
        display: inline-block; /* ← これが重要 */
        text-align: left; /* 中身は左寄せ */
    }

/*ログインフォーム(パスワード忘れ)*/
.fogetpasswordform {
    width: 600px;
    margin: 0px auto 0px auto;
    padding: 20px;
}

    .fogetpasswordform .title {
        list-style: none;
        padding: 0px 0px 0px 5px;
        vertical-align: middle;
        text-align: left;
    }

    .fogetpasswordform .title2 {
        list-style: none;
        padding: 5px 0px 0px 5px;
        vertical-align: middle;
        text-align: left;
    }

    .fogetpasswordform .data {
        list-style: none;
        padding: 0px 0px 0px 5px;
        vertical-align: middle;
        text-align: left;
    }

    .fogetpasswordform .data2 {
        list-style: none;
        padding: 5px 0px 0px 5px;
        vertical-align: middle;
        text-align: left;
    }

    .fogetpasswordform .data3 {
        list-style: none;
        padding: 5px 0px 10px 5px;
        vertical-align: middle;
    }

    .fogetpasswordform .comment {
        list-style: none;
        padding: 0px 0px 0px 5px;
        color: #3F48CC;
        vertical-align: middle;
        font-size: 0.8rem;
        text-align: left;
    }

    .fogetpasswordform .space {
        list-style: none;
        margin-top: 20px;
        text-align: left;
    }

/*入力フォーム*/
.inputform {
    display: grid;
    grid-template-columns: 1fr; /* 2列 */
    gap: 0px;
    padding: 0px 0px 0px 0px;
    justify-content: left;
    vertical-align: middle;
}

/*input {
    width: 80vw;

    height: 100vh;
    font-size: 24px;
    box-sizing: border-box;
    padding: 10px;

}
*/
.inputform .title {
    list-style: none;
    padding: 0px 0px 0px 5px;
    vertical-align: middle;
}

.inputform .title2 {
    list-style: none;
    padding: 5px 0px 0px 5px;
    vertical-align: middle;
}

.inputform .data {
    list-style: none;
    padding: 0px 0px 0px 5px;
    vertical-align: middle;
}

    .inputform .data2 {
        list-style: none;
        padding: 5px 0px 0px 5px;
        vertical-align: middle;
    }

    .inputform .data3 {
        list-style: none;
        padding: 5px 0px 10px 0px;
        vertical-align: middle;
    }

    .inputform .comment {
        list-style: none;
        padding: 0px 0px 0px 5px;
        color: #3F48CC;
        vertical-align: middle;
        font-size: 0.8rem;
    }

    .inputform .commentblue {
        list-style: none;
        padding: 0px 0px 0px 5px;
        color: #3F48CC;
        vertical-align: middle;
        font-size: 1rem;
    }

.inputform .space {
    list-style: none;
    margin-top: 20px;
}

/*申請フォーム*/
.requestform {
    display: grid;
    grid-template-columns: 1fr; /* 2列 */
    gap: 0px;
    padding: 5px 5px 5px 5px;
    justify-content: left;
    vertical-align: middle;
    border: solid 1px #000000;
}

.requestform .title {
    list-style: none;
    padding: 0px 0px 0px 0px;
    vertical-align: middle;
}

    .requestform .title2 {
        list-style: none;
        padding: 5px 0px 0px 0px;
        vertical-align: middle;
    }

    .requestform .title3 {
        list-style: none;
        padding: 0px 0px 0px 0px;
        vertical-align: middle;
    }

    .requestform .title4 {
        list-style: none;
        padding: 5px 0px 0px 0px;
        vertical-align: middle;
        color: #D4D4D4;
        font-size: 0.8rem;
    }

.requestform .data {
    list-style: none;
    padding: 0px 0px 0px 0px;
    vertical-align: middle;
}

.requestform .data2 {
    list-style: none;
    padding: 5px 0px 0px 0px;
    vertical-align: middle;
}

    .requestform .data3 {
        list-style: none;
        padding: 0px 0px 0px 10px;
        vertical-align: middle;
    }

    .requestform .comment {
        list-style: none;
        padding: 0px 0px 0px 0px;
        color: #3F48CC;
        vertical-align: middle;
        font-size: 0.8rem;
    }

    .requestform .commentalert {
        list-style: none;
        padding: 0px 0px 0px 0px;
        color: red;
        vertical-align: middle;
        font-size: 1rem;
        font-weight: 600;
    }

    .requestform .commentalert2 {
        list-style: none;
        padding: 0px 0px 0px 0px;
        color: red;
        vertical-align: middle;
        font-size: 0.8rem;
    }

    .requestform .commentalertbold {
        list-style: none;
        padding: 0px 0px 0px 0px;
        color: red;
        vertical-align: middle;
/*        font-size: 0.8rem;*/
/*        font-weight: bold;*/
    }

.requestform .alert {
    padding: 0px 0px 0px 0px;
    color: red;
    vertical-align: middle;
    font-size: 1rem;
    font-weight: 600;
}

.requestform .space {
    list-style: none;
    margin-top: 20px;
}

/*.required::before {
    content: "必須";
    background-color: #FF0000;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: bold;
    min-width: 10px;
    padding: 3px 7px;
    margin: 0px 0px 3px;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    border-radius: 10px;
    display: inline-block;
}*/

.required::before {
    content: "*";
    color: #FF0000;
    font-size: 1rem;
    font-weight: bold;
    vertical-align: middle;
}

.sikaku::before {
    content: "■";
    color: #000000;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
}

/*input number スピンボックスを非表示*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield;
}

.inputwidth90 {
    width: 90px;
}

.inputwidth100 {
    width: 100px;
}

.inputwidth110 {
    width: 110px;
}

.inputwidth120 {
    width: 120px;
}

.inputwidth130 {
    width: 130px;
}

.inputwidth140 {
    width: 140px;
}

.inputwidth150 {
    width: 150px;
}

.inputwidth160 {
    width: 160px;
}

.inputwidth170 {
    width: 170px;
}

.inputwidth180 {
    width: 180px;
}

.inputwidth190 {
    width: 190px;
}

.inputwidth200 {
    width: 200px;
}

.inputwidth210 {
    width: 210px;
}

.inputwidth220 {
    width: 220px;
}

.inputwidth230 {
    width: 230px;
}

.inputwidth240 {
    width: 240px;
}

.inputwidth250 {
    width: 250px;
}

.inputwidth260 {
    width: 260px;
}

.inputwidth270 {
    width: 270px;
}

.inputwidth280 {
    width: 280px;
}

.inputwidth290 {
    width: 290px;
}

.inputwidth300 {
    width: 300px;
}

.inputwidth400 {
    width: 400px;
}

.inputwidth500 {
    width: 500px;
}

/*ボタン横並び*/
.buttonsidebyside {
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 20px 0px;
    display: flex;
    justify-content: left;
}

.buttonsidebyside li {
    margin: 0px 30px 0px 0px;
}

/*リンク風ボタン*/
button.link-style-btn {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0px;
    margin: 0px;
    text-decoration: underline;
}

    button.link-style-btn:hover {
        text-decoration: underline;
    }

/*リンク風ボタン*/
button.link-style-btn2 {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0px;
    margin: 0px;
    color:white;
    font-size: 0.8rem;
}

button.link-style-btn2:hover {
    text-decoration: underline;
}

/*ローディング START*/
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-spinner {
    width: 80px;
    height: 80px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*ローディング E N D*/

.file-upload-wrapper {
    position: relative;
    /*width: 300px;*/
}

.real-file-input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
}

.cameracontainerleft {
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: left;
}


.cameravideo-border {
    /* border: 5px solid #000;
    border-radius: 10px;
    line-height: 100%; */
}

@media (max-width: 768px) {
    .cameracontainerleft {
        margin-left: 0;
        margin-right: auto;
        vertical-align:top;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
    /*ローディング E N D*/}


/*エラーページ*/
.eroropage {
    width: 530px;
    margin: 0px auto 0px auto;
    padding: 0px;
}

.eroropage .banner {
    list-style: none;
    padding: 5px 0px 20px 0px;
    vertical-align: middle;
    text-align: center;
}

.eroropage .title {
    list-style: none;
    padding: 5px;
    vertical-align: middle;
    text-align: left;
    font-size: 1.2rem;
}

/*Cookie同意*/
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #222;
    color: white;
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
    z-index: 1000;
}

.cookie-consent-banner .content {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 0.8rem;
}

.cookie-consent-banner button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.cookie-consent-banner button:hover {
    background-color: #45a049;
}

.usersetting {
    display: grid;
    grid-template-columns: 1fr; /* 2列 */
    gap: 0px;
    padding: 5px 5px 5px 5px;
    justify-content: left;
    vertical-align: middle;
    border: solid 1px #000000;
}

.usersetting .title {
    list-style: none;
    margin: 0px 0px 0px 0px;
    vertical-align: middle;
}

.usersetting .title2 {
    list-style: none;
    padding: 10px 0px 0px 0px;
    vertical-align: middle;
}

.usersetting .data {
    list-style: none;
    padding: 0px 0px 0px 0px;
    vertical-align: middle;
}

.usersetting .comment {
    list-style: none;
    padding: 0px 0px 0px 0px;
    color: #3F48CC;
    vertical-align: middle;
    font-size: 0.8rem;
}

.usersettingbuttonsidebyside {
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 5px 0px;
    display: flex;
    justify-content: left;
}

#tbl-bdr table, #tbl-bdr td, #tbl-bdr th {
    border-collapse: collapse;
    border: 1px solid #333;
    text-align: center;
}

#tbl-bdr2 table, #tbl-bdr2 td, #tbl-bdr2 th {
    border-collapse: collapse;
    border: 1px solid #333;
    text-align: left;
}

.even {
    background: #F2F2F2;
}

.odd {
    background: #FFFFFF;
}

/*お知らせ*/
.notice-section {
    background-color: #ffffff;
    padding: 10px 10px;
    max-width: 400px;
    margin: 10px auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

    .notice-section h2 {
        font-size: 0.7rem;
        border-bottom: 2px solid #2563eb;
        /*display: inline-block;*/
        /*          padding-bottom: 10px;
        margin-bottom: 30px;*/
        color: #000000;
    }

.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notice-item {
    background-color: #f3f4f6;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    transition: background-color 0.3s;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

    .notice-item:hover {
        background-color: #e5e7eb;
    }

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #000000;
}

.notice-badge {
    background-color: #2563eb;
    color: white;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 999px;
}

.notice-content {
    margin-top: 10px;
    font-size: 0.7rem;
    color: #000000;
}

/* デフォルトは横並び */
.radio-group,
.checkbox-group {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

    /* アイテム共通スタイル（ラジオ・チェック両方） */
    .radio-group .radio-item {
        display: flex; /* ボタンとテキストを横並び */
        align-items: center; /* 垂直方向中央寄せ */
        margin: 0 3px 0 0;
        padding: 0;
        line-height: 1.5; /* 好みで調整 */
    }

    /* アイテム共通スタイル（ラジオ・チェック両方） */
    .checkbox-group .checkbox-item {
        display: flex; /* ボタンとテキストを横並び */
        align-items: center; /* 垂直方向中央寄せ */
        margin: 0 10px 0 0;
        padding: 0;
        line-height: 1.5; /* 好みで調整 */
    }

    /* ラジオ・チェック共通で余白を調整 */
    .radio-group input[type="radio"] {
        margin: 0 3px 0 0; /* ボタン右に余白 */
    }

    /* ラジオ・チェック共通で余白を調整 */
    .checkbox-group input[type="checkbox"] {
        margin: 0 -3px 0 0; /* ボタン右に余白 */
    }

/* スマホ幅（例: 600px以下）の場合に縦並びにする */
@media (max-width: 600px) {
    .radio-group {
        display: flex;
        flex-direction: column;
        margin: 5px 0px 5px 0px;
    }

        .radio-group .radio-item {
            display: flex; /* ボタンとテキストを横に並べて1行に */
            align-items: center; /* 垂直位置を中央に */
            margin: 0;
            padding: 0;
            line-height: 2; /* 行間ゼロ寄り */
        }

        .radio-group input[type="radio"] {
            margin: 0 6px 0 0; /* ボタン右だけ少し余白（不要なら 0） */
        }

        /* さらに詰めたいなら次行の余白も0に */
        .radio-group .radio-item + .radio-item {
            margin-top: 0;
        }

    .checkbox-group {
        display: grid; /* ← Gridに変更 */
        grid-template-columns: auto 1fr; /* 左: チェック, 右: ラベル */
        align-items: center; /* 縦位置中央 */
        column-gap: 6px; /* チェックとラベルの間隔 */
        row-gap: 6px; /* 行間 */
        margin: 5px 0;
    }

        /* 念のため余白リセット */
        .checkbox-group input[type="checkbox"] {
            margin: 0;
        }

        .checkbox-group label {
            margin: 0;
            line-height: 1.6;
        }
}

/* img 自体はこれでOK */
#MainContent_preview {
    display: block; /* ← block ではなく inline-block */
    max-width: 360px;
    width: 100%;
    height: auto;
    border-radius: 12px;
}


.search-area {
    display: flex;
    align-items: flex-start; /* 上揃え */
}

.search-form {
    flex: 0 0 auto; /* 既存幅を維持 */
}

.search-form-right {
    margin-left: 20px;
    padding: 10px;
    max-width: 300px;
    font-size: 0.9rem;
    color: #555;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 1. バッジを包むコンテナの修正 */
.alert-badge-container {
    display: flex; /* Flexboxに変更 */
    justify-content: flex-end; /* 中身を右に寄せる */
    align-items: center; /* 上下中央揃え */
    gap: 4px; /* バッジ同士の隙間（適宜調整） */
    flex-grow: 1; /* タイトル以外の余白をすべて埋める */
    margin-right: 8px; /* ▼との間の距離（ギリギリにしたい場合は小さく） */
    width: auto; /* 75%を解除して、いっぱいに広がるようにする */
}

/* 1. バッジを包むコンテナの修正 */
.alert-badge-container2 {
    display: flex; /* Flexboxに変更 */
    justify-content: flex-end; /* 中身を右に寄せる */
    align-items: center; /* 上下中央揃え */
    gap: 4px; /* バッジ同士の隙間（適宜調整） */
    flex-grow: 1; /* タイトル以外の余白をすべて埋める */
    width: 100%; /* 75%を解除して、いっぱいに広がるようにする */
}

/* 2. バッジ共通のスタイル（.alert-badge と .alert-badge2 を共通化すると管理が楽です） */
.alert-badge, .alert-badge2 {
    display: inline-flex; /* 中のテキストも中央に揃えやすくする */
    align-items: center;
    background: #d9534f;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap; /* レスポンシブ時に文字が改行されるのを防ぐ */
}



/* 1. バッジを包むコンテナの修正 */
.alert-badge-container3 {
    display: inline-flex; /* flex から inline-flex に変更 */
    justify-content: center; /* flex-end(右寄せ) から center(中央) に変更 */
    align-items: center; /* 上下中央揃え */
    gap: 4px; /* バッジ同士の隙間 */
    width: auto; /* 100%を解除して中身に合わせる（td側で中央寄せするため） */
    vertical-align: middle;
}

/* 2. バッジ共通のスタイル */
.alert-badge3 {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* バッジ内のテキストも中央へ */
    background: #d9534f;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    /*line-height: 1.2;*/ /* 行の高さを調整 */
}

/* 3. td（セル）自体の設定 */
/* HTMLで td class="top center" となっているのでここを確実に */
.top.center {
    text-align: center !important;
}


/* 1. 外側の枠で右寄せをコントロールする */
.info-badge-container {
    width: 75%; /* 親の横幅をいっぱいまで広げる */
    text-align: right; /* 中身を右に寄せる */
    display: block; /* 念のためブロック要素であることを確定させる */
}

/* 1. バッジを包むコンテナの修正 */
.info-badge-container {
    display: flex; /* Flexboxに変更 */
    justify-content: flex-end; /* 中身を右に寄せる */
    align-items: center; /* 上下中央揃え */
    gap: 4px; /* バッジ同士の隙間（適宜調整） */
    flex-grow: 1; /* タイトル以外の余白をすべて埋める */
    margin-right: 8px; /* ▼との間の距離（ギリギリにしたい場合は小さく） */
    width: auto; /* 75%を解除して、いっぱいに広がるようにする */
}

/* 2. バッジ共通のスタイル（.alert-badge と .alert-badge2 を共通化すると管理が楽です） */
.info-badge, .info-badge2 {
    display: inline-flex; /* 中のテキストも中央に揃えやすくする */
    align-items: center;
    background: #1369FF;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap; /* レスポンシブ時に文字が改行されるのを防ぐ */
}

/* 1. テーブルの幅に合わせるための外枠 */
.table-wrapper {
    display: table; /* 重要：これで親の幅がテーブルの幅と等しくなります */
    margin-left: 0; /* 全体を左に寄せる場合 */
    /* margin: 0 auto;  全体を中央に寄せたい場合はこちら */
}

/* 2. 件数表示エリア */
.result-count-container {
    text-align: right; /* 親（テーブル幅）に対して右寄せ */
    width: 100%;
    font-size: 1.0rem;
    color: #444;
}

.result-count-value {
/*    font-weight: bold;*/
}

/* テーブル自体の余白調整 */
.table-wrapper p {
    margin-top: 0;
}



.alert-container {
    border: 2px solid #ff4d4f;
    background-color: #fff2f0;
    padding: 1.25rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    /* ここがポイント：横幅を文字に合わせる */
    display: inline-block;
    /* または width: fit-content; */
}

.alert-title {
    color: #cf1322;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.alert-body {
    color: #333;
    line-height: 1.5;
    text-align: left; /* 親がinline-blockの場合、中身を左寄せに固定 */
}







/* ソートを許可する列だけに適用するクラス */
.quickgrid thead tr th.can-sort {
    cursor: pointer;
    position: relative;
    font-size: 1rem;
}

    /* インジケーターを表示するのは .can-sort クラスがある時だけ */
    .quickgrid thead tr th.can-sort::after {
        content: "\21D5"; /* ↕ */
        margin-left: 8px;
        opacity: 0.3;
    }

    /* 昇順・降順の表示も同様 */
    .quickgrid thead tr th.can-sort.sort-asc::after {
        content: "\25B2"; /* ▲ */
        opacity: 1;
    }

    .quickgrid thead tr th.can-sort.sort-desc::after {
        content: "\25BC"; /* ▼ */
        opacity: 1;
    }

/* ソート不可の列（.can-sortがない列）は、通常の見た目にする */
.quickgrid thead tr th:not(.can-sort) {
    cursor: default;
    font-size: 1rem;
    text-align:center;
}

    .quickgrid thead tr th:not(.can-sort)::after {
        content: none !important; /* 矢印を消す */
    }