body{ text-align: center;
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px #3c3c3d;
  padding: 10px;
  -webkit-touch-callout:none; // リンク長押しのポップアップ(※1)を無効化
  -webkit-user-select:none; // テキスト長押しの選択ボックス(※2)を無効化}

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

.clear{clear:both;}

.button{position: relative;}

.button .mask_profile { 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 .profile {font-size: 120%;
  font-family: 'Cormorant Garamond', serif;
  text-align:center;
  margin-top: 5px;
	padding: 2px;
	color:white;}

.button .mask_works { 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 .works { font-size: 120%;
	text-align:center;
  margin-top: 5px;
	padding: 2px;
	color:white;}

.button .mask_contact { 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 .contact { font-size: 120%;
	text-align:center;
  margin-top: 5px;
	padding: 2px;
	color:white;}

.button:hover .mask_profile{opacity:		1;	/* マスクを表示する */}
.button:hover .mask_works{opacity:		1;	/* マスクを表示する */}
.button:hover .mask_contact{opacity:		1;	/* マスクを表示する */}