/*---------------------------------------------------------------------
　CSS : top page
section
#silider
#event
#news
#purpose
#about
#kids
#library
#special
#access
#banner
---------------------------------------------------------------------*/

/*--------parts-----------*/
#index .btn{
  border: #1a1a1a 2px solid;
  border-radius: 8px;
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px 5px 30px;
  position: relative;
}

#index .btn:before {
  position: absolute;
  display: block;
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #fff;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0 0 0 1px;
  left: 10px;
  text-align: center;
  line-height: 18px;
  width: 16px;
  height: 17px;
  border-radius: 50%;
  background: #fad728;
}

/*------section : silider--------*/
#slider{
  margin-bottom: 50px;
}

#slider .slider_wrap_out{
  background: #4f5961;
  margin-bottom: 10px;
  padding: 0;
}

#slider .slider_wrap_inn{
  width:1180px;
  margin: 0px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#slider .slider-for{/*スライダー画像*/
  width:800px;
  margin-bottom: -6px;
}

#slider .slider-comment{/*スライダーコメント*/
  background: #fad728;
  position: relative;
  padding: 20px 20px 40px 20px;
}

@media all and (-ms-high-contrast: none) {/* IE11対策 */
  #slider .slider-comment{
    width:380px;
  }
}

#slider .slider-comment .upper,
#slider .slider-comment span{
  display: block;
  margin-bottom: 15px; 
}

#slider .slider-comment .upper h3,
#slider .slider-comment span h3{
  font-size:2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

#slider .slider-comment .upper .time,
#slider .slider-comment span .time{
  text-align: right;
  font-size:1.4rem;
  display: block;
}

#slider .slider_menu-control{
  position: absolute;
  bottom:10px;
  right:50px;
}

#slider #slider_menu-stop{
  display: inline-block;
  margin: 0 50px;
  cursor: pointer;
}

#slider .slide-arrow{
  cursor: pointer;
}

#slider .nav_wrap{
  background: url(../images/top/slider_thumb_bg.png);
  background-repeat:repeat-x;
  background-position:center;
}

#slider .slider-nav{/*スライダーサムネイル*/
   width:1180px;
  margin: 10px auto; 
}

@media screen and (max-width:1180px ){

}
@media screen and (max-width:1179px) and (min-width: 897px) {
	#slider .slider_wrap_inn{
		width: 100% ;
	}
  #slider .slider-for{
    width:700px;
    height: auto;
  }
  #slider .slider-comment{
     width:calc(100% - 700px);
    
  }
  #slider .slider-nav{
    width:100%;
  } 
}

@media screen and (max-width:896px ){
  #slider .slider_wrap_inn{
    width:100%;
    display: block;
  }
  #slider .slider-for{
    width:100%;
    margin: 0 auto;
  }
  #slider .nav_wrap{
    display: none;
  }
  
  /*スマホ表示時コメントは非表示にする*/
  #slider .slider-comment{
    /* width:calc(100% - 700px);*/
    display: none;
  }
    #slider .slider_wrap_out {
    background:none;
  }
    #slider {
    margin-bottom: 0;
  }
}

/*------section : event
                    --------*/
#event{
  width:1180px;
  margin: 0 auto 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#event .ev_info,
#event .ev_calendar{
  width: 48%;
}

#event h2{
  background: url(../images/top/ttl_event.png) no-repeat;
  height:120px;
  background-position: left top;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 6em;
  border-bottom: #c7c9cb 1px solid;
  padding-bottom: 5px;
}

/*---.ev_info---*/
#event .ev_info ul{
  padding: 20px 0px;
}

#event .ev_info ul li{
  list-style: none;
  display: inline-block;
  margin: 0 15px 15px 0;
}

#event .ev_info ul li img{
  width:22px;
  height: auto;
  padding-right: 5px;
}

#event .ev_info dl{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 10px;
  margin-bottom: 10px;
}

#event .ev_info dl.ev_ico01{
  border-left: #fad728 4px solid;
}

#event .ev_info dl.ev_ico02{
  border-left: #995c5c 4px solid;
}

