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

body{
    margin: 0; /*余白削除用 必ずセットで*/
    padding: 0; /*余白削除用*/
}

#wrapper {
	display: flex;
	flex-direction: column;
 	min-height: 100vh;
	position: relative;/*←相対位置*/
    padding-bottom: 5700px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/	
	overflow: hidden;/*←topshita右の余白を消すための対処*/	

}

/* header */
header {
 	position: fixed;
	background-color:#FFFFFF;
	justify-content: space-between;
	width:100%;
	height:100px;
	top:0px;
	left:0px;
	z-index: 9996;/* headerを常に一番上に／ハンバーガーよりは下に */	
	
}

.bar{
	display: flex;
	justify-content: space-between;
	width:100%;
	height:100px;
	top:0px;
	left:0px;
}

.bar h1 {
    
	margin-left: 200px;
	margin-top:10px;
	transition: 0.6s;/* アニメ　時間 */
}

.bar h1 img{
    
	width: 350px;
	height:74px;
	
}


.bar h1:hover{
  transform: scale(0.9);/* アニメ　小さくなるsize */
}


.bar p {
   
	margin-right: 200px;
	margin-top:10px;
	transition: 0.6s;/* アニメ　時間 */
}

.bar p:hover{
  transform: scale(0.9);/* アニメ　小さくなるsize */
}

.bar p img{
	 width:350px; /* 電話番号のサイズ指定 */
	 height:74px;
}


.bar2{
	background-color:#FFA200;
	width: 100%;
	height: 30px;
	top:80px;
	left:0px;
}


/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 9999;/*　ハンバーガーボタンを常に一番上に　*/
  right : 13px;
  top   : 25px;/*　ハンバーガーボタン位置調整　真ん中に　*/
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition   : 0.5s ease-in-out;
  transition        : 0.5s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(315deg);
  -moz-transform   : rotate(315deg);
  transform        : rotate(315deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(-315deg);
  -moz-transform   : rotate(-315deg);
  transform        : rotate(-315deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 9998;/*　ハンバーガーメニューを犬の上に　*/
  top  : 0px;
  left : 0;
  color: #000;
  background: #fff;
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
  opacity: 0.95;/*　ハンバーガーメニュー透過　*/
}

nav.globalMenuSp ul {
  background: #FFA200;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
nav.globalMenuSp ul li:hover{
  background :#F4B563;
}

nav.globalMenuSp ul li a {
  display: block;
  color:#542A08;
  padding: 1em 0;
  text-decoration :none;
  font-family: 'メイリオ', Meiryo,'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateY(0%);
}

/*	
ハンバーガーメニューを表示する重ね順
1 ハンバーガーボタン　 　9999
2 ハンバーガーメニュー   9998
3 上部メニューバー      9996(header)
4 inu01~03           9997
*/




/* header ここまで*/

/* main */
main {
	
}



.top{
	background-color:#FFBF00;
	width: 100%;
	height: 950px;
	top:0px;
	left:0px;
}

.topshita{


}

.topshita a{
	position: absolute; /* 絶対位置 */
	left:50%; /* 真ん中 */
	top:730px;/* 上からの位置 */
	margin-left: -743px; /* width(画像の幅)の半分の値 */
}

.top_sita_line{
	background-color:#FFA200;
	width: 100%;
	height: 30.5px;
	margin-top: -27.25px;
	
}

.top_neko01{
	position: absolute;
	top:70px;
	left: 50%;
	margin-left: -550px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */

/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
/*	
① animation-name	キーフレームアニメーション名を指定。
② animation-duration	1回のアニメーションにかかる時間を指定。
③ animation-timing-function	アニメーションの変化率を指定。他に ease、linear、ease-out、ease-in-out やオリジナルの変化率を指定できる。
④ animation-delay	アニメーションの開始をいくら遅らせるかを指定。
⑤ animation-iteration-count	アニメーションを何回繰り返すかを指定。
⑥ animation-direction	繰り返し時、往復処理をするかを指定。
*/
}

@keyframes fadeIn { /*「fadeIn」と名前をそろえ全てのnekoに適応*/
    0% {opacity: 0} /*アニメーション開始時は完全に透過*/
	70% {opacity: 0} 
    100% {opacity: 1} /*アニメーション終了時は透過しない*/
}

/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
	70% {opacity: 0} 
    100% {opacity: 1}
}

.top_neko02{
	position: absolute;
	margin: 0 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: 400px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */

	/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}



.top_neko03{
	position: absolute;
	margin: 300px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: -600px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}



.top_neko04{
	position: absolute;
	margin: 0px 0 0 0px;
	top:250px;
	left: 50%;
	margin-left: -750px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
}



.top_neko05{
	position: absolute;
	margin: 350px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: 450px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}



.top_neko06{
	position: absolute;
	margin: 0 0 0 0px;
	top:45px;
	left: 50%;
	margin-left:-100px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */
/*フェードインアニメ*/
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}



.top_neko07{
	position: absolute;
	margin: 200px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: -300px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}


.top_neko08{
	position: absolute;
	margin: 200px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: 170px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

.top_neko09{
	position: absolute;
	margin: 0px 0 0 0px;
	top:205px;
	left: 50%;
	margin-left: 500px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
}


.top_neko01 img{
	width: 143px;
	height: auto;
}

.top_neko02 img{
	width: 168px;
	height: auto;
}

.top_neko03 img{ 
	width: 106px;
	height: auto;
}

.top_neko04 img{
	width: 152px;
	height: auto;
}

.top_neko05 img{
	width: 129px;
	height: auto;
}

.top_neko06 img{
	width: 215px;
	height: auto;
}

.top_neko07 img{
	width: 102px;
	height: auto;
}

.top_neko08 img{
	width: 124px;
	height: auto;
}

.top_neko09 img{
	width: 247px;
	height: auto;
}



/* top 猫上から落ちて来る   ここから______________________________________________________________*/

.top_nekodai01{
	position: absolute;
	margin: 220px 0 0 0px;
	top:330px;
	left: 50%;
	margin-left: -570px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */
	
	
/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 5s 1 forwards;
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}

.top_nekodai02{
	position: absolute;
	margin: 220px 0 0 0px;
	top:330px;
	left: 50%;
	margin-left: 310px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */
	
	
/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 5s 1 forwards;
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}

.top_title{
	position: absolute;
	margin: 140px 0 0 0px;
	top:0px;
	left: 50%;
	margin-left: -397.5px; /* width(画像の幅)の半分の値 */
	
	/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 3s 1 forwards;/* 3秒後に2秒かけて落ちて来る猫 */
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}

.nekodai_fukidashi{
	position: absolute;
	margin: 220px 0 0 0px;
	top:450px;
	left: 50%;
	margin-left: -274px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */
	
	
/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 6s 1 forwards;
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}

.noraneko{
	position: absolute;
	margin: 220px 0 0 0px;
	top:335px;
	left: 50%;
	margin-left: -175px; /* width(画像の幅)の半分の値 */
	z-index: 9991;/* headerを常に一番上に */
	
	
/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 7s 1 forwards;
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}


.top_nekodai01 img{
	width: 300px;
	height: auto;
}

.top_nekodai02 img{
	width: 300px;
	height: auto;
}

.top_title img{
	width: 755px;
	height: auto;
}

.nekodai_fukidashi img{
	width: 550px;
	height: auto;
}

.noraneko img{
	width: 340px;
	height: auto;
}



/* タイトル・猫上から落ちてくる */
	@keyframes boyo2 {
  0% { 
	  opacity: 1;/* 不透明 */
	  transform:translateY(-500px) 
		}
  30% { transform:translateY(0) }
  50% { transform:translateY(-150px)scaleY(0.8) }
  75% { transform:translateY(0px) }
  85% { transform:translateY(-60px)}
  95% { transform:translateY(-45px) }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }

	}

/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes boyo2 {
  0% { 
	  opacity: 1;/* 不透明 */
	  transform:translateY(-500px) 
		}
  30% { transform:translateY(0) }
  50% { transform:translateY(-150px)scaleY(0.8) }
  75% { transform:translateY(0px) }
  85% { transform:translateY(-60px)}
  95% { transform:translateY(-45px) }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }

	}


