/* Article Factory — フロント側の最小スタイル
   テーマ「送客先サイト MAG」使用時はテーマ側の変数を継承します。
   単体で使う場合のフォールバックもテーマと同じ配色にしてあります。 */
.maf-event-card,
.maf-cta{
  --maf-white: var(--om-white, #ffffff);
  --maf-ink:   var(--om-ink, #141013);
  --maf-text:  var(--om-text, #3a3238);
  --maf-sub:   var(--om-muted, #6e6570);
  --maf-pink:  var(--om-pink, #f2a6d1);
  --maf-hot:   var(--om-hot, #e0479b);
  --maf-cream: var(--om-cream, #fff6f2);
}

/* 関連イベントカード */
.maf-event-card{
  display:block; max-width:720px; margin:2.4em 0; padding:18px 22px;
  background:var(--maf-white);
  border:2px solid var(--maf-ink);
  border-left:8px solid var(--maf-pink);
  border-radius:10px;
}
.maf-event-card__label{
  display:block; margin-bottom:8px;
  font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--maf-ink);
}
.maf-event-card__title{
  display:block; font-size:1.02rem; font-weight:800; line-height:1.65;
  color:var(--maf-ink); text-decoration:underline; text-underline-offset:3px;
}
.maf-event-card__title:hover{ color:var(--maf-hot); }
.maf-event-card__note{
  display:block; margin-top:8px; font-size:.83rem; line-height:1.8; color:var(--maf-sub);
}

/* 記事末尾のCTA（テーマ未使用時のフォールバック）
   テーマ「送客先サイト MAG」が有効な場合、このブロックはテーマ側が描画するため出力されません。 */
.maf-cta{
  max-width:720px; margin:2.8em 0 1em; padding:28px;
  background:var(--maf-ink); color:#fff;
  border:3px solid var(--maf-ink);
  border-radius:16px;
  box-shadow:7px 7px 0 var(--maf-hot);
}
.maf-cta__label{
  display:inline-block; margin-bottom:12px; padding:4px 13px; border-radius:99px;
  background:var(--maf-pink); color:var(--maf-ink);
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.maf-cta__title{
  font-size:1.28rem; font-weight:800; line-height:1.5; margin:0 0 12px; color:#fff;
}
.maf-cta__body{ font-size:.94rem; line-height:1.9; color:rgba(255,255,255,.84); margin:0 0 22px; }
.maf-cta__btn{
  display:inline-block; padding:15px 32px; border-radius:99px;
  background:var(--maf-hot); color:var(--maf-ink);
  font-weight:800; font-size:16px; text-decoration:none;
  border:3px solid #fff; box-shadow:4px 4px 0 rgba(255,255,255,.3);
}
.maf-cta__btn:hover{ color:var(--maf-ink); text-decoration:none; transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(255,255,255,.3); }

@media (max-width:600px){
  .maf-cta{ padding:22px 20px; box-shadow:5px 5px 0 var(--maf-hot); }
  .maf-cta__btn{ display:block; text-align:center; }
  .maf-event-card{ padding:15px 18px; }
}

/* 記事末の「参考にした情報」（設定でオンにしたときだけ出力されます） */
.maf-sources{
  max-width:720px; margin:2.4em 0 1em; padding:16px 20px;
  background:#faf8f9; border:1px solid #e6e0e4; border-radius:8px;
  font-size:.86rem; line-height:1.9;
}
.maf-sources__title{
  margin:0 0 8px; font-weight:800; font-size:.8rem;
  letter-spacing:.06em; color:#6e6570;
}
.maf-sources ul{ margin:0; padding-left:1.2em; }
.maf-sources li{ list-style:disc; margin:0 0 4px; }
.maf-sources a{ color:#3a3238; text-underline-offset:3px; }

/* 内部リンクの補強で記事末に足すカード
   （設定「置ける箇所が無かったとき」をカードにした場合のみ） */
.maf-linkcard{
  display:block; max-width:720px; margin:2em 0; padding:14px 18px;
  background:#fff; border:1px solid #e0dade; border-left:5px solid #f2a6d1;
  border-radius:8px; text-decoration:none;
}
.maf-linkcard__label{
  display:block; margin-bottom:4px;
  font-size:11px; font-weight:800; letter-spacing:.08em; color:#6e6570;
}
.maf-linkcard__title{
  display:block; font-weight:700; line-height:1.7; color:#141013;
  text-decoration:underline; text-underline-offset:3px;
}
.maf-linkcard:hover .maf-linkcard__title{ color:#e0479b; }

/* 出典リンク（句点の後ろに置く「（参照：…）」） */
.maf-cite{
  font-size:.86em;
}
.maf-cite a{
  color:#6e6570;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.maf-cite a:hover{ color:#e0479b; }

/* 商品名のリンク */
.maf-product{text-decoration:underline;text-underline-offset:2px;}

/* よくある質問。質問は h3（「よくある質問」の h2 の下） */
.maf-faq__item{ padding:14px 0; border-bottom:1px solid rgba(125,135,160,.22); }
.maf-faq__item:last-child{ border-bottom:none; }
.maf-faq__q{ margin:0 0 6px; font-size:1.02em; }
.maf-faq__q::before{ content:"Q. "; opacity:.55; }
.maf-faq__a{ margin:0; }
.maf-faq__a::before{ content:"A. "; opacity:.55; }

/* 段落の余白。
   テーマが p の余白を 0 にしていると、段落が分かれていても
   画面では改行のない塊に見えます。生成した段落にだけ余白を持たせます。
   隣り合う余白は相殺されるので、余白のあるテーマでも広がりすぎません。 */
p.maf-p{ margin-bottom:1.5em; }
p.maf-p:last-child{ margin-bottom:0; }