@charset "UTF-8";
/*\\\\\\ menu \\\\\\*/
/*
=01 default
=02 layout
	= wrap
	= header
	= main
	= gnav
	= footer
=03 page
	= home
	= introduction
	= story
	= cast-staff
	= production-note
=04 etc
	= fancybox
	= jquery.jscrollpane
\\\\\\\\\\\\\\\*/
/*************************************************
			=01 default
*************************************************/
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6,
p, pre,
dl, dt, dd, ol, ul, li,
table, caption, thead, tbody, tfoot, tr, th, td,
form, fieldset, legend, label,
a, img,
abbr, dfn, acronym,
address, cite, blockquote, q,
code, var, samp, kbd,
del, ins,
em, strong,
sub, sup {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

input, textarea {
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

html {
  overflow-y: scroll;
}

body {
  background-color: #000;
  color: #bbb;
  font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3" , "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td {
  line-height: 1.4;
}

ol, ul {
  list-style: none;
}

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

caption, th {
  text-align: left;
}

hr {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
}

img {
  vertical-align: bottom;
}

strong {
  font-weight: bold;
}

q:before, q:after {
  content: "";
}

a {
  color: #009ceb;
}

a:hover {
  text-decoration: none;
}

/*************************************************
			=02 common
*************************************************/
/*= wrap
======================================*/
#wrap {
  background: url(../img/bg_wrap.png) repeat-x;
}
#wrap .wrap-inner {
  background-repeat: no-repeat;
  background-position: 50% 0;
}

#cate-under #wrap .wrap-inner {
  min-width: 1000px;
  background-image: url(../img/bg_wrap2.jpg);
}

/*= header
======================================*/
#header {
  padding: 14px 0 3px;
}
#header p {
  text-align: center;
}

/*= main
======================================*/
#main {
  width: 980px;
  height: 500px;
  background: url(../img/bg_main.png) no-repeat;
  padding: 10px;
  margin: 0 auto 20px;
  position: relative;
}
#main h1 {
  padding-left: 10px;
}
#main p {
  margin-bottom: 10px;
  line-height: 1.7;
}
#main .b-cnt {
  width: 960px;
  height: 420px;
  outline: none;
  margin: 0 auto;
}
#main .jspPane {
  width: 920px !important;
  padding-top: 20px !important;
  left: 20px !important;
  *zoom: 1;
  /*IE6,7*/
}
#main .jspPane:after {
  content: "";
  display: block;
  clear: both;
}
#main .jspPane > * {
  width: 100%;
}
#main .jspVerticalBar {
  width: 5px;
}
#main .jspTrack {
  background-color: #001013;
}
#main .jspDrag {
  background-color: #004d57;
}
#main .shadow-t,
#main .shadow-b {
  width: 920px;
  height: 5px;
  background-image: url(../img/shadow.png);
  position: absolute;
  left: 50px;
}
#main .shadow-t {
  background-position: 0   0;
  top: 70px;
}
#main .shadow-b {
  background-position: 0 -5px;
  top: 485px;
}

