h2{
  margin-bottom: 20px;
}

#about p{
  max-width: 930px;
  margin: 0 auto;
}

.content-A,
.content-B{
  margin-bottom: 60px;
}

/* テキスト（右） */
.content-A{
  position: relative;
}
.content-A h3{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 300px;
}
.content-A img{
  width: calc(100% - 340px);
  max-width: 600px;
}
.content-A .article-text{
  position: absolute;
  right: 10px;
  top: 100px;
  width: 300px;
}

/* テキスト（左） */
.content-B{
  position: relative;
  text-align: right;
}
.content-B h3{
  text-align: left;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 300px;
}
.content-B img{
  width: calc(100% - 340px);
  max-width: 600px;
}
.content-B .article-text{
  text-align: left;  
  position: absolute;
  left: 10px;
  top: 100px;
  width: 300px;
}
@media screen and (min-width: 940px) {
  /* 表示領域が950px以上の場合に適用するスタイル */
  .content-A img{
    margin-left: calc(50% - 470px);    
  }
  .content-B img{
    margin-right: calc(50% - 470px);
  }
}
@media screen and (min-width: 1120px) {
  /* 表示領域が1120px以上の場合に適用するスタイル */
  p {
    font-size: 18px;
  }
  h2{
    font-size: 35px;
  }
  h3{
    font-size: 25px;
  }

  #about p{
    max-width: 1000px;
  }

  .content-A h3{
    /* width: 300px; */
    right: calc(50% - 520px);    
  }
  .content-A .article-text{
    width: 300px;
    right: calc(50% - 520px);
  }
  .content-A img{
    margin-left: 75px;    
  }


  .content-B h3{
    /* width: 300px; */
    left: calc(50% - 520px);    
  }
  .content-B .article-text{
    width: 300px;
    left: calc(50% - 520px);
  }
  .content-B img{
    margin-right: 75px;
  }
}