@charset "UTF-8";

/* ----------------------------------------
form専用共通css
ローンフォーム/お問い合わせ
---------------------------------------- */

/* config
---------------------------------------- */
.loan-form input[type="text"],
.loan-form input[type="tel"],
.loan-form input[type="email"],
.loan-form input[type="number"],
.loan-form textarea {
	width: 100%;
	padding: .5em .5em;
	font-size: 1em;
	line-height: 1.5;
	font-family: inherit;
	color: #000;
	background-color: #fff;
	border: 1px solid #727171;
	border-radius: .2em;
	vertical-align: top;
}

@media screen and (min-width: 799px) {
	.loan-form input[type="text"],
	.loan-form input[type="tel"],
	.loan-form input[type="email"],
	.loan-form input[type="number"],
	.loan-form textarea {
		padding: .4em .5em;
	}
}

.loan-form input::placeholder,
.loan-form textarea::placeholder {
	color: #aaa;
	opacity: 1;
}

.loan-form input:focus,
.loan-form textarea:focus {
	outline: none;
	border-color: #000;
	background-color: #fff;
}


/* フォーム全体 
---------------------------------------- */
.loan-form {
	width: min(100%, 900px);
	margin: 0 auto;
	color: #000;
}

.loan-form strong,
.loan-form b {
	font-weight: normal;
}



/* item style
---------------------------------------- */
/* 通常セレクト（テキスト入力に近い見た目） */
.loan-form select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: .5em .5em;
	border: 1px solid #727171;
	border-radius: 4px;
	background-color: #fff;
	color: #000;
	font-size: 1em;
	line-height: 1.5;
	font-family: inherit;
	cursor: pointer;
}

.loan-form select:focus {
	outline: none;
	border-color: #000;
}

/* 都道府県セレクトのみ（グレーグラデ＋上下三角＋縦線） */
.loan-form select[name="prefecture"],
.loan-form select[name="company-prefecture"] {
	-webkit-appearance: none;
	appearance: none;
	width: min(40%,280px);
	min-width: 200px;
	padding: .5em 40px .5em 12px;
	border: 1px solid #b0b0b0;
	border-radius: 2px;
	background-color: #e4e4e4;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath fill='%23222222' d='M6 2l4 5H2z'/%3E%3Cpath fill='%23222222' d='M6 14L2 9h8z'/%3E%3C/svg%3E"),
		linear-gradient(#d0d0d0, #d0d0d0),
		linear-gradient(180deg, #f5f5f5 0%, #d0d0d0 100%);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: right 5px center, right 24px center, 0 0;
	background-size: 14px 18px, 1px 100%, 100% 100%;
}

.loan-form select[name="prefecture"]:has(option[value=""]:checked),
.loan-form select[name="company-prefecture"]:has(option[value=""]:checked) {
	color: transparent;
}

.loan-form select[name="prefecture"] option,
.loan-form select[name="company-prefecture"] option {
	color: #000;
}

.loan-form select[name="prefecture"]::-ms-expand,
.loan-form select[name="company-prefecture"]::-ms-expand {
	display: none;
}

.loan-form select[name="prefecture"]:focus,
.loan-form select[name="company-prefecture"]:focus {
	outline: none;
	border-color: #888;
}

.loan-form textarea {
	min-height: 140px;
	resize: vertical;
}


/* layout
---------------------------------------- */


/* lead
---------------------------------------- */
.r-loan-form__lead {
	width: min( calc(100% - 2em) , 900px);
	margin: 0 auto 2em;
	margin-bottom: 2em;
	font-size: .95em;
	line-height: 1.4;
	font-feature-settings: "palt";
	color: #6a3906;
}
@media screen and (min-width: 799px) {
	.r-loan-form__lead,
	.loan-form__confirm-note {
		margin: 0 auto 3.7em;
		font-size: 1.2em;
		line-height: 1.65;
	}
}
.r-loan-form.is-confirm .r-loan-form__lead {
	display: none;
}





/* animetion
   全媒体共通・0.2s stagger
---------------------------------------- */
.r-loan-form[data-r-animate] .r-loan-form__lead {
	opacity: 0;
	transform: translateY(30px);
}
body.is-loaded .r-loan-form[data-r-animate] .r-loan-form__lead {
	animation: r-anim-fade-up 0.8s ease forwards;
	animation-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
	.r-loan-form[data-r-animate] .r-loan-form__lead {
		opacity: 1;
		transform: none;
		animation: none;
	}
}



/* no-js
---------------------------------------- */
.no-js .r-lower-ttl__inner,
.no-js .r-loan-form[data-r-animate] .r-loan-form__lead,
.no-js .r-loan-form[data-r-animate] .r-loan-form__form {
	opacity: 1;
}
.no-js .r-renewal--inquiry .r-inquiry[data-r-animate] .r-inquiry__lead,
.no-js .r-renewal--inquiry .r-inquiry[data-r-animate] .r-inquiry__heading,
.no-js .r-renewal--inquiry .r-inquiry[data-r-animate] .r-inquiry__form {
	opacity: 1;
}
@media screen and (min-width: 799px) {
    .no-js [data-r-animate] .r-anim {
        opacity: 1;
    }
}