@charset "utf-8";
/* CSS Document */
/* mainvisual
------------------------------------------------------------*/
.mainvisual--wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.mainvisual_background {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  min-height: 120%;
  background-image: url("../image/mainvisual_bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  will-change: transform;
}
.mainvisual_contents {
  position: absolute;
  z-index: 1;
  text-align: center;
  width: 100%;
  top: calc(336 / 2000 * 100vw);
  padding: 0 20px;
}
.mainvisual_copy_img {
  max-width: 100%;
  width: calc(560 / 2000 * 100vw);
  height: auto;
  animation: fadeUp 1.5s ease-out forwards;
  opacity: 0;
  margin: 0 auto;
}
.mainvisual_text--wrap {
  margin-top: calc(40 / 2000 * 100vw);
}
.mainvisual_text {
  font-size: calc(20 / 2000 * 100vw);
  letter-spacing: 0.02em;
  line-height: 2.1;
  animation: fadeUp 1.5s ease-out 0.5s forwards;
  opacity: 0;
}
.scroll_down {
  position: absolute;
  bottom: 1em;
  right: 50%;
  margin-right: -34.75rem;
  transform: translateX(-50%);
  z-index: 10;
  animation:
    fadeUpIn 1.0s ease-out 1.0s forwards, floating 2.5s ease-in-out infinite alternate;
  opacity: 0;
}
.scroll_down img {
  width: 0.625rem;
  height: auto;
  display: block;
}
@keyframes fadeUpIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes floating {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(15px);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width: 767px) {
  .mainvisual_background {
    background-image: url("../image/mainvisual_bg_sp.png");
  }
  .mainvisual_contents {
    top: calc(320 / 750 * 100vw);
  }
  .mainvisual_copy_img {
    width: calc(560 / 750 * 100vw);
  }
  .mainvisual_text--wrap {
    margin-top: calc(40 / 750 * 100vw);
  }
  .mainvisual_text {
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.78;
  }
  .scroll_down {
    bottom: calc(40 / 750 * 100vw);
    right: calc(30 / 750 * 100vw);
    margin-right: 0;
  }
  .scroll_down img {
    width: calc(28 / 750 * 100vw);
  }
}
/* service
------------------------------------------------------------*/
.service--wrap .contents_headline {
  margin-bottom: 2rem;
}
.service--wrap .flex-item03 {
  text-align: center;
}
.service--wrap .contents_title {
  margin: 1.5rem 0 1.25rem;
}
.service--wrap .contents--inner {
  margin-bottom: 3em;
}
@media screen and (max-width: 767px) {
  .service--wrap .contents_headline {
    margin-bottom: calc(45 / 750 * 100vw);
  }
  .service--wrap .flex-item03 + .flex-item03 {
    margin-top: calc(48 / 750 * 100vw);
  }
  .service_img {
    width: calc(380 / 750 * 100vw);
    margin: 0 auto;
  }
  .service--wrap .contents_title {
    margin: calc(30 / 750 * 100vw) 0 calc(30 / 750 * 100vw);
  }
  .service--wrap .contents_headline {
    margin-bottom: calc(45 / 750 * 100vw);
  }
  .service_img {
    width: calc(380 / 750 * 100vw);
    margin: 0 auto;
  }
}
/* works
------------------------------------------------------------*/
.works--wrap {
  background-image: url("../image/top_works_bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: fixed;
}
.works--wrap .contents--inner {
  background: #FFFFFF;
  z-index: 1;
  padding: 5em 5.2% 16.25em;
}
.works--wrap .text--box {
  width: 40.4%;
}
.works--wrap .contents_title {
  margin: 1.5rem 0 1.25rem;
}
.works--wrap .more_button {
  margin-top: 3em;
}
.works--wrap .more_button_link {
  margin-left: 0;
}
.works--wrap .image--box {
  position: relative;
  width: 51.6%;
}
.works--wrap .works_img {
  position: absolute;
}
.image--box .works_img:first-of-type {
  top: 0;
  left: 0;
}
.image--box .works_img:nth-of-type(2n) {
  top: 2.75em;
  right: 0;
}
.image--box .works_img:nth-of-type(3n) {
  mix-blend-mode: multiply;
  top: 19.125em;
  left: 5.5em;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .works--wrap {
    background-image: url("../image/top_works_bg_sp.png");
  }
  .works--wrap .contents--inner {
    background: none;
    z-index: 1;
    padding: calc(86 / 750 * 100vw) 5.6% calc(86 / 750 * 100vw);
  }
  .works--wrap .contents_headline {
    text-align: center;
    margin-bottom: calc(50 / 750 * 100vw);
  }
  .works--wrap .text--box {
    width: 100%;
  }
  .works--wrap .image--box {
    width: 100%;
    height: calc(752 / 750 * 100vw);
    margin-top: calc(55 / 750 * 100vw);
  }
  .works_img_item {
    width: calc(306 / 750 * 100vw);
  }
  .works--wrap .more_button_link {
    margin: 0 auto;
  }
  .image--box .works_img:nth-of-type(2n) {
    top: calc(57 / 750 * 100vw);
  }
  .image--box .works_img:nth-of-type(3n) {
    top: calc(390 / 750 * 100vw);
    left: calc(110 / 750 * 100vw);
  }
}
/* flow
------------------------------------------------------------*/
.flow--wrap .contents_headline {
  margin-bottom: 2rem;
}
.flow--wrap .image-box {
  width: 54%;
}
.flow--wrap .text--box {
  width: 40.4%;
}
.flow--wrap .contents_title {
  margin: 1.5rem 0 1.25rem;
}
.flow--wrap .more_button {
  margin-top: 3em;
}
.flow--wrap .more_button_link {
  margin-left: 0;
}
@media screen and (max-width: 767px) {
  .flow--wrap .contents_headline {
    margin-bottom: calc(50 / 750 * 100vw);
  }
  .flow_img {
    width: calc(540 / 750 * 100vw);
    margin: 0 auto;
  }
  .flow--wrap .contents_title {
    margin: calc(40 / 750 * 100vw) 0 calc(35 / 750 * 100vw);
  }
  .flow--wrap .image-box {
    width: 100%;
  }
  .flow--wrap .text--box {
    width: 100%;
  }
  .flow--wrap .more_button {
    margin-top: calc(70 / 750 * 100vw);
  }
  .flow--wrap .more_button_link {
    margin: 0 auto;
  }
}
/* contact
------------------------------------------------------------*/
.contact--wrap .contents_headline {
  margin-bottom: 2rem;
}
.contact--wrap .flex--box {
  justify-content: flex-start;
}
.contact--wrap .text--box {
  width: 40.4%;
  margin-right: 9.2%;
}
.contact--wrap .phone_link {
  color: #12b7d2;
  font-weight: bold;
  font-size: 1.5625em;
}
.contact--wrap .mail_button {
  margin-top: 3em;
}
.contact--wrap .mail_button_link {
  margin-left: 0;
}
.contact--wrap .image--box {
  width: 32%;
}
@media screen and (max-width: 767px) {
  .contact--wrap .contents_headline {
    margin-bottom: calc(50 / 750 * 100vw);
  }
  .contact_img {
    width: calc(320 / 750 * 100vw);
    margin: 0 auto;
  }
  .contact--wrap .phone_link {
    font-size: calc(38 / 750 * 100vw);
    margin-top: calc(36 / 750 * 100vw);
  }
  .contact--wrap .text--box {
    width: 100%;
    margin-right: 0;
  }
  .contact--wrap .image--boximage--boxx {
    width: 100%;
  }
  .contact--wrap .mail_button {
    margin-top: calc(70 / 750 * 100vw);
  }
  .contact--wrap .mail_button_link {
    margin: 0 auto;
  }
}