@charset "UTF-8";
/*======================================
    font
======================================*/
@font-face {
  font-family: "Noto Sans JP";
  src: url(../fonts/NotoSansJP-Light.ttf) format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Suranna";
  src: url(../fonts/Suranna-Regular.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Montserrat";
  src: url(../fonts/Montserrat-Regular.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "GFS Didot";
  src: url(../fonts/GFSDidot-Regular.ttf) format("truetype");
  font-weight: 400;
}
/*======================================
    color
======================================*/
/*======================================
    common
======================================*/
html {
  font-size: 10px;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
}

body {
  background-color: #10192F;
}
body.no-scroll {
  overflow: hidden;
}

img {
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  cursor: pointer;
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}
.is-nowrap {
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  br.is-pc {
    display: none;
  }
}

br.is-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  br.is-sp {
    display: block;
  }
}

/*======================================
    layout
======================================*/
.container {
  overflow: hidden;
  font-size: min(1.2519561815vw, 1.6rem);
}
@media screen and (max-width: 767px) {
  .container {
    font-size: min(4.2666666667vw, 1.6rem);
  }
}

.inner {
  width: 90%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .inner {
    width: 88%;
  }
}

/*======================================
    logo
======================================*/
.logo {
  display: block;
  width: 8em;
}

.logo__img {
  display: block;
  max-width: 6.5em;
  margin-left: auto;
  margin-right: auto;
}

.logo__en {
  font-family: "Montserrat", sans-serif;
  display: block;
  font-size: 0.8125em;
  line-height: 1.2307692308;
  margin-top: 1.15em;
  letter-spacing: 0.56em;
  text-align: center;
}

.logo__name {
  display: block;
  margin-top: 0.5em;
}

/*======================================
    button
======================================*/
.more-works {
  display: block;
  width: 12.375em;
  height: 3.875em;
  padding-bottom: 1.25em;
  border-bottom: 2px solid #fff;
  text-align: right;
}
.more-works:hover span.text {
  opacity: 0.7;
}
.more-works:hover span.text::before {
  transform: translate(0.25em, -50%);
}
.more-works span.text {
  display: inline-block;
  font-size: 1.125em;
  font-family: "Suranna", serif;
  padding-right: 4.56em;
  position: relative;
  line-height: 2.3333333333;
  transition: opacity 0.3s ease;
}
.more-works span.text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.39em;
  transform: translateY(-50%);
  width: 2.33em;
  height: 2.33em;
  background: url(../img/more_arrow.svg) no-repeat center/contain;
  transition: transform 0.3s ease;
}

.more-view {
  display: block;
}
.more-view:hover span.text {
  opacity: 0.7;
}
.more-view:hover span.text::before {
  transform: translate(0.5em, -50%);
}
.more-view:hover span.text::after {
  transform: scale(1, 1);
}
.more-view span.text {
  display: inline-block;
  font-size: 1.125em;
  font-family: "Suranna", serif;
  padding-right: 4.56em;
  position: relative;
  line-height: 2.3333333333;
  transition: opacity 0.3s ease;
}
.more-view span.text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.39em;
  transform: translateY(-50%);
  width: 2.33em;
  height: 2.33em;
  background: url(../img/more_arrow.svg) no-repeat center/contain;
  transition: transform 0.3s ease;
}
.more-view span.text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4em;
  height: 1px;
  background-color: #fff;
  transform: scale(0, 1);
  transition: transform 0.3s ease;
  transform-origin: left top;
}
@media screen and (max-width: 767px) {
  .more-view.sp-right span.text {
    padding-right: 3.8em;
  }
  .more-view.sp-right span.text::before {
    right: 0;
  }
}

/*======================================
    pagination
======================================*/
.a-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  margin: 8.3em auto 14em;
}
@media screen and (max-width: 767px) {
  .a-pagination {
    margin: 5em auto 0;
  }
}
.a-pagination .prev,
.a-pagination .next {
  font-family: "Suranna", serif;
  letter-spacing: 0.17em;
  display: block;
  line-height: 1.75;
}
.a-pagination .prev.inactive,
.a-pagination .next.inactive {
  color: #495777;
}
.a-pagination .prev {
  margin-right: 1.1em;
}
.a-pagination .next {
  margin-left: 1.1em;
}
.a-pagination .page-numbers {
  display: block;
  padding: 0 0.78125em;
  line-height: 1.75;
}
.a-pagination .page-numbers.current {
  color: #495777;
}

.s-pagination {
  max-width: 22.8125em;
  margin: 9.5em auto 10em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0.625em;
}
@media screen and (max-width: 767px) {
  .s-pagination {
    margin: 6.25em auto 5em;
    max-width: 18.75em;
  }
}

.s-pagination__link {
  display: block;
  font-family: "Suranna", serif;
  letter-spacing: 0.17em;
  transition: opacity 0.3s ease;
}
.s-pagination__link.-back {
  text-align: center;
}
.s-pagination__link.-next {
  text-align: right;
}
.s-pagination__link:hover {
  opacity: 0.7;
}
.s-pagination__link.disable {
  color: #495777;
}
.s-pagination__link.disable:hover {
  opacity: 1;
  cursor: auto;
}

/*======================================
    tab
======================================*/
.tab-area {
  display: none;
}
.tab-area.show {
  display: block;
}

/*======================================
    animation
======================================*/
.fadeInUp {
  opacity: 0;
  translate: 0 40px;
  transition: all 1s ease;
}
.fadeInUp.show {
  opacity: 1;
  translate: 0 0;
}

.imgInLeft {
  position: relative;
}
.imgInLeft::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #10192F;
  transform-origin: right top;
  transform: scale(1, 1);
  transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.imgInLeft.show::after {
  transform: scale(0, 1);
}

.parallax {
  overflow: hidden;
}
.parallax img {
  height: 150%;
  object-fit: cover;
}

.header-home {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.header-home.show {
  opacity: 1;
  visibility: visible;
}

.header__logo {
  position: fixed;
  top: 1.125em;
  left: 2.375em;
  z-index: 400;
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  .header__logo {
    top: 0.625em;
    left: 1em;
    width: 5em;
  }
  .header__logo .logo__img {
    width: 81.25%;
  }
  .header__logo .logo__en {
    font-size: 0.5em;
  }
}
.header__logo.active {
  transform: translate(-15%, -15%) scale(0.7);
}

.header__wrap {
  width: 17.875em;
  position: fixed;
  top: 2.25em;
  right: 2.75em;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .header__wrap {
    width: auto;
    top: 2.5em;
    right: 1.375em;
  }
}

.header__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "GFS Didot", sans-serif;
  font-size: 1.125em;
  width: 10.11em;
  height: 2.56em;
  border: 1px solid #fff;
  border-radius: 1.6em;
  background-color: #10192F;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.header__contact:hover {
  color: #10192F;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .header__contact {
    display: none;
  }
}

.drawer__icon:hover {
  cursor: pointer;
}
.drawer__icon.active .drawer__bar.-bar1 {
  top: 50%;
  transform: translate(-50%, -50%) rotate(25deg);
}
.drawer__icon.active .drawer__bar.-bar2 {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
}

.drawer__bars {
  display: block;
  position: relative;
  width: 4.125em;
  height: 1.1875em;
}

.drawer__bar {
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.drawer__bar.-bar1 {
  top: 0;
}
.drawer__bar.-bar2 {
  top: 100%;
}

.drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 300;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: auto 45.5em;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s ease, visibility 0.5s ease, opacity 1s ease;
}
@media screen and (max-width: 767px) {
  .drawer {
    display: flex;
    flex-direction: column;
  }
}
.drawer.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.drawer-swiper {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .drawer-swiper {
    height: 13.75em;
  }
}

.drawer__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer__contents {
  background-color: #10192F;
  padding-top: 20.5%;
  padding-left: 15%;
  padding-bottom: 2.5em;
  overflow: scroll;
}
@media screen and (max-width: 767px) {
  .drawer__contents {
    padding-top: 2em;
    padding-left: 0;
    flex: 1;
  }
}

.drawer__container {
  display: grid;
  grid-template-columns: auto 8.25em;
  max-width: 24.875em;
}

.drawer__container--item {
  display: flex;
  flex-direction: column;
}

