/* ============================================================
   KAZI ONLINE — Shared + Responsive CSS
   ============================================================ */

/* ===== Big CTA (フッター上SDC入会セクション) ===== */
.big-cta {
  background: #0a0f1a; color: #fff;
  padding: 100px 40px; text-align: center;
  margin-bottom: 0;
}
.big-cta h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 30px; font-weight: 400; margin-bottom: 16px; letter-spacing: 1px;
}
.big-cta p {
  font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 40px;
  line-height: 2.0; font-weight: 300;
}
.big-cta-btn {
  display: inline-block; background: transparent; color: #fff;
  padding: 20px 72px; font-size: 15px; font-weight: 400;
  text-decoration: none; cursor: pointer;
  border: 2px solid #fff; transition: background .3s, color .3s;
  letter-spacing: 2px; font-family: 'Noto Sans JP', sans-serif;
}
.big-cta-btn:hover { background: #fff; color: #0a0f1a; }
.big-cta-note {
  font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 20px; font-weight: 300;
}
.big-cta-note a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color .2s; }
.big-cta-note a:hover { color: rgba(255,255,255,0.8); }

/* ===== Sitemap Button (管理用) ===== */
.btn-sitemap {
  display: inline-block; padding: 4px 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #666; text-decoration: none;
  border: 1px solid #ccc; border-radius: 3px;
  transition: background .2s, color .2s;
  font-family: 'Inter', sans-serif;
}
.btn-sitemap:hover { background: #333; color: #fff; border-color: #333; }

/* ===== 関連記事カード（横型レイアウト・統一UI） ===== */
.related-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
}
.related-card {
  display: flex; flex-direction: row; padding: 24px 20px; gap: 20px;
  border-bottom: 1px solid #f0f0f0; text-decoration: none; color: inherit;
  transition: background .2s;
}
.related-card:hover { background: #fafafa; }
.related-card-body { flex: 1; min-width: 0; order: 1; display: flex; flex-direction: column; gap: 6px; }
.related-card-img {
  width: 120px; height: 80px; flex-shrink: 0; order: 2;
  background-size: cover; background-position: center; border-radius: 2px;
  align-self: center;
}
.related-card-cat {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; color: #2c5f8a; display: inline-block;
  padding: 2px 8px; background: #e8f0f8; border-radius: 2px;
  letter-spacing: 0.04em; font-weight: 500; align-self: flex-start;
}
.related-card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px; font-weight: 400; color: #1a1a1a; line-height: 1.7;
}
.related-card:hover .related-card-title { color: #2c5f8a; }
.related-card-excerpt {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; color: #555; line-height: 1.7; font-weight: 300;
}
.related-card-date {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #555; letter-spacing: 0.04em;
}

/* ===== Sidebar SDC バナー高さ調整 ===== */
.sidebar-sdclub { padding: 96px 28px 108px !important; }

/* ===== Sidebar Layout (全ページ共通・強制適用) ===== */
.content-with-sidebar {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 48px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}
.content-with-sidebar > main,
.content-with-sidebar > .content-main {
  min-width: 0;
  overflow: hidden;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 48px !important;
}
.content-sidebar { position: relative; }
.sidebar-sticky { position: sticky; top: 80px; }

/* Sidebar Native Ad */
.sidebar-ad {
  display: block; margin-top: 20px;
  position: relative; width: 100%; aspect-ratio: 1/1;
  background: #e4e4e4; background-size: cover; background-position: center;
  text-decoration: none; overflow: hidden;
}
.sidebar-ad-label {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700;
  padding: 2px 8px; letter-spacing: 1px;
}

/* ========== 1024px — タブレット ========== */
@media (max-width: 1024px) {

  /* Header */
  .global-nav { display: none !important; }
  .btn-hamburger { display: flex !important; }
  .header-top { padding: 14px 24px; gap: 20px; }

  /* Hamburger Panel */
  .hamburger-panel { left: 120px; }
  .hamburger-nav-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 28px; }

  /* Content Layout */
  .content-with-sidebar {
    grid-template-columns: 1fr !important;
    padding: 0 24px;
    gap: 32px;
  }
  .content-sidebar { display: none !important; }  /* big-ctaがあるためサイドバー非表示 */

  /* Related Articles */
  .related-card-img { width: 100px; height: 68px; }

  /* Article List */
  .article-list { grid-template-columns: 1fr !important; }

  /* Article Header */
  .article-header {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
  }

  /* Hero Slider (TOP) */
  .hero-slider { height: 600px !important; }
  .hero-spacer { height: 600px !important; }

  /* Pickup Layout (TOP) — stack to 1 column */
  .pickup-layout {
    grid-template-columns: 1fr !important;
    gap: 32px 0;
  }
  .card-featured .card-title { font-size: 22px; }

  /* YouTube / Kazi Movie — stack to 1 column */
  .youtube-inner { grid-template-columns: 1fr !important; gap: 24px; }

  /* Publication Grid */
  .pub-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Footer Sitemap */
  .footer-sitemap {
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 24px 24px;
    gap: 24px 20px;
  }

  /* Mega menu */
  .mega-menu { display: none !important; }
  .mega-overlay { display: none !important; }

  /* SDC Landing */
  .sdc-hero { padding: 100px 24px 80px !important; }
  .sdc-hero h1 { font-size: 36px !important; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .register-cta { padding: 56px 24px; }

  /* Mypage */
  .mypage-wrap {
    grid-template-columns: 1fr !important;
    padding: 24px 20px 48px;
  }
  .mypage-wrap > aside { display: none; }
  .bookmark-grid { grid-template-columns: 1fr !important; }
  .history-list { grid-template-columns: 1fr !important; }
  .magazine-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Article Pager (前後記事ナビ) */
  .article-pager { grid-template-columns: 1fr !important; }

  /* Ad Banner Page */
  .layout-mockup { grid-template-columns: 1fr !important; }
  .price-table-wrap { grid-template-columns: 1fr !important; gap: 24px; }

  /* SDC Landing — about / plan */
  .about-wrap { grid-template-columns: 1fr !important; gap: 32px; }
  .plan-grid { grid-template-columns: 1fr !important; }

  /* Ad Banner (TOP) */
  .ad-banner { padding: 16px; gap: 16px; }
  .ad-banner-img { width: 120px; height: 68px; }

  /* Inline Ad in Article List */
  .ad-native-link { gap: 16px; }
  .ad-native-img { width: 160px; height: 100px; }

  /* Company Page */
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .b2b-form-grid { grid-template-columns: 1fr !important; }
}

/* ========== 768px — モバイル ========== */
@media (max-width: 768px) {

  /* SDC Float Banner */
  .sdc-float-banner { padding: 12px 16px; gap: 16px; flex-wrap: wrap; }
  .sdc-float-banner-left { gap: 12px; }
  .sdc-float-banner-title { font-size: 15px; }
  .sdc-float-banner-desc { font-size: 11px; }
  .sdc-float-banner-btn { padding: 8px 24px; font-size: 10px; }
  .sdc-float-banner-close { right: 12px; font-size: 14px; }

  /* SDC Popup */
  .sdc-popup-body { padding: 40px 28px 36px; }
  .sdc-popup-title { font-size: 26px; }

  /* Header */
  .header-top { padding: 12px 16px; gap: 12px; }
  .logo-full { height: 22px; }
  .logo-small { height: 18px; }
  .btn-login { font-size: 11px; padding: 6px 12px; }

  /* Hamburger Panel — full width */
  .hamburger-panel { left: 0; }
  .hamburger-nav-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
  .hamburger-panel-body { flex-direction: column; }
  .hamburger-aside { width: 100%; }
  .hamburger-nav { width: 100%; }

  /* Content & Grid */
  .content-with-sidebar { padding: 0 16px; gap: 24px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 20px; }

  /* Maker Grid */
  .maker-grid { grid-template-columns: 1fr !important; }

  /* Benefit Detail */
  .benefit-detail-item { gap: 16px; padding: 20px 0; }
  .benefit-detail-num { font-size: 22px; width: 36px; }
  .benefit-detail-body h4 { font-size: 15px; }
  .benefit-detail-body p { font-size: 13px; }

  /* Feature Grid */
  .feature-grid { grid-template-columns: 1fr !important; }

  /* Category Hero — stack vertically */
  .cat-hero-inner { flex-direction: column; gap: 8px; }
  .cat-hero-inner p { text-align: left; }
  .cat-hero h1 { font-size: 20px; }
  .breadcrumb { padding: 10px 16px; }
  .cat-hero-inner { padding: 0 16px !important; }

  /* Inline Ad in Article (.ad-native / .ad-native-link 両対応) — 縦組み（画像上→テキスト下）でTOPの ad-banner と揃える */
  .ad-native,
  .ad-native-link {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .ad-native-img { width: 100% !important; height: 180px !important; }
  .ad-native-body { width: 100%; }
  .ad-native-title { font-size: 14px !important; line-height: 1.5; }
  .ad-native-desc { font-size: 12px !important; line-height: 1.7; }

  /* Hero Slider (TOP) — SP は全幅で各スライドが画面ぴったり */
  .hero-slider { height: 480px !important; }
  .hero-spacer { height: 480px !important; }
  .slide { width: 100% !important; flex-shrink: 0 !important; }
  .slide-caption { padding: 18px 22px; max-width: 100%; }
  .slide-caption .area-title { font-size: 18px !important; }
  .slide-caption .area-label { font-size: 11px; padding: 4px 12px; margin-bottom: 8px; }
  .slide-caption .area-desc { font-size: 12px; }
  .slider-arrow { width: 40px; height: 40px; font-size: 18px; }
  .slider-arrow.prev { left: 12px; }
  .slider-arrow.next { right: 12px; }

  /* Pickup Layout (TOP) — 2col → 1col */
  .pickup-layout { grid-template-columns: 1fr !important; gap: 24px 0; }
  .card-featured .card-title { font-size: 20px; }
  .card-featured .card-excerpt { font-size: 12px; }
  .card-list .card-img-sm { width: 120px; height: 80px; }
  .card-list .card-title { font-size: 16px; }
  .card-list .card-excerpt { display: none; }

  /* New Articles Grid (TOP) — 2col → 1col */
  .new-articles-grid { grid-template-columns: 1fr !important; }
  .new-articles-grid .card-list { padding-left: 0 !important; border-left: none !important; }
  .new-articles-grid .card-list:nth-last-child(-n+2) { border-bottom: 1px solid #eee; }
  .new-articles-grid .card-list:last-child { border-bottom: none; }
  .new-articles-grid .card-img-sm { width: 110px !important; height: 74px !important; }

  /* Service Banners (TOP) — 2col → 1col */
  .service-banners { grid-template-columns: 1fr !important; gap: 12px; }
  .service-banner-img { width: 140px; min-height: 110px; }
  .service-banner-body { padding: 16px 20px; }
  .service-banner-body h3 { font-size: 16px; }
  .service-banner-body p { font-size: 12px; }

  /* Ad Banner (TOP) — 横並び→縦積み */
  .ad-banner { flex-direction: column; padding: 16px; gap: 12px; }
  .ad-banner-img { width: 100%; height: 180px; }
  .ad-banner-title { font-size: 14px; }
  .ad-banner-desc { font-size: 12px; }

  /* SeaPlaza CTA — 横並び→縦積み */
  .cta-seaplaza { flex-direction: column; padding: 40px 20px; gap: 20px; text-align: center; }

  /* Section headers (TOP) */
  .section-header { flex-direction: column; align-items: center; gap: 8px; }
  .section-header::before { font-size: 10px; }
  .section-header h2 { font-size: 20px; }
  .section .more-bottom { padding: 10px 32px; font-size: 12px; }

  /* Section spacing (TOP) */
  .section { padding: 48px 0; }
  .section-alt { padding-left: 16px; padding-right: 16px; }
  .sec-youtube { padding: 48px 0; }
  .sec-publication { padding: 48px 0; }

  /* YouTube / Kazi Movie — 2col → 1col */
  .youtube-inner { grid-template-columns: 1fr !important; gap: 20px; }
  .youtube-text h3 { font-size: 18px; }
  .youtube-text p { font-size: 12px; }
  .youtube-stats { gap: 24px; }
  .youtube-stat-value { font-size: 20px; }

  /* Publication Grid — 6col → 3col */
  .pub-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; margin-top: 24px; }

  /* Footer Links — 4col → 2col */
  .footer-links { grid-template-columns: repeat(2, 1fr) !important; padding: 32px 16px 24px; gap: 8px 16px; }
  .footer-links a { font-size: 11px; }

  /* Footer SNS */
  .footer-sns { padding: 16px !important; gap: 8px 16px !important; }

  /* Page Hero (SDC Auth) */
  .page-hero { padding: 56px 16px 44px !important; }
  .page-hero h1 { font-size: 22px !important; letter-spacing: 2px !important; }
  .page-hero p { font-size: 12px !important; }

  /* Profile Header (Mypage) */
  .profile-header { padding: 28px 16px !important; }
  .profile-header-inner { flex-direction: column; text-align: center; gap: 16px; }
  .profile-meta { justify-content: center; flex-wrap: wrap; }

  /* Mypage Grids */
  .bookmark-grid { grid-template-columns: 1fr !important; }
  .history-list { grid-template-columns: 1fr !important; }
  .magazine-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .benefit-list { grid-template-columns: 1fr !important; }
  .marina-fav-list { grid-template-columns: 1fr !important; }
  .marina-fav-img { width: 90px; height: 60px; }

  /* SDC Promo (Login) */
  .sdc-brands { gap: 16px; flex-wrap: wrap; }

  /* Form */
  .form-wrap { padding: 32px 16px 48px; }
  .form-check-grid { grid-template-columns: 1fr !important; }
  .step-indicator { max-width: 100%; }

  /* Search Popup */
  .search-box { padding: 24px 20px 32px !important; }
  .search-sdc-banner { flex-direction: column; text-align: center; gap: 16px; }
  .search-cats { gap: 8px; }
  .search-cat-btn { min-width: 70px !important; padding: 12px 6px !important; }

  /* Card List (articles) */
  .card-list .card-img-sm { width: 120px; height: 80px; }
  .card-list .card-title { font-size: 16px; }
  .card-list .card-excerpt { display: none; }

  /* Footer Sitemap — SP は 3カラム固定 */
  .footer-sitemap {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 32px 16px 24px;
    gap: 16px 12px;
  }
  .footer-bottom { padding: 16px; font-size: 11px; }

  /* SDC Landing Page */
  .sdc-hero { padding: 72px 16px 56px !important; }
  .sdc-hero h1 { font-size: 28px !important; }
  .sdc-hero p { font-size: 13px !important; }
  .benefit-grid { grid-template-columns: 1fr !important; }
  .register-cta { padding: 48px 16px; }
  .register-cta h2 { font-size: 22px; }
  .register-cta-btn { padding: 16px 48px; font-size: 14px; }

  /* Big CTA */
  .big-cta { padding: 56px 16px; }
  .big-cta h2 { font-size: 22px; }
  .big-cta p { font-size: 13px; margin-bottom: 24px; line-height: 1.8; }
  .big-cta p br { display: none; }
  .big-cta-btn { padding: 16px 40px; font-size: 13px; }

  /* Article Header */
  .article-header { padding: 16px !important; gap: 16px; }

  /* Related Articles — 2col → 1col */
  .related-grid { grid-template-columns: 1fr !important; }
  .related-card-img { width: 90px; height: 60px; }
  .related-card-title { font-size: 14px; }
  .related-card-excerpt { display: none; }

  /* History list */
  .history-item { gap: 12px; }
  .history-item-img { width: 90px; height: 60px; }

  /* Confirm page */
  .confirm-wrap { padding: 32px 16px 48px; }
  .confirm-table th { width: 120px; font-size: 11px; padding: 10px 8px 10px 0; }
  .confirm-table td { font-size: 12px; padding: 10px 0; }

  /* Complete page */
  .complete-wrap { padding: 48px 16px 64px; }

  /* Article Pager */
  .article-pager { grid-template-columns: 1fr !important; gap: 16px; }

  /* Ad Banner Page */
  .layout-mockup { grid-template-columns: 1fr !important; }
  .sp-mockup-wrap { flex-direction: column; gap: 24px; }
  .price-table-wrap { grid-template-columns: 1fr !important; gap: 20px; }
  .price-row { grid-template-columns: 16px 1fr auto !important; gap: 8px; }

  /* SDC Landing — about / plan */
  .about-wrap { grid-template-columns: 1fr !important; gap: 24px; }
  .plan-grid { grid-template-columns: 1fr !important; }

  /* Company Page */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .b2b-form-grid { grid-template-columns: 1fr !important; }

  /* Author Page */
  .author-profile-card { flex-direction: column; text-align: center; gap: 20px; }
  .author-stats { flex-wrap: wrap; gap: 16px; justify-content: center; }
}

/* ========== 480px — スマートフォン小 ========== */
@media (max-width: 480px) {

  /* Header */
  .header-top { padding: 10px 12px; gap: 8px; }
  .btn-sitemap { display: none; }

  /* SDC Float Banner */
  .sdc-float-banner { padding: 10px 12px; gap: 8px; flex-direction: column; text-align: center; }
  .sdc-float-banner-left { justify-content: center; }
  .sdc-float-banner-title { font-size: 14px; }
  .sdc-float-banner-desc { display: none; }
  .sdc-float-banner-btn { padding: 8px 20px; }
  .sdc-float-banner-close { top: 6px; right: 8px; transform: none; font-size: 12px; }

  /* SDC Popup */
  .sdc-popup-body { padding: 36px 20px 32px; }
  .sdc-popup-title { font-size: 22px; }
  .sdc-popup-desc br { display: none; }
  .sdc-popup-benefits { gap: 20px; }
  .sdc-popup-btn { padding: 16px 40px; font-size: 12px; }

  /* Hamburger */
  .hamburger-nav-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .hamburger-panel-header { padding: 12px 16px; }

  /* Content & Grid */
  .content-with-sidebar { padding: 0 12px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

  /* Maker Grid */
  .maker-grid { grid-template-columns: 1fr !important; }

  /* Hero Slider (TOP) — 縦幅 1.5 倍 = 340×1.5 = 510px（最小幅端末向け） */
  .hero-slider { height: 510px !important; }
  .hero-spacer { height: 510px !important; }
  .slide { width: 100% !important; }
  .slide-caption { padding: 12px 14px; }
  .slide-caption .area-title { font-size: 15px !important; }
  .slide-caption .area-label { font-size: 10px; padding: 3px 10px; margin-bottom: 6px; }
  .slide-caption .area-desc { display: none; }
  .slider-arrow { width: 36px; height: 36px; font-size: 16px; }
  .slider-arrow.prev { left: 8px; }
  .slider-arrow.next { right: 8px; }
  .slider-dots { bottom: 16px; gap: 6px; }
  .dot { width: 6px; height: 6px; }

  /* Pickup Layout (TOP) — vertical stacking */
  .card-featured .card-title { font-size: 18px; }
  .card-featured .card-img { aspect-ratio: 3/2; }
  .card-featured .card-excerpt { font-size: 12px; -webkit-line-clamp: 2; }

  /* Service Banners (TOP) — 画像左/テキスト右の横並びを維持 */
  .service-banner { flex-direction: row !important; }
  .service-banner-img { width: 120px !important; min-height: 100px !important; flex-shrink: 0; }
  .service-banner-body { padding: 12px 14px !important; }
  .service-banner-body h3 { font-size: 14px !important; margin-bottom: 4px; line-height: 1.4; }
  .service-banner-body p { font-size: 11px !important; line-height: 1.65; }
  .service-banner-eyebrow { font-size: 9px !important; margin-bottom: 4px; }

  /* Ad Banner (TOP) */
  .ad-banner-img { height: 160px; }

  /* YouTube / Kazi Movie */
  .youtube-text h3 { font-size: 16px; }
  .youtube-text p { font-size: 12px; line-height: 1.7; }
  .youtube-stats { gap: 16px; flex-wrap: wrap; }
  .youtube-stat-value { font-size: 18px; }

  /* Publication Grid — 3col 維持（6col → 3col） */
  .pub-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; margin-top: 20px; }

  /* Footer Links — 2col → 1col */
  .footer-links { grid-template-columns: 1fr !important; padding: 24px 12px 20px; gap: 6px; }

  /* Page Hero (SDC Auth) */
  .page-hero { padding: 44px 12px 36px !important; }
  .page-hero h1 { font-size: 20px !important; }
  .page-hero-eyebrow { font-size: 10px !important; letter-spacing: 4px !important; }

  /* Search */
  .search-input-row { flex-direction: column; }
  .search-input-row input { border-right: 1px solid #e8e8e8 !important; }
  .search-input-row button { width: 100%; }
  .search-box { padding: 20px 16px 24px !important; }
  .search-tags { gap: 6px; }
  .search-tag { font-size: 11px; padding: 5px 12px; }

  /* Form */
  .form-wrap { padding: 24px 12px 36px; }
  .form-submit { padding: 14px 16px; font-size: 14px; }
  .login-register-btn { padding: 14px 32px; font-size: 13px; }
  .sdc-pillar h3 { font-size: 15px; }
  .sdc-brands { gap: 12px; }
  .sdc-brand { font-size: 11px; }
  .sdc-testimonial { padding: 20px 20px; }

  /* Card list — SP でも横並びを維持（小サムネ + テキストでコンパクト） */
  .card-list { flex-direction: row; gap: 12px; align-items: flex-start; }
  .card-list .card-img-sm { width: 100px; height: 68px; flex-shrink: 0; }
  .card-list .card-title { font-size: 14px; }

  /* Mypage */
  .bookmark-grid { grid-template-columns: 1fr !important; }
  .bookmark-card-img, .history-item-img { width: 90px; height: 60px; }
  .bookmark-card-title, .history-item-title { font-size: 14px; }
  .bookmark-card-excerpt, .history-item-excerpt { display: none; }
  .magazine-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sidebar-nav li a { padding: 12px 10px; font-size: 12px; }

  /* Confirm */
  .confirm-wrap { padding: 24px 12px 36px; }
  .confirm-table th { width: 100px; }

  /* Complete */
  .complete-wrap { padding: 36px 12px 48px; }
  .complete-icon { width: 64px; height: 64px; font-size: 28px; }
  .btn-mypage { padding: 14px 36px; font-size: 14px; }

  /* Related Articles — smaller thumbnails on small screens */
  .related-card-img { width: 80px; height: 54px; }

  /* SDC Landing */
  .sdc-hero { padding: 56px 12px 44px !important; }
  .sdc-hero h1 { font-size: 22px !important; letter-spacing: 2px !important; }
  .register-cta { padding: 36px 12px; }
  .register-cta h2 { font-size: 20px; }

  /* Benefit Detail (small) */
  .benefit-detail-item { flex-direction: column; gap: 8px; }
  .benefit-detail-num { width: auto; font-size: 20px; }
  .benefit-detail-body h4 { font-size: 14px; }
  .benefit-detail-body p { font-size: 12px; line-height: 1.8; }

  /* Feature Grid (small) */
  .feature-grid { grid-template-columns: 1fr !important; }

  /* Big CTA */
  .big-cta { padding: 48px 12px; }
  .big-cta h2 { font-size: 20px; }
  .big-cta-btn { padding: 14px 36px; font-size: 13px; letter-spacing: 1px; }

  /* Footer Sitemap — 480px以下も 3カラム維持 */
  .footer-sitemap { grid-template-columns: repeat(3, 1fr) !important; gap: 12px 10px; padding: 24px 12px 20px; }
  .footer-col-title { font-size: 12px; margin-bottom: 8px; }

  /* Section headers */
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Article Pager */
  .article-pager { gap: 12px; }

  /* Ad Banner Page */
  .sp-mockup-wrap { gap: 16px; }
  .price-row { grid-template-columns: 1fr !important; gap: 4px; }

  /* Company Page */
  .stats-grid { grid-template-columns: 1fr !important; }
  .stats-grid .stat-item { padding: 16px; }

  /* Author Page */
  .author-profile-card { gap: 16px; }
  .author-stats { gap: 12px; }

  /* Profile */
  .profile-avatar { width: 56px; height: 56px; font-size: 22px; }
  .profile-info h1 { font-size: 18px; }
  .profile-badge { margin-left: 0; margin-top: 8px; display: block; }
}

/* ============================================================
   SP Brushup — Mobile UX hardening (2026-05)
   下の指定は、既存ルールの後ろに置く事で上書き・補完する
   ============================================================ */

/* ===== Safety nets (全幅) ===== */
/* html には overflow-x を設定しない（position:sticky のスクロールコンテナを html のままにする） */
html { overflow-x: clip; }
body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  /* clip 非対応ブラウザは body 側だけ hidden（html stickyのため html には設定しない） */
  html { overflow-x: visible; }
  body { overflow-x: hidden; }
}
img, video, iframe { max-width: 100%; height: auto; }

/* スクロールジャンプ先の固定ヘッダー考慮 */
:target { scroll-margin-top: 80px; }

/* hover効果はタッチデバイスで無効化（誤発火・固着防止） */
@media (hover: none) {
  .card-featured:hover,
  .feature-card:hover,
  .plan-card:hover,
  .benefit-card:hover,
  .service-banner:hover,
  .btn-login:hover,
  .form-submit:hover,
  .plan-cta:hover,
  .more-bottom:hover,
  .btn-more:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* タッチ時のカード背景反転をやめる（タイトル色のみ変化） */
  .card-list:hover,
  .card-list:active,
  .card-list:focus,
  .related-card:hover,
  .related-card:active,
  .related-card:focus,
  .post-card:hover,
  .post-card:active,
  .post-card:focus {
    background: transparent !important;
  }
  .card-list:active .card-title,
  .related-card:active .related-card-title,
  .post-card:active .post-card-title {
    color: var(--color-primary, #2c5f8a) !important;
  }
}

/* タッチ非対応も含めた共通: カード全体の背景反転を解除しタイトル色のみに */
@media (max-width: 768px) {
  .card-list:hover,
  .card-list:active,
  .card-list:focus,
  .related-card:hover,
  .related-card:active,
  .related-card:focus,
  .post-card:hover,
  .post-card:active,
  .post-card:focus {
    background: transparent !important;
  }
  .card-list:active .card-title,
  .related-card:active .related-card-title,
  .post-card:active .post-card-title {
    color: var(--color-primary, #2c5f8a) !important;
    opacity: 0.7;
  }
}

/* ========== 768px — SP brushup ========== */
@media (max-width: 768px) {

  :target { scroll-margin-top: 60px; }

  /* WIREFRAME 説明ラベルを SP では非表示 */
  .wf-label { display: none !important; }

  /* ヘッダー: スクロール時追従（sticky）+ ロゴ左 / アクション右寄せ */
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
  }
  /* 通常時のみ白背景＋下線（追従時は透明化させたいので :not(.scrolled) で限定） */
  header:not(.scrolled) {
    background: #fff !important;
    box-shadow: 0 1px 0 #e8e8e8;
  }
  /* 追従中: 背景白帯を取りロゴも非表示（アイコン群のみ残す） */
  header.scrolled {
    background: transparent !important;
    box-shadow: none !important;
    border-top: none !important;
  }
  header.scrolled .logo,
  header.scrolled .logo-full,
  header.scrolled .logo-small {
    display: none !important;
  }

  header .header-top {
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }
  header .header-actions {
    margin-left: auto !important;
    gap: 8px !important;
  }

  /* iOSのフォームフォーカス時の自動ズーム抑止（16px以上必須） */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* SDC追従バナーは右下コンパクト型に変更したため、全幅クリアランスは不要 */
  body { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
  .sdc-float-banner {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ===== Header: ログインボタンはアイコン+短文に圧縮 ===== */
  .btn-login {
    font-size: 0 !important;
    padding: 8px 10px !important;
    line-height: 1;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    border-radius: var(--radius-md, 4px);
    background: #fff;
    white-space: nowrap;
  }
  .btn-login::before {
    content: 'LOG IN';
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  }

  /* ===== タップターゲット最小サイズ (WCAG 2.5.5) ===== */
  .share-btn { min-height: 44px; padding: 10px 14px; font-size: 12px; }
  .article-tag { min-height: 36px; padding: 8px 14px; }
  .footer-corporate a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  }
  .footer-local-nav a { padding: 8px 14px; display: inline-block; }
  .hamburger-tags a { padding: 8px 12px; min-height: 36px; display: inline-flex; align-items: center; }
  .hamburger-local-links a {
    padding: 10px 0; min-height: 40px;
    display: inline-flex; align-items: center;
  }
  .hamburger-close { width: 44px; height: 44px; font-size: 24px; }
  .search-close { width: 36px; height: 36px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
  .slider-arrow { min-width: 44px; min-height: 44px; }
  .btn-hamburger { width: 44px; height: 44px; }

  /* ===== Hero slider（縦幅 1.5 倍 = 420×1.5 = 630px） ===== */
  .hero-slider { height: 630px !important; }
  .hero-spacer { height: 630px !important; }
  .hero-overlay .hero-tagline { font-size: 16px !important; padding: 0 20px; text-align: center; }
  .slide-caption .area-title { line-height: 1.5 !important; }

  /* ===== Article header / wrap — アイキャッチを画面横幅いっぱいに ===== */
  .article-wrap { padding: 32px 16px 48px !important; }
  .article-header {
    display: block !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .article-header-img {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 3/2 !important;
  }
  .article-header-info { padding: 20px 16px 0 !important; }
  .article-title { font-size: 22px !important; line-height: 1.5 !important; }
  .article-lead { font-size: 14px !important; line-height: 1.85 !important; }
  .article-byline { gap: 6px; font-size: 11px; flex-wrap: wrap; }
  .article-meta { font-size: 12px; padding-top: 12px; }
  .article-cat-badge { font-size: 10px; padding: 3px 8px; }

  /* 記事本文 */
  .article-body { font-size: 15px !important; line-height: 1.95 !important; }
  .article-body p { margin-bottom: 20px !important; }
  .article-body h2 {
    font-size: 19px !important; padding: 10px 14px !important;
    margin: 36px 0 18px !important; line-height: 1.5 !important;
  }
  .article-body h3 {
    font-size: 16px !important; margin: 28px 0 12px !important;
    padding-bottom: 8px !important; line-height: 1.5 !important;
  }
  .article-img-inline { aspect-ratio: 3/2; margin: 20px 0 6px; }
  .article-img-caption { font-size: 11px; margin-bottom: 24px; }

  /* シェアバー: SP はアイコンのみの丸ボタン化（テキスト非表示） */
  .share-top {
    flex-wrap: wrap; gap: 10px;
    padding-bottom: 16px; margin-bottom: 20px;
    align-items: center;
  }
  .share-top span { width: 100%; margin-right: 0; margin-bottom: 4px; }
  .share-btn {
    font-size: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    justify-content: center;
    border-radius: 50% !important;
  }
  .share-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
  }
  .share-btn + .share-btn { margin-left: 0; }

  /* 記事内CTA: 縦積み */
  .in-article-cta {
    flex-direction: column !important;
    padding: 24px 20px !important; gap: 16px;
    align-items: stretch !important; text-align: center;
  }
  .in-article-cta .cta-btn { width: 100%; padding: 14px 24px; box-sizing: border-box; }

  /* TOC */
  .toc-box { padding: 20px 16px !important; margin: 24px 0 !important; }
  .toc-box-title { font-size: 14px; }
  .toc-box ol li { font-size: 13px; line-height: 1.7; }
  .toc-box ol li ol li { font-size: 12px; }

  /* タグ折返し */
  .article-tags { gap: 8px; margin-bottom: 24px; }

  /* ===== Card-list （汎用記事カード）の最適化 ===== */
  .card-list { padding: 14px 0; gap: 14px; }
  .card-list .card-title {
    font-size: 14px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-cat { font-size: 10px; padding: 2px 8px; }

  /* ===== Section spacing ===== */
  .section-header h2 { font-size: 20px; line-height: 1.4; }

  /* ===== Footer corporate 2列 ===== */
  .footer-corporate {
    display: flex !important; flex-wrap: wrap; gap: 0 !important;
    padding: 12px 16px !important;
  }
  .footer-corporate a {
    flex: 1 0 50%; font-size: 11px;
  }

  /* ===== Hamburger ===== */
  .hamburger-panel-header { padding: 14px 16px; }
  .hamburger-panel {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .hamburger-local { padding: 20px 24px !important; }
  .hamburger-aside { padding: 0 !important; }
  .hamburger-search { padding: 20px 24px !important; }

  /* ===== Search overlay: フルスクリーン化 ===== */
  .search-overlay { padding: 0 !important; align-items: flex-start !important; }
  .search-overlay .search-box {
    border-radius: 0 !important;
    max-width: 100% !important; min-height: 100vh;
    overflow-y: auto;
  }

  /* ===== Tables 横スクロール許可 ===== */
  .confirm-table-wrap,
  .price-table-wrap,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ===== Toast 位置: float-bannerを避ける ===== */
  #toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ===== Breadcrumb 折返し ===== */
  .breadcrumb { flex-wrap: wrap; gap: 4px; line-height: 1.6; }

  /* ===== Mypage sidebar nav の水平横スクロール ===== */
  .mypage-wrap > aside { display: block !important; margin-bottom: 24px; }
  .sidebar-nav {
    display: flex; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #eee;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav li { border-bottom: none !important; border-top: none !important; flex-shrink: 0; }
  .sidebar-nav li a {
    white-space: nowrap; padding: 12px 16px !important;
    border-bottom: 2px solid transparent;
  }
  .sidebar-nav li a.active {
    border-bottom-color: var(--color-primary) !important;
  }
}

/* ========== 480px — SP brushup (小型端末) ========== */
@media (max-width: 480px) {

  /* Hero slider 高さ — 1.5倍化のうえで spacer をやや短くして本文を上に寄せる */
  .hero-slider { height: 420px !important; }
  .hero-spacer { height: 360px !important; }

  /* Section spacing 詰める */
  .section { padding: 36px 0 !important; }
  .sec-youtube,
  .sec-publication { padding: 36px 0 !important; }
  .section-header { gap: 6px; }
  .section-header h2 { font-size: 18px; }

  /* Big CTA */
  .big-cta { padding: 40px 16px !important; }
  .big-cta h2 { font-size: 18px !important; line-height: 1.5; }
  .big-cta p { font-size: 12px !important; line-height: 1.8 !important; }
  .big-cta-btn {
    padding: 14px 20px !important; font-size: 12px !important;
    width: 100%; box-sizing: border-box;
  }

  /* Article: さらに詰める */
  .article-title { font-size: 20px !important; }
  .article-body { font-size: 14.5px !important; }
  .article-body h2 { font-size: 17px !important; padding: 8px 12px !important; }
  .article-body h3 { font-size: 15px !important; }

  /* Header: ログインアイコン化 */
  .btn-login::before { content: '\229A'; font-size: 18px; letter-spacing: 0; }
  .header-actions { gap: 6px; }
}

/* ============================================================
   ページ別 SP個別調整
   ============================================================ */

/* ===== SDC Landing ===== */
@media (max-width: 768px) {
  /* nowrap 解除（長文タイトル対策） */
  .sdc-hero h1 {
    white-space: normal !important;
    letter-spacing: 1.5px !important;
    font-size: 26px !important;
    line-height: 1.5 !important;
  }
  .sdc-hero p { font-size: 13px !important; margin-bottom: 28px; }
  .sdc-hero-eyebrow { letter-spacing: 4px !important; margin-bottom: 18px; }
  .sdc-hero-cta { padding: 16px 36px !important; font-size: 13px !important; letter-spacing: 1px !important; }

  .section-head h2 { font-size: 20px !important; }
  .section-head p { font-size: 13px !important; }
  .section-head { margin-bottom: 28px !important; }

  .about-img { aspect-ratio: 3/2; }
  .about-text h3 { font-size: 18px !important; }
  .about-text p { font-size: 14px !important; line-height: 1.9 !important; }

  .benefit-card { padding: 24px 16px !important; }
  .feature-card { padding: 24px 16px !important; }
}
@media (max-width: 480px) {
  .sdc-hero h1 { font-size: 22px !important; }
}

/* ===== Marina Map ===== */
@media (max-width: 768px) {
  .map-large { height: 320px !important; margin-bottom: 20px; }
  .map-large .map-label { font-size: 14px; }
}
@media (max-width: 480px) {
  .map-large { height: 240px !important; }
}

/* ===== Marina List / Cards ===== */
@media (max-width: 768px) {
  .marina-list,
  .marina-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

/* ===== Lifestyle Calendar ===== */
@media (max-width: 768px) {
  .calendar-grid,
  .calendar-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  .calendar-month-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Cat Hero (各カテゴリTOP) ===== */
@media (max-width: 768px) {
  .cat-hero { padding: 20px 0 !important; }
  .cat-hero h1 { font-size: 18px !important; letter-spacing: 1px; }
  .cat-hero p { font-size: 12px !important; line-height: 1.7; }
}

/* ===== Maker Page ===== */
@media (max-width: 768px) {
  .maker-card { padding: 16px !important; gap: 12px; }
  .maker-name { font-size: 14px !important; }
}

/* ===== Author Page ===== */
@media (max-width: 768px) {
  .author-profile-card { padding: 24px 16px !important; }
  .author-bio { font-size: 13px !important; line-height: 1.85 !important; }
  .author-stat-value { font-size: 18px !important; }
  .author-stat-label { font-size: 10px !important; }
}

/* ===== Contact / Form pages ===== */
@media (max-width: 768px) {
  .form-wrap form { gap: 16px !important; }
  .form-group label { font-size: 13px; margin-bottom: 6px; }
  .form-submit { width: 100%; padding: 16px !important; }
  .form-cancel { width: 100%; }
}

/* ===== FAQ ===== */
@media (max-width: 768px) {
  .faq-item summary { padding: 16px !important; font-size: 14px !important; }
  .faq-answer { padding: 0 16px 16px !important; font-size: 13px !important; line-height: 1.85; }
}

/* ===== Beginner / Gallery detail ===== */
@media (max-width: 768px) {
  .gallery-detail-img { max-height: 70vh; }
  .gallery-nav { flex-wrap: wrap; gap: 8px; }
}

/* ===== Media guide / Ad banner（営業ページ） ===== */
@media (max-width: 768px) {
  .media-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .media-stat-value { font-size: 22px !important; }
  .media-stat-label { font-size: 11px !important; }
  .ad-format-card { padding: 20px !important; }
}

/* ===== News list / 記事一覧 ===== */
@media (max-width: 768px) {
  .article-list { gap: 0; }
  .article-list .card-list { padding: 16px 0; border-bottom: 1px solid #eee; }
  .article-list .card-list:first-child { padding-top: 0; }
}

/* ===== Subcat tabs (カテゴリ下層タブ) ===== */
@media (max-width: 768px) {
  .subcat-tabs,
  .subcat-tab-wrap {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .subcat-tabs::-webkit-scrollbar,
  .subcat-tab-wrap::-webkit-scrollbar { display: none; }
  .subcat-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   SP: サイドバー広告 .sidebar-ad を本文と big-cta の間に表示
   - PC: 右サイドカラム維持
   - SP: 本文の下 → サイドバー広告 → big-cta の順で縦並び
   - .sidebar-sdclub は big-cta と役割重複のため SP では非表示
   - 全ページ共通（.content-with-sidebar を持つ全ページに自動適用）
   ============================================================ */
@media (max-width: 1024px) {
  .content-with-sidebar > .content-sidebar {
    display: block !important;
  }
  .content-with-sidebar > .content-sidebar .sidebar-sticky {
    position: static !important;
    top: auto !important;
  }
  .content-with-sidebar > .content-sidebar .sidebar-sdclub {
    display: none !important;
  }
  .content-with-sidebar > .content-sidebar .sidebar-ad {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 480px) {
  .content-with-sidebar > .content-sidebar .sidebar-ad {
    max-width: 280px;
  }
}

/* sidebar-ad: main 全体の下余白と直前セクションの下余白を徹底圧縮 */
@media (max-width: 1024px) {
  /* main 要素自体の padding-bottom 48px を 0 に（これが空白の主因） */
  .content-with-sidebar > main,
  .content-with-sidebar > .content-main {
    padding-bottom: 0 !important;
  }
  .content-with-sidebar > main > .section:last-child,
  .content-with-sidebar > main > .sec-publication,
  .content-with-sidebar > main > .sec-youtube:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .content-with-sidebar > .content-sidebar {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
  }
  .content-with-sidebar { gap: 0 !important; }
  /* pub-grid 自体の下マージンも0に */
  .pub-grid { margin-bottom: 0 !important; }
}
@media (max-width: 480px) {
  .content-with-sidebar > .content-sidebar { margin-bottom: 28px !important; }
  .content-with-sidebar { gap: 0 !important; }
}

/* ============================================================
   Hero slider — SP では caption を「画像の下」に白帯で表示
   - 左右矢印は非表示（フリックで遷移）
   - スライド下部に白い帯 (::after) で画像をマスクし、その上に
     caption を絶対配置 → 画像の下にテキスト領域が来る見た目
   - caption-bar の巨大青バー非表示、clip-path 遷移停止で位置定着
   ============================================================ */
@media (max-width: 768px) {
  /* 左右ボタン非表示（フリック操作） */
  .slider-arrow { display: none !important; }

  /* スライド下部 86px を白帯でマスク（画像はその上だけに見せる） */
  .slide { position: relative; }
  .slide::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 86px;
    background: #fff;
    z-index: 1;
    pointer-events: none;
  }

  /* caption-wrap を白帯の上にぴったり重ねる */
  .slide .slide-caption-wrap,
  .slide.active .slide-caption-wrap {
    clip-path: none !important;
    transition: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 86px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    z-index: 2;
  }
  .slide-caption-bar { display: none !important; }
  .slide-caption {
    background: transparent !important;
    padding: 0 16px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .slide-caption .area-label {
    margin-bottom: 4px !important;
    padding: 2px 10px !important;
    font-size: 10px !important;
  }
  .slide-caption .area-title {
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* ドットを白帯の上端ギリギリに */
  .slider-dots { bottom: 92px !important; }
}
@media (max-width: 480px) {
  .slide::after { height: 78px; }
  .slide .slide-caption-wrap,
  .slide.active .slide-caption-wrap { height: 78px !important; }
  .slide-caption { padding: 0 12px !important; }
  .slide-caption .area-title { font-size: 12px !important; }
  .slider-dots { bottom: 84px !important; }
}

/* ============================================================
   ヒーロー直下のセクション上余白を SP 用に詰める（タイトル直近）
   ============================================================ */
@media (max-width: 768px) {
  main .section:first-child,
  .main-wrap .section:first-child,
  .content-with-sidebar > main > .section:first-child {
    padding-top: 12px !important;
  }
  /* section-header 自体の下マージンも詰める */
  .section-header { margin-bottom: 18px !important; }
}
@media (max-width: 480px) {
  main .section:first-child,
  .main-wrap .section:first-child,
  .content-with-sidebar > main > .section:first-child {
    padding-top: 8px !important;
  }
}

/* ============================================================
   SP表示崩れの個別修正（top.cssの詳細度に勝つよう header/.header-actions 経由で指定）
   ============================================================ */
@media (max-width: 768px) {

  /* ヘッダーのログインボタンは「人アイコンのみ」 */
  header .header-actions .btn-login,
  header .btn-login {
    font-size: 0 !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 50% !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  header .header-actions .btn-login::before,
  header .btn-login::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") no-repeat center / contain;
  }

  /* Section の上下余白を SP 仕様に確実に縮める（top.css の 80px を上書き） */
  .main-wrap .section,
  main .section,
  .section { padding: 40px 16px !important; }
  .main-wrap .sec-youtube,
  .main-wrap .sec-publication { padding: 40px 16px !important; }

  /* 見出しは左頭揃え + 一回り小さく / インデント0 で記事と縦揃え */
  .section-header,
  .sec-youtube .section-header,
  .sec-publication .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 18px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    gap: 4px !important;
  }
  .section-header::before {
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-align: left;
    align-self: flex-start;
  }
  .section-header .kazi-motif {
    width: 40px !important;
    height: 12px !important;
    margin: 0 0 4px !important;
    align-self: flex-start;
  }
  .section-header h2 {
    font-size: 17px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-start;
  }
  .section-header::after {
    margin: 8px 0 0 !important;
    width: 32px !important;
    align-self: flex-start;
  }

  /* セクション内コンテンツの左頭を見出しに揃える（v2-overrides の card-list padding を打ち消し） */
  .new-articles-grid,
  .pickup-layout,
  .pickup-list,
  .service-banners,
  .article-list,
  .pub-grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .new-articles-grid .card-list,
  main .card-list {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: none !important;
  }
  .new-articles-grid .card-list-body,
  main .card-list-body {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* card-cat ラベル: 左端ぴったり開始 */
  .card-list-body > .card-cat:first-child {
    margin-left: 0 !important;
  }

  /* 新着記事グリッド: カードを横並びで統一 */
  .new-articles-grid .card-list {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px !important;
    padding: 16px 0 !important;
  }
  .new-articles-grid .card-img-sm {
    width: 110px !important;
    height: 74px !important;
    flex-shrink: 0;
    align-self: center;
  }
  .new-articles-grid .card-list-body {
    flex: 1;
    min-width: 0;
    order: -1;
  }
}

@media (max-width: 480px) {
  /* セクション余白さらに圧縮 */
  .main-wrap .section,
  main .section,
  .section { padding: 36px 12px !important; }
  .main-wrap .sec-youtube,
  .main-wrap .sec-publication { padding: 36px 12px !important; }

  /* カードのサムネさらに小さく */
  .new-articles-grid .card-img-sm,
  .pickup-list .card-img-sm {
    width: 96px !important;
    height: 64px !important;
  }
  .card-list .card-img-sm {
    width: 96px !important;
    height: 64px !important;
  }
  .card-list .card-title { font-size: 13.5px !important; line-height: 1.55 !important; }
  .card-cat { font-size: 10px !important; }
  .card-meta { font-size: 10px !important; }
}

/* ============================================================
   SP: 上に戻るボタン非表示
   ============================================================ */
@media (max-width: 768px) {
  .btn-top,
  .scroll-top,
  .back-to-top { display: none !important; }
}

/* ============================================================
   SP: ハンバーガーメニュー — 全体的なレイアウトを SP 用に再構築
   1. パネル内側 padding を圧縮（48px → 20px）
   2. nav と aside を縦並びにし、aside の左ボーダー/左 padding 解除
   3. メインカテゴリと下層リンクを 3 カラムに
   ============================================================ */
@media (max-width: 1024px) {
  .hamburger-panel-header { padding: 16px 20px !important; }
  .hamburger-panel-body {
    padding: 20px !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .hamburger-nav {
    flex: 1 !important;
    margin-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .hamburger-aside {
    flex: 1 !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
    margin-top: 24px !important;
    border-left: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    width: 100% !important;
  }

  /* メインカテゴリ 3カラム */
  .hamburger-nav-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-count: auto !important;
    column-gap: 0 !important;
    gap: 14px 10px !important;
  }
  .hamburger-nav-group {
    margin-bottom: 0 !important;
    break-inside: auto !important;
  }
  .hamburger-nav-group > a {
    font-size: 13px !important;
    padding: 8px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    line-height: 1.3 !important;
  }
  .hamburger-nav-group .ham-sub { display: none !important; }

  /* 下層メニュー（動画/マリーナ/...）テキスト流し込み（全角1文字スペース） */
  .hamburger-local {
    padding: 0 !important;
    border-top: none !important;
    width: 100% !important;
  }
  .hamburger-aside .hamburger-local .hamburger-local-links,
  .hamburger-panel .hamburger-local-links,
  div.hamburger-local-links {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    grid-template-columns: initial !important;
    width: 100% !important;
    gap: 0.5em 1em !important;
    align-items: baseline;
  }
  .hamburger-aside .hamburger-local .hamburger-local-links > a,
  .hamburger-panel .hamburger-local-links > a,
  div.hamburger-local-links > a {
    display: inline-flex !important;
    width: auto !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
  }
  .hamburger-search { padding: 0 0 16px !important; }
  .hamburger-member-banner { padding: 20px !important; margin-bottom: 16px; }
}
@media (max-width: 360px) {
  .hamburger-nav-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hamburger-local-links { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   SP: SDC 追従バナー — 右下のコンパクトピル形状
   「KAZI SeaDream Club」テキストのみ表示。タップでポップアップ展開
   ============================================================ */
@media (max-width: 768px) {
  .sdc-float-banner {
    left: auto !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: 240px;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
  }
  .sdc-float-banner-left { flex-direction: column; gap: 0 !important; }
  .sdc-float-banner-eyebrow { display: none !important; }
  .sdc-float-banner-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    letter-spacing: 0.04em;
  }
  .sdc-float-banner-desc { display: none !important; }
  .sdc-float-banner-btn { display: none !important; }
  .sdc-float-banner-close { display: none !important; }
}
@media (max-width: 480px) {
  .sdc-float-banner {
    right: 8px !important;
    max-width: 220px;
    padding: 8px 16px !important;
  }
  .sdc-float-banner-title { font-size: 11px !important; }
}

/* ============================================================
   SDC Popup（動的生成。バナータップで開くダイアログ）
   ============================================================ */
.sdc-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: sdcPopupFade 0.2s ease;
}
.sdc-popup-overlay.active { display: flex; }
@keyframes sdcPopupFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sdc-popup-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 36px 28px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  animation: sdcPopupRise 0.25s var(--ease-out, ease-out);
}
@keyframes sdcPopupRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sdc-popup-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  border: none; background: transparent;
  font-size: 22px; line-height: 1;
  color: #555;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s;
}
.sdc-popup-close:hover { background: #f5f5f5; }
.sdc-popup-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; color: #2c5f8a;
  margin-bottom: 8px;
}
.sdc-popup-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px; font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.sdc-popup-desc {
  font-size: 13px; color: #555;
  line-height: 1.9; margin-bottom: 24px;
  font-weight: 300;
}
.sdc-popup-cta {
  display: inline-block;
  background: #1a1a1a; color: #fff;
  padding: 14px 36px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background 0.2s;
}
.sdc-popup-cta:hover { background: #2c5f8a; }
.sdc-popup-note {
  font-size: 11px; color: #666;
  margin-top: 14px;
}

@media (max-width: 480px) {
  .sdc-popup-card { padding: 32px 20px 28px; }
  .sdc-popup-title { font-size: 19px; }
  .sdc-popup-desc { font-size: 12px; }
  .sdc-popup-desc br { display: none; }
  .sdc-popup-cta { padding: 14px 28px; width: 100%; box-sizing: border-box; }
}

/* ============================================================
   SP: フッターローカルナビ — テキスト流し込み（横並び自動折返し）
   各リンク間は全角1文字 (1em) のスペース、縦は 0.5em
   ============================================================ */
@media (max-width: 768px) {
  .footer-local-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: initial !important;
    gap: 0.5em 1em !important;
    padding: 16px !important;
    flex-direction: row !important;
    align-items: baseline;
  }
  .footer-local-nav a {
    display: inline-flex !important;
    width: auto !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    white-space: nowrap !important;
    border-bottom: none !important;
  }
}