/* pacifico-regular - cyrillic_latin */
@font-face {
  font-display: swap;
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url("../dist/fonts/pacifico-v22-cyrillic_latin-regular.woff2") format("woff2");
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: #000;
}

@media (max-width: 1919px) {
  body {
    font-size: calc(100vw / (1920/18));
  }
}

@media (max-width: 540px) {
  body {
    margin-left: 0;
    font-size: calc(100vw / (412/12));
  }
}

a {
  color: #000;
  text-decoration: none;
}

main {
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.ellipse1 {
  position: absolute;
  z-index: 2;
  width: 175px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/ellipse1.svg);
  background-size: 100%;
  top: -52px;
  right: 126px;
}

@media (max-width: 1919px) {
  .ellipse1 {
    width: calc(100vw / (1920/175));
  }
}

@media (max-width: 540px) {
  .ellipse1 {
    width: calc(100vw / (412/75));
  }
}

@media (max-width: 1919px) {
  .ellipse1 {
    top: calc(100vw / (1920/-52));
    right: calc(100vw / (1920/126));
  }
}

@media (max-width: 540px) {
  .ellipse1 {
    top: calc(100vw / (412/15));
    right: calc(100vw / (412/21));
  }
}

.ellipse2 {
  position: absolute;
  z-index: 2;
  width: 68px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/ellipse2.svg);
  background-size: 100%;
  top: 59px;
  right: 303px;
}

@media (max-width: 1919px) {
  .ellipse2 {
    width: calc(100vw / (1920/68));
  }
}

@media (max-width: 540px) {
  .ellipse2 {
    width: calc(100vw / (412/29));
  }
}

@media (max-width: 1919px) {
  .ellipse2 {
    top: calc(100vw / (1920/59));
    right: calc(100vw / (1920/303));
  }
}

@media (max-width: 540px) {
  .ellipse2 {
    top: calc(100vw / (412/62));
    right: calc(100vw / (412/96));
  }
}

.menu {
  display: flex;
  list-style: none;
  position: absolute;
  z-index: 1;
  padding: 0;
  margin: 0;
  left: 323px;
  top: 33px;
}

@media (max-width: 1919px) {
  .menu {
    left: calc(100vw / (1920/323));
    top: calc(100vw / (1920/33));
  }
}

@media (max-width: 540px) {
  .menu {
    left: calc(100vw / (412/64));
    top: calc(100vw / (412/38));
  }
}

.menu-item {
  text-transform: uppercase;
  position: relative;
  margin: 0;
  padding: 0;
}

.menu-item:not(:first-of-type) {
  padding-left: 28px;
  margin-left: 28px;
}

@media (max-width: 1919px) {
  .menu-item:not(:first-of-type) {
    padding-left: calc(100vw / (1920/28));
    margin-left: calc(100vw / (1920/28));
  }
}

@media (max-width: 540px) {
  .menu-item:not(:first-of-type) {
    padding-left: calc(100vw / (412/7));
    margin-left: calc(100vw / (412/7));
  }
}

.menu-item:not(:first-of-type)::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: -10px;
  width: 1px;
  height: 42px;
  background: #000;
}

@media (max-width: 1919px) {
  .menu-item:not(:first-of-type)::before {
    top: calc(100vw / (1920/-10));
    height: calc(100vw / (1920/42));
  }
}

@media (max-width: 540px) {
  .menu-item:not(:first-of-type)::before {
    top: calc(100vw / (412/-3.5));
    height: calc(100vw / (412/19));
  }
}

.top {
  padding-top: 103px;
}

@media (max-width: 1919px) {
  .top {
    padding-top: calc(100vw / (1920/103));
  }
}

@media (max-width: 540px) {
  .top {
    padding-top: calc(100vw / (412/232));
  }
}

.top__logo {
  position: absolute;
  z-index: 3;
  width: 622px;
  height: 198px;
  top: 251px;
  left: calc((100% - 622px) / 2);
}

@media (max-width: 1919px) {
  .top__logo {
    width: calc(100vw / (1920/622));
    height: calc(100vw / (1920/198));
    top: calc(100vw / (1920/251));
    left: calc((100% - calc(100vw / (1920/622))) / 2);
  }
}

@media (max-width: 540px) {
  .top__logo {
    width: calc(100vw / (412/254));
    height: calc(100vw / (412/81));
    top: calc(100vw / (412/119));
    left: calc((100% - calc(100vw / (412/254))) / 2);
  }
}

.top__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.top__text {
  position: absolute;
  z-index: 3;
  text-align: center;
  font-size: 28px;
  text-transform: uppercase;
  top: 563px;
  width: 385px;
  left: calc((100% - 385px) / 2);
}

@media (max-width: 1919px) {
  .top__text {
    top: calc(100vw / (1920/563));
    width: calc(100vw / (1920/385));
    font-size: calc(100vw / (1920/28));
    left: calc((100% - calc(100vw / (1920/385))) / 2);
  }
}

