/* --------------------------------------------------
 1.サイドパネル　共通設定
 2.検索パネル
 3.詳細パネル
 4.下部メニュー（メインジャンル、サブジャンル）
 5.アニメーション設定
---------------------------------------------------*/

.hidden {
  display: none;
}


/* --------------------------------------------------
  1.サイドパネル　共通設定
---------------------------------------------------*/
/* 検索パネル、詳細パネル　初期位置は左側に埋める */
#search-panel , #info-panel{
  left: -100%;
}

/* スマホ設定 */
@media (max-width: 599px){
	#search-panel , #info-panel{
		left: auto;
		top: 100%;    	
	}
}

/* 検索パネル、詳細パネル　 表示用 , 非表示用 */
#search-panel.active, #search-panel.nonactive,
#info-panel.active , #info-panel.nonactive {
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}


/* --------------------------------------------------
  2.検索パネル
---------------------------------------------------*/
#search-panel.active    { animation-name: panel_move_right; } /* 検索パネル 表示用 */
#search-panel.nonactive { animation-name: panel_move_left; }  /* 検索パネル 非表示用 */

/* スマホ設定 */
@media (max-width: 599px){
  #search-panel.active    { animation-name: panel_up_sp; }    /* 検索パネル 表示用 */
  #search-panel.nonactive { animation-name: panel_down_sp; }  /* 検索パネル 非表示用 */
}

/* サブジャンルパネル　初期位置は↓に埋める */
#searchPanelSubSelectSlider, .searchsub {
  /*transform: translateY(100%);*/
  /*z-index: 50;*/
}

/* サブジャンルパネル 表示用 */
#searchPanelSubSelectSlider.active ,  .searchsub.active{
  animation: panel_up2 0.5s cubic-bezier(0.15, 0, 0.4, 0) 1 forwards;
}

/* メインジャンルパネル、サブジャンルパネル 非表示用 */
#searchPanelSubSelectSlider.nonactive, .searchsub.nonactive{
  animation-name: panel_down2;
  animation-duration: 0.2s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


/* --------------------------------------------------
  3.詳細パネル
---------------------------------------------------*/
#info-panel.active    { animation-name: panel_move_right; }   /* 詳細パネル 表示用 */
#info-panel.nonactive { animation-name: panel_move_left; }    /* 詳細パネル 非表示用 */

/* スマホ設定 */
@media (max-width: 599px){  
  #info-panel.active    { animation-name: panel_up_sp; }    /* 詳細パネル 表示用 */
  #info-panel.nonactive { animation-name: panel_down_sp; }  /* 詳細パネル 非表示用 */
}


/* --------------------------------------------------
 4.下部メニュー（メインジャンル、サブジャンル）
---------------------------------------------------*/
/* サブジャンルパネル　初期位置は↓に埋める */
#course-panel, .menusub {
  transform: translate(-50% , calc(100% + 5px));  
}

/* メインジャンルパネル、サブジャンルパネル 表示用 */
#select-panel-wrapper.active , #course-panel.active, .menusub.active {
  animation: panel_up 0.5s cubic-bezier(0.15, 0, 0.4, 0) 1 forwards;
}

/* メインジャンルパネル、サブジャンルパネル 非表示用 */
#select-panel-wrapper.nonactive , #course-panel.nonactive, .menusub.nonactive {
  animation-name: panel_down;
  animation-duration: 0.2s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


/* --------------------------------------------------
  5.アニメーション設定
---------------------------------------------------*/
/* メニューパネル 表示用 */
@keyframes panel_up {
	0% {
		transform: translate(-50% , calc(100% + 5px));
	}
	50% {
    	transform: translate(-50% , 0);
    }
    65% {
    	transform: translate(-50% , 10px);
    }
    100% {
    	transform: translate(-50% , 0);
   }
}

@keyframes panel_up2 {
	0% {
		transform: translateY(100%);
	}
	50% {
    	transform: translateY(0);
    }
    65% {
    	transform: translateY(10px);
    }
    100% {
    	transform: translateY(0);
   }
}

/* メニューパネル 非表示用 */
@keyframes panel_down {
  0% {
   transform: translate(-50% , 0);
  }
  100% {
   transform: translate(-50% , calc(100% + 5px));
  }
}

/* メニューパネル 非表示用 */
@keyframes panel_down2 {
  0% {
   transform: translateY(0);
  }
  100% {
   transform: translateY(100%);
  }
}

/* サイドパネル 表示用 */
@keyframes panel_move_right {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

/* サイドパネル 非表示用 */
@keyframes panel_move_left {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}


/* SP用パネルアニメーション */

/* SPメニューパネル 表示用 */
@keyframes panel_up_sp {
  0% {
    top:100%;
  }
  100% {
    top:0px;
  }
}

/* SPメニューパネル 非表示用 */
@keyframes panel_down_sp {
  0% {
  }
  100% {
    top: 100%;
  }
}



.z50 {
  z-index : 50;
}

.menu_slide_pad {
  margin-right: 10px;
}

.menu_slide_padM {
  margin-right: 20px;
}

.menu_slide_padL {
  margin-right: 30px;
}