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


/* タイトル 右*/
.top_left{border-radius:20px 8px 8px 8px ;}


/* タイトル 左 */
.top_right{
    border-radius: 8px 20px 8px 8px ;
}


.home_btn{
    border-radius: 20px 20px 6px 6px ;
    text-align:center;
    font-family: "Times New Roman";
    font-size: 24px;
}


.slide_btns{
    font-size: 16px; text-align:center;
    font-family: "Times New Roman","ＭＳ ゴシック" ;
    height:24px ; letter-spacing: 2px ;
}


.sbtn{border-radius: 20px ;}
.sbtl{border-radius: 20px 0 0 20px ;}
.sbtr{border-radius: 0 20px 20px 0 ;}


.slide_btns a:hover{font-weight: bold ;}
.slide_btns a{text-decoration: none ;  display: block ;}


/* 写真部ボタン */
#close{font-size:24px ; letter-spacing:2px ;}


#numb{font-size:12px; padding-left:15px ;}


.ph_table{
    border-style:solid ;
    border-width:3px ;
    border-radius:12px ;
}


/* ＣＳＳ３ サムネイル変化   参考 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);}
}