.title_parent {
  width: 100%;
  font-weight: bold;
  color: #ffffff;
  margin-top: 60px;
}

.title_dots {
  -webkit-text-emphasis: filled #ffa500;
  text-emphasis: filled #ffa500;
}

.title_box{
  padding-left: 10%;
}

/* 枠線が書かれる基点*/
.title_line,
.title_sub_line {
  position: relative;
}

/*上下線*/
.title_line::before,
.title_line::after,
.title_sub_line::before,
.title_sub_line::after {
  position: absolute;
  content: "";
  width: 0;
  height: 2px;
  background: #ffffff; /* 枠線の色*/
}

/*左右線*/
.title_line2::before,
.title_line2::after,
.title_sub_line2::before,
.title_sub_line2::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 0;
  background: #ffffff; /* 枠線の色*/
}

/*上線*/
.title_line::before {
  top: 0px;
  left: 0px;
  animation: lineAnime 0.3s linear 0s forwards; /*表示されて0秒後に上線が0.3秒かけて表示*/
}
.title_sub_line::before {
  animation: lineAnime 0.3s linear 0s forwards; /*表示されて0秒後に上線が0.3秒かけて表示*/
}

/*右線*/
.title_line2::before {
  top: 0;
  right: 0;
  animation: lineAnime2 0.3s linear 0.3s forwards; /*表示されて0.3秒後に右線が0.3秒かけて表示*/
}
.title_sub_line2::before {
  animation: lineAnime2 0.3s linear 0.3s forwards; /*表示されて0.3秒後に右線が0.3秒かけて表示*/
}

/*下線*/
.title_line::after {
  bottom: 0;
  right: 0;
  animation: lineAnime 0.3s linear 0.6s forwards; /*表示されて0.6秒後に下線が0.3秒かけて表示*/
}
.title_sub_line::after {
  animation: lineAnime 0.3s linear 0.6s forwards; /*表示されて0.6秒後に下線が0.3秒かけて表示*/
}

/*左線*/
.title_line2::after {
  bottom: 0;
  left: 0;
  animation: lineAnime2 0.3s linear 0.9s forwards; /*表示されて0.9秒後に左線が0.3秒かけて表示*/
}
.title_sub_line2::after {
  animation: lineAnime2 0.3s linear 0.9s forwards; /*表示されて0.9秒後に左線が0.3秒かけて表示*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

/*枠線内側の要素*/
.title_line .lineinappear {
  animation: lineInnerAnime 0.5s linear 1.2s forwards; /*1.2秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0; /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*========= レイアウトのためのCSS ===============*/
/*========= PCサイズ ===============*/
@media screen and (min-width: 768px) {
  .title_bg-color {
    background-image: linear-gradient(90deg, rgba(22, 115, 114, 1), rgba(199, 179, 94, 1));
  }
  .title_line {
    width: 90%;
  }
  .title_img-pc {
    display: block;
  }
  .title_img-sp {
    display: none;
  }
  .title_parent {
    font-size: 1.5vw;
  }
  .title_big_font {
    font-size: 2.5vw;
  }
  /* 上線（2本目） */
  .title_sub_line::before {
    top: -20px;
    left: -20px;
  }
  /* 右線（2本目） */
  .title_sub_line2::before {
    top: -20px;
    right: 20px;
  }
  /* 下線（2本目） */
  .title_sub_line::after {
    bottom: 20px;
    right: 20px;
  }
  /* 左線（2本目） */
  .title_sub_line2::after {
    bottom: 20px;
    left: -20px;
  }
}
/*========= スマホサイズ ===============*/
@media screen and (max-width: 767.9px) {
  .title_bg-color {
    background-image: linear-gradient(180deg, rgba(22, 115, 114, 1), rgba(199, 179, 94, 1));
  }
  .title_line {
    width: 90%;
    margin-top: 40px;
    margin-bottom: 10%;
  }
  .title_img-pc {
    display: none;
  }
  .title_img-sp {
    display: block;
  }
  .title_parent {
    font-size: 3vw;
  }
  .title_big_font {
    font-size: 5vw;
  }
  /* 上線（2本目） */
  .title_sub_line::before {
    top: -12px;
    left: -12px;
  }
  /* 右線（2本目） */
  .title_sub_line2::before {
    top: -12px;
    right: 12px;
  }
  /* 下線（2本目） */
  .title_sub_line::after {
    bottom: 12px;
    right: 12px;
  }
  /* 左線（2本目） */
  .title_sub_line2::after {
    bottom: 12px;
    left: -12px;
  }
}