.ttl {
  font-weight: bold;
  border-bottom: 3px solid #569bf8;
  padding: 0.3em;
  margin-bottom: 10px;
  position: relative;
  font-size: 1.3rem;
  line-height: 1.3;
}
.ttl::before {
  content: '';
  background-color: #fff;
  width: 20px;
  height: 3px;
  position: absolute;
  left: 30px;
  bottom: -3px;
}
.ttl::after {
  content: '';
  background-color: #569bf8;
  width: 20px;
  height: 3px;
  transform: rotate(50deg);
  position: absolute;
  left: 25px;
  bottom: -10px;
}

.ttl02 {
  background-image: linear-gradient(#569bf8 50%, #cae3f7 50%);
  background-size: 6px 100%;
  background-repeat: no-repeat;
  padding-left: 18px;
  font-weight: bold;
  font-size: 1.2rem;
}

.textbox {
  font-size:1.2rem; 
  line-height: 1.7;
}

.ttl03 {
  color: #2c5e9c; 
  font-weight: bold; 
  font-size: 1.2rem; 
  margin-bottom: 8px; 
}

@media only screen and (max-width: 768px) {
.ttl {
  font-size: 1.7rem;
}
.ttl02, .ttl03 {
  font-size: 1.6rem;
}
  .textbox {
  font-size:1.6rem; 
}
}