.mainContent{
	width:100%;
	max-width: 900px;
	margin:10px auto;
}


.title {
	width:100%;
	height:15%;
	background:blueviolet;
	text-align: center;
}
.titlePlaceholder{
	color: white;
	font-weight:600;
	font-size:36px;
}
h3 {
	color:navy;
	font-size:20px;
}

table.intro {
	width:100%;
}

.btn {
  width: 60px;  /* 蟷�ｒ謖�ｮ� */
  height: 30px;  /* 鬮倥＆繧呈欠螳� */
  background-color:#0D5D9E; /* 閭梧勹濶ｲ繧定ｵ､縺ｫ謖�ｮ� */
  border-radius: 5px; /* 隗偵ｒ荳ｸ縺上☆繧� */
  position: relative;  /* 蝓ｺ貅紋ｽ咲ｽｮ縺ｨ縺吶ｋ */
  cursor: pointer;     /* 繝槭え繧ｹ繧ｫ繝ｼ繧ｽ繝ｫ繧呈欠�芋汨�ｼ峨�蠖｢縺ｫ縺吶ｋ */
}

.btn::after {
  content: ''; /* 逍台ｼｼ隕∫ｴ�縺ｫ蠢��� */
  width: 0;    /* 蟷�ｒ0縺ｫ謖�ｮ� */
  height: 0;   /* 鬮倥＆繧�0縺ｫ謖�ｮ� */
  border-style: solid;  /* 邱壹�遞ｮ鬘槭ｒ謖�ｮ� */
  border-width: 10px 0 10px 20px;  /* 邱壹�蟷�ｒ謖�ｮ壹＠縺ｦ荳芽ｧ偵ｒ菴懊ｋ */
  border-color: transparent transparent transparent #fff;  /* 蟾ｦ縺ｮ縺ｿ邱壹�濶ｲ繧呈欠螳� */
  position: absolute; /* 逶ｸ蟇ｾ菴咲ｽｮ縺ｫ謖�ｮ� */
  top: 50%;  /* 荳翫°繧�50%縺ｮ菴咲ｽｮ縺ｫ驟咲ｽｮ */
  left: 50%; /* 蟾ｦ縺九ｉ50%縺ｮ菴咲ｽｮ縺ｫ驟咲ｽｮ */
  transform: translate(-50%,-50%); /* 隕∫ｴ�縺ｮ蜊雁�縺ｶ繧薙□縺大ｷｦ荳頑婿蜷代↓遘ｻ蜍輔€� */
}

.btn.playback::after {
  width: 15px;  /* 蟷�ｒ謖�ｮ� */
  height: 30px; /* 鬮倥＆繧呈欠螳� */
  border-width: 0 4px 0 4px; /*邱壹ｒ蟾ｦ蜿ｳ縺ｫ謖�ｮ�*/
  border-color: transparent #fff transparent #fff;  /* 蟾ｦ蜿ｳ縺ｫ邱壹�濶ｲ繧呈欠螳� */
  transition: .5s; /* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ遘呈焚繧呈欠螳� */
}
	


@media screen and (max-width: 500px) {
table.intro img {
	width:50px;
}

}