body{
margin: 0;
padding: 0;
/*font-family: 'Noto Serif JP', serif,  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Meiryo, sans-serif;*/
}

html {
overflow: auto;
}

:root {
	--main-color: #db2645;
	--sub-color: #ffcc3b;
	--base-color: #31b7e8;
	--accent-color1:  #000;
	--accent-color2: #fff;
	--accent-color3: #ed7333;
	--accent-color4: #39ae78;
}

ul{
margin:0;
padding:0;
list-style:none;
}



p{
margin:0;
padding:.5rem;
line-height:1.4em;
font-size:1.05rem;
}

img{
max-width:auto;
width:100%;
display:inline-block;
}




/* レイアウト */

main.mainsite{
margin : 0;
padding : 0;
}

.container{
margin: 0 auto;
padding: 1rem 1.5rem;
box-sizing: border-box;
width: 100%;
}

.inner{
margin: 0 auto;
padding: 0;
max-width: 1080px;
box-sizing: border-box;
}

.inner h2{
margin: 1rem auto;
padding: 0 .5rem;
text-align: center;
max-width: 360px;
}


.sm{
font-size : .85em;
font-weight:normal;
}

p.info{
color:#ff0000;
font-size:1.05em;
padding-bottom:.5em;
}



/* パンクズ*/
#topicpath{
margin : 0;
padding : 0;
text-align: center;
background-color :var(--sub-color);
}
#topicpath p{
margin : 0 auto;
padding : 5px 1rem;
max-width :1200px;
font-size : .8rem;
line-height : 1.2rem;
text-align: left;
color:#ff5b00;
}
#topicpath a{
color:#ff5b00;
}




/* menu */

.ghiblifixed {
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
display:inline-block;
}

#ghibli-nav {
width: 100%;
background-color:var(--main-color);
}

#ghibli-nav ul{
margin: 0 auto;
padding: 0;
display: flex;
}

#ghibli-nav li {
box-sizing: border-box;
width: 100%;
}

#ghibli-nav li a {
display: block;
padding: .8rem 0;
color:  var(--accent-color2);
text-decoration: none;
text-align: center;
}
#ghibli-nav li a:hover{
color: var(--sub-color);
}


#ghibli-nav li.sns{
text-align: center;
}

#ghibli-nav li.sns a{
margin:0;
padding: .7rem 0;
display:inline-block;
}

#ghibli-nav li.sns img{
margin:0 .5rem;
width: 21px;
}

@media (max-width: 768px) {
#ghibli-nav li a {padding: .6rem 0;}
#ghibli-nav ul{display: flex;flex-wrap :wrap;justify-content: flex-start;}
#ghibli-nav li{width:100%;max-width: calc(33.3333% - 8px);}
#ghibli-nav li a {font-size: .9rem;}
#ghibli-nav li.sns a{padding: .3rem 0;}
#ghibli-nav li.sns img{width: 20px;}
}



/*　70周年記念　*/
.mbc70{
margin:0;
padding: .5rem 1rem .3rem 1rem;
text-align: center;
background-color :#0e90d8;
}

.mbc70 img{max-width:280px;}

@media (max-width: 768px) {
.mbc70 img{max-width:200px;}
}


/*　header　*/

header{
margin:1rem auto;
padding: 0;
max-width:980px;
}

header .title{
padding: 0 1rem;
text-align: center;
}
header .title img{
max-width:860px;
}

header .header-inn{
padding: .5rem 0;
}

.nichiji{
text-align: center;
font-weight:bold;
}



@media (max-width: 768px) {
.nichiji img{width:80%;margin-top:10px;}
.nichiji-in{padding: 0 2rem;}
}

