@charset "utf-8";
/* CSS Document */
.under_mv{
  background: url(../img/mv.png) no-repeat center;
  background-size: cover;
}
main{
}
.intro{
  padding: 60px 0;
}
.about {
  position: relative;
  margin: 60px 0;
  &::before{
    content: '';
    display: block;
    width: 50%;
    height: 100%;
    background: url(../img/bg_01.png) no-repeat right top;
    background-size: cover;
    position: absolute;
    top: -60px;
    left: 0;
  }
}
.abo_inner{
  max-width: 1024px;
  width: 90%;
  margin: auto;
  display: flex;
  padding: 60px;
  justify-content: space-between;
  align-items: center;
  gap:20px;
  background: #04378c;
  position: relative;
}
.abo_box {
  max-width: 523px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pro_inner {
  max-width: 1024px;
  width: 90%;
  margin: auto;
}
.product .anc_list{
  margin: 40px auto;
}
.product .anc_btn{
  background: #fff;
  border: 1px solid #04378c;
}
.pro_block {
  padding: 45px 60px;
  margin-top: 20px;
  background: #000;
  &:nth-child(1){
    background: #e6ebf4;
    border-top: 4px solid #04378c;
    & .pro_plate{
      background: #04378c;
    }
  }
  &:nth-child(2){
    background: #f9f8fc;
    border-top: 4px solid #5951B7;
    & .pro_plate{
      background: #5951B7;
    }
  }
  &:nth-child(3){
    background: url(../img/bg_02_3.png) no-repeat center top;
    background-size: cover;
    & .pro_plate{
      background: #04808C;
    }
  }
}
.pro_head {
  font-size: 2.4rem;
  font-weight: bold;
}
.pro_list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 25px;
  margin-top: 40px;
}
.pro_card{
  max-width: 281px;
  width: 100%;
}
.pro_plate {
  padding: 10px 20px 25px;
  color: #fff;
  min-height: calc(100% - 199px);
}
.pro_name{
  font-size: 2rem;
  line-height: 1.5;
  font-weight: bold;
  padding: 15px 0;
}
.choice{
  padding: 60px 0;
  & .btn_more{
    margin-top: 30px;
  }
}
.cho_inner{
  max-width: 1024px;
  width: 90%;
  margin: auto;
}
@media screen and ( max-width: 1023px ) {

}
@media screen and ( max-width: 767px ) {
.intro{
  padding: 40px 0;
}
.pro_block {
  padding: 40px 5%;
}
.pro_list {
  justify-content: center;
}
}