@charset "utf-8";

/* 流れ */
/*PC用*/
@media print, screen {
  
.sec_01{margin: 0 auto; padding: 50px 0 140px; width: 100%; text-align: center;}
.sec_01 .tit{margin: 0 auto 40px; width: 100%; max-width: 395px;}
.sec_01 .tit img{width: 100%;}
.sec_01 .lead{margin-bottom: 45px; font-size: 16px; line-height: 36px;}
.sec_01 .img{margin: 0 auto; width: 100%; max-width: 1040px;}
.sec_01 .img img{width: 100%;}

.sec_02{margin: 0 auto; padding: 0 0 75px; width: 100%; background: #E8F4F7 url("../../images/src/flow/bg_sec_02.png") repeat-x center top;}
.sec_02 .tit{margin: 0 auto 160px; width: 100%; max-width: 176px;}
.sec_02 .tit img{width: 100%;}
.sec_02 .inner{margin: 0 auto; width: 100%; max-width: 972px;}
.sec_02 .inner .bx{align-items: center; padding: 33px 39px 33px 50px; width: 100%; background: #fff; border-radius: 30px; box-sizing: border-box;}
.sec_02 .inner .bx .numb{width: 84px;}
.sec_02 .inner .bx .numb img{width: 100%;}   
.sec_02 .inner .bx .copy{width: 140px; color: #60adc3; font-size: 22px;font-weight: bold;}
.sec_02 .inner .bx .text{width: 465px; font-size: 16px; line-height: 36px;}
.sec_02 .inner .bx .text span{display: block; margin: 0 0 0 18px; font-size: 14px; line-height: 22px; text-indent: -18px;}
.sec_02 .inner .bx .icon{width: 126px;}
.sec_02 .inner .bx .icon img{width: 100%;}
.sec_02 .inner .arrow{display: block; width: 100%; height: 42px; background: url("../../images/src/flow/arrow.png") no-repeat center; background-size: 42px auto;}
} 

@media screen and (max-width:1200px) {
    .sec_01{padding: 4.166vw 0 11.666vw;}
    .sec_01 .lead{padding: 0 4vw;}
    .sec_01 .img{width: 86%}
    
    .sec_02{padding: 0 0 6.25vw; background-size: 100% auto;}
    .sec_02 .tit{margin: 0 auto 13.333vw;}
    .sec_02 .inner{width: 81%;}
    .sec_02 .inner .bx{padding: 2.75vw 3.25vw 2.75vw 4.166vw;}
    .sec_02 .inner .bx .numb{width: 9.5%;}
    .sec_02 .inner .bx .copy{width: 15.8%; font-size: 1.833vw;}
    .sec_02 .inner .bx .text{width: 52.6%; font-size: 1.333vw; line-height: 3vw;}
    .sec_02 .inner .bx .text span{margin: 0 0 0 1.5vw; font-size: 1.166vw; line-height: 1.833vw; text-indent: -1.5vw;}
    .sec_02 .inner .bx .icon{width: 14.3%;}
    .sec_02 .inner .arrow{height: 3.5vw; background-size: 3.5vw auto;}
}

/*SP用*/
@media screen and (max-width:640px) {
    .sec_01{padding: 8vw 4vw 13vw; box-sizing: border-box;}
    .sec_01 .tit{margin: 0 auto 3.733vw; width: 59vw;}
    .sec_01 .lead{margin-bottom: 45px; font-size: 3.733vw; line-height: 6.666vw; text-align: left;}
    .sec_01 .img{margin: 0 auto; width: 84.4vw;}
    
    .sec_02{padding: 0 0 75px; background: #E8F4F7 url("../../images/src/flow/sp/bg_sec_02.png") repeat-x center top; background-size: 100% auto;}
    .sec_02 .tit{margin: 0 auto 21.866vw; width: 26.4vw;}
    .sec_02 .inner{padding: 0 4vw; width: 100%; box-sizing: border-box;}
    .sec_02 .inner .bx{display: block; padding: 9.333vw 4vw 5.4vw; text-align: center; position: relative;}
    .sec_02 .inner .bx .numb{width: 12.8vw; position: absolute; left: 10.666vw;top: -3.333vw;}
    .sec_02 .inner .bx .copy{margin-bottom: 2.666vw; width: auto; font-size: 4.266vw;}
    .sec_02 .inner .bx .text{margin-bottom: 2.666vw; width: auto; font-size: 3.733vw; line-height: 2;}
    .sec_02 .inner .bx .text span{display: block; margin: 0; font-size: 3.466vw; line-height: 5.333vw; text-indent: inherit;}
    .sec_02 .inner .bx .icon{margin: 0 auto; width: 17.466vw;}
    .sec_02 .inner .arrow{display: block; width: 100%; height: 12.533vw; background-size: 8.266vw auto;}

}