#event .ev_info dl.ev_ico03{
  border-left: #89702f 4px solid;
}

#event .ev_info dl.ev_ico04{
  border-left: #3f6436 4px solid;
}

#event .ev_info dl.ev_ico05{
  border-left: #8278b4 4px solid;
}

#event .ev_info dl.ev_ico06{
  border-left: #cf7189 4px solid;
}

#event .ev_info dl.ev_ico07{
  border-left: #4f5961 4px solid;
}

#event .ev_info dl.ev_ico08{
  border-left: #6ba11d 4px solid;
}

#event .ev_info dl.ev_ico09{
  border-left: #cd701c 4px solid;
}

#event .ev_info dl.ev_ico11{
  border-left: #044c8f 4px solid;
}

#event .ev_info dl.ev_ico12{
  border-left: #35a01c 4px solid;
}

#event .ev_info dl.ev_ico13{
  border-left: #3bd7c3 4px solid;
}


#event .ev_info dl dd{
  display: block;
  margin-left: 10px;
}

#event .ev_info dt{
  min-width:32px;
}

#event .ev_info dl dd span:first-child{
  display: block;
}

#event .ev_info dl dd span:nth-child(2){
  display: inline-block;
  background: #d11e83;
  color: #fff;
  font-size: 1.2rem;
  padding: 2px 5px;
  margin-left: 6px;
}

#event .ev_info p{
  text-align: right;
}

#event .ev_info p a{
  position: relative;
  padding-left: 25px;
}

#event .ev_info p a:before{
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fad728;
}

#event .ev_info p a:after{
  position: absolute;
  display: block;
  content: '';
  left: 7px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #4f5961;
  border-right: 2px solid #4f5961;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*---.ev_calendar---*/
#event .ev_calendar table{
  width:100%;
  border-right: #4f5961 3px solid;
  border-left: #4f5961 3px solid;
  border-bottom: #4f5961 3px solid;
}

#event .ev_calendar table caption{
  background:#fad728 url(../images/top/sec_cal_ttl.png);
  background-repeat: no-repeat;
  background-position: center 44px;
  padding: 10px;
  height: 87px;
  border-right: #4f5961 3px solid;
  border-left: #4f5961 3px solid;
  border-top: #4f5961 3px solid;
  position: relative;
}

#event .ev_calendar table caption h3,
#event .ev_calendar table caption p{
  font-size:2rem;
  font-weight:bold;
}

#event .ev_calendar table caption div{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: center;
  color:#1a1a1a;
  font-weight: bold;
  font-size:2.5rem;
}

/*#event .ev_calendar table caption div a{
  font-weight: bold;
}*/

/*#event .ev_calendar table caption div a:nth-child(2){
  font-size:1.8rem;
}*/

#event .ev_calendar table caption div a:first-child{
  position: relative;
  padding-left: 2em;
  font-size:1.8rem;
}

#event .ev_calendar table caption div a:last-child{
  position: relative;
  padding-right: 2em;
  font-size:1.8rem;
}

#event .ev_calendar table caption div a:first-child:before{
  position: absolute;
  display: block;
  content: '';
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #4f5961;
  top: 5px;
  left: 2px;
}

#event .ev_calendar table caption div a:last-child:before{
  position: absolute;
  display: block;
  content: '';
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #4f5961;
  top: 5px;
  right: 2px;
}

#event .ev_calendar table caption div a:first-child:after{
  position: absolute;
  display: block;
  content: '';
  left: 7px;
  top: 10px;
  width: 4px;
  height: 4px;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

#event .ev_calendar table caption div a:last-child:after{
  position: absolute;
  display: block;
  content: '';
  right: 7px;
  top: 10px;
  width: 4px;
  height: 4px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

#event .ev_calendar table caption span{
  display: block;
  position: absolute;
  right: 90px;
  top: -20px;
}

#event .ev_calendar table th{
  width: calc(100% / 7) ;
  height: 40px;
  vertical-align: middle
}

#event .ev_calendar table td{
  width: calc(100% / 7) ;
  border-right:#c7c9cb 1px solid;
  border-bottom:#c7c9cb 1px solid;
  text-align: center;
  position: relative;
}

