@charset "utf-8";

/*  Parts
---------------------------------------------------*/
/*  h2 見出し
++++++++++++++++++++++*/
h2.midashi{
  font-size: 2rem ;
  font-weight: bold ;
  margin-bottom: 20px ;}
h2.midashi a{
  position: relative ;
  display: inline-block ;
  margin-left: 15px ;
  padding: 2px 20px 2px 10px;
  color: #333333 ;
  border: 1px solid #333333 ;
  background: #ffffff ;
  border-radius:5px ;
  font-size: 1.3rem ;
  font-weight: normal ;
  text-decoration: none ;
  vertical-align: text-top ;}
h2.midashi a:hover,
h2.midashi a:focus{
  background: #182b4d ;
  color: #ffffff ;}
h2.midashi a:before{
  display: block ;
  position: absolute ;
  content: '' ;
  top: 50% ;
  right:10px ;
  width: 4px;
  height: 4px;
  margin-top: -4px ;
  border-top: 2px solid #333333;
  border-right: 2px solid #333333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);}
h2.midashi a:hover:before,
h2.midashi a:focus:before{
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;}

/*  ステータス
++++++++++++++++++++++*/
/*  ベース  */
.status_view{
  position: relative ;}
.status_view .status:before{
  position:absolute;
  display: block;
  content: '';
  width: 16px;
  height: 3px;
  bottom: -3px;
  left: 0px;
  border: 5px solid transparent;
  border-left: 6px solid #887e7e;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  }
.status_view .status{
  position:absolute;
  padding: 0 2px 0 20px;
  box-sizing: border-box;
  background: #f9506c;
  border: 2px solid #f9506c ;
  color: #ffffff;
  top: 6px;
  left: -10px;}
.status_view .status span{
  display: inline-block ;
  padding: 0 5px ;
  background: #ffffff ;
  color: #f9506c ;
  margin: 0 0 1px 5px ;
  vertical-align: middle ;}
.status_view .status span.entry_end{
  background: #666666 ;
  color: #ffffff ;}

.planetarium .status_view .status{
  position: relative;
  display: inline-block;
  background: #f9506c;
  border: 2px solid #f9506c;
  top:auto ;
  margin: 0 0 15px 0;}

/*  Top Page
---------------------------------------------------*/
#top{}
#top main{
  background: #fdeacc ;}

/*  メインビジュアル
++++++++++++++++++++++*/
#top #mainVisual{
  position: relative ;
  margin-bottom: 20px ;}
#top #top_slider_wrap{
  position: relative ;
overflow:hidden;}
#top #mainVisual ul{
	margin: 0 ;
	padding: 0 ;
  overflow: hidden ;}
#top #mainVisual ul li{
	list-style: none ;}
#top #mainVisual ul li img{
  width: 100% ;
  max-width: 1000px ;
}

#top .slick-slide:not(.slick-center) {
  position: relative ;
  /*
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: 0.2s linear;
  opacity: 0.7
  */
}

#top #mainVisual:after{
  position: absolute;
  display: block;
  content: '';
  width: 1000px;
  height: 500px;
  top: 0;
  left: calc(50% + 500px);
  background: rgba(255,255,255,0.7);
  z-index: 100;
}

#top #mainVisual:before{
  position: absolute;
  display: block;
  content: '';
  width: 1000px;
  height: 500px;
  top: 0;
  left: calc(50% - 1500px);
  background: rgba(255,255,255,0.7);
  z-index: 100;
}

#top #ts_ctrl_box button {
	display: block;
	width: 50px;
	height: 52px;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
	border: none;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 41%;
	transform: translateY(-50%);
	z-index: 100;
	cursor: pointer;
}

#top #ts_ctrl_box button:active,
#top #ts_ctrl_box button:checked,
#top #ts_ctrl_box button:focus{
  border: none ;
  outline:0;
  text-decoration: non ;}

#top #ts_ctrl_prev {
	left: 0;
	top: 50%;
  border-radius:0 5px 5px 0 ;}

#top #ts_ctrl_next {
	right: 0;
  top: 50%;}

#top #ts_ctrl_pause, #ts_ctrl_play {
	right: 51px;
	border-radius:5px 0 0 5px ;}

#top #ts_ctrl_box button:before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	position: absolute;
	box-sizing: border-box;
}

