@extends('layouts.app')

@section('content')
<div class="w-full px-4 lg:px-0 lg:w-4/5 mx-auto pt-20 lg:pt-24 pb-8">

    <!---見出し--->
    <h2 class="font-bold">第15回豊橋ライブデモンストレーションコース</h2>
    <!--タイトル読み込み-->
    <div class="text-xl md:text-2xl font-bold mt-4 mb-8">2025年6月24日（火）オンデマンド配信</div>
    <!--タイトル読み込み ここまで-->

    <!--注意書き-->
    <div class="border bg-gray-100 rounded text-sm py-4 px-6 mt-2 mb-10">
        <p class="font-bold mb-2">※ご注意</p>
        <p class="mb-2">本番組は東海ライブ研究会の著作物です。<br />
            著作権法上、許可なく複製、上映、公衆送信、展示、頒布、譲渡、貸与することは禁じられています。<br />
            違反した場合には、著作権法の規定により罰せられ、損害賠償義務を負う場合があります。<br />
            これらの不正行為を発見した場合には、すみやかに事務局までご連絡ください。</p>
        <p>研修や教育目的であっても、参加料金をお支払いただいた方以外に視聴させることは、著作権の侵害となる場合があります。<br>このような場合には、あらかじめ事務局にご相談ください。</p>
    </div>
    <!--注意書き ここまで-->


    <!--モーダル-->
    <div class="w-full mt-1 btn_room_a current_room room_btn active p-2 rounded-t text-2xl">Room A</div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4 mb-20">
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1097612275?h=b12a42fc6f&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_01.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">The Bailouters</h4>
            <h5 class="text-base font-bold">～危機からの脱出術 Part. 1～</h5>
            </figcaption>
        </figure>
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1097624857?h=e707b2f6a6&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_02.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">The Bailouters</h4>
            <h5 class="text-base font-bold">～危機からの脱出術 Part. 2～</h5>
            </figcaption>
        </figure>
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1097635876?h=29fc640e45&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_03.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">The Bailouters</h4>
            <h5 class="text-base font-bold">～危機からの脱出術 Part. 3～</h5>
            </figcaption>
        </figure>
    </div>

    <div class="w-full mt-1 btn_room_b current_room room_btn active p-2 rounded-t text-2xl">Room B</div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4 mb-20">
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1097778683?h=4c01005950&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_04.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">循環器薬物療法を極める4日間集中講座</h4>
            <h5 class="text-base font-bold">虚血</h5>
            </figcaption>
        </figure>
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1097789693?h=69ca545529&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_05.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">循環器薬物療法を極める4日間集中講座</h4>
            <h5 class="text-base font-bold">CKD</h5>
            </figcaption>
        </figure>
    </div>

    <div class="w-full mt-1 btn_room_c current_room room_btn active p-2 rounded-t text-2xl">Room C</div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4 mb-20">
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1098673539?h=d6eab86aea&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_06.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">カテーテルインターベンショニストに問う ～国産企業開発者が語る製品コンセプトと市場のリアル;ガイドワイヤー編～</h4>
            <h5 class="text-base font-bold">そのデバイスの歴史・コンセプト知っていますか？理解していますか？</h5>
            </figcaption>
        </figure>
    </div>

    <div class="w-full mt-1 btn_room_d current_room room_btn active p-2 rounded-t text-2xl">Room D</div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4 mb-20">
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1097827018?h=c632320a51&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_07.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">SHDダイバーシティ</h4>
            <h5 class="text-base font-bold">豊橋もそろそろダイバーシティについて考えんとかん！</h5>
            </figcaption>
        </figure>
    </div>

    <div class="w-full mt-1 btn_room_e current_room room_btn active p-2 rounded-t text-2xl">Room E</div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4 mb-20">
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1098399629?h=9bdd3e31f7&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_08.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">ハンズオンセッション Part.1</h4>
            <h5 class="text-base font-bold">Dr.角辻のPCI教室～コイル塞栓術～</h5>
            </figcaption>
        </figure>
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1098405702?h=86662a433c&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_09.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">ハンズオンセッション Part.2</h4>
            <h5 class="text-base font-bold">Dr.角辻のPCI教室～IVUSスタック解除術・穴塞ぎ法～</h5>
            </figcaption>
        </figure>
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1098411019?h=9be702b293&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_10.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">ハンズオンセッション Part.3</h4>
            <h5 class="text-base font-bold">Dr.角辻のPCI教室～ワイヤースタック～</h5>
            </figcaption>
        </figure>
        <figure class="modal_thumb w-full border rounded-lg p-4 bg-gray-100">
            <a href="#" class="video-link popup-trigger" data-src="https://player.vimeo.com/video/1098420044?h=f65c1ed3ef&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
            <img src="https://www.toyohashilive.org/wp/wp-content/uploads/2025/07/thubm_11.png" width="400" class="p-1 border w-full" />
            </a>
            <figcaption class="mt-3">
            <h4 class="text-lg font-bold mb-1">ハンズオンセッション Part.4</h4>
            <h5 class="text-base font-bold">Dr.角辻のPCI教室～続・ニュートンテクニック～</h5>
            </figcaption>
        </figure>
    </div>


    <!-- ↓モーダル本体はこれ1個だけでOK↓ -->
    <div class="modal_pop" style="display:none">
        <div class="modal_bg js-modal-close"></div>
        <div class="modal_pop_main">
            <button class="modal_close_btn js-modal-close" aria-label="閉じる">×</button>
            <div class="video-container bg-black rounded">
                <iframe class="modal_iframe rounded" src="" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
            </div>
        </div>
    </div>


    <style>
        .popup-trigger {
            cursor: zoom-in;
        }
        .modal_pop {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9997 !important;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .modal_pop img {
            max-width: 95%;
            max-height: 80vh;
            width: auto;
            height: auto;
            object-fit: contain;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999 !important;
        }
        .modal_bg {
            background-color: #ffffffde;
            /* background-color: #1119; */
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9998 !important;
        }
        .modal_pop_main {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .video-container {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999 !important;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
            width: 80vw;
            height: 0;
            padding-bottom: calc(80vw * 9 / 16);
            max-width: 95%;
            max-height: 80vh;
            
        }
        .modal_pop iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            box-sizing: border-box; 
        }

        /* .modal_pop iframe {
            max-width: 95%;
            max-height: 80vh;
            width: 80vw;
            height: calc(80vw * 9 / 16);
            /* 16:9比率（80vw * 9 / 16）でもOK */
            /*position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999 !important;
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3)
        } */
        .modal_close_btn {
            position: fixed;
            top: 20px;
            right: 20px;
            font-size: 78px;
            color: #333;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            z-index: 10000;
            line-height: 1;
            text-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.8);
        }
        .modal_close_btn:hover {
            opacity: 0.7;
        }

        @media only screen and (max-width: 820px) {
            .video-container {
                max-width: 95%;
                max-height: 80vh;
                width: 99vw;
                height: calc(99vw * 9 / 16);
                /* 16:9比率（80vw * 9 / 16）でもOK */
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 9999 !important;
            }
            /*.modal_pop iframe {
                max-width: 95%;
                max-height: 80vh;
                width: 99vw;
                height: calc(99vw * 9 / 16);
                /* 16:9比率（80vw * 9 / 16）でもOK */
                /*position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 9999 !important;
            }*/
            .modal_close_btn {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 64px;
            }
        }

        .modal_thumb a {
            position: relative;
            display: block;
            text-decoration: none;
        }
        .modal_thumb a::before {
            position: absolute;
            content: "";
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 3px solid #fff;
            width: 90px;
            height: 90px;
            background: rgba(0, 0, 0, 0.6);
            box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
        }
        .modal_thumb a::after {
            position: absolute;
            content: "";
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-40%, -50%);
            border-style: solid;
            border-color: transparent transparent transparent #fff;
            border-width: 20px 0 20px 35px;
        }
        .modal_thumb a::before:hover {
            background: rgba(0, 0, 0, 0.8);
        }
    </style>


    <!-- 各日付リンク -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mt-4 mb-20">
        <a href="/home" class="col-span-1 rounded border border-[#144766] text-[#144766] text-center text-lg p-4 hover:bg-[#144766] hover:text-white">配信会場一覧</a>
        <a href="/live_b" class="col-span-1 rounded border border-[#144766] text-[#144766] text-center text-lg p-4 hover:bg-[#144766] hover:text-white">6月25日（水）</a>
        <a href="/live_c" class="col-span-1 rounded border border-[#144766] text-[#144766] text-center text-lg p-4 hover:bg-[#144766] hover:text-white">6月26日（木）</a>
        <a href="/live_d" class="col-span-1 rounded border border-[#144766] text-[#144766] text-center text-lg p-4 hover:bg-[#144766] hover:text-white">6月27日（金）</a>
        <a href="/live_e" class="col-span-1 rounded border border-[#144766] text-[#144766] text-center text-lg p-4 hover:bg-[#144766] hover:text-white">6月28日（土）</a>
    </div>

    <!--エラー表示-->
    {{-- <noscript>
        <p>JavaScriptが無効になっています。</p>
        <p>視聴に問題が起こる可能性があるため、有効にしてください。</p>
    </noscript>
    <div class="bg-red-50 border-2 border-red-400 rounded text-red-600 px-4 py-2 my-2" id="log_flg"
        style="display: none;">通信環境が悪くなっています。リロードしてください。</div> --}}
    <!--エラー表示 ここまで-->

    <div class="text-right text-gray-400 pr-2">
        <a href="/home"><span class="material-icons text-base pr-1 nav-icon">home</span>Homeへ</a>
    </div>
