@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
html,
body {
  margin: 0;
  padding: 0;
}

.baseStyle {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Yu Gothic", "Noto Sans JP", sans-serif;
  color: #fff;
}
.baseStyle *,
.baseStyle *::before,
.baseStyle *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #333333;
}
.baseStyle article, .baseStyle aside, .baseStyle details, .baseStyle figcaption, .baseStyle figure, .baseStyle footer, .baseStyle header, .baseStyle hgroup, .baseStyle menu, .baseStyle nav, .baseStyle section, .baseStyle main {
  display: block;
}
.baseStyle ul, .baseStyle li {
  list-style: none;
}
.baseStyle blockquote, .baseStyle q {
  quotes: none;
}
.baseStyle blockquote::before, .baseStyle blockquote::after, .baseStyle q::before, .baseStyle q::after {
  content: "";
  content: none;
}
.baseStyle a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  background: transparent;
  transition: 0.3s;
  display: block;
  position: relative;
  z-index: 2;
  transform: translateZ(1px);
}
.baseStyle video {
  width: 100%;
}
.baseStyle address {
  font-style: normal;
}
.baseStyle ins {
  color: #000;
  text-decoration: none;
}
.baseStyle mark {
  color: #000;
  font-style: italic;
  font-weight: bold;
}
.baseStyle del {
  text-decoration: line-through;
}
.baseStyle table {
  border-collapse: collapse;
  border-spacing: 0;
}
.baseStyle hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #444;
  margin: 1em 0;
  padding: 0;
}
.baseStyle input, .baseStyle select {
  vertical-align: middle;
}
.baseStyle button {
  margin: 0;
}
.baseStyle a,
.baseStyle a:link,
.baseStyle a:visited {
  text-decoration: none;
}
.baseStyle img {
  max-width: 100%;
  height: auto;
}

/*==========================================
  Common (PC)
========================================== */
#humofit .-tb,
#humofit .-sp {
  display: none !important;
}
#humofit .-pc {
  display: block !important;
}
#humofit .wrap {
  max-width: 1060px;
  padding: 0 20px;
  margin: 0 auto;
}
#humofit .fade {
  --fade-step: 0ms;
  --fade-index: 0;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s, transform 1s;
}
#humofit .fade.active {
  transition-delay: calc(var(--fade-index) * var(--fade-step));
  opacity: 1;
  transform: translateY(0);
}
#humofit h2.ttl {
  font-family: "Roboto", sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
}
#humofit p, #humofit li {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
#humofit .note {
  font-size: 14px;
}
#humofit .btn {
  text-align: center;
  margin-top: 85px;
}
#humofit .btn a {
  background: #fff;
  border: solid 1px #333333;
  display: inline-block;
  font-size: 20px;
  color: #333333;
  text-align: center;
  padding: 18px 64px;
}
#humofit .btn a span {
  display: inline;
}
#humofit .btn a:hover {
  background: #DDDDDD;
}

/*==========================================
  MV (PC)
========================================== */
#humofit .mv {
  background: url("../features/img/humofit/fv_bg.png") center center/cover no-repeat;
  padding: 277px 20px 205px;
}
#humofit .mv h1 {
  width: 600px;
  margin: auto;
}
#humofit .mv p {
  font-size: 35px;
  font-weight: 700;
  line-height: 1.48;
  color: #fff;
  text-align: center;
  margin-top: 35px;
}

