@charset "UTF-8";

/* ストーカーボタン：PCではパネルをボタンの左側に開く（SPは common.css のまま上に開く） */
@media only screen and (max-width: 767px) {
    .p-stalker-btn .child-reserve-wrap {
        display: contents;
    }
}

@media only screen and (min-width: 768px) {
    /*
     * 予約パネルの配置範囲：ヘッダー下端(92px)+16px 〜 画面下端-16px。
     * 予約ボタン中心(ボタン列下端から299px)を中心に置き、上が詰まったら上端で止めて下側の余白を使う。
     * padding で予約ボタン中心を中央にした領域を作り、margin auto で中央揃え（はみ出す時は上端止まり）。
     */
    .p-stalker-btn .child-reserve-wrap {
        position: absolute;
        right: calc(100% + 16px);
        top: calc(462px - 95vh);
        bottom: calc(16px - 5vh);
        width: 345px;
        display: flex;
        flex-direction: column;
        padding-top: max(0px, 90vh - 690px);
        padding-bottom: max(0px, 690px - 90vh);
        pointer-events: none;
    }

    .p-stalker-btn .child-reserve-wrap .child-reserve {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        flex-shrink: 0;
        margin: auto 0;
        max-height: calc(100vh - 124px);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform-origin: 100% 50%;
        pointer-events: auto;
    }

    .p-stalker-btn .child-sns {
        right: calc(100% + 16px);
        top: 50%;
        bottom: auto;
        max-height: calc(100vh - 124px);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(-50%) scale(0);
        transform-origin: 100% 50%;
    }

    .p-stalker-btn .child-sns.is-active {
        transform: translateY(-50%) scale(1);
    }

    .p-stalker-btn .btn.btn-reserve::after,
    .p-stalker-btn .btn.btn-sns::after {
        width: 15px;
        height: 25px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }

    .p-stalker-btn .btn.btn-reserve.is-active::after,
    .p-stalker-btn .btn.btn-sns.is-active::after {
        top: 50%;
        left: -12px;
    }
}