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

/* p-recommend
--------------------------------*/
.p-recommend {
  padding-top: 70px;
  padding-bottom: 24px;
}

@media only screen and (max-width: 769px) {
	.p-recommend {
		padding-top: 50px;
		padding-bottom: 0;
	}
}

.p-recommend__ttl {
  padding-bottom: 30px;
  font-size: 16px;
  font-weight: bold;
  color: #3e3a39;
  text-align: center;
}

.p-recommend__ttl span{
   font-weight: normal;
  display: inline;
   font-size: 16px;
   margin: 0 3px;
}

@media only screen and (min-width: 769px) {
  .p-recommend__ttl {
    padding-bottom: 60px;
    font-size: 30px;
  }
  .p-recommend__ttl span{
    font-size: 30px;
  }
}

.p-cardList {
	/* display: grid;
	gap: 16.6666666667vw; */
	/* margin-top: 16.1111111111vw; */
}
@media only screen and (min-width: 769px) {
	.p-cardList {
		/* grid-template-columns: repeat(3, 1fr);
		gap: 60px 70px; */
		/* margin-top: 90px; */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
	}
}
.p-card + .p-card{
  margin-top: 50px;

}
@media only screen and (min-width: 769px) {
 .p-card{
   width: 30%;
  }
  .p-card + .p-card{
   margin-top: 0px;
  }
}
.p-cardList--4columnPc {
	grid-template-columns: repeat(4, 1fr);
	gap: 60px 40px;
}
@media only screen and (min-width: 769px) {
	.p-cardList--4columnPc {
		grid-template-columns: repeat(4, 1fr);
		gap: 60px 40px;
	}
}
@media only screen and (max-width: 768px) {
	.p-cardList--2columnSp {
		grid-template-columns: repeat(2, 1fr);
		gap: 11.1111111111vw 5.5555555556vw;
	}
}
.p-cardList + .p-lineUp {
	margin-top: 22.2222222222vw;
}
@media only screen and (min-width: 769px) {
	.p-cardList + .p-lineUp {
		margin-top: 100px;
	}
}
.p-cardList img {
	width: 100%;
}

.p-cardMeganeImg {
	width: 85%;
  margin: 0 auto;
  pointer-events: none;
	/* margin: 5.5555555556vw auto 0; */
}
@media only screen and (min-width: 769px) {
	.p-cardMeganeImg {
		width: 82%;
		/* margin-top: 20px; */
	}
}

.p-cardCatList {
	margin-top: 5.5555555556vw;
}
@media only screen and (min-width: 769px) {
	.p-cardCatList {
		margin-top: 20px;
	}
}

.p-cardBtns {
	margin-top: 8.3333333333vw;
}
@media only screen and (min-width: 769px) {
	.p-cardBtns {
		margin-top: 20px;
	}
}
.c-btn {
	position: relative;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: #000;
	border-radius: 999px;
}
@media (hover: hover) {
	.c-btn:hover {
		opacity: 0.7;
	}
}
@media (hover: none) {
	.c-btn:active {
		opacity: 0.7;
	}
}
.c-btn--m {
	width: 61.1111111111vw;
	padding: 2.7777777778vw 0;
	font-size: 3.8888888889vw;
  margin: 20px auto 0;
}
@media only screen and (min-width: 769px) {
	.c-btn--m {
		width: 100%;
		max-width: 220px;
		padding: 10px 0;
		font-size: 14px;
    margin: 20px auto 0;
	}
}

.c-btnDetail{
  text-align: center;
  margin-top: 15px;
}
@media only screen and (min-width: 769px) {
  .c-btnDetail{
    text-align: center;
  }
}
.c-btnDetail__link{
  font-size: 13px;
  text-decoration: underline !important;
  color: #000;
}


.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) {
	.c-cat {
		gap: 10px;
	}
}
.c-cat--justifyCenter {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.c-cat--alignTop {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
.c-cat + .c-cat {
	margin-top: 2.7777777778vw;
}
@media only screen and (min-width: 769px) {
	.c-cat + .c-cat {
		margin-top: 10px;
	}
}

.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) {
	.c-catLabel {
		width: 94px;
		padding: 1px 0;
		font-size: 10px;
	}
}
.c-catLabel--s {
	padding: 0.2777777778vw 0;
}
@media only screen and (min-width: 769px) {
	.c-catLabel--s {
		width: 76px;
		padding: 1px 0;
	}
}

.c-catName {
	font-size: 3.3333333333vw;
}
@media only screen and (min-width: 769px) {
	.c-catName {
		font-size: 12px;
	}
}
.c-btn--s .c-btnArrow {
	right: 2.7777777778vw;
}
@media only screen and (min-width: 769px) {
	.c-btn--s .c-btnArrow {
		right: 10px;
	}
}
.c-btn--m {
	width: 61.1111111111vw;
	padding: 2.7777777778vw 0;
	font-size: 3.8888888889vw;
}
@media only screen and (min-width: 769px) {
	.c-btn--m {
		width: 100%;
		max-width: 220px;
		padding: 10px 0;
		font-size: 14px;
	}
}
.c-btn--m .c-btnArrow {
	right: 2.7777777778vw;
}
@media only screen and (min-width: 769px) {
	.c-btn--m .c-btnArrow {
		right: 10px;
	}
}
.c-btn--l {
	width: 77.7777777778vw;
	padding: 2.7777777778vw 0;
	font-size: 3.8888888889vw;
}
@media only screen and (min-width: 769px) {
	.c-btn--l {
		width: 520px;
		padding: 25px 0;
		font-size: 20px;
	}
}
.c-btn--l .c-btnArrow {
	right: 5.5555555556vw;
}
@media only screen and (min-width: 769px) {
	.c-btn--l .c-btnArrow {
		right: 20px;
	}
}

.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) {
	.c-btnArrow {
		width: 12px;
		height: 12px;
	}
}