/* Only the overview and maintenance page load these HTML diagrams. */
.hsfd-diagram { margin: 28px 0; padding: 24px; border: 1px solid #c7dce6; border-radius: 24px; background: #fff; box-shadow: var(--shadow-soft); scroll-margin-top: 100px; }
.hsfd-diagram * { min-width: 0; }
.hsfd-diagram h3, .hsfd-diagram h4, .hsfd-diagram p { margin: 0; }
.hsfd-icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hsfd-arrow { display: block; width: 48px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hsfd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding: 0; margin: 0; list-style: none; }
.hsfd-step { position: relative; border: 2px solid var(--hsfd-color); border-radius: 16px; background: var(--hsfd-pale); }
.hsfd-tone-0 { --hsfd-color: #086998; --hsfd-pale: #eef7fd; }
.hsfd-tone-1 { --hsfd-color: #086998; --hsfd-pale: #eef7fd; }
.hsfd-tone-2 { --hsfd-color: #08776a; --hsfd-pale: #edf9f5; }
.hsfd-tone-3 { --hsfd-color: #08776a; --hsfd-pale: #edf9f5; }
.hsfd-step-content { display: flex; height: 100%; flex-direction: column; gap: 14px; padding: 20px 16px; border-radius: 14px; color: #164861; text-decoration: none; }
.hsfd-step-content:hover { background: #fff; }
.hsfd-step-content:focus-visible { outline: 3px solid #086998; outline-offset: 5px; }
.hsfd-step-top { display: flex; align-items: center; justify-content: space-between; color: var(--hsfd-color); }
.hsfd-number { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hsfd-color); color: #fff; font-size: 19px; font-weight: 800; }
.hsfd-step-top .hsfd-icon { width: 38px; height: 38px; }
.hsfd-step h3 { color: var(--hsfd-color); font-size: 21px; line-height: 1.5; }
.hsfd-step-label { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; line-height: 1.7; }
.hsfd-step-label span { display: inline-block; }
.hsfd-step-label span + span::before { content: '・'; }
.hsfd-step p { font-size: 16px; line-height: 1.8; }
.hsfd-step p span { display: inline-block; }
.hsfd-screen-link { display: block; margin-top: auto; padding-top: 6px; color: var(--hsfd-color); font-size: 15px; line-height: 1.7; font-weight: 700; }
.hsfd-step-arrow { position: absolute; top: 50%; right: -36px; width: 28px; color: #0b637c; transform: translateY(-50%); }
.hsfd-step-arrow .hsfd-arrow { width: 28px; }
.hsfd-diagram figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 20px; color: #52677b; font-size: 16px; line-height: 1.85; }
.hsfd-repair figcaption { flex-wrap: nowrap; }
.hsfd-deployment-grid { display: grid; grid-template-columns: minmax(0, .85fr) 130px minmax(0, 1.7fr); align-items: center; gap: 20px; }
.hsfd-single-hotel { padding: 20px; border: 2px solid #aa6019; border-radius: 16px; background: #fff8ee; color: #804314; text-align: center; }
.hsfd-single-hotel h3 { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 21px; line-height: 1.5; }
.hsfd-single-building { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0; font-size: 22px; line-height: 1.5; }
.hsfd-single-building .hsfd-icon { width: 48px; height: 48px; }
.hsfd-hotel-records { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hsfd-hotel-records span { padding: 6px 10px; border: 1px solid #d8b787; border-radius: 8px; background: #fff; font-size: 16px; line-height: 1.6; }
.hsfd-single-hotel p { font-size: 16px; line-height: 1.8; margin-top: 18px; }
.hsfd-expand-arrow { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #0b637c; text-align: center; font-size: 17px; line-height: 1.7; }
.hsfd-expand-arrow strong span { display: block; }
.hsfd-managed-hotels { padding: 20px; border: 2px solid #086998; border-radius: 18px; background: #eef7fd; color: #07567c; }
.hsfd-manager { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 14px; border: 2px solid #086998; border-radius: 12px; background: #fff; }
.hsfd-manager > .hsfd-icon { width: 36px; height: 36px; }
.hsfd-manager h3 { font-size: 23px; line-height: 1.5; }
.hsfd-manager p { margin-top: 5px; font-size: 16px; line-height: 1.8; }
.hsfd-branches { position: relative; height: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hsfd-branches::before { content: ''; position: absolute; top: 0; left: 50%; height: 20px; border-left: 2px solid #086998; }
.hsfd-branches::after { content: ''; position: absolute; top: 20px; left: calc((100% - 24px) / 6); right: calc((100% - 24px) / 6); border-top: 2px solid #086998; }
.hsfd-branches > span { position: relative; justify-self: center; top: 20px; height: 20px; border-left: 2px solid #086998; }
.hsfd-branches > span::after { content: ''; position: absolute; bottom: 0; left: -6px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #086998; }
.hsfd-hotel-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hsfd-hotel-node { padding: 14px 10px; border: 1px solid #9bbfd3; border-radius: 10px; background: #fff; text-align: center; }
.hsfd-hotel-node > .hsfd-icon { display: block; width: 32px; height: 32px; margin: 0 auto 8px; }
.hsfd-hotel-node h4 { font-size: 18px; line-height: 1.5; }
.hsfd-hotel-node p { margin-top: 8px; font-size: 16px; line-height: 1.8; }
.hsfd-hotel-node p span { display: block; }
.hsfd-diagram .hsfd-separate { margin-top: 16px; text-align: center; font-size: 16px; line-height: 1.8; }
@media (max-width: 1100px) {
  .hsfd-diagram { padding: 18px; }
  .hsfd-steps { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hsfd-step-content { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 16px; }
  .hsfd-step-top { grid-column: 1; grid-row: 1 / 5; flex-direction: column; justify-content: center; gap: 14px; }
  .hsfd-step h3, .hsfd-step-label, .hsfd-step p, .hsfd-screen-link { grid-column: 2; }
  .hsfd-screen-link { margin-top: 0; }
  .hsfd-step-arrow { top: auto; bottom: -38px; right: calc(50% - 14px); transform: rotate(90deg); }
  .hsfd-deployment-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hsfd-single-hotel { max-width: 480px; width: 100%; margin: auto; }
  .hsfd-expand-arrow { flex-direction: row; justify-content: center; gap: 20px; min-height: 48px; }
  .hsfd-expand-arrow .hsfd-arrow { transform: rotate(90deg); }
}
@media (max-width: 600px) {
  .hsfd-diagram { padding: 16px; border-radius: 18px; }
  .hsfd-step-content { grid-template-columns: 44px minmax(0, 1fr); padding: 16px 12px; gap: 8px 12px; }
  .hsfd-step-top .hsfd-icon { width: 32px; height: 32px; }
  .hsfd-step h3 { font-size: 20px; }
  .hsfd-managed-hotels { padding: 16px 12px; }
  .hsfd-manager { padding: 12px; gap: 10px; }
  .hsfd-manager h3 { font-size: 21px; }
  .hsfd-manager > .hsfd-icon { width: 28px; height: 28px; }
  .hsfd-manager p { font-size: 16px; }
  .hsfd-hotel-group { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-left: 10px; padding-left: 18px; border-left: 2px solid #086998; }
  .hsfd-hotel-node { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 12px; padding: 12px; position: relative; text-align: left; }
  .hsfd-hotel-node > .hsfd-icon { grid-row: 1 / 3; margin: 0; align-self: center; }
  .hsfd-hotel-node p { grid-column: 2; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .hsfd-hotel-node::before { content: ''; position: absolute; left: -20px; top: 32px; width: 19px; border-top: 2px solid #086998; }
  .hsfd-hotel-node::after { content: ''; position: absolute; left: -6px; top: 28px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #086998; }
  .hsfd-branches { display: block; height: 26px; }
  .hsfd-branches::before { height: 14px; }
  .hsfd-branches::after { top: 14px; left: 10px; right: 50%; }
  .hsfd-branches > span { display: none; }
}
@media (max-width: 360px) {
  .hsfd-step-content { grid-template-columns: minmax(0, 1fr); }
  .hsfd-step-top { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: space-between; }
  .hsfd-step h3, .hsfd-step-label, .hsfd-step p, .hsfd-screen-link { grid-column: 1; }
}