/*
Theme Name: Lightning Child
Template: lightning
Description: Lightning の子テーマ
Author: あなたの名前
Version: 1.0
*/

/* ==========================
   関連記事（こちらの記事もおすすめ）
   ========================== */
.related-posts {
  margin: 40px 0;
}

.related-title {
  font-size: 1.4em;
  margin-bottom: 20px;
}

.related-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.related-card {
  flex: 1 1 calc(25% - 20px); /* PCは4列 */
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.related-card img {
  width: 100%;
  height: auto;
  display: block;
}

.related-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.9em;
  padding: 8px;

  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最大2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .related-card {
    flex: 1 1 calc(50% - 20px); /* タブレットは2列 */
  }
}

@media (max-width: 768px) {
  .related-card {
    flex: 1 1 100%; /* スマホは1列 */
  }
}




/* 関連記事カードの画像を統一 */
.related-card img {
  width: 100%;
  height: 200px;       /* 高さを固定 */
  object-fit: cover;   /* トリミングして枠にフィット */
  display: block;
}




/* キャプション（タイトル部分）の高さを固定 or minimum 高さを指定 */
.related-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.9em;
  padding: 8px;
  min-height: 3.6em; /* 2行分くらいを確保、行の高さ × 2行 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最大2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* カードの Box の高さの揃え */
.related-card {
  flex: 1 1 calc(25% - 20px);
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}

/* 画像部分とタイトルの部分の境目を揃える */
.related-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* キャプション部分を下に貼り付け */
.related-caption {
  margin-top: auto; /* タイトル部分を画像の下端に揃えるように */
}


/* 関連記事カードのキャプション高さを統一 */
.related-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.9em;
  padding: 8px;

  min-height: 3.6em;         /* タイトル2行分の高さを確保 */
  line-height: 1.8em;        /* 1行あたりの高さ */
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* 最大2行まで表示 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* ===== 関連記事カードのホバーエフェクト ===== */

/* 画像を少しズーム */
.related-card img {
  transition: transform 0.3s ease;
}
.related-card:hover img {
  transform: scale(1.05);
}

/* 黒帯キャプションを少し明るくする */
.related-caption {
  transition: background 0.3s ease;
}
.related-card:hover .related-caption {
  background: rgba(0, 0, 0, 0.8); /* ホバー時は少し濃く */
}

/* カード全体にふわっと影を強く */
.related-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.related-card:hover {
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  transform: translateY(-4px); /* 少し浮かせる */
}



/* PCは4列 */
.related-card {
  flex: 1 1 calc(25% - 20px);
}

/* タブレットは2列 */
@media (max-width: 1024px) {
  .related-card {
    flex: 1 1 calc(50% - 20px);
  }
}

/* スマホも2列（1列にはしない） */
@media (max-width: 768px) {
  .related-card {
    flex: 1 1 calc(50% - 20px);
  }
}





/* Lightning標準の関連記事を非表示 */
.section.relatedPosts,
.relatedPosts {
  display: none !important;
}

}




/* 関連記事ブロックの余白調整（ゆったり版） */
.related-posts {
  margin-top: 80px;   /* 本文との間に広めの余白 */
  margin-bottom: 60px;
}

.related-title {
  font-size: 1.4em;
  margin-bottom: 32px; /* 見出しとカード群の間も広めに */
}