.drawer__lists {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.drawer__list.mt-m {
  margin-top: 0.5em;
}
.drawer__list.mt-l {
  margin-top: 2.5em;
}

.drawer__list--head {
  display: inline-block;
  font-size: 2.25em;
  font-family: "Suranna", serif;
  position: relative;
}
.drawer__list--head::before {
  content: "";
  position: absolute;
  bottom: -0.25em;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scale(0, 1);
  transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform-origin: right top;
}
.drawer__list--head:hover::before {
  transform: scale(1, 1);
  transform-origin: left top;
}
@media screen and (max-width: 767px) {
  .drawer__list--head {
    font-size: 1.875em;
  }
}

.drawer__subs {
  margin-top: 1.875em;
}

.drawer__sub:nth-child(n+2) {
  margin-top: 1.25em;
}

.drawer__sub--link {
  display: inline-block;
  font-family: "Suranna", serif;
  position: relative;
}
.drawer__sub--link::before {
  content: "";
  position: absolute;
  bottom: -0.25em;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scale(0, 1);
  transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform-origin: right top;
}
.drawer__sub--link:hover::before {
  transform: scale(1, 1);
  transform-origin: left top;
}

.copyright {
  font-size: 0.75em;
  font-family: "GFS Didot", sans-serif;
  margin-top: 8.33em;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .copyright {
    margin-top: 6.33em;
  }
}
.copyright small {
  font-size: inherit;
}

.footer {
  border-top: 1px solid #FFFFFF;
  padding: 8.125em 0;
}
@media screen and (max-width: 767px) {
  .footer {
    border-top: none;
    padding: 5.125em 0;
  }
}

.f__wrap {
  display: flex;
}
@media screen and (max-width: 767px) {
  .f__wrap {
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .f__logo {
    margin-left: auto;
    margin-right: auto;
  }
}

.f__infos--texts {
  margin-top: 2.75em;
}
@media screen and (max-width: 767px) {
  .f__infos--texts {
    margin-top: 4.0625em;
    text-align: center;
  }
}

.f__infos--text {
  font-size: 0.75em;
  line-height: 1.8333333333;
}
.f__infos--text.mt {
  margin-top: 1.83em;
}

@media screen and (max-width: 767px) {
  .f__links--wrap {
    margin-top: 3.75em;
  }
}

@media screen and (min-width: 768px) {
  .f__links--wrap {
    margin-left: auto;
    padding-top: 0.5em;
  }
  .f__links {
    max-width: 100%;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
  }
  .f__links .drawer__container--item {
    display: contents;
  }
  .f__links .drawer__list--head {
    font-size: 1.25em;
  }
  .f__links .drawer__sub--link {
    white-space: nowrap;
  }
  .f__links .f__lists--right {
    max-width: 4.625em;
    margin-left: 10em;
    height: auto;
    width: 100%;
    margin-right: 1em;
  }
  .f__links .copyright {
    margin-top: 16.2em;
    margin-right: 0.5em;
    text-align: right;
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .f__links--column {
    flex-direction: row;
  }
  .f__links--column .drawer__list:nth-child(n+2) {
    margin-top: 0;
  }
  .f__links--column .drawer__list:nth-child(2) {
    margin-left: 6.625em;
  }
  .f__links--column .drawer__list:nth-child(3) {
    margin-left: 9.0625em;
  }
}
.page-top {
  width: 4.125em;
  position: fixed;
  z-index: 300;
  bottom: 1.25em;
  right: 1.25em;
  display: none;
  transition: opacity 0.3s ease;
}
.page-top:hover {
  opacity: 0.7;
}
@media screen and (max-width: 767px) {
  .page-top {
    width: 2.5em;
    bottom: 0.625em;
    right: 0.625em;
  }
}

/*======================================
    TOP 共通
======================================*/
.top-section-ttl {
  font-size: 5.25em;
  font-family: "Suranna", serif;
  letter-spacing: 0.13em;
}
@media screen and (max-width: 767px) {
  .top-section-ttl {
    font-size: 4em;
  }
}

.top-view-more {
  margin-top: 3.4em;
}

/*======================================
    FV
======================================*/
.fv__inner {
  display: grid;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}

.fv__text {
  width: 21.625em;
  height: 37.75%;
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
  margin-left: 1.375em;
  margin-top: 9%;
  transition: opacity 3s ease-in;
  opacity: 0;
}
.fv__text.show {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .fv__text {
    width: 50.67vw;
    height: 20.32%;
    margin-top: 19vh;
    margin-left: 0;
  }
}
.fv__text img {
  height: 100%;
  object-fit: contain;
}

.fv__imgs {
  display: flex;
  grid-column: 1/2;
  grid-row: 1/2;
  margin: 0 calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .fv__imgs {
    align-items: flex-end;
    flex-direction: row-reverse;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .fv__imgs {
    flex-direction: column;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }
}

.fv__img1 {
  width: 21.25em;
  height: 46.125%;
  align-self: start;
  margin-left: 4.75em;
}
@media screen and (max-width: 767px) {
  .fv__img1 {
    width: 52.8%;
    height: 26.48%;
    margin-left: auto;
  }
}
.fv__img1 img {
  height: 100%;
  object-fit: cover;
}

.fv__img2 {
  width: 22.5em;
  height: 75.25%;
  margin-left: 5.875em;
}
@media screen and (max-width: 767px) {
  .fv__img2 {
    width: 48%;
    height: 37.68%;
    margin-top: 11.4%;
    margin-left: 36%;
  }
}
.fv__img2 img {
  height: 100%;
  object-fit: cover;
}

.fv__img3 {
  width: 25.5em;
  height: 33.625%;
}
@media screen and (max-width: 767px) {
  .fv__img3 {
    width: 56%;
    height: 17.12%;
    margin-top: 11.5%;
  }
}
.fv__img3 img {
  height: 100%;
  object-fit: cover;
}

.fv__contents {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .fv__contents {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 5.25%;
  }
}
@media screen and (max-width: 767px) {
  .fv__contents {
    margin-top: auto;
  }
}

.fv__logo {
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .fv__logo {
    transform: translate(15%, 2%) scale(0.7);
  }
}

.fv__logo--en {
  translate: 0 1em;
  opacity: 0;
  transition: all 0.3s ease;
}
.fv__logo--en.show {
  translate: 0 0;
  opacity: 1;
}

.fv__contents--wrap {
  margin-top: 3.125em;
}
@media screen and (max-width: 767px) {
  .fv__contents--wrap {
    display: none;
  }
}

.fv__links {
  display: flex;
  column-gap: 1.25em;
  justify-content: flex-end;
}

.fv__link a {
  font-family: "GFS Didot", sans-serif;
  display: inline-block;
  transition: opacity 0.3s ease;
  position: relative;
}
.fv__link a::before {
  content: "";
  position: absolute;
  bottom: -0.25em;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scale(0, 1);
  transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform-origin: right top;
}
.fv__link a:hover::before {
  transform: scale(1, 1);
  transform-origin: left top;
}
.fv__link a:hover {
  opacity: 0.7;
}

.fv__pages {
  display: flex;
  column-gap: 1.125em;
  justify-content: flex-end;
  margin-top: 1.75em;
}

.fv__page a {
  font-family: "Suranna", serif;
  display: block;
  transition: opacity 0.3s ease;
  font-size: 1.125em;
  padding-bottom: 0.3em;
  position: relative;
}
.fv__page a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.fv__page a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20%;
  height: 1px;
  background-color: #10192F;
  transform: translateX(-100%);
  transform-origin: right top;
  transition: all 0.7s ease;
  z-index: 2;
}
.fv__page a:hover {
  opacity: 0.7;
}
.fv__page a:hover::before {
  transform: translateX(100%);
  transform-origin: left top;
  left: 80%;
}

.tree {
  position: absolute;
  z-index: 2;
  background-color: #10192F;
  display: flex;
  align-items: flex-end;
}
@media screen and (min-width: 768px) {
  .tree {
    top: 1.5em;
    right: -4.25em;
    column-gap: 0.375em;
    padding: 0.95em 1em;
    transform: translateX(1px);
  }
}
@media screen and (max-width: 767px) {
  .tree {
    top: 1.75em;
    left: -1.375em;
    column-gap: 0.25em;
    padding: 0.5em 0.75em;
  }
}

.tree__icon {
  width: 1.3125em;
}
@media screen and (max-width: 767px) {
  .tree__icon {
    width: 1em;
  }
}

.tree__text {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
}
@media screen and (max-width: 767px) {
  .tree__text {
    font-size: 0.75em;
  }
}
.tree__text span.number {
  font-family: "Suranna", serif;
  display: inline-block;
  margin: 0 0.2em;
  font-size: 2.5625em;
}
@media screen and (max-width: 767px) {
  .tree__text span.number {
    font-size: 2.5em;
  }
}

/*======================================
    SERVICE
======================================*/
.top-service {
  margin-top: 8.75em;
}
@media screen and (max-width: 767px) {
  .top-service {
    margin-top: 6em;
  }
}

.top-service__wrap {
  display: grid;
  grid-template-columns: 36.5em auto;
  column-gap: 12.5em;
  margin-top: 1.75em;
}
@media screen and (max-width: 767px) {
  .top-service__wrap {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 3.8em;
  }
}

.top-service__imgs {
  position: relative;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .top-service__imgs {
    width: 100%;
  }
}

.top-service__img1 {
  width: 30.5em;
  margin-left: auto;
  margin-top: 4em;
}
@media screen and (max-width: 767px) {
  .top-service__img1 {
    width: 9.3125em;
    margin-left: 1.0625em;
    margin-top: 3em;
  }
}

.top-service__img2 {
  width: 33.75em;
  margin-left: -4.25em;
  position: relative;
  z-index: 2;
  margin-top: -4.5em;
}
@media screen and (max-width: 767px) {
  .top-service__img2 {
    width: 8.5em;
    margin-left: -1.375em;
    height: 6.0625em;
    margin-top: -1.1em;
  }
  .top-service__img2 div {
    height: 100%;
  }
  .top-service__img2 img {
    height: 100%;
    object-fit: cover;
  }
}

@media screen and (max-width: 767px) {
  .top-service__contents {
    width: fit-content;
    max-width: 14.375em;
    margin-right: 1.75em;
    margin-left: auto;
  }
}

@media screen and (min-width: 768px) {
  .top-service__texts--wrap .section-ttl__head span.lg {
    margin-bottom: 0.1em;
  }
  .top-service__texts--wrap .section-ttl {
    margin-top: 1.5em;
  }
}

.top-service__links {
  margin-top: 4.5em;
}
@media screen and (max-width: 767px) {
  .top-service__links {
    margin-top: 2em;
  }
}

.top-service__link:nth-child(n+2) {
  margin-top: 1.8em;
}
@media screen and (max-width: 767px) {
  .top-service__link:nth-child(n+2) {
    margin-top: 1.6em;
  }
}

.top-service__link--link {
  display: grid;
  grid-template-columns: 8.625em auto;
  column-gap: 1.25em;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .top-service__link--link {
    grid-template-columns: auto 5.75em;
    column-gap: 1em;
  }
}
.top-service__link--link span.en {
  display: block;
  font-size: 1.25em;
  font-family: "Suranna", serif;
}
@media screen and (max-width: 767px) {
  .top-service__link--link span.en {
    font-size: 1.125em;
    white-space: nowrap;
  }
}
.top-service__link--link span.jp {
  display: block;
  font-size: 1.625em;
  font-weight: 600;
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
  color: #495777;
}
@media screen and (max-width: 767px) {
  .top-service__link--link span.jp {
    font-size: 1.4375em;
  }
}

.top-service__more {
  margin-top: 3.25em;
}
@media screen and (max-width: 767px) {
  .top-service__more {
    text-align: right;
    margin-top: 3.5em;
  }
}

.top-service__img3 {
  width: 18.5em;
  margin-left: auto;
  margin-top: 5.625em;
  position: relative;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .top-service__img3 {
    display: none;
  }
}

.top-green {
  margin-top: 10em;
}
@media screen and (max-width: 767px) {
  .top-green {
    margin-top: 9em;
  }
}

.top-green__wrap {
  display: grid;
}

.top-green__bg {
  grid-column: 1/2;
  grid-row: 1/2;
  z-index: -2;
  margin: 0 calc(50% - 50vw);
  height: 56.25em;
}
@media screen and (max-width: 767px) {
  .top-green__bg {
    height: 63.75em;
  }
}
.top-green__bg img {
  height: 150%;
  object-fit: cover;
  display: block;
}
.top-green__bg .parallax {
  position: relative;
}
.top-green__bg .parallax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1A2238;
  opacity: 0.9;
  mix-blend-mode: multiply;
  z-index: 2;
}

.top-green__imgs {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: -1;
}

.top-green__img1 {
  width: 40em;
  margin-right: -4.25em;
  margin-left: auto;
  margin-top: 4.1em;
}
@media screen and (max-width: 767px) {
  .top-green__img1 {
    width: 18.375em;
    margin-right: -1.375em;
    margin-top: 12.75em;
  }
}

.top-green__img2 {
  width: 23.25em;
  margin-left: -4.25em;
  margin-top: -22.75em;
}
@media screen and (max-width: 767px) {
  .top-green__img2 {
    width: 10em;
    margin-left: -1.375em;
    margin-top: 6em;
    translate: 0 60%;
  }
}

.top-green__img3 {
  width: 19.375em;
  margin-left: auto;
  margin-right: 10em;
  margin-top: -0.75em;
}
@media screen and (max-width: 767px) {
  .top-green__img3 {
    width: 6.25em;
    margin-right: 1.5em;
    margin-top: -12.75em;
  }
}

.top-green__img4 {
  width: 26.625em;
  margin-left: 3.4em;
  margin-top: -13.2em;
}
@media screen and (max-width: 767px) {
  .top-green__img4 {
    width: 12.75em;
    margin-top: 9.5em;
    margin-left: 2.2em;
    translate: 0 70%;
  }
}

.top-green__texts {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
  max-width: 22.5em;
  margin-top: 20em;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-7%);
}
@media screen and (max-width: 767px) {
  .top-green__texts {
    transform: translateX(0);
    margin-left: 2.25em;
    margin-top: 24.5em;
  }
  .top-green__texts .top-view-more {
    margin-top: 1em;
  }
}

@media screen and (min-width: 768px) {
  .top-green__texts--wrap .section-ttl__head span.lg {
    margin-bottom: 0.05em;
  }
  .top-green__texts--wrap .section-ttl {
    margin-top: 1.25em;
  }
}
@media screen and (max-width: 767px) {
  .top-green__texts--wrap .section-ttl__head {
    margin-left: -0.05em;
  }
  .top-green__texts--wrap .section-ttl__head span.lg {
    margin-bottom: 0.1em;
  }
  .top-green__texts--wrap .section-ttl {
    margin-top: 0.9em;
  }
}

.top-planning {
  margin-top: 4.6em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .top-planning {
    margin-top: 7.5em;
  }
}

.top-planning__bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 15.2%;
  left: 0;
}

.top-planning__wrap {
  display: grid;
  grid-template-columns: auto 26.625em;
  column-gap: 9.0625em;
}
@media screen and (max-width: 767px) {
  .top-planning__wrap {
    display: flex;
    flex-direction: column-reverse;
  }
}

