@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

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

.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  position: relative;
  background: url(../img/common/bg.gif) top center repeat;
  color: #0a0a0a;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6em;
  width: 100%;
  min-width: 1280px;
  max-width: 3000px;
}

body > iframe {
  display: none;
}

body#top section {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

body#top section.loading {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

body#top .left {
  width: 56.25%;
  min-width: 720px;
  max-width: 1000px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

img {
  height: auto !important;
  display: block;
}

.alpha {
  -webkit-transition: opacity .3s ease-in-out 0s;
  transition: opacity .3s ease-in-out 0s;
  cursor: pointer;
}

.alpha:hover {
  opacity: .6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

.alpha-l {
  -webkit-transition: opacity .3s ease-in-out 0s;
  transition: opacity .3s ease-in-out 0s;
  cursor: pointer;
}

@-webkit-keyframes alpha-l {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes alpha-l {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.alpha-l:hover {
  -webkit-animation: alpha-l 0.2s linear 0s 1;
  animation: alpha-l 0.2s linear 0s 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.alpha-s {
  -webkit-transition: opacity .3s ease-in-out 0s;
  transition: opacity .3s ease-in-out 0s;
  cursor: pointer;
}

@-webkit-keyframes alpha-s {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes alpha-s {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.alpha-s:hover {
  -webkit-animation: alpha-s 0.2s linear 0s 1;
  animation: alpha-s 0.2s linear 0s 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.left {
  width: 150px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.left .header {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 150px;
  height: 100%;
  min-height: 790px;
  background: url(../img/common/menu/bg_menu_all.gif) top center repeat-y;
  z-index: 2;
}

.left .header .logo {
  width: 80px;
  margin: 0 auto;
  padding: 20px 0 17px;
}

.left .header .gnav {
  position: relative;
}

.left .header .gnav ul:after {
  content: '';
  width: 150px;
  height: 2px;
  background: url(../img/common/line_dot.png) top center repeat-x;
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
}

.left .header .gnav ul li {
  position: relative;
  height: 50px;
  cursor: pointer;
}

.left .header .gnav ul li:nth-child(2n-1) {
  background: url(../img/common/menu/bg_menu02.gif) top center repeat-y;
}

.left .header .gnav ul li.active {
  background: url(../img/common/menu/bg_menu_sub.gif) top center repeat-y;
  cursor: default;
}

.left .header .gnav ul li.active .gnav__text img {
  margin-top: -24px;
}

.left .header .gnav ul li:hover .gnav__text img {
  margin-top: -24px;
}

.left .header .gnav ul li:hover .gnav__icon .gnav__icon--left {
  -webkit-transform: rotateZ(45deg) translate3d(4px, -4px, 0);
          transform: rotateZ(45deg) translate3d(4px, -4px, 0);
}

.left .header .gnav ul li:hover .gnav__icon .gnav__icon--right {
  -webkit-transform: rotateZ(-45deg) translate3d(-4px, -4px, 0);
          transform: rotateZ(-45deg) translate3d(-4px, -4px, 0);
}

.left .header .gnav ul li:hover.active .gnav__icon .gnav__icon--left {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.left .header .gnav ul li:hover.active .gnav__icon .gnav__icon--right {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.left .header .gnav ul li .gnav__icon .gnav__icon--left {
  position: absolute;
  top: 8px;
  right: auto;
  bottom: auto;
  left: 9px;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  transition: -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.left .header .gnav ul li .gnav__icon .gnav__icon--right {
  position: absolute;
  top: 8px;
  right: auto;
  bottom: auto;
  left: 20px;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  transition: -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.left .header .gnav ul li .gnav__text {
  position: absolute;
  top: 12px;
  right: auto;
  bottom: auto;
  left: 40px;
  height: 24px;
  overflow: hidden;
}

.left .header .gnav ul li:after {
  content: '';
  width: 150px;
  height: 2px;
  background: url(../img/common/line_dot.png) top center repeat-x;
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 1;
}

.left .header .gnav ul li > a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}

.left .header .share-link {
  margin: 144px auto 0;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 9px;
  left: 9px;
  letter-spacing: -.4em;
  text-align: center;
}

.left .header .share-link li {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}

.left .sub-nav {
  width: auto;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 150px;
  z-index: 1;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  transition: -webkit-transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, -webkit-transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.left .sub-nav.active {
  -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
          transform: translateX(0%);
}

.left .sub-nav.active .subNav__btn-close {
  -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
          transform: translateX(0%);
}

.left .sub-nav:before {
  content: '';
  width: 4px;
  height: 100%;
  background: url(../img/common/menu/line_sub_left.gif) top center repeat-y;
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
}

.left .sub-nav:after {
  content: '';
  width: 4px;
  height: 100%;
  background: url(../img/common/menu/line_sub_right.gif) top center repeat-y;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.left .sub-nav .subNav__btn-close {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 228px;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
  transition: -webkit-transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
  transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
  transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s, -webkit-transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
}

.left .sub-nav .jspContainer {
  overflow: hidden;
  position: relative;
}

.left .sub-nav .jspPane {
  position: absolute;
}

.left .sub-nav .jspVerticalBar {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
}

.left .sub-nav .jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
}

.left .sub-nav .jspTrack {
  background: #fff;
  position: relative;
}

.left .sub-nav .jspDrag {
  background: #c2871b;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}

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

.left .sub-nav--news {
  padding: 0 4px;
}

.left .sub-nav--news ul {
  height: 100vh;
}

.left .sub-nav--news ul li {
  position: relative;
  width: 220px;
  height: 124px;
}

.left .sub-nav--news ul li:hover a img {
  margin-top: -124px;
}

.left .sub-nav--news ul li.active a {
  cursor: default;
}

.left .sub-nav--news ul li.active a img {
  margin-top: -124px;
}

.left .sub-nav--news ul li a {
  width: 220px;
  height: 124px;
  overflow: hidden;
  display: block;
}

.left .sub-nav--character {
  padding: 0 4px;
}

.left .sub-nav--character .scroll-content {
  height: 100vh;
}

.left .sub-nav--character ul {
  width: 220px;
  text-align: left;
  letter-spacing: -.4em;
}

.left .sub-nav--character ul li {
  width: 110px;
  height: 122px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
}

.left .sub-nav--character ul li.active .subNav__bg {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../img/common/menu/filter_sub.png) top center repeat;
}

.left .sub-nav--character ul li.active span {
  display: block;
}

.left .sub-nav--character ul li:hover .subNav__bg {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../img/common/menu/filter_sub.png) top center repeat;
}

.left .sub-nav--character ul li:hover span {
  display: block;
}

.left .sub-nav--character ul li span {
  width: 100%;
  height: 1.6em;
  margin-top: -.5em;
  overflow: hidden;
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  z-index: 1;
}

.left .sub-nav--character ul li:nth-child(2n-1):before {
  content: '';
  width: 2px;
  height: 122px;
  position: absolute;
  top: 0;
  right: -1px;
  z-index: 1;
  border-right: dotted #e2e7e3 2px;
}

.left .sub-nav--character ul li:nth-child(2n-1):after {
  content: '';
  width: 220px;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 1;
  border-bottom: dotted #e2e7e3 2px;
}

.left .sub-nav--movie {
  padding: 0 4px;
  background: url(../img/common/menu/thumb_movie_non.gif) top center repeat-y;
}

.left .sub-nav--movie ul {
  height: 100vh;
}

.left .sub-nav--movie ul li {
  position: relative;
  width: 220px;
  height: 124px;
  cursor: pointer;
}

.left .sub-nav--movie ul li:hover:before {
  content: '';
  width: 220px;
  height: 124px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../img/common/menu/filter_sub.png) top center repeat;
}

.left .sub-nav--movie ul li:hover:after {
  content: '';
  width: 54px;
  height: 54px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -27px;
  z-index: 1;
  background: url(../img/common/menu/icon_movie_play.png) top center repeat;
}

.left .sub-nav--movie ul li:hover span {
  display: block;
}

.left .sub-nav--movie ul li span {
  width: 100%;
  height: 1.6em;
  overflow: hidden;
  display: none;
  position: absolute;
  bottom: 22px;
  left: 0;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  z-index: 1;
}

.left .sub-nav--bddvd {
  padding: 0 4px;
}

.left .sub-nav--bddvd ul {
  height: 100vh;
}

.left .sub-nav--bddvd ul li {
  position: relative;
  width: 220px;
  height: 124px;
}

.left .sub-nav--bddvd ul li:hover a img {
  opacity: .6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

.left .sub-nav--bddvd ul li.active a {
  cursor: default;
}

.left .sub-nav--bddvd ul li.active a img {
  opacity: .6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

.left .sub-nav--bddvd ul li a {
  width: 220px;
  height: 124px;
  overflow: hidden;
  display: block;
}

.left .sub-nav--story {
  padding: 0 4px;
}

.left .sub-nav--story ul {
  height: 100vh;
}

.left .sub-nav--story ul li {
  position: relative;
  width: 220px;
  height: 124px;
  cursor: pointer;
}

.left .sub-nav--story ul li:hover a {
  display: block;
}

.left .sub-nav--story ul li:hover a:before {
  content: '';
  width: 220px;
  height: 124px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../img/common/menu/filter_sub.png) top center repeat;
}

.left .sub-nav--story ul li:hover span {
  display: block;
}

.left .sub-nav--story ul li span {
  width: 100%;
  height: 1.6em;
  /* overflow: hidden; */
  display: none;
  position: absolute;
  bottom: 50px;
  left: 0;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  z-index: 1;
}

.left .sub-nav--special {
  padding: 0 4px;
}

.left .sub-nav--special ul {
  height: 100vh;
}

.left .sub-nav--special ul li {
  position: relative;
  width: 220px;
  height: 124px;
  cursor: pointer;
}

.left .sub-nav--special ul li:hover a {
  display: block;
}

.left .sub-nav--special ul li:hover a:before {
  content: '';
  width: 220px;
  height: 124px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../img/common/menu/filter_sub.png) top center repeat;
}

.left .sub-nav--special ul li:hover span {
  display: block;
}

.left .sub-nav--special ul li span {
  width: 100%;
  height: 1.6em;
  /* overflow: hidden; */
  display: none;
  position: absolute;
  bottom: 50px;
  left: 0;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  z-index: 1;
}

.left .sub-nav--radio {
  padding: 0 4px;
}

.left .sub-nav--radio ul {
  height: 100vh;
}

.left .sub-nav--radio ul li {
  position: relative;
  width: 220px;
  height: 124px;
  cursor: pointer;
}

.left .sub-nav--radio ul li:hover a {
  display: block;
}

.left .sub-nav--radio ul li:hover a:before {
  content: '';
  width: 220px;
  height: 124px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../img/common/menu/filter_sub.png) top center repeat;
}

.left .sub-nav--radio ul li:hover span {
  display: block;
}

.left .sub-nav--radio ul li span {
  width: 100%;
  height: 1.6em;
  /* overflow: hidden; */
  display: none;
  position: absolute;
  bottom: 50px;
  left: 0;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  z-index: 1;
}



.footer {
  width: 100%;
  height: 290px;
  position: relative;
  background: #fff;
  text-align: center;
  background: url(../img/common/footer/bg.gif) top center repeat;
  color: #523f10;
}

.content--in .footer {
  height: 220px;
}

.content--in .footer .footer__link {
  display: inline-block;
  padding: 10px 15px 0 0;
}

.content--in .footer .footer__copy {
  display: inline-block;
}

.content--in .footer .footer__btn-pagetop {
  width: 64px;
  margin: 20px auto 0;
}

.footer:before {
  content: '';
  background: url(../img/common/footer/bg_footer.png) top center repeat-x;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 13px;
}

.footer .footer__attention {
  padding: 60px 0 0;
  font-size: 10px;
  font-size: 1.0rem;
  font-weight: bold;
  line-height: 1.6em;
}

.footer .footer__link {
  padding: 10px 0 0;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: -.4em;
}

.footer .footer__link li {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
  padding: 0 7px;
  color: #523f10;
}

.footer .footer__link li a {
  color: #523f10;
  text-decoration: none;
}

.footer .footer__link li:hover a {
  text-decoration: underline;
}

.footer .footer__link li + li {
  border-left: solid #666 1px;
}

.footer .footer__copy {
  padding: 10px 0 0;
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: bold;
}

.footer .footer__btn-pagetop {
  width: 64px;
  margin: 35px auto 0;
}

.design {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.design img {
  opacity: .6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}