@charset "shift_jis";

@import url("https://use.fontawesome.com/releases/v5.0.6/css/all.css");

.twi{
	max-width: 1100px !important;
	width: 96% !important;
	margin: 0 auto !important; 
	height:700px;
	overflow-y: scroll;
	overflow-x: hidden;
  }

  @keyframes reveal-image {
from {
  background-color: #fff;
  background-image: url(/images/logonew03.svg);
  fill: #42AFE3;
}
to {
  clip-path: inset(0);
  background-color: #222;
  color: #fff;
  background-image: url(/images/logonew02.svg);
}
}

  .animationElement {
/* スクロールアニメーションの設定 */
animation: reveal-image linear both; /* アニメーションを指定。イージングはlinear。animation-fill-modeはboth */
animation-timeline: view();
animation-range: contain -300px contain 0px; /* 開始: 要素がビューポートに完全に入った時、終了: ビューポートの真ん中 */
}

.animationElement{
background-color: #000;
background-repeat: no-repeat;
background-position:top 200px center;
padding-top: 500px;
margin-top: 100px;
padding-bottom: 60px;
}

@media screen and (max-width: 450px){		
.animationElement{
  background-size: 80%;
}

}

  .toggle_btn {
	  color: #222;
  }

  /* 重なっている時のスタイル */
  .toggle_btn.overlapping-animation span{
	  color: #fff;
	  background-color: #fff;
	  animation: pulse-red 1s infinite;
  }

  .toggle_btn.overlapping-header span{
	  color: #fff;
	  background-color: #fff;
	  animation: pulse-blue 1s infinite;
  }

  .toggle_btn.overlapping-footer span{
	  color: #fff;
	  background-color: #fff;
	  animation: pulse-green 1s infinite;
  }

  @media screen and (max-width: 640px) {
	  .toggle_btn {
		  right: 10px;
		  padding: 12px 16px;
		  font-size: 12px;
	  }
  }