// variation-a.jsx — Editorial Soft (magazine-style, photo-driven)
// Polished version: scroll reveals, marquee stats, fixed SNS side rail

const VariationA = ({ noAnim = false, showSideRail = true } = {}) => {
  const bp = useBreakpoint();
  const isDesktop = bp === 'desktop';
  // shared responsive tokens
  const padX = pick(bp, 80, 48, 24);
  const secPad = pick(bp, '140px 80px', '100px 48px', '72px 24px');     // standard section padding
  const ctaPad = pick(bp, '120px 80px', '96px 48px', '64px 24px');
  const gap2 = pick(bp, 80, 48, 36);                                     // 2-col gap
  const oneCol = !isDesktop;                                            // collapse 2-col → 1-col below desktop
  return (
    <div className={'lp-root' + (noAnim ? ' no-anim' : '')} style={{ background: 'var(--warm-white)', width: '100%', position: 'relative' }}>
      <NavBar variant="light" items={['MISSION', 'ABOUT', 'PROFILE', 'CONSULTATION', 'VOICE', 'CONTACT']} />
      {showSideRail && <SideRail />}

      {/* HERO — full bleed photo + asymmetric editorial type */}
      <section style={{
        position: 'relative',
        height: pick(bp, 880, 720, 600),
        overflow: 'hidden',
        width: '100vw',
        marginLeft: 'calc(-1 * (100vw - 100%) / 2)',
      }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <HeroSlideshow
            interval={6000}
            images={[
              { src: 'assets/hero-3.jpg', alt: '恐竜ハートモニュメント', pos: 'center 50%' },
              { src: 'assets/hero-2.jpg', alt: '恐竜壁画・夜景', pos: 'center 50%' },
              { src: 'assets/hero-1.jpg', alt: '福井市街のビル群', pos: 'center 45%' },
            ]}
          />
        </div>
        {/* readability wash — lighten the lower-left where the title sits */}
        {/* テキスト前オーバーレイ: 左→右＋上→下 */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.08) 30%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.92) 100%)' }}></div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.45) 28%, rgba(0,0,0,0.10) 58%, rgba(0,0,0,0) 80%)' }}></div>

        {/* editorial title overlay — always visible (not gated on scroll reveal) */}
        <div className="hero-copy-block" style={{
          position: 'absolute',
          left: padX,
          bottom: pick(bp, 96, 72, 48),
          maxWidth: pick(bp, 800, 640, '88vw'),
          zIndex: 4,
          padding: pick(bp, '32px 40px 32px 0', '24px 30px 24px 0', '20px 22px 20px 0'),
        }}>
          <div className="eyebrow hero-fade-1" style={{ marginBottom: pick(bp, 20, 16, 12), color: 'rgba(255,255,255,0.80)' }}>—— A LETTER FROM SARABASE</div>
          <h1 className="hero-fade-2" style={{
            fontFamily: 'var(--serif-jp)',
            fontSize: pick(bp, 56, 44, 32),
            lineHeight: 1.6,
            fontWeight: 700,
            margin: 0,
            color: '#fff',
            letterSpacing: '0.03em',
            textShadow: '0 4px 60px rgba(0,0,0,1), 0 2px 24px rgba(0,0,0,0.95), 0 0 120px rgba(0,0,0,0.80), 0 0 200px rgba(0,0,0,0.55)',
            WebkitFontSmoothing: 'antialiased',
          }}>
            手放す不安に、寄り添える<br />
            不動産屋でありたい。
          </h1>
        </div>

        {/* side meta — desktop only */}
        {isDesktop && (
        <Reveal delay={800} style={{
          position: 'absolute',
          right: 100,
          top: 200,
          bottom: 200,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--mono)',
            fontSize: 10,
            letterSpacing: '0.3em',
            writingMode: 'vertical-rl',
            color: 'var(--ink-mid)',
          }}>
            ISSUE.01 — GENTLE REAL ESTATE / 2026
          </div>
          <div style={{ width: 1, height: 80, background: 'var(--ink-mid)' }}></div>
        </Reveal>
        )}

        {/* scroll cue — desktop only */}
        {isDesktop && (
        <Reveal delay={1200} style={{
          position: 'absolute',
          left: 80,
          bottom: 32,
          fontFamily: 'var(--mono)',
          fontSize: 10,
          letterSpacing: '0.2em',
          color: 'var(--ink-mid)',
          display: 'flex',
          alignItems: 'center',
          gap: 10,
        }}>
          <span>SCROLL</span>
          <span style={{ display: 'inline-block', width: 40, height: 1, background: 'var(--ink-mid)' }}></span>
          <span>↓</span>
        </Reveal>
        )}
      </section>

      {/* MISSION — split editorial */}
      <section id="mission" style={{ padding: secPad, background: 'var(--warm-white)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: oneCol ? '1fr' : '1fr 1.2fr', gap: gap2, alignItems: 'start' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 18 }}>— 01 / MISSION</div>
            <div style={{
              fontFamily: 'var(--display)',
              fontSize: pick(bp, 110, 88, 64),
              lineHeight: 0.95,
              letterSpacing: '0.01em',
            }}>Mission</div>
            <div style={{ height: 1, background: 'var(--ink)', width: 60, marginTop: pick(bp, 40, 28, 22) }}></div>
          </Reveal>
          <Reveal delay={200}>
            <p style={{
              fontFamily: 'var(--serif-jp)',
              fontSize: pick(bp, 32, 28, 23),
              lineHeight: 2,
              fontWeight: 500,
              margin: 0,
              letterSpacing: '0.05em',
            }}>
              手放す想いと、<br />
              はじまる未来をつなぐ。
            </p>
            <p style={{
              fontFamily: 'var(--sans-jp)',
              fontSize: 14.5,
              lineHeight: 2.2,
              marginTop: 32,
              color: 'var(--ink-soft)',
              maxWidth: 560,
            }}>
              「手放す想いと、はじまる未来をつなぐ。」<br />
              この言葉を胸に、不動産売買のサポートを行っています。
            </p>
            <p style={{
              fontFamily: 'var(--sans-jp)',
              fontSize: 14.5,
              lineHeight: 2.2,
              marginTop: 20,
              color: 'var(--ink-mid)',
              maxWidth: 560,
            }}>
              不動産を“売る”という決断には、不安や迷い、そしてその人だけの物語があります。私たちは、その想いに丁寧に寄り添いながら、次のステージへ安心して進めるようサポートすることを大切にしています。
            </p>
            <p style={{
              fontFamily: 'var(--sans-jp)',
              fontSize: 14.5,
              lineHeight: 2.2,
              marginTop: 20,
              color: 'var(--ink-mid)',
              maxWidth: 560,
            }}>
              話しやすさ・丁寧な説明・押しつけない姿勢・暮らし目線のアドバイスを強みに、怖くない・相談しやすい不動産屋であることを心がけています。
            </p>
          </Reveal>
        </div>
      </section>

      {/* PULL QUOTE + IMAGE BAND */}
      <section id="about" style={{ position: 'relative', padding: pick(bp, '0 80px 140px', '0 48px 100px', '0 24px 72px') }}>
        <div style={{ display: 'grid', gridTemplateColumns: oneCol ? '1fr' : '1.6fr 1fr', gap: pick(bp, 48, 40, 32) }}>
          <Reveal>
            <Photo
              src="assets/about-water.jpg"
              alt="水をたたえた明るい室内"
              objectPosition="center 60%"
              style={{ height: pick(bp, 540, 460, 320) }}
            />
          </Reveal>
          <Reveal delay={250} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: oneCol ? 24 : 0, paddingTop: 24 }}>
            <div>
              <div className="chip" style={{ fontSize: 18, padding: '10px 22px' }}>SARABASEの思い</div>
              <p style={{ fontFamily: 'var(--serif-jp)', fontSize: 21, lineHeight: 1.9, marginTop: 24, fontWeight: 600 }}>
                SARABASE（サラベース）
              </p>
              <p style={{ fontFamily: 'var(--serif-jp)', fontSize: 18, lineHeight: 2, marginTop: 10, fontWeight: 500, color: 'var(--ink-soft)' }}>
                “まっさら（サラ）な土台（ベース）<br />
                から未来をつくる”
              </p>
            </div>
            <div>
              <p style={{ fontFamily: 'var(--sans-jp)', fontSize: 13.5, lineHeight: 2.1, color: 'var(--ink-mid)' }}>
                SARABASEという名前には、そんな想いを込めました。<br />
                不動産を手放すことは、ただ終わらせることではなく、新しい暮らしのはじまり。これまでの想いを大切に受け取りながら、その先の未来へとつながる一歩を。丁寧にお手伝いします。
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* CONSULTATION — soft photo overlay (title + list), Vision text below */}
      <section id="consultation" style={{ position: 'relative', padding: secPad, overflow: 'hidden' }}>
        {/* background photo */}
        <img
          src="assets/vision-bg.jpg"
          alt=""
          aria-hidden="true"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }}
        />
        {/* soft white scrim so the text stays readable */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(244,249,250,0.86) 0%, rgba(244,249,250,0.80) 50%, rgba(244,249,250,0.88) 100%)' }}></div>
        <div style={{ position: 'relative', maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— 02 / FREE CONSULTATION</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: pick(bp, 40, 34, 26), lineHeight: 1.3, fontWeight: 700, marginBottom: 8 }}>「無料相談・無料査定」</div>
            <div style={{ height: 1, background: 'var(--ink)', width: 60, margin: '36px auto' }}></div>
          </Reveal>
          <Reveal delay={200}>
            <h3 style={{ fontFamily: 'var(--serif-jp)', fontWeight: 600, fontSize: pick(bp, 22, 20, 18), margin: '0 0 32px' }}>
              こんなご相談を承ります
            </h3>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 14, textAlign: 'center', justifyItems: 'center', fontFamily: 'var(--sans-jp)', fontSize: pick(bp, 15.5, 15, 14.5), lineHeight: 1.8, color: 'var(--ink-soft)' }}>
              {[
                '空き家の売却',
                '相続した土地・建物の売却',
                '離婚に伴う売却・住み替え',
                '不動産の無料査定',
                '売却するかどうか迷っている方のご相談',
              ].map((item, i) => (
                <li key={i}>{item}</li>
              ))}
            </ul>
          </Reveal>
        </div>
      </section>

      {/* VISION — moved below the photo */}
      <section style={{ padding: pick(bp, '120px 80px 64px', '90px 48px 48px', '64px 24px 36px') }}>
        <div style={{ maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— VISION / ビジョン</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: pick(bp, 72, 56, 44), lineHeight: 1, marginBottom: 8 }}>Vision</div>
            <div style={{ height: 1, background: 'var(--ink)', width: 60, margin: '36px auto' }}></div>
          </Reveal>
          <Reveal delay={200}>
            <p style={{
              fontFamily: 'var(--serif-jp)',
              fontSize: pick(bp, 26, 22, 18),
              lineHeight: 2.1,
              fontWeight: 500,
              margin: 0,
              letterSpacing: '0.04em',
              color: 'var(--ink-soft)',
            }}>
              不動産の売買は、手放す人の想いと、<br />
              新しい暮らしを迎える人の未来をつなぐ仕事。<br />
              丁寧に、親しみやすく、安心して相談できる<br />
              <span style={{ color: 'var(--ink)' }}>“やさしい不動産サービス”</span>を届けます。
            </p>
          </Reveal>
        </div>
      </section>

      {/* GALLERY — flowing property sketches (Instagram-ish), the signature moving view */}
      <section style={{ background: 'var(--pink-100)', padding: 0, position: 'relative', overflow: 'hidden' }}>
        {/* Top marquee — flows LEFT (temporarily disabled, no property photos yet) */}
        {/*
        <div style={{ paddingTop: 48 }}>
          <MarqueeStrip direction="left" items={6} height={360} width={270}
            labels={['1LDK', '2LDK', '3LDK', '4LDK', 'メゾネット', '平屋']}
          />
        </div>
        */}

        {/* Gallery heading */}
        <div style={{ padding: pick(bp, '96px 80px 96px', '80px 48px 80px', '64px 24px 64px'), position: 'relative' }}>
          <Reveal style={{ textAlign: 'center' }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>— INSTAGRAM</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: pick(bp, 64, 52, 42), lineHeight: 1, margin: 0 }}>Gallery</div>
            <div style={{
              display: 'inline-block', marginTop: 22, fontFamily: 'var(--mono)', fontSize: 12,
              letterSpacing: '0.24em', color: 'var(--ink-mid)', border: '1px solid var(--ink-mid)', padding: '8px 20px', borderRadius: 999,
            }}>COMING SOON</div>
          </Reveal>
        </div>

        {/* Bottom marquee — flows RIGHT (temporarily disabled, no property photos yet) */}
        {/*
        <div style={{ paddingBottom: 48 }}>
          <MarqueeStrip direction="right" items={6} height={360} width={270}
            labels={['3LDK', '2SLDK', '4LDK', '戸建て', '5LDK', '1LDK']}
          />
        </div>
        */}
      </section>

      {/* STRENGTHS — editorial 2-col with large numerals */}
      <section style={{ padding: secPad }}>
        <Reveal>
          <SectionHead eyebrow="— 03 / OUR STRENGTHS" titleEn="Strengths" titleJp="押しつけない、寄り添う4つの姿勢" mb={pick(bp, 72, 56, 44)} />
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: oneCol ? '1fr' : 'repeat(2, 1fr)', gap: pick(bp, '72px 64px', '48px 48px', '40px 0') }}>
          {STRENGTHS.map((s, i) => (
            <Reveal key={i} delay={(i % 2) * 150} style={{ display: 'grid', gridTemplateColumns: pick(bp, '110px 1fr', '90px 1fr', '64px 1fr'), gap: pick(bp, 24, 20, 16), alignItems: 'start' }}>
              <div style={{
                fontFamily: 'var(--display)',
                fontSize: pick(bp, 80, 64, 48),
                lineHeight: 1,
                color: 'var(--pink-300)',
              }}>{s.num}</div>
              <div>
                <h3 style={{
                  fontFamily: 'var(--serif-jp)',
                  fontSize: 22,
                  fontWeight: 600,
                  margin: '0 0 14px',
                  letterSpacing: '0.04em',
                }}>{s.title}</h3>
                <p style={{ fontFamily: 'var(--sans-jp)', fontSize: 13.5, lineHeight: 2, color: 'var(--ink-mid)', margin: 0 }}>
                  {s.body}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* PROFILE — editorial portrait */}
      <section id="profile" style={{ padding: pick(bp, '0 80px 140px', '0 48px 100px', '0 24px 72px') }}>
        <div style={{ display: 'grid', gridTemplateColumns: oneCol ? '1fr' : '1fr 1.1fr', gap: gap2, alignItems: 'center' }}>
          <Reveal>
            <Photo
              src="assets/profile-miho.jpg"
              alt="川崎美穂さん"
              objectPosition={pick(bp, 'center 25%', 'center 30%', 'center 22%')}
              style={{ height: pick(bp, 640, 520, 480) }}
            />
          </Reveal>
          <Reveal delay={250}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>— 04 / PROFILE</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: pick(bp, 80, 60, 44), lineHeight: 1 }}>Miho Kawasaki</div>
            <div style={{ fontFamily: 'var(--serif-jp)', fontSize: 18, marginTop: 18, color: 'var(--ink-mid)' }}>
              宅地建物取引士 / 川崎 美穂
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', marginTop: 8, color: 'var(--ink-mid)' }}>
              宅地建物取引業免許番号 福井県知事 (1) 第1815号
            </div>
            <div style={{ height: 1, background: 'var(--ink)', width: 60, margin: '36px 0' }}></div>
            <p style={{ fontFamily: 'var(--sans-jp)', fontSize: 14, lineHeight: 2.2, color: 'var(--ink-soft)' }}>
              不動産の売却や住まいの相談は、人生の大きな選択です。<br />
              だからこそ、不安を感じず安心して話せる存在でありたい。
            </p>
            <p style={{ fontFamily: 'var(--sans-jp)', fontSize: 14, lineHeight: 2.2, color: 'var(--ink-soft)', marginTop: 16 }}>
              女性宅建士として、丁寧に、親しみやすく、あなたのペースに寄り添いながらサポートします。
              売却のことはもちろん、暮らしのこと、住まいの悩み、ちょっとした相談でも大歓迎です。
            </p>
            <p style={{ fontFamily: 'var(--serif-jp)', fontSize: 16, marginTop: 24, fontStyle: 'italic' }}>
              "どうぞ、気軽にお声がけください。"
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 32, alignItems: 'center' }}>
              <SnsRow />
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--ink-mid)' }}>
                @sarabase.estate
              </span>
            </div>
          </Reveal>
        </div>
      </section>

      {/* VOICE — testimonials editorial */}
      <section id="voice" style={{ background: 'var(--cream)', padding: secPad }}>
        <Reveal>
          <SectionHead eyebrow="— 05 / CUSTOMER VOICE" titleEn="Voice" titleJp="お客様の声" mb={pick(bp, 64, 48, 40)} />
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: oneCol ? '1fr' : 'repeat(3, 1fr)', gap: pick(bp, 40, 32, 24) }}>
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={i} delay={i * 150}>
              <article style={{
                background: 'var(--warm-white)',
                padding: '40px 32px 36px',
                borderTop: '2px solid var(--ink)',
                position: 'relative',
              }}>
                <div style={{
                  fontFamily: 'var(--display)',
                  fontSize: 64,
                  lineHeight: 0.6,
                  color: 'var(--pink-300)',
                  position: 'absolute',
                  top: 24,
                  right: 28,
                }}>"</div>
                <p style={{
                  fontFamily: 'var(--serif-jp)',
                  fontSize: 14.5,
                  lineHeight: 2,
                  margin: 0,
                  paddingRight: 24,
                }}>{t.quote}</p>
                <div style={{ marginTop: 28, paddingTop: 18, borderTop: '1px solid var(--line-strong)' }}>
                  <div style={{ fontFamily: 'var(--serif-jp)', fontSize: 14, fontWeight: 600 }}>{t.name}</div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--ink-mid)', marginTop: 4 }}>
                    {t.age} · {t.type}
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </section>

      {/* MAP + ACCESS */}
      <section style={{ padding: secPad }}>
        <Reveal>
          <SectionHead eyebrow="— 06 / ACCESS" titleEn="Access" titleJp="アクセス" mb={48} titleSize={68} />
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: oneCol ? '1fr' : '1.3fr 1fr', gap: pick(bp, 48, 40, 32), alignItems: 'stretch' }}>
          <Reveal>
            <MiniMap height={pick(bp, 420, 360, 280)} />
          </Reveal>
          <Reveal delay={200} style={{ padding: '20px 4px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr', rowGap: 22, fontFamily: 'var(--sans-jp)', fontSize: 13.5 }}>
              <div style={{ color: 'var(--ink-mid)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em' }}>ADDRESS</div>
              <div>〒918-8104<br />福井県福井市板垣3丁目422<br /><span style={{ color: 'var(--ink-mid)', fontSize: 12.5 }}>（株）N-LEX不動産事業部</span></div>
              <div style={{ color: 'var(--ink-mid)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em' }}>STATION</div>
              <div>JR福井駅から車で5分</div>
              <div style={{ color: 'var(--ink-mid)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em' }}>HOURS</div>
              <div>10:00 – 18:00<br /><span style={{ color: 'var(--ink-mid)' }}>年中無休（臨時休業あり）</span></div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* CTA — Contact (mail + tel only) */}
      <section id="contact" style={{ background: 'var(--pink-200)', padding: ctaPad }}>
        <div style={{ display: 'grid', gridTemplateColumns: oneCol ? '1fr' : '1fr 1fr', gap: gap2, alignItems: 'center' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 18 }}>— 07 / CONTACT</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: pick(bp, 96, 72, 52), lineHeight: 1 }}>Talk to us.</div>
            <p style={{ fontFamily: 'var(--serif-jp)', fontSize: 17, lineHeight: 2, marginTop: 32, maxWidth: 380 }}>
              ちょっとした相談から、<br />
              査定のご依頼まで。<br />
              どうぞ気軽にお声がけください。
            </p>
          </Reveal>
          <Reveal delay={200} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <a href="tel:0776433334" style={{
              background: 'var(--warm-white)', padding: pick(bp, '32px 36px', '28px 32px', '24px 24px'), display: 'block',
              textDecoration: 'none', color: 'var(--ink)',
            }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>お電話でのご相談 / TEL</div>
              <div style={{ fontFamily: 'var(--serif-en)', fontSize: pick(bp, 40, 36, 30), lineHeight: 1 }}>0776-43-3334</div>
              <div style={{ fontFamily: 'var(--sans-jp)', fontSize: 12, color: 'var(--ink-mid)', marginTop: 12 }}>受付：年中無休（臨時休業あり）10:00 – 18:00</div>
            </a>
            <a href="mailto:info@sarabase-estate.jp" style={{
              background: 'var(--warm-white)', padding: pick(bp, '32px 36px', '28px 32px', '24px 24px'), display: 'block',
              textDecoration: 'none', color: 'var(--ink)',
            }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>メールでのご相談 / EMAIL</div>
              <div style={{ fontFamily: 'var(--serif-en)', fontSize: pick(bp, 28, 26, 22), lineHeight: 1.2, wordBreak: 'break-all' }}>info@sarabase-estate.jp</div>
              <div style={{ fontFamily: 'var(--sans-jp)', fontSize: 12, color: 'var(--ink-mid)', marginTop: 12 }}>24時間受付・2営業日以内にご返信します。</div>
            </a>
          </Reveal>
        </div>
      </section>

      <Footer variant="dark" />
    </div>
  );
};

window.VariationA = VariationA;