/* CSS Document */
/*---------------
	PURCHASE
---------------*/
#purchase {
  background: #ddf3fc;
  padding-bottom: 120px; }
  @media only screen and (max-width: 1199px) {
    #purchase {
      padding: 0 5% 60px; } }
  #purchase .lower-main {
    width: 1000px;
    margin-bottom: 80px; }
    @media only screen and (max-width: 1199px) {
      #purchase .lower-main {
        width: auto;
        max-width: 800px;
        padding: 60px 5%;
        margin: 0 auto; } }
    #purchase .lower-main h2 {
      font-size: 5em;
      font-weight: 500; }
      @media only screen and (max-width: 1199px) {
        #purchase .lower-main h2 {
          font-size: 3em; } }
    #purchase .lower-main p {
      font-size: 1.8em;
      letter-spacing: .1em;
      margin-top: 1em; }
      @media only screen and (max-width: 1199px) {
        #purchase .lower-main p {
          font-size: 1.6em;
          line-height: 1.5; } }
  #purchase .contents-area {
    width: 1000px;
    margin: 0 auto; }
    @media only screen and (max-width: 1199px) {
      #purchase .contents-area {
        width: auto;
        max-width: 800px; } }
    #purchase .contents-area section {
      background: #fff;
      padding: 50px 60px;
      border-radius: 10px;
      position: relative; }
      @media only screen and (max-width: 1199px) {
        #purchase .contents-area section {
          padding: 30px 5%;
          overflow: hidden; } }
      #purchase .contents-area section h3 {
        color: var(--text-color);
        font-size: 4em;
        letter-spacing: .1em;
        margin-bottom: 30px; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section h3 {
            font-size: 3em; } }
      #purchase .contents-area section p {
        width: 460px;
        font-size: 1.8em;
        line-height: 2; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section p {
            width: auto;
            font-size: 1.6em;
            line-height: 1.5; } }
      #purchase .contents-area section img {
        position: absolute; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section img {
            position: static;
            width: 100% !important;
            margin: 30px auto 0; } }
      #purchase .contents-area section.step01 img {
        width: 375px;
        top: 35px;
        right: 45px; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section.step01 img {
            max-width: 375px; } }
      #purchase .contents-area section.step02 img {
        width: 425px;
        right: 0;
        bottom: 0; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section.step02 img {
            max-width: 425px; } }
      #purchase .contents-area section.step03 img {
        width: 500px;
        right: 35px;
        bottom: 0; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section.step03 img {
            max-width: 500px;
            margin: 0 0 -20px -5vw; } }
      #purchase .contents-area section.step04 img {
        width: 350px;
        top: 30px;
        right: 50px; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section.step04 img {
            max-width: 350px; } }
      #purchase .contents-area section.step05 img {
        width: 330px;
        top: 20px;
        right: 60px; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section.step05 img {
            max-width: 330px; } }
      #purchase .contents-area section.step06 img {
        width: 400px;
        top: 30px;
        right: 20px; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area section.step06 img {
            max-width: 400px; } }
    #purchase .contents-area .arrow {
      width: 70px;
      margin: 30px auto; }
    #purchase .contents-area a {
      display: block;
      width: 500px;
      background: #6185bc;
      text-align: center;
      color: #fff;
      font-size: 3em;
      line-height: 110px;
      margin: 120px auto 0;
      position: relative; }
      @media only screen and (max-width: 1199px) {
        #purchase .contents-area a {
          width: auto;
          font-size: 2em;
          line-height: 60px;
          max-width: 500px;
          margin: 60px auto 0; } }
      #purchase .contents-area a i {
        position: absolute;
        top: 40px;
        right: .5em; }
        @media only screen and (max-width: 1199px) {
          #purchase .contents-area a i {
            top: 20px;
            right: 1em; } }
      #purchase .contents-area a:hover {
        opacity: .8; }