/* 見た目の設定（ここは一度設定すれば触らなくてOK） */
body {
    font-family: sans-serif;
    background: #f0f2f5;
    padding: 10px;
    color: #333;
}

h1 {
    text-align: center;
    color: #2c3e50;
}

h2 {
    border-left: 5px solid #3498db;
    padding-left: 10px;
    margin-top: 40px;
    color: #2c3e50;
}

/* グリッド全体のルール */
.grid {
    display: flex;
    /* gridからflexに変更すると制御しやすくなります */
    flex-wrap: wrap;
    /* 幅がいっぱいになったら改行する */
    gap: 15px;
    /* ボタン同士の間隔 */
    justify-content: flex-start;
    /* 左寄せ（余白があっても中央に寄せたり伸ばしたりしない） */
}

/* ボタン（カード）自体のルール */
.card {
    /* calc((100% - 隙間の合計) / 3) で計算します。
            隙間は15pxが2箇所あるので 30px。
            「3分の1弱」にするため、そこからさらに少し引くと余裕が出ます。
        */
    width: calc((100% - 40px) / 3);

    /* 念のため、狭くなりすぎない・広くなりすぎない設定 */
    min-width: 200px;
    box-sizing: border-box;
    /* パディングを含めて幅を計算する */

    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    background: #ebf5fb;
}

.icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.name {
    font-weight: bold;
}

header {
    background: white;
    padding: 8px 20px;
    margin: -20px -20px 20px -20px;
}

.site-title {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
}

nav {
    display: flex;
    gap: 25px;
}

nav a {
    text-decoration: none;
    color: #3498db;
    font-weight: bold;
}

.content-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

.current {
    font-weight: bold;
    text-decoration: underline;
}

.site-description {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
}