@media (max-width: 540px) {
  .top__text {
    top: calc(100vw / (412/232));
    width: calc(100vw / (412/185));
    font-size: calc(100vw / (412/13));
    left: calc((100% - calc(100vw / (412/185))) / 2);
  }
}

.top__cat {
  width: 706px;
  height: 792px;
  position: relative;
  z-index: 1;
  background: url(/wp-content/uploads/2023/06/header-cat.jpg);
  background-size: 100%;
}

@media (max-width: 1919px) {
  .top__cat {
    width: calc(100vw / (1920/706));
    height: calc(100vw / (1920/792));
  }
}

@media (max-width: 540px) {
  .top__cat {
    background-image: url(/wp-content/uploads/2023/06/header-cat_mobile.jpg);
    width: calc(100vw / (412/165));
    height: calc(100vw / (412/271));
  }
}

.top__dog {
  position: absolute;
  z-index: 1;
  width: 817px;
  height: 792px;
  right: 0;
  top: 103px;
  background: url(/wp-content/uploads/2023/06/header-dog.jpg);
  background-size: 100%;
}

@media (max-width: 1919px) {
  .top__dog {
    width: calc(100vw / (1920/817));
    height: calc(100vw / (1920/792));
    top: calc(100vw / (1920/103));
  }
}

@media (max-width: 540px) {
  .top__dog {
    background-image: url(/wp-content/uploads/2023/06/header-dog_mobile.jpg);
    width: calc(100vw / (412/200));
    height: calc(100vw / (412/271));
    top: calc(100vw / (412/232));
  }
}

@keyframes arrowDownAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

.arrowDown {
  width: 70px;
  height: 70px;
  background: url(/wp-content/uploads/2023/06/arrowDown.svg);
  background-size: 100%;
  position: absolute;
  z-index: 3;
  left: calc(50% - 35px);
  top: 792px;
  animation: arrowDownAnimation 1s linear infinite;
}

@media (max-width: 1919px) {
  .arrowDown {
    top: calc(100vw / (1920/792));
    width: calc(100vw / (1920/70));
    height: calc(100vw / (1920/70));
    left: calc((50% - calc(100vw / (1920/35))));
  }
}

@media (max-width: 540px) {
  .arrowDown {
    top: calc(100vw / (412/443));
    width: calc(100vw / (412/30));
    height: calc(100vw / (412/30));
    left: calc((50% - calc(100vw / (412/15))));
  }
}

.shirm1 {
  width: 100%;
  aspect-ratio: 1920 / 180;
  background: url(/wp-content/uploads/2023/06/shirm1.svg);
  background-size: 100%;
  position: absolute;
  z-index: 2;
  top: 817px;
}

@media (max-width: 1919px) {
  .shirm1 {
    top: calc(100vw / (1920/817));
  }
}

@media (max-width: 540px) {
  .shirm1 {
    background-image: url(/wp-content/uploads/2023/06/shirm1_mobile.svg);
    aspect-ratio: 412 / 40;
    top: calc(100vw / (412/480));
  }
}

.benefits {
  padding-left: 190px;
  padding-right: 190px;
  display: flex;
  padding-top: 102px;
}

@media (max-width: 1919px) {
  .benefits {
    padding-left: calc(100vw / (1920/190));
    padding-right: calc(100vw / (1920/190));
  }
}

@media (max-width: 540px) {
  .benefits {
    padding-left: calc(100vw / (412/70));
    padding-right: calc(100vw / (412/70));
  }
}

@media (max-width: 1919px) {
  .benefits {
    padding-top: calc(100vw / (1920/102));
  }
}

@media (max-width: 540px) {
  .benefits {
    flex-direction: column;
    padding-top: calc(100vw / (412/40));
  }
}

.benefits__pic {
  flex: 0 0 auto;
  width: 673px;
  aspect-ratio: 673 / 539;
  margin-right: 162px;
  position: relative;
}

@media (max-width: 1919px) {
  .benefits__pic {
    width: calc(100vw / (1920/673));
    margin-right: calc(100vw / (1920/162));
  }
}

@media (max-width: 540px) {
  .benefits__pic {
    margin: 0;
    width: calc(100vw / (412/252));
    margin-top: calc(100vw / (412/70));
    order: 1;
  }
}

.benefits__pic img {
  display: block;
  width: 100%;
  height: 100%;
}

.benefits__pic::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 117px;
  aspect-ratio: 117 / 127;
  background: url(/wp-content/uploads/2023/06/curvyArrow.svg);
  background-size: 100%;
  top: 90%;
  left: 70%;
}

@media (max-width: 1919px) {
  .benefits__pic::after {
    width: calc(100vw / (1920/117));
  }
}

@media (max-width: 540px) {
  .benefits__pic::after {
    width: calc(100vw / (412/44));
    top: 89%;
    left: 10%;
  }
}

.benefits__list {
  flex: 1 1 auto;
}

.benefits__list h2 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 80px;
  padding-left: 123px;
  margin-top: 41px;
  margin-bottom: 0;
}

@media (max-width: 1919px) {
  .benefits__list h2 {
    font-size: calc(100vw / (1920/80));
  }
}

