// ==========================================================================
// SPIRAL Form Core Engine (Theme / Auto Form Component / Dark Mode)
// フォーム用統合コアエンジン（テーマ自動適用・アコーディオン・スクロール・ダークモード制御）
//
// 【概要】
// SPIRALのフォーム画面（申請フォーム、確認画面、事務局用画面、ログイン画面など）に対し、
// デザインテーマの自動適用、アコーディオンパーツ制御、サイドナビゲーションの
// スムーススクロール、および事務局用ダークモード切替機能を統合実行するコアライブラリです。
// ==========================================================================
(() => {
    'use strict';

    // ==========================================================================
    // 1. マスターデータ・設定定義
    // ==========================================================================
    
    /**
     * 期・種別ごとのカラーパレット定義テーブル
     * 判定されたテーマIDに応じて、CSSカスタム変数 (--rgb, --color-accent 等) を動的書き換え
     * @type {Object<string, {bgOuter: string, bgOuterDark: string, accent: string, rgb: string}>}
     */
    const THEME_PALETTES = {
        'default': { bgOuter: '#f0f4f8', bgOuterDark: '#cbd5e1', accent: '#788896', rgb: '51, 65, 85' },

        's1':  { bgOuter: '#e6f2ff', bgOuterDark: '#cce5ff', accent: '#90caf9', rgb: '0, 64, 128' },
        's2':  { bgOuter: '#e9f9f0', bgOuterDark: '#cbebd5', accent: '#81c784', rgb: '0, 102, 51' },
        's3':  { bgOuter: '#fff4e6', bgOuterDark: '#ffdcb3', accent: '#ffb74d', rgb: '153, 77, 0' },
        's4':  { bgOuter: '#f0f0ff', bgOuterDark: '#dadaff', accent: '#9fa8da', rgb: '24, 43, 115' },
        's5':  { bgOuter: '#ffe6ea', bgOuterDark: '#ffccbe', accent: '#ff8093', rgb: '180, 50, 70' },
        's6':  { bgOuter: '#fffae6', bgOuterDark: '#fff0be', accent: '#ffd54f', rgb: '130, 85, 0' },
        's7':  { bgOuter: '#ffe6f0', bgOuterDark: '#ffccd5', accent: '#f48fb1', rgb: '153, 51, 102' },
        's8':  { bgOuter: '#f9f0e9', bgOuterDark: '#edd3bf', accent: '#ffcca3', rgb: '120, 50, 10' }, 
        's9':  { bgOuter: '#f0ffe6', bgOuterDark: '#d3f5cc', accent: '#a5d6a7', rgb: '51, 102, 0' },
        's10': { bgOuter: '#f3e6ff', bgOuterDark: '#e3ccff', accent: '#b39ddb', rgb: '75, 0, 130' },
        's11': { bgOuter: '#fef6e4', bgOuterDark: '#fbe3af', accent: '#ffcc80', rgb: '140, 70, 0' },
        's12': { bgOuter: '#e6fff5', bgOuterDark: '#ccffd9', accent: '#80cbc4', rgb: '0, 102, 128' },
        's13': { bgOuter: '#e6fff2', bgOuterDark: '#bdfcd9', accent: '#80e2b3', rgb: '15, 110, 70' }
    };

    /**
     * ページタイトル文字列からテーマIDを自動判定するためのキーワードマッピング
     * @type {Array<{keys: string[], id: string}>}
     */
    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" }
    ];

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

    /**
     * サブウィンドウ（ポップアップ）を指定サイズで開く
     * ※ HTML側の onclick 属性から呼び出せるよう window オブジェクトへ公開
     * @param {string} url - 対象URL
     */
    window.openNewWindow = function(url) {
        window.open(url, '_blank', 'width=768,height=768');
    };

    /**
     * 全角英数字を半角英数字へ正規化（表記揺れによるテーマ判定漏れを防止）
     * @param {string} text - 対象文字列
     * @returns {string} 変換後の文字列
     */
    function convertToHalfWidth(text) {
        if (!text) return "";
        return text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xFEE0));
    }

    /**
     * タイトルテキストに含まれるキーワードから該当するテーマID（s1〜s13）を検出
     * @param {string} text - 判定対象のテキスト
     * @returns {string} 該当したテーマID（未合致時は 'default'）
     */
    function detectThemeId(text) {
        const safeText = text || "";
        const normalizedText = convertToHalfWidth(safeText.toLowerCase());

        const matched = THEME_KEYWORDS.find(item => 
            item.keys.some(key => normalizedText.includes(key.toLowerCase()))
        );

        return matched ? matched.id : 'default';
    }

    /** 
     * @type {string|null} 現在適用中のテーマID（重複書き換え・不要なReflowを抑止するためのキャッシュ） 
     */
    let currentAppliedThemeId = null;

    /**
     * HTMLルート要素 (<html>) のCSSカスタム変数を書き換えてテーマカラーを一括更新
     * @param {string} themeId - 適用するテーマID
     */
    function updateThemeVars(themeId) {
        if (currentAppliedThemeId === themeId) return;

        const theme = THEME_PALETTES[themeId] || THEME_PALETTES['default'];
        const rootEl = document.documentElement;
        if (!rootEl) return;

        rootEl.style.setProperty('--rgb', theme.rgb);
        rootEl.style.setProperty('--color-accent', theme.accent);
        rootEl.style.setProperty('--bg-outer', theme.bgOuter);
        rootEl.style.setProperty('--bg-outer-dark', theme.bgOuterDark);

        currentAppliedThemeId = themeId;
    }

    /**
     * 本エンジン共通のデザインCSSを <head> 内へ動的注入（二重読み込み防止機能付き）
     */
    function injectBaseStyles() {
        if (document.getElementById('spiral-core-theme-style')) return;
        const style = document.createElement('style');
        style.id = 'spiral-core-theme-style';
        style.textContent = getStyleContent();
        document.head.appendChild(style);
    }

    // ==========================================================================
    // 3. UIコンポーネント制御（アコーディオン・イージング・サイドナビ・ショートカット）
    // ==========================================================================

    /**
     * アコーディオン要素 (.accordion-item) へテーマ別カラークラス (s1〜s13) を自動補完
     */
    function initAccordionClasses() {
        document.querySelectorAll('.accordion-item').forEach((item, index) => {
            const hasStyleClass = Array.from(item.classList).some(c => /^s\d+$/.test(c));
            if (!hasStyleClass) item.classList.add(`s${(index % 13) + 1}`);
        });
    }

    /**
     * アコーディオンの開閉クリックイベントを文書全体へ登録
     */
    function initAccordionEvents() {
        if (window._accordionEventBound) return;
        window._accordionEventBound = true;

        document.addEventListener('click', (e) => {
            const title = e.target.closest('.accordion-title');
            if (!title) return;
            const content = title.nextElementSibling;
            if (!content || !content.classList.contains('accordion-content')) return;

            const isActive = title.classList.contains('active');
            title.classList.toggle('active');
            content.classList.toggle('active');
            title.setAttribute('aria-expanded', !isActive);
        });
    }

    /**
     * イージング関数（easeOutCubic）を用いたスムーズスクロール処理
     * @param {number} to - スクロール先のY座標
     * @param {number} duration - アニメーション時間 (ms)
     */
    function smoothScrollTo(to, duration) {
        const start = window.pageYOffset;
        const change = to - start;
        const startTime = performance.now();

        const easeOutCubic = (t, b, c, d) => {
            const normT = (t / d) - 1;
            return c * (normT * normT * normT + 1) + b;
        };

        function animate(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed, duration);
            const val = easeOutCubic(progress, start, change, duration);
            window.scrollTo(0, val);

            if (progress < duration) {
                requestAnimationFrame(animate);
            }
        }
        requestAnimationFrame(animate);
    }

    /**
     * サイドナビメニュー要素クリック時、該当ブロックのY位置へ移動（アコーディオンの自動展開含む）
     * @param {HTMLElement} linkElement - クリックされたアンカー要素
     */
    function executeMenuClick(linkElement) {
        if (!linkElement) return;

        const HEADER_OFFSET = 80;
        const DURATION = 100;
        const linkText = linkElement.cloneNode(true).textContent.replace(/[0-9]/g, '').trim().toLowerCase();
        let targetElement = null;

        const allDts = document.querySelectorAll('.smp_tmpl dt.title, .smp_tmpl dt');
        const allDtsArray = Array.from(allDts);

        if (linkText === 'info') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('管理番号') || dt.textContent.includes('登録日時'));
            if (!targetElement) targetElement = document.querySelector('.smp_tmpl dl');
        } 
        else if (linkText === 'contact') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('電話番号'));
        }
        else if (linkText === 'bank') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('振込先金融機関'));
        } 
        else if (linkText === 'docs') {
            const matchedDts = allDtsArray.filter(dt => 
                dt.textContent.includes('履歴事項') || dt.textContent.includes('書類')
            );
            targetElement = matchedDts.find(dt => {
                return dt.offsetWidth > 0 || dt.offsetHeight > 0 || dt.getClientRects().length > 0;
            });
        } 
        else if (linkText === 'office') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('備考欄'));
        }
        else if (linkText === 'notice') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('通知書'));
        }

        if (!targetElement) return;

        const parentContent = targetElement.closest('.accordion-content');
        if (parentContent && !parentContent.classList.contains('active')) {
            const parentTitle = parentContent.previousElementSibling;
            if (parentTitle) {
                parentTitle.classList.add('active');
                parentContent.classList.add('active');
                parentTitle.setAttribute('aria-expanded', 'true');
            }
        }

        const targetY = targetElement.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET;
        smoothScrollTo(targetY, DURATION);
    }

    /**
     * サイドナビゲーションのクリックイベントをバインド（重複登録防止機能付き）
     */
    function initSideNavigation() {
        const menuLinks = document.querySelectorAll('.side-menu a');
        
        menuLinks.forEach((link) => {
            if (link.dataset.navBound) return;
            link.dataset.navBound = "true";

            const text = link.textContent.trim();
            if (!text.includes('Sheet') && !link.hasAttribute('onclick')) {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    executeMenuClick(link);
                });
            }
        });
    }

    /**
     * 数字キー「1〜9」によるサイドナビ操作ショートカットイベントの登録（入力フォームフォーカス時は非発火）
     */
    function initKeyShortcut() {
        if (window._keyShortcutBound) return;
        window._keyShortcutBound = true;

        const DURATION = 100;

        window.addEventListener('keydown', (e) => {
            const activeEl = document.activeElement ? document.activeElement.tagName : "";
            if (activeEl === 'INPUT' || activeEl === 'TEXTAREA' || activeEl === 'SELECT') {
                return;
            }

            const keyIndex = parseInt(e.key, 10);
            const menuLinks = Array.from(document.querySelectorAll('.side-menu a'));
            
            if (keyIndex >= 1 && keyIndex <= menuLinks.length) {
                const targetLink = menuLinks[keyIndex - 1];
                if (targetLink) {
                    e.preventDefault();
                    targetLink.classList.add('is-active');
                    targetLink.click();

                    setTimeout(() => {
                        targetLink.classList.remove('is-active');
                        targetLink.blur();
                    }, DURATION);
                }
            }
        });
    }

    /**
     * ファイル添付（input[type="file"]）の新規選択時に、
     * 入力保持のまま選択を解除する「新規添付用クリアボタン」を独立して生成・制御する
     */
    function initFileClearButtons() {
        // smp_tmpl 内のファイル入力要素をすべて取得
        const fileInputs = document.querySelectorAll('.smp_tmpl dd.file input[type="file"], .smp_tmpl .data.file input[type="file"]');

        fileInputs.forEach(fileInput => {
            // 二重生成防止
            if (fileInput.dataset.clearBtnBound) return;
            fileInput.dataset.clearBtnBound = "true";

            // クリアボタン（input.clear）を動的生成
            const clearBtn = document.createElement('input');
            clearBtn.type = 'button';
            clearBtn.className = 'clear';
            clearBtn.value = 'クリア';

            // 初期状態：フォーム構築時に選択済みファイル(files)が存在すれば表示、なければ非表示
            clearBtn.style.display = fileInput.files && fileInput.files.length > 0 ? 'inline-block' : 'none';

            // ファイルが選択されたらボタンを表示、空になったら非表示
            fileInput.addEventListener('change', () => {
                if (fileInput.files && fileInput.files.length > 0) {
                    clearBtn.style.display = 'inline-block';
                } else {
                    clearBtn.style.display = 'none';
                }
            });

            // クリアボタンが押された時の処理（他の入力値を維持したままファイルのみ解除）
            clearBtn.addEventListener('click', (e) => {
                e.preventDefault();
                fileInput.value = ''; // ファイル選択を空にする
                clearBtn.style.display = 'none'; // ボタンを非表示に戻す

                // CSSの変更検知やSPIRAL内部挙動との同期用イベント発火
                fileInput.dispatchEvent(new Event('change', { bubbles: true }));
            });

            // ファイル入力欄の直後にクリアボタンを挿入
            fileInput.parentNode.insertBefore(clearBtn, fileInput.nextSibling);
        });
    }

    /**
     * ファイル削除チェックが付いた状態での送信時に確認アラートを表示
     */
    function initFileDeleteConfirm() {
        const submitButtons = document.querySelectorAll('input.submit, .button[type="submit"]');

        submitButtons.forEach(btn => {
            if (btn.dataset.deleteConfirmBound) return;
            btn.dataset.deleteConfirmBound = "true";

            btn.addEventListener('click', (e) => {
                const checkedBoxes = document.querySelectorAll('dd.file label input[type="checkbox"]:checked');

                if (checkedBoxes.length > 0) {
                    const targetNames = [];
                    checkedBoxes.forEach(box => {
                        const dl = box.closest('dl');
                        const titleEl = dl ? dl.querySelector('dt.title, dt') : null;
                        let title = '添付ファイル';

                        if (titleEl) {
                            // 元のDOMに影響を与えないようクローンを作成
                            const clone = titleEl.cloneNode(true);
                            // 注記・必須バッジ・入力例などの装飾要素を除去
                            clone.querySelectorAll('.caution, .need, .sample').forEach(el => el.remove());
                            title = clone.textContent.trim().replace(/\s+/g, ' ');
                        }
                        targetNames.push(`・${title}`);
                    });

                    const message = [
                        '【注意】以下の添付ファイルに「削除」チェックが入っています。',
                        '',
                        targetNames.join('\n'),
                        '',
                        'このまま送信するとファイルが完全に削除されます。',
                        '本当に送信してもよろしいですか？'
                    ].join('\n');

                    if (!window.confirm(message)) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }
            });
        });
    }

    // ==========================================================================
    // 4. 画面判定 & テーマ最速適用
    // ==========================================================================

    /**
     * ページタイトル（document.title）のみから画面種別判定およびテーマカラーの一括適用
     */
    function initScreenAndTheme() {
        const pageTitle = document.title || "";
        const rootEl = document.documentElement;

        // タイトルに「事務局」が含まれていれば事務局画面と判定
        const isOffice = pageTitle.includes("事務局");
        const isLogin = pageTitle.includes("ログイン") || pageTitle.includes("ERROR");

        if (isOffice) {
            rootEl.classList.add("is-office-screen");
            if (localStorage.getItem('office-mode') === 'dark') {
                rootEl.classList.add('office-dark-active');
            }
        }

        if (isLogin) {
            rootEl.classList.add("is-login-screen");
            if (!document.getElementById('fa-cdn-link')) {
                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);
            }
        }

        // ページタイトルのみを判定ソースとしてテーマカラーを適用
        updateThemeVars(detectThemeId(pageTitle));
    }

    // ==========================================================================
    // 5. 実行エントリポイント (DOM最速キャッチ & イベント登録)
    // ==========================================================================

    // 【最速処理 1】DOM生成前の即時セットアップ
    initScreenAndTheme();
    injectBaseStyles();
    initAccordionClasses();
    initAccordionEvents();
    initKeyShortcut();

    /**
     * DOM構築完了時に実行する一括処理
     */
    const onDOMReady = () => {
        initSideNavigation();
        initFileClearButtons();
        initFileDeleteConfirm();
        const h1 = document.querySelector('h1');
        if (h1) formatH1Structure(h1);
        document.querySelectorAll('dt.title, dt').forEach(removeUnderlineText);
        
        injectModeSwitcher();
    };

    // 【最速処理 2】DOMツリー構築イベント & 実行
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', onDOMReady);
    } else {
        onDOMReady();
    }

    // ==========================================================================
    // 6. DOM加工ユーティリティ関数
    // ==========================================================================

    /**
     * dt要素内の不要なアンダースコア（_）以降の文字列を除去・整形
     * @param {HTMLElement} element - 対象のdt要素
     */
    function removeUnderlineText(element) {
        for (let node of element.childNodes) {
            if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('_')) {
                node.textContent = node.textContent.split('_')[0].trim();
            }
        }
    }

    /**
     * 特定のH1タイトルテキストを2段組構造へ整形・クラス付与
     * @param {HTMLElement} h1Element - 対象のH1要素
     */
    function formatH1Structure(h1Element) {
        if (!h1Element || h1Element.querySelector('.sub-title-accent')) return;

        const rawText = h1Element.innerHTML;
        if (rawText.includes('広島県') && rawText.includes('特別高圧')) {
            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>`;
            }
        }
    }

    /**
     * 事務局画面用：ダークモード切替スイッチの動的生成およびイベント付与
     */
    function injectModeSwitcher() {
        const pageTitle = document.title || "";
        const rootEl = document.documentElement;
        
        const isOffice = rootEl.classList.contains('is-office-screen') || pageTitle.includes("事務局");

        if (!isOffice || document.getElementById('office-toggle-container')) return;

        if (!document.body) {
            window.addEventListener('DOMContentLoaded', injectModeSwitcher);
            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) {
            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');
            }
        });
    }

    // ==========================================================================
    // 7. スタイルシート定義 (静的CSSモジュール注入用)
    // ==========================================================================

    function getStyleContent() {
        return `
/* ==========================================================================
   7-1. デザインシステム変数定義 (Design Tokens)
   ========================================================================== */
:root {
    /* JS(updateThemeVars)から動的に書き換えられるコアカラー変数 */
    --rgb: 51, 65, 85;
    --color-brand: rgb(var(--rgb));
    --glow: rgba(var(--rgb), 0.25);
    --color-accent: #788896;
    --bg-outer: #f0f4f8;
    --bg-outer-dark: #cbd5e1;

    /* テキスト・背景基本カラー */
    --color-text-main: #1e293b;
    --color-text-sub: #475569;

    /* カラーパレット：カード・ヘッダー・入力背景 */
    --bg-card: rgba(255, 255, 255, 0.94);
    --bg-header: color-mix(in srgb, rgb(var(--rgb)) 8%, var(--bg-outer));
    --bg-light: color-mix(in srgb, var(--bg-outer) 70%, rgba(241, 245, 249, 0.8));
    --bg-focus: color-mix(in srgb, rgb(var(--rgb)) 3%, #ffffff);

    /* バリデーション・エラーカラー */
    --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-small: 8px;
    --radius-item: 16px;
    --radius-panel: 24px;

    /* シャドウ・レイアウト値 */
    --box-shadow-normal: 
        2px 2px 4px color-mix(in srgb, rgb(var(--rgb)) 15%, transparent), 
        -2px -2px 4px color-mix(in srgb, #ffffff 60%, transparent);

    --box-shadow-raise: 
        4px 4px 10px color-mix(in srgb, rgb(var(--rgb)) 20%, transparent), 
        -4px -4px 10px color-mix(in srgb, #ffffff 90%, transparent);

    --box-shadow-glow: 
        0 0 8px color-mix(in srgb, rgb(var(--rgb)) 40%, transparent), 
        0 0 16px color-mix(in srgb, rgb(var(--rgb)) 15%, transparent), 
        inset 0 0 4px color-mix(in srgb, rgb(var(--rgb)) 20%, transparent);

    --box-shadow-inset: 
        inset 2px 2px 4px color-mix(in srgb, rgb(var(--rgb)) 18%, transparent), 
        inset -2px -2px 4px color-mix(in srgb, #ffffff 60%, transparent);

    --box-shadow-focus: 
        inset -1px -1px 3px color-mix(in srgb, #ffffff 80%, transparent), 
        inset 1px 1px 3px color-mix(in srgb, #000000 5%, transparent), 
        0 0 18px color-mix(in srgb, rgb(var(--rgb)) 50%, transparent);

    --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-fast: 0.1s;        /* 即時リアクション用 */
    --dur-normal: 0.2s;
    --dur-smooth: 0.3s;
    --ease-snappy: ease-out;
    --tr-form: all var(--dur-fast) var(--ease-snappy);
}

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

/* ==========================================================================
   7-2. ベースリセット & 全体レイアウトスタイル
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 50px 20px;
    background-color: var(--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;
   /* 再読み込み時のちらつきを隠す */
    opacity: 0;
    animation: fadeIn var(--dur-smooth) ease-out forwards;
}

/* 背景グラデーションオーバーレイ */
body::before {
    content: "";
    position: fixed; 
    inset: 0;        
    z-index: -1;     
    background-color: var(--bg-outer);
    background-image: radial-gradient(at 50% 0%, #ffffff 0px, transparent 70%);
    pointer-events: none; 
}

/* 共通アンカーリンク装飾 */
a {
    color: var(--card-color, rgba(var(--rgb), 0.8));
    font-weight: var(--fw-bold);
    text-decoration: none;
    word-break: break-word;
    transition: var(--tr-form);
}

a:hover,
a:focus-visible {
    outline: none;
    color: var(--color-accent);
}

a:active {
    color: rgba(var(--rgb), 0.7);
}

/* ==========================================================================
   7-3. 全体レイアウト構造 & ヘッダー・見出し装飾
   ========================================================================== */
/* メインフォームカードコンテナ (.body_tbl) */
.body_tbl {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 45px 40px;
    background: var(--bg-card);
    border-radius: var(--radius-panel);
    box-shadow: 0 0 0 1px rgba(var(--rgb), 0.1), 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    text-align: center;
    overflow: hidden;
    contain: content;
}

/* メインページタイトル (H1) */
h1 {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 22px;
    font-weight: var(--fw-extra-bold);
    text-align: center;
    line-height: 1.4;
}

h1:not(:has(.sub-title-accent)) br {
    display: none;
}

/* 2段組整形タイトルのサブテキスト部分 */
h1 .sub-title-accent {
    display: block;
    margin-top: 10px;
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-medium);
    color: #475569;
    line-height: 1.4;
    letter-spacing: normal;
}

/* セクション見出し (H2.title) */
h2.title {
    display: block;
    width: 100%;
    margin: 40px 0 24px 0;
    padding: 12px 24px;
    background: var(--color-accent); 
    border: none;
    border-radius: 100px; 
    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);
}

/* フォームヘッダーメッセージ領域 */
.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-brand);
}

/* ==========================================================================
   7-4. フォーム要素・入力フィールド装飾
   ========================================================================== */
/* SPIRAL標準フォームテンプレート枠 */
.smp_tmpl {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

.smp_tmpl dl {
    margin: 0 0 24px 0;
    padding: 0;
}

/* 項目ラベル (dt.title) */
dt.title {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding-left: 4px;
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
}

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

/* セレクトボックスの矢印カスタムアイコン */
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-accent);
    box-shadow: 0 0 0 4px rgba(155, 186, 219, 0.2);
}

/* 多行テキスト入力エリア (textarea) */
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;
}

/* 管理コード系フィールドの等幅フォント指定 */
.smp_tmpl input[name="f014134805"],
.smp_tmpl input[name="f014134752"] {
    font-family: var(--code-font);
}

/* 読み取り専用フィールド (input[readonly]) */
.smp_tmpl input[readonly],
.smp_tmpl input[readonly]:focus {
    width: 100%;
    max-width: 200px;
    padding: 10px 16px;
    background-color: var(--bg-outer);
    border: none;
    border-radius: var(--radius-item);
    box-shadow: none; 
    font-family: var(--code-font);
    font-size: var(--fz-body);
    font-weight: var(--fw-extra-bold);
    color: var(--color-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);
}

/* 数値入力欄の単位自動付与 (:after) */
.data.real::after {
    display: inline-block;
    white-space: nowrap;
    order: 1;
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
}
.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);
}

