@charset "UTF-8";
/*--------------------------------------------------
 ※※※※※※※※※※※※※※※※※※※※※※※※
 このファイルはsassでコンパイルされています
 以下の内容を変更したい場合は構成するscssファイルを
 ご確認ください
 ※※※※※※※※※※※※※※※※※※※※※※※※
--------------------------------------------------*/
.js-loading::-webkit-scrollbar,
.js-loading::-webkit-scrollbar-thumb,
.js-loading::-webkit-scrollbar-track {
  background-color: transparent;
}

.main {
  color: #272727;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0;
}
.main svg,
.main img {
  max-width: 100%;
}

.business-creative-loading {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.business-creative-loading::before {
  content: "";
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: left top;
  animation: certain02 1s 4.2s both;
  background-color: #fff;
}
.business-creative-loading::after {
  content: "";
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: left top;
  animation: certain02 .5s 2s both;
  background-color: #272727;
}

.business-creative-header {
  z-index: 2;
  background-color: transparent;
}

.business-creative-pkz {
  z-index: 2;
}
.business-creative-pkz::after {
  display: none;
}
.business-creative-pkz .pkz__list {
  background-color: transparent;
}

.business-creative-bg {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
.business-creative-bg__01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 133.34vw;
  transform: translate(-45vw, 50vh) rotate(45deg);
  opacity: .7;
}
.business-creative-bg__02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 133.34vw;
  transform: translate(-45vw, 90vh) rotate(45deg);
  opacity: .7;
}
.business-creative-bg__03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 133.34vw;
  transform: translate(65vw, 5vh) rotate(45deg);
  opacity: .7;
}
.business-creative-bg__04 {
  position: absolute;
  top: 0;
  left: 0;
  width: 133.34vw;
  transform: translate(65vw, 40vh) rotate(45deg);
  opacity: .7;
}
.business-creative-bg__large {
  width: 80vw;
  height: 40vw;
  transform: translateX(-80vw);
  border-radius: 100vh;
  background: linear-gradient(-30deg, #5470e9 0%, #39f897 25%, #dbfd00 50%, #39f897 75%, #5470e9 100%) no-repeat left top/400% 400%;
}
.is-loaded .business-creative-bg__large {
  animation: bgGradient 100s ease infinite, scaleLarge 8.5s linear infinite;
}
.business-creative-bg__reverse .business-creative-bg__large {
  transform: translateX(-120vw);
  background: linear-gradient(-30deg, #dbfd00 0%, #39f897 25%, #5470e9 50%, #39f897 75%, #dbfd00 100%) no-repeat left top/400% 400%;
}
.is-loaded .business-creative-bg__reverse .business-creative-bg__large {
  animation: bgGradient 100s ease infinite, scaleLargeReverse 8s .5s ease infinite;
}
.business-creative-bg__middle {
  width: 133.34vw;
  height: 24vw;
  transform: translateX(53.34vw);
  border-radius: 100vh;
  background: linear-gradient(-30deg, #5470e9 0%, #39f897 25%, #dbfd00 50%, #39f897 75%, #5470e9 100%) no-repeat left top/400% 400%;
}
.is-loaded .business-creative-bg__middle {
  animation: bgGradient 90s ease infinite, scaleMiddle 6s .5s ease infinite;
}
.business-creative-bg__reverse .business-creative-bg__middle {
  transform: translateX(106.67vw);
  background: linear-gradient(-30deg, #dbfd00 0%, #39f897 25%, #5470e9 50%, #39f897 75%, #dbfd00 100%) no-repeat left top/400% 400%;
}
.is-loaded .business-creative-bg__reverse .business-creative-bg__middle {
  animation: bgGradient 90s ease infinite, scaleMiddleReverse 8s 1s ease infinite;
}
.business-creative-bg__small {
  width: 80vw;
  height: 1.07vw;
  transform: translate(28.01vw, 2.67vw);
  animation: bgGradient 120s ease infinite, smallLine 3s infinite;
  border-radius: 100vh;
  background: linear-gradient(-30deg, #5470e9 0%, #39f897 25%, #dbfd00 50%, #39f897 75%, #5470e9 100%) no-repeat left top/400% 400%;
}
.business-creative-bg__reverse .business-creative-bg__small {
  animation: bgGradient 120s ease infinite, smallLineReverse 4s infinite;
  background: linear-gradient(-30deg, #dbfd00 0%, #39f897 25%, #5470e9 50%, #39f897 75%, #dbfd00 100%) no-repeat left top/400% 400%;
}
@keyframes bgGradient {
  0% {
    background-position: 0% 50%;
  }
  33% {
    background-position: 100% 50%;
  }
  66% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes scaleLarge {
  0% {
    width: 80vw;
    transform: translateX(-80vw);
  }
  30% {
    width: 40vw;
    margin-left: 53.34vw;
  }
  35% {
    width: 40vw;
    margin-left: 53.34vw;
  }
  80% {
    width: 53.34vw;
    margin-left: 26.67vw;
    opacity: 1;
  }
  95% {
    width: 53.34vw;
    margin-left: 26.67vw;
    transform: translateX(106.67vw);
    opacity: 0;
  }
  96% {
    transform: translateX(-80vw);
    opacity: 0;
  }
  100% {
    width: 80vw;
    transform: translateX(0);
    opacity: 0;
  }
}
@keyframes scaleLargeReverse {
  0% {
    width: 133.34vw;
    transform: translateX(-120vw);
  }
  50% {
    width: 133.34vw;
  }
  95% {
    width: 80vw;
    transform: translateX(106.67vw);
    opacity: 1;
  }
  100% {
    width: 40vw;
    transform: translateX(106.67vw);
    opacity: 0;
  }
}
@keyframes scaleMiddle {
  0% {
    width: 133.34vw;
    margin-left: 0;
    transform: translateX(-106.66vw);
  }
  50% {
    width: 24vw;
    margin-left: 109.34vw;
  }
  100% {
    width: 24vw;
    margin-left: 109.34vw;
    transform: translateX(0);
  }
}
@keyframes scaleMiddleReverse {
  0% {
    width: 133.34vw;
    transform: translateX(53.34vw);
    opacity: 1;
  }
  40% {
    width: 24vw;
    transform: translateX(-53.33vw);
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  70% {
    width: 24vw;
    transform: translateX(-160vw);
    opacity: 0;
  }
  73% {
    opacity: 0;
  }
  75% {
    transform: translateX(106.67vw);
    opacity: 0;
  }
  100% {
    width: 133.34vw;
    opacity: 1;
  }
}
@keyframes smallLine {
  0% {
    transform: translate(-150vh, 20px);
  }
  100% {
    transform: translate(150vh, 20px);
  }
}
@keyframes smallLineReverse {
  0% {
    width: 1.07vw;
    transform: translate(130vh, 2.67vw);
  }
  15% {
    width: 1.07vw;
  }
  50% {
    width: 26.67vw;
  }
  85% {
    width: 1.07vw;
  }
  100% {
    width: 1.07vw;
    transform: translate(-130vh, 2.67vw);
  }
}
.business-creative-contact {
  position: relative;
  z-index: 1;
}
.business-creative-contact .uly-heading {
  font-size: 36px;
  font-weight: normal;
}
.business-creative-contact .uly-contact__button {
  background-color: #5470e9;
}
.business-creative-contact .uly-contact__button .uly-contact__left {
  background-color: #c6cff8;
}
.business-creative-contact .uly-contact__button--form {
  background-color: #ff5153;
}
.business-creative-contact .uly-contact__button--form .uly-contact__left {
  background-color: #ffc5c6;
}

.business-creative-footer {
  position: relative;
  z-index: 1;
  background-color: #fff;
}

.business-creative-marker {
  transition: background .5s 1s;
  background: linear-gradient(#dbfd00, #dbfd00) no-repeat left bottom/0% 40%;
}
.active .business-creative-marker {
  background-size: 100% 40%;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64vw;
  height: 13.34vw;
  margin: 0 auto;
  transition: 0.2s;
  background-color: #272727;
  border-radius: 100vh;
  color: #fff;
  font-size: 3.74vw;
  font-weight: bold;
  text-decoration: none;
}

.case-slide {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: -20px 0 -18.66vw;
  padding-bottom: 10.67vw;
  overflow: hidden;
  transform: translateY(-100px);
}
.case-slide::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 18.67vw;
  bottom: -10.66vw;
  left: 0;
  width: 100%;
  background: linear-gradient(to left, #dbfd00 0%, #39f897 45%, #5470e9 100%);
}
.case-slide__inner {
  display: flex;
  position: relative;
  z-index: 2;
  justify-content: center;
}
.case-slide__box {
  background: #fff;
  box-shadow: 0 0 20px rgba(39, 39, 39, 0.2);
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 80vw;
  margin: 0 4vw;
  padding: 2.67vw 2.67vw 6.67vw;
  text-align-last: center;
}
.case-slide__tag {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 29.34vw;
  padding: 1.34vw 2.14vw;
  background-color: #dbfd00;
  font-size: 3.2vw;
  text-align: center;
}
.case-slide__image {
  margin-bottom: 4vw;
}
.case-slide__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.case-slide__copy {
  margin: 0 0 0.8vw;
  font-size: 4.27vw;
  font-weight: bold;
}
.case-slide__name {
  margin: 0 0 2.14vw;
  font-size: 3.74vw;
}
.case-slide__service {
  color: #a1a3a4;
  font-size: 2.67vw;
}
.case-slide .slick-list {
  padding-top: 20px !important;
}

.case {
  background: #fff;
  box-shadow: 0 0 30px rgba(39, 39, 39, 0.2);
  position: relative;
  z-index: 1;
  width: 100vw;
  padding: 10.67vw 0;
  overflow: hidden;
}
.case__inner {
  margin: 10.67vw 0 16vw;
}
.case__inner:last-child {
  margin-bottom: 0;
}
.case__hero {
  position: relative;
  height: 64vw;
  margin-bottom: 5.34vw;
}
.case__bg-image {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity .5s, filter .5s .3s;
  opacity: 0;
  filter: blur(10px);
}
.active .case__bg-image {
  opacity: 1;
  filter: blur(0);
}
.case__bg-image img {
  width: 100%;
  height: 53.34vw;
  object-fit: cover;
}
.case__image {
  display: flex;
  position: relative;
  z-index: 2;
  align-items: flex-end;
  justify-content: flex-end;
  height: 64vw;
  margin: 0 2.67vw;
  transform: translateX(50px);
  transition: .5s .5s;
  opacity: 0;
}
.active .case__image {
  transform: translateX(0);
  opacity: 1;
}
.case__image img {
  height: 56.01vw;
  object-fit: contain;
}
.case__box {
  margin: 0 4vw 8vw;
}
.case__heading {
  margin: 0 0 2.67vw;
  transition: background 2s;
  background: linear-gradient(to top, #fff 25%, #a1a3a4 55%, #272727 75%) no-repeat left bottom/100% 400%;
  font-size: 5.34vw;
  font-weight: normal;
  line-height: 1.33;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.case__heading.active {
  background-position: left top;
}
.case__heading span {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  display: block;
  margin-bottom: 1.34vw;
  -webkit-text-fill-color: #272727;
}
.case__desc {
  margin: 0 0 4vw;
  transition: .5s .5s;
  opacity: 0;
  font-size: 3.74vw;
}
.active .case__desc {
  opacity: 1;
}
.case__issue {
  margin-bottom: 5.34vw;
  padding: 4vw 0 0 1.34vw;
  transition: .5s .5s;
  border-top: 1px solid #272727;
  opacity: 0;
}
.active .case__issue {
  opacity: 1;
}
.case__support {
  padding: 0 0 5.34vw 1.34vw;
  transition: .5s .5s;
  border-bottom: 1px solid #272727;
  opacity: 0;
}
.active .case__support {
  opacity: 1;
}
.case__sub-head {
  margin: 0 0 2.67vw;
  font-size: 4.27vw;
  font-weight: bold;
}

.case-summary {
  background: #fff;
  box-shadow: 0 0 10px rgba(39, 39, 39, 0.2);
  box-sizing: border-box;
  margin: 8vw 0 0;
  padding: 5.34vw 4vw;
}
.case-summary__head {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  margin: 0;
  color: #5470e9;
  font-size: 4.27vw;
}
.case-summary__data {
  margin: 0 0 4vw;
}
.case-summary__data:last-child {
  margin-bottom: 0;
}
.case-summary a {
  display: inline-block;
  margin-top: 0.8vw;
  color: #a1a3a4;
  text-decoration: none;
}

.case-process {
  margin: 0 auto;
}
.case-process__heading {
  margin: 0 0 8vw;
  font-size: 4.8vw;
  font-weight: bold;
  text-align: center;
}

.case-button {
  margin-top: -8vw;
}

.faq {
  position: relative;
  z-index: 1;
  margin: 0 4vw 13.34vw;
  padding-top: 10.67vw;
}
.faq__block {
  background: #fff;
  box-shadow: 0 0 10px rgba(39, 39, 39, 0.2);
  margin-bottom: 4vw;
  overflow: hidden;
  border-radius: 2.67vw;
  background-color: #fff;
}
.faq__block:last-child {
  margin-bottom: 0;
}
.faq__title {
  display: flex;
  position: relative;
  min-height: 21.34vw;
}
.faq__question {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 10.67vw;
  background-color: #e1eaf4;
  font-size: 5.87vw;
  font-style: normal;
}
.faq__text {
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: 0 8vw 0 4vw;
  font-size: 3.74vw;
  font-weight: bold;
}
.faq__ico {
  position: absolute;
  top: 50%;
  right: 2.67vw;
  cursor: pointer;
}
.faq__ico::before {
  content: "";
  display: block;
  width: 4vw;
  height: 2px;
  transition: .2s;
  background-color: #272727;
}
.faq__ico::after {
  content: "";
  display: block;
  width: 4vw;
  height: 2px;
  transform: translateY(-1px) rotate(-90deg);
  transform-origin: center center;
  transition: .2s;
  background-color: #272727;
}
.is-active .faq__ico::before {
  transform: rotate(90deg);
  opacity: 0;
}
.is-active .faq__ico::after {
  transform: translateY(-1px) rotate(0);
}
.faq__answer-box {
  display: none;
  position: relative;
  margin: 0;
  font-size: 3.74vw;
}
.faq__answer-box p {
  padding: 2.67vw 4vw 2.67vw 14.67vw;
}
.faq__answer {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 10.67vw;
  height: 16vw;
  background-color: #fff;
  font-size: 5.87vw;
  font-style: normal;
}
.faq a {
  color: #5470e9;
  text-decoration: underline;
}
.faq a:hover {
  text-decoration: none;
}

.heading {
  font-size: 5.87vw;
  font-weight: 500;
  text-align: center;
}

.heading02 {
  margin: 0 0 8vw;
  font-size: 5.87vw;
  font-weight: 400;
  text-align: center;
}
.heading02 span {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  display: block;
  color: #a1a3a4;
  font-size: 4.27vw;
}

.hero {
  position: relative;
  z-index: 1;
  height: 630px;
  padding: 37.34vw 0 0;
  text-align: center;
}
.hero__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64vw;
  height: 13.34vw;
  margin: 0 auto;
  transition: 0.2s;
  background-color: #272727;
  border-radius: 100vh;
  color: #fff;
  font-size: 3.74vw;
  font-weight: bold;
  text-decoration: none;
}

.hero-heading {
  margin: 0;
  font-size: 8vw;
  font-weight: normal;
}
.hero-heading__ja-small {
  display: block;
  font-size: 4.27vw;
}
.hero-heading__ja-large {
  display: block;
  margin-top: 2.67vw;
  font-size: 9.07vw;
  font-weight: bold;
  line-height: 1.4;
}

.hero-tag {
  margin: 10.67vw 0 8vw;
  padding: 0;
}
.hero-tag__tag {
  position: relative;
  box-sizing: border-box;
  width: 66.67vw;
  margin: 0 auto 1.34vw;
  padding: 1.34vw 1.34vw 1.34vw 8vw;
  border: 2px solid #272727;
  background-color: #fff;
  font-size: 3.2vw;
  font-weight: bold;
}
.hero-tag__tag::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 8vw;
  height: 8vw;
  background: #39f897 url("../../images/ico_check.svg") no-repeat center center;
}

.intro {
  position: relative;
  z-index: 1;
  margin-top: -100px;
}
.intro__wrap {
  padding-bottom: 240px;
  background-color: #fff;
}
.intro__inner {
  margin: 0 auto;
  padding: 13.34vw 0 2.67vw;
}
.intro__copy {
  margin: 0;
  font-size: 3.74vw;
  font-weight: normal;
  text-align: center;
}

.intro-list {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -53.33vw;
  padding: 0 2.14vw;
  overflow: hidden;
}
.intro-list::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 100%;
  height: 53.34vw;
  transform: translateY(-50%);
  background: linear-gradient(to left, #cf44b5 0%, #fc6e45 33%, #fc5657 66%, #5570e3 100%);
}
.intro-list__list {
  background: #fff;
  box-shadow: 0 0 10px rgba(39, 39, 39, 0.2);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: calc(50% - 1.34vw);
  margin: 2.14vw 0;
  padding: 1.34vw 1.34vw 5.34vw;
  transform: translateY(50px);
  opacity: 0;
}
.intro-list__list:nth-child(1) {
  transition: .5s .4s;
}
.intro-list__list:nth-child(2) {
  transition: .5s;
}
.intro-list__list:nth-child(3) {
  transition: .5s .2s;
}
.intro-list__list:nth-child(4) {
  transition: .5s .6s;
}
.active .intro-list__list {
  transform: translateY(0);
  opacity: 1;
}
.intro-list__title {
  padding: 2.14vw 0;
  color: #fff;
  font-size: 4.27vw;
  font-weight: bold;
  text-align: center;
}
.intro-list__title--01 {
  background-color: #d240b9;
}
.intro-list__title--02 {
  background-color: #ff6b3b;
}
.intro-list__title--03 {
  background-color: #ff5153;
}
.intro-list__title--04 {
  background-color: #5470e9;
}
.intro-list__copy {
  margin: 4vw 0;
  font-size: 3.74vw;
  font-weight: bold;
  text-align: center;
}
.intro-list__text {
  margin: 0 1.34vw;
  font-size: 3.2vw;
}

.intro-tag {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.67vw;
}
.intro-tag__tag {
  margin: 0.8vw 0.27vw 0;
  padding: 0.8vw 2.67vw;
  border-radius: 100vh;
  background-color: #f2f5f8;
  color: #2d5774;
  font-size: 10px;
}

.intro-flow {
  position: relative;
  padding: 0 2.67vw;
  transition: opacity .5s;
  opacity: 0;
}
.intro-flow.active {
  opacity: 1;
}
.intro-flow img {
  width: 100%;
  object-fit: contain;
}

.list-issue {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: count 0;
}
.list-issue__list {
  position: relative;
  margin-bottom: 1.34vw;
  padding-left: 6.67vw;
}
.list-issue__list:last-child {
  margin-bottom: 0;
}
.list-issue__list::before {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  content: counter(count);
  position: absolute;
  top: .2em;
  left: 0;
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 100%;
  background-color: #a1a3a4;
  color: #fff;
  font-size: 3.47vw;
  line-height: 4.8vw;
  text-align: center;
  counter-increment: count;
}

.list-support {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: count 0;
}
.list-support__list {
  position: relative;
  margin-bottom: 1.34vw;
  padding-left: 6.67vw;
}
.list-support__list:last-child {
  margin-bottom: 0;
}
.list-support__list::before {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  content: counter(count);
  position: absolute;
  top: .2em;
  left: 0;
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 100%;
  background-color: #272727;
  color: #fff;
  font-size: 3.47vw;
  line-height: 4.8vw;
  text-align: center;
  counter-increment: count;
}

.list-process {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -2.66vw 4vw 0;
  padding: 0;
  list-style: none;
  counter-reset: count 0;
}
.list-process__list {
  background: #fff;
  box-shadow: 0 0 20px rgba(39, 39, 39, 0.2);
  position: relative;
  box-sizing: border-box;
  width: calc(50% - 1.34vw);
  margin: 2.67vw 0 0;
  padding: 10.67vw 2.67vw 5.34vw;
  transform: translateY(-30px);
  opacity: 0;
}
.active .list-process__list {
  transform: translateY(0);
  opacity: 1;
}
.active .list-process__list:nth-child(1) {
  transition: .5s;
}
.active .list-process__list:nth-child(2) {
  transition: .5s .2s;
}
.active .list-process__list:nth-child(3) {
  transition: .5s .4s;
}
.active .list-process__list:nth-child(4) {
  transition: .5s .6s;
}
.active .list-process__list:nth-child(5) {
  transition: .5s .8s;
}
.active .list-process__list:nth-child(6) {
  transition: .5s 1s;
}
.active .list-process__list:nth-child(7) {
  transition: .5s 1.2s;
}
.active .list-process__list:nth-child(8) {
  transition: .5s 1.4s;
}
.list-process__list:last-child {
  margin-bottom: 0;
}
.list-process__list::before {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  content: "0" counter(count);
  position: absolute;
  top: 0;
  left: 50%;
  width: 21.34vw;
  height: 10.67vw;
  transform: translateX(-50%);
  background: url("../../images/bg_process_no.png") no-repeat left top/100% auto;
  color: #fff;
  font-size: 6.94vw;
  letter-spacing: .08em;
  line-height: 7.47vw;
  text-align: center;
  counter-increment: count;
}
.list-process__title {
  margin: 0 0 2.67vw;
  font-size: 3.74vw;
  font-weight: bold;
  text-align: center;
}

.list-process-item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-process-item__list {
  position: relative;
  margin-bottom: 0.8vw;
  padding-left: 2.14vw;
  font-size: 3.2vw;
}
.list-process-item__list:last-child {
  margin-bottom: 0;
}
.list-process-item__list::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 0;
  width: 1.07vw;
  height: 1.07vw;
  border-radius: 100%;
  background-color: #a1a3a4;
}

.list-inline {
  display: flex;
  flex-wrap: wrap;
  margin-top: -1.33vw;
}
.list-inline__list {
  margin: 1.34vw 1em 0 0;
}

.member {
  position: relative;
  z-index: 1;
  width: 100vw;
  padding: 10.67vw 0 0;
  overflow: hidden;
  text-align: center;
}
.member::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -24px;
  left: 50%;
  width: 180vw;
  height: 180vw;
  transform: translateX(-50%);
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}
.member__heading {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  margin: 0 0 5.34vw;
  font-size: 5.87vw;
  font-weight: normal;
}
.member__copy {
  margin: 0 4vw 6.67vw;
  font-size: 3.74vw;
}

.member-figure {
  margin: 0 auto;
  transition: filter .3s .3s, opacity .3s;
  opacity: 0;
  filter: blur(6px);
}
.member-figure.active {
  opacity: 1;
  filter: blur(0);
}
.member-figure img {
  width: 100%;
}

.model {
  background: #fff;
  box-shadow: 0 0 20px rgba(39, 39, 39, 0.2);
  position: relative;
  z-index: 1;
  padding: 10.67vw 5.34vw;
  background: rgba(255, 255, 255, 0.8);
}
.model::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 32vw;
  background-color: #00233b;
}
.model__heading {
  margin: 0 0 8vw;
  color: #fff;
  font-size: 4.8vw;
  font-weight: normal;
  text-align: center;
}
.model__copy {
  margin: 0;
  transition: filter .2s, opacity .1s;
  opacity: 0;
  font-size: 4.27vw;
  line-height: 1.75;
  text-align: center;
  filter: blur(6px);
}
.model__copy.active {
  opacity: 1;
  filter: blur(0);
}

.model-box {
  background: #fff;
  box-shadow: 0 0 20px rgba(39, 39, 39, 0.2);
  position: relative;
  margin: 8vw 0;
}
.model-box__body {
  padding: 8vw 4vw 4vw;
}
.model-box__no {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  position: absolute;
  z-index: 2;
  top: -2.66vw;
  left: 5.34vw;
  width: 21.34vw;
  margin: 0;
  font-size: 4.27vw;
  line-height: 5.34vw;
  text-align: center;
}
.model-box__no::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.94vw;
  transform: skewX(-20deg);
  background-color: #dbfd00;
}
.model-box__title {
  position: relative;
  margin-bottom: 4vw;
  overflow: hidden;
  transition: .5s;
  opacity: 0;
  font-size: 4.8vw;
}
.active .model-box__title {
  opacity: 1;
}
.model-box__image {
  position: relative;
  padding: 0 4vw 8vw;
  transition: .5s .2s;
  opacity: 0;
}
.active .model-box__image {
  opacity: 1;
}
.model-box__image img {
  width: 100%;
  height: 53.34vw;
  object-fit: contain;
}

.mv {
  position: absolute;
  top: 430px;
  left: 0;
  width: 100%;
  height: 300px;
  background: url("../../images/img_mv.jpg") no-repeat center bottom/cover;
}

.resource {
  position: relative;
  z-index: 2;
  margin-top: -8vw;
  padding-top: 32vw;
  background-color: #fff;
}
.resource::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 56vw;
  background: linear-gradient(to top, #fff 0%, #fff 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%) no-repeat left top/auto 100%, url("../../images/bg_resource.jpg") no-repeat center top/100% auto;
}
.resource__inner {
  position: relative;
  z-index: 2;
}
.resource__copy {
  margin: 0 2.67vw 8vw;
  font-size: 4.27vw;
  text-align: center;
}

.resource-heading {
  margin: 0 0 60px;
  font-size: 4.27vw;
  font-weight: normal;
  text-align: center;
}
.resource-heading__ja {
  display: block;
  transition: filter .3s 1.3s, opacity .3s 1s;
  opacity: 0;
  filter: blur(6px);
}
.active .resource-heading__ja {
  opacity: 1;
  filter: blur(0);
}
.resource-heading__times {
  margin: 0 .3em;
  color: #a1a3a4;
}

.resource-job {
  padding: 8vw 0;
  background-color: #00233b;
  color: #fff;
}
.resource-job__box {
  position: relative;
  margin: 0 8vw 8vw;
  padding: 0 4vw;
  transform: translateY(30px);
  transition: .5s;
  opacity: 0;
}
.resource-job__box:last-child {
  margin-bottom: 0;
}
.resource-job__box.active {
  transform: translateY(0);
  opacity: 1;
}
.resource-job__icon {
  display: block;
  position: absolute;
  top: 1.34vw;
  left: 4vw;
  width: 13.34vw;
  height: 13.34vw;
}
.resource-job__name {
  margin: 0 0 1.34vw 16vw;
  font-size: 4.27vw;
  font-weight: bold;
}
.resource-job__role {
  display: inline-block;
  margin: 0 0 2.67vw 16vw;
  padding: 0.8vw 2.67vw;
  border: 1px solid #fff;
  border-radius: 100vh;
  font-size: 3.2vw;
}
.resource-job__text {
  margin: 0;
  font-size: 3.74vw;
  text-align: left;
}

.resource-composition {
  position: relative;
  margin: 0 2.67vw 8vw;
  transition: .5s;
  opacity: 0;
}
.resource-composition img {
  width: 100%;
}
.resource-composition.active {
  opacity: 1;
}

.service-copy {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  display: block;
  margin: 0;
  overflow: hidden;
  font-size: 10.67vw;
  text-align: center;
}
.service-copy.is-loading {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: blurFade 1.5s 3.5s both;
  white-space: nowrap;
}
.is-loading .service-copy__creative {
  position: relative;
  animation: color .2s 2s both;
  color: #fff;
}
.is-loading .service-copy__creative::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: certain01 .5s both;
  background-color: #272727;
}
.service-copy__times {
  display: block;
  position: relative;
  height: 10.67vw;
  margin: -1.33vw auto -5.33vw;
  color: transparent;
}
.service-copy__times::before, .service-copy__times::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 10.67vw;
  opacity: 0;
  background-color: #39f897;
}
.service-copy__times::before {
  transform: rotate(35deg);
  animation: times01 .5s .7s both;
}
.service-copy__times::after {
  transform: rotate(-35deg);
  animation: times02 .5s 1.2s both;
}
.resource .service-copy__business {
  display: inline-block;
  transform: translateX(-100vh);
  transition: .5s .3s;
}
.resource .service-copy__tech {
  display: inline-block;
  transform: translateX(100vh);
  transition: .5s .5s;
}
.active .service-copy__business, .active .service-copy__tech {
  transform: translateX(0);
}
@keyframes certain01 {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
@keyframes certain02 {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 0);
  }
}
@keyframes color {
  0% {
    color: #fff;
  }
  100% {
    color: #272727;
  }
}
@keyframes times01 {
  0% {
    transform: translate(10px, -10px) rotate(35deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(35deg);
    opacity: 1;
  }
}
@keyframes times02 {
  0% {
    transform: translate(-10px, -10px) rotate(-35deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(-35deg);
    opacity: 1;
  }
}
@keyframes blurFade {
  0% {
    opacity: 1;
    filter: blur(0px);
  }
  50% {
    opacity: 1;
    filter: blur(60px);
  }
  100% {
    opacity: 0;
    filter: blur(100px);
  }
}
@keyframes positionSet {
  0% {
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    top: 0;
    transform: translate(-50%, 20.27vw);
  }
  90% {
    opacity: 0;
  }
  100% {
    top: 0;
    transform: translate(-50%, 20.27vw);
    opacity: 0;
  }
}
.system {
  background: #fff;
  box-shadow: 0 0 30px rgba(39, 39, 39, 0.2);
  position: relative;
  z-index: 1;
  margin-top: 13.34vw;
  background-color: rgba(255, 255, 255, 0.8);
}
.system__inner {
  margin: 0 auto;
  padding: 8vw 0 13.34vw;
}
.system__heading {
  margin: 0 0 5.34vw;
  font-size: 6.4vw;
  font-weight: normal;
  text-align: center;
}
.system__copy {
  margin: 0 0 8vw;
  font-size: 4.27vw;
  text-align: center;
}
.system__text {
  margin: 0 4vw 8vw;
  transition: filter .2s .3s, opacity .5s;
  opacity: 0;
  font-size: 3.74vw;
  text-align: center;
  filter: blur(6px);
}
.active + .system__text {
  opacity: 1;
  filter: blur(0);
}

.system-service__box {
  background: #fff;
  box-shadow: 0 0 10px rgba(39, 39, 39, 0.2);
  box-sizing: border-box;
  width: 90%;
  margin: 0 auto 2.67vw;
  padding: 2.67vw 2.67vw 4vw;
  transform: translateY(50px);
  transition: transform .5s, opacity .5s;
  border-radius: 2.14vw;
  opacity: 0;
}
.system-service__box.active {
  transform: translateY(0);
  opacity: 1;
}
.system-service__image {
  margin-bottom: 4vw;
}
.system-service__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.system-service__title {
  font-family: sofia-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  margin: 0 0 1.34vw;
  font-size: 5.34vw;
  text-align: center;
}
.system-service__title-ja {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.74vw;
  font-weight: bold;
}
.system-service__text {
  margin: 0 0 2.67vw;
  font-size: 3.2vw;
  text-align: center;
}
.system-service__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32vw;
  height: 8vw;
  margin: 0 auto;
  transition: 0.2s;
  background-color: #272727;
  border-radius: 100vh;
  color: #fff;
  font-size: 3.2vw;
  font-weight: normal;
  text-decoration: none;
}
.system-service__link:hover {
  box-shadow: 0 0 20px rgba(39, 39, 39, 0.2);
  background-color: #ff5153;
  letter-spacing: .15em;
}

.system-flow {
  margin: 0 4vw 8vw;
}
.system-flow img {
  transition: .5s;
  opacity: 0;
}
.system-flow.active img {
  opacity: 1;
}