/* ============================================
 * Responsive
 * ============================================ */

@media (max-width: 1340px) {
  .hero-title { font-size: 46px; }
  .container { padding: 0 28px; }
}

@media (max-width: 1200px) {
  .hero-title { font-size: 42px; }
  .hero-inner { gap: 40px; }
}

@media (max-width: 1024px) {
  html { font-size: 16px; }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .plan-card.popular { transform: scale(1); }
  .plan-card.popular:hover { transform: translateY(-4px); }
  .flow-list { grid-template-columns: repeat(2, 1fr); }
  .sns-checks { grid-template-columns: repeat(3, 1fr); }
  .hero-title { font-size: 38px; }
  .hero-line { white-space: normal; }
  .section-title { font-size: 38px; }
  .screenshot-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-block, .feature-block.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .visual-card { min-height: auto; }
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  section { padding: 72px 0; }
  .container { padding: 0 20px; }

  /* Header */
  .global-nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    padding: 16px 0;
    box-shadow: var(--shadow-md);
  }
  .global-nav.open { display: flex; }
  .nav-link {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-link.active::after,
  .nav-link:hover::after { display: none; }
  .header-cta { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero { padding: 64px 0 56px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-title {
    font-size: 38px;
    line-height: 1.3;
  }
  .hero-lead { font-size: 17px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }

  /* Sections */
  .section-title { font-size: 30px; }
  .section-lead { font-size: 16px; margin-bottom: 40px; }
  .page-title { font-size: 34px; }

  /* Problem / Solution */
  .problem-grid,
  .solution-grid { grid-template-columns: 1fr; gap: 20px; }
  .problem-card,
  .solution-card { padding: 28px; }
  .problem-num { font-size: 36px; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; }
  .plan-card { padding: 32px 28px; }

  /* Flow */
  .flow-list { grid-template-columns: 1fr; }

  /* CTA */
  .cta-title { font-size: 28px; }
  .cta-lead { font-size: 16px; }

  /* Feature detail */
  .feature-block,
  .feature-block.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .feature-block.reverse .feature-block-text { order: 1; }
  .feature-block.reverse .feature-block-visual { order: 2; }
  .feature-block-text h2 { font-size: 28px; }
  .visual-card { padding: 32px 24px; min-height: auto; }
  .site-grid { grid-template-columns: repeat(2, 1fr); }

  /* SNS form */
  .sns-checks { grid-template-columns: repeat(2, 1fr); }
  .sns-form { padding: 28px 20px; }
  .sns-result { flex-direction: column; gap: 8px; text-align: center; }

  /* Screenshots */
  .screenshot-grid { grid-template-columns: 1fr; gap: 24px; }

  /* Tables */
  .comparison-table th,
  .comparison-table td {
    padding: 12px 10px;
    font-size: 13px;
  }
  .sct-table th,
  .sct-table td {
    display: block;
    width: 100%;
    padding: 14px 18px;
  }
  .sct-table th { background: var(--bg-purple-soft); font-weight: 800; }

  /* Contact form */
  .contact-form { padding: 32px 24px; }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }

  /* Scroll-top button smaller on mobile */
  .scroll-top {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .hero-title { font-size: 32px; }
  .section-title { font-size: 26px; }
  .page-title { font-size: 28px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .log { font-size: 10px; }
}

/* ============================================
 * v2.17 phase5n — モバイル fluid redesign
 * 320px〜768px 区間を clamp() で流動的に補間。
 * 768px 超は一切干渉せず PC レイアウトを完全保持。
 * ============================================ */
@media (max-width: 768px) {

  /* HERO 構造補正
     .hero-slide は position:absolute (クロスフェード用) のため、
     親 .hero-slides に viewport 追従の min-height を与えて高さ確保。 */
  .hero { min-height: auto; }
  .hero-slides { min-height: clamp(240px, 62vw, 340px); }
  .hero-slide {
    align-items: flex-start;
    padding: clamp(16px, 4vw, 28px) 0 clamp(48px, 9vw, 64px);
  }
  .hero-overlay { padding: clamp(8px, 2vw, 16px) 0 clamp(20px, 5vw, 32px); }

  /* HERO ナビ (流動サイズ) */
  .hero-dots { bottom: clamp(10px, 2vw, 14px); }
  .hero-nav {
    width: clamp(36px, 9vw, 44px);
    height: clamp(36px, 9vw, 44px);
    font-size: clamp(16px, 4vw, 20px);
  }
  .hero-prev { left: clamp(6px, 2vw, 12px); }
  .hero-next { right: clamp(6px, 2vw, 12px); }

  /* HERO タイポ */
  .hero-text .eyebrow { font-size: clamp(10px, 2.6vw, 12px); margin-bottom: clamp(8px, 2vw, 12px); }
  .hero-title {
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: clamp(12px, 3vw, 18px);
  }
  .hero-line { white-space: normal; }
  .hero-lead { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.85; }

  /* HERO キャンペーン */
  .hero-campaign { padding: clamp(14px, 4vw, 20px); gap: clamp(14px, 3vw, 20px); }
  .hc-label { font-size: clamp(10px, 2.6vw, 12px); padding: 4px clamp(8px, 2vw, 12px); margin-bottom: clamp(8px, 2vw, 12px); }
  .hc-title { font-size: clamp(15px, 4vw, 18px); line-height: 1.45; margin-bottom: 8px; }
  .hc-title strong { font-size: clamp(17px, 4.6vw, 21px); }
  .hc-sub { font-size: clamp(11px, 3vw, 13px); line-height: 1.6; }
  .hc-right { gap: 10px; }
  .hc-right .btn { padding: clamp(12px, 3vw, 14px) clamp(14px, 3.5vw, 18px); font-size: clamp(13px, 3.4vw, 15px); min-height: 48px; }
  .hc-note { font-size: clamp(10px, 2.6vw, 12px); }

  /* セクション共通 */
  .section-title { font-size: clamp(20px, 5.6vw, 28px); line-height: 1.35; }
  .section-lead { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.85; margin-bottom: clamp(20px, 5vw, 32px); }
  .page-title { font-size: clamp(22px, 6vw, 30px); line-height: 1.35; }

  /* 本文・リスト */
  body { font-size: clamp(13px, 3.4vw, 15px); }
  main p { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.85; }
  main li { font-size: clamp(12px, 3.2vw, 14px); line-height: 1.8; }

  /* ボタン (タップ領域 48px) */
  .btn { min-height: 48px; }
  .btn-lg { padding: clamp(12px, 3vw, 16px) clamp(18px, 4.5vw, 28px); font-size: clamp(13px, 3.4vw, 16px); }
  .btn-sm { padding: clamp(8px, 2vw, 10px) clamp(14px, 3.5vw, 20px); font-size: clamp(12px, 3vw, 13px); }

  /* ヘッダー / ナビ */
  .hamburger { width: 44px; height: 44px; }
  .logo-text { font-size: clamp(15px, 4vw, 19px); }
  .nav-link { padding: 14px 20px; min-height: 48px; font-size: clamp(13px, 3.4vw, 15px); }

  /* problem / solution
     .problem-num はデスクトップで position:absolute 右上配置だが
     モバイル幅では h3 と重なるため静的配置 (上揃え) に切替。
     .problem-card の min-height:240px もモバイルでは過大なので解除。 */
  .problem-card, .solution-card { padding: clamp(18px, 4.5vw, 26px); min-height: 0; }
  .problem-num {
    position: static;
    font-size: clamp(24px, 6vw, 32px);
    margin-bottom: clamp(6px, 1.5vw, 10px);
    display: block;
  }
  .problem-card h3, .solution-card h3 { font-size: clamp(15px, 4vw, 18px); line-height: 1.45; padding-right: 0; }
  .problem-card p, .solution-card p { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.8; }

  /* pricing */
  .plan-card { padding: clamp(22px, 5.5vw, 32px) clamp(18px, 4.5vw, 26px); }
  .plan-name { font-size: clamp(15px, 4vw, 18px); }
  .plan-price { font-size: clamp(24px, 6vw, 32px); }
  .plan-price .yen { font-size: clamp(14px, 3.6vw, 18px); }
  .plan-price .per { font-size: clamp(11px, 2.8vw, 13px); }

  /* FAQ */
  .faq-q { padding: clamp(14px, 3.5vw, 18px) clamp(16px, 4vw, 22px); min-height: 48px; font-size: clamp(13px, 3.4vw, 15px); line-height: 1.5; }
  .faq-a { padding: 0 clamp(16px, 4vw, 22px); font-size: clamp(13px, 3.4vw, 14px); line-height: 1.85; }
  .faq-cat-title { font-size: clamp(16px, 4.4vw, 20px); margin: clamp(16px, 4vw, 24px) 0 clamp(8px, 2vw, 12px); }

  /* features (縦積み + パディング流動)
     既存の .carousel-container 横スクロールはモバイルでは無効化し、
     R さん指定どおり全ブロック縦並び。カルーセルナビも非表示。 */
  .carousel-container,
  .feature-detail-grid.carousel-container {
    display: block !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }
  .carousel-container > .feature-block {
    min-width: 0 !important;
    flex-shrink: unset !important;
    scroll-snap-align: none !important;
  }
  .carousel-nav { display: none !important; }
  .features-section { padding: clamp(40px, 10vw, 64px) 0; }
  .feature-detail-grid { gap: clamp(36px, 8vw, 56px) !important; margin-top: clamp(24px, 6vw, 40px); }
  .feature-detail-grid > .feature-block { margin-bottom: 0 !important; }
  .feature-block, .feature-block.reverse {
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 4vw, 24px) !important;
  }
  .feature-block-text { min-height: 0 !important; padding: 0; }
  .feature-block-text h2,
  .feature-block-text h3 { font-size: clamp(17px, 4.6vw, 22px); line-height: 1.45; margin-bottom: clamp(8px, 2vw, 14px); }
  .feature-block-text > p,
  .feature-block-text p { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.85; margin-bottom: clamp(10px, 2.5vw, 16px); }
  .feature-tag { font-size: clamp(11px, 2.8vw, 13px); padding: 5px clamp(10px, 2.5vw, 14px); margin-bottom: clamp(10px, 2.5vw, 16px); }
  .feature-points li { font-size: clamp(12px, 3.2vw, 14px); line-height: 1.75; padding: clamp(4px, 1vw, 6px) 0 clamp(4px, 1vw, 6px) clamp(18px, 4.5vw, 22px); }
  .feature-appeal { font-size: clamp(12px, 3.2vw, 14px); padding: clamp(10px, 2.5vw, 14px); line-height: 1.75; }
  .visual-card, .visual-card-rich {
    min-height: 0 !important;
    padding: clamp(18px, 4.5vw, 28px) clamp(14px, 3.5vw, 22px) !important;
  }

  /* GALLERY (画像カルーセル) 流動寸法 */
  .img-carousel-section { padding: clamp(40px, 10vw, 64px) 0 clamp(32px, 8vw, 48px); }
  .img-carousel { margin-top: clamp(20px, 5vw, 32px); }
  .ic-slide {
    min-height: clamp(280px, 60vw, 420px);
    padding: clamp(14px, 3.5vw, 22px) clamp(10px, 2.5vw, 16px) clamp(20px, 5vw, 32px);
  }
  .ic-slide img { max-height: clamp(220px, 48vw, 340px); max-width: 100%; }
  .ic-cap { font-size: clamp(11px, 3vw, 14px); margin-top: clamp(8px, 2vw, 14px); line-height: 1.6; }
  .ic-prev, .ic-next {
    width: clamp(32px, 8vw, 40px);
    height: clamp(32px, 8vw, 40px);
    font-size: clamp(18px, 4.6vw, 24px);
  }
  .ic-prev { left: clamp(6px, 2vw, 12px); }
  .ic-next { right: clamp(6px, 2vw, 12px); }

  /* CTA */
  .cta-title { font-size: clamp(20px, 5.4vw, 28px); line-height: 1.35; }
  .cta-lead { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.85; }
}

/* ============================================
 * v2.17 phase5o — モバイル破綻一掃 (R さん指摘 12 箇所)
 * - 無料版メアド入力 / プランバッジ / 比較表 / 中間CTA /
 *   FAQ / 問合せフォーム / サポート時間 / 最終CTA / フッター / 著作
 * ============================================ */
@media (max-width: 768px) {

  /* 無料版 メアド入力欄 + ボタン (pricing カード冒頭)
     ベース CSS の input は `flex: 1 1 280px` 指定。
     column 方向では flex-basis が高さに効くため flex を 0 0 auto に解除。 */
  .free-register-form { margin-top: 20px; padding-top: 18px; }
  .free-register-label { font-size: clamp(12px, 3.2vw, 14px); margin-bottom: 6px; }
  .free-register-inputs { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .free-register-inputs input[type="email"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    padding: clamp(11px, 3vw, 14px) clamp(12px, 3.5vw, 16px) !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
    min-height: 48px;
    max-height: 56px;
    box-sizing: border-box;
  }
  .free-register-inputs button {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    padding: clamp(12px, 3.4vw, 16px) clamp(16px, 4vw, 24px) !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    min-height: 50px;
    max-height: 56px;
    white-space: nowrap;
  }
  .free-register-note { font-size: clamp(11px, 3vw, 13px); line-height: 1.7; margin-top: 8px; }
  .free-register-result { font-size: clamp(12px, 3.2vw, 14px); }

  /* プランバッジ ".plan-chip" / "人気No.1" 入り込み解消 */
  .plan-chip {
    position: static !important;
    transform: none !important;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: clamp(8px, 2vw, 12px);
    font-size: clamp(10px, 2.8vw, 12px) !important;
    padding: 4px 12px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  }
  .plan-card.popular {
    transform: none !important;
    margin-top: 0;
  }
  .plan-card.popular::before {
    font-size: clamp(10px, 2.8vw, 12px);
    padding: 4px 14px;
    top: -10px;
  }
  .discount-badge {
    font-size: clamp(9px, 2.6vw, 11px) !important;
    padding: 2px 6px !important;
    margin-left: 6px;
  }
  .plan-name { font-size: clamp(16px, 4.2vw, 20px); }
  .plan-price-regular { font-size: clamp(11px, 3vw, 13px) !important; }
  .plan-price-tax { font-size: clamp(10px, 2.8vw, 12px); margin-top: -4px; }
  .plan-count { font-size: clamp(13px, 3.4vw, 15px); margin-top: clamp(6px, 1.5vw, 10px); }
  .plan-unit { font-size: clamp(11px, 3vw, 13px); }
  .plan-features li { font-size: clamp(12px, 3.2vw, 14px); padding: clamp(4px, 1vw, 6px) 0; }
  .launch-badge-wrap { padding: clamp(16px, 4vw, 24px) clamp(14px, 3.5vw, 20px) !important; }
  .launch-badge {
    font-size: clamp(13px, 3.4vw, 16px) !important;
    padding: clamp(8px, 2vw, 12px) clamp(14px, 3.5vw, 20px) !important;
    line-height: 1.4;
  }
  .launch-note { font-size: clamp(11px, 3vw, 13px); line-height: 1.7; }
  .no-cost-badges { gap: clamp(6px, 1.5vw, 10px); flex-wrap: wrap; justify-content: center; }
  .no-cost-badge {
    font-size: clamp(11px, 3vw, 13px) !important;
    padding: clamp(5px, 1.4vw, 8px) clamp(10px, 2.6vw, 14px) !important;
  }

  /* 機能比較表 — phase5p で改変ブロックを撤去、ベース CSS の table-wrap overflow-x のみに任せる */

  /* mid-cta-band 「最短3分で〜」 */
  .mid-cta { padding: clamp(28px, 7vw, 48px) 0 !important; }
  .mid-cta-band { padding: clamp(28px, 7vw, 48px) 0 !important; }
  .mid-cta-band .container {
    flex-direction: column;
    gap: clamp(14px, 3.5vw, 22px);
    text-align: center;
  }
  .mid-cta-band .mcb-headline {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.5;
    margin: 0 !important;
  }
  .mid-cta-band .btn {
    width: auto;
    min-width: clamp(180px, 50vw, 240px);
    padding: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 32px) !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    min-height: 48px;
  }
  .mid-cta-split .mid-cta-inner {
    grid-template-columns: 1fr !important;
    gap: clamp(12px, 3vw, 18px);
    padding: clamp(18px, 4.5vw, 28px) !important;
    text-align: center;
  }
  .mid-cta-split .mc-text h3 { font-size: clamp(16px, 4.4vw, 20px) !important; }
  .mid-cta-split .mc-text p  { font-size: clamp(12px, 3.2vw, 14px) !important; }
  .mid-cta-split .btn { width: 100%; min-height: 48px; }

  /* mid-cta-card 「疑問は解消できましたか？」 */
  .mcc-card { padding: clamp(22px, 5.5vw, 36px) clamp(18px, 4.5vw, 28px) !important; }
  .mcc-card h3 { font-size: clamp(17px, 4.6vw, 22px) !important; line-height: 1.4 !important; margin-bottom: clamp(8px, 2vw, 12px) !important; }
  .mcc-card p  { font-size: clamp(13px, 3.4vw, 15px) !important; line-height: 1.75 !important; margin-bottom: clamp(14px, 3.5vw, 20px) !important; }
  .mcc-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
  }
  .mcc-actions .btn {
    width: 100% !important;
    min-height: 50px;
    padding: clamp(13px, 3.4vw, 16px) clamp(18px, 4.5vw, 28px) !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
    font-weight: 800;
  }

  /* FAQ 全体縮小 */
  .faq-section { padding: clamp(40px, 10vw, 64px) 0 !important; }
  .faq-list { gap: clamp(8px, 2vw, 12px) !important; }
  .faq-q { padding: clamp(13px, 3.4vw, 16px) clamp(38px, 9vw, 50px) clamp(13px, 3.4vw, 16px) clamp(14px, 3.5vw, 18px) !important; min-height: 48px !important; font-size: clamp(13px, 3.4vw, 14px) !important; line-height: 1.55 !important; }
  .faq-q::after { right: clamp(14px, 3.5vw, 20px) !important; font-size: clamp(14px, 3.6vw, 18px) !important; }
  .faq-a { padding: 0 clamp(14px, 3.5vw, 18px) !important; font-size: clamp(12px, 3.2vw, 14px) !important; line-height: 1.85 !important; }
  .faq-item.open .faq-a { padding: 0 clamp(14px, 3.5vw, 18px) clamp(14px, 3.5vw, 18px) !important; }
  .faq-cat-title { font-size: clamp(15px, 4vw, 18px) !important; margin: clamp(20px, 5vw, 28px) 0 clamp(8px, 2vw, 12px) !important; }

  /* 問合せフォーム — テキストエリア圧縮 / inputs 適正化 */
  .contact-section { padding: clamp(40px, 10vw, 64px) 0 !important; }
  .contact-form { padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 24px) !important; }
  .contact-form .form-group { margin-bottom: clamp(14px, 3.5vw, 20px) !important; }
  .contact-form label { font-size: clamp(12px, 3.2vw, 14px) !important; margin-bottom: 6px !important; }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form select {
    padding: clamp(10px, 2.6vw, 13px) clamp(12px, 3vw, 16px) !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
    min-height: 46px;
  }
  .contact-form textarea {
    padding: clamp(10px, 2.6vw, 13px) clamp(12px, 3vw, 16px) !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    min-height: clamp(120px, 30vw, 160px) !important;
    height: clamp(120px, 30vw, 160px) !important;
  }
  .contact-form .form-checkbox { font-size: clamp(12px, 3.2vw, 14px) !important; }
  .contact-form .btn { min-height: 50px !important; font-size: clamp(14px, 3.6vw, 16px) !important; padding: clamp(13px, 3.4vw, 16px) !important; }

  /* サポート時間 — 中央寄せ→左寄せ + フォント階層分離 */
  .contact-info {
    padding: clamp(18px, 4.5vw, 28px) clamp(16px, 4vw, 24px) !important;
    text-align: left !important;
    margin-top: clamp(20px, 5vw, 32px) !important;
  }
  .contact-info h3 { font-size: clamp(15px, 4vw, 18px) !important; text-align: left !important; margin-bottom: clamp(8px, 2vw, 12px) !important; }
  .contact-info p { font-size: clamp(13px, 3.4vw, 15px) !important; line-height: 1.75 !important; text-align: left !important; margin-bottom: 6px !important; font-weight: 700 !important; }
  .contact-info .small { font-size: clamp(11px, 3vw, 13px) !important; line-height: 1.7 !important; text-align: left !important; margin-top: 6px !important; font-weight: 500 !important; color: #475569 !important; }

  /* 最終 CTA 「営業リスト〜」枠詰め + ボタン強化 */
  .cta { padding: clamp(40px, 10vw, 64px) 0 !important; }
  .cta-title { font-size: clamp(19px, 5vw, 26px) !important; line-height: 1.4 !important; margin-bottom: clamp(10px, 2.5vw, 14px) !important; }
  .cta-lead { font-size: clamp(13px, 3.4vw, 15px) !important; line-height: 1.75 !important; margin-bottom: clamp(20px, 5vw, 28px) !important; }
  .cta .btn-pop,
  .cta .btn {
    width: clamp(220px, 70vw, 320px);
    min-height: 56px !important;
    padding: clamp(14px, 3.6vw, 18px) clamp(18px, 4.5vw, 28px) !important;
    font-size: clamp(14px, 3.8vw, 17px) !important;
    font-weight: 800 !important;
  }

  /* フッター — 2 カラム化 + 縦圧縮 */
  .site-footer { padding-top: clamp(28px, 7vw, 48px) !important; padding-bottom: 0 !important; }
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 5vw, 32px) !important;
    padding-bottom: clamp(20px, 5vw, 32px);
  }
  .footer-brand { text-align: left; }
  .footer-brand .logo { justify-content: flex-start; }
  .footer-desc { font-size: clamp(12px, 3.2vw, 14px) !important; line-height: 1.75 !important; max-width: 100%; }
  .footer-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(16px, 4vw, 24px) !important;
  }
  .footer-col h4 { font-size: clamp(12px, 3.2vw, 14px) !important; margin-bottom: clamp(8px, 2vw, 12px) !important; }
  .footer-col li { margin-bottom: clamp(6px, 1.5vw, 10px) !important; }
  .footer-col a { font-size: clamp(11px, 3vw, 13px) !important; line-height: 1.6 !important; }

  /* 著作表示 */
  .footer-bottom { padding: clamp(10px, 2.5vw, 16px) 0 !important; }
  .footer-bottom p { font-size: clamp(10px, 2.6vw, 12px) !important; line-height: 1.6 !important; text-align: center; margin: 0; }
}

