@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++++
+
+ FED: Masaki Kadobayashi
+ FED URL: http://caellum.co.uk/
+
++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* --------------------------------------------------
 0:Reset
-------------------------------------------------- */
html,body,div,
header,footer,article,section,aside,
h1,h2,h3,h4,h5,h6,
dl,dt,dd,ul,ol,li,
img,
p,blockquote,pre,cite,code,caption,
figure,figcaption,
object,iframe,
a,strong,address,span,
sub,sup,
form,fieldset,legend,input,textarea,select,option,label,caption,
table,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}

img,table {
	border: none;
}

ol,ul {
	list-style: none;
}

img {
	vertical-align: top;
}

address,em,cite {
	font-style: normal;
}

fieldset {
	border:medium none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

header,footer,hgroup,article,section,aside {
	display: block;
}


/* --------------------------------------------------
1:Base Setting
-------------------------------------------------- */
body {
	position: relative;
	min-width: 960px;
	text-align: center;
	color: #FFF;
	font: 13px/2.0 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Sans-Serif, Verdana;
	*font-size: small;
	*font: x-small;
	text-rendering: optimizeLegibility;
	image-rendering: optimizeQuality;
	background: #000 url(../images/bg.jpg) center top no-repeat;
	background-size: contain;
}

a:link {
}

a:link,
a:visited {
	color: #FFF;
	text-decoration: underline;
}

a:hover,
a:active {
	text-decoration: none;
}

#wrap {
	width: 100%;
	height: 4000px;
	background: #000 url(../images/bg.jpg) center top no-repeat;
	background-size: 1600px 4000px;
}

/* --------------------------------------------------
2:Header
-------------------------------------------------- */
#header-area {
	position: relative;
	margin: 0 auto;
	width: 940px;
	text-align: center;
}
 #header-link {
 	margin: 0 auto 163px;
 	padding-top: 10px;
	width: 940px;
 }
	  #header-link .backtotop {
		float: left;
		}
	  #header-link .backtotop a {
	  	display: block;
	  	background: #000;
	  	padding: 10px;
	  	line-height: 1em;
	  	font-size: 11px;
	  	text-decoration: none;
		}
		#header-link .sns {
			float: right;
		}
			#header-link .sns li {
				float: left;
				margin-left: 10px;
			}
			#header-link .sns li:first-child {
				margin-left: 0;
			}
				#header-link .sns li.tw {
          width: 108px;
				}
				#header-link .sns li.fb {
          margin-top: -6px;
				}
				#header-link .sns li.gp {
				}
	#header-area h1 {

	}
	#header-area h2 {
		position: absolute;
		left: 0;
		top: 267px;
	}


/* --------------------------------------------------
-------------------------------------------------- */
.read_wrap {
	padding-top: 200px;
	width: 100%;
	background: url(../images/bg_grad.png) center top repeat-x;
	background-size: 1600px 2000px;
}
.read_wrap .read_inner {
	margin: 0 auto;
	padding: 0 10px;
	width: 940px;
	text-align: left;
}


/* --------------------------------------------------
-------------------------------------------------- */
#product-detail {
	margin-left: 270px;
	padding: 40px;
	height: 180px;
	background: url(../images/bg_productdetail.png) left top no-repeat;
	background-size: 670px 260px;
}
	#product-detail h2 {
		margin-bottom: 5px;
	}
#specification {
  margin:  -35px 0 60px 10px;
  padding: 55px 0 0 45px;
  background: url(../images/bg_specification.png) left top no-repeat;
  background-size: 855px 210px;
}
  #specification .spec {
    margin-bottom: 10px;
  }
    #specification .place li {
      display: block;
      float: left;
      padding-right: 30px;
      color: #CCC;
      font-size: 12px;
    }
      #specification .place li:last-child {
        padding-right: 0px;
      }
      #specification .place li span {
        color: #FFF;
      }
        #specification .place li span.attention {
          color: #CCC;
          font-size: 11px;
        }
        #specification .place li span.attention a {
          color: #CCC;
        }
