/* ==============================================
   Volante LP共通ベースCSS
   SWELL LP機能（lp/スラッグ.php）で使用するLPの共通リセット・共通コンポーネント
   ============================================== */

/* --- LP共通リセット --- */
.vlp { font-family: 'Noto Sans JP', sans-serif; color: #202124; line-height: 1.8; }
.vlp h1, .vlp h2, .vlp h3, .vlp h4 {
  font-family: 'Noto Serif JP', serif;
  background: none; border: none; padding: 0; margin: 0;
  position: static;
}
.vlp h1::before, .vlp h1::after,
.vlp h2::before, .vlp h2::after,
.vlp h3::before, .vlp h3::after,
.vlp h4::before, .vlp h4::after { content: none; display: none; }
.vlp p { margin: 0; }
.vlp ul { list-style: none; margin: 0; padding: 0; }
.vlp li::before { content: none; }
.vlp li::marker { content: none; display: none; }
.vlp img { max-width: 100%; height: auto; display: block; margin: 0; }
.vlp a { color: #1A73E8; text-decoration: none; }
.vlp table { margin: 0; border-collapse: collapse; }
.vlp *, .vlp *::before, .vlp *::after { box-sizing: border-box; }

/* --- 共通レイアウト --- */
.vlp-inner { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.vlp-section { padding: 80px 0; }
.vlp-section-gray { background: #F8F9FA; }
.vlp-section-white { background: #fff; }

/* --- 共通タイポグラフィ --- */
.vlp-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; color: #1A73E8; margin-bottom: 12px;
}
.vlp-title {
  font-size: 28px; font-weight: 700; color: #1B2B4B;
  line-height: 1.4; margin-bottom: 20px;
}
@media(min-width:640px){ .vlp-title { font-size: 32px; } }
.vlp-lead { font-size: 17px; color: #5F6368; line-height: 1.9; max-width: 720px; }

/* --- 共通ボタン --- */
.vlp-btn-primary {
  display: inline-block; background: #1A73E8; color: #fff;
  font-size: 16px; font-weight: 700; padding: 15px 34px;
  border-radius: 4px; transition: background 0.2s;
}
.vlp-btn-primary:hover { background: #1557B0; color: #fff; }
.vlp-btn-outline {
  display: inline-block; background: #fff; color: #202124;
  font-size: 16px; font-weight: 700; padding: 15px 34px;
  border: 1px solid #DADCE0; border-radius: 4px; transition: all 0.2s;
}
.vlp-btn-outline:hover { border-color: #1A73E8; color: #1A73E8; }
.vlp-btn-white {
  display: inline-block; background: #fff; color: #1B2B4B;
  font-size: 16px; font-weight: 700; padding: 15px 40px;
  border-radius: 4px; transition: opacity 0.2s;
}
.vlp-btn-white:hover { opacity: 0.85; color: #1B2B4B; }

/* --- 共通CTA帯 --- */
.vlp-cta-banner { background: #1B2B4B; padding: 56px 0; text-align: center; }
.vlp-cta-banner h2 { color: #fff; font-size: 24px; margin-bottom: 12px; }
@media(min-width:640px){ .vlp-cta-banner h2 { font-size: 26px; } }
.vlp-cta-banner p { color: rgba(255,255,255,0.8); font-size: 16px; margin-bottom: 24px; line-height: 1.8; }
.vlp-cta-note { color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 12px; }

/* --- 共通インラインCTA --- */
.vlp-cta-inline { background: #E8F0FE; border-radius: 8px; padding: 36px; text-align: center; margin-top: 48px; }
.vlp-cta-inline p { font-size: 17px; color: #1B2B4B; margin-bottom: 16px; font-weight: 700; }

/* --- 共通FAQ --- */
.vlp-faq-list { margin-top: 36px; max-width: 720px; margin-left: auto; margin-right: auto; }
.vlp-faq-item { border-bottom: 1px solid #DADCE0; padding: 24px 0; }
.vlp-faq-q { font-size: 17px; font-weight: 700; color: #1B2B4B; padding-left: 36px; position: relative; }
.vlp-faq-q::before {
  content: 'Q'; position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; background: #1A73E8; color: #fff;
  border-radius: 4px; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.vlp-faq-a { font-size: 16px; color: #5F6368; line-height: 1.85; padding-left: 36px; margin-top: 12px; }

/* --- 共通フロー --- */
.vlp-flow-list { display: flex; gap: 0; margin-top: 40px; }
.vlp-flow-item { flex: 1; text-align: center; position: relative; padding: 0 12px; }
.vlp-flow-item::after { content: ''; position: absolute; top: 28px; right: -12px; width: 24px; height: 2px; background: #DADCE0; }
.vlp-flow-item:last-child::after { display: none; }
.vlp-flow-num {
  width: 56px; height: 56px; margin: 0 auto 14px;
  background: #1A73E8; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
}
.vlp-flow-item h3 { font-size: 16px; font-weight: 700; color: #1B2B4B; margin-bottom: 8px; }
.vlp-flow-item p { font-size: 15px; color: #5F6368; line-height: 1.7; }

/* --- 共通レスポンシブ --- */
@media(max-width:1000px){
  .vlp-section { padding: 56px 0; }
  .vlp-flow-list { flex-direction: column; gap: 20px; }
  .vlp-flow-item::after { display: none; }
}
@media(max-width:639px){
  .vlp-inner { padding: 0 16px; }
  .vlp-title { font-size: 24px; }
}

/* ボタンリンク色: SWELLグローバル a色を上書き */
a.vlp-btn-primary { color: #fff !important; }
a.vlp-btn-primary:hover { color: #fff !important; }
a.vlp-btn-outline { color: #202124 !important; }
a.vlp-btn-outline:hover { color: #1A73E8 !important; }
a.vlp-btn-white { color: #1B2B4B !important; }
a.vlp-btn-white:hover { color: #1B2B4B !important; }