@charset "utf-8";

main {
  margin: 158px auto 0;
}

@media screen and (max-width: 768px) {
  main {
    margin-top: 107px;
  }
}

.pankuzu {
  max-width: 1136px;
  flex-wrap: wrap;
}

.article_page {
  max-width: 1136px;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  margin: 62px auto 128px;
  display: flex;
  gap: 56px;
}

.article_page-main {
  max-width: 800px;
  width: 100%;
  position: relative;
}

@media screen and (max-width: 768px) {
  .article_page {
    margin: 38px auto 183px;
    padding: 0;
  }
}

.article_page-nav {
  max-width: 241px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.article_page-nav-title {
  font-size: 20px;
  font-family: var(--kalnia);
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.article_page-nav-article-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article_page-nav-article-link {
  display: flex;
  align-items: center;
  gap: 18px;
}

.article_page-nav-article-thum {
  width: 96px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.article_page-nav-article-thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.article_page-nav-article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--inter);
  font-size: 13px;
  font-weight: 500;
  line-height: 186%;
  letter-spacing: 0.39px;
  transition: opacity 0.2s;
  height: 45px;
}

.article_page-nav-article-link:hover .article_page-nav-article-thum img {
  transform: scale(1.1);
}

.article_page-nav-article-link:hover .article_page-nav-article-title {
  opacity: 0.7;
}

.article_page-nav-category {
  border-top: 1px dotted var(--gray);
}

.article_page-nav-category:last-child {
  border-bottom: 1px dotted var(--gray);
}

.article_page-nav-category-link {
  padding: 21px 16px 21px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article_page-nav-category-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.65px;
  transition: opacity 0.2s;
}

.article_page-nav-category-icon {
  width: 10px;
  transition: transform 0.2s;
}

.article_page-nav-category-link:hover .article_page-nav-category-title {
  opacity: 0.7;
}

.article_page-nav-category-link:hover .article_page-nav-category-icon {
  transform: translate(3px, -3px);
}

@media screen and (max-width: 768px) {
  .article_page-nav {
    display: none;
  }
}

.article_page-main-headline-detail {
  margin-bottom: 25px;
  gap: 20px;
}

.article_page-main-headline-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: 3.2px;
  margin-bottom: 25px;
  font-family: var(--hiragino);
}

.article_page-main-headline-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article_page-main-headline-time {
  font-size: 13px;
  font-family: var(--inter);
  font-weight: 500;
}

.article_page-main-headline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.article_page-main-headline-tag {
  border-radius: 4px;
  border: 1px solid var(--black);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--inter);
  padding: 6px 15px;
}

.article_page-main-headline-tag:before {
  content: "#";
  margin-right: 2px;
}

@media screen and (max-width: 768px) {
  .article_page-main-headline {
    padding: 0 20px;
  }

  .article_page-main-headline-title {
    font-size: 24px;
    line-height: 180%;
    letter-spacing: 2.4px;
    margin-bottom: 30px;
  }

  .article_page-main-headline-detail {
    margin-bottom: 21px;
  }
}

.article_page-main-contents {
  background-color: #fff;
  border-radius: 8px;
  padding: 65px 72px 65px 73px;
  margin-bottom: 53px;
  position: relative;
}

.article_page-main-first-image {
  border-radius: 4px;
  margin-bottom: 42px;
  overflow: hidden;
}

.article_page-main-first-image img {
  width: 100%;
}

.article_content a {
  color: #4f96f6;
}

.article_content a.wp-block-button__link {
  color: #fff;
}

.article_editor p,
.article_page-main-sentence {
  font-size: 16px;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 0.8px;
  margin-bottom: 20px;
}

/* ez-toc */
.article_editor #ez-toc-container,
.article_page-main-table-of-content {
  border: 1px solid var(--lightGray);
  border-radius: 8px;
  padding: 26px 60px 76px;
  position: relative;
  margin-bottom: 47px;
  background: unset;
  box-shadow: none;
  width: 100%;
}

.article_editor .ez-toc-title-toggle {
  display: none;
}

.article_editor #ez-toc-container p.ez-toc-title,
.article_page-main-table-of-content-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  display: block;
}

.article_editor #ez-toc-container ul li {
  font-size: 100%;
}