#sample-gallery {
	position: relative;
	height: 600px;
	margin-bottom: 40px;
}
	#sample-gallery h2 {
		position: absolute;
		left: 35px;
		top: -20px;
		z-index: 10;
	}
	#sample-gallery ol {
		position: relative;
		margin: 20px 0 0;
	}
				#staffcredits li p a:hover {
					opacity: 0.65;
				}
		#sample-gallery ol .no1 {
			position: absolute;
			left: 80px;
			top: 0;
		}
		#sample-gallery ol .no2 {
			position: absolute;
			left: 0;
			top: 200px;
		}
		#sample-gallery ol .no3 {
			position: absolute;
			left: 200px;
			top: 200px;
		}
		#sample-gallery ol .no4 {
			position: absolute;
			left: 0;
			top: 360px;
		}
		#sample-gallery ol .no5 {
			position: absolute;
			left: 401px;
			top: 0;
		}
		#sample-gallery ol .no6 {
			position: absolute;
			left: 401px;
			top: 240px;
		}
		#sample-gallery ol .no7 {
			position: absolute;
			left: 641px;
			top: 0;
		}
		#sample-gallery ol .no8 {
			position: absolute;
			left: 641px;
			top: 200px;
		}
		#sample-gallery ol .no9 {
			position: absolute;
			left: 641px;
			top: 400px;
		}
#staffcredits {
	position: relative;
	margin-bottom: 40px;
	width: 940px;
	height: 600px;
	background: url(../images/bg_staffcredits.png) left top no-repeat;
	background-size: 940px 400px;
}
	#staffcredits h2 {
		position: absolute;
		top: -20px;
		left: 0;
	}
		#staffcredits li {
			line-height: 1em;
		}
		#staffcredits li.credits1 {
			position: absolute;
			top: 40px;
			left: 240px;
		}
		#staffcredits li.credits2 {
			position: absolute;
			top: 120px;
			left: 320px;
		}
		#staffcredits li.credits3 {
			position: absolute;
			top: 160px;
			left: 560px;
		}
		#staffcredits li.credits4 {
			position: absolute;
			top: 260px;
			left: 380px;
		}
		#staffcredits li.credits5 {
			position: absolute;
			top: 260px;
			left: 640px;
		}
		#staffcredits li.credits6 {
			position: absolute;
			top: 360px;
			left: 320px;
		}
		#staffcredits li.credits7 {
			position: absolute;
			top: 440px;
			left: 440px;
		}
		#staffcredits li.credits8 {
			position: absolute;
			top: 520px;
			left: 320px;
		}
			#staffcredits li h3 {
				margin-bottom: 12px;
			}
			#staffcredits li p {
				margin-top: 15px;
			}
				#staffcredits li p:first-child {
					margin-top: 0;
				}
				#staffcredits li p a:hover {
					opacity: 0.65;
				}
	#staffcredits .banner {
		position: absolute;
		left: 0px;
		top: 110px;
		padding: 40px;
		background: #1F1F1F;
	}
		#staffcredits .banner p {
			margin-bottom: 10px;
			width: 160px;
			font-size: 10px;
		}
		#staffcredits .banner input {
			padding: 5px;
			width: 150px;
			border: #333 1px solid;
			background: #000;
			color: #FFF;
		}

/* --------------------------------------------------
4:Footer
-------------------------------------------------- */
footer {
	background: #FFF;
	color: #000;
	font-size: 11px;
}
	footer .inner {
		margin: 0 auto;
		width: 940px;
		text-align: left;
	}
		footer .inner .logo {
			float: left;
		}
		footer .inner .copyright {
			float: left;
			margin: 15px 0;
		}
		footer .inner .sns {
			float: right;
			margin-top: 27px;
		}
			footer .inner .sns li {
				float: left;
				margin-left: 10px;
			}
			footer .inner .sns li:first-child {
				margin-left: 0;
			}
				footer .inner .sns li.tw {
          width: 108px;
					height: 20px;
				}
				footer .inner .sns li.fb {
					margin-top: -2px;
				}
				footer .inner .sns li.gp {
				}


