/* ============================================================
   YL Product LP 統一CSS
   全製品共通デザインシステム
   ============================================================ */

/* ── CSS変数（統一カラーパレット） ── */
:root {
  --navy: #1a3a5c;
  --cyan: #3b9eff;
  --cyan-light: #eef6ff;
  --orange: #ff8c00;
  --gold: #f0c744;
  --gray: #f4f8fc;
  --gray-mid: #e4edf5;
  --muted: #5a7a9a;
  --shadow: 0 6px 28px rgba(26,58,92,.10);
  --radius: 16px;
}

/* ── リセット・ベース ── */
.ylp * { box-sizing: border-box; margin: 0; padding: 0; }
.ylp {
  font-family: 'Noto Sans JP', sans-serif;
  color: #2c3e50; line-height: 1.8; font-size: 16px;
}
.ylp a { color: var(--cyan); text-decoration: none; }
.ylp a:hover { color: var(--navy); }

/* ── ページ幅制限解除・ヘッダー非表示 ── */
.ylp-page .yl-page-wrap { max-width: none !important; padding: 0 !important; }
.ylp-page .yl-page-content { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.ylp-page .yl-page-header { display: none !important; }
.ylp-page main { padding-top: 0 !important; margin-top: 0 !important; }
.ylp-page .yl-page-nav { display: none !important; }

/* ── 共通レイアウト ── */
.ylp-section { padding: 72px 0; }
.ylp-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.ylp-center { text-align: center; }

/* ── 統一ラベル ── */
.ylp-label {
  display: inline-block; color: var(--cyan);
  font-size: 15px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 0; line-height: 1.2;
}

/* ── 統一見出し（h2） ── */
.ylp-title {
  font-size: 24px !important; font-weight: 900 !important;
  color: var(--navy) !important; line-height: 1.3 !important;
  margin-bottom: 12px !important; white-space: nowrap; margin-top: 8px !important;
  border-bottom: 2.5px solid var(--gray-mid) !important;
  padding-bottom: 12px !important; position: relative !important;
}
.ylp-title::before {
  content: "" !important; display: block !important;
  position: absolute !important; bottom: -2.5px !important; left: 0 !important;
  width: 56px !important; height: 2.5px !important;
  background: linear-gradient(90deg, #ff8c00, #f0c744) !important;
}
.ylp-title::after { display: none !important; }

/* ── 統一サブタイトル ── */
.ylp-subtitle {
  font-size: clamp(16px, 2vw, 17px); color: var(--muted);
  max-width: 600px; margin: 0 auto 40px; line-height: 1.9;
}

/* ============================================================
   ページタイトルエリア
   ============================================================ */

.ylp-title-area {
  background: #fff; padding: 0;
  border-bottom: 1px solid var(--gray-mid);
}
.ylp-title-inner { max-width: 1200px; margin: 0 auto; padding: 24px 40px 28px; text-align: center; }
.ylp-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--muted); margin-bottom: 14px; text-align: left;
}
.ylp-breadcrumb a { color: var(--muted); }
.ylp-breadcrumb a:hover { color: var(--cyan); }
.ylp-breadcrumb span { color: #bbb; }
.ylp-page-subtitle {
  font-size: clamp(22px, 3vw, 32px); font-weight: 700;
  color: var(--cyan); letter-spacing: .02em; margin-bottom: 4px;
}
.ylp-page-title {
  font-size: clamp(40px, 7vw, 72px) !important; font-weight: 900 !important;
  color: var(--navy) !important; line-height: 1.1 !important;
  padding-bottom: 16px !important; border-bottom: none !important;
  white-space: normal !important;
}
.ylp-page-title::before,
.ylp-page-title::after { display: none !important; }
.ylp-page-title em { color: var(--cyan); font-style: normal; }

/* ============================================================
   ヒーローセクション
   ============================================================ */

.ylp-hero {
  background: linear-gradient(150deg, var(--cyan-light) 0%, #fff 60%);
  padding: 72px 24px 80px; text-align: center;
  border-bottom: 2px solid var(--gray-mid);
}
.ylp-hero h1 {
  font-size: clamp(28px, 4.5vw, 48px); font-weight: 900; color: var(--navy);
  line-height: 1.4; margin-bottom: 20px;
  border-bottom: none !important; padding-bottom: 0 !important;
}
.ylp-hero h1::before,
.ylp-hero h1::after { display: none !important; }
.ylp-hero h1 em { color: var(--orange); font-style: normal; }
.ylp-hero-lead { font-size: 16px; color: var(--muted); margin-bottom: 36px; line-height: 1.9; }

.ylp-hero-price { margin-bottom: 24px; }
.ylp-hero-price-num {
  font-size: clamp(36px, 7vw, 72px); font-weight: 900; color: var(--navy); line-height: 1.1;
}
.ylp-hero-price-num small { font-size: clamp(16px, 2.5vw, 24px); font-weight: 500; color: var(--muted); }

.ylp-hero-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 15px; color: var(--muted); margin-bottom: 32px; }
.ylp-hero-features span { white-space: nowrap; }

/* ============================================================
   統一ボタン
   ============================================================ */

.ylp-btn {
  display: inline-block; background: var(--orange); color: #fff !important;
  font-weight: 700; font-size: 19px; padding: 20px 52px; border-radius: 50px;
  transition: .2s; cursor: pointer; border: none; box-shadow: 0 4px 0 #b55f00;
  text-align: center;
}
.ylp-btn:hover { background: #e07b00; transform: translateY(-2px); }

/* ============================================================
   VS比較セクション
   ============================================================ */

.ylp-vs { background: var(--gray); }
.ylp-vs .ylp-subtitle { margin-bottom: 26px !important; }
.ylp-vs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 40px;
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.ylp-vs-col {
  background: #fff; border-radius: var(--radius);
  padding: 5px 18px; box-shadow: var(--shadow); border: none;
}
.ylp-vs-col.ylp-yl { background: var(--cyan-light); border: 2px solid var(--cyan); }
.ylp-vs-col h3 {
  font-size: 20px; font-weight: 700; color: var(--muted);
  margin-top: 40px; margin-bottom: 14px; padding-left: 14px;
  border-left: 4px solid var(--cyan); 
  border-bottom: none !important; padding-bottom: 0 !important;
}
.ylp-vs-col h3::before { display: none !important; }
.ylp-vs-col.ylp-yl h3 { color: var(--cyan); }
.ylp-vs-list { list-style: none; margin-left: 22px; margin-bottom: 20px; }
.ylp-vs-list li {
  font-size: clamp(16px, 1.5vw, 16px); padding: 9px 0;
  border-bottom: 1px solid var(--gray-mid);
  display: flex; align-items: center; gap: 10px; line-height: 1.9; text-align: left;
}
.ylp-vs-list li:last-child { border-bottom: none; }

/* ============================================================
   機能紹介セクション
   ============================================================ */

.ylp-features { background: #fff; }
.ylp-feat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px; margin-top: 40px;
}
.ylp-feat {
  background: var(--gray); border-radius: var(--radius);
  padding: 28px; transition: .2s;
}
.ylp-feat:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26,58,92,.12); }
.ylp-feat-icon { font-size: 36px; margin-bottom: 12px; }
.ylp-feat h3 {
  font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px;
  text-align: left;
  border-bottom: none !important; padding-bottom: 0 !important;
}
.ylp-feat h3::before { display: none !important; }
.ylp-feat p { font-size: 15px; color: var(--muted); line-height: 1.8; text-align: left !important; }