/*==========================================
  ABOUT (PC)
========================================== */
#humofit .about {
  padding: 110px 0 0;
}
#humofit .about_header {
  padding-bottom: 110px;
}
#humofit .about_header p {
  text-align: center;
}
#humofit .about_header .txt_large {
  font-size: 25px;
}
#humofit .about_header h2 + p {
  margin-top: 68px;
}
#humofit .about_header .txt_large + p,
#humofit .about_header .note {
  margin-top: 38px;
}
#humofit .about .lead {
  background: url("../features/img/humofit/about_bg.png") center center/cover no-repeat;
  height: 580px;
  display: flex;
  align-items: center;
}
#humofit .about .lead .wrap {
  max-width: 850px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
}
#humofit .about .lead p {
  font-size: 22px;
  line-height: 1.6;
  color: #fff;
  text-align: left;
}
#humofit .about .about_detail {
  background: url("../features/img/humofit/about_bg02.png") center center/cover no-repeat;
  padding: 145px 0 120px;
}
#humofit .about h3,
#humofit .about h3 + p {
  font-size: 25px;
  font-weight: 500;
  color: #787878;
  line-height: 1.68;
  text-align: center;
}
#humofit .about .problem_list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  margin: 80px 0 0;
  padding: 0;
  list-style: none;
}
#humofit .about .problem_list li {
  width: 26.47%;
  height: 26.47%;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 3px 150px rgba(117, 140, 165, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  line-height: 1.5;
  color: #787878;
  position: relative;
  z-index: 1;
}
#humofit .about .problem_list li:not(:first-child) {
  margin-left: -1.96%;
}
#humofit .about .problem_list li:nth-child(even) {
  margin-top: 8.8%;
  z-index: 2;
}
#humofit .about .problem_list li:nth-of-type(1) {
  margin-top: 2.8%;
}
#humofit .about .problem_list li:nth-of-type(2) {
  margin-top: 10%;
}
#humofit .about .problem_list li:nth-of-type(3) {
  margin-left: -2.96%;
}
#humofit .about .problem_list li:nth-of-type(4) {
  margin-top: 7%;
}
#humofit .about .problem_list + p {
  font-size: 22px;
  color: #787878;
  line-height: 1.8;
  text-align: center;
  margin-top: 94px;
}
#humofit .about .col2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 154px;
}
#humofit .about .col2 .item_ttl {
  font-size: 22px;
  margin-top: 20px;
  border-bottom: solid 1px #333333;
  display: inline-block;
}
#humofit .about .col2 .item_ttl + p {
  margin-top: 15px;
}
#humofit .about .col2_item {
  width: 49.4117647059%;
  text-align: center;
}
#humofit .about .col2_item figure {
  position: relative;
}
#humofit .about .col2_item figure .icon_speed {
  width: 32px;
  position: absolute;
  right: 0;
  bottom: -25px;
}

/*==========================================
  SOLUTION (PC)
========================================== */
#humofit .solution {
  background: #F8F8F8;
  padding: 155px 0 87px;
}
#humofit .solution h2 + p {
  font-size: 20px;
  text-align: center;
  margin-top: 90px;
}
#humofit .solution ul {
  display: flex;
  justify-content: space-between;
  margin-top: 56px;
  padding-bottom: 90px;
}
#humofit .solution li {
  background: #fff;
  width: 30.5882352941%;
  text-align: center;
  padding: 27px 15px 35px;
  position: relative;
}
#humofit .solution li::before {
  content: "";
  background: url("../features/img/humofit/arrow.svg") center center/contain no-repeat;
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: -58px;
  left: 50%;
  transform: translateX(-50%);
}
#humofit .solution li figure {
  width: 170px;
  margin: auto;
}
#humofit .solution li p {
  margin-top: 10px;
}
#humofit .solution ul + p {
  background: linear-gradient(90deg, #E5F3FF 0%, #FFEECD 100%);
  font-size: 22px;
  text-align: center;
  padding: 45px;
}

/*==========================================
  APPLICATIONS (PC)
========================================== */
#humofit .applications {
  background: #F8F8F8;
  padding: 82px 0 92px;
}
#humofit .applications ul {
  max-width: 960px;
  margin: 100px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#humofit .applications li {
  background: #fff;
  width: 47.9166666667%;
  padding: 50px 5.2083333333%;
  margin-top: 40px;
}
#humofit .applications li figure {
  width: 150px;
  margin: auto;
}
#humofit .applications li:nth-of-type(1), #humofit .applications li:nth-of-type(2) {
  margin: 0;
}
#humofit .applications dl {
  margin-top: 18px;
}
#humofit .applications dt {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
#humofit .applications dd {
  margin-top: 25px;
}
#humofit .applications dd p {
  font-size: 14px;
  color: #787878;
}