#top #ts_ctrl_box button#ts_ctrl_prev:before,
#top #ts_ctrl_box button#ts_ctrl_next:before {
	top: 39%;
}

#top #ts_ctrl_box button#ts_ctrl_prev:before {

  background-image: url("../images/icon_prev.png") ;
  background-repeat: no-repeat ;
  background-size: contain ;
	left: -webkit-calc(50% - 6px);
	left: calc(50% - 6px);
}

#top #ts_ctrl_box button#ts_ctrl_next:before {
  background-image: url("../images/icon_next.png") ;
  background-repeat: no-repeat ;
  background-size: contain ;
	left: -webkit-calc(50% - 3px);
	left: calc(50% - 3px);
}

#top #ts_ctrl_box button#ts_ctrl_pause::before {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid #ffffff;
	border-top: none;
	border-bottom: none;
	width: 8px;
	height: 12px;
}

#top #ts_ctrl_box button#ts_ctrl_play::before {
	top: 50%;
	left: -webkit-calc(50% + 5px);
	left: calc(50% + 5px);
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border: none;
	border: 7px solid transparent;
	border-left-color: #fff;
}

#top .slick-dots li button:before {
  opacity: 1 ;
  color: #f1b665;
}
#top .slick-dots li.slick-active button:before{
  opacity: 1 ;
  color: #eb8800; 
}

@media screen and (max-width:1000px ){
  #top #mainVisual ul li img{
    width: 100% ;
    max-width: 100% ;
    height: inherit ;}
  #top #mainVisual:after{
    display: none ;}
  #top #mainVisual:before{
    display: none ;}
}


	
/*  緊急情報
++++++++++++++++++++++*/
#top #alert{
  margin-bottom: 20px ;}
#top #alert .inner{
  margin: 0 auto ;}
#top #alert .inner dl{
  width: 100% ;
  display: flex ;
  overflow: hidden ;
  border: 2px solid #ff0000 ;
  font-size: 1.8rem ;}
#top #alert .inner dl dt{
  width: 130px ;
  background: #ff0000 ;
  color: #ffffff ;
  padding: 10px 15px ;
  box-sizing: border-box ;}
#top #alert .inner dl dt svg{
  margin-right: 5px ;}
#top #alert .inner dl dd{
  width: calc(100% - 130px);
  background: #ffffff ;
  padding: 10px 15px ;
  box-sizing: border-box ;}
#top.fontLarge #alert .inner dl dt{
  width:150px ;}
#top.fontLarge #alert .inner dl dd{
  width: calc(100% - 150px);}

@media screen and (max-width:1000px ){
  #top #alert .inner dl{
    width: 95% ;
    margin: 0 auto ;
    font-size: 1.8rem ;}
}
  
@media screen and (max-width:680px ){
  #top #alert .inner dl dt{
    float: none ;
    display: block ;
    width: 100% ;}
  #top #alert .inner dl dd{
    float: none ;
    display: block ;
    width: 100% ;}  
}


/*  本日　＆　お知らせ
++++++++++++++++++++++*/
#top #secA{
  margin-bottom: 50px ;
}
#top #secA .inner{}
#top #secA .secA_today{
 /*display:none ;*/
	width: 320px ;
	float: left ;
  border: 3px solid #c7bda8 ;
  background: #ffffff ;
  padding: 20px ;
  box-sizing: border-box ;
}
#top #secA .secA_today h2{
  color: #187fc4 ;
  text-align: center ;
  margin-bottom: 5px ;}
#top #secA .secA_today .time{
  width: 90% ;
  margin: 0 auto 15px auto ;
  padding: 0 0 0 25px ;
  box-sizing: border-box ;
  background-image: url("../images/icon_time.png") ;
  background-position: 0 0 ;
  background-repeat: no-repeat ;}
#top #secA .secA_today .time svg{
  margin-right:5px ;}
#top #secA .secA_today .time span{
  font-size: 1.4rem ;}
#top #secA .secA_today .link{
  text-align: center ;
  margin: 0 auto 15px auto ;}
#top #secA .secA_today .link a{
  display: block ;
  width: 100% ;
  padding: 15px 0;
  margin: 0 auto 10px auto ;
  box-sizing: border-box ;
  text-align: center ;
  color: #ffffff ;
  background: #187fc4 ;
  text-decoration: none ;
  border-radius:5px ;}
