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

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

#wrapper {
	display: flex;
	flex-direction: column;
 	min-height: 100vh;
	position: relative;/*←相対位置*/
    padding-bottom: 10900px;/*←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;/* アニメ　時間 */
	z-index: 9997;/* headerを常に一番上に */
}


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


.bar p {
   
	margin-right: 200px;
	margin-top:10px;
	transition: 0.6s;/* アニメ　時間 */
	z-index: 9997;/* headerを常に一番上に */
}

.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: 800px;
	top:0px;
	left:0px;
}

.topshita{

}

/* トップ下のオレンジライン*/
.top_sita_line{
	background-color:#FFA200;
	width: 100%;
	height: 30.5px;
	margin-top: -27.25px;
	
}

.top_inu01{
	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」と名前をそろえ全てのinuに適応*/
    0% {opacity: 0} /*アニメーション開始時は完全に透過*/
	70% {opacity: 0} 
    100% {opacity: 1} /*アニメーション終了時は透過しない*/
}

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

.top_inu02{
	position: absolute;
	margin: 0 0 0 0px;
	top:60px;
	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_inu03{
	position: absolute;
	margin: 0px 0 0 0px;
	top:90px;
	left: 50%;
	margin-left: 300px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* 犬をメニューバーの上に、ハンバーガーの下に */
	
/*フェードインアニメ*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}



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



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



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



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


.top_inu01 img{
	width: 173px;
	height: auto;
}

.top_inu02 img{
	width: 143.5px;
	height: auto;
}

.top_inu03 img{ 
	width: 340.5px;
	height: auto;
}

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

.top_inu05 img{
	width: 207.5px;
	height: auto;
}

.top_inu06 img{
	width: 176px;
	height: auto;
}

.top_inu07 img{
	width: 149.5px;
	height: auto;
}



/* top タイトル「のらくろぷろじぇくと」animate   ここから______________________________________________________________*/

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

	}

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

	}



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

	}




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

.top_fukidashi img{
	width: 541px;
	height: auto;
}


.top_title img{
	width: 850px;
	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);
  }

	}



/* タイトル・下から飛び上がる */
	@keyframes boyo3 {
  0% { 
	  opacity: 1;/* 不透明 */
	  transform:translateY(400px) 
		}
  30% { transform:translateY(0) }
  50% { transform:translateY(-130px)scaleY(0.8) }
  75% { transform:translateY(0px) }
  85% { transform:translateY(-60px)}
  95% { transform:translateY(-45px) }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }

	}

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

	}


/*  タイトル「のらくろぷろじぇくと」animate ここまで_________________________________________________________________*/
	

/* 私たちの活動　構成員　　ここから_________________________________________________________________________________*/


.katsudou_daiji{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -455px; /* width(画像の幅)の半分の値 */
	top:1050px;
	z-index: 9990;/* haikeiより上に */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 150px);
	transition : all 800ms;
}

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

.projectkouseiin{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -380px; /* width(画像の幅)の半分の値 */
	top:1400px;
	z-index: 9990;/* haikeiより上に */
}


.kouseiin_inu{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -381px; /* width(画像の幅)の半分の値 */
	top:1708px;
	z-index: 9990;/* haikeiより上に */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 800ms;
}

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


.volunteer_bosyu{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -430px; /* width(画像の幅)の半分の値 */
	top:1930px;
	z-index: 9990;/* haikeiより上に */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 150px);
	transition : all 800ms;
}

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


.katsudou_daiji img{
	width: 910px;
	height: auto;
}

.projectkouseiin img{
	width: 760px;
	height: auto;
}

.kouseiin_inu img{
	width: 763px;
	height: auto;
}

.volunteer_bosyu img{
	width: 866px;
	height: auto;
}

/* 私たちの活動　構成員　　ここまで_________________________________________________________________________________*/



/* 背景画像　草木　　ここから_______________________________________________________________________________________*/


