@charset 'utf-8';

#wrapper {
  background: transparent url(../_img/howto/bg_pattern.png) left top repeat;
}

#mainttl {
  background: transparent;
}
#mainttl #mainttl_inner {
  height: auto;
  padding: 40px 0 20px;
}
#contents .nojs {
  display: none;
  height: 480px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 984px;
}
#contents .slider_wrap {
  background: transparent url(../_img/howto/slide_frame.png) center top no-repeat;
  position: relative;
  overflow: hidden;
  height: 480px;
  margin: 0 auto;
  width: 984px;
}
#contents .slider_wrap .slider {
  margin: 9px 0 0 35px;
  height: 435px;
  width: 913px;
  position: relative;
}
#contents #c1 .slider li,
#contents #c2 .slider li {
  background: transparent url(../_img/howto/bg_village.jpg) center center no-repeat;
  opacity: 0;
  filter: alpha(opacity=0);
  height: 435px;
  left: 0;
  position: absolute;
  top: 0;
  width: 913px;
  z-index: 8997;
}
#contents #c2 .slider li.temple {
  background-image: url(../_img/howto/bg_temple.jpg);
}
#contents #c1 .slider li.first,
#contents #c2 .slider li.first {
  opacity: 1;
  filter: alpha(opacity=100);
}
#contents .slider li .box {
  position: relative;
  margin: 4px 0 0 4px;
  height: 426px;
  width: 904px;
}
#contents .slider li .box h2 {
  padding-top: 13px;
}
#contents .slider li .box .charactor {
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
#contents .slider li .box .lines {
  position: absolute;
  line-height: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
#contents .slider li .box .line_default {
  position: absolute;
  line-height: 0;
  top: 0;
}
#contents .slider li .box .line_default.left,
#contents .slider li .box .lines.left {
  left: 0;
}
#contents .slider li .box .line_default.right,
#contents .slider li .box .lines.right {
  right: 0;
}
#contents .slider li .box .lines.r_bottom {
  bottom: 0;
  right: 0;
}
#contents .slider li .box .fade_black_temple,
#contents .slider li .box .fade_black_village {
  opacity: 0;
  filter: alpha(opacity=0);
  height: 100%;
  position: absolute;
  width: 100%;
}
#contents .slider li .box .fade_black_village {
  background: transparent url(../_img/howto/bg_village_dark.jpg) center center no-repeat;
}
#contents .slider li .box .fade_black_temple {
  background: transparent url(../_img/howto/bg_temple_dark.jpg) center center no-repeat;
}
#contents .slider li .box .frame_box {
  background: transparent url(../_img/howto/bg_temple_dark.jpg) center center no-repeat;
  height: 426px;
  padding: 35px 0 0;
  text-align: center;
  height: ;
}

#contents .slider_wrap .navigation_panel {
  background: transparent url(../_img/howto/nav_frame.png) 0 0 no-repeat;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 92px;
  padding: 15px 5px 15px 15px;
  position: absolute;
  bottom:0;
  right: 0;
  width: 241px;
  z-index: 8999;
}
#contents .slider_wrap .navigation_panel .navigation_btn {
  overflow: hidden;
  float: left;
  width: 98px;
}
#contents .slider_wrap .navigation_panel .navigation_btn li {
  cursor: pointer;
  float: left;
  padding: 0 5px 0 3px;
}
#contents .slider_wrap .navigation_panel .navigation_btn li:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
#contents .slider_wrap .navigation_panel .navigation_btn li.disable {
  cursor: default;
}
#contents .slider_wrap .navigation_panel .navigation_btn li.disable img,
#contents .slider_wrap .navigation_panel .navigation_btn li.disable:hover img {
  opacity: 0.5;
  filter: alpha(opacity= 50);
}
#contents .slider_wrap .navigation_panel .navigation_page {
  overflow: hidden;
  float: left;
  width: 113px;
}
#contents .slider_wrap .navigation_panel .navigation_page li {
  float: left;
}
#contents .slider_wrap .navigation_panel .navigation_page li.allnum{
  padding: 28px 0 0 10px;
}

#contents #c2 {
  padding-bottom: 103px;
}

#contents .slide_explain_box {
  margin: 0 auto;
  padding: 0 0 90px;
  width: 926px;
}
#contents .slide_explain_box .explain {
  float: left;
  margin-top: -19px;
  width: 601px;
}
#contents .slide_explain_box .slider_link {
  display: block;
  float: right;
  line-height: 0;
  padding-top: 17px;
  margin-right: -32px;
  width: 341px;
}
#contents .slide_explain_box .slider_link:hover img {
  opacity: 0.9;
  filter: alpha(opacity=90);
}