:root {
            --primary-color: #005A9C;
            --secondary-color: #FF7F00;
            --dark-color: #1a202c;
            --light-color: #f7fafc;
            --gray-color: #718096;
            --bg-color: #f4f7fa;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
        }

        body {
            font-family: 'Noto Sans JP', sans-serif;
            margin: 0;
            background-color: var(--bg-color);
            color: var(--dark-color);
        }

        .dashboard-layout {
            display: flex;
            min-height: 100vh;
        }

        /* --- Sidebar --- */
        .sidebar {
            width: 260px;
            background-color: white;
            box-shadow: 2px 0 10px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            padding: 25px 0;
            position: fixed;
            height: 100%;
            z-index: 100;
        }
        .sidebar-header {
            padding: 0 25px 25px 25px;
            border-bottom: 1px solid #eef2f6;
        }
        .sidebar-logo {
            height: 50px;
        }
        .sidebar-nav {
            flex-grow: 1;
            list-style: none;
            padding: 20px 0;
            margin: 0;
        }
        .sidebar-nav a {
            display: flex;
            align-items: center;
            padding: 15px 25px;
            text-decoration: none;
            color: var(--gray-color);
            font-weight: 500;
            transition: all 0.3s;
            border-left: 4px solid transparent;
        }
        .sidebar-nav a:hover {
            background-color: var(--bg-color);
            color: var(--primary-color);
        }
        .sidebar-nav a.active {
            background-color: #e6f0ff;
            color: var(--primary-color);
            border-left-color: var(--primary-color);
            font-weight: 700;
        }
        .sidebar-nav a i {
            width: 30px;
            font-size: 1.1rem;
            margin-right: 10px;
        }

        /* --- Main Content --- */
        .main-content {
            flex-grow: 1;
            margin-left: 260px; /* Sidebar width */
            padding: 30px;
        }
        .main-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        .main-header h1 {
            margin: 0;
            font-size: 1.8rem;
        }
        .main-header h1 span {
            font-weight: 400;
            font-size: 1.2rem;
        }
        .user-profile {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .user-profile img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* --- Dashboard Grid --- */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto auto auto;
            gap: 25px;
        }
        .card {
            background-color: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .card-header {
            display: flex; /* ヘッダー全体のレイアウトを維持 */
            align-items: center; /* 垂直方向の中央揃え */
            justify-content: space-between; /* 三点リーダーを右端に配置 */
            margin-bottom: 20px;
            /* gap: 15px; */ /* これまでのgapは、h3内のFlexboxで調整するため削除またはコメントアウト */
        }

        .card-header h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
            flex-grow: 1; /* 利用可能なスペースを占有 */
            display: flex; /* h3をFlexboxコンテナにする */
            align-items: center; /* h3内のアイテムを垂直方向の中央揃え */
            gap: 10px; /* h3内のアイテム（アイコン、テキスト、ボタン）間の間隔 */
            /* 必要に応じて以前のwhite-space, overflow, text-overflowを削除またはコメントアウト */
            /* white-space: nowrap; */
            /* overflow: hidden; */
            /* text-overflow: ellipsis; */
        }

        /* h3内のアイコンの調整（必要であれば） */
        .card-header h3 i {
            flex-shrink: 0; /* アイコンが縮小しないようにする */
        }
        /* ヘッダー全体に対する三点リーダーの位置を調整 */
        .card-header > .fa-ellipsis { /* 最上位のfa-ellipsisのみを対象とする */
            flex-shrink: 0;
            margin-left: 15px; /* h3要素からの間隔を確保 */
        }
        .card-body {
            font-size: 0.95rem;
        }
        
        /* Specific Card Styles */
        .card-next-action { grid-column: 1 / 3; }
        .card-proposals { grid-column: 3 / 4; grid-row: 1 / 3; background: linear-gradient(135deg, var(--primary-color), #004080); color: white; }
        .card-calendar { grid-column: 1 / 2; grid-row: 2 / 4; }
        .card-care-circle { grid-column: 2 / 3; grid-row: 2 / 3; }
        .card-tasks { grid-column: 2 / 3; grid-row: 3 / 4; }

        /* Next Action Card */
        .action-list li {
            list-style: none;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .action-list li:last-child { border-bottom: none; }
        .action-icon {
            font-size: 1.5rem;
            color: var(--secondary-color);
        }

        /* Proposals Card */
        .proposals-body { text-align: center; }
        .proposals-body .proposal-count { font-size: 4rem; font-weight: 900; margin: 10px 0; }
        .proposals-body .btn-view {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            color: white;
            padding: 12px 25px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 15px;
            transition: background-color 0.3s;
        }
        .proposals-body .btn-view:hover { background: rgba(255,255,255,0.4); }

        /* Care Circle Card */
        .care-circle-list { display: flex; gap: 20px; align-items: center; justify-content: center; padding-top: 10px; }
        .care-member { text-align: center; }
        .care-member img { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 5px; }
        .care-member span { font-size: 0.9rem; font-weight: 500; }

        /* Calendar Card */
        .calendar table { width: 100%; border-collapse: collapse; text-align: center; }
        .calendar th, .calendar td { padding: 10px 5px; }
        .calendar td { font-weight: 500; }
        .calendar .event { background-color: var(--warning-color); color: white; border-radius: 50%; font-weight: bold; }

        /* Tasks Card */
        .task-list li { list-style: none; padding: 10px 0; display: flex; align-items: center; gap: 10px; }
        .task-list input[type="checkbox"] { width: 18px; height: 18px; }
        .task-list label { flex-grow: 1; }
        .task-list .due-date { font-size: 0.8rem; color: var(--gray-color); }

        /* --- Sidebar CTA for Community --- */
        .sidebar-cta {
            padding: 20px 25px;
            margin-top: auto; /* フッターの直前に配置するために追加 */
        }

        .cta-content {
            background-color: var(--bg-light-blue);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

        .cta-content i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .cta-content strong {
            display: block;
            font-size: 1rem;
            margin-bottom: 5px;
            color: var(--dark-color);
        }

        .cta-content p {
            font-size: 0.85rem;
            color: var(--gray-color);
            margin: 0 0 15px 0;
            line-height: 1.6;
        }

        .cta-content a {
            display: inline-block;
            background-color: var(--secondary-color);
            color: white;
            font-weight: bold;
            font-size: 0.9rem;
            text-decoration: none;
            padding: 8px 20px;
            border-radius: 50px;
            transition: background-color 0.3s, transform 0.2s;
        }

        .cta-content a:hover {
            background-color: #e07000;
            transform: translateY(-2px);
        }

        /* --- Admin Dashboard Specific Styles --- */
        .admin-dashboard-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: min-content;
            gap: 25px;
        }
        .kpi-card {
            background-color: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .kpi-card h4 {
            margin: 0 0 5px 0;
            font-size: 1rem;
            color: var(--gray-color);
            font-weight: 500;
        }
        .kpi-card .kpi-value {
            font-size: 2.2rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            line-height: 1.2;
        }
        .kpi-card .kpi-value span {
            font-size: 1rem;
            font-weight: 600;
        }
        .kpi-card .kpi-change {
            margin-top: 5px;
            font-size: 0.9rem;
            font-weight: bold;
            color: var(--success-color);
        }
        .kpi-value.danger { color: var(--danger-color); }
        .kpi-value.success { color: var(--success-color); }

        .card-roi-simulator { grid-column: 1 / 2; }
        .card-segments { grid-column: 2 / 4; }
        .card-trends { grid-column: 1 / 3; }
        .card-recommendations { grid-column: 3 / 4; }

        .secondary-text { color: var(--secondary-color); }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            transition: opacity .2s;
            margin: 20px 0;
        }
        .slider:hover { opacity: 1; }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
        }
        .slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
        }
        .roi-result {
            text-align: center;
            background: var(--bg-light-blue);
            padding: 15px;
            border-radius: 8px;
        }
        .roi-result small {
            color: var(--gray-color);
            font-size: 0.9rem;
        }
        .roi-result div {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--success-color);
        }
        .roi-result div strong {
            font-size: 2.5rem;
        }

        .segment-list, .recommend-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .segment-list li, .recommend-list li {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .segment-list li:last-child, .recommend-list li:last-child {
            border-bottom: none;
        }
        .severity-dot {
            flex-shrink: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-top: 5px;
        }
        .severity-dot.danger { background-color: var(--danger-color); }
        .severity-dot.warning { background-color: var(--warning-color); }
        .severity-dot.info { background-color: var(--primary-color); }
        .recommend-list i {
            color: var(--secondary-color);
            margin-top: 4px;
        }

        @media (max-width: 1200px) {
            .admin-dashboard-grid {
                grid-template-columns: 1fr 1fr;
            }
            .card-roi-simulator, .card-trends, .card-recommendations, .card-segments {
                grid-column: auto;
            }
        }
        @media (max-width: 768px) {
            .admin-dashboard-grid {
                grid-template-columns: 1fr;
            }
        }

        /* --- Proposal Comparison Modal --- */
        .proposal-comparison-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .provider-column {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
        }
        .provider-header {
            padding: 15px;
            border-bottom: 1px solid #e2e8f0;
        }
        .provider-header h4 {
            margin: 0 0 5px 0;
            font-size: 1.1rem;
            color: var(--primary-color);
        }
        .provider-rating {
            font-size: 0.9rem;
            color: var(--gray-color);
        }
        .provider-rating i {
            color: var(--warning-color);
        }
        .comparison-row {
            padding: 15px;
            border-bottom: 1px solid #e2e8f0;
            flex-grow: 1;
        }
        .comparison-row label {
            font-weight: bold;
            font-size: 0.8rem;
            color: var(--gray-color);
            display: block;
            margin-bottom: 5px;
        }
        .comparison-row p {
            margin: 0;
            font-size: 0.95rem;
        }
        .comparison-row ul {
            margin: 0;
            padding-left: 20px;
            font-size: 0.9rem;
        }
        .comparison-row .price {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--secondary-color);
        }
        .provider-footer {
            padding: 15px;
            background-color: var(--light-color);
            text-align: center;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .contact-btn {
            width: 100%;
            background-color: white;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        .contact-btn.primary,
        .contact-btn:hover {
            background-color: var(--primary-color);
            color: white;
        }
        .provider-column.featured {
            border: 2px solid var(--secondary-color);
            position: relative;
            box-shadow: 0 5px 20px rgba(255, 127, 0, 0.2);
        }
        .featured-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--secondary-color);
            color: white;
            font-size: 0.8rem;
            font-weight: bold;
            padding: 5px 15px;
            border-radius: 50px;
        }

        @media (max-width: 900px) {
            .proposal-comparison-grid {
                grid-template-columns: 1fr;
            }
        }

        /* --- Approved Badge in Modal --- */
        .approved-badge {
        display: inline-block;
        background-color: var(--success-color);
        color: white;
        font-size: 0.7rem;
        font-weight: bold;
        padding: 3px 6px;
        border-radius: 5px;
        margin-left: 5px;
        vertical-align: middle;
        }

        /* --- CSS-Only Modal Styles --- */
        /* モーダル本体のスタイル（通常時は非表示） */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.6);
            align-items: center;
            justify-content: center;
        }

        /* URLの#とIDが一致した時だけモーダルを表示する（JavaScriptの代わり） */
        .modal:target {
            display: flex;
        }

        /* モーダルのコンテンツ部分 */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 30px 40px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            text-align: left;
            position: relative;
            animation: slide-down 0.4s ease-out;
        }

        /* 提案比較モーダル用の横幅が広いスタイル */
        .modal-content.wide {
            max-width: 1000px;
        }

        /* モーダルのサブタイトル */
        .modal-subtitle {
            margin-top: -15px;
            margin-bottom: 30px;
            color: var(--gray-color);
            text-align: center;
        }

        /* 閉じるボタン（×）のスタイル */
        .close-btn {
            color: #aaa;
            position: absolute;
            top: 15px;
            right: 25px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            text-decoration: none; /* aタグの下線を消す */
        }
        .close-btn:hover,
        .close-btn:focus {
            color: black;
        }

        /* モーダル表示時のアニメーション */
        @keyframes slide-down {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* --- Trend Chart Styles --- */
        .trend-chart {
            position: relative;
            width: 100%;
            height: 150px;
            margin-bottom: 20px;
        }

        .chart-grid {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                linear-gradient(to right, #eef2f6 1px, transparent 1px);
            background-size: 100px 100%; /* X軸のグリッド間隔 */
        }

        .chart-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .chart-line {
            fill: none;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .line-blue { stroke: var(--primary-color); }
        .line-orange { stroke: var(--secondary-color); }

        .chart-points {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .chart-points span {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid white;
            transform: translate(-50%, -50%); /* 中央揃え */
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }
        .points-blue span { background-color: var(--primary-color); }
        .points-orange span { background-color: var(--secondary-color); }

        .chart-labels-x {
            position: absolute;
            bottom: -25px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            font-size: 0.8rem;
            color: var(--gray-color);
        }

        .chart-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            font-size: 0.9rem;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .dot-blue { background-color: var(--primary-color); }
        .dot-orange { background-color: var(--secondary-color); }

        /* --- Recommended Articles Card --- */
        .card-recommendations {
            grid-column: 3 / 4; /* やることリストの隣に配置 */
            grid-row: 3 / 4;
        }

        .article-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .article-list li {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-bottom: 15px;
        }
        .article-list li:last-child {
            margin-bottom: 0;
        }

        .article-thumbnail {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .article-info a {
            font-weight: bold;
            color: var(--dark-color);
            text-decoration: none;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .article-info a:hover {
            color: var(--primary-color);
        }

        .article-category {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: bold;
            padding: 2px 8px;
            border-radius: 50px;
            margin-bottom: 5px;
            color: white;
        }
        .category-care { background-color: var(--success-color); }
        .category-childcare { background-color: var(--primary-color); }

        /* Next Action Card 内のボタン */
        .action-button {
            background-color: var(--primary-color); /* TriHubのプライマリカラー */
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 15px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: 5px; /* 上のテキストからの間隔 */
            display: inline-block; /* インライン要素として表示 */
        }

        .action-button:hover {
            background-color: #004080; /* ホバー時の色を少し濃く */
        }

        /* リコメンデーションカード内のボタン */
        .recommendation-button {
            background-color: var(--secondary-color); /* TriHubのセカンダリカラー */
            color: white;
            padding: 6px 12px;
            border: none;
            border-radius: 5px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: 10px; /* 上のテキストからの間隔 */
            display: inline-block; /* インラインブロック要素として表示 */
        }

        .recommendation-button:hover {
            background-color: #e07000; /* ホバー時の色を少し濃く */
        }

        .recommend-list li {
            display: flex; /* アイコンとコンテンツを横並びにする */
            align-items: flex-start; /* アイコンとテキストの先頭を揃える */
            gap: 15px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .recommend-list li div { /* 追加したdivにflexを適用し、ボタンを下に配置 */
            display: flex;
            flex-direction: column; /* テキストとボタンを縦方向に並べる */
            flex-grow: 1; /* 残りのスペースを占有させる */
        }

        .sidebar-nav li:nth-last-child(2) a {
        border-bottom: 1px solid #dee2e6; /* 薄いグレーの区切り線を追加 */
        padding-bottom: 15px; /* 区切り線と設定の間隔を調整 */
        margin-bottom: 15px; /* 下の要素との間隔も調整 */
        }

        .btn-concierge {
            background-color: #718096;
            color: white;
            padding: 5px 10px; /* よりコンパクトなボタンにするためパディングを小さく */
            border-radius: 15px; /* 角を丸く */
            text-decoration: none;
            font-weight: bold;
            font-size: 0.8rem; /* フォントサイズを小さく */
            transition: background-color 0.3s;
            flex-shrink: 0; /* ボタンが縮小しないようにする */
            margin-left: 10px; /* テキストからのわずかな間隔 */
        }

        .btn-concierge:hover {
            background-color: #004080;
        }

        .btn-upgrade {
        display: inline-block;
        background-color: var(--secondary-color);
        color: white;
        font-weight: bold;
        padding: 12px 25px;
        border-radius: 50px;
        text-decoration: none;
        transition: background-color 0.3s, transform 0.2s;
        }

        .btn-upgrade:hover {
            background-color: #e07000;
            transform: translateY(-2px);
        }

        /* --- Concierge Modal Specific Styles --- */
        .modal-content h3 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 1.6rem;
        }

        .modal-subtitle {
            margin-top: -10px; /* タイトルとの間隔を調整 */
            margin-bottom: 30px;
            color: var(--gray-color);
            text-align: center;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        .modal-subtitle strong {
            color: var(--dark-color);
        }

        .concierge-features {
            display: flex;
            flex-wrap: wrap; /* 小さい画面で折り返す */
            gap: 20px;
            margin-top: 30px;
            justify-content: center;
        }

        .feature-item {
            flex: 1 1 calc(33% - 20px); /* 3列表示、gapを考慮 */
            min-width: 250px; /* 最小幅を設定して狭くなりすぎないように */
            background-color: var(--bg-color);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
            transition: transform 0.3s ease;
        }

        .feature-item:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

        .feature-item h4 {
            font-size: 1.1rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .feature-item p {
            font-size: 0.85rem;
            color: var(--gray-color);
            line-height: 1.6;
        }

        @media (max-width: 768px) {
            .concierge-features {
                flex-direction: column; /* 1列表示 */
                align-items: center;
            }
            .feature-item {
                flex: 1 1 100%; /* 全幅に */
                max-width: 400px; /* 幅の制限 */
            }
        }

        /* --- Proposal Board Styles --- */
        .page-description {
            font-size: 1rem;
            color: var(--gray-color);
            margin-bottom: 25px;
            max-width: 800px;
        }

        .proposal-board {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
            align-items: flex-start;
        }

        .board-column {
            background-color: #EDF2F7;
            border-radius: 12px;
            padding: 20px;
            height: 100%;
        }

        .board-column h2 {
            font-size: 1.2rem;
            margin: 0 0 20px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .proposal-card {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border-left: 5px solid var(--secondary-color);
        }

        .proposal-card.done {
            border-left-color: var(--success-color);
            opacity: 0.8;
        }


        .proposal-card h3 {
            font-size: 1.1rem;
            margin: 10px 0;
        }

        .proposal-card p {
            font-size: 0.9rem;
            color: var(--gray-color);
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .proposal-tags {
            display: flex;
            gap: 8px;
            margin-bottom: 5px;
        }

        .proposal-tag {
            font-size: 0.75rem;
            font-weight: bold;
            padding: 3px 10px;
            border-radius: 50px;
            color: white;
        }
        /* This reuses existing category colors from employee dashboard */

        .proposal-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 20px 0;
        }

        .action-link {
            display: block;
            text-decoration: none;
            color: var(--primary-color);
            font-weight: 500;
            font-size: 0.9rem;
            transition: color 0.2s;
        }

        .action-link:hover {
            color: var(--secondary-color);
        }

        .action-link i {
            margin-right: 8px;
            width: 20px;
        }

        .add-to-task-btn {
            width: 100%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

        .add-to-task-btn:hover {
            background-color: #004080;
        }

        .proposal-checklist {
            list-style: none;
            padding: 0;
            margin: 15px 0;
        }

        .proposal-checklist li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }

        .proposal-checklist input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }

        .completed-date {
            font-size: 0.8rem !important;
            font-weight: bold;
            color: var(--gray-color) !important;
            text-align: right;
            margin-top: 10px;
            margin-bottom: 0 !important;
        }

        /* --- Task Manager Styles --- */

        .header-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .add-task-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 0.9rem;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .add-task-btn:hover {
            background-color: #004080;
            transform: translateY(-2px);
        }

        .task-board {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
            align-items: flex-start;
        }

        .task-column {
            background-color: #EDF2F7;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
        }

        .task-column-header {
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e2e8f0;
        }

        .task-column-header h2 {
            font-size: 1.1rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--dark-color);
        }

        .task-count {
            background-color: #CBD5E0;
            color: var(--dark-color);
            font-size: 0.8rem;
            font-weight: bold;
            padding: 2px 8px;
            border-radius: 50px;
        }

        .task-list-container {
            padding: 15px;
            min-height: 200px; /* To make columns look even */
        }

        .task-card {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border-left: 5px solid;
            transition: box-shadow 0.3s;
        }

        .task-card:hover {
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        /* Priority colors */
        .task-card.priority-high { border-left-color: var(--danger-color); }
        .task-card.priority-medium { border-left-color: var(--warning-color); }
        .task-card.priority-low { border-left-color: var(--primary-color); }


        .task-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .task-category {
            font-size: 0.7rem;
            font-weight: bold;
            padding: 3px 10px;
            border-radius: 50px;
            color: white;
        }

        .task-options-btn {
            background: none;
            border: none;
            color: var(--gray-color);
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
        }
        .task-options-btn:hover {
            background-color: #f0f0f0;
        }

        .task-card h4 {
            font-size: 1rem;
            font-weight: 500;
            margin: 0 0 15px 0;
            color: var(--dark-color);
        }

        .task-meta {
            font-size: 0.85rem;
            color: var(--gray-color);
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .task-meta > div {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .task-card.is-done {
            opacity: 0.7;
            background-color: #f7fafc;
        }

        .task-card.is-done h4 {
            text-decoration: line-through;
            color: var(--gray-color);
        }

        /* --- File Vault Styles --- */
        .file-vault-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 30px;
            align-items: flex-start;
        }

        /* Filters Sidebar */
        .file-filters {
            background-color: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        .file-filters h4 {
            font-size: 1rem;
            margin: 0 0 15px 0;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eef2f6;
        }

        .file-filters ul {
            list-style: none;
            padding: 0;
            margin: 0 0 25px 0;
        }

        .file-filters li a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            text-decoration: none;
            color: var(--gray-color);
            font-weight: 500;
            border-radius: 8px;
            transition: background-color 0.2s;
        }

        .file-filters li a:hover,
        .file-filters li a.filter-active {
            background-color: #e6f0ff;
            color: var(--primary-color);
        }

        .filter-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }

        .category-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .template-box {
            background-color: #f4f7fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
        }
        .template-box h4 {
            border: none;
            padding: 0;
            margin-bottom: 10px;
        }
        .template-box p {
            font-size: 0.85rem;
            color: var(--gray-color);
            margin: 0 0 15px 0;
        }
        .template-box a {
            font-size: 0.9rem;
            display: block;
            margin-bottom: 8px;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }
        .template-box a:hover {
            text-decoration: underline;
        }
        .template-box i {
            margin-right: 8px;
        }


        /* File List Area */
        .file-list-container {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            padding: 20px;
        }

        .file-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .file-search-input {
            padding: 10px 15px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.9rem;
            width: 300px;
        }

        .view-toggle .view-btn {
            background: none;
            border: 1px solid #e2e8f0;
            padding: 8px 12px;
            cursor: pointer;
            color: var(--gray-color);
        }
        .view-toggle .view-btn:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            border-right: none;
        }
        .view-toggle .view-btn:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }
        .view-toggle .view-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .file-table {
            width: 100%;
            border-collapse: collapse;
        }

        .file-table th, .file-table td {
            padding: 15px 10px;
            text-align: left;
            border-bottom: 1px solid #eef2f6;
            font-size: 0.9rem;
            vertical-align: middle;
        }

        .file-table th {
            color: var(--gray-color);
            font-weight: 500;
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .file-icon {
            font-size: 1.8rem;
        }
        .file-icon.pdf { color: #e53e3e; }
        .file-icon.word { color: #2b6cb0; }
        .file-icon.image { color: #38a169; }

        .file-info strong {
            color: var(--dark-color);
            font-weight: 500;
        }
        .file-info small {
            color: var(--gray-color);
            font-size: 0.8rem;
        }

        .table-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }


        /* --- Service Search Styles --- */
        .search-area {
            background-color: white;
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        .search-bar {
            display: flex;
            align-items: center;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 5px 15px;
            margin-bottom: 15px;
        }

        .search-bar:focus-within {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.1);
        }

        .search-bar i {
            color: var(--gray-color);
            font-size: 1.1rem;
        }

        .search-bar input {
            border: none;
            outline: none;
            width: 100%;
            padding: 12px 10px;
            font-size: 1rem;
        }

        .search-filters {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .search-filters select {
            padding: 10px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.9rem;
            font-family: 'Noto Sans JP', sans-serif;
        }

        .filter-btn {
            background-color: #f4f7fa;
            border: 1px solid transparent;
            padding: 10px 18px;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }
        .filter-btn:hover {
            background-color: #e6f0ff;
            color: var(--primary-color);
        }
        .filter-btn.active {
            background-color: var(--primary-color);
            color: white;
        }

        .search-results-area h3 {
            font-size: 1.4rem;
            margin-bottom: 20px;
        }

        .results-count {
            font-size: 1rem;
            color: var(--gray-color);
            font-weight: 400;
            margin-left: 10px;
        }

        .service-card {
            display: flex;
            gap: 25px;
            background-color: white;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        }

        .service-logo {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .service-details {
            flex-grow: 1;
        }

        .service-card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 5px;
        }
        .service-card-header h4 {
            margin: 0;
            font-size: 1.2rem;
            color: var(--primary-color);
        }

        .service-rating {
            font-size: 0.9rem;
            color: var(--gray-color);
            margin-bottom: 10px;
        }
        .service-rating i { color: var(--warning-color); }

        .service-description {
            font-size: 0.9rem;
            line-height: 1.7;
            margin-bottom: 15px;
        }

        .service-tags {
            display: flex;
            gap: 8px;
        }
        .service-tags span {
            background-color: #eef2f6;
            color: var(--gray-color);
            font-size: 0.8rem;
            padding: 4px 10px;
            border-radius: 50px;
        }

        .service-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
            min-width: 180px;
        }

        .service-price {
            font-size: 1rem;
            color: var(--dark-color);
            text-align: right;
        }
        .service-price strong {
            font-size: 1.5rem;
            color: var(--secondary-color);
            font-family: 'Montserrat', sans-serif;
        }

        .service-actions .btn-primary,
        .service-actions .btn-secondary {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            border: 2px solid var(--primary-color);
            transition: all 0.3s;
        }
        .service-actions .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        .service-actions .btn-primary:hover {
            background-color: #004080;
            border-color: #004080;
        }
        .service-actions .btn-secondary {
            background-color: white;
            color: var(--primary-color);
        }
        .service-actions .btn-secondary:hover {
            background-color: #e6f0ff;
        }

        .approved-badge.article-badge {
            background-color: var(--gray-color);
        }

        .service-card.article .service-card-header h4 {
            color: var(--dark-color);
        }
        .service-card.article .service-actions .btn-primary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        .service-card.article .service-actions .btn-primary:hover {
            background-color: #e07000;
            border-color: #e07000;
        }


        /* --- Organization Insight Styles --- */

.insight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
    gap: 25px;
}

.card-health-score, .card-stress-level {
    grid-column: span 1;
}

.card-demographics {
    grid-column: 1 / 3;
}

.card-action-plan {
    grid-column: 1 / 3;
}

/* Gauge Chart */
.gauge-chart {
    position: relative;
    width: 250px;
    height: 125px;
    margin: 20px auto 10px auto;
    overflow: hidden; /* This creates the semi-circle mask */
}
/* The colored background of the gauge */
.gauge-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%; /* Height is 2x width to form a circle */
    border-radius: 50%;
    background: conic-gradient(
        #ffc107 0deg 45deg,       /* danger-color */
        #28a745 45deg 135deg,     /* warning-color */
        #c70b0b 135deg 180deg     /* success-color */
    );
}
.gauge-value {
    position: relative; /* z-index needs position */
    z-index: 10;
    line-height: 1;
    text-align: center;
    padding-top: 70px; /* Position the text lower */
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
.gauge-value span {
    font-size: 1.5rem;
    font-weight: 500;
}
.gauge-dial {
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 3px;
    height: 110px;
    background-color: var(--dark-color);
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(calc(var(--rotation, 135deg) - 90deg));
    transition: transform 1s ease-out;
    z-index: 5;
}
.gauge-caption {
    text-align: center;
    font-size: 0.95rem;
    color: var(--gray-color);
    padding: 0 15px;
}
.success-text { color: var(--success-color); font-weight: bold; }

/* Stress Level Donut Chart */
.donut-chart-container {
    max-width: 250px;
    margin: 0 auto 20px auto;
}
.chart-legend.donut {
    justify-content: center;
    gap: 25px;
}

/* Demographics Bar Chart */
.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.bar-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.bar-label {
    width: 150px;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 500;
}
.bar {
    height: 30px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    min-width: 50px; /* To show percentage on small bars */
}

/* Action Plan */
.card-action-plan .recommend-list {
    margin-top: 15px;
}

.card-action-plan .recommend-list li {
    align-items: flex-start;
}

.card-action-plan .recommend-list small {
    display: block;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--gray-color);
    line-height: 1.6;
}
.action-links {
    display: flex;
    gap: 15px;
}
.action-links a {
    background-color: #e6f0ff;
    color: var(--primary-color);
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    transition: background-color 0.3s;
}
.action-links a:hover {
    background-color: var(--primary-color);
    color: white;
}

/* --- Initiative Management Styles --- */

.initiative-filters {
    margin-bottom: 25px;
    display: flex;
    gap: 10px;
}

/* Reusing .filter-btn from service-search */
.initiative-filters .filter-btn {
    background-color: #fff;
    border: 1px solid #e2e8f0;
}
.initiative-filters .filter-btn.active,
.initiative-filters .filter-btn:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}


.initiative-card {
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative;
    border-top: 5px solid;
    overflow: hidden;
}

.initiative-card.status-completed { border-color: var(--success-color); }
.initiative-card.status-inprogress { border-color: var(--primary-color); }

.initiative-status-badge {
    position: absolute;
    top: -1px;
    right: 20px;
    background-color: var(--dark-color);
    color: white;
    padding: 6px 15px;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.status-completed .initiative-status-badge { background-color: var(--success-color); }
.status-inprogress .initiative-status-badge { background-color: var(--primary-color); }

.initiative-header {
    padding: 25px;
    border-bottom: 1px solid #eef2f6;
}
.initiative-title {
    margin: 0 0 5px 0;
    font-size: 1.5rem;
}
.initiative-meta {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-color);
}

.initiative-body {
    padding: 25px;
}

.initiative-section {
    margin-bottom: 25px;
}
.initiative-section:last-child {
    margin-bottom: 0;
}
.initiative-section h4 {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.initiative-section h4 i {
    color: var(--secondary-color);
}
.initiative-section p {
    margin: 0;
    padding-left: 27px; /* Align with h4 text */
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
}

.metric-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding-left: 27px;
}

.metric-impact-box {
    background-color: #f4f7fa;
    border-radius: 8px;
    padding: 15px;
}
.metric-impact-box label {
    font-size: 0.9rem;
    color: var(--gray-color);
    margin-bottom: 8px;
    display: block;
}
.metric-value {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}
.metric-value.success {
    color: var(--success-color);
}
.metric-value small {
    font-size: 1rem;
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--gray-color);
}

.coming-soon {
    padding-left: 27px;
    color: var(--gray-color);
    font-style: italic;
}

/* 法改正対応アラートバナー */
.law-alert-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-content i {
    color: #f59e0b;
    font-size: 1.5rem;
}

.alert-action-btn {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    margin-left: auto;
}

/* ステータスバッジ */
.urgent-badge {
    background: #dc2626;
    color: white;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.future-badge {
    background: #3b82f6;
    color: white;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.status-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.status-success {
    background: #10b981;
    color: white;
}

/* コンプライアンス内訳 */
.compliance-breakdown {
    margin-top: 12px;
    font-size: 0.85rem;
}

.compliance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-danger {
    background: #dc2626;
}

.status-warning {
    background: #f59e0b;
}

.status-success {
    background: #10b981;
}

.status-text {
    margin-left: auto;
    font-weight: 500;
}

/* 個別周知カード */
.notification-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-item {
    text-align: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: 6px;
}

.stat-item.danger {
    background: #fef2f2;
    color: #dc2626;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.8rem;
    color: #64748b;
}

.pending-notifications h4 {
    margin-bottom: 12px;
    color: #1e293b;
}

.notification-item {
    display: flex;
    justify-content: between;
    align-items: center;
    padding: 12px;
    background: #fef9e7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    margin-bottom: 8px;
}

.notification-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.employee-name {
    font-weight: bold;
    color: #1e293b;
}

.notification-type {
    font-size: 0.85rem;
    color: #64748b;
}

.deadline {
    font-size: 0.8rem;
    color: #dc2626;
    font-weight: 500;
}

.action-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* 40歳到達者管理 */
.age-40-list {
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.age-40-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.birth-date {
    color: #64748b;
    font-size: 0.85rem;
}

.status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.status-pending {
    background: #fef3c7;
    color: #f59e0b;
}

.status-sent {
    background: #d1fae5;
    color: #10b981;
}

.bulk-action-btn {
    width: 100%;
    background: #10b981;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

/* 雇用環境整備措置 */
.measure-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 12px;
}

.measure-item i {
    color: #3b82f6;
    font-size: 1.2rem;
    margin-top: 4px;
}

.measure-progress {
    margin-top: 8px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-top: 4px;
}

.progress-fill {
    height: 100%;
    background: #10b981;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.measure-stats {
    margin-top: 8px;
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: #64748b;
}

/* 準備状況 */
.prep-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.prep-status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.target-stats {
    text-align: center;
}

.target-number {
    font-size: 2rem;
    font-weight: bold;
    color: #3b82f6;
}

.target-breakdown {
    font-size: 0.85rem;
    color: #64748b;
}

/* アクション必要項目 */
.action-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.priority-high {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

.priority-medium {
    background: #fef3c7;
    border: 1px solid #fbbf24;
}

.action-info {
    flex: 1;
}

.action-info strong {
    display: block;
    margin-bottom: 4px;
    color: #1e293b;
}

.action-info p {
    margin: 4px 0;
    color: #64748b;
    font-size: 0.9rem;
}

.kpi-note {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

/* 施行タイムライン */
.timeline-section {
    margin-bottom: 40px;
}

.timeline-container {
    position: relative;
    margin-top: 20px;
}

.timeline-item {
    display: flex;
    margin-bottom: 30px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 120px;
    top: 0;
    bottom: -30px;
    width: 2px;
    background: #e2e8f0;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-date {
    width: 120px;
    font-weight: bold;
    color: #3b82f6;
    padding-right: 20px;
    text-align: right;
}

.timeline-content {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-left: 20px;
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #e2e8f0;
}

.timeline-content.urgent {
    border-color: #dc2626;
    background: #fef2f2;
}

.timeline-content.urgent::before {
    border-right-color: #dc2626;
}

.timeline-content h3 {
    margin: 0 0 12px 0;
    color: #1e293b;
}

.timeline-content ul {
    margin: 12px 0;
    padding-left: 20px;
}

.timeline-content li {
    margin-bottom: 6px;
    color: #64748b;
}

.countdown {
    margin-top: 12px;
    padding: 8px 12px;
    background: #dc2626;
    color: white;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
}

/* 法的義務チェックリスト */
.legal-checklist-section {
    margin-bottom: 40px;
}

.checklist-category {
    margin-bottom: 30px;
}

.checklist-category h3 {
    color: #1e293b;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.checklist-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.checklist-header {
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
}

.checklist-status {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    color: white;
    font-weight: bold;
}

.status-danger {
    background: #dc2626;
}

.status-warning {
    background: #f59e0b;
}

.status-success {
    background: #10b981;
}

.status-info {
    background: #3b82f6;
}

.status-planning {
    background: #8b5cf6;
}

.checklist-info {
    flex: 1;
}

.checklist-info h4 {
    margin: 0 0 4px 0;
    color: #1e293b;
}

.checklist-info p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.checklist-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.priority-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.priority-critical {
    background: #dc2626;
    color: white;
}

.priority-high {
    background: #f59e0b;
    color: white;
}

.priority-medium {
    background: #3b82f6;
    color: white;
}

.priority-complete {
    background: #10b981;
    color: white;
}

.priority-auto {
    background: #8b5cf6;
    color: white;
}

.priority-future {
    background: #64748b;
    color: white;
}

.setup-btn, .view-btn, .plan-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
}

.setup-btn {
    background: #3b82f6;
    color: white;
}

.view-btn {
    background: #64748b;
    color: white;
}

.plan-btn {
    background: #8b5cf6;
    color: white;
}

.checklist-details {
    padding: 0 20px 20px 76px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.detail-items {
    margin-bottom: 12px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.detail-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.detail-deadline {
    color: #dc2626;
    font-weight: bold;
    font-size: 0.9rem;
}

.detail-progress {
    color: #10b981;
    font-weight: bold;
    font-size: 0.9rem;
}

.selected-measures-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measure-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.target-employees-info {
    margin-top: 12px;
    padding: 12px;
    background: #e0f2fe;
    border-radius: 6px;
    color: #0369a1;
}

/* リスク管理 */
.risk-management-section {
    margin-bottom: 40px;
}

.risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.risk-card {
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.risk-high {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

.risk-medium {
    background: #fef3c7;
    border: 1px solid #fbbf24;
}

.risk-low {
    background: #f0f9ff;
    border: 1px solid #93c5fd;
}

.risk-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.risk-header i {
    font-size: 1.2rem;
}

.risk-high .risk-header i {
    color: #dc2626;
}

.risk-medium .risk-header i {
    color: #f59e0b;
}

.risk-low .risk-header i {
    color: #3b82f6;
}

.risk-header h3 {
    margin: 0;
    font-size: 1rem;
}

.risk-content h4 {
    margin: 0 0 8px 0;
    color: #1e293b;
}

.risk-content p {
    margin: 0 0 12px 0;
    color: #64748b;
    font-size: 0.9rem;
}

.risk-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.risk-count, .risk-timeline, .risk-rate {
    font-weight: bold;
    font-size: 0.9rem;
}

.urgent-action-btn {
    background: #dc2626;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
}

/* 進捗レポート */
.progress-report-section {
    margin-bottom: 40px;
}

.progress-overview {
    display: flex;
    align-items: center;
    gap: 40px;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.progress-stat {
    text-align: center;
}

.progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#3b82f6 68%, #e2e8f0 68%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
}

.progress-text {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: bold;
    color: #1e293b;
}

.progress-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.progress-breakdown {
    flex: 1;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.breakdown-label {
    width: 120px;
    font-size: 0.9rem;
    color: #64748b;
}

.breakdown-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-fill {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.breakdown-percent {
    width: 40px;
    text-align: right;
    font-weight: bold;
    color: #1e293b;
}

/* アクションプラン */
.action-plan-section {
    margin-bottom: 40px;
}

.action-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.action-plan-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 4px solid #e2e8f0;
}

.priority-1 {
    border-left-color: #dc2626;
}

.priority-2 {
    border-left-color: #f59e0b;
}

.priority-3 {
    border-left-color: #3b82f6;
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.plan-priority {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.priority-1 .plan-priority {
    background: #dc2626;
    color: white;
}

.priority-2 .plan-priority {
    background: #f59e0b;
    color: white;
}

.priority-3 .plan-priority {
    background: #3b82f6;
    color: white;
}

.plan-deadline {
    font-size: 0.8rem;
    color: #dc2626;
    font-weight: 500;
}

.action-plan-item h4 {
    margin: 0 0 8px 0;
    color: #1e293b;
}

.action-plan-item p {
    margin: 0 0 12px 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.plan-assignee {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 0.85rem;
}

.plan-assignee i {
    color: #3b82f6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .timeline-item {
        flex-direction: column;
    }
    
    .timeline-item::before {
        display: none;
    }
    
    .timeline-date {
        width: auto;
        text-align: left;
        padding-right: 0;
        margin-bottom: 8px;
    }
    
    .timeline-content {
        margin-left: 0;
    }
    
    .timeline-content::before {
        display: none;
    }
    
    .checklist-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .checklist-actions {
        align-self: stretch;
        justify-content: space-between;
    }
    
    .progress-overview {
        flex-direction: column;
        text-align: center;
    }
    
    .risk-grid {
        grid-template-columns: 1fr;
    }
    
    .action-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* 法改正対応インサイト */
.law-compliance-section {
    margin-bottom: 40px;
}

.compliance-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.insight-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 4px solid #e2e8f0;
}

.insight-card.urgent {
    border-left-color: #dc2626;
}

.insight-card.warning {
    border-left-color: #f59e0b;
}

.insight-card.info {
    border-left-color: #3b82f6;
}

.insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.insight-header i {
    font-size: 1.2rem;
}

.urgent .insight-header i {
    color: #dc2626;
}

.warning .insight-header i {
    color: #f59e0b;
}

.info .insight-header i {
    color: #3b82f6;
}

.insight-stat {
    text-align: center;
    margin-bottom: 16px;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #1e293b;
}

.stat-label {
    color: #64748b;
    font-size: 0.9rem;
}

.prediction-breakdown {
    margin-bottom: 16px;
}

.prediction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.prediction-type {
    font-weight: 500;
    color: #1e293b;
}

.prediction-count {
    font-weight: bold;
    color: #3b82f6;
}

.prediction-departments {
    font-size: 0.8rem;
    color: #64748b;
    flex: 1;
    text-align: center;
}

.age-40-analysis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.analysis-metric {
    text-align: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: 6px;
}

.metric-label {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 4px;
}

.metric-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1e293b;
}

.metric-value.high {
    color: #dc2626;
}

.metric-value.low {
    color: #f59e0b;
}

.flexible-work-needs {
    margin-bottom: 16px;
}

.need-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.need-type {
    font-weight: 500;
    color: #1e293b;
}

.need-count {
    font-weight: bold;
    color: #3b82f6;
}

.need-percentage {
    color: #64748b;
    font-size: 0.9rem;
}

.target-employees {
    padding: 12px;
    background: #e0f2fe;
    border-radius: 6px;
    color: #0369a1;
    font-size: 0.9rem;
    text-align: center;
}

.insight-action {
    padding: 12px;
    background: #f0fdf4;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
}

.action-label {
    font-weight: bold;
    color: #059669;
    font-size: 0.9rem;
}

.insight-action p {
    margin: 4px 0 0 0;
    color: #065f46;
    font-size: 0.9rem;
}

/* 法改正関連バッジ */
.law-impact-badge {
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: bold;
}

.public-disclosure-badge {
    background: #3b82f6;
    color: white;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: bold;
}

/* スコア内訳 */
.score-breakdown {
    margin-top: 16px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.9rem;
}

.breakdown-label {
    color: #64748b;
}

.breakdown-value {
    font-weight: bold;
    color: #10b981;
}

/* 男性育休トレンド */
.trend-chart {
    text-align: center;
    margin-bottom: 20px;
}

.trend-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #3b82f6;
    margin-bottom: 8px;
}

.trend-target {
    color: #64748b;
    margin-bottom: 20px;
}

.trend-line {
    position: relative;
    height: 60px;
    margin: 20px 0;
}

.trend-points {
    display: flex;
    justify-content: space-between;
    align-items: end;
    height: 100%;
    position: relative;
}

.trend-point {
    width: 12px;
    height: 12px;
    background: #cbd5e1;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.trend-point.active {
    background: #3b82f6;
    transform: scale(1.5);
}

.trend-point::before {
    content: attr(data-value);
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: bold;
    color: #1e293b;
}

.trend-point::after {
    content: attr(data-month);
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #64748b;
}

.take-factors {
    text-align: left;
}

.take-factors h4 {
    margin: 0 0 12px 0;
    color: #1e293b;
    font-size: 1rem;
}

.take-factors ul {
    margin: 0;
    padding-left: 20px;
}

.take-factors li {
    margin-bottom: 6px;
    color: #64748b;
    font-size: 0.9rem;
}

/* デモグラフィックタブ */
.demographic-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 20px;
}

.demo-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    color: #64748b;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.demo-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.demographic-content {
    min-height: 200px;
}

.double-care-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.double-stat {
    text-align: center;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
}

.double-care-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
}

.double-care-alert i {
    color: #f59e0b;
    font-size: 1.2rem;
}

.double-care-alert p {
    margin: 0;
    color: #92400e;
    font-size: 0.9rem;
}

/* ストレス比較 */
.stress-comparison {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.stress-period {
    text-align: center;
    flex: 1;
}

.stress-period h4 {
    margin: 0 0 16px 0;
    color: #1e293b;
}

.stress-pie {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 12px;
    position: relative;
    background: conic-gradient(
        #ef4444 0deg,
        #ef4444 var(--high-end, 126deg),
        #f59e0b var(--high-end, 126deg),
        #f59e0b var(--medium-end, 306deg),
        #10b981 var(--medium-end, 306deg),
        #10b981 360deg
    );
}

.stress-pie.before {
    --high-end: 126deg;
    --medium-end: 306deg;
}

.stress-pie.after {
    --high-end: 90deg;
    --medium-end: 252deg;
}

.stress-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 20px;
}

.stress-arrow i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.stress-arrow span {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.stress-legend {
    font-size: 0.8rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.high {
    background: #ef4444;
}

.legend-dot.medium {
    background: #f59e0b;
}

.legend-dot.low {
    background: #10b981;
}

.stress-insights {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.insight-positive {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    font-weight: 500;
    font-size: 0.9rem;
}

.insight-positive i {
    font-size: 1.1rem;
}

/* 法改正アクションプラン */
.action-priority-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.priority-critical {
    background: #fef2f2;
    border-color: #fca5a5;
}

.priority-high {
    background: #fef3c7;
    border-color: #fbbf24;
}

.priority-medium {
    background: #f0f9ff;
    border-color: #93c5fd;
}

.priority-indicator {
    width: 8px;
    height: 40px;
    border-radius: 4px;
}

.priority-critical .priority-indicator {
    background: #dc2626;
}

.priority-high .priority-indicator {
    background: #f59e0b;
}

.priority-medium .priority-indicator {
    background: #3b82f6;
}

.action-content {
    flex: 1;
}

.action-content strong {
    display: block;
    margin-bottom: 4px;
    color: #1e293b;
}

.action-content p {
    margin: 4px 0 8px 0;
    color: #64748b;
    font-size: 0.9rem;
}

.action-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
}

.target-count, .current-rate, .current-count {
    color: #3b82f6;
    font-weight: 500;
}

.deadline, .target-rate, .forecast {
    color: #64748b;
}

/* 制度利用予測 */
.forecast-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.forecast-period {
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.forecast-period h4 {
    margin: 0 0 16px 0;
    color: #1e293b;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 2px solid #3b82f6;
}

.forecast-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.forecast-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.item-name {
    color: #64748b;
    font-size: 0.9rem;
}

.item-count {
    font-weight: bold;
    color: #3b82f6;
}

.forecast-preparation {
    padding: 20px;
    background: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
}

.forecast-preparation h4 {
    margin: 0 0 12px 0;
    color: #059669;
}

.forecast-preparation ul {
    margin: 0;
    padding-left: 20px;
}

.forecast-preparation li {
    margin-bottom: 8px;
    color: #065f46;
    font-size: 0.9rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .compliance-insights-grid {
        grid-template-columns: 1fr;
    }
    
    .stress-comparison {
        flex-direction: column;
        gap: 20px;
    }
    
    .stress-arrow {
        transform: rotate(90deg);
    }
    
    .demographic-tabs {
        flex-direction: column;
    }
    
    .demo-tab {
        border-bottom: 1px solid #e2e8f0;
    }
    
    .demo-tab.active {
        border-bottom-color: #3b82f6;
    }
    
    .action-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .priority-indicator {
        width: 100%;
        height: 4px;
    }
    
    .forecast-timeline {
        grid-template-columns: 1fr;
    }
}

/* 2025年改正育児・介護休業法対応セクション */
.law-compliance-section {
    margin-bottom: 2rem;
}

.law-compliance-banner {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #6c757d;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.law-compliance-banner i {
    font-size: 2rem;
    color: #6c757d;
}

.law-compliance-banner h3 {
    margin: 0 0 0.5rem 0;
    color: #495057;
    font-weight: 700;
}

.law-compliance-banner p {
    margin: 0;
    color: #6c757d;
}

.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.card-compliance {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
}

.card-compliance .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
    border-radius: 8px 8px 0 0;
}

.card-compliance .card-header h3 {
    margin: 0;
    color: #495057;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-compliance .card-body {
    padding: 1rem;
}

/* 申請ボタングリッド */
.application-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.app-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: #495057;
}

.app-btn:hover {
    border-color: var(--primary-color);
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.app-btn i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.app-btn span {
    font-weight: 500;
    text-align: center;
    font-size: 0.9rem;
}

.pregnancy-birth:hover { border-color: #e91e63; }
.pregnancy-birth i { color: #e91e63; }

.care-start:hover { border-color: #f44336; }
.care-start i { color: #f44336; }

.child-care-leave:hover { border-color: #2196f3; }
.child-care-leave i { color: #2196f3; }

.overtime-exemption:hover { border-color: #ff9800; }
.overtime-exemption i { color: #ff9800; }

/* 情報アラート */
.info-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.info-alert i {
    color: #856404;
    font-size: 1.25rem;
    margin-top: 0.1rem;
}

.info-alert strong {
    color: #856404;
    display: block;
    margin-bottom: 0.25rem;
}

.info-alert p {
    margin: 0;
    color: #856404;
    font-size: 0.9rem;
}

/* 情報リンク */
.info-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-decoration: none;
    color: #495057;
    transition: all 0.2s ease;
}

.info-link:hover {
    background: #f8f9fa;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.info-link i {
    color: var(--primary-color);
    width: 16px;
}

/* 働き方調整 */
.adjustment-desc {
    margin-bottom: 1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.adjustment-options {
    margin-bottom: 1rem;
}

.adjustment-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

.adjustment-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.adjustment-option span {
    color: #495057;
    font-size: 0.9rem;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .compliance-grid {
        grid-template-columns: 1fr;
    }
    
    .application-buttons {
        grid-template-columns: 1fr;
    }
    
    .law-compliance-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .app-btn {
        flex-direction: row;
        justify-content: center;
        padding: 0.75rem;
    }
    
    .app-btn i {
        font-size: 1.25rem;
    }
}

/* 法改正対応：休暇関連タスク自動生成セクション */
.law-compliance-task-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid #dee2e6;
}

.compliance-task-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.compliance-task-banner i {
    font-size: 1.75rem;
    color: #6c757d;
}

.compliance-task-banner h3 {
    margin: 0 0 0.25rem 0;
    color: #495057;
    font-weight: 700;
    font-size: 1.25rem;
}

.compliance-task-banner p {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
}

.auto-generated-tasks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* 自動生成タスクカード */
.auto-task-card {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid #dee2e6;
    transition: all 0.2s ease;
}

.auto-task-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.auto-task-card.urgent {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
}

.auto-task-card.normal {
    border-left-color: #0d6efd;
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
}

.auto-task-card.info {
    border-left-color: #198754;
    background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
}

.auto-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.auto-task-type {
    background: #6c757d;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.auto-task-card h4 {
    margin: 0 0 0.5rem 0;
    color: #212529;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
}

.auto-task-desc {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.auto-task-meta {
    margin-bottom: 1rem;
}

.auto-task-meta > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: #495057;
}

.auto-task-meta i {
    width: 16px;
    color: #6c757d;
}

.auto-task-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.auto-task-actions button {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply-now {
    background: #dc3545;
    color: white;
}

.btn-apply-now:hover {
    background: #c82333;
}

.btn-later {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.btn-later:hover {
    background: #e9ecef;
}

.btn-learn-more {
    background: #0d6efd;
    color: white;
}

.btn-learn-more:hover {
    background: #0b5ed7;
}

.btn-apply {
    background: #198754;
    color: white;
}

.btn-apply:hover {
    background: #157347;
}

.btn-plan {
    background: #fd7e14;
    color: white;
}

.btn-plan:hover {
    background: #e76500;
}

/* 法定対応タスクカード */
.task-card.law-related {
    border-left: 4px solid #6f42c1;
    background: linear-gradient(135deg, #f8f6ff 0%, #ffffff 100%);
}

.task-card.law-related .task-category.category-legal {
    background: #6f42c1;
    color: white;
}

/* タスクカテゴリの追加スタイル */
.task-category.category-legal {
    background: #6f42c1;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.task-category.category-preparation {
    background: #fd7e14;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* 進捗バー */
.task-progress {
    margin-top: 0.5rem;
}

.progress-bar {
    background: #e9ecef;
    border-radius: 10px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.progress-fill {
    background: #0d6efd;
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

/* タスク詳細モーダル */
.task-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.task-modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.task-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.task-modal-header h3 {
    margin: 0;
    color: #212529;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.close-modal:hover {
    background: #f8f9fa;
    color: #495057;
}

.task-modal-body {
    padding: 1.5rem;
}

.task-detail-section {
    margin-bottom: 1.5rem;
}

.task-detail-section:last-child {
    margin-bottom: 0;
}

.task-detail-section h4 {
    margin: 0 0 0.75rem 0;
    color: #495057;
    font-weight: 600;
    font-size: 1rem;
}

.task-detail-section p {
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 0;
}

.task-detail-section ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #6c757d;
}

.task-detail-section li {
    margin-bottom: 0.5rem;
}

.reference-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0d6efd;
    text-decoration: none;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.reference-link:hover {
    background: #f8f9fa;
    border-color: #0d6efd;
}

.task-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #dee2e6;
}

.btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-primary {
    background: #0d6efd;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    background: #0b5ed7;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .law-compliance-task-section {
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 1rem;
        border-radius: 0;
    }
    
    .auto-generated-tasks {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .auto-task-card {
        padding: 1rem;
    }
    
    .compliance-task-banner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .auto-task-actions {
        flex-direction: column;
    }
    
    .auto-task-actions button {
        width: 100%;
        justify-content: center;
    }
    
    .task-modal-content {
        width: 95%;
        margin: 1rem;
    }
    
    .task-modal-footer {
        flex-direction: column;
    }
    
    .task-modal-footer button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .auto-task-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .auto-task-meta > div {
        font-size: 0.8rem;
    }
    
    .auto-task-card h4 {
        font-size: 1rem;
    }
}

/* --- mstyle.cssへの追加分 --- */

/* ダッシュボードKPIカード（追加分） */
.kpi-icon {
    font-size: 1.8rem;
    padding: 15px;
    border-radius: 50%;
    color: white;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.kpi-icon.icon-red { background-color: #e74c3c; }

.kpi-info {
    line-height: 1.4;
    width: 100%;
}

/* ダッシュボード：コンプライアンス用 */
.kpi-card.kpi-compliance {
    background-color: #fff5f5;
    border: 1px solid #e74c3c;
    display: flex;
    align-items: center;
    gap: 15px;
}
.kpi-compliance .kpi-info {
    position: relative;
}
.kpi-link {
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 0.8rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.kpi-link:hover {
    text-decoration: underline;
}

/* ダッシュボード：進捗バー用 */
.kpi-card.kpi-progress-card {
    display: flex;
    align-items: stretch;
}
.kpi-progress-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kpi-progress-info .kpi-label {
    font-size: 1rem;
    color: var(--gray-color);
    font-weight: 500;
}

.progress-bar-container {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}
.progress-bar {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 4px;
}
.kpi-progress-info .kpi-value {
    font-size: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: right;
    line-height: 1.2;
}

/* --- 共通フォームスタイル --- */
.form-container {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef2f6;
}
.form-section h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 15px;
    border-left: 5px solid var(--secondary-color);
    padding-left: 10px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--dark-color);
}
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group textarea {
    min-height: 100px;
}
.radio-group, .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.radio-group label, .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}
.radio-group input[type="radio"], .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.btn-save-draft {
    background-color: var(--gray-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 15px;
}
.btn-submit-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}
/* 警告テキスト */
.alert-warning {
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.alert-warning i {
    font-size: 1.2rem;
}
/* ステータス表示 */
.status-display {
    background: #e6f0ff;
    color: var(--primary-color);
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 20px;
}

/* --- 共通レイアウトの修正 (サイドバー削除ページ用) --- */
.dashboard-layout.no-sidebar {
    display: block; 
}
.dashboard-layout.no-sidebar .main-content {
    grid-column: 1 / -1; 
    padding-left: 0; 
    width: 100%; 
    max-width: none; 
    margin: 0; 
}
.dashboard-layout.no-sidebar .main-header {
    padding: 20px 30px; 
}
.dashboard-layout.no-sidebar .page-description,
.dashboard-layout.no-sidebar .form-container,
.dashboard-layout.no-sidebar .summary-cards {
    max-width: 1200px; 
    margin: 0 auto 30px auto; 
    padding: 0 30px; 
}
.dashboard-layout.no-sidebar .form-container {
    padding-left: 50px;
    padding-right: 50px;
}