@charset "UTF-8";
@font-face {
  font-family: "Yu Gothic";
  src: url("../font/Yu-Gothic-Medium.woff") format("woff"), url("../font/Yu-Gothic-Bold.woff") format("woff"), url("../font/Yu-Gothic-Medium.otf") format("otf"), url("../font/Yu-Gothic-Bold.otf") format("otf"), url("../font/Yu-Gothic-Bold.ttf") format("truetype"), url("../font/Yu-Gothic-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("../font/HelveticaNeue-Medium.otf") format("otf"), url("../font/HelveticaNeueMedium.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
:root {
  --clr-primary: #C00014;
  --clr-white: #FFFFFF;
}

* {
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, a, span {
  margin: 0;
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

#app {
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}
#app.cn {
  font-family: "Noto Sans SC", "Noto Sans", sans-serif;
}
#app.jp {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Helvetica Neue", "Noto Sans", Helvetica, "ABeeZee", sans-serif;
}

ul, li, ol {
  list-style: none;
}

.pcOnly {
  display: block;
}

.spOnly {
  display: none;
}

@media screen and (max-width: 1024px) {
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }
}
.header {
  max-width: 1512px;
  margin: 0 auto;
  position: relative;
}
.header .navbar {
  padding: 32px 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.header .navbar__links {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  font-weight: 600;
}
.header .navbar__navlist {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.header .navbar__navlist[data-variant=overlay] {
  flex-direction: column;
  color: #fff;
}
.header .navbar__navlist a {
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.header .navbar__overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(41, 41, 41, 0.8901960784);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.header .navbar__overlay[data-state=active] {
  display: flex;
}
.header .navbar__overlay[data-state=inactive] {
  display: none;
}
.header .navbar__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.header .navbar__langoptions {
  position: relative;
}
.header .navbar__langoptions .hidden_languages {
  padding-top: 10px;
  position: absolute;
}
.header .navbar__langoptions .hidden_languages[data-state=hidden] {
  display: none;
}
.header .navbar__langoptions .hidden_languages[data-state=show] {
  display: block;
}
.header .mainvisual {
  height: 100dvh;
}
.header .mainvisual__heading {
  padding: 0 42px;
  position: absolute;
}
.header .mainvisual__title h1 {
  color: var(--clr-primary);
  font-size: 64px;
  padding-top: 40px;
  line-height: 1.5em;
  font-weight: 400;
}
.header .mainvisual__subtitle p {
  padding-top: 22px;
  font-size: 24px;
  font-weight: 400;
}
.header .mainvisual__bg {
  position: relative;
  z-index: -1;
  background-image: url("../images/mv.jpg");
  background-size: contain;
  background-position: center -70px;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 1440px) {
  .header .mainvisual__bg {
    background-size: cover;
    background-position: 75% center;
  }
}
@media screen and (max-width: 768px) {
  .header {
    height: 80dvh;
  }
  .header .navbar {
    padding: 20px;
  }
  .header .navbar__links {
    gap: 20px;
  }
  .header .navbar__logo {
    max-width: 106px;
  }
  .header .mainvisual__bg {
    height: 70dvh;
  }
  .header .mainvisual__heading {
    padding: 0 20px;
  }
  .header .mainvisual__title h1 {
    font-size: 34px;
    padding-top: 30px;
  }
  .header .mainvisual__subtitle p {
    padding-top: 8px;
    font-size: 16px;
  }
}
@media screen and (max-width: 428px) {
  .header {
    height: 60dvh;
  }
  .header .mainvisual__bg {
    background-size: contain;
    height: 60dvh;
  }
}
.about {
  position: relative;
  max-width: 1512px;
  margin: 0 auto;
}
.about__container {
  display: grid;
  grid-template-columns: 4.7619047619% 4.4312169312% 4.2328042328% 2.4470899471% 3.9682539683% 6.5476190476% 16.4021164021% 8.0026455026% 14.1534391534% 9.3915343915% 5.753968254% 5.4232804233% 1.1243386243% 2.3148148148% 6.5476190476% 4.6296296296%;
  grid-template-rows: 84px 52px auto 51px 33px 51px auto auto auto 71px 13px 12px 37px 15px 8px 24px 52px;
}
.about__bgtext {
  grid-column: 1/8;
  grid-row: 3/6;
}
.about__content {
  grid-column: 2/span all;
  grid-row: 7/11;
}
.about__title {
  font-weight: 400;
}
.about__title h2 {
  font-size: calc(42px + 22 * (100vw - 1024px) / 496);
  color: var(--clr-primary);
}
@media screen and (min-width: 1521px) {
  .about__title h2 {
    font-size: 64px;
  }
}
.about__desc {
  padding-top: 42px;
}
.about__desc p {
  font-size: calc(16px + 8 * (100vw - 1024px) / 496);
  line-height: 2em;
  font-weight: 400;
}
@media screen and (min-width: 1521px) {
  .about__desc p {
    font-size: 24px;
  }
}
.about__bgshadow {
  grid-column: 5/span all;
  grid-row: 5/14;
  background-color: #F7F7F7;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.about__boxes {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.about__boxes[data-variant=white] {
  background-color: #F7F7F7;
}
.about__boxes[data-variant=primary] {
  background-color: var(--clr-primary);
}
.about__boxes.white_box_01 {
  grid-column: 15/16;
  grid-row: 1/2;
  z-index: -2;
}
.about__boxes.white_box_02 {
  grid-column: 1/3;
  grid-row: 10/11;
  z-index: -2;
}
.about__boxes.white_box_03 {
  grid-column: 12/13;
  grid-row: 16/18;
  z-index: -2;
}
.about__boxes.primary_box_01 {
  grid-column: 10/13;
  grid-row: 4/6;
  z-index: 2;
}
.about__boxes.primary_box_02 {
  grid-column: 6/7;
  grid-row: 11/16;
  z-index: 2;
}
.about__boxes.primary_box_03 {
  grid-column: 9/11;
  grid-row: 13/17;
  z-index: 2;
}

@media screen and (max-width: 1024px) {
  .about__container {
    grid-template-columns: 3.3078880407% 3.8167938931% 29.0076335878% 36.8956743003% 7.3791348601% 3.0534351145% 3.0534351145% 7.1246819338% 5.0890585242% 1.7811704835%;
    grid-template-rows: 46px 34px 42px 10px 74px auto 72px 12px 71px 33px 31px 17px 33px 49px;
  }
  .about__title h2 {
    font-size: 34px;
  }
  .about__desc {
    padding-top: 32px;
  }
  .about__desc p {
    font-size: 16px;
  }
  .about__bgtext {
    grid-column: 1/8;
    grid-row: 3/5;
    z-index: -1;
  }
  .about__content {
    grid-column: 2/8;
    grid-row: 6/11;
  }
  .about__bgshadow {
    grid-column: 3/9;
    grid-row: 5/12;
  }
  .about__boxes.white_box_01 {
    grid-column: 8/11;
    grid-row: 1/2;
    z-index: -2;
  }
  .about__boxes.white_box_02 {
    grid-column: 1/4;
    grid-row: 7/9;
    z-index: -2;
  }
  .about__boxes.white_box_03 {
    grid-column: 7/10;
    grid-row: 14/15;
    z-index: -2;
  }
  .about__boxes.primary_box_01 {
    grid-column: 4/10;
    grid-row: 4/6;
    z-index: -2;
  }
  .about__boxes.primary_box_02 {
    grid-column: 5/10;
    grid-row: 8/10;
    z-index: -2;
  }
  .about__boxes.primary_box_03 {
    grid-column: 2/6;
    grid-row: 11/13;
    z-index: -2;
  }
}
.services {
  position: relative;
  max-width: 1512px;
  margin: 0 auto;
  padding-top: 150px;
}
.services__cardlist {
  margin-top: -78px;
}
.services__cardlist > * + * {
  padding-top: 200px;
}
.services__title h2 {
  font-size: 74px;
  color: var(--clr-primary);
  text-align: center;
  font-weight: 500;
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
  letter-spacing: 0.01em;
}
.services__subtitle p {
  font-size: 32px;
  color: var(--clr-primary);
  text-align: center;
  font-weight: 400;
}
.services__bgtext {
  position: absolute;
  top: 124px;
  right: 18px;
  z-index: -1;
}
.services__imagesshadow {
  background-color: #D9D9D9;
  width: 100%;
  height: 100%;
  transform: translate(1.316vw, 1.316vw);
  opacity: 0;
  transform: translateY(10px);
}
.services__bgshadow {
  background-color: #F7F7F7;
  width: 100%;
  height: 100%;
}
.services__images {
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
}

@media screen and (max-width: 1024px) {
  .services__cardlist {
    margin-top: -50px;
  }
  .services__bgtext {
    right: -400px;
  }
  .services__title h2 {
    font-size: 42px;
  }
  .services__subtitle p {
    font-size: 22px;
  }
}
.flow {
  padding-top: 150px;
}
.flow__heading {
  padding-bottom: 54px;
}
.flow__title h2 {
  font-size: 74px;
  color: var(--clr-primary);
  text-align: center;
  font-weight: 500;
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
}
.flow__subtitle p {
  font-size: 32px;
  color: var(--clr-primary);
  text-align: center;
  font-weight: 400;
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
}
.flow__cardlist {
  max-width: 1331px;
  padding: 0 45px;
  margin: 0 auto;
  display: flex;
}
.flow__cardlist > :nth-child(1) {
  margin-top: 0px;
}
.flow__cardlist > :nth-child(2) {
  margin-top: 60px;
}
.flow__cardlist > :nth-child(3) {
  margin-top: 120px;
}
.flow__cardlist > :nth-child(4) {
  margin-top: 200px;
}

@media screen and (max-width: 1024px) {
  .flow__cardlist {
    flex-direction: column;
  }
  .flow__cardlist .flow__card {
    margin-top: 0;
  }
  .flow__card {
    max-width: 300px;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  .flow__card[data-variant=last] {
    max-width: 300px;
  }
  .flow__border {
    transform-origin: 150px center;
    transform: rotate(90deg);
  }
  .flow__border[data-variant=last] {
    transform-origin: center center;
  }
}
@media screen and (max-width: 768px) {
  .flow__title h2 {
    font-size: 42px;
  }
  .flow__subtitle p {
    font-size: 22px;
  }
}
.company {
  padding-top: 150px;
}
.company__heading {
  padding-bottom: 54px;
}
.company__title h2 {
  font-size: 74px;
  color: var(--clr-primary);
  text-align: center;
  font-weight: 500;
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
  letter-spacing: 0.01em;
}
.company__subtitle p {
  font-size: 32px;
  color: var(--clr-primary);
  text-align: center;
  font-weight: 400;
}
.company__content {
  background-color: #F7F7F7;
}
.company__table {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 62px 16px;
}
.company__table tbody > * + * {
  padding-top: 32px;
}
.company__table tr {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 80px;
}
.company__table td p {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 2em;
  font-family: "Noto Sans", sans-serif;
}
.company__table .table__title {
  max-width: 100px;
  text-align: end;
}
.company__table .table__info {
  max-width: 390px;
}

@media screen and (max-width: 768px) {
  .company__title h2 {
    font-size: 42px;
  }
  .company__subtitle p {
    font-size: 22px;
  }
  .company__table tbody > * + * {
    padding-top: 20px;
  }
  .company__table tr {
    gap: 40px;
  }
}
.sns {
  padding: 130px 16px;
}
.sns__container {
  max-width: 376px;
  width: 100%;
  margin: 0 auto;
}
.sns__title h2 {
  font-size: 74px;
  color: var(--clr-primary);
  text-align: center;
  font-weight: 500;
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
  letter-spacing: 0.01em;
}
.sns__snslist {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-top: 56px;
}

@media screen and (max-width: 768px) {
  .sns__title h2 {
    font-size: 42px;
  }
  .sns__snslist {
    gap: 15px;
  }
}
.contact {
  background-color: #D9D9D9;
  padding: 80px 16px;
}
.contact__container {
  max-width: 518px;
  width: 100%;
  margin: 0 auto;
}
.contact__container > * + * {
  padding-top: 36px;
}
.contact__heading {
  text-align: center;
}
.contact__heading > * + * {
  padding-top: 32px;
}
.contact__subtitle p {
  font-family: "Noto Sans", "Noto Sans SC", sans-serif;
  font-size: 20px;
  font-weight: 400;
}
.contact__title h2 {
  font-family: "Noto Sans", "Noto Sans SC", sans-serif;
  font-size: 32px;
  font-weight: 400;
}
.contact .button {
  font-size: 32px;
}

@media screen and (max-width: 768px) {
  .contact__subtitle p {
    font-size: 16px;
  }
  .contact__title h3 {
    font-size: 26px;
  }
  .contact .button {
    font-size: 28px;
  }
}
.footer {
  background-color: #292929;
  color: #fff;
  padding: 80px 16px 44px;
}
.footer__container {
  max-width: 437px;
  width: 100%;
  margin: 0 auto;
}
.footer__navlist {
  display: flex;
  justify-content: center;
  gap: 44px;
  padding-top: 44px;
}
.footer__navlist a {
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
  letter-spacing: 0.01em;
}
.footer__navitems {
  font-size: 16px;
}
.footer__snslist {
  max-width: 346px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 30px;
}
.footer__snsitems {
  max-width: 64px;
  aspect-ratio: 1/1;
}
.footer__copyright {
  padding-top: 68px;
  text-align: center;
}
.footer__copyright p {
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .footer__navitems {
    font-size: 14px;
  }
  .footer__copyright p {
    font-size: 12px;
  }
  .footer__snslist {
    gap: 30px;
  }
  .footer__snsitems {
    max-width: 54px;
    aspect-ratio: 1/1;
  }
  .footer__navlist {
    gap: 24px;
  }
}
.card__info {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-radius: 10px;
  justify-content: flex-end;
  transform: translateX(50px);
  opacity: 0;
}
.card__content {
  position: relative;
  display: grid;
}
.card__content[data-variant=style01] {
  grid-template-columns: 3.642384106% 1.3245033113% 18.3443708609% 0.3973509934% 5.4966887417% 13.7748344371% 5.8940397351% 0.3973509934% 40.1324503311% 7.0198675497% 3.5099337748%;
  grid-template-rows: 131px auto 71px auto 15px auto 22px auto auto 78px;
}
.card__content[data-variant=style01] .card__info {
  display: flex;
  padding: 30px;
  grid-column: 7/11;
  grid-row: 2/8;
  z-index: 1;
}
.card__content[data-variant=style01] .img01 {
  z-index: 1;
  grid-column: 2/6;
  grid-row: 3/5;
}
.card__content[data-variant=style01] .services__imagesshadow_01 {
  grid-column: 2/6;
  grid-row: 3/5;
  z-index: -1;
}
.card__content[data-variant=style01] .img02 {
  z-index: 2;
  grid-column: 4/8;
  grid-row: 4/7;
}
.card__content[data-variant=style01] .services__imagesshadow_02 {
  grid-column: 4/8;
  grid-row: 4/7;
  z-index: -1;
}
.card__content[data-variant=style01] .img03 {
  z-index: 1;
  grid-column: 2/6;
  grid-row: 6/10;
}
.card__content[data-variant=style01] .services__imagesshadow_03 {
  grid-column: 2/6;
  grid-row: 6/10;
  z-index: -1;
}
.card__content[data-variant=style01] .img04 {
  z-index: 2;
  grid-column: 4/8;
  grid-row: 8/11;
}
.card__content[data-variant=style01] .services__imagesshadow_04 {
  grid-column: 4/8;
  grid-row: 8/11;
  z-index: -1;
}
.card__content[data-variant=style01] .services__bgshadow {
  grid-column: 3/10;
  grid-row: 1/7;
  z-index: -2;
}
.card__content[data-variant=style02] {
  grid-template-columns: 4.701986755% 19.0066225166% 27.6821192053% 7.2847682119% 13.5761589404% 0.9271523179% 20.7947019868% 6.0264900662%;
  grid-template-rows: 39px auto auto 15px auto auto 38px;
}
.card__content[data-variant=style02] .card__info {
  display: flex;
  padding: 38px;
  flex-direction: row-reverse;
  grid-column: 2/5;
  grid-row: 3/7;
  padding-right: 118px;
}
.card__content[data-variant=style02] .card__number {
  padding-top: 18px;
}
.card__content[data-variant=style02] .img01 {
  grid-column: 4/6;
  grid-row: 1/4;
  z-index: 1;
}
.card__content[data-variant=style02] .img02 {
  grid-column: 7/8;
  grid-row: 1/4;
  z-index: 1;
}
.card__content[data-variant=style02] .img03 {
  grid-column: 4/6;
  grid-row: 5/6;
  z-index: 1;
}
.card__content[data-variant=style02] .img04 {
  grid-column: 7/8;
  grid-row: 5/6;
  z-index: 1;
}
.card__content[data-variant=style02] .services__imagesshadow_01 {
  grid-column: 4/6;
  grid-row: 1/4;
  z-index: -1;
}
.card__content[data-variant=style02] .services__imagesshadow_02 {
  grid-column: 7/8;
  grid-row: 1/4;
  z-index: -1;
}
.card__content[data-variant=style02] .services__imagesshadow_03 {
  grid-column: 4/6;
  grid-row: 5/6;
  z-index: -1;
}
.card__content[data-variant=style02] .services__imagesshadow_04 {
  grid-column: 7/8;
  grid-row: 5/6;
  z-index: -1;
}
.card__content[data-variant=style02] .services__bgshadow {
  grid-column: 3/8;
  grid-row: 2/8;
  z-index: -2;
}
.card__content[data-variant=style03] {
  grid-template-columns: 3.5761589404% 1.2582781457% 9.9337748344% 7.6821192053% 3.9072847682% 10.2649006623% 1.1920529801% 6.0927152318% 12.582781457% 39.9337748344% 3.5099337748%;
  grid-template-rows: 51px auto 148px 11px auto 12px auto auto 84px 65px;
}
.card__content[data-variant=style03] .card__info {
  display: flex;
  padding: 38px;
  grid-column: 8/11;
  grid-row: 2/8;
  z-index: 2;
}
.card__content[data-variant=style03] .img01 {
  grid-column: 2/7;
  grid-row: 1/5;
  z-index: 1;
}
.card__content[data-variant=style03] .img02 {
  grid-column: 5/9;
  grid-row: 3/6;
  z-index: 3;
}
.card__content[data-variant=style03] .img03 {
  grid-column: 3/6;
  grid-row: 4/9;
  z-index: 1;
}
.card__content[data-variant=style03] .img04 {
  grid-column: 5/9;
  grid-row: 7/10;
  z-index: 3;
}
.card__content[data-variant=style03] .services__imagesshadow_01 {
  grid-column: 2/7;
  grid-row: 1/5;
  z-index: -1;
}
.card__content[data-variant=style03] .services__imagesshadow_02 {
  grid-column: 5/9;
  grid-row: 3/6;
  z-index: -1;
}
.card__content[data-variant=style03] .services__imagesshadow_03 {
  grid-column: 3/6;
  grid-row: 4/9;
  z-index: -1;
}
.card__content[data-variant=style03] .services__imagesshadow_04 {
  grid-column: 5/9;
  grid-row: 7/10;
  z-index: -1;
}
.card__content[data-variant=style03] .services__bgshadow {
  grid-column: 4/10;
  grid-row: 1/10;
  z-index: -2;
}
.card__content[data-variant=style04] {
  grid-template-columns: 3.7748344371% 13.9072847682% 37.2185430464% 3.7748344371% 3.178807947% 4.4370860927% 17.1523178808% 3.7748344371% 2.7152317881% 4.9006622517% 5.1655629139%;
  grid-template-rows: 86px 114px auto 21px 181px 26px auto 56px auto;
}
.card__content[data-variant=style04] .card__info {
  display: flex;
  padding: 38px;
  flex-direction: row-reverse;
  grid-column: 2/6;
  grid-row: 3/8;
  z-index: 3;
}
.card__content[data-variant=style04] .card__number {
  margin-left: -50px;
}
.card__content[data-variant=style04] .img01 {
  grid-column: 4/8;
  grid-row: 1/5;
  z-index: 2;
}
.card__content[data-variant=style04] .img02 {
  grid-column: 7/11;
  grid-row: 3/6;
  z-index: 1;
}
.card__content[data-variant=style04] .img03 {
  grid-column: 5/9;
  grid-row: 7/10;
  z-index: 4;
}
.card__content[data-variant=style04] .services__imagesshadow_01 {
  grid-column: 4/8;
  grid-row: 1/5;
  z-index: -1;
}
.card__content[data-variant=style04] .services__imagesshadow_02 {
  grid-column: 7/11;
  grid-row: 3/6;
  z-index: -1;
}
.card__content[data-variant=style04] .services__imagesshadow_03 {
  grid-column: 5/9;
  grid-row: 7/10;
  z-index: -1;
}
.card__content[data-variant=style04] .services__bgshadow {
  grid-column: 3/10;
  grid-row: 2/8;
  z-index: -2;
}
.card__content[data-variant=style05] {
  grid-template-columns: 3.8410596026% 7.2185430464% 3.4437086093% 23.0463576159% 0.9933774834% 6.9536423841% 43.5761589404% 7.1523178808% 3.7748344371%;
  grid-template-rows: 20px 69px auto 57px auto 23px auto;
}
.card__content[data-variant=style05] .card__info {
  display: flex;
  padding: 30px;
  grid-column: 5/9;
  grid-row: 3/6;
  z-index: 1;
}
.card__content[data-variant=style05] .img01 {
  grid-column: 2/6;
  grid-row: 2/5;
  z-index: 2;
}
.card__content[data-variant=style05] .img02 {
  grid-column: 3/7;
  grid-row: 4/8;
  z-index: 2;
}
.card__content[data-variant=style05] .services__imagesshadow_01 {
  grid-column: 2/6;
  grid-row: 2/5;
  z-index: -1;
}
.card__content[data-variant=style05] .services__imagesshadow_02 {
  grid-column: 3/7;
  grid-row: 4/8;
  z-index: -1;
}
.card__content[data-variant=style05] .services__bgshadow {
  grid-column: 4/8;
  grid-row: 1/7;
  z-index: -2;
}
.card__content[data-variant=style06] {
  grid-template-columns: 3.7748344371% 13.8410596026% 30.3973509934% 13.0463576159% 6.8874172185% 0.8609271523% 2.6490066225% 13.2450331126% 6.8874172185% 0.7284768212% 2.7814569536% 5.0331125828%;
  grid-template-rows: 43px 78px auto 35px auto auto 75px auto auto 51px 41px;
}
.card__content[data-variant=style06] .card__info {
  display: flex;
  padding: 38px;
  flex-direction: row-reverse;
  grid-column: 2/7;
  grid-row: 3/9;
}
.card__content[data-variant=style06] .img01 {
  grid-column: 6/10;
  grid-row: 1/4;
  z-index: 2;
}
.card__content[data-variant=style06] .img02 {
  grid-column: 5/9;
  grid-row: 5/7;
  z-index: 3;
}
.card__content[data-variant=style06] .img03 {
  grid-column: 8/12;
  grid-row: 6/9;
  z-index: 2;
}
.card__content[data-variant=style06] .img04 {
  grid-column: 4/7;
  grid-row: 8/12;
  z-index: 2;
}
.card__content[data-variant=style06] .services__imagesshadow_01 {
  grid-column: 6/10;
  grid-row: 1/4;
  z-index: -1;
}
.card__content[data-variant=style06] .services__imagesshadow_02 {
  grid-column: 5/9;
  grid-row: 5/7;
  z-index: -1;
}
.card__content[data-variant=style06] .services__imagesshadow_03 {
  grid-column: 8/12;
  grid-row: 6/9;
  z-index: -1;
}
.card__content[data-variant=style06] .services__imagesshadow_04 {
  grid-column: 4/7;
  grid-row: 8/12;
  z-index: -1;
}
.card__content[data-variant=style06] .services__bgshadow {
  grid-column: 3/11;
  grid-row: 2/10;
  z-index: -2;
}
.card__content[data-variant=style07] {
  grid-template-columns: 5.0331125828% 5.0331125828% 2.1854304636% 21.3907284768% 6.0927152318% 6.8874172185% 5.2317880795% 43.1125827815% 5.0331125828%;
  grid-template-rows: 48px 161px auto 56px auto 74px;
}
.card__content[data-variant=style07] .card__info {
  display: flex;
  padding: 38px;
  grid-column: 5/9;
  grid-row: 2/5;
}
.card__content[data-variant=style07] .img01 {
  grid-column: 2/6;
  grid-row: 3/5;
  z-index: 2;
}
.card__content[data-variant=style07] .img02 {
  grid-column: 4/7;
  grid-row: 4/7;
  z-index: 2;
}
.card__content[data-variant=style07] .services__imagesshadow_01 {
  grid-column: 2/6;
  grid-row: 3/5;
  z-index: -1;
}
.card__content[data-variant=style07] .services__imagesshadow_02 {
  grid-column: 4/7;
  grid-row: 4/7;
  z-index: -1;
}
.card__content[data-variant=style07] .services__bgshadow {
  grid-column: 3/6;
  grid-row: 1/6;
  z-index: -2;
}
.card__title p {
  font-size: calc(42px + 22 * (100vw - 1024px) / 496);
  line-height: 1.5em;
  white-space: nowrap;
  font-weight: 400;
}
@media screen and (min-width: 1521px) {
  .card__title p {
    font-size: 64px;
  }
}
.card__description p {
  font-size: calc(12px + 4 * (100vw - 1024px) / 496);
  line-height: 2em;
  padding-top: 20px;
  font-weight: 400;
}
@media screen and (min-width: 1521px) {
  .card__description p {
    font-size: 16px;
  }
}
.card__number img {
  width: 75px;
}
.card__info {
  display: flex;
  gap: 28px;
}

@media screen and (max-width: 1024px) {
  .card__content[data-variant=style01] {
    grid-template-columns: 3.3078880407% 4.0712468193% 36.8956743003% 11.4503816794% 36.8956743003% 4.3256997455% 3.0534351145%;
    grid-template-rows: 85px auto 35px 71px auto 11px auto 11px auto 37px;
  }
  .card__content[data-variant=style01] .card__info {
    grid-column: 2/7;
    grid-row: 2/5;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 146px;
    z-index: 1;
  }
  .card__content[data-variant=style01] .card__number img {
    max-width: 36px;
  }
  .card__content[data-variant=style01] .img01 {
    grid-column: 3/5;
    grid-row: 3/6;
    z-index: 1;
  }
  .card__content[data-variant=style01] .img02 {
    grid-column: 4/6;
    grid-row: 4/8;
    z-index: 3;
  }
  .card__content[data-variant=style01] .img03 {
    grid-column: 3/5;
    grid-row: 7/10;
    z-index: 2;
  }
  .card__content[data-variant=style01] .img04 {
    grid-column: 4/6;
    grid-row: 9/11;
    z-index: 2;
  }
  .card__content[data-variant=style01] .services__imagesshadow_01 {
    grid-column: 3/5;
    grid-row: 3/6;
  }
  .card__content[data-variant=style01] .services__imagesshadow_02 {
    grid-column: 4/6;
    grid-row: 4/8;
  }
  .card__content[data-variant=style01] .services__imagesshadow_03 {
    grid-column: 3/5;
    grid-row: 7/10;
  }
  .card__content[data-variant=style01] .services__imagesshadow_04 {
    grid-column: 4/6;
    grid-row: 9/11;
  }
  .card__content[data-variant=style01] .services__bgshadow {
    grid-column: 1/span all;
    grid-row: 1/7;
    z-index: -2;
  }
  .card__content[data-variant=style02] {
    grid-template-columns: 3.3078880407% 6.3613231552% 38.4223918575% 1.5267175573% 38.4223918575% 8.9058524173% 3.0534351145%;
    grid-template-rows: 101px auto 38px auto 7px 27px auto;
  }
  .card__content[data-variant=style02] .card__info {
    grid-column: 2/7;
    grid-row: 1/4;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 79px;
    z-index: 1;
  }
  .card__content[data-variant=style02] .card__number {
    margin-left: 0;
  }
  .card__content[data-variant=style02] .card__number img {
    max-width: 36px;
  }
  .card__content[data-variant=style02] .img01 {
    grid-column: 3/4;
    grid-row: 3/5;
    z-index: 1;
  }
  .card__content[data-variant=style02] .img02 {
    grid-column: 5/6;
    grid-row: 3/5;
    z-index: 3;
  }
  .card__content[data-variant=style02] .img03 {
    grid-column: 3/4;
    grid-row: 6/8;
    z-index: 2;
  }
  .card__content[data-variant=style02] .img04 {
    grid-column: 5/6;
    grid-row: 6/8;
    z-index: 2;
  }
  .card__content[data-variant=style02] .services__imagesshadow_01 {
    grid-column: 3/4;
    grid-row: 3/5;
  }
  .card__content[data-variant=style02] .services__imagesshadow_02 {
    grid-column: 5/6;
    grid-row: 3/5;
  }
  .card__content[data-variant=style02] .services__imagesshadow_03 {
    grid-column: 3/4;
    grid-row: 6/8;
  }
  .card__content[data-variant=style02] .services__imagesshadow_04 {
    grid-column: 5/6;
    grid-row: 6/8;
  }
  .card__content[data-variant=style02] .services__bgshadow {
    grid-column: 1/span all;
    grid-row: 2/7;
    z-index: -2;
  }
  .card__content[data-variant=style03] {
    grid-template-columns: 3.3078880407% 4.834605598% 2.5445292621% 34.6055979644% 7.6335877863% 20.6106870229% 14.5038167939% 9.1603053435% 3.0534351145%;
    grid-template-rows: auto 92px 16px 60px 6px auto 5px 71px auto;
  }
  .card__content[data-variant=style03] .card__info {
    grid-column: 2/9;
    grid-row: 1/4;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 150px;
    z-index: 1;
  }
  .card__content[data-variant=style03] .card__number {
    margin-left: 0;
  }
  .card__content[data-variant=style03] .card__number img {
    max-width: 36px;
  }
  .card__content[data-variant=style03] .img01 {
    grid-column: 3/7;
    grid-row: 2/6;
    z-index: 1;
  }
  .card__content[data-variant=style03] .img02 {
    grid-column: 5/8;
    grid-row: 3/7;
    z-index: 3;
  }
  .card__content[data-variant=style03] .img03 {
    grid-column: 4/6;
    grid-row: 5/9;
    z-index: 2;
  }
  .card__content[data-variant=style03] .img04 {
    grid-column: 5/8;
    grid-row: 8/10;
    z-index: 2;
  }
  .card__content[data-variant=style03] .services__imagesshadow_01 {
    grid-column: 3/7;
    grid-row: 2/6;
  }
  .card__content[data-variant=style03] .services__imagesshadow_02 {
    grid-column: 5/8;
    grid-row: 3/7;
  }
  .card__content[data-variant=style03] .services__imagesshadow_03 {
    grid-column: 4/6;
    grid-row: 5/9;
  }
  .card__content[data-variant=style03] .services__imagesshadow_04 {
    grid-column: 5/8;
    grid-row: 8/10;
  }
  .card__content[data-variant=style03] .services__bgshadow {
    display: none;
  }
  .card__content[data-variant=style04] {
    grid-template-columns: 3.3078880407% 6.106870229% 7.1246819338% 22.9007633588% 17.3027989822% 7.3791348601% 22.6463104326% 10.1781170483% 3.0534351145%;
    grid-template-rows: 170px auto 51px 36px auto 67px 21px 21px auto;
  }
  .card__content[data-variant=style04] .card__info {
    grid-column: 2/9;
    grid-row: 1/4;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 92px;
    z-index: 1;
  }
  .card__content[data-variant=style04] .card__number {
    margin-left: 0;
  }
  .card__content[data-variant=style04] .card__number img {
    max-width: 36px;
  }
  .card__content[data-variant=style04] .img01 {
    grid-column: 3/6;
    grid-row: 3/6;
    z-index: 2;
  }
  .card__content[data-variant=style04] .img02 {
    grid-column: 5/8;
    grid-row: 5/8;
    z-index: 1;
  }
  .card__content[data-variant=style04] .img03 {
    grid-column: 4/7;
    grid-row: 7/10;
    z-index: 2;
  }
  .card__content[data-variant=style04] .services__imagesshadow_01 {
    grid-column: 3/6;
    grid-row: 3/6;
  }
  .card__content[data-variant=style04] .services__imagesshadow_02 {
    grid-column: 5/8;
    grid-row: 5/8;
  }
  .card__content[data-variant=style04] .services__imagesshadow_03 {
    grid-column: 4/7;
    grid-row: 7/10;
  }
  .card__content[data-variant=style04] .services__bgshadow {
    grid-column: 1/span all;
    grid-row: 2/9;
    z-index: -2;
  }
  .card__content[data-variant=style05] {
    grid-template-columns: 3.3078880407% 6.106870229% 13.4860050891% 52.417302799% 13.2315521628% 8.3969465649% 3.0534351145%;
    grid-template-rows: 170px auto 44px auto 28px 54px auto;
  }
  .card__content[data-variant=style05] .card__info {
    grid-column: 2/7;
    grid-row: 1/4;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 65px;
    z-index: 1;
  }
  .card__content[data-variant=style05] .card__number {
    margin-left: 0;
  }
  .card__content[data-variant=style05] .card__number img {
    max-width: 36px;
  }
  .card__content[data-variant=style05] .img01 {
    grid-column: 3/5;
    grid-row: 3/6;
    z-index: 1;
  }
  .card__content[data-variant=style05] .img02 {
    grid-column: 4/6;
    grid-row: 5/8;
    z-index: 2;
  }
  .card__content[data-variant=style05] .services__imagesshadow_01 {
    grid-column: 3/5;
    grid-row: 3/6;
  }
  .card__content[data-variant=style05] .services__imagesshadow_02 {
    grid-column: 4/6;
    grid-row: 5/8;
  }
  .card__content[data-variant=style05] .services__bgshadow {
    grid-column: 1/span all;
    grid-row: 2/7;
    z-index: -2;
  }
  .card__content[data-variant=style06] {
    grid-template-columns: 3.3078880407% 5.0890585242% 7.8880407125% 28.7531806616% 1.7811704835% 0.7633587786% 9.9236641221% 30.2798982188% 1.0178117048% 8.1424936387% 3.0534351145%;
    grid-template-rows: 170px auto 35px 46px auto 9px auto 33px 24px auto;
  }
  .card__content[data-variant=style06] .card__info {
    grid-column: 2/11;
    grid-row: 1/5;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 100px;
    z-index: 1;
  }
  .card__content[data-variant=style06] .card__number {
    margin-left: 0;
  }
  .card__content[data-variant=style06] .card__number img {
    max-width: 36px;
  }
  .card__content[data-variant=style06] .img01 {
    grid-column: 7/10;
    grid-row: 3/6;
    z-index: 2;
  }
  .card__content[data-variant=style06] .img02 {
    grid-column: 4/8;
    grid-row: 7/10;
    z-index: 2;
  }
  .card__content[data-variant=style06] .img03 {
    grid-column: 6/9;
    grid-row: 8/11;
    z-index: 2;
  }
  .card__content[data-variant=style06] .img04 {
    grid-column: 3/5;
    grid-row: 4/6;
    z-index: 2;
  }
  .card__content[data-variant=style06] .services__imagesshadow_01 {
    grid-column: 7/10;
    grid-row: 3/6;
  }
  .card__content[data-variant=style06] .services__imagesshadow_02 {
    grid-column: 4/8;
    grid-row: 7/10;
  }
  .card__content[data-variant=style06] .services__imagesshadow_03 {
    grid-column: 6/9;
    grid-row: 8/11;
  }
  .card__content[data-variant=style06] .services__imagesshadow_04 {
    grid-column: 3/5;
    grid-row: 4/6;
  }
  .card__content[data-variant=style06] .services__bgshadow {
    grid-column: 1/span all;
    grid-row: 2/9;
    z-index: -2;
  }
  .card__content[data-variant=style07] {
    grid-template-columns: 3.3078880407% 4.834605598% 13.7404580153% 52.417302799% 13.2315521628% 8.9058524173% 3.0534351145%;
    grid-template-rows: 132px auto 69px auto 30px auto 65px;
  }
  .card__content[data-variant=style07] .card__info {
    grid-column: 2/7;
    grid-row: 1/4;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 100px;
    z-index: 1;
  }
  .card__content[data-variant=style07] .card__number {
    margin-left: 0;
  }
  .card__content[data-variant=style07] .card__number img {
    max-width: 36px;
  }
  .card__content[data-variant=style07] .img01 {
    grid-column: 3/5;
    grid-row: 3/6;
    z-index: 2;
  }
  .card__content[data-variant=style07] .img02 {
    grid-column: 4/6;
    grid-row: 5/8;
    z-index: 2;
  }
  .card__content[data-variant=style07] .services__imagesshadow_01 {
    grid-column: 3/5;
    grid-row: 3/6;
  }
  .card__content[data-variant=style07] .services__imagesshadow_02 {
    grid-column: 4/6;
    grid-row: 5/8;
  }
  .card__content[data-variant=style07] .services__bgshadow {
    grid-column: 1/span all;
    grid-row: 2/7;
    z-index: -2;
  }
  .card__title p {
    font-size: 32px;
    white-space: normal;
  }
  .card__description p {
    font-size: 16px;
  }
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #292929;
  color: #fff;
  border-radius: 50vw;
  padding: 1.25em 0;
  font-weight: 400;
  font-family: "Helvetica Neueu", Helvetica, sans-serif;
}

.menu {
  width: 30px;
  height: 20px;
  position: relative;
  z-index: 9999;
}
.menu[data-state=active] > * {
  background: #fff;
}
.menu[data-state=active] :nth-child(1) {
  top: 50%;
  rotate: 45deg;
}
.menu[data-state=active] :nth-child(2) {
  top: 50%;
  rotate: 45deg;
}
.menu[data-state=active] :nth-child(3) {
  top: 50%;
  rotate: -45deg;
}
.menu > * {
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
}
.menu :nth-child(1) {
  top: 0;
}
.menu :nth-child(2) {
  top: 50%;
}
.menu :nth-child(3) {
  top: 100%;
}/*# sourceMappingURL=style.css.map */