h2{
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.col{
  margin-bottom: 160px;
}
.col .ttl{
  font-size: 2.6rem;
  margin-bottom:40px;
  background: #002d8b;
  color: #fff;
  padding: 5px 20px;
  box-sizing: border-box;
}
.col .flex {
  display: flex;
}
.col .flex .img{
  width: 45%;
  margin-right: 5%;
}
.col .flex .text {
  width: 50%;
}
.col .flex .text p{
  margin-bottom: 1em;
}
.col .flex .text .area{
  font-size: 2.6rem;
  font-weight: bold;
}
.col .flex dl{
  display: flex;
  flex-wrap: wrap;
  font-size: 1.6rem;
}
.col .flex dl dt{
  width: 45%;
  padding-right: 5%;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.col .flex dl dd{
  width: 50%;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
  margin-bottom: 10px;  
}

  @media screen and (max-width:1000px){
    .col .flex{
      display: block;
    }
    .col .flex .img{
      width: 50%;
      margin: 20px auto;
    }
    .col .flex .img img{
      display: block;
      width: auto;
      margin: 20px auto;
    }
    .col .flex .text{
      width: 100%;
    }
    .col .flex .text .area{
      font-size: 2.0rem;
    }
    .col .ttl{
      font-size: 2.0rem;
    }
    .col .flex .img{
      display: flex;
      align-items: flex-end;
    }
    .col .flex .img .sub{
      margin-left: 20px;
    }
  }
  @media screen and (max-width:800px){
      .col .flex .img:nth-child(2){
        width: 30%;
      }
  }

  @media screen and (max-width:500px){
    .col .flex dl{

      font-size: 1.2rem;
    }
    .col .flex dl dd{

    }
    .col .flex dl dt{
      padding-right: 10%;
      width: 35%;
      font-weight: bold;
    }
    .col .flex .text .area{
      font-size: 1.6rem;
    }
    .col .ttl{
      font-size: 1.6rem;
    }    
    .col .flex .img{
      width: 70%;
      margin: 20px auto;
    }    
  }