// ==========================================================================
// 1. マスターデータ・設定定義 (Constants / Config)
// ==========================================================================

// 期別ごとのカラーパレットマッピング
const THEME_PALETTES = {
    's1':  { bgOuter: '#e6f2ff', brand: '#90caf9', hover: '#bbdefb', rgb: '0, 64, 128' },
    's2':  { bgOuter: '#e9f9f0', brand: '#81c784', hover: '#a5d6a7', rgb: '0, 102, 51' },
    's3':  { bgOuter: '#fff4e6', brand: '#ffb74d', hover: '#ffe0b2', rgb: '153, 77, 0' },
    's4':  { bgOuter: '#f0f0ff', brand: '#9fa8da', hover: '#c5cae9', rgb: '51, 51, 102' },
    's5':  { bgOuter: '#ffe6f0', brand: '#f48fb1', hover: '#f8bbd0', rgb: '153, 51, 102' },
    's6':  { bgOuter: '#f0ffe6', brand: '#a5d6a7', hover: '#c8e6c9', rgb: '51, 102, 0' },
    's7':  { bgOuter: '#f9f0e9', brand: '#ffcca3', hover: '#ffe0cc', rgb: '128, 64, 0' },
    's8':  { bgOuter: '#e6fff5', brand: '#80cbc4', hover: '#b2dfdb', rgb: '0, 102, 128' },
    's9':  { bgOuter: '#fef6e4', brand: '#ffcc80', hover: '#ffe0b2', rgb: '166, 94, 0' },
    's10': { bgOuter: '#f3e6ff', brand: '#b39ddb', hover: '#d1c4e9', rgb: '75, 0, 130' },
    's11': { bgOuter: '#ffe6ea', brand: '#ff8093', hover: '#ffb3bf', rgb: '180, 50, 70' },
    's12': { bgOuter: '#fffae6', brand: '#ffd54f', hover: '#ffe082', rgb: '150, 110, 20' },
    's13': { bgOuter: '#e6fff2', brand: '#80e2b3', hover: '#b3f0d2', rgb: '30, 140, 90' }
};

// 日本語の「期」やキーワードからテーマIDへのマッピング
const THEME_KEYWORDS = [
    { keys: ["第1期", "s1"], id: "s1" },
    { keys: ["第2期", "s2"], id: "s2" },
    { keys: ["第3期", "s3"], id: "s3" },
    { keys: ["第4期", "s4"], id: "s4" },
    { keys: ["第5期", "s5"], id: "s5" },
    { keys: ["第6期", "s6"], id: "s6" },
    { keys: ["第7期", "s7"], id: "s7" },
    { keys: ["第8期", "s8"], id: "s8" },
    { keys: ["第9期", "s9"], id: "s9" },
    { keys: ["第10期", "s10"], id: "s10" },
    { keys: ["追加書類", "s11"], id: "s11" },
    { keys: ["審査履歴", "s12"], id: "s12" },
    { keys: ["交付決定通知書", "s13"], id: "s13" }
];

// 初期デフォルトテーマ (s1相当)
let currentTheme = { ...THEME_PALETTES['s1'] };


// ==========================================================================
// 2. 汎用ユーティリティ関数 (Utilities)
// ==========================================================================

/**
 * 全角英数字を半角に変換する
 */
function convertToHalfWidth(text) {
    return text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xFEE0));
}

/**
 * テキストから該当するテーマIDを判定する
 */
function detectThemeId(text) {
    const normalizedText = convertToHalfWidth(text.toLowerCase());
    
    // 除外条件（デフォルト維持）
    if (normalizedText.includes("第1期〜第3期") || normalizedText.includes("s1〜s3")) {
        return 's1';
    }
    
    // キーキーワードマッチング
    const matched = THEME_KEYWORDS.find(item => 
        item.keys.some(key => normalizedText.includes(key))
    );
    
    return matched ? matched.id : 's1';
}


// ==========================================================================
// 3. 画面判定 ＆ 最速クラス付与 (Screen Initialization)
// ==========================================================================
function initScreenClass() {
    const pageTitle = document.title;
    const rootEl = document.documentElement;

    if (/list|officeuse/i.test(pageTitle) || pageTitle.includes("事務局")) {
        rootEl.classList.add("is-office-screen"); 
        if (localStorage.getItem('office-mode') === 'dark') {
            rootEl.classList.add('office-dark-active');
        }
    } else if (pageTitle.startsWith("ログインページ") || pageTitle.includes("ERROR")) {
        rootEl.classList.add("is-login-screen");
        injectFontAwesomeCDN();
    }
}

function injectFontAwesomeCDN() {
    if (document.getElementById('fa-cdn-link')) return;
    const faLink = document.createElement('link');
    faLink.id = 'fa-cdn-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);
}


// ==========================================================================
// 4. テーマ・CSS制御ロジック (Theme & Style Injection)
// ==========================================================================

/**
 * 現在の画面状態からテーマを判定・適用する
 */
function applyTheme() {
    const currentTitle = document.title;
    const firstH1 = document.querySelector('h1');
    const combinedText = `${currentTitle} ${firstH1 ? firstH1.textContent : ""}`;
    
    const themeId = detectThemeId(combinedText);
    currentTheme = { ...THEME_PALETTES[themeId] };

    // CSSカスタムプロパティを反映
    const rootEl = document.documentElement;
    if (rootEl) {
        rootEl.style.setProperty('--color-blue-brand', currentTheme.brand);
        rootEl.style.setProperty('--color-blue-hover', currentTheme.hover);
        
        // ライトモード時のみ判定された背景色を使用
        if (!rootEl.classList.contains('office-dark-active')) {
            rootEl.style.setProperty('--color-bg-outer', currentTheme.bgOuter);
        }
    }
}

