@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:700&display=swap');
/*@import url('https://fonts.googleapis.com/css?family=Nunito&text=0123456789');
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Anton&text=0123456789);*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {  margin:0; padding:0;  border:0;  outline:0;   vertical-align:baseline;  background:transparent;font-family: 'Noto Sans JP', sans-serif;}
ol, ul, li, dl {list-style: none;text-align: left;}
img{max-width: 100%;vertical-align: bottom;}
a{text-decoration: none;}


body{font-weight:300; font-size:16px;line-height:1.8em;position: relative;left: 0;overflow-x: hidden; color: #333; width: 100%; margin: 0; padding: 0; overflow-y: scroll;}
 
header{background:url(../img/header_img2.png)no-repeat; text-align: center;height:/*calc(100vh - 20px)*/600px; padding:10px 0;position: relative; background-size: cover;background-position: center center;}
header h1{width: 90%; max-width: 650px;margin: 0 auto}
header a.entry{background: #fbef41;border-radius: 50px;display: flex;justify-content:center; align-items: center;max-width: 250px;max-height: 90px}
header a.entry img{width: 80%;margin: 10px auto}
article{margin: 0 auto;width: 90%; max-width: 1000px;position:relative;}
.wrapper{margin: 0 auto;width: 100%; max-width: 1000px;position:relative;}

header .ht{height:calc( calc(100vh - 20px) / 2)}

header .c_d{bottom: 0; position: absolute; margin: 0 auto; left: 0; right: 0;}
header .c_d .booking{position: absolute;width:100px;height:100px;display: block;top:-20px;left:-30px}
header .c_d h1{position: absolute; bottom:20px;font-size:180px;margin: 0 auto;left: 0;right: 0;font-family: 'Noto Sans', sans-serif;}
header .c_d{background: url( "../img/header_day_bg.png") no-repeat;max-height:400px; max-width:400px;height:300px;width:300px;margin: 0 auto;background-size: contain;}
header .c_d.open{background: url( "../img/header_day_open.png") no-repeat;background-size: contain;}
header .c_d.open h1{font-size: 110px;line-height: 1em;bottom: 50px;}
header .c_d.off h1{font-size: 80px; bottom:50px}
header .c_d.on h1{font-size: 80px; bottom:80px}
header .c_d.on{background: url( "../img/header_day_bgo.png") no-repeat;background-size: contain;}
header .c_d.off{background: url( "../img/header_day_open.png") no-repeat;background-size: contain;}
/*header .c_d.on h1,
header .c_d.off h1{font-size: 120px}*/
.c_d::after{position: absolute;content: "";bottom: 10px;left: 50%;width: 30px;height: 30px;margin-left: -12px;border-left: 1px solid #333;border-bottom: 1px solid #333;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;box-sizing: border-box;}

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(20px, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(0px, 0px);
    opacity: 1;
  }
}


figure img{width: 60%;max-width: 500px;}
h1{font-size:30px;line-height: 1.2em;color:#FC6BBE;}
h1 span{font-size:22px;display: block;}

h1 img{width:90%;max-width: 432px}
h1.main_title img{width:100%;max-width: 1000px}
h2{font-weight:300;font-size: 22px; border-left:5px #FC6BBE solid; padding-left: 5px;line-height: 1.8em; margin-bottom: 15px;}
.wrapper h2{border-left:none; }

h4.ticket{font-size: 18px; margin: 30px auto 10px;}

article.info_2019 {border: 5px solid #FC6BBE; border-radius: 20px; max-width: 900px; padding:5% 2%;width:92%;}
a.btn_ticket{background: #FC6BBE;color: #fff;width: 80%;display: flex;justify-content: center;align-items: center;height: 60px;margin: 20px auto;font-size: 20px;font-weight: bold;border-radius: 10px;}
a.btn_ticket:hover{opacity: .8;cursor:pointer}
figure{text-align: center;}
section{margin: 20px auto 30px;max-width: 830px;}
.wrapper section{;max-width:100%;}
/*navi*/
nav{display: none}
nav ul{display: flex;position: absolute;right:0; margin: 0 auto; top:-60px; max-width: 100%;justify-content: center;}
nav li{background:url(../img/arrow.png)no-repeat center 98% #FC6BBE ;border-radius:76px;margin:0 2px; background-size: 30%}
nav li:hover{background-color:#f8a8d6}
nav li a{width: 76px;height: 76px;border-radius:66px;color: #fff;display: flex;  flex-wrap: wrap;  justify-content: center;  align-items: center;}
nav li p{font-size: 12px;line-height: 1.2em;text-align: center;}
nav li span{font-size:10px;display: block;margin-bottom: 5px;line-height: 1.2em;}

dl.map {max-width: 700px;}
.map dt{font-weight: bold;width: 100px;vertical-align: top ;}
.map dd{ margin-bottom: 10px}

/*小さくなったヘッダー*/
header.smaller,
header.ov{height: 50px;z-index: 999;width: 100%;margin-bottom: 0;top:0; position: fixed;}
header.ov .wrapper,
header.smaller .wrapper{background:none;height:50px;}

header.smaller + article{margin-top: 350px}
header.ov nav ul,
header.smaller nav ul{bottom:auto;top:10px}
header.ov  nav li,
header.smaller nav li{background:url(../img/arrow.png)no-repeat center 98% #cc0033 ;border-radius:70px;margin:0 2px; background-size: 30%}
header.ov  nav li a,
header.smaller nav li a{width:70px;height: 70px;border-radius:70px;}
header.ov nav li span,
header.smaller nav li span{font-size: 12px;margin-bottom: 0;}
header.ov nav li:not(:first-of-type) span,
header.smaller nav li:not(:first-of-type) span{display: none}


/*entry*/
.entry dt{vertical-align: top;margin-bottom: 30px;}
.entry dt h5{font-size: 24px; line-height: 1.4em;font-weight: normal;}
.entry dt br{display: none}
.entry dd{margin-bottom: 50px;}
.entry dd h3::before{content: "";position: absolute;background: #FFF03E;height:50px;width:50px; border-radius: 100%;left: 0;z-index: -1;top:-25px;}
.entry dd h3{position: relative;padding-left: 25px;font-size: 22px;margin-top: 40px; }
.entry div{border:2px solid #ccc; border-radius: 10px; margin: 10px auto; padding:20px 10px;}
.entry div p{ margin-bottom: 5px}
.entry div li{font-size:22px;margin-bottom: 5px}
.entry div li span{font-size: 14px;}

/*contents*/
article {text-align: center;position:relative}
article p{ margin-bottom: 20px;text-align: left}
article h1,
article h2,
article h3,
article h4,
article h5{text-align: left}
#knowledge h1{margin-top: 40px}
#knowledge .text{overflow: hidden;position:relative; text-align: center}
#knowledge .literature .img{background: #f5f5f5;}
#knowledge .literature .img p{font-size: 12px; margin: 10px 0}
#knowledge .literature .img img{margin-top: 30px;}
#manner img,
#knowledge img{margin: 0 auto}
#knowledge .ChangeElem_Panel li img{margin-bottom:20px;}
#manner ul{width: 90%;max-width: 800px;margin:0 auto 50px ;}

/*.more{text-align: right; overflow: hidden}
.m_btn{background:url(../img/btn_bg.png);width: 150px;border-radius: 8px;text-align: center;margin: 0 0 40px auto;line-height: 3em;font-weight: 600;font-size: 14px;height: 36px;}
.more{text-align: left;overflow: hidden}*/
.btn{background: url(../img/btn_bg.png);border-radius: 8px;text-align: center;margin:0 auto;line-height: 3em;font-weight: 600;font-size: 14px;height: 36px;display: block;color: #000;width: 300px;}

/*作家紹介*/
.ChangeElem_Btn_Content{display: flex;justify-content: space-between; }
button{width:19%;max-width:190px;height:45px;background-color: transparent; border: none;cursor: pointer;outline: none; padding: 0; appearance: none;font-size:12px; background:url(../img/btn_bg.png);border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:10px solid #d2d2d2;margin-bottom: 10px;}
button:last-of-type{margin-right:0 }
button.is-active{margin-bottom: 0;border-bottom:20px solid #FC6BBE; background:#FAE5F1; color: #FC6BBE;height:55px}


.artist {margin-bottom: 50px;}
.ChangeElem_Panel{ display: none;background:#f5f5f5;overflow: hidden;overflow-x: auto;-webkit-overflow-scrolling: touch;}
.ChangeElem_Panel h4{font-size: 22px;margin: 20px auto 10px;line-height: 1.2em;}
.ChangeElem_Panel h5{font-weight: 300;font-size: 14px}

.ChangeElem_Panel li{display: inline-block;margin: 10px auto;padding:10px;width: 250px;white-space: normal; vertical-align: top;font-size:12px;}
.ChangeElem_Panel li img{ margin: 0 auto;display: block;}
.ChangeElem_Panel p{font-size: 16px; line-height: 1.6em;margin-top:10px;height:80px}
.ChangeElem_Panel ul{font-size:14px;line-height: 1.2em;overflow: auto;  white-space: nowrap;padding:0 10px 10px 10px; }

/*.ChangeElem_Panel ul{display: flex;  flex-wrap:nowrap;  justify-content: center;  align-items:flex-start;}*/

.literature h3:first-of-type{background: url(../img/miyao_bg.gif) no-repeat }
.literature h3:nth-of-type(2){background: url(../img/souseki_bg.gif) no-repeat }
.literature h3{height: 46px;width: 100%;text-align: center;border-bottom: 1px solid #aaa;font-weight: 300;font-size:16px;line-height: 2.8em;margin-bottom: 1px;}

.literature h3.on:before{content: " ";
background: url(../img/down.png) no-repeat 0 3px;
background-size: contain;
display: inline-block;
width: 14px;
height: 14px;
margin-right: 5px;transform: scale(1, -1);}
.literature h3:before{content: " ";
background: url(../img/down.png) no-repeat 0 5px;
background-size: contain;
display: inline-block;
width: 14px;
height: 14px;
margin-right: 5px;}

.literature .txt{ display: none;width: 90%;margin: 0 auto;}
.literature .txt h4{ margin: 30px auto 10px;font-size: 20px;}
img.appreciation,
#manner img{border-radius: 10px;}
#manner h2{margin-top:40px}
#manner .manner dl{width: 100%;height:auto; margin-bottom: 30px}
#manner .manner dt{font-weight: 600; margin-bottom: 10px;}
#manner .manner dd img{float: left;margin-right: 20px;width:auto;border-radius: 0}

#history dt{ border-bottom: 1px solid #a48f51;justify-content: space-between;background: url("../img/history_border.png") repeat-y;}
#history dt h4{font-weight: 300; font-size: 18px;padding-left: 10px;}
#history dt h4 br{display: none;}
#history dd {/*background:none;*/}
#history dd img{display: block; margin: 20px auto;}
#history .btn{margin-bottom: 50px}
/*overview*/
.ov section{margin-top: 130px;}
h1.overview {margin:0 0 50px 0}
h1.overview span{display: inline-block; border-radius: 4px;width: 120px;text-align: center;border:#a67e42 2px solid; font-size: 14px;line-height: 2em; font-weight: 500; color: #a67e42;}
.ov h2{font-weight: 400; font-size: 24px}

div.overview ul{margin:30px 0 50px}
div.overview li{ font-weight: 300;font-size: 20px;margin-bottom: 10px;}
div.overview li span,
div.overview li.access{font-size:14px; font-weight:200;display: block}
div.overview li.access{line-height: 1.4em}
.overview .btn{margin-top: 20px; width: 100%}
.ov .event h3,
.ov .ticket h3{font-size:24px;color: #de0000;font-weight:100;margin: 30px 0 10px;}
.ov .ticket h3 span{ background:#de0000;color: #fff;font-size:16px; border-radius: 30px;padding: 5px 5px 3px; display: inline-block}

.ov .ticket span.red{color:#de0000 }
.ov h3.n_day{background: #a67e42;font-size: 18px;width: 100%;text-align: center;color: #fff;font-weight: 100;margin: 40px auto 60px; padding:10px 0}
/*.event .alltime dl,
.ov .alltime:last-of-type{border-bottom: 2px solid #ccc;padding-bottom: 20px}
.ov .alltime{border-top: 2px solid #ccc;margin-top: 20px}*/
.ov .alltime:last-child{ border-bottom: 2px solid #ccc;padding-bottom: 20px}
.ov .alltime img{width: 100%;height:auto;border-radius: 10px; margin-top: 20px}
.ov .ticket h5{font-size:24px;font-weight:100;width: 250px}
.ov .ticket h5 span{font-size:14px;display: block;}
.ov .alltime p{text-align: right;}
.event .alltime p{text-align: left}

.ov .event{margin-bottom: 50px}
iframe{width:100%;}
iframe + section{margin-top:0px}
footer{background: url(../img/header_bg.png); border-top:15px #e8e6e6 solid; text-align: center; padding: 50px;margin-top: 80px}


#movie div{width: 100%;margin: 0 auto 30px;max-width: 550px;}
#movie div h3{margin-bottom: 10px;}
/*
@media screen and (min-width:480px) and ( max-width:600px) {
nav ul{left: auto;}
header .wrapper{height:150px;}
#manner ul{margin:0 0 50px 0 ;}

}

@media screen and (min-width:600px) and ( max-width:960px) {
header .wrapper{height:160px;}
/*smaller*/
/*
header.ov .wrapper,
header.smaller .wrapper{background: url(../img/header_title_s.png) no-repeat top left;background-size: 30%;}
header.smaller p.intro{display: none}
header.smaller + article{margin-top: 300px}
header.ov nav ul,
header.smaller nav ul{bottom:auto;top:0;left: auto;}
header.ov nav li,
header.smaller nav li{background:url(../img/arrow.png)no-repeat center 98% #cc0033 ;border-radius:80px;margin:0 2px; background-size: 30%}
header.ov nav li a,
header.smaller nav li a{width: 80px;height: 80px;border-radius:80px;}
header.ov nav li p,
header.smaller nav li p{font-size:14px;}

h1{font-size:40px;margin: 30px auto 20px;line-height: 1.2em;color: #de0000;}
h1 span{font-size:22px;display: inline-block;}
h2{font-weight:300;font-size: 28px; border-left:5px #de0000 solid; padding-left: 5px;line-height: 1.8em; margin-bottom: 15px;}
header{margin-bottom: 200px}*/

/*nav ul{bottom:-80px;left: auto;}
nav li{ background-size:auto;margin:0 5px;}
nav li a{width:100px;height:100px;}
nav li p{font-size: 18px;}
nav li span{font-size:12px;}

button{font-size:20px;}

#knowledge img,
#knowledge .img{float: right;margin-left: 20px}
#knowledge .literature .img p{ line-height: 1.2em;margin-top: 0}
#knowledge .img img{float:none;margin-left:0;margin: 20px;margin-bottom: 0; width: 150px}

#history dt{ margin-bottom: 30px; display: flex;}
#history dd {background:url( ../img/history_bg.jpg) right top no-repeat ;background-size: 26%}
#history dd p{width:70%;}
#history dd img{display: none}
#history .btn{margin-bottom: 50px}


.literature h3.on:before{content: " ";
background: url(../img/down.png) no-repeat 0 3px;
background-size: contain;
display: inline-block;
width: 22px;
height: 22px;
margin-right: 12px;transform: scale(1, -1);}
.literature h3:before{content: " ";
background: url(../img/down.png) no-repeat 0 10px;
background-size: contain;
display: inline-block;
width: 22px;
height: 22px;
margin-right: 12px;}*/
/*
.literature h3{font-size: 24px;line-height: 2.3em;}
#manner .appreciation{float: right; margin: 0 20px 20px}
#manner ul{margin:0 0 50px 0 ;}
#manner .manner{display: flex;flex-wrap: wrap;justify-content: space-between;}
#manner .manner img{max-width: 50%;height: 100%;margin: 0;}
#manner .manner dl{width: 48%;height:auto; margin-bottom: 30px}
#manner .manner dt{font-weight: 600; margin-bottom: 20px;}
#manner .manner dd img{float: left;margin-right: 20px;width:auto;}


h1.overview {margin-bottom: 30px}
h1.overview br{ display: none}
h1.overview span{display:inline-block;font-size:  14px;width:120px;}
.overview li br{display: none}
div.overview li span{display: inline-block}
.overview .btn{width: 200px; display: inline-block}
.ov .alltime{display:flex;justify-content: space-between;}
.ov .alltime img{width: 45%;height:100%;border-radius: 10px;}
.ov .alltime dl{width:45%;}
.ov .alltime dd{display: flex;}
.ov .ticket h3 span{display: inline-block;}
.event .alltime dd{display:inherit;line-height: 1.6em}
.event .alltime p{text-align: left}
.ov h3.n_day{background: #a67e42;font-size: 24px;width: 100%;text-align: center;color: #fff;padding: 10px;font-weight: 100;margin: 50px 0 60px;}
.ov h3.n_day br{display: none}
li.access br{display: block}
.event .alltime dl,.event .alltime img{border-bottom:none;padding-bottom:0}
.event .alltime:last-child{border-bottom: 2px solid #ccc;padding-bottom: 20px}

}*/

@media screen and (min-width:960px) {
nav{display:block}
section {margin: 50px auto;}
header{height:800px}
article.info_2019{border:10px solid #FC6BBE;padding:50px; border-radius: 50px;}

.map dt,
.map dd{display: inline-block;margin-bottom: 10px}
.map dd{width:calc(100% - 100px) ;max-width: auto; }

/*header{margin-bottom: 100px;}
header .wrapper{height:300px;}
header,
nav li{   transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;}
	
nav li{ background-size:auto;margin:0 5px}
*/
nav ul {
display:-ms-flexbox;
-ms-flex-pack: center;
	display: flex;
    position: absolute;
    right: 0;
    margin: 0 auto;
    top: -120px;
    max-width: 100%;
    justify-content: center;

}
nav li a{width:130px;height:130px;border-radius:130px;}
nav li p{font-size: 22px;}
nav li span{font-size:14px;}
/*nav ul{bottom:-40px;left: auto;}


h1{font-size:40px;margin: 30px auto 20px;line-height: 1.2em;color: #de0000;}
h1 span{font-size:22px;display:inline-block;}
h2{font-weight:300;font-size: 28px; border-left:5px #de0000 solid; padding-left: 5px;line-height: 1.8em; margin-bottom: 15px;}
article p.intro{position: absolute; width: 350px; margin: 0 0 0 10px; top: -210px; display: block;}

/*smaller*/
/*
header.ov,
header.smaller{height: 70px;}
header.ov .wrapper, 
header.smaller .wrapper{background: url(../img/header_title_s.png) no-repeat top left;height:70px;background-size: 30%;}
header.smaller + article{margin-top: 400px}
header.ov nav ul,
header.smaller nav ul{bottom:auto;top:20px;left: auto;}
header.ov nav li, 
header.smaller nav li{background:url(../img/arrow.png)no-repeat center 98% #cc0033 ;border-radius:80px;margin:0 2px; background-size: 30%}
header.ov nav li a, 
header.smaller nav li a{width: 80px;height: 80px;border-radius:80px;}
header.ov nav li p, 
header.smaller nav li p{font-size:14px;}

*/

button{font-size:22px;}
.literature h3{font-size: 20px;}
/*
section{margin-top: 100px}
#knowledge img,
#knowledge .img{float: right;margin-left: 20px}
#knowledge .literature .img p{ line-height: 1.2em;margin-top: 0}
#knowledge .img img{float:none;margin-left:0;margin: 20px;margin-bottom: 0; width: 150px}


.literature h3.on:before{content: " ";
background: url(../img/down.png) no-repeat 0 3px;
background-size: contain;
display: inline-block;
width: 34px;
height: 34px;
margin-right: 18px;transform: scale(1, -1);}
.literature h3:before{content: " ";
background: url(../img/down.png) no-repeat 0 16px;
background-size: contain;
display: inline-block;
width: 34px;
height: 34px;
margin-right: 18px;}

.literature h3{height: 64px;width: 100%;text-align: center;border-bottom: 1px solid #aaa;font-weight: 300;font-size: 30px;line-height: 2.4em;margin-bottom: 1px;}
.literature .txt{display: none; width: 90%;margin: 0 auto;}
*/

.ChangeElem_Panel p{font-size: 16px; line-height: 1.6em;height:70px;margin-top:10px}
.ChangeElem_Panel ul{display: flex;  flex-wrap:nowrap;  justify-content: center;  align-items:flex-start;}
.ChangeElem_Panel ul li{width:300px;margin: 10px}

#manner .appreciation{float: right; margin: 0 20px 20px}
#manner ul{margin:0 0 50px 0 ;}
#manner .manner{display: flex;flex-wrap: wrap;justify-content: space-between;}
#manner .manner img{max-width:430px; margin: 0}
#manner .manner dl{width: 430px;height:220px;}
#manner .manner dt{font-weight: 600; margin-bottom: 20px;}
#manner .manner dd img{float: left;margin-right: 20px;}

#history dl{display: flex}
#history dt{width: 260px;position: relative; border-left: 1px solid #a48f51;border-bottom:none; background: none}
#history dt h4{font-weight: 300; font-size: 18px;background: url("../img/history_border.png") repeat-y;padding-left: 10px;position: absolute}
#history dt h4:last-of-type{bottom:150px}
#history dt h4 br{display: block;}
.btn{margin: 40px 280px 0 auto;}
.btn:hover{opacity: .7}

#history .btn{margin-bottom: 0}
#history dd {background:url( ../img/history_bg.jpg) right top no-repeat ;width: 800px; background-size: 30%}
#history dd p{width:65%;max-width: 500px;}
#history dd img{display: none}
/*
a.up{float: right; }

h1.overview br{ display: none}
h1.overview span{display:inline-block;font-size:  14px;width:120px;}
.overview li br{display: none}
div.overview li span{display: inline-block}
.ov .ticket h3 span{display: inline-block;}
.ov .alltime{display:flex;justify-content: space-between;}
.overview .btn{width: 200px; display: inline-block; margin: 0}
.ov .alltime dl{width: 480px;}
.event .alltime dl{border-bottom:none;padding-bottom:0}
.event .alltime:last-child{border-bottom: 2px solid #ccc;padding-bottom: 20px}
.ov .alltime img{width:470px;height:100%;border-radius: 10px;}
.ov .alltime dd{display: flex;}
.event .alltime dd{display:inherit;line-height: 1.6em}
.event .alltime p{text-align: left}
.ov h3.n_day{background: #a67e42;font-size: 24px;width: 100%;text-align: center;color: #fff;padding: 10px;font-weight: 100;margin: 50px 0 60px;}
.ov h3.n_day br{display: none}
li.access br{display: block}
}
*/

.entry dt,
.entry dd{ display: inline-block}

.entry dt{width:200px;}
.entry dt br{display: block}
.entry dd{width:calc(99% - 200px) ; }

header .c_d .booking{position: absolute;width:200px;height:200px;display: block;top:20px;left:-120px}
header .c_d h1{position: absolute; bottom:20px;font-size:250px;margin: 0 auto;left: 0;right: 0;}
header .c_d.on h1{font-size: 120px;}
header .c_d.off h1{font-size: 110px;bottom:70px;}
header .c_d.on h1{ bottom:100px;}
header .c_d{max-height:400px; max-width:400px;height:400px;width:400px;margin: 0 auto;background-size: contain;}
header .c_d.open h1{font-size: 130px;line-height: 1em;bottom: 70px;}
#movie{width: 100%;max-width: 900px;}
#movie div{width: 48%;display: inline-block;}
#movie div:nth-child(even){margin-left: 2%;}

}