/* ============================================================
 * v2.17 phase5p — R さん実機指摘の破綻 9 系統一掃 (PC + mobile)
 * ・横流れ accent gradient 全廃 → 単色 brand-blue (style.css 側で対応)
 * ・popular plan の gradient ring 撤廃 (style.css 側で対応)
 * ・比較表の改変撤廃 / phase5o 前の table へ (style.css + responsive.css 側で対応)
 * ・HERO 上空き圧縮 / 矢印・ドット位置を本文非干渉化
 * ・モバイル プラン表 完全縦並び (display: block 強制)
 * ・プラン見出し折り返し防止 (clamp + 縦並び)
 * ・リストマーカー ▶ 統一 (CSS hanging indent + HTML 文字置換)
 * ・Instagram (.hsn-ig) 公式色 (style.css 側で対応)
 * ・他にはない機能 バッジ強化 (style.css 側で対応)
 * ============================================================ */

/* ---------- HERO ファーストビュー再設計 (PC: 1024px+) ---------- */
@media (min-width: 1025px) {
  .hero { min-height: auto !important; }
  .hero-slide { padding: 12px 0 16px !important; }
  .hero-overlay { padding: 4px 0 18px !important; }
  .hero-overlay-inner { gap: 12px !important; }
  .hero-campaign { padding: 18px 28px !important; gap: 24px !important; }
  .hero-slides { min-height: 360px !important; max-height: 460px !important; }
}

