{"id":80,"date":"2026-04-17T04:50:20","date_gmt":"2026-04-17T04:50:20","guid":{"rendered":"https:\/\/works.jouhounokatachi.com\/blog\/lp\/"},"modified":"2026-04-20T08:36:37","modified_gmt":"2026-04-20T08:36:37","slug":"lp","status":"publish","type":"page","link":"https:\/\/works.jouhounokatachi.com\/blog\/","title":{"rendered":"JO WORKS\uff5c\u60c5\u5831\u3092\u3001\u30ab\u30bf\u30c1\u306b\u3002"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&#038;family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&#038;family=Noto+Serif+JP:wght@300;400;500;600;700&#038;family=Noto+Sans+JP:wght@300;400;500&#038;display=swap\" rel=\"stylesheet\">\n<style id=\"jw-folio-v11\">\n\n\/* ==============================================\n   JO WORKS \u2014 Editorial Portfolio Monograph v11\n   Swiss Studio \u00d7 Paper Warmth \u00d7 Deep Ink\n   +Commission Sheet \/ +Peek FAQ \/ +Ghost Numerals\n   +Marquee Ticker \/ +Ink Meters \/ +Stamps\n   TETSU x Claude Design, 2026-04-20\n   ============================================== *\/\n\n\/* === 0. SWELL\/\u5168\u30c6\u30fc\u30de\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u6291\u5236 === *\/\n.jw-folio h1,.jw-folio h2,.jw-folio h3,.jw-folio h4,.jw-folio h5,.jw-folio h6{\n  background:transparent !important;background-color:transparent !important;background-image:none !important;\n  color:inherit !important;padding:0 !important;margin:0 !important;border:0 !important;\n  border-radius:0 !important;box-shadow:none !important;text-shadow:none !important;font-weight:inherit;\n}\n.jw-folio h1::before,.jw-folio h1::after,.jw-folio h2::before,.jw-folio h2::after,\n.jw-folio h3::before,.jw-folio h3::after,.jw-folio h4::before,.jw-folio h4::after,\n.jw-folio h5::before,.jw-folio h5::after,.jw-folio h6::before,.jw-folio h6::after{\n  display:none !important;content:none !important;background:transparent !important;border:0 !important;\n}\n.jw-folio .wp-block-heading{background:transparent !important;padding:0 !important;color:inherit !important}\n.jw-folio p{margin:0 0 .6em 0}\n.jw-folio p:last-child{margin-bottom:0}\n.jw-folio ul,.jw-folio ol{margin:0;padding:0;list-style:none}\n.jw-folio img{max-width:100%;height:auto;display:block}\n.jw-folio a{color:inherit !important;text-decoration:none}\n.jw-folio *{box-sizing:border-box}\n#post_slider,#main_visual,.p-postSlider,.p-mainVisual{display:none !important}\n.jw-folio-host .l-mainContent .post_content{max-width:none !important;padding:0 !important}\n.jw-folio-host .entry-header,.jw-folio-host .p-entryTitle,.jw-folio-host .c-entryMeta{display:none !important}\n.jw-folio-host .l-mainContent{padding:0 !important;max-width:none !important;width:100% !important}\n.jw-folio-host .l-container{max-width:none !important;width:100% !important}\n\n\/* === 1. Palette & Tokens === *\/\n.jw-folio{\n  --paper:#f4eddf;\n  --paper-2:#ebe2ce;\n  --paper-3:#ded2b6;\n  --ink:#1b1b1a;\n  --ink-2:#2d2c28;\n  --ink-soft:#55514a;\n  --ink-mute:#8a8578;\n  --rule:rgba(27,27,26,.18);\n  --rule-strong:rgba(27,27,26,.45);\n  --accent:#b8532d;\n  --accent-deep:#8a3b1e;\n  --accent-soft:#d38560;\n  --cream:#f9f3e5;\n\n  --serif-display:\"Fraunces\",serif;\n  --serif-body:\"Noto Serif JP\",serif;\n  --mono:\"IBM Plex Mono\",ui-monospace,Menlo,monospace;\n  --sans-jp:\"Noto Sans JP\",sans-serif;\n\n  position:relative;\n  color:var(--ink);\n  background:var(--paper);\n  font-family:var(--serif-body);\n  line-height:1.7;\n  font-feature-settings:\"palt\",\"pkna\",\"ss01\",\"ss02\";\n  hanging-punctuation:first last;\n  overflow-x:hidden;\n}\n\n\/* Paper grain *\/\n.jw-folio::before{\n  content:\"\";position:absolute;inset:0;pointer-events:none;\n  background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'\/><feColorMatrix values='0 0 0 0 .10  0 0 0 0 .09  0 0 0 0 .07  0 0 0 .7 0'\/><\/filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'\/><\/svg>\");\n  mix-blend-mode:multiply;opacity:.22;z-index:1;\n}\n.jw-folio > *{position:relative;z-index:2}\n\n\/* Scroll progress (ink-drip style) *\/\n.jw-folio .jw-progress{\n  position:fixed;top:0;left:0;right:0;height:3px;\n  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-deep) 100%);\n  transform-origin:0 50%;transform:scaleX(0);\n  z-index:40;transition:transform .08s linear;\n  box-shadow:0 0 10px rgba(184,83,45,.4);\n}\n\n\/* Fixed section indicator (current chapter) *\/\n.jw-folio .jw-chapter{\n  position:fixed;top:12px;right:16px;z-index:41;\n  font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--ink);\n  text-transform:uppercase;\n  background:var(--paper);padding:6px 12px;\n  border:1px solid var(--ink);\n  mix-blend-mode:normal;\n  pointer-events:none;\n  transition:opacity .3s;\n  opacity:0;\n}\n.jw-folio .jw-chapter.show{opacity:1}\n.jw-folio .jw-chapter em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);\n  letter-spacing:0;text-transform:none;font-size:12px;margin-right:8px;\n}\n\n\/* Magazine spine *\/\n.jw-folio .jw-spine{\n  position:fixed;right:12px;top:50%;transform:translateY(-50%);\n  writing-mode:vertical-rl;font-family:var(--mono);font-size:10px;letter-spacing:.35em;\n  color:var(--ink-soft);text-transform:uppercase;z-index:30;pointer-events:none;\n  text-shadow:0 1px 0 rgba(255,255,255,.4);\n}\n\n\/* === 2. Masthead === *\/\n.jw-folio .jw-mast{\n  border-bottom:1px solid var(--rule-strong);\n  padding:14px 32px;display:grid;grid-template-columns:1fr auto 1fr;\n  align-items:center;gap:24px;\n  font-family:var(--mono);font-size:11px;letter-spacing:.25em;\n  color:var(--ink-soft);text-transform:uppercase;background:var(--paper);\n}\n.jw-folio .jw-mast-left{text-align:left}\n.jw-folio .jw-mast-center{\n  font-family:var(--serif-display);font-style:italic;font-weight:500;\n  font-size:14px;letter-spacing:.02em;text-transform:none;color:var(--ink);\n}\n.jw-folio .jw-mast-right{text-align:right}\n.jw-folio .jw-mast em{font-family:var(--serif-display);font-style:italic;color:var(--accent)}\n\n\/* === 3. Hero (with ghost numeral + commission stamp) === *\/\n.jw-folio .jw-hero{\n  padding:clamp(56px,10vw,120px) clamp(20px,4vw,64px) clamp(48px,8vw,96px);\n  border-bottom:1px solid var(--rule-strong);\n  position:relative;overflow:hidden;\n}\n\/* Ghost \u2116I background numeral *\/\n.jw-folio .jw-hero::after{\n  content:\"N\u00b0I\";\n  position:absolute;right:-4%;bottom:-18%;\n  font-family:var(--serif-display);font-style:italic;font-weight:300;\n  font-size:clamp(20rem,44vw,40rem);line-height:.78;letter-spacing:-.06em;\n  color:var(--paper-3);opacity:.45;pointer-events:none;z-index:0;\n}\n.jw-folio .jw-hero-grid{\n  display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,8fr) minmax(160px,2.4fr);\n  gap:clamp(20px,3vw,48px);align-items:start;\n  max-width:1400px;margin:0 auto;position:relative;z-index:2;\n}\n.jw-folio .jw-hero-meta{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--ink-soft);\n  text-transform:uppercase;padding-top:18px;border-top:1px solid var(--ink);\n}\n.jw-folio .jw-hero-meta div{padding:4px 0}\n.jw-folio .jw-hero-meta strong{\n  color:var(--accent);font-weight:500;font-family:var(--serif-display);\n  font-style:italic;text-transform:none;letter-spacing:0;font-size:12px;\n}\n.jw-folio .jw-hero-eyebrow{\n  font-family:var(--mono);font-size:11px;letter-spacing:.4em;color:var(--ink);\n  text-transform:uppercase;display:inline-flex;align-items:center;gap:16px;\n  margin-bottom:28px;padding-bottom:10px;border-bottom:1px solid var(--ink);\n}\n.jw-folio .jw-hero-eyebrow em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);\n  font-size:14px;letter-spacing:.02em;text-transform:none;\n}\n.jw-folio .jw-hero-title{\n  font-family:var(--serif-display);font-size:clamp(3rem,8.5vw,8.4rem);line-height:.94;\n  letter-spacing:-.035em;font-weight:350;font-variation-settings:\"opsz\" 144;\n  color:var(--ink) !important;margin:0 0 .12em 0;text-wrap:balance;\n}\n.jw-folio .jw-hero-title em{\n  font-style:italic;font-weight:300;color:var(--accent) !important;font-variation-settings:\"opsz\" 144;\n}\n.jw-folio .jw-hero-jp{\n  font-family:var(--serif-body);font-size:clamp(1.2rem,2.1vw,1.65rem);line-height:1.7;\n  font-weight:500;color:var(--ink-2);margin-top:36px;max-width:32em;letter-spacing:.02em;\n}\n.jw-folio .jw-hero-jp em{font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;font-weight:500}\n.jw-folio .jw-hero-lead{\n  font-family:var(--serif-body);font-size:15.5px;line-height:1.95;\n  color:var(--ink-soft);max-width:38em;margin-top:28px;\n}\n.jw-folio .jw-hero-lead::first-letter{\n  font-family:var(--serif-display);font-style:italic;font-size:3.2em;float:left;\n  line-height:.85;padding:.08em .12em 0 0;color:var(--accent);font-weight:400;\n}\n.jw-folio .jw-hero-actions{\n  display:flex;gap:18px;flex-wrap:wrap;margin-top:44px;align-items:center;\n}\n.jw-folio .jw-btn{\n  display:inline-flex;align-items:center;gap:14px;padding:16px 28px;\n  border:1px solid var(--ink);background:var(--ink);color:var(--paper) !important;\n  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;\n  transition:background .25s,color .25s,transform .25s;cursor:pointer;\n}\n.jw-folio .jw-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}\n.jw-folio .jw-btn.ghost{background:transparent;color:var(--ink) !important}\n.jw-folio .jw-btn.ghost:hover{background:var(--ink);color:var(--paper) !important}\n.jw-folio .jw-btn em{font-family:var(--serif-display);font-style:italic;letter-spacing:0;text-transform:none;font-size:13px}\n\n.jw-folio .jw-hero-aside{\n  border-top:1px solid var(--ink);padding-top:18px;\n  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);line-height:1.9;\n  position:relative;\n}\n.jw-folio .jw-hero-aside .label{\n  font-size:9.5px;letter-spacing:.3em;color:var(--ink);text-transform:uppercase;\n  margin-bottom:4px;display:block;\n}\n.jw-folio .jw-hero-aside .val{\n  font-family:var(--serif-display);font-style:italic;font-size:15px;color:var(--ink);\n  letter-spacing:.01em;display:block;margin-bottom:14px;font-variant-numeric:tabular-nums oldstyle-nums;\n}\n.jw-folio .jw-hero-aside .val em{color:var(--accent)}\n\n\/* Commission stamp (SVG-like circular) *\/\n.jw-folio .jw-stamp{\n  position:absolute;right:-20px;top:60px;z-index:3;\n  width:130px;height:130px;border-radius:50%;\n  border:1.5px solid var(--accent);color:var(--accent);\n  display:grid;place-items:center;text-align:center;\n  font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;line-height:1.4;\n  transform:rotate(-8deg);\n  background:radial-gradient(circle,transparent 60%,rgba(184,83,45,.05) 100%);\n  opacity:.88;\n}\n.jw-folio .jw-stamp::before{\n  content:\"\";position:absolute;inset:8px;border:1px dashed var(--accent);border-radius:50%;\n}\n.jw-folio .jw-stamp em{\n  font-family:var(--serif-display);font-style:italic;font-size:14px;letter-spacing:0;\n  text-transform:none;color:var(--accent);display:block;margin:4px 0;\n}\n\n\/* === 4. Marquee ticker band === *\/\n.jw-folio .jw-marquee{\n  background:var(--ink);color:var(--cream);\n  padding:18px 0;overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);\n  position:relative;\n}\n.jw-folio .jw-marquee-track{\n  display:flex;gap:48px;white-space:nowrap;\n  animation:jw-marquee 50s linear infinite;\n  font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;\n}\n.jw-folio .jw-marquee-track em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent-soft);\n  letter-spacing:.02em;text-transform:none;font-size:16px;margin:0 8px;\n}\n.jw-folio .jw-marquee-track span{display:inline-flex;align-items:center;gap:48px}\n.jw-folio .jw-marquee-track span::after{content:\"\u203b\";color:var(--accent);margin-left:48px}\n@keyframes jw-marquee{\n  from{transform:translateX(0)}\n  to{transform:translateX(-50%)}\n}\n@media (prefers-reduced-motion:reduce){\n  .jw-folio .jw-marquee-track{animation:none}\n}\n\n\/* === 5. TOC === *\/\n.jw-folio .jw-toc{\n  padding:clamp(40px,5vw,72px) clamp(20px,4vw,64px);\n  border-bottom:1px solid var(--rule-strong);\n}\n.jw-folio .jw-toc-inner{\n  max-width:1400px;margin:0 auto;\n  display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,10fr);\n  gap:clamp(20px,3vw,48px);\n}\n.jw-folio .jw-toc-label{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink-soft);\n  text-transform:uppercase;padding-top:18px;border-top:1px solid var(--ink);\n}\n.jw-folio .jw-toc-grid{\n  display:grid;grid-template-columns:repeat(6,1fr);gap:0;\n  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);\n}\n.jw-folio .jw-toc-item{\n  padding:18px 14px 16px;border-right:1px solid var(--rule);\n  display:flex;flex-direction:column;gap:6px;position:relative;transition:background .25s;\n  cursor:pointer;\n}\n.jw-folio .jw-toc-item:last-child{border-right:0}\n.jw-folio .jw-toc-item:hover{background:var(--paper-2)}\n.jw-folio .jw-toc-no{\n  font-family:var(--serif-display);font-style:italic;font-size:15px;color:var(--accent) !important;\n  font-weight:400;letter-spacing:.02em;\n}\n.jw-folio .jw-toc-name{\n  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink);text-transform:uppercase;\n}\n.jw-folio .jw-toc-jp{font-family:var(--serif-body);font-size:13px;color:var(--ink-soft);font-weight:500}\n.jw-folio .jw-toc-arrow{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;\n  font-size:14px;margin-top:4px;opacity:.6;transition:transform .25s,opacity .25s;\n}\n.jw-folio .jw-toc-item:hover .jw-toc-arrow{transform:translateX(4px);opacity:1}\n\n\/* === 6. Sections common (with ghost Roman numeral) === *\/\n.jw-folio .jw-sec{\n  padding:clamp(64px,9vw,140px) clamp(20px,4vw,64px);\n  border-bottom:1px solid var(--rule-strong);position:relative;overflow:hidden;\n}\n.jw-folio .jw-sec.alt{background:var(--paper-2)}\n.jw-folio .jw-sec[data-ghost]::before{\n  content:attr(data-ghost);\n  position:absolute;right:-6%;top:-10%;\n  font-family:var(--serif-display);font-style:italic;font-weight:300;\n  font-size:clamp(14rem,30vw,28rem);line-height:.85;letter-spacing:-.04em;\n  color:var(--paper-3);opacity:.35;pointer-events:none;z-index:0;\n}\n.jw-folio .jw-sec.alt[data-ghost]::before{color:var(--paper-3);opacity:.5}\n.jw-folio .jw-sec-inner{max-width:1400px;margin:0 auto;position:relative;z-index:2}\n.jw-folio .jw-sec-head{\n  display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,10fr);\n  gap:clamp(20px,3vw,48px);margin-bottom:clamp(40px,5vw,80px);align-items:end;\n}\n.jw-folio .jw-sec-no{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink-soft);\n  text-transform:uppercase;padding-top:18px;border-top:1px solid var(--ink);\n}\n.jw-folio .jw-sec-no strong{\n  color:var(--accent);font-family:var(--serif-display);font-style:italic;\n  font-weight:400;font-size:15px;letter-spacing:.02em;text-transform:none;display:block;margin-top:4px;\n}\n.jw-folio .jw-sec-title{\n  font-family:var(--serif-display);font-size:clamp(2rem,5vw,4.6rem);line-height:1;\n  letter-spacing:-.025em;font-weight:350;font-variation-settings:\"opsz\" 144;\n  color:var(--ink) !important;margin:0;\n}\n.jw-folio .jw-sec-title em{font-style:italic;color:var(--accent) !important;font-weight:300;margin-left:.25em}\n.jw-folio .jw-sec-kicker{\n  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--ink);\n  text-transform:uppercase;padding-bottom:12px;display:inline-block;margin-bottom:12px;\n  border-bottom:1px solid var(--ink);\n}\n.jw-folio .jw-sec-kicker em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);\n  letter-spacing:0;text-transform:none;font-size:13px;\n}\n\n\/* Small ornament divider *\/\n.jw-folio .jw-ornament{\n  display:flex;align-items:center;gap:18px;justify-content:center;\n  padding:24px 0;margin:24px auto;\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);\n  font-size:20px;\n}\n.jw-folio .jw-ornament::before,.jw-folio .jw-ornament::after{\n  content:\"\";flex:1;height:1px;background:var(--rule-strong);max-width:160px;\n}\n\n\/* === 7. Works (Case Files w\/ magazine strip) === *\/\n.jw-folio .jw-cases{display:grid;gap:0;border-top:1px solid var(--ink)}\n.jw-folio .jw-case{\n  display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,7fr) minmax(0,5fr);\n  gap:clamp(20px,3vw,48px);padding:clamp(32px,4vw,56px) 0;\n  border-bottom:1px solid var(--ink);align-items:start;\n}\n.jw-folio .jw-case-no{\n  font-family:var(--serif-display);font-style:italic;font-size:clamp(2rem,3.6vw,3.4rem);\n  color:var(--accent) !important;line-height:1;font-weight:300;\n}\n.jw-folio .jw-case-no small{\n  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;\n  color:var(--ink-soft);text-transform:uppercase;font-style:normal;margin-top:10px;\n}\n.jw-folio .jw-case-cat{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--accent) !important;\n  text-transform:uppercase;margin-bottom:12px;\n}\n.jw-folio .jw-case-title{\n  font-family:var(--serif-display);font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.05;\n  letter-spacing:-.02em;font-weight:400;color:var(--ink) !important;margin:0 0 6px 0;\n}\n.jw-folio .jw-case-title em{font-style:italic;color:var(--accent) !important;font-weight:300}\n.jw-folio .jw-case-url{\n  font-family:var(--mono);font-size:12px;color:var(--ink-soft) !important;letter-spacing:.02em;\n  margin-bottom:20px;display:block;\n}\n.jw-folio .jw-case-desc{\n  font-family:var(--serif-body);font-size:15.5px;line-height:1.95;color:var(--ink-2) !important;\n  margin-bottom:24px;max-width:34em;\n}\n.jw-folio .jw-case-meta-grid{\n  display:grid;grid-template-columns:repeat(2,1fr);gap:4px 16px;\n  padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);\n  margin-bottom:20px;\n}\n.jw-folio .jw-case-meta-grid div{\n  display:flex;justify-content:space-between;padding:4px 0;\n  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);\n}\n.jw-folio .jw-case-meta-grid div span:first-child{\n  font-size:9.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink);\n}\n.jw-folio .jw-case-meta-grid div span:last-child{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);font-size:13px;letter-spacing:0;\n}\n.jw-folio .jw-case-tags{\n  display:flex;flex-wrap:wrap;gap:10px 20px;padding-top:0;margin-bottom:24px;\n}\n.jw-folio .jw-case-tag{\n  font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;\n}\n.jw-folio .jw-case-tag::before{content:\"\u2014 \";color:var(--accent)}\n.jw-folio .jw-case-cta{\n  display:inline-flex;align-items:center;gap:12px;font-family:var(--serif-display);\n  font-style:italic;font-size:17px;color:var(--accent) !important;letter-spacing:.01em;\n  border-bottom:1px solid var(--accent);padding-bottom:3px;\n  transition:color .25s,border-color .25s;\n}\n.jw-folio .jw-case-cta:hover{color:var(--accent-deep) !important;border-color:var(--accent-deep)}\n.jw-folio .jw-case-cta .arrow{font-family:var(--mono);font-style:normal;font-size:14px}\n.jw-folio .jw-case-thumb-wrap{}\n.jw-folio .jw-case-thumb{\n  position:relative;aspect-ratio:4\/3;overflow:hidden;background:var(--paper-3);\n}\n.jw-folio .jw-case-thumb::before{\n  content:\"\";position:absolute;inset:0;border:1px solid var(--ink);\n  transform:translate(10px,10px);z-index:1;pointer-events:none;\n  transition:transform .35s cubic-bezier(.2,.7,.3,1);\n}\n.jw-folio .jw-case-thumb::after{\n  content:\"\";position:absolute;inset:0;border:1px solid var(--accent);\n  transform:translate(18px,18px);z-index:0;pointer-events:none;\n  transition:transform .35s cubic-bezier(.2,.7,.3,1);opacity:.6;\n}\n.jw-folio .jw-case:hover .jw-case-thumb::before{transform:translate(14px,14px)}\n.jw-folio .jw-case:hover .jw-case-thumb::after{transform:translate(22px,22px)}\n.jw-folio .jw-case-thumb img{\n  width:100%;height:100%;object-fit:cover;\n  filter:sepia(.04) contrast(1.02);transition:transform .7s ease;\n}\n.jw-folio .jw-case:hover .jw-case-thumb img{transform:scale(1.04)}\n.jw-folio .jw-case-strip{\n  display:grid;grid-template-columns:1fr 1fr;\n  padding:10px 12px;border:1px solid var(--ink);\n  margin-top:30px;background:var(--paper);\n  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-soft);\n  text-transform:uppercase;align-items:center;position:relative;\n}\n.jw-folio .jw-case-strip::before{\n  content:\"\u2605\";color:var(--accent);position:absolute;left:-12px;top:50%;transform:translateY(-50%);\n  background:var(--paper);padding:0 3px;font-size:14px;\n}\n.jw-folio .jw-case-strip em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);\n  letter-spacing:0;text-transform:none;font-size:12px;\n}\n.jw-folio .jw-case-caption{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;\n  color:var(--ink-soft);text-transform:uppercase;margin-top:12px;text-align:right;\n}\n.jw-folio .jw-case-caption em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);\n  letter-spacing:0;text-transform:none;\n}\n\n\/* === 8. About \/ Colophon === *\/\n.jw-folio .jw-about-grid{\n  display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,6fr) minmax(0,6fr);\n  gap:clamp(24px,3vw,56px);\n}\n.jw-folio .jw-about-portrait{\n  position:relative;aspect-ratio:4\/5;background:var(--paper-3);\n  border:1px solid var(--ink);display:grid;place-items:center;overflow:hidden;\n}\n.jw-folio .jw-about-portrait::before{\n  content:\"JO\";font-family:var(--serif-display);font-style:italic;font-weight:300;\n  font-size:clamp(6rem,14vw,13rem);color:var(--accent);letter-spacing:-.05em;line-height:1;\n}\n.jw-folio .jw-about-portrait::after{\n  content:\"\";position:absolute;inset:18px;border:1px solid var(--ink);pointer-events:none;\n}\n.jw-folio .jw-about-portrait-caption{\n  position:absolute;bottom:18px;left:18px;right:18px;padding-top:12px;\n  border-top:1px solid var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.3em;\n  color:var(--ink-soft);text-transform:uppercase;text-align:center;z-index:2;\n}\n.jw-folio .jw-about-portrait-caption em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);font-size:12px;\n  letter-spacing:0;text-transform:none;display:block;margin-top:4px;\n}\n.jw-folio .jw-about-lead{\n  font-family:var(--serif-display);font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.45;\n  letter-spacing:-.005em;font-weight:400;color:var(--ink) !important;margin-bottom:28px;\n}\n.jw-folio .jw-about-lead em{font-style:italic;color:var(--accent) !important;font-weight:300}\n.jw-folio .jw-about-body p{\n  font-family:var(--serif-body);font-size:15px;line-height:2;color:var(--ink-2);margin-bottom:1em;\n}\n.jw-folio .jw-about-sign{\n  display:flex;align-items:baseline;gap:14px;margin-top:36px;\n  font-family:var(--serif-display);font-style:italic;font-size:18px;color:var(--accent);\n}\n.jw-folio .jw-about-sign::before{\n  content:\"\u00a7\";font-family:var(--serif-display);color:var(--accent);font-size:22px;font-style:italic;\n}\n.jw-folio .jw-about-sign small{\n  font-family:var(--mono);font-style:normal;font-size:11px;color:var(--ink-soft);\n  letter-spacing:.2em;text-transform:uppercase;\n}\n.jw-folio .jw-skills{border-top:1px solid var(--ink);padding-top:20px}\n.jw-folio .jw-skills-label{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink-soft);\n  text-transform:uppercase;margin-bottom:18px;\n}\n\/* Ink progress bar style meter *\/\n.jw-folio .jw-skill{\n  display:grid;grid-template-columns:32px 1fr 60px;gap:16px;\n  padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline;\n}\n.jw-folio .jw-skill-no{font-family:var(--serif-display);font-style:italic;font-size:15px;color:var(--accent) !important}\n.jw-folio .jw-skill-name{font-family:var(--serif-body);font-size:15px;color:var(--ink) !important;font-weight:500;line-height:1.35}\n.jw-folio .jw-skill-name em{\n  font-family:var(--serif-display);font-style:italic;color:var(--ink-soft);font-size:13px;\n  font-weight:400;margin-left:8px;\n}\n.jw-folio .jw-skill-bar{position:relative;width:100%;height:4px;background:var(--paper-3);margin-top:8px;grid-column:2}\n.jw-folio .jw-skill-bar::before{\n  content:\"\";position:absolute;left:0;top:0;height:100%;\n  background:var(--accent);width:var(--bar,60%);\n}\n.jw-folio .jw-skill-bar::after{\n  content:attr(data-pct);position:absolute;right:-55px;top:-6px;\n  font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;\n  font-size:13px;letter-spacing:0;\n}\n.jw-folio .jw-skill-pct{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;\n  font-size:14px;text-align:right;font-variant-numeric:tabular-nums;\n}\n\n\/* === 9. Services with Comparison Sheet === *\/\n.jw-folio .jw-services-kicker{\n  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--ink-soft);\n  text-transform:uppercase;margin-bottom:32px;padding-bottom:10px;border-bottom:1px solid var(--ink);\n}\n.jw-folio .jw-services-kicker em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent);\n  letter-spacing:0;text-transform:none;font-size:13px;\n}\n.jw-folio .jw-svc-group{margin-bottom:56px}\n.jw-folio .jw-svc-group-head{\n  display:flex;align-items:baseline;gap:18px;padding-bottom:18px;\n  border-bottom:1px solid var(--ink);margin-bottom:0;\n}\n.jw-folio .jw-svc-group-no{font-family:var(--serif-display);font-style:italic;font-size:28px;color:var(--accent);font-weight:300}\n.jw-folio .jw-svc-group-name{\n  font-family:var(--serif-display);font-size:clamp(1.4rem,2.6vw,2.2rem);color:var(--ink) !important;\n  font-weight:400;letter-spacing:-.015em;line-height:1;\n}\n.jw-folio .jw-svc-group-name em{font-style:italic;color:var(--accent) !important;font-weight:300;margin-left:.25em}\n.jw-folio .jw-svc-group-kicker{\n  margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.25em;\n  color:var(--ink-soft);text-transform:uppercase;\n}\n.jw-folio .jw-svc-table{display:grid;grid-template-columns:repeat(4,1fr)}\n.jw-folio .jw-svc-table.two{grid-template-columns:repeat(2,1fr)}\n.jw-folio .jw-svc-col{\n  padding:28px 24px 32px;border-right:1px solid var(--rule);border-bottom:1px solid var(--ink);\n  display:flex;flex-direction:column;position:relative;min-height:340px;transition:background .3s;\n}\n.jw-folio .jw-svc-col:last-child{border-right:0}\n.jw-folio .jw-svc-col:hover{background:var(--paper-2)}\n.jw-folio .jw-svc-col.featured{background:var(--ink);color:var(--paper)}\n.jw-folio .jw-svc-col.featured:hover{background:var(--ink-2)}\n.jw-folio .jw-svc-col.featured *{color:var(--paper)}\n.jw-folio .jw-svc-col.featured .jw-svc-no,\n.jw-folio .jw-svc-col.featured .jw-svc-for,\n.jw-folio .jw-svc-col.featured .jw-svc-meta{color:var(--paper-3) !important}\n.jw-folio .jw-svc-col.featured .jw-svc-price{color:var(--cream) !important}\n.jw-folio .jw-svc-col.featured .jw-svc-price em{color:var(--accent-soft) !important}\n.jw-folio .jw-svc-col.featured .jw-svc-list li{color:var(--paper-2) !important;border-bottom:1px dashed rgba(244,237,223,.25)}\n.jw-folio .jw-svc-col.featured .jw-svc-list li::before{color:var(--accent-soft) !important}\n.jw-folio .jw-svc-col.featured .jw-svc-meta em{color:var(--accent-soft) !important}\n.jw-folio .jw-svc-col.featured .jw-svc-cta{color:var(--cream) !important;border-color:var(--accent-soft) !important}\n.jw-folio .jw-svc-badge{\n  position:absolute;top:-11px;left:24px;background:var(--accent);color:var(--paper);\n  font-family:var(--mono);font-size:10px;letter-spacing:.25em;padding:4px 10px;text-transform:uppercase;\n}\n.jw-folio .jw-svc-no{font-family:var(--serif-display);font-style:italic;font-size:13px;color:var(--ink-soft) !important;margin-bottom:4px}\n.jw-folio .jw-svc-name{\n  font-family:var(--serif-display);font-size:24px;font-weight:500;color:var(--ink) !important;\n  letter-spacing:-.015em;margin-bottom:4px;\n}\n.jw-folio .jw-svc-for{font-family:var(--serif-body);font-size:13px;color:var(--ink-soft) !important;margin-bottom:20px}\n.jw-folio .jw-svc-price{\n  font-family:var(--serif-display);font-size:36px;font-weight:400;color:var(--ink) !important;\n  letter-spacing:-.02em;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums oldstyle-nums;\n}\n.jw-folio .jw-svc-price em{font-style:italic;color:var(--accent) !important;font-size:24px;font-weight:300;margin-left:4px}\n.jw-folio .jw-svc-price small{\n  font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.18em;\n  text-transform:uppercase;display:block;margin-top:6px;font-weight:400;\n}\n.jw-folio .jw-svc-list{\n  list-style:none;padding:0;margin:20px 0 0;font-family:var(--serif-body);\n  font-size:13.5px;color:var(--ink-2) !important;line-height:1.7;flex-grow:1;\n}\n.jw-folio .jw-svc-list li{padding:8px 0 8px 20px;position:relative;border-bottom:1px dashed var(--rule);color:var(--ink-2) !important}\n.jw-folio .jw-svc-list li:last-child{border-bottom:0}\n.jw-folio .jw-svc-list li::before{content:\"\u2014\";position:absolute;left:0;top:8px;color:var(--accent);font-family:var(--mono)}\n.jw-folio .jw-svc-meta{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;color:var(--ink-soft);\n  text-transform:uppercase;padding-top:14px;border-top:1px solid var(--rule);margin-top:16px;\n}\n.jw-folio .jw-svc-meta em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;\n  letter-spacing:0;text-transform:none;font-size:12px;\n}\n.jw-folio .jw-svc-cta{\n  display:inline-flex;align-items:center;gap:10px;font-family:var(--serif-display);\n  font-style:italic;font-size:14px;color:var(--accent) !important;letter-spacing:.01em;\n  border-bottom:1px solid var(--accent);padding:2px 0;margin-top:18px;align-self:flex-start;\n  transition:transform .2s;\n}\n.jw-folio .jw-svc-cta:hover{transform:translateX(4px)}\n\n\/* Comparison Sheet *\/\n.jw-folio .jw-compare{\n  margin-top:56px;border:1px solid var(--ink);background:var(--paper);\n  position:relative;\n}\n.jw-folio .jw-compare-head{\n  display:grid;grid-template-columns:2fr repeat(4,1fr);\n  border-bottom:1px solid var(--ink);background:var(--ink);color:var(--paper);\n}\n.jw-folio .jw-compare-head > div{\n  padding:16px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.25em;\n  text-transform:uppercase;border-right:1px solid var(--ink-soft);\n}\n.jw-folio .jw-compare-head > div:last-child{border-right:0}\n.jw-folio .jw-compare-head > div:first-child{\n  font-family:var(--serif-display);font-style:italic;font-size:15px;letter-spacing:0;\n  text-transform:none;color:var(--accent-soft);\n}\n.jw-folio .jw-compare-head em{\n  font-family:var(--serif-display);font-style:italic;letter-spacing:0;text-transform:none;\n  color:var(--accent-soft);font-size:12px;display:block;margin-top:3px;\n}\n.jw-folio .jw-compare-row{\n  display:grid;grid-template-columns:2fr repeat(4,1fr);\n  border-bottom:1px solid var(--rule);\n}\n.jw-folio .jw-compare-row:last-child{border-bottom:0}\n.jw-folio .jw-compare-row:hover{background:var(--paper-2)}\n.jw-folio .jw-compare-row > div{\n  padding:14px 20px;font-family:var(--serif-body);font-size:13.5px;color:var(--ink);\n  border-right:1px solid var(--rule);line-height:1.5;\n}\n.jw-folio .jw-compare-row > div:last-child{border-right:0}\n.jw-folio .jw-compare-row > div:first-child{\n  font-family:var(--serif-display);font-weight:500;font-size:14px;\n  color:var(--ink) !important;background:var(--paper-2);\n}\n.jw-folio .jw-compare-row.highlight > div{background:rgba(184,83,45,.08)}\n.jw-folio .jw-compare-row em{font-family:var(--serif-display);font-style:italic;color:var(--accent) !important}\n.jw-folio .jw-compare-row .yes{color:var(--accent) !important;font-family:var(--serif-display);font-weight:500}\n.jw-folio .jw-compare-row .no{color:var(--ink-mute);font-family:var(--mono)}\n\n\/* === 10. Process === *\/\n.jw-folio .jw-proc{\n  display:grid;grid-template-columns:repeat(4,1fr);gap:0;\n  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);\n}\n.jw-folio .jw-proc-step{\n  padding:40px 28px 44px;border-right:1px solid var(--rule);position:relative;transition:background .3s;\n}\n.jw-folio .jw-proc-step:last-child{border-right:0}\n.jw-folio .jw-proc-step:hover{background:var(--paper-2)}\n.jw-folio .jw-proc-no{\n  font-family:var(--serif-display);font-style:italic;font-weight:300;\n  font-size:clamp(3rem,5vw,4.8rem);color:var(--accent) !important;line-height:1;\n  letter-spacing:-.03em;margin-bottom:20px;display:block;\n}\n.jw-folio .jw-proc-kicker{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink-soft);\n  text-transform:uppercase;margin-bottom:8px;padding-top:12px;border-top:1px solid var(--ink);\n}\n.jw-folio .jw-proc-title{\n  font-family:var(--serif-display);font-size:22px;font-weight:400;color:var(--ink) !important;\n  letter-spacing:-.015em;margin-bottom:8px;\n}\n.jw-folio .jw-proc-dur{font-family:var(--serif-display);font-style:italic;font-size:14px;color:var(--accent) !important;margin-bottom:14px}\n.jw-folio .jw-proc-desc{font-family:var(--serif-body);font-size:13.5px;line-height:1.85;color:var(--ink-soft) !important}\n\n\/* === 11. FAQ \u2014 PEEK ACCORDION === *\/\n.jw-folio .jw-faq-list{border-top:1px solid var(--ink)}\n.jw-folio .jw-faq-item{border-bottom:1px solid var(--ink);padding:0}\n.jw-folio .jw-faq-q{\n  display:grid;grid-template-columns:60px 1fr 30px;gap:16px;\n  padding:22px 12px 14px;cursor:pointer;align-items:baseline;transition:background .2s;\n}\n.jw-folio .jw-faq-q:hover{background:var(--paper-2)}\n.jw-folio .jw-faq-no{\n  font-family:var(--serif-display);font-style:italic;font-size:18px;\n  color:var(--accent) !important;letter-spacing:.02em;font-weight:400;\n}\n.jw-folio .jw-faq-text{\n  font-family:var(--serif-display);font-size:clamp(16px,1.6vw,20px);color:var(--ink);\n  font-weight:500;letter-spacing:-.005em;line-height:1.4;\n}\n.jw-folio .jw-faq-plus{\n  font-family:var(--mono);font-size:20px;color:var(--accent) !important;\n  text-align:right;transition:transform .3s;\n}\n.jw-folio .jw-faq-item.open .jw-faq-plus{transform:rotate(45deg)}\n.jw-folio .jw-faq-a{\n  display:grid;grid-template-columns:60px 1fr 30px;gap:16px;\n  padding:0 12px 16px;\n  max-height:3.4em;overflow:hidden;\n  position:relative;\n  transition:max-height .4s ease,padding .25s ease;\n}\n.jw-folio .jw-faq-a::after{\n  content:\"\";position:absolute;bottom:0;left:60px;right:30px;height:2em;\n  background:linear-gradient(transparent,var(--paper));\n  pointer-events:none;transition:opacity .3s;\n}\n.jw-folio .jw-sec.alt .jw-faq-a::after{\n  background:linear-gradient(transparent,var(--paper-2));\n}\n.jw-folio .jw-faq-item.open .jw-faq-a{\n  max-height:600px;padding:0 12px 28px;\n}\n.jw-folio .jw-faq-item.open .jw-faq-a::after{opacity:0}\n.jw-folio .jw-faq-a-no{font-family:var(--serif-display);font-style:italic;font-size:15px;color:var(--ink-mute)}\n.jw-folio .jw-faq-a-text{\n  font-family:var(--serif-body);font-size:14.5px;line-height:2;color:var(--ink-2);max-width:44em;\n}\n.jw-folio .jw-faq-hint{\n  text-align:center;padding:20px 0;\n  font-family:var(--serif-display);font-style:italic;font-size:14px;color:var(--ink-soft);\n}\n.jw-folio .jw-faq-hint em{color:var(--accent) !important;font-weight:500}\n\n\/* === 12. Contact CTA Hero === *\/\n.jw-folio .jw-cta-hero{\n  background:var(--ink);color:var(--paper);\n  padding:clamp(64px,10vw,140px) clamp(20px,4vw,64px);\n  border-bottom:1px solid var(--ink);position:relative;overflow:hidden;\n}\n.jw-folio .jw-cta-hero::before{\n  content:\"\";position:absolute;top:-15%;right:-10%;\n  width:55%;height:130%;\n  background:radial-gradient(ellipse at center,rgba(184,83,45,.22) 0%,transparent 60%);\n  pointer-events:none;\n}\n.jw-folio .jw-cta-hero::after{\n  content:\"\u00a7\";position:absolute;bottom:40px;right:40px;\n  font-family:var(--serif-display);font-style:italic;font-size:clamp(8rem,14vw,14rem);\n  color:rgba(244,237,223,.08);line-height:1;pointer-events:none;\n}\n.jw-folio .jw-cta-grid{\n  display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,8fr) minmax(0,4fr);\n  gap:clamp(20px,3vw,56px);max-width:1400px;margin:0 auto;position:relative;z-index:2;align-items:end;\n}\n.jw-folio .jw-cta-label{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--paper-3);\n  text-transform:uppercase;padding-top:18px;border-top:1px solid var(--paper-3);\n}\n.jw-folio .jw-cta-label strong{\n  color:var(--accent-soft);font-family:var(--serif-display);font-style:italic;\n  font-weight:400;letter-spacing:0;text-transform:none;font-size:14px;display:block;margin-top:4px;\n}\n.jw-folio .jw-cta-title{\n  font-family:var(--serif-display);font-size:clamp(2.4rem,6vw,5.4rem);line-height:1;\n  letter-spacing:-.03em;font-weight:350;color:var(--paper) !important;margin:0 0 .3em;\n}\n.jw-folio .jw-cta-title em{font-style:italic;color:var(--accent-soft) !important;font-weight:300}\n.jw-folio .jw-cta-lead{\n  font-family:var(--serif-body);font-size:16px;line-height:1.9;color:var(--paper-3);\n  max-width:32em;margin-bottom:32px;\n}\n.jw-folio .jw-cta-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}\n.jw-folio .jw-cta-btn{\n  display:inline-flex;align-items:center;gap:12px;padding:16px 28px;\n  background:var(--accent);color:var(--paper) !important;border:1px solid var(--accent);\n  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;\n  transition:background .25s,transform .25s;\n}\n.jw-folio .jw-cta-btn:hover{background:var(--accent-deep);transform:translateY(-2px)}\n.jw-folio .jw-cta-btn em{font-family:var(--serif-display);font-style:italic;letter-spacing:0;text-transform:none;font-size:14px}\n.jw-folio .jw-cta-ghost{\n  color:var(--paper) !important;font-family:var(--serif-display);font-style:italic;\n  font-size:15px;border-bottom:1px solid var(--paper-3);padding:3px 0;\n  transition:color .25s,border-color .25s;\n}\n.jw-folio .jw-cta-ghost:hover{color:var(--accent-soft) !important;border-color:var(--accent-soft)}\n.jw-folio .jw-cta-promises{\n  border-top:1px solid var(--paper-3);padding-top:20px;\n  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--paper-3);line-height:2;\n}\n.jw-folio .jw-cta-promises li{padding:2px 0}\n.jw-folio .jw-cta-promises em{font-family:var(--serif-display);font-style:italic;color:var(--accent-soft) !important;font-size:13px}\n\n\/* === 13. Contact \u2014 COMMISSION SHEET === *\/\n.jw-folio .jw-contact .jw-contact-inner{\n  display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,6fr) minmax(0,6fr);\n  gap:clamp(20px,3vw,48px);\n}\n.jw-folio .jw-contact-label{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink-soft);\n  text-transform:uppercase;padding-top:18px;border-top:1px solid var(--ink);margin-bottom:8px;\n}\n\n\/* Left: Commission sheet (\u9078\u629e\u5f0f) *\/\n.jw-folio .jw-commission{\n  border:1px solid var(--ink);background:var(--paper);padding:clamp(20px,3vw,32px);\n  position:relative;\n}\n.jw-folio .jw-commission::before{\n  content:\"COMMISSION\";position:absolute;top:-9px;left:24px;\n  background:var(--paper);padding:0 10px;\n  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;\n}\n.jw-folio .jw-commission::after{\n  content:\"N\u00b0 2026-___\";position:absolute;top:-9px;right:24px;\n  background:var(--paper);padding:0 10px;\n  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-soft);\n}\n.jw-folio .jw-commission-head{\n  padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:20px;\n  font-family:var(--serif-display);font-style:italic;font-size:15px;color:var(--ink);\n}\n.jw-folio .jw-commission-head em{color:var(--accent) !important}\n.jw-folio .jw-commission-head small{\n  display:block;font-family:var(--serif-body);font-style:normal;font-size:12px;\n  color:var(--ink-soft);margin-top:4px;line-height:1.6;\n}\n.jw-folio .jw-field{margin-bottom:22px}\n.jw-folio .jw-field-label{\n  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;\n  padding-bottom:8px;border-bottom:1px solid var(--rule);margin-bottom:12px;\n}\n.jw-folio .jw-field-no{\n  font-family:var(--serif-display);font-style:italic;font-size:15px;color:var(--accent) !important;\n}\n.jw-folio .jw-field-title{\n  font-family:var(--serif-body);font-size:14px;font-weight:600;color:var(--ink) !important;\n}\n.jw-folio .jw-field-title em{\n  font-family:var(--serif-display);font-style:italic;color:var(--ink-soft);\n  font-size:12px;font-weight:400;margin-left:8px;\n}\n.jw-folio .jw-field-options{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}\n.jw-folio .jw-field-options.cols-3{grid-template-columns:repeat(3,1fr)}\n.jw-folio .jw-option{\n  display:flex;align-items:center;gap:10px;padding:10px 12px;\n  border:1px solid var(--rule);cursor:pointer;background:transparent;\n  font-family:var(--serif-body);font-size:13px;color:var(--ink-2);line-height:1.3;\n  transition:border-color .2s,background .2s,color .2s;user-select:none;\n}\n.jw-folio .jw-option:hover{border-color:var(--ink-soft);background:var(--paper-2)}\n.jw-folio .jw-option .jw-radio{\n  width:14px;height:14px;border:1px solid var(--ink);border-radius:50%;\n  display:inline-block;flex-shrink:0;position:relative;\n}\n.jw-folio .jw-option.selected{\n  border-color:var(--accent);background:rgba(184,83,45,.08);color:var(--ink);font-weight:500;\n}\n.jw-folio .jw-option.selected .jw-radio{border-color:var(--accent)}\n.jw-folio .jw-option.selected .jw-radio::after{\n  content:\"\";position:absolute;inset:3px;background:var(--accent);border-radius:50%;\n}\n.jw-folio .jw-option em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;\n  margin-left:auto;font-size:12px;\n}\n.jw-folio .jw-commission-foot{\n  font-family:var(--serif-body);font-size:12.5px;color:var(--ink-soft);\n  padding:16px 0 4px;border-top:1px dashed var(--rule);margin-top:8px;line-height:1.75;\n}\n.jw-folio .jw-commission-foot em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;font-weight:500;\n}\n.jw-folio .jw-commission-foot strong{\n  font-family:var(--mono);font-style:normal;color:var(--ink);font-weight:600;font-size:11px;\n  letter-spacing:.1em;display:inline-block;margin:0 2px;\n}\n\n\/* Right: form *\/\n.jw-folio .jw-contact-form{\n  border:1px solid var(--ink);padding:clamp(24px,3vw,40px);background:var(--paper);\n  position:relative;\n}\n.jw-folio .jw-contact-form::before{\n  content:\"WRITE\";position:absolute;top:-9px;left:24px;background:var(--paper);padding:0 10px;\n  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;\n}\n.jw-folio .jw-contact-form-head{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink-soft);\n  text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:20px;\n}\n.jw-folio .jw-contact-form-head em{\n  font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;\n  letter-spacing:0;text-transform:none;font-size:13px;\n}\n.jw-folio .jw-contact-note{\n  font-family:var(--serif-body);font-size:13px;color:var(--ink-soft);line-height:1.8;\n  margin-top:18px;padding-top:18px;border-top:1px dashed var(--rule);\n}\n.jw-folio .jw-contact-note em{font-family:var(--serif-display);font-style:italic;color:var(--accent) !important}\n\n.jw-folio .jw-contact-checklist{\n  border-top:1px solid var(--ink);padding-top:20px;margin-top:20px;display:grid;gap:12px;\n}\n.jw-folio .jw-contact-checklist li{\n  display:grid;grid-template-columns:28px 1fr;\n  font-family:var(--serif-body);font-size:13.5px;color:var(--ink-2);line-height:1.7;align-items:baseline;\n}\n.jw-folio .jw-contact-checklist li::before{\n  content:\"\u2713\";font-family:var(--serif-display);color:var(--accent) !important;font-size:16px;font-weight:500;\n}\n.jw-folio .jw-contact-checklist li strong{color:var(--accent) !important;font-weight:500}\n\n\/* === 14. Footer === *\/\n.jw-folio .jw-colophon{\n  background:var(--paper-2);padding:clamp(48px,6vw,80px) clamp(20px,4vw,64px) 40px;\n  border-top:1px solid var(--ink);\n}\n.jw-folio .jw-colophon-inner{\n  max-width:1400px;margin:0 auto;\n  display:grid;grid-template-columns:minmax(140px,1fr) repeat(3,minmax(0,1fr));\n  gap:clamp(20px,3vw,48px);padding-bottom:36px;border-bottom:1px solid var(--ink);\n}\n.jw-folio .jw-colo-brand h4{\n  font-family:var(--serif-display);font-style:italic;font-size:36px;color:var(--ink) !important;\n  font-weight:350;letter-spacing:-.02em;line-height:1;margin-bottom:6px;\n}\n.jw-folio .jw-colo-brand h4 em{color:var(--accent) !important;font-style:italic}\n.jw-folio .jw-colo-brand p{font-family:var(--serif-body);font-size:13px;color:var(--ink-soft);line-height:1.85}\n.jw-folio .jw-colo-col h5{\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink-soft);\n  text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid var(--ink);\n  margin-bottom:14px;font-weight:500;\n}\n.jw-folio .jw-colo-col li{padding:4px 0;font-family:var(--serif-body);font-size:14px;color:var(--ink-2)}\n.jw-folio .jw-colo-col li a{transition:color .2s}\n.jw-folio .jw-colo-col li a:hover{color:var(--accent) !important}\n.jw-folio .jw-colo-col li em{font-family:var(--serif-display);font-style:italic;color:var(--ink-soft);font-size:12px;margin-left:6px}\n.jw-folio .jw-colo-foot{\n  max-width:1400px;margin:0 auto;padding-top:24px;display:flex;justify-content:space-between;\n  align-items:center;gap:20px;flex-wrap:wrap;\n  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;color:var(--ink-soft);text-transform:uppercase;\n}\n.jw-folio .jw-colo-foot em{font-family:var(--serif-display);font-style:italic;color:var(--accent) !important;letter-spacing:0;text-transform:none;font-size:12px}\n\n\/* === 15. Reveal === *\/\n.jw-folio .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}\n.jw-folio .reveal.is-in{opacity:1;transform:none}\n@media (prefers-reduced-motion:reduce){\n  .jw-folio *,.jw-folio *::before,.jw-folio *::after{animation:none !important;transition:none !important}\n  .jw-folio .reveal{opacity:1;transform:none}\n}\n\n\/* === 16. Responsive === *\/\n@media (max-width:1024px){\n  .jw-folio .jw-hero-grid,.jw-folio .jw-toc-inner,.jw-folio .jw-sec-head,\n  .jw-folio .jw-about-grid,.jw-folio .jw-cta-grid,\n  .jw-folio .jw-contact .jw-contact-inner,.jw-folio .jw-colophon-inner{grid-template-columns:1fr}\n  .jw-folio .jw-hero-meta,.jw-folio .jw-toc-label,.jw-folio .jw-sec-no,\n  .jw-folio .jw-contact-label,.jw-folio .jw-cta-label{display:none}\n  .jw-folio .jw-toc-grid{grid-template-columns:repeat(3,1fr)}\n  .jw-folio .jw-proc{grid-template-columns:repeat(2,1fr)}\n  .jw-folio .jw-proc-step:nth-child(2){border-right:0}\n  .jw-folio .jw-svc-table{grid-template-columns:repeat(2,1fr)}\n  .jw-folio .jw-svc-col:nth-child(2){border-right:0}\n  .jw-folio .jw-case{grid-template-columns:1fr}\n  .jw-folio .jw-case-no{display:flex;align-items:baseline;gap:20px}\n  .jw-folio .jw-case-no small{margin:0}\n  .jw-folio .jw-spine,.jw-folio .jw-chapter{display:none}\n  .jw-folio .jw-mast{grid-template-columns:1fr 1fr;font-size:10px}\n  .jw-folio .jw-mast-center{grid-column:1\/-1;order:-1;font-size:13px}\n  .jw-folio .jw-compare-head,.jw-folio .jw-compare-row{grid-template-columns:1.4fr repeat(4,1fr)}\n  .jw-folio .jw-stamp{right:10px;top:20px;width:100px;height:100px;font-size:8px}\n  .jw-folio .jw-field-options.cols-3{grid-template-columns:repeat(2,1fr)}\n}\n@media (max-width:600px){\n  .jw-folio .jw-toc-grid{grid-template-columns:repeat(2,1fr)}\n  .jw-folio .jw-svc-table,.jw-folio .jw-svc-table.two{grid-template-columns:1fr}\n  .jw-folio .jw-svc-col{border-right:0}\n  .jw-folio .jw-proc{grid-template-columns:1fr}\n  .jw-folio .jw-proc-step{border-right:0}\n  .jw-folio .jw-hero-title{font-size:clamp(2.4rem,13vw,4rem)}\n  .jw-folio .jw-sec-title{font-size:clamp(1.8rem,8vw,3rem)}\n  .jw-folio .jw-cta-title{font-size:clamp(2rem,10vw,3rem)}\n  .jw-folio .jw-case-meta-grid{grid-template-columns:1fr}\n  .jw-folio .jw-stamp{display:none}\n  .jw-folio .jw-compare{overflow-x:auto}\n  .jw-folio .jw-compare-head,.jw-folio .jw-compare-row{min-width:620px}\n  .jw-folio .jw-field-options,.jw-folio .jw-field-options.cols-3{grid-template-columns:1fr}\n}\n\n<\/style>\n\n<div class=\"jw-folio-host\">\n<div class=\"jw-folio\">\n\n<div class=\"jw-progress\"><\/div>\n<div class=\"jw-chapter\"><\/div>\n<div class=\"jw-spine\">VOL. I \u2014 MMXXVI \u2014 JO WORKS \u2014 A Portfolio Monograph<\/div>\n\n<!-- MASTHEAD -->\n<header class=\"jw-mast\">\n  <div class=\"jw-mast-left\">PORTFOLIO MONOGRAPH \u2014 VOL. I<\/div>\n  <div class=\"jw-mast-center\">JO <em>Works<\/em><\/div>\n  <div class=\"jw-mast-right\">MMXXVI \u2014 INDEPENDENT STUDIO<\/div>\n<\/header>\n\n<!-- HERO -->\n<section class=\"jw-hero\" id=\"top\">\n  <div class=\"jw-hero-grid\">\n    <aside class=\"jw-hero-meta reveal\">\n      <div>ISSUE \u2014 <strong>N\u00b0I<\/strong><\/div>\n      <div>MMXXVI<\/div>\n      <div>FIRST EDITION<\/div>\n      <div>\u2014 <strong>2026<\/strong><\/div>\n    <\/aside>\n\n    <div class=\"jw-hero-main reveal\" style=\"position:relative;\">\n      <div class=\"jw-hero-eyebrow\">\n        <span>An Independent Studio<\/span>\n        <em>Est. 2026<\/em>\n      <\/div>\n\n      <h1 class=\"jw-hero-title\">\n        Information,<br>\n        <em>given<\/em> a form.\n      <\/h1>\n\n      <p class=\"jw-hero-jp\">\n        \u60c5\u5831\u3092\u3001<em>\u30ab\u30bf\u30c1<\/em>\u306b\u3002<br>\n        \u500b\u4eba\u4e8b\u696d\u4e3b\u306e\u305f\u3081\u306e HP\u5236\u4f5c \u00d7 AI \u00d7 LINE\u69cb\u7bc9\u3002\n      <\/p>\n\n      <p class=\"jw-hero-lead\">\n        \u300cHP\u4f5c\u3063\u305f\u3051\u3069\u3001\u554f\u3044\u5408\u308f\u305b\u304c\u6765\u306a\u3044\u300d\u3092\u7d42\u308f\u308a\u306b\u3059\u308b\u3002AI\u3092\u73fe\u5834\u3067\u4f7f\u3044\u5012\u3059\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u304c\u3001\u00a550,000\u306e\u304a\u8a66\u3057\u30d7\u30e9\u30f3\u304b\u3089\u4f34\u8d70\u3057\u307e\u3059\u3002\u55b6\u696d\u30c8\u30fc\u30af\u3088\u308a\u3001\u73fe\u5834\u3067\u8d77\u304d\u305f\u554f\u984c\u3068\u89e3\u304d\u65b9\u3092\u5927\u5207\u306b\u3059\u308b\u300c\u5b9f\u88c5\u578b\u300d\u306e\u30af\u30ea\u30a8\u30a4\u30bf\u30fc\u3067\u3059\u3002\n      <\/p>\n\n      <div class=\"jw-hero-actions\">\n        <a href=\"#contact\" class=\"jw-btn\">\u7121\u6599\u3067\u76f8\u8ac7\u3059\u308b <em>\u2192<\/em><\/a>\n        <a href=\"#services\" class=\"jw-btn ghost\">\u6599\u91d1\u30d7\u30e9\u30f3\u3092\u898b\u308b <em>\u2192<\/em><\/a>\n      <\/div>\n\n      <div class=\"jw-stamp\" aria-hidden=\"true\">\n        OPEN<em>for<\/em>COMMISSION<br>MMXXVI\n      <\/div>\n    <\/div>\n\n    <aside class=\"jw-hero-aside reveal\">\n      <span class=\"label\">Start From<\/span>\n      <span class=\"val\"><em>\u00a550,000<\/em><\/span>\n      <span class=\"label\">Initial Plan<\/span>\n      <span class=\"val\"><em>\u7d042\u9031\u9593<\/em><\/span>\n      <span class=\"label\">Delivery<\/span>\n      <span class=\"val\">Fully Online<\/span>\n      <span class=\"label\">Coverage<\/span>\n      <span class=\"val\">Nationwide \u5168\u56fd<\/span>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<!-- MARQUEE TICKER -->\n<div class=\"jw-marquee\" aria-hidden=\"true\">\n  <div class=\"jw-marquee-track\">\n    <span>WEBSITES <em>\u00b7<\/em> AI APPS <em>\u00b7<\/em> LINE OFFICIAL <em>\u00b7<\/em> SEO <em>\u00b7<\/em> WORDPRESS <em>\u00b7<\/em> \u00a550,000~ <em>\u00b7<\/em> FULLY ONLINE <em>\u00b7<\/em> NATIONWIDE <em>\u00b7<\/em> \u60c5\u5831\u3092\u3001\u30ab\u30bf\u30c1\u306b <em>\u00b7<\/em> HANDCRAFTED <em>\u00b7<\/em> MMXXVI<\/span>\n    <span>WEBSITES <em>\u00b7<\/em> AI APPS <em>\u00b7<\/em> LINE OFFICIAL <em>\u00b7<\/em> SEO <em>\u00b7<\/em> WORDPRESS <em>\u00b7<\/em> \u00a550,000~ <em>\u00b7<\/em> FULLY ONLINE <em>\u00b7<\/em> NATIONWIDE <em>\u00b7<\/em> \u60c5\u5831\u3092\u3001\u30ab\u30bf\u30c1\u306b <em>\u00b7<\/em> HANDCRAFTED <em>\u00b7<\/em> MMXXVI<\/span>\n  <\/div>\n<\/div>\n\n<!-- TOC -->\n<section class=\"jw-toc\">\n  <div class=\"jw-toc-inner\">\n    <div class=\"jw-toc-label\">TABLE OF CONTENTS<br>\u2014 \u672c\u66f8\u306e\u76ee\u6b21<\/div>\n    <div class=\"jw-toc-grid reveal\">\n      <a href=\"#works\" class=\"jw-toc-item\"><span class=\"jw-toc-no\">I.<\/span><span class=\"jw-toc-name\">Works<\/span><span class=\"jw-toc-jp\">\u5236\u4f5c\u5b9f\u7e3e<\/span><span class=\"jw-toc-arrow\">\u2192<\/span><\/a>\n      <a href=\"#about\" class=\"jw-toc-item\"><span class=\"jw-toc-no\">II.<\/span><span class=\"jw-toc-name\">Studio<\/span><span class=\"jw-toc-jp\">\u30b8\u30e7\u30fc\u306b\u3064\u3044\u3066<\/span><span class=\"jw-toc-arrow\">\u2192<\/span><\/a>\n      <a href=\"#services\" class=\"jw-toc-item\"><span class=\"jw-toc-no\">III.<\/span><span class=\"jw-toc-name\">Services<\/span><span class=\"jw-toc-jp\">\u30b5\u30fc\u30d3\u30b9\uff06\u6599\u91d1<\/span><span class=\"jw-toc-arrow\">\u2192<\/span><\/a>\n      <a href=\"#process\" class=\"jw-toc-item\"><span class=\"jw-toc-no\">IV.<\/span><span class=\"jw-toc-name\">Process<\/span><span class=\"jw-toc-jp\">\u3054\u4f9d\u983c\u306e\u6d41\u308c<\/span><span class=\"jw-toc-arrow\">\u2192<\/span><\/a>\n      <a href=\"#faq\" class=\"jw-toc-item\"><span class=\"jw-toc-no\">V.<\/span><span class=\"jw-toc-name\">FAQ<\/span><span class=\"jw-toc-jp\">\u3088\u304f\u3042\u308b\u8cea\u554f<\/span><span class=\"jw-toc-arrow\">\u2192<\/span><\/a>\n      <a href=\"#contact\" class=\"jw-toc-item\"><span class=\"jw-toc-no\">VI.<\/span><span class=\"jw-toc-name\">Contact<\/span><span class=\"jw-toc-jp\">\u304a\u554f\u3044\u5408\u308f\u305b<\/span><span class=\"jw-toc-arrow\">\u2192<\/span><\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- I. WORKS -->\n<section class=\"jw-sec\" id=\"works\" data-ghost=\"I.\">\n  <div class=\"jw-sec-inner\">\n    <div class=\"jw-sec-head\">\n      <div class=\"jw-sec-no\">SECTION I<br><strong>\u5236\u4f5c\u5b9f\u7e3e<\/strong><\/div>\n      <div>\n        <span class=\"jw-sec-kicker\">Works &mdash; <em>Case Files<\/em><\/span>\n        <h2 class=\"jw-sec-title\">\u5b9f\u969b\u306b\u904b\u55b6\u3059\u308b <em>\u4e8c\u3064\u306e\u73fe\u5834\u3002<\/em><\/h2>\n        <p style=\"font-family:var(--serif-body);font-size:15.5px;color:var(--ink-soft);line-height:1.9;max-width:42em;margin-top:24px;\">\u300c\u4f5c\u3063\u3066\u7d42\u308f\u308a\u300d\u3067\u306f\u306a\u304f\u3001\u904b\u7528\u307e\u3067\u56de\u305b\u308b\u8a2d\u8a08\u304c\u5f37\u307f\u3002\u3053\u3053\u306b\u4e26\u3076\u4e8c\u3064\u306f\u3001\u81ea\u5206\u3067\u4f01\u753b\u30fb\u5236\u4f5c\u30fb\u904b\u7528\u30fb\u53ce\u76ca\u5316\u307e\u3067\u884c\u3063\u3066\u3044\u308b\u3001\u73fe\u5728\u9032\u884c\u5f62\u306e\u30b1\u30fc\u30b9\u3067\u3059\u3002<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"jw-cases\">\n\n      <article class=\"jw-case reveal\">\n        <div class=\"jw-case-no\">N\u00b0001<small>\u2014 A Case File<\/small><\/div>\n        <div class=\"jw-case-body\">\n          <div class=\"jw-case-cat\">Media &middot; WordPress &middot; SEO<\/div>\n          <h3 class=\"jw-case-title\">\u60c5\u5831\u306e<em>\u30ab\u30bf\u30c1<\/em>\u3002<\/h3>\n          <span class=\"jw-case-url\">jouhounokatachi.com<\/span>\n          <p class=\"jw-case-desc\">AI\u30fbWeb\u5236\u4f5c\u30fb\u696d\u52d9\u52b9\u7387\u5316\u306e\u60c5\u5831\u3092\u767a\u4fe1\u3059\u308b\u30d6\u30ed\u30b0\u3002WordPress\uff08SWELL\uff09\u3067\u69cb\u7bc9\u3057\u3001SEO\u5bfe\u7b56\u3092\u65bd\u3057\u305f\u4e0a\u3067\u30a2\u30d5\u30a3\u30ea\u30a8\u30a4\u30c8\u53ce\u76ca\u5316\u307e\u3067\u5b9f\u73fe\u3002\u30c6\u30fc\u30de\u306f\u300c\u60c5\u5831\u3092\u3001\u4f1d\u308f\u308b\u30ab\u30bf\u30c1\u306b\u300d\u3002<\/p>\n\n          <div class=\"jw-case-meta-grid\">\n            <div><span>STACK<\/span><span>WordPress \/ SWELL<\/span><\/div>\n            <div><span>ROLE<\/span><span>Full Stack<\/span><\/div>\n            <div><span>YEAR<\/span><span>2026<\/span><\/div>\n            <div><span>STATUS<\/span><span>Running<\/span><\/div>\n          <\/div>\n\n          <div class=\"jw-case-tags\">\n            <span class=\"jw-case-tag\">WordPress<\/span>\n            <span class=\"jw-case-tag\">SWELL<\/span>\n            <span class=\"jw-case-tag\">SEO<\/span>\n            <span class=\"jw-case-tag\">Affiliate<\/span>\n          <\/div>\n          <a href=\"https:\/\/jouhounokatachi.com\" class=\"jw-case-cta\" target=\"_blank\" rel=\"noopener\">\u30b5\u30a4\u30c8\u3092\u898b\u308b <span class=\"arrow\">\u2197<\/span><\/a>\n        <\/div>\n        <div class=\"jw-case-thumb-wrap\">\n          <div class=\"jw-case-thumb\">\n            <img decoding=\"async\" data-no-lazy=\"1\" class=\"no-lazyload\" src=\"https:\/\/works.jouhounokatachi.com\/blog\/wp-content\/uploads\/2026\/04\/jouhounokatachi-hero.jpeg\" alt=\"\u60c5\u5831\u306e\u30ab\u30bf\u30c1 jouhounokatachi.com\">\n          <\/div>\n          <div class=\"jw-case-strip\">\n            <div>FILE N\u00b0001 &mdash; <em>AI Media<\/em><\/div>\n            <div style=\"text-align:right;\">MMXXVI &middot; <em>Editorial<\/em><\/div>\n          <\/div>\n          <p class=\"jw-case-caption\">fig. 1 &mdash; <em>AI Media, Editorial Take<\/em><\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"jw-case reveal\">\n        <div class=\"jw-case-no\">N\u00b0002<small>\u2014 A Case File<\/small><\/div>\n        <div class=\"jw-case-body\">\n          <div class=\"jw-case-cat\">Media &middot; Men&rsquo;s Beauty &middot; \u85ac\u6a5f\u6cd5\u5bfe\u5fdc<\/div>\n          <h3 class=\"jw-case-title\">\u30a4\u30b1\u30aa\u30b8\u5b8c\u5168<em>\u653b\u7565<\/em>\u30ac\u30a4\u30c9\u3002<\/h3>\n          <span class=\"jw-case-url\">kareoji.com<\/span>\n          <p class=\"jw-case-desc\">\u30e1\u30f3\u30ba\u8131\u6bdb\u30fb\u7f8e\u5bb9\u306e\u6bd4\u8f03\u30ec\u30d3\u30e5\u30fc\u30e1\u30c7\u30a3\u30a2\u3002\u8907\u6570\u30ab\u30c6\u30b4\u30ea\u3067\u7d99\u7d9a\u904b\u7528\u4e2d\u3001\u85ac\u6a5f\u6cd5\u306b\u6e96\u62e0\u3057\u305f\u30b3\u30f3\u30c6\u30f3\u30c4\u7ba1\u7406\u3092\u5fb9\u5e95\u3057\u3001\u5b9f\u4f53\u9a13\u306b\u57fa\u3065\u304f\u9577\u6587\u30ec\u30dd\u30fc\u30c8\u3092\u4e2d\u5fc3\u306b\u69cb\u6210\u3002<\/p>\n\n          <div class=\"jw-case-meta-grid\">\n            <div><span>STACK<\/span><span>WordPress \/ SWELL<\/span><\/div>\n            <div><span>ROLE<\/span><span>Full Stack<\/span><\/div>\n            <div><span>YEAR<\/span><span>2026<\/span><\/div>\n            <div><span>STATUS<\/span><span>Running<\/span><\/div>\n          <\/div>\n\n          <div class=\"jw-case-tags\">\n            <span class=\"jw-case-tag\">WordPress<\/span>\n            <span class=\"jw-case-tag\">SWELL<\/span>\n            <span class=\"jw-case-tag\">\u85ac\u6a5f\u6cd5<\/span>\n            <span class=\"jw-case-tag\">\u7d99\u7d9a\u904b\u7528<\/span>\n          <\/div>\n          <a href=\"https:\/\/kareoji.com\" class=\"jw-case-cta\" target=\"_blank\" rel=\"noopener\">\u30b5\u30a4\u30c8\u3092\u898b\u308b <span class=\"arrow\">\u2197<\/span><\/a>\n        <\/div>\n        <div class=\"jw-case-thumb-wrap\">\n          <div class=\"jw-case-thumb\">\n            <img decoding=\"async\" data-no-lazy=\"1\" class=\"no-lazyload\" src=\"https:\/\/works.jouhounokatachi.com\/blog\/wp-content\/uploads\/2026\/04\/kareoji-hero.jpeg\" alt=\"\u30a4\u30b1\u30aa\u30b8\u5b8c\u5168\u653b\u7565\u30ac\u30a4\u30c9 kareoji.com\">\n          <\/div>\n          <div class=\"jw-case-strip\">\n            <div>FILE N\u00b0002 &mdash; <em>Men&#8217;s Guide<\/em><\/div>\n            <div style=\"text-align:right;\">MMXXVI &middot; <em>Editorial Noir<\/em><\/div>\n          <\/div>\n          <p class=\"jw-case-caption\">fig. 2 &mdash; <em>The Gentleman&rsquo;s Guide<\/em><\/p>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <div class=\"jw-ornament\">\u2726 &mdash; Fin. &mdash; \u2726<\/div>\n  <\/div>\n<\/section>\n\n<!-- II. ABOUT -->\n<section class=\"jw-sec alt\" id=\"about\" data-ghost=\"II.\">\n  <div class=\"jw-sec-inner\">\n    <div class=\"jw-sec-head\">\n      <div class=\"jw-sec-no\">SECTION II<br><strong>\u30b8\u30e7\u30fc\u306b\u3064\u3044\u3066<\/strong><\/div>\n      <div>\n        <span class=\"jw-sec-kicker\">Studio &mdash; <em>The Designer&rsquo;s Colophon<\/em><\/span>\n        <h2 class=\"jw-sec-title\">\u55b6\u696d\u30c8\u30fc\u30af\u3088\u308a\u3001<em>\u5b9f\u88c5\u306e\u624b\u3002<\/em><\/h2>\n      <\/div>\n    <\/div>\n\n    <div class=\"jw-about-grid\">\n      <div><\/div>\n      <div class=\"reveal\">\n        <div class=\"jw-about-portrait\"><span class=\"jw-portrait-mono\" aria-hidden=\"true\"><img src=\"https:\/\/works.jouhounokatachi.com\/blog\/wp-content\/uploads\/2026\/04\/jo-avatar-bg-1.png\" alt=\"JO\" decoding=\"async\" loading=\"lazy\" \/><\/span>\n          <span class=\"jw-about-portrait-caption\">JO \u2014 FREELANCE CREATOR <em>Since 2026<\/em><\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"jw-about-body reveal\">\n        <p class=\"jw-about-lead\">\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3067HP\u5236\u4f5c\u30fbAI\u6d3b\u7528\u30fb\u81ea\u52d5\u5316\u6848\u4ef6\u3092 <em>\u3072\u3068\u308a\u3067<\/em> \u56de\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n        <p>\u55b6\u696d\u30c8\u30fc\u30af\u3088\u308a\u3001\u73fe\u5834\u3067\u8d77\u304d\u305f\u554f\u984c\u3068\u89e3\u304d\u65b9\u3092\u5927\u5207\u306b\u3059\u308b\u300c\u5b9f\u88c5\u578b\u300d\u306e\u30af\u30ea\u30a8\u30a4\u30bf\u30fc\u3067\u3059\u3002\u4f5c\u3063\u3066\u7d42\u308f\u308a\u3067\u306f\u306a\u304f\u3001\u30ed\u30fc\u30f3\u30c1\u3057\u3066\u304b\u3089\u59cb\u307e\u308b\u904b\u7528\u30fb\u6539\u5584\u307e\u3067\u542b\u3081\u3066\u4f34\u8d70\u3059\u308b\u3053\u3068\u3092\u524d\u63d0\u306b\u8a2d\u8a08\u3057\u307e\u3059\u3002<\/p>\n        <p>\u304a\u8a66\u3057\u30d7\u30e9\u30f3 \u00a550,000\u301c \u304b\u3089\u3001\u76f8\u624b\u306e\u4e8b\u696d\u898f\u6a21\u306b\u5408\u308f\u305b\u3066\u67d4\u8edf\u306b\u5bfe\u5fdc\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n        <div class=\"jw-about-sign\">\n          JO <small>\u2014 EDITOR &amp; DEVELOPER<\/small>\n        <\/div>\n\n        <div class=\"jw-skills\">\n          <div class=\"jw-skills-label\">Specialties &mdash; \u5f97\u610f\u5206\u91ce<\/div>\n          <div class=\"jw-skill\">\n            <span class=\"jw-skill-no\">01<\/span>\n            <span class=\"jw-skill-name\">HP\u5236\u4f5c<em>Static HTML \/ WordPress (SWELL)<\/em><span class=\"jw-skill-bar\" style=\"--bar:98%\" data-pct=\"98%\"><\/span><\/span>\n            <span class=\"jw-skill-pct\">98%<\/span>\n          <\/div>\n          <div class=\"jw-skill\">\n            <span class=\"jw-skill-no\">02<\/span>\n            <span class=\"jw-skill-name\">AI\u6d3b\u7528\u30a2\u30d7\u30ea<em>Claude \/ OpenAI API \u5b9f\u88c5<\/em><span class=\"jw-skill-bar\" style=\"--bar:88%\" data-pct=\"88%\"><\/span><\/span>\n            <span class=\"jw-skill-pct\">88%<\/span>\n          <\/div>\n          <div class=\"jw-skill\">\n            <span class=\"jw-skill-no\">03<\/span>\n            <span class=\"jw-skill-name\">LINE\u516c\u5f0f\u30a2\u30ab\u30a6\u30f3\u30c8<em>\u958b\u8a2d\u301c\u81ea\u52d5\u5fdc\u7b54\u30fb\u30ea\u30c3\u30c1\u30e1\u30cb\u30e5\u30fc<\/em><span class=\"jw-skill-bar\" style=\"--bar:82%\" data-pct=\"82%\"><\/span><\/span>\n            <span class=\"jw-skill-pct\">82%<\/span>\n          <\/div>\n          <div class=\"jw-skill\">\n            <span class=\"jw-skill-no\">04<\/span>\n            <span class=\"jw-skill-name\">SEO\u6539\u5584\u30fb\u904b\u7528\u4fdd\u5b88<em>GSC\u5206\u6790 \/ \u30bf\u30a4\u30c8\u30eb\u6539\u4fee \/ WP \u4fdd\u5b88<\/em><span class=\"jw-skill-bar\" style=\"--bar:85%\" data-pct=\"85%\"><\/span><\/span>\n            <span class=\"jw-skill-pct\">85%<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- III. SERVICES -->\n<section class=\"jw-sec\" id=\"services\" data-ghost=\"III.\">\n  <div class=\"jw-sec-inner\">\n    <div class=\"jw-sec-head\">\n      <div class=\"jw-sec-no\">SECTION III<br><strong>\u30b5\u30fc\u30d3\u30b9\uff06\u6599\u91d1<\/strong><\/div>\n      <div>\n        <span class=\"jw-sec-kicker\">Services &mdash; <em>The Rate Card<\/em><\/span>\n        <h2 class=\"jw-sec-title\">\u5168\u3066\u7a0e\u8fbc\u3002<em>\u898b\u7a4d\u3082\u308a\u660e\u6717\u3002<\/em><\/h2>\n        <div class=\"jw-services-kicker\" style=\"margin-top:24px;\">\u5185\u5bb9\u306b\u5fdc\u3058\u305f\u304a\u898b\u7a4d\u3082\u308a\u3001\u8ffd\u52a0\u6599\u91d1\u306f\u4e00\u5207\u306a\u3057 &mdash; <em>Transparent pricing<\/em><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- HP \u5236\u4f5c -->\n    <div class=\"jw-svc-group reveal\">\n      <div class=\"jw-svc-group-head\">\n        <span class=\"jw-svc-group-no\">\u00a7.01<\/span>\n        <h3 class=\"jw-svc-group-name\">HP\u5236\u4f5c <em>Websites<\/em><\/h3>\n        <span class=\"jw-svc-group-kicker\">4 Plans &mdash; from \u00a550k<\/span>\n      <\/div>\n      <div class=\"jw-svc-table\">\n        <div class=\"jw-svc-col\">\n          <span class=\"jw-svc-no\">\u2014 01 \u2014<\/span>\n          <div class=\"jw-svc-name\">Starter<\/div>\n          <div class=\"jw-svc-for\">\u307e\u305a\u8a66\u3057\u305f\u3044\u65b9\u3078<\/div>\n          <div class=\"jw-svc-price\">\u00a550,000<em>\u301c<\/em><small>From \/ \u7a0e\u8fbc<\/small><\/div>\n          <ul class=\"jw-svc-list\">\n            <li>1\u30da\u30fc\u30b8LP\uff08\u9759\u7684HTML\uff09<\/li>\n            <li>\u30b9\u30de\u30db\u5b8c\u5168\u5bfe\u5fdc<\/li>\n            <li>SEO\u57fa\u672c\u8a2d\u5b9a<\/li>\n            <li>\u7d0d\u671f \u7d042\u9031\u9593<\/li>\n          <\/ul>\n          <div class=\"jw-svc-meta\">Delivery &mdash; <em>2 weeks<\/em><\/div>\n          <a href=\"#contact\" class=\"jw-svc-cta\">\u3053\u306e\u30d7\u30e9\u30f3\u3067\u76f8\u8ac7 \u2192<\/a>\n        <\/div>\n        <div class=\"jw-svc-col featured\">\n          <span class=\"jw-svc-badge\">Most Popular<\/span>\n          <span class=\"jw-svc-no\">\u2014 02 \u2014<\/span>\n          <div class=\"jw-svc-name\">Basic<\/div>\n          <div class=\"jw-svc-for\">\u3058\u3063\u304f\u308a\u904b\u7528\u3057\u305f\u3044\u65b9\u3078<\/div>\n          <div class=\"jw-svc-price\">\u00a5150,000<em>\u301c<\/em><small>From \/ \u7a0e\u8fbc<\/small><\/div>\n          <ul class=\"jw-svc-list\">\n            <li>WordPress\uff08SWELL\uff095\u30da\u30fc\u30b8<\/li>\n            <li>\u304a\u554f\u3044\u5408\u308f\u305b\u30d5\u30a9\u30fc\u30e0<\/li>\n            <li>\u66f4\u65b0\u30de\u30cb\u30e5\u30a2\u30eb<\/li>\n            <li>1\u30f6\u6708\u30b5\u30dd\u30fc\u30c8<\/li>\n          <\/ul>\n          <div class=\"jw-svc-meta\">Delivery &mdash; <em>3\u20134 weeks<\/em><\/div>\n          <a href=\"#contact\" class=\"jw-svc-cta\">\u3053\u306e\u30d7\u30e9\u30f3\u3067\u76f8\u8ac7 \u2192<\/a>\n        <\/div>\n        <div class=\"jw-svc-col\">\n          <span class=\"jw-svc-no\">\u2014 03 \u2014<\/span>\n          <div class=\"jw-svc-name\">Standard<\/div>\n          <div class=\"jw-svc-for\">\u672c\u6c17\u3067\u4e8b\u696d\u3092\u4f38\u3070\u3057\u305f\u3044\u65b9\u3078<\/div>\n          <div class=\"jw-svc-price\">\u00a5300,000<em>\u301c<\/em><small>From \/ \u7a0e\u8fbc<\/small><\/div>\n          <ul class=\"jw-svc-list\">\n            <li>WordPress 10\u30da\u30fc\u30b8<\/li>\n            <li>\u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7 2\u6848<\/li>\n            <li>\u30e9\u30a4\u30c6\u30a3\u30f3\u30b0\u652f\u63f4<\/li>\n            <li>3\u30f6\u6708\u30b5\u30dd\u30fc\u30c8<\/li>\n          <\/ul>\n          <div class=\"jw-svc-meta\">Delivery &mdash; <em>6\u20138 weeks<\/em><\/div>\n          <a href=\"#contact\" class=\"jw-svc-cta\">\u3053\u306e\u30d7\u30e9\u30f3\u3067\u76f8\u8ac7 \u2192<\/a>\n        <\/div>\n        <div class=\"jw-svc-col\">\n          <span class=\"jw-svc-no\">\u2014 04 \u2014<\/span>\n          <div class=\"jw-svc-name\">Premium<\/div>\n          <div class=\"jw-svc-for\">\u7279\u5225\u306a\u8981\u671b\u306e\u3042\u308b\u65b9\u3078<\/div>\n          <div class=\"jw-svc-price\">\u5fdc\u76f8\u8ac7<small>Custom Quote<\/small><\/div>\n          <ul class=\"jw-svc-list\">\n            <li>EC\u30fb\u4e88\u7d04\u30b5\u30a4\u30c8\u5bfe\u5fdc<\/li>\n            <li>\u5916\u90e8\u30b7\u30b9\u30c6\u30e0\u9023\u643a<\/li>\n            <li>\u30d5\u30eb\u30ea\u30cb\u30e5\u30fc\u30a2\u30eb<\/li>\n            <li>\u7d0d\u54c1\u5f8c\u306e\u7d99\u7d9a\u4fdd\u5b88<\/li>\n          <\/ul>\n          <div class=\"jw-svc-meta\">Delivery &mdash; <em>On Request<\/em><\/div>\n          <a href=\"#contact\" class=\"jw-svc-cta\">\u3053\u306e\u30d7\u30e9\u30f3\u3067\u76f8\u8ac7 \u2192<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Comparison Sheet -->\n    <div class=\"jw-compare reveal\">\n      <div class=\"jw-compare-head\">\n        <div>Comparison <em>\u2014 \u8a73\u7d30\u6bd4\u8f03\u8868<\/em><\/div>\n        <div>Starter<\/div>\n        <div>Basic<\/div>\n        <div>Standard <em>\u2605<\/em><\/div>\n        <div>Premium<\/div>\n      <\/div>\n      <div class=\"jw-compare-row\"><div>\u30da\u30fc\u30b8\u6570<\/div><div>1P<\/div><div>5P<\/div><div class=\"yes\">10P<\/div><div><em>\u5fdc\u76f8\u8ac7<\/em><\/div><\/div>\n      <div class=\"jw-compare-row highlight\"><div>\u30d9\u30fc\u30b9<\/div><div>\u9759\u7684HTML<\/div><div>WordPress<\/div><div class=\"yes\">WordPress<\/div><div>WordPress<\/div><\/div>\n      <div class=\"jw-compare-row\"><div>\u30c7\u30b6\u30a4\u30f3\u6848<\/div><div>1\u6848<\/div><div>1\u6848<\/div><div class=\"yes\">2\u6848<\/div><div><em>\u8981\u76f8\u8ac7<\/em><\/div><\/div>\n      <div class=\"jw-compare-row highlight\"><div>\u304a\u554f\u3044\u5408\u308f\u305b\u30d5\u30a9\u30fc\u30e0<\/div><div><span class=\"no\">\u2014<\/span><\/div><div class=\"yes\">\u2713<\/div><div class=\"yes\">\u2713<\/div><div class=\"yes\">\u2713<\/div><\/div>\n      <div class=\"jw-compare-row\"><div>\u30e9\u30a4\u30c6\u30a3\u30f3\u30b0\u652f\u63f4<\/div><div><span class=\"no\">\u2014<\/span><\/div><div><span class=\"no\">\u2014<\/span><\/div><div class=\"yes\">\u2713<\/div><div class=\"yes\">\u2713<\/div><\/div>\n      <div class=\"jw-compare-row highlight\"><div>\u30b5\u30dd\u30fc\u30c8\u671f\u9593<\/div><div>\u7d0d\u54c1\u307e\u3067<\/div><div>1\u30f6\u6708<\/div><div class=\"yes\">3\u30f6\u6708<\/div><div><em>\u7d99\u7d9a\u4fdd\u5b88<\/em><\/div><\/div>\n      <div class=\"jw-compare-row\"><div>\u5916\u90e8\u30b7\u30b9\u30c6\u30e0\u9023\u643a<\/div><div><span class=\"no\">\u2014<\/span><\/div><div><span class=\"no\">\u2014<\/span><\/div><div><span class=\"no\">\u2014<\/span><\/div><div class=\"yes\">\u2713<\/div><\/div>\n      <div class=\"jw-compare-row highlight\"><div>\u7d0d\u671f<\/div><div><em>2\u9031<\/em><\/div><div><em>3-4\u9031<\/em><\/div><div class=\"yes\"><em>6-8\u9031<\/em><\/div><div><em>\u8981\u76f8\u8ac7<\/em><\/div><\/div>\n    <\/div>\n\n    <!-- LINE -->\n    <div class=\"jw-svc-group reveal\" style=\"margin-top:72px;\">\n      <div class=\"jw-svc-group-head\">\n        <span class=\"jw-svc-group-no\">\u00a7.02<\/span>\n        <h3 class=\"jw-svc-group-name\">LINE\u516c\u5f0f <em>\u69cb\u7bc9<\/em><\/h3>\n        <span class=\"jw-svc-group-kicker\">2 Plans &mdash; from \u00a550k<\/span>\n      <\/div>\n      <div class=\"jw-svc-table two\">\n        <div class=\"jw-svc-col\">\n          <span class=\"jw-svc-no\">\u2014 01 \u2014<\/span>\n          <div class=\"jw-svc-name\">\u958b\u8a2d\u30d1\u30c3\u30af<\/div>\n          <div class=\"jw-svc-for\">\u30bc\u30ed\u304b\u3089\u69cb\u7bc9\u3057\u305f\u3044\u65b9\u3078<\/div>\n          <div class=\"jw-svc-price\">\u00a550,000<em>\u301c<\/em><small>From \/ \u7a0e\u8fbc<\/small><\/div>\n          <ul class=\"jw-svc-list\">\n            <li>\u30a2\u30ab\u30a6\u30f3\u30c8\u958b\u8a2d\u30fb\u521d\u671f\u8a2d\u5b9a\u4e00\u5f0f<\/li>\n            <li>\u30ea\u30c3\u30c1\u30e1\u30cb\u30e5\u30fc 1\u679a<\/li>\n            <li>\u81ea\u52d5\u5fdc\u7b54 5\u30b7\u30ca\u30ea\u30aa\u307e\u3067<\/li>\n            <li>\u3042\u3044\u3055\u3064\/\u904b\u7528\u30de\u30cb\u30e5\u30a2\u30eb\u4ed8<\/li>\n          <\/ul>\n          <div class=\"jw-svc-meta\">Delivery &mdash; <em>1\u20132 weeks<\/em><\/div>\n          <a href=\"#contact\" class=\"jw-svc-cta\">\u3053\u306e\u30d7\u30e9\u30f3\u3067\u76f8\u8ac7 \u2192<\/a>\n        <\/div>\n        <div class=\"jw-svc-col\">\n          <span class=\"jw-svc-no\">\u2014 02 \u2014<\/span>\n          <div class=\"jw-svc-name\">\u96c6\u5ba2\u30bb\u30c3\u30c8<\/div>\n          <div class=\"jw-svc-for\">HP\u3068\u30bb\u30c3\u30c8\u3067\u96c6\u5ba2\u3057\u305f\u3044\u65b9\u3078<\/div>\n          <div class=\"jw-svc-price\">\u00a5100,000<em>\u301c<\/em><small>From \/ \u7a0e\u8fbc<\/small><\/div>\n          <ul class=\"jw-svc-list\">\n            <li>\u958b\u8a2d\u30d1\u30c3\u30af\u5185\u5bb9\u3059\u3079\u3066<\/li>\n            <li>HP\u30fbSNS\u304b\u3089\u306e\u53cb\u3060\u3061\u8ffd\u52a0\u5c0e\u7dda<\/li>\n            <li>\u30b9\u30c6\u30c3\u30d7\u914d\u4fe1 3\u901a\u30c6\u30f3\u30d7\u30ec<\/li>\n            <li>\u30ea\u30c3\u30c1\u30e1\u30cb\u30e5\u30fc 2\u679a \/ \u5207\u66ff\u5bfe\u5fdc<\/li>\n          <\/ul>\n          <div class=\"jw-svc-meta\">Delivery &mdash; <em>2\u20133 weeks<\/em><\/div>\n          <a href=\"#contact\" class=\"jw-svc-cta\">\u3053\u306e\u30d7\u30e9\u30f3\u3067\u76f8\u8ac7 \u2192<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- IV. PROCESS -->\n<section class=\"jw-sec alt\" id=\"process\" data-ghost=\"IV.\">\n  <div class=\"jw-sec-inner\">\n    <div class=\"jw-sec-head\">\n      <div class=\"jw-sec-no\">SECTION IV<br><strong>\u3054\u4f9d\u983c\u306e\u6d41\u308c<\/strong><\/div>\n      <div>\n        <span class=\"jw-sec-kicker\">Process &mdash; <em>Four Simple Steps<\/em><\/span>\n        <h2 class=\"jw-sec-title\">\u304a\u554f\u3044\u5408\u308f\u305b\u304b\u3089\u7d0d\u54c1\u307e\u3067\u3001<em>\u7d042\u9031\u9593\u3002<\/em><\/h2>\n      <\/div>\n    <\/div>\n    <div class=\"jw-proc reveal\">\n      <div class=\"jw-proc-step\">\n        <span class=\"jw-proc-no\">01<\/span>\n        <div class=\"jw-proc-kicker\">Step 01<\/div>\n        <div class=\"jw-proc-title\">\u304a\u554f\u3044\u5408\u308f\u305b<\/div>\n        <div class=\"jw-proc-dur\">\u2014 \u6240\u8981 5\u5206<\/div>\n        <p class=\"jw-proc-desc\">\u4e0b\u90e8\u30d5\u30a9\u30fc\u30e0\u304b\u3089\u9001\u4fe1\u3002\u5e0c\u671b\u30d7\u30e9\u30f3\u30fb\u9023\u7d61\u624b\u6bb5\u30fb\u7740\u624b\u5e0c\u671b\u6642\u671f\u306a\u3069\u3092\u7c21\u5358\u306b\u4f3a\u3044\u307e\u3059\u3002<\/p>\n      <\/div>\n      <div class=\"jw-proc-step\">\n        <span class=\"jw-proc-no\">02<\/span>\n        <div class=\"jw-proc-kicker\">Step 02<\/div>\n        <div class=\"jw-proc-title\">\u7121\u6599\u76f8\u8ac7<\/div>\n        <div class=\"jw-proc-dur\">\u2014 30\u5206 \/ Web<\/div>\n        <p class=\"jw-proc-desc\">Web\u4f1a\u8b70\uff08Google Meet\u4e2d\u5fc3\uff09\uff0f\u30e1\u30fc\u30eb\uff0f\u96fb\u8a71\uff0fLINE \u304b\u3089\u3001\u304a\u597d\u307f\u306e\u624b\u6bb5\u3067\u30d2\u30a2\u30ea\u30f3\u30b0\u3002<\/p>\n      <\/div>\n      <div class=\"jw-proc-step\">\n        <span class=\"jw-proc-no\">03<\/span>\n        <div class=\"jw-proc-kicker\">Step 03<\/div>\n        <div class=\"jw-proc-title\">\u304a\u898b\u7a4d\u3082\u308a<\/div>\n        <div class=\"jw-proc-dur\">\u2014 2\u55b6\u696d\u65e5\u4ee5\u5185<\/div>\n        <p class=\"jw-proc-desc\">\u5185\u5bb9\u306b\u5408\u308f\u305b\u3066\u304a\u898b\u7a4d\u66f8\u3092\u304a\u9001\u308a\u3057\u307e\u3059\u3002\u696d\u52d9\u59d4\u8a17\u5951\u7d04\u66f8\u3082\u3053\u306e\u6bb5\u968e\u3067\u7de0\u7d50\u3002\u8ffd\u52a0\u6599\u91d1\u306f\u4e00\u5207\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n      <\/div>\n      <div class=\"jw-proc-step\">\n        <span class=\"jw-proc-no\">04<\/span>\n        <div class=\"jw-proc-kicker\">Step 04<\/div>\n        <div class=\"jw-proc-title\">\u5236\u4f5c\u30fb\u7d0d\u54c1<\/div>\n        <div class=\"jw-proc-dur\">\u2014 \u7d042\u9031\u9593\u301c<\/div>\n        <p class=\"jw-proc-desc\">\u30c7\u30b6\u30a4\u30f3\u301c\u5b9f\u88c5\u301c\u4fee\u6b63\u301c\u7d0d\u54c1\u307e\u3067\u4e00\u8cab\u3002\u516c\u958b\u5f8c\u306e\u30b5\u30dd\u30fc\u30c8\u3082\u30d7\u30e9\u30f3\u306b\u5fdc\u3058\u3066\u4f34\u8d70\u3057\u307e\u3059\u3002<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- V. FAQ (peek) -->\n<section class=\"jw-sec\" id=\"faq\" data-ghost=\"V.\">\n  <div class=\"jw-sec-inner\">\n    <div class=\"jw-sec-head\">\n      <div class=\"jw-sec-no\">SECTION V<br><strong>\u3088\u304f\u3042\u308b\u8cea\u554f<\/strong><\/div>\n      <div>\n        <span class=\"jw-sec-kicker\">FAQ &mdash; <em>Questions, Answered<\/em><\/span>\n        <h2 class=\"jw-sec-title\">\u6c17\u306b\u306a\u308b\u70b9\u306f\u3001<em>\u5148\u306b\u6f70\u3059\u3002<\/em><\/h2>\n      <\/div>\n    <\/div>\n\n    <div class=\"jw-faq-list reveal\">\n      <div class=\"jw-faq-item\">\n        <div class=\"jw-faq-q\"><span class=\"jw-faq-no\">Q.01<\/span><span class=\"jw-faq-text\">\u5951\u7d04\u66f8\u306f\u5fc5\u8981\u3067\u3059\u304b\uff1f<\/span><span class=\"jw-faq-plus\">+<\/span><\/div>\n        <div class=\"jw-faq-a\"><span class=\"jw-faq-a-no\">A.<\/span><span class=\"jw-faq-a-text\">\u5c0f\u898f\u6a21\u6848\u4ef6\u3067\u3082\u3001\u7c21\u6613\u306e\u696d\u52d9\u59d4\u8a17\u5951\u7d04\u66f8\u3092\u5fc5\u305a\u4ea4\u308f\u3057\u307e\u3059\u3002\u53cc\u65b9\u306b\u3068\u3063\u3066\u5b89\u5fc3\u3057\u3066\u9032\u3081\u3089\u308c\u308b\u305f\u3081\u3067\u3059\u3002<\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"jw-faq-item\">\n        <div class=\"jw-faq-q\"><span class=\"jw-faq-no\">Q.02<\/span><span class=\"jw-faq-text\">\u3069\u3093\u306a\u696d\u7a2e\u306e\u6848\u4ef6\u304c\u591a\u3044\u3067\u3059\u304b\uff1f<\/span><span class=\"jw-faq-plus\">+<\/span><\/div>\n        <div class=\"jw-faq-a\"><span class=\"jw-faq-a-no\">A.<\/span><span class=\"jw-faq-a-text\">\u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u58eb\u696d\u30fb\u5c0f\u898f\u6a21\u5e97\u8217\u30fb\u30af\u30ea\u30a8\u30a4\u30bf\u30fc\u7cfb\u304c\u591a\u3081\u3067\u3059\u3002\u300c\u81ea\u5206\u3067WordPress\u306f\u96e3\u3057\u3044\u300d\u3068\u3044\u3046\u6bb5\u968e\u306e\u65b9\u306e\u30b5\u30dd\u30fc\u30c8\u3092\u5f97\u610f\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"jw-faq-item\">\n        <div class=\"jw-faq-q\"><span class=\"jw-faq-no\">Q.03<\/span><span class=\"jw-faq-text\">\u9060\u65b9\u3067\u3082\u4f9d\u983c\u3067\u304d\u307e\u3059\u304b\uff1f<\/span><span class=\"jw-faq-plus\">+<\/span><\/div>\n        <div class=\"jw-faq-a\"><span class=\"jw-faq-a-no\">A.<\/span><span class=\"jw-faq-a-text\">\u5b8c\u5168\u30aa\u30f3\u30e9\u30a4\u30f3\u5bfe\u5fdc\u3067\u3059\u3002\u5168\u56fd\u3069\u3053\u304b\u3089\u3067\u3082\u3054\u4f9d\u983c\u3044\u305f\u3060\u3051\u307e\u3059\u3002Web\u4f1a\u8b70\uff08Google Meet\u4e2d\u5fc3\uff09\uff0f\u30e1\u30fc\u30eb\uff0f\u96fb\u8a71\uff0fLINE \u304b\u3089\u304a\u597d\u307f\u3067\u3002<\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"jw-faq-item\">\n        <div class=\"jw-faq-q\"><span class=\"jw-faq-no\">Q.04<\/span><span class=\"jw-faq-text\">LINE\u516c\u5f0f\u30a2\u30ab\u30a6\u30f3\u30c8\u3060\u3051\u306e\u4f9d\u983c\u3082\u53ef\u80fd\u3067\u3059\u304b\uff1f<\/span><span class=\"jw-faq-plus\">+<\/span><\/div>\n        <div class=\"jw-faq-a\"><span class=\"jw-faq-a-no\">A.<\/span><span class=\"jw-faq-a-text\">\u3082\u3061\u308d\u3093\u53ef\u80fd\u3067\u3059\u3002HP\u5236\u4f5c\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3082\u3001LINE\u69cb\u7bc9\u3060\u3051\u5358\u4f53\u3067\u3082\u304a\u53d7\u3051\u3057\u3066\u3044\u307e\u3059\u3002<\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"jw-faq-item\">\n        <div class=\"jw-faq-q\"><span class=\"jw-faq-no\">Q.05<\/span><span class=\"jw-faq-text\">AI\u306f\u5177\u4f53\u7684\u306b\u4f55\u306b\u4f7f\u3048\u307e\u3059\u304b\uff1f<\/span><span class=\"jw-faq-plus\">+<\/span><\/div>\n        <div class=\"jw-faq-a\"><span class=\"jw-faq-a-no\">A.<\/span><span class=\"jw-faq-a-text\">\u8a18\u4e8b\u4e0b\u66f8\u304d\u30fb\u753b\u50cf\u751f\u6210\u30fbFAQ\u81ea\u52d5\u4f5c\u6210\u30fb\u6587\u5b57\u8d77\u3053\u3057\u30fbSEO\u30bf\u30a4\u30c8\u30eb\u6539\u5584\u306a\u3069\u3001\u7528\u9014\u306f\u5e45\u5e83\u3044\u3067\u3059\u3002\u300c\u3053\u3046\u3044\u3046\u4f5c\u696d\u3092\u81ea\u52d5\u5316\u3057\u305f\u3044\u300d\u3068\u3044\u3046\u76f8\u8ac7\u30d9\u30fc\u30b9\u3067\u3001Claude \/ OpenAI API \u3092\u4f7f\u3063\u305f\u30c4\u30fc\u30eb\u3092\u3054\u63d0\u6848\u3057\u307e\u3059\u3002<\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"jw-faq-item\">\n        <div class=\"jw-faq-q\"><span class=\"jw-faq-no\">Q.06<\/span><span class=\"jw-faq-text\">\u4fee\u6b63\u306f\u4f55\u56de\u307e\u3067\u5bfe\u5fdc\u3057\u3066\u3082\u3089\u3048\u307e\u3059\u304b\uff1f<\/span><span class=\"jw-faq-plus\">+<\/span><\/div>\n        <div class=\"jw-faq-a\"><span class=\"jw-faq-a-no\">A.<\/span><span class=\"jw-faq-a-text\">\u30d7\u30e9\u30f3\u306b\u5fdc\u3058\u3066\u7d0d\u54c1\u524d\u306b2\u301c3\u56de\u306e\u4fee\u6b63\u3092\u542b\u307f\u307e\u3059\u3002\u7d0d\u54c1\u5f8c\u306e\u5fae\u8abf\u6574\u306f\u30b5\u30dd\u30fc\u30c8\u671f\u9593\u5185\u3067\u67d4\u8edf\u306b\u5bfe\u5fdc\u3057\u307e\u3059\u306e\u3067\u3001\u7d30\u304b\u3044\u3053\u3068\u3067\u3082\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002<\/span><span><\/span><\/div>\n      <\/div>\n      <div class=\"jw-faq-item\">\n        <div class=\"jw-faq-q\"><span class=\"jw-faq-no\">Q.07<\/span><span class=\"jw-faq-text\">\u7d0d\u671f\u306f\u3069\u306e\u304f\u3089\u3044\u3067\u3059\u304b\uff1f<\/span><span class=\"jw-faq-plus\">+<\/span><\/div>\n        <div class=\"jw-faq-a\"><span class=\"jw-faq-a-no\">A.<\/span><span class=\"jw-faq-a-text\">\u304a\u8a66\u3057\u30d7\u30e9\u30f3\uff08Starter\uff09\u306f\u7d042\u9031\u9593\u3001\u6a19\u6e96\u7684\u306aHP\u5236\u4f5c\uff08Basic\u301cStandard\uff09\u306f\u7d043\u301c8\u9031\u9593\u304c\u76ee\u5b89\u3067\u3059\u3002\u304a\u6025\u304e\u306e\u5834\u5408\u306f\u307e\u305a\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002<\/span><span><\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <p class=\"jw-faq-hint\">\u2191 <em>\u8cea\u554f\u3092\u30bf\u30c3\u30d7<\/em>\u3059\u308b\u3068\u3001\u7b54\u3048\u306e\u7d9a\u304d\u304c\u8aad\u3081\u307e\u3059\u3002<\/p>\n  <\/div>\n<\/section>\n\n<!-- CTA HERO -->\n<section class=\"jw-cta-hero\">\n  <div class=\"jw-cta-grid\">\n    <div class=\"jw-cta-label\">FINAL NOTE<br><strong>\u5dfb\u672b\u306e\u4e00\u6587<\/strong><\/div>\n    <div class=\"reveal\">\n      <h2 class=\"jw-cta-title\">\u6c17\u306b\u306a\u308b\u70b9\u304c\u3042\u308c\u3070\u3001<br><em>\u307e\u305a\u4e00\u5ea6\u3001\u3054\u76f8\u8ac7\u3092\u3002<\/em><\/h2>\n      <p class=\"jw-cta-lead\">\u7121\u6599\u76f8\u8ac7\u3060\u3051\u3067\u3082OK\u3002Web\u4f1a\u8b70\u30fb\u30e1\u30fc\u30eb\u30fb\u96fb\u8a71\u3001\u304a\u597d\u307f\u306e\u65b9\u6cd5\u3067\u3002\u521d\u56de\u76f8\u8ac7\u306f\u5b8c\u5168\u7121\u6599\u3001\u3057\u3064\u3053\u3044\u55b6\u696d\u3082\u3057\u307e\u305b\u3093\u3002<\/p>\n      <div class=\"jw-cta-actions\">\n        <a href=\"#contact\" class=\"jw-cta-btn\">\u7121\u6599\u3067\u76f8\u8ac7\u3059\u308b <em>\u2192<\/em><\/a>\n        <a href=\"#services\" class=\"jw-cta-ghost\">\u6599\u91d1\u30d7\u30e9\u30f3\u3092\u78ba\u8a8d\u3059\u308b<\/a>\n      <\/div>\n    <\/div>\n    <ul class=\"jw-cta-promises reveal\">\n      <li>\u2709\ufe0e <em>\u521d\u56de\u76f8\u8ac7 \u7121\u6599<\/em><\/li>\n      <li>\u26a1 <em>2\u55b6\u696d\u65e5\u4ee5\u5185<\/em>\u306b\u8fd4\u4fe1<\/li>\n      <li>\ud83d\udd12 \u3057\u3064\u3053\u3044\u55b6\u696d <em>\u306a\u3057<\/em><\/li>\n      <li>\ud83d\udccd <em>\u5b8c\u5168\u30aa\u30f3\u30e9\u30a4\u30f3<\/em> \u5168\u56fd\u5bfe\u5fdc<\/li>\n    <\/ul>\n  <\/div>\n<\/section>\n\n<!-- VI. CONTACT -->\n<section class=\"jw-sec jw-contact\" id=\"contact\" data-ghost=\"VI.\">\n  <div class=\"jw-sec-inner\">\n    <div class=\"jw-sec-head\">\n      <div class=\"jw-sec-no\">SECTION VI<br><strong>\u304a\u554f\u3044\u5408\u308f\u305b<\/strong><\/div>\n      <div>\n        <span class=\"jw-sec-kicker\">Contact &mdash; <em>Commission Sheet<\/em><\/span>\n        <h2 class=\"jw-sec-title\">\u304a\u4ed5\u4e8b\u306e\u3054\u4f9d\u983c\u30fb<em>\u3054\u76f8\u8ac7<\/em>\u306f\u3001\u3053\u3061\u3089\u304b\u3089\u3002<\/h2>\n      <\/div>\n    <\/div>\n\n    <div class=\"jw-contact-inner\">\n      <div class=\"jw-contact-label\">WORKFLOW<br>\u2014 \u9032\u3081\u65b9<\/div>\n\n      <!-- Commission Sheet (\u9078\u629e\u5f0f) -->\n      <form class=\"jw-commission reveal\" id=\"jw-commission-form\" onsubmit=\"return false\">\n        <div class=\"jw-commission-head\">\n          The Commission <em>Sheet<\/em>\n          <small>\u4e0b\u8a18\u304b\u3089\u8a72\u5f53\u3059\u308b\u3082\u306e\u3092\u9078\u3076\u3060\u3051\u3002<br>\u9078\u629e\u5185\u5bb9\u306f\u3001\u53f3\u5074\u30e1\u30c3\u30bb\u30fc\u30b8\u6b04\u3078<em>\u81ea\u52d5\u8ee2\u8a18<\/em>\u3055\u308c\u307e\u3059\u3002<\/small>\n        <\/div>\n\n        <!-- \u3054\u5e0c\u671b\u30d7\u30e9\u30f3 -->\n        <div class=\"jw-field\">\n          <div class=\"jw-field-label\">\n            <span class=\"jw-field-no\">01<\/span>\n            <span class=\"jw-field-title\">\u3054\u5e0c\u671b\u30d7\u30e9\u30f3 <em>Plan<\/em><\/span>\n          <\/div>\n          <div class=\"jw-field-options cols-3\" data-field=\"plan\">\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>Starter <em>\u00a550k<\/em><input type=\"radio\" name=\"plan\" value=\"Starter \u00a550,000\u301c\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>Basic <em>\u00a5150k<\/em><input type=\"radio\" name=\"plan\" value=\"Basic \u00a5150,000\u301c\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>Standard <em>\u00a5300k<\/em><input type=\"radio\" name=\"plan\" value=\"Standard \u00a5300,000\u301c\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>Premium <em>\u5fdc\u76f8\u8ac7<\/em><input type=\"radio\" name=\"plan\" value=\"Premium \u5fdc\u76f8\u8ac7\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>LINE\u958b\u8a2d <em>\u00a550k<\/em><input type=\"radio\" name=\"plan\" value=\"LINE\u958b\u8a2d\u30d1\u30c3\u30af \u00a550,000\u301c\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>LINE\u96c6\u5ba2 <em>\u00a5100k<\/em><input type=\"radio\" name=\"plan\" value=\"LINE\u96c6\u5ba2\u30bb\u30c3\u30c8 \u00a5100,000\u301c\" hidden><\/label>\n            <label class=\"jw-option\" style=\"grid-column:span 3;\"><span class=\"jw-radio\"><\/span>\u672a\u5b9a\uff0f\u76f8\u8ac7\u3057\u305f\u3044<input type=\"radio\" name=\"plan\" value=\"\u672a\u5b9a\u30fb\u76f8\u8ac7\u3057\u305f\u3044\" hidden><\/label>\n          <\/div>\n        <\/div>\n\n        <!-- \u3054\u5e0c\u671b\u306e\u9023\u7d61\u624b\u6bb5 -->\n        <div class=\"jw-field\">\n          <div class=\"jw-field-label\">\n            <span class=\"jw-field-no\">02<\/span>\n            <span class=\"jw-field-title\">\u3054\u5e0c\u671b\u306e\u9023\u7d61\u624b\u6bb5 <em>Contact Method<\/em><\/span>\n          <\/div>\n          <div class=\"jw-field-options\" data-field=\"method\">\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>\ud83d\udcf9 Web\u4f1a\u8b70\uff08Google Meet\uff09<input type=\"radio\" name=\"method\" value=\"Web\u4f1a\u8b70\uff08Google Meet\uff09\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>\u2709\ufe0f \u30e1\u30fc\u30eb<input type=\"radio\" name=\"method\" value=\"\u30e1\u30fc\u30eb\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>\ud83d\udcde \u96fb\u8a71<input type=\"radio\" name=\"method\" value=\"\u96fb\u8a71\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>\ud83d\udfe2 LINE<input type=\"radio\" name=\"method\" value=\"LINE\" hidden><\/label>\n          <\/div>\n        <\/div>\n\n        <!-- \u7740\u624b\u5e0c\u671b\u6642\u671f -->\n        <div class=\"jw-field\">\n          <div class=\"jw-field-label\">\n            <span class=\"jw-field-no\">03<\/span>\n            <span class=\"jw-field-title\">\u7740\u624b\u5e0c\u671b\u6642\u671f <em>Timeline<\/em><\/span>\n          <\/div>\n          <div class=\"jw-field-options\" data-field=\"timing\">\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>\u4eca\u3059\u3050<input type=\"radio\" name=\"timing\" value=\"\u4eca\u3059\u3050\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>1\u30f6\u6708\u4ee5\u5185<input type=\"radio\" name=\"timing\" value=\"1\u30f6\u6708\u4ee5\u5185\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>3\u30f6\u6708\u4ee5\u5185<input type=\"radio\" name=\"timing\" value=\"3\u30f6\u6708\u4ee5\u5185\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>\u672a\u5b9a<input type=\"radio\" name=\"timing\" value=\"\u672a\u5b9a\" hidden><\/label>\n          <\/div>\n        <\/div>\n\n        <!-- \u3054\u4e88\u7b97\u76ee\u5b89 -->\n        <div class=\"jw-field\">\n          <div class=\"jw-field-label\">\n            <span class=\"jw-field-no\">04<\/span>\n            <span class=\"jw-field-title\">\u3054\u4e88\u7b97\u76ee\u5b89 <em>Budget<\/em><\/span>\n          <\/div>\n          <div class=\"jw-field-options cols-3\" data-field=\"budget\">\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>\u301c5\u4e07\u5186<input type=\"radio\" name=\"budget\" value=\"\u301c5\u4e07\u5186\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>5\u301c15\u4e07\u5186<input type=\"radio\" name=\"budget\" value=\"5\u301c15\u4e07\u5186\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>15\u301c30\u4e07\u5186<input type=\"radio\" name=\"budget\" value=\"15\u301c30\u4e07\u5186\" hidden><\/label>\n            <label class=\"jw-option\"><span class=\"jw-radio\"><\/span>30\u4e07\u5186\u4ee5\u4e0a<input type=\"radio\" name=\"budget\" value=\"30\u4e07\u5186\u4ee5\u4e0a\" hidden><\/label>\n            <label class=\"jw-option\" style=\"grid-column:span 3;\"><span class=\"jw-radio\"><\/span>\u76f8\u8ac7\u3057\u305f\u3044<input type=\"radio\" name=\"budget\" value=\"\u76f8\u8ac7\u3057\u305f\u3044\" hidden><\/label>\n          <\/div>\n        <\/div>\n\n        <div class=\"jw-commission-foot\">\n          \u9078\u3093\u3060\u5185\u5bb9\u306f\u53f3\u306e <strong>\u30b3\u30e1\u30f3\u30c8\u307e\u305f\u306f\u30e1\u30c3\u30bb\u30fc\u30b8<\/strong> \u6b04\u306b <em>\u81ea\u52d5\u8ee2\u8a18<\/em> \u3055\u308c\u307e\u3059\u3002\u8a18\u5165\u5f8c\u305d\u306e\u307e\u307e\u9001\u4fe1\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n        <\/div>\n      <\/form>\n\n      <!-- Right: form + promises -->\n      <div class=\"jw-contact-form reveal\">\n        <div class=\"jw-contact-form-head\">Write a Message &mdash; <em>\u3069\u3046\u305e\u304a\u6c17\u8efd\u306b<\/em><\/div>\n        <style id=\"wpforms-css-vars-18\">\n\t\t\t\t#wpforms-18 {\n\t\t\t\t--wpforms-container-padding: 0px;\n--wpforms-container-border-width: 1px;\n--wpforms-container-border-radius: 3px;\n--wpforms-background-color: rgba(0, 0, 0, 0);\n--wpforms-field-size-input-height: 43px;\n--wpforms-field-size-input-spacing: 15px;\n--wpforms-field-size-font-size: 16px;\n--wpforms-field-size-line-height: 19px;\n--wpforms-field-size-padding-h: 14px;\n--wpforms-field-size-checkbox-size: 16px;\n--wpforms-field-size-sublabel-spacing: 5px;\n--wpforms-field-size-icon-size: 1;\n--wpforms-label-size-font-size: 16px;\n--wpforms-label-size-line-height: 19px;\n--wpforms-label-size-sublabel-font-size: 14px;\n--wpforms-label-size-sublabel-line-height: 17px;\n--wpforms-button-size-font-size: 17px;\n--wpforms-button-size-height: 41px;\n--wpforms-button-size-padding-h: 15px;\n--wpforms-button-size-margin-top: 10px;\n--wpforms-container-shadow-size-box-shadow: none;\n\t\t\t}\n\t\t\t<\/style><div class=\"wpforms-container wpforms-container-full wpforms-render-modern\" id=\"wpforms-18\"><form id=\"wpforms-form-18\" class=\"wpforms-validate wpforms-form wpforms-ajax-form\" data-formid=\"18\" method=\"post\" enctype=\"multipart\/form-data\" action=\"\/blog\/wp-json\/wp\/v2\/pages\/80\" data-token=\"2deedc82b2b333286a2de93f82d495ad\" data-token-time=\"1776692362\"><noscript class=\"wpforms-error-noscript\">\u3053\u306e\u30d5\u30a9\u30fc\u30e0\u306b\u5165\u529b\u3059\u308b\u306b\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u3067 JavaScript \u3092\u6709\u52b9\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/noscript><div id=\"wpforms-error-noscript\" style=\"display: none;\">\u3053\u306e\u30d5\u30a9\u30fc\u30e0\u306b\u5165\u529b\u3059\u308b\u306b\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u3067 JavaScript \u3092\u6709\u52b9\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/div><div class=\"wpforms-field-container\"><div id=\"wpforms-18-field_1-container\" class=\"wpforms-field wpforms-field-name\" data-field-id=\"1\"><fieldset><legend class=\"wpforms-field-label\">\u540d\u524d <span class=\"wpforms-required-label\" aria-hidden=\"true\">*<\/span><\/legend><div class=\"wpforms-field-row wpforms-field-medium\"><div class=\"wpforms-field-row-block wpforms-first wpforms-one-half\"><input type=\"text\" id=\"wpforms-18-field_1\" class=\"wpforms-field-name-first wpforms-field-required\" name=\"wpforms[fields][1][first]\" aria-errormessage=\"wpforms-18-field_1-error\" required><label for=\"wpforms-18-field_1\" class=\"wpforms-field-sublabel after\">\u540d<\/label><\/div><div class=\"wpforms-field-row-block wpforms-one-half\"><input type=\"text\" id=\"wpforms-18-field_1-last\" class=\"wpforms-field-name-last wpforms-field-required\" name=\"wpforms[fields][1][last]\" aria-errormessage=\"wpforms-18-field_1-last-error\" required><label for=\"wpforms-18-field_1-last\" class=\"wpforms-field-sublabel after\">\u59d3<\/label><\/div><\/div><\/fieldset><\/div><div id=\"wpforms-18-field_2-container\" class=\"wpforms-field wpforms-field-email\" data-field-id=\"2\"><label class=\"wpforms-field-label\" for=\"wpforms-18-field_2\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9 <span class=\"wpforms-required-label\" aria-hidden=\"true\">*<\/span><\/label><input type=\"email\" id=\"wpforms-18-field_2\" class=\"wpforms-field-medium wpforms-field-required\" name=\"wpforms[fields][2]\" spellcheck=\"false\" aria-errormessage=\"wpforms-18-field_2-error\" required><\/div>\t\t<div id=\"wpforms-18-field_4-container\"\n\t\t\tclass=\"wpforms-field wpforms-field-text\"\n\t\t\tdata-field-type=\"text\"\n\t\t\tdata-field-id=\"4\"\n\t\t\t>\n\t\t\t<label class=\"wpforms-field-label\" for=\"wpforms-18-field_4\" >\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9 \u30b3\u30e1\u30f3\u30c8\u307e\u305f\u306f\u30e1\u30c3\u30bb\u30fc\u30b8 \u540d\u524d<\/label>\n\t\t\t<input type=\"text\" id=\"wpforms-18-field_4\" class=\"wpforms-field-medium\" name=\"wpforms[fields][4]\" >\n\t\t<\/div>\n\t\t<div id=\"wpforms-18-field_3-container\" class=\"wpforms-field wpforms-field-textarea\" data-field-id=\"3\"><label class=\"wpforms-field-label\" for=\"wpforms-18-field_3\">\u30b3\u30e1\u30f3\u30c8\u307e\u305f\u306f\u30e1\u30c3\u30bb\u30fc\u30b8<\/label><textarea id=\"wpforms-18-field_3\" class=\"wpforms-field-medium\" name=\"wpforms[fields][3]\" aria-errormessage=\"wpforms-18-field_3-error\" ><\/textarea><\/div><script>\n\t\t\t\t( function() {\n\t\t\t\t\tconst style = document.createElement( 'style' );\n\t\t\t\t\tstyle.appendChild( document.createTextNode( '#wpforms-18-field_4-container { position: absolute !important; overflow: hidden !important; display: inline !important; height: 1px !important; width: 1px !important; z-index: -1000 !important; padding: 0 !important; } #wpforms-18-field_4-container input { visibility: hidden; } #wpforms-conversational-form-page #wpforms-18-field_4-container label { counter-increment: none; }' ) );\n\t\t\t\t\tdocument.head.appendChild( style );\n\t\t\t\t\tdocument.currentScript?.remove();\n\t\t\t\t} )();\n\t\t\t<\/script><\/div><!-- .wpforms-field-container --><div class=\"wpforms-submit-container\" ><input type=\"hidden\" name=\"wpforms[id]\" value=\"18\"><input type=\"hidden\" name=\"page_title\" value=\"\"><input type=\"hidden\" name=\"page_url\" value=\"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/pages\/80\"><input type=\"hidden\" name=\"url_referer\" value=\"\"><button type=\"submit\" name=\"wpforms[submit]\" id=\"wpforms-submit-18\" class=\"wpforms-submit\" data-alt-text=\"\u9001\u4fe1\u4e2d\u2026\" data-submit-text=\"\u9001\u4fe1\" aria-live=\"assertive\" value=\"wpforms-submit\">\u9001\u4fe1<\/button><img decoding=\"async\" src=\"https:\/\/works.jouhounokatachi.com\/blog\/wp-content\/plugins\/wpforms-lite\/assets\/images\/submit-spin.svg\" class=\"wpforms-submit-spinner\" style=\"display: none;\" width=\"26\" height=\"26\" alt=\"\u8aad\u307f\u8fbc\u307f\u4e2d\"><\/div><\/form><\/div>  <!-- .wpforms-container -->\n        <p class=\"jw-contact-note\">\u203b 2\u55b6\u696d\u65e5\u7d4c\u3063\u3066\u3082\u8fd4\u4fe1\u304c\u306a\u3044\u5834\u5408\u306f\u3001<em>\u8ff7\u60d1\u30e1\u30fc\u30eb\u30d5\u30a9\u30eb\u30c0<\/em>\u3092\u3054\u78ba\u8a8d\u306e\u4e0a\u3001\u518d\u5ea6\u3054\u9023\u7d61\u304f\u3060\u3055\u3044\u3002<\/p>\n\n        <ul class=\"jw-contact-checklist\">\n          <li>\u521d\u56de\u76f8\u8ac7\u306f<strong>\u5b8c\u5168\u7121\u6599<\/strong>\u3002<\/li>\n          <li>\u9001\u4fe1\u5f8c<strong>\u5373\u65e5\u301c2\u55b6\u696d\u65e5\u4ee5\u5185<\/strong>\u306b\u3054\u8fd4\u4fe1\u3057\u307e\u3059\u3002<\/li>\n          <li>\u696d\u52d9\u59d4\u8a17\u5951\u7d04\u66f8\u3092\u7de0\u7d50\u3057\u3066\u304b\u3089\u5236\u4f5c\u958b\u59cb\u3002<\/li>\n          <li>\u3057\u3064\u3053\u3044\u55b6\u696d\u30fb\u52e7\u8a98\u306f\u4e00\u5207\u3057\u307e\u305b\u3093\u3002<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- FOOTER \/ COLOPHON -->\n<footer class=\"jw-colophon\">\n  <div class=\"jw-colophon-inner\">\n    <div class=\"jw-colo-brand\">\n      <h4>JO <em>Works<\/em><\/h4>\n      <p>\u500b\u4eba\u4e8b\u696d\u4e3b\u306e\u305f\u3081\u306eHP\u5236\u4f5c \u00d7 AI \u00d7 LINE\u69cb\u7bc9\u3092\u3001\u3072\u3068\u308a\u3067\u56de\u3057\u3066\u3044\u307e\u3059\u3002\u60c5\u5831\u3092\u3001\u30ab\u30bf\u30c1\u306b\u3002<\/p>\n    <\/div>\n    <div class=\"jw-colo-col\">\n      <h5>\u30b5\u30a4\u30c8\u5185<\/h5>\n      <ul>\n        <li><a href=\"#works\">I. \u5236\u4f5c\u5b9f\u7e3e <em>Works<\/em><\/a><\/li>\n        <li><a href=\"#about\">II. \u30b8\u30e7\u30fc\u306b\u3064\u3044\u3066 <em>Studio<\/em><\/a><\/li>\n        <li><a href=\"#services\">III. \u6599\u91d1\u30d7\u30e9\u30f3 <em>Services<\/em><\/a><\/li>\n        <li><a href=\"#process\">IV. \u3054\u4f9d\u983c\u306e\u6d41\u308c <em>Process<\/em><\/a><\/li>\n        <li><a href=\"#faq\">V. \u3088\u304f\u3042\u308b\u8cea\u554f <em>FAQ<\/em><\/a><\/li>\n        <li><a href=\"#contact\">VI. \u304a\u554f\u3044\u5408\u308f\u305b <em>Contact<\/em><\/a><\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"jw-colo-col\">\n      <h5>\u904b\u55b6\u306b\u3064\u3044\u3066<\/h5>\n      <ul>\n        <li>\u500b\u4eba\u4e8b\u696d\u4e3b\u3068\u3057\u30662026\u5e74\u306b\u30b9\u30bf\u30fc\u30c8<\/li>\n        <li>\u6848\u4ef6\u3054\u3068\u306b\u696d\u52d9\u59d4\u8a17\u5951\u7d04\u66f8\u3092\u7de0\u7d50<\/li>\n        <li>\u5168\u56fd\u30aa\u30f3\u30e9\u30a4\u30f3\u5bfe\u5fdc<\/li>\n        <li>\u521d\u56de\u76f8\u8ac7\u306f\u5b8c\u5168\u7121\u6599<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"jw-colo-col\">\n      <h5>Type Colophon<\/h5>\n      <ul>\n        <li>Display \u2014 <em>Fraunces<\/em><\/li>\n        <li>Body \u2014 <em>Noto Serif JP<\/em><\/li>\n        <li>Meta \u2014 <em>IBM Plex Mono<\/em><\/li>\n        <li>Accent \u2014 <em>Terracotta<\/em><\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n  <div class=\"jw-colo-foot\">\n    <div>\u00a9 MMXXVI \u2014 JO WORKS. <em>\u60c5\u5831\u3092\u3001\u30ab\u30bf\u30c1\u306b\u3002<\/em><\/div>\n    <div>SET IN FRAUNCES &amp; NOTO SERIF JP \u2014 <em>Handcrafted<\/em><\/div>\n  <\/div>\n<\/footer>\n\n<\/div><!-- \/.jw-folio -->\n<\/div><!-- \/.jw-folio-host -->\n\n\n\n\n\n\n\n\n\n<script id=\"jw-folio-v10-litespeed-bypass\">\n(function(){\n  function restoreImgs(){\n    document.querySelectorAll('.jw-folio img[data-src]').forEach(img => {\n      const s = img.getAttribute('data-src');\n      if (s && img.src !== s) {\n        img.src = s;\n        img.removeAttribute('data-src');\n      }\n    });\n    document.querySelectorAll('.jw-folio img[data-lazy-src]').forEach(img => {\n      const s = img.getAttribute('data-lazy-src');\n      if (s && img.src !== s) {\n        img.src = s;\n        img.removeAttribute('data-lazy-src');\n      }\n    });\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', restoreImgs);\n  } else {\n    restoreImgs();\n  }\n  \/\/ \u3082\u3046\u4e00\u5ea6\u5ff5\u306e\u305f\u3081\n  setTimeout(restoreImgs, 100);\n  setTimeout(restoreImgs, 500);\n})();\n<\/script>\n\n\n\n\n<style id=\"jw-folio-v11-patch-fix3\">\n\/* About: JO \u30e2\u30ce\u30b0\u30e9\u30e0 \u2192 \u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u5316 + \u5727\u7e2e *\/\n.jw-folio .jw-about-portrait{\n  height:260px !important;\n  min-height:auto !important;\n  width:100% !important;\n  background: url('https:\/\/works.jouhounokatachi.com\/blog\/wp-content\/uploads\/2026\/04\/jo-avatar-v11.jpeg') center\/cover no-repeat,\n              var(--paper-2) !important;\n  border-radius:14px !important;\n  overflow:hidden !important;\n  position:relative !important;\n  filter: sepia(.14) contrast(1.04) saturate(.82) brightness(.97) !important;\n  box-shadow: 0 10px 32px -16px rgba(27,27,26,.4),\n              inset 0 0 0 1px rgba(27,27,26,.08) !important;\n}\n.jw-folio .jw-about-portrait::before{ content:none !important; background:none !important; }\n.jw-folio .jw-about-portrait::after{\n  content:\"\" !important;\n  position:absolute !important;\n  inset:0 !important;\n  background: linear-gradient(180deg, transparent 50%, rgba(244,237,223,.45) 100%) !important;\n  pointer-events:none !important;\n  z-index:1 !important;\n}\n.jw-folio .jw-about-portrait-caption{\n  position:absolute !important;\n  left:14px !important;\n  bottom:12px !important;\n  background: var(--paper) !important;\n  padding: 5px 10px !important;\n  border: 1px solid var(--ink) !important;\n  border-radius: 2px !important;\n  font-family:\"IBM Plex Mono\", monospace !important;\n  font-size:.68rem !important;\n  letter-spacing:.14em !important;\n  text-transform:uppercase !important;\n  z-index:2 !important;\n  font-weight:500 !important;\n  color:var(--ink) !important;\n}\n.jw-folio .jw-about-portrait-caption em{\n  color:var(--accent) !important;\n  font-style:italic !important;\n  font-family:\"Fraunces\",serif !important;\n  font-weight:400 !important;\n  letter-spacing:.02em !important;\n  margin-left:4px !important;\n  text-transform:none !important;\n}\n.jw-folio .jw-about-grid{\n  grid-template-columns: 280px 1fr !important;\n  gap:44px !important;\n  align-items:start !important;\n}\n@media (max-width:860px){\n  .jw-folio .jw-about-grid{grid-template-columns:1fr !important;gap:24px !important;}\n  .jw-folio .jw-about-portrait{height:220px !important;max-width:340px !important;margin:0 auto !important;}\n}\n\n\/* Peek FAQ (\u518d\u78ba\u8a8d) *\/\n.jw-folio .jw-faq-item.open .jw-faq-a{max-height:600px !important;}\n.jw-folio .jw-faq-item.open .jw-faq-a::after{opacity:0 !important;}\n.jw-folio .jw-faq-item.open .jw-faq-plus{transform:rotate(45deg) !important;}\n\n\/* Option selected \u72b6\u614b *\/\n.jw-folio .jw-option{transition:background .2s,border-color .2s,transform .15s !important;}\n.jw-folio .jw-option.selected{\n  background:var(--accent) !important;\n  border-color:var(--accent) !important;\n  color:var(--paper) !important;\n  transform:translateY(-1px) !important;\n  box-shadow:0 6px 18px -8px rgba(184,83,45,.45) !important;\n}\n.jw-folio .jw-option.selected *{color:var(--paper) !important;}\n.jw-folio .jw-option.selected .jw-radio{border-color:var(--paper) !important;background:var(--paper) !important;}\n.jw-folio .jw-option.selected .jw-radio::after{\n  content:\"\";position:absolute;inset:3px;border-radius:50%;background:var(--accent);\n}\n.jw-folio .jw-radio{position:relative;}\n.jw-folio .reveal{opacity:1 !important;transform:none !important;}\n<\/style>\n\n\n<script id=\"jw-folio-v11-loader\">\n(function(){\n  try {\n    var b = \"CihmdW5jdGlvbigpewogIGZ1bmN0aW9uIHJ1bigpewogICAgdmFyIGltZ3MgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcuanctZm9saW8gaW1nW2RhdGEtc3JjXScpOwogICAgZm9yICh2YXIgaT0wO2k8aW1ncy5sZW5ndGg7aSsrKXsKICAgICAgdmFyIGVsID0gaW1nc1tpXTsKICAgICAgdmFyIHMgPSBlbC5nZXRBdHRyaWJ1dGUoJ2RhdGEtc3JjJyk7CiAgICAgIGlmICghcykgY29udGludWU7CiAgICAgIGlmIChlbC5zcmMgIT09IHMpeyBlbC5zcmMgPSBzOyBlbC5yZW1vdmVBdHRyaWJ1dGUoJ2RhdGEtc3JjJyk7IH0KICAgIH0KCiAgICAvLyAtLS0gRkFRIHRvZ2dsZSAoZGVsZWdhdGlvbikgLS0tCiAgICBpZiAoIXdpbmRvdy5fX2p3RmFxQm91bmQpewogICAgICB3aW5kb3cuX19qd0ZhcUJvdW5kID0gdHJ1ZTsKICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbihlKXsKICAgICAgICB2YXIgdCA9IGUudGFyZ2V0OwogICAgICAgIHZhciBxID0gbnVsbDsKICAgICAgICB3aGlsZSAodCl7CiAgICAgICAgICBpZiAodCA9PT0gZG9jdW1lbnQuYm9keSkgYnJlYWs7CiAgICAgICAgICBpZiAodC5jbGFzc0xpc3QpewogICAgICAgICAgICBpZiAodC5jbGFzc0xpc3QuY29udGFpbnMoJ2p3LWZhcS1xJykpeyBxID0gdDsgYnJlYWs7IH0KICAgICAgICAgIH0KICAgICAgICAgIHQgPSB0LnBhcmVudE5vZGU7CiAgICAgICAgfQogICAgICAgIGlmICghcSkgcmV0dXJuOwogICAgICAgIHZhciBpdGVtID0gcS5wYXJlbnROb2RlOwogICAgICAgIHdoaWxlIChpdGVtKXsKICAgICAgICAgIGlmIChpdGVtID09PSBkb2N1bWVudC5ib2R5KSBicmVhazsKICAgICAgICAgIGlmIChpdGVtLmNsYXNzTGlzdCl7CiAgICAgICAgICAgIGlmIChpdGVtLmNsYXNzTGlzdC5jb250YWlucygnanctZmFxLWl0ZW0nKSkgYnJlYWs7CiAgICAgICAgICB9CiAgICAgICAgICBpdGVtID0gaXRlbS5wYXJlbnROb2RlOwogICAgICAgIH0KICAgICAgICBpZiAoIWl0ZW0pIHJldHVybjsKICAgICAgICBpZiAoaXRlbS5jbGFzc0xpc3QpIGl0ZW0uY2xhc3NMaXN0LnRvZ2dsZSgnb3BlbicpOwogICAgICB9LCB0cnVlKTsKICAgIH0KCiAgICAvLyAtLS0gQ29tbWlzc2lvbiBTaGVldCBvcHRpb25zIChkZWxlZ2F0aW9uKSAtLS0KICAgIGZ1bmN0aW9uIHN0cmlwQmxvY2soc3RyKXsKICAgICAgdmFyIEhFQUQgPSAnLS0tLS0tLS0gXHU5MDc4XHU2MjlFXHU1MTg1XHU1QkI5IC0tLS0tLS0tJzsKICAgICAgdmFyIEZPT1QgPSAnLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLSc7CiAgICAgIHZhciBOTCA9IFN0cmluZy5mcm9tQ2hhckNvZGUoMTApOwogICAgICB3aGlsZSAodHJ1ZSl7CiAgICAgICAgdmFyIGkgPSBzdHIuaW5kZXhPZihIRUFEKTsKICAgICAgICBpZiAoaSA8IDApIGJyZWFrOwogICAgICAgIHZhciBqID0gc3RyLmluZGV4T2YoRk9PVCwgaSArIEhFQUQubGVuZ3RoKTsKICAgICAgICBpZiAoaiA8IDApIGJyZWFrOwogICAgICAgIHZhciBlbmQgPSBqICsgRk9PVC5sZW5ndGg7CiAgICAgICAgaWYgKHN0ci5jaGFyQXQoZW5kKSA9PT0gTkwpIGVuZCsrOwogICAgICAgIHN0ciA9IHN0ci5zbGljZSgwLCBpKSArIHN0ci5zbGljZShlbmQpOwogICAgICB9CiAgICAgIHJldHVybiBzdHI7CiAgICB9CiAgICBmdW5jdGlvbiB1cGRhdGVUQSgpewogICAgICB2YXIgdGEgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcud3Bmb3Jtcy1maWVsZCB0ZXh0YXJlYScpOwogICAgICBpZiAoIXRhKSB0YSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ3RleHRhcmVhW2lkXj0id3Bmb3Jtcy0iXScpOwogICAgICBpZiAoIXRhKSByZXR1cm47CiAgICAgIHZhciBmb3JtID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2p3LWNvbW1pc3Npb24tZm9ybScpOwogICAgICBpZiAoIWZvcm0pIHJldHVybjsKICAgICAgdmFyIHZhbHMgPSB7fTsKICAgICAgdmFyIHJzID0gZm9ybS5xdWVyeVNlbGVjdG9yQWxsKCdpbnB1dFt0eXBlPSJyYWRpbyJdOmNoZWNrZWQnKTsKICAgICAgZm9yICh2YXIgaz0wO2s8cnMubGVuZ3RoO2srKyl7IHZhbHNbcnNba10ubmFtZV0gPSByc1trXS52YWx1ZTsgfQogICAgICB2YXIgTCA9IHsKICAgICAgICBwbGFuOiAgICdcdTI1QTAgXHUzMDU0XHU1RTBDXHU2NzFCXHUzMEQ3XHUzMEU5XHUzMEYzXHVGRjFBJywKICAgICAgICBtZXRob2Q6ICdcdTI1QTAgXHUzMDU0XHU5MDIzXHU3RDYxXHU2MjRCXHU2QkI1XHVGRjFBJywKICAgICAgICB0aW1pbmc6ICdcdTI1QTAgXHU3NzQwXHU2MjRCXHU1RTBDXHU2NzFCXHU2NjQyXHU2NzFGXHVGRjFBJywKICAgICAgICBidWRnZXQ6ICdcdTI1QTAgXHUzMDU0XHU0RTg4XHU3Qjk3XHU3NkVFXHU1Qjg5XHVGRjFBJwogICAgICB9OwogICAgICB2YXIgbGluZXMgPSBbXTsKICAgICAgaWYgKHZhbHMucGxhbikgICBsaW5lcy5wdXNoKEwucGxhbiAgICsgdmFscy5wbGFuKTsKICAgICAgaWYgKHZhbHMubWV0aG9kKSBsaW5lcy5wdXNoKEwubWV0aG9kICsgdmFscy5tZXRob2QpOwogICAgICBpZiAodmFscy50aW1pbmcpIGxpbmVzLnB1c2goTC50aW1pbmcgKyB2YWxzLnRpbWluZyk7CiAgICAgIGlmICh2YWxzLmJ1ZGdldCkgbGluZXMucHVzaChMLmJ1ZGdldCArIHZhbHMuYnVkZ2V0KTsKICAgICAgaWYgKGxpbmVzLmxlbmd0aCA9PT0gMCkgcmV0dXJuOwogICAgICB2YXIgTkwgPSBTdHJpbmcuZnJvbUNoYXJDb2RlKDEwKTsKICAgICAgdmFyIEhFQUQgPSAnLS0tLS0tLS0gXHU5MDc4XHU2MjlFXHU1MTg1XHU1QkI5IC0tLS0tLS0tJzsKICAgICAgdmFyIEZPT1QgPSAnLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLSc7CiAgICAgIHZhciBibG9jayA9IEhFQUQgKyBOTCArIGxpbmVzLmpvaW4oTkwpICsgTkwgKyBGT09UICsgTkw7CiAgICAgIHZhciBjdXIgPSB0YS52YWx1ZSB8fCAnJzsKICAgICAgY3VyID0gc3RyaXBCbG9jayhjdXIpOwogICAgICB0YS52YWx1ZSA9IGJsb2NrICsgY3VyOwogICAgICB0cnkgeyB0YS5kaXNwYXRjaEV2ZW50KG5ldyBFdmVudCgnaW5wdXQnLCB7YnViYmxlczp0cnVlfSkpOyB9IGNhdGNoKGVycil7fQogICAgfQogICAgaWYgKCF3aW5kb3cuX19qd09wdEJvdW5kKXsKICAgICAgd2luZG93Ll9fandPcHRCb3VuZCA9IHRydWU7CiAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oZSl7CiAgICAgICAgdmFyIHQgPSBlLnRhcmdldDsKICAgICAgICB2YXIgb3B0ID0gbnVsbDsKICAgICAgICB3aGlsZSAodCl7CiAgICAgICAgICBpZiAodCA9PT0gZG9jdW1lbnQuYm9keSkgYnJlYWs7CiAgICAgICAgICBpZiAodC5jbGFzc0xpc3QpewogICAgICAgICAgICBpZiAodC5jbGFzc0xpc3QuY29udGFpbnMoJ2p3LW9wdGlvbicpKXsgb3B0ID0gdDsgYnJlYWs7IH0KICAgICAgICAgIH0KICAgICAgICAgIHQgPSB0LnBhcmVudE5vZGU7CiAgICAgICAgfQogICAgICAgIGlmICghb3B0KSByZXR1cm47CiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpOwogICAgICAgIHZhciBpbnB1dCA9IG9wdC5xdWVyeVNlbGVjdG9yKCdpbnB1dFt0eXBlPSJyYWRpbyJdJyk7CiAgICAgICAgaWYgKCFpbnB1dCkgcmV0dXJuOwogICAgICAgIHZhciBnID0gb3B0LnBhcmVudE5vZGU7CiAgICAgICAgd2hpbGUgKGcpewogICAgICAgICAgaWYgKGcgPT09IGRvY3VtZW50LmJvZHkpIGJyZWFrOwogICAgICAgICAgaWYgKGcuZ2V0QXR0cmlidXRlKXsKICAgICAgICAgICAgdmFyIGRmID0gZy5nZXRBdHRyaWJ1dGUoJ2RhdGEtZmllbGQnKTsKICAgICAgICAgICAgaWYgKGRmKSBicmVhazsKICAgICAgICAgIH0KICAgICAgICAgIGcgPSBnLnBhcmVudE5vZGU7CiAgICAgICAgfQogICAgICAgIGlmIChnKXsKICAgICAgICAgIGlmIChnLmdldEF0dHJpYnV0ZSl7CiAgICAgICAgICAgIGlmIChnLmdldEF0dHJpYnV0ZSgnZGF0YS1maWVsZCcpKXsKICAgICAgICAgICAgICB2YXIgc2licyA9IGcucXVlcnlTZWxlY3RvckFsbCgnLmp3LW9wdGlvbicpOwogICAgICAgICAgICAgIGZvciAodmFyIG49MDtuPHNpYnMubGVuZ3RoO24rKyl7IHNpYnNbbl0uY2xhc3NMaXN0LnJlbW92ZSgnc2VsZWN0ZWQnKTsgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICAgIG9wdC5jbGFzc0xpc3QuYWRkKCdzZWxlY3RlZCcpOwogICAgICAgIGlucHV0LmNoZWNrZWQgPSB0cnVlOwogICAgICAgIHRyeSB7IGlucHV0LmRpc3BhdGNoRXZlbnQobmV3IEV2ZW50KCdjaGFuZ2UnLCB7YnViYmxlczp0cnVlfSkpOyB9IGNhdGNoKGVycil7fQogICAgICAgIHVwZGF0ZVRBKCk7CiAgICAgIH0sIHRydWUpOwogICAgfQoKICAgIC8vIC0tLSBTbW9vdGggYW5jaG9yIC0tLQogICAgaWYgKCF3aW5kb3cuX19qd0FuY2hvckJvdW5kKXsKICAgICAgd2luZG93Ll9fandBbmNob3JCb3VuZCA9IHRydWU7CiAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oZSl7CiAgICAgICAgdmFyIHQgPSBlLnRhcmdldDsKICAgICAgICB2YXIgYSA9IG51bGw7CiAgICAgICAgd2hpbGUgKHQpewogICAgICAgICAgaWYgKHQgPT09IGRvY3VtZW50LmJvZHkpIGJyZWFrOwogICAgICAgICAgaWYgKHQudGFnTmFtZSA9PT0gJ0EnKXsKICAgICAgICAgICAgdmFyIGhyZWYgPSB0LmdldEF0dHJpYnV0ZSgnaHJlZicpOwogICAgICAgICAgICBpZiAoaHJlZil7CiAgICAgICAgICAgICAgaWYgKGhyZWYuY2hhckF0KDApID09PSAnIycpewogICAgICAgICAgICAgICAgaWYgKHQuY2xvc2VzdCl7CiAgICAgICAgICAgICAgICAgIGlmICh0LmNsb3Nlc3QoJy5qdy1mb2xpbycpKXsgYSA9IHQ7IGJyZWFrOyB9CiAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICB0ID0gdC5wYXJlbnROb2RlOwogICAgICAgIH0KICAgICAgICBpZiAoIWEpIHJldHVybjsKICAgICAgICB2YXIgaWQgPSBhLmdldEF0dHJpYnV0ZSgnaHJlZicpOwogICAgICAgIGlmIChpZC5sZW5ndGggPiAxKXsKICAgICAgICAgIHZhciB0YXJnZXQgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKGlkKTsKICAgICAgICAgIGlmICh0YXJnZXQpewogICAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7CiAgICAgICAgICAgIHRhcmdldC5zY3JvbGxJbnRvVmlldyh7YmVoYXZpb3I6J3Ntb290aCcsYmxvY2s6J3N0YXJ0J30pOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgfSk7CiAgICB9CgogICAgLy8gLS0tIFNjcm9sbCBwcm9ncmVzcyArIGNoYXB0ZXIgLS0tCiAgICB2YXIgcHJvZ3Jlc3MgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuanctZm9saW8gLmp3LXByb2dyZXNzJyk7CiAgICB2YXIgY2hhcHRlciAgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuanctZm9saW8gLmp3LWNoYXB0ZXInKTsKICAgIHZhciBOQU1FUyA9IHsKICAgICAgJ3dvcmtzJzogICAgWydJLicsJ1dvcmtzJ10sCiAgICAgICdhYm91dCc6ICAgIFsnSUkuJywnU3R1ZGlvJ10sCiAgICAgICdzZXJ2aWNlcyc6IFsnSUlJLicsJ1NlcnZpY2VzJ10sCiAgICAgICdwcm9jZXNzJzogIFsnSVYuJywnUHJvY2VzcyddLAogICAgICAnZmFxJzogICAgICBbJ1YuJywnRkFRJ10sCiAgICAgICdjb250YWN0JzogIFsnVkkuJywnQ29udGFjdCddCiAgICB9OwogICAgdmFyIHNlY3MgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcuanctZm9saW8gLmp3LXNlY1tpZF0nKTsKICAgIGZ1bmN0aW9uIG9uUygpewogICAgICB2YXIgaCA9IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudDsKICAgICAgdmFyIHAgPSBoLnNjcm9sbFRvcCAvIE1hdGgubWF4KDEsIGguc2Nyb2xsSGVpZ2h0IC0gaC5jbGllbnRIZWlnaHQpOwogICAgICBpZiAocHJvZ3Jlc3MpIHByb2dyZXNzLnN0eWxlLnRyYW5zZm9ybSA9ICdzY2FsZVgoJyArIE1hdGgubWluKDEsIE1hdGgubWF4KDAsIHApKSArICcpJzsKICAgICAgaWYgKGNoYXB0ZXIpewogICAgICAgIHZhciB5ID0gaC5zY3JvbGxUb3AgKyAxMjA7CiAgICAgICAgdmFyIGN1ciA9IG51bGw7CiAgICAgICAgZm9yICh2YXIgbT0wO208c2Vjcy5sZW5ndGg7bSsrKXsKICAgICAgICAgIGlmIChzZWNzW21dLm9mZnNldFRvcCA8PSB5KSBjdXIgPSBzZWNzW21dOwogICAgICAgIH0KICAgICAgICBpZiAoY3VyKXsKICAgICAgICAgIGlmIChOQU1FU1tjdXIuaWRdKXsKICAgICAgICAgICAgaWYgKGguc2Nyb2xsVG9wID4gMjIwKXsKICAgICAgICAgICAgICBjaGFwdGVyLmlubmVySFRNTCA9ICc8ZW0+JyArIE5BTUVTW2N1ci5pZF1bMF0gKyAnPC9lbT4nICsgTkFNRVNbY3VyLmlkXVsxXTsKICAgICAgICAgICAgICBjaGFwdGVyLmNsYXNzTGlzdC5hZGQoJ3Nob3cnKTsKICAgICAgICAgICAgICByZXR1cm47CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgaWYgKGNoYXB0ZXIuY2xhc3NMaXN0KSBjaGFwdGVyLmNsYXNzTGlzdC5yZW1vdmUoJ3Nob3cnKTsKICAgICAgfQogICAgfQogICAgaWYgKCF3aW5kb3cuX19qd1Njcm9sbEJvdW5kKXsKICAgICAgd2luZG93Ll9fandTY3JvbGxCb3VuZCA9IHRydWU7CiAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdzY3JvbGwnLCBvblMsIHtwYXNzaXZlOnRydWV9KTsKICAgIH0KICAgIG9uUygpOwogIH0KCiAgaWYgKGRvY3VtZW50LnJlYWR5U3RhdGUgPT09ICdsb2FkaW5nJyl7CiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdET01Db250ZW50TG9hZGVkJywgcnVuKTsKICB9IGVsc2UgewogICAgcnVuKCk7CiAgfQogIHNldFRpbWVvdXQocnVuLCA4MDApOwp9KSgpOwo=\";\n    var code = atob(b);\n    var s = document.createElement('script');\n    s.textContent = code;\n    (document.head || document.body || document.documentElement).appendChild(s);\n  } catch(e){\n    if (window.console) console.error('jw-folio loader fail', e);\n  }\n})();\n<\/script>\n\n\n\n\n\n<style id=\"jw-folio-v11-patch-fix4\">\n\/* ============================================================\n   1. BACKGROUND REFRESH\n   warm cream (#F4EDDF) \u2192 warm sand (#EDE3CB) + espresso ink\n   \u53c2\u8003: Robin Mastromarino \/ Pentagram editorial \/ Awwwards 2026 editorial\n   ============================================================ *\/\n.jw-folio{\n  --paper: #EDE3CB !important;\n  --paper-2: #E0D4B6 !important;\n  --ink: #1E1813 !important;\n  --ink-soft: #4A3F35 !important;\n  --accent: #B8532D !important;\n}\nhtml, body{background:#EDE3CB !important;}\n.post_content, .l-mainContent, .p-mainContent{background:transparent !important;}\n\n\/* subtle paper grain overlay (fixed, respects scroll) *\/\n.jw-folio{position:relative;}\n.jw-folio::after{\n  content:\"\" !important;\n  position:fixed !important; inset:0 !important;\n  pointer-events:none !important;\n  z-index:9999 !important;\n  background-image: url(\"__NOISE__\") !important;\n  mix-blend-mode: multiply !important;\n  opacity:.85 !important;\n}\n\n\/* ============================================================\n   2. FAQ \u2014 fully hidden until .open (peek \u5ec3\u6b62)\n   ============================================================ *\/\n.jw-folio .jw-faq-a{\n  max-height:0 !important;\n  opacity:0 !important;\n  padding-top:0 !important;\n  padding-bottom:0 !important;\n  overflow:hidden !important;\n  visibility:hidden !important;\n  transition: max-height .45s cubic-bezier(.2,.8,.2,1),\n              opacity .2s ease,\n              padding .3s ease,\n              visibility 0s linear .45s !important;\n}\n.jw-folio .jw-faq-a::after,\n.jw-folio .jw-faq-a::before{display:none !important; content:none !important;}\n.jw-folio .jw-faq-item.open .jw-faq-a{\n  max-height:800px !important;\n  opacity:1 !important;\n  padding-top:16px !important;\n  padding-bottom:24px !important;\n  visibility:visible !important;\n  transition: max-height .55s cubic-bezier(.2,.8,.2,1),\n              opacity .3s ease .08s,\n              padding .3s ease,\n              visibility 0s linear 0s !important;\n}\n\n\/* ============================================================\n   3. ABOUT \u2014 profile card refresh\n   \u5186\u5f62\u30a2\u30d0\u30bf\u30fc + \u8a8d\u8a3c\u30d0\u30c3\u30b8 + \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u30ab\u30fc\u30c9 (Threads\u98a8)\n   ============================================================ *\/\n\/* 3-col grid \u3092\u660e\u793a\u5fa9\u5143 (fix2 \u304c 2-col override \u3057\u3066\u3044\u305f\u305f\u3081) *\/\n.jw-folio .jw-about-grid{\n  grid-template-columns: minmax(120px,1fr) minmax(0,5fr) minmax(0,6fr) !important;\n  gap: clamp(24px,3vw,48px) !important;\n  align-items: start !important;\n}\n.jw-folio .jw-about-portrait{\n  aspect-ratio: 1\/1 !important;\n  height: auto !important;\n  width: 100% !important;\n  max-width: 280px !important;\n  min-height:auto !important;\n  justify-self: center !important;\n  border-radius: 50% !important;\n  background: url('https:\/\/works.jouhounokatachi.com\/blog\/wp-content\/uploads\/2026\/04\/jo-avatar-v11.jpeg') center\/cover no-repeat, var(--paper-2) !important;\n  border: 3px solid var(--ink) !important;\n  box-shadow: 0 14px 32px -12px rgba(30,24,19,.42),\n              inset 0 0 0 5px var(--paper) !important;\n  filter: sepia(.08) contrast(1.05) saturate(.94) !important;\n  position: relative !important;\n  overflow: visible !important;\n  margin-top: 6px !important;\n}\n.jw-folio .jw-about-portrait::before,\n.jw-folio .jw-about-portrait::after{\n  content:none !important;\n  background:none !important;\n  display:none !important;\n}\n.jw-folio .jw-about-portrait-caption{\n  position: absolute !important;\n  bottom: -16px !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  background: var(--accent) !important;\n  color: var(--paper) !important;\n  padding: 6px 16px !important;\n  border-radius: 999px !important;\n  white-space: nowrap !important;\n  font-family: \"IBM Plex Mono\", monospace !important;\n  font-size: .64rem !important;\n  letter-spacing: .14em !important;\n  font-weight: 500 !important;\n  text-transform: uppercase !important;\n  border: none !important;\n  z-index: 3 !important;\n  box-shadow: 0 8px 18px -6px rgba(184,83,45,.5) !important;\n  left:50% !important; right:auto !important;\n  bottom:-16px !important; top:auto !important;\n  max-width:96% !important;\n}\n.jw-folio .jw-about-portrait-caption em{\n  color: var(--paper) !important;\n  margin-left: 6px !important;\n  font-family: \"Fraunces\", serif !important;\n  font-style: italic !important;\n  font-weight: 400 !important;\n  letter-spacing: .02em !important;\n  text-transform: none !important;\n  border:none !important; background:none !important;\n}\n\/* Verified badge above the lead *\/\n.jw-folio .jw-about-body > .jw-about-lead{position:relative;}\n.jw-folio .jw-about-body > .jw-about-lead::before{\n  content: \"\u2713  VERIFIED \\00B7  HP \\00D7 AI \\00D7 \u81ea\u52d5\u5316\" !important;\n  display: block !important;\n  width: fit-content !important;\n  width: -moz-fit-content !important;\n  background: var(--ink) !important;\n  color: var(--paper) !important;\n  padding: 6px 14px !important;\n  border-radius: 4px !important;\n  font-family: \"IBM Plex Mono\", monospace !important;\n  font-size: .63rem !important;\n  letter-spacing: .12em !important;\n  margin-bottom: 18px !important;\n  font-weight: 500 !important;\n  text-transform: uppercase !important;\n  line-height:1 !important;\n}\n\n@media (max-width:860px){\n  .jw-folio .jw-about-grid{grid-template-columns:1fr !important; gap:24px !important;}\n  .jw-folio .jw-about-portrait{\n    max-width:200px !important;\n    margin:0 auto !important;\n  }\n  .jw-folio .jw-about-portrait-caption{font-size:.58rem !important;}\n}\n\n\/* ============================================================\n   4. CONTACT CHECKLIST \u2014 1\u6587\u5b57\u6298\u308a\u8fd4\u3057\u5d29\u58ca\u306e\u4fee\u6b63\n   SWELL \u30c6\u30fc\u30de\u306e <strong> \u88c5\u98fe + \u89aa grid \u306e\u5f71\u97ff\u3092\u6839\u7d76\n   ============================================================ *\/\n.jw-folio .jw-contact-checklist{\n  display: block !important;\n  margin: 20px 0 0 !important;\n  padding: 20px 0 0 !important;\n  list-style: none !important;\n  border-top: 1px solid var(--ink) !important;\n  grid-template-columns: none !important;\n  grid-template-rows: none !important;\n}\n\/* list-item \u3067 flex \u3092\u907f\u3051\u3001strong\/em \u3092\u81ea\u7136 inline \u306b\u4fdd\u3064 *\/\n.jw-folio .jw-contact-checklist li{\n  display: list-item !important;\n  grid-template-columns: none !important;\n  list-style: none !important;\n  padding: 6px 0 6px 28px !important;\n  margin: 0 !important;\n  white-space: normal !important;\n  word-break: keep-all !important;\n  overflow-wrap: normal !important;\n  line-height: 1.75 !important;\n  font-family: var(--serif-body) !important;\n  font-size: 14px !important;\n  color: var(--ink) !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  position: relative !important;\n}\n.jw-folio .jw-contact-checklist li::before{\n  content: \"\\2713\" !important;\n  position: absolute !important;\n  left: 4px !important;\n  top: 6px !important;\n  display: inline-block !important;\n  font-family: \"Fraunces\", serif !important;\n  color: var(--accent) !important;\n  font-size: 15px !important;\n  font-weight: 500 !important;\n  line-height: 1.75 !important;\n}\n\/* \u5d29\u58ca\u306e\u4e3b\u56e0\uff1a<strong> \u306e display\/width\/break \u5f37\u5236\u89e3\u9664 *\/\n.jw-folio .jw-contact-checklist li strong,\n.jw-folio .jw-contact-checklist li > strong,\n.jw-folio .jw-contact-checklist li span,\n.jw-folio .jw-contact-checklist li em,\n.jw-folio .jw-contact-checklist li b{\n  display: inline !important;\n  white-space: normal !important;\n  word-break: keep-all !important;\n  overflow-wrap: normal !important;\n  width: auto !important;\n  max-width: none !important;\n  min-width: 0 !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  background: none !important;\n  border: none !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  color: var(--accent) !important;\n  font-weight: 600 !important;\n  font-family: inherit !important;\n  line-height: inherit !important;\n  font-size: inherit !important;\n  letter-spacing: normal !important;\n  vertical-align: baseline !important;\n  float: none !important;\n  flex: none !important;\n  position: static !important;\n}\n\/* \u5ff5\u306e\u70ba: li \u5185\u306e\u30c6\u30ad\u30b9\u30c8\u30ce\u30fc\u30c9\u81ea\u4f53\u3082 grid \u5316\u3055\u308c\u3066\u306a\u3044\u304b\u89aa\u3092\u5f37\u5236\u30ea\u30bb\u30c3\u30c8 *\/\n.jw-folio .jw-contact-form .jw-contact-checklist,\n.jw-folio .jw-contact-form .jw-contact-checklist *{\n  text-align: left !important;\n  writing-mode: horizontal-tb !important;\n}\n\n\/* CTA promises also must not break *\/\n.jw-folio .jw-cta-promises li,\n.jw-folio .jw-cta-promises li em,\n.jw-folio .jw-cta-promises li strong{\n  white-space: normal !important;\n  word-break: keep-all !important;\n  overflow-wrap: normal !important;\n  display:inline-block !important;\n}\n.jw-folio .jw-cta-promises{display:flex !important; flex-wrap:wrap !important; gap:12px !important;}\n.jw-folio .jw-cta-promises li{flex:0 1 auto !important;}\n\n\/* ============================================================\n   5. misc polish (\u80cc\u666f\u5237\u65b0\u306b\u5408\u308f\u305b\u305f\u5fae\u8abf\u6574)\n   ============================================================ *\/\n.jw-folio .jw-sec{background:transparent !important;}\n.jw-folio .jw-commission,\n.jw-folio .jw-contact-form{\n  background: #F6EFDE !important; \/* paper \u3088\u308a\u5c11\u3057\u660e\u308b\u3044\u5e33\u9762\u8272 *\/\n}\n<\/style>\n\n\n\n\n\n<style id=\"jw-folio-v11-patch-fix5\">\n\/* ============================================================\n   1. Works \u2014 N\u00b0001 \u6539\u884c\u5d29\u58ca\u3092 nowrap \u3067\u5f37\u5236\u505c\u6b62\n   ============================================================ *\/\n.jw-folio .jw-case-no{\n  white-space: nowrap !important;\n  word-break: keep-all !important;\n  overflow-wrap: normal !important;\n  min-width: max-content !important;\n  letter-spacing: -.02em !important;\n}\n.jw-folio .jw-case-no small{\n  white-space: nowrap !important;\n  word-break: keep-all !important;\n  overflow-wrap: normal !important;\n  min-width: max-content !important;\n  display: block !important;\n}\n\/* SP \u3067\u306f\u65e2\u306b display:flex \u306b\u306a\u308b\u306e\u3067\u8abf\u6574 *\/\n@media (max-width:860px){\n  .jw-folio .jw-case-no{\n    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;\n    display: flex !important;\n    align-items: baseline !important;\n    gap: 14px !important;\n    flex-wrap: nowrap !important;\n  }\n  .jw-folio .jw-case-no small{font-size: 9.5px !important;}\n}\n\n\/* ============================================================\n   2. Skill \u2014 % \u4e8c\u91cd\u8868\u793a\u89e3\u6d88 (bar::after \u3092\u6d88\u3057\u3066\u53f3\u7aef\u306e pct \u4e00\u672c\u5316)\n   bar \u306f ::before \u3067\u5e45\u8868\u73fe\u3001::after \u306f content \u3092\u6bba\u3059\n   ============================================================ *\/\n.jw-folio .jw-skill-bar::after{\n  content: none !important;\n  display: none !important;\n}\n.jw-folio .jw-skill-pct{\n  font-family: \"Fraunces\", serif !important;\n  font-style: italic !important;\n  color: var(--accent) !important;\n  font-weight: 500 !important;\n  font-size: 15px !important;\n  text-align: right !important;\n  letter-spacing: .01em !important;\n}\n\n\/* ============================================================\n   3. libecity.com \u53c2\u8003: scroll-triggered reveal \u5fa9\u6d3b\n   JS (IntersectionObserver) \u3067 .reveal \u306b data-revealed=\"1\" \u3092\u4ed8\u4e0e\n   ============================================================ *\/\n.jw-folio .reveal{\n  opacity: 0 !important;\n  transform: translateY(18px) !important;\n  transition: opacity .75s cubic-bezier(.2,.8,.2,1),\n              transform .75s cubic-bezier(.2,.8,.2,1) !important;\n  will-change: opacity, transform !important;\n}\n.jw-folio .reveal[data-revealed=\"1\"]{\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n}\n\/* stagger \u2014 \u5144\u5f1f\u9806\u3067 70ms \u305a\u3064\u9045\u5ef6 *\/\n.jw-folio .reveal[data-revealed=\"1\"]:nth-child(2){transition-delay:.07s !important;}\n.jw-folio .reveal[data-revealed=\"1\"]:nth-child(3){transition-delay:.14s !important;}\n.jw-folio .reveal[data-revealed=\"1\"]:nth-child(4){transition-delay:.21s !important;}\n.jw-folio .reveal[data-revealed=\"1\"]:nth-child(5){transition-delay:.28s !important;}\n\n@media (prefers-reduced-motion: reduce){\n  .jw-folio .reveal{opacity:1 !important; transform:none !important;}\n}\n<\/style>\n\n\n<script id=\"jw-folio-v11-reveal-loader\">\n(function(){\n  try {\n    var b = \"CihmdW5jdGlvbigpewogIGZ1bmN0aW9uIHJ1bigpewogICAgdmFyIGVscyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy5qdy1mb2xpbyAucmV2ZWFsJyk7CiAgICBpZiAoISgnSW50ZXJzZWN0aW9uT2JzZXJ2ZXInIGluIHdpbmRvdykpewogICAgICBmb3IgKHZhciBpPTA7aTxlbHMubGVuZ3RoO2krKyl7IGVsc1tpXS5zZXRBdHRyaWJ1dGUoJ2RhdGEtcmV2ZWFsZWQnLCcxJyk7IH0KICAgICAgcmV0dXJuOwogICAgfQogICAgdmFyIGlvID0gbmV3IEludGVyc2VjdGlvbk9ic2VydmVyKGZ1bmN0aW9uKGVudHJpZXMpewogICAgICBmb3IgKHZhciBpPTA7aTxlbnRyaWVzLmxlbmd0aDtpKyspewogICAgICAgIGlmIChlbnRyaWVzW2ldLmlzSW50ZXJzZWN0aW5nKXsKICAgICAgICAgIGVudHJpZXNbaV0udGFyZ2V0LnNldEF0dHJpYnV0ZSgnZGF0YS1yZXZlYWxlZCcsJzEnKTsKICAgICAgICAgIGlvLnVub2JzZXJ2ZShlbnRyaWVzW2ldLnRhcmdldCk7CiAgICAgICAgfQogICAgICB9CiAgICB9LCB7dGhyZXNob2xkOiAwLjEyLCByb290TWFyZ2luOiAnMHB4IDBweCAtNiUgMHB4J30pOwogICAgZm9yICh2YXIgaj0wO2o8ZWxzLmxlbmd0aDtqKyspewogICAgICB2YXIgZWwgPSBlbHNbal07CiAgICAgIHZhciByID0gZWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7CiAgICAgIGlmIChyLnRvcCA8IHdpbmRvdy5pbm5lckhlaWdodCAqIDAuOTYpewogICAgICAgIGVsLnNldEF0dHJpYnV0ZSgnZGF0YS1yZXZlYWxlZCcsJzEnKTsKICAgICAgfSBlbHNlIHsKICAgICAgICBpby5vYnNlcnZlKGVsKTsKICAgICAgfQogICAgfQogICAgc2V0VGltZW91dChmdW5jdGlvbigpewogICAgICB2YXIgYWxsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLmp3LWZvbGlvIC5yZXZlYWwnKTsKICAgICAgZm9yICh2YXIgaz0wO2s8YWxsLmxlbmd0aDtrKyspewogICAgICAgIGlmICghYWxsW2tdLmhhc0F0dHJpYnV0ZSgnZGF0YS1yZXZlYWxlZCcpKXsKICAgICAgICAgIGFsbFtrXS5zZXRBdHRyaWJ1dGUoJ2RhdGEtcmV2ZWFsZWQnLCcxJyk7CiAgICAgICAgfQogICAgICB9CiAgICB9LCAzNTAwKTsKICB9CiAgaWYgKGRvY3VtZW50LnJlYWR5U3RhdGU9PT0nbG9hZGluZycpewogICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsIHJ1bik7CiAgfSBlbHNlIHsKICAgIHJ1bigpOwogIH0KICBzZXRUaW1lb3V0KHJ1biwgNDAwKTsKfSkoKTsK\";\n    var code = atob(b);\n    var s = document.createElement('script');\n    s.textContent = code;\n    (document.head || document.body || document.documentElement).appendChild(s);\n  } catch(e){\n    if (window.console) console.error('reveal loader fail', e);\n  }\n})();\n<\/script>\n\n\n\n\n\n<style id=\"jw-folio-v11-patch-fix6\">\n\/* ============================================================\n   \u8272\u5408\u3044\u5237\u65b0 \u2014 soft warm white + deep ink + brighter terracotta\n   \u53c2\u8003: baigie \/ fog \/ cosmos-design \/ Pentagram \/ Stripe \/ Linear\n   ============================================================ *\/\n.jw-folio{\n  --paper: #F7F3EA !important;\n  --paper-2: #ECE5D3 !important;\n  --paper-3: #E3DBC4 !important;\n  --ink: #141414 !important;\n  --ink-2: #1F1F1F !important;\n  --ink-soft: #4A4542 !important;\n  --accent: #C7492A !important;\n  --accent-deep: #9A3820 !important;\n}\nhtml, body{background:#F7F3EA !important;}\n.post_content, .l-mainContent, .p-mainContent{background:transparent !important;}\n\n\/* commission sheet \/ write form \u306e\u30da\u30fc\u30d1\u30fc\u3082\u660e\u5ea6up *\/\n.jw-folio .jw-commission,\n.jw-folio .jw-contact-form{\n  background:#FCFAF4 !important;\n  border-color:#141414 !important;\n}\n\n\/* grain overlay \u3092\u82e5\u5e72\u5f31\u3081\u308b (\u660e\u308b\u3044 paper \u306b\u5408\u308f\u305b\u3066) *\/\n.jw-folio::after{opacity:.55 !important;}\n\n\/* \u5f37\u8abf em \/ accent \u7cfb\u306e\u8272\u3092\u66f4\u65b0\u8272\u306b\u8ffd\u968f (\u5143\u306e var \u53c2\u7167\u3067\u81ea\u52d5\u3060\u304c\n   \u4e00\u90e8\u56fa\u5b9a color \u6307\u5b9a\u304c\u3042\u308c\u3070\u5f37\u5236 override) *\/\n.jw-folio .jw-hero-eyebrow strong,\n.jw-folio em{color:#C7492A !important;}\n<\/style>\n<style id=\"jw-folio-v12-polish\">\n\/* ============================================================\n   jw-folio-v12-polish - Editorial refinement\n   ============================================================ *\/\n\n\/* ---- A. Hero display type accent -------------------------- *\/\n.jw-folio .jw-hero-title{\n  position:relative;\n}\n.jw-folio .jw-hero-title em{\n  color:var(--jw-accent, #c0392b) !important;\n  font-style:italic !important;\n  position:relative;\n}\n.jw-folio .jw-hero-title em::after{\n  content:\"\";\n  position:absolute;left:0;right:0;bottom:-4px;\n  height:2px;\n  background:linear-gradient(90deg, transparent 0%, var(--jw-accent,#c0392b) 30%, transparent 100%);\n  opacity:.7;\n}\n\n\/* Hero eyebrow ornament *\/\n.jw-folio .jw-hero-eyebrow{\n  position:relative;\n  padding-left:38px !important;\n}\n.jw-folio .jw-hero-eyebrow::before{\n  content:\"\";\n  position:absolute;left:0;top:50%;\n  width:28px;height:1px;\n  background:var(--jw-accent, #c0392b);\n  opacity:.7;\n}\n\n\/* ---- B. Commission pricing emphasis ----------------------- *\/\n.jw-folio .jw-plan-price,\n.jw-folio [class*=\"price\"]{\n  font-feature-settings:'lnum','pnum' !important;\n  font-variant-numeric:lining-nums !important;\n}\n.jw-folio .jw-plan-card:hover .jw-plan-price,\n.jw-folio .jw-plan-featured .jw-plan-price{\n  color:var(--jw-accent, #c0392b) !important;\n  transition:color .3s ease !important;\n}\n.jw-folio .jw-plan-featured{\n  position:relative;\n  transform:translateY(-4px) !important;\n  box-shadow:0 24px 48px -20px rgba(192,57,43,.4) !important;\n}\n.jw-folio .jw-plan-featured::after{\n  content:\"RECOMMENDED\";\n  position:absolute;top:-10px;right:16px;\n  font-family:\"Fraunces\",serif;font-style:italic;\n  font-size:10px;letter-spacing:.2em;\n  color:#fff;background:var(--jw-accent, #c0392b);\n  padding:3px 10px;border-radius:2px;\n  font-weight:600;\n}\n\n\/* ---- C. About portrait - SVG fallback monogram ------------- *\/\n.jw-folio .jw-about-portrait{\n  position:relative;\n  background:\n    radial-gradient(circle at 30% 30%, rgba(192,57,43,.08), transparent 60%),\n    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 1px, transparent 1px 8px),\n    var(--jw-paper, #faf7f2) !important;\n  border:1px solid rgba(0,0,0,.08) !important;\n}\n.jw-folio .jw-about-portrait::after{\n  content:\"JO\";\n  position:absolute;top:50%;left:50%;\n  transform:translate(-50%, -50%);\n  font-family:\"Fraunces\",serif;font-style:italic;\n  font-size:92px;line-height:1;\n  color:var(--jw-accent, #c0392b);\n  font-weight:300;\n  letter-spacing:-.04em;\n  z-index:1;\n}\n.jw-folio .jw-about-portrait::before{\n  content:\"\";\n  position:absolute;inset:16px;\n  border:1px solid rgba(192,57,43,.25);\n  border-radius:50%;\n  z-index:0;\n}\n.jw-folio .jw-about-portrait-caption{\n  position:relative;z-index:2;\n  background:rgba(250,247,242,.94);\n  padding:6px 12px;\n  border-radius:2px;\n}\n\n\/* ---- D. Footer colophon ----------------------------------- *\/\n.jw-folio .jw-footer{\n  position:relative;\n  padding-top:48px !important;\n}\n.jw-folio .jw-footer::before{\n  content:\"N\\B0 01 \u2014 Folio of Jo \/ Freelance Creator \u2014 2026\";\n  position:absolute;top:16px;left:50%;transform:translateX(-50%);\n  font-family:\"Fraunces\",serif;font-style:italic;\n  font-size:10.5px;letter-spacing:.28em;\n  color:rgba(0,0,0,.42);\n  text-transform:uppercase;\n  white-space:nowrap;\n}\n.jw-folio .jw-footer::after{\n  content:\"\\2766\";\n  position:absolute;top:36px;left:50%;transform:translateX(-50%);\n  font-size:14px;\n  color:var(--jw-accent, #c0392b);\n  opacity:.5;\n}\n\n\/* ---- E. Section head numbering \u2014 issue style -------------- *\/\n.jw-folio .jw-section-head{\n  position:relative;\n}\n.jw-folio .jw-section-head::before{\n  font-family:\"Fraunces\",serif !important;\n  font-style:italic !important;\n  font-variant-numeric:oldstyle-nums !important;\n  color:var(--jw-accent, #c0392b) !important;\n  opacity:.7 !important;\n}\n\n\/* ---- F. SP adjustments ------------------------------------ *\/\n@media (max-width:720px){\n  .jw-folio .jw-about-portrait::after{font-size:68px !important}\n  .jw-folio .jw-footer::before{font-size:9px !important;letter-spacing:.22em !important}\n  .jw-folio .jw-plan-featured::after{right:8px !important;font-size:9px !important}\n}\n<\/style>\n<style id=\"jw-folio-v13-portrait\">\n\/* ============================================================\n   jw-folio-v13-portrait - Real child monogram (fix4 reset safe)\n   ============================================================ *\/\n.jw-folio .jw-about-portrait{\n  display:flex !important;\n  align-items:center !important;\n  justify-content:center !important;\n  overflow:visible !important;\n  border-radius:50% !important;\n  background:\n    radial-gradient(circle at 30% 25%, rgba(192,57,43,.10), transparent 55%),\n    radial-gradient(circle at 70% 75%, rgba(192,57,43,.06), transparent 60%),\n    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 1px, transparent 1px 10px),\n    #faf7f2 !important;\n  border:1px solid rgba(192,57,43,.25) !important;\n  box-shadow:\n    0 1px 0 0 rgba(255,255,255,.6) inset,\n    0 24px 48px -20px rgba(192,57,43,.25),\n    0 0 0 1px rgba(192,57,43,.08) !important;\n}\n.jw-folio .jw-about-portrait .jw-portrait-mono{\n  position:absolute !important;\n  top:50% !important;left:50% !important;\n  transform:translate(-50%,-50%) !important;\n  width:72% !important;height:72% !important;\n  display:block !important;\n  pointer-events:none !important;\n  z-index:1 !important;\n  opacity:1 !important;\n}\n.jw-folio .jw-about-portrait .jw-portrait-mono svg{\n  display:block !important;\n  width:100% !important;height:100% !important;\n}\n.jw-folio .jw-about-portrait-caption{\n  position:relative !important;\n  z-index:2 !important;\n  align-self:flex-end !important;\n  margin-bottom:12px !important;\n  background:rgba(250,247,242,.92) !important;\n  padding:5px 12px !important;\n  border-radius:2px !important;\n  font-size:10.5px !important;letter-spacing:.22em !important;\n  color:rgba(0,0,0,.7) !important;\n  backdrop-filter:blur(2px) !important;\n}\n.jw-folio .jw-about-portrait-caption em{\n  color:#c0392b !important;\n  font-style:italic !important;\n  font-family:\"Fraunces\",serif !important;\n  margin-left:4px !important;\n}\n\/* hover: subtle tilt *\/\n.jw-folio .jw-about-portrait:hover .jw-portrait-mono{\n  transform:translate(-50%,-50%) rotate(-2deg) scale(1.03) !important;\n  transition:transform .6s cubic-bezier(.2,.8,.2,1) !important;\n}\n@media (max-width:720px){\n  .jw-folio .jw-about-portrait .jw-portrait-mono{width:78% !important;height:78% !important}\n  .jw-folio .jw-about-portrait-caption{font-size:9px !important;letter-spacing:.18em !important}\n}\n<\/style>\n<style id=\"jw-folio-v14-avatar\">\n\/* ============================================================\n   jw-folio-v14-avatar \u2014 Real portrait image (circular crop)\n   ============================================================ *\/\n.jw-folio .jw-about-portrait{\n  display:flex !important;\n  align-items:flex-end !important;\n  justify-content:center !important;\n  overflow:hidden !important;\n  border-radius:50% !important;\n  background:\n    radial-gradient(circle at 30% 25%, rgba(192,57,43,.10), transparent 55%),\n    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 1px, transparent 1px 10px),\n    #faf7f2 !important;\n  border:1px solid rgba(192,57,43,.28) !important;\n  box-shadow:\n    0 1px 0 0 rgba(255,255,255,.65) inset,\n    0 24px 48px -20px rgba(192,57,43,.28),\n    0 0 0 1px rgba(192,57,43,.08),\n    0 0 0 8px rgba(250,247,242,1),\n    0 0 0 9px rgba(192,57,43,.2) !important;\n  position:relative !important;\n}\n.jw-folio .jw-about-portrait .jw-portrait-mono{\n  position:absolute !important;\n  top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;\n  inset:0 !important;\n  width:100% !important;\n  height:100% !important;\n  transform:none !important;\n  display:block !important;\n  z-index:1 !important;\n  pointer-events:none !important;\n  overflow:hidden !important;\n  border-radius:50% !important;\n}\n.jw-folio .jw-about-portrait .jw-portrait-mono img{\n  width:100% !important;\n  height:100% !important;\n  object-fit:cover !important;\n  object-position:center 30% !important; \/* face upper area *\/\n  display:block !important;\n  filter:contrast(1.02) saturate(1.02) !important;\n  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease !important;\n}\n.jw-folio .jw-about-portrait:hover .jw-portrait-mono img{\n  transform:scale(1.04) !important;\n  filter:contrast(1.04) saturate(1.1) !important;\n}\n\/* caption \u2014 float at bottom, over the image *\/\n.jw-folio .jw-about-portrait-caption{\n  position:absolute !important;\n  left:50% !important;\n  bottom:14px !important;\n  transform:translateX(-50%) !important;\n  z-index:2 !important;\n  background:rgba(250,247,242,.94) !important;\n  padding:4px 11px !important;\n  border-radius:2px !important;\n  font-size:10px !important;\n  letter-spacing:.22em !important;\n  color:rgba(0,0,0,.72) !important;\n  backdrop-filter:blur(3px) !important;\n  white-space:nowrap !important;\n  box-shadow:0 4px 10px -4px rgba(0,0,0,.15) !important;\n}\n.jw-folio .jw-about-portrait-caption em{\n  color:#c0392b !important;\n  font-style:italic !important;\n  font-family:\"Fraunces\",serif !important;\n  margin-left:4px !important;\n}\n\/* subtle red rim *\/\n.jw-folio .jw-about-portrait::before{\n  content:\"\" !important;\n  position:absolute !important;\n  inset:6px !important;\n  border-radius:50% !important;\n  border:1px solid rgba(192,57,43,.25) !important;\n  pointer-events:none !important;\n  z-index:3 !important;\n  background:none !important;\n  display:block !important;\n}\n\/* SP *\/\n@media (max-width:720px){\n  .jw-folio .jw-about-portrait{\n    box-shadow:\n      0 1px 0 0 rgba(255,255,255,.6) inset,\n      0 16px 32px -16px rgba(192,57,43,.28),\n      0 0 0 6px rgba(250,247,242,1),\n      0 0 0 7px rgba(192,57,43,.18) !important;\n  }\n  .jw-folio .jw-about-portrait-caption{\n    font-size:8.5px !important;\n    letter-spacing:.16em !important;\n    padding:3px 8px !important;\n    bottom:8px !important;\n  }\n}\n<\/style>\n<style id=\"jw-folio-v16-sp\">\n\/* ============================================================\n   jw-folio-v16-sp \u2014 SP viewcut final fix\n   - Portrait caption fully below circle with margin\n   - About section extra bottom padding so caption doesn't clip next section\n   - Commission Sheet plan cards: prevent horizontal overflow on narrow SP\n   - Workflow steps: ensure proper wrapping\n   ============================================================ *\/\n@media (max-width:720px){\n  \/* ---------- About portrait ---------- *\/\n  .jw-folio .jw-about-portrait{\n    overflow:visible !important;\n    margin-bottom:64px !important;\n  }\n  .jw-folio .jw-about-portrait .jw-portrait-mono{\n    overflow:hidden !important;\n    border-radius:50% !important;\n  }\n  .jw-folio .jw-about-portrait .jw-portrait-mono img{\n    object-position:center 22% !important;\n  }\n  .jw-folio .jw-about-portrait-caption{\n    position:absolute !important;\n    left:50% !important;\n    transform:translateX(-50%) !important;\n    bottom:-40px !important;\n    top:auto !important;\n    white-space:nowrap !important;\n    background:rgba(250,247,242,.97) !important;\n    padding:4px 12px !important;\n    border-radius:2px !important;\n    font-size:8.5px !important;\n    letter-spacing:.18em !important;\n    color:rgba(0,0,0,.72) !important;\n    box-shadow:0 4px 12px -4px rgba(0,0,0,.22) !important;\n    border:1px solid rgba(192,57,43,.2) !important;\n    z-index:3 !important;\n  }\n  .jw-folio .jw-about-portrait-caption em{\n    color:#c0392b !important;\n    font-style:italic !important;\n    font-family:\"Fraunces\",serif !important;\n    margin-left:3px !important;\n  }\n  .jw-folio .jw-about-portrait::before{\n    inset:6px !important;\n    border-radius:50% !important;\n  }\n  \/* About section bottom spacing so caption doesn't clip *\/\n  .jw-folio .jw-about{\n    padding-bottom:56px !important;\n  }\n  \/* ---------- Commission Sheet plan cards ---------- *\/\n  .jw-folio .jw-svc-grid{\n    grid-template-columns:1fr !important;\n    gap:16px !important;\n  }\n  .jw-folio .jw-svc-col{\n    max-width:100% !important;\n    box-sizing:border-box !important;\n    overflow:hidden !important;\n  }\n  .jw-folio .jw-svc-col.featured{\n    transform:none !important;\n    margin-top:8px !important;\n  }\n  .jw-folio .jw-svc-badge{\n    position:absolute !important;\n    top:-10px !important;\n    right:12px !important;\n    font-size:8.5px !important;\n    padding:3px 10px !important;\n    letter-spacing:.16em !important;\n    white-space:nowrap !important;\n  }\n  .jw-folio .jw-svc-title{\n    font-size:18px !important;\n    line-height:1.3 !important;\n  }\n  .jw-folio .jw-svc-price{\n    font-size:14px !important;\n    white-space:nowrap !important;\n  }\n  .jw-folio .jw-svc-list{\n    font-size:12.5px !important;\n  }\n  \/* ---------- Global SP safety ---------- *\/\n  .jw-folio{\n    overflow-x:hidden !important;\n  }\n  .jw-folio section{\n    max-width:100vw !important;\n    box-sizing:border-box !important;\n  }\n  \/* Workflow steps wrap *\/\n  .jw-folio .jw-flow-grid{\n    grid-template-columns:1fr !important;\n    gap:14px !important;\n  }\n  .jw-folio .jw-flow-col{\n    max-width:100% !important;\n    box-sizing:border-box !important;\n  }\n}\n\/* Very narrow SP \u2014 360 and below *\/\n@media (max-width:360px){\n  .jw-folio .jw-about-portrait-caption{\n    font-size:7.8px !important;\n    letter-spacing:.14em !important;\n    padding:3px 9px !important;\n    bottom:-36px !important;\n  }\n  .jw-folio .jw-about-portrait{\n    margin-bottom:56px !important;\n  }\n  .jw-folio .jw-svc-badge{\n    font-size:8px !important;\n    padding:2px 8px !important;\n  }\n}\n<\/style>\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>VOL. I \u2014 MMXXVI \u2014 JO WORKS \u2014 A Portfolio Monograph PORTFOLIO MONOGRAPH \u2014 VOL. I JO Works MMXXVI \u2014 INDEPENDENT  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":"","_wp_rev_ctl_limit":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":56,"href":"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":165,"href":"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/pages\/80\/revisions\/165"}],"wp:attachment":[{"href":"https:\/\/works.jouhounokatachi.com\/blog\/wp-json\/wp\/v2\/media?parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}