/*==================================================
  common
==================================================*/
@font-face {
  font-family: 'futura';
  src: url(futura.ttf); }

.res-pc {
  display: inline !important; }
  @media only screen and (max-width: 640px) {
    .res-pc {
      display: none !important; } }

.res-sp {
  display: none !important; }
  @media only screen and (max-width: 640px) {
    .res-sp {
      display: inline !important; } }

#contents {
  font-family: 'futura', Helvetica, Verdana,  sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f2f2f2;
  min-width: 980px; }
  @media only screen and (max-width: 640px) {
    #contents {
      min-width: 0; } }
  #contents a:hover,
  #contents #news-header-more:hover,
  #contents .owl-prev:hover,
  #contents .owl-next:hover {
    opacity: 0.8;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out; }

/*==================================================
  mv
==================================================*/
#mv {
  z-index: 100;
  position: relative;
  width: 100%; }
  #mv p img {
    width: 100%; }

#mv .owl-controls .owl-buttons, #news .owl-controls .owl-buttons {
  position: absolute;
  top: 50%;
  margin: 0 auto;
  width: 100%; }
  #mv .owl-controls .owl-buttons .owl-prev,
  #mv .owl-controls .owl-buttons .owl-next, #news .owl-controls .owl-buttons .owl-prev,
  #news .owl-controls .owl-buttons .owl-next {
    margin: 0;
    padding: 0;
    width: 36px;
    height: 76px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    background: no-repeat 0 0;
    background-size: contain;
    border-radius: 0;
    font-size: 0;
    bottom: auto; }
    @media only screen and (max-width: 640px) {
      #mv .owl-controls .owl-buttons .owl-prev,
      #mv .owl-controls .owl-buttons .owl-next, #news .owl-controls .owl-buttons .owl-prev,
      #news .owl-controls .owl-buttons .owl-next {
        width: 18px;
        height: 38px; } }
  #mv .owl-controls .owl-buttons .owl-prev, #news .owl-controls .owl-buttons .owl-prev {
    background-image: url(../images/top/mv-arrow-left.gif);
    left: 0; }
  #mv .owl-controls .owl-buttons .owl-next, #news .owl-controls .owl-buttons .owl-next {
    background-image: url(../images/top/mv-arrow-right.gif);
    right: 0; }

#news .owl-controls {
  margin-top: 0; }
  #news .owl-controls .owl-buttons .owl-prev {
    background-image: url(../images/top/mv-arrow-blue-left.gif); }
    @media only screen and (max-width: 640px) {
      #news .owl-controls .owl-buttons .owl-prev {
        left: -20px; } }
  #news .owl-controls .owl-buttons .owl-next {
    background-image: url(../images/top/mv-arrow-blue-right.gif); }
    @media only screen and (max-width: 640px) {
      #news .owl-controls .owl-buttons .owl-next {
        right: -20px; } }
  #news .owl-controls .owl-pagination {
    padding-bottom: 20px; }
    #news .owl-controls .owl-pagination .owl-page span {
      background-color: #cccccc; }
    #news .owl-controls .owl-pagination .owl-page.active span {
      background-color: #163073; }

#mv-wrapper {
  position: relative; }

.webticket-btn {
  position: absolute;
  display: block;
  width: 153px;
  z-index: 999; }
  @media print, screen and (min-width: 641px) {
    .webticket-btn {
      bottom: 65px;
      right: 46px; } }
  @media only screen and (max-width: 640px) {
    .webticket-btn {
      width: 31.25vw;
      top: 1.5625vw;
      right: 1.40625vw; } }
  .webticket-btn img {
    max-width: 100%; }