.article_editor #ez-toc-container ul li.ez-toc-heading-level-2 {
  margin-bottom: 14px;
  /* padding-left: 20px;
  text-indent: -20px; */
}

.article_editor #ez-toc-container ul li.ez-toc-heading-level-2>a {
  vertical-align: top;
  font-weight: 600;
}

.article_editor #ez-toc-container ul li.ez-toc-heading-level-2>a::before {
  display: none;
}

.article_editor #ez-toc-container ul li .ez-toc-list-level-3 {
  margin-top: 10px;
  margin-left: 0;
}

.article_editor #ez-toc-container ul li .ez-toc-list-level-3 .ez-toc-heading-level-3 {
  position: relative;
  margin-bottom: 5px;
  list-style: none;
  padding-left: 12px;
  /* text-indent: -10px; */
}

.article_editor #ez-toc-container ul li .ez-toc-list-level-3 .ez-toc-heading-level-3::before {
  /* content: "・";
  margin-left: -5px;
  padding-left: 0;
  color: #333; */
}

.article_editor #ez-toc-container ul li .ez-toc-list-level-3 .ez-toc-heading-level-3 a::before {
  content: "・";
  color: #333;
  position: absolute;
  top: 0;
  left: -5px;
}

.article_editor #ez-toc-container ul li .ez-toc-link {
  font-size: 14px;
  transition: opacity 0.2s;
}

.article_editor #ez-toc-container ul li .ez-toc-link:hover {
  opacity: 0.7;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .article_editor #ez-toc-container {
    border-radius: 4px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 42px;
    padding-bottom: 50px;
  }


}

.article_page-main-table-of-content-list {
  list-style-type: decimal;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 180%;
}

.article_page-main-table-of-content-list-lv2 {
  list-style: disc;
  font-weight: 400;
  font-size: 13px;
  line-height: 180%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0 0 10px;
}

.article_page-main-table-of-content-more {
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  color: var(--gray);
  gap: 9px;
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
}

.article_page-main-table-of-content-more img {
  width: 16px;
}

.article_page-main-table-of-content-link,
.article_page-main-table-of-content-link-lv2 {
  transition: opacity 0.2s;
}

.article_page-main-table-of-content-link:hover,
.article_page-main-table-of-content-link-lv2:hover {
  opacity: 0.7;
  text-decoration: none;
}

.article_page-main-table-of-content-item:nth-child(n + 7) {
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

.article_page-main-table-of-content.active .article_page-main-table-of-content-item:nth-child(n + 7) {
  visibility: visible;
  opacity: 1;
  position: relative;
}

.article_page-main-table-of-content.active .article_page-main-table-of-content-more {
  display: none;
}

.article_page-main-contents-related-article {
  margin-bottom: 81px;
}

.article_page-main-contents-related-article-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 15px;
}

.article_page-main-contents-related-article-box {
  border-radius: 8px;
  border: 1px solid var(--lightGray);
  display: flex;
  padding: 27px 35px;
  gap: 21px;
}

.article_page-main-contents-related-article-detail-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 600;
  line-height: 170%;
  letter-spacing: 0.8px;
  padding-left: 5px;
}

.article_page-main-contents-related-article-image {
  height: 104px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.article_page-main-contents-related-article-image img {
  transition: transform 0.2s;
}

.article_page-main-contents-related-article-tag {
  border-radius: 4px;
  border: 1px solid var(--black);
  font-size: 12px;
  font-weight: 300;
  padding: 9px 16px;
}

.article_page-main-contents-related-article-tag::before {
  content: "#";
  margin-right: 2px;
}

.article_page-main-contents-related-article-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.article_page-main-contents-related-article-box:hover .article_page-main-contents-related-article-image img {
  transform: scale(1.1);
}

.article_page-main-contents h2 {
  position: relative;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 200% !important;
  letter-spacing: 1.2px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 26px !important;
  border-bottom: 1px solid var(--lightGray) !important;
  margin-bottom: 24px !important;
  margin-top: 40px !important;
  text-wrap: initial !important;
  font-family: var(--hiragino) !important;
}

.article_page-main-contents h2 span {
  padding: 0;
  border: none;
  font-size: unset !important;
  background-color: unset !important;
}

.article_page-main-contents h2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: var(--black);
  border-radius: 1px 1px 0 0;
  display: block;
  flex-shrink: 0;
}

