// Skrrs portal — Services, Projects (list+detail), Guide, Company. const { Button: IBtn, Badge: IBadge, Card: ICard, SectionHeader: IHd, Tag: ITag } = window.SkrrsDesignSystem_6013e8; // ── Services ──────────────────────────────────────────────── function ServicesScreen({ onNav }) { const D = window.SKRRS_DATA; const { isMobile } = window.useViewport(); return (
{D.servicesDetail.map((s,i)=>(
{s.en}

{s.title}

{s.desc}

    {s.items.map(it=>(
  • {it}
    • ))}
} onClick={()=>onNav(i===0?'lease':'manage')}>{i===0?'借りたい方へ・詳しく見る':'貸したい方へ・詳しく見る'} } onClick={()=>onNav('contact')}>相談する
))}
{/* 総合サポート（差別化：仲介・管理の先まで） */}
{/* process */}
{D.process.map(p=>(
{p.n} {p.t} {p.d}
))}
} onClick={()=>onNav('contact')}>無料で相談する } onClick={()=>onNav('manage')}>貸したい方の流れを見る
); } // ── お客様の声 list（多業種・projectsルート） ─────────────── function ProjectsScreen({ onNav, onOpenProject }) { const D = window.SKRRS_DATA; const { isMobile, isTablet } = window.useViewport(); const cols = isMobile?2:isTablet?2:3; const [cat, setCat] = React.useState('all'); // 絞り込みは業種で行う。読み手は「自分と同じ業種の事例」を探すため。 // 選択肢は掲載データから自動生成するので、事例を追加すればタブも増える。 const cats = [['all','すべて']].concat( D.projects.reduce((acc,p)=>(acc.indexOf(p.cat)<0 && p.cat ? acc.concat([p.cat]) : acc), []).map(c=>[c,c]) ); const list = D.projects.filter(p => cat==='all' || p.cat===cat); const published = (D.release||{}).voices; const TYPE_LABEL = { office:'オフィス', retail:'店舗', rnd:'教室', industrial:'倉庫', datacenter:'工場' }; return (
{!published ? ( ) : (
{cats.map(([k,l])=>(setCat(k)}>{l}))}
{list.map(p=>( onOpenProject(p)} style={{ cursor:'pointer', display:'flex', flexDirection:'column', background:'var(--surface)', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-lg)', overflow:'hidden', boxShadow:'var(--shadow-sm)' }}>
{p.voice}
{p.cat} {TYPE_LABEL[p.tone] && ( {TYPE_LABEL[p.tone]} )} {!isMobile && {p.client}}
{!isMobile &&
{p.result.slice(0,2).map(r=>({r}))}
} 詳しく見る
))}
{/* 事例を読んだ直後がいちばん相談しやすい。一覧の末尾で受ける。 */}

同じような状況の方は、お気軽にご相談ください。

業種や規模が違っても、進め方の考え方は共通しています。ご相談は無料です。

} onClick={()=>onNav('contact')}>無料で相談する
)}
); } // ── お客様の声 detail ─────────────────────────────────────── function ProjectDetail({ project, onNav, onConsult, onOpenProject }) { const D = window.SKRRS_DATA; const p = project || D.projects[0]; const { isMobile } = window.useViewport(); // 関連事例：同じ業種を優先し、足りなければ同じ物件種別で補う（最大3件）。 const others = D.projects.filter(v => v.id !== p.id); const related = others.filter(v => v.cat === p.cat) .concat(others.filter(v => v.cat !== p.cat && v.tone === p.tone)) .slice(0, 3); return (

{p.voice}

{p.cat} {p.client}・{p.area}
ご支援のポイント {p.result.map(r=>( {r} ))}

課題と、ご一緒した内容

{p.summary}

