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

/* ==========================================================================
   1. 変数定義 (Design Tokens)
   ========================================================================== */
:root {
    /* カラーパレット */
    --color-main: #004080;
    --color-accent: #50c6ff;
    --color-primary: #2b6cb0;
    --color-error: #d9534f;
    --color-text: #2d3748;
    --color-auxiliary: #8290a1;
    --color-link: #0056b3;
    --color-white: #f5faf9;

   /* 背景色（眩しさ防止の肝） */
    --bg-card: #fcfcfc;
    --bg-dark: rgba(20, 25, 30, 0.9);
    --bg-light: rgba(230, 239, 248, 0.9);
    --bg-hover: rgba(255, 255, 255, 0.1); /* サイドバーのリンクホバー背景 */
    --bg-input: #f8fafc;
    --bg-error: #fff5f5;
    --bc-error: #d9534f;

    /* タイポグラフィ */
    --main-font: "Segoe UI", sans-serif;
    --fz-small: 0.675rem;
    --fz-normal: 0.75rem;
    --fz-medium: 0.875rem;
    --fz-body: 1rem;
    --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);
    --shadow-light: rgba(255, 255, 255, 0.8);
    --shadow-dark: rgba(174, 194, 224, 0.6);
    --box-shadow-normal: 2px 2px 4px rgba(80, 120, 160, 0.25),
                         -2px -2px 4px rgba(255, 255, 255, 0.4);
    --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);


    /* その他 */
    --radius-small: 8px;
    --radius-normal: 1rem;
    --radius-large: 2rem;
    --nav-width: 5rem; /* サイドバーの幅 */

    /* アニメーション設定 */
    --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);
}

/* フェードインアニメーション */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ==========================================================================
   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: 1rem;

    /* 2. 背景・外観（箱の見た目） */
    /* background: linear-gradient(to bottom right, #dfefff, #f5fbff); */
    background: linear-gradient(135deg, rgba(220, 238, 255, 1) 0%, rgba(220, 238, 255, 0.85) 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. レイアウト・共通コンテナ
   ========================================================================== */
#SMP_STYLE .body_tbl {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-small);
    background: var(--bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    animation: fadeIn 0.2s ease;
}

/* 汎用クリアフィックス */
.cf:after {
    content: "";
    display: block;
    clear: both;
}

@media screen and (max-width: 960px) {
    #SMP_STYLE .body_tbl {
        width: 100%;
        padding: 2rem 1rem;
    }
}
/* ==========================================================================
   4. 見出し・テキスト装飾
   ========================================================================== */
h1 {
    font-size: 1.625rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--color-main);
    font-weight: var(--fw-bold);
}

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

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

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

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

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

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

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

/* ==========================================================================
   5. フォーム基本要素 (Input, Select, Textarea)
   ========================================================================== */
/* 入力フィールド共通（ネオモーフィズム風） */
.input, 
textarea, 
select, 
.data.file input[type="file"] {
    width: 100%;
    margin: 0; /* 必要に応じて明示 */
    padding: 0.6rem;
    border: none;
    border-radius: var(--radius-large);
    background: var(--bg-light);
    box-shadow: var(--box-shadow-inset);
    font-family: var(--main-font);
    font-size: 1rem;
    color: currentColor;
    transition: var(--tr-form);
    overflow-anchor: none;
    scrollbar-width: thin;   
    scrollbar-color: #b1b9c4 #f0f4f7;
}

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

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

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

    /* 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.8rem center; */
    /* background-size: 1rem; */
    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 1rem 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;
}

/* 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: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.6rem;
    border-radius: var(--radius-large);
    background: var(--bg-light);
    box-shadow: var(--box-shadow-inset); 
    cursor: pointer;
    transition: var(--tr-form);
    position: relative;

    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

/* --- 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);
}

/* ラジオボタン・チェックボックスの共通リストスタイル */
ul.cf {
    display: grid;
    /* 画面幅が狭くなったら自動で1列、広ければ240px以上のボタンが並ぶ */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ラジオボタン専用：少し幅広にしたい場合 */
ul.radio.cf {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* 各項目の高さを揃える魔法のセット */
ul.cf li {
    display: flex; /* 子要素（label）をliいっぱいに広げる準備 */
    align-items: center;
}

ul.cf label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1; /* 親のliの高さに合わせて伸びる */
    text-align: center;
}

/* ==========================================================================
   7. フォームの各ラベルとバリデーション
   ========================================================================== */
/* 固定ヘッダー対策：スクロールした時の停止位置を調整 */
#SMP_STYLE dl {
    scroll-margin-top: 80px; /* 固定ヘッダーの高さ ＋ 余白分（お好みで調整） */
}

