@charset "UTF-8";

/* -------------------------------- goal */
#goal{
  position: relative;
}
@media print, screen and (min-width: 900px){
  #goal{
    padding-bottom: 80px;
  }
  .copy_txt{
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 899px){
  #goal{
    padding-bottom: 50px;
  }
  .copy_txt{
    margin-bottom: 25px;
  }
}



/* -------------------------------- action */
#action{
  position: relative;
  background: #F2F2F2;
}
.action_list_wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.action_list li{
  position: relative;
  font-weight: bold;
}
.action_list li::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.action_list .list_01::before{
  background-image: url(/common/images/triangle_orange.svg);
}
.action_list .list_02::before{
  background-image: url(/common/images/triangle_red.svg);
}
.action_list .list_03::before{
  background-image: url(/common/images/triangle_green.svg);
}
.action_list .list_04::before{
  background-image: url(/common/images/triangle_yellow.svg);
}
.action_list .list_05::before{
  background-image: url(/common/images/triangle_sky_blue.svg);
}
.action_list .list_06::before{
  background-image: url(/common/images/triangle_blue.svg);
}
.action_list .list_07::before{
  background-image: url(/common/images/triangle_purple.svg);
}
@media print, screen and (min-width: 900px){
  #action{
    padding: 80px 0 100px;
  }
  .action_list li{
    padding-left: 60px;
    font-size: 2.6rem;
  }
  .action_list li:nth-of-type(n+2){
    margin-top: 30px;
  }
  .action_list li::before{
    width: 34px;
    height: 38px;
  }
}
@media screen and (max-width: 899px){
  #action{
    padding: 40px 0 50px;
  }
  .action_list li{
    padding-left: 40px;
    font-size: 1.7rem;
  }
  .action_list li:nth-of-type(n+2){
    margin-top: 25px;
  }
  .action_list li::before{
    width: 28px;
    height: 32px;
  }
}



/* -------------------------------- bg */
/* bg-01 */
.bg-01 .bg-sky-blue{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
@media print, screen and (min-width: 900px){
  .bg-01{
    top: 6vw;
    right: 0;
    width: 20vw;
    height: 6vw;
  }
}
@media screen and (max-width: 899px){
  .bg-01{
    top: 40vw;
    right: 0;
    width: 24vw;
    height: 12vw;
  }
}

/* bg-02 */
.bg-02 .bg-green{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media print, screen and (min-width: 900px){
  .bg-02{
    bottom: 10vw;
    left: 4vw;
    width: 13vw;
    height: 16vw;
  }
}
@media screen and (max-width: 899px){
  .bg-02{
    bottom: 28vw;
    left: 0;
    width: 13vw;
    height: 16vw;
  }
}

/* bg-03 */
.bg-03 .bg-yellow{
  top: 0;
  right: 0;
  width: 80%;
  height: 80%;
}
.bg-03 .bg-blue{
  bottom: -3%;
  left: 0;
  width: 50%;
  height: 50%;
}
@media print, screen and (min-width: 900px){
  .bg-03{
    right: 2vw;
    top: -10vw;
    width: 14vw;
    height: 14vw;
  }
}
@media screen and (max-width: 899px){
  .bg-03{
    right: 0;
    top: -5vw;
    width: 18vw;
    height: 18vw;
  }
}