/*
html {
    background-color: linear-gradient(to bottom, #ffdfb2 0%, #f4919f 100%);
}
*/

body {
    background-image: url(../img/all/dotBG.png),
        linear-gradient(to bottom, rgba(253, 241, 213, 1), rgba(241, 220, 148, 1));
    background-repeat: repeat, no-repeat;
    height: auto;
    background-size: contain;

}

.banner_wg {
    background: url("../img/all/banner.png") top center;
    background-size: cover;
}

.banner_wg_bk img.pagett {
    margin: auto;
    display: table;
    width: 100%;
    float: none;
    margin-top: 100px;
}

.banner_wg_bk img.day {
    width: 50%;
    display: table;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 66px;
    padding-bottom: 110px;
}

.pagetitle {
    width: 700px;
    margin-top: -40px;
}

.pstext {
    color: #000;
    font-size: 23px;
    text-align: center;
    width: 100%;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: bold;
}

/*動態*/

/*星星01*/
@keyframes star01 {
    0% {
        -moz-transform: scale(0.4);
        transform: scale(0.4);
        opacity: .5;
        top: 13%;
        left: 9%;
    }

    100% {
        -moz-transform: scale(.7);
        transform: scale(.7);
        opacity: 1;
        top: 13%;
        left: 9%;
    }

}

