:root {
  --_width: 960px;
  --btn-bg: #2f1350;
}
body {
  margin: 0;
  padding: 0;
}
.anniversary20__wrapper {
  section {
    container-type: inline-size;
    inline-size: min(100%, var(--_width)) !important;
    margin-inline: auto;
    margin-block-end: 0;
  }
  a {
    text-decoration: none;
    transition: all 0.4s;
  }
  figure,
  img {
    inline-size: min(100%, var(--_width)) !important;
    max-inline-size: fit-content;
    block-size: auto;
    vertical-align: bottom;
    margin: 0;
    margin-inline: auto;
    padding: 0;
  }

  .fv__link {
    position: absolute;
    display: block;
    inline-size: 50%;
    inset-block-end: calc((105 / 960) * 100%);
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
  .fv__link img {
    inline-size: 100%;
  }

  .special-project {
    container-type: inline-size;
    .project_btn_grid {
      --_column: 2;
      position: absolute;
      inset-block-end: calc((70 / 960) * 100%);
      inset-inline-start: 50%;
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: repeat(var(--_column), 1fr);
      gap: clamp(12px, 2cqi, 24px);
      inline-size: 80%;
    }
    @container (600px <= inline-size) {
      .project_btn_grid {
        --_column: 3;
        inset-block-end: calc((5 / 960) * 100%);
      }
    }
    a.project_btn {
      --_duration: 0.3s;
      --_padding: calc(16 * 1em / 16);
      --leading-trim: calc((1em - 1lh) / 2);

      display: inline grid;
      grid-template-columns: 1fr auto 1fr;
      column-gap: calc(8 * 1em / 16);
      align-items: center;
      padding-block: calc(var(--_padding) - 0.5rem + var(--leading-trim));
      padding-inline: var(--_padding);
      font-size: 0.9em;
      clip-path: inset(0 round 100vmax);
      border: 1px solid var(--btn-bg);
      font-weight: bold;
      background-color: color-mix(in sRGB, var(--btn-bg), white var(--_lighten, 0%));
      color: #fff;
      transition: background-color var(--_duration);
      inline-size: 80%;

      &::before {
        content: "";
      }

      &::after {
        content: "";
        justify-self: end; /* 右寄せ */
        align-self: start;
        inline-size: calc(8 * 1em / 16);
        aspect-ratio: 1;
        /* border-block-start: 2px solid;
        border-inline-end: 2px solid;
        rotate: 135deg; */
        background-color: #fff;

        /* 大きさ */
        inline-size: 0.8rem;
        block-size: 0.8rem;

        /* くの字（下向き） */
        clip-path: polygon(100% 40%, 50% 90%, 0 40%, 10% 30%, 50% 70%, 90% 30%);
        /* inset-block-start: 1.1rem; */
        /* position: absolute; */

        translate: 0 var(--_translate, 30%);
        transition: translate var(--_duration);
      }

      &:any-link:hover {
        @media (any-hover: hover) {
          --_lighten: 20%;
          --_translate: 50%;
        }
      }

      &:focus-visible {
        --_lighten: 20%;
        --_translate: 50%;
      }
    }

    @container (600px <= inline-size) {
      a.project_btn {
        font-size: 1.4em;
        &::after {
          inline-size: 1.2rem;
          block-size: 1.2rem;
        }
      }
    }
  }

  .bm-serialization {
    margin-block: 3rem;
    .bm-serialization__title {
      font-size: 1.2em;
      margin-block-end: 1rem;
      font-weight: bold;
      inline-size: fit-content;
      margin-inline: auto;
    }
    .bm-serialization__image {
      img {
        inline-size: 100%;
        block-size: auto;
      }
    }
  }

  .relative {
    position: relative;
  }

  .pc-only {
    display: none;
  }
}

@media (any-hover: hover) {
  .anniversary20__wrapper {
    a:hover {
      cursor: pointer;
      transition: all 0.8s;
    }
  }
}

@media (min-width: 481px) {
  .anniversary20__wrapper {
    .sp-only {
      display: none;
    }

    .pc-only {
      display: block;
    }
  }
}