@charset "UTF-8";
.bg{
 background-image: url(../common/images/bgL.jpg),url(../common/images/bgR.jpg);
 background-position: left top,right bottom;
 background-size: 50% auto,50% auto;
 background-repeat: no-repeat,no-repeat;
}

#sec-flow,
#sec-charge,
#sec-flowD{
 margin: -130px 0 0;
 padding: 130px 0 0;
}
#fv h2{
 width: 334px;
 background-image: url(../images/service/h2.png);
}

#flow{
 margin: 0 auto;
 padding: 83px 0 130px;
 width: 1000px;
}
h3{
 width: 100%;
 height: 80px;
 font-size: 32px;
 line-height: 100%;
 text-align: center;
 color: #fff;
 font-family: "dnp-shuei-mgothic-std", sans-serif;
 font-weight: 600;
 background-image: url(../common/images/h3.jpg);
 background-position: center center;
 background-size: cover;
 border-radius: 20px;
 background-repeat: no-repeat;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#flowD h3{
 padding: 0 0 0 80px;
}
h3 .circle{
 margin: auto;
 padding: 0;
 width: 150px;
 height: 150px;
 border-radius: 50%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 200px;
 overflow: hidden;
}
#flowD h3 .circle{
 left: 168px;
}
h3 .circle img{
 width: 100%;
 height: auto;
}
#flow .flow{
 margin: 0 auto;
 padding: 85px 0 0;
 width: 600px;
}
#flow .flow img{
 width: 100%;
 height: auto;
 pointer-events: none;
}
#flow .flow p{
 margin: 0;
 padding: 25px 0 0;
 width: 100%;
 font-size: 14px;
 line-height: 26px;
 text-align: left;
}

#charge{
 margin: 0 auto;
 padding: 50px 0 130px;
 width: 1000px;
}
#charge .charge{
 margin: 0 auto;
 padding: 80px 0 38px;
 width: 600px;
 font-size: 16px;
 line-height: 26px;
 text-align: left;
}
#charge .tbBox{
 margin: 0 auto;
 width: 508px;
}
#charge .tbBox table{
 float: left;
 width: 250px;
 border: 1px solid #07913a;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#charge .tbBox table:last-child{
 float: right;
}
#charge .tbBox table th{
 padding: 10px 0 9px;
 font-size: 16px;
 line-height: 100%;
 text-align: center;
 color: #fff;
 font-weight: normal;
 background-color: #07913a;
 border-bottom: 1px solid #07913a;
}
#charge .tbBox table td{
 padding: 10px 0 9px 16px;
 font-size: 16px;
 line-height: 100%;
 text-align: left;
 border-bottom: 1px solid #07913a;
}
#charge .cap{
 margin: 0 auto;
 padding: 30px 0 34px;
 width: 600px;
 font-size: 14px;
 line-height: 26px;
 text-align: left;
}
#charge .chargeBox{
 margin: 0 auto;
 padding: 28px 0 0 148px;
 width: 661px;
 height: 150px;
 background-image: url(../images/service/chargeBg.jpg);
 background-position: center center;
 background-size: cover;
 background-repeat: no-repeat;
 border-radius: 29px;
 font-size: 18px;
 line-height: 26px;
 text-align: left;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#charge .chargeBox div{
 padding: 0 0 6px;
 font-size: 22px;
 line-height: 150%;
 color: #07913a;
 font-family: "dnp-shuei-mgothic-std", sans-serif;
 font-weight: 600;
}
#charge .chargeBox span{
 color: #07913a;
}

#flowD{
 margin: 0 auto;
 padding: 50px 0 174px;
 width: 1000px;
}
#flowD .flowD{
 margin: 0 auto;
 padding: 110px 0 0;
 width: 600px;
}
#flowD .flowD img{
 width: 100%;
 height: auto;
 pointer-events: none;
}
#flowD .flowD p{
 margin: 0;
 padding: 58px 0 0;
 width: 100%;
 font-size: 14px;
 line-height: 26px;
 text-align: left;
}



@media screen and (max-width: 1620px){
#sec-flow,
#sec-charge,
#sec-flowD{
 margin: -8vw 0 0;
 padding: 8vw 0 0;
}

}
@media screen and (max-width: 1020px){
#flow{
 padding: 8.2vw 0 12.8vw;
 width: 98%;
}
h3{
 height: 7.8vw;
 font-size: 3.1vw;
}
#flowD h3{
 padding: 0 0 0 8%;
}
h3 .circle{
 width: 14.7vw;
 height: 14.7vw;
 left: 20%;
}
#flowD h3 .circle{
 left: 16.8%;
}
#flow .flow{
 padding: 8.4vw 0 0;
 width: 60%;
}
#flow .flow p{
 padding: 2.48vw 0 0;
 font-size: 1.37vw;
 line-height: 180%;
}

