#basic .content {
  padding: 120px 3% 0;
}
@media screen and (max-width: 767px) {
  #basic .content {
    padding-bottom: 0;
  }
}
#basic .content .section-box {
  position: relative;
  background-color: #F5F5F5;
  padding: 130px 5% 80px;
  margin-bottom: 130px;
}
@media screen and (max-width: 767px) {
  #basic .content .section-box {
    padding: 80px 5% 40px;
    margin-bottom: 80px;
  }
}
#basic .content .section-box h2 {
  color: #fff;
  font-size: clamp(1.9rem, 1.2806451613rem + 0.8064516129vw, 2.2rem);
  text-align: center;
  max-width: 600px;
  width: 80%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 28px 0;
}
@media screen and (max-width: 767px) {
  #basic .content .section-box h2 {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 767px) {
  #basic .content .section-box h2 {
    font-size: 1.8rem;
    padding: 10px 0;
    width: 70%;
  }
}
#basic .content .section-box .side-title {
  position: absolute;
  right: 3%;
  top: 30px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  #basic .content .section-box .side-title {
    top: -10px;
  }
  #basic .content .section-box .side-title img {
    width: 20px;
  }
}
#basic .content .section-box p.normal {
  max-width: 700px;
  margin: auto;
}
#basic .content .section-box p.normal.mb {
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  #basic .content .section-box p.normal.mb {
    margin-bottom: 30px;
  }
}
#basic #about {
  padding: 130px 15% 80px;
}
@media screen and (max-width: 767px) {
  #basic #about {
    padding: 60px 5% 40px;
    margin-bottom: 80px;
  }
}
#basic #about h2 {
  background-color: #4A9ADE;
}
#basic #about .lead {
  text-align: center;
  font-size: clamp(2.8rem, 1.9741935484rem + 1.0752688172vw, 3.2rem);
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  #basic #about .lead {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #about .lead {
    font-size: 2rem;
    margin-bottom: 30px;
  }
}
#basic #about .change {
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  #basic #about .change {
    margin-bottom: 40px;
  }
}
#basic #about .change h3 {
  text-align: center;
  font-size: clamp(1.7rem, 1.0806451613rem + 0.8064516129vw, 2rem);
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  #basic #about .change h3 {
    font-size: 2rem;
  }
}
#basic #about .change h3 span {
  display: inline-block;
  border: 2px solid #CC0033;
  background-color: #fff;
  line-height: 1;
  padding: 8px 20px;
  color: #CC0033;
}
@media screen and (max-width: 767px) {
  #basic #about .change h3 {
    margin-bottom: 20px;
  }
}
#basic #about .change .copy {
  text-align: center;
  color: #4A9ADE;
}
#basic #about .change .copy span {
  display: inline-block;
  margin-bottom: 8px;
  background-color: #fff;
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
  line-height: 1;
  padding: 8px 12px 10px;
}
@media screen and (max-width: 767px) {
  #basic #about .change .copy span {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #about .change .copy span {
    font-size: 1.6rem;
    padding: 8px 5px 10px;
  }
}
#basic #about .change .copy p {
  margin-bottom: 20px;
}
#basic #about .change .copy p span {
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
  display: inline-block;
  background-color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  padding: 8px 12px 10px;
}
@media screen and (max-width: 767px) {
  #basic #about .change .copy p span {
    font-size: 2.6rem;
  }
}
#basic #about .change .copy .image {
  text-align: center;
}
#basic #history h2 {
  background-color: #7D4CA0;
}
#basic #history .line {
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
  padding-top: 50px;
}
#basic #history .line::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 30px;
  height: calc(100% - 20px);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #E9E4EC;
}
#basic #history .line::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 25px solid transparent;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-top: 25px solid #E9E4EC;
}
#basic #history .line .layout {
  display: flex;
  gap: 50px;
  max-width: 900px;
  align-items: center;
  margin: 0 auto 80px;
}
@media screen and (max-width: 767px) {
  #basic #history .line .layout {
    margin-bottom: 50px;
  }
}
#basic #history .line .layout.rev {
  flex-direction: row-reverse;
}
#basic #history .line .layout .text {
  width: 60%;
}
@media screen and (max-width: 767px) {
  #basic #history .line .layout .text {
    width: 100%;
  }
}
#basic #history .line .layout .text h3 span {
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
  display: inline-block;
  background-color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  padding: 8px 12px 10px;
  color: #7D4CA0;
}
@media screen and (max-width: 767px) {
  #basic #history .line .layout .text h3 span {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #history .line .layout .text h3 span {
    display: inline;
    background: none;
    padding: 0;
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #history .line .layout .text h3 {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 10px;
  }
  #basic #history .line .layout .text h3 br {
    display: none;
  }
}
#basic #history .line .layout .text p {
  width: 82%;
}
@media screen and (max-width: 767px) {
  #basic #history .line .layout .text p {
    width: 100%;
  }
}
#basic #history .line .layout .image {
  width: 40%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #basic #history .line .layout .image {
    width: 80%;
    margin: auto;
  }
}
#basic #history .line .layout .image img {
  max-width: 340px;
  width: 100%;
}
#basic #history .line .layout#history1 {
  margin-bottom: 50px;
}
#basic #history .line .layout#history1 .text {
  width: 50%;
}
#basic #history .line .layout#history1 .image {
  width: 50%;
}
#basic #history .line .layout#history2 {
  margin-bottom: 0;
}
#basic #history .line .now {
  text-align: center;
  font-size: clamp(2rem, 1.1741935484rem + 1.0752688172vw, 2.4rem);
  color: #7D4CA0;
  background-color: #F5F5F5;
  line-height: 1;
  padding: 10px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #basic #history .line .now {
    font-size: 2.4rem;
  }
}
#basic #history .grow h3 {
  text-align: center;
  font-size: clamp(2.8rem, 1.9741935484rem + 1.0752688172vw, 3.2rem);
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  #basic #history .grow h3 {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #history .grow h3 {
    font-size: 6.2vw;
  }
}
#basic #history .grow .layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #basic #history .grow .layout {
    display: block;
  }
}
#basic #history .grow .layout .box {
  background-color: #fff;
  padding: 15px;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #basic #history .grow .layout .box {
    width: 100%;
    margin-bottom: 20px;
  }
}
#basic #history .grow .layout .box:nth-child(3n) {
  margin-right: 0;
}
#basic #history .grow .layout .box h4 {
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
  font-weight: bold;
  color: #7D4CA0;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #basic #history .grow .layout .box h4 {
    font-size: 2.6rem;
  }
}
#basic #history .grow .layout .box .image {
  text-align: center;
  height: 72px;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#basic #history .grow .layout .box .image img {
  margin: auto;
}
#basic #history .grow .layout .box p {
  color: #7D4CA0;
  font-weight: 400;
}
#basic #history .grow .more {
  text-align: center;
}
#basic #history .grow .more .btn {
  margin: auto;
  display: block;
  background-color: #7D4CA0;
  border-radius: 25px;
  color: #fff;
  line-height: 1;
  padding: 16px 30px 18px;
  max-width: 300px;
}
#basic #future h2 {
  background-color: #E4660F;
}
#basic #future .lead {
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
  text-align: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #basic #future .lead {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #future .lead {
    font-size: 5vw;
    margin-bottom: 30px;
  }
}
#basic #future .kaiketu {
  text-align: center;
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  #basic #future .kaiketu {
    margin-bottom: 50px;
  }
}
#basic #future .kaiketu span {
  display: inline-block;
  margin-bottom: 8px;
  background-color: #fff;
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
  line-height: 1;
  padding: 8px 12px 10px;
  color: #E4660F;
}
@media screen and (max-width: 767px) {
  #basic #future .kaiketu span {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #future .kaiketu span {
    font-size: 2rem;
    padding: 8px 5px 10px;
    line-height: 1.4;
  }
}
#basic #future .torikumi h3 {
  background-color: #E4660F;
  color: #fff;
  margin: auto;
  display: block;
  border-radius: 25px;
  line-height: 1;
  padding: 16px 30px 18px;
  text-align: center;
  margin-bottom: 50px;
}
#basic #future .torikumi .torikumi-row {
  position: relative;
  background-color: #fff;
  border-radius: 25px;
  padding: 68px 5%;
  margin-bottom: 70px;
}
@media screen and (max-width: 767px) {
  #basic #future .torikumi .torikumi-row {
    margin-bottom: 40px;
  }
}
#basic #future .torikumi .torikumi-row .num {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid #E4660F;
  background-color: #fff;
  color: #E4660F;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.2rem, 0.7870967742rem + 0.5376344086vw, 1.4rem);
  line-height: 1;
  top: -10px;
  left: 35px;
}
@media screen and (max-width: 767px) {
  #basic #future .torikumi .torikumi-row .num {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #future .torikumi .torikumi-row .num {
    width: 80px;
    height: 80px;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
  }
}
#basic #future .torikumi .torikumi-row .num span {
  display: block;
  font-size: clamp(3.6rem, 2.7741935484rem + 1.0752688172vw, 4rem);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #basic #future .torikumi .torikumi-row .num span {
    font-size: 4rem;
  }
}
#basic #future .torikumi .torikumi-row .text {
  max-width: 550px;
  width: 63%;
  margin: 0 auto 50px;
}
@media screen and (max-width: 767px) {
  #basic #future .torikumi .torikumi-row .text {
    width: 100%;
    margin-bottom: 30px;
  }
}
#basic #future .torikumi .torikumi-row .before-after {
  max-width: 800px;
  margin: auto;
}
#basic #future .torikumi .torikumi-row .before-after .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#basic #future .torikumi .torikumi-row .before-after .row .col {
  width: calc(50% - 34px);
  text-align: center;
  margin-bottom: 5px;
  padding: 2px 10px 4px;
}
@media screen and (max-width: 767px) {
  #basic #future .torikumi .torikumi-row .before-after .row .col {
    font-size: 1.2rem;
    line-height: 1.3;
    width: calc(50% - 20px);
  }
}
#basic #future .torikumi .torikumi-row .before-after .row .col1 {
  background-color: #FFD986;
  border-radius: 4px;
}
#basic #future .torikumi .torikumi-row .before-after .row .col2 {
  background-color: #E4660F;
  border-radius: 4px;
}
#basic #future .torikumi .torikumi-row .before-after .row .arrow {
  width: 68px;
  text-align: center;
  margin-bottom: 5px;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  #basic #future .torikumi .torikumi-row .before-after .row .arrow {
    width: 40px;
    padding: 0 10px;
  }
}
#basic #future .torikumi .torikumi-row .image {
  text-align: center;
}
#basic #future .saas {
  text-align: center;
}
#basic #future .saas .arrow {
  margin-bottom: 20px;
}
#basic #future .saas p {
  font-size: clamp(2rem, 1.1741935484rem + 1.0752688172vw, 2.4rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #basic #future .saas p {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 767px) {
  #basic #future .saas p {
    font-size: 1.5rem;
  }
}
#basic #future .saas p b {
  color: #E4660F;
}

