html {
	scroll-padding-top: 15px;
}
body {
	background-color: #585858; text-align: center; color: #000000; 
	font-family: "メイリオ","ヒラギノ角ゴシック",sans-serif;
}
#main {
	width: 700px;  
	margin: 0px auto 0 auto;
	padding: 8px 0px;
	background-color:  #EEE;
	line-height: 20px;
	border-radius: 8px; 
	overflow:hidden;
	}
H1 {text-align: center; background-color: #F78181;}
H4 {text-align: center; background-color: #FFF; }
a:link { color: #000000;  }
a:visited { color: #666666; }
a:hover { color: #FF8000; }
a:active { color: #ff8000; }
img {
	border: 1px #585858 solid;
	margin-bottom: 17px;	
	}
.mbox{ 
	width: fit-content; max-width: 1220px; height: auto;
	margin: 15px auto;
	padding: 10px 25px;
	background-color: #FFF;
	border-radius:  8px; 
	}
.mbox img {   
	display: block;
	max-width: 100%; height: auto; 
	margin: 0 auto; 
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .5); }
	
/*拍手ボタン*/	  
	.button {
	padding: 10px;
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #6E6E6E;
	background: #F6CECE;
	border-radius: 4px;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
	font-weight: bold;
	font-size: 1em;
	border: solid 2px #d27d00;
	}
	.button:hover {
	background: #F78181;
	color: white;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	}
	.button:active {
	background: #F6CECE;
	}
@media screen and (max-width: 500px) {
	body{ margin: 0px; }
H1 {  font-size: 0.8em; }
#main{
	width: 100%; height: auto;
	padding: 10px 0px;
	margin: 10px 0px;
	overflow:hidden;
	}
img{
	width: 100%;
	height: auto;
	border: 1px #585858 solid;
	}
.mbox{
	width: 100%; height: auto;
	margin: 0px 0 15px 0; padding: 5px 2px;
	border-radius:  6px; 
	}
.mbox img
 {  width: 100%; height: auto; margin: 0px; }
}