:root {
  /*--color-bg: hsl(236 35% 24%);*/
  --color-point: rgb(0,114,188,1);
  --color-primary: rgb(0,0,0,0.9);
  --color-shaded: rgb(0,0,0,0.2);
}
#block_07 {width:1100px; margin:140px auto 160px auto;  background-color:#fff;  display: grid;  place-items: left;}
#block_07 .tit {  color: var(--color-shaded); text-align:center;  font-size: 45px;  font-weight: 400;  letter-spacing: 0;  line-height: 180%;  margin: 0; }
#block_07 .tit span {  font-size:60px;font-weight:600; /*font-family:'KBO-Dia-Gothic_bold';*/  }

/* will be animated on scroll */
.text-on-scroll {
  background: linear-gradient(to right, 
                              var(--color-primary), 
                              var(--color-primary)) 
              no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;
  
  animation: scroll-text-color linear auto both;
  animation-range: cover 5% cover 60%;
  animation-timeline: view();
}

/* animations */
@keyframes scroll-text-color {
  to {    background-size: 100%;  }
}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#block_07 {width:90%; margin:80px auto ; }
#block_07 .tit {  color: var(--color-shaded);  font-size: 18px;  font-weight: 400;  letter-spacing: 0;  line-height: 180%;  margin: 0; }
#block_07 .tit span {  font-size:24px;  }
.text-on-scroll {color:#222;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}