<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Jump Buttons</title>

  <style>
    :root{
      --main:#0aa39a;   /* 文字・縦線の色を統一 */
      --font: system-ui, -apple-system, "Segoe UI", Roboto,
              "Hiragino Kaku Gothic ProN", "Noto Sans JP", Arial, sans-serif;
    }

    .jumpbar{
      display:flex;
      max-width:1100px;
      margin:24px auto;
      border-left:2px solid var(--main);
      border-right:2px solid var(--main);
      background:#fff;
    }

    .jumpbtn{
      flex:1;
      padding:22px 10px 16px;
      text-align:center;
      color:var(--main);
      font-family:var(--font);
      font-weight:700;
      font-size:26px;
      text-decoration:none;

      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      min-height:110px;

      /* アニメーション準備 */
      transition:
        transform .25s ease,
        box-shadow .25s ease;
    }

    /* 縦棒（文字と同色） */
    .jumpbtn + .jumpbtn{
      border-left:2px solid var(--main);
    }

    /* 下向き矢印 */
    .chev{
      margin-top:14px;
      width:14px;
      height:14px;
      border-right:3px solid var(--main);
      border-bottom:3px solid var(--main);
      transform:rotate(45deg);
    }

    /* ホバー演出：少し前に出る */
    .jumpbtn:hover{
      transform: translateY(-6px);
      box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

    /* フォーカス対応（キーボード操作） */
    .jumpbtn:focus-visible{
      outline:none;
      transform: translateY(-6px);
      box-shadow: 0 0 0 3px rgba(10,163,154,.25),
                  0 8px 20px rgba(0,0,0,.08);
    }

    @media (max-width:720px){
      .jumpbtn{
        font-size:18px;
        min-height:90px;
      }
    }
  </style>
</head>

<body>

  <nav class="jumpbar" aria-label="セクションナビゲーション">
    <a href="#common_section_wrapper_5" class="jumpbtn kao-nav__btn">
      自己剥離技術<br>とは
      <span class="chev"></span>
    </a>

    <a href="#common_section_wrapper_8" class="jumpbtn kao-nav__btn">
      従来の課題
      <span class="chev"></span>
    </a>

    <a href="#common_section_wrapper_11" class="jumpbtn kao-nav__btn">
      ソリューション
      <span class="chev"></span>
    </a>

    <a href="#common_section_wrapper_17" class="jumpbtn kao-nav__btn">
      メカニズム
      <span class="chev"></span>
    </a>

    <a href="#common_section_wrapper_20" class="jumpbtn kao-nav__btn">
      想定用途
      <span class="chev"></span>
    </a>
  </nav>

  <!-- アンカークリック時：navOpen解除→ターゲットを画面上端に合わせる -->
  <script>
  (function(){
    document.addEventListener('click', function(e){
      const a = e.target.closest('a.kao-nav__btn');
      if (!a) return;

      const hash = a.getAttribute('href');
      if (!hash || hash.charAt(0) !== '#') return;

      const target = document.querySelector(hash);
      if (!target) return;

      e.preventDefault();

      // navOpen中（スクロール固定中）なら解除してから移動
      if (document.documentElement.classList.contains('navOpen')) {
        document.documentElement.classList.remove('navOpen');
        document.body.style.top = '';
      }

      // 上揃えで移動
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });

      // URL反映
      history.pushState(null, '', hash);
    });
  })();
  </script>

</body>
</html>