.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;
}

.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;
}

.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);
}

.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);
}

.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; }

/* ファイル添付エリア (.data.file) のドロップゾーン風カスタマイズ */
.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-brand);
    font-family: inherit;
    font-size: var(--fz-normal);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    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-accent);
    font-size: 2.2rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    pointer-events: none;
}

.data.file input[type="file"]:hover,
.data.file input[type="file"]:focus {
    background-color: #ffffff;
    border-color: var(--color-accent);
    outline: none;
}

dd.file img {
    vertical-align: sub;
    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;
    font-size: var(--fz-normal);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

/* ホバー時（少し浮かせる・色を濃く） */
dd.file input.clear:hover {
    background-color: #cbd5e1;
    color: #334155;
}

/* アクティブ（クリック・タップ）時：押し込みエフェクト */
dd.file input.clear:active {
    transform: translateY(1px) scale(0.96); /* 少し沈んで小さくなる */
    background-color: #94a3b8; /* しっかり押された感のある色に変化 */
    color: #0f172a;
}

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;
}

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 (.radio.cf) */
ul.radio.cf, .data.multi2 ul.cf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    width: 100%;
    margin: 6px 0 8px 0;
    padding: 0;
    list-style: none;
}

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, 
.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);
    cursor: pointer;
}

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