/* ---------- HERO ファーストビュー再設計 (mobile: ≤768px) ----------
 * 矢印・ドット は slide 中央ではなく slide 下端に移動し本文と非干渉化。
 * slide 自体の min-height を text 内容 + 制御余白を吸収できるよう拡大。
 * hero-overlay の上 padding を圧縮、キャンペーンバナーをファーストビュー内に。 */
@media (max-width: 768px) {
  .hero { min-height: auto !important; padding: 0 !important; }
  .hero-slide {
    align-items: flex-start !important;
    padding: 4px 0 clamp(64px, 14vw, 84px) !important;
  }
  .hero-slides { min-height: clamp(320px, 88vw, 420px) !important; }
  .hero-overlay { padding: 4px 0 clamp(16px, 4vw, 24px) !important; }
  .hero-overlay-inner { gap: clamp(8px, 2vw, 12px) !important; }
  .hero-campaign { padding: clamp(12px, 3.5vw, 18px) !important; gap: clamp(10px, 2.5vw, 16px) !important; }

  /* 矢印: 中央高さではなく slide 下端の左右に小さく配置 (本文非干渉) */
  .hero-nav {
    top: auto !important;
    bottom: clamp(10px, 2.5vw, 16px) !important;
    transform: none !important;
    width: clamp(32px, 8vw, 38px) !important;
    height: clamp(32px, 8vw, 38px) !important;
    font-size: clamp(14px, 3.8vw, 18px) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.10);
  }
  .hero-prev { left: clamp(8px, 2vw, 14px) !important; }
  .hero-next { right: clamp(8px, 2vw, 14px) !important; }
  /* ドット: 矢印と同じ下端、左右中央 */
  .hero-dots {
    bottom: clamp(18px, 4.4vw, 28px) !important;
  }

  /* キャンペーンバナー全体 縦並び圧縮 */
  .hc-label { font-size: clamp(10px, 2.6vw, 12px) !important; padding: 3px 10px !important; margin-bottom: 6px !important; letter-spacing: 0.06em !important; }
  .hc-title { font-size: clamp(14px, 3.8vw, 17px) !important; line-height: 1.4 !important; margin: 0 0 6px !important; }
  .hc-title strong { font-size: clamp(15px, 4.2vw, 19px) !important; display: inline; }
  .hc-sub { font-size: clamp(11px, 3vw, 13px) !important; line-height: 1.55 !important; margin: 0 !important; }
  .hc-right { gap: 8px !important; }
  .hc-right .btn { padding: clamp(11px, 2.8vw, 14px) clamp(14px, 3.5vw, 18px) !important; font-size: clamp(13px, 3.4vw, 15px) !important; min-height: 46px !important; }
  .hc-note { font-size: clamp(10px, 2.6vw, 12px) !important; margin-top: 4px !important; }
}

