@charset "utf-8";

h1 {
  color: #a77a2b;
  font-family: serif;
  font-size: 42px;
  font-weight: normal;
  line-height: 1.25;
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
  width: 960px;
}

h2 {
  font-size: 30px;
  text-align: center;
}

.btn-area {
  margin: 50px auto 0;
  text-align: center;
}

.btn-area > [class*="btn-"] {
  display: inline-block;
}

/* ----------------------------------------------------------------------------
 * Main Visual
 * ------------------------------------------------------------------------- */

.vi {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_mvbg_01.png") top left repeat-x;
}

.vi .bg {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_mvbg_02.png") top center no-repeat;
}

.vi .bg2 {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_mvbg_03.png") top center repeat-y;
}

.vi .img {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_mv_01.png") top center no-repeat;
}

.vi .txt {
  margin: 0 auto;
  position: relative;
  width: 960px;
}

.vi .txt01,
.vi .txt02 {
  left: 0;
  position: absolute;
  top: 0;
}

.vi .bg,
.vi .bg2,
.vi .img,
.vi .txt01,
.vi .txt02 {
  opacity: 0;
}

.vi .btn01 {
  position: absolute;
  top: 340px;
}
.vi .btn01 a:hover,
.vi .btn01 a:focus {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
 * introduction
 * ------------------------------------------------------------------------- */

.introduction .inner {
  background: url("../../../../../img/ss/products/microscope/vr/vr_contents_bg_02.png") top center no-repeat;
}

.introduction .read {
  margin: 50px auto 0;
  text-align: center;
  width: 960px;
}

.introduction .btn01 {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_img_01.jpg") center top no-repeat;
  padding-top: 500px;
}

/* ----------------------------------------------------------------------------
 * feature
 * ------------------------------------------------------------------------- */

.feature .inner {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_line_01.png") top center no-repeat;
  margin-top: 90px;
  padding-top: 90px;
}

.feature .featureList {
  margin-top: 55px;
}

.feature .container {
  display: table;
  width: 100%;
}

.feature .container > * {
  display: table-cell;
}

.feature .feature1 {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_bg_01.jpg") top center no-repeat #264168;
  position: relative;
}

.feature .feature1 p {
  margin: 0 auto;
  text-align: right;
  width: 960px;
}

.feature .feature1 p:before,
.feature .feature1 p:after {
  content: " ";
  display: table;
}

.feature .feature1 p:after {
  clear: both;
}

.feature .feature1 p img {
  display: block;
  float: right;
}

.feature .feature2 {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_bg_02.jpg") top right no-repeat #121d2d;
  position: relative;
  text-align: right;
  width: 60%;
}

.feature .feature3 {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_bg_03.png") top left no-repeat #000;
  position: relative;
  width: 40%;
}

.dummy {
  background: #fff;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all .2s ease-in-out 0s;
  transition: all .2s ease-in-out 0s;
  width: 100%;
}

html>/**/body .dummy {
  background /*\**/: none \9;
}

.dummy:hover {
  opacity: .1;
}

/* ----------------------------------------------------------------------------
 * example
 * ------------------------------------------------------------------------- */

.example .inner {
  background: url("../../../../../img/ss/products/microscope/vr/vr_index_line_01.png") top center no-repeat;
  margin-top: 90px;
  padding-bottom: 135px;
  padding-top: 90px;
}

.example .exampleList {
  display: table;
  margin: 55px auto 0;
  width: 960px;
}

.example .exampleList > li {
  display: table-cell;
  text-align: center;
  width: 320px;
}

.example .exampleList > li a {
  display: block;
}

.example .exampleList > li a:hover img {
  opacity: .7;
}

.example .exampleList > li img {
  margin-bottom: 16px;
}

.example .exampleList > li h3 {
  display: block;
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
  line-height: 1.25;
  padding: 0 16px;
}

.example .exampleList > li p {
  display: block;
  margin-top: 8px;
  padding: 0 16px;
}