@media screen and (min-width: 1024px), print {
  .hdf {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .hdf.style02 span {
    width: 90px;
  }
  .hdf.style02 p {
    width: -webkit-calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: calc(100% - 90px);
  }
  .hdf span {
    width: 60px;
    white-space: nowrap;
  }
  .hdf p {
    width: -webkit-calc(100% - 70px);
    width: -moz-calc(100% - 70px);
    width: calc(100% - 70px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hdf {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .hdf.style02 span {
    width: 9.77517vw;
  }
  .hdf.style02 p {
    width: -webkit-calc(100% - 9.77517vw);
    width: -moz-calc(100% - 9.77517vw);
    width: calc(100% - 9.77517vw);
  }
  .hdf span {
    width: 6.35386vw;
    white-space: nowrap;
  }
  .hdf p {
    width: -webkit-calc(100% - 6.35386vw);
    width: -moz-calc(100% - 6.35386vw);
    width: calc(100% - 6.35386vw);
  }
}

@media screen and (max-width: 767px) {
  .hdf {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .hdf.style02 span {
    width: 20.83333vw;
  }
  .hdf.style02 p {
    width: -webkit-calc(100% - 20.83333vw);
    width: -moz-calc(100% - 20.83333vw);
    width: calc(100% - 20.83333vw);
  }
  .hdf span {
    width: 13.67188vw;
    white-space: nowrap;
  }
  .hdf p {
    width: -webkit-calc(100% - 13.67188vw);
    width: -moz-calc(100% - 13.67188vw);
    width: calc(100% - 13.67188vw);
  }
}