#company-info h2 span,
#contact h2 span,
#profile h2 span {
  font-size: 6rem;
}

#company-info span.scroll-in{
  padding-bottom: 10px;
}

/* HELLO */
#hello {
  background: var(--black);
  height: 100vh;
  position: relative;
}
.hello-container {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
}
.hello-container .about {
  display: block;
  text-align: left;
  padding: 0 1.1rem 1rem;
  font-size: 1.7rem;
  color: var(--white);
}
.hello-container .mask {
  color: transparent;
  -webkit-background-clip: text;
  background-image: url(../images/about-kv-bg.png);
  background-size: auto;
  animation: loop 2.5s linear infinite alternate;
  background-position: right 15% top 40%;
}
@keyframes loop {
  100% {
    background-position: right 70% top 60%;
  }
}
.hello-container .title {
  font-size: 20.3rem;
}
.hello-container .sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 1.7rem;
  padding: 0 0.6rem 0 1.1rem;
}
.hello-container .txt {
  margin-top: 5.6rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #fff;
  padding-left: 1rem;
}
.hello-container .txt p {
  opacity: 0.671;
  mix-blend-mode: difference;
}

/* profile */
.profile-title {
  padding: 0 14rem 7rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.profile-container .profile-content:first-child {
  padding: 0;
}

.profile-content {
  padding: 11rem 0 0;
}
.profile-container .profile-content:nth-child(2n) {
  background-color: #eeeeee;
}
.profile-content .img {
  background-color: #b0c0c5;
  position: relative;
}
.profile-content .profile-name {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin: 0 auto;
  padding: 0 4rem;
  max-width: 1400px;
}
.profile-content .profile-name .name span {
  font-size: 10.8rem;
  color: rgba(255, 255, 255, 1);
  mix-blend-mode: difference;
}
.profile-content .profile-name.-na .name:nth-child(1),
.profile-content .profile-name.-ak .name:nth-child(2),
.profile-content .profile-name.-ko .name:nth-child(2),
.profile-content .profile-name.-ma .name:nth-child(2) {
  text-align: right;
}

.profile-content .profile-name.-na .name:nth-child(2),
.profile-content .profile-name.-ak .name:nth-child(1),
.profile-content .profile-name.-ko .name:nth-child(1),
.profile-content .profile-name.-ma .name:nth-child(1) {
  text-align: left;
}

.profile-content .txt {
  display: flex;
  padding: 8rem 14rem;
  justify-content: flex-start;
  max-width: 1400px;
  margin: auto;
}
.profile-container .txt h3 {
  font-size: 3rem;
  width: 40%;
}
.profile-container .txt span {
  display: block;
  font-size: 1.8rem;
  margin: 1.2rem 0 1.6rem 0;
}
.profile-container .sns {
  display: none;
}
.profile-container .sns a:first-child {
  margin-right: 2.4rem;
}
.profile-container .txt img {
  width: 20px;
}
.profile-container .txt p {
  width: 60%;
  font-size: 1.6rem;
  line-height: 36px;
  letter-spacing: -0.1px;
}

/* circle */
section.circle-wrapper {
  background-color: var(--black);
}
.circle-wrapper .sub-title {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 6rem;
  color: #fff;
  padding-block: 0;
}
.circle-wrapper .sub-title span {
  font-size: 6rem;
}
.about-circle {
  height: 100vh;
  min-height: 980px;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}
.circle-container {
  position: relative;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}
.about-circle .circle-big {
  max-width: 453px;
  max-height: 453px;
  display: flex;
  place-items: center;
  margin: auto;
}
.circle-content .top {
  position: absolute;
  left: 50%;
  top: 0;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 100%;
}
.circle-content .left {
  position: absolute;
  left: 32%;
  top: 0%;
  bottom: 10%;
  text-align: center;
  transform: translate(-50%, 50%);
  width: 100%;
}
.circle-content .right {
  position: absolute;
  right: 32%;
  top: 0%;
  bottom: 10%;
  text-align: center;
  transform: translate(50%, 50%);
  width: 100%;
}

.circle-content .circle .text {
  display: flex;
  place-items: center;
  margin-bottom: 2rem;
  align-items: center;
  justify-content: center;
}
.circle-content .circle.-vi .text {
  margin-right: 5rem;
  position: relative;
  top: -8rem;
  height: 135px;
}
.circle-content .circle.-va .text {
  margin-left: 24rem;
  position: relative;
  top: -8rem;
  height: 135px;
}
.circle-content .circle.-va img,
.circle-content .circle.-vi img {
  position: relative;
  top: -9rem;
}

.circle-content .circle .state {
  font-size: 4.8rem;
  color: var(--white);
  margin-right: 3rem;
}
.circle-content .circle .ja {
  font-size: 1.8rem;
  color: #cfcfcf;
  line-height: 34px;
  text-align: left;
}
circle {
  text-align: center;
}
.circle.-mi.circle-fadein:before {
  opacity: 0;
  transition: all 1s;
}
.circle.-vi.circle-fadein:before {
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.1s;
}
.circle.-va.circle-fadein:before {
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.2s;
}
.circle.-mi .text {
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.3s;
}
.circle.-vi .text {
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.4s;
}
.circle.-va .text {
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.5s;
}
.circle-big {
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.8s;
}
.circle.circle-fadein.circle-active:before,
.circle .text.circle-active,
.circle-big.circle-active {
  opacity: 1;
}
.circle:before {
  background: url("../images/about-circle.png") center/contain no-repeat;
  animation: business 50s linear 0s infinite normal forwards;
  content: "";
  background-size: 310px 310px;
  background-repeat: no-repeat;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 310px;
  min-height: 310px;
  max-width: 310px;
  max-height: 310px;
  top: -2rem;
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: calc(50% - 155px);
  transform: translateX(-50%);
}
@keyframes business {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.circle img {
  max-width: 139px;
  max-height: 139px;
  width: 100%;
  height: 100%;
}

/* Company */

.info-list,
.contact-list {
  margin-top: 7rem;
}
.info-list dl {
  border-top: 1px solid #707070;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  min-height: 7.5rem;
  align-items: center;
}
.info-list dl:nth-child(2) {
  align-items: flex-start;
}
.info-list dl:last-of-type {
  border-bottom: 1px solid #707070;
}

.info-list dt {
  width: 45%;
}
.info-list dd {
  width: 55%;
}

.info-list dd,
.info-list dt {
  font-size: 1.8rem;
  line-height: 1.4;
}
.info-list .fo {
  font-family: NotoSansJP-Regular;
}
.info-list .yu {
  font-family: KozGoPr6N-Regular;
}

.info-flex {
  display: flex;
  justify-content: space-between;
}
.info-flex span {
  max-width: 80%;
}
.info-ka {
  width: 20%;
  margin: auto auto 0 32px;
  white-space: nowrap;
}
.info-ka a {
  font-size: 1.9rem;
}
.info-ka a .map {
  border-bottom: 1px solid var(--black);
  margin-right: 2px;
  padding-bottom: 0.4rem;
}
.info-ka .yaji {
  font-size: 1.38rem;
  font-family: NotoSansJP-Regular;
  line-height: 18px;
}

/* CONTACT */
#contact {
  background-color: #eeeeee;
}
.contact-form dl {
  border-top: 1px solid #bababa;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  min-height: 7.5rem;
  align-items: center;
}
.contact-form dl:last-of-type {
  align-items: flex-start;
  border-bottom: 1px solid #bababa;
}
.contact-form dd,
.contact-form dt {
  width: 50%;
  font-size: 1.8rem;
  line-height: 1.4;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: unset;
  border: unset;
  resize: vertical;
  min-height: 40px;
  padding: 5px 20px;
  margin: 0 3px;
  font-family: var(--main-font);
  outline: none;
  font-size: 1.6rem;
}
.contact-form input:-webkit-autofill,
.contact-form textarea:-webkit-autofill {
  box-shadow: 0 0 0 1000px #eeeeee inset;
}

.contact-form textarea {
  padding: 0px 23px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #bfbfbf;
}
.contact-form dd {
  border-left: 1px solid #000;
}

.contact-form dd .form_radiio {
  display: table;
  cursor: pointer;
  padding: 0 2rem;
  line-height: 1.3;
  align-items: center;
  margin-bottom: 0.5rem;
}
.contact-form dd .form_radiio:last-child {
  margin-bottom: 0;
}

.contact-form dd .form_radiio input[type="radio"] {
  height: 1rem;
  min-height: auto;
  width: auto;
  margin: 0 0.5rem 0 0;
}
.contact-form dd .form_radiio span {
  min-height: 1.6rem;
  font-size: 1.6rem;
}

input.contact-submit {
  background-color: var(--black);
  height: 8rem;
  color: #fff;
  font-size: 1.8rem;
  margin: 4rem 0 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
input.contact-submit:hover {
  background-color: #8f8f8f;
  color: var(--black);
}
.contact-form .maru {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: #d35454;
  color: #fff;
  text-align: center;
  line-height: 8px;
  margin-bottom: 2px;
}
.error_blank,
.error_format {
  display: block;
  font-size: 1.4rem;
  color: #d35454;
}

@media screen and (max-width: 767px) {
  .hello-container {
    width: 316px;
    text-align: center;
    top: 49%;
  }
  .hello-container .about {
    font-size: 1.6rem;
    padding: 0 0 1.22rem;
  }
  .hello-container .title {
    font-size: 12.7rem;
  }
  .hello-container .txt {
    padding: 0;
    margin-top: 4rem;
  }
  .hello-container .txt p {
    text-align: left;
  }
  .hello-container .sub {
    width: 100%;
    font-size: 1.6rem;
    max-width: 380px;
    margin: auto;
    padding: 0;
  }
  .info-list,
  .contact-list {
    margin-top: 5rem;
  }
  .profile-content {
    padding: 5.5rem 0 0;
  }
  .profile-content .profile-name {
    padding: 0;
  }
  .profile-content .img img {
    height: 450px;
    object-fit: cover;
    object-position: center;
  }
  .profile-content .profile-name .name span {
    font-size: 5.4rem;
    white-space: nowrap;
  }
  .profile-content .txt {
    display: block;
    padding: 4rem 1.7rem 5rem;
  }
  .profile-container .txt h3 {
    font-size: 2.3rem;
    width: 100%;
  }
  .profile-container .txt span {
    font-size: 1.39rem;
  }
  .profile-container .txt p {
    width: 100%;
    margin-top: 4rem;
    font-size: 1.3rem;
    line-height: 23px;
  }
  .profile-container .sns a:first-child {
    margin-right: 1.6rem;
  }
  #company-info h2 span,
  #contact h2 span,
  #profile h2 span {
    font-size: 3.8rem;
  }
  .profile-title {
    padding: 0 1.7rem 5rem;
  }
  .about-circle {
    max-height: 950px;
  }
  .circle-wrapper .sub-title span {
    font-size: 3.8rem;
  }
  .circle-container {
    position: absolute;
    top: 0;
    width: 54rem;
    left: 50%;
    right: 0;
    transform: translateX(-50%);
    padding-top: 24rem;
  }
  .about-circle .circle-big {
    width: 539px;
    height: 539px;
    position: relative;
    top: 8.2rem;
    max-width: unset;
    max-height: unset;
    z-index: -1;
  }
  .circle-content .top {
    transform: translate(-50%, 33%);
    width: 100vw;
    top: 11rem;
  }
  .circle-content .left {
    left: 50%;
    bottom: -13%;
  }
  .circle-content .right {
    right: 50%;
    bottom: -2rem;
    transform: translate(50%, 87%);
  }
  .circle.-mi {
    margin-top: 2.5rem;
  }
  .circle.-vi {
    margin-top: 3rem;
  }
  .circle.-va {
    margin-top: 7rem;
  }
  .circle-content .circle.-vi .text {
    margin: 0 0 2rem 0;
    top: unset;
    height: unset;
  }
  .circle-content .circle.-va .text {
    margin: 0 0 3rem 0;
    top: -3rem;
    height: unset;
  }

  .circle-content .circle.-vi img {
    top: auto;
  }
  .circle-content .circle.-va img {
    top: -5rem;
  }
  .circle-content .circle .state {
    font-size: 3.6rem;
    margin: auto;
    padding-bottom: 1rem;
  }
  .circle-content .circle .ja {
    font-size: 1.4rem;
    text-align: center;
    line-height: 24px;
  }
  .circle-content .circle .text {
    display: block;
  }
  .circle img {
    max-width: 73px;
    max-height: 73px;
  }
  .circle:before {
    background-size: 161px 161px;
    min-width: 161px;
    min-height: 161px;
    max-width: 161px;
    max-height: 161px;
    top: 8rem;
    transform: translate(-50%, 50%);
    left: calc(50% - 80.5px);
  }
  /* company info */
  .info-list dl {
    justify-content: space-between;
  }
  .info-list dd,
  .info-list dt {
    font-size: 1.4rem;
    line-height: 24px;
  }
  .info-list dt {
    width: 37%;
  }
  .info-list dd {
    width: 63%;
  }
  .info-flex {
    flex-direction: column;
  }
  .info-flex span {
    max-width: 100%;
  }
  .info-ka a {
    font-size: 1.4rem;
  }
  .info-ka {
    margin: 1rem 1.6rem 0 auto;
  }
  .info-ka .map {
    font-size: 1.4rem;
  }
  .info-ka .yaji {
    font-size: 1.22rem;
    line-height: 16px;
  }
  .info-ka.ka {
    font-size: 1.7rem;
    line-height: 24px;
  }
  .contact-form dd,
  .contact-form dt {
    font-size: 1.4rem;
    width: 40%;
  }
  .contact-form dd {
    font-size: 1.4rem;
    width: 60%;
  }
  input.contact-submit {
    height: 7rem;
    font-size: 1.6rem;
  }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    text-align: left;
  }
  .contact-form input,
  .contact-form textarea {
    padding: 0px 1rem;
    letter-spacing: 1;
    font-size: 1.4rem;
  }
  .error_blank,
  .error_format {
    font-size: 1.2rem;
  }

  .contact-form dd .form_radiio {
    padding: 0 0 0 1rem;
    display: table;
    margin-bottom: 0.8rem;
  }
  .contact-form dd .form_radiio:last-child {
    margin-bottom: 0;
  }

  .contact-form dd .form_radiio span {
    font-size: 1.3rem;
  }
}