/* --- ページ全体と画像のスタイルは維持（中央寄せ、丸型など） --- */
body {
    background-color: #ADD8E6; 
    font-family: 'Inter', sans-serif;
    color: #333;
    padding: 20px;
    text-align: center;
}

h1 {
    color: #1a5c92; 
    text-align: center;
    padding-top: 20px;
}

img {
    width: 200px;
    height: auto;
    display: block; 
    margin: 0 auto 30px auto; 
    border-radius: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* --- ナビゲーション部分の新しいスタイル (立体感と均等幅を強化) --- */

nav {
    max-width: 800px; /* メニューの最大幅を広げる */
    margin: 30px auto; 
}

nav ul {
    list-style-type: none; 
    padding: 0;
    display: flex; 
    gap: 15px; /* ボタン同士の間隔 */
    justify-content: center; 
}

nav li {
    /* flex-basis: 0; と flex-grow: 1 の組み合わせで、均等な幅を強制 */
    flex-basis: 0; 
    flex-grow: 1; 
}

nav a {
    /* リンクの基本デザイン */
    text-decoration: none; 
    color: #333;
    background-color: #ffffff; 
    display: block; 
    padding: 15px 20px; /* パディングを増やしてボタンを大きくする */
    border-radius: 10px; 
    text-align: center;
    font-weight: 600; 
    
    /* ボタンを立体的に見せるための強い影 */
    box-shadow: 0 5px 0 #999; /* 下に濃いめの影（立体感のベース） */
    transition: all 0.1s ease; /* アニメーションの速度 */
}

/* ユーザーがマウスカーソルを合わせた時の効果 */
nav a:hover {
    box-shadow: 0 7px 0 #777; /* ホバー時に影を濃くする */
    transform: translateY(-2px); /* ボタンをわずかに上に移動 */
    background-color: #f0f0f0;
}

/* **【ハイライト】** ユーザーがクリックして押している間の効果 */
nav a:active {
    box-shadow: 0 2px 0 #666; /* 影を小さくして、ボタンが沈んだように見せる */
    transform: translateY(3px); /* ボタンを下に沈ませる */
    background-color: #e0e0e0;
}