/* ============================================================
   比較表セクション
   ============================================================ */

.ylp-comparison-table { background: var(--gray); }
.ylp-compare-table { font-size: 16px; width: 100%; border-collapse: collapse; }
.ylp-compare-table td { font-size: 15px; padding: 14px 20px; }
.ylp-compare-table th.ylp-yl-col { background: var(--cyan); color: #fff; }
.ylp-compare-table td.ylp-yl-col { background: var(--cyan-light); color: var(--navy); }
.ylp-check { color: #22c55e; font-size: 18px; font-weight: 700; }

/* ============================================================
   セキュリティセクション
   ============================================================ */

.ylp-security { background: #fff; }
.ylp-sec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; margin-top: 40px;
}
.ylp-sec-card { background: var(--gray); padding: 16px 28px; border-radius: var(--radius); }
.ylp-sec-card h4 {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; margin-top: 28px; margin-bottom: 10px;
}

/* ============================================================
   導入の流れセクション
   ============================================================ */

.ylp-flow { background: var(--gray); }
.ylp-flow .ylp-title { white-space: normal; }
.ylp-flow .ylp-subtitle { text-align: center; }
.ylp-flow-wrap {
  max-width: 680px; margin: 40px auto 0; position: relative;
}
.ylp-flow-wrap::before {
  content: ""; position: absolute; left: 27px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--cyan), var(--gray-mid));
}
.ylp-step { display: flex; gap: 24px; margin-bottom: 28px; position: relative; }
.ylp-step-num {
  flex-shrink: 0; width: 56px; height: 56px; background: var(--cyan); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; position: relative; z-index: 1;
  box-shadow: #fff 0 0 0 4px;
}
.ylp-step-body {
  background: #fff; border-radius: var(--radius);
  padding: 0 26px 22px; flex: 1; box-shadow: var(--shadow);
}
.ylp-step-body h4 {
  font-size: clamp(15px, 1.8vw, 17px); font-weight: 700; color: var(--navy);
  margin-bottom: 6px; text-align: left; padding-top: 0 !important;
  border-bottom: none !important; padding-bottom: 0 !important;
}
.ylp-step-body h4::before { display: none !important; }
.ylp-step-body p { font-size: clamp(16px, 1.5vw, 16px); color: var(--muted); line-height: 1.9; text-align: left; }

/* ============================================================
   仕様・動作環境セクション
   ============================================================ */

.ylp-specs { background: #fff; }
.ylp-specs .ylp-label,
.ylp-specs .ylp-title { text-align: center; }
.ylp-specs .ylp-title::before { left: 50%; transform: translateX(-50%); }
.ylp-spec-table-wrap { max-width: 640px; margin: 32px auto 0; }
.ylp-spec-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ylp-spec-table th, .ylp-spec-table td { padding: 14px 20px; font-size: 14px; border-bottom: 1px solid var(--gray-mid); text-align: left; }
.ylp-spec-table th { width: 40%; font-weight: 700; color: var(--navy); background: var(--navy); color: #fff; }
.ylp-spec-table tr:nth-child(even) th { background: #22486e; }
.ylp-spec-table tr:last-child th, .ylp-spec-table tr:last-child td { border-bottom: none; }

/* ============================================================
   FAQセクション
   ============================================================ */

.ylp-faq { background: #fff; }
.ylp-faq .ylp-label,
.ylp-faq .ylp-title { text-align: center; }
.ylp-faq .ylp-title::before { left: 50%; transform: translateX(-50%); }
.ylp-faq-list { max-width: 720px; margin: 40px auto 0; }
.ylp-faq-item { border-bottom: 1px solid var(--gray-mid); padding: 22px 0; }
.ylp-faq-q {
  font-size: clamp(15px, 1.8vw, 17px); font-weight: 700; color: var(--navy);
  display: flex; gap: 14px; align-items: flex-start;
}
.ylp-faq-q::before {
  content: "Q"; background: var(--cyan); color: #fff; font-size: 12px; font-weight: 900;
  padding: 3px 9px; border-radius: 5px; flex-shrink: 0; margin-top: 3px;
}
.ylp-faq-a {
  font-size: clamp(16px, 1.6vw, 16px); color: var(--muted); margin-top: 12px;
  padding-left: 38px; line-height: 1.9; text-align: left;
}

/* ============================================================
   購入セクション（統一仕様）
   ============================================================ */

.ylp-purchase { 
  background: var(--cyan-light); 
  border-top: 2px solid var(--gray-mid); 
}
.ylp-purchase .ylp-subtitle { margin-bottom: 20px; }

/* 統一グリッド配置 */
.ylp-purchase-grid { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 27px;
    max-width: 1200px;
    margin: 40px auto 0;
    justify-items: center;
    padding: 0 40px;
}

/* 統一白枠仕様（580px幅） */
.ylp-card {
    width: 580px;
    max-width: 580px;
    margin: 0;
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 16px 48px rgba(26,58,92,.13);
    position: static;
    display: block;
    box-sizing: border-box;
    border: none;
}

/* 推奨カード（シアンボーダー） */
.ylp-card--recommend { 
    border: 2px solid var(--cyan);
}

/* 統一LICENSEラベル */
.ylp-license-label {
    color: #3b9eff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
    display: inline-block;
    line-height: 24px;
}

/* カード見出し */
.ylp-card h3 {
    font-size: 22px;
    font-weight: 900;
    color: var(--navy);
    margin: 40px auto 4px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: center;
}
.ylp-card h3::before { display: none !important; }

/* プラン説明 */
.ylp-plan-desc {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
    text-align: center;
    line-height: 21px;
}

/* 価格エリア */
.ylp-price-box {
    background: var(--gray);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 28px;
    text-align: center;
}

.ylp-big-price {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 900;
    color: var(--navy);
    text-align: center;
    margin-bottom: 12px;
}
.ylp-big-price small { font-size: clamp(14px, 1.8vw, 17px); font-weight: 500; color: var(--muted); }

/* ============================================================
   統一フォーム
   ============================================================ */

.ylp-form-group {
    margin-bottom: 20px;
    text-align: left;
}

.ylp-form-group label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    text-align: left;
}

.ylp-form-group input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--gray-mid);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    text-align: left;
}

.ylp-form-group input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(59,158,255,.15);
}

