/*
 * La plus+ — blog.css
 * ブログ記事内で使えるパーツのスタイル集
 * ─────────────────────────────────────────
 * 目次
 *  1. CTA ボックス / ボタン
 *  2. リストパターン（チェック / 数字 / 矢印 / ポイント）
 *  3. 引用デザイン（シンプル / 大引用符 / メモ / 警告）
 *  4. 吹き出し（左 / 右）
 *  5. 共通ユーティリティ
 */

/* ====================================================
   1. CTA ボックス / ボタン
   ==================================================== */

/* ─── CTA ボックス ─────────────────── */
.lp-cta {
  border-radius: 12px;
  padding: 2rem 2rem 2rem;
  text-align: center;
  margin-block: 2.5rem;
}
.lp-cta--primary {
  background: linear-gradient(135deg, #1F3864 0%, #2E5496 100%);
  color: #fff;
}
.lp-cta--light {
  background: #F0F4FF;
  border: 2px solid #2E5496;
  color: #1F3864;
}
.lp-cta--accent {
  background: linear-gradient(135deg, #BF8F00 0%, #F5A623 100%);
  color: #fff;
}
.lp-cta__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: .75rem;
  line-height: 1.5;
}
.lp-cta__desc {
  font-size: .95rem;
  opacity: .9;
  margin-bottom: 1.25rem;
  line-height: 1.8;
}

/* ─── CTA ボタン ───────────────────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .75em 2em;
  border-radius: 100px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}
.lp-btn:hover { opacity: .82; transform: translateY(-2px); }

.lp-btn--primary   { background: #1F3864; color: #fff; border-color: #1F3864; }
.lp-btn--accent    { background: #F5A623; color: #fff; border-color: #F5A623; }
.lp-btn--outline   { background: transparent; color: #1F3864; border-color: #1F3864; }
.lp-btn--white     { background: #fff; color: #1F3864; border-color: #fff; }
.lp-btn--white:hover { background: #f0f4ff; }

/* CTA内の白ボタン */
.lp-cta--primary .lp-btn--outline,
.lp-cta--accent  .lp-btn--outline {
  color: #fff; border-color: #fff;
}

/* ─── 単体ボタン（記事中に置く）────── */
.lp-btn-wrap {
  text-align: center;
  margin-block: 1.5rem;
}
.lp-btn-wrap .lp-btn { min-width: 200px; }

/* ====================================================
   2. リストパターン
   ==================================================== */

/* ─── 共通リセット ─────────────────── */
.lp-list {
  padding-left: 0;
  list-style: none;
  margin-block: 1.5rem;
  display: grid;
  gap: .6rem;
}
.lp-list li {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  line-height: 1.7;
  font-size: .97rem;
}
.lp-list li::before {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─── チェックリスト ───────────────── */
.lp-list--check li::before {
  content: "✓";
  color: #fff;
  background: #375623;
  border-radius: 50%;
  width: 1.4em;
  height: 1.4em;
  font-size: .75em;
  font-weight: 700;
  margin-top: .15em;
}

/* ─── 数字バッジリスト ─────────────── */
.lp-list--num { counter-reset: lp-num; }
.lp-list--num li::before {
  counter-increment: lp-num;
  content: counter(lp-num);
  color: #fff;
  background: #1F3864;
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  font-size: .8em;
  font-weight: 700;
  margin-top: .1em;
}

/* ─── 矢印リスト ───────────────────── */
.lp-list--arrow li::before {
  content: "→";
  color: #2E5496;
  font-weight: 700;
  font-size: 1em;
  margin-top: .05em;
}

/* ─── ポイントリスト（ボーダー強調）── */
.lp-list--point {
  gap: .5rem;
}
.lp-list--point li {
  background: #F0F4FF;
  border-left: 4px solid #1F3864;
  border-radius: 0 8px 8px 0;
  padding: .6em 1em;
  font-weight: 600;
  gap: 0;
}
.lp-list--point li::before { display: none; }

/* ─── バッドリスト（NG / 問題） ────── */
.lp-list--bad li::before {
  content: "✕";
  color: #fff;
  background: #C00000;
  border-radius: 50%;
  width: 1.4em;
  height: 1.4em;
  font-size: .75em;
  font-weight: 700;
  margin-top: .15em;
}

/* ====================================================
   3. 引用デザイン
   ==================================================== */

/* ─── シンプルボーダー引用 ──────────── */
.lp-quote {
  border-left: 4px solid #1F3864;
  padding: 1rem 1.25rem;
  background: #F8F9FF;
  border-radius: 0 8px 8px 0;
  margin-block: 1.5rem;
  font-size: .97rem;
  line-height: 1.85;
  color: #444;
}
.lp-quote cite {
  display: block;
  font-size: .85rem;
  color: #888;
  margin-top: .5rem;
  font-style: normal;
}
.lp-quote cite::before { content: "― "; }

/* ─── 大引用符 ─────────────────────── */
.lp-quote--big {
  border-left: none;
  background: transparent;
  border-radius: 0;
  padding: 1.5rem 1.5rem 1rem;
  position: relative;
}
.lp-quote--big::before {
  content: '\201C';
  font-size: 5rem;
  color: #2E5496;
  font-family: Georgia, serif;
  line-height: .6;
  display: block;
  margin-bottom: .5rem;
  opacity: .3;
}
.lp-quote--big p {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.7;
  color: #1F3864;
}

/* ─── メモ（青） ───────────────────── */
.lp-note {
  display: flex;
  gap: .75rem;
  background: #EBF3FF;
  border: 1px solid #93B4E8;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  font-size: .95rem;
  line-height: 1.75;
  color: #1A3A6B;
}
.lp-note::before {
  content: "📝";
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: .05em;
}

/* ─── 警告（赤） ───────────────────── */
.lp-warn {
  display: flex;
  gap: .75rem;
  background: #FEF0F0;
  border: 1px solid #F4AAAA;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  font-size: .95rem;
  line-height: 1.75;
  color: #7B1A1A;
}
.lp-warn::before {
  content: "⚠️";
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: .05em;
}

/* ─── ポイント（黄） ───────────────── */
.lp-point {
  display: flex;
  gap: .75rem;
  background: #FFFBE6;
  border: 1px solid #F5D060;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  font-size: .95rem;
  line-height: 1.75;
  color: #6B4E00;
}
.lp-point::before {
  content: "💡";
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: .05em;
}

/* ====================================================
   4. 吹き出し（左 / 右）
   ==================================================== */

.lp-balloon {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-block: 1.75rem;
}

/* アイコン */
.lp-balloon__icon {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.lp-balloon__icon img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #E0E8F0;
}
.lp-balloon__icon-name {
  font-size: .72rem;
  color: #777;
  text-align: center;
  white-space: nowrap;
}

/* 吹き出し本体 */
.lp-balloon__body {
  position: relative;
  background: #F0F4FF;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  font-size: .95rem;
  line-height: 1.8;
  color: #333;
  max-width: calc(100% - 90px);
}

/* 左向き三角（左吹き出し） */
.lp-balloon__body::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -10px;
  border: 6px solid transparent;
  border-right-color: #F0F4FF;
  border-left: none;
}

/* ─── 右吹き出し ───────────────────── */
.lp-balloon--right {
  flex-direction: row-reverse;
}
.lp-balloon--right .lp-balloon__body {
  background: #FFF6E6;
}
.lp-balloon--right .lp-balloon__body::before {
  left: auto;
  right: -10px;
  border-right-color: transparent;
  border-left: 6px solid #FFF6E6;
}

/* ─── カラーバリエーション ──────────── */
.lp-balloon--green .lp-balloon__body  { background: #E8F5EA; }
.lp-balloon--green .lp-balloon__body::before { border-right-color: #E8F5EA; }

.lp-balloon--pink  .lp-balloon__body  { background: #FDE8F0; }
.lp-balloon--pink  .lp-balloon__body::before { border-right-color: #FDE8F0; }

.lp-balloon--gray  .lp-balloon__body  { background: #F2F2F2; }
.lp-balloon--gray  .lp-balloon__body::before { border-right-color: #F2F2F2; }

/* ─── デフォルトアイコン（画像なし時）─ */
.lp-balloon__icon-default {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1F3864, #2E5496);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border: 2px solid #E0E8F0;
}

/* ====================================================
   5. 共通ユーティリティ
   ==================================================== */

/* ─── セパレーター ─────────────────── */
.lp-sep {
  border: none;
  border-top: 2px dashed #D0D8E8;
  margin-block: 2rem;
}

/* ─── ハイライトテキスト ───────────── */
.lp-hl            { background: linear-gradient(transparent 55%, #FFE566 55%); padding: 0 .1em; }
.lp-hl--pink      { background: linear-gradient(transparent 55%, #FFB3CC 55%); }
.lp-hl--blue      { background: linear-gradient(transparent 55%, #93C5FD 55%); }

/* ─── 記事内ボックス（まとめ等）────── */
.lp-box {
  border: 2px solid #2E5496;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-block: 2rem;
}
.lp-box__title {
  font-weight: 700;
  font-size: 1rem;
  color: #1F3864;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #D0D8E8;
}

/* ─── レスポンシブ ─────────────────── */
@media (max-width: 600px) {
  .lp-cta { padding: 1.5rem 1.25rem; }
  .lp-balloon__body { max-width: calc(100% - 80px); font-size: .9rem; }
  .lp-balloon__icon img,
  .lp-balloon__icon-default { width: 52px; height: 52px; }
  .lp-btn { min-width: auto; width: 100%; justify-content: center; }
}