@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/contribution/mv.png');
  }

  /* =====================
    Contribution
  ===================== */
  .contribution {
    position: relative;
    padding-block: 130px 162px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 93 * 1vw) calc((100 / 390) * 130 * 1vw);
    }

    .u-inner {
      position: relative;

      .catch {
        font-family: var(--serif);
        font-size: 38px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        margin-block-start: 52px;
        margin-inline: auto;

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 28 * 1vw);
          margin-block-start: calc((100 / 390) * 48 * 1vw);
        }
      }

      & > .description {
        margin-block-start: 50px;
        text-align: center;
        font-weight: bold;
        color: #111;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 32 * 1vw);
          text-align: left;
        }
      }

      .action-list {
        margin-block-start: 60px;
        border-block-start: 1px solid #b7b7b7;
        counter-reset: number;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 56 * 1vw);
        }

        .item {
          position: relative;
          padding-block: 50px;
          border-block-end: 1px solid #b7b7b7;

          @media only screen and (width <= 768px) {
            padding-block: calc((100 / 390) * 48 * 1vw);
          }

          .wrap {
            display: block flex;
            align-items: start;
            gap: 104px;

            @media only screen and (width <= 768px) {
              flex-direction: column;
              gap: calc((100 / 390) * 32 * 1vw);
            }

            .img {
              display: block flow;
              flex-shrink: 0;
              border-radius: 10px;

              @media only screen and (width <= 768px) {
                border-radius: calc((100 / 390) * 10 * 1vw);
                inline-size: 100%;
              }
            }

            .unit {
              .title {
                font-family: var(--serif);
                font-size: 23px;
                font-weight: 600;
                display: block flex;
                align-items: center;
                gap: 16px;

                @media only screen and (width <= 768px) {
                  font-size: calc((100 / 390) * 20 * 1vw);
                  gap: calc((100 / 390) * 16 * 1vw);
                }

                &::before {
                  counter-increment: number;
                  content: '0' counter(number);
                  font-family: var(--pop);
                  font-size: 50px;
                  font-weight: 400;
                  line-height: 2.4;
                  color: var(--secondary);
                  flex-shrink: 0;
                }

                @media only screen and (width <= 768px) {
                  &::before {
                    font-size: calc((100 / 390) * 40 * 1vw);
                    line-height: 1;
                  }
                }
              }

              @media only screen and (width <= 768px) {
                .description {
                  margin-block-start: calc((100 / 390) * 24 * 1vw);
                }
              }

              .list {
                list-style-type: decimal;

                .indent {
                  margin-inline-start: 1.5em;

                  @media only screen and (width <= 768px) {
                    margin-block-start: calc((100 / 390) * 24 * 1vw);
                  }
                }
              }
            }
          }

          &:nth-child(even) {
            .wrap {
              flex-direction: row-reverse;

              @media only screen and (width <= 768px) {
                flex-direction: column;
              }
            }
          }
        }
      }
    }
  }
}