@charset "utf-8";


@keyframes bgiLoop {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 500px -500px;
  }
}

@keyframes GoLeft {
    0% {
        right: 0%;
    }
    100% {
        right: 100%;
    }
}
@keyframes GoRight {
    0% {
        right: 100%;
    }
    100% {
        right: 0;
    }
}

@keyframes upDown {
    0% {
        top: 0;
    }
    100% {
        top: 0px;
    }
}


@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}


@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}


@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}



@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		}
	to{
		transform: rotateY(-360deg);
		}
}


@keyframes shine {
	100% {
		left: 125%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}

/*==================================================
印象編 4 最低限おぼえておきたい動き
===================================*/
/* 4-1 ふわっ（下から） */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 4-1 ふわっ（上から）*/
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* スマホ表示用。flipRightTriggerを指定している親要素に指定しないとうまく動かない*/
#item {
    transform: translate3d(0, 0, 0);
}
/* 4-2 パタッ（右へ） */
.flipRight {
    animation-name: flipRightAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    perspective-origin: right center;
    opacity: 0;
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.flipRightTrigger, .fadeUpTrigger, .fadeDownTrigger {
    opacity: 0;
}
/* 4-3 くるっ（ Y 軸（横へ）） */
.rotateY {
    animation-name: rotateYAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/*==================================================
/*7 画像リンクの動き*/
/*===================================*/
/* 7-17　回転＋テキスト（Y 軸）
   ----------------------------- */
/* スマホ表示用。flipYを指定している親要素に指定しないとうまく動かない*/
.choice-btn {
    transform: translate3d(0, 0, 0);
}
.flipY a { /*テキストの基点となる位置を定義*/
    position: relative;
    display: block;
}
.flipY img {
    transition: all 0.35s; /*移り変わる速さを変更したい場合はこの数値を変更*/
    backface-visibility: hidden; /*三次元になった際に裏面を可視化させない*/
}
.flipY:hover img { /*hoverした時の変化*/
    transform: rotateY(-180deg);
    opacity: 0 !important;
}
.flipY span.detail-cap {
    /*ここからエリアの絶対配置の指定*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*ここまでエリアの絶対配置の指定*/
    transition: all 0.35s ease; /*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: rotateY(90deg); /*横軸に回転*/
    transform-origin: 50% 0%; /*回転する基点*/
    opacity: 0;
    background: #666; /*背景色*/
    color: #fff; /*テキストの色を変えたい場合はここを修正*/
    /*ここからテキスト中央寄せの指定*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*ここまでテキスト中央寄せの指定*/
}
.flipY:hover span.detail-cap { /*hoverした時の変化*/
    transform: rotateY(0); /*横軸に回転*/
    opacity: 1;
    transition-delay: 0.15s; /*移り変わる速さを変更したい場合はこの数値を変更*/
}
/*　7-8　キラッ　*/
.shine span.mask {
    position: relative; /*キラッの基点となる位置を定義*/
    display: block;
    overflow: hidden;
}
.shine span.mask::before {
    position: absolute;
    content: '';
    width: 50%; /*キラッの横幅*/
    height: 100%; /*キラッの縦幅*/
    top: 0; /*.shine span.maskのトップ0を基点*/
    left: -75%; /*画面の見えていない左から右へ移動するスタート地点*/
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg); /*背景白透過を斜めに*/
}
.shine span.mask:hover::before { /*hoverした時の変化*/
    animation: shine 0.7s; /*アニメーションの名前と速度を定義*/
}