<!doctype html>
<html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>要件定義書から、自分の Claude でアプリをつくる｜SOUZOH SPECS</title>
<meta name="description" content="ソウゾウが制作したアプリの要件定義書を無料で公開。ダウンロードしてプロンプトと一緒に Claude Code に送れば、デモと同じアプリが完成します。">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap">
<style>:root{--gpt:#10a37f;--gpt-tint:#e9f7f2;--code-bg:#16181c;--code-ink:#e8e9eb;--accent:#fd5c02;--accent-strong:#cc4a00;--accent-tint:#fef4ec;--ink:#1f2328;--sub:#5b6169;--line:#ecedef;--line-strong:#dcdee2;--page:#fff;--soft:#f7f7f8;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:15px/1.8 "Noto Sans JP",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand span{display:flex;flex-direction:column;line-height:1.1;font-family:"Zen Kaku Gothic New",sans-serif}
.brand b{font-size:15px;letter-spacing:.04em}.brand small{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.nav{display:flex;gap:18px}.nav a{font-size:13px;font-weight:700;text-decoration:none;color:var(--sub)}.nav a:hover{color:var(--accent)}
@media (max-width:520px){.nav .ext{display:none}.nav{gap:14px}}
.eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.hero{padding:64px 0 28px}
.hero h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(32px,6vw,48px);line-height:1.2;margin:8px 0 16px}
.lead{color:var(--sub);max-width:640px;margin:0}
.count{margin:20px 0 0;font-size:13px;color:var(--sub)}
.cat{margin:40px 0}
.cat h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px;display:flex;align-items:baseline;gap:10px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cat h2 span{font-size:13px;color:var(--sub);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{border:1px solid var(--line-strong);border-radius:14px;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--accent);box-shadow:0 4px 18px rgba(253,92,2,.08)}
.card-main{flex:1;padding:20px 20px 12px;text-decoration:none}
.card h3{margin:0 0 6px;font-size:17px;font-family:"Zen Kaku Gothic New",sans-serif}
.card p{margin:0;color:var(--sub);font-size:14px;line-height:1.7}
.tags{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:12px;background:var(--soft);border-radius:999px;padding:1px 10px;color:var(--sub)}
.card-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--line)}
.meta{font-size:12px;color:var(--sub);margin:0}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:13px;border-radius:999px;padding:7px 16px;white-space:nowrap}
.btn:hover{background:var(--accent-strong)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line-strong)}.btn.ghost:hover{border-color:var(--ink)}
.empty{color:var(--sub);padding:40px 0}
.doc-wrap{max-width:820px}
.crumb{font-size:13px;color:var(--sub);padding-top:28px}.crumb a{text-decoration:none}.crumb a:hover{color:var(--accent)}
.doc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:24px 0 8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.doc h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(26px,5vw,36px);line-height:1.3;margin:24px 0}
.doc h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:22px;margin:48px 0 14px;padding-left:12px;border-left:4px solid var(--accent);line-height:1.4}
.doc h3{font-size:17px;margin:28px 0 10px}
.doc ul,.doc ol{padding-left:1.4em}
.doc code{background:var(--soft);border-radius:4px;padding:1px 5px;font-size:.9em}
.doc blockquote{margin:16px 0;padding:8px 16px;border-left:3px solid var(--line-strong);color:var(--sub)}
.tbl{overflow-x:auto;margin:14px 0;border:1px solid var(--line-strong);border-radius:10px}
.doc table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.6}
.doc th,.doc td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.doc th{background:var(--soft);font-weight:700;white-space:nowrap}
.doc tr:last-child td{border-bottom:0}
.doc td:first-child{white-space:nowrap}
.doc-foot{display:flex;gap:10px;flex-wrap:wrap;margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.foot{border-top:1px solid var(--line);margin-top:64px;padding:24px 0;font-size:12px;color:var(--sub)}
@media (max-width:480px){.grid{grid-template-columns:1fr}.hero{padding-top:40px}}
.doc h1{scroll-margin-top:76px}.doc h2,.doc h3{scroll-margin-top:76px}
.doc h1:not(:first-child){font-size:clamp(22px,4vw,28px);margin:72px 0 16px;padding-top:24px;border-top:2px solid var(--ink)}
.doc hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.doc pre{background:#16181c;color:#e8e9eb;border-radius:10px;padding:16px;overflow-x:auto;font-size:13px;line-height:1.6}
.doc pre code{background:none;padding:0;color:inherit}
.doc li:has(>input[type=checkbox]){list-style:none;margin-left:-1.2em}.doc input[type=checkbox]{margin-right:6px;accent-color:var(--accent)}

/* hero */
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:28px 0 0}
.hero-cta .count{margin:0}
.btn.lg{font-size:15px;padding:12px 24px}
.btn.sm{font-size:12px;padding:5px 12px}
.small-hero{padding-bottom:8px}
.flow{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.flow li{position:relative;background:var(--soft);border-radius:12px;padding:14px 12px 12px;font-size:13px;line-height:1.5;font-weight:700}
.flow li b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;margin-bottom:6px}
.flow li span{display:block}
.flow li.opt{background:none;border:1.5px dashed var(--line-strong)}
.flow li.opt b{background:var(--gpt)}
.flow li em{position:absolute;top:10px;right:10px;font-style:normal;font-size:11px;color:var(--gpt);font-weight:700}
.flow li i{font-style:normal;display:inline-block}
.nb{display:inline-block}
@media (max-width:720px){.flow{grid-template-columns:1fr}.flow li{display:flex;align-items:center;gap:12px;padding:12px 14px}.flow li b{margin:0;flex:none}.flow li em{position:static;margin-left:auto}}
.card-actions{display:flex;gap:6px}
.steps-count{margin:10px 0 0!important;font-size:12px!important;color:var(--accent)!important;font-weight:700}

/* app page */
.app-head{margin:20px 0 0}
.app-head h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(30px,6vw,42px);line-height:1.25;margin:6px 0 8px}
.app-head .meta{margin-top:8px}
.tabs{display:flex;gap:4px;margin:28px 0 0;border-bottom:1px solid var(--line-strong);position:sticky;top:60px;background:#fff;z-index:4}
.tabs button{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 16px;font:700 15px/1 "Noto Sans JP",sans-serif;color:var(--sub);cursor:pointer}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tab-panel{padding-top:8px}
.spec-bar{display:flex;justify-content:flex-end;margin:16px 0 0}
.steps{list-style:none;padding:0;margin:24px 0 0;counter-reset:step}
.step{position:relative;counter-increment:step;padding:0 0 36px 52px;border-left:2px solid var(--line);margin-left:17px;padding-left:34px}
.step:last-child{border-left-color:transparent}
.step::before{content:counter(step);position:absolute;left:-18px;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:900 15px/1 "Zen Kaku Gothic New",sans-serif}
.step.optional::before{background:#fff;color:var(--gpt);border:2px solid var(--gpt);width:30px;height:30px}
.step h3{font-family:"Zen Kaku Gothic New",sans-serif;font-size:19px;margin:2px 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step p{margin:8px 0}
.badge{font-size:11px;font-weight:700;font-style:normal;color:var(--gpt);border:1px solid var(--gpt);border-radius:999px;padding:1px 9px;font-family:"Noto Sans JP",sans-serif;letter-spacing:0}
.small{font-size:13px;color:var(--sub)}
.note{font-size:13px;background:var(--soft);border-radius:10px;padding:10px 14px;color:var(--sub)}
code{background:var(--soft);border-radius:4px;padding:1px 6px;font:500 .88em "JetBrains Mono",ui-monospace,monospace}
.phases details{border:1px solid var(--line-strong);border-radius:12px;margin:10px 0;overflow:hidden}
.phases summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;padding:12px 16px;font-size:14px}
.phases summary::-webkit-details-marker{display:none}
.phases summary::after{content:"＋";margin-left:auto;color:var(--sub)}
.phases details[open] summary::after{content:"－"}
.phases details[open] summary{border-bottom:1px solid var(--line)}
.phase-label{font:700 12px/1.6 "JetBrains Mono",monospace;color:var(--accent);white-space:nowrap}
.phase-name{font-weight:700}
.phases .prompt{margin:12px}
.to-guide{margin:8px 0 0;font-size:14px;color:var(--sub)}
.to-guide a,.step a:not(.btn),.guide a:not(.btn){color:var(--accent-strong)}

/* prompt block */
.prompt{margin:14px 0;border-radius:12px;overflow:hidden;background:var(--code-bg);color:var(--code-ink)}
.prompt-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.prompt .to{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;color:#fdb68a}
.prompt .to::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.prompt.gpt .to{color:#7fdcbf}.prompt.gpt .to::before{background:var(--gpt)}
.prompt.plain .to{color:#b8bcc4}.prompt.plain .to::before{background:#8a8f98}
.copy{appearance:none;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;border-radius:8px;padding:4px 12px;font:700 12px/1.4 "Noto Sans JP",sans-serif;cursor:pointer}
.copy:hover{background:rgba(255,255,255,.1)}
.copy.done{background:var(--accent);border-color:var(--accent)}
.prompt pre{margin:0;padding:14px 16px 16px;white-space:pre-wrap;word-break:break-word;font:14px/1.75 "Noto Sans JP",system-ui,sans-serif}


/* guide */
.guide{max-width:820px}
.toc{border:1px solid var(--line-strong);border-radius:14px;padding:16px 22px;margin:36px 0 8px}
.toc p{margin:0 0 6px;font-weight:700;font-size:13px;color:var(--sub)}
.toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:28px;font-size:14px}
.toc a{text-decoration:none}.toc a:hover{color:var(--accent)}
@media (max-width:560px){.toc ol{columns:1}}
.g-sec{margin:56px 0 0;scroll-margin-top:76px}
.g-sec h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.g-sec h2>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;flex:none}
.g-sec h2 .badge{font-size:12px}
.plain{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}
.plain th,.plain td{border-top:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.plain th{white-space:nowrap;width:1%;padding-right:20px}
@media (max-width:560px){.plain th,.plain td{display:block;width:auto;border:0;padding:4px 0}.plain tr{display:block;border-top:1px solid var(--line);padding:10px 0}}
.sub{padding-left:1.4em}.sub li{margin:6px 0}
.callout{background:var(--accent-tint);border-radius:12px;padding:14px 18px;font-size:14px;margin:16px 0}
.callout.warn{background:#fff6e0}
.more{margin:12px 0;border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.more summary{cursor:pointer;font-weight:700;font-size:14px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700}
.app-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.app-links a{display:block;border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-size:14px;text-decoration:none;color:var(--ink)!important}
.app-links a:hover{border-color:var(--accent)}
@media (max-width:480px){.step{padding-left:26px}.tabs button{padding:12px 10px;font-size:14px}}
.doc :not(pre)>code,.step code,.guide :not(pre)>code{overflow-wrap:anywhere;word-break:break-word}
.doc a{overflow-wrap:anywhere}
.doc :not(pre)>code,.step code,.guide :not(pre)>code{overflow-wrap:anywhere;word-break:break-word}
.doc a{overflow-wrap:anywhere}
/* consult CTA */
.cta{background:#1f2328;color:#fff;margin-top:72px;padding:56px 0}
.cta .eyebrow{color:#fdb68a}
.cta h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(24px,5vw,34px);line-height:1.35;margin:8px 0 10px}
.cta-lead{color:#c9ccd1;margin:0 0 28px}
.cta-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.cta-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px}
.cta-box.main{background:#fff;color:var(--ink);border-color:#fff}
.cta-box h3{margin:0 0 6px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:19px}
.cta-box p{margin:0 0 18px;font-size:14px;color:#c9ccd1}
.cta-box.main p{color:var(--sub)}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)}.cta .btn.ghost:hover{border-color:#fff}
.btn.line{background:#06c755}.btn.line:hover{background:#05a948}
.cta-box.main .btn{width:100%;justify-content:center}
.cta-inline{font-size:14px;background:var(--accent-tint);border-radius:10px;padding:10px 14px;margin:12px 0}
.cta-inline a{color:var(--accent-strong);font-weight:700}
.foot{margin-top:0}
@media (max-width:720px){.cta-grid{grid-template-columns:1fr}.cta{padding:44px 0}.cta-btns .btn{flex:1 1 auto;justify-content:center}}
.cta{scroll-margin-top:60px}
/* helpdock: always-visible consult */
.helpdock{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;transition:opacity .2s,transform .2s}
.helpdock.is-away{opacity:0;transform:translateY(12px);pointer-events:none}
.hd-panel{position:relative;width:236px;background:#1f2328;color:#fff;border-radius:14px;padding:12px 14px 10px;box-shadow:0 10px 32px rgba(0,0,0,.22)}
.hd-close{position:absolute;top:6px;right:8px;appearance:none;border:0;background:none;color:#9aa0a8;font-size:20px;line-height:1;padding:6px;cursor:pointer}
.hd-close:hover{color:#fff}
.hd-title{margin:0 18px 0 0;font:700 14px/1.5 "Zen Kaku Gothic New",sans-serif}
.hd-sub{margin:0 0 10px;font-size:12px;line-height:1.6;color:#c9ccd1}
.hd-btns{display:grid;gap:8px}
.hd-btns{gap:6px}.hd-btns .btn{justify-content:center;padding:8px 8px;font-size:12.5px}
.hd-form{display:block;text-align:center;margin-top:6px;font-size:12px;color:#c9ccd1}
.hd-pill{display:none;appearance:none;border:0;cursor:pointer;align-items:center;gap:6px;background:#1f2328;color:#fff;border-radius:999px;padding:12px 18px;font:700 14px/1 "Noto Sans JP",sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.helpdock.is-mini .hd-panel{display:none}
.helpdock.is-mini .hd-pill{display:inline-flex}
@media (max-width:720px){
  .helpdock{left:0;right:0;bottom:0}
  .helpdock.is-mini{left:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .hd-panel{width:auto;border-radius:16px 16px 0 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .hd-close{top:4px;right:6px}
  .hd-title{font-size:13px;margin:0 28px 6px 0;white-space:normal}
  .hd-sub,.hd-form,.hd-long{display:none}
  .hd-btns{grid-template-columns:1fr 1fr}
  body.has-dock{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* demo → production */
.prod-note{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:16px 0 0;padding:10px 14px;border-radius:10px;background:#fff6e0;text-decoration:none;font-size:13px;color:var(--ink)}
.prod-note b{white-space:nowrap}
.prod-note span{color:var(--sub)}
.prod-note::after{content:"→";margin-left:auto;color:var(--accent-strong);font-weight:700}
.spec-bar{align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.spec-note{margin:0;font-size:13px;color:var(--sub)}.spec-note a{color:var(--accent-strong);font-weight:700}
.prod{background:var(--soft);margin-top:64px;padding:56px 0;scroll-margin-top:60px}
.prod-in{max-width:1080px;margin:0 auto;padding-inline:20px}
.prod h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(24px,5vw,34px);line-height:1.35;margin:8px 0 10px}
.prod>.prod-in>.lead{max-width:720px}
.gaps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gaps li{background:#fff;border:1px solid var(--line-strong);border-radius:14px;padding:18px}
.gaps h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:16px;line-height:1.4}
.gaps h3 b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;flex:none}
.gaps dl{margin:0;font-size:13px;line-height:1.7}
.gaps dt{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.04em}
.gaps dt.p{color:var(--accent-strong);margin-top:10px}
.gaps dd{margin:2px 0 0}
@media (max-width:960px){.gaps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gaps{grid-template-columns:1fr}}
.prod-cta{margin-top:28px;background:#fff;border:1px solid var(--line-strong);border-radius:18px;padding:24px;display:grid;gap:18px}
.prod-cta-text{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;align-items:start}
.prod-cta-text h3,.prod-cta-text>p:first-of-type{grid-column:1}.prod-cta-text .checks{grid-column:2;grid-row:1/span 3;margin:4px 0 0}.prod-cta-text .small{grid-column:1}
.prod-cta-text h3{margin:0 0 8px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px}
.prod-cta-text p{margin:0 0 12px;font-size:14px}
.checks{list-style:none;padding:0;margin:0 0 12px;font-size:14px}
.checks li{position:relative;padding-left:24px;margin:6px 0}
.checks li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.embed{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;min-width:0}
.embed iframe{display:block;width:100%;height:800px;border:0}
.prod-alt{margin:0;font-size:13px;color:var(--sub)}
.prod-alt a{color:var(--accent-strong);font-weight:700}
@media (max-width:860px){.prod-cta{padding:18px}.prod-cta-text{grid-template-columns:1fr}.prod-cta-text .checks{grid-column:1;grid-row:auto}.embed iframe{height:1060px}}
.prod-band{margin:56px 0 0;padding:28px;border-radius:18px;background:#1f2328;color:#fff;display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center}
.prod-band .eyebrow{color:#fdb68a}
.prod-band h2{margin:6px 0;font-family:"Zen Kaku Gothic New",sans-serif;font-size:22px}
.prod-band p{margin:0;color:#c9ccd1;font-size:14px}
.prod-band ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1;order:3}
.prod-band li{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:999px;padding:6px 14px 6px 6px;font-size:13px;font-weight:700}
.prod-band li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);font-size:11px}
@media (max-width:720px){.prod-band{grid-template-columns:1fr}.prod-band .btn{justify-content:center}}
/* スマホでは埋め込みカレンダーを画面の端から端まで使う（Lark の画面は枠が狭いと右が切れる） */
@media (max-width:560px){
  .prod-cta{margin-inline:-20px;width:calc(100% + 40px);border-radius:0;border-inline:0;padding:20px 0}
  .prod-cta-text,.prod-alt{padding-inline:20px}
  .embed{border-radius:0;border-inline:0}
}
/* gallery-style cards (gallery.souzoh.app/showcase に合わせる) */
.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 20px}
.card{border:0;border-radius:0;background:none}
.card:hover{box-shadow:none}
.card-visual{position:relative;display:block;aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#f3f4f6 0%,#fdf1e7 100%);border:1px solid var(--line)}
.card-visual:hover .mock{transform:translateY(-4px)}
.card-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.mock{position:absolute;inset:0;display:block;transition:transform .25s}
.mock-pc{position:absolute;left:6%;top:12%;width:80%;aspect-ratio:16/10;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(31,35,40,.12)}
.mock-pc i{display:block;height:7%;background:#f0f1f3;position:relative}
.mock-pc i::before{content:"";position:absolute;left:3%;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#d5d8dc;box-shadow:9px 0 #d5d8dc,18px 0 #d5d8dc}
.mock-pc img{display:block;width:100%;height:93%;object-fit:cover;object-position:top}
.mock-sp{position:absolute;right:6%;bottom:7%;width:21%;aspect-ratio:9/19;background:#1f2328;border-radius:14px;padding:3px;box-shadow:0 10px 24px rgba(31,35,40,.25)}
.mock-sp img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:11px}
.card-body{padding:14px 2px 0}
.card-cat{margin:0;font-size:12px;font-weight:700;color:var(--accent)}
.card-body h3{margin:4px 0 6px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px}
.card-body h3 a{text-decoration:none}.card-body h3 a:hover{color:var(--accent)}
.card-sum{margin:0;font-size:14px;line-height:1.7;color:var(--sub)}
.card .card-foot{border:0;padding:12px 2px 0;gap:8px}
.card-demo{font-size:13px;font-weight:700;color:var(--sub);text-decoration:none;white-space:nowrap}
.card-demo::after{content:" ↗"}
.card-demo:hover{color:var(--accent)}
/* app header with visual */
.app-head.has-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;align-items:center}
.app-head.has-visual .prod-note{grid-column:1/-1}
.app-head-visual{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#f3f4f6 0%,#fdf1e7 100%);border:1px solid var(--line)}
.app-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
@media (max-width:720px){.app-head.has-visual{grid-template-columns:1fr}.app-head-visual{order:-1}}
.app-head.has-visual{grid-template-columns:1.15fr 1fr}
.app-head.has-visual h1{font-size:clamp(26px,3.6vw,34px)}
@media (max-width:720px){.app-head.has-visual{grid-template-columns:1fr}.app-head.has-visual h1{font-size:clamp(28px,7vw,34px)}}

/* ===== 色の役割を整理（2026-09-23）=====
   オレンジ＝その場でいちばん押してほしい操作だけ／黒＝順番と構造／グレー＝小見出し・補足の札
   緑＝LINE と ChatGPT（サービスの色）／黄＝注意 */
:root{--label:#6b7178;--chip:#f1f2f4}
.eyebrow{color:var(--label)}
.cta .eyebrow,.prod-band .eyebrow{color:#9aa0a8}
/* 流れ */
.flow li b{background:var(--ink)}
.flow li.opt b{background:#fff;color:var(--label);border:1.5px solid var(--line-strong)}
.flow li em{color:var(--label)}
/* 補足の札 */
.badge{color:var(--label);border:0;background:var(--chip);font-weight:700}
/* 段階の番号 */
.step::before{background:var(--ink)}
.step.optional::before{background:#fff;color:var(--label);border:2px dashed var(--line-strong)}
.phase-label{color:var(--label)}
/* コピー枠の見出し：送り先の色は点だけにして、文字は落ち着かせる */
.prompt .to{color:#c9ccd1}
.prompt.gpt .to{color:#c9ccd1}
.prompt .to::before{background:#d97757}
/* 相談の1行 */
.cta-inline{background:var(--soft);border-left:3px solid var(--ink);border-radius:0 10px 10px 0}
.cta-inline a{color:var(--ink);text-decoration:underline}
/* 本番の節 */
.gaps dt.p{color:var(--ink)}
.prod-band li b{background:rgba(255,255,255,.18)}
.prod-note::after{margin-left:6px}
.prod-note span{flex:1 1 16em}
/* カード */
.card{display:flex;flex-direction:column}
.card-body{flex:1}
.card .card-foot{margin-top:auto}
.card-badge{background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--line);font-weight:700;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.card-code{margin:0;font:500 11px/1.6 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:var(--label)}
.card-go{font-size:14px;font-weight:700;color:var(--accent-strong);text-decoration:none;white-space:nowrap;padding:6px 2px}
.card-go:hover{color:var(--accent)}
.card-actions{align-items:center;gap:12px}
/* アプリの頭：分類は灰色 */
.app-head .eyebrow{color:var(--label)}
/* カード全体を押せる（タイトルのリンクを全面に広げる）。デモ・MD だけは上に重ねて個別に押せる */
.card{position:relative;cursor:pointer}
.card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px}
.card-demo,.card-actions .btn{position:relative;z-index:2}
.card .card-visual{transition:transform .2s,box-shadow .2s}
.card:hover .card-visual{transform:translateY(-3px);box-shadow:0 10px 28px rgba(31,35,40,.10)}
.card:hover .mock{transform:none}
.card:hover h3 a{color:var(--accent-strong)}
.card:hover .card-go{color:var(--accent)}
.card:has(.card-link:focus-visible){outline:2px solid var(--accent);outline-offset:6px;border-radius:18px}
.card-link:focus-visible{outline:none}
.card .card-foot{flex-wrap:wrap;row-gap:6px}
.card-actions{gap:10px;margin-left:auto}
.card-go{padding:6px 0}
/* カード下段：「デモを触る」「ダウンロード」を同じ幅で並べる。「要件定義書を見る →」は説明文の下 */
.card .card-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:14px}
.card .card-foot .btn{justify-content:center;position:relative;z-index:2;color:var(--ink)}
.card-demo::after{content:" ↗"}
.card-go{display:inline-block;margin-top:8px;padding:0;font-size:14px}
.card-body{display:flex;flex-direction:column}
.card-go{margin-top:auto;padding-top:8px;align-self:flex-start}
.card-sum{margin-bottom:0}
/* 段階名が長くても折り返す（英数字の長い並びも途中で折る） */
.phases summary{align-items:flex-start}
.phase-name{min-width:0;flex:1;overflow-wrap:anywhere;word-break:break-word}
/* 本文の長い英字の並び（Avatar/PersonPhoto/… など）も途中で折り返す。表は横スクロールなので対象外 */
.doc p,.doc li,.doc blockquote,.doc h1,.doc h2,.doc h3,.doc h4{overflow-wrap:anywhere}

/* ===== 2026-09-23 西澤さん指示：制作実績ページ（gallery.souzoh.app/showcase）と同じ大きさ・動きに ===== */
:root{--surface-2:#f7f8f9;--surface-3:#f1f2f4;--accent-line:#f7d7c0}
.wrap.wide{max-width:1320px}
.pc-only{display:inline}.sp-only{display:none}
@media (max-width:640px){.pc-only{display:none}.sp-only{display:inline}}

/* トップ */
.hero2{border-bottom:1px solid var(--line);overflow:hidden}
.hero2-in{max-width:1320px;margin:0 auto;padding:40px 20px 32px;display:grid;grid-template-columns:1fr 1.05fr;gap:24px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;margin:0;border:1px solid var(--accent-line);background:var(--accent-tint);color:var(--accent-strong);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}
.chip span{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero2 h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(38px,5.4vw,66px);line-height:1.16;letter-spacing:-.01em;margin:22px 0 0}
.hero2 h1 em{font-style:normal;color:var(--accent)}
.hero2 .lead{max-width:34em;margin:22px 0 0;font-size:16px;line-height:2;color:var(--sub)}
.hero2 .lead b{color:var(--ink)}
.hero-steps{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.hero-steps li{display:flex;align-items:center;gap:10px;flex:1 1 150px;background:#fff;border:1px solid var(--line-strong);border-radius:14px;padding:12px 14px;font-weight:700;font-size:14px;line-height:1.45}
.hero-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;flex:none}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.btn.xl{height:56px;padding:0 26px;font-size:16px;border-radius:14px}
.btn.lg{border-radius:12px}
.hero2-visual{position:relative;height:560px}
@media (max-width:960px){.hero2-in{grid-template-columns:1fr;padding-top:28px}.hero2-visual{height:320px;margin:0 -20px}}
.marquee{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-tilt{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;transform:rotate(-6deg) scale(1.12);transform-origin:center;height:100%}
.marquee-col{display:flex;flex-direction:column;gap:16px;animation:mq-up 50s linear infinite}
.marquee-col.rev{animation-name:mq-down}
@keyframes mq-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes mq-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.mq-shot{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(31 35 40/.06),0 12px 28px -8px rgb(31 35 40/.18)}
.mq-shot i{display:block;height:14px;background:#f0f1f3}
.mq-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* 分類の見出し（WHAT 01 / 業務システム） */
.cat{margin:72px 0 0}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 28px}
.cat-head h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(30px,4.4vw,48px);line-height:1.2;margin:8px 0 0;padding:0;border:0;display:block}
.cat-text{margin:12px 0 0;color:var(--sub);font-size:15px}
.cat-count{margin:0;color:var(--sub);font-size:13px}.cat-count b{font-family:"Zen Kaku Gothic New",sans-serif;font-size:28px;color:var(--ink);margin:0 2px}
.cat h2 span{display:none}

/* カード（制作実績ページと同じ） */
.grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:48px 28px}
@media (max-width:760px){.grid{grid-template-columns:1fr;gap:40px}}
.card{position:relative;display:flex;flex-direction:column;cursor:pointer}
.card.pending{opacity:0}
.card.shown{animation:card-rise .7s cubic-bezier(.2,0,0,1) backwards;animation-delay:var(--delay,0ms)}
@keyframes card-rise{from{opacity:0;transform:translateY(22px)}}
.card-visual{position:relative;display:block;aspect-ratio:16/11;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 90% at 100% 0,var(--accent-tint) 0,transparent 55%),linear-gradient(180deg,var(--surface-2) 0,var(--surface-3) 100%)}
.card:hover .card-visual{box-shadow:none;transform:none}
.stage{position:absolute;inset:0}
.pc{position:absolute;left:6%;top:11%;width:80%;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgb(31 35 40/.06),0 14px 34px -10px rgb(31 35 40/.22)}
.pc i{display:block;height:5.5%;min-height:12px;background:#f0f1f3;position:relative}
.pc i::before{content:"";position:absolute;left:10px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#d5d8dc;box-shadow:9px 0 #d5d8dc,18px 0 #d5d8dc}
.screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.phone{position:absolute;right:5%;bottom:7%;width:21%;aspect-ratio:9/19;background:#2b3036;border-radius:16px;padding:3px;box-shadow:0 14px 30px -8px rgb(31 35 40/.35)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:13px}
.lift,.lift-phone{transition:transform .45s cubic-bezier(.2,0,0,1)}
.card:hover .lift,.card-visual.in-view .lift{transform:translateY(-6px)}
.card:hover .lift-phone{transform:translateY(-12px) rotate(-2deg)}
/* 中の写真：縦長はスクロール、1画面ものはゆっくり拡大 */
@keyframes page-pan{0%,12%{object-position:50% 0}88%,100%{object-position:50% 100%}}
@keyframes page-zoom{0%,10%{transform:scale(1)}90%,100%{transform:scale(1.08)}}
.screen img.zoom{transform-origin:50% 0}
@media (hover:hover){
  .card:hover .screen img.pan,.app-hero-visual .screen img.pan{animation:page-pan var(--dur,8s) cubic-bezier(.4,0,.2,1) infinite alternate}
  .card:hover .screen img.zoom,.app-hero-visual .screen img.zoom{animation:page-zoom 6s ease-in-out infinite alternate}
}
@media (hover:none){
  .card-visual.in-view .screen img.pan{animation:page-pan var(--dur,8s) cubic-bezier(.4,0,.2,1) infinite alternate}
  .card-visual.in-view .screen img.zoom{animation:page-zoom 6s ease-in-out infinite alternate}
}
.card-badge{position:absolute;top:14px;left:14px;z-index:1;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;backdrop-filter:none}
.card-body{padding:20px 4px 0;display:flex;flex-direction:column;flex:1}
.card-code{margin:0;font:600 12px/1.6 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--accent-strong)}
.card-body h3{margin:6px 0 0;font-family:"Zen Kaku Gothic New",sans-serif;font-size:22px;font-weight:900;line-height:1.4}
.card-body h3 a{text-decoration:none;color:var(--ink);transition:color .2s}
.card:hover .card-body h3 a{color:var(--accent-strong)}
.card-sum{margin:8px 0 0;font-size:15px;line-height:1.8;color:var(--sub)}
.card .card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 4px 0;margin-top:auto;border:0;grid-template-columns:none}
.card-go{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;white-space:nowrap;margin:0;transition:background .2s}
.card-go small{font-size:11px;font-weight:700;background:rgba(255,255,255,.22);border-radius:999px;padding:1px 7px}
.card:hover .card-go{background:var(--accent-strong);color:#fff}
.card-demo{position:relative;z-index:2;font-size:14px;font-weight:700;color:var(--sub);text-decoration:none;white-space:nowrap;padding:10px 4px}
.card-demo::after{content:none}
.card-demo:hover{color:var(--accent-strong)}
.card-link::after{border-radius:18px}
@media (prefers-reduced-motion:reduce){.card.shown,.marquee-col,.screen img{animation:none!important}.card.pending{opacity:1}}

/* 本番への案内の帯 */
.next-band{margin:88px 0 0;padding:32px;border-radius:20px;background:#1f2328;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap}
.next-band .eyebrow{color:#9aa0a8}
.next-band h2{margin:6px 0 8px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:clamp(22px,3vw,30px)}
.next-band p{margin:0;color:#c9ccd1;font-size:15px;max-width:40em}
.guide .next-band{margin-top:64px}

/* アプリの詳しいページ */
.doc-wrap.wide2{max-width:1180px}
.app-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;margin:20px 0 0}
.app-hero-visual{aspect-ratio:16/11}
.app-hero-text h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(30px,4vw,46px);line-height:1.25;margin:8px 0 10px}
.app-hero-text .lead{font-size:16px}
.announce{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--accent-tint);border:1px solid var(--accent-line);font-size:15px;line-height:1.85;color:var(--ink)}
.announce b{color:var(--accent-strong)}
.app-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.app-actions .btn.lg{height:52px;font-size:15px}
.app-hero .meta{margin-top:12px}
@media (max-width:860px){.app-hero{grid-template-columns:1fr;gap:20px}.app-hero-visual{order:-1}}
.tabs{margin-top:40px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap;font-size:16px;padding:14px 18px}
.tabs button[data-tab=prod]{margin-left:auto;color:var(--accent-strong)}
.tabs button[data-tab=prod][aria-selected=true]{color:var(--ink)}
@media (max-width:560px){.tabs button{font-size:14px;padding:12px 12px}.tabs button[data-tab=prod]{margin-left:0}}
.tab-prod .prod{margin-top:24px;border-radius:20px}
.tab-prod .prod-in{padding-inline:24px}
@media (max-width:560px){.tab-prod .prod{margin-inline:-20px;border-radius:0}.tab-prod .prod-in{padding-inline:20px}}
.steps .step h3{font-size:21px}
.doc-wrap.wide2 .steps,.doc-wrap.wide2 .to-guide{max-width:880px}
.doc-wrap.wide2 #tab-spec{max-width:880px}
/* 上部メニュー・相談の帯・フッターも本文と同じ幅に */
.top .wrap,.cta .wrap,.foot .wrap{max-width:1320px}
/* オレンジは「作り方を見る」だけ：札は白、英語名はグレー */
.card-badge{background:rgba(255,255,255,.94);color:var(--ink);border:1px solid var(--line-strong)}
.card-code{color:var(--label)}
.tabs button[data-tab=prod]{margin-left:0}

/* ===== 2026-09-23 サイズ感の統一（トップと同じ大きさ）＋どの幅でも崩れない ===== */
/* 崩れ防止の土台：はみ出す要素を作らない */
html{-webkit-text-size-adjust:100%}
body{font-size:16px;overflow-x:clip}
img,svg,video,iframe{max-width:100%}
.doc p,.doc li,.doc td,.doc th,.doc blockquote,.card-sum,.lead{overflow-wrap:break-word}
.wrap{padding-inline:clamp(16px,4vw,32px)}

/* 幅：ガイド・詳しいページ・本番ページも一覧と同じ広さに */
.guide{max-width:1120px}
.doc-wrap.wide2{max-width:1240px}
.doc-wrap.wide2 .steps,.doc-wrap.wide2 .to-guide,.doc-wrap.wide2 #tab-spec{max-width:980px;margin-inline:auto}
.doc-wrap.wide2 #tab-spec .spec-bar{max-width:980px}
.prod-in{max-width:1240px;padding-inline:clamp(16px,4vw,32px)}

/* 文字 */
.lead{font-size:clamp(16px,1.4vw,18px);line-height:1.95}
.eyebrow{font-size:13px}
.small{font-size:14px}
.hero.small-hero h1{font-size:clamp(34px,5vw,56px)}
.hero.small-hero{padding:56px 0 20px}

/* 作り方の流れ（ガイドの上） */
.flow{gap:12px;margin-top:32px}
.flow li{padding:18px 16px 16px;font-size:15px;border-radius:14px}
.flow li b{width:28px;height:28px;font-size:13px}

/* 目次 */
.toc{padding:22px 28px;border-radius:18px;margin-top:40px}
.toc p{font-size:14px}
.toc ol{font-size:16px;line-height:2}

/* ガイドの各節 */
.g-sec{margin-top:80px}
.g-sec h2{font-size:clamp(24px,3vw,32px);gap:14px}
.g-sec h2>span{width:40px;height:40px;font-size:17px}
.g-sec p,.g-sec li{font-size:16px;line-height:1.95}
.plain{font-size:16px}
.plain th,.plain td{padding:16px 12px}
.callout{font-size:15px;padding:18px 22px;border-radius:14px}
.faq summary{font-size:17px;padding:4px 0}
.faq details{padding:18px 0}
.more summary{font-size:16px}
.app-links a{font-size:15px;padding:9px 18px}

/* つくり方の段階 */
.steps{margin-top:36px}
.step{padding-bottom:48px;padding-left:44px;margin-left:20px}
.step::before{width:40px;height:40px;left:-21px;font-size:17px}
.step.optional::before{width:36px;height:36px;left:-19px}
.step h3,.steps .step h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:14px}
.step p{font-size:16px;line-height:1.95}
.badge{font-size:12px;padding:3px 10px}
.phases summary{font-size:15px;padding:16px 18px}
.to-guide{font-size:15px}

/* コピーする文の枠 */
.prompt{border-radius:14px;margin:18px 0}
.prompt-head{padding:10px 12px 10px 18px}
.prompt .to{font-size:13px}
.copy{font-size:13px;padding:6px 14px}
.prompt pre{font-size:15.5px;line-height:1.85;padding:18px 20px 20px}

/* ボタン（小さすぎないように） */
.btn{font-size:15px;padding:10px 20px}
.btn.lg{height:52px;padding:0 24px;font-size:16px}
.btn.sm{font-size:13px;padding:7px 14px}

/* 要件定義書の本文 */
.doc{font-size:16px;line-height:1.95}
.doc h1{font-size:clamp(26px,3.4vw,38px)}
.doc h1:not(:first-child){font-size:clamp(22px,2.8vw,30px)}
.doc h2{font-size:clamp(20px,2.4vw,26px)}
.doc h3{font-size:19px}
.doc table{font-size:15px}
.spec-note{font-size:14px}
.spec-bar{margin-top:24px}

/* 本番の節 */
.prod{padding:72px 0}
.prod h2{font-size:clamp(28px,4vw,44px)}
.gaps{gap:16px;margin-top:36px}
.gaps li{padding:22px;border-radius:16px}
.gaps h3{font-size:18px;margin-bottom:14px}
.gaps dl{font-size:15px;line-height:1.8}
.gaps dt{font-size:12px}
.prod-cta{padding:32px;border-radius:20px;margin-top:36px}
.prod-cta-text h3{font-size:clamp(20px,2.4vw,26px)}
.prod-cta-text p,.checks{font-size:16px}
.prod-alt{font-size:15px}
@media (max-width:1100px){.gaps{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gaps{grid-template-columns:1fr}.prod{padding:48px 0}.prod-cta{padding:20px}}

/* 一覧の帯・相談ブロック */
.next-band{padding:40px;border-radius:22px}
.next-band p{font-size:16px}
.cta h2{font-size:clamp(26px,4vw,40px)}
.cta-lead{font-size:16px}
.cta-box{padding:28px;border-radius:18px}
.cta-box h3{font-size:21px}
.cta-box p{font-size:15px}

/* 上部メニュー */
.nav a{font-size:14px}
.brand b{font-size:16px}

/* ---- 狭い画面 ---- */
@media (max-width:640px){
  .hero.small-hero{padding-top:36px}
  .g-sec{margin-top:56px}
  .step{padding-left:30px;margin-left:16px}
  .step::before{width:34px;height:34px;left:-18px;font-size:15px}
  .step.optional::before{width:30px;height:30px;left:-16px}
  .prompt pre{font-size:15px;padding:14px 16px 16px}
  .toc{padding:18px 20px}
  .toc ol{columns:1}
  .next-band{padding:26px 22px}
  .next-band .btn{width:100%;justify-content:center}
  .app-actions .btn{flex:1 1 100%;justify-content:center}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center}
  .cta-box{padding:22px}
  .nav{gap:12px}.nav a{font-size:13px}
  .plain th{width:auto}
}
@media (max-width:360px){
  .nav a{font-size:12px}.nav{gap:9px}
  .brand small{display:none}
  .card .card-foot{flex-wrap:wrap}
  .card-go{flex:1 1 100%;justify-content:center}
  .tabs button{font-size:13px;padding:12px 9px}
  .hero-steps li{flex-basis:100%}
}
/* 左右の余白を1つの値で管理し、画面の端まで広げる部品もそれに合わせる */
:root{--gut:clamp(16px,4vw,32px)}
.wrap,.prod-in{padding-inline:var(--gut)}
@media (max-width:560px){
  .prod-cta{margin-inline:calc(-1 * var(--gut));width:calc(100% + 2 * var(--gut))}
  .prod-cta-text,.prod-alt{padding-inline:var(--gut)}
  .tab-prod .prod{margin-inline:calc(-1 * var(--gut))}
  .tab-prod .prod-in{padding-inline:var(--gut)}
}
/* 狭い画面では、ボタンの文字を折り返して枠内に収める */
@media (max-width:480px){
  .btn{white-space:normal;text-align:center;justify-content:center;height:auto;min-height:44px;line-height:1.4;padding-block:10px;max-width:100%}
  .btn.lg,.btn.xl{min-height:52px}
}

/* 言葉を途中で切らない・縮ませない部品 */
.brand span,.brand b,.brand small,.nav a,.tabs button,.copy,.prompt .to,.btn,.card-go,.card-demo,.badge,.chip,.eyebrow{white-space:nowrap}
.tabs button,.copy,.nav a,.brand{flex:none}
.prompt-head{gap:10px}
.prompt .to{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){
  .btn{white-space:normal}
  .nav .ext,.nav a[href$="guide/"] .pc-only{display:none}
}
@media (max-width:400px){
  .nav{gap:10px}.nav a{font-size:12.5px}
  .brand svg{width:24px;height:24px}
  .btn,.btn.lg,.btn.xl{font-size:14px}
  .app-hero-text h1{font-size:28px}
}
@media (max-width:330px){
  .nav a[href$="guide/"]{display:none}
}
@media (max-width:400px){
  .btn,.btn.lg,.btn.xl{padding-inline:14px}
  .tabs button{padding:12px 10px;font-size:14px}
  .prompt .to{font-size:12px}
}
@media (max-width:330px){.tabs button{padding:12px 6px;font-size:13px}.tabs{gap:0}}
.eyebrow{white-space:normal}.next-band>div{min-width:0;flex:1 1 260px}
/* 文章の改行：言葉の途中で切らず、文節で折り返す（対応ブラウザ）。文ごとに改行 */
.lead,.cat-text,.next-band p,.announce,.hero2 h1,.app-hero-text h1,h2{word-break:auto-phrase}
.lead .ln{display:block}
.hero.small-hero .lead{max-width:none}
.hero2-in>*,.app-hero>*{min-width:0}
@media (max-width:420px){.lead,.cat-text,.next-band p,.announce,.hero2 h1,.app-hero-text h1,h2{word-break:normal}}
/* 紹介動画 */
.card-badges{position:absolute;top:14px;left:14px;z-index:1;display:flex;flex-wrap:wrap;gap:6px}
.card-badges .card-badge{position:static}
.card-badge.video{display:inline-flex;align-items:center;gap:4px}
.card-badge.video i{font-style:normal;color:#E62117;font-size:10px}
.video-link{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:10px 14px 10px 10px;border:1px solid var(--line-strong);border-radius:14px;text-decoration:none;color:var(--ink);max-width:420px;background:#fff;transition:border-color .2s}
.video-link:hover{border-color:var(--ink)}
.vl-thumb{position:relative;flex:none;width:96px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.vl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vl-thumb i{position:absolute;inset:0;margin:auto;width:28px;height:20px;border-radius:6px;background:#E62117;color:#fff;font-style:normal;font-size:10px;display:grid;place-items:center}
.video-link b{display:block;font-size:15px}
.video-link small{display:block;font-size:13px;color:var(--sub);margin-top:2px}
.video-panel{max-width:980px;margin:32px auto 0}
.vp-lead{margin:0 0 16px;font-size:16px;color:var(--sub)}
.vp-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 18px 44px -14px rgba(31,35,40,.35)}
.vp-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.vp-thumb:hover img{transform:scale(1.02)}
.vp-label{position:absolute;left:16px;top:16px;background:rgba(0,0,0,.72);color:#fff;font-size:13px;font-weight:700;border-radius:999px;padding:5px 12px}
.vp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:58px;border-radius:16px;background:#E62117;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.vp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px}
.vp-title{margin:0;font-size:clamp(16px,2vw,19px);font-weight:700;line-height:1.6;flex:1 1 280px}
.vp-next{margin:18px 0 0;font-size:15px;color:var(--sub)}.vp-next a{color:var(--accent-strong);font-weight:700}
@media (max-width:480px){.vp-play{width:64px;height:44px}.vp-row .btn{width:100%}}
@media (max-width:330px){.tabs button{padding:12px 5px;font-size:12.5px}}
</style></head>
<body>
<header class="top"><div class="wrap"><a class="brand" href="./"><svg viewBox="0 0 40 40" width="28" height="28" aria-hidden="true"><path d="M27.5 9.5c-4.2-2.6-9 .3-11.6 4.2-2.4 3.6-6.2 6.2-9.4 4.5" fill="none" stroke="var(--accent)" stroke-width="4.6" stroke-linecap="round"/><path d="M12.5 30.5c4.2 2.6 9-.3 11.6-4.2 2.4-3.6 6.2-6.2 9.4-4.5" fill="none" stroke="var(--accent)" stroke-width="4.6" stroke-linecap="round"/><circle cx="30.5" cy="10.5" r="4.4" fill="var(--accent)"/><circle cx="9.5" cy="29.5" r="4.4" fill="var(--accent)"/></svg><span><b>SOUZOH</b><small>SPECS</small></span></a>
<nav class="nav"><a href="./">要件定義書</a><a href="./guide/"><span class="pc-only">作り方ガイド</span><span class="sp-only">ガイド</span></a><a href="./production/"><span class="pc-only">本番で使いたい方へ</span><span class="sp-only">本番利用</span></a></nav></div></header>
<section class="hero2"><div class="hero2-in">
<div class="hero2-text">
<p class="chip"><span></span>作り方は無料・要件定義書つき</p>
<h1>要件定義書から、<br><em>自分の Claude で</em><br>アプリをつくる</h1>
<p class="lead">気になるアプリの要件定義書をダウンロードして、プロンプトと一緒に Claude Code に送るだけ。<b>デモと同じアプリが、あなたの手元で完成します。</b></p>
<ol class="hero-steps"><li><b>1</b><span>アプリを選ぶ</span></li><li><b>2</b><span>要件定義書を<br>ダウンロード</span></li><li><b>3</b><span>Claude Code に<br>送って完成</span></li></ol>
<div class="hero-ctas"><a class="btn xl" href="#cat-01">作れるアプリを見る ↓</a><a class="btn xl ghost" href="guide/">作り方ガイド</a></div>
</div>
<div class="hero2-visual"><div class="marquee" aria-hidden="true"><div class="marquee-tilt"><div class="marquee-col" style="animation-duration:46s"><div class="mq-shot"><i></i><img src="shots/relate-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/tsumu-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/kura-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/casta-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/match-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/reviews-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/relate-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/tsumu-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/kura-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/casta-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/match-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/reviews-desktop.webp" alt="" loading="lazy" decoding="async"></div></div><div class="marquee-col rev" style="animation-duration:58s"><div class="mq-shot"><i></i><img src="shots/fieldpin-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/tenken-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/tokiwa-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/kanade-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/market-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/fieldpin-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/tenken-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/tokiwa-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/kanade-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/market-desktop.webp" alt="" loading="lazy" decoding="async"></div></div><div class="marquee-col" style="animation-duration:70s"><div class="mq-shot"><i></i><img src="shots/portal-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/hibi-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/hirebase-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/sns-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/delivery-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/portal-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/hibi-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/hirebase-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/sns-desktop.webp" alt="" loading="lazy" decoding="async"></div><div class="mq-shot"><i></i><img src="shots/delivery-desktop.webp" alt="" loading="lazy" decoding="async"></div></div></div></div></div>
</div></section>
<main class="wrap wide" id="apps">
<section class="cat" id="cat-01"><div class="cat-head"><div><p class="eyebrow">WHAT 01</p><h2>業務システム</h2><p class="cat-text">社内の仕事を回すシステム。顧客管理から勤怠まで、そのまま自社用の土台になります。</p></div><p class="cat-count">作れるアプリ <b>8</b> 件</p></div>
<div class="grid"><article class="card reveal" style="--delay:0ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:12s" src="shots/relate-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/relate-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span><span class="card-badge video"><i>▶</i>動画で紹介中</span></span></div>
  <div class="card-body"><p class="card-code">RELATE</p><h3><a class="card-link" href="relate/">顧客・商談管理</a></h3><p class="card-sum">Excelをやめられる、中小企業のための顧客・商談管理システム</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://relate.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:70ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="zoom" style="--dur:4s" src="shots/fieldpin-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/fieldpin-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">FIELDPIN</p><h3><a class="card-link" href="fieldpin/">地図・訪問記録</a></h3><p class="card-sum">訪問先を地図で管理し、GPSで訪問を記録する</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://fieldpin.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:140ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="zoom" style="--dur:4s" src="shots/portal-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/portal-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">Souzoh Portal</p><h3><a class="card-link" href="portal/">社内ポータル</a></h3><p class="card-sum">会社の「いま」が、ひと目で分かるダッシュボード型ポータル</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://souzoh-portal.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:0ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:11s" src="shots/tsumu-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/tsumu-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">TSUMU</p><h3><a class="card-link" href="tsumu/">タスク管理</a></h3><p class="card-sum">3秒で積む。今日／リスト／ボード／カレンダーの4つの見え方で捌く</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://tsumu.souzoh.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:70ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:6s" src="shots/tenken-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/tenken-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">TENKEN</p><h3><a class="card-link" href="tenken/">点検・チェックリスト</a></h3><p class="card-sum">1項目、1タップ、0.8秒。紙より速い点検表と、異常の是正追跡</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://tenken.souzoh.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:140ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:5s" src="shots/hibi-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/hibi-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">HIBI</p><h3><a class="card-link" href="hibi/">日報・週報</a></h3><p class="card-sum">書く時間を、90秒に。前回をコピーして変わった分だけ直す日報</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://hibi.souzoh.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:0ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:4s" src="shots/kura-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/kura-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">KURA</p><h3><a class="card-link" href="kura/">在庫管理</a></h3><p class="card-sum">在庫数は、書き換えない。入出庫の履歴から積み上げる</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://kura.souzoh.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:70ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:4s" src="shots/tokiwa-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/tokiwa-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">TOKIWA</p><h3><a class="card-link" href="tokiwa/">勤怠・シフト管理</a></h3><p class="card-sum">打刻は書き換えない。丸めも残業も、毎回そこから計算する</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://tokiwa.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article></div></section>
<section class="cat" id="cat-02"><div class="cat-head"><div><p class="eyebrow">WHAT 02</p><h2>一般向けアプリ</h2><p class="cat-text">お客さまが使うアプリ。求人・配信・マッチング・フリマなど、事業のたたき台に。</p></div><p class="cat-count">作れるアプリ <b>8</b> 件</p></div>
<div class="grid"><article class="card reveal" style="--delay:0ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:13s" src="shots/hirebase-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/hirebase-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span><span class="card-badge video"><i>▶</i>動画で紹介中</span></span></div>
  <div class="card-body"><p class="card-code">HIREBASE</p><h3><a class="card-link" href="hirebase/">求人・スカウト</a></h3><p class="card-sum">スカウトが届く、新しい求人体験のデモ</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://hirebase.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:70ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:10s" src="shots/casta-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/casta-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span><span class="card-badge video"><i>▶</i>動画で紹介中</span></span></div>
  <div class="card-body"><p class="card-code">CASTA</p><h3><a class="card-link" href="casta/">動画配信</a></h3><p class="card-sum">会員制の動画配信プラットフォームのデモ</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://casta.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:140ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:5s" src="shots/kanade-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/kanade-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">KANADE</p><h3><a class="card-link" href="kanade/">音楽配信</a></h3><p class="card-sum">画面を消しても止まらない、音楽配信アプリのデモ</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://kanade.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:0ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="zoom" style="--dur:4s" src="shots/sns-desktop.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/sns-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">Souzoh SNS</p><h3><a class="card-link" href="sns/">SNS</a></h3><p class="card-sum">投稿・いいね・フォローの、基本がそろったSNSアプリのデモ</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://souzoh-sns.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:70ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="zoom" style="--dur:4s" src="shots/match-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/match-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span><span class="card-badge video"><i>▶</i>動画で紹介中</span></span></div>
  <div class="card-body"><p class="card-code">Souzoh Match</p><h3><a class="card-link" href="match/">マッチング</a></h3><p class="card-sum">「できる」と「借りたい」で人をつなぐ共創マッチング</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://souzoh-match.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:140ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="zoom" style="--dur:4s" src="shots/market-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/market-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">Souzoh Market</p><h3><a class="card-link" href="market/">フリマ</a></h3><p class="card-sum">使わなくなったものに、次の人を。C2Cフリマのデモ</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://souzoh-market.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:0ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="pan" style="--dur:5s" src="shots/delivery-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/delivery-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">Souzoh Delivery</p><h3><a class="card-link" href="delivery/">デリバリー</a></h3><p class="card-sum">注文から到着まで、配達が進む様子がリアルタイムに見える</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://souzoh-delivery.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article>
<article class="card reveal" style="--delay:70ms">
  <div class="card-visual" aria-hidden="true"><div class="stage"><div class="pc lift"><i></i><div class="screen"><img class="zoom" style="--dur:4s" src="shots/reviews-full.webp" alt="" loading="lazy" decoding="async"></div></div><div class="phone lift-phone"><img src="shots/reviews-mobile.webp" alt="" loading="lazy" decoding="async"></div></div><span class="card-badges"><span class="card-badge">無料で作れる</span></span></div>
  <div class="card-body"><p class="card-code">Souzoh Reviews</p><h3><a class="card-link" href="reviews/">口コミ・レビュー</a></h3><p class="card-sum">星の数より、その中身を。評価の理由が見えるレビュー</p></div>
  <div class="card-foot"><span class="card-go" aria-hidden="true">作り方を見る<small>無料</small>→</span><a class="card-demo" href="https://souzoh-reviews.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る ↗</a></div>
</article></div></section>



<section class="next-band"><div><p class="eyebrow">FROM DEMO TO PRODUCTION</p><h2>作ったアプリを、本番で使いたい方へ</h2>
<p>ここのアプリはデモです。データの保存・セキュリティ・運用ルール・公開の準備は、ソウゾウがお手伝いします。</p></div>
<a class="btn lg" href="production/">本番で使うには →</a></section>
</main>
<section class="cta" id="consult"><div class="wrap">
<p class="eyebrow">FREE CONSULTATION</p>
<h2><span class="nb">分からないときは、</span><span class="nb">お気軽に</span><span class="nb">30分無料相談へ</span></h2>
<p class="cta-lead">途中で止まった、エラーが消えない、自社向けに作り変えたい。どんなことでも大丈夫です。</p>
<div class="cta-grid">
<div class="cta-box main"><h3>日程を決めて話す</h3><p>代表の西澤と直接お話しできます。空いている日時を選ぶだけで予約できます。</p>
<a class="btn lg" href="https://vszh6zudz50.jp.larksuite.com/scheduler/e7fecdad1a756dbe" target="_blank" rel="noopener">代表 西澤と話す日程を選ぶ</a></div>
<div class="cta-box"><h3>まずは問い合わせる</h3><p>要件定義書がほしい方・ご相談は公式LINEから。お問い合わせフォームからも受け付けています。</p>
<div class="cta-btns"><a class="btn line" href="https://lin.ee/UNwvWjp" target="_blank" rel="noopener">公式LINEで相談する</a><a class="btn ghost" href="https://service.souzoh-official.com/contact/" target="_blank" rel="noopener">お問い合わせフォーム</a></div></div>
</div></div></section>
<footer class="foot"><div class="wrap">© SOUZOH LLC.</div></footer>
<aside class="helpdock" data-helpdock aria-label="相談窓口">
<div class="hd-panel">
<button type="button" class="hd-close" data-hd-toggle aria-label="小さくする">×</button>
<p class="hd-title"><span class="nb">つまずいたら、</span><span class="nb">気軽に聞いてください</span></p>
<p class="hd-sub">LINEなら1通送るだけ。</p>
<div class="hd-btns"><a class="btn line" href="https://lin.ee/UNwvWjp" target="_blank" rel="noopener">LINEで聞く</a><a class="btn" href="https://vszh6zudz50.jp.larksuite.com/scheduler/e7fecdad1a756dbe" target="_blank" rel="noopener"><span>30分無料相談<span class="hd-long">の日程を選ぶ</span></span></a></div>
<a class="hd-form" href="https://service.souzoh-official.com/contact/" target="_blank" rel="noopener">お問い合わせフォーム</a>
</div>
<button type="button" class="hd-pill" data-hd-toggle><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>相談する</button>
</aside>
<script>(function () {
  // プロンプトのコピー
  document.addEventListener("click", function (e) {
    var btn = e.target.closest(".copy");
    if (!btn) return;
    var pre = btn.closest(".prompt").querySelector("pre");
    var text = pre.innerText.replace(/\n{3,}/g, "\n\n").trim();
    var done = function () {
      btn.textContent = "コピーしました";
      btn.classList.add("done");
      setTimeout(function () { btn.textContent = "コピー"; btn.classList.remove("done"); }, 1600);
    };
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, function () { fallback(pre); done(); });
    } else { fallback(pre); done(); }
  });
  function fallback(pre) {
    var r = document.createRange(); r.selectNodeContents(pre);
    var s = getSelection(); s.removeAllRanges(); s.addRange(r);
    try { document.execCommand("copy"); } catch (e) {}
    s.removeAllRanges();
  }

  // つくり方／要件定義書／本番で使いたい方へ のタブ。
  // 本文の見出しや #production へのリンクで来たときは、その中身があるタブを開く
  var tabs = document.querySelectorAll("[data-tab]");
  if (!tabs.length) return;
  var PANELS = { build: "tab-build", video: "tab-video", spec: "tab-spec", prod: "tab-prod" };
  function show(name) {
    tabs.forEach(function (t) { t.setAttribute("aria-selected", t.dataset.tab === name ? "true" : "false"); });
    Object.keys(PANELS).forEach(function (k) { var p = document.getElementById(PANELS[k]); if (p) p.hidden = k !== name; });
  }
  function fromHash(scroll) {
    var id = decodeURIComponent(location.hash.slice(1));
    if (id === "spec" || id === "prod" || id === "video") { show(id); if (scroll !== false && id === "video") document.querySelector(".tabs").scrollIntoView({ block: "start" }); return; }
    if (id === "build") { show("build"); document.querySelector(".tabs").scrollIntoView({ block: "start" }); return; }
    var el = id && document.getElementById(id);
    var name = "build";
    if (el && el.closest("#tab-spec")) name = "spec";
    if (el && el.closest("#tab-prod")) name = "prod";
    show(name);
    if (el && scroll !== false) {
      if (name === "prod") document.querySelector(".tabs").scrollIntoView({ block: "start" });
      else el.scrollIntoView();
    }
  }
  tabs.forEach(function (t) {
    t.addEventListener("click", function () {
      show(t.dataset.tab);
      history.replaceState(null, "", t.dataset.tab === "build" ? location.pathname : "#" + t.dataset.tab);
      document.querySelector(".tabs").scrollIntoView({ block: "start" });
    });
  });
  // ページ内の #production へのリンクは、タブを切り替える
  document.addEventListener("click", function (e) {
    var a = e.target.closest('a[href="#production"]');
    if (!a) return;
    e.preventDefault();
    history.replaceState(null, "", "#prod");
    show("prod");
    document.querySelector(".tabs").scrollIntoView({ block: "start" });
  });
  window.addEventListener("hashchange", function () { fromHash(); });
  fromHash();
})();

// カードの出方と、中の画面写真の動き（制作実績ページと同じ）
// ・画面に入ったら下からふわっと出す
// ・マウスが無い端末では、画面に入ったカードの写真を自動で動かす（マウスがあれば乗せたときに動く）
(function () {
  var cards = document.querySelectorAll(".reveal, .card-visual");
  if (!cards.length || !("IntersectionObserver" in window)) {
    cards.forEach(function (c) { c.classList.add("shown", "in-view"); });
    return;
  }
  // 最初から見えているカードは隠さない（一瞬消えるのを防ぐ）。画面の外のカードだけ待機させる
  document.querySelectorAll(".reveal").forEach(function (c) {
    if (c.getBoundingClientRect().top > innerHeight) c.classList.add("pending");
  });
  var io = new IntersectionObserver(function (es) {
    es.forEach(function (e) {
      if (e.isIntersecting && e.target.classList.contains("pending")) { e.target.classList.remove("pending"); e.target.classList.add("shown"); }
      e.target.classList.toggle("in-view", e.isIntersecting && e.intersectionRatio > 0.5);
    });
  }, { threshold: [0, 0.5, 0.8] });
  cards.forEach(function (c) { io.observe(c); });
})();

// 相談窓口：たたむ／ひらく（この端末だけ覚える）。下の大きな相談ブロックが見えている間は隠す
(function () {
  var dock = document.querySelector("[data-helpdock]");
  if (!dock) return;
  var KEY = "souzoh-specs-helpdock";
  var mini = false;
  try { mini = localStorage.getItem(KEY) === "mini"; } catch (e) {}
  dock.classList.toggle("is-mini", mini);
  document.body.classList.add("has-dock");
  dock.addEventListener("click", function (e) {
    if (!e.target.closest("[data-hd-toggle]")) return;
    mini = !mini;
    dock.classList.toggle("is-mini", mini);
    try { localStorage.setItem(KEY, mini ? "mini" : "open"); } catch (e) {}
  });
  // 相談の節（下の相談ブロック・本番の節）が見えている間は、同じ案内を二重に出さない
  var targets = ["consult", "production"].map(function (id) { return document.getElementById(id); }).filter(Boolean);
  if (targets.length && "IntersectionObserver" in window) {
    var seen = {};
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) { seen[e.target.id] = e.isIntersecting; });
      dock.classList.toggle("is-away", Object.keys(seen).some(function (k) { return seen[k]; }));
    });
    targets.forEach(function (t) { io.observe(t); });
  }
})();
</script>
</body></html>