.tooltip-do,
.tooltip-active {
    display: none;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

.tooltip-do {
    background-color: #fff;
    color: #238fe8;
    border: 1px solid #238fe8;
    font-weight: bold;  /* 文字の太さを700に設定 */
    box-shadow: 0 0 0 1px #238fe8;  /* 三角形の外側の枠線の色を設定 */
}

.tooltip-do::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: none;
    border-top: 6px solid #238fe8;
}

.tooltip-active {
    background-color: #238fe8;
    color: #fff;
}

.tooltip-active::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: none;
    border-top: 6px solid #238fe8;
}

.js-favorite.loading .tooltip-do {
    display: none !important;
}

button:hover .tooltip,
button.is-active:hover .tooltip-active {
    display: block;
}

button.is-active:hover .tooltip {
    display: none;
}