<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>資料館 - 真言宗智山派 蓮花院</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="蓮花院の資料館のご案内です。寺院の行事や資料をご覧いただけます。">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 資料館ページのスタイル */
        body {
            font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
            background-color: #f8f5f0;
            color: #333;
            margin: 0;
            padding: 0;
            font-size: 16px;
        }

        h2 {
            color: #8b4513;
        }

        .small {
            display: block;
            font-size: 0.5em;
            margin-top: 3px;
            color: #666;
        }

        .content-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 資料館紹介 */
        .museum-intro {
            text-align: center;
            margin-bottom: 40px;
            padding: 0 20px;
        }

        .museum-intro p {
            margin-bottom: 15px;
            line-height: 1.8;
            font-size: 1.1em;
        }

        /* 展示物セクション */
        .museum-section {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            margin: 0 auto 40px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 1;
        }

        .museum-section:not(:first-child) {
            margin-top: 40px;
        }

        .museum-section .exhibit-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 20px;
        }

        .museum-section .exhibit-item {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .museum-section .exhibit-item:hover {
            transform: translateY(-5px);
        }

        .visit-info {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            margin-top: 40px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 1;
        }

        .section-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 2px solid rgba(139, 69, 19, 0.3);
            padding-bottom: 10px;
        }

        .section-icon {
            color: #8b4513;
            font-size: 1.5em;
            margin-right: 15px;
        }

        .section-header h3 {
            color: #8b4513;
            margin: 0;
            font-size: 1.5em;
            line-height: 1.4;
        }

        .museum-content {
            padding: 0;
        }

        .museum-content p {
            margin-bottom: 20px;
            line-height: 1.8;
        }

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            body {
                font-size: 16px;
            }

            .museum-section,
            .visit-info {
                padding: 20px;
            }

            .section-header h3 {
                font-size: 1.3em;
            }

            .exhibit-grid {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 20px;
            }

            .exhibit-item h4 {
                margin: 15px 15px 8px 15px;
                font-size: 1.2em;
            }

            .exhibit-item p {
                margin: 0 15px 15px 15px;
                font-size: 0.95em;
            }

            .video-wrapper {
                max-width: 100%;
                padding-bottom: 52%;
                /* タブレットでは少し小さめに */
            }
        }

        @media (max-width: 480px) {
            body {
                font-size: 15px;
            }

            .content-container {
                padding: 15px;
            }

            .museum-intro {
                padding: 0 10px;
            }

            .museum-section,
            .visit-info {
                padding: 15px;
            }

            .section-header {
                margin-bottom: 15px;
            }

            .section-icon {
                font-size: 1.3em;
                margin-right: 10px;
            }

            .section-header h3 {
                font-size: 1.2em;
            }

            .exhibit-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .exhibit-item {
                max-width: 320px;
                margin: 0 auto;
            }

            .info-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .video-wrapper {
                padding-bottom: 48%;
                /* スマホではさらに小さく */
            }
        }

        /* 資料館情報ボックス */
        .info-box {
            background-color: #f9f7f2;
            border: 1px solid #e5e0d5;
            padding: 35px;
            margin-bottom: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }

        .info-box h4 {
            margin-top: 0;
            margin-bottom: 25px;
            color: #555;
            font-size: 1.25em;
            border-bottom: 1px solid #e5e0d5;
            padding-bottom: 10px;
        }

        .info-list {
            display: flex;
            flex-direction: column;
            gap: 35px;
        }

        .info-item-row {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            border-bottom: 1px dashed #e5e0d5;
            padding-bottom: 15px;
        }

        .info-item-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .info-label {
            font-weight: bold;
            color: #444;
            margin-bottom: 15px;
            font-size: 1.1em;
        }

        .info-value {
            padding: 10px 15px 10px 25px;
            color: #666;
            line-height: 1.8;
            border-left: 3px solid #ddd;
            background-color: rgba(255, 255, 255, 0.5);
        }

        @media (max-width: 768px) {
            .info-box {
                padding: 25px;
            }

            .info-list {
                gap: 30px;
            }

            .info-label {
                margin-bottom: 12px;
            }

            .info-value {
                padding: 8px 10px 8px 20px;
            }
        }

        @media (max-width: 480px) {
            .info-box {
                padding: 20px;
            }

            .info-list {
                gap: 25px;
            }

            .info-item-row {
                margin-bottom: 8px;
                padding-bottom: 10px;
            }

            .info-label {
                margin-bottom: 10px;
                font-size: 1.05em;
            }

            .info-value {
                padding: 7px 10px 7px 15px;
                font-size: 0.95em;
            }
        }

        /* ページタイトル */
        .page-title {
            text-align: center;
            margin-bottom: 50px;
            color: #8b4513;
            /* 茶色 */
            position: relative;
            font-weight: normal;
            letter-spacing: 0.1em;
            font-size: 2.2em;
            padding-top: 50px !important;
            /* 適切な空白 */
            padding-bottom: 15px;
            margin-top: 0;
        }

        /* コンテナとヘッダーのスタイル */
        #container {
            padding-top: 0;
        }

        header {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        #logo {
            margin-bottom: 0;
        }

        #contents {
            margin-top: 0;
        }

        main {
            padding-top: 0;
        }

        /* メニューボタン */
        .menu-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .menu-button:hover {
            transform: translateY(-5px) rotate(5deg);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .menu-icon {
            width: 30px;
            height: 20px;
            position: relative;
        }

        .menu-icon span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: var(--main-color);
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        .menu-icon span:nth-child(1) {
            top: 0;
        }

        .menu-icon span:nth-child(2) {
            bottom: 0;
        }

        .menu-button:hover .menu-icon span:nth-child(1) {
            width: 80%;
            transform: translateY(2px);
        }

        .menu-button:hover .menu-icon span:nth-child(2) {
            width: 60%;
        }

        .video-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .video-item {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .video-item:hover {
            transform: translateY(-5px);
        }

        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            margin-top: 10px;
            margin-bottom: 5px;
        }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .video-info {
            padding: 20px;
        }

        .video-item h4 {
            font-size: 1.2em;
            margin-bottom: 10px;
            color: var(--main-color);
            background-color: #ffffcc;
            padding: 5px 10px;
            border-radius: 4px;
            text-align: center;
        }

        .video-description {
            color: #666;
            font-size: 0.9em;
            line-height: 1.6;
            margin-bottom: 0;
        }

        .video-description p:last-child {
            text-align: right;
            margin-right: 2em;
            margin-bottom: 0;
        }

        /* スライドショーのスタイル */
        .slideshow-container {
            margin-top: 5px;
            position: relative;
            overflow: hidden;
        }

        .slideshow-wrapper {
            width: 100%;
            overflow: hidden;
        }

        .slides {
            display: flex;
            transition: transform 0.5s ease;
            width: 100%;
        }

        .slides img {
            width: 100%;
            height: auto;
            object-fit: cover;
            flex-shrink: 0;
        }

        .slideshow-nav {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            gap: 8px;
        }

        .nav-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .nav-dot.active {
            background-color: #8b4513;
        }

        .add-video-button {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            gap: 10px;
            z-index: 1000;
        }

        #admin-password {
            width: 100px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        #add-video-btn {
            padding: 5px 10px;
            background: var(--main-color);
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        #add-video-btn:hover {
            background: var(--accent-color);
        }

        .add-video-form {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            z-index: 1001;
            width: 80%;
            max-width: 500px;
        }

        .add-video-form h3 {
            margin-top: 0;
            color: var(--main-color);
        }

        .add-video-form input,
        .add-video-form textarea {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .add-video-form textarea {
            height: 100px;
            resize: vertical;
        }

        .add-video-form button {
            padding: 8px 15px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #confirm-add {
            background: var(--main-color);
            color: white;
        }

        #cancel-add {
            background: #ddd;
            color: #333;
        }

        .video-thumbnail {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            /* 16:9 アスペクト比 */
            overflow: hidden;
            margin-bottom: 10px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ddd;
        }

        .video-thumbnail::before {
            content: attr(data-year);
            font-size: 2em;
            color: #8b4513;
            font-weight: bold;
            text-align: center;
        }

        .video-date {
            background-color: #fff0f5;
            padding: 5px 10px;
            border-radius: 4px;
            margin-bottom: 10px;
            display: inline-block;
            text-align: center;
            width: 100%;
        }

        .slideshow-container h4 {
            text-align: center;
            margin-bottom: 15px;
            color: #8b4513;
            background-color: #e6f3ff;
            padding: 5px 10px;
            border-radius: 4px;
        }

        /* 動画タイトル */
        .video-item>h4 {
            font-size: 1.2em;
            margin-bottom: 10px;
            color: var(--main-color);
            background-color: #ffffcc;
            padding: 5px 10px;
            border-radius: 4px;
            text-align: center;
        }

        /* スライドショータイトル */
        .slideshow-container>h4 {
            text-align: center;
            margin-bottom: 10px;
            color: #8b4513;
            background-color: #e6f3ff;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 1em;
        }
    </style>
