@charset "utf-8";

/*==========================================================================
アニメーション (テキスト)
==========================================================================*/
/*:::::::::::::::::::::::::::::::タイミング:::::::::::::::::::::::::::::::::*/
.delay-time {
  opacity: 0;
}

.delay-time02 {
  animation-delay: 0.2s;
}

.delay-time03 {
  animation-delay: 0.3s;
}

.delay-time04 {
  animation-delay: 0.4s;
}

.delay-time05 {
  animation-delay: 0.5s;
}

.delay-time06 {
  animation-delay: 0.6s;
}

.delay-time09 {
  animation-delay: 0.9s;
}

.delay-time10 {
  animation-delay: 1.0s;
}

.delay-time11 {
  animation-delay: 1.1s;
}

.delay-time12 {
  animation-delay: 1.2s;
}

.delay-time13 {
  animation-delay: 1.3s;
}

.delay-time14 {
  animation-delay: 1.4s;
}

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

.delay-time16 {
  animation-delay: 1.6s;
}

.delay-time17 {
  animation-delay: 1.7s;
}

.delay-time18 {
  animation-delay: 1.8s;
}

.delay-time19 {
  animation-delay: 1.9s;
}

.delay-time20 {
  animation-delay: 2.0s;
}

/*::::::::::::::::::::::::::::::::【ふわっ】::::::::::::::::::::::::::::::::*/
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */
.fadeUp {
  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 {
  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 {
  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 {
  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);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/*（☆）*/
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

/*::::::::::::::::::::::【ズームイン・アウト】:::::::::::::::::::::::*/
/* ズームイン */
.zoomInTrigger {
  opacity: 0;
}

.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes zoomInAnime {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* はじめ0　*/
.zoomInTrigger {
  opacity: 0;
}


/* ズームアウト */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 1;
  /* 最終的に完全に表示される */
}

@keyframes zoomOutAnime {
  from {
    opacity: 1;
    transform: scale(2);
  }

  to {
    opacity: 1;
    transform: scale(1);
    /* 1倍に戻す */
  }
}

.zoomOutTrigger {
  padding: 20px;
  cursor: pointer;
  font-size: 20px;
}

/*::::::::::::::::::::::【シャッ（背景色が伸びて出現）】:::::::::::::::::::::::*/
/*背景色が伸びて出現（共通）*/
/*（☆）*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*左から*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0C123C;
  /*伸びる背景色の設定*/
}

@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::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0C123C;
  /*伸びる背景色の設定*/
}

@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::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@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::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@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);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/*（☆）*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/*-------------------------------【ぼかしから出現】---------------------------*/
/*（☆）*/
.blur {
  animation-name: blurAnime;
  animation-duration: 1.5s;
  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;
  }
}

/* はじめ0　*/
.blurTrigger {
  opacity: 0;
}

/*---------------------------------【点滅】---------------------------------*/
/*（☆）*/
.blinking {
  -webkit-animation: blink 0.8s ease-in-out infinite alternate;
  -moz-animation: blink 0.8s ease-in-out infinite alternate;
  animation: blink 0.8s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*---------------------------【タイピング】---------------------------------*/
/*（☆）*/
.TextTyping span {
  display: none;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
  content: "";
  animation: typinganime .8s ease infinite;
}

@keyframes typinganime {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/*==========================================================================
アニメーション 
==========================================================================*/
/*-------------------------【ぽよぽよ収縮する】------------------------------*/
.anim-box.poyopoyo {
  display: inline-block;
  /* or block */
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}

@keyframes poyopoyo {

  0%,
  40%,
  60%,
  80% {
    transform: scale(1.0);
  }

  50%,
  70% {
    transform: scale(0.95);
  }
}

/*-------------------------【ぼよよん】------------------------------*/
.boyoyon {
  transform: scale(1);
  animation: bound 1s ease-in infinite;
  /* ホバーの際は消す */
}

/** ホバー時に動かしたいときの設定 */
/* .boyoyon img:hover{
  -webkit-animation: bound 1s ease-in; 
  -moz-animation:    bound 1s ease-in; 
  animation: bound 1s ease-in;
} */
/** アニメーションの定義 */
@keyframes bound {
  from {
    transform: scale(1);
  }

  25% {
    transform: scale(1.15);
  }

  50% {
    transform: scale(0.95);
  }

  75% {
    transform: scale(1.05);
  }

  to {
    transform: scale(1);
  }
}

/*-------------------------【線が伸びる】------------------------------*/
.line {
  display: block;
  position: relative;
}

.line::after {
  background: linear-gradient(to right, #362ae0 0%, #3b79cc 50%, #42d3ed 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}

.line.is-animated::after {
  width: 100%;
}

/*==========================================================================
空を飛ぶ動き
==========================================================================*/
/*-------------------------【ふわふわ空を飛ぶ動き】------------------------------*/
.fly-container {
  /*containerを入れないと横幅がはみ出る原因になる*/
  width: 100%;
  height: 200px;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: flex-end;
}

.fly {
  width: 50vw;
  max-width: 100vw;
  height: 30vh;
  /* overflow-x: hidden;*/
  /*これをかけると黒い線が出現するので消す*/
  position: relative;
}

.fly img {
  position: absolute;
  top: 20px;
}

.target-fly {
  display: block;
  width: auto;
  user-select: none;
}

/*********************【縦にふわふわ】*********************/
.tate-fuwa img {
  animation: 3s tatefuwa infinite;
}

@keyframes tatefuwa {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

/*********************【横にふわふわ】*********************/

.yoko-fuwa img {
  animation: yokofuwa 3s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

@keyframes yokofuwa {
  0% {
     transform: translate(0, 0) rotate(-7deg);
  }

  50% {
     transform: translate(0, -7px) rotate(0deg);
  }

  100% {
     transform: translate(0, 0) rotate(8deg);
  }
}

/*===========================================================================
その他　機能に関する動き
===========================================================================*/
/*------------------------【モーダルウィンドウ】------------------------------*/
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.modal img {
  width: 300px;
  height: auto;
}

.close {
  position: absolute;
  top: -25px;
  right: -20px;
  font-size: 2.5rem;
  font-weight: bold;
  background-color: #FFFFFF;
  border-radius: 50%;
  padding: 0 10px;
  cursor: pointer;
}