const style=document.createElement('style');
style.textContent=`

/* ==========================================================================
   1. 変数定義 (Design Tokens)
   ========================================================================== */
:root {
    /* ==================== カラーパレット ==================== */
    /* --- ブランドカラー / アクセント --- */
    --color-main:           #004080;            /* メインカラー */
    --color-accent:         #50c6ff;            /* アクセント補助色 */
    --color-primary:        #2b6cb0;            /* プライマリーカラー */
    --color-error:          #d9534f;            /* エラー強調色 */
    --color-ui-active:      #abc3d9;            /* UIの強調・アクティブ時の質感用 */

    /* --- テキスト / リンク --- */
    --color-text:           #2d3748;            /* 汎用文字色 */
    --color-auxiliary:      #8290a1;            /* 補助文字色 / 注意書きなど */
    --color-link:           #0056b3;            /* リンク文字色 */
    --color-white:          #f5faf9;            /* 白系文字色 */

    /* --- 背景色 --- */
    --bg-card:              #fcfcfc;
    --bg-header:            rgba(230, 242, 255, 0.98); /* ヘッダー背景 */
    --bg-dark:              rgba(20, 25, 30, 0.9);    /* ダーク背景 */
    --bg-light:             rgba(230, 239, 248, 0.9); /* ライト背景 */
    --bg-error:             #fff5f5;            /* エラー背景 */
    --bg-hover:             rgba(255, 255, 255, 0.1);   /* ホバー時背景 */
    --bg-input:             #f8fafc           ; /* 入力フィールド背景 */
    --bg-button:            #596674;            /* ボタン背景 */
    --bg-button-hover:      #6b7b92;            /* ボタンホバー背景 */


    --border-color:         #cfdde6;            /* ボーダー色 */

    /* ==================== タイポグラフィ ==================== */
    --main-font:            'Segoe UI', sans-serif;

    /* --- フォントサイズ --- */
    --fz-small:             0.675rem;           /* 10.8px */
    --fz-normal:            0.75rem;            /* 12px */
    --fz-medium:            0.875rem;           /* 14px */
    --fz-body:              1rem;               /* 16px */

    /* --- フォントウェイト --- */
    --fw-normal:            400;
    --fw-medium:            500;
    --fw-semi-bold:         600;
    --fw-bold:              700;
    --fw-extra-bold:        800;

    /* ==================== シャドウ / 視覚効果 ==================== */
    --glow-blue:            rgba(0, 100, 255, 0.25);
    --glow-accent:          0 0 15px rgba(0, 229, 255, 0.4);
    --shadow-light:         rgba(255, 255, 255, 0.8);
    --shadow-dark:          rgba(174, 194, 224, 0.6);

    /* --- 外側の影（浮き出し・Neumorphism） --- */
    --box-shadow-normal:    2px 2px 4px rgba(80, 120, 160, 0.25),
                            -2px -2px 4px rgba(255, 255, 255, 0.4);
  
    --box-shadow-raise:     4px 4px 10px rgba(163, 177, 198, 0.4),
                            -4px -4px 10px rgba(255, 255, 255, 0.9);

    /* --- 発光エフェクト（Glow） --- */
    --box-shadow-glow:      0 0 8px rgba(80, 198, 255, 0.4),
                            0 0 16px rgba(80, 198, 255, 0.1),
                            inset 0 0 4px rgba(80, 198, 255, 0.2);

    /* --- 内側の影（窪み・Focus） --- */
    --box-shadow-inset:     inset 2px 2px 4px rgba(80, 120, 160, 0.25),
                            inset -2px -2px 4px rgba(255, 255, 255, 0.4);

    --box-shadow-focus:     inset -1px -1px 3px rgba(255, 255, 255, 0.8),
                            inset 1px 1px 3px rgba(0, 0, 0, 0.05),
                            0 0 18px var(--glow-blue);


    /* ==================== レイアウト / サイズ ==================== */
    --w-container:          70rem;              /* 最大コンテナ幅 */
    --block-size:           0.5625rem;          /* 基本単位(9px) */

    /* --- 角丸 --- */
    --radius-small:         8px;
    --radius-normal:        1rem;
    --radius-large:         2rem;

    /* ==================== アニメーション設定 ==================== */
    --dur-action: 0.05s; /* フォーカス・クリック時（爆速） */
    --dur-snappy: 0.1s;  /* 通常のホバー・切り替え（キビキビ） */
    --dur-open: 0.25s;   /* アコーディオン・フェードイン（滑らか） */

    --ease-snappy: ease-out; /* 初動が速い */
    --ease-torne: cubic-bezier(0.4, 0, 0.2, 1); /* torne風の滑らかな加減速 */

    /* フォーム用トランジションセット */
    --tr-form: background var(--dur-snappy) var(--ease-snappy), 
               box-shadow var(--dur-snappy) var(--ease-snappy), 
               color var(--dur-snappy) var(--ease-snappy),
               transform var(--dur-snappy) var(--ease-snappy);


    /* ==================== アイコン / 画像パス ==================== */
    --search-icon-path-white: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="white" d="m16 15.18-5.053-4.924c1.01-1.066 1.6-2.543 1.6-4.102C12.632 2.79 9.768 0 6.316 0 2.863 0 0 2.79 0 6.154s2.779 6.154 6.316 6.154c1.431 0 2.695-.493 3.79-1.231L15.157 16l.842-.82ZM1.263 6.154c0-2.708 2.274-4.923 5.053-4.923s5.052 2.215 5.052 4.923-2.273 4.923-5.052 4.923c-2.78 0-5.053-2.215-5.053-4.923Z"/></svg>');

    --search-icon-path-black: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="m16 15.18-5.053-4.924c1.01-1.066 1.6-2.543 1.6-4.102C12.632 2.79 9.768 0 6.316 0 2.863 0 0 2.79 0 6.154s2.779 6.154 6.316 6.154c1.431 0 2.695-.493 3.79-1.231L15.157 16l.842-.82ZM1.263 6.154c0-2.708 2.274-4.923 5.053-4.923s5.052 2.215 5.052 4.923-2.273 4.923-5.052 4.923c-2.78 0-5.053-2.215-5.053-4.923Z"/></svg>');

    --close-btn-icon-path:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M4 4 L12 12 M12 4 L4 12" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* ==========================================================================
   2. ベーススタイル / リセット
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* スマホのデフォルト機能である「タップした時に出る半透明の青い四角」を消しています */
}

body {
    /* 1. 配置・レイアウト（要素をどこに置くか） */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: stretch;
    min-height: 100vh;
    margin: 0;
    padding: 0;

    /* 2. 背景・外観（箱の見た目） */
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);

    /* 3. タイポグラフィ（中身の文字のルール） */
    color: var(--color-text);
    font-family: var(--main-font);
    line-height: 1.6;
    letter-spacing: 0.16px;
    word-break: break-all;
}

/* --- リンク文字（シンプル・最適化版） --- */
a {
    /* 文字装飾 */
    color: var(--color-link);
    font-weight: var(--fw-bold);
    text-decoration: none;
    opacity: 0.8;
    
    /* 文章中での折り返し設定 */
    word-break: break-word;
}

/* hover / focus-visible */
/* :focus ではなく :focus-visible を使うことで、キーボード操作時のみ枠線が出る現代的な仕様になります */
a:hover,
a:focus-visible {
    outline: none;
    opacity: 1;
}

a:active {
    opacity: 0.7;
    transition: opacity var(--dur-action) var(--ease-snappy);
}

/* リンク先がないもの、または自分自身を指すリンク（#）で色を変えたくない場合のみ、
   以下のように個別に上書きする方が管理が楽です */
a:not([href]), 
a[href="#"] {
    opacity: 1;
    color: inherit;
    cursor: default;
}

menu, ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   3. レイアウト・共通コンテナ
   ========================================================================== */
.u-container {
    --size: var(--w-container);
    --padding: 1.5rem;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: calc(var(--size) + var(--padding) * 2);
    padding-inline: var(--padding);
}

/* --- mainBody --- */
.mainBody {
    display: grid;
    align-items: start;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    --size: var(--w-container);
    --padding: 1.5rem;
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--padding);
    margin-bottom: 40px;
}

@media screen and (max-width: 1360px) {
    .mainBody {
        display: block;
    }
}

/* ヘッダー */
.header {
    width: 100%;
    /* background-color: rgba(255, 255, 255, 0.88); */
    position: sticky;
    top: 0;
    z-index: 1;
    overflow: auto;
    word-break: normal;
    /* box-shadow: 5px 5px 6px #c9d6e6, -5px -5px 6px #ffffff; */
}

.header::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    z-index: -1;
}

.header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__nav {
    display: flex;
    align-items: center;
}

.header-menu {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.header-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: var(--block-size);

    background: none;
    border: none;
    appearance: none;
    color: var(--color-text);
    font-size: 0.875rem;
    /* ≒ 14px */
    font-weight: var(--fw-semi-bold);
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

/* ==========================================================================
   4. 見出し・テキスト装飾
   ========================================================================== */
h1 {
    font-size: 1.625rem;
    font-weight: var(--fw-bold);
    color: var(--color-main);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

h2.title {
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin-top: 2rem;
    padding-left: 0.75rem;
}

h2.title::before {
    content: "◆ ";
    color: var(--color-accent);
}

h3 {
    font-size: 1.063rem;
    font-weight: var(--fw-bold);
    letter-spacing: .68px;
    line-height: 1.88235;
    margin: auto 0;
}

/* メッセージボックス（通知・エラー） */
p.header_text, p.header_rmesg, p.header_emesg {
    font-size: 0.9rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-small);
}

p.header_text {
    border: 1px solid #b3d7f5;
    border-left: 4px solid var(--color-accent);
    color: var(--color-main);
}

p.header_rmesg {
    background-color: #e7f4ff;
    border: 1px solid #a3d1ff;
    color: #005fa3;
}

p.header_emesg {
    background-color: var(--bg-error);
    border: 1px solid var(--bc-error);
    color: var(--color-error);
}

span {
    line-height: 1.85;
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   5. フォーム基本要素 (Input, Select, Textarea)
   ========================================================================== */
/* 入力フィールド共通（ネオモーフィズム風） */
input[type="text"], 
textarea, 
select, 
.data.file input[type="file"] {
    width: auto;
    padding: 0.3rem;
    border: none;
    border-radius: var(--radius-large);
    background: var(--bg-light);
    box-shadow: var(--box-shadow-inset);
    font-family: var(--main-font);
    font-size: var(--fz-normal) !important;
    color: currentColor;
    transition: var(--tr-form);
    overflow-anchor: none;
    scrollbar-width: thin;   
    scrollbar-color: #b1b9c4 #f0f4f7;
}

/* テキストエリア個別設定 */
textarea {
    width: 100% !important;
    min-width: clamp(200px, 30%, 100%);
    min-height: 100px;
    border-radius: var(--radius-small);
    font-size: 0.85rem;
    color: var(--color-text) !important;
}

/* セレクトボックス個別設定 */
select {
    /* 1. 配置・表示（ブラウザ標準の矢印を消す） */
    appearance: none;
    -webkit-appearance: none;

    /* 2. 余白（右側に矢印があるため、右パディングを少し広げる） */
    /* padding: 0.3rem 1rem 0.3rem 0.3rem; */

    /* 3. 背景（個別に指定してアイコンを守る） */
    /* background-color: var(--bg-light); */ /* ここはあえて個別のまま */
    /* background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); */
    /* background-repeat: no-repeat; */
    /* background-position: right 0.4rem center; */
    /* background-size: 0.6rem; */
    cursor: pointer;

    /* 4. タイポグラフィ */
    text-align: center;
}

/* 1. ファイル入力エリア本体 */
.data.file input[type="file"] {
    /* 1. 配置・表示（ボックスモデルの根幹） */
    display: block;        /* もし未設定なら追加推奨 */
    position: relative;
    min-height: 6rem;
    margin-bottom: 1rem;

    /* 2. 余白・枠線（箱の形を整える） */
    padding: 3.5rem 2rem 0;
    border-radius: var(--radius-normal);

    /* 3. 背景・カーソル（表面のデザイン） */
    background: var(--bg-light); /* 共通設定にあると思いますがここでも意識 */
    cursor: pointer;

    /* 4. テキスト・フォント（中身の見た目） */
    color: var(--color-main);
    font-size: smaller;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    text-align: left;
}

/* 2. 「＋」アイコンの演出 */
.data.file input[type="file"]::before {
    content: "+";
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: var(--fw-bold);
    color: var(--color-accent);
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* 3. 標準ボタンの非表示（共通設定） */
.data.file input[type="file"]::file-selector-button,
.data.file input[type="file"]::-webkit-file-upload-button {
    display: none;
}

/* 4. 操作時（クリック中や選択直後）に「＋」を消す */
.data.file input[type="file"]:focus::before,
.data.file input[type="file"]:active::before {
    opacity: 0;
}

/* フォーカス時共通 */
input[type="text"]:focus, 
textarea:focus, 
select:focus, 
.data.file input[type="file"]:focus {
    outline: none;
    background-color: var(--bg-input);
    box-shadow: var(--box-shadow-focus);
    transition-duration: var(--dur-action);
}

/* ==========================================================================
   6. ラジオボタン・チェックボックス (ボタン風スタイル)
   ========================================================================== */
/* ラベル全体のスタイル */
label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.3rem;
    border-radius: var(--radius-large);
    background: var(--bg-light);
    box-shadow: var(--box-shadow-inset);
    cursor: pointer;
    transition: var(--tr-form);
    position: relative; /* for absolute input */
}

/* --- input本体を非表示に --- */
label input[type="radio"],
label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* チェックされた時のスタイル（has対応ブラウザ） */
label:has(input:checked) {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) inset;
    transition-duration: var(--dur-action);
}

/* inputにフォーカスが当たったら、それを含むlabelにスタイルを当てる */
label:has(input:focus-visible) {
    box-shadow: 0 0 8px var(--glow-blue);
}

/* テキスト部分のスタイル */
label>span {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   7. フォームの各ラベルとバリデーション
   ========================================================================== */
/* 一覧検索フォーム
-------------------------*/
table.smp-search-form-table {
    width: 100%;
    margin: 0 auto; /* センタリング */
    border-radius: var(--radius-normal);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 64, 128, 0.1);
}

/* 基本設定 */
table.smp-search-form-table tr {
    width: 100% !important;
}

table.smp-search-form-table td {
    padding: 5px 0px !important;
    border: none !important; /* 罫線を一旦消す */
    background: var(--bg-card) !important;

    font-size: var(--fz-small) !important;
    color: var(--color-auxiliary);
}

/* 項目タイトルtdの基本設定 */
table.smp-search-form-table td.smp-sf-head {
    display: block;
    width: 100% !important;
    padding: 5px !important;
    background: var(--bg-header) !important;

    font-size: var(--fz-normal) !important;
    font-weight: var(--fw-semi-bold) !important;
    color: var(--color-main) !important;
    line-height: 140%;
    text-align: center;
}

/* 入力欄tdの基本設定 */
table.smp-search-form-table td.smp-sf-body {
    display: block;
    width: 100% !important;
    padding: 5px !important;
    background: var(--bg-card) !important;
    line-height: 140%;
}

table.smp-search-form-table td.smp-sf-body .notice {
    font-size: var(--fz-small) !important;
}

/* inputを入力しやすくする */
table.smp-search-form-table td.smp-sf-body input {
    width: 39%;
    margin: 5px 0;
    padding: 0.6rem;
    color: var(--color-text) !important;
}

table.smp-search-form-table td.smp-sf-body input:focus {
    outline: none;
    background: var(--bg-input);
    box-shadow: var(--box-shadow-focus);
}

/* チェックボックスを見やすくする */
table.smp-search-form-table td.smp-sf-body label {
    display: inline;
    margin: 5px 0px;
}

/* 検索ボタンを大きくする */
table.smp-search-form-table input[type="submit"] {
    margin: 10px auto !important;
    padding: 8px 40px;
    border: none;
    border-radius: var(--radius-large);
    outline: none;
    color: var(--color-white);
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    background-color: var(--bg-button);
    box-shadow: var(--box-shadow-normal);
    cursor: pointer;
    transition: var(--tr-form);
}

table.smp-search-form-table input[type="submit"]:hover,
table.smp-search-form-table input[type="submit"]:focus {
    outline: none;
    box-shadow: var(--box-shadow-focus);
}

table.smp-search-form-table input[type="submit"]:active {
    box-shadow: var(--box-shadow-inset);
    transform: scale(0.98);
    transition: 
        transform var(--dur-action) var(--ease-snappy), 
        box-shadow var(--dur-action) var(--ease-snappy), 
        filter var(--dur-action) var(--ease-snappy);
}

table.smp-search-form-table select {

}

/* 一覧表
-------------------------*/
table.smp-table {
    width: 100%;
    border-collapse: collapse; /* 隙間をなくして一体感を出す */
    border-spacing: 0;

    /* 背景色は指定せず、枠線も各画面のtdに任せる */
    background: transparent; 
}

/* ソート行の基本設定 */
table.smp-table tr.smp-row-sort {
    position: sticky;
    top: 2rem;
    z-index: 1;
    background: var(--bg-header);
    color: var(--color-main);
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    border: solid var(--border-color);
    border-width: 0 0 2px 0;
}

table.smp-table td {
    border: none !important;
    font-size: var(--fz-normal) !important;
}

table.smp-table td.smp-cell-sort {
    background: transparent !important;
    color: currentColor !important;
    /* text-transform: uppercase; */
    font-size: var(--fz-small) !important;
    letter-spacing: 0.1em;
    text-align: left;
}

/*　ソート行のリンクデザイン */
table.smp-table td.smp-cell-sort a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    margin: 0 auto !important;

    color: currentColor !important;
}

/* table.smp-table td.smp-cell-sort a:hover {
    -webkit-line-clamp: unset;
    display: block;
    white-space: normal;
    max-height: 1000px;
} */

/* データ行の基本設定 */
table.smp-table td.smp-cell-data {
    /* 1. レイアウト・配置 */
    text-align: left;

    /* 2. サイズ・余白 */
    padding: 10px 3px !important;
    line-height: 140%;

    /* 3. 背景・枠線 */
    background: none !important;

    /* 4. 文字装飾 */
    color: var(--color-auxiliary) !important;
    font-weight: var(--fw-medium);
}

/*　データ行のリンクデザイン */
table.smp-table td.smp-cell-data a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 100%;
}

/* table.smp-table td.smp-cell-data a:hover {
    -webkit-line-clamp: unset;
    display: block;
    white-space: normal;
    max-height: 1000px;
} */

table.smp-table tr.smp-row-sort td.smp-cell:last-child,
table.smp-table tr.smp-row-data td.smp-cell:last-child {
    padding: 0;
    border: none;
}

/* 奇数行目と偶数行目で背景色を変更 */
table.smp-table tr.smp-row-data:nth-child(odd) {
    background: var(--bg-card);
}

table.smp-table tr.smp-row-data:nth-child(even) {
    background: var(--bg-card);
}

table.smp-table tr.smp-row-data {
    border: solid var(--bg-header);
    border-width: 0 0 1px 0;
    transition: box-shadow var(--dur-action) var(--ease-snappy);
}

table.smp-table tr.smp-row-data:hover {
    --bg-hover: rgba(220, 238, 255, 1);
    background: var(--bg-hover);
}

/* 変更選択時の色 */
table.smp-table tr.smp-be-operate td.smp-cell-data {
    background: rgba(222, 245, 237, 0.9)  !important;
}

/* 表以外の基本設定 */
table.smp-table tr.smp-row-normal td {
    padding-top: 0;
    border: none !important; /* 不要な罫線の削除 */
    font-size: 0.8125rem !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: .13px;
}

/* 一覧表の付属ボタン */
table.smp-table input[name="smp-table-submit-button"],
table.smp-table .smp-table-button {

}

table.smp-table input[name="smp-table-submit-button"]:hover,
table.smp-table .smp-table-button:hover {

}

/* 件数セレクトの調整 */
table.smp-table tr.smp-row-normal select {
    margin: 0 5px;
    padding: 5px 10px 5px 10px;
    background-color: transparent;
    color: var(--color-auxiliary);
    font-weight: var(--fw-medium);
}

table.smp-table tr.smp-row-normal select:focus {
    background-color: var(--bg-input);
    color: var(--color-auxiliary);
}

/* 編集列テキストフィールドの調整 */
table.smp-table td.smp-cell-data input[type=text] {
    width: 100% !important;
    border-radius: var(--radius-small);
}

/* 編集列テキストエリアの調整 */
table.smp-table td.smp-cell-data textarea {

}

table.smp-table td.smp-cell-data input[type=text]:focus,
table.smp-table td.smp-cell-data textarea:focus {
   background-color: var(--bg-input) !important;
}

/* 編集列セレクトの調整 */
table.smp-table td.smp-cell-data select {
    width: fit-content !important;
    margin: 0 auto;
    font-size: var(--fz-small) !important;
    color: var(--color-auxiliary) !important;
}

@media screen and (max-width: 960px) {
    table.smp-table td.smp-cell-data select {
        width: 100% !important;
    }
}

/* 一覧表ページャー
-------------------------*/
table.smp-table tr.smp-row-normal table.smp-pager {
    display: flex;
    justify-content: flex-end;
    float: right;
    margin: 10px auto;
    border-collapse: separate;
    border-spacing: 5px 10px !important;
}

table.smp-pager tbody tr {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.3rem;
}

/* ページャー基本設定 */
table.smp-table tr.smp-row-normal table.smp-pager { /* 除外 td.smp-page */
    font-size: 16px;
    line-height: 1;
    text-align: center;
}

/* リンクエリア拡張 */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a {
    display: block;
    padding: 5px 15px;

    border-radius: var(--radius-normal);

    color: var(--color-auxiliary);
    text-decoration: none;

    box-shadow: var(--box-shadow-normal);
}

table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a:hover,
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a:focus {
    outline: none;
    color: var(--color-auxiliary);
}

table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a:active {
    color: var(--color-ui-active);
    box-shadow: var(--box-shadow-inset);
    transform: scale(0.98);
    transition: transform var(--dur-action) linear, 
                box-shadow var(--dur-action) linear, 
                color var(--dur-action) linear;
}

/* 現在のページ */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-current-page {
    display: block;
    padding: 5px 15px;

    border-radius: var(--radius-normal);

    color: var(--color-ui-active);
    font-weight: var(--fw-bold) !important;
    text-decoration: none;

    box-shadow: var(--box-shadow-inset);
}

/* 省略記号 */
table.smp-table tr.smp-row-normal table.smp-pager td.smp-page-space {
    border: none !important;
}

/* 表のtdをスマホ用に段組み */
@media screen and (max-width: 960px) {
    colgroup {
        display: block;
    }

    table.smp-table td.smp-cell-sort {
        padding: 0 !important;
    }

    table.smp-table td.smp-cell-sort:first-child {
        display: none; /* チェックを消す */
    }

    table.smp-table tr.smp-row-sort {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        padding: 0.6rem;
        gap: 0.2rem;
        position: unset;
        border: none;
        border-radius: var(--radius-normal);
        background: transparent;
        box-shadow: var(--box-shadow-inset);
    }

    table.smp-table tr.smp-row-sort::before {
        content: "ソート:";
        font-weight: var(--fw-bold);
        font-size: var(--fz-small);
    }

    table.smp-table td.smp-cell-sort a {
        -webkit-line-clamp: 1;
        padding-inline: 0.3rem;
    }

    /* データ行をレスポンシブに */
    table.smp-table td {
        display: block;
        width: 100%;
    }

    /* ページャーのtableへの影響を元に戻す */
    table.smp-table tr.smp-row-normal table.smp-pager td {
        display: table-cell;
        width: auto;
    }

    /* データ行の文字揃えを左寄りにして、罫線を消す */
    table.smp-table td.smp-cell-data {
        display: grid;
        grid-template-columns: minmax(140px, 40%) 1fr;
        gap: 12px;
        align-items: center;
        border-width: 0 !important;
        font-size: var(--fz-medium) !important;
    }

    table.smp-table td.smp-cell-data:first-child {
        padding: 0.8rem 0.6rem !important;
        background: var(--bg-header) !important;
        border-radius: 0;
    }

    /* 3. その他のデータ項目（下のリスト部分） */
    table.smp-table td.smp-cell-data:not(:first-child) {
        padding: 0.4rem 0.6rem !important;
    }

    table.smp-table td.smp-cell-data:last-child {
        padding-bottom: 1rem !important;
    }

    table.smp-table tr.smp-row-data {
        display: block;
        margin: 1.25rem 0;
        border-radius: var(--radius-normal);
        border: 1px solid var(--border-color);
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    table.smp-table tr.smp-row-data:hover {
        background: var(--bg-card); /* スマホでは背景色を変えず */
        box-shadow: none;
    }

    table.smp-table tr.smp-row-normal table.smp-pager {
        display: flex;
        justify-content: center;
    }

    table.smp-table tr.smp-row-normal table.smp-pager td.smp-page a,
    table.smp-table tr.smp-row-normal table.smp-pager td.smp-current-page {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2rem;
        aspect-ratio: 1 / 1;
        padding: 0;
    }

    /* 一覧項目タイトルのデザイン */
    .subtitle {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 2px 8px;
        border-radius: 4px;
        background: #525b6c;
        font-size: 0.7rem;
        color: #fff;
        font-weight: var(--fw-bold);
        letter-spacing: 0.05em;
    }

    /* 変更選択時（行全体が緑系になった時）の微調整 */
    table.smp-table tr.smp-be-operate .subtitle {
        /* ラベルの色を少しだけ明るく、または緑に寄せると「選択中」がより強調されます */
        background: #3d4a5e;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); /* わずかな縁取り */
    }
}

@media screen and (max-width: 767px) {
    table.smp-table td.smp-cell-data {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
  }
}

/* ==========================================================================
   8. 送信・操作ボタン
   ========================================================================== */
/* 一覧表の付属ボタン */
table.smp-table input[type="button"],
table.smp-table input[type="submit"],
table.smp-table .smp-table-button,
table.smp-table input[name="smp-table-submit-button"],
input[type="button"] {
    margin: 5px 0;
    padding: 5px 15px;
    border: none;
    border-radius: var(--radius-large);
    outline: none;
    color: var(--color-auxiliary);
    font-size: var(--fz-normal);
    font-weight: var(--fw-bold);
    background: transparent; 
    box-shadow: var(--box-shadow-normal);  
    cursor: pointer;
    transition: var(--tr-form);

}

table.smp-table input[type="button"]:hover,
table.smp-table input[type="submit"]:hover,
table.smp-table .smp-table-button:hover,
table.smp-table input[name="smp-table-submit-button"]:hover,
input[type="button"]:hover,
table.smp-table input[type="button"]:focus,
table.smp-table input[type="submit"]:focus,
table.smp-table .smp-table-button:focus,
table.smp-table input[name="smp-table-submit-button"]:focus,
input[type="button"]:focus {
    outline: none;
}

table.smp-table input[type="button"]:active,
table.smp-table input[type="submit"]:active,
table.smp-table .smp-table-button:active,
table.smp-table input[name="smp-table-submit-button"]:active,
input[type="button"]:active {
    box-shadow: var(--box-shadow-inset);
    transform: scale(0.98);
    transition: 
        transform var(--dur-action) var(--ease-snappy), 
        box-shadow var(--dur-action) var(--ease-snappy), 
        color var(--dur-action) var(--ease-snappy);
}

/* ==========================================================================
   9. 特殊レイアウト (定義リスト・インライン入力・表)
   ========================================================================== */
.searchToggleBtn {
    /* デフォルトは非表示、必要な時だけメディアクエリで display を変える */
    display: none;
    cursor: pointer;
    
    /* レイアウト・形状（あらかじめ記述） */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    /* 質感・色（あらかじめ記述） */
    background-color: var(--bg-button);
    background-image: var(--search-icon-path-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px; /* アイコンを少し大きくしても良いかも */
    
    box-shadow: var(--box-shadow-normal);
    
    /* その他 */
    z-index: 1; /* 他の要素に隠れないように */
    font-size: 0;
    transition: var(--tr-form);
}

.searchToggleBtn:hover {
    outline: none;
    box-shadow: var(--box-shadow-focus);
}

.searchToggleBtn:active {
    box-shadow: var(--box-shadow-inset);
    transform: scale(0.98);
    transition: 
        transform var(--dur-action) var(--ease-snappy), 
        box-shadow var(--dur-action) var(--ease-snappy), 
        filter var(--dur-action) var(--ease-snappy);
}

.smp-search-form {
    position: sticky;
    top: 2rem;
    overflow: auto;
    height: calc(100vh - 60px);
    padding: 0.3rem;
    padding-bottom: 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #b1b9c4 #f0f4f7;
}

.smp-sf-body div div {
    display: flex;
    flex-direction: column;

    width: 33.333%;

    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- メディアクエリ --- */
@media screen and (max-width: 1360px) {
    .searchToggleBtn {
        display: flex; /* ここで初めて表示させる */
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .smp-search-form {
        position: fixed;
        inset: 0;
        display: none;
        height: 100vh;
        z-index: 2000;
        justify-content: center;
        align-items: unset;
        overflow-y: auto;
    }

    .smp-search-form.is-show {
        display: flex;
        z-index: 2;
    }

    .smp-search-form form {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 400px;

        margin: 20px;
        padding: 1rem;
        border-radius: 5px;
    }

    .smp-search-form .panel_bg {
        content: "";
        position: fixed;
        inset: 0;

        background-color: rgba(0, 0, 0, 0.7);
    }

    .smp-search-form form .close_btn {
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: -5px;
        right: 5px;

        width: 30px;
        height: 30px;

        border-radius: 30px;
        background-color: #fff;

        box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    }

    .smp-search-form form .close_btn::before,
    .smp-search-form form .close_btn::after {
        content: "";
        position: absolute;

        width: 2px;
        height: 15px;

        background-color: var(--color-auxiliary);
        transform: rotate(-45deg);
    }

    .smp-search-form form .close_btn::after {
        transform: rotate(45deg);
    }

    .smp-sf-body div div {
      width: 25%;
    }
}

/* --- smp popup --- */
div.smp-popup-filter {
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
}

div.smp-popup-wrapper {
    top: 20%;
    color: var(--color-auxiliary);
    z-index: 2;
}

div.smp-popup-header,
div.smp-popup-content {
    background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   10. フッター
   ========================================================================== */
/* --- spiralSeal --- */
.spiralSeal {
    grid-column: 2;

    display: grid;
    justify-content: center;
    align-items: center;
    color: var(--color-auxiliary);
    width: 100% !important;
    margin-top: 2rem;
}

.spiralSeal table {
    background: transparent !important;
    border: none !important;
}

/* リンクも目立たないように色を調整 */
.spiralSeal a {
    color: inherit;
    text-decoration: underline;
}

/* trの中にあるtdをすべて縦並びにする */
.spiralSeal tr td {
    /* display: block; */ /* 横並びのセルを縦並びに変える */
}

/* ==========================================================================
   11. サイドバー
   ========================================================================== */
.side-header {
    /* 1. 配置・レイアウト (一番重要な「固定」の定義) */
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    /* 2. サイズ・形状 */
    width: var(--nav-width);
    height: 100vh;

    /* 3. 背景・見た目 */
    --current-rgb: 80, 198, 255;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------
   1. 事業者登録（Master）：期の色を「上」にする
   --------------------------------------------------------- */
.side-header.master {
    /* メインカラー(濃紺) → 期の色(s1〜s10) */
    background: linear-gradient(135deg, rgb(var(--current-rgb)) 0%, var(--color-main) 100%);
}

/* ---------------------------------------------------------
   2. 店舗登録（Benefits）：期の色を「下」にする
   --------------------------------------------------------- */
.side-header.benefits {
    /* 期の色(s1〜s10) → メインカラー(濃紺) */
    background: linear-gradient(135deg, var(--color-main) 0%, rgb(var(--current-rgb)) 100%);
}

/* --- 各期ごとの色定義（一律定義：どちらのモードでも機能します） --- */
.side-header.s1  { --current-rgb: 0, 64, 128; }
.side-header.s2  { --current-rgb: 0, 102, 51; }
.side-header.s3  { --current-rgb: 153, 77, 0; }
.side-header.s4  { --current-rgb: 51, 51, 102; }
.side-header.s5  { --current-rgb: 153, 51, 102; }
.side-header.s6  { --current-rgb: 51, 102, 0; }
.side-header.s7  { --current-rgb: 128, 64, 0; }
.side-header.s8  { --current-rgb: 0, 102, 128; }
.side-header.s9  { --current-rgb: 166, 94, 0; }
.side-header.s10 { --current-rgb: 75, 0, 130; }

.side-nav {
    width: 100%;
}

/* --- サイドメニュー（縦並びのメニュー） --- */
.side-menu {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    align-items: center;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
}

.side-menu li {
    width: 100%;
}

.side-menu a {
    /* 1. 配置・サイズ (リンクを押しやすく広げる) */
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    text-align: center;

    /* 2. 形状・枠線 */
    border-radius: var(--radius-normal);

    /* 3. タイポグラフィ */
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: var(--fw-normal);
    text-decoration: none;

    /* 4. 動き */
    transition: all 0.2s ease;
}

.side-menu a:hover,
.side-menu a:focus {
    outline: none;
    background: var(--bg-hover); /* 半透明の背景 */
    color: var(--color-accent); /* アクセントカラーに変更 */
    letter-spacing: 0.05em; /* 文字間隔を広げる */
    transition-duration: var(--dur-action);
}

/* --- レスポンシブ切替ボトムバーへ --- */
@media (max-width: 768px) {
    .side-header {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        flex-direction: row; /* 横並び用 */
    }
    .side-menu {
        flex-direction: row; /* 横方向に並べる */
        justify-content: space-around; /* 均等配置 */
        align-items: center; /* 縦中央寄せ */
        height: 100%; /* 高さを揃える */
        gap: 0;
    }
    .side-menu a {
        font-size: 0.7rem;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* ==========================================================================
   12. アコーディオン
   ========================================================================== */
:root {
    --icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>');
    --icon-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>');
}

.accordion-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 0 16px;
}

/* --- 10色の高識別カラーパレット（色相を分散） --- */
.accordion-item.s1  { --bg-color: #e6f2ff; --rgb: 0, 64, 128; }
.accordion-item.s2  { --bg-color: #e9f9f0; --rgb: 0, 102, 51; }
.accordion-item.s3  { --bg-color: #fff4e6; --rgb: 153, 77, 0; }
.accordion-item.s4  { --bg-color: #f0f0ff; --rgb: 51, 51, 102; }
.accordion-item.s5  { --bg-color: #ffe6f0; --rgb: 153, 51, 102; }
.accordion-item.s6  { --bg-color: #f0ffe6; --rgb: 51, 102, 0; }
.accordion-item.s7  { --bg-color: #f9f0e9; --rgb: 128, 64, 0; }
.accordion-item.s8  { --bg-color: #e6fff5; --rgb: 0, 102, 128; }
.accordion-item.s9  { --bg-color: #fef6e4; --rgb: 166, 94, 0; }
.accordion-item.s10 { --bg-color: #f3e6ff; --rgb: 75, 0, 130; }

/* --- 共通計算ロジック --- */
.accordion-item {
    --text-color: rgba(var(--rgb), 1);
    /* 影だけはRGB変数を使って「その色の濃い版」を生成して馴染ませる */
    --shadow-inner: rgba(var(--rgb), 0.1);

    margin-bottom: 16px;
    border-radius: 16px;
    box-shadow: 4px 4px 10px rgba(var(--rgb), 0.2), 
                -4px -4px 10px rgba(255, 255, 255, 1);
}

.accordion-title {
    position: relative;
    margin: 0;
    padding: 16px 48px 16px 24px;
    border-radius: 16px;
    background: var(--bg-color); /* ここもベタ塗り */
    color: var(--text-color);
    cursor: pointer;
    font-size: 1rem;
    font-weight: var(--fw-medium);
    text-align: left;
    transition: all var(--dur-snappy) var(--ease-torne);
}

/* ホバー時にその色に合わせて「発光」させる */
.accordion-title:hover {
    filter: saturate(1.25); 
    box-shadow: 0 10px 25px rgba(var(--rgb), 0.15); /* 影を広げて薄くする */
    transition: all 0.3s var(--ease-torne);
}

.accordion-title.active {
    border-radius: 16px 16px 0 0;
}

/* アイコンの色を文字色と同期 */
.accordion-title::after {
    content: var(--icon-plus);
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 1px var(--text-color)); /* アイコンの色味調整 */
    transition: transform 0.3s ease;
}

.accordion-title.active::after {
    content: var(--icon-minus);
    transform: translateY(-50%) rotate(180deg);
}

.accordion-content {
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    border-radius: 0 0 16px 16px;
    background: var(--bg-color); /* コンテンツ内もベタ塗り */
    color: var(--text-color);
    /* 影に --shadow-inner を使って統一感を出す */
    box-shadow: inset 2px 2px 6px var(--shadow-inner),
                inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    transition: max-height var(--dur-open) var(--ease-torne), 
                padding var(--dur-snappy) ease, 
                visibility var(--dur-open);
}

.accordion-content.active {
    visibility: visible;
    max-height: none;
    padding: 16px;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .accordion-title {
        padding: 12px 40px 12px 16px;
        font-size: 0.9rem;
    }

    .accordion-content.active {
        padding: 12px 16px;
    }
}

`;

// --- 共通CSS設定のすぐ後ろに追記 ---
const pageTitle = document.title;

// 1. 判定条件
const isListScreen = pageTitle.includes("DB"); // タイトルに「DB」が含まれる場合

// 一覧画面専用の処理
if (isListScreen) {
    style.textContent += `
        @media screen and (min-width: 961px) {
            /* 右側の一覧表テーブルそのものを「白いパネル」に変える */
            table.smp-table {
                display: block; 
                padding: 1.5rem;
                border-radius: var(--radius-normal);
                
                /* ネオモーフィズム風の影 */
                box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.6), 
                            -6px -6px 12px #ffffff;
            }
        }
    `;
}

// 最後に全てが合体したstyleをheadに追加する
document.head.appendChild(style);