body {
	font-size: 16px;
	line-height : 1.6;
}

#control {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 1000;
}

#control button {
	width: 50px;
	height: 50px;
	font-size: 24px;
	background-color: rgba(100, 150, 255, 0.3);
	border: 1px solid rgba(100, 150, 255, 0.6);
	color: #333;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s, opacity 0.3s;
	opacity: 0.7;
}

#control button:hover {　
	background-color: rgba(100, 150, 255, 0.5);
	opacity: 1;
}

/* コードの説明

1行目: ページ全体(body)の基本的なスタイルをここで指定する。
2行目: 初期の文字サイズを16pxに指定。
3行目: 行の高さを文字サイズの1.6倍にする(行間空け)。

6行目: div "Id"なので＃。
7行目: 画面に固定してスクロールしても右下に表示されるようにする。
8,9行目: 画面の下から20px、右端から20pxの位置に配置。
10行目: フレックスボックスで子要素(button)を並べる。
11行目: 子要素(button)を縦に並べる。
12行目: ボタンどうの間に10px分の間隔を開ける。※margint-top: 10px;と同じ働き。
13行目: 他の要素の上に表示されるように優先順位を上げる。

16行目: control内のbuttonに適用されるようにする。
17,18行目: ボタンの横幅と高さを50pxに設定(正方形)。
19行目: ボタン内の文字のサイズを24pxに設定。
20行目: ボタンの背景色を設定(青系の背景色を30%の透明度)。
21行目: ボタンの枠線を設定(少し濃い青で、60%の透明度)。
22行目: #333333;の省略形。
23行目: ボタンの角を丸くする。
24行目: ホバー時にマウスカーソルが指マークになる。
25行目: 色や透明度が滑らかに変化するようにアニメーションを追加。
26行目: ボタンを70%の透明度に設定。

29行目: ボタンにマウスを乗せた時のスタイルを変えるためのもの。
30行目: ホバー時のボタンの背景色の設定。
31行目: ホバー時のボタン自体を完全に不透明にして、目立たせる。

※RGBA: R(Red),G(Green),B(Blue),A(Alpha)という3つの基本色に加えAlphaという透明度
を示すチャンネルから構成されている。色(RGB)の強さを0~255で表現する。
ここでは青(255)が基調となっている。
*/