@import "vars.css" screen;
.knockers {
  display: none;
}

@media (min-width: 1261px) {
  .knockers::before {
    content: "1261";
  }
}
@media (max-width: 1260px) {
  .knockers::before {
    content: "1260";
  }
}
@media (max-width: 880px) {
  .knockers::before {
    content: "880";
  }
}
@media (max-width: 768px) {
  .knockers::before {
    content: "768";
  }
}
html {
  height: 100%;
}
html * {
  font-family: "Noto Sans JP", sans-serif;
}

body {
  height: 100%;
}

@media (max-width: 768px) {
  .lithosphere {
    padding-left: unset;
  }
}

.asthenosphere {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/*
 *  header
 *  2023.05.25 11:54:40
 */
header {
  margin: 30px 0 70px 0;
}
header .header__exterior {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
}
@media (min-width: 1261px) {
  header .header__exterior {
    width: 1132px;
  }
}
@media (max-width: 1260px) {
  header .header__exterior {
    width: 736px;
  }
}
@media (max-width: 880px) {
  header .header__exterior {
    width: 646px;
  }
}
@media (max-width: 768px) {
  header .header__exterior {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  header {
      margin: 30px 0 40px 0;
  }
}
header h1 {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--h1-color);
  -webkit-transition-duration: var(--transition-duration);
          transition-duration: var(--transition-duration);
  -webkit-transition-property: color;
  transition-property: color;
}
header h1 svg {
  margin-right: 30px;
  color: var(--svg-fill);
  -webkit-transition-duration: var(--transition-duration);
          transition-duration: var(--transition-duration);
  -webkit-transition-property: color;
  transition-property: color;
}
header h1 br {
  display: none;
}
@media (max-width: 880px) {
  header h1 svg {
    margin-bottom: 8px;
  }
  header h1 br {
    display: block;
  }
}

/*
 *  conveyer
 *  2023.05.26 08:48:28
 */
#conveyer__exterior {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 2px;
}
#conveyer #search {
  display: none;
}
@media (hover: hover) {
  #conveyer #search:hover {
    -webkit-filter: contrast(150%);
            filter: contrast(150%);
  }
}
#keyword {
  display: block;
  height: 24px;
  border: none;
  background-color: transparent;
  outline: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 350;
  line-height: 24px;
  letter-spacing: 2px;
  text-align: left;
  color: var(--keyword-color);
  padding: 0 24px 0 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 0;
  border-bottom: 1px solid var(--magnifyer-stroke);
}
#keyword::-webkit-input-placeholder {
  color: inherit;
}
#keyword::-moz-placeholder {
  color: inherit;
}
#keyword:-ms-input-placeholder {
  color: inherit;
}
#keyword::-ms-input-placeholder {
  color: inherit;
}
#keyword::placeholder {
  color: inherit;
}
@media (max-width: 768px) {
  #keyword {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    bottom: var(--wing-height-sp);
    width: 100% !important;
    height: 35px;
    background: #D5D7D9;
    border-bottom: unset;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' id='magnifying'%3E%3Cpath d='M7.25 12.5C10.1495 12.5 12.5 10.1495 12.5 7.25C12.5 4.35051 10.1495 2 7.25 2C4.35051 2 2 4.35051 2 7.25C2 10.1495 4.35051 12.5 7.25 12.5Z' stroke='%23454545' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M10.9625 10.9624L14 13.9999' stroke='%23454545' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 23.5px center;
    padding-left: 60px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0px;
    color: rgb(0, 0, 0);
  }
}

#magnifyer {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  height: 24px;
  padding: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 1px solid var(--magnifyer-stroke);
}
#magnifyer svg {
  stroke: var(--magnifyer-stroke);
}
@media (hover: hover) {
  #magnifyer {
    cursor: pointer;
  }
  #magnifyer svg {
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  #magnifyer svg:hover {
    -webkit-transform: translateY(16%);
            transform: translateY(16%);
  }
}
@media (max-width: 768px) {
  #magnifyer {
    position: static;
    right: unset;
    top: unset;
    border-bottom: unset;
  }
  #magnifyer svg {
    stroke: var(--magnifyer-stroke-sp);
  }
}

/*
 *  categories
 *  2023.05.25 19:13:20
 */