.ylp-form-group input::placeholder {
    color: #b0c4d8;
}

.ylp-form-hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
    text-align: left;
}

/* カード情報ラベル */
.ylp-card-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    text-align: left;
    display: block;
    margin-top: 4px;
}

/* カード入力要素 */
.ylp-card-element {
    min-height: 40px;
    padding: 12px 16px;
    border: 2px solid #d0e4f7;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s;
    font-family: 'Noto Sans JP', sans-serif;
}

.ylp-card-element.focused {
    border-color: #3b9eff;
    outline: none;
}

.ylp-card-errors {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 4px;
    min-height: 18px;
}

/* 統一セキュリティテキスト */
.ylp-security-text,
.ylp-terms-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    text-align: left;
    margin: 14px 0 8px;
}

.ylp-security-text a,
.ylp-terms-text a {
    color: #3b9eff;
    text-decoration: none;
}

.ylp-security-text a:hover,
.ylp-terms-text a:hover { 
    text-decoration: underline; 
}

/* 必須バッジ */
.ylp-required {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-block;
    vertical-align: middle;
}
.ylp-required::after {
    content: "必須";
    background: #ff8c00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 50px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.6;
}

/* 購入ボタン */
.ylp-buy-btn {
  width: 100%; padding: 18px; border: none; border-radius: 12px;
  font-size: clamp(16px, 2vw, 19px); font-weight: 700; cursor: pointer;
  font-family: inherit; color: #fff; transition: .2s;
}
.ylp-buy-btn--orange { background: var(--orange); box-shadow: 0 3px 0 #b55f00; }
.ylp-buy-btn--orange:hover { transform: translateY(-2px); box-shadow: #c06a00 0 7px 0; }
.ylp-buy-btn--cyan { background: var(--cyan); box-shadow: 0 3px 0 #2070cc; }
.ylp-buy-btn--cyan:hover { transform: translateY(-2px); box-shadow: #2070cc 0 7px 0; }

/* ============================================================
   レスポンシブ対応（統一）
   ============================================================ */

@media (max-width: 768px) {
  .ylp-title { white-space: normal !important; }
  .ylp-section { padding: 56px 0; }
  .ylp-inner { padding: 0 20px; }
  .ylp-title-inner { padding: 0 20px; }
  .ylp-page-title { font-size: 48px !important; }
  .ylp-hero h1 { font-size: 32px; }
  .ylp-vs-grid { grid-template-columns: 1fr; }
  .ylp-flow-wrap::before { left: 23px; }
  .ylp-step-num { width: 48px; height: 48px; font-size: 17px; }
  
  /* 統一購入カード（スマホ） */
  .ylp-purchase-grid {
      grid-template-columns: 1fr;
      gap: 27px;
      padding: 0 20px;
  }
  
  .ylp-card {
      width: calc(100% - 40px);
      max-width: 580px;
      padding: 40px;
  }
}

@media (max-width: 480px) {
  .ylp-feat-grid { grid-template-columns: 1fr; }
  .ylp-hero { padding: 48px 20px 56px; }
  .ylp-page-title { font-size: 36px !important; }
}

/* ============================================================
   WordPressページ特定クラス適用
   ============================================================ */

/* ページIDベースのクラス適用 */
.ylp-page .ylp-container { max-width: none; }

/* テストリンク非表示 */
html:has(.ylp) .ylp-back { display: none !important; }

/* ============================================================
   統一CSS完了
   
   【統一仕様】
   ✅ 白枠: 580px・24px角丸・27px間隔
   ✅ フォント: LICENSE 15px/24px・見出し 22px/900
   ✅ カラー: 統一パレット
   ✅ レスポンシブ: 全デバイス対応
   ✅ フォーム: 統一placeholder色・統一入力スタイル
   ✅ セキュリティテキスト: 12px・1.6・左寄せ
   ============================================================ */

/* ============================================================
   【2026-04 追加】YLPLP共通 ─ ヒーローセクション
   既存 chatbot-lp.css の .ylcb-hero 系を ylplp- に統一
   段階的移行中：他セクションは当面 .ylp-* を使用
   ============================================================ */

/* ── ヒーロー全体 ── */
.ylplp-hero {
  background: linear-gradient(150deg, var(--cyan-light) 0%, #fff 60%);
  padding: 72px 24px 80px;
  text-align: center;
  border-bottom: 2px solid var(--gray-mid);
}

/* ── タイトル（h1）── */
.ylplp-hero h1 {
  font-size: clamp(26px, 4.5vw, 48px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 16px;
}
.ylplp-hero h1 em {
  color: var(--orange);
  font-style: normal;
}

/* ── リード文 ── */
.ylplp-hero-lead {
  font-size: clamp(16px, 1.8vw, 17px);
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto 32px;
  line-height: 2;
}

/* ── 価格 ── */
.ylplp-price-block {
  margin-bottom: 10px;
}
.ylplp-price {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900;
  color: var(--navy);
}
.ylplp-price small {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 500;
  color: var(--muted);
}
/* 複数プラン時の「〜」表記（（税込）と同じサイズ） */
.ylplp-price-suffix {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}

/* ── チェック3項目（PC横一列 / SP縦積み）── */
.ylplp-hero-note {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-bottom: 36px;
  line-height: 1.8;
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--muted);
}
.ylplp-hero-note span {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .ylplp-hero-note {
    flex-direction: column;
    gap: 4px;
  }
}

/* ── ボタン群ラッパー（順番：メインボタン → デモ案内注釈 → セキュリティ注釈 → サブボタン）── */
.ylplp-hero-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ── メインCTA（オレンジ・ピル型）── */
.ylplp-btn {
  display: inline-block;
  background: var(--orange);
  color: #fff !important;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  padding: 18px 52px;
  border-radius: 50px;
  box-shadow: 0 5px 0 #c06a00;
  transition: .2s;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.ylplp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #c06a00;
  color: #fff !important;
}
.ylplp-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #c06a00;
  color: #fff !important;
}

/* ── デモ案内注釈（購入ボタンすぐ下）── */
.ylplp-hero-demo-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.6;
}

/* ── セキュリティ注釈（🔒付き）── */
.ylplp-hero-secure {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ── サブCTA（アウトライン・セキュリティ注釈の下）── */
.ylplp-btn-outline {
  display: inline-block;
  background: #fff;
  color: var(--navy) !important;
  font-size: clamp(14px, 1.5vw, 15px);
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 50px;
  border: 1.5px solid var(--gray-mid);
  transition: .2s;
  text-decoration: none;
  margin-top: 6px;
}
.ylplp-btn-outline:hover {
  border-color: var(--cyan);
  color: var(--cyan) !important;
  transform: translateY(-1px);
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ ブランドアクセント＆スクロールアニメ
   ============================================================ */

/* ── 製品名の「L」アクセント（全YL製品共通）── */
.ylplp-brand-accent {
  color: var(--cyan);
}

/* ── スクロールふわっと表示（Intersection Observer連動）── */
.ylp-fade-init {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.5s cubic-bezier(.22, .61, .36, 1),
    transform 1.5s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.ylp-fade-init.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーションを無効にしたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .ylp-fade-init,
  .ylp-fade-init.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ セクション共通レイアウト
   段階的移行：.ylp-section から .ylplp-section への置き換え用
   ============================================================ */

.ylplp-section {
  padding: 72px 0;
}
.ylplp-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.ylplp-center {
  text-align: center;
}

/* ── 統一ラベル（英語大見出し・シアン・大文字）── */
.ylplp-label {
  display: inline-block;
  color: var(--cyan);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 1.2;
}

/* ── 統一見出し（h2）── */
.ylplp-title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.4;
  margin-top: 8px;
  margin-bottom: 12px;
  white-space: nowrap;
}

/* テーマ既定 h2 のボーダー・オレンジラインを打ち消し（既存ページ準拠のシンプル見出し） */
.ylp-page .ylplp-section .ylplp-title,
.ylp .ylplp-section .ylplp-title {
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.ylp-page .ylplp-section .ylplp-title::before,
.ylp-page .ylplp-section .ylplp-title::after,
.ylp .ylplp-section .ylplp-title::before,
.ylp .ylplp-section .ylplp-title::after {
  display: none !important;
}

@media (max-width: 768px) {
  .ylplp-title { white-space: normal; }
}

/* ── 統一サブタイトル ── */
.ylplp-subtitle {
  font-size: clamp(16px, 2vw, 17px);
  color: var(--muted);
  max-width: 900px;
  margin: 0 auto 40px;
  line-height: 1.9;
}
/* サブタイトル内の小さい注釈（例：※100件のFAQで...） */
.ylplp-subtitle small {
  display: inline-block;
  margin-top: 4px;
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--muted);
  opacity: .85;
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ VS比較セクション
   2カラム：YL側（シアン枠）vs 競合側（白）
   ============================================================ */

.ylplp-vs {
  background: var(--gray);
}

.ylplp-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
  align-items: stretch;
}

.ylplp-vs-col {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 24px 20px;
  box-shadow: var(--shadow);
  border: none;
}

/* YL側カード（シアン薄背景＋シアン枠） */
.ylplp-vs-col.ylplp-yl {
  background: var(--cyan-light);
  border: 2px solid var(--cyan);
}

.ylplp-vs-col h3 {
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
  letter-spacing: .02em;
  text-align: left;
  border-left: 4px solid var(--cyan);
  padding: 2px 0 2px 12px;
  line-height: 1.4;
}
.ylplp-vs-col.ylplp-yl h3 {
  color: var(--cyan);
}

/* リスト */
.ylplp-vs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ylplp-vs-list li {
  font-size: clamp(14px, 1.5vw, 16px);
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-mid);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.7;
  text-align: left;
}
.ylplp-vs-list li:last-child {
  border-bottom: none;
}

/* アイコン（✅/❌）のサイズ調整 */
.ylplp-vs-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* SP：1カラム */
@media (max-width: 640px) {
  .ylplp-vs-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ylplp-vs-col {
    padding: 24px 18px 16px;
  }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ FEATURES（機能紹介）セクション
   既存 chatbot-lp.css の .ylcb-features 系を ylplp- に統一
   ============================================================ */

.ylplp-features {
  background: #fff;
}

.ylplp-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.ylplp-feat {
  background: var(--gray);
  border-radius: var(--radius);
  padding: 32px 28px;
  border-top: none;
  transition: transform .3s, box-shadow .3s;
}
.ylplp-feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* アイコン枠：80x80、SVGを内側に表示 */
.ylplp-feat-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ylplp-feat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* タイトル（カード見出し）── 左に青い縦線アクセント */
.ylplp-feat h3 {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  text-align: left;
  line-height: 1.4;
  border-left: 4px solid var(--cyan);
  padding: 0 0 0 12px;
  display: flex;
  align-items: center;
  min-height: 1.4em;
}

/* 説明文 */
.ylplp-feat p {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--muted);
  line-height: 1.9;
  text-align: left;
}

/* ── SP専用改行（既存 chatbot-lp.css 互換）── */
br.sp-br { display: none; }
@media (max-width: 768px) {
  br.sp-br { display: block; }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ COMPARISON（比較表）セクション
   既存 chatbot-lp.css の .ylcb-compare / .ylcb-table 系を
   ylplp- プレフィックスで移植
   ============================================================ */

.ylplp-compare {
  background: var(--gray);
}

.ylplp-table-wrap {
  max-width: 100%;
  margin: 40px 0 0;
  overflow-x: auto;
}

.ylplp-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: clamp(14px, 1.5vw, 16px);
  table-layout: fixed;
}

/* ── ヘッダー行（th）── */
.ylplp-table th {
  background: var(--navy);
  color: #fff;
  padding: 16px 14px;
  font-weight: 700;
  text-align: center;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.4;
}
.ylplp-table th:first-child {
  text-align: left;
}
/* ハイライト列（YL Chatbot）ヘッダーはシアン */
.ylplp-table th.hl {
  background: var(--cyan);
}

/* ── データセル（td）── */
.ylplp-table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--gray-mid);
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
  line-height: 1.5;
}
.ylplp-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--navy);
}
.ylplp-table tr:last-child td {
  border-bottom: none;
}
/* 偶数行ストライプ */
.ylplp-table tr:nth-child(even) td {
  background: #f9fbfd;
}
/* ハイライト列（YL Chatbot列）のデータセル */
.ylplp-table td.hl {
  background: var(--cyan-light);
  font-weight: 700;
  color: var(--navy);
}

