/* ============================================================= */
/* VPN RANKING LP STYLES                                          */
/* ============================================================= */
.vpn-lp * { box-sizing: border-box; }
.vpn-lp {
  max-width: 1200px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a2e;
  line-height: 1.7;
  font-size: 16px;
}
.vpn-lp a { color: inherit; text-decoration: none; }

/* Override SWELL LP content width for wider layout */
.lp-content__inner { max-width: 1200px !important; }
.lp-content__postContent { padding: 0 20px !important; }

/* Layout */
.vpn-lp-layout { display: flex; gap: 2rem; align-items: flex-start; }
.vpn-lp-main { flex: 1; min-width: 0; }
.vpn-lp-sidebar { width: 280px; flex-shrink: 0; position: sticky; top: 20px; }

/* Hero */
.vpn-hero {
  text-align: center; padding: 3.5rem 2rem;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: #fff; border-radius: 16px; margin-bottom: 2rem;
  position: relative; overflow: hidden;
}
.vpn-hero::before {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(99,102,241,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(255,107,53,0.1) 0%, transparent 50%);
  pointer-events: none;
}
.vpn-hero-content { position: relative; z-index: 1; }
.vpn-hero-badge {
  display: inline-block; background: rgba(255,255,255,0.12);
  padding: 0.4rem 1.2rem; border-radius: 20px; font-size: 0.85rem;
  margin-bottom: 1.2rem; border: 1px solid rgba(255,255,255,0.15);
}
.vpn-hero h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.3; }
.vpn-hero-subtitle { font-size: 1.1rem; opacity: 0.9; max-width: 650px; margin: 0 auto 1.5rem; }
.vpn-hero-meta { font-size: 0.85rem; opacity: 0.7; }
.vpn-hero-meta span { margin: 0 0.8rem; }

