@charset "utf-8";

/* bg_donut_area
-------------------------------------------------- */
.bg_donut_area,
.bg_donut_area_02{
  position: relative;
  overflow: hidden;
}
.bg_donut_area::before{
  content: '';
  display: block;
  position: absolute;
  top: 750px;
  right: -40px;
  background: url(/common_2022/images/bg/img_donut_ill_01.png) no-repeat right top;
  background-size: 100%;
  z-index: -1;
}
.bg_donut_area::after{
  content: '';
  display: block;
  position: absolute;
  top: 2250px;
  right: -40px;
  background: url(/common_2022/images/bg/img_donut_ill_04.png) no-repeat right top;
  background-size: 100%;
  z-index: -1;
}
.bg_donut_area_02::before{
  content: '';
  display: block;
  position: absolute;
  top: 1550px;
  left: -40px;
  background: url(/common_2022/images/bg/img_donut_ill_03.png) no-repeat left top;
  background-size: 100%;
  z-index: -1;
}
@media print, screen and (min-width:768px){
  .bg_donut_area::before,
  .bg_donut_area::after,
  .bg_donut_area_02::before{
    width: 20.8vw;
    max-width: 400px;
    min-width: 300px;
    height: 20.8vw;
    max-height: 400px;
    min-height: 300px;
  }
}
@media screen and (max-width:767px) {
  .bg_donut_area::before{
    top: 13.6%;
    right: -100px;
    width: 200px;
    height: 200px;
  }
  .bg_donut_area::after{
    top: 70%;
    right: -100px;
    width: 200px;
    height: 200px;
  }
  .bg_donut_area_02::before{
    top: 42%;
    left: -130px;
    width: 200px;
    height: 200px;
  }
}
@media (orientation: landscape) and (max-width: 767px){
  .bg_donut_area::before{
    top: 500px;
  }
  .bg_donut_area::after{
    top: 2500px;
  }
  .bg_donut_area_02::before{
    top: 1610px;
  }
}

/* article_wrap
-------------------------------------------------- */
.article_list{}
.article_list .flex{
  display: flex;
  flex-wrap: wrap;
}

@media print, screen and (min-width:768px){
  .article_list .flex{
    justify-content: space-between;
  }
  .article_list .flex.fig_rvs{
    flex-direction: row-reverse;
  }
  .article_list .c_ttl_bold_02{
    margin-top: 5.5%;
  }
  .article_list li{
    width: 46%;
  }
  .article_list li:nth-child(-n+2){
    margin-top: 0;
  }
}
@media screen and (max-width:767px) {
  .article_list li{
    width: 100%;
  }
  .article_list li + li{
    margin-top: 30px;
  }
  .article_list .flex .figIn{
    width: 71%;
    margin: 0 auto;
  }
  .article_list li .c_btn_01 a{
    max-width: 200px;
  }
}