/* =============================================== */
/* 新しいサイドバーウィジェットのスタイル */
/* =============================================== */

/* --- ウィジェット全体 --- */
.sidebar-widget {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

/* --- タブ部分 --- */
.sidebar-widget__tabs {
  display: flex;
}
.sidebar-widget__tab-button {
  flex: 1;
  padding: 12px;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f7f7f7;
  cursor: pointer;
  font-weight: bold;
  color: #555;
  transition: all 0.2s;
  font-size: 1em; /* フォントサイズ指定を追加 */
}
.sidebar-widget__tab-button.active {
  background-color: #fff;
  color: #095DAD;
  border-bottom: 2px solid #095DAD;
}

/* --- コンテンツパネル --- */
.sidebar-widget__content {
  padding: 20px;
}
.sidebar-widget__panel {
  display: none;
}
.sidebar-widget__panel.active {
  display: block;
}
.sidebar-widget__content p {
  margin: 0;
  text-align: center;
  color: #777;
}

/* --- 記事グリッド（PC・スマホ共通） --- */
.sidebar-post-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 常に2列表示 */
  gap: 15px;
}
.sidebar-post-card {
  display: block;
  text-decoration: none;
  color: #333;
}
.sidebar-post-card:hover .sidebar-post-card__title {
  color: #095DAD;
}
.sidebar-post-card__image {
  width: 100%;
  padding-top: 65%; /* 画像の比率 */
  background-color: #f0f0f0;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sidebar-post-card__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-post-card__title {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  font-weight: bold;
  transition: color 0.2s;
  
  /* ▼▼▼ 2行から3行に変更 ▼▼▼ */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 表示する最大行数を3に */
  overflow: hidden;
}
  /* 2行で省略する設定（赤字は無視して問題ありません） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}