@charset "UTF-8";

/* style */
.hojinCreditRadiusNone {
	border-radius: 0;
}

/* hojinCreditMvBlock */
.hojinCreditMvBlock01 {
	background-image: url(/hojin/service/eb/credit/images/credit_mv_bg_01.png);
	background-repeat: no-repeat;
	background-position: top center;
}
.hojinCreditMvBlock01 > .columnInner {
	min-height: 517px;
	padding: 40px 0;
}
.hojinCreditMvColumn01 {
	display: flex;
	align-items: flex-end;
}
.hojinCreditMvTextBlock01 {
	margin-left: 20px;
}
.hojinCreditMvTextBlock01 .mvTtl {
	margin-top: 15px;
	font-size: 3.6rem;
	line-height: 1.5;
}
.hojinCreditMvCvBtn01 {
	position: relative;
	bottom: -8px;
	margin: 0 0 0 180px;
}
.hojinCreditMvImgColumn01 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 77px;
}
.hojinCreditMvImgColumn01 > * {
	margin-left: 29px;
}
.hojinCreditMvImgColumn01 > *:first-child {
	margin-left: 0;
}
.hojinCreditMvImgColumn01 > * > img {
	width: 168px;
}

/* hojinCreditDetailBlock */
.hojinCreditDetailBlock01 {
	padding: 30px 25px !important;
	box-sizing: border-box;
}

/* hojinCreditArrowColumn */
.hojinCreditArrowColumn01 {
	display: flex;
}
.hojinCreditArrowColumn01 > * {
	flex-grow: 1;
}
.hojinCreditArrowColumn01 > *:first-child {
	width: 280px;
	min-width: 280px;
	margin-top: 50px;
}
.hojinCreditArrowColumn01 > *:last-child {
	width: 100%;
	margin-left: 120px;
}
.hojinCreditArrowColumn01 > [class*="v3-colRightArrow"]:before {
	left: -100px;
	margin-top: -60px;
}

/* hojinCreditTtl */
.hojinCreditTtl01 {
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1.5;
}
*[class*="hojinCreditTtlLogo"] > span {
	display: inline-block;
	position: relative;
}
*[class*="hojinCreditTtlLogo"] .ttlLogoImg {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.hojinCreditTtlLogoJcb > span {
	padding-left: 70px;
}
.hojinCreditTtlLogoVisa > span {
	padding-left: 90px;
}
.hojinCreditTtlLogoJcb .ttlLogoImg {
	width: 64px;
}
.hojinCreditTtlLogoVisa .ttlLogoImg {
	width: 80px;
}

/* hojinCreditNum */
.hojinCreditNum01 {
	font-size: 5.4rem;
	line-height: 1.2;
}

/* hojinCreditLabelList */
.hojinCreditLabelList01 {
	display: flex;
	justify-content: space-between;
	max-width: 254px;
	margin-left: auto;
	margin-right: auto;
}
.hojinCreditLabelList01 .listItem {
	display: flex;
	flex-direction: column;
	width: 80px;
	padding: 9px 5px 4px;
	border-radius: 4px;
	background: #e9e9e9;
	box-sizing: border-box;
}
.hojinCreditLabelList01 .listItem:nth-child(n+2) {
	margin-left: 7px;
}
.hojinCreditLabelList01 .listItem.valid {
	background: #f0f9f1;
}
.hojinCreditLabelList01 .listItem .labelText {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	margin-top: 3px;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2;
	color: #c1c1c1;
}
.hojinCreditLabelList01 .listItem.valid .labelText {
	color: #0ca26c;
}
.hojinCreditLabelList01 .listItem.valid .labelImg > img {
	filter: invert(47%) sepia(30%) saturate(1366%) hue-rotate(110deg) brightness(95%) contrast(91%);
}

/* hojinCreditTable */
table[class^="table"].hojinCreditTable01 {
	margin-bottom: 20px;
}
.hojinCreditTable01 > thead > tr > *,
.hojinCreditTable01 > tbody > tr > * {
	vertical-align: middle;
	line-height: 1.5;
}
.hojinCreditTable01 .ttlBg01,
.hojinCreditTable01 > tbody > tr > th {
	background: #f9f9f0;
}
.hojinCreditTable01 .ttlBg02 {
	background: #f0f9f1;
}
.hojinCreditTable01 .ttlBg03 {
	background: #f0f3f9;
}

/* hojinCreditCardSwitchList */
.hojinCreditCardSwitchList01 {
	display: flex;
	position: relative;
	margin-bottom: 45px;
	padding: 20px;
	background: #eff9ff;
	box-sizing: border-box;
}
.hojinCreditCardSwitchList01::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 22px 29px 0 29px;
	border-color: #eff9ff transparent transparent transparent;
}
.hojinCreditCardSwitchList01 .listItem {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 33%;
	margin-left: 10px;
}
.hojinCreditCardSwitchList01 .listItem:first-child {
	margin-left: 0;
}
.hojinCreditCardSwitchList01 .listItem > a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
	min-height: 80px;
	padding: 10px;
	background: #fff;
	border-radius: 6px;
	font-weight: bold;
	color: #000;
	transition: background .3s ease-in-out 0s, color .3s ease-in-out 0s;
	box-sizing: border-box;
}
.hojinCreditCardSwitchList01 .listItem > a:hover,
.hojinCreditCardSwitchList01 .listItem > a[aria-selected="true"] {
	background: #0c3bbc;
	color: #fff;
}
.hojinCreditCardSwitchList01 .listItem > a[aria-selected="true"]:hover {
	cursor: default;
}

/* hojinCreditCardSwitchPanel */
.hojinCreditCardSwitchPanel01[aria-hidden="true"] {
	display: none;
}

