:root {
  --widthPC: 750px;
}

.mothersday2026__wrapper {
  container-type: inline-size;
  margin: auto;
  inline-size: min(100%, var(--widthPC)) !important;
  padding-block-end: 50px;

  a {
    text-decoration: none;
  }

  section,
  figure,
  img {
    margin-block: 0;
  }

  figure,
  img {
    inline-size: min(100%, var(--widthPC)) !important;
    block-size: auto;
    margin-inline: auto !important;
    display: block;
  }
  img {
    vertical-align: bottom;
  }

  .relative {
    position: relative;
  }

  .pc-only {
    display: none;
  }

  ul,
  li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .products {
    --_column: 2;
    --_gap: clamp(6px, 2cqi, 20px);

    inline-size: 90%;
    margin-inline: auto;
    display: block grid;
    grid-template-columns: repeat(auto-fit, calc((100% - var(--_gap) * (var(--_column) - 1)) / var(--_column)));
    gap: var(--_gap);
    li {
      overflow: hidden;
      img {
        transform: scale(1);
        transition: transform 0.4s;
      }
    }
  }

  .btn {
    display: block;
    inline-size: 90%;
    margin-inline: auto;
    margin-block-start: 20px;
  }
}

.btn.-scale {
  animation: -scale 2.5s ease-in infinite alternate;
  transform-origin: center;
  inset-inline-start: 5%;
}

@keyframes -scale {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0.95);
  }
}

@media (any-hover: hover) {
  .mothersday2026__wrapper a:hover,
  .mothersday2026__wrapper .btn:hover {
    cursor: pointer;
    opacity: 0.8;
  }

  .mothersday2026__wrapper .products a:hover {
    img {
      transform: scale(1.1);
      transition: transform 0.4s;
    }
  }
}

@media (min-width: 481px) {
  .mothersday2026__wrapper {
    .btn {
      inline-size: fit-content;
    }
    .sp-only {
      display: none;
    }

    .pc-only {
      display: block;
    }

    .products {
      inline-size: 100%;
    }
  }
}