.categories {
  position: fixed;
  top: 0;
  z-index: var(--categories-z);
  height: 100%;
  background: var(--categories-bg);
  -webkit-transition-duration: var(--transition-duration);
          transition-duration: var(--transition-duration);
  -webkit-transition-property: background;
  transition-property: background;
  -webkit-backdrop-filter: var(--categories-bg-filter);
          backdrop-filter: var(--categories-bg-filter);
  padding: 51px 49px 51px 48px;
  color: #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.categories__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 38px;
}
.categories__header h2 {
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2.2px;
  margin-left: 6px;
}
.categories__header #knockers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.categories__header #knockers .knocker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.12px;
  opacity: 0.4;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  cursor: pointer;
}
.categories__header #knockers .knocker:nth-of-type(1) {
  margin-right: 10px;
}
.categories__header #knockers .knocker::before {
  content: "";
  display: block;
  opacity: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin: 1px 4px 0 0;
}
.categories__header #knockers .selectee {
  opacity: 1;
}
.categories__header #knockers .selectee::before {
  opacity: 1;
}
.categories__exterior {
  height: calc(100% - 58px);
  padding: 0 16px 0 0;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  --sb-track-color: rgba(0, 0, 0, 0);
  --sb-thumb-color: #fafafa;
  --sb-size: 2px;
  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
}
.categories__exterior::-webkit-scrollbar {
  width: var(--sb-size);
}
.categories__exterior::-webkit-scrollbar-track {
  background: var(--sb-track-color);
}
.categories__exterior::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
}
.categories .buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px 20px;
  width: 373px;
  margin-bottom: 30px;
}
.categories .buttons .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: var(--button-color);
  background: var(--button-bg);
  -webkit-transition-duration: var(--transition-duration);
          transition-duration: var(--transition-duration);
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
  height: 31px;
  border-radius: 100px;
  padding: 0 16px 2px;
  letter-spacing: 1.4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: background 0.4s, -webkit-filter 0.4s;
  transition: background 0.4s, -webkit-filter 0.4s;
  transition: filter 0.4s, background 0.4s;
  transition: filter 0.4s, background 0.4s, -webkit-filter 0.4s;
}
@media (hover: hover) {
  .categories .buttons .button:hover {
    -webkit-filter: contrast(200%);
            filter: contrast(200%);
  }
}
.categories .buttons .button.selectee {
  background: var(--button-selectee-bg);
}
.categories__interior {
  border-top: 1px solid #ffffff;
  padding: 30px 0;
}
.categories__interior h3 {
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.4px;
  color: var(--h3-color);
  margin-bottom: 30px;
}
.categories__interior .childCategory {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-style: normal;
  font-weight: 350;
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--h3-color);
}
.categories__interior .childCategory:not(:last-child) {
  margin-bottom: 19px;
}
.categories__interior .childCategory.siteColor::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  margin: 1px 8px 0 0;
}
.categories__interior .childCategory[data-description=black]::before {
  background: #000000;
}
.categories__interior .childCategory[data-description=white]::before {
  background: #ffffff;
}
.categories__interior .childCategory[data-description=gray]::before {
  background: #9C9C9C;
}
.categories__interior .childCategory[data-description=redpink]::before {
  background: #E1415E;
}
.categories__interior .childCategory[data-description=orangeyellow]::before {
  background: #CC8633;
}
.categories__interior .childCategory[data-description=bluenavy]::before {
  background: #0171D8;
}
.categories__interior .childCategory[data-description=green]::before {
  background: #20BA5E;
}
.categories__interior .childCategory[data-description=beigeivorycream]::before {
  background: #BDAC98;
}
.categories__interior .empty {
  opacity: 0.5;
  pointer-events: none;
}
.categories__interior .unregistered {
  font-size: 10px;
  color: #000000;
  text-decoration: line-through;
}
.categories__interior a {
  color: inherit;
  text-decoration: none;
}

#curtain {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  background-color: var(--curtain-bg);
  width: 100%;
  height: 100%;
  z-index: var(--curtain-z);
}

#wing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--wing-z);
  height: 100%;
  width: var(--wing-width);
  background: var(--wing-bg);
  -webkit-transition-duration: var(--transition-duration);
          transition-duration: var(--transition-duration);
  -webkit-transition-property: background, -webkit-filter;
  transition-property: background, -webkit-filter;
  transition-property: background, filter;
  transition-property: background, filter, -webkit-filter;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
@media (hover: hover) {
  #wing {
    cursor: pointer;
  }
  #wing:hover {
    -webkit-filter: brightness(128%);
            filter: brightness(128%);
  }
}
#wing span {
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  color: #D4DEE7;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#wing .wing__home {
  display: none;
}

/*
 *  categories [ SP ]
 */
