@charset "utf-8";

/*------------------------------------------
  スクロールすると上から現れるスライドメニューの動作
  ------------------------------------------*/




/*====================↓CSS変数を設定====================*/


  /*CSS変数を設定*/
  :root {

    --slide-menu-basic-width: 1300; /*スライドメニューの基本の横幅*/
    --slide-menu-basic-height: 120; /*スライドメニューの基本の高さ*/

    --slide-menu-frame-width: calc(var(--slide-menu-basic-width) * 1px);   /*「スライドメニューの幅」*/
    --slide-menu-frame-height: calc(var(--slide-menu-basic-height) * 1px); /*「スライドメニューの高さ」*/


    /*-------------
      指定：〜1300px
      -------------*/

    /*大枠の幅（1300px）より画面サイズが小さくなった場合の設定*/
    @media print, screen and (max-width: 1300px) {


      /*---------------------------------------------------------------------------------------
        【説明】
         1300pxより画面サイズが小さくなった場合、ウィンドウのサイズから「スライドメニューの高さ」の再計算を行う。
        ---------------------------------------------------------------------------------------*/

      --slide-menu-frame-ratio:  calc(var(--slide-menu-basic-height) / var(--slide-menu-basic-width)); /*「スライドメニューの比率」*/
      --slide-menu-frame-height: calc(100vw * var(--slide-menu-frame-ratio));                          /*「スライドメニューの高さ」*/


    }


  }


/*====================↑CSS変数を設定====================*/









/*--------------
  スライドメニュー
  --------------*/
#slide_menu{
  width:100%;
  height:var(--slide-menu-frame-height);
  position: fixed;
  top: 0;
  z-index: 10;
  display:none;
  background-color:#FFF;

  border-bottom: 10px solid #01BCAA;/*ヘッダー下部境界線*/
}





/*-------------------------------
  スライドメニュー（閉じた状態：初期値）
  -------------------------------*/
#slide_menu.slide_menu_close{
  animation: slide_menu_close_animation 0.5s forwards;
}

@keyframes slide_menu_close_animation{
  0% {
    transform: translateY(0px);
  }
  100% {
    /*------------------------------------------------------------------------------------
      【説明】
       --slide-menu-frame-height（「スライドメニューの高さ」）にはpaddingやborderの値は含まれない。
       それらを設定した場合、その分を直接数値でマイナスする必要がある。
      ------------------------------------------------------------------------------------*/
    transform: translateY(calc(-10px - var(--slide-menu-frame-height)));
  }
}





/*------------------------
  スライドメニュー（開いた状態）
  ------------------------*/
#slide_menu.slide_menu_open{
  animation: slide_menu_open_animation 0.7s forwards;
}

@keyframes slide_menu_open_animation{
  0% {
    transform: translateY(calc(0px - var(--slide-menu-frame-height)));
  }
  100% {
    transform: translateY(0px);
  }
}