/* ========================================
   Clinic Cost Simulator v1.0.0 - Frontend
   ======================================== */
.cost-sim{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif!important;line-height:1.6!important;color:#333!important;max-width:800px!important;margin:32px auto!important;padding:0!important;box-sizing:border-box!important}
.cost-sim *{box-sizing:border-box!important;margin:0!important;padding:0!important}
.cost-sim p{margin:0!important}
/* ヘッダー */
.cost-sim-header{background:#fff!important;border:1px solid #e0e0e0!important;border-top:4px solid #0A9298!important;border-radius:12px 12px 0 0!important;padding:20px 24px!important;display:flex!important;align-items:center!important;gap:14px!important}
.cost-sim-header-icon{flex-shrink:0!important;width:40px!important;height:40px!important;background:linear-gradient(135deg,#0A9298 0%,#00838f 100%)!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important}
.cost-sim-header-icon svg{width:22px!important;height:22px!important;fill:#fff!important}
.cost-sim-header-text{flex:1!important;min-width:0!important}
.cost-sim-header-title{color:#333!important;font-size:17px!important;font-weight:700!important;margin:0 0 2px!important;line-height:1.4!important}
.cost-sim-header-title .cost-sim-accent{color:#0A9298!important;font-weight:900!important}
.cost-sim-header-sub{color:#888!important;font-size:12px!important;line-height:1.5!important}
.cost-sim-body{background:#fff!important;border:1px solid #e0e0e0!important;border-top:none!important;border-radius:0 0 12px 12px!important;padding:24px!important}
/* プレースホルダー */
.cost-sim-body.is-lazy-hidden{display:none!important}
.cost-sim-placeholder{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:320px!important;background:#fff!important;border:1px solid #e0e0e0!important;border-top:none!important;padding:40px 24px!important;color:#999!important;font-size:14px!important;text-align:center!important;line-height:1.6!important}
.cost-sim-placeholder.is-hidden{display:none!important}
.cost-sim-placeholder-spinner{width:32px!important;height:32px!important;border:3px solid #e0e0e0!important;border-top:3px solid #0A9298!important;border-radius:50%!important;animation:csSpin 0.8s linear infinite!important;margin:0 0 12px!important}
@keyframes csSpin{to{transform:rotate(360deg)}}
/* プログレスバー */
.cost-sim-progress{display:flex!important;justify-content:center!important;align-items:center!important;margin:0 0 24px!important;padding:0 8px!important}
.cost-sim-step-ind{display:flex!important;align-items:center!important;gap:6px!important;cursor:pointer!important;background:none!important;border:none!important;padding:4px 8px!important}
.cost-sim-step-num{width:28px!important;height:28px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:13px!important;font-weight:700!important;flex-shrink:0!important;transition:all 0.3s!important;border:2px solid #ddd!important;background:#fff!important;color:#999!important}
.cost-sim-step-num.is-active{background:#0A9298!important;color:#fff!important;border-color:#0A9298!important}
.cost-sim-step-num.is-done{background:#B8E8EB!important;color:#0A9298!important;border-color:#B8E8EB!important}
.cost-sim-step-txt{font-size:12px!important;color:#999!important;white-space:nowrap!important;transition:color 0.3s!important}
.cost-sim-step-txt.is-active{color:#0A9298!important;font-weight:700!important}
.cost-sim-step-txt.is-done{color:#0A9298!important}
.cost-sim-step-line{width:40px!important;height:2px!important;background:#ddd!important;margin:0 6px!important;transition:background 0.3s!important;flex-shrink:0!important}
.cost-sim-step-line.is-done{background:#B8E8EB!important}
/* パネル共通 */
.cost-sim-panel{display:none!important}
.cost-sim-panel.is-visible{display:block!important}
.cost-sim-section-title{font-size:15px!important;font-weight:700!important;color:#333!important;margin:0 0 14px!important;padding:0 0 8px!important;border-bottom:2px solid #0A9298!important;line-height:1.4!important}
.cost-sim-section-title em{color:#0A9298!important;font-style:normal!important}
/* ========== STEP1 ========== */
.cost-sim-filter-group{margin:0 0 16px!important}
.cost-sim-filter-label{font-size:12px!important;font-weight:700!important;color:#555!important;margin:0 0 6px!important}
.cost-sim-filter-btns{display:flex!important;gap:6px!important;flex-wrap:wrap!important}
.cost-sim-fbtn{padding:7px 14px!important;border-radius:20px!important;border:1.5px solid #ddd!important;background:#fff!important;font-size:12px!important;font-weight:600!important;color:#666!important;cursor:pointer!important;transition:all 0.2s!important;white-space:nowrap!important;line-height:1.3!important}
.cost-sim-fbtn:hover{border-color:#0A9298!important;color:#0A9298!important}
.cost-sim-fbtn.is-active{background:#0A9298!important;color:#fff!important;border-color:#0A9298!important}
/* クリニックカード */
.cost-sim-clinic-list{display:flex!important;flex-direction:column!important;gap:8px!important;margin:14px 0 0!important}
.cost-sim-clinic{display:flex!important;align-items:center!important;gap:12px!important;padding:14px!important;border:2px solid #e8e8e8!important;border-radius:10px!important;cursor:pointer!important;transition:all 0.2s!important;background:#fff!important}
.cost-sim-clinic:hover{border-color:#0A9298!important;background:#FAFEFE!important}
.cost-sim-clinic.is-selected{border-color:#0A9298!important;background:linear-gradient(135deg,#F0FAFB 0%,#E8F7F8 100%)!important;box-shadow:0 2px 8px rgba(10,146,152,0.1)!important}
.cost-sim-clinic-logo{width:40px!important;height:40px!important;border-radius:6px!important;object-fit:contain!important;flex-shrink:0!important;background:#f8f8f8!important}
.cost-sim-clinic-info{flex:1!important;min-width:0!important}
.cost-sim-clinic-name{font-size:13px!important;font-weight:700!important;color:#333!important;line-height:1.3!important}
.cost-sim-clinic-meta{font-size:11px!important;color:#888!important;line-height:1.4!important;margin:2px 0 0!important}
.cost-sim-clinic-warn{display:inline-block!important;font-size:10px!important;color:#d32f2f!important;background:#fff5f5!important;padding:1px 6px!important;border-radius:3px!important;margin:3px 0 0!important;line-height:1.4!important}
.cost-sim-clinic-price-area{text-align:right!important;flex-shrink:0!important}
.cost-sim-clinic-price{font-size:18px!important;font-weight:900!important;color:#E07B5A!important;line-height:1.2!important}
.cost-sim-clinic-price small{font-size:12px!important;font-weight:600!important}
.cost-sim-clinic-price-note{font-size:10px!important;color:#888!important;line-height:1.3!important;margin:2px 0 0!important}
.cost-sim-no-data{text-align:center!important;padding:24px!important;color:#999!important;font-size:13px!important}
/* ========== STEP2: 結果 ========== */
.cost-sim-result-desc{font-size:13px!important;color:#555!important;text-align:center!important;margin:0 0 16px!important;line-height:1.5!important}
.cost-sim-your-result{border:2px solid #e0e0e0!important;border-radius:12px!important;padding:18px!important;margin:0 0 16px!important;background:#f8f9fa!important}
.cost-sim-your-result-head{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 12px!important;padding:0 0 10px!important;border-bottom:1px dashed #ddd!important}
.cost-sim-your-result-logo{width:36px!important;height:36px!important;border-radius:6px!important;object-fit:contain!important;background:#fff!important}
.cost-sim-your-result-name{font-size:14px!important;font-weight:700!important;color:#333!important;line-height:1.3!important}
.cost-sim-your-result-label{font-size:11px!important;color:#888!important;margin:0!important}
.cost-sim-row{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:5px 0!important;font-size:12px!important;color:#555!important}
.cost-sim-row-val{font-weight:700!important;white-space:nowrap!important;color:#E07B5A!important}
.cost-sim-row-val.is-red{color:#d32f2f!important}
/* 通常プラン料金（グレー表示） */
.cost-sim-row-regular{opacity:.55!important}
.cost-sim-row-regular-val{color:#999!important;font-weight:600!important}
/* 追加費用トグル */
.cost-sim-extras-section{margin:10px 0 0!important;padding:10px 0 0!important;border-top:1px dashed #ddd!important}
.cost-sim-extras-title{font-size:11px!important;font-weight:700!important;color:#888!important;margin:0 0 8px!important}
.cost-sim-extra-item{display:flex!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;margin:0 0 6px!important;border:1px solid #e0e0e0!important;border-radius:8px!important;cursor:pointer!important;transition:all 0.2s!important;background:#fff!important}
.cost-sim-extra-item:last-of-type{margin:0!important}
.cost-sim-extra-item:hover{border-color:#0A9298!important}
.cost-sim-extra-item.is-checked{border-color:#0A9298!important;background:#F0FAFB!important}
.cost-sim-extra-chk{width:18px!important;height:18px!important;border:2px solid #ccc!important;border-radius:4px!important;flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:all 0.2s!important;background:#fff!important}
.cost-sim-extra-item.is-checked .cost-sim-extra-chk{background:#0A9298!important;border-color:#0A9298!important}
.cost-sim-extra-chk-icon{display:none!important;color:#fff!important;font-size:11px!important;font-weight:700!important;line-height:1!important}
.cost-sim-extra-item.is-checked .cost-sim-extra-chk-icon{display:block!important}
.cost-sim-extra-name{flex:1!important;font-size:12px!important;font-weight:600!important;color:#333!important;line-height:1.3!important}
.cost-sim-extra-name small{font-size:10px!important;color:#888!important;font-weight:400!important}
.cost-sim-extra-cost{font-size:11px!important;font-weight:700!important;color:#999!important;white-space:nowrap!important;flex-shrink:0!important}
.cost-sim-extra-item.is-checked .cost-sim-extra-cost{color:#d32f2f!important}
.cost-sim-extras-hint{font-size:10px!important;color:#aaa!important;margin:6px 0 0!important;line-height:1.4!important}
.cost-sim-extra-item.is-free{cursor:default!important;border-color:#B8E8EB!important;background:#F0FAFB!important}
.cost-sim-extra-item.is-free:hover{border-color:#B8E8EB!important}
.cost-sim-extra-item.is-free .cost-sim-extra-chk{display:none!important}
.cost-sim-extra-item.is-free .cost-sim-extra-cost{color:#0A9298!important;font-weight:700!important}
/* 合計エリア */
.cost-sim-total-line{border-top:2px solid #aaa!important;margin:12px 0 0!important;padding:10px 0 0!important}
.cost-sim-total-row{display:flex!important;justify-content:space-between!important;align-items:baseline!important}
.cost-sim-total-label{font-size:12px!important;font-weight:700!important;color:#333!important}
.cost-sim-total-val{font-size:24px!important;font-weight:900!important;color:#E07B5A!important;line-height:1.2!important}
.cost-sim-total-val small{font-size:13px!important;font-weight:700!important}
.cost-sim-total-note{font-size:10px!important;color:#888!important;text-align:right!important;margin:4px 0 0!important}
/* CTAボタン */
.cost-sim-cta-btn-wrap{text-align:center!important;margin:16px 0 0!important}
.cost-sim-cta-btn{display:inline-block!important;background:linear-gradient(135deg,#e63535,#c0392b)!important;color:#fff!important;font-size:14px!important;font-weight:700!important;padding:14px 32px!important;border-radius:8px!important;text-decoration:none!important;transition:all .25s!important;cursor:pointer!important;border:none!important;line-height:1.4!important;box-shadow:0 2px 12px rgba(230,53,53,.3)!important}
.cost-sim-cta-btn:hover{opacity:0.85!important;transform:translateY(-1px)!important;box-shadow:0 4px 20px rgba(230,53,53,.4)!important}
/* おすすめ記事リンク */
.cost-sim-related{margin:16px 0 0!important;padding:14px!important;background:#f8f9fa!important;border:1px solid #e0e0e0!important;border-radius:10px!important}
.cost-sim-related-title{font-size:12px!important;font-weight:700!important;color:#555!important;margin:0 0 8px!important}
.cost-sim-related-link{display:flex!important;align-items:center!important;gap:8px!important;padding:10px 12px!important;background:#fff!important;border:1px solid #e0e0e0!important;border-radius:8px!important;text-decoration:none!important;color:#0A9298!important;font-size:13px!important;font-weight:600!important;line-height:1.4!important;transition:all 0.2s!important;margin:0 0 6px!important}
.cost-sim-related-link:last-child{margin:0!important}
.cost-sim-related-link:hover{border-color:#0A9298!important;background:#FAFEFE!important;color:#0A9298!important}
.cost-sim-related-link-arrow{color:#0A9298!important;font-size:14px!important;flex-shrink:0!important}
/* ナビゲーション */
.cost-sim-nav{display:flex!important;gap:10px!important;justify-content:center!important;margin:20px 0 0!important}
.cost-sim-btn{padding:12px 28px!important;border-radius:8px!important;font-size:14px!important;font-weight:700!important;cursor:pointer!important;transition:all 0.2s!important;border:none!important;line-height:1.3!important}
.cost-sim-btn.is-back{background:#fff!important;color:#666!important;border:1px solid #ddd!important}
.cost-sim-btn.is-back:hover{background:#f8f9fa!important}
/* フッター */
.cost-sim-footer{margin:12px 0 0!important;padding:10px 14px!important;background:#f8f9fa!important;border-radius:8px!important;font-size:11px!important;color:#999!important;line-height:1.6!important}
/* ========== レスポンシブ ========== */
@media(max-width:600px){
.cost-sim-header{padding:14px 16px!important;gap:10px!important}
.cost-sim-header-icon{width:34px!important;height:34px!important;border-radius:8px!important}
.cost-sim-header-icon svg{width:18px!important;height:18px!important}
.cost-sim-header-title{font-size:14px!important}
.cost-sim-header-sub{font-size:11px!important}
.cost-sim-body{padding:16px 12px!important}
.cost-sim-section-title{font-size:13px!important}
.cost-sim-filter-group{margin:0 0 14px!important}
.cost-sim-step-ind{padding:4px!important;gap:4px!important}
.cost-sim-step-num{width:24px!important;height:24px!important;font-size:11px!important}
.cost-sim-step-txt{font-size:10px!important}
.cost-sim-step-line{width:24px!important;margin:0 2px!important}
.cost-sim-fbtn{padding:8px 12px!important;font-size:11px!important}
.cost-sim-clinic{padding:10px!important;gap:8px!important}
.cost-sim-clinic-logo{width:32px!important;height:32px!important}
.cost-sim-clinic-name{font-size:12px!important}
.cost-sim-clinic-price{font-size:16px!important}
.cost-sim-your-result{padding:14px!important}
.cost-sim-extra-item{padding:7px 8px!important;gap:6px!important}
.cost-sim-total-val{font-size:20px!important}
.cost-sim-btn{padding:10px 20px!important;font-size:13px!important}
.cost-sim-placeholder{min-height:240px!important;padding:30px 16px!important}
}

/* ===== 比較モード ===== */
.cost-sim-compare{margin:16px 0 0!important}
.cost-sim-compare-btn{display:block!important;width:100%!important;padding:10px 16px!important;background:#fff!important;border:1.5px dashed #ccc!important;border-radius:8px!important;color:#888!important;font-size:12px!important;font-weight:600!important;cursor:pointer!important;transition:all .2s!important;font-family:inherit!important}
.cost-sim-compare-btn:hover{border-color:#0A9298!important;color:#0A9298!important}
.cost-sim-compare-body.is-hidden{display:none!important}
.cost-sim-compare-title{font-size:11px!important;font-weight:700!important;color:#555!important;margin:12px 0 8px!important}
.cost-sim-compare-list{display:flex!important;flex-direction:column!important;gap:6px!important;max-height:200px!important;overflow-y:auto!important}
.cost-sim-compare-clinic{display:flex!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;border:1.5px solid #e8e8e8!important;border-radius:8px!important;cursor:pointer!important;transition:all .2s!important;background:#fff!important}
.cost-sim-compare-clinic:hover{border-color:#0A9298!important;background:#FAFEFE!important}
.cost-sim-compare-clinic.is-selected{border-color:#0A9298!important;background:#F0FAFB!important}
.cost-sim-compare-clinic-logo{width:28px!important;height:28px!important;border-radius:5px!important;object-fit:contain!important;flex-shrink:0!important;background:#f8f8f8!important}
.cost-sim-compare-clinic-name{font-size:11px!important;font-weight:600!important;color:#333!important;flex:1!important}
.cost-sim-compare-clinic-price{font-size:13px!important;font-weight:700!important;color:#E07B5A!important;flex-shrink:0!important}
.cost-sim-compare-result.is-hidden{display:none!important}
.cost-sim-compare-vs{display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:8px!important;align-items:center!important;margin:14px 0!important}
.cost-sim-compare-col{background:#f8f9fa!important;border-radius:8px!important;padding:12px!important;text-align:center!important}
.cost-sim-compare-col-name{font-size:11px!important;font-weight:600!important;color:#555!important;margin:0 0 4px!important}
.cost-sim-compare-col-price{font-family:'Outfit',sans-serif!important;font-size:20px!important;font-weight:900!important;color:#E07B5A!important;line-height:1.2!important}
.cost-sim-compare-col-price small{font-size:11px!important;font-weight:600!important}
.cost-sim-compare-mid{font-size:12px!important;color:#bbb!important;text-align:center!important;font-weight:700!important}
.cost-sim-compare-diff{padding:10px 14px!important;border-radius:8px!important;text-align:center!important;font-size:13px!important;font-weight:700!important;margin:0 0 10px!important}
.cost-sim-compare-diff.is-cheaper{background:#E6F5F5!important;color:#077a80!important}
.cost-sim-compare-diff.is-expensive{background:#FBF2EF!important;color:#C4613F!important}
.cost-sim-compare-diff.is-same{background:#f5f5f5!important;color:#888!important}
.cost-sim-compare-cta{display:block!important;width:100%!important;text-align:center!important;padding:10px!important;border-radius:8px!important;font-size:13px!important;font-weight:700!important;color:#fff!important;background:linear-gradient(135deg,#e63535,#c0392b)!important;text-decoration:none!important;cursor:pointer!important;transition:opacity .2s!important;border:none!important;font-family:inherit!important}
.cost-sim-compare-cta:hover{opacity:.85!important}
.cost-sim-compare-cta-name{display:block!important;font-size:11px!important;font-weight:500!important;opacity:.85!important;margin:0 0 2px!important}