/*==================================================
  news
==================================================*/
#news {
  position: relative;
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  z-index: 1000; }
  @media only screen and (max-width: 640px) {
    #news {
      width: auto;
      margin: 0 20px 0; } }
  #news #news-header {
    cursor: pointer; }
  #news h4 {
    display: table;
    height: 108px;
    width: 826px; }
    @media only screen and (max-width: 640px) {
      #news h4 {
        width: 79.28571%;
        height: 70px;
        padding: 10px 0 5px 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; } }
    #news h4 span {
      display: table-cell;
      vertical-align: middle;
      height: 100%; }
      @media only screen and (max-width: 640px) {
        #news h4 span {
          display: block;
          height: auto; } }
    #news h4 span:nth-of-type(1) {
      font-size: 22px;
      width: 172px;
      letter-spacing: 0.2em;
      text-align: center; }
      @media only screen and (max-width: 640px) {
        #news h4 span:nth-of-type(1) {
          font-size: 12px;
          width: auto;
          text-align: left;
          margin-bottom: 5px; } }
    #news h4 span:nth-of-type(2) {
      font-family: Helvetica, Verdana,  sans-serif;
      font-size: 16px; }
      @media only screen and (max-width: 640px) {
        #news h4 span:nth-of-type(2) {
          font-size: 11px;
          color: #b8b7b7; } }
  #news #news-header-more {
    position: absolute;
    display: table;
    width: 154px;
    height: 108px;
    background-color: #17288b;
    top: 0;
    right: 0; }
    @media only screen and (max-width: 640px) {
      #news #news-header-more {
        width: 58px;
        height: 70px; } }
    #news #news-header-more span {
      position: relative;
      display: table-cell;
      vertical-align: middle;
      width: 100%;
      height: 100%;
      font-size: 16px;
      color: #fff;
      text-decoration: none;
      text-align: center; }
      @media only screen and (max-width: 640px) {
        #news #news-header-more span {
          font-size: 11px; } }
      #news #news-header-more span:before {
        display: inline;
        content: "more"; }
      #news #news-header-more span:after {
        display: inline-block;
        content: " ";
        background: url(../images/top/news-arrow-open.png) no-repeat center 0;
        background-size: contain;
        width: 16px;
        height: 16px;
        vertical-align: -3px;
        margin-left: 25px; }
        @media only screen and (max-width: 640px) {
          #news #news-header-more span:after {
            display: block;
            margin: 4px 0 0 0;
            width: 100%; } }
    #news #news-header-more.open span:before {
      content: "close"; }
    #news #news-header-more.open span:after {
      background: url(../images/top/news-arrow-close.png) no-repeat center 0;
      background-size: contain;
      width: 22px;
      height: 22px;
      vertical-align: middle;
      margin-left: 22px; }
      @media only screen and (max-width: 640px) {
        #news #news-header-more.open span:after {
          width: 100%;
          margin-left: 0; } }
  #news #owl-news {
    display: none; }
  #news .news {
    font-family: Helvetica, Verdana,  sans-serif;
    width: 790px;
    margin: 0 auto;
    padding: 30px 0;
    overflow: hidden; }
    @media only screen and (max-width: 640px) {
      #news .news {
        width: 89.28571%; } }
  #news .news h1 {
    width: 100%;
    margin: 0 0 16px;
    padding-bottom: 4px;
    font-size: 22px;
    color: #163073;
    font-weight: bold; }
    @media only screen and (max-width: 640px) {
      #news .news h1 {
        font-size: 15px; } }
  #news .news .text {
    float: left;
    font-size: 16px;
    line-height: 1.6;
    width: 450px; }
    @media only screen and (max-width: 640px) {
      #news .news .text {
        float: none;
        font-size: 12px;
        width: auto; } }
  #news .news .pict {
    float: right;
    text-align: center;
    width: 300px;
    margin-top: 6px; }
    @media only screen and (max-width: 640px) {
      #news .news .pict {
        float: none;
        width: auto;
        margin-top: 20px;
        font-size: 0; } }
  #news .news .pict img {
    width: 100%; }
    @media only screen and (max-width: 640px) {
      #news .news .pict img {
        margin-left: 0;
        display: inline-block;
        vertical-align: top;
        width: 50%; } }
  #news .news.no_image .text {
    width: 100%; }
  #news .news.no_image .pict {
    display: none; }
  #news a:hover {
    color: #FF0000; }
  #news .lint {
    font-size: 10px; }

