/* CSS Document */
.twoColumn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.outline {
  margin-bottom: 40px; }

article {
  width: 50%; }

.titleBox h2 {
  margin: 0 auto;
  color: #946134;
  text-align: center; }
  .titleBox h2.ribbon_a {
    background: url(../img/draft/midashi_line.png) no-repeat; }
  .titleBox h2.ribbon_b {
    background: url(../img/draft/midashi_db.png) no-repeat; }
  .titleBox h2.ribbon_a, .titleBox h2.ribbon_b {
    background-size: 500px;
    width: 500px;
    height: 50px; }

.howtoNo {
  font-size: 0.7em;
  font-weight: normal;
  background: url(../img/back_howto.gif) no-repeat center center;
  background-size: contain;
  width: 110px;
  height: auto;
  padding: 10px;
  margin-right: 5px; }

.sp_only {
  display: none; }

#step_lineAbout, #step_dbAbout {
  border-left: #f8d9ae solid 5px;
  margin-left: 25px;
  padding-left: 40px;
  position: relative; }
  #step_lineAbout img, #step_dbAbout img {
    width: 100%;
    height: auto;
    max-width: 300px;
    display: block;
    margin: 0 auto; }
    #step_lineAbout img.gra, #step_dbAbout img.gra {
      -webkit-box-shadow: 3px 3px 10px #aca8a8;
      box-shadow: 3px 3px 10px #aca8a8; }
  #step_lineAbout .step1, #step_lineAbout .step2, #step_lineAbout .step3, #step_lineAbout .step4, #step_lineAbout .step5, #step_lineAbout .step6, #step_dbAbout .step1, #step_dbAbout .step2, #step_dbAbout .step3, #step_dbAbout .step4, #step_dbAbout .step5, #step_dbAbout .step6 {
    margin-bottom: 50px; }

#lineDraft .titleBox h2, #dropboxDraft .titleBox h2 {
  font-size: 2.0em; }
  #lineDraft .titleBox h2 .title, #dropboxDraft .titleBox h2 .title {
    position: relative;
    top: 25px; }

#lineDraft .titleBox h3, #dropboxDraft .titleBox h3 {
  font-size: 2em;
  line-height: 1.1em;
  margin-bottom: 20px; }

#lineDraft img, #dropboxDraft img {
  /*stepicon*/ }
  #lineDraft img.s1, #lineDraft img.s2, #lineDraft img.s3, #lineDraft img.s4, #lineDraft img.s5, #lineDraft img.s6, #dropboxDraft img.s1, #dropboxDraft img.s2, #dropboxDraft img.s3, #dropboxDraft img.s4, #dropboxDraft img.s5, #dropboxDraft img.s6 {
    width: 60px;
    position: absolute;
    z-index: 5; }

#lineDraft {
  margin-left: 30px; }
  #lineDraft .step1 {
    position: relative; }
  #lineDraft .s1 {
    position: absolute;
    top: -20px;
    left: -73px; }
  #lineDraft .step2 {
    position: relative; }
  #lineDraft .s2 {
    position: absolute;
    top: 0px;
    left: -73px; }
  #lineDraft .step3 {
    position: relative; }
  #lineDraft .s3 {
    position: absolute;
    top: -25px;
    left: -73px; }
  #lineDraft .step4 {
    position: relative; }
  #lineDraft .s4 {
    position: absolute;
    top: -25px;
    left: -73px; }
  #lineDraft .lineBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 1em; }
    #lineDraft .lineBtn img {
      width: 80%; }
      #lineDraft .lineBtn img.logo {
        width: 40%; }

#dropboxDraft {
  margin-left: 60px; }
  #dropboxDraft .step1 {
    position: relative; }
  #dropboxDraft .s1 {
    position: absolute;
    top: -20px;
    left: -73px; }
  #dropboxDraft .step2 {
    position: relative; }
  #dropboxDraft .s2 {
    position: absolute;
    top: -25px;
    left: -73px; }
  #dropboxDraft .step3 {
    position: relative; }
  #dropboxDraft .s3 {
    position: absolute;
    top: -25px;
    left: -73px; }
  #dropboxDraft .step4 {
    position: relative; }
  #dropboxDraft .s4 {
    position: absolute;
    top: -25px;
    left: -73px; }
  #dropboxDraft .step5 {
    position: relative; }
  #dropboxDraft .s5 {
    position: absolute;
    top: -25px;
    left: -73px; }
  #dropboxDraft .step6 {
    position: relative; }
  #dropboxDraft .s6 {
    position: absolute;
    top: -25px;
    left: -73px; }

#step_lineAbout h4.howto {
  color: #946134;
  font-size: 1.42em;
  font-weight: bold;
  margin-bottom: 10px;
  background-size: 85px;
  height: 27px;
  display: inline-block;
  text-align: center;
  margin-right: 1em;
  position: relative;
  top: 2px; }

#step_lineAbout .step1_2 .qr {
  float: left;
  clear: both; }

#step_lineAbout .step1_2 img.qrkode {
  display: block;
  width: 100%;
  height: auto;
  max-width: 150px; }

#step_lineAbout .step3_2 .flowchart p {
  color: #946134;
  font-size: 1.42em;
  font-weight: bold; }

#step_lineAbout .step3_2 .flowchart img {
  margin-bottom: 30px !important; }

#step_dbAbout .step6 img {
  max-width: 600px;
  max-height: 156px; }

@media screen and (max-width: 768px) {
  .wrapper, .wrapper1280 {
    width: calc(100% - 10px);
    min-width: 310px;
    height: auto;
    margin: 0 auto;
    padding: 0 !important; }
  article {
    width: 100%; }
  .twoColumn {
    display: block; }
  .sp_only {
    display: block; }
  .pc_only {
    display: none; }
  .titleBox h2 {
    font-size: 1em !important; }
    .titleBox h2.ribbon_a, .titleBox h2.ribbon_b {
      background-size: 300px;
      width: 300px;
      height: 30px; }
  .title {
    position: relative !important;
    top: 6px !important; }
  .howtoNo {
    font-size: 0.65em !important; }
  #lineDraft, #dropboxDraft {
    margin-left: 0px; }
    #lineDraft #step_lineAbout, #lineDraft #step_dbAbout, #dropboxDraft #step_lineAbout, #dropboxDraft #step_dbAbout {
      padding: 0 15px 0 30px; }
    #lineDraft h3, #dropboxDraft h3 {
      font-size: 1.5em !important; }
    #lineDraft .s1, #lineDraft .s2, #lineDraft .s3, #lineDraft .s4, #dropboxDraft .s1, #dropboxDraft .s2, #dropboxDraft .s3, #dropboxDraft .s4 {
      left: -62px; }
  #step_lineAbout h4 {
    line-height: 1.8;
    text-align: inherit !important; }
  #step_lineAbout .step1_2 .qr {
    float: left;
    clear: both; }
  #step_lineAbout .step1_2 img.qrkode {
    display: block;
    width: 100%;
    height: auto;
    max-width: 139px;
    max-height: 89px; }
  #step_lineAbout .step3_2 .flowchart p {
    color: #946134;
    font-size: 1.42em;
    font-weight: bold; }
  #step_lineAbout .step3_2 .flowchart img {
    margin-bottom: 30px !important; }
  #step_lineAbout .step1_2 .qr {
    float: none; }
  #step_lineAbout .step1_2 img.qrkode {
    display: block;
    width: 100%;
    height: auto;
    max-width: 202px;
    max-height: 129px;
    margin-bottom: 20px !important; } }

@media screen and (max-width: 414px) {
  .titleBox h3 {
    text-align: start; } }

footer {
  clear: both; }