/* ==========================================================
   File: /common/css/layout.css
   Project: Karuizawa Symphonic Chorus Website
   Revision: Rev.F (2025-10-29)
   Description:
     全体レイアウト・段組・ヘッダー／フッター構造設定。
   ========================================================== */

/* ---- 全体 ---- */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ---- ヘッダー ---- */
header#top-header,
header {
	background: #fff;
	border-bottom: 1px solid #ccc;
	padding: 0.6em 1em;
	text-align: center;
	position: relative;
	z-index: 100;
}

header h1 {
	font-size: 1.5em;
	font-weight: 600;
	margin: 0.2em 0;
}

header h1 small {
	display: block;
	font-size: 0.65em;
	color: #666;
}

header h1 em {
	font-style: normal;
	color: #c00030;
}

/* ---- タイトル画像エリア ---- */
#slender {
	position: relative;
	text-align: center;
	margin-bottom: 1em;
}
#slender img {
	width: 100%;
	height: auto;
}
#slender h1 {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255,255,255,0.95);
	font-size: 1.8em;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#slender span {
	display: block;
	font-size: 0.85em;
	color: rgba(255,255,255,0.9);
}

/* ---- メイン ---- */
#contents {
	flex: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.2em 1.5em;
}

/* ---- フッター ---- */
footer {
	background: #202020;
	color: #ccc;
	font-size: 0.9em;
	text-align: center;
	padding: 2em 1em;
	margin-top: 3em;
}

footer a {
	color: #aaa;
	text-decoration: none;
}
footer a:hover {
	color: #fff;
	text-decoration: underline;
}