@charset "utf-8"; 

/* characot :: flow.css */

/* flow
=========================================================================== */

.flow dt {
  background: #ecf7fc;
  border: 1px solid #ddd;
  border-radius: 5px 0 0 5px;
  color: #f59600;
  font-size: 2.2rem;
  font-weight: bold;
}
.flow img {
  vertical-align: middle;
}
.flow dt p {
  display: table-cell;
  vertical-align: middle;
}
.flow dd {
  border: 1px solid #ddd;
  position: relative;
}
.flow dd:not(:last-child)::after {
  width: 35px;
  height: 35px;
  border-style: solid;
  border-width: 25px 35px 0 35px;
  border-color: #ddd transparent;
  content: "";
  position: absolute;
  bottom: -35px;
}
.flow dd p {
  font-size: 1.4rem;
}

/* Media Queries - PC
=========================================================================== */

@media print, screen and (min-width: 769px) {
.flow img {
  margin-right: 20px;
}
.flow dt {
  width: 315px;
  padding: 25px 20px;
  border-right: none;
  border-radius: 5px 0 0 5px;
  float: left;
}
.flow dd {
  width: 625px;
  margin: 0 0 35px 300px;
  border-left: none;
  border-radius: 0 5px 5px 0;
}
.flow dd p {
  padding: 0 10px 0 35px;
  position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.flow dd:not(:last-child)::after {
  left: 155px;
}
} /* PC */

/* Media Queries - 768px
=========================================================================== */

@media screen and (max-width: 768px){
.flow img {
  width: 40px;
  height: 40px;
  margin-right: 15px;
}
.flow dt {
  padding: 12px;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  font-size: 1.7rem;
}
.flow dd {
  margin-bottom: 35px;
  padding: 12px;
  border-top: none;
  border-radius: 0 0 5px 5px;
}
.flow dd:not(:last-child)::after {
  margin-left: -35px;
  left: 50%;
}
} /* 768px */

/* Media Queries - 568px
=========================================================================== */

@media screen and (max-width: 568px){
} /* 568px */

/* Media Queries - 320px
=========================================================================== */

@media screen and (max-width: 320px){
} /* 320px */