@charset "utf-8";

/* Header */
header .h_left{
  flex: 0 1 330px;
}
.h_link_wrap ul li.access a{
  background-image: url('../images/jhs-img/h-access.png');
}
.h_link_wrap ul li.contact a{
  background-image: url('../images/jhs-img/h-contact.png');
}
.h_link_wrap ul li.graduates a{
  background-image: url('../images/jhs-img/h-ob.png');
}

.h_search_wrap {
    margin-bottom: 10px;
    text-align: right;
}

.h_search_wrap input#keyword {
    width: 181px;
}

/* Link */
.h_link_wrap{}
.h_link_wrap ul{
  display: flex;
  justify-content: flex-end;
}
.h_link_wrap ul li{}
.h_link_wrap ul li.access{
	margin-right: 30px;
	}
.h_link_wrap ul li a{
  font-size: 90%;
  display: block;
  color: #000;
  text-decoration: none;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-left: 17px;
}


.h_link_wrap ul li a:hover, a:focus {
	color: #f98171;
}


/* Nav */
.h_menu_wrap{
  background-image: url('../images/jhs-img/navi-bg.png');
  background-size: 128px;
}

.h_menu_wrap nav.top_nav ul.g_menu li a:hover, a:focus {
	color: #f98171;
}

/* News */
#news .news_header h2{
  flex: 0 1 26%;
}
#news .news_header ul{
  flex: 0 1 50%;
}
#news .news_header ul li{
  flex: 0 1 20%;
}
#news .list ul li span.all,
#news .news_header ul li.all a{ background-color: #d64936; }

#news .list ul li span.news,
#news .news_header ul li.news a{ background-color: #c69c3f; }

#news .list ul li span.shinro,
#news .news_header ul li.shinro a{ background-color: #8abc53; }

#news .list ul li span.event,
#news .news_header ul li.event a{ background-color: #286b91; }

#news .news_header ul li.to_list a{
  color: #d64936;
  border: 1px solid #d64936;
}

#news .list ul li span.date{
  color: #c1272d;
}
/* Club */

#club .list ul li span.date {
  color: #a67c52;
}
#club .list ul li span.cate {
  color: #d64936;
}


/* Footer */

footer .f_top{
	background: none;
    background-image: url(../images/jhs-img/bnr-bg.gif);
    background-position: center bottom;
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 80px 0;
}
/*footer .f_top .inner{*/
  /*display: flex;*/
/*}*/

/* Button Banner */

/*footer .f_top #f_bnr_link ul{*/
  /*display: flex;*/
/*}*/
/*footer .f_top #f_bnr_link ul li{*/
  /*box-sizing: border-box;*/
  /*padding: 10px;*/
/*}*/

footer#top .f_top #f_bnr_link{
  /*flex: 0 1 auto;*/
  width: 100%;
}
footer#top .f_top #f_bnr_link ul{
  flex-wrap: nowrap;
}
footer#top .f_top #f_bnr_link ul li{
  /*flex: 0 1 33%;*/
  width: 33%;
}




/* Info */
#f_info{
  background-image: url('../images/jhs-img/f-bg.jpg');
}

#f_info .f_link ul li a:hover, a:focus {
	color: #f98171;
}


#f_info .f_bottom{
  display: flex;
  justify-content: space-between;
}
#f_info .f_bottom .left{
  flex: 0 1 75%;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
}
#f_info .f_bottom .right {
  flex: 0 1 25%;
  padding: 30px 10px 10px 10px;
}

#f_info .f_bottom .left .top {
  display: flex;
}
#f_info .f_bottom .left .top h2{
  flex: 0 1 52%;
  padding: 5px;
}

#f_info .f_bottom .left .top h2 img{
}

#f_info .f_bottom .left .top p{
  display: block;
  padding: 10px 0 5px 10px;
  flex: 0 1 48%;
}
#f_info .f_bottom .left .top p span{
  display: block;
  padding: 5px;
  text-align: center;
}
#f_info .f_bottom .left .top p span.address{
}
#f_info .f_bottom .left .top p span.access{
    padding-right: 35px;
    padding-left: 35px;
    padding-top: 10px;
}



#f_info .f_bottom .left .bottom{
  display: flex;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
}
#f_info .f_bottom .left dl{
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}
#f_info .f_bottom .left dl.col1{
  flex: 0 1 40%;
}
#f_info .f_bottom .left dl.col2{
  flex: 0 1 60%;
}
#f_info .f_bottom .left dl dt{
  border: 1px solid #fff;
  flex: 0 1 80px;
  text-align: center;
  padding: 3px;
  margin-right: 10px;
}
#f_info .f_bottom .left dl dd{
  padding: 3px;
  flex: 0 1 auto;
}
#f_info .f_bottom .left dl dd span{
  padding-right: 20px;
}