@media (max-width: 540px) {
  .benefits__list h2 {
    font-size: calc(100vw / (412/35));
  }
}

@media (max-width: 1919px) {
  .benefits__list h2 {
    padding-left: calc(100vw / (1920/123));
    margin-top: calc(100vw / (1920/41));
  }
}

@media (max-width: 540px) {
  .benefits__list h2 {
    padding-left: 0;
    margin-top: 0;
    margin-left: calc(100vw / (412/32));
  }
}

.benefits__list__arrow {
  background: url(/wp-content/uploads/2023/06/arrowBenefits.svg);
  background-size: 100%;
  width: 104px;
  height: auto;
  aspect-ratio: 1;
  margin-left: auto;
  margin-right: 230px;
}

@media (max-width: 1919px) {
  .benefits__list__arrow {
    width: calc(100vw / (1920/104));
    margin-right: calc(100vw / (1920/230));
  }
}

@media (max-width: 540px) {
  .benefits__list__arrow {
    width: calc(100vw / (412/49));
    margin-right: calc(100vw / (412/28));
  }
}

.benefits__list__items {
  font-size: 25px;
  line-height: 1.5em;
}

@media (max-width: 1919px) {
  .benefits__list__items {
    font-size: calc(100vw / (1920/25));
  }
}

@media (max-width: 540px) {
  .benefits__list__items {
    font-size: calc(100vw / (412/13));
  }
}

.benefits__list__items > div {
  padding-left: 43px;
  position: relative;
  line-height: 1.3em;
  margin-bottom: 0.5em;
}

@media (max-width: 1919px) {
  .benefits__list__items > div {
    padding-left: calc(100vw / (1920/43));
  }
}

@media (max-width: 540px) {
  .benefits__list__items > div {
    padding-left: calc(100vw / (412/36));
  }
}

.benefits__list__items > div::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0.15em;
  width: 26px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/bullet.svg);
  background-size: 100%;
}

@media (max-width: 1919px) {
  .benefits__list__items > div::before {
    width: calc(100vw / (1920/26));
  }
}

@media (max-width: 540px) {
  .benefits__list__items > div::before {
    width: calc(100vw / (412/14));
  }
}

.benefits__list__care {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 40px;
  transform: rotate(-7deg);
  position: relative;
}

@media (max-width: 1919px) {
  .benefits__list__care {
    font-size: calc(100vw / (1920/40));
  }
}

@media (max-width: 540px) {
  .benefits__list__care {
    font-size: calc(100vw / (412/24));
  }
}

.benefits__list__care span {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 304px;
  white-space: nowrap;
}

@media (max-width: 1919px) {
  .benefits__list__care span {
    left: calc(100vw / (1920/304));
  }
}

@media (max-width: 540px) {
  .benefits__list__care span {
    left: calc(100vw / (412/45));
  }
}

.benefits__list__care span::after {
  content: '';
  position: absolute;
  z-index: 1;
  background: url(/wp-content/uploads/2023/06/strokes.svg);
  background-size: 100%;
  width: 88px;
  height: auto;
  aspect-ratio: 88/27;
  top: 100%;
  right: 168px;
}

@media (max-width: 1919px) {
  .benefits__list__care span::after {
    width: calc(100vw / (1920/88));
    right: calc(100vw / (1920/168));
  }
}

@media (max-width: 540px) {
  .benefits__list__care span::after {
    width: calc(100vw / (412/44));
    right: calc(100vw / (412/99));
    transform: rotate(36deg);
    top: 110%;
  }
}

.ellipse3 {
  position: absolute;
  z-index: 2;
  width: 175px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/ellipse1.svg);
  background-size: 100%;
  top: 1092px;
  left: 871px;
  transform: rotate(240deg);
}

@media (max-width: 1919px) {
  .ellipse3 {
    width: calc(100vw / (1920/175));
  }
}

@media (max-width: 540px) {
  .ellipse3 {
    width: calc(100vw / (412/75));
  }
}

@media (max-width: 1919px) {
  .ellipse3 {
    top: calc(100vw / (1920/1092));
    left: calc(100vw / (1920/871));
  }
}

@media (max-width: 540px) {
  .ellipse3 {
    width: calc(100vw / (412/70));
    top: calc(100vw / (412/1044));
    left: calc(100vw / (412/280));
    transform: rotate(230deg);
  }
}

.ellipse4 {
  position: absolute;
  z-index: 2;
  width: 68px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/ellipse2.svg);
  background-size: 100%;
  top: 1188px;
  left: 1033px;
  transform: rotate(230deg);
}

@media (max-width: 1919px) {
  .ellipse4 {
    width: calc(100vw / (1920/68));
  }
}

@media (max-width: 540px) {
  .ellipse4 {
    width: calc(100vw / (412/29));
  }
}

@media (max-width: 1919px) {
  .ellipse4 {
    top: calc(100vw / (1920/1188));
    left: calc(100vw / (1920/1033));
  }
}

@media (max-width: 540px) {
  .ellipse4 {
    width: calc(100vw / (412/30));
    top: calc(100vw / (412/1103));
    left: calc(100vw / (412/341));
  }
}

