@charset "utf-8";

.explain        { padding: 60px 0 90px; }
.explain .inner { display: table; }
.explain h2,
.explain .lead  { display: table-cell; vertical-align: middle; }

.flow                    { counter-reset: item; color: #0a4774; font-size: 1.8rem; text-align: center; letter-spacing: -.4em; }
.flow li                 { display: inline-block; position: relative; width: 200px; margin: 0 34px; padding: 5px 10px; border: 1px solid #0a4774; letter-spacing: normal; }
.flow li:first-child     { margin-left: 0; }
.flow li:last-child      { margin-right: 0; } 
.flow li:before          { counter-increment: item; content: 'Step.'counter(item); position: absolute; top: -25px; left: 0; width: 100%; font-size: 1.4rem; }
.flow li:after           { content: ""; position: absolute; top: 50%; right: -45px; width: 16px; height: 14px; margin-top: -7px; background: url("/assets/images/i_ar_blue_nc.png"); background-size: cover; }
.flow li:last-child:after{ content: none; }

.step                        { margin-top: 60px; }
.step ol                     { counter-reset: item; }
.step ol li                  { position: relative; margin-bottom: 120px; background: #f2f6f8; }
.step ol li:before           { content: ""; position: absolute; bottom: -95px; left: 50%; width: 35px; height: 70px; margin-left: -18px; background: url("/assets/images/onestop/i_ar_down.png"); background-size: cover; }
.step ol li:after            { content: ""; display: block; clear: both; height: 0; }
.step ol li:last-child:before{ content: none; }
.step ol li .heading         { float: left; width: 300px; min-height: 360px; padding: 35px 10px 10px; background: #074674 url("/assets/images/onestop/i_human.png") no-repeat -7px bottom; background-size: 130px auto; color: #fff; text-align: center; }
.step ol li .heading:before  { counter-increment: item; content: 'Step.'counter(item); font-family: 'Roboto', sans-serif; font-size: 2.4rem; font-weight: 400; }
.step ol li .heading h3      { margin-bottom: 15px; font-size: 3rem; font-weight: bold; }
.step ol li .heading h3 + p  { font-size: 1.8rem; line-height: 1.75; }
.step ol li .exp             { float: right; width: 950px; padding: 30px 0; }
.step ol li .exp:after       { content: ""; display: block; clear: both; height: 0; }
.step ol li figure           { float: left; width: 300px; }
.step ol li .exp-inner       { float: right; width: 625px; }
.step ol li .exp-inner h4    { margin-bottom: 10px; color: #18b6d1; font-size: 2rem; font-weight: bold; }
.step ol li .exp-inner p     { font-size: 1.6rem; line-height: 1.75; }

.contact ul > li         { width: calc((100% - 28px) / 2); margin: 0 auto; background: #fff; font-size: 3rem; font-weight: bold; line-height: 1.25; }
.contact ul > li a       { display: block; position: relative; height: 100%; padding: 50px 60px 50px 30px; background: #00afcc; color: #fff; }
.contact ul > li a:after { content: ""; position: absolute; top: 50%; right: 30px; width: 28px; height: 28px; margin-top: -14px; background: url("/assets/images/i_ar.png"); background-size: cover; }


@media (max-width: 767px) {
.explain       { padding: 0 0 25px; }
.explain .inner,
.explain h2,
.explain .lead { display: block; }

.flow                    { margin-top: 20px; font-size: 1.2rem; }
.flow li                 { width: 120px; margin: 0 10px 25px; padding: 5px 10px; }
.flow li:nth-child(2),
.flow li:nth-child(3)    { width: 70px; }
.flow li:last-of-type    { width: 140px; }
.flow li:before          { top: -20px; font-size: 1rem; }
.flow li:after           { right: -15px; width: 8px; height: 7px; margin-top: -4px; }

.step                        { margin-top: 20px; }
.step ol li                  { margin-bottom: 60px; }
.step ol li:before           { bottom: -47px; width: 18px; height: 35px; margin-left: -9px; }
.step ol li .inner           { padding: 0; }
.step ol li .heading         { float: none; width: auto; min-height: initial; min-height: auto; padding: 20px 10px; background-position: 20px bottom; background-size: 70px auto ; }

.step ol li .heading:before  { font-size: 1.4rem; }
.step ol li .heading h3      { margin-bottom: 7px; font-size: 1.8rem; }
.step ol li .heading h3 + p  { font-size: 1.2rem; }
.step ol li .exp             { float: none; width: auto; padding: 20px; }

.step ol li figure,
.step ol li .exp-inner       { float: none; width: auto; }
.step ol li figure           { margin-bottom: 15px; text-align: center; }
.step ol li figure img       { width: 265px; height: auto; }
.step ol li .exp-inner h4    { margin-bottom: 5px; font-size: 1.6rem; }
.step ol li .exp-inner p     { font-size: 1.2rem; }

.contact ul > li         { width: auto; font-size: 1.5rem; }
.contact ul > li a       { padding: 25px 45px 25px 15px; background-size: 15px; }
.contact ul > li a:after { right: 15px; }

}