PageSourceSearch

https://chonan-nishisho.jp/lp/

html chonan-nishisho.jp collected 2026-10-04 15:11:26 UTC 86,877 bytes, 1,305 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ja" class="scroll-smooth">
3<head>
4<!-- Google Tag Manager -->
5<script>
vendor: 333 bytes, lines 5-10
5
6(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
7new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
8j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
9'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
10})(window,document,'script','dataLayer','
10GTM-KXV8G74
vendor: 5 bytes, line 10
10');
11</script>
11
12    <meta charset="UTF-8">
13    <meta name="viewport" content="width=device-width, initial-scale=1.0">
14    <title>ちょうなん西小学校撮影スタジオ|千葉の学校ロケ地</title>
15    <meta name="description" content="千葉県長南町の学校撮影スタジオ「ちょうなん西小」。ドラマ・映画・MV・CM・YouTubeなど幅広い撮影に対応。貸切撮影、長時間利用も可能。都心から約80分。">
16    <!-- ファビコン -->
17    <link rel="icon" href="https://chonan-nishisho.jp/images/faviconi_satuei.png" type="image/png">
18    <link rel="apple-touch-icon" sizes="180x180" href="https://chonan-nishisho.jp/images/faviconi_satuei.png">
19    
19<script src="https://cdn.tailwindcss.com"></script>
19
20    <!-- Webフォント: Noto Sans JP -->
21    <link rel="preconnect" href="https://fonts.googleapis.com">
22    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap" rel="stylesheet">
24    <!-- アイコン用ライブラリ -->
25    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
26    
27    <!-- 構造化データ (LocalBusiness) -->
28    
28<script type="application/ld+json">
29    {
30      "@context": "https://schema.org",
31      "@type": "LocalBusiness",
32      "name": "ちょうなん西小学校撮影スタジオ",
33      "image": "https://chonan-nishisho.jp/images/5gaikan.png",
34      "description": "千葉県長南町の学校撮影スタジオ「ちょうなん西小」。ドラマ・映画・MV・CM・YouTubeなど幅広い撮影に対応。貸切撮影、長時間利用も可能。都心から約80分。",
35      "telephone": "0120-154-244",
36      "address": {
37        "@type": "PostalAddress",
38        "streetAddress": "佐坪 1348-1",
39        "addressLocality": "長生郡長南町",
40        "addressRegion": "千葉県",
41        "postalCode": "297-0145",
42        "addressCountry": "JP"
43      },
44      "url": "https://chonan-nishisho.jp/"
45    }
46    </script>
46
47
48    <!-- 構造化データ (FAQPage) -->
49    
49<script type="application/ld+json">
50    {
51      "@context": "https://schema.org",
52      "@type": "FAQPage",
53      "mainEntity": [
54        {
55          "@type": "Question",
56          "name": "利用の際はどのような流れですか?",
57          "acceptedAnswer": {
58            "@type": "Answer",
59            "text": "①電話又は問合せフォームにて候補日と企画内容をお知らせください。<br>②弊社の担当から折り返し連絡をさせていただき、空き状況やお見積りをご案内いたします。<br>③利用確定後、「商業利用約款」「誓約書」をお送りしますので、当日までにご記入いただき、原本の送付をお願いいたします。<br>④お支払いは現地決済又は銀行振込が可能です。銀行振込の場合、利用月の月末締め、翌月末払いとなります。"
60          }
61        },
62        {
63          "@type": "Question",
64          "name": "ロケハンは可能ですか?",
65          "acceptedAnswer": {
66            "@type": "Answer",
67            "text": "可能でございます。無料で行えます。日程等調整させていただきますので、まずはお気軽にご相談ください。"
68          }
69        },
70        {
71          "@type": "Question",
72          "name": "空き状況は確認できますか?",
73          "acceptedAnswer": {
74            "@type": "Answer",
75            "text": "ご希望の候補日を電話又は問合せフォームからお知らせください。空き状況をお伝えさせていただきます。"
76          }
77        },
78        {
79          "@type": "Question",
80          "name": "仮予約はできますか?",
81          "acceptedAnswer": {
82            "@type": "Answer",
83            "text": "可能でございます。複数日程の仮予約も受け付けております。"
84          }
85        },
86        {
87          "@type": "Question",
88          "name": "1時間のみの撮影も可能ですか?",
89          "acceptedAnswer": {
90            "@type": "Answer",
91            "text": "最低4時間からご予約を受け付けております。1時間のみの撮影も可能ですが、4時間分の料金がかかってしまいますので予めご了承ください。"
92          }
93        },
94        {
95          "@type": "Question",
96          "name": "早朝・深夜の撮影は可能ですか?",
97          "acceptedAnswer": {
98            "@type": "Answer",
99            "text": "可能でございます。21〜7時に撮影を行う場合は利用料金と別途お一人様あたりの宿泊料をいただきます。また、早朝や深夜においては近隣住民の迷惑にならない範囲で撮影をお願いいたします。"
100          }
101        },
102        {
103          "@type": "Question",
104          "name": "どのような撮影ができますか?",
105          "acceptedAnswer": {
106            "@type": "Answer",
107            "text": "学校ロケーションをメインとした撮影が可能です。ドラマ、映画、バラエティ、CM、MVなど多くの実績がございますのでまずはお気軽にお問い合わせください。"
108          }
109        },
110        {
111          "@type": "Question",
112          "name": "撮影できる範囲はどこまでですか?",
113          "acceptedAnswer": {
114            "@type": "Answer",
115            "text": "貸切のため、全館ご使用いただけます。"
116          }
117        },
118        {
119          "@type": "Question",
120          "name": "更衣室はありますか?",
121          "acceptedAnswer": {
122            "@type": "Answer",
123            "text": "別室として「更衣室」は用意がないですが、カーテンがある部屋を更衣室としてご利用いただけます。"
124          }
125        },
126        {
127          "@type": "Question",
128          "name": "駐車場はありますか?",
129          "acceptedAnswer": {
130            "@type": "Answer",
131            "text": "敷地内に約20台ほど駐車が可能です。大型車の駐車も可能です。"
132          }
133        }
134      ]
135    }
136    </script>
136
137
138    <style>
139        body {
140            font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
141            color: #333;
142            overflow-x: hidden;
143            /* 下部固定フッターの分だけ余白を確保(スマホのみ) */
144            padding-bottom: 0;
145        }
146
147        /* --- ヘッダー制御 --- */
148        .header-logo-area {
149            transition: all 0.3s ease-in-out;
150            overflow: hidden;
151            opacity: 1;
152            /* ロゴエリアの高さ制限も解除または調整 */
153            max-height: 120px;
154        }
155        
156        nav#site-nav {
157            transition: top 0.3s ease-in-out;
158        }
159
160        /* --- テキストスタイル --- */
161        .text-stroke-black {
162            text-shadow: 
163                4px 4px 2px #000;
164            color: #fff;
165            -webkit-text-stroke: 3px #000;
166            paint-order: stroke fill;
167        }
168
169        .text-outline-gallery {
170            color: #fff;
171            -webkit-text-stroke: 1px #000;
172        }
173        .vertical-text {
174            writing-mode: vertical-rl;
175            text-orientation: mixed;
176        }
177
178        /* --- マーカーライン --- */
179        .marker-line {
180            display: inline;
181            font-weight: 900; /* 太字 */
182            text-decoration: none;
183            /* 下半分にピンクのマーカー */
184            background: linear-gradient(to bottom, transparent 50%, rgba(238, 105, 131, 0.5) 50%);
185            background-repeat: no-repeat;
186            background-position: 0 0;
187            background-size: 100% 100%; 
188        }
189
190        /* --- ギャラリー画像フェード用 --- */
191        .gallery-img-fade {
192            transition: opacity 0.5s ease-in-out;
193            opacity: 1;
194        }
195        .gallery-img-fade.fade-out {
196            opacity: 0;
197        }
198
199        /* --- ナビゲーション --- */
200        .nav-item { 
201            transition: all 0.2s ease;
202            position: relative;
203        }
204        .nav-item:hover { 
205            opacity: 1;
206            background-color: #fff;
207            transform: translateY(-4px);
208            box-shadow: 4px 4px 0 0 #000; 
209            z-index: 20;
210        }
211        .bg-nav-1 { background-color: #ff7f9f; }
212        .bg-nav-2 { background-color: #ffcc66; }
213        .bg-nav-3 { background-color: #00d2ff; }
214        .bg-nav-4 { background-color: #99eccb; }
215        .bg-nav-5 { background-color: #d999f0; }
216
217        /* --- ボタン --- */
218        .btn-header-pop {
219            transition: all 0.2s ease;
220            box-shadow: 3px 3px 0 0 #000;
221        }
222        .btn-header-pop:hover {
223            transform: translateY(2px);
224            box-shadow: 1px 1px 0 0 #000;
225        }
226        .btn-header-pop:active {
227            transform: translateY(2px);
228            box-shadow: 1px 1px 0 0 #000;
229        }
230        .shadow-pop {
231            box-shadow: 4px 4px 0 0 #000;
232        }
233        .hover-lift {
234            transition: transform 0.3s ease, box-shadow 0.3s ease;
235        }
236        .hover-lift:hover {
237            transform: translateY(-4px);
238            box-shadow: 2px 2px 0 0 #000;
239        }
240
241        /* --- ハンバーガーメニュー --- */
242        .hamburger {
243            display: flex;
244            flex-direction: column;
245            justify-content: space-between;
246            width: 48px; /* 大きく */
247            height: 30px; /* 大きく */
248            cursor: pointer;
249            z-index: 50;
250            padding: 0;
251            background: transparent;
252            border: none;
253        }
254        .hamburger-line {
255            display: block;
256            width: 100%;
257            height: 4px; /* 太く */
258            background-color: #000;
259            transition: all 0.3s ease-in-out;
260            border-radius: 4px;
261        }
262        .hamburger.active .hamburger-line:nth-child(1) {
263            transform: translateY(13px) rotate(45deg);
264        }
265        .hamburger.active .hamburger-line:nth-child(2) {
266            opacity: 0;
267        }
268        .hamburger.active .hamburger-line:nth-child(3) {
269            transform: translateY(-13px) rotate(-45deg);
270        }
271        
272        /* モバイルメニューオーバーレイ */
273        #mobile-menu {
274            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
275            opacity: 0;
276            visibility: hidden;
277        }
278        #mobile-menu.open {
279            opacity: 1;
280            visibility: visible;
281        }
282
283        /* TOPに戻るボタン */
284        #back-to-top {
285            position: fixed;
286            bottom: 100px; /* 固定フッターの上 */
287            right: 20px;
288            z-index: 999;
289            transition: all 0.3s ease;
290            opacity: 0;
291            pointer-events: auto;
292            box-shadow: 2px 2px 0 0 #000;
293        }
294        #back-to-top.is-visible {
295            opacity: 1;
296            pointer-events: auto;
297        }
298        #back-to-top:hover {
299            transform: translateY(-4px);
300            box-shadow: 4px 4px 0 0 #000;
301        }
302        @media (min-width: 1280px) {
303            #back-to-top {
304                bottom: 20px;
305            }
306        }
307
308        /* ヒーローセクション */
309        .hero-container {
310            position: relative;
311            width: 100%;
312            height: 850px;
313            overflow: hidden;
314            background-color: #000;
315            background-image: url('images/1class_top.png');
316            background-size: cover;
317            background-position: center;
318        }
319        @media (max-width: 767px) {
320            .hero-container {
321                height: 650px;
322                max-height: 85vh;
323            }
324        }
325        .hero-video {
326            position: absolute;
327            top: 0;
328            left: 0;
329            width: 100%;
330            height: 100%;
331            object-fit: cover;
332            z-index: 0;
333            opacity: 1;
334        }
335        .video-overlay {
336            position: absolute;
337            top: 0;
338            left: 0;
339            width: 100%;
340            height: 100%;
341            background-color: #000; 
342            opacity: 0;
343            pointer-events: none;
344            z-index: 1;
345            transition: opacity 1.0s ease-in-out;
346        }
347    </style>
348</head>
349<body class="bg-white" id="page-top">
350<!-- Google Tag Manager (noscript) -->
vendor: 71 bytes, lines 350-352
350
351<noscript>
352<iframe src="https://www.googletagmanager.com/ns.html?id=
352GTM-KXV8G74
vendor: 93 bytes, lines 352-356
352"
353height="0" width="0" style="display:none;visibility:hidden"></iframe>
354</noscript>
355
356    
356<!-- ヘッダー -->
357    <div id="fixed-header-wrapper" class="fixed top-0 left-0 w-full z-50 flex flex-col">
358        <header class="relative z-30 border-b border-black transition-all duration-300 bg-gray-100">
359            <div class="w-full max-w-[1200px] mx-auto">
360                
361                <!-- 【PC表示 (xl以上)】 -->
362                <div class="hidden xl:flex flex-row justify-between items-center px-4 py-3">
363                    <div class="header-logo-area w-auto">
364                        <a href="index.html">
365                            <img src="images/rogo.png" alt="ちょうなん西小 学校撮影スタジオ ロゴ" class="h-[60px] object-contain">
366                        </a>
367                    </div>
368                    <div class="flex flex-row items-center gap-8">
369                        <div class="text-right">
370                            <a href="tel:0120154244" class="text-2xl font-bold tracking-wider hover:opacity-70 whitespace-nowrap">0120-154-244</a>
371                            <div class="text-xs text-gray-600 whitespace-nowrap">(受付時間:10:00〜17:00)</div>
372                        </div>
373                        <div class="flex flex-row gap-2">
374                            <a href="https://survey.mynavi.jp/cre/?enq=CEHdZ%2f%2b5UfY%3d" target="_blank" class="btn-header-pop bg-[#ffed2b] border border-black rounded-full px-8 py-3 text-xl font-bold text-center block whitespace-nowrap text-black flex items-center justify-center">
375                                <i class="fa-regular fa-envelope mr-2 text-2xl"></i> 空き状況・資料請求はこちら
376                            </a>
377                        </div>
378                    </div>
379                </div>
380
381                <!-- 【タブレット/スマホ表示 (xl未満)】 -->
382                <div class="xl:hidden flex flex-row justify-between items-center px-4 py-3 h-[70px] relative">
383                    
384                    <!-- 左: ロゴ -->
385                    <div class="flex-shrink-0">
386                        <a href="index.html">
387                            <img src="images/rogo.png" alt="ちょうなん西小 学校撮影スタジオ ロゴ" class="h-[40px] md:h-[50px] object-contain">
388                        </a>
389                    </div>
390
391                    <!-- 右: アイコン群 (電話 + ハンバーガー) -->
392                    <div class="flex flex-row items-center gap-5">
393                        <a href="tel:0120154244" class="flex items-center justify-center w-10 h-10 bg-[#ffed2b] border border-black rounded-full shadow-[2px_2px_0_0_#000] active:translate-y-[1px] active:shadow-none transition-all">
394                            <i class="fa-solid fa-phone text-lg"></i>
395                        </a>
396                        <button id="hamburger-btn" class="hamburger">
397                            <span class="hamburger-line"></span>
398                            <span class="hamburger-line"></span>
399                            <span class="hamburger-line"></span>
400                        </button>
401                    </div>
402
403                </div>
404
405            </div>
406        </header>
407
408        <!-- グローバルナビゲーション (PC用: xl以上で表示) -->
409        <nav id="site-nav" class="relative z-20 w-full pointer-events-none hidden xl:block">
410            <ul class="flex w-full max-w-[1200px] mx-auto text-center font-bold text-black gap-0 px-1 md:px-4 pointer-events-auto">
411                <li class="flex-1 -ml-[1px] first:ml-0">
412                    <a href="gallery.html" class="nav-item bg-nav-1 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2">
413                        <i class="fa-regular fa-image text-lg md:text-xl"></i>
414                        <div class="flex flex-col items-center leading-none">
415                            <span class="text-sm md:text-base">ギャラリー</span>
416                            <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">GALLERY</span>
417                        </div>
418                    </a>
419                </li>
420                <li class="flex-1 -ml-[1px] first:ml-0">
421                    <a href="index.html#price" class="nav-item bg-nav-2 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2">
422                        <i class="fa-solid fa-yen-sign text-lg md:text-xl"></i>
423                        <div class="flex flex-col items-center leading-none">
424                            <span class="text-sm md:text-base">利用料金</span>
425                            <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">PRICE</span>
426                        </div>
427                    </a>
428                </li>
429                <li class="flex-1 -ml-[1px] first:ml-0">
430                    <a href="index.html#faq" class="nav-item bg-nav-3 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2">
431                        <i class="fa-regular fa-circle-question text-lg md:text-xl"></i>
432                        <div class="flex flex-col items-center leading-none">
433                            <span class="text-sm md:text-base">FAQ</span>
434                            <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">FAQ</span>
435                        </div>
436                    </a>
437                </li>
438                <li class="flex-1 -ml-[1px] first:ml-0">
439                    <a href="index.html#access" class="nav-item bg-nav-4 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2">
440                        <i class="fa-solid fa-location-dot text-lg md:text-xl"></i>
441                        <div class="flex flex-col items-center leading-none">
442                            <span class="text-sm md:text-base">アクセス</span>
443                            <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">ACCESS</span>
444                        </div>
445                    </a>
446                </li>
447                <li class="flex-1 -ml-[1px] first:ml-0">
448                    <a href="case.html" class="nav-item bg-nav-5 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2">
449                        <i class="fa-solid fa-camera text-lg md:text-xl"></i>
450                        <div class="flex flex-col items-center leading-none">
451                            <span class="text-sm md:text-base">利用事例</span>
452                            <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">CASE</span>
453                        </div>
454                    </a>
455                </li>
456            </ul>
457        </nav>
458    </div>
459
460    <!-- モバイルメニュー (全画面オーバーレイ) -->
461    <div id="mobile-menu" class="fixed inset-0 bg-white z-40 flex flex-col justify-start items-center pt-24">
462        <!-- メニューリスト -->
463        <ul class="flex flex-col text-center w-full max-w-md px-6">
464            <li class="w-full">
465                <a href="gallery.html" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors">
466                    <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#ff7f9f] transition-colors">
467                        <i class="fa-regular fa-image mr-2"></i>ギャラリー
468                    </span>
469                    <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#ff7f9f] transition-colors font-sans">GALLERY</span>
470                </a>
471            </li>
472            <li class="w-full">
473                <a href="index.html#price" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors">
474                    <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#ffcc66] transition-colors">
475                        <i class="fa-solid fa-yen-sign mr-2"></i>利用料金
476                    </span>
477                    <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#ffcc66] transition-colors font-sans">PRICE</span>
478                </a>
479            </li>
480            <li class="w-full">
481                <a href="index.html#faq" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors">
482                    <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#00d2ff] transition-colors">
483                        <i class="fa-regular fa-circle-question mr-2"></i>FAQ
484                    </span>
485                    <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#00d2ff] transition-colors font-sans">FAQ</span>
486                </a>
487            </li>
488            <li class="w-full">
489                <a href="index.html#access" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors">
490                    <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#99eccb] transition-colors">
491                        <i class="fa-solid fa-location-dot mr-2"></i>アクセス
492                    </span>
493                    <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#99eccb] transition-colors font-sans">ACCESS</span>
494                </a>
495            </li>
496            <li class="w-full">
497                <a href="case.html" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors">
498                    <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#d999f0] transition-colors">
499                        <i class="fa-solid fa-camera mr-2"></i>利用事例
500                    </span>
501                    <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#d999f0] transition-colors font-sans">CASE</span>
502                </a>
503            </li>
504        </ul>
505    </div>
506
507    <!-- メインコンテンツ -->
508    <main id="main-content" class="relative w-full">
509        
510        <!-- メインビジュアル -->
511        <section class="hero-container bg-gray-100">
512            <!-- PC用動画 -->
513            <video class="hero-video hidden md:block" autoplay loop muted playsinline preload="auto">
514                <source src="images/cyounan01.mp4" type="video/mp4">
515            </video>
516            <!-- スマホ用動画 -->
517            <video class="hero-video block md:hidden" autoplay loop muted playsinline preload="auto">
518                <source src="images/cyounan01_sp.mp4" type="video/mp4">
519            </video>
520            
521            <div class="video-overlay"></div>
522            
523            <div class="absolute bottom-12 md:bottom-24 right-4 md:right-[max(1rem,calc((100vw-1200px)/2+1rem))] z-20 text-right">
524                <h1 class="text-2xl md:text-5xl font-bold leading-relaxed text-white" style="text-shadow: 2px 2px 8px rgba(0,0,0,0.9);">
525                    ドラマ・映画・MVのロケ地に最適<br>
526                    都心から約80分の学校撮影スタジオ
527                </h1>
528            </div>
529        </section>
530
531        <!-- 特徴セクション -->
532        <section class="relative bg-[#ffed2b] pb-16 md:pb-24 pt-10">
533            <div class="mx-auto px-4 text-center relative z-10 w-full max-w-[1200px]">
534                <h2 class="text-lg md:text-2xl lg:text-3xl font-bold mb-8 md:mb-12 leading-loose text-black">
535                    <span class="marker-line text-black">テレビ・映画</span>から<span class="marker-line text-black">MV</span>まで<span class="marker-line text-black">長時間撮影</span>や<span class="marker-line text-black">貸切撮影</span>など<br>
536                    様々な撮影案件に対応可能な<span class="marker-line text-black">学校スタジオ</span>
537                </h2>
538
539                <div class="grid grid-cols-3 xl:grid-cols-6 gap-[15px] md:gap-[20px] justify-center mx-auto">
540                    <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon01.png" alt="ドラマ" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">ドラマ</span></div>
541                    <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon02.png" alt="映画" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">映画</span></div>
542                    <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon03.png" alt="バラエティ" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">バラエティ</span></div>
543                    <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon04.png" alt="MV" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">MV</span></div>
544                    <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon05.png" alt="CM" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">CM</span></div>
545                    <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon06.png" alt="YouTube" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">YouTube</span></div>
546                </div>
547            </div>
548        </section>
549
550        <!-- ギャラリーセクション (簡易版) -->
551        <section class="relative bg-white pb-16 md:pb-24">
552            <div class="absolute top-0 w-full z-10 pointer-events-none">
553                <div class="absolute top-0 left-0 w-full h-[15px] bg-[#ff7f9f] border-t border-b border-black z-10"></div>
554                <div class="max-w-[1200px] mx-auto px-4 relative h-0">
555                    <h2 class="absolute -top-[50px] left-4 bg-[#ff7f9f] text-black font-bold py-3 px-8 md:px-12 rounded-t-2xl border border-b-0 border-black text-lg md:text-xl z-20 h-[51px] flex items-center box-border">
556                        校内ロケーションギャラリー
557                    </h2>
558                    <div class="absolute top-[-1px] left-[17px] w-[calc(100%-34px)] md:w-[320px] h-[3px] bg-[#ff7f9f] z-30"></div>
559                </div>
560            </div>
561
562            <div class="max-w-[1200px] mx-auto px-4 pt-16 md:pt-24 flex flex-col xl:flex-row gap-8 items-start relative">
563                <div class="flex-1 w-full grid grid-cols-3 gap-2 md:gap-4 z-10">
564                    <div class="flex flex-col gap-2 md:gap-4">
565                        <div class="aspect-[4/3] bg-white border border-black overflow-hidden"><img src="images/watarirouka_03.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-1" alt="渡り廊下" loading="lazy"></div>
566                        <div class="aspect-[3/4] bg-white border border-black overflow-hidden"><img src="images/door01.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-4" alt="扉" loading="lazy"></div>
567                    </div>
568                    <div class="flex flex-col gap-2 md:gap-4">
569                        <div class="aspect-[3/4] bg-white border border-black overflow-hidden"><img src="images/taiikukan_02.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-2" alt="体育館" loading="lazy"></div>
570                        <div class="aspect-[4/3] bg-white border border-black overflow-hidden"><img src="images/classroom01.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-5" alt="教室" loading="lazy"></div>
571                    </div>
572                    <div class="flex flex-col gap-2 md:gap-4">
573                        <div class="aspect-[4/3] bg-white border border-black overflow-hidden"><img src="images/rouka01.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-3" alt="廊下" loading="lazy"></div>
574                        <div class="aspect-[3/4] bg-white border border-black overflow-hidden"><img src="images/book01.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-6" alt="図書室" loading="lazy"></div>
575                    </div>
576                </div>
577                <div class="hidden xl:flex absolute -right-24 top-0 w-24 h-full justify-center items-end z-0 opacity-100">
578                    <div class="text-6xl md:text-9xl font-bold vertical-text text-outline-gallery tracking-widest select-none" style="color: #ffe0eb; -webkit-text-stroke: 1px #000; font-family: 'Helvetica', sans-serif;">Gallery</div>
579                </div>
580            </div>
581            
582            <div class="flex justify-center mt-8 md:mt-12 relative z-10">
583                <a href="gallery.html" class="btn-header-pop bg-[#ff7f9f] text-black font-bold py-4 md:py-5 px-10 md:px-16 rounded-full border-2 border-black text-lg md:text-2xl flex items-center gap-2">
584                    校内ロケーションギャラリー 一覧 <i class="fa-solid fa-chevron-right text-base"></i>
585                </a>
586            </div>
587        </section>
588
589        <!-- 利用料金セクション -->
590        <section id="price" class="relative bg-white pb-16 md:pb-24 scroll-mt-[160px]">
591            <div class="absolute top-0 w-full z-10 pointer-events-none">
592                <div class="absolute top-0 left-0 w-full h-[15px] bg-[#ffcc66] border-t border-b border-black z-10"></div>
593                <div class="max-w-[1200px] mx-auto px-4 relative h-0">
594                    <h2 class="absolute -top-[50px] left-4 bg-[#ffcc66] text-black font-bold py-3 px-8 md:px-12 rounded-t-2xl border border-b-0 border-black text-lg md:text-xl z-20 h-[51px] flex items-center box-border">
595                        学校スタジオ利用料金
596                    </h2>
597                    <div class="absolute top-[-1px] left-[17px] w-[calc(100%-34px)] md:w-[280px] h-[3px] bg-[#ffcc66] z-30"></div>
598                </div>
599            </div>
600
601            <div class="max-w-[1200px] mx-auto px-4 pt-16 md:pt-24 flex flex-col xl:flex-row gap-8 items-start relative">
602                <div class="hidden lg:flex absolute -left-24 top-0 w-24 h-full justify-center items-start z-0 opacity-100">
603                    <div class="text-6xl md:text-9xl font-bold vertical-text text-outline-gallery tracking-widest select-none pt-16 md:pt-24" style="color: #fff0c7; -webkit-text-stroke: 1px #000; font-family: 'Helvetica', sans-serif;">Price</div>
604                </div>
605
606                <div class="flex-1 w-full z-10 text-black">
607                    <div class="bg-white mb-4">
608                        <table class="w-full text-center border-collapse border border-black">
609                            <thead>
610                                <tr class="bg-[#ffcc66] border-b border-black">
611                                    <th class="p-3 md:p-4 font-bold w-1/3 md:w-2/5 text-sm md:text-base border-r border-black">
612                                        <div class="flex flex-col items-center justify-center leading-none gap-1">
613                                            <div class="flex flex-row items-center justify-center gap-1 md:gap-1.5 mb-1">
614                                                <i class="fa-solid fa-yen-sign text-lg md:text-xl"></i>
615                                                <span class="text-sm md:text-base">料金表</span>
616                                            </div>
617                                            <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase">PRICE</span>
618                                        </div>
619                                    </th>
620                                    <th class="p-3 md:p-4 font-bold w-1/3 md:w-1.5/5 text-sm md:text-base border-r border-black align-middle">平日</th>
621                                    <th class="p-3 md:p-4 font-bold w-1/3 md:w-1.5/5 text-sm md:text-base align-middle">土日祝</th>
622                                </tr>
623                            </thead>
624                            <tbody class="font-bold text-sm md:text-base">
625                                <tr class="border-b border-black">
626                                    <td class="p-3 md:p-4 bg-[#ffffcc] border-r border-black">日中 / 11:00〜18:00</td>
627                                    <td class="p-3 md:p-4 border-r border-black">¥27,500/ 時間</td>
628                                    <td class="p-3 md:p-4">¥33,000/ 時間</td>
629                                </tr>
630                                <tr class="border-b border-black">
631                                    <td class="p-3 md:p-4 bg-[#ffffcc] border-r border-black">朝 / 7:00 〜 11:00<br>夜 / 18:00 〜 21:00</td>
632                                    <td class="p-3 md:p-4 border-r border-black">¥33,000/ 時間</td>
633                                    <td class="p-3 md:p-4">¥38,500/ 時間</td>
634                                </tr>
635                                <tr class="border-b border-black">
636                                    <td class="p-3 md:p-4 bg-[#ffffcc] border-r border-black">早朝・深夜 / 21:00 〜 7:00</td>
637                                    <td class="p-3 md:p-4 border-r border-black">¥38,000/ 時間</td>
638                                    <td class="p-3 md:p-4">¥44,000/ 時間</td>
639                                </tr>
640                                <tr>
641                                    <td class="p-3 md:p-4 bg-[#ffffcc] border-r border-black">宿泊費 チェックイン / 11:00<br>チェックアウト / 10:00</td>
642                                    <td class="p-3 md:p-4 border-r border-black">¥5,500/ 人</td>
643                                    <td class="p-3 md:p-4">¥6,600/ 人</td>
644                                </tr>
645                            </tbody>
646                        </table>
647                    </div>
648                    <div class="mb-8">
649                        <p class="text-xs md:text-sm leading-relaxed text-left inline-block font-bold">
650                            ※最低ご利用時間は4時間~となります。<br>
651                            ※上記料金は税込です。<br>
652                            ※21:00~翌7:00で撮影を行う場合、宿泊費用が発生いたします。<br>
653                            ※宿泊利用は通常2部屋(大部屋)とさせていただきます。
654                        </p>
655                    </div>
656
657                    <div class="mb-8 md:mb-12">
658                        <h3 class="text-lg font-bold border-b border-black mb-4 pb-1">基本料金に含まれるもの</h3>
659                        <ul class="list-disc pl-5 text-sm md:text-base space-y-1 mb-8">
660                            <li>スチール・動画ともに同料金です。</li>
661                            <li>上記料金には全ての設備の利用が含まれております。</li>
662                        </ul>
663
664                        <h3 class="text-lg font-bold border-b border-black mb-4 pb-1">商用利用について</h3>
665                        <div class="text-sm md:text-base space-y-2 mb-8 leading-relaxed">
666                            <p>法人・個人問わず営利目的の利用は全て商用利用とさせていただきます。</p>
667                            <p>一般申し込みをされ、当日に商用利用と判明した場合、商用料金をご請求させていただきます。</p>
668                            <p class="font-bold mt-2">【商用利用に該当する例】</p>
669                            <ul class="list-disc pl-5 space-y-1">
670                                <li>ストックフォトや素材の為の撮影</li>
671                                <li>WEBサイトや各種媒体に掲載するための撮影</li>
672                                <li>SNS、CM、ドラマ、PV、MV、インタビュー、雑誌、カタログ撮影などの写真又は映像撮影</li>
673                                <li>音楽活動、タレント、モデル活動、ダンサーなど直接利益を得る目的ではなくとも業務で広く公開される素材の撮影</li>
674                                <li>カメラマンの作品撮り</li>
675                                <li>撮影のみならず、会費や参加料を徴収する有料イベント</li>
676                            </ul>
677                        </div>
678
679                        <h3 class="text-lg font-bold border-b border-black mb-4 pb-1">ご利用の際の注意事項</h3>
680                        <ul class="list-disc pl-5 text-sm md:text-base space-y-1 mb-8 leading-relaxed">
681                            <li>近隣住民の迷惑になるような利用はお控えください。</li>
682                            <li>大きな音を出す撮影やイベントに関しては、一度お問合せください。</li>
683                            <li>利用後は原状回復をお願い致します。</li>
684                            <li>器物破損や施設破損が発生した場合は別途請求させて頂きます。</li>
685                            <li>貴重品等の紛失に対して、当施設では責任を負いかねますのでご自身で管理をお願い致します。</li>
686                            <li>公序良俗に反する撮影、イベントはお断りさせていただきます。</li>
687                        </ul>
688                    </div>
689
690                    <a href="https://survey.mynavi.jp/cre/?enq=CEHdZ%2f%2b5UfY%3d" target="_blank" class="block relative overflow-hidden shadow-pop hover-lift mx-auto w-full max-w-[600px] group" style="border-radius: 0 60px 0 60px;">
691                        <img src="images/5gaikan.png" class="absolute inset-0 w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110" alt="学校外観" loading="lazy">
692                        <div class="absolute inset-0 bg-black/60 mix-blend-multiply transition-opacity duration-300 group-hover:opacity-80"></div>
693                        <div class="relative z-10 p-8 md:p-12 text-center text-white flex justify-center">
694                            <h3 class="text-xl md:text-2xl font-bold mb-2 inline-flex items-center gap-2 md:gap-3 text-left">
695                                <span>ロケハン・撮影・<br>資料請求はこちら</span>
696                                <i class="fa-solid fa-chevron-right text-lg md:text-2xl"></i>
697                            </h3>
698                        </div>
699                    </a>
700                    
701                    <div class="text-center mt-8 font-bold">
702                        <p class="mb-2">ロケハンは無料で行っております。<br>事前予約制となりますのでご希望日をご連絡ください。</p>
703                        <p class="text-2xl md:text-3xl">TEL : 0120-154-244</p>
704                    </div>
705                </div>
706            </div>
707        </section>
708
709        <!-- FAQセクション -->
710        <section id="faq" class="relative bg-white pb-24 md:pb-48 scroll-mt-[160px]">
711            <div class="absolute top-0 w-full z-10 pointer-events-none">
712                <div class="absolute top-0 left-0 w-full h-[15px] bg-[#00d2ff] border-t border-b border-black z-10"></div>
713                <div class="max-w-[1200px] mx-auto px-4 relative h-0">
714                    <h2 class="absolute -top-[50px] left-4 bg-[#00d2ff] text-black font-bold py-3 px-8 md:px-12 rounded-t-2xl border border-b-0 border-black text-lg md:text-xl z-20 h-[51px] flex items-center justify-center box-border">
715                        FAQ
716                    </h2>
717                    <div class="absolute top-[-1px] left-[17px] w-[calc(100%-34px)] md:w-[130px] h-[3px] bg-[#00d2ff] z-30"></div>
718                </div>
719            </div>
720
721            <div class="max-w-[1200px] mx-auto px-4 pt-16 md:pt-24 relative">
722                <div class="hidden xl:flex absolute -right-24 top-0 w-24 h-full justify-center items-start z-0 opacity-100">
723                    <div class="text-6xl md:text-9xl font-bold vertical-text text-outline-gallery tracking-widest select-none pt-16 md:pt-24" style="color: #ccf5ff; -webkit-text-stroke: 1px #000; font-family: 'Helvetica', sans-serif;">
724                        FAQ
725                    </div>
726                </div>
727
728                <div class="w-full max-w-[900px] mx-auto z-10 text-black">
729                    <div class="mb-10 md:mb-12">
730                        <h3 class="text-xl md:text-2xl font-bold text-center mb-6 md:mb-8">ご予約について</h3>
731                        <div class="space-y-4 md:space-y-6">
732                            <!-- FAQ items -->
733                            <div class="faq-item">
734                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
735                                    <div class="flex items-start gap-2">
736                                        <span class="font-bold text-lg">Q</span>
737                                        <span class="font-bold text-sm md:text-base pt-0.5">利用の際はどのような流れですか?</span>
738                                    </div>
739                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
740                                </button>
741                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
742                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
743                                        <span class="font-bold text-lg text-black">A</span>
744                                        <div class="leading-relaxed">
745                                            ①電話又は問合せフォームにて候補日と企画内容をお知らせください。<br>
746                                            ②弊社の担当から折り返し連絡をさせていただき、空き状況やお見積りをご案内いたします。<br>
747                                            ③利用確定後、「商業利用約款」「誓約書」をお送りしますので、当日までにご記入いただき、原本の送付をお願いいたします。<br>
748                                            ④お支払いは現地決済又は銀行振込が可能です。銀行振込の場合、利用月の月末締め、翌月末払いとなります。
749                                        </div>
750                                    </div>
751                                </div>
752                            </div>
753                            <div class="faq-item">
754                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
755                                    <div class="flex items-start gap-2">
756                                        <span class="font-bold text-lg">Q</span>
757                                        <span class="font-bold text-sm md:text-base pt-0.5">ロケハンは可能ですか?</span>
758                                    </div>
759                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
760                                </button>
761                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
762                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
763                                        <span class="font-bold text-lg text-black">A</span>
764                                        <div class="leading-relaxed">
765                                            可能でございます。無料で行えます。日程等調整させていただきますので、まずはお気軽にご相談ください。(<a href="tel:0120154244" class="underline hover:no-underline">0120-154-244</a>)
766                                        </div>
767                                    </div>
768                                </div>
769                            </div>
770                            <div class="faq-item">
771                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
772                                    <div class="flex items-start gap-2">
773                                        <span class="font-bold text-lg">Q</span>
774                                        <span class="font-bold text-sm md:text-base pt-0.5">空き状況は確認できますか?</span>
775                                    </div>
776                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
777                                </button>
778                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
779                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
780                                        <span class="font-bold text-lg text-black">A</span>
781                                        <div class="leading-relaxed">
782                                            ご希望の候補日を電話又は問合せフォームからお知らせください。空き状況をお伝えさせていただきます。
783                                        </div>
784                                    </div>
785                                </div>
786                            </div>
787                            <div class="faq-item">
788                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
789                                    <div class="flex items-start gap-2">
790                                        <span class="font-bold text-lg">Q</span>
791                                        <span class="font-bold text-sm md:text-base pt-0.5">仮予約はできますか?</span>
792                                    </div>
793                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
794                                </button>
795                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
796                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
797                                        <span class="font-bold text-lg text-black">A</span>
798                                        <div class="leading-relaxed">
799                                            可能でございます。複数日程の仮予約も受け付けております。
800                                        </div>
801                                    </div>
802                                </div>
803                            </div>
804                            <div class="faq-item">
805                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
806                                    <div class="flex items-start gap-2">
807                                        <span class="font-bold text-lg">Q</span>
808                                        <span class="font-bold text-sm md:text-base pt-0.5">1時間のみの撮影も可能ですか?</span>
809                                    </div>
810                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
811                                </button>
812                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
813                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
814                                        <span class="font-bold text-lg text-black">A</span>
815                                        <div class="leading-relaxed">
816                                            最低4時間からご予約を受け付けております。1時間のみの撮影も可能ですが、4時間分の料金がかかってしまいますので予めご了承ください。
817                                        </div>
818                                    </div>
819                                </div>
820                            </div>
821                            <div class="faq-item">
822                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
823                                    <div class="flex items-start gap-2">
824                                        <span class="font-bold text-lg">Q</span>
825                                        <span class="font-bold text-sm md:text-base pt-0.5">早朝・深夜の撮影は可能ですか?</span>
826                                    </div>
827                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
828                                </button>
829                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
830                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
831                                        <span class="font-bold text-lg text-black">A</span>
832                                        <div class="leading-relaxed">
833                                            可能でございます。21〜7時に撮影を行う場合は利用料金と別途お一人様あたりの宿泊料をいただきます。また、早朝や深夜においては近隣住民の迷惑にならない範囲で撮影をお願いいたします。
834                                        </div>
835                                    </div>
836                                </div>
837                            </div>
838                        </div>
839                    </div>
840
841                    <!-- ご利用について -->
842                    <div>
843                        <h3 class="text-xl md:text-2xl font-bold text-center mb-6 md:mb-8">ご利用について</h3>
844                        <div class="space-y-4 md:space-y-6">
845                            <div class="faq-item">
846                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
847                                    <div class="flex items-start gap-2">
848                                        <span class="font-bold text-lg">Q</span>
849                                        <span class="font-bold text-sm md:text-base pt-0.5">どのような撮影ができますか?</span>
850                                    </div>
851                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
852                                </button>
853                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
854                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
855                                        <span class="font-bold text-lg text-black">A</span>
856                                        <div class="leading-relaxed">
857                                            学校ロケーションをメインとした撮影が可能です。ドラマ、映画、バラエティ、CM、MVなど多くの実績がございますのでまずはお気軽にお問い合わせください。
858                                        </div>
859                                    </div>
860                                </div>
861                            </div>
862                            <div class="faq-item">
863                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
864                                    <div class="flex items-start gap-2">
865                                        <span class="font-bold text-lg">Q</span>
866                                        <span class="font-bold text-sm md:text-base pt-0.5">撮影できる範囲はどこまでですか?</span>
867                                    </div>
868                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
869                                </button>
870                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
871                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
872                                        <span class="font-bold text-lg text-black">A</span>
873                                        <div class="leading-relaxed">
874                                            貸切のため、全館ご使用いただけます。
875                                        </div>
876                                    </div>
877                                </div>
878                            </div>
879                            <div class="faq-item">
880                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
881                                    <div class="flex items-start gap-2">
882                                        <span class="font-bold text-lg">Q</span>
883                                        <span class="font-bold text-sm md:text-base pt-0.5">更衣室はありますか?</span>
884                                    </div>
885                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
886                                </button>
887                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
888                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
889                                        <span class="font-bold text-lg text-black">A</span>
890                                        <div class="leading-relaxed">
891                                            別室として「更衣室」は用意がないですが、カーテンがある部屋を更衣室としてご利用いただけます。
892                                        </div>
893                                    </div>
894                                </div>
895                            </div>
896                            <div class="faq-item">
897                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
898                                    <div class="flex items-start gap-2">
899                                        <span class="font-bold text-lg">Q</span>
900                                        <span class="font-bold text-sm md:text-base pt-0.5">お弁当の手配はできますか?</span>
901                                    </div>
902                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
903                                </button>
904                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
905                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
906                                        <span class="font-bold text-lg text-black">A</span>
907                                        <div class="leading-relaxed">
908                                            個数によっては対応させていただきます。
909                                        </div>
910                                    </div>
911                                </div>
912                            </div>
913                            <div class="faq-item">
914                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
915                                    <div class="flex items-start gap-2">
916                                        <span class="font-bold text-lg">Q</span>
917                                        <span class="font-bold text-sm md:text-base pt-0.5">飲み物は買えますか?</span>
918                                    </div>
919                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
920                                </button>
921                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
922                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
923                                        <span class="font-bold text-lg text-black">A</span>
924                                        <div class="leading-relaxed">
925                                            敷地内に自販機がございますのでそちらをご利用ください。(現金のみ)
926                                        </div>
927                                    </div>
928                                </div>
929                            </div>
930                            <div class="faq-item">
931                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
932                                    <div class="flex items-start gap-2">
933                                        <span class="font-bold text-lg">Q</span>
934                                        <span class="font-bold text-sm md:text-base pt-0.5">撮影機材・備品の貸出はありますか?</span>
935                                    </div>
936                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
937                                </button>
938                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
939                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
940                                        <span class="font-bold text-lg text-black">A</span>
941                                        <div class="leading-relaxed">
942                                            貸出備品等は用意がございませんので各自ご持参ください。
943                                        </div>
944                                    </div>
945                                </div>
946                            </div>
947                            <div class="faq-item">
948                                <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none">
949                                    <div class="flex items-start gap-2">
950                                        <span class="font-bold text-lg">Q</span>
951                                        <span class="font-bold text-sm md:text-base pt-0.5">駐車場はありますか?</span>
952                                    </div>
953                                    <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i>
954                                </button>
955                                <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]">
956                                    <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
957                                        <span class="font-bold text-lg text-black">A</span>
958                                        <div class="leading-relaxed">
959                                            敷地内に約20台ほど駐車が可能です。大型車の駐車も可能です。
960                                        </div>
961                                    </div>
962                                </div>
963                            </div>
964                        </div>
965                    </div>
966                </div>
967            </div>
968        </section>
969
970        <!-- アクセスセクション -->
971        <section id="access" class="relative bg-white pb-16 md:pb-24 scroll-mt-[160px]">
972            <div class="absolute top-0 w-full z-10 pointer-events-none">
973                <div class="absolute top-0 left-0 w-full h-[15px] bg-[#99eccb] border-t border-b border-black z-10"></div>
974                <div class="max-w-[1200px] mx-auto px-4 relative h-0">
975                    <h2 class="absolute -top-[50px] left-4 bg-[#99eccb] text-black font-bold py-3 w-[320px] rounded-t-2xl border border-b-0 border-black text-lg md:text-xl z-20 h-[51px] flex items-center justify-center box-border">
976                        アクセス・近隣情報
977                    </h2>
978                    <div class="absolute top-[-1px] left-[17px] w-[294px] h-[3px] bg-[#99eccb] z-30"></div>
979                </div>
980            </div>
981
982            <div class="max-w-[1200px] mx-auto px-4 pt-16 md:pt-20 flex flex-col md:flex-row gap-8 items-start relative">
983                <div class="hidden xl:flex absolute -left-24 top-0 w-24 h-full justify-center items-start z-0 opacity-100">
984                    <div class="text-6xl md:text-9xl font-bold vertical-text text-outline-gallery tracking-widest select-none pt-16 md:pt-32" style="color: #e0fcf5; -webkit-text-stroke: 1px #000; font-family: 'Helvetica', sans-serif;">
985                        Access
986                    </div>
987                </div>
988
989                <div class="flex-1 w-full z-10 text-black">
990                    <!-- Google Map -->
991                    <div class="w-full h-[450px] md:h-[550px] mb-8 shadow-sm">
992                        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d36688.09553724489!2d140.23166391371004!3d35.37961501187242!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6022bb23a4b2e143%3A0xb82898ca68d4a39f!2z5Luy6ZaT44Go5rOK44G-44KL5a2m5qChIOOBoeOCh-OBhuOBquOCk-ilv-Wwjw!5e0!3m2!1sja!2sjp!4v1768897684970!5m2!1sja!2sjp" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
993                    </div>
994
995                    <div class="max-w-[900px] mx-auto">
996                        <div class="text-center mb-12">
997                            <p class="font-bold text-lg md:text-xl mb-1">〒297-0145 千葉県長生郡長南町佐坪 1348-1</p>
998                            <p class="font-bold text-lg md:text-xl mb-3">
999                                [ 電話 ] <a href="tel:0120154244" class="underline hover:no-underline">0120-154-244</a> (受付時間 : 10:00 〜 17:00)
1000                            </p>
1001                            <p class="text-sm md:text-base text-red-600 font-bold leading-normal">
1002                                ※カーナビ・Google Mapで検索する際は「ちょうなん西小」もしくは<br>
1003                                「旧長南町立西小学校」で検索されるとスムーズです。
1004                            </p>
1005                        </div>
1006
1007                        <div class="text-center mb-8">
1008                            <h3 class="text-xl md:text-2xl font-bold">お車でのアクセス</h3>
1009                        </div>
1010                        <div class="flex flex-col md:flex-row gap-3 md:gap-8 mb-16 items-center">
1011                            <div class="w-full md:w-5/12 aspect-video bg-gray-200 overflow-hidden rounded-tl-3xl rounded-br-3xl shadow-none">
1012                                <img src="images/parking.jpg" class="w-full h-full object-cover" alt="駐車場" loading="lazy">
1013                            </div>
1014                            <div class="flex-1 md:pt-0 w-full">
1015                                <h4 class="text-lg md:text-xl font-bold mb-2">茂原長南 IC より 約 15 分</h4>
1016                                <p class="text-sm md:text-base leading-normal text-ju
1016stify">
1017                                    お車でお越しの方は、校舎裏にある駐車スペースをご利用ください。詳しくはスタッフまでお声がけください。<br>
1018                                    大型車両の駐車も可能ですので、ロケバス等でお越しの際もご安心ください。
1019                                </p>
1020                            </div>
1021                        </div>
1022                    </div>
1023
1024                    <div class="max-w-[900px] mx-auto border-t border-black py-12 mb-12">
1025                        <h3 class="text-center text-xl md:text-2xl font-bold mb-10">近隣ロケ情報</h3>
1026                        <div class="space-y-12 text-left">
1027                            <div class="flex flex-col md:flex-row gap-3 md:gap-8 items-center">
1028                                <div class="w-full md:w-5/12 aspect-video bg-gray-200 overflow-hidden rounded-tl-3xl rounded-br-3xl">
1029                                    <img src="images/beach.jpg" class="w-full h-full object-cover" alt="一宮海水浴場" loading="lazy">
1030                                </div>
1031                                <div class="flex-1 md:pt-0 w-full">
1032                                    <h4 class="text-lg font-bold mb-2">一宮海水浴場</h4>
1033                                    <p class="text-sm md:text-base leading-normal mb-2 text-justify">
1034                                        九十九里浜南端に位置する海水浴場。<br>
1035                                        約350m続く遠浅のビーチはやわらかな砂地で透明度も高いです。
1036                                    </p>
1037                                    <p class="text-xs md:text-sm text-gray-600">
1038                                        ※撮影許可は「一宮町 産業観光課 商工観光係」までご連絡ください。
1039                                    </p>
1040                                </div>
1041                            </div>
1042                            <div class="flex flex-col md:flex-row-reverse gap-3 md:gap-8 items-center">
1043                                <div class="w-full md:w-5/12 aspect-video bg-gray-200 overflow-hidden rounded-tl-3xl rounded-br-3xl">
1044                                    <img src="images/train.jpg" class="w-full h-full object-cover" alt="いすみ鉄道" loading="lazy">
1045                                </div>
1046                                <div class="flex-1 md:pt-0 w-full">
1047                                    <h4 class="text-lg font-bold mb-2">いすみ鉄道</h4>
1048                                    <p class="text-sm md:text-base leading-normal mb-2 text-justify">
1049                                        千葉県の大原駅〜上総中野駅を結ぶ、昭和レトロな車両、四季折々の美しい田園風景が魅力的な鉄道です。
1050                                    </p>
1051                                    <p class="text-xs md:text-sm text-gray-600">
1052                                        ※撮影許可は「いすみ鉄道」までご連絡ください。
1053                                    </p>
1054                                </div>
1055                            </div>
1056                            <div class="flex flex-col md:flex-row gap-3 md:gap-8 items-center">
1057                                <div class="w-full md:w-5/12 aspect-video bg-gray-200 overflow-hidden rounded-tl-3xl rounded-br-3xl">
1058                                    <img src="images/herb.jpg" class="w-full h-full object-cover" alt="大多喜ハーブガーデン" loading="lazy">
1059                                </div>
1060                                <div class="flex-1 md:pt-0 w-full">
1061                                    <h4 class="text-lg font-bold mb-2">大多喜ハーブガーデン</h4>
1062                                    <p class="text-sm md:text-base leading-normal mb-2 text-justify">
1063                                        全天候型ガラスハウスガーデンです。施設には自社農園・ハーブカフェレストラン・ガーデンショップ・魔女の実験室・ドッグカフェ等があります。
1064                                    </p>
1065                                    <p class="text-xs md:text-sm text-gray-600">
1066                                        ※撮影許可は「大多喜ロケーションサービス」まã
1066§ã”連絡ください。
1067                                    </p>
1068                                </div>
1069                            </div>
1070                        </div>
1071                    </div>
1072                </div>
1073            </div>
1074        </section>
1075
1076    </main>
1077
1078    <!-- フッター -->
1079    <footer class="bg-gray-100 text-black border-t-2 border-black pt-12 pb-24 xl:pb-6">
1080        <div class="max-w-[1200px] mx-auto px-4">
1081            
1082            <div class="flex flex-col xl:flex-row justify-between items-center xl:items-start mb-8 gap-6 xl:gap-8">
1083                <div class="w-full xl:w-auto flex justify-center xl:justify-start">
1084                    <img src="images/rogo.png" alt="ちょうなん西小 学校撮影スタジオ" class="h-12 xl:h-16 object-contain" loading="lazy">
1085                </div>
1086                <div class="text-xs md:text-sm leading-snug w-full xl:w-auto text-center xl:text-left space-y-1">
1087                    <p>〒297-0145 千葉県長生郡長南町佐坪 1348-1</p>
1088                    <p class="hidden xl:block font-bold">[ 電話 ] 0120-154-244</p>
1089                    <p>受付時間 10:00〜17:00(年末年始除く)</p>
1090                    <p>旅館業許可番号 / 第 30-5 号</p>
1091                    <p>運営会社:株式会社マイナビ</p>
1092                </div>
1093                <div class="flex flex-row flex-wrap gap-x-4 gap-y-2 text-[10px] md:text-sm font-bold w-full xl:w-auto justify-center xl:justify-start items-center xl:items-start">
1094                    <a href="https://chonan-nishisho.jp/wp-content/themes/chonan/images/pdf/yakkan2025.pdf" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 hover:underline whitespace-nowrap"><i class="fa-solid fa-play text-[8px] md:text-[10px]"></i> 宿泊約款 <i class="fa-solid fa-arrow-up-right-from-square text-[8px] md:text-[10px]"></i></a>
1095                    <a href="【ちょうなん西小】商業利用約款.pdf" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 hover:underline whitespace-nowrap"><i class="fa-solid fa-play text-[8px] md:text-[10px]"></i> 商用利用約款 <i class="fa-solid fa-arrow-up-right-from-square text-[8px] md:text-[10px]"></i></a>
1096                    <a href="https://chonan-nishisho.jp/policy" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 hover:underline whitespace-nowrap"><i class="fa-solid fa-play text-[8px] md:text-[10px]"></i> プライバシーポリシー <i class="fa-solid fa-arrow-up-right-from-square text-[8px] md:text-[10px]"></i></a>
1097                </div>
1098            </div>
1099            
1100            <div class="hidden xl:block border-t border-b border-black py-4 mb-8">
1101                <div class="flex flex-row justify-center items-center gap-8 font-bold text-base">
1102                    <div class="flex flex-wrap justify-center gap-8">
1103                        <a href="gallery.html" class="hover:opacity-70">ギャラリー</a><span>|</span><a href="index.html#price" class="hover:opacity-70">利用料金</a><span>|</span><a href="index.html#faq" class="hover:opacity-70">FAQ</a><span>|</span><a href="index.html#access" class="hover:opacity-70">アクセス</a><span>|</span><a href="case.html" class="hover:opacity-70">利用事例</a>
1104                    </div>
1105                    <a href="https://www.instagram.com/chonan_nishisho/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 border border-black rounded px-3 py-1 hover:bg-gray-200 transition-colors"><i class="fa-brands fa-instagram text-lg"></i> Instagram</a>
1106                </div>
1107            </div>
1108
1109            <div class="xl:hidden w-full flex flex-col items-center gap-4 mb-4">
1110                 <div class="w-full border-t border-black mb-2"></div>
1111                 <div class="flex flex-wrap justify-center gap-4 font-bold text-xs">
1112                      <a href="gallery.html">ギャラリー</a>
1113                      <a href="index.html#price">利用料金</a>
1114                      <a href="index.html#faq">FAQ</a>
1115                      <a href="index.html#access">アクセス</a>
1116                      <a href="case.html">利用事例</a>
1117                 </div>
1118                 
1119                <a href="https://www.instagram.com/chonan_nishisho/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 border border-black rounded px-6 py-2 hover:bg-gray-200 transition-colors">
1120                    <i class="fa-brands fa-instagram text-lg"></i> Instagram
1121                </a>
1122                
1123                <div class="w-full border-t border-black my-2"></div>
1124
1125                <div class="font-bold leading-tight text-center flex flex-col items-center">
1126                     <p class="text-sm md:text-3xl mb-1 flex items-center justify-center gap-2">
1127                         <a href="tel:0120154244" class="text-2xl md:text-3xl hover:opacity-70">0120-154-244</a>
1128                     </p>
1129                     <p class="text-[10px] md:text-sm whitespace-nowrap">(受付時間 : 10:00 〜 17:00)</p>
1130                </div>
1131            </div>
1132            
1133            <div class="hidden xl:flex flex-col items-center mb-6 w-full">
1134                <div class="flex flex-row gap-4 justify-center mx-auto w-auto mb-6">
1135                    <a href="https://survey.mynavi.jp/cre/?enq=CEHdZ%2f%2b5UfY%3d" target="_blank" class="btn-header-pop bg-[#ffed2b] border border-black rounded-full px-12 py-4 text-xl font-bold text-center flex items-center justify-center gap-2">
1136                        <i class="fa-regular fa-envelope text-2xl"></i> 空き状況・資料請求はこちら
1137                    </a>
1138                </div>
1139            </div>
1140
1141            <div class="text-center text-[10px] md:text-xs text-gray-500">
1141Copyright &copy; Mynavi Corporation</div>
1142        </div>
1143    </footer>
1144
1145    <!-- 下部固定フッター (タブレット/スマホのみ: xl未満) -->
1146    <div class="fixed bottom-0 left-0 w-full z-50 xl:hidden px-2 py-3 flex pointer-events-none">
1147        <a href="https://survey.mynavi.jp/cre/?enq=CEHdZ%2f%2b5UfY%3d" target="_blank" class="flex-1 bg-[#ffed2b] border border-black rounded-lg py-3 flex items-center justify-center gap-2 text-black shadow-pop active:translate-y-[1px] active:shadow-none transition-all pointer-events-auto">
1148            <i class="fa-regular fa-envelope text-lg"></i>
1149            <span class="text-sm font-bold">空き状況・資料請求はこちら</span>
1150        </a>
1151    </div>
1152
1153    <!-- TOPに戻るボタン -->
1154    <a href="#page-top" id="back-to-top" class="fixed bottom-24 xl:bottom-8 right-4 z-[9999] bg-[#ffed2b] text-black border-2 border-black rounded-full w-14 h-14 hidden xl:flex flex-col items-center justify-center font-bold text-xs shadow-[2px_2px_0_0_#000] hover:translate-y-[-2px] hover:shadow-[4px_4px_0_0_#000] transition-all duration-300 opacity-0 pointer-events-none">
1155        <i class="fa-solid fa-chevron-up text-lg mb-[-2px]"></i>
1156        TOP
1157    </a>
1158    
1159    <!-- スマホ用TOPに戻るボタン -->
1160    <a href="#page-top" id="back-to-top-sp" class="fixed bottom-20 right-4 z-[9999] bg-[#ffed2b] text-black border-2 border-black rounded-full w-12 h-12 xl:hidden flex flex-col items-center justify-center font-bold text-[10px] shadow-[2px_2px_0_0_#000] active:translate-y-[1px] active:shadow-none transition-all duration-300 opacity-0 pointer-events-none">
1161        <i class="fa-solid fa-chevron-up text-base mb-[-2px]"></i>
1162        TOP
1163    </a>
1164
1165    <!-- スクリプト -->
1166    
1166<script>
1167        document.addEventListener('DOMContentLoaded', () => {
1168            // ハンバーガーメニュー制御
1169            const hamburgerBtn = document.getElementById('hamburger-btn');
1170            const mobileMenu = document.getElementById('mobile-menu');
1171            const mobileLinks = document.querySelectorAll('.mobile-link');
1172
1173            if (hamburgerBtn && mobileMenu) {
1174                hamburgerBtn.addEventListener('click', () => {
1175                    hamburgerBtn.classList.toggle('active');
1176                    
1177                    if (hamburgerBtn.classList.contains('active')) {
1178                         mobileMenu.style.opacity = '1';
1179                         mobileMenu.style.visibility = 'visible';
1180                         document.body.style.overflow = 'hidden';
1181                    } else {
1182                         mobileMenu.style.opacity = '0';
1183                         mobileMenu.style.visibility = 'hidden';
1184                         document.body.style.overflow = '';
1185                    }
1186                });
1187
1188                mobileLinks.forEach(link => {
1189                    link.addEventListener('click', () => {
1190                        hamburgerBtn.classList.remove('active');
1191                        mobileMenu.style.opacity = '0';
1192                        mobileMenu.style.visibility = 'hidden';
1193                        document.body.style.overflow = '';
1194                    });
1195                });
1196            }
1197
1198            // ヘッダー制御
1199            function adjustMainPadding() {
1200                const headerWrapper = document.getElementById('fixed-header-wrapper');
1201                const header = document.querySelector('header');
1202                const mainContent = document.getElementById('main-content');
1203                if (headerWrapper && header && mainContent) {
1204                    const headerHeight = header.offsetHeight;
1205                    mainContent.style.paddingTop = headerHeight + 'px';
1206                }
1207            }
1208
1209            window.addEventListener('load', adjustMainPadding);
1210            window.addEventListener('resize', adjustMainPadding);
1211            window.addEventListener('scroll', adjustMainPadding);
1212            
1213            // ロゴのスクロール制御とTOPボタン
1214            const backToTopButton = document.getElementById('back-to-top');
1215            const backToTopButtonSp = document.getElementById('back-to-top-sp');
1216            window.addEventListener('scroll', () => {
1217                if (window.scrollY > 50) {
1218                    document.body.classList.add('is-scrolled');
1219                } else {
1220                    document.body.classList.remove('is-scrolled');
1221                }
1222
1223                if (window.scrollY > 300) {
1224                    if(backToTopButton) {
1225                        backToTopButton.classList.add('is-visible');
1226                        backToTopButton.style.opacity = '1';
1227                        backToTopButton.style.pointerEvents = 'auto';
1228                    }
1229                    if(backToTopButtonSp) {
1230                        backToTopButtonSp.classList.add('is-visible');
1231                        backToTopButtonSp.style.opacity = '1';
1232                        backToTopButtonSp.style.pointerEvents = 'auto';
1233                    }
1234                } else {
1235                    if(backToTopButton) {
1236                        backToTopButton.classList.remove('is-visible');
1237                        backToTopButton.style.opacity = '0';
1238                        backToTopButton.style.pointerEvents = 'none';
1239                    }
1240                    if(backToTopButtonSp) {
1241                        backToTopButtonSp.classList.remove('is-visible');
1242                        backToTopButtonSp.style.opacity = '0';
1243                        backToTopButtonSp.style.pointerEvents = 'none';
1244                    }
1245                }
1246            });
1247
1248            // ギャラリー画像切り替え機能 (簡易版)
1249            const galleryImages = [
1250                'images/watarirouka_03.jpg',
1251                'images/taiikukan_02.jpg',
1252                'images/rouka01.jpg',
1253                'images/book01.jpg',
1254                'images/classroom01.jpg',
1255                'images/door01.jpg'
1256            ];
1257            const imgIds = [
1258                'gallery-img-1',
1259                'gallery-img-2',
1260                'gallery-img-3',
1261                'gallery-img-6',
1262                'gallery-img-5',
1263                'gallery-img-4'
1264            ];
1265            const rotateGallery = () => {
1266                const imgElements = imgIds.map(id => document.getElementById(id)).filter(el => el);
1267                
1268                // フェードアウト
1269                imgElements.forEach(el => el.classList.add('fade-out'));
1270
1271                setTimeout(() => {
1272                    // 画像入れ替え
1273                    const lastImage = galleryImages.pop();
1274                    galleryImages.unshift(lastImage);
1275                    
1276                    imgElements.forEach((el, index) => {
1277                        el.src = galleryImages[index];
1278                        // 読み込み完了または即時フェードイン
1279                        el.onload = () => el.classList.remove('fade-out');
1280                        if(el.complete) el.classList.remove('fade-out');
1281                    });
1282                }, 500); 
1283            };
1284            setInterval(rotateGallery, 5000); 
1285            
1286            // FAQアコーディオン制御
1287            const faqToggles = document.querySelectorAll('.faq-toggle');
1288            faqToggles.forEach(toggle => {
1289                toggle.addEventListener('click', () => {
1290                    const content = toggle.nextElementSibling;
1291                    const icon = toggle.querySelector('i');
1292                    if (content.style.maxHeight) {
1293                        content.style.maxHeight = null;
1294                        icon.style.transform = 'rotate(0deg)';
1295                    } else {
1296                        content.style.maxHeight = content.scrollHeight + "px";
1297                        icon.style.transform = 'rotate(180deg)';
1298                    }
1299                });
1300            });
1301
1302        });
1303    </script>
1303
1304</body>
1305</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.