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

body {
	
	background: linear-gradient(180deg,#FFBF00 0%,#FFBF00 50%,#FFA200 50%,#FFA200 100%); /* 背景２色で上下を区切る */
	width: 100%;/* 子要素にflotを使っているので、背景を正しく表示するためwidth height 両要素の指定 */
	height: 3100px;

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

}


/* header */
header {	
	background-color:#FFFFFF;
	width:100%;
	height:130px;
}


.daiji{
	position: absolute;
	justify-content: center;
	top:5px;
	left:50%;
	margin-left: -250px; /* width(画像の幅)の半分の値 */
	z-index: 9998;/* headerを常に一番上に */
}

.daiji img{
	width: 630px;
	height: auto;
}

.line1{
	position: absolute;
	background-color:#FFA200; /* ヘッダー上のオレンジ */
	width: 100%;
	height: 30px;
}

.line2{
	position: absolute;
	background-color:#FFA200; /* ヘッダー下のオレンジ */
	width: 100%;
	height: 30px;
	top:100px;
}


/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 9999;/*　ハンバーガーボタンを常に一番上に　*/
  right : 13px;
  top   : 45px;/*　ハンバーガーボタン位置調整　真ん中に　*/
  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
*/




/* main */
main {
}

.center_line{
	position: absolute;
	background-color:#FFA200; /* 真ん中のオレンジ */
	width: 100%;
	height: 100px;
	top:320px;
}

.goto_norakuro{
	position: absolute;
	top:180px;
	left: 50%;
	margin-left: -494px; /* width(画像の幅)の半分の値 */
	
	/*フェードインアニメ*/
    animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s 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	繰り返し時、往復処理をするかを指定。
*/
	
    transition: 0.7s;/* アニメ　大きくなる時間 */	
}

@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}
}


.goto_tamacyan{
	position: absolute;
	top:180px;
	left: 50%;
	margin-left: 130px; /* width(画像の幅)の半分の値 */
	
	/*フェードインアニメ*/
    animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
	
	transition: 0.7s;/* アニメ　大きくなる時間 */
}

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

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

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

.sensei_inu img{
	width: 208.5px;
	height: auto;
}



.goto_norakuro:hover{
  transform: scale(1.3);/* アニメ　大きくなるsize */
}

.goto_tamacyan:hover{
  transform: scale(1.3);/* アニメ　大きくなるsize */
}


.scrool{
	position: absolute;
	top:700px;
	left: 50%;
	margin-left: -90px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
}

.scrool:hover{
  transform: scale(1.1);/* アニメ　大きくなるsize */
}

.scrool img{
	width: 189px;
	height: auto;
}


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

#scrool{
	position: absolute;
	top:1560px;	
}




/*下部部分の始まりーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


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

.sensei_inu_syou img{
	width: 250px;
	height: auto;
}



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

.furoshiki_daiji img{
	width: 650px;
	height: auto;
}


.furoshiki_gazou {
	position: absolute;
	top:1800px;
	left: 50%;
	margin-left: -600px; /* width(画像の幅)の半分の値 */
}

.furoshiki_gazou img{
	width: 450px;
	height: auto;
}


.moji_furoshiki {
	position: absolute;
	top:1820px;
	left: 50%;
	margin-left: -130px; /* width(画像の幅)の半分の値 */
    border-radius: 20px;
    border: 10px solid #FFBF00;
    background-color: #FFFFFF;
    width: 550px;
    height: 430px;
	padding: 35px;
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms;
}

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

.moji_furoshiki_box { /* テキストの回り込み用の画像　白で作成 */
	width: 140px;
	height: 150px;
	background-color: #FFFFFF;
	float:right;
  
	}
	

.moji_furoshiki_text {
    font-size: 17px;
	color: #CC6302;
	font-weight: bold;
	line-height:1.6;
	font-family: 'メイリオ', Meiryo,'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	overflow-wrap: break-all;
	}
	


.botan_syousai {
	position: absolute;
	top:2900px;
	left: 50%;
	margin-left: -200px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
}

.botan_syousai:hover{
  transform: scale(1.2);/* アニメ　大きくなるsize */
}

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

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

.jyosyu_inu img{
	width: 320px;
	height: auto;
}