/* ---------- モバイル プラン表 完全縦並び (display: block 強制) ---------- */
@media (max-width: 768px) {
  .pricing-grid {
    display: block !important;
    grid-template-columns: none !important;
    margin-top: clamp(20px, 5vw, 28px) !important;
  }
  .pricing-grid > .plan-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 clamp(28px, 7vw, 40px) !important;
    transform: none !important;
    padding: clamp(36px, 9vw, 52px) clamp(20px, 5vw, 28px) clamp(24px, 6vw, 32px) !important;
  }
  .pricing-grid > .plan-card:last-child { margin-bottom: 0 !important; }
  .plan-card.popular {
    transform: none !important;
    padding-top: clamp(40px, 10vw, 56px) !important;
  }
  .plan-card.popular:hover { transform: translateY(-2px) !important; }

  /* プラン見出し: 折り返さないサイズ + 縦並びで割引バッジを吊り下げ */
  .plan-name {
    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: clamp(8px, 2vw, 12px) !important;
  }
  .plan-name .discount-badge {
    display: inline-block !important;
    margin-left: 4px !important;
    margin-top: 0 !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
    padding: 2px 6px !important;
    vertical-align: middle !important;
  }
  /* plan-features 項目: モバイルで nowrap 解除 (長文項目で card 幅 overflow 防止) */
  .plan-features li {
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.6 !important;
  }
  /* 無料枠カード見出しは 1 行収納 */
  .free-card { padding: clamp(28px, 7vw, 40px) clamp(20px, 5vw, 30px) !important; }
  .free-card h3 {
    font-size: clamp(17px, 4.4vw, 22px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ---------- リストマーカー ▶ 統一 + hanging indent (PC + mobile) ---------- */
.pricing-disclaimer p,
.pricing-note p {
  position: relative;
  padding-left: 1.4em;
  text-indent: 0;
  margin-bottom: 0.6em;
}
.pricing-disclaimer p::before,
.pricing-note p::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--brand-orange, #f97316);
  font-size: 0.85em;
  line-height: inherit;
  font-weight: 900;
}

/* feature-points li も ▶ で hanging indent (PC + mobile) */
.feature-points li {
  position: relative;
  padding-left: 1.4em;
  list-style: none;
}
.feature-points li::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #2563eb;
  font-size: 0.78em;
  font-weight: 900;
}

