@charset "utf-8";

.progressbar {
	max-width: calc(295 / 16 * 1rem);
	position: relative;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
}

.progressbar li {
	position: relative;
	list-style-type: none;
	text-align: center;
	text-transform: uppercase;
	width: 33.333%;
	color: var(--white);
}

.progressbar:has(li:nth-child(4)) li {
	width: 25%;
}

.progressbar li:before {
	display: block;
	width: var(--size-32);
	height: var(--size-32);
	margin: 7px auto var(--size-16) auto;
	content: '';
	text-align: center;
	border-radius: 50%;
	background-color: #FFF;
}

.progressbar li:after {
	position: absolute;
	z-index: -1;
	top: 22px;
	left: -50%;
	width: 100%;
	height: 4px;
	content: '';
	background-color: #FFF;
}

.progressbar li:first-child:after {
	content: none;
}

.progressbar li.active,
.progressbar li.complete {
	color: var(--accent-color);
}

.progressbar li.active:before,
.progressbar li.complete:before {
	background-color: var(--accent-color);
}

.estimate {
	max-width: calc(840 / 16 * 1rem);
	width: calc(100% - 12.8%);
	margin: 0 auto var(--size-48);
	padding: var(--size-20) 0 var(--size-24);
	font-size: var(--size-17);
	display: flex;
	flex-direction: column;
	gap: var(--size-32);
}

.estimate2 {
	max-width: calc(840 / 16 * 1rem);
	width: calc(100% - 12.8%);
	margin: calc(48 / 16 * 1rem) auto calc(12 / 16 * 1rem);
	padding: var(--size-16);
	font-size: var(--size-17);
	background-color: #fff;
	border-radius: 4px;
}

.title {
	background-color: #FFF;
	border-radius: 4px;

}

.estimate__title {
	font-size: var(--size-20);
	padding: var(--size-20) 0;
	line-height: 1;
	width: max-content;
	margin: calc(7 / 16 * 1rem) auto calc(4 / 16 * 1rem);
	display: flex;
	align-items: center;
	gap: calc(6 / 16 * 1rem);

}



.estimate__title .fs--small {
	line-height: 1.6923;
	margin-bottom: var(--size-8);
}

.estimate__title .fs--medium {
	margin-top: var(--size-8);
}

.fs--medium {
	font-size: var(--size-17);
	letter-spacing: 0.03em;
}

.white__box {
	background-color: #FFF;
	border-radius: 4px;
	padding: var(--size-16) var(--size-16);
}

.white__container {
	display: flex;
	flex-direction: column;
	gap: var(--size-32);
}

.form__list {
	border-bottom: 0.5px solid var(--gold);
}

.detail__title {
	font-size: var(--size-20);
	color: var(--main-color);
	padding-bottom: var(--size-16);
	border-bottom: 0.5px solid var(--gold);
	line-height: 1;
	display: flex;
	align-items: center;
	gap: var(--size-16);
}

.regist__list--title {
	display: flex;
	align-items: center;
	padding-top: calc(24 / 16 * 1rem);
	gap: calc(7 / 16 * 1rem);
	margin-bottom: calc(10 / 16 * 1rem);
}

.regist__list--title:first-of-type {
	padding-top: calc(16 / 16 * 1rem);
}

.require {
	display: block;
	background-color: var(--main-color);
	color: #fff;
	border-radius: calc(33 / 16 * 1rem);
	font-size: var(--size-12);
	padding: 0 calc(8 / 16 * 1rem);
	line-height: calc(20 / 16 * 1rem);
}

.regist__list--data {
	border-bottom: 0.5px solid var(--gold);
	padding-bottom: var(--size-24);
}

.regist__list .regist__list--data:last-of-type {
	border: none;
	padding-bottom: 0;
}

.message__text {
	font-size: var(--size-13);
	color: var(--main-color);
	margin-bottom: calc(11 / 16 * 1rem);
}

.input {
	border: 1px solid #999999;
	border-radius: 4px;
	height: calc(48 / 16 * 1rem);
	padding: 0 var(--size-16);
	box-sizing: border-box;
}

.select__year {
	width: 73px;
	height: 48px;
	box-sizing: border-box;
}

.select__month {
	width: calc(60 / 16 * 1rem);
	height: 48px;
	box-sizing: border-box;
}

