@charset "utf-8";

#charactor article {
  padding-top: clamp(50px, 10.42vw, 144px);
}
/*===================
charactor
===================*/
.ic_ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.ic_ttl::before {
  content: "";
  width: 6.43vw;
  max-width: 63px;
  min-width: 42.6px;
  height: 8.78vw;
  max-height: 86px;
  min-height: 58.1px;
  margin-bottom: clamp(15px, 3.52vw, 27px);
  background: url(../imgs/common/sec_ic.svg) no-repeat center / contain;
}
.about {
  padding-bottom: clamp(80px, 13.41vw, 103px);
}
.about__head {
  margin-bottom: 32px;
}
#charactor .about__head-ttl {
  width: 37.92%;
  max-width: 182px;
  min-width: 150px;
  margin: 0 auto min(17.08vw, 82px);
}
#charactor .about__head-sttl {
  width: 90%;
  max-width: 750px;
  margin: 0 auto 53px;
}
#charactor .about__head-txt {
  /* 768→17px */
  font-size: clamp(14px, 2.21vw, 17px);
  line-height: 2.235;
}
#charactor .about__imgbk {
  max-width: 497px;
  margin: 0 auto 95px;
}
#charactor .about__cont {
  max-width: 1263px;
  margin: 0 auto;
}
#charactor .chara {
  max-width: 1263px;
  padding: 0 5%;
  margin: 0 auto;
  border: 8px dotted #50a765;
  border-radius: clamp(25px, 10.42vw, 50px);
}
#charactor .chara::after {
  content: "";
  width: 91px;
  height: 69px;
  background: url(../imgs/charactor/dot_top.svg) no-repeat center bottom/contain;
  position: absolute;
  top: 0;
  right: 55.3%;
  transform: translateY(-99%);
}
#charactor .chara__cont {
  display: flex;
  align-items: center;
  gap: 2.4%;
}
#charactor .chara__cont-name {
  /* 768→31px */
  font-size: clamp(26px, 4.04vw, 34px);
  color: #4fa765;
  margin-bottom: 0.3em;
}
#charactor .chara__cont-txt {
  /* 768→20px */
  font-size: clamp(16px, 2.6vw, 22px);
  line-height: 1.727;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
}
/* こおり君 */
#charactor .chara__kori {
  padding: clamp(15px, 9.79vw, 47px) 0 clamp(15px, 8.33vw, 40px) 3.4%;
  border-bottom: 8px dotted #50a765;
}
#charactor .chara__kori .chara__cont-imgbk {
  width: 171px;
}
#charactor .chara__kori .chara__cont-txtbk {
  width: calc(97.6% - 171px);
}

/*トータル君 */
#charactor .chara__total {
  flex-direction: row-reverse;
  padding: 33px 31px 34px 0;
}
#charactor .chara__total .chara__cont-imgbk {
  max-width: 189px;
}
#charactor .chara__total .chara__cont-txtbk {
  text-align: right;
  width: calc(97.6% - 189px);
}

#charactor .chara__total .chara__cont-txt span {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  #charactor .chara__kori {
    padding-left: 0;
  }
  #charactor .chara__kori .chara__cont-imgbk {
    max-width: 171px;
    width: 30%;
  }
  #charactor .chara__kori .chara__cont-txtbk {
    width: 67.6%;
  }
  #charactor .chara__total {
    padding-right: 0;
  }
  #charactor .chara__total .chara__cont-imgbk {
    max-width: 189px;
    width: 33%;
  }
  #charactor .chara__total .chara__cont-txtbk {
    width: 64.6%;
  }
}
@media screen and (max-width: 480px) {
  #charactor .chara__cont {
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }
  #charactor .chara__kori .chara__cont-txtbk,
  #charactor .chara__total .chara__cont-txtbk {
    width: 100%;
    text-align: left;
  }
  #charactor .chara__kori .chara__cont-imgbk {
    width: 110px;
  }
  #charactor .chara__total .chara__cont-imgbk {
    width: 123px;
  }
  #charactor .chara__total .chara__cont-txt span {
    display: inline;
  }
}