.article_page-main-mb02 {
  margin-bottom: 65px;
}

.article_page-main-contents h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 200%;
  letter-spacing: 0.9px;
  position: relative;
  text-wrap: initial;
  margin-top: 30px;
  margin-bottom: 20px;
  font-family: var(--hiragino);
  padding-bottom: 10px;
}

.article_page-main-contents h3:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  /* 線の高さ */
  background: linear-gradient(to right,
      var(--gray) 25%,
      var(--lightGray) 25%,
      var(--lightGray) 80%);
  order: 1;
  margin-top: 0;
}

.article_page-main-contents h4 {
  position: relative;
  margin-top: 30px;
  margin-bottom: 20px;
  padding-left: 25px;
  font-size: 18px;
  font-weight: 600;
}

.article_page-main-contents h4::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #8E8E8E;
}

.article_page-main-universe {
  margin: 0 auto 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .article_page-main-contents {
    padding: 51px 20px 100px;
    margin-bottom: 35px;
  }

  .article_page-main-first-image {
    margin-bottom: 38px;
  }

  .article_editor p,
  .article_page-main-sentence {
    margin-bottom: 20px;
    line-height: 170%;
    font-size: 15px;
  }

  .article_page-main-table-of-content {
    border-radius: 4px;
    padding-left: 40px;
    padding-right: 20px;
    margin-bottom: 42px;
  }

  .article_page-main-table-of-content-title {
    margin-bottom: 31px;
    transform: translateX(-10px);
  }

  .article_page-main-table-of-content-list {
    gap: 20px;
  }

  .article_page-main-table-of-content-list-lv2 {
    gap: 15px;
  }

  .article_page-main-table-of-content-more {
    gap: 15px;
  }

  .article_page-main-contents-related-article-title {
    font-size: 13px;
    margin-bottom: 13px;
  }

  .article_page-main-contents-related-article-box {
    border-radius: 4px;
    padding: 27px 20px 23px;
    gap: 14px;
  }

  .article_page-main-contents-related-article-image {
    height: 70px;
  }

  .article_page-main-contents-related-article-detail-title {
    font-size: 13px;
    letter-spacing: 0.65px;
    line-height: 160%;
    padding-left: 0;
  }

  .article_page-main-contents-related-article-detail {
    gap: 7px;
  }

  .article_page-main-contents-related-article-tag {
    padding: 2px 21px;
  }

  .article_page-main-contents-related-article {
    margin-bottom: 62px;
  }

  .article_page-main-contents h2 {
    font-size: 20px !important;
    line-height: 160% !important;
    letter-spacing: 1px !important;
    border-bottom: none !important;
    margin-bottom: 30px !important;
  }

  .article_page-main-contents h2:before {
    min-height: initial;
    border-radius: 4px;
  }

  .article_page-main-mb02 {
    margin-bottom: 68px;
  }

  .article_page-main-contents h3 {
    line-height: 160%;
    font-size: 18px;
  }

  .article_page-main-contents h4 {
    font-size: 16px;
  }

  .article_page-main-universe {
    margin: 75px 0 65px;
  }
}

.article_page-main-writter-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 200%;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--lightGray);
  margin-bottom: 38px;
}

.article_page-main-writter-detail {
  display: flex;
  gap: 30px;
  margin-bottom: 75px;
}

.article_page-main-writter-image {
  position: relative;
  overflow: hidden;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  flex-shrink: 0;
}

.article_page-main-writter-name {
  display: flex;
  gap: 16px;
}

.article_page-main-writter-name-all {
  font-weight: 600;
  line-height: 170%;
  letter-spacing: 0.8px;
}

.article_page-main-writter-name-title {
  font-family: var(--inter);
  font-size: 13px;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.39px;
  color: var(--gray);
}

.article_page-main-writter-identity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article_page-main-writter-explain {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 13px;
  line-height: 180%;
  letter-spacing: 0.39px;
}

