.content {
  text-align: center;
}

.content.top {
  color: #fff;
}

.content.top .quality, .content.top .creativity, .content.top .modernism, .content.top .contact {
  padding: 9rem 0 8rem;
}

@media only screen and (max-width: 767px) {
  .content.top .quality, .content.top .creativity, .content.top .modernism, .content.top .contact {
    padding: 8rem 0 6.5rem;
  }
}

.content.top .quality__wrapper, .content.top .creativity__wrapper, .content.top .modernism__wrapper, .content.top .contact__wrapper {
  transform: translateY(5rem);
}

.content.top .quality .sec__txt, .content.top .creativity .sec__txt, .content.top .modernism .sec__txt, .content.top .contact .sec__txt {
  margin-top: 4rem;
}

@media only screen and (max-width: 767px) {
  .content.top .quality .sec__txt, .content.top .creativity .sec__txt, .content.top .modernism .sec__txt, .content.top .contact .sec__txt {
    line-height: 3rem;
    margin-top: 3rem;
  }
}

.content.top .mission {
  position: relative;
  padding: 7rem 0 5rem;
  color: #707070;
}

@media only screen and (max-width: 767px) {
  .content.top .mission {
    padding: 2.5rem 0 1rem;
  }
}

.content.top .mission__wrapper {
  transform: translateY(5rem);
}

.content.top .mission__subtitle {
  font-size: 3rem;
  font-family: "Oswald", sans-serif;
}

.content.top .mission__title {
  margin-top: 2rem;
}

.content.top .mission__title strong {
  color: #000;
  display: block;
  font-size: 12rem;
  font-family: "Oswald", sans-serif;
}

.content.top .mission__title span {
  display: block;
  margin-top: 3rem;
}

@media only screen and (max-width: 767px) {
  .content.top .mission__title span {
    margin-top: 2rem;
  }
}

.content.top .mission__img {
  margin: auto;
  width: 70%;
  max-width: 110rem;
}

@media only screen and (max-width: 767px) {
  .content.top .mission__img {
    width: 34rem;
  }
}

.content.top .mission p.sec__note {
  margin-top: 4rem;
}

@media only screen and (max-width: 767px) {
  .content.top .mission p.sec__note {
    margin-top: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .content.top .mission .sec__note {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

.content.top .mission__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

@media only screen and (max-width: 767px) {
  .content.top .mission__wave {
    width: 210%;
  }
}

.content.top .quality {
  background-color: #949494;
}

.content.top .creativity {
  background-color: #535353;
}

.content.top .modernism {
  background-color: #2B2B2B;
}

.content.top .sectionWrapper {
  background-color: #fff;
  display: flex;
}

@media only screen and (max-width: 767px) {
  .content.top .sectionWrapper {
    flex-wrap: wrap;
  }
}

.content.top .creative, .content.top .architecture {
  color: #fff;
  position: relative;
  opacity: 1;
  width: 50%;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .content.top .creative, .content.top .architecture {
    width: 100%;
  }
}

.content.top .creative__wrapper, .content.top .architecture__wrapper {
  position: relative;
  padding: 5rem 0 1rem;
  z-index: 2;
}

@media only screen and (max-width: 767px) {
  .content.top .creative__wrapper, .content.top .architecture__wrapper {
    padding: 8rem 0 2.5rem;
  }
}

.content.top .creative__bg, .content.top .architecture__bg {
  position: absolute;
  top: 0;
  width: 200%;
  z-index: -2;
}

@media only screen and (max-width: 767px) {
  .content.top .creative__bg, .content.top .architecture__bg {
    width: 230%;
  }
}

.content.top .creative .sec__txt, .content.top .architecture .sec__txt {
  margin-top: 3rem;
}

.content.top .creative__link, .content.top .architecture__link {
  display: block;
  margin: auto;
}

@media only screen and (max-width: 767px) {
  .content.top .creative__link, .content.top .architecture__link {
    bottom: -2rem;
  }
}

.content.top .creative__link .link, .content.top .architecture__link .link {
  height: 14rem !important;
  width: 14rem !important;
}

@media only screen and (max-width: 767px) {
  .content.top .creative__link .link, .content.top .architecture__link .link {
    height: 8rem !important;
    width: 8rem !important;
  }
}

.content.top .contact {
  color: #fff;
  background-color: #4C526A;
}

.content.top .contact__link {
  display: flex;
  justify-content: center;
  margin-top: 6rem;
}

.content.top .contact__link a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  padding: 1rem 3rem;
}

@media only screen and (max-width: 767px) {
  .content.top .contact__link a {
    width: 80%;
  }
}

.content.top .contact__link figure {
  margin-right: 1rem;
  width: 6rem;
}

.content.top .contact__link span {
  font-size: 2.6rem;
}

.mv.under {
  position: relative;
  height: 40rem;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .mv.under {
    height: 30rem;
  }
}

.mv.work {
  background-color: #423B4A;
}

.mv.work #workMv {
  position: absolute;
  top: 0;
  width: 400%;
}

.mv.contact {
  background-color: #0D5041;
}

.mv__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% -20rem;
  font-family: "object-fit:cover; object-position:50% -20rem; ";
}