/* top 猫上から落ちて来る   ここまで_________________________________________________________________*/
	



/* top02 歩く猫　　ここから_______________________________________________________________________________________*/


.haikei{
	position: absolute;/* 画像下に余白を出さないよう */
	width: 100%;
	height: 4000px;
	
	background-image: 
   
	url("images/haikei01.png"), /* 1枚目の背景画像のパス パスは,で区切る事*/
	url("images/haikei02.png"), /* 2枚目の背景画像のパス */
	url("images/haikei03.png"),
	url("images/haikei04.png"),
	url("images/haikei05.png"),
	url("images/haikei06.png"),
	url("images/haikei07.png"),
	url("images/haikei08.png"); 
	
	


  background-position:
    left -20px top 180px, /* 1枚目の背景画像の表示位置 */
	right -20px top 180px, /* 2枚目の背景画像の表示位置 */
   right -20px top 1000px,/* 3枚目の背景画像の表示位置 */
    left -20px top 1500px,/* 4枚目の背景画像の表示位置 */
	right -20px top 2000px, /* 5枚目の背景画像の表示位置 */
	left -20px top 2500px,/* 6枚目の背景画像の表示位置 */
	right -20px top 3000px,/* 7枚目の背景画像の表示位置 */
	left -20px top 3500px;/* 8枚目の背景画像の表示位置 */
	

  background-repeat:
    no-repeat;  /* 1枚目の背景画像の設定 */

  background-size:
    250px, /* 01背景画像のサイズ */
	300px,/* 02背景画像のサイズ */
	250px,/* 03背景画像のサイズ */
	250px,/* 04背景画像のサイズ */
	250px,/* 05背景画像のサイズ */
	250px, /* 06背景画像のサイズ */
	250px ,/* 07背景画像のサイズ */
	250px ;/* 08背景画像のサイズ */
}

/* 猫歩くアニメ　*/
#animation_container {
	
	position: absolute;
	left: 50%;
	top:850px;
	margin-left: -320px; /* width(画像の幅)の半分の値 */
	

/* フワッとアニメ */
	opacity : 0;
	transform : translate(0px, 200px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
#animation_container.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	
	}


 /* nagare list ________________________________________________________*/
#nagare{
	display: flex;
	justify-content: center;
	
}

#nagare ul{
	display: flex;
	justify-content: center;
	text-align: center;
	list-style-type:none;
	margin:0px;
	padding: 0px;
	position: absolute;
	top:1200px;
	
	background-image: url("images/nagare_base.png"); /* 背景画像指定 */
	width: 850px;/* 背景画像はめ込みsize指定 */
	height: 329px;
	background-repeat:no-repeat;
	background-size: 100%;
	
/* フェードインアニメ */
	opacity : 0;
	transform : translate(0px, 200px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
#nagare ul.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 0 0 0 0;
	}


#nagare ul li{
	display: block;
	margin: 130px 0px 0px 0px;
	
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

#nagare ul li:hover{
  transform: scale(1.5);/* アニメ　大きくなるsize */
}

#nagare01 img{
		width: 149px;
		height: auto;
	}

#nagare02 img{
		width: 137px;
		height: auto;
	}


#nagare03 img{
		width: 134px;
		height: auto;
	}


#nagare04 img{
		width: 135px;
		height: auto;
	}


#nagare05 img{
		width: 131px;
		height: auto;
	}


#nagare06 img{
		width: 166px;
		height: auto;
	}



 /* kumo */
.kumo{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -420px; /* width(画像の幅)の半分の値 */
	top:1580px;
}


/* fuwafuwa anime*/
@keyframes float {
  0% { transform: translateY(0) }
  30% { transform: translateY(-10px) }
  60% { transform: translateY(-5px) }
  100% { transform: translateY(0) }
}

@keyframes float02 {
  0% { transform: translateY(0) }
  30% { transform: translateY(-5px) }
  60% { transform: translateY(-10px) }
  100% { transform: translateY(0) }
}


/* kumo00~05 フェードインしてからフワフワ */

