@charset "UTF-8";

:root {
    --floating-bnr-width: min(26vw, 320px);
    --floating-bnr-gap: 10px;
    --floating-bnr-offset: 20px;
    --page-top-width: 58px;
}

.floating-bnr {
    position: fixed;
    right: var(--floating-bnr-offset);
    bottom: var(--floating-bnr-offset);
    z-index: 100;
    display: grid;
    gap: var(--floating-bnr-gap);
    width: var(--floating-bnr-width);
}

.floating-bnr a {
    display: block;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

@media (any-hover: hover) {
    .floating-bnr a:hover {
        transform: translateY(-4px);
        opacity: 0.8;
    }
}

.floating-bnr img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * ページトップボタンの bottom はLP側のJSがインラインで制御している（フッター手前で押し上げる）ため、
 * 重なりは横位置だけで避ける。pcはボタンをバナーの左隣へ、spはボタンの位置を変えずバナー側を狭める。
 */
.page_top.js-page-top {
    right: calc(var(--floating-bnr-offset) * 2 + var(--floating-bnr-width));
}

@media screen and (max-width: 767px) {
    :root {
        --floating-bnr-gap: 6px;
        --floating-bnr-offset: 10px;
    }

    .floating-bnr {
        left: var(--floating-bnr-offset);
        right: calc(var(--page-top-width) + var(--floating-bnr-offset) * 2);
        width: auto;
    }

    .page_top.js-page-top {
        right: 0;
    }
}