.flame {
  position: absolute;
  z-index: 2;
  width: 180px;
  height: auto;
}

.cast-style {
  display: flex;
  justify-content: center;
}

.gallery {
  margin: 20px;
  border: 1px solid #bfaf70;
  width: 180px;
  background: -webkit-linear-gradient(to top, rgb(29, 0, 0), #bfaf70);
  background: linear-gradient(to top, rgb(29, 0, 0), #bfaf70);
  /* color: #1d0000; */
}

.gallery img {
  /* width: 100%;
    height: auto; */
  width: 180px;
  height: auto;
  position: relative;
}

.desc p {
  font-family: "Sawarabi Mincho", serif;
  font-size: 12px;
  padding: 10px;
  /* text-align: center; */
  text-align: left;
  line-height: 1.4;
  /* text-align: left; */
  text-align: justify;
  letter-spacing: 2px;
  color: antiquewhite;
}
.desc .name {
  font-family: "Sawarabi Mincho", serif;
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
  text-align: center;
  color: antiquewhite;
}

/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child {
  margin-bottom: 10px;
}

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child {
  width: calc((100% - 10px) / 2);
}

.flex-col3::after,
.flex-col3 .flex-child {
  width: calc((100% - 20px) / 3);
}

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child {
  width: calc((100% - 30px) / 4);
}

/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after {
  content: "";
}

.flex-col4::before {
  order: 1;
}

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列 */
@media screen and (max-width: 991px) {
  .flex-col4::after,
  .flex-col4 .flex-child {
    width: calc((100% - 20px) / 3);
  }
}

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 767px) {
  .flex-col3 .flex-child,
  .flex-col4 .flex-child {
    width: calc((100% - 10px) / 2);
  }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 575px) {
  .flex-col2 .flex-child,
  .flex-col3 .flex-child,
  .flex-col4 .flex-child {
    width: 100%;
  }
}