/* kumo00画面外にいる状態 */
.fadein {
	opacity : 0;/* 不可視 */
	transform : translate(50px, 100px);/* 基本　50px70px 移動元位置margin分だけプラス*/
	transition : all 800ms;
	}

/* kumo00画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;/* 可視 */
	transform : translate(0, 0);
	}

/* kumo00画面内に入ってからkumo class付与でフワフワ transformバッティングのため */
.fadein.scrollin.kumo01{
	padding: 0;
	margin: 30px 0 0 0;
	
  	animation: float 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}

/* kumo01画面外にいる状態 */
.fadein02 {
	opacity : 0;
	transform : translate(-50px, 160px);/* 移動元位置margin分だけプラス　100+60px*/
	transition : all 800ms;
	}


/* kumo01画面内に入った状態 */
.fadein02.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 60px 0 0px 20px;
	}

/* kumo01画面内に入ってからkumo付与でフワフワ */
.fadein02.scrollin.kumo02{
	padding: 0;
	margin: 60px 0 0px 20px;
	
  	animation: float02 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}



.tel{
	padding: 0px;
	margin: -180px 0 0 130px;
	
	
}

.tel:hover{
	opacity : 0.7;
	transform : translate(3px, 8px);
	transition : all 300ms;
	}


.mail{
	padding: 0px;
	margin: 0px 0 0 130px;
	
}

.mail:hover{
	opacity : 0.7;
	transform : translate(3px, 8px);
	transition : all 300ms;
	}



/* kumo02画面外にいる状態 */
.fadein03 {
	opacity : 0;
	transform : translate(50px, 180px);
	transition : all 800ms;
	}

/* kumo02画面内に入った状態 */
.fadein03.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 130px 0 0 0;
	}

/* kumo02画面内に入ってからkumo付与でフワフワ */
.fadein03.scrollin.kumo03{
	padding: 0;
	margin: 130px 0 0 0;
	
  	animation: float 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}



/* kumo03画面外にいる状態 */
.fadein04 {
	opacity : 0;
	transform : translate(-50px, 170px);
	transition : all 800ms;
	}

/* kumo03画面内に入った状態 */
.fadein04.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 70px 0px 0 -10px;
	}

/* kumo03画面内に入ってからkumo付与でフワフワ */
.fadein04.scrollin.kumo04{
	padding: 0;
	margin: 70px 0px 0 -10px;
	
  	animation: float02 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}



/* kumo04画面外にいる状態 */
.fadein05 {
	opacity : 0;
	transform : translate(50px, 180px);
	transition : all 800ms;
	}

/* kumo04画面内に入った状態 */
.fadein05.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 80px 0 0 0;
	}

/* kumo04画面内に入ってからkumo付与でフワフワ */
.fadein02.scrollin.kumo05{
	padding: 0;
	margin: 80px 0 0 0;
	
  	animation: float 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}



/* kumo05画面外にいる状態 */
.fadein06 {
	opacity : 0;
	transform : translate(-80px, 150px);
	transition : all 800ms;
	}

/* kumo05画面内に入った状態 */
.fadein06.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 50px 0 0 -20px;
	}

/* kumo05画面内に入ってからkumo付与でフワフワ */
.fadein06.scrollin.kumo06{
	padding: 0;
	margin: 50px 0 0 -20px;
	
  	animation: float02 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}


.fadein img{ 
	width: 807px;
	height: auto;
	
}


.fadein02 img{
	width: 807px;
	height: auto;
	
}


.tel img{
	width: 449px;
	height: auto;
	
}
.mail img{
	width: 449px;
	height: auto;
	
}
.fadein03 img{
	width: 795px;
	height: auto;
}

.fadein04 img{
	width: 874px;
	height: auto;
}


.fadein05 img{ 
	width: 811px;
	height: auto;
}

.fadein06 img{ 
	width: 867px;
	height: auto;
}


/* アンカーポイント */

#kumo00{
	position: absolute;
	top:-150px;	
}

#kumo01{
	position: absolute;
	top:250px;
	
}

#kumo02{
	position: absolute;
	top:690px;
	
}

#kumo03{
	position: absolute;
	top:1200px;
	
}

#kumo04{
	position: absolute;
	top:1900px;
	
}

#kumo05{
	position: absolute;
	top:2350px;
	
}

/* アンカーポイント 終わり*/


/* ページトップへのネコ */

#page_top {
 	position: fixed;
 	right: 50px;
	bottom: -500px;/* ネコが画面から隠れる高さ */
  	border-radius: 50%;
	z-index: 9997;/* headerを常に一番上に */
}
/* nekotop.jsを適用 */

#page_top a{
  position: relative;
  display: block;
  width: 150px;/* ネコイラストサイズ */
  height: 174px;/* ネコイラスト高さ */
  text-decoration: none;
  animation: float 4s linear infinite;/* floatアニメ　適用 */
  transform-origin: 50% 50%;/* floatアニメ　揺れ幅 */
}

/* ページトップへのネコ 終わり*/

/* contact */

#contact{
	position: absolute;
	display: block;
	margin: 150px 0px 0px 0px;
	bottom: 1550px;
	left: 50%;
	margin-left: -300px; /* width(画像の幅)の半分の値 */
	transition: 0.5s;/* アニメ　小さくなる時間 */

}

#contact img{
	width: 627px;
	height: auto;
}

#contact:hover{
 	 transform: scale(0.9);/* アニメ　小さくなるsize */
	opacity : 0.7;

	}



/* footer */
footer{
	margin-top: auto;
}


/* slider設定 */
.slider_box{
	position: absolute;/*絶対位置*/
    bottom: 580px; /*下に固定*/
	width: 100%;
}

.slider{
    margin-left: -20px;/*左の空きが消せなくて調整*/
    width: 100%;
	opacity: 0;/*画像が全て表示されるまで読み込まれない*/
    transition: 3s;/*3秒かけてアニメーションする*/
}


.slider img{
    height: 220px;
    width: auto;
}


.slick-initialized{
    opacity: 1 /*読み込み完了後に付与される「slick-initialized」に「opacity: 1」を設定*/
}

/* map設定 */

