@charset "UTF-8";

@import url("_common.css");
@import url("_utility.css");

body.p-infection{
  & .l-contents.--01{
    & ul{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 40px 20px;
      margin-block-start: clamp(3.75rem, 2.689rem + 4.53vw, 7.5rem); /* 60px 120px */
      & > li{
        text-align: center;
        @media not all and (max-width: 750px) {
          width: calc((100% - 20px) / 2);
        }
        @media (max-width: 750px) {
          width: 100%;
        }
        & > h3{
          font-size: clamp(1rem, 0.894rem + 0.45vw, 1.375rem); /* 16px 22px */
          font-size: clamp(1.25rem, 1.215rem + 0.15vw, 1.375rem); /* 20px 22px */
          font-weight: 500;
        }
        & > .arrow{
          display: block;
          margin-block: 16px;
          margin-inline: auto;
          background-color: var( --color-black-primary);
          position: relative;
          @media not all and (max-width: 750px) {
            width: 1px;
            height: 50px;
          }
          @media (max-width: 750px) {
            width: 1px;
            height: 25px;
          }
          &::before,
          &::after{
            display: block;
            content: "";
            width: 1px;
            background-color: var(--color-black-primary);
            transform-origin: bottom center;
            position: absolute;
            bottom: 0;
            left: 0;
            @media not all and (max-width: 750px) {
              height: 38px;
            }
            @media (max-width: 750px) {
              height: 19px;
            }
          }
          &::before{
            rotate: 50deg;
          }
          &::after{
            rotate: -50deg;
          }
        }
        & > .c-button{
          width: 80%;
          margin-inline: auto;
          line-height: 1.4;
          @media (max-width: 750px) {
            width: 100%;
            font-size: 16px;
          }
        }
      }
    }
  } /* 01 */
}