@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

/* common */
html {
	font-size: 10px;
	color: #333;
}
@media (max-width: 995px) {
	html {
		font-size: 1.005vw;
	}
}
@media (max-width: 768px) {
	html {
		font-size: 1.3333vw;/*750pxの時のベース*/
	}
}
body {
	font-size: 1.6rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
@media (max-width: 768px) {
	body {
		font-size: 3.2rem;
		line-height: 1.8;
	}
}
button, input, select, textarea {
	font: inherit;
	color: inherit;
	background: transparent;
	border: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
button {
	cursor: pointer;
}
textarea {
	resize: vertical;
}
a {
	color: #333;
	text-decoration: none;
}
a,
button {
	transition: opacity 0.3s ease-out;
}
a:hover,
button:hover {
	opacity: 0.7;
}
img {
	max-width: 100%;
	height: auto;
}
img[src$=".svg"] {
	width: 100%;
	height: auto;
}
/* スクリーンリーダー用 */
.srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* for safari */
/* @supports (-webkit-hyphens: none) {
	[tabindex="-1"]:focus-visible {
		outline: none !important;
	}
} */
.wrapper {
	margin: 0 auto;
	max-width: 99.5rem;
	font-family: "Noto Sans CJK JP", sans-serif;
}
.sp {
	display: none;
}
@media (max-width: 768px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}

/* mainImgBox
----------------------------------------*/
.mainImgBox {
	position: relative;
}
.mainImgBox .swiper-prev {
	position: absolute;
	top: calc(50% - 6rem);
	left: 2rem;
	width: 6.5rem;
	z-index: 10;
}
.mainImgBox .swiper-next {
	position: absolute;
	top: calc(50% - 6rem);
	right: 2rem;
	width: 6.5rem;
	z-index: 10;
}
.mainImgBox .pager {
	margin-top: 2.5rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.mainImgBox .pager .swiper-pagination {
	position: static;
	padding-right: 2rem;
	width: auto;
	display: flex;
	align-items: center;
}
.mainImgBox .pager .swiper-pagination .swiper-pagination-bullet {
	width: 1.3rem;
	height: 1.3rem;
	background-color: #000;
	opacity: 1;
	margin: 0 0.5rem;
}
.mainImgBox .pager .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #c30d23;
}
.mainImgBox .pager .swiperPause {
	display: block;
	margin-right: 0.5rem;
	padding: 0;
	width: 1.4rem;
	line-height: 1;
}
@media (max-width: 768px) {
	.mainImgBox .swiper-slide img {
		width: 100%;
		max-width: unset;
	}
	.mainImgBox .swiper-prev {
		top: calc(50% - 8rem);
		left: 0;
		width: 6rem;
	}
	.mainImgBox .swiper-next {
		top: calc(50% - 8rem);
		right: 0;
		width: 6rem;
	}
	.mainImgBox .pager {
		margin-top: 3rem;
	}
	.mainImgBox .pager .swiper-pagination .swiper-pagination-bullet {
		width: 1.6rem;
		height: 1.6rem;
		margin: 0 1rem;
	}
	.mainImgBox .pager .swiperPause {
		margin-right: 2rem;
		width: 2.4rem;
	}
}

/* news */
.news {
	margin-top: 3.5rem;
	padding: 4rem 2.5rem 3.5rem;
	border: solid 1px #d7000f;
}
.news .ttl {
	font-size: 3.2rem;
	font-weight: 600;
	color: #d7000f;
	text-align: center;
}
.news .txt {
	margin-top: 3rem;
	font-size: 1.8rem;
	line-height: 1.78;
}
.news .note {
	margin-top: 1.5rem;
	font-size: 1.6rem;
	line-height: 1.75;
}
@media (max-width: 768px) {
	.news {
		margin-top: 7rem;
		padding: 4rem 3.5rem 4rem;
		border-width: 0.2rem;
	}
	.news .ttl {
		font-size: 4rem;
		font-weight: 600;
		color: #d7000f;
		text-align: center;
	}
	.news .txt {
		margin-top: 2.5rem;
		font-size: 2.8rem;
	}
	.news .note {
		margin-top: 2rem;
		font-size: 2.4rem;
	}
}

/* cardList */
.cardList {
	margin: 5rem 0 8rem;
}
.cardList h1 {
	font-size: 4rem;
	font-weight: 600;
	color: #d7000f;
	text-align: center;
}
@media (max-width: 768px) {
	.cardList {
		margin: 8rem 0 11rem;
	}
	.cardList h1 {
		font-size: 4.8rem;
	}
}
.cardList .list {
	margin-top: 7rem;
}
.cardList .list:nth-of-type(1) {
	margin-top: 4rem;
}
.cardList h2 {
	font-size: 3.2rem;
	font-weight: 700;
	text-align: center;
}
.cardList .box {
	margin-top: 6rem;
	border: solid 0.2rem;
}
.cardList h2 + .box {
	margin-top: 3.5rem;
}
@media (max-width: 768px) {
	.cardList .list {
		margin-top: 9rem;
	}
	.cardList .list:nth-of-type(1) {
		margin-top: 4rem;
	}
	.cardList h2 {
		font-size: 4.2rem;
	}
	.cardList .box {
		margin-top: 9rem;
		border: solid 0.4rem;
	}
	.cardList h2 + .box {
		margin-top: 4rem;
	}
}
.cardList .box .cardArea {
	padding: 5rem 2rem 4rem;
	position: relative;
}
.cardList .free {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0 1rem;
}
.cardList .free .icon {
	width: 7.8rem;
	height: 7.8rem;
	border-radius: 50%;
	font-size: 2.1rem;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cardList .free .price {
	font-size: 3.2rem;
	color: #fff;
}
@media (max-width: 768px) {
	/* .cardList .box .cardArea {
		padding: 5rem 2rem 4rem;
	} */
	.cardList .free .icon {
		width: 7.2rem;
		height: 7.2rem;
		font-size: 2rem;
	}
	.cardList .free .price {
		font-size: 3rem;
	}
}
.cardList .detail {
	padding: 2rem 4.5rem 1.5rem;
}
.cardList .detail h4 {
	padding: 0.5rem;
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}
.cardList .detail .detailBox {
	padding: 1rem 3.5rem 0;
}
.cardList .detail .detailBox h5 {
	font-size: 3rem;
	font-weight: 500;
}
.cardList .detailBox .wrap {
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cardList .detailBox .total {
	width: 17.2%;
	text-align: center;
}
.cardList .detailBox .totalTxt {
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}
.cardList .detailBox .totalNum {
	display: flex;
	justify-content: center;
	align-items: baseline;
	line-height: 1;
}
.cardList .detailBox .totalNum .num {
	font-size: 8.2rem;
	font-family: "Jost", sans-serif;
	font-weight: 500;
	letter-spacing: -0.018em;
}
.cardList .detailBox .totalNum .per {
	font-size: 4.4rem;
	font-family: "Jost", sans-serif;
	font-weight: 400;
}
.cardList .detailBox .pointDetail {
	margin-left: 1%;
	width: 60.4%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
}
.cardList .detailBox .pointDetail::before,
.cardList .detailBox .pointDetail::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1rem;
	border-top: 0.2rem solid;
	border-bottom: 0.2rem solid;
}
.cardList .detailBox .pointDetail::before {
	left: 0;
	border-left: 0.2rem solid;
}
.cardList .detailBox .pointDetail::after {
	right: 0;
	border-right: 0.2rem solid;
}
.cardList .detailBox .plus {
	width: 5%;
	font-size: 5.4rem;
	font-weight: 200;
}
.cardList .detailBox .pointDetail .item {
	width: 36%;
}
.cardList .detailBox .pointDetail .plus + .item {
	width: 55%;
}
.cardList .detailBox .pointDetail .itemTxt {
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.1em;
}
.cardList .detailBox .pointDetail .itemTxt span {
	font-size: 1.5rem;
}
.cardList .detailBox .pointDetail .itemNum {
	display: flex;
	justify-content: center;
	align-items: baseline;
	line-height: 1;
}
.cardList .detailBox .pointDetail .itemNum .num {
	font-size: 8.2rem;
	font-family: "Jost", sans-serif;
	font-weight: 500;
	letter-spacing: -0.018em;
}
.cardList .detailBox .pointDetail .itemNum .per {
	font-size: 4.4rem;
	font-family: "Jost", sans-serif;
	font-weight: 400;
}
.cardList .detailBox .itemTxt02 {
	width: 20.9%;
	font-size: 1.9rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	align-self: flex-end;
}
@media (max-width: 768px) {
	.cardList .detail {
		padding: 1.5rem 2rem 1.5rem;
	}
	/* .cardList .detail h4 {
		padding: 0.5rem;
		font-size: 3rem;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
	} */
	.cardList .detail .detailBox {
		padding: 0;
	}
	.cardList .detail .detailBox h5 {
		font-size: 2.5rem;
	}
	.cardList .detailBox .total {
		width: 17.2%;
		text-align: center;
	}
	.cardList .detailBox .totalTxt {
		font-size: 1.8rem;
		/* font-weight: 500;
		letter-spacing: -0.02em; */
	}
	/* .cardList .detailBox .totalNum {
		display: flex;
		justify-content: center;
		align-items: baseline;
		line-height: 1;
	} */
	.cardList .detailBox .totalNum .num {
		font-size: 6.8rem;
		/* font-family: "Jost", sans-serif;
		font-weight: 500;
		letter-spacing: -0.018em; */
	}
	.cardList .detailBox .totalNum .per {
		font-size: 3.7rem;
		/* font-family: "Jost", sans-serif;
		font-weight: 400; */
	}
	/* .cardList .detailBox .pointDetail {
		margin-left: 1%;
		width: 60.4%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: relative;
	} */
	/* .cardList .detailBox .pointDetail::before,
	.cardList .detailBox .pointDetail::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 1rem;
		border-top: 0.2rem solid;
		border-bottom: 0.2rem solid;
	}
	.cardList .detailBox .pointDetail::before {
		left: 0;
		border-left: 0.2rem solid;
	}
	.cardList .detailBox .pointDetail::after {
		right: 0;
		border-right: 0.2rem solid;
	} */
	.cardList .detailBox .plus {
		width: 6%;
	}
	/* .cardList .detailBox .pointDetail .item {
		width: 36%;
	}
	.cardList .detailBox .pointDetail .plus + .item {
		width: 55%;
	} */
	.cardList .detailBox .pointDetail .itemTxt {
		font-size: 1.8rem;
	}
	.cardList .detailBox .pointDetail .itemTxt span {
		font-size: 1.2rem;
	}
	.cardList .detailBox .pointDetail .itemNum .num {
		font-size: 6.8rem;
	}
	.cardList .detailBox .pointDetail .itemNum .per {
		font-size: 3.7rem;
	}
	.cardList .detailBox .itemTxt02 {
		width: 19%;
		font-size: 1.5rem;
	}
}
.cardList .note {
	margin-top: 1rem;
	padding-left: 1em;
	text-indent: -1em;
	font-size: 1.6rem;
	line-height: 1.5;
}
.cardList .btn {
	margin: 2.5rem auto 0;
	width: 33rem;
	height: 6.7rem;
}
.cardList .btn a {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #515151;
	border-radius: 3.3rem;
	font-size: 2.1rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	position: relative;
}
.cardList .btn a::after {
	display: block;
	content: '';
	width: 2rem;
	height: 2rem;
	border-right: solid 0.4rem #fff;
	border-bottom: solid 0.4rem #fff;
	transform: rotate(-45deg);
	position: absolute;
	top: calc(50% - 1rem);
	right: 2.5rem;
}
@media (max-width: 768px) {
	.cardList .note {
		font-size: 2rem;
	}
	.cardList .btn {
		margin: 3rem auto 0;
		width: 52rem;
		height: 10.5rem;
	}
	.cardList .btn a {
		border-radius: 5.2rem;
		font-size: 3.3rem;
	}
	.cardList .btn a::after {
		width: 3rem;
		height: 3rem;
		border-width: 0.8rem;
		top: calc(50% - 1.5rem);
		right: 3.5rem;
	}
}
/* debit */
.cardList .box.debit {
	border-color: #00195a;
}
.cardList .debit .cardArea {
	padding: 7.5rem 2rem 5rem;
	background-color: #00195a;
}
.cardList .debit .cardArea .wrap {
	display: flex;
	justify-content: center;
	gap: 0 2rem;
}
.cardList .debit .wrap .cardImg {
	width: 21.7rem;
}
.cardList .debit .wrap h3 {
	width: 45rem;
	font-size: 4.6rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.24;
}
.cardList .debit .free {
	margin-right: 17rem;
	margin-top: -4rem;
}
.cardList .debit .free .icon {
	background-color: #fff;
	color: #00195a;
}
.cardList .debit .detail h4 {
	background-color: #00195a;
	color: #fff;
}
.cardList .debit .detail h5 {
	color: #00195a;
}
.cardList .debit .detailBox .totalTxt,
.cardList .debit .detailBox .totalNum,
.cardList .debit .detailBox .pointDetail,
.cardList .debit .detailBox .pointDetail .itemNum,
.cardList .debit .detailBox .itemTxt02 {
	color: #00195a;
}
.cardList .debit .detailBox .pointDetail::before,
.cardList .debit .detailBox .pointDetail::after {
	border-color: #00195a;
}
@media (max-width: 768px) {
	.cardList .debit .cardArea {
		padding: 6.5rem 2rem 5rem;
	}
	.cardList .debit .wrap .cardImg {
		width: 20.4rem;
	}
	.cardList .debit .wrap h3 {
		width: 30rem;
		font-size: 4.2rem;
	}
	.cardList .debit .free {
		margin-right: 1rem;
		margin-top: -5rem;
	}
}
/* gold */
.cardList .box.gold {
	border-color: #e1dcc3;
}
.cardList .gold .cardArea {
	background-color: #e1dcc3;
}
.cardList .gold .cardImg {
	margin: 0 auto;
	width: 32.2rem;
}
.cardList .gold h3 {
	font-size: 4.6rem;
	font-weight: 600;
	color: #876d00;
	line-height: 1.24;
	text-align: center;
}
.cardList .gold .cardArea .wrap {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 2rem;
}
.cardList .gold .brand {
	width: 27rem;
}
.cardList .gold .free .icon {
	background-color: #876d00;
	color: #fff;
}
.cardList .gold .free .price {
	color: #876d00
}
.cardList .gold .detail h4 {
	background-color: #ab9a4e;
	color: #fff;
}
.cardList .gold .detail h5 {
	color: #876d00;
}
.cardList .gold .detailBox .totalTxt,
.cardList .gold .detailBox .totalNum,
.cardList .gold .detailBox .pointDetail,
.cardList .gold .detailBox .pointDetail .itemNum,
.cardList .gold .detailBox .itemTxt02 {
	color: #ab9a4e;
}
.cardList .gold .detailBox .pointDetail::before,
.cardList .gold .detailBox .pointDetail::after {
	border-color: #ab9a4e;
}
@media (max-width: 768px) {
	.cardList .gold .cardImg {
		width: 29.4rem;
	}
	.cardList .gold h3 {
		font-size: 4.2rem;
	}
	.cardList .gold .cardArea .wrap {
		gap: 0 4rem;
	}
	.cardList .gold .brand {
		width: 24.8rem;
	}
}
/* tcard */
.cardList .box.tcard {
	border-color: #e0c5c0;
}
.cardList .tcard .cardArea {
	background-color: #e0c5c0;
}
.cardList .tcard .cardImg {
	margin: 0 auto;
	width: 32.2rem;
}
.cardList .tcard h3 {
	font-size: 4.6rem;
	font-weight: 600;
	color: #ae4154;
	line-height: 1.24;
	text-align: center;
}
.cardList .tcard .cardArea .wrap {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 2rem;
}
.cardList .tcard .brand {
	width: 27rem;
}
.cardList .tcard .free .icon {
	background-color: #ae4154;
	color: #fff;
}
.cardList .tcard .free .price {
	color: #ae4154;
	font-size: 2.5rem;
}
.cardList .tcard .free .price span {
	display: block;
	font-size: 3.4rem;
	line-height: 1.1;
}
.cardList .tcard .detail h4 {
	background-color: #ae4154;
	color: #fff;
}
.cardList .tcard .detail h5 {
	color: #ae4154;
}
.cardList .tcard .detailBox .totalTxt,
.cardList .tcard .detailBox .totalNum,
.cardList .tcard .detailBox .pointDetail,
.cardList .tcard .detailBox .pointDetail .itemNum,
.cardList .tcard .detailBox .itemTxt02 {
	color: #ae4154;
}
.cardList .tcard .detailBox .pointDetail::before,
.cardList .tcard .detailBox .pointDetail::after {
	border-color: #ae4154;
}
@media (max-width: 768px) {
	.cardList .tcard .cardImg {
		width: 29.4rem;
	}
	.cardList .tcard h3 {
		font-size: 4.2rem;
	}
	.cardList .tcard .cardArea .wrap {
		gap: 0 4rem;
	}
	.cardList .tcard .brand {
		width: 24.8rem;
	}
	.cardList .tcard .free .price {
		font-size: 2.3rem;
	}
	.cardList .tcard .free .price span {
		font-size: 3.2rem;
	}
}
/* saison */
.cardList .box.saison {
	border-color: #a6abd0;
}
.cardList .saison .cardArea {
	background-color: #a6abd0;
}
.cardList .saison .cardImg {
	margin: 0 auto;
	width: 32.2rem;
}
.cardList .saison h3 {
	font-size: 4.6rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.24;
	text-align: center;
}
.cardList .saison .cardArea .wrap {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 2rem;
}
.cardList .saison .brand {
	width: 27rem;
}
.cardList .saison .free .icon {
	background-color: #3b5da0;
	color: #fff;
}
.cardList .saison .free .price {
	color: #fff;
	font-size: 3.5rem;
}
.cardList .saison .detail h4 {
	background-color: #3b5da0;
	color: #fff;
}
.cardList .saison .detail h5 {
	color: #3b5da0;
}
.cardList .saison .detailBox .totalTxt,
.cardList .saison .detailBox .totalNum,
.cardList .saison .detailBox .pointDetail,
.cardList .saison .detailBox .pointDetail .itemNum,
.cardList .saison .detailBox .itemTxt02 {
	color: #3b5da0;
}
.cardList .saison .detailBox .pointDetail::before,
.cardList .saison .detailBox .pointDetail::after {
	border-color: #3b5da0;
}
@media (max-width: 768px) {
	.cardList .saison .cardImg {
		width: 29.4rem;
	}
	.cardList .saison h3 {
		font-size: 4.2rem;
	}
	.cardList .saison .cardArea .wrap {
		gap: 0 4rem;
	}
	.cardList .saison .brand {
		width: 24.8rem;
	}
	.cardList .saison .free .price {
		font-size: 3.2rem;
	}
}
/* platinum */
.cardList .box.platinum {
	border-color: #009bc6;
}
.cardList .platinum .cardArea {
	background-color: #009bc6;
}
.cardList .platinum .cardImg {
	margin: 0 auto;
	width: 32.2rem;
}
.cardList .platinum h3 {
	font-size: 4.6rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.24;
	text-align: center;
}
.cardList .platinum .cardArea .wrap {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 4.5rem;
}
.cardList .platinum .brand {
	width: 6rem;
}
.cardList .platinum .free .icon {
	background-color: #fff;
	color: #009bc6;
}
.cardList .platinum .free .price {
	color: #fff;
	font-size: 3.2rem;
}
.cardList .platinum .detail h4 {
	background-color: #009bc6;
	color: #fff;
}
.cardList .platinum .detailBox .total {
	width: 22%;
}
.cardList .platinum .detailBox .total .per {
	margin-right: 2%;
}
.cardList .platinum .detailBox .total .off {
	font-size: 3.9rem;
	font-weight: 500;
}
.cardList .platinum .detailBox .totalNum,
.cardList .platinum .detailBox .itemTxt02 {
	color: #009bc6;
}
@media (max-width: 768px) {
	.cardList .platinum .cardImg {
		width: 29.4rem;
	}
	.cardList .platinum h3 {
		font-size: 4rem;
		letter-spacing: -0.025em;
	}
	.cardList .platinum .cardArea .wrap {
		gap: 0 4rem;
	}
	.cardList .platinum .brand {
		width: 5.4rem;
	}
	.cardList .platinum .free .price {
		font-size: 3rem;
	}
	.cardList .platinum .detailBox .total .off {
		font-size: 3.2rem;
	}
}
/* pointcard */
.cardList .box.pointcard {
	border-color: #fbead3;
}
.cardList .pointcard .cardArea {
	background-color: #fbead3;
}
.cardList .pointcard .cardImg {
	margin: 0 auto;
	width: 32.2rem;
}
.cardList .pointcard h3 {
	font-size: 4.6rem;
	font-weight: 600;
	color: #f19620;
	line-height: 1.24;
	text-align: center;
}
.cardList .pointcard .cardArea .wrap {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cardList .pointcard .free .icon {
	background-color: #f19620;
	color: #fff;
}
.cardList .pointcard .free .price {
	color: #f19620;
	font-size: 3.5rem;
}
.cardList .pointcard .detail h4 {
	background-color: #f19620;
	color: #fff;
}
.cardList .pointcard .detailBox .total {
	width: 80%;
	font-size: 3.7rem;
}
.cardList .pointcard .detailBox .total .num {
	margin-left: 1%;
}
.cardList .pointcard .detailBox .total .per {
	margin-right: 1%;
}
.cardList .pointcard .detailBox .totalNum {
	color: #f19620;
	letter-spacing: -0.02em;
}
@media (max-width: 768px) {
	.cardList .pointcard .cardImg {
		width: 29.4rem;
	}
	.cardList .pointcard h3 {
		font-size: 4rem;
		letter-spacing: -0.025em;
	}
	.cardList .pointcard .free .price {
		font-size: 3.2rem;
	}
	.cardList .pointcard .detailBox .total {
		font-size: 3rem;
	}
}
/* digital */
.cardList .box.digital {
	border-color: #f9e1eb;
}
.cardList .digital .cardArea {
	background-color: #f9e1eb;
}
.cardList .digital .cardImg {
	margin: 0 auto;
	width: 31.4rem;
}
.cardList .digital h3 {
	font-size: 4.6rem;
	font-weight: 600;
	color: #db2a83;
	line-height: 1.24;
	text-align: center;
}
.cardList .digital .cardArea .wrap {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cardList .digital .free .icon {
	background-color: #db2a83;
	color: #fff;
}
.cardList .digital .free .price {
	color: #db2a83;
	font-size: 3.5rem;
}
.cardList .digital .detail h4 {
	background-color: #db2a83;
	color: #fff;
}
.cardList .digital .detailBox .total {
	width: 80%;
	font-size: 3.7rem;
}
.cardList .digital .detailBox .total .num {
	margin-left: 1%;
}
.cardList .digital .detailBox .total .per {
	margin-right: 1%;
}
.cardList .digital .detailBox .totalNum {
	color: #db2a83;
	letter-spacing: -0.02em;
}
@media (max-width: 768px) {
	.cardList .digital .cardImg {
		width: 29rem;
	}
	.cardList .digital h3 {
		font-size: 4.2rem;
	}
	.cardList .digital .free .price {
		font-size: 3.2rem;
	}
	.cardList .digital .detailBox .total {
		font-size: 3rem;
	}
}
/* rosecircle */
.cardList .box.rosecircle {
	border-color: #78a2d2;
}
.cardList .rosecircle .cardArea {
	background-color: #78a2d2;
}
.cardList .rosecircle .cardImg {
	margin: 0 auto;
	width: 31.4rem;
}
.cardList .rosecircle h3 {
	font-size: 4.6rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.24;
	text-align: center;
}
.cardList .rosecircle .detail {
	padding: 2rem 4.5rem 2.5rem;
	font-size: 3.4rem;
	color: #2c64a2;
	font-weight: 500;
	text-align: center;
	letter-spacing: -0.02em;
}
@media (max-width: 768px) {
	.cardList .rosecircle .cardImg {
		width: 29.4rem;
	}
	.cardList .rosecircle h3 {
		font-size: 4.2rem;
	}
	.cardList .rosecircle .detail {
		font-size: 2.8rem;
	}
}
/* app */
.cardList .box.app {
	border-color: #f2663e;
}
.cardList .app .cardArea {
	background-color: #f2663e;
}
.cardList .app .cardImg {
	margin: 0 auto;
	width: 23.8rem;
}
.cardList .app h3 {
	font-size: 4.6rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.24;
	text-align: center;
}
.cardList .app .detail {
	padding: 2rem 4.5rem 2.5rem;
	font-size: 3.4rem;
	color: #f2663e;
	font-weight: 500;
	text-align: center;
	letter-spacing: -0.02em;
}
.cardList .app .detail span {
	font-size: 2rem;
}
@media (max-width: 768px) {
	.cardList .app .cardImg {
		width: 22.1rem;
	}
	.cardList .app h3 {
		font-size: 4.2rem;
	}
	.cardList .app .detail {
		font-size: 2.8rem;
	}
	.cardList .app .detail span {
		font-size: 1.7rem;
	}
}