.section01 {
  & .list02 {
    gap: 0.625rem; /* 10 / 16 */
  }
  & .item01 {
    &:not(:last-child) {
      margin-bottom: 2rem; /* 32 / 16 */
    }
  }
  & .heading01 {
    font-size: 1.375rem; /* 22 / 16 */
    margin-bottom: 0.75rem; /* 12 / 16 */
  }
  & .link01 {
    width: 11.25rem; /* 180 / 16 */
    padding: 0.75rem 0.9375rem; /* 12/16 15/16 */
    position: relative;
    font-size: 1.125rem; /* 18 / 16 */
    &::after {
      content: "";
      position: absolute;
      z-index: 1;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      width: 0.625rem; /* 12 / 16 */
      height: 0.75rem; /* 10 / 16 */
      background: #F9F9F9;
      right: 0.9375rem; /* 15 / 16 */
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
    }
  }
}
@media (max-width: 768px) {
  .section01 {
    & .list02 {
      gap: 1.28rem; /* 10 / 7.8125 */
      height: 0;
      overflow: hidden;
      transform: scaleY(0);
      padding: 0;
      transition: all 0.3s ease 0s;
      transform-origin: top;
      position: relative;
      &.active {
        transform: scaleY(1);
        padding: 1rem 0;
        height: auto;
        overflow: visible;
      }
    }
    & .item01 {
      position: relative;
      &:not(:last-child) {
        margin-bottom: 3.6rem; /* 32 / 7.8125 */
      }
      &::after {
        position: absolute;
        content: "";
        width: 100%;
        left: 0;
        right: 0;
        bottom: -1.6rem;
        background: #C83337;
        height: 1px;
      }
    }
    & .item02 {
      /* 10 / 7.8125 = 1.28 */
      width: calc((100% - 1.28rem * 2) / 3);
    }
    & .heading01 {
      font-size: 2.304rem; /* 18 / 7.8125 */
      margin-bottom: 1rem; /* 10 / 7.8125 */
      position: relative;
      transition: all 0.3s ease 0s;
      transform-origin: top;
      &::after {
        content: "";
        position: absolute;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        background: #C83337;
        width: 1.58rem; /* 10 / 7.8125 */
        height: 1.324rem;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
      }
      &.active::after{
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
      }
    }
    & .link01 {
      width: 100%;
      font-size: 1.792rem; /* 14 / 7.8125 */
      padding: 0.96rem 1.28rem; /* 7.5/7.8125 10/7.8125 */
      &::after {
        width: 1.024rem; /* 10 / 7.8125 */
        height: 1.28rem; /* 8 / 7.8125 */
        right: 1.28rem; /* 10 / 7.8125 */
      }
    }
  }
}

.section02 {
  & .list01 {
    gap: 0.625rem; /* 10 / 16 */
    margin-bottom: 2rem; /* 50 / 16 */
  }
  & .list03 {
    gap: 0.625rem; /* 10 / 16 */
  }
  & .item01 {
    /* 10 / 16 = 0.625 */
    min-width: calc((100% - 0.625rem * 7) / 8);
  }
  & .item02 {
    &:not(:last-child) {
      margin-bottom: 2rem; /* 32 / 16 */
    }
  }
  & .item03 {
    /* 10 / 16 = 0.625 */
    width: calc((100% - 0.625rem) / 2);
    border: 1px solid #C83337;
    padding: 0.9375rem 0.9375rem 1.25rem; /* 15/16 15/16 20/16 */
    position: relative;
    gap: 1.25rem; /* 20 / 16 */
  }
  & .wrap03 {
    gap: 0.75rem; /* 12 / 16 */
    margin-bottom: 0.3125rem; /* 5 / 16 */
  }
  & .texts01 {
    flex: 1;
  }
  & .heading01 {
    font-size: 1.375rem; /* 22 / 16 */
    margin-bottom: 0.75rem; /* 12 / 16 */
  }
  & .heading02 {
    margin-bottom: 0.625rem; /* 10 / 16 */
    font-size: 1.25rem; /* 20 / 16 */
  }
  & .text01 {
    font-size: 1.125rem; /* 18 / 16 */
  }
  & .text02 {
    font-size: 0.875rem; /* 14 / 16 */
  }
  & .text03 {
    font-size: 1rem; /* 16 / 16 */
    padding: 0.3125rem 0.625rem; /* 5/16 10/16 */
  }
  & .link01 {
    width: 100%;
    padding: 0.625rem 0.75rem; /* 10/16 12/16 */
    font-size: 1rem; /* 16 / 16 */
  }
  & .link02 {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  & .img01 {
    width: 2.8125rem; /* 45 / 16 */
  }
}

@media (max-width: 768px) {
  .section02 {
    & .list01 {
      gap: 1.28rem; /* 10 / 7.8125 */
    }
    & .list03 {
      gap: 1.28rem; /* 10 / 7.8125 */
    }
    & .item01 {
      /* 10 / 7.8125 = 1.28 */
      min-width: calc((100% - 1.28rem * 7) / 8);
    }
    & .item02 {
      &:not(:last-child) {
        margin-bottom: 3.84rem; /* 30 / 7.8125 */
      }
    }
    & .item03 {
      width: 100%;
      padding: 1.92rem 1.92rem 2.56rem; /* 15/7.8125 15/7.8125 20/7.8125 */
      gap: 2.56rem; /* 20 / 7.8125 */
    }
    & .wrap01 {
      margin-bottom: 2.56rem; /* 20 / 7.8125 */
    }

    & .wrap03 {
      gap: 1.536rem; /* 12 / 7.8125 */
      margin-bottom: 0.64rem; /* 5 / 7.8125 */
    }
    & .heading01 {
      font-size: 2.56rem; /* 20 / 7.8125 */
      margin-bottom: 1.536rem; /* 12 / 7.8125 */
    }
    & .heading02 {
      margin-bottom: 1.28rem; /* 10 / 7.8125 */
      font-size: 2.304rem; /* 18 / 7.8125 */
    }
    & .text01 {
      font-size: 2.048rem; /* 16 / 7.8125 */
    }
    & .text02 {
      font-size: 1.792rem; /* 14 / 7.8125 */
    }
    & .text03 {
      font-size: 1.792rem; /* 14 / 7.8125 */
      padding: 0.64rem 1rem; /* 5 / 7.8125, 1remはそのまま */
      text-align: center;
    }
    & .link01 {
      padding: 0.64rem 1.28rem; /* 5/7.8125 10/7.8125 */
      font-size: 1.792rem; /* 14 / 7.8125 */
    }
    & .img01 {
      width: 5.12rem; /* 40 / 7.8125 */
    }
  }
}