/* 電気保全ページの図・写真。共通CSSは変更しない。 */
.denki-hero { min-width: 0; margin: 0; }
#fv .denki-hero { order: 8; }
.denki-work-cycle { position: relative; margin-block: 0; margin-inline: auto; padding: 0 0 80px 24px; }
.denki-work-steps { display: grid; gap: 32px; }
.denki-work-cycle .denki-work-step { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); align-content: start; }
.denki-work-step:not(:last-child)::after { content: ''; position: absolute; z-index: 1; bottom: -23px; left: calc(50% - 5px); width: 10px; height: 10px; border-right: 2px solid var(--color-navy); border-bottom: 2px solid var(--color-navy); transform: rotate(45deg); }
.denki-keywords { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-3); }
.denki-keywords span { display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-navy); border-radius: var(--radius-control); color: var(--color-navy); font-size: 14px; font-weight: var(--font-weight-bold); }
.denki-return { position: absolute; top: 28px; bottom: 44px; left: 0; width: calc(50% + 12px); border-left: 2px solid var(--color-navy); border-bottom: 2px solid var(--color-navy); border-bottom-left-radius: 12px; }
.denki-return::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; border-top: 2px solid var(--color-navy); }
.denki-return::after { content: ''; position: absolute; bottom: 0; right: 0; height: 36px; border-right: 2px solid var(--color-navy); }
.denki-return-arrow { position: absolute; left: 16px; top: -5px; width: 11px; height: 11px; background: var(--color-navy); clip-path: polygon(0 0,100% 50%,0 100%); }
.denki-return p { position: absolute; bottom: -15px; left: 24px; width: max-content; padding-inline: var(--space-2); background: var(--color-bg); color: var(--color-navy); font-size: 14px; font-weight: var(--font-weight-bold); }
.denki-checklist { gap: var(--space-5); }
.denki-check-priority { display: grid; gap: var(--space-4); padding: var(--space-4); border: 2px solid var(--color-navy); border-radius: var(--radius-card); }
.denki-priority-title { font-size: 18px; font-weight: var(--font-weight-bold); color: var(--color-navy); }
.denki-check-card { display: grid; grid-template-columns: var(--size-number) minmax(0,1fr); gap: var(--space-4); align-items: start; }
.denki-check-heading { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: var(--space-3); align-items: start; }
.denki-check-heading .h3 { font-size: 18px; }
.denki-check-icon { width: 44px; height: 44px; color: var(--color-navy); }
.denki-empty-check { grid-column: 2; justify-self: end; width: 24px; height: 24px; border: 2px solid var(--color-control-border); border-radius: 3px; background: var(--color-bg); }
@media (min-width: 768px) {
 #fv .denki-hero { grid-area: 4 / 2 / 6 / 3; align-self: start; }
 .denki-work-cycle { padding: 0 0 80px; }
 .denki-work-steps { grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-5); }
 .denki-work-step .h3 { font-size: 18px; }
 .denki-work-step:not(:last-child)::after { left: auto; right: -19px; top: 32px; bottom: auto; transform: rotate(-45deg); }
 .denki-return { top: auto; left: calc(12.5% - 9px); bottom: 28px; width: calc(75% + 18px); height: 52px; border-right: 2px solid var(--color-navy); border-bottom-right-radius: 12px; }
 .denki-return::before, .denki-return::after { display: none; }
 .denki-return-arrow { left: -6.5px; top: -5px; transform: rotate(-90deg); }
 .denki-return p { left: 50%; transform: translateX(-50%); }
 #flow > .denki-flow { max-width: var(--width-wide); grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--space-3); }
 #flow .denki-flow .step { grid-template-columns: minmax(0,1fr); align-content: start; gap: var(--space-3); padding: 0; }
 #flow .denki-flow .step::after { top: calc(var(--size-number) / 2); bottom: auto; left: var(--size-number); right: calc(-1 * var(--space-3)); width: auto; height: 2px; }
 #flow .denki-flow .h3 { font-size: 18px; }
 #flow .denki-flow .step p { font-size: 14px; }
}