@charset "utf-8";



/*---------------------------------------------

.mainimage

---------------------------------------------*/
.mainimage {
	background-color: #E8F4FF;
	position: relative;
	z-index: 2;
}
.mainimage .top-inner {
	width: 1120px;
	margin: auto;
	position: relative;
}
.mainimage-title::after {
	display: block;
	content: "";
	width: 298px;
	height: 187px;
	background: url("../images/select/im_mainimage_title.svg") center center/contain no-repeat;
	position: absolute;
	z-index: 3;
	left: calc( 50% + 160px );
	bottom: -29px;
}
.mainimage-title {
	height: 200px;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	padding-left: 140px;
}
.mainimage-title span {
	font-size: 4.6rem;
	line-height: 1em;
}

@media (max-width: 767px) {
	section.mainimage {
		padding: 0;
		background-color: #C5E3FF;
		margin-bottom: 20px;
	}
	.mainimage .inner {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 15px;
	}
	.mainimage-title {
		height: 180px;
		background-color: #E8F4FF;
		padding: 45px 0 0px;
		text-align: center;
		box-sizing: border-box;
		align-items: stretch;
	}
	.mainimage-title::after {
		width: 163px;
		height: 102px;
		left: 50%;
		transform: translateX(-50%);
		bottom: -16px;
	}
	.mainimage-title span {
		font-size: 2.8rem;
	}
}




/*---------------------------------------------

section.caption

---------------------------------------------*/
section.caption {
	position: relative;
	z-index: 1;
	background-color: #fff;
	text-align: center;
	padding: 10px 0 40px;
}
section.caption .caption-title {
	font-size: 2.8rem;
	margin: 0 0 15px;
}
section.caption .caption-text {
	font-size: 2.0rem;
}
@media (max-width: 767px) {
	section.caption {
		padding: 0 15px 20px;
	}
	section.caption .caption-text {
		font-size: 1.8rem;
	}
}




/*---------------------------------------------

section.branches

---------------------------------------------*/
section.branches {
	background-color: #F7F6F0;
	padding: 40px 0 40px;
	position: relative;
	z-index: 1;
}
section.branches::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
	transition: 0.5s all;
	z-index: -1;
	left: 0;
	top: 0;
}
section.branches.js-loading::before {
	z-index: 2;
	opacity: 0.5;
}

section.branches button {
	cursor: pointer;
}
section.branches > .inner {
	width: 1280px;
	margin: 0 auto;
}
.step.step2,
.step.step3 {
	padding-top: 100px;
	background: url("../images/select/ic_arrow_step.svg") center 60px no-repeat;
	display: none;
}
.step.step2.open,
.step.step3.open {
	display: block;
}


.step-title {
	display: flex;
	background-color: #32327F;
	color: #fff;
	height: 75px;
	border-radius: 38px;
	align-items: center;
	overflow: hidden;
	margin: 50px 0;
}
.step-title-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 173px;
	height: 75px;
	background-color: rgba(255,255,255,0.12);
	font-size: 2.6rem;
}
.step-title-text {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc( 100% - 173px );
	font-size: 2.4rem;
}
.step-caption {
	text-align: center;
	font-size: 1.8rem;
	margin: 0 0 25px;;
}
.step-links {
	display: flex;
	flex-wrap: wrap;
	gap: 33px 13px;
}
.step2 .step-links,
.step3 .step-links {
	justify-content: center;
}
.step-links li {
	width: calc( 33% - 8px );
	height: 150px;
	position: relative;
}
.step-links li:nth-of-type(n+7) {
	width: calc( 16% - 4px );
	height: 118px;
	font-size: 1.6rem;
}
.step-links li > span {
	position: absolute;
	z-index: 2;
	right: 7px;
	top: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	cursor: pointer;
}
.step-links li > span::before {
	content: "";
	background: url("../images/select/ic_tips.svg") center center/contain no-repeat;
	width: 30px;
	height: 30px;
}
.step-links li button {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	border: 2px solid #32327F;
	background-color: #fff;
	box-shadow: 0 2px 0 0 #32327F;
	border-radius: 10px;
	padding: 5px 20px;
	font-size: 2.2rem;
	font-weight: bold;
	color: #32327F;
	position: relative;
	z-index: 1;
}
.step2 .step-links li,
.step3 .step-links li {
	width: 300px;
	height: 100px;
}
.step-links li.active button {
	background-color: #FFED67;
	height: calc( 100% + 2px );
	box-shadow: none;
}
.step-links li:nth-of-type(n+7) button {
	font-size: 1.5rem;
	padding: 5px 10px;
}
.step-links li button img {
	width: 90px;
}
.step-links li:nth-of-type(n+7) button img {
	width: 60px;
}
.step-links li button span {
	width: calc( 100% - 90px );
}
.step-links li:nth-of-type(n+7) button span {
	width: calc( 100% - 70px );
}
.step2 .step-links li button span,
.step3 .step-links li button span {
	width: 100% !important;
	font-size: 2.0rem;
}
@media (max-width: 767px) {
	section.branches {
		padding: 20px 0;
	}
	section.branches > .inner {
		box-sizing: border-box;
		width: 100%;
		padding: 0 15px;
	}
	.step.step2,
	.step.step3 {
		padding-top: 80px;
		background: url("../images/select/ic_arrow_step.svg") center 30px/160px auto no-repeat;
		display: none;
	}

	.step-title {
		border-radius: 10px;
		margin: 20px 0;
		flex-direction: column;
		height: auto;
	}
	.step-title-num {
		box-sizing: border-box;
		font-size: 2.0rem;
		padding: 10px;
		width: 100%;
		height: auto;
	}
	.step-title-text {
		box-sizing: border-box;
		width: 100%;
		padding: 10px;
		font-size: 2.1rem;
		text-align: center;
	}
	.step-links {
		gap: 15px 0;
		justify-content: space-between;
	}
	.step1 .step-links li {
		width: calc( 50% - 8px );
		height: 140px;
	}
	.step1 .step-links li:nth-of-type(n+7) {
		width: calc( 33% - 5px );
	}
	.step-links li > span {
		right: -5px;
		top: -5px;
	}
	.step-links li button {
		font-size: 1.8rem;
		flex-direction: column-reverse;
		justify-content: center;
	}
	.step-links li:nth-of-type(n+7) button {
		font-size: 1.4rem;
	}
	.step-links li button span,
	.step-links li:nth-of-type(n+7) button span {
		width: 100%;
	}
	.step-links li button img {
		height: 50px;
		margin-top: 10px;
	}
	
	.step-caption {
		margin-bottom: 25px;
		text-align: left;
	}
	.step2 .step-links,
	.step3 .step-links {
		gap: 12px 0;
		flex-direction: column;
	}
	.step2 .step-links li,
	.step3 .step-links li {
		width: 100%;
	}
}



