@charset "UTF-8";
@media screen and (min-width: 768px),print {

.cc-ttl-Box-01 { background: url('../images/flow/h2.jpg') top center no-repeat , url('../images/index/h-bg.jpg') top center ; }
.cc-ttl { margin-bottom: 45px; }

#con-flow{ width: 800px; margin: 0 auto ; }
#con-flow .right{ float: right; }
#con-flow .left{ float: left; }

#con-flow .h-img{ margin-bottom: 95px; }
#con-flow .bx01{ width: 800px; margin: 0 auto 75px; }
#con-flow .bx01-tel{ text-align: center; }
#con-flow .bx01 .req-link{ margin-bottom: 30px;  }
#con-flow .ttl-bx{  background: #453728; position: relative; }
#con-flow h4{ font-size: 40px; font-weight: bold; color: #fff; padding: 20px 0 20px 185px; }
#con-flow .numb{ position: absolute; left: 20px; top: -40px; }
#con-flow .bx01 .inner{ background: #fff; padding: 40px 40px 30px; }
#con-flow .in-txt{ width: 340px; font-size: 16px; line-height: 1.7; padding-top: 35px; letter-spacing: 1px; }
#con-flow .f-bx{ width: 800px; margin: 0 auto 95px; }
#con-flow .f-bx li{ float: left; margin-right: 10px; width: 395px; }
#con-flow .f-bx li:last-child{ float: left; margin-right: 0px; }

#con-flow .marunipoint{width: 720px;background-color: #ffe100;border: solid 10px #fff100;padding: 25px 40px 20px; position: relative;}
#con-flow .marunipoint .mp{position: absolute;left: 60px;top: -20px;}
#con-flow .marunipoint .ttl{font-size: 22px;font-weight: bold; margin-left: 140px; line-height: 1.3;margin-bottom: 20px;}
#con-flow .marunipoint .txt{width: 480px;}
#con-flow .marunipoint .loanimg{position: absolute;right: 20px;bottom: -10px;}




}


@media screen and (max-width: 767px) { .cc-h2 { background-image: url(../images/works_reform/h2.jpg); }
  .cc-ttl { margin-bottom: 7%; }

#con-flow{ width:100%; margin: 0 auto ; }
#con-flow .right{ float: none; }
#con-flow .left{ float: none; }

#con-flow .h-img{ margin: 3% 0 0; }
#con-flow .bx01{ width:100%; margin: 0 auto 75px; }
#con-flow .bx01-tel{ text-align: center; }
#con-flow .bx01 .req-link{ margin-bottom: 30px; }
#con-flow .ttl-bx{  background: #453728; position: relative; }
#con-flow h4{ font-size: 22px; font-weight: bold; color: #fff; text-align: center; padding: 7% 0 3%; }
#con-flow .numb{ position: absolute; left: 7px; top: -40px; width: 18%; }
#con-flow .bx01 .inner{ background: #fff; padding: 5%; }
#con-flow .in-txt{ width:100%; font-size: 14px; line-height: 1.7; letter-spacing: 1px; }
#con-flow .in-img{ margin-bottom: 7%; }
#con-flow .f-bx{ width:100%; margin: 0 auto 10%; }
#con-flow .f-bx li{ float: none; margin:0 auto 7%; width:90%; }

#con-flow .marunipoint{width: 100%; background-color: #ffe100;border: solid 10px #fff100;padding: 5%; position: relative;}
#con-flow .marunipoint .mp{position: absolute; left:35%; top: -10%;}
#con-flow .marunipoint .ttl{font-size: 18px;font-weight: bold; margin-top: 24%; line-height: 1.3;margin-bottom: 20px;}
#con-flow .marunipoint .txt{}
#con-flow .marunipoint .loanimg{position: absolute;right: 20px;bottom: -10px;}


}