*,
*::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-serif);
  color: var(--ink);
  background-color: var(--cream);
  background-image: var(--noise-cream);
}

#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;
        width: 3rem;
        line-height: 3rem;
        text-align: center;
        border: 1px solid var(--ink);
        &:hover {
          text-decoration: none;
        }
      }

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

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

.thumbnail {
  position: relative;

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

  &.thumbnail--3x2 {
    padding-top: 66.6667%;
  }
  
  &.thumbnail--8x5 {
    padding-top: 62.5%;
  }

  & img,
  & video,
  &: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;
  }
}

/* 今後スタイルを定義するためのプレースホルダー */
.news-list {
  /* TODO: ニュース一覧のスタイルを定義 */
}
.blog-list {
  /* TODO: ブログ一覧のスタイルを定義 */
}

.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;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 20rem;
  &::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(10, 10, 10, 0.40) 0%, rgba(10, 10, 10, 0.03) 56%, rgba(10, 10, 10, 0.00) 100%);
  }  
  & img {
    position: absolute;
    top: 0;
    right: 0;
    object-fit: cover;
    height: 100%;
    width: 67.5%;
    margin-left: auto;
  }  
  & h1 {
    position: relative;
    color: var(--snow);
    white-space: nowrap;
    line-height: 1;
    --tracking: -0.08em;
    font-family: var(--font-sans);
    font-weight: 100;
    font-size: 4.5rem;
  }
  @media (min-width: 768px) {
    height: 30rem;
    & h1 {
      font-size: 10rem;
    }
  }
  @media (min-width: 1024px) {
    height: 40rem;
    & h1 {
      font-size: 12rem;
    }
  }
  @media (min-width: 1200px) {
    height: clamp(50rem, 100dvh, 60rem);
    & h1 {
      font-size: 20rem;
    }
  }
}

.section-typo {
  position: absolute;
  color: var(--snow);
  white-space: nowrap;
  line-height: 1;
  --tracking: -0.08em;
  font-family: var(--font-sans);
  font-weight: 100;
  font-size: 10rem;
  @media (min-width: 768px) {
    font-size: 12.5rem;
  }
  @media (min-width: 1024px) {
    font-size: 15rem;
  }
  @media (min-width: 1200px) {
    font-size: 20rem;
  }
  
  &.section-typo--tr {
    top: -0.1296875em;
    right: -0.0625em;
    text-align: end;
  }
  &.section-typo--tl {
    top: -0.1296875em;
    left: 0;
  }
  &.section-typo--works {
    top: 0.2125em;
    left: -0.03125em;
  }
}