/**
 * スタイルシートの注入
 */
function injectStyles() {
    // 既存の古いstyleタグがあれば二重注入を防ぐために削除
    const oldStyle = document.getElementById('spiral-dynamic-style');
    if (oldStyle) oldStyle.remove();

    const style = document.createElement('style');
    style.id = 'spiral-dynamic-style';
    style.textContent = getGlobalStyles(currentTheme);
    document.head.appendChild(style);
}


// ==========================================================================
// 5. コンポーネント生成 & DOM成形 (DOM Manipulation)
// ==========================================================================

/**
 * 事務局用のダークモードスイッチを生成
 */
function injectModeSwitcher() {
    if (!document.documentElement.classList.contains('is-office-screen')) return;
    if (document.getElementById('office-toggle-container')) return;

    const isDark = localStorage.getItem('office-mode') === 'dark';
    const container = document.createElement('div');
    container.id = 'office-toggle-container';
    container.className = 'office-mode-switcher';
    container.innerHTML = `
        <span>ダークモード</span>
        <label class="mode-switch-toggle">
            <input type="checkbox" id="office-mode-checkbox" ${isDark ? 'checked' : ''}>
            <span class="mode-switch-slider"></span>
        </label>
    `;
    document.body.appendChild(container);

    document.getElementById('office-mode-checkbox').addEventListener('change', function(e) {
        const rootEl = document.documentElement;
        if (e.target.checked) {
            rootEl.classList.add('office-dark-active');
            localStorage.setItem('office-mode', 'dark');
        } else {
            rootEl.classList.remove('office-dark-active');
            localStorage.setItem('office-mode', 'light');
        }
        applyTheme();
        // ダーク状態変更に伴い、背景色が変化するためスタイルを再注入
        injectStyles();
    });
}

/**
 * _ 以下のテキストをカットする
 */
function removeUnderlineText(element) {
    element.childNodes.forEach(node => {
        if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('_')) {
            node.textContent = node.textContent.split('_')[0].trim();
        }
    });
}

/**
 * 特定条件下のH1タグを二段組み構造に成形する
 */
function formatH1Structure(h1Element) {
    const rawText = h1Element.innerHTML;
    const hasRequiredKeywords = rawText.includes('広島県') && rawText.includes('特別高圧');
    const isAlreadyFormatted = rawText.includes('class="sub-title-accent"');

    if (hasRequiredKeywords && !isAlreadyFormatted) {
        const cleanText = rawText.replace(/<br\s*\/?>/gi, ' ').replace(/\s+/g, ' ').trim();
        const startIdx = cleanText.indexOf('広島県');
        
        if (startIdx !== -1) {
            const upperText = cleanText.substring(0, startIdx).trim() || '申請者情報等の申請';
            const lowerText = cleanText.substring(startIdx).trim();
            h1Element.innerHTML = `${upperText}<br><span class="sub-title-accent">${lowerText}</span>`;
        }
    }
}


// ==========================================================================
// 6. コア実行・DOM監視（メイン処理）
// ==========================================================================

// 初期実行（チラつきを防ぐため最優先で実行する処理）
initScreenClass();
injectStyles();

// リアルタイムDOM監視ロジック
(function() {
    const targetForm = document.documentElement;

    const observer = new MutationObserver((mutations) => {
        const h1 = document.querySelector('h1');
        
        // H1にテキストが流し込まれるのを待つ
        if (!h1 || h1.textContent.trim() === "") return;

        // 1回限りの成形・初期化処理を実行
        document.querySelectorAll('dt.title, dt').forEach(removeUnderlineText);
        formatH1Structure(h1);
        applyTheme();
        injectModeSwitcher();

        // 目的完了のため監視を終了
        observer.disconnect();
    });

    observer.observe(targetForm, {
        childList: true,
        subtree: true,
        characterData: true
    });
})();


