*,
*::before,
*::after {
  min-width: 0px;
  min-height: 0px;
}

html {
  /* 最小値13pxを保証し、1200px未満では最大22pxまでフォントサイズが流動する */
  font-size: clamp(13px, var(--font-size-base), 22px);

  @media screen and (min-width: 1200px) {
    font-size: clamp(0.1rem, var(--font-size-base), 24px);
  }
}

body {
  font-family: var(--font-sans);
  color: var(--snow);
  background-color: var(--snow);
  background-image: var(--kuropaper);
}

#root {
  margin: 0 auto;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  line-height: inherit;
}

img, iframe {
  max-width: 100%;
}
iframe {
  border: none;
  box-shadow: none;
}

a, a:hover {
  color: var(--snow);
}

[id] {
  scroll-margin-top: 3.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

button {
  position: relative;
  appearance: none;
  cursor: pointer;
  box-shadow: none;
  border: 0;
  outline: none;
  background: none;
  padding: 0;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.5rem;
  list-style: disc outside none;

  & > p {
    margin: 0;
    display: list-item;
  }
}

.webgene-pagination {
  & ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 0;
    margin: 0;

    & li {
      & a {
        display: inline-block;
        width: 3rem;
        line-height: 3rem;
        text-align: center;
        border: 1px solid var(--snow);
        &:hover {
          text-decoration: none;
        }
      }

      &.selected {
        & a {
          background-color: var(--teal);
          color: var(--ink);
          border-color: var(--teal);
          &:hover {
          }
        }
      }
    }
  }
}

.webgene-no-items {
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
}