.top-planning__texts--wrap {
  width: fit-content;
  margin-left: auto;
  margin-right: 4em;
}
.top-planning__texts--wrap svg {
  width: 100% !important;
  height: auto !important;
}
@media screen and (max-width: 767px) {
  .top-planning__texts--wrap {
    max-width: 13.75em;
    width: 100%;
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) {
  .top-planning__texts--wrap .section-ttl__head span.lg {
    margin-bottom: 0.1em;
  }
}
@media screen and (max-width: 767px) {
  .top-planning__texts--wrap .section-ttl__head {
    margin-right: -0.5em;
  }
  .top-planning__texts--wrap .top-view-more {
    margin-top: 3.2em;
    margin-left: 0.5em;
  }
}

.top-planning__img1 {
  margin-top: 9em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .top-planning__img1 {
    width: 19em;
    margin-left: auto;
    margin-right: -1.375em;
    margin-top: 4.2em;
  }
}

.top-planning__img1--img {
  opacity: 0.28;
}
@media screen and (min-width: 768px) {
  .top-planning__img1--img {
    translate: 0 20%;
  }
}

.top-planning__text {
  position: absolute;
  z-index: 2;
  width: 26.375em;
  top: 8em;
  left: 0;
  transform: translateX(-20%);
}
@media screen and (max-width: 767px) {
  .top-planning__text {
    width: 20.5em;
    top: 4.6em;
    transform: translateX(-14%);
  }
}

.top-planning__imgs {
  padding-top: 8.4em;
}
@media screen and (max-width: 767px) {
  .top-planning__imgs {
    padding-top: 4em;
  }
}

.top-planning__img2 {
  width: 31.875em;
  margin-left: -4.25em;
}
@media screen and (min-width: 768px) {
  .top-planning__img2 {
    translate: 0 80%;
  }
}
@media screen and (max-width: 767px) {
  .top-planning__img2 {
    margin-left: -1.375em;
    width: 11.875em;
    translate: 0 80%;
  }
}

.top-planning__img3 {
  margin-top: -8em;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .top-planning__img3 {
    width: 11.375em;
    margin-top: -2.8em;
    margin-left: 4.25em;
  }
}

.top-works {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .top-works {
    margin-top: 7.75em;
  }
}

.top-works__wrap {
  display: grid;
  grid-template-columns: auto 45em;
}
@media screen and (max-width: 767px) {
  .top-works__wrap {
    grid-template-columns: 1fr;
  }
}

.top-works__head {
  padding-top: 10em;
}
@media screen and (min-width: 768px) {
  .top-works__head .top-section-ttl {
    line-height: 1.3333333333;
  }
  .top-works__head .top-view-more {
    margin-left: 0.5em;
    margin-top: 3em;
  }
}
@media screen and (max-width: 767px) {
  .top-works__head {
    padding-top: 0;
  }
  .top-works__head .top-section-ttl {
    line-height: 1.4375;
  }
  .top-works__head .top-view-more {
    margin-left: 0.5em;
    margin-top: 1.4em;
  }
}

@media screen and (max-width: 767px) {
  .top-works__contents {
    margin-top: 5em;
  }
}

.top-works__lists {
  counter-reset: number;
  column-gap: 2.625em;
  row-gap: 5.625em;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .top-works__lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.125em;
    row-gap: 2.5em;
  }
}
@media screen and (min-width: 550px) and (max-width: 767px) {
  .top-works__lists {
    grid-template-columns: repeat(3, 1fr);
  }
}

.top-works__list {
  position: relative;
  width: 100%;
}
.top-works__list::before {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Suranna", serif;
  font-size: 6.625em;
  filter: drop-shadow(0 0.03em 0.057em rgba(0, 0, 0, 0.1));
  z-index: 2;
  transform: translate(-32%, -50%);
}
@media screen and (max-width: 767px) {
  .top-works__list::before {
    font-size: 3.5em;
  }
}
.top-works__list:first-child {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .top-works__list:first-child {
    grid-column: 1/3;
    grid-row: 1/2;
    margin-bottom: 0.25em;
  }
  .top-works__list:first-child::before {
    top: 5.45em;
    transform: translate(-4%, -50%);
  }
  .top-works__list:first-child .top-works__list--tags {
    margin-left: 3.75em;
  }
  .top-works__list:first-child .top-works__list--tags li {
    font-size: 0.8125em;
  }
}
@media screen and (min-width: 550px) and (max-width: 767px) {
  .top-works__list:first-child {
    grid-column: 1/4;
  }
}
@media screen and (max-width: 767px) {
  .top-works__list:first-child .top-works__list--img {
    margin: 0 calc(50% - 50vw);
    height: 18.625em;
  }
}
.top-works__list:first-child .top-works__list--img::before {
  padding-top: 50.9722222222%;
}
.top-works__list:first-child .top-works__list--body {
  margin-top: 1.75em;
}
@media screen and (min-width: 768px) {
  .top-works__list:first-child .top-works__list--body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.625em;
    column-gap: 3.125em;
  }
}
@media screen and (max-width: 767px) {
  .top-works__list:first-child .top-works__list--body {
    margin-top: 1em;
  }
}
@media screen and (min-width: 768px) {
  .top-works__list:nth-child(n+2) {
    max-width: 13.25em;
    margin-left: auto;
    margin-right: auto;
  }
}
.top-works__list:nth-child(n+2)::before {
  transform: translate(-26%, -57%);
}
@media screen and (max-width: 767px) {
  .top-works__list:nth-child(n+2)::before {
    top: 2.95em;
    transform: translate(0%, -50%);
  }
}
@media screen and (max-width: 767px) {
  .top-works__list:nth-child(n+2) .top-works__list--img {
    height: 9.75em;
  }
}
.top-works__list:nth-child(n+2) .top-works__list--img::before {
  padding-top: 100%;
}
.top-works__list:nth-child(n+2) .top-works__list--body {
  margin-top: 1.2em;
}
@media screen and (max-width: 767px) {
  .top-works__list:nth-child(n+2) .top-works__list--body {
    margin-top: 2.75em;
  }
}
.top-works__list:nth-child(n+2) .top-works__list--ttl {
  margin-top: 0.5em;
}

.top-works__list--link {
  display: block;
  transition: opacity 0.3s ease;
}
.top-works__list--link:hover {
  opacity: 0.7;
}
.top-works__list--link:hover .top-works__list--img img {
  transform: scale(1.05);
}

.top-works__list--img {
  position: relative;
  overflow: hidden;
}
.top-works__list--img::before {
  content: "";
  display: block;
}
@media screen and (max-width: 767px) {
  .top-works__list--img::before {
    display: none;
  }
}
.top-works__list--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
@media screen and (min-width: 768px) {
  .top-works__list--img img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.top-works__list--tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5em;
  row-gap: 0.25em;
}
.top-works__list--tags li {
  position: relative;
  padding-left: 0.7em;
  font-family: "Suranna", serif, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
}
.top-works__list--tags li::before {
  content: "#";
  position: absolute;
  top: 0;
  left: 0;
}

.top-works__list--ttl {
  line-height: 1.375;
}
@media screen and (max-width: 767px) {
  .top-works__list--ttl {
    font-size: 0.9375em;
    line-height: 1.3333333333;
    margin-top: 0.5em;
  }
}

.top-news {
  margin-top: 6.5em;
}
@media screen and (max-width: 767px) {
  .top-news {
    margin-top: 6.75em;
  }
}

.top-news__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

@media screen and (min-width: 768px) {
  .top-news__more-view {
    transform: translateX(6%);
    margin-bottom: 0.5em;
  }
}

.top-news__cards {
  margin: 4.125em -4.25em 0 -4.25em;
  column-gap: 1.5625em;
  display: flex;
}
@media screen and (min-width: 768px) {
  .top-news__cards .news__card {
    max-width: 25.625em;
  }
  .top-news__cards .news__card:nth-child(2) {
    margin-top: 4.5625em;
  }
}
@media screen and (max-width: 767px) {
  .top-news__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 4em auto 0;
    row-gap: 3.125em;
    column-gap: 1.125em;
  }
  .top-news__cards .news__card:first-child {
    grid-column: 1/3;
    grid-row: 1/2;
  }
  .top-news__cards .news__card:first-child .news__card--img {
    height: 18.5em;
    margin-left: -1.375em;
    margin-right: -1.375em;
  }
}

@media screen and (min-width: 768px) {
  .news__card {
    flex: 1;
  }
}

.news__card--link {
  display: block;
  transition: opacity 0.3s ease;
}
.news__card--link:hover {
  opacity: 0.7;
}
.news__card--link:hover .news__card--img img {
  transform: scale(1.1);
}

.news__card--img {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1A2238;
}
@media screen and (min-width: 768px) {
  .news__card--img {
    aspect-ratio: 410/296;
  }
}
@media screen and (max-width: 767px) {
  .news__card--img {
    height: 7em;
  }
}
.news__card--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-noimage {
  width: 30%;
}
.post-noimage img {
  height: auto;
}

.news__card--body {
  text-align: center;
  margin-top: 1.7em;
}
@media screen and (max-width: 767px) {
  .news__card--body {
    text-align: left;
  }
}

.news__card--date {
  font-size: 0.875em;
  line-height: 1.3571428571;
}

.news__card--ttl {
  line-height: 1.375;
  margin-top: 0.5em;
}
@media screen and (max-width: 767px) {
  .news__card--ttl {
    margin-right: -0.5em;
  }
}

.top-access {
  margin-top: 9.75em;
  margin-bottom: 12.75em;
}
@media screen and (max-width: 767px) {
  .top-access {
    margin-top: 6.5em;
    margin-bottom: 0;
  }
}

