.bodys {
  margin-top: 100px;
}

.works h1{
  display:block;
  padding:25px 0px;
  font-size:24px;
  text-align:center;
  color:#fff;
  font-weight:100;
  background-color: rgba(20,50,100,0.6);
}

.works h2{
  display:block;
  padding:20px 0px;
  color:#fff;
  text-align:center;
  font-weight:bold;
  font-size:20px;
  background-color:#003e66;
  border-top:6px double #7d9cc1;
  border-bottom:6px double #7d9cc1;
}

.work h3{
  margin-top:20px;
}

.works .catchcopy{
  color:#003e66;
  font-weight:bold;
  margin-top:20px;
}

.works ul {
  margin-left: 20px;
}



@media screen and (min-width: 951px) { /*------951px以上------*/
  .works_img_l img, .works_img_r img{
    width:100%;
    height:auto;
  }
  .works_img_l{
    max-width:324px;
    width:100%;
    height:auto;
    margin-right:10px;
    float:left;
  }
  .works_img_lr{
    max-width:526px;
    width:100%;
    height:auto;
    float:left;
  }
  .works_img_r{
    max-width:324px;
    width:100%;
    height:auto;
    margin-left:10px;
    float:right;
  }
  .works_img_rl{
    max-width:526px;
    width:100%;
    height:auto;
    float:right;
  }
}

@media screen and (max-width: 950px) { /*------950px以下------*/

  .works_img_l img, .works_img_r img{
    max-width:336px;
    width:100%;
    height:auto;
    margin-bottom:10px;
  }
  .works section {
    text-align:center;
  }
  .works section p {
    text-align:center;
  }
  .works .story {
    text-align:left;
  }
  .works h3{
   text-align:center;
  }

  .works ul {
    list-style: none;
  }
}

@media screen and (min-width:641px){ /*------641px以上------*/
.works_img_l{
  margin-right:10px;
}
.works_img_r{
  margin-left:10px;
}
.works .catchcopy{
  font-size:20px;
}
.wid{
  display:none;
}
}

@media screen and (max-width: 640px) { /*------640px以下------*/
.works .catchcopy{
  font-size:14px;
}
.hei{
  display:none;
}
}

@media screen and (max-width: 360px) { /*------360px以下------*/
  .works h1{
    font-size:18px;
  }
  .works h2{
    font-size:18px;
    padding:10px 10px;
  }
}