@charset "utf-8";
/* common ************************************************************/
/* font */
p {
  margin: 0.25rem 0;
}
li {
  font-size: 1rem;
}
.flow-fontWeight {
  font-weight: bold;
}
.flow {
  color: #505050;
  font-family: "游ゴシック", "Lucida Sans Unicode", "Lucida Grande", "Arial",
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック",
    sans-serif;
}
/* link */
.flow-notice a {
  color: #0000ee;
}
/* list */
.flow-asterisk li {
  position: relative;
  padding-left: 1rem;
  box-sizing: border-box;
  margin: 0.5rem 0;
}
.flow-asterisk li::after {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}
.flow-asterisk li:first-child {
  margin: 0 0 0.5rem;
}
.flow-asterisk li:last-child {
  margin: 0.5rem 0 0;
}
/*  */
.flow-circle li {
  position: relative;
  padding-left: 1.1rem;
  box-sizing: border-box;
  margin: 0.5rem 0;
}
.flow-circle li::after {
  content: "";
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  background: #505050;
  left: 0;
  top: 3px;
  border-radius: 50%;
}
.flow-circle li:first-child {
  margin: 0 0 0.5rem;
}
.flow-circle li:last-child {
  margin: 0.5rem 0 0;
}
/*  */
.flow-num {
  list-style: decimal;
}
.flow-num li {
  width: calc(100% - 2.5rem);
  margin: 0.5rem auto;
}
.flow-num li:first-child {
  margin: 0 auto 0.5rem;
}
.flow-num li:last-child {
  margin: 0.5rem auto 0;
}
/* footer */
#footer::after {
  content: "";
  position: static;
}

/* flow ************************************************************/
/* title */
.flow-title img {
  width: 550px;
  max-width: 90%;
  margin: 0 auto calc(8% + 40px);
}
/* step */
.flow-step img {
  margin-top: -7%;
}
/* notice */
.flow-notice {
  margin-top: 2rem;
}
.flow-confirm {
  background: #efe8d4;
  padding: 1rem;
  box-sizing: border-box;
  margin: 1rem 0;
}
/* cta */
.flow-ctaBox {
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  padding: 2rem;
  box-sizing: border-box;
  margin: 2rem 0;
}
.flow-ctaTitle {
  width: 500px;
  max-width: 95%;
  margin: 0 auto 1.5rem;
}
.flow-ctaBox a {
  margin: 1.5rem 0;
  display: block;
}
.flow-ctaBox a img {
  width: 620px;
  max-width: 95%;
  margin: 0 auto;
}
.flow-ctaBox .flow-confirm {
  background: #f3f3f3;
}
.flow-cta4DayAgo .flow-asterisk {
  color: #ff545c;
}

@media screen and (max-width: 600px) {
  /* common ************************************************************/
  /* font */
  li,
  p {
    font-size: 0.9rem;
  }
  /* layout */
  #flow .inBox {
    width: 92%;
    margin: 0 auto;
  }
  /* flow ************************************************************/
  /* title */
  .flow-title img {
    width: 550px;
    max-width: 90%;
    margin: 0 auto calc(5% + 32px);
  }
  /* step */
  .flow-step img {
    margin-top: -6%;
  }
  /* cta */
  .flow-ctaTitle {
    margin: 0 auto 1rem;
  }
  .flow-ctaBox {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  .flow-ctaBox a {
    margin: 1rem 0;
  }
}