.production {
  padding-left: 190px;
  padding-right: 190px;
  position: relative;
  margin-top: 100px;
}

@media (max-width: 1919px) {
  .production {
    padding-left: calc(100vw / (1920/190));
    padding-right: calc(100vw / (1920/190));
  }
}

@media (max-width: 540px) {
  .production {
    padding-left: calc(100vw / (412/70));
    padding-right: calc(100vw / (412/70));
  }
}

@media (max-width: 1919px) {
  .production {
    margin-top: calc(100vw / (1920/100));
  }
}

@media (max-width: 540px) {
  .production {
    margin-top: calc(100vw / (412/69));
    padding-top: 3.1em;
  }
}

.production h2 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 80px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 1919px) {
  .production h2 {
    font-size: calc(100vw / (1920/80));
  }
}

@media (max-width: 540px) {
  .production h2 {
    font-size: calc(100vw / (412/35));
  }
}

.production h3 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 40px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 1919px) {
  .production h3 {
    font-size: calc(100vw / (1920/40));
  }
}

@media (max-width: 540px) {
  .production h3 {
    font-size: calc(100vw / (412/24));
  }
}

@media (max-width: 540px) {
  .production--cats .production__header {
    margin-left: -1em;
  }
}

.production--cats__arrow {
  background-image: url(/wp-content/uploads/2023/06/arrowCats.svg);
  background-size: 100%;
  width: 25px;
  aspect-ratio: 25/44;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  animation: arrowDownAnimation 1s linear infinite;
}

@media (max-width: 1919px) {
  .production--cats__arrow {
    width: calc(100vw / (1920/25));
  }
}

@media (max-width: 540px) {
  .production--cats__arrow {
    width: calc(100vw / (412/15));
  }
}

.production--cats__pic {
  background-image: url(/wp-content/uploads/2023/06/cat.jpg);
  background-size: 100%;
  width: 837px;
  height: auto;
  aspect-ratio: 837/1085;
  position: absolute;
  z-index: 1;
  top: 25px;
  right: 0;
}

@media (max-width: 1919px) {
  .production--cats__pic {
    width: calc(100vw / (1920/837));
    top: calc(100vw / (1920/25));
  }
}

@media (max-width: 540px) {
  .production--cats__pic {
    background-image: url(/wp-content/uploads/2023/06/cat_mobile.jpg);
    width: calc(100vw / (412/207));
    top: calc(100vw / (412/8));
    aspect-ratio: 207/282;
  }
}

.production--cats__pic::before {
  content: '';
  position: absolute;
  top: -55px;
  right: 0;
  z-index: 2;
  width: 753px;
  aspect-ratio: 753/89;
  background-image: url(/wp-content/uploads/2023/06/separator-cat.svg);
  background-size: 100%;
}

@media (max-width: 1919px) {
  .production--cats__pic::before {
    width: calc(100vw / (1920/753));
    top: calc(100vw / (1920/-55));
  }
}

@media (max-width: 540px) {
  .production--cats__pic::before {
    width: calc(100vw / (412/215));
    top: calc(100vw / (412/-21));
    aspect-ratio: 215/36;
    background-image: url(/wp-content/uploads/2023/06/separator-cat_mobile.svg);
  }
}

.production--dogs {
  margin-top: 160px;
}

@media (max-width: 1919px) {
  .production--dogs {
    margin-top: calc(100vw / (1920/160));
  }
}

@media (max-width: 540px) {
  .production--dogs {
    margin-top: calc(100vw / (412/70));
  }
}

.production--dogs__bigArrow {
  background-image: url(/wp-content/uploads/2023/06/arrowProd.svg);
  background-size: 100%;
  width: 104px;
  aspect-ratio: 104/105;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 37px;
}

@media (max-width: 1919px) {
  .production--dogs__bigArrow {
    width: calc(100vw / (1920/104));
    top: calc(100vw / (1920/37));
  }
}

@media (max-width: 540px) {
  .production--dogs__bigArrow {
    width: calc(100vw / (412/51));
    top: calc(100vw / (412/15));
  }
}

@media (max-width: 540px) {
  .production--dogs .production__header {
    margin-left: 0;
    margin-right: -1em;
  }
}

.production--dogs .production__header h2 {
  padding-top: 85px;
}

@media (max-width: 1919px) {
  .production--dogs .production__header h2 {
    padding-top: calc(100vw / (1920/85));
  }
}

@media (max-width: 540px) {
  .production--dogs .production__header h2 {
    padding-top: calc(100vw / (412/10));
  }
}

.production--dogs__arrow {
  background-image: url(/wp-content/uploads/2023/06/arrowDogs.svg);
  background-size: 100%;
  width: 25px;
  aspect-ratio: 25/44;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  animation: arrowDownAnimation 1s linear infinite;
}

@media (max-width: 1919px) {
  .production--dogs__arrow {
    width: calc(100vw / (1920/25));
  }
}

@media (max-width: 540px) {
  .production--dogs__arrow {
    width: calc(100vw / (412/15));
  }
}

