<header class="header bg-gray-600 fixed w-full top-0 left-0 z-50 min-w-[320px]" :class="{ 'scroll-start' : isScroll }" x-data="{ isOpen: false, isScroll: false }" @scroll.window="isScroll = (window.pageYOffset > 200) ? true : false">
  <div class="inner h-full flex items-center text-white relative">

    <!-- スマホメニュー表示枠  --------------------->
    <section :class="{'!visible !opacity-100': isOpen}" class="transition-all duration-300 invisible opacity-0 md:hidden absolute h-[100dvh] w-full text-white top-0 right-0 bg-gray-800 overflow-auto">
      <div class="inner">
        <nav class="nav_sp flex justify-center pt-32">
          <ul class="w-full divide-gray-200 divide-y border-t">
            <li><a href="#" class="block w-full py-4 pl-4 bg-gray-500 hover:bg-opacity-80 transition">メニュー1</a></li>
            <li> <a href="#" class="block w-full py-4 pl-4 bg-gray-500 hover:bg-opacity-80 transition">メニュー2</a></li>
            <li> <a href="#" class="block w-full py-4 pl-4 bg-gray-500 hover:bg-opacity-80 transition">メニュー3</a></li>
            <li> <a href="#" class="block w-full py-4 pl-4 bg-gray-500 hover:bg-opacity-80 transition">メニュー4</a></li>
          </ul>
        </nav>
        <footer class="py-12 md:py-24 px-4 md:px-8">
          <div class="inner max-w-screen-md mx-auto">
            <div class="text-xs text-center mt-8">copy; 2023 Your Company, Inc.</div>
          </div>
        </footer>
      </div>
    </section>
    <!-- 共通ナビゲーション枠  --------------------->
    <nav class="nav_pc w-full">
      <div class="inner flex items-center justify-between px-4 md:px-10 py-4">

        <!-- out_l --------------------->
        <div class="out_l">
          <a href="/">
            <img class="inline-block w-[140px] object-cover" src="https://files.kote2.biz/dammy/images/logo_white.png" alt="ロゴ" />
          </a>
        </div>

        <!-- out_r --------------------->
        <div class="out_r">
          <div class="inner flex justify-end">
            <!-- PC --------------------->
            <nav class="hidden md:block flex">
              <ul class="flex flex-col justify-end items-center md:flex-row md:space-x-4 md:space-x-6 xl:space-x-12 font-semibold  md:top-0 left-0 w-full md:w-auto  md:relative bg-gray-200 md:bg-transparent">
                <li><a href="#">メニュー1</a></li>
                <li><a href="#">メニュー2</a></li>
                <li><a href="#">メニュー3</a></li>
                <li><a href="#">メニュー4</a></li>
              </ul>
            </nav>
          </div>

          <!-- SP(Humbergar) --------------------->
          <div class="out_ham md:hidden">
            <a @click="isOpen = !isOpen" class="el_btn cursor-pointer inline-block h-[2rem] w-[2rem]">
              <span class="el_line relative  w-full h-[2px] inline-block before:w-full before:h-[2px] before:inline-block before:bg-white before:content-[''] before:absolute before:left-0 before:transition  after:w-full after:h-[2px] after:inline-block after:bg-white after:content-[''] after:absolute after:left-0 after:transition " :class="[isOpen ? 'bg-transparent before:top-0 before:rotate-[135deg] after:top-0 after:rotate-[-135deg]' : 'bg-white before:top-[-0.5rem] after:top-[0.5rem]']"></span>
            </a>
          </div>

        </div>
      </div>
    </nav>
  </div>
</header>