#event .ev_calendar table td.today{
  background: #fad728
}

#event .ev_calendar table td.today span.now{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: none;
}

#event .ev_calendar table td a{
  display: block;
  width:100%;
  min-height: 70px;
}

#event .ev_calendar table td img{
  width:22px;
  height:auto;
}

#event .ev_calendar table td span{
  display: block;
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
}

#event .ev_calendar table td span.spe01{
  background: #044c8f;
  color:#fff;
}

#event .ev_calendar table td span.spe02{
  background: #8CC37F;
  color:#000000;
}
@media screen and (max-width:1179px) and (min-width: 897px) {
  #event{
    width:100%;
    margin: 0 auto;
  }
}
@media screen and (max-width:896px){
  #event{
    width:100%;
    display: block;
    margin: 0;
  }
  #event .ev_info, 
  #event .ev_calendar{
    width:95%;
    margin: 0 auto 20px;
  }
  #event .ev_calendar table caption span{
    right: 10px;
    top: -20px;
  }
  #event .ev_info p{
  text-align: left;
  display: inline-grid;
}
  
}

@media screen and (max-width:370px ){
  #event .ev_calendar table td span.spe02,
  #event .ev_calendar table td span.spe01{
    position: relative;
    margin: 3px 0 0;
  }
}

/*------section : news
                  --------*/
#news{
  background: #4f5961;
  padding-bottom: 100px;
}

#news .news_wrap{
  width: 1180px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#news .news_list,
#news .blog_sns{
  width: 48%;
}

#news h2{
  background: url(../images/top/ttl_news.png) no-repeat;
  height:120px;
  background-position: left top;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 6em;
  padding-bottom: 5px;
  color:#fff;
}

#news .nw_ico01{/*お知らせ*/
  background: #5b445c;
}

#news .nw_ico02{/*企画展*/
  background: #995c5c;
}

#news .nw_ico03{/*講座・セミナー*/
  background: #8278b4;
}

#news .nw_ico04{/*イベント*/
  background: #cd701c;
}

#news .nw_ico05{/*刊行物*/
  background: #4f6b5d;
}

/*---.news_list---*/
#news .news_list .important h3{
 font-size: 1.8rem;
 font-weight: bold;
 line-height: 2em;
 margin: 0 auto 10px auto ;}

#news .news_list .regular h3{
 color: #ffffff ;
 font-size: 1.8rem;
 font-weight: bold;
 line-height: 2em;
 margin: 0 auto 10px auto ;}

#news .news_list .important dl,
#news .news_list .regular dl{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  margin-bottom: 10px;
}

#news .news_list .important dd span,
#news .news_list .regular dd span{
  font-size: 1.2rem;
  display: inline-block;
  margin-right: 0.5em;
}

#news .news_list dt{
  color:#fff;
  border-radius:5px;
  min-width:8em;
  max-width: 8em;
  display: inline-block;
  padding: 5px 3px;
  margin-right: 10px;
  text-align: center;
  border:#fffced 1px solid;
}

#news .news_list dd{
  display: block;
  text-decoration: underline;
  margin-top:5px;
}

#news .news_list .important{
  background: #fffced;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
}

#news .news_list .important dl{
  color:#1a1a1a;
}

#news .news_list .important dl:last-child{
  margin-bottom: 0;
}

#news .news_list .regular dl dd,
#news .news_list .regular dl dd a{
  color:#fff;
}

#news .news_list p{
  text-align: right;
}

#news .news_list p a{
  position: relative;
  padding-left: 25px;
  color:#fff;
}

#news .news_list p a:before{
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fad728;
}

#news .news_list p a:after{
  position: absolute;
  display: block;
  content: '';
  left: 7px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #4f5961;
  border-right: 2px solid #4f5961;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*---.blog_sns---*/
#news .blog_sns .blog_area{
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 20px 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#news .blog_sns .blog_area a{
  display: block;
  width:50%;
  text-decoration: none;
}

#news .blog_sns .blog_area h3 a{
  width:100%;
}