.top-access__wrap {
  display: grid;
  grid-template-columns: auto 23.625em;
  column-gap: 5em;
}
@media screen and (max-width: 767px) {
  .top-access__wrap {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media screen and (min-width: 768px) {
  .top-access__contents {
    padding-top: 2.5em;
  }
}
.top-access__contents .top-view-more {
  margin-top: 2.8em;
}

.top-access__texts {
  display: flex;
  flex-direction: column;
  row-gap: 1.375em;
  margin-top: 4em;
}
@media screen and (max-width: 767px) {
  .top-access__texts {
    margin-top: 3em;
  }
}

.top-access__texts--text {
  line-height: 1.85;
}

.top-access__map {
  position: relative;
  margin-left: -4.25em;
}
@media screen and (max-width: 767px) {
  .top-access__map {
    margin-left: -1.375em;
    margin-right: -1.375em;
    margin-top: 4.2em;
  }
}
.top-access__map::before {
  content: "";
  display: block;
  padding-top: 70.4%;
}
@media screen and (max-width: 767px) {
  .top-access__map::before {
    padding-top: 140.8%;
  }
}
.top-access__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*======================================
    loading
======================================*/
.loading-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  background-color: #fff;
  display: grid;
}

.loading-icon {
  width: 8.625em;
  grid-column: 1/2;
  grid-row: 1/2;
  margin: auto;
  position: relative;
  z-index: 2;
}

.loading-bg__img {
  transition: opacity 3s ease;
  opacity: 0;
  grid-column: 1/2;
  grid-row: 1/2;
}
.loading-bg__img.show {
  opacity: 1;
}
.loading-bg__img img {
  height: 100%;
  object-fit: cover;
}

/***************************************************
 * Generated by SVG Artista on 7/9/2024, 5:33:44 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  animation: animate-svg-fill-1 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.825s both;
  animation: animate-svg-fill-2 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.825s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.85s both;
  animation: animate-svg-fill-3 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.85s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.875s both;
  animation: animate-svg-fill-4 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.875s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  animation: animate-svg-fill-5 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.925s both;
  animation: animate-svg-fill-6 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.925s both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.95s both;
  animation: animate-svg-fill-7 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.95s both;
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.975s both;
  animation: animate-svg-fill-8 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.975s both;
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
  animation: animate-svg-fill-9 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.025s both;
  animation: animate-svg-fill-10 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.025s both;
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-11 {
  -webkit-animation: animate-svg-fill-11 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s both;
  animation: animate-svg-fill-11 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s both;
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-12 {
  -webkit-animation: animate-svg-fill-12 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.075s both;
  animation: animate-svg-fill-12 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.075s both;
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-13 {
  -webkit-animation: animate-svg-fill-13 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
  animation: animate-svg-fill-13 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-14 {
  -webkit-animation: animate-svg-fill-14 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.125s both;
  animation: animate-svg-fill-14 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.125s both;
}

@-webkit-keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-15 {
  -webkit-animation: animate-svg-fill-15 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.15s both;
  animation: animate-svg-fill-15 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.15s both;
}

@-webkit-keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-16 {
  -webkit-animation: animate-svg-fill-16 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.175s both;
  animation: animate-svg-fill-16 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.175s both;
}

@-webkit-keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-17 {
  -webkit-animation: animate-svg-fill-17 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
  animation: animate-svg-fill-17 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
}

@-webkit-keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-18 {
  -webkit-animation: animate-svg-fill-18 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.225s both;
  animation: animate-svg-fill-18 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.225s both;
}

@-webkit-keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-19 {
  -webkit-animation: animate-svg-fill-19 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.25s both;
  animation: animate-svg-fill-19 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.25s both;
}

@-webkit-keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-20 {
  -webkit-animation: animate-svg-fill-20 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.275s both;
  animation: animate-svg-fill-20 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.275s both;
}

@-webkit-keyframes animate-svg-fill-21 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-21 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-21 {
  -webkit-animation: animate-svg-fill-21 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
  animation: animate-svg-fill-21 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@-webkit-keyframes animate-svg-fill-22 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-22 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-22 {
  -webkit-animation: animate-svg-fill-22 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.325s both;
  animation: animate-svg-fill-22 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.325s both;
}

@-webkit-keyframes animate-svg-fill-23 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-23 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-23 {
  -webkit-animation: animate-svg-fill-23 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.35s both;
  animation: animate-svg-fill-23 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.35s both;
}

@-webkit-keyframes animate-svg-fill-24 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-24 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-24 {
  -webkit-animation: animate-svg-fill-24 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.375s both;
  animation: animate-svg-fill-24 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.375s both;
}

@-webkit-keyframes animate-svg-fill-25 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-25 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-25 {
  -webkit-animation: animate-svg-fill-25 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
  animation: animate-svg-fill-25 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
}

@-webkit-keyframes animate-svg-fill-26 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-26 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-26 {
  -webkit-animation: animate-svg-fill-26 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.425s both;
  animation: animate-svg-fill-26 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.425s both;
}

@-webkit-keyframes animate-svg-fill-27 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-27 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-27 {
  -webkit-animation: animate-svg-fill-27 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.45s both;
  animation: animate-svg-fill-27 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.45s both;
}

@-webkit-keyframes animate-svg-fill-28 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-28 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-28 {
  -webkit-animation: animate-svg-fill-28 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.475s both;
  animation: animate-svg-fill-28 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.475s both;
}

@-webkit-keyframes animate-svg-fill-29 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-29 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-29 {
  -webkit-animation: animate-svg-fill-29 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
  animation: animate-svg-fill-29 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}

@-webkit-keyframes animate-svg-fill-30 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-30 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-30 {
  -webkit-animation: animate-svg-fill-30 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.525s both;
  animation: animate-svg-fill-30 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.525s both;
}

@-webkit-keyframes animate-svg-fill-31 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-31 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-31 {
  -webkit-animation: animate-svg-fill-31 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.55s both;
  animation: animate-svg-fill-31 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.55s both;
}

@-webkit-keyframes animate-svg-fill-32 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-32 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-32 {
  -webkit-animation: animate-svg-fill-32 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.575s both;
  animation: animate-svg-fill-32 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.575s both;
}

@-webkit-keyframes animate-svg-fill-33 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-33 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-33 {
  -webkit-animation: animate-svg-fill-33 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
  animation: animate-svg-fill-33 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

@-webkit-keyframes animate-svg-fill-34 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-34 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-34 {
  -webkit-animation: animate-svg-fill-34 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.625s both;
  animation: animate-svg-fill-34 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.625s both;
}

@-webkit-keyframes animate-svg-fill-35 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-35 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-35 {
  -webkit-animation: animate-svg-fill-35 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.65s both;
  animation: animate-svg-fill-35 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.65s both;
}

@-webkit-keyframes animate-svg-fill-36 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-36 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-36 {
  -webkit-animation: animate-svg-fill-36 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.675s both;
  animation: animate-svg-fill-36 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.675s both;
}

@-webkit-keyframes animate-svg-fill-37 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-37 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-37 {
  -webkit-animation: animate-svg-fill-37 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s both;
  animation: animate-svg-fill-37 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s both;
}

@-webkit-keyframes animate-svg-fill-38 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-38 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-38 {
  -webkit-animation: animate-svg-fill-38 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.725s both;
  animation: animate-svg-fill-38 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.725s both;
}

@-webkit-keyframes animate-svg-fill-39 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-39 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-39 {
  -webkit-animation: animate-svg-fill-39 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.75s both;
  animation: animate-svg-fill-39 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.75s both;
}

@-webkit-keyframes animate-svg-fill-40 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-40 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-40 {
  -webkit-animation: animate-svg-fill-40 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.775s both;
  animation: animate-svg-fill-40 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.775s both;
}

@-webkit-keyframes animate-svg-fill-41 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-41 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-41 {
  -webkit-animation: animate-svg-fill-41 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
  animation: animate-svg-fill-41 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}

@-webkit-keyframes animate-svg-fill-42 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-42 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-42 {
  -webkit-animation: animate-svg-fill-42 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.825s both;
  animation: animate-svg-fill-42 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.825s both;
}

@-webkit-keyframes animate-svg-fill-43 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-43 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-43 {
  -webkit-animation: animate-svg-fill-43 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.85s both;
  animation: animate-svg-fill-43 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.85s both;
}

@-webkit-keyframes animate-svg-fill-44 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-44 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-44 {
  -webkit-animation: animate-svg-fill-44 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.875s both;
  animation: animate-svg-fill-44 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.875s both;
}

@-webkit-keyframes animate-svg-fill-45 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-45 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-45 {
  -webkit-animation: animate-svg-fill-45 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s both;
  animation: animate-svg-fill-45 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s both;
}

@-webkit-keyframes animate-svg-fill-46 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-46 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-46 {
  -webkit-animation: animate-svg-fill-46 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.925s both;
  animation: animate-svg-fill-46 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.925s both;
}

@-webkit-keyframes animate-svg-fill-47 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-47 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-47 {
  -webkit-animation: animate-svg-fill-47 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.95s both;
  animation: animate-svg-fill-47 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.95s both;
}

@-webkit-keyframes animate-svg-fill-48 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-48 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-48 {
  -webkit-animation: animate-svg-fill-48 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.975s both;
  animation: animate-svg-fill-48 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.975s both;
}

@-webkit-keyframes animate-svg-fill-49 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-49 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-49 {
  -webkit-animation: animate-svg-fill-49 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
  animation: animate-svg-fill-49 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
}

@-webkit-keyframes animate-svg-fill-50 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-50 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-50 {
  -webkit-animation: animate-svg-fill-50 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.025s both;
  animation: animate-svg-fill-50 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.025s both;
}

@-webkit-keyframes animate-svg-fill-51 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-51 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-51 {
  -webkit-animation: animate-svg-fill-51 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.05s both;
  animation: animate-svg-fill-51 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.05s both;
}

@-webkit-keyframes animate-svg-fill-52 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-52 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-52 {
  -webkit-animation: animate-svg-fill-52 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.075s both;
  animation: animate-svg-fill-52 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.075s both;
}

@-webkit-keyframes animate-svg-fill-53 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-53 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-53 {
  -webkit-animation: animate-svg-fill-53 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
  animation: animate-svg-fill-53 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
}

@-webkit-keyframes animate-svg-fill-54 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-54 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-54 {
  -webkit-animation: animate-svg-fill-54 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.125s both;
  animation: animate-svg-fill-54 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.125s both;
}

@-webkit-keyframes animate-svg-fill-55 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-55 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-55 {
  -webkit-animation: animate-svg-fill-55 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.15s both;
  animation: animate-svg-fill-55 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.15s both;
}

@-webkit-keyframes animate-svg-fill-56 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-56 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-56 {
  -webkit-animation: animate-svg-fill-56 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.175s both;
  animation: animate-svg-fill-56 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.175s both;
}

@-webkit-keyframes animate-svg-fill-57 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-57 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-57 {
  -webkit-animation: animate-svg-fill-57 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
  animation: animate-svg-fill-57 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
}

@-webkit-keyframes animate-svg-fill-58 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-58 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-58 {
  -webkit-animation: animate-svg-fill-58 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.225s both;
  animation: animate-svg-fill-58 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.225s both;
}

@-webkit-keyframes animate-svg-fill-59 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-59 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-59 {
  -webkit-animation: animate-svg-fill-59 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.25s both;
  animation: animate-svg-fill-59 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.25s both;
}

@-webkit-keyframes animate-svg-fill-60 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-60 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-60 {
  -webkit-animation: animate-svg-fill-60 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.275s both;
  animation: animate-svg-fill-60 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.275s both;
}

@-webkit-keyframes animate-svg-fill-61 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-61 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-61 {
  -webkit-animation: animate-svg-fill-61 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
  animation: animate-svg-fill-61 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
}

@-webkit-keyframes animate-svg-fill-62 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-62 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-62 {
  -webkit-animation: animate-svg-fill-62 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.325s both;
  animation: animate-svg-fill-62 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.325s both;
}

@-webkit-keyframes animate-svg-fill-63 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-63 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-63 {
  -webkit-animation: animate-svg-fill-63 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.35s both;
  animation: animate-svg-fill-63 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.35s both;
}

@-webkit-keyframes animate-svg-fill-64 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-64 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-64 {
  -webkit-animation: animate-svg-fill-64 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.375s both;
  animation: animate-svg-fill-64 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.375s both;
}

@-webkit-keyframes animate-svg-fill-65 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-65 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-65 {
  -webkit-animation: animate-svg-fill-65 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s both;
  animation: animate-svg-fill-65 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s both;
}

@-webkit-keyframes animate-svg-fill-66 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-66 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-66 {
  -webkit-animation: animate-svg-fill-66 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.425s both;
  animation: animate-svg-fill-66 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.425s both;
}

@-webkit-keyframes animate-svg-fill-67 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-67 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-67 {
  -webkit-animation: animate-svg-fill-67 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.45s both;
  animation: animate-svg-fill-67 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.45s both;
}

@-webkit-keyframes animate-svg-fill-68 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-68 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-68 {
  -webkit-animation: animate-svg-fill-68 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.475s both;
  animation: animate-svg-fill-68 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.475s both;
}

@-webkit-keyframes animate-svg-fill-69 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-69 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-69 {
  -webkit-animation: animate-svg-fill-69 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
  animation: animate-svg-fill-69 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
}

@-webkit-keyframes animate-svg-fill-70 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-70 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-70 {
  -webkit-animation: animate-svg-fill-70 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.525s both;
  animation: animate-svg-fill-70 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.525s both;
}

@-webkit-keyframes animate-svg-fill-71 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-71 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-71 {
  -webkit-animation: animate-svg-fill-71 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.55s both;
  animation: animate-svg-fill-71 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.55s both;
}

@-webkit-keyframes animate-svg-fill-72 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-72 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-72 {
  -webkit-animation: animate-svg-fill-72 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.575s both;
  animation: animate-svg-fill-72 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.575s both;
}

@-webkit-keyframes animate-svg-fill-73 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-73 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-73 {
  -webkit-animation: animate-svg-fill-73 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s both;
  animation: animate-svg-fill-73 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s both;
}

@-webkit-keyframes animate-svg-fill-74 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-74 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-74 {
  -webkit-animation: animate-svg-fill-74 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.625s both;
  animation: animate-svg-fill-74 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.625s both;
}

@-webkit-keyframes animate-svg-fill-75 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-75 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-75 {
  -webkit-animation: animate-svg-fill-75 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.65s both;
  animation: animate-svg-fill-75 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.65s both;
}

@-webkit-keyframes animate-svg-fill-76 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-76 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-76 {
  -webkit-animation: animate-svg-fill-76 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.675s both;
  animation: animate-svg-fill-76 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.675s both;
}

@-webkit-keyframes animate-svg-fill-77 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-77 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-77 {
  -webkit-animation: animate-svg-fill-77 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s both;
  animation: animate-svg-fill-77 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s both;
}

@-webkit-keyframes animate-svg-fill-78 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-78 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-78 {
  -webkit-animation: animate-svg-fill-78 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.725s both;
  animation: animate-svg-fill-78 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.725s both;
}

@-webkit-keyframes animate-svg-fill-79 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-79 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-79 {
  -webkit-animation: animate-svg-fill-79 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.75s both;
  animation: animate-svg-fill-79 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.75s both;
}

@-webkit-keyframes animate-svg-fill-80 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-80 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-80 {
  -webkit-animation: animate-svg-fill-80 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.775s both;
  animation: animate-svg-fill-80 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.775s both;
}

@-webkit-keyframes animate-svg-fill-81 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-81 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-81 {
  -webkit-animation: animate-svg-fill-81 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s both;
  animation: animate-svg-fill-81 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s both;
}

@-webkit-keyframes animate-svg-fill-82 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-82 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-82 {
  -webkit-animation: animate-svg-fill-82 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.825s both;
  animation: animate-svg-fill-82 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.825s both;
}

@-webkit-keyframes animate-svg-fill-83 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-83 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-83 {
  -webkit-animation: animate-svg-fill-83 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.85s both;
  animation: animate-svg-fill-83 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.85s both;
}

@-webkit-keyframes animate-svg-fill-84 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-84 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-84 {
  -webkit-animation: animate-svg-fill-84 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.875s both;
  animation: animate-svg-fill-84 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.875s both;
}

@-webkit-keyframes animate-svg-fill-85 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-85 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-85 {
  -webkit-animation: animate-svg-fill-85 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9s both;
  animation: animate-svg-fill-85 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9s both;
}

@-webkit-keyframes animate-svg-fill-86 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-86 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-86 {
  -webkit-animation: animate-svg-fill-86 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.925s both;
  animation: animate-svg-fill-86 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.925s both;
}

@-webkit-keyframes animate-svg-fill-87 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-87 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-87 {
  -webkit-animation: animate-svg-fill-87 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.95s both;
  animation: animate-svg-fill-87 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.95s both;
}

@-webkit-keyframes animate-svg-fill-88 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-88 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-88 {
  -webkit-animation: animate-svg-fill-88 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.975s both;
  animation: animate-svg-fill-88 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.975s both;
}

@-webkit-keyframes animate-svg-fill-89 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-89 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-89 {
  -webkit-animation: animate-svg-fill-89 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s both;
  animation: animate-svg-fill-89 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s both;
}

@-webkit-keyframes animate-svg-fill-90 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-90 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-90 {
  -webkit-animation: animate-svg-fill-90 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.025s both;
  animation: animate-svg-fill-90 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.025s both;
}

@-webkit-keyframes animate-svg-fill-91 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-91 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-91 {
  -webkit-animation: animate-svg-fill-91 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.05s both;
  animation: animate-svg-fill-91 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.05s both;
}

@-webkit-keyframes animate-svg-fill-92 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-92 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-92 {
  -webkit-animation: animate-svg-fill-92 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.075s both;
  animation: animate-svg-fill-92 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.075s both;
}

@-webkit-keyframes animate-svg-fill-93 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-93 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-93 {
  -webkit-animation: animate-svg-fill-93 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1s both;
  animation: animate-svg-fill-93 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1s both;
}

@-webkit-keyframes animate-svg-fill-94 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-94 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-94 {
  -webkit-animation: animate-svg-fill-94 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.125s both;
  animation: animate-svg-fill-94 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.125s both;
}

@-webkit-keyframes animate-svg-fill-95 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-95 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-95 {
  -webkit-animation: animate-svg-fill-95 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.15s both;
  animation: animate-svg-fill-95 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.15s both;
}

@-webkit-keyframes animate-svg-fill-96 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-96 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-96 {
  -webkit-animation: animate-svg-fill-96 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.175s both;
  animation: animate-svg-fill-96 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.175s both;
}

@-webkit-keyframes animate-svg-fill-97 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-97 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-97 {
  -webkit-animation: animate-svg-fill-97 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s both;
  animation: animate-svg-fill-97 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s both;
}

@-webkit-keyframes animate-svg-fill-98 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-98 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-98 {
  -webkit-animation: animate-svg-fill-98 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.225s both;
  animation: animate-svg-fill-98 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.225s both;
}

@-webkit-keyframes animate-svg-fill-99 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-99 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-99 {
  -webkit-animation: animate-svg-fill-99 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.25s both;
  animation: animate-svg-fill-99 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.25s both;
}

@-webkit-keyframes animate-svg-fill-100 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-100 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-100 {
  -webkit-animation: animate-svg-fill-100 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.275s both;
  animation: animate-svg-fill-100 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.275s both;
}

@-webkit-keyframes animate-svg-fill-101 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-101 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-101 {
  -webkit-animation: animate-svg-fill-101 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s both;
  animation: animate-svg-fill-101 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s both;
}

@-webkit-keyframes animate-svg-fill-102 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-102 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.active.textAnimation.svg-elem-102 {
  -webkit-animation: animate-svg-fill-102 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.325s both;
  animation: animate-svg-fill-102 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.325s both;
}

.textAnimation {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.textAnimation.active {
  opacity: 1;
}

/*======================================
    共通
======================================*/
.p-fv {
  padding-top: 7.125em;
}
@media screen and (max-width: 767px) {
  .p-fv {
    padding-top: 0;
  }
}

.p-fv__wrap {
  display: grid;
  align-items: flex-end;
}

.p-fv__img {
  margin-left: 13.5625em;
  margin-right: calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .p-fv__img {
    grid-column: 1/2;
    grid-row: 1/2;
    height: 29.8125em;
  }
  .p-fv__img img {
    height: 100%;
    object-fit: cover;
  }
}
@media screen and (max-width: 767px) {
  .p-fv__img {
    max-height: 29.8125em;
    margin-left: calc(50% - 50vw);
  }
}
.p-fv__img img {
  width: 100%;
  border: none;
}

.p-fv__texts {
  padding-bottom: 2.1875em;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-fv__texts {
    grid-column: 1/2;
    grid-row: 1/2;
  }
}

.p-fv__texts--head {
  font-size: 2.75em;
  font-family: "Suranna", serif;
  letter-spacing: 0.2em;
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}
@media screen and (max-width: 767px) {
  .p-fv__texts--head {
    font-size: 2.125em;
  }
}
.p-fv__texts--head span.lg {
  display: block;
  font-size: 1.68em;
  letter-spacing: 0.17em;
}
@media screen and (min-width: 768px) {
  .p-fv__texts--head span.lg.-ls {
    letter-spacing: 0.13em;
  }
}

.p-fv__title {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: 600;
  margin-top: 2em;
}

.p-head {
  text-align: center;
  padding-top: 8.5em;
}

.p-head__en {
  font-size: 4.625em;
  font-family: "Suranna", serif;
  letter-spacing: 0.17em;
  transform: translateX(0.5%);
}
@media screen and (max-width: 767px) {
  .p-head__en {
    font-size: 3em;
  }
}

.p-head__ttl {
  font-size: 1.25em;
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
  margin-top: 1em;
}

.p-category__wrap {
  margin-top: 3.6em;
}

.p-category__ttl {
  font-size: 2.125em;
  font-family: "Suranna", serif;
  letter-spacing: 0.2em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-category__ttl {
    font-size: 1.5em;
  }
}

.p-categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 0.625em;
  column-gap: 2.8125em;
  margin-top: 2em;
}
@media screen and (max-width: 767px) {
  .p-categories {
    column-gap: 1.25em;
  }
}

