media_02: Reverse

// =====================================================================================
//
// media_02
//
// =====================================================================================

@use 'scss/global' as g;

.media_02 {
  &.media_02-reverse {
    .media_02--container_child_image {
      order: 0;

      @include g.mq('tablet') {
        order: 2;
      }

      @include g.mq('pc') {
        order: 2;
      }
    }

    .media_02--container_child_body {
      order: 0;

      @include g.mq('tablet') {
        order: 1;
      }

      @include g.mq('pc') {
        order: 1;
      }
    }
  } // &.media_02-reverse

  .media_02--container {
    position: relative;
    background-color: #fff;

    @include g.mq('sp') {
      padding-top: 8.54572%;
      padding-bottom: 8.54572%;
    }

    @include g.mq('tablet') {
      padding-top: 16%;
      padding-bottom: 26.4%;
    }

    @include g.mq('pc') {
      padding-top: 10%;
      padding-bottom: 10%;
    }

    .media_02--container_child {
      @include g.mq('tablet') {
        display: flex;
        justify-content: space-between;
      }

      @include g.mq('pc') {
        display: flex;
        justify-content: space-between;
      }

      .media_02--container_child_image,
      .media_02--container_child_body {
        @include g.mq('tablet') {
          display: flex;
          width: 50%;
        }

        @include g.mq('pc') {
          display: flex;
          width: 50%;
        }
      }

      .media_02--container_child_image {
        @include g.mq('tablet') {
          align-items: flex-start;
        }

        picture,
        img {
          display: block;
          width: 100%;
          height: auto;
        }
      }

      .media_02--container_child_body {
        @include g.mq('tablet') {
          align-items: center;
        }

        @include g.mq('pc') {
          align-items: center;
        }

        .media_02--container_child_body_adjust {
          @include g.mq('sp') {
            padding-top: 4.49775%;
            padding-right: 4.58165%;
            padding-left: 4.58165%;
          }

          @include g.mq('tablet') {
            padding-right: 8.33333%;
            padding-left: 8.33333%;
          }

          @include g.mq('pc') {
            padding-right: 4.96875%;
            padding-left: 4.96875%;
          }
        }

        .media_02--container_child_body_title {
          margin-bottom: 2.2rem;
          font-size: 2.2rem;
          font-weight: 700;
          letter-spacing: 0.3rem;

          @include g.mq('sp') {
            margin-bottom: 3%;
            line-height: 1.45;
          }

          @include g.mq('tablet') {
            margin-bottom: 6%;
            line-height: 1.5;
          }
        }

        .media_02--container_child_body_paragraph {
          margin-bottom: 4.4rem;
          font-size: 1.6rem;
          line-height: 1.7;
          letter-spacing: 0.1rem;

          @include g.mq('sp') {
            margin-bottom: 8%;
          }

          @include g.mq('tablet') {
            margin-bottom: 11%;
          }
        }

        .media_02--container_child_body_button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 260px;
          height: 64px;
          font-size: 1.6rem;

          @include g.mq('sp') {
            margin-right: auto;
            margin-left: auto;
          }

          &:link,
          &:visited,
          &:hover,
          &:active {
            color: #fff;
            background-color: g.$color_primary;
          }
        } // .media_02--container_child_body_button
      } // .media_02--container_child_body
    } // .media_02--container_child
  } // .media_02--container
} // .media_02