/* 親コンテナの設定 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}


/* カード自体の設定 */
.card-box {
  width: 95%; /* スマホ時は1列（100%） */
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow: hidden;
/*  font-family: sans-serif;*/
  box-sizing: border-box;
}

/* PC（768px以上）になったら2列にする */
@media (min-width: 768px) {
  .card-box {
    width: calc(50% - 10px); /* 2列配置（隙間分を計算で引く） */
  }
}

/* 2個目以降のカードの margin-top を 0 にする */
.card-box + .card-box {
  margin-top: 0;
}


/* もしスマホ時（縦積み時）にカード同士の間隔を空けたい場合 */
/* コンテナに gap が設定されていれば通常は不要ですが、念のため記述 */
@media (max-width: 767px) {
  .card-container {
    justify-content: center;
  }
  .card-box + .card-box {
    margin-top: 20px; /* スマホの縦並び時のみ間隔を空ける */
  }
}

/* PC時の設定（前回同様） */
@media (min-width: 768px) {
  .card-box {
    width: calc(50% - 10px);
  }
  /* PCで2列並ぶとき、上の行のカードと下の行のカードの隙間を確保する設定 */
  .card-container {
    gap: 20px; 
  }
}

/* その他の装飾（前回と同様） */
.card-header { background-color: #e6f5f9; padding: 20px; border-bottom: 2px solid #0080A2; }
.card-title { margin: 0 0 10px 0; font-size: 1.25rem; }
.card-subtitle { margin: 0; font-size: 0.95rem; color: #666; }
.card-body { padding: 20px; }
.card-list { display: grid; grid-template-columns: 80px 1fr; gap: 10px; margin-bottom: 20px; }
.card-list dt { font-weight: bold; color: #555; }
.card-content { border-top: 1px solid #eee; padding-top: 15px; }
.content-title { font-weight: bold; margin-bottom: 10px; display : none; }
.card-content ul { padding-left: 20px; margin: 0; }
.card-content li { margin-bottom: 5px; font-size: 0.9rem; color: #444; }