.haikei{
	position: absolute;/* 画像下に余白を出さないよう */
	width: 100%;
	height: 15000px;
	
	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"), 
	url("images/haikei09.png"), 
	url("images/haikei10.png"), 
	url("images/haikei11.png"), 
	url("images/haikei12.png"), 
	url("images/haikei13.png"), 
	url("images/haikei14.png"), 
	url("images/haikei15.png"),
	url("images/haikei16.png"), 
	url("images/haikei17.png"), 
	url("images/haikei18.png"), 
	url("images/haikei19.png");
	
	


  background-position:
    left -10px top 270px, /* 1枚目の背景画像の表示位置 */
	right -20px top 270px, /* 2枚目の背景画像の表示位置 */
    left -25px top 1400px,/* 3枚目の背景画像の表示位置 */
    right -0px top 1900px,/* 4枚目の背景画像の表示位置 */
	left -10px top 2500px, /* 5枚目の背景画像の表示位置 */
	right -10px top 3000px,/* 6枚目の背景画像の表示位置 */
	left -30px top 3500px,/* 7枚目の背景画像の表示位置 */
	right -10px top 4000px,/* 8枚目の背景画像の表示位置 */
	left -10px top 4500px,/* 9枚目の背景画像の表示位置 */
	right -10px top 5000px,/* 10枚目の背景画像の表示位置 */
	left -10px top 5500px,/* 11枚目の背景画像の表示位置 */
	right -10px top 6000px,/* 12枚目の背景画像の表示位置 */
	left -30px top 6500px,/* 13枚目の背景画像の表示位置 */
	right -10px top 7000px,/* 14枚目の背景画像の表示位置 */
	left -10px top 7500px,/* 15枚目の背景画像の表示位置 */
	right -10px top 8000px,/* 16枚目の背景画像の表示位置 */
	left -30px top 8500px,/* 17枚目の背景画像の表示位置 */
	right -10px top 9150px,/* 18枚目の背景画像の表示位置 */
	left -10px top 9150px;/* 19枚目の背景画像の表示位置 */
	
	

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

  background-size:
    300px, /* 01背景画像のサイズ */
	280px,/* 02背景画像のサイズ */
	250px,/* 03背景画像のサイズ */
	300px,/* 04背景画像のサイズ */
	250px,/* 05背景画像のサイズ */
	280px, /* 06背景画像のサイズ */
	300px ,/* 07背景画像のサイズ */
	250px ,/* 08背景画像のサイズ */
	250px ,/* 09背景画像のサイズ */
	250px ,/* 10背景画像のサイズ */
	250px ,/* 11背景画像のサイズ */
	250px ,/* 12背景画像のサイズ */
	330px ,/* 13背景画像のサイズ */
	250px ,/* 14背景画像のサイズ */
	250px ,/* 15背景画像のサイズ */
	250px ,/* 16背景画像のサイズ */
	300px ,/* 17背景画像のサイズ */
	250px ,/* 18背景画像のサイズ */
	250px ;/* 19背景画像のサイズ */
}


 /* 私たちの活動　保護のながれ　katsudou nagare list ________________________________________________________*/

#nagare{
	display: flex;
	justify-content: center;
	
	
}

#nagare_sitaji{
	display: flex;
	justify-content: center;
	position: absolute;
	top:2250px;

	left:50%;/* 画面中央に */
	margin-left: -435px; /* width(画像の幅)の半分の値からリストとのバランスのため少しずらしてあります*/
	
	background-image: url("images/hogo_nagare.png"); /* 背景画像指定 */
	width: 910px;/* 背景画像はめ込みsize指定 */
	height: 487px;
	background-repeat:no-repeat;
	background-size: 100%;	

	}

#nagare ul{
	display: flex;
	flex-wrap: wrap; /* リストが折り返し表示できるように */
	justify-content: center;
	text-align: center;
	list-style-type:none;
	position: absolute;
	top:2450px;
	width: 920px;/* 画像はめ込みsize指定  リスト幅*/

	
/* フェードインアニメ */
	opacity : 0;
	transform : translate(0px, 100px);
	transition : all 600ms;
	}

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


#nagare ul li{
	display: block;
	margin:-10px 20px 0px 20px;/*リストの位置調整しています*/
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

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

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

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


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


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


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


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

#nagare07 img{
		width: 514px;
		height: auto;
	}

 /* 譲渡のながれ　jyouto nagare list ________________________________________________________*/

#jyouto_nagare{
	display: flex;
	justify-content: center;
	
	
}

#jyouto_nagare_sitaji{
	display: flex;
	justify-content: center;
	position: absolute;
	top:5900px;

	left:50%;/* 画面中央に */
	margin-left: -435px; /* width(画像の幅)の半分の値からリストとのバランスのため少しずらしてあります*/
	
	background-image: url("images/jyouto_nagare.png"); /* 背景画像指定 */
	width: 910px;/* 背景画像はめ込みsize指定 */
	height: 517px;
	background-repeat:no-repeat;
	background-size: 100%;	

	}

