/* 共通スタイル */
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;
}

/* テーブル内の画像だけ個別にサイズ制御する20250618 */
/*
td img {
  width: auto;              /* 横幅は画像の自然サイズを使う */
  max-width: 100%;          /* ただしセルをはみ出さない */
  height: auto !important;  /* 高さは元の比率に合わせる、重要 */
  display: block;
  margin: 0 auto;
}
*/

/* スマートフォン用：小さい画面の最適化 */
@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/16)解決策：横並び用のコンテナを用意する */
/* 写真横並び条件＝tdが800。写真横350px以下が2枚のみ(2025/06/16) */
.image-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.image-row img {
  max-width: calc(50% - 4px);
  height: auto;
  box-sizing: border-box;
}


/*　videoファイルもスマホ画面からはみ出さない20250606　*/
video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Excel表のHTML表がスマホ画面からはみ出さない20250614 */
/* 表全体を横スクロールで表示可能にする */

/* ▼ sticky 横スクロール専用バー ▼ */
/* .sticky-scroll-wrapper {
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 10;
  overflow-x: auto;
  height: 20px; /* スクロールバーの高さだけ */
}

/* スクロールバー表示用の空ダミー表 */
.sticky-scroll-wrapper table {
  min-width: 600px;
  height: 1px;
} */

/* ▼ 表のスクロール本体 ▼ */
.vertical-scroll-wrapper {
  max-height: 100vh;
  overflow-y: auto;
}

/* 横スクロールできる表本体 */
/* htmlの、<div class="responsive-table-wrapper">、とセット */
.responsive-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table-wrapper table {
  min-width: 600px;
  width: auto;
  border-collapse: collapse;
}

.responsive-table-wrapper th,
.responsive-table-wrapper td {
  padding: 8px;
  border: 1px solid #ccc;
}

/* CSSだけで常時表示する「上に戻る」ボタン20250615 */
#backToTopCSS {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
display: block; 
  background-color: #333;
  color: #fff;
  padding: 10px 15px;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#backToTopCSS:hover {
  background-color: #555;
}


/* 以上、最新版2025/06/18/0913 */