@charset "UTF-8";

/*ボタンとかぶるのでページトップボタンは消す*/
.mainftr__totop{
    display:none;
}
/*プレビュー画面*/
.navi .panel{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-align-content:center;
    align-content:center;
    -webkit-justify-content: center;
    justify-content: center;
	-webkit-align-items:stretch;
	align-items:stretch;
    background:#90c31f;
    padding:10px;
/*    height:calc(100vh - 60px);*/
}
.preview{
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
    margin:0 auto;
    width:100%;
    position:relative;
}
.preview > * {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    margin:0;
    padding:0;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width:auto;
    max-width:100%;
    max-height:100%;
}
.no-flexbox .preview{
    height:50%;
}
@media screen and (orientation: landscape) {
    .navi .panel{
        -webkit-flex-direction:row;
        flex-direction:row;
        -webkit-justify-content:center;
        justify-content:center;
    }
}

/*ボタンのデザイン*/
.preview__btn{
    -webkit-flex: 0 0 16vw;
    flex: 0 0 16vw;
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content: center;
    justify-content: center;
	-webkit-align-items:center;
	align-items:center;
    -webkit-flex-direction:column;
    flex-direction:column;
    width:16vw;
    height:16vw;
    border:solid 3px #fff;
    border-radius:15px;
    background: #90c31f;
    background: linear-gradient(
        #a6cf4c 50%,
        #90c31f 50.1%,
        #90c31f 93%,
        #a6cf4c 93.1%
    );
    box-shadow:0 0 0 3px #90c31f inset;
    color:#fff;
    text-shadow:#90c31f -1px -1px 0;
    font-size:0.67rem;
    text-align:center;
    font-weight:bold;
    text-decoration:none;
    line-height:1.1;
}
.preview__btn:before{
    content:"";
    display:block;
    -webkit-flex: 0 0 40%;
	flex: 0 0 40%;
    width:40%;
    height:40%;
    margin:0.15em;
}
.oldchrome .preview__btn:before{
    -webkit-flex: 1 1 40%;
	flex: 1 1 40%;
}
.preview__btn--up:before{
    background:url(../../images/navi/icon_arrow.svg) no-repeat 50% 50%;
    background-size:contain;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.preview__btn--down:before{
    background:url(../../images/navi/icon_arrow.svg) no-repeat 50% 50%;
    background-size:contain;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.preview__btn--left:before{
    background:url(../../images/navi/icon_arrow.svg) no-repeat 50% 50%;
    background-size:contain;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.preview__btn--right:before{
    background:url(../../images/navi/icon_arrow.svg) no-repeat 50% 50%;
    background-size:contain;
}
.preview__btn--zoomin:before{
    background:url(../../images/navi/icon_plus.svg) no-repeat 50% 50%;
    background-size:contain;
}
.preview__btn--zoomout:before{
    background:url(../../images/navi/icon_minus.svg) no-repeat 50% 50%;
    background-size:contain;
}
.preview__btn--rotl:before{
    background:url(../../images/navi/icon_rotate_l.svg) no-repeat 50% 50%;
    background-size:contain;
}
.preview__btn--rotr:before{
    background:url(../../images/navi/icon_rotate_r.svg) no-repeat 50% 50%;
    background-size:contain;
}
.no-flexbox .preview__btn{
    display:table;
    margin:0 auto;
}
.no-flexbox .preview__btn > *{
    display:table-cell;
    vertical-align:middle;
}
.no-cssvwunit .preview__btn{
    height:60px;
    width:60px;
}
@media screen and (min-width: 425px) {
    .preview__btn{
        flex:0 0 70px;
        width:70px;
        height:70px;
    }
}
@media screen and (min-width: 763px) {
    .preview__btn{
        flex:0 0 90px;
        width:90px;
        height:90px;
        border:solid 4px #fff;
        box-shadow:0 0 0 4px #90c31f inset;
    }
}

/*ボタン群の配置*/
.preview__ctrl{
    -webkit-flex:0 0 46vw;
    -webkit-flex:0 0 calc(48vw - 8px);
    flex:0 0 calc(48vw - 8px);
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    margin-top:10px;
}
.preview__ctrl__other{
    -webkit-flex:0 0 32vw;
    flex:0 0 32vw;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
	-webkit-justify-content:center;
	justify-content:center;
}
.preview__ctrl__zoom,
.preview__ctrl__rot{
    display:-webkit-flex;
    display:flex;
    margin:5px 0;
    background:#fff;
    border-radius:15px;
}
.no-flexbox .preview__ctrl{
    letter-spacing:-0.4em;
    text-align:center;
}
.no-flexbox .preview__ctrl > *{
    letter-spacing:normal;
    display:inline-block;
    vertical-align:middle;
    margin:20px;
}
.no-flexbox .preview__ctrl__zoom,
.no-flexbox .preview__ctrl__rot{
    display:block;
    letter-spacing:-0.4em;
}
.no-flexbox .preview__ctrl__zoom > *,
.no-flexbox .preview__ctrl__rot > *{
    display:inline-block;
    letter-spacing:normal;
}
@media screen and (min-width: 425px) {
    .preview__ctrl{
        -webkit-flex:0 0 202px;
        flex:0 0 202px;
    }
    .preview__ctrl__other{
        -webkit-flex:0 0 140px;
        flex:0 0 140px;
    }
}
@media screen and (orientation: landscape) {
    .preview__ctrl{
        -ms-flex:0 0 192px;
        -webkit-flex:0 0 192px;
        flex:0 0 192px;
        -webkit-flex-direction:column;
        flex-direction:column;
        -webkit-justify-content:space-around;
        justify-content:space-around;
        -webkit-align-items:center;
        align-items:center;
        margin-left:15px;
    }
}
@media screen and (min-width: 763px) {
    .preview__ctrl{
        -ms-flex:0 0 252px;
        -webkit-flex:0 0 252px;
        flex:0 0 252px;
    }
    .preview__ctrl__other{
        width:180px;
        -webkit-flex:0 0 180px;
        flex:0 0 180px;
    }
}
/*十字ボタンの配置*/
.preview__ctrl__dpad{
    position:relative;
    width:16vw;
    height:16vw;
    margin:16vw;
    margin:calc(16vw - 4px) calc(16vw - 9px);
    background:#fff;
}
.preview__btn--up{
    position:absolute;
    left:0;
    top:-14vw;
    top:calc(10px - 16vw);
    margin:0;
}
.preview__btn--down{
    position:absolute;
    left:0;
    bottom:-14vw;
    bottom:calc(10px - 16vw);
    margin:0;
}
.preview__btn--left{
    position:absolute;
    left:-14vw;
    left:calc(10px - 16vw);
    bottom:0;    
    margin:0;
}
.preview__btn--right{
    position:absolute;
    right:-14vw;
    right:calc(10px - 16vw);
    bottom:0;    
    margin:0;
}
.no-flexbox .preview__ctrl__dpad{
    margin:16vw;
}
.no-csscalc .preview__ctrl__dpad,
.no-cssvwunit .preview__ctrl__dpad{
    margin:40px;
    height:60px;
    width:60px;
}
.no-csscalc .preview__btn--up,
.no-cssvwunit .preview__btn--up{
    top:-50px;
}
.no-csscalc .preview__btn--down,
.no-cssvwunit .preview__btn--down{
    bottom:-50px;
}
.no-csscalc .preview__btn--left,
.no-cssvwunit .preview__btn--left{
    left:-50px;
}
.no-csscalc .preview__btn--right,
.no-cssvwunit .preview__btn--right{
    right:-50px;
}
@media screen and (min-width: 425px) {
    .preview__ctrl__dpad,
    .no-csscalc .preview__ctrl__dpad,
    .no-cssvwunit .preview__ctrl__dpad{
        width:70px;
        height:70px;
        margin:66px 61px;
    }
    .preview__btn--up,
    .no-csscalc .preview__btn--up,
    .no-cssvwunit .preview__btn--up{
        top:-60px;
    }
    .preview__btn--down,
    .no-csscalc .preview__btn--down,
    .no-cssvwunit .preview__btn--down{
        bottom:-60px;
    }
    .preview__btn--left,
    .no-csscalc .preview__btn--left,
    .no-cssvwunit .preview__btn--left{
        left:-60px;
    }
    .preview__btn--right,
    .no-csscalc .preview__btn--right,
    .no-cssvwunit .preview__btn--right{
        right:-60px;
    }
}
@media screen and (min-width: 763px) {
    .preview__ctrl__dpad,
    .no-csscalc .preview__ctrl__dpad,
    .no-cssvwunit .preview__ctrl__dpad{
        width:90px;
        height:90px;
        margin:86px 81px;
    }
    .preview__btn--up,
    .no-csscalc .preview__btn--up,
    .no-cssvwunit .preview__btn--up{
        top:-80px;
    }
    .preview__btn--down,
    .no-csscalc .preview__btn--down,
    .no-cssvwunit .preview__btn--down{
        bottom:-80px;
    }
    .preview__btn--left,
    .no-csscalc .preview__btn--left,
    .no-cssvwunit .preview__btn--left{
        left:-80px;
    }
    .preview__btn--right,
    .no-csscalc .preview__btn--right,
    .no-cssvwunit .preview__btn--right{
        right:-80px;
    }
}