@media print, screen and (min-width: 0px) and (max-width: 1500px) {
  .mv__img img {
    object-position: 50% 50%;
  }
}

@media only screen and (max-width: 767px) {
  .mv__img img {
    object-position: -61vw -4vh;
    width: 220%;
  }
}

.mv__title {
  height: 10rem;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .mv__title {
    height: 6rem;
  }
}

@media only screen and (max-width: 767px) {
  .mv__title {
    height: 3rem;
  }
}

.mv__title figure, .mv__title img {
  height: 100%;
}

.creative, .architecture {
  color: #000;
}

.creative section, .architecture section {
  margin-top: 6rem;
}

@media only screen and (max-width: 767px) {
  .creative section, .architecture section {
    margin-top: 5rem;
  }
}

.creative section.scroll_item, .architecture section.scroll_item {
  transform: translateY(50px);
}

.creative__title, .architecture__title {
  height: 7rem;
  margin: auto;
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .creative__title, .architecture__title {
    height: 6rem;
  }
}

@media only screen and (max-width: 767px) {
  .creative__title, .architecture__title {
    height: 2.5rem;
  }
}

.creative__title.big, .architecture__title.big {
  height: 9.5rem;
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
  .creative__title.big, .architecture__title.big {
    height: 8rem;
  }
}

@media only screen and (max-width: 767px) {
  .creative__title.big, .architecture__title.big {
    height: 3.3rem;
  }
}

.creative__title figure, .creative__title img, .architecture__title figure, .architecture__title img {
  height: 100%;
}

.creative__btn, .architecture__btn {
  width: 15rem;
  display: block;
  margin: 2rem auto 0;
}

@media only screen and (max-width: 767px) {
  .creative__btn, .architecture__btn {
    width: 10rem;
  }
}

.creative .sec__txt, .architecture .sec__txt {
  margin-top: 3rem;
}

@media only screen and (max-width: 767px) {
  .creative .sec__txt, .architecture .sec__txt {
    margin-top: 1.5rem;
  }
}

.creative__info, .architecture__info {
  margin-top: 9rem;
  line-height: 4.4rem;
}

@media only screen and (max-width: 767px) {
  .creative__info, .architecture__info {
    margin-top: 5rem;
    line-height: 3rem;
  }
}

.gallery {
  display: flex;
  margin-top: 18rem;
}

@media only screen and (max-width: 767px) {
  .gallery {
    flex-wrap: wrap;
    margin-top: 5rem;
  }
}

.gallery figure {
  width: 50%;
}

@media only screen and (max-width: 767px) {
  .gallery figure {
    width: 100%;
  }
}

.work {
  padding: 3rem 0 5rem;
}

.work__list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.work__item {
  border: 1px solid #707070;
  border-radius: 5rem;
  color: #000;
  font-size: 2.4rem;
  height: 6rem;
  line-height: 6rem;
  width: 20%;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .work__item {
    font-size: 1rem;
    height: 3.6rem;
    line-height: 3.6rem;
    width: 24%;
  }
}

.work__item:not(:last-of-type) {
  margin-right: 2%;
}

@media only screen and (max-width: 767px) {
  .work__item:not(:last-of-type) {
    margin-right: 1%;
  }
}

