@charset "utf-8";


.sppreviewMode .fancybox-overlay{background:rgba(0,0,0,0.95);}
.sppreviewMode .fancybox-overlay,
.sppreviewMode .fancybox-overlay *,
.sppreviewMode .fancybox-overlay *:before,
.sppreviewMode .fancybox-overlay *:after{box-sizing:border-box;}
.sppreviewMode .fancybox-overlay,
.sppreviewMode .fancybox-overlay select{color:#070707;font-family:"Meiryo","Verdana","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","ＭＳ Ｐゴシック","sans-serif";font-size:14px;line-height:1.4;}

/* ================================================================
 controlbar
   ================================================================ */
.sppreviewMode .fancybox-overlay .selectBox{position:fixed;top:0;left:0;display:flex;justify-content:flex-start;align-items:center;height:60px;margin:0;padding:0 0.5em;background:#070707;z-index:8050;border-radius:0 0 5px 0;}
.sppreviewMode .fancybox-overlay .selectBox .nice-select{width:180px;margin:0 1em 0 0;border:none;background:#272727;color:#c7c7c7;transition:opacity 0.25s ease-in-out;}
.sppreviewMode .fancybox-overlay .selectBox .nice-select:hover{opacity:0.5;}
.sppreviewMode .fancybox-overlay .selectBox .nice-select.open:hover{opacity:1;}
.sppreviewMode .fancybox-overlay .selectBox .nice-select > span.current{padding:0.5em 0;}
.sppreviewMode .fancybox-overlay .selectBox .nice-select .list{max-height:inherit;margin:0;background:#272727;border-radius:3px;z-index:9999;}
.sppreviewMode .fancybox-overlay .selectBox .nice-select .option:hover,
.sppreviewMode .fancybox-overlay .selectBox .nice-select .option.focus,
.sppreviewMode .fancybox-overlay .selectBox .nice-select .option.selected.focus{background:#676767;}
.sppreviewMode .fancybox-overlay .selectBox .position{display:flex;overflow:hidden;width:80px;border-radius:15px;}
.sppreviewMode .fancybox-overlay .selectBox .position span{display:block;width:50%;}
.sppreviewMode .fancybox-overlay .selectBox .position span input[type=radio]{display:none;}
.sppreviewMode .fancybox-overlay .selectBox .position span input[type=radio] + label{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;margin:0;padding:0.5em 0;color:#c7c7c7;background:#272727;transition:opacity 0.25s ease-in-out;cursor:pointer;}
.sppreviewMode .fancybox-overlay .selectBox .position span input[type=radio] + label:hover{opacity:0.5;}
.sppreviewMode .fancybox-overlay .selectBox .position span input[type=radio][checked] + label{background:#c3d000;color:#171717;cursor:default;}
.sppreviewMode .fancybox-overlay .selectBox .position span input[type=radio][checked] + label:hover{opacity:1;}


@media screen and (max-width: 370px){
    .sppreviewMode .fancybox-overlay .selectBox .nice-select{width:60px;}
    }
/* ================================================================
 close btn
   ================================================================ */
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-close{position:fixed;top:15px;right:35px;display:block;width:30px;height:30px;background:none;}
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-close:before,
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-close:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:2px;margin:auto;background-color:#676767;transition:all 0.3s ease-in-out;}
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-close:before{transform:rotate(45deg);}
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-close:after{transform:rotate(-45deg);}
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-close:hover:before,
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-close:hover:after{background-color:#fff;}

/* ================================================================
 additional note
   ================================================================ */
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-label{position:fixed;top:65px;left:0;padding:0 1em;color:#676767 !important;font-size:11px;line-height:1.2;text-align:left;}

/* ================================================================
 device modal
   ================================================================ */
.sppreviewMode .fancybox-overlay .fancybox-wrap{position:absolute !important;top:70px !important;margin:0;padding:30px 30px 80px 30px;
box-sizing:content-box;}
.sppreviewMode .fancybox-overlay .fancybox-wrap:before{content:"";position:absolute;top:15px;left:15px;display:block;width:calc(100% - 30px);height:calc(100% - 30px);background:#272727;background:linear-gradient(135deg,  #070707 0%,#272727 30%,#171717 80%,#373737 100%);border-radius:20px;border:1px solid #373737;}

.sppreviewMode .fancybox-overlay .fancybox-wrap:after{content:"";position:absolute;bottom:30px;left:0;right:0;display:block;width:40px;height:40px;margin:auto;background:#171717;background: linear-gradient(135deg,  #070707 0%,#373737 100%);border-radius:50%;border:1px solid #272727;}

.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin{background:none;border-radius:10px;box-shadow:none;overflow:hidden;}
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-outer{}
.sppreviewMode .fancybox-overlay .fancybox-wrap .fancybox-skin .fancybox-outer .fancybox-inner{background:#fff;}
.sppreviewMode .fancybox-overlay .fancybox-wrap.prevHorizon{padding:30px 80px 30px 30px;}
.sppreviewMode .fancybox-overlay .fancybox-wrap.prevHorizon:after{top:0;bottom:0;left:auto;right:30px;}


@media screen and (max-width: 470px){
    .sppreviewMode .fancybox-overlay .fancybox-wrap{top:85px !important;}
    }