/* ハイライト列（シアン背景）では「L」アクセントが見えなくなるので色を上書き */
.ylplp-table th.hl .ylplp-brand-accent {
  color: #fff;
}
.ylplp-table td.hl .ylplp-brand-accent {
  color: var(--navy);
}

/* ── セル内マーカー（ylplp-table 内でのみ有効）── */
.ylplp-table .ck {  /* ✓ 緑 */
  color: #22c55e;
  font-size: 18px;
  font-weight: 700;
}
.ylplp-table .cx {  /* ❌ 赤 */
  color: #e44;
  font-size: 16px;
}
.ylplp-table .cp {  /* △ オレンジ（小さめ） */
  color: var(--orange);
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 700;
}
.ylplp-table strong {
  color: var(--orange);
  font-size: 1.15em;
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ スマートフォン用 調整
   - フォントサイズ全体 +2px（読みやすさ優先）
   - 比較表は横スクロールさせて、表の中身を縮めすぎない
   ============================================================ */
@media (max-width: 640px) {
  /* ── ヒーロー ── */
  .ylplp-hero-lead { font-size: 18px; }
  .ylplp-hero-note { font-size: 15px; }
  .ylplp-hero-demo-note,
  .ylplp-hero-secure { font-size: 15px; }
  .ylplp-btn { font-size: 18px; }
  .ylplp-btn-outline { font-size: 16px; }

  /* ── セクション共通 ── */
  .ylplp-title { font-size: 22px; }
  .ylplp-subtitle { font-size: 18px; }

  /* ── VS比較 ── */
  .ylplp-vs-col h3 { font-size: 19px; }
  .ylplp-vs-list li { font-size: 16px; }

  /* ── FEATURES ── */
  .ylplp-feat h3 { font-size: 18px; }
  .ylplp-feat p { font-size: 16px; }

  /* ── COMPARISON（比較表） ── */
  /* 表自体に最小幅を持たせ、画面がそれより狭い場合は横スクロール */
  .ylplp-table {
    min-width: 600px;       /* これ以下の画面幅では横スクロール発動 */
    table-layout: auto;      /* fixed を解除して自然な列幅に */
    font-size: 14px;         /* 12px → 14px（+2） */
  }
  .ylplp-table th,
  .ylplp-table td {
    padding: 12px 10px;
  }
  .ylplp-table .ck { font-size: 17px; }
  .ylplp-table .cx { font-size: 16px; }
  .ylplp-table .cp { font-size: 14px; }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ スマートフォン 左右余白の圧縮
   各カードに十分な内側余白があるため、ページ外側は詰める
   ============================================================ */
@media (max-width: 640px) {
  /* ── セクションの左右余白を 40px → 16px に圧縮 ── */
  .ylplp-inner {
    padding: 0 16px;
  }

  /* ── ヒーロー：左右余白 24px → 16px、上下も少し圧縮 ── */
  .ylplp-hero {
    padding: 56px 16px 60px;
  }

  /* ── 機能紹介カード：左右 28px → 20px ── */
  .ylplp-feat {
    padding: 28px 20px;
  }

  /* ── VS比較カード：既存の18pxより少し詰める ── */
  .ylplp-vs-col {
    padding: 20px 16px 14px;
  }
}


/* ============================================================
   【2026-04 追加】比較表の右端スクロール示唆シャドウ（改善版）
   scroll しない外側ラッパー .ylplp-table-outer に ::after を配置
   （wrap 側に置くとスクロールに追従してしまうので）
   ============================================================ */
.ylplp-table-outer {
  position: relative;
}
@media (max-width: 640px) {
  .ylplp-table-outer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(26, 58, 92, .15) 100%
    );
    pointer-events: none;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ SECURITY（セキュリティ）セクション
   6項目を3列×2行で表示。チェックマークSVGは h4 内左側に配置。
   ============================================================ */

.ylplp-security {
  background: #fff;
}

.ylplp-sec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 40px auto 0;
}

.ylplp-sec-card {
  background: var(--gray);
  border-radius: var(--radius);
  padding: 30px 26px 22px;
  transition: transform .3s, box-shadow .3s;
}
.ylplp-sec-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* 見出し：チェックSVG + テキスト を横並び */
.ylplp-sec-card h4 {
  display: flex;
  align-items: center;
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  text-align: left;
  line-height: 1.4;
}

/* チェックSVG 左マージン */
.ylplp-sec-check {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 10px;
  vertical-align: middle;
}
.ylplp-sec-check svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* 説明文 */
.ylplp-sec-card p {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--muted);
  line-height: 1.9;
  text-align: left;
}