{/* 事例の物件種別を引き継いで、お問い合わせの「ご相談の種別」を事前選択する */} } onClick={()=> onConsult ? onConsult(p.tone) : onNav('contact')}>同様のご相談をする } onClick={()=>onNav('projects')}>お客様の声一覧へ戻る
{/* 関連事例（読み終えた人を一覧に戻さず、次の事例へ送る） */} {related.length > 0 && (

ほかの事例も見る

{related.map(v=>( onOpenProject ? onOpenProject(v) : onNav('projects')} style={{ cursor:'pointer', display:'flex', flexDirection:'column', gap:10, height:'100%', background:'var(--surface)', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', padding:'var(--sp-5)' }}> {v.voice}
{v.cat} {v.client}
))}
)}
); } // ── Guide (はじめての方へ) ────────────────────────────────── function GuideScreen({ onNav }) { const D = window.SKRRS_DATA; const { isMobile } = window.useViewport(); const [openQ, setOpenQ] = React.useState(0); return (
{/* welcome band (安心感を伝えるビジュアル) */}
Welcome

はじめてでも、安心してご相談ください。

「何から始めればいいか分からない」という段階でも大丈夫です。事業用不動産の専門エージェントが、ご状況をていねいにうかがい、拠点づくりを最後までご一緒します。一度きりのお取引で終わらせず、次の拠点、その次の挑戦までご相談いただける——そんなかかりつけの不動産会社を目指しています。

{/* 借りる / 貸す 動線（ページ上部で早めに振り分ける） */}

ご相談の内容に近いほうから、詳しいご案内へお進みいただけます。

{[{en:'For Tenants',label:'借りたい方へ',sub:'物件を探している企業様',icon:'handshake',route:'lease'}, {en:'For Owners',label:'貸したい方へ',sub:'物件を貸したいオーナー様',icon:'shield',route:'manage'}].map(b=>( onNav(b.route)} style={{ cursor:'pointer', display:'flex', alignItems:'center', gap:16, background:'linear-gradient(150deg, var(--blue-900), var(--blue-800))', borderRadius:'var(--r-lg)', padding:'var(--sp-7)', color:'#fff' }}>
{b.en} {b.label} {b.sub}
))}
{/* こんなお悩み */}
Worries

こんなお悩み、ありませんか？

借りたい方も、貸したい方も。事業用不動産にまつわるお困りごとを、Skrrsが引き受けます。

{D.guideWorries.map(w=>(
{w.t} {w.d}
))}
{/* ご利用の流れ */}
{D.guideSteps.map(s=> isMobile ? ( /* スマホ：NO/件名（上段）・イラスト/詳細（下段）のコンパクト2×2 */
{s.n} {s.t} {s.d}
) : (
{s.n}
{s.t} {s.d}
))}
{/* 安心ポイント */}
{D.guidePoints.map(p=>(
{p.t} {p.d}
))}
{/* ビジュアルブレイク（アイコン連続区間のあとに写真を挟む） */} {/* FAQ（faqPage の featured 項目だけを抜粋。全文は faq ページ） */}
{window.SKRRS_FAQ_FEATURED().map((f,i)=>{ const open = openQ===i; return (
{open && (
A

{f.a}

)}
); })}
} onClick={()=>onNav('faq')}>よくあるご質問をすべて見る
{/* CTA */}

まずは、お気軽にご相談ください

はじめてのご相談も、2拠点目のご相談も、同じようにお受けします。ご相談は無料ですので、まずはいまの状況をお聞かせください。

} onClick={()=>onNav('contact')}>無料で相談する 03-5937-7544
); } // ── Company (会社概要) ────────────────────────────────────── function CompanyScreen({ onNav }) { const c = window.SKRRS_DATA.company; const m = window.SKRRS_DATA.mvv; const a = window.SKRRS_DATA.about; const ceo = window.SKRRS_DATA.ceoMessage; const { isMobile, isTablet } = window.useViewport(); const rows = [ ['会社名', c.name], ['代表者', c.representative], ['事業責任者', c.executive], ['所在地', c.address], ['電話番号', c.tel], ['営業時間', c.hours], ['設立', c.established], ['事業内容', c.business.join('／')], ['免許番号', c.license], ['Web', c.url], ].filter(([, v]) => v && String(v).indexOf('◯') < 0); // 未確定（空 or ◯プレースホルダ）の項目は行ごと出さない return (
{/* 代表メッセージ */}
Message

