/* Data
-------------------------------------------*/

.data .sec .sec_in{
  width: var(--page-width);
  margin: 0 auto;
  padding-top: calc(var(--sec-margin)*2);
  text-align: left;
}
.data .sec .sec_heading__jp{
  margin-bottom: 3rem;
}
.data .sec_bg__nav::after{
  background: none;
}
.data_list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.data_list .item{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 12px;
  background-color: #fff;
  border: 6px solid var(--blue);
}
.data_list .item .pic{
  position: relative;
  width: 86%;
  height: auto;
  margin: 0 auto;
}
.data_list .item .pic img{
  object-fit: cover;
 }
.data_list .title p{
  line-height: 1.5;
  color: var(--black);
  letter-spacing: .15em;
  font-size: clamp(17px,2.615vw,21px);
}
.data_list .title span{
  display: block;
  font-size: 75%;
  color: var(--blue);
}

.benefit_list{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.benefit_list dl{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
.benefit_list dt{
  flex: 0 0 30%;
  font-weight: bold;
  text-align: center;
  letter-spacing: .1em;
}
.benefit_list dt span{
  display: block;
  padding: .5rem;
  border-radius: 30px;
  background-color: #fff;
}
.benefit_list dd{
  flex: 1;
}

#training{
  padding-bottom: calc(var(--sec-margin)*2);
}
.training_list{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.training_list li{
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  padding: 1.75rem;
  font-weight: bold;
  text-align: center;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid var(--blue);
}
.training_list li div{
  width: min(70px,60%);
  margin: 0 auto;
}
.training_list li p{
  line-height: 1.5;
  font-size: clamp(12px,1.846vw,14px);
}

@media screen and (max-width: 650px){
  
  .data_list{
    grid-template-columns: repeat(1,1fr);
    gap: 1.5rem;
  }
  .data_list .item{
    gap: 2rem;
    border: 4px solid var(--blue);
  }
  .data_list .title p{
    line-height: 2;
  }
  .benefit_list{
    gap: 1rem;
  }
  .benefit_list dl{
    flex-direction: column;
    gap: 1rem;
  }
  .benefit_list dt{
    width: 100%;
  }
  .benefit_list dt span{
    display: block;
    padding: .75rem;
  }
  .training_list{
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
  }
}