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: 183.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: 0.8vw;
        right: 3vw;
        width: 21vw;
        height: 5vw;
    }
    .btn2 {
        top: 45vw;
        left: 48vw;
        width: 20vw;
        height: 5vw;
    }
    .btn3 {
        top: 54vw;
        right: 2vw;
        width: 14.5vw;
        height: 3.5vw;
    }
    .btn4 {
        bottom: 11vw;
        left: 33vw;
        width: 34vw;
        height: 9vw;
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    .container {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 250.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: 3.5vw;
        right: 2vw;
        width: 21vw;
        height: 7.5vw;
    }
    .btn2 {
        top: 224vw;
        left: 14vw;
        width: 71vw;
        height: 14vw;
    }
}