1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 5<!-- Google Tag Manager -->
6<script>
vendor: 321 bytes, lines 6-10
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'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 10})(window,document,'script','dataLayer','
10GTM-5BRXZN
vendor: 3 bytes, line 10
10');
10</script>
10 11<!-- Google Tag Manager --> 12 13 14<!-- Yahoo! JAPANãµã¤ãã¸ã§ãã©ã«ã¿ã°ã»ã³ã³ãã¼ã¸ã§ã³æ¸¬å®è£å®æ©è½ã¿ã° -->
15<script async src="https://s.yimg.jp/images/listing/tool/cv/ytag.js"></script>
vendor: 1 bytes, line 15
15
16<script> 17window.yjDataLayer = window.yjDataLayer || []; 18function ytag() { yjDataLayer.push(arguments); } 19ytag({"type":"ycl_cookie"}); 20</script>
20 21<!-- End Yahoo! JAPANãµã¤ãã¸ã§ãã©ã«ã¿ã°ã»ã³ã³ãã¼ã¸ã§ã³æ¸¬å®è£å®æ©è½ã¿ã° --> 22 23<meta charset="UTF-8"> 24<meta name="viewport" content="width=device-width, initial-scale=1.0"> 25<meta name="keywords" content="ãã¼ã ãã¼ã¸ä½æ,ç°¡å,ãã¼ã¸ããã" /> 26<meta name="description" content="ãã¼ã ãã¼ã¸ä½æãç°¡åã«ãããã¾ã§27,000å以ä¸ã®æ¹ã«ãã¼ã ãã¼ã¸ã使ãã¦ããã ãã¦ããã¾ããåæè²»ç¨ç¡æãæ´æ°è²»ç¡æã" /> 27<meta http-equiv="Pragma" content="no-cache" /> 28<link rel="shortcut icon" href="/images/favicon.ico" /> 29<link rel="canonical" href="https://www.p-kit.com/" /> 30<title>ãã¼ã ãã¼ã¸ä½æ ç°¡å | ãã¼ã ãã¼ã¸ä½æã®ãã¼ã¸ããã</title> 31<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet"> 32<link href="/css/tailwind.css?v=20260519k" rel="stylesheet"> 33 34<style> 35/* ã«ã©ã¼ã¹ã¦ã©ãã */ 36.swatch { 37 width: 23px; height: 23px; border-radius: 50%; border: none; 38 cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; 39 position: relative; 40 animation: pulse-glow-light 2.5s ease-in-out infinite; 41} 42.swatch.is-touched { animation: none; box-shadow: none; } 43.swatch:hover { transform: scale(1.15); } 44.swatch.is-active { box-shadow: 0 0 0 3px #2c3e50; } 45.swatch.is-active::after { 46 content: "\2713"; position: absolute; inset: 0; 47 display: flex; align-items: center; justify-content: center; 48 color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); 49} 50 51/* ãã¬ãã¥ã¼iframe */ 52.preview-iframe { 53 position: absolute; top: 0; left: 0; 54 width: calc(100% / 0.6); height: calc(100% / 0.6); border: none; 55 transform: scale(0.6); transform-origin: top left; 56 opacity: 0; transition: opacity 0.3s ease; 57} 58.preview-iframe.is-ready { opacity: 1; } 59 60/* æ©è½ç´¹ä»ï¼ç»åã«ã«ã¼ã»ã« */ 61.feature-carousel { 62 position: relative; 63 aspect-ratio: 4 / 3; 64 background: #f8fafc; 65 border-radius: 1rem; 66 overflow: hidden; 67} 68.feature-carousel-slide { 69 position: absolute; 70 inset: 0; 71 width: 100%; 72 height: 100%; 73 object-fit: contain; 74 opacity: 0; 75 transition: opacity 0.6s ease; 76} 77.feature-carousel-slide.is-active { 78 opacity: 1; 79} 80.feature-detail-img { 81 width: 100%; 82 border-radius: 1rem; 83 display: block; 84} 85.feature-media-wrap { 86 border-radius: 1rem; 87 overflow: hidden; 88 box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); 89} 90.feature-media-wrap img, 91.feature-media-wrap video { 92 width: 100%; 93 display: block; 94} 95 96/* ãã¼ã¸å ã¢ã³ã«ã¼ */ 97html { scroll-behavior: smooth; } 98[id] { scroll-margin-top: 76px; } 99.case-card { 100 border-radius: 12px; 101 overflow: hidden; 102 background: #fff; 103 box-shadow: 0 2px 12px rgba(0,0,0,0.06); 104 transition: transform 0.2s, box-shadow 0.2s; 105} 106.case-card:hover { 107 transform: translateY(-3px); 108 box-shadow: 0 8px 24px rgba(0,0,0,0.1); 109} 110.case-card img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; object-position: top center; } 111.flow-step-head { 112 background: linear-gradient(135deg, #334155, #1e293b); 113 color: #fff; 114 text-align: center; 115 padding: 12px 16px; 116 font-weight: 700; 117 font-size: 15px; 118} 119.cta-band { 120 background: linear-gradient(135deg, #1e293b, #334155); 121} 122.cta-band-seo-img img { 123 display: block; 124 width: 100%; 125 height: auto; 126 object-fit: contain; 127} 128.why-pillar-img { 129 width: 100%; 130 border-radius: 1rem; 131 display: block; 132 aspect-ratio: 4 / 3; 133 object-fit: cover; 134} 135.why-main-title { 136 font-size: 2rem; 137 line-height: 1.3; 138} 139@media (min-width: 768px) { 140 .why-main-title { font-size: 2.75rem; } 141} 142.why-cta-box { 143 margin-top: 5rem; 144} 145.value-growth-title { 146 font-size: 1.875rem; 147 line-height: 1.35; 148} 149@media (min-width: 768px) { 150 .value-growth-title { font-size: 2.25rem; } 151} 152.value-growth-list > * + * { 153 margin-top: 2rem; 154} 155.pricing-detail-img-wrap { 156 padding: 1.5rem 1.25rem; 157 background: #fff; 158} 159@media (min-width: 768px) { 160 .pricing-detail-img-wrap { 161 padding: 2rem 2.5rem; 162 } 163} 164.pricing-detail-img-wrap img { 165 width: auto; 166 max-width: 100%; 167 height: auto; 168 margin-left: auto; 169 margin-right: auto; 170} 171.pricing-detail-img-wrap .pricing-detail-img-pc { 172 display: block; 173} 174.pricing-detail-img-wrap .pricing-detail-img-sp { 175 display: none; 176} 177@media (max-width: 767px) { 178 .pricing-detail-img-wrap .pricing-detail-img-pc { 179 display: none; 180 } 181 .pricing-detail-img-wrap .pricing-detail-img-sp { 182 display: block; 183 } 184} 185@media (min-width: 768px) { 186 .value-growth-list > * + * { margin-top: 2.5rem; } 187} 188@media (max-width: 767px) { 189 .why-cta-box { margin-top: 3.5rem; } 190} 191 192/* ã®ã£ã©ãªã¼ã«ã«ã¼ã»ã« */ 193@keyframes scroll { 194 0% { transform: translateX(0); } 195 100% { transform: translateX(-50%); } 196} 197.carousel-track { 198 display: flex; 199 gap: 16px; 200 width: max-content; 201 cursor: grab; 202} 203.carousel-track.is-dragging { cursor: grabbing; } 204.carousel-item { 205 flex: 0 0 320px; 206 border-radius: 12px; 207 overflow: hidden; 208 box-shadow: 0 1px 3px rgba(0,0,0,0.08); 209 transition: transform 0.3s, box-shadow 0.3s; 210 position: relative; 211 cursor: pointer; 212} 213.carousel-item:hover { 214 transform: translateY(-4px); 215 box-shadow: 0 8px 24px rgba(0,0,0,0.12); 216} 217.carousel-item .carousel-overlay { 218 position: absolute; inset: 0; 219 background: rgba(0,0,0,0.45); 220 display: flex; align-items: center; justify-content: center; 221 opacity: 0; transition: opacity 0.3s; 222} 223.carousel-item:hover .carousel-overlay { opacity: 1; } 224.carousel-overlay .carousel-btn { 225 padding: 10px 28px; 226 background: #fff; 227 color: #333; 228 border-radius: 8px; 229 font-size: 14px; 230 font-weight: 700; 231 letter-spacing: 0.05em; 232 pointer-events: auto; 233} 234 235/* ãã¬ãã¥ã¼iframe縮å°ï¼ã³ã³ãã³ãå¹ 1200px以ä¸ãç¶æï¼ */ 236@media (max-width: 1024px) { 237 .preview-iframe { 238 width: calc(100% / 0.7); height: calc(100% / 0.7); 239 transform: scale(0.7); 240 } 241} 242@media (max-width: 900px) { 243 .preview-iframe { 244 width: calc(100% / 0.6); height: calc(100% / 0.6); 245 transform: scale(0.6); 246 } 247} 248@media (max-width: 760px) { 249 .preview-iframe { 250 width: calc(100% / 0.5); height: calc(100% / 0.5); 251 transform: scale(0.5); 252 } 253} 254@media (max-width: 450px) { 255 .preview-iframe { 256 width: calc(100% / 0.4); height: calc(100% / 0.4); 257 transform: scale(0.4); 258 } 259} 260 261/* ãã«ã¹å 彩 */ 262@keyframes pulse-glow { 263 0%, 100% { box-shadow: 0 0 0 0 rgba(247,171,2,0.45); } 264 50% { box-shadow: 0 0 13px 5px rgba(247,171,2,0.45); } 265} 266.pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; } 267.pulse-glow.is-touched { animation: none; box-shadow: none; } 268 269/* ã«ã©ã¼ç¨ï¼æ§ããå 彩 */ 270@keyframes pulse-glow-light { 271 0%, 100% { box-shadow: 0 0 0 0 rgba(247,171,2,0.3); } 272 50% { box-shadow: 0 0 10px 4px rgba(247,171,2,0.3); } 273} 274 275/* æã¢ã¤ã³ã³ãã¦ã³ã¹ */ 276@keyframes point-bounce { 277 0%, 100% { transform: translateX(0); } 278 50% { transform: translateX(4px); } 279} 280.point-bounce { animation: point-bounce 1.2s ease-in-out infinite; } 281 282/* ãããã¼ã¬ã¹ãã³ã·ãï¼Tailwind @layer ãå¹ããªãããç´æ¸ãï¼ */ 283#mobile-menu-btn { 284 display: flex; flex-direction: column; justify-content: center; align-items: center; 285 width: 36px; height: 36px; gap: 5px; margin-left: 4px; 286 background: none; border: none; padding: 0; cursor: pointer; 287} 288#mobile-menu-btn span { 289 display: block;
289 width: 20px; height: 2px; 290 background-color: #4b5563; transition: all 0.3s; 291} 292@media (min-width: 1024px) { 293 #mobile-menu-btn { display: none; } 294} 295.header-nav-link { } 296.header-cta { } 297@media (max-width: 1023px) { 298 .header-nav-link { display: none !important; } 299} 300@media (max-width: 639px) { 301 .header-cta { display: none !important; } 302} 303 304/* ã¢ãã¤ã«ã¡ãã¥ã¼ */ 305#mobile-menu-overlay { 306 position: fixed; inset: 0; z-index: 40; 307 background: rgba(0,0,0,0.4); 308 opacity: 0; pointer-events: none; 309 transition: opacity 0.3s; 310} 311#mobile-menu { 312 position: fixed; top: 60px; right: 0; z-index: 40; 313 width: 256px; height: calc(100vh - 60px); 314 background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.12); 315 transform: translateX(100%); 316 transition: transform 0.3s; 317 overflow-y: auto; 318} 319</style> 320
321<script type="application/ld+json"> 322[{"@context":"https://schema.org","@type":"Organization","name":"æ ªå¼ä¼ç¤¾ã¢ã¤ãã¢ã¯ãªãã","url":"https://www.p-kit.com","description":"åå¿è ã§ãç°¡åã«ãã¼ã ãã¼ã¸ã使ã§ããã¦ã§ããµã¤ããã«ãã¼ãµã¼ãã¹ãPAGEKitï¼ãã¼ã¸ãããï¼ããæä¾ãæé¡1,614åããå©ç¨å¯è½ã§ãåæè²»ç¨0åã"},{"@context":"https://schema.org","@type":"WebSite","name":"PAGEKitï¼ãã¼ã¸ãããï¼","url":"https://www.p-kit.com","description":"ãã¼ã ãã¼ã¸ä½æãç°¡åã«ãããã¾ã§27,000å以ä¸ã®æ¹ã«ãã¼ã ãã¼ã¸ã使ãã¦ããã ãã¦ããã¾ããåæè²»ç¨ç¡æãæ´æ°è²»ç¡æã"},{"@context":"https://schema.org","@type":"SoftwareApplication","name":"PAGEKitï¼ãã¼ã¸ãããï¼","applicationCategory":"WebApplication","operatingSystem":"Any","description":"è¦ãªããç·¨éã§ãããã¼ã ãã¼ã¸ä½æãµã¼ãã¹ãAIè£å©æ©è½ããã¶ã¤ã³ç·¨éãã·ã§ããã³ã°ã«ã¼ããããã°æ©è½ãªã©è±å¯ãªæ©è½ãæè¼ã","url":"https://www.p-kit.com","provider":{"@type":"Organization","name":"æ ªå¼ä¼ç¤¾ã¢ã¤ãã¢ã¯ãªãã"},"offers":{"@type":"Offer","price":"19360","priceCurrency":"JPY","priceSpecification":{"@type":"UnitPriceSpecification","price":"19360","priceCurrency":"JPY","billingIncrement":"P1Y","unitText":"å¹´é¡ï¼æé¡æç®1,614åç¸å½ï¼"}},"featureList":["è¦ãªããç·¨éæ©è½","AIè£å©æ©è½","ãã¶ã¤ã³ç·¨é","ã·ã§ããã³ã°ã«ã¼ã","ããã°æ©è½","ã¬ã¹ãã³ã·ã対å¿"]}] 323</script>
323 324</head> 325<body class="font-sans text-gray-700 bg-white leading-relaxed"> 326 327<!-- Google Tag Manager (noscript) -->
vendor: 62 bytes, lines 327-328
327 328<noscript><iframe src="//www.googletagmanager.com/ns.html?id=
328GTM-5BRXZN
vendor: 83 bytes, lines 328-329
328" 329height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
330<!-- End Google Tag Manager (noscript) --> 331 332 333<!-- ===== Header ===== --> 334 335<header class="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur border-b border-black/5 px-8 h-[60px] flex items-center justify-between max-md:px-4"> 336 <div><a href="https://www.p-kit.com/"><img src="/images/top_image-b/img/logo.png" alt="PAGEKit" class="w-[150px]"></a></div> 337 <nav class="flex items-center gap-5"> 338 <a href="/index.php" class="header-nav-link text-sm font-medium text-gray-500 hover:text-slate-800 transition-colors">HOME</a> 339 <a href="/main/price/index.php" class="header-nav-link text-sm font-medium text-gray-500 hover:text-slate-800 transition-colors">æé</a> 340 <a href="/main/details/index.php" class="header-nav-link text-sm font-medium text-gray-500 hover:text-slate-800 transition-colors">æ©è½ç´¹ä»</a> 341 <a href="/main/q-a/" class="header-nav-link text-sm font-medium text-gray-500 hover:text-slate-800 transition-colors">ããããã質å</a> 342 <a href="/main/guide/" class="header-nav-link text-sm font-medium text-gray-500 hover:text-slate-800 transition-colors">ããã¥ã¢ã«</a> 343 <a href="/main/contact/" class="header-nav-link text-sm font-medium text-gray-500 hover:text-slate-800 transition-colors">ãåãåãã</a> 344 <a href="/main/signup/index.php?bt=common_header" class="header-cta px-5 py-2 bg-[#F7AB02] text-white rounded-md font-bold text-[13px] hover:bg-[#e09a02] transition-colors">ãµã³ãã«ãè¦ã</a> 345 <a href="/user/" class="header-cta px-5 py-2 bg-slate-700 text-white rounded-md font-bold text-[13px] hover:bg-slate-800 transition-colors">ãã°ã¤ã³</a> 346 <!-- ãã³ãã¼ã¬ã¼ãã¿ã³ï¼lgæªæºã§è¡¨ç¤ºï¼ --> 347 <button id="mobile-menu-btn" aria-label="ã¡ãã¥ã¼ãéã"> 348 <span id="hamburger-top"></span> 349 <span id="hamburger-mid"></span> 350 <span id="hamburger-bot"></span> 351 </button> 352 </nav> 353</header> 354 355<!-- ===== ã¢ãã¤ã«ã¡ãã¥ã¼ ===== --> 356<div id="mobile-menu-overlay"></div> 357<nav id="mobile-menu"> 358 <div class="flex flex-col py-4"> 359 <a href="/index.php" class="px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-slate-800 transition-colors">HOME</a> 360 <a href="/main/price/index.php" class="px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-slate-800 transition-colors">æé</a> 361 <a href="/main/details/index.php" class="px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-slate-800 transition-colors">æ©è½ç´¹ä»</a> 362 <a href="/main/q-a/" class="px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-slate-800 transition-colors">ããããã質å</a> 363 <a href="/main/guide/" class="px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-slate-800 transition-colors">ããã¥ã¢ã«</a> 364 <a href="/main/contact/" class="px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-slate-800 transition-colors">ãåãåãã</a> 365 <div class="border-t border-gray-100 mt-2 pt-2 px-6 flex flex-col gap-2"> 366 <a href="/main/signup/index.php?bt=common_mobile" class="block text-center px-5 py-2.5 bg-[#F7AB02] text-white rounded-md font-bold text-[13px] hover:bg-[#e09a02] transition-colors">ãµã³ãã«ãè¦ã</a> 367 <a href="/user/" class="block text-center px-5 py-2.5 bg-slate-700 text-white rounded-md font-bold text-[13px] hover:bg-slate-800 transition-colors">ãã°ã¤ã³</a> 368 </div> 369 </div> 370</nav> 371
372<script> 373(function() { 374 var btn = document.getElementById('mobile-menu-btn'); 375 var menu = document.getElementById('mobile-menu'); 376 var overlay = document.getElementById('mobile-menu-overlay'); 377 var top = document.getElementById('hamburger-top'); 378 var mid = document.getElementById('hamburger-mid'); 379 var bot = document.getElementById('hamburger-bot'); 380 var open = false; 381 382 function toggle() { 383 open = !open; 384 if (open) { 385 menu.style.transform = 'translateX(0)'; 386 overlay.style.opacity = '1'; 387 overlay.style.pointerEvents = 'auto'; 388 top.style.transform = 'translateY(7px) rotate(45deg)'; 389 mid.style.opacity = '0'; 390 bot.style.transform = 'translateY(-7px) rotate(-45deg)'; 391 } else { 392 menu.style.transform = 'translateX(100%)'; 393 overlay.style.opacity = '0'; 394 overlay.style.pointerEvents = 'none'; 395 top.style.transform = ''; 396 mid.style.opacity = '1'; 397 bot.style.transform = ''; 398 } 399 } 400 401 btn.addEventListener('click', toggle); 402 overlay.addEventListener('click', toggle); 403 404 // ã¡ãã¥ã¼ãªã³ã¯ã¯ãªãã¯ã§éãã 405 menu.querySelectorAll('a').forEach(function(a) { 406 a.addEventListener('click', function() { if (open) toggle(); }); 407 }); 408})(); 409</script>
409 410 411 412<!-- ===== TOP PAGE B PATTERN (A/B Test, 2026-06-01 使) ===== --> 413<!-- ãã®ãã¡ã¤ã«ã¯ Bãã¿ã¼ã³ç¨ãindex.html ã®ã³ãã¼ããéå§ãBãã¿ã¼ã³ã®å¤æ´ç¹ã¯ããã«è¿½è¨ãã¦ãã ãã --> 414<!-- ===== Hero ===== --> 415 416<section class="pt-[120px] pb-[60px] px-8 text-center bg-gradient-to-br from-slate-50 to-slate-100 max-md:pt-[100px] max-md:pb-10 max-md:px-5"> 417 <h1 class="text-[clamp(28px,4vw,48px)] font-black leading-tight text-slate-900 mb-4"> 418 <em class="not-italic text-[#F7AB02]">é¸ã¶ã ãã</em><br>ããå質ã®ãã¼ã ãã¼ã¸ã<br>ä»ããã 419 </h1> 420 <p class="text-[clamp(15px,2vw,18px)] text-gray-500 mb-10">æ¥ç¨®ã¿ã¤ãã¨ã«ã©ã¼ãé¸ã¶ã ãã§ãããªãå°ç¨ã®ãã¼ã ãã¼ã¸ã宿ãã¾ãã</p> 421 422 <!-- ===== Builder ===== --> 423 <div class="max-w-[1000px] mx-auto bg-white rounded-2xl shadow-[0_8px_40px_rgba(0,0,0,0.08)] overflow-hidden relative"> 424 <div class="flex items-center gap-4 flex-wrap px-6 py-5 border-b border-gray-100 max-md:px-4 max-md:gap-3"> 425 <div class="flex items-center gap-2 relative"> 426 <select class="px-3 py-2 border-2 border-[#F7AB02] rounded-md text-sm font-sans bg-white transition-colors focus:outline-none focus:border-[#F7AB02] focus:ring-2 focus:ring-[#F7AB02]/20 pulse-glow" id="bizSelect"></select> 427 </div> 428 <div class="flex items-center gap-2"> 429 <label class="text-xs font-bold text-gray-400 uppercase tracking-wider whitespace-nowrap">ã«ã©ã¼</label> 430 <div class="grid grid-cols-12 gap-1" id="colorPalette"></div> 431 </div> 432 <div class="ml-auto max-md:ml-0 max-md:w-full"> 433 <button class="px-7 py-2.5 bg-[#F7AB02] text-white border-none rounded-lg text-[15px] font-bold cursor-pointer transition hover:bg-[#e09a02] hover:-translate-y-px font-sans max-md:w-full" id="startBtn">ãã®ãã¶ã¤ã³ã§ãã¬ãã¥ã¼</button> 434 </div> 435 </div> 436 <!-- æç»åï¼å·¦ä¸ããæ¥ç¨®ãæãï¼ --> 437 <div class="absolute top-[74px] left-[14px] z-10 pointer-events-none max-md:-left-3" id="guideHint"> 438 <img src="/images/top/finger.png" alt="" class="w-[80px] point-bounce"> 439 </div> 440 <div class="relative bg-gray-200 h-[620px] overflow-hidden max-md:h-[500px]"> 441 <div class="absolute inset-0 flex items-center justify-center text-gray-400 text-sm" id="previewLoading">ãã¬ãã¥ã¼ãèªã¿è¾¼ã¿ä¸...</div> 442 <iframe class="preview-iframe" id="previewFrame"></iframe> 443 </div> 444 </div> 445</section> 446<!-- ===== å®ç¸¾æ°å¤ãã¼ ===== --> 447<section class="bg-slate-800 py-10 px-8 max-md:py-8 max-md:px-5"> 448 <div class="max-w-[1200px] mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-white"> 449 <div> 450 <div class="text-[clamp(28px,4vw,40px)] font-black leading-none mb-1">27,000<span class="text-lg font-bold">ä»¶è¶ </span></div> 451 <div class="text-sm text-slate-300">å°å ¥å®ç¸¾</div> 452 </div> 453 <div> 454 <div class="text-[clamp(28px,4vw,40px)] font-black leading-none mb-1">22<span class="text-lg font-bold">å¹´</span></div> 455 <div class="text-sm text-slate-300">éå¶å®ç¸¾</div> 456 </div> 457 <div> 458 <div class="text-[clamp(28px,4vw,40px)] font-black leading-none mb-1">98<span class="text-lg font-bold">%</span></div> 459 <div class="text-sm text-slate-300">ãµãã¼ãæºè¶³åº¦</div> 460 </div> 461 <div> 462 <div class="text-[clamp(28px,4vw,40px)] font-black leading-none mb-1">50<span class="text-lg font-bold">種é¡+</span></div> 463 <div class="text-sm text-slate-300">対å¿ãã³ãã¬ã¼ã</div> 464 </div> 465 </div> 466</section> 467 468<!-- ===== ãç¥ãã ===== --> 469<!-- <section class="py-4 px-8 bg-slate-50 border-b border-gray-100 max-md:px-5"> 470 <div class="max-w-[1200px] mx-auto space-y-2"> 471 <div class="flex items-center gap-3 max-md:gap-2"> 472 <span class="shrink-0 text-xs font-bold text-white bg-[#F7AB02] rounded px-2 py-0.5">ãç¥ãã</span> 473 <a href="https://www.p-kit.com/main/help-center/page580538.html" class="text-sm text-slate-700 hover:text-[#F7AB02] transition-colors truncate"> 474 <time class="text-gray-400 mr-2">2026.09.15</time>é£ä¼ä¸ã®ãååãçªå£ã®å¶æ¥ã«ã¤ã㦠475 </a> 476 </div> 477 </div> 478</section> --> 479<section class="py-4 px-8 bg-slate-50 border-b border-gray-100 max-md:px-5">
480 <div class="max-w-[1200px] mx-auto space-y-2"> 481 <div class="flex items-center gap-3 max-md:gap-2"> 482 <span class="shrink-0 text-xs font-bold text-white bg-[#F7AB02] rounded px-2 py-0.5">ãç¥ãã</span> 483 <span class="text-sm text-slate-700 truncate"> 484 <time class="text-gray-400 mr-2">2026.05.12</time>ãµã¤ãããªãã¥ã¼ã¢ã«ãã¾ããã 485 </span> 486 </div> 487 </div> 488</section> 489<section class="py-4 px-8 bg-slate-50 border-b border-gray-100 max-md:px-5"> 490 <div class="max-w-[1200px] mx-auto space-y-2"> 491 <div class="flex items-center gap-3 max-md:gap-2"> 492 <span class="shrink-0 text-xs font-bold text-white bg-[#F7AB02] rounded px-2 py-0.5">ãç¥ãã</span> 493 <a href="/main/help-center/info20251215_1.html" class="text-sm text-slate-700 hover:text-[#F7AB02] transition-colors truncate"> 494 <time class="text-gray-400 mr-2">2025.12.15</time>ä¾¡æ ¼æ¹å®ã«ã¤ãã¦ã®ãç¥ãã 495 </a> 496 </div> 497 </div> 498</section> 499 500<!-- ===== Gallery ===== --> 501<section class="py-20 bg-slate-50 max-md:py-14 overflow-hidden" id="gallery"> 502 <div class="max-w-[1200px] mx-auto px-8 max-md:px-5"> 503 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">ãã¶ã¤ã³ã®ã£ã©ãªã¼</h2> 504 <p class="text-center text-base text-gray-400 mb-12">ãã¹ã¦ã®ãã¶ã¤ã³ãç¡æã§ã使ãããã ãã¾ãã</p> 505 </div> 506 <div class="carousel-track" id="galleryGrid"></div> 507</section> 508 509<!-- ===== ãå©ç¨äºä¾ ===== --> 510<section class="py-20 px-8 max-md:py-14 max-md:px-5" id="cases"> 511 <div class="max-w-[1200px] mx-auto"> 512 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">ãå©ç¨äºä¾</h2> 513 <p class="text-center text-base text-gray-400 mb-12">å®éã«PAGEKitã§å ¬éããã¦ãããã¼ã ãã¼ã¸ããç´¹ä»ãã¾ãã</p>
514 <div class="grid grid-cols-2 md:grid-cols-4 gap-5 max-md:gap-4"> 515 <a href="https://cui-lardoise.p-kit.com/" target="_blank" rel="noopener" class="case-card block"> 516 <img src="/images/top_image-b/img/site_27.png" alt="Cui LARDOISE æ§"> 517 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">Cui LARDOISE æ§</p> 518 </a> 519 <a href="https://fujinoyaryokan.p-kit.com/" target="_blank" rel="noopener" class="case-card block"> 520 <img src="/images/top_image-b/img/site_28.png" alt="å¨å£«å»¼å®¶æ 館 æ§"> 521 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">å¨å£«å»¼å®¶æ 館 æ§</p> 522 </a> 523 <a href="https://hirosetaisya.p-kit.com/" target="_blank" rel="noopener" class="case-card block"> 524 <img src="/images/top_image-b/img/site_29.png" alt="廣ç¬å¤§ç¤¾ æ§"> 525 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">廣ç¬å¤§ç¤¾ æ§</p> 526 </a> 527 <a href="https://kiwaka-flower.com/" target="_blank" rel="noopener" class="case-card block"> 528 <img src="/images/top_image-b/img/site_31.png" alt="ã¢ããªã¨ 樹åè± æ§"> 529 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">ã¢ããªã¨ 樹åè± æ§</p> 530 </a> 531 <a href="https://nbc-corporation.com/" target="_blank" rel="noopener" class="case-card block"> 532 <img src="/images/top_image-b/img/site_32.png" alt="æ ªå¼ä¼ç¤¾ã¨ããã¼ã·ã¼ æ§"> 533 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">æ ªå¼ä¼ç¤¾ã¨ããã¼ã·ã¼ æ§</p> 534 </a> 535 <a href="https://okayama-gaisopro.p-kit.com/" target="_blank" rel="noopener" class="case-card block"> 536 <img src="/images/top_image-b/img/site_33.png" alt="岡山å¤è£ ãã æ§"> 537 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">岡山å¤è£ ãã æ§</p> 538 </a> 539 <a href="https://shunpoen.com/" target="_blank" rel="noopener" class="case-card block"> 540 <img src="/images/top_image-b/img/site_34.png" alt="ä¿å³°å æ§"> 541 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">ä¿å³°å æ§</p> 542 </a> 543 <a href="https://sinkoiwakusikou.p-kit.com/" target="_blank" rel="noopener" class="case-card block"> 544 <img src="/images/top_image-b/img/site_35.png" alt="çç«ä¸²ç¼é¸ æ°å°å²©ä¸²å¹¸ æ§"> 545 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">çç«ä¸²ç¼é¸ æ°å°å²©ä¸²å¹¸ æ§</p> 546 </a> 547 <a href="https://tekarakoubou.p-kit.com/" target="_blank" rel="noopener" class="case-card block"> 548 <img src="/images/top_image-b/img/site_36.png" alt="ã¦ããå·¥æ¿ æ§"> 549 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">ã¦ããå·¥æ¿ æ§</p> 550 </a> 551 <a href="https://www.uchida-niwakatsu.com/" target="_blank" rel="noopener" class="case-card block"> 552 <img src="/images/top_image-b/img/site_39.png" alt="(æ)å ç°é åãåºå æ§"> 553 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">(æ)å ç°é åãåºå æ§</p> 554 </a> 555 <a href="https://belleza-k.com/" target="_blank" rel="noopener" class="case-card block"> 556 <img src="/images/top_image-b/img/site_14.png" alt="Total Beauty Salon Belleza æ§"> 557 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">Total Beauty Salon Belleza æ§</p> 558 </a> 559 <a href="https://www.norioka.com/" target="_blank" rel="noopener" class="case-card block"> 560 <img src="/images/top_image-b/img/site_24.png" alt="å岡餿²¹é¸é å æ§"> 561 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">å岡餿²¹é¸é å æ§</p> 562 </a> 563 <a href="https://shimatomi.com/" target="_blank" rel="noopener" class="case-card block"> 564 <img src="/images/top_image-b/img/site_26.png" alt="å¶å¯è£½è æ§"> 565 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">å¶å¯è£½è æ§</p> 566 </a> 567 <a href="https://masaseikotsu.com/" target="_blank" rel="noopener" class="case-card block"> 568 <img src="/images/top_image-b/img/site_16.png" alt="ããµæ´éª¨é¢ æ§"> 569 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">ããµæ´éª¨é¢ æ§</p> 570 </a> 571 <a href="https://aikidomasudadojo.com/" target="_blank" rel="noopener" class="case-card block"> 572 <img src="/images/top_image-b/img/site_25.png" alt="åæ°éå¢ç°éå ´ æ§"> 573 <p class="px-3 py-3 text-sm font-bold text-slate-800 text-center">åæ°éå¢ç°éå ´ æ§</p> 574 </a> 575 </div> 576 </div> 577</section> 578 579<!-- ===== ããããæ©ã¿ â 解決 ===== --> 580<section class="py-20 px-8 max-w-[1200px] mx-auto max-md:py-14 max-md:px-5" id="problems"> 581 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">ãããªãæ©ã¿ããã¾ãããï¼</h2> 582 <p class="text-center text-base text-gray-400 mb-14">
582PAGEKitãªããã¹ã¦è§£æ±ºã§ãã¾ãã</p> 583 <div class="space-y-8"> 584 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 585 <div class="w-1/2 max-md:w-full aspect-[3/2] rounded-2xl overflow-hidden"><img src="/images/top/problem_1_v2.png" alt="ã³ã¹ã" class="w-full h-full object-cover"></div> 586 <div class="w-1/2 max-md:w-full"> 587 <p class="text-gray-400 text-lg mb-2">ãã¼ã ãã¼ã¸å¶ä½ã¯è²»ç¨ãé«é¡â¦</p> 588 <p class="text-slate-800 font-bold text-2xl mb-2">åæè²»ç¨0åãæé¡1,614åã</p> 589 <p class="text-sm text-gray-500 mb-2">é«é¡ãªå¶ä½è²»ã¯ä¸è¦ãç¬èªãã¡ã¤ã³ãç¡æã§æ¥çæå®ãä½ã³ã¹ãã§ããå質ã®ãµã¤ããæã¦ã¾ãã</p> 590 <a href="/main/price/index.php" class="text-sm font-bold text-[#F7AB02] hover:underline">詳ããã¯ãã¡ã →</a> 591 </div> 592 </div> 593 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5 md:flex-row-reverse"> 594 <div class="w-1/2 max-md:w-full aspect-[3/2] rounded-2xl overflow-hidden"><img src="/images/top/problem_2_v2.png" alt="ããããæä½" class="w-full h-full object-cover"></div> 595 <div class="w-1/2 max-md:w-full"> 596 <p class="text-gray-400 text-lg mb-2">å°éç¥èããªãã¦ä¸å®â¦</p> 597 <p class="text-slate-800 font-bold text-2xl mb-2">æåãå ¥åããã ãã§ç·¨éOK</p> 598 <p class="text-sm text-gray-500">HTMLãCSSã®ç¥èã¯ä¸åä¸è¦ããã¼ã ãã¼ã¸ãã¼ããè±å¯ã§ã誰ã§ãããã«ä½¿ãããªãã¾ãã</p> 599 </div> 600 </div> 601 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 602 <div class="w-1/2 max-md:w-full aspect-[3/2] rounded-2xl overflow-hidden"><img src="/images/top/problem_3_v2.png" alt="ãããã¶ã¤ã³" class="w-full h-full object-cover"></div> 603 <div class="w-1/2 max-md:w-full"> 604 <p class="text-gray-400 text-lg mb-2">ç´ äººã£ã½ããã¶ã¤ã³ã«ãªãããâ¦</p> 605 <p class="text-slate-800 font-bold text-2xl mb-2">ããå質ã®ãã³ãã¬ã¼ãã§å®å¿</p> 606 <p class="text-sm text-gray-500">æ¥ç¨®å¥ã«æé©åããããã¶ã¤ã³ã¨ã好ã¿ã®ã«ã©ã¼ãé¸ã¶ã ãã§å®æãã¾ãã</p> 607 </div> 608 </div> 609 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5 md:flex-row-reverse"> 610 <div class="w-1/2 max-md:w-full aspect-[3/2] rounded-2xl overflow-hidden"><img src="/images/top/problem_4_v2.png" alt="èªåã§æ´æ°" class="w-full h-full object-cover"></div> 611 <div class="w-1/2 max-md:w-full"> 612 <p class="text-gray-400 text-lg mb-2">æ´æ°ã®ãã³ã«è²»ç¨ããããâ¦</p> 613 <p class="text-slate-800 font-bold text-2xl mb-2">èªåã§ä½åº¦ã§ãç¡ææ´æ°</p> 614 <p class="text-sm text-gray-500">æ¥è ã«ä¾é ¼ããå¿ è¦ãªãããã¤ã§ãèªåã®ã¿ã¤ãã³ã°ã§æ´æ°ã§ãã¾ãã</p> 615 </div> 616 </div> 617 </div> 618</section> 619 620<!-- ===== è§£æ±ºææ³ï¼WHY PAGEKIT WORKSï¼ ===== --> 621<section class="py-20 px-8 bg-slate-800 text-white max-md:py-14 max-md:px-5" id="why-pagekit"> 622 <div class="max-w-[1100px] mx-auto"> 623 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-8"> 624 <div class="w-1/2 max-md:w-full max-md:text-center text-left"> 625 <p class="text-xs font-bold tracking-wider text-[#F7AB02] mb-3">WHY PAGEKIT WORKS</p> 626 <h2 class="why-main-title font-black mb-6">ãã¼ã ãã¼ã¸ã¯ãä½ã£ã¦ãããæ¬çªã§ãã</h2> 627 <p class="text-sm md:text-base text-slate-200 leading-relaxed mb-4"> 628 ãã¼ã ãã¼ã¸ã¯ãå ¬éããç¬éãã´ã¼ã«ã§ã¯ããã¾ãããã客æ§ã«è¦ã¤ãã¦ããããä¿¡é ¼ãå¾ã¦ãåãåãããæ¥åºã«ã¤ãªããã«ã¯ã<strong class="text-white font-bold">
628ä½ã£ããã¨ãæ å ±ãæ´æ°ãç¶ãããã¨</strong>ãæ¬ ããã¾ããã 629 </p> 630 <p class="text-sm md:text-base text-slate-200 leading-relaxed mb-4"> 631 PAGEKitã¯22å¹´ã®éå¶ã®ãªãã§ãä¸å°ä¼æ¥ã»èªå¶æ¥ã®æ¹ãæ¬å½ã«å°ãå ´é¢ââãä½ããæãã¤ãããããå°éç¨èªãããããªãããå ¬éå¾ã«æ¾ç½®ãã¦ãã¾ããââãä¸ã¤ã²ã¨ã¤æ½°ãã¦ãã¾ãããã ããã<strong class="text-white font-bold">ã¯ããã¦ã§ãè¿·ããå ¬éã§ããå ¬éå¾ãèªåã®ãã¼ã¹ã§è²ã¦ããã</strong>ãµã¼ãã¹ã«ãªã£ã¦ãã¾ãã 632 </p> 633 <p class="text-sm md:text-base text-slate-200 leading-relaxed"> 634 åæè²»ç¨0åã»30æ¥éç¡æä½é¨ã§ããã«ã試ãããã ãã¾ããã¾ãã¯ãµã³ãã«ã§ä»ä¸ããã確èªããç´å¾ãã¦ããæ¬å¥ç´ã¸é²ãã§ãã ããã 635 </p> 636 </div> 637 <div class="w-1/2 max-md:w-full"> 638 <img src="/images/top/reason_1_v2.png" alt="å®å¿ãµãã¼ãã§ç¶ãããã" class="why-pillar-img shadow-lg"> 639 </div> 640 </div> 641 642 <div class="why-cta-box rounded-2xl bg-white/10 border border-white/20 px-6 py-10 md:px-12 text-center"> 643 <p class="text-lg font-bold mb-2">ã¾ãã¯ç¡æä½é¨ã§ãç¶ãããããã©ããã確ããã¦ãã ããã</p> 644 <p class="text-sm text-slate-300 mb-6 leading-relaxed">30æ¥éãã¹ã¦ã®æ©è½ãã試ãããã ãã¾ããç´å¾ããã ããæ¹ã ããä¼å¡ãã¼ã¸ããå¥ç´ãå»¶é·ãã¦ãã ããã</p> 645 <a href="/main/signup/index.php?bt=top_why2" class="inline-block py-4 px-12 bg-[#F7AB02] text-white rounded-lg text-lg font-bold hover:bg-[#e09a02] hover:-translate-y-0.5 transition">ä»ããç¡æã§å§ãã</a> 646 </div> 647 </div> 648</section> 649 650<!-- ===== ãå©ç¨ã®æµã ===== --> 651<section class="py-20 px-8 bg-white max-md:py-14 max-md:px-5" id="flow"> 652 <div class="max-w-[1100px] mx-auto"> 653 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">ãå©ç¨ã®æµã</h2> 654 <p class="text-center text-base text-gray-400 mb-14">ãç³ãè¾¼ã¿ããå ¬éã¾ã§ãããããã«ãã¹ã ã¼ãºã«é²ãããã¾ãã</p> 655 <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 656 <div class="rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm"> 657 <div class="flow-step-head">1ãç»é²</div> 658 <div class="p-5"> 659 <img src="/images/top_image-d/images/pagekit/flow_0.png" alt="ç»é²" class="w-full rounded-lg mb-4"> 660 <p class="text-sm text-gray-600 leading-relaxed">ã¿ã¤ãã«ã¨æ¥ç¨®ã»ãã¶ã¤ã³ãé¸ãã§ãç³ãè¾¼ã¿ããã ãã ãã§ãæ¥ç¨®ã«åã£ãä¾æå ¥ãã®ãã¼ã ãã¼ã¸ããã§ã«ç¨æããã¦ãã¾ãããç³ãè¾¼ã¿ããã ããæ®µéã§ãã§ã«90%宿ãã¼ããããã¼ã¸ãä½ãä¸ããå¿ è¦ã¯ããã¾ããã</p> 661 </div> 662 </div> 663 <div class="rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm"> 664 <div class="flow-step-head">2ãç·¨é</div> 665 <div class="p-5"> 666 <img src="/images/top_image-d/images/pagekit/flow_2.png" alt="ç·¨é" class="w-full rounded-lg mb-4"> 667 <p class="text-sm text-gray-600 leading-relaxed">ãã¨ã¯ç®¡çç»é¢ãããç»åãæç« ãèªåã®ãåºã»ä¼ç¤¾ç¨ã«æ´ããã ãã§ããè¦ãªããç·¨éã§ããã®ã§ããã½ã³ã³ãè¦æãªæ¹ã§ãç¡çãªãé²ãããã¾ãã</p> 668 </div> 669 </div> 670 <div class="rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm"> 671 <div class="flow-step-head">3ãå ¬é</div> 672 <div class="p-5"> 673 <img src="/images/top_image-d/images/pagekit/flow_3.png" alt="å ¬é" class="w-full rounded-lg mb-4"> 674 <p class="text-sm text-gray-600 leading-relaxed">ç·¨éãçµãã£ããå ¬éãã¿ã³ãã¯ãªãã¯ããã ãã§ããã¼ã ãã¼ã¸ãå¤é¨ããã¢ã¯ã»ã¹å¯è½ã«ãªãã¾ããURLãå ±æããã°ãã客æ§ãåå¼å ãããããã«ã覧ããã ãã¾ãã</p> 675 </div> 676 </div> 677 </div> 678 </div> 679</section> 680 681<!-- ===== ç·¨éãã¢åç» ===== --> 682<section class="py-20 px-8 bg-slate-50 max-md:py-14 max-md:px-5">
683 <div class="max-w-[900px] mx-auto text-center"> 684 <h2 class="text-[32px] font-black mb-3 text-slate-900">æä½ã¯ããããããã¼ããé¸ãã§ãã¯ããã ãã</h2> 685 <p class="text-base text-gray-400 mb-10">ãã¶ã¤ã³ãã¼ãã®æ¿å ¥ããç»åã®å·®ãæ¿ãããã¯ãªãã¯ã ãã§å®äºãã¾ãã</p> 686 <div class="rounded-2xl overflow-hidden shadow-[0_8px_40px_rgba(0,0,0,0.10)]"> 687 <video class="w-full" autoplay muted loop playsinline preload="metadata"> 688 <source src="https://homepagesakusei.heteml.net/pkit-image/block_editor.mp4" type="video/mp4"> 689 </video> 690 </div> 691 <div class="flex items-center justify-center gap-8 mt-8 max-md:flex-col max-md:gap-4"> 692 <div class="flex items-center gap-2"> 693 <span class="w-8 h-8 bg-[#F7AB02]/10 rounded-full flex items-center justify-center text-[#F7AB02] font-bold text-sm">1</span> 694 <span class="text-sm font-bold text-slate-700">ãã¼ããé¸ãã§æ¿å ¥</span> 695 </div> 696 <div class="flex items-center gap-2"> 697 <span class="w-8 h-8 bg-[#F7AB02]/10 rounded-full flex items-center justify-center text-[#F7AB02] font-bold text-sm">2</span> 698 <span class="text-sm font-bold text-slate-700">ç»åãã¯ãªãã¯ã§å¤æ´</span> 699 </div> 700 <div class="flex items-center gap-2"> 701 <span class="w-8 h-8 bg-[#F7AB02]/10 rounded-full flex items-center justify-center text-[#F7AB02] font-bold text-sm">3</span> 702 <span class="text-sm font-bold text-slate-700">ããã«å ¬é</span> 703 </div> 704 </div> 705 </div> 706</section> 707 708<!-- ===== AIã¢ã·ã¹ã ãã¢åç» ===== --> 709<section class="py-20 px-8 bg-white max-md:py-14 max-md:px-5"> 710 <div class="max-w-[900px] mx-auto text-center"> 711 <h2 class="text-[32px] font-black mb-3 text-slate-900">ã¬ã¤ã¢ã¦ãã®ãæ©ã¿ããAIãµãã¼ãã§ãããã解決</h2> 712 <p class="text-base text-gray-400 mb-10">é ç½®ãè¦ãç®ã®èª¿æ´ã«è¿·ã£ãã¨ãããAIããµãã¼ãããããããã¨ãä¼ããã ãã§ãããã«ãã¼ã¸ã«åæ ããã¾ãã</p> 713 <div class="rounded-2xl overflow-hidden shadow-[0_8px_40px_rgba(0,0,0,0.10)]"> 714 <video class="w-full" autoplay muted loop playsinline preload="metadata"> 715 <source src="https://homepagesakusei.heteml.net/pkit-image/AI_assist.mp4" type="video/mp4"> 716 </video> 717 </div> 718 </div> 719</section> 720 721<!-- ===== æèã³ã¹ã訴æ±ï¼æ¬¡åãªãªã¼ã¹ã§æå¹åï¼ ===== 722<section class="py-20 px-8 max-md:py-14 max-md:px-5"> 723 <div class="max-w-[900px] mx-auto"> 724 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">ãä½ãæ¸ãã°ãããã<br class="md:hidden">ããæ©ã¾ãªãã</h2> 725 <p class="text-center text-base text-gray-400 mb-12">æ¥ç¨®ã«åãããæç« ã¨ãã¼ã¸æ§æãã¯ããããã»ããã<br class="max-md:hidden">èªç¤¾ã®æ å ±ã«å·®ãæ¿ããã ãã§å®æãã¾ãã</p> 726 727 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12"> 728 <div class="rounded-2xl border border-gray-200 bg-gray-50 p-6"> 729 <div class="text-sm font-bold text-gray-400 mb-4">ä»ç¤¾ã®ãã¼ã ãã¼ã¸ä½æãã¼ã«</div> 730 <ul class="space-y-3 text-sm text-gray-500"> 731 <li class="flex items-start gap-2"><span class="text-gray-300 font-bold shrink-0">✖</span>空ç½ã®ãã¼ã¸ããã¹ã¿ã¼ã</li> 732 <li class="flex items-start gap-2"><span class="text-gray-300 font-bold shrink-0">✖</span>ä½ãæ¸ãã°ãããåãããªã</li> 733 <li class="flex items-start gap-2"><span class="text-gray-300 font-bold shrink-0">✖</span>ãã¼ã¸æ§æãèªåã§èããå¿ è¦ããã</li> 734 <li class="flex items-start gap-2"><span class="text-gray-300 font-bold shrink-0">✖</span>çµå±å®æããªãã¾ã¾æ«æâ¦</li> 735 </ul> 736 </div> 737 <div class="rounded-2xl border-2 border-[#F7AB02] bg-[#F7AB02]/5 p-6"> 738 <div class="text-sm font-bold text-[#F7AB02] mb-4">PAGEKitãªã</div> 739 <ul class="space-y-3 text-sm text-slate-700"> 740 <li class="flex items-start gap-2"><span class="text-[#F7AB02] font-bold shrink-0">✓</span>æ¥ç¨®ãé¸ã¶ã ãã§ä¾æå ¥ãã®ãã¼ã¸ã宿</li> 741 <li class="flex items-start gap-2"><span class="text-[#F7AB02] font-bold shrink-0">✓</span>æ¨æ¶æã»ãµã¼ãã¹æ¡å ã»ã¢ã¯ã»ã¹æ å ±ãã»ãã</li> 742 <li class="flex items-start gap-2"><span class="text-[#F7AB02] font-bold shrink-0">✓</span>èªç¤¾åã»ä½æã»åçãå·®ãæ¿ããã ã</li> 743 <li class="flex items-start gap-2"><span class="text-[#F7AB02] font-bold shrink-0">✓</span>ãæ¸ããã®ã§ã¯ãªããç´ããã ã</li> 744 </ul> 745 </div> 746 </div> 747 748 <div class="flex items-center justify-center gap-8 max-md:flex-col max-md:gap-4"> 749 <div class="flex items-center gap-2">
750 <span class="w-8 h-8 bg-[#F7AB02]/10 rounded-full flex items-center justify-center text-[#F7AB02] font-bold text-sm">1</span> 751 <span class="text-sm font-bold text-slate-700">æ¥ç¨®ãé¸ã¶</span> 752 </div> 753 <div class="flex items-center gap-2"> 754 <span class="w-8 h-8 bg-[#F7AB02]/10 rounded-full flex items-center justify-center text-[#F7AB02] font-bold text-sm">2</span> 755 <span class="text-sm font-bold text-slate-700">èªç¤¾ã®æ å ±ã«å·®ãæ¿ã</span> 756 </div> 757 <div class="flex items-center gap-2"> 758 <span class="w-8 h-8 bg-[#F7AB02]/10 rounded-full flex items-center justify-center text-[#F7AB02] font-bold text-sm">3</span> 759 <span class="text-sm font-bold text-slate-700">ãã®ã¾ã¾å ¬é</span> 760 </div> 761 </div> 762 </div> 763</section> 764--> 765 766<!-- ===== ä»ç¤¾æ«æè¨´æ±ï¼æ¬¡åãªãªã¼ã¹ã§æå¹åï¼ ===== 767<section class="py-20 px-8 bg-slate-50 max-md:py-14 max-md:px-5"> 768 <div class="max-w-[900px] mx-auto"> 769 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">夿©è½ãªãã¼ã«ã§<br class="md:hidden">æ«æããæ¹ã¸ã</h2> 770 <p class="text-center text-base text-gray-400 mb-12">PAGEKitã¯ãã§ãããã¨ããããã¦çµã£ã¦ãã¾ãã<br class="max-md:hidden">ã ããè¿·ãã宿ãã¾ãã</p> 771 772 <div class="space-y-4"> 773 <div class="rounded-2xl bg-white border border-gray-200 p-6 flex items-center gap-6 max-md:flex-col max-md:gap-3"> 774 <div class="flex items-center gap-2 w-1/2 max-md:w-full"> 775 <span class="text-gray-300 font-bold shrink-0">✖</span> 776 <span class="text-sm text-gray-400 line-through">è¨å®é ç®ãå¤ããã¦å®æããªãã£ã</span> 777 </div> 778 <div class="flex items-center gap-2 w-1/2 max-md:w-full"> 779 <span class="text-[#F7AB02] font-bold shrink-0">✓</span> 780 <span class="text-sm font-bold text-slate-700">å¿ è¦ãªæ©è½ã ããè¿·ãè¨å®ã¯ããã¾ãã</span> 781 </div> 782 </div> 783 <div class="rounded-2xl bg-white border border-gray-200 p-6 flex items-center gap-6 max-md:flex-col max-md:gap-3"> 784 <div class="flex items-center gap-2 w-1/2 max-md:w-full"> 785 <span class="text-gray-300 font-bold shrink-0">✖</span> 786 <span class="text-sm text-gray-400 line-through">è±èªã®ãã³ãã¬ã¼ãã管çç»é¢ãåããã«ããã£ã</span> 787 </div> 788 <div class="flex items-center gap-2 w-1/2 max-md:w-full"> 789 <span class="text-[#F7AB02] font-bold shrink-0">✓</span> 790 <span class="text-sm font-bold text-slate-700">å®å ¨æ¥æ¬èªãå½å ãã¼ã ããµãã¼ã</span> 791 </div> 792 </div> 793 <div class="rounded-2xl bg-white border border-gray-200 p-6 flex items-center gap-6 max-md:flex-col max-md:gap-3"> 794 <div class="flex items-center gap-2 w-1/2 max-md:w-full"> 795 <span class="text-gray-300 font-bold shrink-0">✖</span> 796 <span class="text-sm text-gray-400 line-through">AIãä½ã£ãæç« ãæ£ããã夿ã§ããªãã£ã</span> 797 </div> 798 <div class="flex items-center gap-2 w-1/2 max-md:w-full"> 799 <span class="text-[#F7AB02] font-bold shrink-0">✓</span> 800 <span class="text-sm font-bold text-slate-700">èªåã®è¨èã§ãèªåã§æ¸ãããå®å¿</span> 801 </div> 802 </div> 803 </div> 804 </div> 805</section> 806--> 807 808<!-- ===== Features ===== --> 809<section class="py-20 px-8 max-w-[1200px] mx-auto max-md:py-14 max-md:px-5" id="features"> 810 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">PAGEKitãé¸ã°ããçç±</h2> 811 <p class="text-center text-base text-gray-400 mb-8">ã¯ãããã»ç¶ããã»è²ã¦ãã3ã¤ã®éç¨ãã§ã¼ãºããã²ã¨ã¤ã®ãµã¼ãã¹ã§æ¯ãã¾ãã</p> 812 <div class="max-w-[820px] mx-auto mb-14 rounded-2xl bg-slate-50 border border-gray-200 px-6 py-5"> 813 <p class="text-xs font-bold tracking-wider text-[#F7AB02] mb-2">HOW PAGEKIT SUPPORTS YOU</p> 814 <p class="text-sm text-slate-700 leading-relaxed">使ç´å¾ã ã便å©ãªãã¼ã«ã§ã¯ãªããå ¬éå¾ã®æ´æ°ã»æ¹åã¾ã§ç¶ãããããã¨ãéè¦ãã¦ãã¾ããã ãããæä½ã®ç°¡åãã¨éç¨æ©è½ã®ä¸¡æ¹ãåæã«æ´ãã¦ãã¾ãã</p> 815 </div> 816 <div class="grid grid-cols-1 md:grid-cols-3 gap-x-10 gap-y-20"> 817 <div class="text-center"> 818 <div class="w-full aspect-[4/3] mx-auto mb-5 rounded-2xl overflow-hidden"><img src="/images/top/reason_1_v2.png" alt="å®å¿ãµãã¼ã" class="w-full h-full object-cover"></div> 819 <h3 class="text-lg font-bold mb-2">å®å¿ãµãã¼ã</h3> 820 <p class="text-sm text-gray-500 leading-loose">ãã£ããã»ã¡ã¼ã«ã§ãã¤ã§ãç¸è«å¯è½ã<br>å ¬éå¾ã®éç¨ã§è¿·ã£ãæãç¶ç¶ãã¦æ¯ãã¾ãã</p> 821 </div> 822 <div class="text-center"> 823 <div class="w-full aspect-[4/3] mx-auto mb-5 rounded-2xl overflow-hidden"><img src="/images/top/reason_2_v2.png" alt="ããå質ãã¶ã¤ã³" class="w-full h-full object-cover"></div> 824 <h3 class="text-lg font-bold mb-2">ããå質ãã¶ã¤ã³</h3> 825 <p class="text-sm text-gray-500 leading-loose">æ¥ç¨®ã«åããããã³ãã¬ã¼ãã¨24è²ãã¬ããã§ã<br>使忥ããè¦æ ãããå ¬éã§ãã¾ãã</p> 826 </div> 827 <div class="text-center"> 828 <div class="w-full aspect-[4/3] mx-auto mb-5 rounded-2xl overflow-hidden"><img src="/images/top/reason_3_v2.png" alt="ã¹ãã対å¿" class="w-full h-full object-cover"></div> 829 <h3 class="text-lg font-bold mb-2">ã¹ãã対å¿</h3> 830 <p class="text-sm text-gray-500 leading-loose">
830PCã»ã¿ãã¬ããã»ã¹ãã¼ããã©ã³ãã¹ã¦ã«å¯¾å¿ã<br>æ´æ°ãã¦ã表示å質ãä¿ã¡ãããè¨è¨ã§ãã</p> 831 </div> 832 <div class="text-center"> 833 <div class="w-full aspect-[4/3] mx-auto mb-5 rounded-2xl overflow-hidden"><img src="/images/top/reason_4_v2.png" alt="ã·ã§ããã³ã°ã«ã¼ã" class="w-full h-full object-cover"></div> 834 <h3 class="text-lg font-bold mb-2">ã·ã§ããã³ã°ã«ã¼ã</h3> 835 <p class="text-sm text-gray-500 leading-loose">ååã®è²©å£²ã«ã対å¿ã<br>ãµã¤ãå ¬éå¾ã®è²©è·¯æ¡å¼µã«ããã®ã¾ã¾ä½¿ãã¾ãã</p> 836 </div> 837 <div class="text-center"> 838 <div class="w-full aspect-[4/3] mx-auto mb-5 rounded-2xl overflow-hidden"><img src="/images/top/reason_5_v2.png" alt="AIæç« 使" class="w-full h-full object-cover"></div> 839 <h3 class="text-lg font-bold mb-2">AIæç« 使</h3> 840 <p class="text-sm text-gray-500 leading-loose">AIãæ¥ç¨®ã«åã£ãæç« ãèªåçæã<br>æ´æ°æã®æç« 使ãçæéã§é²ãããã¾ãã</p> 841 </div> 842 <div class="text-center"> 843 <div class="w-full aspect-[4/3] mx-auto mb-5 rounded-2xl overflow-hidden"><img src="/images/top/reason_6_v2.png" alt="SEOã»ç¬èªãã¡ã¤ã³" class="w-full h-full object-cover"></div> 844 <h3 class="text-lg font-bold mb-2">SEOã»ç¬èªãã¡ã¤ã³ãç¡æ</h3> 845 <p class="text-sm text-gray-500 leading-loose">æ¤ç´¢ã¨ã³ã¸ã³å¯¾çãæ¨æºæè¼ã<br>ç¬èªãã¡ã¤ã³ç¡æã§ãé·æéç¨ã®åºç¤ãä½ãã¾ãã</p> 846 </div> 847 </div> 848</section> 849 850<!-- ===== éç¨ä¾¡å¤ ===== --> 851<section class="py-16 px-8 bg-slate-50 max-md:py-12 max-md:px-5"> 852 <div class="max-w-[720px] mx-auto"> 853 <h2 class="value-growth-title text-center font-black mb-3 text-slate-900">æ´æ°ãç¶ããã¼ã ãã¼ã¸ã¯ãææã«ã¤ãªããã</h2> 854 <p class="text-center text-base text-gray-400 mb-10">ä½ã£ã¦æ¾ç½®ããããã¼ã ãã¼ã¸ã§ã¯ãªããæ å ±ãè²ã¤ãã¼ã ãã¼ã¸ãç®æãã¾ãã</p> 855 <div class="value-growth-list"> 856 <div class="bg-white border border-gray-200 rounded-xl p-6"> 857 <h3 class="flex items-center gap-2 text-lg font-bold text-slate-800 mb-3"> 858 <span class="shrink-0 w-7 h-7 rounded-full bg-[#F7AB02]/15 flex items-center justify-center text-[#F7AB02] text-sm font-bold" aria-hidden="true">✓</span> 859 ä¿¡é ¼ãä¿ã¦ã 860 </h3> 861 <p class="text-sm text-gray-600 leading-relaxed pl-9">å¶æ¥æéããµã¼ãã¹æ å ±ãèªåã§æ´æ°ã§ãããããå¤ãæ å ±ã«ããæ©ä¼æå¤±ãé²ãã¾ããã客æ§ããµã¤ããè¦ãã¨ãã«ãä»ãå¶æ¥ãã¦ããããææ°ã®ãµã¼ãã¹ããããã¨ä¼ãããä¿¡é ¼ã«ã¤ãªããã¾ãã</p> 862 </div> 863 <div class="bg-white border border-gray-200 rounded-xl p-6"> 864 <h3 class="flex items-center gap-2 text-lg font-bold text-slate-800 mb-3"> 865 <span class="shrink-0 w-7 h-7 rounded-full bg-[#F7AB02]/15 flex items-center justify-center text-[#F7AB02] text-sm font-bold" aria-hidden="true">✓</span> 866 SEOã«å¹ãããã 867 </h3> 868 <p class="text-sm text-gray-600 leading-relaxed pl-9">æ´æ°é »åº¦ã¨æ å ±éãç©ã¿ä¸ããéç¨ããããããæ¤ç´¢ã¨ã³ã¸ã³ããã®è©ä¾¡ã«ãã¤ãªããã¾ããããã°æ©è½ã§æ¥ã ã®ãç¥ãããå°éçãªæ å ±ãçºä¿¡ããã°ããã¼ã¯ã¼ãã«é¢é£ãããã¼ã¸ãå¢ããè¦ã¤ãã¦ãããããããã¼ã ãã¼ã¸ã«è²ã¦ããã¾ãã</p> 869 </div> 870 <div class="bg-white border border-gray-200 rounded-xl p-6"> 871 <h3 class="flex items-center gap-2 text-lg font-bold text-slate-800 mb-3"> 872 <span class="shrink-0 w-7 h-7 rounded-full bg-[#F7AB02]/15 flex items-center justify-center text-[#F7AB02] text-sm font-bold" aria-hidden="true">✓</span> 873 è²»ç¨ãæãç¶ãããã 874 </h3> 875 <p class="text-sm text-gray-600 leading-relaxed pl-9">æ´æ°ã®ãã³ã«å¤æ³¨è²»ããããå¿ è¦ããªããèªç¤¾ã§è²ã¦ãã»ã©è²»ç¨å¯¾å¹æãé«ã¾ãã¾ããå°ããªä¿®æ£ããã®å ´ã§åæ ã§ããã®ã§ãéç¨ã³ã¹ããæããªããæ å ±ãæ°ããä¿ã¦ã¾ãã</p> 876 </div> 877 </div> 878 </div> 879</section> 880 881<!-- ===== æ©è½ç´¹ä» ===== --> 882<section class="py-20 px-8 max-w-[1200px] mx-auto max-md:py-14 max-md:px-5" id="feature-list"> 883 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">æ©è½ç´¹ä»</h2> 884 <p class="text-center text-base text-gray-400 mb-14">PAGEKitã®ä¸»è¦æ©è½ããç´¹ä»ãã¾ãã</p> 885 <div class="space-y-16"> 886 887 <!-- 1. è¦ãªããç·¨é --> 888 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 889 <div class="w-1/2 max-md:w-full"> 890 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">è¦ãªããç·¨é</h3> 891 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">ç·¨éãããå ´æãã¯ãªãã¯ããã ãããã¼ã ãã¼ã¸ã®ä»ä¸ãããç»é¢ã§ç¢ºèªããªãã大ç»é¢ã®ç·¨éã¨ãã£ã¿ã§ãµã¯ãµã¯ç·¨éã§ãã¾ããç·¨éãå®äºãããå ¬éãã¿ã³ã§å³æå ¬éãã¹ãããã¿ãã¬ããããã®æä½ã«ã対å¿ãã¦ãããã¡ãã£ã¨ããæ´æ°ãä¿®æ£ã«ã便å©ã§ãã</p> 892 </div> 893 <div class="w-1/2 max-md:w-full feature-media-wrap">
894 <video autoplay muted loop playsinline preload="metadata"> 895 <source src="https://homepagesakusei.heteml.net/pkit-image/block_editor.mp4" type="video/mp4"> 896 </video> 897 </div> 898 </div> 899 900 <!-- 2. æ¤ç´¢ã¨ã³ã¸ã³ç¡æç»é² --> 901 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5 md:flex-row-reverse"> 902 <div class="w-1/2 max-md:w-full"> 903 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">æ¤ç´¢ã¨ã³ã¸ã³ç¡æç»é²</h3> 904 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">ãã£ããä½ã£ããã¼ã ãã¼ã¸ãæ¤ç´¢çµæã«è¡¨ç¤ºãããªãããããªãã¨ã«ãªããªããããæ¤ç´¢ã¨ã³ã¸ã³Googleã®æ¤ç´¢çµæã«è¡¨ç¤ºãããããå¼ç¤¾ã¹ã¿ãããç¡æã§ä»£è¡ãããã¾ãã</p> 905 <p class="text-right mt-4 px-2 lg:px-6"><a href="/main/contents/searchengine.php" class="text-sm font-bold text-[#F7AB02] hover:underline">詳ããã¯ãã¡ã →</a></p> 906 </div> 907 <div class="w-1/2 max-md:w-full feature-media-wrap"> 908 <img src="/images/top_image-d/images/pagekit/9search.png" alt="æ¤ç´¢ã¨ã³ã¸ã³ç¡æç»é²"> 909 </div> 910 </div> 911 912 <!-- 3. ç¬èªãã¡ã¤ã³ --> 913 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 914 <div class="w-1/2 max-md:w-full"> 915 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">ç¬èªãã¡ã¤ã³</h3> 916 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">PAGEKitã§ã¯ç¬èªãã¡ã¤ã³ã«å¯¾å¿ãç¬èªãã¡ã¤ã³åå¾è¨å®ä»£è¡ãµã¼ãã¹ããå©ç¨ããã ããã°ããã¡ã¤ã³ã決å®ãã¦ããã ãã ãã§ãé£ããè¨å®ããã¹ã¦PAGEKitå´ã§ä»£è¡ãããã¾ãã11ã¶æä»¥ä¸ã®ãå¥ç´ã§åå¾ããè¨å®ã¾ã§ãã¹ã¦ç¡æã§ããâ».jpãã¡ã¤ã³ã¯å²å¼ä¾¡æ ¼ã</p> 917 <p class="text-right mt-4 px-2 lg:px-6"><a href="/main/contents/domain.php" class="text-sm font-bold text-[#F7AB02] hover:underline">詳ããã¯ãã¡ã →</a></p> 918 </div> 919 <div class="w-1/2 max-md:w-full feature-media-wrap"> 920 <img src="/images/top_image-d/images/pagekit/7domain.png" alt="ç¬èªãã¡ã¤ã³"> 921 </div> 922 </div> 923 924 <!-- 4. AIè£å©æ©è½ --> 925 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5 md:flex-row-reverse"> 926 <div class="w-1/2 max-md:w-full"> 927 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">AIè£å©æ©è½</h3> 928 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">ãã¼ã ãã¼ã¸ã®ã³ã³ãã³ããèããã®ã¯æå¤ã¨å¤§å¤ãªä½æ¥ã§ãããå°ãã®å ´åã¯AIããµãã¼ããããã¾ããçæAIã使ç¨ããè£å©æ©è½ã§ããã¼ã ãã¼ã¸ã®ä½æããæä¼ããã¾ãã</p> 929 <p class="text-right mt-4 px-2 lg:px-6"><a href="/main/contents/aieditor.php" class="text-sm font-bold text-[#F7AB02] hover:underline">詳ããã¯ãã¡ã →</a></p> 930 </div> 931 <div class="w-1/2 max-md:w-full feature-media-wrap"> 932 <video autoplay muted loop playsinline preload="metadata"> 933 <source src="https://homepagesakusei.heteml.net/pkit-image/AI_assist.mp4" type="video/mp4"> 934 </video> 935 </div> 936 </div> 937 938 <!-- 5. SEO --> 939 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 940 <div class="w-1/2 max-md:w-full"> 941 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">SEO</h3> 942 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">PAGEKitã§ã¯ããã¼ã ãã¼ã¸ã®ä½æã¯ãã¡ãããSEO対çï¼æ¤ç´¢ã¨ã³ã¸ã³å¯¾çï¼ã«ãé©ããç°å¢ããç¨æãã¦ãã¾ããé©åã«æ¤ç´¢ã¨ã³ã¸ã³å¯¾çãè¡ã£ã¦ãã¢ã¯ã»ã¹ã¢ããã売ä¸ã¢ãããç®æãã¾ãããã</p> 943 </div> 944 <div class="w-1/2 max-md:w-full feature-media-wrap"> 945 <img src="/images/top_image-d/images/pagekit/5seo.png" alt="SEO"> 946 </div> 947 </div> 948 949 <!-- 6. ãã¶ã¤ã³ç·¨é --> 950 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5 md:flex-row-reverse"> 951 <div class="w-1/2 max-md:w-full"> 952 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">ãã¶ã¤ã³ç·¨é</h3> 953 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">è±å¯ãªãã¶ã¤ã³ããã好ã¿ã®ã¿ã¤ãããé¸ã³ããã ãã¾ããä½åº¦ã§ãçãæ¿ããã§ããã®ã§ã¤ã¡ã¼ã¸ãã§ã³ã¸ããæè»½ãç»åã
953®å·®ãæ¿ããé è²ã®å¤æ´ãèªç±èªå¨ãªã®ã§ãèªåã ãã®ãªãªã¸ãã«ãã¶ã¤ã³ãå®ç¾ã§ãã¾ããã¬ã¹ãã³ã·ã対å¿ã®ãããã¹ãããã¿ãã¬ããããã®é²è¦§ã«ã対å¿ã</p> 954 </div> 955 <div class="w-1/2 max-md:w-full feature-media-wrap"> 956 <img src="/images/top_image-d/images/pagekit/design1.png" alt="ãã¶ã¤ã³ç·¨é"> 957 </div> 958 </div> 959 960 <!-- 7. ã·ã§ããã³ã°ã«ã¼ã --> 961 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 962 <div class="w-1/2 max-md:w-full"> 963 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">ã·ã§ããã³ã°ã«ã¼ã</h3> 964 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">è¿½å æéãªããå£²ä¸ææ°æãªããååæ°ã®ä¸éãããã¾ãããã·ã§ããã³ã°ã«ã¼ãæ©è½ã§æè»½ã«ãããã·ã§ãããå§ãããã¾ããVISAãMasterCardãAMERICAN EXPRESSãJCBã«å¯¾å¿ããã¯ã¬ã¸ããã«ã¼ã決æ¸ï¼Paypal決æ¸ï¼ããå©ç¨ããã ãã¾ãã</p> 965 </div> 966 <div class="w-1/2 max-md:w-full feature-media-wrap"> 967 <img src="/images/top_image-d/images/pagekit/1cart.png" alt="ã·ã§ããã³ã°ã«ã¼ã"> 968 </div> 969 </div> 970 971 <!-- 8. ããã° --> 972 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5 md:flex-row-reverse"> 973 <div class="w-1/2 max-md:w-full"> 974 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">ããã°</h3> 975 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">ãã¼ã ãã¼ã¸å ã§ããã°ãéç¨ãã¦ããã ãã¾ãã使ã§ããè¨äºæ°ã«å¶éã¯ããã¾ãããæ¥è¨ã®ãããªå½¢ã§ãããã¸ãã¹ã¨ãã¦å½¹ç«ã¤æ å ±ãçºä¿¡ãããã¼ã¸ã¨ãã¦ããæ´»ç¨ããã ãã¾ãã</p> 976 </div> 977 <div class="w-1/2 max-md:w-full feature-media-wrap"> 978 <img src="/images/top_image-d/images/pagekit/2blog.png" alt="ããã°"> 979 </div> 980 </div> 981 982 <!-- 9. ãã©ã¼ã æ©è½ --> 983 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 984 <div class="w-1/2 max-md:w-full"> 985 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">ãã©ã¼ã æ©è½</h3> 986 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">æ°åã使ãã¡ã¼ã«ã¢ãã¬ã¹ãªã©ã叿ã®ãã¼ããçµã¿åããã¦å ¥åãã©ã¼ã ã使ã§ãã¾ããåãåãããã¢ã³ã±ã¼ããåç¨®è«æ±ãªã©å¹ åºãã使ãããã ãã¾ãã</p> 987 </div> 988 <div class="w-1/2 max-md:w-full feature-media-wrap"> 989 <img src="/images/top_image-d/images/pagekit/3form.png" alt="ãã©ã¼ã æ©è½"> 990 </div> 991 </div> 992 993 <!-- 10. ã¡ã«ãã¬ï¼ãã¥ã¼ã¹ã¬ã¿ã¼ï¼ --> 994 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5 md:flex-row-reverse"> 995 <div class="w-1/2 max-md:w-full"> 996 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">ã¡ã«ãã¬ï¼ãã¥ã¼ã¹ã¬ã¿ã¼ï¼</h3> 997 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">ã¡ã¼ã«ãã客æ§ã«å¯¾ã䏿éä¿¡ãããã¨ãã§ãã¾ããååããã£ã³ãã¼ã³ã®æ¡å ãªã©ãç´åªä½ã®ãã©ã·ãDMã«ä»£ããPRãã¼ã«ã¨ãã¦ã使ããã ããã</p> 998 </div> 999 <div class="w-1/2 max-md:w-full feature-media-wrap"> 1000 <img src="/images/top_image-d/images/pagekit/4news.png" alt="ã¡ã«ãã¬ï¼ãã¥ã¼ã¹ã¬ã¿ã¼ï¼"> 1001 </div> 1002 </div> 1003 1004 <!-- 11. ã¢ã¯ã»ã¹è§£æ --> 1005 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 1006 <div class="w-1/2 max-md:w-full"> 1007 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">ã¢ã¯ã»ã¹è§£æ</h3> 1008 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">ãã¼ã ãã¼ã¸ã®ã¢ã¯ã»ã¹ããã¤ã§ãã確èªããã ãã¾ããã©ã®ãã¼ã¸ãããè¦ããã¦ããããã©ã®æé帯ã«ã¢ã¯ã»ã¹ãéä¸ãã¦ããããªã©ã確èªã§ãã¾ãã</p> 1009 </div> 1010 <div class="w-1/2 max-md:w-full feature-media-wrap"> 1011 <img src="/images/top_image-d/images/pagekit/6access.png" alt="ã¢ã¯ã»ã¹è§£æ"> 1012 </div> 1013 </div> 1014 1015 <!-- 12. Google Fonts --> 1016 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5 md:flex-row-reverse"> 1017 <div class="w-1/2 max-md:w-full"> 1018 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">Google Fonts</h3> 1019 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">Googleãæä¾ããããªã¼ãã©ã³ããè±æ66æ¸ä½ãæ¥æ¬èª22æ¸ä½ããå©ç¨å¯è½ã§ããé²è¦§ç°å¢ã«ä¾åããªãWebãã©ã³ããªã®ã§ããã¼ã ãã¼ã¸ã®å°è±¡ããã£ã¨è¯ããªãã¾ãã</p> 1020 </div> 1021 <div class="w-1/2 max-md:w-full feature-media-wrap"> 1022 <img src="/images/top_image-d/images/pagekit/8gfont.png" alt="Google Fonts"> 1023 </div> 1024 </div> 1025 1026 <!-- 13. SSL --> 1027 <div class="flex items-center gap-10 max-md:flex-col max-md:gap-5"> 1028 <div class="w-1/2 max-md:w-full"> 1029 <h3 class="text-2xl font-black text-center text-slate-900 mb-4">SSL</h3> 1030 <p class="text-sm text-gray-600 leading-loose px-2 lg:px-6">PAGEKitã§ä½æãã¦ããã ããã¼ã ãã¼ã¸ã¯ãSSLéä¿¡ãã«å¯¾å¿
1030ãã¦ãããhttps://ããã¯ãã¾ãã¢ãã¬ã¹ããå©ç¨ããã ãã¾ããæå·åã使ç¨ããããå®å ¨ãªéä¿¡è¦æ ¼ã§ãè¿½å æéã¯ä¸è¦ã§ãã</p> 1031 </div> 1032 <div class="w-1/2 max-md:w-full feature-media-wrap"> 1033 <img src="/images/top_image-d/images/pagekit/10ssl.png" alt="SSL"> 1034 </div> 1035 </div> 1036 1037 </div> 1038 1039 <div class="text-center mt-14"> 1040 <a href="/main/details/index.php" class="inline-block px-10 py-4 bg-slate-800 text-white rounded-lg font-bold text-base hover:bg-slate-700 transition">æ©è½ã®è©³ç´°ãè¦ã</a> 1041 <p class="mt-4 text-sm text-gray-500">ããããç·¨éã»ãã¶ã¤ã³ã»ä¾¿å©æ©è½ã»é«åº¦ãªæ©è½ã»ãµãã¼ããªã©ããã¹ã¦ã®æ©è½ã詳ããã覧ããã ãã¾ãã</p> 1042 </div> 1043</section> 1044 1045<!-- ===== CTAï¼æ©è½ç´¹ä»å¾ï¼ ===== --> 1046<section class="cta-band py-14 px-8 text-center text-white max-md:py-10 max-md:px-5" id="trial"> 1047 <div class="max-w-[720px] mx-auto"> 1048 <h2 class="text-2xl font-black mb-3">ãã¼ã¸ãããã®å ¨æ©è½ã<strong class="text-[#F7AB02]">ç¡æ</strong>ã§ã試ããã ãã</h2> 1049 <p class="text-sm text-slate-300 mb-8">30æ¥éããã¹ã¦ã®æ©è½ãç¡æã§ã試ãããã ãã¾ããããããã®åå¿è ã¦ã¼ã¶ã¼æ§ããèªåã ãã®ãã¼ã ãã¼ã¸ã宿ããã¦ãã¾ãã</p> 1050 <a href="/main/signup/index.php?bt=top_mid1" class="inline-block py-4 px-10 bg-[#F7AB02] text-white rounded-lg text-lg font-bold hover:bg-[#e09a02] hover:-translate-y-0.5 transition">ã¾ãã¯ãµã³ãã«ãè¦ã¦ã¿ã</a> 1051 <p class="mt-5 text-xs text-slate-400"><a href="#pricing" class="underline hover:text-white">æéãã©ã³</a> ã» <a href="#faq" class="underline hover:text-white">ããããã質å</a></p> 1052 </div> 1053</section> 1054 1055<!-- ===== æé ===== --> 1056<section class="py-20 px-8 bg-slate-50 max-md:py-14 max-md:px-5" id="pricing"> 1057 <div class="max-w-[1100px] mx-auto"> 1058 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">æéã«ã¤ãã¦</h2> 1059 <p class="text-center text-base text-gray-400 mb-10">ä½ã£ã¦çµããã§ã¯ãªããç¶ããããã®æéè¨è¨ãå¿ è¦ãªãã®ã¯ãã¹ã¦å«ã¾ãã¦ãã¾ãã</p> 1060 1061 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-[700px] mx-auto mb-10 text-center"> 1062 <div class="bg-white rounded-2xl border border-gray-200 py-8 px-6"> 1063 <div class="text-sm font-bold text-gray-400 mb-2">åæè²»ç¨</div> 1064 <div class="text-4xl font-black text-slate-900">0<span class="text-lg font-bold">å</span></div> 1065 </div> 1066 <div class="bg-white rounded-2xl border border-gray-200 py-8 px-6"> 1067 <div class="text-sm font-bold text-gray-400 mb-2">æé¡ï¼1å¹´å¥ç´ï¼</div> 1068 <div class="text-4xl font-black text-slate-900">1,614<span class="text-lg font-bold">å</span></div> 1069 <div class="text-xs text-gray-400 mt-1">ç¨è¾¼ã»å¹´éå¥ç´ã®å ´å</div> 1070 </div> 1071 </div> 1072 1073 <div class="pricing-detail-img-wrap max-w-[860px] mx-auto mb-10 rounded-2xl border border-gray-200 shadow-sm"> 1074 <img src="/images/top_image-b/img/img-price.jpg" alt="åæè²»ç¨0å+æé¡1,614åããµã¼ãã¼ä»£ï¼ãµãã¼ãæï¼ãã¡ã¤ã³æãå¿ è¦ãªæéãå ¨ã¦è¾¼ã¿ã§ãï¼" class="pricing-detail-img-pc"> 1075 <img src="/images/top_image-b/img/img-price.png" alt="åæè²»ç¨0å+æé¡1,614åããµã¼ãã¼ä»£ï¼ãµãã¼ãæï¼ãã¡ã¤ã³æãå¿ è¦ãªæéãå ¨ã¦è¾¼ã¿ã§ãï¼" class="pricing-detail-img-sp"> 1076 </div> 1077 1078 <p class="max-w-[800px] mx-auto text-sm text-gray-600 leading-relaxed mb-10 text-center">PAGEKitã§ã¯ãå®éã«ä½¿ã£ã¦ã¿ã¦æºè¶³ããæ¹ã ãã«ãå©ç¨ããã ãããã<strong>30æ¥é</strong>ãã¹ã¦ã®æ©è½ãç¡æã§ã試ãããã ãã¾ãã30æ¥ã®éã«ã¡ãªãããæãã¦ããã ãã¾ããããä¼å¡ãã¼ã¸ãããå©ç¨æéãå»¶é·ãã¦ãã ããï¼32æ¥ã»90æ¥ã»180æ¥ã»1å¹´ï¼ã30æ¥å¾ã¾ã§ã«å»¶é·æç¶ãããªãå ´åãã試ãæéãçµäºãèªåçã«è§£ç´ã¨ãªãã¾ãã</p> 1079 1080 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10"> 1081 <div class="bg-white rounded-xl border border-gray-200 p-5 text-center"> 1082 <div class="text-lg font-black text-slate-900 mb-2">
108232æ¥</div> 1083 <div class="text-xs text-gray-500 mb-1">åæè²»ç¨ 0å</div> 1084 <div class="text-sm font-bold text-slate-800">å©ç¨æ 2,420å</div> 1085 </div> 1086 <div class="bg-white rounded-xl border border-gray-200 p-5 text-center"> 1087 <div class="text-lg font-black text-slate-900 mb-2">90æ¥</div> 1088 <div class="text-xs text-gray-500 mb-1">åæè²»ç¨ 0å</div> 1089 <div class="text-sm font-bold text-slate-800">å©ç¨æ 6,050å</div> 1090 <div class="text-xs text-[#F7AB02] font-bold mt-1">2,017å/æ</div> 1091 </div> 1092 <div class="bg-white rounded-xl border border-gray-200 p-5 text-center"> 1093 <div class="text-lg font-black text-slate-900 mb-2">180æ¥</div> 1094 <div class="text-xs text-gray-500 mb-1">åæè²»ç¨ 0å</div> 1095 <div class="text-sm font-bold text-slate-800">å©ç¨æ 10,890å</div> 1096 <div class="text-xs text-[#F7AB02] font-bold mt-1">1,815å/æ</div> 1097 </div> 1098 <div class="bg-white rounded-xl border-2 border-[#F7AB02] bg-[#F7AB02]/5 p-5 text-center"> 1099 <div class="text-lg font-black text-slate-900 mb-2">1å¹´</div> 1100 <div class="text-xs text-gray-500 mb-1">åæè²»ç¨ 0å</div> 1101 <div class="text-sm font-bold text-slate-800">å©ç¨æ 19,360å</div> 1102 <div class="text-xs text-[#F7AB02] font-bold mt-1">1,614å/æ</div> 1103 </div> 1104 </div> 1105 </div> 1106 1107 <!-- TODO: 次åãªãªã¼ã¹ã§æå¹å â ç«¶åæ¯è¼ãã¼ãã« 1108 <div class="max-w-[900px] mx-auto mt-16"> 1109 <h3 class="text-center text-lg font-bold text-slate-900 mb-6">ä»ç¤¾ãµã¼ãã¹ã¨ã®æ¯è¼</h3> 1110 <div class="rounded-2xl bg-white border border-gray-200 overflow-hidden"> 1111 <div class="overflow-x-auto"> 1112 <table class="w-full text-sm"> 1113 <thead> 1114 <tr class="border-b border-gray-200"> 1115 <th class="py-4 px-4 text-left text-gray-400 font-bold w-[140px] max-md:w-[100px]"></th> 1116 <th class="py-4 px-4 text-center font-bold text-[#F7AB02] bg-[#F7AB02]/5 min-w-[120px]">PAGEKit</th> 1117 <th class="py-4 px-4 text-center font-bold text-gray-400 min-w-[100px]">A社</th> 1118 <th class="py-4 px-4 text-center font-bold text-gray-400 min-w-[100px]">B社</th> 1119 <th class="py-4 px-4 text-center font-bold text-gray-400 min-w-[100px]">C社</th> 1120 </tr> 1121 </thead> 1122 <tbody class="text-slate-700"> 1123 <tr class="border-b border-gray-100"> 1124 <td class="py-4 px-4 font-bold text-slate-600">æé¡æé</td> 1125 <td class="py-4 px-4 text-center font-bold bg-[#F7AB02]/5">1,614åã</td> 1126 <td class="py-4 px-4 text-center text-gray-500">2,500åã</td> 1127 <td class="py-4 px-4 text-center text-gray-500">3,580åã</td> 1128 <td class="py-4 px-4 text-center text-gray-500">3,850åã</td> 1129 </tr> 1130 <tr class="border-b border-gray-100"> 1131 <td class="py-4 px-4 font-bold text-slate-600">åæè²»ç¨</td> 1132 <td class="py-4 px-4 text-center font-bold bg-[#F7AB02]/5">0å</td> 1133 <td class="py-4 px-4 text-center text-gray-500">0å</td> 1134 <td class="py-4 px-4 text-center text-gray-500">7,920å</td> 1135 <td class="py-4 px-4 text-center text-gray-500">0å</td> 1136 </tr> 1137 <tr class="border-b border-gray-100"> 1138 <td class="py-4 px-4 font-bold text-slate-600">ç¬èªãã¡ã¤ã³</td> 1139 <td class="py-4 px-4 text-center font-bold bg-[#F7AB02]/5">ç¡æ</td> 1140 <td class="py-4 px-4 text-center text-gray-500">ææ</td> 1141 <td class="py-4 px-4 text-center text-gray-500">è¾¼ã¿</td> 1142 <td class="py-4 px-4 text-center text-gray-500">ææ</td> 1143 </tr> 1144 <tr class="border-b border-gray-100"> 1145 <td class="py-4 px-4 font-bold text-slate-600">æ¥æ¬èªãµãã¼ã</td> 1146 <td class="py-4 px-4 text-center font-bold bg-[#F7AB02]/5">â</td> 1147 <td class="py-4 px-4 text-center text-gray-500">â³</td> 1148 <td class="py-4 px-4 text-center text-gray-500">â</td> 1149 <td class="py-4 px-4 text-center text-gray-500">â³</td> 1150 </tr> 1151 <tr> 1152 <td class="py-4 px-4 font-bold text-slate-600">æä½ã®ããããã</td> 1153 <td class="py-4 px-4 text-center font-bold bg-[#F7AB02]/5">â</td> 1154 <td class="py-4 px-4 text-center text-gray-500">â³</td> 1155 <td class="py-4 px-4 text-center text-gray-500">â³</td> 1156 <td class="py-4 px-4 text-center text-gray-500">â³</td> 1157 </tr> 1158 </tbody> 1159 </table> 1160 </div> 1161 </div> 1162 <p class="text-center text-xs text-gray-400 mt-4">â»2025å¹´5ææç¹ã®åç¤¾å ¬éæ å ±ã«åºã¥ãæ¯è¼ã§ã</p> 1163 </div> 1164 --> 1165</section> 1166 1167<!-- ===== æ¤ç´¢ã¨ã³ã¸ã³ç¡æç»é² + CTAï¼æéå¾ï¼ ===== --> 1168<section class="cta-band py-14 px-8 text-white max-md:py-10 max-md:px-5">
1169 <div class="max-w-[1000px] mx-auto"> 1170 <div class="cta-band-seo flex items-center gap-10 max-md:flex-col max-md:gap-6 mb-12"> 1171 <div class="cta-band-seo-img w-1/2 max-md:w-full"> 1172 <img src="/images/top/searchengine_v2.png" alt="æ¤ç´¢ã¨ã³ã¸ã³ç¡æç»é²ãµã¼ãã¹" class="w-full rounded-2xl bg-white shadow-[0_8px_24px_rgba(0,0,0,0.2)]"> 1173 </div> 1174 <div class="w-1/2 max-md:w-full text-left max-md:text-center"> 1175 <h3 class="text-2xl font-black mb-3 text-white">æ¤ç´¢ã¨ã³ã¸ã³ç¡æç»é²ãµã¼ãã¹</h3> 1176 <p class="text-sm text-slate-300 leading-relaxed mb-3">ãã¼ã ãã¼ã¸ãå ¬éãã¦ããæ¤ç´¢ã¨ã³ã¸ã³ã¸ã®ç»é²ãæ¸ãã§ããªããã°ãGoogleãªã©ã®æ¤ç´¢çµæã«è¡¨ç¤ºããã¾ãããæå¤ã¨æé ãå¤ããGoogleã¢ã«ã¦ã³ãã®åå¾ããµã¼ãã³ã³ã½ã¼ã«ã®è¨å®ã§ãå°ãã«ãªãæ¹ãå°ãªãããã¾ããã</p> 1177 <p class="text-sm text-slate-300 leading-relaxed mb-4">PAGEKitã§ã¯ãæ¤ç´¢ã¨ã³ã¸ã³ã¸ã®ç»é²ä½æ¥ã<strong class="text-[#F7AB02] font-bold">ç¡æã§ä»£è¡</strong>ãããã¾ããå ¬éã®ã¿ã¤ãã³ã°ã«åããã¦ç®¡çãã¼ã¸ãããç³ãè¾¼ã¿ããã ããã°ãå¼ç¤¾ã¹ã¿ãããGoogleã®æ¤ç´¢çµæã¸ã®åæ ã¾ã§ãµãã¼ããã¾ãã</p> 1178 <a href="/main/contents/searchengine.php" class="inline-block text-sm font-bold text-[#F7AB02] hover:underline max-md:mx-auto">ãµã¼ãã¹ã®è©³ç´°ãè¦ã →</a> 1179 </div> 1180 </div> 1181 <div class="text-center border-t border-white/15 pt-10"> 1182 <p class="text-lg font-bold mb-5">ã¾ãã¯30æ¥éãç¡æã§ã試ããã ããã</p> 1183 <a href="/main/signup/index.php?bt=top_mid2" class="inline-block py-3 px-10 bg-[#F7AB02] text-white rounded-lg font-bold hover:bg-[#e09a02] transition">ãµã³ãã«ãä½ã£ã¦ã¿ã</a> 1184 </div> 1185 </div> 1186</section> 1187 1188<!-- ===== æ¯è¼ ===== --> 1189<section class="py-20 px-8 max-md:py-14 max-md:px-5" id="compare"> 1190 <div class="max-w-[1100px] mx-auto"> 1191 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">ä¸å°ä¼æ¥ã»èªå¶æ¥ã®ãã¼ã ãã¼ã¸ã«ãã¡ããã©ãã鏿ã</h2> 1192 <p class="text-center text-base text-gray-400 mb-12">ããããã®é¸æè¢ã®ç¹å¾´ãæ¯ã¹ãã¨ãPAGEKitã®ç«ã¡ä½ç½®ãã¯ã£ãããã¾ãã</p> 1193 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> 1194 <div class="rounded-2xl border border-gray-200 p-6 bg-white"> 1195 <h3 class="text-lg font-bold text-slate-800 mb-3">ç¡æHP</h3> 1196 <p class="text-sm text-gray-600 leading-relaxed">è²»ç¨ã¯æãããã¾ããããµãã¼ããå®å®æ§ãå¼±ãããã¸ãã¹éç¨ã§ã¯ä¸å®ãæ®ãã¾ãã</p> 1197 </div> 1198 <div class="rounded-2xl border border-gray-200 p-6 bg-white"> 1199 <h3 class="text-lg font-bold text-slate-800 mb-3">å®å ¨ç¬å¦</h3> 1200 <p class="text-sm text-gray-600 leading-relaxed">èªç±åº¦ã¯é«ã䏿¹ã§ãå¦ç¿ã³ã¹ãã¨ä½æ¥æéã大ãããæ¬æ¥ãå§è¿«ãããããªãã¾ãã</p> 1201 </div> 1202 <div class="rounded-2xl border border-gray-200 p-6 bg-white"> 1203 <h3 class="text-lg font-bold text-slate-800 mb-3">å¶ä½ä¼ç¤¾</h3> 1204 <p class="text-sm text-gray-600 leading-relaxed">å質ã¯é«ããªããããåé¢ãåæè²»ç¨ãæ´æ°è²»ç¨ãé«ããç¶ç¶éç¨ã®è² æ ãå¢ãã¾ãã</p> 1205 </div> 1206 <div class="rounded-2xl border-2 border-[#F7AB02] p-6 bg-[#F7AB02]/5"> 1207 <h3 class="text-lg font-black text-slate-900 mb-3">PAGEKit</h3> 1208 <p class="text-sm text-slate-700 leading-relaxed">ä½ä¾¡æ ¼ã§ä½æãããããå ¬éå¾ãèªåã§æ´æ°ãç¶ãããããéç¨ã«å¿ è¦ãªæ©è½ãä¸éãæã£ã¦ãã¾ãã</p> 1209 </div> 1210 </div> 1211 <p class="text-center mt-10 text-sm"><a href="#pricing" class="font-bold text-[#F7AB02] hover:underline">æéãã©ã³ãè¦ã →</a></p> 1212 </div> 1213</section> 1214 1215<!-- ===== ã客æ§ã®å£° ===== --> 1216<section class="py-20 px-8 max-w-[1200px] mx-auto max-md:py-14 max-md:px-5" id="testimonials"> 1217 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">å ¬éå¾ãç¶ãããããã客æ§ã®å£°</h2> 1218 <p class="text-center text-base text-gray-400 mb-14">ãä½ããã ãã§ãªããæ´æ°ãç¶ãããéç¨ãã§ããã¨ããå®éã®ãææ³ããç´¹ä»ãã¾ãã</p> 1219 <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> 1220 <div class="bg-white rounded-2xl shadow-[0_2px_16px_rgba(0,0,0,0.06)] p-6"> 1221 <div class="text-yellow-400 text-lg mb-3">★★★★★</div> 1222 <p class="text-sm text-gray-600 leading-relaxed mb-4">ããã¼ã ãã¼ã¸ã使ããã«ãããè²»ç¨ãæããçºã«ç¡æã®ãã¼ã ãã¼ã¸ä½æã®ãµã¤ãã§ãã©ã¤ãã¦ãã¾ãããããã½ã³ã³ãè¦æã§ä½æãé²ã¾ããèªåã§ãã¼ã ãã¼ã¸ã使ããã®ã¯ç¡çãªã®ã§ã¯ãªããï¼å°éã®ä¼ç¤¾ã«ä¾é ¼ããã¨è²»ç¨ãå¿é ã ã夿´ä¾é ¼ã®åº¦ã«ãéããããããã ããã©ãããã°è¯ãã®ãåãããªãã¨æ©ãã§ãã¾ãããæ¬å½ã«ãã½ã³ã³åå¿è ãªã®ã«ãèªåã§ãä¿¡ããããªãã§ãããã£ã¨ä¿¡ããããªãã®ã¯ä¸»äººã®ããã§ãç§ããã¼ã ãã¼ã¸ã使ã§ããã®ã ã£ããèªåãç³ãè¾¼ã¿ãããã¨è¨ã£ã¦ãã¾ããå¤åãè¿ãå°æ¥ãç³ãè¾¼ã¿ããã¦ããã ãã¨æãã¾ããèªåã§å¤æ´ãããæã«å¤æ´ã§ãã便å©ãã¯æ ¼å¥ã§ã
1222ãç³ãè¾¼ã¿ãã¦è¯ãã£ãã§ããã</p> 1223 <div class="border-t pt-4"> 1224 <div class="font-bold text-sm text-slate-800">ã¬ã¤ãã»ã©ãã¼&ã¹ã¯ã¼ã« ãããã³ æ§</div> 1225 <div class="text-xs text-gray-400">ã¹ã¯ã¼ã«</div> 1226 </div> 1227 </div> 1228 <div class="bg-white rounded-2xl shadow-[0_2px_16px_rgba(0,0,0,0.06)] p-6"> 1229 <div class="text-yellow-400 text-lg mb-3">★★★★★</div> 1230 <p class="text-sm text-gray-600 leading-relaxed mb-4">ããã½ã³ã³æä½ã«èªä¿¡ããªãèªåéã ãã§ãã¼ã ãã¼ã¸ãã§ããã®ãã©ããä¸å®ããã£ã±ãã§ããããPAGEKitã®äºãç¥ã£ã¦ã¾ããç¡ææéå ã§ãã¼ã ãã¼ã¸ã宿ããããã®å¾ãï¼ã«æã®å»¶é·ãç³ãè¾¼ã¿ã¾ããããã½ã³ã³æä½ã«æ £ãã¦ããªãçºã使ãã¥ããã¯æãã¾ãããã宿çã«ä½¿ãæ¹ãéã£ã¦ãã¦ãã ãã£ããããã®ã§ãçµæçã«ã¯æºè¶³ã§ããä»ä¸ããã«ãªã£ãã¨æãã¦ãã¾ããã</p> 1231 <div class="border-t pt-4"> 1232 <div class="font-bold text-sm text-slate-800">æ¾èª²å¾ãã¤ãµã¼ãã¹ SECOND HOUSE æ§</div> 1233 <div class="text-xs text-gray-400">å»çã»ç¦ç¥é¢é£</div> 1234 </div> 1235 </div> 1236 <div class="bg-white rounded-2xl shadow-[0_2px_16px_rgba(0,0,0,0.06)] p-6"> 1237 <div class="text-yellow-400 text-lg mb-3">★★★★★</div> 1238 <p class="text-sm text-gray-600 leading-relaxed mb-4">ããã¼ã ãã¼ã¸ä½æãå§è¨æ¥è ã«å§è¨ãã¦ããã¾ããããå¼ç¤¾ã¯æ¥ã æ å ±ãå¤ãããããæ å ±ã®æ´æ°ã®ã¬ã¹ãã³ã¹ãæªããæçµçã«èªç¤¾å¶ä½ã«åãæ¿ãã¾ãããä½é¨çãå©ç¨ãããã¼ã ãã¼ã¸ä½æã®ç¥èãå°ãªãã¦ã使ã§ãããã¨ãããã¯ã¼ãã¤ã³ãçãªå©ç¨ã®ãããã§ãæ¯è¼çæµææãªãå©ç¨ã§ãããããå°å ¥ã決ãã¾ãããå°éæ¥è ã®ãããªã·ã¹ãã ããã¶ã¤ã³ãæãã§ãã¾ãã°ãå¤é¨è©ä¾¡ã¯ä½ãã¨ãç³ãã¾ãããæ å ±æ´æ°ã®ä¸ã§ã¯ãPAGEKitãå©ç¨ãããã¨ã§ãæ¥åã¯æã£ã¦ããã¾ããã</p> 1239 <div class="border-t pt-4"> 1240 <div class="font-bold text-sm text-slate-800">æ¥æ¬ããªã¹ãã£ãã¯ã³ã³ãã£ã·ã§ãã³ã°åä¼ æ§</div> 1241 <div class="text-xs text-gray-400">éå¶å©çµç¹</div> 1242 </div> 1243 </div> 1244 </div> 1245</section> 1246 1247<!-- ===== FAQ ===== --> 1248<section class="py-20 px-8 max-w-[900px] mx-auto max-md:py-14 max-md:px-5" id="faq"> 1249 <h2 class="text-center text-[32px] font-black mb-3 text-slate-900">ããããã質å</h2> 1250 <p class="text-center text-base text-gray-400 mb-14">ã䏿ãªç¹ããããã¾ããããæ°è»½ã«ãåãåãããã ããã</p> 1251 <div class="space-y-3"> 1252 <details class="group bg-white rounded-xl shadow-sm border border-gray-100"> 1253 <summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-bold text-slate-800 text-[15px] marker:content-none [&::-webkit-details-marker]:hidden"> 1254 <span>ãã¼ã ãã¼ã¸ã¢ãã¬ã¹(URL)ã¯ãã©ã®ãããªãã®ã«ãªãã®ï¼</span> 1255 <span class="ml-4 text-gray-400 transition-transform group-open:rotate-45 text-xl leading-none">+</span> 1256 </summary> 1257 <div class="px-6 pb-5 text-sm text-gray-600 leading-relaxed">PAGEKitã§ä½æãã¦ããã ãããã¼ã ãã¼ã¸ã¢ãã¬ã¹ã¯ä»¥ä¸ã®ããã«ãªãã¾ãã https://ã客æ§ã®ID.p-kit.com/ ä¾ãã°ããç°ä¸ååºãã¨ãããåºã®ååã§ãtanaka-syotenãã¨ããã¦ã¼ã¶ã¼IDãç»é²ãããå ´åããhttps://tanaka-syoten.p-kit.com/ãã¨ããã¢ãã¬ã¹ã¨ãªãã¾ããã¾ãããp-kit.comãã®ä»ããªãèªç±ãªãã¼ã ãã¼ã¸URLãã叿ã®å ´åã¯ããç¬èªãã¡ã¤ã³åå¾è¨å®ä»£è¡ãµã¼ãã¹ãããç¨æãã¦ããã¾ãã</div> 1258 </details> 1259 <details class="group bg-white rounded-xl shadow-sm border border-gray-100"> 1260 <summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-bold text-slate-800 text-[15px] marker:content-none [&::-webkit-details-marker]:hidden">
1261 <span>ãã§ã«ç¬èªãã¡ã¤ã³ãæã£ã¦ãããã©ããã¼ã ãã¼ã¸ã§ä½¿ãã¾ããï¼</span> 1262 <span class="ml-4 text-gray-400 transition-transform group-open:rotate-45 text-xl leading-none">+</span> 1263 </summary> 1264 <div class="px-6 pb-5 text-sm text-gray-600 leading-relaxed">ãã§ã«ç¬èªãã¡ã¤ã³ããæã¡ã¨ããå ´åã¯ãç¬èªãã¡ã¤ã³ã管çããã¦ãããã¡ã¤ã³ç®¡çä¼ç¤¾ã§ããDNSã¬ã³ã¼ããã¨å¼ã°ããç®æã®è¨å®å¤æ´ãè¡ãªã£ã¦ããã ãã¾ãããPAGEKitã§ä½æãããã¼ã ãã¼ã¸ã«é©ç¨ãããã¨ãå¯è½ã§ãã</div> 1265 </details> 1266 <details class="group bg-white rounded-xl shadow-sm border border-gray-100"> 1267 <summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-bold text-slate-800 text-[15px] marker:content-none [&::-webkit-details-marker]:hidden"> 1268 <span>ã¹ãã¼ããã©ã³å¯¾å¿ã®ãã¼ã ãã¼ã¸ã使ã§ãã¾ããï¼</span> 1269 <span class="ml-4 text-gray-400 transition-transform group-open:rotate-45 text-xl leading-none">+</span> 1270 </summary> 1271 <div class="px-6 pb-5 text-sm text-gray-600 leading-relaxed">ã¯ããPAGEKitã§ã¯ãã¬ã¹ãã³ã·ãã¿ã¤ãããåæãã¶ã¤ã³ã¨ãã¦æ¡ç¨ãã¦ããã¾ãããã¬ã¹ãã³ã·ããã¨ã¯ããã½ã³ã³ç¨ãã¼ã ãã¼ã¸ãã¹ãã¼ããã©ã³ãªã©ã®å°ããç»é¢ã§ãæé©ãªç¶æ ã§é²è¦§ã§ãããããèªåçã«ã¬ã¤ã¢ã¦ããåãæ¿ããæ©è½ãæå³ãã¾ããã¹ãã¼ããã©ã³ã®ç»é¢ã§ã¯ã¡ãã¥ã¼ãå·¦ä¸ã®ãã¿ã³ã«ã¾ã¨ãããããããµã¤ããã¼ã®é¨åãæ¬æã®ä¸ã«åãè¾¼ãã ããã¹ãã¼ããã©ã³å°ç¨ã®ã¬ã¤ã¢ã¦ãã«ãªãã¾ãã</div> 1272 </details> 1273 </div> 1274 <div class="text-center mt-10"> 1275 <a href="/main/q-a/" class="inline-block px-8 py-3 border-2 border-slate-300 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-50 transition">ãã£ã¨è¦ã</a> 1276 </div> 1277</section> 1278 1279<!-- ===== CTA Bottom ===== --> 1280<section class="py-20 px-8 text-center bg-gradient-to-br from-slate-800 to-slate-700 text-white"> 1281 <h2 class="text-[32px] font-black mb-4">30æ¥ã§å ¬éããã®å¾ãè²ã¦ç¶ãããã¼ã ãã¼ã¸ã¸ã</h2> 1282 <p class="text-sm text-slate-200 mb-8">PAGEKitã¯ãæåã®å ¬éããé·æéç¨ã¾ã§ãã²ã¨ã¤ã®ãµã¼ãã¹ã§æ¯ãã¾ãã</p> 1283 <a href="/main/signup/index.php?bt=top_cta" class="inline-block py-4 px-12 bg-[#F7AB02] text-white rounded-lg text-lg font-bold hover:bg-[#e09a02] hover:-translate-y-0.5 transition">ã¾ãã¯ãµã³ãã«ãè¦ã¦ã¿ã</a> 1284</section> 1285 1286 1287
1288<script> 1289/* ========================================================================== 1290 24è²ãã¬ãã 1291 ========================================================================== */ 1292var PALETTE = [ 1293 { id:1, name:'Navy Gold', main:'#2C3E6B', sub:'#C7A45D' }, 1294 { id:2, name:'Blue Orange', main:'#1565C0', sub:'#FB8C00' }, 1295 { id:3, name:'Teal Coral', main:'#00796B', sub:'#FF7043' }, 1296 { id:4, name:'Green Amber', main:'#2E7D32', sub:'#F9A825' }, 1297 { id:5, name:'Charcoal Red', main:'#37474F', sub:'#E53935' }, 1298 { id:6, name:'BlueGrey Yel', main:'#546E7A', sub:'#FDD835' }, 1299 { id:7, name:'Purple Pink', main:'#5E35B1', sub:'#EC407A' }, 1300 { id:8, name:'Wine Gold', main:'#880E4F', sub:'#D4AC0D' }, 1301 { id:9, name:'DkGreen Lime', main:'#1B5E20', sub:'#9CCC65' }, 1302 { id:10, name:'Brown Terra', main:'#5D4037', sub:'#E67E5A' }, 1303 { id:11, name:'Indigo Sky', main:'#283593', sub:'#4FC3F7' }, 1304 { id:12, name:'Black Gold', main:'#212121', sub:'#FFD54F' }, 1305 { id:13, name:'Red Navy', main:'#C62828', sub:'#37474F' }, 1306 { id:14, name:'Orange Brown', main:'#E65100', sub:'#6D4C41' }, 1307 { id:15, name:'Pink Grey', main:'#D81B60', sub:'#78909C' }, 1308 { id:16, name:'LtBlue Rose', main:'#0277BD', sub:'#EF6C6C' }, 1309 { id:17, name:'Olive Gold', main:'#6B7B3A', sub:'#D4A843' }, 1310 { id:18, name:'Slate Rose', main:'#455A64', sub:'#E57373' }, 1311 { id:19, name:'Cyan Lavend', main:'#00838F', sub:'#CE93D8' }, 1312 { id:20, name:'Maroon Camel', main:'#6D1B3B', sub:'#C8A97E' }, 1313 { id:21, name:'Moss Orange', main:'#33691E', sub:'#FF8F00' }, 1314 { id:22, name:'Cobalt Silv', main:'#1A237E', sub:'#90A4AE' }, 1315 { id:23, name:'Burg Teal', main:'#7B1F3A', sub:'#4DB6AC' }, 1316 { id:24, name:'DkPurp Gold', main:'#4A148C', sub:'#FFB300' } 1317]; 1318 1319/* ========================================================================== 1320 30種ãã¶ã¤ã³ãã¼ã¿ï¼/preview/index.html ã¨åä¸ï¼ 1321 ========================================================================== */ 1322var DESIGNS = [ 1323 { biz:7, code:'181_7', label:'å¼è·å£«äºåæ', defaultName:'ãµã³ãã«æ³å¾äºåæ' }, 1324 { biz:1, code:'181_1', label:'æ¯ç§å»é¢', defaultName:'ãµã³ãã«æ¯ç§å»é¢' }, 1325 { biz:2, code:'181_2', label:'ãªãã©ã¼ã ', defaultName:'ãµã³ãã«ãªãã©ã¼ã ' }, 1326 { biz:9, code:'181_9', label:'ç¾å®¹å®¤', defaultName:'ãµã³ãã«ç¾å®¹å®¤' }, 1327 { biz:6, code:'181_6', label:'ä»è·æ½è¨', defaultName:'ãµã³ãã«ä»è·æ½è¨' }, 1328 { biz:14, code:'182_5', label:'å¦ç¿å¡¾', defaultName:'ãµã³ãã«å¦ç¿å¡¾' }, 1329 { biz:8, code:'181_8', label:'ã¨ã¢ã³ã³å·¥äº', defaultName:'ãµã³ãã«ã¨ã¢ã³ã³å·¥äº' }, 1330 { biz:22, code:'183_5', label:'ãã¼ã«ãªã¼', defaultName:'ãµã³ãã«ãã¼ã«ãªã¼' }, 1331 { biz:23, code:'183_6', label:'æ¥éª¨é¢', defaultName:'ãµã³ãã«æ¥éª¨é¢' }, 1332 { biz:24, code:'183_7', label:'èªæ²»ä¼', defaultName:'ãµã³ãã«èªæ²»ä¼' }, 1333 { biz:20, code:'183_3', label:'å·¥ååº', defaultName:'ãµã³ãã«å·¥ååº' }, 1334 { biz:28, code:'180_4', label:'ã«ãã§', defaultName:'ãµã³ãã«ã«ãã§' }, 1335 { biz:3, code:'181_3', label:'è¨è¨äºåæ', defaultName:'ãµã³ãã«è¨è¨äºåæ' }, 1336 { biz:44, code:'182_13', label:'ãµãã«ã¼ã¯ã©ã', defaultName:'ãµã³ãã«FC' }, 1337 { biz:45, code:'182_14', label:'åé£åº', defaultName:'ãµã³ãã«åé£åº' }, 1338 { biz:16, code:'182_7', label:'ç¥ç¤¾ä»é£', defaultName:'ãµã³ãã«ç¥ç¤¾' }, 1339 { biz:54, code:'181_10', label:'å ¬èªä¼è¨å£«', defaultName:'ãµã³ãã«ä¼è¨å£«äºåæ' }, 1340 { biz:48, code:'183_8', label:'ç 究室', defaultName:'ãµã³ãã«ç 究室' }, 1341 { biz:55, code:'181_11', label:'ã¨ã¹ããµãã³', defaultName:'ãµã³ãã«ãµãã³' }, 1342 { biz:56, code:'181_12', label:'èªåè»ä¿®çã»è»æ¤', defaultName:'ãµã³ãã«èªåè»' }, 1343 { biz:58, code:'181_14', label:'ã¬ã¹ãã©ã³', defaultName:'Ristorante Sample' }, 1344 { biz:47, code:'182_16', label:'ä¸å¤è»è²©å£²', defaultName:'ãµã³ãã«ä¸å¤è»è²©å£²' }, 1345 { biz:17, code:'182_8', label:'æ°´éå·¥äº', defaultName:'ãµã³ãã«æ°´éå·¥äº' }, 1346 { biz:41, code:'182_10', label:'ãã³ã¹ã¹ã¯ã¼ã«', defaultName:'ãµã³ãã«ãã³ã¹ã¹ã¯ã¼ã«' }, 1347 { biz:42, code:'182_11', label:'ä½å®¶ã»èè ', defaultName:'èæ¸ã®ãç´¹ä»' }, 1348 { biz:50, code:'183_10', label:'å ç§', defaultName:'ãµã³ãã«å ç§å»é¢' }, 1349 { biz:53, code:'183_13', label:'é¼ç¸é¢', defaultName:'ãµã³ãã«é¼ç¸é¢' }, 1350 { biz:10, code:'182_1', label:'ä¸åç£', defaultName:'ãµã³ãã«ä¸åç£' }, 1351 { biz:11, code:'182_2', label:'伿¥', defaultName:'ãµã³ãã«æ ªå¼ä¼ç¤¾' }, 1352 { biz:43, code:'182_12', label:'ã«ã«ãã£ã¼ã»ã³ã¿ã¼', defaultName:'æ©ãã®å ´ ãµã³ãã«' } 1353]; 1354 1355var currentColorIndex = -1; 1356var currentDesign = '181_9'; 1357var currentCompanyName = 'ãµã³ãã«ç¾å®¹å®¤'; 1358 1359/* ========== URLãã©ã¡ã¼ã¿ã§åææ¥ç¨®ãåãæ¿ãï¼loadBizListå¾ã«é©ç¨ï¼ ========== */ 1360var urlBizParam = (new URLSearchParams(window.location.search)).get('biz'); 1361 1362/* ========================================================================== 1363 ã«ã©ã¼å¤æã¦ã¼ãã£ãªãã£ï¼wizard.htmlã¨åä¸ï¼ 1364 ========================================================================== */ 1365function hexToRGB(hex) { 1366 hex = hex.replace('#', ''); 1367 return { r: parseInt(hex.substring(0,2),16), g: parseInt(hex.substring(2,4),16), b: parseInt(hex.substring(4,6),16) }; 1368} 1369function rgbToHSL(r, g, b) { 1370 r /= 255; g /= 255; b /= 255; 1371 var max = Math.max(r,g,b), min = Math.min(r,g,b), h, s, l = (max+min)/2; 1372 if (max === min) { h = s = 0; } 1373 else { 1374 var d = max - min; 1375 s = l > 0.5 ? d/(2-max-min) : d/(max+min); 1376 switch(max) { 1377 case r: h = ((g-b)/d + (g<b?6:0))/6; break; 1378 case g: h = ((b-r)/d + 2)/6; break; 1379 case b: h = ((r-g)/d + 4)/6; break; 1380 } 1381 } 1382 return { h: h*360, s: s*100, l: l*100 }; 1383} 1384function hslToHex(h, s, l) { 1385 h = ((h%360)+360)%360; s = Math.max(0,Math.min(100,s)); l = Math.max(0,Math.min(100,l)); 1386 h /= 360; s /= 100; l /= 100; 1387 var r, g, b; 1388 if (s === 0) { r = g = b = l; } 1389 else { 1390 function hue2rgb(p,q,t) { if(t<0)t+=1; if(t>1)t-=1; if(t<1/6)return p+(q-p)*6*t; if(t<1/2)return q; if(t<2/3)return p+(q-p)*(2/3-t)*6; return p; } 1391 var q = l<0.5 ? l*(1+s) : l+s-l*s, p = 2*l-q; 1392 r = hue2rgb(p,q,h+1/3); g = hue2rgb(p,q,h); b = hue2rgb(p,q,h-1/3); 1393 } 1394 function toHex(x) { var v = Math.round(x*255).toString(16); return v.length===1?'0'+v:v; } 1395 return '#'+toHex(r)+toHex(g)+toHex(b); 1396} 1397 1398function deriveColorSet(mainHex, subHex) { 1399 var mainRgb = hexToRGB(mainHex); 1400 var mainHsl = rgbToHSL(mainRgb.r, mainRgb.g, mainRgb.b); 1401 var mh = mainHsl.h, ms = mainHsl.s, ml = mainHsl.l; 1402 var subRgb = hexToRGB(subHex); 1403 var subHsl = rgbToHSL(subRgb.r, subRgb.g, subRgb.b); 1404 var darkMain = ml > 55 ? hslToHex(mh, ms, 35) : mainHex;
1405 var lightBorder = hslToHex(mh, Math.min(ms,25), 82); 1406 var subMuted = hslToHex(subHsl.h, Math.max(subHsl.s-20,10), Math.min(subHsl.l+15,55)); 1407 var sidebarParentBg = hslToHex(mh, Math.min(ms,20), 95); 1408 var sidebarParentBgHover = hslToHex(mh, Math.min(ms,25), 90); 1409 var sidebarChildBg = hslToHex(mh, Math.min(ms,15), 97); 1410 var sidebarChildBgHover = hslToHex(mh, Math.min(ms,20), 93); 1411 var menuDivider = hslToHex(mh, Math.min(ms,20), 80); 1412 var pagetopBg = hslToHex(mh, ms, 35); 1413 var menuHoverBgRgb = mainRgb.r+','+mainRgb.g+','+mainRgb.b; 1414 var menuDividerRgb = hexToRGB(menuDivider); 1415 return { 1416 main: mainHex, sub: subHex, mainBg: '#FFFFFF', 1417 headerMask: 'rgba('+mainRgb.r+','+mainRgb.g+','+mainRgb.b+',0.1)', 1418 menuBg: 'rgba(255,255,255,0.9)', menuBgScroll: 'rgb(255,255,255)', 1419 menuUnderline: subHex, menuText: '#333333', menuTextHover: mainHex, 1420 menuDivider: menuDivider, sidebarBorder181: lightBorder, 1421 sidebarParent: '#2E2E2E', sidebarParentHover: mainHex, 1422 sidebarParentBg: sidebarParentBg, sidebarParentBgHover: sidebarParentBgHover, 1423 sidebarChild: '#2E2E2E', sidebarChildHover: mainHex, 1424 sidebarChildBg: sidebarChildBg, sidebarChildBgHover: sidebarChildBgHover, 1425 footerBg: mainHex, bodyBg: mainHex, footerText: '#333333', 1426 companyColor: '#333333', btnText: '#ffffff', btnBg: 'background-color:'+subHex, 1427 accent: mainHex, 1428 sub3: 'rgba('+mainRgb.r+','+mainRgb.g+','+mainRgb.b+',0.1)', 1429 titleBarBg: darkMain, navPanelBg: '#FFFFFF', 1430 navPanelText: '#333333', navPanelTextSub: '#666666', 1431 linkColor: mainHex, linkVisited: subMuted, linkHover: subHex, 1432 pagetopBg: pagetopBg, pagetopArrow: '#FFFFFF', 1433 menuHoverBgRgb: menuHoverBgRgb, menuHoverOpacity: '0.1', 1434 menuDividerRgbStr: menuDividerRgb.r+','+menuDividerRgb.g+','+menuDividerRgb.b, 1435 menuDividerOpacity: '0.3' 1436 }; 1437} 1438 1439/* ========================================================================== 1440 ãã³ãã¬ã¼ãå¥CSSã«ã¼ã«ï¼wizard.htmlã¨åä¸ï¼ 1441 ========================================================================== */ 1442var TEMPLATE_CONFIG = { 1443 '180': function(c) { return [ 1444 ':root { --wz-themecolor:'+c.main+'; --wz-themecolor2:'+c.sub+'; --wz-themecolor3:'+c.sub3+'; }', 1445 '#main { background:'+c.mainBg+' !important; }', 1446 '.menu-wrapper,.menu-wrapper-topfix { background:'+c.menuBg+' !important; }', 1447 '.menu-wrapper-changecolor { background:'+c.menuBgScroll+' !important; }', 1448 '#menu > ul > li:hover, #menu li.cntmenu_over { background:rgba('+c.menuHoverBgRgb+','+c.menuHoverOpacity+') !important; }', 1449 '#menu > ul > li { border-color:rgba('+c.menuDividerRgbStr+','+c.menuDividerOpacity+') !important; }', 1450 '#menu > ul > li > a, #menu > ul > li > span { color:'+c.menuText+' !important; }', 1451 '#menu > ul > li > a:hover, #menu > ul > li > span:hover, #menu li.cntmenu_over > a { color:'+c.menuTextHover+' !important; }', 1452 '#sidebar a.sn_01 { color:'+c.sidebarParent+' !important; background:'+c.sidebarParentBg+' !important; }', 1453 '#sidebar a.sn_01_over,#sidebar a.sn_01:hover { color:'+c.sidebarParentHover+' !important; background:'+c.sidebarParentBgHover+' !important; }', 1454 '#sidebar a.sn_01_01 { color:'+c.sidebarChild+' !important; background:'+c.sidebarChildBg+' !important; }', 1455 '#sidebar a.sn_01_01_over,#sidebar a.sn_01_01:hover { color:'+c.sidebarChildHover+' !important; background:'+c.sidebarChildBgHover+' !important; }', 1456 'body { background:'+c.bodyBg+' !important; }', 1457 '#footer { background:'+c.footerBg+' !important; }', '#footer span { color:'+c.footerText+' !important; }', 1458 '#titleBar { background:'+c.titleBarBg+' !important; }', 1459 '#navPanel { background:'+c.navPanelBg+' !important; }', 1460 '#navPanel .link.depth-0 { color:'+c.navPanelText+' !important; }', 1461 '#navPanel .link.depth-1 { color:'+c.navPanelTextSub+' !important; }' 1462 ]; }, 1463 '181': function(c) { return [ 1464 ':root { --wz-themecolor:'+c.main+'; --wz-themecolor2:'+c.sub+'; --wz-themecolor3:'+c.sub3+'; }', 1465 '#main { background:'+c.mainBg+' !important; }', 1466 '.header_mask,.header_other_mask { background-color:'+c.headerMask+' !important; }', 1467 '.menu-wrapper,.menu-wrapper-topfix { background:'+c.menuBg+' !important; border-top-color:'+c.menuUnderline+' !important; border-bottom-color:'+c.menuUnderline+' !important; }', 1468 '.menu-wrapper-changecolor { background:'+c.menuBgScroll+' !important; }', 1469 '.menu_left_box,.menu_right_box { background:none !important; }', 1470 '#menu > ul > li > a::after { border-bottom-color:'+c.menuUnderline+' !important; }', 1471 '#menu > ul > li > a:hover::after,#menu > ul > li.cntmenu_over > a::after { border-bottom-color:'+c.menuUnderline+' !important; }', 1472 '#menu > ul > li > a, #menu > ul > li > span { color:'+c.menuText+' !important; }', 1473 '#menu > ul > li > a:hover, #menu > ul > li > span:hover, #menu li.cntmenu_over > a { color:'+c.menuTextHover+' !important; }', 1474 '#sidebar a.sn_01,#sidebar a.sn_01_over,#sidebar a.sn_01_01,#sidebar a.sn_01_01_over { border-bottom-color:'+c.sidebarBorder181+' !important; }', 1475 '#sidebar a.sn_01 { color:'+c.sidebarParent+' !important; }', 1476 '#sidebar a.sn_01_over,#sidebar a.sn_01:hover { color:'+c.sidebarParentHover+' !important; }', 1477 '#sidebar a.sn_01_01 { color:'+c.sidebarChild+' !important; }', 1478 '#sidebar a.sn_01_01_over,#sidebar a.sn_01_01:hover { color:'+c.sidebarChildHover+' !important; }', 1479 'body { background:'+c.bodyBg+' !important; }', 1480 '#footer { background:'+c.footerBg+' !important; }', '#footer span { color:'+c.footerText+' !important; }', 1481 '#titleBar { background:'+c.titleBarBg+' !important; }', 1482 '#navPanel { background:'+c.navPanelBg+' !important; }', 1483 '#navPanel .link.depth-0 { color:'+c.navPanelText+' !important; }', 1484 '#navPanel .link.depth-1 { color:'+c.navPanelTextSub+' !important; }' 1485 ]; }, 1486 '182': function(c) { return [ 1487 ':root { --wz-themecolor:'+c.main+'; --wz-themecolor2:'+c.sub+'; --wz-themecolor3:'+c.sub3+'; }', 1488 '#main { background:'+c.mainBg+' !important; }', 1489 '.menu-wrapper,.menu-wrapper-topfix { background:'+c.menuBg+' !important; border-top-color:'+c.menuDivider+' !important; border-bottom-color:'+c.menuDivider+' !important; }', 1490 '.menu-wrapper-changecolor { background:'+c.menuBgScroll+' !important; }', 1491 '.menu_left_box,.menu_right_box { background:none !important; }', 1492 '#menu > ul > li { border-color:'+c.menuDivider+' !important; }', 1493 '#menu > ul > li > a::after,#menu > ul > li:hover::after,#menu > ul > li.cntmenu_over::after { border-bottom-color:'+c.menuUnderline+' !important; }', 1494 '#menu > ul > li > a, #menu > ul > li > span { color:'+c.menuText+' !important; }', 1495 '#menu > ul > li > a:hover, #menu > ul > li > span:hover, #menu li.cntmenu_over > a { color:'+c.menuTextHover+' !important; }', 1496 '#sidebar a.sn_01 { color:'+c.sidebarParent+' !important; background:'+c.sidebarParentBg+' !important; }', 1497 '#sidebar a.sn_01_over,#sidebar a.sn_01:hover { color:'+c.sidebarParentHover+' !important; background:'+c.sidebarParentBgHover+' !important; }', 1498 '#sidebar a.sn_01_01 { color:'+c.sidebarChild+' !important; background:'+c.sidebarChildBg+' !important; border:solid 1px '+c.menuDivider+' !important; }', 1499 '#sidebar a.sn_01_01_over,#sidebar a.sn_01_01:hover { color:'+c.sidebarChildHover+' !important; background:'+c.sidebarChildBgHover+' !important; }', 1500 '#sidebar a.sn_01,#sidebar a.sn_01_over,#sidebar a.sn_01_01,#sidebar a.sn_01_01_over { border:solid 1px '+c.menuDivider+' !important; }', 1501 'body { background:'+c.bodyBg+' !important; }', 1502 '#footer { background:'+c.footerBg+' !important; }', '#footer span { color:'+c.footerText+' !important; }', 1503 '#titleBar { background:'+c.titleBarBg+' !important; }', 1504 '#navPanel { background:'+c.navPanelBg+' !important; }', 1505 '#navPanel .link.depth-0 { color:'+c.navPanelText+' !important; }', 1506 '#navPanel .link.depth-1 { color:'+c.navPanelTextSub+' !important; }' 1507 ]; }, 1508 '183': function(c) { return [ 1509 ':root { --wz-themecolor:'+c.main+'; --wz-themecolor2:'+c.sub+'; --wz-themecolor3:'+c.sub3+'; }', 1510 '#main { background:'+c.mainBg+' !important; }', 1511 '.menu-wrapper,.menu-wrapper-topfix { background:'+c.menuBg+' !important; }', 1512 '.menu-wrapper-changecolor { background:'+c.menuBgScroll+' !important; }', 1513 '#menu > ul > li > a, #menu > ul > li > span { color:'+c.menuText+' !important; }', 1514 '#menu > ul > li > a:hover, #menu > ul > li > span:hover, #menu li.cntmenu_over > a { color:'+c.menuTextHover+' !important; }', 1515 '#sidebar a.sn_01 { color:'+c.sidebarParent+' !important; }', 1516 '#sidebar a.sn_01_over,#sidebar a.sn_01:hover { color:'+c.sidebarParentHover+' !important; }', 1517 '#sidebar a.sn_01_01 { color:'+c.sidebarChild+' !important; }', 1518 '#sidebar a.sn_01_01_over,#sidebar a.sn_01_01:hover { color:'+c.sidebarChildHover+' !important; }', 1519 '.pagetopbtn a { background:'+c.pagetopBg+' !important; }', 1520 'body { background:'+c.bodyBg+' !important; }', 1521 '#footer { background:'+c.footerBg+' !important; }', '#footer span { color:'+c.footerText+' !important; }', 1522 '#titleBar { background:'+c.titleBarBg+' !important; }', 1523 '#navPanel { background:'+c.navPanelBg+' !important; }', 1524 '#navPanel .link.depth-0 { color:'+c.navPanelText+' !important; }', 1525 '#navPanel .link.depth-1 { color:'+c.navPanelTextSub+' !important; }' 1526 ]; } 1527}; 1528 1529/* ========================================================================== 1530 iframeå ã«ã«ã©ã¼CSSæ³¨å ¥ï¼wizard.htmlã¨åæ¹å¼ï¼ 1531 ========================================================================== */ 1532function applyColorToIframe() { 1533 if (currentColorIndex < 0) return; 1534 var p = PALETTE[currentColorIndex]; 1535 var c = deriveColorSet(p.main, p.sub); 1536 var templateId = currentDesign.split('_')[0]; 1537 var cssRulesFn = TEMPLATE_CONFIG[templateId] || TEMPLATE_CONFIG['181']; 1538 1539 var iframe = document.getElementById('previewFrame'); 1540 var doc; 1541 try { doc = iframe.contentDocument || iframe.contentWindow.document; }
1542 catch(e) { return; } 1543 if (!doc || !doc.head) return; 1544 1545 var styleId = 'wz-color-override'; 1546 var styleEl = doc.getElementById(styleId); 1547 if (!styleEl) { 1548 styleEl = doc.createElement('style'); 1549 styleEl.id = styleId; 1550 doc.head.appendChild(styleEl); 1551 } 1552 styleEl.textContent = cssRulesFn(c).join('\n'); 1553 1554 // ä¼ç¤¾åã®æåè² 1555 var companyBox = doc.querySelector('.menu_left_box'); 1556 if (companyBox) { 1557 var spans = companyBox.querySelectorAll('span[style*="color"]'); 1558 spans.forEach(function(s) { s.style.color = c.companyColor; }); 1559 } 1560 // 183: .menu_top_box ã®ä¼ç¤¾åã¯é»åºå® 1561 if (templateId === '183') { 1562 var topBox = doc.querySelector('.menu_top_box'); 1563 if (topBox) { 1564 var topSpans = topBox.querySelectorAll('span[style*="color"]'); 1565 topSpans.forEach(function(s) { s.style.color = '#000000'; }); 1566 } 1567 } 1568 1569 var btnLink = doc.querySelector('.designbtn a'); 1570 if (btnLink) { 1571 btnLink.style.color = c.btnText; 1572 btnLink.style.backgroundColor = ''; 1573 btnLink.style.backgroundImage = ''; 1574 btnLink.style.border = '0'; 1575 c.btnBg.split(';').forEach(function(rule) { 1576 rule = rule.trim(); if (!rule) return; 1577 var parts = rule.split(':'); 1578 if (parts.length >= 2) btnLink.style.setProperty(parts[0].trim(), parts.slice(1).join(':').trim()); 1579 }); 1580 } 1581} 1582 1583/* ========== ã«ã©ã¼ãã¬ããçæ ========== */ 1584(function() { 1585 var container = document.getElementById('colorPalette'); 1586 PALETTE.forEach(function(p, i) { 1587 var el = document.createElement('button'); 1588 el.className = 'swatch'; 1589 el.style.background = 'linear-gradient(135deg, ' + p.main + ' 50%, ' + p.sub + ' 50%)'; 1590 el.title = p.name; 1591 el.onclick = function() { selectColor(i); }; 1592 container.appendChild(el); 1593 }); 1594})(); 1595 1596/* ========== æ¥ç¨®ãªã¹ãèªã¿è¾¼ã¿ï¼wizard.htmlåæ§ã®APIï¼ ========== */ 1597var bizListData = []; 1598function loadBizList(callback) { 1599 fetch('/main/signup/index-wizard-color.php?action=biz_list&BIZ_DESIGN=' + encodeURIComponent(currentDesign)) 1600 .then(function(r) { return r.json(); }) 1601 .then(function(data) { 1602 bizListData = data.list; 1603 var sel = document.getElementById('bizSelect'); 1604 sel.innerHTML = ''; 1605 data.list.forEach(function(b) { 1606 var opt = document.createElement('option'); 1607 opt.value = b.id; 1608 opt.textContent = b.name + 'ã¿ã¤ã'; 1609 sel.appendChild(opt); 1610 }); 1611 if (data.current_business_id) { 1612 sel.value = data.current_business_id; 1613 } 1614 if (callback) callback(); 1615 }); 1616} 1617 1618/* ========== ã®ã£ã©ãªã¼ã«ã«ã¼ã»ã«çæï¼30種Ã2ã»ããã§ç¡éã«ã¼ãï¼ ========== */ 1619(function() { 1620 var track = document.getElementById('galleryGrid'); 1621 function addItems() { 1622 DESIGNS.forEach(function(d) { 1623 var div = document.createElement('div'); 1624 div.className = 'carousel-item'; 1625 div.innerHTML = '<img src="/user/homepage/images/temp_image/' + d.biz + '_wiz.jpg" alt="' + d.label + '" class="w-full object-cover" loading="lazy">' 1626 + '<div class="carousel-overlay"><span class="carousel-btn">ãã¬ãã¥ã¼</span></div>' 1627 + '<div class="py-2 px-3 text-xs font-semibold text-center text-gray-600 bg-white">' + d.label + '</div>'; 1628 div.addEventListener('click', function() { 1629 topLog('top_gallery_' + d.biz); 1630 window.location.href = '/main/signup/index.php?bt=top_gallery&biz=' + d.biz + '&design=' + d.code + '&name=' + encodeURIComponent(d.defaultName); 1631 }); 1632 track.appendChild(div); 1633 }); 1634 } 1635 addItems(); 1636 addItems(); 1637})(); 1638 1639/* ========== ã«ã«ã¼ã»ã«ï¼èªåã¹ã¯ãã¼ã«ï¼ãã©ãã° ========== */ 1640(function() { 1641 var track = document.getElementById('galleryGrid'); 1642 var halfWidth = track.scrollWidth / 2; 1643 var pos = 0; 1644 var speed = halfWidth / 120; // px/s (120ç§ã§1ã»ããå) 1645 var isDragging = false; 1646 var isHovering = false; 1647 var wasDragged = false; 1648 var startX = 0; 1649 var startPos = 0; 1650 var lastTime = performance.now(); 1651 var rafId; 1652 1653 function wrap() { 1654 if (pos <= -halfWidth) pos += halfWidth; 1655 if (pos > 0) pos -= halfWidth; 1656 } 1657 1658 function tick(now) { 1659 if (!isDragging && !isHovering) { 1660 var dt = (now - lastTime) / 1000; 1661 pos -= speed * dt; 1662 wrap(); 1663 }
1664 lastTime = now; 1665 track.style.transform = 'translateX(' + pos + 'px)'; 1666 rafId = requestAnimationFrame(tick); 1667 } 1668 rafId = requestAnimationFrame(tick); 1669 1670 // ãã¦ã¹ 1671 track.addEventListener('mousedown', function(e) { 1672 isDragging = true; wasDragged = false; 1673 startX = e.clientX; startPos = pos; 1674 track.classList.add('is-dragging'); 1675 e.preventDefault(); 1676 }); 1677 window.addEventListener('mousemove', function(e) { 1678 if (!isDragging) return; 1679 var dx = e.clientX - startX; 1680 if (Math.abs(dx) > 3) wasDragged = true; 1681 pos = startPos + dx; 1682 wrap(); 1683 }); 1684 window.addEventListener('mouseup', function() { 1685 if (!isDragging) return; 1686 isDragging = false; 1687 track.classList.remove('is-dragging'); 1688 }); 1689 1690 // ã¿ãã 1691 track.addEventListener('touchstart', function(e) { 1692 isDragging = true; wasDragged = false; 1693 startX = e.touches[0].clientX; startPos = pos; 1694 }, { passive: true }); 1695 track.addEventListener('touchmove', function(e) { 1696 if (!isDragging) return; 1697 var dx = e.touches[0].clientX - startX; 1698 if (Math.abs(dx) > 3) wasDragged = true; 1699 pos = startPos + dx; 1700 wrap(); 1701 }, { passive: true }); 1702 track.addEventListener('touchend', function() { isDragging = false; }); 1703 1704 // ããã¼ã§åæ¢ 1705 track.addEventListener('mouseenter', function() { isHovering = true; }); 1706 track.addEventListener('mouseleave', function() { isHovering = false; }); 1707 1708 // ãã©ãã°ä¸ã®ã¯ãªãã¯é²æ¢ 1709 track.addEventListener('click', function(e) { 1710 if (wasDragged) { e.stopPropagation(); e.preventDefault(); } 1711 }, true); 1712})(); 1713 1714/* ========== æ©è½ç´¹ä»ï¼ç»åã«ã«ã¼ã»ã« ========== */ 1715(function() { 1716 document.querySelectorAll('[data-feature-carousel]').forEach(function(carousel) { 1717 var slides = carousel.querySelectorAll('.feature-carousel-slide'); 1718 if (slides.length <= 1) return; 1719 var interval = parseInt(carousel.getAttribute('data-interval'), 10) || 2000; 1720 var index = 0; 1721 setInterval(function() { 1722 slides[index].classList.remove('is-active'); 1723 index = (index + 1) % slides.length; 1724 slides[index].classList.add('is-active'); 1725 }, interval); 1726 }); 1727})(); 1728 1729/* ========== ãã¬ãã¥ã¼æ´æ°ï¼iframeãªãã¼ãï¼ ========== */ 1730function updatePreview() { 1731 var iframe = document.getElementById('previewFrame'); 1732 var loading = document.getElementById('previewLoading'); 1733 var bizId = document.getElementById('bizSelect').value; 1734 1735 iframe.classList.remove('is-ready'); 1736 loading.style.display = 'flex'; 1737 1738 var src = '/main/signup/index-wizard-color.php?action=view&page=1' 1739 + '&BIZ_DESIGN=' + encodeURIComponent(currentDesign) 1740 + '&COMPANY_NAME=' + encodeURIComponent(currentCompanyName) 1741 + '&BIZ=' + encodeURIComponent(bizId); 1742 iframe.src = src; 1743 1744 iframe.onload = function() { 1745 loading.style.display = 'none'; 1746 iframe.classList.add('is-ready'); 1747 try { 1748 var doc = iframe.contentDocument || iframe.contentWindow.document; 1749 var ph = doc.getElementById('preview_header'); 1750 if (ph) ph.style.display = 'none'; 1751 1752 var links = doc.querySelectorAll('a[href*="action=view"]'); 1753 links.forEach(function(link) { 1754 try { 1755 var linkUrl = new URL(link.href); 1756 linkUrl.searchParams.set('BIZ_DESIGN', currentDesign); 1757 linkUrl.searchParams.set('COMPANY_NAME', currentCompanyName); 1758 var bizId = document.getElementById('bizSelect').value; 1759 if (bizId) linkUrl.searchParams.set('BIZ', bizId); 1760 link.href = linkUrl.toString(); 1761 } catch(e) {} 1762 }); 1763 1764 var win = iframe.contentWindow; 1765 if (win) { 1766 win.addEventListener('beforeunload', function() { 1767 iframe.classList.remove('is-ready'); 1768 }); 1769 } 1770 } catch(e) {} 1771 applyColorToIframe(); 1772 }; 1773} 1774 1775/* ========== 訪åè ãã°éä¿¡ ========== */ 1776function topLog(btnId) { 1777 var xhr = new XMLHttpRequest(); 1778 xhr.open('GET', '/visitorlog.php?btn_id=' + encodeURIComponent(btnId), true); 1779 xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 1780 xhr.send(); 1781} 1782 1783/* ========== ã¤ãã³ã ========== */ 1784function selectColor(index) { 1785 currentColorIndex = index; 1786 var swatches = document.querySelectorAll('.swatch');
1787 swatches.forEach(function(s, i) { 1788 s.classList.toggle('is-active', i === index); 1789 }); 1790 topLog('top_color_' + PALETTE[index].id); 1791 applyColorToIframe(); 1792} 1793 1794/* ========== å 彩忢 ========== */ 1795function stopPulseGlow() { 1796 document.querySelectorAll('.pulse-glow, .swatch').forEach(function(el) { 1797 el.classList.add('is-touched'); 1798 }); 1799 var hint = document.getElementById('guideHint'); 1800 if (hint) hint.style.display = 'none'; 1801} 1802document.getElementById('bizSelect').addEventListener('click', stopPulseGlow); 1803document.getElementById('bizSelect').addEventListener('change', stopPulseGlow); 1804document.querySelectorAll('.swatch').forEach(function(s) { 1805 s.addEventListener('click', stopPulseGlow); 1806}); 1807 1808document.getElementById('bizSelect').addEventListener('change', function() { 1809 var selectedId = this.value; 1810 var biz = bizListData.find(function(b) { return String(b.id) === selectedId; }); 1811 if (biz && biz.design) { 1812 currentDesign = biz.design; 1813 } 1814 // biz.default_name ãæåªå ãæªè¨å®ãªã DESIGNS ãã©ã¼ã«ããã¯ããããç¡ããã°ããµã³ãã«+æ¥ç¨®åã 1815 if (biz && biz.default_name) { 1816 currentCompanyName = biz.default_name; 1817 } else { 1818 var design = DESIGNS.find(function(d) { return d.code === currentDesign; }); 1819 if (design) { 1820 currentCompanyName = design.defaultName; 1821 } else { 1822 var selectedText = this.options[this.selectedIndex].text; 1823 currentCompanyName = 'ãµã³ãã«' + selectedText; 1824 } 1825 } 1826 topLog('top_biz_' + selectedId); 1827 currentColorIndex = -1; 1828 document.querySelectorAll('.swatch').forEach(function(s) { 1829 s.classList.remove('is-active'); 1830 }); 1831 updatePreview(); 1832}); 1833 1834document.getElementById('startBtn').addEventListener('click', function() { 1835 var bizId = document.getElementById('bizSelect').value; 1836 topLog('top_preview_biz' + bizId + '_design' + currentDesign); 1837 var url = '/main/signup/index.php?bt=top_preview&design=' + currentDesign 1838 + '&name=' + encodeURIComponent(currentCompanyName) 1839 + '&biz=' + bizId; 1840 if (currentColorIndex >= 0) { 1841 url += '&color=' + PALETTE[currentColorIndex].id; 1842 } 1843 window.location.href = url; 1844}); 1845 1846loadBizList(function() { 1847 if (urlBizParam) { 1848 var sel = document.getElementById('bizSelect'); 1849 var biz = bizListData.find(function(b) { return String(b.id) === urlBizParam; }); 1850 if (biz) { 1851 sel.value = biz.id; 1852 if (biz.design) { currentDesign = biz.design; } 1853 if (biz.default_name) { 1854 currentCompanyName = biz.default_name; 1855 } else { 1856 var design = DESIGNS.find(function(d) { return d.code === currentDesign; }); 1857 if (design) { 1858 currentCompanyName = design.defaultName; 1859 } else { 1860 currentCompanyName = 'ãµã³ãã«' + biz.name; 1861 } 1862 } 1863 } 1864 } 1865 // 2026/06/03: Bãã¿ã¼ã³ã¯5/15æç¹ã®æåã«æ»ãï¼æ¥ç¨®=ç¾å®¹å®¤181_9åºå®ãèªåãã¼ãã¼ã·ã§ã³ã»ã¹ã¯ãã¼ã«ã¸ã£ãã¯ç¡å¹ï¼ 1866 updatePreview(); 1867}); 1868</script>
1868 1869 1870<!-- ===== Footer ===== --> 1871 1872<footer class="py-10 px-8 bg-gray-100 text-center text-[13px] text-gray-400"> 1873 <div class="mb-4 flex justify-center gap-6 flex-wrap"> 1874 <a href="/main/price/index.php" class="text-gray-500 hover:text-gray-700 transition-colors">æé</a> 1875 <a href="/main/details/index.php" class="text-gray-500 hover:text-gray-700 transition-colors">æ©è½ç´¹ä»</a> 1876 <a href="/main/q-a/" class="text-gray-500 hover:text-gray-700 transition-colors">ããããã質å</a> 1877 <a href="/main/guide/" class="text-gray-500 hover:text-gray-700 transition-colors">ããã¥ã¢ã«</a> 1878 <a href="/main/contact/" class="text-gray-500 hover:text-gray-700 transition-colors">ãåãåãã</a> 1879 <a href="/main/law/" class="text-gray-500 hover:text-gray-700 transition-colors">ç¹å®åå弿³</a> 1880 <a href="/main/privacy/" class="text-gray-500 hover:text-gray-700 transition-colors">ãã©ã¤ãã·ã¼ããªã·ã¼</a> 1881 </div> 1882 1883 <p>© PAGEKit - <a href="https://www.ideaclip.com/" target="_blank">æ ªå¼ä¼ç¤¾ã¢ã¤ãã¢ã¯ãªãã</a></p> 1884</footer> 1885 1886 1887<!-- Yahoo!æ¤ç´¢åºå ãµã¤ããªã¿ã¼ã²ãã£ã³ã°ã¿ã° -->
1888<script async src="https://s.yimg.jp/images/listing/tool/cv/ytag.js"></script>
vendor: 1 bytes, line 1888
1888
1889<script> 1890window.yjDataLayer = window.yjDataLayer || []; 1891function ytag() { yjDataLayer.push(arguments); } 1892ytag({ 1893 "type":"yss_retargeting", 1894 "config": { 1895 "yahoo_ss_retargeting_id": "1000009895", 1896 "yahoo_sstag_custom_params": { 1897 } 1898 } 1899}); 1900</script>
1900 1901<!-- End Yahoo!æ¤ç´¢åºå ãµã¤ããªã¿ã¼ã²ãã£ã³ã°ã¿ã° --> 1902 1903<!-- Yahoo!ãã£ã¹ãã¬ã¤åºå ãµã¤ããªã¿ã¼ã²ãã£ã³ã°ã¿ã° -->
1904<script async src="https://s.yimg.jp/images/listing/tool/cv/ytag.js"></script>
vendor: 1 bytes, line 1904
1904
1905<script> 1906window.yjDataLayer = window.yjDataLayer || []; 1907function ytag() { yjDataLayer.push(arguments); } 1908ytag({ 1909 "type":"yjad_retargeting", 1910 "config":{ 1911 "yahoo_retargeting_id": "HXQQMUDXER", 1912 "yahoo_retargeting_label": "", 1913 "yahoo_retargeting_page_type": "", 1914 "yahoo_retargeting_items":[ 1915 {item_id: '', category_id: '', price: '', quantity: ''} 1916 ] 1917 } 1918}); 1919</script>
1919 1920<!-- End Yahoo!ãã£ã¹ãã¬ã¤åºå ãµã¤ããªã¿ã¼ã²ãã£ã³ã°ã¿ã° --> 1921 1922</body> 1923</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.