// ==========================================================================
// 7. 巨大スタイルシートの定義 (CSS Templates)
// ==========================================================================
function getGlobalStyles(theme) {
    return `
:root {
    /* --- カラーパレット：ブランドカラー（JS連動） --- */
    --color-blue-brand: ${theme.brand};   
    --color-blue-hover: ${theme.hover};   
    --color-bg-outer: ${theme.bgOuter}; 

    /* --- カラーパレット：テキスト --- */
    --color-text-main: #2d3748;              
    --color-text-sub: #8290a1;              

    /* --- カラーパレット：エラー・バリデーション --- */
    --color-error-main: #d9534f;            
    --color-error-bg: #fff5f5;            
    --color-error-border: #ffb3b3;            

    /* --- タイポグラフィ --- */
    --main-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --code-font: "Consolas", "Monaco", monospace;

    /* --- タイポグラフィ（文字サイズ階層） --- */
    --fz-small: 0.675rem;          /* 10.8px */
    --fz-normal: 0.75rem;          /* 12px */
    --fz-semi-medium: 0.8125rem;   /* 13px */
    --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;

    /* --- レイアウト / 角丸 / 視覚効果 --- */
    --radius-panel: 24px;               
    --radius-item: 16px; 
    --shadow-panel: 0 20px 40px rgba(100, 140, 180, 0.12);
    --shadow-input: 0 2px 4px rgba(100, 130, 160, 0.05);
    --nav-width: 64px;

    /* --- アニメーション・トランジション --- */
    --dur-action: 0.1s;
    --dur-open: 0.2s;
    --ease-snappy: ease-out;
    --tr-form: all var(--dur-action) var(--ease-snappy);
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* --- リセット / 共通ベーススタイル --- */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 50px 20px;
    background-color: var(--color-bg-outer); 
    font-family: var(--main-font);
    color: var(--color-text-main);
    font-size: var(--fz-body);
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
    word-break: break-all;
}

body::before {
    content: "";
    position: fixed; 
    inset: 0;        
    z-index: -1;     
    background-color: var(--color-bg-outer);
    background-image: radial-gradient(at 50% 0%, #ffffff 0px, transparent 70%);
    pointer-events: none; 
}

.body_tbl {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 45px 40px;
    background-color: #FFFFFF;
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    text-align: center;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn var(--dur-open) ease-out forwards;
    contain: content;
}

/* --- リンク --- */
a {
    color: var(--color-blue-brand);
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-bold);
    text-decoration: none;
    transition: var(--tr-form);
}
a:hover {
    color: var(--color-blue-hover);
}

/* --- タイトル・見出し関連 --- */
h1 {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 22px;
    font-weight: var(--fw-extra-bold);
    color: var(--color-text-main);
    text-align: center;
}

h1 .sub-title-accent {
    display: block;
    margin-top: 10px;
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-medium);
    color: #64748b;
    line-height: 1.4;
    letter-spacing: normal;
}

.header_text, 
.header_rmesg {
    padding: 0;
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--color-text-sub);
    text-align: center;
}

.header_rmesg {
    margin: 40px 0 20px 0;
    font-weight: var(--fw-bold);
    color: var(--color-blue-brand);
}

h2.title {
    display: block;
    width: 100%;
    margin: 40px 0 24px 0;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-blue-brand) 0%, var(--color-blue-hover) 100%); 
    border: none;
    border-radius: 100px; 
    box-shadow: 0 4px 12px rgba(44, 58, 78, 0.06), inset 0 2px 3px rgba(255, 255, 255, 0.4);
    font-size: 15px;
    font-weight: var(--fw-extra-bold);
    color: #FFFFFF;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* --- フォームレイアウト構造 --- */
.smp_tmpl {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

.smp_tmpl dl {
    margin: 0 0 24px 0;
    padding: 0;
    border-radius: var(--radius-item);
    transition: var(--tr-form);
}

dt.title {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding-left: 4px;
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}

dd.data {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

dd.data:not(:has(input)):not(:has(textarea)):not(:has(select)):not(.file) {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f1f5f9;
    border-radius: var(--radius-item);
    font-family: var(--code-font);
    font-weight: var(--fw-bold);
    color: var(--color-text-sub);
}

.data.real {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.input, 
textarea, 
select {
    width: 100%;
    max-width: 100%;
    padding: 10px 16px;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-item);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    font-size: var(--fz-body);
    font-family: var(--main-font);
    letter-spacing: 0.04em;
    color: var(--color-text-main);
    outline: none;
    transition: var(--tr-form);
}

select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: 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="%2364748b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
}

.data.real .input, 
.data.integer .input, 
.data.num .input,
.data.price input {
    max-width: 200px;
    font-family: var(--code-font);
}

.input:focus, 
textarea:focus, 
select:focus {
    background-color: #FFFFFF;
    border-color: var(--color-blue-brand);
    box-shadow: 0 0 0 4px rgba(155, 186, 219, 0.2);
}

textarea {
    width: 100% !important;
    min-width: clamp(180px, 30%, 100%);
    min-height: clamp(100px, 30%, 100%);
    font-size: var(--fz-medium);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

textarea::-webkit-scrollbar {
    display: none;
}
textarea:active {
    transition: none;
}

.smp_tmpl input[name="f014134805"],
.smp_tmpl input[name="f014134752"] {
    font-family: var(--code-font);
}

.smp_tmpl input[readonly],
.smp_tmpl input[readonly]:focus {
    width: 100%;
    max-width: 200px;
    padding: 10px 16px;
    background-color: #f1f5f9; 
    border: 2px solid transparent;
    border-radius: var(--radius-item);
    box-shadow: inset 0 2px 4px rgba(100, 130, 160, 0.06); 
    font-family: var(--code-font);
    font-size: var(--fz-body);
    font-weight: var(--fw-extra-bold);
    color: var(--color-blue-brand);
    cursor: default;
    outline: none;
}

.data.price input[readonly], 
.data.price input[readonly]:focus {
    max-width: 200px;
    padding: 12px 16px;
    font-size: var(--fz-body);
}

/* --- 動的単位（円 / kWh）の自動挿入制御 --- */
.data.real::after {
    display: inline-block;
    white-space: nowrap;
    order: 1;
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}
.data.real:has(input[name*="014137795"])::after { content: " 円"; }

.data.real:has(input[name*="013737007"])::after,
.data.real:has(input[name*="013737008"])::after,
.data.real:has(input[name*="013737009"])::after,
.data.real:has(input[name*="013737010"])::after,
.data.real:has(input[name*="013737011"])::after,
.data.real:has(input[name*="013737012"])::after,
.data.real:has(input[name*="013737013"])::after,
.data.real:has(input[name*="013739927"])::after,
.data.real:has(input[name*="013739928"])::after,
.data.real:has(input[name*="013739929"])::after,
.data.real:has(input[name*="013739930"])::after,
.data.real:has(input[name*="013739931"])::after,
.data.real:has(input[name*="013739932"])::after,
.data.real:has(input[name*="013739933"])::after,
.data.real:has(input[name*="013860639"])::after,
.data.real:has(input[name*="013834850"])::after,
.data.real:has(input[name*="013990218"])::after,
.data.real:has(input[name*="013990219"])::after,
.data.real:has(input[name*="013856055"])::after,
.data.real:has(input[name*="013856056"])::after,
.data.real:has(input[name*="013856068"])::after,
.data.real:has(input[name*="013856074"])::after { content: " kWh"; }

.data.real br { display: none; }
.data.real .msg { width: 100%; order: 2; }

/* --- 特殊分割型コンポーネント --- */
.data.zipcode:has(input) ul.cf,
.data.time:has(input) ul.cf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.data.zipcode:has(input) ul.cf li, 
.data.time:has(input) ul.cf li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    float: none;
    font-size: var(--fz-body);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}

/* --- 郵便番号 (zipcode) --- */
.data.zipcode:has(input) li.code01 .input {
    width: 70px;
    text-align: center;
    font-family: var(--code-font);
}

.data.zipcode:has(input) li.code02 .input {
    width: 85px;
    text-align: center;
    font-family: var(--code-font);
}

.data.zipcode:has(input) li.code01 {
    gap: 8px;
}

/* --- 時間 (time) --- */
.data.time:has(input) ul.cf li {
    gap: 6px;
    font-size: var(--fz-medium);
}

.data.time:has(input) li input.input {
    padding: 11px 8px;
    text-align: center;
    font-family: var(--code-font);
}

.data.time:has(input) li:has(.year) input.input {
    width: 80px;
}

.data.time:has(input) li:not(:has(.year)) input.input {
    width: 55px;
}

/* --- 金額 (price) --- */
.data.price ul.cf {
    display: flex;
    align-items: center;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.data.price ul.cf li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    float: none;
    font-size: var(--fz-body);
    font-weight: var(--fw-extra-bold);
    color: var(--color-text-main);
}

.data.price ul.cf li::after {
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}

/* --- 電話番号 (phone) --- */
.data.phone ul.cf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.data.phone ul.cf li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    float: none;
    font-size: var(--fz-body);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}

.data.phone li.num01 .input, 
.data.phone li.num02 .input, 
.data.phone li.num03 .input {
    width: 75px;
    text-align: center;
    font-family: var(--code-font);
}

.data.phone li.num01, 
.data.phone li.num02 {
    gap: 8px;
}

/* --- その他 フォームテキスト・サンプル表記 --- */
.smp_tmpl dd.data:has(input[name*="cf"]) {
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-bold);
    line-height: 2;
    color: var(--color-text-sub);
}

.smp_tmpl dd.data input[name*="cf"] {
    margin-top: 4px;
}

span.sample {
    display: inline-block;
    margin-top: 4px;
    font-size: var(--fz-normal);
    font-weight: var(--fw-medium);
    color: var(--color-text-sub);
}

.need {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 8px;
    background-color: var(--color-error-main);
    border-radius: 100px;
    line-height: 1.2;
    font-size: var(--fz-small);
    font-weight: var(--fw-bold);
    color: #FFFFFF;
}
span.caution { 
    display: block;
    margin-top: 4px;
    font-size: var(--fz-normal);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-text-sub);
}

input::placeholder, textarea::placeholder { opacity: 0; }

/* --- カード型データリストテーブル --- */
table.smp-card-list {
    width: 100%;
    margin: 16px 0;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #FFFFFF;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-item);
    box-shadow: 0 4px 12px rgba(44, 58, 78, 0.03);
    overflow: hidden;
}

table.smp-card-list th, 
table.smp-card-list td {
    padding: 12px 16px;
    font-size: var(--fz-semi-medium);
    line-height: 1.4;
    color: var(--color-text-main);
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

table.smp-card-list th {
    background: #f8fafc;
    font-weight: var(--fw-bold);
}

table.smp-card-list tr th:first-child {
    background: #f8fafc;
    font-weight: var(--fw-bold);
    text-align: left;
}

table.smp-card-list th:last-child, 
table.smp-card-list td:last-child {
    border-right: none;
}

/* --- ファイルアップロードエリア --- */
.data.file input[type="file"] { 
    display: block;
    position: relative;
    width: 100%;
    min-height: 5.5rem;
    margin-bottom: 0.8rem;
    padding: 3.2rem 1rem 0;
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-item);
    box-shadow: var(--shadow-input);
    color: var(--color-text-sub);
    font-family: inherit;
    font-size: var(--fz-normal);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: var(--tr-form);
    overflow: hidden; 
}

/* デフォルトのファイル選択ボタンを非表示化 */
.data.file input[type="file"]::file-selector-button, 
.data.file input[type="file"]::-webkit-file-upload-button {
    display: none;
}

/* アップロードエリア中央の「+」アイコン表現 */
.data.file input[type="file"]::before {
    content: "+";
    position: absolute;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-blue-brand);
    font-size: 2.2rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    pointer-events: none;
    transition: var(--tr-form);
}

.data.file input[type="file"]:hover {
    background-color: #ffffff;
    border-color: var(--color-blue-brand);
}

.data.file input[type="file"]:focus {
    border-color: var(--color-blue-brand);
    box-shadow: 0 0 0 4px rgba(155, 186, 219, 0.25);
    outline: none;
}

/* 添付済みファイルのアイコン・クリアボタン・削除チェック */
dd.file img {
    vertical-align: sub;
    margin-right: 6px;
    width: 16px;
    height: auto;
}

dd.file input.clear {
    display: inline-block;
    vertical-align: middle;
    margin: 8px;
    padding: 6px 16px;
    width: auto;
    height: auto;
    background-color: #e2e8f0;
    color: #475569;
    border: none;
    border-radius: 100px;
    box-shadow: 0 2px 4px rgba(148, 163, 184, 0.3);
    cursor: pointer;
    transition: var(--tr-form);
}

dd.file input.clear:active {
    transform: translateY(1px);
    box-shadow: none;
}

dd.file label {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 8px 0;
    padding: 5px 14px;
    background-color: #fff1f2;
    color: #e11d48;
    border: 1px solid #ffe4e6;
    border-radius: 100px;
    font-size: var(--fz-normal);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: var(--tr-form);
}

dd.file label input[type="checkbox"] {
    margin: 0 6px 0 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* 削除にチェックが入ったときのスタイル反転 */
dd.file label:has(input:checked) {
    background-color: #ff3344;
    color: #FFFFFF;
    border-color: #ff3344;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

dd.file {
    font-size: var(--fz-semi-medium);
    color: var(--color-text-sub);
    padding-left: 4px;
    line-height: 1.6;
}

/* --- ラジオボタン / チェックボックス（カード・ボタンUI風） --- */
ul.radio.cf, .data.multi2 ul.cf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    width: 100%;
    margin: 6px 0 8px 0;
    padding: 0;
    list-style: none;
}
/* --- ラジオボタン / チェックボックス（カード・ボタンUI風） --- */
ul.radio.cf:has(input[name="f014134812"]), 
ul.radio.cf:has(input[name="f013738245"]) {
    grid-template-columns: 1fr;
    max-width: 100%;
}

ul.radio.cf label, 
.data.multi2 ul.cf label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px;
    background-color: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 100px;
    box-shadow: var(--shadow-input), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    cursor: pointer;
    transition: var(--tr-form);
}

/* ブラウザデフォルトのラジオボタン/チェックボックスを非表示化 */
ul.radio.cf label input[type="radio"], 
.data.multi2 ul.cf label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

ul.radio.cf label span, 
.data.multi2 ul.cf label span {
    margin: 0;
    padding: 0;
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    line-height: 1.3;
    text-align: center;
}

ul.radio.cf label:hover, 
.data.multi2 ul.cf label:hover {
    background-color: var(--color-blue-hover);
}

/* 選択（チェック）状態のカード型UIスタイル変更 */
ul.radio.cf label:has(input:checked), 
.data.multi2 label:has(input:checked) {
    background-color: var(--color-blue-brand);
    border-color: var(--color-blue-brand);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* 選択状態時の内部テキスト反転 */
ul.radio.cf label:has(input:checked) span, 
.data.multi2 label:has(input:checked) span {
    color: #FFFFFF;
}

/* --- エラー・バリデーション警告演出 --- */
.header_emesg {
    display: block;
    width: 100%;
    margin: 0 0 40px 0;
    padding: 16px 20px;
    background-color: var(--color-error-bg);
    border: 2px solid var(--color-error-border);
    border-radius: var(--radius-item);
    box-shadow: 0 4px 12px rgba(226, 62, 87, 0.08);
    font-size: var(--fz-medium);
    font-weight: var(--fw-extra-bold);
    line-height: 1.5;
    color: var(--color-error-main);
    text-align: center;
}

.msg {
    display: block;
    margin-top: 8px;
    padding-left: 4px;
    color: var(--color-error-main);
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-bold);
}

/* エラーメッセージが空のときは非表示 */
.msg:empty {
    display: none;
}

/* 各種入力欄のエラー状態スタイル */
.error, 
.input.error, 
textarea.error, 
.data.file input[type="file"].error {
    background-color: var(--color-error-bg);
    border-color: var(--color-error-border);
}

/* エラーメッセージを内包する親要素（dl）の警告背景演出 */
.smp_tmpl dl:has(.msg:not(:empty)) {
    background-color: var(--color-error-bg);
    padding: 16px;
    border: 2px solid var(--color-error-border);
}

/* --- 条件分岐パーツ初期非表示（チラつき防御壁） --- */
.smp_tmpl dl:has(input[name^="f014134805"]), 
.smp_tmpl dl:has(input[name="f014137795"]),
.smp_tmpl dl:has(input[name^="f013735748"]), 
.smp_tmpl dl:has(input[name^="f013735770"]), 
.smp_tmpl dl:has(input[name^="f013735772"]), 
.smp_tmpl dl:has(input[name^="f013735773"]) {
    display: none;
}

/* --- 操作ボタン --- */
input.submit, 
.button {
    display: block;
    width: 100%;
    max-width: 240px;
    min-height: 48px;
    margin: 40px auto;
    background-color: var(--color-blue-brand);
    border: none;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(155, 186, 219, 0.4);
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    transition: var(--tr-form);
    text-decoration: none;
}

/* ホバー（マウスオーバー）時の挙動 */
input.submit:hover, 
.button:hover {
    background-color: var(--color-blue-hover);
    color: #FFFFFF;
}

/* アクティブ（クリック中）時の押し込み演出 */
input.submit:active, 
.button:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* a要素などによるボタン表記のテキスト中央配置調整 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- フッターロゴ等エリア --- */
.spiralSeal { width: 100%; margin: auto; border-collapse: collapse; border-top: 1px solid #f1f5f9; text-align: left; }
.spiralSeal td { padding-top: 24px; color: var(--color-text-sub); }
.spiralSeal a { font-size: var(--fz-small); }

/* --- 固定サイドバーナビゲーション --- */
.side-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    width: var(--nav-width);
    height: 100vh;
    --rgb: 155, 186, 219;
    box-shadow: 2px 0 12px rgba(44, 58, 78, 0.08);
}
.side-header.master { background: linear-gradient(135deg, rgb(var(--rgb)) 0%, var(--color-blue-brand) 100%); }
.side-header.benefits { background: linear-gradient(135deg, var(--color-blue-brand) 0%, rgb(var(--rgb)) 100%); }
.side-header.s1  { --rgb: 0, 64, 128; }
.side-header.s2  { --rgb: 0, 102, 51; }
.side-header.s3  { --rgb: 153, 77, 0; }
.side-header.s4  { --rgb: 51, 51, 102; }
.side-header.s5  { --rgb: 153, 51, 102; }
.side-header.s6  { --rgb: 51, 102, 0; }
.side-header.s7  { --rgb: 128, 64, 0; }
.side-header.s8  { --rgb: 0, 102, 128; }
.side-header.s9  { --rgb: 166, 94, 0; }
.side-header.s10 { --rgb: 75, 0, 130; }
.side-header.s11 { --rgb: 180, 50, 70; }
.side-header.s12 { --rgb: 150, 110, 20; }
.side-header.s13 { --rgb: 30, 140, 90; }

/* --- サイドバーメニュー構造 --- */
.side-menu {
    counter-reset: menu-number;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    width: 100%;
}

.side-menu a {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 56px;
    height: 56px;
    padding: 6px 2px;
    border-radius: var(--radius-item);
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease-out;
    cursor: pointer;
}

/* 自動連番（メニュー数字）の円形バッジ表現 */
.side-menu a::before {
    counter-increment: menu-number;
    content: counter(menu-number);
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: var(--fw-extra-bold);
    font-family: var(--main-font);
    line-height: 1;
    transition: all 0.2s ease-out;
}

/* ホバー時、およびアクティブ（現在地）選択時のボタン背景変化 */
.side-menu a:hover, 
.side-menu a.is-active {
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    color: var(--color-text-main);
}

/* ホバー時、およびアクティブ選択時の内部メニュー数字の色反転 */
.side-menu a:hover::before, 
.side-menu a.is-active::before {
    background: rgb(var(--rgb));
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* --- アコーディオン：全体コンテナ --- */
.accordion-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 0 16px;
}
.accordion-item { margin-bottom: 16px; border-radius: var(--radius-panel); color: rgba(var(--rgb), 1); transition: var(--tr-form); }
.accordion-item.s1  { --bg-color: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%); --rgb: 0, 64, 128; }
.accordion-item.s2  { --bg-color: linear-gradient(135deg, #e9f9f0 0%, #ccefd9 100%); --rgb: 0, 102, 51; }
.accordion-item.s3  { --bg-color: linear-gradient(135deg, #fff4e6 0%, #ffe0cc 100%); --rgb: 153, 77, 0; }
.accordion-item.s4  { --bg-color: linear-gradient(135deg, #f0f0ff 0%, #ddddff 100%); --rgb: 51, 51, 102; }
.accordion-item.s5  { --bg-color: linear-gradient(135deg, #ffe6f0 0%, #ffccd5 100%); --rgb: 153, 51, 102; }
.accordion-item.s6  { --bg-color: linear-gradient(135deg, #f0ffe6 0%, #ddffcc 100%); --rgb: 51, 102, 0; }
.accordion-item.s7  { --bg-color: linear-gradient(135deg, #f9f0e9 0%, #eddcd0 100%); --rgb: 128, 64, 0; }
.accordion-item.s8  { --bg-color: linear-gradient(135deg, #e6fff5 0%, #ccffe6 100%); --rgb: 30, 120, 100; }
.accordion-item.s9  { --bg-color: linear-gradient(135deg, #fef6e4 0%, #fdecc8 100%); --rgb: 166, 94, 0; }
.accordion-item.s10 { --bg-color: linear-gradient(135deg, #f3e6ff 0%, #e6ccff 100%); --rgb: 75, 0, 130; }
.accordion-item.s11 { --bg-color: linear-gradient(135deg, #ffe6ea 0%, #ffccd5 100%); --rgb: 180, 50, 70;  }
.accordion-item.s12 { --bg-color: linear-gradient(135deg, #fffae6 0%, #fff0b3 100%); --rgb: 150, 110, 20; }
.accordion-item.s13 { --bg-color: linear-gradient(135deg, #e6fff2 0%, #b3ffd9 100%); --rgb: 30, 140, 90;  }

/* --- アコーディオン：タイトル（見出しパネル） --- */
.accordion-title {
    position: relative;
    margin: 0;
    padding: 18px 24px;
    background: var(--bg-color);
    border-radius: var(--radius-panel);
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: rgba(var(--rgb), 1);
    text-align: left;
    cursor: pointer;
    transition: var(--tr-form);
    box-shadow: 
        2px 2px 5px rgba(var(--rgb), 0.2), 
        -2px -2px 5px rgba(255, 255, 255, 1);
}

/* タイトルホバー時：シャドウを強めて浮き出る演出 */
.accordion-title:hover {
    box-shadow: 
        4px 4px 10px rgba(var(--rgb), 0.25), 
        -2px -2px 5px rgba(255, 255, 255, 1);
}

/* タイトルアクティブ（展開中）時：下側の角丸を削り、影を消去 */
.accordion-title.active {
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    box-shadow: none;
}

/* --- アコーディオン：コンテンツ（開閉エリア） --- */
.accordion-content {
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    max-height: 0;
    padding: 0 24px;
    font-size: var(--fz-medium);
    line-height: 1.6;
    color: rgba(var(--rgb), 1);
    background: transparent;
    border-radius: 0;
    transition: 
        max-height 0.2s ease-out, 
        padding 0.2s ease-out, 
        opacity 0.2s ease-out, 
        visibility 0.2s;
}

/* コンテンツアクティブ（展開中）時：要素を見せ、背景や下側の角丸を適用 */
.accordion-content.active {
    opacity: 1;
    visibility: visible;
    max-height: none;
    padding: 24px;
    border-top: 1px dashed rgba(var(--rgb), 0.15);
    background: var(--bg-color);
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

/* --- ログイン・エラー画面専用スタイル --- */
.is-login-screen body { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
}
.is-login-screen .body_tbl { 
    max-width: 450px; 
    border-radius: 1.5rem; 
}
.is-login-screen dl { 
    position: relative; 
}
.is-login-screen dl:nth-of-type(1)::before, 
.is-login-screen dl:nth-of-type(2)::before { 
    position: absolute; 
    left: 20px; 
    top: 45px; 
    z-index: 10; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 800; 
    color: #004080; 
    opacity: 0.4; 
}
.is-login-screen dl:nth-of-type(1)::before { content: "\\f007"; }
.is-login-screen dl:nth-of-type(2)::before { content: "\\f023"; }
.is-login-screen .input { padding: 0.8rem 1rem 0.8rem 3rem; }
.is-login-screen p.header_emesg { 
    font-size: var(--fz-semi-medium); 
    color: var(--color-error-main); 
}
.is-login-screen .button {
    background-color: #004080 !important;
    box-shadow: 0 4px 12px rgba(0, 64, 128, 0.3) !important;
}
.is-login-screen .button:hover {
    opacity: 0.8;
    background-color: #004080 !important;
}

/* --- 事務局更新フォーム専用スタイル --- */
.is-office-screen body {
    margin-left: var(--nav-width);
}
.is-office-screen .accordion-container {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 4px;
    padding: 0;
}

/* --- 切替スイッチUI：コンテナ全体 --- */
.office-mode-switcher {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #2d3748;
    user-select: none;
    transition: 
        background-color 0.3s, 
        border-color 0.3s, 
        color 0.3s;
}

/* ダークモード時のスイッチ外枠の変化 */
.office-dark-active .office-mode-switcher {
    background: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* --- トグルスイッチの構造 --- */
.mode-switch-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

/* 内部のチェックボックスを完全に隠す */
.mode-switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* スイッチの背景（土台部分） */
.mode-switch-slider {
    position: absolute;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 34px;
    transition: 0.3s;
}

/* スイッチのつまみ（丸いボタン部分） */
.mode-switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

/* ダークモードON時：土台の背景色をブランドカラーに反転 */
.office-dark-active .mode-switch-slider {
    background-color: var(--color-blue-brand);
}

/* ダークモードON時：つまみを右側へスライドさせ、色を漆黒に変更 */
.office-dark-active .mode-switch-slider:before {
    transform: translateX(16px);
    background-color: #0d1117;
}

/* ==========================================================================
    ★ 変更追加：事務局ダークモード専用UI（.office-dark-active連動）
       白の透過レイヤー（エレベーション設計）＆ 純粋漆黒ソリッド背景
   ========================================================================== */

/* 【階層 0】一番奥のベース：無駄なグラデーションを完全排除したピュアな漆黒 */
.office-dark-active body {
    background-color: #0d1117 !important;
}
.office-dark-active body::before {
    background-color: #0d1117 !important;
    background-image: none !important; /* グラデーション光を完全にカット */
}

/* 【階層 2】手前に浮かび上がるメインフォーム土台：白透過率「8%」のエレベーション */
.office-dark-active .body_tbl { 
    background-color: rgba(255, 255, 255, 0.08) !important; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
}

/* フォーム内部テキストの視認性反転 */
.office-dark-active h1, 
.office-dark-active dt.title, 
.office-dark-active .data.real::after, 
.office-dark-active table.smp-card-list td { 
    color: #f0f6fc !important; 
}
.office-dark-active h1 .sub-title-accent, 
.office-dark-active .header_text, 
.office-dark-active .header_rmesg, 
.office-dark-active span.caution, 
.office-dark-active span.sample { 
    color: #8b949e !important; 
}
.office-dark-active .cf li { 
    color: #ffffff !important; 
}
.office-dark-active input.submit,
.office-dark-active .button { 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}
/* 【階層 1.5】土台より1段沈んで見える入力欄：白透過率を低めの「4%」に制御 */
.office-dark-active .input, 
.office-dark-active textarea, 
.office-dark-active select { 
    background-color: rgba(255, 255, 255, 0.04) !important; 
    border-color: rgba(255, 255, 255, 0.08) !important; 
    color: #c9d1d9 !important; 
}

/* 【階層 3】フォーカス/ホバー：光が当たって一番手前に浮き出る白透過率「15%」 */
.office-dark-active .input:focus, 
.office-dark-active textarea:focus, 
.office-dark-active select:focus { 
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--color-blue-brand) !important; 
    box-shadow: 0 0 0 4px rgba(56, 139, 253, 0.3) !important; 
}

/* select（プルダウン）のフォーカス時だけ、透過させずに色を完全固定 */
.office-dark-active select:focus { 
    background-color: #21262d !important;
}
.office-dark-active .smp_tmpl input[readonly] { 
    background-color: rgba(255, 255, 255, 0.06) !important; 
    color: var(--color-blue-brand) !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* リスト・各種データテーブルの透過補正 */
.office-dark-active table.smp-card-list { 
    border-color: rgba(255, 255, 255, 0.08) !important; 
    background-color: rgba(255, 255, 255, 0.02) !important; 
}
.office-dark-active table.smp-card-list th { 
    background: rgba(255, 255, 255, 0.06) !important; 
    color: #f0f6fc !important; 
    border-color: rgba(255, 255, 255, 0.08) !important; 
}
.office-dark-active table.smp-card-list td { 
    border-color: rgba(255, 255, 255, 0.08) !important; 
}
.office-dark-active .data.file input[type="file"] { 
    background-color: rgba(255, 255, 255, 0.02) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important; 
    color: #8b949e !important; 
}

/* ── アコーディオン専用透過レイヤー処理 ── */
/* 影をフラットにクリア */
.office-dark-active .accordion-item, 
.office-dark-active .accordion-title { 
    box-shadow: none !important; 
}

/* 【階層 2.5】開いた中身のパネル：手前にリッチに浮かせる白透過率「10%」 */
.office-dark-active .accordion-content.active { 
    background: rgba(255, 255, 255, 0.10) !important; 
    border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
}
.office-dark-active .accordion-content.active span.caution, 
.office-dark-active .accordion-content.active span.sample { 
    color: #9ca3af !important; 
}


/* ==========================================================================
   8. レスポンシブメディアクエリ（Mobile Optimizations）
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* --- ラジオボタン・チェックボックスを1列（縦並び）に変更 --- */
    ul.radio.cf, 
    .data.multi2 ul.cf { 
        grid-template-columns: 1fr; 
    }
    
    /* --- スマホ環境でのボトムバー切替時の余白調整 --- */
    .is-office-screen body {
        margin: auto;
        margin-bottom: var(--nav-width);
    }

    /* 固定サイドバーをスマホ用の「下部固定ボトムバー」へコンバート */
    .side-header { 
        position: fixed; 
        top: auto; 
        bottom: 0; 
        left: 0; 
        z-index: 100; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: row; 
        width: 100% !important; 
        height: 60px; 
        background: #2d3748 !important; 
        box-shadow: 0 -4px 16px rgba(44, 58, 78, 0.12); 
        padding: 0 8px; 
    }

    .side-menu { 
        flex-direction: row; 
        justify-content: space-around; 
        align-items: center; 
        height: 100%; 
        gap: 0; 
    }

    .side-menu a { 
        flex: 1; 
        height: 48px !important; 
        justify-content: center; 
    }

    /* スマホでは連番数字のバッジをすっきり非表示化 */
    .side-menu a::before { 
        display: none; 
    }

    /* --- アコーディオンのスマホ最適化（余白と角丸の微調整） --- */
    .accordion-container { 
        padding: 0 12px; 
        margin: 12px auto; 
    }

    .accordion-item { 
        margin-bottom: 12px; 
    }

    .accordion-title { 
        padding: 14px 18px; 
        font-size: var(--fz-medium); 
        border-radius: var(--radius-item); 
    }

    .accordion-title.active { 
        border-radius: var(--radius-item) var(--radius-item) 0 0; 
    }

    .accordion-content { 
        border-radius: 0; 
        padding: 0 18px; 
    }

    .accordion-content.active { 
        border-radius: 0 0 var(--radius-item) var(--radius-item); 
        padding: 18px; 
    }

    /* --- ベースフォーム・フォントサイズの微調整 --- */
    body { 
        padding: 16px 12px; 
    }

    .body_tbl { 
        padding: 30px 20px; 
    }

    h1 { 
        font-size: 20px; 
    }

    input.submit, 
    .button { 
        max-width: 100%; 
    }

    /* --- スマホ専用・テーブルをカード型レイアウトへ解体する最適化 --- */
    /* テーブルヘッダー（thead）を画面から見えないように安全にクリップ */
    table.smp-card-list thead { 
        position: absolute; 
        width: 1px; 
        height: 1px; 
        padding: 0; 
        margin: -1px; 
        overflow: hidden; 
        clip: rect(0, 0, 0, 0); 
        border: 0; 
    }

    /* すべてのテーブル要素をブロック化して縦に潰す */
    table.smp-card-list, 
    table.smp-card-list tbody, 
    table.smp-card-list tr, 
    table.smp-card-list th, 
    table.smp-card-list td { 
        display: block; 
        width: 100%; 
        box-shadow: none; 
        border: none; 
    }

    /* 1行分（tr）を1つの独立したカードとしてデザインする */
    table.smp-card-list tr { 
        background-color: #f8fafc; 
        border: 2px solid #e2e8f0; 
        border-radius: var(--radius-item); 
        margin-bottom: 16px; 
        padding: 14px; 
        box-shadow: var(--shadow-input); 
    }

    /* カード内の見出しとなるセル */
    table.smp-card-list tr th { 
        font-size: var(--fz-medium); 
        font-weight: var(--fw-extra-bold); 
        color: var(--color-text-main); 
        background-color: transparent; 
        padding: 0 0 8px 0; 
        border-bottom: 2px dashed #cbd5e1; 
        margin-bottom: 10px; 
        text-align: left; 
    }

    /* 各データセルをフレックスにして左右対比（項目名：値）にする */
    table.smp-card-list tr td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 6px 0; 
        background-color: transparent; 
        font-size: var(--fz-semi-medium); 
        font-weight: var(--fw-bold); 
        color: var(--color-text-main); 
    }

    /* 疑似要素（::before）を使って、消去したヘッダーの代わりに項目ラベルを注入 */
    table.smp-card-list tr td:nth-of-type(1)::before { 
        content: "・資本金の額（又は出資の総額）: "; 
        font-weight: var(--fw-medium); 
        color: var(--color-text-sub); 
    }

    table.smp-card-list tr td:nth-of-type(2)::before { 
        content: "・常時使用する従業員の数: "; 
        font-weight: var(--fw-medium); 
        color: var(--color-text-sub); 
    }
    
    /* スイッチの位置をスマホ用に微調整 */
    .office-mode-switcher { 
        top: 12px; 
        right: 12px; 
        padding: 4px 10px; 
    }
}
`;
}