/* ============================================================
   inline-extracted.css - index.htmlから分離されたインラインスタイル
   ============================================================ */

/* --- エコキュート設定タブUI（旧<style>タグから移動） --- */
/* v6.3.0: エコキュート設定タブUI */
        .heating-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid #e5e7eb;
        }
        .heating-tab {
            flex: 1;
            padding: 12px 20px;
            background: #f3f4f6;
            border: none;
            border-bottom: 3px solid transparent;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            color: #6b7280;
            transition: all 0.3s;
        }
        .heating-tab:hover:not(:disabled) {
            background: #e5e7eb;
            color: #374151;
        }
        .heating-tab.active {
            background: white;
            color: #2563eb;
            border-bottom-color: #2563eb;
        }
        .heating-tab:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .heating-step {
            display: none;
            animation: fadeIn 0.3s;
        }
        .heating-step.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .heating-option-card {
            padding: 16px;
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            transition: all 0.3s;
        }
        .heating-option-card:has(input[type="radio"]:checked) {
            border-color: #3b82f6;
            background: #eff6ff;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }
        .capacity-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px;
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .capacity-option:has(input[type="radio"]:checked) {
            border-color: #3b82f6;
            background: #eff6ff;
        }
        .capacity-option input[type="radio"] {
            width: 18px;
            height: 18px;
        }

/* --- テキスト配置 --- */
.text-right { text-align: right; }
.text-right-padded { text-align: right; padding-right: 10px; }
.text-center { text-align: center; }

/* --- テーブルヘッダー幅 --- */
.th-min-100 { min-width: 100px; }
.th-min-60 { min-width: 60px; }
.th-min-120 { min-width: 120px; }

/* --- テキストスタイル --- */
.text-muted-sm { color: #6B7280; font-size: 11px; }
.text-muted-mt { color: #6B7280; margin-top: 4px; }
.text-muted-note { color: #6B7280; margin-top: 4px; }
.text-slate-sm { font-size: 13px; color: #64748b; margin-top: 4px; }
.text-slate-label { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.text-slate-label-mt { font-size: 12px; color: #64748b; margin-top: 4px; }
.text-heading-dark { font-weight: 600; font-size: 16px; color: #1e293b; }
.text-value-lg { font-size: 18px; font-weight: 700; }
.text-value-xl { font-size: 20px; font-weight: 700; color: #1e293b; }

/* --- フレックスレイアウト --- */
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-center-gap { display: flex; align-items: center; gap: 10px; }
.flex-center-gap-cursor { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.flex-center-gap8-cursor { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-between-mb { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.flex-gap10 { display: flex; gap: 10px; }
.flex-gap10-mt { margin-top: 15px; display: flex; gap: 10px; }
.flex-gap10-mt20 { display: flex; gap: 10px; margin-top: 20px; }
.flex-gap15-wrap { display: flex; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }

/* --- マージン・パディング --- */
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mb-12 { margin-bottom: 12px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.w-full { width: 100%; }

/* --- ラジオ・チェックボックスサイズ --- */
.input-radio-lg { width: 20px; height: 20px; }
.input-checkbox-lg { width: 18px; height: 18px; cursor: pointer; }

/* --- 情報ボックス --- */
.info-box-blue {
    margin-bottom: 15px;
    padding: 12px;
    background: var(--color-info-bg, #EFF6FF);
    border-left: 4px solid var(--color-info, #3B82F6);
    border-radius: 4px;
}
.info-box-blue p {
    margin: 0;
    font-size: 13px;
    color: var(--color-info-text, #1E40AF);
}

/* セマンティックバリアント */
.info-box-blue.info-warn,
.info-box-warning {
    background: var(--color-warning-bg);
    border-left-color: var(--color-warning);
}
.info-box-blue.info-warn p,
.info-box-warning p { color: var(--color-warning-text); }

.info-box-blue.info-success,
.info-box-success {
    background: var(--color-success-bg);
    border-left-color: var(--color-success);
}
.info-box-blue.info-success p,
.info-box-success p { color: var(--color-success-text); }

.info-box-blue.info-danger,
.info-box-danger {
    background: var(--color-danger-bg);
    border-left-color: var(--color-danger);
}
.info-box-blue.info-danger p,
.info-box-danger p { color: var(--color-danger-text); }

/* コンパクト版 */
.info-box-blue.info-tight {
    margin-bottom: 8px;
    padding: 10px 12px;
}
.info-box-blue.info-tight p { font-size: 12px; }

/* Step 5 入力に戻るボタンの配置 */
.results-back-wrap { margin-bottom: 16px; }
.info-box-help {
    margin-top: 25px;
    padding: 15px;
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    border-radius: 4px;
}
.info-box-help h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1976d2;
    margin-bottom: 10px;
}
.info-box-help ul {
    margin: 0;
    padding-left: 20px;
    color: #555;
    line-height: 1.8;
}

/* --- 屋根パネルヘッダー --- */
.roof-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.roof-panel-title {
    margin: 0;
    color: #1E40AF;
}

/* --- パワコンセクション --- */
.pc-section {
    margin-top: 30px;
    padding: 20px;
    background: #FEF3C7;
    border-radius: 12px;
    border: 2px solid var(--primary-gold);
}
.pc-section-title {
    margin: 0 0 15px 0;
    color: #92400E;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pc-section-note {
    color: #92400E;
    margin-bottom: 15px;
    font-size: 13px;
}
.pc-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.pc-panel-title {
    margin: 0;
    color: #92400E;
    font-size: 14px;
}
.pc-grid { grid-template-columns: repeat(2, 1fr); }
.pc-total-box {
    margin-top: 15px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #F59E0B;
}
.pc-total-label { font-weight: 600; color: #92400E; }
.pc-total-value { font-size: 20px; font-weight: 700; color: #92400E; }
.btn-pc-add { background: #F59E0B; color: white; }
.btn-pc-remove { background: #EF4444; color: white; }

/* --- 合計設置容量 --- */
.total-capacity-box {
    margin-top: 20px;
    padding: 15px;
    background: var(--funas-blue-soft);
    border-radius: 12px;
    border: 2px solid #3B82F6;
}
.total-capacity-label { font-weight: 600; color: #1E40AF; }
.total-capacity-value { font-size: 20px; font-weight: 700; color: #1E40AF; }

/* --- 月別発電量調整 --- */
.monthly-adj-section {
    margin-top: 30px;
    padding: 20px;
    background: #DBEAFE;
    border-radius: 12px;
    border: 2px solid #3B82F6;
}
.monthly-adj-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.monthly-adj-title {
    margin: 0;
    color: #1E40AF;
    display: flex;
    align-items: center;
    gap: 10px;
}
.monthly-adj-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.monthly-adj-toggle-text { color: #1E40AF; font-weight: 600; }
.monthly-generation-mode-control {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 12px;
}
.monthly-generation-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    user-select: none;
}
.monthly-generation-mode-option input {
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
    cursor: pointer;
}
.monthly-generation-mode-option:has(input:checked) {
    background: #2563eb;
    color: #fff;
    border-color: #1d4ed8;
}
.monthly-adj-note {
    color: #1E3A8A;
    margin-bottom: 15px;
    font-size: 13px;
}
.monthly-adj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}
.monthly-adj-preset-box {
    margin-top: 15px;
    padding: 10px;
    background: #FEF3C7;
    border-radius: 8px;
    display: flex;
    gap: 10px;
}
.btn-preset-snow { background: #3B82F6; color: white; flex: 1; }
.btn-preset-reset { background: #6B7280; color: white; flex: 1; }
.monthly-adj-hint {
    color: #92400E;
    margin-top: 10px;
    font-size: 12px;
}

/* --- 給湯設備設定UI（v6.9.3 シングルフロー型） --- */

/* 現在の給湯タイプ選択 */
.hs-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}
.hs-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
@media (max-width: 600px) {
    .hs-type-grid { grid-template-columns: repeat(2, 1fr); }
}
.hs-type-card {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}
.hs-type-card:has(input[type="radio"]:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(59,130,246,0.15);
}
.hs-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.hs-type-body {
    padding: 14px 10px;
    text-align: center;
}
.hs-type-icon { font-size: 22px; margin-bottom: 6px; display: block; }
.hs-type-name { font-size: 13px; font-weight: 700; color: #1e293b; }
.hs-type-sub  { font-size: 11px; color: #64748b; margin-top: 3px; }

/* サブセクション */
.hs-sub-section {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    animation: fadeIn 0.2s ease;
}
.hs-sub-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 14px;
}

/* 入力行 */
.hs-input-row { margin-bottom: 12px; }
.hs-detail-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.hs-input-inline { display: flex; align-items: center; gap: 8px; }
.hs-unit { font-size: 13px; color: #64748b; white-space: nowrap; }
.hs-annual-cost { font-size: 12px; color: #64748b; margin-top: 4px; }
.hs-radio-group { margin-top: 12px; }
.hs-radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    margin-bottom: 6px;
    cursor: pointer;
}

/* アクション選択グリッド */
.hs-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.hs-action-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
    .hs-action-grid,
    .hs-action-grid-2col { grid-template-columns: 1fr; }
}
.hs-action-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 2px;
}
.hs-action-icon { font-size: 20px; flex-shrink: 0; padding-top: 2px; }
.hs-action-title { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 3px; }
.hs-action-sub   { font-size: 12px; color: #64748b; }
.hs-action-note  {
    margin-top: 8px;
    padding: 8px 10px;
    background: #eff6ff;
    border-radius: 6px;
    font-size: 11px;
    color: #1d4ed8;
    line-height: 1.6;
}

/* 推奨カード */
.hs-card-recommended {
    border-color: #10b981 !important;
    background: #f0fdf4 !important;
}
.hs-card-recommended:has(input[type="radio"]:checked) {
    border-color: #059669 !important;
    background: #dcfce7 !important;
}
.hs-badge-rec {
    display: inline-block;
    background: #10b981;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* --- エコキュート給湯設定（旧クラス・後方互換用） --- */
.heating-tabs-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}
.heating-step-title { color: #1e40af; margin-bottom: 20px; }
.heating-options-grid { display: grid; gap: 15px; }
.heating-label-main { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.heating-label-sub { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; }
.heating-detail-label-amber { display: block; font-weight: 600; margin-bottom: 8px; color: #92400e; }
.heating-detail-label-purple { display: block; font-weight: 600; margin-bottom: 8px; color: #5b21b6; }
.heating-detail-label-block { display: block; font-weight: 600; margin-bottom: 12px; color: #1e293b; }
.heating-capacity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.heating-calc-box { background: #f8fafc; padding: 15px; border-radius: 8px; }
.heating-calc-title { margin: 0 0 10px 0; color: #475569; font-size: 14px; }
.heating-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.heating-value-display { font-size: 20px; font-weight: 700; color: #1e293b; }
.heating-value-display-red { font-size: 20px; font-weight: 700; color: #dc2626; }

/* --- 給湯ステップボタン --- */
.btn-step-back {
    flex: 1;
    padding: 12px;
    background: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.btn-step-next {
    flex: 2;
    padding: 12px;
    background: var(--funas-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.btn-step-complete {
    flex: 2;
    padding: 12px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* --- 給湯詳細パネル --- */
.heating-detail-panel {
    margin-top: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.heating-detail-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
}

/* --- 保存ボタン群 --- */
.btn-save-browser {
    flex: 1;
    min-width: 200px;
    padding: 12px 20px;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    transition: all 0.3s;
}
.btn-json-download {
    flex: 1;
    min-width: 200px;
    padding: 12px 20px;
    background: var(--funas-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
    transition: all 0.3s;
}
.btn-json-upload {
    flex: 1;
    min-width: 200px;
    padding: 12px 20px;
    background: var(--funas-gold);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    transition: all 0.3s;
}

/* --- 保存済みデータリスト --- */
.saved-data-section { margin-top: 20px; }
.saved-data-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}
.saved-data-list {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
}
.saved-data-empty {
    color: #999;
    text-align: center;
    padding: 20px;
}

/* --- 結果セクション --- */
.results-pdf-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}
.results-card-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 30px;
}
.results-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1E40AF;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-blue);
}
.results-section-title-22 {
    font-size: 22px;
    font-weight: 700;
    color: #1E40AF;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-blue);
}

/* --- 月別発電量ヘッダー --- */
.monthly-gen-header {
    font-size: 20px;
    font-weight: 700;
    color: #1E40AF;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 15px;
    background: var(--funas-blue-soft);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.monthly-gen-chevron { margin-left: auto; transition: transform 0.3s ease; }

/* --- 期間別メリットヘッダー --- */
.period-header-base {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
}
.period-header-1 {
    color: #059669;
    background: #ECFDF5;
    border: 2px solid #059669;
}
.period-header-2 {
    color: #D97706;
    background: #FFFBEB;
    border: 2px solid #D97706;
}
.period-header-3 {
    color: #1E40AF;
    background: var(--funas-blue-soft);
    border: 2px solid #1E40AF;
}
.period-chevron { transition: transform 0.3s ease; }
.period-content { margin-top: 15px; }

/* --- 期間テーブルのメリット列ハイライト --- */
.th-benefit-period1 {
    min-width: 120px;
    background: #D1FAE5;
    font-weight: 700;
}
.th-benefit-period2 {
    min-width: 120px;
    background: #FEF3C7;
    font-weight: 700;
}
.th-benefit-period3 {
    min-width: 120px;
    background: #DBEAFE;
    font-weight: 700;
}

/* --- テーブルフッター --- */
.tfoot-main { background: var(--gray-100); font-weight: 700; }
.tfoot-avg { background: rgba(255, 255, 255, 0.5); font-weight: 600; font-style: italic; color: #6B7280; }
.td-total-period1 { text-align: right; background: #D1FAE5; color: #059669; font-size: 18px; }
.td-avg-period1 { text-align: right; background: rgba(209, 250, 229, 0.5); color: #047857; font-size: 16px; }
.td-total-period2 { text-align: right; background: #FEF3C7; color: #D97706; font-size: 18px; }
.td-avg-period2 { text-align: right; background: rgba(254, 243, 199, 0.5); color: #B45309; font-size: 16px; }
.td-total-period3 { text-align: right; background: var(--funas-blue-soft); color: var(--funas-blue-dark); font-size: 18px; }
.td-avg-period3 { text-align: right; background: rgba(231, 239, 250, 0.6); color: var(--funas-blue-dark); font-size: 16px; }

/* --- 積雪補正なし列 --- */
.th-snow-highlight { background: #FEF3C7; color: #92400E; }

/* --- チャートコンテナ --- */
.chart-h400 { height: 400px; margin-bottom: 30px; }
.chart-h500 { height: 500px; }

/* --- テキストエリア --- */
.textarea-memo {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
}

/* --- 電気代逆算の説明 --- */
.bill-note-box {
    color: #6B7280;
    margin-bottom: 15px;
    font-size: 14px;
}
.solar-info-note {
    color: #6B7280;
    margin-bottom: 15px;
    font-size: 14px;
}

/* --- 再エネ賦課金の注釈 --- */
.surcharge-note {
    color: #6B7280;
    margin-top: 4px;
}

/* --- 電力プラン変更ボックス --- */
.power-plan-change-box {
    margin: 20px 0;
    padding: 15px;
    background: #F9FAFB;
    border-radius: 8px;
    border: 2px solid #E5E7EB;
}
.power-plan-change-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #374151;
}
.power-plan-change-note {
    display: block;
    margin-top: 8px;
    margin-left: 30px;
    color: #6B7280;
}

/* --- 給湯費用表示 --- */
.heating-annual-cost-amber { margin-top: 8px; font-size: 14px; color: #92400e; }
.heating-annual-cost-purple { margin-top: 8px; font-size: 14px; color: #5b21b6; }
.heating-info-note-amber { margin-top: 12px; padding: 10px; background: white; border-radius: 6px; font-size: 13px; color: #78350f; }
.heating-info-note-purple { margin-top: 12px; padding: 10px; background: white; border-radius: 6px; font-size: 13px; color: #4c1d95; }

/* --- 給湯詳細パネル（デフォルト） --- */
.heating-detail-panel {
    margin-top: 15px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
}

/* ===== おすすめ電力プランランキング ===== */
.plan-ranking-section {
    margin: 28px 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.plan-ranking-header {
    background: var(--funas-black);
    color: #fff;
    padding: 20px 24px 16px;
}
.plan-ranking-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.plan-ranking-title i {
    font-size: 1.3rem;
    color: #fbbf24;
}
.plan-ranking-title h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.plan-ranking-subtitle {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.82);
}
.plan-ranking-base-info {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 5px 10px;
    display: inline-block;
}
.plan-ranking-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.plan-ranking-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 7px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.88);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.plan-ranking-filter-check input {
    width: 15px;
    height: 15px;
    accent-color: #60a5fa;
    cursor: pointer;
}
.plan-ranking-list {
    padding: 8px 0;
}
.plan-ranking-empty {
    padding: 24px;
    color: #6b7280;
    font-size: 0.9rem;
    text-align: center;
}
.plan-rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    border-bottom: 1px solid #f3f4f6;
    gap: 12px;
    transition: background 0.15s;
}
.plan-rank-item:last-child { border-bottom: none; }
.plan-rank-item:hover { background: #f8faff; }
.plan-rank-item.plan-rank-selected {
    background: #eff6ff;
    border-left: 3px solid #2563eb;
}
.plan-rank-item.plan-rank-current-plan {
    opacity: 0.6;
}
.plan-rank-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.plan-rank-num {
    font-size: 1.1rem;
    font-weight: 800;
    min-width: 36px;
    text-align: center;
    color: #374151;
    flex-shrink: 0;
}
.plan-rank-num.medal-gold   { color: #f59e0b; font-size: 1.3rem; }
.plan-rank-num.medal-silver { color: #9ca3af; font-size: 1.2rem; }
.plan-rank-num.medal-bronze { color: #b45309; font-size: 1.15rem; }
.plan-rank-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.plan-rank-company {
    font-size: 0.78rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plan-rank-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plan-rank-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.plan-rank-savings {
    text-align: right;
}
.plan-rank-savings .savings-main {
    font-size: 1.05rem;
    font-weight: 700;
}
.plan-rank-savings .savings-main.positive { color: #16a34a; }
.plan-rank-savings .savings-main.negative { color: #dc2626; }
.plan-rank-savings .savings-main.zero     { color: #6b7280; }
.plan-rank-savings .savings-sub {
    font-size: 0.75rem;
    color: #6b7280;
}
.plan-rank-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
}
.plan-rank-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}
.plan-rank-current-badge {
    font-size: 0.72rem;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    padding: 4px 9px;
    font-weight: 600;
    white-space: nowrap;
}
.plan-rank-now-badge {
    font-size: 0.72rem;
    background: #e5e7eb;
    color: #374151;
    border-radius: 6px;
    padding: 4px 9px;
    font-weight: 600;
    white-space: nowrap;
}
.plan-market-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    white-space: nowrap;
    vertical-align: middle;
}
.plan-market-badge .fa-chart-line {
    font-size: 0.65rem;
}
.plan-contract-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    vertical-align: middle;
}
.plan-contract-badge-ampere {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}
.plan-contract-badge-kva {
    background: #dcfce7;
    color: #047857;
    border: 1px solid #86efac;
}
.plan-contract-badge-dual {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.plan-contract-badge .fas {
    font-size: 0.65rem;
}
.plan-discontinued-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    white-space: nowrap;
    vertical-align: middle;
}
.plan-discontinued-badge .fa-ban {
    font-size: 0.65rem;
}
@media (max-width: 600px) {
    .plan-rank-item { flex-wrap: wrap; }
    .plan-rank-right { width: 100%; justify-content: flex-end; }
}

/* ===== プランランキング アコーディオン詳細 ===== */
.plan-rank-item {
    flex-wrap: wrap;
    cursor: pointer;
}
.plan-rank-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}
.plan-rank-chevron {
    font-size: 0.75rem;
    color: #9ca3af;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 4px;
}
.plan-rank-item.open .plan-rank-chevron {
    transform: rotate(180deg);
}
.plan-rank-detail {
    display: none;
    width: 100%;
    background: #f8faff;
    border-top: 1px solid #e5e7eb;
    padding: 14px 16px 14px 60px;
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.6;
}
.plan-rank-item.open .plan-rank-detail {
    display: block;
}
.plan-rank-expanded-plan-details {
    margin: 0;
    background: #fff;
    border-color: #e5e7eb;
}
.plan-rank-expanded-plan-details .enegaeru-rule-table {
    min-width: 560px;
}
.plan-rank-detail-desc {
    margin-bottom: 10px;
}
.plan-rank-detail-price {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 0.8rem;
}
.plan-rank-detail-price table {
    width: 100%;
    border-collapse: collapse;
}
.plan-rank-detail-price td {
    padding: 3px 8px 3px 0;
    vertical-align: top;
}
.plan-rank-detail-price td:first-child {
    color: #6b7280;
    white-space: nowrap;
    width: 110px;
}
.plan-rank-detail-price td:last-child {
    font-weight: 600;
    color: #111827;
}
.plan-rank-detail-url {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2563eb;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
}
.plan-rank-detail-url:hover { text-decoration: underline; }

/* 契約容量ノート */
.contract-kva-note {
    font-size: 0.7rem;
    font-weight: 600;
    color: #d97706;
    margin-left: 6px;
}
.input-note {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 5px 8px;
    line-height: 1.4;
}
.input-note i { margin-right: 4px; }

/* ==================== 切替先プラン手動指定セクション（Page4） ==================== */
.plan-manual-switch-section {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    margin-top: 20px;
    overflow: hidden;
}
.plan-manual-switch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.15s;
}
.plan-manual-switch-header:hover { background: #f1f5f9; }
.plan-manual-switch-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #1e40af;
}
.plan-manual-switch-title i { font-size: 1rem; }
.plan-switch-chevron {
    color: #64748b;
    font-size: 0.85rem;
    transition: transform 0.2s;
}
.plan-manual-switch-body {
    padding: 20px;
}
.plan-manual-switch-note {
    font-size: 0.82rem;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}
.plan-manual-switch-note i { margin-right: 4px; color: #2563eb; }
.plan-manual-switch-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.plan-manual-recalc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.plan-manual-recalc-btn:hover { background: #1d4ed8; }
.plan-manual-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.plan-manual-clear-btn:hover { background: #e2e8f0; }

/* 現在のプラン表示（ランキング上部） */
.plan-ranking-current {
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
}
.plan-ranking-current .plan-rank-item-top {
    padding: 13px 20px;
}
.plan-ranking-current-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #374151;
    border-radius: 4px;
    padding: 2px 7px;
    margin-right: 6px;
    white-space: nowrap;
}