/**
 * Hoverner（ホバーナー）モジュール - スタイルシート
 *
 * @package Hoverner
 * @version 1.0.0
 */

/* ================================
   基本スタイル
   ================================ */
.hoverner {
    position: fixed;
    bottom: 0;
    z-index: 9999;
    animation: hoverner-fadein 3s ease-in-out;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* ================================
   PC表示（768px以上）
   ================================ */
@media (min-width: 768px) {
    .hoverner {
        max-width: 300px; /* 最大幅 */
    }

    /* 位置：右 */
    .hoverner-right {
        right: 20px;
    }

    /* 位置：中央 */
    .hoverner-center {
        left: 50%;
        transform: translateX(-50%);
    }

    /* 位置：左 */
    .hoverner-left {
        left: 20px;
    }

    /* PC画像表示 */
    .hoverner .hoverner-pc-image {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* スマホ画像非表示 */
    .hoverner .hoverner-sp-image {
        display: none;
    }
}

/* ================================
   スマホ表示（767px以下）
   ================================ */
@media (max-width: 767px) {
    .hoverner {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
    }

    /* PC画像非表示 */
    .hoverner .hoverner-pc-image {
        display: none;
    }

    /* スマホ画像表示 */
    .hoverner .hoverner-sp-image {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* ================================
   画像共通スタイル
   ================================ */
.hoverner img {
    vertical-align: bottom; /* 画像下の隙間を削除 */
    border: none;
}

.hoverner a {
    display: block;
    text-decoration: none;
}

.hoverner a:hover {
    opacity: 0.9;
    transition: opacity 0.3s;
}

/* ================================
   閉じるボタン
   ================================ */
.hoverner-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    z-index: 10000;
}

.hoverner-close:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.hoverner-close:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ================================
   フェードインアニメーション（3秒）
   ================================ */
@keyframes hoverner-fadein {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 中央配置の場合はX軸のtranslateも維持 */
@media (min-width: 768px) {
    @keyframes hoverner-fadein-center {
        0% {
            opacity: 0;
            transform: translateX(-50%) translateY(100%);
        }
        100% {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    .hoverner-center {
        animation: hoverner-fadein-center 3s ease-in-out;
    }
}