.thumbnail {
  position: relative;

  &.thumbnail--16x9 {
    padding-top: 56.25%;
  }

  & img,
  &:empty::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:empty::before {
    content: "";
    background-image: url("/system_panel/uploads/images/ogp.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

.article-body {
  & > p {
    margin: 1em 0;
  }

  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    margin: 2em 0 1em;
  }

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }

  & a,
  & a:hover {
    color: var(--blue);
    text-decoration: underline;
  }
}

.backdrop-object {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.__mat.__mat--processed {
  word-break: keep-all;
  word-wrap: break-word;
}

.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 22.5rem;
  padding: 5rem 1.25rem 0;
  @media (min-width: 768px) {
    height: 28rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  @media (min-width: 1024px) {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  @media (min-width: 1200px) {
    height: 33.75rem;
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }
  & .page-hero__dec {
    position: absolute;
    bottom: -0.625rem;
    left: -0.625rem;
    aspect-ratio: 1 / 1;
    width: 7.5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='%23FF0000' style='mix-blend-mode:screen'/%3E%3Crect x='40' y='40' width='100' height='100' fill='%230000FF' style='mix-blend-mode:screen'/%3E%3Crect x='80' y='80' width='100' height='100' fill='%2300FF00' style='mix-blend-mode:screen'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    @media (min-width: 768px) {
      width: 10rem;
      bottom: -1rem;
      left: -1rem;
    }
    @media (min-width: 1200px) {
      width: 11.25rem;
      bottom: -1.25rem;
      left: -1.25rem;
    }
  }
  
  & .page-hero__title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    line-height: 1;
    
    & .page-hero__title-en {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      letter-spacing: 0.24em;
      font-weight: 100;
      font-size: 1.75rem;
      @media (min-width: 768px) {
        gap: 1.125rem;
        font-size: 3rem;
      }
      @media (min-width: 1024px) {
        gap: 1.25rem;
        font-size: 4rem;
      }
      @media (min-width: 1200px) {
        gap: 1.5rem;
        font-size: 5rem;
      }
      &::before,
      &::after {
        content: "";
        aspect-ratio: 12 / 55;
        width: 0.3em;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      &::before {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='110' viewBox='0 0 24 110' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath vector-effect='non-scaling-stroke' d='M22.9521 0.25C23.2197 0.251872 23.405 0.36028 23.5322 0.541016C23.6681 0.734308 23.75 1.02992 23.75 1.41016V1.99805C23.75 2.37627 23.6688 2.63991 23.5361 2.81738C23.4069 2.99016 23.2066 3.11052 22.9043 3.16113L22.9014 3.16211C19.5716 3.75562 17.413 4.89229 16.0967 6.63672C14.7843 8.37618 14.3438 10.6754 14.3438 13.5146V39.4873C14.3437 43.2447 14.1009 46.3784 13.1621 48.8594C12.288 51.1695 10.808 52.9196 8.32715 54.0752L7.81738 54.2988C7.61378 54.3694 7.45346 54.4749 7.33984 54.5889C7.28183 54.647 7.23335 54.7099 7.19824 54.7744C7.17345 54.82 7.14971 54.8753 7.13965 54.9365L7.13477 55L7.14062 55.0664C7.16768 55.2156 7.28118 55.3199 7.35645 55.3828C7.45716 55.4669 7.60291 55.5638 7.77344 55.6777L7.79395 55.6914L7.81738 55.7012C10.608 56.8491 12.2297 58.6764 13.1621 61.1406C14.1009 63.6216 14.3437 66.7553 14.3438 70.5127V96.4854C14.3438 99.3246 14.7843 101.624 16.0967 103.363C17.413 105.108 19.5716 106.244 22.9014 106.838L22.9043 106.839C23.2066 106.889 23.4069 107.01 23.5361 107.183C23.6688 107.36 23.75 107.624 23.75 108.002V108.59C23.75 108.97 23.6681 109.266 23.5322 109.459C23.405 109.64 23.2197 109.747 22.9521 109.749C17.8091 109.457 14.3328 107.974 12.1309 105.174C9.91948 102.361 8.95316 98.1708 8.95312 92.3721V68.9854C8.95312 67.3439 8.95372 64.3199 8.38672 61.7041C8.10344 60.3974 7.6738 59.1682 7.01367 58.2607C6.34685 57.3442 5.43702 56.748 4.21973 56.748H3.94043L2.10938 56.8652H1.8457C1.39897 56.8652 1.00986 56.7564 0.732422 56.4932C0.457505 56.2323 0.25 55.7795 0.25 55C0.25 54.2205 0.457505 53.7677 0.732422 53.5068C1.00986 53.2436 1.39897 53.1348 1.8457 53.1348H2.10938L3.94043 53.252H4.21973C5.43848 53.252 6.34847 52.647 7.01465 51.7217C7.67441 50.8051 8.10448 49.565 8.3877 48.251C8.95456 45.6208 8.95312 42.5976 8.95312 41.0146V17.6279C8.95316 11.8292 9.91948 7.63886 12.1309 4.82617C14.3328 2.02552 17.8091 0.542499 22.9521 0.25Z' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
      }
      &::after {
  		background-image: url("data:image/svg+xml,%3Csvg width='24' height='110' viewBox='0 0 24 110' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath vector-effect='non-scaling-stroke' d='M1.04688 0.25C6.19049 0.542367 9.66707 2.02535 11.8691 4.82617C14.0805 7.63886 15.0468 11.8292 15.0469 17.6279V41.0146C15.0469 42.5976 15.0454 45.6208 15.6123 48.251C15.8955 49.565 16.3256 50.8051 16.9854 51.7217C17.6515 52.647 18.5615 53.252 19.7803 53.252H20.0596L21.8906 53.1348H22.1543C22.601 53.1348 22.9901 53.2436 23.2676 53.5068C23.5425 53.7677 23.75 54.2205 23.75 55C23.75 55.7795 23.5425 56.2323 23.2676 56.4932C22.9901 56.7564 22.601 56.8652 22.1543 56.8652H21.8906L20.0596 56.748H19.7803C18.563 56.748 17.6531 57.3442 16.9863 58.2607C16.3262 59.1682 15.8966 60.3974 15.6133 61.7041C15.0463 64.3199 15.0469 67.3439 15.0469 68.9854V92.3721C15.0468 98.1708 14.0805 102.361 11.8691 105.174C9.66708 107.975 6.19046 109.457 1.04688 109.749C0.779826 109.747 0.594865 109.639 0.467773 109.459C0.331898 109.266 0.250014 108.97 0.25 108.59V108.002C0.250026 107.624 0.331199 107.36 0.463867 107.183C0.593115 107.01 0.793391 106.889 1.0957 106.839L1.09863 106.838C4.42842 106.244 6.58695 105.108 7.90332 103.363C9.21569 101.624 9.65622 99.3246 9.65625 96.4854V70.5127C9.65626 66.7553 9.89914 63.6216 10.8379 61.1406C11.7703 58.6764 13.392 56.8491 16.1826 55.7012L16.2061 55.6914L16.2266 55.6777C16.3971 55.5638 16.5428 55.4669 16.6436 55.3828C16.7295 55.311 16.8652 55.1851 16.8652 55C16.8652 54.9138 16.8349 54.8354 16.8018 54.7744C16.7667 54.7099 16.7182 54.647 16.6602 54.5889C16.5464 54.4748 16.3857 54.3694 16.1816 54.2988H16.1826C13.392 53.1509 11.7703 51.3236 10.8379 48.8594C9.89914 46.3784 9.65626 43.2447 9.65625 39.4873V13.5146C9.65622 10.6754 9.21569 8.37618 7.90332 6.63672C6.58695 4.89229 4.42842 3.75562 1.09863 3.16211L1.0957 3.16113C0.79339 3.11052 0.593115 2.99016 0.463867 2.81738C0.331198 2.63991 0.250026 2.37627 0.25 1.99805V1.41016L0.253906 1.27148C0.271464 0.957578 0.348894 0.71013 0.467773 0.541016C0.594866 0.360499 0.779821 0.252127 1.04688 0.25Z' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
      }
    }
    
    & .page-hero__title-ja {
      text-align: center;
      font-size: 1.25rem;
      @media (min-width: 768px) {
        font-size: 1.5rem;
      }
      @media (min-width: 1024px) {
        font-size: 1.75rem;
      }
      @media (min-width: 1200px) {
        font-size: 2rem;
      }
    }
  }
  
  &.page-hero--short {
    height: 15rem;
    @media (min-width: 768px) {
      height: 20rem;
    }
  }
}

.teal-bar {
  width: 100%;
  height: 0.25rem;
}

.button {
  position: relative;
  padding: 0.5rem 1.5rem 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-size: 1.125rem;
  color: var(--ink);
  background-color: var(--snow);
  transition: opacity ease 200ms;
  &::before {
    content: "";
    aspect-ratio: 1 / 1;
    width: 2.5rem;
    background-image: url(/system_panel/uploads/images/lens.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: transform ease 200ms;
  }
  &:hover {
    text-decoration: none;
    opacity: 90%;
    color: var(--ink);
    &::before {
      transform: scale(0.7);
    }
  }
  
  &.button--no-icon {
    padding: 1rem 1.5rem;
    justify-content: center;
    text-align: center;
    min-width: 17.5rem;
    &::before {
      content: none;
    }
  }
  &.button--transparent {
    padding: 0;
    background-color: transparent;
    color: var(--snow);
    &::before {
      background-image: url(/system_panel/uploads/images/lens-snow.svg);
    }
    &:hover {
      color: var(--snow);
    }
  }
  &.button--border {
    padding: 1rem 1.5rem;
    justify-content: center;
    text-align: center;
    min-width: 17.5rem;
    background-color: transparent;
    border: 1px solid var(--snow);
    &::before {
      content: none;
    }
  }
}

.products-intro-image {
  width: 100%;
  @media (min-width: 1024px) {
    width: 154.274137931%;
  }
}

.products-feature-num {
  position: absolute;
  bottom: -0.625rem;
  left: -0.625rem;
  padding: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  line-height: 1;
  letter-spacing: 0.24em;
  font-weight: 100;
  background-color: var(--ink);
  & p:first-child {
    font-size: 1rem;
    @media (min-width: 768px) {
      font-size: 2rem;
    }
    @media (min-width: 1024px) {
      font-size: 3rem;
    }
    @media (min-width: 1200px) {
      font-size: 1.5rem;
    }
  }
  & p:last-child {
    font-size: 2rem;
    @media (min-width: 768px) {
      font-size: 4rem;
    }
    @media (min-width: 1024px) {
      font-size: 6rem;
    }
    @media (min-width: 1200px) {
      font-size: 3rem;
    }
  }
}

.products-case-num {
  position: absolute;
  bottom: -0.625rem;
  left: -0.625rem;
  padding: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  line-height: 1;
  letter-spacing: 0.24em;
  font-weight: 100;
  background-color: var(--ink);
  & p:first-child {
    font-size: 1rem;
    @media (min-width: 768px) {
      font-size: 2rem;
    }
    @media (min-width: 1024px) {
      font-size: 1.5rem;
    }
  }
  & p:last-child {
    font-size: 2rem;
    @media (min-width: 768px) {
      font-size: 4rem;
    }
    @media (min-width: 1024px) {
      font-size: 3rem;
    }
  }
}

.business-domain {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ink);
  line-height: 1;
  letter-spacing: 0.24em;
  font-weight: 100;
  font-size: 0.875rem;
  white-space: nowrap;
  padding: 0.5rem;
  @media (min-width: 768px) {
    font-size: 1.875rem;
    padding: 1rem;
  }
  @media (min-width: 1024px) {
    font-size: 2.5rem;
  }
  @media (min-width: 1200px) {
    font-size: 4rem;
    padding: 1.5rem;
  }
}

.swiper:not(.swiper-initialized) {
  & .swiper-wrapper {
    display: flex;
    overflow: auto;
    & .swiper-slide {
      min-width: 90%;
    }
  }
}


.category-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  
  @media (min-width: 1024px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
  }
  @media (min-width: 1200px) {
    column-gap: 1.5rem;
  }
  & .webgene-blog, & .webgene-item {
    display: contents;
  }
}
.webgene-button {
  padding: 1rem 1.5rem;
  border: 1px solid var(--snow);
  color: var(--snow);
  transition: all 200ms ease;
  text-align: center;
  display: block;
  
  &:hover {
    opacity: 0.75;
    text-decoration: none;
  }
  
  &[aria-current="page"] {
    background-color: var(--snow);
    color: var(--ink);
  }
}

.news-list {
  & .webgene-blog {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}