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

/*==================================================
スライダーのためのcss
===================================*/
@media screen and (min-width:1260px) {
	.topslider {
		position:absolute;
		z-index: 10;
		top: 5%;
		left: 12%;
		max-width: 660px;
		max-height: 660px;
	}
	.topslider li img{
		width: 98%;
	}
	
	/*矢印の設定*/
	.slick-prev, 
	.slick-next {
		position: absolute;
		z-index: 5;
		bottom: -17px;
		cursor: pointer;/*マウスカーソルを指マークに*/
		outline: none;/*クリックをしたら出てくる枠線を消す*/
	}
	
}
@media screen and (min-width:869px) and (max-width:1259px) {
	.topslider {
		position:absolute;
		z-index: 10;
		top: 5%;
		left: 5%;
		max-width: 500px;
		max-height: 500px;
	}
	.topslider li img{
		width: 98%;
	}
	
	/*矢印の設定*/
	.slick-prev, 
	.slick-next {
		position: absolute;
		z-index: 5;
		bottom: -20px;
		cursor: pointer;/*マウスカーソルを指マークに*/
		outline: none;/*クリックをしたら出てくる枠線を消す*/
	}
}

/*矢印の設定*/
.slick-prev {/*戻る矢印の位置と形状*/
	left: 36%;
	}
	.slick-next {/*次へ矢印の位置と形状*/
	right: 36%;
	}
.slick-prev::before,.slick-prev::after,
.slick-next::before,.slick-next::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.slick-prev::before,.slick-next::before{
	width: 20px;
	height: 20px;
}
.slick-prev::after,.slick-next::after{
	width: 8px;
	height: 8px;
	border-top: 1px solid #505050;
	border-right: 1px solid #505050;
}
.slick-prev::after{
	left: 0;
	transform: rotate(-135deg);
}
.slick-next::after{
	transform: rotate(45deg);
	left: 0;
}

/*ドットナビゲーションの設定*/
.slick-dots {
	position: relative;
	z-index: 3;
	top: 15px;
	text-align:center;
	margin:10px 0 0 0;/*ドットの位置*/

}
.slick-dots li {
	display:inline-block;
	margin:0 5px;
}
.slick-dots button {
	color: transparent;
	outline: none;
	width:10px;/*ドットボタンのサイズ*/
	height:10px;/*ドットボタンのサイズ*/
	display:block;
	border-radius:50%;
	background:#fff;/*ドットボタンの色*/
	padding: 0;
	border: transparent;
}
.slick-dots .slick-active button{
	background:#505050;/*ドットボタンの現在地表示の色*/
}

@media screen and (max-width:868px) {
	.topslider {
		position:relative;
		z-index: 10;
		width: 95%;
		height: 95%;
		max-width: 400px;
		margin: 10px auto;
	}
	.topslider li img{
		width: 98%;
	}

	/*矢印の設定*/
	.slick-prev, 
	.slick-next {
		position: absolute;
		z-index: 5;
		top: 31%;
		transform: translateY(-31%);
		cursor: pointer;/*マウスカーソルを指マークに*/
		outline: none;/*クリックをしたら出てくる枠線を消す*/
	}
	
	.slick-prev {/*戻る矢印の位置と形状*/
		left: 6%;
		}
		.slick-next {/*次へ矢印の位置と形状*/
		right: 14%;
		}
	.slick-prev::before,.slick-prev::after,
	.slick-next::before,.slick-next::after{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}
	.slick-prev::before,.slick-next::before{
		width: 50px;
		height: 50px;
	}
	.slick-prev::after, 
	.slick-next::after {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		border-top: 4px solid #fff;
		border-right: 4px solid #fff;
		border-radius: 4px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* 影を追加 */
	}
	.slick-prev::after {
		transform: translateY(-50%) rotate(-135deg);
	}
	.slick-next::after {
		transform: translateY(-50%) rotate(45deg);
	}
	
	/*ドットナビゲーションの設定*/
	.slick-dots {
		position: relative;
		z-index: 3;
		top: 10px;
		text-align:center;
		margin:0;/*ドットの位置*/

	}
	.slick-dots li {
		display:inline-block;
		margin:0 8px;
	}
	.slick-dots button {
		color: transparent;
		outline: none;
		width:12px;/*ドットボタンのサイズ*/
		height:12px;/*ドットボタンのサイズ*/
		display:block;
		border-radius:50%;
		background:#fff;/*ドットボタンの色*/
		padding: 0;
		border: transparent;
	}
	
}

.topslider {
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
.topslider li img {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translateX(-1.5%);
  }
  100% {
    transform: translateX(1.5%);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-0.5%);
  }
  100% {
    transform: translateY(0.5%);
  }
}

.slide-animation{
    animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(0.98);
  }
  10% {
    transform: scale(0.95);
  }
  30% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(0.97);
  }
  70% {
    transform: scale(0.98);
  }
  90% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.98);
  }
}

.topslider li a img:hover{
	opacity: 1;
	filter: brightness(110%);
	transition: filter 0.3s ease-in-out;
}