/**
 * メクレル モジュール - フロント表示CSS
 * WPプラグイン「mekureru」のCSSを移植
 * 変更点: idセレクタ → classセレクタ（複数バナー同時表示対応）
 *
 * @version 1.0.0
 */

/* ================================
   ボックス全体のラッパー
   ================================ */
.mekureru-box {
    position: fixed;
    z-index: 99997;
}

/* ================================
   アニメーション用の下敷きレイヤー（PCアニメON時のみ出力）
   ================================ */
.mekureru-anime-bg {
    position: fixed;
}

.mekureru-anime-bg.size100 {
    animation: mkr-scaleAnimation100 2.5s infinite alternate;
}

.mekureru-anime-bg.size200 {
    animation: mkr-scaleAnimation200 2.5s infinite alternate;
}

/* ================================
   アウター（通常表示・ホバーで展開）
   ================================ */
.mekureru-outside {
    position: fixed;
    border: 0px none transparent;
    -webkit-transition: width 2s, height 2s, opacity 2s;
    transition: width 2s, height 2s, opacity 2s;
    z-index: 99998;
    margin-top: 0;
}

/* アニメーションON時: アウターは初期状態で不透明度0 */
.mekureru-outside.mekureru-animate {
    opacity: 0;
}

/* ホバー時: アウターを展開 */
.mekureru-box:hover .mekureru-outside,
.mekureru-outside:hover {
    border: 0px none transparent;
    opacity: 1;
    width: 400px;
    height: 400px;
}

/* ================================
   位置（右上）
   ================================ */
.mekureru-outside.mekureru-topright,
.mekureru-anime-bg.mekureru-topright {
    top: 0;
    right: 0;
}

/* ================================
   位置（左上）
   ================================ */
.mekureru-outside.mekureru-topleft,
.mekureru-anime-bg.mekureru-topleft {
    top: 0;
    left: 0;
}

/* ================================
   サイズ（通常時）
   ================================ */
.mekureru-outside.size100 {
    width: 100px;
    height: 100px;
}

.mekureru-outside.size200 {
    width: 200px;
    height: 200px;
}

/* ================================
   インナー（大きい画像 + めくれグラデーション）
   ================================ */
.mekureru-inside {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0px none transparent;
    transition: opacity 0.1s 2.9s;
}

.mekureru-inside.mekureru-topleft {
    top: 0;
    left: 0;
}

.mekureru-inside.mekureru-topright {
    top: 0;
    right: 0;
}

/* ホバー時: インナー画像を表示 */
.mekureru-outside:hover .mekureru-inside {
    opacity: 1;
    transition: opacity 0.1s;
}

/* ================================
   コーナー（クリック領域 + めくれグラデーション）
   ================================ */
.mekureru-corner {
    position: absolute;
    width: 100%;
    height: 100%;
}

.mekureru-corner.mekureru-topleft {
    background: linear-gradient(135deg, rgba(255,255,255,0), rgba(243,243,243,0.3) 45%, rgba(221,221,221,0.3) 50%, rgb(170,170,170) 50%, rgb(187,187,187) 56%, rgb(204,204,204) 62%, rgb(243,243,243) 80%, rgb(255,255,255) 100%) repeat scroll 0% 0%, transparent no-repeat scroll 0% 0%;
}

.mekureru-corner.mekureru-topright {
    background: linear-gradient(225deg, rgba(255,255,255,0), rgba(243,243,243,0.3) 45%, rgba(221,221,221,0.3) 50%, rgb(170,170,170) 50%, rgb(187,187,187) 56%, rgb(204,204,204) 62%, rgb(243,243,243) 80%, rgb(255,255,255) 100%) repeat scroll 0% 0%, transparent no-repeat scroll 0% 0%;
}

.mekureru-corner a,
.mekureru-corner span {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.mekureru-corner a:active,
.mekureru-corner span:active {
    outline: none;
}

/* ================================
   スマホ非表示（sp_disp=0 の場合に付与）
   ================================ */
@media screen and (max-width: 600px) {
    .mekureru-sp-none {
        display: none !important;
    }
}

/* ================================
   スマホ時のアウター（sp_disp=1 の場合）
   ================================ */
@media screen and (max-width: 600px) {
    .mekureru-outside {
        position: fixed;
        width: 100px;
        height: 100px;
        border: 0px none transparent;
        animation: mkr-scaleAnimation100 2.5s infinite alternate;
        z-index: 99998;
        background-size: 100px 100px !important;
    }

    /* スマホではアニメーションON状態でも不透明度を1に（ホバーがないため） */
    .mekureru-outside.mekureru-animate {
        opacity: 1;
    }

    /* スマホ時の下敷きレイヤーは非表示 */
    .mekureru-anime-bg {
        display: none;
    }

    /* スマホでのめくれグラデーション（インナー） */
    .mekureru-inside.mekureru-topleft {
        background: linear-gradient(135deg, rgba(255,255,255,0), rgba(243,243,243,0.3) 45%, rgba(221,221,221,0.3) 50%, rgb(170,170,170) 50%, rgb(187,187,187) 56%, rgb(204,204,204) 62%, rgb(243,243,243) 80%, rgb(255,255,255) 100%) repeat scroll 0% 0%, transparent !important;
    }

    .mekureru-inside.mekureru-topright {
        background: linear-gradient(225deg, rgba(255,255,255,0), rgba(243,243,243,0.3) 45%, rgba(221,221,221,0.3) 50%, rgb(170,170,170) 50%, rgb(187,187,187) 56%, rgb(204,204,204) 62%, rgb(243,243,243) 80%, rgb(255,255,255) 100%) repeat scroll 0% 0%, transparent !important;
    }
}

/* ================================
   アニメーション定義（keyframes）
   名前に mkr- プレフィックスをつけて他CSSとの衝突を防ぐ
   ================================ */
@keyframes mkr-scaleAnimation100 {
    0%   { width: 50px;  height: 50px; }
    100% { width: 100px; height: 100px; }
}

@keyframes mkr-scaleAnimation200 {
    0%   { width: 70px;  height: 70px; }
    100% { width: 200px; height: 200px; }
}