.button {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  --tracking: 0.32em;
  transition: opacity 200ms linear;
  @media (min-width: 768px) {
    font-size: 1rem;
  }
  
  &::after {
    content: "";
    width: 3.375rem;
    height: 3.375rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2254%22%20height%3D%2254%22%20viewBox%3D%220%200%2054%2054%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cmask%20id%3D%22path-1-inside-1_128_2565%22%20fill%3D%22white%22%3E%0A%3Cpath%20d%3D%22M0%2027C0%2012.0883%2012.0883%200%2027%200C41.9117%200%2054%2012.0883%2054%2027C54%2041.9117%2041.9117%2054%2027%2054C12.0883%2054%200%2041.9117%200%2027Z%22%2F%3E%0A%3C%2Fmask%3E%0A%3Cpath%20d%3D%22M0%2027M54%2027M54%2027M0%2027M27%200M54%2027M27%2054M0%2027M27%2054V53C12.6406%2053%201%2041.3594%201%2027H0H-1C-1%2042.464%2011.536%2055%2027%2055V54ZM54%2027H53C53%2041.3594%2041.3594%2053%2027%2053V54V55C42.464%2055%2055%2042.464%2055%2027H54ZM27%200V1C41.3594%201%2053%2012.6406%2053%2027H54H55C55%2011.536%2042.464%20-1%2027%20-1V0ZM27%200V-1C11.536%20-1%20-1%2011.536%20-1%2027H0H1C1%2012.6406%2012.6406%201%2027%201V0Z%22%20fill%3D%22%2345443E%22%20mask%3D%22url(%23path-1-inside-1_128_2565)%22%2F%3E%0A%3Cpath%20d%3D%22M32.765%2027.265L28.265%2031.765C28.1939%2031.8313%2028.0999%2031.8673%2028.0027%2031.8656C27.9056%2031.8639%2027.8129%2031.8246%2027.7442%2031.7559C27.6755%2031.6872%2027.6361%2031.5945%2027.6344%2031.4973C27.6327%2031.4002%2027.6688%2031.3061%2027.735%2031.235L31.5944%2027.375H21.5C21.4005%2027.375%2021.3052%2027.3355%2021.2348%2027.2652C21.1645%2027.1949%2021.125%2027.0995%2021.125%2027C21.125%2026.9006%2021.1645%2026.8052%2021.2348%2026.7349C21.3052%2026.6646%2021.4005%2026.625%2021.5%2026.625H31.5944L27.735%2022.765C27.6688%2022.694%2027.6327%2022.5999%2027.6344%2022.5028C27.6361%2022.4056%2027.6755%2022.3129%2027.7442%2022.2442C27.8129%2022.1755%2027.9056%2022.1362%2028.0027%2022.1345C28.0999%2022.1327%2028.1939%2022.1688%2028.265%2022.235L32.765%2026.735C32.8352%2026.8054%2032.8747%2026.9007%2032.8747%2027C32.8747%2027.0994%2032.8352%2027.1947%2032.765%2027.265Z%22%20fill%3D%22%232B2A26%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  }
  &:hover {
    opacity: 0.85;
    text-decoration: none;
  }
  
  &.button--snow {
    color: var(--snow);
    &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2254%22%20height%3D%2254%22%20viewBox%3D%220%200%2054%2054%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cmask%20id%3D%22path-1-inside-1_172_551%22%20fill%3D%22white%22%3E%0A%3Cpath%20d%3D%22M0%2027C0%2012.0883%2012.0883%200%2027%200C41.9117%200%2054%2012.0883%2054%2027C54%2041.9117%2041.9117%2054%2027%2054C12.0883%2054%200%2041.9117%200%2027Z%22%2F%3E%0A%3C%2Fmask%3E%0A%3Cpath%20d%3D%22M0%2027M54%2027M54%2027M0%2027M27%200M54%2027M27%2054M0%2027M27%2054V53C12.6406%2053%201%2041.3594%201%2027H0H-1C-1%2042.464%2011.536%2055%2027%2055V54ZM54%2027H53C53%2041.3594%2041.3594%2053%2027%2053V54V55C42.464%2055%2055%2042.464%2055%2027H54ZM27%200V1C41.3594%201%2053%2012.6406%2053%2027H54H55C55%2011.536%2042.464%20-1%2027%20-1V0ZM27%200V-1C11.536%20-1%20-1%2011.536%20-1%2027H0H1C1%2012.6406%2012.6406%201%2027%201V0Z%22%20fill%3D%22white%22%20mask%3D%22url(%23path-1-inside-1_172_551)%22%2F%3E%0A%3Cpath%20d%3D%22M32.765%2027.2649L28.265%2031.7649C28.1939%2031.8312%2028.0999%2031.8672%2028.0027%2031.8655C27.9056%2031.8638%2027.8129%2031.8244%2027.7442%2031.7557C27.6755%2031.687%2027.6361%2031.5943%2027.6344%2031.4972C27.6327%2031.4%2027.6688%2031.306%2027.735%2031.2349L31.5944%2027.3749H21.5C21.4005%2027.3749%2021.3052%2027.3354%2021.2348%2027.2651C21.1645%2027.1948%2021.125%2027.0994%2021.125%2026.9999C21.125%2026.9005%2021.1645%2026.8051%2021.2348%2026.7348C21.3052%2026.6644%2021.4005%2026.6249%2021.5%2026.6249H31.5944L27.735%2022.7649C27.6688%2022.6938%2027.6327%2022.5998%2027.6344%2022.5027C27.6361%2022.4055%2027.6755%2022.3128%2027.7442%2022.2441C27.8129%2022.1754%2027.9056%2022.136%2028.0027%2022.1343C28.0999%2022.1326%2028.1939%2022.1687%2028.265%2022.2349L32.765%2026.7349C32.8352%2026.8052%2032.8747%2026.9005%2032.8747%2026.9999C32.8747%2027.0993%2032.8352%2027.1946%2032.765%2027.2649Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    }
  }
  &.button--external {
    &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2254%22%20height%3D%2254%22%20viewBox%3D%220%200%2054%2054%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cmask%20id%3D%22path-1-inside-1_196_293%22%20fill%3D%22white%22%3E%0A%3Cpath%20d%3D%22M0%2027C0%2012.0883%2012.0883%200%2027%200C41.9117%200%2054%2012.0883%2054%2027C54%2041.9117%2041.9117%2054%2027%2054C12.0883%2054%200%2041.9117%200%2027Z%22%2F%3E%0A%3C%2Fmask%3E%0A%3Cpath%20d%3D%22M0%2027M54%2027M54%2027M0%2027M27%200M54%2027M27%2054M0%2027M27%2054V53C12.6406%2053%201%2041.3594%201%2027H0H-1C-1%2042.464%2011.536%2055%2027%2055V54ZM54%2027H53C53%2041.3594%2041.3594%2053%2027%2053V54V55C42.464%2055%2055%2042.464%2055%2027H54ZM27%200V1C41.3594%201%2053%2012.6406%2053%2027H54H55C55%2011.536%2042.464%20-1%2027%20-1V0ZM27%200V-1C11.536%20-1%20-1%2011.536%20-1%2027H0H1C1%2012.6406%2012.6406%201%2027%201V0Z%22%20fill%3D%22%2345443E%22%20mask%3D%22url(%23path-1-inside-1_196_293)%22%2F%3E%0A%3Cpath%20d%3D%22M31.2639%2023.1111L31.2639%2029.475C31.2605%2029.5721%2031.2195%2029.6641%2031.1496%2029.7316C31.0797%2029.7991%2030.9863%2029.8368%2030.8891%2029.8368C30.792%2029.8368%2030.6986%2029.7991%2030.6287%2029.7316C30.5588%2029.6641%2030.5178%2029.5721%2030.5144%2029.475L30.5139%2024.0166L23.3761%2031.1544C23.3058%2031.2247%2023.2104%2031.2642%2023.111%2031.2642C23.0115%2031.2642%2022.9161%2031.2247%2022.8458%2031.1544C22.7755%2031.0841%2022.736%2030.9887%2022.736%2030.8892C22.736%2030.7898%2022.7755%2030.6944%2022.8458%2030.6241L29.9836%2023.4863L24.5252%2023.4858C24.4281%2023.4824%2024.3361%2023.4414%2024.2686%2023.3715C24.2011%2023.3016%2024.1634%2023.2082%2024.1634%2023.1111C24.1634%2023.0139%2024.2011%2022.9205%2024.2686%2022.8506C24.3361%2022.7807%2024.4281%2022.7397%2024.5252%2022.7363L30.8891%2022.7363C30.9885%2022.7364%2031.0838%2022.7759%2031.1541%2022.8461C31.2243%2022.9164%2031.2638%2023.0117%2031.2639%2023.1111Z%22%20fill%3D%22%232B2A26%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    }
  }
}

