/*--------------------
ページ表示時ふんわり表示
*/

body{
  animation: 3s fadein;
}
@keyframes fadein {
  from { opacity:0; }
  to   { opacity:1; }
}

/*======================================================================================
.page-top-button
=======================================================================================*/
.page-top-button a{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
	background: #ccc;
	color:#fff;
  opacity: 0.7;
  z-index: 20;
	transition:all 0.3s;
  cursor : pointer;
}
.page-top-button a::before{
	content: "";
	background: url(/img/arrow-top.svg) no-repeat 50% 50%;
	background-size: 30px auto;
	/*background-position: 50% 50%;*/
	width: 30px;
	height: 19px;
}
.page-top-button a:hover{
	opacity:0.8;
}















/*=============================================
スクロールアニメーションエフェクトのデフォルトスタイル
=============================================*/
.effect_fade-in{
  opacity:0;
  transition:all 1s;
}
.effect_fade-in_move-up{
  opacity:0;
  transform:translateY(50px);
  transition:all 1s;
}
.effect_fade-in_move-down{
  opacity:0;
  transform:translateY(-50px);
  transition:all 1s;
}
.effect_fade-in_move-left{
  opacity:0;
  transform:translateX(50px);
  transition:all 1s;
}
.effect_fade-in_move-right{
  opacity:0;
  transform:translateX(-50px);
  transition:all 1s;
}













/*======================================================================================

=======================================================================================*/
@media screen and (max-width: 959px){

	/* ------------------------------
	ヘッダーのロゴ
	------------------------------ */
	header .site-logo{
		z-index: 999;
		position: fixed;
		left:10px;
		top:10px;
	}
	header .site-logo img{
		width: auto;
		height: 40px;
	}
	/* ------------------------------
	ナビボタン
	------------------------------ */
	#spNavBtn{
		width:40px;
		height:40px;
		background:#fff;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index:999;
		display: flex;
		justify-content: center;
		align-items: center;
		/*border: 2px solid #707070;*/
		cursor: pointer;
	}
  #spNavBtn::after {
      content: "MENU";
      position: absolute;
      bottom: -10px;
      left: 0px;
      font-size: 10px;
      width: 40px;
      text-align: center;
      color: #0D79BB;
      font-weight: bold;
      font-family: 'Arial', sans-serif;
  }
	/* ------------------------------
	ナビボタンの線部分
	------------------------------ */
	.spNavBtn_inner {
		position: relative;
		z-index:1;
		width: 26px;
	}
	.spNavBtn_inner span,
	.spNavBtn_inner span:nth-of-type(2):after{
		display: block;
		height: 2px;
		width: 100%;
		background: #000;
		transition: all 0.4s ease;
		-webkit-transition: all 0.4s ease;
	}
	.spNavBtn_inner span:nth-of-type(2):after {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	}
	.spNavBtn_inner span:not(:last-child) {
	    margin-bottom: 6px;
	}
	/*ボタンをクリックしたときの、
	横線の動き*/
	#spNavBtn.is-active .spNavBtn_inner span:nth-of-type(1) {transform: translateY(20px) scale(0);}
	#spNavBtn.is-active .spNavBtn_inner span:nth-of-type(2) {transform: rotate(-45deg);}
	#spNavBtn.is-active .spNavBtn_inner span:nth-of-type(2)::after {transform: rotate(90deg);}
	#spNavBtn.is-active .spNavBtn_inner span:nth-of-type(3) {transform: translateY(-20px) scale(0);}
	/* ------------------------------
	ナビボタンクリックで開かれた、メニュー部分
	------------------------------ */
	#gNav {
		display:none;
		position: fixed;
		z-index: 998;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FFF;
	}
	#gNav nav {
		display: table;
		width: 100%;
		height: 100%;
	}
	#nav {
		display: table-cell;
		vertical-align: middle;
	}
	#nav>li {
		overflow: hidden;
		display: block;
		text-align: center;
		margin: 0 auto 1vh;
	}
	#nav>li>a {
		font-size:1.8rem;
		display: inline-block;
		padding:5px 0 6px;
		color: #171717;
		text-decoration: none;
	}
	#nav>li>a:after{
		height: 3px;
	}


/*@media screen and (max-width: 959px)*/
}
/*======================================================================================

=======================================================================================*/
@media screen and (min-width: 960px){


  .page-top-button a{
    bottom: 60px;
  }



/*@media screen and (min-width: 960px)*/
}