.p-category__link {
  display: block;
  font-size: 1.5em;
  font-family: "Suranna", serif;
  letter-spacing: 0.2em;
  transition: opacity 0.3s ease;
}
.p-category__link.active {
  position: relative;
}
.p-category__link.active::before {
  content: "";
  position: absolute;
  bottom: -0.1em;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .p-category__link {
    font-size: 1em;
  }
}
.p-category__link:hover {
  opacity: 0.7;
}

.p-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 0.5em;
  margin-top: 2.5em;
}
@media screen and (max-width: 767px) {
  .p-tags {
    column-gap: 0.625em;
  }
}

.p-tag.active .p-tag__link {
  background-color: #273A69;
}

.p-tag__link {
  display: block;
  border: 1px solid #273A69;
  border-radius: 1em;
  padding: 0.35em 0.6875em;
  transition: background-color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .p-tag__link {
    font-size: 0.875em;
  }
}
.p-tag__link:hover {
  background-color: #273A69;
}
.p-tag__link .hash {
  font-size: 0.9375em;
  line-height: 1.3333333333;
  display: inline-block;
  padding-left: 0.6em;
  position: relative;
}
.p-tag__link .hash::before {
  content: "#";
  position: absolute;
  top: 0;
  left: 0;
}

.p-keyword {
  display: grid;
  grid-template-columns: auto 2em;
  column-gap: 1em;
  max-width: 23.125em;
  margin: 1.375em auto 0;
}
.p-keyword input[type=text] {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #10192F;
  color: #fff;
  border: 1px solid #273A69;
  font-weight: 300;
  font-size: 0.9375em;
  line-height: 1;
  padding: 0.4375em 0.875em;
  border-radius: 1.067em;
}
.p-keyword input[type=text]:focus {
  outline: none;
}
.p-keyword input[type=text]::placeholder {
  color: #fff;
  font-weight: 300;
  font-size: 0.9375em;
}
.p-keyword button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #10192F;
  border: none;
  padding: 0;
  transition: opacity 0.3s ease;
}
.p-keyword button:hover, .p-keyword button:focus {
  opacity: 0.7;
  outline: none;
}

/*======================================
    section
======================================*/
.section-ttl__head {
  font-size: 2.75em;
  font-family: "Suranna", serif;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
  .section-ttl__head {
    font-size: 2.125em;
  }
}
.section-ttl__head span.lg {
  display: block;
  font-size: 1.6em;
  letter-spacing: 0.17em;
  line-height: 1.3285714286;
}
@media screen and (max-width: 767px) {
  .section-ttl__head span.lg {
    font-size: 1.7647em;
  }
}
.section-ttl__head span.sm {
  display: block;
  font-size: 0.57em;
  letter-spacing: 0.24em;
  margin-top: 1em;
}

.section-ttl {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
  line-height: 1.6875;
  margin-top: 1.1em;
}

/*======================================
    造園
======================================*/
.mirai-common__more {
  margin-top: 4.875em;
}
@media screen and (max-width: 767px) {
  .mirai-common__more {
    margin-top: 2.5em;
  }
}

.mirai-work {
  margin-top: 21.625em;
}
@media screen and (max-width: 767px) {
  .mirai-work {
    margin-top: 3em;
  }
}

.mirai-work__wrap {
  display: grid;
}
@media screen and (max-width: 767px) {
  .mirai-work__wrap {
    display: flex;
    flex-direction: column-reverse;
  }
}

.mirai-work__img {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-left: 11.75em;
  margin-right: -4.25em;
}
@media screen and (max-width: 767px) {
  .mirai-work__img {
    margin-left: 0;
    margin-right: -1.375em;
  }
}

.mirai-work__texts {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
  padding-top: 1.9em;
}
.mirai-work__texts .section-ttl__head {
  padding-left: 0.2em;
}
@media screen and (max-width: 767px) {
  .mirai-work__texts {
    padding-top: 0;
  }
}

.mirai-indoor {
  margin-top: 10.8125em;
}
@media screen and (max-width: 767px) {
  .mirai-indoor {
    margin-top: 6.25em;
  }
}