#news .blog_sns .blog_area a figure{
  margin-bottom: 10px;
}

#news .blog_sns .blog_area a .time{
  text-align: right;
  display: inherit;
  margin-bottom: 10px;
}

#news .blog_sns .blog_area a p{
  text-decoration: underline;
}

#news .sns_area{
 display: flex ;
 flex-wrap: wrap ;
 justify-content: space-between ;}

#news .sns_area .sns_facebook,
#news .sns_area .sns_twitter{
 flex-basis: 275px ;}

#news .sns_area .sns_facebook p,
#news .sns_area .sns_twitter p{
 color: #ffffff ;
 font-size: 2.2rem ;
 margin: 0 auto 5px auto ;
 padding-left: 40px ;
 box-sizing: border-box ;
}

#news .sns_area .sns_facebook p{
 background-image: url(../images/icon_facebook.png) ;
 background-position: 1px 0 ;
 background-repeat: no-repeat ;}

#news .sns_area .sns_twitter p{
 background-image: url(../images/icon_twitter.png) ;
 background-position: 1px 0 ;
 background-repeat: no-repeat ;}


@media screen and (max-width:1180px ){
 #news .sns_area .sns_facebook,
 #news .sns_area .sns_twitter{
  width: 100% ;
  flex-basis: 100% ;
  text-align: center ;}
 
 #news .sns_area .sns_facebook{
  width: 100%;
  max-width: 100%;
  text-align: center ;
  margin: 0 auto 15px auto ;}
}

@media screen and (max-width:1179px) and (min-width: 897px) {
  #news .news_wrap{
      width: 100%;
  }
}
@media screen and (max-width:896px){
  #news .news_wrap{
    width: 100%;
    margin: auto;
    display: block;
  }
  #news .news_list, 
  #news .blog_sns{
    width:95%;
    margin: 0 auto 20px;
  }
  #news .blog_sns .blog_area{
    display: block;
  }
  #news .blog_sns .blog_area a{
    width:95%;
    margin: 0 auto 20px;
  }
  #news .blog_sns .blog_area h3{
    text-align: center;
  }
  #news .blog_sns .blog_area a figure{
    text-align: center;
  }
}

@media screen and (max-width:870px){ 
}

 

/*------section : purpose
                  --------*/
#purpose{
  background: url("../images/top/sec_purpose_bg.png");
  position: relative;
  padding-bottom: 100px;
}

#purpose:before{
  content:"";
  width:336px;
  height:51px;
  background: url("../images/top/sec_purpose_top.png");
  position: absolute;
  /*left:37%;*/
  top:-51px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

#purpose h2{
  text-align: center;
  font-size:1.7rem;
  font-weight:bold;
  background: url("../images/top/h2_yellow.png") no-repeat;
  background-position: center;
  padding:20px;
  position: relative;
  top: -25px;
}

#purpose .purpose_wrap{
  width: 1180px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#purpose article{
  width:calc(100%/4);
  border-radius: 5px;
  margin-right: 20px;
  padding: 20px;
  height: 300px;
}

#purpose article:last-child{
  margin-right: 0px;
}

#purpose article a{
  display: block;
  text-decoration: none;
}

#purpose .general{
  background: #53708a url("../images/top/sec_purpose_ttl1.png");
  background-repeat:no-repeat;
  background-position: center bottom;
}

#purpose .school{
  background: #89702f url("../images/top/sec_purpose_ttl2.png");
  background-repeat:no-repeat;
  background-position: center bottom;
}

#purpose .lover{
  background: #4f6b5d url("../images/top/sec_purpose_ttl3.png");
  background-repeat:no-repeat;
  background-position: center bottom;
}

#purpose .researcher{
  background: #5b445c url("../images/top/sec_purpose_ttl4.png");
  background-repeat:no-repeat;
  background-position: center bottom;
}

#purpose h3{
  font-size:2rem;
  color:#fff;
  text-align: center;
  font-weight:bold;
}

#purpose span{
  position: relative;
  padding-left: 25px;
  color: #fff;
  left:33%;
  font-weight:bold;  
  font-size:2rem;
}

