/*
 * Normalize
 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure, figcaption {
  margin: 0;
  padding: 0; }

main {
  display: block; }

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

fieldset, img {
  border: 0;
  vertical-align: top; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

area {
  outline: none;
  border: none; }

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

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

abbr, acronym {
  border: 0; }

/*
 * Fonts
 */
html {
  font-family: 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.7em; }

input, textarea, select, button {
  font-family: 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 13px;
  font-weight: normal; }

/*
 * Global
 */
body, html {
  width: 100%;
  height: 100%; }

body {
  background: #fff;
  color: #000;
  -webkit-text-size-adjust: none; }

input, textarea, select, button {
  color: #fff; }

* {
  outline: none;
  -webkit-tap-highlight-color: rgba(231, 217, 100, 0.5); }

::-moz-selection {
  background: rgba(231, 217, 100, 0.5); }

::selection {
  background: rgba(231, 217, 100, 0.5); }

#wrapper {
  background: url(../img/bg.jpg) center top;
  position: relative;
  min-width: 1024px;
  margin: auto; }

#contents {
  width: 1024px;
  margin: auto;
  position: relative; }

a {
  color: #754927;
  text-decoration: underline; }
  a:hover {
    text-decoration: none; }

/*
 * Header
 */
header {
  background: url(../img/header_bg.png) center top;
  height: 119px;
  margin: auto;
  position: relative;
  z-index: 1000; }
  header .title {
    text-align: center;
    padding: 10px 0 0 125px; }

/*
 * Footer
 */
footer {
  background: #fff;
  width: 100%;
  text-align: center;
  padding: 20px 0; }
  footer .copyright {
    color: #000;
    font-size: 0.79rem;
    font-family: 'Verdana', 'Helvetica', sans-serif;
    line-height: 1.8em; }

.pager {
  margin: 0 auto;
  padding: 50px 0;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  position: relative; }
  .pager li.number {
    display: inline;
    margin: 0 10px;
    vertical-align: middle; }
    .pager li.number a {
      background: #eac897;
      padding: 7px 0;
      color: #000;
      font-size: 16px;
      line-height: 1em;
      text-align: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      text-decoration: none;
      display: inline-block;
      box-sizing: border-box; }
      .pager li.number a:hover {
        background: #925600;
        color: #fff; }
    .pager li.number.active a {
      background: #925600;
      color: #fff; }
  .pager li.omission {
    display: inline;
    margin: 0 10px;
    padding: 7px 0;
    vertical-align: middle; }
  .pager .prev,
  .pager .next {
    visibility: hidden;
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px; }
  .pager .prev a {
    background: url(../img/pager_prev.png) no-repeat;
    display: block;
    width: 94px;
    height: 65px;
    text-indent: -9999px; }
  .pager .next a {
    background: url(../img/pager_next.png) no-repeat;
    display: block;
    width: 115px;
    height: 65px;
    text-indent: -9999px; }
  .pager .prev a:hover,
  .pager .next a:hover {
    background-position: 0 -70px; }

#zoom_image {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  z-index: 1050; }
  #zoom_image .image img {
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    cursor: zoom-in; }
  #zoom_image .close {
    background: url(../img/btn_close.svg);
    position: absolute;
    top: 15px;
    right: 15px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    text-indent: -9999px; }

body.museum-box-detail #wrapper {
  background: url(../img/museum-box/bg_illust.png) no-repeat center bottom, url(../img/bg.jpg) center top; }

body.museum-box-detail #contents h2.title {
  text-align: center;
  margin: 15px 0 0 0; }

body.museum-box-detail #contents .container {
  background: url(../img/museum-box/book_detail.png) no-repeat;
  width: 1015px;
  height: 611px;
  margin: 10px auto 15px auto;
  position: relative; }

body.museum-box-detail #contents .list {
  position: absolute;
  top: 0;
  left: 0;
  width: 510px;
  height: 610px; }
  body.museum-box-detail #contents .list h3 {
    position: absolute;
    top: 33px;
    left: 87px; }
  body.museum-box-detail #contents .list ul.items {
    position: absolute;
    top: 80px;
    left: 90px;
    width: 396px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    body.museum-box-detail #contents .list ul.items li {
      width: 168px;
      height: 126px;
      margin: 2px 15px;
      position: relative; }
      body.museum-box-detail #contents .list ul.items li.active:after {
        content: "";
        background: url(../img/museum-box/list_frame_active.png);
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0; }
      body.museum-box-detail #contents .list ul.items li a {
        display: block;
        width: 100%;
        height: 100%; }
      body.museum-box-detail #contents .list ul.items li .thumb {
        background-size: cover;
        background-position: center center;
        position: absolute;
        top: 18px;
        left: 26px;
        width: 119px;
        height: 75px; }
        body.museum-box-detail #contents .list ul.items li .thumb:after {
          content: "";
          background: url(../img/museum-box/list_frame.png);
          display: block;
          width: 100%;
          height: 100%; }
      body.museum-box-detail #contents .list ul.items li .title {
        position: absolute;
        top: 100px;
        left: 15px;
        width: 140px;
        font-size: 0.93rem;
        line-height: 1em;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden; }
  body.museum-box-detail #contents .list .pager {
    position: absolute;
    top: 480px;
    left: 0;
    padding: 15px 0 0 65px;
    box-sizing: border-box; }
    body.museum-box-detail #contents .list .pager .prev, body.museum-box-detail #contents .list .pager .next {
      margin: 0;
      position: absolute;
      top: 0; }
    body.museum-box-detail #contents .list .pager .prev {
      left: 65px; }
    body.museum-box-detail #contents .list .pager .next {
      right: 0; }
    body.museum-box-detail #contents .list .pager li.number,
    body.museum-box-detail #contents .list .pager li.omission {
      margin: 0 5px; }

body.museum-box-detail #contents .detail {
  position: absolute;
  top: 0;
  left: 510px;
  width: 450px; }
  body.museum-box-detail #contents .detail .title {
    position: absolute;
    top: 68px;
    left: 65px;
    width: 340px;
    font-size: 1.58rem;
    line-height: 1em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
  body.museum-box-detail #contents .detail .photo_box {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 107px;
    left: 69px;
    width: 340px;
    height: 240px;
    cursor: pointer;
    cursor: zoom-in; }
  body.museum-box-detail #contents .detail .photo_card {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 355px;
    left: 69px;
    width: 340px;
    height: 125px;
    cursor: pointer;
    cursor: zoom-in; }
  body.museum-box-detail #contents .detail .prev, body.museum-box-detail #contents .detail .next {
    position: absolute;
    top: 483px;
    visibility: hidden; }
    body.museum-box-detail #contents .detail .prev a, body.museum-box-detail #contents .detail .next a {
      display: block;
      text-indent: -9999px;
      width: 100%;
      height: 100%; }
      body.museum-box-detail #contents .detail .prev a:hover, body.museum-box-detail #contents .detail .next a:hover {
        background-position: 0 -70px; }
  body.museum-box-detail #contents .detail .prev {
    left: 60px;
    width: 91px;
    height: 57px; }
    body.museum-box-detail #contents .detail .prev a {
      background-image: url(../img/pager2_prev.png); }
  body.museum-box-detail #contents .detail .next {
    left: 336px;
    width: 77px;
    height: 56px; }
    body.museum-box-detail #contents .detail .next a {
      background-image: url(../img/pager2_next.png); }

body.museum-box-detail #contents .back {
  position: absolute;
  bottom: -84px;
  left: 50%;
  margin-left: -530px; }