@charset "utf-8";

/* -------------------- header layout -------------------- */
#top_header {
height: auto;
}
h1 {
  width:100%;
  text-align: center;
  line-height: 0.8;
  position: absolute;
  top: 390px;
  left: 0;
  color:#fff4c4;
  font-size: 36px;
}
h1 a {
color:#fff4c4;
line-height: 2;
}
h1 a:hover {
opacity: 0.5;
}
.logoSmall {
  font-size: 24px;
  line-height: 1.0;
}
header p {
  line-height: 30px;
  padding: 10px;
  color: #a67c52;
}
header span.eng {
  font-size: 14px;
  padding-left: 10px;
}
header p img {
  float:left;
  width: 36px;
  padding-bottom: 10px;
}
#top_img {
height: 300px;
/*  background: #ccc;*/
}
#container {
  margin: 0 auto;
  width: 1020px;
  background: #361700;
/* box-shadow */
  -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
  -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
  box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
}

main {
  width: 100%;
  padding: 140px 40px 30px;
  box-sizing: border-box;
  background: #603813;
}
#board {
  background: #1f5244;
  padding: 25px 0 25px 35px;
/* box-shadow */
  -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
  -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
  box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
}
#stave {
  background: #8c6239;
  height: 10px;
  margin-bottom: 40px;
/* box-shadow */
  -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
  -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
  box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
}
.item {
margin-top: 10px;
}
/* -------------------- glovalNav layout -------------------- */
nav#glovalNav ul {
  width: 100%;
  overflow: hidden;
  margin: 0 auto 80px;
}
nav#glovalNav li{
  display: block;
  float: left;
  width: 33.33%;
  height: 240px;
  padding-top: 54px;
  box-sizing: border-box;
}
nav#glovalNav li.topCenter {
padding-top: 0;
}
nav#glovalNav li a {
display: block;
text-align: center;
width:210px;
margin: 20px auto;
/*background-position: */
}
nav#glovalNav li.topLeft a{
background: url(../img/btn_labo.png) no-repeat center top/contain;
}
nav#glovalNav li.topCenter a{
background: url(../img/btn_volcano.png) no-repeat center top/contain;
width: 280px;
}
nav#glovalNav li.topRight a{
background: url(../img/btn_Bulletin.png) no-repeat center top/contain;
}
nav#glovalNav li.bottomLeft a{
background: url(../img/btn_excursion2.png)no-repeat center top/contain;
}
nav#glovalNav li.bottomCenter a{
background: url(../img/btn_student.png)no-repeat center top/contain;
}
nav#glovalNav li.bottomRight a{
background: url(../img/btn.png)no-repeat center top/contain;
}
nav#glovalNav li a:hover {
  opacity: 0.8;
}
.navTitle {
display: none;
}
nav#glovalNav p {
  padding-top: 126px;
  color:#ffe4b2;
  text-align: center;
  line-height: 1.5;
  font-size: 12px;
}
nav#glovalNav li.topCenter p {
padding-top: 180px;
box-sizing: border-box;
}
/* -------------------- board layout -------------------- */
.new {
  color: #f6f2dc;
  font-size: 13px;
  line-height: 1.6;
}
.info dt {
float: left;
width: 10em;
text-align: right;
}
.info dd {
padding-left: 12em;
}
.info dt,.info dd {
margin-bottom: 16px;
line-height: 1.5;
}
.new_dl {
  color: #FC3;
  margin-right: 14px;
}
.info dd a {
color: #f6f2dc;
text-decoration: underline;
}
.info dd a:hover {
color:#BCBAA3;
text-decoration:none;
}
#board .white a {
	color: #FFF;
	text-decoration: underline;
}

.quiz a:hover, .gallery a:hover {
  opacity:0.7;
}
.quiz {
  margin-right: 30px;
}

.quiz {
  margin-top: -10px;
}


/*レスポンシブ*/
@media screen and (max-width:1019px) {
#container {
  width: 100%;
  position: relative;
}
#top_header {
width: 100%;
height: auto;
}
h1 {
  width:100%;
  height: 100px;
  line-height: 18px;
  position: absolute;
  top: 27%;
  left: 0;
}
header p {
  line-height: 30px;
  padding: 4px;
}
header span.eng {
  font-size: 12px;
}
main {
  width: 100%;
  padding: 160px 10px 30px;
  box-sizing: border-box;
  background: #603813;
}

#top_img {
height: auto;
}
#top_img img {
max-width: 100%;
}

/* -------------------- glovalNav layout -------------------- */
nav#glovalNav ul {
  width: 100%;
  padding: 0;
}