#top #secA .secA_today .link a:hover,
#top #secA .secA_today .link a:focus{
  background: #182b4d;}
#top #secA .secA_today .calendar{
  width: 100% ;}
#top #secA .secA_today .calendar h3{
  text-align: center ;
  font-size: 1.8rem ;
  margin-bottom: 5px ;}
#top #secA .secA_today .calendar .select{
  width: 100% ;
  height: auto !important ;
  box-sizing: border-box ;
  margin-bottom: 5px ;
  overflow: hidden ;
  border-top: 1px solid #000000 ;
  border-bottom: 1px solid #000000 ;}
#top #secA .secA_today .calendar .select .prev,
#top #secA .secA_today .calendar .select .next{
  width: 75px ;
  float: left ;
  font-size: 1.2rem ;}
#top #secA .secA_today .calendar .select .next{
  float: right ;}
#top #secA .secA_today .calendar .select .prev a,
#top #secA .secA_today .calendar .select .next a{
  position: relative ;
  display: block ;
  text-align: center ;
  width: 100% ;
  padding: 9px 0 9px 0 ;
  text-decoration: none ;}
#top #secA .secA_today .calendar .select .prev a{
  padding-left: 10px ;}
#top #secA .secA_today .calendar .select .next a{
  padding-right: 10px ;}
#top #secA .secA_today .calendar .select .prev a:before,
#top #secA .secA_today .calendar .select .next a:before{
  display: block ;
  position: absolute ;
  content: '' ;
  top: 50% ;
  right:10px ;
  width: 4px;
  height: 4px;
  margin-top: -4px ;
  border-top: 2px solid #034a86;
  border-right: 2px solid #034a86;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);}
#top #secA .secA_today .calendar .select .prev a:before{
  left: 10px ;
  right: auto ;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);}

#top #secA .secA_today .calendar .select .now{
  width: 120px ;
  float: left ;
  text-align: center ;
  padding: 5px 0 ;
 color: #000000 ;
  text-decoration: none ;}
#top #secA .secA_today .calendar .select .now span{
  font-size: 1.9rem ;}
#top #secA .secA_today .calendar table{
  width: 100% ;
  margin: 0 auto 15px auto ;}
#top #secA .secA_today .calendar table caption{
  display: none ;}
#top #secA .secA_today .calendar table thead{}
#top #secA .secA_today .calendar table thead th{
  width: calc(100%/7);
  text-align: center ;
  padding: 5px 0 ;}
#top #secA .secA_today .calendar table thead th.cSun{
  color: #ff4646 ;}
#top #secA .secA_today .calendar table thead th.cSat{
  color: #187fc4 ;}
#top #secA .secA_today .calendar table tbody{
  display: none ;}
#top #secA .secA_today .calendar table tbody.active{
  display: table-row-group;}
#top #secA .secA_today .calendar table tbody td{
  text-align: center ;
  padding: 5px 0 ;}
#top #secA .secA_today .calendar table tbody td.cSun{
  color: #ff4646 ;}
#top #secA .secA_today .calendar table tbody td.cSat{
  color: #187fc4 ;}
#top #secA .secA_today .calendar table tbody td.cHol{
  background: #cccccc ;}
#top #secA .secA_today .calendar table tbody td.cHol2{
  position: relative ;
  overflow: hidden ;}
#top #secA .secA_today .calendar table tbody td.cHol2:before{
  position: absolute ;
  display: block ;
  content: '';
  top: 0 ;
  right: 0 ;
  z-index: 1 ;
  /*1色パターン：border-rightだけに色指定*/
  border-top: 32px solid #cccccc;
  border-right: 40px solid transparent;}
#top #secA .secA_today .calendar table tbody td.cHol2 span{
  position: relative ;
  z-index: 10 ;}
#top #secA .secA_today .calendar table tbody td.cHol3{
  background: #ffd1e8 ;}

#top #secA .secA_today .calendar table tbody td.cToday{
  border:2px solid #ffa800 ;}
#top #secA .secA_today .calendar table tbody td a{
  border-bottom: 2px solid #187fc4 ;
  text-decoration: none ;}
#top #secA .secA_today .calendar table tbody td a{
  color: #000000 ;
  border-bottom: 1px solid #000000;}