</div>


<!--以下scriptのみ-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script type="text/javascript">
    (() => {
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.querySelector('.modal_pop');
            const modalIframe = document.querySelector('.modal_iframe');

            document.querySelectorAll('.popup-trigger').forEach(trigger => {
                trigger.addEventListener('click', e => {
                    e.preventDefault();
                    e.stopPropagation();
                    const src = trigger.dataset.src;
                    modalIframe.src = src;
                    modal.style.display = 'block';
                    setTimeout(() => {
                        modal.style.opacity = '1';
                    }, 10); // フェードイン
                });
            });

            // モーダル閉じる（背景 or モーダル本体クリックで閉じる）
            document.querySelectorAll('.js-modal-close, .modal_pop').forEach(closeTarget => {
                closeTarget.addEventListener('click', () => {
                    modal.style.opacity = '0';
                    setTimeout(() => {
                        modal.style.display = 'none';
                        modalIframe.src = ''; // 再生停止
                    }, 300); // フェードアウトが終わってから非表示
                });
            });
        });
    })();
</script>

<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
    function comment() {
        'use strict';
        //Firebaseの初期化
        firebase.initializeApp({
            databaseURL: "https://tcross-jbc.firebaseio.com",
            storageBucket: 'gs://tcross-jbc.appspot.com',
            apiKey: "AIzaSyB3Fn2Ecx5HDHdThcN18fAGS5SAij71Jkg",
            authDomain: "https://tcross-jbc.firebaseapp.com",
        });
        const database = firebase.database();
    }
    comment();
