/* =============================

conts

==============================*/
.box {
  width: 400px;
  margin: 0 auto; }
  .box ul {
    position: relative; }
  .box ul li {
    line-height: 4em; }
  .box .list2,
  .box .list3 {
    top: -4em;
    margin-left: 130px; }
    .box .list2 li,
    .box .list3 li {
      position: relative; }
      .box .list2 li:first-child:before,
      .box .list3 li:first-child:before {
        content: '';
        position: absolute;
        top: 2em;
        height: calc(100% - .75em);
        border-left: 1px solid #E1E1E1; }
      .box .list2 li:first-child:after,
      .box .list3 li:first-child:after {
        content: "";
        position: absolute;
        top: 2em;
        left: -54px;
        width: 46px;
        border-bottom: 1px solid #E1E1E1; }
      .box .list2 li:last-child:before,
      .box .list3 li:last-child:before {
        content: '';
        height: calc(4em - 2.25em); }
      .box .list2 li:before,
      .box .list3 li:before {
        content: '';
        position: absolute;
        top: .25em;
        left: -32px;
        width: 10px;
        height: calc(100% + 1em);
        border-left: 1px solid #E1E1E1; }
      .box .list2 li:after,
      .box .list3 li:after {
        content: "";
        position: absolute;
        top: 2em;
        left: -32px;
        width: 20px;
        border-bottom: 1px solid #E1E1E1; }

@media screen and (max-width: 768px) {
  /* =============================

    conts

    ==============================*/
  .box {
    width: 92%;
    margin: 0 auto; }
    .box ul {
      position: relative; }
    .box ul li {
      line-height: 4em; }
    .box .list2,
    .box .list3 {
      top: 0;
      margin-left: 40px; }
      .box .list2 li,
      .box .list3 li {
        position: relative; }
        .box .list2 li:first-child:before,
        .box .list3 li:first-child:before {
          content: '';
          position: absolute;
          top: 0;
          height: calc(100% + .25em);
          border-left: 1px solid #E1E1E1; }
        .box .list2 li:first-child:after,
        .box .list3 li:first-child:after {
          content: "";
          position: absolute;
          top: 2em;
          left: -32px;
          width: 20px;
          border-bottom: 1px solid #E1E1E1; }
        .box .list2 li:last-child:before,
        .box .list3 li:last-child:before {
          content: '';
          height: calc(2em - .25em); }
        .box .list2 li:before,
        .box .list3 li:before {
          content: '';
          position: absolute;
          top: .25em;
          left: -32px;
          width: 10px;
          height: calc(100% + .25em);
          border-left: 1px solid #E1E1E1; }
        .box .list2 li:after,
        .box .list3 li:after {
          content: "";
          position: absolute;
          top: 2em;
          left: -32px;
          width: 20px;
          border-bottom: 1px solid #E1E1E1; } }