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

body{
	background-color: #F3EFEF;
	color: #6A3906;
	background-image: url("images/背景.png");
	background-repeat: no-repeat;
	background-position: center 1700px;
	font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
}

/*トップ画像*/
.top{
    animation-name: fadein;
    animation-duration: 3s;
}
@keyframes fadein{
    from{
    opacity: 0;
    transform: translatey(20px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}

h1{
	font-size: 30px;
	transform: translate(500px);
	margin-top: 150px;
	margin-bottom: 50px;
	color: #6A3906; text-shadow: 3px 3px 0 #fff;
}

h2{
	color: #fff;
	background-color: #727F8D;
	width: 180px;
	border-radius: 5px;
	text-align: center;
	font-size: 20px;
}

h4{
	font-size: 24px;
	border-bottom: 3px solid #B18160;
	width: 300px;
}

/*ヘッダー*/
.center{
	position: absolute;
	top: 30px;
	text-align: center;
	right: 0;
	left: 0;
}

.cart{
	position: absolute;
    right: 30px;
	top: 100px;
	transition-property: opacity;
	transition-duration: 0.2s;
}
.cart:hover {
  opacity: 0.5; 
}

a{
	color: #6A3906;
	text-decoration: none;
}

/*ナビゲーション*/
.nav{
	font-size: 20px;
	list-style: none;
	display: flex;
	justify-content: center;
	column-gap: 70px;
	position: absolute;
	top: 120px;
	right: 0;
	left: 0;
}

/*About*/
.about{
	display: flex;
	justify-content: center;
	column-gap: 100px;
	margin-top: 100px;
}

.aboutbun{
	margin-top: 100px;
}

.bunbun{
	line-height: 30px;
}

.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  width: 128px;
}

.keyframe1{
  animation-name: anim_v;
  margin-right: 250px;
}

@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 60px);
  }
}

/*素材説明*/
.sozai{
	text-align: center;
	margin-top: 250px;
	line-height: 30px;
}

/*バナー*/
.banner{
	margin-top: 700px;
}

/*Category*/
.category{
	margin-top: 100px;
	margin-bottom: 100px;
}

.categazou{
	transition-property: opacity;
	transition-duration: 0.5s;
}
.categazou:hover {
  opacity: 0.7; 
}

.cate1{
	display: flex;
	justify-content: center;
	column-gap: 150px;
}

.cate2{
	display: flex;
	justify-content: center;
	column-gap: 150px;
	margin-top: 100px;
}

.catebun{
	font-size: 20px;
}

/*Guide*/
.guide{
	display: flex;
	justify-content: center;
	column-gap: 100px;
	margin-bottom: 100px;
}

.pikapika{
	animation: fadein 1s infinite alternate;
}

@keyframes fadein{
	0%{ opacity: 0;}
	100% { opacity: 1; }
	}

/*Shop*/
.shop{
	display: flex;
	justify-content: center;
	column-gap: 100px;
	margin-bottom: 150px;
}

.zyusyo{
	color: #fff;
	text-align: center;
	list-style: none;
	margin-top: 50px;
	background-color: #8A725B;
	width: 250px;
	height: 220px;
	border-radius: 5px;
}

/*フッター*/
footer{
	background-color: #727F8D;
	color: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
}

.fot{
	text-align: center;
}

.fbun{
	font-size: 20px;
	list-style: none;
	display: flex;
	justify-content: center;
	column-gap: 70px;
}

/*スライダー*/
.autoplay-slider{
  display: flex;
  width: 100%;
	margin-top: 600px;
	background-color: #fff;
}

.slide{
  margin: 50px;
  position: relative;
  transition-property: opacity;
  transition-duration: 0.5s;
} 

.slide:hover {
  opacity: 0.7; 
}

@keyframes sliderAnimation {
  100% {
    transform: translateX(-50%);
  }
}

.autoplay-slider{
  display: flex;
  min-width: 100%;
  width: min-content;
  animation: 20s linear infinite sliderAnimation;
}