/**
 * 医療脱毛クリニック料金比較ツール v5.2
 * CSS外部ファイル（ブラウザキャッシュ対応）
 */

/* ===== リセット・ベース ===== */
.ac-tool *{box-sizing:border-box!important;margin:0!important;padding:0!important}
.ac-tool{max-width:960px!important;margin:0 auto!important;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif!important;color:#333!important;line-height:1.6!important;-webkit-font-smoothing:antialiased!important}

/* ===== プレースホルダー ===== */
.ac-tool-placeholder{min-height:500px!important;background:#f8f9fa!important;border:1px solid #e0e0e0!important;border-radius:12px!important}

/* ===== プラン選択UI ===== */
.ac-plan-selector{background:#fff!important;border:1px solid #e0e0e0!important;border-radius:12px 12px 0 0!important;padding:20px 16px 16px!important;text-align:center!important}
.ac-plan-selector-title{font-size:13px!important;color:#666!important;margin-bottom:10px!important;font-weight:600!important}
.ac-plan-pills{display:flex!important;gap:6px!important;justify-content:center!important;flex-wrap:wrap!important}
.ac-pill{padding:8px 16px!important;border-radius:20px!important;border:1.5px solid #ccc!important;background:#fff!important;font-size:12px!important;font-weight:600!important;color:#666!important;cursor:pointer!important;transition:all .2s!important;white-space:nowrap!important}
.ac-pill:hover{border-color:#0A9298!important;color:#0A9298!important}
.ac-pill.is-active{background:#0A9298!important;border-color:#0A9298!important;color:#fff!important}

/* ===== 比較テーブル本体 ===== */
.ac-body{background:#fff!important;border:1px solid #e0e0e0!important;border-top:none!important;overflow:visible!important}

/* ===== ヘッダー列 ===== */
.ac-header{display:grid!important;grid-template-columns:repeat(3,1fr)!important;border-bottom:1px solid #eee!important;position:sticky!important;top:var(--ac-sticky-top,0px)!important;z-index:20!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.06)!important}
.ac-header-cell{padding:16px 10px 14px!important;text-align:center!important;border-right:1px solid #f0f0f0!important;position:relative!important}
.ac-header-cell:last-child{border-right:none!important}

/* ===== クリニック選択ドロップダウン ===== */
.ac-selector{position:relative!important;display:inline-block!important;width:100%!important}
.ac-selector-trigger{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;cursor:pointer!important;padding:4px 8px!important;border-radius:6px!important;transition:background .2s!important;border:none!important;background:none!important;width:100%!important}
.ac-selector-trigger:hover{background:#f0f7f7!important}
.ac-selector-trigger::after{content:"▼"!important;font-size:8px!important;color:#0A9298!important;margin-left:2px!important;transition:transform .2s!important}
.ac-selector.is-open .ac-selector-trigger::after{transform:rotate(180deg)!important}
.ac-selector-dropdown{position:absolute!important;top:100%!important;left:50%!important;transform:translateX(-50%)!important;width:220px!important;max-height:320px!important;overflow-y:auto!important;background:#fff!important;border:1px solid #ddd!important;border-radius:10px!important;box-shadow:0 8px 30px rgba(0,0,0,.15)!important;z-index:100!important;display:none!important;padding:6px!important}
.ac-selector.is-open .ac-selector-dropdown{display:block!important}
.ac-selector-option{display:flex!important;align-items:center!important;gap:10px!important;padding:8px 10px!important;border-radius:6px!important;cursor:pointer!important;transition:background .15s!important;border:none!important;background:none!important;width:100%!important;text-align:left!important}
.ac-selector-option:hover{background:#f0f7f7!important}
.ac-selector-option.is-selected{background:#e8f7f8!important}
.ac-selector-option.is-disabled{opacity:.35!important;pointer-events:none!important}
.ac-selector-opt-logo{width:36px!important;height:36px!important;border-radius:6px!important;object-fit:contain!important;border:1px solid #eee!important;flex-shrink:0!important}
.ac-selector-opt-info{flex:1!important;min-width:0!important}
.ac-selector-opt-name{font-size:12px!important;font-weight:bold!important;color:#333!important;line-height:1.3!important}
.ac-selector-opt-meta{font-size:10px!important;color:#888!important}
.ac-selector-opt-check{font-size:14px!important;color:#0A9298!important;font-weight:bold!important;flex-shrink:0!important}

/* ===== ヘッダー内コンテンツ ===== */
.ac-logo-wrap{width:64px!important;height:64px!important;margin:0 auto 6px!important;cursor:pointer!important}
.ac-logo{width:64px!important;height:64px!important;border-radius:10px!important;object-fit:contain!important;border:1px solid #eee!important;background:#fff!important;transition:transform .2s!important}
.ac-logo:hover{transform:scale(1.06)!important}
.ac-clinic-name{font-size:13px!important;font-weight:bold!important;color:#333!important;line-height:1.3!important}
.ac-clinic-meta{font-size:11px!important;color:#888!important;margin-top:2px!important}
.ac-badge{display:inline-block!important;margin-top:6px!important;padding:3px 10px!important;border-radius:12px!important;font-size:10px!important;font-weight:bold!important;line-height:1.5!important;white-space:nowrap!important}
.ac-badge-teal{background:#e8f7f8!important;color:#0A9298!important;border:1px solid #b8e8eb!important}
.ac-badge-pink{background:#fff0f5!important;color:#d61a5e!important;border:1px solid #ffb8cf!important}
.ac-badge-amber{background:#fff8e1!important;color:#e6a000!important;border:1px solid #ffe082!important}

/* ===== 比較セクション共通 ===== */
.ac-section{border-top:1px solid #f0f0f0!important;margin-top:4px!important}
.ac-section-title{padding:18px 16px 0!important;font-size:12px!important;font-weight:bold!important;color:#0A9298!important;display:flex!important;align-items:center!important;gap:6px!important}
.ac-section-title::before{content:""!important;display:inline-block!important;width:3px!important;height:14px!important;background:#0A9298!important;border-radius:2px!important;flex-shrink:0!important}

/* ===== 比較行 ===== */
.ac-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.ac-cell{padding:12px!important;text-align:center!important;border-right:1px solid #f5f5f5!important;font-size:13px!important;min-height:48px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
.ac-cell:last-child{border-right:none!important}
.ac-row:nth-child(even) .ac-cell{background:#fafcfc!important}

/* ===== 料金セル ===== */
.ac-cell-price{justify-content:flex-start!important}
.ac-price-main{font-size:20px!important;font-weight:bold!important;color:#0A9298!important;line-height:1.2!important;letter-spacing:.3px!important}
.ac-price-main small{font-size:12px!important;font-weight:normal!important}
.ac-price-per{font-size:10px!important;color:#888!important;margin-top:2px!important}
.ac-price-note{font-size:10px!important;color:#d32f2f!important;margin-top:2px!important;font-weight:600!important}
.ac-price-na{font-size:12px!important;color:#ccc!important}
.ac-campaign-box{margin-top:8px!important;padding:8px 10px!important;background:#fff0f5!important;border:none!important;border-left:3px solid #d61a5e!important;border-radius:0 6px 6px 0!important}
.ac-campaign-label{font-size:10px!important;font-weight:700!important;color:#d61a5e!important;margin-bottom:2px!important}
.ac-campaign-price{font-size:16px!important;font-weight:700!important;color:#d61a5e!important;line-height:1.2!important}
.ac-campaign-price small{font-size:10px!important;font-weight:400!important}
.ac-campaign-note{font-size:9px!important;color:#888!important;margin-top:2px!important}
.ac-price-text-link{display:inline!important;font-size:11px!important;font-weight:600!important;color:#d61a5e!important;cursor:pointer!important;border-bottom:1px dotted #d61a5e!important;padding-bottom:1px!important;margin-top:8px!important;line-height:1.4!important;transition:opacity .2s!important}
.ac-price-text-link:hover{opacity:.7!important}

/* ===== 脱毛機セル ===== */
.ac-equip-item{display:flex!important;align-items:center!important;gap:6px!important;margin-bottom:4px!important}
.ac-equip-item:last-child{margin-bottom:0!important}
.ac-equip-img{width:28px!important;height:28px!important;border-radius:4px!important;object-fit:contain!important}
.ac-equip-text{text-align:left!important;font-size:11px!important;line-height:1.3!important}
.ac-equip-name{font-weight:600!important;color:#444!important}
.ac-equip-type{font-size:9px!important;color:#888!important}

/* ===== USPテキスト ===== */
.ac-usp-text{font-size:12px!important;color:#444!important;line-height:1.7!important;text-align:left!important;margin:0!important;padding:0!important}

/* ===== サービス比較セル ===== */
.ac-spec-cell{padding:14px 10px!important;min-height:auto!important;border-bottom:1px solid #f0f0f0!important}
.ac-spec-label{font-size:10px!important;color:#999!important;margin-bottom:5px!important;text-align:center!important}
.ac-spec-val{font-size:13px!important;font-weight:600!important;color:#333!important;text-align:center!important;line-height:1.7!important}
.ac-spec-val-compact{font-size:11px!important;font-weight:500!important;color:#555!important;text-align:center!important;line-height:1.6!important}
.ac-spec-sub{font-size:10px!important;color:#888!important;text-align:center!important;line-height:1.4!important}

/* ===== ハイライト ===== */
.ac-val-highlight{color:#0A9298!important;font-weight:bold!important;font-size:14px!important}

/* ===== 背景マーク（ウォーターマーク） ===== */
.ac-spec-cell[data-mark]{position:relative!important;overflow:hidden!important}
.ac-spec-cell[data-mark]::before{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;font-size:52px!important;font-weight:bold!important;pointer-events:none!important;z-index:0!important;line-height:1!important}
.ac-spec-cell[data-mark] *{position:relative!important;z-index:1!important}
.ac-spec-cell[data-mark="good"]::before{content:"◯"!important;color:rgba(10,146,152,.16)!important}
.ac-spec-cell[data-mark="mid"]::before{content:"△"!important;color:rgba(230,160,0,.16)!important}
.ac-spec-cell[data-mark="bad"]::before{content:"✕"!important;color:rgba(211,47,47,.16)!important}

/* ===== 店舗検索リンク ===== */
.ac-store-search{font-size:12px!important;color:#0A9298!important;font-weight:600!important;cursor:pointer!important;text-decoration:none!important;transition:all .2s!important;display:inline-flex!important;align-items:center!important;gap:2px!important}
.ac-store-search:hover{text-decoration:underline!important;transform:translateX(2px)!important}

/* ===== 割引タグ ===== */
.ac-discount-tags{display:flex!important;flex-direction:column!important;gap:4px!important;align-items:center!important}
.ac-discount-tag{background:none!important;color:#d61a5e!important;border:none!important;padding:0!important;border-radius:0!important;text-align:center!important;line-height:1.4!important;display:inline-block!important}
.ac-discount-name{font-size:10px!important;font-weight:600!important;display:block!important;color:#d61a5e!important}
.ac-discount-amount{font-size:12px!important;font-weight:bold!important;display:block!important;color:#d61a5e!important;letter-spacing:.3px!important}
.ac-discount-none{font-size:11px!important;color:#ccc!important}

/* ===== 地方ブロック ===== */
.ac-region-list{display:flex!important;flex-direction:column!important;gap:4px!important;width:100%!important}
.ac-region-block{background:#f8fafa!important;border-radius:5px!important;padding:5px 8px!important;border:1px solid #eef4f4!important;width:100%!important}
.ac-region-name{font-size:11px!important;font-weight:bold!important;color:#0A9298!important;margin-bottom:2px!important}
.ac-region-clinics{font-size:12px!important;color:#555!important;line-height:1.5!important}
.ac-region-clinic-name{font-size:12px!important;color:#555!important;line-height:1.7!important;text-align:left!important}

/* ===== アコーディオン ===== */
.ac-accordion-toggle{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:12px!important;cursor:pointer!important;font-size:12px!important;color:#0A9298!important;font-weight:600!important;background:linear-gradient(135deg,#f0fafb,#e8f7f8)!important;border:none!important;border-top:1px solid #eee!important;width:100%!important;transition:all .2s!important}
.ac-accordion-toggle:hover{background:#e0f5f6!important}
.ac-accordion-icon{display:inline-block!important;transition:transform .3s!important;font-size:10px!important}
.ac-accordion-toggle.is-open .ac-accordion-icon{transform:rotate(180deg)!important}
.ac-accordion-content{max-height:0!important;overflow:hidden!important;transition:max-height .4s ease!important}
.ac-accordion-content.is-open{max-height:2000px!important}

/* ===== CTAボタン行 ===== */
.ac-cta-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;border-top:2px solid #eee!important}
.ac-cta-cell{padding:16px 10px!important;text-align:center!important;border-right:1px solid #f0f0f0!important;display:flex!important;flex-direction:column!important;gap:6px!important}
.ac-cta-cell:last-child{border-right:none!important}
.ac-btn{display:block!important;text-align:center!important;padding:10px 6px!important;border-radius:8px!important;font-size:13px!important;font-weight:bold!important;text-decoration:none!important;cursor:pointer!important;transition:opacity .2s!important;border:none!important;line-height:1.3!important}
.ac-btn:hover{opacity:.85!important}
.ac-btn-primary{background:#ff4444!important;color:#fff!important}
.ac-btn-secondary{background:#17a2b8!important;color:#fff!important}
.ac-microcopy{font-size:11px!important;color:#0A9298!important;font-weight:600!important;line-height:1.4!important;margin-bottom:2px!important;text-align:center!important}

/* ===== フッター ===== */
.ac-footer{padding:14px 20px!important;background:#f8f9fa!important;border:1px solid #e0e0e0!important;border-top:none!important;border-radius:0 0 12px 12px!important}
.ac-footer p{font-size:11px!important;color:#999!important;line-height:1.5!important}

/* ===== スマホ対応（2院比較） ===== */
@media(max-width:680px){
  .ac-tool-placeholder{min-height:400px!important}
  .ac-mobile-selector{display:flex!important;border-bottom:1px solid #eee!important;background:#fafafa!important}
  .ac-mobile-btn{flex:1!important;padding:8px 4px!important;text-align:center!important;font-size:11px!important;font-weight:600!important;color:#888!important;background:none!important;border:none!important;border-bottom:2px solid transparent!important;cursor:pointer!important;transition:all .2s!important}
  .ac-mobile-btn.is-active{color:#0A9298!important;border-bottom-color:#0A9298!important;background:#fff!important}
  .ac-header,.ac-row,.ac-cta-row{grid-template-columns:repeat(2,1fr)!important}
  .ac-header-cell.is-hidden,.ac-cell.is-hidden,.ac-cta-cell.is-hidden{display:none!important}
  .ac-plan-selector{padding:16px 12px 12px!important}
  .ac-pill{padding:6px 12px!important;font-size:11px!important}
  .ac-logo-wrap{width:48px!important;height:48px!important}
  .ac-logo{width:48px!important;height:48px!important}
  .ac-clinic-name{font-size:12px!important}
  .ac-price-main{font-size:17px!important}
  .ac-campaign-price{font-size:14px!important}
  .ac-price-text-link{font-size:10px!important}
  .ac-cell{padding:10px 8px!important;font-size:12px!important}
  .ac-section-title{padding:10px 12px 0!important;font-size:11px!important}
  .ac-btn{font-size:12px!important;padding:9px 4px!important}
  .ac-microcopy{font-size:10px!important}
  .ac-cta-cell{padding:12px 8px!important}
  .ac-region-name{font-size:10px!important}
  .ac-region-clinics{font-size:11px!important}
  .ac-region-clinic-name{font-size:11px!important}
  .ac-spec-cell{padding:12px 6px!important}
  .ac-spec-label{font-size:9px!important}
  .ac-spec-val{font-size:11px!important}
  .ac-spec-val-compact{font-size:10px!important}
  .ac-spec-sub{font-size:9px!important}
  .ac-val-highlight{font-size:12px!important}
  .ac-usp-text{font-size:11px!important}
  .ac-branch-row{font-size:9px!important}
  .ac-discount-tag{padding:0!important}
  .ac-discount-name{font-size:9px!important}
  .ac-discount-amount{font-size:11px!important}
  .ac-selector-dropdown{width:180px!important}
  .ac-selector-opt-logo{width:28px!important;height:28px!important}
  .ac-selector-opt-name{font-size:11px!important}
}
@media(min-width:681px){
  .ac-mobile-selector{display:none!important}
}