.mirai-indoor__wrap {
  display: grid;
  grid-template-columns: 39.25em auto;
  column-gap: 5.9375em;
}
@media screen and (max-width: 767px) {
  .mirai-indoor__wrap {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .mirai-indoor__img {
    height: 16.25em;
  }
  .mirai-indoor__img div {
    height: 100%;
  }
  .mirai-indoor__img img {
    height: 100%;
    object-fit: cover;
  }
}

.mirai-indoor__texts {
  display: flex;
}
@media screen and (min-width: 768px) {
  .mirai-indoor__texts .section-ttl__head span.lg {
    margin-bottom: 0.1em;
  }
  .mirai-indoor__texts .section-ttl {
    margin-top: 2em;
  }
}

.mirai-indoor__texts--wrap {
  padding-top: 5em;
}

.mirai-indoor__img2 {
  width: 9.8125em;
  margin-right: -4.25em;
  align-self: flex-end;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .mirai-indoor__img2 {
    margin-right: -1.375em;
  }
}

.mirai-ground {
  margin-top: 9.5em;
}
@media screen and (max-width: 767px) {
  .mirai-ground .mirai-work__texts {
    margin-top: 2.5em;
  }
}

.mirai-ground__wrap {
  display: grid;
}
@media screen and (max-width: 767px) {
  .mirai-ground__wrap {
    display: flex;
    flex-direction: column;
  }
}

.mirai-ground__img {
  margin-right: -4.25em;
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  max-width: 62.875em;
  margin-left: auto;
  align-self: start;
}
@media screen and (max-width: 767px) {
  .mirai-ground__img {
    display: contents;
  }
}

@media screen and (max-width: 767px) {
  .mirai-ground__img1 {
    order: 1;
    margin: 0 -1.375em 0 -1.375em;
    height: 13em;
  }
  .mirai-ground__img1 img {
    height: 100%;
    object-fit: cover;
  }
}

.mirai-ground__img2 {
  width: 18.25em;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .mirai-ground__img2 {
    position: absolute;
    bottom: 0;
    right: 4.25em;
    translate: 0 72%;
  }
}
@media screen and (max-width: 767px) {
  .mirai-ground__img2 {
    order: 3;
    translate: 0 50%;
    position: relative;
    z-index: -1;
    width: 55%;
    margin-left: auto;
  }
}

.mirai-work__texts {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
  padding-top: 6.5em;
}
@media screen and (min-width: 768px) {
  .mirai-work__texts .section-ttl__head {
    margin-left: -0.15em;
  }
  .mirai-work__texts .section-ttl__head span.lg {
    margin-bottom: 0.1em;
  }
  .mirai-work__texts .section-ttl {
    margin-top: 1.9em;
  }
  .mirai-work__texts .mirai-ground__more {
    margin-top: 4.5em;
  }
}
@media screen and (max-width: 767px) {
  .mirai-work__texts {
    padding-top: 0;
    order: 2;
  }
}

.mirai-rooftop {
  margin-top: 14.375em;
}
@media screen and (max-width: 767px) {
  .mirai-rooftop {
    margin-top: 8em;
  }
}

.mirai-rooftop__wrap {
  display: grid;
  grid-template-columns: 46.375em auto;
  column-gap: 6.25em;
}
@media screen and (max-width: 767px) {
  .mirai-rooftop__wrap {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .mirai-rooftop__img div {
    height: 18.5em;
  }
  .mirai-rooftop__img img {
    height: 100%;
    object-fit: cover;
  }
}

.mirai-rooftop__texts {
  padding-top: 9.75em;
}
@media screen and (min-width: 768px) {
  .mirai-rooftop__texts .section-ttl__head span.lg {
    margin-bottom: 0.1em;
  }
  .mirai-rooftop__texts .section-ttl {
    margin-top: 1.7em;
    margin-left: 0.5em;
  }
  .mirai-rooftop__texts .mirai-rooftop__more {
    margin-top: 5.3em;
  }
}
@media screen and (max-width: 767px) {
  .mirai-rooftop__texts {
    padding-top: 2em;
  }
}

.mirai-wall {
  margin-top: 9em;
  margin-bottom: 13.9375em;
}
@media screen and (max-width: 767px) {
  .mirai-wall {
    margin-bottom: 2.5em;
  }
}

.mirai-wall__wrap {
  display: grid;
}
@media screen and (max-width: 767px) {
  .mirai-wall__wrap {
    display: flex;
    flex-direction: column;
  }
}

.mirai-wall__img {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-right: -4.25em;
  max-width: 58.25em;
  margin-left: auto;
  margin-top: 11.3em;
}
@media screen and (max-width: 767px) {
  .mirai-wall__img {
    margin-right: -1.375em;
    margin-top: 0;
  }
}

.mirai-wall__texts {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
  padding-left: 5.8em;
}
@media screen and (min-width: 768px) {
  .mirai-wall__texts .section-ttl__head span.lg {
    margin-bottom: 0.1em;
  }
  .mirai-wall__texts .section-ttl {
    margin-top: 2em;
  }
}

/*======================================
    works archive
======================================*/
.works-lists {
  margin-top: 5.5em;
  margin-bottom: 8em;
}
@media screen and (max-width: 767px) {
  .works-lists {
    margin-bottom: 0;
  }
}

.works-list:nth-child(odd) .works-list__body {
  margin-left: auto;
}
.works-list:nth-child(n+2) {
  margin-top: 5.9375em;
}
@media screen and (max-width: 767px) {
  .works-list:nth-child(n+2) {
    margin-top: 3.125em;
  }
}

.works-list__link {
  display: grid;
  grid-template-rows: 16.3125em 1fr 1fr;
}
@media screen and (max-width: 767px) {
  .works-list__link {
    display: flex;
    flex-direction: column;
  }
}

.works-list__img {
  grid-column: 1/2;
  grid-row: 1/3;
}
.works-list__img img {
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .works-list__img {
    aspect-ratio: 1140/369;
  }
}
@media screen and (max-width: 767px) {
  .works-list__img {
    height: 15em;
  }
}

.works-list__body {
  grid-column: 1/2;
  grid-row: 2/4;
  width: 100%;
  max-width: 60.4375em;
  background-color: #192238;
  padding: 2.25em 1.6em 2.25em 2.8125em;
}
@media screen and (max-width: 767px) {
  .works-list__body {
    padding: 1.5em 1.25em;
  }
}

.works-list__body--contents {
  display: grid;
  grid-template-columns: auto 10em;
  column-gap: 1.25em;
}
@media screen and (max-width: 767px) {
  .works-list__body--contents {
    grid-template-columns: 1fr;
  }
}
.works-list__body--contents .p-tag__link:hover {
  pointer-events: none;
  background-color: #10192F;
}

.works-list__body--head {
  font-size: 1.25em;
  line-height: 1.7;
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
}
@media screen and (max-width: 767px) {
  .works-list__body--head {
    font-size: 1em;
  }
}

.works-list__body--title {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  line-height: 1.7058823529;
  font-weight: 500;
  font-size: 2.125em;
}
@media screen and (max-width: 767px) {
  .works-list__body--title {
    font-size: 1.5em;
  }
}

.works-list__body--tags {
  margin-top: 0.5em;
  justify-content: start;
}
.works-list__body--tags .p-tag__link {
  padding: 0.3em 0.6875em;
}

.works-list__body--more {
  align-self: flex-end;
  transform: translateY(0.25em);
}
@media screen and (max-width: 767px) {
  .works-list__body--more {
    text-align: right;
    margin-top: 2em;
  }
}

.post__not-find {
  margin: 5em auto 10em;
}
@media screen and (max-width: 767px) {
  .post__not-find {
    margin-bottom: 0;
  }
}

/*======================================
    works single
======================================*/
.s-works {
  margin-top: 3.7em;
}

.s-works__head {
  text-align: center;
}

.s-works__head--category {
  font-size: 1.25em;
  line-height: 1.7;
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
}
@media screen and (max-width: 767px) {
  .s-works__head--category {
    font-size: 1em;
  }
}

.s-works__head--title {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  font-size: 2.125em;
  line-height: 1.7058823529;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .s-works__head--title {
    font-size: 1.75em;
  }
}

.s-works__head--tags {
  margin-top: 0.25em;
}

.s-works__contents {
  margin-top: 2.5em;
}
.s-works__contents p {
  font-size: 1.125em;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .s-works__contents p {
    font-size: 0.875em;
    text-align: left;
  }
}

.s-works__lists {
  display: flex;
  flex-wrap: wrap;
  column-gap: 3.125em;
  row-gap: 4.2em;
  margin-top: 4.75em;
}
@media screen and (max-width: 767px) {
  .s-works__lists {
    row-gap: 2.5em;
    column-gap: 1.25em;
  }
}

.s-works__list.-lg {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .s-works__list.-lg .s-works__list--img::before {
    padding-top: 50.2191060473%;
  }
}
@media screen and (max-width: 767px) {
  .s-works__list.-lg .s-works__list--img {
    height: 15em;
  }
}
@media screen and (min-width: 768px) {
  .s-works__list {
    width: calc(50% - 1.5625em);
  }
}
@media screen and (max-width: 767px) {
  .s-works__list {
    width: calc(50% - 0.625em);
  }
}

.s-works__list--img img {
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .s-works__list--img {
    position: relative;
  }
  .s-works__list--img::before {
    content: "";
    display: block;
    padding-top: 67.3992673993%;
  }
  .s-works__list--img img {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .s-works__list--img {
    height: 8.75em;
  }
}

.s-works__list--text {
  line-height: 1.375;
  margin-top: 2.7em;
}
@media screen and (max-width: 767px) {
  .s-works__list--text {
    margin-top: 1em;
    font-size: 0.875em;
  }
}

.s-works__others {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.875em;
  margin-left: -4.25em;
  margin-right: -4.25em;
  margin-top: 12.25em;
  margin-bottom: 15.5em;
}
@media screen and (max-width: 767px) {
  .s-works__others {
    margin-left: -1.375em;
    margin-right: -1.375em;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 8em;
    margin-bottom: 0;
    column-gap: 1.25em;
    row-gap: 2.5em;
  }
}

.s-works__other--link {
  display: block;
  transition: opacity 0.3s ease;
}
.s-works__other--link .text-tags {
  margin-top: 2em;
}
.s-works__other--link .text-tags .text-tag {
  font-size: 0.875em;
}
@media screen and (max-width: 767px) {
  .s-works__other--link .text-tags .text-tag {
    font-size: 0.75em;
  }
}
.s-works__other--link:hover {
  opacity: 0.7;
}

.s-works__other--img img {
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .s-works__other--img {
    position: relative;
  }
  .s-works__other--img::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .s-works__other--img img {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .s-works__other--img {
    height: 8.75em;
  }
}

.text-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.5em;
  row-gap: 0.5em;
}

.text-tag {
  padding-left: 0.6em;
  position: relative;
}
.text-tag::before {
  content: "#";
  position: absolute;
  top: 0;
  left: 0;
}

.s-works__other--title {
  line-height: 1.375;
  text-align: center;
  margin-top: 0.5em;
}
@media screen and (max-width: 767px) {
  .s-works__other--title {
    font-size: 0.875em;
  }
}

/*======================================
    archive news
======================================*/
.a-news {
  margin-bottom: 5em;
}
@media screen and (max-width: 767px) {
  .a-news {
    margin-bottom: 0;
  }
}

.news-tags {
  margin-top: 1.8em;
}

.a-news__cards {
  display: grid;
  grid-template-columns: repeat(0, 1fr);
  column-gap: 1.875em;
  row-gap: 0em;
  margin-top: 0em;
  margin-left: -0em;
  margin-right: -0em;
}
@media screen and (max-width: 767px) {
  .a-news__cards {
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0em;
    row-gap: 0em;
    column-gap: 0em;
  }
}

@media screen and (min-width: 768px) {
  .a-news__card .news__card--img::before {
    padding-top: 100%;
  }
  .a-news__card .news__card--date {
    font-size: 0.875em;
  }
}
@media screen and (max-width: 767px) {
  .a-news__card .news__card--date {
    font-size: 0.75em;
  }
  .a-news__card .news__card--ttl {
    font-size: 0.875em;
  }
}

/*======================================
    single news
======================================*/
.s-news {
  margin-top: 3.5em;
}

.s-news__head {
  display: flex;
  justify-content: center;
  column-gap: 0.5em;
}

.s-news__date {
  font-size: 0.9375em;
  padding-right: 0.5em;
  border-right: 1px solid #fff;
}

.s-news__title {
  font-size: 1.875em;
  line-height: 1.75;
  text-align: center;
  margin-top: 0.3em;
}
@media screen and (max-width: 767px) {
  .s-news__title {
    font-size: 1.75em;
  }
}

.s-news__wrap {
  max-width: 50em;
  margin: 2.85em auto 0;
}

.s-news__eye img {
  height: auto;
}

.s-news__contents p {
  font-size: 1.125em;
  line-height: 1.8;
  margin: 2em 0;
  text-align: justify;
}
@media screen and (max-width: 767px) {
  .s-news__contents p {
    font-size: 0.875em;
  }
}
.s-news__contents img {
  height: auto;
  display: block;
  margin: 3.125em 0;
}

/*======================================
    contact
======================================*/
.contact {
  padding-bottom: 16.875em;
}
@media screen and (max-width: 767px) {
  .contact {
    padding-bottom: 0;
  }
}

.contact__text {
  font-size: 1.25em;
  line-height: 1.7;
  text-align: center;
  margin-top: 4.6em;
}
@media screen and (max-width: 767px) {
  .contact__text {
    font-size: 0.875em;
  }
}

.contact-form {
  max-width: 52em;
  margin: 5em auto 0;
}
@media screen and (max-width: 767px) {
  .contact-form {
    margin-top: 2.5em;
  }
}

.form-list:nth-child(n+2) {
  margin-top: 2.3125em;
}
@media screen and (max-width: 767px) {
  .form-list:nth-child(n+2) {
    margin-top: 1.875em;
  }
}
.form-list:last-child {
  margin-top: 4.5em;
}
@media screen and (max-width: 767px) {
  .form-list:last-child {
    margin-top: 2.5em;
  }
}

.form-list__item {
  display: grid;
  grid-template-columns: 13em auto;
  align-items: start;
}
@media screen and (max-width: 767px) {
  .form-list__item {
    grid-template-columns: 1fr;
  }
}
.form-list__item dt p {
  line-height: 3.375;
  font-weight: 500;
  display: flex;
  align-items: center;
  column-gap: 0.875em;
}
@media screen and (max-width: 767px) {
  .form-list__item dt p {
    line-height: 2.5;
  }
}

.required {
  font-size: 0.75em;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 2.92em;
  height: 1.5em;
  background-color: #E54E00;
  border-radius: 0.75em;
  padding-bottom: 0.2em;
}

.form-input input, .form-input textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: #192238;
  color: #fff;
  width: 100%;
  padding: 0 1.25em;
  display: flex;
  align-items: center;
  height: 3.375em;
  font-size: 16px;
  box-shadow: none;
  border-radius: 0;
}
.form-input input::placeholder, .form-input textarea::placeholder {
  color: #4A5777;
  font-weight: 300;
}

.form-select {
  max-width: 15.625em;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .form-select {
    margin-top: 0.625em;
  }
}
.form-select select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  background: #192238 url(../img/page/form_slect.svg) no-repeat center right 1.0625em/0.625em 0.5em;
  color: #fff;
  width: 100%;
  padding: 0 1.25em 0 1.9em;
  display: flex;
  align-items: center;
  height: 3.375em;
  font-size: 1em;
  box-shadow: none;
  border-radius: 0;
}
.form-select select::placeholder {
  font-weight: 300;
}
.form-select select:hover {
  cursor: pointer;
}

.form-textarea {
  margin-top: 1.25em;
}
.form-textarea textarea {
  display: block;
  height: 12.375em;
  padding: 1.25em;
  resize: vertical;
}

.form-attachment {
  margin-top: 1.25em;
}
.form-attachment input {
  display: none;
  font-size: 16px;
}
.form-attachment input.done {
  display: block;
  margin-top: 0.625em;
  position: relative;
  margin-left: -8em;
}
.form-attachment input.done::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8em;
  height: 2em;
  background-color: #10192F;
}

