PageSourceSearch

https://www.p-kit.com/index.php

html p-kit.com collected 2026-10-01 11:42:55 UTC 112,901 bytes, 1,923 lines download raw bytes

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">詳しくはこちら &rarr;</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">&#x2716;</span>空白のページからスタート</li>
732          <li class="flex items-start gap-2"><span class="text-gray-300 font-bold shrink-0">&#x2716;</span>何を書けばいいか分からない</li>
733          <li class="flex items-start gap-2"><span class="text-gray-300 font-bold shrink-0">&#x2716;</span>ページ構成を自分で考える必要がある</li>
734          <li class="flex items-start gap-2"><span class="text-gray-300 font-bold shrink-0">&#x2716;</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">&#10003;</span>業種を選ぶだけで例文入りのページが完成</li>
741          <li class="flex items-start gap-2"><span class="text-[#F7AB02] font-bold shrink-0">&#10003;</span>挨拶文・サービス案内・アクセス情報もセット</li>
742          <li class="flex items-start gap-2"><span class="text-[#F7AB02] font-bold shrink-0">&#10003;</span>自社名・住所・写真を差し替えるだけ</li>
743          <li class="flex items-start gap-2"><span class="text-[#F7AB02] font-bold shrink-0">&#10003;</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">&#x2716;</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">&#10003;</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">&#x2716;</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">&#10003;</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">&#x2716;</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">&#10003;</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">&#10003;</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">&#10003;</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">&#10003;</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">詳しくはこちら &rarr;</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">詳しくはこちら &rarr;</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">詳しくはこちら &rarr;</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">サービスの詳細を見る &rarr;</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">料金プランを見る &rarr;</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">&#9733;&#9733;&#9733;&#9733;&#9733;</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">レイキセラピー&amp;スクール こもれび 様</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">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
1230      <p class="text-sm text-gray-600 leading-relaxed mb-4">「パソコン操作に自信がない自分達だけでホームページができるのかどうか不安がいっぱいでしたが、PAGEKitの事を知ってまず、無料期間内でホームページを完成させ、その後、3カ月の延長を申し込みました。パソコン操作に慣れていない為、使いづらさは感じましたが、定期的に使い方を送ってきてくださったりしたので、結果的には満足できる仕上がりになったと感じています。」</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">&#9733;&#9733;&#9733;&#9733;&#9733;</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>&copy; 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.