#top #secA .secA_today .calendar table tbody td.cSun a{
  color: #ff4646 ;
  border-bottom: 1px solid #ff4646;}
#top #secA .secA_today .calendar table tbody td.cSat a{
  color: #187fc4 ;
  border-bottom: 1px solid #187fc4;}
#top #secA .secA_today .calendar table tbody td.ph span,
#top #secA .secA_today .calendar table tbody td.ph a{
  color: #ff4646 ;
  border-color:#ff4646;}
/*
#top #secA .secA_today .calendar table tbody td.ph a{
  color: #ff4646 ;
  border-bottom: 1px solid #ff4646;}
*/
#top #secA .secA_today .calendar .exp{}
#top #secA .secA_today .calendar .exp span{
  display: inline-block ;
  margin: 0 0 5px 0 ;}
#top #secA .secA_today .calendar .exp span.holiday{
  padding: 0 0 0 5px ;
  border-left: 20px solid #cccccc ;}
#top #secA .secA_today .calendar .exp span.holiday2{
  position: relative ;
  padding: 0 0 0 25px ;}
#top #secA .secA_today .calendar .exp span.holiday2:before{
  position: absolute ;
  display: block ;
  content: '';
  top: 0 ;
  left: 0 ;
  z-index: 1 ;
  /*1色パターン：border-rightだけに色指定*/
  border-top: 22px solid #cccccc;
  border-right: 21px solid transparent;}
#top #secA .secA_today .calendar .exp span.holiday3{
  padding: 0 0 0 5px ;
  border-left: 20px solid #ffd1e8 ;}

#top #secA .secA_today .calendar .exp span.today{
  position: relative ;
  padding: 0 0 3px 5px ;
  border-left: 20px solid #ffa800 ;}
#top #secA .secA_today .calendar .exp span.today:after{
  position:absolute;
  display: block;
  content: '';
  width: 16px;
  height: 18px;
  background: #ffffff;
  top: 2px;
  left: -18px;
  }
#top #secA .secA_news{
	width: 650px ;
	float: right ;
  box-sizing: border-box ;
  padding-top: 5px ;}
#top #secA .secA_news > ul{
  height: 440px ;
  overflow-y: auto ;
  margin-bottom: 18px ;}
#top #secA .secA_news > ul li{
  list-style: none ;
  margin: 0 0 15px 0 ;
  overflow: hidden ;}
#top #secA .secA_news > ul li .date{
  display: block;
  margin: 0 0 5px 96px;
  font-size: 1.3rem;}
#top #secA .secA_news > ul li .cate{
  display: block;
  width: 85px;
  float: left;
  padding: 4px 10px ;
  box-sizing: border-box ;
  color: #ffffff ;
  border-radius:5px ;
  background: #ffa800 ;
  font-size: 1.3rem ;
  text-align: center ;}
#top #secA .secA_news > ul li .cate.cate1{
  background: #ffa800 ;}
#top #secA .secA_news > ul li .cate.cate2{
  background: #2db3eb ;}
#top #secA .secA_news > ul li .cate.cate3{
  background:#2FAF75 ;}
#top #secA .secA_news > ul li a{
  display: block;
  width: 532px;
  float: left;
  margin-left: 10px;
  margin-top: 4px ;}
#top #secA .secA_news .bnr{
  overflow: hidden ;}
#top #secA .secA_news .bnr li{
  text-align: center ;
  width: 50% ;
  float: left ;
  list-style: none ;}
#top #secA .secA_news .bnr li:nth-child(even){
  float: right ;}
 
@media screen and (max-width:1000px ){
  #top #secA .inner{
    width: 95% ;}
  #top #secA .secA_news{
    width: calc(100% - 330px);}
  #top #secA .secA_news > ul li a{
    width: calc(100% - 100px);}     
}

