@charset "utf-8";

/*
 * File       : sub-showroom.css
 * Author     : STUDIO-JT (Sumi)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) VR SHOWROOM
 * 02) 3D TOUR
 */



/* **************************************** *
 * VR SHOWROOM
 * **************************************** */
body.page-template-vr .main-container {overflow-x:hidden;}
.vr-showroom__container { width: 100%; height: 100vh;}
.vr-showroom__bg-container {width:100%; height:100%;}
html.mobile .vr-showroom__container {opacity:0;-webkit-transition: opacity .3s;transition: opacity .3s;}
html.mobile .vr-showroom__container.loaded {opacity:1;}
html.ie11 .page-template-vr .article-body {overflow:hidden;}

.vr-showroom__bg--01 {height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;/* opacity: 0; */}
.vr-showroom__bg--01:before { display:block; content:''; width:100%; height:100%; position:absolute; left:0; right:0; top:0; bottom:0; background: #000000; background:rgba(0, 0, 0, .7);}
.vr-showroom__bg--01.swiper-lazy-loaded {/*opacity: 1;*/}
.vr-showroom__bg--02 {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -webkit-clip-path:circle(380rem at center); clip-path:circle(380rem at center); background-size:cover; background-repeat:no-repeat; background-position:center;}
.vr-showroom__bg--02:before { display:block; content:''; width:100%; height:100%; position:absolute; left:0; right:0; top:0; bottom:0; background: #000000; background:rgba(0, 0, 0, .3);}
html.ie11 .vr-showroom__bg--02 {width:762rem; height:762rem; border-radius:50%; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); background-size:auto 100vh; overflow:hidden;}

.vr-showroom__circle-wrap {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index: 50;overflow: hidden;}
.vr-showroom__circle {width: 762rem;height: 762rem;position: relative;-webkit-animation: shining-circle 5s infinite linear;animation: shining-circle 5s infinite linear;}
.vr-showroom__circle-txt {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);border-radius: 50%;overflow: hidden;width: 760rem;height: 760rem;display: table;border: 1rem solid #ffffff;border: 1rem solid rgba(255, 255, 255, .4); border-radius: 50%;}
.vr-showroom__circle-txt-inner {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);text-align: center;width: 100%;}
.vr-showroom__circle-txt h2 {font-size:36rem;font-weight:600;color:#fff;letter-spacing:-0.025em;margin-top: 68rem;}
.vr-showroom__circle-txt p {font-size:16rem;font-weight:400; line-height:1.63;color:#fff;margin-top: 25rem;}
.vr-showroom__enter {position:relative;width:120rem;height:120rem;margin: 145rem auto 0;display: table; }
.vr-showroom__enter:before {width:100%;height:100%;background:#fff;border-radius:50%; content:''; display:block; position:absolute; left:0; top:0; z-index:-1;-webkit-transition: transform 0.3s; transition: transform 0.3s;}
.vr-showroom__enter:after {width:100%;height:100%;border-radius:50%; position:absolute ;left:0; top:0; -webkit-animation: shining-shadow 3s infinite;animation: shining-shadow 3s infinite; content:''; display:block; z-index:-1;}
.vr-showroom__enter a {display:block;display: table-cell;vertical-align: middle;padding:10rem;}
html.desktop .vr-showroom__enter:hover:before {transform:scale(1.1);}
.vr-showroom__enter span {font-size:16rem; font-weight:600; color:#111; letter-spacing:-0.025em;}
.vr-showroom__enter span:before {background:url(../images/sub/vr/vr-showroom-360.svg) no-repeat; width:68rem; height:31rem; content:''; display:block; margin:0 auto 10rem; background-size: 100% auto;}
html.ie11 .vr-showroom__enter span:before {height:30rem;}

html.ratio1_5 .vr-showroom__circle {width: 642rem;height: 642rem; }
html.ratio1_5 .vr-showroom__circle-txt {width: 640rem;height: 640rem;}
html.ratio1_5 .vr-showroom__bg--02 {-webkit-clip-path:circle(320rem at center); clip-path:circle(320rem at center); }

.vr-showroom__shining {width: 100%;height: 100%;position: relative;}
.vr-showroom__shining svg {display: block;width: 100%;height: auto;}
html.ie11 .vr-showroom__shining {display:none}

.vr-showroom__share {position:absolute;right: 76rem;bottom: 68rem;z-index: 100;}
.vr-showroom__share a {cursor: pointer; display:block;}
.vr-showroom__share a:before {width: 34rem;height: 34rem;font-family:'jt-font';content:'\e92a';font-size: 26rem;font-weight:normal;line-height: 34rem;color:#fff;text-align:center;display: block;margin: 0 auto 3rem;}
.vr-showroom__share span {color: #fff;font-size: 14rem; letter-spacing:-0.025em; opacity:0.8; -webkit-transition: opacity .3s;transition: opacity .3s;}
.vr-showroom__share span:after {width:0; height:1rem; background:#fff; content:''; display:block; -webkit-transition: width .3s;transition: width .3s;}
html.desktop .vr-showroom__share:hover span {opacity:1;}
html.desktop .vr-showroom__share:hover span:after {width:100%;}
.jt-share--copynote {padding: 26rem 45rem;position: fixed;left: 80rem;bottom: 40rem;background: #000;z-index: 501;opacity: 0;visibility: hidden;}
.jt-share--copynote p {font-size: 16rem;font-weight: 500;line-height: 1.6;letter-spacing: -0.025em;color: #fff;}
.jt-share--copynote p br {display: none;}
html.ie11 .vr-showroom__share .jt-share--url { opacity:0;}
html.ie11 .vr-showroom__share .jt-share--url.loaded { opacity:1;}

@-webkit-keyframes shining-circle {
    0% { opacity: 1; -webkit-transform: rotate(0); transform: rotate(0) }
    50% { opacity: 1 }
    100% { opacity: 1; -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

@keyframes shining-circle {
    0% { opacity: 1; -webkit-transform: rotate(0); transform: rotate(0) }
    50% { opacity: 1 }
    100% { opacity: 1; -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

@-webkit-keyframes shining-shadow { 0% {box-shadow: 0 0 0rem #fff; } 50% { box-shadow: 0 0 26rem #fff; } 100% { box-shadow: 0 0 0rem #fff; }  }
@keyframes shining-shadow { 0% {box-shadow: 0 0 0rem #fff; } 50% { box-shadow: 0 0 26rem #fff; } 100% { box-shadow: 0 0 0rem #fff; } }




/* **************************************** *
 * 3D TOUR
 * **************************************** */
.captur3d-3d-tour {width: 100%;height: 100vh;}
.captur3d-3d-tour iframe {width: 100%;height: 100%;}

body.page-template-vr-shoroom #header,
body.page-template-vr-shoroom #footer {display: none;}