*,
*::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(--ink);
  background-color: var(--snow);
  background-image: var(--paper);
  letter-spacing: 0.24em;
  
  &:has(.dialog.open) .bg-blur-12 {
    backdrop-filter: none !important;
    filter: none !important;
  }
}

#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(--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;
  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;
        text-align: center;
        width: 0.681875rem;
        aspect-ratio: 1091 / 1255;
        text-indent: 100%;
        overflow: hidden;
        opacity: 0.2;
        transition: opacity 200ms ease;
        &::before {
          content: "";
          background-image: url(/system_panel/uploads/images/toofu-outline.svg);
          background-repeat: no-repeat;
          background-size: contain;
          width: 100%;
          height: 100%;
          display: block;
        }
        &:hover {
          text-decoration: none;
          opacity: 0.4;
        }
      }

      &.selected {
        & a {
          &::before {
            content: "";
            background-image: url(/system_panel/uploads/images/toofu-fill.svg);
          }
          &:hover {}
        }
      }
      &.next, &.prev {
        display: none;
      }
    }
  }
}

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

.thumbnail {
  position: relative;

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

  & 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 {
  font-size: 0.875rem;
  line-height: 1.8;
  & > p {
    margin: 1em 0;
  }

  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    margin: 2em 0 1em;
  }
  
  & > h1 {
    font-size: 2rem;
  }
  & > h2 {
    font-size: 1.125rem;
  }
  & > h3, & > h4, & > h5, & > h6 {
    font-size: 1rem;
  }

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

.dashed-line {
  height: 1px;
  width: 100%;
  background-image: linear-gradient(to right, var(--ink) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  background-position: center;
} 

.grayscale {
  filter: grayscale(100%);
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 3rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--ink);
  line-height: 1.25;
  letter-spacing: 0.24em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ink);
  transition: opacity ease 200ms;
  &:hover {
    text-decoration: none;
    opacity: 70%;
    color: var(--ink);
  }
}

.section-contact-bg-image {
  width: 75%;
  min-width: 40rem;
  opacity: 35%;
  position: absolute;
  object-fit: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.footer-video-wrapper {
  height: calc(var(--vh, 1vh) * 100);
  padding: 0.625rem;
  & video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media (min-width: 768px) {
    padding: 1.5rem;
  }
  @media (min-width: 1024px) {
    padding: 2rem;
  }
  @media (min-width: 1200px) {
    padding: 2.5rem;
  }
}

.works-category {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  @media (min-width: 768px) {
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
  }
  & .webgene-blog {
    display: contents;
  }
}

.work-list {
  & .webgene-blog {
    display: flex;
    flex-direction: column;
    gap: 7.5rem;
  }
  
  & .thumbnail,
  & .swiper-slide {
    position: relative;
    &::after {
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
      background-color: hsl(0deg 0% 100% / 20%);
    }
  }
  
  & .swiper {
    width: 100%;
    & .swiper-wrapper {
      transition-timing-function: linear;
    }
    & .swiper-slide {
      & img {
        object-fit: cover;
        aspect-ratio: 3 / 2;
        width: 100%;
      }
    }
  }
}


.detail-image {
  position: relative;
  height: clamp(15rem, 100dvh, 25rem);
  margin-top: 6.25rem;

  @media (min-width: 768px) {
    margin-top: 0;
    height: clamp(37.5rem, 100dvh, 75rem);
  }
}
.detail-thumbnail, .detail-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
  & video, & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.item-images {
  & img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
  }
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
}