#purpose span:before{
  position: absolute;
  display: block;
  content: '';
  top: 5px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fad728;
}

#purpose span:after{
  position: absolute;
  display: block;
  content: '';
  left: 7px;
  top: 11px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #4f5961;
  border-right: 2px solid #4f5961;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#purpose p{
  background: #fff;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  width:80%;
  margin: 10px auto;
  font-weight:bold;
}
@media screen and (max-width:1180px ){

}
@media screen and (max-width:1179px) and (min-width: 897px) {
  #purpose .purpose_wrap{
      width: 100%;
  }
}
@media screen and (max-width:896px){
  #purpose .purpose_wrap{
    width: 100%;
    display: block;
  }
  #purpose article{
    width:95%;
    margin: 10px auto;
  }
  #purpose article:last-child{
    margin-right:auto;
  }
}

/*------section : about
                  --------*/
#about{
  padding-bottom: 350px;
  position: relative;
  margin-bottom: 50px;
}

#about:before{
  content:"";
  width:900px;
  height:790px;
  background: url("../images/top/sec_about_bgleft.png") no-repeat;
  position: absolute;
  bottom:0;
  left:0;
}

#about:after{
  content:"";
  width:522px;
  height:769px;
  background: url("../images/top/sec_about_bgright.png") no-repeat;
  position: absolute;
  bottom:0;
  right:0;
}

#about .about_wrap{
  position: relative;
  width: 1180px;
  margin: auto;
}

#about .about_wrap:before{
  content:"";
  width:336px;
  height:51px;
  background: url("../images/top/sec_about_top.png");
  position: absolute;
  top:-51px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%); 
}

#about .about_wrap:after{
  content:"";
  width:194px;
  height:91px;
  background: url("../images/top/ttl_about.png") no-repeat;
  position: absolute;
  left:0;
  top:0;
}

#about .about_wrap h2{
  text-align: center;
  font-size:1.7rem;
  font-weight:bold;
  background: url("../images/top/h2_yellow.png") no-repeat;
  background-position: center;
  padding:20px;
  position: relative;
  z-index: 10;
  top: -25px;
}

#about .lead{
  width:60%;
  margin: 0 auto 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#about .lead h3{
  background: #fad728;
  padding: 10px;
  font-family: 'Noto Serif JP', serif;
  width:35%;
  margin-right: 5%;
  font-size:1.8rem;
  text-align: center;
  height: 100%;
}

#about .lead p{
  width:60%;
}

#about .map{
  margin-bottom: 50px;
}

#about .map figure{
  text-align: center;
  position: relative;
  z-index: 10;
}

#about a.btn{
  width:200px;
  display: block;
  margin: 0 auto;
  background: #fff;
  z-index: 2;
}

@media screen and (max-width:1180px ){

}
@media screen and (max-width:1179px) and (min-width: 897px) {
  #about .about_wrap{
    width: 100%;
  }
}
@media screen and (max-width:896px){
  #about{
    padding-bottom:50.161vw;
  }
  #about:before{
    width:100%;
    /*max-width:58.259vw;*/
    height:85.826vw;
    left:0;
    background-size: 100% 100%;
  }
  #about:after{
    width:100%;
    max-width:58.259vw;
    height:85.826vw;
    right:0;
    background-size: 100% 100%;
  }
  #about .about_wrap{
    width: 100%;
  }
  #about .lead{
    width:95%;
    display: block;
    margin-top:10.268vw;
  }
  #about .lead h3{
    width:100%;
  }
  #about .lead p{
    width:100%;
  }
}

/*------section : kids
                  --------*/
#kids{
  background: url("../images/top/sec_kids_bnr_bgL.png") repeat-x;
  text-align: center;
  margin-bottom: 50px;
}

#kids article{
  width:1180px;
  margin: 0 auto;
  position: relative;
  top:-20px;
}
@media screen and (max-width:1180px ){

}
@media screen and (max-width:1179px) and (min-width: 897px) {
  #kids article{
    width: 100%;
  }
}
@media screen and (max-width:896px){
  #kids{
    margin-bottom:11.507vh;
  }
  #kids article{
    width:100%;
  }
}

