@charset "UTF-8";
#keyvisual {
	position: relative;
	width: 100%;
	background: #f4f094;
	padding: 50px 0 0 0;
}
#keyvisual .mainImg{
	position: relative;
	margin: 0 auto;
	width: 90%;
	max-width: 752px;
}
#keyvisual .icon_three{
	position: relative;
	margin: 10px auto 0 auto;
	width: 100%;
	height: 55px;
	background-size: contain;
	background-position: calc(100% - 10px) calc(100% + 5px);
	background-repeat: no-repeat;
	background-image: url("../../img/common/icon_three.png");
}

#snsArea{
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
	background-color: #000000;
}
#snsArea .snslist{
	position: relative;
	margin: 0 0 0 auto;
	width: 60%;
	max-width: 1200px;
	gap: 0 12px;
}
#snsArea .snslist div{
	position: relative;
	margin: 0;
}
#snsArea .snslist div.ttl{padding-right: 5px; width: 80px;}
#snsArea .snslist div.btn{width: 24px;}
#snsArea .snslist div a{
	position: relative;
	display: block;
	transition: 0.2s ease-in-out;
}
#snsArea .snslist div a:hover{opacity: 0.6;}

@media screen and (min-width: 769px) {
	#keyvisual {padding: 50px 0 30px 0;}
	#keyvisual .icon_three{
		position: absolute;
		margin: auto;
		height: 120px;
		max-width: 1200px;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-position: calc(100% - 10px) calc(100% + 18px);
	}

	#snsArea{padding: 15px 0;}
	#snsArea .snslist{
		margin: 0 auto;
		width: 100%;
		max-width: 1200px;
		gap: 0 20px;
		justify-content: flex-end;
	}

	#snsArea .snslist div.ttl{padding-right: 10px; width:85px;}
	#snsArea .snslist div.btn{width: 32px;}
}