/*
Theme Name: Twenty Twenty-three Child
Version: 1.1
Template: twentytwentythree
*/
.blogcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  word-wrap: break-word;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  transform: translateY(-5px);
  transition: all 0.5s ease;
}
.blogcard a {
  padding: 5px 5px; /* 上下のパディングを小さくして調整 */
}

.blogcard:hover {
  transform: translateY(0);
  box-shadow: none;
}

.blogcard.ex {
  background-color: #f7f7f7;
}

.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all 0.2s ease;
  display: block;
  height: 100%;
  padding: 15px;
}

.blogcard-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 幅が狭いときに折り返す */
  max-width: 100%; /* 親要素を超えない */
  box-sizing: border-box; /* パディングやボーダーを含める */
}

.blogcard-thumbnail {
  flex: 0 0 25%; /* 固定幅を25%にする */
  max-width: 25%; /* 幅が25%まで */
  margin-right: 10px; /* テキストと画像の間に余白を入れる */
}

.blogcard-thumbnail img {
  width: 100%; /* サムネイルのコンテナに合わせて画像を拡大縮小 */
  height: auto;
  border-radius: 5px;
  object-fit: cover; /* 画像の切り抜きをカバーにする */
}

.blogcard-texts {
  flex: 1; /* サムネイル以外の部分を残りの幅に合わせる */
  max-width: 75%; /* 残りの幅に合わせる */
  box-sizing: border-box; /* パディングやボーダーを含める */
}

.blogcard-title {
  font-size: 1rem; /* 固定フォントサイズにする */
  font-weight: bold;
  line-height: 1;
  color: #333;
  text-overflow: ellipsis; /* 省略記号を表示 */
}

.blogcard-excerpt {
  font-size: 0.8rem; /* 文字サイズは調整可能 */
  color: #666; /* 色を指定 */
  margin: 3px 0; /* 上下に余白を設定 */
  line-height: 1.5; /* 行間の調整 */
}

.blogcard-url {
  font-size: 0.8rem;
  color: #333;
}

.blogcard-caption {
  color: #777; /* キャプションの文字色を少し薄く */
  margin-top: 3px; /* ブログカードとの間に余白を追加 */
  text-align: center; /* キャプションを中央揃えにする */
  padding: 3px; /* パディングで余白を調整 */
}

p.blogcard-caption{
	font-size: 0.7rem;
}

.blogcard-site-icon {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.blogcard-site-icon img {
    margin-right: 5px;
}

.blogcard-site-name {
    font-size: 0.8rem;
    color: #555;
    display: flex;
    justify-content: flex-end; 
}


@media (max-width: 768px) {
  /* 幅768px以下（タブレットやスマホ）で縦並びにする */
  .blogcard-wrapper {
    flex-direction: column; /* 縦並び */
    align-items: flex-start; /* 左揃え */
  }

  .blogcard-thumbnail {
    width: 100%; /* 画像を100%幅で表示 */
    max-width: 100%;
    margin-right: 0; /* 横の余白をなくす */
    margin-bottom: 10px; /* 画像とテキストの間に余白を追加 */
  }

  .blogcard-texts {
    width: 100%; /* テキスト部分も100%幅に */
    max-width: 100%;
  }
}