@charset "utf-8";

/* CSS Document */

@media screen and (min-width:980px) {
    .pcNone {
        display: none!important;
    }
    html {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
    body {
        width: 100%;
        height: 100%;
        font-size: 1rem;
    }
    img {
        display: block;
        height: auto;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    /* header */
    .header a {
        text-decoration: none;
    }
    .header .subNav a:hover {
        text-decoration: underline;
    }
    .header {
        width: 100%;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }
    .header .inner {
        position: relative;
        max-width: 1520px;
        height: 120px;
        margin: 0 auto;
    }
    .header .h1 {
        width: 26.8633%;
        position: absolute;
        bottom: 1em;
        left: 4em;
    }
    .header .h1 .long {
      display: block;
    }
    .header .h1 .short {
      display: none;
    }
    .header p.menu {
        display: none;
    }
    .header .mainNav {
        width: 41.1em;
        position: absolute;
        bottom: 0px;
        right: 20em;
    }
    .header .mainNav li {
        float: left;
        margin-right: 1em;
    }
    .header .mainNav a {
        display: block;
        font-weight: bold;
        letter-spacing: 0.1em;
        padding: 1em 0 1em 2.5em;
        background: url("../img/arrow01.png") left 1rem center / auto 0.5em no-repeat;
        box-sizing: border-box;
    }
    .mn01 {
        width: 13.4em;
    }
    .mn01 span {
        background-image: url("../img/nav01.png");
    }
    .mn01.on span {
        background-image: url("../img/_nav01.png");
    }
    .mn02 {
        width: 15.6em;
    }
    .mn02 span {
        background-image: url("../img/nav02.png");
    }
    .mn02.on span {
        background-image: url("../img/_nav02.png");
    }
    .mn03 {
        width: 10.1em;
    }
    .header .language {
      position: absolute;
      top: 32px;
      right: 4rem;
      font-size: 85%;
    }
    .header .mainNav a:hover {
        opacity: 0.64;
    }
    .header .mainNav a span {
        display: block;
        height: 0.5em;
        margin-top: 0.5em;
        text-indent: -9999px;
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .header .mainNav .mn03 {
        margin-right: 0;
    }
    .header .mainNav .mn03 a {
        padding: 1.5em 1em 1.5em 2.5rem;
        font-weight: normal;
        letter-spacing: 0;
    }
    .header .subNav {
        position: absolute;
        top: 32px;
        right: 16.75rem;
        font-size: 85%;
    }
    .header .subNav li {
        display: inline-block;
        position: relative;
    }
    .header .subNav li:after {
        content: " | ";
    }
    .header .subNav li:last-child:after {
        content: "";
    }
    .header .search {
        position: absolute;
        bottom: 1rem;
        right: 4rem;
    }
    footer {
        margin-top: 4em;
    }
    .mnContents a:hover {
        text-decoration: underline;
    }
    .mnContents {
        width: 100%;
        height: calc(100% - 120px);
        box-sizing: border-box;
        color: #FFF;
        font-weight: bold;
        padding: 4em;
        box-sizing: border-box;
        position: fixed;
        top: 120px;
        left: 0;
        z-index: 999;
    }
    .mnContents .mask {
        max-width: 1280px;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        overflow-y: auto;
    }
    .mnContents .close {
        width: 2em;
        height: 2em;
        cursor: pointer;
        background: url(../img/close.png) center / cover no-repeat;
        position: absolute;
        top: 1em;
        right: 1em;
    }
    .mnContents .close:hover {
      opacity: 0.64;
    }
    .mn01C .left {
        width: calc(100% - 4em - 280px);
    }
    .mn01C .left .makeBaloon {
        margin: 0 0 4em;
    }
    .mn01C .left .makeBaloon:last-child {
        margin-bottom: 0;
    }
    .mn01C .left .mask2 {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 1em 0 0 0;
    }
    .mn01C .left li {
        width: calc((100% - 4em) / 5);
        float: left;
        padding-bottom: 1em;
        margin-right: 1em;
    }
    .mn01C .left li:last-child {
        margin-right: 0;
    }
    .mn01C .left li.on {
        background: url("../img/arrow02.png") center bottom / auto 1em no-repeat;
    }
    .mn01C .left li a {
        display: block;
        width: 100%;
        text-indent: -9999px;
        padding-top: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .mn01C .left li.on a {
        background-color: rgba(255, 255, 255, 0.12);
    }
    .mn01C .balloon {
        display: block;
        color: rgb(51, 51, 51);
        line-height: 3;
        text-align: center;
        background: #FFF;
        position: relative;
    }
    .mn01C .right {
        width: 280px;
    }
    .mn01C .right ul {
        margin-left: .5em;
    }
    .mn01C .right p {
        margin-bottom: 1.5em;
    }
    .mn01C .right li {
        padding: 0 0 1.5em;
        margin: 0 1em 0 0;
        border-left: 1px solid #FFF;
    }
    .mn01C .right li:last-child {
        margin-bottom: 0;
        border: none;
    }
    .mn01C .right li span {
        display: block;
        font-size: 80%;
        font-weight: normal;
        line-height: 1.5;
        margin: calc(-0.25em + 0.5rem) 0 -0.25em 0.75rem;
    }
    .mn01C .right a {
        padding-left: .75em;
        background: url("../img/arrow06.png") left -1px center / 6px no-repeat;
    }
    .mn01C .right li:last-child a {
        background: url("../img/arrow07.png") left top / 6px no-repeat;
    }
    #mn03C p {
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #fff;
    }
    #mn03C .body {
        width: calc((100% - 6em) / 4);
        float: left;
        margin-right: 2em !important;
    }
    #mn03C .body:last-child {
        margin-right: 0 !important;
    }
    #mn03C li {
        margin: 0 0 1em 1em;
    }
    #mn03C li ul {
        margin: 1em 0 0 0;
    }
    #mn03C a {
        padding-left: .75em;
        background: url("../img/arrow06.png") left center / 6px no-repeat;
    }
    .indexBody {
        margin-top: 120px;
        height: calc(100% - 120px);
    }
    /* footer */
    .footer {
        position: relative;
        max-width: 1520px;
        margin: 0 auto;
        padding: 10px 0 2em;
    }
    .footer ul {
        padding: 2em 0;
        text-align: center;
    }
    .footer ul li {
        display: inline-block;
    }
    .footer ul li:after {
        content: " | ";
    }
    .footer ul li:last-child:after {
        content: "";
    }
    .footer .left p {
        float: left;
        padding-left: 4rem;
    }
    .footer .left address {
        float: left;
        padding-left: 1rem;
    }
    .footer .right {
        padding-right: 4rem;
    }
    /* common */
    .back {
        display: none;
        position: fixed;
        bottom: 2em;
        right: 2em;
        z-index: 98;
    }
    .contents {}
    .content {}
    .banner {
        width: 776px;
        margin: 0 auto;
    }
    .banner li {
        width: 240px;
        float: left;
        margin: 2em 28px 0 0;
    }
    .banner li:nth-child(3n) {
        margin-right: 0;
    }
    .banner li:nth-child(-n+3) {
        margin-top: 0;
    }
    .banner li img {
        max-width: 100%;
        margin: 0 auto;
    }
    .subPage {
        margin-top: 120px;
    }
    .subPage .contents {
        padding: 4rem 0;
    }
    .subPage .contents>div {
        width: 952px;
        margin: 0 auto;
    }
    .subPage .ancestor span {
        width: 952px;
        font-size: 200%;
        margin: 0 auto;
        padding: 4rem 1rem;
    }
    .subPageBody .left {
        width: 196px;
    }
    .subPageBody .right {
        width: 700px;
    }
    .subPage .right .catch {
        font-size: 200%;
    }
    .subpageNav li {
        line-height: 1.5;
        margin: -0.25em 0 1.75em;
    }
    .subpageNav a {
        padding-left: 1.25em;
        background: url("../img/arrow08.png") left center / 6px no-repeat;
        text-decoration: none;
    }
    .subpageNav a:hover {
        text-decoration: underline;
    }
    .subpageNav li li {
        margin-bottom: 0;
        margin-top: 1em;
    }
    .subpageNav li li a {
        padding-left: 2.25em;
        background: url("../img/arrow09.png") left 1em center / 6px no-repeat;
    }
    /* post */
    .post h1 {}
    .post h2 {
        font-size: 150%;
        margin-top: 4rem;
    }
    .post h3 {
        font-size: 125%;
        margin-top: 3rem;
    }
    .post h4 {
        margin-top: 2rem;
    }
    .post h5 {
        margin-top: 1rem;
    }
    /* index */
    #index {
        height: 100%;
    }
    #index .contents {
        max-width: 1520px;
        margin: 0 auto;
    }
    #index .a {
        width: 100%;
        height: 100%;
        margin-bottom: calc(8em + 173px + 21px);
    }
    #index .a .image2 {
        width: 100%;
        height: 100%;
        background: url("/uploads/entry_meta/file_value/2971/lobby.jpg") center / cover no-repeat;
    }
    #index .a::after {
        width: 100%;
        height: 88px;
        position: absolute;
        bottom: -88px;
        left: 0;
        background: url("../img/sdw1.png") left top / 2px repeat-x;
    }
    #index .a .catch img {
        max-width: 988px;
        width: 65%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding-bottom: 173px;
        margin: auto;
    }
    #index .a .inner,
    #musium .a .inner,
    #theater .a .inner {
        width: 838px;
        height: 346px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -173px;
        z-index: 99;
    }
    #index .a .slide,
    #musium .a .slide,
    #theater .a .slide {
        width: 100%;
        height: 100%;
        background: #fff;
    }
    #index .a .slide .image,
    #musium .a .slide .image,
    #theater .a .slide .image {
        width: 100%;
        height: 100%;
    }
    #index .a .slide .image li,
    #musium .a .slide .image li,
    #theater .a .slide .image li {
        width: 100%;
        height: 100%;
    }
    #index .a .slide .image li a,
    #musium .a .slide .image li a,
    #theater .a .slide .image li a{
        width: 100%;
        height: 100%;
    }
    #index .a .slide .prev,
    #musium .a .slide .prev,
    #theater .a .slide .prev {
        display: block;
        width: 2em;
        height: 4em;
        cursor: pointer;
        margin: auto;
        background: url("../img/prev.png") center / contain no-repeat;
        position: absolute;
        top: 0;
        bottom: 0;
        left: -4em;
    }
    #index .a .slide .next,
    #musium .a .slide .next,
    #theater .a .slide .next {
        display: block;
        width: 2em;
        height: 4em;
        cursor: pointer;
        margin: auto;
        background: url("../img/next.png") center / contain no-repeat;
        position: absolute;
        top: 0;
        bottom: 0;
        right: -4em;
    }
    #index .a .slide .prev:hover, #index .a .slide .next:hover,
    #musium .a .slide .prev:hover, #musium .a .slide .next:hover,
    #theater .a .slide .prev:hover, #theater .a .slide .next:hover {
        opacity: 0.64;
    }
    #index .b {
        width: calc(100% - 8em);
        padding-top: 3rem;
        margin: 0 auto 8em;
        background: url("../img/bg02.jpg") top center / contain no-repeat;
    }
    #index .b h2 {

        width: 411px;
        height: 40px;
        text-indent: -9999px;
        background: url("../img/02.png") center / 100% auto no-repeat;
        margin: 0 auto 3rem;
    }
    #index .b .grpSlider {
        width: 980px;
        padding: 2em 0 0;
        margin: 0 auto calc(2em - 7px);
        background: #fff;
        position: relative;
    }
    #index .b .mask {
        width: 868px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
    #index .b .maskInner {
        margin: 0 auto;
        position: absolute;
        top: 0px;
        left: -1em;
    }
    #index .b .maskInner .grp {
        width: 896px;
        float: left;
    }
    #index .b dl {
        width: 224px;
        float: left;
        text-align: center;
    }
    #index .b dl a {
        margin: 0 1em;
    }
    #index .b dt {
        width: 100%;
        margin: 0 0 1.5em;
    }
    #index .b .grpSlider .thum ul {
        margin: 0 auto;
    }
    #index .b .grpSlider .thum {
        padding: 1em 0 0;
        margin: 2em 0 0 0;
        background: url("../img/sdw2.png") top center / 868px 10px no-repeat #FFF;
    }
    #index .b .grpSlider .thum li {
        display: block;
        width: 28px;
        height: 21px;
        float: left;
        cursor: pointer;
        position: relative;
    }
    #index .b .grpSlider .thum li span {
        display: block;
        width: 7px;
        height: 7px;
        text-indent: -9999px;
        margin: auto;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.24);
        position: absolute;
        top: 0px;
        bottom: 0;
        right: 0;
        left: 0;
    }
    #index .b .grpSlider .thum li.on span {
        background: #000;
    }
    #index .b .grpSlider .prev {
        display: block;
        width: 1em;
        height: calc(3em + 21px);
        cursor: pointer;
        margin: auto;
        background: url("../img/_prev.png") center top / contain no-repeat;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 1em;
    }
    #index .b .grpSlider .next {
        display: block;
        width: 1em;
        height: calc(3em + 21px);
        cursor: pointer;
        margin: auto;
        background: url("../img/_next.png") center top / contain no-repeat;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
    }
    #index .b .grpSlider .prev:hover, #index .b .grpSlider .next:hover {
        opacity: 0.64;
    }


	/* yata霑ｽ蜉20170320 */
    #index .c {
        width: calc(100% - 8em);
        padding-top: 3rem;
        margin: 0 auto 8em;
        background: url("../img/bg03.jpg") top center / contain no-repeat;
    }


    #index .c h2 {
        width: 490px;
        background: url("../img/03.png") center / 100% auto no-repeat;
    }
    #index .indexBody .body {
        width: 952px;
    }
    #index .body>div {
        margin: 0 auto 4em;
    }
    #index .indexBody h3 {
        margin-top: 4em;
        margin-bottom: 1.5em;
    }
    #index .indexBody h3:first-child {
        margin-top: 0;
    }
    #index .d .left {
        width: 616px;
    }
    #index .d .right {
        width: 280px;
    }
    #index .d .right .youtube {
        margin-top: 4em;
    }
    #index .d li {
        margin-bottom: 1em;
    }
    #index .d li:last-child {
        margin-bottom: 0;
    }
    #index .f .left, #index .f .right {
        width: 462px;
    }
    #index .g .body2 {
    }
    #index .g .left {}
    #index .g .left h2 {
        width: 7.5rem;
        height: 1em;
        text-align: center;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
    }
    #index .g .right {
        margin-left: 7.5rem;
        padding: 2em;
        box-sizing: border-box;
    }
    #index .g .right li {
        width: 50%;
        float: left;
        padding: 0 2em 0 1em;
        border-left: 1px solid #993300;
        box-sizing: border-box;
    }
    #index .g .right li:last-child {
        padding: 0 0 0 1em;
    }
    #index .g .right li a {
        font-size: 125%;
    }

    /* #musium */
    #musium .musiumBody,
    #theater .musiumBody {
        margin-top: 120px;
    }
    #musium .a,
    #theater .a {
        width: 100%;
        padding-top: 45%;
        margin-bottom: calc(8em + 173px + 21px);
        background: url("../img/musium.jpg") center / cover no-repeat;
    }
    #theater .a {
        background-image: url("../img/theater.jpg");
    }
    #musium .a::after,
    #theater .a::after {
        width: 100%;
        height: 88px;
        position: absolute;
        bottom: -88px;
        left: 0;
        background: url("../img/sdw1.png") left top / 2px repeat-x;
    }
    #musium .a .image2 img,
    #theater .a .image2 img{
      padding-bottom: 173px;
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    #musium .musiumBody .contents,
    #theater .theaterBody .contents{
        width: 952px;
        margin: 0 auto;
    }

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

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

    #musium .b .body2,
    #musium .b .body3, 
    #theater .b .body2 {
        margin-bottom: 4em;
    }

    #theater .b .body2 dl {
        margin-bottom: 2em;
    }

    #theater .b .body2 dl:last-child {
        margin-bottom: 0;
    }


    #musium .b .body2 dt,
    #theater .b .body2 dt{
        width: calc(50% - 1em);
        float: left;
        margin-right: 2em;
        background: url("../img/bg09.png") center top / cover no-repeat;
    }



    #musium .b .body4 dt{
        width: calc(20% - 1em);
        float: left;
        margin-right: 2em;
        background: url("../img/bg09.png") center top / cover no-repeat;
    }

    #musium .b .body2 dt a,
    #musium .b .body4 dt a,
    #theater .b .body2 dt a{
        padding-top: calc(100% - 3em);
        margin: 1.5em;
    }

    #musium .b .body2 dd,
	#musium .b .body4 dd,
    #theater .b .body2 dd{
        width: calc(50% - 1em);
        float: left;
        margin-top: 1.5em;
    }

    #musium .b .body3 dl,
    #theater .b .body3 dl{
        width: calc((100% - 4em) / 3);
        float: left;
        margin-right: 2em;
    }

    #musium .b .body3 dt,
    #theater .b .body3 dt{
        background: url("../img/bg09.png") center top / cover no-repeat;
    }

    #musium .b .body3 dt a,
    #theater .b .body3 dt a{
        padding-top: calc(100% - 2em);
        margin: 1em;
    }

    #musium .c .left {
        width: 448px;
        float: left;
    }

    #musium .c .right {
        width: 448px;
        float: right;
    }

    #musium .c table {
        margin: 0 0 4em 0;
    }

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

    #musium .d li,
    #theater .d li {
      width: calc((100% - 3em) / 4);
      float: left;
      margin: 1em 1em 0 0;
    }

    #musium .d li:nth-child(4n),
    #theater .d li:nth-child(4n) {
      margin-right: 0;
    }

    #musium .d li:nth-child(-n+4),
    #theater .d li:nth-child(-n+4) {
      margin-top: 0;
    }

    /* special */
    .special {
        background: url("../img/specialbg.jpg") top center / contain no-repeat;
        position: relative;
    }
    .special .ancestor {
        padding-top: 4rem;
    }
    .special .ancestor span {
        font-size: 150%;
    }
    .special .h1Image {
        display: block;
        width: 952px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}

@media screen and (max-width:1279px) {
    .header .h1 .long {
      display: none;
    }
    .header .h1 .short {
      display: block;
    }
}

@media screen and (max-width:1239px) {
    .header .language {
      right: 2rem;
    }
    .header .h1 {
      left: 2rem;
    }
    .header .search {
      display: block;
    }
    .header .mainNav {
      right: 2em;
    }
    .header .subNav {
      right: 12.75rem;
    }
    .header .search {
        display: none;
    }
}