/* --- 1. グリッド全体のレイアウト --- */
.seira-bento-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin: 0 auto 60px;
}

/* --- 2. カードの共通基本スタイル --- */
.bento-item {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  min-height: 250px; /* 少し高さを出すと余裕が出て綺麗 */
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.bento-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* --- 3. 中身の要素の配置ルール --- */
.bento-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bento-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e3a8a;
  margin-bottom: 10px;
}

.bento-text {
  font-size: 14px;
  color: #555555;
  line-height: 1.6;
}

/* --- 4. 特殊なカード（背景画像あり）の設定 --- */
.bento-bg-image {
  background-size: cover;
  background-position: center;
  border: none;
}

/* 背景画像カードは、中身を「下寄せ」でまとめて表示する */
.bento-bg-image .bento-content {
  justify-content: flex-end;

  background-color: rgba(255, 255, 255, 0.95); /* 95%の濃さの白 */
  height: auto; /* 高さを100%から文字の高さに解除する */
  margin-top: auto; /* 白い箱をカードの下側に押しやる */
/*  padding: 20px; /* 文字と白い箱の隙間（余白）を作る */
  border-radius: 12px; /* 白い箱の角を少し丸くする */

}

.bento-bg-image .bento-text {
  margin-top: 10px;
}
.bento-bg-image .bento-title {
  min-height: 0; /* 背景画像カードはタイトルの高さ固定を解除 */
}

/* 背景カード専用の色設定 */
/*.item-paperless { background-image: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.8)), url('https://seira.acty-sys.com/wp-content/uploads/2025/11/slider1-scaled.png'); }
.item-trace { background-image: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.8)), url('https://seira.acty-sys.com/wp-content/themes/astra-child/images/shape05.png'); }
*/
.item-paperless { background-image: url('https://seira.acty-sys.com/wp-content/uploads/2025/11/slider1-scaled.png'); }
.item-trace { background-image: url('https://seira.acty-sys.com/wp-content/themes/astra-child/images/shape05.png'); }


/* --- 5. レスポンシブ --- */
@media (min-width: 768px) {
  .seira-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .item-wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .seira-bento-grid { grid-template-columns: repeat(3, 1fr); }
}