.production--dogs__pic {
  background-image: url(/wp-content/uploads/2023/06/dog.jpg);
  background-size: 100%;
  width: 710px;
  height: auto;
  aspect-ratio: 710/1147;
  position: absolute;
  z-index: 1;
  top: 120px;
  left: 0;
}

@media (max-width: 1919px) {
  .production--dogs__pic {
    width: calc(100vw / (1920/710));
    top: calc(100vw / (1920/120));
  }
}

@media (max-width: 540px) {
  .production--dogs__pic {
    background-image: url(/wp-content/uploads/2023/06/dog_mobile.jpg);
    width: calc(100vw / (412/126));
    aspect-ratio: 126/274;
  }
}

.production--dogs__pic::before {
  content: '';
  position: absolute;
  top: -110px;
  left: 0;
  z-index: 2;
  width: 977px;
  aspect-ratio: 977/51;
  background-image: url(/wp-content/uploads/2023/06/separator-dog.svg);
  background-size: 100%;
}

@media (max-width: 1919px) {
  .production--dogs__pic::before {
    width: calc(100vw / (1920/977));
    top: calc(100vw / (1920/-110));
  }
}

@media (max-width: 540px) {
  .production--dogs__pic::before {
    width: calc(100vw / (412/214));
    aspect-ratio: 214/23;
    background-image: url(/wp-content/uploads/2023/06/separator-dog_mobile.svg);
  }
}

.production--dogs .production__items {
  margin-left: auto;
  margin-right: -43px;
  margin-top: 80px;
}

@media (max-width: 1919px) {
  .production--dogs .production__items {
    margin-right: calc(100vw / (1920/-43));
    margin-top: calc(100vw / (1920/80));
  }
}

@media (max-width: 540px) {
  .production--dogs .production__items {
    margin-right: 0;
    margin-top: calc(100vw / (412/-7));
    z-index: 1;
  }
}

@media (max-width: 540px) {
  .production--dogs .production__items__strokes--top {
    left: auto;
    right: calc(100vw / (412/-43));
    top: calc(100vw / (412/51));
    background-image: url(/wp-content/uploads/2023/06/strokes2flipX.svg);
  }
  .production--dogs .production__items__strokes--bottom {
    right: auto;
    left: calc(100vw / (412/-43));
    bottom: 0;
    background-image: url(/wp-content/uploads/2023/06/strokes2flipY.svg);
  }
}

.production__items {
  position: relative;
  z-index: 2;
  display: flex;
  padding-top: 54px;
  width: calc(349px * 3);
}

@media (max-width: 1919px) {
  .production__items {
    padding-top: calc(100vw / (1920/54));
    width: calc(calc(100vw / (1920/349)) * 3);
  }
}

@media (max-width: 540px) {
  .production__items {
    display: block;
    width: 100%;
    padding-top: calc(100vw / (412/108));
  }
}

.production__items__item {
  width: 349px;
  aspect-ratio: 349/289;
  text-align: center;
}

@media (max-width: 1919px) {
  .production__items__item {
    width: calc(100vw / (1920/349));
  }
}

@media (max-width: 540px) {
  .production__items__item {
    width: 100%;
  }
  .production__items__item:not(:first-of-type) {
    margin-top: calc(100vw / (412/30));
  }
}

.production__items__item__pic img {
  display: block;
  width: 100%;
  height: 100%;
}

.production__items__item__text {
  margin: 0 auto;
}

.production__items__item__text__title {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 40px;
  position: relative;
}

@media (max-width: 1919px) {
  .production__items__item__text__title {
    font-size: calc(100vw / (1920/40));
  }
}

@media (max-width: 540px) {
  .production__items__item__text__title {
    font-size: calc(100vw / (412/24));
  }
}

.production__items__item__text__title__weight {
  display: block;
  color: #000;
  position: absolute;
  z-index: 1;
  top: 86%;
  right: -5%;
  font-size: 25px;
  line-height: 1em;
}

@media (max-width: 1919px) {
  .production__items__item__text__title__weight {
    font-size: calc(100vw / (1920/25));
  }
}

@media (max-width: 540px) {
  .production__items__item__text__title__weight {
    font-size: calc(100vw / (412/13));
  }
}

.production__items__item:nth-of-type(1) .production__items__item__text__title {
  color: #E6005B;
}

.production__items__item:nth-of-type(2) .production__items__item__text__title {
  color: #F9B000;
}

.production__items__item:nth-of-type(3) .production__items__item__text__title {
  color: #96C11F;
}

.production__items__strokes {
  background: url(/wp-content/uploads/2023/06/strokes2.svg);
  background-size: 100%;
  position: absolute;
  z-index: 1;
  width: 122px;
  aspect-ratio: 122/85;
}

@media (max-width: 1919px) {
  .production__items__strokes {
    width: calc(100vw / (1920/122));
  }
}

@media (max-width: 540px) {
  .production__items__strokes {
    width: calc(100vw / (412/72));
  }
}

.production__items__strokes--top {
  left: 216px;
  top: 0;
}

