@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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,ul {
  list-style: none;
}

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

caption,th,td {
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}

q,blockquote {
  quotes: none;
}

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

a img {
  border: none;
}

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

.gnav {
  width: 222px;
  position: relative;
  margin: 60px 0 25px;
  padding: 5px 0 10px 27px;
  background: url(../img/nav/bg/nav_bg_middle.png) repeat-y center top;
  box-sizing: border-box;
}

.gnav:before {
  position: absolute;
  left: 0;
  top: -25px;
  content: '';
  width: 222px;
  height: 25px;
  background: url(../img/nav/bg/nav_bg_top.png) no-repeat left top;
}

.gnav:after {
  position: absolute;
  left: 0;
  bottom: -25px;
  content: '';
  width: 222px;
  height: 25px;
  background: url(../img/nav/bg/nav_bg_bottom.png) no-repeat left top;
}

.gnav h2 {
  position: absolute;
  top: -47px;
  right: 16px;
}

body {
  line-height: 1.6;
  font-family: "Helvetica Neue",Helvetica,Arial,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  letter-spacing: .03em;
}

img {
  vertical-align: top;
}

.cf:after,.mid .footer__links-top:after,.mid .footer__links-bottom:after,.cf:before,.mid .footer__links-top:before,.mid .footer__links-bottom:before {
  content: '';
  display: table;
}

.cf:after,.mid .footer__links-top:after,.mid .footer__links-bottom:after {
  clear: both;
}

.cf,.mid .footer__links-top,.mid .footer__links-bottom {
  zoom: 1;
}

#wrap {
  min-width: 1024px;
  min-height: 700px;
}

#wrap.home {
  overflow: hidden;
  height: 1230px;
}

#wrap.home #contents-wrap {
  height: 1245px;
}

#contents-wrap {
  position: relative;
  z-index: 1000;
  padding-bottom: 60px;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}

#bg img {
  height: auto;
}

#piano {
  position: absolute;
  left: 0;
  width: 100%;
  height: 70px;
  background: url(../img/common/footer/piano.png) no-repeat center bottom;
  z-index: 1000;
}

#to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 163px;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  z-index: 2000;
}

#to-top:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: .7;
}

.right-side {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 222px;
  z-index: 10000;
}

.btn-calender {
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.btn-calender:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: .7;
}

.gnav__list-item {
  width: 170px;
  height: 34px;
  border-top: solid 1px #e2dfd8;
  /*background: url(../img/nav/nav_line.png) no-repeat left top;*/
}

.gnav__list-item:first-child {
  border-top: 0;
}

.gnav__list-item.gnav__list-item--active img {
  display: none;
}

.gnav__list-item a {
  width: 170px;
  display: inline-block;
  line-height: 34px;
  text-indent: -100%;
  overflow: hidden;
}

.gnav__list-item a.active {
  cursor: default;
}

.gnav__list-item img {
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  vertical-align: middle;
}

.gnav__list-item img:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.gnav__list-item:first-child {
  background: 0 0;
}

.nav-home {
  background: url(../img/nav/nav_top.png) no-repeat left center;
}

.nav-home.active,.nav-home:hover {
  background: url(../img/nav/nav_top_on.png) no-repeat left center;
}

.nav-information {
  background: url(../img/nav/nav_infomarion.png) no-repeat left center;
}

.nav-information.active,.nav-information:hover {
  background: url(../img/nav/nav_infomarion_on.png) no-repeat left center;
}

.nav-introduction {
  background: url(../img/nav/nav_intro.png) no-repeat left center;
}

.nav-introduction.active,.nav-introduction:hover {
  background: url(../img/nav/nav_intro_on.png) no-repeat left center;
}

.nav-story {
  background: url(../img/nav/nav_story.png) no-repeat left center;
}

.nav-story.active,.nav-story:hover {
  background: url(../img/nav/nav_story_on.png) no-repeat left center;
}

.nav-staff_cast {
  background: url(../img/nav/nav_staff-cast.png) no-repeat left center;
}

.nav-staff_cast.active,.nav-staff_cast:hover {
  background: url(../img/nav/nav_staff-cast_on.png) no-repeat left center;
}

.nav-character {
  background: url(../img/nav/nav_character.png) no-repeat left center;
}

.nav-character.active,.nav-character:hover {
  background: url(../img/nav/nav_character_on.png) no-repeat left center;
}

.nav-onair {
  background: url(../img/nav/nav_onair.png) no-repeat left center;
}

.nav-onair.active,.nav-onair:hover {
  background: url(../img/nav/nav_onair_on.png) no-repeat left center;
}

.nav-music {
  background: url(../img/nav/nav_music.png) no-repeat left center;
}

.nav-music.active,.nav-music:hover {
  background: url(../img/nav/nav_music_on.png) no-repeat left center;
}

