@charset "utf-8";
/* CSS Document */


/**************************************************/
/*******　　動き　　　*********/
/**************************************************/
/* 「ToTop」の動作内容 */
@keyframes toTop {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(-50px);/* Y軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}
/* 「ToBottom」の動作内容 */
@keyframes toBottom {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(100px);/* Y軸方向に70px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}
/* 「ToLeft」の動作内容 */
@keyframes toLeft {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(-50px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「ToRight」の動作内容 */
@keyframes toRight {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(60px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}
@keyframes toLeft2 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(-100px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「ToRight」の動作内容 */
@keyframes toRight2 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(100px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}
/*---------------------------------------------------------*/

/* 「ToLeft」を適用する箇所 */
#mask {
	background-color:rgba(255,255,255,0.9);
	width: 550px;
	padding: 40px;
	position: absolute;
	z-index: 2;
	top:200px;
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: toLeft;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
	
}
.catch-1{
  animation-duration: 3s;/* アニメーション時間 */
  animation-name: toTop;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}
.catch-2{
  animation-duration: 4s;/* アニメーション時間 */
  animation-name: toTop;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}
.catch-2{
  animation-duration: 4s;/* アニメーション時間 */
  animation-name: toTop;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}
.animation{
  animation-duration: 3s;/* アニメーション時間 */
  animation-name: toBottom;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}

/* 「ToRight」を適用する箇所 */
#slide{
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: toRight;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}
.top-right-top{
  animation-duration: 10s;/* アニメーション時間 */
  animation-name: toRight;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}
.top-right{
  animation-duration: 5s;/* アニメーション時間 */
  animation-name: toRight2;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}
.top-left{
  animation-duration: 5s;/* アニメーション時間 */
  animation-name: toLeft2;/* アニメーション名 */
  /* animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}
/*---------------------------------------------------------*/

/*.catch{
	font-size: 36px;
	font-weight: lighter;
	line-height: 1.4em;
	letter-spacing: 2px;
	margin-bottom: 20px;
}
.catch span{
	font-size: 46px;
	color: #109954;	
/*	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
}*/
.catch-s{
	line-height: 2.2em;
}

/* （HDCONTENTS01 タブレット表示） */
@media screen and ( max-width:1023px )
{
	#mask{
		top:120px;
		padding: 25px;
		margin-bottom: 0px;
	}
}