body {
/*
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
*/
font-family: "Helvetica Neue", "Segoe UI", Roboto, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, -apple-system, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* font-size: 1rem; */
font-weight: 400;
/* line-height: 1.5; */
scroll-behavior: smooth;
}
button, input, optgroup, select, textarea {
font-family: inherit;
}
.container {
max-width: 960px; /* コンテナの最大幅を指定 */
}
@media (min-width: 768px) {
.sidebar .position-sticky {
position: -webkit-sticky; /* サイドバーの位置を固定 (Safari用) */
position: sticky; /* サイドバーの位置を固定 */
top: 48px; /* 上からの距離を指定 */
}
.navbar-search {
display: block; /* ナビゲーションバーの検索を表示 */
}
}
.navbar-brand {
padding-top: .75rem; /* 上のパディングを指定 */
padding-bottom: .75rem; /* 下のパディングを指定 */
background-color: rgba(0, 0, 0, .25); /* 背景色を半透明の黒に設定 */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); /* 内側の影を設定 */
}
.bi {
vertical-align: -.125em; /* 垂直方向の位置を調整 */
fill: currentColor; /* 現在の色で塗りつぶし */
}
.table-responsive {
-webkit-overflow-scrolling: touch; /* タッチスクロールを有効に (iOS用) */
overflow-x: auto; /* 横方向のオーバーフローを自動に設定 */
}
.table-nowrap td,
.table-nowrap th {
white-space: nowrap; /* テーブルのセル内のテキストを折り返さない */
}
/* Utility */
.bg-deep-blue {
background-color: #031633; /* 深い青の背景色 */
}
.bg-dark-gray {
background-color: #6c757d !important;
}
.bg-extra-light-gray,
.bg-extra-light-gray > th,
.bg-extra-light-gray > td {
background-color: #f2f2f2; /* 非常に薄い灰色の背景色 */
}
.bg-secondary,
.bg-secondary > tr > th,
.bg-secondary > th,
.bg-secondary > td {
background-color: #e9ecef !important; /* セカンダリの背景色 */
}
.bg-cool-gray,
.bg-cool-gray > th,
.bg-cool-gray > td {
background-color: #dee2e6 !important; /* クールグレーの背景色 */
}
.fs-7 {
font-size: .875rem; /* フォントサイズを指定 */
}
.fs-8 {
font-size: .75rem; /* フォントサイズを指定 */
}
.w-10 {
width: 10%; /* 幅を10%に設定 */
}
.w-15 {
width: 15%; /* 幅を15%に設定 */
}
.w-17 {
width: 17%; /* 幅を17%に設定 */
}
.w-20 {
width: 20%; /* 幅を20%に設定 */
}
.w-25 {
width: 25%; /* 幅を25%に設定 */
}
.w-30 {
width: 30%; /* 幅を30%に設定 */
}
.w-35 {
width: 35%; /* 幅を35%に設定 */
}
.w-40 {
width: 40%; /* 幅を40%に設定 */
}
.w-45 {
width: 45%; /* 幅を45%に設定 */
}
.w-50 {
width: 50%; /* 幅を50%に設定 */
}
.w-200 {
width: 200px; /* 幅を200pxに設定 */
}
.w-500 {
width: 500px; /* 幅を500pxに設定 */
}
@media (min-width: 768px) {
.w-md-10 {
width: 10%; /* 幅を10%に設定 */
}
.w-md-15 {
width: 15%; /* 幅を15%に設定 */
}
.w-md-17 {
width: 17%; /* 幅を17%に設定 */
}
.w-md-20 {
width: 20%; /* 幅を20%に設定 */
}
.w-md-25 {
width: 25%; /* 幅を25%に設定 */
}
.w-md-30 {
width: 30%; /* 幅を30%に設定 */
}
.w-md-35 {
width: 35%; /* 幅を35%に設定 */
}
.w-md-40 {
width: 40%; /* 幅を40%に設定 */
}
.w-md-45 {
width: 45%; /* 幅を45%に設定 */
}
.w-md-50 {
width: 50%; /* 幅を50%に設定 */
}
}
@media (min-width: 768px) {
/* チャートで使用 */
.h-md-480 {
height: 480px !important;
}
}
.ms-4_5 {
margin-left: 2.25em; /* 左のマージンを指定 */
}
.border-top-1 {
border-top: 1px solid; /* 上のボーダーを1pxの実線に設定 */
}
.border-bottom-1 {
border-bottom: 1px solid; /* 下のボーダーを1pxの実線に設定 */
}
.border-bottom-2 {
border-bottom: 2px solid; /* 下のボーダーを2pxの実線に設定 */
}
.border-color-cool-gray {
border-color: #dee2e6 !important; /* クールグレーのボーダー色 */
}
.blur {
filter: blur(2px);
}
/* Sidebar */
.sidebar {
transition: width .2s; /* 幅の変化にトランジションを設定 */
top: -24px; /* 上からの位置を指定 */
display: none; /* 表示を非表示に設定 */
}
.sidebar.narrow {
width: 65px; /* 狭いサイドバーの幅を指定 */
}
@media (min-width: 768px) {
.sidebar {
top: 0; /* 上からの位置をリセット */
flex: 0 0 auto; /* フレックスボックスの設定 */
width: 230px; /* サイドバーの幅を指定 */
}
}
.position-sticky {
max-height: calc(100vh - 100px); /* 最大高さを指定 */
overflow-y: auto; /* 縦方向のオーバーフローを自動に設定 */
height: calc(100vh - (24px + 64px + 56px)); /* 高さを計算して指定 */
}
.sidebar.-narrow .position-sticky {
height: calc(100vh - (24px + 46px + 52px)); /* 狭いサイドバーの高さを計算して指定 */
}
/* Sidebar Nav */
.sidebar #toggle-sidebar:hover,
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
background-color: rgba(255, 255, 255, .2); /* 背景色を半透明の白に設定 */
color: #fff; /* テキスト色を白に設定 */
}
/* Sidebar Toggle */
#toggle-sidebar {
cursor: pointer; /* カーソルをポインターに設定 */
}
.narrow .hide-narrow {
display: none; /* 狭いサイドバーで非表示に設定 */
}
/* Sidebar Accordion */
.accordion-button {
position: relative; /* 相対位置を指定 */
display: flex; /* フレックスボックスを使用 */
align-items: center; /* アイテムを中央に揃える */
width: 100%; /* 幅を100%に設定 */
padding: 1rem 1.25rem; /* パディングを指定 */
padding-top: 1rem; /* 上のパディングを指定 */
padding-bottom: 1rem; /* 下のパディングを指定 */
font-size: 1rem; /* フォントサイズを指定 */
color: #212529; /* テキスト色を指定 */
text-align: left; /* テキストを左揃えに設定 */
background-color: #fff; /* 背景色を白に設定 */
border: 0; /* ボーダーをなしに設定 */
border-radius: 0; /* ボーダーの角を丸めない */
overflow-anchor: none; /* アンカーのオーバーフローをなしに設定 */
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease; /* トランジションを設定 */
cursor: pointer; /* カーソルをポインターに設定 */
}
.accordion-button {
color: #fff !important; /* テキスト色を白に設定 */
background-color: #031633 !important; /* 背景色を深い青に設定 */
box-shadow: none; /* ボックスシャドウをなしに設定 */
}
.accordion-button.open {
color: #fff !important; /* 開いた状態のテキスト色を白に設定 */
background-color: #031633 !important; /* 開いた状態の背景色を深い青に設定 */
box-shadow: none; /* 開いた状態のボックスシャドウをなしに設定 */
}
.accordion-button:focus {
border: none; /* フォーカス時のボーダーをなしに設定 */
box-shadow: none; /* フォーカス時のボックスシャドウをなしに設定 */
}
.accordion-button:hover {
background-color: rgba(255, 255, 255, .2) !important; /* ホバー時の背景色を半透明の白に設定 */
}
#sidebar:not(.narrow) .accordion-button::after {
flex-shrink: 0; /* フレックスアイテムの縮小を防ぐ */
width: 1.25rem; /* 幅を指定 */
height: 1.25rem; /* 高さを指定 */
margin-left: auto; /* 左のマージンを自動に設定 */
content: ""; /* コンテンツを空に設定 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* 背景画像を設定 */
background-repeat: no-repeat; /* 背景画像を繰り返さない */
background-size: 1.25rem; /* 背景画像のサイズを指定 */
transition: transform .2s ease-in-out; /* トランスフォームのトランジションを設定 */
}
#sidebar:not(.narrow) .accordion-button.open::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* 開いた状態の背景画像を設定 */
transform: rotate(-180deg); /* 回転を設定 */
}
#sidebar:not(.narrow) .accordion-button::after,
#sidebar:not(.narrow) .accordion-button.open::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; /* 背景画像を白に設定 */
}
.accordion-body {
padding: 0; /* パディングをなしに設定 */
list-style: none; /* リストスタイルをなしに設定 */
transition: transform .2s ease-in-out, height .2s ease-in-out; /* トランジションを設定 */
overflow: hidden; /* オーバーフローを隠す */
}
/* Sidebar Heading */
.heading-with-line {
display: flex; /* フレックスボックスを使用 */
align-items: center; /* アイテムを中央に揃える */
}
.heading-with-line::after {
content: ""; /* コンテンツを空に設定 */
flex-grow: 1; /* フレックスアイテムを成長させる */
height: 1px; /* 高さを指定 */
margin-left: 10px; /* 左のマージンを指定 */
background-color: #fff; /* 背景色を白に設定 */
opacity: 0.3; /* 不透明度を設定 */
}
#sidebar.narrow .heading-with-line::after {
margin-left: 0; /* 狭いサイドバーで左のマージンをリセット */
}
@media (min-width: 768px) {
#main {
width: calc(100% - 230px) !important; /* メインコンテンツの幅を計算して指定 */
}
#main.wide {
width: calc(100% - 65px) !important; /* 広いメインコンテンツの幅を計算して指定 */
}
}
/* Star */
:not(.favorite-button) > .bi-star::before {
content: "" !important; /* コンテンツを空に設定 */
}
:not(.favorite-button) > .bi-star {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23FFD700%22%20class%3D%22bi%20bi-star-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M3.612%2015.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173%206.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927%200l2.184%204.327%204.898.696c.441.062.612.636.282.95l-3.522%203.356.83%204.73c.078.443-.36.79-.746.592L8%2013.187l-4.389%202.256z%22%2F%3E%3C%2Fsvg%3E'); /* 背景画像を設定 */
background-repeat: no-repeat; /* 背景画像を繰り返さない */
display: inline-block; /* インラインブロックに設定 */
width: 16px; /* 幅を指定 */
height: 16px; /* 高さを指定 */
}
:not(.favorite-button) > .bi-star-inactive {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236c757d%22%20class%3D%22bi%20bi-star-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M3.612%2015.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173%206.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927%200l2.184%204.327%204.898.696c.441.062.612.636.282.95l-3.522%203.356.83%204.73c.078.443-.36.79-.746.592L8%2013.187l-4.389%202.256z%22%2F%3E%3C%2Fsvg%3E'); /* 非アクティブ状態の背景画像を設定 */
background-repeat: no-repeat; /* 背景画像を繰り返さない */
display: inline-block; /* インラインブロックに設定 */
width: 16px; /* 幅を指定 */
height: 16px; /* 高さを指定 */
}
/* Anchor link */
.bi-anchor-link {
display: inline-block;
width: 16px;
height: 17px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
a:hover .bi-anchor-link {
background-image: url("data:image/svg+xml;utf8,");
}
/* Button */
.icon-button {
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
text-decoration: none;
}
.icon-button:hover {
background-color: #0d6efd;
color: #fff;
border-color: #0d6efd;
}
.icon-button:hover .bi {
color: #fff; /* ホバー時にアイコンも白にする（任意） */
}
.icon-middle {
vertical-align: middle;
line-height: 1;
}
.favorite-button:not(.star-inactive) {
background-color: #0d6efd;
color: #fff;
border-color: #0d6efd;
}
.favorite-button:not(.star-inactive):hover {
background-color: #fff;
color: #0d6efd;
border-color: #0d6efd;
}
/* From */
.input-group > .form-control.-date, .input-group > .form-select.-date {
position: relative; /* 相対位置を指定 */
flex: none; /* フレックスアイテムの成長を防ぐ */
width: 37%; /* 幅を指定 */
min-width: 0; /* 最小幅を指定 */
}
.input-group {
max-width: 250px; /* 最大幅を指定 */
border: 1px solid #ced4da; /* ボーダーを指定 */
background-color: #fff; /* 背景色を白に設定 */
}
/* Search Area */
.search-area.-fixed {
position: fixed;
top: 0;
left: 230px;
width: calc(100% - 230px);
margin-top: 0 !important;
z-index: 999999;
}
/* Form Signin */
.form-signin {
max-width: 500px;
padding: 1rem;
}
/* Flatpickr Calendar */
.flatpickr-calendar.open {
z-index: 1000001;
}
/* Table */
/*
.table-sticky-scroll {
border-collapse: separate;
border-spacing: 0;
}
.table-sticky-scroll th,
.table-sticky-scroll td {
border: 1px solid #dee2e6 !important;
background: white !important;
}
.fixed-col {
position: sticky;
left: 0;
background: #fff;
z-index: 3;
white-space: normal !important;
}
.fixed-th-1 {
left: 0;
top: 0;
width: 240px;
min-width: 240px;
z-index: 5;
}
.fixed-th-2 {
left: 240px;
top: 0;
width: 120px;
min-width: 120px;
z-index: 5;
}
.fixed-th-3 {
left: 360px;
top: 0;
width: 120px;
min-width: 120px;
z-index: 5;
}
.fixed-th-4 {
left: 480px;
top: 0;
width: 120px;
min-width: 120px;
z-index: 5;
}
.fixed-th-5-1 {
position: sticky;
top: 0;
z-index: 4;
}
.fixed-th-5-2 {
position: sticky;
top: 42px;
z-index: 4;
}
.fixed-th-6 {
position: sticky;
top: 0;
z-index: 4;
}
.fixed-col-1 {
left: 0;
width: 240px;
min-width: 240px;
}
.fixed-col-2 {
left: 240px;
width: 120px;
min-width: 120px;
}
.fixed-col-3 {
left: 360px;
width: 120px;
min-width: 120px;
}
.fixed-col-4 {
left: 480px;
width: 120px;
min-width: 120px;
}
*/
/* freeze-table */
/* スクロール枠 */
.freeze-wrap {
border: 1px solid #dee2e6;
overflow: auto;
/* 縦横スクロール */
max-height: 360px;
background: #fff;
}
/* テーブル：可変だが、インラインwidthの列はcolgroupで固定 */
table.freeze-table {
border-collapse: separate;
/* stickyと相性の良い separate */
border-spacing: 0;
table-layout: auto;
/* 中身に応じて広がる（固定列計算はcolgroupで保証） */
width: auto;
min-width: 100%;
background: #fff;
font-size: 14px;
position: relative;
}
/* 片側ボーダー（二重線防止） */
.freeze-table th,
.freeze-table td {
border: 0;
}
.freeze-table th,
.freeze-table td {
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
}
.freeze-table thead th {
border-top: 1px solid #dee2e6;
}
.freeze-table tr>*:first-child {
border-left: 1px solid #dee2e6;
}
/* ヘッダー sticky（行ごとに段付け） */
.freeze-table thead th {
position: sticky;
top: 0;
background: #e9ecef;
z-index: 20;
/* 2段目 */
;
white-space: nowrap;
/* 見出し下段は折り返しナシ */
}
.freeze-table thead tr:nth-child(1) th {
z-index: 30;
}
/* 1段目を前面 */
.freeze-table thead th.__freeze {
z-index: 40;
}
/* 左固定セル（本文/ヘッダー） */
.freeze-table td.__freeze,
.freeze-table th.__freeze {
position: sticky;
left: 0;
background: #fff;
}
.freeze-table thead th.__freeze {
background: #e9ecef;
}
/* 固定境界直後セルは左ボーダー無効化＝太線化しない */
.freeze-table .__after-freeze {
border-left: 0 !important;
}
/* 見栄え */
.freeze-table th,
.freeze-table td {
padding: 8px 10px;
}
.text-end {
text-align: right;
}
.text-center {
text-align: center;
}
/* Bootstrap Tooltip のスタイルを上書き */
.tooltip-inner {
font-size: 12px;
max-width: 300px; /* Bootstrapデフォルトは 200px。制限を解除 */
}
/* リニューアル用あとで整理 */
:root {
--foreground-rgb: 0, 0, 0;
--background-rgb: 248, 249, 250;
--bs-primary: #1e40af;
--bs-secondary: #4f46e5;
--bs-success: #059669;
--bs-info: #0284c7;
--bs-warning: #d97706;
--bs-danger: #dc2626;
--bs-light: #e2e8f0;
--bs-dark: #1a202c;
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb));
}
.koumiru-theme .card {
border-color: #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.koumiru-theme .card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #e2e8f0;
padding: 0.5rem 1rem;
font-weight: 500;
}
.stat-card {
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.stat-card-primary {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1e40af;
}
.stat-card-success {
background: linear-gradient(135deg, #ccfbf1 0%, #a7f3d0 100%);
color: #059669;
}
.stat-card-info {
background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
color: #0284c7;
}
.stat-card-warning {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #d97706;
}
.chart-container {
height: 300px;
position: relative;
}
.chart-container-lg {
height: 400px;
position: relative;
}
.chart-container-xl {
height: 350px;
position: relative;
}
.announcement-list {
max-height: 300px;
overflow-y: auto;
}
.announcement-list .alert {
margin-bottom: 0;
border-radius: 0;
}
/* Status Color */
.bg-safe {
background-color: #a9dfd3 !important;
}
.bg-notice {
background-color: #d2efeb !important;
}
.bg-caution {
background-color: #fff2cc !important;
}
.bg-warning {
background-color: #f4cccc !important;
}
.bg-danger {
background-color: #ea9999 !important;
}
.table-sortable-icon {
/* bottom: 0;
position: absolute;
right: 12px;
top: 0;
width: 12px;*/
position: relative;
margin-left: 4px;
width: 12px;
/* ソート順を示すアイコン */
}
.table-sortable-icon::before,
.table-sortable-icon::after {
font-size: .7em;
left: 0;
line-height: 9px;
opacity: .125;
/* ソート順アイコンのスタイル */
}
.table-sortable-icon::before {
bottom: 50%;
content: "▲" /"";
display: block;
position: absolute;
/* 昇順アイコン */
}
.table-sortable-icon::after {
content: "▼" /"";
display: block;
position: absolute;
top: 50%;
/* 降順アイコン */
}
.sort-asc .table-sortable-icon::before {
opacity: .6;
/* 昇順時のアイコンの不透明度 */
}
.sort-desc .table-sortable-icon::after {
opacity: .6;
/* 降順時のアイコンの不透明度 */
}
/* ツールチップ */
.hint {
position: relative;
display: inline-block;
cursor: pointer;
color: #212529; /* 明示的にテキスト色を設定 */
}
/* ツールチップ本体（非表示時） */
.hint::after {
content: attr(data-hint);
position: absolute;
top: 100%; /* テキストの下に表示 */
left: 50%;
transform: translateX(-50%);
background: rgba(33, 37, 41, 0.85);
color: #fff;
padding: 6px 10px;
border-radius: 4px;
white-space: nowrap;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
margin-top: 6px;
z-index: 10;
}
/* ホバー時にツールチップ表示 */
.hint:hover::after {
opacity: 1;
}
/* ==========================================================================
* 振り返り用ページ
========================================================================== */
.kousu-1 {
width: 90px;
}
.kousu-2 {
width: 48px;
}
.kousu-3 {
width: 63px;
}
.price-1 {
width: 130px;
}
.price-2 {
width: 85px;
}
.price-3 {
width: 106px;
}
.uchiwake-name {
width: 85px;
}
.uchiwake-price {
width: 75px;
text-align: right;
}
.summary-progress {
--progress-bg: #EDFBF5;
--progress-color: #C2F3DC;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* top: 1px; */
border: 1px solid #dee2e6;
background-color: var(--progress-bg, #EDFBF5);
padding-left: 0.5rem;
padding-right: 0.5rem;
border-radius: 0.25rem;
}
.summary-progress.-small {
justify-content: flex-end;
width: 100px;
}
.summary-progress.-danger {
--progress-bg: rgba(254, 226, 226, 0.3);
--progress-color: #FEE2E2;
}
.summary-progress:before {
--progress-width: attr(data-progress-width %);
/* data属性値をCSS変数に設定 */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: var(--progress-width, 50%);
/* CSS変数を使用、デフォルト値は50% */
height: 100%;
background-color: var(--progress-color, #C2F3DC);
}
.summary2 {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.summary2 li {
margin: 0;
}
.summary2__item {
--summary-bg: transparent;
--summary-before-color: transparent;
--summary-width: 16%;
--summary-min-width: 150px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
padding: 8px 16px;
border: 1px solid #dee2e6;
width: var(--summary-width, 20%);
min-width: var(--summary-min-width, 150px);
background-color: var(--summary-bg, #EDFBF5);
border-radius: 0.25rem;
}
.summary2__item.-parent {
--summary-bg: #EDFBF5;
--summary-before-color: #C2F3DC;
--summary-width: 22%;
--summary-min-width: 150px;
}
.summary2__item.-parent.-danger {
--summary-bg: rgba(254, 226, 226, 0.3);
--summary-before-color: #FEE2E2;
}
.summary2__item.-parent:before {
--progress-width: attr(data-progress-width %);
/* data属性値をCSS変数に設定 */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: var(--progress-width, 50%);
/* CSS変数を使用、デフォルト値は50% */
height: 100%;
background-color: var(--summary-before-color, #C2F3DC);
}