.c22 {
  display: grid; /* グリッドレイアウトを使用 */
  grid-template-columns: 1fr 1fr; /* 3:1 の比率でカラムを設定 */
  gap: 20px; /* カラム間の隙間を作る */
  margin: 0 auto; /* 中央に配置 */
  box-sizing: border-box; /* パディングを含めて幅を計算 */
}

.main2 {
  padding: 20px;
text-align: center
}

.sub2 {
  padding: 20px;
  text-align: center

}
.sub2 p, .sub2 h3 {
  text-align: center; /* 子要素のテキストを中央揃え */
}


/*ta2テーブルブロック設定*/
.ta2 {
border-top: 1px solid #666;	/*テーブルの一番上の線。幅、線種、色*/
width: 100%;
margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta2 tr {
border-bottom: 1px solid #666;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2 th, .ta2 td {
padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
white-space: nowrap;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。折り返さないように変更*/
}

/*th（左側）のみの設定*/
.ta2 th {
width: 40%;			/*幅*/

}

/* 固定サイズ */
.ta2 img {
width: 500px; /* 幅を固定 */
height: auto; /* 縦横比を維持 */
}

/* レスポンシブ対応 */
.ta2 img {
max-width: 100%; /* 親要素に合わせる */
height: auto;    /* 縦横比を維持 */
}

/* テーブルセル内の右寄せ */
.cell-right {
float: right; /* セル内で右寄せ */
text-align: right;
}


@media screen and (max-width: 640px) {
.scroll {
  overflow-x: auto;
}
.tbl-r07 {
  min-width: 640px;
  margin: 0 10px 50px;
}
.tbl-r07 td {
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}
}

/* 横スクロールを可能にするための親コンテナを追加 */
.ta2-container {
  width: 100%;
  overflow-x: auto; /* 横スクロールを有効化 */
  -webkit-overflow-scrolling: touch; /* iOSでスムーズなスクロール */
}

/* テーブルの最小幅を設定（画面幅より広くなったときにスクロール可能にする） */
.ta2 {
  min-width: 600px; /* スマホで横スクロールさせるための最小幅 */
}

/* スマホ用レスポンシブ設定 */
@media screen and (max-width: 640px) {
  .ta2-container {
      overflow-x: auto; /* スマホで横スクロール */
  }
  .ta2 {
      min-width: 640px; /* 横スクロール可能な最小幅 */
  }
}