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


/*--------------------------------------
背景設定
---------------------------------------*/

.bg_dinosaur01 {
  background-image: url("../img/bg_dinosaur.webp");
	width: 100%;
	background-size:100%;
	background-repeat: repeat-y;
}


.bg_dinosaur02 {
	background: #0E2414;
	width: 100%;
}





.bg_dinosaur04 {
  background-image: url("../img/bg_dinasour04.webp");
	width: 100%;
	background-size:100%;
	background-repeat: repeat-y;
}


.bg_dinosaur_green {
  background-image: url("../img/bg_green.jpg");
	background-repeat: repeat;
}

.bg_dinosaur_orange {
  background-image: url("../img/bg_orange.jpg");
	background-repeat: repeat;
}



.bg_pd {
  padding: 0 60px;}


@media screen and (max-width:768px) {
.bg_pd {
  padding: 0 10px;}
}




/*--------------------------------------
背景設定
---------------------------------------*/

.img_maru  {
	border: solid 3px #0E2414;
	border-radius: 20px;
	margin: 5px;
}

.img_maru img {
	padding: 10px;
	border-radius: 20px;
}


@media screen and (max-width:768px) {
.img_maru  {
	border: solid 2px #0E2414;
	border-radius: 10px;
	margin: 5px;
}

.img_maru img {
	padding: 3px;
	border-radius: 10px;
}
}





 /*--------------------------------------
スマホの時だけ改行
---------------------------------------*/
.sma{
    display: none;
}

@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}




/*--------------------------------------
youtube(比率変わらない表示)
---------------------------------------*/

.movie {
	width: 100%; /* 横幅変更 */
	padding: 0;
	box-sizing: border-box;
}

.movie-wrap {
	width: 100%;
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100% ;
}




 /*--------------------------------------
スライダーの中央を大きくするため
---------------------------------------*/




.slide img {
	transform: scale(.8);
	transition: transform .3s;
}
.slide.slick-center img {
	transform: scale(1);
}


 /*--------------------------------------
テキストボックス
---------------------------------------*/

.text-box {
	width: 80%;
	margin: 0 10%;
}



 /*--------------------------------------
空白
---------------------------------------*/


.pd_sp {
	padding-top:50px;/*空白 PC⇒50px SP⇒30px*/
}	

@media screen and (max-width:767px){
	
.pd_sp {
	padding-top:30px;/*空白 PC⇒50px SP⇒30px*/
	}	
	
	

}	


 /*--------------------------------------
ボタン
---------------------------------------*/


.btn_green {
	background-color: #40893E;
	color: #ffffff;
	border: solid 8px #ffffff;
	box-shadow: 2px 2px 4px #435630;
	width: 80%;
	margin: 0 10%;
	padding: 30px 0;
	border-radius: 90px;
	font-size: 150%;
}	


.btn_orange {
	background-color: #E57822;
	color: #ffffff;
	border: solid 8px #ffffff;
	box-shadow: 2px 2px 4px #9D3D22;
	width: 80%;
	margin: 0 10%;
	padding: 30px 0;
	border-radius: 90px;
	font-size: 150%;
}	





 /*--------------------------------------
足跡スクロールアニメーション
---------------------------------------*/

div[class*="walk"]{
  position:absolute;
  height: 50px;
  width: 50px;
  top:0;
  z-index: 100;
  background-repeat: no-repeat;
  -webkit-background-size: 50px 50px;
  background-size: 50px 50px;
  opacity:0;
  box-sizing: border-box;
  -webkit-animation: vanish 2s;
  animation: vanish 2s;
  background-position: center top;
}
div[class*="odd"]{
  background-image: url("../img/ashi01.png");
  right:50px;
}
div[class*="even"]{
  background-image: url("../img/ashi02.png");
  right:30px;
}
div[class*="under-odd"]{
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
div[class*="under-even"]{
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
@-webkit-keyframes vanish{
  0%{
    opacity: 0;
  }
  20%{
    opacity: .8;
  }
  60%{
    opacity: .8;
  }
  100%{
    opacity: 0;
  }
}
@keyframes vanish{
  0%{
    opacity: 0;
  }
  20%{
    opacity: .8;
  }
  60%{
    opacity: .8;
  }
  100%{
    opacity: 0;
  }
}


@media screen and (max-width:767px){

div[class*="walk"]{
  position:absolute;
  height: 30px;
  width: 30px;
  top:0;
  z-index: 100;
  background-repeat: no-repeat;
  -webkit-background-size: 30px 30px;
  background-size: 30px 30px;
  opacity:0;
  box-sizing: border-box;
  -webkit-animation: vanish 2s;
  animation: vanish 2s;
  background-position: center top;
}
div[class*="odd"]{
  background-image: url("../img/ashi01.png");
  right:20px;
}
div[class*="even"]{
  background-image: url("../img/ashi02.png");
  right:0px;
}
div[class*="under-odd"]{
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
div[class*="under-even"]{
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

	}