@charset "UTF-8";

/**
 * E&Rs Business Overview Styles
 * 垂直スタック構造：文字の衝突を完全に回避
 * 1カラム・ワイドレイアウト：エグゼクティブな視認性を確保
 */

:root {
    --bg-color: #f8faff;
    --txt-black: #111111;    /* プロダクト名 */
    --txt-dark-blue: #142850; /* 説明文 */
    --txt-light-blue: #0033cc; /* カテゴリー・AI関与度 */
    --line-color: rgba(0, 51, 204, 0.15);
}

body {
    background-color: var(--bg-color);
}

/* カテゴリー・フィルタナビゲーション */
.category-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 0 auto 50px;
    flex-wrap: wrap;
    max-width: 1000px;
}

.filter-btn {
    background: #fff;
    border: 1px solid var(--line-color);
    padding: 8px 22px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #000000 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--txt-light-blue);
    color: #ffffff !important;
    border-color: var(--txt-light-blue);
    box-shadow: 0 4px 15px rgba(0, 51, 204, 0.15);
}

/* ★修正箇所：グリッドを解除し、1カラムに変更 */
.business-grid {
    display: block; /* 2カラムを解除 */
    max-width: 900px; /* カードの最大幅に合わせる */
    margin: 0 auto;
}

.card-link {
    text-decoration: none;
    display: block;
    margin-bottom: 30px; /* カード間の余白 */
}

/* ★修正箇所：カードをワイド化し、ゆとりを持たせる */
.wide-card { 
    padding: 35px; /* 余白をさらに広げて高級感をアップ */
    border: 1px solid #eee; 
    background: #fff; 
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    border-radius: 8px; /* 角を少し丸める */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.wide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 51, 204, 0.1);
    border-color: var(--txt-light-blue);
}

/* カテゴリーラベル */
.label {
    display: block;
    color: var(--txt-light-blue) !important;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* プロダクト名 */
.card-title {
    color: var(--txt-black) !important;
    font-weight: 800; 
    font-size: 22px; /* 少し大きくして視認性アップ */
    margin: 0 0 15px 0;
    line-height: 1.3;
}

/* 説明文 */
.card-text {
    color: var(--txt-dark-blue) !important;
    font-size: 15px; /* 14pxから15pxへ。基金の担当者が読みやすいサイズに */
    line-height: 1.8;
    margin: 0 0 25px 0;
}

/* AI関与度 */
.ai-status-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--txt-light-blue);
    margin-bottom: 8px;
}

.ai-bar {
    height: 4px; /* 少し太くして存在感を出す */
    background: var(--txt-light-blue);
    opacity: 0.2;
    width: 100%;
    border-radius: 2px;
}

/* アイコン設定 */
.label::before {
    margin-right: 8px;
    font-size: 1.2em;
}
[data-category="Monitoring"] .label::before { content: "📈"; }
[data-category="Modernization"] .label::before { content: "⚙️"; }
[data-category="Strategy"] .label::before { content: "🗺️"; }
[data-category="Education"] .label::before { content: "🎓"; }
[data-category="Management"] .label::before { content: "📊"; }
[data-category="Business"] .label::before { content: "💼"; }
[data-category="Governance"] .label::before { content: "🛡️"; }

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .wide-card { padding: 20px; }
    .card-title { font-size: 18px; }
}