/* タブレット：2列 */
@media (max-width: 768px) {
  .ylplp-sec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマートフォン：1列 */
@media (max-width: 640px) {
  .ylplp-sec-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ylplp-sec-card {
    padding: 28px 20px 20px;
  }
  .ylplp-sec-card h4 {
    font-size: 17px;
  }
  .ylplp-sec-card p {
    font-size: 16px;
  }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ HOW TO START（導入までの流れ）
   縦ライン＋番号アイコン＋ステップカード
   ============================================================ */

.ylplp-flow {
  background: var(--gray);
}

.ylplp-flow-wrap {
  max-width: 680px;
  margin: 40px auto 0;
  position: relative;
  text-align: left;
}

/* 縦のガイドライン（番号アイコンの中心を縦に貫く） */
.ylplp-flow-wrap::before {
  content: "";
  position: absolute;
  left: 27px;       /* 番号アイコン(56px)の中心 = 28px -1 */
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--cyan), var(--gray-mid));
}

.ylplp-step {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  position: relative;
}
.ylplp-step:last-child {
  margin-bottom: 0;
}

/* 丸い番号アイコン */
.ylplp-step-num {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--cyan);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px #fff;  /* 背景グレーとの分離用・白のリング */
}

/* ステップ本文カード */
.ylplp-step-body {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 26px 18px;
  flex: 1;
  box-shadow: var(--shadow);
}
.ylplp-step-body h4 {
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  text-align: left;
  line-height: 1.4;
}
.ylplp-step-body p {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--muted);
  line-height: 1.9;
  text-align: left;
  margin: 0;
}

/* ステップ注釈（※〇〇） */
.ylplp-step-note {
  font-size: 13px !important;
  color: var(--orange) !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
  text-align: left;
}

/* SP：番号アイコン少し小さく */
@media (max-width: 640px) {
  .ylplp-flow-wrap {
    margin-top: 32px;
  }
  .ylplp-step {
    gap: 16px;
  }
  .ylplp-step-num {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }
  .ylplp-flow-wrap::before {
    left: 23px;  /* 48pxの中心 */
  }
  .ylplp-step-body {
    padding: 22px 18px 18px;
  }
  .ylplp-step-body h4 {
    font-size: 17px;
  }
  .ylplp-step-body p {
    font-size: 16px;
  }
  .ylplp-step-note {
    font-size: 14px !important;
  }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ SPEC（動作環境・仕様）
   中央寄せ・max-width 640px の2列テーブル
   ============================================================ */

.ylplp-spec {
  background: #fff;
}

.ylplp-spec-table-wrap {
  max-width: 640px;
  margin: 32px auto 0;
}

.ylplp-spec-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(26, 58, 92, .10);
  background: #fff;
}

.ylplp-spec-table th,
.ylplp-spec-table td {
  padding: 14px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--gray-mid);
  text-align: left;
  line-height: 1.6;
}

