/* ============================================================
 * エコドライブチャレンジプログラム Ver.2.5.5
 * index - ログイン・登録画面スタイルシート
 * 更新：2026-03-18 00:00:00
 * ============================================================ */

/* ──────────────────────────────────────
   リセット・ベース
────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', sans-serif;
    background: linear-gradient(135deg, #43a047 0%, #1b5e20 100%);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
}

/* ──────────────────────────────────────
   共通レイアウト
────────────────────────────────────── */
.page-wrap {
    width: 100%;
    max-width: 740px;
}

.site-header {
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
}
.site-header h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: .04em; margin-bottom: 4px; }
.site-header p  { font-size: .88rem; opacity: .85; }

/* ── カード ── */
.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
    overflow: hidden;
}

/* ── タブ ── */
.tabs {
    display: flex;
    border-bottom: 2px solid #ebebeb;
    background: #fafafa;
    gap: 0;
    margin-bottom: 0;
}
.tab {
    flex: 1;
    padding: 15px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    color: #999;
    text-align: center;
    text-decoration: none;
    transition: color .15s, border-color .15s;
    display: block;
}
.tab:hover { color: #2e7d32; }
.tab.active { color: #2e7d32; border-bottom-color: #2e7d32; background: #fff; }

/* ── カードボディ ── */
.card-body { padding: 28px 32px 36px; }
@media (max-width: 560px) { .card-body { padding: 20px 18px 28px; } }

/* ──────────────────────────────────────
   セクション見出し
────────────────────────────────────── */
.sec-head {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2e7d32;
    border-bottom: 2px solid #ebebeb;
    padding-bottom: 7px;
    margin: 24px 0 16px;
}
.sec-head:first-child { margin-top: 0; }
.sec-head-sub { font-size: .7rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #999; margin-left: 6px; }

/* ──────────────────────────────────────
   フォーム共通
────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 700; font-size: .84rem; margin-bottom: 5px; color: #444; }
.form-group input,
.form-group select {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid #ddd;
    border-radius: 7px;
    font-size: .93rem;
    font-family: inherit;
    color: #333;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #43a047;
    box-shadow: 0 0 0 3px rgba(67,160,71,.15);
}
.form-group small { display: block; margin-top: 4px; font-size: .76rem; color: #999; line-height: 1.5; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.required { color: #e74c3c; }

/* ── ログイン補足 ── */
.login-desc { font-size: .83rem; color: #888; margin-bottom: 20px; line-height: 1.6; }

/* ── パスワード忘れ ── */
.forgot-pw { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ebebeb; text-align: center; font-size: .78rem; color: #bbb; }
.forgot-pw a { color: #2e7d32; text-decoration: none; margin: 0 4px; }
.forgot-pw a:hover { text-decoration: underline; }

/* ── 注記ボックス ── */
.note-box {
    background: #f1f8e9;
    border-left: 3px solid #43a047;
    border-radius: 0 6px 6px 0;
    padding: 10px 13px;
    font-size: .8rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 14px;
}

/* ── ボタン ── */
.btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #43a047 0%, #1b5e20 100%);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: .97rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: opacity .15s, transform .12s;
    margin-top: 6px;
}
.btn:hover { opacity: .92; transform: translateY(-1px); }

/* ──────────────────────────────────────
   エラー表示
────────────────────────────────────── */
.error-summary {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-left: 4px solid #c62828;
    border-radius: 7px;
    padding: 12px 14px;
    margin-bottom: 20px;
    color: #b71c1c;
    font-size: .86rem;
    line-height: 1.7;
}
.error-summary strong { display: block; margin-bottom: 5px; font-size: .92rem; }

.field-error { color: #c62828; font-size: .76rem; margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.field-error::before { content: '⚠ '; }

input.input-error,
select.input-error { border-color: #e53935 !important; background: #fff8f8 !important; box-shadow: 0 0 0 2px rgba(229,57,53,.2); }
tr.vehicle-error-row td { background: #fff8f8 !important; }
.vehicle-row-err { color: #c62828; font-size: .76rem; margin-top: 2px; }

/* ──────────────────────────────────────
   車両テーブル
────────────────────────────────────── */
.vehicle-table-container { overflow-x: auto; margin-top: 2px; }
.vehicle-table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-bottom: 8px; }
.vehicle-table th,
.vehicle-table td { padding: 7px 9px; border: 1px solid #c8e6c9; vertical-align: top; }
.vehicle-table th { background: #f1f8e9; font-weight: 700; font-size: .78rem; color: #555; white-space: nowrap; }

.table-input,
.table-select { width: 100%; padding: 5px 7px; border: 1px solid #c8e6c9; border-radius: 4px; font-size: .83rem; font-family: inherit; }
.table-input:focus,
.table-select:focus { outline: none; border-color: #43a047; }

#add-more-vehicles {
    padding: 7px 16px;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1.5px solid #a5d6a7;
    border-radius: 5px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s;
}
#add-more-vehicles:hover { background: #c8e6c9; }

/* ──────────────────────────────────────
   登録完了画面
────────────────────────────────────── */
.complete-wrap { max-width: 580px; }
.complete-wrap .card-body { text-align: center; }
.success-icon { font-size: 56px; margin-bottom: 10px; }
.complete-wrap h2 { font-size: 1.2rem; color: #333; margin-bottom: 20px; }

.id-display { background: #f1f8e9; border-radius: 10px; padding: 18px; margin: 18px 0; }
.id-label { font-size: .78rem; color: #888; margin-bottom: 5px; }
.id-number { font-size: 2.2rem; font-weight: 800; color: #2e7d32; font-family: 'Courier New', monospace; letter-spacing: 6px; }

.info-box {
    background: #fffde7;
    border-left: 3px solid #fbc02d;
    border-radius: 0 5px 5px 0;
    padding: 12px 14px;
    margin: 12px 0;
    text-align: left;
    font-size: .83rem;
    line-height: 1.8;
    color: #555;
}
.info-box strong { color: #f57f17; }

.approval-box {
    background: #e3f2fd;
    border-left: 3px solid #1565c0;
    border-radius: 0 5px 5px 0;
    padding: 12px 14px;
    margin: 12px 0;
    text-align: left;
    font-size: .83rem;
    line-height: 1.8;
    color: #0d47a1;
}

.pw-box {
    background: #fce4ec;
    border-left: 3px solid #e91e63;
    border-radius: 0 5px 5px 0;
    padding: 12px 14px;
    margin: 12px 0;
    text-align: left;
}
.pw-box h3 { color: #880e4f; margin-bottom: 8px; font-size: .88rem; }
.pw-table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-top: 4px; }
.pw-table th { background: #880e4f; color: #fff; padding: 5px 9px; text-align: left; }
.pw-table td { padding: 5px 9px; border-bottom: 1px solid #f8bbd0; font-family: monospace; }
.pw-table tr:last-child td { border-bottom: none; }

.complete-note { font-size: .8rem; color: #888; margin: 12px 0; line-height: 1.7; }

.register-btn { margin-top: 28px; }