@charset "UTF-8";
/* *{padding: 0; margin: 0;}*/

/*<style>*/
main {
  background: #DDFFFF;/*#f0e68c;*/
/*  font-family: Mairyo;*/

}


/*各項目のボタンをレスポンシブにする*/

.contents{
  /*display: block;*/
  margin: 0 auto 0;
  /*padding: 10px;*/
  list-style: none;
  text-align: center;
}

/*@media screen and (min-width: 660px){
.contents{*/
  /*display: block;*/
/*  max-width: 660px; /*綺麗にリストが中心にくるように調整する*/
/*  text-align: left;
}
}*/

.group3{
  display: block;
  font-size: 5rem;
  text-align: center;
  /*text-decoration: underline;*/
  padding: 30px 0 0px;
}


.group4{
  display: block;
  max-width: 970px;
  font-size: 3rem;
  margin: 30px auto 10px;
  padding: 15px 20px;
  /*border-bottom: 1px solid #FFF;*/
  border-left: 15px solid #51a8ff;
  background-color: #EEE;
  text-align: left;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}


@media screen and (min-width: 850px){
.contents{
  /*display: block;*/
  max-width: 750px; /*850*//*綺麗にリストが中心にくるように調整する*/
  text-align: left;
}
}

/*各プログラミングのボタン*/
.list1{
  display: inline-block;
  vertical-align: middle;
  /*border: 1px solid black;*/
  margin: 10px;
  padding: 2.5rem 15px 0;
  text-align: center;
/*  float: left;*/
  width: 350px; /*400px*/ /*300px*//*30%;*/
  height: 80px;
  background-color: white;
  border-radius: 10px;
  font-size: 2rem;
  text-decoration: none;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}

.list1:hover{
  text-decoration: none;
  font-weight: bold;
  /*background-image: url('../../1.jpg');*/
  /*color: red;*/
  /*opacity: 1;*/
}