</script>
<script type="text/javascript">
    //「もっと見る」ボタンの処理
    $(function() {
        $(".detail").hide()
        $(".more_button").on("click", function() {
            $(this).prev().slideToggle();
            if ($(this).html() ===
                'もっと見る<span class="material-icons text-lg font-normal pl-1">expand_more</span>') {
                $(this).html(
                    '閉じる<span class="material-icons text-lg font-normal pl-1">expand_less</span>');
            } else {
                $(this).html(
                    'もっと見る<span class="material-icons text-lg font-normal pl-1">expand_more</span>');
            }
        });
    });


    //プログラム詳細の生成
    ////要更新 IDはイベント担当へ確認
    const currentRoomId = "27";

    ////以下更新不要

    //今日の日付を取得して書式を整える
    const today = new Date();

    const year = today.getFullYear();
    const month = ("00" + (today.getMonth() + 1)).slice(-2);
    const date = ("00" + today.getDate()).slice(-2);

    //本番用の日付定義
    const current = year + '-' + month + '-' + date;
    //テスト用の日付定義
    // const current = "2024-06-27";

    //読み込むjsonを定義
    const url = "https://pgdetail.j-bc.org/api/courses?date=" + current;

    let html = [];
    let pdf = [];

    $.ajaxSetup({
        async: false,
    });
    $.getJSON(url, (data) => {
        attr = "#pgdetail";
        html = "";

        html += '<h4 class="font-bold text-lg pt-1 pb-2 px-2 sm:px-4 border-t bg-gray-200">プログラム</h4>';
        html += '<div class="pb-6">';
        for (let i = 0; i < data.length; i++) {
            if (data[i].room_id == currentRoomId) {
                start_at = new Date(data[i].start_at.replace(/-/g, "/"));
                end_at = new Date(data[i].end_at.replace(/-/g, "/"));

                html += `<div class="border-b border-solid border-gray-300 bg-gray-50 pt-4 pb-2 px-2 sm:px-4">`;

                html += '<div class="flex flex-wrap">';
                html += '<div class="mr-4">';
                html +=
                    `${start_at.getHours()}:${start_at.getMinutes().toString().padStart(2, "0")} - ${end_at.getHours()}:${end_at.getMinutes().toString().padStart(2, "0")}`;
                html += '</div>';

                html += '<div class="mr-4 flex-1">';
                html += '<div class="w-full flex flex-wrap">';
                html += `<h5 class="font-bold mb-1 mr-2">${data[i].title}</h5>`;
                if (data[i].subtitle.match(/\S/g)) {
                    html +=
                        `<div class="font-bold">${data[i].subtitle.replace(/\n/g, "<br>")}</div>`; //空欄だったら表示されない
                }
                html += '</div>';

                if (data[i].sponsored_by.match(/\S/g)) {
                    html +=
                        `<div class="text-sm">${data[i].sponsored_by.replace(/\n/g, '<br>')}</div>`; //空欄だったら表示されない
                }



                if (data[i].content.match(/\S/g) || data[i].commentator.match(/\S/g) || data[i].sponsored_by
                    .match(/\S/g) || (data[i].pdf !== null && data[i].pdf.length > 2) || (data[i].url !==
                        null && data[i].url.length > 2)) {
                    html += '<div class="flex flex-wrap justify-end">';
                    html += '<div class="detail w-full text-sm border-t mt-4">'; //空欄だったら表示されない
                }

                if (data[i].content.match(/\S/g)) {
                    html +=
                        `<div class="pt-4 mb-4">${data[i].content.replace(/\n/g, '<br>')}</div>`; //空欄だったら表示されない
                }
                if (data[i].commentator.match(/\S/g)) {
                    html +=
                        `<div class="border-t border-solid border-gray-300 pt-6 mb-2">${data[i].commentator.replace(/\n/g, '<br>')}</div>`; //空欄だったら表示されない
                }

                if (data[i].pdf !== null && data[i].pdf.length > 2) {
                    pdf[i] = JSON.parse(data[i].pdf)[0].download_link;
                    html +=
                        `<div class="text-right pt-2"><a href="https://pgdetail.j-bc.org/storage/${pdf[i]}" class="inline-block border border-solid rounded py-1 px-4 bg-gray-500 text-white" target="_blank">詳しくはこちら<i class="fas fa-angle-right 2x pl-2"></i></a></div>`; //空欄だったら表示されない
                }
                if (data[i].url !== null && data[i].url.length > 2) {
                    // html += '<div class="pt-3 text-md-right">このセッションでは事前に、<br class="pc">各施設への質問を受け付けています。</div>';
                    html +=
                        `<div class="text-right pt-2"><a href="${data[i].url}" class="inline-block border border-solid rounded py-1 px-4 bg-gray-500 text-white" target="_blank">詳しくはこちら<i class="fas fa-angle-right 2x pl-2"></i></a></div>`; //空欄だったら表示されない
                }

                if (data[i].content.match(/\S/g) || data[i].commentator.match(/\S/g) || data[i].sponsored_by
                    .match(/\S/g) || (data[i].pdf !== null && data[i].pdf.length > 2) || (data[i].url !==
                        null && data[i].url.length > 2)) {
                    html += '</div>';
                    html +=
                        `<button type="button" class="more_button text-sm flex items-center">もっと見る<span class="material-icons text-lg font-normal pl-1">expand_more</span></button>`;
                    html += '</div>';
                }

                html += '</div>';
                html += '</div>';


                html += "</div>";
            }
        }
        html += "</div>";

        $(attr).append(html);
    });
    $.ajaxSetup({
        async: true,
    });
</script>
<script type="text/javascript" src="{{ asset('js/note.js') }}?20210709"></script>
<script type="text/javascript" src="{{ asset('/js/common.js') }}"></script>
<script type="text/javascript" src="{{ asset('/js/video-click-logger.js') }}"></script>
<script type="text/javascript">
    // 動画クリックログの初期化
    initVideoClickLogger('live_a');
</script>
@endsection