@charset "utf-8";

/* ==========================================================================
   Makuake Floating Banner
   ========================================================================== */

.makuake-floating {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9998;

    width: min(340px, calc(100vw - 56px));

    opacity: 0;
    visibility: hidden;
    transform: translateY(26px);

    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.65s;
}

/* 表示 */
.makuake-floating.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 閉じた状態 */
.makuake-floating.is-close {
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px);
    pointer-events: none;
}

/* リンク */
.makuake-floating__link {
    display: block;
    overflow: hidden;

    width: 100%;

    background: #fff;

    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.24);

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* バナー画像 */
.makuake-floating__image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    border: 0;
}

/* 閉じるボタン */
.makuake-floating__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;

    width: 34px;
    height: 34px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #111;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}

/* × */
.makuake-floating__close::before,
.makuake-floating__close::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 15px;
    height: 1px;

    background: #fff;
}

.makuake-floating__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.makuake-floating__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* PC hover */
@media (hover: hover) and (pointer: fine) {
    .makuake-floating__link:hover {
        transform: translateY(-4px);

        box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
    }

    .makuake-floating__close:hover {
        opacity: 0.75;
    }
}

/* ==========================================================================
   SP
   ========================================================================== */

@media screen and (max-width: 767px) {
    .makuake-floating {
        right: 0;
        bottom: env(safe-area-inset-bottom);
        left: 0;

        width: 100%;
    }

    .makuake-floating__link {
        box-shadow: 0 -5px 24px rgba(0, 0, 0, 0.2);
    }

    .makuake-floating__close {
        top: -16px;
        right: 10px;
    }
}

/* 動きを抑える設定 */
@media (prefers-reduced-motion: reduce) {
    .makuake-floating,
    .makuake-floating__link {
        transition: none;
    }
}