@charset "UTF-8";

/*　スライドショータイマー表示　*/
.vegas-timer-progress{
  display: none;
}

/* フェードイン（その場で） */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeInAnime{
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

/* フェードアップ（下から） */
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnime{
from {
  opacity: 0;
  transform: translateY(100px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}
    
 /* フェードダウン（上から） */
.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeDownAnime{
from {
  opacity: 0;
  transform: translateY(-100px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
} 

/* フェードレフト（左から） */
.fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeLeftAnime{
from {
  opacity: 0;
  transform: translateX(-100px);
}    
to {
  opacity: 1;
  transform: translateX(0);
}
}

/* フェードライト（右から） */
.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}    
@keyframes fadeRightAnime{
from {
  opacity: 0;
  transform: translateX(100px);
}
to {
  opacity: 1;
  transform: translateX(0);
}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/ 
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeLeftTopTrigger,
.fadeRightTrigger,
.fadeRightTopTrigger{
  opacity: 0;
}


/*ページトップリンクの形状*/
#page-top span{
  display: inline-block;
  width: 13px;
  height: 13px;
  border-top: 4px solid #fff;

  border-left: 4px solid #fff;
  transform: rotate(45deg);
  margin-top: 3px;
}
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:rgb(13, 120, 10, 0.8);
	border-radius: 30px;
	width: 48px;
	height: 48px;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size: 0.8rem;
	transition: all 0.3s;
}
#page-top a:hover{
	background: rgb(227, 154, 55, 0.6);
}

/*ページトップリンクを右下に固定*/
#page-top {
	position: fixed;
	right: 30px;
	bottom:30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}
@media screen and (max-width:767px) {
#page-top {
    right: 15px;
    bottom:15px;
  }
}

/*　左の動き　*/
#page-top.LeftMove{
	animation: LeftAnime 0.9s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/
#page-top.RightMove{
	animation: RightAnime 0.9s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}

/* キャンプエリアページ */
/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position: relative;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*　背景画像設定　*/
.slider-item01 {
  background:url(../../images/img_camparea_forest01.jpg);
}
.slider-item02 {
  background:url(../../images/img_camparea_forest02.jpg);
}
.slider-item03 {
  background:url(../../images/img_camparea_forest03.jpg);
}
.slider-item04 {
  background:url(../../images/img_camparea_lake01.jpg);
}
.slider-item05 {
  background:url(../../images/img_camparea_lake02.jpg);
}
.slider-item06 {
  background:url(../../images/img_camparea_lake03.jpg);
}
.slider-item07 {
  background:url(../../images/img_camparea_sky01.jpg);
}
.slider-item08 {
  background:url(../../images/img_camparea_sky02.jpg);
}
.slider-item09 {
  background:url(../../images/img_camparea_sky03.jpg);
}
.slider-item10 {
  background:url(../../images/img_camparea_glamping01.jpg);
}
.slider-item11 {
  background:url(../../images/img_camparea_glamping02.jpg);
}
.slider-item12 {
  background:url(../../images/img_camparea_glamping03.jpg);
}

.slider-item {
  width: 100%; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 500px;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

@media screen and (max-width:767px) {
.slider{
  width: 100%;
}
.slider-item {
  width: 100%;
  height: 300px;
}

}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  z-index: 3;
  top: 48%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #fff;/*矢印の色*/
  border-right: 2px solid #fff;/*矢印の色*/
  height: 13px;
  width: 13px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left:2.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right:2.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
  text-align:center;
  margin:-30px 0 0 0;
}

.slick-dots li {
  display:inline-block;
  margin:0 7px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:10px;/*ドットボタンのサイズ*/
  height:10px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#aaa;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background: #0D780A;/*ドットボタンの現在地表示の色*/
}