.article_page-main-writter-explain.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .article_page-main-writter-explain.pc {
    display: none;
  }

  .article_page-main-writter-explain.sp {
    display: block;
  }

  .article_page-main-writter-detail {
    flex-wrap: wrap;
    align-items: center;
    gap: 28px 27px;
    margin-bottom: 66px;
  }

  .article_page-main-writter-image {
    width: 120px;
    height: 120px;
  }

  .article_page-main-writter-name {
    flex-direction: column;
    gap: 6px;
  }

  .article_page-main-writter-name-all {
    order: 1;
    font-size: 18px;
    font-weight: 700;
    line-height: 200%;
    letter-spacing: 0.9px;
  }

  .article_page-main-writter-title {
    margin-bottom: 21px;
  }

  .article_page-main-writter-explain {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: normal;
  }
}

.article_page-main-nav {
  display: flex;
  justify-content: space-between;
}

.article_page-main-nav-item {
  display: flex;
  align-items: center;
  gap: 23px;
}

.article_page-main-nav-item-next {
  margin-left: auto;
}

.article_page-main-nav-item-word {
  font-size: 14px;
  font-weight: 600;
}

.article_page-main-nav-left,
.article_page-main-nav-right {
  border: 1px solid var(--gray2);
  width: 56px;
  height: 30px;
  position: relative;
  border-radius: 120px;
  overflow: hidden;
  transition: opacity 0.9s;
}

@media screen and (min-width: 789px) {

  .article_page-main-nav-item:hover .article_page-main-nav-left,
  .article_page-main-nav-item:hover .article_page-main-nav-right {
    opacity: 0.3;
  }
}

.article_page-main-nav img {
  width: 15px;
  height: 11px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

.article_page-main-nav-left-after {
  transform: translateX(250%);
}

.article_page-main-nav-item:hover .article_page-main-nav-left .article_page-main-nav-left-after {
  animation: arrow-loop-left01 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.article_page-main-nav-item:hover .article_page-main-nav-left .article_page-main-nav-left-before {
  animation: arrow-loop-left02 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.article_page-main-nav-right-after {
  transform: translateX(-250%);
}

.article_page-main-nav-item:hover .article_page-main-nav-right .article_page-main-nav-right-after {
  animation: arrow-loop-right01 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.article_page-main-nav-item:hover .article_page-main-nav-right .article_page-main-nav-right-before {
  animation: arrow-loop-right02 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes arrow-loop-left01 {
  0% {
    transform: translateX(250%);
  }

  to {
    transform: translate(0);
  }
}

@keyframes arrow-loop-left02 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translate(-250%);
  }
}

@keyframes arrow-loop-right01 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translate(250%);
  }
}

@keyframes arrow-loop-right02 {
  0% {
    transform: translateX(-250%);
  }

  to {
    transform: translate(0);
  }
}

@media screen and (max-width: 768px) {

  .article_page-main-nav-left,
  .article_page-main-nav-right {
    background-color: var(--black);
  }
}

.article_page-main-related-articles-title {
  font-size: 18px;
  font-family: var(--inter);
  font-weight: 500;
  line-height: 180%;
  margin-bottom: 22px;
}

.article_page-main-related-articles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.article_page-main-related-articles-item {
  flex-basis: calc(50% - 28px / 2);
}

.article_page-main-related-articles-link {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  gap: 23px;
  align-items: center;
}

.article_page-main-related-articles-image {
  width: 170px;
  height: 92px;
  flex-shrink: 0;
  overflow: hidden;
}

.article_page-main-related-articles-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.article_page-main-related-articles-item-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 160%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.article_page-main-related-articles-time {
  font-size: 12px;
  font-weight: 300;
}

.article_page-main-related-articles-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-right: 23px;
}

.article_page-main-related-articles-link:hover .article_page-main-related-articles-image img {
  transform: scale(1.1);
}

@media screen and (max-width: 1000px) {
  .article_page-main-related-articles-item {
    flex-basis: 100%;
  }
}

@media screen and (max-width: 768px) {
  .article_page-main-related-articles-title {
    font-size: 20px;
    line-height: 200%;
    font-family: YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande",
      "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana,
      "ＭＳ Ｐゴシック", sans-serif;
  }

  .article_page-main-related-articles {
    padding: 0 20px;
  }

  .article_page-main-related-articles-image {
    width: 148px;
    min-height: 84px;
  }

  .article_page-main-related-articles-link {
    gap: 19px;
  }

  .article_page-main-related-articles-detail {
    gap: 7px;
  }

  .article_page-main-related-articles-time {
    font-size: 11px;
  }
}