{ceo.title || '信頼される、かかりつけの不動産会社に。'}

{ceo.body}

{ceo.role} {ceo.name}
{ceo.note && {ceo.note}}
{/* 経営理念（2026-08-03 Reijiさん指示で Mission・Vision カードを削除。Value のみ掲出） */}
Value・私たちの約束
{m.values.map(v=>(
{v.k && {v.k}} {v.t} {v.d}
))}
{/* 想い・問題意識 */}
{a.problem.map((p,i)=>(

{p}

))}
{/* 目指す姿（Storyの締め。Why→Whereの2段構成） */} {a.aimLead && (
Our Direction・{a.aimTitle}

{a.aimLead}

{a.aimBody}

)}
{/* フルビュー写真バンド（タグラインを重ねて締める） */}
Our Field

不動産の側面から
日本のビジネスを加速させる。

{/* 会社情報テーブル */} {rows.map(r=>( ))}
{r[0]} {r[1]}
} onClick={()=>onNav('contact')}>お問い合わせ } onClick={()=>onNav('home')}>ホームへ戻る
); } // ── 借りたい方へ（lease） ─────────────────────────────────── function LeaseScreen({ onNav }) { const D = window.SKRRS_DATA; const P = D.leasePage; const { isMobile } = window.useViewport(); const voices = D.projects.filter(v=>['office','retail','rnd'].includes(v.tone)).slice(0,3); return (
{/* intro */}

{P.intro.title}

{P.intro.body}

 {/* points */}
{P.points.map((p,i)=>(
{p.t} {p.d}
))}
{/* process（借りたい：D.process 6STEP） */}
{D.process.map(s=>(
{s.n} {s.t} {s.d}
))}
{/* ビジュアルブレイク（後半の写真途切れを解消） */} 専任の担当が、
ご契約まで伴走します。} sub="ご相談は無料です。「まだ具体的には決まっていない」段階でも、相場感や必要な広さの目安をお伝えします。担当がひとりで最後まで受け持ち、ご希望に合う物件がなければ、無理にお勧めすることはありません。" position="center 35%" cta="不動産の相談をする" onNav={onNav} /> {/* addon（2件・カードはクリックで詳細へ） */}
); } // ── 貸したい方へ（manage） ────────────────────────────────── function ManageScreen({ onNav }) { const D = window.SKRRS_DATA; const P = D.managePage; const { isMobile } = window.useViewport(); const voices = D.projects.filter(v=>['industrial','datacenter'].includes(v.tone)).slice(0,3); return (

{P.intro.title}

{P.intro.body}

 {/* features 6 */}
{P.features.map((f,i)=>(
{f.t} {f.d}
))}
{/* leasing points */}
Key Points

テナント誘致で押さえるべきポイント

{P.leasingPoints.map((p,i)=>(
{`0${i+1}`} {p.t} {p.d}
))}
{/* steps 6 */}
{P.steps.map(s=>(
{s.n} {s.t} {s.d}
))}
{/* ビジュアルブレイク（後半の写真途切れを解消） */}
); } // ── 共有CTA（声＋相談＋もう一方への導線） ─────────────────── function LeaseManageCTA({ onNav, voices, other }) { const { isMobile } = window.useViewport(); return ( {voices && voices.length>0 && (
{(() => { const cards = voices.map(v=>( onNav('projects')} style={{ cursor:'pointer', display:'flex', flexDirection:'column', gap:12, height:'100%', background:'var(--surface)', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', padding: isMobile?'var(--sp-5)':'var(--sp-6)', boxShadow:'var(--shadow-sm)' }}> {v.voice}
{v.cat}
)); return isMobile ?
{cards}
:
{cards}
; })()}
)}

まずはお気軽にご相談ください

