@charset "utf-8";
/* ============================================================================
CSS information
 style info :  サイト全体の共通構造
/* ============================================================================

/*webフォント読み込み*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap');

html{ font-size: 62.5%;scroll-behavior: smooth;}
body{
  font-family: 'Noto Sans JP', sans-serif,"游ゴシック体", YuGothic, "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans";
  font-size: 1.4rem;
  font-weight: 500;
  font-feature-settings:"palt"; /*自動カーニング*/
  letter-spacing: .05em; /*自動カーニングで詰まりすぎに感じたので*/
  color: #000;
}

/*リンク*/
a{
	text-decoration: none;
	cursor: pointer!important;
}

/*PC/SP 表示切り替え*/
.sp-show{
	display:none !important;
}
@media screen and (max-width: 599px){
	.pc-show{
		display:none!important;
	}
	.sp-show{
		display:block!important;
	}
}
/*animation*/
.fade{
	animation-name:fadeAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
  }
  @keyframes fadeAnime{
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
  }
  
  .fadeTrigger{
	opacity: 0;
	} 

 .fadeIn{
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
  }
  @keyframes fadeInAnime{
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
  }
 

 .mvLogo.slideDown{
	animation: slideDownAnime 0.5s forwards;
	}
	@keyframes slideDownAnime{
		from {
			opacity:0;
			transform: translate(0,-50%);
			}
		to {
			opacity:1;
			transform: translate(0,0);
		}
	}

.slideDown{
	animation-name:slideUpAnime;
	animation-duration:0.3s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes slideUpAnime{
		from {
		  opacity: 0;
		  transform: translate(0,-20%);
		}
		to {
		  opacity: 1;
		  transform: translate(0,0);
		}
	}  
.slideDownTrigger{
	opacity: 0;
}

.popIn{
	animation: popInAnime 0.5s ease-out forwards;
	opacity: 1 !important;
	}
	@keyframes popInAnime{
		0% {
			transform: scale(0.5);
		}
	
		60% {
			transform: scale(1.08);
		}
	
		100% {
			transform: scale(1);
		}
	}  
.popInTrigger{
	opacity: 0;
} 


  
  .mv_logo.fadeUp {
	animation-name: fadeUpAnimeMv;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity: 0;
  }
  @keyframes fadeUpAnimeMv{
  from {
	opacity: 0;
	transform: translate(-50%,-40%);
  }
  to {
	opacity: 1;
	transform: translate(-50%,-53%);
  }
  }
.fadeUp {
	animation: fadeUpAnime 0.8s forwards;
  }
  @keyframes fadeUpAnime{
  from {
	opacity: 0;
	transform: translateY(20px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
  }
  .fadeUpTrigger{
	opacity: 0;
	}