// 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')}>相談する
))}
{/* 総合サポート（差別化：仲介・管理の先まで） */}
{D.totalSupport.items.map((it,i)=>(
{it.t} {it.d}
))}
{/* process */}
{D.process.map(p=>(
{p.n} {p.t} {p.d}
))}
} onClick={()=>onNav('contact')}>無料で相談する
); } // ── お客様の声 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','すべて'],['office','オフィス'],['retail','店舗'],['rnd','教室'],['industrial','倉庫'],['datacenter','工場']]; const list = D.projects.filter(p => cat==='all' || p.tone===cat); return (

※ 掲載内容はデモ用のサンプルです。

{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} {!isMobile && {p.client}}
{!isMobile &&
{p.result.slice(0,2).map(r=>({r}))}
} 詳しく見る
))}
); } // ── お客様の声 detail ─────────────────────────────────────── function ProjectDetail({ project, onNav }) { const D = window.SKRRS_DATA; const p = project || D.projects[0]; const { isMobile } = window.useViewport(); return (

{p.voice}

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

課題と、ご一緒した内容

{p.summary}

} onClick={()=>onNav('contact')}>同様のご相談をする } onClick={()=>onNav('projects')}>お客様の声一覧へ戻る
); } // ── Guide (はじめての方へ) ────────────────────────────────── function GuideScreen({ onNav }) { const D = window.SKRRS_DATA; const { isMobile } = window.useViewport(); const [openQ, setOpenQ] = React.useState(0); return (
{/* welcome band (安心感を伝えるビジュアル) */}
Welcome

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

「何から始めれば？」という段階でも大丈夫です。事業用不動産の専門エージェントが、あなたの状況をていねいにお伺いし、最適な拠点づくりを最後まで伴走します。

{/* こんなお悩み */}
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}
))}
{/* 借りる / 貸す 動線 */}
{[{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}
))}
{/* ビジュアルブレイク（アイコン連続区間のあとに写真を挟む） */} {/* FAQ */}
{D.faq.map((f,i)=>{ const open = openQ===i; return (
{open && (
A

{f.a}

)}
); })}
{/* CTA */}

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

「何から始めれば？」という段階でも大丈夫です。専門のエージェントが、あなたの状況に合わせてご案内します。

} 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.address], ['電話番号', c.tel], ['営業時間', c.hours], ['設立', c.established], ['事業内容', c.business.join('／')], ['免許番号', c.license], ['Web', c.url], ]; return (
{/* 代表メッセージ */}
Message

一番頼られる、不動産パートナーへ。

{ceo.body}

{ceo.role} {ceo.name}
{ceo.note}
{/* MVV（経営理念：Mission / Vision / Value を1ブロックに集約） */}
{[m.mission, m.vision].map(x=>(
{x.en}・{x.label}

{x.title}

{x.body}

))}
Value・大切にする価値観
{m.values.map(v=>(
{v.t} {v.d}
))}
{/* 想い・問題意識 */}
{a.problem.map((p,i)=>(

{p}

))}
{/* フルビュー写真バンド（タグラインを重ねて締める） */}
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}
))}
{/* ビジュアルブレイク（後半の写真途切れを解消） */} {/* addon */}
{P.addon.map(a=>(
{a.t} {a.d}
))}
); } // ── 貸したい方へ（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
); } Object.assign(window, { ServicesScreen, ProjectsScreen, ProjectDetail, GuideScreen, CompanyScreen, LeaseScreen, ManageScreen });