@charset "utf-8";

@media print, screen and (min-width:768px){
  .c_anchor_btns{
    margin-top: 50px;
  }
}
@media screen and (max-width:767px) {
  .c_anchor_btns{
    margin-top: 35px;
  }
}

/* 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_08.png) no-repeat right top;
  background-size: 100%;
  z-index: -1;
}
.bg_donut_area::after{
  content: '';
  display: block;
  position: absolute;
  top: 2100px;
  right: -40px;
  background: url(/common_2022/images/bg/img_donut_ill_05.png) no-repeat left top;
  background-size: 100%;
  margin: auto;
  z-index: -1;
}
.bg_donut_area_02::before{
  content: '';
  display: block;
  position: absolute;
  top: 1400px;
  left: -40px;
  background: url(/common_2022/images/bg/img_donut_ill_10.png) no-repeat right top;
  background-size: 100%;
  margin: auto;
  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: 355px;
    right: -100px;
    width: 200px;
    height: 200px;
  }
  .bg_donut_area::after{
    top: 1990px;
    right: -100px;
    width: 200px;
    height: 200px;
  }
  .bg_donut_area_02::before{
    top: 1260px;
    bottom: auto;
    left: -130px;
    width: 200px;
    height: 200px;
  }
}

/* point_article_wrap
-------------------------------------------------- */
.point_article_wrap{
  position: relative;
}
.point_article_wrap + .point_article_wrap::after{
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  background-image : linear-gradient(to right, #ccc, #ccc 2px, transparent 2px, transparent 8px);
  background-size: 8px 2px;
  background-position: left bottom;
  background-repeat: repeat-x;
}

.article_list{}
.article_list .flex{
  display: flex;
  flex-wrap: wrap;
}
.article_list:first-child{
  margin-top: 0;
}
@media print, screen and (min-width:768px){
  .point_article_wrap{
    margin-top: 60px;
  }
  .point_article_wrap + .point_article_wrap{
    padding-top: 60px;
  }
  .point_article_wrap .c_ttl_bold_03{
    margin-top: 20px;
  }

  .article_list{
    margin-top: 30px;
  }
  .article_list + .article_list{
    margin-top: 80px;
  }
  .article_list .flex{
    justify-content: space-between;
  }
  .article_list .flex.fig_rvs{
    flex-direction: row-reverse;
  }
  .article_list .article_cnt{
    width: 46%;
  }
  .article_list .article_cnt:nth-child(-n+2){
    margin-top: 0;
  }
  .article_list .article_cnt [class*="c_ttl_bold_0"] + [class*="c_ttl_bold_0"] {
    margin-top: 1em;
  }
  .article_list .article_cnt .c_ttl_bold_04 + .sec_content{
    margin-top: 25px;
  } 
  .article_list .mod_btnNav_area{
    margin-top: 40px;
  }
  .article_list .mod_btnNav_area .mod_btnNav_list .btn{
    width: calc((100% - 6%) / 3);
  }
  .article_list .flex .mod_btnNav_area{
    width: 100%;
  }
}
@media screen and (max-width:767px) {
  .point_article_wrap{
    margin-top: 30px;
  }
  .point_article_wrap + .point_article_wrap{
    padding-top: 30px;
  }
  .point_article_wrap .c_ttl_bold_03{
    margin-top: 15px;
  }

  .article_list{
    margin-top: 20px;
  }
  .article_list + .article_list{
    margin-top: 45px;
  }
  .article_list .article_cnt{
    width: 100%;
  }
  .article_list .article_cnt + li{
    margin-top: 30px;
  }
  .article_list .flex .figIn{
    width: 72.13%;
    margin-top: 30px;
    margin-left: auto;
  }
  .article_list .article_cnt [class*="c_ttl_bold_0"] + [class*="c_ttl_bold_0"]{
    margin-top: 20px;
  }
  .article_list .article_cnt .c_ttl_bold_04 + .sec_content{
    margin-top: 1em;
  }
  .article_list .article_cnt{
    order: 0;
  }
  .article_list .flex .figIn{
    order: 1;
  }
  .article_list .flex .mod_btnNav_area{
    order: 0;
    width: 100%;
    margin-top: 25px;
  }
}