@media screen and (max-width:680px ){
  #top #secA .secA_today{
    width: 100% ;
    float: none ;
    border: 2px solid #c7bda8 ;
    padding: 15px ;
    margin-bottom: 20px ;}

  #top #secA .secA_today .time{
    width: 95% ;}
  #top #secA .secA_today .link a{
    width: 95% ;
    padding: 10px ;}
  #top #secA .secA_news{
    width: 100% ;
    float: none ;}
  #top #secA .secA_news h2{
    text-align: center ;}
  #top #secA .secA_news > ul{
    height: auto ;}
  #top #secA .secA_news > ul li .date{
    display:inline-block ;
    margin: 0 5px 5px 0;}
  #top #secA .secA_news > ul li .cate{
    display:inline-block ;
    float: none;}
  #top #secA .secA_news > ul li a{
    display: block;
    width: 100%;
    float: none;
    margin-left: 0;}
  #top #secA .secA_news .bnr li{
    width: 100% ;
    float: none ;
    margin: 0 auto 10px auto ;}
  #top #secA .secA_news .bnr li:nth-child(even){
    float: none;}
}



/*  イベント
++++++++++++++++++++++*/
#top #secB{
  background-image: url("../images/top/event_bg.png") ;
  background-position: top center ;
  background-repeat: no-repeat ;
  background-size: cover ;
  padding: 50px 0 20px 0 ;}
#top #secB .inner{}
#top #secB .inner .event{
  overflow: visible ;}
#top #secB .inner .event h2{
  text-align: center ;
  margin-bottom: 20px ;}
#top #secB .inner .event .alignC{
  margin: 0 auto 15px auto ;}
#top #secB .inner .event ul{
  display: flex ;
  justify-content: space-between;
  flex-wrap: wrap;}
#top #secB .inner .event ul li{
  position: relative ;
  list-style: none ;
  width: 24% ;
  margin: 0 0 20px 0 ;
  background: #ffffff ;
  border-radius:10px 10px 0 0 ;}
#top #secB .inner .event ul li.dummy{
  background: none ;}
#top #secB .inner .event ul li figure{
  width: 100% ;
  max-height: 170px ;
  overflow: hidden ;
  margin: 0 auto 15px auto ;
  border-radius:10px 10px 0 0 ;}
#top #secB .inner .event ul li figure img{
  width: 100% ;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;}
#top #secB .inner .event ul li a:hover figure img,
#top #secB .inner .event ul li a:focus figure img{
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);}
#top #secB .inner .event ul li .cate{
  width: 90% ;
  overflow: hidden ;
  margin: 0 auto 10px auto ;}
#top #secB .inner .event ul li .cate span,
#top #secB .inner .event .note span{
  position: relative;
  display: block;
  float: left;
  padding: 2px 20px;
  text-align: center;
  border-radius:20px;
  background: #013077;
  border: 2px solid #013077;
  color: #ffffff;
  font-size: 1.2rem;
  }
#top #secB .inner .event ul li .cate .cate_child{
  position: relative ;
  padding-left: 30px ;
}
#top #secB .inner .event ul li .cate span svg,
#top #secB .inner .event .note span svg{
  position: absolute ;
  top:5px ;
  left: 9px ;}

#top #secB .inner .event ul li .cate span + span{
  margin-left: 5px ;}
#top #secB .inner .event ul li .cate span.c2{
  border: 1px solid #8F653C ;
  background:#8F653C ;}
#top #secB .inner .event ul li .cate span.c3{
  background: #ffffff ;
  color: #000000 ;
  border: 1px solid #000000 ;}
#top #secB .inner .event ul li .cate span.child,
#top #secB .inner .event .note span.child{
  background: #ffffff;
  color: #e60012;
  border: 2px solid #e60012;
  vertical-align: middle;
  padding-left: 15px;
}
#top #secB .inner .event ul li .cate span.child svg,
#top #secB .inner .event .note span.child svg{
  position: absolute ;
  vertical-align: middle;
  margin-right: 10px;
  width: 1.2em;
  height: 1.2em;
  top: 4px;
  left: 10px;
  }
#top #secB .inner .event ul li .date{
  display: block ;
  width: 90% ;
  min-height: 35px ;
  margin: 0 auto 5px auto ;
  font-size: 1.3rem ;}
#top #secB .inner .event ul li h3{
  width: 90% ;
  margin: 0 auto 15px auto ;}
#top #secB .inner .event ul li a{
  text-decoration: none ; }
#top #secB .inner .event .note{
  position: relative ;
  margin: 0 auto 15px auto ;}
#top #secB .inner .event .note span.child{
  margin-right: 10px;
  padding-left: 30px;
  }
