// =====================================================================================
//
// media_03
//
// =====================================================================================

@use 'scss/global' as g;

.media_03 {
  &.media_03-reverse {
    .media_03--container {
      .media_03--container_child {
        @include g.mq('tablet') {
          justify-content: flex-end;
        }

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

      .media_03--container_child_body {
        @include g.mq('tablet') {
          right: auto;
          left: 0;
        }

        @include g.mq('pc') {
          right: auto;
          left: 0;
        }
      }
    } // .media_03--container
  } // &.media_03-reverse

  .media_03--container {
    position: relative;

    @include g.mq('sp') {
      padding: 18.6668% 0;
    }

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

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

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

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

      .media_03--container_child_image,
      .media_03--container_child_body {
        @include g.mq('tablet') {
          display: flex;
          align-items: center;
        }

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

      .media_03--container_child_image {
        @include g.mq('tablet') {
          width: 67.3913%;
        }

        @include g.mq('pc') {
          width: 65.51724%;
        }

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

      .media_03--container_child_body {
        @include g.mq('sp') {
          position: relative;
          z-index: 1;
          padding-right: 4.1335%;
          padding-left: 4.1335%;
          margin-top: -5.997%;
        }

        @include g.mq('tablet') {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
          width: 44.02173%;
          height: 100%;
        }

        @include g.mq('pc') {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
          width: 48.27586%;
          height: 100%;
        }

        .media_03--container_child_body_adjust {
          position: relative;
          padding: 8.75% 7.14285%;
          background-color: #fff;
        }

        .media_03--container_child_body_title {
          margin-bottom: 2.2rem;
          font-size: 2.2rem;
          font-weight: 700;
          line-height: 1.25;
          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_03--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_03--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_03--container_child_body_button
      } // .media_03--container_child_body
    } // .media_03--container_child
  } // .media_03--container
} // .media_03