@charset "utf-8";
/* CSS Document */
.listBox {
  padding: 5% 0;
}
.listBox ul {
  display: flex;
  flex-wrap: wrap; /* flex-flow: wrap と同義 */
  justify-content: space-between; /* 2列を両端に綺麗に配置 */
  gap: 10px; /* columnとrowをまとめて指定 */
  list-style: none;
  padding: 0;
}
.listBox ul li {
  width: 49%; /* 隙間を考慮して微調整 */
  border: 1px solid #575454;
  display: flex; /* ★重要：中身（画像とテキスト）を横並びにする */
  align-items: stretch; /* ★重要：左右の高さを高い方に合わせる */
  background: #232017;
}
#raw03 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 2%;
  list-style: none;
  padding: 0;
  justify-content: flex-start;
}
#raw03 ul li {
  flex: 0 0 23.5%;
  border: 1px solid #575454;
  font-size: 70%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: none;
}
#raw03 ul li img {
  width: 100%;
  height: auto;
  display: block;
}
#raw03 ul li .text {
  padding: 0.7em;
  flex-grow: 1; /* テキストが短くても、このエリアが伸びて下端を揃える */
  display: flex;
  flex-direction: column;
}
#raw03 ul li .text h3 br {display: none;}

.listBox ul li h3 {
  min-height: 3em; /* 2行分の高さを最低限確保 */
  padding: 5px 0 5px;
  margin: 0;
  font-size: 0.9em;
  text-align: left;
}
.listBox ul li p {
  padding: 0 0 5px;
  line-height: 1.4em;
  font-size: 80%;
}
.listBox ul li p.date {
  font-size: 70%;
}
.detailBox {
  padding: 0;
  justify-content: flex-start;
}
.leftBox {
  width: 180px;
}
.rightBox {
  width: calc(100% - 180px);
  padding: 0 0 0 15px;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
/*----------------------------------------------------------- 1280px */
@media screen and (max-width: 1280px) {
  #raw03 ul li {
    flex: 0 0 32%; /* 幅を固定しつつ、高さを隣と揃える */
  }
}
/*----------------------------------------------------------- 1024px */
@media screen and (max-width: 1024px) {
  .listBox ul li h3 {
    font-size: 90%;
  }
  .listBox ul li p {
    font-size: 70%;
  }
}
/*----------------------------------------------------------- 768px */
@media screen and (max-width: 768px) {
  .listBox ul li {
    width: 100%;
  }
  #raw03 ul li {
    width: 50%;
    border: 1px solid #575454;
  }
  #raw03 ul li {
    flex: 0 0 49%; /* 幅を固定しつつ、高さを隣と揃える */
  }
  #raw03 ul li .text h3 br {display: inline;}
}
/*----------------------------------------------------------- 480px */
@media screen and (max-width: 480px) {
  .detailBox {
    flex-flow: inherit;
  }
}