/*==========================================
  FEATURES (PC)
========================================== */
#humofit .features {
  background: #F8F8F8;
  padding: 95px 0 85px;
}
#humofit .features .features_list {
  margin-top: 112px;
}
#humofit .features .features_item h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 23px 0;
}
#humofit .features .features_item h3 .num {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: #B0B0B0;
  margin-right: 20px;
}
#humofit .features .features_item .col2 {
  display: flex;
  justify-content: space-between;
  margin-top: 23px;
}
#humofit .features .features_item .col2_img {
  width: 48.2352941176%;
}
#humofit .features .features_item .col2_body {
  width: 48.0392156863%;
}
#humofit .features .features_item .col2_body p {
  line-height: 1.6;
}
#humofit .features .features_item .col2_body p + p {
  margin-top: 30px;
}
#humofit .features .features_item dl {
  margin-top: 90px;
}
#humofit .features .features_item dt {
  font-size: 18px;
}
#humofit .features .features_item dt span {
  font-size: 13px;
  display: block;
}
#humofit .features .features_item + .features_item {
  margin-top: 90px;
}
#humofit .features .features_table {
  margin-top: 135px;
}
#humofit .features .features_table h3 {
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}
#humofit .features .features_table figure {
  margin-top: 65px;
}
#humofit .features .features_detail {
  margin-top: 42px;
}
#humofit .features .features_detail h3 {
  font-size: 20px;
  font-weight: 700;
  position: relative;
  padding-left: 24px;
}
#humofit .features .features_detail h3::before {
  content: "";
  background: #D9D9D9;
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#humofit .features .features_detail ul {
  margin: 25px 0 0 20px;
}
#humofit .features .features_detail li {
  list-style: disc;
}
#humofit .features .features_detail + p {
  font-size: 18px;
  text-align: center;
  margin-top: 122px;
}
#humofit .features .btn {
  margin-top: 70px;
}
#humofit .features .note {
  text-align: center;
  margin-top: 65px;
}

