/* キャラクター紹介 */
div.character{
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 80px;
}
div.character div.inner{
  position: relative;
  width: 100%;
  padding: 0 14px 0;
  z-index: 5;
}
div.character div.inner figure.midoka{
  width: 100%;
  max-width: 894px;
  margin: 0 auto 50px;
}
div.character div.inner p.text{
  width: 100%;
  max-width: 760px;
  text-align: center;
  line-height: 24px;
  margin: 0 auto 80px;
}
div.character div.inner ul{
  width: 100%;
  max-width: 894px;
  background-color: #fff;
  border: 2px solid #91BF26;
  border-radius: 20px;
  padding: 14px 30px;
  margin: 0 auto 80px;
}
div.character div.inner ul li{
  width: 100%;
  max-width: 800px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px dotted #91BF26;
  padding: 16px 0;
  margin: 0 auto 0;
}
div.character div.inner ul li:last-child{
  border-bottom: unset;
}
div.character div.inner ul li span{
  display: block;
  width: 150px;
  font-weight: bold;
  color: #91BF26;
}
div.character div.inner ul li p{
  width: calc(100% - 150px);
}
div.character div.inner div.picture{
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto 50px;
}


div.character div.inner div.picture figure{
  width: calc(96% / 3);
}
div.character div.inner div.picture figure img{
  /* ダミー */
  height: 300px;
  background-color: #ddd;
  border-radius: 20px;
}

div.character > figure.illust-01{
  position: absolute;
  width: 234px;
  top: 0;
  left: 12%;
}
div.character > figure.illust-02{
  position: absolute;
  width: 300px;
  top: 0;
  right: 6%;
}
div.character > figure.illust-03{
  position: absolute;
  width: 294px;
  top: 280px;
  left: 4%;
}
div.character > figure.illust-04{
  position: absolute;
  width: 166px;
  top: 320px;
  right: 8%;
}
@media screen and (max-width: 1280px) {
  div.character > figure.illust-01{
    left: -30px;
    top: -50px;
  }
  div.character > figure.illust-02{
    right: -80px;
    top: -50px;
  }
  div.character > figure.illust-03{
    left: -100px;
  }
  div.character > figure.illust-04{
    right: -10px;
  }
}
@media screen and (max-width: 768px) {
  div.character div.inner figure.midoka{
    margin: 0 auto 20px;
  }
  div.character div.inner p.text{
    margin: 0 auto 50px;
  }

  div.character > figure.illust-01{
    width: 150px;
  }
  div.character > figure.illust-02{
    width: 180px;
  }
  div.character > figure.illust-03{
    top: 440px;
  }
  div.character > figure.illust-04{
    top: 440px;
  }
}
@media screen and (max-width: 510px) {
  div.character div.inner p.text{
    text-align: left;
  }
  div.character div.inner p.text br.spNone{
    display: none;
  }
  div.character div.inner ul{
    padding: 10px 20px;
  }
  div.character div.inner ul li{
    padding: 10px 0;
  }
  div.character div.inner ul li span{
    margin-bottom: 4px;
  }
  div.character div.inner ul li p{
    width: 100%;
  }
  div.character div.inner div.picture figure{
    width: 100%;
    margin: 0 auto 10px;
  }
  div.character div.inner div.picture figure:last-child{
    margin-bottom: unset
  }
}