PageSourceSearch

https://www.kusunoki-pub.jp/

html kusunoki-pub.jp collected 2026-10-08 09:22:17 UTC 75,480 bytes, 1,211 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
vendor: 65 bytes, lines 5-7
5
6
7<script async src="https://www.googletagmanager.com/gtag/js?id=
7G-SFT0YGXQGK
vendor: 12 bytes, line 7
7"></script>
8<script>
9  
vendor: 133 bytes, lines 9-12
9window.dataLayer = window.dataLayer || [];
10  function gtag(){dataLayer.push(arguments);}
11  gtag("js", new Date());
12  gtag("config", "
12G-SFT0YGXQGK
vendor: 4 bytes, line 12
12");
13</script>
13
14<title>クスノキ出版|物語を、加須から世界へ</title>
15<meta name="description" content="クスノキ出版は埼玉県加須市発の独立系出版社。作家・楠柾の代表作『少年探偵のデジタル・スケッチパッド』シリーズ(小説1〜3巻・漫画1巻)を刊行しています。小説は全国の書店からご注文いただけます。">
16<meta name="keywords" content="クスノキ出版,紡出版,楠柾,少年探偵のデジタル・スケッチパッド,加須,児童文学,独立系出版社">
17<link rel="canonical" href="https://www.kusunoki-pub.jp/">
18
19<meta property="og:title" content="クスノキ出版|物語を、加須から世界へ">
20<meta property="og:description" content="加須発の独立系出版社。『少年探偵のデジタル・スケッチパッド』シリーズを刊行中。小説は全国の書店からご注文いただけます。">
21<meta property="og:type" content="website">
22<meta property="og:url" content="https://www.kusunoki-pub.jp/">
23<meta property="og:image" content="https://www.kusunoki-pub.jp/assets/series-key-visual-four-seasons-og.jpg">
24<meta property="og:image:width" content="1200">
25<meta property="og:image:height" content="630">
26<meta property="og:image:alt" content="少年探偵のデジタル・スケッチパッド 全10巻構想 ― 四季を越えて、君たちと。">
27<meta property="og:site_name" content="クスノキ出版">
28<meta property="og:locale" content="ja_JP">
29<meta name="twitter:card" content="summary_large_image">
30
31<script type="application/ld+json">
32{
33  "@context": "https://schema.org",
34  "@type": "Organization",
35  "name": "クスノキ出版",
36  "alternateName": "Kusunoki Publishing",
37  "url": "https://www.kusunoki-pub.jp/",
38  "logo": "https://www.kusunoki-pub.jp/assets/logo-green-360.png",
39  "address": {
40    "@type": "PostalAddress",
41    "streetAddress": "中央1-6-8 寿々木別館ビル",
42    "addressLocality": "加須市",
43    "addressRegion": "埼玉県",
44    "postalCode": "347-0055",
45    "addressCountry": "JP"
46  },
47  "sameAs": [
48    "https://www.instagram.com/kusunoki_masaki/?hl=ja",
49    "https://note.com/kusunoki_pub",
50    "https://www.youtube.com/@%E3%82%AF%E3%82%B9%E3%83%8E%E3%82%AD%E5%87%BA%E7%89%88"
51  ]
52}
53</script>
53
54
55<link rel="preconnect" href="https://fonts.googleapis.com">
56<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
57<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Shippori+Mincho:wght@500;700;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
58<link rel="stylesheet" href="./styles.css?v=202610021838">
59
60<link rel="icon" type="image/png" href="./assets/logo-green-132.png">
61<link rel="apple-touch-icon" href="./assets/logo-green-180.png">
62
63<style>
64  
65  .hero-covers{position:relative;width:100%;aspect-ratio:4/3;max-width:520px;margin-left:auto;margin-right:auto}
66  .hero-covers img{position:absolute;border-radius:3px;box-shadow:0 20px 40px rgba(15,26,51,.22);transition:transform .4s ease}
67  .hero-covers .c1{top:8%;left:0;width:52%;transform:rotate(-5deg);z-index:1}
68  .hero-covers .c2{top:0;left:26%;width:56%;z-index:3;box-shadow:0 28px 56px rgba(15,26,51,.32)}
69  .hero-covers .c3{bottom:0;right:0;width:48%;transform:rotate(5deg);z-index:2}
70  .hero-covers:hover .c1{transform:rotate(-8deg) translateY(-4px)}
71  .hero-covers:hover .c3{transform:rotate(8deg) translateY(-4px)}
72  @media (max-width:720px){
73    .hero-covers{aspect-ratio:5/3;max-width:380px}
74  }
75  
76  .reissue-card{background:#0f1a33;border:1px solid rgba(184,134,11,.35);border-radius:10px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,52px);align-items:center;color:#eef1f7}
77  .reissue-eyebrow{font-family:'Cormorant Garamond',serif;letter-spacing:.18em;color:#d9b54a;font-size:15px;margin:0 0 10px}
78  .reissue-title{font-family:'Shippori Mincho',serif;font-weight:800;font-size:clamp(26px,4vw,40px);line-height:1.25;margin:0 0 18px;color:#f7f3ea}
79  .reissue-accent{color:#e2b94e}
80  .reissue-lead{font-size:16px;line-height:1.95;color:#c8cfdd;margin:0 0 22px}
81  .reissue-points{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:13px}
82  .reissue-points li{display:flex;gap:12px;align-items:flex-start;line-height:1.7;color:#e7ebf3;font-size:15px}
83  .reissue-points i{flex:none;width:26px;height:26px;border-radius:50%;background:#b8860b;color:#0f1a33;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:13px;margin-top:1px}
84  .reissue-btn{display:inline-block;background:#b8860b;color:#0f1a33;font-weight:700;padding:13px 28px;border-radius:6px;text-decoration:none;transition:opacity .2s}
85  .reissue-btn:hover{opacity:.88}
86  .reissue-note{font-size:12.5px;color:#8b95a9;margin:14px 0 0}
87  .reissue-covers{display:flex;gap:18px;justify-content:center;align-items:center}
88  .reissue-covers img{width:48%;max-width:215px;border-radius:4px;box-shadow:0 22px 48px rgba(0,0,0,.45)}
89  @media(max-width:760px){.reissue-card{grid-template-columns:1fr;gap:30px}.reissue-covers{order:-1;max-width:360px;margin:0 auto}}
90</style>
91</head>
92<body>
93<a class="skip-link" href="#main">本文へ移動</a>
94
95<div data-partial="header"></div>
96
97<main id="main">
98
99  <section class="kusu-hero videomode" id="kusuHero">
100    <style>
101      .kusu-hero{
102        --kusu-bg1:#0c1210;           
103        --kusu-bg2:#05080a;
104        --kusu-tree-ink:#1a2622;      
105        --kusu-gold:#d4af37;
106        --kusu-paperwhite:#f2ede1;
107        position:relative; min-height:0; overflow:hidden;
108        background:radial-gradient(140% 90% at 50% 0%, var(--kusu-bg1) 0%, var(--kusu-bg2) 78%);
109        display:flex; align-items:flex-start; justify-content:center;
110      }
111      
112      .kusu-hero::before{
113        content:""; position:absolute; inset:0; opacity:.55; pointer-events:none; z-index:1;
114        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.05'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
115      }
116
117      .kusu-video{ position:absolute; left:-2%; top:-1.5%; width:104%; height:103%; max-width:none; object-fit:cover;
118        object-position:70% center; z-index:0; transform:translateZ(0); }
119      .kusu-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
120        background:
121          radial-gradient(90% 80% at 12% 96%, rgba(5,8,10,.62) 0%, rgba(5,8,10,.3) 45%, rgba(5,8,10,0) 70%),
122          linear-gradient(90deg, rgba(5,8,10,.42) 0%, rgba(5,8,10,.12) 40%, rgba(5,8,10,0) 60%); }
123      .kusu-pinlayer{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
124      .kusu-pinlayer .kusu-fruit, .kusu-pinlayer .kusu-bud{ position:absolute; transform:translate(-50%,-50%); }
125      .kusu-pinlayer .kusu-fruit{ width:20px; height:20px;
126        box-shadow:0 0 0 2.5px rgba(255,248,220,.4), 0 0 14px 4px rgba(255,236,170,.8), 0 0 34px 10px rgba(255,220,120,.35); }
127      .kusu-pinlayer button.kusu-bud.b3{ width:14px; height:17px;
128        box-shadow:0 0 0 2px rgba(255,244,200,.35), 0 0 12px 3px rgba(240,214,140,.6); }
129      .kusu-pinlayer span.kusu-bud{ width:11px; height:14px; opacity:1; }
130      .kusu-pinlayer .kusu-bud{ background:radial-gradient(circle at 35% 25%, #d8c890, #8a7a4a 55%, #4a3f22);
131        box-shadow:0 0 6px rgba(216,200,144,.3); }
132      .kusu-pinlayer .kusu-fruit{ pointer-events:auto; }
133      .kusu-pinlayer button.kusu-bud.b3{ pointer-events:auto; }
134      .kusu-pinlayer .kusu-card{ position:absolute; transform:none; }
135      .kusu-pinlayer .kusu-card.show{ pointer-events:none; }
136      .kusu-vleaf{ position:absolute; width:14px; height:14px; opacity:0; pointer-events:none; z-index:4; }
137      .kusu-vripple{ position:absolute; border:1.4px solid rgba(240,214,140,.75); border-radius:50%;
138        transform:translate(-50%,-50%) scaleY(.32); width:10px; height:10px; opacity:.95; pointer-events:none;
139        box-shadow:0 0 14px rgba(240,214,140,.4);
140        animation:kusuVR var(--dur,3.6s) cubic-bezier(.16,.6,.3,1) forwards; }
141      @keyframes kusuVR{ to{ width:var(--sz,300px); height:calc(var(--sz,300px) * .5); opacity:0 } }
142      .kusu-vflash{ position:absolute; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%);
143        background:radial-gradient(circle, rgba(255,250,225,.95), rgba(240,214,140,.5) 55%, transparent 75%);
144        pointer-events:none; animation:kusuVF 1s ease-out forwards; }
145      @keyframes kusuVF{ 0%{ opacity:0 } 12%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-50%) scale(2.6) } }
146      .kusu-hero.videomode .kusu-copywrap{ align-self:end; padding-bottom:clamp(24px,3.5vh,40px); }
147      .kusu-hero.videomode .kusu-eyebrow{ color:rgba(242,218,148,.96);
148        text-shadow:0 1px 10px rgba(5,8,10,.85), 0 0 3px rgba(5,8,10,.7); }
149      .kusu-hero.videomode .kusu-lead{ color:rgba(246,241,229,.88);
150        text-shadow:0 1px 10px rgba(5,8,10,.8); }
151      .kusu-minori{ display:flex; align-items:center; gap:12px; margin:2px 0 20px; }
152      .kusu-minori-label{ font-size:11px; letter-spacing:.22em; color:rgba(242,218,148,.9);
153        font-family:var(--mincho,serif); text-shadow:0 1px 8px rgba(5,8,10,.8); }
154      .kusu-minori-dots{ display:flex; gap:7px; align-items:center; }
155      .kusu-minori-dots i{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(246,241,229,.35); }
156      .kusu-minori-dots i.on{ background:radial-gradient(circle at 35% 30%, #fff3c4, #d4af37 70%); border-color:rgba(255,244,200,.8);
157        box-shadow:0 0 8px rgba(255,236,170,.7); }
158      .kusu-minori-dots i.next{ border-color:rgba(240,214,140,.85); animation:kusuNext 2.6s ease-in-out infinite; }
159      @keyframes kusuNext{ 0%,100%{ box-shadow:0 0 3px rgba(240,214,140,.25); background:rgba(240,214,140,.12) }
160        50%{ box-shadow:0 0 10px rgba(240,214,140,.75); background:rgba(240,214,140,.42) } }
161      .kusu-minori-count{ font-size:11.5px; letter-spacing:.14em; color:rgba(246,241,229,.75);
162        text-shadow:0 1px 8px rgba(5,8,10,.8); font-family:var(--mincho,serif); }
163      @media (min-aspect-ratio: 2/1){
164        .kusu-hero.videomode .kusu-video{ object-position:74% 72% !important; }
165        .kusu-hero.videomode{ background-position:74% 72% !important; }
166      }
167      @media (max-width:768px){ .kusu-minori{ justify-content:center; } }
168      .kusu-hero.videomode .kusu-video{ object-position:74% center; }
169      
170      .kusu-hero.videomode .kusu-scenewrap,
171      .kusu-hero.videomode .kusu-watergl,
172      .kusu-hero.videomode .kusu-stars{ display:none; }
173      .kusu-hero.videomode{ min-height:clamp(520px, min(80vh, 56vw), 900px); align-items:stretch;
174        background-image:url('./assets/hero-kusunoki-poster.webp');
175        background-size:cover; background-position:74% center; background-repeat:no-repeat; }
176      .kusu-hero.videomode .kusu-stage{ align-content:end; }
177      .kusu-hero.videomode .kusu-waterspace{ height:clamp(60px,8vh,90px); }
178
179      .kusu-stars{ position:absolute; inset:0 0 auto 0; height:60%; z-index:1; pointer-events:none; }
180      .kusu-star{ position:absolute; border-radius:50%; background:#dde8ee; opacity:var(--o,.5);
181        box-shadow:0 0 3px rgba(215,232,242,.4);
182        animation:kusuTwinkle var(--tw,6s) ease-in-out var(--twd,0s) infinite alternate; }
183      @keyframes kusuTwinkle{ from{ opacity:calc(var(--o,.5)*.4) } to{ opacity:var(--o,.5) } }
184
185      .kusu-motes{ position:absolute; inset:0; z-index:4; pointer-events:none; }
186      .kusu-mote{ position:absolute; width:var(--sz,3px); height:var(--sz,3px);
187        animation:kusuRise var(--dur,18s) linear var(--dl,0s) infinite; will-change:transform; }
188      .kusu-mote i{ display:block; width:100%; height:100%; border-radius:50%;
189        background:radial-gradient(circle at 42% 36%, rgba(255,255,255,.95), var(--c,#aef0e8) 48%, rgba(0,0,0,0) 74%);
190        box-shadow:0 0 9px 2px var(--cg, rgba(150,235,225,.55)), 0 0 22px 7px var(--cg2, rgba(140,220,230,.2));
191        opacity:0; filter:blur(.2px);
192        animation:kusuSway var(--swd,5.5s) ease-in-out infinite alternate,
193                  kusuMotePulse var(--dur,18s) linear var(--dl,0s) infinite; }
194      @keyframes kusuRise{ from{ transform:translateY(0) } to{ transform:translateY(calc(-1 * var(--rise,120px))) } }
195      @keyframes kusuSway{ from{ transform:translateX(calc(-1 * var(--sw,10px))) } to{ transform:translateX(var(--sw,10px)) } }
196      @keyframes kusuMotePulse{ 0%{opacity:0}
196 14%{opacity:var(--o,.35)} 78%{opacity:var(--o,.35)} 100%{opacity:0} }
197
198      .kusu-stage{ position:relative; z-index:2; width:100%; max-width:1160px;
199        padding:clamp(22px,3.4vh,40px) var(--gutter,24px) 0;
200        display:grid; grid-template-columns:1.05fr 0.95fr; gap:0 clamp(16px,3vw,44px); align-items:end; }
201      .kusu-copywrap{ align-self:end; padding-bottom:clamp(30px,5vh,58px); text-align:left; }
202      .kusu-scenewrap{ display:flex; justify-content:center; }
203
204      .kusu-scene{ position:relative; width:min(44vh,470px); margin-bottom:-8%; }
205      .kusu-tree{ position:relative; width:100%; aspect-ratio:1986/1793; }
206      .kusu-tree-rim,.kusu-tree-ink,.kusu-tree-glint,.kusu-tree-sheen{
207        position:absolute; inset:0;
208        -webkit-mask-image:url('./assets/logo-tree-alpha.png'); mask-image:url('./assets/logo-tree-alpha.png');
209        -webkit-mask-size:contain; mask-size:contain;
210        -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
211        -webkit-mask-position:center; mask-position:center;
212      }
213      
214      .kusu-tree-rim{
215        transform:translate(1.4%,-1.4%);
216        background:linear-gradient(215deg, rgba(248,252,250,.95) 0%, rgba(230,240,236,.38) 30%, rgba(230,240,236,0) 58%);
217        animation:kusuRim 14s ease-in-out infinite;
218      }
219      @keyframes kusuRim{ 0%,100%{opacity:1} 50%{opacity:.55} }
220      .kusu-tree-ink{ background:
221        linear-gradient(163deg, #3f4f45 0%, #7fa48c 14%, #26362c 32%, #b9d4c2 50%, #1c2a20 70%, #5d8069 86%, #33443a 100%); }
222      
223      .kusu-tree-sheen{
224        background:linear-gradient(115deg, rgba(232,248,238,0) 43%, rgba(240,255,246,.75) 50%, rgba(232,248,238,0) 57%);
225        background-size:300% 100%; background-repeat:no-repeat; background-position:140% 0;
226        animation:kusuSheen 7.5s ease-in-out infinite; mix-blend-mode:screen;
227      }
228      @keyframes kusuSheen{ 0%{background-position:140% 0} 16%{background-position:-140% 0} 100%{background-position:-140% 0} }
229      .kusu-tree-glint{
230        background:radial-gradient(200px 160px at 36% 30%, rgba(226,238,230,.10), rgba(226,238,230,0) 70%);
231        animation:kusuGlint 23s ease-in-out infinite; mix-blend-mode:screen;
232      }
233      @keyframes kusuGlint{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(6%,4%)} }
234      
235      .kusu-tree::after{ content:""; position:absolute; inset:-10%; pointer-events:none;
236        background:radial-gradient(46% 40% at 52% 40%, rgba(120,190,140,.09), rgba(120,190,140,0) 70%); }
237
238      .kusu-dust{ position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(226,244,232,.85);
239        filter:blur(.4px); opacity:0; pointer-events:none; z-index:3; animation:kusuDust var(--d,14s) linear infinite; animation-delay:var(--dl,0s); }
240      @keyframes kusuDust{
241        0%{ transform:translateY(0); opacity:0 } 12%{ opacity:.65 } 60%{ opacity:.35 }
242        100%{ transform:translateY(-140px) translateX(14px); opacity:0 } }
243
244      .kusu-fruit{
245        position:absolute; width:15px; height:15px; border:none; border-radius:50%; cursor:pointer; padding:0; z-index:4;
246        background:radial-gradient(circle at 32% 28%, #ffffff, #ffe9a8 45%, #d4af37 78%, #8a6508);
247        box-shadow:0 0 0 2px rgba(24,18,6,.4), 0 0 14px 4px rgba(255,244,200,.85), 0 0 34px 10px rgba(255,220,120,.35);
248        animation:kusuPulse 5.5s ease-in-out infinite;
249      }
250      .kusu-fruit:hover,.kusu-fruit:focus-visible{ transform:scale(1.4); box-shadow:0 0 14px 4px rgba(212,175,55,.8), 0 0 40px 10px rgba(212,175,55,.32); animation-play-state:paused; outline:none }
251      .kusu-fruit.f1{ left:30%; top:28% } .kusu-fruit.f2{ left:58%; top:18%; animation-delay:1.8s }
252      
253      .kusu-bud{ position:absolute; width:9px; height:12px; border-radius:50% 50% 58% 58%; pointer-events:none; z-index:4;
254        background:radial-gradient(circle at 35% 25%, #9fb4a6, #5a7263 55%, #33443a);
255        box-shadow:0 0 6px rgba(160,190,170,.22); opacity:.9; transform:rotate(var(--r,0deg)); border:none; padding:0; }
256      
257      button.kusu-bud.b3{ pointer-events:auto; cursor:pointer; width:11px; height:14px;
258        background:radial-gradient(circle at 35% 25%, #ffe9b0, #b89a4e 55%, #6a5624);
259        animation:kusuBud 4.5s ease-in-out infinite; }
260      @keyframes kusuBud{ 0%,100%{ box-shadow:0 0 8px rgba(230,200,120,.35) } 50%{ box-shadow:0 0 16px 3px rgba(240,214,140,.6) } }
261      .kusu-card.textonly{ width:188px; padding:12px 14px }
262      .kusu-card.textonly em{ margin-top:0; line-height:1.75; word-break:keep-all }
263      .kusu-card.textonly span{ display:block; margin-top:7px; color:var(--kusu-gold); font-size:10.5px; letter-spacing:.14em }
264      @keyframes kusuPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
265      .kusu-card{
266        position:absolute; width:130px; padding:8px 8px 10px; background:rgba(16,20,18,.94); border:1px solid rgba(212,175,55,.35); border-radius:6px;
267        box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 30px rgba(212,175,55,.08); opacity:0; transform:translateY(8px) scale(.96);
268        transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1.2); pointer-events:none; z-index:6;
269      }
270      .kusu-card img{ width:100%; display:block; border-radius:3px }
271      .kusu-card em{ display:block; font-style:normal; font-size:11px; color:var(--kusu-paperwhite); margin-top:7px; letter-spacing:.08em; font-family:var(--mincho,serif) }
272      .kusu-card.show{ opacity:1; transform:translateY(0) scale(1) }
273      .kusu-card.c1{ left:calc(30% - 148px); top:8% } .kusu-card.c2{ left:auto; right:calc(42% + 22px); top:0 } .kusu-card.c3{ left:auto; right:calc(28% + 20px); top:22% }
274
275      .kusu-leaf{ position:absolute; width:13px; height:13px; opacity:0; pointer-events:none; z-index:3 }
276
277      .kusu-watergl{ position:absolute; left:0; right:0; width:100%; z-index:1; pointer-events:none; }
278      .kusu-waterspace{ grid-column:1 / -1; width:100%; height:clamp(150px,19vh,205px); }
279      .kusu-waterfallback{ position:absolute; left:0; right:0; z-index:1; pointer-events:none; display:none;
280        background:linear-gradient(180deg, rgba(20,26,22,.5), rgba(5,8,10,.95) 70%); }
281
282      .kusu-copy{ position:relative; z-index:5; }
283      .kusu-eyebrow{ color:rgba(212,175,55,.7); letter-spacing:.42em; font-size:11px; text-transform:uppercase; font-family:var(--serif,serif); font-style:italic; margin-bottom:14px }
284      .kusu-title{ font-family:var(--mincho,serif); font-weight:800; color:var(--kusu-paperwhite); font-size:clamp(26px,3.4vw,46px); line-height:1.4; letter-spacing:.04em; word-break:keep-all;
285        text-shadow:0 1px 3px rgba(0,0,0,.92), 0 0 14px rgba(0,0,0,.8), 0 2px 34px rgba(0,0,0,.65) }
286      .kusu-title .kusu-accent{ color:var(--kusu-gold); font-family:var(--serif,serif); font-style:italic; font-weight:500 }
287      .kusu-lead{ margin:12px 0 22px; color:rgba(242,237,225,.7);
287 font-size:clamp(13px,1.05vw,15px); line-height:2; font-weight:300; letter-spacing:.05em }
288      .kusu-about{ margin:0 0 20px; max-width:30em; color:rgba(242,237,225,.88); font-size:clamp(13.5px,1.1vw,15.5px); line-height:1.9; letter-spacing:.03em; }
289      .kusu-about-sub{ display:block; margin-top:6px; font-size:.86em; color:rgba(242,237,225,.66); letter-spacing:.05em; }
290      .kusu-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start; }
291      .kusu-sublink{ display:inline-block; margin-top:16px; color:rgba(242,237,225,.78); font-size:13px; letter-spacing:.08em; text-decoration:none; border-bottom:1px solid rgba(242,237,225,.35); padding-bottom:2px; }
292      .kusu-sublink:hover{ color:#f2ede1; border-bottom-color:rgba(212,175,55,.8); }
293      
294      .kusu-ctas .btn{ border-radius:12px; }
295      .kusu-ctas .btn::before{ display:none; }
296      .kusu-ctas .btn-primary{ background:linear-gradient(180deg, #e2c258, #c9a52e); color:#14100a; border:none;
297        box-shadow:0 4px 18px rgba(212,175,55,.22); }
298      .kusu-ctas .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(212,175,55,.42); }
299      .kusu-ctas .btn-ghost{ color:var(--kusu-paperwhite); border-color:rgba(242,237,225,.42); background:transparent; }
300      .kusu-ctas .btn-ghost:hover{ background:rgba(242,237,225,.08); border-color:rgba(212,175,55,.75); color:#fff; transform:translateY(-2px); }
301
302      @media (max-width:768px){
303        .kusu-hero.videomode .kusu-video{ object-position:70% center; }
304        .kusu-hero.videomode{ background-position:70% center; }
305        .kusu-hero.videomode .kusu-scrim{ background:
306          linear-gradient(180deg, rgba(5,8,10,.22) 0%, rgba(5,8,10,0) 30%, rgba(5,8,10,.2) 58%, rgba(5,8,10,.8) 100%); }
307        .kusu-hero.videomode .kusu-pinlayer .kusu-fruit{ width:19px; height:19px; }
308        .kusu-hero.videomode .kusu-pinlayer button.kusu-bud.b3{ width:14px; height:17px; }
309        .kusu-hero.videomode .kusu-copywrap{ margin-top:34vh; }
310
311        .kusu-stage{ grid-template-columns:1fr; }
312        .kusu-scenewrap{ order:-1; }
313        .kusu-scene{ width:min(66vw,34vh); margin-bottom:0; }
314        .kusu-copywrap{ text-align:center; padding-bottom:0; margin-top:10px; }
315        .kusu-waterspace{ height:clamp(100px,12vh,140px); }
316        .kusu-ctas{ justify-content:center; }
317        .kusu-card.c1{ left:2% } .kusu-card.c2{ left:auto; right:2% } .kusu-card.c3{ left:auto; right:0 }
318      }
319      @media (prefers-reduced-motion:reduce){
320        .kusu-tree-rim,.kusu-tree-glint,.kusu-tree-sheen,.kusu-fruit,.kusu-bud,.kusu-star{ animation:none !important }
321        .kusu-leaf,.kusu-dust,.kusu-motes,.kusu-watergl{ display:none } .kusu-waterfallback{ display:block }
322      }
323    </style>
324
325    <video class="kusu-video" autoplay muted loop playsinline preload="metadata" poster="./assets/hero-poster.webp" aria-hidden="true">
326      <source src="./assets/hero-kusunoki-loop-v2.mp4" type="video/mp4">
327    </video>
328    <div class="kusu-scrim" aria-hidden="true"></div>
329    <div class="kusu-pinlayer" id="kusuPins"></div>
330
331    <canvas class="kusu-watergl" id="kusuWaterGL" aria-hidden="true"></canvas>
332
333    <div class="kusu-stage">
334      <div class="kusu-copywrap">
335        <div class="kusu-copy">
336          <p class="kusu-eyebrow">Kusunoki Publishing / Est. Kazo, Japan</p>
337          <h1 class="kusu-title">物語を、加須から<span class="kusu-accent">世界へ</span>。</h1>
338          <p class="kusu-lead">一冊の本が、静かな波紋になって遠くへ届く。</p>
339          <p class="kusu-about">『少年探偵のデジタル・スケッチパッド』──加須を舞台に、謎を追いながら町の記憶と人の心を描く物語。<span class="kusu-about-sub">小説1〜3巻 発売中/すべての漢字にふりがな付き/小学校高学年から大人まで</span></p>
340          <div class="kusu-minori" aria-label="シリーズの実り:全10巻のうち3巻刊行">
341            <span class="kusu-minori-label">物語の実り</span>
342            <span class="kusu-minori-dots"><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
343            <span class="kusu-minori-count">3/10巻</span>
344          </div>
345          <div class="kusu-ctas">
346            <a href="./books/shonen-tantei-01/#preview" class="btn btn-primary"><span>第1巻を試し読み</span></a>
347            <a href="https://kusunokipub.official.ec/" target="_blank" rel="noopener" class="btn btn-ghost"><span>公式ストアで買う →</span></a>
348          </div>
349          <a href="./shonen-tantei/" class="kusu-sublink">シリーズを知る →</a>
350        </div>
351      </div>
352
353      <div class="kusu-scenewrap">
354        <div class="kusu-scene">
355          <div class="kusu-tree" id="kusuTree">
356            <div class="kusu-tree-rim" aria-hidden="true"></div>
357            <div class="kusu-tree-ink" aria-hidden="true"></div>
358            <div class="kusu-tree-glint" aria-hidden="true"></div>
359            <div class="kusu-tree-sheen" aria-hidden="true"></div>
360            <span class="kusu-dust" style="left:22%; bottom:34%; --d:13s; --dl:0s" aria-hidden="true"></span>
361            <span class="kusu-dust" style="left:48%; bottom:26%; --d:17s; --dl:4s" aria-hidden="true"></span>
362            <span class="kusu-dust" style="left:70%; bottom:38%; --d:15s; --dl:8s" aria-hidden="true"></span>
363            <span class="kusu-dust" style="left:36%; bottom:20%; --d:19s; --dl:11s" aria-hidden="true"></span>
364            <button class="kusu-fruit f1" data-card="c1" aria-label="小説 第1巻"></button>
365            <button class="kusu-fruit f2" data-card="c2" aria-label="小説 第2巻"></button>
366            <span class="kusu-bud" style="left:18%; top:38%; --r:-14deg" aria-hidden="true"></span>
367            <span class="kusu-bud" style="left:26%; top:21%; --r:8deg" aria-hidden="true"></span>
368            <span class="kusu-bud" style="left:40%; top:12%; --r:-6deg" aria-hidden="true"></span>
369            <span class="kusu-bud" style="left:52%; top:9%; --r:12deg" aria-hidden="true"></span>
370            <span class="kusu-bud" style="left:68%; top:13%; --r:-10deg" aria-hidden="true"></span>
371            <span class="kusu-bud" style="left:80%; top:24%; --r:6deg" aria-hidden="true"></span>
372            <span class="kusu-bud" style="left:85%; top:37%; --r:-4deg" aria-hidden="true"></span>
373            <button class="kusu-fruit" style="left:72%; top:33%" data-card="c3" aria-label="第3巻 発売中"></button>
374            <div class="kusu-card c1"><img src="./assets/shonen-tantei-01-cover.webp" alt="小説 第1巻"><em>小説 第1巻</em></div>
375            <div class="kusu-card c2"><img src="./assets/shonen-tantei-02-cover.webp" alt="小説 第2巻"><em>小説 第2巻</em></div>
376            <div class="kusu-card c3"><img src="./assets/shonen-tantei-03-cover.webp" alt="小説 第3巻"><em>小説 第3巻</em></div>
377            <svg class="kusu-leaf" id="kusuLeaf" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1 C15 5 17 11 10 19 C3 11 5 5 10 1 Z" fill="#c9b060"/></svg>
378          </div>
379        </div>
380      </div>
381
382      <div class="kusu-waterspace" aria-hidden="true"></div>
383    </div>
384
385    
386
387    
387<script>
388      (function(){
389        var hero = document.getElementById('kusuHero');
390        var scene = hero.querySelector('.kusu-scene');
391        var treeEl = hero.querySelector('.kusu-tree');
392        var canvas = document.getElementById('kusuWaterGL');
393        var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
394        var VIDEO_MODE = hero.classList.contains('videomode');
395
396        var kusuCards = hero.querySelectorAll('.kusu-card');
397        function hideAllCards(){ kusuCards.forEach(function(c){ c.classList.remove('show'); }); }
398        hero.querySelectorAll('.kusu-fruit, button.kusu-bud.b3').forEach(function(f){
399          var card = hero.querySelector('.kusu-card.' + f.dataset.card);
400          function show(){ hideAllCards(); card.classList.add('show'); }
401          f.addEventListener('mouseenter', show);
402          f.addEventListener('mouseleave', function(){ setTimeout(hideAllCards, 160); });
403          f.addEventListener('click', function(ev){ ev.stopPropagation(); show(); });
404          f.addEventListener('focus', show); f.addEventListener('blur', hideAllCards);
405        });
406         
407        document.addEventListener('pointerdown', function(ev){
408          if (!ev.target.closest('.kusu-fruit') && !ev.target.closest('.kusu-bud')) hideAllCards();
409        }, { passive:true });
410
411        if (VIDEO_MODE) (function(){
412          var pinLayer = document.getElementById('kusuPins');
413          var vidEl = hero.querySelector('.kusu-video');
414          if (reduced && vidEl) { vidEl.pause(); vidEl.removeAttribute('autoplay'); }
415          var FW = 1280, FH = 720;
416          function getPos(){                   
417            var op = getComputedStyle(vidEl).objectPosition.split(' ');
418            return [parseFloat(op[0]) / 100 || 0.74, parseFloat(op[1]) / 100 || 0.5];
419          }
420          function mapFrame(fx, fy){           
421            var vr = vidEl.getBoundingClientRect(), hr = hero.getBoundingClientRect();
422            var cw = vr.width, ch = vr.height;
423            var P = getPos();
424            var sc = Math.max(cw / FW, ch / FH);
425            var dw = FW * sc, dh = FH * sc;
426            var ox = (cw - dw) * P[0], oy = (ch - dh) * P[1];
427            return [(vr.left - hr.left) + ox + fx / 100 * dw, (vr.top - hr.top) + oy + fy / 100 * dh];
428          }
429           
430          var PINS = [
431            [50, 25, 'f', 'c1'], [68, 17, 'f', 'c2'],
432            [40, 36, 'b'], [57, 9, 'b'], [60, 30, 'b'], [78, 24, 'b'],
433            [88, 18, 'b'], [93, 33, 'b'], [66, 41, 'b'],
434            [85, 32, 'f', 'c3']
435          ];
436          var CARDS = {
437            c1: '<img src="./assets/shonen-tantei-01-cover.webp" alt="小説 第1巻"><em>小説 第1巻</em>',
438            c2: '<img src="./assets/shonen-tantei-02-cover.webp" alt="小説 第2巻"><em>小説 第2巻</em>',
439            c3: '<img src="./assets/shonen-tantei-03-cover.webp" alt="小説 第3巻"><em>小説 第3巻</em>'
440          };
441          var pinEls = [], cardEls = {};
442          PINS.forEach(function(p){
443            var el;
444            if (p[2] === 'f') { el = document.createElement('button'); el.className = 'kusu-fruit'; }
445            else if (p[2] === 'b3') { el = document.createElement('button'); el.className = 'kusu-bud b3'; }
446            else { el = document.createElement('span'); el.className = 'kusu-bud'; el.style.setProperty('--r', ((p[0] * 7) % 24 - 12) + 'deg'); }
447            pinLayer.appendChild(el);
448            pinEls.push({ el: el, p: p });
449            if (p[3]) {
450              var c = document.createElement('div');
451              c.className = 'kusu-card ' + p[3] + (p[3] === 'c3' ? ' textonly' : '');
452              c.innerHTML = CARDS[p[3]];
453              pinLayer.appendChild(c);
454              cardEls[p[3]] = c;
455              var show = function(){ Object.keys(cardEls).forEach(function(k){ cardEls[k].classList.remove('show'); }); c.classList.add('show'); };
456              el.addEventListener('mouseenter', show);
457              el.addEventListener('mouseleave', function(){ setTimeout(function(){ c.classList.remove('show'); }, 200); });
458              el.addEventListener('click', function(ev){ ev.stopPropagation(); show(); });
459            }
460          });
461          document.addEventListener('pointerdown', function(ev){
462            if (!ev.target.closest('.kusu-fruit') && !ev.target.closest('.kusu-bud'))
463              Object.keys(cardEls).forEach(function(k){ cardEls[k].classList.remove('show'); });
464          }, { passive: true });
465          function layoutPins(){
466            pinEls.forEach(function(it){
467              var xy = mapFrame(it.p[0], it.p[1]);
468              it.el.style.left = xy[0] + 'px';
469              it.el.style.top = xy[1] + 'px';
470              if (it.p[3] && cardEls[it.p[3]]) {
471                var card = cardEls[it.p[3]];
472                var cw2 = it.p[3] === 'c3' ? 192 : 134;
473                var left = xy[0] > hero.clientWidth * 0.55;    
474                var lx2 = left ? (xy[0] - cw2 - 24) : (xy[0] + 22);
475                card.style.left = Math.min(Math.max(8, lx2), hero.clientWidth - cw2 - 8) + 'px';
476                card.style.top = Math.max(8, xy[1] - 60) + 'px';
477              }
478            });
479          }
480          layoutPins();
481          window.addEventListener('resize', layoutPins);
482          if ('ResizeObserver' in window) new ResizeObserver(layoutPins).observe(hero);
483
484          if (!reduced) {
485            var leafV = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
486            leafV.setAttribute('viewBox', '0 0 20 20');
487            leafV.classList.add('kusu-vleaf');
488            leafV.innerHTML = '<path d="M10 1 C15 5 17 11 10 19 C3 11 5 5 10 1 Z" fill="#e8cd7a"/>';
489            pinLayer.appendChild(leafV);
490            function dropLeafV(){
491               
492              var vr0 = vidEl.getBoundingClientRect(), hr0 = hero.getBoundingClientRect();
493              var cw = vr0.width, ch = vr0.height;
494              var P = getPos();
495              var sc = Math.max(cw / FW, ch / FH);
496              var dw = FW * sc, ox = (cw - dw) * P[0];
497              var hL = (hr0.left - vr0.left), hR = hL + hr0.width;
498              var visL = (hL - ox) / dw * 100, visR = (hR - ox) / dw * 100;
499              var fx = Math.max(visL + 10, 48) + Math.random() * (Math.min(visR - 6, 84) - Math.max(visL + 10, 48));
500              var start = mapFrame(fx, 15 + Math.random() * 8);
501               
502              var lx = Math.min(70, Math.max(visL + 6, fx - 6 - Math.random() * 12));
503              var end = mapFrame(lx, 84 + Math.random() * 5);
504              leafV.style.left = start[0] + 'px';
505              leafV.style.top = start[1] + 'px';
506              var dx = end[0] - start[0], dy = end[1] - start[1];
507              var anim = leafV.animate([
508                { transform: 'translate(0,0) rotate(0deg)', opacity: 0 },
509                { transform: 'translate(' + dx * 0.3 + 'px,' + dy * 0.2 + 'px) rotate(80deg)', opacity: .95, offset: .16 },
510                { transform: 'translate(' + dx * 0.7 + 'px,' + dy * 0.62 + 'px) rotate(210deg)', opacity: .9, offset: .6 },
511                { transform: 'translate(' + dx + 'px,' + dy + 'px) rotate(300deg)', opacity: .8 }
512              ], { duration: 6600, easing: 'cubic-bezier(.42,.08,.28,.99)' });
513              anim.onfinish = function(){
514                var fl = document.createElement('div');
515                fl.className = 'kusu-vflash';
516                fl.style.left = end[0] + 'px'; fl.style.top = end[1] + 'px';
517                pinLayer.appendChild(fl);
518                setTimeout(function(){ fl.remove(); }, 1100);
519                [ [760, 0, .8], [520, 300, .55], [340, 620, .4], [190, 950, .28] ].forEach(function(r){
520                  setTimeout(function(){
521                    var rp = document.createElement('div');
522                    rp.className = 'kusu-vripple';
523                    rp.style.left = end[0] + 'px'; rp.style.top = end[1] + 'px';
524                    rp.style.setProperty('--sz', r[0] + 'px');
525                    rp.style.opacity = r[2];
526                    pinLayer.appendChild(rp);
527                    rp.style.setProperty('--dur', '5.2s');
528                    setTimeout(function(){ rp.remove(); }, 5600);
529                  }, r[1]);
530                });
531                var T = 'translate(' + dx + 'px,' + dy + 'px)';
532                leafV.style.transform = T + ' rotate(300deg)';
533                leafV.style.opacity = .8;
534                leafV.animate([
535                  { transform: T + ' rotate(300deg)', opacity: .8 },
536                  { transform: 'translate(' + (dx + 10) + 'px,' + (dy + 2) + 'px) rotate(315deg)', opacity: 0 }
537                ], { duration: 1000, easing: 'ease-out' }).onfinish = function(){
538                  leafV.style.opacity = 0; leafV.style.transform = '';
539                };
540              };
541            }
542            setTimeout(dropLeafV, 2000);
543            setInterval(dropLeafV, 9000);
544          }
545        })();
546
547        (function(){
548          var wrap = document.createElement('div');
549          wrap.className = 'kusu-stars';
550          var S = [
551            [2,18,1,.5],[5,62,1,.35],[8,30,1.5,.55],[11,74,1,.3],[14,12,1,.45],[17,48,1,.35],
552            [20,26,1.5,.5],[23,66,1,.3],[26,8,1,.4],[29,40,1,.3],[32,56,1,.35],[35,20,2,.55],
553            [38,72,1,.3],[41,34,1,.4],[44,10,1,.35],[47,52,1.5,.45],[50,24,1,.3],[53,64,1,.35],
554            [56,14,1,.4],[59,44,1,.3],[62,70,1.5,.4],[65,28,1,.35],[68,54,1,.3],[71,16,2,.5],
555            [74,38,1,.35],[77,60,1,.3],[80,22,1,.4],[83,48,1.5,.45],[86,10,1,.35],[89,68,1,.3],
556            [92,32,1,.45],[95,18,1.5,.5],[97,56,1,.3],[7,88,1,.25],[27,84,1,.25],[49,90,1,.25],
557            [69,86,1,.25],[90,84,1,.25],[13,94,1,.2],[57,96,1,.2]
558          ];
559          S.forEach(function(s, i){
560            var el = document.createElement('span');
561            el.className = 'kusu-star';
562            el.style.left = s[0] + '%';
563            el.style.top = s[1] + '%';
564            el.style.width = el.style.height = s[2] + 'px';
565            el.style.setProperty('--o', s[3]);
566            el.style.setProperty('--tw', (5 + (i % 5) * 1.3).toFixed(1) + 's');
567            el.style.setProperty('--twd', ((i % 7) * 0.9).toFixed(1) + 's');
568            wrap.appendChild(el);
569          });
570          hero.insertBefore(wrap, canvas);
571
572          var mw = document.createElement('div');
573          mw.className = 'kusu-motes';
574           
575          var CPAL = [
576            ['#aef0e8','rgba(150,235,225,.55)','rgba(140,220,230,.22)'],
577            ['#f4e3a4','rgba(240,220,150,.55)','rgba(235,210,140,.22)'],
578            ['#9fd8f0','rgba(150,210,240,.55)','rgba(140,200,235,.22)'],
579            ['#b0f0c8','rgba(160,235,190,.5)','rgba(150,225,180,.2)']
580          ];
581          var M = [
582            [6,78,4,.6,21,0,150,14,0],[13,55,3,.48,24,3,130,10,2],[21,84,4.5,.66,18,6,170,16,1],
583            [28,62,3,.44,26,1,110,8,0],[36,80,4,.56,20,9,150,12,3],[44,58,3.5,.5,23,4,125,10,1],
584            [52,86,4,.64,19,11,160,15,0],[60,64,3,.42,27,2,105,8,2],[67,82,4.5,.68,17,7,175,18,0],
585            [74,57,3.5,.5,25,12,120,9,1],[81,79,4,.58,21,5,145,13,3],[88,66,3,.44,28,8,110,8,0],
586            [94,83,4,.6,20,13,155,14,2],[32,38,3,.38,29,10,95,7,0],[58,34,3,.36,30,14,90,6,0],[85,40,3.5,.42,27,15,100,8,1],
587            [3,45,2.5,.34,26,17,120,9,2],[10,88,4,.6,19,2,165,15,0],[17,68,3,.42,24,8,125,10,3],
588            [25,44,2.5,.36,28,5,105,7,1],[33,90,4.5,.64,18,12,175,17,0],[41,72,3,.44,23,15,130,11,2],
589            [49,50,2.5,.36,27,7,110,8,0],[57,88,4,.62,19,3,160,15,1],[64,46,2.5,.34,29,9,100,7,3],
590            [71,90,4,.6,18,14,170,16,0],[78,50,3,.4,25,6,115,9,2],[91,88,4,.58,20,10,150,14,0],
591            [46,26,6,.5,34,4,80,10,0],[69,30,5.5,.46,36,11,75,9,1]
592          ];
593          M.forEach(function(m){
594            var o = document.createElement('span'); o.className = 'kusu-mote';
595            o.style.left = m[0] + '%'; o.style.top = m[1] + '%';
596            o.style.setProperty('--sz', m[2] + 'px');
597            o.style.setProperty('--o', m[3]);
598            o.style.setProperty('--dur', m[4] + 's');
599            o.style.setProperty('--dl', '-' + m[5] + 's');
600            o.style.setProperty('--rise', m[6] + 'px');
601            o.style.setProperty('--sw', m[7] + 'px');
602            o.style.setProperty('--swd', (4 + m[7]/4) + 's');
603            var c = CPAL[m[8] || 0];
604            o.style.setProperty('--c', c[0]);
605            o.style.setProperty('--cg', c[1]);
606            o.style.setProperty('--cg2', c[2]);
607            var inner = document.createElement('i');
608            o.appendChild(inner); mw.appendChild(o);
609          });
610          hero.insertBefore(mw, canvas.nextSibling);
611        })();
612
613        var KW = null;
614        if (!VIDEO_MODE) KW = (function(){
615          var gl = canvas.getContext('webgl', { alpha:true, antialias:false, premultipliedAlpha:true });
616          if (!gl || reduced) { canvas.style.display='none'; return null; }
617
618          var MAXR = 16;
619          var VERT = 'attribute vec2 aPos; void main(){ gl_Position = vec4(aPos,0.,1.); }';
620          var FRAG = [
621            'precision highp float;',
622            'uniform vec2  uRes;',
623            'uniform float uTime;',
624            'uniform vec4  uRipples[' + MAXR + '];',   
625            'uniform vec2  uMouseP;',
626            'uniform float uMouseOn;',
627            'uniform sampler2D uTree;',
628            'uniform vec3  uTreeGeo;',
629            'uniform float uTreeX;',                 
630            'uniform vec3  uZenith; uniform vec3 uHorizon; uniform vec3 uDeepA; uniform vec3 uDeepB;',
631            'uniform vec3  uTintA; uniform vec3 uTintB;',
632            'uniform vec3  uLightDir; uniform vec3 uLightCol;',
633            'const vec3 RO = vec3(0.0, 1.05, 4.0);',
634            'float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453123); }',
635            'float noise(vec2 p){ vec2 i=floor(p); vec2 f=fract(p); vec2 u=f*f*(3.0-2.0*f);',
636            '  return mix(mix(hash(i),hash(i+vec2(1.,0.)),u.x), mix(hash(i+vec2(0.,1.)),hash(i+vec2(1.,1.)),u.x), u.y); }',
637            'vec3 camRay(vec2 uv){',
638            '  vec2 ndc = uv*2.0-1.0; ndc.x *= uRes.x/uRes.y;',
639            '  vec3 fw = normalize(vec3(0.0,-0.26,-1.0));',
640            '  vec3 rt = normalize(cross(fw, vec3(0.0,1.0,0.0)));',
641            '  vec3 up = cross(rt, fw);',
642            '  return normalize(fw + ndc.x*rt*0.62 + ndc.y*up*0.62);',
643            '}',
644            'float hf(vec2 p){',
645            '  float t = uTime; float h = 0.0;',
646            '  h += sin(p.x*0.55 + t*0.50)*0.042;',
647            '  h += sin(dot(p, vec2(0.38,0.47)) + t*0.38)*0.032;',
648            '  h += (noise(p*1.1 + vec2(t*0.16, t*0.11)) - 0.5)*0.044;',
649            '  h += (noise(p*3.2 + vec2(-t*0.26, t*0.2)) - 0.5)*0.018;',
650            '  for (int i=0;i<' + MAXR + ';i++){',
651            '    float age = uTime - uRipples[i].z;',
652            '    if (age < 0.0 || age > 9.0 || uRipples[i].w <= 0.0) continue;',
653            '    float d = length(p - uRipples[i].xy);',
654            '    float r = age*0.85;',
655            '    float band = exp(-pow((d-r)*2.4, 2.0));',
656            '    float decay = exp(-age*0.5)*exp(-d*0.28);',
657            '    h += sin((d-r)*7.5)*band*decay*0.20*uRipples[i].w;',
658            '    h += exp(-d*d*9.0) * exp(-age*3.2) * 0.10 * uRipples[i].w;',
659            '    h += exp(-d*d*14.0) * exp(-age*3.5) * 0.60 * uRipples[i].w;',
660            '  }',
661            '  float md = length(p - uMouseP);',
662            '  h += uMouseOn * exp(-md*md*2.4)*0.020*sin(uTime*2.6);',
663            '  return h;',
664            '}',
665            'vec3 skyCol(vec3 rd){',
666            '  float hz = pow(clamp(1.0 - rd.y*2.4, 0.0, 1.0), 2.0);',
667            '  return mix(uZenith, uHorizon, hz);',
668            '}',
669            'void main(){',
670            '  vec2 uv = gl_FragCoord.xy / uRes;',
671            '  vec3 rd = camRay(uv);',
672            '  if (rd.y > -0.005) { gl_FragColor = vec4(0.0); return; }',
673            '  float t = -RO.y / rd.y;',
674            '  vec3 p = RO + rd*t;',
675            '  float e = 0.05;',
676            '  float h0 = hf(p.xz);',
677            '  float hx = hf(p.xz + vec2(e,0.0));',
678            '  float hz2 = hf(p.xz + vec2(0.0,e));',
679            '  vec3 n = normalize(vec3(h0-hx, e*1.6, h0-hz2));',
680            '  vec3 rr = reflect(rd, n);',
681            '  rr.y = abs(rr.y);',
682            '  float dist = length(p - RO);',
683            '  float fres = 0.10 + 0.90*pow(1.0 - clamp(dot(-rd, n), 0.0, 1.0), 5.0);',
684            '  vec3 col = mix(uDeepB, uDeepA, exp(-dist*0.16));',
685            '  col += skyCol(rr)*fres*0.6;',
686             
687            '  if (abs(rr.z) > 1e-4) {',
688            '    float tt = (uTreeGeo.z - p.z) / rr.z;',
689            '    if (tt > 0.0) {',
690            '      vec3 hit = p + rr*tt;',
691            '      if (abs(hit.x - uTreeX) < uTreeGeo.x && hit.y > 0.0 && hit.y < uTreeGeo.y) {',
692            '        vec2 tuv = vec2(((hit.x - uTreeX)/uTreeGeo.x + 1.0)*0.5, hit.y/uTreeGeo.y);',
693            '        float a = texture2D(uTree, vec2(tuv.x, 1.0 - tuv.y)).a;',
694            '        vec3 gold = mix(uTintA, uTintB, tuv.y*0.85);',
695            '        float belowPx = (1.0 - uv.y) * uRes.y;',
696            '        float fade = (1.0 - smoothstep(200.0, 430.0, belowPx)) * (0.45 + 0.55*fres);',
697            '        col += gold * a * fade * 1.15;',
698            '      }',
699            '    }',
700            '  }',
701            '  float contact = exp(-pow((p.x - uTreeX)/(uTreeGeo.x*0.9), 2.0)) * exp(-pow(rd.y*70.0, 2.0));',
702            '  col += uLightCol * contact * 0.22;',
703            '  for (int j=0;j<' + MAXR + ';j++){',
704            '    float sage = uTime - uRipples[j].z;',
705            '    if (sage < 0.0 || sage > 1.4 || uRipples[j].w < 0.6) continue;',
706            '    float sd = length(p.xz - uRipples[j].xy);',
707            '    col += vec3(0.85,0.92,1.0) * exp(-sd*sd*20.0) * exp(-sage*3.0) * 0.5 * uRipples[j].w;',
708            '  }',
709            '  float spec = pow(max(dot(rr, uLightDir), 0.0), 520.0
709);',
710            '  col += uLightCol * spec * 0.30;',
711            '  float hzf = clamp(1.0 + rd.y*10.0, 0.0, 1.0);',
712            '  col = mix(col, uHorizon, hzf*hzf*0.55);',
713            '  col += vec3(0.60,0.68,0.72) * exp(-pow(rd.y*34.0, 2.0)) * 0.10;',
714            '  gl_FragColor = vec4(col, 1.0);',
715            '}'
716          ].join('\n');
717
718          function sh(type, s){ var o = gl.createShader(type); gl.shaderSource(o, s); gl.compileShader(o);
719            if (!gl.getShaderParameter(o, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(o)); return null; } return o; }
720          var prog = gl.createProgram();
721          gl.attachShader(prog, sh(gl.VERTEX_SHADER, VERT));
722          gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FRAG));
723          gl.linkProgram(prog);
724          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { console.error(gl.getProgramInfoLog(prog)); canvas.style.display='none'; return null; }
725          gl.useProgram(prog);
726          var buf = gl.createBuffer();
727          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
728          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW);
729          var aPos = gl.getAttribLocation(prog, 'aPos');
730          gl.enableVertexAttribArray(aPos);
731          gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
732          var U = {};
733          ['uRes','uTime','uMouseP','uMouseOn','uTree','uTreeGeo','uTreeX','uZenith','uHorizon','uDeepA','uDeepB','uTintA','uTintB','uLightDir','uLightCol','uRipples']
734            .forEach(function(k){ U[k] = gl.getUniformLocation(prog, k); });
735
736          var tex = gl.createTexture();
737          var img = new Image();
738          img.onload = function(){
739            gl.bindTexture(gl.TEXTURE_2D, tex);
740            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
741            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
742            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
743            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
744            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
745            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
746          };
747          img.src = './assets/logo-tree-alpha.png';
748          gl.activeTexture(gl.TEXTURE0);
749          gl.bindTexture(gl.TEXTURE_2D, tex);
750          gl.uniform1i(U.uTree, 0);
751
752          var RO = [0, 1.05, 4.0];
753          function basis(w, hgt){
754            var fw = norm3([0,-0.26,-1]);
755            var rt = norm3(cross(fw, [0,1,0]));
756            var up = cross(rt, fw);
757            return { fw:fw, rt:rt, up:up, ar: w/hgt };
758          }
759          function norm3(v){ var l = Math.hypot(v[0],v[1],v[2]); return [v[0]/l, v[1]/l, v[2]/l]; }
760          function cross(a,b){ return [a[1]*b[2]-a[2]*b[1], a[2]*b[0]-a[0]*b[2], a[0]*b[1]-a[1]*b[0]]; }
761          function rayFromPixel(px, py, w, hgt){
762            var B = basis(w, hgt);
763            var nx = (px/w*2-1) * B.ar, ny = ((1 - py/hgt)*2 - 1);
764            return norm3([ B.fw[0] + nx*B.rt[0]*0.62 + ny*B.up[0]*0.62,
765                           B.fw[1] + nx*B.rt[1]*0.62 + ny*B.up[1]*0.62,
766                           B.fw[2] + nx*B.rt[2]*0.62 + ny*B.up[2]*0.62 ]);
767          }
768          function projectPoint(P, w, hgt){    
769            var B = basis(w, hgt);
770            var v = [P[0]-RO[0], P[1]-RO[1], P[2]-RO[2]];
771            var c = v[0]*B.fw[0]+v[1]*B.fw[1]+v[2]*B.fw[2];
772            var a = v[0]*B.rt[0]+v[1]*B.rt[1]+v[2]*B.rt[2];
773            var b = v[0]*B.up[0]+v[1]*B.up[1]+v[2]*B.up[2];
774            var nx = a/(0.62*c) / B.ar, ny = b/(0.62*c);
775            return [ (nx+1)/2*w, (1-(ny+1)/2)*hgt ];
776          }
777          function screenToPlane(px, py, w, hgt){
778            var rd = rayFromPixel(px, py, w, hgt);
779            if (rd[1] >= -0.001) return null;
780            var t = -RO[1]/rd[1];
781            return [ RO[0]+rd[0]*t, RO[2]+rd[2]*t ];
782          }
783
784          var ripples = new Float32Array(MAXR*4);
785          for (var i=0;i<MAXR;i++) ripples[i*4+3] = 0;
786          var rHead = 0, t0 = performance.now();
787          function now(){ return (performance.now() - t0)/1000; }
788          function drip(x, z, w){
789            ripples[rHead*4] = x; ripples[rHead*4+1] = z;
790            ripples[rHead*4+2] = now(); ripples[rHead*4+3] = w;
791            rHead = (rHead+1) % MAXR;
792          }
793
794          var treeGeo = [1.5, 2.6, -2.2];
795          var treeX = 0;
796          var mouseP = [0,0], mouseOn = 0;
797
798          function hex2rgb(h){ h = h.trim().replace('#','');
799            return [parseInt(h.substr(0,2),16)/255, parseInt(h.substr(2,2),16)/255, parseInt(h.substr(4,2),16)/255]; }
800          var pal = {};
801          function setPalette(){
802            pal.zenith  = [0.045, 0.060, 0.070];
803            pal.horizon = [0.110, 0.145, 0.160];
804            pal.deepA   = [0.055, 0.072, 0.082];
805            pal.deepB   = [0.022, 0.030, 0.038];
806          }
807          setPalette('#0c1210', '#05080a');
808          var tint = { a:[0.09,0.14,0.11], b:[0.65,0.80,0.70] };    
809          function setTreeTint(a, b){ tint = { a:a, b:b }; }
810
811          function layout(){
812            var heroR = hero.getBoundingClientRect();
813            var treeR = treeEl.getBoundingClientRect();
814            var sink = treeR.height * 0.09;
815            var treeBottom = treeR.bottom - heroR.top - sink;
816            
817            var probeH = 1000, k = 0;
818            for (var py=0; py<probeH; py++){
819              var rd = rayFromPixel(heroR.width/2, py, heroR.width, probeH);
820              if (rd[1] < -0.005) { k = py/probeH; break; }
821            }
822            var top = (treeBottom - k*heroR.height) / (1 - k);
823            if (top < 0) top = 0;
824            var h = heroR.height - top;
825            canvas.style.top = top + 'px';
826            canvas.style.height = h + 'px';
827            var dpr = Math.min(window.devicePixelRatio || 1, 1.5);
828            canvas.width  = Math.round(heroR.width * dpr);
829            canvas.height = Math.round(h * dpr);
830            gl.viewport(0,0,canvas.width, canvas.height);
831            
832            var zT; var lo=-6.0, hi=-0.8;
833            for (var it=0; it<40; it++){
834              zT = (lo+hi)/2;
835              var sy = projectPoint([0,0,zT], heroR.width, h)[1] + top;
836              if (sy > treeBottom) hi = zT; else lo = zT;
837            }
838            var p0 = projectPoint([0,0,zT], heroR.width, h);
839            var p1 = projectPoint([1,0,zT], heroR.width, h);
840            var ppu = Math.abs(p1[0]-p0[0]);
841            var halfW = (treeR.width/2) / ppu;
842            var p2 = projectPoint([0,1,zT], heroR.width, h);
843            var ppv = Math.abs(p2[1]-p0[1]);
844            var treeH = treeR.height / ppv;
845            treeGeo = [halfW, treeH, zT];
846            treeX = ((treeR.left + treeR.width/2 - heroR.left) - p0[0]) / ppu;
847            return { top: top, h: h, w: heroR.width, ppu: ppu, cx: p0[0], zT: zT, horizonY: treeBottom };
848          }
849          var L = layout();
850          window.addEventListener('resize', function(){ L = layout(); });
851          if ('ResizeObserver' in window) new ResizeObserver(function(){ L = layout(); }).observe(hero);
852          if (document.fonts && document.fonts.ready) document.fonts.ready.then(function(){ L = layout(); });
853          window.addEventListener('load', function(){ L = layout(); });
854
855          var running = true;
856          document.addEventListener('visibilitychange', function(){ running = !document.hidden; });
857          if ('IntersectionObserver' in window) {
858            new IntersectionObserver(function(en){ running = en[0].isIntersecting && !document.hidden; })
859              .observe(canvas);
860          }
861
862          function frame(){
863            requestAnimationFrame(frame);
864            if (!running) return;
865            gl.uniform2f(U.uRes, canvas.width, canvas.height);
866            gl.uniform1f(U.uTime, now());
867            gl.uniform4fv(U.uRipples, ripples);
868            gl.uniform2f(U.uMouseP, mouseP[0], mouseP[1]);
869            gl.uniform1f(U.uMouseOn, mouseOn);
870            gl.uniform3f(U.uTreeGeo, treeGeo[0], treeGeo[1], treeGeo[2]);
871            gl.uniform1f(U.uTreeX, treeX);
872            gl.uniform3fv(U.uZenith, pal.zenith);
873            gl.uniform3fv(U.uHorizon, pal.horizon);
874            gl.uniform3fv(U.uDeepA, pal.deepA);
875            gl.uniform3fv(U.uDeepB, pal.deepB);
876            gl.uniform3fv(U.uTintA, tint.a);
877            gl.uniform3fv(U.uTintB, tint.b);
878            gl.uniform3fv(U.uLightDir, norm3([0.18, 0.46, -0.75]));
879            gl.uniform3f(U.uLightCol, 0.88, 0.96, 0.9);
880            gl.drawArrays(gl.TRIANGLES, 0, 3);
881          }
882          frame();
883
884          var lastWake = 0;
885          hero.addEventListener('pointermove', function(ev){
886            var heroR = hero.getBoundingClientRect();
887            var cx = ev.clientX - heroR.left, cy = ev.clientY - heroR.top - L.top;
888            if (cy < 0) { mouseOn = 0; return; }
889            var pp = screenToPlane(cx, cy, L.w, L.h);
890            if (!pp) { mouseOn = 0; return; }
891            mouseP = pp;
891 mouseOn = 1;
892            var t = performance.now();
893            if (t - lastWake > 260) { drip(pp[0], pp[1], 0.22); lastWake = t; }
894          });
895          hero.addEventListener('pointerleave', function(){ mouseOn = 0; });
896
897          return {
898            dripAtPoint: function(clientX, clientY, w){
899              var heroR = hero.getBoundingClientRect();
900              var cx = clientX - heroR.left, cy = clientY - heroR.top - L.top;
901              var pp = screenToPlane(cx, cy, L.w, L.h);
902              if (!pp) {
903                var x = (clientX - heroR.left - L.cx) / L.ppu;
904                pp = [Math.max(treeX - treeGeo[0]*1.3, Math.min(treeX + treeGeo[0]*1.3, x)), L.zT + 0.12];
905              }
906              drip(pp[0], pp[1], w || 1.0);
907            },
908            setPalette: setPalette,
909            setTreeTint: setTreeTint,
910            waterTopY: function(){ return L.top; },
911            horizonHeroY: function(){ return L.horizonY; }
912          };
913        })();
914
915        var leaf = document.getElementById('kusuLeaf');
916        function dropLeaf(){
917          if (reduced) return;
918          var startX = 30 + Math.random()*40;
919          var driftX = (Math.random()*36 - 18);
920          var heroR = hero.getBoundingClientRect();
921          var leafR0, fallPx;
922          leaf.style.left = startX + '%';
923          leaf.style.top = '26%';
924          leafR0 = leaf.getBoundingClientRect();
925          var tR = treeEl.getBoundingClientRect();
926          var hzY = KW ? (heroR.top + KW.horizonHeroY()) : (tR.bottom - tR.height*0.09);
927          var dip = 16 + Math.random()*14;             
928          fallPx = Math.max(60, hzY + dip - leafR0.top);
929          var anim = leaf.animate([
930            { transform:'translate(0,0) rotate(0deg)',            opacity:0 },
931            { transform:'translate(' + (driftX*0.3) + 'px,' + (fallPx*0.18) + 'px) rotate(70deg)', opacity:.95, offset:.14 },
932            { transform:'translate(' + (driftX*0.7) + 'px,' + (fallPx*0.62) + 'px) rotate(200deg)', opacity:.9, offset:.6 },
933            { transform:'translate(' + driftX + 'px,' + fallPx + 'px) rotate(300deg)', opacity:.8 }
934          ], { duration: 6600, easing:'cubic-bezier(.42,.08,.28,.99)' });
935          anim.onfinish = function(){
936            var lr = leaf.getBoundingClientRect();    
937            var lx = lr.left + lr.width/2 + driftX;
938            var ly = lr.top + fallPx + 6;
939            if (KW) KW.dripAtPoint(lx, ly, 1.0);
940             
941            var T0 = 'translate(' + driftX + 'px,' + fallPx + 'px)';
942            leaf.style.transform = T0 + ' rotate(300deg)';
943            leaf.style.opacity = .8;
944            leaf.animate([
945              { transform: T0 + ' rotate(300deg)', opacity:.8 },
946              { transform: 'translate(' + (driftX + 7) + 'px,' + (fallPx + 1) + 'px) rotate(312deg)', opacity:.45, offset:.55 },
947              { transform: 'translate(' + (driftX + 12) + 'px,' + (fallPx + 2) + 'px) rotate(318deg)', opacity:0 }
948            ], { duration:1100, easing:'ease-out' }).onfinish = function(){
949              leaf.style.opacity = 0; leaf.style.transform = '';
950            };
951          };
952        }
953        if (!reduced && !VIDEO_MODE) {
954          setTimeout(dropLeaf, 2600);
955          setInterval(dropLeaf, 13000);
956          var onScrollFx = function(){
957            var sy = window.scrollY || document.body.scrollTop || 0;
958            var y = Math.min(1, sy / window.innerHeight);
959            scene.style.transform = 'translateY(' + (y * 24) + 'px)';
960            scene.style.opacity = String(1 - y * .3);
961          };
962          window.addEventListener('scroll', onScrollFx, { passive:true });
963          document.body.addEventListener('scroll', onScrollFx, { passive:true });
964        }
965      })();
966    </script>
966
967  </section>
968
969  <section class="section" id="vol3Launch">
970    <style>
971      #vol3Launch .reissue-card{ background:linear-gradient(135deg, #fdf7e6 0%, #f5e6bd 100%);
972        border:1px solid rgba(184,134,11,.32); }
973      #vol3Launch .reissue-eyebrow{ color:#8a6508; }
974      #vol3Launch .reissue-title{ color:#241c08; }
975      #vol3Launch .reissue-accent{ color:#b8860b; }
976      #vol3Launch .reissue-lead{ color:rgba(36,28,8,.78); }
977      #vol3Launch .reissue-lead .vol3-catch{ display:block; font-family:var(--mincho,serif); font-weight:700;
978        font-size:1.15em; color:#241c08; margin-bottom:10px; letter-spacing:.04em; }
979      #vol3Launch .reissue-points li span{ color:rgba(36,28,8,.82); }
980      #vol3Launch .reissue-points li i{ background:#b8860b; color:#fff; }
981      #vol3Launch .reissue-note{ color:rgba(36,28,8,.55); }
982      #vol3Launch .reissue-btn{ background:#241c08; color:#f6efd9; }
983      #vol3Launch .reissue-btn:hover{ background:#b8860b; }
984      #vol3Launch .reissue-btn.alt{ background:transparent; color:#241c08; border:1px solid rgba(36,28,8,.35); }
985      #vol3Launch .reissue-btn.alt:hover{ background:transparent; border-color:#b8860b; color:#8a6508; }
986      #vol3Launch{ scroll-margin-top:90px; }
987      #vol3Launch .reissue-covers{ justify-content:center; }
988      #vol3Launch .reissue-covers img{ width:auto; max-width:min(340px, 80%);
989        border-radius:0; box-shadow:none;
990        filter:drop-shadow(0 26px 46px rgba(120,86,10,.45)); }
991    </style>
992    <div class="container">
993      <div class="reissue-card">
994        <div class="reissue-copy">
995          <p class="reissue-eyebrow">Now on Sale / 最新刊</p>
996          <h2 class="reissue-title">第3巻『黄金のイチョウと拡張現実の武者』<br><span class="reissue-accent">発売中</span>。</h2>
997          <p class="reissue-lead"><span class="vol3-catch">消えたものは、二度と戻らない。――そう、思っていた。</span>秋の加須で、少年探偵団の"本当の始まり"が動き出す。</p>
998          <div class="reissue-ctas">
999            <a href="./books/shonen-tantei-03/" class="reissue-btn">第3巻について詳しく →</a>
1000            <a href="./shonen-tantei/" class="reissue-btn alt">シリーズページで詳しく →</a>
1001            <a href="./books/#order" class="reissue-btn alt">ご購入・ご注文の方法 →</a>
1002          </div>
1003        </div>
1004        <div class="reissue-covers">
1005          <img src="./assets/shonen-tantei-03-cover.webp" alt="少年探偵のデジタル・スケッチパッド 第3巻『黄金のイチョウと拡張現実の武者』表紙" loading="lazy">
1006        </div>
1007      </div>
1008    </div>
1009  </section>
1010
1011
1012
1013  
1014
1015  <section class="section">
1016    <div class="container">
1017      <div class="section-head center">
1018        <p class="eyebrow">Featured Series</p>
1019        <h2 class="section-title">『少年探偵の<br>デジタル・<span class="accent">スケッチパッド</span>』</h2>
1020        <p class="section-kicker">楠柾の代表作シリーズ。加須を舞台に、謎を追いながら町の記憶と人の心を描く物語。全10巻構想で進行中。フルカラーの漫画版第1巻も刊行しています。世界観・登場人物・MVは、シリーズ特設ページにまとめています。</p>
1021      </div>
1022      <div class="series-hero" style="margin:32px auto;max-width:720px">
1023        <img src="./assets/hero-sub.webp" alt="『少年探偵のデジタル・スケッチパッド』シリーズ世界観">
1024      </div>
1025      <div style="text-align:center;margin-top:24px">
1026        <a href="./shonen-tantei/" class="btn btn-primary"><span>シリーズ特設ページへ →</span></a>
1027      </div>
1028    </div>
1029  </section>
1030
1031  <section class="section section-alt">
1032    <div class="container">
1033      <div class="section-head center">
1034        <p class="eyebrow">Latest Reactions</p>
1035        <h2 class="section-title">読者・<span class="accent">メディアの反応</span></h2>
1036        <p class="section-kicker">加須の地元書店・図書館・新聞・プレスから届いた反響。地に足ã
1036®ã¤ã„た物語が、ひとつずつ広がっています。</p>
1037      </div>
1038      <div class="concept-grid">
1039        <div class="concept-card">
1040          <p class="concept-num">01</p>
1041          <h3>加須市立図書館 全4館</h3>
1042          <p><span class="nobr">加須・おおとね・</span><wbr><span class="nobr">北川辺・騎西の</span><wbr>4館で<wbr>配架。<span class="nobr">2026年8月24日</span>までに、4館で<wbr><strong>累計85回<wbr>貸し出されて<wbr>います</strong>。地元の<wbr>方の<wbr>手から<wbr>手へ、物語が<wbr>回り続けて<wbr>います。</p>
1043        </div>
1044        <div class="concept-card">
1045          <p class="concept-num">02</p>
1046          <h3>埼玉新聞におはなし会の記事</h3>
1047          <p><span class="nobr">2026年8月2日</span>の<wbr>埼玉新聞に、加須児童館での<wbr>おはなし会の<wbr>様子が<wbr>掲載されました。地元紙の<wbr>地域面で<wbr>紹介いただいて<wbr>います。</p>
1048        </div>
1049        <div class="concept-card">
1050          <p class="concept-num">03</p>
1051          <h3>DreamNews アクセスランキング 1位</h3>
1052          <p>4月23日と<wbr>5月7日に<wbr>配信された<wbr>2回の<wbr><span class="nobr">ニュース</span>が、いずれも<wbr><strong><span class="nobr">DreamNewsの</span><wbr><span class="nobr">アクセスランキング</span><wbr>1位を<wbr>2回連続で<wbr>獲得</strong>。<span class="nobr">Googleニュース</span>経由で<wbr>加須市内外の<wbr>方々に<wbr>届きました。</p>
1053        </div>
1054        <div class="concept-card">
1055          <p class="concept-num">04</p>
1056          <h3>加須市物産観光協会で販売開始</h3>
1057          <p>2026年6月、加須市物産観光協会にて<wbr><span class="nobr">シリーズ</span>3冊の<wbr>取り扱いが<wbr>始まりました。<strong>協会初の<wbr>書籍販売</strong>として<wbr>紹介されて<wbr>います。加須の<wbr>お土産と<wbr>一緒に、物語も。</p>
1058        </div>
1059        <div class="concept-card">
1060          <p class="concept-num">05</p>
1061          <h3>加須と、そのまわりでお取り扱い開始</h3>
1062          <p>2026年8月の新規取扱店</p>
1063          <ul class="react-list">
1064            <li>くまざわ書店 鷲宮店<wbr><span class="nobr">(アリオ鷲宮)</span></li>
1065            <li>くまざわ書店 久喜店<wbr><span class="nobr">(クッキープラザ)</span></li>
1066            <li><span class="nobr">アカデミア菖蒲店</span><wbr><span class="nobr">(モラージュ菖蒲)</span></li>
1067            <li><span class="nobr">TSUTAYA大利根店</span><wbr><span class="nobr">(カインズモール大利根)</span></li>
1068            <li>忍書房(行田)</li>
1069            <li>未来屋書店 羽生店<wbr><span class="nobr">(イオンモール羽生)</span></li>
1070            <li><span class="nobr">セキグチ書店</span><wbr>(古河)</li>
1071          </ul>
1072        </div>
1073        <div class="concept-card">
1074          <p class="concept-num">06</p>
1075          <h3>埼玉新聞に第3巻発刊の記事</h3>
1076          <p>2026年8月26日の埼玉新聞(地域面)</p>
1077          <ul class="react-list">
1078            <li>見出し<wbr><span class="nobr">「ご当地ミステリーで魅力発信」</span><wbr><span class="nobr">「楠さんが第3巻発刊」</span></li>
1079            <li>地元書店の<wbr>声として<wbr><span class="nobr">「今年一のヒット作」</span><wbr><span class="nobr">(カサモ関口商店)</span></li>
1080            <li>市内4館の<wbr>図書館で<wbr>8月24日までに<wbr>累計85回の<wbr>貸し出し</li>
1081            <li>8月から<wbr>全国の<wbr>書店で<wbr>取り寄せ<wbr>可能に</li>
1082          </ul>
1083        </div>
1084      </div>
1085      <p style="text-align:center;margin-top:36px"><a href="https://note.com/kusunoki_pub" class="btn btn-ghost" target="_blank" rel="noopener"><span>近況や制作の裏側は note で →</span></a></p>
1086    </div>
1087  </section>
1088
1089  <section id="stores" class="section store-photos">
1090    <div class="container">
1091      <div class="section-head center">
1092        <p class="eyebrow">Where to Find</p>
1093        <h2 class="section-title">読める・<span class="accent">買える場所</span></h2>
1094        <p class="section-kicker">
1094全国の書店、加須のまちなか、オンライン。加須市立図書館(全4館)でも読めます。</p>
1095      </div>
1096
1097      <div class="notice-band nationwide-band">
1098        <p class="notice-band-title">小説は、全国の書店でご注文いただけます。</p>
1099        <p class="notice-band-body">お近くの書店で、書名とISBNをお伝えください。</p>
1100        <ul class="isbn-list">
1101          <li><span class="isbn-title">第1巻『鯉のぼり職人が遺した町の誇り』</span><span class="isbn-code">ISBN 978-4-9914597-0-2</span></li>
1102          <li><span class="isbn-title">第2巻『廃墟の少女と夏の光る記憶』</span><span class="isbn-code">ISBN 978-4-9914597-1-9</span></li>
1103          <li><span class="isbn-title">第3巻『黄金のイチョウと拡張現実の武者』</span><span class="isbn-code">ISBN 978-4-9914597-3-3</span></li>
1104        </ul>
1105        <p class="isbn-pub">発行:クスノキ出版/発売元:紡出版</p>
1106        <p class="isbn-biz"><a href="./books/">書店・図書館の皆さまへ(在庫状況・ご注文方法)→</a></p>
1107      </div>
1108
1109      <h3 class="stores-layer-title">加須のまちなかで</h3>
1110      <p class="stores-compact">道の駅かぞわたらせ/加須市物産観光協会/カサモ(加須市本町)/ブックセンターやまと/TSUTAYA大利根店</p>
1111
1112      <div class="stores-nearby">
1113        <h3 class="stores-layer-title">加須のまわりでも</h3>
1114        <p class="stores-compact">未来屋書店 羽生店/アカデミア菖蒲店/くまざわ書店 鷲宮店/セキグチ書店/くまざわ書店 久喜店/忍書房/須原屋 熊谷店</p>
1115      </div>
1116
1117      <div class="stores-major">
1118        <h3 class="stores-layer-title">全国の大型書店にも</h3>
1119                <p>ジュンク堂書店、丸善、紀伊國屋書店、ブックファースト、埼玉県内の須原屋書店など、全国の大型書店にも置いていただいています。</p>
1120        <p class="stores-compact-note">各店の写真と地図、取扱店の数、探し方は <a href="./stores/">取扱店のご案内</a> にまとめています。</p>
1121      </div>
1122
1123      <div class="online-buy">
1124        <h3 class="online-buy-title">オンラインでも購入できます</h3>
1125        <div class="stores-grid online-grid">
1126          <a href="https://kusunokipub.official.ec/" target="_blank" rel="noopener" class="store-card store-card-link">
1127            <p class="store-tag">公式オンラインストア</p>
1128            <h3 class="store-name">クスノキ出版 公式オンラインストア</h3>
1129            <p class="store-desc">BASEで運営する公式ショップ。少年探偵シリーズ全タイトル取り扱い中。</p>
1130            <p class="store-link">公式ストアへ →</p>
1131          </a>
1132          <div class="store-card">
1133            <p class="store-tag">全国・Amazon</p>
1134            <h3 class="store-name">Amazon</h3>
1135            <p class="store-desc">紙の本とKindle電子書籍、どちらも全国へ。各書籍ページの購入リンクからどうぞ。</p>
1136          </div>
1137        </div>
1138      </div>
1139          <p style="text-align:center;margin-top:34px"><a href="./stores/" class="btn btn-ghost"><span>取扱店のご案内(一覧ページ)→</span></a></p>
1140    </div>
1141  </section>
1142
1143
1144
1145  
1146
1147  <section class="section section-alt">
1148    <div class="container">
1149      <div class="section-head center">
1150        <p class="eyebrow">Publisher</p>
1151        <h2 class="section-title"><span class="accent">クスノキ出版</span> × 紡出版</h2>
1152        <p class="section-kicker">作家・楠柾の著作を届ける「クスノキ出版」が発行し、ISBN登録・流通を担う「紡出版」が発売元となります。<br>地に根を張る物語だけが、遠くまで届くと信じています。</p>
1153      </div>
1154      <div class="labels-grid labels-grid-2">
1155        <div class="label-card is-kusunoki">
1156          <span class="label-mark">楠</span>
1157          <span class="label-role">発行</span>
1158          <div>
1159            <h3 class="label-name">クスノキ出版<span class="label-roma">Kusunoki Publishing</span></h3>
1160          </div>
1161          <p>作家・楠柾の著作を届ける発行元。児童文学から漫画まで、代表作『少年探偵のデジタル・スケッチパッド』シリーズを中心に、土地と記憶に根差した本を世に送り出します。</p>
1162        </div>
1163        <div class="label-card">
1164          <span class="label-mark">ç´¡</span>
1165          <span class="label-role">発売元</span>
1166          <div>
1167            <h3 class="label-name">紡出版<span class="label-roma">Tsumugi Publishing</span></h3>
1168          </div>
1169          <p>加須を拠点とする独立系出版社。ISBN登録と書店流通を担う発売元として、クスノキ出版の本を全国の書店・図書館へ届けます。</p>
1170        </div>
1171      </div>
1172    </div>
1173  </section>
1174
1175  <section class="section connect-section">
1176    <div class="container">
1177      <div class="section-head center">
1178        <p class="eyebrow">Connect</p>
1179        <h2 class="section-title">公式<span class="accent">SNS</span>で繋がる</h2>
1180        <p class="section-kicker">最新の活動・MV・コラムを各SNSで発信中。フォローお願いします。</p>
1181      </div>
1182      <div class="connect-grid">
1183        <a href="https://www.instagram.com/kusunoki_masaki/?hl=ja" target="_blank" rel="noopener" class="connect-card">
1184          <svg viewBox="0 0 24 24" class="connect-icon" aria-hidden="true" width="40" height="40"><path fill="currentColor" d="M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.42.56.22.96.48 1.38.9.42.42.68.82.9 1.38.17.42.37 1.06.42 2.23.06 1.26.07 1.64.07 4.85s0 3.6-.07 4.85c-.05 1.17-.25 1.8-.42 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.17-1.06.37-2.23.42-1.26.06-1.64.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.42-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.17-.42-.37-1.06-.42-2.23C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.85c.05-1.17.25-1.8.42-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.17 1.06-.37 2.23-.42C8.4 2.2 8.8 2.2 12 2.2M12 0C8.74 0 8.33 0 7.05.07 5.78.13 4.9.33 4.14.63c-.8.32-1.48.73-2.15 1.4C1.32 2.7.92 3.38.6 4.18c-.3.76-.5 1.64-.56 2.91C-.03 8.37 0 8.78 0 12s0 3.63.07 4.91c.06 1.27.26 2.15.56 2.91.32.8.73 1.48 1.4 2.15.67.67 1.35 1.08 2.15 1.4.76.3 1.64.5 2.91.56C8.37 23.97 8.78 24 12 24s3.63-.03 4.91-.07c1.27-.06 2.15-.26 2.91-.56.8-.32 1.48-.73 2.15-1.4.67-.67 1.08-1.35 1.4-2.15.3-.76.5-1.64.56-2.91.04-1.28.07-1.69.07-4.91s-.03-3.63-.07-4.91c-.06-1.27-.26-2.15-.56-2.91-.32-.8-.73-1.48-1.4-2.15C21.3 1.32 20.62.92 19.82.6c-.76-.3-1.64-.5-2.91-.56C15.63.03 15.22 0 12 0zm0 5.84A6.16 6.16 0 0 0 5.84 12 6.16 6.16 0 0 0 12 18.16 6.16 6.16 0 0 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 12 8a4 4 0 0 1 0 8zm6.4-10.4a1.44 1.44 0 1 0 0-2.88 1.44 1.44 0 0 0 0 2.88z"/></svg>
1185          <span class="connect-title">Instagram</span>
1186          <span class="connect-desc">リアルな活動・MVショート</span>
1187          <span class="connect-arrow">→</span>
1188        </a>
1189        <a href="https://note.com/kusunoki_pub" target="_blank" rel="noopener" class="connect-card">
1190          <svg viewBox="0 0 24 24" class="connect-icon" aria-hidden="true" width="40" height="40"><rect x="2" y="2" width="20" height="20" rx="4" fill="currentColor"/><path fill="#0f1a33" d="M7 7h2.4v1.4c.7-1 1.8-1.6 3.1-1.6 2.4 0 3.8 1.6 3.8 4.3V17h-2.6v-5.3c0-1.5-.7-2.3-1.9-2.3s-2.2 1-2.2 2.6V17H7V7z"/></svg>
1191          <span class="connect-title">note</span>
1192          <span class="connect-desc">楠柾の執筆コラム・裏話</span>
1193          <span class="connect-arrow">→</span>
1194        </a>
1195        <a href="https://www.youtube.com/@%E3%82%AF%E3%82%B9%E3%83%8E%E3%82%AD%E5%87%BA%E7%89%88" target="_blank" rel="noopener" class="connect-card">
1196          <svg viewBox="0 0 24 24" class="connect-icon" aria-hidden="true" width="40" height="40"><path fill="currentColor" d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4L15.8 12l-6.2 3.6z"/></svg>
1197          <span class="connect-title">YouTube</span>
1198          <span class="connect-desc">作品のMV</span>
1199          <span class="connect-arrow">→</span>
1200        </a>
1201      </div>
1202    </div>
1203  </section>
1204
1205</main>
1206
1207<div data-partial="footer"></div>
1208<script src="./_partials.js?v=202610021838"></script>
vendor: 1 bytes, line 1208
1208
1209<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"451a753b17a44db58e097ac804ef8d00","r":1,"spa":2}' crossorigin="anonymous"></script>
1209
1210</body>
1211</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.