// SECTION — HAIR SKINCARE (inserted after Story)
function HairSkincare(){
  return (
    <section className="section bg-ivory" id="hair-skincare">
      <div className="container">
        <Reveal><div className="kicker">HAIR SKINCARE</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">トリートメントをしても、<br/>またパサついてしまう方へ。</h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lede" style={{marginTop:36}}>
            髪がまとまりにくい。<br/>
            毛先がパサつく。<br/>
            トリートメントをしても、すぐ元に戻ってしまう。
          </p>
        </Reveal>
        <Reveal delay={3}>
          <p className="lede" style={{marginTop:24}}>
            その原因は、髪の<span className="em" style={{color:'var(--accent)'}}>「栄養不足」</span>ではなく、<br/>
            <span style={{color:'var(--ink)'}}>水分状態が乱れ、乾燥している</span>からかもしれません。
          </p>
        </Reveal>

        <div className="skin-divider"/>

        <Reveal delay={1}>
          <h3 className="skin-subhead">髪に必要なのは、<br/>その場だけの水分ではありません。</h3>
        </Reveal>
        <Reveal delay={2}>
          <p className="lede" style={{marginTop:28}}>
            髪を濡らしたときの水分は、<br/>
            乾かすと、その多くが失われてしまいます。
          </p>
        </Reveal>
        <Reveal delay={3}>
          <p className="lede" style={{marginTop:24}}>
            大切なのは、髪の内部に留まる<br/>
            <span className="skin-keyword">「結合水」</span>と呼ばれる水分です。
          </p>
        </Reveal>
        <Reveal delay={4}>
          <p className="lede" style={{marginTop:24}}>
            ルミエールでは超高濃度水素ケアによって、<br/>
            髪の水分状態を整え、<br/>
            乾燥しにくい髪の土台をつくります。
          </p>
        </Reveal>
        <Reveal delay={5}>
          <p className="lede" style={{marginTop:24}}>
            これは従来のトリートメントとは役割が異なる、<br/>
            髪のための新しい<span className="skin-keyword">「スキンケア」</span>という考え方です。
          </p>
        </Reveal>

        <div className="skin-divider"/>

        <Reveal delay={1}>
          <h3 className="skin-subhead">水素ケアは、土台を整える。<br/>トリートメントは、美しく仕上げる。</h3>
        </Reveal>
        <Reveal delay={2}>
          <p className="lede" style={{marginTop:28}}>
            お肌も、乾燥した状態に<br/>
            いきなりファンデーションを重ねるのではなく、<br/>
            先に化粧水や保湿で土台を整えます。
          </p>
        </Reveal>
        <Reveal delay={3}>
          <p className="lede" style={{marginTop:20,fontFamily:"'Noto Serif JP',serif",fontSize:18,color:'var(--ink)',letterSpacing:'.08em'}}>
            髪も同じです。
          </p>
        </Reveal>
        <Reveal delay={4}>
          <p className="lede" style={{marginTop:20}}>
            水素ケアで髪の水分状態を整えてから、<br/>
            トリートメントで表面と質感を美しく仕上げる。
          </p>
        </Reveal>
        <Reveal delay={5}>
          <p className="lede" style={{marginTop:24}}>
            どちらか一方ではなく、<br/>
            役割の異なる二つのケアを組み合わせることで、<br/>
            <span style={{color:'var(--ink)'}}>その日だけではない、<br/>まとまりやすく美しい髪</span>を目指します。
          </p>
        </Reveal>

        <div className="skin-compare">
          <Reveal className="skin-compare__card" delay={1}>
            <div className="skin-compare__label">STEP 01</div>
            <div className="skin-compare__title">水素ケア</div>
            <div className="skin-compare__tag">土台を整える</div>
            <dl className="skin-compare__dl">
              <dt>役割</dt><dd>髪の水分状態を整える</dd>
              <dt>工程</dt><dd>美しさの土台をつくる</dd>
              <dt>お肌に例えると</dt><dd>化粧水・保湿</dd>
            </dl>
          </Reveal>
          <div className="skin-compare__plus" aria-hidden="true">+</div>
          <Reveal className="skin-compare__card" delay={2}>
            <div className="skin-compare__label">STEP 02</div>
            <div className="skin-compare__title">トリートメント</div>
            <div className="skin-compare__tag">美しく仕上げる</div>
            <dl className="skin-compare__dl">
              <dt>役割</dt><dd>表面と質感を美しく整える</dd>
              <dt>工程</dt><dd>美しく見せる仕上げ</dd>
              <dt>お肌に例えると</dt><dd>ファンデーション</dd>
            </dl>
          </Reveal>
        </div>

        <Reveal delay={1}>
          <div className="skin-close">
            <p className="skin-close__quote">髪にも、スキンケアという選択を。</p>
            <p className="lede" style={{marginTop:24}}>
              栄養を重ねて、きれいに見せるだけではなく、<br/>
              まず乾燥しにくい髪の土台から整えていく。
            </p>
            <p className="lede" style={{marginTop:20,fontFamily:"'Noto Serif JP',serif",color:'var(--ink)',fontSize:16,letterSpacing:'.08em'}}>
              それが、ルミエールの<br/>
              「頭皮と髪のスキンケア」です。
            </p>
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div className="skin-cta">
            <a className="btn-primary gold" href="#salon"
               onClick={() => track('hotpepper_click', { location: 'hair_skincare' })}>
              <span>髪のスキンケアを体験する</span><span className="arrow">→</span>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.HairSkincare = HairSkincare;