@charset "UTF-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

#recommend-appeal-contents .p-recommend {
	padding-top: 70px;
	padding-bottom: 24px;
}
@media only screen and (max-width: 769px) {
	#recommend-appeal-contents .p-recommend {
		padding-top: 50px;
		padding-bottom: 0;
	}
}
#recommend-appeal-contents .p-recommend__ttl {
	padding-bottom: 30px;
	font-size: 21px;
	font-weight: bold;
	color: #3e3a39;
	text-align: center;
}
#recommend-appeal-contents .p-recommend__ttl span {
	display: inline;
	margin: 0 3px;
	font-size: 16px;
	font-weight: normal;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .p-recommend__ttl {
		padding-bottom: 60px;
		font-size: 30px;
	}
	#recommend-appeal-contents .p-recommend__ttl span {
		font-size: 30px;
	}
}
#recommend-appeal-contents .p-cardList {
	/* display: grid;
    gap: 16.6666666667vw; */
	/* margin-top: 16.1111111111vw; */
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .p-cardList {
		/* grid-template-columns: repeat(3, 1fr);
      gap: 60px 70px; */
		/* margin-top: 90px; */
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-box-align: start;
		-ms-flex-align: start;
	}
}
#recommend-appeal-contents .p-card + .p-card {
	margin-top: 50px;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .p-card {
		width: 30%;
	}
	#recommend-appeal-contents .p-card + .p-card {
		margin-top: 0px;
	}
}
#recommend-appeal-contents .p-cardList--4columnPc {
	grid-template-columns: repeat(4, 1fr);
	gap: 60px 40px;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .p-cardList--4columnPc {
		grid-template-columns: repeat(4, 1fr);
		gap: 60px 40px;
	}
}
@media only screen and (max-width: 768px) {
	#recommend-appeal-contents .p-cardList--2columnSp {
		grid-template-columns: repeat(2, 1fr);
		gap: 11.1111111111vw 5.5555555556vw;
	}
}
#recommend-appeal-contents .p-cardList + .p-lineUp {
	margin-top: 22.2222222222vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .p-cardList + .p-lineUp {
		margin-top: 100px;
	}
}
#recommend-appeal-contents .p-cardList img {
	width: 100%;
}
#recommend-appeal-contents .p-cardMeganeImg {
	width: 85%;
	margin: 0 auto;
	pointer-events: none;
	/* margin: 5.5555555556vw auto 0; */
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .p-cardMeganeImg {
		width: 82%;
		/* margin-top: 20px; */
	}
}
#recommend-appeal-contents .p-cardCatList {
	margin-top: 5.5555555556vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .p-cardCatList {
		margin-top: 20px;
	}
}
#recommend-appeal-contents .p-cardBtns {
	margin-top: 8.3333333333vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .p-cardBtns {
		margin-top: 20px;
	}
}
#recommend-appeal-contents .c-btn {
	position: relative;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: #000;
	border-radius: 999px;
}
@media (hover: hover) {
	#recommend-appeal-contents .c-btn:hover {
		opacity: 0.7;
	}
}
@media (hover: none) {
	#recommend-appeal-contents .c-btn:active {
		opacity: 0.7;
	}
}
#recommend-appeal-contents .c-btn--m {
	width: 61.1111111111vw;
	padding: 2.7777777778vw 0;
	margin: 20px auto 0;
	font-size: 3.8888888889vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-btn--m {
		width: 100%;
		max-width: 220px;
		padding: 10px 0;
		margin: 20px auto 0;
		font-size: 14px;
	}
}
#recommend-appeal-contents .c-btnDetail {
	margin-top: 15px;
	text-align: center;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-btnDetail {
		text-align: center;
	}
}
#recommend-appeal-contents .c-btnDetail__link {
	font-size: 13px;
	color: #000;
	text-decoration: underline !important;
}
#recommend-appeal-contents .c-cat {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 2.7777777778vw;
	color: #000;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-cat {
		gap: 10px;
	}
}
#recommend-appeal-contents .c-cat--justifyCenter {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#recommend-appeal-contents .c-cat--alignTop {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
#recommend-appeal-contents .c-cat + .c-cat {
	margin-top: 2.7777777778vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-cat + .c-cat {
		margin-top: 10px;
	}
}
#recommend-appeal-contents .c-catLabel {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 26.1111111111vw;
	padding: 0.2777777778vw 0;
	font-size: 2.7777777778vw;
	text-align: center;
	border: 1px solid #000;
	border-radius: 3px;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-catLabel {
		width: 94px;
		padding: 1px 0;
		font-size: 10px;
	}
}
#recommend-appeal-contents .c-catLabel--s {
	padding: 0.2777777778vw 0;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-catLabel--s {
		width: 76px;
		padding: 1px 0;
	}
}
#recommend-appeal-contents .c-catName {
	font-size: 3.3333333333vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-catName {
		font-size: 12px;
	}
}
#recommend-appeal-contents .c-btn--s .c-btnArrow {
	right: 2.7777777778vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-btn--s .c-btnArrow {
		right: 10px;
	}
}
#recommend-appeal-contents .c-btn--m {
	width: 61.1111111111vw;
	padding: 2.7777777778vw 0;
	font-size: 3.8888888889vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-btn--m {
		width: 100%;
		max-width: 220px;
		padding: 10px 0;
		font-size: 14px;
	}
}
#recommend-appeal-contents .c-btn--m .c-btnArrow {
	right: 2.7777777778vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-btn--m .c-btnArrow {
		right: 10px;
	}
}
#recommend-appeal-contents .c-btn--l {
	width: 77.7777777778vw;
	padding: 2.7777777778vw 0;
	font-size: 3.8888888889vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-btn--l {
		width: 520px;
		padding: 25px 0;
		font-size: 20px;
	}
}
#recommend-appeal-contents .c-btn--l .c-btnArrow {
	right: 5.5555555556vw;
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-btn--l .c-btnArrow {
		right: 20px;
	}
}
#recommend-appeal-contents .c-btnArrow {
	position: absolute;
	top: 50%;
	display: block;
	width: 3.3333333333vw;
	height: 3.3333333333vw;
	background: url('../colorcontrol/img/arrow_white.svg') no-repeat center/contain;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
@media only screen and (min-width: 769px) {
	#recommend-appeal-contents .c-btnArrow {
		width: 12px;
		height: 12px;
	}
}