/* m197d2.CSS */

body{
    margin: 0; padding:0 ;
    font-family: "ＭＳ ゴシック";
    font-size: 15px;
}

.grds3{
    font-size:14px;
    border-radius:16px;
}



/* サムネイル変化  */
.tm_img1{
      border-color:#999;
      border-style:dotted;
      border-width: 1px;
      border-radius:3px;
}

.tm_img1:hover{
    border-color:#999;
    border-style:solid;
    border-width:1px;
    border-radius:6px;
}

.tm_img2{ border-radius:8px;}
.tm_img2:hover{ border-radius:16px;}


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

/* tm_photo1 任意 */
 .tm_photo1{      }


/* rotate */
.tm_photo2:hover{
	animation-name:move2;
	animation-duration:1s;
}

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


/* skew */
.tm_photo3 img:hover{
	animation-name:move3;
	animation-duration:1s;
}

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


/*  */
.tm_photo4 img:hover{
	animation-name:move4;
	animation-duration:2s;
	transition-timing-function:ease-out;
}

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


/*  */
.tm_photo5 img:hover{
	animation-name:move5;
	animation-duration:2s;
	transition-timing-function:ease-out;
}

@keyframes move5{
	10%{transform:translate(0px ,-3px);}
	20%{transform:translate(0px, 3px);}
	40%{transform:translate(0px,0px);}
}