@charset "utf-8";.indention{
 display: inline-block;
}
.about-wrapper{
 padding: 35px 16px;
 display: flex;
 flex-wrap: nowrap;
 width: 100%;
 justify-content: center;
 align-items: center;
}
.about-left{
 width: 40%;
 max-width: 208px;
}
.about-right{
 width: 60%;
 text-align: left;
 font-size: 13px;
}
.about-right h2.title{
 text-align: left;
 padding: 0;
 font-size: 18px;
}

.flow-wrapper{
 background-color:  #f7f7f7;
 padding: 50px 16px 70px;
}
h2.title{
 font-size: 30px;
 font-weight: 600;
 margin-bottom: 15px;
 text-align: center;
}
.subtitle{
 font-size: 12px;
 font-weight: 600;
}
.flow{
 max-width: 1000px;
 margin: 0 auto;
}
.step{
 margin-top: 40px;
}
.btn{
 margin-top: 24px;
 text-align: center;
}
.btn img{
 width: 100%;
 height: auto;
 max-width: 466px;
}
.note{
 padding: 50px 0 0;
 max-width: 1000px;
 margin: 0 auto;
}
.note h2.title{
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5"><circle cx="2.5" cy="2.5" r="2.5" fill="black"/></svg>');
  background-repeat: repeat-x;
  background-position: center;
  background-size: 9px 4px;
}
.note-title{
 background-color: #f7f7f7;
 padding: 0 6px;
}
.note .color-red{
 color: #D00000;
}
.note ul{
 margin-bottom: 12px;
}
.note li{
 font-size: 12px;
 text-indent: -1em;
 padding-left: 1em;
}

@media screen and (min-width:769px){
.about-wrapper{
 padding: 40px 16px;
}
.about-right{
 width: 47%;
 max-width: 500px;
 text-align: left;
 font-size: 20px;
}
.about-right h2.title{
 text-align: left;
 padding: 0;
 font-size: 30px;
}
h2.title{
 font-size: 40px;
}
.subtitle{
 font-size: 18px; 
}
.flow-wrapper{
 padding: 100px 16px;
}
.step{
 margin-top: 60px;
}
.note ul{
 margin-bottom: 56px;
}
.note li{
 font-size: 16px;
}
}