@charset "utf-8";


.edit-area {
  &.benefits {
    padding-bottom: 24rem;

    @media screen and (max-width: 767px) {
      padding-bottom: 12rem;
    }

    .local-list {
      display: flex;
      flex-wrap: wrap;
      gap: 2.4rem 4.4rem;
      margin-bottom: 13.5rem;

      @media screen and (max-width: 767px) {
        margin-bottom: 3rem;
        gap: 1rem;
      }

      & li {
        width: calc(100% / 3 - 4.4rem * 2 / 3);
        @media screen and (max-width: 767px) {
          width: 100%;
        }

        .common-btn {
          .cover {
            padding-left: 3.3rem;
            width: 100%;
            height: 8.4rem;
            font-size: 2rem;
            border-radius: 4.2rem;

            @media screen and (max-width: 767px) {
              padding-left: 2rem;
              font-size: 1.5rem;
              height: 5rem;
            }

            &:after{
              transform: rotate(90deg) translateX(-50%);
            }
          }
        }
      }

    }

    .benefits-list {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      gap: 6rem;

      @media screen and (max-width: 767px) {
        gap: 2rem;
      }

      >li {
        padding: 5rem 7rem;
        border-radius: 2rem;
        background: #FFF;
        @media screen and (max-width: 767px) {
          padding: 2rem;
          border-radius: 1rem;
        }
      }

      .list-title {
        &.type01 {
          margin-bottom: 5rem;

          @media screen and (max-width: 767px) {
            margin-bottom: 2rem;
          }

          .title-en {
            margin-bottom: 1.6rem;
            font-family: 'Roboto Flex';
            font-weight: 600;
            font-size: 9.4rem;
            letter-spacing: 0.04em;
            @media screen and (max-width: 767px) {
              margin-bottom: 1rem;
              font-size: 2.8rem;
            }
          }
          .title-jp {
            font-weight: 700;
            font-size: 3rem;
            letter-spacing: 0.04em;
            color: #0033B3;
            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
              line-height: 1.4;
            }
          }
        }

        &.type02 {
          margin-bottom: 0.8rem;
          font-weight: 700;
          font-size: 2rem;
          letter-spacing: 0.08em;
          color: #0033B3;
          @media screen and (max-width: 767px) {
            font-size: 1.6rem;
          }
        }
      }

      .list-detail {
        &.type01 {
          display: flex;
          flex-direction: column;
          margin: 3rem 0;
          gap: 3rem;

          @media screen and (max-width: 767px) {
            margin: 2rem 0;
            gap: 1rem;
          }

          &:last-child {
            margin-bottom: 0;
          }

          .detail-title {
            position: relative;
            padding-left: 2.4rem;
            font-weight: 700;
            font-size: 2rem;
            letter-spacing: 0.08em;
            @media screen and (max-width: 767px) {
              padding-left: 1.8rem;
              font-size: 1.6rem;
              line-height: 1.4;
            }

            &:before {
              content: "";
              position: absolute;
              left: 0;
              top: 0.3rem;
              z-index: 1;
              display: block;
              width: 1.4rem;
              height: 1.4rem;
              border-radius: 50%;
              background: linear-gradient(141.29deg, #000000 18.32%, #140470 34.29%, #0638BB 59.63%, #2691D7 78.7%);
            }
            @media screen and (max-width: 767px) {
              &:before {
                top: 0.7rem;
                width: 1rem;
                height: 1rem;
              }
            }
          }

          .detail-description {
            margin-top: 1.8rem;
            padding-left: 2.4rem;
            font-weight: 400;
            line-height: 1.62;
            letter-spacing: 0.06em;
            font-feature-settings: 'palt' on;
            @media screen and (max-width: 767px) {
              margin-top: 0.5rem;
              padding-left: 1.8rem;
            }
          }
        }

        &.type02 {
          margin-bottom: 2rem;
          font-weight: 400;
          line-height: 1.62;
          letter-spacing: 0.06em;
          font-feature-settings: 'palt' on;
          @media screen and (max-width: 767px) {
            margin-bottom: 1.2rem;
          }
        }
      }
    }
  }
}