@charset "utf-8";


body {
    background-image: url(../img/bg.png);
    background-position: center top;
}

a{
    text-decoration: none;
}

#wrapper {
}


#mv {
    position: relative;
    height: 650px;
}

#mv .inner{
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

#mv .header{
    position: absolute;
    left: 0px;
    top: 30px;
}
#mv .header img{
    position: absolute;
    left: 0;top: 0;
}
#mv .header p{
    display: block;
    width: 300px;
    position: absolute;
    left: 160px;
    top: 10px;
    font-weight: bold;

    line-height: 1.5em;
    color: #2fabd3;
}
#mv .header p .t1{
    font-size:140%;
}
#mv .header p .t2{
    font-size:120%;
}
#mv .ill{
    position: absolute;
    right: 0px;
    top: 60px;
}
#mv .bln{
    position: absolute;
}
#mv .bln .in{
    position: absolute;
}
#mv .bln1{
    left:660px;
    top:210px;
}
#mv .bln1 .in{
    left:-120px;
    top:-137px;
}
#mv .bln2{
    left: 870px;
    top: 480px;
}
#mv .bln2 .in{
    left:-50px;
    top:0px;
}
#mv .bln3{
    z-index: 1;
    left: 180px;
    top: 320px;
}
#mv .bln3 .in{
    left:-200px;
    top:-135px;
}
#mv h1{
    display: block;
}
#mv .title1{
    z-index: 1;
    position: absolute;
    left: 20px;
    top: 260px;
}
#mv .title2{
    z-index: 1;
    position: absolute;
    left: 20px;
    top: 330px;
}

#mv .title3{
    z-index: 1;
    position: absolute;
    left: 220px;
    top: 480px;
}

#mv .sns{
    position: absolute;
    right: 0px;
    top: 25px;
    width: 320px;
}
#mv .facebook{
    position: absolute;
    left:0;
    top: 0;
}
#mv .twitter{
    position: absolute;
    left:110px;
    top: 0;
}
#mv .hatena{
    position: absolute;
    left:200px;
    top: 0;
}

#menu{
    margin-top: -50px;
    background-image: url(../img/menu_line.png);
    background-repeat: repeat-x;
    background-position: center center;
}
#menu ul{
    background-image: url(../img/menu_base.png);
    background-repeat: no-repeat;
    width: 676px;height: 87px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#menu ul a{
    display: block;
    position: absolute;
    top: 27px;
}
#menu ul a.menu_1{
    left: 45px;
}
#menu ul a.menu_2{
    left: 270px;
}
#menu ul a.menu_3{
    left: 470px;
}

#prologue {
    background-image: url(../img/prologue_ill.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#prologue .inner{
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

#prologue .tit{

}
#prologue .read{
    padding-top: 50px;
}
#prologue .read p{
    color: #004fad;
    font-size: 200%;
    line-height: 2em;
    font-weight: bold;
    letter-spacing: 0.1em;
    vertical-align:baseline;
}
#prologue .read p span{
    color: #f3738a;
    font-size:110%;
}
#prologue .read p img{
    width: 80px;
    vertical-align:baseline;
}

#prologue .check{
    padding-top: 30px;
}

#maincontent {
    background: #75c1ef; /* Old browsers */
    background: -moz-linear-gradient(top, #75c1ef 0%, #a8c668 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #75c1ef 0%,#a8c668 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #75c1ef 0%,#a8c668 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75c1ef', endColorstr='#a8c668',GradientType=0 ); /* IE6-9 */

}
#maincontent #profile{
}

#maincontent #profile .inner{
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 40px;
    padding-bottom: 60px;
}
#maincontent #profile .card{
    width: 310px;
    height: 500px;
    margin-left: 15px;
    margin-right: 15px;
    float: left;
    text-align: center;
    position: relative;
}

#maincontent #profile .card .name{
    position: absolute;
    top: 340px;
    left: 0;
    width: 100%;
    color: #004fad;
    font-size:230%;
    font-weight: bold;
}
#maincontent #profile .card .body{
    position: absolute;
    top: 380px;
    left: 0;
    width: 100%;
    color: #fff;
    font-size:130%;
    line-height: 1.5em;
}





#maincontent #result{
}

#maincontent #result .inner{
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 60px;
}

#maincontent #result .tit{
    text-align: center;
}

#maincontent #result .sec{
    margin-top: 200px;
    position: relative;
}
#maincontent #result .sec .stit{
    position: absolute;
    left: 10px;
    top: -180px;
}
#maincontent #result .sec .chart{
    position: relative;
}
#maincontent #result .sec .bln{
    position: absolute;
}
#maincontent #result .sec .bln .in{
    position: absolute;
}

#maincontent #result .sec1{
   margin-top: 140px;
}



/* モッチー吹き出し */
#maincontent #result .sec1 .bln1{
    left: 463px;
    top: 188px;
}
#maincontent #result .sec1 .bln1 .in{
    left: -100px;
    top: -16px;
}
#maincontent #result .sec1 .bln2{
     left: 779px;
    top: 185px;
}
#maincontent #result .sec1 .bln2 .in{
    left: -80px;
    top: 0px;
}
#maincontent #result .sec1 .bln3{
    left: 938px;
    top: 128px;
}
#maincontent #result .sec1 .bln3 .in{
    left: -80px;
    top: -100px;
}
/* #maincontent #result .sec1 .bln4{
    left: 670px;
    top: 45px;
}
#maincontent #result .sec1 .bln4 .in{
    left: -90px;
    top: -124px;
} */