.star01 {
    -webkit-animation: star01 .5s linear;
    -moz-animation: star01 .5s linear;
    animation: star01 .5s linear;
    background: url("../img/index/star01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;
}

/*星星02*/
@keyframes star02 {
    0% {
        -moz-transform: scale(0.2);
        transform: scale(0.2);
        opacity: .5;
        top: 22%;
        left: 13%;
    }

    100% {
        -moz-transform: scale(.6);
        transform: scale(.6);
        opacity: 1;
        top: 22%;
        left: 13%;
    }

}

.star02 {
    -webkit-animation: star02 .4s linear;
    -moz-animation: star02 .4s linear;
    animation: star02 .4s linear;
    background: url("../img/index/star01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;
}

/*星星03*/
@keyframes star03 {
    0% {
        -moz-transform: scale(0.5);
        transform: scale(0.5);
        opacity: .5;
        top: 23%;
        right: 10%;
    }

    100% {
        -moz-transform: scale(.7);
        transform: scale(.7);
        opacity: 1;
        top: 23%;
        right: 10%;
    }

}

.star03 {
    -webkit-animation: star03 .4s linear;
    -moz-animation: star03 .4s linear;
    animation: star03 .4s linear;
    background: url("../img/index/star01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;
}

/*星星04*/
@keyframes star04 {
    0% {
        -moz-transform: scale(0.2);
        transform: scale(0.2);
        opacity: .5;
        top: 8%;
        left: 28%;
    }

    100% {
        -moz-transform: scale(.4);
        transform: scale(.4);
        opacity: 1;
        top: 8%;
        left: 28%;
    }

}

.star04 {
    -webkit-animation: star04 .5s linear;
    -moz-animation: star04 .5s linear;
    animation: star04 .5s linear;
    background: url("../img/index/star01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;
}

/*星星05*/
@keyframes star05 {
    0% {
        -moz-transform: scale(0.4);
        transform: scale(0.4);
        opacity: .5;
        top: 33%;
        left: 56%;
    }

    100% {
        -moz-transform: scale(.7);
        transform: scale(.7);
        opacity: 1;
        top: 33%;
        left: 56%;
    }

}

.star05 {
    -webkit-animation: star05 .4s linear;
    -moz-animation: star05 .4s linear;
    animation: star05 .4s linear;
    background: url("../img/index/star01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;
}

/*星星06*/
@keyframes star06 {
    0% {
        -moz-transform: scale(0.5);
        transform: scale(0.5);
        opacity: .5;
        top: 20%;
        left: 34%;
    }

    100% {
        -moz-transform: scale(.7);
        transform: scale(.7);
        opacity: 1;
        top: 20%;
        left: 34%;
    }

}

.star06 {
    -webkit-animation: star06 .45s linear;
    -moz-animation: star06 .45s linear;
    animation: star06 .45s linear;
    background: url("../img/index/star01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;
}

/*星星07*/
@keyframes star07 {
    0% {
        -moz-transform: scale(0.3);
        transform: scale(0.3);
        opacity: .5;
        top: 13%;
        right: 41%;
    }

    100% {
        -moz-transform: scale(.5);
        transform: scale(.5);
        opacity: 1;
        top: 13%;
        right: 41%;
    }

}

.star07 {
    -webkit-animation: star07 .5s linear;
    -moz-animation: star07 .5s linear;
    animation: star07 .5s linear;
    background: url("../img/index/star01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;
}

/*星星08*/
@keyframes star08 {
    0% {
        -moz-transform: scale(0.4);
        transform: scale(0.4);
        opacity: .5;
        top: 18%;
        right: 21%;
    }

    100% {
        -moz-transform: scale(.5);
        transform: scale(.5);
        opacity: 1;
        top: 18%;
        right: 21%;
    }

}

.star08 {
    -webkit-animation: star08 .35s linear;
    -moz-animation: star08 .35s linear;
    animation: star08 .35s linear;
    background: url("../img/index/star01.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 0;
    position: absolute;
    animation-iteration-count: infinite;
}

@media screen and (max-width: 1600px) {
    .banner_wg_bk {
        width: 73%;
    }

    .banner_wg_bk img.pagett {}

}

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

    /*星星03*/
    @keyframes star03 {
        0% {
            -moz-transform: scale(0.3);
            transform: scale(0.3);
            opacity: .5;
            top: 15%;
            right: 10%;
        }

        100% {
            -moz-transform: scale(.5);
            transform: scale(.5);
            opacity: 1;
            top: 15%;
            right: 10%;
        }

    }

    /*星星05*/
    @keyframes star05 {
        0% {
            -moz-transform: scale(0.3);
            transform: scale(0.3);
            opacity: .5;
            top: 25%;
            left: 54%;
        }

        100% {
            -moz-transform: scale(.5);
            transform: scale(.5);
            opacity: 1;
            top: 25%;
            left: 54%;
        }

    }

    /*星星06*/
    @keyframes star06 {
        0% {
            -moz-transform: scale(0.2);
            transform: scale(0.2);
            opacity: .5;
            top: 12%;
            left: 36%;
        }

        100% {
            -moz-transform: scale(.4);
            transform: scale(.4);
            opacity: 1;
            top: 12%;
            left: 36%;
        }

    }

    /*星星07*/
    @keyframes star07 {
        0% {
            -moz-transform: scale(0.3);
            transform: scale(0.3);
            opacity: .5;
            top: 8%;
            right: 41%;
        }

        100% {
            -moz-transform: scale(.4);
            transform: scale(.4);
            opacity: 1;
            top: 8%;
            right: 41%;
        }

    }

    /*星星08*/
    @keyframes star08 {
        0% {
            -moz-transform: scale(0.3);
            transform: scale(0.3);
            opacity: .5;
            top: 12%;
            right: 21%;
        }

        100% {
            -moz-transform: scale(.4);
            transform: scale(.4);
            opacity: 1;
            top: 12%;
            right: 21%;
        }

    }

}

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

    /*星星01*/
    @keyframes star01 {
        0% {
            -moz-transform: scale(0.2);
            transform: scale(0.2);
            opacity: .5;
            top: 13%;
            left: 9%;
        }

        100% {
            -moz-transform: scale(.4);
            transform: scale(.4);
            opacity: 1;
            top: 13%;
            left: 9%;
        }

    }

    /*星星02*/
    @keyframes star02 {
        0% {
            -moz-transform: scale(0.2);
            transform: scale(0.2);
            opacity: .5;
            top: 26%;
            left: 23%;
        }

        100% {
            -moz-transform: scale(.4);
            transform: scale(.4);
            opacity: 1;
            top: 26%;
            left: 23%;
        }

    }

    /*星星05*/
    @keyframes star05 {
        0% {
            -moz-transform: scale(0.2);
            transform: scale(0.2);
            opacity: .5;
            top: 22%;
            left: 54%;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            opacity: 1;
            top: 22%;
            left: 54%;
        }

    }
}

@media screen and (max-width: 1000px) {
    .banner_wg_bk img.day {
        margin-bottom: 24px;
    }

    .banner_wg_bk {
        width: 83%;
    }
}

@media screen and (max-width: 850px) {
    .banner_wg_bk {
        width: 90%;
    }

}

@media screen and (max-width: 750px) {
    .banner_wg_bk {
        width: 86%;
    }


    .banner_wg_bk img.pagett {
        margin-top: 10px;
    }

    .banner_wg_bk img.day {
        padding-bottom: 70px;
    }

    .pagetitle {
        width: 510px !important;
        margin-bottom: -30px;
    }

    /*星星01*/
    @keyframes star01 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 13%;
            left: 5%;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            opacity: 1;
            top: 13%;
            left: 5%;
        }

    }

    /*星星02*/
    @keyframes star02 {
        0% {
            -moz-transform: scale(0.2);
            transform: scale(0.2);
            opacity: .5;
            top: 20%;
            left: 15%;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            opacity: 1;
            top: 20%;
            left: 15%;
        }

    }

    /*星星03*/
    @keyframes star03 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 8%;
            right: 10%;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            opacity: 1;
            top: 8%;
            right: 10%;
        }

    }

    /*星星04*/
    @keyframes star04 {
        0% {
            -moz-transform: scale(0.2);
            transform: scale(0.2);
            opacity: .5;
            top: 8%;
            left: 16%;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            opacity: 1;
            top: 8%;
            left: 16%;
        }

    }

    /*星星05*/
    @keyframes star05 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 18%;
            left: 52%;
        }

        100% {
            -moz-transform: scale(.2);
            transform: scale(.2);
            opacity: 1;
            top: 18%;
            left: 52%;
        }

    }

    /*星星06*/
    @keyframes star06 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 8%;
            left: 31%;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            opacity: 1;
            top: 8%;
            left: 31%;
        }

    }

    /*星星07*/
    @keyframes star07 {
        0% {
            -moz-transform: scale(0.3);
            transform: scale(0.3);
            opacity: .5;
            top: 8%;
            right: 41%;
        }

        100% {
            -moz-transform: scale(.4);
            transform: scale(.4);
            opacity: 1;
            top: 8%;
            right: 41%;
        }

    }

    /*星星08*/
    @keyframes star08 {
        0% {
            -moz-transform: scale(0.2);
            transform: scale(0.2);
            opacity: .5;
            top: 5%;
            right: 21%;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            opacity: 1;
            top: 5%;
            right: 21%;
        }

    }

}

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

    .pstext {
        font-size: 21px;

    }

    .pagetitle {
        width: 460px !important;
    }


}