.map_moji{
	position: absolute;/*絶対位置*/
    bottom: 540px; /*下に固定*/
	left:20%;
	z-index: 2;/* map_mojiを地図の上に */
	
	opacity : 0;
	transform : translate(-300px, 0px);
	transition : all 800ms;
}

.map_moji img{
	width: 275px;
	height: auto;
}

/* mapねこフェードイン */
.map_moji.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}


.map{
	position: absolute;/*絶対位置*/
    bottom: 340px; /*下に固定*/
	width: 100%;
}



/* facebook blog instagram のらくろプロジェクトへ*/

.bottom_rogo {
	justify-content: center;
	text-align: center;
	list-style-type:none;
	margin:0px;
	padding: 0px;
	position: absolute;
	bottom: 1090px;	
	left:50%;
	margin-left: -450px; /* width(画像の幅)の半分の値 */
	
/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 800ms;

	}

/* 画面内に入った状態 */
.bottom_rogo.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}


.bottom_rogo li{	
	float: left;; /* inline要素を使わないで横並びに */
	transition: 0.6s;/* アニメ　時間 */
}

.bottom_rogo li:hover{
  transform: scale(0.8);/* アニメ　小さくなるsize */
  opacity : 0.7;
}


.bottom_rogo img{
	height: 220px;/* 画像サイズ */
    width: auto;	
}


.for_norakuropj{
	justify-content: center;
	text-align: center;
	list-style-type:none;
	margin:0px;
	padding: 0px;
	position: absolute;
	bottom: 900px;	
	left:50%;
	margin-left: -450px; /* width(画像の幅)の半分の値 */
	transition: 0.5s;/* アニメ　小さくなる時間 */
	
/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 300px);
	transition-duration : 800ms;
	}

/* 画面内に入った状態 */
.for_norakuropj.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}


.for_norakuropj img{
	height: 162.5px;/* 画像サイズ */
    width: auto;	
}

.for_norakuropj:hover{
 	transform: scale(0.9);/* アニメ　小さくなるsize */
	opacity : 0.7;

	}

/*えのないえほん　バナー　ここから*/
.enonaiehon{
	justify-content: center;
	text-align: center;
	list-style-type:none;
	margin:0px;
	padding: 0px;
	position: absolute;
	bottom: 1300px;	
	left:50%;
	margin-left: -450px; /* width(画像の幅)の半分の値 */
	transition: 0.5s;/* アニメ　小さくなる時間 */
	
/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 300px);
	transition-duration : 800ms;

	}

/* 画面内に入った状態 */
.enonaiehon.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}


.enonaiehon img{
	height: 205px;/* 画像サイズ */
    width: auto;	
}


.enonaiehon:hover{
 	transform: scale(0.9);/* アニメ　小さくなるsize */
	opacity : 0.7;
	}
/*えのないえほん　バナー　ここまで*/
/* facebook blog instagram ここまで*/


/* 越谷犬猫クリニックロゴ　ここから*/


.koshigaya_clinic_750px{
	display: none !important;/*表示させません*/
} 


.koshigaya_clinic{
	display: block !important;/*表示させます*/
	position: absolute;/*絶対位置*/
    bottom: 180px; /*下に固定*/
	left:50%;
	margin-left: -360px; /* width(画像の幅)の半分の値 */
/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 80px);
	transition : all 800ms;

	}

/* 画面内に入った状態 */
.koshigaya_clinic.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

/* 越谷犬猫クリニックロゴ　ここまで*/

/* footer bottom */
.kusa{
	position: absolute;/*絶対位置*/
    bottom: 40px; /*下に固定*/
	height:119px;
	width: 100%;
	background-size:2000px auto;
	background-repeat: repeat-x;
	background-image: url("images/kusa.png");
	padding: 0;
	margin: 0;	
}

.since{
	position: absolute;/*絶対位置*/
	background-color: #93B721;
	width: 100%;
	height: 40px;
	padding: 0;
	margin: 0;
	bottom: 0; /*下に固定*/
	text-align: center;
}

.since p{
	margin-top: 10px;
	width:auto;
	position:relative;
	color: #FFF;
	letter-spacing: 0.3em;
	font-size:12px;
	font-family: 'Quicksand', sans-serif;
}



/* -- responsive ------------------------------------------- */

/* 1000pixel start */
@media screen and ( max-width: 1000px ) {

	#wrapper{
		padding-bottom: 5400px;/*←footerの高さ*/
		
	}

/* -- header等 追加項目 --------------------------------------------------------- */
	
.bar{
	display: flex;
	width:100%;
	height:auto;
	top:0px;
	left:0px;
	background: #FFFFFF;
}
	
	
.bar h1 {
	
	margin-left: 30px;
	padding: 0px;
	transition: 0.6s;/* アニメ　時間 */
}

.bar p {
	margin-right: 50px;/*　ハンバーガーボタン位置調整　真ん中に　*/
	margin-top: 15px;
	padding: 10px 0px 10px 0px;
	transition: 0.6s;/* アニメ　時間 */
}
	
.bar p img{
	 width:250px; 
	height:auto;
	}

	
/*　ハンバーガーボタン　*/
.hamburger {
  top   : 30px;/*　ハンバーガーボタン位置調整　真ん中に　*/

}
	
	
	
.top_neko01{
	position: absolute;
	top:70px;
	left: 50%;
	margin-left: -550px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */
}

.top_neko02{
	position: absolute;
	margin: 0 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: 400px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */
}



.top_neko03{
	position: absolute;
	margin: 340px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: -530px; /* width(画像の幅)の半分の値 */
	
}



.top_neko04{
	position: absolute;
	margin: 200px 0 0 0px;
	top:10px;
	left: 50%;
	margin-left: -450px; /* width(画像の幅)の半分の値 */
	
}



.top_neko05{
	position: absolute;
	margin: 370px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: 390px; /* width(画像の幅)の半分の値 */
	

}



.top_neko06{
	position: absolute;
	margin: 0 0 0 0px;
	top:45px;
	left: 50%;
	margin-left:-100px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */
}



.top_neko07{
	position: absolute;
	margin: 200px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: -300px; /* width(画像の幅)の半分の値 */
	
}


