@charset "utf-8";
.flow_support .box {
  min-width: 0;
  padding: 20px 20px;
  border: 1px solid #cccccc;
  position: relative;
  overflow: visible !important;
  width: 20%;
}
@media (max-width: calc(1000px - 0.02px)) {
  .flow_support .box {
    width: 33.3333333333%;
    margin-bottom: 20px;
  }
}
@media (max-width: calc(640px - 0.02px)) {
  .flow_support .box {
    width: 100%;
    margin-bottom: 16px;
  }
}
.flow_support .box:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #222;
  border-width: 10px 0px 10px 10.32px;
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  translate: 100% -50%;
}
@media (max-width: calc(640px - 0.02px)) {
  .flow_support .box:after {
    border-color: #222 transparent transparent transparent;
    border-width: 13.86px 8px 0px 8px;
    right: auto;
    top: auto;
    bottom: 0;
    left: 50%;
    translate: -50% 100%;
  }
}
.flow_support .box:last-child:after {
  content: none;
}
.flow_support .box > article {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flow_support .box > article > h3 {
  display: none;
}
.flow_support .box > article > img {
  width: 80% !important;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 10px;
}
@media (max-width: calc(640px - 0.02px)) {
  .flow_support .box > article > img {
    width: 50% !important;
  }
}
.flow_support .box > article > div {
  font-size: 1rem;
  font-family: Noto Sans JP, sans-serif;
  font-weight: 400;
  word-break: break-word;
  overflow-wrap: break-word;
}
.flow_support .step{
  font-size:1.3em;
  font-weight: 700;
  color: #1B98D6;
}
#c1 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c1 h1,
#c1 div {
	text-align: center;
}
#c2 {
	clear: both;
	margin: 30px 0  ;
	padding:    ;
}
#c3 {
	clear: both;
	margin: 120px 0 30px ;
	padding:    ;
}
#c3 h3,
#c3 div {
	text-align: center;
}
#c9 {
	clear: both;
	margin: 0 0 60px ;
	padding:    ;
}
#c9 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c9 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c11 {
	clear: both;
	margin: 120px 0 30px ;
	padding:    ;
}
#c11 h3,
#c11 div {
	text-align: center;
}
#c10 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c10 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#c10 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
@media screen and (min-width: 641px) and (max-width: 834px) {
#c1 {
}
#c2 {
}
#c3 {
}
#c9 {
	margin: 0 0 60px;
}
#c9 {
}
#c11 {
}
#c10 {
}
#c10 {
}
}
@media screen and (max-width: 640px) {
#c1 {
}
#c2 {
}
#c3 {
}
#c9 {
	margin: 0 0 40px;
}
#c9 {
}
#c11 {
}
#c10 {
}
#c10 {
}
}