@charset "UTF-8";

html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  background:#FFECFC;
}

article, aside, footer, header, nav, section {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

h2 {
  font-size:0;
  margin:0 0 0;
}


figcaption, figure, main {
  display: block
}

figure {
  margin: 1em 40px
}

hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:active, a:hover {
  outline-width: 0
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b, strong {
  font-weight: inherit
}

b, strong {
  font-weight: bolder
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em
}

dfn {
  font-style: italic
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

.content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center
}

.method .step {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding:20px 0 20px 10px;
  background:url(../img/back.png) repeat;
  border-bottom:20px #E62E8B solid;
}

.method .step:after {
  visibility: hidden;
  display: block;
  content: " ";
  clear: both;
  height: 0
}

* html .method .step {
  height: 1px
}

.method .step-unit {
  width: 364px;
  margin: 0 0 25px;
  vertical-align: top;
  text-align: left
}

.method .step-unit:nth-child(odd) {
  clear: both;
  float: left
}

.method .step-unit:nth-child(even) {
  float: right
}


.method .step-img {
  margin-bottom: 10px;
  text-align: right
}

.method .step-desc {
  font-size: 68.75%;
  line-height: 1.71429;
  max-width: 364px;
  margin-left: auto;
  padding-left: 1em;
  text-indent: -1em
}


.step .step01.step-unit{
float:right;
}
.step .step02.step-unit{
float:left;
}



@media screen and (max-width:768px){

.content {
  max-width:100%;
  margin: 0 auto;
  text-align: center
}

.method .step {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  padding:20px 0 20px 10px;
  background:url(../img/back.png) repeat;
}

  .method {
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    background-size: 100% auto
  }
  .method .heading {
    margin-bottom: 25px
  }
  .method .step {
      padding-bottom: 4.6875%;
	  }
  .content h2 img{
    width:100%;
    margin: 0 auto
  }
  .method .lead {
    font-size: 75%;
    line-height: 1.75
  }

  .method .step-unit {
    display: block;
    width: 90%
  }
  .method .step-unit:nth-child(even), .method .step-unit:nth-child(odd) {
    float: none;
    margin: 0 auto 8.59375%
  }
  .method .step-head {
    text-align: center
  }

  .method .step-img {
    margin: 0 auto 10px
  }
  .method .step-img img {
    width: 100%
  }
  .method .step-desc {
    width: 80%;
    margin: 0 auto;
    font-size: 75%
  }
}



@media screen and (max-width:640px){

.content {
  max-width:100%;
  margin: 0 auto;
  text-align: center
}

.method .step {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  padding:20px 0 20px 10px;
  background:url(../img/back.png) repeat;
}
  .method {
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    background-size: 100% auto
  }
  .method .heading {
    margin-bottom: 25px
  }
  .method .step {
      padding-bottom: 4.6875%;
	  }
  .content h2 img{
    width:100%;
    margin: 0 auto
  }
  .method .lead {
    font-size: 75%;
    line-height: 1.75
  }

  .method .step-unit {
    display: block;
    width: 90%
  }
  .method .step-unit:nth-child(even), .method .step-unit:nth-child(odd) {
    float: none;
    margin: 0 auto 8.59375%
  }
  .method .step-head {
    text-align: center
  }

  .method .step-img {
    margin: 0 auto 10px
  }
  .method .step-img img {
    width: 100%
  }
  .method .step-desc {
    width: 80%;
    margin: 0 auto;
    font-size: 75%
  }
}