/* style.css */

/* グラフコンテナの基本スタイル */
.chart {
    margin-top: 40px;
    background-color: #FFFFFF;
}

/* SVG要素自体が親要素の幅いっぱいに広がるようにする */
.chart svg {
    display: block;
    width: 100%;
    height: auto; 
}


/* SVG内部の要素のスタイル指定 */
.chart .grid-line {
    stroke: #e0e0e0;
    stroke-width: 1;
}

.chart .data-line {
    fill: none;
    /* 折れ線の色 (緑色) */
    stroke: #28a745; 
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.chart .data-point {
    /* データポイントの色 (緑色) */
    fill: #28a745;
    stroke: #fff;
    /* 【💡 修正点 1】外枠の幅を広げ、丸を大きく見せる */
    stroke-width: 3; 
}

/* 共通の軸/目盛りラベルスタイル */
.chart .axis-label {
    font-family: sans-serif;
    font-size: 13px; /* 軸ラベルは10pxのまま */
    fill: #555;
    text-anchor: middle; /* X軸ラベルを中央揃えにする */
}

/* データ値のラベル専用のスタイル (軸ラベルの上書き) */
.chart g:last-of-type .axis-label {
    /* 14pxに拡大 */
    font-size: 14px; 
    font-weight: bold; 
    fill: #333; 
}

/* 軸線 */
.chart .axis-line {
    stroke: #333;
    stroke-width: 1;
}

.chart .axis line:first-of-type {
    stroke: #FFFFFF; /* 背景色と同化 */
}