@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap);


.fade-in {
  opacity: 0;
  transition-duration: 600ms;
  transition-property: opacity, transform;
  transform: translate(0, 50px);
  transition-timing-function:ease;
}

.fade-in-up{
  transform: translate(0, 50px);
}
.scroll-in{
  opacity: 1;
  transform: translate(0, 0);
}



#feature{
	/*font-family: 'Noto Serif JP', serif;*/
	color:#333;
	font-size: 14px;
	line-height: 1.6em;
}

#feature img{
	display:block;
}
#feature h1{
	width:980px;
}
#feature h1 img{
	width:980px;
	height:auto;
}



.itemWrapper{
	width:650px;
	position: relative;
	margin:0 auto 80px auto;
	padding:0;
	box-sizing: border-box;
}
.itemWrapper img{
	display:block;
	width:100%;
	height:auto;
}
.itemWrapper p{
	font-size: 14px;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	line-height:1.8em;
	font-weight:300;
	padding:2em 0;
}
.mainImg{
	display:block;
}
.mainImg img{
	width:100%;
	height:auto;
}
.subImg{
	width:100%;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:4px;
}
.subImg a{
	width:323px;
	display:block;
}
.subImg img{
	width:100%;
	height:auto;
}

.itemWrapper a.btnBuy{
	width:260px;
	height:60px;
	margin: 40px auto 0 auto;
	display: block;
}
.itemWrapper a.btnBuy img{
	width:100%;
	height:auto;
}

.itemWrapper a.viewBtn{
	width:400px;
	margin: 40px auto 0 auto;
	display: block;
}

.itemWrapper a img{
	transition: all 0.3s ease;
}
.itemWrapper a:hover img{
	opacity: 0.6;
}

.itemWrapper a.btnBuy:hover img{
	opacity: 1;
	background: #eff4fa;
}





div.btnAll{
	width:100%;
	padding: 40px 0 80px 0;
	
}
div.btnAll a{
	width:490px;
	height:70px;
	display: block;
	margin: 0 auto;
}
div.btnAll a img{
	transition: all 0.3s ease;
}
div.btnAll a:hover img{
	/*opacity: 1;*/
	background: #eff4fa;
}