#topmessage .name {
  position: absolute;
  right: 80px;
  bottom: 40px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  padding: 15px 40px;
}
@media screen and (max-width: 767px) {
  #topmessage .name {
    font-size: 1.4rem;
    line-height: 1.4;
    right: 3%;
    bottom: 60px;
  }
}
#topmessage .content {
  padding: 120px 3%;
}
@media screen and (max-width: 767px) {
  #topmessage .content {
    padding-bottom: 0;
  }
}
#topmessage .content .copy {
  color: #CC0033;
  font-size: clamp(2.8rem, 1.9741935484rem + 1.0752688172vw, 3.2rem);
  text-align: center;
  margin-bottom: 120px;
}
@media screen and (max-width: 767px) {
  #topmessage .content .copy {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  #topmessage .content .copy {
    font-size: 2rem;
    margin-bottom: 50px;
  }
}
#topmessage .content section {
  margin: 0 auto 90px;
  max-width: calc(716px + 6%);
}
@media screen and (max-width: 767px) {
  #topmessage .content section {
    margin-bottom: 45px;
  }
}
#topmessage .content section h2 {
  margin-bottom: 40px;
  color: #CC0033;
  font-weight: bold;
  font-size: clamp(2rem, 1.1741935484rem + 1.0752688172vw, 2.4rem);
}
@media screen and (max-width: 767px) {
  #topmessage .content section h2 {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 767px) {
  #topmessage .content section h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
}
#topmessage .content .mid-image {
  margin-bottom: 90px;
}
@media screen and (max-width: 767px) {
  #topmessage .content .mid-image {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 767px) {
  #topmessage .content p {
    font-size: 1.5rem;
  }
}

