@charset "utf-8";
/*==================================================
スライダーのためのcss
===================================*/
/*山梨の魅力のスライダー*/
.slider img {
    width:auto;/*スライダー内の画像を横幅100%に*/
    height:200px;
	object-fit: cover;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}
/*お土産のスライダー*/
.slider2 img {
    width:auto;/*スライダー内の画像を横幅100%に*/
    height:200px;
	object-fit: cover;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider2 .slick-slide {
    margin:0 30px;/*スライド左右の余白調整*/
}
/*==================================================
スクロール時のためのcss
===================================*/
/*フェードイン*/
.fadein{
    opacity: 0;/*初期値0*/
    transform: translate(0,0);/*初期値　0,0*/
    transition: all 1.5s;/*初期値　1.5*/
}
.fadein.fadein-left{
      transform: translate(-30px,0);/*初期値　-30,0*/
}
.fadein.fadein-right{
      transform: translate(30px,0);/*初期値　30,0*/
}
.fadein.fadein-up{
      transform: translate(0,-30px);/*初期値　0,-30*/
}
.fadein.fadein-bottom{
      transform: translate(0,30px);/*初期値　0,30*/
}
.fadein.fadein-right.fujigoko-area{
	transform: translate(150px,0);
}
.fadein.fadein-left.camp-area{
	transform: translate(-150px,0);
}
.fadein.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}
/*ぼかしから出現*/
.blur{
	opacity: 0;
    transition: all 1.0s;
    filter: blur(50px);
}
.blur.scrollin{
	opacity: 1;
	filter: blur(0);
}
/*回転して出現*/
.rotation{
    transition: all 1.3s;/*初期値　1.0*/
    opacity: 0;
}
.rotation.rotation-x{
      transform: rotateX(180deg);
}
.rotation.rotation-y{
      transform: rotateY(180deg);
}
.rotation.rotation-clockwise{
      transform: rotate(-170deg);
}
.rotation.rotation-counterclockwise{
      transform: rotate(170deg);
}
.eat-area-top.rotation.rotation-y{/*たべるロゴを回転しながら右シフトする準備*/
      transform: translateX(-100%) rotateY(180deg);
}
.play-area-top.rotation.scrollin{/*遊ぶロゴを回転しながら左シフトして戻す*/
    transform: translate(-50%, 0);/*初期値 0,0 !important*/
    opacity: 1;/*!important*/
}
.eat-area-top.rotation.scrollin{/*たべるロゴを回転しながら右シフトして戻す*/
    transform: translate(-50%, 0);/*初期値 0,0 !important*/
    opacity: 1;/*!important*/
}
.rotation.scrollin{
    transform: translate(0, 0);
    opacity: 1;
}
/*波のcss*/
#waveCanvas{
	position: absolute;
	top: -35px;
	left:0;
	width: 100%;
}
#waveCanvas2{/*魅力の底部の波*/
	position: absolute;
	bottom: -30px;
	left:0;
	width: 100%;
	transform: rotate(180deg);
}
#waveCanvas3{
	position: absolute;
	top: -30px;
	left:0;
	width: 100%;
}
#waveCanvas4{
	position: absolute;
	top: 290px;
	left:0;
	width: 100%;
}