#jyouto_nagare ul{
	display: flex;
	flex-wrap: wrap; /* リストが折り返し表示できるように */
	justify-content: center;
	text-align: center;
	list-style-type:none;
	position: absolute;
	top:6102px;
	width: 1012px;/* 画像はめ込みsize指定  リスト幅*/

	
/* フェードインアニメ */
	opacity : 0;
	transform : translate(0px, 100px);
	transition : all 600ms;
	}

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


#jyouto_nagare ul li{
	display: block;
	margin:-7px 22px 0px 20px;/*リストの位置調整しています*/
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

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

#jt_nagare01 img{
		width: 259px;
		height: auto;
	}

#jt_nagare02 img{
		width: 259px;
		height: auto;
	}


#jt_nagare03 img{
		width: 259px;
		height: auto;
	}


#jt_nagare04 img{
		width: 259px;
		height: auto;
	}


#jt_nagare05 img{
		width: 259px;
		height: auto;
	}


#jt_nagare06 img{
		width: 259px;
		height: auto;
	}

#jt_nagare07 img{
		width: 515px;
		height: auto;
	}


 /* kumo 保護のながれ　step01~06のブロック全体位置*/
.kumo{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -438px; /* width(画像の幅)の半分の値 */
	top:2700px;
}

 /* kumo_jt 譲渡のながれ　step01~06のブロック全体位置*/
.kumo_jt{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -438px; /* width(画像の幅)の半分の値 */
	top:3700px;
}



/* 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);/*右から現れる */
	transition : all 800ms;
	}

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

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

/* kumo01画面外にいる状態 */
.fadein02 {
	opacity : 0;
	transform : translate(-50px, 100px);/* 左から現れる*/
	transition : all 800ms;
	}


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

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



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

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

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



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

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

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

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

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

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



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

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

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



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

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

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



/* じょうとのながれ　アニメ　kumo00~05 フェードインしてからフワフワ */

/* kumo00画面外にいる状態 */
.fadein_jt {
	opacity : 0;/* 不可視 */
	transform : translate(50px, 100px);/*右から現れる */
	transition : all 800ms;
	}

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

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

/* kumo01画面外にいる状態 */
.fadein02_jt {
	opacity : 0;
	transform : translate(-50px, 100px);/* 左から現れる*/
	transition : all 800ms;
	}


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

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



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

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

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



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

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

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



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

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

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


/* ほごのながれ　step01~06 各画像サイズ */
.fadein img{ 
	width: 876px;
	height: auto;	
}


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


.fadein03 img{
	width: 876px;
	height: auto;
}

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

/* 動物病院　再度健康状態チェック */
.fadein04-2 img{
	width: 720px;
	height: auto;
	margin-left: 80px;
	margin-top: 20px;
}

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

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


/* じょうとのながれ　step01~06 各画像サイズ */

.fadein_jt img{ 
	width: 881px;
	height: auto;
	
}


.fadein02_jt img{
	width: 855px;
	height: auto;
	
}


.fadein03_jt img{
	width: 872px;
	height: auto;
}

.fadein04_jt img{
	width: 871px;
	height: auto;
}


.fadein05_jt img{ 
	width: 846px;
	height: auto;
}




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

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

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

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

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

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

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

/* アンカーポイント じょうとのながれ文字*/
#kumo06{
	position: absolute;
	top:3050px;
	
}


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

#kumo01_jt{
	position: absolute;
	top:450px;
	
}

#kumo02_jt{
	position: absolute;
	top:1000px;
	
}

#kumo03_jt{
	position: absolute;
	top:1600px;
	
}

#kumo04_jt{
	position: absolute;
	top:2680px;
	
}

#kumo05_jt{
	position: absolute;
	top:-700px;
	
}

/* アンカーポイント ほごのながれ文字*/
#hogonagare_jt{
	position: absolute;
	top:-4350px;
	
}


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


/* ページトップへのイヌ */

#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: 219.5px;/* イヌイラストサイズ */
  height: 179.5px;/* イヌイラスト高さ */
  text-decoration: none;
  animation: float 4s linear infinite;/* floatアニメ　適用 */
  transform-origin: 60% 60%;/* floatアニメ　揺れ幅 */
}

/* ページトップへのイヌ 終わり*/

/* contact */

#contact{
	position: absolute;
	display: block;
	margin: 150px 0px 0px 0px;
	bottom: 1600px;
	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_inu{
	position: absolute;/*絶対位置*/
    bottom: 540px; /*下に固定*/
	left:20%;
	z-index: 2;/* map_mojiを地図の上に */
	
	opacity : 0;
	transform : translate(-300px, 0px);
	transition : all 800ms;
}