/*==================================================
  section common
==================================================*/
.section {
  padding: 60px 0; }
  @media only screen and (max-width: 640px) {
    .section {
      padding: 40px 0; } }
  .section h2.sec-title {
    text-align: center;
    margin-bottom: 45px; }
    @media only screen and (max-width: 640px) {
      .section h2.sec-title {
        margin-bottom: 20px; } }
    .section h2.sec-title a, .section h2.sec-title strong {
      position: relative;
      font-size: 30px;
      color: #163073;
      text-decoration: none;
      letter-spacing: 0.15em; }
      @media only screen and (max-width: 640px) {
        .section h2.sec-title a, .section h2.sec-title strong {
          font-size: 22px; } }
      .section h2.sec-title a span, .section h2.sec-title strong span {
        display: inline-block;
        background: url(../images/top/title-arrow-blue.png) no-repeat 0 center;
        background-size: 20px;
        padding-left: 30px; }
        @media only screen and (max-width: 640px) {
          .section h2.sec-title a span, .section h2.sec-title strong span {
            background-size: 18px; } }
  .section ul.sec-btn {
    font-size: 0;
    text-align: center; }
    .section ul.sec-btn li {
      display: inline-block;
      vertical-align: top;
      background: no-repeat 0 0;
      background-size: contain;
      margin: 0 19px; }
      @media only screen and (max-width: 640px) {
        .section ul.sec-btn li {
          margin: 20px 0 0 0;
          width: 100%; }
          .section ul.sec-btn li:first-child {
            margin-top: 0; } }
      .section ul.sec-btn li a {
        display: block;
        width: 268px;
        height: 246px;
        text-decoration: none;
        padding-top: 148px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        background: no-repeat center 0;
        background-size: contain; }
        @media only screen and (max-width: 640px) {
          .section ul.sec-btn li a {
            width: 78.125%;
            height: 40.625vw;
            margin: 0 auto;
            padding-top: 22.65625vw;
            font-size: 18px;
            background-size: contain; } }
        .section ul.sec-btn li a.line_1 {
          padding-top: 163px; }
          @media only screen and (max-width: 640px) {
            .section ul.sec-btn li a.line_1 {
              padding-top: 23.4375vw; } }
        .section ul.sec-btn li a.icon-hours {
          background-image: url(../images/top/btn-visit-hours-pc.jpg); }
        .section ul.sec-btn li a.icon-webtickets {
          background-image: url(../images/top/btn-visit-webtickets-pc.jpg); }
        .section ul.sec-btn li a.icon-tickets {
          background-image: url(../images/top/btn-visit-tickets-pc.jpg); }
        .section ul.sec-btn li a.icon-kaiyu {
          background-image: url(../images/top/btn-visit-kaiyu-pc.jpg); }
        .section ul.sec-btn li a.icon-exhibition {
          background-image: url(../images/top/btn-explore-exhibition-pc.jpg); }
        .section ul.sec-btn li a.icon-interactive {
          background-image: url(../images/top/btn-explore-interactive-pc.jpg); }
        .section ul.sec-btn li a.icon-face {
          background-image: url(../images/top/btn-explore-face-pc.jpg); }
        .section ul.sec-btn li a.icon-night {
          background-image: url(../images/top/btn-explore-night-pc.jpg); }
        .section ul.sec-btn li a.icon-trip {
          background-image: url(../images/top/btn-other-trip-pc.jpg); }
        .section ul.sec-btn li a.icon-insta {
          background-image: url(../images/top/btn-other-insta-pc.jpg); }
        .section ul.sec-btn li a.icon-youtube {
          background-image: url(../images/top/btn-other-youtube-pc.jpg); }
        @media only screen and (max-width: 640px) {
          .section ul.sec-btn li a.icon-hours {
            background-image: url(../images/top/btn-visit-hours-sp.jpg); }
          .section ul.sec-btn li a.icon-webtickets {
            background-image: url(../images/top/btn-visit-webtickets-sp.jpg); }
          .section ul.sec-btn li a.icon-tickets {
            background-image: url(../images/top/btn-visit-tickets-sp.jpg); }
          .section ul.sec-btn li a.icon-kaiyu {
            background-image: url(../images/top/btn-visit-kaiyu-sp.jpg); }
          .section ul.sec-btn li a.icon-exhibition {
            background-image: url(../images/top/btn-explore-exhibition-sp.jpg); }
          .section ul.sec-btn li a.icon-interactive {
            background-image: url(../images/top/btn-explore-interactive-sp.jpg); }
          .section ul.sec-btn li a.icon-face {
            background-image: url(../images/top/btn-explore-face-sp.jpg); }
          .section ul.sec-btn li a.icon-night {
            background-image: url(../images/top/btn-explore-night-sp.jpg); }
          .section ul.sec-btn li a.icon-trip {
            background-image: url(../images/top/btn-other-trip-sp.jpg); }
          .section ul.sec-btn li a.icon-insta {
            background-image: url(../images/top/btn-other-insta-sp.jpg); }
          .section ul.sec-btn li a.icon-youtube {
            background-image: url(../images/top/btn-other-youtube-sp.jpg); } }

@media print, screen and (min-width: 641px) {
  .item-4 ul.sec-btn li {
    margin: 0 10px; } }

