.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; /* 子要素のテキストを中央揃え */
}

/*テーブル2 追加コード
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #555;		/*背景色*/
	text-align: left;	/*左よせにする*/
}

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

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

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



/* 固定サイズ */
.ta3 img {
	width: 500px; /* 幅を固定 */
	height: auto; /* 縦横比を維持 */
  }
  
  /* レスポンシブ対応 */
.ta3 img {
	max-width: 100%; /* 親要素に合わせる */
	height: auto;    /* 縦横比を維持 */
  }

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

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

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