PageSourceSearch

https://hikonecastle.com/night-viewing/

html hikonecastle.com collected 2026-10-02 05:30:48 UTC 55,067 bytes, 673 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ja" class="scroll-smooth">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>秋彩の国宝・彦根城 夜間特別公開</title>
7<!-- Tailwind CSS CDN --> 
8<script src="https://cdn.tailwindcss.com"></script>
8 
9<!-- Google Fonts: 日本の伝統美を伝える高品質な明朝体 & ゴシック体 -->
10<link rel="preconnect" href="https://fonts.googleapis.com">
11<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;600;700;900&family=Shippori+Mincho:wght@400;600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
13<style>
14body {
15    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
16    background-color: #0c0a09;
17    color: #ffffff;
18}
19.font-shippori {
20    font-family: 'Shippori Mincho', serif;
21}
22.font-serif {
23    font-family: 'Noto Serif JP', serif;
24}
25.font-sans-ui {
26    font-family: 'Inter', sans-serif;
27}
28.font-gothic {
29    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
30}
31/* 縦書き用ユーティリティ */
32.vertical-rl {
33    writing-mode: vertical-rl;
34    text-orientation: upright;
35}
36/* 和風グラデーションテキスト */
37.text-gold-gradient {
38    background: linear-gradient(135deg, #fef08a 0%, #d97706 50%, #b45309 100%);
39    -webkit-background-clip: text;
40    -webkit-text-fill-color: transparent;
41}
42.text-autumn-gradient {
43    background: linear-gradient(180deg, #fde047 0%, #ea580c 45%, #b91c1c 85%, #881337 100%);
44    -webkit-background-clip: text;
45    -webkit-text-fill-color: transparent;
46}
47    /* スクロールバーの非表示(横スクロールギャラリー用) */
48    .no-scrollbar::-webkit-scrollbar {
49display: none;
50}
51.no-scrollbar {
52    -ms-overflow-style: none;
53    scrollbar-width: none;
54}
55</style>
56</head>
57<body class="bg-[#0a0a0a] text-white antialiased selection:bg-amber-700 selection:text-white">
58
59<!-- ==========================================
60       固定背景:彦根城メインビジュアル & ブラー演出
61       ========================================== -->
62<div class="fixed top-0 left-0 w-full h-screen -z-10 overflow-hidden bg-black flex items-center justify-center pointer-events-none"> 
63  <!-- 左右の余白を馴染ませるアンビエント背景(低輝度) --> 
64  <img 
65      src="https://hikonecastle.com/night-viewing/2026_autumn/img/main.jpg" 
66      alt="" 
67      class="absolute inset-0 w-full h-full object-cover blur-2xl opacity-30 scale-110"
68      aria-hidden="true"
69    > 
70  
71  <!-- お城のメイン画像(スマホ時は迫力ある大きめ表示かつ上寄りに配置、PC時はバランス重視) -->
72  <div class="relative w-full h-full flex items-center justify-center -translate-y-16 sm:translate-y-0 pb-0 sm:pb-[8vh] md:pb-[10vh]"> <img 
73        id="castle-main-img"
74        src="https://hikonecastle.com/night-viewing/2026_autumn/img/main.jpg" 
75        alt="国宝・彦根城 夜間特別公開 秋彩" 
76        class="w-full sm:w-auto h-auto sm:h-full max-h-[75vh] sm:max-h-[76vh] md:max-h-[82vh] max-w-[130vw] sm:max-w-[92vw] scale-125 sm:scale-100 object-cover sm:object-contain object-center z-0 select-none filter drop-shadow-[0_10px_35px_rgba(0,0,0,0.9)] transition-[filter] duration-150 ease-out will-change-[filter]"> </div>
77  
78  <!-- スクロール連動の暗幕オーバーレイ(文字可読性向上) -->
79  <div 
80      id="castle-dark-overlay" 
81      class="absolute inset-0 bg-black/70 pointer-events-none z-[5] opacity-0 transition-opacity duration-150 ease-out"
82    ></div>
83  
84  <!-- 上下グラデーションオーバーレイ -->
85  <div class="absolute inset-0 bg-gradient-to-b from-black/50 via-transparent to-black/80 pointer-events-none z-10"></div>
86</div>
87
88<!-- ==========================================
89       ファーストビュー:タイトル & ロゴ(スクロール追従)
90       ========================================== -->
91<div class="relative w-full min-h-[72vh] sm:min-h-[92vh] flex flex-col justify-between pt-5 sm:pt-8 px-4 sm:px-8 md:px-12 z-20 pointer-events-none">
92  <div class="flex items-start justify-between w-full"> 
93    <!-- 左上ロゴブロック -->
94    <div class="pointer-events-auto flex flex-col items-center drop-shadow-[0_4px_12px_rgba(0,0,0,0.85)]">
95      <div class="mb-2.5 flex justify-center"> 
96        <!-- 国宝 彦根城 公式ロゴ(SVG) -->
97        <div class="relative flex flex-col items-center"> <a href="https://hikonecastle.com/"><img 
98              id="castle-logo-img"
99              src="https://hikonecastle.com/420th/rogo.svg" 
100              alt="国宝 彦根城" 
101              class="h-8 sm:h-10 md:h-12 w-auto object-contain filter brightness-0 invert drop-shadow-[0_2px_10px_rgba(0,0,0,0.9)]"
102              onerror="
103                this.style.display = 'none';
104                document.getElementById('castle-logo-fallback').style.display = 'block';
105              "
106            ></a> 
107          <!-- 画像読み込みフォールバック -->
108          <div id="castle-logo-fallback" class="hidden text-center select-none"> <span class="block text-[10px] sm:text-xs tracking-[0.35em] text-white/90 font-light">国宝</span> <span class="block text-2xl sm:text-3xl md:text-4xl font-shippori font-bold tracking-widest text-white leading-tight">彦根城</span> </div>
109        </div>
110      </div>
111      <!-- ロゴ下の縦書きテキスト:間隔を詰め、両方とも白文字、ロゴとセンタリング配置 -->
112      <div class="flex flex-row items-start justify-center gap-1 sm:gap-1.5">
113        <p class="vertical-rl font-shippori text-white text-[11px] sm:text-xs md:text-sm tracking-[0.25em] font-medium leading-none">夜間特別公開</p>
114        <p class="vertical-rl font-shippori text-white text-[11px] sm:text-xs md:text-sm tracking-[0.25em] font-medium leading-none">国宝・彦根城</p>
115      </div>
116    </div>
117    
118    <!-- 右上「秋彩」ブロック:金色枠なし、透過黒短冊、上下パディング均等 -->
119    <div class="pointer-events-auto bg-black/60 backdrop-blur-md rounded-2xl py-8 sm:py-12 md:py-14 px-4 sm:px-7 md:px-8 flex items-center gap-4 sm:gap-6 shadow-2xl drop-shadow-[0_10px_25px_rgba(0,0,0,0.9)]"> 
120      <!-- 金文字タイトル:文字サイズを大きく調整 -->
121      <div class="flex flex-row-reverse items-start gap-1.5 sm:gap-2">
122        <p class="vertical-rl font-shippori text-gold-gradient text-base sm:text-lg md:text-xl lg:text-2xl font-bold tracking-[0.25em] leading-none">国宝・彦根城</p>
123        <p class="vertical-rl font-shippori text-gold-gradient text-base sm:text-lg md:text-xl lg:text-2xl font-bold tracking-[0.25em] leading-none">夜間特別公開</p>
124      </div>
125      <!-- 秋彩 メインタイトル -->
126      <h1 class="vertical-rl font-shippori font-extrabold text-autumn-gradient text-5xl sm:text-7xl md:text-8xl lg:text-9xl tracking-[0.1em] select-none leading-none"> 秋彩 </h1>
127    </div>
128  </div>
129  
130  <!-- ファーストビュー下部:スクロール誘導インジケーター -->
131  <div class="w-full flex flex-col items-center pb-3 sm:pb-6"> <span class="text-[10px] sm:text-xs tracking-[0.3em] text-stone-400 mb-1.5 sm:mb-2 uppercase font-sans-ui drop-shadow-md">Scroll to explore</span>
132    <div class="w-[1px] h-6 sm:h-8 bg-gradient-to-b from-amber-400 to-transparent animate-pulse"></div>
133  </div>
134</div>
135
136<!-- ==========================================
137       メインコンテンツエリア
138       ========================================== -->
139<main class="relative z-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pb-24 space-y-16"> 
140  
141  <!-- 1. 国宝・彦根城 夜間特別公開について カード -->
142  <section class="bg-stone-900/90 backdrop-blur-md border border-stone-800 rounded-3xl p-6 sm:p-10 md:p-12 shadow-2xl">
143    <div class="text-center max-w-3xl mx-auto space-y-6"> <span class="text-amber-400 text-xs sm:text-sm tracking-[0.4em] uppercase font-sans-ui block font-semibold">ABOUT SPECIAL NIGHT VIEWING</span>
144      <h2 class="text-2xl sm:text-3xl md:text-4xl font-shippori font-bold text-white tracking-widest leading-relaxed"> 秋彩の国宝・彦根城 夜間特別公開 </h2>
145      <div class="w-16 h-0.5 bg-gradient-to-r from-amber-500 to-amber-200 mx-auto"></div>
146      <p class="font-gothic text-white leading-relaxed text-sm sm:text-base md:text-lg text-justify font-normal tracking-wide"> 白亜の天守が夜の静寂に浮かび上がる「秋彩の国宝・彦根城 夜間特別公開」。
147        築城400余年の歴史を誇る名城が、秋の夜長を彩るライトアップに照らし出され、昼間とは一変した幽玄で幻想的な佇まいを見せます。天守を取り巻く石垣の重厚な質感や、涼やかな夜風とともに楽しむ古城の陰影美を、心ゆくまでご堪能ください。 </p>
148    </div>
149    
150    <!-- 「国宝・彦根城 夜間特別公開について」下の横スクロール6枚写真ギャラリー -->
151    <div class="mt-10 pt-8 border-t border-stone-800/80">
152      <div class="flex items-center justify-between mb-4 px-1">
153        <p class="text-xs sm:text-sm text-white font-sans-ui tracking-wider flex items-center gap-2"> <span class="inline-block w-2 h-2 rounded-full bg-amber-500"></span> 夜間景観ギャラリー (全10景) </p>
154        <div class="flex items-center gap-2">
155          <button onclick="scrollHeroGallery(-1)" class="w-9 h-9 rounded-full bg-stone-800 hover:bg-stone-700 text-white flex items-center justify-center transition border border-stone-700" aria-label="前へ">
156          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
157            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
158          </svg>
159          </button>
160          <button onclick="scrollHeroGallery(1)" class="w-9 h-9 rounded-full bg-stone-800 hover:bg-stone-700 text-white flex items-center justify-center transition border border-stone-700" aria-label="次へ">
161          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
162            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
163          </svg>
164          </button>
165        </div>
166      </div>
167      <div id="hero-photo-gallery" class="flex gap-4 overflow-x-auto no-scrollbar scroll-smooth py-2"> 
168        <!-- 1.  -->
169        <div class="flex-none w-64 sm:w-72 md:w-80 group">
170          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE5F6.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
171            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
172          </div>
173        </div>
174        <!-- 2. -->
175        <div class="flex-none w-64 sm:w-72 md:w-80 group">
176          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE5A2.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
177            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
178          </div>
179        </div>
180        <!-- 3.  -->
181        <div class="flex-none w-64 sm:w-72 md:w-80 group">
182          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE8DE.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
183            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
184          </div>
185        </div>
186        <!-- 4. -->
187        <div class="flex-none w-64 sm:w-72 md:w-80 group">
188          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE605.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
189            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-trans
189parent to-transparent"></div>
190          </div>
191        </div>
192        <!-- 5. -->
193        <div class="flex-none w-64 sm:w-72 md:w-80 group">
194          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE606.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
195            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
196          </div>
197        </div>
198        <!-- 6. -->
199        <div class="flex-none w-64 sm:w-72 md:w-80 group">
200          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE8E5.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
201            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
202          </div>
203        </div>
204        <!-- 7.  -->
205        <div class="flex-none w-64 sm:w-72 md:w-80 group">
206          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE8E8.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
207            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
208          </div>
209        </div>
210        <!-- 8.  -->
211        <div class="flex-none w-64 sm:w-72 md:w-80 group">
212          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE8E0.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
213            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
214          </div>
215        </div>
216        <!-- 9.  -->
217        <div class="flex-none w-64 sm:w-72 md:w-80 group">
218          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE8E1.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
219            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
220          </div>
221        </div>
222        <!-- 10.  -->
223        <div class="flex-none w-64 sm:w-72 md:w-80 group">
224          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700 bg-stone-800"> <img src="imgs/P0003FE8E10.jpg" alt="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
225            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
226          </div>
227        </div>
228      </div>
229    </div>
230  </section>
231  
232  <!-- 2. 日時セクション(開催日カレンダー表示) -->
233  <section class="bg-stone-900/90 backdrop-blur-md border border-stone-800 rounded-3xl p-6 sm:p-10 shadow-2xl">
234    <div class="text-center mb-8"> <span class="text-amber-400 text-xs sm:text-sm tracking-[0.4em] uppercase font-sans-ui block font-semibold">SCHEDULE &amp; CALENDAR</span>
235      <h2 class="text-2xl sm:text-3xl font-shippori font-bold text-white tracking-widest mt-1">開催日程カレンダー</h2>
236      <p class="text-white text-sm mt-2 font-light"> 令和8年 9月19日(土)~ 12月5日(土)の毎週土曜日 + 連休・特定日開催 </p>
237      <p class="text-white text-sm mt-2 font-light">Held every Saturday from September 19 (Sat) to December 5 (Sat), 2026, plus consecutive holidays and specific dates.</p>
238    </div>
239    
240    <!-- 公開時間・概要インフォカード -->
241    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl mx-auto mb-8">
242      <div class="bg-stone-800/70 border border-stone-700/70 rounded-2xl p-5 flex items-center gap-4">
243        <div class="w-12 h-12 rounded-xl bg-amber-500/10 text-amber-400 flex items-center justify-center flex-shrink-0 border border-amber-500/30">
244          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
245            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
246          </svg>
247        </div>
248        <div> <span class="text-xs text-stone-300 font-medium block">公開時間</span>
249          <p class="text-xl font-bold text-amber-300">18:00 ~ 20:00</p>
250          <p class="text-xs text-white mt-0.5">(最終入城 19:30) 【荒天中止】</p>
251        </div>
252      </div>
253      <div class="bg-stone-800/70 border border-stone-700/70 rounded-2xl p-5 flex items-center gap-4">
254        <div class="w-12 h-12 rounded-xl bg-amber-500/10 text-amber-400 flex items-center justify-center flex-shrink-0 border border-amber-500/30">
255          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
256            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
257          </svg>
258        </div>
259        <div> <span class="text-xs text-stone-300 font-medium block">開催日内訳</span>
260          <p class="text-sm sm:text-base font-bold text-white">期間中の毎週土曜日 + 特定日</p>
261          <p class="text-xs text-amber-300/90 mt-0.5">9/20(日), 21(月祝), 22(火休), 10/11(日), 11/22(日)</p>
262        </div>
263      </div>
264    </div>
265    
266    <!-- 凡例 -->
267    <div class="flex items-center justify-center gap-6 mb-6 text-xs text-white">
268      <div class="flex items-center gap-2"> <span class="w-5 h-5 rounded-lg bg-amber-500 text-stone-950 font-bold flex items-center justify-center text-[10px] shadow">日</span> <span>特別公開 開催日</span> </div>
269      <div class="flex items-center gap-2"> <span class="w-5 h-5 rounded-lg bg-stone-800 text-stone-400 flex items-center justify-center text-[10px] border border-stone-700">日</span> <span>休止日</span> </div>
270    </div>
271    
272    <!-- 4ヶ月分(9月〜12月)のカレンダーグリッド -->
273    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto"> 
274      
275      <!-- 9月 カレンダー -->
276      <div class="bg-stone-800/50 border border-stone-700/60 rounded-2xl p-5 shadow-lg">
277        <div class="flex items-center justify-between border-b border-stone-700 pb-3 mb-3">
278          <h4 class="font-shippori font-bold text-lg text-white">2026年 9月/September 2026</h4>
279          <span class="text-xs px-2.5 py-0.5 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/30">開催 5日間</span> </div>
280        <div class="grid grid-cols-7 gap-1 text-center text-xs font-sans-ui mb-2 text-stone-400 font-medium"> <span class="text-red-400">日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span class="text-sky-400">土</span> </div>
281        <div class="grid grid-cols-7 gap-1 text-center text-xs font-sans-ui"> 
282          <!-- 1〜5日 --> 
283          <span></span> <span></span> <span class="py-1.5 text-stone-600">1</span> <span class="py-1.5 text-stone-600">2</span> <span class="py-1.5 text-stone-600">3</span> <span class="py-1.5 text-stone-600">4</span> <span class="py-1.5 text-stone-600">5</span> 
284          <!-- 6〜12日 --> 
285          <span class="py-1.5 text-stone-600">6</span> <span class="py-1.5 text-stone-600">7</span> <span class="py-1.5 text-stone-600">8</span> <span class="py-1.5 text-stone-600">9</span> <span class="py-1.5 text-stone-600">10</span> <span class="py-1.5 text-stone-600">11</span> <span class="py-1.5 text-stone-600">12</span> 
286          <!-- 13〜19日 --> 
287          <span class="py-1.5 text-stone-600">13</span> <span class="py-1.5 text-stone-600">14</span> <span class="py-1.5 text-stone-600">15</span> <span class="py-1.5 text-stone-600">16</span> <span class="py-1.5 text-stone-600">17</span> <span class="py-1.5 text-stone-600">18</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">19</span> 
288          <!-- 20〜26日 --> 
289          <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">20</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">21</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">22</span> <span class="py-1.5 text-stone-600">23</span> <span class="py-1.5 text-stone-600">24</span> <span class="py-1.5 text-stone-600">25</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">26</span> 
290          <!-- 27〜30日 --> 
291          <span class="py-1.5 text-stone-600">27</span> <span class="py-1.5 text-stone-600">28</span> <span class="py-1.5 text-stone-600">29</span> <span class="py-1.5 text-stone-600">30</span> <span></span><span></span><span></span> </div>
292      </div>
293      
294      <!-- 10月 カレンダー -->
295      <div class="bg-stone-800/50 border border-stone-700/60 rounded-2xl p-5 shadow-lg">
296        <div class="flex items-center justify-between border-b border-stone-700 pb-3 mb-3">
297          <h4 class="font-shippori font-bold text-lg text-white">2026年 10月</h4>
298          <span class="text-xs px-2.5 py-0.5 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/30">開催 6日間</span> </div>
299        <div class="grid grid-cols-7 gap-1 text-center text-xs font-sans-ui mb-2 text-stone-400 font-medium"> <span class="text-red-400">日</span><span>月</span><span>
299火</span><span>水</span><span>木</span><span>金</span><span class="text-sky-400">土</span> </div>
300        <div class="grid grid-cols-7 gap-1 text-center text-xs font-sans-ui"> 
301          <!-- 1〜3日 --> 
302          <span></span><span></span><span></span><span></span> <span class="py-1.5 text-stone-600">1</span> <span class="py-1.5 text-stone-600">2</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">3</span> 
303          <!-- 4〜10日 --> 
304          <span class="py-1.5 text-stone-600">4</span> <span class="py-1.5 text-stone-600">5</span> <span class="py-1.5 text-stone-600">6</span> <span class="py-1.5 text-stone-600">7</span> <span class="py-1.5 text-stone-600">8</span> <span class="py-1.5 text-stone-600">9</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">10</span> 
305          <!-- 11〜17日 --> 
306          <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">11</span> <span class="py-1.5 text-stone-600">12</span> <span class="py-1.5 text-stone-600">13</span> <span class="py-1.5 text-stone-600">14</span> <span class="py-1.5 text-stone-600">15</span> <span class="py-1.5 text-stone-600">16</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">17</span> 
307          <!-- 18〜24日 --> 
308          <span class="py-1.5 text-stone-600">18</span> <span class="py-1.5 text-stone-600">19</span> <span class="py-1.5 text-stone-600">20</span> <span class="py-1.5 text-stone-600">21</span> <span class="py-1.5 text-stone-600">22</span> <span class="py-1.5 text-stone-600">23</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">24</span> 
309          <!-- 25〜31日 --> 
310          <span class="py-1.5 text-stone-600">25</span> <span class="py-1.5 text-stone-600">26</span> <span class="py-1.5 text-stone-600">27</span> <span class="py-1.5 text-stone-600">28</span> <span class="py-1.5 text-stone-600">29</span> <span class="py-1.5 text-stone-600">30</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">31</span> </div>
311      </div>
312      
313      <!-- 11月 カレンダー -->
314      <div class="bg-stone-800/50 border border-stone-700/60 rounded-2xl p-5 shadow-lg">
315        <div class="flex items-center justify-between border-b border-stone-700 pb-3 mb-3">
316          <h4 class="font-shippori font-bold text-lg text-white">2026年 11月</h4>
317          <span class="text-xs px-2.5 py-0.5 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/30">開催 5日間</span> </div>
318        <div class="grid grid-cols-7 gap-1 text-center text-xs font-sans-ui mb-2 text-stone-400 font-medium"> <span class="text-red-400">日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span class="text-sky-400">土</span> </div>
319        <div class="grid grid-cols-7 gap-1 text-center text-xs font-sans-ui"> 
320          <!-- 1〜7日 --> 
321          <span class="py-1.5 text-stone-600">1</span> <span class="py-1.5 text-stone-600">2</span> <span class="py-1.5 text-stone-600">3</span> <span class="py-1.5 text-stone-600">4</span> <span class="py-1.5 text-stone-600">5</span> <span class="py-1.5 text-stone-600">6</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">7</span> 
322          <!-- 8〜14日 --> 
323          <span class="py-1.5 text-stone-600">8</span> <span class="py-1.5 text-stone-600">9</span> <span class="py-1.5 text-stone-600">10</span> <span class="py-1.5 text-stone-600">11</span> <span class="py-1.5 text-stone-600">12</span> <span class="py-1.5 text-stone-600">13</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">14</span> 
324          <!-- 15〜21日 --> 
325          <span class="py-1.5 text-stone-600">15</span> <span class="py-1.5 text-stone-600">16</span> <span class="py-1.5 text-stone-600">17</span> <span class="py-1.5 text-stone-600">18</span> <span class="py-1.5 text-stone-600">19</span> <span class="py-1.5 text-stone-600">20</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">21</span> 
326          <!-- 22〜28日 --> 
327          <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">22</span> <span class="py-1.5 text-stone-600">23</span> <span class="py-1.5 text-stone-600">24</span> <span class="py-1.5 text-stone-600">25</span> <span class="py-1.5 text-stone-600">26</span> <span class="py-1.5 text-stone-600">27</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">28</span> 
328          <!-- 29〜30日 --> 
329          <span class="py-1.5 text-stone-600">29</span> <span class="py-1.5 text-stone-600">30</span> <span></span><span></span><span></span><span></span><span></span> </div>
330      </div>
331      
332      <!-- 12月 カレンダー -->
333      <div class="bg-stone-800/50 border border-stone-700/60 rounded-2xl p-5 shadow-lg">
334        <div class="flex items-center justify-between border-b border-stone-700 pb-3 mb-3">
335          <h4 class="font-shippori font-bold text-lg text-white">2026年 12月</h4>
336          <span class="text-xs px-2.5 py-0.5 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/30">開催 1日(最終日)</span> </div>
337        <div class="grid grid-cols-7 gap-1 text-center text-xs font-sans-ui mb-2 text-stone-400 font-medium"> <span class="text-red-400">日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span class="text-sky-400">土</span> </div>
338        <div class="grid grid-cols-7 gap-1 text-center text-xs font-sans-ui"> 
339          <!-- 1〜5日 --> 
340          <span></span><span></span> <span class="py-1.5 text-stone-600">1</span> <span class="py-1.5 text-stone-600">2</span> <span class="py-1.5 text-stone-600">3</span> <span class="py-1.5 text-stone-600">4</span> <span class="py-1.5 rounded-lg bg-amber-500 text-stone-950 font-bold shadow-md ring-2 ring-amber-300/40">5</span> 
341          <!-- 6日以降(期間終了) --> 
342          <span class="py-1.5 text-stone-600/40">6</span> <span class="py-1.5 text-stone-600/40">7</span> <span class="py-1.5 text-stone-600/40">8</span> <span class="py-1.5 text-stone-600/40">9</span> <span class="py-1.5 text-stone-600/40">10</span> <span class="py-1.5 text-stone-600/40">11</span> <span class="py-1.5 text-stone-600/40">12</span> </div>
343        <p class="text-[11px] text-amber-300/80 mt-4 text-center font-medium">※12月5日(土)が特別公開の最終日となります</p>
344      </div>
345    </div>
346  </section>
347  
348  <!-- 3. 観覧料セクション -->
349  <section class="bg-stone-900/90 backdrop-blur-md border border-stone-800 rounded-3xl p-6 sm:p-10 shadow-2xl">
350    <div class="text-center mb-8"> <span class="text-amber-400 text-xs sm:text-sm tracking-[0.4em] uppercase font-sans-ui block font-semibold">ADMISSION FEE</span>
351      <h2 class="text-2xl sm:text-3xl font-shippori font-bold text-white tracking-widest mt-1">夜間特別公開 観覧料</h2>
352    </div>
353    
354    <!-- 料金カードグリッド -->
355    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-3xl mx-auto mb-8">
356      <div class="bg-stone-800/80 border border-stone-700 rounded-2xl p-6 text-center shadow-lg">
357        <p class="text-white text-sm font-medium mb-2">大人 (高校生以上)</p>
358        <p class="text-3xl sm:text-4xl font-bold text-white tracking-tight">1,000<span class="text-base font-normal text-white ml-1">円</span></p>
359      </div>
360      <div class="bg-stone-800/80 border border-stone-700 rounded-2xl p-6 text-center shadow-lg">
361        <p class="text-white text-sm font-medium mb-2">小・中学生</p>
362        <p class="text-3xl sm:text-4xl font-bold text-white tracking-tight">300<span class="text-base font-normal text-white ml-1">円</span></p>
363      </div>
364      <div class="bg-stone-800/80 border border-stone-700 rounded-2xl p-6 text-center shadow-lg">
365        <p class="text-white text-sm font-medium mb-2">未就学児</p>
366        <p class="text-3xl sm:text-4xl font-bold text-amber-300 tracking-tight">無料</p>
367      </div>
368    </div>
369      
370      <div class="max-w-3xl mx-auto mb-8">
371      <div class="bg-stone-800/80 border border-stone-700 rounded-2xl p-6 text-center shadow-lg">
372      <p class="text-center">Adults 1,000yen Elementary and junior high school students 300yen</p>
373          </div>
374          </div>
375              
376    
377    <!-- 事前申込 & 注意事項 -->
378    <div class="bg-stone-800/40 border border-stone-700/60 rounded-2xl p-6 max-w-3xl mx-auto 
378space-y-4">
379      <div class="flex items-start gap-3">
380        <div class="w-6 h-6 rounded-full bg-amber-500/20 text-amber-400 flex items-center justify-center flex-shrink-0 mt-0.5">
381          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
382            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
383          </svg>
384        </div>
385        <div>
386          <h4 class="text-base font-bold text-white">オンライン予約申込システムによる事前申込</h4>
387          <p class="font-gothic text-white text-sm mt-0.5">(18:00~窓口にて当日券も販売予定)</p>
388        </div>
389      </div>
390      <ul class="font-gothic text-xs sm:text-sm text-white space-y-2 pl-9">
391        <li class="list-disc">日中お買い求めになられた彦根城観覧券では入場することができませんのでご注意ください。</li>
392      </ul>
393    </div>
394  </section>
395  
396	  <!-- 6. お申し込み(オンライン予約)セクション -->
397  <section class="bg-gradient-to-br from-amber-950/50 via-stone-900/95 to-stone-900/95 backdrop-blur-md border-2 border-amber-500/50 rounded-3xl p-6 sm:p-10 md:p-12 shadow-2xl text-center relative overflow-hidden"> 
398    <!-- 装飾用の背後グロー光 -->
399    <div class="absolute -top-24 -left-24 w-72 h-72 bg-amber-500/10 rounded-full blur-3xl pointer-events-none"></div>
400    <div class="absolute -bottom-24 -right-24 w-72 h-72 bg-amber-600/10 rounded-full blur-3xl pointer-events-none"></div>
401    <div class="relative z-10 max-w-2xl mx-auto space-y-6"> <span class="text-amber-400 text-xs sm:text-sm tracking-[0.4em] uppercase font-sans-ui block font-semibold">RESERVATION & TICKETS</span>
402      <h2 class="text-2xl sm:text-3xl md:text-4xl font-shippori font-bold text-white tracking-widest"> 観覧券のお申し込み </h2>
403      <div class="w-16 h-0.5 bg-gradient-to-r from-amber-500 to-amber-200 mx-auto"></div>
404      <p class="font-gothic text-white text-sm sm:text-base leading-relaxed font-light"> 夜間特別公開のご入場は、オンライン予約申込システムによる事前申込を推奨しております。<br class="hidden sm:inline">
405        混雑緩和のため、あらかじめ希望日時の観覧チケットをご予約ください。 </p>
406      
407      <!-- チケット購入 CTA ボタンブロック -->
408      <div class="pt-4 flex flex-col items-center justify-center gap-3"> <a 
409            href="https://www.jalan.net/kankou/spt_25202af2120008909/activity/l000070867/?ccnt=planList-in&rootCd=3&screenId=OUW2210&dateUndecided=1" 
410            target="_blank"
411            rel="noopener noreferrer"
412            class="group relative inline-flex items-center justify-center px-8 sm:px-12 py-4 sm:py-5 rounded-2xl bg-gradient-to-r from-amber-500 via-amber-400 to-amber-600 text-stone-950 font-shippori font-bold text-lg sm:text-xl tracking-widest shadow-[0_10px_25px_rgba(245,158,11,0.35)] hover:shadow-[0_15px_35px_rgba(245,158,11,0.5)] hover:scale-[1.02] active:scale-[0.98] transition-all duration-300"
413          > <span>お申し込みはこちら</span>
414        <svg class="w-5 h-5 ml-3 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
415          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
416        </svg>
417        </a> <span class="font-gothic text-base text-white tracking-wider">※予約ページ(外部サイト)へ移動します</span> </div>
418    </div>
419  </section>
420	
421  <!-- 4. 同時開催ライトアップイベント(観月の夕べ & 錦秋の玄宮園ライトアップ) -->
422  <section class="space-y-8">
423    <div class="text-center"> <span class="text-amber-400 text-xs sm:text-sm tracking-[0.4em] uppercase font-sans-ui block font-semibold">CONCURRENT EVENTS</span>
424      <h2 class="text-2xl sm:text-3xl font-shippori font-bold text-white tracking-widest mt-1">同時開催 玄宮園ライトアップイベント</h2>
425    </div>
426    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> 
427      
428      <!-- 4-A. 観月の夕べ -->
429      <article class="bg-stone-900/90 backdrop-blur-md border border-stone-800 rounded-3xl p-6 sm:p-8 flex flex-col justify-between shadow-2xl relative overflow-hidden group">
430        <div class="space-y-4"> 
431          <!-- 観月の夕べ 写真イメージ -->
432          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700/80 bg-stone-950 shadow-inner"> <img 
433                src="imgs/yuube.jpg" 
434                alt="玄宮園の池越しに望む彦根城と名月" 
435                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
436                loading="lazy"
437              >
438            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
439            <span class="absolute bottom-3 left-3 text-xs text-amber-200/90 font-medium tracking-wider flex items-center gap-1.5 drop-shadow">
440            <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
441              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
442            </svg>
443            名月と大名庭園が織りなす水鏡の夜景 </span> </div>
444          <h3 class="text-xl sm:text-2xl font-shippori font-bold text-white tracking-wide pt-1"> 観月の夕べ <span class="text-sm font-normal text-white block sm:inline">(玄宮園ライトアップイベント)</span> </h3>
445          <p class="font-gothic text-white text-base leading-relaxed text-justify"> 旧彦根藩主・井伊家の大名庭園である「玄宮園」は、江戸文化の粋を今に伝える池泉回遊式庭園です。池越しに望む国宝・彦根城天守と名月が織りなす景観は、格別の美しさを誇ります。 </p>
446          <div class="bg-stone-800/60 rounded-2xl p-4 space-y-2 text-sm border border-stone-700/60 font-gothic">
447            <div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2"> <span class="text-amber-400 font-semibold flex-shrink-0">日時:</span> <span class="text-white">令和8年9月19日(土)~ 10月4日(日)の土日祝 全9日間</span> </div>
448            <div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2"> <span class="text-amber-400 font-semibold flex-shrink-0">時間:</span> <span class="text-white">18:00 ~ 21:00 (最終入場 20:30) 【荒天中止】</span> </div>
449          </div>
450          
451          <!-- 料金案内 -->
452          <div class="grid grid-cols-2 gap-3 text-xs sm:text-sm font-gothic">
453            <div class="bg-stone-800/80 p-3 rounded-xl border border-stone-700">
454              <p class="text-white mb-1 font-semibold">当日入場券</p>
455              <p class="text-white mb-1">大人:<span class="text-base font-bold text-amber-300">900円</span> (高校生以上)</p>
456              <p class="text-white">小・中学生:<span class="font-bold">450円</span></p>
457            </div>
458            <div class="bg-stone-800/80 p-3 rounded-xl border border-stone-700">
459              <p class="text-white mb-1 font-semibold">前売入場券</p>
460              <p class="text-white mb-1">大人:<span class="text-base font-bold text-amber-300">700円</span> (高校生以上)</p>
461              <p class="text-white">小・中学生:<span class="font-bold">350円</span></p>
462            </div>
463          </div>
464          <p class="font-gothic text-[12px] sm:text-base text-white"> ※昼間にお買い求めになられた彦根城・玄宮園観覧券では入場することはできませんのでご注意ください。 </p>
465        </div>
466        <div class="mt-6 pt-4 border-t border-stone-800/80 flex items-center justify-between text-base text-white font-gothic"> <span>実施主体:公益社団法人彦根観光協会</span> <a href="tel:0749230001" class="text-amber-400 hover:text-amber-300 transition underline">TEL:0749-23-0001</a> </div>
467      </article>
468      
469      <!-- 4-B. 錦秋の玄宮園ライトアップ -->
470      <article class="bg-stone-900/90 backdrop-blur-md border border-stone-800 rounded-3xl p-6 sm:p-8 flex flex-col justify-between shadow-2xl relative overflow-hidden group">
471        <div class="space-y-4"> 
472          <!-- 錦秋の玄宮園 写真イメージ -->
473          <div class="relative h-48 sm:h-56 rounded-2xl overflow-hidden border border-stone-700/80 bg-stone-950 shadow-inner"> <img 
474                src="imgs/lightup.jpg" 
475                alt="ライトアップされた玄宮園の紅葉と池の水鏡" 
476                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
477                loading="lazy"
478              >
479            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
480            <span class="absolute bottom-3 left-3 text-xs text-amber-200/90 font-medium tracking-wider flex items-center gap-1.5 drop-shadow">
481            <svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
482              <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.316.492-.544 1.054-.74 1.636-.59 1.748-1.22 3.613-2.613 4.707a4.99 4.99 0 00-1.564 2.22 
4826.02 6.02 0 00-.206 1.888 6 6 0 1012 0c0-1.503-.548-2.91-1.5-4.01a6.002 6.002 0 00-1.89-1.47c-.2-.097-.41-.186-.63-.266-.35-.126-.68-.3-.985-.515a4.015 4.015 0 01-.6-1.685zm-2.97 9.447c-.015.02-.03.04-.045.061-.31.42-.51 1.01-.51 1.69 0 1.657 1.343 3 3 3s3-1.343 3-3c0-.68-.2-1.27-.51-1.69a2.98 2.98 0 00-.045-.061c-.55.77-1.44 1.25-2.445 1.25s-1.895-.48-2.445-1.25z" clip-rule="evenodd"/>
483            </svg>
484            池水に映える鮮やかな紅葉ライトアップ </span> </div>
485          <h3 class="text-xl sm:text-2xl font-shippori font-bold text-white tracking-wide pt-1"> 錦秋の玄宮園ライトアップ </h3>
486          <p class="font-gothic text-white text-base leading-relaxed text-justify"> 旧彦根藩主・井伊家の大名庭園である「玄宮園」は、江戸文化の粋を今に伝える池泉回遊式庭園です。秋が深まるにつれて園内の木々が赤や黄色に色づき、水面に映る紅葉とともに幻想的な景観を創り出します。ライトアップされた紅葉と国宝・彦根城天守が織りなす夜の風景をお楽しみください。 </p>
487          <div class="bg-stone-800/60 rounded-2xl p-4 space-y-2 text-sm border border-stone-700/60 font-gothic">
488            <div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2"> <span class="text-amber-400 font-semibold flex-shrink-0">日時:</span> <span class="text-white">令和8年11月14日(土)~ 11月29日(日)</span> </div>
489            <div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2"> <span class="text-amber-400 font-semibold flex-shrink-0">時間:</span> <span class="text-white">18:00 ~ 21:00 (最終入場 20:30) 【荒天中止】</span> </div>
490          </div>
491          
492          <!-- 料金案内 -->
493          <div class="grid grid-cols-2 gap-3 text-xs sm:text-sm font-gothic">
494            <div class="bg-stone-800/80 p-3 rounded-xl border border-stone-700">
495              <p class="text-white mb-1 font-semibold">当日入場券</p>
496              <p class="text-white mb-1">大人:<span class="text-base font-bold text-amber-300">900円</span> (高校生以上)</p>
497              <p class="text-white">小・中学生:<span class="font-bold">450円</span></p>
498            </div>
499            <div class="bg-stone-800/80 p-3 rounded-xl border border-stone-700">
500              <p class="text-white mb-1 font-semibold">前売入場券</p>
501              <p class="text-white mb-1">大人:<span class="text-base font-bold text-amber-300">700円</span> (高校生以上)</p>
502              <p class="text-white">小・中学生:<span class="font-bold">350円</span></p>
503            </div>
504          </div>
505          <p class="font-gothic text-[12px] sm:text-base text-white"> ※日中お買い求めになられた彦根城・玄宮園観覧券では入場することはできませんのでご注意ください。 </p>
506        </div>
507        <div class="mt-6 pt-4 border-t border-stone-800/80 flex items-center justify-between text-base text-white font-gothic"> <span>実施主体:公益社団法人彦根観光協会</span> <a href="tel:0749230001" class="text-amber-400 hover:text-amber-300 transition underline">TEL:0749-23-0001</a> </div>
508      </article>
509    </div>
510  </section>
511  
512  <!-- 5. 共通券の案内 -->
513  <section class="bg-gradient-to-br from-amber-950/70 via-stone-900/90 to-stone-900/90 backdrop-blur-md border-2 border-amber-500/40 rounded-3xl p-6 sm:p-10 shadow-2xl">
514    <div class="max-w-3xl mx-auto space-y-6">
515      <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/20 text-amber-300 text-xs font-semibold">
516        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
517          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
518        </svg>
519        お得なセットチケット </div>
520      <h3 class="text-2xl sm:text-3xl font-shippori font-bold text-white tracking-wide"> 「夜間特別公開 彦根城・玄宮園」共通券 </h3>
521      <p class="font-gothic text-white leading-relaxed text-sm sm:text-base"> 「彦根城夜間特別公開」と「観月の夕べ」もしくは「錦秋の玄宮園ライトアップ」の同時開催日に、お得な「夜間特別公開 彦根城・玄宮園」共通券を販売いたします。 </p>
522      
523      <!-- 共通券仕様カード -->
524      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
525        <div class="bg-black/50 border border-stone-700/80 rounded-2xl p-5"> <span class="text-xs text-stone-300 font-semibold block mb-1">販売日時</span>
526          <p class="text-amber-300 font-bold text-sm sm:text-base">令和8年9月19日 (土) ~ 11月29日(日)</p>
527          <p class="text-white text-xs mt-1">※「彦根城夜間特別公開」開催時</p>
528        </div>
529        <div class="bg-black/50 border border-stone-700/80 rounded-2xl p-5"> <span class="text-xs text-stone-300 font-semibold block mb-1">
529共通券料金</span>
530          <div class="flex items-baseline gap-4 justify-center">
531            <div> <span class="text-xs text-stone-300 block">大人(高校生以上)</span> <span class="text-2xl font-bold text-white">1,400<span class="text-xs text-white ml-0.5">円</span></span> </div>
532            <div class="border-l border-stone-700 pl-4"> <span class="text-xs text-stone-300 block">小・中学生</span> <span class="text-2xl font-bold text-white">600<span class="text-xs text-white ml-0.5">円</span></span> </div>
533          </div>
534        </div>
535      </div>
536      <div class="pt-2 text-base text-white flex items-center justify-between"> <span>実施主体:公益社団法人彦根観光協会</span> <a href="tel:0749230001" class="text-amber-400 hover:text-amber-300 transition underline font-medium">TEL:0749-23-0001</a> </div>
537    </div>
538  </section>
539  
540  
541  <!-- 7. アクセス・地図セクション -->
542  <section class="bg-stone-900/90 backdrop-blur-md border border-stone-800 rounded-3xl p-6 sm:p-10 shadow-2xl">
543    <div class="text-center mb-8"> <span class="text-amber-400 text-xs sm:text-sm tracking-[0.4em] uppercase font-sans-ui block font-semibold">LOCATION &amp; ACCESS</span>
544      <h2 class="text-2xl sm:text-3xl font-shippori font-bold text-white tracking-widest mt-1">開催場所・アクセス</h2>
545      <p class="font-gothic text-white text-sm mt-2">国宝 彦根城(滋賀県彦根市金亀町1-1)</p>
546        <p class="font-gothic text-white text-sm mt-2">Hikone Castle (1-1 Konki-cho, Hikone City, Shiga Prefecture)</p>
547    </div>
548    
549    <!-- Googleマップの埋め込みコンテナ -->
550    <div class="w-full rounded-2xl overflow-hidden border border-stone-700 shadow-xl bg-stone-950">
551      <iframe 
552          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3257.1879919227026!2d136.24927107576968!3d35.27645197272059!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60022b2b5dbfdbc3%3A0xee2a210b78298c30!2z5b2m5qC55Z-O!5e0!3m2!1sja!2sjp!4v1788937463109!5m2!1sja!2sjp" 
553          width="100%" 
554          height="450" 
555          style="border:0; min-height: 400px; display: block;" 
556          allowfullscreen="" 
557          loading="lazy" 
558          referrerpolicy="strict-origin-when-cross-origin"
559          title="彦根城 Googleマップ"
560        ></iframe>
561    </div>
562    <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs sm:text-sm text-white">
563      <div class="bg-stone-800/60 p-4 rounded-xl border border-stone-700/60 flex items-start gap-3">
564        <div class="w-8 h-8 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center flex-shrink-0 mt-0.5 border border-amber-500/30"> 
565          <!-- 電車アイコン -->
566          <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
567            <path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6H6V7h12v4z"/>
568          </svg>
569        </div>
570        <div> <span class="text-amber-400 font-bold block mb-1 text-sm">電車でお越しの場合</span>
571          <p class="font-gothic text-white">JR琵琶湖線「彦根駅」西口より徒歩約15分。</p>
572            <p class="font-gothic text-white">15-minute walk from Hikone Station</p>
573        </div>
574      </div>
575      <div class="bg-stone-800/60 p-4 rounded-xl border border-stone-700/60 flex items-start gap-3">
576        <div class="w-8 h-8 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center flex-shrink-0 mt-0.5 border border-amber-500/30"> 
577          <!-- 車アイコン -->
578          <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
579            <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.85 7h10.29l1.04 3H5.81l1.04-3zM7.5 16c-.83 0-1.5-.67-1.5-1.5S6.67 13 7.5 13s1.5.67 1.5 1.5S8.33 16 7.5 16zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
580          </svg>
581        </div>
582        <div> <span class="text-amber-400 font-bold block mb-1 text-sm">お車でお越しの場合</span>
583          <p class="font-gothic text-white">名神高速道路「彦根IC」より約10分。(周辺の有料駐車場をご利用ください)</p>
584        </div>
585      </div>
586    </div>
587  </section>
588  
589  <!-- 7. お問い合わせセクション -->
590  <section class="bg-stone-900/90 backdrop-blur-md border border-stone-800 rounded-3xl p-6 sm:p-10 shadow-2xl text-center"> <span class="text-amber-400 text-xs sm:text-sm tracking-[0.4em] uppercase font-sans-ui block font-semibold mb-2">CONTACT</span>
591    <h2 class="text-2xl sm:text-3xl font-shippori font-bold text-white tracking-widest mb-4">お問い合わせ</h2>
592    <div class="max-w-2xl mx-auto bg-stone-800/60 border border-stone-700/60 rounded-2xl p-6 sm:p-8 space-y-3">
593      <p class="text-lg font-bold text-white tracking-wider">彦根城運営管理センター</p>
594      <div class="flex items-center justify-center gap-2 pt-1">
595        <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
596          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
597        </svg>
598        <a href="mailto:[email protected]" class="text-amber-300 hover:text-amber-200 text-base sm:text-lg font-medium transition underline underline-offset-4"> [email protected] </a> </div>
599      <p class="font-gothic text-sm text-white pt-2">※夜間特別公開に関するお問い合わせは上記メールアドレスまでご連絡ください。</p>
600    </div>
601  </section>
602</main>
603
604<!-- ==========================================
605       フッター & ページ先頭へ戻るボタン
606       ========================================== -->
607<footer class="relative z-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pb-16 pt-4 text-center">
608  <div class="flex flex-col items-center justify-center">
609    <button 
610        onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"
611        class="group inline-flex items-center gap-3 px-6 py-3.5 rounded-full bg-stone-900/90 hover:bg-stone-800/90 border border-amber-500/40 hover:border-amber-400/70 text-white transition-all duration-300 shadow-lg hover:shadow-[0_4px_20px_rgba(245,158,11,0.2)] hover:-translate-y-0.5 active:translate-y-0"
612        aria-label="ページの先頭へ戻る"
613      >
614    <div class="w-7 h-7 rounded-full bg-amber-500/20 text-amber-400 flex items-center justify-center transition-transform duration-300 group-hover:-translate-y-0.5">
615      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
616        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
617      </svg>
618    </div>
619    <span class="font-gothic text-xs sm:text-sm tracking-widest text-white font-medium">ページの先頭へ戻る</span> </button>
620  </div>
621</footer>
622
623<!-- ==========================================
624       インタラクション用 JavaScript
625       ========================================== --> 
626<script>
627    // 6枚写真ギャラリーの左右スクロール
628    function scrollHeroGallery(direction) {
629      const container = document.getElementById('hero-photo-gallery');
630      if (!container) return;
631      const scrollAmount = container.clientWidth * 0.75;
632      container.scrollBy({
633        left: direction * scrollAmount,
634        behavior: 'smooth'
635      });
636    }
637
638    // スクロール連動:お城画像のぼかし(blur)&暗幕(overlay)
639    (function initScrollBlur() {
640      const castleImg = document.getElementById('castle-main-img');
641      const darkOverlay = document.getElementById('castle-dark-overlay');
642      if (!castleImg || !darkOverlay) return;
643
644      let ticking = false;
645
646      function updateBlur() {
647        const scrollY = window.pageYOffset || document.documentElement.scrollTop;
648        const maxScroll = 450;
649        const progress = Math.min(Math.max(scrollY / maxScroll, 0), 1);
650
651        // ブラー: 0px から 最大12px まで滑らかにぼかし
652        const blurAmount = (progress * 12).toFixed(1);
653        castleImg.style.filter = `blur(${blurAmount}px) drop-shadow(0 10px 35px rgba(0,0,0,0.9))`;
654
655        // 暗幕オーバーレイ: 0 から 最大0.75 まで徐々に暗くする
656        darkOverlay.style.opacity = (progress * 0.75).toFixed(2);
657
658        ticking = false;
659      }
660
661      window.addEventListener('scroll', function () {
662        if (!ticking) {
663          window.requestAnimationFrame(updateBlur);
664          ticking = true;
665        }
666      }, { passive: true });
667
668      // 初期実行
669      updateBlur();
670    })();
671  </script>
671
672</body>
673</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.