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

body{
	overflow-x:hidden;
	min-width: 980px;
}



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

.fade-in-L {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transform: translate(30px, 0);
  transition-timing-function:ease;
}
.fade-in-R {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transform: translate(-30px, 0);
  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:980px;
	margin:0 auto;
	box-sizing: border-box;
	padding:0 25px 100px 25px;
}
.mainImgWrapper{
	width:100%;
	position: relative;
}
.mainImg{
	width:800px;
}
.itemWrapper:nth-of-type(odd) .mainImg{
	padding-left:130px;
}
.itemWrapper:nth-of-type(even) .mainImg{
	padding-right:130px;
}
.mainImg a{
	width:100%;
	height:auto;
	display:block;
}
.mainImg a img{
	width:100%;
	height:auto;
	display:block;
	transition: all 0.4s ease;
}

.mainImg a:hover img{
	opacity: 0.6;
}

h2{
	position: absolute;
	top:100px;
	left:0;
	padding-left:0;
	box-sizing: border-box;
	width:465px;
	pointer-events: none;
}
.itemWrapper:nth-of-type(even) h2{
	left:inherit;
	right:0;
}

img.itemName{
	width:100%;
	height:auto;
}
a.btnBuy{
	margin-top:30px;
	width:175px;
	overflow: hidden;
	border-radius: 1000px;
	pointer-events:painted;
}
a.btnBuy img{
	width:100%;
	height:auto;
}
.itemWrapper:nth-of-type(even) a.btnBuy{
	margin-left:auto;
}
a.btnBuy{
	background: #64666a;
	display: block;
	transition: all 0.4s ease;
}
a:hover.btnBuy{
	background: #929496;
}
.subImgWrapper{
	width:930px;
	margin: 20px auto;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.itemWrapper:nth-of-type(odd) .subImgWrapper{
	flex-flow:row-reverse;
}
.subImgWrapper .subImg{
	width:455px;
	margin:0 0 0 0;
	padding:0 0 20px 0;
}
.subImgWrapper .subImg p{
	color:#64666a;
	font-size:15px;
	line-height:1.8em;
	margin-top:1.4em;
}
.subImgWrapper a{
	display: block;
	transition: all 0.4s ease;
}
.subImgWrapper a img{
	width:100%;
	height:auto;
	display: block;
}
.subImgWrapper p{
	font-family: 'Noto Sans JP', serif;
	text-align: center;
	margin-top:0.5em;
	color:#fff;
	font-size:14px;
}
.subImgWrapper a:hover{
	opacity: 0.6;
}






.btnAllWrapper{
	width:475px;
	height:70px;
	margin: 0 auto;
	padding-top:0;
	padding-bottom:120px;
}
.btnAllWrapper img{
	width:100%;
	height:auto;
}
.btnAllWrapper .btnAll{
	display: block;
	background: #64666a;
	transition: all 0.2s ease;
	overflow: hidden;
	border-radius: 1000px;
}

.btnAllWrapper .btnAll:hover{
	background: #929496;
}