@charset "UTF-8";
/*
* 全体設定とリセット
*/
body {
	font-family: 'Noto Sans JP', sans-serif; /* 日本語フォントを優先 */
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background-color: #f8f9fa; /* やや明るめの背景色 */
	color: #343a40; /* ダークグレーの文字色 */
	display: flex; /* bodyをFlexコンテナにして、コンテンツを垂直方向に並べる */
	flex-direction: column; /* 要素を縦に並べる */
	min-height: 100vh; /* 画面の高さ全体を使う */

}

h1, h2, h3 {
	/*  color: #212529;より濃い見出し色 */
	color: #0056b3; /* 　説明のタイトル色 濃い青*/
	text-align: center;
	margin-top: 0;
}
table {
	width: 95%; /* テーブルの幅を親要素に合わせる */
	border-collapse: collapse; /* セルの境界線を結合 */
	border: 1px solid #ccc; /* テーブル全体の外枠 */
  }

th, td {
	border: 1px solid #ccc; /* 各セルの境界線 */
	padding: 8px 12px; /* 上下左右のパディング */
  }

  th {
	background-color: #f2f2f2; /* ヘッダーの背景色 */
	font-weight: bold; /* ヘッダーの文字を太字に */
	text-align: center; /* テキストを左揃え */
}
  td {
	text-align: left; /* テキストを左揃え */
}

img {
	max-width: 90%;
	height: auto;
}

blockquote {
	background-color: #fdfcfc; /* 薄い背景色 */
	padding: 1.5em; /* 内側の余白 */
	border-radius: 5px; /* 角を丸くする */
	margin: 1em 0; /* 上下の余白 */
}


.right-align {
  text-align: right;	 /* テキストを右揃え p class="right-align"　*/
}


/*
* ヘッダー
*/
.header {
	background-color: #007bff; /* 青系の背景色 */
	color: white;
	padding: 1.0em 1em;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.header h1 {
	margin: 0;
	font-size: 2em;
	color: white; /* ヘッダーのタイトルも白色に */
}

/*
* メインコンテンツエリア
*/
.main-content {
	flex: 1; /* 残りのスペースを全て占有し、フッターを最下部に押し出す */
	max-width: 900px; /* 最大幅を設定 */
	margin: 40px auto; /* 上下左右中央寄せ */
	padding: 20px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/*
* 年表のリストコンテナ
*/
.timeline-events {
	list-style: none; /* デフォルトのリストマーカーを非表示に */
	padding: 0;
	margin: 0;
	position: relative; /* 疑似要素の基準位置 */
}

/* タイムラインの縦線 */
.timeline-events::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%; /* デスクトップでは中央に配置 */
	width: 2px;
	background-color: #dee2e6; /* 薄いグレーの線 */
	transform: translateX(-50%);
	z-index: 0;  /*イベントの後ろに配置 */
}

/*
* 各タイムラインイベント
*/
.timeline-event {
	position: relative;
	margin-bottom: 50px; /* 各イベント間の下マージン */
	padding: 20px;
	background-color: #f0f0f0; /* イベントごとの背景色 */
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(226, 226, 226, 0.06);
	display: flex; /* Flexboxで年と説明を並べる */
	align-items: flex-start;
	z-index: 1; /* 線よりも手前に表示 */
}


/* イベントの年 */
.event-year {
	flex: 0 0 120px; /* 固定幅 */
	font-weight: 700; /* 太字 */
	font-size: 1.3em;
	color: #495057; /* やや濃いグレー */
	text-align: right;
	padding-right: 30px; /* 説明との間の余白 */
}

/* イベントの説明 */
.event-description {
	flex: 1; /* 残りのスペースを埋める */
	padding-left: 30px;
	border-left: 1px solid #ced4da; /* 説明の左側に薄い線 */
}


.event-description h2 {
	margin-top: 0;
	font-size: 1.1em;
	color: #0056b3; /* 説明のタイトル色 濃い青*/
	margin-bottom: 10px;
}

.event-description p {
	margin-bottom: 0;
	font-size: 0.95em;
}

/*
* フッター
*/
.footer {
	background-color: #343a40; /* ダークな背景色 */
	color: white;
	text-align: center;
	padding: 1.5em 1em;
	margin-top: auto; /* main-contentが全てを占有した後、フッターを最下部に配置 */
}

.footer p {
	margin: 0;
	font-size: 0.9em;
}

/*
* レスポンシブ対応 (メディアクエリ)
* 画面幅が768px以下のデバイス（タブレット、スマートフォン）向け
*/
@media (max-width: 768px) {
	.header h1 {
		font-size: 1.6em;
	}

	.main-content {
		margin: 20px auto;
		padding: 15px;
		width: calc(100% - 40px); /* 左右に20pxの余白を確保 */
		box-sizing: border-box; /* パディングとボーダーを幅に含める */
	}

	/* タイムラインの縦線を左端に移動 */
	.timeline-events::before {
		left: 20px; /* 左端から20pxの位置 */
		transform: translateX(0);
	}

	/* 各イベントのレイアウトを縦並びに変更 */
	.timeline-event {
		flex-direction: column; /* 年と説明を縦に並べる */
		align-items: flex-start; /* 左寄せ */
		padding: 15px;
		margin-left: 40px; /* 縦線のために左にスペースを空ける */
		margin-right: 0;
		widtd: auto; /* 幅を自動調整 */
	}

	/* 年の表示位置を調整 */
	.event-year {
		flex: none; /* 幅の固定を解除 */
		widtd: auto; /* 幅を内容に合わせる */
		text-align: left; /* 左寄せ */
		padding-right: 0;
		margin-bottom: 8px; /* 説明との間のスペース */
		font-size: 1.1em;
	}

	/* 説明のスタイル調整 */
	.event-description {
		padding-left: 0; 
		border-left: none;/* 左側の区切り線をなくす */
	}

	/* タイムラインの点を左の線上に移動 */
	.timeline-event::after {
		left: 20px; /* 縦線と同じ位置 */
		transform: translateX(-50%); /* 点を線に合わせる */
	}
}

/* さらに小さい画面（スマートフォン縦向きなど）向け */
@media (max-widtd: 480px) {
	.header {
		padding: 1em 0.5em;
	}
	.header h1 {
		font-size: 1.4em;
	}
	.main-content {
		margin: 15px auto;
		padding: 10px;
		widtd: calc(100% - 30px); /* 左右に15pxの余白 */
	}
	.timeline-event {
		margin-left: 30px; /* さらに左のスペースを詰める */
		padding: 10px;
	}
	.timeline-events::before,
	.timeline-event::after {
		left: 15px; /* 線と点の位置をさらに左に詰める */
	}
	.event-year {
		font-size: 1em;
	}
	.event-description h2 {
		font-size: 1em;
	}
	.event-description p {
		font-size: 0.85em;
	}
}