@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; /* 画面の高さ全体を使う */
        }


/* ヘッダー */
header {
	background-color: #2c3e50; /* ダークネイビー */
	color: #fff;
	padding: 20px 30px;
	text-align: center;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

header h1 {
	margin: 0;
	font-size: 2.2em;
	letter-spacing: 1px;
}

header p {
	margin: 5px 0 0;
	font-size: 0.9em;
	opacity: 0.8;
}

/* ナビゲーションメニュー */
nav {
	background-color: #34495e; /* 少し明るいネイビー */
	padding: 10px 0;
	text-align: center;
}

nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex; /* 横並び */
	justify-content: center; /* 中央配置 */
	flex-wrap: wrap; /* 小さい画面で折り返す */
}

nav ul li {
	margin: 0 15px;
}

nav ul li a {
	color: #ecf0f1; /* 明るいグレー */
	text-decoration: none;
	padding: 8px 15px;
	display: block;
	transition: background-color 0.3s ease;
	border-radius: 4px;
}

nav ul li a:hover,
nav ul li a.active {
	background-color: #2c3e50; /* ホバーでヘッダーと同じ色に */
}




        h1, h2, h3 {
            /*  color: #212529;より濃い見出し色 */
            color: #0056b3; /* 　説明のタイトル色 濃い青*/
            text-align: center;
            padding: 5px;

        }
		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: #f9f9f9; /* 薄い背景色 */
			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.5em 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: #e9ecef; /* イベントごとの背景色 */
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 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;
            }
        }