/* 未選択のホバー時・フォーカス時（選択中ではない時だけ反応） */
ul.radio.cf label:not(:has(input:checked)):hover,
ul.radio.cf label:not(:has(input:checked)):focus-within,
.data.multi2 ul.cf label:not(:has(input:checked)):hover,
.data.multi2 ul.cf label:not(:has(input:checked)):focus-within {
    border-color: var(--color-accent);
}

/* 選択済み (checked) 状態 */
ul.radio.cf label:has(input:checked), 
.data.multi2 label:has(input:checked) {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: none;
}

ul.radio.cf label:has(input:checked) span, 
.data.multi2 label:has(input:checked) span {
    color: #FFF;
}

/* 事業者・業種1列表示 */
ul.radio.cf:has(input[name="f014134812"]), 
ul.radio.cf:has(input[name="f013738245"]) {
    grid-template-columns: 1fr;
    max-width: 100%;
}

/* ==========================================================================
   7-5. バリデーションエラー表示 & 不要項目の非表示設定
   ========================================================================== */
.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);
    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 {
    border-color: var(--color-error-border);
}

.smp_tmpl dl:has(.msg:not(:empty)) {
    background-color: var(--color-error-bg);
    padding: 16px;
    border: 2px solid var(--color-error-border);
    border-radius: var(--radius-item);
}