.select__day {
	width: calc(60 / 16 * 1rem);
	height: 48px;
	box-sizing: border-box;
}

.select__day2 {
	width: calc(82 / 16 * 1rem);
	height: 48px;
	box-sizing: border-box;
}

.select__time {
	width: 100%;
	pointer-events: auto !important;
}

.select__group {
	display: flex;
	gap: calc(3 / 16 * 1rem);
	align-items: center;
}

.select__group2 {
	display: flex;
	align-items: center;
	gap: calc(14 / 16 * 1rem);
}

.select__group3 {
	display: flex;
	align-items: center;
	gap: calc(10 / 16 * 1rem);
}

.select__airport {
	width: 100%;
	height: 48px;
	pointer-events: auto !important;
}

.date-select {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(4 / 16 * 1rem);
}

/* select */
.select-wrap {
	position: relative;
}

.select-wrap select {
	appearance: none;
	padding: 10px 5px 10px 5px;
	border: 1px solid #999;
	border-radius: 6px;
	pointer-events: none;
	/* optionを出さない */
}

/* 矢印 */
.date-row {
	display: flex;
	gap: 8px;
}

.date-unit {
	position: relative;
	height: 48px;
}

.date-unit input {
	width: 100%;
	padding: 10px 20px 10px 8px;
	font-size: 16px;
	/* iOSズーム防止 */
	box-sizing: border-box;
}

/* 実体の select（矢印エリアに被せる） */
.date-unit select {
	position: absolute;
	right: 0;
	top: 0;
	width: 32px;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.arrow::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-left: 2px solid #999;
	border-bottom: 2px solid #999;
	transform: translateY(-50%) rotate(-45deg);
	pointer-events: none;
}

/* カード */
.card-box {
	position: absolute;
	top: 115%;
	left: 0;
	background: #FFF7EC;
	display: grid;
	gap: 8px;
	padding: 10px;
	z-index: 10;
	border-radius: 4px;
}

.card-4col {
	display: grid;
	width: 79vw;
	left: -120%;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.card-4col[data-target="day2"] {
	left: -176%;
}

.card__year {
	width: calc(134 / 16 * 1rem);
}

.card__day {
	right: -18%;
	left: auto;
}

.card-box button {
	padding: 8px 10px;
	background: #fff;
	border: none;
	cursor: pointer;
	border: 1px solid #999;
	border-radius: 4px;
}

.card-box button:hover {
	background: #DEEDB4;
	border: 1px solid #5F7B17;
}

/* 非表示 */
.is-hidden {
	display: none;
}

/* radio非表示 */
.card-box input,
.card-grid input {
	display: none;
}

/* ボタン */
.card-box label,
.card-grid label {
	padding: 10px;
	border: 1px solid #bbb;
	border-radius: 6px;
	background: #fff;
	text-align: center;
	cursor: pointer;
}

/* 選択中 */
input:checked+label {
	background: #e6f2c5;
	border-color: #9aba5a;
	font-weight: bold;
}

.caution__text {
	font-size: var(--size-12);
	margin-top: calc(13 / 16 * 1rem);
}

.pc__only__text {
	display: none;
}

/* グループ */
.radio__group {
	display: flex;
	flex-direction: column;
	gap: calc(16 / 16 * 1rem);
}

.radio__group2 {
	display: flex;
	flex-direction: column;
	gap: calc(16 / 16 * 1rem);
}

.input__group {
	display: flex;
	align-items: center;
	gap: calc(8 / 16 * 1rem);
}

.input__group:first-of-type {
	margin-bottom: calc(16 / 16 * 1rem);
}

.radio-title {
	margin-bottom: 12px;
	font-weight: bold;
}

.line__wrap {
	display: flex;
	flex-direction: column;
	gap: calc(10 / 16 * 1rem);
}

.line__setting {
	background-color: #FFF7EC;
	padding: calc(16 / 16 * 1rem);
	max-width: calc(480 / 16 * 1rem);
	display: flex;
	flex-direction: column;
	gap: calc(8 / 16 * 1rem);
}

/* 横並び */
.radio-list {
	display: flex;
	gap: calc(32 / 16 * 1rem);
}

.rental-list {
	display: flex;
	gap: var(--size-16);
	flex-wrap: wrap;
}

.rental-list .radio-item {
	gap: calc(8 / 16 * 1rem);
}

/* ラベル全体をクリック可能に */
.radio-item {
	display: inline-flex;
	align-items: center;
	gap: var(--size-16);
	cursor: pointer;
}

/* ネイティブ非表示 */
.radio-item input {
	position: absolute;
	opacity: 0;
}

/* 丸 */
.radio-mark {
	width: 20px;
	height: 20px;
	border: 1px solid #999;
	border-radius: 50%;
	position: relative;
}

/* 選択時の中丸 */
.radio-item input:checked+.radio-mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	background: #5F7B17;
	border-radius: 50%;
}