#top #secB .inner .event .note p{
  display: inline-block ;
  padding: 2px 15px ;
  box-sizing: border-box ;
  background: #ffffff ;
  border-radius:25px ;
  text-align: center ;
  margin: 0 0 0 auto ;}
#top #secB .inner .event .note p svg{
  width: 1.2em ;
  height: 1.2em ;
  vertical-align: middle ;
  margin-right: 5px ;
  fill:#f9506c ;}

@media screen and (min-width:1001px ){
  #top #secB .inner .event ul li{
    width: 32% ;}
}

@media screen and (max-width:1000px ){
  #top #secB .inner{
    width: 95% ;}

  #top #secB .inner .event ul li{
    width: 32% ;}
}
@media screen and (max-width:680px ){
  #top #secB .inner .event ul li{
    width: 48% ;}
}


/*  博物館を楽しむ方法
++++++++++++++++++++++*/
#top #secC{
  background: #ffffff ;
  padding: 30px 0 ;}
#top #secC .inner{}
#top #secC .inner .other{}
#top #secC .inner .other h2{
  text-align: center ;
  margin-bottom: 20px ;}
#top #secC .inner .other ul{
  display: flex ;
  justify-content: space-between;}
#top #secC .inner .other ul li{
  position: relative ;
  list-style: none ;
  width: 24% ;
  margin: 0 0 20px 0 ;
  background: #ffffff ;
  border-radius:10px 10px 0 0 ;}
#top #secC .inner .other ul li figure{
  width: 100% ;
  max-height: 160px ;
  overflow: hidden ;
  border-radius:10px ;
  margin-bottom: 15px ;}
#top #secC .inner .other ul li img{
  display: block ;
  margin: 0 auto 0 auto ;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;}
#top #secC .inner .other ul li a:hover img,
#top #secC .inner .other ul li a:focus img{
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);}
#top #secC .inner .other ul li h3{
  text-align: center ;
  margin: 0 auto 15px auto ;
  color: #187fc4 ;
  font-size: 2rem ;}
#top #secC .inner .other ul li p{}
#top #secC .inner .other ul li a{
  text-decoration: none ;}

@media screen and (max-width:1000px ){
  #top #secC .inner{
    width: 95% ;}
}

@media screen and (max-width:680px ){
  #top #secC .inner .other ul{
    flex-wrap: wrap;}
  #top #secC .inner .other ul li{
    width: 48% ;}
}


/*  プラネタリウム
++++++++++++++++++++++*/
#top #secD{
  background: #ffffff ;
  padding-bottom: 20px ;}
#top #secD .inner{
  position: relative ;
  background-image: url("../images/top/planetarium_bg.png") ;
  background-position: top center ;
  background-repeat: no-repeat ;
  background-size: cover ;
  padding: 50px 0 30px 0 ;}
#top #secD .inner .planetarium{
  margin: 0 auto ;}
#top #secD .inner .planetarium h2{
  text-align: center ;
  margin-bottom: 20px ;
  color: #ffffff ;}
#top #secD .inner .planetarium ul{


  display: flex ;
  justify-content: space-between;
  flex-wrap: wrap;}
#top #secD .inner .planetarium ul::after{
  content:"";
  display: block;
  width:32%;}
#top #secD .inner .planetarium ul li{
  position: relative ;
  list-style: none ;
  width: 32% ;
  margin: 0 0 20px 0 ;
  background: #ffffff ;
  border-radius:10px 10px 0 0 ;}
#top #secD .inner .planetarium ul.num4 li{
  width: 24% ;}
#top #secD .inner .planetarium ul li figure{
  width: 100% ;
  overflow: hidden ;
  margin: 0 auto 15px auto ;
  border-radius:10px 10px 0 0 ;}
#top #secD .inner .planetarium ul li figure img{
  width: 100% ;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;}
#top #secD .inner .planetarium ul li a:hover img,
#top #secD .inner .planetarium ul li a:focus img{
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);}
#top #secD .inner .planetarium ul li .cate{
  width: 90% ;
  overflow: hidden ;
  margin: 0 auto 10px auto ;}
#top #secD .inner .planetarium ul li .cate span{
  display: block ;
  float: left ;
  padding: 2px 20px ;
  text-align: center ;
  border-radius:20px ;
  background: #013077 ;
  border: 1px solid #013077 ;
  color: #ffffff ;
  font-size: 1.2rem;}