@media screen and (max-width: 550px) {
    .banner_wg_bk {
        width: 95%;
    }

    .banner_wg_bk img.day {
        width: 65%;
    }

    .banner_wg {
        background: url("../img/all/banner_m.png") top center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .pagetitle {
        margin-top: -15px;
    }
}

@media screen and (max-width: 450px) {
    .pagetitle {
        width: 90% !important;
        margin-top: -40px;
    }

    .banner_wg_bk img.pagett {
        margin-top: 37px;
    }

    .banner_wg_bk img.tv {
        margin-top: -12px;
    }


    p.pstext {
        font-size: 16px;
    }

    .bt {
        margin-top: -15px;
    }

    .pagetitle {
        width: 370px;
    }

    /*星星01*/
    @keyframes star01 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 8%;
            left: 0%;
        }

        100% {
            -moz-transform: scale(.3);
            transform: scale(.3);
            opacity: 1;
            top: 8%;
            left: 0%;
        }

    }

    /*星星02*/
    @keyframes star02 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 15%;
            left: 5%;
        }

        100% {
            -moz-transform: scale(.2);
            transform: scale(.2);
            opacity: 1;
            top: 15%;
            left: 5%;
        }

    }

    /*星星03*/
    @keyframes star03 {
        0% {
            -moz-transform: scale(0.15);
            transform: scale(0.15);
            opacity: .5;
            top: 5%;
            right: 6%;
        }

        100% {
            -moz-transform: scale(.2);
            transform: scale(.2);
            opacity: 1;
            top: 5%;
            right: 6%;
        }

    }

    /*星星04*/
    @keyframes star04 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 5%;
            left: 13%;
        }

        100% {
            -moz-transform: scale(.2);
            transform: scale(.2);
            opacity: 1;
            top: 5%;
            left: 13%;
        }

    }

    /*星星05*/
    @keyframes star05 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 2%;
            left: 52%;
        }

        100% {
            -moz-transform: scale(.2);
            transform: scale(.2);
            opacity: 1;
            top: 2%;
            left: 52%;
        }

    }

    /*星星06*/
    @keyframes star06 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 8%;
            left: 25%;
        }

        100% {
            -moz-transform: scale(.2);
            transform: scale(.2);
            opacity: 1;
            top: 8%;
            left: 25%;
        }

    }

    /*星星07*/
    @keyframes star07 {
        0% {
            -moz-transform: scale(0.1);
            transform: scale(0.1);
            opacity: .5;
            top: 4%;
            right: 45%;
        }

        100% {
            -moz-transform: scale(.2);
            transform: scale(.2);
            opacity: 1;
            top: 4%;
            right: 45%;
        }

    }

    /*星星08*/
    @keyframes star08 {
        0% {
            -moz-transform: scale(0.05);
            transform: scale(0.05);
            opacity: .5;
            top: 14%;
            right: 26%;
        }

        100% {
            -moz-transform: scale(.15);
            transform: scale(.15);
            opacity: 1;
            top: 14%;
            right: 26%;
        }

    }

}