/* hojinCreditIcon */
*[class*="hojinCreditIcon"] > span {
	display: inline-block;
	position: relative;
}
*[class*="hojinCreditIcon"] > span::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-size: cover;
}
.hojinCreditIconCard01 > span {
	padding-left: 80px;
}
.hojinCreditIconCard01 > span::before {
	width: 70px;
	height: 52px;
	background-image: url(/hojin/service/eb/credit/images/credit_img_11.png);
}

/* modal */
.v3-boxModal .hojinCreditModalBtn01 {
	font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
	/* hojinCreditMvBlock */
	.hojinCreditMvBlock01 {
		background-image: url(/hojin/service/eb/credit/images/credit_mv_bg_01_sp.png);
		background-size: 770px auto;
	}
	.hojinCreditMvBlock01 > .columnInner {
		min-height: 461px;
		padding: 25px 10px 15px;
	}
	.hojinCreditMvColumn01 {
		display: block;
		max-width: 355px;
		margin: 0 auto;
	}
	.hojinCreditMvTextBlock01 {
		margin-left: 0;
	}
	.hojinCreditMvTextBlock01 .mvTtl {
		margin-top: 10px;
		font-size: 2rem;
	}
	.hojinCreditMvCvBtn01 {
		position: static;
		margin: 17px 0 0;
	}
	.hojinCreditMvImgColumn01 {
		flex-wrap: wrap;
		max-width: 355px;
		margin: 40px auto 0;
	}
	.hojinCreditMvImgColumn01 > * {
		width: calc(33% - 17px);
		margin-left: 17px;
	}
	.hojinCreditMvImgColumn01 > *:nth-child(3n+1) {
		margin-left: 0;
	}
	.hojinCreditMvImgColumn01 > *:nth-child(n+4) {
		margin-top: 15px;
	}
	.hojinCreditMvImgColumn01 > * > img {
		width: auto;
	}

	/* hojinCreditDetailBlock */
	.hojinCreditDetailBlock01 {
		padding: 20px 12px !important;
		box-sizing: border-box;
	}

	/* hojinCreditArrowColumn */
	.hojinCreditArrowColumn01 {
		display: block;
	}
	.hojinCreditArrowColumn01 > *:first-child {
		width: auto;
		min-width: 0;
		margin-top: 0;
	}
	.hojinCreditArrowColumn01 > *:last-child {
		width: 100%;
		margin-left: 0;
	}
	.hojinCreditArrowColumn01 > [class*="v3-colRightArrow"]:before {
		left: 50%;
		margin-top: -40px;
	}

	/* hojinCreditTtl */
	.hojinCreditTtl01 {
		font-size: 2rem;
	}
	.hojinCreditTtlLogoJcb > span {
		padding-left: 55px;
	}
	.hojinCreditTtlLogoVisa > span {
		padding-left: 70px;
	}
	.hojinCreditTtlLogoJcb .ttlLogoImg {
		width: 45px;
	}
	.hojinCreditTtlLogoVisa .ttlLogoImg {
		width: 60px;
	}

	/* hojinCreditNum */
	.hojinCreditNum01 {
		font-size: 4rem;
	}

	/* hojinCreditLabelList */
	.hojinCreditLabelList01 {
		margin-top: 10px;
	}

	/* hojinCreditTable */
	.hojinCreditTableSpScroll01 {
		overflow: auto;
		height: 500px;
		margin: 0;
	}
	.hojinCreditTableSpScroll01 table[class^="table"].hojinCreditTable01 {
		min-width: 950px;
		margin: 0 5px 10px 0;
		border-collapse: separate;
		border: none;
	}
	.hojinCreditTableSpScroll01 .hojinCreditTable01 > thead th,
	.hojinCreditTableSpScroll01 .hojinCreditTable01 > thead td {
		position: sticky;
		top: 0;
		z-index: 1;
	}
	.hojinCreditTableSpScroll01 .hojinCreditTable01 > thead th:first-child,
	.hojinCreditTableSpScroll01 .hojinCreditTable01 > tbody th:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
	}
	.hojinCreditTableSpScroll01 .hojinCreditTable01 > thead th:first-child {
		border-left: 1px solid #e1e1e1;
		z-index: 2;
	}
	.hojinCreditTableSpScroll01 .hojinCreditTable01 > thead th {
		border-top: 1px solid #e1e1e1;
	}
	.hojinCreditTableSpScroll01 .hojinCreditTable01 > thead td {
		top: 42.5px;
	}
	.hojinCreditTableSpScroll01 .hojinCreditTable01 > tbody th {
		border-left: 1px solid #e1e1e1;
	}

	/* hojinCreditColumn */
	.hojinCreditColumn01 {
		display: flex;
		align-items: center;
	}
	.hojinCreditColumn01 .colContent {
		flex-grow: 1;
		min-width: 150px;
		margin-left: 20px;
	}

	/* hojinCreditCardSwitchBlock */
	.hojinCreditCardSwitchList01 {
		margin-bottom: 25px;
		padding: 10px;
	}
	.hojinCreditCardSwitchList01::after {
		bottom: -12px;
		border-width: 12px 15px 0 15px;
	}
	.hojinCreditCardSwitchList01 .listItem {
		width: 100%;
		margin-left: 5px;
	}
	.hojinCreditCardSwitchList01 .listItem > a {
		min-height: 50px;
		border-radius: 3px;
		font-size: 1.4rem;
	}

	/* hojinCreditIcon */
	.hojinCreditIconCard01 > span {
		padding-left: 65px;
	}
	.hojinCreditIconCard01 > span::before {
		width: 56px;
		height: 42px;
	}

	/* modal */
	.v3-boxModal .hojinCreditModalBtn01 {
		font-size: 1.4rem;
	}
}