/* コピー機能の外枠 */
.c-ma-copy {
    position: relative;
    display: inline-block;
    vertical-align: middle; /* 画像とボタンの縦位置を揃える */
    margin-left: 8px;
}
/* コピー用ボタン */
.c-ma-copy__btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
/* コピー時・ホバー時に表示するテキスト */
.c-ma-copy__hover-text,
.c-ma-copy__text {
    position: absolute;
    bottom: 120%; /* ボタンの上に表示 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    white-space: nowrap;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    opacity: 0; /* 初期状態は非表示 */
    transition: opacity 0.3s ease;
    pointer-events: none; /* マウスイベント無効 */
    z-index: 2;
}
/* ボタンにマウスを乗せた時 → 「コピー」表示 */
.c-ma-copy:hover .c-ma-copy__hover-text {
    opacity: 1;
}
/* コピー成功時（JSで "copied" クラスを付与） */
.c-ma-copy.copied .c-ma-copy__hover-text {
    opacity: 0; /* 「コピー」メッセージを非表示 */
}
.c-ma-copy.copied .c-ma-copy__text {
    opacity: 1; /* 「コピーしました」メッセージを表示 */
}
/* コピー直後のホバー表示を制御するクラス */
.c-ma-copy.just-copied:hover .c-ma-copy__hover-text {
    opacity: 0;
}