/* ============
MV
============ */
.top_main {
  position: relative;
  height: 80vh;
}
.top_main hgroup {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.top_main hgroup h2 {
  font-size: clamp(55px, 8vw, 100px);
  letter-spacing: 0.2em;
  line-height: 1;
  margin-bottom: clamp(30px, 4vw, 40px);
}
.top_main hgroup p {
  font-size: clamp(18px, 3vw, 30px);
  line-height: 1.7;
}

/* ============
about
============ */
#about {
  padding: 0 0 clamp(70px, 20vw, 200px);
}
#about .about_in {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5%;
}
#about .about_in .about_in__ {
  width: 57%;
}
@media screen and (max-width: 768px) {
  #about .about_in .about_in__ {
    width: 100%;
    margin-top: 35px;
    order: 1;
  }
}
#about .about_in .about_in__ .top dl {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 50px;
}
@media screen and (max-width: 768px) {
  #about .about_in .about_in__ .top dl {
    margin: 0 0 50px;
  }
}
#about .about_in .about_in__ .top dl dd {
  line-height: 1.4;
}
#about .about_in .about_in__ .btm .snsArea {
  display: flex;
}
#about .about_in .about_in__ .btm .snsArea a {
  display: block;
  width: 30px;
  height: 30px;
  margin-right: 20px;
}
@media (hover: hover) and (pointer: fine) {
  #about .about_in .about_in__ .btm .snsArea a:hover:hover {
    opacity: 0.8;
  }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #about .about_in .about_in__ .btm .snsArea a:hover:hover {
    opacity: 0.8;
  }
}
#about .about_in .imgBox {
  width: 38%;
}
@media screen and (max-width: 768px) {
  #about .about_in .imgBox {
    width: 100%;
    order: 0;
  }
}

/* ============
works
============ *//*# sourceMappingURL=top.css.map */