@media screen and (max-width: 767px) {
  #humofit {
    /*========================================== 
      Common (SP)
    ========================================== */
    max-width: 100%;
    margin: auto;
  }
  #humofit .-pc,
  #humofit .-tb {
    display: none !important;
  }
  #humofit .-sp {
    display: block !important;
  }
  #humofit .wrap {
    max-width: 100%;
    padding: 0 9.4%;
  }
  #humofit .fade {
    --fade-step: 100ms;
  }
  #humofit h2.ttl {
    font-size: 24px;
  }
  #humofit p, #humofit li {
    font-size: 16px;
  }
  #humofit .note {
    font-size: 14px;
  }
  #humofit .btn {
    margin-top: 98px;
  }
  #humofit .btn a {
    font-size: 15px;
    padding: 22px 20px;
    width: 100%;
    max-width: 316px;
  }
  #humofit .btn a span {
    display: none;
  }
  #humofit .btn a:hover {
    background: #fff;
  }
  /*==========================================
    MV (SP)
  ========================================== */
  #humofit .mv {
    background: url("../features/img/humofit/fv_bg-sp.png") center center/cover no-repeat;
    padding: 300px 20px 290px;
  }
  #humofit .mv h1 {
    width: 100%;
    max-width: 270px;
  }
  #humofit .mv p {
    font-size: 21px;
    margin-top: 35px;
  }
  /*==========================================
    ABOUT (SP)
  ========================================== */
  #humofit .about {
    padding: 78px 0 0;
  }
  #humofit .about_header {
    padding-bottom: 96px;
  }
  #humofit .about_header .txt_large {
    font-size: 20px;
    text-align: center;
  }
  #humofit .about_header p {
    text-align: left;
  }
  #humofit .about_header h2 + p {
    margin-top: 26px;
  }
  #humofit .about_header .txt_large + p {
    margin-top: 42px;
  }
  #humofit .about_header p + p {
    margin-top: 26px;
  }
  #humofit .about_header .note {
    margin-top: 30px;
  }
  #humofit .about .lead {
    background: url("../features/img/humofit/about_bg-sp.png") center center/cover no-repeat;
    height: 500px;
    display: flex;
    align-items: center;
  }
  #humofit .about .lead .wrap {
    max-width: 354px;
    display: block;
    margin-top: 0;
  }
  #humofit .about .lead p {
    font-size: 16px;
    line-height: 3;
  }
  #humofit .about .about_detail {
    background: url("../features/img/humofit/about_bg02-sp.png") center center/cover no-repeat;
    padding: 107px 0 88px;
  }
  #humofit .about h3 {
    font-size: 18px;
  }
  #humofit .about h3 + p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 32px;
  }
  #humofit .about .problem_list {
    position: relative;
    left: 50%;
    width: min(92.31vw, 360px);
    margin: min(17.95vw, 70px) 0 0;
    margin-left: calc(min(92.31vw, 360px) / -2);
    display: block;
  }
  #humofit .about .problem_list li {
    width: min(51.28vw, 200px);
    height: min(51.28vw, 200px);
    font-size: min(3.85vw, 15px);
  }
  #humofit .about .problem_list li:not(:first-child) {
    margin-left: -1.96%;
  }
  #humofit .about .problem_list li:nth-child(even) {
    margin-top: 0;
  }
  #humofit .about .problem_list li:nth-child(odd) {
    margin: 0 0 0 auto;
  }
  #humofit .about .problem_list li:nth-of-type(1) {
    margin-top: 0;
  }
  #humofit .about .problem_list li:nth-of-type(2) {
    margin-top: max(-27.69vw, -108px);
    margin-left: min(0.51vw, 2px);
  }
  #humofit .about .problem_list li:nth-of-type(3) {
    margin-left: auto;
    margin-top: max(-18.72vw, -73px);
  }
  #humofit .about .problem_list li:nth-of-type(4) {
    margin-top: max(-16.15vw, -63px);
    margin-left: min(6.67vw, 26px);
  }
  #humofit .about .problem_list + p {
    font-size: 17px;
    line-height: 2.3;
    margin-top: 90px;
  }
  #humofit .about .col2 {
    width: 100vw;
    margin: 106px calc(50% - 50vw) 0;
    display: block;
  }
  #humofit .about .col2 .item_ttl {
    font-size: 17px;
    line-height: 1.4;
    margin-top: 0;
    padding-bottom: 8px;
    width: 100%;
  }
  #humofit .about .col2 .item_ttl + p {
    margin-top: 14px;
    line-height: 1.5;
  }
  #humofit .about .col2_item {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
  #humofit .about .col2_item figure {
    width: 62%;
  }
  #humofit .about .col2_item figure .icon_speed {
    right: 20px;
  }
  #humofit .about .col2_item_body {
    width: 28%;
    margin-bottom: 16px;
  }
  #humofit .about .col2_item + .col2_item {
    margin-top: 24px;
  }
  /*==========================================
    SOLUTION (SP)
  ========================================== */
  #humofit .solution {
    padding: 100px 0 60px;
  }
  #humofit .solution h2 + p {
    font-size: 16px;
    margin-top: 60px;
  }
  #humofit .solution ul {
    display: block;
    margin-top: 60px;
    padding-bottom: 102px;
    position: relative;
  }
  #humofit .solution ul::before {
    content: "";
    background: url("../features/img/humofit/arrow.svg") center center/contain no-repeat;
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
  }
  #humofit .solution li {
    width: 100%;
    margin: auto;
    padding: 20px 15px;
  }
  #humofit .solution li::before {
    content: none;
  }
  #humofit .solution li figure {
    width: 110px;
  }
  #humofit .solution li p {
    font-size: 14px;
    margin-top: 4px;
  }
  #humofit .solution li + li {
    margin-top: 25px;
  }
  #humofit .solution ul + p {
    background: linear-gradient(90deg, #E5F3FF 0%, #FFEECD 100%);
    font-size: 16px;
    padding: 50px 20px;
    margin: 0 auto;
  }
  /*==========================================
    APPLICATIONS (SP)
  ========================================== */
  #humofit .applications {
    padding: 60px 0 60px;
  }
  #humofit .applications .wrap {
    padding: 0 5.12%;
  }
  #humofit .applications ul {
    margin: 48px auto 0;
    display: block;
  }
  #humofit .applications li {
    width: 100%;
    padding: 30px 35px 30px 15px;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #humofit .applications li figure {
    width: 90px;
    margin: 0 2.85% 0 0;
  }
  #humofit .applications li:nth-of-type(1), #humofit .applications li:nth-of-type(2) {
    margin-top: 25px;
  }
  #humofit .applications dl {
    width: 200px;
    margin-top: 0;
  }
  #humofit .applications dt {
    font-size: 16px;
  }
  #humofit .applications dd {
    margin-top: 10px;
  }
  #humofit .applications dd p {
    font-size: 13px;
  }
  /*==========================================
    FEATURES (SP)
  ========================================== */
  #humofit .features {
    padding: 60px 0 85px;
  }
  #humofit .features .features_list {
    margin-top: 64px;
  }
  #humofit .features .features_item {
    margin: auto;
  }
  #humofit .features .features_item h3 {
    font-size: 20px;
    text-align: center;
    margin: 0 0 23px 0;
  }
  #humofit .features .features_item h3 span {
    margin-right: 20px;
  }
  #humofit .features .features_item .col2 {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 28px;
  }
  #humofit .features .features_item .col2_img {
    width: 100%;
    margin-top: 22px;
  }
  #humofit .features .features_item .col2_body {
    width: 100%;
  }
  #humofit .features .features_item .col2_body p + p {
    margin-top: 30px;
  }
  #humofit .features .features_item dl {
    margin-top: 73px;
  }
  #humofit .features .features_item dt {
    font-size: 14px;
    text-align: center;
  }
  #humofit .features .features_item dt span {
    font-size: 13px;
    margin-top: 5px;
  }
  #humofit .features .features_item dd .col2 {
    flex-direction: column;
    margin-top: 15px;
  }
  #humofit .features .features_item dd .col2_img {
    margin-top: 0;
  }
  #humofit .features .features_item dd .col2_body {
    width: 100%;
    margin-top: 34px;
  }
  #humofit .features .features_item dd .col2_body p, #humofit .features .features_item dd .col2_body li {
    font-size: 14px;
  }
  #humofit .features .features_item dd .col2_body p + p {
    margin-top: 20px;
  }
  #humofit .features .features_item + .features_item {
    margin-top: 80px;
  }
  #humofit .features .features_table {
    margin-top: 110px;
  }
  #humofit .features .features_table h3 {
    font-size: 21px;
  }
  #humofit .features .features_table figure {
    margin: 45px auto 0;
  }
  #humofit .features .features_detail {
    margin: 42px auto 0;
  }
  #humofit .features .features_detail h3 {
    font-size: 16px;
    padding-left: 24px;
  }
  #humofit .features .features_detail h3::before {
    width: 8px;
  }
  #humofit .features .features_detail ul {
    margin: 28px 0 0 20px;
  }
  #humofit .features .features_detail li {
    font-size: 14px;
  }
  #humofit .features .features_detail + p {
    font-size: 14px;
    text-align: center;
    margin-top: 75px;
  }
  #humofit .features .btn {
    margin-top: 43px;
  }
  #humofit .features .note {
    margin: 45px auto 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
  .fade.active {
    transition-delay: 0s;
  }
}