/* =========================================================
   エコルドサイン（sign.ecold-plan.ai）
   ========================================================= */
:root {
  --sg-font: 'BIZ UDPGothic', 'Hiragino Sans', 'Meiryo', sans-serif;
  --sg-round: 'Zen Maru Gothic', 'BIZ UDPGothic', sans-serif;
  --sg-bg: #f5f8f7; --sg-surface: #fff; --sg-line: #e2e9e7; --sg-text: #2f3b3a; --sg-muted: #6f7d7b;
  --sg-primary: #3a9e8f; --sg-primary-d: #2c8073; --sg-primary-l: #e6f4f1; --sg-accent: #f0a95c; --sg-danger: #d65c5c;
  --sg-radius: 16px; --sg-shadow: 0 2px 12px rgba(40, 80, 75, .07);
}
* { box-sizing: border-box; }
.sg-body, .lg-body { margin: 0; font-family: var(--sg-font); color: var(--sg-text); background: var(--sg-bg); line-height: 1.75; -webkit-font-smoothing: antialiased; }
.sg-body a { color: var(--sg-primary-d); }
.sg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.sg-narrow { max-width: 800px; }

/* ---------- ボタン ---------- */
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; padding: 9px 20px; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: none; transition: .15s; white-space: nowrap; }
.sg-body .sg-btn-primary { background: var(--sg-primary); color: #fff; }
.sg-btn-primary:hover { background: var(--sg-primary-d); }
.sg-body .sg-btn-ghost { background: #fff; color: var(--sg-primary-d); border-color: var(--sg-line); }
.sg-btn-ghost:hover { border-color: var(--sg-primary); }
.sg-body .sg-btn-white { background: #fff; color: var(--sg-primary-d); }
.sg-btn-lg { padding: 14px 30px; font-size: 16px; }
.sg-btn-sm { padding: 6px 14px; font-size: 13px; }
.sg-btn-block { width: 100%; }
.sg-btn:disabled { opacity: .55; cursor: default; }

/* ---------- ヘッダー・フッター ---------- */
.sg-header { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sg-line); position: sticky; top: 0; z-index: 20; }
.sg-header-in { display: flex; align-items: center; gap: 20px; height: 64px; }
.sg-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--sg-text) !important; font-family: var(--sg-round); font-weight: 700; font-size: 18px; letter-spacing: .06em; }
.sg-logo img { width: 30px; height: 30px; }
.sg-logo b { color: var(--sg-primary-d); }
.sg-nav { display: flex; gap: 22px; margin-left: 12px; }
.sg-nav a { color: var(--sg-text) !important; text-decoration: none; font-size: 14px; }
.sg-header-act { margin-left: auto; display: flex; gap: 8px; }
.sg-footer { background: #24413c; color: #cfe0dc; padding: 40px 0 28px; margin-top: 0; font-size: 13px; }
.sg-footer .sg-logo { color: #fff !important; }
.sg-footer .sg-logo b { color: #9fd9cd; }
.sg-footer-top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sg-footer-top p { margin: 0; }
.sg-footer-links { display: flex; gap: 18px; flex-wrap: wrap; margin: 22px 0 10px; }
.sg-footer-links a { color: #e6f2ef !important; }
.sg-copy { margin: 0; opacity: .7; }

/* ---------- トップ ---------- */
.sg-hero { background: linear-gradient(135deg, #e7f5f1 0%, #f7faf9 60%, #fdf4ea 100%); padding: 64px 0 72px; }
.sg-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.sg-eyebrow { color: var(--sg-primary-d); font-weight: 700; letter-spacing: .08em; font-size: 14px; margin: 0 0 10px; }
.sg-hero h1 { font-family: var(--sg-round); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.35; margin: 0 0 18px; letter-spacing: .02em; }
.sg-hero h1 span { color: var(--sg-primary-d); }
.sg-lead { font-size: 17px; margin: 0 0 26px; }
.sg-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.sg-hero-note { font-size: 13px; color: var(--sg-muted); margin: 16px 0 0; }
.sg-hero-note i { color: var(--sg-primary); }
.sg-hero-card { position: relative; }
.sg-mock { background: #fff; border-radius: 20px; box-shadow: 0 20px 50px rgba(30, 70, 64, .16); overflow: hidden; max-width: 380px; margin: 0 auto; }
.sg-mock-bar { display: flex; gap: 6px; padding: 12px 14px; background: #f1f5f4; }
.sg-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: #d4dedb; }
.sg-mock-body { padding: 22px; }
.sg-mock-t { font-weight: 700; margin: 0 0 14px; font-size: 18px; }
.sg-mock-l { height: 10px; border-radius: 6px; background: #e8eeec; margin-bottom: 10px; }
.sg-mock-l.s { width: 70%; } .sg-mock-l.m { width: 85%; }
.sg-mock-tools { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.sg-mock-tools span { font-size: 13px; background: var(--sg-primary-l); color: var(--sg-primary-d); padding: 6px 12px; border-radius: 999px; font-weight: 700; }
.sg-mock-btn { background: var(--sg-primary); color: #fff; text-align: center; padding: 14px; border-radius: 999px; font-weight: 700; }
.sg-mock-cert { position: absolute; right: 0; bottom: -24px; background: #fff; border-radius: 14px; box-shadow: var(--sg-shadow); padding: 12px 16px; display: flex; gap: 10px; align-items: center; }
.sg-mock-cert i { color: var(--sg-accent); font-size: 22px; }
.sg-mock-cert small { display: block; color: var(--sg-muted); font-size: 11.5px; }
.sg-section { padding: 72px 0; }
.sg-section-alt { background: #fff; }
.sg-h2 { font-family: var(--sg-round); font-size: 28px; text-align: center; margin: 0 0 12px; }
.sg-sub { text-align: center; color: var(--sg-muted); margin: 0 auto 32px; max-width: 720px; font-size: 14px; }
.sg-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.sg-feature { background: #fff; border-radius: var(--sg-radius); padding: 24px; box-shadow: var(--sg-shadow); }
.sg-feature i { font-size: 24px; color: var(--sg-primary); background: var(--sg-primary-l); width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.sg-feature h3 { margin: 14px 0 6px; font-size: 17px; }
.sg-feature p { margin: 0; font-size: 14px; color: #4b5856; }
.sg-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.sg-plan { position: relative; background: var(--sg-bg); border: 2px solid var(--sg-line); border-radius: 20px; padding: 26px 22px; display: flex; flex-direction: column; }
.sg-plan.is-main { border-color: var(--sg-primary); background: #fff; box-shadow: 0 10px 30px rgba(58, 158, 143, .15); }
.sg-plan-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sg-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 14px; border-radius: 999px; }
.sg-plan h3 { margin: 0; font-size: 18px; text-align: center; }
.sg-price { text-align: center; margin: 10px 0 0; font-size: 15px; }
.sg-price b { font-size: 40px; font-family: var(--sg-round); color: var(--sg-primary-d); }
.sg-plan-note { text-align: center; color: var(--sg-muted); font-size: 13px; margin: 0 0 14px; }
.sg-plan ul { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; font-size: 14px; }
.sg-plan li { padding: 7px 0 7px 24px; border-top: 1px dashed var(--sg-line); position: relative; }
.sg-plan li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--sg-primary); position: absolute; left: 2px; }
.sg-plan-sub { font-size: 12.5px; color: var(--sg-muted); margin: 0; }
.sg-fc { text-align: center; margin: 26px 0 0; font-size: 15px; }
.sg-fc i { color: var(--sg-primary); }
.sg-faq { background: #fff; border-radius: 14px; padding: 4px 20px; margin-bottom: 10px; box-shadow: var(--sg-shadow); }
.sg-faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; }
.sg-faq p { margin: 0 0 16px; font-size: 14.5px; }
.sg-cta { background: linear-gradient(135deg, #3a9e8f, #2c8073); color: #fff; text-align: center; padding: 60px 0; }
.sg-cta h2 { font-family: var(--sg-round); font-size: 28px; margin: 0 0 8px; }
.sg-cta p { margin: 0 0 24px; opacity: .9; }

/* ---------- 登録・ログイン ---------- */
.sg-auth { padding: 40px 16px 64px; }
.sg-auth-card { background: #fff; max-width: 620px; margin: 0 auto; border-radius: 20px; box-shadow: var(--sg-shadow); padding: 36px 40px; }
.sg-auth-title { font-family: var(--sg-round); font-size: 24px; margin: 0 0 8px; text-align: center; }
.sg-auth-lead { text-align: center; color: #4b5856; margin: 0 0 24px; font-size: 14.5px; }
.sg-auth-foot { text-align: center; font-size: 14px; margin: 18px 0 0; }
.sg-auth-note { text-align: center; font-size: 12.5px; color: var(--sg-muted); margin: 10px 0 0; }
.sg-form { display: flex; flex-direction: column; gap: 14px; }
.sg-field { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 700; color: #4b5856; }
.sg-field input, .sg-field select, .sg-field textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--sg-text); border: 1.5px solid var(--sg-line); border-radius: 12px; padding: 11px 14px; background: #fff; width: 100%; }
.sg-field input:focus, .sg-field select:focus { outline: none; border-color: var(--sg-primary); box-shadow: 0 0 0 3px var(--sg-primary-l); }
.sg-field input:disabled, .sg-field select:disabled { background: var(--sg-bg); }
.sg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sg-grid-addr { grid-template-columns: 150px 1fr; }
.sg-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.sg-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--sg-primary); }
.sg-kind { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sg-kind legend { font-size: 13.5px; font-weight: 700; color: #4b5856; margin-bottom: 6px; }
.sg-kind label { cursor: pointer; }
.sg-kind input { position: absolute; opacity: 0; }
.sg-kind span { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--sg-line); border-radius: 12px; padding: 12px; font-weight: 700; }
.sg-kind input:checked + span { border-color: var(--sg-primary); background: var(--sg-primary-l); color: var(--sg-primary-d); }
.sg-kind input:focus-visible + span { box-shadow: 0 0 0 3px var(--sg-primary-l); }
.sg-hr { border: 0; border-top: 1px solid var(--sg-line); margin: 6px 0; }
.sg-err { color: var(--sg-danger); font-size: 14px; margin: 0; min-height: 1em; }
.sg-err:empty { display: none; }
.sg-code-icon { text-align: center; font-size: 34px; color: var(--sg-primary); }
.sg-code-input { font-size: 30px !important; letter-spacing: .4em; text-align: center; font-family: monospace; }

/* ---------- 管理画面 ---------- */
.sg-app-body { min-height: 100vh; }
.sg-app-header { display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 60px; background: #fff; border-bottom: 1px solid var(--sg-line); position: sticky; top: 0; z-index: 10; }
.sg-app-org { margin-left: auto; font-weight: 700; font-size: 14px; color: #4b5856; }
#sg-logout { margin-left: 4px; }
.sg-app { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 60px); }
.sg-app-nav { background: #fff; border-right: 1px solid var(--sg-line); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.sg-app-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; color: var(--sg-text) !important; text-decoration: none; font-size: 14.5px; }
.sg-app-nav a i { width: 18px; color: var(--sg-primary); }
.sg-app-nav a.on { background: var(--sg-primary-l); color: var(--sg-primary-d) !important; font-weight: 700; }
.sg-app-main { padding: 24px 28px 60px; max-width: 1100px; width: 100%; }
.sg-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sg-page-head h1 { font-size: 22px; margin: 0; font-family: var(--sg-round); }
.sg-page-head .sg-btn { margin-left: auto; }
.sg-pill { display: inline-block; background: var(--sg-primary-l); color: var(--sg-primary-d); font-weight: 700; font-size: 12.5px; padding: 3px 12px; border-radius: 999px; }
.sg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.sg-card { background: #fff; border-radius: var(--sg-radius); padding: 20px 22px; box-shadow: var(--sg-shadow); margin-bottom: 18px; }
.sg-cards .sg-card { margin-bottom: 0; }
.sg-card h2 { font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.sg-card h2 i { color: var(--sg-primary); }
.sg-card h2 small { color: var(--sg-muted); font-weight: 400; font-size: 13px; margin-left: auto; }
.sg-muted { color: var(--sg-muted); font-size: 13px; }
.sg-ring { position: relative; width: 220px; height: 220px; margin: 4px auto 10px; }
.sg-ring canvas, .sg-gauge canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.sg-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.sg-ring-center b { font-size: 46px; line-height: 1; font-family: var(--sg-round); color: var(--sg-primary-d); }
.sg-ring-center small { font-size: 12.5px; color: var(--sg-muted); }
.sg-ring-legend { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 13.5px; }
.sg-ring-legend i, .sg-flegend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sg-over { color: #b23f72; font-weight: 700; }
.sg-gauge { position: relative; width: 260px; height: 140px; margin: 0 auto 8px; }
.sg-gauge-center { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.sg-gauge-center b { font-size: 36px; font-family: var(--sg-round); color: #2f6fb4; }
.sg-gauge-center small { color: var(--sg-muted); margin-left: 3px; }
.sg-warn { color: #b9692a; font-size: 13.5px; font-weight: 700; text-align: center; margin: 0 0 8px; }
.sg-fbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #eef3f2; margin: 8px 0; }
.sg-fbar span { display: block; height: 100%; }
.sg-flegend { list-style: none; padding: 0; margin: 0 0 8px; font-size: 13px; display: grid; gap: 4px; }
.sg-flegend li { display: flex; align-items: center; gap: 6px; }
.sg-flegend b { margin-left: auto; }
.sg-flegend small { color: var(--sg-muted); width: 44px; text-align: right; }
.sg-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sg-col { display: flex; flex-direction: column; gap: 8px; }
.sg-notice { display: flex; gap: 12px; padding: 14px 18px; border-radius: 14px; margin-bottom: 16px; font-size: 14px; }
.sg-notice.ok { background: #e7f5f1; color: #24584f; }
.sg-notice i { font-size: 20px; margin-top: 2px; }
.sg-promo { display: flex; gap: 14px; align-items: center; background: #fff8ee; border: 1px solid #f3dfc2; border-radius: var(--sg-radius); padding: 16px 20px; }
.sg-promo > i { font-size: 26px; color: var(--sg-accent); }
.sg-promo p { margin: 2px 0 0; font-size: 13px; color: #6d5a3f; }
.sg-promo .sg-btn { margin-left: auto; }
.sg-packs { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.sg-packs li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--sg-line); border-radius: 12px; }
.sg-packs li > div { flex: 1; }
.sg-packs b { font-size: 17px; }
.sg-tag { background: #fdecd6; color: #a8641c; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.sg-costs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 14px; }
.sg-costs li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; border-bottom: 1px dashed var(--sg-line); }
.sg-costs b { margin-left: auto; color: var(--sg-primary-d); }
.sg-costs small { width: 100%; color: var(--sg-muted); font-size: 12px; }
.sg-table-wrap { overflow-x: auto; }
.sg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sg-table th { text-align: left; font-size: 12.5px; color: var(--sg-muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--sg-line); }
.sg-table td { padding: 10px; border-bottom: 1px solid var(--sg-line); vertical-align: top; }
.sg-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-table .neg { color: #b23f3f; } .sg-table .pos { color: var(--sg-primary-d); }
.sg-table tr.off td { opacity: .5; }
.sg-plans-app { margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sg-loading { color: var(--sg-muted); padding: 40px; text-align: center; }
.sg-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #24413c; color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 14px; z-index: 100; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); max-width: calc(100vw - 32px); }
.sg-toast.bad { background: #a33d3d; }
.sg-modal-bd { position: fixed; inset: 0; background: rgba(30, 50, 46, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.sg-modal { background: #fff; border-radius: 20px; padding: 26px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 12px; }
.sg-modal h2 { margin: 0; font-size: 19px; }
.sg-modal h2 i { color: var(--sg-primary); }
.sg-modal p { margin: 0; font-size: 14px; }
.sg-modal-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ---------- 規約ページ ---------- */
.lg-body { background: #f3f4f5; }
.lg-wrap { max-width: 860px; margin: 0 auto; padding: 32px 16px 64px; }
.lg-paper { background: #fff; border-radius: 14px; padding: 48px 56px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.lg-meta { font: 13px/1.6 system-ui, sans-serif; color: #777; text-align: center; margin-top: 18px; }

/* ---------- スマホ ---------- */
@media (max-width: 900px) {
  .sg-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .sg-features, .sg-plans { grid-template-columns: 1fr; }
  .sg-nav { display: none; }
  .sg-cards { grid-template-columns: 1fr; }
  .sg-app { grid-template-columns: 1fr; }
  .sg-app-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--sg-line); padding: 8px; position: sticky; top: 60px; z-index: 9; }
  .sg-app-nav a { white-space: nowrap; padding: 8px 12px; font-size: 13.5px; }
  .sg-app-main { padding: 18px 14px 60px; }
  .sg-costs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sg-header-in { gap: 10px; }
  .sg-header-act .sg-btn-ghost { display: none; }
  .sg-hero { padding: 40px 0 56px; }
  .sg-auth-card { padding: 26px 20px; }
  .sg-grid2, .sg-grid-addr { grid-template-columns: 1fr; }
  .sg-app-org { display: none; }
  #sg-logout { margin-left: auto; }
  .sg-promo { flex-direction: column; align-items: flex-start; }
  .sg-promo .sg-btn { margin-left: 0; }
  .lg-paper { padding: 28px 20px; }
}