/* ---------- 「他にはない機能」バッジ モバイル強化 ---------- */
@media (max-width: 768px) {
  .feature-tag.feature-tag-accent,
  .features-section .feature-detail-grid > .feature-block .feature-tag.feature-tag-accent {
    font-size: clamp(13px, 3.6vw, 16px) !important;
    padding: clamp(9px, 2.4vw, 12px) clamp(14px, 3.8vw, 20px) !important;
    border-width: 2px !important;
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.45) !important;
    margin-bottom: clamp(14px, 3.5vw, 20px) !important;
    border-radius: 8px !important;
  }
}

/* ---------- カード上下余白の均整化 (PC + mobile) ---------- */
@media (max-width: 768px) {
  .problem, .solution, .features-section, .screenshots,
  .pricing-section, .flow, .faq-section, .contact-section {
    padding-top: clamp(40px, 10vw, 64px) !important;
    padding-bottom: clamp(40px, 10vw, 64px) !important;
  }
  .problem-card, .solution-card {
    padding: clamp(20px, 5vw, 28px) !important;
  }
  .problem-card h3, .solution-card h3 { margin-bottom: clamp(8px, 2vw, 12px); }
  .problem-card p, .solution-card p { margin-bottom: 0 !important; }
  .plan-card .plan-features { margin-bottom: clamp(20px, 5vw, 28px) !important; }
  .plan-card .btn-block { margin-top: 0 !important; }
}

