@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");


*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}
body {
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}
img{
  width: 100%;
}
.bold{
  font-weight: bold;
}
.blue{
  color: #3494e6;
  font-weight: bold;
}
.red{
  color: crimson;
  font-weight: bold;
}
h2{
  color: #ffffff;
  text-align: center;
  padding-bottom: 20px;
  background-image: url(http://micromagazine.net/gcn/camp/img/h2-bg.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
h3{
  text-align: center;
}
.t-center{
	    margin: 5% 0;
  text-align: center;
  font-size: x-large;
}
.example-item {
  text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff;
}
.square_btn {
  display: inline-block;
  padding: 0.5em 0em;
  text-decoration: none;
  background: #3494e6;
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 10px;
  margin: 40px auto;
}
.square_btn:active {/*ボタンを押したとき*/
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
footer{
  color: #ffffff;
  background-color: #1a8358;
  text-align: center;
  font-size: x-small;
}
footer img{
  width: 250px;
  margin: 1.5%
}
 .m-top{
   margin-top: 5%;
 }
 .m-top-xl{
  margin-top: 15%;
 }
 .twitter-icon{
  width: 8%;
  margin-right: 5%;
}
.link-back {margin: 5%;
  border: solid;
  border-color: #3494e6;
  color: #3494e6;
  border-radius: 10px;
  padding: 1% 4%;
}
/*PC*/
@media screen and ( min-width:769px ){
  body{
    background-image: url(../../img/h-bg.gif);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    background-position-y: 8%;
  }
  .sp{ display: none;}
  .pc{display: block;}
  h2{
    margin: 5% auto;
    width: 100%;
    background-position: center;
    background-size: cover;
    padding: 3% 0 4% 0;
  }

  .wrap{
    width: 980px;
    margin: 10px auto;
  }
  .text-bg{
    background-image: url(../../img/text-bg.png);
      background-repeat: no-repeat;
      background-position: center;
      
  }

  .link{
    width: 50%;
    margin: 0 auto;
  }
  .item img{
    width: 80%;
  }
  

}
/*end-PC*/

/*SP*/
@media screen and ( max-width:768px ){
  .sp{ display: block;}
  .pc{display: none;}

  .wrap{
    width: 90%;
    margin: 0 auto;
  }
  h2{
    font-size: 20px;
  }

  

  .square_btn {
    padding: 0.5em 3em;
  }



 }
/*end-SP*/