@charset "UTF-8";

/* 一文字ずつ登場するテキストアニメーション */

body.loading .message__addition{
  opacity: 0;
  transition: all 1s;
}
body.loading .message__addition.in-view{
  opacity: 1;
}


@keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 一文字ずつ */
@keyframes showTextFromBottom {
  0% {
    transform: translateY(100%);
  }
  /* 以下の50%追加でバウンド */
    50%{
    transform: translateY( -25% );
  }
  100% {
    transform: translateY(0);
  }
}

/* MESSAGE */
.message-block-text-title.anime-up {
  display: block;
  min-height: 2.4em; /* 適宜調整 */
  line-height: 1;
}
body.loading .message__addition.in-view .anime-up.displayed span{
  animation: showText 0.025s backwards;
  display: inline-block;
}
body.loading .message__addition.in-view .anime-up.displayed > span{
  overflow: hidden;
  padding-top: 1em;
}
body.loading .message__addition.in-view .anime-up.displayed > span > span{
  animation: showTextFromBottom 0.75s ease-out backwards;
}
/* ///MESSAGE */





/* ===== */
body.loading .circle-big__addition,
body.loading .circle-big__addition2,
body.loading .circle-small__addition,
body.loading .circle-small__addition2 {
    opacity: 0;
    transition: all 1s;
}

body.loading .circle-big__addition.in-view,
body.loading .circle-big__addition2.in-view,
body.loading .circle-small__addition.in-view,
body.loading .circle-small__addition2.in-view {
    opacity: 1;
}

body.loading .circle-big__addition.in-view .poyoyon2,
body.loading .circle-big__addition2.in-view .poyoyon2,
body.loading .circle-small__addition.in-view .poyoyon2,
body.loading .circle-small__addition2.in-view .poyoyon2{
  animation: poyoyon2 1.2s ease-in-out forwards;
}

@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}


/* ===アニメーションの設定：上下に浮遊する動き== */

/*囲みワード　知識　知恵　知力*/
body.loading .knowledge-block-k{
    opacity: 0;
    transition: all 1s;
}
body.loading .knowledge-block-k.in-view{
    opacity: 1;
}
body.loading .knowledge-block-w{
    opacity: 0;
    transition: all 1s;
}
body.loading .knowledge-block-w.in-view{
    opacity: 1;
}
body.loading .knowledge-block-i{
    opacity: 0;
    transition: all 1s;
}
body.loading .knowledge-block-i.in-view{
    opacity: 1;
}


.animated-btn {
  animation-delay: 2s;
}
.animated-btn.shift {
  animation-delay: 2.4s;
}
.animated-btn.shift2 {
  animation-delay: 2.8s;
}

.animated-btn {
    animation: floatAnimation 2s infinite ease-in-out; 
}

/*  */
@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);/* 中間点：上10px移動 */
  }
  100% {
    transform: translateY(0);
  }
}


/**/
body.loading .section-chieru-center-block-f{
    opacity: 0;
    transition: all 1s;
}

body.loading .section-chieru-center-block-f.in-view{
    opacity: 1;
}
/*知を得る。「チエル」*/
body.loading .section-chieru-center-block-h{
    opacity: 0;
    transition: all 1s;
}

body.loading .section-chieru-center-block-h.in-view{
    opacity: 1;
}
/* 子どもたちがたくさんの知を得て、 */
body.loading .section-chieru-center-block-p{
    opacity: 0;
    transition: all 1s;
}

body.loading .section-chieru-center-block-p.in-view{
    opacity: 1;
}


/* フェードアップ */
.in-view.fadeup {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.in-view.fadeup2 {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.in-view.fadeup3 {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/*テキスト*/
body.loading .message-block-text{
    opacity: 0;
    transition: all 1s;
}

body.loading .message-block-text.in-view{
    opacity: 1;
}

/* 詳しく　ボタン*/
body.loading .message-button-block{
    opacity: 0;
    transition: all 1s;
}

body.loading .message-button-block.in-view{
    opacity: 1;
}