.text-center {
  text-align: center;
}

#main img {
  max-width: 100%;
  object-fit: contain;
}

.target-item-image {
  margin-top: 1.5rem;
}

@media (width >=768px) {
  .target-item-image {
    width: 72%;
    margin-inline: auto;
  }
}

@media (width >=768px) {
  .check-lot-image {
    width: 72%;
  }
}


.scrollable-table {
  /* 親要素は画面幅いっぱいに広がる */
  width: 100%;
  /* コンテンツが横方向にはみ出した場合にスクロールバーを表示 */
  overflow-x: auto;

}

.scrollable-table table {
  /* 列幅を固定するために`table-layout: fixed;`を推奨 */
  table-layout: fixed;
  border-collapse: collapse;
}

@media (width >=768px) {
  .scrollable-table table {
    table-layout: auto;
  }
}

/* テーブルのスタイル（例） */
#main_wrapper table {
  width: max-content;
}

@media (width >=768px) {
  #main_wrapper table {
    width: 100%;
  }
}

#main_wrapper table th,
#main_wrapper table td {
  vertical-align: middle;
  white-space: nowrap;
  padding: 8px;
}

#main_wrapper table th {
  text-align: center;
}

#main_wrapper table img {}

#main_wrapper table .item-image {
  display: inline-block;
  max-width: 240px;
  width: 240px !important;
  height: auto;
}

.flows {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.flows * {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .flows {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.flow {
  position: relative;
  border: 2px solid #434343;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .5rem;
  font-size: 0.8rem;
  min-height: 64px;
}

@media (min-width: 768px) {
  .flow {
    width: calc(100% / 4 - 1.5rem / 1.25);
    min-height: 90px;
  }
}

@media (min-width: 1200px) {
  .flow {
    width: calc(100% / 4 - 1.5rem / 1.25);
  }
}

.flow:not(:first-child)::before {
  position: absolute;
  top: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  content: '\f063';

}

@media (min-width: 768px) {
  .flow:not(:first-child)::before {
    top: 50%;
    left: -1.15rem;
    transform: translateY(-50%);
    content: '\f061';
  }
}