#top #secD .inner .planetarium ul li .cate span + span{
  margin-left: 5px ;}
#top #secD .inner .planetarium ul li .cate span.c2{
  border: 1px solid #3399cc ;
  background: #3399cc ;}
#top #secD .inner .planetarium ul li .cate span.c3{
  background: #ffffff ;
  color: #000000 ;
  border: 1px solid #000000 ;}
#top #secD .inner .planetarium ul li .date{
  display: block ;
  width: 90% ;
  min-height: 35px ;
  margin: 0 auto 5px auto ;
  font-size: 1.3rem ;}
#top #secD .inner .planetarium ul li h3{
  width: 90% ;
  margin: 0 auto 15px auto ;}
#top #secD .inner .planetarium ul li a{
  text-decoration: none ; }

@media screen and (max-width:1000px ){
  #top #secD .inner .planetarium{
    width: 95% ;}
}

@media screen and (max-width:680px ){
  #top #secD .inner .planetarium ul{
    flex-wrap: wrap;}    
  #top #secD .inner .planetarium ul li,
  #top #secD .inner .planetarium ul.num4 li{
    width: 48% ;}
}

/*  企画展・特別展
++++++++++++++++++++++*/
#top #secE{
  background: #ffffff ;}
#top #secE .inner{
  position: relative ;
  background-image: url("../images/top/kikaku_bg.png") ;
  background-position: top center ;
  background-repeat: no-repeat ;
  background-size: cover ;
  padding: 50px 0 30px 0 ;}
#top #secE .inner .kikaku{
  margin: 0 auto ;}
#top #secE .inner .kikaku h2{
  text-align: center ;
  margin-bottom: 30px ;}
#top #secE .inner .kikaku .box{
  background: #ffffff ;
  border-radius:10px ;
  padding: 20px ;
  box-sizing: border-box ;
  overflow: hidden ;}
#top #secE .inner .kikaku .box + .box{
 margin-top: 15px ;
}
#top #secE .inner .kikaku .box .img{
  width: 490px ;
  float: left ;}
#top #secE .inner .kikaku .box .img ul li{
  list-style: none ;}
#top #secE .inner .kikaku .box .info{
  width: calc(100% - 520px) ;
  float: right ;}
#top #secE .inner .kikaku .box .info h3{
  font-size: 2rem ;
  font-weight: bold ;
  color: #187fc4 ;
  margin: 0 auto 15px auto ;}
#top #secE .inner .kikaku .box .info p{
  margin: 0 auto 15px auto ;}
#top #secE .inner .kikaku .box .info p.date{
  margin: 0 auto 5px auto ;
font-weight: bold ;}
#top #secE .inner .kikaku .box .info .more{}
#top #secE .inner .kikaku .box .info .more a{
  display: inline-block ;
  padding: 3px 20px ;
  border: 2px solid #187fc4 ;
  border-radius:5px ;
  text-decoration: none ;}
#top #secE .inner .kikaku .box .info .more a:hover,
#top #secE .inner .kikaku .box .info .more a:focus{
  background: #187fc4 ;
  color: #ffffff;}

@media screen and (max-width:1000px ){
  #top #secE .inner .kikaku .box{
    width: 95% ;
    padding: 10px ;
    margin: 0 auto ;}
  #top #secE .inner .kikaku .box .info{
    width: calc(100% - 360px) ;}
}

@media screen and (max-width:680px ){
  #top #secE .inner .kikaku .box{}
  #top #secE .inner .kikaku .box .img{
    width: 100% ;
    float: none ;
    text-align: center ;
    margin-bottom: 15px ;}
  #top #secE .inner .kikaku .box .info{
    width: 100% ;
    float: none ;}
  #top #secE .inner .kikaku .box .info .more{
    display: block ;
    text-align: center ;}
}


/*  博物館ブログ
++++++++++++++++++++++*/
#top #secF{
  background: #ffffff ;
  padding: 30px 0 ;}
#top #secF .inner{
  padding: 30px 0 ;
  border-top:5px solid #d6dde8 ;
  border-bottom:5px solid #d6dde8 ;}
#top #secF .inner .blog{}
#top #secF .inner .blog h2{
  text-align: center ;
  margin-bottom: 30px ;}
#top #secF .inner .blog h2 span{
  font-size:1.5rem ;