/* Trust Bar */
.vpn-trust-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1.5rem; padding: 1.2rem 1.5rem; background: #f8f9fb;
  border-radius: 12px; margin-bottom: 2rem;
}
.vpn-trust-bar-label { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.vpn-trust-logo { font-size: 0.95rem; font-weight: 700; color: #aaa; opacity: 0.6; }

/* Quick Guide */
.vpn-quick-guide { background: #fff; border: 1px solid #e8eaed; border-radius: 12px; padding: 1.8rem; margin-bottom: 2rem; }
.vpn-quick-guide h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.2rem; }
.vpn-quick-list { list-style: none; padding: 0; margin: 0; }
.vpn-quick-list li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px solid #f3f4f6; font-size: 0.95rem; }
.vpn-quick-list li:last-child { border-bottom: none; }
.vpn-quick-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: #302b63; color: #fff;
  border-radius: 6px; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.vpn-quick-rank.rank-1 { background: #ff6b35; }
.vpn-quick-name { font-weight: 600; }
.vpn-quick-desc { color: #666; }

/* Ranking Cards */
.vpn-ranking-section { margin-bottom: 2rem; }
.vpn-ranking-section > h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.vpn-card {
  background: #fff; border: 1px solid #e8eaed; border-radius: 14px;
  margin-bottom: 1.5rem; overflow: hidden; transition: box-shadow 0.3s;
}
.vpn-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.vpn-card.vpn-card-recommended { border: 2px solid #ff6b35; box-shadow: 0 4px 20px rgba(255,107,53,0.12); }
.vpn-card-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.5rem; background: #fafbfc; border-bottom: 1px solid #f0f1f3;
}
.vpn-card-recommended .vpn-card-header { background: linear-gradient(90deg, #fff8f5, #fafbfc); }
.vpn-card-rank {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: #302b63; color: #fff;
  border-radius: 8px; font-size: 1rem; font-weight: 800; flex-shrink: 0;
}
.vpn-card-recommended .vpn-card-rank { background: #ff6b35; }
.vpn-card-logo { display: flex; align-items: center; font-size: 1.3rem; font-weight: 800; color: #302b63; }
.vpn-card-logo img { max-width: 140px; max-height: 40px; object-fit: contain; }
.vpn-card-logo-placeholder::before {
  content: attr(data-initial);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: linear-gradient(135deg, #302b63, #6366f1);
  color: #fff; border-radius: 8px; font-size: 1rem; font-weight: 800;
  margin-right: 0.5rem; flex-shrink: 0;
}
.vpn-card-badges { display: flex; gap: 0.5rem; margin-left: auto; }
.vpn-badge-recommended { background: #ff6b35; color: #fff; padding: 0.25rem 0.8rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.vpn-badge-offer { background: #10b981; color: #fff; padding: 0.25rem 0.8rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }

.vpn-card-body { display: grid; grid-template-columns: 1fr minmax(160px, 200px) minmax(140px, 160px); gap: 1.5rem; padding: 1.5rem; align-items: start; }
.vpn-card-desc { font-size: 0.9rem; color: #555; margin-bottom: 1rem; line-height: 1.6; }
.vpn-card-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.vpn-card-features li { font-size: 0.85rem; padding: 0.15rem 0; }
.vpn-card-features .vpn-pro { color: #059669; }
.vpn-card-features .vpn-pro::before { content: "\2713 "; font-weight: 700; }
.vpn-card-features .vpn-con { color: #dc2626; }
.vpn-card-features .vpn-con::before { content: "\2717 "; font-weight: 700; }

.vpn-score-main { text-align: center; margin-bottom: 1rem; }
.vpn-score-number { font-size: 2.5rem; font-weight: 800; color: #302b63; line-height: 1; }
.vpn-score-label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.vpn-score-stars { text-align: center; color: #f59e0b; font-size: 1rem; margin-bottom: 0.8rem; }
.vpn-sub-score { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.8rem; }
.vpn-sub-score-label { width: 70px; color: #666; flex-shrink: 0; }
.vpn-sub-score-bar { flex: 1; height: 6px; background: #e8eaed; border-radius: 3px; overflow: hidden; }
.vpn-sub-score-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #302b63, #6366f1); }
.vpn-sub-score-val { width: 28px; text-align: right; font-weight: 600; color: #302b63; }

.vpn-card-cta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.vpn-card-price-amount { font-size: 1.5rem; font-weight: 800; color: #1a1a2e; }
.vpn-card-price-period { font-size: 0.75rem; color: #888; }
.vpn-card-cta-btn {
  display: block; width: 100%; background: #ff6b35; color: #fff !important;
  padding: 0.8rem 1rem; border-radius: 8px; font-size: 0.95rem; font-weight: 700;
  text-align: center; transition: all 0.2s; box-shadow: 0 2px 8px rgba(255,107,53,0.3);
}
.vpn-card-cta-btn:hover { background: #e55a2b; transform: translateY(-1px); }
.vpn-card-guarantee { font-size: 0.75rem; color: #888; text-align: center; }
.vpn-card-users { font-size: 0.75rem; color: #999; text-align: center; }
.vpn-card-footer {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  padding: 0.8rem 1.5rem; background: #fafbfc; border-top: 1px solid #f0f1f3; font-size: 0.8rem; color: #888;
}
.vpn-device-icons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vpn-device-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: #e8eaed; border-radius: 6px; font-size: 0.7rem; font-weight: 600; color: #555;
}
.vpn-card-devices-count { white-space: nowrap; font-size: 0.78rem; color: #666; }

/* Comparison Table */
.vpn-comparison-section { margin-bottom: 2rem; }
.vpn-comparison-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.vpn-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid #e8eaed; }
.vpn-comp-table { width: 100%; min-width: 700px; border-collapse: collapse; background: #fff; font-size: 0.88rem; }
.vpn-comp-table thead th { background: #302b63; color: #fff; padding: 0.9rem 1rem; text-align: left; font-weight: 600; white-space: nowrap; }
.vpn-comp-table tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; }
.vpn-comp-table tbody tr:last-child td { border-bottom: none; }
.vpn-comp-table tbody tr:hover { background: #f8f9fb; }
.vpn-comp-table .vpn-comp-highlight { background: #fff8f5; }
.vpn-comp-table .vpn-comp-name { font-weight: 700; white-space: nowrap; }
.vpn-comp-check { color: #10b981; font-weight: 700; }

/* Trials */
.vpn-trials-section { margin-bottom: 2rem; }
.vpn-trials-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.vpn-trials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.vpn-trial-card { background: #fff; border: 1px solid #e8eaed; border-radius: 12px; padding: 1.5rem; text-align: center; }
.vpn-trial-card.trial-featured { border: 2px solid #ff6b35; position: relative; }
.vpn-trial-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #ff6b35; color: #fff; padding: 0.2rem 0.8rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.vpn-trial-name { font-size: 1.2rem; font-weight: 800; color: #302b63; margin-bottom: 0.3rem; }
.vpn-trial-score { font-size: 0.85rem; color: #f59e0b; margin-bottom: 0.8rem; }
.vpn-trial-price { font-size: 1.4rem; font-weight: 800; color: #1a1a2e; }
.vpn-trial-period { font-size: 0.8rem; color: #888; margin-bottom: 0.8rem; }
.vpn-trial-guarantee { font-size: 0.85rem; color: #059669; font-weight: 600; margin-bottom: 1rem; }
.vpn-trial-btn { display: block; background: #ff6b35; color: #fff !important; padding: 0.7rem; border-radius: 8px; font-weight: 700; font-size: 0.9rem; }
.vpn-trial-btn:hover { background: #e55a2b; }

/* FAQ */
.vpn-faq-section { margin-bottom: 2rem; }
.vpn-faq-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.vpn-faq-item { background: #fff; border: 1px solid #e8eaed; border-radius: 10px; margin-bottom: 0.8rem; overflow: hidden; }
.vpn-faq-q { padding: 1rem 1.3rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.vpn-faq-q:hover { background: #f8f9fb; }
.vpn-faq-q::after { content: "+"; font-size: 1.3rem; font-weight: 300; color: #888; flex-shrink: 0; margin-left: 1rem; }
.vpn-faq-item.open .vpn-faq-q::after { content: "\2212"; }
.vpn-faq-a { padding: 0 1.3rem 1rem; font-size: 0.9rem; color: #555; line-height: 1.7; display: none; }
.vpn-faq-item.open .vpn-faq-a { display: block; }

/* Sidebar */
.vpn-sidebar-card { background: #fff; border: 1px solid #e8eaed; border-radius: 12px; padding: 1.3rem; margin-bottom: 1rem; }
.vpn-sidebar-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.vpn-sidebar-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid #f3f4f6; }
.vpn-sidebar-item:last-child { border-bottom: none; }
.vpn-sidebar-rank { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #302b63; color: #fff; border-radius: 5px; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.vpn-sidebar-rank.rank-1 { background: #ff6b35; }
.vpn-sidebar-name { font-weight: 600; font-size: 0.88rem; flex: 1; }
.vpn-sidebar-score { font-weight: 700; font-size: 0.85rem; color: #302b63; }
.vpn-sidebar-btn { display: block; text-align: center; background: #ff6b35; color: #fff !important; padding: 0.6rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem; margin-top: 0.8rem; }
.vpn-sidebar-btn:hover { background: #e55a2b; }

/* Footer */
.vpn-lp-footer { text-align: center; padding: 2rem 1.5rem; font-size: 0.8rem; color: #999; border-top: 1px solid #e8eaed; margin-top: 2rem; }
.vpn-footer-nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.vpn-footer-nav a { color: #666; text-decoration: none; transition: color 0.2s; }
.vpn-footer-nav a:hover { color: #3b82f6; text-decoration: underline; }
.vpn-footer-sep { color: #ccc; }
.vpn-footer-copy { margin-top: 0.8rem; font-size: 0.75rem; color: #aaa; }
.vpn-legal-page { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; line-height: 1.8; color: #333; }
.vpn-legal-page h2 { margin-top: 2rem; margin-bottom: 0.8rem; color: #1a1a2e; font-size: 1.3rem; }
.vpn-legal-page h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; color: #333; font-size: 1.1rem; }
.vpn-legal-page ul { margin: 0.5rem 0 1rem 1.5rem; }
.vpn-legal-page li { margin-bottom: 0.4rem; }

/* === VPN LP Post overrides (make post layout match LP template) === */

/* Expand article width to match LP full-width layout */
.vpn-lp-post .l-mainContent.l-article { max-width: 100% !important; }
.vpn-lp-post .l-mainContent__inner { max-width: 1200px !important; margin: 0 auto; }

/* Hide SWELL article chrome: title bar, meta, prev/next, related, comments, author, share */
.vpn-lp-post .p-articleHead,
.vpn-lp-post .p-articleFoot,
.vpn-lp-post .p-pnLinks,
.vpn-lp-post .l-articleBottom,
.vpn-lp-post .c-shareBtns,
.vpn-lp-post #comments,
.vpn-lp-post .p-authorBox { display: none !important; }

/* Responsive */

/* Tablet landscape: サイドバー非表示、2カラムに縮小 */
@media (max-width: 1100px) {
  .vpn-card-body { grid-template-columns: 1fr minmax(140px, 180px); gap: 1.2rem; }
  .vpn-card-cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .vpn-card-cta-btn { width: auto; padding: 0.8rem 2rem; }
}

/* Tablet: サイドバー非表示 */
@media (max-width: 1024px) {
  .vpn-lp-sidebar { display: none; }
  .vpn-lp-layout { display: block; }
}

/* Small tablet / Mobile landscape: 1カラム */
@media (max-width: 768px) {
  .vpn-card-body { grid-template-columns: 1fr; gap: 1rem; }
  .vpn-card-scores { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .vpn-score-main { margin-bottom: 0; }
  .vpn-card-features { grid-template-columns: 1fr; }
  .vpn-trials-grid { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 600px) {
  .vpn-hero { padding: 2rem 1rem; border-radius: 0; }
  .vpn-hero h1 { font-size: 1.5rem; }
  .vpn-card-header { flex-wrap: wrap; }
  .vpn-card-badges { margin-left: 0; margin-top: 0.5rem; }
}