.main-flow {
  height: 0;
  padding-top: 23.9%;
  background: url(../img/main_flow.png) 0 0 no-repeat;
  background-size: contain; }

@media screen and (max-width: 480px) {
  .main-flow {
    padding-top: 45.5%;
    background-size: cover; } }

@media screen and (max-width: 480px) {
  .page-title {
    font-size: 1.125rem; } }

.flow-intro {
  max-width: 1200px;
  margin: 0 auto 60px; }

@media screen and (max-width: 1024px) {
  .flow-intro {
    padding: 0 24px; } }

@media screen and (max-width: 480px) {
  .flow-intro {
    padding: 0 15px; } }

.point-caption {
  color: #07bbe8;
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 15px;
  text-align: center; }

.flow-number .point-number {
  top: 36px; }

.flow-number {
  margin: 0 30px 0 0; }

.flow-intro-inner {
  border: solid 5px #ecf7ff;
  padding: 50px 9.2%;
  margin: 0 0 60px;
  padding: 50px 9.2%; }

.flow-intro-inner p {
  line-height: 1.8; }

.title-bottom {
  border-bottom: 4px solid #07b2dd;
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 20px;
  padding: 0 0 20px 15px; }

.flow-title-wrapper {
  background: #ecf7ff;
  padding: 10px 0 30px; }

@media screen and (max-width: 1024px) {
  .flow-title-wrapper {
    padding: 10px 24px 30px; } }

@media screen and (max-width: 480px) {
  .flow-title-wrapper {
    padding: 10px 15px 25px; } }

.flow-title-inner {
  border: solid 5px #ecf7ff; }

.flow-title {
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 600;
  padding: 30px 0 0; }

.flow-title-inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  max-width: 1000px;
  margin: 0 auto; }

.point-number-inner {
  margin: 0 auto;
  position: relative; }

.point-shape {
  content: "";
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  width: 45px;
  height: 45px;
  background: #08bce8;
  transform: rotate(45deg); }

.point-number {
  font-size: 24px;
  font-size: 1.500rem;
  font-weight: 600;
  transform: rotate(-45deg);
  color: #fff; }

.flow-box:nth-of-type(odd) .flow-contents-wrapper .flow-content-image {
  float: right;
  padding: 0 0 30px 30px; }

@media screen and (max-width: 480px) {
  .flow-box:nth-of-type(odd) .flow-contents-wrapper .flow-content-image {
    float: none;
    padding: 0; } }

.flow-box:nth-of-type(even) .flow-contents-wrapper .flow-content-image {
  float: left;
  padding: 0 30px 30px 0; }

@media screen and (max-width: 480px) {
  .flow-box:nth-of-type(even) .flow-contents-wrapper .flow-content-image {
    float: none;
    padding: 0; } }

.flows-wrapper {
  margin: 0 0 110px; }

.flows-wrapper .flow-contents-wrapper:not(:last-of-type) {
  background: url(../img/arrow_bottom.png) no-repeat center bottom;
  background-size: 136px auto;
  margin: 0 0 30px; }

.flow-contents-wrapper {
  background-size: 136px auto;
  padding: 40px 0 60px; }

@media screen and (max-width: 1024px) {
  .flow-contents-wrapper {
    padding: 40px 24px 60px; } }

@media screen and (max-width: 480px) {
  .flow-contents-wrapper {
    padding: 30px 15px 60px; } }

.flow-step-contents {
  background-image: none, linear-gradient(-45deg, #fc5185 10px, transparent 0), none, none;
  background-position: -10px -10px;
  border: solid 1px #07bbe8;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 2.4%; }

@media screen and (max-width: 480px) {
  .flow-step-contents {
    display: block; } }

.flow-step-content {
  overflow: hidden; }

.flow-step-content p:not(:last-of-type) {
  margin-bottom: 1em; }

@media screen and (max-width: 480px) {
  .flow-step-content {
    width: 100%; } }

.flow-content-title {
  border-bottom: solid 1px #07bbe8;
  font-weight: 600;
  margin: 0 0 20px;
  padding: 0 0 20px; }

.flow-content-image {
  width: 44.3%;
  max-width: 444px; }

@media screen and (max-width: 480px) {
  .flow-content-image {
    margin: 0 0 20px;
    width: 100%; } }