header {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 1px;
}

    header .logotype {
        position: absolute;
        top: 37px;
        left: 50px;
        padding: 10px 10px 10px 10px;
    }

        header .logotype img {
            width: 175px;
            height: auto;
        }

        header .logotype .logo02 {
            display: none;
        }


    header .iconNav {
        display: none;
        position: absolute;
        top: 71px;
        right: 72px;
        width: 47px;
        height: 47px;
        text-align: center;
        border: 1px solid #fff;
    }

        header .iconNav img {
            width: 20px;
            height: auto;
        }

        header .iconNav .icon02 {
            display: none;
        }


    /* v1 */
    header.v1 .logotype .logo01 {
        display: none;
    }

    header.v1 .logotype .logo02 {
        display: block;
    }

    header.v1 .iconNav {
        border: 1px solid #000;
    }

        header.v1 .iconNav .icon01 {
            display: none;
        }

        header.v1 .iconNav .icon02 {
            display: inline-block;
        }
    /* end - v1 */


    /* v2 */
    header.v2 .logotype {
        top: 18px;
        left: 38px;
    }

        header.v2 .logotype img {
            width: 80px;
            height: auto;
        }
    /* end - v2 */



    header.sst-StartAnim .logotype {
        -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
        -moz-transition: opacity 0.5s 0.2s -moz-transform 0.5s 0.2s;
        -ms-transition: opacity 0.5s 0.2s, -ms-transform 0.5s 0.2s;
        -o-transition: opacity 0.5s 0.2s, -o-transform 0.5s 0.2s;
        transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
    }
/* END - sst-StartAnim */





@media all and (max-width: 767px) {

    header .logotype {
        top: 22px;
        left: 22px;
    }

        header .logotype img {
            width: 180px;
        }

    header.v2 .logotype {
        top: 22px;
        left: 22px;
    }

        header.v2 .logotype img {
            width: 51px;
        }

    header .iconNav {
        display: block;
        top: 32px;
        right: 32px;
    }

}

@media all and (min-width: 768px) and (max-width: 1023px) {

    header .logotype {
        top: 54px;
        left: 54px;
    }

        header .logotype img {
            width: 96px;
        }

    header .iconNav {
        display: block;
        top: 64px;
        right: 64px;
        width: 96px;
        height: 96px;
        border: 3px solid #fff;
    }

        header .iconNav img {
            width: 42px;
        }

    /* v2 */
    header.v2 .logotype {
        top: 54px;
        left: 54px;
    }

        header.v2 .logotype img {
            width: 96px;
        }
    /* end - v2 */


}

@media all and (min-width: 1024px) and (max-width: 1199px) {
}

@media all and (min-width: 1200px) and (max-width: 1399px) {
}