.green__btn {
	border: 1px solid #5F7B17;
	color: #5F7B17;
	display: flex;
	height: 48px;
	justify-content: center;
	align-items: center;
	line-height: 1;
	border-radius: 72px;
	font-size: var(--size-17);
	transition: .3s;
	background-color: #FFF;
	width: calc(279 / 16 * 1rem);
	height: calc(50 / 16 * 1rem);
	background: url(../img/icon_left.png) left var(--size-14) center / calc(6 / 16 * 1rem) no-repeat, #fff;
}

.green__btn:hover {
	background-color: var(--green);
}


.sp__gap10 {
	display: flex;
	flex-direction: column;
	gap: calc(10 / 16 * 1rem);
}

.w__pattern1 {
	width: calc(161 / 16 * 1rem);
}

.w__pattern2 {
	width: calc(161 / 16 * 1rem);
}

.w__pattern3 {
	width: 100%;
}

.w__pattern4 {
	width: 100%;
}

.w__pattern5 {
	width: 100%;
}

.postcode__container {
	display: flex;
	justify-content: space-between;
}

.etc__text {
	font-size: var(--size-13);
	margin-top: calc(8 / 16 * 1rem);
	margin-bottom: calc(12 / 16 * 1rem);
}

.line__text {
	font-size: var(--size-17);
	margin-bottom: calc(8 / 16 * 1rem);
	color: var(--main-color)
}

.indent__text {
	padding-left: var(--size-16);
}

.form__list .form__list--data:last-of-type {
	border: none;
}

.green__btn2 {
	border: 1px solid var(--accent-color);
	color: var(--accent-color);
	background-color: var(--green);
	border-radius: calc(30 / 16 * 1rem);
	width: calc(279 / 16 * 1rem);
	height: calc(50 / 16 * 1rem);
	font-size: var(--size-17);
	transition: .3s;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--size-16);
	margin: calc(24 / 16 * 1rem) auto calc(24 / 16 * 1rem);
	cursor: pointer;
	background: url(../img/icon_right.png) right var(--size-14) center / calc(6 / 16 * 1rem) no-repeat, var(--green);
}

.green__btn2.regist {
	margin: 0;
}

.green__btn2:hover {
	background-color: var(--accent-color);
	color: #fff;
}

.w148 {
	width: calc(148 / 16 * 1rem);
}

.w120 {
	width: calc(120 / 16 * 1rem);
}

.w200 {
	width: calc(200 / 16 * 1rem) !important;
	margin: 0 auto;
}

.w2em {
	width: 2em;
	flex-shrink: 0;
}

.margin__0 {
	margin: 0 auto !important;
}

.icon--reverse {
	position: relative;
}

.icon--reverse::before {
	mask: url(../../assets/img/icon_reverse.png) no-repeat center / contain;
	-webkit-mask: url(../../assets/img/icon_reverse.png) no-repeat center / contain;
	background-color: var(--accent-color);
	width: calc(21 / 16 * 1rem);
	height: var(--size-20);
	transition: .3s;
}

.select__number {
	width: 100%;
	padding-left: calc(15 / 16 * 1rem) !important;
}

.name__list {
	display: flex;
	flex-direction: column;
	gap: calc(10 / 16 * 1rem);
}

.name__list--item {
	display: flex;
	align-items: center;
	gap: calc(10 / 16 * 1rem);
}

.confirm__btn {
	max-width: calc(294 / 16 * 1rem);
	margin: 0 auto;
}

.btn__area {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: calc(32 / 16 * 1rem);
}

.confirm__btn__area {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: calc(75 / 16 * 1rem);
}

.btn__area div {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: calc(48 / 16 * 1rem);
}

/* .link:hover {
	background-color: var(--green);
	opacity: 1;
} */

.sp__only {
	display: inline;
}

