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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="KM名古屋ドール株式会社は、愛知県瀬戸市で陶器・陶磁器製品の製造をしている会社です。瀬戸ノベルティ（人形）の技術を共に継承しましょう。">
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="gallery-styles.css">
    <title>フォトギャラリー - KM名古屋ドール株式会社</title>
</head>
<body>
    <div class="container">
        <header>
            <img src="image\rogo_c_w3.webp" alt="会社ロゴ" class="logo">
            <div class="hamburger-menu">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <nav class="menu">
                <a href="home.html">ホーム</a>
                <a href="gallery.html">フォトギャラリー</a>
                <a href="home.html#about">会社概要</a>
                <a href="contact.html">お問い合わせ</a>
            </nav>
        </header>
        <h1>フォトギャラリー</h1>
        <div class="gallery">
            <div class="gallery-item">
                <img src="image\genkei1.webp"
                    alt="陶器置物生産は原型制作から始まる。原型は原型師と呼ばれる専門職人によって、スケッチを元に木節粘土でヘラ等の道具を使用し形取っていく作業です。その造形したものを、石膏型にします。">
                <div class="overlay">
                    <div class="text">原型制作</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\鋳込み成形.webp"
                    alt="石膏型に液体状にした粘土（泥漿）を流し込む作業。排泥後、素地は型からスムーズに出すことができます。">
                <div class="overlay">
                    <div class="text">鋳込み成形</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_1176.webp"" alt="型から取り出された素地には、型の合わせ目にバリができ、それぞれの部品をきれいに取り除き綺麗に仕上げます。">
                <div class="overlay">
                    <div class="text">仕上げ作業</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_2183.webp"" alt="組み立てられた生の素地を乾燥し、釉薬をかける。">
                <div class="overlay">
                    <div class="text">施釉</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_1169.webp" alt="ガス窯に商品を積み上げ、焼成します。（焼成時間約24時間">
                <div class="overlay">
                    <div class="text">本燒成</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\上絵付.webp" alt="本焼成された商品を熟練された職人により、筆やスプレー等で素地の表面に絵を施していきます。">
                <div class="overlay">
                    <div class="text">上絵作業</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_1512.webp" alt="絵を施された商品を、電気窯で焼成します。（焼成時間約8時間">
                <div class="overlay">
                    <div class="text">上絵焼成</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_1513.webp" alt="昭和36年製造風景写真">
                <div class="overlay">
                    <div class="text">昭和36年製造風景写真</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_1003.webp" alt="プリンス">
                <div class="overlay">
                    <div class="text">プリンス</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_1012.webp" alt="プリンセス">
                <div class="overlay">
                    <div class="text">プリンセス</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_0001.webp" alt="アン王女絵付け">
                <div class="overlay">
                    <div class="text">アン王女絵付け</div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="image\IMG_2225.webp" alt="100年前の名古屋絵付け">
                <div class="overlay">
                    <div class="text">100年前の名古屋絵付け</div>
                </div>
            </div>
        </div>
        <div id="myModal" class="modal">
            <span class="close">&times;</span>
            <div class="modal-content">
                <img id="img01">
                <div id="caption"></div>
            </div>
        </div>
    </div>

    <script>
        // JavaScriptでモーダルを制御
        var modal = document.getElementById("myModal");
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");
        var closeBtn = document.getElementsByClassName("close")[0];

        document.querySelectorAll('.gallery-item img').forEach(img => {
            img.onclick = function () {
                modal.style.display = "block";
                modalImg.src = this.src;
                captionText.innerHTML = this.alt;
            }
        });

        closeBtn.onclick = function () {
            modal.style.display = "none";
        }

        modal.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const hamburger = document.querySelector('.hamburger-menu');
            const menu = document.querySelector('.menu');

            hamburger.addEventListener('click', function () {
                menu.classList.toggle('active');
                hamburger.classList.toggle('active');
            });
        });
    </script>
</body>
</html>