CONTACT

無料相談・無料お見積り

「金額だけ知りたい」でも大丈夫。
お電話・LINE・フォームのご希望の方法で、お気軽に。

{/* 3つの導線 */}

【お急ぎの方はこちら】

電話で相談する「今から来れますか？」など緊急のご相談 › LINEで写真を送って相談写真を送るだけでも大丈夫です › フォームから相談する電話やLINEが難しい方はこちら ›

お電話でのご相談

{TEL}

年中無休・24時間受付

最短30分〜1時間対応立会不要・写真報告対応

{/* FormSubmit 設定 */}

お名前必須 {errors.name &&

{errors.name}

}

お電話番号必須 {errors.phone &&

{errors.phone}

}

メールアドレス任意 {errors.email &&

{errors.email}

}

ご住所（ご訪問のエリア）任意 {errors.address &&

{errors.address}

}

間取り任意

ご相談内容任意

</div>

<div style={{ background: "var(--surface-3)", borderRadius: "var(--r-md)", padding: "14px 16px", marginBottom: 16 }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink-soft)", marginBottom: 8, letterSpacing: "0.04em" }}>こんなご相談、お寄せいただいています：</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {["「今から来れますか？」", "通帳や権利書を探してほしい", "まずは金額だけ知りたい", "空き家の片付け", "形見を親族宅へ届けて"].map((t, i) =>
            <span key={i} style={{ fontSize: 11.5, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 999, padding: "5px 11px", color: "var(--ink-soft)" }}>{t}</span>
            )}
          </div>
        </div>

<button type="submit" className="btn btn-accent btn-lg btn-block">この内容で送信する</button>
        <p style={{ fontSize: 11.5, color: "var(--ink-mute)", lineHeight: 1.7, marginTop: 14, textAlign: "center" }}>
          ※ ご入力いただいた個人情報は、お問い合わせ対応以外には使用いたしません。<br />
          ※ メールアドレスをご入力の方には、受付完了の自動返信メールをお送りします。
        </p>
      </form>
    </section>);

}

function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--bg)", padding: "36px 36px 32px", textAlign: "center" }}>
      <div className="mincho" style={{ fontSize: 18, letterSpacing: "0.08em", marginBottom: 18, fontWeight: 600 }}>中村トランスポート株式会社</div>
      <div style={{ fontSize: 12, opacity: 0.8, lineHeight: 1.9, marginBottom: 20 }}>
        対応サービス：遺品整理・生前整理・特殊清掃<br />空き家整理・残置物撤去・形見配送・引越し
      </div>
      <div style={{ fontSize: 12, opacity: 0.8, lineHeight: 1.9, marginBottom: 20 }}>
        対応エリア：長崎市・大村市・諫早市・時津町<br />佐世保・長与町・雲仙市・東彼杵郡・離島
      </div>
      <div style={{ fontSize: 10, opacity: 0.45 }}>© 中村トランスポート株式会社</div>
    </footer>);

}

// 左サイドパネル
function SideLeft() {
  return (
    <aside className="side-left">
      <div className="brand-block">
        <div className="brand-logo" style={{ flexDirection: "column", alignItems: "center", gap: 12, width: "100%" }}>
          <img src={window.__resources && window.__resources.logoNts || "assets/logo-nts.webp"} alt="中村トランスポート株式会社" style={{ height: 32, width: "auto", display: "block", margin: "0 auto" }} />
          <div className="brand-text">
            <div className="sub" style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.04em", marginBottom: 1 }}>中村トランスポート株式会社</div>
            <div className="name">遺品整理の窓口</div>
          </div>
        </div>
        <div className="brand-tagline">
          大切な方の「想い」に、<br />やさしく寄り添う整理を。
        </div>
      </div>

<div className="side-card">
        <div className="label">お電話でのご相談</div>
        <a href={TEL_HREF} className="side-tel num">{TEL}</a>
        <div className="side-tel-note">年中無休・24時間受付</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 12 }}>
          <span className="contact-badge" style={{ textAlign: "center" }}>最短30分〜1時間対応</span>
          <span className="contact-badge" style={{ textAlign: "center" }}>立会不要・写真報告対応</span>
        </div>
      </div>

<div className="side-actions">
        <a href="#contact" className="btn btn-accent btn-lg btn-block">無料お見積りを予約</a>
        <a href={LINE_HREF} className="btn btn-line btn-md btn-block">LINEで写真を送って相談</a>
      </div>

<div className="side-trust">
        <div className="chip"><span className="n">12<span style={{ fontSize: 11 }}>年</span></span><span className="t">の実績</span></div>
        <div className="chip"><span className="n">0<span style={{ fontSize: 11 }}>円</span></span><span className="t">出張見積</span></div>
        <div className="chip"><span className="n">24<span style={{ fontSize: 11 }}>h</span></span><span className="t">受付</span></div>
      </div>
    </aside>);

}

// 右サイドメニュー（スクロールスパイ）
function SideRight({ active }) {
  return (
    <nav className="side-right">
      <div className="nav-title">CONTENTS</div>
      <ul className="nav-list">
        {SECTIONS.map((sec) =>
        <li key={sec.id} className={"nav-item" + (active === sec.id ? " active" : "")}>
            <a href={"#" + sec.id}>
              <span className="nav-num num">{sec.no}</span>
              <span>{sec.nav}</span>
            </a>
          </li>
        )}
      </ul>
    </nav>);

}

// モバイル下部固定CTA
function MobileCTA() {
  return (
    <div className="mobile-cta">
      <a href={LINE_HREF} className="m-call m-line">
        <span className="l">写真で相談</span>
        <span className="n">LINE</span>
      </a>
      <a href={TEL_HREF} className="m-call">
        <span className="l">24時間受付</span>
        <span className="n">電話する</span>
      </a>
      <a href="#contact" className="btn btn-accent" style={{ padding: "14px 6px", fontSize: 14 }}>無料見積り</a>
    </div>);

}

// モバイルヘッダー
function MobileHeader() {
  return (
    <header className="m-header">
      <div className="brand-logo">
        <img src={window.__resources && window.__resources.logoNts || "assets/logo-nts.webp"} alt="中村トランスポート株式会社" style={{ height: 24, width: "auto", display: "block" }} />
        <div className="brand-text">
          <div className="name" style={{ fontSize: 14 }}>遺品整理の窓口</div>
        </div>
      </div>
      <a href={TEL_HREF} className="m-tel">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1 1 0 0 0-1.02.24l-2.2 2.2a15.1 15.1 0 0 1-6.59-6.59l2.2-2.2a1 1 0 0 0 .25-1.02A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1 17 17 0 0 0 17 17 1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z" /></svg>
        電話
      </a>
    </header>);

}

function App() {
  const [active, setActive] = React.useState("hero");

React.useEffect(() => {
    const ids = SECTIONS.map((s) => s.id);
    const onScroll = () => {
      const mid = window.innerHeight * 0.35;
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= mid) current = id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {window.removeEventListener("scroll", onScroll);window.removeEventListener("resize", onScroll);};
  }, []);

return (
    <div className="page">
      <SideLeft />
      <main className="center">
        <MobileHeader />
        <Hero />
        <Results />
        <Worries />
        <Capability />
        <Reasons />
        <Services />
        <Plan />
        <Pricing />
        <Flow />
        <Works />
        <Voices />
        <FAQ />
        <ContactForm />
        <Footer />
      </main>
      <SideRight active={active} />
      <MobileCTA />
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);