.map_inu img{
	width: 369.5px;
	height: auto;
}

/* mapイヌフェードイン */
.map_inu.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: 1100px;	
	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: 207.5px;/* 画像サイズ */
    width: auto;	
}



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

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


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

.for_tamachanpj: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: 1320px;	
	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: 9500px;/*←footerの高さ*/
		
	}

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


.bar h1 img{
    
	width: 370px;
	height:auto;
	
}
	
.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下地　*/
	
.top{
	background-color:#FFBF00;
	width: 100%;
	height: 800px;
	top:0px;
	left:0px;
}

/* トップ下のオレンジライン*/
.top_sita_line{
	background-color:#FFA200;
	width: 100%;
	height: 30.5px;
	margin-top: -27.25px;
	
}

/* -- タイトルinu 追加項目 --------------------------------------------------------- */
	
.top_inu01{
	position: absolute;
	top:90px;
	left: 50%;
	margin-left: -395px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* headerを常に一番上に */
}


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



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



.top_inu04{ /* 白ポワ */
	position: absolute;
	margin: 0px 0 0 0px;
	top:360px;
	left: 50%;
	margin-left: -80px; /* width(画像の幅)の半分の値 */
	
}



.top_inu05{ /* ブルドッグ　画面外 */
	position: absolute;
	margin: 350px 0 0 0px;
	top:70px;
	left: 50%;
	margin-left: 800px; /* width(画像の幅)の半分の値 */

}



.top_inu06{ /*キラキラコーギー */
	position: absolute;
	margin: 0 0 0 0px;
	top:400px;
	left: 50%;
	margin-left:-350px; /* width(画像の幅)の半分の値 */

}



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

}


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

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

.top_inu03 img{ 
	width: 280px;
	height: auto;
}

.top_inu04 img{/* 白ポワ */
	width: 130px;
	height: auto;
}

.top_inu05 img{/* ブルドッグ　画面外 */
	width: 180px;
	height: auto;
}

.top_inu06 img{/*キラキラコーギー */
	width: 130px;
	height: auto;
}

.top_inu07 img{/* ダックス */
	width: 110px;
	height: auto;
}


		
	
/* top タイトル「のらくろぷろじぇくと」animate   ここから______________________________________________________________*/

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

	}

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

	}


.top_title{
	position: absolute;
	margin: 0px 0 0 0px;
	top:250px;
	left: 50%;
	margin-left: -350px; /* width(画像の幅)の半分の値 */

	}
	
	
.top_watashitachi img{
	width: 700px;
	height: auto;
}

.top_fukidashi img{
	width: 430px;
	height: auto;
}


.top_title img{
	width: 700px;
	height: auto;
}
	
/*  タイトル「のらくろぷろじぇくと」animate ここまで_________________________________________________________________*/


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

/* 私たちの活動　構成員　　ここから_______________________________________________________________________________________*/


.katsudou_daiji{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -350px; /* width(画像の幅)の半分の値 */
	top:1050px;
	z-index: 9990;/* haikeiより上に */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 80px);
	transition : all 500ms;
}

.projectkouseiin{
	margin-left: -320px; /* width(画像の幅)の半分の値 */
	top:1350px;
}


.kouseiin_inu{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -320px; /* width(画像の幅)の半分の値 */
	top:1637px;
	z-index: 9990;/* haikeiより上に */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 80px);
	transition : all 500ms;
}

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


.katsudou_daiji img{
	width: 95%;
	height: auto;
}

.projectkouseiin img{
	width: 90%;
	height: auto;
}

.kouseiin_inu img{
	width: 92%;
	height: auto;
}


	
.volunteer_bosyu{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -305px; /* width(画像の幅)の半分の値 */
	top:1850px;
	z-index: 9990;/* haikeiより上に */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 150px);
	transition : all 800ms;
}

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


.volunteer_bosyu img{
	width:  90%;
	height: auto;
}


/* 私たちの活動　構成員　　ここまで_________________________________________________________________*/
	
/* 背景　_______________________________________________________________________________________*/
	
.haikei{
		display:none;
	}
	
/* 背景　_______________________________________________________________________________________*/
	


/* 私たちの活動　保護のながれ　katsudou nagare list ________________________________________________*/
	
#nagare{
	display: flex;
	justify-content: center;	
}

