@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400&display=swap');

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

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




#feature{
	font-family: 'Noto Serif JP', serif;
	color:#222;
}

body{
	overflow-x:hidden;
	min-width: 980px;
}
.contentsHeader{
	margin-bottom:80px;
}
.contentsHeader img{
	width:100%;
	height:auto;
	display:block;
}
.contentsHeader h2{
	width:470px;
	margin: 0 auto;
}
.contentsHeader p{
	font-size:15px;
	line-height: 2em;
	text-align: center;
	margin-top:25px;
}
.contentsWrapper{
	width:980px;
	/*background: #eee;*/
	margin: 0 auto;
}

.contentsInner{
	width:870px;
	margin: 0 auto 60px auto;
	display:flex;
	justify-content: space-between;
	gap:10px;
}
.contentsInner.item2,
.contentsInner.item4{
	flex-flow: row-reverse;
}
.contentsInner img{
	display: block;
	margin-bottom:10px;
}
.contentsInner .txtBlock{
	text-align: center;
}
.contentsInner .txtBlock p{
	font-size:14px;
	line-height: 2em;
	letter-spacing: 1px;
	margin: 50px 0 30px 0;
}
.contentsInner .txtBlock a{
	display:inline-block;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.contentsInner .txtBlock a::before{
	content:"";
	width:0;
	height:1px;
	display: block;
	background: #222;
	position: absolute;
	left:50%;
	bottom:20px;
	transition: all 0.3s ease;
}
.contentsInner .txtBlock a:hover::before{
	width:100%;
	left:0;
}
.item1 .rightBlock,
.item2 .rightBlock{
	margin-top:100px;
}
.item3 .leftBlock{
	width:480px;
}
.item3 .rightBlock{
	width:380px;
	margin-top:100px;
}
.item4 .leftBlock{
	width:460px;
	margin-top:100px;
}
.item4 .rightBlock{
	width:400px;
}
img.itemImg{
	width:100%;
	height:auto;
}
a:hover .itemImg{
	opacity: 0.6;
	transition: all 0.2s ease;
}

.contentsInner.item4{
	margin: 0 auto 100px auto;
}


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