/*------section : library
                  --------*/
#library{
  background: #4f5961;
  padding-bottom: 80px;
}

#library .library_wrap{
  width:1180px;
  margin: 0 auto;
  position: relative;
  background: url("../images/top/sec_lib_bg.png") no-repeat;
  background-position: right bottom;
}

#library .library_wrap:before{
  content: "";
  width: 336px;
  height: 52px;
  background: url(../images/top/sec_lib_top.png);
  position: absolute;
  top: -51px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

#library .library_wrap:after{
  content: "";
  width: 194px;
  height: 107px;
  background: url(../images/top/ttl_library.png) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

#library h2{
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
  background: url(../images/top/h2_brown.png) no-repeat;
  background-position: center;
  padding: 20px;
  position: relative;
  z-index: 10;
  top: -25px;
  color:#fff;
}

#library p.lead{
  color:#fff;
  text-align: center;
}

#library ul{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 30px;
}

#library ul li{
  width:calc(100% / 3 - 20px) ;
  border-radius: 10px;
  background: #fff;
  list-style: none;
  margin-right: 10px;
  margin-bottom: 10px;
}

#library ul li:nth-child(3n){
  margin-right: 0;
}

#library ul li a{
  display: block;
}

#library ul li h3{
  background: #fad728;
  padding: 10px;
  position: relative;
  display: block;
  text-decoration: none;
  padding-left: 35px;
  text-align: left;
}

#library ul li h3:before{
  position: absolute;
  display: block;
  content: '';
  top: 10px;
  left: 12px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
}

#library ul li h3:after{
  position: absolute;
  display: block;
  content: '';
  left: 17px;
  top: 16px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #4f5961;
  border-right: 2px solid #4f5961;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#library ul li figure img{
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  width: 100%;
  height: auto;
  max-height: 222px;
  overflow: hidden;
}

#library ul li p{
  padding:10px 15px;
}
@media screen and (max-width:1180px ){

}
@media screen and (max-width:1179px) and (min-width: 897px) {
  #library .library_wrap{
    width:100%;
  }
}
@media screen and (max-width:896px){
  #library .library_wrap{
    width:100%;
    margin: 0 auto;
  }
  #library ul{
    display: block;
  }
  #library ul li{
    width:80%;
    margin: 0 auto 10px;
  }
  #library ul li:nth-child(3n){
    margin: 0 auto 10px;
  }
  #library ul li figure img{
    max-height: 100%;
  }
  #library p.lead{
    margin-top:12.888vw;
  }
}

/*------section : special
                  --------*/
#special{
  width:1180px;
  margin: 0 auto 80px;
  position: relative;
  background: url("../images/top/sec_spe_bg.png") no-repeat;
  background-position: right bottom;
}

#special:before{
  content: "";
  width: 336px;
  height: 52px;
  background: url(../images/top/sec_special_top.png);
  position: absolute;
  top: -51px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

#special:after{
  content: "";
  width: 194px;
  height: 107px;
  background: url(../images/top/ttl_special.png) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

#special h2{
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
  background: url("../images/top/h2_yellow.png") no-repeat;
  background-position: center;
  padding: 20px;
  position: relative;
  z-index: 10;
  top: -25px;
}

#special ul{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 30px;
}

#special ul li{
  width:calc(100% / 4 - 8px) ;
  border-radius: 10px;
  list-style: none;
  margin-right: 10px;
  margin-bottom: 10px;
  background: #eaebec;
}

#special ul li:nth-child(4n){
  margin-right: 0;
}

#special ul li a{
  display: block;
}

#special ul li h3{
  background: #4f5961;
  padding: 10px;
  position: relative;
  display: block;
  padding-left: 35px;
  text-align: left;
  color:#fff;
}

#special ul li h3:before{
  position: absolute;
  display: block;
  content: '';
  top: 10px;
  left: 12px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fad728;
}

#special ul li h3:after{
  position: absolute;
  display: block;
  content: '';
  left: 17px;
  top: 16px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #4f5961;
  border-right: 2px solid #4f5961;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#special ul li figure img{
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  width: 100%;
  height: auto;
  max-height: 171px;
  overflow: hidden;
}

