@charset "UTF-8";

/*  ------------------*/
#owner,
#flow {
  position: relative;
}

#flow {
  background-color: #fff;
}

#owner > .inner,
#flow > .inner {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (max-width: 1000px) {
  #owner > .inner,
  #flow > .inner {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 767px) {
  #owner > .inner,
  #flow > .inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

#owner > .inner > .owner-blc {
  width: 96%;
  max-width: 900px;
  margin: 40px auto 0;
}

#owner > .inner > .owner-blc > .ttl {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 120%;
  color: #fff;
  background-color: #239823;
  padding: 5px 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#owner > .inner > .owner-blc > .owner-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}

#owner > .inner > .owner-blc > .owner-list > .box {
  width: 50%;
  padding: 0 2%;
  box-sizing: border-box;
}

@media screen and (max-width: 480px) {
  #owner > .inner > .owner-blc > .owner-list > .box {
    width: 100%;
    margin-bottom: 20px;
  }
}

#flow > .inner > .cont {
  max-width: 1100px;
  width: 100%;
  padding: 40px 4%;
  margin: 40px auto 0;
  box-sizing: border-box;
}

#flow > .inner > .cont > .problem {
  margin-top: 40px;
}

#flow > .inner > .cont > .problem > .problem-cont {
  position: relative;
}

#flow > .inner > .cont > .problem > .problem-cont > div:not(:nth-last-child(1)) {
  position: relative;
  padding-bottom: 100px;
  margin-bottom: 30px;
}

#flow > .inner > .cont > .problem > .problem-cont > div:not(:nth-last-child(1))::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  display: block;
  width: 100%;
  height: 71px;
  background-image: url(../img/owner/arrow-list.png);
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
}

#flow > .inner > .cont > .problem > .problem-cont > div > .problem-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

#flow > .inner > .cont > .problem > .problem-cont > div > .problem-list > li {
  max-width: 300px;
  width: 100%;
  border-radius: 50%;
  border: 1px solid #333035;
  padding: 10px;
  box-sizing: border-box;
}

#flow > .inner > .cont > .problem > .problem-cont > div > .problem-list > li > .box {
  width: 100%;
  border-radius: 50%;
  background-color: #f0f4f5;
  padding: 20px 20px;
  box-sizing: border-box;
}

#flow > .inner > .cont > .problem > .problem-cont > div > .problem-list > li > .box > .ttl {
  text-align: center;
  font-size: 220%;
  color: #239324;
  font-weight: bold;
  margin-bottom: 10px;
}

#flow > .inner > .cont > .problem > .problem-cont > div > .problem-list > li > .box > .txt {
  line-height: 1.5;
}

@media screen and (max-width: 1000px) {
  #flow > .inner > .cont > .problem > .problem-cont > div > .problem-list > li {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 767px) {
  #flow > .inner > .cont {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  #flow > .inner > .cont {
    padding: 40px 2%;
  }
}