/*= gnav
======================================*/
#gnav {
  min-width: 1000px;
  background: #0d1c20 url(../img/bg_gnav.png) no-repeat 50% 50%;
  border-width: 1px 0;
  border-style: solid;
  border-color: #022b30;
  padding: 4px 0;
}
#gnav ul {
  width: 942px;
  padding: 0 19px;
  margin: 0 auto;
  *zoom: 1;
  /*IE6,7*/
}
#gnav ul:after {
  content: "";
  display: block;
  clear: both;
}
#gnav li {
  float: left;
}
#gnav li + li {
  margin-left: 25px;
}
#gnav a {
  display: block;
  height: 35px;
  background-image: url(../img/gnav.png);
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: -100%;
  white-space: nowrap;
}
#gnav .off {
  cursor: default;
}
#gnav .gnav-home a {
  width: 49px;
  background-position: 0   0;
}
#gnav .gnav-news a {
  width: 64px;
  background-position: -49px 0;
}
#gnav .gnav-trailer a {
  width: 80px;
  background-position: -113px 0;
}
#gnav .gnav-introduction a {
  width: 136px;
  background-position: -193px 0;
}
#gnav .gnav-story a {
  width: 68px;
  background-position: -329px 0;
}
#gnav .gnav-cast-staff a {
  width: 114px;
  background-position: -397px 0;
}
#gnav .gnav-production-note a {
  width: 170px;
  background-position: -511px 0;
}
#gnav .gnav-theater a {
  width: 86px;
  background-position: -681px 0;
}
#gnav .gnav-home .ac, #gnav .gnav-home a:hover {
  background-position: 0   -35px;
}
#gnav .gnav-news .ac, #gnav .gnav-news a:hover {
  background-position: -49px -35px;
}
#gnav .gnav-trailer .ac, #gnav .gnav-trailer a:hover {
  background-position: -113px -35px;
}
#gnav .gnav-introduction .ac, #gnav .gnav-introduction a:hover {
  background-position: -193px -35px;
}
#gnav .gnav-story .ac, #gnav .gnav-story a:hover {
  background-position: -329px -35px;
}
#gnav .gnav-cast-staff .ac, #gnav .gnav-cast-staff a:hover {
  background-position: -397px -35px;
}
#gnav .gnav-production-note .ac, #gnav .gnav-production-note a:hover {
  background-position: -511px -35px;
}
#gnav .gnav-theater .ac, #gnav .gnav-theater a:hover {
  background-position: -681px -35px;
}
#gnav .gnav-home .off, #gnav .gnav-home .off:hover {
  background-position: 0   -70px;
}
#gnav .gnav-news .off, #gnav .gnav-news .off:hover {
  background-position: -49px -70px;
}
#gnav .gnav-trailer .off, #gnav .gnav-trailer .off:hover {
  background-position: -113px -70px;
}
#gnav .gnav-introduction .off, #gnav .gnav-introduction .off:hover {
  background-position: -193px -70px;
}
#gnav .gnav-story .off, #gnav .gnav-story .off:hover {
  background-position: -329px -70px;
}
#gnav .gnav-cast-staff .off, #gnav .gnav-cast-staff .off:hover {
  background-position: -397px -70px;
}
#gnav .gnav-production-note .off, #gnav .gnav-production-note .off:hover {
  background-position: -511px -70px;
}
#gnav .gnav-theater .off, #gnav .gnav-theater .off:hover {
  background-position: -681px -70px;
}

/*= footer
======================================*/
#footer {
  min-width: 1000px;
  background-color: #000;
  border-top: 1px solid #192930;
}
#footer .footer-inner {
  width: 980px;
  padding: 20px 10px;
  margin: 0 auto;
}
#footer p {
  text-align: center;
}
#footer .b-release-sns {
  margin-bottom: 30px;
  text-align: center;
}
#footer .b-release-sns p {
  display: inline-block;
  *display: inline;
  /*IE6,7*/
  *zoom: 1;
  /*IE6,7*/
  padding-top: 5px;
  margin-right: 10px;
  vertical-align: top;
}
#footer .b-release-sns ul {
  display: inline-block;
  *display: inline;
  /*IE6,7*/
  *zoom: 1;
  /*IE6,7*/
}
#footer .b-release-sns li {
  display: inline;
  margin: 0 3px;
}
#footer .b-bnr {
  margin-bottom: 25px;
  text-align: center;
}
#footer .b-like {
  margin-bottom: 20px;
  text-align: center;
}
#footer .b-like li {
  display: inline-block;
  *display: inline;
  /*IE6,7*/
  *zoom: 1;
  /*IE6,7*/
}
#footer .b-like .like-twitter {
  width: 90px;
}
#footer .b-like .like-facebook {
  width: 120px;
}
#footer .b-like .like-google {
  width: 70px;
}
#footer .b-copyright {
  margin-top: 30px;
  color: #666;
  font-size: 84%;
}

