// =====================================================================================
//
// media_01
//
// =====================================================================================

@use 'scss/global' as g;

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

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

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

    .media_01--container_child_body {
      order: 0;

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

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

  .media_01--container {
    padding: 18.6668% 4.1335%;
    background-color: #fff;

    @include g.mq('tablet') {
      padding: 14.6668% 2.0833%;
    }

    @include g.mq('pc') {
      padding: 143px 4.6875%;
    }

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

      @include g.mq('pc') {
        display: flex;
        justify-content: space-between;
        max-width: 1160px;
        margin-right: auto;
        margin-left: auto;
      }

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

        @include g.mq('pc') {
          display: flex;
          align-items: center;
          width: 48.27%;
        }
      }

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

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

      .media_01--container_child_body {
        flex-wrap: wrap;

        .media_01--container_child_body_title,
        .media_01--container_child_body_paragraph {
          width: 100%;
        }

        .media_01--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_01--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_01--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_01--container_child_body_button
      } // .media_01--container_child_body
    } // .media_01--container_child
  } // .media_01--container
} // .media_01