/* 初期表示時のチラつき防止（JS側で style 属性が指定されたらCSSの非表示を解除） */
.smp_tmpl dl:not([style*="display"]):has(input[name^="f014134805"]), /* 法人番号 */
.smp_tmpl dl:not([style*="display"]):has(input[name="f014137795"]),  /* 資本金 */
.smp_tmpl dl:not([style*="display"]):has(input[name^="f013735748"]), /* 入居している県内商業施設等又は工業団地名 */
.smp_tmpl dl:not([style*="display"]):has(input[name^="f013735770"]), /* 特別高圧電力を受電していることを証する書類 */
.smp_tmpl dl:not([style*="display"]):has(input[name^="f013735772"]), /* 商業施設等が受電していることを証する書類 */
.smp_tmpl dl:not([style*="display"]):has(input[name^="f013735773"]) { /* 電気料金を負担していることを証する書類 */
    display: none;
}

/* ==========================================================================
   7-6. フォームボタン & カード型テーブル (.smp-card-list) 装飾
   ========================================================================== */
/* メイン送信・決定ボタン (input.submit / .button) */
input.submit, 
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;
    min-height: 48px;
    margin: 40px auto;
    background-color: var(--color-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;
    text-decoration: none;
    transition: var(--tr-form);
}

input.submit:hover, 
.button:hover {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

input.submit:active, 
.button:active {
    box-shadow: var(--box-shadow-inset);
    transform: scale(0.98);
}

/* フォーム内インラインカード型データ表示テーブル (.smp-card-list) */
.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;
}

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

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

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

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