@media (min-width: 769px) {
.header-inn{
display:flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.mainimg{width:54%;}
.mainimg img{border-radius: 10px;}
.nichiji{
width:42%;
position: relative;
/*display: flex;
justify-content: center;
align-items: center;*/
}
.nichiji-in{
padding: 0 1.5rem;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}

}



.slider{
position:relative;
width:100%
height:auto;
text-align: center;
}

.slider:before{
content: "";
display: block;
padding-top: 70.833%;
}

.slider ul{
  margin:0;
  padding:0;
  list-style:none;
}

.slider ul li{
  width:100%;
  position:absolute;
  top:0%;
  left:0%;
animation-iteration-count:infinite;
animation-duration:14s;
}


.slider ul li:nth-child(1){
  animation-name:slider_2;
  animation-delay:-2s;
}
.slider ul li:nth-child(2){
  animation-name:slider_2;
  animation-delay:5s;
  opacity:0;
}


@keyframes slider_2{
  0%{
    opacity:0;
  }
  14.28%{
    opacity:1;
  }
  50%{
    opacity:1;
  }
  64.28%{
    opacity:0;
  }
  100%{
    opacity:0;
  } 
}






/*カウントダウン*/

.cdt_wrapper {
margin: 1rem 0;
padding: 0;
text-align: center;
line-height: 1.2;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: var(--accent-color1);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%);
font-weight:bold;
}


#CDT{
margin-top: 1.5em;
padding:.3rem;
font-size: 1rem;
border: 2px solid var(--main-color);
border-radius: 6px;
color:var(--main-color);
}
#CDT .day{font-size: 2.5em;}
#CDT small{font-size: 1em;}

@media screen and (min-width: 768px) {
#CDT{ font-size: 1.4rem;}
}


/*おしらせ*/

.kaijounow{
margin-top: 1.5em;
padding: 0;
}

.kaijounow p{
margin-top: 1em;
padding: 1rem;
border: 1px solid #ccc;
}

.zero p{background: var(--accent-color2);color:#000;}
.sm p{background: #96e1ff;color:#000;}
.mid p{background: var(--sub-color);color:#000;}
.max p{background: var(--main-color);color: #fff;}


.kaijounow h3{
color: var(--main-color);
text-align: center;
font-size: 1.4em;
}



/*概要*/
#gaiyou {
margin: 0 auto;
font-size: 1.2em;
}

.gaiyou dl {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-top: none;
}
.gaiyou dt {
background: var(--main-color);
width: 15%;
padding: 1rem;
box-sizing: border-box;
border-top: 1px solid #ccc;
color:  var(--accent-color2);
text-align: center;
}

.gaiyou dd {
padding: 1rem;
margin: 0;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
width: 85%;
background:  var(--accent-color2);
box-sizing: border-box;
color: var(--accent-color1);
}

.gaiyou dd span{
font-size: .9rem;
}



@media (max-width: 768px) {
.gaiyou {font-size: 1em;}
.gaiyou dt {width: 100%;padding:.5rem 1rem;}
.gaiyou dd {width: 100%;}
}

/* 入場料 */

#ticket{
background-color:var(--sub-color);
}

#ticket h3.maeuri{
margin: 0 auto .5rem auto;
padding:.2rem .6rem.4rem .6rem;
font-size: 1.45rem;
text-align: center;
color: var(--main-color);
border: 1px solid var(--main-color);;
border-radius:6px;
max-width: 320px;
font-weight:normal;
}

.ticket dl {
margin: 1rem 0 0 0;
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-top: none;
text-align: center;
background:  var(--accent-color2);
font-size: 1.3rem;
color: var(--accent-color1);
}

.ticket dt {
width: 30%;
padding: 1rem;
box-sizing: border-box;
border-top: 1px solid #ccc;
align-items: center;
}

.ticket dd {
padding: 1rem;
margin: 0;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
width: 35%;
box-sizing: border-box;
align-items: center;
}

.ticket dd.muryou {width: 100%;padding:.5rem 1rem;}


.ticket .playguide{
margin:1rem 0;
padding:1rem;
background:  var(--accent-color2);
border-radius:6px;
}

.ticket .playguide h4{
margin: 0;
color: var(--main-color);
font-size: 1.15rem;
}

.ticket .playguide p{
font-size: 1.15rem;
}

.ticket .playguide a{
color: var(--base-color);
}

@media (max-width: 768px) {
.ticket dt {width: 100%;padding:.5rem 1rem;}
.ticket dt.no {display:none;}
.ticket dd {width: 50%;}
.ticket dd.borderno {width: 50%;border-left: none;}
.ticket .special-ticket h3{font-size: 1.4rem;}
.ticket .special-ticket h4{font-size: 1.2rem;}
.ticket .playguide p{font-size: 1rem;}
.ticket .playguide h3{font-size: 1rem;}
#ticket h3.maeuri{font-size: 1.2rem;}
}

ul.ticket01{
width: 100%;
padding: .8rem 0;
}
.ticket01 li{
width: 100%;
margin: 6px 0;
padding: .8rem;
text-align: center;
border: 1px solid #ccc;
font-size: 1.4rem;
box-sizing: border-box;
color: var(--accent-color1);
background:  var(--accent-color2);
}

@media (min-width: 769px) {
.ticket01{display: flex;}
}

/* ジオラマ */

.diorama{
background:  var(--accent-color1);
text-align: center;
}
.diorama .inner h3{
width: 100%;
color:  var(--accent-color2);
}

/* みどころ */

#midokoro{
padding: 0;
}

