// Mobile — knowledge index/detail + company + contact (B-option design per design.md) const M_KN = window.MobileSite; const S_KN = window.Site; const PhilosophyK = window.MTopPhilosophy; const { T: TK, MBtn: BtnK, MPage: PageK, MPageHero: HeroK, MPhoneCTACard: PhoneCardK, MAreaPill: AreaPillK, Img: ImgK, Ic: IcK, MBreadcrumb: BCK } = M_KN; const { ARTICLES: ART_K, KNOWLEDGE: KNOW_K, COMPANY: CO_K, ASSETS: AS_K, BudouXText: BTK, copyText: copyK, knowledgeCardsFromArticles: buildKnowledgeCardsKM } = S_KN; const { mobileHref: hrefK, mobileServiceHref: serviceHrefK, mobilePhoneHref: phoneHrefK } = M_KN; const articleHrefKM = (id) => `${hrefK('knowledge-detail')}&article=${encodeURIComponent(id)}`; const currentKnowledgeCatM = () => new URLSearchParams(window.location.search).get('cat') || 'すべて'; const knowledgeCatHrefM = (cat) => cat === 'すべて' ? hrefK('knowledge') : `${hrefK('knowledge')}&cat=${encodeURIComponent(cat)}`; function currentArticleKM() { const params = new URLSearchParams(window.location.search); const articleId = params.get('article'); return ART_K.find((x) => x.id === articleId) || ART_K[0]; } function knowledgeCardsKM() { return buildKnowledgeCardsKM(ART_K, KNOW_K); } function knowledgeCategoriesKM(cards) { return ['すべて'].concat(cards .map((k) => k.cat || k.tag) .filter((cat, i, arr) => cat && arr.indexOf(cat) === i)); } // Category tag chip — ベタ塗りをやめ、greenSoft地＋緑文字のライン様式で統一 function MKTag({ children, style }) { return ( {children} ); } // Orange「読む」action row used in article cards (B-option: orange read affordance) function MReadRow({ label = '読む' }) { return ( {label} ); } function MKnowledgeEstimateLink() { return ( お見積もりの相談 気になる箇所やご希望をお聞かせください。 ); } // ===== Knowledge index ===== function MPageKnowledgeIndex() { const activeCat = currentKnowledgeCatM(); const cards = knowledgeCardsKM(); const cats = knowledgeCategoriesKM(cards); const visibleArticles = activeCat === 'すべて' ? cards : cards.filter((k) => k.cat === activeCat || k.tag === activeCat); const lead = visibleArticles[0]; const rest = visibleArticles.slice(1); return ( {/* category filter pills — white + 1px line, active = trust green */}
{cats.map((c) => { const isActive = c === activeCat; // カテゴリはCMSで自由に増えるため、一部だけアイコンが付くと不揃いに見える。 // 文字だけで統一する（2026-07-29 しゅんさん指摘）。 return ( {c} )})}
{/* featured article — white card, 1px border, orange read affordance */} {lead ? (
{/* slot: TEXT-SERVICE-KNOWLEDGE-LEAD (記事画像はARTICLES.photoを使用) */}
{lead.tag}
{lead.title}
{lead.lead}
) : (

このカテゴリの記事は現在準備中です。「すべて」から他の記事をご覧ください。

すべての記事を見る
)} {/* article list — white cards, 1px border */}
{rest.map((k) => (
{k.tag}
{k.title}
 ))}
); } // ===== Knowledge detail ===== function MPageKnowledgeDetail() { const k = currentArticleKM(); const paragraphs = k.paragraphs || []; const consultations = k.consultations || []; // B-option article heading: serif + orange bottom rule const h2Style = { fontFamily: '"Noto Sans JP", sans-serif', fontSize: 20, fontWeight: 700, color: TK.ink, marginTop: 34, lineHeight: 1.5, paddingBottom: 8, borderBottom: `2px solid ${TK.oLine}`, }; return (
{k.tag}

{k.title}

{k.lead}

{k.bodyTitle || '相談前に知っておきたいこと'}

{paragraphs.map((text, i) => (

{text}

))}
ポイント
{k.point || '気になることがあれば、無理に判断せず、お電話またはメールでご相談ください。'}

よくいただくご相談

    {consultations.map((item) =>
  • {item}
    • )}
{k.ctaTitle || '住まいの状況を、一度見てほしい方へ'}
{k.ctaBody || '気になることがあれば、お電話またはメールでお気軽にお問い合わせください。'}
}>お電話で相談 }>メール
); } // ===== Company ===== // 2010 local badge (B-option pattern 5) — TOPヒーローのバッジと同一構成。 function MCompany2010Badge({ style }) { return (
広島で 2010 年 から 地域に根ざした
施工店 {/* TOPと同じ値: 絵を円の内側に収めて金リングを切らない（絵の高さ18.8px・下端は円の下端から15px上） */}
); } function MPageCompany() { // Company overview rows — confirmed items only (社名・住所・電話・設立・受付・対応エリア). const { name: licenseNameK, number: licenseNumberK, certifications: certificationsK } = S_KN.licenseContent(); const certificationRowsK = certificationsK .map((certification) => `${certification.name}（${certification.number}）`) .join('、'); const companyAddress = CO_K.address || '広島県広島市西区南観音1-11-17'; const companyEstablished = CO_K.established || '2010年5月'; const rows = [ { icon: IcK.home, k: '会社名', v: CO_K.name }, { icon: IcK.pin, k: '住所', v: companyAddress }, { icon: IcK.phone, k: '電話', v: CO_K.phone, phone: true }, { icon: IcK.check, k: '設立', v: companyEstablished }, CO_K.hours ? { icon: IcK.clock, k: '受付', v: CO_K.hours } : null, { icon: IcK.pin, k: '対応エリア', v: CO_K.area }, licenseNameK && licenseNumberK ? { icon: IcK.shield, k: '建設業許可', v: ( <> {licenseNameK} {/* 「（般－5）第40934号」が割れないよう、許可先と番号でまとまりを保つ */} {String(licenseNumberK).split(/(?=（)/).map((part, index) => ( {part} ))} ), } : null, certificationRowsK ? { icon: IcK.shield, k: '保有資格', // 雨漏り診断士など v: certificationRowsK, } : null, ].filter(Boolean); return ( ホーム ／ 会社案内} lead="住まいの修理を、ひとつの窓口で承ります。" /> {/* hero roof photo + 2010 badge re-display */}
{/* slot: COMPANY-HERO-IMAGE（青空の屋根写真）。 以前はTOPと同じ白グラデを重ねていたが、この写真には文字を乗せないため 可読性の役目がなく、写真が白く霞むだけだった（2026-07-30 しゅんさん指摘で撤去） */}
{/* photo gallery — 現場写真3点（モックではヒーロー直下） */}
{/* slot: COMPANY-03 / COMPANY-04 / COMPANY-05（現場写真3点） */}
{/* 会社概要 — 情報の器なので帯は中立（greenSoft地＋緑文字）。オレンジは押す場所だけに残す */}
会社概要
{rows.map((r, i) => (
{r.k === '住所' ? (
住所
{String(r.v).split(/(\d+丁目\d+-\d+)/).filter(Boolean).map((part, partIndex) => ( {/\d+丁目\d+-\d+/.test(part) ? {part} : part} ))}
) : (
{r.k}
{r.phone ? ( {r.v} ) : (
{r.v}
)} )}
))}
{/* trust cards — green line-icon expressions */}
{/* 対応エリアは会社概要の表とヘッダーのピルに出ているため、ここでは繰り返さない（Opusレビュー N6） */}
住まいの修理を、
ひとつの窓口で
屋根・外壁・雨漏りなど、住まいの困りごとをまとめてご相談いただけます。
); } // ===== Contact ===== // Form input — white, 1px line border, orange border on focus (B-option contact pattern). function MFormInput({ as = 'input', ...props }) { const [focus, setFocus] = React.useState(false); const style = { width: '100%', boxSizing: 'border-box', padding: '12px 14px', border: focus ? `1.5px solid ${TK.oLine}` : `1px solid ${TK.line}`, borderRadius: 8, outline: 'none', fontSize: 14, fontFamily: 'inherit', color: TK.ink, background: '#fff', ...(as === 'textarea' ? { resize: 'vertical' } : null), }; const handlers = { onFocus: () => setFocus(true), onBlur: () => setFocus(false) }; return as === 'textarea' ?