display: inline-block ;
margin-right: 3px ;}
#top #secF .inner .blog ul{
  display: flex ;
  justify-content: space-between;}
#top #secF .inner .blog ul li{
  list-style: none ;
  width: 32% ;
  margin: 0 0 0 0 ;}
#top #secF .inner .blog ul li figure{
  width: 100% ;
  max-height: 200px ;
  overflow: hidden ;
  border-radius:10px ;
  text-align: center ;
  margin: 0 auto 15px auto ;}
#top #secF .inner .blog ul li img{
  margin: 0 auto 15px auto ;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
}
#top #secF .inner .blog ul li a:hover img,
#top #secF .inner .blog ul li a:focus img{
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
#top #secF .inner .blog ul li h3{
  margin: 0 auto 15px auto ;
  font-size: 1.7rem ;}
#top #secF .inner .blog ul li span{}
#top #secF .inner .blog ul li a{
  text-decoration: none ;}



@media screen and (max-width:1000px ){
  #top #secF .inner{
    width: 95% ;}
}

@media screen and (max-width:680px ){
  #top #secF .inner .blog ul{
    flex-wrap: wrap;}    
  #top #secF .inner .blog ul li{
    width: 48% ;}
}


/*  Top Page
---------------------------------------------------*/








/*  バナー広告エリア
++++++++++++++++++++++*/
#secBanner{
  background: #ffffff ;}
#secBanner .inner{
  padding: 20px 0 30px 0 ;}
#secBanner .inner .banner{}
#secBanner .inner .banner ul{
  display: flex ;
  justify-content: space-between;
  flex-wrap: wrap;}
#secBanner .inner .banner ul li{
  width: 32% ;
  margin: 0 0 15px 0 ;
  text-align: center ;
  list-style: none ;}
@media screen and (max-width:1000px ){
  #secBanner .inner{
    width: 95% ;}
  #secBanner .inner .banner ul li{
    width: 32% ;}
}
@media screen and (max-width:680px ){
  #secBanner .inner .banner ul li{
    width: 48% ;}
}


/*  スライダー
++++++++++++++++++++++*/
.slider_wrap{
  position: relative ;
  overflow: hidden;}
.slider_wrap .slick-dotted.slick-slider{
  margin-bottom:  0 ;}
.slider_wrap ul li{
  text-align: center ;}
.slider_wrap ul li img{
  margin: 0 auto ;}
.slider_wrap .slider_ctrl_box button {
	display: block;
	width: 30px;
	height: 30px;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
	border: none;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 50%;
	margin-top: -30px;
	transform: translateY(-50%);
	z-index: 100;
	cursor: pointer;
	}
.slider_wrap .slider_ctrl_box button:focus,
.slider_wrap .slider_ctrl_box button:active{
  outline: none;}

.slider_wrap .slider_ctrl_prev {
	left: 0;
	top: 50%;}
.slider_wrap .slider_ctrl_next {
	right: 0;
	top: 50%;}
.slider_wrap .slider_ctrl_pause,
.slider_wrap .slider_ctrl_play {
	right: 31px;
	}
.slider_wrap .slider_ctrl_box button:before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border: 2px solid #fff;
	position: absolute;
	box-sizing: border-box;
	}
.slider_wrap .slider_ctrl_box button.slider_ctrl_prev:before,
.slider_wrap .slider_ctrl_box button.slider_ctrl_next:before {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);}
.slider_wrap .slider_ctrl_box button.slider_ctrl_prev:before {
	left: -webkit-calc(50% + 3px);
	left: calc(50% + 1px);
	border-top: none;
	border-right: none;
	}
.slider_wrap .slider_ctrl_box button.slider_ctrl_next:before {
	left: -webkit-calc(50% - 3px);
	left: calc(50% - 2px);
	border-left: none;
	border-bottom: none;
	}
.slider_wrap .slider_ctrl_box button.slider_ctrl_pause::before {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-top: none;
	border-bottom: none;
	width: 7px;
	height: 9px;
	}
.slider_wrap .slider_ctrl_box button.slider_ctrl_play::before {
	top: 50%;
	left: -webkit-calc(50% + 5px);
	left: calc(50% + 3px);
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border: none;
	border: 5px solid transparent;
	border-left-color: #fff;
	}