/* 全体のバー（積み上げグラフ）の設定 */
.stacked-bar {
    display: flex;        /* flexboxで子要素を横並びにする */
    width: 100%;          /* 親バーの幅を100%に設定 */
    height: 30px;         /* バーの高さ */
    xbackground-color: #e0e0e0; /* バー全体の背景色 */
    border-radius: 5px;   /* バーに角丸をつける（オプション） */
}

/* 各セグメント（積み上げ部分）の設定 */
.bar-segment {
    height: 100%;         /* セグメントの高さは親バーに合わせる */
    width: 0%;            /* 初期状態では幅をゼロに設定 */
    transition: width 1s ease-in-out; /* 幅変更時のアニメーション */
    position: relative;   /* テキストの位置調整に使うために相対位置を設定 */
}


/* セグメント内のテキスト（右端に配置する） */
.bar-text {
    position: absolute;   /* 絶対位置で右端に配置 */
    right: 10px;          /* セグメントの右端から10pxの位置に配置 */
    top: 50%;             /* セグメントの垂直中央に配置 */
    transform: translateY(-50%);  /* 縦の中央揃え */
    color: white;         /* テキストの色 */
    font-weight: bold;    /* テキストの太さ（オプション） */
    xfont-size: 12px;      /* フォントサイズ（オプション） */
    opacity: 0;           /* 初期状態でテキストを非表示 */
    transition: opacity 2s ease-in-out; /* opacityの変更にアニメーションを設定 */
}
/* セグメント内のテキスト（左端に配置する） */
.bar-title {
    position: absolute;   /* 絶対位置で右端に配置 */
    left: 10px;          /* セグメントの左端から10pxの位置に配置 */
    top: 50%;             /* セグメントの垂直中央に配置 */
    transform: translateY(-50%);  /* 縦の中央揃え */
    color: white;         /* テキストの色 */
    font-weight: bold;    /* テキストの太さ（オプション） */
    xfont-size: 12px;      /* フォントサイズ（オプション） */
    opacity: 0;           /* 初期状態でテキストを非表示 */
    transition: opacity 2s ease-in-out; /* opacityの変更にアニメーションを設定 */
}


/* 各セグメントに色をつける（オプション） */
.bar-segment:nth-child(1) {
    background: rgb(213,63,88);
    background: linear-gradient(90deg, rgba(213,63,88,1) 0%, rgba(231,35,67,1) 100%);
}

.bar-segment:nth-child(2) {
    background: rgb(213,63,88);
    background: linear-gradient(90deg, rgba(213,63,88,1) 0%, rgba(231,35,67,0.5) 100%);
}

.bar-segment:nth-child(3) {
    background: rgb(213,63,88);
    background: linear-gradient(90deg, rgba(213,63,88,1) 0%, rgba(231,35,67,1) 100%);
}
.bar-segment:nth-child(4) {
    background: rgb(213,63,88);
    background: linear-gradient(90deg, rgba(213,63,88,1) 0%, rgba(231,35,67,0.5) 100%);
}

.bar-segment.second {
    background: rgb(36,126,181);
    background: linear-gradient(90deg, rgb(83, 94, 100) 0%, rgb(122, 127, 131) 100%);
}

.bar-segment.single {
    background: rgb(36,126,181);
    background: linear-gradient(0deg, rgb(233, 112, 42) 0%, rgb(219, 139, 47) 100%);
}