#nagare_sitaji{
	display: flex;
	justify-content: center;
	position: absolute;
	top:2100px;

	left:50%;/* 画面中央に */
	margin-left: -317px; /* width(画像の幅)の半分の値からリストとのバランスのため少しずらしてあります*/
	
	background-image: url("images/hogo_nagare.png"); /* 背景画像指定 */
	width: 850px;/* 背景画像はめ込みsize指定 */
	height: 457px;
	background-repeat:no-repeat;
	background-size: 85%;	

	}

#nagare ul{
	display: flex;
	flex-wrap: wrap; /* リストが折り返し表示できるように */
	justify-content: center;
	text-align: center;
	list-style-type:none;
	position: absolute;
	top:2265px;
	width: 800px;/* 画像はめ込みsize指定  リスト幅*/
	margin:-10px 0px 0px 10px;/*リスト全体の位置調整しています*/

	
/* フェードインアニメ */
	opacity : 0;
	transform : translate(0px, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
#nagare ul.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin:-10px 0px 0px 10px;/*リスト全体の位置調整しています*/
	}


#nagare ul li{
	display: block;
	margin:-8px 0px 0px 35px;/*リスト個別の位置調整しています*/
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

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

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

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


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


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


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


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

#nagare07 img{
		width: 450px;
		height: auto;
	}

 /* 譲渡のながれ　jyouto nagare list ________________________________________________________*/

#jyouto_nagare{
	display: flex;
	justify-content: center;
	
	
}

#jyouto_nagare_sitaji{
	display: flex;
	justify-content: center;
	position: absolute;
	top:5300px;

	left:50%;/* 画面中央に */
	margin-left: -337px; /* width(画像の幅)の半分の値からリストとのバランスのため少しずらしてあります*/
	
	background-image: url("images/jyouto_nagare.png"); /* 背景画像指定 */
	width: 850px;/* 背景画像はめ込みsize指定 */
	height: 517px;
	background-repeat:no-repeat;
	background-size: 85%;	

	}

#jyouto_nagare ul{
	display: flex;
	flex-wrap: wrap; /* リストが折り返し表示できるように */
	justify-content: center;
	text-align: center;
	list-style-type:none;
	position: absolute;
	top:5470px;
	width:800px;/* 画像はめ込みsize指定  リスト幅*/
	margin:-5px 0px 0px -35px;/*リスト全体の位置調整しています*/

	
/* フェードインアニメ */
	opacity : 0;
	transform : translate(0px, 80px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
#jyouto_nagare ul.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	margin:-5px 0px 0px -35px;/*リスト全体の位置調整しています*/
	}


#jyouto_nagare ul li{
	display: block;
	margin:-8px 0px 0px 35px;/*リスト個別の位置調整しています*/
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

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

#jt_nagare01 img{
		width: 205px;
		height: auto;
	}

#jt_nagare02 img{
		width: 205px;
		height: auto;
	}


#jt_nagare03 img{
		width: 205px;
		height: auto;
	}


#jt_nagare04 img{
		width: 205px;
		height: auto;
	}


#jt_nagare05 img{
		width: 205px;
		height: auto;
	}


#jt_nagare06 img{
		width: 205px;
		height: auto;
	}

#jt_nagare07 img{
		width: 450px;
		height: auto;
	}


 /* kumo 保護のながれ　step01~06のブロック全体位置*/
.kumo{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -370px; /* width(画像の幅)の半分の値 */
	top:2480px;
}

 /* kumo_jt 譲渡のながれ　step01~06のブロック全体位置*/
.kumo_jt{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -370px; /* width(画像の幅)の半分の値 */
	top:3250px;
}


	
	
/* ほごのながれ　アニメ　kumo00~05 フェードインしてからフワフワ */

/* kumo00画面外にいる状態 */
.fadein {
	opacity : 0;/* 不可視 */
	transform : translate(0px, 50px);/*右から現れる */
	transition : all 500ms;
	}

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

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

/* kumo01画面外にいる状態 */
.fadein02 {
	opacity : 0;
	transform : translate(0px, 50px);/* 左から現れる*/
	transition : all 500ms;
	}


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

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



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

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

/* kumo02画面内に入ってからkumo付与でフワフワ */
.fadein03.scrollin.kumo03{
	padding: 0;
	margin: 0 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: 0 0 0 0;
	}

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

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

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

