
BODY{
    margin: 0; padding: 0;
    font-family: "ＭＳ ゴシック", Osaka; font-size: 16px;
}

A:link{text-decoration: none;} 
A:visited {text-decoration: none;} 
A:hover {text-decoration: none;}

.bar_left{ border-radius: 30px 30px 10px 10px;}
.bar_right{ border-radius: 20px 20px 10px 10px;}

.tm_grd{border-radius: 30px ;}

.tm_table1{ margin-top: 5px ;} 

/* Home ボタン */
.tn_grd{ 
   border-radius: 50px 50px 10px 10px ; 
   font-size: 24px ; font-family: "Times New Roman";
   letter-spacing: 2px ; text-align: center ;
   line-height:80%;
}

.tn_grd A{display: block ;}
.tn_grd A:hover{font-weight: bold ;}

.tn_grd div{font-size:16px;}

/* サムネイルの説明文 */
.thm1_ttl{ font-size: 12px ;letter-spacing:2px; }

/* ＢＧＭボタン */
.bgm_btn{ 
    font-size: 14px ; font-family: "Times New Roman";
    letter-spacing: 1px ; text-align: center ; height : 30px ;
    border-radius:26px;
}

.bgm_btn A:link{text-decoration: none;}
.bgm_btn A:visited {text-decoration:  none;}
.bgm_btn A:hover {text-decoration: underline;}

/* ＣＳＳ３ サムネイル変化   参考 HTML インタラクティブ 表現ガイド */

/* tm_photo1 任意 */
 .tm_photo1{      }


/* ● サムネイルのCSS効果 rotate */
.tm_photo2:hover{
	animation-name:move1;
	animation-duration:1s;
}

@keyframes move1{
	20%{
    	transform: rotate(4deg);
	}
}



/* ● サムネイルのCSS効果 rotate+ */
.tm_photo3:hover{
	animation-name:move2;
	animation-duration:1s;
}

@keyframes move2{
	0%{
		width:160px; height:106px;
	}

	100%{
		width:150px; height:100px;
	}
	20%{
	    transform: rotate(5deg);
	}
}




/* ● サムネイルのCSS効果 skew */
.tm_photo4 img:hover{
	-webkit-animation-name:move3;
	-webkit-animation-duration:1s;
	animation-name:move3;
	animation-duration:1s;
}


@-webkit-keyframes move3{
	20%{
	    -webkit-transform: skew(6deg,6deg);
	}
	80%{
	    -webkit-transform: skew(-6deg,-6deg);
	}
}

@keyframes move3{
	20%{
	    transform: skew(6deg,6deg);
	}
	80%{
	    transform: skew(-6deg,-6deg);
	}
}


/* ● サムネイルのCSS効果 rotate */
.tm_photo5 img:hover{
	-webkit-animation-name:move4;
	-webkit-animation-duration:1s;
	animation-name:move4;
	animation-duration:1s;
}


@-webkit-keyframes move4{
	70%{
	    transform: rotate(135deg);
	}
}

@keyframes move4{
	70%{
	    transform: rotate(135deg);
	}
}




/* ● サムネイルのCSS効果 */
.tm_photo6 img:hover{

	animation-name:move5;
	animation-duration:1s;
	transition-timing-function:ease-out;
}


@keyframes move5{
	50%{
	    opacity:0.8;
	}
}



/* ● サムネイルのCSS効果 */
.tm_photo7 img:hover{

	animation-name:move6;
	animation-duration:2s;
	transition-timing-function:ease-out;
}

@keyframes move6{

	10%{transform:translate(-5px,0px);}
	20%{transform:translate(5px,0px);}
	40%{transform:translate(0px,0px);}
}


/* ● サムネイルのCSS効果 */
.tm_photo8 img:hover{
	animation-name:move7;
	animation-duration:2s;
	transition-timing-function:ease-out;
}


@keyframes move7{
	50%{
    	transform:perspective(100px) translateZ(-20px) rotateX(360deg);
	}
}