.top_neko08{
	position: absolute;
	margin: 0px 0 0 0px;
	top:270px;
	left: 50%;
	margin-left: 170px; /* width(画像の幅)の半分の値 */
	
}
	
.top_neko09{
	position: absolute;
	margin: 0px 0 0 0px;
	top:195px;
	left: 50%;
	margin-left: 300px; /* width(画像の幅)の半分の値 */
}

.top_neko01 img{
	width: 113px;
	height: auto;
	margin-left: 180px;
}

.top_neko02 img{
	width: 138px;
	height: auto;
	margin-left: -180px;
}

.top_neko03 img{ 
	width: 86px;
	height: auto;
	margin-left: 150px;
	margin-top: 50px;
}

.top_neko04 img{
	width: 100px;
	height: auto;
}

.top_neko05 img{
	width: 99px;
	height: auto;
	margin-left: -120px;
	margin-top: 50px;
}

.top_neko06 img{
	width: 205px;
	height: auto;
}

.top_neko07 img{
	width: 102px;
	height: auto;
}

.top_neko08 img{
	width: 124px;
	height: auto;
}
	
.top_neko09 img{
	width: 180px;
	height: auto;
}

	
	
/* top 猫上から落ちて来る   ここから______________________________________________________________*/

	
.top_title{
	position: absolute;
	margin: 0px 0 0 0px;
	top:175px;
	left: 50%;
	margin-left: -370px; /* width(画像の幅)の半分の値 */
	
	/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 3s 1 forwards;/* 3秒後に2秒かけて落ちて来る猫 */
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/
	}
	
	
.top_nekodai01{
	position: absolute;
	margin: 220px 0 0 0px;
	top:420px;
	left: 50%;
	margin-left: -420px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */
	
	
	
/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 3s 1 forwards;
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}

.top_nekodai02{
	position: absolute;
	margin: 220px 0 0 0px;
	top:420px;
	left: 50%;
	margin-left: 180px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */
	
	
/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 3s 1 forwards;
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}
	
.noraneko{
	position: absolute;
	margin:0px 0 0 0px;
	top:625px;
	left: 50%;
	margin-left: -175px; /* width(画像の幅)の半分の値 */
	z-index: 9991;/* headerを常に一番上に */

	}

.nekodai_fukidashi{
	position: absolute;
	margin: 0px 0 0 0px;
	top:750px;
	left: 50%;
	margin-left: -200px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */
	}

	
.nekodai_fukidashi img{
	width: 400px;
	height: auto;
}

.top_nekodai01 img{
	width: 260px;
	height: auto;
}

.top_nekodai02 img{
	width: 254px;
	height: auto;
}

.top_title img{
	width: 720px;
	height: auto;
	
}



/* -- header等 追加項目 ここまで---------------------------------------------------- */
	

.haikei{
		display:none;
	}
	
 /* nagare list */
#nagare{
	display: flex;
	justify-content: center;
	
}

#nagare ul{
	margin:0px;
	padding: 0px;
	position: absolute;
	top:1250px;
	
	background-image: url("images/nagare_base.png"); /* 背景画像指定 */
	width: 760px;/* 背景画像はめ込みsize指定 */
	height: auto;
	background-repeat:no-repeat;
	background-size: 760px;
	}

/* 画面内に入った状態 */
#nagare ul.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 0 0 0 0;
	}


#nagare ul li{
	display: block;
	margin: 120px 0px 0px 0px;
	padding-bottom: 40px;
	
	transition: 0.7s;/* アニメ　大きくなる時間 */
   -webkit-transition: 0.7s;
}

#nagare ul li:hover{
  transform: scale(1.5);/* アニメ　大きくなるsize */
}

#nagare01 img{
		width: 100%;
		height: auto;
	}

#nagare02 img{
		width: 100%;
		height: auto;
	}


#nagare03 img{
		width: 100%;
		height: auto;
	}


#nagare04 img{
		width: 100%;
		height: auto;
	}


#nagare05 img{
		width: 100%;
		height: auto;
	}


#nagare06 img{
		width: 100%;
		height: auto;
	}
	

 /* kumo */
.kumo{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -350px; /* width(画像の幅)の半分の値 */
		top:1600px;/* step01 対象の高さ位置 */
}


.tel{
	padding: 0px;
	margin: -140px 0 0 130px;		
}

.mail{
	padding: 0px;
	margin: 0px 0 0 130px;	
}

	
	
.fadein img{ 
	width: 95%;
	height: auto;
	margin-left: 0Px;
}


.fadein02 img{
	width: 95%;
	height: auto;
	margin-left: 0Px;
}


	
.tel img{
	width: 350px;
	height: auto;
	margin-top: 10px;
	
}
.mail img{
	width: 350px;
	height: auto;
}
.fadein03 img{
	width: 95%;
	height: auto;
	margin-left: 0Px;
}

.fadein04 img{
	width: 95%;
	height: auto;
	margin-left: 0Px;
}


.fadein05 img{ 
	width: 95%;
	height: auto;
	margin-left: 0Px;
}

.fadein06 img{ 
	width: 95%;
	height: auto;
	margin-left:0Px;
}
	
	
/* アンカーポイント */

#kumo00{
	position: absolute;
	top:-150px;	
}

#kumo01{
	position: absolute;
	top:230px;
	
}

#kumo02{
	position: absolute;
	top:650px;
	
}

#kumo03{
	position: absolute;
	top:1050px;
	
}

#kumo04{
	position: absolute;
	top:1650px;
	
}

#kumo05{
	position: absolute;
	top:2000px;
	
}

/* アンカーポイント 終わり*/

	
	
/* contact */

#contact{
	bottom: 1500px;/* contactの高さ位置 */
	margin-left: -270px; /* width(画像の幅)の半分の値 */
}

#contact img{
	width: 500px;
	height: auto;
}
	
	
/* facebook blog instagram */
	
.bottom_rogo {

	bottom: 1120px;	
	left:50%;
	margin-left: -355px; /* width(画像の幅)の半分の値 */
	}

.bottom_rogo li{	
	float: left;/* inline要素を使わないで横並びに */
	transition: 0.6s;/* アニメ　時間 */
}

.bottom_rogo img{
	height: 162px;/* 画像サイズ */
    width: auto;
}
	
	
	