.concept-intro-images {
  width: 100%;
  max-width: 65rem;
  display: flex;
  flex-direction: column;
  & img {
    object-fit: cover;
    &:nth-of-type(1) {
      width: 76.9230769231%;
      aspect-ratio: 2 / 1;
    }
    &:nth-of-type(2) {
      width: 38.4615384615%;
      aspect-ratio: 1 / 1;
      margin-top: -11.5384615385%;
      margin-left: auto;
    }
  }
}

.concept-value-num {
  line-height: 1;
  --tracking: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 7.5rem;
  opacity: 0.1;
  position: absolute;
  top: -5rem;
  left: -0.25em;
  @media (min-width: 768px) {
    font-size: 10rem;
    top: -8rem;
  }
  @media (min-width: 1024px) {
    top: -12.5rem;
  }
  @media (min-width: 1200px) {
    top: -17.5rem;
  }
}

.product-typo {
  position: absolute;
  color: var(--snow);
  white-space: nowrap;
  line-height: 1;
  --tracking: -0.08em;
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 5rem;
  @media (min-width: 768px) {
    font-size: 7.5rem;
  }
  @media (min-width: 1024px) {
    font-size: 9rem;
  }
  @media (min-width: 1200px) {
    font-size: 11.25rem;
  }
  
  &.product-typo--plus-g {
    bottom: -0.1472222222em;
    right: 0;
    text-align: end;
  }
  &.product-typo--eps {
    top: -0.1611111111em;
    left: -0.0944444444em;
  }
}

