// Mobile shared components.
// Same tokens (R3_TOK), simpler chrome. Designed for iPhone width ~390-402.
const S_M = window.Site;
const SL_M = window.SL;
const T_M = window.R3_TOK;
const { COMPANY: CO_M, CoverImg: Img_M, Icon: Ic_M, BrandMark: Brand_M, BrandLockup: Lockup_M, PlaceholderTag: PT_M, BudouXText: BT_M, copyText: copyText_M } = S_M;
const { slHref, slServiceHref, slCaseHref, slNavHref, dialablePhone } = SL_M;
// --- B-option orange palette (design.md colors). Additive only: existing T_M keys untouched.
if (T_M.oMain == null) {
Object.assign(T_M, {
oMain: T_M.orange, // primary action orange
oDeep: T_M.orangeDeep, // gradient bottom / orange text on white
oMark: T_M.orangeMark, // logo mark
oSoft: T_M.orangeSoft, // pale orange surface
oLine: T_M.orangeLine, // thin orange border
});
}
const mobileHref = slHref;
const mobileServiceHref = slServiceHref;
const mobileCaseHref = slCaseHref;
const mobileNavHref = slNavHref;
const mobilePhoneHref = `tel:${dialablePhone(CO_M.phone)}`;
const mobilePrivacyHref = `${mobileHref('contact')}#privacy-notice`;
const mobileHours = String(CO_M.hours || '').trim();
const mobileFooterHref = (label) => ({
'雨漏り診断': mobileServiceHref('leak'),
'部分・応急補修': mobileServiceHref('spot'),
'定期メンテナンス': mobileServiceHref('maint'),
'全体改修': mobileServiceHref('full'),
'外壁・内装・水回り': mobileServiceHref('reform'),
'施工事例': mobileHref('cases'),
'お役立ち情報': mobileHref('knowledge'),
'相談の流れ': `${mobileHref('top')}#flow`,
'会社案内': mobileHref('company'),
'メールフォーム': mobileHref('contact'),
[CO_M.phone]: mobilePhoneHref,
}[label]);
// ---------- Buttons (touch-target 44px+) ----------
function MBtn({ children, icon, kind = 'primary', size = 'md', full, href, style }) {
const base = {
fontFamily: 'inherit', fontWeight: 700, letterSpacing: 0.4,
fontSize: size === 'sm' ? 13 : 14.5,
minHeight: size === 'sm' ? 40 : 48,
padding: size === 'sm' ? '0 16px' : '0 18px',
cursor: 'pointer', border: 'none', borderRadius: 8,
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
width: full ? '100%' : 'auto',
whiteSpace: 'nowrap',
...style,
};
// B-option: phone/primary = orange fill + white text, email = white + orange border + orange text.
let finalStyle = { ...base, background: '#fff', color: T_M.ink, border: `1.5px solid ${T_M.ink}` };
if (kind === 'phone') finalStyle = { ...base, background: T_M.oMain, color: '#fff' };
if (kind === 'email') finalStyle = { ...base, background: '#fff', color: T_M.oDeep, border: `1.5px solid ${T_M.oLine}` };
if (kind === 'primary') finalStyle = { ...base, background: T_M.oMain, color: '#fff' };
if (kind === 'dark') finalStyle = { ...base, background: T_M.ink, color: '#fff' };
if (href) return {icon}{children};
return ;
}
// ---------- Header ----------
const M_ORANGE = T_M.orange;
function MHeader({ active = 'home', onOpenMenu, menuButtonRef, menuOpen = false }) {
return (
);
}
// ---------- Menu drawer (collapsed by default; shows when state on) ----------
function MMenu({ open, onClose, active }) {
const closeButtonRef = React.useRef(null);
React.useEffect(() => {
if (!open) return undefined;
const previousOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
window.setTimeout(() => {
if (closeButtonRef.current) closeButtonRef.current.focus();
}, 0);
const onKeyDown = (event) => {
if (event.key === 'Escape') onClose();
};
document.addEventListener('keydown', onKeyDown);
return () => {
document.body.style.overflow = previousOverflow;
document.removeEventListener('keydown', onKeyDown);
};
}, [open, onClose]);
if (!open) return null;
const nav = [
{ id: 'home', label: 'ホーム' },
{ id: 'services', label: 'サービス' },
{ id: 'cases', label: '施工事例' },
{ id: 'flow', label: '相談の流れ' },
{ id: 'knowledge', label: 'お役立ち情報' },
{ id: 'company', label: '会社案内' },
{ id: 'contact', label: 'お問い合わせ' },
];
return (
);
}
// ---------- Sticky bottom CTA bar ----------
// 2 equal-weight primary actions (電話 / メール) — uniform shape.
function MBottomBar() {
const btn = (kind, label, icon, href) => {
const filled = kind === 'phone';
const style = filled
? { background: M_ORANGE, color: '#fff', border: `1.5px solid ${M_ORANGE}` }
: { background: '#fff', color: M_ORANGE, border: `1.5px solid ${M_ORANGE}` };
return (
{icon}{label}
);
};
return (
{btn('phone', 'お電話で相談', , mobilePhoneHref)}
{btn('email', 'メールでお問い合わせ', , mobileHref('contact'))}
);
}
// ---------- Area pill (白ピル・緑1.5px罫・緑のピンアイコン。2026-07-27に信頼色の緑へ統一) ----------
function MAreaPill({ label = CO_M.area, style }) {
// CMSでエリアが空にされたら、ピンだけの空チップを出さない
if (!String(label || '').trim()) return null;
// CMSのエリア表記が長いと（例: 広島市周辺/近郊地域もご対応可能）パンくずを押しつぶすため、
// 「/」の塊ごとに改行できるようにする。短い表記は従来どおり1行。
const lines = String(label || '').split('/')
.map((segment) => segment.trim()).filter(Boolean)
.map((segment, index, all) => (index < all.length - 1 ? `${segment} /` : segment));
// 塊が短いときだけ、折返し後の実幅に箱を合わせる（長い塊は普通に流し込んで、はみ出しを防ぐ）
const fitsLines = lines.length > 1 && lines.every((line) => line.length <= 12);
return (
{lines.length > 1
? lines.map((line, index) => (
{line}
{index < lines.length - 1 ? ' ' : null}
))
: label}
);
}
// ---------- Section heading (mobile, B-option pattern 13) ----------
// Default: white + ink serif 22px/700 + 1px bottom rule.
// band: case-proof-card 型（1px罫・radius 9・greenSoftの見出し帯。オレンジは押す場所だけに残す）。
// (num/en props kept for call-site compatibility; English eyebrows are no longer rendered per design.md.)
function MSectionHeading({ num, en, title, lead, band = false, children }) {
if (band) {
return (
{/* 見出し帯は情報表示なので中立色（オレンジは押す場所だけに残す） */}
{title}
{(lead || children) && (
{lead &&
{lead}
}
{children}
)}
{breadcrumb || <>ホーム ／ {title}}
{areaPill &&
}
{title}
{lead && {lead}
}
);
}
// ---------- Large phone CTA card (B-option pattern 10) ----------
function MPhoneCTACard({ style }) {
return (
お電話で相談
{CO_M.phone}
{/* 受付時間は補足情報なので塗りピルにせず、細罫下の静かな1行に（長いCMS表記でも上品に収まる） */}
{mobileHours &&
受付{mobileHours}
}
);
}
// ---------- Mobile breadcrumb (inline) ----------
function MBreadcrumb({ items = [] }) {
const hrefFor = (label) => ({
'ホーム': mobileHref('top'),
'サービス': mobileHref('services'),
'サービス一覧': mobileHref('services'),
'施工事例': mobileHref('cases'),
'お役立ち情報': mobileHref('knowledge'),
'住まいのお役立ちコラム': mobileHref('knowledge'),
'会社案内': mobileHref('company'),
'お問い合わせ': mobileHref('contact'),
}[label]);
return (
{items.map((item, i) => {
const label = typeof item === 'string' ? item : item.label;
const href = i === items.length - 1 ? null : (typeof item === 'string' ? hrefFor(item) : item.href);
const style = { color: i === items.length - 1 ? T_M.ink : T_M.ink70, textDecoration: 'none' };
return (
{href ? {label} : {label}}
{i < items.length - 1 && ／}
)})}
{copyText_M('cta.title', 'お問い合わせ')}
{copyText_M('cta.lead1', '屋根や外壁、住まいのことで気になることはありませんか？')}
{copyText_M('cta.lead2', '小さなことでも、お電話またはメールフォームよりお気軽にご相談ください。')}
お電話でのご相談
{/* 長い受付表記でも崩れないよう、受付時間はラベルに連結せず控えめな別行にする */}
{mobileHours &&
受付 {mobileHours}
}
{CO_M.phone}
}>メールでお問い合わせ
);
}
// ---------- Footer (mobile, compact accordion) ----------
function MFooter() {
const groups = [
{ h: 'サービス', items: ['雨漏り診断', '部分・応急補修', '定期メンテナンス', '全体改修', '外壁・内装・水回り'] },
{ h: 'コンテンツ', items: ['施工事例', 'お役立ち情報', '相談の流れ', '会社案内'] },
{ h: 'お問い合わせ', items: [CO_M.phone, mobileHours ? '受付 ' + mobileHours : null, 'メールフォーム'].filter(Boolean) },
];
return (
);
}
// ---------- Mobile page wrapper ----------
function MPage({ active, children }) {
const [menuOpen, setMenuOpen] = React.useState(false);
const menuButtonRef = React.useRef(null);
const closeMenu = React.useCallback(() => {
setMenuOpen(false);
window.setTimeout(() => {
if (menuButtonRef.current) menuButtonRef.current.focus();
}, 0);
}, []);
return (
setMenuOpen(true)} menuButtonRef={menuButtonRef} menuOpen={menuOpen} />
{/* 緑のお問い合わせ帯は2026-06-12に廃止（ページ末の電話CTAカード＋固定バーと重複するため） */}
{children}
);
}
window.MobileSite = {
T: T_M, MBtn, MHeader, MMenu, MBottomBar, MSectionHeading, MPageHero, MBreadcrumb,
MAreaPill, MPhoneCTACard,
MCTABand, MFooter, MPage, Img: Img_M, Ic: Ic_M, Brand: Brand_M, PT: PT_M,
mobileHref, mobileServiceHref, mobileCaseHref, mobileNavHref, mobilePhoneHref,
};