/* --------------------------------------------------
5:Etc
-------------------------------------------------- */
.through {
	text-decoration: line-through;
}
#header-link:after,
#specification .place:after,
footer .inner:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	font-size: 0;
}
#header-link,
#specification .place,
footer .inner {
	display: inline-block;
}
* html #header-link,
* html #specification .place,
* html footer .inner {
	height: 1%;
}
#header-link,
#specification .place,
footer .inner {
	display: block;
}


/* --------------------------------------------------
6:Thickbox
-------------------------------------------------- */
html.swipebox-html.swipebox-touch {
  overflow: hidden !important;
}

#swipebox-overlay img {
  border: none !important;
}

#swipebox-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999 !important;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#swipebox-slider {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  position: absolute;
  display: none;
}
#swipebox-slider .slide {
  background: url(../img/loader.gif) no-repeat center center;
  height: 100%;
  width: 100%;
  line-height: 1px;
  text-align: center;
  display: inline-block;
}
#swipebox-slider .slide:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}
#swipebox-slider .slide img, #swipebox-slider .slide .swipebox-video-container {
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  vertical-align: middle;
}
#swipebox-slider .slide .swipebox-video-container {
  background: none;
  max-width: 1140px;
  max-height: 100%;
  width: 100%;
  padding: 5%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}

#swipebox-action,
#swipebox-caption {
  position: absolute;
  left: 0;
  z-index: 999;
  height: 50px;
  width: 100%;
}

#swipebox-action {
  bottom: -50px;
}
#swipebox-action.visible-bars {
  -ms-transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
}
#swipebox-action #swipebox-prev,
#swipebox-action #swipebox-next,
#swipebox-action #swipebox-close {
  background-repeat: no-repeat;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
}
#swipebox-action #swipebox-prev {
  background-image: url(../images/icn_prev.png);
  background-size: 50px 50px;
  right: 50px;
}
#swipebox-action #swipebox-next {
  background-image: url(../images/icn_next.png);
  background-size: 50px 50px;
  right: 0px;
}
#swipebox-action #swipebox-close {
  background-image: url(../images/icn_close.png);
  background-size: 50px 50px;
  left: 0;
}
#swipebox-action #swipebox-prev.disabled,
#swipebox-action #swipebox-next.disabled {
  opacity: 0.3;
}

#swipebox-caption {
	display: none;
  top: -50px;
  text-align: center;
}
#swipebox-caption.visible-bars {
  -ms-transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

#swipebox-slider.rightSpring {
  -webkit-animation: rightSpring 0.3s;
  animation: rightSpring 0.3s;
}

#swipebox-slider.leftSpring {
  -webkit-animation: leftSpring 0.3s;
  animation: leftSpring 0.3s;
}

@-webkit-keyframes rightSpring {
  0% {
    margin-left: 0px;
  }

  50% {
    margin-left: -30px;
  }

  100% {
    margin-left: 0px;
  }
}

@keyframes rightSpring {
  0% {
    margin-left: 0px;
  }

  50% {
    margin-left: -30px;
  }

  100% {
    margin-left: 0px;
  }
}
@-webkit-keyframes leftSpring {
  0% {
    margin-left: 0px;
  }

  50% {
    margin-left: 30px;
  }

  100% {
    margin-left: 0px;
  }
}
@keyframes leftSpring {
  0% {
    margin-left: 0px;
  }

  50% {
    margin-left: 30px;
  }

  100% {
    margin-left: 0px;
  }
}
@media screen and (max-width: 800px) {
  #swipebox-action #swipebox-close {
    right: 0;
    top: 0;
  }

  #swipebox-action #swipebox-prev {
    right: 60px;
  }

  #swipebox-action #swipebox-next {
    right: 0;
  }
}
/* Skin
--------------------------*/
#swipebox-overlay {
  background: #0d0d0d;
}

#swipebox-action,
#swipebox-caption {
  text-shadow: 1px 1px 1px black;
  background: url(../images/bg_blackscreen.png) left top repeat;
  opacity: 0.95;
}

#swipebox-action {
}

#swipebox-caption {
  color: white !important;
  font-size: 15px;
  line-height: 43px;
  font-family: Helvetica, Arial, sans-serif;
}