ご相談は無料です。物件のことも、契約のお悩みも、専門のエージェントが親身にお応えします。

} onClick={()=>onNav('contact')}>無料で相談する onNav(other.route)} style={{ cursor:'pointer', display:'inline-flex', alignItems:'center', gap:7, padding:'12px 18px', borderRadius:'var(--r-pill)', border:'1px solid rgba(255,255,255,0.4)', font:'var(--fw-bold) var(--t-sm)/1 var(--font-body)', color:'#fff' }}> {other.label}
03-5937-7544
); } // ── 法務ページ（3文書の共通レンダラ） ──────────────────────── // 本文は data.js の privacy.body / terms.body / cookies.body（ArticleBody 記法）。 // 文言の修正は data.js 側だけで完結する。3ページは必ず相互リンクさせる // （同意の対象が片方だけ読める状態にしない）。文書を増やすときは LEGAL_DOCS に足す。 // ── 福利厚生サービス（従業員向け住宅仲介・社宅手配） ────────── // 借りたい方へページの addon カードから遷移。構成は「企業側メリット → 従業員側メリット → 利用方法」。 function WelfareScreen({ onNav, onConsult }) { const W = window.SKRRS_DATA.welfarePage; const { isMobile } = window.useViewport(); const goContact = () => (onConsult ? onConsult() : onNav('contact')); return (
{/* ── 課題提起（共感の入り口） ── */} {W.challenge && (
{W.challenge}
)} {/* ── 企業側：費用負担なし ＋ メリット ── */}
For Companies

{W.corp.title}

{W.corp.body}

{W.corp.meritTitle}
{W.corp.merits.map(m=>( {m} ))}
{/* ── 従業員側：仲介手数料半額 ── */}
For Employees

{W.staff.title}

{W.staff.body}

{W.staff.note}
{W.staff.consultTitle}
{W.staff.consults.map(c=>( {c} ))}
{/* 利用シーン（チップ） */} {(W.scenes||[]).length>0 && (
{W.scenesTitle}
{W.scenes.map(sc=>( {sc} ))}
)}
{/* ── なぜ無料か（ビジネスモデルの開示＝信頼の核） ── */} {W.why0 && (
{W.why0.title}

{W.why0.body}

 )} {/* ── 利用の流れ（4ステップ） ── */}
{W.flow.map(f=>(
{f.n}
{f.t} {f.d}
))}
{W.onboarding.title} {W.onboarding.body}
{/* ── Skrrsの強み（本業=事業用不動産への橋） ── */} {W.strength && (
{W.strength.title} {W.strength.body} onNav('services')} style={{ cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6, marginTop:2, font:'var(--fw-bold) var(--t-sm)/1 var(--font-body)', color:'var(--blue-600)' }}> 事業用不動産のサービスを見る
)} {/* ── CTA ── */}

{W.cta.title}

{W.cta.sub}

} onClick={goContact}>{W.cta.primary} {W.cta.secondary}
お電話でも承ります　03-5937-7544（平日 10:00〜18:00）
); } // ── 契約条件の交渉・半額保証 詳細（negotiation ルート） ────────── function NegotiationScreen({ onNav }) { const N = window.SKRRS_DATA.negotiationPage; const { isMobile } = window.useViewport(); return (
{N.areas.map(a=>(
{a.t} {a.d}
))}
{/* 半額保証（この画面の核） */}

{N.guarantee.title}

{N.guarantee.body}
{N.stance.title} {N.stance.body}

{N.cta.title}

{N.cta.sub}

} onClick={()=>onNav('contact')}>{N.cta.label} 03-5937-7544
); } // ── 内装設計・工事 詳細（interior ルート） ───────────────────── function InteriorScreen({ onNav, onConsult }) { const I = window.SKRRS_DATA.interiorPage; const { isMobile } = window.useViewport(); const goContact = () => (onConsult ? onConsult() : onNav('contact')); return (
{/* 課題提起：分けて進めた場合のリスク */}
{I.problems.map(p=>(
{p.t} {p.d}
))}
{/* できること */}
{I.scopeTitle}
{I.scopes.map(sc=>( {sc} ))}
{/* 進め方 */}
{I.flow.map(f=>(
{f.n}
{f.t} {f.d}
))}

{I.cta.title}

