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 & 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 & 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.