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

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--white);
  letter-spacing: 0.04em;
}

#root {
  max-width: 1920px;
  margin: 0 auto;
  padding-right: var(--sidebar-width);
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

img, iframe {
  max-width: 100%;
}

iframe {
  border: none;
  box-shadow: none;
}

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

[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;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--grad-green);
  transition: all 250ms ease;
  color: var(--white);
  
  &:hover {
    text-decoration: none;
    opacity: 0.85;
    color: var(--white);
  }
  &::after {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.36451%203.22314C9.5171%202.74572%2010.7524%202.5%2012%202.5C14.5196%202.5%2016.9359%203.50089%2018.7175%205.28249C20.4991%207.06408%2021.5%209.48044%2021.5%2012C21.5%2014.5196%2020.4991%2016.9359%2018.7175%2018.7175C16.9359%2020.4991%2014.5196%2021.5%2012%2021.5C10.7524%2021.5%209.5171%2021.2543%208.36451%2020.7769C7.21191%2020.2994%206.16464%2019.5997%205.28249%2018.7175C4.40033%2017.8354%203.70056%2016.7881%203.22314%2015.6355C2.74572%2014.4829%202.5%2013.2476%202.5%2012C2.5%2010.7524%202.74572%209.5171%203.22314%208.36451C3.70056%207.21191%204.40033%206.16464%205.28249%205.28249C6.16464%204.40033%207.21191%203.70056%208.36451%203.22314ZM12%203.5C10.8838%203.5%209.77846%203.71986%208.74719%204.14702C7.71592%204.57419%206.77889%205.20029%205.98959%205.98959C5.20029%206.77889%204.57419%207.71592%204.14702%208.74719C3.71986%209.77846%203.5%2010.8838%203.5%2012C3.5%2013.1162%203.71986%2014.2215%204.14702%2015.2528C4.57419%2016.2841%205.20029%2017.2211%205.98959%2018.0104C6.77889%2018.7997%207.71592%2019.4258%208.74719%2019.853C9.77846%2020.2801%2010.8838%2020.5%2012%2020.5C14.2543%2020.5%2016.4163%2019.6045%2018.0104%2018.0104C19.6045%2016.4163%2020.5%2014.2543%2020.5%2012C20.5%209.74566%2019.6045%207.58365%2018.0104%205.98959C16.4163%204.39553%2014.2543%203.5%2012%203.5ZM11.6464%208.35355C11.4512%208.15829%2011.4512%207.84171%2011.6464%207.64645C11.8417%207.45118%2012.1583%207.45118%2012.3536%207.64645L16.3536%2011.6464C16.5488%2011.8417%2016.5488%2012.1583%2016.3536%2012.3536L12.3536%2016.3536C12.1583%2016.5488%2011.8417%2016.5488%2011.6464%2016.3536C11.4512%2016.1583%2011.4512%2015.8417%2011.6464%2015.6464L14.7929%2012.5H8C7.72386%2012.5%207.5%2012.2761%207.5%2012C7.5%2011.7239%207.72386%2011.5%208%2011.5H14.7929L11.6464%208.35355Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E');
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
  }
}

.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;
      }

      & a:hover {
        text-decoration: none;
      }

      &.selected {
        & a {}

        & a: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%;
}

:root {
  --elevation: 0px -4px 8px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 24px 0px rgba(0, 0, 0, 0.04);
}
.elevation {
  box-shadow: var(--elevation);
}

.section-title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  line-height: 1.25;
  
  & .section-title__en {
    font-weight: 500;
    font-size: 0.875rem;
  }
  & .section-title__ja {
    font-weight: 900;
    font-size: 1.25rem;
    @media screen and (min-width: 768px) {
      font-size: 1.5rem;
    }
    @media screen and (min-width: 1024px) {
      font-size: 2rem;
    }
    @media screen and (min-width: 1200px) {
      font-size: 2.25rem;
    }
  }
  
  &.section-title--orange {
    & .section-title__en {
      color: var(--orange);
    }
  }
  &.section-title--green {
    & .section-title__ja {
      color: var(--green);
    }
  }
}

.home-hero {
  height: calc(var(--vh, 1vh) * 100);
  min-height: 812px;
  
  & .home-hero__illust {
    align-self: center;
    width: 15rem;
    
    @media screen and (min-width: 768px) {
      width: 20rem;
    }
    @media screen and (min-width: 1200px) {
      position: absolute;
      bottom: 40px;
      right: 3.3333%;
      width: 25%;
    }
  }
}
.home-concept-shape {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 9999px;
  background-color: rgba(33 131 74 / 5%);
  
  &.home-concept-shape--top {
    top: -437px;
    left: -165px;
  }
  &.home-concept-shape--bottom {
    bottom: -437px;
    right: -165px;
  }
}


.info-slider {
  & .swiper {
    width: 100%;
    height: 100%;
    &:not(.swiper-initialized) {
      & .swiper-wrapper {
        display: flex;
        overflow-x: auto;
      }
      & .swiper-slide {
        min-width: 400px;
        width: 400px;
      }
    }
  }
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  & .swiper-wrapper, & .swiper-slide {
    height: 100%;
  }
  & .swiper-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.chatbot {
  right: 4rem !important;
  z-index: 10 !important;
  &.chatbot--open {
    right: 0px !important;
    z-index: 999999998 !important;
  }
}

@media screen and (min-width: 1024px) {
  .chatbot {
    right: 6.5rem !important;
    &.chatbot--open {
      right: 0px !important;
    }
  }
}