/* 左列（項目名）：ネイビー背景＋白文字 */
.ylplp-spec-table th {
  width: 40%;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
}

/* 一行ごとの色替え（偶数行を少しだけ明るく） */
.ylplp-spec-table tr:nth-child(even) th {
  background: #22486e;   /* navy より少し明るい */
}
.ylplp-spec-table tr:nth-child(even) td {
  background: #f9fbfd;   /* 右列はうっすら水色ストライプ */
}

/* 最終行：border-bottom 削除 */
.ylplp-spec-table tr:last-child th,
.ylplp-spec-table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 640px) {
  .ylplp-spec-table th,
  .ylplp-spec-table td {
    padding: 12px 14px;
    font-size: 15px;
  }
  .ylplp-spec-table th {
    width: 38%;
  }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ FAQ（よくあるご質問）
   Qバッジ＋ボーダーで区切るシンプルなアコーディオン風
   ============================================================ */

.ylplp-faq {
  background: #fff;
}

.ylplp-faq-list {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: left;
}

.ylplp-faq-item {
  border-bottom: 1px solid var(--gray-mid);
  padding: 22px 0;
}
.ylplp-faq-item:last-child {
  border-bottom: none;
}

/* 質問（Qバッジ + テキスト） */
.ylplp-faq-q {
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 700;
  color: var(--navy);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  line-height: 1.5;
}
.ylplp-faq-q::before {
  content: "Q";
  background: var(--cyan);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 3px;
}

/* 回答（インデントして上にスペース） */
.ylplp-faq-a {
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--muted);
  margin-top: 12px;
  padding-left: 38px;   /* Qバッジ幅 + gap 分インデント */
  line-height: 1.9;
  text-align: left;
}
.ylplp-faq-a a {
  color: var(--cyan);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .ylplp-faq-list {
    margin-top: 24px;
  }
  .ylplp-faq-item {
    padding: 18px 0;
  }
  .ylplp-faq-q {
    font-size: 17px;
  }
  .ylplp-faq-a {
    font-size: 16px;
    padding-left: 34px;
  }
}


/* ============================================================
   【2026-04 追加】YLPLP共通 ─ PURCHASE（購入セクション）
   カード内要素順: 製品名h3 → ライセンスラベル → 価格ボックス → フォーム
   製品名はやや大きめ、「L」はシアン色（format_product_name 関数経由）
   ============================================================ */

.ylplp-purchase {
  background: var(--gray);
}

.ylplp-purchase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1040px;
  margin: 40px auto 0;
}

/* ============================================================
   プラン選択タブ（2プラン時の Universal版スタイル）
   ============================================================ */
.ylplp-plan-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
  margin: 40px auto 24px;
}
.ylplp-plan-tab {
  background: #fff;
  border: 3px solid var(--gray-mid);
  border-radius: var(--radius);
  padding: 28px 20px 22px;
  cursor: pointer;
  position: relative;
  transition: border-color .2s, background .2s, box-shadow .2s;
  text-align: center;
}
.ylplp-plan-tab:hover {
  border-color: var(--cyan);
}
.ylplp-plan-tab.selected {
  border-color: var(--cyan);
  background: var(--cyan-light);
  box-shadow: 0 4px 20px rgba(59, 158, 255, .15);
}
.ylplp-plan-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-mid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition: background .2s;
}
.ylplp-plan-tab.selected .ylplp-plan-check {
  background: var(--cyan);
}
.ylplp-plan-name {
  font-size: 32px;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 10px;
}
.ylplp-plan-label {
  display: inline-block;
  background: var(--cyan);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.ylplp-plan-price {
  font-size: 38px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
}
.ylplp-plan-price small {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.ylplp-plan-note {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.ylplp-plan-discount {
  color: var(--orange);
  font-weight: 700;
  margin-top: 4px;
}
/* 共通購入フォーム用カード（プラン選択下に配置） */
.ylplp-purchase-card--shared {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 36px 32px;
}

/* SP：プラン選択タブを縦積みに */
@media (max-width: 680px) {
  .ylplp-plan-tabs {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* 1プラン時は1カラム中央 */
.ylplp-purchase-grid--single {
  grid-template-columns: 1fr;
  max-width: 620px;
}

/* 購入カード */
.ylplp-purchase-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 36px 36px 32px;
  box-shadow: 0 8px 32px rgba(26, 58, 92, .08);
  text-align: left;
  border: 2px solid transparent;
  transition: transform .3s, box-shadow .3s;
}
.ylplp-purchase-card--recommend {
  border-color: var(--cyan);
}

/* 製品名（h3）：やや大きめ・「L」シアン化（format_product_name 経由で<span.ylplp-brand-accent>が入る） */
.ylplp-purchase-name {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 10px;
  text-align: center;
  line-height: 1.2;
  letter-spacing: .02em;
}

/* ライセンスラベル（タグ風） */
.ylplp-license-label {
  display: inline-block;
  background: var(--cyan);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 5px 14px;
  border-radius: 999px;
  text-align: center;
  margin: 0 auto 24px;
}
/* ラベル自体を中央寄せする親ラッパー：カード内のline要素を<br>で切り分けるためdivを入れる代わりに */
.ylplp-purchase-card {
  display: block;
}
.ylplp-purchase-card .ylplp-license-label {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* 価格ボックス */
.ylplp-price-box {
  background: linear-gradient(135deg, #f4f8fc 0%, #e8f1fa 100%);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 24px;
}
.ylplp-big-price {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}
.ylplp-big-price small {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--muted);
  margin-left: 4px;
}
.ylplp-price-note {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}
.ylplp-price-discount {
  color: var(--cyan) !important;
  font-weight: 700;
  margin-top: 4px;
}

/* ── 購入フォーム ── */
.ylplp-purchase-form-area {
  margin-top: 8px;
}

.ylplp-purchase-form-area .ylplp-form-group {
  margin-bottom: 16px;
}
.ylplp-purchase-form-area label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

/* 必須バッジ */
.ylplp-required {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: 2px;
}

.ylplp-purchase-form-area input[type="text"],
.ylplp-purchase-form-area input[type="email"],
.ylplp-purchase-form-area input[type="url"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1.5px solid var(--gray-mid);
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s;
  box-sizing: border-box;
}
.ylplp-purchase-form-area input:focus {
  outline: none;
  border-color: var(--cyan);
}
.ylplp-form-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* PayJP Elements が差し込むクレジットカード入力欄のスタイリング
   PayJP v2 は card.mount() 時に div の class を .PayjpElement に置換するため、
   両方のクラスセレクタで同じ装飾を指定する（購入フォーム内のみに限定） */
.ylplp-purchase-form-area .ylplp-card-element,
.ylplp-purchase-form-area .PayjpElement {
  padding: 14px;
  border: 1.5px solid var(--gray-mid);
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  min-height: 46px;
}
/* フォーカス時：PayJP v2 は自動で .PayjpElement--focus を付与。
   v1互換の .focused クラスにも対応（yl-purchase.js 側で付けるケース） */
.ylplp-purchase-form-area .ylplp-card-element.focused,
.ylplp-purchase-form-area .PayjpElement--focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, .15);
}
/* 無効な入力（カード番号エラー等）：PayJP v2 が .PayjpElement--invalid を付与 */
.ylplp-purchase-form-area .PayjpElement--invalid {
  border-color: #e74c3c;
}

/* カードエラー表示（purchase.js の card.on('change') が書き換える） */
.ylplp-card-errors {
  color: #e74c3c;
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  min-height: 18px;
  line-height: 1.5;
}

/* 全体エラーメッセージ（入力不足・通信エラー等） */
.ylplp-purchase-msg {
  color: #c62828;
  background: #ffebee;
  border: 1.5px solid #e74c3c;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* セキュリティ＆利用規約の注釈 */
.ylplp-security-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 14px 0 8px;
}
.ylplp-terms-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
}
.ylplp-terms-text a {
  color: var(--cyan);
  text-decoration: underline;
}

/* 購入ボタン（オレンジ） */
.ylplp-buy-btn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 900;
  font-family: inherit;
  color: #fff;
  background: var(--orange);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 140, 0, .35);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.ylplp-buy-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 140, 0, .45);
  background: #ff9a1f;
}
.ylplp-buy-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 成功・エラーメッセージ */
.ylplp-payment-success {
  background: #e8f5e9;
  border: 2px solid #4caf50;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  text-align: center;
}
.ylplp-payment-success h4 {
  color: #2e7d32;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
}
.ylplp-payment-success p {
  color: #555;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
.ylplp-payment-error {
  background: #ffebee;
  border: 2px solid #e74c3c;
  color: #c62828;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
}

/* ── トップページへ戻る ── */
.ylplp-back {
  text-align: center;
  padding: 32px 0 60px;
}
.ylplp-back a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s;
}
.ylplp-back a:hover {
  color: var(--cyan);
}