.midokoro h3{
font-size:1.45em;
text-align: center;
}

.midokoro .wrap{
margin: 1rem 0;
padding: 0;
box-sizing: border-box;
}

.midokoro .wrap h4{
margin: 2rem 0 0 0;
padding: 0;
font-size:1.2em;
color: var(--accent-color3);
}


@media (min-width: 769px) {
.midokoro .detail-r{display:flex;flex-direction:row-reverse;}
.midokoro .detail-l{display:flex;}
.midokoro .detailimg{width: 45%;}
.midokoro .detailmsg{flex: 1;}
}




/* みどころ第2弾 */
.highlight h1{
font-size:1.45em;
text-align: center;
}

.highlight01{
margin:0;
padding:0 1rem;
}

.highlight01 box{
margin-bottom:1rem;
padding:0;
box-sizing: border-box;
border: 2px solid var(--main-color);
border-top-right-radius:10px;
display:inline-block;
}

.highlight01 h4{
margin: 0;
padding: .5rem 0;
font-size:1.2em;
color: var(--accent-color2);
background: var(--main-color);
border-top-right-radius:6px;
}
.highlight01 p{
padding: 1rem;
}

.highlight02{
margin:0;
padding:2rem  0;
box-sizing: border-box;
}

.highlight02 h3{
padding: .5rem;
color: var(--accent-color2);
background: var(--accent-color4);
text-align: center;
font-size:1.4em;
}

.highlight02 p{
margin:0 auto;
padding: .5rem 1.5rem;
box-sizing: border-box;
max-width:940px;
}


.highlight03 box{
margin-bottom:1.5rem;
padding: 0;
box-sizing: border-box;
display:inline-block;
}

.img50{width: 50%;}


.highlight03 box{
margin:0 1rem 1.5rem 1rem;
border-radius:12px;
border-style:solid;
border-width:2px 6px 6px 2px;
}

.highlight03 box h1{
margin:0;
padding: .6rem 1rem;
border-top-left-radius:6px;
border-top-right-radius:6px;
color:var(--accent-color2);
font-size:1.2rem;
}

.highlight03 box h3{
margin:0;
padding: .8rem 1rem;
}

.highlight03 box p{
padding: .4rem 1rem;
}

.midokoro01{border-color:var(--main-color);}
.midokoro01 h1{background:var(--main-color);}
.midokoro02{border-color:var(--base-color);}
.midokoro02 h1{background:var(--base-color);}
.midokoro03{border-color:var(--sub-color);}
.midokoro03 h1{background:var(--sub-color);}
.midokoro04{border-color:var(--accent-color4);}
.midokoro04 h1{background:var(--accent-color4);}



