@charset "utf-8";

/* -- STYLE -- */

#top.main.wrap{ background-color: #000; padding: 20px 0 10px;}
.mainVisual{
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.mainVisualWrap { position:relative; overflow:hidden; }
#skipBtn {  position:absolute; left:10px; bottom:10px; display:block; width:100px; background:#999; color:#fff; text-align:center; font-size:10px; line-height:12px; padding:5px 0; cursor:pointer;  z-index:99; }
#replayBtn {  position:absolute; left:10px; bottom:10px; display:none; width:100px; background:#999; color:#fff; text-align:center; font-size:10px; line-height:12px; padding:5px 0; cursor:pointer;  z-index:99; }
#skipBtn:hover,#replayBtn:hover { opacity:0.7; }

.mainVisual { width: 100%; position: relative; padding: 40.625% 0 0 0;}

#seane01,
#seane02,
#seane03,
#seane04,
#seane05,
#seane06 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#seane01 { z-index: 120;}
#seane02 { z-index: 110;}
#seane03 { z-index: 100;}
#seane04 { z-index: 90;}
#seane05 { z-index: 80;}
#seane06 { z-index: 70;}

#seane01 img,
#seane02 img,
#seane03 img,
#seane04 img,
#seane05 img,
#seane06 img {
  width: 100%;
  height: auto;
}

.topics{ background-color: #333;}
.topics .tit{ float: left; width: 10%; padding-top: 30px; text-align: center;}
.topics .info{ color: #fff; font-size: 12px; float: left; width: 88%;}


/* -- MEDIA -- */
@media only screen and (max-width:840px) {
  /* for width840_ */
  #top.main.wrap {
    padding: 0 0 20px 0;
  }
  .topics { padding: 10px;}
  .topics .tit{ float: none; width: 100%; padding-top: 0; text-align: left;}
  .topics .info { float: none; width: 100%;}
  /* _for width840 */
}
@media only screen and (max-width:640px) {
  /* for width640_ */

  /* _for width640 */
}
@media only screen and (max-width:480px) {
  /* for width480_ */
.topics{ margin-top: 10px;}
  /* _for width480 */
}