@media print, screen and (min-width: 641px) {
  .item-4 ul.sec-btn li a {
    width: 205px;
    height: 189px;
    background-size: contain;
    font-size: 20px;
    padding-top: 114px; } }

#sec-lower {
  background: url(../images/top/sec-lower-bg.jpg) no-repeat center center;
  background-size: cover; }

.sec-line {
  width: 103px;
  height: 1px;
  background-color: #163073;
  border: none; }

/*==================================================
  restaurant
==================================================*/
@media only screen and (max-width: 640px) {
  #restaurant {
    padding-top: 30px; } }

#restaurant h2.sec-title strong {
  color: #fff; }
  #restaurant h2.sec-title strong span {
    background-image: url(../images/top/title-arrow-white.png);
    text-align: left; }

#restaurant ul.sec-btn li {
  background-color: #fff; }
  @media only screen and (max-width: 640px) {
    #restaurant ul.sec-btn li {
      width: 78.125%;
      height: 55.9375vw;
      margin: 20px auto 0; }
      #restaurant ul.sec-btn li:first-child {
        margin-top: 0; } }
  #restaurant ul.sec-btn li a {
    color: #163073;
    padding-top: 180px;
    font-size: 20px;
    background: no-repeat center 9px; }
    @media only screen and (max-width: 640px) {
      #restaurant ul.sec-btn li a {
        background-size: 72.8125vw auto;
        width: auto;
        height: auto;
        padding-top: 41.40625vw;
        font-size: 15px; } }
    #restaurant ul.sec-btn li a.line_1 {
      padding-top: 190px; }
      @media only screen and (max-width: 640px) {
        #restaurant ul.sec-btn li a.line_1 {
          padding-top: 44.53125vw; } }
    #restaurant ul.sec-btn li a.restaurant-01 {
      background-image: url(../images/top/restaurant-img-01-pc.jpg); }
    #restaurant ul.sec-btn li a.restaurant-02 {
      background-image: url(../images/top/restaurant-img-02-pc.jpg); }
    #restaurant ul.sec-btn li a.restaurant-03 {
      background-image: url(../images/top/restaurant-img-03-pc.jpg); }
    @media only screen and (max-width: 640px) {
      #restaurant ul.sec-btn li a.restaurant-01 {
        background-image: url(../images/top/restaurant-img-01-sp.jpg); }
      #restaurant ul.sec-btn li a.restaurant-02 {
        background-image: url(../images/top/restaurant-img-02-sp.jpg); }
      #restaurant ul.sec-btn li a.restaurant-03 {
        background-image: url(../images/top/restaurant-img-03-sp.jpg); } }

/*==================================================
  other
==================================================*/
#other {
  padding-top: 20px; }
  #other ul.sec-btn li a {
    padding-top: 105px;
    height: 160px; }
    @media only screen and (max-width: 640px) {
      #other ul.sec-btn li a {
        padding-top: 29.6875vw;
        height: 46.875vw; } }
    #other ul.sec-btn li a.icon-trip {
      padding-top: 90px; }
      @media only screen and (max-width: 640px) {
        #other ul.sec-btn li a.icon-trip {
          padding-top: 25vw; } }
      #other ul.sec-btn li a.icon-trip span {
        display: block;
        font-size: 12px;
        line-height: 1.16; }

/*==================================================
  map
==================================================*/
#map {
  z-index: 100;
  position: relative;
  width: 100%;
  min-width: 920px;
  height: 520px; }

#map_canvas {
  z-index: 1;
  width: 100%;
  height: 520px; }

#map .maphead {
  position: absolute;
  z-index: 999;
  top: 0;
  width: 100%;
  min-width: 980px;
  height: 40px;
  background-image: url("../images/googlemap.png");
  background-position: center center;
  background-repeat: no-repeat; }

#map_sp {
  display: none; }

@media only screen and (max-width: 640px) {
  #map {
    min-width: 320px;
    height: 380px; }
  #map .maphead {
    min-width: 320px;
    background-position: center right; }
  #map {
    display: none; }
  #map_sp {
    display: block;
    z-index: 100;
    position: relative; }
  #map_sp img {
    width: 100%; } }

/*==================================================
  page-top
==================================================*/
#page-top {
  z-index: 120;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 10px; }

#page-top a {
  background: #666;
  text-decoration: none;
  color: #fff;
  width: 40px;
  padding: 14px 0;
  text-align: center;
  display: block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px; }

#page-top a:hover {
  text-decoration: none;
  background: #999; }