@charset "utf-8";

.table_outer{
  width: 100%;
  margin-top: 30px;
  table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px 0;
    th{
      text-align: center;
      padding: 15px 0;
      font-weight: bold;
      width: 261px;
    }
    td{
      padding: 15px 25px;
    }
    tbody{
      th{
        background: #e8ecf7;
        color: var(--main-blue);
        border-bottom: 1px solid var(--main-blue);
      }
      td{
        border-bottom: 1px solid var(--main-blue);
      }
    }
    tr:first-child{
      th{
        border-top: 1px solid var(--main-blue);
      }
      td{
        border-top: 1px solid var(--main-blue);
      }
    }
    dl {
      display: flex;
      flex-wrap: wrap;
    }
    dt{
      width: 9em;
    }
    dd{
      width: calc(100% - 9em);
    }
  }
}

.history{
  margin-top: 40px;
}
.history_inner{
  display: flex;
  flex-direction: column;
  gap:40px;
  padding-left: 75px;
  position: relative;
  &::before{
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: var(--deep-blue);
    position: absolute;
    top: 0;
    left: 7px;
  }
}
.history_row{
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.history_head{
  font-size: var(--fs-24);
  color: var(--deep-blue);
  position: relative;
  display: flex;
  align-items: center;
  width: 150px;
  &::before{
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--deep-blue);
    position: absolute;
    left: -75px;  
  }
  &::after{
    content: '';
    display: block;
    width: 50px;
    height: 0;
    border-bottom: 1px dashed #707070;
    position: absolute;
    left: -55px;
  }
}
.history_com{
  margin-top: 10px;
  width: calc(100% - 150px);
}
@media screen and (max-width: 767px){

.table_outer{
  width: 100%;
  table{
    display: block;
    width: 100%;
    th{
      display: block;
      width: 100%;
    }
    td{
      display: block;
      width: 100%;
      padding: 15px 5%;
    }
    tbody{
      display: block;
      width: 100%;
    }
    tr{
      display: block;
      width: 100%;
    }
    tr:first-child{
      td{
        border-top: none;
      }
    }
  }
}
.history_inner {
  padding-left: 25px;
}
.history_head{
  align-items: flex-start;
  &::before{
    left: -25px;
    top: 8px;
  }
  &::after{
    display: none;
  }
}
.history_com{
  width: 100%;
}
}