/* 基本的なリセットとフォント設定 */
body {
    font-family: sans-serif; /* 好みのフォントに変更してください */
    line-height: 1.6;
    background-color: #f8f9fa; /* 背景色 */
    color: #333; /* 基本の文字色 */
    margin: 0;
    padding: 20px; /* ボディ全体の余白 */
    display: flex; /* 中央揃えのため */
    justify-content: center; /* 中央揃えのため */
    align-items: flex-start; /* 上から配置 */
    min-height: 100vh; /* 画面の高さ */
}

/* コンテンツ全体のコンテナ */
.container {
    background-color: #ffffff; /* コンテナの背景色 */
    padding: 30px 40px; /* コンテナ内の余白 (上下 左右) */
    border-radius: 8px; /* 角丸 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
    max-width: 700px; /* コンテナの最大幅 */
    width: 100%; /* 幅を確保 */
    box-sizing: border-box; /* paddingを含めた幅計算 */
    margin-top: 30px; /* 上部の余白 */
}

/* ヘッダー (必要であれば) */
header {
    /* border-bottom: 1px solid #eee; */
    /* margin-bottom: 20px; */
    /* padding-bottom: 10px; */
    /* text-align: right; */ /* 画像の Home/Projects のような配置 */
}

header nav a {
    /* margin-left: 15px; */
    /* color: #555; */
    /* text-decoration: none; */
}

header nav a:hover {
    /* text-decoration: underline; */
}


/* メインコンテンツ */
main {
    /* 特に追加のスタイルは不要 */
}

/* プロフィールセクション */
.profile h1 {
    font-size: 2.5em; /* 名前の文字サイズ */
    color: #2c3e50; /* 名前の色 (濃い青灰色) */
    margin-top: 0;
    margin-bottom: 10px;
}

.profile p {
    font-size: 1.1em; /* 自己紹介文の文字サイズ */
    color: #555; /* 自己紹介文の色 */
    margin-bottom: 30px; /* 自己紹介文の下の余白 */
}

/* リンク集セクション */
.links h2 {
    font-size: 1.8em; /* 「リンク集」の見出しサイズ */
    color: #34495e; /* 見出しの色 (少し濃い青灰色) */
    border-bottom: 2px solid #eee; /* 下線 */
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.links ul {
    list-style: none; /* リストの点を消す */
    padding: 0;
    margin: 0;
}

.links li {
    margin-bottom: 10px; /* 各リンク間の余白 */
}

.links a {
    color: #3498db; /* リンクの色 (青) */
    text-decoration: none; /* 下線を消す */
    font-size: 1.1em;
    transition: color 0.3s ease; /* ホバー時の色変化を滑らかに */
}

.links a:hover {
    color: #2980b9; /* ホバー時のリンクの色 (少し濃い青) */
    text-decoration: underline; /* ホバー時に下線を表示 */
}

/* フッター (必要であれば) */
footer {
    /* margin-top: 30px; */
    /* text-align: center; */
    /* color: #aaa; */
    /* font-size: 0.9em; */
}

/* レスポンシブ対応 (画面幅が狭い場合) */
@media (max-width: 600px) {
    body {
        padding: 10px; /* 狭い画面での余白を減らす */
    }
    .container {
        padding: 20px; /* コンテナ内の余白を減らす */
        margin-top: 15px;
    }
    .profile h1 {
        font-size: 2em; /* 文字サイズを調整 */
    }
    .profile p {
        font-size: 1em;
    }
    .links h2 {
        font-size: 1.5em;
    }
    .links a {
        font-size: 1em;
    }
}