@charset "utf-8";

/* CSS Document */

@media screen and (max-width:979px) {
    .spNone {
        display: none!important;
    }
    html {
        width: 100%;
        height: 100%;
        font-size: 12px;
    }
    body {
        width: 100%;
        height: 100%;
        font-size: 1rem;
        overflow-x: hidden;
    }
    img {
        display: block;
        max-width: 100%;
        width: auto;
    }
    /* header footer*/
    .header {
        width: 100%;
        height: 5em;
        background: #fff;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 99;
    }
    .header .h1 .long {
        display: block;
        height: 3em;
        position: absolute;
        left: 1.5em;
        top: 1em;
    }
    .header .h1 .short {
      display: none;
    }
    .headerContents address {
        display: none;
    }
    .menu {
        position: absolute;
        right: 1.5em;
        top: 1.75em;
        z-index: 99;
    }
    .menu img {
        height: 1.5em;
    }
    .header .nav {
        display: none;
        width: 100%;
        height: calc(100% - 5em);
        color: #FFF;
        position: fixed;
        top: 5em;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        z-index: 99;
    }
    .header .mainNav li img,
    .header .subNav li img {
        display: none;
    }
    .header .mainNav li,
    .header .subNav li {
        font-weight: bold;
        text-align: center;
    }
    .header .mainNav li a,
    .header .subNav li a {
        display: block;
        padding: 1em 2em;
        background: none;
        border-top: 1px solid rgba(255, 255, 255, 0.24);
    }
    .header .mainNav li a span,
    .header .subNav li a span {
        display: none;
    }
    .header .subNav {
        border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    }
    .header .language {
      text-align: center;
      margin-top: 1em;
    }
    .header .search {
        display: none;
    }
    /* footer */
    footer {
        margin-top: 3em;
    }
    .footer {
        margin: 0 auto;
        padding: calc(2rem + 10px) 0 3em;
        text-align: center;
        font-size: 85%;
    }
    .footer .left p img {
        height: 4.5em;
        margin: 0 auto 1.5em;
    }
    .footer nav {
        display: none;
    }
    .footer .right img {
        height: 9em;
        margin: 2rem auto 0;
    }
    /* common */
    .back {
        width: 3em;
        display: none;
        position: fixed;
        bottom: 1.5em;
        right: 1.5em;
    }
    .mnContents {
        display: none;
    }
    .banner {
        margin: 0 1.5em;
    }
    .banner li {
        width: calc(50% - 0.5em);
        float: left;
        margin: 1em 1em 0 0;
    }
    .banner li:nth-child(2n) {
        margin-right: 0;
    }
    .banner li:nth-child(-n+2) {
        margin-top: 0;
    }
    .subPage {
        margin-top: 5em;
    }
    .subPage .contents {
        padding: 1.5rem 1.5em 4rem;
    }
    .subPage .ancestor {
        font-size: 150%;
    }
    .subPage .ancestor span {
        text-align: center;
        padding: 3rem 1.5rem;
    }
    .subpageNav {
        background: #fff;
        box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
        border-radius: 0.25em;
    }
    .subpageNav .subMenu {
        text-align: center;
        padding: 1em;
    }
    .subpageNav .bottom {
        width: 100%;
        height: 0.5em;
        background: url("../img/arrow01.png") center / auto 0.25em no-repeat;
        border-top: 1px solid rgba(0, 0, 0, 0.04);
    }
    .subpageNav .bottom.open {
        background-image: url("../img/__arrow01.png");
    }
    .subpageNav ul {
        display: none;
        padding: 1.5em 1.5em calc(1.5em - 1px);
        background: rgba(0, 0, 0, 0.04);
    }
    .subpageNav ul ul {
        display: block;
        padding: 0.625em 0 0 1em;
        background: transparent;
    }
    .subpageNav li {
        line-height: 1.25;
        padding: 1em 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }
    .subpageNav li li {
        padding: 0 0 0.625em;
        border-bottom: none;
    }
    .subpageNav li:first-child {
        padding-top: 0;
    }
    .subpageNav li:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
    .subPageBody .right {
        margin-top: 3em;
    }
    .subPage .right .catch {
        font-size: 125%;
    }
    /* post */
    .post h1 {}
    .post h2 {
        font-size: 125%;
        margin-top: 3rem;
    }
    .post h3 {
        margin-top: 2.4rem;
    }
    .post h4 {
        margin-top: 1.8rem;
    }
    .post h5 {
        margin-top: 1.2rem;
    }
    .post table {
        font-size: 80%;
    }
    /* index */
    #index .indexBody {
        margin-top: 5em;
    }
    #index .body {
        padding: 0 1.5em;
    }
    #index .a {
        margin-bottom: calc(3em + 28px);
    }
    #index .a .image2 {
        width: 100%;
        padding-top: 62%;
        margin: 0 0 1.5em;
        background: url("../img/bg01.jpg") center / cover no-repeat;
        position: relative;
    }
    #index .a .slide,
    #musium .a .slide,
    #theater .a .slide {
        margin: 0 1.5em;
    }
    #index .slide .image,
    #musium .slide .image,
    #theater .slide .image {
        padding-top: 41.28878%;
    }




    #index .a .slide .image li,
    #musium .a .slide .image li,
    #theater .a .slide .image li {
        width: 100%;
    }
    #index .a .slide .image li a,
    #musium .a .slide .image li a,
    #theater .a .slide .image li a{
        display: block;
        width: 100%;
        padding-top: 41.28878%;
    }
    #index .a .catch img {
        width: 75%;
        padding-bottom: 0.75em;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 98;
    }
    #index .b {
        margin: 0 0 6em;
    }
    #index .b .grpSlider {
        margin: 0 1.5em 3em;
    }
    #index .b h2 {
        display: block;
        width: 100%;
        color: #fff;
        letter-spacing: 0.2em;
        text-align: center;
        text-indent: 0.2em;
        padding: 2em 0;
        background: url("../img/bg02.jpg") top center / cover no-repeat;
    }
    #index .c h2 {
        background-image: url("../img/bg03.jpg");
    }
    #index .b h2 span {
        display: block;
        font-family: "Times New Roman";
        font-size: 200%;
        font-weight: normal;
        margin: 0 0 0.5rem;
    }
    #index .b dl {
        width: 100%;
        margin-top: 1.5em;
    }
    #index .b dl:after {
        clear: both;
        content: '';
        display: block;
    }
    #index .b dt {
        width: calc((100% - 2em) / 3);
        float: left;
        margin-right: 1em;
    }
    #index .b dt span {
        background-color: rgba(0, 0, 0, 0.04);
    }
    #index .b dd {
        width: calc(((100% - 2em) / 1.5) + 1em);
        float: left;
    }
    #index .c {
        margin: 0 0 6em;
    }
    #index .d {
        margin: 0 0 6em;
    }
    #index .d .left {
        margin: 0 0 6em;
    }
    #index .d .right .youtube {
        margin-top: 6em;
    }
    #index .d table {
        font-size: 80%;
        margin: 1.5em 0 6em;
    }
    #index .d ul.middle {
        margin-bottom: 6em;
    }
    #index .d li {
        margin-top: 1.5em;
    }
    #index .f {
        margin: 0 0 6em;
    }
    #index .f .left {
        margin-top: 1.5em;
        margin-bottom: 3em;
    }
    #index .g {
        margin: 0 0 6em;
    }
    #index .g .left {
        padding: 1.5rem 0;
    }
    #index .g .left h2 {
        text-align: center;
    }
    #index .g .right {
        padding: 1.5em;
    }
    #index .g .right li:first-child {
        margin-bottom: 3em;
    }
    #index .g .right li a {
        font-size: 125%;
    }

    /* #musium */
    #musium .musiumBody,
    #theater .theaterBody {
        margin-top: 5em;
    }

    #musium .a,
    #theater .a{
      margin-bottom: calc(3em + 28px);
    }

    #musium .a .image2,
    #theater .a .image2{
        width: 100%;
        padding-top: 31%;
        margin-bottom: 1.5em;
        background: url("../img/musium.jpg") center / cover no-repeat;
        position: relative;
    }
    #theater .a .image2{
        background-image: url("../img/theater.jpg");
    }

    #musium .a .catch img,
    #theater .a .catch img {
        width: 40%;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 98;
    }
    #musium .a .inner,
    #theater .a .inner {
        width: 100%;
    }

    #musium .contents,
    #theater .contents {
      margin: 0 1.5em;
    }

    #musium .b,
    #theater .b {
        margin-bottom: 6em;
    }

    #musium .b .body,
    #theater .b .body{
        padding: 1.5em;
    }

    #musium .b .body2 p,
    #theater .b .body2 p {
        margin-bottom: 0;
    }

    #musium .b dl,
    #theater .b dl {
        margin: 0 0 6em 0;
    }

    #musium .b .body3 dl:last-child,
    #theater .b .body3 dl:last-child {
        margin-bottom: 0;
    }

    #musium .b dt,
    #theater .b dt{
      margin-bottom: 1.5em;
      background: rgba(255,255,255,0.64);
    }

    #musium .b dt a,
    #theater .b dt a{
        padding-top: 100%;
    }

    #musium .c {
        margin-bottom: 6em;
    }

    #musium .c .left {
        margin: 0 0 6em 0;
    }

    #musium .d,
    #theater .d {
        margin-bottom: 6em;
    }

    #musium .d li,
    #theater .d li {
      margin: 1em 0 0 0;
    }

    /* special */
    .special h1 {
        font-size: 100%;
    }
}