.body{
	background:#A4FFEF;
	margin: 0;

}

.header{
	background:#71FFD5;
	color:;
	font-size:  40px;
	padding: 30px;
	text-align: center;
	
		
	
}

.menu{
	background:#5BA9E9;
	
}
.menu-in{
	width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.text-left{
	text-align: left !important;
}

.contents{
	background: ;
	width: 640px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	
	color: #323232;
	
}

/*リセットcss*/
hi,h2,h3,h4
div{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	
}


/*メニュー部分　byチャットGBT*/

/*グランドメニューを作ります。横並びでボタン4つをaタグで。cssはflexをつかい横幅は640pxです。ボタンのノーマルの背景色は#0082D5でhover時に#92C7FFに。ボタンの文字列は左から"TOP","PAGE01","PAGE02","PAGE02"です。ボタンの上下のパディングは８pxです。ボタンの横幅はメニュー全体に広がるように
一番外のコンテナのclassは”menu-in”でおねがい
現在のメニューのボタンをdivタグからアンカータグへ変更してください
aタグのリンク先を左から"index.html","page01.html","page03.html","page03.html"に設定してください*/






/* メニューコンテナのスタイル */

.menu-in {
  display: flex;
  width: 640px; /* 横幅640px */
  justify-content: space-between; /* ボタン間に等間隔のスペース */
  margin: 0 auto; /* 中央寄せ */
}

/* 各メニューボタンのスタイル */
.menu-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0082D5; /* ノーマル時の背景色 */
  color: white; /* 文字色 */
  text-decoration: none; /* アンダーラインを消す */
  font-size: 16px; /* 文字サイズ */
  flex: 1; /* 各ボタンの横幅を均等に広げる */
  padding: 10px; /* 上下のパディング10px */
  text-align: center; /* 文字を中央寄せ */
}

/* ホバー時の背景色 */
.menu-button:hover {
  background-color: #92C7FF;
}













/*コロンを使って作っているのを疑似セレクターという*/

.bt01{
	background:  #04D4E5;/*カラーの番号は十六進法になっている　最大値がFF（255）*/
	color:#EC28FF;
	padding: 8px;
	width: 70px;
	text-align: center;
	border-radius: 30px;
	transition-duration: 0.3s;
	
}

.bt01:hover{
	background: #81EDF7;
	cursor: pointer;
	transform: rotate(1.2);
	transform: scale(1.2);
	
	
}