@charset "UTF-8";

#vr {margin:0px 0 0 0; position:relative;}

/* VRタブ */
ul.tablist {font-size:0; width:800px; text-align:center; margin:0 auto 0px; padding:10px 0; background:#000}
ul.tablist li { display:inline-block; margin:0 10px; box-sizing:border-box; background:#000; border:solid 4px #666;}
ul.tablist li img {opacity:0.6;}
ul.tablist li.on {border:solid 4px #990000;}
ul.tablist li.on img {opacity:1;}
.sub-img li img {border:solid 4px #CCC !important; box-sizing:border-box;}
.sub-img li.current img {
  border: solid 4px #990000 !important;
  transition: border .5s;
  box-sizing:border-box;
}

/* レイアウトのためのスタイル */
iframe {position:relative; top:0; left:0; z-index:101; height:450px; width:800px;}
.main-img {
  height: 450px;
  width: 800px;
  margin-left:200px;
  position:relative;
  top:0;
  left:0;
  border:solid 1px #999;
  box-sizing:border-box;
}
.main-img img {
  height: auto;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
}
.sub-img {
  margin:10px 0 0 0;
  position:absolute;
  z-index:100;
  display:inline-block;
  font-size:0;
  box-sizing:border-box;
}
#page1 .sub-img {width:400px;}
#page2 .sub-img,#page3 .sub-img {width:700px;}
.sub-img li {
	font-size:0;
  margin:0 10px 5px 0;
  width: 150px;
  display:inline-block;
}
.sub-img li img {
  border: 2px solid transparent;
  transition: border .5s;
}
.sub-img img {
  cursor: pointer;
  width: 100%;
}
.cg_sub {font-size:18px; margin-top:18px; border-left:solid 8px #333; padding-left:15px;}
#page1 .cg_sub {margin-left:210px}
#page1 ul.sub-img {margin-left:170px}
#page2 .cg_sub {margin-left:150px}
#page2 ul.sub-img {margin-left:110px}
#page3 .cg_sub {margin-left:150px}
#page3 ul.sub-img {margin-left:110px}

#heimen {float:right; position:relative;}
#page1 #heimen {width:600px;}
#page2 #heimen,#page3 #heimen {width:350px;}
#heimen img {width:100%; height:auto}
#heimen .heimen_zu {}
#heimen a {
   display: inline-block;
   border-radius:50px;
   padding:8px 5px;
   text-decoration: none;
   color: black;
   background-color:transparent;
   position: relative;         /* JavaScriptでz-indexを調整するために必要 */
   text-align:center;
   font-size:0 !important;
   width:7px;
}
#heimen a.on {background-color:#990000; color:#FFF;animation: flash 4s infinite;}
#heimen a.off {background-color:#999; color:#FFF; animation:none;}
#heimen a.p01 {left:260px; top:45px; position:absolute}
#heimen a.p02 {left:132px; top:50px; position:absolute}
#heimen a.p03 {left:140px; top:170px; position:absolute}
#heimen a.p04 {left:190px; top:170px; position:absolute}
#heimen a.p05 {left:140px; top:60px; position:absolute}
#heimen a.p06 {left:226px; top:60px; position:absolute}
#heimen a.p07 {left:199px; top:253px; position:absolute}
#heimen a.p08 {left:280px; top:210px; position:absolute}
#heimen a.p09 {left:156px; top:250px; position:absolute}
#heimen a.p10 {left:309px; top:124px; position:absolute}
#heimen a.p11 {left:45px; top:237px; position:absolute}
#heimen a.p12 {left:50px; top:150px; position:absolute}
#heimen a.p13 {left:164px; top:66px; position:absolute}

#heimen a.vr0 {left:336px; top:45px; position:absolute}
#heimen a.vr1 {left:292px; top:226px; position:absolute}
#heimen a.vr2 {left:242px; top:225px; position:absolute}

.cg_notes {clear:both; margin:-150px 0 0 0px}

@media screen and (max-width: 767px) {
#vr {margin:20px 0 0 0;}
iframe {}

/* VRタブ */
ul.tablist {font-size:0; width:100%; text-align:center; margin:0 0 0px 0; padding:5px 0;}
ul.tablist li { display:inline-block; margin:0 1%; padding:0; width:30%;}

/* レイアウトのためのスタイル */
iframe {position:relative; top:0; left:0; z-index:101; width:100%; height:calc( (100vw * 0.56) - 20px );}
.main-img {
  height:calc( (100vw * 0.56) - 20px );
  width: 100%;
  margin-left:0px;
  border:none;
}
.sub-img { display:block; position:relative; box-sizing:border-box; margin:0 !important; padding:0;}
#page1 .sub-img,#page2 .sub-img,#page3 .sub-img {width:100%;}

.sub-img li {
font-size:0;
  margin:0 2% 5px 1%;
  width: 30%;
  display:inline-block;
}
.cg_sub {font-size:14px; margin:15px 0 5px 5px !important; border-left:solid 6px #333; padding-left:9px;}
#page1 .cg_sub,#page1 ul.sub-img,#page2 .cg_sub,#page2 ul.sub-img,#page3 .cg_sub,#page3 ul.sub-img{margin-left:0px}

#heimen {float:none;}
#page1 #heimen {width:100%}
#heimen a.p01 {left:42.5%; top:21%; position:absolute}
#heimen a.p02 {left:21%; top:22%; position:absolute}
#heimen a.vr0 {left:55.5%; top:20%; position:absolute}

#page2 #heimen,#page3 #heimen {width:350px; white-space:nowrap; overflow:scroll}
#heimen a {
	padding:8px 8px;
}
.cg_notes { margin:10px 0 0 0px; font-size:10px}
}



@keyframes flash {
  0%, 100% {
    /* 明るく光るよう影を重ねる */
    box-shadow: 0 0 1px #f00, 0 0 5px #f00, 0 0 8px #f00, 0 0 10px #f00, 0 0 10px #f00, 0 0 10px #f00, 0 0 15px #f00, 0 0 40px #f00;
  }
  50% {
    /* 淡く光るよう影を重ねる */
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ffc, 0 0 20px #ff0;
  }
}