.article_page-main-sns {
  position: fixed;
  transform: translateX(-164px) translateY(16vw);
  width: 32px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  top: 0;
  margin: auto 0;
}

.article_page-main-sns-title {
  writing-mode: vertical-rl;
  font-family: var(--kalnia);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.article_page-main-sns-title:after {
  content: ":";
  font-size: 20px;
  margin-top: 10px;
  transform: translateX(2px);
}

.article_page-main-sns-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article_page-main-sns-link {
  transition: opacity 0.2s;
}

.article_page-main-sns-link:hover {
  opacity: 0.7;
}

@media screen and (max-width: 1330px) {
  .article_page-main-sns {
    transform: translateX(-111px) translateY(16vw);
  }
}

@media screen and (max-width: 1200px) {
  .article_page-main-sns {
    position: relative;
    transform: none;
    margin: 0 auto 90px;
    width: auto;
    align-items: center;
  }

  .article_page-main-sns-title {
    writing-mode: initial;
    font-size: 30px;
  }

  .article_page-main-sns-title::after {
    content: none;
  }

  .article_page-main-sns-list {
    flex-direction: initial;
  }

  .article_page-main-sns-link {
    width: 52px;
    display: inline-block;
  }
}

@media screen and (max-width: 768px) {
  .article_page-main-sns {
    background-color: #f6fafc;
    border-radius: 8px;
    padding: 21px 31px 35px;
    gap: 19px;
    margin-bottom: 58px;
  }

  .article_page-main-sns-list {
    gap: 27px;
  }

  .article_page-main-sns-title {
    font-family: YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande",
      "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana,
      "ＭＳ Ｐゴシック", sans-serif;
    font-size: 16px;
    line-height: 180%;
    font-weight: 700;
  }
}

.uiverse {
  --duration: 5s;
  --easing: ease-in-out;
  --c-color-1: #ff6f00;
  --c-color-2: #1a23ff;
  --c-color-3: #e21bda;
  --c-color-4: #ffd800;
  --c-shadow: rgba(0, 0, 0, 0.2);
  --c-shadow-inset-top: rgba(0, 0, 0, 0.1);
  --c-shadow-inset-bottom: rgba(0, 0, 0, 0.1);
  --c-radial-inner: #ffd215;
  --c-radial-outer: #fff172;
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table;
  border-radius: 24px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(circle,
      var(--c-radial-inner),
      var(--c-radial-outer) 80%);
  box-shadow: 0 0 14px var(--c-shadow);
  transition: transform 0.2s;
}

.uiverse:hover {
  transform: scale(1.1);
}

.uiverse:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top),
    inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 152px;
  padding: 12px 0;
}

.uiverse .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.uiverse .wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1,
.uiverse .wrapper .circle.circle-9,
.uiverse .wrapper .circle.circle-10 {
  --background: var(--c-color-4);
}

.uiverse .wrapper .circle.circle-3,
.uiverse .wrapper .circle.circle-4 {
  --background: var(--c-color-2);
  --blur: 14px;
}

.uiverse .wrapper .circle.circle-5,
.uiverse .wrapper .circle.circle-6 {
  --background: var(--c-color-3);
  --blur: 16px;
}

.uiverse .wrapper .circle.circle-2,
.uiverse .wrapper .circle.circle-7,
.uiverse .wrapper .circle.circle-8,
.uiverse .wrapper .circle.circle-11,
.uiverse .wrapper .circle.circle-12 {
  --background: var(--c-color-1);
  --blur: 12px;
}

.uiverse .wrapper .circle.circle-1 {
  --x: 0;
  --y: -40px;
  --animation: circle-1;
}

.uiverse .wrapper .circle.circle-2 {
  --x: 92px;
  --y: 8px;
  --animation: circle-2;
}

.uiverse .wrapper .circle.circle-3 {
  --x: -12px;
  --y: -12px;
  --animation: circle-3;
}

.uiverse .wrapper .circle.circle-4 {
  --x: 80px;
  --y: -12px;
  --animation: circle-4;
}

.uiverse .wrapper .circle.circle-5 {
  --x: 12px;
  --y: -4px;
  --animation: circle-5;
}

