/* 在日ライフナビ components v20260619 */

/* ── CTA Buttons (2 variants) ──────────────────────────────── */
.cta-btn-primary,.cta-btn-secondary{
  display:inline-block;padding:11px 22px;border-radius:8px;
  font-weight:700;font-size:15px;text-decoration:none;text-align:center;
  transition:opacity .18s,transform .14s;cursor:pointer;line-height:1.4;
  white-space:nowrap;
}
.cta-btn-primary{background:#00B4D8;color:#fff;}
.cta-btn-primary:hover{opacity:.85;transform:translateY(-1px);}
.cta-btn-secondary{background:#FF6B35;color:#fff;}
.cta-btn-secondary:hover{opacity:.85;transform:translateY(-1px);}

/* ── In-body CTA blocks ─────────────────────────────────────── */
.body-cta{
  background:linear-gradient(135deg,#f0f8ff 0%,#e8f4fd 100%);
  border:1.5px solid #00B4D8;border-radius:12px;
  padding:16px 18px;margin:26px 0;
  display:flex;flex-direction:column;gap:10px;
}
.body-cta p{margin:0;font-size:14px;color:#0B1E3D;font-weight:600;}
.body-cta-orange{
  background:linear-gradient(135deg,#fff8f5 0%,#fff0e8 100%);
  border-color:#FF6B35;
}

/* ── Ranking Box ────────────────────────────────────────────── */
.rank-box{
  background:#fff;border-radius:14px;
  box-shadow:0 2px 12px rgba(0,0,80,.09);
  padding:20px;margin:26px 0;
}
.rank-box-title{
  font-size:16px;font-weight:700;color:#0B1E3D;
  border-left:4px solid #00B4D8;padding-left:10px;margin-bottom:14px;
}
.rank-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px solid #f0f4f8;
}
.rank-item:last-child{border-bottom:none;}
.rank-badge{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;color:#fff;
}
.rank-1{background:#F59E0B;}
.rank-2{background:#94A3B8;}
.rank-3{background:#B45309;}
.rank-n{background:#64748B;}
.rank-info{flex:1;min-width:0;}
.rank-name{font-size:15px;font-weight:700;color:#0B1E3D;}
.rank-reason{font-size:12px;color:#64748B;margin-top:2px;}
.rank-cta{flex-shrink:0;}

/* ── Comparison Table ───────────────────────────────────────── */
.cmp-wrap{overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch;}
.cmp-table{width:100%;border-collapse:collapse;font-size:13px;min-width:460px;}
.cmp-table th{
  background:#0B1E3D;color:#fff;
  padding:10px 12px;text-align:center;
}
.cmp-table th:first-child{background:#1565C0;text-align:left;}
.cmp-table td{
  padding:10px 12px;border-bottom:1px solid #e8f0f8;
  text-align:center;vertical-align:middle;
}
.cmp-table td:first-child{text-align:left;font-weight:600;color:#0B1E3D;}
.cmp-table tr:nth-child(even) td{background:#f8faff;}
.cmp-best{color:#16A34A;font-weight:700;}
.cmp-poor{color:#DC2626;}
.cmp-cta-row td{
  padding:12px;background:#f0f8ff!important;text-align:center!important;
}

/* ── Exit-intent Popup ──────────────────────────────────────── */
.zl-exit-overlay{
  position:fixed;inset:0;background:rgba(11,30,61,.52);
  z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:16px;animation:zlFadeIn .2s ease;
}
.zl-exit-overlay.hidden{display:none;}
.zl-exit-popup{
  background:#fff;border-radius:16px;padding:26px 22px 20px;
  max-width:400px;width:100%;position:relative;
  box-shadow:0 20px 60px rgba(0,0,80,.22);animation:zlPopIn .25s ease;
}
.zl-exit-popup h3{
  font-size:17px;color:#0B1E3D;margin:0 0 4px;padding-right:28px;
}
.zl-exit-popup>p{font-size:13px;color:#64748B;margin:0 0 16px;}
.zl-exit-close{
  position:absolute;top:12px;right:12px;background:none;border:none;
  font-size:22px;cursor:pointer;color:#94A3B8;padding:4px;line-height:1;
}
.zl-exit-close:hover{color:#0B1E3D;}
.zl-exit-links{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.zl-exit-link{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:10px 12px;background:#f5f8ff;
  border-radius:8px;border:1px solid #e2eaf8;transition:background .15s;
}
.zl-exit-link:hover{background:#e8f0ff;}
.zl-exit-icon{font-size:20px;flex-shrink:0;}
.zl-exit-text{font-size:13px;font-weight:600;color:#0B1E3D;}
.zl-exit-dismiss{
  display:block;width:100%;text-align:center;
  font-size:12px;color:#94A3B8;cursor:pointer;
  background:none;border:none;padding:4px;
}
.zl-exit-dismiss:hover{color:#64748B;}

@keyframes zlFadeIn{from{opacity:0}to{opacity:1}}
@keyframes zlPopIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}

/* ── Scroll-to-top FAB ─────────────────────────────────────── */
#zlScrollTop{
  position:fixed;bottom:72px;right:16px;z-index:998;
  width:40px;height:40px;border-radius:50%;
  background:#00B4D8;color:#fff;border:none;
  font-size:18px;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,80,.25);
  display:none;line-height:1;transition:background .15s;
}
#zlScrollTop:hover{background:#0096ba;}

/* ── Mobile ─────────────────────────────────────────────────── */
@media(max-width:640px){
  .body-cta .cta-btn-primary,
  .body-cta .cta-btn-secondary{
    display:block;width:100%;text-align:center;
    padding:12px;box-sizing:border-box;
  }
  .rank-item{flex-wrap:wrap;}
  .rank-cta{width:100%;margin-top:6px;}
  .rank-cta .cta-btn-primary,
  .rank-cta .cta-btn-secondary{
    display:block;width:100%;text-align:center;box-sizing:border-box;
  }
  .zl-exit-popup{padding:20px 16px 16px;}
  .zl-exit-popup h3{font-size:15px;}
  #zlScrollTop{bottom:20px;}
}