.link {
	background-size: calc(6 / 16 * 1rem);
}

.icon__left {
	background: url(../img/icon_left.png) left var(--size-14) center / calc(6 / 16 * 1rem) no-repeat, #fff;
}

.select__number {
	pointer-events: auto !important;
}

.select__line {
	pointer-events: auto !important;
}

.no__arrow::after {
	content: none;
}

.pc__only {
	display: none;
}

.select__group--wrapper {
	display: flex;
	flex-direction: column;
	gap: calc(15 / 16 * 1rem);
}

.time__wrap {
	width: calc(300 / 16 * 1rem);
	margin-top: var(--size-16);

}

.under__dot {
	border-bottom: 0.5px dotted var(--gold);
}


input[type="number"] {
	appearance: textfield;
	/* 標準 */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.upload__box {
	background-color: #FFF7EC;
	padding: calc(16 / 16 * 1rem);
	display: flex;
	gap: calc(16 / 16 * 1rem);
	margin: calc(16 / 16 * 1rem) 0;
	cursor: pointer;
}

.upload__box::before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	background-image: url(../img/icon_upload.png);
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.upload__select {
	display: flex;
	flex-wrap: wrap;
	gap: 0 calc(5 / 16 * 1rem);
	color: var(--main-color);
}

.upload__select span {
	cursor: pointer;
}

.usage__box li {
	position: relative;
	padding-left: 40px;
	margin-bottom: 16px;
	line-height: 1.6;
}

/* 丸数字 */
.usage__box li::before {
	content: counter(step);
	counter-increment: step;

	position: absolute;
	left: 0;
	top: 0.2em;

	width: 24px;
	height: 24px;
	border-radius: 50%;

	background-color: var(--main-color);
	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 14px;
	font-weight: bold;
}

/* カウンター初期化 */
.usage__box {
	counter-reset: step;
}

.certificate img {
	width: 100%;
	height: auto;
}

.checkboxItem {
	display: flex;
	align-items: center;
	column-gap: 4px;
	width: fit-content;
	line-height: 1;
	cursor: pointer;
}

.checkbox {
	appearance: none;
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid var(--gold);
	border-radius: 2px;
	cursor: pointer;
}

.checkbox:checked::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 3px;
	width: 12px;
	height: 6px;
	border-bottom: 2px solid var(--main-color);
	border-left: 2px solid var(--main-color);
	transform: rotate(-45deg);
}

.link--black {
	border-bottom: 1px solid #333;
	;
}

/*----------------------------
	完了画面
-----------------------------*/
.width--1 {
	font-size: var(--size-28);
	max-width: calc(840 / 16 * 1rem);
	width: calc(100% - 12.8%);
	margin: calc(57 / 16 * 1rem) auto 0;
	text-align: center;
}

.fc--green {
	color: var(--accent-color);
	margin: var(--size-22) auto var(--size-35);
	text-align: center;
}

.fs--medium {
	font-size: var(--size-17);
	letter-spacing: 0.03em;
}