@media (min-width: 769px) {
.highlight01{
display:flex;
}
.highlight01 box{
margin:0 1.5%;
width:31.333%;
}

.highlight03{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.highlight03 box{
margin:0 1.5% 2rem 1.5%;
width: 47%;
border-radius:16px;
}
.highlight03 box h1{
font-size:1.4rem;
border-top-left-radius:9px;
border-top-right-radius:9px;
}

}


/* 立体展示物 */

.tenji{
background:  var(--accent-color3);
text-align: center;
}
.tenji .inner h3{
width: 100%;
color:  var(--accent-color2);
}



/* 音声ガイド */
.guide{
margin: 1rem 0;
padding:0 1rem .8em 1rem;
background:  var(--accent-color2);
display:inline-block;
border-radius:6px;
}
.guide h4{
margin:0;
padding:.8em 0 .4em 0;
font-size:1.2em;
color: var(--accent-color1);
}
.guide p{
padding:0;
color: var(--accent-color3);
}


/* 公式twitter */
#tw{
background-color:var(--base-color);
padding-bottom: 3rem;
}

#tw h2{
color: var(--accent-color2);}

.tw{
margin: 0 auto;
padding: 0;
}

.tw li{
padding-bottom: 2rem;
}

@media (min-width: 769px) {
.tw ul{
display:flex;
flex-wrap: wrap;
justify-content:space-between;
}
.tw li{
margin: 0 1%;
width: 48%;
}

}


/* グッズ */

#goods{
background-color:var(--sub-color);
}

#goods h3{
text-align: center;
margin: 0 auto 1rem auto;
padding: 0;
}
#goods h3 span{
font-weight:normal;
font-size:.9em;
}

#goods figure{
margin: 0 auto;
padding: 0;
}

#goods li{
margin-bottom:1rem;
border: 1px solid var(--accent-color2);
box-sizing: border-box;
}

#goods li h4{
margin: 0 auto;
padding: .5rem;
color:var(--main-color);
}

#goods li p{
font-size:.9em;
}

@media (min-width: 769px) {
#goods ul{
display:flex;
flex-wrap: wrap;
justify-content:space-between;
}
#goods li{
width: 32%;
}

}



/* イベント */
#event-etc{
}

#event-etc ul{
margin-bottom: 2rem;
box-sizing: border-box;
}
#event-etc li{
padding: .5rem;
box-sizing: border-box;
}

.event-etc h3{
padding: .3em 0;
border-radius:25px;
background: #c2a83f;
color: var(--accent-color2);
text-align: center;
}

.jouei{
margin:0 auto;
max-width:800px;
}

@media (min-width: 769px) {
#event-etc ul{
display:flex;
flex-wrap: wrap;
justify-content:space-between;
}
#event-etc li{
width: 50%;
}

}


/* イベント詳細ページ */
.title a img{
margin: 0 auto;
display: block;
}

.event-title{
margin: 0;
}
.event-title .inner h2 {
margin: 0 auto;
}

.event-title .inner{
margin: 0;
padding: 0;
}


.tw-pre{
margin-bottom: 2rem;
padding: 1rem;
border-radius:16px;
background: var(--accent-color2);
}

.tw-pre ul{
margin: 0 .5rem;
}
.tw-pre li{
font-weight:bold;
color:var(--base-color);
font-size:1.15em;
}

.tw-pre .shimekiri{
font-weight:bold;
color:var(--main-color);
font-size:1.15em;
}

.spmenu{
background-color:#fffcc7;
}

.spmenu h3,.photopanel h3{
text-align: center;
font-size:1rem;
}

.spmenu-in{
padding: 1rem;
background: var(--accent-color2);
border-radius:16px;
}
.spmenu ul{
display:flex;
flex-wrap: wrap;
box-sizing: border-box;
}

.spmenu li{
padding: 0 1% 2rem 1%;
box-sizing: border-box;
width:100%;}

.photopanel{
}

.photopanel h4{
margin: 0 0 1rem 0;
padding: .5rem;
text-align: center;
border: 1px solid var(--sub-color);
font-size:1.2rem;
}

.photopanel ul{
margin: .5rem;
font-weight:bold;
color:var(--main-color);
}

.secchi{
padding: 0 0 2rem 0;
display:flex;
flex-wrap: wrap;
}

.photo-c{
box-sizing: border-box;
width:100%;
}
.photo-l,.photo-r{
box-sizing: border-box;
padding: .5rem;
width:50%;
}



