@charset "utf-8";






@media print,screen and (min-width: 751px) {


    #intro{
        background-image: url(../img/back2.png);
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding: 100px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        margin-bottom: 100px;
    }

    #intro h2{
        margin-top: 20px;
    }

    #intro .read{
        margin-top: 20px;
        color: #659902;
        font-size: 150%;
    }

    #intro .boardarea{
        position: relative;
        margin-top: 30px;
    }

    #intro .boardarea img{
        width: 100%;
    }


    #intro .boardarea .doctor{
        position: absolute;
        left: -60px;
        bottom: -20px;
        width: 20%;
    }
    #intro .boardarea .girl{
        position: absolute;
        right: -60px;
        bottom:-20px;
        width: 20%;
    }

    #intro .boardarea .bln{
        position: absolute;
    }

    #intro .boardarea .bln span{
        position: relative;
        display: block;
    }


    #intro .boardarea .b01{
        left: 11%;
        top:16%;
        width: 15%;
    }
    #intro .boardarea .b02{
        left: 18%;
        top:35%;
        width: 24%;
    }

    #intro .boardarea .b03{
        left: 13%;
        top:64%;
        width: 22%;
    }
    #intro .boardarea .b04{
        left: 36%;
        top:20%;
        width: 28%;
    }
    #intro .boardarea .b05{
        left: 39%;
        top:60%;
        width: 24%;
    }

    #intro .boardarea .b06{
        left: 70%;
        top:14%;
        width: 22%;
    }

    #intro .boardarea .b07{
        left: 58%;
        top:36%;
        width: 25%;
    }
    #intro .boardarea .b08{
        left: 70%;
        top:70%;
        width: 16%;
    }







    #intro .btn{
        margin-top: 70px;
    }
    #intro .btn a{
        display: inline-block;
        background-color: #659902;
        border-radius: 10px;
        padding: 30px 100px;
        line-height: 1em;
        color: #fff;
        font-weight: bold;
        font-size: 160%;
        text-align: center;
        text-decoration: none;
        background-image: url(../img/arrow.png);
        background-repeat: no-repeat;
        background-position: 97% center;
    }



}




@media print,screen and (min-width: 751px) and (max-width: 1200px) {


    #intro{
        width: 1000px;
    }




}




@media only screen and (max-width: 750px) {


    #intro{
        margin-top: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
        margin-bottom: 50px;
        background-image: url(../img/back2.png);
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    #intro .balloon{
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    #intro h2{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }

    #intro .read{
        margin-top: 20px;
        color: #659902;
        font-size: 110%;
    }

    #intro .boardarea{
        position: relative;
        margin-top:20px;
    }


    #intro .boardarea .bln{
        position: absolute;
    }
    #intro .boardarea .bln span{
        position: relative;
        display: block;
    }


    #intro .boardarea .b01{
        left: 5%;
        top:11%;
        width: 27%;
    }
    #intro .boardarea .b02{
        left: 6%;
        top:25%;
        width: 36%;
    }

    #intro .boardarea .b03{
        left: 6%;
        top:42%;
        width: 34%;
    }
    #intro .boardarea .b04{
        left: 30%;
        top:16%;
        width: 40%;
        z-index: 1;
    }
    #intro .boardarea .b05{
        left: 32%;
        top:36%;
        width: 36%;
    }

    #intro .boardarea .b06{
        left: 65%;
        top:12%;
        width: 32%;
    }

    #intro .boardarea .b07{
        left: 60%;
        top:26%;
        width: 36%;
    }
    #intro .boardarea .b08{
        left: 68%;
        top:43%;
        width: 28%;
    }




    #intro .boardarea .charas{
        margin-top: 20px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content:space-between;
        -ms-align-items:flex-end ;
        align-items:flex-end ;
    }
    #intro .boardarea .doctor{
        width: 45%;
    }

    #intro .boardarea .girl{
        width: 45%;
    }

    #intro .btn{
        margin-top: 20px;
    }
    #intro .btn a{
        display:block;
        background-color: #659902;
        border-radius: 10px;
        padding: 20px 40px;
        line-height: 1em;
        color: #fff;
        font-weight: bold;
        font-size: 110%;
        text-align: center;
        text-decoration: none;
        background-image: url(../img/arrow.png);
        background-repeat: no-repeat;
        background-position: 97% center;
    }





}