@charset "UTF-8";

:where(form) {
	accent-color: #00A4FF;
	font-size: 16px;
	letter-spacing: .1em;
}

:where(input, textarea) {
	width: 100%;
	padding: 10px 15px;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: unset;
}

::placeholder {
	color: #BBBBBB;
}

input[type="radio"] {
	appearance: none;
	opacity: 0;
	position: absolute;
}

input[type="radio"] + label {
	display: block;
	padding-left: 42px;
	line-height: 1.56;
	position: relative;
	cursor: pointer;
}

input[type="radio"] + label::before {
	content: "";
	display: block;
	aspect-ratio: 1;
	width: 27px;
	background-color: #fff;
	border: 5px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
}

input[type="radio"]:focus + label::before {
	box-shadow: 0 0 3px #BBB;
}

input[type="radio"]:checked + label::before {
	background-color: #00A4FF;
}

input[type="checkbox"] {
	display: inline-block;
	aspect-ratio: 1;
	width: 25px;
	padding: 0;
	border-color: #BBB;
	vertical-align: bottom;
}

input[type="checkbox"] + label {
	cursor: pointer;
}

.sec-1 {
	margin-top: 57px;
}

.sec-1 em {
	color: #FF0000;
}

.sec-1 .heading-1 {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: .1em;
}

.sec-1 .text-1 {
	margin-top: 42px;
	line-height: 1.75;
}

.sec-1 .text-2 {
	margin-top: 20px;
}

.sec-1 .sec--bg {
	margin-top: 56px;
	padding-top: 45px;
	padding-bottom: 100px;
	background-color: #EDF4F8;
}

.sec-1 .heading-2 {
	padding-bottom: 18px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .05em;
	border-bottom: 1px solid #BBBBBB;
}

.sec-1 .heading-2:not(:first-child) {
	margin-top: 43px;
}

.sec-1 .form--list {
	display: grid;
}

.sec-1 .form--list .item {
	display: grid;
	row-gap: 18px;
}

.sec-1 .list-1 {
	row-gap: 39px;
	margin-top: 19px;
}

.sec-1 .list-1 .item-1 dd {
	display: grid;
	row-gap: 22px;
}

.sec-1 .list-1 .item-2 textarea {
	height: 233px;
}

.sec-1 .list-2 {
	row-gap: 30px;
	margin-top: 30px;
}

.sec-1 .list-2 .item-1 dd,
.sec-1 .list-2 .item-2 dd {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px;
}

.sec-1 .list-2 .item-name {
	display: grid;
	grid-template-columns: 2.2em 1fr;
	align-items: baseline;
	column-gap: 6px;
}

.sec-1 .list-2 .item-1 input,
.sec-1 .list-2 .item-2 input {
	max-width: 118px;
}

.sec-1 .list-2 .item-6-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
}

.sec-1 .list-2 .item-6-1 input[type="text"] {
	max-width: 175px;
}

.sec-1 .list-2 .item-6-1 .address-btn {
	display: grid;
	place-items: center;
	width: 154px;
	height: 48px;
	color: #fff;
	background-color: #636363;
	border-radius: 8px;
}

.sec-1 .list-2 .item-6-2,
.sec-1 .list-2 .item-6-3 {
	display: grid;
	row-gap: 10px;
}

.sec-1 .list-2 .item-7 dd {
	display: grid;
	row-gap: 10px;
}

.sec-1 .form--agreement {
	margin-top: 100px;
	line-height: 2.5;
}

.sec-1 .form--agreement a {
	color: #004EA1;
	text-decoration: underline;
}

.sec-1 .form--agreement .checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 73px;
}

.sec-1 .form--btn {
	max-width: 256px;
	margin-inline: auto;
	margin-top: 52px;
	text-align: center;
}

.sec-1 .form--btn button {
	width: 256px;
	max-width: 100%;
	min-height: 45px;
	padding: 5px 40px 7px;
	color: #fff;
	background-color: #191A1A;
	border-radius: 50px;
}

#toConfirm,
#finalSubmit {
	background-image: url("../img/arrow_submit.svg");
	background-position: center right 18px;
	background-size: 20px auto;
}

#backToEdit {
	background-image: url("../img/arrow_back.svg");
	background-position: center left 18px;
}

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

	.sec-1 .list-2 .item-1 dd,
	.sec-1 .list-2 .item-2 dd {
		gap: 43px;
	}

	.sec-1 .list-2 .item-name {
		column-gap: 14px;
	}

	.sec-1 .list-2 .item-1 input,
	.sec-1 .list-2 .item-2 input {
		max-width: unset;
	}

	.sec-1 .list-2 .item-6 dd {
		display: grid;
		grid-template-columns: 2.2em 1fr;
		align-items: baseline;
		gap: 14px;
	}

	.sec-1 .list-2 .item-6 input[type="text"] {
		grid-column-start: 2;
	}

	.sec-1 .list-2 .item-6 .item-6-1 {
		grid-template-columns: 2.2em max-content auto;
	}

	.sec-1 .form--btn {
		max-width: unset;
	}

	#toConfirm {
		margin-inline: auto;
	}
}

@media screen and (min-width: 1024px) {
	.sec-1 {
		margin-top: 75px;
	}

	.sec-1 .heading-1 {
		font-size: 32px;
	}

	.sec-1 .sec--bg {
		margin-top: 81px;
		padding-top: 75px;
		padding-bottom: 141px;
	}

	.sec-1 .form--list .item {
		grid-template-columns: 294px 1fr;
		row-gap: 31px;
	}

	.sec-1 .form--list .item dt {
		text-align: center;
	}

	.sec-1 .form--list .item dd {
		grid-column-start: 2;
	}

	.sec-1 .list-1 .item {
		align-items: start;
	}

	.sec-1 .list-2 .item {
		align-items: baseline;
	}

	.sec-1 .list-2 .item-6 .item-6-3 {
		row-gap: 31px;
	}

	.sec-1 .form--agreement {
		text-align: center;
	}

}