@media (max-width: 1919px) {
  .production__items__strokes--top {
    left: calc(100vw / (1920/216));
  }
}

@media (max-width: 540px) {
  .production__items__strokes--top {
    left: calc(100vw / (412/-40));
    top: calc(100vw / (412/65));
  }
}

.production__items__strokes--bottom {
  background-image: url(/wp-content/uploads/2023/06/strokes2bottom.svg);
  top: 86%;
  right: 290px;
  width: 113px;
}

@media (max-width: 1919px) {
  .production__items__strokes--bottom {
    width: calc(100vw / (1920/113));
    right: calc(100vw / (1920/290));
  }
}

@media (max-width: 540px) {
  .production__items__strokes--bottom {
    width: calc(100vw / (412/72));
    right: calc(100vw / (412/-43));
    bottom: calc(100vw / (412/-3));
    top: auto;
  }
}

.ellipse5 {
  position: absolute;
  z-index: 2;
  width: 175px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/ellipse1.svg);
  background-size: 100%;
  top: 2408px;
  left: 257px;
  transform: rotate(-4deg);
}

@media (max-width: 1919px) {
  .ellipse5 {
    width: calc(100vw / (1920/175));
  }
}

@media (max-width: 540px) {
  .ellipse5 {
    width: calc(100vw / (412/75));
  }
}

@media (max-width: 1919px) {
  .ellipse5 {
    top: calc(100vw / (1920/2408));
    left: calc(100vw / (1920/257));
  }
}

@media (max-width: 540px) {
  .ellipse5 {
    top: calc(100vw / (412/2317));
    left: auto;
    right: calc(100vw / (412/28));
    transform: rotate(346deg);
  }
}

.ellipse6 {
  position: absolute;
  z-index: 2;
  width: 68px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/ellipse2.svg);
  background-size: 100%;
  top: 2517px;
  left: 197px;
  transform: rotate(-4deg);
}

@media (max-width: 1919px) {
  .ellipse6 {
    width: calc(100vw / (1920/68));
  }
}

@media (max-width: 540px) {
  .ellipse6 {
    width: calc(100vw / (412/29));
  }
}

@media (max-width: 1919px) {
  .ellipse6 {
    top: calc(100vw / (1920/2517));
    left: calc(100vw / (1920/197));
  }
}

@media (max-width: 540px) {
  .ellipse6 {
    top: calc(100vw / (412/2378));
    left: auto;
    right: calc(100vw / (412/92));
  }
}

.useful {
  text-align: center;
  padding-top: 138px;
  position: relative;
}

@media (max-width: 1919px) {
  .useful {
    padding-top: calc(100vw / (1920/138));
  }
}

@media (max-width: 540px) {
  .useful {
    padding-top: calc(100vw / (412/56));
  }
}

.useful::before {
  content: '';
  position: absolute;
  top: 131px;
  right: -20px;
  z-index: 2;
  width: 753px;
  aspect-ratio: 753/89;
  background-image: url(/wp-content/uploads/2023/06/separator-cat.svg);
  background-size: 100%;
}

@media (max-width: 1919px) {
  .useful::before {
    width: calc(100vw / (1920/753));
    top: calc(100vw / (1920/131));
    right: calc(100vw / (1920/-20));
  }
}

@media (max-width: 540px) {
  .useful::before {
    width: calc(100vw / (412/215));
    top: calc(100vw / (412/115));
    right: calc(100vw / (412/-23));
    aspect-ratio: 215/36;
    background-image: url(/wp-content/uploads/2023/06/separator-cat_mobile.svg);
  }
}

.useful__texts {
  position: relative;
  z-index: 2;
  transform: rotate(-9deg);
  margin-left: -155px;
}

@media (max-width: 1919px) {
  .useful__texts {
    margin-left: calc(100vw / (1920/-155));
  }
}

@media (max-width: 540px) {
  .useful__texts {
    margin-left: calc(100vw / (412/-111));
  }
}

.useful__texts h3,
.useful__texts h4 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 55px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1em;
}

@media (max-width: 1919px) {
  .useful__texts h3,
  .useful__texts h4 {
    font-size: calc(100vw / (1920/55));
  }
}

@media (max-width: 540px) {
  .useful__texts h3,
  .useful__texts h4 {
    font-size: calc(100vw / (412/24));
  }
}

.useful__texts h4 {
  margin-left: -3.2em;
}

.useful__arrow {
  background: url(/wp-content/uploads/2023/06/arrowUseful.svg);
  background-size: 100%;
  width: 88px;
  aspect-ratio: 88/90;
  position: absolute;
  z-index: 2;
  top: 139px;
  right: 744px;
  animation: arrowDownAnimation 1s linear infinite;
}

@media (max-width: 1919px) {
  .useful__arrow {
    width: calc(100vw / (1920/88));
    top: calc(100vw / (1920/139));
    right: calc(100vw / (1920/744));
  }
}

@media (max-width: 540px) {
  .useful__arrow {
    width: calc(100vw / (412/46));
    top: calc(100vw / (412/115));
    right: calc(100vw / (412/194));
  }
}

