// ==========================================================================
// 1. マスターデータ・設定定義
// ==========================================================================
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' }
};

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. 高速ユーティリティ関数
// ==========================================================================
function convertToHalfWidth(text) {
    return text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xFEE0));
}

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

// CSSカスタム変数だけをピンポイント更新（Style再読み込みを防止）
function updateThemeVars(theme) {
    const rootEl = document.documentElement;
    if (!rootEl) return;
    rootEl.style.setProperty('--color-brand', theme.brand);
    rootEl.style.setProperty('--color-blue-hover', theme.hover);
    rootEl.style.setProperty('--rgb', theme.rgb);
    if (!rootEl.classList.contains('office-dark-active')) {
        rootEl.style.setProperty('--color-bg-outer', theme.bgOuter);
    }
}

// 共通CSSの初回1回切り注入
function injectBaseStyles() {
    if (document.getElementById('spiral-dynamic-style')) return;
    const style = document.createElement('style');
    style.id = 'spiral-dynamic-style';
    style.textContent = getGlobalStyles();
    document.head.appendChild(style);
}

// ==========================================================================
// 3. 画面判定 & テーマ最速適用
// ==========================================================================
function initScreenAndTheme() {
    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");
        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);
        }
    }

    // 初期テーマの設定
    const initialThemeId = detectThemeId(pageTitle);
    updateThemeVars(THEME_PALETTES[initialThemeId]);
}

// ==========================================================================
// 4. 高速DOM加工関数
// ==========================================================================
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();
        }
    }
}

function formatH1Structure(h1Element) {
    if (!h1Element) return;
    const rawText = h1Element.innerHTML;
    if (rawText.includes('広島県') && rawText.includes('特別高圧') && !rawText.includes('class="sub-title-accent"')) {
        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() {
    if (!document.documentElement.classList.contains('is-office-screen') || 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');
        }
    });
}

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

// 最速処理 1: クラス設定 & 変数注入 & CSS枠組み読み込み
initScreenAndTheme();
injectBaseStyles();

// 最速処理 2: DOM生成監視 (1度だけ実行したら即解体)
if (document.readyState === 'loading') {
    const observer = new MutationObserver((mutations, obs) => {
        const h1 = document.querySelector('h1');
        if (h1 && h1.textContent.trim() !== '') {
            // 一括処理
            formatH1Structure(h1);
            
            // H1テキストも含めたテーマ精査＆反映
            const themeId = detectThemeId(`${document.title} ${h1.textContent}`);
            updateThemeVars(THEME_PALETTES[themeId]);

            document.querySelectorAll('dt.title, dt').forEach(removeUnderlineText);
            injectModeSwitcher();

            // 処理完了後は即時解体（以降のレンダリングコストを0にする）
            obs.disconnect();
        }
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });
    setTimeout(() => observer.disconnect(), 3000);
} else {
    // すでに読み込まれている場合
    const h1 = document.querySelector('h1');
    if (h1) formatH1Structure(h1);
    document.querySelectorAll('dt.title, dt').forEach(removeUnderlineText);
    injectModeSwitcher();
}

// ==========================================================================
// 6. CSS定義 (変数ベースで全自動連動するため静的定義化)
// ==========================================================================
function getGlobalStyles() {
    return `
:root {
    /* JSから直接可変制御される変数 */
    --color-brand: #80cbc4;
    --color-blue-hover: #b2dfdb;
    --color-bg-outer: #e6fff5;
    --rgb: 0, 102, 128;

    /* --- カラーパレット：テキスト --- */
    --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;
    --fz-normal: 0.75rem;
    --fz-semi-medium: 0.8125rem;
    --fz-medium: 0.875rem;
    --fz-body: 1rem;

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

*, *::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-smooth) ease-out forwards;
    contain: content;
}

a {
    color: var(--color-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;
    line-height: 1.4;
}

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

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

h2.title {
    display: block;
    width: 100%;
    margin: 40px 0 24px 0;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-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;
}

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

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

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

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

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

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

.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;
    color: var(--color-text-main);
    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;
}

.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;
    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-brand);
    font-size: 2.2rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    pointer-events: none;
}

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

.data.file input[type="file"]:focus {
    border-color: var(--color-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;
}

dd.file input.clear:active {
    transform: scale(0.98);
    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;
}

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

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

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

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

ul.radio.cf label:has(input:checked), 
.data.multi2 label:has(input:checked) {
    background-color: var(--color-brand);
    border-color: var(--color-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);
}

.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: 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-blue-hover);
    color: #FFFFFF;
}

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

.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-brand) 100%); }
.side-header.benefits { background: linear-gradient(135deg, var(--color-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: var(--tr-form);
    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: var(--tr-form);
}

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

.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 var(--dur-smooth), 
        border-color var(--dur-smooth), 
        color var(--dur-smooth);
}

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

.office-dark-active .mode-switch-slider:before {
    transform: translateX(16px);
    background-color: #0d1117;
}

.office-dark-active body {
    background-color: #0d1117 !important;
}
.office-dark-active body::before {
    background-color: #0d1117 !important;
    background-image: none !important;
}

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

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

.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-brand) !important; 
    box-shadow: 0 0 0 4px rgba(56, 139, 253, 0.3) !important; 
}

.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-brand) !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.office-dark-active .smp-card-list { 
    border-color: rgba(255, 255, 255, 0.08) !important; 
    background-color: rgba(255, 255, 255, 0.02) !important; 
}
.office-dark-active .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 .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; 
}

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

@media screen and (max-width: 768px) {
    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%; 
    }

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

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