/*************************************************
			=03 page
*************************************************/
/*= home
======================================*/
/* wrap */
#cate-home .wrap-inner {
  min-width: 1000px;
  background-image: url(../../img/bg_wrap2.jpg);
}

/* main */
#a-main {
  width: 980px;
  padding: 0 10px;
  margin: 0 auto;
  position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #a-main {
    padding-right: 11px;
  }
}
#a-main .b-campaign {
  position: absolute;
  top: 469px;
  left: 511px;
}
#a-main ul {
  position: absolute;
  top: 599px;
  left: 508px;
}
#a-main li {
  display: inline;
  margin: 0 3px;
}

/*= introduction
======================================*/
#a-introduction h2 {
  margin-bottom: 14px;
  text-align: center;
}
#a-introduction .b-wrap {
  *zoom: 1;
  /*IE6,7*/
}
#a-introduction .b-wrap:after {
  content: "";
  display: block;
  clear: both;
}
#a-introduction .b-img-man {
  float: left;
}
#a-introduction .b-img-woman {
  float: right;
}
#a-introduction .b-txt {
  width: 520px;
  margin-left: 20px;
  float: left;
}

/*= story
======================================*/
#a-story h2 {
  margin: 0 0 10px -10px;
}
#a-story .b-wrap {
  margin-bottom: 20px;
  *zoom: 1;
  /*IE6,7*/
}
#a-story .b-wrap:after {
  content: "";
  display: block;
  clear: both;
}
#a-story .b-img-l {
  margin-right: 20px;
  float: left;
}
#a-story .b-img-r {
  margin-left: 20px;
  float: right;
}

/*= cast-staff
======================================*/
#a-cast-staff h2 {
  border-bottom: 1px solid #004d57;
}
#a-cast-staff h3 {
  margin: 0 0 5px -10px;
}
#a-cast-staff p {
  margin-bottom: 0;
}
#a-cast-staff .b-wrap + h2 {
  margin-top: 20px;
}
#a-cast-staff .b-wrap {
  border-bottom: 1px solid #004d57;
  padding: 20px 0;
  *zoom: 1;
  /*IE6,7*/
}
#a-cast-staff .b-wrap:after {
  content: "";
  display: block;
  clear: both;
}
#a-cast-staff .b-end {
  border-bottom: none;
}
#a-cast-staff .b-txt {
  width: 700px;
  float: right;
}
#a-cast-staff .b-img {
  width: 200px;
  margin-right: 20px;
  float: left;
}

/*= a-production-note
======================================*/
#a-production-note h2 {
  margin: 0 0 10px -10px;
}
#a-production-note .b-wrap {
  border-bottom: 1px solid #004d57;
  padding-bottom: 10px;
  margin-bottom: 10px;
  *zoom: 1;
  /*IE6,7*/
}
#a-production-note .b-wrap:after {
  content: "";
  display: block;
  clear: both;
}
#a-production-note .b-img-l {
  margin-right: 20px;
  float: left;
}
#a-production-note .b-img-r {
  margin-left: 20px;
  float: right;
}
#a-production-note .b-info {
  margin: 30px 0 20px;
  color: #26676f;
}
#a-production-note .b-info p {
  font-size: 84%;
}
#a-production-note .b-info strong {
  font-size: 136%;
}
#a-production-note .b-member {
  margin-bottom: 20px;
  *zoom: 1;
  /*IE6,7*/
}
#a-production-note .b-member:after {
  content: "";
  display: block;
  clear: both;
}
#a-production-note h3 {
  border: 1px solid #26676f;
  padding: 3px 0;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
}
#a-production-note .b-cast,
#a-production-note .b-staff {
  width: 450px;
}
#a-production-note .b-cast ul,
#a-production-note .b-staff ul {
  font-size: 77%;
}
#a-production-note .b-cast h3 + ul,
#a-production-note .b-staff h3 + ul {
  float: left;
}
#a-production-note .b-cast ul + ul,
#a-production-note .b-staff ul + ul {
  float: right;
}
#a-production-note .b-cast li,
#a-production-note .b-staff li {
  margin-bottom: 2px;
}
#a-production-note .b-cast {
  float: left;
}
#a-production-note .b-cast ul {
  width: 225px;
}
#a-production-note .b-staff {
  float: right;
}
#a-production-note .b-staff h3 + ul {
  width: 260px;
}
#a-production-note .b-staff ul + ul {
  width: 190px;
}