.form-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #273A69;
  width: 100%;
  height: 3.1875em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  border-radius: 0;
  background-color: #273A69;
  font-size: 16px;
  transition: opacity 0.3s ease, border 0.3s ease;
}
.form-button:hover {
  border-color: #fff;
}

.form-submit {
  margin-top: 4.375em;
}
.form-submit input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #10192F url(../img/more_arrow.svg) no-repeat center right 2.875em/2.625em 2.625em;
  max-width: 19.6875em;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  width: 100%;
  padding: 0 2em 0 0;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  height: 5.125em;
  font-size: 16px;
  box-shadow: none;
  border-radius: 0;
  transition: all 0.3s ease;
  text-align: center;
  justify-content: center;
}
.form-submit input:hover {
  background: #10192F url(../img/more_arrow.svg) no-repeat center right 2.5em/2.625em 2.625em;
  background-color: #273A69;
}

.form-file__note {
  line-height: 1.75;
  margin-top: 1em;
  padding-left: 1em;
  position: relative;
}
.form-file__note::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

/*======================================
    thanks
======================================*/
.thanks__button--wrap {
  margin-top: 4em;
}
@media screen and (max-width: 767px) {
  .thanks__button--wrap {
    margin-top: 2em;
  }
}

.thanks__button {
  background: #10192F url(../img/more_arrow.svg) no-repeat center right 2.875em/2.625em 2.625em;
  max-width: 19.6875em;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  width: 100%;
  padding: 0 2em 0 0;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.125em;
  box-shadow: none;
  border-radius: 0;
  transition: all 0.3s ease;
}
.thanks__button:hover {
  background: #10192F url(../img/more_arrow.svg) no-repeat center right 2.5em/2.625em 2.625em;
  background-color: #273A69;
}

/*======================================
    Recruit
======================================*/
@media screen and (min-width: 768px) {
  .p-fv.-recruit {
    padding-top: 6em;
  }
  .p-fv.-recruit .p-fv__texts {
    padding-bottom: 5.1875em;
  }
  .p-fv.-recruit .p-fv__texts .p-fv__texts--head .lg {
    letter-spacing: 0.13em;
  }
}

@media screen and (min-width: 768px) {
  .recruit {
    padding-bottom: 12.5em;
  }
}

.recruit-tab-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3em;
  margin-top: 5.8em;
}
@media screen and (max-width: 767px) {
  .recruit-tab-btns {
    grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
    row-gap: 2.5em;
    margin-top: 0em;
    column-gap: 1.25em;
  }
}

.recruit-tab-btn {
  display: grid;
  position: relative;
}
.recruit-tab-btn:hover {
  cursor: pointer;
}
.recruit-tab-btn.disable {
  position: relative;
}
.recruit-tab-btn.disable::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 34, 56, 0.9);
  mix-blend-mode: multiply;
  z-index: 2;
}
.recruit-tab-btn.disable:hover {
  cursor: default;
  pointer-events: none;
}
.recruit-tab-btn.show::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 1.375em);
  height: calc(100% - 1.375em);
  border: 0.6875em solid #495777;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .recruit-tab-btn.show::before {
    width: calc(100% - 0.75em);
    height: calc(100% - 0.75em);
    border: 0.375em solid #495777;
  }
}
.recruit-tab-btn.show .recruit-tab-btn__title {
  background-color: #495777;
}

.recruit-tab-btn__title {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
  transform: translateY(50%);
  align-self: flex-end;
  margin-left: auto;
  font-size: 1.75em;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  font-weight: 500;
  text-align: center;
  min-width: 8.04em;
  height: 2.5em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #192238;
}
@media screen and (max-width: 767px) {
  .recruit-tab-btn__title {
    font-size: 1.25em;
  }
}

.recruit-tab-btn__img {
  position: relative;
  grid-column: 1/2;
  grid-row: 1/2;
}
.recruit-tab-btn__img::before {
  content: "";
  display: block;
  padding-top: 68.9655172414%;
}
@media screen and (max-width: 767px) {
  .recruit-tab-btn__img::before {
    padding-top: 34.4827586207%;
  }
}
.recruit-tab-btn__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit-tab-btn__disable {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.375em;
  font-weight: 500;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  text-align: center;
  z-index: 3;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .recruit-tab-btn__disable {
    font-size: 0.875em;
  }
}
.recruit-tab-btn__disable .en {
  display: block;
  font-size: 0.91em;
  font-family: "Suranna", serif;
  letter-spacing: 0.2em;
  transform: translateY(-58%);
}

.recruit-areas {
  margin-top: 9em;
}
@media screen and (max-width: 767px) {
  .recruit-areas {
    margin-top: 4em;
  }
}

.recruit-details__title {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  font-size: 2.125em;
  text-align: center;
}
.recruit-details__title .en {
  display: block;
  font-family: "Suranna", serif;
  letter-spacing: 0.2em;
  font-size: 0.71em;
  color: #495777;
  margin-bottom: 0.5em;
}

.recruit-details {
  max-width: 42.3125em;
  margin: 1.5em auto 0;
}

.recruit-detail {
  border-bottom: 1px solid #495777;
}

.recruit-detail__content {
  display: grid;
  grid-template-columns: 14.75em auto;
  align-items: center;
  padding: 0.625em;
}
@media screen and (min-width: 768px) {
  .recruit-detail__content {
    min-height: 5.75em;
  }
}
@media screen and (max-width: 767px) {
  .recruit-detail__content {
    grid-template-columns: 1fr;
    padding: 1.25em 0.625em;
    row-gap: 0.625em;
  }
}
.recruit-detail__content dt, .recruit-detail__content dd {
  font-weight: 300;
  line-height: 1.375;
}

.recruit__contact {
  text-align: center;
  margin-top: 7.3em;
}
@media screen and (min-width: 768px) {
  .recruit__contact .more-view {
    transform: translateX(-1.75em);
  }
}
@media screen and (max-width: 767px) {
  .recruit__contact {
    margin-top: 2.5em;
  }
}

.recruit__imgs {
  display: flex;
  margin-left: -4.25em;
  margin-right: -4.25em;
  position: relative;
  z-index: -1;
  margin-top: 8em;
}
@media screen and (max-width: 767px) {
  .recruit__imgs {
    margin-left: -1.375em;
    margin-right: -1.375em;
    display: block;
    margin-top: 4em;
  }
}

.recruit__img1 {
  width: 59.62%;
}
@media screen and (max-width: 767px) {
  .recruit__img1 {
    max-width: 18.75em;
    width: 100%;
  }
}

.recruit__img2 {
  width: 29.73%;
  margin-left: auto;
  margin-top: 18em;
}
@media screen and (max-width: 767px) {
  .recruit__img2 {
    max-width: 10em;
    width: 100%;
    margin-top: 2em;
  }
}

/*======================================
    company
======================================*/
.company-head {
  margin-top: 13.25em;
}
@media screen and (max-width: 767px) {
  .company-head {
    margin-top: 5em;
  }
}

.company-head__wrap {
  display: grid;
  grid-template-columns: auto 6.875em 12.5em;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .company-head__wrap {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 768px) {
  .company-head__img {
    grid-column: 1/3;
    grid-row: 1/2;
    translate: 0 -25%;
  }
}
@media screen and (max-width: 767px) {
  .company-head__img {
    translate: 0 -40%;
  }
}

.company-head__texts {
  position: relative;
  z-index: 2;
  background-color: #10192F;
  padding: 3.875em 0;
}
@media screen and (min-width: 768px) {
  .company-head__texts {
    grid-column: 2/4;
    grid-row: 1/2;
  }
}
@media screen and (max-width: 767px) {
  .company-head__texts {
    padding: 2.5em 0;
    max-width: 15.625em;
    margin-top: -1.5em;
  }
}

.company-head__texts--lists {
  max-width: 12em;
  margin-left: auto;
  margin-right: auto;
}

.company-head__texts--list:nth-child(n+2) {
  margin-top: 1.5em;
}
.company-head__texts--list dl {
  display: grid;
  grid-template-columns: 4em auto;
}
.company-head__texts--list dl dt, .company-head__texts--list dl dd {
  line-height: 1.1875;
}
.company-head__texts--list dl dt .sm, .company-head__texts--list dl dd .sm {
  display: block;
  font-size: 0.875em;
  font-weight: 300;
  margin-top: 0.5em;
}

.access {
  margin-top: 7.25em;
  padding: 7em 0;
  border-top: 1px solid #495777;
  border-bottom: 1px solid #495777;
}
@media screen and (max-width: 767px) {
  .access {
    margin-top: 3.75em;
    padding: 5em 0;
  }
}

@media screen and (min-width: 768px) {
  .company-access {
    display: grid;
    grid-template-columns: auto 19.375em;
    column-gap: 5em;
  }
}
@media screen and (max-width: 767px) {
  .company-access {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .company-access__map {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) {
  .company-access__map {
    order: 2;
    margin-top: 2em;
  }
}

@media screen and (max-width: 767px) {
  .company-access__contents {
    display: contents;
  }
}

@media screen and (max-width: 767px) {
  .company-access__title {
    order: 1;
  }
}

@media screen and (max-width: 767px) {
  .company-access__texts {
    order: 3;
  }
}

@media screen and (min-width: 768px) {
  .access-view-more span.text {
    font-size: 1em;
  }
}
@media screen and (max-width: 767px) {
  .access-view-more {
    order: 4;
  }
}

.about {
  margin-top: 10em;
  margin-bottom: 8.75em;
}
@media screen and (max-width: 767px) {
  .about {
    margin-top: 5em;
    margin-bottom: 0;
  }
}

.about__wrap {
  display: grid;
  grid-template-columns: auto 42.375em;
  column-gap: 10.5em;
}
@media screen and (max-width: 767px) {
  .about__wrap {
    grid-template-columns: 1fr;
  }
}

.about__head--title {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .about__head--title {
    transform: translateX(4.5em);
  }
}

.about__head--img {
  margin-left: -4.25em;
  margin-top: 5.75em;
}
@media screen and (max-width: 767px) {
  .about__head--img {
    margin-top: 2em;
    position: relative;
  }
  .about__head--img::before {
    content: "";
    display: block;
    padding-top: 62.75%;
  }
  .about__head--img img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
  }
}

.about__list {
  border-bottom: 1px solid #495777;
}

.about__list--dl {
  display: grid;
  grid-template-columns: 14.8125em auto;
  padding: 2.1em 0.625em;
}
@media screen and (max-width: 767px) {
  .about__list--dl {
    grid-template-columns: 5em auto;
    column-gap: 1.25em;
    padding: 2.1em 0;
  }
}
.about__list--dl dt, .about__list--dl dd {
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .about__list--dl dt, .about__list--dl dd {
    font-size: 0.875em;
  }
}
.about__list--dl dt {
  font-weight: 500;
}
.about__list--dl dd {
  font-weight: 300;
}

/*======================================
    total planning
======================================*/
.planning-section__ttl--container {
  width: fit-content;
}

.planning-section__ttl--wrap {
  display: flex;
  align-items: center;
  column-gap: 1em;
}

.planning-section__number {
  font-size: 6.625em;
  font-family: "Suranna", serif;
  color: #495777;
}
@media screen and (max-width: 767px) {
  .planning-section__number {
    font-size: 4em;
  }
}

.planning-section__ttl {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS P明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 2.125em;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .planning-section__ttl {
    font-size: 1.75em;
  }
}

.planning-section__lead {
  font-family: "Suranna", serif;
  font-size: 2.75em;
  letter-spacing: 0.2em;
  line-height: 1.75;
  margin-top: -0.25em;
}
@media screen and (max-width: 767px) {
  .planning-section__lead {
    font-size: 1.5em;
  }
}

.planning-section__text {
  font-size: 1.125em;
  font-weight: 300;
  line-height: 1.75;
  margin-top: 0.7em;
}
@media screen and (max-width: 767px) {
  .planning-section__text {
    font-size: 0.875em;
  }
}

.diagram {
  margin-top: 12.25em;
}
@media screen and (max-width: 767px) {
  .diagram {
    margin-top: 3.25em;
  }
}

@media screen and (min-width: 768px) {
  .diagram__ttl {
    margin-left: 3em;
  }
}

.diagram__lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 5.8125em;
  row-gap: 9.25em;
  max-width: 68.3125em;
  width: 100%;
  margin: 9em 0 0 auto;
}
@media screen and (max-width: 767px) {
  .diagram__lists {
    grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
    column-gap: 2.5em;
    row-gap: 6em;
    margin-top: 3em;
  }
}

.diagram__list {
  position: relative;
}
.diagram__list::before {
  content: "";
  position: absolute;
  top: -4.5em;
  right: 0;
  width: 18em;
  height: 30.75em;
  background-color: #192238;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .diagram__list::before {
    height: 125%;
    top: -2em;
    right: -1.375em;
  }
}
@media screen and (min-width: 768px) {
  .diagram__list:nth-child(odd) {
    margin-top: 5.25em;
  }
}
@media screen and (max-width: 767px) {
  .diagram__list:nth-child(even)::before {
    right: unset;
    left: -1.375em;
  }
}

