// Mobile — TOP page // Pixel target: assets/.../A3-orange-main-logo-orange-v3.png (B option, mobile, ~426 logical width) const M_TOP = window.MobileSite; const S_TM = window.Site; const { T: TM, MSectionHeading: SH_TM, MPage: Page_TM, Img: Img_TM, Ic: Ic_TM } = M_TOP; const { COMPANY: COTM, ASSETS: AS_TM, SERVICES: SV_TM, FLOW_STEPS: FL_TM, ARTICLES: ART_TM, CASES: CASES_TM, BudouXText: BT_TM, FLOW_NO_BREAK: FLOW_NO_BREAK_TM, copyText: copyTM, rawCopyValue: rawCopyTM } = S_TM; const { mobileHref: hrefTM, mobileServiceHref: serviceHrefTM } = M_TOP; const articleHrefTM = (articleId) => `${hrefTM('knowledge-detail')}&article=${encodeURIComponent(articleId)}`; // --- Mockup-matched orange palette (brighter / more saturated than brand tokens) --- const O = { main: TM.orange, // primary action orange (fills, big number, headline accents) deep: TM.orangeDeep, // deep orange (gradient bottoms, text on white) soft: TM.orangeSoft, line: TM.orangeLine, // thin orange borders }; // CMSの会社名に二重空白が入っているため、見出し内だけ空白を除いて正式表記に戻す（CMS値は変えない） const CO_NAME_TM = String(COTM.name || '').replace(/[\s　]+/g, '').trim(); const AREA_TEXT = String(COTM.area || '').trim() || '広島市周辺'; // CMSのエリア表記は「広島市周辺/近郊地域もご対応可能」のようにスラッシュ区切りで長くなることがある const AREA_SEGMENTS = AREA_TEXT.split('/').map((segment) => segment.trim()).filter(Boolean); const AREA_SEGMENT_LINES = AREA_SEGMENTS.map((segment, index) => (index < AREA_SEGMENTS.length - 1 ? `${segment} /` : segment)); function MTopHeroSlides() { const seen = new Set(); return [AS_TM.heroMain, AS_TM.heroFlip, AS_TM.heroWide2].filter((src) => { if (typeof src !== 'string' || src === '' || seen.has(src)) return false; seen.add(src); return true; }); } function MTopHeroRotator({ onError }) { const slides = MTopHeroSlides(); const [active, setActive] = React.useState(0); const reduceMotion = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; React.useEffect(() => { setActive(0); if (slides.length < 2 || reduceMotion) return undefined; const timer = window.setInterval(() => { if (document.hidden) return; setActive((current) => (current + 1) % slides.length); }, 6000); return () => window.clearInterval(timer); }, [slides.join('\n'), reduceMotion]); if (slides.length < 2) { return ( ); } if (reduceMotion) { return ( ); } return (
{slides.map((src, index) => ( ))}
); } function MTopHero() { const hero = S_TM.topHeroLines(); const [heroFailed, setHeroFailed] = React.useState(false); React.useEffect(() => { setHeroFailed(false); }, [AS_TM.heroMain]); return (
{/* 写真: 全面背景。白の斜めグラデ（スクリム）で左上の文字領域を確保する */}
{heroFailed ? (
); } // Green Lucide line icon per service (all green — orange is reserved for actions) // 対応サービス — 6サービスの2列リッチカードグリッド（モック01のTOP版レイアウト） function MTopServices() { return (
対応サービス
{/* 画像なしのチップ形式（正典準拠）。6項目を2列で */}
{SV_TM.map((s, i) => { const iconKey = S_TM.serviceIconKey(s); const SvIc = Ic_TM[iconKey] || Ic_TM.home; const fullWidth = SV_TM.length % 2 === 1 && i === SV_TM.length - 1; return ( {/* slot: TEXT-SERVICE-TOP-NAME-{s.id} */} {s.name} ); })}
); } // 許可・資格 — 認可プレート（白カード＋金罫）。信頼系なので緑×黒のみ（オレンジは使わない）。 // 許可が増えたらプレートを縦に足せる構造にしてある。 function MTopLicense() { const { heading, name, number, certifications } = S_TM.licenseContent(); if (!name || !number) return null; return (
{/* 見出しが空にされたら罫線ごと出さない */} {heading && (
{heading}
)}
{certifications.map((certification, index) => ( ))}
); } // ご相談内容から選べます — 工事名ではなく、訪問者の目的から行き先を選ぶ入口。 function MTopPurposes() { const items = S_TM.topPurposeItems(); return (
ご相談内容から選べます
{items.map((it, index) => { const PurposeIcon = Ic_TM[it.icon] || Ic_TM.home; const fullWidth = items.length % 2 === 1 && index === items.length - 1; return ( {it.label} ); })}
); } function MTopCases() { const pairs = CASES_TM .filter((c) => c && c.before && c.after && c.before !== c.after) .slice(0, 2) .map((c) => ({ before: c.before, after: c.after, afterLabel: '施工後' })); const Tag = ({ children, bg }) => (
{children}
); const Arrow = () => ( ); const Pair = ({ p }) => (
施工前
{p.afterLabel}
); if (!pairs.length) return null; return (
{/* 見出し帯は情報表示なので中立色（オレンジは押す場所だけに残す） */}
施工事例でわかる！実際の施工をご紹介
{pairs.map((p, i) => )}
施工事例を見る
); } // ご相談から完工までの流れ — メニュー「相談の流れ」(top#flow) の飛び先。service-detail と同じ縦リスト function MTopFlow() { return (
ご相談から完工までの流れ
{FL_TM.map((x, i) => (
{x.n || i + 1}
{x.title}
{x.body}
))}
); } function MTopKnowledge() { const top3 = S_TM.knowledgeCardsFromArticles(ART_TM, S_TM.KNOWLEDGE).slice(0, 3); if (!top3.length) return null; return (
KNOWLEDGE

住まいのお役立ちコラム

一覧へ
{top3.map((article) => ( {article.tag || article.cat || 'その他'} {article.title} ))}
); } function MTopPhoneCTA() { const PhoneCard = M_TOP.MPhoneCTACard; return (
); } // 大切な想い — トップの締め。写真はCMS assets.philosophyPhotoで設定。 // 空のときはグリーン背景（2026-08-08 クライアント依頼で写真なし状態を正式対応） function MTopPhilosophy() { const title = copyTM('services.philosophy.title', 'スマートライフの大切な想い'); const body = String(copyTM('services.philosophy.body', '私たちは工事をする会社ではなく、お客様の暮らしに寄り添うパートナーでありたいと考えています。\n一つひとつのご縁を大切にし、「相談して良かった」「任せて良かった」そう思っていただける仕事を積み重ね、地域に必要とされる会社を目指します。')); const photo = AS_TM.philosophyPhoto; if (!String(title).trim() && !body.trim()) return null; // 「」で囲まれた言葉は白のまま太字（写真上なのでオレンジは沈むため、太字＋わずかな字間で強調する） const renderPara = (para, pi) => (

{para.split(/(「[^」]*」)/).map((chunk, ci) => ( chunk.startsWith('「') && chunk.endsWith('」') ? {chunk} : {chunk} ))}

); return (
{/* サイト全体が白カード＋細罫の文法なので、想いも同じ「カード」に収める。 フルブリードの暗い帯にすると流れの中で浮くため（2026-07-30 調整） */}
{photo && } {/* A案の構図は保ち、黒い重さだけを抜いた深緑の薄いベールにする。 写真を明るく見せつつ、白文字の可読性は中央〜下部で確保する */} {photo &&
); } function MPageTop() { return ( ); } window.MPageTop = MPageTop; window.MTopPhilosophy = MTopPhilosophy;