<div class="history">
  <div class="history__item">
    <div class="history__inner">
      <div class="history__iamge"><img src="https://placehold.jp/450x300.png" alt=""></div>
      <div class="history__text">
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
      </div>
    </div>
  </div>
  <div class="history__item">
    <div class="history__inner">
      <div class="history__iamge"><img src="https://placehold.jp/450x300.png" alt=""></div>
      <div class="history__text">
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
      </div>
    </div>
  </div>
  <div class="history__item">
    <div class="history__inner">
      <div class="history__iamge"><img src="https://placehold.jp/450x300.png" alt=""></div>
      <div class="history__text">
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
      </div>
    </div>
  </div>
  <div class="history__item">
    <div class="history__inner">
      <div class="history__iamge"><img src="https://placehold.jp/450x300.png" alt=""></div>
      <div class="history__text">
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
      </div>
    </div>
  </div>
  <div class="history__item">
    <div class="history__inner">
      <div class="history__iamge"><img src="https://placehold.jp/450x300.png" alt=""></div>
      <div class="history__text">
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
      </div>
    </div>
  </div>
</div>

body{
  padding:50px 0;
}
@mixin pc{
  @media only screen and (min-width: 768px) {
    @content;
  }
}
// start
img{
  max-width:100%;
}
.history {
    position: relative;
 
  margin:0 auto;
  padding:0 15px;
  @include pc{
     width:1000px;
  }
    &:before {
      content: "";
      width: 1px;
      height: 100%;
      background: orange;
      position: absolute;
      transform: translateX(-50%);
     @include pc {
        left: 50%;
      }
    }
    .history__item {
      position: relative;
      display: flex;
      padding: 0 0 35px 20px;
      @include pc {
        padding: 0;
      }
      &:nth-of-type(2n) {
        @include pc{
        justify-content: flex-end;
          }
      }

      &:before {
        content: "";
        width: 8px;
        height: 8px;
        background: orange;
        position: absolute;
        border-radius: 50%;
        left: 0;
        transform: translateX(-50%);
        @include pc {
          left: 50%;
          top: 0;
          width: 10px;
          height: 10px;
        }
      }
      &:last-child {
        padding-bottom: 15px;
       @include pc {
          padding-bottom: 0;
        }
        &:after {
          content: "";
          width: 6px;
          height: 6px;
          background: none;
          position: absolute;
          transform: translateX(-50%) rotate(-45deg);
          border-left: 1px solid orange;
          border-bottom: 1px solid orange;
          bottom: 0;
          left: 0;
          @include pc {
            left: 50%;
            width: 8px;
            height: 8px;
          }
        }
      }
    }
    .history__inner {
      max-width: 450px;
    }

    .history__iamge {
      line-height: 1;
      margin: 0;
      padding: 0;
      img {
        box-shadow: 0 0 15px rgba(#1e1d1d, 0.33);
        display: block;
      }
    }
    .history__text {
      padding-top: 10px;
      letter-spacing: 0.05em;
      @include pc {
        margin-top: 15px;
      }
    }
  }