@media print, screen and (min-width:769px) {
.tw-pre{display:flex;}
.tw-pre section{width: 50%;padding: .5rem;}
.spmenu li{width: 33.333%;}
.spmenu ul.menu_b li{width: 50%;}
.spmenu h3,.photopanel h3{font-size:1.2em;margin:0 0 1rem 0}
.photo-c{width:50%;order: 2;}
.photo-l{width:25%;order: 1;}
.photo-r{width:25%;order: 3;}
.photopanel ul{font-size:1.25em;}
}


/* アクセス */

.access dl {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-top: none;
}
.access dt {
width: 25%;
padding: .5rem;
box-sizing: border-box;
border-top: 1px solid #ccc;
text-align: center;
}

.access dd {
padding: .5rem;
margin: 0;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
width: 75%;
background:  var(--accent-color2);
box-sizing: border-box;
line-height:1.3em;
color: var(--accent-color1);
}

@media print, screen and (min-width:769px) {
.access .map{margin-left:1rem;float:right;width:30%;}
.access dt {width: 15%;}
.access dd {width: 85%;}
}



/* twitter枠 */

.tw-box{
margin: 0 auto;
padding: 2rem 0;
max-width: 300px;
}

.tw-box h3{
margin: 0 auto 10px auto;
padding: .5rem 0;
border: solid 1px #aaa;
text-align: center;
border-radius:6px;
}

.tw-box ul{
margin: 0 auto;
display:flex;
width: 200px;
}

.tw-box li{
margin: 0 auto;
padding: 0;
text-align: center;
}

.tw-box img{
margin:.5rem 1rem;
width: 60px;
}

.tw-box a{display:inline-block;}



/* いいねボタン枠 */

.like-box{
margin: 0 auto 1rem auto;
padding: 0;
max-width: 200px;
}

.like-box ul{
margin: 0 auto;
padding:0;
display: flex;
}

.like-box li{
margin: 0 auto;
padding:0;
width:100%;
text-align: center;
}



/* 協賛 */

#sponsor h4{
margin: 1rem 0 0 0;
padding:.2rem 0;
text-align: center;
font-size: 1.4rem;
font-weight:normal;
}

#sponsor ul{
margin: 0 auto;
padding: 1.5rem 0;
box-sizing: border-box;
display: flex;
flex-wrap :wrap;
justify-content: flex-start;
}

#sponsor ul li{
max-width: calc(16.666% - 4px);
margin: 2px;
}

#sponsor ul li a{
display:block;}

#sponsor ul img{width:100%;}


@media (max-width: 768px) {
#sponsor ul li{
max-width: calc(33.333% - 4px);
margin: 2px;
}

#sponsor h4{
font-size: 1.15rem;
}

}



/* 動画 */
.movie{
margin: 0 auto 1.5rem auto;
max-width:960px;
}


.yt
{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.yt iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}




/*問い合わせ*/
.toiawase .inner{
margin: 0 auto;
text-align: left;
}
.toiawase p{
padding:.3rem 0;
font-size: .85rem;
}

@media print, screen and (min-width:769px) {
.toiawase p{padding-left:6em;text-indent:-6em;}
.toiawase p .sp{display:none;}
.toiawase .inner{max-width: 920px;}
}


/* シェア */
.share {
	text-align: center;
}
.share-title {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: max(1.125rem, min(.989rem + .68vw, 1.5rem)); /* 18px〜24px */
	text-align: center;
}
.share-title::before,
.share-title::after {
	content: "";
	width: 3px;
	height: 2em;
	background-color: var(--sub-color);
}
.share-title::before {
	margin-right: 1.5em;
	transform: rotate(-35deg);
}
.share-title::after {
	margin-left: 1.5em;
	transform: rotate(35deg);
}
.icon-sns {
	display: inline-block;
	margin: 0 .5em 0;
	width: 50px;
}



/* フェードイン用のCSS */

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -30px);
	transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(30px, 0);
	transition: all 1s ease-out;
 }


/*footer*/
.footer{
margin: 0;
padding: 1rem 0;
text-align: center;
justify-content: center;
background: #ffcc3b;
}
.copyright{
padding: .1rem;
font-size: .75rem;
color: var(--accent-color2);
}