/* ========================================
   BLOG Section - SP Styles (完全版)
   BLOGセクション SP専用スタイル
   
   【重要】functions.phpで max-width: 767px 指定済み
   このファイル内でメディアクエリは不要
   
   【変更履歴】
   2025-11-10: 完全再設計
   - style.cssからの分離完了
   - メディアクエリ二重構造を解消
   - 背景設定を1箇所に集約（将来の変更が容易）
   ======================================== */

/* ========================================
   背景透明化（将来の変更はここだけ修正）
   
   【重要】html body プレフィックスで詳細度を最大化
   親テーマ（SWELL）のCSSに確実に勝つため
   ======================================== */
html body #section-blog,
html body #section-blog .ptl-section__inner,
html body .ptlBlog,
html body .ptlBlog__header,
html body .ptlBlog__container,
html body .ptlBlog__track,
html body .ptlBlog__item,
html body .ptlBlog__card,
html body .ptlBlog__media,
html body .ptlBlog__more {
  background: transparent !important;
}

/* ========================================
   セクション余白
   ======================================== */
#section-blog {
  margin-bottom: 60px;
}

/* ========================================
   ヘッダー調整
   ======================================== */
.ptlBlog__header {
  margin-bottom: 40px;
}

/* SP時のブログカードタイトルを白に */
.ptlBlog__title {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.ptlBlog__title a {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ========================================
   装飾要素調整
   ======================================== */
.ptlBlog .ptl-section__ornament img {
  width: 180px;
}

/* ========================================
   カードレイアウト - モバイル（2列表示）
   ======================================== */
.ptlBlog__item {
  flex: 0 0 calc((100% - 24px) / 2);
  min-width: 160px;
  max-width: 320px;
}

/* ========================================
   カードレイアウト - タブレット（3列表示）
   500px以上でタブレット表示に切り替え
   ======================================== */
@media (min-width: 500px) and (max-width: 767px) {
  .ptlBlog__item {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 220px;
    max-width: 320px;
  }
}