.uiverse .wrapper .circle.circle-6 {
  --x: 56px;
  --y: 16px;
  --animation: circle-6;
}

.uiverse .wrapper .circle.circle-7 {
  --x: 8px;
  --y: 28px;
  --animation: circle-7;
}

.uiverse .wrapper .circle.circle-8 {
  --x: 28px;
  --y: -4px;
  --animation: circle-8;
}

.uiverse .wrapper .circle.circle-9 {
  --x: 20px;
  --y: -12px;
  --animation: circle-9;
}

.uiverse .wrapper .circle.circle-10 {
  --x: 64px;
  --y: 16px;
  --animation: circle-10;
}

.uiverse .wrapper .circle.circle-11 {
  --x: 4px;
  --y: 4px;
  --animation: circle-11;
}

.uiverse .wrapper .circle.circle-12 {
  --blur: 14px;
  --x: 52px;
  --y: 4px;
  --animation: circle-12;
}

@keyframes circle-1 {
  0% {
    transform: translate(0px, 0px) translateZ(0);
  }

  50% {
    transform: translate(0px, 16px) translateZ(0);
  }

  100% {
    transform: translate(0px, 0px) translateZ(0);
  }
}

@keyframes circle-2 {
  0% {
    transform: translate(80px, -10px) translateZ(0);
  }

  50% {
    transform: translate(72px, -48px) translateZ(0);
  }

  100% {
    transform: translate(80px, -10px) translateZ(0);
  }
}

@keyframes circle-3 {
  0% {
    transform: translate(20px, 12px) translateZ(0);
  }

  50% {
    transform: translate(12px, 4px) translateZ(0);
  }

  100% {
    transform: translate(20px, 12px) translateZ(0);
  }
}

@keyframes circle-4 {
  0% {
    transform: translate(76px, -12px) translateZ(0);
  }

  50% {
    transform: translate(112px, -8px) translateZ(0);
  }

  100% {
    transform: translate(76px, -12px) translateZ(0);
  }
}

@keyframes circle-5 {
  0% {
    transform: translate(84px, 28px) translateZ(0);
  }

  50% {
    transform: translate(40px, -32px) translateZ(0);
  }

  100% {
    transform: translate(84px, 28px) translateZ(0);
  }
}

@keyframes circle-6 {
  0% {
    transform: translate(28px, -16px) translateZ(0);
  }

  50% {
    transform: translate(76px, -56px) translateZ(0);
  }

  100% {
    transform: translate(28px, -16px) translateZ(0);
  }
}

@keyframes circle-7 {
  0% {
    transform: translate(8px, 28px) translateZ(0);
  }

  50% {
    transform: translate(20px, -60px) translateZ(0);
  }

  100% {
    transform: translate(8px, 28px) translateZ(0);
  }
}

@keyframes circle-8 {
  0% {
    transform: translate(32px, -4px) translateZ(0);
  }

  50% {
    transform: translate(56px, -20px) translateZ(0);
  }

  100% {
    transform: translate(32px, -4px) translateZ(0);
  }
}

@keyframes circle-9 {
  0% {
    transform: translate(20px, -12px) translateZ(0);
  }

  50% {
    transform: translate(80px, -8px) translateZ(0);
  }

  100% {
    transform: translate(20px, -12px) translateZ(0);
  }
}

@keyframes circle-10 {
  0% {
    transform: translate(68px, 20px) translateZ(0);
  }

  50% {
    transform: translate(100px, 28px) translateZ(0);
  }

  100% {
    transform: translate(68px, 20px) translateZ(0);
  }
}

@keyframes circle-11 {
  0% {
    transform: translate(4px, 4px) translateZ(0);
  }

  50% {
    transform: translate(68px, 20px) translateZ(0);
  }

  100% {
    transform: translate(4px, 4px) translateZ(0);
  }
}

@keyframes circle-12 {
  0% {
    transform: translate(56px, 0px) translateZ(0);
  }

  50% {
    transform: translate(60px, -32px) translateZ(0);
  }

  100% {
    transform: translate(56px, 0px) translateZ(0);
  }
}

.memo .aligncenter {
  display: block;
  margin: 0 auto;
} 

.wp-block-image.aligncenter,
.article_content .aligncenter {
  display: block;
  margin: 0 auto;
}