@charset "UTF-8";
.bg-blue {
  background: linear-gradient(
    to top,
    #041c48 0%,
    #0b3d91 40%,
    #1e63f0 80%,
    #5edaff 100%
  );
}

#about-page .aboutus {
  margin-inline: max(10px, 50% - 411px);
  padding-bottom: min(calc(170 / 822 * 100vw), 170px);
  position: relative;
}

#about-page h2,
#about-page h3 {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  line-height: 1;
}
#about-page h2 {
  font-size: 78px;
  text-align: left;
  padding-top: min(calc(125 / 1920 * 100vw), 125px);
}
#about-page h3 {
  font-size: 32px;
}
#about-page .section02 h3 {
  font-size: 24px;
}
#about-page .section02 .representative-text {
  font-size: 14px;
  line-height: 2;
}
#about-page .profile-label {
  width: min(calc(85 / 822 * 100vw), 85px);
  display: inline-block;
  text-align-last: justify;
}
#about-page .profile-item {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 2;
}
#about-page .section01 .section-title {
  padding-top: min(calc(100 / 1920 * 100vw), 100px);
  padding-bottom: min(calc(25 / 1920 * 100vw), 25px);
}
#about-page .section02 .section-title {
  padding-top: min(calc(110 / 1920 * 100vw), 110px);
  padding-bottom: min(calc(20 / 1920 * 100vw), 20px);
}
#about-page .philosophy {
  color: #0e196d;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  position: relative;
}
#about-page .philosophy-innger {
  margin-inline: max(10px, 50% - 411px);
}
#about-page .philosophy h2 {
  padding-top: 0;
  padding-bottom: min(calc(96 / 1920 * 100vw), 96px);
}
#about-page .philosophy .section-title {
  color: #095fc3;
  font-size: 54px;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  padding-bottom: min(calc(44 / 1920 * 100vw), 44px);
}
#about-page .philosophy .mission-text {
  font-size: 34px;
  font-weight: 100;
  line-height: 1.7;
  padding-bottom: min(calc(104 / 1920 * 100vw), 104px);
  font-family: "Noto Sans JP", sans-serif;
}
#about-page .philosophy .description,
#about-page .philosophy .point-list {
  font-family: "Noto Sans JP", sans-serif;
}
#about-page .philosophy .point-item {
  line-height: 2;
  padding-bottom: min(calc(37 / 1920 * 100vw), 37px);
}
#about-page .philosophy .description {
  font-size: 28px;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  line-height: 1.57;
  padding-bottom: min(calc(42 / 1920 * 100vw), 42px);
}
#about-page .philosophy .value .description {
  line-height: 1;
  padding-bottom: min(calc(17 / 1920 * 100vw), 17px);
}
#about-page .philosophy .value .description span {
  font-size: 26px;
  font-family: "Noto Sans JP", sans-serif;
}
#about-page .philosophy .value .sub-description {
  line-height: 1;
  padding-bottom: min(calc(48 / 1920 * 100vw), 48px);
}
#about-page .philosophy .mission {
  padding-bottom: min(calc(60 / 1920 * 100vw), 60px);
}

#about-page .philosophy .vision {
  padding-bottom: min(calc(70 / 1920 * 100vw), 70px);
}
#about-page .philosophy .value {
  padding-bottom: min(calc(284 / 1920 * 100vw), 284px);
}
/* hexagon */
#about-page .hex1 {
  top: -6%;
  left: calc(50% + 123px);
  width: 974px;
  height: auto;
}
#about-page .hex2 {
  top: 44.7%;
  left: -618px;
  width: 625px;
  height: auto;
}
#about-page .hex3 {
  top: min(calc(478 / 1920 * 100vw), 478px);
  right: calc(50% + 190px);
  width: 981px;
  height: auto;
}
#about-page .hex4 {
  top: min(calc(78 / 1920 * 100vw), 78px);
  left: calc(50% + 246px);
  width: 900px;
  height: auto;
}

@media (max-width: 930px) {
  #about-page .philosophy {
    width: 90vw;
    margin: 0 auto;
  }
}
@media (max-width: 750px) {
  #about-page .hex1 {
    top: calc(30 / 375 * 100vw);
    left: auto;
    right: calc(-155 / 375 * 100vw);
    width: calc(343 / 375 * 100vw);
    height: auto;
  }
  #about-page .hex2 {
    top: calc(424 / 375 * 100vw);
    left: calc(-100 / 375 * 100vw);
    width: calc(238 / 375 * 100vw);
    height: auto;
  }
  #about-page .hex3 {
    top: calc(660 / 375 * 100vw);
    right: auto;
    width: calc(272 / 375 * 100vw);
    height: auto;
    left: calc(-145 / 375 * 100vw);
  }
  #about-page .hex4 {
    top: calc(0 / 375 * 100vw);
    right: calc(-92 / 375 * 100vw);
    width: calc(271 / 375 * 100vw);
    height: auto;
    left: auto;
  }
}

@media (max-width: 750px) {
  #about-page .container {
    width: 90%;
    margin: 0 auto;
  }
  #about-page .aboutus {
    width: 100%;
    margin: 0 auto;
  }
  #about-page h2 {
    font-size: calc(38 / 375 * 100vw);
    text-align: center;
    padding-top: calc(40 / 375 * 100vw);
  }
  #about-page h3 {
    font-size: calc(28 / 375 * 100vw);
  }
  #about-page .section01 .section-title {
    padding-bottom: calc(24 / 375 * 100vw);
  }
  #about-page .profile-item {
    display: flex;
    justify-content: space-between;
  }
  #about-page .profile-label {
    width: calc(85 / 375 * 100vw);
  }
  #about-page .profile-separator {
    padding-left: calc(5 / 375 * 100vw);
    padding-right: calc(5 / 375 * 100vw);
  }
  #about-page .profile-value {
    width: calc(240 / 375 * 100vw);
  }
  #about-page .section02 h3 {
    font-size: calc(24 / 375 * 100vw);
  }
  #about-page .section02 .section-title {
    padding-top: calc(75 / 375 * 100vw);
    padding-bottom: calc(20 / 375 * 100vw);
  }
  #about-page .section02 .representative-text {
    font-size: calc(14 / 375 * 100vw);
    line-height: 2;
    text-align: justify;
  }
  #about-page .philosophy {
    width: 100%;
  }
  #about-page .philosophy-innger {
    margin: 0 auto;
  }
  #about-page .philosophy h2 {
    font-size: calc(38 / 375 * 100vw);
    padding-bottom: calc(70 / 375 * 100vw);
  }
  #about-page .philosophy .section-title {
    font-size: calc(28 / 375 * 100vw);
    padding-bottom: calc(20 / 375 * 100vw);
  }
  #about-page .philosophy .mission-text {
    font-size: calc(20 / 375 * 100vw);
  }
  #about-page .philosophy .description {
    font-size: calc(16 / 375 * 100vw);
    line-height: 2;
    padding-bottom: calc(40 / 375 * 100vw);
  }
  #about-page .philosophy .value .description span {
    font-size: calc(22 / 375 * 100vw);
  }
  #about-page .philosophy .point-item {
    padding-bottom: calc(40 / 375 * 100vw);
  }
  #about-page .philosophy .value .description {
    font-size: calc(24 / 375 * 100vw);
    padding-bottom: calc(12 / 375 * 100vw);
  }
  #about-page .philosophy .value .sub-description {
    line-height: 2;
    padding-bottom: calc(46 / 375 * 100vw);
  }
  #about-page .philosophy .value {
    padding-bottom: calc(100 / 375 * 100vw);
  }
}