@charset "UTF-8";
a:link { color: #E3E3E3 } 
a:visited { color: #E3E3E3 } /* a＝a要素。リンク等に使用する。visited＝訪問済みのリンク */
a:hover { color: red } /*hover＝マウスカーソルを乗せた時。この場合はリンク文字にホバーした場合、文字を赤に。 */

#wrapper{ /* 全体を囲っている箱 */
	width: 1050px; /* width＝横幅 */
	padding-top: 50px; /* padding＝箱の四方に侵入不可領域を指定する。 */
	padding-right: 75px;/*この場合は右に75px間隔を設ける */
	padding-left: 75px;/*この場合は左に75px間隔を設ける */
	margin-left: auto; /*margin＝四方に空きを作る。この場合は左に自動で空きをつくる。 */
	margin-right: auto;/*margin＝四方に空きを作る。この場合は右に自動で空きをつくる 。左と右に自動的に間隔を作る為、中央に配置される。*/
}
#main{
	width: 1050px;
	height: 650px;
}
#main_m {
	width: 550px;
	height: auto; 
	float: left; /* float＝揃いを指定する。left or right */
	clear: none; /* clear＝回り込みに対する規制 */
}
#main_r {
	width: 250px;
	height: 550px;
	float:left;
}
#main_l {
	width: 250px;
	height: 550px;
	float: left;
	font-size: 12px; /* font-size＝文字サイズ */
	color: white;/* 色の指定は数字以外にも、色名で指定できる物もある。 */
	line-height: 1.8em; /* line-heigh＝行間 */
	letter-spacing: 0.1em;/* letter-spacing＝文字間 */
}
#profile_m2{
	width: 500px;
	max-height: 500px;/* max-height＝最大の高さを指定 */
	margin-right: auto;
	margin-left: auto;
	padding-top: 50px;
	padding-bottom: 20px;
	font-size: 12px;
	color: #60C0BD;/* color＝colorのみの場合は文字色 */
	text-align: justify;
	letter-spacing: 0.03em;/* em（エム）文字の高さに対するサイズ。文字が12pxの場合、1em＝12px */
	line-height: 1.6em;
}
#pro_l {
	width: 250px;
	height: 550px;
	float: left;
	font-size: 12px;
	color:#000066;
	line-height: 1.8em;
	letter-spacing: 0.1em;/* font-size＝文字サイズ */
	}
#pro_l a:link { color: #8A8A8A } /* link＝URL、メールなど、リンクへの指定 */
#pro_l a:hover { color: red } /* hover＝URL、メールなど、リンクへの指定 */

#photo {
	width:80px;
   right:0px;
   bottom: 0px;

}

.main_photo {
	padding-top: 160px;
	padding-bottom: 90px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#footer_r img{
	min-width: 50px;
	max-width: 120px;
}
.photo:hover{
	animation: rumble 2s linear infinite;/* CSS3のアニメーションの為の記述 */
	opacity:0.8; /* opacity＝透明度の指定。0〜1。数字が小さくなると透明度が上がる */
}
#footer {
	width: 1050px;
	height: auto;
	color: #FFF;
	font-size: 12px;
	padding-bottom: 30px;/*bottomは下。この場合は「下に30px間隔を設ける」 */
}
#footer_p {
	width: 1050px;
	height: auto;
	color: #000066;
	font-size: 12px;
	padding-bottom: 30px;
}
#footer_r {
	width: 80px;
	height: auto;
	float: right;
}
#footer_l {
	width: 970px;
	height: auto;
	padding-top: 30px;/*topは上。この場合は「上に30px間隔を設ける」 */
	float: left;
	color: #60C0BD;
	
}
#footer_l2 {
	width: 970px;
	height: auto;
	padding-top: 30px;/*topは上。この場合は「上に30px間隔を設ける」 */
	float: left;
	color: white;
	
}
.prophoto {
	float: left;
	padding-right: 3%
}
.prophoto2 {
	float: left;
}
.prophoto:hover{
	opacity:0.7; 
}
.prophoto2:hover{
	opacity:0.7; 
}

#profile_m{
	padding-top: 20px;
}
#profile_l{
	width: 90px;
	float: left;
}
#profile_r{
	width: 90px;
	float: right;
}
.name {
	font-size: 25px;
	letter-spacing: 0.1em;
	font-weight: 600;/*フォントウェイト。基本は100刻み。 */
}


 
@keyframes rumble{/* CSS3アニメーションの動きの指定 */
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(3px,-3px);}
	25%	{transform:rotate(0.8deg)	translate(0px,3px);}
	37.5%	{transform:rotate(0.4deg)	translate(-3px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(3px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,2px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-3px,-3px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}
.wihte {
	color: #FFF;
}