/* 佐藤ちゃん吹き出し */
#maincontent #result .sec2 .bln1{
    left: 149px;
    top: 240px;
}
#maincontent #result .sec2 .bln1 .in{
    left: -64px;
    top: 0px;
}
#maincontent #result .sec2 .bln2{
    left: 306px;
    top: 114px;
}
#maincontent #result .sec2 .bln2 .in{
    left: -53px;
    top: -100px;
}
#maincontent #result .sec2 .bln3{
    left: 622px;
    top: 134px;
}
#maincontent #result .sec2 .bln3 .in{
    left: -64px;
    top: -84px;
}
#maincontent #result .sec2 .bln4{
    left: 938px;
    top: 104px;
}
#maincontent #result .sec2 .bln4 .in{
    left: -68px;
    top: -120px;
}





/* ユキさん吹き出し */
#maincontent #result .sec3 .bln1{
    left: 148px;
    top: 200px;
}
#maincontent #result .sec3 .bln1 .in{
    left: -65px;
    top: 0px;
}
#maincontent #result .sec3 .bln2{
    left: 464px;
    top: 168px;
}
#maincontent #result .sec3 .bln2 .in{
    left: -80px;
    top: 0px;
}
#maincontent #result .sec3 .bln3{
    left: 938px;
    top: 124px;
}
#maincontent #result .sec3 .bln3 .in{
    left: -68px;
    top: -96px;
}
/* #maincontent #result .sec3 .bln4{
    left: 670px;
    top: 45px;
}
#maincontent #result .sec3 .bln4 .in{
    left: -90px;
    top: -124px;
} */








#slide{
    background-image: url(../img/slide_bg.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    -webkit-background-size: 100% 464px;
    background-size: 100% 464px;
}
#slide .inner{
    width: 870px;
    height: 680px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}



#slide .slides{
    position: absolute;
    left: 95px;
    top: 0;
    width: 680px;
    height: 500px;
    background-color: rgba(255,255,255,0.3);
    border-radius:6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    overflow: hidden;
}
#slide .slides .slide{
    position: absolute;
    top: 0;left: 0;
    padding: 20px;
    width: 640px;

}

#slide .slides .slide .caption{
    margin-top: 20px;
    color: #717171;
    text-align: center;
    font-size: 120%;
    line-height: 1em;
}



#slide .prev{
    position: absolute;
    left: 0;
    top: 200px;
}
#slide .next{
    position: absolute;
    right: 0;
    top: 200px;
}

#slide .copy{
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 530px;
}



#solution{
    position: relative;
    z-index: 1;
}

#solution .inner{

    padding-top: 50px;
    padding-bottom: 80px;
    position: relative;
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
}

#solution .back{
    position: absolute;
    right: -80px;
    bottom: 0;
}


#solution .tit{
    text-align: center;
}
#solution .clearfix{
    position: relative;
    padding-top: 50px;
}
#solution .text{
    float: left;
    width: 468px;
    color: #fff;
    font-weight: bold;
}
#solution .text .stit{
    font-size:240%;
    font-weight: bold;
    line-height: 1.35em;
}
#solution .text .body{
    margin-top: 30px;
    font-size:150%;
    font-weight: bold;
    line-height: 1.65em;
}

#solution .images{
    float: right;
    width: 527px;
    position:relative;
}
#solution .images .image{
    position:absolute;
    left: 0;
/*    top: 60px;*/
}
#solution .images .link{
    width: 100%;
    position:absolute;
    right: 30px;
    top: 280px;
    text-align: right;
}



#product{
    position: relative;
    z-index: 1;
}

#product .inner{

    padding-top: 50px;
    padding-bottom: 80px;
    position: relative;
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
}

#product .back{
    position: absolute;
    right: -80px;
    bottom: 0;
}


#product .tit{
    text-align: center;
}
#product .clearfix{
    position: relative;
    padding-top: 50px;
}
#product .text{
    float: left;
    width: 468px;
    color: #fff;
    font-weight: bold;
}
#product .text .stit{
    font-size:240%;
    font-weight: bold;
    line-height: 1.35em;
}
#product .text .body{
    margin-top: 30px;
    font-size:150%;
    font-weight: bold;
    line-height: 1.65em;
}

#product .images{
    float: right;
    width: 527px;
    position:relative;
}
#product .images .image{
    position:absolute;
    left: 0;
    top: 60px;
}
#product .images .link{
    width: 100%;
    position:absolute;
    right: 30px;
    top: 280px;
    text-align: right;
}

#footer{
    z-index: 0;
    position: relative;
    background-color: #000;
    height: 30px;
    margin-top: -30px;
}


#footersns{
    margin-top: -30px;
    z-index: 999;
    position: relative;
    height: 30px;
}
#footersns .inner{
    position: relative;
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
}

#footersns .logo{
    float: left;
    padding-top: 8px;
    display: block;
    margin-right: 20px;
}

#footersns .copyright{
    float: left;
    display: block;
    color: #fff;
    font-size:70%;
    line-height: 1em;
    padding-top: 11px;
}

#footersns .sns{
    z-index: 999;
    position: absolute;
    right: -20px;
    top: 4px;
    width: 320px;
}
#footersns .facebook{
    position: absolute;
    left:0;
    top: 0;
}
#footersns .twitter{
    position: absolute;
    left:110px;
    top: 0;
}
#footersns .hatena{
    position: absolute;
    left:200px;
    top: 0;
}







/*coming start*/



.coming #slide{
    margin-top: -280px;
}
.coming #slide .inner{
    height: 464px;
}
.coming #slide .copy{
    top: 300px;
}



@media only screen and (max-width: 640px) {
    .coming #slide{
        margin-top: -220px;
    }
    .coming #slide .inner{
        height: 350px;
    }
    .coming #slide .copy{
        top: auto;
        padding-top: 260px;
    }

}


/*coming end*/