@charset "UTF-8";

/* ================================================================================
vars
================================================================================ */
@media print, screen
{
:root
{

--C1: rgb(117 117 117);
--C2: rgb(199 0 42);

--G1: linear-gradient(180deg, var(--pre-approval) 0%, var(--C2) 100%);

--pagePadding: 20px

}
}

/* ================================================================================
svg
================================================================================ */
@media print, screen
{
.svgs
{
	z-index: 0;
	position: absolute;
	display: block;
	width: 0; height: 0;
	visibility: hidden;
	pointer-events: none;
}
}


/* ================================================================================
breadcrumb
================================================================================ */
@media print, screen
{

#breadcrumb{	padding-inline: var(--pagePadding);	}
#breadcrumb .nav
{
	--size: clamp(15px, 0.0285714286 * (100vw - 375px) + 15px, 18px);

	display: flex;	flex-wrap: wrap;	align-items: center;
	gap: 0.5rem;
	padding-block: 20px;
}
#breadcrumb .nav p
{
	color: var(--C1);
	font-size: var(--size);
	line-height: 1.3;
}
#breadcrumb .nav p a{	text-decoration: none;	}
#breadcrumb .nav .arrow
{
	width: calc(var(--size)/2);	aspect-ratio: 1/2;
	background: var(--C1);

	clip-path: polygon(0 0, 100% 50%, 0 100%, 0 calc(100% - 3px),calc(100% - 3px) 50%, 0 3px);
	transform: scale(0.8);
}

}
@media screen and (min-width: 842px)
{

#breadcrumb .nav p a:hover{	color: var(--primary);	text-decoration: underline;	}

}


/* ================================================================================
pre-approval
================================================================================ */
@media print, screen
{

#pre-approval
{
	--size: clamp(15px, 0.0285714286 * (100vw - 375px) + 15px, 18px);

	container-type: inline-size;
	padding-inline: var(--pagePadding);
}
#pre-approval > .inner{	padding: 20px 0 80px;	}

/* ========== titleArea ========== */
#pre-approval .titleArea
{
	width: 80cqw;
	padding-top: 7cqw;
	margin-inline: auto;
	background: url('../img/title_background.png') no-repeat top center / contain;
}
#pre-approval .titleArea h2
{
	font-size: 6cqw;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.05em;
}
#pre-approval .titleArea h2 span:nth-of-type(2)
{
	font-size: 1.5em;
	letter-spacing: 0.1em;
}

/* ========== stepArea ========== */
#pre-approval .stepArea
{
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18cqw;

	margin-top: 40px;
	margin-inline: auto;
}
#pre-approval .stepArea::before
{
	z-index: 1;
	position: absolute;
	top: calc(7.5cqw - 0.5px);	left: 5cqw;

	content: "";
	display: block;
	width: 80cqw;	height: 1px;
	
	background: var(--C2);
}
#pre-approval .stepArea [class^="number"]
{
	z-index: 2;
	position: relative;
}
#pre-approval .stepArea .circle
{
	display: flex;	justify-content: center;	align-items: center;
	width: 14cqw;	aspect-ratio: 1;
	margin-inline: auto;

	background: white;
	border: 1px solid var(--C2);
	border-radius: 50%;
}
#pre-approval .stepArea [class^="number"].active .circle{	background: var(--G1);	}
#pre-approval .stepArea .circle svg
{
	--color: var(--C2);
	display: block;
	width: 7cqw;	aspect-ratio: 28/24;
}
#pre-approval .stepArea [class^="number"].active .circle svg{	--color: white;	}
#pre-approval .stepArea p
{
	margin-top: 2cqw;

	color: var(--C1);
	font-size: 3.6cqw;
	text-align: center;
	letter-spacing: 0.05em;
}
#pre-approval .stepArea [class^="number"].active p{	color:var(--C2);	}

/* ========== formrunArea ========== */
#pre-approval .formrunArea{	margin-top: 40px;	}

}
@media screen and (max-width: 842px)
{

/* ========== stepArea ========== */
#pre-approval .stepArea{	gap: 10cqw;	}
#pre-approval .stepArea .circle{	width: 18cqw;	}
#pre-approval .stepArea .circle svg{	width: 8.5cqw;	}
#pre-approval .stepArea p{	font-size: 4.5cqw;	}

}