#special ul li p{
  padding:10px 15px;
}
@media screen and (max-width:1180px ){

}
@media screen and (max-width:1179px) and (min-width: 897px) {
  #special{
    width:100%;
  }
}
@media screen and (max-width:896px){
  #special{
    width:100%;
    margin: 0 auto 80px;
  }
  #special ul{
    display: block;
  }
  #special ul li{
    width:80%;
    margin: 0 auto 10px;
  }
  #special ul li:nth-child(4n){
    margin: 0 auto 10px;
  }
  #special ul li figure img{
    max-height: 100%;
  }
}

/*------section : access
                  --------*/
#access{
  background: #4f5961;
}

#access .access_wrap{
  width:1180px;
  margin: 0 auto;
  position: relative;
}

#access .access_wrap:before{
  content: "";
  width: 336px;
  height: 52px;
  background: url(../images/top/sec_acc_top.png);
  position: absolute;
  top: -51px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

#access .access_wrap:after{
  content: "";
  width: 218px;
  height: 92px;
  background: url(../images/top/ttl_access.png) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

#access h2{
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
  background: url(../images/top/h2_gray.png) no-repeat;
  background-position: center;
  padding: 20px;
  position: relative;
  z-index: 10;
  top: -25px;
  color:#fff;
}

#access .address{
  text-align: center;
  color:#fff;
  padding-bottom: 20px;
}

#access .btn{
  background: #fff;
/*
  float:right;
  margin: -60px 50px 0 0;
*/
  margin: 10px 0 0;
}

#access .btn:before{
  color: #4f5961;
}

#map iframe{
  width:100%;
  height:400px;
  margin-bottom: 50px;
}

@media screen and (max-width:1180px ){

}
@media screen and (max-width:1179px) and (min-width: 897px) {
  #access .access_wrap{
    width:100%;
  }
}
@media screen and (max-width:896px){
  #access .access_wrap{
    width:100%;
    margin: 0 auto;
  }
  #access .access_wrap:after{
    background: url(../images/top/ttl_access_sp.png) no-repeat;
    width: 218px;
    height: 107px;
    position: absolute;
    top:-10px;
  }
  #access .address{
    padding-top: 40px;
  }
}

/*------section : banner
                  --------*/
#banner{
  width:1180px;
  margin: 0 auto;
}

#banner .slick-prev:before,
#banner .slick-next:before {
  color: #000;
}

#banner .slick-slide{
  margin-right:5px;
}

@media screen and (max-width:1180px ){

}
@media screen and (max-width:1179px) and (min-width: 897px) {
  #banner{
    width:100%;
  }
  #banner .slick-arrow{
    display: none !important;
  }
}
@media screen and (max-width:896px){
  #banner{
    width:100%;
  }
  #banner .slick-arrow{
    display: none !important;
  }
}


/*
---------------------------------------*/
.popup_info{
 display: block ;
	position: fixed;
	z-index:100000;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.70);
}
.popup_info.active{
 display: block; }
.popup_info_inner{
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.popup_info_inner .container{
 width: 85% ;
 margin: 0 auto ;}

.popup_info_inner .box_border{
	background: #fff;
	border:1px solid #333;
	padding:50px 30px;}

.popup_info_inner .container .midashi{
 font-size: 2.5rem ;
 font-weight: bold ;
 text-align: center ;
 margin-bottom: 25px ;}

.popup_info_inner .container p{
 margin-bottom: 20px ;}

.popup_info_inner .container .color_red{
 color: #f00 ;}
.popup_info_inner .container p.close{
 text-align: center ;
 margin-top: 50px ;}

.popup_info_close{
 margin: 0 auto ;
	display: inline-block;
	border:1px solid #666;
	padding:5px 10px;
	cursor:pointer;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;}

span:hover.popup_info_close{
		background: #666;
		color:#fff;
}

@media screen and (max-width:896px){
 .popup_info_inner .box_border{
  height: 300px ;
  overflow-y: auto ;
  padding: 20px 15px ;}
}