@charset "UTF-8";
/* CSS Document */
/*
スクロールアニメーションまとめ

.anime クラスと一緒に入れる
*/
/*==========================================================================
  変数
==========================================================================*/
/*==================================================
フェード（ふわっとする）
===================================*/
.fadeIn,
.fadeUp,
.fadeDown,
.fadeLeft,
.fadeRight {
  opacity: 0; }

.fadeIn.is-animated {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeInAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.fadeUp.is-animated {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fadeDown.is-animated {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fadeLeft.is-animated {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.fadeRight.is-animated {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
/*==================================================
パタッ
===================================*/
.flipDown,
.flipLeft,
.flipLeftTop,
.flipRight,
.flipRightTop {
  opacity: 0; }

.flipDown.is-animated {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0; }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1; } }
.flipLeft.is-animated {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0; }

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0; }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1; } }
.flipLeftTop.is-animated {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0; }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1; } }
.flipRight.is-animated {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 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; } }
.flipRightTop.is-animated {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0; }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1; } }
/*==================================================
くるっ
===================================*/
.rotateX,
.rotateY,
.rotateLeftZ,
.rotateRightZ {
  opacity: 0; }

.rotateX.is-animated {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0; }
  to {
    transform: rotateX(-360deg);
    opacity: 1; } }
.rotateY.is-animated {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0; }
  to {
    transform: rotateY(-360deg);
    opacity: 1; } }
.rotateLeftZ.is-animated {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0; }
  to {
    transform: rotateZ(-360deg);
    opacity: 1; } }
.rotateRightZ.is-animated {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0; }
  to {
    transform: rotateZ(360deg);
    opacity: 1; } }
/*==================================================
ボンッ、ヒュッ
===================================*/
.zoomIn,
.zoomOut {
  opacity: 0; }

.zoomIn.is-animated {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; }

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
.zoomOut.is-animated {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; }

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
/*==================================================
じわっ
===================================*/
.blur {
  opacity: 0; }

.blur.is-animated {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0; }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1; } }
.blurTrigger {
  opacity: 0; }

/*==================================================
にゅーん
===================================*/
.smooth {
  opacity: 0; }

.smooth.is-animated {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  　transform-origin: left;
  opacity: 0; }

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0; }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1; } }
/*==================================================
スーッ（枠線が伸びて出現）
===================================*/
.line {
  opacity: 0; }

.line.is-animated {
  position: relative;
  opacity: 0; }

.line.lineanime.is-animated {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes lineAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.line.is-animated::before,
.line.is-animated::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #222; }

.is-animated .line2::before,
.is-animated .line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #222; }

.line.is-animated::before {
  top: 0;
  left: 0; }

.line.lineanime.is-animated::before {
  animation: lineAnime .5s linear 0s forwards; }

.is-animated .line2::before {
  top: 0;
  right: 0; }

.line.lineanime.is-animated .line2::before {
  animation: lineAnime2 .5s linear .5s forwards; }

.line.is-animated::after {
  bottom: 0;
  right: 0; }

.line.lineanime.is-animated::after {
  animation: lineAnime .5s linear 1s forwards; }

.is-animated .line2::after {
  bottom: 0;
  left: 0; }

.line.lineanime.is-animated .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards; }

@keyframes lineAnime {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
@keyframes lineAnime2 {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }
.line.lineanime.is-animated .lineinappear {
  animation: lineInnerAnime .5s linear 1.5s forwards;
  opacity: 0; }

@keyframes lineInnerAnime {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*==================================================
シャッ（背景色が伸びて出現）
===================================*/
.bgextend,
.bgappear {
  opacity: 0; }

.bgextend.is-animated {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.is-animated .bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards; }

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*左から（.anime.bgextend.bgLRextend /後から出る要素に.bgappear）*/
.bgLRextend.is-animated::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffeb73; }
.bgLRextend.is-animated._sub_C::before {
  background-color: #80B8FF; }
.bgLRextend.is-animated._white::before {
  background-color: #fff; }
.bgLRextend.is-animated._gray::before {
  background-color: #f5f5f5; }
.bgLRextend.is-animated._black::before {
  background-color: #222; }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
.bgRLextend.is-animated::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffeb73; }
.bgRLextend.is-animated._sub_C::before {
  background-color: #80B8FF; }
.bgRLextend.is-animated._white::before {
  background-color: #fff; }
.bgRLextend.is-animated._gray::before {
  background-color: #f5f5f5; }
.bgRLextend.is-animated._black::before {
  background-color: #222; }

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0); }
  50% {
    transform-origin: right;
    transform: scaleX(1); }
  50.001% {
    transform-origin: left; }
  100% {
    transform-origin: left;
    transform: scaleX(0); } }
.bgDUextend.is-animated::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffeb73; }
.bgDUextend.is-animated._sub_C::before {
  background-color: #80B8FF; }
.bgDUextend.is-animated._white::before {
  background-color: #fff; }
.bgDUextend.is-animated._gray::before {
  background-color: #f5f5f5; }
.bgDUextend.is-animated._black::before {
  background-color: #222; }

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0); }
  50% {
    transform-origin: bottom;
    transform: scaleY(1); }
  50.001% {
    transform-origin: top; }
  100% {
    transform-origin: top;
    transform: scaleY(0); } }
.bgUDextend.is-animated::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffeb73; }
.bgUDextend.is-animated._sub_C::before {
  background-color: #80B8FF; }
.bgUDextend.is-animated._white::before {
  background-color: #fff; }
.bgUDextend.is-animated._gray::before {
  background-color: #f5f5f5; }
.bgUDextend.is-animated._black::before {
  background-color: #222; }

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0); }
  50% {
    transform-origin: top;
    transform: scaleY(1); }
  50.001% {
    transform-origin: bottom; }
  100% {
    transform-origin: bottom;
    transform: scaleY(0); } }
/*==================================================
その他
===================================*/
.anime.fadeup_box {
  opacity: 0; }

.anime.fadeup_box.is-animated {
  animation-name: fadeup_box;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeup_box {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
.count2 {
  animation-iteration-count: 2;
  /*この数字を必要回数分に変更*/ }

.countinfinite {
  animation-iteration-count: infinite;
  /*無限ループ*/ }

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
  animation-delay: 0.5s; }

.delay-time1 {
  animation-delay: 1s; }

.delay-time15 {
  animation-delay: 1.5s; }

.delay-time2 {
  animation-delay: 2s; }

.delay-time25 {
  animation-delay: 2.5s; }

.delay-time3 {
  animation-delay: 3s; }

.delay-time35 {
  animation-delay: 3.5s; }

.delay-time4 {
  animation-delay: 3s; }

.delay-time45 {
  animation-delay: 4.5s; }

/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 {
  animation-duration: 0.5s !important; }

.change-time1 {
  animation-duration: 1s !important; }

.change-time15 {
  animation-duration: 1.5s !important; }

.change-time2 {
  animation-duration: 2s !important; }

.change-time25 {
  animation-duration: 2.5s !important; }

.change-time3 {
  animation-duration: 3s !important; }

.change-time35 {
  animation-duration: 3.5s !important; }

.change-time4 {
  animation-duration: 3s !important; }

.change-time45 {
  animation-duration: 4.5s !important; }