</head>

<body>
    <div id="container">
        <header>
            <h1 id="logo"><a href="index.html"><img src="images/logo_tate.png" alt="蓮花院"></a></h1>
        </header>

        <div id="contents">
            <main>
                <h2 class="page-title">資料館<span class="small">Museum</span></h2>

                <div class="museum-intro">
                    <p>資料館では、寺院の行事や資料をご覧いただけます。</p>
                    <p>ご参拝後は皆様で、かき氷や飲み物をお召し上がりください。</p>
                </div>

                <section id="special" class="museum-section">
                    <div class="section-header">
                        <div class="section-icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <h3>施餓鬼大般若転読</h3>
                    </div>
                    <div class="museum-content">
                        <p>当山では毎年、特別法要として「大般若転読施餓鬼会」を厳修いたします。この法要は、先祖供養を行う「施餓鬼会」と厄除け・開運を祈願する「大般若転読会」を融合した稀有な仏事です。大般若経六百巻の転読による強力な加護のもと、ご先祖様への追善供養を行うことで、現世と来世の平安、そして一切の衆生の利益を願うこの機会に、皆様お誘い合わせのうえ、ご参拝くださいますようご案内申し上げます。
                        </p>

                        <div class="info-box">
                            <h4>施行情報</h4>
                            <div class="info-list">
                                <div class="info-item-row">
                                    <div class="info-label">厳修日</div>
                                    <div class="info-value">8月15日</div>
                                </div>

                                <div class="info-item-row">
                                    <div class="info-label">開始時間</div>
                                    <div class="info-value">午後4時～</div>
                                </div>

                                <div class="info-item-row">
                                    <div class="info-label">場所</div>
                                    <div class="info-value">御本堂内</div>
                                </div>

                                <div class="info-item-row">
                                    <div class="info-label">お知らせ</div>
                                    <div class="info-value">ご参拝後は皆様で、かき氷や飲み物をお召し上がりください</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 動画ギャラリーセクション -->
                <section id="video-gallery" class="museum-section">
                    <div class="section-header">
                        <div class="section-icon">
                            <i class="fas fa-film"></i>
                        </div>
                        <h3>動画ギャラリー</h3>
                    </div>
                    <div class="museum-content">
                        <p>過去の行事や法要の様子を動画でご覧いただけます。</p>
                        <div class="slideshow-container">
                            <div class="video-gallery">
                                <!-- 動画コンテナ - 新しい動画はここに追加 -->
                                <div class="video-item">
                                    <h4>施餓鬼大般若転読</h4>
                                    <div class="video-date">2024年8月15日</div>
                                    <div class="video-description">
                                        <p>令和6年8月15日、猛暑、台風の中、施餓鬼供養大般若転読が厳修されました。山門も新たに建立されました。檀信徒の皆様、ご参拝誠にありがとうございました。　
                                        </p>
                                        <p>　　　　　　　　　　合掌</p>
                                    </div>
                                    <div class="video-wrapper">
                                        <iframe src="https://player.vimeo.com/video/1000577701" width="100%"
                                            height="360" frameborder="0"
                                            allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
                                    </div>
                                    <!-- スライドショーコンテナ -->
                                    <div id="slideshow2024" class="slideshow-container">
                                        <h4>2024年 施餓鬼大般若転読 写真</h4>
                                        <div class="slideshow-wrapper">
                                            <div class="slides">
                                                <!-- 画像はJavaScriptで動的に追加されます -->
                                            </div>
                                        </div>
                                        <div class="slideshow-nav">
                                            <span class="nav-dot active"></span>
                                            <span class="nav-dot"></span>
                                            <span class="nav-dot"></span>
                                        </div>
                                    </div>
                                </div>

                                <!-- 2023年の動画 -->
                                <div class="video-item">
                                    <h4>施餓鬼大般若転読</h4>
                                    <div class="video-date">2023年8月15日</div>
                                    <div class="video-description">
                                        <p>令和5年8月15日、第9波のコロナ禍と猛暑、台風の中、4年ぶりの施餓鬼供養大般若転読が厳修されました。檀信徒の皆様、ご参拝誠にありがとうございました。　
                                        </p>
                                        <p>　　　　　　　　　　合掌</p>
                                    </div>
                                    <div class="video-wrapper">
                                        <iframe src="https://player.vimeo.com/video/867630718" width="100%" height="360"
                                            frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
                                            allowfullscreen></iframe>
                                    </div>
                                    <!-- スライドショーコンテナ -->
                                    <div id="slideshow2023" class="slideshow-container">
                                        <h4>2023年 施餓鬼大般若転読 写真</h4>
                                        <div class="slideshow-wrapper">
                                            <div class="slides">
                                                <!-- 画像はJavaScriptで動的に追加されます -->
                                            </div>
                                        </div>
                                        <div class="slideshow-nav">
                                            <span class="nav-dot active"></span>
                                            <span class="nav-dot"></span>
                                            <span class="nav-dot"></span>
                                        </div>
                                    </div>
                                </div>

                                <!-- 2022年の動画 -->
                                <div class="video-item">
                                    <h4>施餓鬼大般若転読</h4>
                                    <div class="video-date">2022年8月15日</div>
                                    <div class="video-description">
                                        <p>令和4年8月15日、第4波のコロナ禍でしたが、制限された中で施餓鬼供養が厳修されました。大勢小野のご参拝をたまわりまして、ありがとうございました。　
                                        </p>
                                        <p>　　　　　　　　　　合掌</p>
                                    </div>
                                    <div class="video-wrapper">
                                        <iframe src="https://player.vimeo.com/video/745277639" width="100%" height="360"
                                            frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
                                            allowfullscreen></iframe>
                                    </div>
                                    <!-- スライドショーコンテナ -->
                                    <div id="slideshow2022" class="slideshow-container">
                                        <h4>2022年 施餓鬼大般若転読 写真</h4>
                                        <div class="slideshow-wrapper">
                                            <div class="slides">
                                                <!-- 画像はJavaScriptで動的に追加されます -->
                                            </div>
                                        </div>
                                        <div class="slideshow-nav">
                                            <span class="nav-dot active"></span>
                                            <span class="nav-dot"></span>
                                            <span class="nav-dot"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>

        <!-- フッターコンテナ -->
        <div id="footer-container">
            <footer>
                <div class="container">
                    <div class="footer-content">
                        <div class="footer-info">
                            <h3 class="footer-title">蓮花院</h3>
                            <div class="footer-address">
                                <p>〒346-0022 埼玉県久喜市下早見3-1-1</p>
                                <p>電話：0480-21-2636</p>
                                <p>受付時間：午前9時から午後5時まで</p>
                            </div>
                        </div>
                        <div class="footer-nav">
                            <div class="footer-links">
                                <a href="index.html"><i class="fas fa-home"></i> ホーム</a>
                                <a href="about.html"><i class="fas fa-info-circle"></i> 寺院について</a>
                                <a href="events.html"><i class="fas fa-calendar-alt"></i> 分院のご紹介</a>
                                <a href="museum.html"><i class="fas fa-landmark"></i> 資料館</a>
                                <a href="about.html#access"><i class="fas fa-map-marker-alt"></i> アクセス</a>
                                <a href="contact.html"><i class="fas fa-envelope"></i> お問い合わせ</a>
                            </div>
                        </div>
                    </div>
                    <div class="footer-copyright">
                        <p>Copyright &copy; <span id="current-year"></span> <a href="index.html">蓮花院</a> All Rights
                            Reserved.</p>
                    </div>
                </div>
            </footer>
        </div>

        <!--ページの上部へ戻るボタン-->
        <div class="pagetop"><a href="#"><i class="fas fa-angle-double-up"></i></a></div>

        <!--ハンバーガーメニュー-->
        <a href="menu.html" class="menu-button">
            <div class="menu-icon">
                <span></span>
                <span></span>
            </div>
        </a>
    </div>

    <!--jQueryの読み込み-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!--このテンプレート専用のスクリプト-->
    <script src="js/main.js"></script>

    <!-- フッター読み込み用スクリプト -->
    <script src="js/footer-loader.js"></script>

    <!-- スライドショー用のJavaScript -->
    <script>
        // スライドショー画像配列を定義
        const slideshowImages2024 = [
            'images/shakaki2024/shakaki2024_01.jpg',
            'images/shakaki2024/shakaki2024_02.jpg',
            'images/shakaki2024/shakaki2024_03.jpg',
            'images/shakaki2024/shakaki2024_04.jpg',
            'images/shakaki2024/shakaki2024_05.jpg',
            'images/shakaki2024/shakaki2024_06.jpg',
            'images/shakaki2024/shakaki2024_07.jpg',
            'images/shakaki2024/shakaki2024_08.jpg'
        ];

        const slideshowImages2023 = [
            "images/shakaki2023/img01.jpg",
            "images/shakaki2023/img02.jpg",
            "images/shakaki2023/img03.jpg",
            "images/shakaki2023/img04.jpg",
            "images/shakaki2023/img05.jpg",
            "images/shakaki2023/img06.jpg"
        ];

        const slideshowImages2022 = [
            "images/shakaki2022/img01.jpg",
            "images/shakaki2022/img02.jpg",
            "images/shakaki2022/img03.jpg",
            "images/shakaki2022/img04.jpg",
            "images/shakaki2022/img05.jpg",
            "images/shakaki2022/img06.jpg"
        ];

        // ページ読み込み時にスライドショーを初期化
        document.addEventListener("DOMContentLoaded", function () {
            // 各スライドショーコンテナを初期化
            initSlideshow('slideshow2024', slideshowImages2024);
            initSlideshow('slideshow2023', slideshowImages2023);
            initSlideshow('slideshow2022', slideshowImages2022);
        });

        // スライドショーの初期化関数
        function initSlideshow(containerId, images) {
            const container = document.getElementById(containerId);
            if (!container) return;

            const slidesContainer = container.querySelector('.slides');
            if (!slidesContainer) return;

            // 既存のスライドをクリア
            slidesContainer.innerHTML = '';

            // 画像を動的に追加
            images.forEach(imgSrc => {
                const img = document.createElement('img');
                img.src = imgSrc;
                img.alt = "スライドショー画像";
                slidesContainer.appendChild(img);
            });

            // ナビゲーションドットを動的に生成
            const navContainer = container.querySelector('.slideshow-nav');
            if (navContainer) {
                navContainer.innerHTML = '';
                images.forEach((_, index) => {
                    const dot = document.createElement('span');
                    dot.className = 'nav-dot' + (index === 0 ? ' active' : '');
                    dot.addEventListener('click', () => {
                        goToSlide(container, index);
                    });
                    navContainer.appendChild(dot);
                });
            }

            // スライドショーの状態を初期化
            container.setAttribute('data-current-index', '0');
            container.setAttribute('data-animating', 'true');

            // アニメーションを開始
            startSlideshow(container);
        }

        // スライドショーのアニメーションを開始
        function startSlideshow(container) {
            const slidesContainer = container.querySelector('.slides');
            const slides = slidesContainer.querySelectorAll('img');
            const totalSlides = slides.length;
            let currentIndex = parseInt(container.getAttribute('data-current-index'));
            let isAnimating = container.getAttribute('data-animating') === 'true';

            if (!isAnimating) return;

            function animate() {
                if (!isAnimating) return;

                // 次のスライドのインデックスを計算
                const nextIndex = (currentIndex + 1) % totalSlides;

                // 最後のスライドから先頭に戻る場合
                if (nextIndex === 0) {
                    // トランジションを無効にして即座に先頭に移動
                    slidesContainer.style.transition = 'none';
                    slidesContainer.style.transform = 'translateX(0)';

                    // 次のフレームでトランジションを有効にしてアニメーション
                    requestAnimationFrame(() => {
                        slidesContainer.style.transition = 'transform 0.5s ease-in-out';
                        currentIndex = nextIndex;
                        container.setAttribute('data-current-index', currentIndex.toString());
                        slidesContainer.style.transform = `translateX(-${currentIndex * slides[0].offsetWidth}px)`;
                        updateDots(container, currentIndex);
                        setTimeout(animate, 3000);
                    });
                } else {
                    // 通常のスライド遷移
                    currentIndex = nextIndex;
                    container.setAttribute('data-current-index', currentIndex.toString());
                    slidesContainer.style.transition = 'transform 0.5s ease-in-out';
                    slidesContainer.style.transform = `translateX(-${currentIndex * slides[0].offsetWidth}px)`;
                    updateDots(container, currentIndex);
                    setTimeout(animate, 3000);
                }
            }

            // アニメーション開始
            animate();
        }

        // 特定のスライドに移動
        function goToSlide(container, index) {
            const slidesContainer = container.querySelector('.slides');
            const slides = slidesContainer.querySelectorAll('img');
            const slideWidth = slides[0].offsetWidth;

            // アニメーションを一時停止
            container.setAttribute('data-animating', 'false');

            // スライドの移動
            slidesContainer.style.transition = 'transform 0.5s ease-in-out';
            slidesContainer.style.transform = `translateX(-${index * slideWidth}px)`;

            // 現在のインデックスを更新
            container.setAttribute('data-current-index', index.toString());

            // ナビゲーションドットの更新
            updateDots(container, index);

            // 3秒後にアニメーションを再開
            setTimeout(() => {
                container.setAttribute('data-animating', 'true');
                startSlideshow(container);
            }, 3000);
        }

        // ナビゲーションドットの更新
        function updateDots(container, activeIndex) {
            const dots = container.querySelectorAll('.nav-dot');
            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === activeIndex);
            });
        }

        // スライドショーコンテナのクリックイベント
        document.querySelectorAll('.slideshow-container').forEach(container => {
            container.addEventListener('click', function (e) {
                if (!e.target.classList.contains('nav-dot')) {
                    const isAnimating = this.getAttribute('data-animating') === 'true';
                    this.setAttribute('data-animating', (!isAnimating).toString());

                    if (!isAnimating) {
                        startSlideshow(this);
                    }
                }
            });
        });
    </script>
</body>

</html>