/*----------------------------
	media query
-----------------------------*/
@media screen and (min-width: 768px) {
	.sp__only {
		display: none;
	}

	.estimate {
		margin-top: var(--size-27);
		margin-bottom: var(--size-74);
		padding: var(--size-50) var(--size-24) var(--size-50);
		background-color: #fff;
		gap: calc(64 / 16 * 1rem);
	}

	.estimate2 {
		margin-bottom: calc(53 / 16 * 1rem);
	}

	.title {
		margin-bottom: var(--size-31);
		border-bottom: 0.5px dashed var(--gold);
		border-radius: 0;

	}

	.estimate__title {
		margin: calc(7 / 16 * 1rem) auto calc(4 / 16 * 1rem);
	}

	.estimate__title .fs--medium {
		display: inline-block;
		margin-top: 0;
		padding-left: var(--size-10);
	}

	.white__box {
		border: 1px solid #E0E0E0;
		border-radius: calc(8 / 16 * 1rem);
		margin: 0 calc(64 / 16 * 1rem);
		padding: calc(32 / 16 * 1rem);
	}

	.detail__title {
		font-size: var(--size-20);
		padding-bottom: var(--size-24);
	}

	.form__list {
		display: grid;
		grid-template-columns: calc(122 / 16 * 1rem) 1fr;
		border-bottom: none;
	}

	.form__list:nth-of-type(2) {
		border-top: 0.5px solid var(--gold);
	}

	.application__information {
		grid-template-columns: calc(250 / 16 * 1rem) 1fr;
	}

	.form__list--title {
		flex-direction: column;
		border-bottom: 0.5px solid var(--gold);
		padding: calc(23 / 16 * 1rem) 0 calc(23 / 16 * 1rem) calc(10 / 16 * 1rem);
		align-items: flex-start;
		margin-bottom: 0;
	}

	.application__information .form__list--title {
		padding: calc(12 / 16 * 1rem) 0 calc(12 / 16 * 1rem) calc(10 / 16 * 1rem);
	}

	.form__list--data {
		padding-bottom: 0;
		padding: calc(23 / 16 * 1rem) 0 calc(23 / 16 * 1rem) 0;
	}

	.application__information .form__list--data {
		padding: calc(12 / 16 * 1rem) 0 calc(12 / 16 * 1rem) calc(10 / 16 * 1rem);
	}

	.input {
		padding: 0 var(--size-14);
	}

	.select__group {
		gap: calc(14 / 16 * 1rem);
	}

	.message__text {
		font-size: var(--size-17);
	}

	.date-select {
		gap: calc(14 / 16 * 1rem);
	}

	.select-wrap select {
		padding: 10px 32px 10px 12px;
	}

	.select__year {
		width: calc(120 / 16 * 1rem);
	}

	.select__month {
		width: calc(82 / 16 * 1rem);
	}

	.select__day {
		width: calc(82 / 16 * 1rem);
	}

	.card-4col {
		width: calc(295 / 16 * 1rem);
		left: auto;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.date-unit input {
		padding: 10px 32px 10px 8px;
	}

	.card__day {
		right: auto;
	}

	.card-4col[data-target="day2"] {
		left: auto;
	}

	.form__list .form__list--data:last-of-type {
		border-bottom: 0.5px solid var(--gold);
	}

	.pc__only__text {
		display: inline;
	}

	.caution__text {
		font-size: var(--size-17);
	}

	.airport__wrap {
		width: calc(300 / 16 * 1rem);
	}

	.sp__gap10 {
		flex-direction: row;
		gap: calc(30 / 16 * 1rem);
	}

	.postcode__container {
		justify-content: flex-start;
		gap: calc(32 / 16 * 1rem);
	}

	.etc__text {
		font-size: var(--size-17);
	}

	.btn__area {
		margin-top: calc(32 / 16 * 1rem);
	}

	.confirm__btn__area {
		margin-top: 0;
		display: flex;
		justify-content: center;
		gap: calc(106 / 16 * 1rem);
		flex-direction: row;
		margin-top: calc(104 / 16 * 1rem);
	}

	.green__btn2 {
		width: calc(279 / 16 * 1rem);
		margin: 0 auto;
		margin: calc(48 / 16 * 1rem) auto calc(48 / 16 * 1rem);
	}

	.icon--reverse:hover::before {
		background-color: #fff;
	}

	.w__pattern3 {
		max-width: calc(468 / 16 * 1rem);
	}

	.w__pattern4 {
		width: calc(300 / 16 * 1rem);
	}

	.w__pattern5 {
		max-width: calc(400 / 16 * 1rem);
	}

	.link {
		width: calc(279 / 16 * 1rem);
		font-size: var(--size-17);
		padding: var(--size-10) var(--size-16) var(--size-10);
		margin: 0;
	}

	.btn__area div {
		justify-content: center;
		align-items: center;
		gap: 0;
	}

	.line__setting {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.vertical__middle--dt {
		justify-content: center;
		display: flex;
	}

	.vertical__middle--dd {
		align-items: center;
		display: flex;
	}

	.pc__only {
		display: inline;
	}

	.rental-list {
		gap: calc(32 / 16 * 1rem);
	}

	.line__wrap {
		gap: calc(16 / 16 * 1rem);
	}

	.w200 {
		margin: 0 0 0 auto !important;

	}

	.date-unit input {
		padding: 10px 18px 10px 8px;
	}

	.radio__group2 {
		flex-direction: row;
		gap: calc(30 / 16 * 1rem);
	}

	.upload__box {
		gap: calc(48 / 16 * 1rem);
		align-items: center;
	}

	.certificate img {
		width: auto;
		max-width: 100%;
	}
}