#footer.top_footer {
width: 100%;
box-sizing: border-box;
}
}

@media screen and (max-width:900px) {
h1 {
  width:100%;
  height: 100px;
  line-height: 18px;
  position: absolute;
  top: 24%;
  left: 0;
}
}

/*スマホ時*/
@media screen and (max-width:767px) {
#top_header {
height:0;
padding-bottom: 28%;
}
#top_img {
display:none;
}
h1 {
  width:100%;
  height: 0;
  line-height: 12px;
  position: absolute;
  top: 36px;
  left: 0;
  background:url(../img/photo5.png) no-repeat center/cover;
  padding-bottom: 29.4%;
}
h1 a {
display: block;
width: 100%;
font-size: 26px;
color: #FFFFFF;
line-height: 0.9;
}
.logoSmall {
  display: block;
  margin-top: 33%;
  color:#FFFFFF;
  line-height: 1.2;
  font-size: 12px;
}
header p {
  line-height: 12px;
  padding-left: 10px;
  color: #a67c52;
}
header p img {
margin-right: 20px;
padding-bottom: 0;
}
header span.eng {
  font-size: 10px;
  padding-left: 0;
}
header h1 img {
  margin-right: 0;
  max-width: 100%;
  padding: 14px;
  box-sizing: border-box;
}
main {
  padding: 90px 5px 0;
}
/* -------------------- glovalNav layout -------------------- */
nav#glovalNav ul {
  width: 100%;
  overflow: hidden;
  margin: 80px auto 40px;
}
nav#glovalNav li{
  display: block;
  float: left;
  width: 48%;
  margin: 1%;
  height: 25vh;
  padding-top: 0;
  box-sizing: border-box;
}
nav#glovalNav li.topCenter {
padding-top: 0;
}
nav#glovalNav h2 {
  display: block;
  font-size: 15px;
  color: #ffffff;
  font-weight: normal;
  padding-top: 10px;
  text-align: center;
}
nav#glovalNav li a {
display: block;
text-align: center;
width:100%;
height: 100%;
margin:0;
border-radius: 4px;
}
nav#glovalNav li.topLeft a{
background:#DE734F url(../img/scince_kenbikyou.png)no-repeat center/cover;

}
nav#glovalNav li.topCenter a{
background:#FFA50B url(../img/fujisan.png)no-repeat center/cover;
width: 100%;
}
nav#glovalNav li.topRight a{
background:#A5396F url(../img/enpitsu_mochikata.png) no-repeat center/cover;
}
nav#glovalNav li.bottomLeft a{
background:#4B6484 url(../img/junken.png) no-repeat center/cover;
}
nav#glovalNav li.bottomCenter a{
background:#00B4B9 url(../img/students4.png) no-repeat center/cover;
}
nav#glovalNav li.bottomRight a{
background:#62B58F url(../img/furooke_neko.png)no-repeat center/cover;
}
nav#glovalNav li a:hover {
  opacity: 0.8;
}
nav#glovalNav li p {
  padding: 2px;
  padding-top: 10px;
  color:#ffffff;
  text-align: center;
  line-height: 1.5;
  font-size: 11px;
}
nav#glovalNav li.topCenter p {
padding-top: 5px;
box-sizing: border-box;
}

/* -------------------- board layout -------------------- */
#board {
  padding: 15px 5px 15px 0;
}
.new {
  color: #f6f2dc;
  font-size: 12px;
}
.info dt {
float: none;
width: 9.4em;
text-align: right;
}
.info dt,.info dd {
margin-bottom: 0;
}
.info dd {
padding-left:0;
padding: 0 10px 0 44px;
margin-bottom: 10px;
}

.new_dl {
  color: #FC3;
  margin-right: 5px;
}
.info dd a {
color: #f6f2dc;
text-decoration: underline;
}
.info dd a:hover {
color:#BCBAA3;
text-decoration:none;
}


div#footer.top_footer {
padding: 20px 0;

}
.top_footer ul.footerNav {
margin-right: 0;
overflow: hidden;
padding: 1%;
box-sizing: border-box;
}
div#footer.top_footer li{
  float: left;
  width: 46%;
  margin: 2%;
  padding: 0;
  height: 44px;
  border: 1px solid #A67C52;
  border-radius: 4px;
  box-sizing: border-box;
}
div#footer.top_footer li a {
  display: block;
  text-align: center;
  line-height: 44px;
}
div#footer.top_footer li.bold {
display: none;
}
#footer small {
font-size: 12px;
}
}