body {
  background-color: #a6a6a6;
  /* 文字色も変えたいなら追加で */
  color: #000000; /* 黒とか見やすい色にしてね */
  font-family: "MS Gothic", "Courier New", monospace, serif;
}

/* ヘッダーの画像の調整 */
.header img {
  width: 65%;       /* 画像をウィンドウ幅に合わせる */
  height: auto;      /* アスペクト比を保ちながら高さを自動調整 */
  display: block;    /* 画像をブロック要素にして中央寄せ */
  margin: 0 auto;    /* 画像を中央寄せ */
  margin-top: 30px;
  margin-bottom: 30px;
}

.outer-wrapper { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
} 

.container {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  margin-top: 40px;
} 

.banners { 
  margin-top: 20px; 
  text-align: center; 
} 

.marquee { 
  color: red; 
  font-weight: bold; 
} 

/* 左のカラム（リンク集など） */
.left-column {
  width: 220px;
  padding: 20px;
}

/* 中央のカラム（メインコンテンツ） */
.center-column {
  flex: 1;
  padding: 20px;
}

.btn{
	display:flex;
	flex-direction: column;
	width: 10em;
}
.btns{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: auto;
	justify-content: center;
}
.btn a{
	text-decoration:none;
	padding: 5px;
	line-height: 25px;
	margin-top: 10px;
	margin-bottom: 5px;
	border: 2px solid #cccccc;
	border-bottom-color: black;
	border-right-color: black;
	border-top-color: whitesmoke;
	border-left-color: whitesmoke;
	color: black;
}
.btn a:hover {
	border-bottom-color: whitesmoke;
	border-right-color: whitesmoke;
	border-top-color: black;
	border-left-color: black;
}

.right-column {
  width: 220px;
  padding: 20px;
}

.boxbanner {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.box {
  max-height: 300px;  /* ここで高さ固定してスクロールさせる */
  overflow-y: auto;   /* 縦スクロールが出る */
  padding-right: 10px; /* スクロールバーのスペース確保 */
  border: 1px solid #aaa;
  background-color: #fff;
}

.box span {
  display: block;
  margin-bottom: 5px;
}

.box hr {
  border: none;
  border-bottom: 1px solid #ddd;
  margin: 5px 0;
}

.footer {
  width: 100%;
  margin-top: 40px;
  padding: 20px 0;
  text-align: center;
}