@media (max-width: 768px) {
  .categories {
    width: 100%;
    height: calc(100% - var(--wing-height-sp));
    padding: 35px 0 35px 30px;
  }
  .categories__header {
    padding-right: 32px;
    margin-bottom: 42px;
  }
  .categories__header #knockers .knocker {
    cursor: unset;
  }
  .categories__exterior {
    height: calc(100% - 62px);
    padding: 0 32px 0 0;
  }
  .categories .buttons {
    gap: 10px 10px;
    width: 100%;
    margin-bottom: 20px;
  }
  .categories .buttons .button {
    height: 30px;
    letter-spacing: 1.12px;
    cursor: unset;
  }
  .categories__interior {
    padding: 20px 0;
  }
  .categories__interior h3 {
    margin-bottom: 20px;
  }
  .categories__interior .childCategory {
    font-size: 12px;
  }
  .categories__interior .childCategory:not(:last-child) {
    margin-bottom: 18px;
  }
  #wing {
    -ms-flex-pack: distribute;
        justify-content: space-around;
    left: 0;
    top: unset;
    bottom: 0;
    z-index: 11!important;
    height: 42px;
    width: 100%;
    background: var(--wing-bg-sp);
    cursor: unset;
  }
  #wing span,
  #wing a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0px;
    text-align: center;
    color: #D4DEE7;
    -webkit-transform: unset;
            transform: unset;
  }
  #wing__category {
    width: 64px;
    text-align: center;
  }
  #wing .wing__home {
    display: block;
  }
}
/*
 *  echo
 */
#echo {
  margin: 0 auto;
}
@media (min-width: 1261px) {
  #echo {
    width: 1132px;
  }
}
@media (max-width: 1260px) {
  #echo {
    width: 736px;
  }
}
@media (max-width: 880px) {
  #echo {
    width: 646px;
  }
}
@media (max-width: 768px) {
  #echo {
    width: 315px;
  }
}
#echo__searchWord {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0 0 36px;
}
#echo__noResultsFoundPrimary {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 136px 0 30px 0;
}
#echo__noResultsFoundSecondary, #echo .error {
  font-size: 18px;
  font-weight: 350;
  letter-spacing: 2px;
  margin: 0 0 32px 0;
}
#echo__home {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  width: 256px;
  height: 72px;
  border-radius: 100px;
  background: var(--echo-home-bg);
  color: var(--button-color);
  cursor: pointer;
}

@media (max-width: 768px) {
  #echo__searchWord {
    font-size: 14px;
    letter-spacing: 3px;
    margin: 0 0 36px;
  }
  #echo__noResultsFoundPrimary {
    font-size: 14px;
    letter-spacing: 3px;
    margin: 35px 0 20px 0;
  }
  #echo__noResultsFoundSecondary, #echo .error {
    font-size: 11px;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
  }
  #echo__home {
    font-size: 14px;
    width: 135px;
    height: 40px;
    cursor: unset;
  }
}
/*
 *  instance
 *  2023.05.25 18:10:38
 */
#instances__exterior {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto 105px;
}
@media (min-width: 1261px) {
  #instances__exterior {
    gap: 43px 38px;
    width: 1132px;
  }
}
@media (max-width: 1260px) {
  #instances__exterior {
    gap: 43px 32px;
    width: 736px;
  }
}
@media (max-width: 880px) {
  #instances__exterior {
    gap: 40px 16px;
    width: 646px;
  }
}
@media (max-width: 768px) {
  #instances__exterior {
    gap: 40px 0;
    width: 315px;
  }
}
#instances .instance {
  position: relative;
  opacity: 0;
  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
#instances .instance a,
#instances .instance a:active {
  color: var(--instance-a-color);
  text-decoration: none;
}
#instances .instance__images {
  position: relative;
  background-color: var(--instance__images-bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
@media (min-width: 1261px) {
  #instances .instance__images {
    width: 352px;
    height: 290px;
  }
}
@media (max-width: 1260px) {
  #instances .instance__images {
    width: 352px;
    height: 290px;
  }
}
@media (max-width: 880px) {
  #instances .instance__images {
    width: 315px;
    height: 262px;
  }
}
@media (max-width: 768px) {
  #instances .instance__images {
    width: 315px;
    height: 262px;
  }
}
#instances .instance__images img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  object-position: top;
}
@media (min-width: 1261px) {
  #instances .instance__images img {
    width: 352px;
    height: 290px;
  }
}
@media (max-width: 1260px) {
  #instances .instance__images img {
    width: 352px;
    height: 290px;
  }
}
@media (max-width: 880px) {
  #instances .instance__images img {
    width: 315px;
    height: 262px;
  }
}
@media (max-width: 768px) {
  #instances .instance__images img {
    width: 315px;
    height: 262px;
  }
}
#instances .instance__loading {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--instance__loading-bg);
  color: var(--instance__loading-color);
}
@media (min-width: 1261px) {
  #instances .instance__loading {
    width: 352px;
    height: 290px;
  }
}
@media (max-width: 1260px) {
  #instances .instance__loading {
    width: 352px;
    height: 290px;
  }
}
@media (max-width: 880px) {
  #instances .instance__loading {
    width: 315px;
    height: 262px;
  }
}
@media (max-width: 768px) {
  #instances .instance__loading {
    width: 315px;
    height: 262px;
  }
}
#instances .instance .loader,
#instances .instance .loader:before,
#instances .instance .loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: load7 1.2s infinite ease-in-out;
          animation: load7 1.2s infinite ease-in-out;
}
#instances .instance .loader {
  color: var(--instance__loading-color);
  font-size: 4px;
  margin: 0px auto 2.5em;
  position: relative;
  text-indent: -9999em;
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}
#instances .instance .loader:before,
#instances .instance .loader:after {
  content: "";
  position: absolute;
  top: 0;
}
#instances .instance .loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
#instances .instance .loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%, 80%, 100% {
    -webkit-box-shadow: 0 2.5em 0 -1.3em;
            box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    -webkit-box-shadow: 0 2.5em 0 0;
            box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%, 80%, 100% {
    -webkit-box-shadow: 0 2.5em 0 -1.3em;
            box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    -webkit-box-shadow: 0 2.5em 0 0;
            box-shadow: 0 2.5em 0 0;
  }
}
#instances .instance .note {
  font-size: 16px;
  line-height: 13px;
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
 *  pagination
 *  2023.06.05 12:45:02
 */
#pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-bottom: 200px;
}
#pagination * {
  font-size: 14px;
  font-weight: 300;
  color: var(--pagination-color);
}
#pagination span,
#pagination a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  padding: 22px 12px 24px 10px;
}
#pagination .current {
  padding: 22px 11px 24px 9px;
  border-bottom: 1px solid var(--pagination-color);
}
#pagination a {
  text-decoration: none;
}

/*
 *  footer
 *  2023.06.19 09:55:14
 */
footer {
  margin: 0 0 64px 0;
}
footer .footer__exterior {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}
@media (min-width: 1261px) {
  footer .footer__exterior {
    width: 1132px;
  }
}
@media (max-width: 1260px) {
  footer .footer__exterior {
    width: 736px;
  }
}
@media (max-width: 880px) {
  footer .footer__exterior {
    width: 646px;
  }
}
@media (max-width: 768px) {
  footer .footer__exterior {
    width: 315px;
  }
}
footer svg {
  margin-right: 50px;
  color: var(--svg-fill);
  -webkit-transition-duration: var(--transition-duration);
          transition-duration: var(--transition-duration);
  -webkit-transition-property: color;
  transition-property: color;
}
footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 28px;
}
footer ul li a {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.2px;
  color: var(--footer-a-color);
  text-decoration: none;
}
@media (max-width: 880px) {
  footer svg {
    margin-right: 16px;
  }
  footer ul {
    gap: 0 14px;
  }
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: var(--body-after-blend);
}

body::before {
  width: 70vmax;
  height: 70vmax;
  left: -20vmin;
  top: -20vmin;
  background: var(--body-before-bg);
}

body::after {
  background: var(--body-after-bg);
  width: 80vmin;
  height: 80vmin;
  left: auto;
  right: -10vmin;
  top: auto;
  bottom: 0;
}

@media (min-width: 769px) {
  body::before,
  body::after {
    content: "";
    position: fixed;
    z-index: -1;
    will-change: border-radius, transform;
    -webkit-transform-origin: 80% 80%;
            transform-origin: 80% 80%;
    pointer-events: none;
    mix-blend-mode: var(--body-after-blend);
  }
  body::before {
    width: 70vmax;
    height: 70vmax;
    left: -20vmin;
    top: -20vmin;
    background: var(--body-before-bg);
    -webkit-transition-duration: var(--transition-duration);
            transition-duration: var(--transition-duration);
    -webkit-transition-property: background;
    transition-property: background;
    -webkit-animation: weave 15s linear infinite alternate, wheel 20s linear infinite;
            animation: weave 15s linear infinite alternate, wheel 20s linear infinite;
  }
  body::after {
    background: var(--body-after-bg);
    -webkit-transition-duration: var(--transition-duration);
            transition-duration: var(--transition-duration);
    -webkit-transition-property: background;
    transition-property: background;
    width: 80vmin;
    height: 80vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: weave 10s linear infinite alternate, wheel 26s linear infinite reverse;
    -webkit-transform-origin: 20% 20%;
            transform-origin: 20% 20%;
  }
  @-webkit-keyframes weave {
    0% {
      border-radius: 40% 60% 60% 40%/70% 30% 70% 30%;
    }
    100% {
      border-radius: 40% 60%;
    }
  }
  @keyframes weave {
    0% {
      border-radius: 40% 60% 60% 40%/70% 30% 70% 30%;
    }
    100% {
      border-radius: 40% 60%;
    }
  }
  @-webkit-keyframes wheel {
    to {
      -webkit-transform: rotate(1turn);
              transform: rotate(1turn);
    }
  }
  @keyframes wheel {
    to {
      -webkit-transform: rotate(1turn);
              transform: rotate(1turn);
    }
  }
}