.for_norakuropj{
	bottom: 920px;	
	left:50%;
	margin-left: -350px; /* width(画像の幅)の半分の値 */
	
/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 100px);
	transition-duration : 800ms;
	}

/* 画面内に入った状態 */
.for_norakuropj.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}



.for_norakuropj img{
	height: auto;/* 画像サイズ */
    width: 700px;	
}
	
.for_norakuropj:hover{
 	transform: scale(0.9);/* アニメ　小さくなるsize */
	opacity : 0.7;

	}
	

/*えのないえほん　バナー　ここから	*/
		
.enonaiehon{
	bottom: 1300px;	
	left:50%;
	margin-left: -350px; /* width(画像の幅)の半分の値 */
	
/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 100px);
	transition-duration : 800ms;
	}

/* 画面内に入った状態 */
.enonaiehon.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}



.enonaiehon img{
	height: auto;/* 画像サイズ */
    width: 700px;	
}
	
.enonaiehon:hover{
 	transform: scale(0.9);/* アニメ　小さくなるsize */
	opacity : 0.7;

	}
/*えのないえほん　バナー　ここまで	*/



/* facebook blog instagram ここまで*/
	
#page_top {
 	right: 10px;/* ネコイラスト表示位置 */
	margin-bottom: -130px;/* ネコイラスト下からの表示位置 */
	
}

#page_top a img{
	width: 120px;/* ネコイラストサイズ */
 	height: auto;/* ネコイラスト高さ */
}

}
/* 1000pixel end ____________________________________________________________________________*/

/* 750pixel start ____________________________________________________________________________*/

@media screen and ( max-width: 750px ) {
	
#wrapper {
	padding-bottom: 5200px;/*←footerの高さ*/
   
}

header {
	height:95px;/*←headerの高さ 白を消すため*/	
}
	

main{
	}

div#thanks h1 {
	font-size: 130%;
    
}
	
.bar{
	height: 80px;
		
	}

.bar h1 {
	margin: auto;/*ロゴを真ん中に*/
	
}
	


.bar h1 img{
    
	width: 260px;
	height:auto;
	
}

.bar p {
	display: none !important;/*表示させません*/
}
		

/*　ハンバーガーボタン　*/
.hamburger {
  top   : 10px;/*　ハンバーガーボタン位置調整　真ん中に　*/

}

/* header ここまで*/
	

/* main */

.top{
	height: 720px;
}

.topshita a{
	position: absolute; /* 絶対位置 */
	left:50%; /* 真ん中 */
	top:680px;/* 上からの位置 */
	margin-left: -743px; /* width(画像の幅)の半分の値 */
}
	
.top_neko01{
	position: absolute;
	top:60px;
	left: 50%;
	margin-left: -350px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */

/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
/*	
① animation-name	キーフレームアニメーション名を指定。
② animation-duration	1回のアニメーションにかかる時間を指定。
③ animation-timing-function	アニメーションの変化率を指定。他に ease、linear、ease-out、ease-in-out やオリジナルの変化率を指定できる。
④ animation-delay	アニメーションの開始をいくら遅らせるかを指定。
⑤ animation-iteration-count	アニメーションを何回繰り返すかを指定。
⑥ animation-direction	繰り返し時、往復処理をするかを指定。
*/
}

@keyframes fadeIn { /*「fadeIn」と名前をそろえ全てのnekoに適応*/
    0% {opacity: 0} /*アニメーション開始時は完全に透過*/
	70% {opacity: 0} 
    100% {opacity: 1} /*アニメーション終了時は透過しない*/
}

/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
	70% {opacity: 0} 
    100% {opacity: 1}
}

.top_neko02{
	position: absolute;
	margin: 0 0 0 0px;
	top:60px;
	left: 50%;
	margin-left: 260px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */

	/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}



.top_neko03{
	position: absolute;
	margin: 0px 0 0 0px;
	top:570px;
	left: 50%;
	margin-left: -40px; /* width(画像の幅)の半分の値 */
	z-index: 9994;/* 犬をタイトルの上にキラキラの上へ */
	
/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}



.top_neko04{
	position: absolute;
	margin: 0px 0 0 0px;
	top:620px;
	left: 50%;
	margin-left: -30px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}



.top_neko05{
	position: absolute;
	margin: 350px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: 450px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}



.top_neko06{
	position: absolute;
	margin: 0 0 0 0px;
	top:45px;
	left: 50%;
	margin-left:-80px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */
/*フェードインアニメ*/
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}



.top_neko07{
	position: absolute;
	margin: 0px 0 0 0px;
	top:650px;
	left: 50%;
	margin-left: -150px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}