/* kumo03画面内に入ってからkumo付与でフワフワ */
.fadein04-2.scrollin.kumo04{
	padding: 0;
	margin: 0 0 0 0;
	
  	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: 0 0 0 0;
	}

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



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

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

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



/* じょうとのながれ　アニメ　kumo00~05 フェードインしてからフワフワ */

/* kumo00画面外にいる状態 */
.fadein_jt {
	opacity : 0;/* 不可視 */
	transform : translate(0px, 50px);/*右から現れる */
	transition : all 500ms;
	}

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

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

/* kumo01画面外にいる状態 */
.fadein02_jt {
	opacity : 0;
	transform : translate(0px, 50px);/* 左から現れる*/
	transition : all 500ms;
	}


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

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



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

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

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



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

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

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



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

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

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


/* ほごのながれ　step01~06 各画像サイズ */
.fadein img{ 
	width: 95%;
	height: auto;	
}


.fadein02 img{
	width: 95%;
	height: auto;	
}


.fadein03 img{
	width: 95%;
	height: auto;
}

.fadein04 img{
	width: 95%;
	height: auto;
}

/* 動物病院　再度健康状態チェック */
.fadein04-2 img{
	width: 80%;
	height: auto;
	margin-left: 50px;
}


.fadein05 img{ 
	width: 95%;
	height: auto;
}

.fadein06 img{ 
	width: 95%;
	height: auto;
}


/* じょうとのながれ　step01~06 各画像サイズ */

.fadein_jt img{ 
	width: 95%;
	height: auto;
	
}


.fadein02_jt img{
	width: 95%;
	height: auto;
	
}


.fadein03_jt img{
	width: 95%;
	height: auto;
}

.fadein04_jt img{
	width: 95%;
	height: auto;
}


.fadein05_jt img{ 
	width: 95%;
	height: auto;
}

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

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

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

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

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

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

#kumo05{
	position: absolute;
	top:2350px;
	
}
/* じょうとのながれ　文字*/
#kumo06{
	position: absolute;
	top:2950px;
	
}


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

#kumo01_jt{
	position: absolute;
	top:450px;
	
}

#kumo02_jt{
	position: absolute;
	top:1000px;
	
}

#kumo03_jt{
	position: absolute;
	top:1550px;
	
}

#kumo04_jt{
	position: absolute;
	top:2550px;
	
}

#kumo05_jt{
	position: absolute;
	top:-600px;
	
}
/* ほごのながれ　文字*/
#hogonagare_jt{
	position: absolute;
	top:-4200px;
	
}

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

#contact{
	bottom: 1400px;/* contactの高さ位置 */
	margin-left: -225px; /* width(画像の幅)の半分の値 */
}
	
#contact img{
	width: 427px;
	height: auto;
}
	
	
/* facebook blog instagram */
	
.bottom_rogo {

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

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

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

.for_tamachanpj{
	bottom: 850px;	
	left:50%;
	margin-left: -350px; /* width(画像の幅)の半分の値 */
	
/* フワッとアニメ */	
	opacity : 0;
	transform : translate(0, 100px);
	transition-duration : 800ms;
	}

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


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

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

	}
	
/*えのないえほん　バナー　ここから	*/
		
.enonaiehon{
	bottom: 1200px;	
	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 ここまで*/
	
/* map設定 */

.map_inu img{
	width: 269.5px;
	height: auto;
}
	
#page_top {
 	right: -20px;/* inuイラスト表示位置 */
	margin-bottom: -130px;/* inuイラスト下からの表示位置 */
	
}

#page_top a img{
	width: 160px;/* inuイラストサイズ */
 	height: auto;/* inuイラスト高さ */
}
}
/* 1000pixel end ____________________________________________________________________________*/

/* 750pixel start ____________________________________________________________________________*/

@media screen and ( max-width: 750px ) {
	
#wrapper {
	padding-bottom: 8000px;/*←footerの高さ*/
   
}
	
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   : 15px;/*　ハンバーガーボタン位置調整　真ん中に　*/

}

/* header ここまで*/

/* main */

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


	
.top_inu01{
	position: absolute;
	top:60px;
	left: 50%;
	margin-left: -190px; /* width(画像の幅)の半分の値 */
	z-index: 9997;/* headerを常に一番上に */
}


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

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



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



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



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



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



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


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

.top_inu02 img{
	width: 80px;
	height: auto;
}

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

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

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

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

.top_inu07 img{
	width: 80px;
	height: auto;
}



/* top タイトル「のらくろぷろじぇくと」animate   ここから______________________________________________________________*/

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

	}

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

	}



