/* ベーススタイル */
body {
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'BIZ UDPMincho', 'Meiryo', serif; /* 明朝体を優先し、代替フォントも指定 */
    line-height: 1.6;
    color: #333;
    background-color: white; /* 背景色を白に指定 */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased; /* フォントを滑らかに表示 */
    text-rendering: optimizeLegibility; /* 可読性を最適化 */
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: #0056b3; /* リンクのデフォルト色 */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* 画像の不要な下余白を削除 */
}

/* ヘッダー */
.header {
    text-align: center;
    padding: 30px 0 20px;
}

.header .logo {
    max-width: 400px;
    margin: 0 auto 15px; /* ロゴの下に余白 */
}

.header .divider-line {
    max-width: 400px;
    margin: 0 auto;
}

/* 主要コンテンツ */
.main-content {
    padding: 30px 0;
}

.top-section {
    text-align: center;
    margin-bottom: 40px;
}

.assoc-info {
    font-size: 1.1em;
    color: #240aea; /* 元のHTMLの青色を再現 */
    margin-bottom: 20px;
    font-weight: bold;
}

.assoc-info a {
    color: #240aea;
    text-decoration: none;
}

.main-message {
    font-size: 1.3em;
    color: black; /* 元のHTMLの黒色を再現 */
    margin-bottom: 30px;
    line-height: 1.8; /* 行間を広げて読みやすく */
}

.main-message p {
    margin: 0;
    padding: 0;
}

.copyright-info {
    font-size: 0.95em;
    color: black;
    margin-bottom: 40px;
    line-height: 1.5;
}

/* 主要リンクのグリッドレイアウト */
.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* レスポンシブなカラム */
    gap: 25px; /* グリッド間のスペース */
    margin-bottom: 50px;
}

.grid-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.50);
}

.grid-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #333;
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
}

.grid-link img {
    margin-bottom: 15px;
    max-height: 100px; /* アイコン画像の最大高さ */
    width: auto;
}

.grid-item.wide-item {
    grid-column: span 1; /* デフォルトは1カラム */
}

/* 「最新記事」リンクの特別なスタイル調整 */
.grid-item.wide-item .grid-link {
    flex-direction: row; /* 横並び */
    justify-content: center;
    gap: 15px;
    font-size: 1.2em; /* 少し大きめに */
}

.grid-item.wide-item .item-icon {
    margin-bottom: 0;
    max-height: 80px; /* 適切なサイズに調整 */
}


.link-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.large-text {
    font-size: 1.2em;
    color: #0056b3; /* リンクの文字色 */
}

/* 関連リンク（旧テーブル右側）のスタイル */
.related-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 左寄せ */
    padding: 20px 30px; /* 左右のパディングを増やす */
}

.related-links a {
    margin-bottom: 10px;
    font-size: 1.2em; /* 少し大きめに */
    color: #0056b3;
    font-weight: bold;
}

.related-links a:last-child {
    margin-bottom: 0;
}

/* ページ下部 */
.bottom-section {
    text-align: center;
    margin-bottom: 25px;
}

.association-logo img {
    max-width: 200px;
    margin: 0 auto 30px;
}

.contact-footer {
    font-size: 1.1em;
    color: black;
    line-height: 1.7;
    margin-bottom: 40px;
}

.contact-footer p {
    margin: 0;
}

.contact-footer a {
    color: #0056b3;
    font-weight: bold;
}

.bottom-wide-image {
    max-width: 700px;
    margin: 0 auto;
}

/* フッター */
.footer {
    padding: 20px 0;
    text-align: center;
    background-color: rgb(0,0,0); /* ブラックのフッター */
    border-top: 1px solid #ddd;
    color: rgb(255,255,255);
    font-size: 0.9em;
}

/* 視覚的に非表示にするがスクリーンリーダーには読み込ませるクラス */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .link-grid {
        grid-template-columns: 1fr; /* 1カラム表示 */
    }

    .grid-item.wide-item .grid-link {
        flex-direction: column; /* 縦並びに戻す */
        gap: 0;
    }

    .grid-item.wide-item .item-icon {
        margin-bottom: 15px; /* 下に余白を戻す */
    }

    .related-links {
        align-items: center; /* 中央寄せ */
    }

    .related-links a {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .header .logo {
        max-width: 300px;
    }

    .main-message {
        font-size: 1.1em;
    }

    .grid-link {
        font-size: 1em;
    }

    .large-text {
        font-size: 1.1em;
    }

    .contact-footer {
        font-size: 1em;
    }

    /* レスポンシブデザイン */
@media (max-width: 768px) {
    /* 既存のコードはそのまま */
    .link-grid {
        grid-template-columns: 1fr; /* 1カラム表示 */
    }

    .grid-item.wide-item .grid-link {
        flex-direction: column; /* 縦並びに戻す */
        gap: 0;
    }

    .grid-item.wide-item .item-icon {
        margin-bottom: 15px; /* 下に余白を戻す */
    }

    .related-links {
        align-items: center; /* 中央寄せ */
    }

    .related-links a {
        font-size: 1.1em;
    }

    /* ここから追加・修正するコード */
    .bottom-wide-image {
        max-width: 100%; /* スマートフォンでは画面幅に合わせる */
        /* height: auto; は既に img { ... } に定義されているため不要 */
    }

    /* 意図しない横スクロールを防ぐため、ボディ要素に水平方向のオーバーフローを隠す設定 */
    body {
        overflow-x: hidden;
    }
}


}