.nav-movie {
  background: url(../img/nav/nav_movie.png) no-repeat left center;
}

.nav-movie.active,.nav-movie:hover {
  background: url(../img/nav/nav_movie_on.png) no-repeat left center;
}

.nav-radio {
  background: url(../img/nav/nav_radio.png) no-repeat left center;
}

.nav-radio.active,.nav-radio:hover {
  background: url(../img/nav/nav_radio_on.png) no-repeat left center;
}

.nav-package {
  background: url(../img/nav/nav_package.png) no-repeat left center;
}

.nav-package.active,.nav-package:hover {
  background: url(../img/nav/nav_package_on.png) no-repeat left center;
}

.nav-special {
  background: url(../img/nav/nav_sperial.png) no-repeat left center;
}

.nav-special.active,.nav-special:hover {
  background: url(../img/nav/nav_sperial_on.png) no-repeat left center;
}

.nav-books {
  background: url(../img/nav/nav_books.png) no-repeat left center;
}

.nav-books.active,.nav-books:hover {
  background: url(../img/nav/nav_books_on.png) no-repeat left center;
}

.gnav__bnr {
  margin-top: 20px;
}

.gnav__bnr-item {
  margin-top: 12px;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.gnav__bnr-item:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: .6;
}

.gnav__bnr-item:first-child {
  margin-top: 0;
}

.contents {
  width: 778px;
  position: absolute;
  top: 0;
  left: 0;
  right: 240px;
  margin: 0 auto;
}

.contents__item {
  margin-top: 44px;
  position: relative;
  background: url(../img/common/container_bg_middle.png) repeat-y left top;
  color: #333;
}

.contents__item a {
  color: #fc7d92;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

.contents__item a:hover {
  color: #fec8d1;
}

.contents__item:after {
  content: '';
  position: absolute;
  top: -44px;
  left: 0;
  width: 778px;
  height: 44px;
  background: url(../img/common/container_bg_top.png) no-repeat left top;
}

.contents__item:before {
  content: '';
  position: absolute;
  bottom: -44px;
  left: 0;
  width: 778px;
  height: 44px;
  background: url(../img/common/container_bg_bottom.png) no-repeat left top;
}

.line {
  background: url(../img/common/line.png) no-repeat left top;
  border: none;
  height: 11px;
  margin: 20px 0;
}

.mid .footer {
  position: absolute;
  /*top: 975px;*/
  top: 865px;
  right: 10px;
}

.mid .footer__sns {
  position: relative;
  right: -10px;
}

.mid .footer__sns-item {
  float: left;
}

.mid .footer__sns-item.tw {
  overflow: hidden;
  width: 112px;
}

.mid .footer__links {
  position: relative;
  margin-top: 10px;
}

.mid .footer__links-top {
  position: absolute;
  right: 0;
  top: 0;
}

.mid .footer__links-bottom {
  position: absolute;
  right: 0;
  top: 20px;
}

.mid .footer__links-item {
  position: relative;
  float: left;
  margin-left: 20px;
}

.mid .footer__links-item:after {
  margin: 0 5px;
  position: absolute;
  top: 0;
  left: -18px;
  content: '';
  width: 6px;
  height: 12px;
  background: url(../img/common/footer/foot_slash.png) no-repeat left top;
}

.mid .footer__links-item:first-child {
  margin-left: 0;
}

.mid .footer__links-item:first-child:after {
  display: none;
}

.mid .footer__links-item a {
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.mid .footer__links-item a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: .6;
}

.mid .footer__attention {
  margin-top: 40px;
  text-align: right;
}

.mid .footer__attention span {
  display: block;
  height: 14px;
}

.mid .copyright {
  text-align: right;
  margin-top: 8px;
}

#modal-window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

#modal-window__container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 3001;
}

#modal-window__container:before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 820px;
  height: 10px;
  background: url(../img/movie/modal/line.png) no-repeat left top;
}

#modal-window__container:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 820px;
  height: 10px;
  background: url(../img/movie/modal/line.png) no-repeat left top;
}

#modal-window__container.movie {
  width: 820px;
  height: 460px;
}

#modal-window__container.books {
  padding: 70px 58px;
  width: 704px;
  height: 360px;
}

#modal-window__container.viewer {
  height: 600px;
  width: 820px;
  text-align: center;
}

#modal-window__container.viewer img {
  max-height: 600px;
}

#modal-window__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 106px;
  height: 17px;
  background: url(../img/common/btn_close.png) no-repeat left top;
  z-index: 3002;
  cursor: pointer;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

#modal-window__close:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: .7;
}

#modal-window__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: .9;
  z-index: 3000;
}

.nav-event {
  background: url(../img/nav/nav_event.png) no-repeat left center;
}

.nav-event.active, .nav-event:hover {
  background: url(../img/nav/nav_event_on.png) no-repeat left center;
}