@charset "utf-8";
/* アンソバー！PRO WEB見積システム リニューアル用スタイル */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'Yu Gothic',sans-serif;background:#F5F7FA;color:#1A1A1A;line-height:1.7;font-size:15px}
a{color:#00508C;text-decoration:none}
img{max-width:100%}

/* Header */
.header{background:#fff;color:#1A1A1A;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.1);border-top:3px solid #00508C}
.header-inner{max-width:1100px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:38px;width:auto}
.header-label{font-size:13px;color:#00508C;letter-spacing:2px;font-weight:bold}

/* Container */
.container{max-width:1100px;margin:0 auto;padding:36px 24px 60px}
.section-title{font-size:22px;font-weight:bold;text-align:center;margin-bottom:6px;color:#00508C}
.section-subtitle{text-align:center;color:#666;margin-bottom:32px;font-size:14px}
.section-divider{width:60px;height:3px;background:#00508C;margin:0 auto 28px;border-radius:2px}

/* Step indicator */
.steps{display:flex;justify-content:center;gap:0;margin-bottom:40px}
.step{display:flex;align-items:center;gap:8px;padding:10px 20px;font-size:13px;color:#999;position:relative}
.step .num{width:28px;height:28px;border-radius:50%;background:#E0E0E0;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:13px}
.step.active{color:#00508C;font-weight:bold}
.step.active .num{background:#00508C}
.step-arrow{color:#CCC;font-size:18px;margin:0 4px}

/* Plan cards */
.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px}
.plan-card{background:#fff;border-radius:12px;padding:0;cursor:pointer;transition:all .25s;border:2px solid #E0E0E0;position:relative;overflow:hidden;display:flex;flex-direction:column}
.plan-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.plan-card.selected{border-color:var(--c);box-shadow:0 4px 20px rgba(0,0,0,.12)}
.plan-badge{position:absolute;top:0;right:0;padding:4px 14px;border-radius:0 10px 0 10px;font-size:11px;font-weight:bold;color:#fff;background:var(--c)}
.plan-header{padding:24px 20px 16px;border-bottom:1px solid #F0F0F0}
.plan-tag{display:inline-block;font-size:11px;padding:2px 10px;border-radius:20px;background:var(--c-light);color:var(--c);font-weight:bold;margin-bottom:8px}
.plan-name{font-size:18px;font-weight:bold;margin-bottom:4px}
.plan-price-area{padding:16px 20px;background:#FAFBFC;min-height:96px;display:flex;flex-direction:column;justify-content:center}
.plan-price{font-size:28px;font-weight:900;color:var(--c)}
.plan-price small{font-size:14px;font-weight:normal;color:#666}
.plan-price-note{font-size:12px;color:#888;margin-top:2px;min-height:2.4em;line-height:1.4}
.plan-features{padding:16px 20px 20px;list-style:none}
.plan-features li{font-size:13px;padding:6px 0;padding-left:22px;position:relative;color:#555;line-height:1.6}
.plan-features li + li{border-top:1px dashed #EFEFEF}
.plan-features li::before{content:'✓';position:absolute;left:0;color:var(--c);font-weight:bold}
.plan-select-btn{display:block;margin:auto 20px 20px;padding:10px;text-align:center;border-radius:8px;font-size:14px;font-weight:bold;border:2px solid var(--c);color:var(--c);background:#fff;cursor:pointer;transition:all .2s;font-family:inherit}
.plan-card.selected .plan-select-btn{background:var(--c);color:#fff}
.plan-card:not(.selected) .plan-select-btn:hover{background:var(--c-light)}

/* Colors per plan */
.plan-card[data-plan="my"]{--c:#4D99E1;--c-light:#EAF3FB}
.plan-card[data-plan="team"]{--c:#1C6DCC;--c-light:#E4EDF9}
.plan-card[data-plan="owner"]{--c:#03296F;--c-light:#E1E5EE}

/* Form */
.form-section{background:#fff;border-radius:12px;padding:36px;margin-bottom:28px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.form-section-title{font-size:17px;font-weight:bold;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #00508C;color:#00508C;display:flex;align-items:center;gap:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.form-group{display:flex;flex-direction:column}
.form-group.full{grid-column:1/-1}
.form-label{font-size:13px;font-weight:bold;margin-bottom:5px;color:#444;display:flex;align-items:center;gap:6px}
.form-label .req{font-size:10px;padding:1px 6px;border-radius:3px;background:#E53935;color:#fff}
.form-label .opt{font-size:10px;padding:1px 6px;border-radius:3px;background:#BDBDBD;color:#fff}
.form-input{padding:10px 14px;border:1px solid #D0D0D0;border-radius:6px;font-size:15px;transition:border-color .2s;font-family:inherit}
.form-input:focus{outline:none;border-color:#00508C;box-shadow:0 0 0 3px rgba(0,80,140,.1)}
.form-input::placeholder{color:#BBB}
.form-hint{font-size:11px;color:#999;margin-top:3px}
.form-error{font-size:11px;color:#E53935;margin-top:4px;display:none;align-items:center;gap:4px}
.form-error.show{display:flex}
.form-error::before{content:'⚠';font-size:11px}
.form-input.invalid{border-color:#E53935;background:#FFF7F7}
.form-input.invalid:focus{border-color:#E53935;box-shadow:0 0 0 3px rgba(229,57,53,.12)}
.form-input-group{display:flex;align-items:center;gap:8px}
.form-input-group .form-input{flex:1}
.form-input-group .unit{font-size:14px;color:#666;white-space:nowrap}
.form-input-inline{display:flex;align-items:center;gap:10px}

/* Plan specific areas */
.plan-options{display:none;margin-top:20px;padding-top:20px;border-top:1px dashed #E0E0E0}
.plan-options.visible{display:block}
.plan-options-title{font-size:14px;font-weight:bold;color:#444;margin-bottom:12px}
.plan-summary-box{background:#F8FAFB;border:1px solid #E4EBF0;border-radius:8px;padding:16px 20px;margin-top:16px}
.plan-summary-box h4{font-size:13px;color:#00508C;margin-bottom:8px}
.plan-summary-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:#555}

/* Estimate result */
.result-section{background:#fff;border-radius:12px;padding:36px;margin-bottom:28px;box-shadow:0 1px 4px rgba(0,0,0,.06);display:none}
.result-section.visible{display:block}
.result-title{font-size:17px;font-weight:bold;margin-bottom:6px;color:#00508C}
.result-total{font-size:14px;color:#666;margin-bottom:24px}
.result-total strong{font-size:32px;color:#C05000;font-weight:900}
.result-block{margin-bottom:24px}
.result-block-title{font-size:14px;font-weight:bold;color:#fff;background:#4D99E1;padding:8px 16px;border-radius:6px 6px 0 0;display:flex;align-items:center;gap:6px}
.result-block-title.green{background:#1C6DCC}
.result-block-title.orange{background:#03296F}
.result-table{width:100%;border-collapse:collapse;font-size:14px}
.result-table th{background:#F5F7FA;padding:10px 14px;text-align:left;font-weight:bold;color:#444;border-bottom:1px solid #E0E0E0}
.result-table td{padding:10px 14px;border-bottom:1px solid #F0F0F0}
.result-table td:last-child,.result-table th:last-child{text-align:right}
.result-table td:nth-child(3),.result-table th:nth-child(3){text-align:center}
.result-subtotal{border-top:2px solid #E0E0E0}
.result-tax{color:#888}
.result-grand{font-size:16px;font-weight:bold;color:#00508C;border-top:2px solid #00508C}
.result-grand td{padding:14px}
.result-notes{background:#FFFBF0;border:1px solid #F5E6C8;border-radius:8px;padding:16px 20px;margin-top:16px}
.result-notes h4{font-size:13px;color:#B08000;margin-bottom:8px}
.result-notes ul{list-style:none;font-size:13px;color:#666}
.result-notes li{padding:2px 0;padding-left:16px;position:relative}
.result-notes li::before{content:'※';position:absolute;left:0;color:#CCA000}
.result-account-summary{background:#E8F5EC;border:1px solid #C8E6C9;border-radius:8px;padding:14px 20px;margin-top:12px;font-size:13px;color:#2E7D32}

/* Actions */
.actions{text-align:center;margin-top:32px}
.btn-submit{display:inline-flex;align-items:center;gap:10px;padding:16px 48px;background:linear-gradient(135deg,#00508C,#003D6B);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px rgba(0,80,140,.3);font-family:inherit}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,80,140,.4)}
.btn-submit:active{transform:translateY(0)}
.btn-submit:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-submit svg{width:20px;height:20px}
.submit-note{font-size:12px;color:#888;margin-top:10px}

/* Server-side (global) errors */
.form-global-errors{display:none;background:#FFF3F3;border:1px solid #F5C6C6;border-radius:8px;padding:16px 20px;margin-top:20px;text-align:left}
.form-global-errors.show{display:block}
.form-global-errors .title{font-size:13px;font-weight:bold;color:#C62828;margin-bottom:6px}
.form-global-errors ul{list-style:none;font-size:13px;color:#C62828}
.form-global-errors li{padding:2px 0;padding-left:16px;position:relative}
.form-global-errors li::before{content:'⚠';position:absolute;left:0}

/* Footer */
.footer{background:#333;color:#aaa;text-align:center;padding:24px;font-size:12px;margin-top:40px}

/* Responsive */
@media(max-width:900px){
  .plan-cards{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:1}
}
@media(max-width:600px){
  .header-inner{flex-direction:column;gap:4px;text-align:center}
  .container{padding:20px 14px 40px}
  .form-section,.result-section{padding:20px}
  .steps{display:none}
}