特定の位置で「LINEに送るブロック」を表示

<!--  LINEに送る  -->
    <div class="line-reminder line-reminder--mobile">
        <button type="button" class="line-reminder__close" aria-label="このメッセージを閉じる">×</button>
        <p class="line-reminder__title">
            見出し的な部分
        </p>
        <p class="line-reminder__text">
            説明的な部分
        </p>
        <a
                href="LINEのシェアURL"
                class="line-reminder__button"
                target="_blank"
                rel="noopener"
        >
            LINEで自分に送る
        </a>
        <p class="line-reminder__note">
            ※ご自身のLINEに、このページのURLだけが送信されます。こちらから営業メッセージが届くことはありませんのでご安心ください。
        </p>
    </div>

/* =====================
 LINEに送る
 ===================== */
/* 基本は非表示にしておく（PCなど） */
.line-reminder {
    display: none;
}

/* スマホでだけ表示 */
@media (max-width: 768px) {
    .line-reminder--mobile {
        display: block;
        padding: 14px 16px 12px;
        background-color: #fff;
        border-radius: 12px;
        border: 1px solid #e5e5e5;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        font-size: 13px;
        line-height: 1.6;
        box-sizing: border-box;
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
    }

    .line-reminder__title {
        margin: 0 0 6px;
        font-size: 14px;
        font-weight: 600;
    }

    .line-reminder__button {
        display: block;
        padding: 10px 14px;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 999px;
        background-color: #06c755; /* LINEっぽいグリーン */
        color: #ffffff;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }

    .line-reminder__button:hover {
        opacity: 0.95;
    }

    .line-reminder__button:active {
        transform: translateY(1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16) inset;
    }

    .line-reminder__note {
        margin: 0;
        font-size: 11px;
        color: #777777;
    }

    .line-reminder__close {
        position: absolute;
        top: 6px;
        right: 8px;
        border: none;
        background: transparent;
        font-size: 16px;
        line-height: 1;
        padding: 0;
        color: #999;
    }

    .line-reminder__close:active {
        transform: scale(0.95);
    }

    /* is-floating 状態では position: fixed で画面下に固定される */
    .line-reminder--mobile.is-floating {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        margin: 0;
        z-index: 50;
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 1.00s ease, transform 1.00s ease;
        pointer-events: none;
    }

    .line-reminder--mobile.is-floating.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

// LINEに送るブロック
document.addEventListener('DOMContentLoaded', function () {

    const reminder = document.querySelector('.line-reminder--mobile');
    const trigger = document.getElementById('表示基準となるid名');

    // 安全チェック
    if (!reminder || !trigger) return;

    // スマホのみ
    if (window.innerWidth > 768) return;

    // まず固定表示モードにする（透明）
    reminder.classList.add('is-floating');

    let shown = false;

    function checkShow() {
        if (shown) return;

        const triggerRect = trigger.getBoundingClientRect();
        const winHeight = window.innerHeight;

        // 表示基準となるid名の上部が画面内に少し入ったら表示
        if (triggerRect.top < winHeight - 50) {
            reminder.classList.add('is-visible');
            shown = true;
        }
    }

    // スクロール時にチェック
    window.addEventListener('scroll', checkShow, { passive: true });

    // リロード後の位置でもチェック
    checkShow();

    // ×ボタンで閉じる
    const closeBtn = reminder.querySelector('.line-reminder__close');
    if (closeBtn) {
        closeBtn.addEventListener('click', function (e) {
            e.preventDefault();
            reminder.classList.remove('is-visible');
        });
    }
});