.smp_tmpl .title {
    margin-bottom: 0.5rem;
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

.need {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-small);
    background: var(--color-error);
    color: var(--color-white);
    font-size: 0.8rem;
}

span.caution {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    font-weight: var(--fw-normal);
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--color-text);
    opacity: 0.9;
}

span.sample {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-auxiliary);
}

.msg {
    display: block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.5rem;
    color: var(--color-error);
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
}

/* エラーメッセージが空の時は非表示にして余白を消す */
.msg:empty {
    display: none;
}

/* エラーがある項目の dl（親要素）を目立たせる */
/* SPIRALの仕様でdlに特定のクラスがつかない場合は、JSで付与するか
   以下の「.msgが存在する場合のdl」という指定が有効です（モダンブラウザ対応） */
.smp_tmpl dl:has(.msg:not(:empty)) {
    /* 1. レイアウト・形状 */
    margin-bottom: 2rem;
    padding: 1.2rem;
    border-left: 4px solid var(--color-error);
    border-radius: var(--radius-small);

    /* 2. 背景・見た目 */
    background: #fffaf0; /* ほんのり警告色（薄いオレンジ） */
    box-shadow: 0 0 15px rgba(217, 83, 79, 0.25);

    /* 3. 動き */
    transition: all 0.3s ease;
}

/* ==========================================================================
   8. 送信・操作ボタン
   ========================================================================== */
.submit, 
input[name=SMPFORM_BACK],
input.clear,
.login-button {
    margin-top: 1rem;
    padding: 0.8rem 2rem;
    width: 100%;
    border: none;
    border-radius: var(--radius-large);
    outline: none;
    color: #fff;
    font-size: 1rem;
    font-weight: var(--fw-bold);
    cursor: pointer;
    /* box-shadow: var(--box-shadow-normal); */
    transition: var(--tr-form);
}

