@charset "utf-8";

/*----------------------------
overwrite
----------------------------*/
.resultItem .btnBlock {
	justify-content: center;
}
/*----------------------------
parts
----------------------------*/
.hiAuto {
	height: auto;
}
.borColorType01 {
	border-color: #ddd;
}
/*----------------------------
layout
----------------------------*/
.outlineBlock p {
	margin-top: 20px;
}
.outlineBlock p:first-child {
	margin-top: 0;
}

.compareList {
	max-width: 450px;
	margin: 0 auto;
}
.compareList .compareItem {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 40px;
}
.compareList .compareItem:first-child {
	margin-top: 0;
}
.compareList .compareItem .box1 {
	position: relative;
	display: table;
	width: 50%;
	min-height: 85px;
	padding: 20px 12px;
	border: 2px solid #bbb;
}
.compareList .compareItem .box1::before,
.compareList .compareItem .box1::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 40px;
	right: 0;
	width: 0;
	height: 0;
}
.compareList .compareItem .box1::before {
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 20px solid #bbb;
	transform: translate(100%,-50%);
}
.compareList .compareItem .box1::after {
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 20px solid #fff;
	transform: translate(85%,-50%);
}
.compareList .compareItem .box1 .txt {
	display: table-cell;
	vertical-align: middle;
	font-weight: bold;
}
.compareList .compareItem .box2 {
	width: calc(50% - 25px);
	margin-left: 25px;
}
.compareList .compareItem .box2 .btn {
	margin-top: 10px;
}

.resultList {
	margin-top: 30px;
}
.resultList .btnColorType01 .btnType07 {
	padding-top: 17px;
	padding-bottom: 17px;
	background: linear-gradient(to bottom, #ffbd00 0%, #ff4b00 100%);
	border: none;
	color: #fff;
}

.topicBlock .btnType01.svgIcon {
	height: auto;
}
.topicBlock .btnType01.svgIcon .img {
	width: 30px;
}
.topicBlock .btnType01.svgIcon .txt {
	width: 170px;
}

/*----------------------------
特集ページ改善
----------------------------*/
.pointBlock01 {
	position: relative;
	background-color: #FCF4F4;
}

.pointlabel {
	position: absolute;
	top: -11px;
	left: 17px;
	padding: 2px 9px;
	background-color: #E60000;
	color: #fff;
	font-size: 0.9286rem/*13px*/;
	font-weight: bold;
}

@media screen and (max-width: 640px) {
	.resultItem {
		padding: 20px;
	}

	.resultItem .block01 .l {
		display: flex;
	}

	.resultItem .cardImg,
	.resultItem .cardImg img {
		width: 100px;
		text-align: left;
	}

	.resultItem .block01 .l h3 {
		width: calc(100% - 100px);
	}

	.resultItem .cardImg {
		margin-right: 10px;
	}

	.resultItem .cardName {
		font-size: 1.2858rem/*18px*/;
	}

	.resultItem .text01 {
		margin-top: 2px;
		text-align: center;
	}

	.pointBlock01 {
		margin-left: -20px;
		margin-right: -20px;
		margin-top: 30px;
		padding: 20px 15px;
		font-size: 0.9286rem/*13px*/;
	}

	.resultItem .block02 {
		margin-top: 20px;
	}

	.resultItem .cardTable01 {
		width: 100%;
	}

	.resultItem .cardTable01 tr {
		display: flex;
		flex-wrap: wrap;
	}

	.resultItem .cardTable01 th,
	.resultItem .cardTable01 tr.brand th {
		width: 30%;
		height: 24px;
	}

	.resultItem .cardTable01 td {
		width: 70%;
		font-size: 0.8572rem/*12px*/;
	}

	.__visa,
	.__mastercard,
	.__jcb,
	.__amexcard {
		margin: 0 5px 0 0;
	}
	.__mastercard {
		width: 30px;
		height: 23px;
	}
	.__visa {
		width: 36px;
		height: 13px;
	}
	.__jcb {
		width: 26px;
		height: 19px;
	}
	.__amexcard {
		width: 23px;
		height: 23px;
	}

	.resultItem .cardTable01 tr + tr td + th,
	.resultItem .cardTable01 tr + tr td + th + td {
		height: 33px !important;
		border-top: 9px solid #fff;
	}

	.resultItem .labelList {
		width: 100%;
		margin: 19px 0 0;
	}

	.resultItem .labelItem {
		width: 12.8vw;
		height: 12.8vw;
	}

	.resultItem .labelItem.annualFee,
	.resultItem .labelItem.annualFee2 {
		width: 12.8vw;
		height: 12.8vw;
		font-size: 10px;
	}

	.resultItem .labelItem:not(:first-child) {
		margin-left: 0.8vw;
	}

	.resultItem .labelItem:nth-child(n + 4) {
		margin-top: 0;
	}

	.resultItem .labelItem:nth-child(6n + 1) {
		margin-left: 0;
	}

	.resultItem .labelItem:nth-child(n + 7) {
		margin-top: 0.8vw;
	}

	.resultItem .btnBlock {
		margin-top: 20px;
	}

	.resultItem .btnBlock,
	.resultItem .btnBlock > * {
		display: block;
		width: 100%;
		text-align: center;
	}

	.resultItem .btnBlock > div + div {
		margin-top: 15px;
	}

	.resultItem .labelRec {
		margin: 5px 0 12px 0;
		padding: 2px 11px 2px 11px;
	}
}