* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    overflow:hidden;
    font-size:0;
}

/*@font-face {
  font-family: font-regular;
  src: url(/font/ZurichBT.ttf);
}

@font-face {
  font-family: font-bold;
  src: url(/font/ZurichBoldBT.ttf);
}*/

html, body {
    height:100%;
    background-color:#000;
}

/*a, p, span, h1, h2, h3 {
    font-family: font-regular;
}*/

.portrait {
    display:none;
    background-color:#fff;
    position:fixed;
    left:0;right:0;
    top:0;bottom:0;
    z-index:50;
}

    .portrait img {
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:80%;
    }

    .portrait p {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        line-height: 1.3em;
        letter-spacing: 0.1em;
        color: #000;
        font-size: 1.1em;
    }

@media all and (orientation:portrait) {
    .portrait {
        display: block;
    }
}

.loading {
    display:none;
    position:fixed;
    left:0;top:0;
    width:100%;height:100%;
    background-color: rgb(0 0 0 / 40%);
}

    .loading span {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        text-align: center;
        color: #fff;
        padding: 40px;
        font-size: 20px;
    }

.base {
    height:100%;
    position:relative;
}

    .base .view-16-9 {
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);    
    }

    .base .view-16-9 #video {
        height:100%;
    }

.base .view-not-16-9 {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);    
}

.base .view-not-16-9 #video {
    width:100%;
}

.btn-start {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:1;
    height:230px;
    width:230px;
    transition: ease-out 0.2s;
}

@media only screen and (max-width: 850px) {
    .btn-start {
        height:120px;
        width:120px;
    }
}

.btn-start:hover {
    transform:translate(-50%,-50%) scale(1.1);
    transition: ease-in 0.2s;
}

    .btn-start img {
        width:100%;
        height:100%;
    }

.lnkbtn {
    display:none;
    position: absolute;
    /*border: 2px solid red;*/
}

.lnkbtn.yes.intro {
    left: 44%;
    top: 56%;
    width: 21%;
    height: 13%;
}

.lnkbtn.no.intro {
    left: 67.5%;
    top: 56%;
    width: 21%;
    height: 13%;
}

.lnkbtn.yes.intro-next, .lnkbtn.yes.history,
.lnkbtn.yes.porfolio, .lnkbtn.yes.diff,
.lnkbtn.yes.busi, .lnkbtn.yes.sell {
    left: 73%;
    top: 80%;
    width: 21%;
    height: 14%;
}

.lnkbtn.yes.fuji {
    left: 31.5%;
    top: 29%;
    width: 16.5%;
    height: 14%;
}

.lnkbtn.no.fuji {
    left: 52.15%;
    top: 29%;
    width: 16.5%;
    height: 14%;
}

.lnkbtn.yes.fuji-try {
    left: 32.5%;
    top: 26%;
    width: 38.5%;
    height: 17%;
}

.lnkbtn.yes.fuji-method {
    left: 32.1%;
    top: 15%;
    width: 38.9%;
    height: 19%;
}

.lnkbtn.no.fuji-method {
    left: 32.1%;
    top: 35.5%;
    width: 38.9%;
    height: 19%;
}

.lnkbtn.yes.fuji-method-next {
    left: 72.8%;
    top: 80%;
    width: 21.9%;
    height: 14%;
}

.lnkbtn.share {
    left: 42.1%;
    top: 57%;
    width: 18.9%;
    height: 11%;
}

.lnkbtn.replay {
    left: 42.1%;
    top: 69%;
    width: 18.9%;
    height: 11%;
}

.play-pause {
    display:none;
    position:absolute;
    top: 30px;
    right: 30px;
    width: 50px;
}

    .play-pause img {
        width:100%;
    }

.reset {
    display:none;
    position:absolute;
    top: 30px;
    left: 30px;
    width: 50px;
}

    .reset img {
        width:100%;
    }

@media only screen and (max-width: 850px) {
    .play-pause, .reset {
        width: 30px;
        top:20px;
    }

    .play-pause {
        right:20px;
    }

    .reset {
        left:20px;
    }
}

/*.options, .tryagain, .thankyou {
    display:none;
}

    .options a {
        position: absolute;
        top: 68%;
        width: 33%;
        height: 23%;
    }

    .options a.yes {
        left:12%
    }

    .options a.no {
        left:56%;
    }

    .tryagain a {
        position: absolute;
        top: 61%;
        width: 28%;
        height: 21%;
        left: 36%;
    }

    .thankyou .btn-donate {
        position: absolute;
        left: 58%;
        top: 75%;
        width: 34%;
        height: 14%;
    }

    .thankyou .btn-share, .thankyou .share-list {
        position: fixed;
        right: 115px;
        top: -2px;
    }

        .thankyou .btn-share img, .thankyou .share-list img {
            width:70px;
        }

    .thankyou .share-list {
        display:none;
    }

        .thankyou .share-list .lnk {
            position: absolute;
            width: 100%;
            left: 0;
            height: 14%;
        }

        .thankyou .share-list .lnk.fb {
            top: 23%;
        }

        .thankyou .share-list .lnk.tw {
            top: 38.5%;
        }

        .thankyou .share-list .lnk.in {
            top: 53.5%;
        }

        .thankyou .share-list .lnk.wa {
            top: 68.5%;
        }

        .thankyou .share-list .lnk.em {
            top: 83.5%;
        }

@media only screen and (max-width: 850px) {
    .thankyou .btn-share, .thankyou .share-list {
        right: 55px;
    }

    .thankyou .btn-share img, .thankyou .share-list img {
        width: 40px;
    }
}*/