.service-flow-container {
  overflow-x: auto;
  scrollbar-width: thin;
  @media (min-width: 768px) {
    overflow: visible;
  }
}

.reason-num {
  mix-blend-mode: exclusion;
  color: var(--snow);
  line-height: 1;
  --tracking: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 6rem;
  position: absolute;
  top: -3.3125rem;
  left: -1.625rem;
}


.blog-list {
  & .webgene-blog {
    & .webgene-item:last-of-type {
      border-bottom: 1px solid hsla(from var(--ink) h s l / 20%);
    }
    & .webgene-pagination {
      margin-top: 3rem;
    }
  }
}

.product-feature-images {
  display: flex;
  flex-direction: column;
  & img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    &:nth-of-type(1) {
      width: 86.3636363636%;
      margin-left: auto;
    }
    &:nth-of-type(2) {
      width: 50%;
      margin-top: -13.6363636364%;
    }
  }
  &.product-feature-images--reverse {
    & img {
      &:nth-of-type(1) {
        width: 86.3636363636%;
        margin-left: 0;
      }
      &:nth-of-type(2) {
        width: 50%;
        margin-left: auto;
      }
    }
  }
}

.product-feature-num {
  line-height: 1;
  --tracking: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 7.5rem;
  opacity: 0.1;
  position: absolute;
  top: -5rem;
  left: -0.25em;
  @media (min-width: 768px) {
    font-size: 10rem;
    top: -8rem;
  }
  @media (min-width: 1024px) {
    top: -12rem;
  }
}

.quality-num {
  mix-blend-mode: exclusion;
  color: var(--snow);
  line-height: 1;
  --tracking: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 10rem;
  position: absolute;
  bottom: -4rem;
  left: -2rem;
}

.article-main-image {
  width: 100%;
  position: relative;
  overflow: hidden;
  & img {
    aspect-ratio: 3 / 2;
  }
}
.article-sub-images {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  & .item-image {
    width: 7.5rem;
    min-width: 7.5rem;
    scroll-snap-align: start;
  }
  
  @media (min-width: 1024px) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    
    & .item-image {
      width: auto;
      min-width: auto;
    }
  }
}
.item-images {
  & img {
    width: 100%;
    object-fit: cover;
  }
}

.work-list {
  & .webgene-blog {
    display: grid;
    gap: 2rem;
  }
  @media (min-width: 768px) {
    & .webgene-blog {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    & .webgene-pagination, & .webgene-no-items {
      grid-column: span 2 / span 2;
    }
  }
  @media (min-width: 1200px) {
    & .webgene-blog {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    & .webgene-pagination, & .webgene-no-items {
      grid-column: span 3 / span 3;
    }
  }
}
.work-list .webgene-blog.swiper-wrapper {
  display: flex !important;
  gap: unset !important;
}

.insta-list {
  & .webgene-blog {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 768px) {
    & .webgene-blog {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1200px) {
    & .webgene-blog {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    & .webgene-item:nth-of-type(even) {
      margin-top: 2rem;
    }
  }
}