#philosophy .content {
  padding: 120px 0;
}
@media screen and (max-width: 767px) {
  #philosophy .content {
    padding: 120px 3% 0;
  }
}
#philosophy .content .greeting h2 {
  text-align: center;
  color: #CC0033;
  font-size: clamp(2rem, 1.1741935484rem + 1.0752688172vw, 2.4rem);
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #philosophy .content .greeting h2 {
    font-size: 2.4rem;
  }
}
#philosophy .content .greeting .copy {
  font-size: clamp(2.8rem, 1.9741935484rem + 1.0752688172vw, 3.2rem);
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  #philosophy .content .greeting .copy {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  #philosophy .content .greeting .copy {
    font-size: 2.2rem;
    margin-bottom: 30px;
  }
}
#philosophy .content .greeting .lead {
  max-width: 716px;
  margin: 0 auto 140px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #philosophy .content .greeting .lead {
    font-size: 1.5rem;
    margin-bottom: 50px;
    text-align: left;
  }
}
#philosophy .content .greeting .lead .name {
  font-size: 1.8rem;
  font-weight: bold;
}
#philosophy .content .main-content {
  background-color: #F5F5F5;
  padding-top: 120px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content {
    padding-top: 60px;
  }
}
#philosophy .content .main-content h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content h2 {
    margin-bottom: 30px;
  }
}
#philosophy .content .main-content h2 span {
  background-color: #CC0033;
  color: #fff;
  font-size: clamp(1.7rem, 1.0806451613rem + 0.8064516129vw, 2rem);
  line-height: 1;
  padding: 15px 40px;
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content h2 span {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content h2 span {
    font-size: 1.8rem;
  }
}
#philosophy .content .main-content .rinen {
  margin-bottom: 100px;
  font-size: clamp(2.8rem, 1.9741935484rem + 1.0752688172vw, 3.2rem);
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .rinen {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .rinen {
    margin-bottom: 50px;
    font-size: 1.8rem;
  }
}
#philosophy .content .main-content .kijun {
  padding: 0 5% 120px;
  max-width: 716px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun {
    padding-bottom: 0px;
  }
}
#philosophy .content .main-content .kijun .box-wrap {
  position: relative;
  top: -65px;
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun .box-wrap {
    top: -45px;
  }
}
#philosophy .content .main-content .kijun .box {
  width: 100%;
  border: 1px solid #CC0033;
  background-color: #fff;
  border-radius: 4px;
}
#philosophy .content .main-content .kijun .box1 {
  padding: 80px 0 60px;
  font-size: clamp(2.8rem, 1.9741935484rem + 1.0752688172vw, 3.2rem);
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun .box1 {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun .box1 {
    font-size: 1.8rem;
    padding: 50px 0 30px;
  }
}
#philosophy .content .main-content .kijun .box2 {
  padding: 16px 0;
  font-size: clamp(2.8rem, 1.9741935484rem + 1.0752688172vw, 3.2rem);
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun .box2 {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun .box2 {
    font-size: 2.2rem;
  }
}
#philosophy .content .main-content .kijun .box2 span {
  font-size: clamp(1.3rem, 0.8870967742rem + 0.5376344086vw, 1.5rem);
  display: block;
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun .box2 span {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun .box2 span {
    font-size: 1.2rem;
    padding: 0 8px;
  }
}
@media screen and (max-width: 767px) {
  #philosophy .content .main-content .kijun .box3 {
    font-size: 1.2rem;
    line-height: 1.3;
    padding: 8px;
  }
}
#philosophy .content .main-content .kijun .line {
  line-height: 0;
  padding: 0 10%;
}
#philosophy .content .main-content .kijun .box-layout {
  display: flex;
  gap: 10%;
  justify-content: space-between;
}
#philosophy .content .main-content .kijun .box-layout .col {
  width: 33.333%;
}
#philosophy .content .main-content .kijun .line2 {
  height: 19px;
  width: 1px;
  background-color: #CC0033;
  margin: auto;
}
#philosophy .content .message {
  background: url(/corporate/recruit/about/image/philosophy/bg.jpg) no-repeat center;
  background-size: cover;
  padding: 120px 0;
  font-size: clamp(1.7rem, 1.0806451613rem + 0.8064516129vw, 2rem);
  color: #fff;
}
@media screen and (max-width: 767px) {
  #philosophy .content .message {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  #philosophy .content .message {
    padding: 60px 5%;
    font-size: 1.6rem;
  }
}