{I.cta.sub}

} onClick={goContact}>{I.cta.label} 03-5937-7544
); } // ── よくあるご質問 ───────────────────────────────────────── // 出典は data.js の faqPage 1か所。はじめての方へページは featured のみを抜粋する。 window.SKRRS_FAQ_FEATURED = () => (window.SKRRS_DATA.faqPage.groups || []).flatMap(g => g.items.filter(i => i.featured)); function FaqScreen({ onNav }) { const F = window.SKRRS_DATA.faqPage; const { isMobile } = window.useViewport(); const [cat, setCat] = React.useState('all'); const [open, setOpen] = React.useState({}); const groups = cat === 'all' ? F.groups : F.groups.filter(g => g.key === cat); const total = F.groups.reduce((n, g) => n + g.items.length, 0); const toggle = (k) => setOpen(s => ({ ...s, [k]: !s[k] })); return (
{/* カテゴリ絞り込み：借りたい／貸したい で入口が分かれる導線 */}
{[{ key:'all', label:`すべて（${total}件）`, icon:'grid' }].concat(F.groups.map(g=>({ key:g.key, label:g.label, icon:g.icon }))).map(t=>{ const on = cat === t.key; return ( ); })}
{groups.map(g=>(

{g.label}

{g.items.map((f,i)=>{ const k = g.key + i, isOpen = !!open[k]; return (
{isOpen && (
A

{f.a}

)}
); })}
))}
{/* 解決しなかった人の受け皿。FAQの離脱地点にCTAを置く */}

お探しの答えが見つかりませんでしたか

個別の事情によって答えが変わるご質問も多くあります。ご相談は無料です。いまの状況をお聞かせいただければ、担当がお答えします。

} onClick={()=>onNav('contact')}>無料で相談する 03-5937-7544
平日 10:00〜18:00
); } const LEGAL_DOCS = [ { route:'privacy', label:'プライバシーポリシー' }, { route:'terms', label:'利用規約' }, { route:'cookies', label:'Cookieポリシー' }, ]; function LegalDoc({ doc, icon, image, self, extra, onNav }) { const { isMobile } = window.useViewport(); const others = LEGAL_DOCS.filter(d => d.route !== self); return (
{doc.established} {extra}
} onClick={()=>onNav('contact')}>お問い合わせ {others.map(d => ( } onClick={()=>onNav(d.route)}>{d.label} ))}
); } // 分析・広告Cookieの稼働状況を、設定値そのものから表示する。 // 手書きで「現在は使用していません」と書くと、計測を有効化した瞬間に虚偽表示になる。必ず自動判定にすること。 function CookieStatus() { // 計測タグは /api/content の取得後に起動するため、描画直後は未定義のことがある。 // 一拍おいて再判定し、「使用していません」と誤表示したまま固定されるのを防ぐ。 const [, recheck] = React.useState(0); React.useEffect(() => { const id = setTimeout(() => recheck(n => n + 1), 1500); return () => clearTimeout(id); }, []); const cfg = window.SKRRS_ANALYTICS || {}; const on = []; if (cfg.ga4 || window.gtag) on.push('Googleアナリティクス'); if (cfg.metaPixel || window.fbq) on.push('Metaピクセル'); const active = on.length > 0; return (
現在の状況：{active ? `分析・広告のCookieを使用しています（${on.join('・')}）` : '分析・広告のCookieは使用していません'} {active ? '「4. Cookieを無効にする方法」から、いつでも停止していただけます。' : '当サイトが設定しているのは、お問い合わせフォームの不正送信対策に必要なもののみです。計測を開始する際は、本ページに反映します。'}
); } function PrivacyScreen({ onNav }) { return ; } function TermsScreen({ onNav }) { return ; } function CookiesScreen({ onNav }) { return } onNav={onNav} />; } Object.assign(window, { ServicesScreen, ProjectsScreen, ProjectDetail, GuideScreen, CompanyScreen, LeaseScreen, ManageScreen, PrivacyScreen, TermsScreen, CookiesScreen, FaqScreen, WelfareScreen, NegotiationScreen, InteriorScreen });