.top_title{
	position: absolute;
	margin: 0px 0 0 0px;
	top:210px;
	left: 50%;
	margin-left: -150px; /* width(画像の幅)の半分の値 */

	}




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

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


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

	
/* タイトル・下から飛び上がる */
@keyframes boyo3 {
  0% { 
	  opacity: 1;/* 不透明 */
	  transform:translateY(300px) 
		}
  30% { transform:translateY(0) }
  50% { transform:translateY(-100px)scaleY(0.8) }
  75% { transform:translateY(0px) }
  85% { transform:translateY(-60px)}
  95% { transform:translateY(-45px) }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }

	}

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

	}

/*  タイトル「のらくろぷろじぇくと」animate ここまで_________________________________________________________________*/
	
	
/* 私たちの活動　構成員　　ここから_________________________________________________________________________________*/


.katsudou_daiji{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -170px; /* width(画像の幅)の半分の値 */
	top:770px;
	z-index: 9990;/* haikeiより上に */
}

.projectkouseiin{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -170px; /* width(画像の幅)の半分の値 */
	top:1100px;
	z-index: 9990;/* haikeiより上に */
}


.kouseiin_inu{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -170px; /* width(画像の幅)の半分の値 */
	top:1239px;
	z-index: 9990;/* haikeiより上に */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 80px);
	transition : all 500ms;
}

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


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

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

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

.volunteer_bosyu{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -170px; /* width(画像の幅)の半分の値 */
	top:1350px;
	z-index: 9990;/* haikeiより上に */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 150px);
	transition : all 800ms;
}

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


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


/* 私たちの活動　構成員　　ここまで_______________________________________________________________________________________*/


/* 私たちの活動　保護のながれ　katsudou nagare list ________________________________________________________*/

#nagare{
	display: flex;
	justify-content: center;		
}

#nagare_sitaji{
	display: flex;
	justify-content: center;
	position: absolute;
	top:1480px;

	left:50%;/* 画面中央に */
	margin-left: -170px; /* width(画像の幅)の半分の値からリストとのバランスのため少しずらしてあります*/
	
	background-image: url("images/hogo_nagare_sumaho.png"); /* 背景画像指定 */
	width: 340px;/* 背景画像はめ込みsize指定 */
	height: 600px;
	background-repeat:no-repeat;
	background-size: 100%;	

	}

#nagare ul{
	display: flex;
	flex-wrap: wrap; /* リストが折り返し表示できるように */
	justify-content: center;
	text-align: center;
	list-style-type:none;
	position: absolute;	
	left:50%;/* 画面中央に */
	top:1615px;
	width: 300px;/* 画像はめ込みsize指定  リスト幅*/

	
/* フェードインアニメ */
	opacity : 0;
	transform : translate(0px, 80px);
	transition : all 500ms;
	margin:0px 0px 0px -175px;/*リストの位置調整しています*/
	
	}

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


#nagare ul li{
	display: block;
	margin:-10px 25px 0px 0px;/*リストの位置調整しています*/
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

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

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

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


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


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


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


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

#nagare07 img{
		width: 300px;
		height: auto;
	    margin-top:20px;
	}

 /* 譲渡のながれ　jyouto nagare list ________________________________________________________*/

#jyouto_nagare{
	display: flex;
	justify-content: center;
	
}

#jyouto_nagare_sitaji{
	display: flex;
	justify-content: center;
	position: absolute;
	top:3960px;

	left:50%;/* 画面中央に */
	margin-left: -170px; /* width(画像の幅)の半分の値からリストとのバランスのため少しずらしてあります*/
	
	background-image: url("images/jyouto_nagare_sma.png"); /* 背景画像指定 */
	width: 340px;/* 背景画像はめ込みsize指定 */
	height: 600px;
	background-repeat:no-repeat;
	background-size: 100%;	

	}

#jyouto_nagare ul{
	display: flex;
	flex-wrap: wrap; /* リストが折り返し表示できるように */
	justify-content: center;
	text-align: center;
	list-style-type:none;
	position: absolute;
	left:50%;/* 画面中央に */
	top:4070px;
	width: 340px;/* 画像はめ込みsize指定  リスト幅*/

	
/* フェードインアニメ */
	opacity : 0;
	transform : translate(0px, 200px);
	transition : all 800ms;
	margin:0px 0px 0px -195px;/*リストの位置調整しています*/
	}

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