.submit {
    background: linear-gradient(135deg, #004080 0%, #0056b3 100%);
    /* box-shadow: 0 4px 10px rgba(0, 30, 60, 0.3); */
}

input[name=SMPFORM_BACK] {
    background: linear-gradient(135deg, #666666 0%, #999999 100%);
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
}

input.clear {
    padding: 0.6rem;
    border-radius: var(--radius-large);
    background: var(--bg-light);
    color: currentColor;
    box-shadow: var(--box-shadow-inset);
    font-size: 0.9rem;
    font-weight: unset;
    margin-bottom: 0.4rem;
}

/* --- ログインボタン (汎用) --- */
.login-button {
    opacity: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    /* box-shadow: 0 4px 10px rgba(0, 120, 212, 0.3); */
}

.submit:focus,
input[name=SMPFORM_BACK]:focus,
input.clear:hover,
input.clear:focus,
.login-button:focus {
    outline: none;
    color: #fff;
    /* background: linear-gradient(135deg, #0056b3 0%, #50c6ff 100%); */
    /* background: linear-gradient(135deg, #888888 0%, #bbbbbb 100%); */
    box-shadow: var(--box-shadow-focus);
    transition-duration: var(--dur-action);
}

input.clear:hover,
input.clear:focus {
    background: var(--color-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) inset;
}

.submit:active, 
input[name=SMPFORM_BACK]:active,
input.clear:active,
.login-button:active {
    opacity: 1;
    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. 特殊レイアウト (定義リスト・インライン入力・表)
   ========================================================================== */
.smp_tmpl dl {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    margin-bottom: 1.5rem;
}

.smp_tmpl dt {
    width: 100%;
    margin-bottom: 0.3rem;
    color: var(--color-main);
    font-weight: var(--fw-bold);
}

.smp_tmpl dd {
    width: 100%;
    margin: 0;
}

/* 郵便番号・電話番号などの横並び設定 */
.zipcode ul, .phone ul, .time ul {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.zipcode li.code01 input { max-width: 4rem; }
.zipcode li.code02 input { max-width: 5rem; }
.phone li input { max-width: 4rem; }
#SMP_STYLE .integer input { max-width: 6rem; }
#SMP_STYLE .real input { max-width: 10rem; }
#SMP_STYLE .num input { max-width: 6rem; }
#SMP_STYLE .time .year { max-width: 4rem; }
#SMP_STYLE .time input { max-width: 3rem; }
#SMP_STYLE .price input { max-width: 10rem; }

/* 表 PC・共通設定 */
.smp-card-list {
    width: 100%;
    margin: 10px auto;
    border-collapse: collapse;
    border: 1px solid #cccccc;
    color: var(--color-text);
}

.smp-card-list th, 
.smp-card-list td {
    padding: 10px;
    border: 1px solid #cccccc;
    font-size: 0.8125rem;
    text-align: left;
}

.smp-card-list th {
    background: #f0f0f0;
}

/* --- スマホ用レスポンシブ設定 --- */
@media screen and (max-width: 768px) {
    .smp-card-list {
        border: none; /* 外枠を一旦消す */
    }

    .smp-card-list tr:nth-child(2) {
        display: none;
    }

    .smp-card-list tr {
        display: block;
        overflow: hidden;
        margin-bottom: 20px; /* カードごとの隙間 */
        border: 1px solid #cccccc; /* trを外枠にする */
        border-radius: 4px; /* 少し角を丸くするとカード感が出ます */
    }

    .smp-card-list th, 
    .smp-card-list td {
        display: block;
        width: 100%;
        border: none; /* 個別の線を一旦すべて消す */
    }

    .smp-card-list th:nth-child(1) {
        background: #f0f0f0;
        border-bottom: 1px solid #cccccc; /* 見出しの下だけに線を引く */
        font-weight: var(--fw-bold);
    }

    .smp-card-list th:nth-child(2) {
        background: transparent;
    }

    .smp-card-list td {
        border-bottom: 1px dotted #eeeeee; /* 項目間の区切り（任意） */
    }

    .smp-card-list td:last-child {
        border-bottom: none; /* 最後の項目は線を消す */
    }

    /* 資本金のセル（tr内の1番目のtd） */
    .smp-card-list td:nth-of-type(1)::before {
        content: "資本金の額（又は出資の総額）：";
        font-size: 0.7rem;
        color: #888;
        font-weight: var(--fw-normal);
    }

    /* 従業員数のセル（tr内の2番目のtd） */
    .smp-card-list td:nth-of-type(2)::before {
        content: "常時使用する従業員の数：";
        font-size: 0.7rem;
        color: #888;
        font-weight: var(--fw-normal);
    }

    /* ラベルとデータの並びを整える */
    .smp-card-list td {
        display: flex; /* 横並びに */
        justify-content: space-between; /* ラベルと数値を両端に */
        align-items: center;
        padding: 12px 15px;
    }
}

/* ==========================================================================
   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. サイドバー(使用時はbody直下が良い)
   ========================================================================== */
.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）：期の色を「上」にする<header class="side-header master s6">
   --------------------------------------------------------- */
.side-header.master {
    /* メインカラー(濃紺) → 期の色(s1〜s10) */
    background: linear-gradient(135deg, rgb(var(--current-rgb)) 0%, var(--color-main) 100%);
}

/* ---------------------------------------------------------
   2. 店舗登録（Benefits）：期の色を「下」にする<header class="side-header benefits s6">
   --------------------------------------------------------- */
.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-item {
        margin-bottom: 8px;
    }

    .accordion-title {
        padding: 12px 40px 12px 16px;
        font-size: 0.9rem;
    }

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

`;

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

// 1. 判定条件：タイトルが「ログインページ」または「マイエリア　++ ERROR ++」を含む場合
const isLoginScreen = pageTitle.includes("ログインページ") || pageTitle.includes("マイエリア　++ ERROR ++");

if (isLoginScreen) {
    
    /* 1. Font Awesome を動的に読み込む */
    if (!document.querySelector('link[href*="font-awesome"]')) {
        const faLink = document.createElement('link');
        faLink.rel = 'stylesheet';
        faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
        document.head.appendChild(faLink);
    }

    /* 2. ログイン系画面専用スタイル（450px幅・アイコン付）を追加 */
    style.textContent += `
        /* --- ログイン専用コンテナ --- */
        #SMP_STYLE .body_tbl {
            max-width: 450px;
            border-radius: 1.5rem;
        }

        /* --- 入力エリアのアイコン配置 --- */
        #SMP_STYLE dl { position: relative; }

        #SMP_STYLE dl:nth-of-type(1)::before,
        #SMP_STYLE dl:nth-of-type(2)::before {
            font-family: "Font Awesome 6 Free"; 
            font-weight: var(--fw-extra-bold);
            position: absolute;
            left: 1.2rem;
            top: 2.8rem; 
            color: var(--color-main);
            opacity: 0.4;
            z-index: 10;
        }

        #SMP_STYLE dl:nth-of-type(1)::before { content: "\\f007"; } /* User icon */
        #SMP_STYLE dl:nth-of-type(2)::before { content: "\\f023"; } /* Lock icon */

        /* 入力欄の余白調整 */
        #SMP_STYLE .input {
            padding: 0.8rem 1rem 0.8rem 3rem;
        }

        /* ボタンをより強調 */
        .submit {
            border-radius: var(--radius-large);
            padding: 1rem;
        }

        /* エラーメッセージ（ログイン失敗時など）の微調整 */
        p {
            font-size: 0.9rem;
            color: var(--color-error);
        }
    `;
}

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