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">å°èª¬ï¼ãï¼å·» çºå£²ä¸ï¼ãã¹ã¦ã®æ¼¢åã«ãµãããªä»ãï¼å°å¦æ ¡é«å¦å¹´ãã大人ã¾ã§</span></p> 340 <div class="kusu-minori" aria-label="ã·ãªã¼ãºã®å®ãï¼å ¨ï¼ï¼å·»ã®ãã¡ï¼å·»åè¡"> 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">ï¼ï¼ï¼ï¼å·»</span> 344 </div> 345 <div class="kusu-ctas"> 346 <a href="./books/shonen-tantei-01/#preview" class="btn btn-primary"><span>第ï¼å·»ã試ãèªã¿</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="å°èª¬ 第ï¼å·»"></button> 365 <button class="kusu-fruit f2" data-card="c2" aria-label="å°èª¬ 第ï¼å·»"></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="第ï¼å·» çºå£²ä¸"></button> 374 <div class="kusu-card c1"><img src="./assets/shonen-tantei-01-cover.webp" alt="å°èª¬ 第ï¼å·»"><em>å°èª¬ 第ï¼å·»</em></div> 375 <div class="kusu-card c2"><img src="./assets/shonen-tantei-02-cover.webp" alt="å°èª¬ 第ï¼å·»"><em>å°èª¬ 第ï¼å·»</em></div> 376 <div class="kusu-card c3"><img src="./assets/shonen-tantei-03-cover.webp" alt="å°èª¬ 第ï¼å·»"><em>å°èª¬ 第ï¼å·»</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="å°èª¬ 第ï¼å·»"><em>å°èª¬ 第ï¼å·»</em>', 438 c2: '<img src="./assets/shonen-tantei-02-cover.webp" alt="å°èª¬ 第ï¼å·»"><em>å°èª¬ 第ï¼å·»</em>', 439 c3: '<img src="./assets/shonen-tantei-03-cover.webp" alt="å°èª¬ 第ï¼å·»"><em>å°èª¬ 第ï¼å·»</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">第ï¼å·»ãé»éã®ã¤ãã§ã¦ã¨æ¡å¼µç¾å®ã®æ¦è ã<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">第ï¼å·»ã«ã¤ãã¦è©³ãã â</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">æ¥ æ¾ã®ä»£è¡¨ä½ã·ãªã¼ãºãå é ãèå°ã«ãè¬ã追ããªããçºã®è¨æ¶ã¨äººã®å¿ãæãç©èªãå ¨ï¼ï¼å·»æ§æ³ã§é²è¡ä¸ããã«ã«ã©ã¼ã®æ¼«ç»ç第ï¼å·»ãåè¡ãã¦ãã¾ããä¸ç観ã»ç»å ´äººç©ã»ï¼ï¼¶ã¯ãã·ãªã¼ãºç¹è¨ãã¼ã¸ã«ã¾ã¨ãã¦ãã¾ãã</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>å é å¸ç«å³æ¸é¤¨ å ¨ï¼é¤¨</h3> 1042 <p><span class="nobr">å é ã»ããã¨ãã»</span><wbr><span class="nobr">åå·è¾ºã»é¨è¥¿ã®</span><wbr>ï¼é¤¨ã§<wbr>é æ¶ã<span class="nobr">ï¼ï¼ï¼ï¼å¹´ï¼æï¼ï¼æ¥</span>ã¾ã§ã«ãï¼é¤¨ã§<wbr><strong>ç´¯è¨ï¼ï¼å<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">ï¼ï¼ï¼ï¼å¹´ï¼æï¼æ¥</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 ã¢ã¯ã»ã¹ã©ã³ãã³ã° ï¼ä½</h3> 1052 <p>ï¼æï¼ï¼æ¥ã¨<wbr>ï¼æï¼æ¥ã«<wbr>é ä¿¡ããã<wbr>ï¼åã®<wbr><span class="nobr">ãã¥ã¼ã¹</span>ãããããã<wbr><strong><span class="nobr">DreamNewsã®</span><wbr><span class="nobr">ã¢ã¯ã»ã¹ã©ã³ãã³ã°</span><wbr>ï¼ä½ã<wbr>ï¼åé£ç¶ã§<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>ï¼ï¼ï¼ï¼å¹´ï¼æãå é å¸ç©ç£è¦³å åä¼ã«ã¦<wbr><span class="nobr">ã·ãªã¼ãº</span>ï¼åã®<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>ï¼ï¼ï¼ï¼å¹´ï¼æã®æ°è¦åæ±åº</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>å¼çæ°èã«ç¬¬ï¼å·»çºåã®è¨äº</h3> 1076 <p>ï¼ï¼ï¼ï¼å¹´ï¼æï¼ï¼æ¥ã®å¼çæ°èï¼å°åé¢ï¼</p> 1077 <ul class="react-list"> 1078 <li>è¦åºã<wbr><span class="nobr">ããå½å°ãã¹ããªã¼ã§é åçºä¿¡ã</span><wbr><span class="nobr">ãæ¥ ããã第ï¼å·»çºåã</span></li> 1079 <li>å°å æ¸åºã®<wbr>声ã¨ãã¦<wbr><span class="nobr">ãä»å¹´ä¸ã®ãããä½ã</span><wbr><span class="nobr">ï¼ã«ãµã¢é¢å£ååºï¼</span></li> 1080 <li>å¸å ï¼é¤¨ã®<wbr>峿¸é¤¨ã§<wbr>ï¼æï¼ï¼æ¥ã¾ã§ã«<wbr>ç´¯è¨ï¼ï¼åã®<wbr>貸ãåºã</li> 1081 <li>ï¼æãã<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å ¨å½ã®æ¸åºãå é ã®ã¾ã¡ãªãããªã³ã©ã¤ã³ãå é å¸ç«å³æ¸é¤¨ï¼å ¨ï¼é¤¨ï¼ã§ãèªãã¾ãã</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">第ï¼å·»ãé¯ã®ã¼ãè·äººãéºããçºã®èªãã</span><span class="isbn-code">ISBN 978-4-9914597-0-2</span></li> 1102 <li><span class="isbn-title">第ï¼å·»ãå»å¢ã®å°å¥³ã¨å¤ã®å ãè¨æ¶ã</span><span class="isbn-code">ISBN 978-4-9914597-1-9</span></li> 1103 <li><span class="isbn-title">第ï¼å·»ãé»éã®ã¤ãã§ã¦ã¨æ¡å¼µç¾å®ã®æ¦è ã</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">ææ°ã®æ´»åã»ï¼ï¼¶ã»ã³ã©ã ãå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">ä½åã®ï¼ï¼¶</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.