@media screen and (max-width: 768px) {
	
	
header .h_left {
    flex: 0 1 270px;
    padding: 2%;
}
	
header .h_right {
    padding-right: 10px;
}

#news .news_header ul {
    flex: 0 1 70%;
    padding-right: 10px;
    justify-content: flex-end;
}
	

	
footer .f_top {
    padding: 50px 0;
}
	
#f_info .f_bottom {
    display: block;
    justify-content: center;
}
	
#f_info .f_bottom .left {
    width: 100%;
    flex: 0 1 75%;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
}
	
#f_info .f_bottom .left .bottom {
    flex-direction: column;
    font-size: 80%;
    padding: 10px 10px 0px 10px;
}
	
#f_info .f_bottom .right {
    text-align: center;
}
	
#f_info .f_bottom .right img{
    width: 40%;
	}
	
}

/* SP


/* SP
================================================== */

@media screen and (max-width: 767px) {
  /* News */
  #news .news_header h2{
    flex: 0 1 35%;
  }
  #news .news_header ul{
    flex: 0 1 30%;
  }
  .h_menu_wrap {
    background: none;
    background-color: #d64938;
    background-image: url(../images/jhs-img/f-bg.jpg);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 150px;
  }
  #news .news_header ul li.all,
  #news .news_header ul li.news,
  #news .news_header ul li.shinro,
  #news .news_header ul li.event{
    display: none;
  }

   #f_info .f_bottom .left {
    width: 100%;
    flex: 0 1 75%;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
}
  
  #f_info .f_bottom .right {
    text-align: center;
    padding-bottom: 25px;
    padding-top: 15px;
}


}
@media screen and (max-width: 480px) {
#content {
    padding-bottom: 0px;
}
	
  #news .news_header h2{
    flex: 0 1 50%;
  }

  #news .news_header ul{
    flex: 0 1 30%;
	padding-top: 5px;
  }

  #news .news_header ul li{
    flex: 0 1 auto;
  }
	
.photogallery_bnr {
	padding: 20px;
	}
	
footer .f_top {
    background-position: center top;
    background-size: cover;
}

  footer#top .f_top #f_bnr_link ul{
    flex-wrap: wrap;
    flex-direction: column;
  }
  footer#top .f_top #f_bnr_link ul li{
    flex: 0 1 auto;
    width: 100%;
  }

#f_info .f_bottom .left .top p span.access {
    display: none;
}

  #f_info .f_bottom{
    flex-direction: column;
  }
  #f_info .f_bottom .left {
	padding: 10px 30px 10px 30px;
  }


  #f_info .f_bottom .left p{
    flex-direction: column;
  }
  #f_info .f_bottom .left p span.address{
    display: block;
    flex: auto;
    margin-bottom: 20px;
  }
  #f_info .f_bottom .right dl{
    flex-direction: column;
  }
  #f_info .f_bottom .right dl dt{
    flex: auto;
  }
  #f_info .f_bottom .right dl dd{
    text-align: center;
    padding: 10px 10px 20px 10px;
  }
  
   /* footer info */
  #f_info .f_bottom .left .top h2 {
    padding: 0px 20px 0px 20px;
}
  
  #f_info .f_bottom{
    flex-direction: column;
  }
  #f_info .f_bottom .left .top{
    flex-direction: column;
    text-align: center;
  }
  
  #f_info .f_bottom .left .bottom {
    flex-direction: column;
    font-size: 80%;
    padding: 10px 10px 0px 10px;
}

#f_info .f_bottom .left .top p span.address {
    margin-bottom: 0px;
}
  
  #f_info .f_bottom .left dl{
    flex-direction: column;
    flex: auto;
  }
  #f_info .f_bottom .left dl.col1,
  #f_info .f_bottom .left dl.col2{
    display: block;
  }
  #f_info .f_bottom .left dl dt{
    flex: auto;
	margin-right: 0px;
  }
  #f_info .f_bottom .left dl dd{
    text-align: center;
    padding: 10px;
  }
  
  #f_info .f_bottom .left dl {
    margin-top: 3px;
    margin-bottom: 3px;
}

#f_info .f_link ul {
    flex-direction: column;
    padding: 20px 20px 0px 20px;
}

  #f_info .f_bottom .right p {
    text-align: center;
  }
  
  #f_info .f_bottom .right {
    padding: 0px 40px 10px 40px;
}
}