#data .content {
  padding: 120px 0;
}
@media screen and (max-width: 767px) {
  #data .content {
    padding: 120px 3% 40px;
  }
}
#data .content .copy {
  color: #CC0033;
  font-size: clamp(1.7rem, 1.0806451613rem + 0.8064516129vw, 2rem);
  text-align: center;
  margin-bottom: 120px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #data .content .copy {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  #data .content .copy {
    font-size: 1.8rem;
    margin-bottom: 50px;
  }
}
#data .main-content .layout {
  display: flex;
  justify-content: center;
  gap: 10%;
}
@media screen and (max-width: 767px) {
  #data .main-content .layout {
    flex-wrap: wrap;
    gap: 0;
  }
}
#data .main-content .unit {
  font-size: clamp(1.4rem, 0.1612903226rem + 1.6129032258vw, 2rem);
}
#data .main-content section {
  background-color: #F5F5F5;
  padding: 70px 8%;
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  #data .main-content section {
    padding: 35px;
    margin-bottom: 40px;
  }
}
#data .main-content section h2 {
  text-align: center;
  margin-bottom: 50px;
}
#data .main-content section h2 span {
  display: inline-block;
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
  font-weight: bold;
  border-bottom: 7px solid #000;
}
@media screen and (max-width: 767px) {
  #data .main-content section h2 span {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 767px) {
  #data .main-content section h2 span {
    font-size: 1.8rem;
  }
}
#data .main-content section .label {
  font-size: clamp(1.9rem, 1.2806451613rem + 0.8064516129vw, 2.2rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section .label {
    font-size: 2.2rem;
  }
}
#data .main-content section .countup {
  line-height: 1;
}
#data .main-content section .update {
  text-align: right;
  font-size: clamp(1rem, 0.5870967742rem + 0.5376344086vw, 1.2rem);
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  #data .main-content section .update {
    font-size: 1.2rem;
  }
}
#data .main-content section .bar {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease-in;
  transition-delay: 0.3s;
  opacity: 1;
}
#data .main-content section .active.bar {
  clip-path: inset(0 0 0 0);
  animation: none;
}
#data .main-content section#sec01 .gender {
  text-align: center;
}
#data .main-content section#sec01 .gender .data {
  margin-bottom: 40px;
}
#data .main-content section#sec01 .gender .countup {
  font-size: clamp(6rem, -3.2903225806rem + 12.0967741935vw, 10.5rem);
}
#data .main-content section#sec01 .gender .man {
  color: #4A9ADE;
}
#data .main-content section#sec01 .gender .woman {
  color: #D83960;
}
#data .main-content section#sec02 {
  padding-bottom: 30px;
}
#data .main-content section#sec02 .number .countup {
  font-size: clamp(5rem, 2.1096774194rem + 3.7634408602vw, 6.4rem);
}
#data .main-content section#sec02 .col {
  text-align: center;
  width: 29%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec02 .col {
    width: 50%;
  }
}
#data .main-content section#sec02 .col .image {
  height: 110px;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec02 .col .image {
    height: 80px;
    margin-bottom: 0;
  }
}
#data .main-content section#sec02 .col1 .number {
  color: #D83960;
}
#data .main-content section#sec02 .col2 {
  width: 42%;
}
#data .main-content section#sec02 .col2 .number {
  color: #8FC106;
}
#data .main-content section#sec02 .col3 .number {
  color: #7D4CA0;
}
#data .main-content section#sec04 .no1 {
  justify-content: center;
  align-items: end;
  max-width: 730px;
  width: 80%;
  margin: 0 auto 70px;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .no1 {
    flex-wrap: wrap;
    max-width: none;
    width: 100%;
    gap: 0;
    margin-bottom: 20px;
  }
}
#data .main-content section#sec04 .no1 .no-row {
  width: 130px;
  display: flex;
  align-items: flex-end;
  height: 100%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .no1 .no-row {
    width: 50%;
    justify-content: center;
  }
}
#data .main-content section#sec04 .no1 .no-row img {
  vertical-align: -12px;
}
#data .main-content section#sec04 .no1 .no-row .no {
  margin-left: 10px;
}
#data .main-content section#sec04 .no1 .no-row .in {
  display: block;
  font-size: clamp(4.6rem, 3.7741935484rem + 1.0752688172vw, 5rem);
  border-bottom: 4px solid #000;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .no1 .no-row .in {
    font-size: 5rem;
  }
}
#data .main-content section#sec04 .no1 .no-row .i {
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .no1 .no-row .i {
    font-size: 2.6rem;
  }
}
#data .main-content section#sec04 .no1 .font {
  font-size: clamp(9rem, 4.8709677419rem + 5.376344086vw, 11rem);
  width: 120px;
  font-weight: bold;
  color: #CC0033;
  line-height: 1.1;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .no1 .font {
    width: 50%;
    text-align: center;
  }
}
#data .main-content section#sec04 .no1 p {
  flex: 1;
  font-size: clamp(1.3rem, 0.8870967742rem + 0.5376344086vw, 1.5rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .no1 p {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .no1 p {
    margin-top: 20px;
  }
}
#data .main-content section#sec04 .low {
  gap: 7%;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .low {
    margin-bottom: 30px;
  }
}
#data .main-content section#sec04 .low .col {
  width: 33.333%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .low .col {
    width: 100%;
    margin-bottom: 20px;
  }
}
#data .main-content section#sec04 .low .col .row {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}
#data .main-content section#sec04 .low .col .no {
  margin-left: 10px;
  line-height: 1.1;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .low .col .no {
    padding-bottom: 8px;
  }
}
#data .main-content section#sec04 .low .col .in {
  font-size: clamp(2.6rem, 1.7741935484rem + 1.0752688172vw, 3rem);
  border-bottom: 4px solid #000;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .low .col .in {
    font-size: 3rem;
  }
}
#data .main-content section#sec04 .low .col .i {
  font-size: clamp(1.5rem, 0.8806451613rem + 0.8064516129vw, 1.8rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .low .col .i {
    font-size: 1.8rem;
  }
}
#data .main-content section#sec04 .low .col .font {
  text-align: center;
  font-weight: bold;
  line-height: 1;
  flex: 1;
  font-size: clamp(5rem, 0.8709677419rem + 5.376344086vw, 7rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .low .col .font {
    text-align: left;
    padding-left: 20px;
  }
}
#data .main-content section#sec04 .low .col p {
  line-height: 2;
  font-size: clamp(1.3rem, 0.8870967742rem + 0.5376344086vw, 1.5rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .low .col p {
    font-size: 1.5rem;
  }
}
#data .main-content section#sec04 .low .no2 .font {
  color: #E4660F;
}
#data .main-content section#sec04 .low .no3 .font {
  color: #4A9ADE;
}
#data .main-content section#sec04 .low .no4 .font {
  color: #D83960;
}
#data .main-content section#sec04 .other h3 {
  background-color: #7D4CA0;
  border-radius: 20px;
  line-height: 1;
  text-align: center;
  color: #FFFFFF;
  padding: 10px 0;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .other h3 {
    margin-bottom: 20px;
  }
}
#data .main-content section#sec04 .other .layout {
  gap: 7%;
}
#data .main-content section#sec04 .other .layout .col {
  width: 33.333%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .other .layout .col {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
  }
}
#data .main-content section#sec04 .other .layout .col .font {
  text-align: center;
  color: #7D4CA0;
  font-weight: bold;
  font-size: clamp(5rem, 0.8709677419rem + 5.376344086vw, 7rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .other .layout .col .font {
    width: 30%;
    line-height: 1;
  }
}
#data .main-content section#sec04 .other .layout .col p {
  font-size: clamp(1.3rem, 0.8870967742rem + 0.5376344086vw, 1.5rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .other .layout .col p {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec04 .other .layout .col p {
    width: 70%;
  }
}
#data .main-content section#sec05 {
  background: #F5F5F5 url(/corporate/recruit/about/image/data/sec05-map.svg) no-repeat center center;
  background-size: auto 90%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 {
    background-position: top 5% center;
    background-size: 90% auto;
  }
}
#data .main-content section#sec05 h2 {
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 h2 {
    margin-bottom: 50px;
  }
}
#data .main-content section#sec05 .layout {
  gap: 1%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 .layout {
    display: block;
  }
}
#data .main-content section#sec05 .layout .col {
  width: 33.333%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 .layout .col {
    width: 100%;
  }
}
#data .main-content section#sec05 .layout .col.col1 .no {
  margin-left: 10px;
  line-height: 1.1;
  margin-bottom: 45px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 .layout .col.col1 .no {
    margin-bottom: 20px;
  }
}
#data .main-content section#sec05 .layout .col.col1 .in {
  font-size: clamp(2.6rem, 1.7741935484rem + 1.0752688172vw, 3rem);
  border-bottom: 4px solid #000;
  margin-right: 25px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 .layout .col.col1 .in {
    font-size: 3rem;
  }
}
#data .main-content section#sec05 .layout .col.col1 .i {
  font-size: clamp(1.5rem, 0.8806451613rem + 0.8064516129vw, 1.8rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 .layout .col.col1 .i {
    font-size: 1.8rem;
  }
}
#data .main-content section#sec05 .layout .col.col1 .font {
  font-size: clamp(4.6rem, 3.7741935484rem + 1.0752688172vw, 5rem);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 .layout .col.col1 .font {
    font-size: 5rem;
  }
}
#data .main-content section#sec05 .layout .col.col1 .no1 .font {
  color: #D83960;
}
#data .main-content section#sec05 .layout .col.col1 .no2 .font {
  color: #E4660F;
}
#data .main-content section#sec05 .layout .col.col1 .no3 .font {
  color: #7D4CA0;
}
#data .main-content section#sec05 .layout .col.kai .no {
  margin-left: 10px;
  line-height: 1.1;
  margin-bottom: 25px;
}
#data .main-content section#sec05 .layout .col.kai .i {
  display: inline-block;
  font-size: clamp(1.5rem, 0.8806451613rem + 0.8064516129vw, 1.8rem);
  border-bottom: 4px solid #000;
  margin-right: 20px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 .layout .col.kai .i {
    font-size: 1.8rem;
  }
}
#data .main-content section#sec05 .layout .col.kai .font {
  font-size: clamp(1.7rem, 1.0806451613rem + 0.8064516129vw, 2rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec05 .layout .col.kai .font {
    font-size: 2rem;
  }
}
#data .main-content section#sec07 .bar {
  text-align: center;
}
#data .main-content section#sec08 {
  padding-bottom: 20px;
}
#data .main-content section#sec08 .layout {
  position: relative;
  gap: 0;
  margin-bottom: 80px;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec08 .layout {
    margin-bottom: 0;
  }
}
#data .main-content section#sec08 .layout .col {
  width: 40%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec08 .layout .col {
    width: 100%;
    margin-bottom: 20px;
  }
}
#data .main-content section#sec08 .layout .col2 {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec08 .layout .col2 {
    position: static;
    width: 100%;
    transform: none;
  }
}
#data .main-content section#sec08 .home {
  position: relative;
  text-align: right;
  left: 12%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec08 .home {
    text-align: left;
    left: 0;
    display: flex;
    flex-direction: column-reverse;
  }
}
#data .main-content section#sec08 .home img {
  vertical-align: bottom;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec08 .home img {
    margin-top: 10px;
    width: 80px;
  }
}
#data .main-content section#sec08 .home p {
  margin-left: 10px;
  position: relative;
  top: -35px;
  display: inline-block;
  color: #fff;
  background-color: #646464;
  padding: 20px 45px;
  border-radius: 60px 60px 60px 0;
  text-align: left;
  font-size: clamp(1.3rem, 0.8870967742rem + 0.5376344086vw, 1.5rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec08 .home p {
    position: static;
  }
}
#data .main-content section#sec10 {
  padding: 70px 5% 20px;
}
#data .main-content section#sec10 .layout {
  flex-wrap: wrap;
  gap: 5%;
  justify-content: center;
  max-width: 800px;
  margin: auto;
}
#data .main-content section#sec10 .layout .col {
  position: relative;
  width: 47%;
  position: relative;
  background-color: #fff;
  border-radius: 86px;
  text-align: center;
  padding: 26px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec10 .layout .col {
    width: 100%;
    padding: 16px;
    margin-bottom: 20px;
  }
}
#data .main-content section#sec10 .layout .col label {
  font-size: clamp(1.4rem, 0.5741935484rem + 1.0752688172vw, 1.8rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec10 .layout .col label {
    font-size: 1.6rem;
  }
}
#data .main-content section#sec10 .layout .col .time {
  font-size: clamp(2.2rem, 0.135483871rem + 2.688172043vw, 3.2rem);
  font-weight: bold;
}
#data .main-content section#sec10 .layout .col::after {
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 86px;
  z-index: -1;
}
#data .main-content section#sec10 .layout .col.col1 .time {
  color: #D83960;
}
#data .main-content section#sec10 .layout .col.col1::after {
  background-color: #D83960;
}
#data .main-content section#sec10 .layout .col.col2 .time {
  color: #E4660F;
}
#data .main-content section#sec10 .layout .col.col2::after {
  background-color: #E4660F;
}
#data .main-content section#sec10 .layout .col.col3 .time {
  color: #7D4CA0;
}
#data .main-content section#sec10 .layout .col.col3::after {
  background-color: #7D4CA0;
}
#data .main-content section#sec10 .layout .col.col4 .time {
  color: #8FC106;
}
#data .main-content section#sec10 .layout .col.col4::after {
  background-color: #8FC106;
}
#data .main-content section#sec10 .layout .col.col5 .time {
  color: #4A9ADE;
}
#data .main-content section#sec10 .layout .col.col5::after {
  background-color: #4A9ADE;
}
#data .main-content section#sec10 .point {
  display: flex;
  margin-top: 50px;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec10 .point {
    flex-direction: column;
    margin-top: 0;
  }
}
#data .main-content section#sec10 .point .image {
  width: 14%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec10 .point .image {
    margin: 10px;
  }
}
#data .main-content section#sec10 .point p {
  margin-left: 10px;
  position: relative;
  top: -35px;
  display: inline-block;
  color: #fff;
  background-color: #646464;
  padding: 20px 45px;
  text-align: left;
  font-size: clamp(1.3rem, 0.8870967742rem + 0.5376344086vw, 1.5rem);
}
#data .main-content section#sec10 .point p.left {
  border-radius: 60px 60px 0 60px;
  width: 43%;
  margin-top: 40px;
}
#data .main-content section#sec10 .point p.right {
  border-radius: 60px 60px 60px 0;
  width: 37%;
  padding: 20px 50px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec10 .point p.right {
    border-radius: 0 60px 60px 60px;
    padding: 20px 45px;
  }
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec10 .point p {
    width: 100% !important;
    top: 0;
  }
}
#data .main-content section#sec12 {
  margin-bottom: 0;
}
#data .main-content section#sec12 .layout {
  gap: 1%;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout {
    display: block;
  }
}
#data .main-content section#sec12 .layout .col {
  width: 30%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout .col {
    width: 100%;
    margin-bottom: 0;
  }
}
#data .main-content section#sec12 .layout .col.col1 {
  width: 40%;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout .col.col1 {
    width: 100%;
  }
}
#data .main-content section#sec12 .layout .col.col1 .no {
  margin-left: 10px;
  line-height: 1.1;
  margin-bottom: 45px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout .col.col1 .no {
    margin-bottom: 20px;
  }
}
#data .main-content section#sec12 .layout .col.col1 .in {
  font-size: clamp(2.6rem, 1.7741935484rem + 1.0752688172vw, 3rem);
  border-bottom: 4px solid #000;
  margin-right: 25px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout .col.col1 .in {
    font-size: 3rem;
  }
}
#data .main-content section#sec12 .layout .col.col1 .i {
  font-size: clamp(1.5rem, 0.8806451613rem + 0.8064516129vw, 1.8rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout .col.col1 .i {
    font-size: 1.8rem;
  }
}
#data .main-content section#sec12 .layout .col.col1 .font {
  font-size: clamp(4.6rem, 3.7741935484rem + 1.0752688172vw, 5rem);
  font-size: clamp(4rem, 1.935483871rem + 2.688172043vw, 5rem);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout .col.col1 .font {
    font-size: 5rem;
  }
}
#data .main-content section#sec12 .layout .col.col1 .no1 .font {
  color: #D83960;
}
#data .main-content section#sec12 .layout .col.col1 .no2 .font {
  color: #E4660F;
}
#data .main-content section#sec12 .layout .col.col1 .no3 .font {
  color: #7D4CA0;
}
#data .main-content section#sec12 .layout .col.kai .no {
  margin-left: 10px;
  line-height: 1.1;
  margin-bottom: 25px;
}
#data .main-content section#sec12 .layout .col.kai .i {
  display: inline-block;
  font-size: clamp(1.5rem, 0.8806451613rem + 0.8064516129vw, 1.8rem);
  border-bottom: 4px solid #000;
  margin-right: 20px;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout .col.kai .i {
    font-size: 1.8rem;
  }
}
#data .main-content section#sec12 .layout .col.kai .font {
  font-size: clamp(1.7rem, 1.0806451613rem + 0.8064516129vw, 2rem);
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .layout .col.kai .font {
    font-size: 2rem;
  }
}
#data .main-content section#sec12 .other h3 {
  background-color: #4A9ADE;
  border-radius: 20px;
  line-height: 1;
  text-align: center;
  color: #FFFFFF;
  padding: 10px 0;
  margin-bottom: 30px;
}
#data .main-content section#sec12 .other .layout {
  gap: 7%;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 560px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  #data .main-content section#sec12 .other .layout {
    display: flex;
  }
}
#data .main-content section#sec12 .other .layout li {
  color: #4A9ADE;
  font-size: clamp(2.6rem, 1.3612903226rem + 1.6129032258vw, 3.2rem);
}