.useful__pic {
  width: 783px;
  margin-left: 625px;
  aspect-ratio: 783/627;
  position: relative;
  z-index: 1;
  margin-top: -10px;
}

@media (max-width: 1919px) {
  .useful__pic {
    width: calc(100vw / (1920/783));
    margin-left: calc(100vw / (1920/625));
    margin-top: calc(100vw / (1920/-10));
  }
}

@media (max-width: 540px) {
  .useful__pic {
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    margin-top: calc(100vw / (412/88));
    padding-left: calc(100vw / (412/38));
    padding-right: calc(100vw / (412/40));
  }
}

.useful__pic img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 540px) {
  .useful__pic img {
    height: auto;
    aspect-ratio: 783/627;
  }
}

.ellipse7 {
  position: absolute;
  z-index: 2;
  width: 175px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/ellipse1.svg);
  background-size: 100%;
  top: 3460px;
  right: 362px;
  transform: rotate(-181deg);
}

@media (max-width: 1919px) {
  .ellipse7 {
    width: calc(100vw / (1920/175));
  }
}

@media (max-width: 540px) {
  .ellipse7 {
    width: calc(100vw / (412/75));
  }
}

@media (max-width: 1919px) {
  .ellipse7 {
    top: calc(100vw / (1920/3460));
    right: calc(100vw / (1920/362));
  }
}

@media (max-width: 540px) {
  .ellipse7 {
    top: calc(100vw / (412/3614));
    left: auto;
    right: calc(100vw / (412/28));
    transform: rotate(173deg);
  }
}

.ellipse8 {
  position: absolute;
  z-index: 2;
  width: 68px;
  height: auto;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/ellipse2.svg);
  background-size: 100%;
  top: 3451px;
  right: 298px;
  transform: rotate(-184deg);
}

@media (max-width: 1919px) {
  .ellipse8 {
    width: calc(100vw / (1920/68));
  }
}

@media (max-width: 540px) {
  .ellipse8 {
    width: calc(100vw / (412/29));
  }
}

@media (max-width: 1919px) {
  .ellipse8 {
    top: calc(100vw / (1920/3451));
    right: calc(100vw / (1920/298));
  }
}

@media (max-width: 540px) {
  .ellipse8 {
    top: calc(100vw / (412/3600));
    left: auto;
    right: calc(100vw / (412/92));
  }
}

.ellipse9 {
  position: absolute;
  z-index: 2;
  width: 63px;
  height: auto;
  aspect-ratio: 63/55;
  background: url(/wp-content/uploads/2023/06/ellipse3.svg);
  background-size: 100%;
  top: 3765px;
  left: 461px;
}

@media (max-width: 1919px) {
  .ellipse9 {
    width: calc(100vw / (1920/63));
    top: calc(100vw / (1920/3765));
    left: calc(100vw / (1920/461));
  }
}

@media (max-width: 540px) {
  .ellipse9 {
    width: calc(100vw / (412/27));
    top: calc(100vw / (412/3688));
    left: calc(100vw / (412/40));
  }
}

.ellipse10 {
  position: absolute;
  z-index: 2;
  width: 135px;
  height: auto;
  aspect-ratio: 135/136;
  background: url(/wp-content/uploads/2023/06/ellipse4.svg);
  background-size: 100%;
  top: 4075px;
  left: 1043px;
}

@media (max-width: 1919px) {
  .ellipse10 {
    width: calc(100vw / (1920/135));
    top: calc(100vw / (1920/4075));
    left: calc(100vw / (1920/1043));
  }
}

@media (max-width: 540px) {
  .ellipse10 {
    width: calc(100vw / (412/57));
    top: calc(100vw / (412/3905));
    left: calc(100vw / (412/222));
  }
}

footer {
  position: relative;
  margin-top: 20px;
  padding-top: 132px;
  padding-bottom: 60px;
}

@media (max-width: 1919px) {
  footer {
    margin-top: calc(100vw / (1920/20));
    padding-top: calc(100vw / (1920/132));
    padding-bottom: calc(100vw / (1920/60));
  }
}

@media (max-width: 540px) {
  footer {
    margin-top: 0;
    padding-top: calc(100vw / (412/65));
    padding-bottom: calc(100vw / (412/110));
  }
}

footer::before {
  content: '';
  position: absolute;
  z-index: 1;
  background: url(/wp-content/uploads/2023/06/shirm2.svg);
  background-size: 100%;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1920/81;
}

@media (max-width: 540px) {
  footer::before {
    background-image: url(/wp-content/uploads/2023/06/shirm2_mobile.svg);
    aspect-ratio: 412/30;
  }
}

.footbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  line-height: 1.3em;
  margin-left: 175px;
}

@media (max-width: 1919px) {
  .footbox {
    margin-left: calc(100vw / (1920/175));
  }
}

@media (max-width: 540px) {
  .footbox {
    margin-left: 0;
    flex-direction: column;
    margin-left: calc(100vw / (412/79));
  }
}

