body {
	background-color: #6666ff;
	color: white;
}

header {
  margin-top: 20px;
  margin-bottom: 0;
}

header h1{
  color: white;
  font-size: large;
}


#page-title {
  text-align: center;
}

#title-pict {
  width: 60%;
  max-width: 600px;
  min-width: 120px;
}

img#kigou1 {
  width: 10%;
  max-width: 100px;
  min-width: 20px;
  vertical-align: top;
}

img#kigou2 {
  width: 10%;
  max-width: 100px;
  min-width: 20px;
  vertical-align: bottom;
}

#main{
  width: 90%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.5em 1em;
  background-color: #6666ff;
}

.undisp {
  text-align: left;
  margin: 0 1.5em;
}

.undisp input {
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.6);
}

.note {
  font-size: x-small;
  text-align:right;
}

/* メニュータイトル　一括設定 */

#menu1, #menu2, #menu3, #menu4 {
  width: 95%;
  margin: 1em auto 1em auto;
  border-radius: 10px;
  position: relative;
  color: #fff;
}

#menu1, #menu2, #menu3 {
	 height: 4em;
	 background-size: contain;
}


/* 文字が多いので、折り返し設定 */
@media screen and (max-width: 460px) {
	#menu4  {
		height: 7em;
	}
}

@media screen and (min-width: 461px){
	 #menu4  {
		 height: 4em;
	}
}

#menu1 a, #menu2 a, #menu3 a, #menu4 a {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  text-decoration: none;
  text-shadow: 
        1px 0 0 #333,
        1px 1px 0 #333,
        0 1px 0 #333,
        -1px 1px 0 #333,
        -1px 0 0 #333,
        -1px -1px 0 #333,
        0 -1px 0 #333,
        1px -1px 0 #333;
}

#menu1:hover, #menu2:hover, #menu3:hover, #menu4:hover {
  ms-transform: translateY(10px);
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  border-bottom: none;
  box-shadow: none;
}

/* メニューリスト　一括設定 */
#menu1_list, #menu2_list, #menu3_list, #menu4_list {
  width: 95%;
  margin: -10px auto 5px auto; 
  padding: 1em 0em 90px;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.6);
}


/* お天気情報用メニュー  */
h2 {
  position: absolute;
  top: 0.2em;
  width: 100%;
  height: 100%;
  margin: 10px 10px;
  padding: 50px 5px 15px;
  text-align: center;
  font-size: x-large;
  }

h2 small {
  font-size: small;
  font-weight: lighter;
}

dl {
  margin-left: 0.5em;
  color: #336;
}

dt {
  margin: 1em 0.5em 0;	
  font-size: large;
  font-weight: bold;
}

dd {
  margin: 0em 0.5em;
}


#menu1{
  background: url(../img/menu1.png) no-repeat; /* fallback  */
  background: url(../img/menu1.svg) no-repeat, none;
  background-size: contain;
  background-position: 5px 0px;
  background-color: #88CC11;
  box-shadow: 0 10px #446608;
}

#menu1, #menu1 a {
  color: #ecffcc;
}

#menu1_list {
  background-image: url("../img/menu1.svg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right bottom;
  background-color: #ecffcc;
}

/*--
 section: お天気教室
--*/
#menu2{
  background: url(../img/menu2.png) no-repeat; /* fallback  */
  background: url(../img/menu2.svg) no-repeat;
  background-size: contain;
  background-position: 5px 0px;
  background-color: #f90;
  box-shadow: 0 10px #663d00;
}

#menu2 a {
  color: #fffcdd;
}

#menu2_list {
  background-color: #ffebcc;
  background-image: url("../img/menu2.svg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right bottom;
  padding: .5em 0 90px;
}


/*--
 section: 気象台の紹介
--*/
#menu3{
  background: url(../img/menu3.png) no-repeat; /* fallback  */
  background: url(../img/menu3.svg) no-repeat;
  background-size: contain;
  background-position: 5px 0px;
  margin-top: 20px;
  background-color: #e59;
  box-shadow: 0 10px #4D1C32;
}

#menu3 h2, #menu3 a {
  color: #ffeeff;
}

#menu3_list {
  padding: .5em 0 90px;
  background-color: #EDD5E0;
  background-image: url("../img/menu3.svg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right bottom;
  }

/*--
 section: 小中学校のための学校防災・理科教育
--*/
#menu4{
  background: url(../img/menu4.png) no-repeat; /* fallback  */
  background: url(../img/menu4.png) no-repeat;
  background-size: contain;
  background-position: 5px 0px;
  margin-top: 20px;
  background-color: #a0d8ef;
  box-shadow: 0 10px #426579;
}

#menu4 h2, #menu4 a {
  color: #ffeeff;
}

#menu4_list {
  padding: .5em 0 90px;
  background-color: #ebf6f7;
  background-image: url("../img/menu4.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right bottom;
  }


/*
その他情報
*/
#information{
  width: 95%;
  margin: 30px auto 10px;
  padding: 10px;
  background-color: #fff;
  color: #339;
  text-align: center;
}

#information img{
  float: none;
  vertical-align: top;
  box-shadow: 4px 4px 3px 2px rgba(0,0,0,0.6);
}

#information img:hover{
  float: none;
  vertical-align: top;
  box-shadow: 0px 0px;
  -webkit-transform: translateY(4px);
  transform: translateX(4px) translateY(4px);/*下に動く*/
}

/*
教育機関向けメッセージ
*/
#for_teacher{
  margin: 10px;
  padding: 10px 30px;
  border: solid 3px #999;
  background-color: #99f;
  color: #fff;
}

#for_teacher a {
  color: #fff;
}