/* ============================================================
 * v2.17 phase5q (2026-05-08) — モバイル単独是正 6 項目
 * R さん実機指摘:
 *  1. ヘッダーとカルーセルをもう少し離す
 *  2. 「他にはない機能」バッジが半分に見切れている
 *  3. ▶ マーカーが Unicode 絵文字グリフ + ズレ (PC hotfix と同症状)
 *  4. SNS アイコン色 (特に Instagram) が公式と異なる
 *  5. 機能比較表が横スクロール + 文字列縦折れ
 *  6. PC 版を参考にモバイルを作り上げる (PC ロック値完全一致 / clamp 翻訳)
 *
 * PC スコープ (@media (min-width: 769px) / (min-width: 1025px)) は
 * 完全不変。本ブロックは @media (max-width: 768px) 内に閉じ込め PC へ
 * 物理的に影響しない設計。
 * ============================================================ */
@media (max-width: 768px) {

  /* ---------- 項目 1: ヘッダーとカルーセル分離 ---------- */
  .hero-overlay-inner {
    padding-top: clamp(20px, 5vw, 32px) !important;
  }

  /* ---------- 項目 2: 「他にはない機能」バッジ クリップ解除 + 余白 ---------- */
  .solution-card.highlighted {
    overflow: visible !important;
    padding-top: clamp(40px, 10vw, 56px) !important;
  }

  /* ---------- 項目 3: ▶ マーカー CSS 三角描画 (PC hotfix-1/3/5 完全踏襲) ---------- */
  .pricing-disclaimer p::before,
  .pricing-note p::before,
  .feature-points li::before,
  .free-card .free-notes li::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 5px 0 5px 8px !important;
    border-color: transparent !important;
    background: transparent !important;
    position: absolute !important;
    left: 6px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
  }
  /* 縦位置 px 直値 (PC ロック値完全一致 / em は font-size:0 で 0px 化のため不可) */
  .pricing-disclaimer p::before {
    top: 10px !important;
    border-left-color: #f97316 !important;
  }
  .pricing-note p::before {
    top: 12px !important;
    border-left-color: #f97316 !important;
  }
  .feature-points li::before {
    top: 16px !important;
    border-left-color: #2563eb !important;
  }
  .free-card .free-notes li::before {
    top: 10px !important;
    border-left-color: #f97316 !important;
  }
  /* feature-tag-accent::before は バッジ内左寄せ アイコン (white triangle) */
  .feature-tag.feature-tag-accent {
    position: relative !important;
    padding-left: 36px !important;
  }
  .feature-tag.feature-tag-accent::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 6px 0 6px 9px !important;
    border-color: transparent transparent transparent #ffffff !important;
    background: transparent !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
  }

  /* ---------- 項目 4: SNS アイコン公式色 (PC hotfix-6 完全踏襲) ---------- */
  .hsn-ig,
  .sb-ig .sb-logo {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    background-image: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color: #ffffff !important;
  }
  .hsn-x {
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
  }
  .hsn-fb,
  .sb-fb .sb-logo {
    background: #1877F2 !important;
    background-image: none !important;
    color: #ffffff !important;
  }
  .hsn-tt,
  .sb-tt .sb-logo {
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
  }
  .hsn-line,
  .sb-line .sb-logo {
    background: #06C755 !important;
    background-image: none !important;
    color: #ffffff !important;
  }
  .sb-x .sb-logo {
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
  }

  /* ---------- 項目 5: 機能比較表 カード型変換 (横スクロール解消) ---------- */
  .table-wrap {
    overflow-x: visible !important;
    overflow: visible !important;
  }
  .comparison-table {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .comparison-table thead {
    display: none !important;
  }
  .comparison-table tbody {
    display: block !important;
    width: 100% !important;
  }
  .comparison-table tbody tr {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin: 0 0 clamp(12px, 3vw, 18px) !important;
    padding: clamp(14px, 3.5vw, 18px) clamp(14px, 3.5vw, 18px) clamp(8px, 2vw, 12px) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  }
  .comparison-table tbody tr:nth-child(even) {
    background: #ffffff !important;
  }
  .comparison-table tbody tr:hover {
    background: #ffffff !important;
  }
  .comparison-table tbody td {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: clamp(8px, 2vw, 10px) 0 !important;
    border-bottom: 1px solid #f5f7fa !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    text-align: left !important;
    color: #111827 !important;
    background: transparent !important;
  }
  .comparison-table tbody td:last-child {
    border-bottom: none !important;
  }
  .comparison-table tbody td:first-child {
    display: block !important;
    width: 100% !important;
    padding: 0 0 clamp(8px, 2vw, 10px) !important;
    margin-bottom: clamp(4px, 1vw, 6px) !important;
    font-weight: 800 !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    color: #0f172a !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-align: left !important;
    background: transparent !important;
  }
  /* 各セルにプラン名ラベルを CSS 注入 (HTML 不変) */
  .comparison-table tbody td:nth-child(2)::before { content: "無料枠"; font-weight: 700; color: #475569; }
  .comparison-table tbody td:nth-child(3)::before { content: "ライト"; font-weight: 700; color: #475569; }
  .comparison-table tbody td:nth-child(4)::before { content: "スタンダード"; font-weight: 700; color: #475569; }
  .comparison-table tbody td:nth-child(5)::before { content: "プロ"; font-weight: 700; color: #475569; }
  .comparison-table tbody td:nth-child(6)::before { content: "エキスパート"; font-weight: 700; color: #475569; }
  .comparison-table tbody td:nth-child(7)::before { content: "マスター"; font-weight: 700; color: #475569; }
  /* 最終行 (月額) は hilight 維持 */
  .comparison-table tbody tr:last-child {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
  }
  .comparison-table tbody tr:last-child td {
    color: #1e3a8a !important;
    font-weight: 700 !important;
  }
  .comparison-table tbody tr:last-child td:first-child {
    color: #1e3a8a !important;
    border-bottom-color: #bfdbfe !important;
  }
  .comparison-table .o {
    color: #1d4ed8 !important;
    font-size: clamp(16px, 4.4vw, 20px) !important;
    font-weight: 800 !important;
  }
  .comparison-table .x {
    color: #ef4444 !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    font-weight: 700 !important;
  }
}

/* ============================================================
 * v2.17 phase5q-2 (2026-05-08) — モバイル追加是正 3 項目
 * R さん実機確認後フォローアップ:
 *  1. ヘッダーとカルーセルの間隔をさらに広げる
 *     (.hero に padding-top を直接付与し sticky header 下に余白)
 *  2. カルーセル本体をもう少し大きく
 *     (.hero-slides min-height を 88vw → 100vw 級に拡大)
 *  3. ヘッドコピー (「050を〜」等) をモバイルで水平中央配置
 *     (.hero-text に text-align: center)
 *
 * @media (max-width: 768px) スコープ完全閉じ込めで PC 影響ゼロ。
 * ============================================================ */
@media (max-width: 768px) {

  /* ---------- 項目 1: ヘッダーとカルーセル分離 拡大 ---------- */
  .hero {
    padding-top: clamp(28px, 6vw, 44px) !important;
  }

  /* ---------- 項目 2: カルーセル拡大 ---------- */
  .hero-slides {
    min-height: clamp(380px, 100vw, 500px) !important;
  }

  /* ---------- 項目 3: ヘッドコピー水平中央配置 ---------- */
  .hero-text {
    text-align: center !important;
  }
  .hero-text .eyebrow,
  .hero-text .hero-title,
  .hero-text .hero-lead {
    text-align: center !important;
  }
}

/* ============================================================
 * v2.17 phase5q-3 (2026-05-08) — モバイル追加是正 3 項目
 * R さん実機確認 (PC ブラウザ モバイル幅相当) フォローアップ:
 *  1. ヘッドコピー (h1/h2 大見出し) を大きく
 *  2. リード文 (hero-lead) は中央寄せ撤回し左寄せ
 *     (中央寄せだと折れ曲がりがダサい・phase5q-2 で適用した center を上書き)
 *  3. カルーセル末端 〜 LAUNCH CAMPAIGN の間隔を圧縮
 *     (1 画面にバランス収納)
 *
 * @media (max-width: 768px) スコープ完全閉じ込めで PC 影響ゼロ。
 * ============================================================ */
@media (max-width: 768px) {

  /* ---------- 項目 1: ヘッドコピー (hero-title) 拡大 ---------- */
  .hero-title {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.35 !important;
  }
  .hero-text .eyebrow {
    font-size: clamp(11px, 3vw, 14px) !important;
  }

  /* ---------- 項目 2: リード文 左寄せ (中央寄せ撤回) ---------- */
  .hero-text .hero-lead {
    text-align: left !important;
  }

  /* ---------- 項目 3: カルーセル 〜 LAUNCH CAMPAIGN 間隔圧縮 ---------- */
  /* hero-slide 下部 padding を圧縮 (矢印・ドット領域 ~28px は確保) */
  .hero-slide {
    padding-bottom: clamp(32px, 8vw, 48px) !important;
  }
  /* hero-overlay 上下 padding 圧縮 */
  .hero-overlay {
    padding: 0 0 clamp(8px, 2vw, 14px) !important;
  }
  /* phase5q の hero-overlay-inner 上 padding を圧縮 */
  .hero-overlay-inner {
    padding-top: clamp(6px, 1.5vw, 12px) !important;
  }
  /* phase5q-2 の hero-slides min-height をやや控えめに (空白圧縮) */
  .hero-slides {
    min-height: clamp(340px, 92vw, 460px) !important;
  }
}

/* ============================================================
 * v2.17 phase5q-4 (2026-05-08) — モバイル LAUNCH CAMPAIGN 引き上げ
 * R さん実機指摘: phase5q-3 の 4 軸圧縮では足りないので
 * LAUNCH CAMPAIGN セクションをさらに上に詰める。
 *
 * @media (max-width: 768px) スコープ完全閉じ込めで PC 影響ゼロ。
 * ============================================================ */
@media (max-width: 768px) {

  /* hero-slides 高さを更に圧縮 (空白削減 / 主要 knob) */
  .hero-slides {
    min-height: clamp(280px, 75vw, 380px) !important;
  }

  /* hero-slide 下部 padding を最小化 (矢印・ドット領域 ~28px は確保) */
  .hero-slide {
    padding-bottom: clamp(16px, 4vw, 28px) !important;
  }

  /* hero-overlay 上下 padding を 0 化 */
  .hero-overlay {
    padding: 0 !important;
  }

  /* hero-overlay-inner 上 padding も 0 化 */
  .hero-overlay-inner {
    padding-top: 0 !important;
  }
}