@charset "UTF-8";


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

.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{
	top: 3.2em;
	left: 43%;
}
.btnarea .box .photoarea{
	overflow: hidden;
}
.btnarea .box.si p img.arr,
.btnarea .box.co p img.arr{
	left: 43%;
	--webkit-transition:all .5s ease;
	transition: all 0.5s ease;
	transform: translate(0px, 0px)
}
.btnarea .box.si:hover p img.arr,
.btnarea .box.co:hover p img.arr{
	left: 50%;
	-webkit-transition:all .5s ease;
	transition: all 0.5s ease;
	transform: translate(10px, 0px)
}
.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;
}

.manual{
	width: 520px;
	padding:20px;
	padding: 20px;
    display: flex;
    gap: 30px;
	
}

.manual img{
	width:110px;
	box-shadow: 5px 5px 6px 0px rgb(0 0 0 / 10%);
}
.manual p{
	text-align:center;
	line-height: 50px;
}
.manual.pro .txt{
	color:#288753
}
.manual.pro .tl{
	font-weight:bold;
	font-size:1.2em;
}
.manual.com .txt{
	color:#df582e
}
.manual.com .tl{
	font-weight:bold;
	font-size:1.2em;
}
.manual p .dl{
	transform: rotate(90deg);
	transition: all 0.3s ease;
	width:30px;
	margin:0 auto;
}
.manual:hover .dl{
	transform: translate(0px, 10px) rotate(90deg);
	transition: all 0.3s ease;
}

/* タブレット・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 */