@charset "utf-8";
/* CSS Document */

.main {background: url("/common/images/flow/mainBg.png"); height: 250px; position: relative;}
.main .container {position: static;}
.main .right {position: absolute; bottom: 0; right: 18%;}
.step01 .sectionTitle {margin: 7% auto 6%;}
.dataBlock {width: 920px; margin: 0 auto;display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; overflow: hidden;}
.dataBlock .right {width: 60%; padding: 0 3%; box-sizing: border-box; overflow: hidden;}
.dataBlock .right h2 {background: url("/common/images/flow/tag.png") center left no-repeat; background-size: auto 81%; padding-left: 2.7em; font-weight: 400}
.dataBlock .right h2 span {color:#6c9f2f; font-size: 72px; font-style: italic; line-height: 1; margin-right: .5em;}
.dataBlock .data {width: 96%; margin: 5% auto 0;}
.data p { padding: 1.2em; box-sizing: border-box; letter-spacing: 0.02em;}
.step01 .data p,.step02,.step03 .data p {background: rgba(247,243,240,.55);}
.step02 .data p {background: #fff;}
.step02 {padding-top: 4%;}
.step03 {padding: 11% 0 5%;}
.bg {content: ""; background: url("/common/images/flow/bg01.png") transparent center bottom no-repeat; background-size: 100% 100%; width: 100%; height: 150px; display: block; margin: 0 auto;}
.step03:before {content: ""; background: url("/common/images/flow/bg02.png") center top no-repeat; background-size: 100% auto; width: 100%; height: 165px; display: block; position: absolute; top: 0; left: 0; right: 0; margin: auto}
.dataBlock .banner {margin: 0 auto; padding: 4% 0 1%;}
.dataBlock .banner p {padding: 0; background: none;}
.step03 .banner p,.step03 .banner a {display: inline-block;}
.step03 .banner a {width: 80%;}
@media screen and (max-width: 1280px) {
    .main .right {right: -10%;}
}
@media screen and (max-width: 896px) {
    .main .right {right: -20%; max-width: none;}
    .dataBlock,.dataBlock .left,.dataBlock .right {width: 100%;}
    .dataBlock {flex-wrap: wrap;}
    .dataBlock .left img {display: block; margin: 0 auto;}
    .dataBlock .left {margin: 3% auto 0;}
    .dataBlock .right {margin: 5% auto;}
}
@media screen and (max-width:600px) { .main .right {right: -33%;}}
@media screen and (max-width: 480px) {.main .right {right: -50%;} .dataBlock .left{max-width: 75%;}.dataBlock .right {padding: 0;} .dataBlock .data {width: 100%;}.dataBlock .right h2 span {font-size: 15vw; margin-right: 4vw;}.dataBlock .right h2 {padding-left: 13vw;}.step03 .banner a {width: 100%;}.bg {height: 10vw;}}