/* === ルートindex.html専用スタイル (Style_root.css) === */
body {
    font-family: 'Noto Sans JP', Arial, sans-serif;
    background-color: #f4f6f8; /* 背景色を少し柔らかく */
    color: #333;
    line-height: 1.7; /* 少し調整 */
    margin: 0; /* bodyのデフォルトマージンをリセット */
    padding: 0; /* bodyのデフォルトパディングをリセット */
}

.page-container {
    max-width: 1200px; /* ページ全体の最大幅 */
    margin: 20px auto; /* 上下マージンと左右中央寄せ */
    padding: 20px;
    background-color: #fefefe; /* コンテナ背景色 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* ヘッダー */
.site-header {
    text-align: center;
    padding: 40px 20px; /* 上下に十分なパディングをとる */
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 30px;
    background-size: cover; /* ヘッダー全体を覆うように画像を拡大縮小 */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;
    color: #fff; /* 背景画像によっては文字色を白などに変更する必要がある */
}

.site-header .header-content h1 {
    font-size: 2.9em; /* 背景画像に合わせて調整することがある */
    color: #ffffff; /* 背景画像に合わせて白に変更 (例) */
    margin: 0;
    /* テキストに影をつけて読みやすくする (任意) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* メインレイアウト (2カラム) */
.main-layout {
    display: flex;
    gap: 30px; /* カラム間の隙間 */
}

.left-pane {
    width: 250px; /* 左ペインの幅を固定 */
    flex-shrink: 0; /* 幅が縮まないように */
}

.right-pane {
    flex-grow: 1; /* 右ペインが残りのスペースを埋める */
    min-width: 0; /* flexアイテムが内容によって無限に広がるのを防ぐ */
}

/* プロフィールセクション */
.profile-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 30px;
    text-align: center;
}

.profile-image-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px auto;
    border: 3px solid #005ab3;
}

.profile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info h2 {
    font-size: 1.0em; /* 現在のサイズ、必要に応じて調整 */
    color: #005ab3;
    margin-top: 0;
    margin-bottom: 5px;
    border-bottom: none;
    padding-bottom: 0;
    word-break: break-all; /* 単語の途中でも折り返すようにして、はみ出しを防ぐ */
}

.profile-info .subtitle {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 0;
}

/* リンクセクション */
.links-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.links-section h3 {
    font-size: 1.3em;
    color: #005ab3;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
}

.links-section ul {
    list-style-type: none;
    padding-left: 0;
    margin:0;
}

.links-section ul li {
    margin-bottom: 10px;
}

.links-section ul li a {
    text-decoration: none;
    color: #0056b3;
    font-weight: 600;
    display: block;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.links-section ul li a:hover {
    color: #3498db;
}

/* 右ペインのコンテンツ一覧タイトル */
.right-pane > h2 {
    font-size: 2em;
    color: #005ab3;
    text-align: left;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px;
}

/* カテゴリーグリッド */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 25px;
}

.category-item {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    /* category-item::before の padding-top: 100% は削除されている前提です。 */
    /* もしまだファイルに残っている場合は、このブロックごと削除してください。 */
    /* .category-item::before { content: ""; display: block; padding-top: 100%; } */
}

.category-item a {
    text-decoration: none;
    color: inherit;
    /* NEW/CHANGED: `a`タグをflexコンテナにし、その子要素（画像とタイトル）を縦に並べる */
    display: flex;
    flex-direction: column;
    /* NEW/CHANGED: `a`タグが親要素（`category-item`）の高さ全体を占めるようにする */
    height: 100%;
    width: 100%;
    /* REMOVED: 以前の `position: absolute;` 関連のスタイルは削除しました。 */
}

.category-item .image-wrapper {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 のアスペクト比 */
    overflow: hidden;
    background-color: #f0f0f0;
    flex-shrink: 0; /* 画像が縮まないようにする */
}

.category-item .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-item h3 {
    /* フォントサイズをビューポート幅に応じて調整し、最小・最大サイズを設定 */
    font-size: clamp(0.9em, 2.8vw, 1.3em); /* 最小0.9em, 最大1.3em, 画面幅の2.8% */
    color: #005ab3;
    padding: 15px;
    margin: 0;
    border-top: 1px solid #f0f0f0;
    flex-grow: 1; /* タイトルが残りのスペースを埋めるようにする */
    display: flex; /* 中央揃えのためにflexを使用 */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    text-align: center; /* （古いブラウザ向けなどの）中央揃えのフォールバック */
    word-break: break-word; /* 長い単語でも改行を許可 */
    overflow-wrap: break-word; /* 新しいCSSプロパティ */
}

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

/* フッター */
footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    font-size: 0.9em;
    color: #555;
}

/* === レスポンシブデザインの調整 === */
@media (max-width: 768px) {
    .page-container {
        margin: 10px;
        padding: 10px;
    }

    .main-layout {
        flex-direction: column;
        gap: 20px;
    }

    .left-pane {
        width: 100%;
    }

    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
    }

    .site-header .header-content h1 {
        font-size: 2em;
    }

    .profile-info h2 {
        font-size: 1.1em;
    }

    .profile-info .subtitle {
        font-size: 0.85em;
    }

    .links-section h3, .right-pane > h2 {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: 1fr; /* 非常に狭い画面では1列にする */
    }
    .category-item h3 {
        font-size: clamp(1.1em, 5vw, 1.6em); /* さらに狭い画面でのフォントサイズ調整 */
    }
}