.top_neko08{
	position: absolute;
	margin: 180px 0 0 0px;
	top:0px;
	left: 50%;
	margin-left: 95px; /* width(画像の幅)の半分の値 */
	
/*フェードインアニメ*/
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
	
.top_neko09{
	position: absolute;
	margin: 0px 0 0 0px;
	top:160px;
	left: 50%;
	margin-left: -185px; /* width(画像の幅)の半分の値 */
	z-index: 9991;/* headerを常に一番上に */
	
/*フェードインアニメ*/
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}



.top_neko01 img{
	width: 90px;
	height: auto;
}

.top_neko02 img{
	width: 110px;
	height: auto;
}

.top_neko03 img{ 
	width: 65px;
	height: auto;
}

.top_neko04 img{
	width: 90px;
	height: auto;
	
}

.top_neko05 img{
	width: 140px;
	height: auto;
}

.top_neko06 img{
	width: 140px;
	height: auto;
}

.top_neko07 img{
	width: 60px;
	height: auto;
}

.top_neko08 img{
	width: 70px;
	height: auto;
}

.top_neko09 img{
	width: 130px;
	height: auto;
}

/* top 猫上から落ちて来る   ここから______________________________________________________________*/

.top_nekodai01{
	position: absolute;
	margin: 0px 0 0 0px;
	top:320px;
	left: 50%;
	margin-left: -210px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */
	
/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 3s 1 forwards;
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}

.top_nekodai02{
	position: absolute;
	margin: 0px 0 0 0px;
	top:310px;
	left: 50%;
	margin-left: 40px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */
	
	
/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 3s 1 forwards;
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}

.top_title{
	position: absolute;
	margin: 0px 0 0 0px;
	top:137px;
	left: 50%;
	margin-left: -190px; /* width(画像の幅)の半分の値 */
	
	/* タイトル・猫上から落ちてくる */
	 animation: boyo2 2s linear 3s 1 forwards;/* 3秒後に2秒かけて落ちて来る猫 */
	 transform-origin: 50% 100%;
	 opacity: 0;/* 不透明 */
	 animation-fill-mode: forwards; /*これで値を保持*/

	}

	
.nekodai_fukidashi{
	position: absolute;
	margin: 0px 0 0 0px;
	top:485px;
	left: 50%;
	margin-left: -130px; /* width(画像の幅)の半分の値 */
	z-index: 9990;/* headerを常に一番上に */

	}
	
.noraneko{
	position: absolute;
	margin: 0px 0 0 0px;
	top:420px;
	left: 50%;
	margin-left: -105px; /* width(画像の幅)の半分の値 */
	z-index: 9991;/* headerを常に一番上に */

	}



.top_nekodai01 img{
	width: 155px;
	height: auto;
}

.top_nekodai02 img{
	width: 180px;
	height: auto;
}

.top_title img{
	width: 380px;
	height: auto;
}
	
	
.nekodai_fukidashi img{
	width: 270px;
	height: auto;
}

.noraneko img{
	width: 210px;
	height: auto;
}
	

/* タイトル・猫上から落ちてくる */
	@keyframes boyo2 {
  0% { 
	  opacity: 1;/* 不透明 */
	  transform:translateY(-500px) 
		}
  30% { transform:translateY(0) }
  50% { transform:translateY(-150px)scaleY(0.8) }
  75% { transform:translateY(0px) }
  85% { transform:translateY(-60px)}
  95% { transform:translateY(-45px) }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0); }
	}

/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes boyo2 {
  0% { 
	  opacity: 1;/* 不透明 */
	  transform:translateY(-500px) 
		}
  30% { transform:translateY(0) }
  50% { transform:translateY(-150px)scaleY(0.8) }
  75% { transform:translateY(0px) }
  85% { transform:translateY(-60px)}
  95% { transform:translateY(-45px) }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }

	}


/* top 猫上から落ちて来る   ここまで_________________________________________________________________*/
	

	

/* 猫歩くアニメ　*/
#animation_container {
	
	position: absolute;
	left: 50%;
	top:740px;
	max-width: 50%;
	margin-left: -320px; /* width(画像の幅)の半分の値 */
	
	}

	.haikei{
		display:none;
	}
	
/* nagare list */
#nagare{
	
}

#nagare ul{
	margin:0px;
	padding: 0px;
	position: absolute;
	left:0px;
	top:1080px;
	
	background-image: url("images/nagare_base.png"); /* 背景画像指定 */
	width: 100%;/* 背景画像はめ込みsize指定 */
	height: auto;
	background-repeat:no-repeat;
	background-size: 100%;
	
	/* フェードインアニメ */
	opacity : 1;
	transform : translate(0px, 00px);
	transition : all 500ms;
	
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	}



#nagare ul li{
	display: block;
	margin: 55px 0px 0px 0px;
	padding-bottom: 48px;
	
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

#nagare ul li:hover{
  transform: scale(1.5);/* アニメ　大きくなるsize */
}

#nagare01 img{
		width: 100%;
		height: auto;
	}

#nagare02 img{
		width: 100%;
		height: auto;
	}


#nagare03 img{
		width: 100%;
		height: auto;
	}


#nagare04 img{
		width: 100%;
		height: auto;
	}


#nagare05 img{
		width: 100%;
		height: auto;
	}


#nagare06 img{
		width: 100%;
		height: auto;
	}
	
	
	
	
 /* kumo */
.kumo{
	margin-left: -420px; /* width(画像の幅)の半分の値 */
	top:1250px;
}

	
/* kumo00~05 フェードインしてからフワフワ */

/* kumo00画面外にいる状態 */
.fadein {
	opacity : 0;/* 不可視 */
	transform : translate(0px, 50px);/* 基本　50px70px 移動元位置margin分だけプラス*/
	transition : all 500ms;
	}

/* kumo00画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;/* 可視 */
	transform : translate(0, 0);
	}

/* kumo00画面内に入ってからkumo class付与でフワフワ transformバッティングのため */
.fadein.scrollin.kumo01{
	padding: 0;
	margin: 30px 0 0 0;
	
  	animation: float 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}

/* kumo01画面外にいる状態 */
.fadein02 {
	opacity : 0;
	transform : translate(0px, 50px);/* 移動元位置縦スライドに変更*/
	transition : all 500ms;
	margin: 0px 0px 0px 20px;
	}


/* kumo01画面内に入った状態 */
.fadein02.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 0px 0px 0px 20px;
	}

/* kumo01画面内に入ってからkumo付与でフワフワ */
.fadein02.scrollin.kumo02{
	padding: 0;
	margin: 0px 0px 0px 20px;
	
  	animation: float02 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}



.tel{
	padding: 0px;
	margin: -180px 0 0 130px;
	
	
}

.tel:hover{
	opacity : 0.7;
	transform : translate(3px, 8px);
	transition : all 300ms;
	}


.mail{
	padding: 0px;
	margin: 0px 0 0 130px;
	
}

.mail:hover{
	opacity : 0.7;
	transform : translate(3px, 8px);
	transition : all 300ms;
	}



/* kumo02画面外にいる状態 */
.fadein03 {
	opacity : 0;
	transform : translate(0px, 50px);
	transition : all 500ms;
	}

/* kumo02画面内に入った状態 */
.fadein03.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 0px 0 0 0;
	}

/* kumo02画面内に入ってからkumo付与でフワフワ */
.fadein03.scrollin.kumo03{
	padding: 0;
	margin: 0px 0 0 0;
	
  	animation: float 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}



/* kumo03画面外にいる状態 */
.fadein04 {
	opacity : 0;
	transform : translate(0px, 50px);
	transition : all 500ms;
	}