/* ── タブレット・SP対応 ── */
@media (max-width: 768px) {
  .ylplp-purchase-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .ylplp-purchase-grid {
    gap: 20px;
    margin-top: 24px;
  }
  .ylplp-purchase-card {
    padding: 28px 20px 24px;
  }
  .ylplp-purchase-name {
    font-size: 26px;
  }
  .ylplp-big-price {
    font-size: 36px;
  }
  .ylplp-purchase-form-area input[type="text"],
  .ylplp-purchase-form-area input[type="email"],
  .ylplp-purchase-form-area input[type="url"] {
    font-size: 16px;  /* iOS でのズーム防止 */
  }
  .ylplp-buy-btn {
    padding: 16px 16px;
    font-size: 17px;
  }
  .ylplp-back {
    padding: 24px 0 40px;
  }
}

/* ============================================================
   【2026-04 追加】YLPLP サブスク購入フォーム
   chatbot-universal など、payment_mode: subscription 時のUI
   ============================================================ */

/* ┗━ プラン選択タブ ━┛ */
.ylplp-sub-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto 28px;
}
.ylplp-sub-plan {
  background: #fff;
  border: 3px solid var(--gray-mid);
  border-radius: var(--radius);
  padding: 28px 20px 22px;
  cursor: pointer;
  position: relative;
  transition: border-color .2s, background .2s, box-shadow .2s;
  text-align: center;
  user-select: none;
}
.ylplp-sub-plan:hover { border-color: var(--cyan); }
.ylplp-sub-plan.selected {
  border-color: var(--cyan);
  background: var(--cyan-light);
  box-shadow: 0 4px 20px rgba(59, 158, 255, .15);
}
.ylplp-sub-plan-check {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gray-mid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition: background .2s;
}
.ylplp-sub-plan.selected .ylplp-sub-plan-check {
  background: var(--cyan);
}
.ylplp-sub-plan-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 10px;
}
.ylplp-sub-plan-price {
  font-size: 34px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 6px;
}
.ylplp-sub-plan-price span {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.ylplp-sub-plan-note {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 4px;
}
.ylplp-sub-plan-trial {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  margin-top: 6px;
}

/* ┗━ フォームカード ━┛ */
.ylplp-sub-form {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
.ylplp-sub-form-error {
  background: #ffebee;
  border: 1.5px solid #e74c3c;
  color: #c62828;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.6;
}
.ylplp-sub-form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 36px 28px;
  box-shadow: 0 8px 32px rgba(26, 58, 92, .08);
  margin-bottom: 16px;
}

/* ┗━ フィールド ━┛ */
.ylplp-sub-field {
  margin-bottom: 18px;
}
.ylplp-sub-field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.ylplp-sub-field input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--gray-mid);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--navy);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.ylplp-sub-field input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, .15);
}
.ylplp-sub-field input::placeholder {
  color: #b0c4d8;
}
.ylplp-sub-field input.is-error {
  border-color: #f5a0a0;
  background: #fff8f8;
}
.ylplp-sub-field-error {
  display: none;
  color: #c00;
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.4;
}
.ylplp-sub-field-error:not(:empty) {
  display: block;
}

/* 必須バッジ */
.ylplp-sub-req {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 50px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ┗━ カード情報セクション ━┛ */
.ylplp-sub-card-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-mid);
}
.ylplp-sub-card-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  text-align: left;
  border: none !important;
  padding: 0 !important;
}
.ylplp-sub-card-section h3::before,
.ylplp-sub-card-section h3::after {
  display: none !important;
}

/* PayJP v2 Elements（card.mount() 後に.PayjpElementが付く） */
#ylplp-sub-card-element,
#ylplp-sub-card-element.PayjpElement {
  padding: 14px 16px;
  border: 1.5px solid var(--gray-mid);
  border-radius: 10px;
  background: #fff;
  min-height: 46px;
  transition: border-color .2s, box-shadow .2s;
}
#ylplp-sub-card-element.focused,
#ylplp-sub-card-element.PayjpElement--focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, .15);
}
#ylplp-sub-card-element.PayjpElement--invalid {
  border-color: #e74c3c;
}
#ylplp-sub-card-errors {
  color: #e74c3c;
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  min-height: 18px;
  line-height: 1.5;
}

/* ┗━ セキュリティ・規約テキスト ━┛ */
.ylplp-sub-form-security {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 16px 0 8px;
  text-align: left;
}
.ylplp-sub-terms {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 18px;
  text-align: left;
}
.ylplp-sub-terms a {
  color: var(--cyan);
  text-decoration: underline;
}