/* ================================================================================
formrun
================================================================================ */
@media print, screen
{

.formrun
{
--Cbg: rgb(242 242 247);
--Cframe: rgb(198 198 198);
--Calert: rgb(234 72 50);
--r: 4px;
}

.formrun .form-group{	margin-top: 25px;}
.formrun > *:first-child{	margin-top: 0;	}

.formrun .title
{
	display: flex;	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.formrun .title label
{
	font-size: 18px;
	line-height: 1;
}
.formrun .title .required,
.formrun .title .optional
{
	padding: 0.2em 0.5em 0.3em;

	background: var(--Calert);
	border-radius: var(--r);

	color: white;
	font-size: 15px;
	line-height: 1;
}
.formrun .title .required{	background: var(--Calert);	}
.formrun .title .optional{	background: var(--Cframe);	}

.formrun input[type="text"],
.formrun select
{
	display: block;
	width: 100%;

	padding: 1em;
	background: var(--Cbg);
	border-radius: var(--r);

	font-size: 20px;
}
.formrun input[type="text"].form-control-danger
{
	background: rgb(254 222 218);
	border: 2px solid var(--Calert);
}

.formrun select
{
	-webkit-appearance: none;
	appearance: none;
	padding-right: 3em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 0.7em;
	cursor: pointer;
}
.formrun select.formrun-has-error
{
	background: rgb(254 222 218);
	border: 2px solid var(--Calert);
}

.formrun textarea
{
	display: block;
	width: 100%;	height: 10em;

	padding: 1em;

	border: 1px solid var(--Cframe);
	border-radius: var(--r);
	background: white;

	font-size: 20px;
}
.formrun input[type="checkbox"]
{
	appearance: auto;
	width: 30px;	aspect-ratio: 1;
}

.formrun button[type="submit"]
{
	position: relative;

	display: block;
	width: 100%;

	padding: 1.5em 1em;
	margin-top: 60px;

	background: var(--Calert);
	border: 2px solid var(--Calert);

	color: white;
	font-size: 20px;

	transition: 0.2s ease-in-out 0s;
}
.formrun button[type="submit"]::after
{
	position: absolute;
	top: 50%;
	right: 1em;

	content: "";
	display: block;
	width: 0.8em;
	aspect-ratio: 1;

	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}
.formrun button[type="submit"]:hover
{
	background: white;
	color: var(--Calert);
}

.formrun .text-danger
{
	margin-top: 10px;
	color: var(--Calert);
	font-size: 14px;
}

.formrun .frPrivacy .form-check-label
{
	display: flex;	justify-content: center;	align-items: center;
	gap: 10px;
	font-size: 20px;
}
.formrun .frPrivacy .form-check-label a
{
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.formrun .frPrivacy .form-check-label a:hover{	text-decoration: none;	}


.formrun .confirmValue
{
	padding: 1em 0 1.5em;
	border-bottom: 1px solid var(--Cframe);
	font-size: 20px;
}


}
@media screen and (min-width: 842px)
{


}


/* ================================================================================
thanksArea
================================================================================ */
@media print, screen
{

.thanksArea{	padding: 40px 0 80px;	}
.thanksArea h3
{
	font-size: 30px;
	text-align: center;
}
.thanksArea .text1
{
	margin-top: 40px;

	font-size: 18px;
	line-height: 1.7;
	text-align: center;
}

.thanksArea .button
{
	position: relative;

	display: block;
	width: 100%;

	padding: 1.5em 1em;
	margin-top: 40px;

	background: var(--G1);
	border: 2px solid var(--pre-approval);

	color: white;
	font-size: 20px;

	transition: 0.2s ease-in-out 0s;
}
.thanksArea .button::after
{
	position: absolute;
	top: 50%;
	right: 1em;

	content: "";
	display: block;
	width: 0.8em;
	aspect-ratio: 1;

	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}
.thanksArea .button:hover
{
	background: white;
	color: var(--pre-approval);
}

.thanksArea .grayBox
{
	padding: 30px;
	margin-top: 40px;

	background: rgb(242 242 247);
	border-radius: 10px;
}
.thanksArea .grayBox h4
{
	font-size: 20px;
	text-align: center;
}
.thanksArea .grayBox h4 span
{
	display: inline-block;
	transform: scale(0.5, 1.8);
}
.thanksArea .grayBox .text2
{
	margin-top: 20px;

	font-size: 18px;
	line-height: 1.7;
}
.thanksArea .grayBox ul
{
	padding-left: 1em;
	margin-top: 20px;

	font-size: 18px;
	line-height: 1.7;
}
.thanksArea .grayBox ul li
{
	list-style: "●";
	padding-left: 0.5em;
}


}
@media screen and (min-width: 842px)
{



}




/* ================================================== END ================================================== */