.work__item.active {
  background-color: #5B5B5B;
  color: #fff;
}

.work__wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 3rem auto 0;
  width: 81.25%;
  max-width: 1540px;
}

@media only screen and (max-width: 767px) {
  .work__wrapper {
    width: 100%;
  }
}

.work__wrapper .nofind {
  width: 100%;
}

.work__article {
  cursor: pointer;
  position: relative;
  color: #fff;
  margin-bottom: 1.25%;
  width: 32.5%;
  transform: translateY(50px);
}

@media only screen and (max-width: 767px) {
  .work__article {
    margin-bottom: 1rem;
    width: 100%;
  }
}

@media print, screen and (min-width: 768px) {
  .work__article:not(:nth-of-type(3n)) {
    margin-right: 1.25%;
  }
}

.work__thumbnail {
  position: relative;
  padding-top: 100%;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .work__thumbnail {
    padding-top: 46.7%;
  }
}

.work__thumbnail img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  font-family: "object-fit:cover; object-position:50% 50%; ";
  border-radius: 2rem;
}

@media only screen and (max-width: 767px) {
  .work__thumbnail img {
    border-radius: 1rem;
  }
}

.work__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 2rem;
  transition: all ease-in-out .8s;
  opacity: 0;
}

@media only screen and (max-width: 767px) {
  .work__link {
    border-radius: 1rem;
    opacity: 1;
  }
}

.work__link:hover {
  opacity: 1;
}

.work__headline {
  font-size: 3rem;
  line-height: 3.6rem;
}

@media only screen and (max-width: 767px) {
  .work__headline {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}

.work__note {
  margin-top: 2rem;
}

@media only screen and (max-width: 767px) {
  .work__note {
    font-size: 1.6rem;
  }
}

.work__icon {
  margin-top: 2rem;
  width: 6rem;
}

@media only screen and (max-width: 767px) {
  .work__icon {
    width: 4rem;
  }
}

.contact {
  color: #000;
  padding-top: 6rem;
}

@media only screen and (max-width: 767px) {
  .contact {
    padding: 2rem 0 6rem;
  }
}

.contact__wrapper {
  font-size: 2rem;
  margin: auto;
  text-align: left;
  max-width: 1000px;
  width: 70%;
}

@media only screen and (max-width: 767px) {
  .contact__wrapper {
    width: 90%;
  }
}

.contact__wrapper label {
  display: block;
  margin-bottom: 2rem;
}

@media only screen and (max-width: 767px) {
  .contact__wrapper label {
    margin-bottom: 1rem;
  }
}

.contact__wrapper input, .contact__wrapper textarea {
  border: 1px solid #707070;
  padding: 1.2rem;
  outline: none;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .contact__wrapper input, .contact__wrapper textarea {
    padding: .8rem 1.2rem;
  }
}

.contact__wrapper textarea {
  height: 30rem;
}

.contact__wrapper .btnType01 {
  margin-top: 5rem;
  padding: 0;
  width: 30rem;
}

@media only screen and (max-width: 767px) {
  .contact__wrapper .btnType01 {
    margin-top: 2rem;
  }
}

.contact__inner:not(:first-of-type) {
  margin-top: 4.5rem;
}

@media only screen and (max-width: 767px) {
  .contact__inner:not(:first-of-type) {
    margin-top: 2rem;
  }
}

.contact__info {
  margin-top: 10rem;
}

@media only screen and (max-width: 767px) {
  .contact__info {
    margin-top: 4.5rem;
  }
}

.contact__info .btnType01 {
  margin-top: 5rem;
}

@media only screen and (max-width: 767px) {
  .contact__info .btnType01 {
    margin-top: 4rem;
  }
}

.contact__detail {
  line-height: 3rem;
}

.contact__name {
  font-size: 3rem;
}

@media only screen and (max-width: 767px) {
  .contact__name {
    font-size: 2.4rem;
  }
}

.contact__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.contact__tel figure {
  margin-right: .5rem;
  width: 3rem;
}

.contact__tel span {
  font-size: 3rem;
}

.contact__map {
  position: relative;
  margin-top: 5rem;
  padding-top: 31.25%;
  width: 100%;
}

.contact__map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}