/* ┗━ 購入ボタン ━┛ */
.ylplp-sub-submit {
  display: block;
  width: 100%;
  padding: 16px 20px;
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 900;
  font-family: inherit;
  color: #fff;
  background: var(--orange);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 140, 0, .35);
  transition: transform .2s, box-shadow .2s, background .2s;
  line-height: 1.4;
}
.ylplp-sub-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 140, 0, .45);
  background: #ff9a1f;
}
.ylplp-sub-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 3px 10px rgba(255, 140, 0, .2);
}

/* ┗━ 注意書き＆マイページリンク ━┛ */
.ylplp-sub-form-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 14px 0 12px;
  text-align: center;
}
.ylplp-sub-mypage-link {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: 16px 0 0;
}
.ylplp-sub-mypage-link a {
  color: var(--cyan);
  text-decoration: underline;
  font-weight: 700;
}

/* ┗━ ヒーロー：トライアルバッジ ━┛ */
.ylplp-trial-badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 7px 22px;
  border-radius: 50px;
  margin-bottom: 20px;
  letter-spacing: .05em;
}

/* ┗━ SP対応 ━┛ */
@media (max-width: 680px) {
  .ylplp-sub-plans {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ylplp-sub-form-card {
    padding: 24px 20px 22px;
  }
  .ylplp-sub-field input {
    font-size: 16px; /* iOSズーム防止 */
  }
  .ylplp-sub-plan-name { font-size: 20px; }
  .ylplp-sub-plan-price { font-size: 30px; }
}

/* ============================================================
   【2026-04 追加】4項目調整
   - HOW TO カード内top余白追加
   - PURCHASE 料金フォントサイズ調整
   - 「← トップページへ戻る」ボタン化
============================================================ */

/* ┗━ HOW TO：ステップカード内の上下余白を広げる ━┛ */
.ylplp-step-body {
  padding: 22px 26px 22px !important;
}
@media (max-width: 640px) {
  .ylplp-step-body {
    padding: 22px 18px 20px !important;
  }
}

/* ┗━ PURCHASE：料金フォントサイズ調整 ━┛ */
/* 価格本体：38px */
.ylplp-purchase .ylplp-big-price {
  font-size: 38px !important;
}
/* 「/月」「（税込）」等の小さい文字：13px */
.ylplp-purchase .ylplp-big-price small {
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-left: 4px !important;
}
@media (max-width: 640px) {
  .ylplp-purchase .ylplp-big-price {
    font-size: 32px !important;
  }
  .ylplp-purchase .ylplp-big-price small {
    font-size: 12px !important;
  }
}

/* ┗━ 「← トップページへ戻る」をボタン化 ━┛ */
.ylplp-back {
  text-align: center;
  padding: 40px 0 60px;
}
.ylplp-back a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: #fff;
  border: 1.5px solid var(--gray-mid);
  border-radius: 50px;
  color: var(--navy) !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 2px 8px rgba(26, 58, 92, .06);
}
.ylplp-back a:hover {
  background: var(--cyan-light);
  border-color: var(--cyan);
  color: var(--cyan) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 158, 255, .18);
}
@media (max-width: 640px) {
  .ylplp-back {
    padding: 32px 0 48px;
  }
  .ylplp-back a {
    font-size: 14px;
    padding: 12px 26px;
  }
}

/* 【2026-04 追加】サブスクプラン note / trial フォントサイズ調整 */
.ylplp-sub-plan-note {
  font-size: 14px !important;
}
.ylplp-sub-plan-trial {
  font-size: 14px !important;
}

/* ============================================================
   【2026-04 追加】長期サポート保証セクション（買い切り版LP共通）
============================================================ */
.ylplp-support {
  background: var(--gray);
}
.ylplp-support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 40px auto 0;
}
.ylplp-support-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 26px 22px;
  transition: transform .3s, box-shadow .3s;
}
.ylplp-support-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.ylplp-support-card h4 {
  display: flex;
  align-items: center;
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  text-align: left;
  line-height: 1.4;
}
.ylplp-support-check {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 10px;
  vertical-align: middle;
}
.ylplp-support-check svg {
  width: 24px;
  height: 24px;
  display: block;
}
.ylplp-support-card p {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--muted);
  line-height: 1.9;
  text-align: left;
}
@media (max-width: 768px) {
  .ylplp-support-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ylplp-support-card {
    padding: 28px 20px 20px;
  }
}

@media (max-width: 640px) {
  .ylplp-support-card h4 {
    font-size: 17px;
  }
  .ylplp-support-card p {
    font-size: 16px;
  }
}

/* ===========================================
   サポート相談バナー（購入セクション直後）
   yl-product-lp.css に追加
   =========================================== */

.ylplp-support-banner {
    max-width: 720px;
    margin: 40px auto 60px;
    padding: 32px 28px;
    background: linear-gradient(135deg, #f0f8ff 0%, #fff8f0 100%);
    border: 2px solid #e8f4ff;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(26,58,92,.06);
}

.ylplp-support-banner-title {
    font-size: 18px;
    font-weight: 900;
    color: #1a3a5c;
    margin: 0 0 8px;
    line-height: 1.5;
}

.ylplp-support-banner-desc {
    font-size: 14px;
    color: #5a7a9a;
    line-height: 1.7;
    margin: 0 0 20px;
}

.ylplp-support-banner-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ylplp-support-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    min-width: 160px;
    box-sizing: border-box;
}

.ylplp-support-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26,58,92,.15);
}

.ylplp-support-banner-btn--form {
    background: #1a3a5c;
    color: #fff !important;
}

.ylplp-support-banner-btn--x {
    background: #000;
    color: #fff !important;
}

.ylplp-support-banner-btn--line {
    background: #06c755;
    color: #fff !important;
}

.ylplp-support-banner-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .ylplp-support-banner {
        margin: 30px 16px 40px;
        padding: 24px 20px;
    }
    .ylplp-support-banner-title {
        font-size: 16px;
    }
    .ylplp-support-banner-buttons {
        flex-direction: column;
        gap: 10px;
    }
    .ylplp-support-banner-btn {
        width: 100%;
    }
}
/* デフォルト：販売LPは FAQ を白に
   （Chatbot/CF/Reservation：support[グレー]→faq[白]→purchase[グレー]） */
.ylplp-faq {
    background: #fff;
}
 
/* Universal版（longterm_supportセクションがない＝spec直後にfaq）の特殊対応：
   FAQをグレー、PURCHASEを白に反転して交互パターンを維持 */
.ylplp-spec + .ylplp-faq {
    background: #f4f8fc;
}
.ylplp-spec + .ylplp-faq + .ylplp-purchase {
    background: #fff;
}
 
/* PURCHASE背景が白の場合、フォームカードを枠線で識別可能にする */
.ylplp-spec + .ylplp-faq + .ylplp-purchase .ylplp-sub-form-card {
    border: 1.5px solid #e0eaf5;
}