/* Green CSS */

/* 画面全体の共通スタイル */
BODY{
    background-color: #162018; 
    color:#f8f8f8 ;
    font-size:16px; font-family:"ＭＳゴシック";
}

/* 文字サイズ */
.font14{font-family:"ＭＳ ゴシック"; font-size:14px; letter-spacing:1px; line-height:130%;} 


/* サムネイル画面　写真表示画面 */
#thm_frm{ position: absolute ; top:0; left:0;  z-index: 2 ;}
#photo_frm{ position: absolute ; top:0; left:0;  z-index: 1 ;}


/* リンク文字色 */
A:link{color:#ddffee;    text-decoration: none ;}
A:visited{color:#ddffee; text-decoration: none ;}
A:hover{color:#ffffff;   text-decoration: none ;}


/* 共通グラデーション  */
.grds{background-image:linear-gradient(#3a6662,#1a3632);}
.grds2{background-image:linear-gradient(#3a6662,#1a3632);border-radius: 10px ;}
.grds3{background-image:linear-gradient(#3a6662,#1a3632);border-radius: 20px ;}


/* サムネイル部 */
#thm_frm{
    position: absolute ; top:0; left:0;  z-index: 2;
    background-position: center top; 
    background-repeat: repeat-y ;
    background-color: #162018 ; 
    background-image: url(bg1_green.png);  
}

/* タイトル部コーナーＲ */
.top_left{border-radius:20px 8px 8px 8px ;}
.top_right{border-radius: 8px 20px 8px 8px ;}
.top_center{border-radius: 20px 20px 8px 8px;}


/* Ｈｏｍｅボタン*/
.home_btn{
    border-radius: 20px 20px 6px 6px ;
    text-align:center;
    font-family: "Times New Roman";
    font-size: 18px;
}

.home_btn a{letter-spacing:1px;}
.home_btn a:hover{letter-spacing:2px;}


/* サムネイル枠 */
.tm_tbl{
    border-color: #227744; 
    border-style :solid ;
    border-radius:6px ;
}

/* 写真表示部 */
#photo_frm{ position: absolute ; top:0; left:0;  z-index: 1;}

/* 写真部タイトル */
#photo_title{font-size:14px;}


/* 写真部 背景 */
#photo_frm{ 
   background-color: #162018 ;   
   background-image: url(bg1_green.png);  
   background-position: center top; 
   background-repeat: repeat-y ;
}


/***  写真部枠色 ***/
.ph_table{
    background-color: #222d24 ; 
    border-color: #225533; 
    border-style:solid ;
    border-width:3px ;
    border-radius:12px ;
}


/*** 写真部 説明文 ***/
#comDiv{color: #ccc ; font-size: 16px;}


/* 写真部 ボタン */
.slide_btns{
    font-size: 16px; text-align:center;
    font-family: "Times New Roman","ＭＳ ゴシック" ;
    height:24px ; letter-spacing: 2px ;
}


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


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


/* 写真部 文字 */
#close{font-size:18px ; letter-spacing:2px ;}

/* 写真部 連番 */
#numb{font-size:12px; padding-left:15px ;}


/* サムネイル変化  */
.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);}
}