@charset "UTF-8";
/* CSS Document */


.fixed-bg {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
 
.bg01 {
  background-image: url(../img/bg01.jpg);
}

.imgWrap {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width: 100%;	/*画像の幅*/
	height: 100%;	/*画像の高さ*/
}
.imgWrap img {
	display: block;
	transition-duration: 1s;	/*変化に掛かる時間*/
}
.imgWrap img:hover {
	transform: scale(1.05);	/*画像の拡大率*/
	transition-duration: 1s;	/*変化に掛かる時間*/
}

.delayed-image {
	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
 
/* じわっと画像が表示される ---------　一度追加していたら不要*/
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
 
/*古いブラウザ用　---------　一度追加していたら不要*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.kitty {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 0%;
    left: auto;
	width: 100%

}

.kittysp {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 0%;
    left: auto;
	width: 100%

}

.kittydate {
    position: relative;
}

.bound-img-wrap img{
  transform: scale(1);
}
/** 画像ホバー時のアニメを設定 */
.bound-img-wrap img:hover{
  -webkit-animation: bound 1s ease-in; 
  -moz-animation:    bound 1s ease-in; 
  animation: bound 1s ease-in;
}

/** アニメーションの定義 */
@keyframes bound {
  /** 開始時は１倍の大きさ */
  from { transform: scale(1); }
  /** 0%～25%にかけて1.15倍する */
  25% { transform: scale(1.15); }
  /** 25%～50%にかけて0.95倍する */
  50% { transform: scale(0.95); }
  /** 50%～75%にかけて1.05倍する */
  75% { transform: scale(1.05); }
  /** 終了時は元の大きさに戻す */
  to { transform: scale(1); }
}