:root {
    --orange-dark: #c45500;
    --orange: #f28c00;
    --orange-light: #fff3e0;
    --black: #1d1d1d;
    --line: #d6c9bb;
    --ink: #242424;
    --muted: #666;
    --background: #ededed;
    --white: #fff;
    --danger: #a52b22;
    --field-label-column: 170px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body { margin: 0; color: var(--ink); background: var(--background); font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 15px; line-height: 1.7; }
a { color: #a94700; }
button, input, select, textarea { font: inherit; }
.page-shell { display: flex; width: min(100%, 1040px); min-height: 100vh; min-height: 100dvh; margin: 0 auto; flex-direction: column; background: var(--white); box-shadow: 0 0 18px rgba(0, 0, 0, .16); }
.site-header { min-height: 82px; padding: 14px 32px; display: flex; align-items: center; border-top: 1px solid #ec7b00; border-bottom: 3px solid var(--black); background: linear-gradient(180deg, #f07e00 0%, #f79400 18%, #ffc516 58%, #f5a500 100%); }
.brand { display: inline-flex; }
.brand img { display: block; width: 177px; height: 51px; object-fit: cover; object-position: center; }
.content-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px; flex: 1 0 auto; }
.side-menu { align-self: start; border: 1px solid var(--line); background: #f7f7f7; }
.side-menu h2 { margin: 0; height: 50px; padding: 0 14px; display: flex; align-items: center; border-bottom: 3px solid var(--orange); color: #fff; background: var(--black); font-size: 16px; }
.side-menu nav { display: grid; }
.side-menu nav a { padding: 10px 14px; border-bottom: 1px solid #e1d8cf; color: #333; text-decoration: none; background: #fff; }
.side-menu nav a::before { content: "›"; margin-right: 8px; color: var(--orange); font-weight: 700; }
.side-menu nav a:hover, .side-menu nav a.active { color: var(--black); background: var(--orange-light); font-weight: 700; }
.logout-form { padding: 12px; }
.logout-form button { width: 100%; padding: 7px; border: 1px solid #8d8d8d; border-radius: 3px; color: #333; background: #fff; cursor: pointer; }
.main-content { min-width: 0; }
.main-content > h1 { margin: 0 0 18px; height: 50px; padding: 0 14px; display: flex; align-items: center; border: 1px solid var(--black); border-bottom: 3px solid var(--orange); color: #fff; background: var(--black); font-size: 20px; }
.admin-preview-banner { display: grid; gap: 2px; margin: 24px 24px 0; padding: 11px 14px; border: 2px solid var(--danger); border-left-width: 6px; color: #762018; background: #fff5f4; }
.admin-preview-banner strong { font-size: 16px; }
.admin-preview-banner span { font-size: 14px; }
.panel { margin-bottom: 26px; border: 0; background: transparent; }
.panel > h2 { margin: 0 0 10px; padding: 10px 15px; border: 3px solid var(--black); border-radius: 5px; color: var(--black); background: linear-gradient(90deg, var(--orange-light), #fff); box-shadow: inset 0 0 0 2px var(--orange), 0 2px 5px rgba(0, 0, 0, .12); font-size: 17px; }
.panel-body { padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgba(35, 25, 15, .08); }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-body > .notice { margin: 0 0 16px; }
.panel-body > .details { margin: 0; border: 1px solid #e4ddd6; border-radius: 5px; overflow: hidden; }
.panel-body > .profile-form { margin: 0; padding: 0; }
.panel-body > .stacked-form { padding: 0; }
.panel-body > .panel-action { margin: 16px 0 0; }
.panel-body > .empty-state { margin: 0; }
.details { margin-top: 0; padding: 0; }
.details > div { display: grid; grid-template-columns: var(--field-label-column) minmax(0, 1fr); border-bottom: 1px solid #e6e0da; }
.details > div:last-child { border-bottom: 0; }
.details dt, .details dd { margin: 0; padding: 9px 12px; }
.details dt { color: #3d3d3d; background: #f5f1ed; font-weight: 700; }
.details dd { overflow-wrap: anywhere; }
.subtle-note, .form-help { color: var(--muted); font-size: 14px; }
.invoice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); background: #fff; }
.invoice-row div span { display: block; color: var(--muted); font-size: 14px; }
.small-button, .primary-button { display: inline-block; border: 1px solid var(--orange-dark); border-radius: 3px; color: var(--black); text-align: center; text-decoration: none; background: linear-gradient(#f6a326, #e47a00); cursor: pointer; font-weight: 700; }
.secondary-button { display: inline-block; padding: 8px 16px; border: 1px solid #777; border-radius: 3px; color: var(--black); text-align: center; text-decoration: none; background: #fff; cursor: pointer; font-weight: 700; }
.small-button { padding: 5px 10px; }
.primary-button { padding: 9px 20px; }
.stacked-form { display: grid; gap: 7px; max-width: 520px; padding: 16px 0; }
.stacked-form label, .login-card label, .profile-form label { font-weight: 700; }
.stacked-form input, .login-card input, .profile-form input, .profile-form select { width: 100%; padding: 9px 10px; border: 1px solid #aaa; border-radius: 3px; background: #fff; }
.stacked-form input:focus, .login-card input:focus, .profile-form input:focus, .profile-form select:focus { outline: 3px solid rgba(242, 140, 0, .22); border-color: var(--orange); }
.stacked-form .primary-button { margin-top: 8px; justify-self: start; }
.password-form { width: min(100%, 580px); max-width: none; }
.password-field-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: stretch; overflow: hidden; border: 1px solid #d8d0c7; border-radius: 3px; background: #fff; }
.password-field-row:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 140, 0, .18); }
.password-field-row > label { padding: 9px 12px; display: flex; align-items: center; white-space: nowrap; border-right: 1px solid #e0d8cf; color: #333; background: #f5f1ed; }
.password-field-row > input { min-width: 0; min-height: 44px; border: 0; border-radius: 0; }
.password-field-row > input:focus { border: 0; outline: 0; }
.profile-form { padding: 16px; }
.registration-profile-form { padding: 0; }
.registration-profile-form > .panel { margin-bottom: 26px; }
.registration-profile-form .readonly-details + .form-grid { margin-top: 14px; }
.registration-pending-notice { margin: 0 0 20px; }
.registration-form-help { margin: -6px 0 14px; padding: 12px 14px; border: 1px solid var(--line); color: var(--ink); background: #fafafa; font-size: 15px; line-height: 1.8; }
.registration-form-actions { margin: 0 0 26px; justify-content: flex-end; }
.registration-profile-action { margin: -6px 0 26px; text-align: right; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.form-grid > label { display: grid; grid-template-columns: var(--field-label-column) minmax(0, 1fr); align-items: center; gap: 12px; }
.form-readonly-row { display: grid; grid-template-columns: var(--field-label-column) minmax(0, 1fr); align-items: stretch; gap: 12px; }
.form-readonly-value { min-width: 0; padding: 9px 10px; border: 1px solid #d8d0c7; border-radius: 3px; overflow-wrap: anywhere; background: #fafafa; }
.form-grid .full-field { grid-column: 1 / -1; }
.field-label { display: flex; min-width: 0; align-items: center; gap: 7px; line-height: 1.5; white-space: nowrap; }
.registration-profile-form .field-label { align-self: stretch; min-height: 42px; padding: 9px 12px; background: #f5f1ed; }
.required-mark { display: inline-block; flex: 0 0 auto; width: fit-content; padding: 0 5px; color: #fff; background: var(--orange-dark); font-size: 14px; line-height: 1.55; white-space: nowrap; }
.pending-field-mark { display: inline-block; flex: 0 0 auto; width: fit-content; padding: 0 5px; border: 1px solid #d69a45; color: #704000; background: #fff8df; font-size: 14px; line-height: 1.55; white-space: nowrap; }
.pending-edit-marker { display: none; }
.field-label:has(.pending-edit-marker) + input,
.field-label:has(.pending-edit-marker) + select,
.field-label:has(.pending-edit-marker) + textarea { border-color: #e7b16c; background: #fffaf2; }
.pending-value-comparison { display: grid; gap: 3px; }
.pending-value-current { color: var(--ink); }
.pending-value-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 7px; }
.pending-value-new { min-width: 0; color: var(--orange-dark); overflow-wrap: anywhere; font-weight: 700; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.panel-action { margin-top: 16px; }
.notice { padding: 10px 13px; border: 1px solid; }
.notice.error { border-color: #d6aaa5; color: var(--danger); background: #fff0ef; }
.notice.success { border-color: #e5aa5e; color: #8c3e00; background: #fff4e6; }
.notice.pending { border-color: #d69a45; color: #704000; background: #fff8df; }
.pending-change-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pending-change-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; }
.pending-change-notice form { flex: 0 0 auto; margin: 0; }
.pending-cancel-button { padding: 6px 12px; }
.email-setting-row > dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.email-setting-value { min-width: 0; overflow-wrap: anywhere; }
.email-setting-button { align-self: center; white-space: nowrap; }
.email-change-inline-form { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.email-change-inline-form input { min-width: 0; width: 100%; padding: 7px 9px; border: 1px solid #aaa; border-radius: 3px; }
.email-change-inline-form input:focus { outline: 3px solid rgba(242, 140, 0, .22); border-color: var(--orange); }
.readonly-details { margin-left: 0 !important; margin-right: 0 !important; }
.billing-mode-fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--line); }
.profile-billing-mode-fieldset { margin-top: 20px; }
.billing-mode-fieldset legend { padding: 0 7px; font-weight: 700; }
.billing-mode-control { position: absolute; width: 1px !important; height: 1px; margin: 0; opacity: 0; }
.billing-mode-card { position: relative; display: grid !important; gap: 5px; min-height: 88px; padding: 15px 16px 15px 48px; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; box-sizing: border-box; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.billing-mode-card::before { position: absolute; top: 18px; left: 16px; width: 20px; height: 20px; border: 2px solid #8b8b8b; border-radius: 50%; background: #fff; box-sizing: border-box; content: ''; }
.billing-mode-card:hover { border-color: var(--orange); background: #fffaf4; }
.billing-mode-control:checked + .billing-mode-card { border-color: var(--orange-dark); background: var(--orange-light); box-shadow: 0 0 0 2px rgba(242, 140, 0, .16); }
.billing-mode-control:checked + .billing-mode-card::before { border: 6px solid var(--orange-dark); }
.billing-mode-control:focus-visible + .billing-mode-card { outline: 3px solid rgba(242, 140, 0, .28); outline-offset: 2px; }
.billing-mode-title { color: var(--black); font-weight: 700; line-height: 1.45; }
.billing-mode-description { color: var(--muted); font-size: 14px; line-height: 1.6; }
.billing-same-note { display: none; grid-column: 1 / -1; padding: 12px; color: #704000; background: var(--orange-light); }
#billing_mode_same:checked ~ .billing-same-note { display: block; }
#billing_mode_same:checked ~ .billing-separate-fields { display: none; }
.billing-separate-fields { grid-column: 1 / -1; margin-top: 2px; }
.empty-state { padding: 28px; border: 1px solid var(--line); text-align: center; color: var(--muted); background: #fafafa; }
.service-option-group { margin-top: 18px; }
.service-option-group > h3 { margin: 0; padding: 8px 12px; border: 1px solid #e7b16c; color: #704000; background: var(--orange-light); font-size: 15px; }
.service-option-group > .empty-state { margin: 0; border-top: 0; }
.service-option-list { display: grid; gap: 10px; padding-top: 10px; }
.service-option-card { border: 1px solid #e4ddd6; background: #fff; }
.service-option-card > h4 { margin: 0; padding: 7px 11px; border-bottom: 1px solid #ead9c7; color: #704000; background: #fff8ee; font-size: 14px; }
.service-option-card > .details { border: 0; border-radius: 0; }
.dns-application-form { display: grid; gap: 12px; margin-top: 16px; }
.dns-application-form [hidden] { display: none; }
.dns-application-form > label { display: grid; grid-template-columns: var(--field-label-column) minmax(0, 1fr); align-items: stretch; overflow: hidden; border: 1px solid #d8d0c7; border-radius: 3px; background: #fff; }
.dns-application-form > label:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 140, 0, .18); }
.dns-application-form > label > span { display: flex; padding: 9px 12px; align-items: flex-start; border-right: 1px solid #e0d8cf; color: #333; background: #f5f1ed; font-weight: 700; }
.dns-application-form select,
.dns-application-form textarea { min-width: 0; width: 100%; padding: 9px 10px; border: 0; border-radius: 0; background: #fff; }
.dns-application-form textarea { min-height: 170px; resize: vertical; line-height: 1.65; }
.dns-application-form select:focus,
.dns-application-form textarea:focus { border: 0; outline: 0; }
.dns-application-form .primary-button { justify-self: end; }
.dns-pending-list { display: grid; gap: 12px; }
.dns-pending-card { border: 1px solid #e4ddd6; border-radius: 4px; overflow: hidden; }
.dns-pending-card .details { margin: 0; }
.dns-pending-card > .form-actions { margin: 0; padding: 12px; border-top: 1px solid #e6e0da; }
.dns-record-value { white-space: pre-wrap; }
.cancellation-scope-section { margin-top: 18px; }
.cancellation-scope-section > h3 { margin: 0; padding: 8px 12px; border: 1px solid #e7b16c; color: #704000; background: var(--orange-light); font-size: 15px; }
.cancellation-choice-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 12px; }
.cancellation-notice { margin: 20px 0; }
.cancellation-notice > h3 { text-align: center; }
.cancellation-status-value { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cancellation-status-value form { margin: 0; }
.cancellation-notice ol { padding-left: 1.8em; line-height: 1.8; }
.cancellation-notice li { margin-bottom: 12px; }
.cancellation-numbered { position: relative; padding-left: 3.2em; line-height: 1.8; }
.cancellation-number { position: absolute; left: 0; top: 0; width: 2.8em; white-space: nowrap; }
.cancellation-consent { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cancellation-consent-button { position: relative; display: flex; width: 100%; box-sizing: border-box; min-height: 56px; padding: 14px 16px 14px 48px; align-items: center; border: 2px solid var(--line); border-radius: 6px; color: var(--black); background: #fff; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.6; }
.cancellation-consent-button::before { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; border: 2px solid #8b8b8b; border-radius: 3px; background: #fff; box-sizing: border-box; content: ''; transform: translateY(-50%); }
.cancellation-consent-button:hover { border-color: var(--orange); background: #fffaf4; }
.cancellation-consent:checked + .cancellation-consent-button { border-color: var(--orange-dark); background: var(--orange-light); }
.cancellation-consent:checked + .cancellation-consent-button::before { content: '✓'; color: #fff; background: var(--orange-dark); border-color: var(--orange-dark); text-align: center; font-size: 14px; line-height: 16px; }
.cancellation-consent:focus-visible + .cancellation-consent-button { outline: 3px solid rgba(242, 140, 0, .28); outline-offset: 2px; }
.cancellation-notices[hidden], [data-cancellation-notice][hidden] { display: none; }
.cancellation-download[hidden] { display: none; }
.cancellation-download { margin-top: 16px; }
.cancellation-download button { width: 100%; }
.cancellation-download button:disabled { cursor: not-allowed; opacity: .65; }
.cancellation-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14px; }
.cancellation-table th, .cancellation-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.cancellation-table th { background: var(--orange-light); }
.cancellation-scope-control { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cancellation-scope-button { position: relative; display: flex; min-height: 76px; padding: 14px 16px 14px 48px; align-items: center; border: 2px solid var(--line); border-radius: 6px; color: var(--black); background: #fff; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.6; }
.cancellation-scope-button::before { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; border: 2px solid #8b8b8b; border-radius: 50%; background: #fff; box-sizing: border-box; content: ''; transform: translateY(-50%); }
.cancellation-scope-button:hover { border-color: var(--orange); background: #fffaf4; }
.cancellation-scope-control:checked + .cancellation-scope-button { border-color: var(--orange-dark); background: var(--orange-light); box-shadow: 0 0 0 2px rgba(242, 140, 0, .16); }
.cancellation-scope-control:checked + .cancellation-scope-button::before { border: 6px solid var(--orange-dark); }
.cancellation-scope-control:focus-visible + .cancellation-scope-button { outline: 3px solid rgba(242, 140, 0, .28); outline-offset: 2px; }
.contact-panel address { font-style: normal; }
.contact-panel .details { margin-top: 14px; margin-bottom: 16px; }
.external-link { margin-bottom: 0; }
footer { margin-top: auto; padding: 18px 24px; border-top: 4px solid var(--orange); color: #d8d8d8; text-align: center; background: var(--black); font-size: 14px; }
.login-page { position: relative; isolation: isolate; display: grid; min-height: 100vh; place-items: center; padding: clamp(24px, 7vw, 110px); overflow-x: hidden; background: #fff9f0 url("/assets/login-hero.webp") center / cover no-repeat; }
.login-page::before { position: fixed; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 36%, rgba(255, 249, 238, .72) 58%, rgba(255, 239, 207, .14) 100%); pointer-events: none; content: ""; }
.login-shell { position: relative; width: min(100%, 520px); border: 1px solid rgba(17, 17, 17, .18); box-shadow: 0 28px 70px rgba(60, 34, 4, .22); }
.login-header { min-height: 82px; padding: 14px 32px; display: flex; align-items: center; border-top: 1px solid #ec7b00; border-bottom: 3px solid var(--black); background: linear-gradient(180deg, #f07e00 0%, #f79400 18%, #ffc516 58%, #f5a500 100%); }
.login-header img { display: block; width: 177px; height: 51px; object-fit: cover; object-position: center; }
.login-card { padding: 0 28px 28px; border: 0; background: rgba(255, 255, 255, .97); backdrop-filter: blur(4px); }
.login-card h1 { margin: 0 -28px 22px; padding: 11px 28px; border-bottom: 3px solid var(--orange); color: #fff; background: var(--black); font-size: 20px; }
.login-guidance { color: #484848; line-height: 1.85; }
.login-card form { display: grid; gap: 8px; }
.login-field-row { display: grid; grid-template-columns: var(--field-label-column) minmax(0, 1fr); align-items: center; gap: 0; overflow: hidden; border: 1px solid #d8d0c7; border-radius: 3px; background: #fff; }
.login-field-row:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 140, 0, .18); }
.login-field-row > label { align-self: stretch; padding: 9px 12px; display: flex; align-items: center; border-right: 1px solid #e0d8cf; color: #333; background: #f5f1ed; }
.login-field-row > input { min-width: 0; min-height: 44px; border: 0; border-radius: 0; }
.login-field-row > input:focus { border: 0; outline: 0; }
.login-card .primary-button { width: 100%; min-height: 48px; margin-top: 12px; border-color: #d56e00; border-radius: 2px; background: linear-gradient(135deg, #ffb33a 0%, #f28c00 68%, #e67800 100%); box-shadow: 0 8px 20px rgba(196, 85, 0, .22); transition: box-shadow .2s ease, transform .2s ease; }
.login-card .primary-button:hover { box-shadow: 0 11px 24px rgba(196, 85, 0, .3); transform: translateY(-1px); }
.login-customer-help { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.login-customer-help a { color: var(--orange-dark); font-weight: 700; }
.login-recovery { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.login-recovery h2 { margin: 0 0 6px; color: var(--black); font-size: 17px; }
.login-recovery p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.login-recovery .secondary-button { width: 100%; margin-top: 8px; }
.login-help { color: #555; text-align: center; font-size: 14px; }

@media (max-width: 760px) {
    .site-header { align-items: flex-start; padding: 12px 16px; }
    .content-layout { grid-template-columns: 1fr; padding: 14px; }
    .admin-preview-banner { margin: 14px 14px 0; }
    .side-menu nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .side-menu nav a { border-right: 1px solid #e1d8cf; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full-field { grid-column: auto; }
    .billing-mode-fieldset { grid-template-columns: 1fr; }
    .cancellation-choice-group { grid-template-columns: 1fr; }
    .dns-application-form > label { grid-template-columns: 1fr; }
    .dns-application-form > label > span { border-right: 0; border-bottom: 1px solid #e0d8cf; }
    .billing-same-note, .billing-separate-fields { grid-column: auto; }
    .invoice-row { grid-template-columns: 1fr auto; }
    .invoice-row .small-button { grid-column: 1 / -1; }
    .login-page { place-items: center; padding: 20px; background-position: 68% center; }
    .login-page::before { background: rgba(255, 249, 238, .84); }
}

@media (max-width: 480px) {
    :root { --field-label-column: 155px; }
    .side-menu nav { grid-template-columns: 1fr; }
    .form-grid > label { gap: 8px; }
    .field-label { gap: 5px; font-size: 14px; }
    .registration-profile-form .field-label { padding-right: 4px; padding-left: 4px; }
    .login-field-row { gap: 0; }
    .password-field-row { grid-template-columns: 210px minmax(0, 1fr); }
    .password-field-row > label { font-size: 14px; }
    .login-page { padding: 12px; }
    .login-shell { box-shadow: 0 18px 44px rgba(60, 34, 4, .2); }
    .pending-change-notice { align-items: stretch; flex-direction: column; }
    .pending-cancel-button { width: 100%; }
    .email-change-inline-form { grid-template-columns: 1fr 1fr; }
    .email-change-inline-form input { grid-column: 1 / -1; }
}