// 02 About — Manifesto長文。中央寄せ・余韻多め。
function About() {
  return (
    <section className="s tint" id="about">
      <div className="inner" style={{ paddingTop: 120, paddingBottom: 120 }}>
        <div className="sect-mark reveal" style={{ marginBottom: 80 }}>
          <span>02 / About</span><span className="bar" /><span>Manifesto</span>
        </div>

        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <div className="hd serif reveal" style={{ fontSize: 'clamp(24px, 2.8vw, 40px)', fontWeight: 700, lineHeight: 1.7, letterSpacing: '0.04em' }}>
            わたしたちは、<br />
            人と人のあいだを、<br />デザインしています。
          </div>

          <div className="reveal delay-2" style={{ marginTop: 64, fontSize: 17, lineHeight: 2.2, color: 'var(--ink)', letterSpacing: '0.04em' }}>
            <p style={{ margin: 0 }}>
              CONEN（コネン）は、人と人のあいだに立ち上がる関係性を主題に活動するチームです。
            </p>
            <p style={{ marginTop: 28 }}>
              隣人と隣人のあいだ。<br />
              まちと暮らし手のあいだ。<br />
              ブランドと使い手のあいだ。<br />
              組織と現場のあいだ。
            </p>
            <p style={{ marginTop: 28 }}>
              わたしたちはそのどれもを「あいだのデザイン」として地続きに捉えています。
              専門知と日常を、組織と現場を、平時と非常時を、
              デザインの言葉でつなぎ直していくのがわたしたちの仕事です。
            </p>
          </div>

          <div className="reveal delay-3" style={{ marginTop: 80, display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-end', paddingTop: 32, borderTop: '0.5px solid var(--rule-soft)' }}>
            <a href="#dc" className="cta ghost hot">活動について</a>
          </div>
        </div>
      </div>
    </section>);

}
window.About = About;