.cost_01 table {
    width: 100%;
    margin-bottom: 10px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.cost_01 th{
    width: 200px;
    padding: 10px 18px;
    border: 3px solid #fff;
    line-height: 2.7rem;
    vertical-align: middle;
}
.cost_01 td{
    width: 200px;
    padding: 10px 18px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    line-height: 2.7rem;
    vertical-align: top;
}

.cost_01 th{
    width: 35%;
    background: #b4dbd5;
    font-weight: bold;
    text-align: left;
}

/*.cost_02*/
.cost_02 table {
    width: 100%;
    margin-bottom: 10px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
}

.cost_02 th{
    width: 300px;
    padding: 10px 18px;
    border: 3px solid #fff;
    border-bottom: 3px solid #fff;
    line-height: 2.7rem;
    vertical-align: middle;
}
.cost_02 td{
    width: auto;
    padding: 10px 18px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    line-height: 2.7rem;
    vertical-align: top;
}

.cost_02 th{
    width: 250px;
    background: #b4dbd5;
    font-weight: bold;
    text-align: left;
}
/*.cost_03*/
.cost_03 table {
    width: 100%;
    margin-bottom: 10px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
}

.cost_03 th{
    width: 20%;
    padding: 10px 18px;
    border: 3px solid #fff;
    border-bottom: 3px solid #fff;
    line-height: 2.7rem;
    vertical-align: middle;
}
.cost_03 td{
    width: 20%;
    padding: 10px 18px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    line-height: 2.7rem;
    vertical-align: top;
}

.cost_03 th{
    width: 20%;
    background: #b4dbd5;
    font-weight: bold;
    text-align: left;
}
.col1{
    background-color: #eeebe5;
}
.col2{
    background-color: #e8f4f2;
}
/*---------- スクロール可能なテーブル関連のCSS ----------*/
.table_box {
    display: block;
    overflow: auto;
}

.table_box th,
.table_box td {
    white-space: nowrap;
}

/* スクロールバー全体を対象にする */
.table_box::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
    height: 10px; /* スクロールバーの高さ */
}

/* スクロールバーの背景部分をカスタマイズ */
.table_box::-webkit-scrollbar-track {
    background: #d9cee0; /* スクロールバーの背景色 */
    border-radius: 5px; /* 角丸にする */
}

/* スクロールバーの操作部分をカスタマイズ */
.table_box::-webkit-scrollbar-thumb {
    background: #2cc6a8; /* スクロールバーの操作部分の背景色 */
    border-radius: 5px; /* 角丸にする */
}

/* スクロールバーの操作部分にホバーした時のスタイル */
.table_box::-webkit-scrollbar-thumb:hover {
    background: #72ddc8; /* ホバー時のスクロールバーの操作部分の背景色 */
}