/* TEN GROW — Services (事業内容) — strategic, dark, data-driven. 5 blocks: Intro / Our Position / How We Drive Growth / Our Services / Why TEN GROW. */ const DS_Services = window.TENGROWDesignSystem_8927da; function TG_Services() { const { Breadcrumb, Accordion } = DS_Services; const { Container, Reveal } = window; const jpHead = { fontFamily: "var(--font-jp-heading)", fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.3 }; const enLabel = { fontFamily: "var(--font-en-ui)", fontWeight: 800, textTransform: "uppercase", letterSpacing: ".2em" }; const FLAME = "var(--flame-to)"; const cardBg = "#191512"; const cardLine = "1px solid rgba(255,255,255,0.12)"; const Flame = ({ children }) => {children}; // ---- section header (English kicker + JP heading) ---- const Head = ({ en, jp, sub, center, light }) => (
{en}
{jp &&

{jp}

} {sub &&

{sub}

}
); // ---- tiny line-art icons (stroke, orange) ---- const Ic = ({ d, size = 26, fill }) => ( {d.map((p, i) => (typeof p === "string" ? : p))} ); const icons = { megaphone: ["M3 11v2a1 1 0 001 1h2l3.5 3.5V6.5L6 10H4a1 1 0 00-1 1z", "M14 8a4 4 0 010 8", "M9.5 17.5l1 3"], spark: ["M12 3v3M12 18v3M4.2 7l2 1.7M17.8 15.3l2 1.2M3 12h3M18 12h3", ], browser: ["M3 5h18v14H3z", "M3 9h18", , ], handshake: ["M6 12l3-3 3 3 3-3 3 3", "M4 10l5 5 3-2 3 2 5-5", "M3 8h4M17 8h4"], growth: ["M4 19V5M4 19h16", "M7 15l3-3 3 2 5-6", "M18 8h3v3"], target: [, , ], funnel: ["M4 5h16l-6 7v5l-4 2v-7L4 5z"], sns: [, "M9 7h6", , "M11 17.5h2"], chain: ["M9 12a3 3 0 013-3h2a3 3 0 010 6h-1", "M15 12a3 3 0 01-3 3h-2a3 3 0 010-6h1"], partner: [, , "M4 19c0-2.8 2.2-5 5-5s5 2.2 5 5", "M14.5 19c0-2 1-3.6 2.5-4.3"], }; const ArrowRight = ({ vertical }) => ( ); // growth line-chart graphic (block 1) const GrowthGraphic = () => (
); // simple line-art building (client) & bar-growth (growth) for the position map const Building = () => ( {[14, 20, 26, 32].map((y) => [13, 18, 23].map((x) => ))} {[24, 30, 36].map((y) => [31, 35].map((x) => ))} ); const services = [ { en: "Performance Marketing", jp: "成果報酬型マーケティング支援", featured: true, icon: "target", body: "広告を運用するだけではなく、事業の利益構造から逆算して戦略を設計。成果に連動した支援体制で、継続的な売上成長を目指します。", points: ["広告戦略設計", "Web広告運用", "KPI管理", "レポーティング", "継続的な改善提案"] }, { en: "Sales Funnel Design", jp: "集客・販売導線構築", icon: "funnel", body: "集客して終わるのではなく、問い合わせ・商談・成約につながる導線を構築します。", points: ["LP制作", "Webサイト制作", "フォーム改善", "LINE導線設計", "CVR改善"] }, { en: "Brand / SNS Growth", jp: "SNS・ブランド成長支援", icon: "sns", body: "企業や経営者の価値を言語化し、認知・採用・集客につながるブランドを育てます。", points: ["SNS戦略設計", "投稿企画", "運用支援", "採用広報", "ブランド発信"] }, ]; const steps = [ { no: "01", jp: "認知獲得", sub: "広告・SNS・クリエイティブ", icon: "megaphone" }, { no: "02", jp: "興味喚起", sub: "訴求設計・コンセプト設計", icon: "spark" }, { no: "03", jp: "獲得導線構築", sub: "LP・Web・LINE導線", icon: "browser" }, { no: "04", jp: "商談・成約", sub: "CV改善・営業導線", icon: "handshake" }, { no: "05", jp: "売上・利益成長", sub: "LTV・継続改善", icon: "growth" }, ]; const reasons = [ { k: "A", jp: "成果起点", icon: "growth", body: "広告出稿や制作納品ではなく、売上・利益につながるかを起点に設計します。" }, { k: "B", jp: "一気通貫", icon: "chain", body: "戦略、集客、制作、運用、改善までを分断せず、ひとつの導線として最適化します。" }, { k: "C", jp: "伴走型支援", icon: "partner", body: "外注先ではなく、クライアントと同じ目線で事業成長に向き合います。" }, ]; const ServiceCard = ({ s, featured, light }) => { const bg = light ? "var(--warm-white)" : cardBg; const line = light ? "1px solid var(--line)" : cardLine; const titleCol = light ? "var(--ink-900)" : "#fff"; const bodyCol = light ? "var(--color-text-secondary)" : "rgba(251,246,238,0.66)"; const enCol = light ? "var(--ink-500)" : "rgba(251,246,238,0.5)"; const pointCol = light ? "var(--color-text)" : "rgba(255,255,255,0.9)"; const pointLine = light ? "1px solid var(--line)" : "1px solid rgba(255,255,255,0.08)"; const gridCol = light ? "rgba(25,22,19,0.045)" : "rgba(255,255,255,0.04)"; return (
); }; return (
{/* ========== 1. INTRO ========== */}
{/* ========== 2. OUR POSITION ========== */}
{/* CLIENT */}
Client
    {["集客課題", "売上課題", "採用課題", "ブランド課題"].map((t) =>
  • {t}
    • )}
{/* TEN GROW HUB */}
The Hub
TEN GROW
{["Ads", "SNS", "LP", "Website", "Creative", "Analytics"].map((t) => ( {t} ))}
複数の手段を統合し、成果を設計
{/* GROWTH */}
Growth
    {["問い合わせ増加", "商談創出", "売上向上", "利益最大化"].map((t) =>
  • {t}
    • )}

課題と成果の間に立ち、
戦略と実行で成長を設計する。

{/* ========== 3. HOW WE DRIVE GROWTH ========== */}
{steps.map((s, i) => (
Step {s.no}
{s.jp}

{s.sub}

 {i < steps.length - 1 && } ))}
{/* ========== 4. OUR SERVICES ========== */}
{/* ========== 5. WHY TEN GROW ========== */}
{reasons.map((r, i) => (

{r.jp}

{r.body}

 ))}
{/* ========== FAQ ========== */}
FAQ

よくあるご質問
成長のご相談はこちら
); function CTA({ children, href }) { const [h, setH] = React.useState(false); return ( setH(true)} onMouseLeave={() => setH(false)} style={{ display: "inline-flex", alignItems: "center", gap: "0.7rem", background: "var(--gradient-brand)", color: "var(--ink-900)", textDecoration: "none", fontFamily: "var(--font-jp-heading)", fontWeight: 700, fontSize: "1rem", letterSpacing: ".04em", padding: "1rem 1.9rem", borderRadius: "var(--radius-pill)", boxShadow: h ? "var(--shadow-md)" : "var(--shadow-sm)", transition: "box-shadow var(--dur) var(--ease-out)" }}> {children} ); } } window.TG_Services = TG_Services;