.maru01{
	position: absolute;
	top:2380px;
	left: 50%;
	margin-left: -550px; /* width(画像の幅)の半分の値 */

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

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

.maru01 img{
	width: 320px;
	height: auto;
}

.maru02{
	position: absolute;
	top:2380px;
	left: 50%;
	margin-left: -200px; /* width(画像の幅)の半分の値 */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms 1600ms;
}

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

.maru02 img{
	width: 320px;
	height: auto;
}

.maru03{
	position: absolute;
	top:2380px;
	left: 50%;
	margin-left: 150px; /* width(画像の幅)の半分の値 */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms 2400ms;
}

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

.maru03 img{
	width: 320px;
	height: auto;
}



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

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

.sita_moji_line{
	position: absolute;
	top:2680px;
	background-color:#FFBF00; /* ヘッダー下のオレンジ */
	width: 100%;
	height: 170px;
}



.back{
	position: absolute;
	top:3000px;
	left: 50%;
	margin-left: -63px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
}

.back:hover{
  transform: scale(1.1);/* アニメ　大きくなるsize */
}
.back img{
	width: 127px;
	height: auto;
}


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

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

	
	
.center_line{
	top:290px;
}
	
.goto_norakuro{
	position: absolute;
	top:150px;
	left: 50%;
	margin-left: -390px; /* width(画像の幅)の半分の値 */
}


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

.sensei_inu{
	position: absolute;
	top:390px;
	left: 50%;
	margin-left: -110px; /* width(画像の幅)の半分の値 */
}

.goto_norakuro img{
	width: 350.5px;
	height: auto;
}

.goto_tamacyan img{
	width: 350.5px;
	height: auto;
}


.scrool{
	position: absolute;
	top:850px;
	left: 50%;
	margin-left: -90px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
}

.scrool img{
	width: 189px;
	height: auto;
}

	
/*下部部分の始まりーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/	


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

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



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

.furoshiki_daiji img{
	width: 600px;
	height: auto;
}


.furoshiki_gazou {
	position: absolute;
	top:1760px;
	left: 50%;
	margin-left: -380px; /* width(画像の幅)の半分の値 */
}

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


.moji_furoshiki {
	position: absolute;
	top:2270px;
	left: 50%;
	margin-left: -335px; /* width(画像の幅)の半分の値 */
    border-radius: 20px;
    border: 10px solid #FFBF00;
    background-color: #FFFFFF;
    width: 600px;
    height: 380px;
	padding: 35px;
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms;
}

/* 画面内に入った状態 */
.moji_furoshiki.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	
	}
	
.moji_furoshiki_box {
	 display:none; /* テキストの回り込み画像を表示しない */
  
	}
	


.botan_syousai {
	position: absolute;
	top:3230px;
	left: 50%;
	margin-left: -130px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
	z-index: 9998;/* headerを常に一番上に */
}

.botan_syousai:hover{
  transform: scale(1.2);/* アニメ　大きくなるsize */
}

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

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

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



.maru01{
	position: absolute;
	top:2770px;
	left: 50%;
	margin-left: -400px; /* width(画像の幅)の半分の値 */

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

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

.maru01 img{
	width: 270px;
	height: auto;
}

.maru02{
	position: absolute;
	top:2770px;
	left: 50%;
	margin-left: -150px; /* width(画像の幅)の半分の値 */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms 2s;
}

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

.maru02 img{
	width: 270px;
	height: auto;
}

.maru03{
	position: absolute;
	top:2770px;
	left: 50%;
	margin-left: 100px; /* width(画像の幅)の半分の値 */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms 3s;
}

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

.maru03 img{
	width: 270px;
	height: auto;
}



.sita_moji{
	position: absolute;
	top:3050px;
	left: 50%;
	margin-left: -310px; /* width(画像の幅)の半分の値 */
}

.sita_moji img{
	width: 620px;
	height: auto;
}

.sita_moji_line{
	position: absolute;
	top:3020px;
	background-color:#FFBF00; /* ヘッダー下のオレンジ */
	width: 100%;
	height: 180px;
}

.sita_moji_line02{
	position: absolute;
	top:3170px;
	background-color:#FFA200; /* ヘッダー下のオレンジ */
	width: 100%;
	height: 340px;
}


.back{
	position: absolute;
	top:3400px;
	left: 50%;
	margin-left: 40px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
}

.back:hover{
  transform: scale(1.1);/* アニメ　大きくなるsize */
}
.back img{
	width: 120px;
	height: auto;
}	
}


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

	
/* header */
	
header {	
	background-color:#FFFFFF;
	width:100%;
	height:70px;
}