/* SPIRAL送信セキュリティシール表示エリア */
.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); }

/* ==========================================================================
   7-7. アコーディオンコンポーネント装飾 (.accordion-container)
   ========================================================================== */
/* アコーディオンパーツ定義 */
.accordion-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 0 16px;
}

.accordion-item { 
    margin-bottom: 16px; 
    border-radius: var(--radius-panel); 
    color: rgb(var(--rgb));
}

/* 各期別・種別専用アコーディオンカラー変数定義 (s1〜s13) */
.accordion-item.s1  { --bg-outer: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%); --rgb: 0, 64, 128; }
.accordion-item.s2  { --bg-outer: linear-gradient(135deg, #e9f9f0 0%, #cbebd5 100%); --rgb: 0, 102, 51; }
.accordion-item.s3  { --bg-outer: linear-gradient(135deg, #fff4e6 0%, #ffdcb3 100%); --rgb: 153, 77, 0; }
.accordion-item.s4  { --bg-outer: linear-gradient(135deg, #f0f0ff 0%, #dadaff 100%); --rgb: 24, 43, 115; }
.accordion-item.s5  { --bg-outer: linear-gradient(135deg, #ffe6ea 0%, #ffccbe 100%); --rgb: 180, 50, 70; }
.accordion-item.s6  { --bg-outer: linear-gradient(135deg, #fffae6 0%, #fff0be 100%); --rgb: 130, 85, 0; }
.accordion-item.s7  { --bg-outer: linear-gradient(135deg, #ffe6f0 0%, #ffccd5 100%); --rgb: 153, 51, 102; }
.accordion-item.s8  { --bg-outer: linear-gradient(135deg, #f9f0e9 0%, #edd3bf 100%); --rgb: 120, 50, 10; }
.accordion-item.s9  { --bg-outer: linear-gradient(135deg, #f0ffe6 0%, #d3f5cc 100%); --rgb: 51, 102, 0; }
.accordion-item.s10 { --bg-outer: linear-gradient(135deg, #f3e6ff 0%, #e3ccff 100%); --rgb: 75, 0, 130; }
.accordion-item.s11 { --bg-outer: linear-gradient(135deg, #fef6e4 0%, #fbe3af 100%); --rgb: 140, 70, 0; }
.accordion-item.s12 { --bg-outer: linear-gradient(135deg, #e6fff5 0%, #ccffd9 100%); --rgb: 0, 102, 128; }
.accordion-item.s13 { --bg-outer: linear-gradient(135deg, #e6fff2 0%, #bdfcd9 100%); --rgb: 15, 110, 70; }

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

.accordion-title.active {
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    box-shadow: none;
}

.accordion-title:hover {
    filter: brightness(0.98);
    box-shadow: 
        4px 4px 10px rgba(var(--rgb), 0.2), 
        -2px -2px 5px rgba(255, 255, 255, 1);
}

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

.accordion-content.active {
    opacity: 1;
    visibility: visible;
    max-height: none;
    padding: 24px;
    border-top: 1px dashed rgba(var(--rgb), 0.15);
    background: var(--bg-outer);
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

/* ==========================================================================
   7-8. 画面左固定サイドナビゲーション構造 (.side-header / .side-menu)
   ========================================================================== */
/* 左側固定サイドバーヘッダー枠 */
.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, var(--color-brand) 0%, var(--color-accent) 100%); }
.side-header.benefits { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-brand) 100%); }

/* サイドナビメニューリスト */
.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;
    cursor: pointer;
}

/* ナビボタン上の連番数字バッジ (1〜9) */
.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.2);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: var(--fw-extra-bold);
    font-family: var(--main-font);
    line-height: 1;
}

.side-menu a:hover, 
.side-menu a.is-active {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.side-menu a:hover::before, 
.side-menu a.is-active::before {
    background: var(--color-brand);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   7-9. 画面固有レイアウト補正 (ログイン画面 & 事務局管理画面)
   ========================================================================== */
/* ログイン画面専用レイアウト (.is-login-screen) */
.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;
}

.is-login-screen dl { 
    position: relative; 
}

/* ログイン入力欄用 FontAwesome アイコン挿入 (ユーザー / 鍵アイコン) */
.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) */
.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;
}

/* ==========================================================================
   7-10. 事務局画面専用ダークモードスタイル (.office-dark-active)
   ========================================================================== */
/* ダークモード用 Design Tokens (スコープ定義) */
.office-dark-active {
    --dark-bg-base: #0d1117;                            /* 最背面背景 */
    --dark-layer-card: rgba(255, 255, 255, 0.05);       /* メインカードコンテナ・アコーディオン展開部 */
    --dark-layer-item: rgba(255, 255, 255, 0.08);       /* input / textarea / select / file / ラジオ・チェックボタン */
    --dark-layer-active: rgba(255, 255, 255, 0.12);
    --dark-border-subtle: rgba(255, 255, 255, 0.15);
    --dark-text-high: #f0f6fc;                       /* H1・強調テキスト（最高明度） */
    --dark-text-main: #c9d1d9;                       /* 基本ボディテキスト */
    --dark-text-sub: #8b949e;                        /* サブテキスト・注記・注釈 */
}

/* ダークモード切替トグルスイッチコンテナ */
.office-mode-switcher {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 100px;
    box-shadow: 0 0 0 1px rgba(var(--rgb), 0.1), 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #2d3748;
    user-select: none;
    transition: 
        background-color var(--dur-smooth), 
        border-color var(--dur-smooth), 
        color var(--dur-smooth);
}

.office-dark-active .office-mode-switcher {
    background: rgba(13, 17, 23, 0.8);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
    color: var(--dark-text-main);
}

/* スイッチスライダーパーツ */
.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: var(--dur-smooth);
}

.mode-switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: var(--dur-smooth);
}

.office-dark-active .mode-switch-slider {
    background-color: var(--color-accent);
}

.office-dark-active .mode-switch-slider:before {
    transform: translateX(16px);
    background-color: var(--dark-bg-base);
}

/* ダークモード時：全体背景・カード枠・テキスト一括反転 */
.office-dark-active body {
    background-color: var(--dark-bg-base) !important;
    color: var(--dark-text-main) !important;
}

.office-dark-active body::before {
    background-color: var(--dark-bg-base) !important;
    background-image: none !important;
}

.office-dark-active a {
    color: var(--color-accent);
}

.office-dark-active .body_tbl { 
    background-color: var(--dark-layer-card) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) !important; 
}

/* メイン見出しのみ最高明度白で強調 */
.office-dark-active h1,
.office-dark-active h2.title {
    color: var(--dark-text-high) !important;
}

.office-dark-active dt.title {
    color: var(--dark-text-main) !important;
}

.office-dark-active h1 .sub-title-accent, 
.office-dark-active p, 
.office-dark-active span.caution, 
.office-dark-active span.sample,
.office-dark-active dd.file {
    color: var(--dark-text-sub) !important;
}

/* ラジオ・チェックボタン基本状態（未選択） */
.office-dark-active ul.radio.cf label, 
.office-dark-active .data.multi2 ul.cf label {
    background-color: var(--dark-layer-item) !important;
}

/* 選択済み (checked) 状態 */
.office-dark-active ul.radio.cf label:has(input:checked), 
.office-dark-active .data.multi2 label:has(input:checked) {
    background-color: var(--color-accent) !important;
}

.office-dark-active input.submit,
.office-dark-active .button { 
    background-color: var(--color-brand, #334155) !important;
    color: var(--dark-text-high) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.office-dark-active input.submit:hover,
.office-dark-active .button:hover { 
    background-color: var(--color-accent, #788896) !important;
    opacity: 0.9;
}

/* ダークモード時：入力要素 (input / textarea / select / file) 暗色化 */
.office-dark-active .input, 
.office-dark-active textarea, 
.office-dark-active select,
.office-dark-active .data.file input[type="file"] { 
    background-color: var(--dark-layer-item) !important; 
    border-color: rgba(255, 255, 255, 0.15) !important; 
    color: var(--dark-text-high) !important; 
}

.office-dark-active .input:focus, 
.office-dark-active textarea:focus, 
.office-dark-active select:focus { 
    background-color: var(--dark-layer-active) !important; 
    border-color: var(--color-accent, #788896) !important; 
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1) !important;
}

.office-dark-active select:focus { 
    background-color: #2a2d33 !important;
}

.office-dark-active .smp_tmpl input[readonly],
.office-dark-active .smp_tmpl input[readonly]:focus { 
    background-color: var(--dark-layer-item) !important;
    box-shadow: none !important;
    color: var(--color-accent) !important;
}

.office-dark-active .data.file input[type="file"]:hover {
    border-color: var(--color-accent) !important; 
}

/* ダークモード時：カードリスト */
.office-dark-active .smp-card-list { 
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--dark-border-subtle) !important;
}

.office-dark-active .smp-card-list th { 
    background: rgba(255, 255, 255, 0.06) !important; 
    border-color: var(--dark-border-subtle) !important; 
    color: var(--dark-text-high) !important;  
}

.office-dark-active .smp-card-list td { 
    border-color: var(--dark-border-subtle) !important;
}

/* ダークモード時：アコーディオン ＆ フッターシールテキスト */
.office-dark-active .accordion-item, 
.office-dark-active .accordion-title { 
    box-shadow: none !important; 
}

.office-dark-active .accordion-content { 
    background: var(--dark-layer-card) !important;
    border: 1px solid var(--dark-border-subtle) !important;
    color: var(--dark-text-main) !important;
}

.office-dark-active .spiralSeal,
.office-dark-active .spiralSeal td {
    border-color: var(--dark-border-subtle) !important;
    color: var(--dark-text-sub) !important;
}

/* モバイル時のカードテーブル枠ダークモード対応 */
@media screen and (max-width: 768px) {
    .office-dark-active table.smp-card-list tr {
        background-color: var(--dark-layer-item) !important;
        border-color: var(--dark-border-subtle) !important;
    }
}

/* ==========================================================================
   7-11. スマホレスポンシブスタイル (@media screen and (max-width: 768px))
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* ラジオボタン・チェックボックスの縦1列グリッド化 */
    ul.radio.cf, .data.multi2 ul.cf { 
        grid-template-columns: repeat(auto-fit, minmax(240px, 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%; 
    }

    /* スマホ表示時：カード型テーブル構造のモバイル表示切り替え */
    .smp-card-list thead { 
        position: absolute; 
        width: 1px; 
        height: 1px; 
        padding: 0; 
        margin: -1px; 
        overflow: hidden; 
        clip: rect(0, 0, 0, 0); 
        border: 0; 
    }

    .smp-card-list, 
    .smp-card-list tbody, 
    .smp-card-list tr, 
    .smp-card-list th, 
    .smp-card-list td { 
        display: block; 
        width: 100%; 
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

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

    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; 
    }
}

/* ==========================================================================
   7-12. 外部script装飾
   ========================================================================== */
.preview-thumb { background: var(--bg-light) !important; box-shadow: inset 2px 2px 4px color-mix(in srgb, rgb(var(--rgb)) 18%, transparent),inset -2px -2px 4px color-mix(in srgb, #ffffff 60%, transparent) !important; }

/* ダークモード時（黒〜暗いグレー背景用） */
.office-dark-active .preview-thumb { background: var(--dark-layer-item) !important; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.6), inset -2px -2px 4px rgba(255, 255, 255, 0.08) !important; }
`;
    }
})();