html {
    height:100%;
}
body {
    background-color: #fff;
    font-size: .2rem;
    line-height: 1;
    word-break: normal;
    margin:0;
}
.btn:active {
    -webkit-transform: scaleY(.95);
    transform: scaleY(.95);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
@media (min-width: 768px) {
    .container {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 198.3vw;
        background: url("web_bg_01.jpg"/*tpa=http://me.teenpattisummer.net/web_bg_01.jpg*/) no-repeat;
        background-size: cover;
    }
    .btn {
        position: absolute;
        cursor: pointer;
/*        background: url(./web_btn_01.png) no-repeat;
        background-size: 100% 100%;*/
    }
    .btn1 {
        top: 1vw;
        right: 3vw;
        width: 18vw;
        height: 5vw;
    }
    .btn2 {
        top: 45vw;
        left: 48vw;
        width: 20vw;
        height: 5vw;
    }
    .btn3 {
        top: 54vw;
        right: 2vw;
        width: 13vw;
        height: 3vw;
    }
    .btn4 {
        bottom: 12vw;
        left: 38vw;
        width: 27vw;
        height: 7vw;
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    .container {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 525.6vw;
        background: url("web_bg_02.jpg"/*tpa=http://me.teenpattisummer.net/web_bg_02.jpg*/) no-repeat;
        background-size: cover;
    }
    .btn {
        position: absolute;
        cursor: pointer;
/*        background: url(./web_btn_01.png) no-repeat;
        background-size: 100% 100%;*/
    }
    .btn1 {
        top: 1.5vw;
        right: 5vw;
        width: 32vw;
        height: 9vw;
    }
    .btn2 {
        top: 133vw;
        left: 28vw;
        width: 49vw;
        height: 16vw;
    }
}