/* kumo03画面内に入った状態 */
.fadein04.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 0px 0px 0 0px;
	}

/* kumo03画面内に入ってからkumo付与でフワフワ */
.fadein04.scrollin.kumo04{
	padding: 0;
	margin: 0px 0px 0 0px;
	
  	animation: float02 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}



/* kumo04画面外にいる状態 */
.fadein05 {
	opacity : 0;
	transform : translate(0px, 50px);
	transition : all 500ms;
	}

/* kumo04画面内に入った状態 */
.fadein05.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 0px 0 0 0;
	}

/* kumo04画面内に入ってからkumo付与でフワフワ */
.fadein02.scrollin.kumo05{
	padding: 0;
	margin: 0px 0 0 0;
	
  	animation: float 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}



/* kumo05画面外にいる状態 */
.fadein06 {
	opacity : 0;
	transform : translate(0px, 50px);
	transition : all 800ms;
	margin: 0px 0 0 -20px;
	}

/* kumo05画面内に入った状態 */
.fadein06.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin: 0px 0 0 -20px;
	}

/* kumo05画面内に入ってからkumo付与でフワフワ */
.fadein06.scrollin.kumo06{
	padding: 0;
	margin: 0px 0 0 -20px;
	
  	animation: float02 3s linear infinite;/* fuwafuwa */
  	transform-origin: 50% 50% ;
	
}
	
	
.fadein img{ 
	width: 57%;
	height: auto;
	margin-left: 250Px;
}


.fadein02 img{
	width: 57%;
	height: auto;
	margin-left: 230Px;
}


.tel img{
	width: 250px;
	height: auto;
	margin-top: 70px;
	margin-left: 120px;

	
}
.mail img{
	width: 250px;
	height: auto;
	margin-left: 120px;


}
.fadein03 img{
	width: 57%;
	height: auto;
	margin-left: 240Px;
	margin-top: 50px;
}	

.fadein04 img{
	width: 57%;
	height: auto;
	margin-left: 255Px;
}


.fadein05 img{ 
	width: 57%;
	height: auto;
	margin-left: 250Px;
}

.fadein06 img{ 
	width: 57%;
	height: auto;
	margin-left: 255Px;
}
	

/* アンカーポイント */

#kumo00{
	position: absolute;
	top:-100px;	
}

#kumo01{
	position: absolute;
	top:70px;
	
}

#kumo02{
	position: absolute;
	top:360px;
	
}

#kumo03{
	position: absolute;
	top:650px;
	
}

#kumo04{
	position: absolute;
	top:1200px;
	
}

#kumo05{
	position: absolute;
	top:1500px;
	
}

/* アンカーポイント 終わり*/
	
	
/* お問い合わせ　ここから */

#contact{
	bottom: 2080px;
	left: 50%;
	margin-left: -190px; /* width(画像の幅)の半分の値 */

}

#contact img{
	width: 90%;/* 画像サイズ */
	height: auto;
}


/* お問い合わせ　ここまで */
	
	
/* facebook blog instagram */

.bottom_rogo {
	bottom: 1350px;	
	margin-left: -130px;/* センターに配置調整 */
	
	/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 80px);
	transition : all 500ms;

	}

/* 画面内に入った状態 */
.bottom_rogo.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

.bottom_rogo li{	
	float: none; /* inline要素を使わないで横並びに */
	transition: 0.6s;/* アニメ　時間 */
}

.bottom_rogo img{
	height: 180px;/* 画像サイズ */
    width: auto;
	margin-top: -40px;/* 間隔の配置調整 猫ちょっと重ねる*/
}
	
	
.for_norakuropj{
	bottom: 1000px;	
	left:50%;
	margin-left: -120px; /* width(画像の幅)の半分の値 */

/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 80px);
	transition-duration : 500ms;
	}

/* 画面内に入った状態 */
.for_norakuropj.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}


.for_norakuropj img{
	height: 300px;/* 画像サイズ */
    width: auto;	
}
	
/*えのないえほん　バナーここから	*/
		
.enonaiehon{
	bottom: 1780px;	
	left:50%;
	margin-left: -115px; /* width(画像の幅)の半分の値 */
	
/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 100px);
	transition-duration : 800ms;
	}

/* 画面内に入った状態 */
.nonaiehon.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}



.enonaiehon img{
	height: auto;/* 画像サイズ */
    width: 230px;	
}
	
/*えのないえほん　バナーここまで	*/

/* facebook blog instagram ここまで*/
	
	
/* slider設定 */
.slider_box{
	position: absolute;/*絶対位置*/
    bottom: 690px; /*下に固定*/
	width: 100%;
}

.slider img{
    height: 220px;
    width: auto;
}
	
/* map設定 */

.map_moji{
    bottom: 650px; /*下に固定*/
	left: 40%;
}
	
.map_moji img{
	width: 200px;
	height: auto;
}

.map{
    bottom:450px; /*下に固定*/
}


/* map設定 ここまで*/
	

/* 越谷犬猫クリニックロゴ　ここから*/
		
.koshigaya_clinic_750px{
	display: block !important;/*表示させます*/
	position: absolute;/*絶対位置*/
    bottom: 150px; /*下に固定*/
	left:50%;
	margin-left: -170px; /* width(画像の幅)の半分の値 */
} 

.koshigaya_clinic{
	display: none !important;/*表示させません*/
	}
	
/* 越谷犬猫クリニックロゴ　ここまで*/
	
.kusa{
	position: absolute;/*絶対位置*/
    bottom: 59px; /*下に固定*/
	height:86px;
	width: 100%;
	background-size:570px auto;
	background-repeat: repeat-x;
	background-image: url("images/kusa02.png");
	padding: 0;
	margin: 0;	
}
	
.since{
	height: 60px;
	padding: 0;
	margin: 0;
	
}
	
#page_top {
 	right: -50px;/* ネコイラスト表示位置 */
	margin-bottom: -160px;/* ネコイラスト下からの表示位置 */
	
}

#page_top a img{
	width: 80px;/* ネコイラストサイズ */
 	height: auto;/* ネコイラスト高さ */
}
}

/* 750pixel end */

/* -- responsive ここまで------------------------------------------------------------ */