@charset "utf-8";
/* CSS Document */

a {
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}


table {
  margin: auto;
}

img {
	vertical-align: bottom;
	text-align: center;
	width: 374px;
}
.top {
	font-size:small;
	font-family:Verdana, Geneva, "sans-serif";
	text-align: center;
}
.sample1 {
	overflow:		hidden;
	margin:			10px 10px 10px 10px;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:200%;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: 		center;
	padding-top:		50%;
	color:			#fff;
}
.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}
.inbox01 {
	width: 45%;
	margin: auto;
	float:left;
	text-align: center;
	margin-top:30px;
}
.all {
	clear:both;
	font-family:Verdana, Geneva, "sans-serif";
	font-size: medium;
	text-align: center;
	border: solid 1px #000000;
	width: 80%;
	padding: 20px;
	margin: 0px auto;
	}
	
.clear {
	clear:both;
}


@media screen and (max-width: 640px){
	
	
	
table {
  margin: auto;
}
	
img {
	vertical-align: bottom;
	text-align: center;
}
	
.top {
	font-size:small;
	font-family:Verdana, Geneva, "sans-serif";
	text-align: center;
}
.sample1 {
	
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:200%;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: 		center;
	padding-top:		45%;
	color:			#fff;
}
.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

.clear {
	clear:both;
}

	
}