#charge{
 padding: 4.9vw 0 12.8vw;
 width: 98%;
}
#charge .charge{
 padding: 7.9vw 0 3.7vw;
 width: 60%;
 font-size: 1.57vw;
 line-height: 165%;
}
#charge .tbBox{
 width: 50.8%;
}
#charge .tbBox table{
 width: 49.2%;
}
#charge .tbBox table th{
 padding: 1vw 0 0.89vw;
 font-size: 1.58vw;
}
#charge .tbBox table td{
 padding: 1vw 0 0.8vw 1.59vw;
 font-size: 16px;
}
#charge .cap{
 padding: 2.9vw 0 3.3vw;
 width: 60%;
 font-size: 1.38vw;
 line-height: 190%;
}
#charge .chargeBox{
 padding: 2.7vw 0 0 14.8%;
 width: 66.1%;
 height: 14.8vw;
 font-size: 1.77vw;
 line-height: 150%;
}
#charge .chargeBox div{
 padding: 0 0 0.6vw;
 font-size: 2.18vw;
}

#flowD{
 padding: 4.9vw 0 17vw;
 width: 98%;
}
#flowD .flowD{
 padding: 10.8vw 0 0;
 width: 60%;
}
#flowD .flowD p{
 padding: 5.7vw 0 0;
 font-size: 1.38vw;
 line-height: 190%;
}




}



@media screen and (max-width: 780px){
#fv h2{
 width: 57%;
 background-image: url(../images/service/h2.png);
}

#sec-flow,
#sec-charge,
#sec-flowD{
 margin: -18vw 0 0;
 padding: 18vw 0 0;
}
#flow{
 margin: 0 auto;
 padding: 12vw 0 10vw;
 width: 95%;
}
h3{
 width: 100%;
 height: 10vw;
 font-size: 4.6vw;
 line-height: 100%;
 text-align: center;
 color: #fff;
 font-family: "dnp-shuei-mgothic-std", sans-serif;
 font-weight: 600;
 background-image: url(../common/images/h3.jpg);
 background-position: center center;
 background-size: cover;
 border-radius: 20px;
 background-repeat: no-repeat;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#flowD h3{
 padding: 0 0 0 14%;
}
h3 .circle{
 margin: auto;
 padding: 0;
 width: 18vw;
 height: 18vw;
 border-radius: 50%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 6%;
 overflow: hidden;
}
#flowD h3 .circle{
 left: 6%;
}
h3 .circle img{
 width: 100%;
 height: auto;
}
#flow .flow{
 margin: 0 auto;
 padding: 8vw 0 0;
 width: 90%;
}
#flow .flow img{
 width: 100%;
 height: auto;
 pointer-events: none;
}
#flow .flow p{
 margin: 0;
 padding: 3vw 0 0;
 width: 100%;
 font-size: 3vw;
 line-height: 150%;
 text-align: left;
}

#charge{
 margin: 0 auto;
 padding: 6vw 0 10vw;
 width: 95%;
}
#charge .charge{
 margin: 0 auto;
 padding: 8vw 0 4vw;
 width: 90%;
 font-size: 3.2vw;
 line-height: 150%;
 text-align: left;
}
#charge .tbBox{
 margin: 0 auto;
 width: 90%;
}
#charge .tbBox table{
 float: left;
 width: 48%;
 border: 1px solid #07913a;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#charge .tbBox table:last-child{
 float: right;
}
#charge .tbBox table th{
 padding: 2vw 0 2vw;
 font-size: 3vw;
 line-height: 100%;
 text-align: center;
 color: #fff;
 font-weight: normal;
 background-color: #07913a;
 border-bottom: 1px solid #07913a;
}
#charge .tbBox table td{
 padding: 2vw 0 2vw 5%;
 font-size: 3vw;
 line-height: 100%;
 text-align: left;
 border-bottom: 1px solid #07913a;
}
#charge .cap{
 margin: 0 auto;
 padding: 4vw 0 4vw;
 width: 90%;
 font-size: 3.2vw;
 line-height: 150%;
 text-align: left;
}
#charge .chargeBox{
 margin: 0 auto;
 padding: 3.5vw 0 4vw 9%;
 width: 90%;
 height: auto;
 background-image: url(../images/service/chargeBg.jpg);
 background-position: right bottom;
 background-size: cover;
 background-repeat: no-repeat;
 border-radius: 29px;
 font-size: 3.2vw;
 line-height: 150%;
 text-align: left;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#charge .chargeBox div{
 padding: 0 0 1vw;
 font-size: 3.6vw;
 line-height: 150%;
 color: #07913a;
 font-family: "dnp-shuei-mgothic-std", sans-serif;
 font-weight: 600;
}
#charge .chargeBox span{
 color: #07913a;
}

#flowD{
 margin: 0 auto;
 padding: 6vw 0 16vw;
 width: 95%;
}
#flowD .flowD{
 margin: 0 auto;
 padding: 10vw 0 0;
 width: 90%;
}
#flowD .flowD img{
 width: 100%;
 height: auto;
 pointer-events: none;
}
#flowD .flowD p{
 margin: 0;
 padding: 6vw 0 0;
 width: 100%;
 font-size: 2.9vw;
 line-height: 150%;
 text-align: left;
}




}