/*
=================================================================
LP共通ベーススタイル（lp-base.css）
SANGOの子テーマ用 - LPテンプレート専用
=================================================================
このファイルをSANGO子テーマに配置し、functions.phpで読み込む。
各LPのカスタムHTMLブロック内では .fuku-lp などの
固有クラスでスタイルを上書きする。
=================================================================
*/

/* ============================================================
   LPテンプレート共通リセット
   ============================================================ */

body.lp-template {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* SANGOのデフォルトスタイルをLPコンテンツ内でリセット */
body.lp-template .entry-content h1,
body.lp-template .entry-content h2,
body.lp-template .entry-content h3,
body.lp-template .entry-content h4,
body.lp-template .entry-content h5,
body.lp-template .entry-content h6 {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

body.lp-template .entry-content ul,
body.lp-template .entry-content ol {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border: none !important;
    background: none !important;
}

body.lp-template .entry-content li {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
}

body.lp-template .entry-content li::before {
    display: none !important;
    content: none !important;
}

body.lp-template .entry-content p {
    margin: 0 !important;
    padding: 0 !important;
}

body.lp-template .entry-content a {
    text-decoration: none !important;
    color: inherit !important;
}

body.lp-template .entry-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* SVGアイコン共通（SANGOのsvgスタイルを上書き） */
body.lp-template .entry-content svg {
    display: inline-block !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

/* ============================================================
   LPコンテンツラッパー
   ============================================================ */

#lp-content-wrapper {
    width: 100%;
    overflow-x: hidden;
}

/* ============================================================
   LP共通ユーティリティ
   ============================================================ */

/* フルワイドセクション用 */
.lp-section-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* LP内の最大幅コンテナ */
.lp-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.lp-inner-wide {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ============================================================
   ふくキャリア LP ブロックパターン用 CSS（fk-* クラス）
   ============================================================ */

/* ---------- カラー変数 ---------- */
.fk-lp {
  --fk-navy: #1f2e47;
  --fk-sage: #799979;
  --fk-sage-dark: #4a6b4a;
  --fk-gold: #cfb47c;
  --fk-gold-light: #e8d5a8;
  --fk-cream: #f9f7f2;
}

/* ---------- ヒーロー ---------- */
.fk-badge {
  display: inline-block !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(207,180,124,0.5) !important;
  border-radius: 100px !important;
  padding: 6px 18px !important;
  color: #e8d5a8 !important;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem !important;
}

/* ---------- セクションラベル ---------- */
.fk-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  color: #4a6b4a !important;
  margin-bottom: 12px !important;
}
.fk-label::before {
  content: '' !important;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cfb47c;
  flex-shrink: 0;
}
.fk-label--light { color: rgba(255,255,255,0.6) !important; }

/* ---------- セクション背景 ---------- */
.fk-empathy,
.fk-steps { background-color: #f9f7f2 !important; }
.fk-bonus { background: linear-gradient(135deg, #f0ebe0 0%, #e8e0d0 100%) !important; }
.fk-fuku  { background-color: #f9f7f2 !important; }

/* ---------- チェックリスト ---------- */
.fk-check-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 1.5rem !important;
}
.fk-check-list li {
  position: relative !important;
  padding: 12px 0 12px 28px !important;
  border-bottom: 1px solid rgba(207,180,124,0.2) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  background: none !important;
}
.fk-check-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 20px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 2px solid #cfb47c !important;
  background: transparent !important;
  display: block !important;
}
.fk-check-list li:last-child { border-bottom: none !important; }

/* ---------- 引用（結論・まとめ） ---------- */
.fk-conclusion {
  border-left: 4px solid #cfb47c !important;
  background: rgba(255,255,255,0.8) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 1.2rem 1.5rem !important;
  margin-top: 1.5rem !important;
}
.fk-conclusion p {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #2d3748 !important;
}

/* ---------- ベネフィットカード ---------- */
.fk-benefit-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(207,180,124,0.25) !important;
  border-radius: 14px !important;
  padding: 1.2rem !important;
}

/* ---------- ステップカード ---------- */
.fk-step-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 20px rgba(31,46,71,0.08) !important;
}
.fk-step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #e8d5a8 0%, #cfb47c 100%) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1f2e47 !important;
  margin-bottom: 0.8rem !important;
}

/* ---------- 診断シートカード ---------- */
.fk-bonus-card {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(207,180,124,0.25) !important;
  box-shadow: 0 4px 20px rgba(31,46,71,0.06) !important;
}

/* ---------- ふくキャリアカード ---------- */
.fk-fuku-card {
  background: #ffffff !important;
  border: 1px solid #cfb47c !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 12px rgba(31,46,71,0.05) !important;
}
.fk-fuku-card h3 {
  color: #1f2e47 !important;
  font-size: 17px !important;
  margin-bottom: 0.5rem !important;
}

/* ---------- 期間限定バッジ ---------- */
.fk-limit-badge {
  display: block !important;
  text-align: center !important;
  background: rgba(207,180,124,0.15) !important;
  border: 1px solid rgba(207,180,124,0.4) !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  color: #cfb47c !important;
  margin: 0 auto 2rem auto !important;
  line-height: 1.7 !important;
  max-width: 480px !important;
}

/* ---------- ボタン hover ---------- */
.fk-btn .wp-block-button__link,
.fk-btn-gold .wp-block-button__link {
  transition: all 0.3s ease !important;
}
.fk-btn .wp-block-button__link:hover {
  box-shadow: 0 12px 32px rgba(74,107,74,0.5) !important;
  transform: translateY(-2px) !important;
}
.fk-btn-gold .wp-block-button__link:hover {
  box-shadow: 0 12px 32px rgba(207,180,124,0.55) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   fk-lp 内の見出しリセット（SANGOデフォルトスタイルを上書き）
   ============================================================ */

/* h2：SANGOの下線・背景・ボーダーをすべて除去 */
.fk-lp h2,
.fk-lp .wp-block-heading.wp-block-heading {
  border: none !important;
  border-bottom: none !important;
  border-left: none !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
.fk-lp h2::before,
.fk-lp h2::after {
  display: none !important;
  content: none !important;
}

/* h3：SANGOのボーダー・背景を除去 */
.fk-lp h3,
.fk-lp .wp-block-heading h3 {
  border: none !important;
  border-bottom: none !important;
  border-left: none !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0.6rem !important;
}
.fk-lp h3::before,
.fk-lp h3::after {
  display: none !important;
  content: none !important;
}

/* ---------- セクション別 見出し色 ---------- */

/* 明るい背景セクション（共感・ステップ・診断・ふくキャリア）のh2 */
.fk-empathy h2,
.fk-steps h2,
.fk-bonus h2,
.fk-fuku h2 {
  color: #1f2e47 !important;
  font-size: clamp(22px, 5vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

/* ステップカード内 h3 */
.fk-step-card h3 {
  color: #1f2e47 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 0.6rem !important;
}

/* ふくキャリアカード内 h3 */
.fk-fuku-card h3 {
  color: #1f2e47 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* ダーク背景セクション（ベネフィット・CTA）のh2は白 */
.fk-benefit h2,
.fk-cta h2 {
  color: #ffffff !important;
  font-size: clamp(20px, 4vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}