@charset "UTF-8";

*{box-sizing:border-box;margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent;}
h1,h2,h3,h4,h5,h6,p{margin:20px 0}
h1{font-size:20px;line-height:22px}
h2{font-size:18px;line-height:20px}
h3{font-size:16px;line-height:18px}
p{font-size: 16px;line-height:28px;}
img{max-width:100%;height:auto;vertical-align:middle;}
a,
a:hover,
a:focus{text-decoration:none}
a:hover img{opacity:0.8}
body{background:url(../img/bg.png);line-height:1.7;height:100%;font-family:'Noto Sans Japanese',Verdana,YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; font-weight:200;}

/*layout*/
.container{width:100%;max-width:930px;padding-left:15px;padding-right:15px;margin:auto}

/*header*/
.header{background-color:#03c0ff;margin:0;border-radius:0}
.header .container{max-width:1200px}
.header-brand{margin:10px 0;display:inline-block}

/*top-visual*/
.top-bg{background:url(../img/bg1.png) top repeat-x}
.top-visual{text-align:center;margin:0 0 10px}
.top-visual h1{margin:0 auto;padding: 10px 10px 0;width:100%;max-width:1080px;}
@media (max-width:425px){
.top-visual h1 img{width: 100%;margin: 0 -50%;max-width: none;}
}
.top-visual-copy{margin:-3% auto 0;background-size:100%;max-width:800px;}
.osusume{margin:-5% 0 0 0}
.osusume img{width:200px;max-width:40%}

/*feature*/
.feature{border:1px solid #03c0ff;background-color:white;padding:30px;border-radius:5px;margin:0 0 40px 0}
.feature:before{content:'';background:url(../img/feature-border-img.png)no-repeat;background-size:100%;margin:-43px 0 0 -43px;float:left;width:38px;height:40px}
@media (max-width:425px){
    .feature{padding:20px 10px}
    .feature:before{background:none}
}
.feature-img{text-align:center;margin:0 0 10px 0}
@media (max-width:767px){
    .feature-img img{width: 80px;}
}
.feature h2{color:#03c0ff;font-size:26px;line-height:36px;text-align:left;margin:0 0 10px;font-weight:bold;text-align:justify}
.feature h2 img{float:left;margin:0 10px 0 0}
.feature p{font-size: 16px;line-height:28px;margin:0 0 20px 0;text-align:justify;}
@media (max-width:425px){
    .feature h2{font-size:24px}
    .feature h2 img{float:none;display:block;margin:0 auto 20px}
    .feature p{line-height:24px}
}
.feature-info:before{content:'';display:block;height:30px;background:url(../img/feature-info-top.png) no-repeat top center}
.feature-info{background:url(../img/bg2.png);padding: 0 20px 10px;border-radius:5px;}
.feature-info-btn{margin:0;padding:3% 0}
.feature-info-btn li{display:inline-block;margin:0 10px 10px 0}
@media (max-width:425px){
    .feature-info-btn li{width:100%}
}
.feature-info-btn li a{display:block;color:#92cd4c;border:3px solid #92cd4c;font-size: 15px;font-weight:bold;line-height:1;padding:15px 15px 15px 27px;border-radius:10px;background:url(../img/feature-info-btn-icon.png)10px center;background-repeat:no-repeat;background-size:auto 20px;background-color:#fff;}
.feature-info-btn li a:hover{background-color:#a7db69;color:#fff}
.feature-info-ttl{text-align:center;margin:0 0 10px 15px}
@media (max-width:767px){
    .feature-info-ttl{margin:0 auto 10px;width:100px}
}

/*function*/
.function-top{background-color:#a7db69;color:white;text-align:center;overflow:hidden}
.function-top h2{margin:0;padding:94px 10px 0;color:#fff;background-color:#92cc4e;background:url(../img/function-top-bg_.png) top center;background-repeat:no-repeat;font-size:38px;font-weight:bold;height:210px}
.function-ttl{background:url(../img/bg3.png);color:white;border-bottom:4px solid #6ca22e;font-size:26px;line-height:28px;padding:15px 0 12px;margin:0;font-weight:bold}
.function-ttl img{margin:-8px 10px -4px 0;height:40px}
@media (max-width:425px){
    .function-top h2{font-size:34px}
    .function-ttl{font-size:20px;padding:10px 0 10px}
    .function-ttl img{margin:-8px 4px -4px 0;height:30px}
}
.function-txt{margin:20px 0}
.function-txt ul{padding:0 0 0 20px;list-style-image:url(../img/list-mark.png)}
.function-txt ul li{margin:0 0 15px 0;font-size: 16px;line-height: 1.7;}
.function-btn{margin:0 auto;padding: 30px 0 30px;max-width:1280px;}
.function-btn li{display:inline-block;margin-bottom:20px;margin-top:20px;padding:5px}
.function-btn li a span{color:#92cd4c;padding:10px;display:block;background-color:#fff;border:#92cd4c solid 4px;border-radius:15px;font-weight: 400;}
.function-btn1 a{background:url(../img/function1.png)no-repeat top center}
.function-btn2 a{background:url(../img/function2.png)no-repeat top center}
.function-btn3 a{background:url(../img/function3.png)no-repeat top center}
.function-btn4 a{background:url(../img/function4.png)no-repeat top center}
.function-btn5 a{background:url(../img/function5.png)no-repeat top center}
.function-btn6 a{background:url(../img/function6.png)no-repeat top center}
.function-btn7 a{background:url(../img/function7.png)no-repeat top center}
.function-btn8 a{background:url(../img/function8.png)no-repeat top center}
.function-btn9 a{background:url(../img/function9.png)no-repeat top center}
.function-btn10 a{background:url(../img/function10.png)no-repeat top center}
.function-btn a{padding:80px 0 0 0;display:block;background-size:auto 70px}
.function-btn a:hover span{background-color:#92cd4c;color:#fff}

@media (min-width:768px) and (max-width:1067px){
    .function-btn6{clear:both}
    .function-btn{margin:0 -70px}
}
@media (max-width:767px){
    .function-btn li a span{
    height:68px;
    display: table-cell;
    vertical-align: middle;
    width: 33.33%;
    padding: 5px;
}
    .function-btn{margin:0 10px}
}
@media (max-width:425px){
    .function-btn li{margin-top:0}
    .function-btn a{padding:50px 0 0 0;background-size:auto 40px;}
}

/*newcreate btn*/
.newcreate.btn{text-align:center;margin:40px 0;display:block}
.newcreate.btn a{display:inline-block;background-color:#ff6853;color:white;font-size:30px;line-height:1;padding:5% 0;width:658px;border-radius:20px;font-weight:bold;border-bottom:10px solid #e74b35;max-width:100%}
.newcreate.btn a:hover{background-color:#ff7a67}
@media (max-width:425px){
    .newcreate.btn a{font-size:20px}
}

/*footer-link*/
.footer-link{text-align:center}
.footer-link li{display:inline-block;margin:10px 7px}
.footer-link li a{color:#666;font-size:16px}

/*copyright*/
.copyright{text-align:center;font-size:14px;padding:35px;background-color:#ececec;color:#999;margin:40px 0;font-weight:bold}

/*top-link*/
.top-link a{position:fixed;bottom:15px;right: 15px;}
.top-link img{width:40px}