.home-work-list {
  position: relative;
  & .webgene-item {
    height: clamp(15rem, 100dvh, 25rem);
    
    @media (min-width: 768px) {
      height: clamp(37.5rem, 100dvh, 75rem);
    }
  }
  & .images, & .video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  
  & .video {
    width: 100%;
    height: 100%;
    & video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  & .swiper {
    width: 100%;
    height: 100%;
    
    & .swiper-wrapper, & .swiper-slide {
      height: 100%;
    }
    & .swiper-slide {
      width: 100%;
    }
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  & .contents {
    z-index: 2;
    mix-blend-mode: difference;
  }
  
  & .frame {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(15rem, 100dvh, 25rem);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem;
    opacity: 0.5;
    z-index: 3;
    
    @media (min-width: 768px) {
      padding: 2.5rem;
      height: clamp(37.5rem, 100dvh, 75rem);
    }
  }
  & .frame__top, & .frame__bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    &::before, &::after {
      width: 2.5rem;
      height: 2.5rem;
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      display: block;
    }
  }
  & .frame-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  & .frame__top {
    &::before {
      background-image: url(/system_panel/uploads/images/finder-frame-tl);
    }
    &::after {
      background-image: url(/system_panel/uploads/images/finder-frame-tr);
    }
  }
  & .frame__bottom {
    &::before {
      background-image: url(/system_panel/uploads/images/finder-frame-bl);
    }
    &::after {
      background-image: url(/system_panel/uploads/images/finder-frame-br);
    }
  }
  & .frame__center {
    width: 2.5rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    background-image: url(/system_panel/uploads/images/finder-frame-center);
  }
}

.concept {
  height: clamp(37.5rem, 100dvh, 75rem);
  width: 100%;
  display: flex;
  align-items: center;
  
  & .swiper-slide img {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
  }
  & .swiper-pagination {
    position: static;
    margin-top: 2rem;
  }
}

.home-hero {
  height: clamp(37.5rem, 100dvh, 75rem);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 1.25rem;
  @media (min-width: 768px) {
    padding-bottom: 2.5rem;
  }
  
  & .swiper-pagination {
    z-index: 2;
    bottom: 10rem;
  }
  
  & .hero__container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  & .swiper, & .swiper-wrapper, & .swiper-slide {
    width: 100%;
    height: 100%;
  }
  & img, & video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  & .home-hero__indicator {
    position: relative;
    z-index: 2;
    color: var(--snow);
    text-align: center;
    font-size: 0.625rem;
    line-height: 1.25;
    letter-spacing: 0.5em;
    mix-blend-mode: difference;
    
    & .wrapper {
      height: 3rem;
      width: 0.25rem;
      border-radius: 9999px;
      background-color: hsla(from var(--snow) h s l / 20%);
      
      & .dot {
        width: 0.25rem;
        height: 0.25rem;
        background-color: var(--snow);
        animation: dot-slide-down 2000ms linear infinite;
      }
    }
  }
}

@keyframes dot-slide-down {
  from {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(2.25rem);
  }
  80% {
    transform: translateY(2.75rem);
  }
  to {
    transform: translateY(2.75rem);
  }
}

.swiper {
  width: 100%;

  &:not(.swiper-initialized) {
    & .swiper-wrapper {
      display: flex;
      overflow-x: auto;
      & .swiper-slide {
        width: 100%;
        min-width: 100%;
      }
    }
  }
  & .swiper-pagination {
    & .swiper-pagination-bullet {
      display: inline-block;
      text-align: center;
      width: 0.681875rem;
      height: auto;
      aspect-ratio: 1091 / 1255;
      text-indent: 100%;
      overflow: hidden;
      opacity: 0.2;
      transition: opacity 200ms ease;
      border-radius: 0;
      background-color: transparent;
      margin: 0 0.75rem;
      &::before {
        content: "";
        background-image: url(/system_panel/uploads/images/toofu-outline.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 100%;
        display: block;
      }
      &.swiper-pagination-bullet-active::before {
        background-image: url(/system_panel/uploads/images/toofu-fill.svg);
      }
    }
    &.white {
      opacity: 1;
      mix-blend-mode: difference;
      & .swiper-pagination-bullet {
        opacity: 1;
      }
      
      & .swiper-pagination-bullet::before {
        opacity: 1;
        background-image: url(/system_panel/uploads/images/toofu-outline-white.svg);
      }
      
      & .swiper-pagination-bullet-active::before {
        background-image: url(/system_panel/uploads/images/toofu-fill-white.svg);
      }
    }
  }
}

.splash {
  background-color: var(--snow);
  width: 100%;
  height: 100dvh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition-property: opacity, visibility;
  transition-duration: 450ms;
  transition-timing-function: ease;

  & .logo {
    width: 320px;
    max-width: 80vw;
    cursor: pointer;
    transition: opacity 400ms ease;
    
    &:hover {
      opacity: 0.5;
    }
  }
  
  &.clicked {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.index-nav {
  display: none;
  z-index: 100;
  pointer-events: none;
  @media (min-width: 1024px) {
    display: flex;
  }
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2.5rem;
  & .index-nav__container {
    pointer-events: auto;
  }
}

.index-header {
  & .header__logo {
    @media (min-width: 1024px) {
      visibility: hidden;
      pointer-events: none;
    }
  }
}

.insta-list {
  overflow: visible;
  & .swiper-slide img, & .swiper-slide video {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
}