@charset "UTF-8";

.top{
	display:flex;
	gap: 50px;
}

.top h3{margin-bottom:10px;}
.top h1{margin-bottom:20px;}
.top .side p{
	margin-bottom:20px;
}

.article{
	margin-bottom:100px;
}
.article .imgcatch{
	font-size:1.4em;
	font-weight:bold;
	text-align:center;
	margin-bottom:40px;
}


.innersize2 .btncomment{
	text-align:center;
}


.btnarea{
	display:flex;
	justify-content: space-between;
	gap:25px;
	margin-top:30px;
}

.btnarea .box{
	width:520px;
	border-radius:20px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
	display:flex;
	align-items: center;
	font-size:1.4em;
	font-weight:bold;
}
.btnarea .box img.pho{	
	-webkit-transition: scale 1s ease;
	transition: scale 1s ease;
}
.btnarea .box:hover img.pho{
	scale: 1.05;
	object-fit: cover;
	-webkit-transition: scale 1s ease;
	transition: scale 1s ease;
	overflow: hidden;
}
.btnarea .box.si p img.arr,
.btnarea .box.co p img.arr{
	position: absolute;
	top: 2em;
	left: 43%;
}
.btnarea .box .photoarea{
	overflow: hidden;
}
.btnarea .box.si p img.arr,
.btnarea .box.co p img.arr{
	left: 43%;
	-webkit-transition:left .5s ease;
	transition: left 0.5s ease;
}
.btnarea .box.si:hover p img.arr,
.btnarea .box.co:hover p img.arr{
	left: 50%;
	-webkit-transition:left .5s ease;
	transition: left 0.5s ease;
}
.btnarea .box.si p,
.btnarea .box.co p{
	display: flex;
    flex-direction: column;
    align-items: center;
	width:280px;
	position: relative;
}	
.btnarea .box.si{
	background-color:#DFEDE5;
}
.btnarea .box.si p{
	color:#288753;
}
.btnarea .box.co{
	background-color:#FAE6E0;
}
.btnarea .box.co p{
	color:#DF582F;
}


/* タブレット・PC向けの上書き (例: 1089px以上) */
@media (max-width: 1028px) {
	.article {
		margin-bottom: 50px;
	}

	.article.top h3,
	.article.top h1{
		text-align:center;
	}
	.article.flowing img{
		margin: 0 auto;
	}
	.innersize2 .btncomment{
		text-align:left;
	}
	
	.top {
		flex-direction: column;
		align-items: center;
	}
	.top img{
		max-width:502px;
		width:100%;
	}
	.btnarea{
		flex-flow: row wrap;
		justify-content:center;
	}

/* タブレット・PC向けの上書き (例: 1089px以上) */
@media (max-width: 1028px) {

	.btnarea{
		flex-flow: row wrap;
		justify-content:center;
	}

}/*@media */

/* タブレット・PC向けの上書き (例: 1089px以上) */
@media (max-width: 500px) {

	.btnarea .box{
		font-size:1em;
	}
	.btnarea .box.si p img.arr,
	.btnarea .box.co p img.arr{
		width:30px;
	}

}/*@media */