.diagram__list--img {
  max-width: 25.0625em;
}

.diagram__list--text {
  font-size: 1.125em;
  font-weight: 300;
  line-height: 1.75;
  margin-top: 1.25em;
}
@media screen and (max-width: 767px) {
  .diagram__list--text {
    font-size: 0.875em;
  }
}

.completion {
  margin-top: 10.75em;
  margin-bottom: 17.5em;
}
@media screen and (max-width: 767px) {
  .completion {
    margin-bottom: 0;
    margin-top: 7em;
  }
}

.completion__ttl {
  margin-left: auto;
}

.completion__img {
  margin-top: 4em;
  margin-left: -4.25em;
  max-width: 65.25em;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .completion__img {
    max-width: 100%;
    margin-left: -1.375em;
  }
}

.completion__more {
  margin: 6.625em auto 0;
}
@media screen and (max-width: 767px) {
  .completion__more {
    margin-top: 2.5em;
  }
}

/*======================================
    service
======================================*/
.service1 {
  margin-top: 15.5em;
}
@media screen and (max-width: 767px) {
  .service1 {
    margin-top: 13em;
  }
}

.service1__inner {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 5.875em;
}
@media screen and (max-width: 767px) {
  .service1__inner {
    flex-direction: column;
  }
}

.service1__contents {
  flex: 1;
  display: grid;
}

.service1__texts {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
}

.service__text {
  font-size: 1.125em;
  line-height: 1.85;
  font-weight: 300;
  margin-top: 2em;
  margin-left: 5.6em;
}
@media screen and (max-width: 767px) {
  .service__text {
    font-size: 0.875em;
    margin-left: 2em;
  }
}

.service1__img1 {
  grid-column: 1/2;
  grid-row: 1/2;
  width: 100%;
  max-width: 30.3125em;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .service1__img1 {
    height: 27.25em;
    translate: 0 -50%;
  }
  .service1__img1 img {
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
}
@media screen and (max-width: 767px) {
  .service1__img1 {
    translate: 0 -100%;
    max-width: 18.75em;
    margin-left: auto;
  }
}

.service1__img2 {
  margin-left: -4.25em;
  width: 23.75em;
  margin-top: 5.75em;
  translate: 0 -30%;
}
@media screen and (max-width: 767px) {
  .service1__img2 {
    margin-left: -1.375em;
    margin-top: 0;
    width: 80%;
    max-width: 18.75em;
  }
}

.service2 {
  display: grid;
  margin-top: 6.5em;
}

.service2__bg {
  height: 20em;
  position: relative;
  grid-column: 1/2;
  grid-row: 1/2;
}
.service2__bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1A2238;
  mix-blend-mode: multiply;
  opacity: 0.9;
  z-index: 2;
}

.service2__contents {
  position: relative;
  grid-column: 1/2;
  grid-row: 1/2;
  z-index: 2;
  display: flex;
  padding-top: 6.5em;
}
@media screen and (max-width: 767px) {
  .service2__contents {
    flex-direction: column;
  }
}

.service2__texts {
  flex: 1;
  margin-top: -1.2em;
  padding-left: 2em;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .service2__texts {
    padding-left: 0;
  }
}

.service2__img {
  max-width: 19.875em;
  width: 100%;
  margin-right: 9.4375em;
}
@media screen and (max-width: 767px) {
  .service2__img {
    margin-right: 0;
    margin-left: auto;
    margin-top: 2em;
    width: 80%;
    max-width: 15em;
  }
}

.service3 {
  margin-top: 9.8em;
}
@media screen and (min-width: 768px) {
  .service3 {
    margin-bottom: 7.5em;
  }
}
@media screen and (max-width: 767px) {
  .service3 {
    margin-top: 4em;
  }
}

.service3__inner {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 5.375em;
}
@media screen and (max-width: 767px) {
  .service3__inner {
    flex-direction: column;
  }
}

.service3__contents {
  flex: 1;
}

.service3__img1 {
  width: 24.25em;
  margin-left: auto;
  margin-right: -4.25em;
  margin-top: 5em;
}
@media screen and (max-width: 767px) {
  .service3__img1 {
    width: 80%;
    max-width: 18.75em;
    margin-right: -1.375em;
    margin-top: 2em;
  }
}

.service3__img2 {
  width: 38.4375em;
  margin-left: -4.25em;
}
@media screen and (max-width: 767px) {
  .service3__img2 {
    width: 90%;
    margin-left: -1.375em;
    max-width: 21.875em;
    margin-top: 8em;
  }
}

/*======================================
    green maintenance
======================================*/
.green__lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2.125em;
  row-gap: 1em;
  margin-top: 9em;
}
@media screen and (max-width: 767px) {
  .green__lists {
    margin-top: 1.25em;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 767px) {
  .green__list {
    width: 100%;
    max-width: 15.625em;
  }
}

.green__list--link {
  display: block;
  font-size: 1.125em;
  font-family: "Suranna", serif;
  padding-right: 1.44em;
  position: relative;
  transition: opacity 0.3s ease;
}
.green__list--link:hover {
  opacity: 0.7;
}
.green__list--link:hover::before {
  transform: translateY(calc(-50% + 0.25em));
}
.green__list--link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0.78em;
  height: 0.78em;
  background: url(../img/page/icon_arrow_down.svg) no-repeat center/contain;
  transition: transform 0.3s ease;
}

.green1 {
  margin-top: 9.5em;
}
@media screen and (max-width: 767px) {
  .green1 {
    margin-top: 6em;
  }
}

.green1__inner {
  display: grid;
  grid-template-columns: 39.25em auto;
  column-gap: 5.9375em;
}
@media screen and (max-width: 767px) {
  .green1__inner {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .green1__img1-1 {
    max-width: 25em;
  }
}

.green1__img1-2 {
  max-width: 17.8125em;
  margin-left: auto;
  margin-right: 3.6875em;
  margin-top: -4em;
}
@media screen and (max-width: 767px) {
  .green1__img1-2 {
    max-width: 10em;
    margin-top: -1em;
    margin-left: 1em;
  }
}

.green1__contents {
  display: flex;
  justify-content: space-between;
  padding-top: 12.25em;
}
@media screen and (max-width: 767px) {
  .green1__contents {
    padding-top: 2em;
  }
}

.green1__texts {
  padding-top: 1em;
  position: relative;
  z-index: 2;
}

.green1__img1-3 {
  width: 9.8125em;
  margin-left: auto;
  margin-right: -4.25em;
}
@media screen and (max-width: 767px) {
  .green1__img1-3 {
    margin-right: -1.375em;
  }
}

@media screen and (min-width: 768px) {
  .green__texts .section-ttl__head span.lg {
    margin-bottom: 0.15em;
  }
  .green__texts .section-ttl__head span.sm {
    margin-top: 0.8em;
  }
  .green__texts .section-ttl {
    margin-top: 1.9em;
  }
}

.green__more {
  margin-top: 4.5em;
}

.green2 {
  margin-top: 11em;
}

.green2__inner {
  display: grid;
  grid-template-columns: auto 51.1875em;
  margin-right: -4.25em;
}
@media screen and (max-width: 767px) {
  .green2__inner {
    margin-right: -1.375em;
    display: flex;
    flex-direction: column-reverse;
  }
}

.green2__texts {
  padding-top: 3.7em;
}
@media screen and (max-width: 767px) {
  .green2__texts {
    padding-top: 0;
  }
}

.green2__imgs {
  display: flex;
  margin-top: 7em;
}
@media screen and (max-width: 767px) {
  .green2__imgs {
    margin-top: 0;
  }
}

.green2__img1-1 {
  width: 33.4375em;
  margin-left: -4.25em;
  margin-top: 3em;
}
@media screen and (max-width: 767px) {
  .green2__img1-1 {
    margin-left: -1.375em;
    width: 65%;
  }
}

.green2__img1-2 {
  width: 18.25em;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .green2__img1-2 {
    width: 35%;
  }
}

.green3 {
  margin-top: 15.5em;
}
@media screen and (max-width: 767px) {
  .green3 {
    margin-top: 7em;
  }
}

.green3__inner {
  display: flex;
  column-gap: 5.75em;
}
@media screen and (max-width: 767px) {
  .green3__inner {
    flex-direction: column;
  }
}

.green3__img1 {
  width: 29.75em;
  margin-left: -4.25em;
}
@media screen and (max-width: 767px) {
  .green3__img1 {
    margin-left: -1.375em;
    height: 15em;
  }
  .green3__img1 img {
    height: 100%;
    object-fit: cover;
  }
}

.green3__contents {
  flex: 1;
  padding-top: 7em;
  display: grid;
}
@media screen and (max-width: 767px) {
  .green3__contents {
    padding-top: 2.5em;
    display: flex;
    flex-direction: column;
  }
}

.green3__texts {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
}

.green3__img2 {
  grid-column: 1/2;
  grid-row: 1/2;
  width: 29.875em;
  margin-left: auto;
  margin-right: -4.25em;
  margin-top: 16em;
}
@media screen and (max-width: 767px) {
  .green3__img2 {
    margin-right: -1.375em;
    margin-top: 1.25em;
    max-width: 15.625em;
  }
}

.green3__img3 {
  max-width: 38.375em;
  margin: 7.625em auto 0;
  transform: translateX(-13%);
}
@media screen and (max-width: 767px) {
  .green3__img3 {
    max-width: 21.875em;
    transform: translateX(-2%);
    margin-top: 3em;
  }
}

.green4 {
  margin-top: 12em;
  margin-bottom: 15em;
}
@media screen and (max-width: 767px) {
  .green4 {
    margin-bottom: 0;
    margin-top: 5em;
  }
}

.green4__inner {
  display: grid;
  grid-template-columns: auto 45.75em;
}
@media screen and (max-width: 767px) {
  .green4__inner {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .green4__texts {
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .green4__imgs {
    margin-top: 13em;
    position: relative;
    z-index: -1;
  }
}

.green4__img1-1 {
  max-width: 39.375em;
}
@media screen and (max-width: 767px) {
  .green4__img1-1 {
    max-width: 18.75em;
  }
}

.green4__img1-2 {
  max-width: 19.6875em;
  margin-right: -4.25em;
  margin-left: auto;
  margin-top: -4.2em;
}
@media screen and (min-width: 768px) {
  .green4__img1-2 {
    translate: 0 120%;
  }
}
@media screen and (max-width: 767px) {
  .green4__img1-2 {
    margin-right: -1.375em;
    max-width: 10em;
  }
}

.green4__img3 {
  max-width: 26.25em;
  margin-top: -10.8em;
}
@media screen and (min-width: 768px) {
  .green4__img3 {
    translate: 0 120%;
  }
}
@media screen and (max-width: 767px) {
  .green4__img3 {
    margin-top: -6em;
    max-width: 12.5em;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-15%);
  }
}

/*# sourceMappingURL=style.css.map */