@charset "UTF-8";
/* ==========================================================
481～768px
========================================================== */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* common
  ----------------------------------------------------------- */
  body {
    width: 100%;
    clear: both;
  }

  .sp {
    display: none !important;
  }

  /* header
  ----------------------------------------------------------- */
  #logo-head {
    width: 100%;
    clear: both;
  }
  #logo-head .logo {
    width: 374px;
    padding: 42px 2% 32px;
  }
  #logo-head ul {
    position: absolute;
    top: 8px;
    right: 2%;
  }
  #logo-head ul li {
    display: inline-block;
  }
  #logo-head ul li.head-access a {
    background: url(../images/common/icon_marker.svg) no-repeat 6% 50% #fff;
    background-size: 18px;
    color: #3A3630;
    line-height: 30px;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 0 1.4em 0 2.8em;
  }
  #logo-head ul li.head-en a {
    background: url(../images/common/icon_en.svg) no-repeat 14% 49% #3A3630;
    background-size: 17px;
    color: #fff;
    line-height: 30px;
    font-size: 11px;
    font-size: 1.1rem;
    padding: 0 1.8em 0 3.6em;
  }

  #global-nav {
    height: 100px;
  }
  #global-nav ul {
    width: 100%;
    clear: both;
  }
  #global-nav ul li {
  /*  width: 20%; */
    width: 24%;
  }
  #global-nav ul li a {
    background-repeat: no-repeat;
    background-position: 50% 14px;
    background-size: 32px;
    display: block;
    width: auto;
    height: 92px;
    padding-top: 60px;
    text-align: center;
    color: #3A3630;
    font-size: 14px;
    font-size: 1.4rem;
  }
  #global-nav ul li a:hover {
    background-repeat: no-repeat;
    background-position: 50% 14px;
    background-color: #FADC0E;
    background-size: 32px;
  }
  #global-nav ul li a span {
    display: block;
    overflow: hidden;
    outline: none;
    height: auto;
    padding-top: 0;
    margin: 0 auto;
    font-weight: bold;
  }

  #global-nav a span {
    background: none;
    width: auto;
  }

  #global-nav .gnav-sptab {
    display: none;
  }

  /* visual
  ----------------------------------------------------------- */
  #tp-visual {
    width: 100%;
    clear: both;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    background: url(../images/slide_bg.jpg) top center;
    position: relative;
    padding-top: 20px;
    z-index: 0;
  }
  #tp-visual .tp-visual-inner {
    overflow: hidden;
    position: static;
    width: 100%;
    height: auto;
    margin-left: 0;
    padding-bottom: 20px;
  }

  .slider .slide {
    height: auto;
  }
  .slider .slide img {
    display: block;
    position: static;
    width: 100%;
    height: auto;
  }

  .spcal {
    background: url(../images/common/bg_line.png);
    margin-top: 54px;
  }

  .calender {
    position: static;
    text-align: center;
    padding: 24px 0;
    margin: 0 auto;
    width: 240px;
  }

  /* #tp-contents
  ----------------------------------------------------------- */
  /*tp-pickup*/
  .tp-pickup {
    width: 100%;
    clear: both;
    padding: 60px 4% 40px;
  }
  .tp-pickup h2 {
    width: 218px;
  }
  .tp-pickup h2 img {
    width: 218px;
  }
  .tp-pickup li figure {
    width: 30%;
    float: left;
  }
  .tp-pickup li .balloon {
    width: 62%;
    margin: 26px 0 0 0;
  }
  .tp-pickup li .balloon::before {
    top: 40px;
    left: -25px;
    margin-top: -8px;
    border: 8px solid transparent;
    border-right: 20px solid #fff;
  }
  .tp-pickup li dt a {
    background-size: 24px;
  }

  /*tp-info*/
  .tp-info-bg {
    background: url(../images/common/footer_bg.png);
    padding: 24px 0 48px;
  }

  .tp-info {
    width: 100%;
    clear: both;
    width: 92%;
    padding: 40px 4%;
  }

  .info-open {
    width: 100%;
    float: none;
    padding: 24px 4% 40px;
    margin: 0 0 40px;
  }
  .info-open dt {
    font-size: 24px;
    font-size: 2.4rem;
    margin-bottom: 24px;
  }
  .info-open dd {
    text-align: center;
  }

  .info-time,
  .info-holiday {
    width: 100%;
    float: none;
    padding: 24px 0;
  }

  .info-time {
    margin-right: 0;
    margin-bottom: 40px;
  }

  /*tp-bnr*/
  .tp-bnr {
    position: static;
    height: auto;
  }
  .tp-bnr div {
    background: url(../images/tp_bnr_bg_sp.jpg) top center, url(../images/common/bg.jpg);
    position: static;
    padding-bottom: 40px;
  }
  .tp-bnr ul {
    width: 100%;
    clear: both;
    padding: 64px 4% 0;
    text-align: center;
  }
  .tp-bnr ul li {
    width: 48%;
  }
  .tp-bnr ul li:first-child {
    margin-right: 4%;
  }
  .tp-bnr ul li img {
    width: auto;
  }

  /*tp-news*/
  .news-inner {
    width: 100%;
    clear: both;
    padding: 100px 4% 0;
  }

  .news-box {
    width: 100%;
  }
  .news-box h2 img {
    width: 30%;
  }
  .news-box .item-date {
    display: none;
  }
  .news-box .item-contents {
    display: none;
  }
  .news-box li {
    position: static;
    padding: 12px 4% 10px;
  }
  .news-box li span {
    position: static;
    width: 100%;
    margin: 0;
    display: block;
  }

  .tp-twitter {
    width: 40%;
    float: right;
  }

  /* aside
  ----------------------------------------------------------- */
  .tp-sub-btn {
    padding: 60px 0;
  }
  .tp-sub-btn ul {
    width: 100%;
    clear: both;
  }
  .tp-sub-btn ul li {
    width: 40%;
  }
  .tp-sub-btn ul li:first-child {
    margin-right: 4%;
  }

  /* footer
  ----------------------------------------------------------- */
  footer {
    background: none;
    padding-top: 0;
    margin-top: 0;
    z-index: 777;
    position: relative;
  }

  .f-inner {
    width: 100%;
    clear: both;
    padding: 24px 0 0;
  }

  .f-info {
    width: 100%;
    float: none;
    padding: 16px 4% 24px;
    text-align: center;
  }
  .f-info .f-sublogo {
    margin: 0 auto 8px;
  }
  .f-info .f-logo {
    margin: 0 auto 24px;
    width: 340px;
  }
  .f-info dt {
    color: #fff;
    background: #3A3630;
    padding: 5px 0;
    display: block;
    width: 50%;
    margin: 0 auto;
    clear: none;
    float: none;
    text-align: center;
    border-radius: 5px;
  }
  .f-info dd {
    display: block;
    width: 100%;
    float: none;
    padding-left: 0;
    padding-top: 8px;
    margin-bottom: 16px;
  }

  .f-link {
    width: 100%;
    float: none;
    background: url(../images/common/footer_bg02.png);
    position: static;
    padding: 0 1% 24px;
  }
  .f-link nav {
    margin-bottom: 0;
  }
  .f-link nav ul {
    width: 48%;
  }
  .f-link nav ul.f-link02 {
    margin-left: 2%;
  }
  .f-link nav li {
    font-size: 12px;
    font-size: 1.2rem;
  }
  .f-link nav li a {
    line-height: 40px;
    display: block;
    position: relative;
    padding-left: 18px;
  }
  .f-link nav li::before {
    padding-right: 0.3em;
    position: absolute;
    padding-top: 10px;
  }

  .f-link-btn {
    text-align: center;
    margin: 32px 0;
  }

  .f-link-btn li a {
    padding: 10px 3em 10px 1.6em;
  }

  .f-twitter {
    width: 60px;
    padding: 8px;
    position: static;
    margin: 0 auto;
    text-align: center;
  }

  .pagetop {
    border-radius: 0;
    display: block;
    overflow: visible;
    position: static;
    text-align: center;
  }
  .pagetop a {
    display: block;
    font-size: 12px;
    font-size: 1.2rem;
    border-radius: 0;
    width: 100%;
    padding: 20px 0 0 0;
    line-height: 1;
  }
  .pagetop a img {
    margin: 0 auto;
    width: 24px;
    display: block;
  }

  /* sub_common
  ----------------------------------------------------------- */
  #sub-visual {
    background-size: cover;
    height: 280px;
    padding-top: 20px;
  }

  #breadCrumb {
    width: 100%;
    clear: both;
    padding: 0 4%;
  }
  #breadCrumb li {
    font-size: 12px;
    font-size: 1.2rem;
    background-size: 14px;
    padding-left: 20px;
  }

  .inner {
    width: 100%;
    clear: both;
    padding: 0 4% 64px;
  }

  /* guide
  ----------------------------------------------------------- */
  .ginfo-box .group {
    float: left;
    width: 45%;
  }
  .ginfo-box .rest {
    float: right;
    width: 53%;
  }

  .ginfo-box dd {
    padding: 30px 5% 16px;
  }

  .guide-info-area .btn {
    float: none;
  }

  .ginfo-detail {
    margin-top: 0;
    padding-top: 40px;
  }

  .guide-facility-area {
    padding: 32px 4%;
  }
  .guide-facility-area .inner {
    padding: 48px 4% 32px;
  }

  .gfaci-info {
    width: 65%;
  }
  .gfaci-info h2 {
    font-size: 30px;
    font-size: 3rem;
    margin-bottom: 32px;
  }
  .gfaci-info th, .gfaci-info td {
    padding: 0.5em 0;
  }

  .gfaci-img {
    width: 30%;
    padding-top: 64px;
  }

  /* exhibition
  ----------------------------------------------------------- */
  .ex-map-area .ex-map {
    width: 100%;
  }
  .ex-map-area .ex-map .pc {
    display: none;
  }
  .ex-map-area .ex-map .sp {
    display: block !important;
  }

  .ex-anchor li {
    width: 32%;
    margin-right: 2%;
  }
  .ex-anchor li:nth-child(5n) {
    margin-right: 2%;
  }
  .ex-anchor li:nth-child(3n) {
    margin-right: 0;
  }
  .ex-anchor li a {
    font-size: 13px;
    font-size: 1.3rem;
  }

  .ex-display-area {
    padding: 64px 0;
  }

  .display-ttl {
    height: 100px;
    padding: 1em 2% 1em 0;
  }
  .display-ttl h3 {
    width: 65%;
  }
  .display-ttl h3 a {
    font-size: 20px;
    font-size: 2rem;
  }
  .display-ttl .btn {
    width: 28%;
    float: right;
    margin-top: 14px;
  }
  .display-ttl .btn a {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 40px;
    background: url(../images/icon_arrow_circle.svg) no-repeat 10% 50% #fff;
    background-size: 16px;
    padding-left: 1.4em;
  }

  .display-box {
    padding: 40px 4%;
  }
  .display-box figure {
    width: 80%;
    float: none;
    margin: 0 auto 2em;
    text-align: center;
  }
  .display-box figure img {
    width: auto;
  }
  .display-box .display-detail {
    width: 100%;
    float: none;
  }
  .display-box .display-detail dl {
    padding: 2em 4% 1em;
  }

  /* exhibition/list
  ----------------------------------------------------------- */
  .ex-list-area {
    padding: 64px 0 0;
  }

  .ex-search {
    padding-bottom: 2em;
  }
  .ex-search .search-txt {
    float: none;
    width: 100%;
    margin-bottom: 2em;
  }
  .ex-search .search-box {
    float: none;
    width: 100%;
    padding: 12px 4%;
  }

  .ex-list-item {
    padding: 32px 0;
  }
  .ex-list-item h3 {
    font-size: 20px;
    font-size: 2rem;
    margin-bottom: 32px;
  }
  .ex-list-item figure {
    width: 30%;
  }
  .ex-list-item img {
    width: auto;
  }
  .ex-list-item ul {
    width: 66%;
    padding-top: 0;
  }
  .ex-list-item li {
    background-size: 16px;
    padding: 5px 0 8px 24px;
  }

  /* exhibition/detail
  ----------------------------------------------------------- */
  #ex-detail {
    padding-bottom: 0;
  }
  #ex-detail #breadCrumb {
    padding: 1.2em 4% 1em;
  }

  .ex-detail-primary {
    padding: 0 0 48px;
    margin-bottom: 48px;
  }
  .ex-detail-primary h1 {
    font-size: 28px;
    font-size: 2.8rem;
  }

  .pattern01 .ex-detail-primary img {
    width: 100%;
  }

  .pattern02 .ex-detail-primary img {
    width: 70%;
  }

  .pattern03 .ex-detail-primary img {
    width: 70%;
  }

  .ex-detail-secondary {
    padding-bottom: 64px;
  }
  .ex-detail-secondary figure {
    width: 70%;
    margin: 0 auto;
  }
  .ex-detail-secondary dl {
    width: 100%;
  }
  .ex-detail-secondary dt {
    margin: 1em 0;
  }

  .ex-detail-secondary.img-l figure {
    float: none;
  }
  .ex-detail-secondary.img-l .detail-txt {
    float: none;
  }

  .ex-detail-secondary.img-r figure {
    float: none;
  }
  .ex-detail-secondary.img-r .detail-txt {
    float: none;
  }

  .detail-movie {
    padding: 40px 0 0 0;
    margin-bottom: 64px;
  }
  .detail-movie h2 {
    font-size: 32px;
    font-size: 3.2rem;
  }

  .movie-box {
    padding: 64px 4% 48px;
  }
  .movie-box .youtube {
    width: 100%;
  }

  .movie-col1 p {
    padding: 0;
  }

  .movie-col2 .movie-box {
    padding: 64px 4% 48px;
  }
  .movie-col2 .movie-box .youtube {
    width: 100%;
  }
  .movie-col2 .movie-box .movie-list {
    width: 100%;
    margin-bottom: 40px;
  }
  .movie-col2 .movie-box .movie-list:first-child {
    margin-right: 0;
  }
  .movie-col2 .movie-box .movie-list:last-child {
    margin-bottom: 0;
  }

  #ex-detail .btn {
    width: 60%;
  }
  #ex-detail .btn a {
    background: url(../images/icon_arrow_circle_back.svg) no-repeat 10% 52% #fff;
    background-size: 16px;
  }

  .ex-relate {
    padding: 32px 4% 0;
  }
  .ex-relate ul li {
    margin-right: 0;
    width: 100%;
  }
  .ex-relate ul li a {
    background: url(../images/icon_arrow_circle.svg) no-repeat 5% 50%;
    background-size: 16px;
  }

  /* event
  ----------------------------------------------------------- */
  #event-detail {
    padding-bottom: 0;
  }
  #event-detail #breadCrumb {
    padding: 1.2em 4% 1em;
  }

  .event-primary {
    padding-bottom: 100px;
  }
  .event-primary h1 {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .event-primary img {
    margin-bottom: 32px;
    border: 8px solid #fff;
    width: 60%;
  }
  .event-primary dl {
    width: 100%;
  }

  .event-point {
    padding: 48px 4% 0;
    margin-bottom: 100px;
  }
  .event-point::after {
    display: none;
  }
  .event-point h2 {
    font-size: 28px;
    font-size: 2.8rem;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
  .event-point h2::before {
    top: -75px;
  }

  .epoint-box {
    padding-bottom: 40px;
  }
  .epoint-box figure {
    width: 40%;
  }
  .epoint-box figure img {
    width: auto;
  }
  .epoint-box p {
    width: 55%;
    padding-top: 0;
  }

  .event-archive {
    padding: 32px 4% 8px;
  }
  .event-archive dl dt a {
    padding: 24px 8px 20px 48px;
  }
  .event-archive dl dt span {
    display: block;
    margin-left: 0;
    margin-top: 8px;
  }
  .event-archive dl dd {
    padding: 20px 30px;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.6;
  }

  /* reserve
  ----------------------------------------------------------- */
  .reserve-info-area {
    padding: 0;
  }
  .reserve-info-area .alignC {
    padding: 0 5%;
    text-align: left !important;
  }

  .rinfo-box {
    padding-bottom: 64px;
  }
  .rinfo-box dd {
    padding: 40px 4% 24px;
    width: 100%;
  }

  .rinfo-box .sp, .reserve-info-area .ttl-cercle .sp {
    display: block !important;
  }

  .reserve #sub-main .btn {
    width: 80%;
  }
  .reserve #sub-main .btn a {
    line-height: 60px;
    background: url(../images/icon_cal_cercle.svg) no-repeat 10% 50% #fff;
    padding-left: 2em;
    padding-top: 4px;
  }

  .reserve-program-area {
    background: url(../images/common/bg_line.png);
    padding: 64px 5%;
  }
  .reserve-program-area .ttl-base {
    font-size: 26px;
    font-size: 2.6rem;
    margin-bottom: 32px;
  }
  .reserve-program-area .inner {
    padding: 32px 4%;
    margin-top: 32px;
  }
  .reserve-program-area dl {
    padding: 1em 4%;
  }
  .reserve-program-area dt {
    font-size: 14px;
    font-size: 1.4rem;
    background: url(../images/bg_ribon.png) no-repeat 50% 0;
    background-size: 133px;
    padding: 10px 0 20px;
    float: none;
    text-align: center;
  }
  .reserve-program-area dd {
    font-size: 14px;
    font-size: 1.4rem;
    padding-top: 0;
  }
  .reserve-program-area .program03 {
    margin-bottom: 40px;
  }

  /* education
  ----------------------------------------------------------- */
  .education-area {
    padding: 0 4% 40px;
  }

  .education-area .inner {
    padding: 24px 0 40px;
  }

  .education-box figure, .business-box figure {
    width: 40%;
  }
  .education-box .e-box-txt, .business-box .e-box-txt {
    width: 55%;
  }

  .e-box-txt .btn {
    width: 100%;
    margin: 40px 0 0 0;
  }

  /* business
  ----------------------------------------------------------- */
  .business-area {
    padding: 0 4% 40px;
  }

  .business-area .business-intro {
    width: 100%;
    clear: both;
    padding-bottom: 40px;
  }
  .business-area .business-intro .b-intro-txt {
    width: 100%;
    float: none;
  }
  .business-area .business-intro figure {
    width: 100%;
    float: none;
    text-align: center;
  }
  .business-area .business-intro figure img {
    width: 80%;
    margin-bottom: 40px;
  }

  .business-area .inner {
    border-top: 1px dotted #3A3630;
    padding-top: 24px;
  }

  /* access
  ----------------------------------------------------------- */
  .access #sub-visual {
    background-size: cover;
    padding-top: 12px;
  }

  .access-map-area ul {
    margin-bottom: 1em;
  }
  .access-map-area ul li {
    display: inline-block;
    width: 100%;
    margin-bottom: 1em;
  }

  .amap-box {
    padding: 20px 20px 32px;
  }
  .amap-box .btn {
    width: 320px;
    display: inline-block;
    margin: 0 auto 16px;
  }

  .access-trafic-area {
    padding: 0 5% 64px;
  }

  /* link
  ----------------------------------------------------------- */
  .link #sub-visual {
    background-size: cover;
    padding-top: 12px;
  }

  .link-area {
    padding: 0 0 40px;
  }

  /* sitemap
  ----------------------------------------------------------- */
  .sitemap #sub-visual {
    background-size: cover;
    height: 240px;
    padding-top: 12px;
  }

  .sitemap-area {
    *zoom: 1;
    padding: 0 0 64px;
  }
  .sitemap-area:after {
    content: "";
    display: table;
    clear: both;
  }
  .sitemap-area .sitemap01 {
    width: 49%;
    float: left;
  }
  .sitemap-area .sitemap02 {
    width: 49%;
    float: right;
  }
  .sitemap-area li a {
    background: url(../images/icon_arrow_circle.svg) no-repeat 96% 50% #fff;
    background-size: 24px;
    font-size: 16px;
    font-size: 1.6rem;
    padding: 1.2em 1em;
  }
  .sitemap-area li a span {
    font-size: 12px;
    font-size: 1.2rem;
    display: block;
    line-height: 1.9;
  }

  /* download
  ----------------------------------------------------------- */
  .download #sub-visual {
    background-size: cover;
    padding-top: 12px;
  }

  .dl-area {
    padding: 0 5% 64px;
  }

  .dl-item a {
    width: 22%;
    margin-right: 4%;
  }
  .dl-item .btn {
    width: 100%;
  }
  .dl-item .btn span {
    background: url(../images/icon_dl.svg) no-repeat 8% 50% #fff;
    background-size: 15px;
    font-size: 13px;
    font-size: 1.3rem;
  }

  /* info
  ----------------------------------------------------------- */
  .info #sub-visual {
    background-size: cover;
    padding-top: 12px;
  }

  .info-area {
    padding: 0 0 40px;
  }

  .info-list {
    width: 70%;
  }
  .info-list .item-date {
    width: 20%;
    font-size: 14px;
    font-size: 1.4rem;
  }
  .info-list .item-contents {
    width: 80%;
    font-size: 14px;
    font-size: 1.4rem;
  }
  .info-list .date {
    width: 20%;
    font-size: 11px;
    font-size: 1.1rem;
  }
  .info-list .contents {
    width: 80%;
  }

  .info-archive {
    width: 26%;
  }
  .info-archive dt {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 1.2em 0;
  }
  .info-archive dd a {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 0 0 0 2.2em;
    line-height: 40px;
  }
}
/* -----@media screen and (max-width:768px) ------ */