/* 共通スタイル */
table {
  width: 100%;
  max-width: 1000px; /* PCや大型タブレットではこの最大幅まで */
  margin: 0 auto;
  border-collapse: collapse;
  box-sizing: border-box;
}

/* テーブル内セルに基本的な余白と罫線 */
th, td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: left;
}

/* 画像は親要素に合わせて縮小、比率保持 */
/* margin: 0 auto;は写真画像を中央に配置、記述しないと左に配置 */
/* height: auto !important;の!importantは写真の縦横比率を同じにする、記述しないと横のみ縮む */
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto !important;
  box-sizing: border-box;
}

/* スマートフォン用：小さい画面の最適化 */
@media screen and (max-width: 480px) {
  table {
    font-size: 14px;       /* 小さめ文字に調整 */
    max-width: 100%;       /* フル幅にして見やすく */
    overflow-x: auto;      /* はみ出し時の横スクロール対策 */
  }
  th, td {
    padding: 6px;
  }
}

/* タブレット（縦・横）に対応 */
@media screen and (max-width: 900px) {
  table {
    max-width: 100%;
    font-size: 15px;
  }
}

/* 写真を横並びにする(2025/06/01)解決策：横並び用のコンテナを用意する */
.image-row {
  display: inline-flex;      /* inline-flex で中央寄せにしやすく */
  justify-content: center;  /* 中央に配置 */
  gap: 10px;                 /* 画像間の余白 */
}

.image-row img {
  width: 120px;
  height: auto;
}


/* 以上、最新版2025/06/01 */