#vision {
  padding: 100px 0;
}
#vision #visual {
  padding: 30px 3% 100px;
}
@media screen and (max-width: 767px) {
  #vision #visual {
    padding-bottom: 40px;
  }
}
#vision #visual::after {
  content: none;
}
#vision #visual .visual-inner {
  position: relative;
  margin: auto;
}
@media screen and (max-width: 767px) {
  #vision #visual .visual-inner {
    padding: 0;
  }
}
#vision #visual .visual-inner .image {
  position: relative;
  margin: auto;
  padding: 0 5%;
}
@media screen and (max-width: 767px) {
  #vision #visual .visual-inner .image {
    padding: 0;
  }
}
#vision #visual .title {
  position: absolute;
  bottom: -80px;
  left: 0%;
}
#vision #visual .title h1 {
  display: inline-block;
  color: #fff;
  background-color: #CC0033;
  font-size: clamp(3rem, 2.1741935484rem + 1.0752688172vw, 3.4rem);
  line-height: 1;
  padding: 10px 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #vision #visual .title h1 {
    font-size: 3.4rem;
  }
}
@media screen and (max-width: 767px) {
  #vision #visual .title h1 {
    font-size: 2.3rem;
    margin-bottom: 0;
  }
}
#vision #visual .title p {
  font-size: clamp(1.7rem, 1.0806451613rem + 0.8064516129vw, 2rem);
  color: #CC0033;
}
@media screen and (max-width: 767px) {
  #vision #visual .title p {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  #vision #visual .title p {
    font-size: 1.6rem;
    padding-left: 20px;
  }
}
#vision #visual .subtitle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#vision .content {
  padding-top: 40px;
}
@media screen and (max-width: 767px) {
  #vision .content {
    padding-top: 90px;
  }
}
#vision .content #first {
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  #vision .content #first {
    margin-bottom: 50px;
  }
}
#vision .content #first .title {
  position: relative;
  text-align: center;
  color: #CC0033;
  margin-bottom: 90px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #vision .content #first .title {
    margin-bottom: 60px;
  }
}
#vision .content #first .title::after {
  content: "";
  display: block;
  position: absolute;
  height: 55px;
  width: 1px;
  background-color: #CC0033;
  left: 50%;
  bottom: -65px;
}
@media screen and (max-width: 767px) {
  #vision .content #first .title::after {
    height: 40px;
    bottom: -40px;
  }
}
#vision .content #first .copy {
  text-align: center;
  font-size: clamp(2.2rem, 1.3741935484rem + 1.0752688172vw, 2.6rem);
  font-weight: 500;
  color: #CC0033;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  #vision .content #first .copy {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 767px) {
  #vision .content #first .copy {
    font-size: 5vw;
  }
}
#vision .content #first .lead {
  max-width: 700px;
  margin: 80px auto 80px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #vision .content #first .lead {
    margin-bottom: 0px;
  }
}
#vision .content #first .lead .note {
  display: block;
  font-size: clamp(1.2rem, 0.7870967742rem + 0.5376344086vw, 1.4rem);
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  #vision .content #first .lead .note {
    font-size: 1.4rem;
  }
}
#vision .content #first .point h1 {
  text-align: center;
  position: relative;
  transform: translateY(50%);
}
#vision .content #first .point h1 span {
  display: inline-block;
  background-color: #CC0033;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  line-height: 1.5;
  padding: 15px 50px;
}
@media screen and (max-width: 767px) {
  #vision .content #first .point h1 span {
    padding: 15px;
  }
}
#vision .content #first .point h1 span b {
  font-size: clamp(1.6rem, 0.9806451613rem + 0.8064516129vw, 1.9rem);
}
@media screen and (max-width: 767px) {
  #vision .content #first .point h1 span b {
    font-size: 1.9rem;
  }
}
#vision .content #first .point .layout {
  display: flex;
  background-color: #F9F9F9;
  border-radius: 38px;
  padding: 50px 0 50px;
  max-width: 1048px;
  margin: auto;
}
#vision .content #first .point .layout .box {
  width: 33.333%;
  text-align: center;
  padding: 0 5%;
}
#vision .content #first .point .layout .box:nth-child(2) {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
#vision .content #first .point .layout .box .num {
  color: #CC0033;
  font-size: clamp(2rem, 1.1741935484rem + 1.0752688172vw, 2.4rem);
}
@media screen and (max-width: 767px) {
  #vision .content #first .point .layout .box .num {
    font-size: 2.4rem;
  }
}
#vision .content #first .point .layout .box p {
  max-width: 262px;
  margin: auto;
}
#vision .content #no1 {
  padding: 100px 0 50px;
}
@media screen and (max-width: 767px) {
  #vision .content #no1 {
    padding: 50px 0 25px;
  }
}
#vision .content #position {
  padding: 50px 0 100px;
}
@media screen and (max-width: 767px) {
  #vision .content #position {
    padding: 25px 0 50px;
  }
}
#vision .content #no1,
#vision .content #position {
  background-color: #F9F9F9;
}
#vision .content #no1 h2,
#vision .content #position h2 {
  text-align: center;
  margin-bottom: 30px;
}
#vision .content #no1 h2 span,
#vision .content #position h2 span {
  background-color: #CC0033;
  color: #fff;
  font-size: clamp(1.9rem, 1.2806451613rem + 0.8064516129vw, 2.2rem);
  padding: 8px 30px;
  border-radius: 24px;
}
@media screen and (max-width: 767px) {
  #vision .content #no1 h2 span,
  #vision .content #position h2 span {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 767px) {
  #vision .content #no1 h2 span,
  #vision .content #position h2 span {
    display: block;
    padding: 0;
    line-height: 1.5;
    padding: 12px;
    font-size: 2rem;
  }
}
#vision .content #no1 .copy,
#vision .content #position .copy {
  color: #CC0033;
  text-align: center;
  font-size: clamp(1.5rem, 0.8806451613rem + 0.8064516129vw, 1.8rem);
  font-weight: 500;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  #vision .content #no1 .copy,
  #vision .content #position .copy {
    font-size: 1.8rem;
  }
}
#vision .content #no1 .lead,
#vision .content #position .lead {
  max-width: 700px;
  margin: 0 auto 2rem;
  margin-bottom: 80px;
}
#vision .content #no1 .zu,
#vision .content #position .zu {
  text-align: center;
  background-color: #fff;
  border-radius: 25px;
  padding: 70px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #vision .content #no1 .zu,
  #vision .content #position .zu {
    padding: 30px 4%;
  }
}
#vision .content #no1 .zu img,
#vision .content #position .zu img {
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  #vision .content #no1 .zu img,
  #vision .content #position .zu img {
    width: 600px;
    max-width: none;
  }
}
#vision .content #challenge {
  background-color: #F9F9F9;
  padding: 80px 5% 100px;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge {
    padding: 50px 4%;
  }
}
#vision .content #challenge h2 {
  text-align: center;
  font-size: clamp(1.9rem, 1.2806451613rem + 0.8064516129vw, 2.2rem);
  font-weight: 500;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge h2 {
    font-size: 2.2rem;
  }
}
#vision .content #challenge .block {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 60px;
}
#vision .content #challenge .block .title {
  background-color: #E4660F;
  display: flex;
  cursor: pointer;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .title {
    display: block;
  }
}
#vision .content #challenge .block .title:hover {
  opacity: 0.8;
}
#vision .content #challenge .block .title.active .oc span::after {
  transform: translate(-50%, -50%) rotate(-90deg);
}
#vision .content #challenge .block .title .text {
  flex: 1;
  padding: 30px 30px 30px 5%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#vision .content #challenge .block .title .text h3 {
  font-size: clamp(1.7rem, 1.0806451613rem + 0.8064516129vw, 2rem);
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .title .text h3 {
    font-size: 2rem;
  }
}
#vision .content #challenge .block .title .text .prof {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}
#vision .content #challenge .block .title .text .prof .name {
  font-size: clamp(1.4rem, 0.7806451613rem + 0.8064516129vw, 1.7rem);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .title .text .prof .name {
    font-size: 1.7rem;
  }
}
#vision .content #challenge .block .title .text .prof .pos {
  font-size: clamp(1.1rem, 0.6870967742rem + 0.5376344086vw, 1.3rem);
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .title .text .prof .pos {
    font-size: 1.3rem;
  }
}
#vision .content #challenge .block .title .text .note {
  text-align: right;
  font-size: 1.2rem;
  padding-top: 0.5rem;
}
#vision .content #challenge .block .title .image {
  width: 288px;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .title .image {
    width: 100%;
  }
}
#vision .content #challenge .block .title .oc {
  width: 114px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .title .oc {
    width: 100%;
    padding: 20px;
  }
}
#vision .content #challenge .block .title .oc span {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
}
#vision .content #challenge .block .title .oc span::before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: #E4660F;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#vision .content #challenge .block .title .oc span::after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 16px;
  background-color: #E4660F;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#vision .content #challenge .block .content {
  display: none;
  padding: 60px 5%;
  border: 2px solid #E4660F;
  border-radius: 0 0 10px 10px;
  border-top: none;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .content {
    padding: 30px 5% 0;
  }
}
#vision .content #challenge .block .content .layout {
  display: flex;
  gap: 7%;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .content .layout {
    display: block;
  }
}
#vision .content #challenge .block .content .layout .col {
  width: 50%;
}
@media screen and (max-width: 767px) {
  #vision .content #challenge .block .content .layout .col {
    width: 100%;
    margin-bottom: 40px;
  }
}
#vision .content #challenge .block .content .layout .col h3 {
  display: flex;
  color: #E4660F;
  margin-bottom: 20px;
}
#vision .content #challenge .block .content .layout .col h3 .en-b {
  font-size: 3rem;
  width: 35px;
  line-height: 1;
}
#vision .content #challenge .block .content .layout .col h3 .jp {
  flex: 1;
}
#vision .content #challenge .block .content .layout .col p {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}
#vision .content #challenge .block .content .layout.rev {
  flex-direction: row-reverse;
  margin-bottom: 0;
}
#vision .content #challenge .block.block2 .title {
  background-color: #4A9ADE;
}
#vision .content #challenge .block.block2 .title .oc span::before {
  background-color: #4A9ADE;
}
#vision .content #challenge .block.block2 .title .oc span::after {
  background-color: #4A9ADE;
}
#vision .content #challenge .block.block2 .content {
  border-color: #4A9ADE;
}
#vision .content #challenge .block.block2 .content .layout .col h3 {
  color: #4A9ADE;
}
#vision .content #challenge .block.block3 .title {
  background-color: #7D4CA0;
}
#vision .content #challenge .block.block3 .title .oc span::before {
  background-color: #7D4CA0;
}
#vision .content #challenge .block.block3 .title .oc span::after {
  background-color: #7D4CA0;
}
#vision .content #challenge .block.block3 .content {
  border-color: #7D4CA0;
}
#vision .content #challenge .block.block3 .content .layout .col h3 {
  color: #7D4CA0;
}
#vision .content #challenge .block.block4 .title {
  background-color: #8FC106;
}
#vision .content #challenge .block.block4 .title .oc span::before {
  background-color: #8FC106;
}
#vision .content #challenge .block.block4 .title .oc span::after {
  background-color: #8FC106;
}
#vision .content #challenge .block.block4 .title .text {
  padding-bottom: 10px;
}
#vision .content #challenge .block.block4 .content {
  border-color: #8FC106;
}
#vision .content #challenge .block.block4 .content .layout .col h3 {
  color: #8FC106;
}

#manga {
  background-color: #F5F5F5;
}
#manga .inner {
  text-align: center;
  padding: 50px 0;
}