/*---------------------------------------------

section.links

---------------------------------------------*/
section.links {
	display: none;
	position: relative;
	z-index: 1;
	background-color: #fff;
	padding: 80px 0 0;
	background: url("../images/top/bg_recommend_top.svg") center top no-repeat;
}
section.links.open {
	display: block;
}
section.links > .inner {
	width: 1280px;
	margin: 0 auto;
	padding: 40px 0 100px;
}
.links-column {
	border: 3px solid #202778;
	background-color: #E8F4FF;
	padding: 50px 140px;
	box-sizing: border-box;
	border-radius: 50px;;
}
.links-column-title {
	font-size: 3.0rem;
	line-height: 1em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 25px;;
}

.links-column-loan {
	background-color: #fff;
	color: #202778;
	padding: 40px;
	border-radius: 20px;
	text-align: center;
	display: none;
}
.links-column-loan.current {
	display: block;
}
.links-column-loan-title {
	font-weight: bold;
	font-size: 3.6rem;
}
.links-column-loan-caption {
	font-size: 1.8rem;
}
.links-column-loan-link {
	margin: 20px 0 0;
	display: flex;
	justify-content: center;
}
.links-column-loan-link a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	box-sizing: border-box;
	width: 265px;
	padding: 0 15px;
	height: 52px;
	background-color: #202778;
	border-radius: 26px;
	text-decoration: none;
	font-weight: bold;
}
.links-column-loan-link a::before,
.links-column-loan-link a::after {
	content: "";
	width: 24px;
	height: 24px;
}
.links-column-loan-link a::after {
	background: url("../images/common/ic_ci_arrow_wh.svg") center center/contain no-repeat;
}



.links-column-reselect {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.links-column-reselect button {
	cursor: pointer;
}
.links-column-reselect button span {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: underline;
}
.links-column-reselect button span::before {
	content: "";
	width: 23px;
	height: 25px;
	margin-right: 10px;
	text-decoration: none;
	background: url("../images/common/ic_reload_bl.svg") center center/contain no-repeat;
}

@media (max-width: 767px) {
	section.links {
		padding: 40px 0;
	}
	section.links > .inner {
		width: 100%;
		box-sizing: border-box;
		padding: 0 15px;;
	}
	.links-column {
		padding: 0 0 25px;
		border-radius: 30px;
	}
	.links-column-title {
		font-size: 2.4rem;
		line-height: calc( 32em/24 );
		margin-bottom: 0px;
		padding: 20px 10px;
	}

	.links-column-loan {
		padding: 20px;
		border-radius: 0;
	}
	.links-column-loan-title {
		font-size: 3.0rem;
		line-height: calc( 42em/30);
		margin: 10px 0;

	}
}






@media (min-width: 768px) {
}
@media (max-width: 767px) {
}