.daiji{
	position: absolute;
	justify-content: center;
	top:20px;
	left:50%;
	margin-left: -135px; /* width(画像の幅)の半分の値 */
	z-index: 9998;/* headerを常に一番上に */
}
	
.daiji img{
		width: 270px;
	}


.line1{
	position: absolute;
	background-color:#FFA200; /* ヘッダー上のオレンジ */
	width: 100%;
	height: 15px;
}

.line2{
	position: absolute;
	background-color:#FFA200; /* ヘッダー下のオレンジ */
	width: 100%;
	height: 15px;
	top:65px;
}

/* header end*/
	

	
/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 9999;/*　ハンバーガーボタンを常に一番上に　*/
  right : 13px;
  top   : 20px;/*　ハンバーガーボタン位置調整　真ん中に　*/
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
	
	
	

	
.center_line{
	top:330px;
}
	
.goto_norakuro{
	position: absolute;
	top:100px;
	left: 50%;
	margin-left: -140px; /* width(画像の幅)の半分の値 */
}


.goto_tamacyan{
	position: absolute;
	top:390px;
	left: 50%;
	margin-left: -140px; /* width(画像の幅)の半分の値 */
}

.sensei_inu{
	position: absolute;
	top:600px;
	left: 50%;
	margin-left: -80px; /* width(画像の幅)の半分の値 */
}

.goto_norakuro img{
	width: 270px;
	height: auto;
}

.goto_tamacyan img{
	width: 270px;
	height: auto;
}
	
.sensei_inu img{
	width: 150px;
	height: auto;
}
	
	

.scrool{
	position: absolute;
	top:930px;
	left: 50%;
	margin-left: -65px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
}

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

	
/*下部部分の始まりーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/	


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

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



.furoshiki_daiji{
	position: absolute;
	top:1620px;
	left: 50%;
	margin-left: -170px; /* width(画像の幅)の半分の値 */
}

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


.furoshiki_gazou {
	position: absolute;
	top:1700px;
	left: 50%;
	margin-left: -160px; /* width(画像の幅)の半分の値 */
}

.furoshiki_gazou img{
	width: 330px;
	height: auto;
}


.moji_furoshiki {
	position: absolute;
	top:2340px;
	left: 50%;
	margin-left: -170px; /* width(画像の幅)の半分の値 */
    border-radius: 20px;
    border: 10px solid #FFBF00;
    background-color: #FFFFFF;
    width: 250px;
    height: 590px;
	padding: 35px;
	
	font-size: 17px;
	color: #CC6302;
	font-weight: bold;
	line-height:1.6;
	font-family: 'メイリオ', Meiryo,'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	overflow-wrap: break-all;
	float: left;
	
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms;
}

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

.moji_furoshiki_box {
	 display:none; /* テキストの回り込み画像を表示しない */
  
	}



.botan_syousai {
	position: absolute;
	top:4200px;
	left: 50%;
	margin-left: -150px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
}

.botan_syousai:hover{
  transform: scale(1.2);/* アニメ　大きくなるsize */
}

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

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

.jyosyu_inu img{
	width: 250px;
	height: auto;
}



.maru01{
	position: absolute;
	top:3130px;
	left: 50%;
	margin-left: -155px; /* width(画像の幅)の半分の値 */

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

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

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

.maru02{
	position: absolute;
	top:3430px;
	left: 50%;
	margin-left: -155px; /* width(画像の幅)の半分の値 */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms 1s;
}

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

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

.maru03{
	position: absolute;
	top:3730px;
	left: 50%;
	margin-left: -155px; /* width(画像の幅)の半分の値 */
	
	/* フワッとアニメ */
	opacity : 0;
	transform : translate(0, 200px);
	transition : all 1000ms 1s;
}

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

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



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

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

.sita_moji_line{
	position: absolute;
	top:4030px;
	background-color:#FFA200; /* ヘッダー下のオレンジ */
	width: 100%;
	height: 150px;
}

.sita_moji_line02{
	display: none;
}



.back{
	position: absolute;
	top:4580px;
	left: 50%;
	margin-left: -43px; /* width(画像の幅)の半分の値 */
	transition: 0.7s;/* アニメ　大きくなる時間 */	
}

.back:hover{
  transform: scale(1.1);/* アニメ　大きくなるsize */
}
.back img{
	width: 80px;
	height: auto;
	margin-bottom: 20px;
}	

}