:root {
    --bg: #f5f6f8;
    --panel: #ffffff;
    --ink: #1f2933;
    --ink-sub: #52606d;
    --line: #d9dee4;
    --brand: #1f7a5a;
    --brand-dark: #155c43;
    --danger: #c0392b;
    --danger-bg: #fdecea;
    --ok: #1e7e34;
    --ok-bg: #e8f6ec;
    --info-bg: #eef3f8;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.7;
}

.container {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}
.container.narrow { max-width: 520px; }

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.lead { color: var(--ink-sub); margin: 0 0 24px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}

/* ステップ表示 */
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.steps li {
    flex: 1; text-align: center; font-size: .85rem; padding: 8px 4px;
    border-radius: 6px; background: #e9edf1; color: var(--ink-sub);
}
.steps li.active { background: var(--brand); color: #fff; font-weight: 600; }
.steps li.done { background: #cfe6db; color: var(--brand-dark); }

/* フォーム */
label { display: block; margin: 0 0 16px; font-weight: 600; font-size: .95rem; }
label .req { color: var(--danger); font-weight: 700; margin-left: 4px; font-size: .8rem; }
label .opt { color: var(--ink-sub); font-weight: 400; margin-left: 4px; font-size: .8rem; }
input[type=text], input[type=email], input[type=number], textarea, select {
    width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 1rem;
    border: 1px solid var(--line); border-radius: 8px; font-family: inherit;
    background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,122,90,.15);
}
textarea { min-height: 90px; resize: vertical; }
.hint { font-weight: 400; color: var(--ink-sub); font-size: .82rem; margin-top: 4px; }

.row2 { display: flex; gap: 14px; }
.row2 > * { flex: 1; }
.inline-fields { display: flex; gap: 8px; align-items: center; }
.inline-fields input { width: auto; flex: 1; }

/* チェックボックスグループ（業種・カテゴリー） */
.checkgroup { border: 1px solid var(--line); border-radius: 8px; padding: 4px 0; margin-top: 6px; }
.checkgroup .grp-title {
    font-size: .85rem; font-weight: 700; color: var(--brand-dark);
    background: #f0f5f3; padding: 6px 12px; margin: 0;
}
.checkgroup .opts { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 8px 12px 12px; }
.checkitem { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: .92rem; margin: 0; width: calc(50% - 8px); }
.checkitem input { width: auto; margin: 0; }
.checkscroll { max-height: 340px; overflow-y: auto; }

.field-error { color: var(--danger); font-size: .85rem; font-weight: 600; margin-top: 4px; }
label.has-error input, label.has-error select, .has-error textarea { border-color: var(--danger); }

/* ボタン */
.btn {
    display: inline-block; background: var(--brand); color: #fff; border: none;
    padding: 13px 28px; font-size: 1.02rem; font-weight: 700; border-radius: 8px;
    cursor: pointer; font-family: inherit; text-decoration: none;
}
.btn:hover { background: var(--brand-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sub { background: #6b7280; }
.btn-sub:hover { background: #4b5563; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #9b2618; }
.btn-block { width: 100%; }
.actions { display: flex; gap: 12px; margin-top: 24px; }
.actions.spread { justify-content: space-between; }

/* 確認画面のテーブル */
.review { width: 100%; border-collapse: collapse; }
.review th, .review td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.review th { width: 34%; background: #f7f9fa; font-weight: 600; color: var(--ink-sub); }

/* 通知 */
.notice { padding: 12px 16px; border-radius: 8px; margin: 0 0 20px; font-size: .95rem; }
.notice-info { background: var(--info-bg); }
.notice-ok { background: var(--ok-bg); color: var(--ok); }
.notice-error { background: var(--danger-bg); color: var(--danger); }
.error-list { margin: 0; padding-left: 1.2em; }

/* カード入力 */
#card-element { margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.card-note { font-size: .82rem; color: var(--ink-sub); margin-top: 8px; }

/* 同意 */
.agree { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.agree input { width: auto; margin-top: 4px; }

footer.site-foot { text-align: center; font-size: .82rem; color: var(--ink-sub); padding: 20px; }
footer.site-foot a { color: var(--ink-sub); margin: 0 8px; }

/* 完了 */
.done-box { text-align: center; padding: 40px 24px; }
.done-box .mark { font-size: 3rem; color: var(--ok); }

/* 管理画面テーブル */
table.list { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
table.list th, table.list td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
table.list th { background: #f0f3f5; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge-active { background: var(--ok-bg); color: var(--ok); }
.badge-pending { background: #fff4e0; color: #a96a00; }
.badge-failed { background: var(--danger-bg); color: var(--danger); }
.badge-canceled, .badge-paused { background: #eceff1; color: #607d8b; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* ダッシュボード指標 */
.metrics { display: flex; flex-wrap: wrap; gap: 14px; }
.metric { flex: 1 1 140px; background: #f7f9fa; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.metric .m-label { font-size: .8rem; color: var(--ink-sub); }
.metric .m-value { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.metric .m-unit { font-size: .78rem; color: var(--ink-sub); }
.metric .m-warn { color: var(--danger); }

/* アコーディオン（業種・カテゴリー） */
details.acc { border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; overflow: hidden; }
details.acc + details.acc { margin-top: 6px; }
details.acc > summary {
    cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: .92rem;
    background: #f0f5f3; color: var(--brand-dark); list-style: none; user-select: none;
    display: flex; align-items: center; gap: 8px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: '▸'; color: var(--brand); transition: transform .15s; }
details.acc[open] > summary::before { transform: rotate(90deg); }
details.acc > summary:hover { background: #e7efeb; }
details.acc .acc-count { color: var(--brand); font-weight: 700; font-size: .85rem; }
details.acc .opts { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 10px 14px 14px; }

@media (max-width: 560px) {
    .row2 { flex-direction: column; gap: 0; }
    .checkitem { width: 100%; }
    .actions { flex-direction: column-reverse; }
    .btn-block-sp { width: 100%; text-align: center; }
}