.footbox h2 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 80px;
  flex: 1 1 100%;
  margin-top: 0;
  margin-bottom: 78px;
  margin-left: 103px;
  position: relative;
  display: inline-block;
}

@media (max-width: 1919px) {
  .footbox h2 {
    font-size: calc(100vw / (1920/80));
  }
}

@media (max-width: 540px) {
  .footbox h2 {
    font-size: calc(100vw / (412/35));
  }
}

@media (max-width: 1919px) {
  .footbox h2 {
    margin-bottom: calc(100vw / (1920/78));
    margin-left: calc(100vw / (1920/103));
  }
}

@media (max-width: 540px) {
  .footbox h2 {
    margin-left: 0;
    margin-bottom: calc(100vw / (412/35));
  }
}

.footbox h2::after {
  content: '';
  position: absolute;
  z-index: 1;
  background: url(/wp-content/uploads/2023/06/strokes.svg);
  background-size: 100%;
  width: 81px;
  aspect-ratio: 88/27;
  left: 4.1em;
  top: 0.75em;
}

@media (max-width: 1919px) {
  .footbox h2::after {
    width: calc(100vw / (1920/81));
  }
}

@media (max-width: 540px) {
  .footbox h2::after {
    width: calc(100vw / (412/44));
    left: 5.2em;
  }
}

.footbox__left {
  flex: 0 0 auto;
  width: 428px;
}

@media (max-width: 1919px) {
  .footbox__left {
    width: calc(100vw / (1920/428));
  }
}

@media (max-width: 540px) {
  .footbox__left {
    width: 100%;
    flex: 1 1 100%;
    margin-top: calc(100vw / (412/25));
  }
}

.footbox__left__textBox:not(:last-of-type) {
  margin-bottom: 2.5em;
}

.footbox__left__textBox__header {
  margin-bottom: 0.1em;
  font-weight: bold;
  color: #E6005B;
}

.footbox__left__textBox a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.footbox__left__textBox a:hover {
  text-decoration: none;
}

.footbox__center {
  flex: 0 0 auto;
  width: 418px;
  margin-top: -26px;
}

@media (max-width: 1919px) {
  .footbox__center {
    width: calc(100vw / (1920/418));
    margin-top: calc(100vw / (1920/-26));
  }
}

@media (max-width: 540px) {
  .footbox__center {
    flex: 1 1 100%;
    width: 100%;
    order: -1;
    margin-top: 0;
    width: calc(100vw / (412/254));
    margin-bottom: calc(100vw / (412/50));
  }
}

.footbox__center img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 623/199;
}

.footbox__right {
  flex: 0 0 auto;
  width: 399px;
  padding-left: 119px;
}

@media (max-width: 1919px) {
  .footbox__right {
    width: calc(100vw / (1920/399));
    padding-left: calc(100vw / (1920/119));
  }
}

@media (max-width: 540px) {
  .footbox__right {
    flex: 1 1 100%;
    width: 100%;
    padding-left: 0;
    margin-top: 2.2em;
  }
}

.footbox__right__textBox__header {
  margin-bottom: 0.1em;
  font-weight: bold;
  color: #96C11F;
}

.footbox__right__textBox p {
  margin: 0;
}

.dsry {
  position: absolute;
  z-index: 1;
  width: 35px;
  aspect-ratio: 35/48;
  bottom: 0;
  right: 107px;
}

@media (max-width: 1919px) {
  .dsry {
    width: calc(100vw / (1920/35));
    right: calc(100vw / (1920/107));
  }
}

@media (max-width: 540px) {
  .dsry {
    width: calc(100vw / (412/35));
    right: calc(100vw / (412/21));
  }
}

.dsry img {
  display: block;
  width: 100%;
  height: 100%;
}

.ellipse11 {
  position: absolute;
  z-index: 2;
  width: 63px;
  height: auto;
  aspect-ratio: 63/57;
  background: url(/wp-content/uploads/2023/06/ellipse5.svg);
  background-size: 100%;
  top: 4217px;
  left: 396px;
}

@media (max-width: 1919px) {
  .ellipse11 {
    width: calc(100vw / (1920/63));
    top: calc(100vw / (1920/4217));
    left: calc(100vw / (1920/396));
  }
}

@media (max-width: 540px) {
  .ellipse11 {
    width: calc(100vw / (412/28));
    top: calc(100vw / (412/4005));
    left: calc(100vw / (412/74));
  }
}

.arrowUp {
  position: absolute;
  z-index: 1;
  right: 53px;
  bottom: 231px;
  width: 90px;
  aspect-ratio: 1;
  background: url(/wp-content/uploads/2023/06/arrowUp.svg);
  background-size: 100%;
  animation: arrowDownAnimation 3s linear infinite;
  cursor: pointer;
}

@media (max-width: 1919px) {
  .arrowUp {
    width: calc(100vw / (1920/90));
    right: calc(100vw / (1920/53));
    bottom: calc(100vw / (1920/231));
  }
}

@media (max-width: 540px) {
  .arrowUp {
    width: calc(100vw / (412/65));
    right: calc(100vw / (412/25));
    bottom: calc(100vw / (412/215));
  }
}