1<!DOCTYPE html> 2<html lang="ja" class="scroll-smooth"> 3<head> 4<!-- Google Tag Manager -->
5<script>
vendor: 333 bytes, lines 5-10
5 6(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 7new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 8j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 9'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 10})(window,document,'script','dataLayer','
10GTM-KXV8G74
vendor: 5 bytes, line 10
10');
11</script>
11 12 <meta charset="UTF-8"> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 14 <title>ã¡ãããªã西å°å¦æ ¡æ®å½±ã¹ã¿ã¸ãªï½åèã®å¦æ ¡ãã±å°</title> 15 <meta name="description" content="åèçé·åçºã®å¦æ ¡æ®å½±ã¹ã¿ã¸ãªãã¡ãããªã西å°ãããã©ãã»æ ç»ã»MVã»CMã»YouTubeãªã©å¹ åºãæ®å½±ã«å¯¾å¿ãè²¸åæ®å½±ãé·æéå©ç¨ãå¯è½ãé½å¿ããç´80åã"> 16 <!-- ãã¡ãã³ã³ --> 17 <link rel="icon" href="https://chonan-nishisho.jp/images/faviconi_satuei.png" type="image/png"> 18 <link rel="apple-touch-icon" sizes="180x180" href="https://chonan-nishisho.jp/images/faviconi_satuei.png"> 19
19<script src="https://cdn.tailwindcss.com"></script>
19 20 <!-- Webãã©ã³ã: Noto Sans JP --> 21 <link rel="preconnect" href="https://fonts.googleapis.com"> 22 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 23 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap" rel="stylesheet"> 24 <!-- ã¢ã¤ã³ã³ç¨ã©ã¤ãã©ãª --> 25 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> 26 27 <!-- æ§é åãã¼ã¿ (LocalBusiness) --> 28
28<script type="application/ld+json"> 29 { 30 "@context": "https://schema.org", 31 "@type": "LocalBusiness", 32 "name": "ã¡ãããªã西å°å¦æ ¡æ®å½±ã¹ã¿ã¸ãª", 33 "image": "https://chonan-nishisho.jp/images/5gaikan.png", 34 "description": "åèçé·åçºã®å¦æ ¡æ®å½±ã¹ã¿ã¸ãªãã¡ãããªã西å°ãããã©ãã»æ ç»ã»MVã»CMã»YouTubeãªã©å¹ åºãæ®å½±ã«å¯¾å¿ãè²¸åæ®å½±ãé·æéå©ç¨ãå¯è½ãé½å¿ããç´80åã", 35 "telephone": "0120-154-244", 36 "address": { 37 "@type": "PostalAddress", 38 "streetAddress": "ä½åª 1348-1", 39 "addressLocality": "é·çé¡é·åçº", 40 "addressRegion": "åèç", 41 "postalCode": "297-0145", 42 "addressCountry": "JP" 43 }, 44 "url": "https://chonan-nishisho.jp/" 45 } 46 </script>
46 47 48 <!-- æ§é åãã¼ã¿ (FAQPage) --> 49
49<script type="application/ld+json"> 50 { 51 "@context": "https://schema.org", 52 "@type": "FAQPage", 53 "mainEntity": [ 54 { 55 "@type": "Question", 56 "name": "å©ç¨ã®éã¯ã©ã®ãããªæµãã§ããï¼", 57 "acceptedAnswer": { 58 "@type": "Answer", 59 "text": "â é»è©±åã¯ååããã©ã¼ã ã«ã¦åè£æ¥ã¨ä¼ç»å 容ããç¥ãããã ããã<br>â¡å¼ç¤¾ã®æ å½ããæãè¿ãé£çµ¡ãããã¦ããã ãã空ãç¶æ³ããè¦ç©ãããæ¡å ãããã¾ãã<br>â¢å©ç¨ç¢ºå®å¾ãã忥å©ç¨ç´æ¬¾ããèªç´æ¸ãããéããã¾ãã®ã§ã彿¥ã¾ã§ã«ãè¨å ¥ããã ãã忬ã®éä»ããé¡ããããã¾ãã<br>â£ãæ¯æãã¯ç¾å°æ±ºæ¸åã¯éè¡æ¯è¾¼ãå¯è½ã§ããéè¡æ¯è¾¼ã®å ´åãå©ç¨æã®ææ«ç· ããç¿ææ«æãã¨ãªãã¾ãã" 60 } 61 }, 62 { 63 "@type": "Question", 64 "name": "ãã±ãã³ã¯å¯è½ã§ããï¼", 65 "acceptedAnswer": { 66 "@type": "Answer", 67 "text": "å¯è½ã§ãããã¾ããç¡æã§è¡ãã¾ããæ¥ç¨ç調æ´ããã¦ããã ãã¾ãã®ã§ãã¾ãã¯ãæ°è»½ã«ãç¸è«ãã ããã" 68 } 69 }, 70 { 71 "@type": "Question", 72 "name": "空ãç¶æ³ã¯ç¢ºèªã§ãã¾ããï¼", 73 "acceptedAnswer": { 74 "@type": "Answer", 75 "text": "ã叿ã®åè£æ¥ãé»è©±åã¯ååããã©ã¼ã ãããç¥ãããã ããã空ãç¶æ³ããä¼ãããã¦ããã ãã¾ãã" 76 } 77 }, 78 { 79 "@type": "Question", 80 "name": "ä»®äºç´ã¯ã§ãã¾ããï¼", 81 "acceptedAnswer": { 82 "@type": "Answer", 83 "text": "å¯è½ã§ãããã¾ããè¤æ°æ¥ç¨ã®ä»®äºç´ãåãä»ãã¦ããã¾ãã" 84 } 85 }, 86 { 87 "@type": "Question", 88 "name": "1æéã®ã¿ã®æ®å½±ãå¯è½ã§ããï¼", 89 "acceptedAnswer": { 90 "@type": "Answer", 91 "text": "æä½4æéãããäºç´ãåãä»ãã¦ããã¾ãã1æéã®ã¿ã®æ®å½±ãå¯è½ã§ããã4æéåã®æéãããã£ã¦ãã¾ãã¾ãã®ã§äºããäºæ¿ãã ããã" 92 } 93 }, 94 { 95 "@type": "Question", 96 "name": "æ©æã»æ·±å¤ã®æ®å½±ã¯å¯è½ã§ããï¼", 97 "acceptedAnswer": { 98 "@type": "Answer", 99 "text": "å¯è½ã§ãããã¾ãã21ã7æã«æ®å½±ãè¡ãå ´åã¯å©ç¨æéã¨å¥éãä¸äººæ§ãããã®å®¿æ³æãããã ãã¾ããã¾ããæ©æãæ·±å¤ã«ããã¦ã¯è¿é£ä½æ°ã®è¿·æã«ãªããªãç¯å²ã§æ®å½±ããé¡ããããã¾ãã" 100 } 101 }, 102 { 103 "@type": "Question", 104 "name": "ã©ã®ãããªæ®å½±ãã§ãã¾ããï¼", 105 "acceptedAnswer": { 106 "@type": "Answer", 107 "text": "妿 ¡ãã±ã¼ã·ã§ã³ãã¡ã¤ã³ã¨ããæ®å½±ãå¯è½ã§ãããã©ããæ ç»ããã©ã¨ãã£ãCMãMVãªã©å¤ãã®å®ç¸¾ããããã¾ãã®ã§ã¾ãã¯ãæ°è»½ã«ãåãåãããã ããã" 108 } 109 }, 110 { 111 "@type": "Question", 112 "name": "æ®å½±ã§ããç¯å²ã¯ã©ãã¾ã§ã§ããï¼", 113 "acceptedAnswer": { 114 "@type": "Answer", 115 "text": "貸åã®ãããå ¨é¤¨ã使ç¨ããã ãã¾ãã" 116 } 117 }, 118 { 119 "@type": "Question", 120 "name": "æ´è¡£å®¤ã¯ããã¾ããï¼", 121 "acceptedAnswer": { 122 "@type": "Answer", 123 "text": "å¥å®¤ã¨ãã¦ãæ´è¡£å®¤ãã¯ç¨æããªãã§ãããã«ã¼ãã³ãããé¨å±ãæ´è¡£å®¤ã¨ãã¦ãå©ç¨ããã ãã¾ãã" 124 } 125 }, 126 { 127 "@type": "Question", 128 "name": "é§è»å ´ã¯ããã¾ããï¼", 129 "acceptedAnswer": { 130 "@type": "Answer", 131 "text": "æ·å°å ã«ç´20å°ã»ã©é§è»ãå¯è½ã§ãã大åè»ã®é§è»ãå¯è½ã§ãã" 132 } 133 } 134 ] 135 } 136 </script>
136 137 138 <style> 139 body { 140 font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 141 color: #333; 142 overflow-x: hidden; 143 /* ä¸é¨åºå®ããã¿ã¼ã®åã ãä½ç½ã確ä¿(ã¹ããã®ã¿) */ 144 padding-bottom: 0; 145 } 146 147 /* --- ãããã¼å¶å¾¡ --- */ 148 .header-logo-area { 149 transition: all 0.3s ease-in-out; 150 overflow: hidden; 151 opacity: 1; 152 /* ãã´ã¨ãªã¢ã®é«ãå¶éãè§£é¤ã¾ãã¯èª¿æ´ */ 153 max-height: 120px; 154 } 155 156 nav#site-nav { 157 transition: top 0.3s ease-in-out; 158 } 159 160 /* --- ããã¹ãã¹ã¿ã¤ã« --- */ 161 .text-stroke-black { 162 text-shadow: 163 4px 4px 2px #000; 164 color: #fff; 165 -webkit-text-stroke: 3px #000; 166 paint-order: stroke fill; 167 } 168 169 .text-outline-gallery { 170 color: #fff; 171 -webkit-text-stroke: 1px #000; 172 } 173 .vertical-text { 174 writing-mode: vertical-rl; 175 text-orientation: mixed; 176 } 177 178 /* --- ãã¼ã«ã¼ã©ã¤ã³ --- */ 179 .marker-line { 180 display: inline; 181 font-weight: 900; /* 太å */ 182 text-decoration: none; 183 /* ä¸ååã«ãã³ã¯ã®ãã¼ã«ã¼ */ 184 background: linear-gradient(to bottom, transparent 50%, rgba(238, 105, 131, 0.5) 50%); 185 background-repeat: no-repeat; 186 background-position: 0 0; 187 background-size: 100% 100%; 188 } 189 190 /* --- ã®ã£ã©ãªã¼ç»åãã§ã¼ãç¨ --- */ 191 .gallery-img-fade { 192 transition: opacity 0.5s ease-in-out; 193 opacity: 1; 194 } 195 .gallery-img-fade.fade-out { 196 opacity: 0; 197 } 198 199 /* --- ããã²ã¼ã·ã§ã³ --- */ 200 .nav-item { 201 transition: all 0.2s ease; 202 position: relative; 203 } 204 .nav-item:hover { 205 opacity: 1; 206 background-color: #fff; 207 transform: translateY(-4px); 208 box-shadow: 4px 4px 0 0 #000; 209 z-index: 20; 210 } 211 .bg-nav-1 { background-color: #ff7f9f; } 212 .bg-nav-2 { background-color: #ffcc66; } 213 .bg-nav-3 { background-color: #00d2ff; } 214 .bg-nav-4 { background-color: #99eccb; } 215 .bg-nav-5 { background-color: #d999f0; } 216 217 /* --- ãã¿ã³ --- */ 218 .btn-header-pop { 219 transition: all 0.2s ease; 220 box-shadow: 3px 3px 0 0 #000; 221 } 222 .btn-header-pop:hover { 223 transform: translateY(2px); 224 box-shadow: 1px 1px 0 0 #000; 225 } 226 .btn-header-pop:active { 227 transform: translateY(2px); 228 box-shadow: 1px 1px 0 0 #000; 229 } 230 .shadow-pop { 231 box-shadow: 4px 4px 0 0 #000; 232 } 233 .hover-lift { 234 transition: transform 0.3s ease, box-shadow 0.3s ease; 235 } 236 .hover-lift:hover { 237 transform: translateY(-4px); 238 box-shadow: 2px 2px 0 0 #000; 239 } 240 241 /* --- ãã³ãã¼ã¬ã¼ã¡ãã¥ã¼ --- */ 242 .hamburger { 243 display: flex; 244 flex-direction: column; 245 justify-content: space-between; 246 width: 48px; /* 大ãã */ 247 height: 30px; /* 大ãã */ 248 cursor: pointer; 249 z-index: 50; 250 padding: 0; 251 background: transparent; 252 border: none; 253 } 254 .hamburger-line { 255 display: block; 256 width: 100%; 257 height: 4px; /* 太ã */ 258 background-color: #000; 259 transition: all 0.3s ease-in-out; 260 border-radius: 4px; 261 } 262 .hamburger.active .hamburger-line:nth-child(1) { 263 transform: translateY(13px) rotate(45deg); 264 } 265 .hamburger.active .hamburger-line:nth-child(2) { 266 opacity: 0; 267 } 268 .hamburger.active .hamburger-line:nth-child(3) { 269 transform: translateY(-13px) rotate(-45deg); 270 } 271 272 /* ã¢ãã¤ã«ã¡ãã¥ã¼ãªã¼ãã¼ã¬ã¤ */ 273 #mobile-menu { 274 transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 275 opacity: 0; 276 visibility: hidden; 277 } 278 #mobile-menu.open { 279 opacity: 1;
280 visibility: visible; 281 } 282 283 /* TOPã«æ»ããã¿ã³ */ 284 #back-to-top { 285 position: fixed; 286 bottom: 100px; /* åºå®ããã¿ã¼ã®ä¸ */ 287 right: 20px; 288 z-index: 999; 289 transition: all 0.3s ease; 290 opacity: 0; 291 pointer-events: auto; 292 box-shadow: 2px 2px 0 0 #000; 293 } 294 #back-to-top.is-visible { 295 opacity: 1; 296 pointer-events: auto; 297 } 298 #back-to-top:hover { 299 transform: translateY(-4px); 300 box-shadow: 4px 4px 0 0 #000; 301 } 302 @media (min-width: 1280px) { 303 #back-to-top { 304 bottom: 20px; 305 } 306 } 307 308 /* ãã¼ãã¼ã»ã¯ã·ã§ã³ */ 309 .hero-container { 310 position: relative; 311 width: 100%; 312 height: 850px; 313 overflow: hidden; 314 background-color: #000; 315 background-image: url('images/1class_top.png'); 316 background-size: cover; 317 background-position: center; 318 } 319 @media (max-width: 767px) { 320 .hero-container { 321 height: 650px; 322 max-height: 85vh; 323 } 324 } 325 .hero-video { 326 position: absolute; 327 top: 0; 328 left: 0; 329 width: 100%; 330 height: 100%; 331 object-fit: cover; 332 z-index: 0; 333 opacity: 1; 334 } 335 .video-overlay { 336 position: absolute; 337 top: 0; 338 left: 0; 339 width: 100%; 340 height: 100%; 341 background-color: #000; 342 opacity: 0; 343 pointer-events: none; 344 z-index: 1; 345 transition: opacity 1.0s ease-in-out; 346 } 347 </style> 348</head> 349<body class="bg-white" id="page-top"> 350<!-- Google Tag Manager (noscript) -->
vendor: 71 bytes, lines 350-352
350 351<noscript> 352<iframe src="https://www.googletagmanager.com/ns.html?id=
352GTM-KXV8G74
vendor: 93 bytes, lines 352-356
352" 353height="0" width="0" style="display:none;visibility:hidden"></iframe> 354</noscript> 355 356
356<!-- ãããã¼ --> 357 <div id="fixed-header-wrapper" class="fixed top-0 left-0 w-full z-50 flex flex-col"> 358 <header class="relative z-30 border-b border-black transition-all duration-300 bg-gray-100"> 359 <div class="w-full max-w-[1200px] mx-auto"> 360 361 <!-- ãPC表示 (xl以ä¸)ã --> 362 <div class="hidden xl:flex flex-row justify-between items-center px-4 py-3"> 363 <div class="header-logo-area w-auto"> 364 <a href="index.html"> 365 <img src="images/rogo.png" alt="ã¡ãããªãè¥¿å° å¦æ ¡æ®å½±ã¹ã¿ã¸ãª ãã´" class="h-[60px] object-contain"> 366 </a> 367 </div> 368 <div class="flex flex-row items-center gap-8"> 369 <div class="text-right"> 370 <a href="tel:0120154244" class="text-2xl font-bold tracking-wider hover:opacity-70 whitespace-nowrap">0120-154-244</a> 371 <div class="text-xs text-gray-600 whitespace-nowrap">(å仿éï¼10:00ã17:00)</div> 372 </div> 373 <div class="flex flex-row gap-2"> 374 <a href="https://survey.mynavi.jp/cre/?enq=CEHdZ%2f%2b5UfY%3d" target="_blank" class="btn-header-pop bg-[#ffed2b] border border-black rounded-full px-8 py-3 text-xl font-bold text-center block whitespace-nowrap text-black flex items-center justify-center"> 375 <i class="fa-regular fa-envelope mr-2 text-2xl"></i> 空ãç¶æ³ã»è³æè«æ±ã¯ãã¡ã 376 </a> 377 </div> 378 </div> 379 </div> 380 381 <!-- ãã¿ãã¬ãã/ã¹ãã表示 (xlæªæº)ã --> 382 <div class="xl:hidden flex flex-row justify-between items-center px-4 py-3 h-[70px] relative"> 383 384 <!-- å·¦: ãã´ --> 385 <div class="flex-shrink-0"> 386 <a href="index.html"> 387 <img src="images/rogo.png" alt="ã¡ãããªãè¥¿å° å¦æ ¡æ®å½±ã¹ã¿ã¸ãª ãã´" class="h-[40px] md:h-[50px] object-contain"> 388 </a> 389 </div> 390 391 <!-- å³: ã¢ã¤ã³ã³ç¾¤ (é»è©± + ãã³ãã¼ã¬ã¼) --> 392 <div class="flex flex-row items-center gap-5"> 393 <a href="tel:0120154244" class="flex items-center justify-center w-10 h-10 bg-[#ffed2b] border border-black rounded-full shadow-[2px_2px_0_0_#000] active:translate-y-[1px] active:shadow-none transition-all"> 394 <i class="fa-solid fa-phone text-lg"></i> 395 </a> 396 <button id="hamburger-btn" class="hamburger"> 397 <span class="hamburger-line"></span> 398 <span class="hamburger-line"></span> 399 <span class="hamburger-line"></span> 400 </button> 401 </div> 402 403 </div> 404 405 </div> 406 </header> 407 408 <!-- ã°ãã¼ãã«ããã²ã¼ã·ã§ã³ (PCç¨: xl以ä¸ã§è¡¨ç¤º) --> 409 <nav id="site-nav" class="relative z-20 w-full pointer-events-none hidden xl:block"> 410 <ul class="flex w-full max-w-[1200px] mx-auto text-center font-bold text-black gap-0 px-1 md:px-4 pointer-events-auto"> 411 <li class="flex-1 -ml-[1px] first:ml-0"> 412 <a href="gallery.html" class="nav-item bg-nav-1 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2"> 413 <i class="fa-regular fa-image text-lg md:text-xl"></i> 414 <div class="flex flex-col items-center leading-none"> 415 <span class="text-sm md:text-base">ã®ã£ã©ãªã¼</span> 416 <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">GALLERY</span> 417 </div> 418 </a> 419 </li> 420 <li class="flex-1 -ml-[1px] first:ml-0"> 421 <a href="index.html#price" class="nav-item bg-nav-2 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2"> 422 <i class="fa-solid fa-yen-sign text-lg md:text-xl"></i> 423 <div class="flex flex-col items-center leading-none">
424 <span class="text-sm md:text-base">å©ç¨æé</span> 425 <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">PRICE</span> 426 </div> 427 </a> 428 </li> 429 <li class="flex-1 -ml-[1px] first:ml-0"> 430 <a href="index.html#faq" class="nav-item bg-nav-3 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2"> 431 <i class="fa-regular fa-circle-question text-lg md:text-xl"></i> 432 <div class="flex flex-col items-center leading-none"> 433 <span class="text-sm md:text-base">FAQ</span> 434 <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">FAQ</span> 435 </div> 436 </a> 437 </li> 438 <li class="flex-1 -ml-[1px] first:ml-0"> 439 <a href="index.html#access" class="nav-item bg-nav-4 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2"> 440 <i class="fa-solid fa-location-dot text-lg md:text-xl"></i> 441 <div class="flex flex-col items-center leading-none"> 442 <span class="text-sm md:text-base">ã¢ã¯ã»ã¹</span> 443 <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">ACCESS</span> 444 </div> 445 </a> 446 </li> 447 <li class="flex-1 -ml-[1px] first:ml-0"> 448 <a href="case.html" class="nav-item bg-nav-5 flex flex-row items-center justify-center py-3 md:py-4 border border-t-0 border-black rounded-b-2xl gap-2"> 449 <i class="fa-solid fa-camera text-lg md:text-xl"></i> 450 <div class="flex flex-col items-center leading-none"> 451 <span class="text-sm md:text-base">å©ç¨äºä¾</span> 452 <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase mt-1">CASE</span> 453 </div> 454 </a> 455 </li> 456 </ul> 457 </nav> 458 </div> 459 460 <!-- ã¢ãã¤ã«ã¡ãã¥ã¼ (å ¨ç»é¢ãªã¼ãã¼ã¬ã¤) --> 461 <div id="mobile-menu" class="fixed inset-0 bg-white z-40 flex flex-col justify-start items-center pt-24"> 462 <!-- ã¡ãã¥ã¼ãªã¹ã --> 463 <ul class="flex flex-col text-center w-full max-w-md px-6"> 464 <li class="w-full"> 465 <a href="gallery.html" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors"> 466 <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#ff7f9f] transition-colors"> 467 <i class="fa-regular fa-image mr-2"></i>ã®ã£ã©ãªã¼ 468 </span> 469 <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#ff7f9f] transition-colors font-sans">GALLERY</span> 470 </a> 471 </li> 472 <li class="w-full"> 473 <a href="index.html#price" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors"> 474 <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#ffcc66] transition-colors"> 475 <i class="fa-solid fa-yen-sign mr-2"></i>å©ç¨æé 476 </span> 477 <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#ffcc66] transition-colors font-sans">PRICE</span> 478 </a> 479 </li> 480 <li class="w-full"> 481 <a href="index.html#faq" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors">
482 <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#00d2ff] transition-colors"> 483 <i class="fa-regular fa-circle-question mr-2"></i>FAQ 484 </span> 485 <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#00d2ff] transition-colors font-sans">FAQ</span> 486 </a> 487 </li> 488 <li class="w-full"> 489 <a href="index.html#access" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors"> 490 <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#99eccb] transition-colors"> 491 <i class="fa-solid fa-location-dot mr-2"></i>ã¢ã¯ã»ã¹ 492 </span> 493 <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#99eccb] transition-colors font-sans">ACCESS</span> 494 </a> 495 </li> 496 <li class="w-full"> 497 <a href="case.html" class="mobile-link group block py-6 border-b border-gray-200 hover:bg-gray-50 transition-colors"> 498 <span class="flex justify-center items-center text-xl font-bold text-black group-hover:text-[#d999f0] transition-colors"> 499 <i class="fa-solid fa-camera mr-2"></i>å©ç¨äºä¾ 500 </span> 501 <span class="block text-xs font-bold text-gray-400 tracking-widest mt-1 group-hover:text-[#d999f0] transition-colors font-sans">CASE</span> 502 </a> 503 </li> 504 </ul> 505 </div> 506 507 <!-- ã¡ã¤ã³ã³ã³ãã³ã --> 508 <main id="main-content" class="relative w-full"> 509 510 <!-- ã¡ã¤ã³ãã¸ã¥ã¢ã« --> 511 <section class="hero-container bg-gray-100"> 512 <!-- PCç¨åç» --> 513 <video class="hero-video hidden md:block" autoplay loop muted playsinline preload="auto"> 514 <source src="images/cyounan01.mp4" type="video/mp4"> 515 </video> 516 <!-- ã¹ããç¨åç» --> 517 <video class="hero-video block md:hidden" autoplay loop muted playsinline preload="auto"> 518 <source src="images/cyounan01_sp.mp4" type="video/mp4"> 519 </video> 520 521 <div class="video-overlay"></div> 522 523 <div class="absolute bottom-12 md:bottom-24 right-4 md:right-[max(1rem,calc((100vw-1200px)/2+1rem))] z-20 text-right"> 524 <h1 class="text-2xl md:text-5xl font-bold leading-relaxed text-white" style="text-shadow: 2px 2px 8px rgba(0,0,0,0.9);"> 525 ãã©ãã»æ ç»ã»MVã®ãã±å°ã«æé©<br> 526 é½å¿ããç´80åã®å¦æ ¡æ®å½±ã¹ã¿ã¸ãª 527 </h1> 528 </div> 529 </section> 530 531 <!-- ç¹å¾´ã»ã¯ã·ã§ã³ --> 532 <section class="relative bg-[#ffed2b] pb-16 md:pb-24 pt-10"> 533 <div class="mx-auto px-4 text-center relative z-10 w-full max-w-[1200px]"> 534 <h2 class="text-lg md:text-2xl lg:text-3xl font-bold mb-8 md:mb-12 leading-loose text-black"> 535 <span class="marker-line text-black">ãã¬ãã»æ ç»</span>ãã<span class="marker-line text-black">MV</span>ã¾ã§<span class="marker-line text-black">鷿鿮影</span>ã<span class="marker-line text-black">è²¸åæ®å½±</span>ãªã©<br> 536 æ§ã ãªæ®å½±æ¡ä»¶ã«å¯¾å¿å¯è½ãª<span class="marker-line text-black">妿 ¡ã¹ã¿ã¸ãª</span> 537 </h2> 538 539 <div class="grid grid-cols-3 xl:grid-cols-6 gap-[15px] md:gap-[20px] justify-center mx-auto"> 540 <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon01.png" alt="ãã©ã" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">ãã©ã</span></div> 541 <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon02.png" alt="æ ç»" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">æ ç»</span></div> 542 <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon03.png" alt="ãã©ã¨ãã£" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">ãã©ã¨ãã£</span></div> 543 <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon04.png" alt="MV" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">MV</span></div> 544 <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon05.png" alt="CM" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">CM</span></div> 545 <div class="flex flex-col items-center"><div class="w-24 h-24 md:w-[180px] md:h-[180px] bg-white rounded-full mb-2 flex items-center justify-center shadow-sm"><img src="images/icon06.png" alt="YouTube" class="w-12 h-12 md:w-28 md:h-28 object-contain" loading="lazy"></div><span class="font-bold text-xs md:text-lg text-black">YouTube</span></div> 546 </div> 547 </div> 548 </section> 549 550 <!-- ã®ã£ã©ãªã¼ã»ã¯ã·ã§ã³ (ç°¡æç) --> 551 <section class="relative bg-white pb-16 md:pb-24"> 552 <div class="absolute top-0 w-full z-10 pointer-events-none"> 553 <div class="absolute top-0 left-0 w-full h-[15px] bg-[#ff7f9f] border-t border-b border-black z-10"></div> 554 <div class="max-w-[1200px] mx-auto px-4 relative h-0"> 555 <h2 class="absolute -top-[50px] left-4 bg-[#ff7f9f] text-black font-bold py-3 px-8 md:px-12 rounded-t-2xl border border-b-0 border-black text-lg md:text-xl z-20 h-[51px] flex items-center box-border"> 556 æ ¡å ãã±ã¼ã·ã§ã³ã®ã£ã©ãªã¼ 557 </h2> 558 <div class="absolute top-[-1px] left-[17px] w-[calc(100%-34px)] md:w-[320px] h-[3px] bg-[#ff7f9f] z-30"></div> 559 </div> 560 </div> 561 562 <div class="max-w-[1200px] mx-auto px-4 pt-16 md:pt-24 flex flex-col xl:flex-row gap-8 items-start relative"> 563 <div class="flex-1 w-full grid grid-cols-3 gap-2 md:gap-4 z-10"> 564 <div class="flex flex-col gap-2 md:gap-4"> 565 <div class="aspect-[4/3] bg-white border border-black overflow-hidden"><img src="images/watarirouka_03.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-1" alt="渡ãå»ä¸" loading="lazy"></div> 566 <div class="aspect-[3/4] bg-white border border-black overflow-hidden"><img src="images/door01.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-4" alt="æ" loading="lazy"></div> 567 </div> 568 <div class="flex flex-col gap-2 md:gap-4"> 569 <div class="aspect-[3/4] bg-white border border-black overflow-hidden"><img src="images/taiikukan_02.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-2" alt="ä½è²é¤¨" loading="lazy"></div> 570 <div class="aspect-[4/3] bg-white border border-black overflow-hidden"><img src="images/classroom01.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-5" alt="æå®¤" loading="lazy"></div> 571 </div> 572 <div class="flex flex-col gap-2 md:gap-4"> 573 <div class="aspect-[4/3] bg-white border border-black overflow-hidden"><img src="images/rouka01.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-3" alt="å»ä¸" loading="lazy"></div> 574 <div class="aspect-[3/4] bg-white border border-black overflow-hidden"><img src="images/book01.jpg" class="w-full h-full object-cover gallery-img-fade" id="gallery-img-6" alt="峿¸å®¤" loading="lazy"></div> 575 </div> 576 </div> 577 <div class="hidden xl:flex absolute -right-24 top-0 w-24 h-full justify-center items-end z-0 opacity-100"> 578 <div class="text-6xl md:text-9xl font-bold vertical-text text-outline-gallery tracking-widest select-none" style="color: #ffe0eb; -webkit-text-stroke: 1px #000; font-family: 'Helvetica', sans-serif;">Gallery</div> 579 </div> 580 </div> 581 582 <div class="flex justify-center mt-8 md:mt-12 relative z-10"> 583 <a href="gallery.html" class="btn-header-pop bg-[#ff7f9f] text-black font-bold py-4 md:py-5 px-10 md:px-16 rounded-full border-2 border-black text-lg md:text-2xl flex items-center gap-2"> 584 æ ¡å ãã±ã¼ã·ã§ã³ã®ã£ã©ãªã¼ ä¸è¦§ <i class="fa-solid fa-chevron-right text-base"></i> 585 </a> 586 </div> 587 </section> 588 589 <!-- å©ç¨æéã»ã¯ã·ã§ã³ --> 590 <section id="price" class="relative bg-white pb-16 md:pb-24 scroll-mt-[160px]"> 591 <div class="absolute top-0 w-full z-10 pointer-events-none"> 592 <div class="absolute top-0 left-0 w-full h-[15px] bg-[#ffcc66] border-t border-b border-black z-10"></div> 593 <div class="max-w-[1200px] mx-auto px-4 relative h-0"> 594 <h2 class="absolute -top-[50px] left-4 bg-[#ffcc66] text-black font-bold py-3 px-8 md:px-12 rounded-t-2xl border border-b-0 border-black text-lg md:text-xl z-20 h-[51px] flex items-center box-border"> 595 妿 ¡ã¹ã¿ã¸ãªå©ç¨æé 596 </h2> 597 <div class="absolute top-[-1px] left-[17px] w-[calc(100%-34px)] md:w-[280px] h-[3px] bg-[#ffcc66] z-30"></div> 598 </div> 599 </div> 600 601 <div class="max-w-[1200px] mx-auto px-4 pt-16 md:pt-24 flex flex-col xl:flex-row gap-8 items-start relative"> 602 <div class="hidden lg:flex absolute -left-24 top-0 w-24 h-full justify-center items-start z-0 opacity-100"> 603 <div class="text-6xl md:text-9xl font-bold vertical-text text-outline-gallery tracking-widest select-none pt-16 md:pt-24" style="color: #fff0c7; -webkit-text-stroke: 1px #000; font-family: 'Helvetica', sans-serif;">Price</div> 604 </div> 605 606 <div class="flex-1 w-full z-10 text-black"> 607 <div class="bg-white mb-4"> 608 <table class="w-full text-center border-collapse border border-black"> 609 <thead> 610 <tr class="bg-[#ffcc66] border-b border-black"> 611 <th class="p-3 md:p-4 font-bold w-1/3 md:w-2/5 text-sm md:text-base border-r border-black"> 612 <div class="flex flex-col items-center justify-center leading-none gap-1"> 613 <div class="flex flex-row items-center justify-center gap-1 md:gap-1.5 mb-1"> 614 <i class="fa-solid fa-yen-sign text-lg md:text-xl"></i>
615 <span class="text-sm md:text-base">æé表</span> 616 </div> 617 <span class="text-[8px] md:text-[10px] font-normal tracking-widest uppercase">PRICE</span> 618 </div> 619 </th> 620 <th class="p-3 md:p-4 font-bold w-1/3 md:w-1.5/5 text-sm md:text-base border-r border-black align-middle">å¹³æ¥</th> 621 <th class="p-3 md:p-4 font-bold w-1/3 md:w-1.5/5 text-sm md:text-base align-middle">忥ç¥</th> 622 </tr> 623 </thead> 624 <tbody class="font-bold text-sm md:text-base"> 625 <tr class="border-b border-black"> 626 <td class="p-3 md:p-4 bg-[#ffffcc] border-r border-black">æ¥ä¸ / 11:00ã18:00</td> 627 <td class="p-3 md:p-4 border-r border-black">Â¥27,500/ æé</td> 628 <td class="p-3 md:p-4">Â¥33,000/ æé</td> 629 </tr> 630 <tr class="border-b border-black"> 631 <td class="p-3 md:p-4 bg-[#ffffcc] border-r border-black">æ / 7:00 ã 11:00<br>å¤ / 18:00 ã 21:00</td> 632 <td class="p-3 md:p-4 border-r border-black">Â¥33,000/ æé</td> 633 <td class="p-3 md:p-4">Â¥38,500/ æé</td> 634 </tr> 635 <tr class="border-b border-black"> 636 <td class="p-3 md:p-4 bg-[#ffffcc] border-r border-black">æ©æã»æ·±å¤ / 21:00 ã 7:00</td> 637 <td class="p-3 md:p-4 border-r border-black">Â¥38,000/ æé</td> 638 <td class="p-3 md:p-4">Â¥44,000/ æé</td> 639 </tr> 640 <tr> 641 <td class="p-3 md:p-4 bg-[#ffffcc] border-r border-black">宿æ³è²» ãã§ãã¯ã¤ã³ / 11:00<br>ãã§ãã¯ã¢ã¦ã / 10:00</td> 642 <td class="p-3 md:p-4 border-r border-black">Â¥5,500/ 人</td> 643 <td class="p-3 md:p-4">Â¥6,600/ 人</td> 644 </tr> 645 </tbody> 646 </table> 647 </div> 648 <div class="mb-8"> 649 <p class="text-xs md:text-sm leading-relaxed text-left inline-block font-bold"> 650 â»æä½ãå©ç¨æéã¯4æéï½ã¨ãªãã¾ãã<br> 651 â»ä¸è¨æéã¯ç¨è¾¼ã§ãã<br> 652 â»21:00ï½ç¿7:00ã§æ®å½±ãè¡ãå ´åã宿æ³è²»ç¨ãçºçãããã¾ãã<br> 653 â»å®¿æ³å©ç¨ã¯é常2é¨å±ï¼å¤§é¨å±ï¼ã¨ããã¦ããã ãã¾ãã 654 </p> 655 </div> 656 657 <div class="mb-8 md:mb-12"> 658 <h3 class="text-lg font-bold border-b border-black mb-4 pb-1">åºæ¬æéã«å«ã¾ãããã®</h3> 659 <ul class="list-disc pl-5 text-sm md:text-base space-y-1 mb-8"> 660 <li>ã¹ãã¼ã«ã»åç»ã¨ãã«åæéã§ãã</li> 661 <li>ä¸è¨æéã«ã¯å ¨ã¦ã®è¨åã®å©ç¨ãå«ã¾ãã¦ããã¾ãã</li> 662 </ul> 663 664 <h3 class="text-lg font-bold border-b border-black mb-4 pb-1">åç¨å©ç¨ã«ã¤ãã¦</h3> 665 <div class="text-sm md:text-base space-y-2 mb-8 leading-relaxed"> 666 <p>æ³äººã»å人åããå¶å©ç®çã®å©ç¨ã¯å ¨ã¦åç¨å©ç¨ã¨ããã¦ããã ãã¾ãã</p> 667 <p>ä¸è¬ç³ãè¾¼ã¿ãããã彿¥ã«åç¨å©ç¨ã¨å¤æããå ´åãåç¨æéããè«æ±ããã¦ããã ãã¾ãã</p> 668 <p class="font-bold mt-2">ãåç¨å©ç¨ã«è©²å½ããä¾ã</p> 669 <ul class="list-disc pl-5 space-y-1"> 670 <li>ã¹ããã¯ãã©ããç´ æã®çºã®æ®å½±</li> 671 <li>WEBãµã¤ããå種åªä½ã«æ²è¼ããããã®æ®å½±</li> 672 <li>SNSãCMããã©ããPVãMVãã¤ã³ã¿ãã¥ã¼ãéèªãã«ã¿ãã°æ®å½±ãªã©ã®åçåã¯æ 忮影</li> 673 <li>鳿¥½æ´»åãã¿ã¬ã³ããã¢ãã«æ´»åããã³ãµã¼ãªã©ç´æ¥å©çãå¾ãç®çã§ã¯ãªãã¨ãæ¥åã§åºãå ¬éãããç´ æã®æ®å½±</li> 674 <li>ã«ã¡ã©ãã³ã®ä½åæ®ã</li> 675 <li>æ®å½±ã®ã¿ãªãããä¼è²»ãåå æãå¾´åããææã¤ãã³ã</li> 676 </ul> 677 </div> 678 679 <h3 class="text-lg font-bold border-b border-black mb-4 pb-1">ãå©ç¨ã®éã®æ³¨æäºé </h3> 680 <ul class="list-disc pl-5 text-sm md:text-base space-y-1 mb-8 leading-relaxed"> 681 <li>è¿é£ä½æ°ã®è¿·æã«ãªããããªå©ç¨ã¯ãæ§ããã ããã</li> 682 <li>大ããªé³ãåºãæ®å½±ãã¤ãã³ãã«é¢ãã¦ã¯ãä¸åº¦ãååããã ããã</li> 683 <li>å©ç¨å¾ã¯åç¶å復ããé¡ãè´ãã¾ãã</li> 684 <li>å¨ç©ç ´æãæ½è¨ç ´æãçºçããå ´åã¯å¥éè«æ±ããã¦é ãã¾ãã</li> 685 <li>è²´éåçã®ç´å¤±ã«å¯¾ãã¦ã彿½è¨ã§ã¯è²¬ä»»ãè² ãããã¾ãã®ã§ãèªèº«ã§ç®¡çããé¡ãè´ãã¾ãã</li> 686 <li>å ¬åºè¯ä¿ã«åããæ®å½±ãã¤ãã³ãã¯ãæãããã¦ããã ãã¾ãã</li> 687 </ul> 688 </div> 689 690 <a href="https://survey.mynavi.jp/cre/?enq=CEHdZ%2f%2b5UfY%3d" target="_blank" class="block relative overflow-hidden shadow-pop hover-lift mx-auto w-full max-w-[600px] group" style="border-radius: 0 60px 0 60px;"> 691 <img src="images/5gaikan.png" class="absolute inset-0 w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110" alt="妿 ¡å¤è¦³" loading="lazy"> 692 <div class="absolute inset-0 bg-black/60 mix-blend-multiply transition-opacity duration-300 group-hover:opacity-80"></div> 693 <div class="relative z-10 p-8 md:p-12 text-center text-white flex justify-center"> 694 <h3 class="text-xl md:text-2xl font-bold mb-2 inline-flex items-center gap-2 md:gap-3 text-left">
695 <span>ãã±ãã³ã»æ®å½±ã»<br>è³æè«æ±ã¯ãã¡ã</span> 696 <i class="fa-solid fa-chevron-right text-lg md:text-2xl"></i> 697 </h3> 698 </div> 699 </a> 700 701 <div class="text-center mt-8 font-bold"> 702 <p class="mb-2">ãã±ãã³ã¯ç¡æã§è¡ã£ã¦ããã¾ãã<br>äºåäºç´å¶ã¨ãªãã¾ãã®ã§ã叿æ¥ããé£çµ¡ãã ããã</p> 703 <p class="text-2xl md:text-3xl">TEL : 0120-154-244</p> 704 </div> 705 </div> 706 </div> 707 </section> 708 709 <!-- FAQã»ã¯ã·ã§ã³ --> 710 <section id="faq" class="relative bg-white pb-24 md:pb-48 scroll-mt-[160px]"> 711 <div class="absolute top-0 w-full z-10 pointer-events-none"> 712 <div class="absolute top-0 left-0 w-full h-[15px] bg-[#00d2ff] border-t border-b border-black z-10"></div> 713 <div class="max-w-[1200px] mx-auto px-4 relative h-0"> 714 <h2 class="absolute -top-[50px] left-4 bg-[#00d2ff] text-black font-bold py-3 px-8 md:px-12 rounded-t-2xl border border-b-0 border-black text-lg md:text-xl z-20 h-[51px] flex items-center justify-center box-border"> 715 FAQ 716 </h2> 717 <div class="absolute top-[-1px] left-[17px] w-[calc(100%-34px)] md:w-[130px] h-[3px] bg-[#00d2ff] z-30"></div> 718 </div> 719 </div> 720 721 <div class="max-w-[1200px] mx-auto px-4 pt-16 md:pt-24 relative"> 722 <div class="hidden xl:flex absolute -right-24 top-0 w-24 h-full justify-center items-start z-0 opacity-100"> 723 <div class="text-6xl md:text-9xl font-bold vertical-text text-outline-gallery tracking-widest select-none pt-16 md:pt-24" style="color: #ccf5ff; -webkit-text-stroke: 1px #000; font-family: 'Helvetica', sans-serif;"> 724 FAQ 725 </div> 726 </div> 727 728 <div class="w-full max-w-[900px] mx-auto z-10 text-black"> 729 <div class="mb-10 md:mb-12"> 730 <h3 class="text-xl md:text-2xl font-bold text-center mb-6 md:mb-8">ãäºç´ã«ã¤ãã¦</h3> 731 <div class="space-y-4 md:space-y-6"> 732 <!-- FAQ items --> 733 <div class="faq-item"> 734 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 735 <div class="flex items-start gap-2"> 736 <span class="font-bold text-lg">Q</span> 737 <span class="font-bold text-sm md:text-base pt-0.5">å©ç¨ã®éã¯ã©ã®ãããªæµãã§ããï¼</span> 738 </div> 739 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 740 </button> 741 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 742 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 743 <span class="font-bold text-lg text-black">A</span> 744 <div class="leading-relaxed"> 745 â é»è©±åã¯ååããã©ã¼ã ã«ã¦åè£æ¥ã¨ä¼ç»å 容ããç¥ãããã ããã<br> 746 â¡å¼ç¤¾ã®æ å½ããæãè¿ãé£çµ¡ãããã¦ããã ãã空ãç¶æ³ããè¦ç©ãããæ¡å ãããã¾ãã<br> 747 â¢å©ç¨ç¢ºå®å¾ãã忥å©ç¨ç´æ¬¾ããèªç´æ¸ãããéããã¾ãã®ã§ã彿¥ã¾ã§ã«ãè¨å ¥ããã ãã忬ã®éä»ããé¡ããããã¾ãã<br> 748 â£ãæ¯æãã¯ç¾å°æ±ºæ¸åã¯éè¡æ¯è¾¼ãå¯è½ã§ããéè¡æ¯è¾¼ã®å ´åãå©ç¨æã®ææ«ç· ããç¿ææ«æãã¨ãªãã¾ãã 749 </div> 750 </div> 751 </div> 752 </div> 753 <div class="faq-item"> 754 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 755 <div class="flex items-start gap-2">
756 <span class="font-bold text-lg">Q</span> 757 <span class="font-bold text-sm md:text-base pt-0.5">ãã±ãã³ã¯å¯è½ã§ããï¼</span> 758 </div> 759 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 760 </button> 761 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 762 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 763 <span class="font-bold text-lg text-black">A</span> 764 <div class="leading-relaxed"> 765 å¯è½ã§ãããã¾ããç¡æã§è¡ãã¾ããæ¥ç¨ç調æ´ããã¦ããã ãã¾ãã®ã§ãã¾ãã¯ãæ°è»½ã«ãç¸è«ãã ããã(<a href="tel:0120154244" class="underline hover:no-underline">0120-154-244</a>) 766 </div> 767 </div> 768 </div> 769 </div> 770 <div class="faq-item"> 771 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 772 <div class="flex items-start gap-2"> 773 <span class="font-bold text-lg">Q</span> 774 <span class="font-bold text-sm md:text-base pt-0.5">空ãç¶æ³ã¯ç¢ºèªã§ãã¾ããï¼</span> 775 </div> 776 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 777 </button> 778 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 779 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 780 <span class="font-bold text-lg text-black">A</span> 781 <div class="leading-relaxed"> 782 ã叿ã®åè£æ¥ãé»è©±åã¯ååããã©ã¼ã ãããç¥ãããã ããã空ãç¶æ³ããä¼ãããã¦ããã ãã¾ãã 783 </div> 784 </div> 785 </div> 786 </div> 787 <div class="faq-item"> 788 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 789 <div class="flex items-start gap-2"> 790 <span class="font-bold text-lg">Q</span> 791 <span class="font-bold text-sm md:text-base pt-0.5">ä»®äºç´ã¯ã§ãã¾ããï¼</span> 792 </div> 793 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 794 </button> 795 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 796 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 797 <span class="font-bold text-lg text-black">A</span> 798 <div class="leading-relaxed"> 799 å¯è½ã§ãããã¾ããè¤æ°æ¥ç¨ã®ä»®äºç´ãåãä»ãã¦ããã¾ãã 800 </div> 801 </div> 802 </div> 803 </div> 804 <div class="faq-item"> 805 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 806 <div class="flex items-start gap-2">
807 <span class="font-bold text-lg">Q</span> 808 <span class="font-bold text-sm md:text-base pt-0.5">1æéã®ã¿ã®æ®å½±ãå¯è½ã§ããï¼</span> 809 </div> 810 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 811 </button> 812 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 813 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 814 <span class="font-bold text-lg text-black">A</span> 815 <div class="leading-relaxed"> 816 æä½4æéãããäºç´ãåãä»ãã¦ããã¾ãã1æéã®ã¿ã®æ®å½±ãå¯è½ã§ããã4æéåã®æéãããã£ã¦ãã¾ãã¾ãã®ã§äºããäºæ¿ãã ããã 817 </div> 818 </div> 819 </div> 820 </div> 821 <div class="faq-item"> 822 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 823 <div class="flex items-start gap-2"> 824 <span class="font-bold text-lg">Q</span> 825 <span class="font-bold text-sm md:text-base pt-0.5">æ©æã»æ·±å¤ã®æ®å½±ã¯å¯è½ã§ããï¼</span> 826 </div> 827 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 828 </button> 829 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 830 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 831 <span class="font-bold text-lg text-black">A</span> 832 <div class="leading-relaxed"> 833 å¯è½ã§ãããã¾ãã21ã7æã«æ®å½±ãè¡ãå ´åã¯å©ç¨æéã¨å¥éãä¸äººæ§ãããã®å®¿æ³æãããã ãã¾ããã¾ããæ©æãæ·±å¤ã«ããã¦ã¯è¿é£ä½æ°ã®è¿·æã«ãªããªãç¯å²ã§æ®å½±ããé¡ããããã¾ãã 834 </div> 835 </div> 836 </div> 837 </div> 838 </div> 839 </div> 840 841 <!-- ãå©ç¨ã«ã¤ã㦠--> 842 <div> 843 <h3 class="text-xl md:text-2xl font-bold text-center mb-6 md:mb-8">ãå©ç¨ã«ã¤ãã¦</h3> 844 <div class="space-y-4 md:space-y-6"> 845 <div class="faq-item"> 846 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 847 <div class="flex items-start gap-2"> 848 <span class="font-bold text-lg">Q</span> 849 <span class="font-bold text-sm md:text-base pt-0.5">ã©ã®ãããªæ®å½±ãã§ãã¾ããï¼</span> 850 </div> 851 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 852 </button> 853 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 854 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
855 <span class="font-bold text-lg text-black">A</span> 856 <div class="leading-relaxed"> 857 妿 ¡ãã±ã¼ã·ã§ã³ãã¡ã¤ã³ã¨ããæ®å½±ãå¯è½ã§ãããã©ããæ ç»ããã©ã¨ãã£ãCMãMVãªã©å¤ãã®å®ç¸¾ããããã¾ãã®ã§ã¾ãã¯ãæ°è»½ã«ãåãåãããã ããã 858 </div> 859 </div> 860 </div> 861 </div> 862 <div class="faq-item"> 863 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 864 <div class="flex items-start gap-2"> 865 <span class="font-bold text-lg">Q</span> 866 <span class="font-bold text-sm md:text-base pt-0.5">æ®å½±ã§ããç¯å²ã¯ã©ãã¾ã§ã§ããï¼</span> 867 </div> 868 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 869 </button> 870 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 871 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 872 <span class="font-bold text-lg text-black">A</span> 873 <div class="leading-relaxed"> 874 貸åã®ãããå ¨é¤¨ã使ç¨ããã ãã¾ãã 875 </div> 876 </div> 877 </div> 878 </div> 879 <div class="faq-item"> 880 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 881 <div class="flex items-start gap-2"> 882 <span class="font-bold text-lg">Q</span> 883 <span class="font-bold text-sm md:text-base pt-0.5">æ´è¡£å®¤ã¯ããã¾ããï¼</span> 884 </div> 885 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 886 </button> 887 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 888 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 889 <span class="font-bold text-lg text-black">A</span> 890 <div class="leading-relaxed"> 891 å¥å®¤ã¨ãã¦ãæ´è¡£å®¤ãã¯ç¨æããªãã§ãããã«ã¼ãã³ãããé¨å±ãæ´è¡£å®¤ã¨ãã¦ãå©ç¨ããã ãã¾ãã 892 </div> 893 </div> 894 </div> 895 </div> 896 <div class="faq-item"> 897 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 898 <div class="flex items-start gap-2"> 899 <span class="font-bold text-lg">Q</span> 900 <span class="font-bold text-sm md:text-base pt-0.5">ãå¼å½ã®æé ã¯ã§ãã¾ããï¼</span> 901 </div> 902 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 903 </button> 904 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 905 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
906 <span class="font-bold text-lg text-black">A</span> 907 <div class="leading-relaxed"> 908 åæ°ã«ãã£ã¦ã¯å¯¾å¿ããã¦ããã ãã¾ãã 909 </div> 910 </div> 911 </div> 912 </div> 913 <div class="faq-item"> 914 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 915 <div class="flex items-start gap-2"> 916 <span class="font-bold text-lg">Q</span> 917 <span class="font-bold text-sm md:text-base pt-0.5">飲ã¿ç©ã¯è²·ãã¾ããï¼</span> 918 </div> 919 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 920 </button> 921 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 922 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 923 <span class="font-bold text-lg text-black">A</span> 924 <div class="leading-relaxed"> 925 æ·å°å ã«èªè²©æ©ããããã¾ãã®ã§ãã¡ãããå©ç¨ãã ãããï¼ç¾éã®ã¿ï¼ 926 </div> 927 </div> 928 </div> 929 </div> 930 <div class="faq-item"> 931 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 932 <div class="flex items-start gap-2"> 933 <span class="font-bold text-lg">Q</span> 934 <span class="font-bold text-sm md:text-base pt-0.5">æ®å½±æ©æã»ååã®è²¸åºã¯ããã¾ããï¼</span> 935 </div> 936 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 937 </button> 938 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 939 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50"> 940 <span class="font-bold text-lg text-black">A</span> 941 <div class="leading-relaxed"> 942 貸åºååçã¯ç¨æããããã¾ããã®ã§åèªãæåãã ããã 943 </div> 944 </div> 945 </div> 946 </div> 947 <div class="faq-item"> 948 <button class="faq-toggle w-full text-left flex justify-between items-start md:items-center p-4 bg-gray-100 focus:outline-none"> 949 <div class="flex items-start gap-2"> 950 <span class="font-bold text-lg">Q</span> 951 <span class="font-bold text-sm md:text-base pt-0.5">é§è»å ´ã¯ããã¾ããï¼</span> 952 </div> 953 <i class="fa-solid fa-caret-down text-xl transition-transform duration-300 transform mt-0.5 md:mt-0"></i> 954 </button> 955 <div class="faq-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out bg-[#e0fbfc]"> 956 <div class="p-4 flex items-start gap-2 text-sm md:text-base border-t border-gray-100/50">
957 <span class="font-bold text-lg text-black">A</span> 958 <div class="leading-relaxed"> 959 æ·å°å ã«ç´20å°ã»ã©é§è»ãå¯è½ã§ãã大åè»ã®é§è»ãå¯è½ã§ãã 960 </div> 961 </div> 962 </div> 963 </div> 964 </div> 965 </div> 966 </div> 967 </div> 968 </section> 969 970 <!-- ã¢ã¯ã»ã¹ã»ã¯ã·ã§ã³ --> 971 <section id="access" class="relative bg-white pb-16 md:pb-24 scroll-mt-[160px]"> 972 <div class="absolute top-0 w-full z-10 pointer-events-none"> 973 <div class="absolute top-0 left-0 w-full h-[15px] bg-[#99eccb] border-t border-b border-black z-10"></div> 974 <div class="max-w-[1200px] mx-auto px-4 relative h-0"> 975 <h2 class="absolute -top-[50px] left-4 bg-[#99eccb] text-black font-bold py-3 w-[320px] rounded-t-2xl border border-b-0 border-black text-lg md:text-xl z-20 h-[51px] flex items-center justify-center box-border"> 976 ã¢ã¯ã»ã¹ã»è¿é£æ å ± 977 </h2> 978 <div class="absolute top-[-1px] left-[17px] w-[294px] h-[3px] bg-[#99eccb] z-30"></div> 979 </div> 980 </div> 981 982 <div class="max-w-[1200px] mx-auto px-4 pt-16 md:pt-20 flex flex-col md:flex-row gap-8 items-start relative"> 983 <div class="hidden xl:flex absolute -left-24 top-0 w-24 h-full justify-center items-start z-0 opacity-100"> 984 <div class="text-6xl md:text-9xl font-bold vertical-text text-outline-gallery tracking-widest select-none pt-16 md:pt-32" style="color: #e0fcf5; -webkit-text-stroke: 1px #000; font-family: 'Helvetica', sans-serif;"> 985 Access 986 </div> 987 </div> 988 989 <div class="flex-1 w-full z-10 text-black"> 990 <!-- Google Map --> 991 <div class="w-full h-[450px] md:h-[550px] mb-8 shadow-sm"> 992 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d36688.09553724489!2d140.23166391371004!3d35.37961501187242!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6022bb23a4b2e143%3A0xb82898ca68d4a39f!2z5Luy6ZaT44Go5rOK44G-44KL5a2m5qChIOOBoeOCh-OBhuOBquOCk-ilv-Wwjw!5e0!3m2!1sja!2sjp!4v1768897684970!5m2!1sja!2sjp" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> 993 </div> 994 995 <div class="max-w-[900px] mx-auto"> 996 <div class="text-center mb-12"> 997 <p class="font-bold text-lg md:text-xl mb-1">ã297-0145 åèçé·çé¡é·åçºä½åª 1348-1</p> 998 <p class="font-bold text-lg md:text-xl mb-3"> 999 [ é»è©± ] <a href="tel:0120154244" class="underline hover:no-underline">0120-154-244</a> (å仿é : 10:00 ã 17:00) 1000 </p> 1001 <p class="text-sm md:text-base text-red-600 font-bold leading-normal"> 1002 â»ã«ã¼ããã»Google Mapã§æ¤ç´¢ããéã¯ãã¡ãããªã西å°ããããã¯<br> 1003 ãæ§é·åçºç«è¥¿å°å¦æ ¡ãã§æ¤ç´¢ãããã¨ã¹ã ã¼ãºã§ãã 1004 </p> 1005 </div> 1006 1007 <div class="text-center mb-8"> 1008 <h3 class="text-xl md:text-2xl font-bold">ãè»ã§ã®ã¢ã¯ã»ã¹</h3> 1009 </div> 1010 <div class="flex flex-col md:flex-row gap-3 md:gap-8 mb-16 items-center"> 1011 <div class="w-full md:w-5/12 aspect-video bg-gray-200 overflow-hidden rounded-tl-3xl rounded-br-3xl shadow-none"> 1012 <img src="images/parking.jpg" class="w-full h-full object-cover" alt="é§è»å ´" loading="lazy"> 1013 </div> 1014 <div class="flex-1 md:pt-0 w-full"> 1015 <h4 class="text-lg md:text-xl font-bold mb-2">èåé·å IC ãã ç´ 15 å</h4> 1016 <p class="text-sm md:text-base leading-normal text-ju
1016stify"> 1017 ãè»ã§ãè¶ãã®æ¹ã¯ãæ ¡èè£ã«ããé§è»ã¹ãã¼ã¹ããå©ç¨ãã ããã詳ããã¯ã¹ã¿ããã¾ã§ã声ãããã ããã<br> 1018 大åè»ä¸¡ã®é§è»ãå¯è½ã§ãã®ã§ããã±ãã¹çã§ãè¶ãã®éããå®å¿ãã ããã 1019 </p> 1020 </div> 1021 </div> 1022 </div> 1023 1024 <div class="max-w-[900px] mx-auto border-t border-black py-12 mb-12"> 1025 <h3 class="text-center text-xl md:text-2xl font-bold mb-10">è¿é£ãã±æ å ±</h3> 1026 <div class="space-y-12 text-left"> 1027 <div class="flex flex-col md:flex-row gap-3 md:gap-8 items-center"> 1028 <div class="w-full md:w-5/12 aspect-video bg-gray-200 overflow-hidden rounded-tl-3xl rounded-br-3xl"> 1029 <img src="images/beach.jpg" class="w-full h-full object-cover" alt="ä¸å®®æµ·æ°´æµ´å ´" loading="lazy"> 1030 </div> 1031 <div class="flex-1 md:pt-0 w-full"> 1032 <h4 class="text-lg font-bold mb-2">ä¸å®®æµ·æ°´æµ´å ´</h4> 1033 <p class="text-sm md:text-base leading-normal mb-2 text-justify"> 1034 ä¹åä¹éæµå端ã«ä½ç½®ããæµ·æ°´æµ´å ´ã<br> 1035 ç´350mç¶ãé æµ ã®ãã¼ãã¯ãããããªç å°ã§éæåº¦ãé«ãã§ãã 1036 </p> 1037 <p class="text-xs md:text-sm text-gray-600"> 1038 â»æ®å½±è¨±å¯ã¯ãä¸å®®çº ç£æ¥è¦³å 課 å工観å ä¿ãã¾ã§ãé£çµ¡ãã ããã 1039 </p> 1040 </div> 1041 </div> 1042 <div class="flex flex-col md:flex-row-reverse gap-3 md:gap-8 items-center"> 1043 <div class="w-full md:w-5/12 aspect-video bg-gray-200 overflow-hidden rounded-tl-3xl rounded-br-3xl"> 1044 <img src="images/train.jpg" class="w-full h-full object-cover" alt="ããã¿éé" loading="lazy"> 1045 </div> 1046 <div class="flex-1 md:pt-0 w-full"> 1047 <h4 class="text-lg font-bold mb-2">ããã¿éé</h4> 1048 <p class="text-sm md:text-base leading-normal mb-2 text-justify"> 1049 åèçã®å¤§åé§ ãä¸ç·ä¸éé§ ãçµã¶ãæåã¬ãããªè»ä¸¡ãå壿ã ã®ç¾ããç°å風æ¯ãé åçãªééã§ãã 1050 </p> 1051 <p class="text-xs md:text-sm text-gray-600"> 1052 â»æ®å½±è¨±å¯ã¯ãããã¿ééãã¾ã§ãé£çµ¡ãã ããã 1053 </p> 1054 </div> 1055 </div> 1056 <div class="flex flex-col md:flex-row gap-3 md:gap-8 items-center"> 1057 <div class="w-full md:w-5/12 aspect-video bg-gray-200 overflow-hidden rounded-tl-3xl rounded-br-3xl"> 1058 <img src="images/herb.jpg" class="w-full h-full object-cover" alt="大å¤åãã¼ãã¬ã¼ãã³" loading="lazy"> 1059 </div> 1060 <div class="flex-1 md:pt-0 w-full"> 1061 <h4 class="text-lg font-bold mb-2">大å¤åãã¼ãã¬ã¼ãã³</h4> 1062 <p class="text-sm md:text-base leading-normal mb-2 text-justify"> 1063 å ¨å¤©ååã¬ã©ã¹ãã¦ã¹ã¬ã¼ãã³ã§ããæ½è¨ã«ã¯èªç¤¾è¾²åã»ãã¼ãã«ãã§ã¬ã¹ãã©ã³ã»ã¬ã¼ãã³ã·ã§ããã»é女ã®å®é¨å®¤ã»ããã°ã«ãã§çãããã¾ãã 1064 </p> 1065 <p class="text-xs md:text-sm text-gray-600"> 1066 â»æ®å½±è¨±å¯ã¯ã大å¤åãã±ã¼ã·ã§ã³ãµã¼ãã¹ãã¾ã
1066§ãé£çµ¡ãã ããã 1067 </p> 1068 </div> 1069 </div> 1070 </div> 1071 </div> 1072 </div> 1073 </div> 1074 </section> 1075 1076 </main> 1077 1078 <!-- ããã¿ã¼ --> 1079 <footer class="bg-gray-100 text-black border-t-2 border-black pt-12 pb-24 xl:pb-6"> 1080 <div class="max-w-[1200px] mx-auto px-4"> 1081 1082 <div class="flex flex-col xl:flex-row justify-between items-center xl:items-start mb-8 gap-6 xl:gap-8"> 1083 <div class="w-full xl:w-auto flex justify-center xl:justify-start"> 1084 <img src="images/rogo.png" alt="ã¡ãããªãè¥¿å° å¦æ ¡æ®å½±ã¹ã¿ã¸ãª" class="h-12 xl:h-16 object-contain" loading="lazy"> 1085 </div> 1086 <div class="text-xs md:text-sm leading-snug w-full xl:w-auto text-center xl:text-left space-y-1"> 1087 <p>ã297-0145 åèçé·çé¡é·åçºä½åª 1348-1</p> 1088 <p class="hidden xl:block font-bold">[ é»è©± ] 0120-154-244</p> 1089 <p>å仿é 10:00ã17:00(å¹´æ«å¹´å§é¤ã)</p> 1090 <p>æ 館æ¥è¨±å¯çªå· / 第 30-5 å·</p> 1091 <p>éå¶ä¼ç¤¾ï¼æ ªå¼ä¼ç¤¾ãã¤ãã</p> 1092 </div> 1093 <div class="flex flex-row flex-wrap gap-x-4 gap-y-2 text-[10px] md:text-sm font-bold w-full xl:w-auto justify-center xl:justify-start items-center xl:items-start"> 1094 <a href="https://chonan-nishisho.jp/wp-content/themes/chonan/images/pdf/yakkan2025.pdf" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 hover:underline whitespace-nowrap"><i class="fa-solid fa-play text-[8px] md:text-[10px]"></i> 宿æ³ç´æ¬¾ <i class="fa-solid fa-arrow-up-right-from-square text-[8px] md:text-[10px]"></i></a> 1095 <a href="ãã¡ãããªã西å°ã忥å©ç¨ç´æ¬¾.pdf" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 hover:underline whitespace-nowrap"><i class="fa-solid fa-play text-[8px] md:text-[10px]"></i> åç¨å©ç¨ç´æ¬¾ <i class="fa-solid fa-arrow-up-right-from-square text-[8px] md:text-[10px]"></i></a> 1096 <a href="https://chonan-nishisho.jp/policy" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1 hover:underline whitespace-nowrap"><i class="fa-solid fa-play text-[8px] md:text-[10px]"></i> ãã©ã¤ãã·ã¼ããªã·ã¼ <i class="fa-solid fa-arrow-up-right-from-square text-[8px] md:text-[10px]"></i></a> 1097 </div> 1098 </div> 1099 1100 <div class="hidden xl:block border-t border-b border-black py-4 mb-8"> 1101 <div class="flex flex-row justify-center items-center gap-8 font-bold text-base"> 1102 <div class="flex flex-wrap justify-center gap-8"> 1103 <a href="gallery.html" class="hover:opacity-70">ã®ã£ã©ãªã¼</a><span>|</span><a href="index.html#price" class="hover:opacity-70">å©ç¨æé</a><span>|</span><a href="index.html#faq" class="hover:opacity-70">FAQ</a><span>|</span><a href="index.html#access" class="hover:opacity-70">ã¢ã¯ã»ã¹</a><span>|</span><a href="case.html" class="hover:opacity-70">å©ç¨äºä¾</a> 1104 </div> 1105 <a href="https://www.instagram.com/chonan_nishisho/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 border border-black rounded px-3 py-1 hover:bg-gray-200 transition-colors"><i class="fa-brands fa-instagram text-lg"></i> Instagram</a> 1106 </div> 1107 </div> 1108 1109 <div class="xl:hidden w-full flex flex-col items-center gap-4 mb-4"> 1110 <div class="w-full border-t border-black mb-2"></div> 1111 <div class="flex flex-wrap justify-center gap-4 font-bold text-xs"> 1112 <a href="gallery.html">ã®ã£ã©ãªã¼</a> 1113 <a href="index.html#price">å©ç¨æé</a> 1114 <a href="index.html#faq">FAQ</a> 1115 <a href="index.html#access">ã¢ã¯ã»ã¹</a> 1116 <a href="case.html">å©ç¨äºä¾</a> 1117 </div> 1118 1119 <a href="https://www.instagram.com/chonan_nishisho/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 border border-black rounded px-6 py-2 hover:bg-gray-200 transition-colors"> 1120 <i class="fa-brands fa-instagram text-lg"></i> Instagram 1121 </a> 1122 1123 <div class="w-full border-t border-black my-2"></div> 1124 1125 <div class="font-bold leading-tight text-center flex flex-col items-center"> 1126 <p class="text-sm md:text-3xl mb-1 flex items-center justify-center gap-2"> 1127 <a href="tel:0120154244" class="text-2xl md:text-3xl hover:opacity-70">0120-154-244</a> 1128 </p> 1129 <p class="text-[10px] md:text-sm whitespace-nowrap">(å仿é : 10:00 ã 17:00)</p> 1130 </div> 1131 </div> 1132 1133 <div class="hidden xl:flex flex-col items-center mb-6 w-full"> 1134 <div class="flex flex-row gap-4 justify-center mx-auto w-auto mb-6"> 1135 <a href="https://survey.mynavi.jp/cre/?enq=CEHdZ%2f%2b5UfY%3d" target="_blank" class="btn-header-pop bg-[#ffed2b] border border-black rounded-full px-12 py-4 text-xl font-bold text-center flex items-center justify-center gap-2"> 1136 <i class="fa-regular fa-envelope text-2xl"></i> 空ãç¶æ³ã»è³æè«æ±ã¯ãã¡ã 1137 </a> 1138 </div> 1139 </div> 1140 1141 <div class="text-center text-[10px] md:text-xs text-gray-500">
1141Copyright © Mynavi Corporation</div> 1142 </div> 1143 </footer> 1144 1145 <!-- ä¸é¨åºå®ããã¿ã¼ (ã¿ãã¬ãã/ã¹ããã®ã¿: xlæªæº) --> 1146 <div class="fixed bottom-0 left-0 w-full z-50 xl:hidden px-2 py-3 flex pointer-events-none"> 1147 <a href="https://survey.mynavi.jp/cre/?enq=CEHdZ%2f%2b5UfY%3d" target="_blank" class="flex-1 bg-[#ffed2b] border border-black rounded-lg py-3 flex items-center justify-center gap-2 text-black shadow-pop active:translate-y-[1px] active:shadow-none transition-all pointer-events-auto"> 1148 <i class="fa-regular fa-envelope text-lg"></i> 1149 <span class="text-sm font-bold">空ãç¶æ³ã»è³æè«æ±ã¯ãã¡ã</span> 1150 </a> 1151 </div> 1152 1153 <!-- TOPã«æ»ããã¿ã³ --> 1154 <a href="#page-top" id="back-to-top" class="fixed bottom-24 xl:bottom-8 right-4 z-[9999] bg-[#ffed2b] text-black border-2 border-black rounded-full w-14 h-14 hidden xl:flex flex-col items-center justify-center font-bold text-xs shadow-[2px_2px_0_0_#000] hover:translate-y-[-2px] hover:shadow-[4px_4px_0_0_#000] transition-all duration-300 opacity-0 pointer-events-none"> 1155 <i class="fa-solid fa-chevron-up text-lg mb-[-2px]"></i> 1156 TOP 1157 </a> 1158 1159 <!-- ã¹ããç¨TOPã«æ»ããã¿ã³ --> 1160 <a href="#page-top" id="back-to-top-sp" class="fixed bottom-20 right-4 z-[9999] bg-[#ffed2b] text-black border-2 border-black rounded-full w-12 h-12 xl:hidden flex flex-col items-center justify-center font-bold text-[10px] shadow-[2px_2px_0_0_#000] active:translate-y-[1px] active:shadow-none transition-all duration-300 opacity-0 pointer-events-none"> 1161 <i class="fa-solid fa-chevron-up text-base mb-[-2px]"></i> 1162 TOP 1163 </a> 1164 1165 <!-- ã¹ã¯ãªãã --> 1166
1166<script> 1167 document.addEventListener('DOMContentLoaded', () => { 1168 // ãã³ãã¼ã¬ã¼ã¡ãã¥ã¼å¶å¾¡ 1169 const hamburgerBtn = document.getElementById('hamburger-btn'); 1170 const mobileMenu = document.getElementById('mobile-menu'); 1171 const mobileLinks = document.querySelectorAll('.mobile-link'); 1172 1173 if (hamburgerBtn && mobileMenu) { 1174 hamburgerBtn.addEventListener('click', () => { 1175 hamburgerBtn.classList.toggle('active'); 1176 1177 if (hamburgerBtn.classList.contains('active')) { 1178 mobileMenu.style.opacity = '1'; 1179 mobileMenu.style.visibility = 'visible'; 1180 document.body.style.overflow = 'hidden'; 1181 } else { 1182 mobileMenu.style.opacity = '0'; 1183 mobileMenu.style.visibility = 'hidden'; 1184 document.body.style.overflow = ''; 1185 } 1186 }); 1187 1188 mobileLinks.forEach(link => { 1189 link.addEventListener('click', () => { 1190 hamburgerBtn.classList.remove('active'); 1191 mobileMenu.style.opacity = '0'; 1192 mobileMenu.style.visibility = 'hidden'; 1193 document.body.style.overflow = ''; 1194 }); 1195 }); 1196 } 1197 1198 // ãããã¼å¶å¾¡ 1199 function adjustMainPadding() { 1200 const headerWrapper = document.getElementById('fixed-header-wrapper'); 1201 const header = document.querySelector('header'); 1202 const mainContent = document.getElementById('main-content'); 1203 if (headerWrapper && header && mainContent) { 1204 const headerHeight = header.offsetHeight; 1205 mainContent.style.paddingTop = headerHeight + 'px'; 1206 } 1207 } 1208 1209 window.addEventListener('load', adjustMainPadding); 1210 window.addEventListener('resize', adjustMainPadding); 1211 window.addEventListener('scroll', adjustMainPadding); 1212 1213 // ãã´ã®ã¹ã¯ãã¼ã«å¶å¾¡ã¨TOPãã¿ã³ 1214 const backToTopButton = document.getElementById('back-to-top'); 1215 const backToTopButtonSp = document.getElementById('back-to-top-sp'); 1216 window.addEventListener('scroll', () => { 1217 if (window.scrollY > 50) { 1218 document.body.classList.add('is-scrolled'); 1219 } else { 1220 document.body.classList.remove('is-scrolled'); 1221 } 1222 1223 if (window.scrollY > 300) { 1224 if(backToTopButton) { 1225 backToTopButton.classList.add('is-visible'); 1226 backToTopButton.style.opacity = '1'; 1227 backToTopButton.style.pointerEvents = 'auto'; 1228 } 1229 if(backToTopButtonSp) { 1230 backToTopButtonSp.classList.add('is-visible'); 1231 backToTopButtonSp.style.opacity = '1'; 1232 backToTopButtonSp.style.pointerEvents = 'auto'; 1233 } 1234 } else { 1235 if(backToTopButton) { 1236 backToTopButton.classList.remove('is-visible'); 1237 backToTopButton.style.opacity = '0'; 1238 backToTopButton.style.pointerEvents = 'none'; 1239 } 1240 if(backToTopButtonSp) { 1241 backToTopButtonSp.classList.remove('is-visible'); 1242 backToTopButtonSp.style.opacity = '0'; 1243 backToTopButtonSp.style.pointerEvents = 'none'; 1244 } 1245 } 1246 }); 1247 1248 // ã®ã£ã©ãªã¼ç»ååãæ¿ãæ©è½ (ç°¡æç) 1249 const galleryImages = [ 1250 'images/watarirouka_03.jpg', 1251 'images/taiikukan_02.jpg', 1252 'images/rouka01.jpg', 1253 'images/book01.jpg', 1254 'images/classroom01.jpg', 1255 'images/door01.jpg' 1256 ]; 1257 const imgIds = [ 1258 'gallery-img-1', 1259 'gallery-img-2', 1260 'gallery-img-3', 1261 'gallery-img-6', 1262 'gallery-img-5', 1263 'gallery-img-4' 1264 ]; 1265 const rotateGallery = () => { 1266 const imgElements = imgIds.map(id => document.getElementById(id)).filter(el => el); 1267 1268 // ãã§ã¼ãã¢ã¦ã
1269 imgElements.forEach(el => el.classList.add('fade-out')); 1270 1271 setTimeout(() => { 1272 // ç»åå ¥ãæ¿ã 1273 const lastImage = galleryImages.pop(); 1274 galleryImages.unshift(lastImage); 1275 1276 imgElements.forEach((el, index) => { 1277 el.src = galleryImages[index]; 1278 // èªã¿è¾¼ã¿å®äºã¾ãã¯å³æãã§ã¼ãã¤ã³ 1279 el.onload = () => el.classList.remove('fade-out'); 1280 if(el.complete) el.classList.remove('fade-out'); 1281 }); 1282 }, 500); 1283 }; 1284 setInterval(rotateGallery, 5000); 1285 1286 // FAQã¢ã³ã¼ãã£ãªã³å¶å¾¡ 1287 const faqToggles = document.querySelectorAll('.faq-toggle'); 1288 faqToggles.forEach(toggle => { 1289 toggle.addEventListener('click', () => { 1290 const content = toggle.nextElementSibling; 1291 const icon = toggle.querySelector('i'); 1292 if (content.style.maxHeight) { 1293 content.style.maxHeight = null; 1294 icon.style.transform = 'rotate(0deg)'; 1295 } else { 1296 content.style.maxHeight = content.scrollHeight + "px"; 1297 icon.style.transform = 'rotate(180deg)'; 1298 } 1299 }); 1300 }); 1301 1302 }); 1303 </script>
1303 1304</body> 1305</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.