body{ text-align: center;
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px; }

.wrap{ display: flex;
height: 100vh;
justify-content: space-around;
align-items: center;}
.clear{ clear:both;}

.button{ position: relative;}
.button .mask_mail { width: 100%; height: 100%;
	top: 0; left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color:	rgba(255,255,255,0);
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;}
.button .mail { font-size: 120%;
	text-align:center;
  margin-top: 5px;
	padding-top:2px; padding-bottom: 2px;
	color:#3c3c3d;}

.button .mask_twitter { width: 100%; height: 100%;
	top: 0; left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color:	rgba(255,255,255,0);
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;}
.button .twitter { font-size: 120%;
	text-align:center;
  margin-top: 5px;
	padding-top:2px; padding-bottom: 2px;
	color:#3c3c3d;}

.button .mask_instagram { width: 100%; height: 100%;
	top: 0; left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color:	rgba(255,255,255,0);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;}
.button .instagram {font-size: 120%;
	text-align:center;
  margin-top: 5px;
	padding-top:2px; padding-bottom: 2px;
	color:#3c3c3d;}

.button .mask_tumblr { width: 100%; height: 100%;
	top: 0; left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color:	rgba(255,255,255,0);
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;}
.button .tumblr { font-size: 120%;
	text-align:center;
  margin-top: 5px;
	padding-top:2px; padding-bottom: 2px;
	color:#3c3c3d;}

.button:hover .mask_mail{opacity:		1;	/* マスクを表示する */}
.button:hover .mask_twitter{opacity:		1;	/* マスクを表示する */}
.button:hover .mask_instagram{opacity:		1;	/* マスクを表示する */}
.button:hover .mask_tumblr{opacity:		1;	/* マスクを表示する */}