/* ===== ダークモード対応 ===== */
:root {
	--bg-color: #f2f2f7;
	--text-color: #222222;
	--box-bg: #ffffff;
	--border-color: #ccc;
	--hero-bg: #ffffff;
	--h1-color: #2a4b8d;
	--link-color:    #2a4b8d;
	--visited-color: #6f5499;
	--hover-color:   #1e3a6d;
	--active-color:  #d1495b;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #121212;
		--text-color: #f0f0f0;
		--box-bg: #1e1e1e;
		--border-color: #444;
		--hero-bg: #222;
		--h1-color: #9CDCFE;
		--link-color:    #9CDCFE;
		--visited-color: #6f5499;
		--hover-color:   #1e3a6d;
		--active-color:  #d1495b;
	}
}


/* ===== 全体共通スタイル ===== */
body {
	font-family: sans-serif;
	max-width: 800px;
	margin: auto;
	padding: 2em;
	background-color: var(--bg-color);
	color: var(--text-color);
	position: relative;
}

h1 {
	font-size: 2em;
	color: var(--h1-color);
	margin-bottom: 0.2em;
}

h2 {
	font-size: 2em;
	color: var(--h1-color);
	margin-bottom: 0.2em;
}

/* ===== 言語切り替えスイッチ ===== */
.lang-switch {
	position: fixed;
	top: 1em;
	right: 1em;
	background: var(--bg-color);
	padding: 0.5em 1em;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}
.lang-switch select {
	font-size: 1em;
	padding: 0.2em;
	border-radius: 4px;
	border: 1px solid #ccc;
}

/* 初期表示は日本語、英語は非表示 */
.lang-ja {
  display: block;
}
.lang-en {
  display: none !important;
}

/* ===== ヒーローセクション ===== */
.hero {
	margin-top: 80px;
	text-align: center;
	padding: 3em 1em;
	background-color: var(--hero-bg);
	border-radius: 10px;
	transition: background-color 0.3s;
}
.hero h1 {
	font-size: 2em;
	color: var(--h1-color);
}

/* ===== プロフィール画像 ===== */
.profile-image {
	display: block;
	margin: 2em auto 0 auto;
	max-width: 600px;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===== プロフィールボックス ===== */
.profile-box {
	background-color: var(--hero-bg);
	padding: 2em;
	margin: 3em auto;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	max-width: 800px;
}
.profile-box h1 {
	margin-top: 0;
	color: var(--h1-color);
}
.profile-box p,
.profile-box ul {
	line-height: 1.6;
	margin: 0.5em 0;
}
.profile-box strong {
	font-weight: bold;
}
.profile-box a {
	color: var(--link-color);
}

/* ===== タイムライン形式 ===== */
.timeline {
	list-style: none;
	padding-left: 0;
	margin: 2em 0;
}
.timeline li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-bottom: 0.8em;
}
.timeline .date {
	min-width: 240px;	 /* 必要に応じて調整可能 */
	font-weight: bold;
	white-space: nowrap;	/* 改行を抑制 */
}
.timeline .desc {
	flex: 1;
}

/* ===== ドロワーナビゲーション（サイドメニュー） ===== */

/* ハンバーガーボタン */
.menu-btn {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1001;
	font-size: 1.5rem;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--text-color);
}

/* サイドバー本体 */
#sidebar {
	position: fixed;
	top: 0;
	left: -260px;            /* 非表示状態（幅 + マージン分） */
	width: 260px;
	height: 100%;
	padding: 2rem 0.5rem 1rem; /* 上:2rem、左右:1rem、下:1rem */
	background: var(--box-bg);
	color: var(--text-color);
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
	transition: left 0.3s ease;
	z-index: 1000;
	overflow-y: auto;
}
.sidebar-inner {
  padding: 2rem 0rem 0rem 1rem; /* ← これで文字だけ右下に寄る */
}
#sidebar.open {
	left: 0rem;             /* 表示位置 */
}

/* リスト全体のリセット */
#sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 各トップレベル項目 */
#sidebar > ul > li {
	margin: 0.75rem 0;
}

/* リンクスタイル */
#sidebar a {
	display: block;
	padding: 0.5rem 0;
	color: inherit;
	text-decoration: none;
}

/* ドロップダウン（details）全体 */
#sidebar details {
	margin: 0.75rem 0;
	padding: 0;
}

/* ドロップダウンの見出し */
#sidebar details summary {
	display: list-item;     /* ブラウザ既定の見た目を活かす */
	cursor: pointer;
	padding: 0.5rem 0;
	margin: 0;
}

/* ドロップダウン内リスト */
#sidebar details ul {
	list-style: none;
	margin: 0.5rem 0;
	padding-left: 1.5rem;   /* ネストインデント */
}

#sidebar details ul li {
	margin: 0.5rem 0;
}

/* ===== コンテンツボックス（.cv など） ===== */
.cv {
	background-color: var(--hero-bg);
	padding: 2rem;
	margin: 3rem auto;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	max-width: 800px;
}


.cv {
	background-color: var(--hero-bg);
	padding: 2em;
	margin: 3em auto;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	max-width: 800px;
} 
/* サイドバーの nav#sidebar に内側の余白を追加 */
#sidebar {
	/* 既存の padding や top の設定があると思うので、
	そこに padding-top を足す感じで調整 */
	padding-top: 2em;
}

@media (max-width:600px) {
	.timeline li {
		display: block;
	}
	.timeline .date,
	.timeline .desc {
		display: block;
		width: auto;
		margin-bottom: 0.4em;
	}
}