#jyouto_nagare ul li{
	display: block;
	margin:-3px 25px 0px 0px;/*リストの位置調整しています*/
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

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

#jt_nagare01 img{
		width: 250px;
		height: auto;
	}

#jt_nagare02 img{
		width: 250px;
		height: auto;
	}


#jt_nagare03 img{
		width: 250px;
		height: auto;
	}


#jt_nagare04 img{
		width: 250px;
		height: auto;
	}


#jt_nagare05 img{
		width: 250px;
		height: auto;
	}


#jt_nagare06 img{
		width: 250px;
		height: auto;
	}

#jt_nagare07 img{
		width: 300px;
		height: auto;
	    margin-top:-20px;
	}


 /* kumo 保護のながれ　step01~06のブロック全体位置*/
.kumo{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -175px; /* width(画像の幅)の半分の値 */
	top:2080px;
}

 /* kumo_jt 譲渡のながれ　step01~06のブロック全体位置*/
.kumo_jt{
	position: absolute;
	display: flex;
	flex-direction: column;
	left:50%;
	margin-left: -175px; /* width(画像の幅)の半分の値 */
	top:2440px;
}



/* 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(0px, 50px);/*右から現れる */
	transition : all 500ms;
	}

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

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

/* kumo01画面外にいる状態 */
.fadein02 {
	opacity : 0;
	transform : translate(0px, 50px);/* 左から現れる*/
	transition : all 500ms;
	}


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

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



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

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

/* kumo02画面内に入ってからkumo付与でフワフワ */
.fadein03.scrollin.kumo03{
	padding: 0;
	margin: 0 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: 0 0 0 0;
	}

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

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

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

/* kumo03画面内に入ってからkumo付与でフワフワ */
.fadein04-2.scrollin.kumo04{
	padding: 0;
	margin: 0 0 0 0;
	
  	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: 0 0 0 0;
	}

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



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

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

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



/* じょうとのながれ　アニメ　kumo00~05 フェードインしてからフワフワ */

/* kumo00画面外にいる状態 */
.fadein_jt {
	opacity : 0;/* 不可視 */
	transform : translate(0px, 50px);/*右から現れる */
	transition : all 500ms;
	}

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

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

/* kumo01画面外にいる状態 */
.fadein02_jt {
	opacity : 0;
	transform : translate(0px, 50px);/* 左から現れる*/
	transition : all 500ms;
	}


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

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



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

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

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



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

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

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



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

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

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


/* ほごのながれ　step01~06 各画像サイズ */
.fadein img{ 
	width: 350px;
	height: auto;	
}


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


.fadein03 img{
	width: 350px;
	height: auto;
}

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

/* 動物病院　再度健康状態チェック */
.fadein04-2 img{
	width: 340px;
	height: auto;
	margin-left: 3px;
}


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

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


/* じょうとのながれ　step01~05 各画像サイズ */

.fadein_jt img{ 
	width: 350px;
	height: auto;
	
}


.fadein02_jt img{
	width: 350px;
	height: auto;
	
}


.fadein03_jt img{
	width: 350px;
	height: auto;
}

.fadein04_jt img{
	width: 350px;
	height: auto;
}


.fadein05_jt img{ 
	width: 350px;
	height: auto;
}
	

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

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

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

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

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

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

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

/* アンカーポイント　じょうとのながれ */
#kumo06{ 
	position: absolute;
	top:1750px;
	
}


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

#kumo01_jt{
	position: absolute;
	top:200px;
	
}

#kumo02_jt{
	position: absolute;
	top:500px;
	
}

#kumo03_jt{
	position: absolute;
	top:850px;
	
}

#kumo04_jt{
	position: absolute;
	top:1450px;
	
}

/* アンカーポイント　ほごのながれ */
#hogonagare_jt{
	position: absolute;
	top:-3200px;
}


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

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

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


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

.bottom_rogo {
	bottom: 1350px;	
	margin-left: -150px;/* センターに配置調整 */
	}

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

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

	}

.for_tamachanpj img{
	height: 330px;/* 画像サイズ */
    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_inu{
	position: absolute;/*絶対位置*/
    bottom: 650px; /*下に固定*/
	left:40%;
	z-index: 2;/* map_mojiを地図の上に */
	
	opacity : 0;
	transform : translate(-300px, 0px);
	transition : all 800ms;
}

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

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

/* 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: -80px;/* inuイラスト表示位置 */
	margin-bottom: -170px;/* inuイラスト下からの表示位置 */	
}

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

/* 750pixel end */

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