/* 基本的なリセットと設定 */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* モダンなフォント指定 */
    line-height: 1.6;
    background-color: #f8f9fa; /* 少し明るい背景色 */
    color: #343a40; /* 基本の文字色 */
    display: flex; /* コンテナを中央揃えにするため */
    justify-content: center; /* コンテナを水平中央揃え */
    align-items: center; /* コンテナを垂直中央揃え (コンテンツが短い場合に有効) */
    min-height: 100vh; /* 画面の高さいっぱいに表示 */
    padding: 20px; /* 画面端の余白 */
    box-sizing: border-box; /* paddingを含めて幅計算 */
}

/* 全体を囲むコンテナ */
.container {
    background-color: #ffffff; /* 白い背景 */
    padding: 30px 40px;
    border-radius: 8px; /* 角を少し丸める */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* 軽い影 */
    max-width: 700px; /* 最大幅を設定 */
    width: 100%; /* 幅は基本100% */
    text-align: center; /* コンテナ内の要素を中央揃え */
    box-sizing: border-box;
}

/* ヘッダー（ロゴ部分） */
.site-header {
    margin-bottom: 30px;
}

.logo {
    max-width: 150px; /* ロゴの最大幅 */
    height: auto; /* 高さは自動調整 */
    display: block; /* 中央揃えのため */
    margin: 0 auto; /* 中央揃え */
}

/* メインコンテンツ */
.content {
    text-align: left; /* 本文は左揃え */
    margin-bottom: 30px;
}

.content h1 {
    font-size: 1.8em; /* 見出しのサイズ */
    color: #dc3545; /* 少し強調する赤系の色 (注意を引くため) */
    margin-bottom: 25px;
    text-align: center; /* 見出しは中央揃え */
    border-bottom: 1px solid #dee2e6; /* 下線 */
    padding-bottom: 15px; /* 下線とのスペース */
}

.content p {
    margin-bottom: 1em; /* 段落間のスペース */
    font-size: 1em; /* 標準の文字サイズ */
}

.content strong {
    color: #212529; /* 強調文字の色 */
    font-weight: 600; /* 少し太く */
}

/* フッター */
.site-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6; /* 上線 */
    text-align: center;
    font-size: 0.9em;
    color: #6c757d; /* 少し薄いグレー */
}

/* レスポンシブ対応 (画面幅が小さい場合) */
@media (max-width: 600px) {
    .container {
        padding: 20px;
    }

    .content h1 {
        font-size: 1.5em;
    }

    .content p {
        font-size: 0.95em;
    }
}