#about {
  background-color: #F7F7F7;
  padding-bottom: 100px;
}
#about #visual {
  text-align: center;
  padding: 100px;
}
@media screen and (max-width: 767px) {
  #about #visual {
    padding: 50px 20px;
  }
}
#about #visual h1 {
  font-size: clamp(2.8rem, 2.176rem + 0.8vw, 3.2rem);
  font-weight: 500;
  color: #005587;
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  #about #visual h1 {
    margin-bottom: 40px;
  }
}
#about #visual .en {
  font-size: clamp(1.8rem, 1.176rem + 0.8vw, 2.2rem);
  font-weight: 500;
}
#about #first {
  margin-bottom: 80px;
}
#about #first .hero {
  border-radius: 500px;
  padding: 90px;
  margin-bottom: 90px;
  background: linear-gradient(180deg, #008F86 0%, #00BFB3 100%);
}
@media screen and (max-width: 767px) {
  #about #first .hero {
    padding: 50px 20px;
    margin-bottom: 50px;
    border-radius: 80px;
  }
}
#about #first .hero .hero-inner {
  margin: auto;
  color: #fff;
}
#about #first .hero .hero-inner .about {
  margin-bottom: 40px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #about #first .hero .hero-inner .about {
    margin-bottom: 20px;
  }
}
#about #first .hero .hero-inner h2 {
  font-size: clamp(2.6rem, 1.976rem + 0.8vw, 3rem);
  font-weight: bold;
  margin-bottom: 70px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #about #first .hero .hero-inner h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }
}
#about #first .hero .hero-inner p {
  text-align: left;
  max-width: 768px;
  margin: auto;
}
#about #first .hero.hero2 {
  background: #fff;
}
#about #first .hero.hero2 .hero-inner {
  color: #2B3A42;
}
@media screen and (max-width: 767px) {
  #about #first .hero.hero2 h2 {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }
}
#about #first .image-zu {
  max-width: 990px;
  margin: auto;
}

#relation {
  text-align: center;
}
#relation a {
  display: block;
  margin: auto;
  max-width: 800px;
  font-size: 1.8rem;
  text-align: center;
  font-weight: 500;
  background-color: #00BFB3;
  border-radius: 100px;
  padding: 50px;
  color: #fff;
  transition: all 0.2s ease;
}
#relation a[target=_blank]::after {
  content: url(/assets/image/blank-w.svg);
  padding-left: 10px;
}
@media screen and (max-width: 767px) {
  #relation a {
    font-size: 1.6rem;
    padding: 30px 0;
  }
}
#relation a:hover {
  background-color: #00968c;
}

#about.mission #visual {
  padding: 0;
  position: relative;
}
#about.mission #visual .inner {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 8vw;
  padding-top: 3vw;
  width: 100%;
  height: 100%;
}
#about.mission #visual .image {
  line-height: 0;
}
#about.mission #visual h1 {
  text-align: left;
  margin-bottom: 2rem;
  font-size: clamp(2rem, 0.256rem + 2.3vw, 3.2rem);
}
@media screen and (max-width: 767px) {
  #about.mission #visual h1 {
    padding-top: 3%;
  }
}
#about.mission #visual .lead {
  font-size: 1.6rem;
  color: #005587;
  text-align: left;
}
@media screen and (max-width: 767px) {
  #about.mission #visual .lead {
    text-align: center;
    padding: 5%;
    font-size: 1.6rem;
  }
}
#about.mission #first {
  margin-bottom: 0;
}
#about.mission #first .lead {
  font-size: 1.6rem;
  padding-top: 50px;
  text-align: center;
}
#about.mission #first .hero {
  background: none;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  #about.mission #first .hero {
    padding-top: 2rem;
  }
}
#about.mission #first .hero h2 {
  margin-bottom: 10px;
  color: #005587;
}
@media screen and (max-width: 767px) {
  #about.mission #first .hero h2 {
    font-size: 2rem;
  }
}
#about.mission #first h3 {
  text-align: center;
  margin-bottom: 20px;
}
#about.mission #first .layout {
  flex-wrap: wrap;
  max-width: 876px;
  width: 90%;
  margin: auto;
}
@media screen and (max-width: 767px) {
  #about.mission #first .layout {
    width: 100%;
  }
}
#about.mission #first .layout li {
  width: 48%;
  background-color: #fff;
  border-radius: 100px;
  text-align: center;
  padding: 10px 20px;
  color: #2B3A42;
  font-weight: 500;
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  #about.mission #first .layout li {
    width: 100%;
    margin-bottom: 0;
  }
}
#about.mission #first .layout li small {
  font-size: clamp(1.2rem, 0.888rem + 0.4vw, 1.4rem);
}
#about.mission .bg {
  background: url(/assets/image/interview-bg.png) no-repeat right top 50%;
}
#about.mission #sec1 {
  text-align: center;
  color: #005587;
}
#about.mission #sec1 h2 {
  margin-bottom: 20px;
  font-size: clamp(2.6rem, 1.664rem + 1.2vw, 3.2rem);
  margin-bottom: 80px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #about.mission #sec1 h2 {
    margin-bottom: 40px;
    font-size: 2.2rem;
  }
}
#about.mission #sec1 .lead {
  font-size: clamp(2rem, 0.752rem + 1.6vw, 2.8rem);
  font-weight: bold;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  #about.mission #sec1 .lead {
    margin-bottom: 30px;
    font-size: 1.8rem;
  }
}
#about.mission #sec1 .about-agent {
  margin: 100px 0;
}
@media screen and (max-width: 767px) {
  #about.mission #sec1 .about-agent {
    margin: 50px 0;
  }
}
#about.mission #sec1 .about-agent h3 {
  color: #00A3E0;
  margin-bottom: 40px;
  font-size: clamp(1.6rem, 0.664rem + 1.2vw, 2.2rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #about.mission #sec1 .about-agent h3 {
    margin-bottom: 20px;
  }
}
#about.mission #sec1 .about-agent p {
  max-width: 800px;
  margin: auto;
  font-size: clamp(1.6rem, 0.976rem + 0.8vw, 2rem);
  line-height: 1.8;
}
#about.mission #sec1 .card p {
  font-size: clamp(1.8rem, 1.176rem + 0.8vw, 2.2rem);
  font-weight: 500;
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  #about.mission #sec1 .card p {
    margin-bottom: 40px;
  }
}