@media screen and (max-width: 840px) {
 
img{
max-width: 100%;
height: auto;
width /***/:auto;
}

html,body{
  margin: 0;
  padding: 0;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
#contents01{
  background-image: url(../img/bg001.jpg);
  background-color: #6bdbef;
}
#contents02{
  background-image: url(../img/bg002.jpg);
  background-color: #abeaca;
}
#contents03{
  background-image: url(../img/bg003.jpg);
  background-color: #feffa8;
}
#contents04{
  background-image: url(../img/bg004.jpg);
  background-color: #cccc11;
}
#contents05{
  background-image: url(*);
  background-color: #11cccc;
}
#contents06{
  background-image: url(../img/bg005.jpg);
  background-color: #15cdcd;
}
.bgImage{
  width: 100%;
  background-size: 150% auto;
  color: #000;
  display: table;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.bgImage > * {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    padding: 0;
}
.button {
	display: inline-block;
	width: 70%;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button {
	background-color: #333;
	color: #fff;
}
.button:hover {
	background-color: #59b1eb;
}
.fade_sample {
	/*変化にかかる時間とタイミング、進行具合を指定*/
	-webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;  
}
 
/*オンマウス時に実行*/
.fade_sample:hover {
	/*透明度具合を指定*/
	opacity: 0.4;  
	filter: alpha(opacity=60);  
}

}