@charset "UTF-8";

/* --- 全体レイアウト --- */
.samples {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 子要素が溢れた時に折り返す設定 */
  gap: 10px;      /* 要素間の余白を簡単に指定 */
}

.sample {
  /* width: 1000px; は大きすぎるため、最大幅を指定しつつレスポンシブにします */
  width: 100%;
  max-width: 320px; /* PC時に横並びにする際の1つあたりの幅目安 */
  margin-bottom: 1em;
}

/* 中央の余白設定（gapを使わない場合の予備） */
/* .sample:nth-child(2) { margin-right: 10px; margin-left: 10px; } */

.sample-title {
  font-size: 1em;
  text-align: left;
  margin-bottom: 0.8em;
}

.sample-point {
  font-size: 0.8em;
  text-align: left;
}

.picture img {
  width: 100%;
  height: auto;
  display: block;
}

.description {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.description p {
  font-size: 13px;
  color: dimgray;
  text-align: left;
}


.table-picture img {
  width: 100%;
  height: auto;
}



/* --- メディアクエリ (480px以下) --- */
@media screen and (max-width: 480px) {
  .samples {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;    /* 中央寄せ */
  }

  .sample {
    width: 100%; /* 横幅いっぱい（または指定した%）に広げる */
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .description p {
    font-size: 12px; /* 9pxは小さすぎて読めない可能性があるため調整 */
  }
}