/*************************************************
			=04 etc
*************************************************/
/*= fancybox
======================================*/
/* fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  vertical-align: top;
}

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8020;
}

.fancybox-skin {
  position: relative;
  background: #000;
  color: #444;
  text-shadow: none;
}

.fancybox-opened {
  z-index: 8030;
}

.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
  position: relative;
}

.fancybox-inner {
  overflow: hidden !important;
}

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 15px;
  white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url("../img/fancybox/fancybox_sprite.png");
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 8060;
}

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url("../img/fancybox/fancybox_loading.gif") center center no-repeat;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 8040;
}

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  background: transparent url("blank.gif");
  /* helps IE */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  z-index: 8040;
}

.fancybox-prev {
  left: 0;
}

.fancybox-next {
  right: 0;
}

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 8040;
  visibility: hidden;
}

.fancybox-prev span {
  left: 10px;
  background-position: 0 -36px;
}

.fancybox-next span {
  right: 10px;
  background-position: 0 -72px;
}

.fancybox-nav:hover span {
  visibility: visible;
}

.fancybox-tmp {
  position: absolute;
  top: -99999px;
  left: -99999px;
  visibility: hidden;
  max-width: 99999px;
  max-height: 99999px;
  overflow: visible !important;
}

/* Overlay helper */
.fancybox-lock {
  overflow: hidden !important;
  width: auto;
}

.fancybox-lock body {
  overflow: hidden !important;
}

.fancybox-lock-test {
  overflow-y: hidden !important;
}

.fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 8010;
  background: url("../img/fancybox/fancybox_overlay.png");
}

.fancybox-overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

.fancybox-lock .fancybox-overlay {
  overflow: auto;
  overflow-y: scroll;
}

/* Title helper */
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 8050;
}

.fancybox-opened .fancybox-title {
  visibility: visible;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 8050;
  text-align: center;
}

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent;
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}

.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}

.fancybox-title-inside-wrap {
  padding-top: 10px;
}

.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url("../img/fancybox/fancybox_sprite@2x.png");
    background-size: 44px 152px;
    /*The size of the normal image, half the size of the hi-res image*/
  }

  #fancybox-loading div {
    background-image: url("../img/fancybox/fancybox_loading@2x.gif");
    background-size: 24px 24px;
    /*The size of the normal image, half the size of the hi-res image*/
  }
}
/*= jquery.jscrollpane
======================================*/
/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */
.jspContainer {
  overflow: hidden;
  position: relative;
}

.jspPane {
  position: absolute;
}

.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background: red;
}

.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: red;
}

.jspVerticalBar *,
.jspHorizontalBar * {
  margin: 0;
  padding: 0;
}

.jspCap {
  display: none;
}

.jspHorizontalBar .jspCap {
  float: left;
}

.jspTrack {
  background: #dde;
  position: relative;
}

.jspDrag {
  background: #bbd;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
  float: left;
  height: 100%;
}

.jspArrow {
  background: #50506d;
  text-indent: -20000px;
  display: block;
  cursor: pointer;
}

.jspArrow.jspDisabled {
  cursor: default;
  background: #80808d;
}

.jspVerticalBar .jspArrow {
  height: 16px;
}

.jspHorizontalBar .jspArrow {
  width: 16px;
  float: left;
  height: 100%;
}

.jspVerticalBar .jspArrow:focus {
  outline: none;
}

.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
  margin: 0 -3px 0 0;
}