@media print, screen and (min-width: 769px) {
  article {
    background: url(../../common/image/common/body_parts.svg) 0 380px no-repeat, url(../../common/image/common/body_parts.svg) 0 1938px no-repeat; }
    article section:nth-of-type(1),
    article section:nth-of-type(2),
    article section:nth-of-type(3),
    article section:nth-of-type(4) {
      max-width: 1200px;
      width: 90%; }
    article section:last-of-type {
      margin-bottom: 0 !important; }
    article section.headline {
      position: relative;
      max-width: 800px;
      width: 90%;
      margin: 0 auto 120px; }
      article section.headline h3 {
        font-size: 1.75em;
        line-height: 1.5em;
        font-weight: bold;
        margin-bottom: 30px;
        text-align: center; }
      article section.headline p {
        display: block;
        font-size: 1.1em;
        line-height: 1.85em;
        letter-spacing: 0.1em;
        text-align: center; }
    article section.item {
      position: relative;
      margin: 0 auto 60px; }
      article section.item figure > a {
        background: #000;
        display: block; }
        article section.item figure > a > img {
          position: relative;
          z-index: 0;
          width: 100%;
          -webkit-transition: all .3s ease-in-out;
          -moz-transition: all .3s ease-in-out;
          -ms-transition: all .3s ease-in-out;
          -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out; }
        article section.item figure > a > img:hover {
          opacity: 0.75; }
      article section.item figure figcaption {
        width: 40%;
        max-width: 450px;
        background: #000;
        position: relative;
        left: 30px;
        top: -30px;
        padding: 30px;
        height: 250px; }
        article section.item figure figcaption h4 {
          margin-bottom: 15px;
          font-size: 1.75em;
          font-weight: bold;
          color: #fff; }
          article section.item figure figcaption h4 img {
            margin: 0 10px; }
        article section.item figure figcaption p {
          color: #fff;
          font-size: 1.2em; }
      article section.item > div {
        width: 55%;
        max-width: 700px;
        float: right;
        position: relative;
        top: -203px;
        margin-bottom: -203px; }
        article section.item > div h5 {
          margin-bottom: 15px;
          font-size: 1.5em;
          font-weight: bold; }
        article section.item > div p {
          font-size: 1em;
          line-height: 1.75em; }
      article section.item > a {
        width: 34%;
        max-width: 390px;
        display: block;
        height: 45px;
        border-radius: 22.5px;
        margin: 0 auto;
        background: #7966C1;
        font-size: 1.1em;
        font-weight: bold;
        color: #fff;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        text-decoration: none;
        text-align: center;
        line-height: 45px;
        clear: both;
        position: absolute;
        z-index: 10;
        left: 60px;
        bottom: 60px; }
      article section.item > a:hover {
        background: #fff;
        color: #7966C1; } }
@media screen and (max-width: 768px) {
  article {
    padding-bottom: 60px; }
    article section {
      width: 90%;
      margin: 0 auto 60px; }
    article section:last-of-type {
      margin-bottom: 0 !important; }
    article section.headline {
      position: relative;
      width: 90%;
      margin: 0 auto 60px; }
      article section.headline h3 {
        font-size: 1.3em;
        line-height: 1.3em;
        font-weight: bold;
        margin-bottom: 30px;
        text-align: center; }
      article section.headline p {
        display: block;
        font-size: 1em;
        line-height: 1.85em;
        text-align: center; }
    article section.item {
      position: relative; }
      article section.item figure {
        margin-bottom: 30px; }
        article section.item figure > a {
          display: block; }
          article section.item figure > a > img {
            position: relative;
            z-index: 0;
            width: 100%; }
          article section.item figure > a > img:hover {
            opacity: 0.75; }
        article section.item figure figcaption {
          width: 100%;
          background: #000;
          padding: 15px;
          position: relative; }
          article section.item figure figcaption h4 {
            margin-bottom: 15px;
            font-size: 1.5em;
            font-weight: bold;
            color: #fff;
            text-align: center; }
            article section.item figure figcaption h4 img {
              margin: 0 10px; }
          article section.item figure figcaption p {
            color: #fff;
            font-size: 1.2em;
            text-align: center; }
      article section.item > div {
        width: 90%;
        position: relative;
        margin: 0 auto 30px; }
        article section.item > div h5 {
          margin-bottom: 15px;
          font-size: 1.25em;
          font-weight: bold; }
        article section.item > div p {
          font-size: 0.9em;
          line-height: 1.5em; }
      article section.item > a {
        width: 100%;
        display: block;
        height: 45px;
        border-radius: 22.5px;
        background: #7966C1;
        font-size: 1.1em;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        text-align: center;
        line-height: 45px;
        clear: both; } }