@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css");
@import url("https://fonts.googleapis.com/earlyaccess/sawarabigothic.css");


.warpper-line-blue .head-title .text-head img{margin-top: -6px;}

.warpper-line-blue{padding: 22px 0 0;}

.intro{
	margin:10px 0 0 0;
}
.intro strong{color:#2162d8; font-size: 26px; font-weight: normal;   font-family: "Sawarabi Mincho";}
.intro strong span{font-size: 37px;}
.intro p{text-align: center; padding: 15px 0;}
.intro p:nth-of-type(1){ font-family: "Sawarabi Mincho"; font-size: 18px;}
.intro div{text-align: center;}
.intro >span{display: inline-block; width: 30%;}
.intro img{margin: 0 1%; max-width: 100%;}

.warrper-blue{background: #e4f7fe;}
.top-line{background: url(../images/curve-bottom.png) repeat-x top; height: 30px;}
.footer-line{background: url(../images/curve-top.png) repeat-x bottom; margin: 0 0 20px; height: 30px;}

.header-intro{text-align: center;}
.header-intro strong{background: url(../images/bottom-line.jpg) no-repeat bottom center; display: block; text-align: center; font-size: 22px; padding: 0 0 5px;}

.header-intro p{padding:20px 0; background:url(../images/border-line-top.png) repeat-x bottom; font-size:16px; margin:0 0 5px;}
.header-intro span{padding: 10px 0 19px; display: block; color: #0081f9;  background:url(../images/border-line-bottom.png) repeat-x bottom; font-weight: bold; font-size: 22px; margin: 0 0 20px;font-family: "Sawarabi Gothic";}

.boxdata{ text-align:center; background: #FFF; margin: 0 0 20px;}
.boxdata >strong{display: block; position: relative; color: #FFF; font-size: 20px; background: url(../images/bg-title-color.png) repeat-x; padding: 6px 0; font-family: "Sawarabi Gothic";}
.boxdata >strong i{display: block; position: absolute; bottom:-30px; font-size: 50px; width: 100%; text-align: center;}
.boxdata p{padding: 20px 0; font-size: 16px;}
.boxdata p strong{display: block; font-size: 18px; margin:0 0 5px;font-family: "Sawarabi Gothic";}

.title-pink >strong{background-color: #ff40ac;}
.title-pink >strong i{color: #ff40ac;}
.title-blue >strong{background-color: #4064ff;}
.title-blue >strong i{color: #4064ff;}

.title-violet{padding: 0 0 30px;}
.title-violet >strong{background-color: #b72ee4;}
.title-violet >strong i{color: #b72ee4;}

.dataplus{display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.dataplus div{background: #f3ff8a; position: relative; display:flex; height: 55px; align-items: center; border-radius: 5px; padding: 10px 50px; font-weight: bold;justify-content: center;font-family: "Sawarabi Gothic"; font-size: 16px;}
.dataplus div img{position: absolute;}

.dataplus div:nth-of-type(1) img{left:-100px; top:0;}
.dataplus div:nth-of-type(2) img{right:-10px; top:0;}
.dataplus div:nth-of-type(3) img{right:-60px; top:-10px;}


.dataplus span{display: inline-block; margin: 0 20px; font-size: 30px; font-weight: bold; color: #072088;}

.datacalculate >div{display: flex; flex-wrap: wrap; width:100%; overflow: hidden;}
.datacalculate >div div,.datacalculate >div >span{display:block; float: left; vertical-align: top;}

.datacalculate >strong{display: block; padding: 0 0 20px; font-size: 20px; background: url(../images/border-blue.png) repeat-x bottom; text-align: center; margin: 0 0 30px;}

.datacalculate >div > div:nth-of-type(1){background: #8de6ff; padding: 20px; width: 100px; display:flex; flex-flow: column; justify-content: center; align-items: center;}
.datacalculate >div > div:nth-of-type(1) span{display: block; text-align: center; padding: 10px 0;}

.datacalculate >div > div:nth-of-type(3) >strong{background: #9eee88;}
.datacalculate >div > div:nth-of-type(3) >div{padding:10px; display: inline-block;}
.datacalculate >div > div:nth-of-type(3) >div:nth-of-type(1),.datacalculate >div > div:nth-of-type(3) >div:nth-of-type(3){width: 43.33%;}
.datacalculate >div > div:nth-of-type(3) >div:nth-of-type(2){font-size: 40px; line-height: 88pt;}
.datacalculate >div > div:nth-of-type(3) >div strong{display: block; color: #FFF;}
.datacalculate >div > div:nth-of-type(3) >div:nth-of-type(1) strong{background: #525e84;}
.datacalculate >div > div:nth-of-type(3) >div:nth-of-type(3) strong{background: #ff9519;}
.datacalculate >div > div:nth-of-type(3) span{display:list-item; margin: 0 0 0 0px; list-style: inside;}
.datacalculate >div > div:nth-of-type(5) >strong{background: #ff99ac;}
.datacalculate >div > div:nth-of-type(5) >span{	 padding: 15px 0 0; display: list-item; margin: 0 0 0 30px;}


.datacalculate >div > div:nth-of-type(2),.datacalculate >div > div:nth-of-type(4){display: flex; align-items: center; padding: 0 20px; text-align: center; font-size: 50px; justify-content: center;}
.datacalculate >div > div:nth-of-type(3){background: #FFF; width: 430px;}
.datacalculate >div > div:nth-of-type(5){background: #FFF; width: 300px;}
.datacalculate >div > div:nth-of-type(3) strong,.datacalculate >div > div:nth-of-type(5) strong{ text-align: center; display: block; padding: 4px 0; margin: 0 0 10px;}



@media(max-width:1000px){
.dataplus div:nth-of-type(3){width: 50%; margin: 20px 0;}
.dataplus span:nth-of-type(2){width: 100%; display: block;}

.datacalculate > div > div:nth-of-type(1),.datacalculate > div > div:nth-of-type(3){width: 45%; margin: 0 0 20px;}
.datacalculate > div > div:nth-of-type(2){width: 10%; text-align: center;}
.datacalculate > div > div:nth-of-type(4){width: 10%;}
.datacalculate > div > div:nth-of-type(5){width: 90%;}
}

@media(max-width:700px){
	.datacalculate > div > div{width: 100% !important ; display: block; margin: 0!important;}
	.datacalculate > div > div:nth-of-type(3) > div:nth-of-type(1), .datacalculate > div > div:nth-of-type(3) > div:nth-of-type(3){width:44.33%}

}

@media(max-width:600px){
.dataplus div:nth-of-type(1) img{right:-65px!important; left: auto; top:0; width: 120px;}
.dataplus div{width: 50%; margin: 20px 0;}
.dataplus span{width: 100%; display: block;}
}

@media(max-width:480px){
	.datacalculate > div > div:nth-of-type(3) > div:nth-of-type(1), .datacalculate > div > div:nth-of-type(3) > div:nth-of-type(3){width:100%;}
	.datacalculate > div > div:nth-of-type(3) > div:nth-of-type(2){line-height: 20pt; text-align: center; display: block!important; float: none;}
	.intro span{width: 100%; margin: 0 0 20px;}
}