/*==================================================
　pagetop
===================================*/
#page-top a:hover{
	background: #ffffff00;
}
  
/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 10px;
    bottom:-60px;
    z-index: 2;
      /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
}
  
  /*　上に上がる動き　*/
  
#page-top.UpMove{
    animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
    to {
      opacity: 1;
    transform: translateY(-62px);
    }
}
  
  /*　下に下がる動き　*/
  
#page-top.DownMove{
    animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
    from {
      opacity: 1;
    transform: translateY(-62px);
    }
    to {
      opacity: 1;
    transform: translateY(100px);
    }
}




/*==================================================
　中心から外に線が伸びる（下部）
===================================*/
.inner li a{
  display: block;
 padding: 0 10px;
}

.inner li a{
  /*線の基点とするためrelativeを指定*/
position: relative;
}

.inner li.current a,
.inner li a:hover{
  color: #0d8f7b;
}

.inner li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background:#0d8f7b;
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.inner li.current a::after,
.inner li a:hover::after {
  transform: scale(1, 1);/*X方向にスケール拡大*/
}






/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
	position: relative;
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
  top: 50%; /* 要素Bの上端を親要素の50%の位置に配置 */
  left: 50%; /* 要素Bの左端を親要素の50%の位置に配置 */
  transform: translate(-50%, 14%); /* 要素Bを自身の幅と高さの半分だけ上に移動して中央に配置 */
	z-index: 4;
  display: block;
    /*形状を指定*/
	background:rgba(99, 205, 231, 0);
	width:270px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}

header .inner nav ul .has-child ul li{
  font-size: 1.1em;
  margin-bottom: 10px;
  float: none;
}
header .inner nav ul .has-child ul li:last-child{
  margin-right: 42px;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}


/*==768px以下の形状*/

@media screen and (max-width:768px){
	nav{
		padding: 0;
	}
	
	nav ul{
		display: block;
	}
	
	nav li.has-child ul,
	nav li.has-child ul ul{
  	position: relative;
    left:0;
    top:0;
    width:100%;
    visibility:visible;/*JSで制御するため一旦表示*/
    opacity:1;/*JSで制御するため一旦表示*/
    display: none;/*JSのslidetoggleで表示させるため非表示に*/
    transition:none;/*JSで制御するためCSSのアニメーションを切る*/
  }
}