:root {
    --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  }

  .ingredients {
    container-type: inline-size;
  }

  .ingredient__section:not(:last-child) {
    margin: 5cqw 0 18cqw;
  }

  .ingredient__title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 4cqw;
    line-height: 1.4;
    letter-spacing: 0;
    color: #322622;

    margin-bottom: 6cqw;
  }

  .ingredient--beauty .ingredient__list {
    width: 100%;
    max-width: 87%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8cqw 1.3cqw;
    margin-bottom: 9cqw;
  }

  .ingredient--free .ingredient__list {
    width: 100%;
    max-width: 87%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 3cqw 2cqw;
  }


  .ingredient__name {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 2cqw;
    color: #403632;
    text-align: center;

    margin-bottom: 1.2cqw;
  }

  .ingredient__img {
    display: block;
    width: 100%;
    height: auto;

    margin-bottom: 1.3cqw;
  }

  .ingredient__effect {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.7cqw;
    color: #7E6D67;
    text-align: center;
  }

  .ingredient__note {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 2cqw;
    color: #403632;
    text-align: left;
  }

  .color-map-section {
    container-type: inline-size;
  }

  .color-map-section h2 {
    color: #231815;
    display: block;
    text-decoration: none;
    font-family: var(--enSerif);
    font-size: 24px;
    text-align: left;
    border-bottom: 1px solid #231815;
    padding: 0 0 0.25em;
    line-height: 1;
    position: relative;
    background: none;
    margin-bottom: 0.8em;
  }

  @media screen and (min-width: 768px) {
    .color-map-section h2 {
      border-bottom: 1px solid #707070;
      padding: 0 0 0.5em;
    }
  }


  .matrix-container {
    position: relative;
    width: 96%;
    height: 110cqw;
  }

  .matrix-container .axis {
    position: absolute;
    background-color: rgba(50, 38, 34, 0.7);
  }

  .matrix-container .axis-x {
    top: 50%;
    left: 14cqw;
    right: 14cqw;
    height: 1px;
    transform: translateY(-50%);
  }

  .matrix-container .axis-y {
    left: 50%;
    top: 11cqw;
    bottom: 12cqw;
    width: 1px;
    transform: translateX(-50%);
  }

  .matrix-container .axis-label {
    position: absolute;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(9px, 2.4cqw, 9999px);
    line-height: 1;
    letter-spacing: 0.1em;
    color: #322622;
    text-align: center;
  }

  .matrix-container .axis-label.label-top {
    top: 3cqw;
    left: 50%;
    transform: translateX(-50%);
  }

  .matrix-container .axis-label.label-bottom {
    bottom: 3cqw;
    left: 50%;
    transform: translateX(-50%);
  }

  .matrix-container .axis-label.label-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .matrix-container .axis-label.label-right {
    right: -4cqw;
    top: 50%;
    transform: translateY(-50%);
  }

  .texture-link {
    position: absolute;
    width: 12cqw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    transform: translate(-50%, -50%);
  }

  .texture-link:hover {
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(1.05);
    z-index: 10;
    text-decoration: none;
  }

  .texture-link .texture-label {
    font-family: "Interstate", sans-serif;
    font-weight: 400;
    font-size: clamp(7px, 1.87cqw, 9999px);
    color: #322622;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
    margin-top: 1cqw;
  }

  .texture-link .texture-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .texture-link.item-900 {
    left: 72%;
    top: 84%;
  }

  .texture-link.item-901 {
    left: 38%;
    top: 36%;
  }

  .texture-link.item-902 {
    left: 71%;
    top: 21%;
  }

  .texture-link.item-903 {
    left: 24%;
    top: 64%;
  }

  .texture-link.item-904 {
    left: 61%;
    top: 70%;
  }

  .texture-link.item-905 {
    left: 17%;
    top: 26%;
  }

  .texture-link.item-908 {
    left: 81%;
    top: 61%;
  }